@polderlabs/bizar 9.0.0 → 10.0.7

package/bizar-dash/src/web/v8/views/Settings/SettingsView.tsx

@@ -71,6 +71,30 @@ import { fetchJson, FetchError } from '../../data/fetcher.js';
 
 type Section = { id: string; title: string; icon: LucideIcon };
 
+const COMMON_TIMEZONES: readonly string[] = [
+  'UTC',
+  'America/Los_Angeles',
+  'America/Denver',
+  'America/Chicago',
+  'America/New_York',
+  'America/Sao_Paulo',
+  'Europe/London',
+  'Europe/Berlin',
+  'Europe/Amsterdam',
+  'Europe/Paris',
+  'Europe/Madrid',
+  'Europe/Stockholm',
+  'Europe/Istanbul',
+  'Asia/Dubai',
+  'Asia/Kolkata',
+  'Asia/Singapore',
+  'Asia/Tokyo',
+  'Asia/Seoul',
+  'Asia/Shanghai',
+  'Australia/Sydney',
+  'Pacific/Auckland',
+];
+
 const SECTIONS: Section[] = [
   { id: 'general', title: 'General', icon: SettingsIcon },
   { id: 'theme', title: 'Theme', icon: Palette },
@@ -94,17 +118,29 @@ const SECTIONS: Section[] = [
 
 interface SettingsState {
   workspaceName: string;
+  workspaceTimezone: string;
   defaultView: 'overview' | 'tasks' | 'goals' | 'agents' | 'activity' | 'settings';
   themeAccent: string;
   densityBaseFont: number;
   tasksCompact: boolean;
   memoryCompact: boolean;
+  activityCompact: boolean;
   paletteHistory: boolean;
   paletteFuzzy: boolean;
   notifyAgentFinished: boolean;
   notifyCiFailed: boolean;
   notifyTokenBudget: boolean;
   notifyDailyDigest: boolean;
+  notifyChannel: 'toast' | 'system' | 'both' | 'silent';
+  storagePath: string;
+  cachePath: string;
+  sessionsPath: string;
+  cacheSizeMb: number;
+  hookPreToolUse: boolean;
+  hookPostToolUse: boolean;
+  hookTaskStart: boolean;
+  hookTaskResume: boolean;
+  hookUserPromptSubmit: boolean;
   activityRetentionDays: number;
   memoryAutoCommit: boolean;
   memoryScopeDefault: 'project' | 'global' | 'all';
@@ -121,17 +157,29 @@ interface SettingsState {
 
 const DEFAULTS: SettingsState = {
   workspaceName: 'Bizar Harness',
+  workspaceTimezone: typeof Intl !== 'undefined' ? Intl.DateTimeFormat().resolvedOptions().timeZone : 'UTC',
   defaultView: 'overview',
   themeAccent: '#5b8def',
   densityBaseFont: 13,
   tasksCompact: false,
   memoryCompact: true,
+  activityCompact: false,
   paletteHistory: true,
   paletteFuzzy: true,
   notifyAgentFinished: true,
   notifyCiFailed: true,
   notifyTokenBudget: true,
   notifyDailyDigest: false,
+  notifyChannel: 'toast',
+  storagePath: '~/.bizar/store.db',
+  cachePath: '~/.cache/bizar',
+  sessionsPath: '~/.claude/sessions',
+  cacheSizeMb: 256,
+  hookPreToolUse: true,
+  hookPostToolUse: true,
+  hookTaskStart: true,
+  hookTaskResume: true,
+  hookUserPromptSubmit: true,
   activityRetentionDays: 30,
   memoryAutoCommit: true,
   memoryScopeDefault: 'all',
@@ -164,14 +212,17 @@ function NativeSelect({
   defaultValue,
   onChange,
   children,
+  id_attr,
 }: {
   value?: string;
   defaultValue?: string;
   onChange?: (v: string) => void;
   children: ReactNode;
+  id_attr?: string;
 }): JSX.Element {
   return (
     <select
+      id={id_attr}
       value={value}
       defaultValue={defaultValue}
       onChange={(e) => onChange?.(e.target.value)}
@@ -194,6 +245,35 @@ export function SettingsView(): JSX.Element {
   const [settings, setSettings] = useState<SettingsState>(DEFAULTS);
   const [savedAt, setSavedAt] = useState<number | null>(null);
   const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState<string | null>(null);
+  const [lastAction, setLastAction] = useState<string | null>(null);
+
+  // Run an admin endpoint with confirm + busy state + error surface.
+  const runAdmin = async (label: string, method: 'POST' | 'DELETE', path: string, confirmMsg: string): Promise<void> => {
+    if (typeof window !== 'undefined' && typeof window.confirm === 'function' && !window.confirm(confirmMsg)) return;
+    setBusy(label);
+    setError(null);
+    try {
+      await fetchJson(path, { method });
+      setLastAction(`${label} @ ${new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })}`);
+    } catch (err) {
+      setError(err instanceof FetchError ? err.message : (err as Error).message);
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  // GET that triggers a browser download (NDJSON for the activity log).
+  const downloadFile = (path: string, filename: string): void => {
+    if (typeof window === 'undefined') return;
+    const a = document.createElement('a');
+    a.href = path;
+    a.download = filename;
+    a.rel = 'noopener';
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+  };
 
   const skillsRes = useFetch<{ skills?: { name: string; source: string }[] }>('/api/skills?kind=skills');
   const mcpsRes = useFetch<{ skills?: { name: string }[] }>('/api/skills?kind=mcps');
@@ -274,7 +354,7 @@ export function SettingsView(): JSX.Element {
   }, []);
 
   return (
-    <div ref={rootRef}>
+    <div ref={rootRef} data-testid="settings-view">
       <Grid cols={3} gap={5}>
         <aside style={{ position: 'sticky', top: 0, alignSelf: 'start' }}>
           <SettingsNav items={navItems} activeId={activeId} onSelect={handleSelect} />
@@ -293,6 +373,11 @@ export function SettingsView(): JSX.Element {
               </span>
             </Inline>
           )}
+          {lastAction !== null && (
+            <Inline align="center" justify="end" gap={2} style={{ fontSize: 'var(--fs-12)', color: 'var(--success)' }}>
+              <span>Last action:</span> <code style={{ fontFamily: 'var(--font-mono)' }}>{lastAction}</code>
+            </Inline>
+          )}
 
           {/* 1. General */}
           <SettingsSection id="general" title="General" description="Workspace identity + default landing page." icon={<SettingsIcon size={14} aria-hidden />}>
@@ -308,6 +393,18 @@ export function SettingsView(): JSX.Element {
                 />
               }
             />
+            <SettingsRow
+              id="workspace-timezone"
+              label="Timezone"
+              description="Used for activity timestamps + digests."
+              control={
+                <NativeSelect value={settings.workspaceTimezone} onChange={(v) => update('workspaceTimezone', v)} id_attr="workspace-timezone-select">
+                  {COMMON_TIMEZONES.map((tz) => (
+                    <option key={tz} value={tz}>{tz}</option>
+                  ))}
+                </NativeSelect>
+              }
+            />
             <SettingsRow
               id="default-view"
               label="Default view on launch"
@@ -358,7 +455,7 @@ export function SettingsView(): JSX.Element {
               label="Font family"
               description="Body type. System fonts reduce render time."
               control={
-                <NativeSelect defaultValue="inter">
+                <NativeSelect defaultValue="inter" onChange={(v) => void patch('themeFont', v)}>
                   <option value="inter">Inter</option>
                   <option value="system">System UI</option>
                   <option value="jetbrains">JetBrains Mono</option>
@@ -369,7 +466,18 @@ export function SettingsView(): JSX.Element {
               id="theme-radius"
               label="Border radius"
               description="0 = sharp; 16 = rounded."
-              control={<Slider defaultValue={[8]} min={0} max={16} step={1} />}
+              control={
+                <Inline align="center" gap={2}>
+                  <Slider
+                    defaultValue={[8]}
+                    min={0}
+                    max={16}
+                    step={1}
+                    onValueChange={(v) => void patch('themeRadius', v[0] ?? 8)}
+                  />
+                  <code style={{ fontFamily: 'var(--font-mono)' }}>{(settings as unknown as Record<string, unknown>).themeRadius as number ?? 8}px</code>
+                </Inline>
+              }
             />
           </SettingsSection>
 
@@ -406,7 +514,7 @@ export function SettingsView(): JSX.Element {
           <SettingsSection id="density-rules" title="Density rules" description="Override density per surface." icon={<Sparkles size={14} aria-hidden />}>
             <SettingsRow id="tasks-compact" label="Tasks page — compact by default" control={<Switch checked={settings.tasksCompact} onCheckedChange={(v) => update('tasksCompact', v)} />} />
             <SettingsRow id="memory-compact" label="Memory page — compact by default" control={<Switch checked={settings.memoryCompact} onCheckedChange={(v) => update('memoryCompact', v)} />} />
-            <SettingsRow id="activity-compact" label="Activity page — compact by default" control={<Switch onCheckedChange={(v) => patch('activityCompact', v)} />} />
+            <SettingsRow id="activity-compact" label="Activity page — compact by default" control={<Switch checked={settings.activityCompact} onCheckedChange={(v) => update('activityCompact', v)} />} />
           </SettingsSection>
 
           {/* 5. Command palette */}
@@ -420,7 +528,7 @@ export function SettingsView(): JSX.Element {
               label="Default scope"
               description="Where palette actions apply when no context."
               control={
-                <NativeSelect defaultValue="project">
+                <NativeSelect defaultValue="project" onChange={(v) => void patch('paletteScope', v)}>
                   <option value="project">Active project</option>
                   <option value="global">Global</option>
                 </NativeSelect>
@@ -441,7 +549,7 @@ export function SettingsView(): JSX.Element {
           {/* 7. Notifications */}
           <SettingsSection id="notifications" title="Notifications" description="When the harness should ping you." icon={<Bell size={14} aria-hidden />}>
             <SettingsRow id="n-agent-finished" label="Agent run finished" control={<Switch checked={settings.notifyAgentFinished} onCheckedChange={(v) => update('notifyAgentFinished', v)} />} />
-            <SettingsRow id="n-task-moved" label="Task moved between columns" control={<Switch defaultChecked onCheckedChange={(v) => patch('notifyTaskMoved', v)} />} />
+            <SettingsRow id="n-task-moved" label="Task moved between columns" control={<Switch defaultChecked onCheckedChange={(v) => void patch('notifyTaskMoved', v)} />} />
             <SettingsRow id="n-ci-failed" label="CI failed" control={<Switch checked={settings.notifyCiFailed} onCheckedChange={(v) => update('notifyCiFailed', v)} />} />
             <SettingsRow id="n-token-budget" label="Token budget 80%" control={<Switch checked={settings.notifyTokenBudget} onCheckedChange={(v) => update('notifyTokenBudget', v)} />} />
             <SettingsRow id="n-daily-digest" label="Daily digest at 09:00" control={<Switch checked={settings.notifyDailyDigest} onCheckedChange={(v) => update('notifyDailyDigest', v)} />} />
@@ -450,7 +558,7 @@ export function SettingsView(): JSX.Element {
               label="Channel"
               description="Where notifications render."
               control={
-                <NativeSelect defaultValue="toast">
+                <NativeSelect value={settings.notifyChannel} onChange={(v) => update('notifyChannel', v as SettingsState['notifyChannel'])}>
                   <option value="toast">In-app toast</option>
                   <option value="system">OS notification</option>
                   <option value="both">Both</option>
@@ -462,21 +570,67 @@ export function SettingsView(): JSX.Element {
 
           {/* 8. Storage */}
           <SettingsSection id="storage" title="Storage" description="Where local data lives." icon={<Database size={14} aria-hidden />}>
-            <SettingsRow id="store-path" label="Local store path" control={<code style={{ fontFamily: 'var(--font-mono)' }}>~/.bizar/store.db</code>} />
-            <SettingsRow id="cache-path" label="Cache directory" control={<code style={{ fontFamily: 'var(--font-mono)' }}>~/.cache/bizar</code>} />
-            <SettingsRow id="sessions-path" label="Claude Code sessions" control={<code style={{ fontFamily: 'var(--font-mono)' }}>~/.claude/sessions</code>} />
-            <SettingsRow id="cache-size" label="Cache size" control={<Count loading={false} value={42} />} />
+            <SettingsRow
+              id="store-path"
+              label="Local store path"
+              control={
+                <Input
+                  value={settings.storagePath}
+                  onChange={(e) => update('storagePath', e.target.value)}
+                  style={{ width: 280, fontFamily: 'var(--font-mono)' }}
+                />
+              }
+            />
+            <SettingsRow
+              id="cache-path"
+              label="Cache directory"
+              control={
+                <Input
+                  value={settings.cachePath}
+                  onChange={(e) => update('cachePath', e.target.value)}
+                  style={{ width: 280, fontFamily: 'var(--font-mono)' }}
+                />
+              }
+            />
+            <SettingsRow
+              id="sessions-path"
+              label="Claude Code sessions"
+              control={
+                <Input
+                  value={settings.sessionsPath}
+                  onChange={(e) => update('sessionsPath', e.target.value)}
+                  style={{ width: 280, fontFamily: 'var(--font-mono)' }}
+                />
+              }
+            />
+            <SettingsRow
+              id="cache-size"
+              label="Cache budget"
+              description="Soft cap (MB) before LRU eviction."
+              control={
+                <Inline align="center" gap={2}>
+                  <Slider
+                    value={[settings.cacheSizeMb]}
+                    onValueChange={(v) => update('cacheSizeMb', v[0] ?? 256)}
+                    min={64}
+                    max={4096}
+                    step={32}
+                  />
+                  <code style={{ fontFamily: 'var(--font-mono)' }}>{settings.cacheSizeMb} MB</code>
+                </Inline>
+              }
+            />
             <SettingsRow
               id="store-gc"
               label="Garbage collect"
               description="Prune empty sessions and orphaned tasks."
-              control={<Button variant="secondary">Run GC</Button>}
+              control={<Button variant="secondary" disabled={busy === 'gc'} onClick={() => void runAdmin('gc', 'POST', '/api/admin/gc', 'Run garbage collect?')}>{busy === 'gc' ? 'Running…' : 'Run GC'}</Button>}
             />
             <SettingsRow
               id="store-clear"
               label="Clear local cache"
               description="Destructive. Wipes the activity log and snapshots."
-              control={<Button variant="danger">Clear…</Button>}
+              control={<Button variant="danger" disabled={busy === 'clear'} onClick={() => void runAdmin('cache/clear', 'POST', '/api/admin/cache/clear', 'Clear dashboard cache? This is reversible but will log you out briefly.')}>{busy === 'clear' ? 'Clearing…' : 'Clear…'}</Button>}
             />
           </SettingsSection>
 
@@ -559,11 +713,11 @@ export function SettingsView(): JSX.Element {
           {/* 12. Hooks */}
           <SettingsSection id="hooks" title="Hooks" description="Executable hook scripts." icon={<Wrench size={14} aria-hidden />}>
             <SettingsRow id="hooks-count" label="Registered hooks" control={<Count loading={hooksRes.loading} value={hooksRes.data?.skills?.length ?? 0} />} />
-            <SettingsRow id="hooks-pretool" label="PreToolUse" description="Block writes to .env / secrets / node_modules." control={<Switch defaultChecked />} />
-            <SettingsRow id="hooks-posttool" label="PostToolUse" description="Log tool latency to ~/.config/bizar/hook-logs/." control={<Switch defaultChecked />} />
-            <SettingsRow id="hooks-taskstart" label="TaskStart" description="Prime AI with project context." control={<Switch defaultChecked />} />
-            <SettingsRow id="hooks-taskresume" label="TaskResume" description="Re-read state + check git log." control={<Switch defaultChecked />} />
-            <SettingsRow id="hooks-prompt" label="UserPromptSubmit" description="Tag prompts for routing." control={<Switch defaultChecked />} />
+            <SettingsRow id="hooks-pretool" label="PreToolUse" description="Block writes to .env / secrets / node_modules." control={<Switch checked={settings.hookPreToolUse} onCheckedChange={(v) => update('hookPreToolUse', v)} />} />
+            <SettingsRow id="hooks-posttool" label="PostToolUse" description="Log tool latency to ~/.config/bizar/hook-logs/." control={<Switch checked={settings.hookPostToolUse} onCheckedChange={(v) => update('hookPostToolUse', v)} />} />
+            <SettingsRow id="hooks-taskstart" label="TaskStart" description="Prime AI with project context." control={<Switch checked={settings.hookTaskStart} onCheckedChange={(v) => update('hookTaskStart', v)} />} />
+            <SettingsRow id="hooks-taskresume" label="TaskResume" description="Re-read state + check git log." control={<Switch checked={settings.hookTaskResume} onCheckedChange={(v) => update('hookTaskResume', v)} />} />
+            <SettingsRow id="hooks-prompt" label="UserPromptSubmit" description="Tag prompts for routing." control={<Switch checked={settings.hookUserPromptSubmit} onCheckedChange={(v) => update('hookUserPromptSubmit', v)} />} />
           </SettingsSection>
 
           {/* 13. Activity */}
@@ -582,13 +736,18 @@ export function SettingsView(): JSX.Element {
               id="activity-hide"
               label="Hide noisy event types"
               description="Comma-separated kinds. E.g. 'heartbeat,ping'."
-              control={<Input placeholder="heartbeat, ping, system" style={{ width: 280 }} />}
+              control={<Input
+                placeholder="heartbeat, ping, system"
+                defaultValue={String((settings as unknown as Record<string, unknown>).activityHide ?? '')}
+                onBlur={(e) => void patch('activityHide', e.target.value)}
+                style={{ width: 280 }}
+              />}
             />
             <SettingsRow
               id="activity-export"
               label="Export"
               description="Download the full activity log as NDJSON."
-              control={<Button variant="secondary">Export…</Button>}
+              control={<Button variant="secondary" onClick={() => downloadFile('/api/admin/activity/export', 'activity.ndjson')}>Export…</Button>}
             />
           </SettingsSection>
 
@@ -606,7 +765,7 @@ export function SettingsView(): JSX.Element {
                 </NativeSelect>
               }
             />
-            <SettingsRow id="memory-index" label="Re-index vault" description="Rebuild search index. May take a moment." control={<Button variant="secondary">Re-index</Button>} />
+            <SettingsRow id="memory-index" label="Re-index vault" description="Rebuild search index. May take a moment." control={<Button variant="secondary" disabled={busy === 'reindex'} onClick={() => void runAdmin('memory/reindex', 'POST', '/api/admin/memory/reindex', 'Rebuild the memory vault search index?')}>{busy === 'reindex' ? 'Re-indexing…' : 'Re-index'}</Button>} />
           </SettingsSection>
 
           {/* 15. Task defaults */}
@@ -639,7 +798,7 @@ export function SettingsView(): JSX.Element {
               id="task-assignee"
               label="Default assignee"
               description="Auto-assigns new tasks to this agent (empty = unassigned)."
-              control={<Input placeholder="odin" style={{ width: 240 }} />}
+              control={<Input placeholder="odin" defaultValue={String((settings as unknown as Record<string, unknown>).defaultTaskAssignee ?? '')} onBlur={(e) => void patch('defaultTaskAssignee', e.target.value)} style={{ width: 240 }} />}
             />
           </SettingsSection>
 
@@ -667,13 +826,18 @@ export function SettingsView(): JSX.Element {
                 </Inline>
               }
             />
-            <SettingsRow id="agent-bg" label="Spawn as background by default" control={<Switch onCheckedChange={(v) => patch('agentBackgroundDefault', v)} />} />
-            <SettingsRow id="agent-worktree" label="Always create a worktree" control={<Switch defaultChecked onCheckedChange={(v) => patch('agentWorktree', v)} />} />
+            <SettingsRow id="agent-bg" label="Spawn as background by default" control={<Switch defaultChecked={Boolean((settings as unknown as Record<string, unknown>).agentBackgroundDefault)} onCheckedChange={(v) => void patch('agentBackgroundDefault', v)} />} />
+            <SettingsRow id="agent-worktree" label="Always create a worktree" control={<Switch defaultChecked={Boolean((settings as unknown as Record<string, unknown>).agentWorktree ?? true)} onCheckedChange={(v) => void patch('agentWorktree', v)} />} />
             <SettingsRow
               id="agent-system-prompt"
               label="Extra system prompt"
               description="Appended to every agent's system prompt."
-              control={<Textarea rows={3} placeholder="You are a careful, methodical engineer…" />}
+              control={<Textarea
+                rows={3}
+                placeholder="You are a careful, methodical engineer…"
+                defaultValue={String((settings as unknown as Record<string, unknown>).agentSystemPrompt ?? '')}
+                onBlur={(e) => void patch('agentSystemPrompt', e.target.value)}
+              />}
             />
           </SettingsSection>
 
@@ -705,7 +869,7 @@ export function SettingsView(): JSX.Element {
             <SettingsRow
               id="privacy-telemetry"
               label="Send token usage telemetry"
-              control={<Switch onCheckedChange={(v) => patch('telemetryTokens', v)} />}
+              control={<Switch defaultChecked={Boolean((settings as unknown as Record<string, unknown>).telemetryTokens)} onCheckedChange={(v) => void patch('telemetryTokens', v)} />}
             />
           </SettingsSection>
 
@@ -728,19 +892,148 @@ export function SettingsView(): JSX.Element {
               description="Stop and relaunch the local server. Unsaved tasks are safe on disk."
               control={
                 <Inline align="center" gap={2}>
-                  <Button variant="danger"><RotateCw size={12} aria-hidden /> Restart…</Button>
-                  <Button variant="ghost"><Plus size={12} aria-hidden /> Rebuild</Button>
+                  <Button variant="danger" disabled={busy === 'restart'} onClick={() => void runAdmin('restart', 'POST', '/api/admin/restart', 'Restart the dashboard backend? You may need to relaunch the CLI if it does not come back.')}><RotateCw size={12} aria-hidden /> {busy === 'restart' ? 'Restarting…' : 'Restart…'}</Button>
+                  <Button variant="ghost" disabled={busy === 'rebuild'} onClick={() => void runAdmin('rebuild', 'POST', '/api/admin/rebuild', 'Rebuild the dashboard package? This runs `npm run build`.')}><Plus size={12} aria-hidden /> {busy === 'rebuild' ? 'Rebuilding…' : 'Rebuild'}</Button>
                 </Inline>
               }
             />
             <SettingsRow
               id="advanced-logs"
               label="Open logs folder"
-              control={<Button variant="secondary"><Trash2 size={12} aria-hidden /> Purge logs</Button>}
+              control={<Button variant="secondary" disabled={busy === 'purge-logs'} onClick={() => void runAdmin('logs/purge', 'POST', '/api/admin/logs/purge', 'Delete log files older than 14 days?') }><Trash2 size={12} aria-hidden /> {busy === 'purge-logs' ? 'Purging…' : 'Purge logs'}</Button>}
+            />
+          </SettingsSection>
+
+          {/* 19. Configuration — Reset + Plugin options (v10.0.4) */}
+          <SettingsSection
+            id="configuration"
+            title="Configuration"
+            description="Reset to defaults, and edit the plugin-options sidecar."
+            icon={<SettingsIcon size={14} aria-hidden />}
+          >
+            <SettingsRow
+              id="config-reset"
+              label="Reset settings to defaults"
+              description="Calls POST /api/settings/reset. Restores every key to its DEFAULT_SETTINGS value."
+              control={
+                <Inline align="center" gap={2}>
+                  <Button
+                    variant="danger"
+                    disabled={busy === 'settings-reset'}
+                    data-testid="settings-reset"
+                    onClick={() => {
+                      if (typeof window !== 'undefined' && typeof window.confirm === 'function'
+                          && !window.confirm('Reset every settings key to its default?')) return;
+                      setBusy('settings-reset');
+                      setError(null);
+                      (async () => {
+                        try {
+                          const next = await fetchJson<{ data?: Partial<SettingsState> }>('/api/settings/reset', { method: 'POST' });
+                          if (next?.data) setSettings({ ...DEFAULTS, ...next.data });
+                          setLastAction(`reset @ ${new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })}`);
+                        } catch (err) {
+                          setError(err instanceof FetchError ? err.message : (err as Error).message);
+                        } finally {
+                          setBusy(null);
+                        }
+                      })();
+                    }}
+                  >
+                    <RotateCw size={12} aria-hidden /> {busy === 'settings-reset' ? 'Resetting…' : 'Reset to defaults'}
+                  </Button>
+                </Inline>
+              }
+            />
+            <SettingsRow
+              id="config-plugin-options"
+              label="Plugin options"
+              description="JSON sidecar at ~/.config/bizar/plugin-options.json. Persisted via PUT /api/settings/plugin-options."
+              control={
+                <PluginOptionsEditor />
+              }
             />
           </SettingsSection>
         </Stack>
       </Grid>
     </div>
   );
+}
+
+/**
+ * PluginOptionsEditor — small JSON textarea bound to the
+ * `~/.config/bizar/plugin-options.json` sidecar. Separate component
+ * because the rest of SettingsView is one-shot-on-mount and we want
+ * the editor to survive parent re-renders without clobbering the
+ * in-flight edit buffer. v10.0.4 — adds UI wiring for the previously
+ * unwired PUT /api/settings/plugin-options endpoint.
+ */
+function PluginOptionsEditor(): JSX.Element {
+  const [text, setText] = useState<string>('{}');
+  const [busy, setBusy] = useState<boolean>(false);
+  const [savedAt, setSavedAt] = useState<number | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        const opts = await fetchJson<Record<string, unknown>>('/api/settings/plugin-options');
+        if (!cancelled) setText(JSON.stringify(opts ?? {}, null, 2));
+      } catch (err) {
+        if (!cancelled) setError(err instanceof FetchError ? err.message : (err as Error).message);
+      }
+    })();
+    return () => { cancelled = true; };
+  }, []);
+
+  const save = async (): Promise<void> => {
+    let parsed: unknown;
+    try { parsed = JSON.parse(text); } catch (err) {
+      setError(`Invalid JSON: ${(err as Error).message}`);
+      return;
+    }
+    setBusy(true);
+    setError(null);
+    try {
+      await fetchJson('/api/settings/plugin-options', { method: 'PUT', body: parsed as Record<string, unknown> });
+      setSavedAt(Date.now());
+    } catch (err) {
+      setError(err instanceof FetchError ? err.message : (err as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <Stack gap={2} style={{ width: '100%' }}>
+      <textarea
+        data-testid="plugin-options-form"
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        rows={6}
+        spellCheck={false}
+        style={{
+          width: '100%',
+          fontFamily: 'var(--font-mono)',
+          fontSize: 12,
+          padding: '8px',
+          background: 'var(--surface-1)',
+          color: 'var(--text-1)',
+          border: '1px solid var(--border)',
+          borderRadius: 'var(--radius-1)',
+        }}
+      />
+      <Inline align="center" gap={2}>
+        <Button variant="primary" disabled={busy} onClick={() => void save()}>
+          {busy ? 'Saving…' : 'Save plugin options'}
+        </Button>
+        {savedAt !== null && (
+          <span style={{ fontSize: 11, color: 'var(--text-2)' }}>
+            saved {new Date(savedAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
+          </span>
+        )}
+        {error && <span style={{ fontSize: 11, color: 'var(--danger)' }}>{error}</span>}
+      </Inline>
+    </Stack>
+  );
 }