@lotics/ui 4.6.0 → 4.7.0

package/AGENTS.md

@@ -75,7 +75,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,8 +223,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`, NOT a chat composer. A prompt TRIGGERS agent work (Enter sends);
-  while it runs the field locks and the send spins. The imperative "do this" surface.
+- **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
@@ -252,8 +263,9 @@ Compose the surfaces as a loop, and reach for the right one by job:
 Ten shapes prove the range. The first four PRODUCE — pick by whether the work is a living artifact,
 a conversation, a single pass, or generated prose:
 - **Canvas** (`tpl_dieline`) — the page IS the design on a pannable/zoomable surface: it stays
-  CENTRED at every zoom (a floating zoom pill bottom-left), the FLOATING composer at the bottom
-  morphs into `AgentProgress` while running, and a pinned PARAMS PANEL (the `RecordReview` field-card
+  CENTRED at every zoom (a floating zoom pill bottom-left), the FLOATING composer at the bottom (a
+  `Composer`: attach a photo → review/remove it → add a note → send, with `sendDisabled` allowing a
+  file-and/or-text submit — NOT auto-run on attach) morphs into `AgentProgress` while running, and a pinned PARAMS PANEL (the `RecordReview` field-card
   in live-edit mode, carrying the single Download; minimizes to a pill) floats centre-right. Panel, zoom pill and composer
   float ON TOP — they never shift the design. (Floating layers use a `pointerEvents:"none"` wrapper
   with the interactive child set `"auto"`; RN-Web ignores `"box-none"` in style, so a full-width
@@ -308,9 +320,10 @@ 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; `AgentProgress` is the `WaveAvatar` pill. "No icons" was only ever about the review
-surfaces' sparkles/severity glyphs, not functional affordances.
+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.
 
 ---
 
@@ -507,8 +520,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_dieline.tsx

@@ -8,9 +8,19 @@ import { PressableHighlight } from "@lotics/ui/pressable_highlight";
 import { DotsIndicator } from "@lotics/ui/dots_indicator";
 import { InlineTextInput } from "@lotics/ui/inline_text_input";
 import { AgentProgress } from "@lotics/ui/agent_progress";
-import { PromptField } from "@lotics/ui/prompt_field";
+import { Composer } from "@lotics/ui/composer";
+import { FileThumbnail, type DisplayFile } from "@lotics/ui/file_thumbnail";
 import { type AgentRunStep } from "@lotics/ui/agent_run";
 
+// A real app fills the attachment from `useFileUpload` (the uploaded file's URL);
+// this mock uses an inline placeholder so the example needs no network image.
+const MOCK_PHOTO: DisplayFile = {
+  id: "att-carton",
+  filename: "carton.jpg",
+  mimeType: "image/jpeg",
+  url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==",
+};
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Template · AI design canvas (the carton "dieline" app) — the FLAGSHIP shape:
 // the page IS the design. The dieline fills the centre, a FLOATING composer sits
@@ -56,6 +66,7 @@ export function TplDieline() {
   const [pan, setPan] = useState({ x: 0, y: 0 });
   const [dragging, setDragging] = useState(false);
   const [prompt, setPrompt] = useState("");
+  const [attachment, setAttachment] = useState<DisplayFile | null>(null);
 
   // Drag-to-pan — like a design tool: grab anywhere on the canvas and move it.
   // The committed pan is read at grant via a ref (the responder is built once).
@@ -116,6 +127,7 @@ export function TplDieline() {
   const submitPrompt = (text: string) => {
     setPrompt("");
     if (!designReady) {
+      setAttachment(null); // the attached photo is consumed into the run
       startRecognize();
       return;
     }
@@ -136,6 +148,7 @@ export function TplDieline() {
 
   const newSession = () => {
     setRun(null);
+    setAttachment(null);
     setRevealed(0);
     setDesignReady(false);
     setDims({ L: 320, W: 230, H: 150 });
@@ -197,12 +210,16 @@ export function TplDieline() {
           {phase === "working" ? (
             <AgentProgress steps={liveSteps} state="streaming" />
           ) : (
-            <PromptField
+            <Composer
               value={prompt}
               onChangeText={setPrompt}
-              onSubmit={submitPrompt}
-              onAttach={startRecognize}
-              placeholder={designReady ? "Describe a change — “make it 5 mm taller”" : "Attach a photo of the carton to start…"}
+              onSend={submitPrompt}
+              sendDisabled={prompt.trim().length === 0 && !attachment}
+              placeholder={designReady ? "Describe a change — “make it 5 mm taller”" : "Attach a photo, add a note, then send…"}
+              actionsButton={
+                <Button icon="paperclip" color="secondary" accessibilityLabel="Attach a photo" onPress={() => setAttachment(MOCK_PHOTO)} />
+              }
+              files={attachment ? <FileThumbnail file={attachment} size={56} onRemove={() => setAttachment(null)} /> : null}
             />
           )}
         </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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "4.6.0",
+  "version": "4.7.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/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,
-});