@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/ai/subagent-cards.jsx

@@ -0,0 +1,645 @@
+import { c as _c } from "react/compiler-runtime";
+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 { Spinner } from "../Spinner";
+import { CardButton } from "./card-button";
+import { chatTextSize, formatElapsed, MONO_FONT } from "./chat-text";
+import { Collapsible, CollapsibleChevron, CollapsibleContent, CollapsibleTrigger, useCollapsible } from "./collapsible";
+import { ResponseText } from "./response-text";
+const STATUS_LABEL = {
+  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, scheme) {
+  const hex = status === "running" || status === "queued" ? palette.primary[scheme] : status === "done" ? palette.success[scheme] : 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)
+  };
+}
+function StatusPill(t0) {
+  const $ = _c(39);
+  const {
+    status,
+    testID
+  } = t0;
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  let T0;
+  let T1;
+  let colors;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  let t5;
+  let t6;
+  let t7;
+  if ($[0] !== largerText || $[1] !== scheme || $[2] !== status || $[3] !== testID) {
+    const caption = chatTextSize("caption", largerText);
+    let t8;
+    if ($[14] !== scheme || $[15] !== status) {
+      t8 = subagentStatusColors(status, scheme);
+      $[14] = scheme;
+      $[15] = status;
+      $[16] = t8;
+    } else {
+      t8 = $[16];
+    }
+    colors = t8;
+    T1 = View;
+    t3 = testID;
+    t4 = true;
+    t5 = `Status: ${STATUS_LABEL[status]}`;
+    t6 = "rounded-full border px-2.5 py-0.5";
+    if ($[17] !== colors.backgroundColor || $[18] !== colors.borderColor) {
+      t7 = {
+        borderColor: colors.borderColor,
+        backgroundColor: colors.backgroundColor
+      };
+      $[17] = colors.backgroundColor;
+      $[18] = colors.borderColor;
+      $[19] = t7;
+    } else {
+      t7 = $[19];
+    }
+    T0 = Text;
+    t2 = cn(caption, "font-instrument-sans-semibold");
+    t1 = sizeStyle(caption);
+    $[0] = largerText;
+    $[1] = scheme;
+    $[2] = status;
+    $[3] = testID;
+    $[4] = T0;
+    $[5] = T1;
+    $[6] = colors;
+    $[7] = t1;
+    $[8] = t2;
+    $[9] = t3;
+    $[10] = t4;
+    $[11] = t5;
+    $[12] = t6;
+    $[13] = t7;
+  } else {
+    T0 = $[4];
+    T1 = $[5];
+    colors = $[6];
+    t1 = $[7];
+    t2 = $[8];
+    t3 = $[9];
+    t4 = $[10];
+    t5 = $[11];
+    t6 = $[12];
+    t7 = $[13];
+  }
+  let t8;
+  if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+    t8 = typeStyle("semibold");
+    $[20] = t8;
+  } else {
+    t8 = $[20];
+  }
+  let t9;
+  if ($[21] !== colors.color) {
+    t9 = {
+      color: colors.color
+    };
+    $[21] = colors.color;
+    $[22] = t9;
+  } else {
+    t9 = $[22];
+  }
+  let t10;
+  if ($[23] !== t1 || $[24] !== t9) {
+    t10 = [t1, t8, t9];
+    $[23] = t1;
+    $[24] = t9;
+    $[25] = t10;
+  } else {
+    t10 = $[25];
+  }
+  const t11 = STATUS_LABEL[status];
+  let t12;
+  if ($[26] !== T0 || $[27] !== t10 || $[28] !== t11 || $[29] !== t2) {
+    t12 = <T0 className={t2} style={t10}>{t11}</T0>;
+    $[26] = T0;
+    $[27] = t10;
+    $[28] = t11;
+    $[29] = t2;
+    $[30] = t12;
+  } else {
+    t12 = $[30];
+  }
+  let t13;
+  if ($[31] !== T1 || $[32] !== t12 || $[33] !== t3 || $[34] !== t4 || $[35] !== t5 || $[36] !== t6 || $[37] !== t7) {
+    t13 = <T1 testID={t3} accessible={t4} accessibilityLabel={t5} className={t6} style={t7}>{t12}</T1>;
+    $[31] = T1;
+    $[32] = t12;
+    $[33] = t3;
+    $[34] = t4;
+    $[35] = t5;
+    $[36] = t6;
+    $[37] = t7;
+    $[38] = t13;
+  } else {
+    t13 = $[38];
+  }
+  return t13;
+}
+/** A subagent run: title, status pill, elapsed time, and Cancel while it runs. */
+export function SubagentRunCard(t0) {
+  const $ = _c(76);
+  const {
+    title,
+    status,
+    elapsedSeconds,
+    onCancel,
+    statusLine,
+    error,
+    avatar,
+    className,
+    testID: t1
+  } = t0;
+  const testID = t1 === undefined ? "subagent-run-card" : t1;
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  let T0;
+  let elapsed;
+  let small;
+  let t2;
+  let t3;
+  let t4;
+  let t5;
+  let t6;
+  let t7;
+  let t8;
+  if ($[0] !== avatar || $[1] !== className || $[2] !== elapsedSeconds || $[3] !== largerText || $[4] !== scheme || $[5] !== status || $[6] !== statusLine || $[7] !== testID || $[8] !== title) {
+    const body = chatTextSize("body", largerText);
+    small = chatTextSize("small", largerText);
+    let t9;
+    if ($[19] !== elapsedSeconds) {
+      t9 = elapsedSeconds == null ? null : formatElapsed(elapsedSeconds);
+      $[19] = elapsedSeconds;
+      $[20] = t9;
+    } else {
+      t9 = $[20];
+    }
+    elapsed = t9;
+    T0 = View;
+    t2 = testID;
+    t3 = false;
+    t4 = `Subagent ${title}, ${STATUS_LABEL[status]}`;
+    if ($[21] !== className) {
+      t5 = cn("w-full gap-3 p-4", className);
+      $[21] = className;
+      $[22] = t5;
+    } else {
+      t5 = $[22];
+    }
+    if ($[23] !== scheme) {
+      t6 = cardStyle(scheme);
+      $[23] = scheme;
+      $[24] = t6;
+    } else {
+      t6 = $[24];
+    }
+    let t10;
+    if ($[25] !== avatar || $[26] !== largerText || $[27] !== scheme || $[28] !== status) {
+      t10 = status === "queued" || status === "running" ? <Spinner size="sm" decorative={true} /> : avatar ?? <IconRobot size={largerText ? 22 : 18} color={tokens.color.muted[scheme]} />;
+      $[25] = avatar;
+      $[26] = largerText;
+      $[27] = scheme;
+      $[28] = status;
+      $[29] = t10;
+    } else {
+      t10 = $[29];
+    }
+    const t11 = cn(body, "min-w-0 flex-1 font-instrument-sans-semibold");
+    const t12 = sizeStyle(body);
+    let t13;
+    if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
+      t13 = typeStyle("semibold");
+      $[30] = t13;
+    } else {
+      t13 = $[30];
+    }
+    let t14;
+    if ($[31] !== scheme) {
+      t14 = textStyle("foreground", scheme);
+      $[31] = scheme;
+      $[32] = t14;
+    } else {
+      t14 = $[32];
+    }
+    let t15;
+    if ($[33] !== t12 || $[34] !== t14) {
+      t15 = [t12, t13, t14];
+      $[33] = t12;
+      $[34] = t14;
+      $[35] = t15;
+    } else {
+      t15 = $[35];
+    }
+    let t16;
+    if ($[36] !== t11 || $[37] !== t15 || $[38] !== title) {
+      t16 = <Text numberOfLines={2} className={t11} style={t15}>{title}</Text>;
+      $[36] = t11;
+      $[37] = t15;
+      $[38] = title;
+      $[39] = t16;
+    } else {
+      t16 = $[39];
+    }
+    const t17 = `${testID}-status`;
+    let t18;
+    if ($[40] !== status || $[41] !== t17) {
+      t18 = <StatusPill status={status} testID={t17} />;
+      $[40] = status;
+      $[41] = t17;
+      $[42] = t18;
+    } else {
+      t18 = $[42];
+    }
+    if ($[43] !== t10 || $[44] !== t16 || $[45] !== t18) {
+      t7 = <View className="flex-row items-center gap-2">{t10}{t16}{t18}</View>;
+      $[43] = t10;
+      $[44] = t16;
+      $[45] = t18;
+      $[46] = t7;
+    } else {
+      t7 = $[46];
+    }
+    t8 = statusLine ? <Text testID={`${testID}-status-line`} className={small} style={[sizeStyle(small), textStyle("muted", scheme)]}>{statusLine}</Text> : null;
+    $[0] = avatar;
+    $[1] = className;
+    $[2] = elapsedSeconds;
+    $[3] = largerText;
+    $[4] = scheme;
+    $[5] = status;
+    $[6] = statusLine;
+    $[7] = testID;
+    $[8] = title;
+    $[9] = T0;
+    $[10] = elapsed;
+    $[11] = small;
+    $[12] = t2;
+    $[13] = t3;
+    $[14] = t4;
+    $[15] = t5;
+    $[16] = t6;
+    $[17] = t7;
+    $[18] = t8;
+  } else {
+    T0 = $[9];
+    elapsed = $[10];
+    small = $[11];
+    t2 = $[12];
+    t3 = $[13];
+    t4 = $[14];
+    t5 = $[15];
+    t6 = $[16];
+    t7 = $[17];
+    t8 = $[18];
+  }
+  let t9;
+  if ($[47] !== error || $[48] !== scheme || $[49] !== small || $[50] !== testID) {
+    t9 = error ? <Text testID={`${testID}-error`} className={small} style={[sizeStyle(small), {
+      color: palette.danger[scheme]
+    }]}>{error}</Text> : null;
+    $[47] = error;
+    $[48] = scheme;
+    $[49] = small;
+    $[50] = testID;
+    $[51] = t9;
+  } else {
+    t9 = $[51];
+  }
+  let t10;
+  if ($[52] !== elapsed || $[53] !== scheme || $[54] !== small || $[55] !== testID) {
+    t10 = elapsed ? <Text testID={`${testID}-elapsed`} accessibilityLabel={`Elapsed ${elapsed}`} className={small} style={[sizeStyle(small), textStyle("muted", scheme), {
+      fontVariant: ["tabular-nums"]
+    }]}>{elapsed}</Text> : <View />;
+    $[52] = elapsed;
+    $[53] = scheme;
+    $[54] = small;
+    $[55] = testID;
+    $[56] = t10;
+  } else {
+    t10 = $[56];
+  }
+  let t11;
+  if ($[57] !== onCancel || $[58] !== status || $[59] !== testID || $[60] !== title) {
+    t11 = (status === "running" || status === "queued") && onCancel ? <CardButton testID={`${testID}-cancel`} label="Cancel" accessibilityLabel={`Cancel ${title}`} variant="outline" onPress={onCancel} /> : null;
+    $[57] = onCancel;
+    $[58] = status;
+    $[59] = testID;
+    $[60] = title;
+    $[61] = t11;
+  } else {
+    t11 = $[61];
+  }
+  let t12;
+  if ($[62] !== t10 || $[63] !== t11) {
+    t12 = <View className="flex-row flex-wrap items-center justify-between gap-2">{t10}{t11}</View>;
+    $[62] = t10;
+    $[63] = t11;
+    $[64] = t12;
+  } else {
+    t12 = $[64];
+  }
+  let t13;
+  if ($[65] !== T0 || $[66] !== t12 || $[67] !== t2 || $[68] !== t3 || $[69] !== t4 || $[70] !== t5 || $[71] !== t6 || $[72] !== t7 || $[73] !== t8 || $[74] !== t9) {
+    t13 = <T0 testID={t2} accessible={t3} accessibilityLabel={t4} className={t5} style={t6}>{t7}{t8}{t9}{t12}</T0>;
+    $[65] = T0;
+    $[66] = t12;
+    $[67] = t2;
+    $[68] = t3;
+    $[69] = t4;
+    $[70] = t5;
+    $[71] = t6;
+    $[72] = t7;
+    $[73] = t8;
+    $[74] = t9;
+    $[75] = t13;
+  } else {
+    t13 = $[75];
+  }
+  return t13;
+}
+/** A subagent's result: the summary, and the detail behind a "Show details" fold. */
+export function SubagentResultCard(t0) {
+  const $ = _c(65);
+  const {
+    title,
+    summary,
+    detail,
+    approvalPending: t1,
+    approvalPendingIn,
+    handoffs,
+    avatar,
+    defaultOpen: t2,
+    open,
+    onOpenChange,
+    className,
+    testID: t3
+  } = t0;
+  const approvalPending = t1 === undefined ? false : t1;
+  const defaultOpen = t2 === undefined ? false : t2;
+  const testID = t3 === undefined ? "subagent-result-card" : t3;
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  let T0;
+  let small;
+  let t10;
+  let t11;
+  let t12;
+  let t4;
+  let t5;
+  let t6;
+  let t7;
+  let t8;
+  let t9;
+  if ($[0] !== approvalPending || $[1] !== approvalPendingIn || $[2] !== avatar || $[3] !== className || $[4] !== defaultOpen || $[5] !== largerText || $[6] !== onOpenChange || $[7] !== open || $[8] !== scheme || $[9] !== summary || $[10] !== testID || $[11] !== title) {
+    const body = chatTextSize("body", largerText);
+    small = chatTextSize("small", largerText);
+    T0 = Collapsible;
+    t4 = testID;
+    t5 = defaultOpen;
+    t6 = open;
+    t7 = onOpenChange;
+    if ($[23] !== className) {
+      t8 = cn("w-full gap-2 p-4", className);
+      $[23] = className;
+      $[24] = t8;
+    } else {
+      t8 = $[24];
+    }
+    if ($[25] !== scheme) {
+      t9 = cardStyle(scheme);
+      $[25] = scheme;
+      $[26] = t9;
+    } else {
+      t9 = $[26];
+    }
+    const t13 = cn(body, "min-w-0 flex-1 font-instrument-sans-semibold");
+    const t14 = sizeStyle(body);
+    let t15;
+    if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+      t15 = typeStyle("semibold");
+      $[27] = t15;
+    } else {
+      t15 = $[27];
+    }
+    let t16;
+    if ($[28] !== scheme) {
+      t16 = textStyle("foreground", scheme);
+      $[28] = scheme;
+      $[29] = t16;
+    } else {
+      t16 = $[29];
+    }
+    let t17;
+    if ($[30] !== t14 || $[31] !== t16) {
+      t17 = [t14, t15, t16];
+      $[30] = t14;
+      $[31] = t16;
+      $[32] = t17;
+    } else {
+      t17 = $[32];
+    }
+    let t18;
+    if ($[33] !== t13 || $[34] !== t17 || $[35] !== title) {
+      t18 = <Text numberOfLines={2} className={t13} style={t17}>{title}</Text>;
+      $[33] = t13;
+      $[34] = t17;
+      $[35] = title;
+      $[36] = t18;
+    } else {
+      t18 = $[36];
+    }
+    if ($[37] !== avatar || $[38] !== t18) {
+      t10 = <View className="flex-row items-center gap-2">{avatar}{t18}</View>;
+      $[37] = avatar;
+      $[38] = t18;
+      $[39] = t10;
+    } else {
+      t10 = $[39];
+    }
+    if ($[40] !== summary) {
+      t11 = <ResponseText>{summary}</ResponseText>;
+      $[40] = summary;
+      $[41] = t11;
+    } else {
+      t11 = $[41];
+    }
+    t12 = 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;
+    $[0] = approvalPending;
+    $[1] = approvalPendingIn;
+    $[2] = avatar;
+    $[3] = className;
+    $[4] = defaultOpen;
+    $[5] = largerText;
+    $[6] = onOpenChange;
+    $[7] = open;
+    $[8] = scheme;
+    $[9] = summary;
+    $[10] = testID;
+    $[11] = title;
+    $[12] = T0;
+    $[13] = small;
+    $[14] = t10;
+    $[15] = t11;
+    $[16] = t12;
+    $[17] = t4;
+    $[18] = t5;
+    $[19] = t6;
+    $[20] = t7;
+    $[21] = t8;
+    $[22] = t9;
+  } else {
+    T0 = $[12];
+    small = $[13];
+    t10 = $[14];
+    t11 = $[15];
+    t12 = $[16];
+    t4 = $[17];
+    t5 = $[18];
+    t6 = $[19];
+    t7 = $[20];
+    t8 = $[21];
+    t9 = $[22];
+  }
+  let t13;
+  if ($[42] !== handoffs || $[43] !== scheme || $[44] !== small || $[45] !== testID) {
+    t13 = 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;
+    $[42] = handoffs;
+    $[43] = scheme;
+    $[44] = small;
+    $[45] = testID;
+    $[46] = t13;
+  } else {
+    t13 = $[46];
+  }
+  let t14;
+  if ($[47] !== detail || $[48] !== small || $[49] !== testID || $[50] !== title) {
+    t14 = 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;
+    $[47] = detail;
+    $[48] = small;
+    $[49] = testID;
+    $[50] = title;
+    $[51] = t14;
+  } else {
+    t14 = $[51];
+  }
+  let t15;
+  if ($[52] !== T0 || $[53] !== t10 || $[54] !== t11 || $[55] !== t12 || $[56] !== t13 || $[57] !== t14 || $[58] !== t4 || $[59] !== t5 || $[60] !== t6 || $[61] !== t7 || $[62] !== t8 || $[63] !== t9) {
+    t15 = <T0 testID={t4} defaultOpen={t5} open={t6} onOpenChange={t7} className={t8} style={t9}>{t10}{t11}{t12}{t13}{t14}</T0>;
+    $[52] = T0;
+    $[53] = t10;
+    $[54] = t11;
+    $[55] = t12;
+    $[56] = t13;
+    $[57] = t14;
+    $[58] = t4;
+    $[59] = t5;
+    $[60] = t6;
+    $[61] = t7;
+    $[62] = t8;
+    $[63] = t9;
+    $[64] = t15;
+  } else {
+    t15 = $[64];
+  }
+  return t15;
+}
+function ToggleLabel(t0) {
+  const $ = _c(19);
+  const {
+    small
+  } = t0;
+  const {
+    open
+  } = useCollapsible();
+  const scheme = useScheme();
+  let t1;
+  if ($[0] !== small) {
+    t1 = cn(small, "font-instrument-sans");
+    $[0] = small;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== small) {
+    t2 = sizeStyle(small);
+    $[2] = small;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== scheme) {
+    t3 = textStyle("muted", scheme);
+    $[4] = scheme;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  let t4;
+  if ($[6] !== t2 || $[7] !== t3) {
+    t4 = [t2, t3];
+    $[6] = t2;
+    $[7] = t3;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  const t5 = open ? "Hide details" : "Show details";
+  let t6;
+  if ($[9] !== t1 || $[10] !== t4 || $[11] !== t5) {
+    t6 = <Text className={t1} style={t4}>{t5}</Text>;
+    $[9] = t1;
+    $[10] = t4;
+    $[11] = t5;
+    $[12] = t6;
+  } else {
+    t6 = $[12];
+  }
+  const t7 = tokens.color.muted[scheme];
+  let t8;
+  if ($[13] !== open || $[14] !== t7) {
+    t8 = <CollapsibleChevron open={open} size={14} color={t7} />;
+    $[13] = open;
+    $[14] = t7;
+    $[15] = t8;
+  } else {
+    t8 = $[15];
+  }
+  let t9;
+  if ($[16] !== t6 || $[17] !== t8) {
+    t9 = <>{t6}{t8}</>;
+    $[16] = t6;
+    $[17] = t8;
+    $[18] = t9;
+  } else {
+    t9 = $[18];
+  }
+  return t9;
+}