@vvedantb/native-ui 0.12.1 → 0.13.0

package/README.md

@@ -514,12 +514,16 @@ import {
 | Part | Notes |
 | --- | --- |
 | `Conversation`, `ConversationContent`, `ConversationEmptyState`, `ConversationScrollButton`, `useConversation` | A `ScrollView` that sticks to the bottom: while the reader is within 70 of the end, new and growing messages stay in view. Once they drag up it stops following, and the scroll button shows: a round outline arrow (40, slop to 48), 16 above the bottom, with an opaque fill and no shadow. Pressing it scrolls down (a jump with Reduce Motion). For very long threads, drive a `FlatList` with `useConversation`. |
-| `Message`, `MessageContent`, `MessageActionsBar`, `MessageAction` | A user message is the web primary bubble (radius 16, bottom-right 14, `px-4 py-3`) at the end of the row; an assistant message has no fill. `MessageAction` is a ghost icon button at the web `icon-sm` size (32, slop to 44). `kind` gives the icon and label: "Copy", "Retry", "Good response", "Bad response". `selected` marks chosen feedback. |
+| `Message`, `MessageContent`, `MessageActionsBar`, `MessageAction` | (0.13.0: `Message` `onLongPress`, `actions`, `highlighted`; `MessageContent` `quote`; the `reply` kind.) A user message is the web primary bubble (radius 16, bottom-right 14, `px-4 py-3`) at the end of the row; an assistant message has no fill. `MessageAction` is a ghost icon button at the web `icon-sm` size (32, slop to 44). `kind` gives the icon and label: "Copy", "Retry", "Good response", "Bad response". `selected` marks chosen feedback. |
 | `Reasoning`, `ReasoningTrigger`, `ReasoningContent`, `useReasoning` | Opens when streaming starts, times the stream and closes once, a second after it stops. The trigger shows a brain, the shimmering "Thinking…", then "Thought for 12s", and a chevron. The content is muted monospace text on the web `bg-surface-secondary/40` panel. Unlike the web, a reader can close it while it streams. |
 | `AgentTrace`, `AgentTraceLine`, `AgentTraceIcon`, `AgentTraceTitle`, `AgentTraceDescription`, `AgentTraceCollapsible*` | One step per line, with an optional fold behind a rail. `AgentTraceTitle shimmer` pulses a running step. Spread `useStreamingDisclosure(isStreaming)` on `AgentTraceCollapsible` to open it while a step streams. |
 | `ActivityStep` | One tool step as a trace line: icon, label, a spinner while `running`, a check when `complete`, a warning on `error`, and a description such as `` `Worked for ${formatElapsed(12)}` ``. |
 | `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). Send is primary with text and disabled without. 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). |
+| `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"` (Eva's chat pill): `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`. 44 high on one line. |
 | `Suggestions`, `Suggestion` | A horizontal row of round chips (or `orientation="vertical"`). `onPress` gets the suggestion text. |
 | `Sources`, `SourcesTrigger`, `SourcesContent`, `Source` | A fold of link rows. A row opens its address with `Linking.openURL`, or hands it to `onPress`. |
@@ -542,6 +546,44 @@ Every control has a role, an accessible name and a 44 pt target. Folds report `e
 
 `@vvedantb/native-ui/ai-gallery` exports `AiChatGallery`, a full chat screen with a sample thread: a user message, a finished assistant message with folded reasoning and trace, code, sources and actions, and a second answer that streams with its reasoning open until you press Stop. It also has suggestions and the composer with sample attachments. Put it in a dev-only route with a `SafeAreaProvider` above it. `ParityGallery` shows the same thread (`AiChatSamples`) in its "AI chat" section.
 
+
+### Quoted replies (0.13.0)
+
+Building blocks only: the app owns the reply state and the scroll. No new dependency. `expo-haptics` (optional peer) gives a selection haptic when the sheet opens.
+
+```tsx
+import {
+  Message, MessageContent, MessageQuote, PromptInput, ReplyQuoteChip, MESSAGE_ACTIONS,
+} from "@vvedantb/native-ui/ai";
+
+<Message
+  from="user"
+  highlighted={highlightedId === item.id}
+  actions={[
+    { key: "reply", label: "Reply", icon: MESSAGE_ACTIONS.reply.icon, onPress: () => setReplyTo(item) },
+    { key: "copy", label: "Copy", icon: MESSAGE_ACTIONS.copy.icon, onPress: () => copy(item.text) },
+    { key: "delete", label: "Delete", destructive: true, onPress: () => remove(item) },
+  ]}
+>
+  <MessageContent
+    quote={item.quoted ? <MessageQuote author={item.quoted.author} text={item.quoted.text} onPress={() => jumpTo(item.quoted.id)} /> : undefined}
+  >
+    {item.text}
+  </MessageContent>
+</Message>
+
+<PromptInput
+  onSubmit={send}
+  replyTo={replyTo ? <ReplyQuoteChip author={replyTo.author} text={replyTo.text} onDismiss={() => setReplyTo(null)} /> : undefined}
+/>
+```
+
+- `Message`: `onLongPress`, `actions` (`{ key, label, icon?, destructive?, onPress }[]`), `actionSheetTitle`, `highlighted`. With neither `onLongPress` nor `actions` it is the same `View` as before. With either it is a `Pressable` with the same layout and view props, and it stays a non-accessible container so inner buttons keep focus: also offer Reply in a `MessageActionsBar` for screen reader users. `highlighted` draws a primary wash that fades over 1.4 seconds (`MESSAGE_HIGHLIGHT_MS`) and a ring while true; with Reduce Motion it holds still. Set it back to `false` after the scroll.
+- `MessageActionSheet` (`open`, `onClose`, `actions`, `title`, `cancelLabel`, `testID`): an RN `Modal` bottom sheet, no `@gorhom/bottom-sheet`. Closes on the backdrop, Cancel, Android back and after an action. Destructive rows use the danger colour. Rows are 48 high (56 with larger text).
+- `ReplyQuoteChip` (`author`, `text`, `onDismiss`, `dismissLabel`, `accessibilityLabel`, `testID`): author and up to two lines of text, with an X (44 point target, "Dismiss reply quote"). Labelled "Replying to {author}". `PromptInput` `replyTo` draws it above `header`; passing it as `header` works too.
+- `MessageQuote` (`author`, `text`, `onPress`, `accessibilityLabel`, `testID`): a left border, the author and up to two lines. With `onPress` it is a button.
+- Bot label in a group chat (0.13.0): `<Message from="assistant" bot={{ name: "Planner", avatar: <Avatar size="xs" /> }}>`. Or leave `Message` alone and render `<MessageBotLabel name="Planner" />` above `MessageContent` in `ChatThread` `renderMessage`. `ChatThread` needs no change.
+
 ## DropdownMenu (Unreleased)
 
 A small menu anchored to its trigger, the native counterpart of the web `DropdownMenu`. On `/primitives` and the root. From 0.12.1 the backdrop and menu sit in a full-size `View` inside the `Modal`, so the menu stays above tab bars and glass layers.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/native-ui",
-  "version": "0.12.1",
+  "version": "0.13.0",
   "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/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/index.ts

@@ -35,7 +35,9 @@ export {
   MessageActionsBar,
   MessageAction,
   MessageMeta,
+  MessageBotLabel,
   MESSAGE_ACTIONS,
+  MESSAGE_HIGHLIGHT_MS,
   userBubbleStyle,
   tintBubbleStyle,
 } from "./message";
@@ -46,9 +48,17 @@ export type {
   MessageBubble,
   MessageActionsBarProps,
   MessageMetaProps,
+  MessageBot,
+  MessageBotLabelProps,
   MessageActionKind,
   MessageActionProps,
 } from "./message";
+export { MessageActionSheet } from "./message-action-sheet";
+export type { MessageActionSheetProps, MessageSheetAction } from "./message-action-sheet";
+export { ReplyQuoteChip } from "./reply-quote-chip";
+export type { ReplyQuoteChipProps } from "./reply-quote-chip";
+export { MessageQuote, QUOTE_MAX_LINES } from "./message-quote";
+export type { MessageQuoteProps } from "./message-quote";
 export {
   Reasoning,
   ReasoningTrigger,
@@ -136,3 +146,7 @@ export { ChoiceQuestion, choiceAnswers } from "./choice-question";
 export type { ChoiceQuestionProps, ChoiceQuestionItem } from "./choice-question";
 export { ActivityStepDetail } from "./activity-step-detail";
 export type { ActivityStepDetailProps, ActivityStepDetailStep } from "./activity-step-detail";
+export { ToolApprovalCard, ToolDraftCard, summarizeArgs, ARGS_MAX_CHARS } from "./tool-approval-card";
+export type { ToolApprovalCardProps, ToolDraftCardProps, ToolDecision } from "./tool-approval-card";
+export { SubagentRunCard, SubagentResultCard, subagentStatusColors } from "./subagent-cards";
+export type { SubagentRunCardProps, SubagentResultCardProps, SubagentStatus } from "./subagent-cards";

package/src/ai/message-action-sheet.tsx

@@ -0,0 +1,165 @@
+import { useEffect, type ComponentType } from "react";
+import { Modal, Pressable, StyleSheet, Text, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import type { IconProps } from "@tabler/icons-react-native";
+import { cn } from "../cn";
+import { MIN_TOUCH_TARGET, sizeStyle, textStyle, touchSlop, typeStyle } from "../controlStyles";
+import { selectionHaptic } from "../haptics";
+import { palette } from "../palette";
+import { useLargerText } from "../theme";
+import { tokens } from "../tokens";
+import { useReduceMotion } from "../useReduceMotion";
+import { useScheme } from "../useScheme";
+import { chatTextSize } from "./chat-text";
+
+/** One row of `MessageActionSheet`. */
+export type MessageSheetAction = {
+  key: string;
+  label: string;
+  icon?: ComponentType<IconProps>;
+  /** Draws the row in the danger colour, such as Delete. */
+  destructive?: boolean;
+  onPress: () => void;
+};
+
+export type MessageActionSheetProps = {
+  open: boolean;
+  /** Called on a backdrop tap, Cancel, Android back and after an action runs. */
+  onClose: () => void;
+  actions: MessageSheetAction[];
+  /** Shown above the rows, and names the sheet for VoiceOver and TalkBack. Default "Message actions". */
+  title?: string;
+  /** Default "Cancel". */
+  cancelLabel?: string;
+  testID?: string;
+};
+
+/**
+ * The sheet that opens on a long press of a chat message: a bottom sheet in
+ * an RN `Modal` (no `@gorhom/bottom-sheet`) with one pressable row per action
+ * and a Cancel row. It closes on the backdrop, Cancel, Android back and after
+ * an action. A `selectionHaptic()` fires when it opens (`expo-haptics` is an
+ * optional peer). Row testIDs are `{testID}-action-{key}`.
+ */
+export function MessageActionSheet({
+  open,
+  onClose,
+  actions,
+  title = "Message actions",
+  cancelLabel = "Cancel",
+  testID = "message-action-sheet",
+}: MessageActionSheetProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const insets = useSafeAreaInsets();
+  const reduceMotion = useReduceMotion();
+
+  useEffect(() => {
+    if (open) selectionHaptic();
+  }, [open]);
+
+  const caption = chatTextSize("caption", largerText);
+  const body = chatTextSize("body", largerText);
+  const minHeight = largerText ? 56 : MIN_TOUCH_TARGET + 4;
+
+  return (
+    <Modal
+      visible={open}
+      transparent
+      animationType={reduceMotion ? "none" : "fade"}
+      statusBarTranslucent
+      onRequestClose={onClose}
+    >
+      <Pressable
+        testID={`${testID}-backdrop`}
+        accessibilityRole="button"
+        accessibilityLabel="Close"
+        onPress={onClose}
+        hitSlop={touchSlop(MIN_TOUCH_TARGET)}
+        style={[StyleSheet.absoluteFill, { backgroundColor: palette.backdrop[scheme] }]}
+      />
+      <View pointerEvents="box-none" style={styles.anchor}>
+        <View
+          testID={testID}
+          accessibilityViewIsModal
+          accessibilityLabel={title}
+          onAccessibilityEscape={onClose}
+          className="w-full self-center px-2"
+          style={{ maxWidth: 480, paddingBottom: insets.bottom + 8 }}
+        >
+          <View
+            className="overflow-hidden"
+            style={{ backgroundColor: tokens.color.surface[scheme], borderRadius: tokens.radius.card }}
+          >
+            <Text
+              accessibilityRole="header"
+              numberOfLines={1}
+              className={cn(caption, "px-4 pb-1 pt-3 font-instrument-sans-medium")}
+              style={[sizeStyle(caption), typeStyle("medium"), textStyle("muted", scheme)]}
+            >
+              {title}
+            </Text>
+            {actions.map((action, index) => {
+              const Icon = action.icon;
+              const color = action.destructive ? palette.danger[scheme] : tokens.color.foreground[scheme];
+              return (
+                <Pressable
+                  key={action.key}
+                  testID={`${testID}-action-${action.key}`}
+                  accessibilityRole="button"
+                  accessibilityLabel={action.label}
+                  hitSlop={touchSlop(MIN_TOUCH_TARGET)}
+                  onPress={() => {
+                    onClose();
+                    action.onPress();
+                  }}
+                  className="flex-row items-center gap-3 px-4"
+                  style={[
+                    { minHeight },
+                    index > 0 && {
+                      borderTopWidth: StyleSheet.hairlineWidth,
+                      borderTopColor: tokens.color.separator[scheme],
+                    },
+                  ]}
+                >
+                  {Icon ? <Icon size={largerText ? 22 : 20} color={color} /> : null}
+                  <Text
+                    numberOfLines={1}
+                    className={cn(body, "min-w-0 flex-1 font-instrument-sans-medium")}
+                    style={[sizeStyle(body), typeStyle("medium"), { color }]}
+                  >
+                    {action.label}
+                  </Text>
+                </Pressable>
+              );
+            })}
+          </View>
+          <Pressable
+            testID={`${testID}-cancel`}
+            accessibilityRole="button"
+            accessibilityLabel={cancelLabel}
+            onPress={onClose}
+            hitSlop={touchSlop(MIN_TOUCH_TARGET)}
+            className="mt-2 items-center justify-center"
+            style={{
+              minHeight,
+              backgroundColor: tokens.color.surface[scheme],
+              borderRadius: tokens.radius.card,
+            }}
+          >
+            <Text
+              className={cn(body, "font-instrument-sans-semibold")}
+              style={[sizeStyle(body), typeStyle("semibold"), textStyle("foreground", scheme)]}
+            >
+              {cancelLabel}
+            </Text>
+          </Pressable>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  anchor: { flex: 1, justifyContent: "flex-end" },
+});

package/src/ai/message-quote.tsx

@@ -0,0 +1,98 @@
+import { useContext } from "react";
+import { Pressable, Text, View } from "react-native";
+import { cn } from "../cn";
+import { MIN_TOUCH_TARGET, sizeStyle, textStyle, touchSlop, typeStyle } from "../controlStyles";
+import { withAlpha } from "../palette";
+import { useLargerText } from "../theme";
+import { useScheme } from "../useScheme";
+import { chatTextSize } from "./chat-text";
+import { ChatTextColorContext } from "./response-text";
+
+export type MessageQuoteProps = {
+  /** Who wrote the quoted message, such as "You" or the bot name. */
+  author: string;
+  /** The quoted text. Shown on up to two lines. */
+  text: string;
+  /** Makes the quote a button, so the app can scroll to and highlight the original. */
+  onPress?: () => void;
+  /** Names the button. Default "Go to quoted message from {author}". Used with `onPress` only. */
+  accessibilityLabel?: string;
+  className?: string;
+  testID?: string;
+};
+
+/** Lines of the quoted text before it is cut with an ellipsis. */
+export const QUOTE_MAX_LINES = 2;
+
+/**
+ * A compact quote inside a message bubble, above the message text: a left
+ * border, the author in the caption size and the quoted text on up to two
+ * lines. It takes its colour from the enclosing `MessageContent`, so it reads
+ * on the primary user bubble as well as on the tint and assistant ones. With
+ * `onPress` it is a button (44 point minimum height).
+ */
+export function MessageQuote({
+  author,
+  text,
+  onPress,
+  accessibilityLabel,
+  className,
+  testID,
+}: MessageQuoteProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const inherited = useContext(ChatTextColorContext);
+  const color = inherited ?? textStyle("foreground", scheme).color;
+  const caption = chatTextSize("caption", largerText);
+  const body = chatTextSize("small", largerText);
+  const content = (
+    <>
+      <Text
+        numberOfLines={1}
+        className={cn(caption, "font-instrument-sans-semibold")}
+        style={[sizeStyle(caption), typeStyle("semibold"), { color: withAlpha(color, 0.75) }]}
+      >
+        {author}
+      </Text>
+      <Text
+        numberOfLines={QUOTE_MAX_LINES}
+        className={cn(body, "font-instrument-sans")}
+        style={[sizeStyle(body), { color: withAlpha(color, 0.9) }]}
+      >
+        {text}
+      </Text>
+    </>
+  );
+  const style = {
+    borderLeftWidth: 3,
+    borderLeftColor: withAlpha(color, 0.45),
+    borderRadius: 4,
+  };
+  if (!onPress) {
+    return (
+      <View
+        testID={testID}
+        accessible
+        accessibilityLabel={`Quoted message from ${author}: ${text}`}
+        className={cn("min-w-0 gap-0.5 py-0.5 pl-2.5", className)}
+        style={style}
+      >
+        {content}
+      </View>
+    );
+  }
+  return (
+    <Pressable
+      testID={testID}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel ?? `Go to quoted message from ${author}`}
+      accessibilityHint={text}
+      onPress={onPress}
+      hitSlop={touchSlop(MIN_TOUCH_TARGET)}
+      className={cn("min-h-11 min-w-0 justify-center gap-0.5 py-0.5 pl-2.5", className)}
+      style={style}
+    >
+      {content}
+    </Pressable>
+  );
+}

package/src/ai/message.tsx

@@ -1,6 +1,8 @@
-import { createContext, useContext, type ComponentType, type ReactNode } from "react";
-import { Text, View, type ViewProps } from "react-native";
+import { createContext, useContext, useEffect, useState, type ComponentType, type ReactNode } from "react";
+import { Pressable, StyleSheet, Text, View, type ViewProps } from "react-native";
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
 import {
+  IconArrowBackUp,
   IconCopy,
   IconRefresh,
   IconThumbDown,
@@ -8,13 +10,15 @@ import {
   type IconProps,
 } from "@tabler/icons-react-native";
 import { cn } from "../cn";
-import { sizeStyle } from "../controlStyles";
+import { sizeStyle, typeStyle } from "../controlStyles";
 import { palette, withAlpha } from "../palette";
 import { useLargerText } from "../theme";
 import { tokens } from "../tokens";
+import { useReduceMotion } from "../useReduceMotion";
 import { useScheme } from "../useScheme";
 import { chatTextSize } from "./chat-text";
 import { ChatIconButton } from "./icon-button";
+import { MessageActionSheet, type MessageSheetAction } from "./message-action-sheet";
 import { ChatTextColorContext, ResponseText } from "./response-text";
 
 export type MessageRole = "user" | "assistant" | "system";
@@ -24,25 +28,140 @@ const MessageContext = createContext<MessageRole>("assistant");
 export type MessageProps = ViewProps & {
   from: MessageRole;
   className?: string;
+  /**
+   * Called on a long press of the message. Without it (and without `actions`)
+   * the message is a plain `View`, as before.
+   */
+  onLongPress?: () => void;
+  /**
+   * Actions for a `MessageActionSheet` that opens on a long press, such as
+   * Reply and Copy. `onLongPress` also runs, before the sheet opens.
+   */
+  actions?: MessageSheetAction[];
+  /** Title of the action sheet. Default "Message actions". */
+  actionSheetTitle?: string;
+  /**
+   * True while the message is the target of a quote tap: a primary wash that
+   * fades over about 1.4 seconds, and a ring while it stays true. Set it back
+   * to `false` after the scroll, about 1.5 seconds later.
+   */
+  highlighted?: boolean;
+  /**
+   * For group chats: which bot sent this message. Draws a `MessageBotLabel`
+   * (avatar and name) above the content. Only when set; assistant messages only.
+   */
+  bot?: MessageBot;
 };
 
+/** The bot behind an incoming message in a group chat. */
+export type MessageBot = { name: string; avatar?: ReactNode };
+
+/** How long the highlight wash takes to fade, in milliseconds. */
+export const MESSAGE_HIGHLIGHT_MS = 1400;
+
+/** Peak opacity of the highlight wash (the primary colour). */
+const HIGHLIGHT_WASH = 0.18;
+
+function MessageHighlight() {
+  const scheme = useScheme();
+  const reduceMotion = useReduceMotion();
+  const wash = useSharedValue(reduceMotion ? 0.5 : 1);
+  useEffect(() => {
+    if (reduceMotion) {
+      wash.value = 0.5;
+      return;
+    }
+    wash.value = 1;
+    wash.value = withTiming(0, { duration: MESSAGE_HIGHLIGHT_MS });
+  }, [wash, reduceMotion]);
+  const animatedStyle = useAnimatedStyle(() => ({ opacity: wash.value }));
+  return (
+    <Animated.View
+      testID="message-highlight"
+      pointerEvents="none"
+      style={[
+        StyleSheet.absoluteFill,
+        {
+          borderRadius: tokens.radius.lg,
+          borderWidth: 1.5,
+          borderColor: withAlpha(palette.primary[scheme], 0.5),
+          backgroundColor: withAlpha(palette.primary[scheme], HIGHLIGHT_WASH),
+        },
+        animatedStyle,
+      ]}
+    />
+  );
+}
+
 /**
  * One message: the web `w-full max-w-[95%] flex-col gap-2`. A user message
  * sits at the end of the row with its parts at the end; an assistant message
  * at the start, its parts full width.
+ *
+ * With `onLongPress` or `actions` the message is a `Pressable` (same layout,
+ * `className`, `style` and view props) and a long press opens the
+ * `MessageActionSheet`. It stays a non-accessible container so its buttons and
+ * links keep their own focus: also offer the actions in a `MessageActionsBar`
+ * for screen reader users. `highlighted` draws the quote-jump highlight.
  */
-export function Message({ from, className, style, ...props }: MessageProps) {
+export function Message({
+  from,
+  className,
+  style,
+  onLongPress,
+  actions,
+  actionSheetTitle,
+  highlighted = false,
+  bot,
+  children,
+  ...props
+}: MessageProps) {
   const user = from === "user";
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const hasActions = actions != null && actions.length > 0;
+  const longPressable = onLongPress != null || hasActions;
+  const layout = [
+    { alignSelf: user ? "flex-end" : "flex-start", alignItems: user ? "flex-end" : "stretch" },
+    style,
+  ] as const;
+  const merged = cn("w-full max-w-[95%] gap-2", className);
+  const parts = (
+    <>
+      {bot && !user ? <MessageBotLabel name={bot.name} avatar={bot.avatar} /> : null}
+      {children}
+      {highlighted ? <MessageHighlight /> : null}
+    </>
+  );
   return (
     <MessageContext.Provider value={from}>
-      <View
-        className={cn("w-full max-w-[95%] gap-2", className)}
-        style={[
-          { alignSelf: user ? "flex-end" : "flex-start", alignItems: user ? "flex-end" : "stretch" },
-          style,
-        ]}
-        {...props}
-      />
+      {longPressable ? (
+        <>
+          <Pressable
+            accessible={false}
+            className={merged}
+            style={layout as never}
+            onLongPress={() => {
+              onLongPress?.();
+              if (hasActions) setSheetOpen(true);
+            }}
+            {...props}
+          >
+            {parts}
+          </Pressable>
+          {hasActions ? (
+            <MessageActionSheet
+              open={sheetOpen}
+              onClose={() => setSheetOpen(false)}
+              actions={actions}
+              title={actionSheetTitle}
+            />
+          ) : null}
+        </>
+      ) : (
+        <View className={merged} style={layout} {...props}>
+          {parts}
+        </View>
+      )}
     </MessageContext.Provider>
   );
 }
@@ -75,9 +194,47 @@ export function tintBubbleStyle(scheme: "light" | "dark") {
   };
 }
 
+export type MessageBotLabelProps = {
+  name: string;
+  /** An avatar node, such as `<Avatar size="xs" />`. Drawn before the name. */
+  avatar?: ReactNode;
+  className?: string;
+  testID?: string;
+};
+
+/**
+ * Which bot sent a message, for group chats: an optional avatar and the name
+ * in the caption size. `Message` draws it for its `bot` prop. To compose it
+ * yourself, render it above `MessageContent` (for example in `renderMessage`).
+ */
+export function MessageBotLabel({ name, avatar, className, testID = "message-bot-label" }: MessageBotLabelProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const size = chatTextSize("caption", largerText);
+  return (
+    <View
+      testID={testID}
+      accessible
+      accessibilityLabel={`From ${name}`}
+      className={cn("flex-row items-center gap-1.5", className)}
+    >
+      {avatar}
+      <Text
+        numberOfLines={1}
+        className={cn(size, "font-instrument-sans-semibold")}
+        style={[sizeStyle(size), typeStyle("semibold"), { color: tokens.color.muted[scheme] }]}
+      >
+        {name}
+      </Text>
+    </View>
+  );
+}
+
 export type MessageContentProps = ViewProps & {
   /** User messages only. Default `"primary"`. */
   bubble?: MessageBubble;
+  /** A `MessageQuote` drawn above the content, inside the bubble. */
+  quote?: ReactNode;
   className?: string;
 };
 
@@ -88,13 +245,14 @@ export type MessageContentProps = ViewProps & {
  * no fill and the foreground colour. A string child is drawn as
  * `ResponseText`, and `ResponseText` inside takes the colour.
  */
-export function MessageContent({ children, bubble = "primary", className, style, ...props }: MessageContentProps) {
+export function MessageContent({ children, bubble = "primary", quote, className, style, ...props }: MessageContentProps) {
   const from = useContext(MessageContext);
   const scheme = useScheme();
   const user = from === "user";
   const tint = user && bubble === "tint";
   const color = user && !tint ? palette.primaryForeground[scheme] : tokens.color.foreground[scheme];
   const bubbleStyle = !user ? null : tint ? tintBubbleStyle(scheme) : userBubbleStyle(scheme);
+  const body = typeof children === "string" ? <ResponseText>{children}</ResponseText> : children;
   return (
     <ChatTextColorContext.Provider value={color}>
       <View
@@ -102,7 +260,14 @@ export function MessageContent({ children, bubble = "primary", className, style,
         style={[bubbleStyle, style]}
         {...props}
       >
-        {typeof children === "string" ? <ResponseText>{children}</ResponseText> : children}
+        {quote ? (
+          <>
+            {quote}
+            {body}
+          </>
+        ) : (
+          body
+        )}
       </View>
     </ChatTextColorContext.Provider>
   );
@@ -138,6 +303,7 @@ export function MessageActionsBar({ className, ...props }: MessageActionsBarProp
 
 /** The usual actions, with their icons and accessibility labels. */
 export const MESSAGE_ACTIONS = {
+  reply: { icon: IconArrowBackUp, label: "Reply" },
   copy: { icon: IconCopy, label: "Copy" },
   retry: { icon: IconRefresh, label: "Retry" },
   like: { icon: IconThumbUp, label: "Good response" },

package/src/ai/prompt-input.tsx

@@ -89,6 +89,12 @@ export type PromptInputProps = {
   placeholder?: string;
   /** Names the field for VoiceOver and TalkBack. Default "Message". */
   accessibilityLabel?: string;
+  /**
+   * A pending reply above the field and above `header`: a `ReplyQuoteChip`.
+   * Clear it in the app with the chip's `onDismiss`. A `ReplyQuoteChip` as
+   * `header` works as well, beside any attachments.
+   */
+  replyTo?: ReactNode;
   /** Above the field, such as `Attachments`. */
   header?: ReactNode;
   /** Before the send button, such as `PromptInputButton`s. */
@@ -134,6 +140,7 @@ export function PromptInput({
   onStop,
   placeholder = "What would you like to know?",
   accessibilityLabel = "Message",
+  replyTo,
   header,
   toolbar,
   layout = "stacked",
@@ -180,6 +187,7 @@ export function PromptInput({
         {layout === "inline" ? (
           // Web `Composer` inline: `rounded-[1.25rem]` and a `p-1.5` row, items at the bottom as the field grows.
           <View className="border" style={[fieldStyle(scheme), { borderRadius: INLINE_RADIUS }]}>
+            {replyTo ? <View className="px-1.5 pt-1.5">{replyTo}</View> : null}
             {header ? <View className="flex-row flex-wrap gap-1 px-1.5 pt-1.5">{header}</View> : null}
             <View className="flex-row items-end gap-1 p-1.5">
               {leading ? <View className="shrink-0 flex-row items-center gap-1">{leading}</View> : null}
@@ -215,6 +223,7 @@ export function PromptInput({
           </View>
         ) : (
           <View className="border" style={fieldStyle(scheme)}>
+            {replyTo ? <View className="px-2 pt-2">{replyTo}</View> : null}
             {header ? <View className="flex-row flex-wrap gap-1 px-2 pt-2">{header}</View> : null}
             {/* The `Textarea` field without its `numberOfLines` (default 4), which on Android sets the line count: this one starts at one line and grows. */}
             <FieldInput

package/src/ai/reply-quote-chip.tsx

@@ -0,0 +1,90 @@
+import { Pressable, Text, View } from "react-native";
+import { IconX } from "@tabler/icons-react-native";
+import { cn } from "../cn";
+import { MIN_TOUCH_TARGET, fieldStyle, sizeStyle, textStyle, touchSlop, typeStyle } from "../controlStyles";
+import { palette } from "../palette";
+import { useLargerText } from "../theme";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+import { chatTextSize } from "./chat-text";
+
+export type ReplyQuoteChipProps = {
+  /** Who wrote the message being replied to. */
+  author: string;
+  /** Its text. Shown on up to two lines. */
+  text: string;
+  /** Called when the X is pressed. Clear the reply in the app. */
+  onDismiss?: () => void;
+  /** Default "Replying to {author}". */
+  accessibilityLabel?: string;
+  /** Names the X button. Default "Dismiss reply quote". */
+  dismissLabel?: string;
+  className?: string;
+  testID?: string;
+};
+
+/**
+ * The chip above the composer while a reply is pending: a field-style
+ * surface with a primary accent bar, the author, up to two lines of the
+ * message and an X (44 point target). Pass it as `PromptInput` `replyTo`, or
+ * as `header`.
+ */
+export function ReplyQuoteChip({
+  author,
+  text,
+  onDismiss,
+  accessibilityLabel,
+  dismissLabel = "Dismiss reply quote",
+  className,
+  testID,
+}: ReplyQuoteChipProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const caption = chatTextSize("caption", largerText);
+  const body = chatTextSize("small", largerText);
+  return (
+    <View
+      testID={testID}
+      accessible
+      accessibilityLabel={accessibilityLabel ?? `Replying to ${author}`}
+      accessibilityHint={text}
+      className={cn("w-full flex-row items-center rounded-field border pl-3", className)}
+      style={[
+        fieldStyle(scheme),
+        { backgroundColor: tokens.color.surfaceSecondary[scheme] },
+      ]}
+    >
+      <View
+        className="mr-2.5 self-stretch rounded-full"
+        style={{ width: 3, marginVertical: 8, backgroundColor: palette.primary[scheme] }}
+      />
+      <View className="min-w-0 flex-1 py-2">
+        <Text
+          numberOfLines={1}
+          className={cn(caption, "font-instrument-sans-semibold")}
+          style={[sizeStyle(caption), typeStyle("semibold"), textStyle("muted", scheme)]}
+        >
+          {author}
+        </Text>
+        <Text
+          numberOfLines={2}
+          className={cn(body, "font-instrument-sans")}
+          style={[sizeStyle(body), textStyle("foreground", scheme)]}
+        >
+          {text}
+        </Text>
+      </View>
+      <Pressable
+        testID={testID ? `${testID}-dismiss` : undefined}
+        accessibilityRole="button"
+        accessibilityLabel={dismissLabel}
+        onPress={onDismiss}
+        hitSlop={touchSlop(MIN_TOUCH_TARGET)}
+        className="items-center justify-center"
+        style={{ width: MIN_TOUCH_TARGET, height: MIN_TOUCH_TARGET }}
+      >
+        <IconX size={largerText ? 20 : 16} color={tokens.color.muted[scheme]} />
+      </Pressable>
+    </View>
+  );
+}

package/src/ai/subagent-cards.tsx

@@ -0,0 +1,209 @@
+import { Text, View } from "react-native";
+import { IconRobot } from "@tabler/icons-react-native";
+import { cn } from "../cn";
+import { cardStyle, sizeStyle, textStyle, typeStyle } from "../controlStyles";
+import { palette, withAlpha } from "../palette";
+import { useLargerText } from "../theme";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+import { CardButton } from "./card-button";
+import { chatTextSize, formatElapsed } from "./chat-text";
+import {
+  Collapsible,
+  CollapsibleChevron,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  useCollapsible,
+} from "./collapsible";
+import { ResponseText } from "./response-text";
+
+export type SubagentStatus = "running" | "done" | "failed" | "cancelled";
+
+const STATUS_LABEL: Record<SubagentStatus, string> = {
+  running: "Running",
+  done: "Done",
+  failed: "Failed",
+  cancelled: "Cancelled",
+};
+
+/** 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"
+      ? palette.primary[scheme]
+      : status === "done"
+        ? palette.success[scheme]
+        : status === "failed"
+          ? palette.danger[scheme]
+          : tokens.color.muted[scheme];
+  return { color: hex, borderColor: withAlpha(hex, 0.25), backgroundColor: withAlpha(hex, 0.12) };
+}
+
+function StatusPill({ status, testID }: { status: SubagentStatus; testID: string }) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const caption = chatTextSize("caption", largerText);
+  const colors = subagentStatusColors(status, scheme);
+  return (
+    <View
+      testID={testID}
+      accessible
+      accessibilityLabel={`Status: ${STATUS_LABEL[status]}`}
+      className="rounded-full border px-2.5 py-0.5"
+      style={{ borderColor: colors.borderColor, backgroundColor: colors.backgroundColor }}
+    >
+      <Text className={cn(caption, "font-instrument-sans-semibold")} style={[sizeStyle(caption), typeStyle("semibold"), { color: colors.color }]}>
+        {STATUS_LABEL[status]}
+      </Text>
+    </View>
+  );
+}
+
+export type SubagentRunCardProps = {
+  title: string;
+  status: SubagentStatus;
+  /** Whole seconds the run has taken. Shown as "12s" or "1m 5s". */
+  elapsedSeconds?: number;
+  /** Shows a Cancel button while `status` is `running`. */
+  onCancel?: () => void;
+  className?: string;
+  /** Default `subagent-run-card`. Parts add `-status`, `-elapsed` and `-cancel`. */
+  testID?: string;
+};
+
+/** A subagent run: title, status pill, elapsed time, and Cancel while it runs. */
+export function SubagentRunCard({
+  title,
+  status,
+  elapsedSeconds,
+  onCancel,
+  className,
+  testID = "subagent-run-card",
+}: SubagentRunCardProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const body = chatTextSize("body", largerText);
+  const small = chatTextSize("small", largerText);
+  const elapsed = elapsedSeconds == null ? null : formatElapsed(elapsedSeconds);
+  return (
+    <View
+      testID={testID}
+      accessible={false}
+      accessibilityLabel={`Subagent ${title}, ${STATUS_LABEL[status]}`}
+      className={cn("w-full gap-3 p-4", className)}
+      style={cardStyle(scheme)}
+    >
+      <View className="flex-row items-center gap-2">
+        <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")}
+          style={[sizeStyle(body), typeStyle("semibold"), textStyle("foreground", scheme)]}
+        >
+          {title}
+        </Text>
+        <StatusPill status={status} testID={`${testID}-status`} />
+      </View>
+      <View className="flex-row flex-wrap items-center justify-between gap-2">
+        {elapsed ? (
+          <Text
+            testID={`${testID}-elapsed`}
+            accessibilityLabel={`Elapsed ${elapsed}`}
+            className={small}
+            style={[sizeStyle(small), textStyle("muted", scheme), { fontVariant: ["tabular-nums"] }]}
+          >
+            {elapsed}
+          </Text>
+        ) : (
+          <View />
+        )}
+        {status === "running" && onCancel ? (
+          <CardButton
+            testID={`${testID}-cancel`}
+            label="Cancel"
+            accessibilityLabel={`Cancel ${title}`}
+            variant="outline"
+            onPress={onCancel}
+          />
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+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;
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  className?: string;
+  /** Default `subagent-result-card`. Parts add `-trigger` and `-detail`. */
+  testID?: string;
+};
+
+/** A subagent's result: the summary, and the detail behind a "Show details" fold. */
+export function SubagentResultCard({
+  title,
+  summary,
+  detail,
+  defaultOpen = false,
+  open,
+  onOpenChange,
+  className,
+  testID = "subagent-result-card",
+}: SubagentResultCardProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const body = chatTextSize("body", largerText);
+  const small = chatTextSize("small", largerText);
+  return (
+    <Collapsible
+      testID={testID}
+      defaultOpen={defaultOpen}
+      open={open}
+      onOpenChange={onOpenChange}
+      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>
+      <ResponseText>{summary}</ResponseText>
+      {detail ? (
+        <>
+          <CollapsibleTrigger
+            testID={`${testID}-trigger`}
+            accessibilityLabel={`Details for ${title}`}
+            className="min-h-11 flex-row items-center gap-1.5 self-start"
+          >
+            <ToggleLabel small={small} />
+          </CollapsibleTrigger>
+          <CollapsibleContent testID={`${testID}-detail`}>
+            <ResponseText>{detail}</ResponseText>
+          </CollapsibleContent>
+        </>
+      ) : null}
+    </Collapsible>
+  );
+}
+
+function ToggleLabel({ small }: { small: ReturnType<typeof chatTextSize> }) {
+  const { open } = useCollapsible();
+  const scheme = useScheme();
+  return (
+    <>
+      <Text className={cn(small, "font-instrument-sans")} style={[sizeStyle(small), textStyle("muted", scheme)]}>
+        {open ? "Hide details" : "Show details"}
+      </Text>
+      <CollapsibleChevron open={open} size={14} color={tokens.color.muted[scheme]} />
+    </>
+  );
+}

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

@@ -0,0 +1,162 @@
+import { Text, View } from "react-native";
+import { IconTool } from "@tabler/icons-react-native";
+import { cn } from "../cn";
+import { cardStyle, sizeStyle, textStyle, typeStyle } from "../controlStyles";
+import { withAlpha, palette } from "../palette";
+import { useLargerText } from "../theme";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+import { CardButton } from "./card-button";
+import { chatTextSize, MONO_FONT } from "./chat-text";
+
+/** What the reader chose. `edit` is offered by `ToolDraftCard` only. */
+export type ToolDecision = "approve" | "deny" | "edit";
+
+export type ToolApprovalCardProps = {
+  /** The tool the model wants to run. */
+  toolName: string;
+  /** 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;
+  /** 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;
+  className?: string;
+  /** Default `tool-approval-card`. The buttons add `-approve`, `-deny` and `-edit`. */
+  testID?: string;
+};
+
+/** Characters of the args summary before it is cut with an ellipsis. */
+export const ARGS_MAX_CHARS = 160;
+
+/** One line summary of tool arguments, cut at `max` characters. */
+export function summarizeArgs(args: string | Record<string, unknown> | undefined, max: number = ARGS_MAX_CHARS): string {
+  if (args == null) return "";
+  let text: string;
+  if (typeof args === "string") {
+    text = args;
+  } else {
+    try {
+      text = JSON.stringify(args) ?? "";
+    } catch {
+      text = "[unserialisable arguments]";
+    }
+  }
+  text = text.replace(/\s+/g, " ").trim();
+  return text.length > max ? `${text.slice(0, Math.max(0, max - 1))}…` : text;
+}
+
+type BaseProps = ToolApprovalCardProps & { allowEdit?: boolean; editLabel?: string; heading: string };
+
+function ToolCardBase({
+  toolName,
+  args,
+  onDecide,
+  pending = false,
+  disabled = false,
+  approveLabel = "Approve",
+  denyLabel = "Deny",
+  editLabel = "Edit",
+  allowEdit = false,
+  heading,
+  className,
+  testID = "tool-approval-card",
+}: BaseProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const body = chatTextSize("body", largerText);
+  const small = chatTextSize("small", largerText);
+  const caption = chatTextSize("caption", largerText);
+  const off = pending || disabled;
+  const summary = summarizeArgs(args);
+  return (
+    <View
+      testID={testID}
+      accessible={false}
+      accessibilityLabel={`${heading}: ${toolName}`}
+      className={cn("w-full gap-3 p-4", className)}
+      style={[
+        cardStyle(scheme),
+        { borderWidth: 1, borderColor: withAlpha(palette.primary[scheme], 0.25) },
+      ]}
+    >
+      <View className="flex-row items-center gap-2">
+        <IconTool size={largerText ? 20 : 16} color={tokens.color.muted[scheme]} />
+        <Text
+          className={cn(caption, "font-instrument-sans-semibold")}
+          style={[sizeStyle(caption), typeStyle("semibold"), textStyle("muted", scheme)]}
+        >
+          {pending ? "Sending decision…" : heading}
+        </Text>
+      </View>
+      <Text
+        testID={`${testID}-name`}
+        numberOfLines={2}
+        className={cn(body, "font-instrument-sans-semibold")}
+        style={[sizeStyle(body), typeStyle("semibold"), textStyle("foreground", scheme)]}
+      >
+        {toolName}
+      </Text>
+      {summary ? (
+        <Text
+          testID={`${testID}-args`}
+          numberOfLines={3}
+          className={small}
+          style={[sizeStyle(small), textStyle("muted", scheme), { fontFamily: MONO_FONT }]}
+        >
+          {summary}
+        </Text>
+      ) : null}
+      <View className="flex-row flex-wrap items-center justify-end gap-2" accessibilityState={{ busy: pending }}>
+        <CardButton
+          testID={`${testID}-deny`}
+          label={denyLabel}
+          accessibilityLabel={`${denyLabel} ${toolName}`}
+          variant="outline"
+          disabled={off}
+          onPress={() => onDecide?.("deny")}
+        />
+        {allowEdit ? (
+          <CardButton
+            testID={`${testID}-edit`}
+            label={editLabel}
+            accessibilityLabel={`${editLabel} ${toolName}`}
+            variant="secondary"
+            disabled={off}
+            onPress={() => onDecide?.("edit")}
+          />
+        ) : null}
+        <CardButton
+          testID={`${testID}-approve`}
+          label={approveLabel}
+          accessibilityLabel={`${approveLabel} ${toolName}`}
+          variant="primary"
+          disabled={off}
+          onPress={() => onDecide?.("approve")}
+        />
+      </View>
+    </View>
+  );
+}
+
+/**
+ * A pending tool call that needs a yes or no: the tool name, a cut summary of
+ * the arguments, and Deny and Approve buttons (44 point targets). With
+ * `pending` or `disabled` both buttons are off.
+ */
+export function ToolApprovalCard(props: ToolApprovalCardProps) {
+  return <ToolCardBase {...props} heading="Approval needed" />;
+}
+
+export type ToolDraftCardProps = ToolApprovalCardProps & {
+  editLabel?: string;
+};
+
+/** 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" />;
+}