nits

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

js/desktop/src/components/confirm-destructive-overlay.tsx

@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { Button } from '@/components/ui/button';
+import { KeyHint } from '@/components/key-hint';
 
 interface ConfirmDestructiveOverlayProps {
   title: string;
@@ -43,12 +44,14 @@ export function ConfirmDestructiveOverlay({
       <div className="absolute left-1/2 top-1/2 w-full max-w-sm -translate-x-1/2 -translate-y-1/2 rounded-2xl border border-white/10 bg-white/5 p-6 shadow-2xl backdrop-blur-xl">
         <div className="mb-3 flex items-center justify-between">
           <h2 className="text-sm font-semibold text-white/70">{title}</h2>
-          <span className="text-xs text-white/30">
+          <KeyHint
-            <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
+            keys="Esc"
-              Esc
+            onClick={onClose}
-            </kbd>{' '}
+            title="Close (or press Esc)"
+            className="text-xs text-white/30"
+          >
             to close
-          </span>
+          </KeyHint>
         </div>
 
         <div className="text-sm text-white/60">{description}</div>

js/desktop/src/components/key-hint.tsx

@@ -0,0 +1,79 @@
+import { Fragment } from 'react';
+import { Kbd } from '@/components/ui/kbd';
+import { cn } from '@/lib/utils';
+
+/** Dark-overlay chip restyle of the design-system Kbd, kept in one place. */
+const chipClass =
+  'rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs font-normal text-current';
+
+interface KeyHintProps {
+  /** Key chip(s): "Esc" or ["Esc", "Q"]. */
+  keys: string | string[];
+  /** Rendered between chips, e.g. "or". Defaults to a plain space. */
+  separator?: React.ReactNode;
+  /** Text before the first chip, e.g. "Release". */
+  prefix?: React.ReactNode;
+  /** Trailing label, e.g. "cancel". May contain icons. */
+  children?: React.ReactNode;
+  /** When set, renders a <button> with hover affordance; otherwise a plain <span>. */
+  onClick?: () => void;
+  /** Tooltip explaining the action; pass alongside onClick. */
+  title?: string;
+  className?: string;
+  'aria-label'?: string;
+}
+
+/**
+ * A keyboard-shortcut hint: one or more key chips with optional surrounding
+ * text. Keyboard-first, but every hint with an `onClick` is also a real
+ * button so mouse users can trigger the same action by clicking it.
+ */
+export function KeyHint({
+  keys,
+  separator,
+  prefix,
+  children,
+  onClick,
+  title,
+  className,
+  ...rest
+}: KeyHintProps) {
+  const keyList = Array.isArray(keys) ? keys : [keys];
+  const content = (
+    <>
+      {prefix != null && <>{prefix} </>}
+      {keyList.map((k, i) => (
+        <Fragment key={`${k}-${i}`}>
+          {i > 0 && (separator != null ? <> {separator} </> : ' ')}
+          <Kbd className={chipClass}>{k}</Kbd>
+        </Fragment>
+      ))}
+      {children != null && <> {children}</>}
+    </>
+  );
+
+  if (!onClick) {
+    return (
+      <span className={className} {...rest}>
+        {content}
+      </span>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      // Keep focus where it is (e.g. the compose textarea); the click still fires.
+      onMouseDown={(e) => e.preventDefault()}
+      title={title}
+      className={cn(
+        'cursor-pointer rounded transition-colors hover:text-white/80',
+        className,
+      )}
+      {...rest}
+    >
+      {content}
+    </button>
+  );
+}

js/desktop/src/components/keybindings-overlay.tsx

@@ -1,6 +1,7 @@
 import { useSuspendPlayback } from '@/hooks/use-suspend-playback';
 import { useEffect } from 'react';
 import { createPortal } from 'react-dom';
+import { KeyHint } from '@/components/key-hint';
 
 export interface KeybindingEntry {
   keys: string[];
@@ -54,16 +55,15 @@ export function KeybindingsOverlay({
       <div className="absolute left-1/2 top-1/2 w-full max-w-sm -translate-x-1/2 -translate-y-1/2 rounded-2xl border border-white/10 bg-white/5 p-6 shadow-2xl backdrop-blur-xl">
         <div className="mb-5 flex items-center justify-between">
           <h2 className="text-sm font-semibold text-white/70">{title}</h2>
-          <span className="text-xs text-white/30">
+          <KeyHint
-            <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
+            keys={['Esc', '?']}
-              Esc
+            separator="or"
-            </kbd>{' '}
+            onClick={onClose}
-            or{' '}
+            title="Close (or press Esc / ?)"
-            <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
+            className="text-xs text-white/30"
-              ?
+          >
-            </kbd>{' '}
             to close
-          </span>
+          </KeyHint>
         </div>
         <div className="flex flex-col gap-5">
           {groups.map((group) => (
@@ -80,16 +80,10 @@ export function KeybindingsOverlay({
                     <span className="text-sm text-white/70">
                       {binding.description}
                     </span>
-                    <span className="flex items-center gap-1">
+                    <KeyHint
-                      {binding.keys.map((k) => (
+                      keys={binding.keys}
-                        <kbd
+                      className="flex items-center gap-1 text-white/60"
-                          key={k}
+                    />
-                          className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs text-white/60"
-                        >
-                          {k}
-                        </kbd>
-                      ))}
-                    </span>
                   </li>
                 ))}
               </ul>

js/desktop/src/components/ui/kbd.tsx

@@ -0,0 +1,26 @@
+import { cn } from '@/lib/utils';
+
+function Kbd({ className, ...props }: React.ComponentProps<'kbd'>) {
+  return (
+    <kbd
+      data-slot="kbd"
+      className={cn(
+        "pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <kbd
+      data-slot="kbd-group"
+      className={cn('inline-flex items-center gap-1', className)}
+      {...props}
+    />
+  );
+}
+
+export { Kbd, KbdGroup };

js/desktop/src/components/video-audio-toggle.tsx

@@ -1,4 +1,5 @@
 import { Video, Mic } from 'lucide-react';
+import { KeyHint } from '@/components/key-hint';
 import { useMediaSettingsStore } from '@/stores/media-settings-store';
 
 export function VideoAudioToggle() {
@@ -6,8 +7,8 @@ export function VideoAudioToggle() {
   const setRecordingMode = useMediaSettingsStore((s) => s.setRecordingMode);
 
   return (
-    <span
+    <KeyHint
-      role="button"
+      keys="V"
       onClick={() =>
         setRecordingMode(recordingMode === 'video' ? 'audio' : 'video')
       }
@@ -16,11 +17,7 @@ export function VideoAudioToggle() {
           ? 'Switch to audio-only (V)'
           : 'Switch to video (V)'
       }
-      className="cursor-pointer transition-colors hover:text-white/80"
     >
-      <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
-        V
-      </kbd>{' '}
       {recordingMode === 'video' ? (
         <>
           <Video className="inline size-3" /> video
@@ -30,6 +27,6 @@ export function VideoAudioToggle() {
           <Mic className="inline size-3" /> audio
         </>
       )}
-    </span>
+    </KeyHint>
   );
 }

js/desktop/src/features/attachments/attachment-lightbox.tsx

@@ -12,6 +12,7 @@ import {
 import { useDownloadUrl } from '@/hooks/use-download-url';
 import { useObjectUrl } from '@/hooks/use-object-url';
 import { Button } from '@/components/ui/button';
+import { KeyHint } from '@/components/key-hint';
 import { useSuspendPlayback } from '@/hooks/use-suspend-playback';
 import { platform } from '@/lib/platform';
 
@@ -294,37 +295,46 @@ export function AttachmentLightbox({
               <div className="absolute bottom-4 left-1/2 flex -translate-x-1/2 items-center gap-4 text-xs text-white/50">
                 {hasMultiple && (
                   <span className="flex items-center gap-1.5">
-                    <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
+                    <KeyHint
-                      ←
+                      keys="←"
-                    </kbd>
+                      onClick={() => goTo(-1)}
-                    <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
+                      title="Previous (or press ←)"
-                      →
+                      aria-label="Previous attachment"
-                    </kbd>
+                    />
+                    <KeyHint
+                      keys="→"
+                      onClick={() => goTo(1)}
+                      title="Next (or press →)"
+                      aria-label="Next attachment"
+                    />
                     navigate
                   </span>
                 )}
                 {canDownload && (
-                  <span className="flex items-center gap-1.5">
+                  <KeyHint
-                    <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
+                    keys="D"
-                      D
+                    onClick={handleDownload}
-                    </kbd>
+                    title="Download (or press D)"
+                  >
                     download
-                  </span>
+                  </KeyHint>
                 )}
                 {onRemove && (
-                  <span className="flex items-center gap-1.5">
+                  <KeyHint
-                    <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
+                    keys="⌫"
-                      ⌫
+                    onClick={handleRemove}
-                    </kbd>
+                    title="Remove (or press Backspace)"
+                  >
                     remove
-                  </span>
+                  </KeyHint>
                 )}
-                <span className="flex items-center gap-1.5">
+                <KeyHint
-                  <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
+                  keys="Esc"
-                    Esc
+                  onClick={() => onOpenChange(null)}
-                  </kbd>
+                  title="Close (or press Esc)"
+                >
                   close
-                </span>
+                </KeyHint>
               </div>
             </>
           )}

js/desktop/src/features/compose/compose-overlay.tsx

@@ -17,6 +17,7 @@ import { particlePath, parseParticlePath } from '@/lib/particle-path';
 import type { ParticlePath } from '@/lib/particle-path';
 import { RecordingOverlay } from '@/features/compose/recording-overlay';
 import { ScreenSourcePicker } from '@/components/screen-source-picker';
+import { KeyHint } from '@/components/key-hint';
 import { TextComposeStep } from '@/features/compose/text-compose-step';
 import { ConfigureStreamStep } from '@/features/compose/configure-stream-step';
 import { apiClient } from '@/api/client';
@@ -726,28 +727,20 @@ export function ComposeOverlay({
             </div>
           </div>
           <div className="absolute bottom-4 z-10 flex items-center gap-4 text-sm text-white/50">
-            <button
+            <KeyHint
-              type="button"
+              keys="S"
               onClick={handleStopIntent}
-              className="cursor-pointer rounded transition-colors hover:text-white/80"
               title="Stop screen recording (or press S)"
             >
-              <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
-                S
-              </kbd>{' '}
               stop
-            </button>
+            </KeyHint>
-            <button
+            <KeyHint
-              type="button"
+              keys="Q"
               onClick={handleCancelIntent}
-              className="cursor-pointer rounded transition-colors hover:text-white/80"
               title="Cancel screen recording (or press Q)"
             >
-              <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
-                Q
-              </kbd>{' '}
               cancel
-            </button>
+            </KeyHint>
           </div>
         </div>
       )}

js/desktop/src/features/compose/configure-stream-step.tsx

@@ -5,6 +5,7 @@ import { metaKey } from '@/lib/platform';
 import { useAuthStore } from '@/stores/auth-store';
 import { generateRandomName } from '@/lib/random-name';
 import { Input } from '@/components/ui/input';
+import { KeyHint } from '@/components/key-hint';
 import { Label } from '@/components/ui/label';
 import { Checkbox } from '@/components/ui/checkbox';
 import { ScrollArea } from '@/components/ui/scroll-area';
@@ -158,18 +159,16 @@ export function ConfigureStreamStep({
 
       {/* Keyboard hints */}
       <div className="absolute bottom-8 left-0 right-0 flex items-center justify-center gap-4 text-sm text-white/50">
-        <span>
+        <KeyHint keys="Esc" onClick={onCancel} title="Cancel (or press Esc)">
-          <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
-            Esc
-          </kbd>{' '}
           cancel
-        </span>
+        </KeyHint>
-        <span>
+        <KeyHint
-          <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
+          keys={`${metaKey}+Enter`}
-            {metaKey}+Enter
+          onClick={handleSubmit}
-          </kbd>{' '}
+          title={`Create stream (or press ${metaKey}+Enter)`}
+        >
           create
-        </span>
+        </KeyHint>
       </div>
     </div>
   );

js/desktop/src/features/compose/recording-overlay.tsx

@@ -8,6 +8,7 @@ import { AttachmentStrip } from '@/features/compose/attachment-strip';
 import type { PendingAttachment } from '@/features/compose/attachment-strip';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
+import { KeyHint } from '@/components/key-hint';
 import { useComposeIntentStore } from '@/stores/compose-intent-store';
 
 interface RecordingOverlayProps {
@@ -208,33 +209,22 @@ export function RecordingOverlay({
       {/* Bottom center: keyboard hints */}
       {isRecording && !isLoading && (
         <div className="absolute bottom-4 z-10 flex items-center gap-4 text-sm text-white/50">
-          <button
+          <KeyHint
-            type="button"
+            keys="`"
+            prefix="Release"
             onClick={() => requestIntent('stop')}
-            className="cursor-pointer rounded transition-colors hover:text-white/80"
             title="Finish recording (or release `)"
           >
-            Release{' '}
-            <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
-              `
-            </kbd>{' '}
             to review
-          </button>
+          </KeyHint>
-          <button
+          <KeyHint
-            type="button"
+            keys={['Esc', 'Q']}
+            separator="or"
             onClick={() => requestIntent('cancel')}
-            className="cursor-pointer rounded transition-colors hover:text-white/80"
             title="Discard recording (or press Esc / Q)"
           >
-            <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
-              Esc
-            </kbd>
-            {' or '}
-            <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
-              Q
-            </kbd>{' '}
             to cancel
-          </button>
+          </KeyHint>
         </div>
       )}
 
@@ -250,32 +240,21 @@ export function RecordingOverlay({
             </div>
           )}
           <div className="flex items-center gap-4 text-sm text-white/50">
-            <button
+            <KeyHint
-              type="button"
+              keys="Enter"
               onClick={() => requestIntent('send')}
-              className="cursor-pointer rounded transition-colors hover:text-white/80"
               title="Send (or press Enter)"
             >
-              <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
-                Enter
-              </kbd>{' '}
               next
-            </button>
+            </KeyHint>
-            <button
+            <KeyHint
-              type="button"
+              keys={['Esc', 'Q']}
+              separator="or"
               onClick={() => requestIntent('cancel')}
-              className="cursor-pointer rounded transition-colors hover:text-white/80"
               title="Discard (or press Esc / Q)"
             >
-              <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
-                Esc
-              </kbd>
-              {' or '}
-              <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
-                Q
-              </kbd>{' '}
               to cancel
-            </button>
+            </KeyHint>
             <span>
               <Button
                 variant="ghost"

js/desktop/src/features/compose/text-editor.tsx

@@ -6,6 +6,7 @@ import { useAllLinkMetadata } from '@/hooks/use-link-metadata';
 import { AttachmentStrip } from '@/features/compose/attachment-strip';
 import type { PendingAttachment } from '@/features/compose/attachment-strip';
 import { Button } from '@/components/ui/button';
+import { KeyHint } from '@/components/key-hint';
 import { MarkdownEditor } from '@/features/compose/markdown-editor';
 
 export interface TextEditorAttachmentProps {
@@ -111,25 +112,26 @@ export function TextEditor({
 
   const keyboardHints = (
     <div className="absolute bottom-4 flex items-center gap-4 text-sm text-white/50">
-      <span>
+      <KeyHint keys="Esc" onClick={onCancel} title="Cancel (or press Esc)">
-        <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
-          Esc
-        </kbd>{' '}
         cancel
-      </span>
+      </KeyHint>
-      <span>
+      <KeyHint
-        <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
+        keys={`${metaKey}+Enter`}
-          {metaKey}+Enter
+        onClick={() => {
-        </kbd>{' '}
+          if (textContent.trim()) onSubmit();
+        }}
+        title={`Submit (or press ${metaKey}+Enter)`}
+      >
         {submitHint}
-      </span>
+      </KeyHint>
       {immersive && (
-        <span>
+        <KeyHint
-          <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
+          keys={`${metaKey}+M`}
-            {metaKey}+M
+          onClick={() => setForceCardMode(true)}
-          </kbd>{' '}
+          title={`Switch to markdown editor (or press ${metaKey}+M)`}
+        >
           markdown
-        </span>
+        </KeyHint>
       )}
       {attachmentProps && (
         <span>

js/desktop/src/features/network-root.tsx

@@ -4,6 +4,7 @@ import { CircleDot, CircleCheckBig } from 'lucide-react';
 import { particlePath } from '@/lib/particle-path';
 import { ParticleListView } from '@/features/particles/particle-list-view';
 import { VideoAudioToggle } from '@/components/video-audio-toggle';
+import { KeyHint } from '@/components/key-hint';
 import { ComposeOverlay } from './compose/compose-overlay';
 import { useComposeIntentStore } from '@/stores/compose-intent-store';
 import { ComposeQuotaIndicator } from './compose/compose-quota-indicator';
@@ -103,44 +104,23 @@ function NetworkRootControls() {
   const requestIntent = useComposeIntentStore((s) => s.request);
   return (
     <div className="flex items-center gap-4 text-sm text-white/50">
-      <span>
+      <KeyHint keys={['↑↓', 'Enter']}>navigate</KeyHint>
-        <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
+      <KeyHint keys="1–9">jump</KeyHint>
-          ↑↓
-        </kbd>{' '}
-        <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
-          Enter
-        </kbd>{' '}
-        navigate
-      </span>
-      <span>
-        <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
-          1–9
-        </kbd>{' '}
-        jump
-      </span>
       <VideoAudioToggle />
-      <button
+      <KeyHint
-        type="button"
+        keys="Hold `"
         onClick={() => requestIntent('record')}
-        className="cursor-pointer rounded transition-colors hover:text-white/80"
         title="Start recording (or hold `)"
       >
-        <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
-          Hold `
-        </kbd>{' '}
         to start
-      </button>
+      </KeyHint>
-      <button
+      <KeyHint
-        type="button"
+        keys="T"
         onClick={() => requestIntent('text')}
-        className="cursor-pointer rounded transition-colors hover:text-white/80"
         title="Compose text (or press T)"
       >
-        <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
-          T
-        </kbd>{' '}
         text
-      </button>
+      </KeyHint>
     </div>
   );
 }

js/desktop/src/features/particles/rename-stream-overlay.tsx

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
+import { KeyHint } from '@/components/key-hint';
 import { updateParticleProperties } from '@/lib/firestore-particles';
 import { particlePath, toFirestoreDocPath } from '@/lib/particle-path';
 import type { Particle } from '@/api/types';
@@ -63,12 +64,14 @@ export function RenameStreamOverlay({
       <div className="absolute left-1/2 top-1/2 w-full max-w-sm -translate-x-1/2 -translate-y-1/2 rounded-2xl border border-white/10 bg-white/5 p-6 shadow-2xl backdrop-blur-xl">
         <div className="mb-4 flex items-center justify-between">
           <h2 className="text-sm font-semibold text-white/70">Rename stream</h2>
-          <span className="text-xs text-white/30">
+          <KeyHint
-            <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
+            keys="Esc"
-              Esc
+            onClick={onClose}
-            </kbd>{' '}
+            title="Close (or press Esc)"
+            className="text-xs text-white/30"
+          >
             to close
-          </span>
+          </KeyHint>
         </div>
 
         <Input

js/desktop/src/features/particles/stream-members-overlay.tsx

@@ -3,6 +3,7 @@ import { createPortal } from 'react-dom';
 import { X, UserPlus, Globe, Users, Lock } from 'lucide-react';
 import { Avatar, AvatarFallback } from '@/components/ui/avatar';
 import { ScrollArea } from '@/components/ui/scroll-area';
+import { KeyHint } from '@/components/key-hint';
 import {
   buildCustomVisibility,
   buildNetworkVisibility,
@@ -104,12 +105,14 @@ export function StreamMembersOverlay({
         {/* Header */}
         <div className="mb-4 flex items-center justify-between">
           <h2 className="text-sm font-semibold text-white/70">Members</h2>
-          <span className="text-xs text-white/30">
+          <KeyHint
-            <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
+            keys="Esc"
-              Esc
+            onClick={onClose}
-            </kbd>{' '}
+            title="Close (or press Esc)"
+            className="text-xs text-white/30"
+          >
             to close
-          </span>
+          </KeyHint>
         </div>
 
         {/* Visibility */}

js/desktop/src/features/particles/stream-view.tsx

@@ -29,6 +29,7 @@ import { TextParticleView } from '@/features/particles/text-particle-view';
 import { FallbackParticleView } from '@/features/particles/fallback-particle-view';
 import { DeletedParticleView } from '@/features/particles/deleted-particle-view';
 import { VideoAudioToggle } from '@/components/video-audio-toggle';
+import { KeyHint } from '@/components/key-hint';
 import { useMediaSettingsStore } from '@/stores/media-settings-store';
 import {
   KeybindingsOverlay,
@@ -259,12 +260,17 @@ function StreamViewInner({ path, streamParticle }: StreamViewProps) {
 
   const { fastPlayback } = usePlaybackKeys({ mediaRef });
 
+  const handleExitNavigate = useCallback(() => {
+    navigate(`/${networkId}`);
+  }, [navigate, networkId]);
+
   useStreamNavigationKeys({
     next,
     prev,
     currentIndex,
     childrenLength: children.length,
     mediaRef,
+    onExit: handleExitNavigate,
   });
 
   const handleOpenHuddle = useCallback(() => {
@@ -325,10 +331,6 @@ function StreamViewInner({ path, streamParticle }: StreamViewProps) {
   // Always show controls when compose is active or exit countdown is visible
   const controlsVisible = showControls || composeActive || status === 'ended';
 
-  const handleExitNavigate = useCallback(() => {
-    navigate(`/${networkId}`);
-  }, [navigate, networkId]);
-
   const exitRemainingMs = useExitCountdown(status, paused, handleExitNavigate);
 
   // Reset progress when the particle changes.
@@ -362,6 +364,8 @@ function StreamViewInner({ path, streamParticle }: StreamViewProps) {
         <StreamViewControls
           showEscape
           onOpenKeybindings={() => setShowKeybindings(true)}
+          onOpenHuddle={handleOpenHuddle}
+          onExit={handleExitNavigate}
         />
         <ComposeOverlay
           networkId={networkId}
@@ -505,6 +509,8 @@ function StreamViewInner({ path, streamParticle }: StreamViewProps) {
         onlineHumanIds={onlineHumanIds}
         exitRemainingMs={exitRemainingMs}
         onOpenKeybindings={() => setShowKeybindings(true)}
+        onOpenHuddle={handleOpenHuddle}
+        onExit={handleExitNavigate}
       />
 
       <KeybindingsOverlay
@@ -527,6 +533,8 @@ function BottomBar({
   onlineHumanIds,
   exitRemainingMs,
   onOpenKeybindings,
+  onOpenHuddle,
+  onExit,
 }: {
   visible: boolean;
   total: number;
@@ -540,6 +548,8 @@ function BottomBar({
   onlineHumanIds: Set<string>;
   exitRemainingMs: number | null;
   onOpenKeybindings: () => void;
+  onOpenHuddle: () => void;
+  onExit: () => void;
 }) {
   return (
     <div
@@ -580,6 +590,8 @@ function BottomBar({
           <StreamViewControls
             showEscape
             onOpenKeybindings={onOpenKeybindings}
+            onOpenHuddle={onOpenHuddle}
+            onExit={onExit}
           />
         </div>
       </div>
@@ -590,58 +602,54 @@ function BottomBar({
 function StreamViewControls({
   showEscape,
   onOpenKeybindings,
+  onOpenHuddle,
+  onExit,
 }: {
   showEscape?: boolean;
   onOpenKeybindings: () => void;
+  onOpenHuddle: () => void;
+  onExit: () => void;
 }) {
   const requestIntent = useComposeIntentStore((s) => s.request);
   return (
     <div className="flex items-center gap-4 text-sm text-white/50">
       {showEscape && (
-        <span>
+        <KeyHint
-          <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
+          keys="Esc"
-            Esc
+          onClick={onExit}
-          </kbd>{' '}
+          title="Back to network (or press Esc)"
+        >
           back
-        </span>
+        </KeyHint>
       )}
       <VideoAudioToggle />
-      <button
+      <KeyHint
-        type="button"
+        keys="Hold `"
         onClick={() => requestIntent('record')}
-        className="cursor-pointer rounded transition-colors hover:text-white/80"
         title="Reply with a recording (or hold `)"
       >
-        <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
-          Hold `
-        </kbd>{' '}
         to reply
-      </button>
+      </KeyHint>
-      <button
+      <KeyHint
-        type="button"
+        keys="T"
         onClick={() => requestIntent('text')}
-        className="cursor-pointer rounded transition-colors hover:text-white/80"
         title="Reply with text (or press T)"
       >
-        <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
-          T
-        </kbd>{' '}
         text
-      </button>
+      </KeyHint>
-      <span>
+      <KeyHint
-        <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
+        keys="H"
-          H
+        onClick={onOpenHuddle}
-        </kbd>{' '}
+        title="Start a huddle (or press H)"
-        huddle
-      </span>
-      <kbd
-        role="button"
-        onClick={onOpenKeybindings}
-        className="cursor-pointer rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs transition-colors hover:text-white/80"
-        title="Show all shortcuts"
       >
-        ?
+        huddle
-      </kbd>
+      </KeyHint>
+      <KeyHint
+        keys="?"
+        onClick={onOpenKeybindings}
+        title="Show all shortcuts"
+        aria-label="Show keyboard shortcuts"
+      />
     </div>
   );
 }

js/desktop/src/hooks/use-stream-navigation-keys.ts

@@ -1,5 +1,4 @@
 import { useEffect, type RefObject } from 'react';
-import { useNavigate } from 'react-router-dom';
 import type { MediaParticleHandle } from '@/features/particles/media-particle-view';
 import { isTypingTarget } from '@/lib/keyboard';
 
@@ -11,6 +10,7 @@ interface UseStreamNavigationKeysOptions {
   currentIndex: number;
   childrenLength: number;
   mediaRef: RefObject<MediaParticleHandle | null>;
+  onExit: () => void;
 }
 
 /**
@@ -23,9 +23,8 @@ export function useStreamNavigationKeys({
   currentIndex,
   childrenLength,
   mediaRef,
+  onExit,
 }: UseStreamNavigationKeysOptions) {
-  const navigate = useNavigate();
-
   useEffect(() => {
     const onKeyDown = (e: KeyboardEvent) => {
       if (isTypingTarget(e)) return;
@@ -53,12 +52,12 @@ export function useStreamNavigationKeys({
           break;
         case 'Escape':
           e.preventDefault();
-          navigate(-1);
+          onExit();
           break;
       }
     };
 
     window.addEventListener('keydown', onKeyDown);
     return () => window.removeEventListener('keydown', onKeyDown);
-  }, [next, prev, currentIndex, childrenLength, mediaRef, navigate]);
+  }, [next, prev, currentIndex, childrenLength, mediaRef, onExit]);
 }