@opengeni/react-native 1.4.5-canary.37615713321001

package/dist/ui/index.js

@@ -0,0 +1,1757 @@
+import { useState, useMemo, useEffect } from 'react';
+import { Pressable, Text, StyleSheet, View, FlatList, Modal, ScrollView, Platform, TextInput } from 'react-native';
+import Animated, { LinearTransition, FadeInDown, FadeIn, useSharedValue, withRepeat, withTiming, useAnimatedStyle, FadeOutDown } from 'react-native-reanimated';
+import { toolDisplayName } from '@opengeni/react/session';
+import Svg, { Polyline, Path, Circle, Rect } from 'react-native-svg';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { isLiquidGlassAvailable, GlassView } from 'expo-glass-effect';
+
+// src/ui/timeline.tsx
+function AgentIcon({
+  name,
+  size = 18,
+  color,
+  strokeWidth = 2
+}) {
+  const common = {
+    stroke: color,
+    strokeWidth,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    fill: "none"
+  };
+  return /* @__PURE__ */ jsxs(Svg, { width: size, height: size, viewBox: "0 0 24 24", children: [
+    name === "terminal" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Polyline, { points: "4 17 10 11 4 5", ...common }),
+      /* @__PURE__ */ jsx(Path, { d: "M 12 19h8", ...common })
+    ] }) : null,
+    name === "search" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Circle, { cx: "11", cy: "11", r: "7", ...common }),
+      /* @__PURE__ */ jsx(Path, { d: "m20 20-3.5-3.5", ...common })
+    ] }) : null,
+    name === "edit" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Path, { d: "M 12 20h9", ...common }),
+      /* @__PURE__ */ jsx(Path, { d: "M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z", ...common })
+    ] }) : null,
+    name === "globe" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Circle, { cx: "12", cy: "12", r: "9", ...common }),
+      /* @__PURE__ */ jsx(Path, { d: "M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18", ...common })
+    ] }) : null,
+    name === "check" ? /* @__PURE__ */ jsx(Polyline, { points: "20 6 9 17 4 12", ...common }) : null,
+    name === "x" ? /* @__PURE__ */ jsx(Path, { d: "M18 6 6 18M6 6l12 12", ...common }) : null,
+    name === "chevron-right" ? /* @__PURE__ */ jsx(Polyline, { points: "9 18 15 12 9 6", ...common }) : null,
+    name === "chevron-down" ? /* @__PURE__ */ jsx(Polyline, { points: "6 9 12 15 18 9", ...common }) : null,
+    name === "sparkle" ? /* @__PURE__ */ jsx(Path, { d: "M 12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9Z", ...common }) : null,
+    name === "mic" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Rect, { x: "9", y: "2", width: "6", height: "12", rx: "3", ...common }),
+      /* @__PURE__ */ jsx(Path, { d: "M5 10a7 7 0 0 0 14 0M12 17v5", ...common })
+    ] }) : null,
+    name === "plus" ? /* @__PURE__ */ jsx(Path, { d: "M 12 5v14M5 12h14", ...common }) : null,
+    name === "arrow-up" ? /* @__PURE__ */ jsx(Path, { d: "M 12 19V5M5 12l7-7 7 7", ...common }) : null,
+    name === "stop" ? /* @__PURE__ */ jsx(Rect, { x: "6", y: "6", width: "12", height: "12", rx: "2", fill: color }) : null,
+    name === "tool" ? /* @__PURE__ */ jsx(
+      Path,
+      {
+        d: "M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.6 2.6-2.4-.6-.6-2.4Z",
+        ...common
+      }
+    ) : null,
+    name === "send" ? /* @__PURE__ */ jsx(Path, { d: "m22 2-7 20-4-9-9-4Z M22 2 11 13", ...common }) : null,
+    name === "alert" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Path,
+        {
+          d: "M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z",
+          ...common
+        }
+      ),
+      /* @__PURE__ */ jsx(Path, { d: "M 12 9v4M12 17h.01", ...common })
+    ] }) : null,
+    name === "question" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Circle, { cx: "12", cy: "12", r: "9", ...common }),
+      /* @__PURE__ */ jsx(Path, { d: "M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3M12 17h.01", ...common })
+    ] }) : null,
+    name === "rocket" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Path,
+        {
+          d: "M4.5 16.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.8.7-2.1-.1-2.9a2.2 2.2 0 0 0-2.9-.1Z",
+          ...common
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Path,
+        {
+          d: "m 12 15-3-3a22 22 0 0 1 2-4A13 13 0 0 1 22 2c0 2.7-.8 7.5-6 11a22 22 0 0 1-4 2Z",
+          ...common
+        }
+      )
+    ] }) : null
+  ] });
+}
+function toolIconName(name) {
+  const leaf = name.toLowerCase();
+  if (/exec|command|shell|bash|terminal|run/.test(leaf)) return "terminal";
+  if (/search|find|grep|list|query|read/.test(leaf)) return "search";
+  if (/patch|edit|write|create|update|save/.test(leaf)) return "edit";
+  if (/web|browse|fetch|http|url/.test(leaf)) return "globe";
+  if (/deploy|release|ship/.test(leaf)) return "rocket";
+  return "tool";
+}
+function argumentRows(args) {
+  if (!args || typeof args !== "object") return [];
+  return Object.entries(args).slice(0, 4).map(([key, value]) => [key, typeof value === "string" ? value : JSON.stringify(value)]);
+}
+function ActionButton(props) {
+  const { theme, variant } = props;
+  const primary = variant === "primary";
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityState: { disabled: !!props.disabled },
+      disabled: props.disabled,
+      onPress: props.onPress,
+      style: ({ pressed }) => ({
+        flex: props.flex ? 1 : void 0,
+        minHeight: theme.layout.target,
+        paddingHorizontal: 18,
+        borderRadius: theme.radius.control,
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: primary ? theme.colors.accent : "transparent",
+        borderWidth: primary ? 0 : StyleSheet.hairlineWidth * 2,
+        borderColor: variant === "danger" ? theme.colors.danger : theme.colors.border,
+        opacity: props.disabled ? 0.4 : pressed ? 0.75 : 1
+      }),
+      children: /* @__PURE__ */ jsx(
+        Text,
+        {
+          style: {
+            color: primary ? theme.colors.onAccent : variant === "danger" ? theme.colors.danger : theme.colors.text,
+            fontSize: theme.type.body - 1,
+            fontWeight: theme.type.weightStrong
+          },
+          children: props.label
+        }
+      )
+    }
+  );
+}
+function CardShell(props) {
+  const { theme } = props;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: {
+        marginVertical: theme.space.row,
+        borderRadius: theme.radius.card,
+        backgroundColor: theme.colors.surfaceRaised,
+        borderWidth: StyleSheet.hairlineWidth * 2,
+        borderColor: theme.colors.attention,
+        padding: 16,
+        gap: 12,
+        shadowColor: "#000",
+        shadowOpacity: theme.scheme === "light" ? 0.06 : 0,
+        shadowRadius: 12,
+        shadowOffset: { width: 0, height: 4 }
+      },
+      children: [
+        /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 8 }, children: [
+          /* @__PURE__ */ jsx(AgentIcon, { color: theme.colors.attention, name: props.icon, size: 16 }),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: {
+                color: theme.colors.attention,
+                fontSize: theme.type.small,
+                fontWeight: "600",
+                letterSpacing: 0.2
+              },
+              children: props.eyebrow
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: {
+              color: theme.colors.text,
+              fontSize: theme.type.body + 1,
+              lineHeight: theme.type.bodyLine + 1,
+              fontWeight: theme.type.weightStrong
+            },
+            children: props.title
+          }
+        ),
+        props.children
+      ]
+    }
+  );
+}
+function ApprovalCard(props) {
+  const { approval, theme } = props;
+  const rows = argumentRows(approval.arguments);
+  return /* @__PURE__ */ jsxs(
+    CardShell,
+    {
+      eyebrow: "Needs your approval",
+      icon: "alert",
+      theme,
+      title: toolDisplayName(approval.name, approval.display),
+      children: [
+        rows.length ? /* @__PURE__ */ jsx(
+          View,
+          {
+            style: {
+              borderRadius: theme.radius.control,
+              backgroundColor: theme.colors.codeBackground,
+              padding: 10,
+              gap: 4
+            },
+            children: rows.map(([key, value]) => /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", gap: 8 }, children: [
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  style: {
+                    color: theme.colors.textFaint,
+                    fontSize: theme.type.small,
+                    fontFamily: theme.type.mono
+                  },
+                  children: key
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  numberOfLines: 2,
+                  style: {
+                    flex: 1,
+                    color: theme.colors.text,
+                    fontSize: theme.type.small,
+                    fontFamily: theme.type.mono
+                  },
+                  children: value
+                }
+              )
+            ] }, key))
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", gap: 10 }, children: [
+          /* @__PURE__ */ jsx(
+            ActionButton,
+            {
+              flex: true,
+              label: "Deny",
+              onPress: () => props.onDecision("reject"),
+              theme,
+              variant: "secondary"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ActionButton,
+            {
+              flex: true,
+              label: "Approve",
+              onPress: () => props.onDecision("approve"),
+              theme,
+              variant: "primary"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function QuestionCard(props) {
+  const { request, theme } = props;
+  const question = request.questions[0];
+  const [selected, setSelected] = useState([]);
+  if (!question) return null;
+  const multi = question.kind === "multi_select";
+  const toggle = (id) => setSelected(
+    (current) => multi ? current.includes(id) ? current.filter((value) => value !== id) : [...current, id] : [id]
+  );
+  return /* @__PURE__ */ jsxs(CardShell, { eyebrow: "Question for you", icon: "question", theme, title: question.prompt, children: [
+    /* @__PURE__ */ jsx(View, { style: { gap: 8 }, children: question.options.map((option) => {
+      const active = selected.includes(option.id);
+      return /* @__PURE__ */ jsxs(
+        Pressable,
+        {
+          accessibilityRole: multi ? "checkbox" : "radio",
+          accessibilityState: { checked: active },
+          onPress: () => toggle(option.id),
+          style: {
+            minHeight: theme.layout.target,
+            borderRadius: theme.radius.control,
+            borderWidth: active ? 2 : StyleSheet.hairlineWidth * 2,
+            borderColor: active ? theme.colors.accent : theme.colors.border,
+            paddingHorizontal: 14,
+            paddingVertical: 10,
+            justifyContent: "center"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                style: {
+                  color: theme.colors.text,
+                  fontSize: theme.type.body - 1,
+                  fontWeight: "500"
+                },
+                children: option.label
+              }
+            ),
+            option.description ? /* @__PURE__ */ jsx(
+              Text,
+              {
+                style: {
+                  color: theme.colors.textMuted,
+                  fontSize: theme.type.small,
+                  marginTop: 2
+                },
+                children: option.description
+              }
+            ) : null
+          ]
+        },
+        option.id
+      );
+    }) }),
+    /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", gap: 10 }, children: [
+      request.allowSkip ? /* @__PURE__ */ jsx(
+        ActionButton,
+        {
+          flex: true,
+          label: "Skip",
+          onPress: () => props.onAnswer(null),
+          theme,
+          variant: "secondary"
+        }
+      ) : null,
+      /* @__PURE__ */ jsx(
+        ActionButton,
+        {
+          disabled: selected.length === 0,
+          flex: true,
+          label: "Send answer",
+          onPress: () => props.onAnswer([{ questionId: question.id, values: selected }]),
+          theme,
+          variant: "primary"
+        }
+      )
+    ] })
+  ] });
+}
+function toolTitle(item) {
+  return toolDisplayName(item.name, item.display);
+}
+function firstString(record, keys) {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "string" && value.trim()) return value.trim();
+  }
+  return null;
+}
+function toolDetail(item) {
+  const args = item.arguments;
+  if (typeof args === "string") return args.split("\n")[0] ?? null;
+  if (!args || typeof args !== "object") return null;
+  const record = args;
+  const known = firstString(record, [
+    "cmd",
+    "command",
+    "query",
+    "q",
+    "path",
+    "url",
+    "title",
+    "id",
+    "name"
+  ]);
+  if (known) return known;
+  const pairs = Object.entries(record).filter(([, value]) => value !== null && value !== void 0 && value !== "").slice(0, 3).map(
+    ([key, value]) => `${key.replace(/[_-]+/g, " ")}: ${typeof value === "string" ? value : JSON.stringify(value)}`
+  );
+  if (pairs.length === 0) return null;
+  const text = pairs.join(" \xB7 ");
+  return text.length > 110 ? `${text.slice(0, 109)}\u2026` : text;
+}
+function toolOutputPreview(item, lines = 2) {
+  const output = item.output;
+  const text = typeof output === "string" ? output : output && typeof output === "object" && typeof output.text === "string" ? String(output.text) : output == null ? null : JSON.stringify(output);
+  if (!text) return null;
+  return text.split("\n").slice(0, lines).join("\n");
+}
+function formatDuration(ms) {
+  if (!Number.isFinite(ms) || ms < 1e3) return "";
+  const seconds = Math.round(ms / 1e3);
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  const rest = seconds % 60;
+  return rest ? `${minutes}m ${rest}s` : `${minutes}m`;
+}
+function itemTime(item) {
+  return item.occurredAt ? Date.parse(item.occurredAt) : Number.NaN;
+}
+function activityItemsOf(group) {
+  if (group.kind === "item") return [];
+  if (group.kind === "turn") return group.groups.flatMap(activityItemsOf);
+  const nested = group.work?.details.flatMap(activityItemsOf) ?? [];
+  return nested.length > 0 ? nested : group.items;
+}
+function toolCallsOf(items) {
+  return items.filter((item) => item.kind === "tool-call");
+}
+var plainMarkdown = (text, theme) => /* @__PURE__ */ jsx(
+  Text,
+  {
+    style: { color: theme.colors.text, fontSize: theme.type.body, lineHeight: theme.type.bodyLine },
+    children: text
+  }
+);
+function groupTurnId(group) {
+  if (group.kind === "item")
+    return "turnId" in group.item ? group.item.turnId ?? null : null;
+  const first = activityItemsOf(group)[0];
+  return first?.turnId ?? null;
+}
+function orderWorkBeforeProse(groups) {
+  const out = [...groups];
+  for (let index = 1; index < out.length; index += 1) {
+    const group = out[index];
+    if (group.kind === "item") continue;
+    const turnId = groupTurnId(group);
+    if (!turnId) continue;
+    let start = index;
+    while (start > 0) {
+      const previous = out[start - 1];
+      if (previous.kind !== "item" || previous.item.kind !== "agent-message" || groupTurnId(previous) !== turnId)
+        break;
+      start -= 1;
+    }
+    if (start < index) {
+      out.splice(index, 1);
+      out.splice(start, 0, group);
+    }
+  }
+  return out;
+}
+function AgentTimeline(props) {
+  const { theme, running } = props;
+  const groups = useMemo(() => orderWorkBeforeProse(props.groups), [props.groups]);
+  const rows = useMemo(() => {
+    let liveTurnId = null;
+    for (let index = groups.length - 1; index >= 0 && !liveTurnId; index -= 1)
+      liveTurnId = groupTurnId(groups[index]);
+    const isLive = (group) => running && group.kind !== "item" && groupTurnId(group) === liveTurnId;
+    const failedTurns = new Set(
+      groups.flatMap(
+        (group) => group.kind === "item" && group.item.kind === "turn-end" && group.item.outcome === "failed" && group.item.turnId ? [group.item.turnId] : []
+      )
+    );
+    const out = groups.map((group, index) => ({
+      key: groupKey(group, index),
+      kind: "group",
+      group,
+      live: isLive(group),
+      failed: group.kind !== "item" && (group.outcome === "failed" || failedTurns.has(groupTurnId(group) ?? ""))
+    }));
+    const needsYou = (props.approvals?.length ?? 0) > 0 || (props.humanInput?.length ?? 0) > 0;
+    if (running && !needsYou && !groups.some(isLive)) out.push({ key: "working", kind: "working" });
+    if (props.attentionPlacement !== "tray") {
+      for (const approval of props.approvals ?? [])
+        out.push({ key: `approval:${approval.id}`, kind: "approval", approval });
+      for (const request of props.humanInput ?? [])
+        out.push({ key: `question:${request.id}`, kind: "question", request });
+    }
+    return out;
+  }, [groups, running, props.approvals, props.humanInput, props.attentionPlacement]);
+  return /* @__PURE__ */ jsx(
+    FlatList,
+    {
+      contentContainerStyle: {
+        paddingTop: props.contentInsetTop ?? 12,
+        paddingBottom: props.contentInsetBottom ?? 24,
+        paddingHorizontal: theme.space.gutter,
+        flexGrow: 1
+      },
+      data: rows,
+      keyboardDismissMode: "interactive",
+      keyboardShouldPersistTaps: "handled",
+      keyExtractor: (row) => row.key,
+      ListEmptyComponent: props.emptyState ? /* @__PURE__ */ jsx(Fragment, { children: props.emptyState }) : void 0,
+      renderItem: ({ item: row }) => /* @__PURE__ */ jsx(Animated.View, { entering: FadeInDown.duration(220), layout: LinearTransition.duration(180), children: /* @__PURE__ */ jsx(TimelineRow, { ...props, groups, row }) }),
+      style: { backgroundColor: theme.colors.background }
+    }
+  );
+}
+function groupKey(group, index) {
+  if (group.kind === "item") {
+    const item = group.item;
+    return item.reconciliationKey ?? item.id ?? `item:${index}`;
+  }
+  return `${group.kind}:${group.id}`;
+}
+function TimelineRow(props) {
+  const { row, theme } = props;
+  if (row.kind === "working") return /* @__PURE__ */ jsx(WorkingLine, { theme, label: "Thinking" });
+  if (row.kind === "approval") {
+    return /* @__PURE__ */ jsx(
+      ApprovalCard,
+      {
+        approval: row.approval,
+        theme,
+        onDecision: (decision) => props.onApproval?.(row.approval.id, decision)
+      }
+    );
+  }
+  if (row.kind === "question") {
+    return /* @__PURE__ */ jsx(
+      QuestionCard,
+      {
+        request: row.request,
+        theme,
+        onAnswer: (answers) => props.onAnswer?.(row.request.id, answers)
+      }
+    );
+  }
+  const group = row.group;
+  if (group.kind === "item") return /* @__PURE__ */ jsx(ItemRow, { item: group.item, ...props });
+  const waiting = (props.approvals?.length ?? 0) > 0 || (props.humanInput?.length ?? 0) > 0;
+  return /* @__PURE__ */ jsx(
+    WorkBlock,
+    {
+      failed: row.failed,
+      group,
+      live: row.live,
+      waiting: row.live && waiting,
+      ...props
+    }
+  );
+}
+function ItemRow(props) {
+  const { item, theme } = props;
+  const render = props.renderMarkdown ?? plainMarkdown;
+  switch (item.kind) {
+    case "user-message":
+      return /* @__PURE__ */ jsx(UserMessage, { text: item.text, theme });
+    case "agent-message":
+      return /* @__PURE__ */ jsx(AssistantMessage, { item, render, theme });
+    case "turn-end":
+      return item.outcome === "failed" && item.failureText ? /* @__PURE__ */ jsx(Notice, { theme, tone: "danger", text: item.failureText }) : null;
+    default:
+      return null;
+  }
+}
+function UserMessage({ text, theme }) {
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: { alignItems: "flex-end", marginTop: theme.space.turn, marginBottom: theme.space.row },
+      children: /* @__PURE__ */ jsx(
+        View,
+        {
+          style: {
+            maxWidth: "86%",
+            backgroundColor: theme.colors.userBubble,
+            borderRadius: theme.radius.bubble,
+            paddingHorizontal: theme.type.body,
+            paddingVertical: theme.type.body * 0.6
+          },
+          children: /* @__PURE__ */ jsx(
+            Text,
+            {
+              selectable: true,
+              style: {
+                color: theme.colors.onUserBubble,
+                fontSize: theme.type.body,
+                lineHeight: theme.type.bodyLine
+              },
+              children: text
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function AssistantMessage({
+  item,
+  render,
+  theme
+}) {
+  if (!item.text.trim()) return null;
+  const commentary = item.phase === "commentary";
+  return /* @__PURE__ */ jsx(View, { style: { marginVertical: theme.space.row, opacity: commentary ? 0.82 : 1 }, children: render(item.text, theme) });
+}
+function Notice({
+  theme,
+  tone,
+  text
+}) {
+  const danger = tone === "danger";
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: {
+        flexDirection: "row",
+        gap: 10,
+        alignItems: "flex-start",
+        marginVertical: theme.space.row,
+        padding: 12,
+        borderRadius: theme.radius.card,
+        backgroundColor: danger ? theme.colors.dangerSurface : theme.colors.surface
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          AgentIcon,
+          {
+            color: danger ? theme.colors.danger : theme.colors.textMuted,
+            name: "alert",
+            size: 18
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: {
+              flex: 1,
+              color: danger ? theme.colors.danger : theme.colors.textMuted,
+              fontSize: theme.type.small,
+              lineHeight: theme.type.smallLine
+            },
+            children: text
+          }
+        )
+      ]
+    }
+  );
+}
+function WorkBlock(props) {
+  const { group, theme, live, waiting, failed } = props;
+  const items = activityItemsOf(group);
+  const prose = group.kind === "activity" ? group.items.filter((item) => item.kind === "agent-message") : [];
+  const steps = items.filter(
+    (item) => item.kind === "tool-call" || item.kind === "reasoning" || item.kind === "worker"
+  );
+  const tools = toolCallsOf(items);
+  const outcome = group.outcome;
+  const failureText = group.failureText;
+  const started = group.kind === "turn" ? Date.parse(group.startedAt) : itemTime(items[0] ?? {});
+  const ended = group.kind === "turn" ? Date.parse(group.endedAt) : itemTime(items[items.length - 1] ?? {});
+  const duration = formatDuration(ended - started);
+  const running = live && !outcome;
+  const current = running && !waiting ? [...tools].reverse().find((tool) => tool.status === "running") : void 0;
+  const render = props.renderMarkdown ?? plainMarkdown;
+  const work = steps.length === 0 ? null : theme.layout.activity === "rail" ? /* @__PURE__ */ jsx(RailSteps, { items: steps, theme, waiting }) : theme.layout.activity === "cards" ? /* @__PURE__ */ jsx(
+    CardSteps,
+    {
+      current,
+      duration,
+      failed,
+      items: steps,
+      onOpen: props.onOpenSteps,
+      running,
+      theme,
+      toolCount: tools.length,
+      waiting
+    }
+  ) : /* @__PURE__ */ jsx(
+    FoldSteps,
+    {
+      current,
+      duration,
+      failed,
+      items: steps,
+      onOpen: props.onOpenSteps,
+      running,
+      theme,
+      toolCount: tools.length,
+      waiting
+    }
+  );
+  return /* @__PURE__ */ jsxs(View, { style: { marginVertical: theme.space.row }, children: [
+    work,
+    prose.map((item) => /* @__PURE__ */ jsx(View, { style: { marginTop: theme.space.row }, children: render(item.text, theme) }, item.id)),
+    outcome === "failed" && failureText ? /* @__PURE__ */ jsx(Notice, { text: failureText, theme, tone: "danger" }) : null
+  ] });
+}
+function stepLabel(item) {
+  if (item.kind === "tool-call") return toolTitle(item);
+  if (item.kind === "reasoning") return "Thought";
+  if (item.kind === "worker") return "Worker";
+  return "Step";
+}
+var LIVE_VERBS = {
+  terminal: "Running",
+  search: "Searching",
+  edit: "Editing",
+  globe: "Browsing",
+  rocket: "Deploying"
+};
+function liveLabel(tool) {
+  const verb = LIVE_VERBS[toolIconName(tool.name)];
+  const detail = toolDetail(tool);
+  if (!verb) return detail ? `${toolTitle(tool)} \xB7 ${detail}` : toolTitle(tool);
+  return detail ? `${verb} ${detail}` : verb;
+}
+function StatusDot({
+  item,
+  theme,
+  size = 8,
+  waiting
+}) {
+  const status = item.kind === "tool-call" ? item.status : "complete";
+  const color = status === "failed" ? theme.colors.danger : status === "running" ? waiting ? theme.colors.attention : theme.colors.accent : theme.colors.textFaint;
+  return /* @__PURE__ */ jsx(View, { style: { width: size, height: size, borderRadius: size / 2, backgroundColor: color } });
+}
+function FoldSteps(props) {
+  const { theme, running } = props;
+  const [open, setOpen] = useState(false);
+  const steps = props.toolCount ? `${props.toolCount} ${props.toolCount === 1 ? "step" : "steps"}` : "";
+  const label = props.waiting ? "Waiting for you" : running ? props.current ? liveLabel(props.current) : "Working" : props.failed ? `Stopped${steps ? ` after ${steps}` : ""}` : [props.duration ? `Worked for ${props.duration}` : "Worked", steps].filter(Boolean).join(" \xB7 ");
+  return /* @__PURE__ */ jsxs(View, { children: [
+    /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityState: { expanded: open },
+        hitSlop: 8,
+        onPress: () => props.onOpen ? props.onOpen(props.items, label) : setOpen((value) => !value),
+        style: { flexDirection: "row", alignItems: "center", gap: 6, minHeight: 32 },
+        children: [
+          props.waiting ? /* @__PURE__ */ jsx(
+            View,
+            {
+              style: {
+                width: 8,
+                height: 8,
+                borderRadius: 4,
+                backgroundColor: theme.colors.attention
+              }
+            }
+          ) : running ? /* @__PURE__ */ jsx(Pulse, { theme }) : null,
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              numberOfLines: 1,
+              style: {
+                flexShrink: 1,
+                color: props.waiting ? theme.colors.attention : theme.colors.textMuted,
+                fontSize: theme.type.small + 1
+              },
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            AgentIcon,
+            {
+              color: theme.colors.textFaint,
+              name: open ? "chevron-down" : "chevron-right",
+              size: 14
+            }
+          )
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsx(
+      Animated.View,
+      {
+        entering: FadeIn.duration(160),
+        style: { marginTop: 4, marginLeft: 2, gap: 10, paddingVertical: 4 },
+        children: props.items.map((item) => /* @__PURE__ */ jsx(CompactStep, { item, theme }, item.id))
+      }
+    ) : null
+  ] });
+}
+function CompactStep({ item, theme }) {
+  const detail = item.kind === "tool-call" ? toolDetail(item) : item.kind === "reasoning" ? item.text : null;
+  return /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", gap: 10 }, children: [
+    /* @__PURE__ */ jsx(View, { style: { paddingTop: 2 }, children: /* @__PURE__ */ jsx(
+      AgentIcon,
+      {
+        color: theme.colors.textFaint,
+        name: item.kind === "tool-call" ? toolIconName(item.name) : "sparkle",
+        size: 15
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(View, { style: { flex: 1 }, children: [
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          style: {
+            color: theme.colors.text,
+            fontSize: theme.type.small,
+            lineHeight: theme.type.smallLine
+          },
+          children: stepLabel(item)
+        }
+      ),
+      detail ? /* @__PURE__ */ jsx(
+        Text,
+        {
+          numberOfLines: 2,
+          style: {
+            color: theme.colors.textMuted,
+            fontSize: theme.type.small,
+            lineHeight: theme.type.smallLine
+          },
+          children: detail
+        }
+      ) : null
+    ] })
+  ] });
+}
+function AgentStepList(props) {
+  return /* @__PURE__ */ jsx(RailSteps, { items: props.items, theme: props.theme, waiting: props.waiting ?? false });
+}
+function RailSteps({
+  items,
+  theme,
+  waiting
+}) {
+  return /* @__PURE__ */ jsx(View, { style: { paddingLeft: 4 }, children: items.map((item, index) => {
+    const detail = item.kind === "tool-call" ? toolDetail(item) : null;
+    const output = item.kind === "tool-call" && item.status !== "running" ? toolOutputPreview(item) : null;
+    const reasoning = item.kind === "reasoning" ? item.text : null;
+    const last = index === items.length - 1;
+    return /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", gap: 12 }, children: [
+      /* @__PURE__ */ jsxs(View, { style: { alignItems: "center", width: 10 }, children: [
+        /* @__PURE__ */ jsx(View, { style: { height: 6 } }),
+        /* @__PURE__ */ jsx(StatusDot, { item, theme, waiting }),
+        last ? null : /* @__PURE__ */ jsx(
+          View,
+          {
+            style: {
+              flex: 1,
+              width: StyleSheet.hairlineWidth * 2,
+              backgroundColor: theme.colors.rail,
+              marginTop: 4
+            }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(View, { style: { flex: 1, paddingBottom: last ? 0 : 14 }, children: [
+        /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 6 }, children: [
+          /* @__PURE__ */ jsx(
+            AgentIcon,
+            {
+              color: theme.colors.textMuted,
+              name: item.kind === "tool-call" ? toolIconName(item.name) : "sparkle",
+              size: 14
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: {
+                color: theme.colors.text,
+                fontSize: theme.type.small + 1,
+                fontWeight: "500"
+              },
+              children: stepLabel(item)
+            }
+          ),
+          item.kind === "tool-call" && item.status === "running" ? waiting ? /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: {
+                color: theme.colors.attention,
+                fontSize: theme.type.small,
+                fontWeight: "600"
+              },
+              children: "Waiting for you"
+            }
+          ) : /* @__PURE__ */ jsx(Pulse, { theme }) : null
+        ] }),
+        detail ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            numberOfLines: 1,
+            style: {
+              marginTop: 3,
+              color: theme.colors.textMuted,
+              fontFamily: theme.type.mono,
+              fontSize: theme.type.small - 0.5
+            },
+            children: detail
+          }
+        ) : null,
+        reasoning ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            numberOfLines: 3,
+            style: {
+              marginTop: 3,
+              color: theme.colors.textMuted,
+              fontSize: theme.type.small,
+              lineHeight: theme.type.smallLine,
+              fontStyle: "italic"
+            },
+            children: reasoning
+          }
+        ) : null,
+        output ? /* @__PURE__ */ jsx(
+          View,
+          {
+            style: {
+              marginTop: 6,
+              padding: 8,
+              borderRadius: theme.radius.control,
+              backgroundColor: theme.colors.codeBackground
+            },
+            children: /* @__PURE__ */ jsx(
+              Text,
+              {
+                numberOfLines: 3,
+                style: {
+                  color: theme.colors.textMuted,
+                  fontFamily: theme.type.mono,
+                  fontSize: theme.type.small - 1,
+                  lineHeight: theme.type.smallLine - 1
+                },
+                children: output
+              }
+            )
+          }
+        ) : null
+      ] })
+    ] }, item.id);
+  }) });
+}
+function CardSteps(props) {
+  const { theme, running } = props;
+  const [open, setOpen] = useState(false);
+  const headline = props.waiting ? "Waiting for you" : running ? props.current ? LIVE_VERBS[toolIconName(props.current.name)] ?? toolTitle(props.current) : "Working on it" : props.failed ? "Couldn't finish" : `Done \xB7 ${props.toolCount} ${props.toolCount === 1 ? "step" : "steps"}`;
+  const sub = props.waiting ? "Answer below to continue" : running ? props.current ? toolDetail(props.current) : null : props.duration ? `Took ${props.duration}` : null;
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityState: { expanded: open },
+      onPress: () => props.onOpen ? props.onOpen(props.items, headline) : setOpen((value) => !value),
+      style: {
+        borderRadius: theme.radius.card,
+        backgroundColor: theme.colors.surface,
+        borderWidth: StyleSheet.hairlineWidth,
+        borderColor: theme.colors.border,
+        padding: 16,
+        minHeight: theme.layout.target
+      },
+      children: [
+        /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 12 }, children: [
+          /* @__PURE__ */ jsx(
+            View,
+            {
+              style: {
+                width: 36,
+                height: 36,
+                borderRadius: 18,
+                alignItems: "center",
+                justifyContent: "center",
+                backgroundColor: props.waiting ? theme.colors.attention : running ? theme.colors.accent : props.failed ? theme.colors.dangerSurface : theme.colors.background
+              },
+              children: props.waiting ? /* @__PURE__ */ jsx(AgentIcon, { color: theme.colors.onAccent, name: "alert", size: 18 }) : running ? /* @__PURE__ */ jsx(Pulse, { color: theme.colors.onAccent, theme }) : props.failed ? /* @__PURE__ */ jsx(AgentIcon, { color: theme.colors.danger, name: "x", size: 18, strokeWidth: 2.5 }) : /* @__PURE__ */ jsx(AgentIcon, { color: theme.colors.success, name: "check", size: 18, strokeWidth: 2.5 })
+            }
+          ),
+          /* @__PURE__ */ jsxs(View, { style: { flex: 1 }, children: [
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                style: {
+                  color: theme.colors.text,
+                  fontSize: theme.type.body,
+                  fontWeight: theme.type.weightStrong
+                },
+                children: headline
+              }
+            ),
+            sub ? /* @__PURE__ */ jsx(
+              Text,
+              {
+                numberOfLines: 1,
+                style: { color: theme.colors.textMuted, fontSize: theme.type.small, marginTop: 2 },
+                children: sub
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ jsx(
+            AgentIcon,
+            {
+              color: theme.colors.textFaint,
+              name: open ? "chevron-down" : "chevron-right",
+              size: 20
+            }
+          )
+        ] }),
+        open ? /* @__PURE__ */ jsx(Animated.View, { entering: FadeIn.duration(160), style: { marginTop: 14, gap: 12 }, children: props.items.map((item) => /* @__PURE__ */ jsx(CompactStep, { item, theme }, item.id)) }) : null
+      ]
+    }
+  );
+}
+function WorkingLine({ theme, label }) {
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 8,
+        marginVertical: theme.space.row,
+        minHeight: 32
+      },
+      children: [
+        /* @__PURE__ */ jsx(Pulse, { theme }),
+        /* @__PURE__ */ jsx(Text, { style: { color: theme.colors.textMuted, fontSize: theme.type.small + 1 }, children: label })
+      ]
+    }
+  );
+}
+function Pulse({ theme, color }) {
+  const opacity = useSharedValue(0.35);
+  useEffect(() => {
+    opacity.value = withRepeat(withTiming(1, { duration: 700 }), -1, true);
+  }, [opacity]);
+  const style = useAnimatedStyle(() => ({ opacity: opacity.value }));
+  return /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      style: [
+        { width: 8, height: 8, borderRadius: 4, backgroundColor: color ?? theme.colors.accent },
+        style
+      ]
+    }
+  );
+}
+function AgentStepsSheet(props) {
+  const { theme } = props;
+  const insets = useSafeAreaInsets();
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      animationType: "slide",
+      onRequestClose: props.onClose,
+      presentationStyle: Platform.OS === "ios" ? "pageSheet" : "fullScreen",
+      visible: props.visible,
+      children: /* @__PURE__ */ jsxs(
+        View,
+        {
+          style: {
+            flex: 1,
+            backgroundColor: theme.colors.background,
+            paddingTop: Platform.OS === "ios" ? 0 : insets.top
+          },
+          children: [
+            /* @__PURE__ */ jsxs(
+              View,
+              {
+                style: {
+                  height: 56,
+                  flexDirection: "row",
+                  alignItems: "center",
+                  paddingHorizontal: theme.space.gutter
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      numberOfLines: 1,
+                      style: {
+                        flex: 1,
+                        color: theme.colors.text,
+                        fontSize: theme.type.body + 1,
+                        fontWeight: theme.type.weightStrong
+                      },
+                      children: props.title
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Pressable,
+                    {
+                      accessibilityRole: "button",
+                      hitSlop: 12,
+                      onPress: props.onClose,
+                      style: { minHeight: 44, justifyContent: "center" },
+                      children: /* @__PURE__ */ jsx(
+                        Text,
+                        {
+                          style: { color: theme.colors.accent, fontSize: theme.type.body, fontWeight: "600" },
+                          children: "Done"
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ScrollView,
+              {
+                contentContainerStyle: { padding: theme.space.gutter, paddingBottom: insets.bottom + 24 },
+                children: /* @__PURE__ */ jsx(AgentStepList, { items: props.steps, theme })
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+function approvalSummary(approval) {
+  return toolDetail({
+    id: approval.id,
+    name: approval.name,
+    arguments: approval.arguments});
+}
+function AgentAttentionTray(props) {
+  const { theme } = props;
+  const items = [
+    ...props.approvals.map((approval) => ({ kind: "approval", approval })),
+    ...props.humanInput.map((request) => ({ kind: "question", request }))
+  ];
+  const [selected, setSelected] = useState([]);
+  const current = items[0];
+  if (!current) return null;
+  const key = current.kind === "approval" ? `a:${current.approval.id}` : `q:${current.request.id}`;
+  const question = current.kind === "question" ? current.request.questions[0] : void 0;
+  const multi = question?.kind === "multi_select";
+  return /* @__PURE__ */ jsxs(
+    Animated.View,
+    {
+      entering: FadeInDown.duration(220),
+      exiting: FadeOutDown.duration(160),
+      layout: LinearTransition.duration(180),
+      style: {
+        marginHorizontal: 12,
+        marginBottom: 6,
+        borderRadius: theme.radius.card,
+        backgroundColor: theme.colors.surfaceRaised,
+        borderWidth: StyleSheet.hairlineWidth * 2,
+        borderColor: theme.colors.attention,
+        padding: 14,
+        gap: 10,
+        shadowColor: "#000",
+        shadowOpacity: theme.scheme === "light" ? 0.1 : 0,
+        shadowRadius: 18,
+        shadowOffset: { width: 0, height: 6 }
+      },
+      children: [
+        /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 8 }, children: [
+          /* @__PURE__ */ jsx(
+            AgentIcon,
+            {
+              color: theme.colors.attention,
+              name: current.kind === "approval" ? "alert" : "question",
+              size: 15
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: {
+                flex: 1,
+                color: theme.colors.attention,
+                fontSize: theme.type.small,
+                fontWeight: "600"
+              },
+              children: current.kind === "approval" ? "Approve to continue" : "Answer to continue"
+            }
+          ),
+          items.length > 1 ? /* @__PURE__ */ jsxs(Text, { style: { color: theme.colors.textFaint, fontSize: theme.type.small }, children: [
+            "1 of ",
+            items.length
+          ] }) : null
+        ] }),
+        current.kind === "approval" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(View, { children: [
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                style: {
+                  color: theme.colors.text,
+                  fontSize: theme.type.body,
+                  fontWeight: theme.type.weightStrong
+                },
+                children: toolDisplayName(current.approval.name, current.approval.display)
+              }
+            ),
+            approvalSummary(current.approval) ? /* @__PURE__ */ jsx(
+              Text,
+              {
+                numberOfLines: 2,
+                style: {
+                  marginTop: 2,
+                  color: theme.colors.textMuted,
+                  fontSize: theme.type.small,
+                  lineHeight: theme.type.smallLine
+                },
+                children: approvalSummary(current.approval)
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", gap: 10 }, children: [
+            /* @__PURE__ */ jsx(
+              ActionButton,
+              {
+                flex: true,
+                label: "Deny",
+                onPress: () => props.onApproval(current.approval.id, "reject"),
+                theme,
+                variant: "secondary"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ActionButton,
+              {
+                flex: true,
+                label: "Approve",
+                onPress: () => props.onApproval(current.approval.id, "approve"),
+                theme,
+                variant: "primary"
+              }
+            )
+          ] })
+        ] }) : question ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: {
+                color: theme.colors.text,
+                fontSize: theme.type.body,
+                fontWeight: theme.type.weightStrong
+              },
+              children: question.prompt
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ScrollView,
+            {
+              contentContainerStyle: { gap: 8 },
+              horizontal: true,
+              keyboardShouldPersistTaps: "handled",
+              showsHorizontalScrollIndicator: false,
+              children: question.options.map((option) => {
+                const active = selected.includes(option.id);
+                return /* @__PURE__ */ jsx(
+                  Pressable,
+                  {
+                    accessibilityRole: multi ? "checkbox" : "radio",
+                    accessibilityState: { checked: active },
+                    onPress: () => setSelected(
+                      (values) => multi ? values.includes(option.id) ? values.filter((value) => value !== option.id) : [...values, option.id] : [option.id]
+                    ),
+                    style: {
+                      minHeight: theme.layout.target - 4,
+                      paddingHorizontal: 14,
+                      borderRadius: theme.radius.control,
+                      justifyContent: "center",
+                      backgroundColor: active ? theme.colors.accent : theme.colors.surface
+                    },
+                    children: /* @__PURE__ */ jsx(
+                      Text,
+                      {
+                        style: {
+                          color: active ? theme.colors.onAccent : theme.colors.text,
+                          fontSize: theme.type.body - 1,
+                          fontWeight: "600"
+                        },
+                        children: option.label
+                      }
+                    )
+                  },
+                  option.id
+                );
+              })
+            }
+          ),
+          /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", gap: 10 }, children: [
+            current.request.allowSkip ? /* @__PURE__ */ jsx(
+              ActionButton,
+              {
+                flex: true,
+                label: "Skip",
+                onPress: () => props.onAnswer(current.request.id, null),
+                theme,
+                variant: "secondary"
+              }
+            ) : null,
+            /* @__PURE__ */ jsx(
+              ActionButton,
+              {
+                disabled: selected.length === 0,
+                flex: true,
+                label: "Send",
+                onPress: () => {
+                  props.onAnswer(current.request.id, [{ questionId: question.id, values: selected }]);
+                  setSelected([]);
+                },
+                theme,
+                variant: "primary"
+              }
+            )
+          ] })
+        ] }) : null
+      ]
+    },
+    key
+  );
+}
+function RoundButton(props) {
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityLabel: props.label,
+      accessibilityRole: "button",
+      disabled: props.disabled,
+      hitSlop: 6,
+      onPress: props.onPress,
+      style: ({ pressed }) => ({
+        width: props.size,
+        height: props.size,
+        borderRadius: props.size / 2,
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: props.background,
+        opacity: props.disabled ? 0.35 : pressed ? 0.7 : 1
+      }),
+      children: props.children
+    }
+  );
+}
+function AgentComposer(props) {
+  const { theme } = props;
+  if (theme.layout.composer === "bar") return /* @__PURE__ */ jsx(BarComposer, { ...props });
+  if (theme.layout.composer === "voice") return /* @__PURE__ */ jsx(VoiceComposer, { ...props });
+  return /* @__PURE__ */ jsx(PillComposer, { ...props });
+}
+function SendOrStop(props) {
+  const { theme, running, value } = props;
+  if (running && !value.trim()) {
+    return /* @__PURE__ */ jsx(
+      RoundButton,
+      {
+        background: theme.colors.accent,
+        label: "Stop",
+        onPress: props.onStop,
+        size: props.size,
+        children: /* @__PURE__ */ jsx(AgentIcon, { color: theme.colors.onAccent, name: "stop", size: props.size * 0.4 })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    RoundButton,
+    {
+      background: theme.colors.accent,
+      disabled: !value.trim(),
+      label: "Send",
+      onPress: props.onSend,
+      size: props.size,
+      children: /* @__PURE__ */ jsx(
+        AgentIcon,
+        {
+          color: theme.colors.onAccent,
+          name: "arrow-up",
+          size: props.size * 0.5,
+          strokeWidth: 2.4
+        }
+      )
+    }
+  );
+}
+function Input(props) {
+  return /* @__PURE__ */ jsx(
+    TextInput,
+    {
+      accessibilityLabel: props.placeholder,
+      multiline: true,
+      onChangeText: props.onChangeText,
+      placeholder: props.placeholder,
+      placeholderTextColor: props.theme.colors.textFaint,
+      style: {
+        flex: 1,
+        color: props.theme.colors.text,
+        fontSize: props.fontSize,
+        minHeight: 40,
+        maxHeight: 160,
+        paddingTop: Platform.OS === "ios" ? 10 : 8,
+        paddingBottom: Platform.OS === "ios" ? 10 : 8
+      },
+      value: props.value
+    }
+  );
+}
+function PillComposer(props) {
+  const { theme } = props;
+  const glass = Platform.OS === "ios" && isLiquidGlassAvailable();
+  const inner = /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: {
+        flexDirection: "row",
+        alignItems: "flex-end",
+        gap: 6,
+        paddingHorizontal: 6,
+        paddingVertical: 6
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          RoundButton,
+          {
+            background: "transparent",
+            label: "Add attachment",
+            onPress: props.onAttach,
+            size: 36,
+            children: /* @__PURE__ */ jsx(AgentIcon, { color: theme.colors.text, name: "plus", size: 20 })
+          }
+        ),
+        /* @__PURE__ */ jsx(Input, { ...props, fontSize: theme.type.body }),
+        props.value.trim() || props.running ? /* @__PURE__ */ jsx(SendOrStop, { ...props, size: 36 }) : /* @__PURE__ */ jsx(RoundButton, { background: "transparent", label: "Dictate", onPress: props.onVoice, size: 36, children: /* @__PURE__ */ jsx(AgentIcon, { color: theme.colors.text, name: "mic", size: 19 }) })
+      ]
+    }
+  );
+  const shell = {
+    borderRadius: theme.radius.composer,
+    overflow: "hidden",
+    borderWidth: glass ? 0 : StyleSheet.hairlineWidth * 2,
+    borderColor: theme.colors.border,
+    backgroundColor: glass ? void 0 : theme.colors.surfaceRaised,
+    shadowColor: "#000",
+    shadowOpacity: theme.scheme === "light" ? 0.08 : 0,
+    shadowRadius: 16,
+    shadowOffset: { width: 0, height: 6 }
+  };
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: {
+        paddingHorizontal: 12,
+        paddingTop: 6,
+        paddingBottom: Math.max(props.bottomInset, 10)
+      },
+      children: glass ? /* @__PURE__ */ jsx(GlassView, { glassEffectStyle: "regular", isInteractive: true, style: shell, children: inner }) : /* @__PURE__ */ jsx(View, { style: shell, children: inner })
+    }
+  );
+}
+function BarComposer(props) {
+  const { theme } = props;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: {
+        borderTopWidth: StyleSheet.hairlineWidth,
+        borderColor: theme.colors.border,
+        backgroundColor: theme.colors.surfaceRaised,
+        paddingHorizontal: 12,
+        paddingTop: 8,
+        paddingBottom: Math.max(props.bottomInset, 8),
+        gap: 6
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            style: {
+              borderRadius: theme.radius.composer,
+              borderWidth: StyleSheet.hairlineWidth * 2,
+              borderColor: theme.colors.border,
+              backgroundColor: theme.colors.background,
+              paddingHorizontal: 12
+            },
+            children: /* @__PURE__ */ jsx(Input, { ...props, fontSize: theme.type.body })
+          }
+        ),
+        /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 8 }, children: [
+          /* @__PURE__ */ jsx(
+            RoundButton,
+            {
+              background: theme.colors.surface,
+              label: "Add attachment",
+              onPress: props.onAttach,
+              size: 34,
+              children: /* @__PURE__ */ jsx(AgentIcon, { color: theme.colors.text, name: "plus", size: 18 })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            RoundButton,
+            {
+              background: theme.colors.surface,
+              label: "Dictate",
+              onPress: props.onVoice,
+              size: 34,
+              children: /* @__PURE__ */ jsx(AgentIcon, { color: theme.colors.text, name: "mic", size: 17 })
+            }
+          ),
+          /* @__PURE__ */ jsx(View, { style: { flex: 1, flexDirection: "row", gap: 6 }, children: props.accessories }),
+          /* @__PURE__ */ jsx(SendOrStop, { ...props, size: 34 })
+        ] })
+      ]
+    }
+  );
+}
+function VoiceComposer(props) {
+  const { theme } = props;
+  const hasText = props.value.trim().length > 0;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: {
+        flexDirection: "row",
+        alignItems: "flex-end",
+        gap: 10,
+        paddingHorizontal: 14,
+        paddingTop: 8,
+        paddingBottom: Math.max(props.bottomInset, 12)
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          View,
+          {
+            style: {
+              flex: 1,
+              flexDirection: "row",
+              alignItems: "flex-end",
+              minHeight: 56,
+              borderRadius: theme.radius.composer,
+              backgroundColor: theme.colors.surface,
+              borderWidth: StyleSheet.hairlineWidth * 2,
+              borderColor: theme.colors.border,
+              paddingLeft: 6,
+              paddingRight: 14
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                RoundButton,
+                {
+                  background: "transparent",
+                  label: "Add photo or file",
+                  onPress: props.onAttach,
+                  size: 44,
+                  children: /* @__PURE__ */ jsx(AgentIcon, { color: theme.colors.text, name: "plus", size: 24 })
+                }
+              ),
+              /* @__PURE__ */ jsx(Input, { ...props, fontSize: theme.type.body })
+            ]
+          }
+        ),
+        hasText || props.running ? /* @__PURE__ */ jsx(SendOrStop, { ...props, size: 56 }) : /* @__PURE__ */ jsx(
+          RoundButton,
+          {
+            background: theme.colors.accent,
+            label: "Talk",
+            onPress: props.onVoice,
+            size: 56,
+            children: /* @__PURE__ */ jsx(AgentIcon, { color: theme.colors.onAccent, name: "mic", size: 26 })
+          }
+        )
+      ]
+    }
+  );
+}
+function ComposerChip({ theme, label }) {
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: {
+        height: 28,
+        paddingHorizontal: 10,
+        borderRadius: 14,
+        backgroundColor: theme.colors.surface,
+        justifyContent: "center"
+      },
+      children: /* @__PURE__ */ jsx(Text, { style: { color: theme.colors.textMuted, fontSize: 12, fontWeight: "500" }, children: label })
+    }
+  );
+}
+
+// src/ui/theme.ts
+var mono = "Menlo";
+var calm = {
+  id: "calm",
+  name: "Calm",
+  summary: "Prose-first conversation; agent work folds into one quiet line.",
+  theme: (scheme) => ({
+    id: "calm",
+    scheme,
+    colors: scheme === "light" ? {
+      background: "#FFFFFF",
+      surface: "#F6F6F4",
+      surfaceRaised: "#FFFFFF",
+      border: "#E7E6E2",
+      text: "#1A1A19",
+      textMuted: "#6B6A66",
+      textFaint: "#A3A19C",
+      accent: "#1A1A19",
+      onAccent: "#FFFFFF",
+      userBubble: "#F0EFEC",
+      onUserBubble: "#1A1A19",
+      attention: "#C2410C",
+      attentionSurface: "#FFF4ED",
+      success: "#15803D",
+      danger: "#B42318",
+      dangerSurface: "#FEF3F2",
+      codeBackground: "#F6F6F4",
+      rail: "#E7E6E2"
+    } : {
+      background: "#161615",
+      surface: "#21211F",
+      surfaceRaised: "#2A2A28",
+      border: "#33332F",
+      text: "#F2F1EE",
+      textMuted: "#A3A19C",
+      textFaint: "#6B6A66",
+      accent: "#F2F1EE",
+      onAccent: "#161615",
+      userBubble: "#2A2A28",
+      onUserBubble: "#F2F1EE",
+      attention: "#FB923C",
+      attentionSurface: "#2B1D14",
+      success: "#4ADE80",
+      danger: "#F97066",
+      dangerSurface: "#2D1715",
+      codeBackground: "#21211F",
+      rail: "#33332F"
+    },
+    type: {
+      body: 16,
+      bodyLine: 24,
+      small: 13,
+      smallLine: 18,
+      title: 20,
+      mono,
+      weightStrong: "600"
+    },
+    radius: { bubble: 20, card: 16, composer: 26, control: 18 },
+    space: { gutter: 20, row: 10, turn: 28 },
+    layout: { activity: "fold", composer: "pill", userMessage: "bubble", target: 44 }
+  })
+};
+var workbench = {
+  id: "workbench",
+  name: "Workbench",
+  summary: "Every step on a visible rail; dense, inspectable, built for long agent runs.",
+  theme: (scheme) => ({
+    id: "workbench",
+    scheme,
+    colors: scheme === "light" ? {
+      background: "#FBFBFC",
+      surface: "#F1F2F5",
+      surfaceRaised: "#FFFFFF",
+      border: "#E2E4EA",
+      text: "#0F1115",
+      textMuted: "#5B6170",
+      textFaint: "#9AA0AD",
+      accent: "#3B5BDB",
+      onAccent: "#FFFFFF",
+      userBubble: "#3B5BDB",
+      onUserBubble: "#FFFFFF",
+      attention: "#D97706",
+      attentionSurface: "#FFF8EB",
+      success: "#12B76A",
+      danger: "#E5484D",
+      dangerSurface: "#FFF0F0",
+      codeBackground: "#F1F2F5",
+      rail: "#D5D8E0"
+    } : {
+      background: "#0D0F13",
+      surface: "#161920",
+      surfaceRaised: "#1C2029",
+      border: "#262A35",
+      text: "#E8EAF0",
+      textMuted: "#9AA0AD",
+      textFaint: "#5B6170",
+      accent: "#7C93FF",
+      onAccent: "#0D0F13",
+      userBubble: "#2A3566",
+      onUserBubble: "#E8EAF0",
+      attention: "#FBBF24",
+      attentionSurface: "#2A2110",
+      success: "#3DD68C",
+      danger: "#FF6369",
+      dangerSurface: "#2A1416",
+      codeBackground: "#161920",
+      rail: "#2E3340"
+    },
+    type: {
+      body: 15,
+      bodyLine: 22,
+      small: 12,
+      smallLine: 16,
+      title: 18,
+      mono,
+      weightStrong: "600"
+    },
+    radius: { bubble: 14, card: 12, composer: 14, control: 10 },
+    space: { gutter: 16, row: 8, turn: 22 },
+    layout: { activity: "rail", composer: "bar", userMessage: "bubble", target: 44 }
+  })
+};
+var field = {
+  id: "field",
+  name: "Field",
+  summary: "Large type and targets, decisions as bold cards, voice-first. Usable with gloves.",
+  theme: (scheme) => ({
+    id: "field",
+    scheme,
+    colors: scheme === "light" ? {
+      background: "#F4F3EF",
+      surface: "#FFFFFF",
+      surfaceRaised: "#FFFFFF",
+      border: "#E3E1DA",
+      text: "#121212",
+      textMuted: "#5C5A55",
+      textFaint: "#97948C",
+      accent: "#1F5FD6",
+      onAccent: "#FFFFFF",
+      userBubble: "#121212",
+      onUserBubble: "#FFFFFF",
+      attention: "#E8590C",
+      attentionSurface: "#FFF1E6",
+      success: "#2F9E44",
+      danger: "#C92A2A",
+      dangerSurface: "#FFF0F0",
+      codeBackground: "#EFEDE7",
+      rail: "#E3E1DA"
+    } : {
+      background: "#111110",
+      surface: "#1D1C1A",
+      surfaceRaised: "#252421",
+      border: "#302E2A",
+      text: "#F5F4F0",
+      textMuted: "#B1AEA6",
+      textFaint: "#77746D",
+      accent: "#5C8DF6",
+      onAccent: "#0B0B0A",
+      userBubble: "#F5F4F0",
+      onUserBubble: "#111110",
+      attention: "#FF8A3D",
+      attentionSurface: "#2E1F13",
+      success: "#51CF66",
+      danger: "#FF6B6B",
+      dangerSurface: "#2E1616",
+      codeBackground: "#1D1C1A",
+      rail: "#302E2A"
+    },
+    type: {
+      body: 18,
+      bodyLine: 27,
+      small: 15,
+      smallLine: 20,
+      title: 23,
+      mono,
+      weightStrong: "700"
+    },
+    radius: { bubble: 22, card: 20, composer: 30, control: 22 },
+    space: { gutter: 18, row: 12, turn: 30 },
+    layout: { activity: "cards", composer: "voice", userMessage: "bubble", target: 56 }
+  })
+};
+var agentDirections = [calm, workbench, field];
+function agentTheme(direction, scheme) {
+  return (agentDirections.find((entry) => entry.id === direction) ?? calm).theme(scheme);
+}
+
+export { ActionButton, AgentAttentionTray, AgentComposer, AgentIcon, AgentStepList, AgentStepsSheet, AgentTimeline, ApprovalCard, ComposerChip, QuestionCard, UserMessage, WorkingLine, agentDirections, agentTheme, formatDuration, toolDetail, toolIconName, toolOutputPreview, toolTitle };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map