Refine composer layout and unify neutral workspace controls

Design.md

@@ -76,7 +76,7 @@ over the workspace below the window strip; dock width calculations reserve the i
 Workspace pane headers share a 40px height. Right-panel tabs and the close control live in the global 32px window strip, aligned to the panel width, leaving no inner dock header. Both use a 28px control height with 2px vertical clearance. Toolbar labels collapse to named icons below 48rem so task titles remain readable; the selected tool tab retains its text at narrow widths. Native window controls retain their existing placement. Settings and Scene Studio retain their existing dedicated page layouts.
 
 New installations start in compact mode; saved document-mode preferences remain unchanged. The
-checkout context sits above the compact input. An empty compact workspace centers its greeting in the space above the bottom composer. The same
+checkout context sits below the compact input as an inset footer. Model, reasoning, and permission choices remain directly visible in the input toolbar; attachment and send actions align to the right. An empty compact workspace centers its greeting in the space above the bottom composer. The same
 composer/editor tree serves compact and document modes so layout changes preserve the draft. Short
 windows scroll without clipping the input; conversations retain their transcript scroll behavior.
 
@@ -86,7 +86,7 @@ list with descriptions available on hover or focus. Keep normal text contrast, p
 states and visible keyboard focus; muted styling does not mean dimming usable controls. Preserve
 the established shell regions and reserve decorative color for meaningful state. New-task panes omit a duplicate local title. Plugin actions above the composer or transcript are flat named Ghost controls with descriptions on hover or keyboard focus, rather than nested cards.
 
-The compact composer and document-mode control bar use a constant raised surface. The right tool panel floats within an 8px gutter using the shared raised Card, retaining resize and collapse behavior. Gutters are included in its reserved width and disappear when closed. The main workspace uses the same 16px rounded, clipped boundary and 8px outer inset. Adjacent workspace and dock surfaces share one 8px gap instead of summing their margins. Checkout context has an 8px inset within the input width; related plugin/context rows use 8px vertical spacing. The main workspace, right tool panel and composer share the same constant raised shadow token: 0 2px 8px, 4% opacity in light mode and 12% in dark mode. Sidebars retain flat elevation.
+The compact composer and document-mode control bar keep a white canvas surface in the default light theme and the raised surface in dark mode. A constant 0.5px neutral edge and a soft 8px/24px shadow distinguish the input from the page. This composer-specific edge is an explicit exception to the borderless surface rule, requested on 2026-09-28; it is painted without changing the editor or control geometry. Neutral model, reasoning, permission, composer action and checkout controls use the same muted foreground as the workspace toolbar; permission warnings, voice recording and filled submit controls retain their semantic colors. Composer chevrons do not add opacity, and prompt placeholders use upright text. The right tool panel floats within an 8px gutter using the shared raised Card, retaining resize and collapse behavior. Gutters are included in its reserved width and disappear when closed. The main workspace uses the same 16px rounded, clipped boundary and 8px outer inset. Adjacent workspace and dock surfaces share one 8px gap instead of summing their margins. Checkout context has a 16px inset within the input width; related plugin/context rows use 8px vertical spacing. The main workspace and right tool panel share the same constant raised shadow token: 0 2px 8px, 4% opacity in light mode and 12% in dark mode. Sidebars retain flat elevation.
 
 ## Application rules
 

apps/desktop/src/App.tsx

@@ -8354,7 +8354,7 @@ export default function App() {
 
                           <div className="electrobun-webkit-app-region-drag flex-1" />
 
-                          <div className="session-header-toolbar [&_svg]:text-muted-foreground gap-inline flex min-w-0 shrink-0 items-center">
+                          <div className="session-header-toolbar gap-inline flex min-w-0 shrink-0 items-center">
                             {/* Full-page mode hides the transcript, so the header carries the only sign that a turn
                   is in flight — and the way back to the answer without leaving the mode for good. */}
                             {docMode && hasConversationContent && (

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

@@ -97,6 +97,7 @@ import { MoonIcon as PhosphorMoonIcon } from "@phosphor-icons/react/dist/csr/Moo
 import { NotePencilIcon } from "@phosphor-icons/react/dist/csr/NotePencil";
 import { PackageIcon as PhosphorPackageIcon } from "@phosphor-icons/react/dist/csr/Package";
 import { PaletteIcon as PhosphorPaletteIcon } from "@phosphor-icons/react/dist/csr/Palette";
+import { PaperclipIcon } from "@phosphor-icons/react/dist/csr/Paperclip";
 import { PaperPlaneTiltIcon } from "@phosphor-icons/react/dist/csr/PaperPlaneTilt";
 import { PathIcon } from "@phosphor-icons/react/dist/csr/Path";
 import { PauseIcon as PhosphorPauseIcon } from "@phosphor-icons/react/dist/csr/Pause";
@@ -319,6 +320,7 @@ export const Pencil = createIcon(PencilSimpleIcon, "Pencil");
 export const Pin = createIcon(PushPinIcon, "Pin");
 export const PinOff = createIcon(PushPinSlashIcon, "PinOff");
 export const Play = createIcon(PhosphorPlayIcon, "Play");
+export const Paperclip = createIcon(PaperclipIcon, "Paperclip");
 export const Plus = createIcon(PhosphorPlusIcon, "Plus");
 export const Power = createIcon(PhosphorPowerIcon, "Power");
 export const Puzzle = createIcon(PuzzlePieceIcon, "Puzzle");

apps/desktop/src/design/tokens.css

@@ -305,6 +305,10 @@
   --ds-focus-offset: var(--ds-foundation-space-2);
   --ds-elevation-surface: none;
   --ds-elevation-raised: 0 2px 8px rgb(16 24 40 / 4%);
+  --ds-composer-elevation:
+    0 0 0 0.5px
+      color-mix(in oklch, var(--ds-color-text) 12%, var(--ds-color-canvas)),
+    0 8px 24px rgb(16 24 40 / 10%), 0 2px 6px rgb(16 24 40 / 4%);
   --ds-elevation-modal: 0 12px 36px rgb(16 24 40 / 12%);
 
   /* Shared material for menu-like transient layers. It remains mostly opaque so text contrast is
@@ -399,6 +403,10 @@
   --ds-color-chart-6: var(--ds-foundation-light-chart-6);
   --ds-elevation-surface: none;
   --ds-elevation-raised: 0 2px 8px rgb(16 24 40 / 4%);
+  --ds-composer-elevation:
+    0 0 0 0.5px
+      color-mix(in oklch, var(--ds-color-text) 12%, var(--ds-color-canvas)),
+    0 8px 24px rgb(16 24 40 / 10%), 0 2px 6px rgb(16 24 40 / 4%);
   --ds-elevation-modal: 0 12px 36px rgb(16 24 40 / 12%);
   --ds-material-raised-background: color-mix(
     in oklch,
@@ -468,6 +476,10 @@
   --ds-color-chart-6: var(--ds-foundation-dark-chart-6);
   --ds-elevation-surface: none;
   --ds-elevation-raised: 0 2px 8px rgb(0 0 0 / 12%);
+  --ds-composer-elevation:
+    0 0 0 0.5px
+      color-mix(in oklch, var(--ds-color-text) 16%, var(--ds-color-canvas)),
+    0 8px 24px rgb(0 0 0 / 28%), 0 2px 6px rgb(0 0 0 / 12%);
   --ds-elevation-modal: 0 16px 40px rgb(0 0 0 / 28%);
   --ds-material-raised-background: color-mix(
     in oklch,