feat: add seamless text and voice chat

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>