@vvedantb/native-ui 0.12.1 → 0.17.0

package/src/ai/activity-step-types.ts

@@ -0,0 +1,107 @@
+// Pure step types for the activity timeline: no React, so `@vvedantb/native-ui`
+// keeps a byte-identical copy (`src/ai/activity-step-types.ts`), with the step
+// labels and grouping that read them.
+
+/** One item in a todo checklist step (type "todos"). */
+export interface ActivityTodoItem {
+  content: string;
+  status: "pending" | "in_progress" | "completed";
+}
+
+export interface ActivityStepOutput {
+  text: string;
+  exitCode?: number;
+  truncated?: boolean;
+}
+
+export interface ActivityStepEdit {
+  oldText: string;
+  newText: string;
+}
+
+/** One choice offered by an AskUserQuestion prompt. */
+export interface ActivityQuestionOption {
+  label: string;
+  description?: string;
+}
+
+/** One question of an AskUserQuestion prompt, with the choices shown. */
+export interface ActivityQuestion {
+  question: string;
+  header?: string;
+  multiSelect?: boolean;
+  options: ActivityQuestionOption[];
+}
+
+export interface ActivityStep {
+  type:
+    | "read"
+    | "edit"
+    | "write"
+    | "bash"
+    | "search_files"
+    | "search_code"
+    | "web_fetch"
+    | "web_search"
+    | "subtask"
+    | "notebook"
+    | "thinking"
+    | "reasoning"
+    | "response"
+    | "question"
+    | "todos"
+    | "tool"
+    | "notice"
+    | "hook"
+    | "status"
+    /** A queued user message the agent took into this live turn (Steer). */
+    | "steer";
+  label: string;
+  detail?: string;
+  /** Full, unshortened path for file-type steps. Powers the chat File Viewer. */
+  path?: string;
+  /** `pending`: a planned step that has not started (sandbox startup stages). */
+  status: "complete" | "active" | "pending";
+  /** The tool_use id that produced this step (Claude only). */
+  toolUseId?: string;
+  /** Parent `Agent` tool_use id — set on steps that ran inside a subagent. */
+  parentToolUseId?: string;
+  /** Todo checklist snapshot (type "todos" only). */
+  todos?: ActivityTodoItem[];
+  /** Bash command (fuller than detail, capped). */
+  command?: string;
+  /** Tool result transcript (tail-capped). */
+  output?: ActivityStepOutput;
+  /** Edit before/after snippets. */
+  edits?: ActivityStepEdit[];
+  /** Codex file_change paths. */
+  files?: string[];
+  /** Write tool content head preview. */
+  contentPreview?: string;
+  /** True when the tool failed or exited non-zero. */
+  isError?: boolean;
+  /** Wall time from push → complete (ms). */
+  durationMs?: number;
+  /** AskUserQuestion prompt (type "question" only): the questions and options shown to the user. */
+  questions?: ActivityQuestion[];
+  /** AskUserQuestion answers keyed by question text. Absent when the turn ended without a structured answer. */
+  answers?: Record<string, string>;
+  /**
+   * The transcript query stripped this step's expanded-only fields (`output`,
+   * `edits`, `contentPreview`) to keep the chat subscription small. The row
+   * still opens; the body fills in once the full payload is fetched.
+   */
+  hasHiddenDetail?: boolean;
+}
+
+/** True when the step has expandable rich detail to show. */
+export function activityStepHasRichDetail(step: ActivityStep): boolean {
+  return Boolean(
+    step.command ||
+    step.output ||
+    (step.edits && step.edits.length > 0) ||
+    (step.files && step.files.length > 0) ||
+    step.contentPreview ||
+    step.hasHiddenDetail,
+  );
+}

package/src/ai/activity-tasks-utils.ts

@@ -0,0 +1,199 @@
+import type { ActivityStep } from "./activity-step-types";
+
+/**
+ * One row in the activity timeline. Subtask rows may nest child rows that ran
+ * inside that agent (keyed by parentToolUseId → toolUseId).
+ */
+export interface ActivityRow {
+  step: ActivityStep;
+  children?: ActivityRow[];
+}
+
+/**
+ * Status-filler thinking labels emitted by older callback versions (and by
+ * prod until the current callback deploys). The response/reasoning text is
+ * shown directly, so these narration rows are pure noise — hide them.
+ */
+const LEGACY_NOISE_LABELS = new Set([
+  "Generating response...",
+  "Generated response",
+  "Streaming response...",
+  "Streamed response",
+  "Finalizing response...",
+]);
+
+/** Thinking labels that mark model reasoning rather than status narration. */
+const REASONING_LABELS = new Set(["Thinking...", "Thought"]);
+
+/** Placeholder details older callbacks attached to reasoning-label steps. */
+const FILLER_DETAILS = new Set([
+  "Claude is reasoning...",
+  "Codex is reasoning...",
+  "Opencode is reasoning...",
+  "Cursor is reasoning...",
+  "Receiving reply...",
+]);
+
+/**
+ * Older callbacks stored reasoning as thinking steps labelled
+ * "Thinking..."/"Thought". Remap those with real text to reasoning blocks;
+ * drop the bare placeholder ones (nothing to show).
+ */
+export function normalizeStep(step: ActivityStep): ActivityStep | null {
+  if (step.type !== "thinking") return step;
+  if (LEGACY_NOISE_LABELS.has(step.label)) return null;
+  if (REASONING_LABELS.has(step.label)) {
+    if (step.detail && !FILLER_DETAILS.has(step.detail)) {
+      return { ...step, type: "reasoning" };
+    }
+    return null;
+  }
+  return step;
+}
+
+/** Builds one row per normalized step (no consecutive-type merging). */
+function stepsToRows(steps: ActivityStep[]): ActivityRow[] {
+  const rows: ActivityRow[] = [];
+  for (const raw of steps) {
+    const step = normalizeStep(raw);
+    if (!step) continue;
+    rows.push({ step });
+  }
+  return rows;
+}
+
+/**
+ * Row types that read as narration rather than work: they already summarise
+ * themselves, so folding them into an action group would hide their only text.
+ */
+const STANDALONE_TYPES = new Set<ActivityStep["type"]>([
+  "todos",
+  "notice",
+  "status",
+  "question",
+  "steer",
+]);
+
+/** One block in the activity timeline: prose, a lone row, or a folded run. */
+export type ActivitySegment =
+  | { kind: "reasoning"; step: ActivityStep }
+  | { kind: "response"; step: ActivityStep }
+  | { kind: "row"; row: ActivityRow }
+  | { kind: "actions"; rows: ActivityRow[] };
+
+/**
+ * Folds rows into the read-then-act rhythm of the turn: each reasoning block
+ * stays prose, and the run of tool calls it produced collapses behind a single
+ * summary line. Without this the whole turn is one undifferentiated wall of
+ * per-call rows and the thinking that motivated them is lost in it.
+ */
+export function groupActivityRows(rows: ActivityRow[]): ActivitySegment[] {
+  const segments: ActivitySegment[] = [];
+
+  for (const row of rows) {
+    if (row.step.type === "reasoning") {
+      segments.push({ kind: "reasoning", step: row.step });
+      continue;
+    }
+    // Mid-turn reply text: it ends the tool run before it, like reasoning.
+    if (row.step.type === "response") {
+      segments.push({ kind: "response", step: row.step });
+      continue;
+    }
+    if (STANDALONE_TYPES.has(row.step.type)) {
+      segments.push({ kind: "row", row });
+      continue;
+    }
+    const last = segments.at(-1);
+    if (last?.kind === "actions") {
+      last.rows.push(row);
+      continue;
+    }
+    segments.push({ kind: "actions", rows: [row] });
+  }
+
+  return segments;
+}
+
+/**
+ * React key for one activity step. `label` and `status` are omitted so a
+ * streaming update (Running → Ran, error → recovered) keeps the same instance.
+ * `toolUseId` is the identity the callback already stamps; the fallback is
+ * type + path/command + occurrence in the list being keyed (never the visible
+ * overflow slice — callers must pass the full-list index).
+ */
+export function activityStepKey(
+  step: ActivityStep,
+  occurrence: number,
+): string {
+  const id = step.toolUseId;
+  if (id !== undefined && id.length > 0) {
+    return `id:${id}`;
+  }
+  const stable = step.path ?? step.command ?? "";
+  return `fb:${step.type}:${stable}:${occurrence}`;
+}
+
+export function activityRowKey(row: ActivityRow, occurrence: number): string {
+  return activityStepKey(row.step, occurrence);
+}
+
+/** React key for a timeline segment. Action groups key off the first row. */
+export function activitySegmentKey(
+  segment: ActivitySegment,
+  occurrence: number,
+): string {
+  if (segment.kind === "reasoning" || segment.kind === "response") {
+    return `${segment.kind}:${activityStepKey(segment.step, occurrence)}`;
+  }
+  if (segment.kind === "row") {
+    return `row:${activityRowKey(segment.row, occurrence)}`;
+  }
+  const first = segment.rows[0];
+  if (first === undefined) {
+    return `actions:${occurrence}`;
+  }
+  return `actions:${activityRowKey(first, occurrence)}`;
+}
+
+/**
+ * Builds per-call activity rows. Steps with `parentToolUseId` nest under the
+ * matching subtask `toolUseId`. Orphans whose parent was never found append
+ * at the top level (never drop).
+ */
+export function buildActivityRows(steps: ActivityStep[]): ActivityRow[] {
+  const childrenByParent = new Map<string, ActivityStep[]>();
+  const topLevel: ActivityStep[] = [];
+
+  for (const step of steps) {
+    const parentId = step.parentToolUseId;
+    if (parentId) {
+      const existing = childrenByParent.get(parentId);
+      if (existing) existing.push(step);
+      else childrenByParent.set(parentId, [step]);
+    } else {
+      topLevel.push(step);
+    }
+  }
+
+  const rows = stepsToRows(topLevel);
+  const attached = new Set<string>();
+
+  for (const row of rows) {
+    if (row.step.type !== "subtask") continue;
+    const toolUseId = row.step.toolUseId;
+    if (!toolUseId) continue;
+    const kids = childrenByParent.get(toolUseId);
+    if (kids && kids.length > 0) {
+      row.children = stepsToRows(kids);
+      attached.add(toolUseId);
+    }
+  }
+
+  for (const [parentId, kids] of childrenByParent) {
+    if (attached.has(parentId)) continue;
+    rows.push(...stepsToRows(kids));
+  }
+
+  return rows;
+}

package/src/ai/activity-timeline.ts

@@ -0,0 +1,45 @@
+// The folded (Codex-style) rules of the web `ActivityTasks`
+// (`@vvedantb/ui` `activity-tasks.tsx`), as pure logic for an app that draws
+// the rows with the `AgentTrace` parts. The row text, the grouping and the
+// step types are byte-identical copies of the web files
+// (`activity-step-label.ts`, `activity-tasks-utils.ts`, `activity-step-types.ts`).
+import type { ActivityRow, ActivitySegment } from "./activity-tasks-utils";
+import { buildActivityRows, groupActivityRows } from "./activity-tasks-utils";
+import type { ActivityStep } from "./activity-step-types";
+
+/** Blocks a settled timeline shows before "Show N more" (web `MAX_VISIBLE_ROWS`). */
+export const ACTIVITY_MAX_VISIBLE_BLOCKS = 8;
+
+/** Child rows a subagent step shows before "+N more" (web `MAX_VISIBLE_CHILDREN`). */
+export const ACTIVITY_MAX_VISIBLE_CHILDREN = 8;
+
+/** Step types the folded layout hides: the reply text and the status thinking lines. */
+const HIDDEN_TYPES = new Set<ActivityStep["type"]>(["thinking", "response"]);
+
+/**
+ * A turn's steps as the blocks of the folded timeline: each reasoning step as
+ * prose, each run of tool calls behind one summary line, narration (to-dos,
+ * notices, questions) as lone rows, and the steps a subagent ran nested under
+ * its row. Reply text and status thinking lines are dropped, as on the web.
+ */
+export function foldedActivitySegments(steps: ActivityStep[]): ActivitySegment[] {
+  return groupActivityRows(buildActivityRows(steps).filter((row) => !HIDDEN_TYPES.has(row.step.type)));
+}
+
+/**
+ * The child rows a subagent row shows (its reply text belongs to its own
+ * thread, so it is dropped), capped at `ACTIVITY_MAX_VISIBLE_CHILDREN`, and
+ * how many are left for "+N more".
+ */
+export function activityChildRows(row: ActivityRow): { shown: ActivityRow[]; total: number; overflow: number } {
+  const children = (row.children ?? []).filter((child) => !HIDDEN_TYPES.has(child.step.type));
+  const overflow = Math.max(0, children.length - ACTIVITY_MAX_VISIBLE_CHILDREN);
+  return { shown: children.slice(0, ACTIVITY_MAX_VISIBLE_CHILDREN), total: children.length, overflow };
+}
+
+/** Whole seconds a finished step took, for the faded "4s" after its row; undefined when unknown or under 1s. */
+export function activityStepSeconds(step: ActivityStep): number | undefined {
+  if (step.status !== "complete" || !step.durationMs) return undefined;
+  const seconds = Math.round(step.durationMs / 1000);
+  return seconds >= 1 ? seconds : undefined;
+}

package/src/ai/attachments.tsx

@@ -175,7 +175,9 @@ export function Attachment({ data, onRemove, onPress, accessibilityLabel, testID
         <Pressable
           accessibilityRole="button"
           accessibilityLabel={`Remove ${label}`}
-          hitSlop={touchSlop(REMOVE_SIZE)}
+          // A pressable label sits 6 before it, and the next chip 8 past this
+          // chip's edge: the slop stops short of both, so neither steals a tap.
+          hitSlop={{ ...touchSlop(REMOVE_SIZE), left: onPress ? 3 : touchSlop(REMOVE_SIZE).left, right: 8 }}
           onPress={onRemove}
           className="items-center justify-center rounded-full active:opacity-70"
           style={{ width: REMOVE_SIZE, height: REMOVE_SIZE }}

package/src/ai/card-button.tsx

@@ -0,0 +1,49 @@
+import { Pressable, Text } from "react-native";
+import { cn } from "../cn";
+import { buttonColors, MIN_TOUCH_TARGET, sizeStyle, touchSlop, typeStyle, type ButtonVariant } from "../controlStyles";
+import { useLargerText } from "../theme";
+import { useScheme } from "../useScheme";
+import { chatTextSize } from "./chat-text";
+
+export type CardButtonProps = {
+  label: string;
+  variant: Extract<ButtonVariant, "primary" | "outline" | "secondary" | "destructive" | "ghost">;
+  onPress?: () => void;
+  disabled?: boolean;
+  accessibilityLabel?: string;
+  testID?: string;
+};
+
+/**
+ * The compact pill button of the tool and subagent cards: at least 44 points
+ * high, label in the `small` chat size (steps up with larger text). Internal.
+ */
+export function CardButton({ label, variant, onPress, disabled, accessibilityLabel, testID }: CardButtonProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const size = chatTextSize("small", largerText);
+  const colors = buttonColors(variant, scheme)!;
+  return (
+    <Pressable
+      testID={testID}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel ?? label}
+      accessibilityState={{ disabled: !!disabled }}
+      disabled={disabled}
+      onPress={onPress}
+      hitSlop={touchSlop(MIN_TOUCH_TARGET)}
+      className={cn("items-center justify-center rounded-full border px-4 active:opacity-70")}
+      style={{
+        minHeight: MIN_TOUCH_TARGET,
+        minWidth: MIN_TOUCH_TARGET,
+        backgroundColor: colors.backgroundColor,
+        borderColor: colors.borderColor,
+        opacity: disabled ? 0.5 : 1,
+      }}
+    >
+      <Text className={cn(size, "font-instrument-sans-semibold")} style={[sizeStyle(size), typeStyle("semibold"), { color: colors.color }]}>
+        {label}
+      </Text>
+    </Pressable>
+  );
+}

package/src/ai/chat-text.ts

@@ -5,19 +5,25 @@ import type { TextSize } from "../controlStyles";
 export type ChatTextKind = "body" | "small" | "caption";
 
 /**
- * `body` is message text: `text-base` (16 / 24), the phone body size (the web
- * `MessageContent` is `text-sm`, but the web composer is 16 on phones).
- * `small` is the secondary text of triggers, trace lines and sources:
- * `text-sm` (14 / 20; the web sources trigger is `text-xs`). `caption` is
- * `text-xs` (12 / 16): step descriptions, file chips and code headers. Larger
- * text steps each up, as `Textarea` does.
+ * `body` is message text: `text-sm` (14 / 20), as the web `MessageContent`.
+ * `small` is the secondary text of triggers, trace lines and sources: also
+ * `text-sm` (the web sources trigger is `text-xs`). `caption` is `text-xs`
+ * (12 / 16): step descriptions, file chips and code headers. Larger text
+ * steps each up, as `Textarea` does.
  */
 export function chatTextSize(kind: ChatTextKind, largerText: boolean): TextSize {
-  if (kind === "body") return largerText ? "text-xl" : "text-base";
+  if (kind === "body") return largerText ? "text-xl" : "text-sm";
   if (kind === "small") return largerText ? "text-lg" : "text-sm";
   return largerText ? "text-base" : "text-xs";
 }
 
+/**
+ * The web `text-2xs` token (11 / 16, tracking 0.01em) as a style, for
+ * `MessageMeta size="2xs"` and an app's own small labels. React Native has no
+ * `em`, so the tracking is in points.
+ */
+export const META_TEXT_STYLE = { fontSize: 11, lineHeight: 16, letterSpacing: 0.11 } as const;
+
 /** The system monospace face, for code and reasoning text (web `font-mono`). */
 export const MONO_FONT = Platform.select({ ios: "Menlo", default: "monospace" });
 

package/src/ai/chat-thread.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
-import { KeyboardAvoidingView, View } from "react-native";
+import { StyleSheet, View } from "react-native";
 import { cn } from "../cn";
+import { KeyboardAvoidingView, KeyboardLiftContext } from "../primitives/keyboard-parts";
 import {
   Conversation,
   ConversationContent,
@@ -48,10 +49,10 @@ function lastIndexOfRole(messages: UIMessage[], role: UIMessage["role"]) {
  * The chat column as one piece: `Conversation`, `ConversationContent`, the
  * messages, a `thinking` row right after the last user message while
  * `working`, `ConversationScrollButton` and the `footer` last. The whole
- * column sits in a `KeyboardAvoidingView` (`padding`, as `PromptInput`), which
- * also lifts the footer on Android edge-to-edge, where the window does not
- * resize. A `PromptInput` footer has its own `KeyboardAvoidingView`; the outer
- * lift moves it clear of the keyboard, so it adds no second lift.
+ * column sits in a `KeyboardAvoidingView` (`padding`, as `PromptInput`; frame
+ * by frame with `KeyboardControllerProvider`), which also lifts the footer on
+ * Android edge-to-edge, where the window does not resize. A `PromptInput`
+ * footer and the scroll button add no lift of their own (`KeyboardLiftContext`).
  */
 export function ChatThread<M extends UIMessage = UIMessage>({
   messages,
@@ -69,28 +70,34 @@ export function ChatThread<M extends UIMessage = UIMessage>({
   const streaming = working ? lastIndexOfRole(messages, "assistant") : -1;
 
   return (
-    <KeyboardAvoidingView
-      testID={testID}
-      behavior="padding"
-      keyboardVerticalOffset={keyboardVerticalOffset}
-      className={cn("flex-1", className)}
-    >
-      <Conversation>
-        <ConversationContent contentContainerClassName={contentContainerClassName}>
-          {messages.length === 0
-            ? emptyState
-            : messages.map((message, index) => (
-                <View key={message.id}>
-                  {renderMessage(message, index === streaming)}
-                  {index === lastUser && thinking != null ? (
-                    <View className="mt-4">{thinking}</View>
-                  ) : null}
-                </View>
-              ))}
-        </ConversationContent>
-        <ConversationScrollButton testID="chat-thread-scroll-bottom" />
-      </Conversation>
-      {footer}
+    <KeyboardAvoidingView testID={testID} keyboardVerticalOffset={keyboardVerticalOffset} style={styles.fill}>
+      {/* The column lifts as a whole: the parts in it add no lift of their own. */}
+      <KeyboardLiftContext.Provider value>
+        <View className={cn("flex-1", className)}>
+          <Conversation>
+            <ConversationContent contentContainerClassName={contentContainerClassName}>
+              {messages.length === 0
+                ? emptyState
+                : messages.map((message, index) => (
+                    <View key={message.id}>
+                      {renderMessage(message, index === streaming)}
+                      {index === lastUser && thinking != null ? (
+                        <View className="mt-4">{thinking}</View>
+                      ) : null}
+                    </View>
+                  ))}
+            </ConversationContent>
+            <ConversationScrollButton testID="chat-thread-scroll-bottom" />
+          </Conversation>
+          {footer}
+        </View>
+      </KeyboardLiftContext.Provider>
     </KeyboardAvoidingView>
   );
 }
+
+const styles = StyleSheet.create({
+  fill: {
+    flex: 1,
+  },
+});