@lotics/ui 4.6.1 → 4.8.0

package/AGENTS.md

@@ -56,7 +56,9 @@ Pick by capability, not by name. (→ the source file for the API.)
   with `Pagination`). Never an HTML `<table>` or a `.map` of rows.
 - **Numbers & charts** — `KPIStrip` / `KPICard` / `Metric` (headline figures), `TrendChip`
   (delta), `Sparkline`, `BarChart` / `LineChart` / `PieChart` (the canonical SVG set — no
-  recharts), `RingGauge`, `ProgressBar` / `StackedProgressBar` / `StepProgress`, `Breakdown`,
+  recharts), `RingGauge`, `ProgressBar` / `StackedProgressBar` / `StepProgress`, `Breakdown`
+  (a stacked bar + ranked share rows, pressable to drill; `maxRows` folds the long tail behind a
+  "Show N more" toggle — `labels` to localize — so several facet cards align to one height in a row),
   `StatusGrid` + `StatusLegend`, `Heatmap`.
 - **Surfaces & layout** — `Card` (+ `CardHeader`/`CardHeaderTitle`/`CardHeaderMeta`/`CardBody`/
   `CardFooter`), `SectionCard`, `SectionHeading` (+ `SectionHeadingTitle`), `PageHeader` /
@@ -75,7 +77,8 @@ Pick by capability, not by name. (→ the source file for the API.)
 - **Specialized work surfaces** — `ScanField` (scan/verify), `StepList` (guided run),
   `RemainderMeter` + `AllocationRow` (allocation), `Timeline`, `Calendar`, `Gantt`,
   `comments_thread`.
-- **AI surfaces** — `PromptField` (the NL command that triggers agent work — NOT a chat),
+- **AI surfaces** — `Composer` (the adaptive command/chat composer — a compact pill when empty that
+  expands for long text + attachments; the surface that triggers agent work),
   `AgentRun` (the live streaming work feed) + `AgentProgress` (its compact, floating, expandable
   form — a composer's "working" state), `Suggestion` (review-for-approval of a proposal)
   + `Confidence`, `RecordReview` (an extracted record reviewed + edited before save — fields
@@ -222,15 +225,18 @@ accepts / edits / dismisses, the deterministic app applies. The agent owns judgm
 (recognition, estimation, intent→parameters); the app owns geometry, math, and the write.
 Compose the surfaces as a loop, and reach for the right one by job:
 
-- **Command** — `PromptField`, a single-row pill for a TEXT-ONLY trigger (Enter sends; the field
-  locks + the send spins while it runs). The imperative "do this" surface. Its `onAttach` is a bare
-  trigger with NO review step, so it CANNOT do attach→review→submit — **never auto-run an agent on
-  attach.** When a run needs a FILE + a prompt together (attach a photo, review/remove it, add a
-  note, THEN send), reach for **`Composer`** instead: fill `actionsButton` with the attach button,
-  the `files` slot with `FileThumbnail`s (each `onRemove`-able), and set `sendDisabled` so Send fires
-  with an attachment and/or text (`onSend(text)` — the host already holds the uploaded file id). The
-  canvas (`tpl_dieline`) uses `Composer` for exactly this; `Composer` morphs into `AgentProgress`
-  while running just like the pill.
+- **Command / compose** — `Composer`, the adaptive command surface. Empty + minimal (no `footerRight`
+  model picker, no `pills`, no `files`), it's a COMPACT PILL: an optional `actionsButton` (attach) left,
+  the input, a send arrow right (Enter sends, Shift+Enter for a newline) — the same geometry
+  `AgentProgress` morphs into. Type past one line, or add files, and it EXPANDS: the input lifts onto
+  its own row, the `files` slot (`FileThumbnail`s, each `onRemove`-able) and `pills` stack above, and
+  the buttons drop to a footer row (the expansion latches until the text is cleared). For a run that
+  needs a FILE + a prompt together (attach a photo, review/remove it, add a note, THEN send), fill
+  `actionsButton` + the `files` slot and set `sendDisabled` so Send fires with an attachment and/or
+  text (`onSend(text)` — the host holds the uploaded file id). **Never auto-run an agent on attach** —
+  attaching HOLDS the file for review; the human presses Send. The canvas (`tpl_dieline`) uses it this
+  way; while running the host swaps `Composer` for `AgentProgress` (same pill geometry, so it reads as
+  a morph).
 - **Show the work** — `AgentRun`: a live feed of the agent's steps (reasoning, tool calls) on a
   spine, the running node a pulsing ink dot (a done step settles to a hollow ring). Transparent
   work, NEVER a bare spinner — the
@@ -316,9 +322,9 @@ controls — while **status/severity/diffs use functional colour** the way the r
   emerald.
 
 Card chrome (borders, microlabels) stays neutral — colour marks the *state*, never the container.
-The **composer keeps its icons**: `PromptField` is a single-row pill with circular attach + send
-`Button`s; `Composer` (the file+prompt variant) shows an attach `actionsButton` + a `FileThumbnail`
-attachment row (each `onRemove`-able) + send; `AgentProgress` is the `WaveAvatar` pill. "No icons"
+The **composer keeps its icons**: `Composer` compact is a single-row pill with an optional circular
+attach `actionsButton` + a circular send `Button`; expanded it adds a `FileThumbnail` attachment row
+(each `onRemove`-able) above the input; `AgentProgress` is the `WaveAvatar` pill. "No icons"
 was only ever about the review surfaces' sparkles/severity glyphs, not functional affordances.
 
 ---
@@ -516,8 +522,8 @@ scan_field · file_dropzone · file_thumbnail · file_thumbnail_grid · file_pre
 file_gallery_modal · image_gallery · avatar · skeleton · activity_indicator · loading · divider ·
 spacer · stack · section_card · page_header · page_content · calendar (calendar/index.ts) · gantt ·
 comments_thread · agent_run (live streaming work feed) · agent_progress (its compact floating
-expandable form — a composer's working state) · prompt_field (the NL command surface + optional
-`onAttach`, not a chat) · suggestion (review-for-approval) · confidence (calibrated high/med/low) ·
+expandable form — a composer's working state) · composer (Composer — the adaptive command/chat
+composer: a compact pill that expands for long text + attachments) · suggestion (review-for-approval) · confidence (calibrated high/med/low) ·
 record_review (RecordReview — an extracted record reviewed + edited before save) · change_review (before→after — whole-set OR 1-by-1) ·
 clarify (the agent asks back, via ChoiceList) · choice_list (ChoiceList — selectable answer options,
 the agent's quick-reply surface) · sources (provenance chips, per-kind glyphs) · spec_list (SpecList — the exact

package/examples/tpl_assistant.tsx

@@ -3,7 +3,7 @@ import { ScrollView, View } from "react-native";
 import { colors } from "@lotics/ui/colors";
 import { Text } from "@lotics/ui/text";
 import { DotsIndicator } from "@lotics/ui/dots_indicator";
-import { PromptField } from "@lotics/ui/prompt_field";
+import { Composer } from "@lotics/ui/composer";
 import { ChangeReview, type ChangeReviewItem, type ChangeReviewItemStatus } from "@lotics/ui/change_review";
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -127,11 +127,11 @@ export function TplAssistant() {
 
       <View style={{ position: "absolute", left: 0, right: 0, bottom: 20, alignItems: "center", paddingHorizontal: 16 }}>
         <View style={{ width: "100%", maxWidth: 720 }}>
-          <PromptField
+          <Composer
             value={prompt}
             onChangeText={setPrompt}
-            onSubmit={send}
-            busy={busy}
+            onSend={send}
+            disabled={busy}
             placeholder={proposed ? "Ask for another change…" : "Try: “Tidy up this contact”"}
           />
         </View>

package/examples/tpl_lookup.tsx

@@ -5,7 +5,7 @@ import { colors } from "@lotics/ui/colors";
 import { Divider } from "@lotics/ui/divider";
 import { Callout, CalloutText, CalloutTitle } from "@lotics/ui/callout";
 import { PressableHighlight } from "@lotics/ui/pressable_highlight";
-import { PromptField } from "@lotics/ui/prompt_field";
+import { Composer } from "@lotics/ui/composer";
 import { AgentRun, type AgentRunStep } from "@lotics/ui/agent_run";
 import { SpecList, type SpecRow } from "@lotics/ui/spec_list";
 import { Confidence, type ConfidenceLevel } from "@lotics/ui/confidence";
@@ -220,11 +220,11 @@ export function TplLookup() {
         </ScrollView>
 
         <View style={{ padding: 12, borderTopWidth: 1, borderTopColor: colors.zinc[200] }}>
-          <PromptField
+          <Composer
             value={prompt}
             onChangeText={setPrompt}
-            onSubmit={ask}
-            busy={phase === "running"}
+            onSend={ask}
+            disabled={phase === "running"}
             placeholder="Describe goods, or refine — “what if it's pre-cooked?”"
           />
         </View>

package/examples/tpl_stock.tsx

@@ -56,6 +56,11 @@ const DEPOTS = [
   { key: "northgate", label: "Northgate" },
   { key: "riverside", label: "Riverside" },
   { key: "southbay", label: "Southbay" },
+  { key: "westpoint", label: "Westpoint" },
+  { key: "harborview", label: "Harborview" },
+  { key: "lakeside", label: "Lakeside" },
+  { key: "midvale", label: "Midvale" },
+  { key: "fairlawn", label: "Fairlawn" },
 ] as const;
 const DEPOT_RAMP = ramp("violet", DEPOTS.length);
 
@@ -101,7 +106,7 @@ const TYPE_BASE_VALUE: Record<TypeKey, number> = {
 const UNITS: Unit[] = Array.from({ length: 10_482 }, (_, i) => {
   const type = pick<TypeKey>(i, 1, [["dry40", 34], ["dry20", 26], ["hc40", 18], ["reefer", 12], ["opentop", 7], ["tank", 3]]);
   const status = pick<StatusKey>(i, 2, [["leased", 52], ["yard", 18], ["transit", 14], ["repair", 9], ["idle", 7]]);
-  const depot = pick<DepotKey>(i, 3, [["eastport", 38], ["northgate", 27], ["riverside", 21], ["southbay", 14]]);
+  const depot = pick<DepotKey>(i, 3, [["eastport", 26], ["northgate", 19], ["riverside", 15], ["southbay", 11], ["westpoint", 9], ["harborview", 7], ["lakeside", 5], ["midvale", 4], ["fairlawn", 4]]);
   const ageYears = 1 + (hash(i, 4) % 12);
   const day = 1 + (hash(i, 5) % 28);
   const month = status === "idle" ? 1 + (hash(i, 6) % 4) : 4 + (hash(i, 6) % 3);
@@ -241,10 +246,13 @@ export function TplStock() {
               </CardHeaderTitle>
             </CardHeader>
             <View style={{ paddingHorizontal: 20, paddingVertical: 16 }}>
+              {/* maxRows caps the long tail behind a "Show N more" toggle, so a
+                  many-depot facet stays the same height as its neighbours. */}
               <Breakdown
                 items={DEPOTS.map((d, i) => ({ key: d.key, label: d.label, value: byDepot.get(d.key) ?? 0, color: DEPOT_RAMP[i] }))}
                 selectedKey={depot}
                 onSelect={setFacet(setDepot)}
+                maxRows={5}
               />
             </View>
           </Card>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "4.6.1",
+  "version": "4.8.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",
@@ -60,7 +60,6 @@
     "./activity_indicator": "./src/activity_indicator.tsx",
     "./agent_run": "./src/agent_run.tsx",
     "./agent_progress": "./src/agent_progress.tsx",
-    "./prompt_field": "./src/prompt_field.tsx",
     "./confidence": "./src/confidence.tsx",
     "./suggestion": "./src/suggestion.tsx",
     "./change_review": "./src/change_review.tsx",

package/src/agent_progress.tsx

@@ -19,8 +19,8 @@ export interface AgentProgressProps {
  * The compact, FLOATING agent-progress indicator — a pill (an animated
  * `WaveAvatar` + the current step's label) that EXPANDS on press to the full
  * `AgentRun` stream. It's the "working" state of a composer on a canvas app: the
- * composer (`PromptField`) MORPHS into this while the agent runs, and reveals
- * again when it's done. The whole pill is pressable; collapsed it shows only the
+ * composer (`Composer`'s compact pill) MORPHS into this while the agent runs, and
+ * reveals again when it's done. The whole pill is pressable; collapsed it shows only the
  * label, so the surface stays calm until you ask to see the steps.
  */
 export function AgentProgress(props: AgentProgressProps) {
@@ -56,9 +56,9 @@ export function AgentProgress(props: AgentProgressProps) {
 }
 
 const styles = StyleSheet.create({
-  // Same pill geometry as PromptField (minHeight 52, radius 999, 1.5 border,
-  // ph 6/left-padded for the avatar) so the composer→progress swap reads as a
-  // morph, not a replacement.
+  // Same pill geometry as the Composer's compact pill (minHeight 52, radius 999,
+  // 1.5 border, ph 6/left-padded for the avatar) so the composer→progress swap
+  // reads as a morph, not a replacement.
   pill: {
     flexDirection: "row",
     alignItems: "center",

package/src/agent_run.tsx

@@ -39,7 +39,7 @@ export interface AgentRunProps {
  * transparent-work surface, NOT a spinner. Shares the `Timeline` node anatomy: a
  * tinted disc behind a full-colour icon, fading in as each step arrives. A
  * running step spins (blue); a finished step settles to an emerald check; a
- * failure to a red alert. Pair with `PromptField` (the command that starts a
+ * failure to a red alert. Pair with `Composer` (the command that starts a
  * run) and `Suggestion` (the result to review). Unlike `StepList` (a known,
  * guided run of fixed steps) the steps here arrive unknown-ahead.
  */

package/src/breakdown.tsx

@@ -1,5 +1,7 @@
+import { useState } from "react";
 import { StyleSheet, View } from "react-native";
 import { colors, withAlpha } from "./colors";
+import { Icon } from "./icon";
 import { PressableHighlight } from "./pressable_highlight";
 import { StackedProgressBar } from "./stacked_progress_bar";
 import { Text } from "./text";
@@ -12,6 +14,15 @@ export interface BreakdownItem {
   color: string;
 }
 
+/** Expand/collapse labels for a capped breakdown (`maxRows`). Localized
+ *  downstream — the kit ships English defaults. */
+export interface BreakdownLabels {
+  /** The expand affordance, given how many rows are currently hidden. */
+  more: (hidden: number) => string;
+  /** The collapse affordance. */
+  less: string;
+}
+
 export interface BreakdownProps {
   items: BreakdownItem[];
   /** The drilled-in segment. While set, the other segments dim. */
@@ -20,9 +31,17 @@ export interface BreakdownProps {
    * render an informational breakdown. */
   onSelect?: (key: string | null) => void;
   formatValue?: (n: number) => string;
+  /** Cap the visible rows; the rest fold behind a "show more" toggle. Keeps a
+   *  long-tail breakdown a fixed height (so several align in a row) while staying
+   *  fully drillable on expand. The stacked bar always reflects ALL items. Omit
+   *  to show every row. */
+  maxRows?: number;
+  /** Expand/collapse labels (defaults to English). */
+  labels?: BreakdownLabels;
 }
 
 const defaultFormat = (n: number): string => n.toLocaleString("en-US");
+const DEFAULT_LABELS: BreakdownLabels = { more: (hidden) => `Show ${hidden} more`, less: "Show less" };
 
 /**
  * Composition browser for LARGE populations — the answer to "what is my
@@ -34,8 +53,15 @@ const defaultFormat = (n: number): string => n.toLocaleString("en-US");
  * full faceted overview; selections combine in the host's filter state.
  */
 export function Breakdown(props: BreakdownProps) {
-  const { items, selectedKey = null, onSelect, formatValue = defaultFormat } = props;
+  const { items, selectedKey = null, onSelect, formatValue = defaultFormat, maxRows, labels = DEFAULT_LABELS } = props;
   const total = items.reduce((sum, item) => sum + item.value, 0);
+  const [expanded, setExpanded] = useState(false);
+  // Cap the rows when `maxRows` is set and the tail is longer; the bar still
+  // reflects every item, only the ranked list folds.
+  const cap = maxRows ?? items.length;
+  const collapsible = items.length > cap;
+  const hidden = items.length - cap;
+  const visible = collapsible && !expanded ? items.slice(0, cap) : items;
 
   return (
     <View style={styles.container}>
@@ -49,7 +75,7 @@ export function Breakdown(props: BreakdownProps) {
         }))}
       />
       <View>
-        {items.map((item) => {
+        {visible.map((item) => {
           const share = total > 0 ? Math.round((item.value / total) * 100) : 0;
           const selected = selectedKey === item.key;
           const dimmed = selectedKey !== null && !selected;
@@ -84,6 +110,20 @@ export function Breakdown(props: BreakdownProps) {
             </View>
           );
         })}
+        {collapsible ? (
+          <PressableHighlight
+            accessibilityRole="button"
+            accessibilityState={{ expanded }}
+            accessibilityLabel={expanded ? labels.less : labels.more(hidden)}
+            onPress={() => setExpanded((e) => !e)}
+            style={[styles.row, styles.pressable, styles.toggle]}
+          >
+            <Text size="sm" weight="medium" color="muted">
+              {expanded ? labels.less : labels.more(hidden)}
+            </Text>
+            <Icon name={expanded ? "chevron-up" : "chevron-down"} size={16} color={colors.zinc[400]} />
+          </PressableHighlight>
+        ) : null}
       </View>
     </View>
   );
@@ -96,7 +136,7 @@ const styles = StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 10,
+    gap: 8,
     minHeight: 36,
   },
   pressable: {
@@ -116,6 +156,10 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   share: {
-    width: 36,
+    width: 30,
+  },
+  toggle: {
+    gap: 4,
+    minHeight: 32,
   },
 });

package/src/composer.tsx

@@ -1,4 +1,4 @@
-import React, { type ReactNode, type Ref, useCallback, useState } from "react";
+import React, { type ReactNode, type Ref, useCallback, useEffect, useState } from "react";
 import { View, TextInput as RNTextInput, ScrollView, StyleSheet, type TextInputProps } from "react-native";
 import { Button } from "./button";
 import { colors } from "./colors";
@@ -13,6 +13,15 @@ import { useAutoGrowHeight } from "./use_auto_grow_height";
  * them with skill/knowledge pills + an upload grid; a custom-code app fills
  * `files` with its own attachment region, or leaves it empty).
  *
+ * Adapts to its content. A *minimal* composer — no `footerRight` / `pills` /
+ * `files` / `children` — starts as a COMPACT PILL (a single row: an optional
+ * `actionsButton`, the input, the send button) so an empty command surface
+ * reads as a small pill, the same geometry `AgentProgress` morphs into. The
+ * moment the text wraps past one line (or files/pills/footer chrome appear) it
+ * EXPANDS: the input lifts onto its own row, slots stack above it, and the
+ * buttons drop to a footer row. The expansion latches until the text is cleared
+ * (the input is wider when expanded, so re-collapsing mid-edit would oscillate).
+ *
  * Pure by the package contract: no i18n, no domain types, no upload machinery.
  * Compose those above it.
  */
@@ -32,17 +41,19 @@ export interface ComposerProps {
    *  built-in Enter-to-send and can `preventDefault()` to suppress it. */
   textInputProps?: Partial<TextInputProps> & { ref?: Ref<RNTextInput> };
 
-  // Slots, rendered top-to-bottom above the input:
+  // Slots, rendered top-to-bottom above the input (force the expanded layout):
   /** A row of context pills (skills, mentions, …). */
   pills?: ReactNode;
   /** An attachment region (an upload grid, a thumbnail row, …). */
   files?: ReactNode;
   /** Arbitrary content between the slots and the input. */
   children?: ReactNode;
-  /** Footer left — typically an attach / actions button. */
+  /** An attach / actions button — inline-left in the compact pill, footer-left when expanded. */
   actionsButton?: ReactNode;
-  /** Footer right, before the send button — e.g. a model picker. */
+  /** Footer right, before the send button — e.g. a model picker. Forces the expanded layout. */
   footerRight?: ReactNode;
+  /** Max lines the expanded input grows to before it scrolls. */
+  maxLines?: number;
 
   /** Accessible/tooltip label for the send button. */
   sendLabel?: string;
@@ -65,6 +76,7 @@ export function Composer(props: ComposerProps) {
     children,
     actionsButton,
     footerRight,
+    maxLines = 10,
     sendLabel = "Send",
     stopLabel = "Stop",
   } = props;
@@ -75,9 +87,29 @@ export function Composer(props: ComposerProps) {
   const setText = isControlled ? (props.onChangeText ?? setInternalText) : setInternalText;
 
   const [focused, setFocused] = useState(false);
-  const { containerHeight, scrollEnabled, inputRef, measure, onContentSizeChange } = useAutoGrowHeight({ maxLines: 12 });
+  const { containerHeight, lineHeight, scrollEnabled, inputRef, measure, onContentSizeChange } = useAutoGrowHeight({
+    maxLines,
+  });
   const emptyText = text.trim().length === 0;
 
+  // The compact pill only exists for a minimal composer (no footer chrome / no
+  // stacked slots). Once it wraps past one line we EXPAND and stay there until
+  // the text is cleared — re-collapsing mid-edit would oscillate, because the
+  // input is narrower in the pill (flanked by buttons) than when it's full-width.
+  // The latch keys on RAW length, not trimmed: blank lines (Shift+Enter) are real
+  // content that should keep the composer expanded; only a truly empty field
+  // collapses back to the pill. (Send still gates on `emptyText` — no whitespace-
+  // only sends.)
+  const minimal = footerRight == null && pills == null && files == null && children == null;
+  const [grew, setGrew] = useState(false);
+  const isEmpty = text.length === 0;
+  const wrapped = containerHeight > lineHeight + 4;
+  useEffect(() => {
+    if (isEmpty) setGrew(false);
+    else if (wrapped) setGrew(true);
+  }, [isEmpty, wrapped]);
+  const expanded = !minimal || grew;
+
   const { ref: externalRef, ...spreadInputProps } = textInputProps ?? {};
   const mergedInputRef = useCallback(
     (node: RNTextInput | null) => {
@@ -122,86 +154,128 @@ export function Composer(props: ComposerProps) {
     [handleSend, spreadInputProps],
   );
 
-  const hasContentAboveInput = pills != null || files != null || children != null;
+  const sendButton =
+    disabled && onStop ? (
+      <Button onPress={onStop} color="primary" icon="square" tooltip={stopLabel} accessibilityLabel={stopLabel} />
+    ) : (
+      <Button
+        onPress={handleSend}
+        color="primary"
+        disabled={disabled || effectiveSendDisabled}
+        icon="arrow-up"
+        tooltip={sendLabel}
+        accessibilityLabel={sendLabel}
+      />
+    );
+
+  // The input lives at a stable keyed position so it is never remounted when the
+  // layout flips between compact and expanded — the caret and focus survive the
+  // keystroke that triggers the expansion. When compact, the input is a FIXED
+  // single-row height (a bigger click target than the line itself, but the pill
+  // stays 52px — a flex/auto height would let the multiline textarea balloon to
+  // its 2-row intrinsic size). Its line is vertically centred by symmetric
+  // padding; `measureScrollHeight` subtracts that padding, so wrap-detection is
+  // unaffected. Growth past one line is the EXPANDED layout's job (up to maxLines).
+  const compactPadV = Math.max(2, Math.round((COMPACT_INPUT_HEIGHT - lineHeight) / 2));
+  const field = (
+    <View
+      key="field"
+      onLayout={measure}
+      style={expanded ? { height: containerHeight } : [styles.field, { height: COMPACT_INPUT_HEIGHT }]}
+    >
+      <RNTextInput
+        ref={mergedInputRef}
+        autoFocus={autoFocus}
+        onChangeText={handleChangeText}
+        onSubmitEditing={handleSend}
+        placeholder={placeholder}
+        placeholderTextColor={colors.zinc[500]}
+        value={text}
+        onFocus={() => setFocused(true)}
+        onBlur={() => setFocused(false)}
+        multiline
+        scrollEnabled={expanded && scrollEnabled}
+        onContentSizeChange={onContentSizeChange}
+        {...spreadInputProps}
+        onKeyPress={handleKeyPress}
+        style={[
+          styles.textInput,
+          getInputTextStyle(),
+          { outlineStyle: "none" },
+          (!expanded || !scrollEnabled) && { overflow: "hidden" as const },
+          expanded ? null : { paddingHorizontal: 10, paddingVertical: compactPadV },
+          spreadInputProps?.style,
+        ]}
+      />
+    </View>
+  );
 
   return (
-    <View testID={testID} style={[styles.container, focused && styles.focused]}>
-      <View style={[styles.inputContainer, hasContentAboveInput && styles.inputContainerWithContent]}>
-        {pills != null && <View style={styles.pillRow}>{pills}</View>}
-        {files != null && (
-          <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ gap: 8 }}>
-            {files}
-          </ScrollView>
-        )}
-        {children}
-        <View style={{ justifyContent: "center" }}>
-          <View style={{ height: containerHeight }}>
-            <RNTextInput
-              ref={mergedInputRef}
-              autoFocus={autoFocus}
-              onChangeText={handleChangeText}
-              onSubmitEditing={handleSend}
-              placeholder={placeholder}
-              placeholderTextColor={colors.zinc[500]}
-              value={text}
-              onFocus={() => setFocused(true)}
-              onBlur={() => setFocused(false)}
-              multiline
-              scrollEnabled={scrollEnabled}
-              onContentSizeChange={onContentSizeChange}
-              {...spreadInputProps}
-              onKeyPress={handleKeyPress}
-              style={[
-                styles.textInput,
-                getInputTextStyle(),
-                { outlineStyle: "none" },
-                !scrollEnabled && { overflow: "hidden" as const },
-                spreadInputProps?.style,
-              ]}
-            />
-          </View>
+    <View
+      testID={testID}
+      style={[
+        expanded ? styles.boxContainer : styles.pillContainer,
+        focused && (expanded ? styles.boxFocused : styles.pillFocused),
+      ]}
+    >
+      {expanded && pills != null ? (
+        <View key="pills" style={styles.pillRow}>
+          {pills}
         </View>
+      ) : null}
+      {expanded && files != null ? (
+        <ScrollView key="files" horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ gap: 8 }}>
+          {files}
+        </ScrollView>
+      ) : null}
+      {expanded && children != null ? <View key="children">{children}</View> : null}
+
+      <View key="input" style={expanded ? styles.inputAreaExpanded : styles.pillRowLayout}>
+        {!expanded && actionsButton != null ? <View key="lead">{actionsButton}</View> : null}
+        {field}
+        {!expanded ? <View key="trail">{sendButton}</View> : null}
       </View>
 
-      <View style={styles.footer}>
-        <View style={styles.footerLeft}>{actionsButton}</View>
-        <View style={styles.footerRight}>
-          {footerRight}
-          {disabled && onStop ? (
-            <Button onPress={onStop} color="primary" icon="square" tooltip={stopLabel} />
-          ) : (
-            <Button
-              onPress={handleSend}
-              color="primary"
-              disabled={disabled || effectiveSendDisabled}
-              icon="arrow-up"
-              tooltip={sendLabel}
-            />
-          )}
+      {expanded ? (
+        <View key="footer" style={styles.footer}>
+          <View style={styles.footerLeft}>{actionsButton}</View>
+          <View style={styles.footerRight}>
+            {footerRight}
+            {sendButton}
+          </View>
         </View>
-      </View>
+      ) : null}
     </View>
   );
 }
 
+const PILL_HEIGHT = 52;
+// Fixed single-row input height inside the compact pill — a tall click target
+// that keeps the pill at PILL_HEIGHT (a flex/auto height balloons the textarea).
+const COMPACT_INPUT_HEIGHT = 44;
+
 const styles = StyleSheet.create({
-  container: {
+  // Expanded — the full chat composer box.
+  boxContainer: {
     padding: 8,
     borderRadius: 16,
     borderWidth: 2,
     borderColor: colors.border,
     backgroundColor: colors.background,
+    gap: 8,
   },
-  focused: {
+  boxFocused: {
     borderColor: colors.black,
   },
+  inputAreaExpanded: {
+    padding: 4,
+    justifyContent: "center",
+  },
   footer: {
-    flex: 1,
     flexDirection: "row",
     gap: 8,
     justifyContent: "space-between",
     zIndex: 1,
-    paddingTop: 8,
   },
   footerLeft: {
     flexDirection: "row",
@@ -212,17 +286,33 @@ const styles = StyleSheet.create({
     alignItems: "center",
     gap: 8,
   },
-  inputContainer: {
-    padding: 4,
-  },
-  inputContainerWithContent: {
-    gap: 8,
-  },
   pillRow: {
     flexDirection: "row",
     flexWrap: "wrap",
     gap: 4,
   },
+  // Compact — the command pill (matches AgentProgress's pill geometry so the
+  // run-morph reads as a morph, not a replacement).
+  pillContainer: {
+    minHeight: PILL_HEIGHT,
+    justifyContent: "center",
+    paddingHorizontal: 6,
+    borderRadius: 999,
+    borderWidth: 1.5,
+    borderColor: colors.border,
+    backgroundColor: colors.white,
+  },
+  pillFocused: {
+    borderColor: colors.zinc[900],
+  },
+  pillRowLayout: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+  },
+  field: {
+    flex: 1,
+  },
   textInput: {
     flex: 1,
     fontFamily: fontFamilyRegular,

package/src/use_auto_grow_height.ts

@@ -10,6 +10,9 @@ interface UseAutoGrowHeightOptions {
 
 interface UseAutoGrowHeightResult {
   containerHeight: number;
+  /** Height of a single line at the current screen size — compare against
+   *  `containerHeight` to tell whether the content has wrapped past one line. */
+  lineHeight: number;
   scrollEnabled: boolean;
   inputRef: (node: TextInput | null) => void;
   measure: () => void;
@@ -81,6 +84,7 @@ export function useAutoGrowHeight(options: UseAutoGrowHeightOptions = {}): UseAu
 
   return {
     containerHeight,
+    lineHeight,
     scrollEnabled,
     inputRef,
     measure,

package/src/prompt_field.tsx

@@ -1,108 +0,0 @@
-import { useCallback, useState } from "react";
-import {
-  NativeSyntheticEvent,
-  StyleSheet,
-  TextInput as RNTextInput,
-  TextInputKeyPressEventData,
-  View,
-} from "react-native";
-import { colors } from "./colors";
-import { Button } from "./button";
-import { getInputTextStyle, fontFamilyRegular } from "./text_utils";
-
-export interface PromptFieldProps {
-  value: string;
-  onChangeText: (value: string) => void;
-  /** Fired on Enter or the send button. Receives the trimmed text; never fires
-   *  empty or while busy. */
-  onSubmit: (value: string) => void;
-  placeholder?: string;
-  /** The agent is working — the field locks. Typically the host swaps the field
-   *  for `AgentProgress` while busy (the composer MORPHS into the progress
-   *  pill); the two share the same pill geometry so the swap reads as a morph. */
-  busy?: boolean;
-  disabled?: boolean;
-  autoFocus?: boolean;
-  accessibilityLabel?: string;
-  /** When set, a circular attach button sits at the left of the row — the
-   *  composer can attach files (e.g. the photo that starts a run). */
-  onAttach?: () => void;
-}
-
-const ROW = 40;
-
-/**
- * The natural-language command surface for an AI app — a compact single-row
- * composer pill that triggers agent work, NOT a chat composer. A circular attach
- * `Button` on the left, the input filling the row at the same height as the
- * buttons, a circular send-arrow `Button` on the right; Enter sends. While the
- * agent runs the host swaps this for `AgentProgress` — same pill geometry, so it
- * morphs into the progress indicator.
- */
-export function PromptField(props: PromptFieldProps) {
-  const { value, onChangeText, onSubmit, placeholder, busy, disabled, autoFocus, accessibilityLabel, onAttach } = props;
-  const [focused, setFocused] = useState(false);
-
-  const canSubmit = value.trim().length > 0 && !busy && !disabled;
-
-  const submit = useCallback(() => {
-    if (value.trim().length === 0 || busy || disabled) return;
-    onSubmit(value.trim());
-  }, [value, busy, disabled, onSubmit]);
-
-  const onKeyPress = useCallback(
-    (e: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
-      const ne = e.nativeEvent as unknown as { key: string; shiftKey?: boolean };
-      if (ne.key === "Enter" && !ne.shiftKey) {
-        (e as unknown as { preventDefault?: () => void }).preventDefault?.();
-        submit();
-      }
-    },
-    [submit],
-  );
-
-  return (
-    <View style={[styles.box, focused ? styles.boxFocused : null, disabled ? styles.boxDisabled : null]}>
-      {onAttach ? (
-        <Button icon="paperclip" color="secondary" accessibilityLabel="Attach files" onPress={onAttach} disabled={busy || disabled} />
-      ) : null}
-      <RNTextInput
-        accessibilityLabel={accessibilityLabel ?? placeholder}
-        style={[styles.input, getInputTextStyle(), { outline: "none", outlineStyle: "none", outlineWidth: 0 } as object]}
-        value={value}
-        onChangeText={onChangeText}
-        onKeyPress={onKeyPress}
-        onSubmitEditing={submit}
-        onFocus={() => setFocused(true)}
-        onBlur={() => setFocused(false)}
-        placeholder={placeholder}
-        placeholderTextColor={colors.zinc[400]}
-        editable={!busy && !disabled}
-        autoFocus={autoFocus}
-      />
-      <Button icon="arrow-up" color="primary" accessibilityLabel="Send" onPress={submit} disabled={!canSubmit} />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  box: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    minHeight: 52,
-    borderWidth: 1.5,
-    borderColor: colors.border,
-    borderRadius: 999,
-    backgroundColor: colors.white,
-    paddingHorizontal: 6,
-  },
-  boxFocused: { borderColor: colors.zinc[900] },
-  boxDisabled: { backgroundColor: colors.zinc[50] },
-  input: {
-    flex: 1,
-    height: ROW,
-    paddingHorizontal: 10,
-    fontFamily: fontFamilyRegular,
-  } as object,
-});