Sievepad integration

CHANGELOG.md

@@ -2,6 +2,15 @@
 
 All notable changes to this project will be documented in this file. This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [1.0.11] - 2026-09-15
+
+### Added
+- Sievepad integration.
+
+### Changed
+
+### Fixed
+
 ## [1.0.10] - 2026-09-04
 
 ### Added

package.json

@@ -1,7 +1,7 @@
 {
   "name": "stalwart-webui",
   "private": true,
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "Stalwart WebUI",
   "type": "module",
   "scripts": {

src/components/common/EnterpriseUpsell.tsx

@@ -26,12 +26,20 @@ export function EnterpriseUpsell({ open, onClose }: EnterpriseUpsellProps) {
 
   return (
     <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
-      <DialogContent>
+      <DialogContent className="gap-6">
-        <DialogHeader>
+        <DialogHeader className="space-y-4">
           <DialogTitle>{t('enterprise.trialTitle')}</DialogTitle>
           <DialogDescription>{t('enterprise.trialDescription')}</DialogDescription>
         </DialogHeader>
-        <DialogFooter>
+        <DialogFooter className="gap-2 sm:items-center">
+          <a
+            href="https://stalw.art/compare#why-isnt-feature-x-open-source"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-center text-xs text-muted-foreground underline-offset-4 hover:underline sm:mr-auto sm:text-left"
+          >
+            {t('enterprise.whyNotFree')}
+          </a>
           <Button variant="outline" onClick={onClose}>
             {t('common.close')}
           </Button>

src/components/forms/DynamicForm.tsx

@@ -53,6 +53,7 @@ import { SECRET_MASK } from '@/lib/jmapUtils';
 import { toast } from '@/hooks/use-toast';
 import { logFormChange } from '@/lib/debug';
 import { FieldWidget } from '@/components/forms/FieldWidget';
+import { isSieveScriptField } from '@/lib/sievepad';
 
 import type { Field, Fields, Form, FormField, Schema } from '@/types/schema';
 import type { JmapSetResponse, JmapSetError, JmapMethodCall } from '@/types/jmap';
@@ -740,6 +741,7 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
   })();
 
   const sectionsToRender = buildSections(combinedForm, currentFields, isCreate, edition);
+  const scriptName = typeof formData.name === 'string' ? formData.name : '';
 
   return (
     <div className="mx-auto max-w-4xl space-y-6">
@@ -810,6 +812,9 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
                     readOnly={fieldReadOnly}
                     error={fieldError}
                     schema={schema}
+                    sieveScriptName={
+                      isSieveScriptField(resolved.obj.objectName, formField.name) ? scriptName : undefined
+                    }
                   />
                 );
 

src/components/forms/FieldWidget.tsx

@@ -24,6 +24,7 @@ import { Plus, X, Eye, EyeOff, Loader2, Search, Check, ChevronRight, Calendar as
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
 import { ExpressionEditor } from '@/components/expression/ExpressionEditor';
 import { OtpAuthField } from '@/components/forms/OtpAuthField';
+import { SievepadButton } from '@/components/forms/SievepadButton';
 import {
   bytesToHuman,
   humanToBytes,
@@ -59,6 +60,7 @@ export interface FieldWidgetProps {
   readOnly: boolean;
   error?: string;
   schema: Schema;
+  sieveScriptName?: string;
 }
 
 function getRequiredMarker(field: Field, readOnly: boolean): 'required' | 'optional' | null {
@@ -79,7 +81,7 @@ function getRequiredMarker(field: Field, readOnly: boolean): 'required' | 'optio
 
 export function FieldWidget(props: FieldWidgetProps) {
   const { t } = useTranslation();
-  const { field, formField, value, onChange, readOnly, error, schema } = props;
+  const { field, formField, value, onChange, readOnly, error, schema, sieveScriptName } = props;
   const ft = field.type;
   const edition = useEffectiveEdition();
 
@@ -132,7 +134,7 @@ export function FieldWidget(props: FieldWidgetProps) {
           />
         );
       case 'blobId':
-        return <BlobField value={value} onChange={onChange} readOnly={readOnly} />;
+        return <BlobField value={value} onChange={onChange} readOnly={readOnly} sieveScriptName={sieveScriptName} />;
       case 'objectId':
         return (
           <ObjectIdField
@@ -236,6 +238,9 @@ export function FieldWidget(props: FieldWidgetProps) {
         </div>
       )}
       {widget}
+      {sieveScriptName !== undefined && ft.type === 'string' && (
+        <SievepadButton scriptName={sieveScriptName} source={typeof value === 'string' ? value : ''} />
+      )}
       {error && <p className="text-xs text-destructive">{error}</p>}
     </div>
   );
@@ -986,9 +991,10 @@ interface BlobFieldProps {
   value: unknown;
   onChange: (value: unknown) => void;
   readOnly: boolean;
+  sieveScriptName?: string;
 }
 
-function BlobField({ value, onChange, readOnly }: BlobFieldProps) {
+function BlobField({ value, onChange, readOnly, sieveScriptName }: BlobFieldProps) {
   const { t } = useTranslation();
   const blobId = typeof value === 'string' ? value : null;
   const [content, setContent] = useState<string>('');
@@ -1054,6 +1060,7 @@ function BlobField({ value, onChange, readOnly }: BlobFieldProps) {
         rows={8}
         className="font-mono text-xs"
       />
+      {sieveScriptName !== undefined && <SievepadButton scriptName={sieveScriptName} source={content} />}
       {modified && (
         <p className="text-xs text-muted-foreground">
           {t('field.contentModified', 'Content modified (will be saved as a new blob)')}
@@ -1782,10 +1789,10 @@ function EnumMultiSelect({ enumName, items, onChange, readOnly, schema, minItems
   if (variants.length > 10) {
     const filtered = searchQuery
       ? variants.filter(
-        (v) =>
+          (v) =>
-          v.label.toLowerCase().includes(searchQuery.toLowerCase()) ||
+            v.label.toLowerCase().includes(searchQuery.toLowerCase()) ||
-          v.name.toLowerCase().includes(searchQuery.toLowerCase()),
+            v.name.toLowerCase().includes(searchQuery.toLowerCase()),
-      )
+        )
       : variants;
 
     return (

src/components/forms/SievepadButton.tsx

@@ -0,0 +1,97 @@
+/*
+ * SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
+ */
+
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Bug } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { toast } from '@/hooks/use-toast';
+import { dismissSievepadWarning, isSievepadWarningDismissed, openInSievepad } from '@/lib/sievepad';
+
+interface SievepadButtonProps {
+  scriptName: string;
+  source: string;
+}
+
+export function SievepadButton({ scriptName, source }: SievepadButtonProps) {
+  const { t } = useTranslation();
+  const [warningOpen, setWarningOpen] = useState(false);
+  const [dontShowAgain, setDontShowAgain] = useState(false);
+
+  const open = () => {
+    openInSievepad(scriptName || t('sievepad.defaultName', 'Sieve script'), source).catch(() => {
+      toast({ title: t('sievepad.failed', 'Failed to open Sievepad.'), variant: 'destructive' });
+    });
+  };
+
+  const handleClick = () => {
+    if (isSievepadWarningDismissed()) {
+      open();
+    } else {
+      setDontShowAgain(false);
+      setWarningOpen(true);
+    }
+  };
+
+  const handleContinue = () => {
+    if (dontShowAgain) dismissSievepadWarning();
+    setWarningOpen(false);
+    open();
+  };
+
+  return (
+    <>
+      <div className="flex justify-end">
+        <Button type="button" variant="outline" size="sm" onClick={handleClick} disabled={!source.trim()}>
+          <Bug className="h-4 w-4" />
+          {t('sievepad.debug', 'Debug')}
+        </Button>
+      </div>
+      <Dialog open={warningOpen} onOpenChange={setWarningOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{t('sievepad.warningTitle', 'Debug in Sievepad')}</DialogTitle>
+            <DialogDescription>
+              {t(
+                'sievepad.warningDescription',
+                'A new tab will open sievepad.com with a copy of this script. Sievepad compiles and runs the script entirely in your browser: nothing is uploaded to or stored on any server.',
+              )}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex items-center gap-2">
+            <Checkbox
+              id="sievepad-dont-show-again"
+              checked={dontShowAgain}
+              onCheckedChange={(checked) => setDontShowAgain(checked === true)}
+            />
+            <Label htmlFor="sievepad-dont-show-again" className="text-sm font-normal">
+              {t('sievepad.dontShowAgain', "Don't show this again")}
+            </Label>
+          </div>
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={() => setWarningOpen(false)}>
+              {t('common.cancel')}
+            </Button>
+            <Button type="button" onClick={handleContinue}>
+              {t('common.continue')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

src/i18n/en.json

@@ -136,7 +136,8 @@
     "trialDescription": "Get access to advanced features including multi-tenancy, AI-powered spam filtering, alerts, and more.",
     "trialButton": "Start 30-Day Free Trial",
     "requestTrial": "Request a free trial to unlock this feature.",
-    "ossHidden": "This feature is not available in the open-source edition."
+    "ossHidden": "This feature is not available in the open-source edition.",
+    "whyNotFree": "Why is this not free?"
   },
   "errorBoundary": {
     "title": "Something went wrong",
@@ -340,6 +341,14 @@
     "periodValue": "Period value"
   },
   "sections": "Sections",
+  "sievepad": {
+    "debug": "Debug",
+    "defaultName": "Sieve script",
+    "dontShowAgain": "Don't show this again",
+    "failed": "Failed to open Sievepad.",
+    "warningDescription": "A new tab will open sievepad.com with a copy of this script. Sievepad compiles and runs the script entirely in your browser: nothing is uploaded to or stored on any server.",
+    "warningTitle": "Debug in Sievepad"
+  },
   "toggleTheme": "Toggle theme",
   "tracing": {
     "addFilter": "Add filter",

src/lib/sievepad.test.ts

@@ -0,0 +1,47 @@
+/*
+ * SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
+ */
+
+import { inflateRawSync } from 'node:zlib';
+import { describe, expect, it } from 'vitest';
+
+import { SIEVEPAD_URL, isSieveScriptField, sievepadLink } from './sievepad';
+
+function decode(link: string): unknown {
+  const token = new URLSearchParams(new URL(link).hash.slice(1)).get('w') ?? '';
+  return JSON.parse(inflateRawSync(Buffer.from(token, 'base64url')).toString('utf8'));
+}
+
+describe('sievepadLink', () => {
+  it('encodes the script as a single main entry', async () => {
+    const source = 'require "imap4flags";\r\naddflag "\\\\Seen";\r\n';
+    const link = await sievepadLink('Filters é', source);
+
+    expect(link.startsWith(`${SIEVEPAD_URL}#w=`)).toBe(true);
+    expect(link.slice(`${SIEVEPAD_URL}#w=`.length)).toMatch(/^[A-Za-z0-9_-]+$/);
+    expect(decode(link)).toEqual({
+      v: 1,
+      name: 'Filters é',
+      scripts: [{ name: 'main', source: 'require "imap4flags";\naddflag "\\\\Seen";\n' }],
+      messages: [],
+      settings: {},
+    });
+  });
+
+  it('truncates long workspace names', async () => {
+    const link = await sievepadLink('x'.repeat(200), 'keep;');
+    expect((decode(link) as { name: string }).name).toHaveLength(80);
+  });
+});
+
+describe('isSieveScriptField', () => {
+  it('matches only the known script fields', () => {
+    expect(isSieveScriptField('x:SieveUserScript', 'contents')).toBe(true);
+    expect(isSieveScriptField('x:SieveSystemScript', 'contents')).toBe(true);
+    expect(isSieveScriptField('SieveScript', 'blobId')).toBe(true);
+    expect(isSieveScriptField('SieveScript', 'name')).toBe(false);
+    expect(isSieveScriptField('x:Domain', 'contents')).toBe(false);
+  });
+});

src/lib/sievepad.ts

@@ -0,0 +1,77 @@
+/*
+ * SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
+ */
+
+export const SIEVEPAD_URL = 'https://sievepad.com/';
+
+const SIEVEPAD_FORMAT_VERSION = 1;
+const SIEVEPAD_MAX_NAME_LENGTH = 80;
+const SIEVEPAD_MAIN_SCRIPT = 'main';
+const BASE64_CHUNK_SIZE = 0x8000;
+const WARNING_DISMISSED_KEY = 'stalwart-sievepad-warning-dismissed';
+
+const SIEVE_SCRIPT_FIELDS: Record<string, string> = {
+  'x:SieveSystemScript': 'contents',
+  'x:SieveUserScript': 'contents',
+  SieveScript: 'blobId',
+};
+
+export function isSieveScriptField(objectName: string, fieldName: string): boolean {
+  return SIEVE_SCRIPT_FIELDS[objectName] === fieldName;
+}
+
+function toBase64Url(bytes: Uint8Array): string {
+  let binary = '';
+  for (let i = 0; i < bytes.length; i += BASE64_CHUNK_SIZE) {
+    binary += String.fromCharCode(...bytes.subarray(i, i + BASE64_CHUNK_SIZE));
+  }
+  return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+}
+
+export async function sievepadLink(name: string, source: string, base = SIEVEPAD_URL): Promise<string> {
+  const json = JSON.stringify({
+    v: SIEVEPAD_FORMAT_VERSION,
+    name: name.slice(0, SIEVEPAD_MAX_NAME_LENGTH),
+    scripts: [{ name: SIEVEPAD_MAIN_SCRIPT, source: source.replace(/\r\n/g, '\n') }],
+    messages: [],
+    settings: {},
+  });
+  const stream = new Blob([new TextEncoder().encode(json)]).stream().pipeThrough(new CompressionStream('deflate-raw'));
+  const packed = new Uint8Array(await new Response(stream).arrayBuffer());
+  return `${base}#w=${toBase64Url(packed)}`;
+}
+
+export async function openInSievepad(name: string, source: string): Promise<void> {
+  const tab = window.open('about:blank', '_blank');
+  if (tab) tab.opener = null;
+  let link: string;
+  try {
+    link = await sievepadLink(name, source);
+  } catch (err) {
+    tab?.close();
+    throw err;
+  }
+  if (tab) {
+    tab.location.replace(link);
+  } else {
+    window.open(link, '_blank', 'noopener,noreferrer');
+  }
+}
+
+export function isSievepadWarningDismissed(): boolean {
+  try {
+    return localStorage.getItem(WARNING_DISMISSED_KEY) === 'true';
+  } catch {
+    return false;
+  }
+}
+
+export function dismissSievepadWarning(): void {
+  try {
+    localStorage.setItem(WARNING_DISMISSED_KEY, 'true');
+  } catch {
+    return;
+  }
+}