@fungi.computer/parakeet 0.5.0 → 0.6.1

package/docs/api/headless.md

@@ -2064,6 +2064,27 @@ Fixed positions and command anchors follow loaded history, never event time.
 
 ---
 
+### sanitizeDisplayText()
+
+```ts
+function sanitizeDisplayText(value): string;
+```
+
+Display text keeps shaping characters, never terminal programs or bidi
+overrides.
+
+#### Parameters
+
+| Parameter | Type     |
+| --------- | -------- |
+| `value`   | `string` |
+
+#### Returns
+
+`string`
+
+---
+
 ### formatWhen()
 
 ```ts
@@ -2139,11 +2160,32 @@ readonly `Readonly`\<\{ `commandId`: `string`; `outcome`: `"failed"` \|
 
 ---
 
+### applySessionFrame()
+
+```ts
+function applySessionFrame(current, frame): SessionSnapshot;
+```
+
+Apply one already-decoded Shiitake frame to its authoritative projection.
+
+#### Parameters
+
+| Parameter | Type              |
+| --------- | ----------------- |
+| `current` | `SessionSnapshot` |
+| `frame`   | `SessionFrame`    |
+
+#### Returns
+
+`SessionSnapshot`
+
+---
+
 ### sessionQueryOptions()
 
 ```ts
 function sessionQueryOptions(session): OmitKeyof<UseQueryOptions<Readonly<{
-  observation: "connecting" | "live";
+  observation: "live" | "connecting";
   snapshot:   | Readonly<{
      sessionId: string;
      cursor: string | null;
@@ -2176,6 +2218,8 @@ function sessionQueryOptions(session): OmitKeyof<UseQueryOptions<Readonly<{
         revision: ...;
         text: ...;
         thinking: ...;
+        textOffset: ...;
+        thinkingOffset: ...;
         textTruncated: ...;
         thinkingTruncated: ...;
       }>
@@ -2203,7 +2247,7 @@ function sessionQueryOptions(session): OmitKeyof<UseQueryOptions<Readonly<{
    }>
      | undefined;
 }>, Error, Readonly<{
-  observation: "connecting" | "live";
+  observation: "live" | "connecting";
   snapshot:   | Readonly<{
      sessionId: string;
      cursor: string | null;
@@ -2236,6 +2280,8 @@ function sessionQueryOptions(session): OmitKeyof<UseQueryOptions<Readonly<{
         revision: ...;
         text: ...;
         thinking: ...;
+        textOffset: ...;
+        thinkingOffset: ...;
         textTruncated: ...;
         thinkingTruncated: ...;
       }>
@@ -2263,7 +2309,7 @@ function sessionQueryOptions(session): OmitKeyof<UseQueryOptions<Readonly<{
    }>
      | undefined;
 }>, readonly ["shiitake-session", string]>, "queryFn"> & object & QueryKeyWithDataTag<readonly ["shiitake-session", string], Readonly<{
-  observation: "connecting" | "live";
+  observation: "live" | "connecting";
   snapshot:   | Readonly<{
      sessionId: string;
      cursor: string | null;
@@ -2310,6 +2356,8 @@ function sessionQueryOptions(session): OmitKeyof<UseQueryOptions<Readonly<{
         revision: number;
         text: string;
         thinking: string;
+        textOffset: number;
+        thinkingOffset: number;
         textTruncated: boolean;
         thinkingTruncated: boolean;
       }>
@@ -2349,8 +2397,8 @@ One shared TanStack observation keyed by Shiitake's logical Session address.
 
 #### Returns
 
-`OmitKeyof`\<`UseQueryOptions`\<`Readonly`\<\{ `observation`: `"connecting"` \|
-`"live"`; `snapshot`: \| `Readonly`\<\{ `sessionId`: `string`; `cursor`:
+`OmitKeyof`\<`UseQueryOptions`\<`Readonly`\<\{ `observation`: `"live"` \|
+`"connecting"`; `snapshot`: \| `Readonly`\<\{ `sessionId`: `string`; `cursor`:
 `string` \| `null`; `hasMore`: `boolean`; `oldestCursor?`: `string` \| `null`;
 `messages`: readonly `Readonly`\<\{ `requestId?`: ...; `meta?`: ...; `data?`:
 ...; `origin?`: ...; `id`: ...; `sequence`: ...; `commandId`: ...; `value`: ...;
@@ -2360,35 +2408,36 @@ readonly `Readonly`\<...\>[]; `compactionNotices?`: readonly
 `Readonly`\<...\>[]; `sandboxFailures?`: readonly `object`[]; `pending`:
 `SessionPendingPrompts`; `activity`: `SessionActivity`; `progress`: \|
 `Readonly`\<\{ `messageId`: ...; `revision`: ...; `text`: ...; `thinking`: ...;
-`textTruncated`: ...; `thinkingTruncated`: ...; \}\> \| `null`; `toolOutput`:
-readonly `Readonly`\<\{ `toolCallId`: ...; `revision`: ...; `tail`: ...;
-`droppedBytes`: ...; `totalBytes`: ...; \}\>[]; `extensions`:
-`SessionExtensionSlots`; `attention`: readonly `object`[]; `context?`:
-`Readonly`\<\{ `tokens`: ...; `window`: ...; \}\>; \}\> \| `undefined`;
-`lastReplyAt`: `number` \| `undefined`; `latestPrompt`: \| `Readonly`\<\{
-`commandId`: `string`; `text`: `string`; `images`: readonly `object`[] \|
-`undefined`; \}\> \| `undefined`; \}\>, `Error`, `Readonly`\<\{ `observation`:
-`"connecting"` \| `"live"`; `snapshot`: \| `Readonly`\<\{ `sessionId`: `string`;
-`cursor`: `string` \| `null`; `hasMore`: `boolean`; `oldestCursor?`: `string` \|
-`null`; `messages`: readonly `Readonly`\<\{ `requestId?`: ...; `meta?`: ...;
-`data?`: ...; `origin?`: ...; `id`: ...; `sequence`: ...; `commandId`: ...;
-`value`: ...; \}\>[]; `terminals`: readonly `Readonly`\<\{ `commandId`: ...;
-`outcome`: ...; `sequence`: ...; `diagnostic`: ...; `meta?`: ...; \}\>[];
-`compactions?`: readonly `Readonly`\<...\>[]; `compactionNotices?`: readonly
-`Readonly`\<...\>[]; `sandboxFailures?`: readonly `object`[]; `pending`:
-`SessionPendingPrompts`; `activity`: `SessionActivity`; `progress`: \|
-`Readonly`\<\{ `messageId`: ...; `revision`: ...; `text`: ...; `thinking`: ...;
-`textTruncated`: ...; `thinkingTruncated`: ...; \}\> \| `null`; `toolOutput`:
-readonly `Readonly`\<\{ `toolCallId`: ...; `revision`: ...; `tail`: ...;
-`droppedBytes`: ...; `totalBytes`: ...; \}\>[]; `extensions`:
+`textOffset`: ...; `thinkingOffset`: ...; `textTruncated`: ...;
+`thinkingTruncated`: ...; \}\> \| `null`; `toolOutput`: readonly `Readonly`\<\{
+`toolCallId`: ...; `revision`: ...; `tail`: ...; `droppedBytes`: ...;
+`totalBytes`: ...; \}\>[]; `extensions`: `SessionExtensionSlots`; `attention`:
+readonly `object`[]; `context?`: `Readonly`\<\{ `tokens`: ...; `window`: ...;
+\}\>; \}\> \| `undefined`; `lastReplyAt`: `number` \| `undefined`;
+`latestPrompt`: \| `Readonly`\<\{ `commandId`: `string`; `text`: `string`;
+`images`: readonly `object`[] \| `undefined`; \}\> \| `undefined`; \}\>,
+`Error`, `Readonly`\<\{ `observation`: `"live"` \| `"connecting"`; `snapshot`:
+\| `Readonly`\<\{ `sessionId`: `string`; `cursor`: `string` \| `null`;
+`hasMore`: `boolean`; `oldestCursor?`: `string` \| `null`; `messages`: readonly
+`Readonly`\<\{ `requestId?`: ...; `meta?`: ...; `data?`: ...; `origin?`: ...;
+`id`: ...; `sequence`: ...; `commandId`: ...; `value`: ...; \}\>[]; `terminals`:
+readonly `Readonly`\<\{ `commandId`: ...; `outcome`: ...; `sequence`: ...;
+`diagnostic`: ...; `meta?`: ...; \}\>[]; `compactions?`: readonly
+`Readonly`\<...\>[]; `compactionNotices?`: readonly `Readonly`\<...\>[];
+`sandboxFailures?`: readonly `object`[]; `pending`: `SessionPendingPrompts`;
+`activity`: `SessionActivity`; `progress`: \| `Readonly`\<\{ `messageId`: ...;
+`revision`: ...; `text`: ...; `thinking`: ...; `textOffset`: ...;
+`thinkingOffset`: ...; `textTruncated`: ...; `thinkingTruncated`: ...; \}\> \|
+`null`; `toolOutput`: readonly `Readonly`\<\{ `toolCallId`: ...; `revision`:
+...; `tail`: ...; `droppedBytes`: ...; `totalBytes`: ...; \}\>[]; `extensions`:
 `SessionExtensionSlots`; `attention`: readonly `object`[]; `context?`:
 `Readonly`\<\{ `tokens`: ...; `window`: ...; \}\>; \}\> \| `undefined`;
 `lastReplyAt`: `number` \| `undefined`; `latestPrompt`: \| `Readonly`\<\{
 `commandId`: `string`; `text`: `string`; `images`: readonly `object`[] \|
 `undefined`; \}\> \| `undefined`; \}\>, readonly \[`"shiitake-session"`,
 `string`\]\>, `"queryFn"`\> & `object` & `QueryKeyWithDataTag`\<readonly
-\[`"shiitake-session"`, `string`\], `Readonly`\<\{ `observation`: `"connecting"`
-\| `"live"`; `snapshot`: \| `Readonly`\<\{ `sessionId`: `string`; `cursor`:
+\[`"shiitake-session"`, `string`\], `Readonly`\<\{ `observation`: `"live"` \|
+`"connecting"`; `snapshot`: \| `Readonly`\<\{ `sessionId`: `string`; `cursor`:
 `string` \| `null`; `hasMore`: `boolean`; `oldestCursor?`: `string` \| `null`;
 `messages`: readonly `Readonly`\<\{ `requestId?`: ... \| ...; `meta?`: ... \|
 ...; `data?`: ... \| ...; `origin?`: ... \| ...; `id`: `string`; `sequence`:
@@ -2402,12 +2451,13 @@ readonly `Readonly`\<\{ `commandId`: `string`; `outcome`: ... \| ... \| ... \|
 `sandboxFailures?`: readonly `object`[]; `pending`: `SessionPendingPrompts`;
 `activity`: `SessionActivity`; `progress`: \| `Readonly`\<\{ `messageId`:
 `string`; `revision`: `number`; `text`: `string`; `thinking`: `string`;
-`textTruncated`: `boolean`; `thinkingTruncated`: `boolean`; \}\> \| `null`;
-`toolOutput`: readonly `Readonly`\<\{ `toolCallId`: `string`; `revision`:
-`number`; `tail`: `string`; `droppedBytes`: `number`; `totalBytes`: `number`;
-\}\>[]; `extensions`: `SessionExtensionSlots`; `attention`: readonly `object`[];
-`context?`: `Readonly`\<\{ `tokens`: `number`; `window`: ... \| ...; \}\>; \}\>
-\| `undefined`; `lastReplyAt`: `number` \| `undefined`; `latestPrompt`: \|
+`textOffset`: `number`; `thinkingOffset`: `number`; `textTruncated`: `boolean`;
+`thinkingTruncated`: `boolean`; \}\> \| `null`; `toolOutput`: readonly
+`Readonly`\<\{ `toolCallId`: `string`; `revision`: `number`; `tail`: `string`;
+`droppedBytes`: `number`; `totalBytes`: `number`; \}\>[]; `extensions`:
+`SessionExtensionSlots`; `attention`: readonly `object`[]; `context?`:
+`Readonly`\<\{ `tokens`: `number`; `window`: ... \| ...; \}\>; \}\> \|
+`undefined`; `lastReplyAt`: `number` \| `undefined`; `latestPrompt`: \|
 `Readonly`\<\{ `commandId`: `string`; `text`: `string`; `images`: readonly
 `object`[] \| `undefined`; \}\> \| `undefined`; \}\>, `Error`\>
 
@@ -2485,23 +2535,35 @@ Decide a Session's view state from its activity, terminals and progress.
 
 ---
 
-### queuedSessionLabel()
+### sessionStateLabel()
 
 ```ts
-function queuedSessionLabel(state): string;
+function sessionStateLabel(
+  state,
+  waitingOnYou?,
+):
+  | "idle"
+  | "thinking"
+  | "failed"
+  | "cancelling"
+  | "streaming"
+  | "running a tool"
+  | "waiting on you";
 ```
 
-Explain a queued Session using its owner's executor fact.
+Activity only: queued messages belong in the transcript, never in this label.
 
 #### Parameters
 
-| Parameter | Type                                                                                        |
-| --------- | ------------------------------------------------------------------------------------------- |
-| `state`   | `Extract`\<[`ParakeetOwnerViewState`](#parakeetownerviewstate), \{ `kind`: `"queued"`; \}\> |
+| Parameter      | Type                                                | Default value |
+| -------------- | --------------------------------------------------- | ------------- |
+| `state`        | [`ParakeetOwnerViewState`](#parakeetownerviewstate) | `undefined`   |
+| `waitingOnYou` | `boolean`                                           | `false`       |
 
 #### Returns
 
-`string`
+\| `"idle"` \| `"thinking"` \| `"failed"` \| `"cancelling"` \| `"streaming"` \|
+`"running a tool"` \| `"waiting on you"`
 
 ---
 
@@ -2545,6 +2607,27 @@ Shared tool status meaning, used by the browser and native presentations.
 
 ---
 
+### toolLiveLines()
+
+```ts
+function toolLiveLines(call, open): readonly string[];
+```
+
+Live output stays visible when folded, independent of result disclosure.
+
+#### Parameters
+
+| Parameter | Type                                                    |
+| --------- | ------------------------------------------------------- |
+| `call`    | [`ParakeetToolCallView`](index.md#parakeettoolcallview) |
+| `open`    | `boolean`                                               |
+
+#### Returns
+
+readonly `string`[]
+
+---
+
 ### toolCallView()
 
 ```ts

package/docs/api/index.md

@@ -20,6 +20,64 @@ What the head is doing: at rest, working something out, or talking.
 
 ---
 
+### ComposerModelKeyProps
+
+```ts
+type ComposerModelKeyProps = Omit<
+  KeycapButtonProps,
+  "icon" | "readout" | "label"
+> &
+  object;
+```
+
+A model label on the shared native key; callers own selection and menus.
+
+#### Type Declaration
+
+| Name    | Type     | Description                                                              |
+| ------- | -------- | ------------------------------------------------------------------------ |
+| `label` | `string` | Friendly catalog name, or the real model identity when no name is known. |
+
+---
+
+### ComposerShellRow
+
+```ts
+type ComposerShellRow = Readonly<{
+  controls: ReactNode;
+  action: ReactNode;
+  status?: ReactNode;
+  readout?: ReactNode;
+  items: readonly StatusTrayItem[];
+  openId: string | null;
+  onOpenChange: (id) => void;
+}>;
+```
+
+App-owned controls and tray contents; Parakeet owns their single row.
+
+---
+
+### ComposerShellProps
+
+```ts
+type ComposerShellProps = HTMLAttributes<HTMLDivElement> & object;
+```
+
+Content slots for the shared chat and generation composer surface.
+
+#### Type Declaration
+
+| Name           | Type                                    | Description                                                       |
+| -------------- | --------------------------------------- | ----------------------------------------------------------------- |
+| `input`        | `ReactNode`                             | Draft field or decision surface, using the shared input geometry. |
+| `attachments?` | `ReactNode`                             | Optional draft attachments rendered by the Composer primitive.    |
+| `action?`      | `ReactNode`                             | Retained field-and-Send mode without an internal control row.     |
+| `menu?`        | `ReactNode`                             | Optional completion menu anchored to this shell.                  |
+| `row?`         | [`ComposerShellRow`](#composershellrow) | Omit while a decision owns the input and its own actions.         |
+
+---
+
 ### InteractionPanelProps
 
 ```ts
@@ -232,6 +290,7 @@ Durable owner identity, independent of the current service endpoint.
 type ParakeetDraftStorage = Readonly<{
   getItem: (key) => string | null;
   setItem: (key, value) => void;
+  removeItem: (key) => void;
 }>;
 ```
 
@@ -464,6 +523,7 @@ type ParakeetToolCallView = Readonly<{
   exitCode?: number;
   error?: string;
   sections: readonly ParakeetToolCallSection[];
+  live?: ParakeetToolItem["live"];
 }>;
 ```
 
@@ -781,6 +841,11 @@ type ParakeetToolItem = Readonly<{
   data?: SessionMessage["data"];
   startedAt?: number;
   status: "completed" | "error" | "running" | "unknown";
+  live?: Readonly<{
+    lines: readonly string[];
+    droppedBytes: number;
+    revision: number;
+  }>;
 }>;
 ```
 
@@ -932,6 +997,20 @@ ready. The live canvas stays mounted and is paused unless `thinking` or
 
 ---
 
+### ComposerModelKey
+
+```ts
+const ComposerModelKey: ForwardRefExoticComponent<
+  Omit<KeycapButtonProps, "label" | "icon" | "readout"> &
+    object &
+    RefAttributes<HTMLButtonElement>
+>;
+```
+
+The same model face and chevron in chat and generation composers.
+
+---
+
 ### ShiitakeAvatar
 
 ```ts
@@ -977,6 +1056,72 @@ Defaults only, with no reader choices.
 
 ## Functions
 
+### composerSendState()
+
+```ts
+function composerSendState(__namedParameters): SendActionState;
+```
+
+One input-to-action rule for both Apps; Caps owns the resulting key's look.
+
+#### Parameters
+
+| Parameter                           | Type                                                                                                                           | Description                                                             |
+| ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------- |
+| `__namedParameters`                 | \{ `draft`: `string`; `hasAttachments?`: `boolean`; `busy`: `boolean`; `queueWhileBusy?`: `boolean`; `blocked?`: `boolean`; \} | -                                                                       |
+| `__namedParameters.draft`           | `string`                                                                                                                       | -                                                                       |
+| `__namedParameters.hasAttachments?` | `boolean`                                                                                                                      | -                                                                       |
+| `__namedParameters.busy`            | `boolean`                                                                                                                      | -                                                                       |
+| `__namedParameters.queueWhileBusy?` | `boolean`                                                                                                                      | Chat can queue a follow-up; generation stays busy until it settles.     |
+| `__namedParameters.blocked?`        | `boolean`                                                                                                                      | An input owner can temporarily block submission, such as during recall. |
+
+#### Returns
+
+`SendActionState`
+
+---
+
+### ComposerShell()
+
+```ts
+function ComposerShell(__namedParameters): Element;
+```
+
+One field surface and one non-wrapping control row, with Send at its end.
+
+#### Parameters
+
+| Parameter           | Type                                        |
+| ------------------- | ------------------------------------------- |
+| `__namedParameters` | [`ComposerShellProps`](#composershellprops) |
+
+#### Returns
+
+`Element`
+
+---
+
+### useComposerTextareaSize()
+
+```ts
+function useComposerTextareaSize(ref, value): void;
+```
+
+Grow either App's field with its draft; shell CSS owns the height limits.
+
+#### Parameters
+
+| Parameter | Type                                 |
+| --------- | ------------------------------------ |
+| `ref`     | `RefObject`\<`HTMLTextAreaElement`\> |
+| `value`   | `string`                             |
+
+#### Returns
+
+`void`
+
+---
+
 ### InteractionPanel()
 
 ```ts
@@ -1183,6 +1328,11 @@ function visibleToolCalls(
   exitCode?: number;
   error?: string;
   sections: readonly ParakeetToolCallSection[];
+  live?: Readonly<{
+    lines: readonly string[];
+    droppedBytes: number;
+    revision: number;
+  }>;
 }>[];
 ```
 
@@ -1202,7 +1352,9 @@ readonly `Readonly`\<\{ `id`: `string`; `kind`:
 `activeVerb`: `string`; `label`: `string`; `paths`: readonly `string`[];
 `status`: `"error"` \| `"unknown"` \| `"running"` \| `"completed"`;
 `durationMs?`: `number`; `exitCode?`: `number`; `error?`: `string`; `sections`:
-readonly [`ParakeetToolCallSection`](#parakeettoolcallsection)[]; \}\>[]
+readonly [`ParakeetToolCallSection`](#parakeettoolcallsection)[]; `live?`:
+`Readonly`\<\{ `lines`: readonly `string`[]; `droppedBytes`: `number`;
+`revision`: `number`; \}\>; \}\>[]
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fungi.computer/parakeet",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "author": "Levi <levi@technomancy.dev>",
   "private": false,
   "description": "Standalone React composer for a typed Shiitake Session",
@@ -36,6 +36,7 @@
       "import": "./dist/components/CompletionMenu.js"
     },
     "./completion-menu.css": "./src/completion-menu.css",
+    "./composer-shell.css": "./src/composer-shell.css",
     "./styles.css": "./dist/styles.css",
     "./tailwind.css": "./src/styles.css"
   },
@@ -45,6 +46,7 @@
     "LICENSE",
     "src/styles.css",
     "src/completion-menu.css",
+    "src/composer-shell.css",
     "docs/api"
   ],
   "peerDependencies": {
@@ -53,16 +55,17 @@
     "react-dom": "^18.2.0 || ^19.2.0"
   },
   "dependencies": {
-    "@fungi.computer/agar": "0.5.0",
-    "@fungi.computer/bird-dog": "0.3.0",
+    "@earendil-works/pi-ai": "1.3.0",
+    "@fungi.computer/agar": "0.6.1",
+    "@fungi.computer/bird-dog": "0.3.1",
     "@fungi.computer/cairn": "0.1.0",
-    "@fungi.computer/caps": "0.4.0",
+    "@fungi.computer/caps": "0.6.0",
     "@fungi.computer/gills": "0.2.0",
-    "@fungi.computer/knapsack": "0.4.0",
-    "@fungi.computer/shiitake": "0.6.0",
-    "@fungi.computer/sigils": "0.2.0",
+    "@fungi.computer/knapsack": "0.4.2",
+    "@fungi.computer/shiitake": "0.8.0",
+    "@fungi.computer/sigils": "0.2.1",
     "@fungi.computer/sprite": "0.2.0",
-    "@fungi.computer/sprite-zdog": "0.2.0",
+    "@fungi.computer/sprite-zdog": "0.3.0",
     "@fungi.computer/whistle": "0.3.0",
     "@tanstack/markdown": "0.0.12",
     "@tanstack/react-virtual": "3.14.10",

package/src/completion-menu.css

@@ -5,7 +5,8 @@
  * same width and inset, flush on its top edge, and the surface's own top
  * border is the one line between them. --parakeet-completion-inset is the
  * distance from the menu's containing block to the surface's outer edge: an
- * anchor's padding (Grove) or minus a positioned card's border (Prints).
+ * anchor's padding or a field's own containing box. ComposerShell supplies
+ * zero inset; there is no Prints-specific negative card-border offset.
  * --parakeet-completion-face and --parakeet-completion-edge carry the
  * surface's own background and border colour, so the two read as one.
  */

package/src/composer-shell.css

@@ -0,0 +1,125 @@
+/* Chat and generation share one surface, field inset and control-row grid.
+   Apps supply controls and content, never a second composer layout. */
+.parakeet-composer-anchor {
+  --parakeet-completion-inset: 0px;
+  --parakeet-completion-face: var(--color-base-200);
+  --parakeet-completion-edge: var(--stipe-hairline);
+  display: block;
+  min-width: 0;
+}
+
+.parakeet-composer-anchor:has([data-parakeet-slash])
+  > .parakeet-composer-shell {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
+
+.parakeet-composer-shell {
+  padding: var(--spacing-sm);
+  container-type: inline-size;
+}
+
+.parakeet-composer-shell .caps-composer-input {
+  padding: var(--spacing-xs) var(--spacing-sm) 0;
+}
+
+.parakeet-composer-shell .caps-composer-input textarea {
+  min-height: 3rem;
+  max-height: 160px;
+  padding: var(--spacing-xs) 0;
+  resize: none;
+  overflow-x: hidden;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  line-height: 1.6;
+}
+
+.parakeet-composer-shell .parakeet-composer-row {
+  --caps-status-tray-row-wrap: nowrap;
+  padding: var(--spacing-xs);
+}
+
+.parakeet-composer-row .caps-status-tray-row {
+  white-space: nowrap;
+}
+
+/* A menu trigger can carry Button's touch minimum as well as its Keycap face.
+   The shared row, not either App or the generic Button, owns key geometry. */
+.parakeet-composer-row .caps-keycap-button {
+  height: var(--caps-status-tray-key-height);
+  min-height: var(--caps-status-tray-key-height);
+}
+
+/* Composer keys already disclose through their face and chevron. Keep native
+   expanded/pressed semantics without redundant decorative corner lamps. */
+.parakeet-composer-row .caps-keycap-led {
+  display: none;
+}
+
+.parakeet-composer-row [data-status-tray-chip] {
+  min-width: 0;
+}
+
+.parakeet-composer-row .caps-status-tray-label,
+.parakeet-composer-row .caps-keycap-button-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.parakeet-composer-row .parakeet-composer-model-key {
+  --caps-keycap-justify: space-between;
+  flex: 0 1 auto;
+  min-width: 4.5rem;
+  max-width: 220px;
+  font-size: var(--text-xs);
+}
+
+.parakeet-composer-trailing {
+  display: flex;
+  align-items: center;
+  flex: none;
+  gap: var(--spacing-xs);
+  margin-inline-start: auto;
+}
+
+.parakeet-composer-action {
+  display: flex;
+  flex: none;
+}
+
+.parakeet-composer-readout {
+  color: var(--stipe-fg-muted);
+  font-size: var(--text-xs);
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.parakeet-composer-row .composer-attention-label {
+  @apply sr-only;
+}
+
+.parakeet-composer-row .parakeet-composer-status {
+  gap: 0;
+}
+
+/* The status dot stays beside Send when usage yields to Settings; the model
+   label then yields to ellipsis.
+   Edge keys never shrink or change rows. The budget is the shell's width:
+   Grove's split pane can be narrower at 900px than at 640px. */
+@container (max-width: 34rem) {
+  .parakeet-composer-readout {
+    display: none;
+  }
+}
+
+@container (max-width: 26rem) {
+  .parakeet-composer-row .parakeet-composer-model-key {
+    max-width: 7rem;
+  }
+}