feat(desktop): floating pet, pop-out overlay + Cmd+K picker

Add the in-window floating pet (sprite, speech bubble, contact shadow,
profile-scoped, resize-safe) and a pop-out always-on-top overlay window
with gestures and notifications. Add the Cmd+K pet picker page plus the
appearance gallery and size slider in settings. Includes the pet stores,
electron overlay wiring, i18n strings, and store tests.

apps/desktop/src/components/pet/floating-pet.tsx

@@ -0,0 +1,313 @@
+import { useStore } from '@nanostores/react'
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+import { useGatewayRequest } from '@/app/gateway/hooks/use-gateway-request'
+import { persistString, storedString } from '@/lib/storage'
+import { $petInfo, clearPetUnread, type PetInfo, petProfile, setPetInfo } from '@/store/pet'
+import { resetPetGallery } from '@/store/pet-gallery'
+import { $petOverlayActive, initPetOverlayBridge, popOutPet, restorePetOverlay } from '@/store/pet-overlay'
+import { $activeGatewayProfile, normalizeProfileKey } from '@/store/profile'
+import { $gatewayState } from '@/store/session'
+import { isSecondaryWindow } from '@/store/windows'
+import { useTheme } from '@/themes/context'
+
+import { PetSprite } from './pet-sprite'
+
+// v2: positions are now top/left anchored (v1 stored bottom-anchored values,
+// which dragged inverted). Bumping the key discards stale v1 coordinates.
+const POSITION_KEY = 'hermes.desktop.pet-position.v2'
+
+interface Point {
+  x: number
+  y: number
+}
+
+function clampToViewport({ x, y }: Point): Point {
+  const maxX = Math.max(0, (window.innerWidth || 800) - 80)
+  const maxY = Math.max(0, (window.innerHeight || 600) - 80)
+
+  return { x: Math.min(Math.max(0, x), maxX), y: Math.min(Math.max(0, y), maxY) }
+}
+
+// The sprite art faces left by default, so mirror it when the pet's center sits
+// on the left half of the window — it always faces inward, toward the content.
+function facing(leftX: number, petW: number): string {
+  return leftX + petW / 2 < (window.innerWidth || 800) / 2 ? 'scaleX(-1)' : 'none'
+}
+
+function loadPosition(): Point {
+  try {
+    const raw = storedString(POSITION_KEY)
+
+    if (raw) {
+      const parsed = JSON.parse(raw) as Point
+
+      if (typeof parsed.x === 'number' && typeof parsed.y === 'number') {
+        return clampToViewport(parsed)
+      }
+    }
+  } catch {
+    // fall through to default
+  }
+
+  // Default: lower-left corner (top/left anchored).
+  return clampToViewport({ x: 24, y: (window.innerHeight || 600) - 220 })
+}
+
+/**
+ * In-window floating petdex mascot. Always-on-top within the app, draggable,
+ * and reactive to agent activity via `$petState`. Fetches the active pet via
+ * the shared `pet.info` RPC; renders nothing until a pet is installed +
+ * enabled.
+ *
+ * Adopting a pet is fully in-app: type `/pet boba` in the composer. That
+ * writes `display.pet.*` from the slash worker, so we keep polling `pet.info`
+ * while no pet is active and the mascot pops in within a few seconds — no
+ * reload, no CLI. Once a pet is live we stop polling.
+ *
+ * Promotion to a separate frameless OS-level window is a follow-up — the
+ * sprite + state logic here is reused as-is, only the host changes.
+ */
+const PET_POLL_MS = 3000
+
+export function FloatingPet() {
+  const { requestGateway } = useGatewayRequest()
+  const { resolvedMode } = useTheme()
+  const gatewayState = useStore($gatewayState)
+  const info = useStore($petInfo)
+  const overlayActive = useStore($petOverlayActive)
+
+  const [position, setPosition] = useState<Point>(loadPosition)
+  const containerRef = useRef<HTMLDivElement | null>(null)
+  // The facing mirror lives on the sprite wrapper, not the container, so the
+  // speech bubble (a container child) never renders flipped/backwards.
+  const spriteWrapRef = useRef<HTMLDivElement | null>(null)
+  const petW = (info.frameW ?? 192) * (info.scale ?? 0.33)
+  // Soft contact shadow, sized off the pet so every scale/species grounds the
+  // same way (cf. lairp's per-actor feet ellipse). Lighter on light backgrounds.
+  const shadowW = Math.round(petW * 0.55)
+  const shadowH = Math.max(3, Math.round(shadowW * 0.28))
+  const shadowAlpha = resolvedMode === 'light' ? 0.2 : 0.55
+  // Live drag offset (pointer → element top-left). Drag updates the DOM
+  // directly to avoid a React re-render (and canvas reflow) per pointermove —
+  // state is only committed on release.
+  const dragRef = useRef<{ dx: number; dy: number; x: number; y: number } | null>(null)
+
+  // Fetch pet.info on connect, then keep polling while no pet is active so an
+  // in-app `/pet <slug>` shows up live. Stops polling once a pet is enabled.
+  const active = info.enabled && Boolean(info.spritesheetBase64)
+  useEffect(() => {
+    if (gatewayState !== 'open' || active) {
+      return
+    }
+
+    let cancelled = false
+
+    const pull = async () => {
+      try {
+        const next = await requestGateway<PetInfo>('pet.info', { profile: petProfile() })
+
+        if (!cancelled && next) {
+          setPetInfo(next)
+        }
+      } catch {
+        // cosmetic feature — never surface gateway errors
+      }
+    }
+
+    void pull()
+    const timer = window.setInterval(() => void pull(), PET_POLL_MS)
+
+    return () => {
+      cancelled = true
+      window.clearInterval(timer)
+    }
+  }, [gatewayState, active, requestGateway])
+
+  // Pets are per-profile. When the active profile changes, drop the previous
+  // profile's mascot + gallery cache so the poll above refetches the new
+  // profile's pet (its config + pets dir resolve per-profile on the backend).
+  const profileRef = useRef(normalizeProfileKey($activeGatewayProfile.get()))
+  useEffect(
+    () =>
+      $activeGatewayProfile.subscribe(next => {
+        const key = normalizeProfileKey(next)
+
+        if (key === profileRef.current) {
+          return
+        }
+
+        profileRef.current = key
+        setPetInfo({ enabled: false })
+        resetPetGallery()
+      }),
+    []
+  )
+
+  // Wire the overlay control channel once, only in the primary window — the
+  // pop-out overlay belongs to it (main.cjs positions it against the main
+  // window and routes control messages back to it).
+  useEffect(() => {
+    if (isSecondaryWindow()) {
+      return
+    }
+
+    return initPetOverlayBridge()
+  }, [])
+
+  // Returning to the app (by any route, not just the mail icon) clears the pet's
+  // "new message" hint — you've seen it now.
+  useEffect(() => {
+    if (isSecondaryWindow()) {
+      return
+    }
+
+    const onFocus = () => clearPetUnread()
+    window.addEventListener('focus', onFocus)
+
+    return () => window.removeEventListener('focus', onFocus)
+  }, [])
+
+  // Restore a popped-out pet on boot, once the pet has loaded (so we never spawn
+  // an empty overlay window). Primary window only; runs at most once.
+  const restoredRef = useRef(false)
+  useEffect(() => {
+    if (isSecondaryWindow() || restoredRef.current || !active) {
+      return
+    }
+
+    restoredRef.current = true
+    restorePetOverlay()
+  }, [active])
+
+  // A window resize must never strand the pet off-screen — re-clamp the
+  // committed position (and persist it) whenever the viewport shrinks.
+  useEffect(() => {
+    const onResize = () =>
+      setPosition(prev => {
+        const next = clampToViewport(prev)
+
+        if (next.x === prev.x && next.y === prev.y) {
+          return prev
+        }
+
+        persistString(POSITION_KEY, JSON.stringify(next))
+
+        return next
+      })
+
+    window.addEventListener('resize', onResize)
+
+    return () => window.removeEventListener('resize', onResize)
+  }, [])
+
+  const onPointerDown = useCallback((e: React.PointerEvent) => {
+    const el = containerRef.current
+
+    if (!el) {
+      return
+    }
+
+    const rect = el.getBoundingClientRect()
+
+    // Shift-click pops the pet out into a free-floating desktop overlay (it can
+    // leave the window and stays visible while Hermes is minimized) instead of
+    // starting an in-window drag. Primary window only — the overlay is anchored
+    // to it.
+    if (e.shiftKey && !isSecondaryWindow()) {
+      popOutPet({ height: rect.height, width: rect.width, x: rect.left, y: rect.top })
+
+      return
+    }
+
+    dragRef.current = { dx: e.clientX - rect.left, dy: e.clientY - rect.top, x: rect.left, y: rect.top }
+    el.setPointerCapture(e.pointerId)
+    el.style.cursor = 'grabbing'
+  }, [])
+
+  const onPointerMove = useCallback(
+    (e: React.PointerEvent) => {
+      const drag = dragRef.current
+      const el = containerRef.current
+
+      if (!drag || !el) {
+        return
+      }
+
+      const next = clampToViewport({ x: e.clientX - drag.dx, y: e.clientY - drag.dy })
+      drag.x = next.x
+      drag.y = next.y
+      // Mutate the DOM directly — no setState, so no re-render while dragging. The
+      // mirror follows the pointer across the midline for the same reason; it
+      // rides the sprite wrapper so the bubble stays upright.
+      el.style.left = `${next.x}px`
+      el.style.top = `${next.y}px`
+
+      if (spriteWrapRef.current) {
+        spriteWrapRef.current.style.transform = facing(next.x, petW)
+      }
+    },
+    [petW]
+  )
+
+  const onPointerUp = useCallback((e: React.PointerEvent) => {
+    const drag = dragRef.current
+
+    if (drag) {
+      dragRef.current = null
+      const committed = { x: drag.x, y: drag.y }
+      setPosition(committed)
+      persistString(POSITION_KEY, JSON.stringify(committed))
+    }
+
+    const el = containerRef.current
+
+    if (el) {
+      el.style.cursor = 'grab'
+      el.releasePointerCapture?.(e.pointerId)
+    }
+  }, [])
+
+  // While popped out, the desktop overlay window owns the mascot — hide the
+  // in-window one so there aren't two.
+  if (!info.enabled || !info.spritesheetBase64 || overlayActive) {
+    return null
+  }
+
+  return (
+    <div
+      onPointerDown={onPointerDown}
+      onPointerMove={onPointerMove}
+      onPointerUp={onPointerUp}
+      ref={containerRef}
+      style={{
+        cursor: 'grab',
+        left: position.x,
+        pointerEvents: 'auto',
+        position: 'fixed',
+        top: position.y,
+        touchAction: 'none',
+        userSelect: 'none',
+        zIndex: 60
+      }}
+    >
+      <div
+        aria-hidden
+        style={{
+          background: `radial-gradient(ellipse at center, rgba(0,0,0,${shadowAlpha}) 0%, rgba(0,0,0,0) 70%)`,
+          bottom: -shadowH * 0.4,
+          height: shadowH,
+          left: '50%',
+          pointerEvents: 'none',
+          position: 'absolute',
+          transform: 'translateX(-50%)',
+          width: shadowW,
+          zIndex: 0
+        }}
+      />
+      <div ref={spriteWrapRef} style={{ lineHeight: 0, position: 'relative', transform: facing(position.x, petW), zIndex: 1 }}>
+        <PetSprite info={info} />
+      </div>
+    </div>
+  )
+}

apps/desktop/src/components/pet/pet-bubble.tsx

@@ -0,0 +1,142 @@
+import { useStore } from '@nanostores/react'
+import { useEffect, useState } from 'react'
+
+import { AlertCircle, Clock, type IconComponent } from '@/lib/icons'
+import { $petActivity, $petState, type PetState } from '@/store/pet'
+
+/**
+ * Speech bubble + status glyph for the popped-out pet overlay — the
+ * "notification" half of the mascot. It externalizes what the agent is doing
+ * (Codex-style) so a glance at the desktop pet replaces switching back to the
+ * window. The in-window pet doesn't show it (the app itself is the surface);
+ * only the overlay renders it.
+ *
+ * Text is derived purely from the same `$petState` / `$petActivity` the sprite
+ * already reacts to, so it never drifts from the animation. The bubble is shown
+ * only when there's something worth saying (working / reviewing / a transient
+ * done/error beat / waiting on the user) and is hidden at plain idle.
+ */
+
+type Tone = 'error' | 'wait'
+
+interface Spec {
+  lines: string[]
+  glyph?: IconComponent
+  tone?: Tone
+}
+
+// Phrasings per mood, picked at random (no immediate repeat) for a bit of life.
+// Keep them short — the bubble is tiny and never wraps.
+const SPECS: Partial<Record<PetState, Spec>> = {
+  run: {
+    lines: ['working…', 'on it…', 'crunching…', 'tinkering…', 'cooking…', 'in the weeds…', 'wiring it up…', 'making moves…', 'heads down…', 'hammering away…']
+  },
+  review: {
+    lines: ['thinking…', 'reading…', 'reviewing…', 'pondering…', 'connecting dots…', 'sizing it up…', 'tracing it…', 'mulling…', 'scheming…', 'hmm…']
+  },
+  failed: {
+    glyph: AlertCircle,
+    lines: ['hit a snag', 'welp', 'that broke', 'oof', 'snagged'],
+    tone: 'error'
+  },
+  waiting: {
+    glyph: Clock,
+    lines: ['your turn', 'all yours', 'over to you', 'ball’s in your court', 'awaiting orders'],
+    tone: 'wait'
+  }
+}
+
+const TONE_COLOR: Record<Tone, string> = {
+  error: 'var(--ui-red)',
+  wait: 'var(--ui-yellow)'
+}
+
+// Random pick that avoids repeating the line we're already showing.
+function pick(lines: string[], prev: string): string {
+  if (lines.length <= 1) {
+    return lines[0] ?? ''
+  }
+
+  let next = prev
+
+  while (next === prev) {
+    next = lines[Math.floor(Math.random() * lines.length)]
+  }
+
+  return next
+}
+
+export function PetBubble() {
+  const state = useStore($petState)
+  const activity = useStore($petActivity)
+  const [line, setLine] = useState('')
+
+  // Finish beats are carried by the sprite/mail icon; idle only speaks up when
+  // it's actually the user's turn. Everything else maps to a mood spec.
+  const specKey: null | PetState =
+    state in SPECS ? state : state === 'idle' && activity.awaitingInput ? 'waiting' : null
+  const rotating = specKey === 'run' || specKey === 'review'
+
+  // Pick a fresh line on every mood change, then keep rotating (random, no
+  // repeat) only while the agent is actively working/thinking.
+  useEffect(() => {
+    const spec = specKey ? SPECS[specKey] : null
+
+    if (!spec) {
+      setLine('')
+
+      return
+    }
+
+    setLine(prev => pick(spec.lines, prev))
+
+    if (!rotating || spec.lines.length <= 1) {
+      return
+    }
+
+    const id = window.setInterval(() => setLine(prev => pick(spec.lines, prev)), 2600)
+
+    return () => window.clearInterval(id)
+  }, [specKey, rotating])
+
+  const spec = specKey ? SPECS[specKey] : null
+
+  if (!spec) {
+    return null
+  }
+
+  const Glyph = spec.glyph
+  const text = line || spec.lines[0]
+  const hasText = Boolean(text)
+
+  return (
+    <div
+      style={{
+        alignItems: 'center',
+        // Solid, theme-driven surface (the prior --ui-bg-card mixes in
+        // `transparent`, so the bubble was see-through).
+        background: 'var(--ui-bg-elevated)',
+        border: '1px solid var(--ui-stroke-secondary)',
+        borderRadius: hasText ? 10 : 999,
+        boxShadow: '0 4px 14px rgba(0,0,0,0.22)',
+        color: 'var(--foreground)',
+        display: 'inline-flex',
+        fontSize: 11,
+        fontWeight: 500,
+        gap: hasText ? 5 : 0,
+        lineHeight: 1,
+        // Glyph-only bubbles collapse to a tight, symmetric badge.
+        padding: hasText ? '5px 8px' : 5,
+        pointerEvents: 'none',
+        whiteSpace: 'nowrap'
+      }}
+    >
+      {Glyph && (
+        <span style={{ display: 'inline-flex' }}>
+          <Glyph style={{ color: spec.tone ? TONE_COLOR[spec.tone] : 'currentColor', height: 13, width: 13 }} />
+        </span>
+      )}
+      {text}
+    </div>
+  )
+}

apps/desktop/src/components/pet/pet-sprite.tsx

@@ -0,0 +1,178 @@
+import { memo, useEffect, useMemo, useRef } from 'react'
+
+import { $petState, type PetInfo, type PetState } from '@/store/pet'
+
+const DEFAULT_FRAME_W = 192
+const DEFAULT_FRAME_H = 208
+const DEFAULT_FRAMES = 6
+const DEFAULT_LOOP_MS = 1100
+// Mirrors agent.pet.constants.DEFAULT_SCALE — fallback only; the gateway sends
+// the configured scale.
+const DEFAULT_SCALE = 0.33
+// Mirrors agent.pet.constants.CODEX_STATE_ROWS (Petdex current taxonomy).
+const DEFAULT_STATE_ROWS = [
+  'idle',
+  'running-right',
+  'running-left',
+  'waving',
+  'jumping',
+  'failed',
+  'waiting',
+  'running',
+  'review'
+]
+
+const STATE_ALIASES: Record<PetState, string[]> = {
+  idle: ['idle'],
+  wave: ['wave', 'waving'],
+  jump: ['jump', 'jumping'],
+  run: ['run', 'running'],
+  failed: ['failed'],
+  review: ['review'],
+  waiting: ['waiting']
+}
+
+interface PetSpriteProps {
+  info: PetInfo
+  /** On-screen scale multiplier applied on top of the pet's native scale. */
+  zoom?: number
+}
+
+/**
+ * Canvas renderer for a petdex spritesheet — the one piece that must be
+ * TypeScript (the engine's decode/encode is Python). Draws the row matching the
+ * live `$petState`, stepping `framesPerState` frames across a `loopMs` loop.
+ *
+ * State is read from `$petState` via a ref + subscription rather than a prop,
+ * so the frequent activity-driven state changes during an agent turn update the
+ * canvas (inside its RAF loop) WITHOUT triggering a React re-render. Combined
+ * with `memo`, this component effectively never re-renders after mount until
+ * the pet itself changes.
+ */
+function PetSpriteImpl({ info, zoom = 1 }: PetSpriteProps) {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null)
+  const stateRef = useRef<PetState>($petState.get())
+
+  const frameW = info.frameW ?? DEFAULT_FRAME_W
+  const frameH = info.frameH ?? DEFAULT_FRAME_H
+  const frames = info.framesPerState ?? DEFAULT_FRAMES
+  const framesByState = info.framesByState
+  const loopMs = info.loopMs ?? DEFAULT_LOOP_MS
+  const scale = (info.scale ?? DEFAULT_SCALE) * zoom
+  const rows = info.stateRows ?? DEFAULT_STATE_ROWS
+
+  const drawW = Math.round(frameW * scale)
+  const drawH = Math.round(frameH * scale)
+
+  const image = useMemo(() => {
+    if (!info.spritesheetBase64) {
+      return null
+    }
+
+    const img = new Image()
+    img.src = `data:${info.mime ?? 'image/webp'};base64,${info.spritesheetBase64}`
+
+    return img
+  }, [info.spritesheetBase64, info.mime])
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+
+    if (!canvas || !image) {
+      return
+    }
+
+    const ctx = canvas.getContext('2d')
+
+    if (!ctx) {
+      return
+    }
+
+    // Track state via subscription, not a prop — no re-render on activity ticks.
+    stateRef.current = $petState.get()
+
+    const unsubState = $petState.listen(next => {
+      stateRef.current = next
+    })
+
+    let raf = 0
+    let frame = 0
+    let lastStep = performance.now()
+    let drawnFrame = -1
+    let drawnRow = -1
+
+    const rowIndexForState = (s: PetState): number => {
+      for (const key of STATE_ALIASES[s] ?? [s]) {
+        const idx = rows.indexOf(key)
+        if (idx >= 0) {
+          return idx
+        }
+      }
+      return 0
+    }
+
+    // Resolve a state to the row it draws and its real frame count. A state
+    // with no real frames (ragged sheet, empty row) falls back to idle rather
+    // than flashing blank padding.
+    const resolve = (s: PetState): { row: number; count: number } => {
+      const real = framesByState?.[s] ?? frames
+      if (real > 0) {
+        return { row: rowIndexForState(s), count: real }
+      }
+
+      return { row: rowIndexForState('idle'), count: Math.max(1, framesByState?.idle ?? frames) }
+    }
+
+    const render = (now: number) => {
+      const { row, count } = resolve(stateRef.current)
+      // Per-state step keeps every state's loop ~loopMs even when frame counts
+      // differ; counts vary per row so derive the cadence here, not once.
+      const stepMs = loopMs / count
+
+      if (now - lastStep >= stepMs) {
+        frame += 1
+        lastStep = now
+      }
+
+      frame %= count
+
+      // Only touch the canvas when the visible cell actually changes. The RAF
+      // ticks at ~60Hz but the sprite only steps ~5Hz, so this skips ~90% of
+      // the clear+draw work and keeps the main thread free.
+      if ((frame !== drawnFrame || row !== drawnRow) && image.complete && image.naturalWidth > 0) {
+        const sx = frame * frameW
+        const sy = row * frameH
+        ctx.clearRect(0, 0, canvas.width, canvas.height)
+        ctx.imageSmoothingEnabled = false
+        ctx.drawImage(image, sx, sy, frameW, frameH, 0, 0, drawW, drawH)
+        drawnFrame = frame
+        drawnRow = row
+      }
+
+      raf = requestAnimationFrame(render)
+    }
+
+    raf = requestAnimationFrame(render)
+
+    return () => {
+      cancelAnimationFrame(raf)
+      unsubState()
+    }
+  }, [image, frameW, frameH, frames, framesByState, loopMs, drawW, drawH, rows])
+
+  return (
+    <canvas
+      aria-label={info.displayName ? `${info.displayName} pet` : 'pet'}
+      height={drawH}
+      ref={canvasRef}
+      style={{ height: drawH, width: drawW }}
+      width={drawW}
+    />
+  )
+}
+
+/**
+ * Memoized so a parent re-render (e.g. a position commit on drag-end) doesn't
+ * re-run the canvas setup. Props change only when the pet itself changes.
+ */
+export const PetSprite = memo(PetSpriteImpl)

apps/desktop/src/components/pet/pet-thumb.tsx

@@ -0,0 +1,79 @@
+import { useEffect, useRef, useState } from 'react'
+
+import { PawPrint } from '@/lib/icons'
+
+// petdex frames are a fixed 192×208 grid; the box matches that aspect.
+const THUMB_W = 40
+const THUMB_H = Math.round((THUMB_W * 208) / 192)
+
+export type PetThumbLoader = (slug: string, url?: string) => Promise<string | null>
+
+/**
+ * Idle-frame preview for one pet. The backend crops + caches the frame and
+ * returns it as a same-origin data URI (`pet.thumb`), which dodges the renderer
+ * CSP / R2 hotlink rules that break a direct `<img src=cdn>`.
+ */
+export function PetThumb({
+  slug,
+  url,
+  alt,
+  load,
+  size = THUMB_W
+}: {
+  slug: string
+  url?: string
+  alt: string
+  load: PetThumbLoader
+  /** Width in px; height follows the petdex frame aspect. */
+  size?: number
+}) {
+  const [src, setSrc] = useState<string | null>(null)
+  const boxRef = useRef<HTMLSpanElement | null>(null)
+  const height = Math.round((size * 208) / 192)
+
+  useEffect(() => {
+    const el = boxRef.current
+
+    if (!el || src) {
+      return
+    }
+
+    const observer = new IntersectionObserver(
+      entries => {
+        if (entries.some(entry => entry.isIntersecting)) {
+          observer.disconnect()
+          void load(slug, url).then(uri => {
+            if (uri) {
+              setSrc(uri)
+            }
+          })
+        }
+      },
+      { rootMargin: '120px' }
+    )
+
+    observer.observe(el)
+
+    return () => observer.disconnect()
+  }, [slug, url, src, load])
+
+  return (
+    <span
+      className="grid shrink-0 place-items-center overflow-hidden rounded-md bg-(--ui-bg-tertiary) text-(--ui-text-tertiary)"
+      ref={boxRef}
+      style={{ height, width: size }}
+    >
+      {src ? (
+        <img
+          alt={alt}
+          aria-hidden
+          className="pointer-events-none size-full object-contain"
+          src={src}
+          style={{ imageRendering: 'pixelated' }}
+        />
+      ) : (
+        <PawPrint className="size-4" />
+      )}
+    </span>
+  )
+}

apps/desktop/src/components/ui/command.tsx

@@ -17,7 +17,12 @@ function Command({ className, ...props }: React.ComponentProps<typeof CommandPri
   )
 }
 
-function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) {
+interface CommandInputProps extends React.ComponentProps<typeof CommandPrimitive.Input> {
+  /** Inline trailing slot, rendered on the right of the search row. */
+  right?: React.ReactNode
+}
+
+function CommandInput({ className, right, ...props }: CommandInputProps) {
   return (
     <div className="flex h-11 items-center gap-2 border-b border-border px-3" data-slot="command-input-wrapper">
       <SearchIcon className="size-4 shrink-0 text-muted-foreground" />
@@ -29,6 +34,7 @@ function CommandInput({ className, ...props }: React.ComponentProps<typeof Comma
         data-slot="command-input"
         {...props}
       />
+      {right}
     </div>
   )
 }