feat(web): voice mode overlay talks to the bench's worker with browser speech (CL-9568)

apps/web/src/app.css

@@ -4561,6 +4561,146 @@ tr.insights-row-clickable:hover {
   height: 0.9rem;
 }
 
+/* Voice mode over the thread. */
+.voice {
+  position: absolute;
+  inset: 0;
+  z-index: 25;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: color-mix(in srgb, var(--surface) 94%, transparent);
+  backdrop-filter: blur(16px);
+}
+.voice-orb {
+  position: relative;
+  width: 168px;
+  height: 168px;
+  display: grid;
+  place-items: center;
+}
+.voice-orb::before,
+.voice-orb::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: radial-gradient(
+    closest-side,
+    color-mix(in srgb, var(--action) 26%, transparent),
+    transparent
+  );
+  transform: scale(calc(0.8 + var(--lvl, 0) * 0.5));
+  transition: transform 90ms linear;
+}
+.voice-orb::after {
+  inset: 24px;
+  background: radial-gradient(
+    closest-side,
+    color-mix(in srgb, var(--action) 40%, transparent),
+    transparent
+  );
+  transform: scale(calc(0.85 + var(--lvl, 0) * 0.3));
+}
+.voice-orb > * {
+  position: relative;
+  z-index: 1;
+}
+.voice-state {
+  margin-top: 20px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--ink);
+}
+.voice-state svg {
+  color: var(--action);
+}
+.voice-pulse {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--action);
+}
+.voice-cap {
+  margin-top: 12px;
+  max-width: 52ch;
+  min-height: 3em;
+  padding: 0 24px;
+  text-align: center;
+  font-size: 17px;
+  line-height: 1.5;
+  color: var(--ink-2);
+  text-wrap: balance;
+}
+.voice-cap-hint {
+  color: var(--ink-3);
+}
+.voice-controls {
+  position: absolute;
+  bottom: 32px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+.voice-btn {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  border: 0;
+  display: grid;
+  place-items: center;
+  background: var(--hover);
+  color: var(--ink);
+  cursor: pointer;
+  transition:
+    transform 160ms var(--ease-out),
+    background-color 150ms ease;
+}
+.voice-btn:hover {
+  background: var(--press);
+}
+.voice-btn:active {
+  transform: scale(0.94);
+}
+.voice-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.voice-btn[aria-pressed="true"] {
+  background: var(--press);
+  box-shadow: inset 0 0 0 1.5px var(--line-strong);
+}
+.voice-mic {
+  width: 64px;
+  height: 64px;
+  background: var(--primary);
+  color: var(--primary-ink);
+}
+.voice-mic:hover {
+  background: var(--primary-hover);
+}
+.voice-mic.muted {
+  background: var(--danger-wash);
+  color: var(--danger);
+}
+.voice-end {
+  background: var(--danger);
+  color: var(--danger-ink);
+}
+.voice-end:hover {
+  background: var(--danger-hover);
+}
+.voice-hint {
+  position: absolute;
+  bottom: 104px;
+  font-size: 12.5px;
+  color: var(--ink-3);
+}
+
 /* Bench drawer Insights and Members tabs */
 .drawer-stack {
   display: flex;

apps/web/src/lib/icons/index.tsx

@@ -17,6 +17,7 @@ export {
   Bell,
   BookMarked as BookBookmark,
   Bot as Robot,
+  Captions,
   Check,
   ChartColumn as ChartBar,
   ChevronDown as CaretDown,
@@ -50,6 +51,7 @@ export {
   MessageCircle as ChatCircle,
   MessageCircleMore as ChatCircleDots,
   Mic as Microphone,
+  MicOff as MicrophoneSlash,
   Minimize2 as ArrowsIn,
   Moon,
   MoonStar as MoonStars,
@@ -69,6 +71,7 @@ export {
   Smile as Smiley,
   Square as Stop,
   SquareArrowOutUpRight as ArrowSquareOut,
+  Volume2 as SpeakerHigh,
   Star,
   Sun,
   TriangleAlert as Warning,

apps/web/src/pages/workbench-page.tsx

@@ -23,6 +23,7 @@ import {
   type WorkbenchMessage,
   type WorkbenchParticipant,
 } from "@/chat/threads-api";
+import { VoiceOverlay } from "../voice/voice-overlay";
 import { BenchDrawer } from "../bench/bench-drawer";
 import { BenchPill } from "../bench/bench-pill";
 import { GrantsTab } from "../bench/grants-tab";
@@ -128,6 +129,8 @@ function Workbench({ workbenchTenantId }: { readonly workbenchTenantId: string }
   const [openThread, setOpenThread] = useState<string | null>(null);
   const [drawerOpen, setDrawerOpen] = useState(false);
   const closeDrawer = useCallback(() => setDrawerOpen(false), []);
+  const [voiceOpen, setVoiceOpen] = useState(false);
+  const endVoice = useCallback(() => setVoiceOpen(false), []);
 
   const tenant = useQuery({
     queryKey: workbenchKeys.tenant(workbenchTenantId),
@@ -267,6 +270,10 @@ function Workbench({ workbenchTenantId }: { readonly workbenchTenantId: string }
                   disabled={startingAgent !== undefined}
                   mentionables={mentionables}
                   onSend={(text) => send.mutate({ content: text })}
+                  onVoice={() => {
+                    setDrawerOpen(false);
+                    setVoiceOpen(true);
+                  }}
                 />
               </PageShell>
             </div>
@@ -302,6 +309,14 @@ function Workbench({ workbenchTenantId }: { readonly workbenchTenantId: string }
               />
             </aside>
           )}
+          {voiceOpen ? (
+            <VoiceOverlay
+              worker={agents[0]}
+              messages={messages}
+              onSend={(text) => send.mutate({ content: text })}
+              onEnd={endVoice}
+            />
+          ) : null}
         </div>
         <BenchDrawer
           open={drawerOpen}