@vvedantb/native-ui 0.12.1 → 0.17.0

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" />;
+}

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>
   );