feat(desktop): pop the composer out into a draggable floating window

apps/desktop/src/app/chat/composer/completion-drawer.tsx

@@ -2,21 +2,20 @@ import type { Unstable_TriggerAdapter } from '@assistant-ui/core'
 import { ComposerPrimitive } from '@assistant-ui/react'
 import type { ReactNode } from 'react'
 
-import { composerFusedDockCard } from '@/components/chat/composer-dock'
+import { composerPanelCard } from '@/components/chat/composer-dock'
 import { cn } from '@/lib/utils'
 
-// Same docked chrome as the queue/status stack, but its own thing: a narrow,
-// left-aligned card (not full width) that fuses to the composer's edge instead
-// of floating above it. `left-1` matches the stack's `mx-1` inset; the negative
-// margin overlaps the seam so the composer's (now-transparent) edge border reads
-// as shared. Fused (opaque) fill — the composer surface swaps to the same fill
-// while a drawer is open, so the two paint as one panel.
-const DRAWER_SHELL =
-  'absolute left-1 z-50 w-80 max-w-[calc(100%-0.5rem)] max-h-[min(22rem,calc(100vh-8rem))] overflow-y-auto overscroll-contain p-1 text-xs text-popover-foreground'
+// A standalone glassy panel floating just off the composer edge, inset from the
+// left. Skin is the shared composerPanelCard (also used by the attach menu).
+const DRAWER_SHELL = cn(
+  'absolute left-2 z-50 w-80 max-w-[calc(100%-1rem)] max-h-[min(22rem,calc(100vh-8rem))]',
+  'overflow-y-auto overscroll-contain p-1 text-popover-foreground',
+  composerPanelCard
+)
 
-export const COMPLETION_DRAWER_CLASS = cn(DRAWER_SHELL, 'bottom-full -mb-[9px]', composerFusedDockCard('top'))
+export const COMPLETION_DRAWER_CLASS = cn(DRAWER_SHELL, 'bottom-full mb-1')
 
-export const COMPLETION_DRAWER_BELOW_CLASS = cn(DRAWER_SHELL, 'top-full -mt-[9px]', composerFusedDockCard('bottom'))
+export const COMPLETION_DRAWER_BELOW_CLASS = cn(DRAWER_SHELL, 'top-full mt-1')
 
 export function ComposerCompletionDrawer({
   adapter,

apps/desktop/src/app/chat/composer/context-menu.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react'
 
+import { composerPanelCard } from '@/components/chat/composer-dock'
 import { Button } from '@/components/ui/button'
 import { Codicon } from '@/components/ui/codicon'
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
@@ -54,11 +55,11 @@ export function ContextMenu({
             type="button"
             variant="ghost"
           >
-            <Codicon name="add" size="1rem" />
+            <Codicon name="add" size="0.875rem" />
           </Button>
         </DropdownMenuTrigger>
-        <DropdownMenuContent align="start" className="w-60" side="top" sideOffset={10}>
-          <DropdownMenuLabel className="text-[0.7rem] font-medium uppercase tracking-wide text-muted-foreground/85">
+        <DropdownMenuContent align="start" className={cn('w-60', composerPanelCard)} side="top" sideOffset={6}>
+          <DropdownMenuLabel className="px-2 pb-0.5 pt-0.5 text-[0.625rem] font-semibold uppercase tracking-wider text-(--ui-text-tertiary)">
             {c.attachLabel}
           </DropdownMenuLabel>
           <ContextMenuItem disabled={!onPickFiles} icon={FileText} onSelect={onPickFiles}>
@@ -142,7 +143,12 @@ function PromptSnippetsDialog({ onInsertText, onOpenChange, open }: PromptSnippe
 
 export function ContextMenuItem({ children, disabled, icon: Icon, onSelect }: ContextMenuItemProps) {
   return (
-    <DropdownMenuItem disabled={disabled} onSelect={onSelect}>
+    // Override font size + highlight to match the / · @ completion rows exactly.
+    <DropdownMenuItem
+      className="text-[length:var(--conversation-tool-font-size)] focus:bg-(--ui-bg-tertiary)"
+      disabled={disabled}
+      onSelect={onSelect}
+    >
       <Icon />
       <span>{children}</span>
     </DropdownMenuItem>

apps/desktop/src/app/chat/composer/controls.tsx

@@ -43,6 +43,7 @@ export function ComposerControls({
   busyAction,
   canSteer,
   canSubmit,
+  compactModelPill = false,
   conversation,
   disabled,
   hasComposerPayload,
@@ -55,6 +56,7 @@ export function ComposerControls({
   busyAction: 'queue' | 'stop'
   canSteer: boolean
   canSubmit: boolean
+  compactModelPill?: boolean
   conversation: ConversationProps
   disabled: boolean
   hasComposerPayload: boolean
@@ -83,7 +85,7 @@ export function ComposerControls({
 
   return (
     <div className="ml-auto flex shrink-0 items-center gap-(--composer-control-gap)">
-      <ModelPill disabled={disabled} model={state.model} />
+      <ModelPill compact={compactModelPill} disabled={disabled} model={state.model} />
       {/* While the agent runs and the user is typing, steer takes over the mic's
           slot rather than crowding the row with an extra button. */}
       {canSteer ? (
@@ -97,7 +99,7 @@ export function ComposerControls({
             type="button"
             variant="ghost"
           >
-            <SteeringWheel size={16} />
+            <SteeringWheel size={14} />
           </Button>
         </Tip>
       ) : (
@@ -116,7 +118,7 @@ export function ComposerControls({
             size="icon"
             type="button"
           >
-            <AudioLines size={17} />
+            <AudioLines size={15} />
           </Button>
         </Tip>
       ) : (
@@ -129,12 +131,12 @@ export function ComposerControls({
           >
             {busy ? (
               busyAction === 'queue' ? (
-                <Layers3 size={16} />
+                <Layers3 size={14} />
               ) : (
-                <span className="block size-3 rounded-[0.1875rem] bg-current" />
+                <span className="block size-2.5 rounded-[0.1875rem] bg-current" />
               )
             ) : (
-              <Codicon name="arrow-up" size="1rem" />
+              <Codicon name="arrow-up" size="0.875rem" />
             )}
           </Button>
         </Tip>
@@ -293,11 +295,11 @@ function DictationButton({
         variant="ghost"
       >
         {status === 'recording' ? (
-          <Square className="fill-current" size={12} />
+          <Square className="fill-current" size={11} />
         ) : status === 'transcribing' ? (
-          <Loader2 className="animate-spin" size={16} />
+          <Loader2 className="animate-spin" size={14} />
         ) : (
-          <Codicon name="mic" size="1rem" />
+          <Codicon name="mic" size="0.875rem" />
         )}
       </Button>
     </Tip>