@opengeni/react-native 1.4.5-canary.37615713321001

package/src/ui/composer.tsx

@@ -0,0 +1,296 @@
+import { GlassView, isLiquidGlassAvailable } from "expo-glass-effect";
+import type { ReactNode } from "react";
+import { Platform, Pressable, StyleSheet, Text, TextInput, View } from "react-native";
+import { AgentIcon } from "./icons";
+import type { AgentTheme } from "./theme";
+
+export interface AgentComposerProps {
+  theme: AgentTheme;
+  value: string;
+  onChangeText(text: string): void;
+  onSend(): void;
+  onStop?: (() => void) | undefined;
+  onAttach?: (() => void) | undefined;
+  onVoice?: (() => void) | undefined;
+  running: boolean;
+  placeholder: string;
+  /** Chips shown in the bar composer (model, permissions…). */
+  accessories?: ReactNode | undefined;
+  bottomInset: number;
+}
+
+function RoundButton(props: {
+  label: string;
+  onPress?: (() => void) | undefined;
+  size: number;
+  background: string;
+  children: ReactNode;
+  disabled?: boolean | undefined;
+}) {
+  return (
+    <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,
+      })}
+    >
+      {props.children}
+    </Pressable>
+  );
+}
+
+export function AgentComposer(props: AgentComposerProps) {
+  const { theme } = props;
+  if (theme.layout.composer === "bar") return <BarComposer {...props} />;
+  if (theme.layout.composer === "voice") return <VoiceComposer {...props} />;
+  return <PillComposer {...props} />;
+}
+
+function SendOrStop(props: AgentComposerProps & { size: number }) {
+  const { theme, running, value } = props;
+  if (running && !value.trim()) {
+    return (
+      <RoundButton
+        background={theme.colors.accent}
+        label="Stop"
+        onPress={props.onStop}
+        size={props.size}
+      >
+        <AgentIcon color={theme.colors.onAccent} name="stop" size={props.size * 0.4} />
+      </RoundButton>
+    );
+  }
+  return (
+    <RoundButton
+      background={theme.colors.accent}
+      disabled={!value.trim()}
+      label="Send"
+      onPress={props.onSend}
+      size={props.size}
+    >
+      <AgentIcon
+        color={theme.colors.onAccent}
+        name="arrow-up"
+        size={props.size * 0.5}
+        strokeWidth={2.4}
+      />
+    </RoundButton>
+  );
+}
+
+function Input(props: AgentComposerProps & { fontSize: number }) {
+  return (
+    <TextInput
+      accessibilityLabel={props.placeholder}
+      multiline
+      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}
+    />
+  );
+}
+
+/** Calm: floating pill; Liquid Glass on iOS 26. */
+function PillComposer(props: AgentComposerProps) {
+  const { theme } = props;
+  const glass = Platform.OS === "ios" && isLiquidGlassAvailable();
+  const inner = (
+    <View
+      style={{
+        flexDirection: "row",
+        alignItems: "flex-end",
+        gap: 6,
+        paddingHorizontal: 6,
+        paddingVertical: 6,
+      }}
+    >
+      <RoundButton
+        background="transparent"
+        label="Add attachment"
+        onPress={props.onAttach}
+        size={36}
+      >
+        <AgentIcon color={theme.colors.text} name="plus" size={20} />
+      </RoundButton>
+      <Input {...props} fontSize={theme.type.body} />
+      {props.value.trim() || props.running ? (
+        <SendOrStop {...props} size={36} />
+      ) : (
+        <RoundButton background="transparent" label="Dictate" onPress={props.onVoice} size={36}>
+          <AgentIcon color={theme.colors.text} name="mic" size={19} />
+        </RoundButton>
+      )}
+    </View>
+  );
+  const shell = {
+    borderRadius: theme.radius.composer,
+    overflow: "hidden" as const,
+    borderWidth: glass ? 0 : StyleSheet.hairlineWidth * 2,
+    borderColor: theme.colors.border,
+    backgroundColor: glass ? undefined : theme.colors.surfaceRaised,
+    shadowColor: "#000",
+    shadowOpacity: theme.scheme === "light" ? 0.08 : 0,
+    shadowRadius: 16,
+    shadowOffset: { width: 0, height: 6 },
+  };
+  return (
+    <View
+      style={{
+        paddingHorizontal: 12,
+        paddingTop: 6,
+        paddingBottom: Math.max(props.bottomInset, 10),
+      }}
+    >
+      {glass ? (
+        <GlassView glassEffectStyle="regular" isInteractive style={shell}>
+          {inner}
+        </GlassView>
+      ) : (
+        <View style={shell}>{inner}</View>
+      )}
+    </View>
+  );
+}
+
+/** Workbench: docked bar with a toolbar row for context chips. */
+function BarComposer(props: AgentComposerProps) {
+  const { theme } = props;
+  return (
+    <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,
+      }}
+    >
+      <View
+        style={{
+          borderRadius: theme.radius.composer,
+          borderWidth: StyleSheet.hairlineWidth * 2,
+          borderColor: theme.colors.border,
+          backgroundColor: theme.colors.background,
+          paddingHorizontal: 12,
+        }}
+      >
+        <Input {...props} fontSize={theme.type.body} />
+      </View>
+      <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+        <RoundButton
+          background={theme.colors.surface}
+          label="Add attachment"
+          onPress={props.onAttach}
+          size={34}
+        >
+          <AgentIcon color={theme.colors.text} name="plus" size={18} />
+        </RoundButton>
+        <RoundButton
+          background={theme.colors.surface}
+          label="Dictate"
+          onPress={props.onVoice}
+          size={34}
+        >
+          <AgentIcon color={theme.colors.text} name="mic" size={17} />
+        </RoundButton>
+        <View style={{ flex: 1, flexDirection: "row", gap: 6 }}>{props.accessories}</View>
+        <SendOrStop {...props} size={34} />
+      </View>
+    </View>
+  );
+}
+
+/** Field: large field with a dominant voice button. */
+function VoiceComposer(props: AgentComposerProps) {
+  const { theme } = props;
+  const hasText = props.value.trim().length > 0;
+  return (
+    <View
+      style={{
+        flexDirection: "row",
+        alignItems: "flex-end",
+        gap: 10,
+        paddingHorizontal: 14,
+        paddingTop: 8,
+        paddingBottom: Math.max(props.bottomInset, 12),
+      }}
+    >
+      <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,
+        }}
+      >
+        <RoundButton
+          background="transparent"
+          label="Add photo or file"
+          onPress={props.onAttach}
+          size={44}
+        >
+          <AgentIcon color={theme.colors.text} name="plus" size={24} />
+        </RoundButton>
+        <Input {...props} fontSize={theme.type.body} />
+      </View>
+      {hasText || props.running ? (
+        <SendOrStop {...props} size={56} />
+      ) : (
+        <RoundButton
+          background={theme.colors.accent}
+          label="Talk"
+          onPress={props.onVoice}
+          size={56}
+        >
+          <AgentIcon color={theme.colors.onAccent} name="mic" size={26} />
+        </RoundButton>
+      )}
+    </View>
+  );
+}
+
+export function ComposerChip({ theme, label }: { theme: AgentTheme; label: string }) {
+  return (
+    <View
+      style={{
+        height: 28,
+        paddingHorizontal: 10,
+        borderRadius: 14,
+        backgroundColor: theme.colors.surface,
+        justifyContent: "center",
+      }}
+    >
+      <Text style={{ color: theme.colors.textMuted, fontSize: 12, fontWeight: "500" }}>
+        {label}
+      </Text>
+    </View>
+  );
+}

package/src/ui/format.ts

@@ -0,0 +1,86 @@
+import type { ActivityItem, TimelineGroup, ToolCallItem } from "@opengeni/react/session";
+import { toolDisplayName } from "@opengeni/react/session";
+
+export function toolTitle(item: ToolCallItem): string {
+  return toolDisplayName(item.name, item.display);
+}
+
+function firstString(record: Record<string, unknown>, keys: string[]): string | null {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "string" && value.trim()) return value.trim();
+  }
+  return null;
+}
+
+/** One-line human summary of a tool call's input. */
+export function toolDetail(item: ToolCallItem): string | null {
+  const args = item.arguments;
+  if (typeof args === "string") return args.split("\n")[0] ?? null;
+  if (!args || typeof args !== "object") return null;
+  const record = args as Record<string, unknown>;
+  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 !== undefined && 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(" · ");
+  return text.length > 110 ? `${text.slice(0, 109)}…` : text;
+}
+
+/** Short preview of a settled tool output. */
+export function toolOutputPreview(item: ToolCallItem, lines = 2): string | null {
+  const output = item.output;
+  const text =
+    typeof output === "string"
+      ? output
+      : output &&
+          typeof output === "object" &&
+          typeof (output as { text?: unknown }).text === "string"
+        ? String((output as { text: string }).text)
+        : output == null
+          ? null
+          : JSON.stringify(output);
+  if (!text) return null;
+  return text.split("\n").slice(0, lines).join("\n");
+}
+
+export function formatDuration(ms: number): string {
+  if (!Number.isFinite(ms) || ms < 1000) return "";
+  const seconds = Math.round(ms / 1000);
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  const rest = seconds % 60;
+  return rest ? `${minutes}m ${rest}s` : `${minutes}m`;
+}
+
+export function itemTime(item: { occurredAt?: string }): number {
+  return item.occurredAt ? Date.parse(item.occurredAt) : Number.NaN;
+}
+
+/** Flatten nested work details of a group into its activity items, in order. */
+export function activityItemsOf(group: TimelineGroup): ActivityItem[] {
+  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;
+}
+
+export function toolCallsOf(items: readonly ActivityItem[]): ToolCallItem[] {
+  return items.filter((item): item is ToolCallItem => item.kind === "tool-call");
+}

package/src/ui/icons.tsx

@@ -0,0 +1,131 @@
+// Minimal stroke icon set (Lucide geometry, ISC) so the kit has no icon-font dependency.
+import Svg, { Circle, Path, Polyline, Rect } from "react-native-svg";
+
+export type AgentIconName =
+  | "terminal"
+  | "search"
+  | "edit"
+  | "globe"
+  | "check"
+  | "x"
+  | "chevron-right"
+  | "chevron-down"
+  | "sparkle"
+  | "mic"
+  | "plus"
+  | "arrow-up"
+  | "stop"
+  | "tool"
+  | "send"
+  | "alert"
+  | "question"
+  | "rocket";
+
+export function AgentIcon({
+  name,
+  size = 18,
+  color,
+  strokeWidth = 2,
+}: {
+  name: AgentIconName;
+  size?: number;
+  color: string;
+  strokeWidth?: number;
+}) {
+  const common = {
+    stroke: color,
+    strokeWidth,
+    strokeLinecap: "round" as const,
+    strokeLinejoin: "round" as const,
+    fill: "none",
+  };
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24">
+      {name === "terminal" ? (
+        <>
+          <Polyline points="4 17 10 11 4 5" {...common} />
+          <Path d="M 12 19h8" {...common} />
+        </>
+      ) : null}
+      {name === "search" ? (
+        <>
+          <Circle cx="11" cy="11" r="7" {...common} />
+          <Path d="m20 20-3.5-3.5" {...common} />
+        </>
+      ) : null}
+      {name === "edit" ? (
+        <>
+          <Path d="M 12 20h9" {...common} />
+          <Path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z" {...common} />
+        </>
+      ) : null}
+      {name === "globe" ? (
+        <>
+          <Circle cx="12" cy="12" r="9" {...common} />
+          <Path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" {...common} />
+        </>
+      ) : null}
+      {name === "check" ? <Polyline points="20 6 9 17 4 12" {...common} /> : null}
+      {name === "x" ? <Path d="M18 6 6 18M6 6l12 12" {...common} /> : null}
+      {name === "chevron-right" ? <Polyline points="9 18 15 12 9 6" {...common} /> : null}
+      {name === "chevron-down" ? <Polyline points="6 9 12 15 18 9" {...common} /> : null}
+      {name === "sparkle" ? (
+        <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" ? (
+        <>
+          <Rect x="9" y="2" width="6" height="12" rx="3" {...common} />
+          <Path d="M5 10a7 7 0 0 0 14 0M12 17v5" {...common} />
+        </>
+      ) : null}
+      {name === "plus" ? <Path d="M 12 5v14M5 12h14" {...common} /> : null}
+      {name === "arrow-up" ? <Path d="M 12 19V5M5 12l7-7 7 7" {...common} /> : null}
+      {name === "stop" ? <Rect x="6" y="6" width="12" height="12" rx="2" fill={color} /> : null}
+      {name === "tool" ? (
+        <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" ? <Path d="m22 2-7 20-4-9-9-4Z M22 2 11 13" {...common} /> : null}
+      {name === "alert" ? (
+        <>
+          <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}
+          />
+          <Path d="M 12 9v4M12 17h.01" {...common} />
+        </>
+      ) : null}
+      {name === "question" ? (
+        <>
+          <Circle cx="12" cy="12" r="9" {...common} />
+          <Path d="M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3M12 17h.01" {...common} />
+        </>
+      ) : null}
+      {name === "rocket" ? (
+        <>
+          <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}
+          />
+          <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}
+    </Svg>
+  );
+}
+
+/** Category icon for a tool name (best effort, purely presentational). */
+export function toolIconName(name: string): AgentIconName {
+  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";
+}

package/src/ui/index.ts

@@ -0,0 +1,18 @@
+export { AgentStepList, AgentTimeline, UserMessage, WorkingLine } from "./timeline";
+export { AgentStepsSheet } from "./steps-sheet";
+export { AgentAttentionTray } from "./attention";
+export type { AgentTimelineProps, MarkdownRenderer } from "./timeline";
+export { AgentComposer, ComposerChip } from "./composer";
+export type { AgentComposerProps } from "./composer";
+export { ApprovalCard, QuestionCard, ActionButton } from "./cards";
+export { AgentIcon, toolIconName } from "./icons";
+export type { AgentIconName } from "./icons";
+export { agentDirections, agentTheme } from "./theme";
+export type {
+  AgentDirection,
+  AgentDirectionId,
+  AgentTheme,
+  ActivityStyle,
+  ComposerStyle,
+} from "./theme";
+export { formatDuration, toolDetail, toolOutputPreview, toolTitle } from "./format";

package/src/ui/steps-sheet.tsx

@@ -0,0 +1,71 @@
+import type { ActivityItem } from "@opengeni/react/session";
+import { Modal, Platform, Pressable, ScrollView, Text, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { AgentStepList } from "./timeline";
+import type { AgentTheme } from "./theme";
+
+/** Native sheet with the full step-by-step view of one piece of agent work. */
+export function AgentStepsSheet(props: {
+  visible: boolean;
+  onClose(): void;
+  title: string;
+  steps: readonly ActivityItem[];
+  theme: AgentTheme;
+}) {
+  const { theme } = props;
+  const insets = useSafeAreaInsets();
+  return (
+    <Modal
+      animationType="slide"
+      onRequestClose={props.onClose}
+      presentationStyle={Platform.OS === "ios" ? "pageSheet" : "fullScreen"}
+      visible={props.visible}
+    >
+      <View
+        style={{
+          flex: 1,
+          backgroundColor: theme.colors.background,
+          paddingTop: Platform.OS === "ios" ? 0 : insets.top,
+        }}
+      >
+        <View
+          style={{
+            height: 56,
+            flexDirection: "row",
+            alignItems: "center",
+            paddingHorizontal: theme.space.gutter,
+          }}
+        >
+          <Text
+            numberOfLines={1}
+            style={{
+              flex: 1,
+              color: theme.colors.text,
+              fontSize: theme.type.body + 1,
+              fontWeight: theme.type.weightStrong,
+            }}
+          >
+            {props.title}
+          </Text>
+          <Pressable
+            accessibilityRole="button"
+            hitSlop={12}
+            onPress={props.onClose}
+            style={{ minHeight: 44, justifyContent: "center" }}
+          >
+            <Text
+              style={{ color: theme.colors.accent, fontSize: theme.type.body, fontWeight: "600" }}
+            >
+              Done
+            </Text>
+          </Pressable>
+        </View>
+        <ScrollView
+          contentContainerStyle={{ padding: theme.space.gutter, paddingBottom: insets.bottom + 24 }}
+        >
+          <AgentStepList items={props.steps} theme={theme} />
+        </ScrollView>
+      </View>
+    </Modal>
+  );
+}