From 47724174641e8e18c839c18936820e5e3eaa2917 Mon Sep 17 00:00:00 2001
From: "Gan, Jimmy" <jimmy.gan@adidas.com>
Date: Thu, 26 Feb 2026 16:25:35 +0800
Subject: [PATCH] fix: compact voice mode bottom sheet, hide title, inline
 mic+transcript

---
 dashboard/frontend/src/routes/Terminal.svelte | 48 +++++++++----------
 1 file changed, 23 insertions(+), 25 deletions(-)

diff --git a/dashboard/frontend/src/routes/Terminal.svelte b/dashboard/frontend/src/routes/Terminal.svelte
index d441b26..e86ec39 100644
--- a/dashboard/frontend/src/routes/Terminal.svelte
+++ b/dashboard/frontend/src/routes/Terminal.svelte
@@ -100,8 +100,10 @@
 
   onDestroy(() => tabData.forEach((d) => { d.voice?.destroy(); d.ro?.disconnect(); d.ws?.close(); d.term?.dispose(); }));
 </script>
-<div class="space-y-2">
-  <h1 class="text-2xl font-bold text-surface-900 tracking-tight">Terminal</h1>
+<div class={activeVoice()?.voiceMode ? 'space-y-1' : 'space-y-2'}>
+  {#if !activeVoice()?.voiceMode}
+    <h1 class="text-2xl font-bold text-surface-900 tracking-tight">Terminal</h1>
+  {/if}
 
   <div class="flex items-center gap-1 border-b border-surface-700 pb-1 relative">
     {#each tabs as tab (tab.id)}
@@ -168,17 +170,17 @@
       <div
         use:initTerminal={tab}
         class="rounded-xl overflow-hidden shadow-lg border border-surface-700 transition-all duration-300"
-        style="background: #0f172a; height: calc(100vh - {activeVoice()?.voiceMode ? '25rem' : '10rem'});"
+        style="background: #0f172a; height: calc(100vh - {activeVoice()?.voiceMode ? '19rem' : '10rem'});"
       ></div>
     </div>
   {/each}
 
   {#if activeVoice()?.voiceMode}
     {@const v = activeVoice()}
-    <div class="mt-2 rounded-xl bg-surface-800/95 border border-surface-700 shadow-xl overflow-hidden animate-slide-up" style="height: 180px;">
+    <div class="mt-1 rounded-xl bg-surface-800/95 border border-surface-700 shadow-xl overflow-hidden animate-slide-up">
       <!-- Header -->
-      <div class="flex items-center justify-between px-4 py-2 border-b border-surface-700/50">
-        <span class="text-sm font-medium text-surface-300">Voice Mode</span>
+      <div class="flex items-center justify-between px-3 py-1.5 border-b border-surface-700/50">
+        <span class="text-xs font-medium text-surface-300">Voice Mode</span>
         <div class="flex items-center gap-2">
           <select
             class="bg-surface-700 text-surface-300 text-xs rounded px-1 py-0.5 outline-none max-w-[120px]"
@@ -202,42 +204,38 @@
           >&times;</button>
         </div>
       </div>
-      <!-- Transcript -->
-      <div class="px-4 py-2 h-[60px] overflow-y-auto">
-        {#if v.transcript}
-          <p class="text-sm text-surface-400 italic">"{v.transcript}"</p>
-        {:else}
-          <p class="text-sm text-surface-600 italic">{v.speaking ? 'Speaking...' : 'Waiting for speech...'}</p>
-        {/if}
-      </div>
-      <!-- Mic area -->
-      <div class="flex flex-col items-center gap-1 py-2">
+      <!-- Transcript + Mic -->
+      <div class="flex items-center gap-3 px-3 py-2">
         {#if v.talkMode === "hold"}
           <button
             aria-label="Hold to talk"
-            class="w-14 h-14 rounded-full flex items-center justify-center transition-colors {v.listening ? 'bg-rose-500/30 text-rose-400' : 'bg-surface-700 text-surface-300 hover:bg-surface-600'}"
+            class="w-10 h-10 shrink-0 rounded-full flex items-center justify-center transition-colors {v.listening ? 'bg-rose-500/30 text-rose-400' : 'bg-surface-700 text-surface-300 hover:bg-surface-600'}"
             onpointerdown={() => { v.startHold(); voiceTick++; }}
             onpointerup={() => { v.releaseHold(); voiceTick++; }}
             onpointerleave={() => { if (v.listening) { v.releaseHold(); voiceTick++; } }}
           >
-            <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/><path d="M19 10v2a7 7 0 01-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
+            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/><path d="M19 10v2a7 7 0 01-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
           </button>
-          <span class="text-xs text-surface-500">{v.listening ? 'Release to send' : 'Hold to talk'}</span>
         {:else if v.talkMode === "tap"}
           <button
             aria-label="Tap to talk"
-            class="w-14 h-14 rounded-full flex items-center justify-center transition-colors {v.listening ? 'bg-rose-500/30 text-rose-400' : 'bg-surface-700 text-surface-300 hover:bg-surface-600'}"
+            class="w-10 h-10 shrink-0 rounded-full flex items-center justify-center transition-colors {v.listening ? 'bg-rose-500/30 text-rose-400' : 'bg-surface-700 text-surface-300 hover:bg-surface-600'}"
             onclick={() => { v.tapMic(); voiceTick++; }}
           >
-            <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/><path d="M19 10v2a7 7 0 01-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
+            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/><path d="M19 10v2a7 7 0 01-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
           </button>
-          <span class="text-xs text-surface-500">{v.listening ? 'Tap to send' : 'Tap to talk'}</span>
         {:else}
-          <div class="w-14 h-14 rounded-full flex items-center justify-center {v.listening ? 'bg-emerald-500/20 text-emerald-400 animate-pulse' : 'bg-surface-700 text-surface-500'}">
-            <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/><path d="M19 10v2a7 7 0 01-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
+          <div class="w-10 h-10 shrink-0 rounded-full flex items-center justify-center {v.listening ? 'bg-emerald-500/20 text-emerald-400 animate-pulse' : 'bg-surface-700 text-surface-500'}">
+            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/><path d="M19 10v2a7 7 0 01-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
           </div>
-          <span class="text-xs text-surface-500">{v.listening ? 'Listening...' : v.speaking ? 'Speaking...' : 'Ready'}</span>
         {/if}
+        <div class="flex-1 min-w-0">
+          {#if v.transcript}
+            <p class="text-sm text-surface-400 italic truncate">"{v.transcript}"</p>
+          {:else}
+            <p class="text-xs text-surface-600">{v.speaking ? 'Speaking...' : v.listening ? 'Listening...' : 'Ready'}</p>
+          {/if}
+        </div>
       </div>
     </div>
   {/if}