@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/ai/activity-step-types.js

@@ -0,0 +1,14 @@
+// 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"). */
+
+/** One choice offered by an AskUserQuestion prompt. */
+
+/** One question of an AskUserQuestion prompt, with the choices shown. */
+
+/** True when the step has expandable rich detail to show. */
+export function activityStepHasRichDetail(step) {
+  return Boolean(step.command || step.output || step.edits && step.edits.length > 0 || step.files && step.files.length > 0 || step.contentPreview || step.hasHiddenDetail);
+}

package/dist/ai/activity-step.jsx

@@ -0,0 +1,98 @@
+import { c as _c } from "react/compiler-runtime";
+import { IconAlertTriangle, IconCheck } from "@tabler/icons-react-native";
+import { Spinner } from "../Spinner";
+import { useLargerText } from "../theme";
+import { AgentTraceDescription, AgentTraceIcon, AgentTraceLine, AgentTraceTitle } from "./trace";
+/**
+ * One tool or activity step as a single trace line: icon, label, status and
+ * an optional description. A light stand-in for the web `ActivityTasks`, built
+ * on the `AgentTrace` parts. Its accessibility label reads the label, the
+ * status and the description.
+ */
+export function ActivityStep(t0) {
+  const $ = _c(26);
+  const {
+    label,
+    icon,
+    status: t1,
+    description,
+    testID
+  } = t0;
+  const status = t1 === undefined ? "complete" : t1;
+  const largerText = useLargerText();
+  const running = status === "running";
+  const state = running ? "in progress" : status === "error" ? "failed" : "done";
+  const t2 = status === "error" ? "error" : undefined;
+  let t3;
+  if ($[0] !== description || $[1] !== label || $[2] !== state) {
+    t3 = [label, state, description].filter(Boolean);
+    $[0] = description;
+    $[1] = label;
+    $[2] = state;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  const t4 = t3.join(", ");
+  let t5;
+  if ($[4] !== running) {
+    t5 = {
+      busy: running
+    };
+    $[4] = running;
+    $[5] = t5;
+  } else {
+    t5 = $[5];
+  }
+  let t6;
+  if ($[6] !== icon) {
+    t6 = icon ? <AgentTraceIcon icon={icon} /> : null;
+    $[6] = icon;
+    $[7] = t6;
+  } else {
+    t6 = $[7];
+  }
+  let t7;
+  if ($[8] !== label || $[9] !== running) {
+    t7 = <AgentTraceTitle shimmer={running}>{label}</AgentTraceTitle>;
+    $[8] = label;
+    $[9] = running;
+    $[10] = t7;
+  } else {
+    t7 = $[10];
+  }
+  let t8;
+  if ($[11] !== description) {
+    t8 = description ? <AgentTraceDescription>{description}</AgentTraceDescription> : null;
+    $[11] = description;
+    $[12] = t8;
+  } else {
+    t8 = $[12];
+  }
+  let t9;
+  if ($[13] !== largerText || $[14] !== running || $[15] !== status) {
+    t9 = running ? <AgentTraceIcon><Spinner size={largerText ? "md" : "sm"} decorative={true} /></AgentTraceIcon> : <AgentTraceIcon icon={status === "error" ? IconAlertTriangle : IconCheck} />;
+    $[13] = largerText;
+    $[14] = running;
+    $[15] = status;
+    $[16] = t9;
+  } else {
+    t9 = $[16];
+  }
+  let t10;
+  if ($[17] !== t2 || $[18] !== t4 || $[19] !== t5 || $[20] !== t6 || $[21] !== t7 || $[22] !== t8 || $[23] !== t9 || $[24] !== testID) {
+    t10 = <AgentTraceLine testID={testID} status={t2} accessible={true} accessibilityLabel={t4} accessibilityState={t5}>{t6}{t7}{t8}{t9}</AgentTraceLine>;
+    $[17] = t2;
+    $[18] = t4;
+    $[19] = t5;
+    $[20] = t6;
+    $[21] = t7;
+    $[22] = t8;
+    $[23] = t9;
+    $[24] = testID;
+    $[25] = t10;
+  } else {
+    t10 = $[25];
+  }
+  return t10;
+}

package/dist/ai/activity-tasks-utils.js

@@ -0,0 +1,172 @@
+/**
+ * One row in the activity timeline. Subtask rows may nest child rows that ran
+ * inside that agent (keyed by parentToolUseId → toolUseId).
+ */
+
+/**
+ * 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) {
+  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) {
+  const rows = [];
+  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(["todos", "notice", "status", "question", "steer"]);
+
+/** One block in the activity timeline: prose, a lone row, or a folded run. */
+
+/**
+ * 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) {
+  const segments = [];
+  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, occurrence) {
+  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, occurrence) {
+  return activityStepKey(row.step, occurrence);
+}
+
+/** React key for a timeline segment. Action groups key off the first row. */
+export function activitySegmentKey(segment, occurrence) {
+  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) {
+  const childrenByParent = new Map();
+  const topLevel = [];
+  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();
+  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/dist/ai/activity-timeline.js

@@ -0,0 +1,47 @@
+// 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 { buildActivityRows, groupActivityRows } from "./activity-tasks-utils";
+/** 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(["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) {
+  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) {
+  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) {
+  if (step.status !== "complete" || !step.durationMs) return undefined;
+  const seconds = Math.round(step.durationMs / 1000);
+  return seconds >= 1 ? seconds : undefined;
+}

package/dist/ai/attachments.jsx

@@ -0,0 +1,258 @@
+import { c as _c } from "react/compiler-runtime";
+import { createContext, useContext } from "react";
+import { Image, Pressable, View } from "react-native";
+import { IconFileText, IconMusic, IconPaperclip, IconPhoto, IconVideo, IconWorld, IconX } from "@tabler/icons-react-native";
+import { cn } from "../cn";
+import { touchSlop } from "../controlStyles";
+import { useLargerText } from "../theme";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+import { ResponseText } from "./response-text";
+
+/**
+ * A file or source attached to a prompt or message. The fields the web reads
+ * from the `ai` SDK `FileUIPart` and `SourceDocumentUIPart`, without the SDK.
+ */
+
+const MEDIA_ICONS = {
+  audio: IconMusic,
+  document: IconFileText,
+  image: IconPhoto,
+  source: IconWorld,
+  unknown: IconPaperclip,
+  video: IconVideo
+};
+
+/** The kind of attachment, from its type and MIME type, as on the web. */
+export function getMediaCategory(data) {
+  if (data.type === "source-document") return "source";
+  const mediaType = data.mediaType ?? "";
+  if (mediaType.startsWith("image/")) return "image";
+  if (mediaType.startsWith("video/")) return "video";
+  if (mediaType.startsWith("audio/")) return "audio";
+  if (mediaType.startsWith("application/") || mediaType.startsWith("text/")) return "document";
+  return "unknown";
+}
+
+/** The name to show and read, as on the web: the title or file name, else "Source", "Image" or "Attachment". */
+export function getAttachmentLabel(data) {
+  if (data.type === "source-document") return data.title || data.filename || "Source";
+  return data.filename || (getMediaCategory(data) === "image" ? "Image" : "Attachment");
+}
+
+/** `inline` (default) wraps chips in rows; `list` stacks them full width. The web `grid` previews are not ported. */
+
+const AttachmentsContext = createContext("inline");
+/** The attachments of a prompt or message. */
+export function Attachments(t0) {
+  const $ = _c(13);
+  let className;
+  let props;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      variant: t1,
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = t1;
+  } else {
+    className = $[1];
+    props = $[2];
+    t1 = $[3];
+  }
+  const variant = t1 === undefined ? "inline" : t1;
+  const t2 = variant === "list" ? "gap-2" : "flex-row flex-wrap items-start gap-2";
+  let t3;
+  if ($[4] !== className || $[5] !== t2) {
+    t3 = cn(t2, className);
+    $[4] = className;
+    $[5] = t2;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  let t4;
+  if ($[7] !== props || $[8] !== t3) {
+    t4 = <View className={t3} {...props} />;
+    $[7] = props;
+    $[8] = t3;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  let t5;
+  if ($[10] !== t4 || $[11] !== variant) {
+    t5 = <AttachmentsContext.Provider value={variant}>{t4}</AttachmentsContext.Provider>;
+    $[10] = t4;
+    $[11] = variant;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  return t5;
+}
+/** The hit target of a pressable chip, in points, on each axis. */
+export const ATTACHMENT_PRESS_TARGET = 48;
+
+/** A remove cross of 20 in a 32 row: the slop brings it to 44. */
+const REMOVE_SIZE = 20;
+
+/**
+ * One attachment as a chip: a 20 thumbnail for an image with a `url`, else
+ * its media icon, then the name and an optional remove button. Flat, on the
+ * web `flatPanelSubtle` fill (`bg-surface-secondary`). No hover card. With
+ * `onPress` the thumbnail or icon and the name are one button with a 48 point
+ * hit target (the chip stays 32, or 44 with larger text, and `hitSlop` does the
+ * rest); the remove button is a separate target that never calls `onPress`.
+ */
+export function Attachment(t0) {
+  const $ = _c(40);
+  const {
+    data,
+    onRemove,
+    onPress,
+    accessibilityLabel,
+    testID
+  } = t0;
+  const variant = useContext(AttachmentsContext);
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  let t1;
+  if ($[0] !== data) {
+    t1 = getMediaCategory(data);
+    $[0] = data;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const category = t1;
+  let t2;
+  if ($[2] !== data) {
+    t2 = getAttachmentLabel(data);
+    $[2] = data;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const label = t2;
+  const Icon = MEDIA_ICONS[category];
+  const iconSize = largerText ? 20 : 16;
+  const muted = tokens.color.muted[scheme];
+  let t3;
+  if ($[4] !== Icon || $[5] !== category || $[6] !== data || $[7] !== iconSize || $[8] !== muted) {
+    t3 = category === "image" && data.url ? <Image source={{
+      uri: data.url
+    }} resizeMode="cover" style={{
+      width: 20,
+      height: 20,
+      borderRadius: 4
+    }} /> : <Icon size={iconSize} color={muted} />;
+    $[4] = Icon;
+    $[5] = category;
+    $[6] = data;
+    $[7] = iconSize;
+    $[8] = muted;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  const t4 = variant === "list" ? "flex-1" : "shrink";
+  let t5;
+  if ($[10] !== label || $[11] !== t4) {
+    t5 = <ResponseText size="small" selectable={false} numberOfLines={1} ellipsizeMode="middle" className={t4}>{label}</ResponseText>;
+    $[10] = label;
+    $[11] = t4;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  let t6;
+  if ($[13] !== t3 || $[14] !== t5) {
+    t6 = <>{t3}{t5}</>;
+    $[13] = t3;
+    $[14] = t5;
+    $[15] = t6;
+  } else {
+    t6 = $[15];
+  }
+  const content = t6;
+  const chipHeight = largerText ? 44 : 32;
+  const slop = Math.max(0, Math.ceil((ATTACHMENT_PRESS_TARGET - chipHeight) / 2));
+  const t7 = largerText ? "min-h-11" : "min-h-8";
+  const t8 = variant === "list" ? "w-full" : "max-w-full";
+  let t9;
+  if ($[16] !== t7 || $[17] !== t8) {
+    t9 = cn("min-w-0 flex-row items-center gap-1.5 px-2", t7, t8);
+    $[16] = t7;
+    $[17] = t8;
+    $[18] = t9;
+  } else {
+    t9 = $[18];
+  }
+  const t10 = tokens.color.surfaceSecondary[scheme];
+  let t11;
+  if ($[19] !== t10) {
+    t11 = {
+      borderRadius: tokens.radius.sm,
+      backgroundColor: t10
+    };
+    $[19] = t10;
+    $[20] = t11;
+  } else {
+    t11 = $[20];
+  }
+  let t12;
+  if ($[21] !== accessibilityLabel || $[22] !== content || $[23] !== label || $[24] !== onPress || $[25] !== slop || $[26] !== variant) {
+    t12 = onPress ? <Pressable accessibilityRole="button" accessibilityLabel={accessibilityLabel ?? label} hitSlop={{
+      top: slop,
+      bottom: slop,
+      left: 0,
+      right: 0
+    }} onPress={onPress} className={cn("min-w-0 flex-row items-center gap-1.5 self-stretch active:opacity-70", variant === "list" ? "flex-1" : "shrink")}>{content}</Pressable> : content;
+    $[21] = accessibilityLabel;
+    $[22] = content;
+    $[23] = label;
+    $[24] = onPress;
+    $[25] = slop;
+    $[26] = variant;
+    $[27] = t12;
+  } else {
+    t12 = $[27];
+  }
+  let t13;
+  if ($[28] !== label || $[29] !== largerText || $[30] !== muted || $[31] !== onPress || $[32] !== onRemove) {
+    t13 = onRemove ? <Pressable accessibilityRole="button" accessibilityLabel={`Remove ${label}`} 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
+    }}><IconX size={largerText ? 16 : 14} color={muted} /></Pressable> : null;
+    $[28] = label;
+    $[29] = largerText;
+    $[30] = muted;
+    $[31] = onPress;
+    $[32] = onRemove;
+    $[33] = t13;
+  } else {
+    t13 = $[33];
+  }
+  let t14;
+  if ($[34] !== t11 || $[35] !== t12 || $[36] !== t13 || $[37] !== t9 || $[38] !== testID) {
+    t14 = <View testID={testID} className={t9} style={t11}>{t12}{t13}</View>;
+    $[34] = t11;
+    $[35] = t12;
+    $[36] = t13;
+    $[37] = t9;
+    $[38] = testID;
+    $[39] = t14;
+  } else {
+    t14 = $[39];
+  }
+  return t14;
+}