feat: add seamless text and voice chat

web/app.js

@@ -26,6 +26,7 @@ const VOICES = [
 
 const HISTORY_KEY = "voice_history";
 const HISTORY_MAX = 50;
+const MODE_KEY = "hope_conversation_mode";
 
 // ── State ───────────────────────────────────────────────────────────────────
 let room = null;
@@ -35,6 +36,8 @@ let micLevel = 0;                // 0..1, smoothed
 let agentAudioLevel = 0;         // 0..1, smoothed
 let userSpeaking = false;        // local VAD-ish flag from mic level
 let wakeLock = null;
+let conversationMode = localStorage.getItem(MODE_KEY) === "text" ? "text" : "voice";
+let connectionPromise = null;
 
 function escapeHtml(s) {
     const d = document.createElement("div");
@@ -65,6 +68,13 @@ const tasksPanel = document.getElementById("tasksPanel");
 const tasksList = document.getElementById("tasksList");
 const tasksBadge = document.getElementById("tasksBadge");
 const closeTasksBtn = document.getElementById("closeTasksBtn");
+const voiceModeBtn = document.getElementById("voiceModeBtn");
+const textModeBtn = document.getElementById("textModeBtn");
+const modeDescriptionEl = document.getElementById("modeDescription");
+const transcriptModeLabelEl = document.getElementById("transcriptModeLabel");
+const chatComposer = document.getElementById("chatComposer");
+const chatInput = document.getElementById("chatInput");
+const sendChatBtn = document.getElementById("sendChatBtn");
 
 // ── Background tasks state ──────────────────────────────────────────────────
 const tasks = new Map(); // task_id -> {id, description, status, steps: [], result, error}
@@ -133,6 +143,57 @@ tasksBtn.setAttribute("aria-expanded", "false");
 tasksBtn.addEventListener("click", () => setTasksOpen(!tasksPanel.classList.contains("open")));
 closeTasksBtn.addEventListener("click", () => setTasksOpen(false));
 
+// ── Voice / text mode ──────────────────────────────────────────────────────
+function updateModeUI() {
+    const isText = conversationMode === "text";
+    document.body.dataset.mode = conversationMode;
+    voiceModeBtn.classList.toggle("active", !isText);
+    textModeBtn.classList.toggle("active", isText);
+    voiceModeBtn.setAttribute("aria-pressed", String(!isText));
+    textModeBtn.setAttribute("aria-pressed", String(isText));
+    modeDescriptionEl.textContent = isText
+        ? "Type when quiet is better. Switch back to voice without losing the thread."
+        : "Speak naturally. I’ll listen, remember, and answer in real time.";
+    transcriptModeLabelEl.textContent = isText ? "Shared voice and text history" : "Live voice transcript";
+    startBtn.innerHTML = isText
+        ? '<span class="button-spark" aria-hidden="true"></span>Connect to Hope'
+        : '<span class="button-spark" aria-hidden="true"></span>Start conversation';
+    if (isText) {
+        setState(room ? "listening" : "idle");
+        window.setTimeout(() => chatInput.focus(), 0);
+    }
+}
+
+async function setConversationMode(mode) {
+    if (mode !== "voice" && mode !== "text") return;
+    conversationMode = mode;
+    localStorage.setItem(MODE_KEY, mode);
+    updateModeUI();
+
+    if (!room || !room.localParticipant) return;
+    sendModeMessage(mode);
+    if (mode === "text") {
+        await room.localParticipant.setMicrophoneEnabled(false);
+        micMuted = true;
+        muteBtn.disabled = true;
+        updateMuteIcon();
+        stopVisualLoop();
+        statusEl.textContent = "Secure room · Text mode";
+    } else {
+        await room.startAudio();
+        await room.localParticipant.setMicrophoneEnabled(true);
+        micMuted = false;
+        muteBtn.disabled = false;
+        updateMuteIcon();
+        setupMicAnalyser();
+        startVisualLoop();
+        statusEl.textContent = "Secure room · Microphone on";
+    }
+}
+
+voiceModeBtn.addEventListener("click", () => setConversationMode("voice"));
+textModeBtn.addEventListener("click", () => setConversationMode("text"));
+
 // ── Audio analysers (mic + remote agent audio) ─────────────────────────────
 let micCtx = null;
 let micAnalyser = null;
@@ -202,18 +263,26 @@ function readAgentAudioLevel() {
 
 // ── State machine ───────────────────────────────────────────────────────────
 const STATE_LABELS = {
-    idle: "Ready when you are",
-    connecting: "Opening a secure room",
-    listening: "Listening",
-    thinking: "Thinking it through",
-    speaking: "Hope is speaking",
+    voice: {
+        idle: "Ready when you are",
+        connecting: "Opening a secure room",
+        listening: "Listening",
+        thinking: "Thinking it through",
+        speaking: "Hope is speaking",
+    },
+    text: {
+        idle: "Ready to type",
+        connecting: "Opening a secure room",
+        listening: "Text chat ready",
+        thinking: "Hope is writing",
+        speaking: "Hope replied",
+    },
 };
 
 function setState(next) {
-    if (next === uiState) return;
     uiState = next;
     orbEl.dataset.state = next;
-    stateLabelEl.textContent = STATE_LABELS[next] || next;
+    stateLabelEl.textContent = STATE_LABELS[conversationMode][next] || next;
 
     // Thinking timer: show the "thinking..." chip if it lingers past 2s
     if (next === "thinking") {
@@ -235,6 +304,8 @@ function setState(next) {
     }
 }
 
+updateModeUI();
+
 function inferState() {
     if (!room || !room.localParticipant) return "idle";
     if (!agentParticipant) return "connecting";
@@ -441,6 +512,10 @@ function handleDataPacket(payload, participant, topic) {
         const msg = JSON.parse(new TextDecoder().decode(payload));
         if (msg.type === "transcript") {
             addMessage(msg.role || "agent", msg.text);
+            if (conversationMode === "text" && (msg.role || "agent") === "agent") {
+                setState("listening");
+                chatInput.focus();
+            }
         } else if (msg.type === "task_event") {
             handleTaskEvent(msg);
         }
@@ -558,9 +633,12 @@ function findAgent(rm) {
 
 function markAgentFound(rm, participant) {
     agentParticipant = participant;
-    statusEl.textContent = "Hope joined · Preparing microphone…";
-    // Send current voice selection to the agent
+    statusEl.textContent = conversationMode === "text"
+        ? "Hope joined · Text chat ready"
+        : "Hope joined · Preparing microphone…";
+    // Synchronize voice and interaction mode when the agent joins.
     sendVoiceMessage(currentVoiceId(), rm);
+    sendModeMessage(conversationMode, rm);
 }
 
 function createRoom(token) {
@@ -665,52 +743,116 @@ function waitForAgent(timeoutMs) {
     });
 }
 
-startBtn.addEventListener("click", async () => {
-    try {
-        setState("connecting");
-        statusEl.textContent = "Opening your secure room…";
-        await acquireWakeLock();
+async function connectConversation() {
+    if (room && agentParticipant) return room;
+    if (connectionPromise) return connectionPromise;
 
-        // Get a signed access token from the token endpoint
-        const token = await fetchToken(ROOM_NAME);
+    connectionPromise = (async () => {
+        try {
+            setState("connecting");
+            statusEl.textContent = "Opening your secure room…";
+            await acquireWakeLock();
 
-        room = await createRoom(token);
-        await room.startAudio();
+            // Get a signed access token from the token endpoint.
+            const token = await fetchToken(ROOM_NAME);
+            room = await createRoom(token);
 
-        // The agent is dispatched when we join. If it misses the dispatch
-        // (e.g. the server just started and the worker wasn't ready yet),
-        // reconnect once to trigger a fresh dispatch.
-        statusEl.textContent = "Inviting Hope into the room…";
-        if (!(await waitForAgent(10000))) {
-            statusEl.textContent = "Hope is taking a moment · Retrying…";
-            const stale = room;
-            room = null;          // detach first so its Disconnected handler
-            agentParticipant = null;  // cannot clobber the UI
-            await stale.disconnect();
-            const freshToken = await fetchToken(ROOM_NAME);
-            room = await createRoom(freshToken);
-            if (!(await waitForAgent(15000))) {
-                throw new Error("Assistant did not join — reload the page and try again");
+            // The agent is dispatched when we join. If it misses the dispatch
+            // (for example during a server restart), reconnect once.
+            statusEl.textContent = "Inviting Hope into the room…";
+            if (!(await waitForAgent(10000))) {
+                statusEl.textContent = "Hope is taking a moment · Retrying…";
+                const stale = room;
+                room = null;
+                agentParticipant = null;
+                await stale.disconnect();
+                const freshToken = await fetchToken(ROOM_NAME);
+                room = await createRoom(freshToken);
+                if (!(await waitForAgent(15000))) {
+                    throw new Error("Assistant did not join — reload the page and try again");
+                }
             }
+
+            sendModeMessage(conversationMode);
+            if (conversationMode === "voice") {
+                await room.startAudio();
+                statusEl.textContent = "Waiting for microphone permission…";
+                await room.localParticipant.setMicrophoneEnabled(true);
+                micMuted = false;
+                setupMicAnalyser();
+                startVisualLoop();
+                statusEl.textContent = "Secure room · Microphone on";
+            } else {
+                await room.localParticipant.setMicrophoneEnabled(false);
+                micMuted = true;
+                stopVisualLoop();
+                statusEl.textContent = "Secure room · Text mode";
+            }
+
+            startBtn.disabled = true;
+            stopBtn.disabled = false;
+            muteBtn.disabled = conversationMode !== "voice";
+            updateMuteIcon();
+            setState("listening");
+            return room;
+        } catch (err) {
+            console.error("Connection failed:", err);
+            statusEl.textContent = `Error: ${err.message}`;
+            setState("idle");
+            releaseWakeLock();
+            throw err;
+        } finally {
+            connectionPromise = null;
         }
+    })();
 
-        statusEl.textContent = "Waiting for microphone permission…";
-        await room.localParticipant.setMicrophoneEnabled(true);
+    return connectionPromise;
+}
 
-        statusEl.textContent = "Secure room · Microphone on";
-        startBtn.disabled = true;
-        stopBtn.disabled = false;
-        muteBtn.disabled = false;
-        micMuted = false;
+startBtn.addEventListener("click", () => {
+    connectConversation().catch(() => {});
+});
 
-        setupMicAnalyser();
-        startVisualLoop();
+// ── Text chat ──────────────────────────────────────────────────────────────
+function resizeChatInput() {
+    chatInput.style.height = "auto";
+    chatInput.style.height = `${Math.min(chatInput.scrollHeight, 144)}px`;
+}
 
+chatInput.addEventListener("input", () => {
+    resizeChatInput();
+    sendChatBtn.disabled = !chatInput.value.trim();
+});
+
+chatInput.addEventListener("keydown", (event) => {
+    if (event.key === "Enter" && !event.shiftKey) {
+        event.preventDefault();
+        chatComposer.requestSubmit();
+    }
+});
+
+chatComposer.addEventListener("submit", async (event) => {
+    event.preventDefault();
+    const text = chatInput.value.trim();
+    if (!text) return;
+
+    sendChatBtn.disabled = true;
+    chatInput.disabled = true;
+    try {
+        if (conversationMode !== "text") await setConversationMode("text");
+        await connectConversation();
+        setState("thinking");
+        await room.localParticipant.sendText(text, { topic: "lk.chat" });
+        chatInput.value = "";
+        resizeChatInput();
     } catch (err) {
-        console.error("Connection failed:", err);
-        statusEl.textContent = `Error: ${err.message}`;
-        setState("idle");
-        releaseWakeLock();
+        console.error("Text message failed:", err);
+        statusEl.textContent = `Message not sent: ${err.message}`;
+        setState("listening");
+    } finally {
+        chatInput.disabled = false;
+        sendChatBtn.disabled = !chatInput.value.trim();
+        chatInput.focus();
     }
 });
 
@@ -770,3 +912,13 @@ function sendVoiceMessage(voice, targetRoom) {
         reliable: true,
     });
 }
+
+function sendModeMessage(mode, targetRoom) {
+    const r = targetRoom || room;
+    if (!r || !r.localParticipant) return;
+    const payload = new TextEncoder().encode(JSON.stringify({ type: "set_mode", mode }));
+    r.localParticipant.publishData(payload, {
+        topic: "conversation-control",
+        reliable: true,
+    });
+}

web/index.html

@@ -9,7 +9,7 @@
     <link rel="icon" type="image/svg+xml" href="favicon.svg">
     <link rel="stylesheet" href="style.css">
 </head>
-<body>
+<body data-mode="voice">
     <a class="skip-link" href="#conversation">Skip to conversation</a>
 
     <main class="app-shell">
@@ -18,11 +18,21 @@
                 <span class="brand-glyph" aria-hidden="true"><i></i></span>
                 <div>
                     <h1>Hope</h1>
-                    <p>Voice companion</p>
+                    <p>Voice and text companion</p>
                 </div>
             </div>
 
             <div class="topbar-actions">
+                <div class="mode-switch" role="group" aria-label="Conversation mode">
+                    <button id="voiceModeBtn" class="mode-option active" type="button" aria-pressed="true">
+                        <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path></svg>
+                        <span>Voice</span>
+                    </button>
+                    <button id="textModeBtn" class="mode-option" type="button" aria-pressed="false">
+                        <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4Z"></path></svg>
+                        <span>Text</span>
+                    </button>
+                </div>
                 <div class="identity-chip" aria-label="Current profile: Shane">
                     <span class="presence-dot" aria-hidden="true"></span>
                     <span>Private to <strong>Shane</strong></span>
@@ -39,7 +49,7 @@
             <section class="voice-console" aria-labelledby="voiceHeading">
                 <div class="console-intro">
                     <h2 id="voiceHeading">I'm here.</h2>
-                    <p>Speak naturally. I’ll listen, remember, and answer in real time.</p>
+                    <p id="modeDescription">Speak naturally. I’ll listen, remember, and answer in real time.</p>
                 </div>
 
                 <div class="orb-stage">
@@ -85,11 +95,19 @@
                 <div class="transcript-header">
                     <div>
                         <h2 id="conversationHeading">Conversation</h2>
-                        <p>Live transcript</p>
+                        <p id="transcriptModeLabel">Live voice transcript</p>
                     </div>
                     <button id="clearBtn" class="btn btn-ghost" title="Clear conversation">Clear</button>
                 </div>
                 <div id="messages" aria-live="polite"></div>
+                <form class="chat-composer" id="chatComposer" aria-label="Send a text message">
+                    <label class="sr-only" for="chatInput">Message Hope</label>
+                    <textarea id="chatInput" rows="1" maxlength="2000" placeholder="Message Hope…" autocomplete="off"></textarea>
+                    <button id="sendChatBtn" class="send-chat" type="submit" disabled aria-label="Send message">
+                        <svg viewBox="0 0 24 24" width="19" height="19" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m22 2-7 20-4-9-9-4Z"></path><path d="M22 2 11 13"></path></svg>
+                    </button>
+                    <span class="composer-hint">Enter to send · Shift+Enter for a new line</span>
+                </form>
             </section>
         </div>
     </main>

web/style.css

@@ -86,6 +86,18 @@ button {
     transform: translateY(0);
 }
 
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
 .app-shell {
     width: min(1180px, 100%);
     margin: 0 auto;
@@ -171,6 +183,50 @@ button {
     gap: 0.65rem;
 }
 
+.mode-switch {
+    height: 38px;
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    padding: 3px;
+    border: 1px solid var(--line);
+    border-radius: 10px;
+    background: rgba(5, 11, 20, 0.55);
+}
+
+.mode-option {
+    height: 30px;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.38rem;
+    padding: 0 0.65rem;
+    border: 0;
+    border-radius: 7px;
+    cursor: pointer;
+    color: var(--ink-muted);
+    background: transparent;
+    font-size: 0.72rem;
+    font-weight: 650;
+    transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease;
+}
+
+.mode-option:hover {
+    color: var(--ink-soft);
+}
+
+.mode-option.active {
+    color: var(--ink);
+    background: var(--surface-soft);
+    box-shadow: 0 1px 5px rgba(2, 7, 14, 0.3);
+}
+
+.mode-option:focus-visible,
+.chat-composer textarea:focus-visible,
+.send-chat:focus-visible {
+    outline: 2px solid var(--focus);
+    outline-offset: 2px;
+}
+
 .identity-chip {
     min-height: 38px;
     gap: 0.55rem;
@@ -804,6 +860,116 @@ button {
     transition: height 70ms linear;
 }
 
+/* ── Text composer ──────────────────────────────────────────────────────── */
+.chat-composer {
+    position: relative;
+    display: none;
+    align-items: flex-end;
+    gap: 0.55rem;
+    padding: 0.75rem 0 1.25rem;
+    border-top: 1px solid var(--line);
+}
+
+body[data-mode="text"] .chat-composer {
+    display: flex;
+}
+
+.chat-composer textarea {
+    width: 100%;
+    min-height: 48px;
+    max-height: 144px;
+    resize: none;
+    padding: 0.8rem 3.2rem 0.8rem 0.9rem;
+    border: 1px solid var(--line-strong);
+    border-radius: 12px;
+    color: var(--ink);
+    background: var(--surface-raised);
+    font: inherit;
+    font-size: 0.9rem;
+    line-height: 1.4;
+    caret-color: var(--iris);
+    transition: border-color 160ms ease, background 160ms ease;
+}
+
+.chat-composer textarea::placeholder {
+    color: var(--ink-muted);
+}
+
+.chat-composer textarea:focus {
+    border-color: rgba(139, 167, 255, 0.56);
+    background: var(--surface-soft);
+}
+
+.send-chat {
+    position: absolute;
+    right: 0.55rem;
+    bottom: 2.05rem;
+    width: 34px;
+    height: 34px;
+    display: grid;
+    place-items: center;
+    border: 0;
+    border-radius: 9px;
+    cursor: pointer;
+    color: #08111f;
+    background: var(--iris);
+    transition: opacity 150ms ease, transform 150ms var(--ease-out), background 150ms ease;
+}
+
+.send-chat:hover:not(:disabled) {
+    background: #a9bbff;
+    transform: translateY(-1px);
+}
+
+.send-chat:disabled {
+    cursor: default;
+    opacity: 0.25;
+}
+
+.composer-hint {
+    position: absolute;
+    left: 0.2rem;
+    bottom: 0.25rem;
+    color: var(--ink-muted);
+    font-size: 0.62rem;
+}
+
+/* Text mode makes the transcript the primary surface while preserving Hope's
+   live presence and the same underlying conversation. */
+body[data-mode="text"] .workspace {
+    grid-template-columns: minmax(240px, 0.62fr) minmax(480px, 1.38fr);
+}
+
+body[data-mode="text"] .voice-console {
+    padding: 2rem 1.5rem 1.4rem;
+}
+
+body[data-mode="text"] .console-intro h2 {
+    font-size: 1.55rem;
+}
+
+body[data-mode="text"] .orb-stage {
+    min-height: 220px;
+}
+
+body[data-mode="text"] .orb {
+    width: 180px;
+    height: 180px;
+    transform: scale(0.72);
+}
+
+body[data-mode="text"] .controls {
+    max-width: 220px;
+}
+
+body[data-mode="text"] #muteBtn {
+    display: none;
+}
+
+body[data-mode="text"] .mic-meter {
+    visibility: hidden;
+}
+
 /* ── Voice settings ─────────────────────────────────────────────────────── */
 .sheet-backdrop {
     position: fixed;
@@ -1065,7 +1231,8 @@ button {
                  calc(0.85rem + env(safe-area-inset-left));
     }
 
-    .workspace {
+    .workspace,
+    body[data-mode="text"] .workspace {
         grid-template-columns: 1fr;
         height: auto;
         min-height: auto;
@@ -1096,10 +1263,15 @@ button {
     }
 
     .brand p,
-    .identity-chip {
+    .identity-chip,
+    .mode-option svg {
         display: none;
     }
 
+    .mode-option {
+        padding: 0 0.55rem;
+    }
+
     .workspace {
         border-right: 0;
         border-left: 0;
@@ -1111,6 +1283,20 @@ button {
         padding: 2.1rem 1.15rem 1.25rem;
     }
 
+    body[data-mode="text"] .voice-console {
+        min-height: 270px;
+        padding: 1.35rem 1rem 1rem;
+    }
+
+    body[data-mode="text"] .orb-stage {
+        min-height: 120px;
+        margin: -0.75rem 0;
+    }
+
+    body[data-mode="text"] .orb {
+        transform: scale(0.48);
+    }
+
     .console-intro h2 {
         font-size: 1.7rem;
     }