@vvedantb/native-ui 0.13.0 → 0.17.1

package/src/ai/subagent-cards.tsx

@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 import { Text, View } from "react-native";
 import { IconRobot } from "@tabler/icons-react-native";
 import { cn } from "../cn";
@@ -6,8 +7,9 @@ import { palette, withAlpha } from "../palette";
 import { useLargerText } from "../theme";
 import { tokens } from "../tokens";
 import { useScheme } from "../useScheme";
+import { Spinner } from "../Spinner";
 import { CardButton } from "./card-button";
-import { chatTextSize, formatElapsed } from "./chat-text";
+import { chatTextSize, formatElapsed, MONO_FONT } from "./chat-text";
 import {
   Collapsible,
   CollapsibleChevron,
@@ -17,23 +19,25 @@ import {
 } from "./collapsible";
 import { ResponseText } from "./response-text";
 
-export type SubagentStatus = "running" | "done" | "failed" | "cancelled";
+export type SubagentStatus = "queued" | "running" | "done" | "failed" | "cancelled" | "timed_out";
 
 const STATUS_LABEL: Record<SubagentStatus, string> = {
+  queued: "Queued",
   running: "Running",
   done: "Done",
   failed: "Failed",
   cancelled: "Cancelled",
+  timed_out: "Timed out",
 };
 
 /** Pill colours per status. Text and border share one hue, the fill is a wash of it. */
 export function subagentStatusColors(status: SubagentStatus, scheme: "light" | "dark") {
   const hex =
-    status === "running"
+    status === "running" || status === "queued"
       ? palette.primary[scheme]
       : status === "done"
         ? palette.success[scheme]
-        : status === "failed"
+        : status === "failed" || status === "timed_out"
           ? palette.danger[scheme]
           : tokens.color.muted[scheme];
   return { color: hex, borderColor: withAlpha(hex, 0.25), backgroundColor: withAlpha(hex, 0.12) };
@@ -64,8 +68,14 @@ export type SubagentRunCardProps = {
   status: SubagentStatus;
   /** Whole seconds the run has taken. Shown as "12s" or "1m 5s". */
   elapsedSeconds?: number;
-  /** Shows a Cancel button while `status` is `running`. */
+  /** Shows a Cancel button while `status` is `queued` or `running`. */
   onCancel?: () => void;
+  /** Muted detail under the title, such as step or progress text. */
+  statusLine?: string;
+  /** Error text, in the danger colour. */
+  error?: string;
+  /** Replaces the robot icon. While `queued` or `running` a spinner shows instead. */
+  avatar?: ReactNode;
   className?: string;
   /** Default `subagent-run-card`. Parts add `-status`, `-elapsed` and `-cancel`. */
   testID?: string;
@@ -77,6 +87,9 @@ export function SubagentRunCard({
   status,
   elapsedSeconds,
   onCancel,
+  statusLine,
+  error,
+  avatar,
   className,
   testID = "subagent-run-card",
 }: SubagentRunCardProps) {
@@ -94,7 +107,11 @@ export function SubagentRunCard({
       style={cardStyle(scheme)}
     >
       <View className="flex-row items-center gap-2">
-        <IconRobot size={largerText ? 22 : 18} color={tokens.color.muted[scheme]} />
+        {status === "queued" || status === "running" ? (
+          <Spinner size="sm" decorative />
+        ) : (
+          (avatar ?? <IconRobot size={largerText ? 22 : 18} color={tokens.color.muted[scheme]} />)
+        )}
         <Text
           numberOfLines={2}
           className={cn(body, "min-w-0 flex-1 font-instrument-sans-semibold")}
@@ -104,6 +121,16 @@ export function SubagentRunCard({
         </Text>
         <StatusPill status={status} testID={`${testID}-status`} />
       </View>
+      {statusLine ? (
+        <Text testID={`${testID}-status-line`} className={small} style={[sizeStyle(small), textStyle("muted", scheme)]}>
+          {statusLine}
+        </Text>
+      ) : null}
+      {error ? (
+        <Text testID={`${testID}-error`} className={small} style={[sizeStyle(small), { color: palette.danger[scheme] }]}>
+          {error}
+        </Text>
+      ) : null}
       <View className="flex-row flex-wrap items-center justify-between gap-2">
         {elapsed ? (
           <Text
@@ -117,7 +144,7 @@ export function SubagentRunCard({
         ) : (
           <View />
         )}
-        {status === "running" && onCancel ? (
+        {(status === "running" || status === "queued") && onCancel ? (
           <CardButton
             testID={`${testID}-cancel`}
             label="Cancel"
@@ -131,12 +158,26 @@ export function SubagentRunCard({
   );
 }
 
+export type SubagentHandoff = {
+  toolName: string;
+  server?: string;
+  argsSummary: string;
+};
+
 export type SubagentResultCardProps = {
   title: string;
   /** The short result, always shown. */
   summary: string;
   /** The full result, shown when the card is open. No fold without it. */
   detail?: string;
+  /** Shows the warning note that an approval waits in another chat. */
+  approvalPending?: boolean;
+  /** Name for `Approval pending in {name}'s chat.` Default "the other bot". */
+  approvalPendingIn?: string;
+  /** Proposed actions, listed under "Proposed actions". */
+  handoffs?: readonly SubagentHandoff[];
+  /** A leading avatar beside the title. */
+  avatar?: ReactNode;
   defaultOpen?: boolean;
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
@@ -150,6 +191,10 @@ export function SubagentResultCard({
   title,
   summary,
   detail,
+  approvalPending = false,
+  approvalPendingIn,
+  handoffs,
+  avatar,
   defaultOpen = false,
   open,
   onOpenChange,
@@ -169,14 +214,39 @@ export function SubagentResultCard({
       className={cn("w-full gap-2 p-4", className)}
       style={cardStyle(scheme)}
     >
-      <Text
-        numberOfLines={2}
-        className={cn(body, "font-instrument-sans-semibold")}
-        style={[sizeStyle(body), typeStyle("semibold"), textStyle("foreground", scheme)]}
-      >
-        {title}
-      </Text>
+      <View className="flex-row items-center gap-2">
+        {avatar}
+        <Text
+          numberOfLines={2}
+          className={cn(body, "min-w-0 flex-1 font-instrument-sans-semibold")}
+          style={[sizeStyle(body), typeStyle("semibold"), textStyle("foreground", scheme)]}
+        >
+          {title}
+        </Text>
+      </View>
       <ResponseText>{summary}</ResponseText>
+      {approvalPending ? (
+        <Text testID={`${testID}-approval-pending`} className={small} style={[sizeStyle(small), { color: palette.warning[scheme] }]}>
+          {`Approval pending in ${approvalPendingIn ? `${approvalPendingIn}'s` : "the other bot's"} chat.`}
+        </Text>
+      ) : null}
+      {handoffs && handoffs.length > 0 ? (
+        <View testID={`${testID}-handoffs`} className="gap-1">
+          <Text className={small} style={[sizeStyle(small), textStyle("muted", scheme)]}>
+            Proposed actions
+          </Text>
+          {handoffs.map((handoff, index) => (
+            <Text
+              key={`${handoff.toolName}-${index}`}
+              testID={`${testID}-handoff-${index}`}
+              className={small}
+              style={[sizeStyle(small), textStyle("muted", scheme), { fontFamily: MONO_FONT }]}
+            >
+              {`${handoff.toolName}${handoff.server ? ` via ${handoff.server}` : ""}: ${handoff.argsSummary}`}
+            </Text>
+          ))}
+        </View>
+      ) : null}
       {detail ? (
         <>
           <CollapsibleTrigger

package/src/ai/tool-approval-card.tsx

@@ -1,3 +1,4 @@
+import { useState, type ReactNode } from "react";
 import { Text, View } from "react-native";
 import { IconTool } from "@tabler/icons-react-native";
 import { cn } from "../cn";
@@ -6,9 +7,34 @@ import { withAlpha, palette } from "../palette";
 import { useLargerText } from "../theme";
 import { tokens } from "../tokens";
 import { useScheme } from "../useScheme";
+import { Input } from "../Input";
+import { Textarea } from "../Textarea";
 import { CardButton } from "./card-button";
 import { chatTextSize, MONO_FONT } from "./chat-text";
 
+export type DraftFieldRole = "to" | "cc" | "bcc" | "subject" | "body";
+export type DraftField = { key: string; role: DraftFieldRole; value: string };
+export type DraftEdit = { key: string; value: string };
+
+export const DRAFT_ROLE_LABELS: Record<DraftFieldRole, string> = {
+  to: "To",
+  cc: "Cc",
+  bcc: "Bcc",
+  subject: "Subject",
+  body: "Message",
+};
+
+/** The fields whose value differs from the original. `read` returns the edited value, or undefined for no edit. */
+export function changedDraftEdits(
+  fields: readonly DraftField[],
+  read: (key: string) => string | undefined,
+): DraftEdit[] {
+  return fields.flatMap((field) => {
+    const value = read(field.key);
+    return value === undefined || value === field.value ? [] : [{ key: field.key, value }];
+  });
+}
+
 /** What the reader chose. `edit` is offered by `ToolDraftCard` only. */
 export type ToolDecision = "approve" | "deny" | "edit";
 
@@ -18,13 +44,25 @@ export type ToolApprovalCardProps = {
   /** The arguments, as a short string or an object. Shown cut to `ARGS_MAX_CHARS`. */
   args?: string | Record<string, unknown>;
   /** Called with the choice. */
-  onDecide?: (decision: ToolDecision) => void;
+  onDecide?: (decision: ToolDecision, edits?: DraftEdit[]) => void;
   /** True while the app sends the decision: the buttons are off and the card says so. */
   pending?: boolean;
   /** Turns the buttons off without the pending state. */
   disabled?: boolean;
   approveLabel?: string;
   denyLabel?: string;
+  /** The tool server. The meta line reads `via {server}`, else `built-in tool`. */
+  server?: string;
+  /** Appends "queued while you were away" to the meta line. */
+  routineMode?: boolean;
+  /** Expiry text the app has formatted. Appends `Expires {expiresLabel}` to the meta line. */
+  expiresLabel?: string;
+  /** Shows a `Target: {target}` line. */
+  target?: string;
+  /** Replaces the default meta line. */
+  meta?: ReactNode;
+  /** Extra content under the meta line (above the target and args). */
+  chrome?: ReactNode;
   className?: string;
   /** Default `tool-approval-card`. The buttons add `-approve`, `-deny` and `-edit`. */
   testID?: string;
@@ -50,7 +88,14 @@ export function summarizeArgs(args: string | Record<string, unknown> | undefined
   return text.length > max ? `${text.slice(0, Math.max(0, max - 1))}…` : text;
 }
 
-type BaseProps = ToolApprovalCardProps & { allowEdit?: boolean; editLabel?: string; heading: string };
+type BaseProps = ToolApprovalCardProps & {
+  allowEdit?: boolean;
+  editLabel?: string;
+  heading: string;
+  /** Text between the source and the expiry in the default meta line. */
+  metaNote?: string;
+  fields?: readonly DraftField[];
+};
 
 function ToolCardBase({
   toolName,
@@ -63,6 +108,14 @@ function ToolCardBase({
   editLabel = "Edit",
   allowEdit = false,
   heading,
+  metaNote,
+  fields,
+  server,
+  routineMode = false,
+  expiresLabel,
+  target,
+  meta,
+  chrome,
   className,
   testID = "tool-approval-card",
 }: BaseProps) {
@@ -73,6 +126,23 @@ function ToolCardBase({
   const caption = chatTextSize("caption", largerText);
   const off = pending || disabled;
   const summary = summarizeArgs(args);
+  const [edits, setEdits] = useState<Record<string, string> | null>(null);
+  const hasFields = fields !== undefined;
+  const headerFields = fields?.filter((field) => field.role !== "body") ?? [];
+  const bodyField = fields?.find((field) => field.role === "body");
+  const metaText = [
+    server ? `via ${server}` : "built-in tool",
+    ...(metaNote ? [metaNote] : []),
+  ].join(" · ") + (routineMode ? " · queued while you were away" : "") + (expiresLabel ? ` · Expires ${expiresLabel}` : "");
+  const showMeta = meta !== undefined || server !== undefined || routineMode || expiresLabel !== undefined || metaNote !== undefined;
+  const onEdit = () => {
+    if (!fields) return onDecide?.("edit");
+    setEdits(edits ? null : Object.fromEntries(fields.map((field) => [field.key, field.value])));
+  };
+  const onApprove = () => {
+    if (fields && edits) onDecide?.("approve", changedDraftEdits(fields, (key) => edits[key]));
+    else onDecide?.("approve");
+  };
   return (
     <View
       testID={testID}
@@ -93,6 +163,14 @@ function ToolCardBase({
           {pending ? "Sending decision…" : heading}
         </Text>
       </View>
+      {showMeta ? (
+        meta ?? (
+          <Text testID={`${testID}-meta`} className={caption} style={[sizeStyle(caption), textStyle("muted", scheme)]}>
+            {metaText}
+          </Text>
+        )
+      ) : null}
+      {chrome}
       <Text
         testID={`${testID}-name`}
         numberOfLines={2}
@@ -101,7 +179,58 @@ function ToolCardBase({
       >
         {toolName}
       </Text>
-      {summary ? (
+      {target ? (
+        <Text testID={`${testID}-target`} className={small} style={[sizeStyle(small), textStyle("muted", scheme)]}>
+          {`Target: ${target}`}
+        </Text>
+      ) : null}
+      {hasFields ? (
+        edits ? (
+          <View testID={`${testID}-editor`} className="gap-2">
+            {fields.map((field) => (
+              <View key={field.key} className="gap-1">
+                <Text className={caption} style={[sizeStyle(caption), textStyle("muted", scheme)]}>
+                  {DRAFT_ROLE_LABELS[field.role]}
+                </Text>
+                {field.role === "body" ? (
+                  <Textarea
+                    testID={`${testID}-field-${field.key}`}
+                    value={edits[field.key] ?? ""}
+                    onChangeText={(value: string) => setEdits({ ...edits, [field.key]: value })}
+                    numberOfLines={8}
+                    accessibilityLabel={DRAFT_ROLE_LABELS[field.role]}
+                  />
+                ) : (
+                  <Input
+                    testID={`${testID}-field-${field.key}`}
+                    value={edits[field.key] ?? ""}
+                    onChangeText={(value: string) => setEdits({ ...edits, [field.key]: value })}
+                    accessibilityLabel={DRAFT_ROLE_LABELS[field.role]}
+                  />
+                )}
+              </View>
+            ))}
+          </View>
+        ) : (
+          <View testID={`${testID}-preview`} className="gap-2">
+            {headerFields.map((field) => (
+              <View key={field.key} className="flex-row gap-2">
+                <Text className={cn(caption, "w-16")} style={[sizeStyle(caption), textStyle("muted", scheme)]}>
+                  {DRAFT_ROLE_LABELS[field.role]}
+                </Text>
+                <Text className={cn(small, "min-w-0 flex-1")} style={[sizeStyle(small), textStyle("foreground", scheme)]}>
+                  {field.value}
+                </Text>
+              </View>
+            ))}
+            {bodyField ? (
+              <Text numberOfLines={12} className={body} style={[sizeStyle(body), textStyle("foreground", scheme)]}>
+                {bodyField.value}
+              </Text>
+            ) : null}
+          </View>
+        )
+      ) : summary ? (
         <Text
           testID={`${testID}-args`}
           numberOfLines={3}
@@ -123,11 +252,11 @@ function ToolCardBase({
         {allowEdit ? (
           <CardButton
             testID={`${testID}-edit`}
-            label={editLabel}
-            accessibilityLabel={`${editLabel} ${toolName}`}
+            label={edits ? "Cancel edit" : editLabel}
+            accessibilityLabel={`${edits ? "Cancel edit" : editLabel} ${toolName}`}
             variant="secondary"
             disabled={off}
-            onPress={() => onDecide?.("edit")}
+            onPress={onEdit}
           />
         ) : null}
         <CardButton
@@ -136,7 +265,7 @@ function ToolCardBase({
           accessibilityLabel={`${approveLabel} ${toolName}`}
           variant="primary"
           disabled={off}
-          onPress={() => onDecide?.("approve")}
+          onPress={onApprove}
         />
       </View>
     </View>
@@ -154,9 +283,11 @@ export function ToolApprovalCard(props: ToolApprovalCardProps) {
 
 export type ToolDraftCardProps = ToolApprovalCardProps & {
   editLabel?: string;
+  /** The draft fields. Shows them as a preview and, under Edit, as inputs. Without them Edit reports `"edit"`. */
+  fields?: readonly DraftField[];
 };
 
 /** As `ToolApprovalCard`, plus an Edit button that reports `"edit"`, for a draft the reader may change first. */
 export function ToolDraftCard({ testID = "tool-draft-card", ...props }: ToolDraftCardProps) {
-  return <ToolCardBase {...props} testID={testID} allowEdit heading="Draft for review" />;
+  return <ToolCardBase {...props} testID={testID} allowEdit heading="Draft for review" metaNote="Nothing is sent until you press Send" />;
 }

package/src/ai/trace.tsx

@@ -2,7 +2,7 @@ import { createContext, useContext, type ComponentType, type ReactNode } from "r
 import { Pressable, Text, View, type ViewProps } from "react-native";
 import type { IconProps } from "@tabler/icons-react-native";
 import { cn } from "../cn";
-import { sizeStyle, touchSlop } from "../controlStyles";
+import { sizeStyle } from "../controlStyles";
 import { palette } from "../palette";
 import { useLargerText } from "../theme";
 import { tokens } from "../tokens";
@@ -40,9 +40,13 @@ function useTraceColor() {
   return useContext(TraceLineColorContext) ?? tokens.color.muted[scheme];
 }
 
-/** A column of trace lines (web `flex w-full flex-col gap-2`). */
+/**
+ * A column of trace lines (web `flex w-full flex-col gap-2`). Each line is 28
+ * high (its `py-1` around the 20 text) with no gap, so the rows keep the web
+ * 28 pitch and each is its whole tap area, without slop over its neighbours.
+ */
 export function AgentTrace({ className, ...props }: ViewProps & { className?: string }) {
-  return <View className={cn("w-full min-w-0 gap-2", className)} {...props} />;
+  return <View className={cn("w-full min-w-0", className)} {...props} />;
 }
 
 export type AgentTraceLineProps = ViewProps & {
@@ -50,13 +54,13 @@ export type AgentTraceLineProps = ViewProps & {
   className?: string;
 };
 
-/** One line: a row of icon, title and description. `pending` fades it to 60%, `error` turns it the danger colour. */
+/** One line, 28 high (`py-1`): a row of icon, title and description. `pending` fades it to 60%, `error` turns it the danger colour. */
 export function AgentTraceLine({ status, className, style, ...props }: AgentTraceLineProps) {
   const scheme = useScheme();
   return (
     <TraceLineColorContext.Provider value={traceLineColor(status, scheme)}>
       <View
-        className={cn("min-w-0 max-w-full shrink flex-row items-center gap-2", className)}
+        className={cn("min-w-0 max-w-full shrink flex-row items-center gap-2 py-1", className)}
         style={[status === "pending" ? { opacity: 0.6 } : null, style]}
         {...props}
       />
@@ -149,7 +153,17 @@ export type AgentTraceCollapsibleTriggerProps = CollapsibleTriggerProps & {
   trailing?: ReactNode;
 };
 
-/** The line as a toggle, with a chevron after it that turns down when open. */
+/** No slop: the 28 high line is the whole target, as trace lines stack with no gap. */
+const LINE_SLOP = { top: 0, bottom: 0, left: 0, right: 0 } as const;
+
+/** The chevron's slop: 4 back toward the line, 14 on past it (a 34 wide target), none above or below. */
+const CHEVRON_SLOP = { top: 0, bottom: 0, left: 4, right: 14 } as const;
+
+/**
+ * The line as a toggle, with a chevron after it that turns down when open.
+ * The trigger stretches to the line's 28 height and takes no slop above or
+ * below, so a tap under one line never opens the next.
+ */
 export function AgentTraceCollapsibleTrigger({
   children,
   trailing,
@@ -166,6 +180,7 @@ export function AgentTraceCollapsibleTrigger({
   if (trailing === undefined) {
     return (
       <CollapsibleTrigger
+        hitSlop={LINE_SLOP}
         className={cn("max-w-full flex-row items-center gap-1 self-start", className)}
         {...props}
       >
@@ -176,7 +191,7 @@ export function AgentTraceCollapsibleTrigger({
   }
   return (
     <View className={cn("max-w-full flex-row items-center gap-2 self-start", className)}>
-      <CollapsibleTrigger className="min-w-0 shrink flex-row items-center" {...props}>
+      <CollapsibleTrigger hitSlop={LINE_SLOP} className="min-w-0 shrink flex-row items-center self-stretch" {...props}>
         {children}
       </CollapsibleTrigger>
       {trailing}
@@ -184,8 +199,9 @@ export function AgentTraceCollapsibleTrigger({
       <Pressable
         accessible={false}
         importantForAccessibility="no-hide-descendants"
-        hitSlop={touchSlop(iconSize)}
+        hitSlop={CHEVRON_SLOP}
         onPress={() => setOpen(!open)}
+        className="self-stretch justify-center"
       >
         {chevron}
       </Pressable>
@@ -210,7 +226,7 @@ export function AgentTraceCollapsibleContent({
   return (
     <CollapsibleContent>
       <View
-        className={cn("mb-1 mt-2 min-w-0 pl-4 pr-1", className)}
+        className={cn("mb-2 mt-1 min-w-0 pl-4 pr-1", className)}
         style={[
           {
             marginLeft: iconSize / 2 - 1,
@@ -234,31 +250,52 @@ export function AgentTraceCollapsibleContent({
 }
 
 export type AgentTraceFoldProps = Omit<CollapsibleProps, "children"> & {
-  /** How long the turn ran, in seconds. The title reads "Worked for 1m 5s". */
-  seconds: number;
   /** The settled turn's steps, shown in an `AgentTrace` when open. */
   children: ReactNode;
-};
+} & (
+    | {
+        /** How long the turn ran, in seconds. The title reads "Worked for 1m 5s" (`formatElapsed`). */
+        seconds: number;
+        duration?: never;
+      }
+    | {
+        /**
+         * The duration already formatted, as the web `ActivityTasks` `duration`:
+         * the title reads "Worked for " and this. For an app's own formatter.
+         */
+        duration: string;
+        seconds?: never;
+      }
+  );
 
 /**
  * A settled turn folded behind one line, as the web `ActivityTasks` in its
  * folded (Codex-style) mode: "Worked for …" over a hairline
- * (`border-b border-border pb-1.5`), closed by default, and the steps in an
+ * 6 below the text (web `border-b border-border pb-1.5`: the line's own 4 and
+ * 2 more), closed by default, and the steps in an
  * `AgentTrace` 8 below when open.
  */
-export function AgentTraceFold({ seconds, children, defaultOpen = false, className, ...props }: AgentTraceFoldProps) {
+export function AgentTraceFold({
+  seconds,
+  duration,
+  children,
+  defaultOpen = false,
+  className,
+  ...props
+}: AgentTraceFoldProps) {
   const scheme = useScheme();
+  const elapsed = duration ?? formatElapsed(seconds ?? 0);
   return (
     <Collapsible className={cn("w-full min-w-0", className)} defaultOpen={defaultOpen} {...props}>
-      <View style={{ borderBottomWidth: 1, borderBottomColor: tokens.color.border[scheme], paddingBottom: 6 }}>
+      <View style={{ borderBottomWidth: 1, borderBottomColor: tokens.color.border[scheme], paddingBottom: 2 }}>
         <AgentTraceCollapsibleTrigger>
           <AgentTraceLine>
-            <AgentTraceTitle>{`Worked for ${formatElapsed(seconds)}`}</AgentTraceTitle>
+            <AgentTraceTitle>{`Worked for ${elapsed}`}</AgentTraceTitle>
           </AgentTraceLine>
         </AgentTraceCollapsibleTrigger>
       </View>
       <CollapsibleContent>
-        <AgentTrace className="mt-2">{children}</AgentTrace>
+        <AgentTrace className="mt-1">{children}</AgentTrace>
       </CollapsibleContent>
     </Collapsible>
   );