@kwirthmagnify/kwirth-sender-timed 0.1.3 → 0.1.5

package/README.md

@@ -0,0 +1,84 @@
+# sender-timed
+
+Routes or drops messages based on **time-of-day windows** and optional **day-of-week** filters. Rules are evaluated in order — first match wins. If no rule matches, the `defaultAction` applies.
+
+## Use cases
+
+- Only forward alerts to on-call during business hours
+- Drop non-critical notifications at night
+- Route differently on weekends vs weekdays
+
+## Config fields
+
+| Field | Type | Required | Description |
+|---|---|---|---|
+| `name` | string | ✓ | Config name |
+| `timezone` | string | | IANA timezone (e.g. `Europe/Madrid`). Defaults to server local time. |
+| `rules` | JSON array | | Ordered list of `ITimedSenderRule` (see below) |
+| `defaultAction` | `send`\|`drop` | | Action when no rule matches (default: `drop`) |
+| `defaultSenderId` | string | | Sender to use for default `send` |
+| `defaultConfigName` | string | | Config name for default `send` |
+
+## Rule fields (`ITimedSenderRule`)
+
+| Field | Type | Required | Description |
+|---|---|---|---|
+| `from` | `"HH:mm"` | ✓ | Start of window (inclusive, 24h) |
+| `to` | `"HH:mm"` | ✓ | End of window (exclusive, 24h). If `to < from`, the window spans midnight. |
+| `days` | `number[]` | | Days of week: 0=Sun, 1=Mon … 6=Sat. All days if omitted. |
+| `action` | `send`\|`drop` | ✓ | What to do on match |
+| `senderId` | string | | Required when `action === "send"` |
+| `configName` | string | | Required when `action === "send"` |
+
+## Examples
+
+### Business hours only (Mon–Fri 09:00–18:00 → email, otherwise drop)
+
+```json
+{
+  "name": "biz-hours",
+  "timezone": "Europe/Madrid",
+  "rules": [
+    {
+      "from": "09:00", "to": "18:00",
+      "days": [1,2,3,4,5],
+      "action": "send",
+      "senderId": "email-smtp", "configName": "ops-team"
+    }
+  ],
+  "defaultAction": "drop"
+}
+```
+
+### Night silence (22:00–08:00 → drop, rest → send)
+
+```json
+{
+  "name": "no-nights",
+  "rules": [
+    { "from": "22:00", "to": "08:00", "action": "drop" }
+  ],
+  "defaultAction": "send",
+  "defaultSenderId": "console", "defaultConfigName": "default"
+}
+```
+
+### Weekend routing (Sat+Sun → Slack, weekdays → email)
+
+```json
+{
+  "name": "weekend-routing",
+  "rules": [
+    {
+      "from": "00:00", "to": "00:00",
+      "days": [0, 6],
+      "action": "send",
+      "senderId": "slack", "configName": "oncall"
+    }
+  ],
+  "defaultAction": "send",
+  "defaultSenderId": "email-smtp", "defaultConfigName": "team"
+}
+```
+
+> **Note:** A window where `from === to` (e.g. `"00:00"` to `"00:00"`) matches **all times** of the specified days.

package/build.mjs

@@ -0,0 +1,65 @@
+import esbuild from 'esbuild'
+import fs from 'fs'
+import path from 'path'
+
+const kwirthGlobalsPlugin = {
+    name: 'kwirth-globals',
+    setup(build) {
+        const globals = {
+            'react': 'window.__kwirth__.React',
+            '@mui/material': 'window.__kwirth__.MUI.material',
+            '@mui/icons-material': 'window.__kwirth__.MUI.icons',
+            '@kwirthmagnify/kwirth-common': 'window.__kwirth__.kwirthCommon',
+        }
+        for (const pkg of Object.keys(globals)) {
+            build.onResolve({ filter: new RegExp(`^${pkg.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}$`) }, () => ({
+                path: pkg,
+                namespace: 'kwirth-globals',
+            }))
+        }
+        build.onLoad({ filter: /.*/, namespace: 'kwirth-globals' }, (args) => ({
+            contents: `module.exports = ${globals[args.path]}`,
+            loader: 'js',
+        }))
+    },
+}
+
+fs.mkdirSync('dist', { recursive: true })
+
+await esbuild.build({
+    entryPoints: ['src/back/index.ts'],
+    bundle: true,
+    format: 'cjs',
+    platform: 'node',
+    target: 'node20',
+    outfile: 'dist/back.js',
+    loader: { '.ts': 'ts' },
+    minify: false,
+})
+console.log('Built dist/back.js')
+
+await esbuild.build({
+    entryPoints: ['src/front/index.tsx'],
+    bundle: true,
+    format: 'iife',
+    outfile: 'dist/front.js',
+    plugins: [kwirthGlobalsPlugin],
+    loader: { '.tsx': 'tsx', '.ts': 'ts' },
+    jsx: 'transform',
+    jsxFactory: 'React.createElement',
+    jsxFragment: 'React.Fragment',
+    target: 'es2020',
+    minify: false,
+})
+console.log('Built dist/front.js')
+
+const meta = JSON.parse(fs.readFileSync('package.json', 'utf-8'))
+const distMeta = {
+    id: meta.id,
+    name: meta.name,
+    displayName: meta.displayName,
+    version: meta.version,
+    description: meta.description,
+}
+fs.writeFileSync(path.join('dist', 'package.json'), JSON.stringify(distMeta, null, 2))
+console.log('Wrote dist/package.json')

package/{front.js → dist/front.js}

@@ -283,7 +283,7 @@
     const [originalFormName, setOriginalFormName] = (0, import_react.useState)();
     const [error, setError] = (0, import_react.useState)();
     (0, import_react.useEffect)(() => {
-      fetch(`${backendUrl}/senders/timed/configs`, authGet(accessString)).then((r) => r.json()).then(setConfigs).catch(() => {
+      fetch(`${backendUrl}/senders/timed/configs`, authGet(accessString)).then((r) => r.json()).then((data) => setConfigs(Array.isArray(data) ? data : data.configs ?? [])).catch(() => {
       }).finally(() => setLoading(false));
     }, []);
     const saveConfig = async () => {

package/dist/package.json

@@ -0,0 +1,7 @@
+{
+  "id": "timed",
+  "name": "@kwirthmagnify/kwirth-sender-timed",
+  "displayName": "Timed Sender",
+  "version": "0.1.5",
+  "description": "Timed sender for Kwirth — routes or drops messages based on time-of-day windows and day-of-week rules"
+}

package/package.json

@@ -1,7 +1,25 @@
-{
-  "id": "timed",
-  "name": "@kwirthmagnify/kwirth-sender-timed",
-  "displayName": "Timed Sender",
-  "version": "0.1.3",
-  "description": "Timed sender for Kwirth — routes or drops messages based on time-of-day windows and day-of-week rules"
-}
+{
+  "id": "timed",
+  "name": "@kwirthmagnify/kwirth-sender-timed",
+  "publisher": "@kwirthmagnify",
+  "version": "0.1.5",
+  "displayName": "Timed Sender",
+  "description": "Timed sender for Kwirth — routes or drops messages based on time-of-day windows and day-of-week rules",
+  "type": "module",
+  "scripts": {
+    "build": "node build.mjs",
+    "watch": "node watch.mjs"
+  },
+  "dependencies": {
+    "@kwirthmagnify/kwirth-common-back": "^0.5.10"
+  },
+  "devDependencies": {
+    "@mui/icons-material": "^7.1.2",
+    "@mui/material": "^7.1.2",
+    "@types/node": "^20.12.13",
+    "@types/react": "^19.2.16",
+    "@types/react-dom": "^19.2.3",
+    "esbuild": "^0.27.2",
+    "typescript": "^5.4.0"
+  }
+}

package/src/back/index.ts

@@ -0,0 +1,123 @@
+import { ISender, ISenderAccess, ISenderConfig, ISenderFieldDef, ISenderMessage } from '@kwirthmagnify/kwirth-common-back'
+
+const TIMEZONES = [
+    'UTC',
+    // Europe
+    'Europe/London', 'Europe/Dublin', 'Europe/Lisbon',
+    'Europe/Madrid', 'Europe/Paris', 'Europe/Berlin', 'Europe/Rome', 'Europe/Amsterdam',
+    'Europe/Brussels', 'Europe/Vienna', 'Europe/Zurich', 'Europe/Stockholm', 'Europe/Oslo',
+    'Europe/Copenhagen', 'Europe/Helsinki', 'Europe/Warsaw', 'Europe/Prague', 'Europe/Budapest',
+    'Europe/Bucharest', 'Europe/Athens', 'Europe/Istanbul', 'Europe/Kiev', 'Europe/Moscow',
+    // Americas
+    'America/New_York', 'America/Toronto', 'America/Montreal',
+    'America/Chicago', 'America/Winnipeg',
+    'America/Denver', 'America/Edmonton',
+    'America/Los_Angeles', 'America/Vancouver',
+    'America/Phoenix', 'America/Anchorage', 'America/Honolulu',
+    'America/Mexico_City', 'America/Bogota', 'America/Lima',
+    'America/Santiago', 'America/Buenos_Aires', 'America/Sao_Paulo',
+    'America/Caracas', 'America/Halifax', 'America/St_Johns',
+    // Asia
+    'Asia/Jerusalem', 'Asia/Beirut', 'Asia/Riyadh', 'Asia/Dubai', 'Asia/Tehran',
+    'Asia/Karachi', 'Asia/Kolkata', 'Asia/Colombo', 'Asia/Dhaka',
+    'Asia/Bangkok', 'Asia/Jakarta', 'Asia/Singapore', 'Asia/Kuala_Lumpur',
+    'Asia/Hong_Kong', 'Asia/Shanghai', 'Asia/Taipei',
+    'Asia/Seoul', 'Asia/Tokyo',
+    // Africa
+    'Africa/Casablanca', 'Africa/Lagos', 'Africa/Nairobi', 'Africa/Johannesburg', 'Africa/Cairo',
+    // Pacific / Australia
+    'Australia/Perth', 'Australia/Adelaide', 'Australia/Darwin',
+    'Australia/Brisbane', 'Australia/Sydney', 'Australia/Melbourne',
+    'Pacific/Auckland', 'Pacific/Fiji', 'Pacific/Honolulu',
+]
+
+// ─── Config ────────────────────────────────────────────────────────────────────
+
+export interface ITimedSenderRule {
+    from: string
+    to: string
+    days?: number[]
+    action: 'send' | 'drop'
+}
+
+export interface ITimedSenderConfig extends ISenderConfig {
+    name: string
+    rules: ITimedSenderRule[]
+    defaultAction?: 'send' | 'drop'
+    timezone?: string
+}
+
+// ─── Helpers ───────────────────────────────────────────────────────────────────
+
+function tzOffset(tz: string): string {
+    try {
+        const part = new Intl.DateTimeFormat('en', { timeZone: tz, timeZoneName: 'shortOffset' })
+            .formatToParts(new Date()).find(p => p.type === 'timeZoneName')?.value ?? ''
+        return part.replace('GMT', 'UTC')
+    } catch { return '' }
+}
+
+function parseMinutes(hhmm: string): number {
+    const [h, m] = hhmm.split(':').map(Number)
+    return (h ?? 0) * 60 + (m ?? 0)
+}
+
+function currentContext(timezone?: string): { minutes: number; day: number } {
+    const now = timezone
+        ? new Date(new Date().toLocaleString('en-US', { timeZone: timezone }))
+        : new Date()
+    return { minutes: now.getHours() * 60 + now.getMinutes(), day: now.getDay() }
+}
+
+function matchesWindow(rule: ITimedSenderRule, minutes: number, day: number): boolean {
+    if (rule.days && rule.days.length > 0 && !rule.days.includes(day)) return false
+    const from = parseMinutes(rule.from)
+    const to   = parseMinutes(rule.to)
+    return from <= to
+        ? minutes >= from && minutes < to                // normal: 09:00–18:00
+        : minutes >= from || minutes < to                // overnight: 22:00–06:00
+}
+
+// ─── Sender ────────────────────────────────────────────────────────────────────
+
+export class TimedSender implements ISender {
+    readonly id = 'timed'
+    private configs = new Map<string, ITimedSenderConfig>()
+
+    addConfig(config: ISenderConfig): void {
+        const tc = config as ITimedSenderConfig
+        if (!Array.isArray(tc.rules)) tc.rules = []
+        this.configs.set(tc.name, tc)
+    }
+
+    removeConfig(name: string): void {
+        this.configs.delete(name)
+    }
+
+    hasConfig(name: string): boolean {
+        return this.configs.has(name)
+    }
+
+    getConfigNames(): string[] {
+        return Array.from(this.configs.keys())
+    }
+
+    async send(_configName: string, _message: ISenderMessage): Promise<void> {
+        // timed sender is a filter used inside composite pipelines; standalone send is a no-op
+    }
+
+    getConfigSchema(): ISenderFieldDef[] {
+        return [
+            { name: 'name',          label: 'Name',           required: true },
+            { name: 'timezone',      label: 'Timezone',       type: 'select', options: TIMEZONES, labels: TIMEZONES.map(tz => { const off = tzOffset(tz); return off ? `${tz} (${off})` : tz }) } as unknown as ISenderFieldDef,
+            { name: 'rules',         label: 'Rules (JSON)',   type: 'json' },
+            { name: 'defaultAction', label: 'Default action', type: 'select', options: ['drop', 'send'] },
+        ]
+    }
+
+    async startSender(_senders: ISenderAccess): Promise<void> {}
+
+    async stopSender(): Promise<void> {}
+}
+
+export default TimedSender

package/src/front/TimedConfigDialog.tsx

@@ -0,0 +1,383 @@
+import React, { useEffect, useState } from 'react'
+import {
+    Box, Button, Checkbox, Chip, CircularProgress, Dialog, DialogActions, DialogContent,
+    DialogTitle, Divider, FormControl, IconButton, InputLabel,
+    MenuItem, Select, Stack, TextField, Tooltip, Typography
+} from '@mui/material'
+import { ContentCopy } from '@mui/icons-material'
+import { Add, Delete } from '@mui/icons-material'
+
+// ─── Auth helpers ─────────────────────────────────────────────────────────────
+
+function authGet(accessString: string): RequestInit {
+    return { headers: { Authorization: accessString ? `Bearer ${accessString}` : '', 'X-Kwirth-App': 'true' } }
+}
+
+function authDelete(accessString: string): RequestInit {
+    return { method: 'DELETE', headers: { Authorization: accessString ? `Bearer ${accessString}` : '', 'X-Kwirth-App': 'true' } }
+}
+
+function authPost(accessString: string, body: string): RequestInit {
+    return {
+        method: 'POST', body,
+        headers: { Authorization: accessString ? `Bearer ${accessString}` : '', 'X-Kwirth-App': 'true', 'Content-Type': 'application/json' },
+    }
+}
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+interface ITimedRule {
+    from: string
+    to: string
+    days?: number[]
+    action: 'send' | 'drop'
+}
+
+interface ITimedConfig {
+    name: string
+    description?: string
+    timezone?: string
+    rules: ITimedRule[]
+    defaultAction?: 'send' | 'drop'
+}
+
+interface ITimedConfigDialogProps {
+    onClose: () => void
+    backendUrl: string
+    accessString: string
+}
+
+// ─── Constants ────────────────────────────────────────────────────────────────
+
+const TIMEZONES = [
+    'UTC',
+    'Europe/London', 'Europe/Dublin', 'Europe/Lisbon',
+    'Europe/Madrid', 'Europe/Paris', 'Europe/Berlin', 'Europe/Rome', 'Europe/Amsterdam',
+    'Europe/Brussels', 'Europe/Vienna', 'Europe/Zurich', 'Europe/Stockholm', 'Europe/Oslo',
+    'Europe/Copenhagen', 'Europe/Helsinki', 'Europe/Warsaw', 'Europe/Prague', 'Europe/Budapest',
+    'Europe/Bucharest', 'Europe/Athens', 'Europe/Istanbul', 'Europe/Kiev', 'Europe/Moscow',
+    'America/New_York', 'America/Toronto', 'America/Montreal',
+    'America/Chicago', 'America/Winnipeg',
+    'America/Denver', 'America/Edmonton',
+    'America/Los_Angeles', 'America/Vancouver',
+    'America/Phoenix', 'America/Anchorage', 'America/Honolulu',
+    'America/Mexico_City', 'America/Bogota', 'America/Lima',
+    'America/Santiago', 'America/Buenos_Aires', 'America/Sao_Paulo',
+    'America/Caracas', 'America/Halifax', 'America/St_Johns',
+    'Asia/Jerusalem', 'Asia/Beirut', 'Asia/Riyadh', 'Asia/Dubai', 'Asia/Tehran',
+    'Asia/Karachi', 'Asia/Kolkata', 'Asia/Colombo', 'Asia/Dhaka',
+    'Asia/Bangkok', 'Asia/Jakarta', 'Asia/Singapore', 'Asia/Kuala_Lumpur',
+    'Asia/Hong_Kong', 'Asia/Shanghai', 'Asia/Taipei',
+    'Asia/Seoul', 'Asia/Tokyo',
+    'Africa/Casablanca', 'Africa/Lagos', 'Africa/Nairobi', 'Africa/Johannesburg', 'Africa/Cairo',
+    'Australia/Perth', 'Australia/Adelaide', 'Australia/Darwin',
+    'Australia/Brisbane', 'Australia/Sydney', 'Australia/Melbourne',
+    'Pacific/Auckland', 'Pacific/Fiji', 'Pacific/Honolulu',
+]
+
+function tzOffset(tz: string): string {
+    try {
+        const part = new Intl.DateTimeFormat('en', { timeZone: tz, timeZoneName: 'shortOffset' })
+            .formatToParts(new Date()).find(p => p.type === 'timeZoneName')?.value ?? ''
+        return part.replace('GMT', 'UTC')
+    } catch { return '' }
+}
+
+const DAY_LABELS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+
+function emptyRule(): ITimedRule {
+    return { from: '09:00', to: '18:00', action: 'send' }
+}
+
+function emptyConfig(): ITimedConfig {
+    return { name: '', rules: [], defaultAction: 'drop' }
+}
+
+// ─── Rule editor row ──────────────────────────────────────────────────────────
+
+const RuleRow: React.FC<{
+    rule: ITimedRule
+    onChange: (rule: ITimedRule) => void
+    onDelete: () => void
+}> = ({ rule, onChange, onDelete }) => {
+    const allDays = [0, 1, 2, 3, 4, 5, 6]
+    const selectedDays = rule.days ?? allDays
+
+    return (
+        <Box sx={{ borderBottom: 1, borderColor: 'divider', px: 1, py: 0.75, display: 'flex', alignItems: 'center', gap: 1 }}>
+            <Stack direction='row' spacing={1} alignItems='center' sx={{ flex: 1 }}>
+                <TextField size='small' label='From' type='time' sx={{ width: 110 }}
+                    value={rule.from} onChange={e => onChange({ ...rule, from: e.target.value })}
+                    InputLabelProps={{ shrink: true }} />
+                <TextField size='small' label='To' type='time' sx={{ width: 110 }}
+                    value={rule.to} onChange={e => onChange({ ...rule, to: e.target.value })}
+                    InputLabelProps={{ shrink: true }} />
+                <FormControl size='small' sx={{ minWidth: 110, flexShrink: 0 }}>
+                    <InputLabel>Action</InputLabel>
+                    <Select label='Action' value={rule.action}
+                        onChange={e => onChange({ ...rule, action: e.target.value as 'send' | 'drop' })}>
+                        <MenuItem value='drop'><Chip label='drop' size='small' color='error' sx={{ fontSize: 10, height: 18 }} /></MenuItem>
+                        <MenuItem value='send'><Chip label='send' size='small' color='success' sx={{ fontSize: 10, height: 18 }} /></MenuItem>
+                    </Select>
+                </FormControl>
+                <FormControl size='small' sx={{ flex: 1, minWidth: 160 }}>
+                    <InputLabel>Days</InputLabel>
+                    <Select
+                        multiple label='Days'
+                        value={selectedDays}
+                        onChange={e => {
+                            const val = e.target.value as number[]
+                            onChange({ ...rule, days: val.length === 0 || val.length === 7 ? undefined : [...val].sort((a, b) => a - b) })
+                        }}
+                        renderValue={sel => {
+                            const days = sel as number[]
+                            return days.length === 7 ? 'All days' : days.map(d => DAY_LABELS[d]).join(', ')
+                        }}
+                    >
+                        {DAY_LABELS.map((label, i) => (
+                            <MenuItem key={i} value={i} sx={{ py: 0.25 }}>
+                                <Checkbox checked={selectedDays.includes(i)} size='small' sx={{ p: 0.25 }} />
+                                <Typography variant='body2'>{label}</Typography>
+                            </MenuItem>
+                        ))}
+                    </Select>
+                </FormControl>
+            </Stack>
+            <IconButton size='small' color='error' onClick={onDelete} sx={{ alignSelf: 'center', flexShrink: 0 }}>
+                <Delete fontSize='small' />
+            </IconButton>
+        </Box>
+    )
+}
+
+// ─── Config form ──────────────────────────────────────────────────────────────
+
+const ConfigForm: React.FC<{
+    config: ITimedConfig
+    onChange: (config: ITimedConfig) => void
+}> = ({ config, onChange }) => {
+    const updateRule = (i: number, rule: ITimedRule) => {
+        const rules = [...config.rules]
+        rules[i] = rule
+        onChange({ ...config, rules })
+    }
+
+    const deleteRule = (i: number) => {
+        onChange({ ...config, rules: config.rules.filter((_, idx) => idx !== i) })
+    }
+
+    const addRule = () => {
+        onChange({ ...config, rules: [...config.rules, emptyRule()] })
+    }
+
+    return (
+        <Stack spacing={2}>
+            <Stack direction='row' spacing={1} alignItems='center'>
+                <TextField
+                    size='small' label='Name *' value={config.name}
+                    onChange={e => onChange({ ...config, name: e.target.value })}
+                    sx={{ flex: 2 }}
+                />
+                <FormControl size='small' sx={{ flex: 2 }}>
+                    <InputLabel>Timezone</InputLabel>
+                    <Select label='Timezone' value={config.timezone ?? ''}
+                        onChange={e => onChange({ ...config, timezone: e.target.value || undefined })}>
+                        <MenuItem value=''><em>Server local</em></MenuItem>
+                        {TIMEZONES.map(tz => {
+                            const off = tzOffset(tz)
+                            return <MenuItem key={tz} value={tz}>{tz}{off ? ` (${off})` : ''}</MenuItem>
+                        })}
+                    </Select>
+                </FormControl>
+                <FormControl size='small' sx={{ minWidth: 110, flexShrink: 0 }}>
+                    <InputLabel>Default</InputLabel>
+                    <Select label='Default' value={config.defaultAction ?? 'drop'}
+                        onChange={e => onChange({ ...config, defaultAction: e.target.value as 'send' | 'drop' })}>
+                        <MenuItem value='drop'><Chip label='drop' size='small' color='error' sx={{ fontSize: 10, height: 18 }} /></MenuItem>
+                        <MenuItem value='send'><Chip label='send' size='small' color='success' sx={{ fontSize: 10, height: 18 }} /></MenuItem>
+                    </Select>
+                </FormControl>
+            </Stack>
+
+            <TextField size='small' label='Description' value={config.description ?? ''}
+                onChange={e => onChange({ ...config, description: e.target.value || undefined })}
+                fullWidth multiline maxRows={2} />
+
+            <Divider><Typography variant='caption'>Rules (evaluated in order — first match wins)</Typography></Divider>
+
+            {config.rules.length === 0 && (
+                <Typography variant='body2' color='text.secondary'>No rules yet. Add one below.</Typography>
+            )}
+            {config.rules.map((rule, i) => (
+                <RuleRow key={i} rule={rule}
+                    onChange={r => updateRule(i, r)}
+                    onDelete={() => deleteRule(i)}
+                />
+            ))}
+            <Button size='small' startIcon={<Add />} onClick={addRule} sx={{ alignSelf: 'flex-start' }}>
+                Add rule
+            </Button>
+
+        </Stack>
+    )
+}
+
+// ─── Main dialog ──────────────────────────────────────────────────────────────
+
+const TimedConfigDialog: React.FC<ITimedConfigDialogProps> = ({ onClose, backendUrl, accessString }) => {
+    const [configs, setConfigs] = useState<ITimedConfig[]>([])
+    const [loading, setLoading] = useState(true)
+    const [saving, setSaving] = useState(false)
+    const [deletingName, setDeletingName] = useState<string | undefined>()
+    const [showForm, setShowForm] = useState(false)
+    const [formConfig, setFormConfig] = useState<ITimedConfig>(emptyConfig())
+    const [originalFormName, setOriginalFormName] = useState<string | undefined>()
+    const [error, setError] = useState<string | undefined>()
+
+    useEffect(() => {
+        fetch(`${backendUrl}/senders/timed/configs`, authGet(accessString))
+            .then(r => r.json()).then(data => setConfigs(Array.isArray(data) ? data : (data.configs ?? []))).catch(() => {})
+            .finally(() => setLoading(false))
+    }, [])
+
+    const saveConfig = async () => {
+        const trimmed = formConfig.name.trim()
+        if (!trimmed) { setError('Name is required'); return }
+        setSaving(true)
+        setError(undefined)
+        try {
+            const payload = { ...formConfig, name: trimmed }
+            const res = await fetch(`${backendUrl}/senders/timed/configs`, authPost(accessString, JSON.stringify(payload)))
+            if (!res.ok) throw new Error((await res.json()).error ?? `HTTP ${res.status}`)
+            if (originalFormName && originalFormName !== trimmed) {
+                await fetch(`${backendUrl}/senders/timed/configs/${encodeURIComponent(originalFormName)}`, authDelete(accessString))
+            }
+            setConfigs(prev => {
+                const withoutOld = originalFormName && originalFormName !== trimmed
+                    ? prev.filter(c => c.name !== originalFormName)
+                    : prev
+                const idx = withoutOld.findIndex(c => c.name === trimmed)
+                return idx >= 0 ? withoutOld.map((c, i) => i === idx ? payload : c) : [...withoutOld, payload]
+            })
+            setOriginalFormName(trimmed)
+            setFormConfig(payload)
+        } catch (err) {
+            setError(`Save failed: ${err}`)
+        } finally {
+            setSaving(false)
+        }
+    }
+
+    const deleteConfig = async (name: string) => {
+        setDeletingName(name)
+        try {
+            const res = await fetch(`${backendUrl}/senders/timed/configs/${encodeURIComponent(name)}`, authDelete(accessString))
+            if (!res.ok) throw new Error(`HTTP ${res.status}`)
+            setConfigs(prev => prev.filter(c => c.name !== name))
+        } catch (err) {
+            setError(`Delete failed: ${err}`)
+        } finally {
+            setDeletingName(undefined)
+        }
+    }
+
+    const startAdd = () => {
+        setFormConfig(emptyConfig())
+        setOriginalFormName(undefined)
+        setError(undefined)
+        setShowForm(true)
+    }
+
+    const startEdit = (config: ITimedConfig) => {
+        setFormConfig({ ...config })
+        setOriginalFormName(config.name)
+        setError(undefined)
+        setShowForm(true)
+    }
+
+    const startClone = (config: ITimedConfig) => {
+        setFormConfig({ ...config, name: `${config.name} (copy)` })
+        setOriginalFormName(undefined)
+        setError(undefined)
+        setShowForm(true)
+    }
+
+    const configSummary = (c: ITimedConfig) => {
+        const parts: string[] = []
+        if (c.timezone) parts.push(c.timezone)
+        if (c.rules.length > 0) parts.push(`${c.rules.length} rule(s)`)
+        parts.push(`default: ${c.defaultAction ?? 'drop'}`)
+        return parts.join(' · ')
+    }
+
+    return (
+        <Dialog open={true} maxWidth={false} sx={{ '& .MuiDialog-paper': { width: '900px', height: '640px' } }}>
+            <DialogTitle>Configure: Timed Sender</DialogTitle>
+            <DialogContent sx={{ display: 'flex', gap: 2, p: '16px !important', overflow: 'hidden', height: '100%' }}>
+
+                {/* Left — config list */}
+                <Box sx={{ width: 190, display: 'flex', flexDirection: 'column', gap: 1, flexShrink: 0 }}>
+                    <Typography variant='caption' color='text.secondary' fontWeight='bold'>Configs</Typography>
+                    <Box sx={{ flex: 1, border: 1, borderColor: 'divider', borderRadius: 1, overflowY: 'auto' }}>
+                        {loading
+                            ? <Box sx={{ p: 1 }}><CircularProgress size={16} /></Box>
+                            : configs.length === 0
+                                ? <Typography variant='caption' color='text.disabled' sx={{ p: 1, display: 'block' }}>No configs yet.</Typography>
+                                : configs.map(cfg => (
+                                    <Box key={cfg.name} sx={{ display: 'flex', alignItems: 'center', px: 1, py: 0.5, borderBottom: 1, borderColor: 'divider', borderLeft: formConfig.name === cfg.name && showForm ? 3 : 0, borderLeftColor: 'primary.main', bgcolor: formConfig.name === cfg.name && showForm ? 'action.selected' : 'transparent' }}>
+                                        <Box sx={{ flex: 1, minWidth: 0, overflow: 'hidden', cursor: 'pointer' }} onClick={() => startEdit(cfg)}>
+                                            <Typography variant='body2' fontWeight='bold' noWrap>{cfg.name}</Typography>
+                                            <Typography variant='caption' color='text.secondary' noWrap display='block'>{configSummary(cfg)}</Typography>
+                                        </Box>
+                                        <Tooltip title='Delete'>
+                                            <span>
+                                                <IconButton size='small' color='error' disabled={deletingName === cfg.name} onClick={() => deleteConfig(cfg.name)}>
+                                                    {deletingName === cfg.name ? <CircularProgress size={12} /> : <Delete sx={{ fontSize: 14 }} />}
+                                                </IconButton>
+                                            </span>
+                                        </Tooltip>
+                                    </Box>
+                                ))
+                        }
+                    </Box>
+                    <Stack direction='row' spacing={0.5}>
+                        <Button size='small' startIcon={<Add />} onClick={startAdd} sx={{ flex: 1 }}>New</Button>
+                        <Button size='small' startIcon={<ContentCopy />} onClick={() => { const c = configs.find(x => x.name === formConfig.name && showForm); if (c) startClone(c) }} disabled={!showForm || !originalFormName} sx={{ flex: 1 }}>Clone</Button>
+                    </Stack>
+                </Box>
+
+                <Divider orientation='vertical' flexItem />
+
+                {/* Right — editor */}
+                <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 1.5, minWidth: 0, overflow: 'hidden' }}>
+                    {showForm
+                        ? <>
+                            <Typography variant='caption' color='text.secondary' fontWeight='bold'>
+                                {originalFormName ? `Editing: ${originalFormName}` : 'New config'}
+                            </Typography>
+                            <Box sx={{ flex: 1, overflowY: 'auto', pt: 1 }}>
+                                <ConfigForm config={formConfig} onChange={setFormConfig} />
+                            </Box>
+                            <Stack direction='row' justifyContent='flex-end' alignItems='center' spacing={1}>
+                                {error && <Typography variant='caption' color='error' sx={{ flex: 1 }}>{error}</Typography>}
+                                <Button size='small' onClick={() => { setShowForm(false); setError(undefined) }}>Cancel</Button>
+                                <Button size='small' variant='contained' disabled={saving || !formConfig.name.trim()} onClick={saveConfig}>
+                                    {saving ? <CircularProgress size={14} /> : originalFormName ? 'Update' : 'Add'}
+                                </Button>
+                            </Stack>
+                        </>
+                        : <Box sx={{ m: 'auto', color: 'text.disabled' }}>
+                            <Typography variant='body2'>Select a config to edit or click New.</Typography>
+                        </Box>
+                    }
+                </Box>
+            </DialogContent>
+            <DialogActions sx={{ px: 2 }}>
+                <Button onClick={onClose}>Close</Button>
+            </DialogActions>
+        </Dialog>
+    )
+}
+
+export { TimedConfigDialog }
+export default TimedConfigDialog

package/src/front/index.tsx

@@ -0,0 +1,6 @@
+import TimedConfigDialog from './TimedConfigDialog'
+
+declare global { interface Window { __kwirth_senders__: Record<string, any> } }
+
+window.__kwirth_senders__ = window.__kwirth_senders__ ?? {}
+window.__kwirth_senders__['timed'] = TimedConfigDialog

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+    "compilerOptions": {
+        "target": "ES2020",
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "jsx": "react",
+        "strict": false,
+        "lib": ["ES2020", "DOM"],
+        "skipLibCheck": true,
+        "esModuleInterop": true
+    },
+    "include": ["src"]
+}

package/watch.mjs

@@ -0,0 +1,68 @@
+import esbuild from 'esbuild'
+import fs from 'fs'
+import path from 'path'
+
+const kwirthGlobalsPlugin = {
+    name: 'kwirth-globals',
+    setup(build) {
+        const globals = {
+            'react': 'window.__kwirth__.React',
+            '@mui/material': 'window.__kwirth__.MUI.material',
+            '@mui/icons-material': 'window.__kwirth__.MUI.icons',
+            '@kwirthmagnify/kwirth-common': 'window.__kwirth__.kwirthCommon',
+        }
+        for (const pkg of Object.keys(globals)) {
+            build.onResolve({ filter: new RegExp(`^${pkg.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}$`) }, () => ({ path: pkg, namespace: 'kwirth-globals' }))
+        }
+        build.onLoad({ filter: /.*/, namespace: 'kwirth-globals' }, (args) => ({
+            contents: `module.exports = ${globals[args.path]}`, loader: 'js',
+        }))
+    },
+}
+
+const notifyPlugin = (label) => ({
+    name: `notify-${label}`,
+    setup(build) {
+        build.onEnd(result => {
+            const t = new Date().toLocaleTimeString()
+            if (result.errors.length) {
+                console.error(`[${t}] ${label} FAILED: ${result.errors.map(e => e.text).join('; ')}`)
+            } else {
+                console.log(`[${t}] ${label} OK`)
+            }
+        })
+    },
+})
+
+fs.mkdirSync('dist', { recursive: true })
+const meta = JSON.parse(fs.readFileSync('package.json', 'utf-8'))
+fs.writeFileSync(path.join('dist', 'package.json'), JSON.stringify({ id: meta.id, name: meta.name, displayName: meta.displayName, version: meta.version, description: meta.description }, null, 2))
+
+const backCtx = await esbuild.context({
+    entryPoints: ['src/back/index.ts'],
+    bundle: true,
+    format: 'cjs',
+    platform: 'node',
+    target: 'node20',
+    outfile: 'dist/back.js',
+    loader: { '.ts': 'ts' },
+    minify: false,
+    plugins: [notifyPlugin('back')],
+})
+
+const frontCtx = await esbuild.context({
+    entryPoints: ['src/front/index.tsx'],
+    bundle: true,
+    format: 'iife',
+    outfile: 'dist/front.js',
+    plugins: [kwirthGlobalsPlugin, notifyPlugin('front')],
+    loader: { '.tsx': 'tsx', '.ts': 'ts' },
+    jsx: 'transform',
+    jsxFactory: 'React.createElement',
+    jsxFragment: 'React.Fragment',
+    target: 'es2020',
+    minify: false,
+})
+
+await Promise.all([backCtx.watch(), frontCtx.watch()])
+console.log('[watch] Watching src/ — back.js and front.js rebuild on every change.')