{"slug":"agent-activity","name":"Agent Activity","description":"Steps, searches and tool calls in one live log.","group":"AI agents","detail_url":"https://beui.dev/native/r/agent-activity","page_url":"https://beui.dev/react-native/agent-activity","expo_go_url":"exp://u.expo.dev/93a3a95c-6dc2-4adb-b57c-efbecf859f25/--/agent-activity?runtime-version=exposdk%3A57.0.0&channel-name=production","source_url":"https://github.com/starc007/beui-native/tree/main/src/components/agent-activity","libraries":["react","react-native","react-native-reanimated","react-native-svg","react-native-worklets","uniwind"],"install":["npx expo install react-native-reanimated react-native-svg react-native-worklets","npm install uniwind tailwindcss"],"setup":["Quickest: run `npx beui-native add <slug>` from the app's root. It writes the files below and installs the libraries.","Copy the files into the app and keep their folder layout: components import the shared files by relative path.","Add the theme tokens once, imported after Tailwind and Uniwind in the CSS file Uniwind reads.","Wrap the app in GestureHandlerRootView if it uses react-native-gesture-handler and isn't already.","Works in Expo and in bare React Native. Every component honors the system Reduce Motion setting."],"files":[{"path":"src/components/agent-activity/activity-row.tsx","content":"import { type ReactNode, useEffect } from \"react\";\nimport { Pressable, StyleSheet, Text, View } from \"react-native\";\nimport Animated, {\n  cancelAnimation,\n  ReduceMotion,\n  useAnimatedStyle,\n  useSharedValue,\n  withRepeat,\n  withTiming,\n} from \"react-native-reanimated\";\nimport { useResolveClassNames } from \"uniwind\";\nimport {\n  CheckGlyph,\n  FileGlyph,\n  GlobeGlyph,\n  ImageGlyph,\n  MessageGlyph,\n  PencilGlyph,\n  SearchGlyph,\n  SparkleGlyph,\n  TerminalGlyph,\n  WrenchGlyph,\n} from \"../../primitives/agent-icons\";\nimport { RiseIn } from \"../../primitives/rise-in\";\nimport type {\n  AgentActivityItem,\n  AgentActivitySearch,\n  AgentActivityStep,\n  AgentActivityTool,\n  AgentActivityTrace,\n  AgentSearchResult,\n} from \"./types\";\n\n/** Plain strings take the given text style; other nodes render as they are. */\nexport function textOf(node: ReactNode, className: string, lines?: number) {\n  return typeof node === \"string\" || typeof node === \"number\" ? (\n    <Text numberOfLines={lines} className={className}>\n      {node}\n    </Text>\n  ) : (\n    node\n  );\n}\n\nfunction useMuted() {\n  return useResolveClassNames(\"text-muted\").color;\n}\n\nfunction Halo({ reduce }: { reduce: boolean }) {\n  const pulse = useSharedValue(0);\n  useEffect(() => {\n    if (reduce) {\n      cancelAnimation(pulse);\n      pulse.value = 0.5;\n      return;\n    }\n    pulse.value = withRepeat(\n      withTiming(1, { duration: 750, reduceMotion: ReduceMotion.Never }),\n      -1,\n      true,\n    );\n    return () => cancelAnimation(pulse);\n  }, [pulse, reduce]);\n  const style = useAnimatedStyle(() => ({\n    opacity: 0.35 + pulse.value * 0.45,\n  }));\n  return (\n    <View style={styles.active}>\n      <Animated.View\n        style={[StyleSheet.absoluteFill, styles.halo, style]}\n        className=\"bg-primary/15\"\n      />\n      <View style={styles.dot} className=\"bg-primary\" />\n    </View>\n  );\n}\n\nfunction StepRow({\n  item,\n  reduce,\n  connect,\n}: {\n  item: AgentActivityStep;\n  reduce: boolean;\n  connect: boolean;\n}) {\n  const muted = useMuted();\n  const status = item.status ?? \"complete\";\n  return (\n    <View style={styles.stepRow} className=\"rounded-md px-1.5 py-1\">\n      <View style={styles.stepIcon}>\n        {status === \"complete\" ? (\n          <CheckGlyph size={16} color={muted} strokeWidth={1.8} />\n        ) : status === \"active\" ? (\n          <Halo reduce={reduce} />\n        ) : (\n          <View style={styles.pending} className=\"border-muted\" />\n        )}\n      </View>\n      {/* Joins this step's mark to the next one, so the run reads as a sequence. */}\n      {connect ? (\n        <View style={styles.connector} className=\"bg-border-strong\" />\n      ) : null}\n      <View style={styles.flex}>\n        {textOf(\n          item.label,\n          `text-sm leading-5 ${status === \"pending\" ? \"text-muted/60\" : status === \"active\" ? \"font-medium text-foreground\" : \"text-foreground/80\"}`,\n        )}\n      </View>\n      {item.meta ? textOf(item.meta, \"text-sm leading-5 text-muted/60\") : null}\n    </View>\n  );\n}\n\nfunction ResultRow({\n  result,\n  reduce,\n  onOpenResult,\n}: {\n  result: AgentSearchResult;\n  reduce: boolean;\n  onOpenResult?: (result: AgentSearchResult) => void;\n}) {\n  const muted = useMuted();\n  const content = (\n    <>\n      <View style={styles.resultIcon}>\n        {result.icon ?? <GlobeGlyph size={12} color={muted} />}\n      </View>\n      <View style={styles.resultText}>\n        {textOf(result.title, \"shrink text-sm font-medium text-foreground\", 1)}\n        {result.domain\n          ? textOf(result.domain, \"shrink text-sm text-muted/60\", 1)\n          : null}\n      </View>\n    </>\n  );\n  return (\n    <RiseIn reduce={reduce}>\n      {result.url && onOpenResult ? (\n        <Pressable\n          accessibilityRole=\"link\"\n          onPress={() => onOpenResult(result)}\n          style={styles.resultRow}\n          className=\"rounded-md px-1.5 py-1 active:bg-surface\"\n        >\n          {content}\n        </Pressable>\n      ) : (\n        <View style={styles.resultRow} className=\"px-1.5 py-1\">\n          {content}\n        </View>\n      )}\n    </RiseIn>\n  );\n}\n\nfunction SearchRow({\n  item,\n  reduce,\n  onOpenResult,\n}: {\n  item: AgentActivitySearch;\n  reduce: boolean;\n  onOpenResult?: (result: AgentSearchResult) => void;\n}) {\n  const muted = useMuted();\n  return (\n    <View style={styles.gap}>\n      <View style={styles.queryRow} className=\"px-1.5 py-1\">\n        <SearchGlyph size={16} color={muted} strokeWidth={1.7} />\n        {textOf(item.query, \"shrink text-sm text-muted\", 1)}\n      </View>\n      <View style={[styles.gap, styles.results]}>\n        {item.results?.map((result) => (\n          <ResultRow\n            key={result.id}\n            result={result}\n            reduce={reduce}\n            onOpenResult={onOpenResult}\n          />\n        ))}\n        {item.moreCount ? (\n          <RiseIn reduce={reduce}>\n            <Text className=\"py-1 pl-8 text-sm text-muted/60\">\n              +{item.moreCount} more\n            </Text>\n          </RiseIn>\n        ) : null}\n      </View>\n    </View>\n  );\n}\n\nfunction toolIcon(action: string, color: unknown) {\n  const props = { size: 16, color: color as string };\n  if (action === \"read\") return <FileGlyph {...props} />;\n  if (action === \"edit\" || action === \"write\")\n    return <PencilGlyph {...props} />;\n  if (action === \"run\") return <TerminalGlyph {...props} />;\n  return <WrenchGlyph {...props} />;\n}\n\nfunction Chip({ children, grow }: { children: ReactNode; grow?: boolean }) {\n  return (\n    <View\n      style={grow ? styles.flex : styles.shrink}\n      className=\"rounded-lg bg-surface px-2.5 py-1\"\n    >\n      {textOf(children, \"font-mono text-xs text-muted\", 1)}\n    </View>\n  );\n}\n\nfunction ToolRow({ item }: { item: AgentActivityTool }) {\n  const muted = useMuted();\n  const label = item.action.charAt(0).toUpperCase() + item.action.slice(1);\n  return (\n    <View style={styles.toolRow} className=\"px-1.5 py-0.5\">\n      {toolIcon(item.action, muted)}\n      <Text className=\"text-sm font-medium leading-5 text-foreground\">\n        {label}\n      </Text>\n      <Chip grow>{item.target}</Chip>\n      {item.additions !== undefined || item.deletions !== undefined ? (\n        <View style={styles.counts}>\n          {item.additions !== undefined ? (\n            <Text\n              className=\"font-mono text-xs text-success\"\n              style={styles.tabular}\n            >\n              +{item.additions}\n            </Text>\n          ) : null}\n          {item.deletions !== undefined ? (\n            <Text\n              className=\"font-mono text-xs text-destructive\"\n              style={styles.tabular}\n            >\n              −{item.deletions}\n            </Text>\n          ) : null}\n        </View>\n      ) : null}\n    </View>\n  );\n}\n\nfunction traceIcon(kind: string, color: unknown) {\n  const props = { size: 16, color: color as string };\n  if (kind === \"thinking\") return <SparkleGlyph {...props} />;\n  if (kind === \"message\") return <MessageGlyph {...props} />;\n  if (kind === \"write\") return <PencilGlyph {...props} />;\n  if (kind === \"run\") return <TerminalGlyph {...props} />;\n  if (kind === \"read\") return <ImageGlyph {...props} />;\n  return <WrenchGlyph {...props} />;\n}\n\nfunction TraceRow({ item }: { item: AgentActivityTrace }) {\n  const muted = useMuted();\n  return (\n    <View style={styles.toolRow} className=\"px-1.5 py-0.5\">\n      {item.icon ?? traceIcon(item.kind, muted)}\n      {textOf(item.label, \"text-sm font-medium leading-5 text-foreground\")}\n      {item.detail ? <Chip>{item.detail}</Chip> : null}\n    </View>\n  );\n}\n\nexport function ActivityRow({\n  item,\n  reduce,\n  onOpenResult,\n  connect = false,\n}: {\n  item: AgentActivityItem;\n  reduce: boolean;\n  onOpenResult?: (result: AgentSearchResult) => void;\n  /** Draws a line from this step's mark to the next step's. */\n  connect?: boolean;\n}) {\n  switch (item.type) {\n    case \"step\":\n      return <StepRow item={item} reduce={reduce} connect={connect} />;\n    case \"text\":\n      return textOf(\n        item.content,\n        \"rounded-md px-1.5 py-1 text-sm leading-5 text-muted\",\n      );\n    case \"search\":\n      return (\n        <SearchRow item={item} reduce={reduce} onOpenResult={onOpenResult} />\n      );\n    case \"tool\":\n      return <ToolRow item={item} />;\n    case \"trace\":\n      return <TraceRow item={item} />;\n  }\n}\n\nconst styles = StyleSheet.create({\n  flex: { flex: 1, minWidth: 0 },\n  shrink: { flexShrink: 1, minWidth: 0 },\n  gap: { gap: 2 },\n  results: { paddingLeft: 16 },\n  stepRow: {\n    flexDirection: \"row\",\n    alignItems: \"flex-start\",\n    gap: 10,\n    minHeight: 28,\n  },\n  stepIcon: {\n    width: 16,\n    height: 16,\n    marginTop: 2,\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  },\n  active: {\n    width: 12,\n    height: 12,\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  },\n  halo: { borderRadius: 6 },\n  dot: { width: 6, height: 6, borderRadius: 3 },\n  // From under the mark, through the row's bottom padding and the gap, to the\n  // top of the next mark.\n  connector: {\n    position: \"absolute\",\n    left: 6 + 7.5,\n    top: 4 + 2 + 16 + 2,\n    bottom: -4,\n    width: 1,\n  },\n  pending: { width: 11, height: 11, borderRadius: 6, borderWidth: 1.5 },\n  queryRow: {\n    flexDirection: \"row\",\n    alignItems: \"center\",\n    gap: 10,\n    minHeight: 28,\n  },\n  resultRow: {\n    flexDirection: \"row\",\n    alignItems: \"center\",\n    gap: 8,\n    minHeight: 28,\n  },\n  resultIcon: {\n    width: 20,\n    height: 20,\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  },\n  resultText: {\n    flex: 1,\n    minWidth: 0,\n    flexDirection: \"row\",\n    alignItems: \"center\",\n    gap: 8,\n  },\n  toolRow: {\n    flexDirection: \"row\",\n    alignItems: \"center\",\n    gap: 10,\n    minHeight: 32,\n  },\n  counts: { flexDirection: \"row\", alignItems: \"center\", gap: 8 },\n  tabular: { fontVariant: [\"tabular-nums\"] },\n});\n","type":"component"},{"path":"src/components/agent-activity/agent-activity.tsx","content":"import { type ReactNode, useEffect, useRef, useState } from \"react\";\nimport {\n  Pressable,\n  ScrollView,\n  StyleSheet,\n  View,\n  type ViewProps,\n} from \"react-native\";\nimport Animated, {\n  useAnimatedStyle,\n  useSharedValue,\n  withSpring,\n} from \"react-native-reanimated\";\nimport { useResolveClassNames } from \"uniwind\";\nimport { useReducedMotionPreference } from \"../../hooks/use-reduced-motion\";\nimport { ChevronDownGlyph } from \"../../primitives/agent-icons\";\nimport { Disclosure } from \"../../primitives/disclosure\";\nimport { FadeEdge } from \"../../primitives/fade-edge\";\nimport { RiseIn } from \"../../primitives/rise-in\";\nimport { SPRING_LAYOUT, SPRING_SWAP } from \"../../styles/motion\";\nimport { ThinkingShimmer } from \"../loading-states/thinking-shimmer\";\nimport { ActivityRow, textOf } from \"./activity-row\";\nimport type {\n  AgentActivityContentType,\n  AgentActivityItem,\n  AgentActivityStatus,\n  AgentSearchResult,\n} from \"./types\";\n\nconst EDGE = 12;\n\nfunction formatDuration(seconds: number) {\n  const total = Math.max(0, Math.round(seconds));\n  if (total < 60) return `${total}s`;\n  const minutes = Math.floor(total / 60);\n  const rest = total % 60;\n  return rest === 0 ? `${minutes}m` : `${minutes}m ${rest}s`;\n}\n\nfunction contentTypeOf(\n  items: AgentActivityItem[],\n  fallback?: AgentActivityContentType,\n) {\n  const first = items[0];\n  if (!first) return fallback ?? \"mixed\";\n  return items.every((item) => item.type === first.type) ? first.type : \"mixed\";\n}\n\nfunction activeLabelFor(type: AgentActivityContentType) {\n  if (type === \"search\") return \"Searching the web…\";\n  if (type === \"tool\") return \"Running tools…\";\n  if (type === \"trace\") return \"Working through the run…\";\n  if (type === \"mixed\") return \"Working through it…\";\n  return \"Thinking…\";\n}\n\nfunction summaryFor(\n  type: AgentActivityContentType,\n  items: AgentActivityItem[],\n  duration: number,\n) {\n  const n = items.length;\n  if (type === \"step\" || type === \"text\")\n    return `Thought for ${formatDuration(duration)}`;\n  if (type === \"search\") return \"Searched the web\";\n  if (type === \"tool\") return `Ran ${n} ${n === 1 ? \"tool\" : \"tools\"}`;\n  if (type === \"trace\") {\n    const messages = items.filter(\n      (item) =>\n        item.type === \"trace\" &&\n        (item.kind === \"thinking\" || item.kind === \"message\"),\n    ).length;\n    const tools = n - messages;\n    return `${tools} ${tools === 1 ? \"tool call\" : \"tool calls\"}, ${messages} ${messages === 1 ? \"message\" : \"messages\"}`;\n  }\n  return `Completed ${n} ${n === 1 ? \"step\" : \"steps\"}`;\n}\n\nexport type AgentActivityProps = Omit<ViewProps, \"children\"> & {\n  /** Entries in order. Append or update them as events stream in. */\n  items: AgentActivityItem[];\n  /** The kind of activity expected before the first item arrives. */\n  contentType?: AgentActivityContentType;\n  /** Defaults to \"working\". A working run always stays open. */\n  status?: AgentActivityStatus;\n  /** Elapsed seconds, for the \"Thought for\" summary. Defaults to 0. */\n  duration?: number;\n  /** Controlled open state once the run completes. */\n  open?: boolean;\n  /** Defaults to false. */\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** Folds the log away when the run completes. Defaults to true. */\n  collapseOnComplete?: boolean;\n  /** Replaces the working label, which is derived from the items. */\n  activeLabel?: string;\n  /** Replaces the completed summary, which is derived from the items. */\n  summary?: ReactNode;\n  /** Tallest the log grows before it starts gliding. Defaults to 208. */\n  maxHeight?: number;\n  /** Called when a search result with a `url` is tapped. */\n  onOpenResult?: (result: AgentSearchResult) => void;\n  className?: string;\n  contentClassName?: string;\n  /** Shows rows and folds without motion, independently of the system preference. */\n  disableAnimation?: boolean;\n};\n\n/**\n * What an agent is doing, as it does it: steps, reasoning, searches, tool\n * calls and traces in one log. While working, the newest entry stays pinned\n * to the bottom as the log glides up; once done, it folds into a summary.\n */\nexport function AgentActivity({\n  items,\n  contentType,\n  status = \"working\",\n  duration = 0,\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  collapseOnComplete = true,\n  activeLabel,\n  summary,\n  maxHeight = 208,\n  onOpenResult,\n  className = \"\",\n  contentClassName = \"\",\n  disableAnimation = false,\n  ...props\n}: AgentActivityProps) {\n  const reducedMotion = useReducedMotionPreference();\n  const reduce = reducedMotion || disableAnimation;\n  const working = status === \"working\";\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const open = controlledOpen ?? internalOpen;\n  const expanded = working || open;\n  const [contentHeight, setContentHeight] = useState(0);\n  const scrollRef = useRef<ScrollView>(null);\n  const previousStatus = useRef(status);\n  const offset = useSharedValue(0);\n  const turn = useSharedValue(expanded ? 1 : 0);\n  const { color: muted } = useResolveClassNames(\"text-muted\");\n  const { backgroundColor: page } = useResolveClassNames(\"bg-background\");\n\n  const setOpen = (next: boolean) => {\n    if (controlledOpen === undefined) setInternalOpen(next);\n    onOpenChange?.(next);\n  };\n\n  // Folds (or stays open) once, as the run completes.\n  useEffect(() => {\n    const was = previousStatus.current;\n    previousStatus.current = status;\n    if (was === \"working\" && status === \"complete\")\n      setOpen(!collapseOnComplete);\n  });\n\n  const capped = contentHeight > maxHeight;\n  const viewport = Math.min(contentHeight, maxHeight);\n  const glide = working ? Math.min(0, viewport - contentHeight) : 0;\n\n  useEffect(() => {\n    offset.value = reduce ? glide : withSpring(glide, SPRING_LAYOUT);\n  }, [glide, offset, reduce]);\n  useEffect(() => {\n    turn.value = reduce\n      ? expanded\n        ? 1\n        : 0\n      : withSpring(expanded ? 1 : 0, SPRING_SWAP);\n  }, [expanded, reduce, turn]);\n\n  const listStyle = useAnimatedStyle(() => ({\n    transform: [{ translateY: offset.value }],\n  }));\n  const chevronStyle = useAnimatedStyle(() => ({\n    transform: [{ rotate: `${turn.value * 180}deg` }],\n  }));\n\n  const type = contentTypeOf(items, contentType);\n  const label = activeLabel ?? activeLabelFor(type);\n  const done = summary ?? summaryFor(type, items, duration);\n\n  return (\n    <View\n      accessibilityState={{ busy: working }}\n      className={`w-full ${className}`}\n      {...props}\n    >\n      {working ? (\n        <View accessibilityLiveRegion=\"polite\" style={styles.header}>\n          <ThinkingShimmer>{label}</ThinkingShimmer>\n        </View>\n      ) : (\n        <Pressable\n          accessibilityRole=\"button\"\n          accessibilityState={{ expanded }}\n          onPress={() => {\n            const next = !open;\n            setOpen(next);\n            // Read a reopened log from the start.\n            if (next) scrollRef.current?.scrollTo({ y: 0, animated: false });\n          }}\n          hitSlop={8}\n          style={styles.header}\n        >\n          <View style={styles.summary}>\n            {textOf(done, \"text-sm font-medium text-muted\", 1)}\n          </View>\n          <Animated.View style={chevronStyle}>\n            <ChevronDownGlyph size={14} color={muted} />\n          </Animated.View>\n        </Pressable>\n      )}\n      <Disclosure open={expanded} reduce={reduce}>\n        {/* Sizes to its content up to maxHeight, so there's no height to go stale. */}\n        <View>\n          <ScrollView\n            ref={scrollRef}\n            style={[styles.fixed, { maxHeight }]}\n            scrollEnabled={!working && capped}\n            showsVerticalScrollIndicator={false}\n            nestedScrollEnabled\n          >\n            <Animated.View style={listStyle}>\n              <View\n                onLayout={({ nativeEvent }) =>\n                  setContentHeight(nativeEvent.layout.height)\n                }\n                className={`gap-0.5 py-2 ${contentClassName}`}\n              >\n                {items.map((item, index) => (\n                  <RiseIn key={item.id} reduce={reduce}>\n                    <ActivityRow\n                      item={item}\n                      reduce={reduce}\n                      onOpenResult={onOpenResult}\n                      connect={\n                        item.type === \"step\" &&\n                        items[index + 1]?.type === \"step\"\n                      }\n                    />\n                  </RiseIn>\n                ))}\n              </View>\n            </Animated.View>\n          </ScrollView>\n          {capped ? <FadeEdge color={page} edge=\"top\" height={EDGE} /> : null}\n          {capped && !working ? <FadeEdge color={page} height={EDGE} /> : null}\n        </View>\n      </Disclosure>\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  // Scroll views shrink to fit the space above them; inside a closing\n  // disclosure that would collapse the log to nothing.\n  fixed: { flexGrow: 0, flexShrink: 0 },\n  header: {\n    flexDirection: \"row\",\n    alignItems: \"center\",\n    gap: 6,\n    height: 28,\n    minWidth: 0,\n  },\n  summary: { flexShrink: 1, minWidth: 0 },\n});\n","type":"component"},{"path":"src/components/agent-activity/index.ts","content":"export type { AgentActivityProps } from \"./agent-activity\";\nexport { AgentActivity } from \"./agent-activity\";\nexport type {\n  AgentActivityContentType,\n  AgentActivityItem,\n  AgentActivitySearch,\n  AgentActivityStatus,\n  AgentActivityStep,\n  AgentActivityText,\n  AgentActivityTool,\n  AgentActivityTrace,\n  AgentSearchResult,\n  AgentStepStatus,\n  AgentTraceKind,\n} from \"./types\";\n","type":"component"},{"path":"src/components/agent-activity/types.ts","content":"import type { ReactNode } from \"react\";\n\nexport type AgentActivityStatus = \"working\" | \"complete\";\nexport type AgentStepStatus = \"pending\" | \"active\" | \"complete\";\n\nexport type AgentActivityStep = {\n  id: string;\n  type: \"step\";\n  label: ReactNode;\n  /** Defaults to \"complete\". */\n  status?: AgentStepStatus;\n  meta?: ReactNode;\n};\n\nexport type AgentActivityText = {\n  id: string;\n  type: \"text\";\n  content: ReactNode;\n};\n\nexport type AgentSearchResult = {\n  id: string;\n  title: ReactNode;\n  domain?: ReactNode;\n  /** Makes the result tappable through `onOpenResult`. */\n  url?: string;\n  icon?: ReactNode;\n};\n\nexport type AgentActivitySearch = {\n  id: string;\n  type: \"search\";\n  query: ReactNode;\n  results?: AgentSearchResult[];\n  moreCount?: number;\n};\n\nexport type AgentActivityTool = {\n  id: string;\n  type: \"tool\";\n  action: \"read\" | \"edit\" | \"run\" | (string & {});\n  target: ReactNode;\n  additions?: number;\n  deletions?: number;\n};\n\nexport type AgentTraceKind =\n  | \"thinking\"\n  | \"message\"\n  | \"write\"\n  | \"run\"\n  | \"read\"\n  | (string & {});\n\nexport type AgentActivityTrace = {\n  id: string;\n  type: \"trace\";\n  kind: AgentTraceKind;\n  label: ReactNode;\n  detail?: ReactNode;\n  icon?: ReactNode;\n};\n\nexport type AgentActivityItem =\n  | AgentActivityStep\n  | AgentActivityText\n  | AgentActivitySearch\n  | AgentActivityTool\n  | AgentActivityTrace;\n\nexport type AgentActivityContentType = AgentActivityItem[\"type\"] | \"mixed\";\n","type":"component"},{"path":"src/components/loading-states/thinking-shimmer.tsx","content":"import {\n  TextShimmer,\n  type TextShimmerProps,\n} from \"../text-animation/text-shimmer\";\n\nexport type ThinkingShimmerProps = Omit<TextShimmerProps, \"children\"> & {\n  /** Defaults to \"Thinking…\". */\n  children?: string;\n};\n\n/** A highlight sweeping across a muted status line while an agent thinks. */\nexport function ThinkingShimmer({\n  children = \"Thinking…\",\n  duration = 1800,\n  className = \"\",\n  ...props\n}: ThinkingShimmerProps) {\n  return (\n    <TextShimmer\n      duration={duration}\n      className={`text-sm font-medium ${className}`}\n      {...props}\n    >\n      {children}\n    </TextShimmer>\n  );\n}\n","type":"shared"},{"path":"src/components/text-animation/text-shimmer.tsx","content":"import { useEffect } from \"react\";\nimport { View, type ViewProps } from \"react-native\";\nimport Animated, {\n  cancelAnimation,\n  Easing,\n  interpolateColor,\n  ReduceMotion,\n  useSharedValue,\n  withRepeat,\n  withTiming,\n} from \"react-native-reanimated\";\nimport { useResolveClassNames } from \"uniwind\";\nimport { useReducedMotionPreference } from \"../../hooks/use-reduced-motion\";\nimport { GlyphRow } from \"../../primitives/glyph-row\";\n\n// The web gradient is twice the text's width with its highlight 40% either side\n// of its middle, swept from 200% to -200% background position. In text widths\n// that is a highlight 0.4 wide whose center travels from -1 to 3.\nconst BAND = 0.4;\nconst SWEEP_FROM = -1;\nconst SWEEP_TO = 3;\n\nexport type TextShimmerProps = Omit<ViewProps, \"children\"> & {\n  children: string;\n  /** One sweep in milliseconds. Defaults to 2500. */\n  duration?: number;\n  /** Text style, such as `text-xl font-semibold`. Colors come from the theme. */\n  className?: string;\n  /** Disables the sweep independently of the system preference. */\n  disableAnimation?: boolean;\n};\n\n/** A highlight that sweeps across muted text, for loading and thinking states. */\nexport function TextShimmer({\n  children,\n  duration = 2500,\n  className = \"\",\n  disableAnimation = false,\n  accessibilityLabel,\n  ...props\n}: TextShimmerProps) {\n  const reducedMotion = useReducedMotionPreference();\n  const animate = !reducedMotion && !disableAnimation;\n  const { color: base } = useResolveClassNames(\"text-muted\");\n  const { color: highlight } = useResolveClassNames(\"text-foreground\");\n  const progress = useSharedValue(0);\n  const baseColor = String(base ?? \"gray\");\n  const highlightColor = String(highlight ?? \"black\");\n\n  useEffect(() => {\n    if (!animate) {\n      cancelAnimation(progress);\n      progress.value = 0;\n      return;\n    }\n    progress.value = 0;\n    progress.value = withRepeat(\n      withTiming(1, {\n        duration,\n        easing: Easing.linear,\n        reduceMotion: ReduceMotion.Never,\n      }),\n      -1,\n    );\n    return () => cancelAnimation(progress);\n  }, [animate, duration, progress]);\n\n  const colorAt = (p: number, position: number) => {\n    \"worklet\";\n    const center = SWEEP_FROM + (SWEEP_TO - SWEEP_FROM) * p;\n    const lit = Math.max(0, 1 - Math.abs(position - center) / BAND);\n    return {\n      color: interpolateColor(lit, [0, 1], [baseColor, highlightColor]),\n      opacity: 1,\n    };\n  };\n\n  return (\n    <View\n      {...props}\n      accessible\n      accessibilityRole=\"text\"\n      accessibilityLabel={accessibilityLabel ?? children}\n      style={[{ alignSelf: \"flex-start\" }, props.style]}\n    >\n      {animate ? (\n        <GlyphRow\n          text={children}\n          className={className}\n          progress={progress}\n          colorAt={colorAt}\n        />\n      ) : (\n        <Animated.Text className={className} style={{ color: baseColor }}>\n          {children}\n        </Animated.Text>\n      )}\n    </View>\n  );\n}\n","type":"shared"},{"path":"src/hooks/use-reduced-motion.ts","content":"import { useEffect, useState } from \"react\";\nimport { AccessibilityInfo } from \"react-native\";\nimport { useReducedMotion } from \"react-native-reanimated\";\n\n/** Reanimated supplies a synchronous initial value; native events keep it current. */\nexport function useReducedMotionPreference() {\n  const initialValue = useReducedMotion();\n  const [reducedMotion, setReducedMotion] = useState(initialValue);\n\n  useEffect(() => {\n    let active = true;\n    let receivedEvent = false;\n    const subscription = AccessibilityInfo.addEventListener(\n      \"reduceMotionChanged\",\n      (value) => {\n        receivedEvent = true;\n        setReducedMotion(value);\n      },\n    );\n    void AccessibilityInfo.isReduceMotionEnabled().then((value) => {\n      if (active && !receivedEvent) setReducedMotion(value);\n    });\n    return () => {\n      active = false;\n      subscription.remove();\n    };\n  }, []);\n\n  return reducedMotion;\n}\n","type":"shared"},{"path":"src/primitives/agent-icons.tsx","content":"import type { ReactNode } from \"react\";\nimport type { ColorValue } from \"react-native\";\nimport Svg, { Circle, Path, Rect } from \"react-native-svg\";\n\ntype GlyphProps = { size?: number; color?: ColorValue; strokeWidth?: number };\n\nfunction Glyph({\n  size = 16,\n  color = \"currentColor\",\n  strokeWidth = 2,\n  children,\n}: GlyphProps & { children: ReactNode }) {\n  return (\n    <Svg\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke={color}\n      strokeWidth={strokeWidth}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      {children}\n    </Svg>\n  );\n}\n\n// Simple 24-unit stroke glyphs shared by the agent components.\n\nexport function ChevronDownGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M6 9l6 6 6-6\" />\n    </Glyph>\n  );\n}\n\nexport function ArrowUpGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M12 19V5M5.5 11.5L12 5l6.5 6.5\" />\n    </Glyph>\n  );\n}\n\nexport function PlusGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M12 5v14M5 12h14\" />\n    </Glyph>\n  );\n}\n\nexport function StopGlyph({ size = 12, color }: GlyphProps) {\n  return (\n    <Svg width={size} height={size} viewBox=\"0 0 12 12\">\n      <Rect x={1} y={1} width={10} height={10} rx={2.5} fill={color} />\n    </Svg>\n  );\n}\n\nexport function CheckGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M5 12.5l4.5 4.5L19 7\" />\n    </Glyph>\n  );\n}\n\nexport function CopyGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Rect x={8.5} y={8.5} width={12} height={12} rx={2.5} />\n      <Path d=\"M15.5 5.5v-.5A2 2 0 0 0 13.5 3h-8.5A2 2 0 0 0 3 5v8.5a2 2 0 0 0 2 2h.5\" />\n    </Glyph>\n  );\n}\n\nexport function RetryGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M3.5 12a8.5 8.5 0 1 0 2.6-6.1L3.5 8.5\" />\n      <Path d=\"M3.5 3.5v5h5\" />\n    </Glyph>\n  );\n}\n\nexport function ThumbGlyph({\n  down = false,\n  ...props\n}: GlyphProps & { down?: boolean }) {\n  return (\n    <Glyph {...props}>\n      <Path\n        d=\"M7.5 10.5v10M7.5 10.5L11 3.5a2.5 2.5 0 0 1 2.5 2.5v3.5h5a2 2 0 0 1 2 2.3l-1.2 7A2 2 0 0 1 17.3 20.5H4.5a1 1 0 0 1-1-1v-8a1 1 0 0 1 1-1z\"\n        transform={down ? \"rotate(180 12 12)\" : undefined}\n      />\n    </Glyph>\n  );\n}\n\nexport function SearchGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Circle cx={11} cy={11} r={6.5} />\n      <Path d=\"M16 16l4 4\" />\n    </Glyph>\n  );\n}\n\nexport function GlobeGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Circle cx={12} cy={12} r={8.5} />\n      <Path d=\"M3.5 12h17M12 3.5c2.4 2.5 3.5 5.3 3.5 8.5s-1.1 6-3.5 8.5c-2.4-2.5-3.5-5.3-3.5-8.5s1.1-6 3.5-8.5z\" />\n    </Glyph>\n  );\n}\n\nexport function FileGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M14 3.5H7.5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2V8z\" />\n      <Path d=\"M14 3.5V8h4.5M9 13h6M9 16.5h4\" />\n    </Glyph>\n  );\n}\n\nexport function PencilGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M4 20h4L19 9a2.1 2.1 0 0 0-4-4L4 16z\" />\n      <Path d=\"M13.5 6.5l4 4M14 20h6\" />\n    </Glyph>\n  );\n}\n\nexport function TerminalGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Rect x={3.5} y={4.5} width={17} height={15} rx={2.5} />\n      <Path d=\"M7.5 10l2.5 2-2.5 2M12.5 15h4\" />\n    </Glyph>\n  );\n}\n\nexport function WrenchGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M14.5 6.5a4 4 0 0 0 5 5l-8.8 8.8a2.1 2.1 0 0 1-3-3l8.8-8.8a4 4 0 0 1-2-2z\" />\n    </Glyph>\n  );\n}\n\nexport function SparkleGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M12 4l1.8 4.6L18.5 10.5l-4.7 1.9L12 17l-1.8-4.6-4.7-1.9 4.7-1.9z\" />\n      <Path d=\"M18.5 16.5v3M17 18h3\" />\n    </Glyph>\n  );\n}\n\nexport function MessageGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M20 14.5a2 2 0 0 1-2 2H8.5L4 20V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2z\" />\n    </Glyph>\n  );\n}\n\nexport function ImageGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Rect x={3.5} y={4.5} width={17} height={15} rx={2.5} />\n      <Circle cx={9} cy={10} r={1.5} />\n      <Path d=\"M20.5 15.5l-4.5-4.5-9 8.5\" />\n    </Glyph>\n  );\n}\n\nexport function ShieldGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M12 3.5l7 2.5v5.5c0 4.4-3 7.7-7 9-4-1.3-7-4.6-7-9V6z\" />\n      <Path d=\"M9 12l2 2 4-4\" />\n    </Glyph>\n  );\n}\n\nexport function AlertGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Circle cx={12} cy={12} r={8.5} />\n      <Path d=\"M12 8v4.5M12 16h.01\" />\n    </Glyph>\n  );\n}\n\nexport function CrossGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M6.5 6.5l11 11M17.5 6.5l-11 11\" />\n    </Glyph>\n  );\n}\n\nexport function HelpGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Circle cx={12} cy={12} r={8.5} />\n      <Path d=\"M9.6 9.5a2.5 2.5 0 0 1 4.8 1c0 1.7-2.4 2.2-2.4 3.5M12 16.8h.01\" />\n    </Glyph>\n  );\n}\n\nexport function ArrowGlyph({\n  back = false,\n  ...props\n}: GlyphProps & { back?: boolean }) {\n  return (\n    <Glyph {...props}>\n      <Path\n        d=\"M5 12h14M13 6l6 6-6 6\"\n        transform={back ? \"rotate(180 12 12)\" : undefined}\n      />\n    </Glyph>\n  );\n}\n\nexport function BracesGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M8.5 4H8a2 2 0 0 0-2 2v3.5A2.5 2.5 0 0 1 3.5 12 2.5 2.5 0 0 1 6 14.5V18a2 2 0 0 0 2 2h.5M15.5 4h.5a2 2 0 0 1 2 2v3.5a2.5 2.5 0 0 0 2.5 2.5 2.5 2.5 0 0 0-2.5 2.5V18a2 2 0 0 1-2 2h-.5\" />\n    </Glyph>\n  );\n}\n\nexport function BanGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Circle cx={12} cy={12} r={8.5} />\n      <Path d=\"M6 6l12 12\" />\n    </Glyph>\n  );\n}\n\nexport function CircleCheckGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Circle cx={12} cy={12} r={8.5} />\n      <Path d=\"M8.5 12.2l2.4 2.4 4.6-4.8\" />\n    </Glyph>\n  );\n}\n\nexport function CircleCrossGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Circle cx={12} cy={12} r={8.5} />\n      <Path d=\"M9.5 9.5l5 5M14.5 9.5l-5 5\" />\n    </Glyph>\n  );\n}\n\nexport function ListGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M4 6.5l1.5 1.5L8 5.5M4 13l1.5 1.5L8 12M11.5 7h8.5M11.5 13.5h8.5M11.5 19h8.5M4.5 19h2\" />\n    </Glyph>\n  );\n}\n\n/** An open ring, spun by SpinGlyph. */\nexport function RingGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M20.5 12a8.5 8.5 0 1 1-6-8.1\" />\n    </Glyph>\n  );\n}\n\nexport function ReplyGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M9.5 7L4.5 12l5 5M4.5 12h10a5 5 0 0 1 5 5v1\" />\n    </Glyph>\n  );\n}\n\nexport function WrapGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M4 6.5h16M4 12h12.5a3.25 3.25 0 0 1 0 6.5H12M4 18.5h4.5M14 16.5l-2 2 2 2\" />\n    </Glyph>\n  );\n}\n\nexport function BookGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M12 6.5c-1.6-1.3-4-2-7.5-2v13c3.5 0 5.9.7 7.5 2 1.6-1.3 4-2 7.5-2v-13c-3.5 0-5.9.7-7.5 2zM12 6.5v13\" />\n    </Glyph>\n  );\n}\n\nexport function ExternalGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M14 4.5h5.5V10M19.5 4.5L11 13M17 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h4\" />\n    </Glyph>\n  );\n}\n\nexport function DoubleCheckGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M2.5 12.5l4.5 4.5 9-9.5M12 16.5l.5.5 9-9.5\" />\n    </Glyph>\n  );\n}\n\nexport function ClockGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Circle cx={12} cy={12} r={8.5} />\n      <Path d=\"M12 7.5V12l3 2\" />\n    </Glyph>\n  );\n}\n\nexport function MicGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Rect x={9} y={3.5} width={6} height={11} rx={3} />\n      <Path d=\"M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5v3\" />\n    </Glyph>\n  );\n}\n","type":"shared"},{"path":"src/primitives/disclosure.tsx","content":"import { type ReactNode, useEffect, useRef } from \"react\";\nimport { StyleSheet, View, type ViewStyle } from \"react-native\";\nimport Animated, {\n  measure,\n  useAnimatedRef,\n  useAnimatedStyle,\n  useSharedValue,\n  withTiming,\n} from \"react-native-reanimated\";\nimport { scheduleOnUI } from \"react-native-worklets\";\nimport { EASE_OUT } from \"../styles/motion\";\n\nconst OPEN = { duration: 220, easing: EASE_OUT };\nconst CLOSE = { duration: 140, easing: EASE_OUT };\nconst DROP = 4;\n// The height while settled open: unconstrained, so growing content just flows.\nconst NATURAL = -1;\n\nexport type DisclosureProps = {\n  open: boolean;\n  /** Snaps open and closed, keeping only the fade. */\n  reduce: boolean;\n  /** Caps the open height; content clips beyond it. */\n  maxHeight?: number;\n  style?: ViewStyle;\n  children: ReactNode;\n};\n\n/**\n * Collapsible content shared by the agent components: the height eases\n * between closed and the content's size while the content fades and drops 4\n * points into place. Settled open, the height is left alone, so content that\n * grows (streamed rows, new sources) is never clipped. Closed content is\n * hidden from screen readers and touches.\n */\nexport function Disclosure({\n  open,\n  reduce,\n  maxHeight,\n  style,\n  children,\n}: DisclosureProps) {\n  // The content's height, kept current by layout events; measuring on demand\n  // can read 0 for content inside a scroll view.\n  const contentHeight = useSharedValue(0);\n  const clipRef = useAnimatedRef<Animated.View>();\n  const height = useSharedValue(open ? NATURAL : 0);\n  const shown = useSharedValue(open ? 1 : 0);\n  const mounted = useRef(false);\n\n  useEffect(() => {\n    // The first render is already in place.\n    if (!mounted.current) {\n      mounted.current = true;\n      return;\n    }\n    const cap = maxHeight ?? Number.POSITIVE_INFINITY;\n    scheduleOnUI(() => {\n      \"worklet\";\n      // Real sizes, read on the UI thread at the moment of the change.\n      const full = Math.min(contentHeight.value, cap);\n      if (open) {\n        const from = height.value === NATURAL ? full : height.value;\n        if (reduce) {\n          height.value = NATURAL;\n        } else {\n          height.value = from;\n          height.value = withTiming(full, OPEN, (done) => {\n            if (done) height.value = NATURAL;\n          });\n        }\n      } else {\n        const clip = measure(clipRef);\n        const from =\n          height.value === NATURAL ? (clip?.height ?? full) : height.value;\n        height.value = from;\n        height.value = reduce ? 0 : withTiming(0, CLOSE);\n      }\n    });\n    shown.value = withTiming(\n      open ? 1 : 0,\n      reduce ? { duration: 0 } : open ? OPEN : CLOSE,\n    );\n  }, [clipRef, contentHeight, height, maxHeight, open, reduce, shown]);\n\n  const clipStyle = useAnimatedStyle(() =>\n    // Settled open, the clip follows the content's measured height.\n    height.value === NATURAL\n      ? {\n          height: Math.min(\n            contentHeight.value,\n            maxHeight ?? Number.POSITIVE_INFINITY,\n          ),\n        }\n      : { height: height.value },\n  );\n  const contentStyle = useAnimatedStyle(\n    () => ({\n      opacity: shown.value,\n      transform: [{ translateY: reduce ? 0 : (1 - shown.value) * -DROP }],\n    }),\n    [reduce],\n  );\n\n  return (\n    <Animated.View\n      ref={clipRef}\n      pointerEvents={open ? \"auto\" : \"none\"}\n      accessibilityElementsHidden={!open}\n      importantForAccessibility={open ? \"auto\" : \"no-hide-descendants\"}\n      style={[styles.clip, clipStyle, style]}\n    >\n      {/* Absolutely placed, so the content keeps its natural height while the\n          clip around it is short, and can be measured at any time. */}\n      <Animated.View style={[styles.content, contentStyle]}>\n        <View\n          style={styles.measure}\n          onLayout={({ nativeEvent }) => {\n            contentHeight.value = nativeEvent.layout.height;\n          }}\n        >\n          {children}\n        </View>\n      </Animated.View>\n    </Animated.View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  clip: { overflow: \"hidden\" },\n  content: { position: \"absolute\", left: 0, right: 0, top: 0 },\n  measure: { flexShrink: 0 },\n});\n","type":"shared"},{"path":"src/primitives/fade-edge.tsx","content":"import {\n  type ColorValue,\n  StyleSheet,\n  View,\n  type ViewStyle,\n} from \"react-native\";\n\nconst BANDS = 8;\n\nexport type FadeEdgeProps = {\n  /** The surface color the content fades into. */\n  color: ColorValue | undefined;\n  /** Which edge is solid. Defaults to \"bottom\". */\n  edge?: \"top\" | \"bottom\";\n  /** Height of the fade in points. */\n  height: number;\n  style?: ViewStyle;\n};\n\n/**\n * A soft edge over clipped content, built from stacked bands so shared\n * components need no gradient library. Ignores touches.\n */\nexport function FadeEdge({\n  color,\n  edge = \"bottom\",\n  height,\n  style,\n}: FadeEdgeProps) {\n  return (\n    <View\n      pointerEvents=\"none\"\n      style={[\n        styles.edge,\n        edge === \"bottom\" ? styles.bottom : styles.top,\n        { height },\n        style,\n      ]}\n    >\n      {Array.from({ length: BANDS }, (_, index) => {\n        const t = (index + 1) / BANDS;\n        return (\n          <View\n            key={index}\n            style={{\n              flex: 1,\n              backgroundColor: color,\n              // Ease the ramp so the fade has no visible first step.\n              opacity: edge === \"bottom\" ? t * t : (1 - t + 1 / BANDS) ** 2,\n            }}\n          />\n        );\n      })}\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  edge: { position: \"absolute\", left: 0, right: 0 },\n  bottom: { bottom: 0 },\n  top: { top: 0 },\n});\n","type":"shared"},{"path":"src/primitives/glyph-row.tsx","content":"import { StyleSheet, View, type ViewStyle } from \"react-native\";\nimport Animated, {\n  type SharedValue,\n  useAnimatedStyle,\n  useSharedValue,\n} from \"react-native-reanimated\";\n\n/**\n * Returns a glyph's color for the current progress. `position` is the glyph's\n * center across the row, from 0 at the left edge to 1 at the right. Must be a\n * worklet.\n */\nexport type GlyphColor = (\n  progress: number,\n  position: number,\n) => { color: string; opacity: number };\n\n// Splitting into glyphs breaks shaping in connected and complex scripts.\n// Latin plus general punctuation (dashes, quotes, the ellipsis), none of which shape.\nconst SPLIT_SAFE = /^[\\u0020-\\u007e\\u00a0-\\u024f\\u2000-\\u206f]+$/;\n\nexport type GlyphRowProps = {\n  text: string;\n  /** Text style for every glyph. Its color is replaced by `colorAt`. */\n  className?: string;\n  progress: SharedValue<number>;\n  colorAt: GlyphColor;\n  style?: ViewStyle;\n};\n\nfunction Glyph({\n  char,\n  className,\n  progress,\n  rowWidth,\n  colorAt,\n}: {\n  char: string;\n  className?: string;\n  progress: SharedValue<number>;\n  rowWidth: SharedValue<number>;\n  colorAt: GlyphColor;\n}) {\n  const center = useSharedValue(-1);\n\n  const animatedStyle = useAnimatedStyle(() => {\n    const width = rowWidth.value;\n    // Until measured, assume the middle so nothing flashes at the edges.\n    const position =\n      width > 0 && center.value >= 0 ? center.value / width : 0.5;\n    return colorAt(progress.value, position);\n  });\n\n  return (\n    <Animated.Text\n      className={className}\n      style={animatedStyle}\n      onLayout={({ nativeEvent: { layout } }) => {\n        center.value = layout.x + layout.width / 2;\n      }}\n    >\n      {char}\n    </Animated.Text>\n  );\n}\n\n/**\n * Text drawn one glyph at a time so each glyph can take its own animated\n * color, standing in for web gradients clipped to text. Scripts that need\n * shaping render as a single glyph so their letters still join.\n */\nexport function GlyphRow({\n  text,\n  className,\n  progress,\n  colorAt,\n  style,\n}: GlyphRowProps) {\n  const rowWidth = useSharedValue(0);\n  // Whitespace-only Text can measure zero-width on Android.\n  const glyphs = SPLIT_SAFE.test(text)\n    ? Array.from(text.replace(/ /g, \" \"))\n    : [text];\n\n  return (\n    <View\n      style={[styles.row, style]}\n      onLayout={({ nativeEvent: { layout } }) => {\n        rowWidth.value = layout.width;\n      }}\n    >\n      {glyphs.map((char, index) => (\n        <Glyph\n          // Position is the glyph's identity within one string.\n          key={`${index}-${char}`}\n          char={char}\n          className={className}\n          progress={progress}\n          rowWidth={rowWidth}\n          colorAt={colorAt}\n        />\n      ))}\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  row: { flexDirection: \"row\", alignItems: \"baseline\" },\n});\n","type":"shared"},{"path":"src/primitives/rise-in.tsx","content":"import { type ReactNode, useEffect } from \"react\";\nimport type { ViewProps } from \"react-native\";\nimport Animated, {\n  LinearTransition,\n  useAnimatedStyle,\n  useSharedValue,\n  withSpring,\n  withTiming,\n} from \"react-native-reanimated\";\nimport { EASE_OUT, SPRING_LAYOUT } from \"../styles/motion\";\n\nconst FADE = { duration: 180, easing: EASE_OUT };\nconst RISE = 6;\nconst EXIT_DURATION = 140;\n\n/** Leaving rows reverse their entrance: fade and lift 3 points away. */\nfunction riseOut() {\n  \"worklet\";\n  return {\n    initialValues: { opacity: 1, transform: [{ translateY: 0 }] },\n    animations: {\n      opacity: withTiming(0, { duration: EXIT_DURATION, easing: EASE_OUT }),\n      transform: [\n        {\n          translateY: withTiming(-3, {\n            duration: EXIT_DURATION,\n            easing: EASE_OUT,\n          }),\n        },\n      ],\n    },\n  };\n}\n\nconst GLIDE = LinearTransition.springify()\n  .stiffness(SPRING_LAYOUT.stiffness)\n  .damping(SPRING_LAYOUT.damping)\n  .mass(SPRING_LAYOUT.mass);\n\n/**\n * A row that fades and rises 6 points into place when it mounts, and lifts\n * away as it leaves, while its neighbours glide to make room. Shared by the agent activity lists.\n */\nexport function RiseIn({\n  reduce,\n  appear = true,\n  children,\n  style,\n  ...props\n}: ViewProps & { reduce: boolean; appear?: boolean; children: ReactNode }) {\n  const animate = appear && !reduce;\n  const opacity = useSharedValue(animate ? 0 : 1);\n  const lift = useSharedValue(animate ? RISE : 0);\n\n  // Plays once, on mount.\n  useEffect(() => {\n    if (!animate) return;\n    opacity.value = withTiming(1, FADE);\n    lift.value = withSpring(0, SPRING_LAYOUT);\n  }, []);\n\n  const rise = useAnimatedStyle(() => ({\n    opacity: opacity.value,\n    transform: [{ translateY: lift.value }],\n  }));\n\n  return (\n    <Animated.View\n      layout={reduce ? undefined : GLIDE}\n      exiting={reduce ? undefined : riseOut}\n      style={[rise, style]}\n      {...props}\n    >\n      {children}\n    </Animated.View>\n  );\n}\n","type":"shared"},{"path":"src/styles/motion.ts","content":"import { Easing, ReduceMotion } from \"react-native-reanimated\";\n\n// Mirrors beUI's lib/ease.ts so native motion matches the web library.\n\nexport const EASE_OUT = Easing.bezier(0.16, 1, 0.3, 1);\nexport const EASE_IN_OUT = Easing.bezier(0.77, 0, 0.175, 1);\n\n/** Press feedback on buttons and other tappable surfaces. */\nexport const SPRING_PRESS = {\n  stiffness: 500,\n  damping: 30,\n  mass: 0.6,\n  reduceMotion: ReduceMotion.System,\n} as const;\n\n/** Content swaps: label and icon slots trading places inside a control. */\nexport const SPRING_SWAP = {\n  stiffness: 460,\n  damping: 30,\n  mass: 0.55,\n  reduceMotion: ReduceMotion.System,\n} as const;\n\n/** Shared-layout glides: pills, indicators and panels moving between positions. */\nexport const SPRING_LAYOUT = {\n  stiffness: 360,\n  damping: 32,\n  mass: 0.6,\n  reduceMotion: ReduceMotion.System,\n} as const;\n\n/** Dragged handles and fills; critically damped so values never rebound off an end. */\nexport const SPRING_GLIDE = {\n  stiffness: 700,\n  damping: 50,\n  mass: 0.5,\n  reduceMotion: ReduceMotion.System,\n} as const;\n\nexport const motion = {\n  press: SPRING_PRESS,\n  swap: SPRING_SWAP,\n  layout: SPRING_LAYOUT,\n  glide: SPRING_GLIDE,\n  exit: { duration: 160, easing: EASE_OUT, reduceMotion: ReduceMotion.System },\n  fade: { duration: 150, reduceMotion: ReduceMotion.System },\n} as const;\n","type":"shared"},{"path":"src/styles/theme.css","content":"/* Matches the default beUI palette in ui-components/lib/themes.ts.\n   Native surface maps to card; muted maps to muted-foreground. */\n@layer theme {\n  :root {\n    @variant light {\n      --color-background: oklch(99% 0 0);\n      --color-surface: oklch(97% 0 0);\n      --color-foreground: oklch(15% 0 0);\n      --color-muted: oklch(50% 0 0);\n      --color-border: oklch(15% 0 0 / 0.06);\n      --color-border-strong: oklch(15% 0 0 / 0.16);\n      --color-primary: #0285f7;\n      --color-on-primary: #ffffff;\n      --color-destructive: #dc2626;\n      --color-success: #059669;\n      --color-warning: #d97706;\n    }\n  }\n\n  :root {\n    @variant dark {\n      --color-background: #151515;\n      --color-surface: #1c1c1c;\n      --color-foreground: oklch(96% 0 0);\n      --color-muted: oklch(62% 0 0);\n      --color-border: rgb(255 255 255 / 0.05);\n      --color-border-strong: rgb(255 255 255 / 0.14);\n      --color-primary: #0285f7;\n      --color-on-primary: #ffffff;\n      --color-destructive: #f87171;\n      --color-success: #34d399;\n      --color-warning: #fbbf24;\n    }\n  }\n\n  /* Tailwind's default monospace stack isn't a font React Native can load. */\n  :root {\n    @variant ios {\n      --font-mono: Menlo;\n    }\n  }\n\n  :root {\n    @variant android {\n      --font-mono: monospace;\n    }\n  }\n}\n","type":"theme"}]}