dsh-live-voice 0.2.2 → 0.3.0

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "dsh-live-voice",
-  "version": "0.2.2",
+  "version": "0.3.0",
+  "dshTestedVersion": "0.1.6-alpha.2",
   "type": "module",
   "scripts": {
     "typecheck": "tsc --noEmit",
@@ -8,10 +9,12 @@
     "build": "npm run typecheck && node --experimental-strip-types scripts/build.ts",
     "check:dist": "node scripts/check-dist.mjs",
     "dev": "node --experimental-strip-types scripts/build.ts --watch",
-    "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\" \"scripts/**/*.ts\"",
-    "format:check": "prettier --check \"src/**/*.ts\" \"test/**/*.ts\" \"scripts/**/*.ts\"",
+    "format": "prettier --write \"src/**/*.{ts,tsx}\" \"test/**/*.{ts,tsx}\" \"scripts/**/*.ts\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx}\" \"test/**/*.{ts,tsx}\" \"scripts/**/*.ts\"",
     "setup:hooks": "git config core.hooksPath .githooks",
-    "prepack": "npm run build"
+    "prepack": "npm run build",
+    "preview": "previewjs .",
+    "preview:check": "previewjs . --help"
   },
   "description": "Local-first hands-free AI voice assistant plugin for DeepSeek Harness (DSH), with speech-to-text, text-to-speech, voice commands, and local speech engines.",
   "keywords": [
@@ -53,7 +56,7 @@
     "name": "wads.dev",
     "url": "https://www.npmjs.com/org/wads.dev"
   },
-  "license": "GPL-3.0-only",
+  "license": "Apache-2.0",
   "files": [
     "src/",
     "lib/",
@@ -63,6 +66,7 @@
     "PLAN.md",
     "DEVELOPMENT.md",
     "HISTORY.md",
+    "docs/",
     "scripts/",
     "LICENSE"
   ],
@@ -75,6 +79,8 @@
     "url": "git+https://github.com/victorwads/dsh-live-voice.git"
   },
   "devDependencies": {
+    "@previewjs/cli": "^1.30.1",
+    "@previewjs/plugin-react": "^17.1.0",
     "@types/node": "26.6.2",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
@@ -102,8 +108,13 @@
         "@deepseek-ai/dsh-client-ui-conversation",
         "@deepseek-ai/dsh-client-ui-chat",
         "@deepseek-ai/dsh-client-connection",
-        "@deepseek-ai/dsh-client-ui-settings"
+        "@deepseek-ai/dsh-client-ui-settings",
+        "@deepseek-ai/dsh-client-locale"
       ]
     }
+  },
+  "dependencies": {
+    "@wads.dev/i18n-react": "^0.0.1-alpha.0",
+    "@wads.dev/i18n-ts": "0.0.1-alpha.0"
   }
 }

package/scripts/build.ts

@@ -1,15 +1,26 @@
 // @ts-nocheck
 import { build, context, type BuildOptions } from 'esbuild';
-import { rm, mkdir } from 'node:fs/promises';
+import { rm, mkdir, readFile } from 'node:fs/promises';
+
+const packageMetadata = JSON.parse(await readFile('package.json', 'utf8'));
+const versionDefine = {
+  __DLV_VERSION__: JSON.stringify(packageMetadata.version),
+  __DLV_TESTED_DSH_VERSION__: JSON.stringify(packageMetadata.dshTestedVersion),
+};
 
 const client: BuildOptions = {
-  entryPoints: ['src/client/index.ts'],
+  entryPoints: ['src/app/client/apply.tsx'],
   outfile: 'lib/client.js',
   bundle: true,
   format: 'cjs',
   platform: 'browser',
   target: ['es2022'],
   external: ['react', 'react-dom'],
+  jsx: 'transform',
+  jsxFactory: 'React.createElement',
+  jsxFragment: 'React.Fragment',
+  tsconfigRaw: { compilerOptions: { jsx: 'react' } },
+  define: versionDefine,
   banner: {
     js: 'window.__ModuleLoader__.load({id:"dsh-live-voice",factory:(require)=>{var module={exports:{}};var exports=module.exports;',
   },
@@ -17,7 +28,7 @@ const client: BuildOptions = {
   logLevel: 'info',
 };
 const host: BuildOptions = {
-  entryPoints: ['src/server.ts'],
+  entryPoints: ['src/app/server/apply.ts'],
   outfile: 'lib/server.js',
   bundle: true,
   format: 'esm',
@@ -27,7 +38,7 @@ const host: BuildOptions = {
   logLevel: 'info',
 };
 const tests: BuildOptions = {
-  entryPoints: ['test/*.test.ts'],
+  entryPoints: ['test/*.test.ts', 'test/*.test.tsx'],
   outdir: '.test-dist',
   outbase: 'test',
   bundle: true,
@@ -35,6 +46,7 @@ const tests: BuildOptions = {
   platform: 'node',
   target: ['node22'],
   packages: 'external',
+  define: versionDefine,
   logLevel: 'silent',
 };
 const watch = process.argv.includes('--watch');

package/scripts/preview-ui.ts

@@ -2,7 +2,7 @@
 import { build } from 'esbuild';
 import { chromium } from 'playwright-core';
 import { mkdir } from 'node:fs/promises';
-const entry = `import React from 'react'; import {createRoot} from 'react-dom/client'; import {createComponents} from './src/client/components.ts'; import {styles} from './src/client/styles.ts'; const style=document.createElement('style');style.textContent=styles;document.head.appendChild(style); const state={conversation:true,listening:true,recognizing:true,speaking:false,paused:false,settings:{},capabilities:{}}; const c={subscribe:()=>()=>{},getSnapshot:()=>state,meter:{level:()=>0.4}};const {RecordingBar}=createComponents(React);createRoot(document.getElementById('root')).render(React.createElement(RecordingBar,{controller:c}));`;
+const entry = `import React from 'react'; import {createRoot} from 'react-dom/client'; import {createConversationComponents} from './src/modules/conversation/components/createConversationComponents.tsx'; import {styles} from './src/styles/index.ts'; const style=document.createElement('style');style.textContent=styles;document.head.appendChild(style); const state={conversation:true,listening:true,recognizing:true,speaking:false,paused:false,settings:{},capabilities:{}}; const c={subscribe:()=>()=>{},getSnapshot:()=>state,meter:{level:()=>0.4}};const {RecordingBar}=createConversationComponents(React);createRoot(document.getElementById('root')).render(React.createElement(RecordingBar,{controller:c}));`;
 const output = await build({
   stdin: { contents: entry, resolveDir: process.cwd() },
   bundle: true,

package/src/{client/index.ts → app/client/apply.tsx}

@@ -1,29 +1,42 @@
 // @ts-nocheck
 import React from 'react';
 import { createPortal } from 'react-dom';
-import { VoiceCoordinator } from '../core/coordinator.ts';
-import { VoiceOwnership } from '../core/ownership.ts';
-import { normalizeSettings } from '../core/settings.ts';
-import { MicrophoneMeter } from '../core/microphone.ts';
-import { BrowserSpeakingEngine } from '../engines/speaking/browser.ts';
-import { SayClientEngine } from '../engines/speaking/say-client.ts';
-import { BrowserRecognitionEngine } from '../engines/recognition/browser.ts';
-import { WhisperHttpRecognitionEngine } from '../engines/recognition/whisper-http.ts';
-import { QwenHttpRecognitionEngine } from '../engines/recognition/qwen-http.ts';
-import { QwenHttpSpeakingEngine } from '../engines/speaking/qwen-http.ts';
-import { createComponents } from './components.ts';
-import { styles } from './styles.ts';
+import {
+  MicrophoneMeter,
+  VoiceCoordinator,
+  VoiceOwnership,
+  normalizeSettings,
+} from '../../modules/core/index.js';
+import {
+  BrowserRecognitionEngine,
+  QwenHttpRecognitionEngine,
+  WhisperHttpRecognitionEngine,
+} from '../../modules/recognition/index.js';
+import {
+  BrowserSpeakingEngine,
+  HostAudioSpeakingEngine,
+  QwenHttpSpeakingEngine,
+} from '../../modules/speak/index.js';
+import { createLiveVoiceSettings } from '../../modules/settings/index.js';
+import {
+  ConversationControls,
+  ConversationStatusBar,
+  SpeakButton as ModularSpeakButton,
+} from '../../modules/conversation/index.js';
+import { registerLiveVoiceLocales } from './i18n/index.js';
+import { registerConversationSlots, registerSettingsSlot } from './registerSlots.js';
+import { styles } from '../../styles/index.js';
 import {
   assistantMessages,
   addressedTurn,
   latestUserSequence,
   pendingQuestionSpeech,
-} from './chat.ts';
+} from '../../modules/conversation/models/chat.js';
 
-export const inject = ['slots', 'connection', 'uiConversation', 'uiSession'];
+export const inject = ['slots', 'connection', 'uiConversation', 'uiSession', 'locale'];
 export function apply(ctx) {
-  const e = React.createElement;
-  const { MicrophoneButtons, RecordingBar, SpeakButton, SettingsPanel } = createComponents(React);
+  const t = registerLiveVoiceLocales(ctx);
+  const SettingsPanel = createLiveVoiceSettings(t, ctx.locale);
   const controllers = new Map();
   const retiring = new Set();
   let disposed = false;
@@ -31,6 +44,29 @@ export function apply(ctx) {
   // A route change may replace every conversation slot, but the next committed
   // composer should inherit the user's explicit choice to remain in voice mode.
   let voiceModeActive = false;
+  const publishVoiceContext = (
+    entry,
+    active = entry?.controller?.getSnapshot().conversation === true,
+  ) => {
+    if (!entry) return;
+    const settings = entry.controller.getSnapshot().settings;
+    const body = JSON.stringify({
+      sessionId: entry.key,
+      active:
+        active &&
+        settings.announceAssistantMessages !== false &&
+        settings.agentVoiceContextEnabled !== false,
+      context: settings.agentVoiceContext,
+    });
+    if (body === entry.lastVoiceContextBody) return;
+    entry.lastVoiceContextBody = body;
+    void fetch('/api/dsh-live-voice/voice-context', {
+      method: 'PUT',
+      credentials: 'same-origin',
+      headers: { 'content-type': 'application/json' },
+      body,
+    }).catch(() => {});
+  };
   const ownership = new VoiceOwnership();
   const recognitionSettingKeys = new Set([
     'recognitionEngine',
@@ -70,10 +106,13 @@ export function apply(ctx) {
     entry.composers.clear();
     entry.unsubscribe?.();
     entry.unsubscribe = null;
+    entry.unsubscribeVoiceContext?.();
+    entry.unsubscribeVoiceContext = null;
     entry.unsubscribePendingQuestion?.();
     entry.unsubscribePendingQuestion = null;
     entry.questionCapture = null;
     entry.controller.patch({ answeringQuestion: false });
+    publishVoiceContext(entry, false);
     entry.chatListeners.clear();
     if (controllers.get(entry.key) === entry) controllers.delete(entry.key);
     // Keep teardown in the hardware handoff barrier, not in the session registry.
@@ -94,6 +133,7 @@ export function apply(ctx) {
       buttons: 0,
       request: 0,
       closed: false,
+      lastVoiceContextBody: null,
     };
     let settings = {};
     try {
@@ -104,7 +144,13 @@ export function apply(ctx) {
       settings = normalizeSettings(null);
     }
     const engineBrowser = new BrowserSpeakingEngine({ lang: settings.lang || 'pt-BR' });
-    const engineSay = new SayClientEngine({ rpc: ctx.connection.rpc });
+    const engineSay = new HostAudioSpeakingEngine({
+      endpoint: '/api/dsh-live-voice/say/speech',
+      capability: '/api/dsh-live-voice/say/capabilities',
+      lang: settings.lang || 'pt-BR',
+      synthesisRate: () => 175,
+      playbackRate: (rate) => rate,
+    });
     const engineQwen = new QwenHttpSpeakingEngine({ lang: settings.lang || 'pt-BR' });
     const meter = new MicrophoneMeter();
     const recognition = recognitionFor(settings, meter);
@@ -116,7 +162,17 @@ export function apply(ctx) {
         getDraft: () => entry.draft,
         submit: (mode = 'queue') => {
           const owner = [...entry.composers.values()].at(-1);
-          owner?.actions.submit?.(mode);
+          if (!owner) return;
+          if (mode === 'steer') {
+            // InputActions deliberately exposes no delivery-mode argument. Dispatch the
+            // DSH accelerated composer gesture instead: Ctrl/Cmd+Enter resolves to the
+            // opposite of the normal busy-enter policy, which is direct steering when
+            // the ordinary action queues. Never fall back to inputActions.submit() here:
+            // it would silently turn an explicit steer request into a queued message.
+            owner.submitAccelerated?.();
+            return;
+          }
+          owner.actions.submit?.();
         },
         handleQuestionResult: ({ final, interim }) => {
           const capture = entry.questionCapture;
@@ -158,6 +214,8 @@ export function apply(ctx) {
       settings,
     });
     const controller = entry.controller;
+    entry.unsubscribeVoiceContext = controller.subscribe(() => publishVoiceContext(entry));
+    publishVoiceContext(entry);
     entry.chat = ctx.uiConversation.binding(sessionId).target('chat');
     entry.chatListeners = new Set();
     entry.subscribeChat = (listener) => {
@@ -220,6 +278,7 @@ export function apply(ctx) {
     const update = controller.updateSettings.bind(controller);
     entry.applySettings = (next) => {
       update(next);
+      publishVoiceContext(entry);
       engineBrowser.lang = controller.getSnapshot().settings.lang;
       engineQwen.lang = controller.getSnapshot().settings.lang;
       run(controller, controller.refreshCapabilities());
@@ -242,7 +301,9 @@ export function apply(ctx) {
       controller[method] = (...args) => {
         entry.request++;
         if (method === 'endConversation' && args[0] !== true) voiceModeActive = false;
-        return original(...args);
+        const result = original(...args);
+        Promise.resolve(result).finally(() => publishVoiceContext(entry));
+        return result;
       };
     }
     for (const method of ['startDictation', 'startHoldToTalk', 'startConversation', 'speak']) {
@@ -250,7 +311,13 @@ export function apply(ctx) {
       controller[method] = (...args) => {
         if (disposed || entry.closed || !entry.refs) return Promise.resolve();
         if (method !== 'speak' && !entry.composers.size) return Promise.resolve();
-        if (method === 'startConversation') voiceModeActive = true;
+        if (method === 'startConversation') {
+          // Re-entering voice mode must not replay visible history or the portion
+          // of a response that streamed while voice mode was off. Consume the
+          // current chat snapshot before admitting new assistant text.
+          refresh(true);
+          voiceModeActive = true;
+        }
         const request = ++entry.request;
         return ownership.run(
           controller,
@@ -258,7 +325,9 @@ export function apply(ctx) {
           () => {
             if (disposed || entry.closed || !entry.refs || request !== entry.request) return;
             if (method !== 'speak' && !entry.composers.size) return;
-            return original(...args);
+            const result = original(...args);
+            Promise.resolve(result).finally(() => publishVoiceContext(entry));
+            return result;
           },
         );
       };
@@ -309,7 +378,29 @@ export function apply(ctx) {
     React.useLayoutEffect(() => {
       if (!entry || entry.closed || disposed) return;
       if (!input || typeof props.inputActions?.setDraft !== 'function') return;
-      entry.composers.set(token.current, { actions: props.inputActions });
+      entry.composers.set(token.current, {
+        actions: props.inputActions,
+        submitAccelerated: () => {
+          const active = document.activeElement;
+          const editor =
+            active?.nodeType === 1 && active.isContentEditable
+              ? active
+              : document.querySelector('[contenteditable="true"]');
+          if (!editor || editor.nodeType !== 1) return;
+          editor.focus();
+          const KeyboardEventCtor = editor.ownerDocument.defaultView?.KeyboardEvent;
+          if (!KeyboardEventCtor) return;
+          editor.dispatchEvent(
+            new KeyboardEventCtor('keydown', {
+              key: 'Enter',
+              code: 'Enter',
+              ctrlKey: true,
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        },
+      });
       if (voiceModeActive && !entry.controller.getSnapshot().conversation)
         run(entry.controller, entry.controller.startConversation());
     }, [entry, input, props.inputActions]);
@@ -329,7 +420,7 @@ export function apply(ctx) {
   function Buttons(props) {
     const entry = useEntry(props.sessionId, 'buttons');
     useComposer(entry, props);
-    return entry ? e(MicrophoneButtons, { controller: entry.controller }) : null;
+    return entry ? <ConversationControls controller={entry.controller} /> : null;
   }
   function Settings() {
     const [controller, setController] = React.useState(null);
@@ -350,7 +441,12 @@ export function apply(ctx) {
         recognition,
         engines: {
           browser,
-          say: new SayClientEngine({ rpc: ctx.connection.rpc }),
+          say: new HostAudioSpeakingEngine({
+            endpoint: '/api/dsh-live-voice/say/speech',
+            capability: '/api/dsh-live-voice/say/capabilities',
+            synthesisRate: () => 175,
+            playbackRate: (rate) => rate,
+          }),
           'qwen-http': qwen,
         },
         meter,
@@ -398,18 +494,13 @@ export function apply(ctx) {
         void c.dispose();
       };
     }, []);
-    return controller ? e(SettingsPanel, { controller }) : null;
+    return controller ? <SettingsPanel controller={controller} /> : null;
   }
-  ctx.slots.inject('settings.section', () =>
-    ctx.slots.register(
-      { name: 'settings.section', id: 'dsh-live-voice', order: 65, label: 'Live Voice' },
-      Settings,
-    ),
-  );
+  registerSettingsSlot(ctx, Settings, () => t('dsh-live-voice.commons.pluginName'));
   function Dock(props) {
     const entry = useEntry(props.sessionId, 'dock');
     useComposer(entry, props);
-    return entry ? e(RecordingBar, { controller: entry.controller }) : null;
+    return entry ? <ConversationStatusBar controller={entry.controller} /> : null;
   }
   function QuestionStatusView({ entry }) {
     const snapshot = React.useSyncExternalStore(
@@ -440,19 +531,20 @@ export function apply(ctx) {
     const target = typeof document === 'undefined' ? null : document.body;
     return snapshot.answeringQuestion && target && overlayStyle
       ? createPortal(
-          e(RecordingBar, {
-            controller: entry.controller,
-            questionOnly: true,
-            overlay: true,
-            overlayStyle,
-          }),
+          <ConversationStatusBar
+            controller={entry.controller}
+            questionOnly
+            overlay
+            overlayStyle={overlayStyle}
+          />,
+
           target,
         )
       : null;
   }
   function QuestionStatus(props) {
     const entry = useEntry(props.sessionId, 'question-status');
-    return entry ? e(QuestionStatusView, { entry }) : null;
+    return entry ? <QuestionStatusView entry={entry} /> : null;
   }
   function ActionView({ entry, messageId }) {
     const snapshot = React.useSyncExternalStore(
@@ -464,20 +556,27 @@ export function apply(ctx) {
     const capability = snapshot.capabilities[snapshot.settings.engine];
     const active = snapshot.speaking && message.id === snapshot.activeMessageId;
     const unavailable = capability?.supported !== true;
-    return e(SpeakButton, {
-      active,
-      disabled: !message.text.trim() || (!active && unavailable),
-      label: unavailable ? capability?.reason || 'Checking speech output…' : undefined,
-      onClick: () =>
-        run(
-          entry.controller,
-          active ? entry.controller.stopSpeech() : entry.controller.speak(message.text, message.id),
-        ),
-    });
+    return (
+      <ModularSpeakButton
+        active={active}
+        disabled={!message.text.trim() || (!active && unavailable)}
+        label={
+          unavailable ? capability?.reason || t('dsh-live-voice.speak.output.checking') : undefined
+        }
+        onClick={() =>
+          run(
+            entry.controller,
+            active
+              ? entry.controller.stopSpeech()
+              : entry.controller.speak(message.text, message.id),
+          )
+        }
+      />
+    );
   }
   function Action(props) {
     const entry = useEntry(props.sessionId, 'action');
-    return entry ? e(ActionView, { entry, messageId: props.messageId }) : null;
+    return entry ? <ActionView entry={entry} messageId={props.messageId} /> : null;
   }
   ctx.effect(() => {
     const style = document.createElement('style');
@@ -486,15 +585,9 @@ export function apply(ctx) {
     document.head.appendChild(style);
     return () => style.remove();
   });
-  for (const [name, id, order, component] of [
-    ['conversation.input.right', 'live-voice-controls', 6, Buttons],
-    ['conversation.input.dock', 'live-voice-status', -100, Dock],
-    ['conversation.session.header.utilities', 'live-voice-question-status', 100, QuestionStatus],
-    ['conversation.chat.assistant-actions', 'live-voice-speak', 5, Action],
-  ])
-    ctx.slots.inject(name, () =>
-      ctx.slots.register({ name, id, order, label: 'DSH Live Voice' }, component),
-    );
+  registerConversationSlots(ctx, { Buttons, Dock, QuestionStatus, Action }, () =>
+    t('dsh-live-voice.commons.pluginName'),
+  );
   ctx.effect(() => {
     const stop = () => {
       ownership.cancel();

package/src/app/client/i18n/DshLanguageBoundary.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { LiveVoiceTranslationProvider, normalizeAppLocale, useLanguage } from './runtime.js';
+
+const FALLBACK_DSH_LOCALE = Object.freeze({ active: 'en', revision: 0 });
+
+export function DshLanguageBoundary({
+  locale,
+  children,
+}: {
+  locale: any;
+  children: React.ReactNode;
+}) {
+  const { current, setLanguage } = useLanguage();
+  const subscribe = React.useCallback(
+    (listener: () => void) => locale?.subscribe?.(listener) ?? (() => {}),
+    [locale],
+  );
+  const snapshot = React.useCallback(
+    () => locale?.getSnapshot?.() ?? FALLBACK_DSH_LOCALE,
+    [locale],
+  );
+  const dshLocale = React.useSyncExternalStore(subscribe, snapshot, snapshot);
+  const expected = normalizeAppLocale(dshLocale.active);
+  React.useEffect(() => {
+    if (current.locale !== expected) setLanguage(expected, true);
+  }, [current.locale, expected, setLanguage]);
+  return current.locale === expected ? children : null;
+}
+
+export function withAppLanguage<P extends object>(Component: React.ComponentType<P>, locale: any) {
+  function LocalizedComponent(props: P) {
+    return (
+      <LiveVoiceTranslationProvider>
+        <DshLanguageBoundary locale={locale}>
+          <Component {...props} />
+        </DshLanguageBoundary>
+      </LiveVoiceTranslationProvider>
+    );
+  }
+  LocalizedComponent.displayName = `AppLanguage(${Component.displayName || Component.name || 'Component'})`;
+  return LocalizedComponent;
+}