dsh-live-voice 0.3.0 → 0.3.2

package/src/modules/settings/models/settingsHost.ts

@@ -0,0 +1,45 @@
+import { readFile, mkdir, writeFile, rename, rm } from 'node:fs/promises';
+import { homedir } from 'node:os';
+import { dirname, join } from 'node:path';
+import { randomUUID } from 'node:crypto';
+import { normalizeSettings } from '../../core/settings.js';
+
+/** Host-wide preferences, shared by every authenticated browser. */
+export function createSettingsStore(
+  path = join(homedir(), '.dsh', 'dsh-live-voice.settings.json'),
+) {
+  let queue = Promise.resolve();
+  async function load() {
+    try {
+      return normalizeSettings(JSON.parse(await readFile(path, 'utf8')));
+    } catch (error) {
+      if (error.code === 'ENOENT') return normalizeSettings({});
+      throw error;
+    }
+  }
+  return {
+    load: () => queue.then(load),
+    save(patch: unknown) {
+      const operation = queue.then(async () => {
+        const settings = normalizeSettings({ ...(await load()), ...(patch as object) });
+        await mkdir(dirname(path), { recursive: true, mode: 0o700 });
+        const temporary = path + '.' + randomUUID() + '.tmp';
+        try {
+          await writeFile(temporary, JSON.stringify(settings, null, 2) + '\n', {
+            mode: 0o600,
+            flag: 'wx',
+          });
+          await rename(temporary, path);
+        } finally {
+          await rm(temporary, { force: true });
+        }
+        return settings;
+      });
+      queue = operation.then(
+        () => {},
+        () => {},
+      );
+      return operation;
+    },
+  };
+}

package/src/modules/settings/models/settingsStorage.ts

@@ -1,14 +1,49 @@
 import { normalizeSettings } from '../../core/settings.js';
 export const SETTINGS_STORAGE_KEY = 'dsh-live-voice.settings';
-export function readSettings(storage: Pick<Storage, 'getItem'> = localStorage) {
-  try {
-    return normalizeSettings(JSON.parse(storage.getItem(SETTINGS_STORAGE_KEY) || '{}'));
-  } catch {
-    return normalizeSettings({});
+export const SETTINGS_PATH = '/api/dsh-live-voice/settings';
+
+/** No browser persistence or migration from legacy browser preferences. */
+export function createSettingsClient(fetchImpl = globalThis.fetch) {
+  let settings = normalizeSettings({});
+  let queue = Promise.resolve();
+  const listeners = new Set<(settings: ReturnType<typeof normalizeSettings>) => void>();
+  async function request(method: string, patch?: unknown) {
+    const response = await fetchImpl(SETTINGS_PATH, {
+      method,
+      credentials: 'same-origin',
+      cache: 'no-store',
+      ...(patch === undefined
+        ? {}
+        : { headers: { 'content-type': 'application/json' }, body: JSON.stringify(patch) }),
+    });
+    const body = await response.json();
+    if (!response.ok || body?.ok !== true) throw new Error('settings-request-failed');
+    settings = normalizeSettings(body.value);
+    for (const listener of listeners) listener(settings);
+    return settings;
   }
-}
-export function writeSettings(settings: unknown, storage: Pick<Storage, 'setItem'> = localStorage) {
-  const normalized = normalizeSettings(settings);
-  storage.setItem(SETTINGS_STORAGE_KEY, JSON.stringify(normalized));
-  return normalized;
+  const ready = request('GET');
+  // Consumers report failures in their translated controller UI.
+  void ready.catch(() => {});
+  return {
+    ready,
+    getSnapshot: () => settings,
+    subscribe(listener: (settings: ReturnType<typeof normalizeSettings>) => void) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    save(patch: unknown) {
+      const operation = queue.then(async () => {
+        await ready;
+        return request('PUT', patch);
+      });
+      queue = operation.then(
+        () => {},
+        () => {},
+      );
+      return operation;
+    },
+  };
 }

package/src/modules/settings/sections/conversation/ConversationSettingsSection.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { SettingsCard } from '../../../../shared/design-system/index.js';
+import { useLanguage } from '../../../../app/client/i18n/index.js';
+import { SettingsCard, SettingsSubcard } from '../../../../shared/design-system/index.js';
 import { DeliverySettings } from './DeliverySettings.js';
 import { HoldToTalkSettings } from './HoldToTalkSettings.js';
 import { VoiceModeSettings } from './VoiceModeSettings.js';
@@ -9,14 +10,19 @@ export function ConversationSettingsSection(props: {
   settings: any;
   updateSettings(value: any): void;
 }) {
+  const { scoped: settingsLanguage } = useLanguage((ctx) => ctx.settings);
   return (
     <SettingsCard>
       <div className="dlv-settings-card-body">
-        <DeliverySettings {...props} />
-        <HoldToTalkSettings {...props} />
-        <VoiceModeSettings {...props} />
-        <PlaybackPolicySettings {...props} />
-        <ConversationDelaySettings {...props} />
+        <SettingsSubcard title={(settingsLanguage as any).general.title()} icon="send">
+          <div className="dlv-conversation-fields">
+            <DeliverySettings {...props} />
+            <HoldToTalkSettings {...props} />
+            <VoiceModeSettings {...props} />
+            <PlaybackPolicySettings {...props} />
+            <ConversationDelaySettings {...props} />
+          </div>
+        </SettingsSubcard>
       </div>
     </SettingsCard>
   );

package/src/modules/settings/sections/recognition/RecognitionEngineSettings.tsx

@@ -93,13 +93,13 @@ export function RecognitionEngineSettings({
         </>
       )}
       {engine === 'whisper-http' && (
-        <SettingsSubcard title={(commons as any).connection.title()}>
+        <SettingsSubcard title={(commons as any).connection.title()} icon="link">
           <p>{(recognition as any).whisper.captureHelp()}</p>
           <WhisperSettings controller={controller} />
         </SettingsSubcard>
       )}
       {engine === 'qwen-http' && (
-        <SettingsSubcard title={(commons as any).connection.title()}>
+        <SettingsSubcard title={(commons as any).connection.title()} icon="link">
           <p>{(recognition as any).qwen.captureHelp()}</p>
           {settings.engine !== 'qwen-http' && <QwenSettings controller={controller} />}
         </SettingsSubcard>

package/src/modules/settings/sections/recognition/RecognitionFilterSettings.tsx

@@ -9,7 +9,7 @@ export function RecognitionFilterSettings({ settings, updateSettings }: any) {
   const { scoped: recognition } = useLanguage((ctx) => ctx.recognition);
   const enabled = settings.recognitionFilterEnabled !== false;
   return (
-    <SettingsSubcard title={(recognition as any).minimumWords.label()}>
+    <SettingsSubcard title={(recognition as any).minimumWords.label()} icon="filter">
       <CheckboxField
         label={(recognition as any).minimumWords.enabled()}
         description={(recognition as any).minimumWords.help()}
@@ -22,8 +22,8 @@ export function RecognitionFilterSettings({ settings, updateSettings }: any) {
         max={20}
         value={settings.recognitionMinimumWords ?? 2}
         disabled={!enabled}
-        onChange={(event) => {
-          const value = Number(event.target.value);
+        onCommit={(raw) => {
+          const value = Number(raw);
           if (Number.isInteger(value) && value >= 1 && value <= 20)
             updateSettings({ recognitionMinimumWords: value });
         }}

package/src/modules/settings/sections/recognition/RecognitionSettingsSection.tsx

@@ -1,19 +1,23 @@
 import React from 'react';
-import { SettingsCard } from '../../../../shared/design-system/index.js';
+import { useLanguage } from '../../../../app/client/i18n/index.js';
+import { SettingsCard, SettingsSubcard } from '../../../../shared/design-system/index.js';
 import { RecognitionEngineSettings } from './RecognitionEngineSettings.js';
 import { RecognitionFilterSettings } from './RecognitionFilterSettings.js';
 import { SilenceDetectionSettings } from './SilenceDetectionSettings.js';
 import { VoiceCommandSettings } from './VoiceCommandSettings.js';
 import { RecognitionStatus } from './RecognitionStatus.js';
 export function RecognitionSettingsSection(props: any) {
+  const { scoped: settingsLanguage } = useLanguage((ctx) => ctx.settings);
   return (
     <SettingsCard>
       <div className="dlv-settings-card-body">
-        <RecognitionEngineSettings {...props} />
+        <RecognitionStatus {...props} />
+        <SettingsSubcard title={(settingsLanguage as any).general.title()} icon="mic">
+          <RecognitionEngineSettings {...props} />
+        </SettingsSubcard>
         <VoiceCommandSettings {...props} />
         <RecognitionFilterSettings {...props} />
         <SilenceDetectionSettings {...props} />
-        <RecognitionStatus {...props} />
       </div>
     </SettingsCard>
   );

package/src/modules/settings/sections/recognition/SilenceDetectionSettings.tsx

@@ -1,16 +1,25 @@
 import React from 'react';
 import { useLanguage } from '../../../../app/client/i18n/index.js';
-import { usesPluginVoiceDetection, voiceDetectionPresets } from '../../../core/settings.js';
+import {
+  defaultSettings,
+  customSilenceMinMs,
+  customSilenceMaxMs,
+  usesPluginVoiceDetection,
+  voiceDetectionPresets,
+  voiceDetectionSilenceMs,
+  normalizeCustomSilenceMs,
+} from '../../../core/settings.js';
 import { NumberField, SettingsSubcard } from '../../../../shared/design-system/index.js';
 export function SilenceDetectionSettings({ settings, updateSettings }: any) {
   const { scoped: recognition } = useLanguage((ctx) => ctx.recognition);
+  const savedCustomMs = normalizeCustomSilenceMs(settings.voiceDetectionCustomSilenceMs);
   if (!usesPluginVoiceDetection(settings.recognitionEngine)) return null;
-  const selected = settings.voiceDetectionPreset || 'natural';
+  const selected = settings.voiceDetectionPreset || defaultSettings.voiceDetectionPreset;
   return (
     <SettingsSubcard
       title={(recognition as any).silenceDetection.label()}
       ariaLabel={(recognition as any).silenceDetection.title()}
-      open
+      icon="pause"
     >
       <p>{(recognition as any).silenceDetection.help()}</p>
       <NumberField
@@ -19,8 +28,8 @@ export function SilenceDetectionSettings({ settings, updateSettings }: any) {
         max={300}
         step={1}
         value={settings.recognitionMaxUtteranceSeconds ?? 60}
-        onChange={(event) => {
-          const value = Number(event.target.value);
+        onCommit={(raw) => {
+          const value = Number(raw);
           if (Number.isInteger(value) && value >= 10 && value <= 300)
             updateSettings({ recognitionMaxUtteranceSeconds: value });
         }}
@@ -31,7 +40,7 @@ export function SilenceDetectionSettings({ settings, updateSettings }: any) {
         role="radiogroup"
         aria-label={(recognition as any).silenceDetection.pauseLabel()}
       >
-        {Object.entries(voiceDetectionPresets).map(([value, preset]: [string, any]) => (
+        {[...Object.keys(voiceDetectionPresets), 'custom'].map((value) => (
           <label key={value} className="dlv-preset">
             <input
               type="radio"
@@ -47,10 +56,31 @@ export function SilenceDetectionSettings({ settings, updateSettings }: any) {
           </label>
         ))}
       </div>
+      {selected === 'custom' && (
+        <>
+          <NumberField
+            label={(recognition as any).silenceDetection.customLabel()}
+            min={customSilenceMinMs}
+            max={customSilenceMaxMs}
+            step={1}
+            value={savedCustomMs}
+            onCommit={(draft) => {
+              const value = Number(draft);
+              if (
+                draft.trim() &&
+                Number.isInteger(value) &&
+                value >= customSilenceMinMs &&
+                value <= customSilenceMaxMs
+              )
+                updateSettings({ voiceDetectionCustomSilenceMs: value });
+            }}
+          />
+          <small>{(recognition as any).silenceDetection.customHelp()}</small>
+        </>
+      )}
       <p className="dlv-vad-summary">
         {(recognition as any).silenceDetection.duration({
-          milliseconds:
-            voiceDetectionPresets[selected]?.silenceMs || voiceDetectionPresets.natural.silenceMs,
+          milliseconds: voiceDetectionSilenceMs(settings),
         })}
       </p>
     </SettingsSubcard>

package/src/modules/settings/sections/recognition/VoiceCommandSettings.tsx

@@ -18,7 +18,7 @@ export function VoiceCommandSettings({ settings, updateSettings }: any) {
   const { scoped: recognition } = useLanguage((ctx) => ctx.recognition);
   const enabled = settings.voiceCommandsEnabled !== false;
   return (
-    <SettingsSubcard title={(recognition as any).commands.title()}>
+    <SettingsSubcard title={(recognition as any).commands.title()} icon="send">
       <CheckboxField
         label={(recognition as any).commands.enabled()}
         checked={enabled}
@@ -31,9 +31,9 @@ export function VoiceCommandSettings({ settings, updateSettings }: any) {
           rows={2}
           maxLength={1000}
           label={(recognition as any).commands[label]()}
-          value={settings[key] || fallback}
+          value={settings[key] ?? fallback}
           disabled={!enabled}
-          onChange={(event) => updateSettings({ [key]: event.target.value })}
+          onCommit={(value) => updateSettings({ [key]: value })}
         />
       ))}
     </SettingsSubcard>

package/src/modules/settings/sections/speak/OutputFilterSettings.tsx

@@ -10,7 +10,7 @@ export function OutputFilterSettings({ settings, updateSettings }: any) {
   const { scoped: speak } = useLanguage((ctx) => ctx.speak);
   const enabled = settings.outputCodeFilterEnabled !== false;
   return (
-    <SettingsSubcard title={(speak as any).filters.code.enabled()}>
+    <SettingsSubcard title={(speak as any).filters.code.enabled()} icon="filter">
       <CheckboxField
         label={(speak as any).filters.code.enabled()}
         checked={enabled}
@@ -22,17 +22,17 @@ export function OutputFilterSettings({ settings, updateSettings }: any) {
         max={100}
         value={settings.outputCodeMaxLines ?? 5}
         disabled={!enabled}
-        onChange={(event) => {
-          const value = Number(event.target.value);
+        onCommit={(raw) => {
+          const value = Number(raw);
           if (Number.isInteger(value) && value >= 0 && value <= 100)
             updateSettings({ outputCodeMaxLines: value });
         }}
       />
       <TextField
         label={(speak as any).filters.code.replacement()}
-        defaultValue={settings.outputCodeNotice || (speak as any).filters.code.notice()}
+        value={settings.outputCodeNotice ?? (speak as any).filters.code.notice()}
         disabled={!enabled}
-        onBlur={(event) => updateSettings({ outputCodeNotice: event.target.value })}
+        onCommit={(value) => updateSettings({ outputCodeNotice: value })}
       />
     </SettingsSubcard>
   );

package/src/modules/settings/sections/speak/SpeakSettingsSection.tsx

@@ -1,14 +1,18 @@
 import React from 'react';
-import { SettingsCard } from '../../../../shared/design-system/index.js';
+import { useLanguage } from '../../../../app/client/i18n/index.js';
+import { SettingsCard, SettingsSubcard } from '../../../../shared/design-system/index.js';
 import { OutputFilterSettings } from './OutputFilterSettings.js';
 import { SpeechEngineSettings } from './SpeechEngineSettings.js';
 import { SpeechAdvancedSettings } from './SpeechAdvancedSettings.js';
 export function SpeakSettingsSection(props: any) {
+  const { scoped: settingsLanguage } = useLanguage((ctx) => ctx.settings);
   return (
     <SettingsCard>
       <div className="dlv-settings-card-body">
-        <SpeechEngineSettings {...props} />
-        <SpeechAdvancedSettings {...props} />
+        <SettingsSubcard title={(settingsLanguage as any).general.title()} icon="speaker">
+          <SpeechEngineSettings {...props} />
+          <SpeechAdvancedSettings {...props} />
+        </SettingsSubcard>
         <OutputFilterSettings {...props} />
       </div>
     </SettingsCard>

package/src/modules/settings/sections/speak/SpeechAdvancedSettings.tsx

@@ -39,11 +39,11 @@ export function SpeechAdvancedSettings({
         <p className="dlv-setting-description">{(speak as any).macos.outputHelp()}</p>
       )}
       {settings.engine === 'qwen-http' && (
-        <SettingsSubcard title={(speak as any).qwen.connection()}>
+        <SettingsSubcard title={(speak as any).qwen.connection()} icon="link">
           <QwenSettings controller={controller} />
         </SettingsSubcard>
       )}
-      <SettingsSubcard title={(speak as any).agentContext.label()}>
+      <SettingsSubcard title={(speak as any).agentContext.label()} icon="settings">
         <CheckboxField
           label={(speak as any).agentContext.enabled()}
           checked={settings.agentVoiceContextEnabled !== false}
@@ -51,9 +51,9 @@ export function SpeechAdvancedSettings({
         />
         <TextAreaField
           label={(speak as any).agentContext.label()}
-          value={settings.agentVoiceContext || defaultAgentVoiceContext}
+          value={settings.agentVoiceContext ?? defaultAgentVoiceContext}
           disabled={settings.agentVoiceContextEnabled === false}
-          onChange={(event) => updateSettings({ agentVoiceContext: event.target.value })}
+          onCommit={(value) => updateSettings({ agentVoiceContext: value })}
         />
         <button
           type="button"

package/src/modules/settings/sections/speak/SpeechEngineSettings.tsx

@@ -59,7 +59,7 @@ export function SpeechEngineSettings({ settings, capabilities, updateSettings }:
         max={3}
         step={0.1}
         value={settings.rate ?? 1}
-        onChange={(event) => updateSettings({ rate: Number(event.target.value) })}
+        onCommit={(value) => updateSettings({ rate: Number(value) })}
       />
       <NumberField
         label={(speak as any).segmentGap.label()}
@@ -67,7 +67,7 @@ export function SpeechEngineSettings({ settings, capabilities, updateSettings }:
         max={2000}
         step={50}
         value={settings.segmentGapMs ?? 400}
-        onChange={(event) => updateSettings({ segmentGapMs: Number(event.target.value) })}
+        onCommit={(value) => updateSettings({ segmentGapMs: Number(value) })}
       />
       {capabilities?.[engine === 'qwen-http' ? 'qwen' : engine]?.supported === false && (
         <p role="status">

package/src/modules/settings/services/releases.ts

@@ -13,7 +13,7 @@ export const RELEASE_CHECK_INTERVAL_MS = 24 * 60 * 60 * 1000;
 
 export const LIVE_VOICE_BADGE_URL = 'https://cdn.simpleicons.org/npm/white';
 export const DSH_BADGE_URL = 'https://cdn.simpleicons.org/deepseek/white';
-export const TESTED_DSH_RELEASE_URL = `https://github.com/deepseek-ai/deepseek-harness/releases/tag/v${TESTED_DSH_VERSION}`;
+export const TESTED_DSH_RELEASE_URL = `https://github.com/deepseek-ai/deepseek-harness/releases/tag/dsh-v${TESTED_DSH_VERSION}`;
 
 function versionParts(version) {
   const normalized = String(version || '')
@@ -77,9 +77,17 @@ function writeCached(storage, value) {
   } catch {}
 }
 
+const releaseMemory = new Map<string, string>();
+const memoryStorage = {
+  getItem: (key: string) => releaseMemory.get(key) ?? null,
+  setItem: (key: string, value: string) => {
+    releaseMemory.set(key, value);
+  },
+};
+
 export async function checkLatestRelease({
   fetchImpl = globalThis.window?.fetch?.bind(globalThis.window),
-  storage = globalThis.window?.localStorage,
+  storage = memoryStorage,
   now = Date.now(),
 } = {}) {
   const cached = readCached(storage, now);

package/src/modules/speak/ARCHITECTURE.md

@@ -0,0 +1,5 @@
+# Speaking module
+
+`services/speechQueue.ts` schedules speech independently of capture and agent generation. `engines/browser/BrowserSpeakingEngine.ts` uses browser voices, `engines/qwen/QwenSpeakingEngine.ts` uses the Qwen HTTP bridge, and `engines/say/` uses the macOS host speaker. `engines/audio/` manages host audio playback and transcoding. `qwen/QwenSpeakingSettings.tsx` presents engine-specific settings.
+
+Keep provider adapters separate from conversation policy and DSH composition. Maintain truthful pause/resume capability and distinguish pause from stop/cancel. Abort old operations and prevent stale synthesized audio from beginning after a newer turn or cancellation. Do not let a Settings speech test bypass page-level ownership. Local TTS is an option; it does not imply the DSH model runs offline.

package/src/shared/ARCHITECTURE.md

@@ -0,0 +1,5 @@
+# Shared design system
+
+`design-system/` contains domain-independent React primitives: buttons, form fields, feedback, layout, and SVG icons. It must never import feature modules or DSH integration. Modules supply translated strings and handlers; shared components only render and dispatch them. Icons use `currentColor` so they follow surrounding text across themes.
+
+Settings layouts include accessible cards, tab navigation, and native disclosure sections. Keep `<details>/<summary>` keyboard behavior and ARIA semantics when changing a subsection; headings and icons should not become separate unlabeled controls. Shared primitives should not own persisted settings, product policy, or translation catalogs. `forms/DraftField.tsx` centralizes local raw editing for text, textarea, and numeric controls. Consumers use `onCommit` for normalization and persistence on blur; parent updates must not replace active drafts. Invalid numeric drafts restore the saved value on blur.

package/src/shared/design-system/forms/DraftField.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+
+type Element = HTMLInputElement | HTMLTextAreaElement;
+export type DraftFieldProps = {
+  label: string;
+  value?: string | number | readonly string[];
+  defaultValue?: string | number | readonly string[];
+  onCommit?: (value: string) => void;
+  multiline?: boolean;
+} & Omit<
+  React.InputHTMLAttributes<HTMLInputElement> & React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+  'value' | 'defaultValue'
+>;
+
+/** Keep raw edits local; parent normalization and persistence run only on blur. */
+export function DraftField({
+  label,
+  value,
+  defaultValue,
+  onCommit,
+  multiline,
+  onInput,
+  onChange,
+  onFocus,
+  onBlur,
+  ...props
+}: DraftFieldProps) {
+  const saved = String(value ?? defaultValue ?? '');
+  const [draft, setDraft] = React.useState(saved);
+  const editing = React.useRef(false);
+  const dirty = React.useRef(false);
+  React.useEffect(() => {
+    if (!editing.current) setDraft(saved);
+  }, [saved]);
+  const inputProps = {
+    ...props,
+    value: draft,
+    onFocus: (event: React.FocusEvent<Element>) => {
+      editing.current = true;
+      onFocus?.(event as never);
+    },
+    onInput: (event: React.FormEvent<Element>) => {
+      editing.current = true;
+      dirty.current = true;
+      setDraft(event.currentTarget.value);
+      onInput?.(event as never);
+    },
+    onChange: (event: React.ChangeEvent<Element>) => {
+      editing.current = true;
+      dirty.current = true;
+      setDraft(event.currentTarget.value);
+      onChange?.(event as never);
+    },
+    onBlur: (event: React.FocusEvent<Element>) => {
+      editing.current = false;
+      const raw = event.currentTarget.value;
+      const changed = dirty.current;
+      dirty.current = false;
+      // Restore the canonical value until the committed value arrives from the parent.
+      setDraft(saved);
+      const valid =
+        multiline ||
+        props.type !== 'number' ||
+        (raw.trim() !== '' && (event.currentTarget as HTMLInputElement).validity.valid);
+      if (changed && valid) onCommit?.(raw);
+      onBlur?.(event as never);
+    },
+  };
+  return (
+    <label>
+      {label}
+      {multiline ? (
+        <textarea {...(inputProps as React.TextareaHTMLAttributes<HTMLTextAreaElement>)} />
+      ) : (
+        <input {...(inputProps as React.InputHTMLAttributes<HTMLInputElement>)} />
+      )}
+    </label>
+  );
+}

package/src/shared/design-system/forms/NumberField.tsx

@@ -1,12 +1,6 @@
 import React from 'react';
-export type NumberFieldProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> & {
-  label: string;
-};
-export function NumberField({ label, ...props }: NumberFieldProps) {
-  return (
-    <label>
-      {label}
-      <input {...props} type="number" />
-    </label>
-  );
+import { DraftField, type DraftFieldProps } from './DraftField.js';
+export type NumberFieldProps = Omit<DraftFieldProps, 'type' | 'multiline'>;
+export function NumberField(props: NumberFieldProps) {
+  return <DraftField {...props} type="number" />;
 }

package/src/shared/design-system/forms/TextAreaField.tsx

@@ -1,12 +1,6 @@
 import React from 'react';
-export type TextAreaFieldProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
-  label: string;
-};
-export function TextAreaField({ label, ...props }: TextAreaFieldProps) {
-  return (
-    <label>
-      {label}
-      <textarea {...props} />
-    </label>
-  );
+import { DraftField, type DraftFieldProps } from './DraftField.js';
+export type TextAreaFieldProps = Omit<DraftFieldProps, 'type' | 'multiline'>;
+export function TextAreaField(props: TextAreaFieldProps) {
+  return <DraftField {...props} multiline />;
 }

package/src/shared/design-system/forms/TextField.tsx

@@ -1,12 +1,6 @@
 import React from 'react';
-export type TextFieldProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> & {
-  label: string;
-};
-export function TextField({ label, ...props }: TextFieldProps) {
-  return (
-    <label>
-      {label}
-      <input {...props} type="text" />
-    </label>
-  );
+import { DraftField, type DraftFieldProps } from './DraftField.js';
+export type TextFieldProps = Omit<DraftFieldProps, 'type' | 'multiline'>;
+export function TextField(props: TextFieldProps) {
+  return <DraftField {...props} type="text" />;
 }

package/src/shared/design-system/icons/icons.ts

@@ -10,6 +10,10 @@ export const iconPaths = {
   skipNext: 'M5 5l10 7-10 7V5M19 5v14',
   send: 'M3 11.5L21 3l-8.5 18-2-7.5L3 11.5zm7.5 2L21 3',
   queue: 'M5 6h14M5 12h10M5 18h6M18 15v6M15 18h6',
+  settings: 'M4 7h16M4 17h16M8 4v6M16 14v6',
+  filter: 'M3 5h18l-7 8v6l-4 2v-8L3 5z',
+  link: 'M10 13a5 5 0 0 0 7.07 0l3-3a5 5 0 0 0-7.07-7.07l-1.7 1.7M14 11a5 5 0 0 0-7.07 0l-3 3a5 5 0 0 0 7.07 7.07l1.7-1.7',
+  chevron: 'M6 9l6 6 6-6',
   close: 'M6 6l12 12M18 6 6 18',
 } as const;
 

package/src/shared/design-system/layout/SettingsSubcard.tsx

@@ -1,13 +1,25 @@
 import React from 'react';
+import { Icon, type IconName } from '../icons/index.js';
+
 export function SettingsSubcard({
   title,
   children,
   open = false,
   ariaLabel,
-}: React.PropsWithChildren<{ title: string; open?: boolean; ariaLabel?: string }>) {
+  icon = 'settings',
+}: React.PropsWithChildren<{
+  title: string;
+  open?: boolean;
+  ariaLabel?: string;
+  icon?: IconName;
+}>) {
   return (
-    <details className="dlv-settings-subcard" open={open} aria-label={ariaLabel}>
-      <summary>{title}</summary>
+    <details className="dlv-settings-subcard" open={open}>
+      <summary aria-label={ariaLabel}>
+        <Icon name={icon} className="dlv-settings-subcard-icon" />
+        <span>{title}</span>
+        <Icon name="chevron" className="dlv-settings-subcard-chevron" />
+      </summary>
       <div className="dlv-settings-subcard-body">{children}</div>
     </details>
   );

package/src/shared/design-system/layout/SettingsTabs.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
+import { Icon, type IconName } from '../icons/index.js';
 
-export type SettingsTab = { id: string; label: string };
+export type SettingsTab = { id: string; label: string; icon?: IconName };
 export type SettingsTabsProps = {
   label: string;
   tabs: readonly SettingsTab[];
@@ -46,7 +47,8 @@ export function SettingsTabs({ label, tabs, active, idPrefix, onChange }: Settin
           onClick={() => onChange(tab.id)}
           onKeyDown={(event) => onKeyDown(event, index)}
         >
-          {tab.label}
+          {tab.icon ? <Icon name={tab.icon} className="dlv-settings-tab-icon" /> : null}
+          <span>{tab.label}</span>
         </button>
       ))}
     </div>