@vvedantb/native-ui 0.17.0 → 0.17.1

package/README.md

@@ -542,8 +542,8 @@ import {
 | `ChainOfThought` and its parts | Simplified: header, steps with a rail, search-result chips. |
 | `PromptInput`, `PromptInputButton`, `PromptInputSubmit` | The web field surface with a `header` slot (attachments), a field, a `toolbar` slot and the send button. The field grows from one line to 160 high (about 6 lines), then scrolls (auto-grow in both layouts from 0.12.1; send resets the height, and from 0.14.0 so does clearing the field). On web a multiline field is one row to start (0.14.0). Send is primary, and from 0.14.0 it stays primary and fades when there is nothing to send, as the web send button (before, it turned `secondary`). While `status` is `submitted` or `streaming` it is a "Stop" square that calls `onStop`. It sits in a `KeyboardAvoidingView` (padding, on iOS and Android) and pads the safe-area insets: put it last in a full-height column. Under a navigation header, pass the header height as `keyboardVerticalOffset`; above a tab bar, pass `safeBottom={false}`. |
 | `MessageActionSheet`, `ReplyQuoteChip`, `MessageQuote` (0.13.0) | Quoted replies. Long-press a `Message` with `actions` to open the sheet; Reply first, then Copy. Pass `<ReplyQuoteChip author text onDismiss />` as `PromptInput` `replyTo`; send the reply with a `MessageQuote` in `MessageContent` `quote`. See [Quoted replies](#quoted-replies-0130). |
-| `ToolApprovalCard`, `ToolDraftCard` (0.13.0) | A pending tool call: name, cut args summary, Deny and Approve (`ToolDraftCard` adds Edit). `onDecide("approve" \| "deny" \| "edit")`; `pending` or `disabled` turns the buttons off. |
-| `SubagentRunCard`, `SubagentResultCard` (0.13.0) | A subagent run (title, status pill, elapsed, Cancel while `running`) and its result (summary, detail in a fold). |
+| `ToolApprovalCard`, `ToolDraftCard` (0.13.0) | A pending tool call: name, cut args summary, Deny and Approve (`ToolDraftCard` adds Edit). `onDecide("approve" \| "deny" \| "edit", edits?)`; `pending` or `disabled` turns the buttons off. Optional chrome: `server`, `routineMode`, `expiresLabel`, `target`, `meta`, `chrome`. `ToolDraftCard` `fields` (`DraftField[]`) shows the draft and an inline editor under Edit; Approve then passes `changedDraftEdits` as `edits`. |
+| `SubagentRunCard`, `SubagentResultCard` (0.13.0) | A subagent run (title, status pill, elapsed, Cancel while `queued` or `running`; statuses `queued`, `running`, `done`, `failed`, `cancelled`, `timed_out`; optional `statusLine`, `error`, `avatar`) and its result (summary, detail in a fold; optional `approvalPending`, `approvalPendingIn`, `handoffs`, `avatar`). |
 | `MessageBotLabel`, `Message` `bot` (0.13.0) | Which bot sent an assistant message, for group chats: `bot={{ name, avatar }}`, or render `MessageBotLabel` above `MessageContent`. |
 | `PromptInput layout="inline"` | One row, as the web `Composer layout="inline"`: `leading` (such as a + button), the field (one line to start, then it grows from 0.12.1), `toolbar`, then send, in a 20-radius field with `p-1.5`. The field is the web `text-sm leading-6` (14 / 24) from 0.14.0. `shape="pill"` (0.14.0) is Eva's web chat composer: 48 high on one line, radius 24, a 14 / 20 field 36 high and a 36 send button; give the + `variant="secondary"`. |
 | `Suggestions`, `Suggestion` | A horizontal row of round chips (or `orientation="vertical"`). `onPress` gets the suggestion text. |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/native-ui",
-  "version": "0.17.0",
+  "version": "0.17.1",
   "license": "MIT",
   "description": "Shared React Native / Expo UI primitives. Floating surfaces, forms, overlays, toasts, settings chrome, tab bar, AI chat parts, the family app marks, a NativeWind preset, the Expo web root and Clerk + Convex auth screens.",
   "type": "module",

package/src/ai/collapsible.tsx

@@ -1,7 +1,7 @@
 import { createContext, useContext, type ReactNode } from "react";
 import { Pressable, View, type PressableProps, type ViewProps } from "react-native";
 import { IconChevronDown, IconChevronRight } from "@tabler/icons-react-native";
-import Animated, { cubicBezier } from "react-native-reanimated";
+import Animated from "react-native-reanimated";
 import { cn } from "../cn";
 import { MIN_TOUCH_TARGET, touchSlop } from "../controlStyles";
 import { useControllableState } from "../primitives/use-controllable-state";
@@ -13,11 +13,15 @@ import { useReduceMotion } from "../useReduceMotion";
 // opening, a virtualised row scrolled back). The chevron turns in 150 ms; with
 // Reduce Motion it changes in place.
 
-/** The web chevron: `transition-transform duration-150`, on the strong ease-out. */
+/**
+ * The web chevron: `transition-transform duration-150`. The curve is the
+ * predefined `ease-out`: a `cubicBezier(...)` value in an `Animated.View`
+ * style does not typecheck against `react-native-reanimated` 4.3.
+ */
 const CHEVRON_TURN = {
   transitionProperty: "transform",
   transitionDuration: 150,
-  transitionTimingFunction: cubicBezier(0.23, 1, 0.32, 1),
+  transitionTimingFunction: "ease-out",
 } as const;
 
 type CollapsibleContextValue = { open: boolean; setOpen: (open: boolean) => void };

package/src/ai/conversation.tsx

@@ -62,9 +62,13 @@ export function isScrolledToBottom(
 /**
  * What the thread scrolls with: the `ScrollView` of `ConversationContent` or
  * the `FlatList` of `ConversationList`. `scrollToEnd` goes to the newest
- * message, which is offset 0 in an inverted list.
+ * message, which is offset 0 in an inverted list. `scrollTo` goes to an
+ * offset; only the `ScrollView` has it, so call it as `scrollTo?.(...)`.
  */
-export type ConversationScroller = { scrollToEnd: (options?: { animated?: boolean }) => void };
+export type ConversationScroller = {
+  scrollToEnd: (options?: { animated?: boolean }) => void;
+  scrollTo?: (options: { y: number; animated?: boolean }) => void;
+};
 
 type ConversationContextValue = {
   isAtBottom: boolean;

package/src/ai/index.ts

@@ -183,7 +183,21 @@ export { ActivityStepDetail } from "./activity-step-detail";
 export type { ActivityStepDetailProps, ActivityStepDetailStep } from "./activity-step-detail";
 export { UnifiedDiff, DiffStat, UNIFIED_DIFF } from "./unified-diff";
 export type { UnifiedDiffProps, UnifiedDiffLine, DiffStatProps } from "./unified-diff";
-export { ToolApprovalCard, ToolDraftCard, summarizeArgs, ARGS_MAX_CHARS } from "./tool-approval-card";
-export type { ToolApprovalCardProps, ToolDraftCardProps, ToolDecision } from "./tool-approval-card";
+export {
+  ToolApprovalCard,
+  ToolDraftCard,
+  summarizeArgs,
+  ARGS_MAX_CHARS,
+  changedDraftEdits,
+  DRAFT_ROLE_LABELS,
+} from "./tool-approval-card";
+export type {
+  ToolApprovalCardProps,
+  ToolDraftCardProps,
+  ToolDecision,
+  DraftField,
+  DraftFieldRole,
+  DraftEdit,
+} from "./tool-approval-card";
 export { SubagentRunCard, SubagentResultCard, subagentStatusColors } from "./subagent-cards";
-export type { SubagentRunCardProps, SubagentResultCardProps, SubagentStatus } from "./subagent-cards";
+export type { SubagentRunCardProps, SubagentResultCardProps, SubagentStatus, SubagentHandoff } from "./subagent-cards";

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/examples/AiChatGallery.tsx

@@ -39,10 +39,17 @@ import {
   SourcesTrigger,
   Suggestion,
   Suggestions,
+  SubagentResultCard,
+  SubagentRunCard,
+  ToolApprovalCard,
+  ToolDraftCard,
   formatElapsed,
   useStreamingDisclosure,
   type AttachmentData,
   type ChatStatus,
+  type DraftEdit,
+  type DraftField,
+  type SubagentStatus,
 } from "../ai";
 
 const SUGGESTIONS = [
@@ -73,6 +80,68 @@ const STREAMING_REASONING =
  * reasoning and trace, reply, code, sources and actions), a second user
  * message, and an assistant message that is still working while `streaming`.
  */
+const DRAFT_FIELDS: DraftField[] = [
+  { key: "to", role: "to", value: "team@example.com" },
+  { key: "subject", role: "subject", value: "Weekly plan" },
+  { key: "body", role: "body", value: "Here is the plan for next week." },
+];
+
+const RUN_STATUSES: SubagentStatus[] = ["queued", "running", "done", "failed", "cancelled", "timed_out"];
+
+/** Tool approval, draft and subagent cards, with testIDs for E2E. */
+export function AiCardSamples() {
+  const [decision, setDecision] = useState("none");
+  const [cancelled, setCancelled] = useState(false);
+  const decide = (name: string) => (choice: string, edits?: DraftEdit[]) =>
+    setDecision(`${name}:${choice}${edits ? `:${JSON.stringify(edits)}` : ""}`);
+  return (
+    <>
+      <ResponseText>{`Last decision: ${decision}`}</ResponseText>
+      <ToolApprovalCard
+        testID="gallery-approval"
+        toolName="create_task"
+        args={{ title: "Review plan" }}
+        server="tasks"
+        routineMode
+        expiresLabel="tomorrow"
+        target="Project board"
+        onDecide={decide("approval")}
+      />
+      <ToolDraftCard
+        testID="gallery-draft"
+        toolName="send_message"
+        fields={DRAFT_FIELDS}
+        server="mail"
+        expiresLabel="in 2 hours"
+        approveLabel="Send"
+        denyLabel="Discard"
+        onDecide={decide("draft")}
+      />
+      {RUN_STATUSES.map((status) => (
+        <SubagentRunCard
+          key={status}
+          testID={`gallery-run-${status}`}
+          title="Research"
+          status={status}
+          elapsedSeconds={65}
+          statusLine={status === "running" ? "Step 2 of 4" : undefined}
+          error={status === "failed" ? "The source could not be reached." : undefined}
+          onCancel={() => setCancelled(true)}
+        />
+      ))}
+      <ResponseText>{`Cancelled: ${cancelled ? "yes" : "no"}`}</ResponseText>
+      <SubagentResultCard
+        testID="gallery-result"
+        title="Research"
+        summary="Three sources found."
+        approvalPending
+        approvalPendingIn="Planner"
+        handoffs={[{ toolName: "create_task", server: "tasks", argsSummary: '{"title":"Review plan"}' }]}
+      />
+    </>
+  );
+}
+
 export function AiChatSamples({ streaming = true }: { streaming?: boolean }) {
   const [feedback, setFeedback] = useState<"like" | "dislike" | null>(null);
   const searchFold = useStreamingDisclosure(streaming);
@@ -164,6 +233,7 @@ export function AiChatSamples({ streaming = true }: { streaming?: boolean }) {
           )}
         </MessageContent>
       </Message>
+      <AiCardSamples />
     </>
   );
 }