pi-tau-web-server 1.0.8

package/public/voice-input.js

@@ -0,0 +1,74 @@
+export function setupVoiceInput(micBtn, messageInput) {
+    let recognition = null;
+    let isRecording = false;
+    if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
+        const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+        if (!SpeechRecognition) {
+            micBtn.style.display = 'none';
+            return;
+        }
+        recognition = new SpeechRecognition();
+        recognition.continuous = true;
+        recognition.interimResults = true;
+        recognition.lang = 'en-AU';
+        let finalTranscript = '';
+        let interimTranscript = '';
+        recognition.addEventListener('result', (e) => {
+            const ev = e;
+            interimTranscript = '';
+            for (let i = ev.resultIndex; i < ev.results.length; i++) {
+                if (ev.results[i].isFinal) {
+                    finalTranscript += ev.results[i][0].transcript;
+                }
+                else {
+                    interimTranscript += ev.results[i][0].transcript;
+                }
+            }
+            messageInput.value = finalTranscript + interimTranscript;
+            messageInput.dispatchEvent(new Event('input'));
+        });
+        recognition.addEventListener('end', () => {
+            if (isRecording)
+                stopRecording();
+        });
+        recognition.addEventListener('error', (e) => {
+            const ev = e;
+            console.error('[Voice] Error:', ev.error);
+            stopRecording();
+        });
+        micBtn.addEventListener('click', () => {
+            if (isRecording) {
+                stopRecording();
+            }
+            else {
+                startRecording();
+            }
+        });
+        function startRecording() {
+            if (!recognition)
+                return;
+            finalTranscript = messageInput.value;
+            interimTranscript = '';
+            isRecording = true;
+            micBtn.classList.add('recording');
+            micBtn.title = 'Stop recording';
+            recognition.start();
+            messageInput.focus();
+        }
+        function stopRecording() {
+            isRecording = false;
+            micBtn.classList.remove('recording');
+            micBtn.title = 'Voice input';
+            try {
+                recognition?.stop();
+            }
+            catch { }
+            messageInput.value = finalTranscript;
+            messageInput.dispatchEvent(new Event('input'));
+            messageInput.focus();
+        }
+    }
+    else {
+        micBtn.style.display = 'none';
+    }
+}

package/public/websocket-client.js

@@ -0,0 +1,156 @@
+/**
+ * WebSocket Client - Handles connection to backend WebSocket server
+ */
+export class WebSocketClient extends EventTarget {
+    url;
+    ws;
+    reconnectAttempts;
+    maxReconnectAttempts;
+    reconnectDelay;
+    maxReconnectDelay;
+    isIntentionallyClosed;
+    reconnectTimer;
+    connectionState;
+    constructor(url) {
+        super();
+        this.url = url;
+        this.ws = null;
+        this.reconnectAttempts = 0;
+        this.maxReconnectAttempts = Infinity;
+        this.reconnectDelay = 1000;
+        this.maxReconnectDelay = 10000;
+        this.isIntentionallyClosed = false;
+        this.reconnectTimer = null;
+        this.connectionState = 'idle';
+    }
+    connect() {
+        if (this.connectionState === 'connecting')
+            return;
+        if (this.ws && this.ws.readyState === WebSocket.OPEN)
+            return;
+        if (this.ws && this.ws.readyState === WebSocket.CONNECTING)
+            return;
+        this.isIntentionallyClosed = false;
+        this.connectionState = 'connecting';
+        if (this.reconnectTimer) {
+            clearTimeout(this.reconnectTimer);
+            this.reconnectTimer = null;
+        }
+        // Close only fully stale sockets before reconnecting
+        if (this.ws && (this.ws.readyState === WebSocket.CLOSING || this.ws.readyState === WebSocket.CLOSED)) {
+            this.ws = null;
+        }
+        this.ws = new WebSocket(this.url);
+        this.ws.onopen = () => {
+            console.log('[WS] Connected');
+            this.reconnectAttempts = 0;
+            this.connectionState = 'open';
+            this.dispatchEvent(new CustomEvent('connected'));
+        };
+        this.ws.onmessage = (event) => {
+            try {
+                const message = JSON.parse(event.data);
+                this.handleMessage(message);
+            }
+            catch (error) {
+                console.error('[WS] Failed to parse message:', error);
+            }
+        };
+        this.ws.onerror = (error) => {
+            console.error('[WS] Error:', error);
+            this.dispatchEvent(new CustomEvent('error', { detail: error }));
+        };
+        this.ws.onclose = (event) => {
+            console.log(`[WS] Disconnected (code=${event.code}, reason=${event.reason || 'n/a'})`);
+            this.connectionState = 'closed';
+            this.dispatchEvent(new CustomEvent('disconnected'));
+            if (!this.isIntentionallyClosed) {
+                this.attemptReconnect();
+            }
+        };
+    }
+    disconnect() {
+        this.isIntentionallyClosed = true;
+        this.connectionState = 'closed';
+        if (this.reconnectTimer) {
+            clearTimeout(this.reconnectTimer);
+            this.reconnectTimer = null;
+        }
+        if (this.ws) {
+            this.ws.close();
+        }
+    }
+    // Force reconnect — resets attempt counter and connects fresh
+    forceReconnect() {
+        this.reconnectAttempts = 0;
+        this.isIntentionallyClosed = false;
+        this.connectionState = 'closed';
+        if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+            try {
+                this.ws.close(1000, 'force reconnect');
+            }
+            catch (e) { }
+        }
+        if (this.reconnectTimer) {
+            clearTimeout(this.reconnectTimer);
+            this.reconnectTimer = null;
+        }
+        this.connect();
+    }
+    attemptReconnect() {
+        if (this.reconnectAttempts >= this.maxReconnectAttempts) {
+            console.error('[WS] Max reconnection attempts reached');
+            this.dispatchEvent(new CustomEvent('reconnectFailed'));
+            return;
+        }
+        this.reconnectAttempts++;
+        const delay = Math.min(this.maxReconnectDelay, this.reconnectDelay * Math.pow(2, this.reconnectAttempts - 1));
+        console.log(`[WS] Reconnecting in ${delay}ms (attempt ${this.reconnectAttempts}/${this.maxReconnectAttempts})`);
+        this.reconnectTimer = setTimeout(() => {
+            this.reconnectTimer = null;
+            this.connect();
+        }, delay);
+    }
+    send(data) {
+        if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+            this.ws.send(JSON.stringify(data));
+        }
+        else {
+            console.error('[WS] Cannot send, not connected');
+        }
+    }
+    handleMessage(message) {
+        // Emit events based on message type
+        switch (message.type) {
+            case 'event':
+                this.dispatchEvent(new CustomEvent('rpcEvent', { detail: { sessionId: message.sessionId, event: message.event } }));
+                break;
+            case 'state':
+                this.dispatchEvent(new CustomEvent('stateUpdate', { detail: message }));
+                break;
+            case 'error':
+                this.dispatchEvent(new CustomEvent('serverError', { detail: message }));
+                break;
+            case 'session_switch':
+                this.dispatchEvent(new CustomEvent('sessionSwitch'));
+                break;
+            case 'live_session_snapshot':
+                this.dispatchEvent(new CustomEvent('liveSessionSnapshot', { detail: message }));
+                break;
+            case 'response':
+                this.dispatchEvent(new CustomEvent('rpcResponse', { detail: message }));
+                break;
+            case 'live_session_created':
+                this.dispatchEvent(new CustomEvent('liveSessionCreated', { detail: message.session }));
+                break;
+            case 'live_session_updated':
+                this.dispatchEvent(new CustomEvent('liveSessionUpdated', { detail: message.session }));
+                break;
+            case 'live_session_closed':
+                this.dispatchEvent(new CustomEvent('liveSessionClosed', { detail: message }));
+                break;
+            default:
+                console.warn('[WS] Unknown message type:', message.type);
+        }
+    }
+}

package/scripts/copy-katex.mjs

@@ -0,0 +1,32 @@
+// Copies the KaTeX runtime assets from node_modules into public/vendor/katex/
+// so the served UI is self-contained and works offline. Only woff2 fonts are
+// copied: KaTeX's CSS lists woff2 first in every @font-face src(), so browsers
+// that can run this app never request the woff/ttf fallbacks.
+import { createRequire } from 'node:module';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const require = createRequire(import.meta.url);
+
+let katexDist;
+try {
+  katexDist = path.join(path.dirname(require.resolve('katex/package.json')), 'dist');
+} catch {
+  console.error('copy-katex: cannot resolve the "katex" package — run `npm install` first.');
+  process.exit(1);
+}
+
+const projectRoot = path.dirname(path.dirname(fileURLToPath(import.meta.url)));
+const vendorDir = path.join(projectRoot, 'public', 'vendor', 'katex');
+const fontsDir = path.join(vendorDir, 'fonts');
+
+fs.mkdirSync(fontsDir, { recursive: true });
+for (const file of ['katex.min.js', 'katex.min.css']) {
+  fs.copyFileSync(path.join(katexDist, file), path.join(vendorDir, file));
+}
+for (const font of fs.readdirSync(path.join(katexDist, 'fonts'))) {
+  if (font.endsWith('.woff2')) {
+    fs.copyFileSync(path.join(katexDist, 'fonts', font), path.join(fontsDir, font));
+  }
+}

package/src/pi-extension/tau-tree.ts

@@ -0,0 +1,71 @@
+/*
+ * pi extension bundled with tau and loaded into every `pi --mode rpc` child
+ * via `--extension <this file>` (see PiRpcSession.start in
+ * src/server/sessions.ts). It gives tau's backend a way to MOVE the session
+ * leaf: pi's native RPC surface only exposes read-only tree commands
+ * (get_tree / get_entries), so tau sends
+ *
+ *   {"type": "prompt", "message": "/tau-tree-navigate <entryId>"}
+ *
+ * and this command handler performs the navigation in-process with
+ * ctx.navigateTree() — the same API pi's own TUI /tree uses, including its
+ * selection semantics (user/custom message → leaf moves to the entry's
+ * PARENT; anything else → leaf moves to the entry itself). Matched extension
+ * commands never reach the LLM and never append a user message, so the
+ * /tau-tree-navigate text is invisible to the model and to the session file.
+ *
+ * Persistence: navigateTree({summarize: false}) only moves the in-memory
+ * leaf pointer, and on load pi derives the leaf from the LAST entry in the
+ * file — so a bare navigation would not survive a pi restart. When the leaf
+ * actually moved, the handler appends a small `custom` marker entry (same
+ * `tau:navigate-tree` customType tau has always used) whose parentId is the
+ * new leaf. Custom entries never participate in LLM context, so the marker
+ * is invisible to the model too.
+ *
+ * Errors thrown here do NOT fail the RPC `prompt` response; pi reports them
+ * as an `extension_error` event (extensionPath "command:tau-tree-navigate").
+ * tau's navigateTree (src/server/tree.ts) therefore verifies the move with a
+ * follow-up get_tree and surfaces the captured extension_error on mismatch.
+ */
+
+// Type-only reference to pi's extension API. Written as an inline import()
+// type (not an `import type` statement) because this file is type-checked as
+// CommonJS by tsconfig.test.json while pi's package is ESM-only, and at
+// runtime it is loaded by pi's jiti / node's type stripping, both of which
+// erase pure type positions.
+type ExtensionAPI = import('@earendil-works/pi-coding-agent', { with: { 'resolution-mode': 'import' } }).ExtensionAPI;
+
+/** Command name tau's backend invokes; keep in sync with src/server/tree.ts. */
+export const NAVIGATE_COMMAND = 'tau-tree-navigate';
+
+/** customType of the marker entries that persist a leaf move across reloads. */
+export const NAVIGATION_MARKER_TYPE = 'tau:navigate-tree';
+
+export default function tauTreeExtension(pi: ExtensionAPI) {
+  pi.registerCommand(NAVIGATE_COMMAND, {
+    description: 'Move the session leaf to an entry (used by the tau web UI tree view)',
+    handler: async (args, ctx) => {
+      const entryId = args.trim();
+      if (!entryId) throw new Error(`/${NAVIGATE_COMMAND}: missing target entry id`);
+      if (!ctx.isIdle()) {
+        throw new Error('Cannot navigate the session tree while the agent is streaming; abort or wait for the turn to finish');
+      }
+      if (!ctx.sessionManager.getEntry(entryId)) {
+        throw new Error(`Entry ${entryId} not found in the session tree`);
+      }
+      const previousLeafId = ctx.sessionManager.getLeafId();
+      // Pass the ORIGINAL entry id: navigateTree applies the user-message →
+      // parent selection rule itself, so pre-resolving the target here would
+      // land the leaf one node too high.
+      const result = await ctx.navigateTree(entryId, { summarize: false });
+      if (result.cancelled) {
+        throw new Error('A pi extension cancelled the tree navigation');
+      }
+      // Persist the move only when the leaf actually changed (navigating to
+      // the current position appends nothing, mirroring pi's own /tree).
+      if (ctx.sessionManager.getLeafId() !== previousLeafId) {
+        pi.appendEntry(NAVIGATION_MARKER_TYPE, { navigatedTo: entryId });
+      }
+    },
+  });
+}