@opengeni/react-native 1.4.5-canary.37615713321001

package/src/timeline/session-signals.tsx

@@ -0,0 +1,312 @@
+import type { ClientModel, LineageNode, SessionBackgroundCommand } from "@opengeni/sdk";
+import type { UseGoalResult } from "@opengeni/react/session";
+import { sessionAgentsSignal, sessionGoalStateLabel } from "@opengeni/react/session-agents-model";
+import { useState, type ReactNode } from "react";
+import { ActivityIndicator, Pressable, ScrollView, Text, View, type TextStyle } from "react-native";
+import { Button } from "./controls";
+import { Icon, type NativeIconName } from "./icon";
+import { SessionRow } from "./session-list";
+import { BottomSheet } from "./sheet";
+import { fontStyle, useNativeTimelineTheme, type NativeTimelineTheme } from "./theme";
+
+/* ----------------------------------------------------------------------------
+   The web session chrome's goal, agents and commands segments: one row of
+   quiet chips above the composer, each opening its panel as a sheet. A chip
+   appears only when there is something to show.
+   -------------------------------------------------------------------------- */
+
+export interface SessionCommandsSource {
+  commands: SessionBackgroundCommand[];
+  loading: boolean;
+  error: Error | null;
+  cancel: (commandId: string) => Promise<void>;
+}
+
+export function SessionSignals(props: {
+  goal?: UseGoalResult | null | undefined;
+  agents: readonly LineageNode[];
+  commandsCount: number;
+  /** Mounted only while the commands sheet is open, so a closed chip never polls. */
+  renderCommands: (close: () => void) => ReactNode;
+  onOpenSession?: ((sessionId: string) => void) | undefined;
+  models?: readonly ClientModel[] | undefined;
+  readOnly?: boolean | undefined;
+}) {
+  const [open, setOpen] = useState<"goal" | "agents" | "commands" | null>(null);
+  const goal = props.goal?.goal ?? null;
+  const agents = sessionAgentsSignal(props.agents);
+  if (!goal && !agents && props.commandsCount === 0) return null;
+  const close = () => setOpen(null);
+  return (
+    <>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={{ gap: 6, alignItems: "center" }}
+        style={{ flexGrow: 0, flexShrink: 1 }}
+      >
+        {goal ? (
+          <Chip
+            icon="target"
+            label="Goal"
+            detail={sessionGoalStateLabel(goal)}
+            tone={goal.status === "active" ? "running" : "neutral"}
+            onPress={() => setOpen("goal")}
+          />
+        ) : null}
+        {agents ? (
+          <Chip
+            icon="bot"
+            label={`${agents.count} agent${agents.count === 1 ? "" : "s"}`}
+            detail={agents.detail}
+            tone={agents.tone}
+            onPress={() => setOpen("agents")}
+          />
+        ) : null}
+        {props.commandsCount > 0 ? (
+          <Chip
+            icon="terminal"
+            label={`${props.commandsCount} command${props.commandsCount === 1 ? "" : "s"}`}
+            detail="Running"
+            tone="running"
+            onPress={() => setOpen("commands")}
+          />
+        ) : null}
+      </ScrollView>
+
+      <BottomSheet open={open === "goal"} onClose={close} accessibilityLabel="Goal">
+        {goal && props.goal ? <GoalPanel goal={props.goal} readOnly={props.readOnly} /> : null}
+      </BottomSheet>
+      <BottomSheet open={open === "agents"} onClose={close} accessibilityLabel="Agents">
+        <SheetTitle>Agents</SheetTitle>
+        <ScrollView style={{ paddingHorizontal: 12 }}>
+          {props.agents.map((node) => (
+            <View key={node.session.id}>
+              <SessionRow
+                session={node.session}
+                models={props.models ?? []}
+                onPress={() => {
+                  close();
+                  props.onOpenSession?.(node.session.id);
+                }}
+              />
+              {node.children.map((child) => (
+                <View key={child.session.id} style={{ paddingLeft: 18 }}>
+                  <SessionRow
+                    session={child.session}
+                    models={props.models ?? []}
+                    onPress={() => {
+                      close();
+                      props.onOpenSession?.(child.session.id);
+                    }}
+                  />
+                </View>
+              ))}
+            </View>
+          ))}
+        </ScrollView>
+      </BottomSheet>
+      <BottomSheet open={open === "commands"} onClose={close} accessibilityLabel="Commands">
+        <SheetTitle>Commands</SheetTitle>
+        {open === "commands" ? props.renderCommands(close) : null}
+      </BottomSheet>
+    </>
+  );
+}
+
+function Chip(props: {
+  icon: NativeIconName;
+  label: string;
+  detail: string;
+  tone: "running" | "waiting" | "neutral";
+  onPress: () => void;
+}) {
+  const theme = useNativeTimelineTheme();
+  const c = theme.colors;
+  const toneColor =
+    props.tone === "running"
+      ? c["status-running"]
+      : props.tone === "waiting"
+        ? c["status-waiting"]
+        : c["fg-subtle"];
+  // Compact on the phone: the status reads from the dot (and the sheet); the
+  // word stays in the accessibility label. 30pt tall, 44pt to touch.
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={`${props.label}, ${props.detail}`}
+      onPress={props.onPress}
+      hitSlop={{ top: 7, bottom: 7, left: 3, right: 3 }}
+      style={({ pressed }) => signalChipStyle(theme, pressed)}
+    >
+      <Icon name={props.icon} size={13} color={c["fg-muted"]} />
+      <Text style={signalChipText(theme)}>{props.label}</Text>
+      <View style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: toneColor }} />
+    </Pressable>
+  );
+}
+
+function SheetTitle({ children }: { children: string }) {
+  const theme = useNativeTimelineTheme();
+  return (
+    <Text
+      accessibilityRole="header"
+      style={{
+        ...fontStyle(theme, 600),
+        fontSize: 17,
+        color: theme.colors.fg,
+        paddingHorizontal: 20,
+        paddingBottom: 8,
+      }}
+    >
+      {children}
+    </Text>
+  );
+}
+
+function GoalPanel({ goal, readOnly }: { goal: UseGoalResult; readOnly?: boolean | undefined }) {
+  const theme = useNativeTimelineTheme();
+  const c = theme.colors;
+  const record = goal.goal!;
+  const body = { ...fontStyle(theme, 400), fontSize: 15, lineHeight: 22, color: c.fg };
+  const label = { ...fontStyle(theme, 600), fontSize: 12, color: c["fg-subtle"] };
+  return (
+    <ScrollView contentContainerStyle={{ paddingHorizontal: 20, paddingBottom: 12, gap: 14 }}>
+      <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+        <Text style={{ ...fontStyle(theme, 600), fontSize: 17, color: c.fg }}>Goal</Text>
+        <Text style={{ ...fontStyle(theme, 500), fontSize: 13, color: c["fg-muted"] }}>
+          {sessionGoalStateLabel(record)}
+        </Text>
+      </View>
+      <View style={{ gap: 4 }}>
+        <Text style={label}>OBJECTIVE</Text>
+        <Text style={body} selectable>
+          {record.text}
+        </Text>
+      </View>
+      {record.successCriteria ? (
+        <View style={{ gap: 4 }}>
+          <Text style={label}>DONE WHEN</Text>
+          <Text style={body} selectable>
+            {record.successCriteria}
+          </Text>
+        </View>
+      ) : null}
+      {record.status === "paused" && record.rationale ? (
+        <View style={{ gap: 4 }}>
+          <Text style={label}>WHY IT PAUSED</Text>
+          <Text style={body}>{record.rationale}</Text>
+        </View>
+      ) : null}
+      {record.status === "completed" && record.evidence ? (
+        <View style={{ gap: 4 }}>
+          <Text style={label}>EVIDENCE</Text>
+          <Text style={body}>{record.evidence}</Text>
+        </View>
+      ) : null}
+      {!readOnly && record.status !== "completed" ? (
+        <View style={{ flexDirection: "row", gap: 8 }}>
+          {record.status === "active" ? (
+            <Button
+              label="Pause goal"
+              icon="pause"
+              busy={goal.updating}
+              onPress={() => void goal.pause()}
+            />
+          ) : (
+            <Button
+              label="Resume goal"
+              icon="play"
+              variant="primary"
+              busy={goal.updating}
+              onPress={() => void goal.resume()}
+            />
+          )}
+        </View>
+      ) : null}
+      {goal.mutationError ? (
+        <Text style={{ ...body, color: c["status-failed"] }}>{goal.mutationError.message}</Text>
+      ) : null}
+    </ScrollView>
+  );
+}
+
+/** The web commands panel: each running command with its state and a Stop action. */
+export function SessionCommandsList({
+  commands,
+  readOnly,
+}: {
+  commands: SessionCommandsSource;
+  readOnly?: boolean | undefined;
+}) {
+  const theme = useNativeTimelineTheme();
+  const c = theme.colors;
+  if (commands.loading && commands.commands.length === 0) {
+    return <ActivityIndicator style={{ padding: 24 }} />;
+  }
+  if (commands.commands.length === 0) {
+    return (
+      <Text style={{ ...fontStyle(theme, 400), color: c["fg-muted"], padding: 20 }}>
+        No commands are running.
+      </Text>
+    );
+  }
+  return (
+    <ScrollView contentContainerStyle={{ paddingHorizontal: 16, gap: 8, paddingBottom: 12 }}>
+      {commands.commands.map((command) => {
+        const running = command.state === "running";
+        return (
+          <View
+            key={command.id}
+            style={{
+              gap: 6,
+              padding: 12,
+              borderRadius: theme.radius.md,
+              backgroundColor: c["surface-2"],
+            }}
+          >
+            <Text
+              numberOfLines={3}
+              style={{ ...fontStyle(theme, 400, "mono"), fontSize: 13, color: c.fg }}
+            >
+              {`$ ${command.commandPreview}`}
+            </Text>
+            <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+              <Text
+                style={{ ...fontStyle(theme, 400), fontSize: 12, color: c["fg-muted"], flex: 1 }}
+              >
+                {command.provider === "connected_machine" ? "On a machine" : "In the sandbox"} ·{" "}
+                {command.state === "stopping" ? "Stopping" : running ? "Running" : "Finished"}
+              </Text>
+              {running && !readOnly ? (
+                <Button
+                  label="Stop"
+                  icon="square"
+                  size="sm"
+                  onPress={() => void commands.cancel(command.id)}
+                />
+              ) : null}
+            </View>
+          </View>
+        );
+      })}
+    </ScrollView>
+  );
+}
+
+/** The compact signal chip shared by goal, agents, commands and the queue. */
+export function signalChipStyle(theme: NativeTimelineTheme, pressed: boolean) {
+  return {
+    flexDirection: "row" as const,
+    alignItems: "center" as const,
+    gap: 5,
+    height: 30,
+    paddingHorizontal: 10,
+    borderRadius: 15,
+    backgroundColor: pressed ? theme.colors.hover : theme.colors["surface-2"],
+  };
+}
+
+export function signalChipText(theme: NativeTimelineTheme): TextStyle {
+  return { ...fontStyle(theme, 500), fontSize: 13, color: theme.colors.fg };
+}

package/src/timeline/sheet.tsx

@@ -0,0 +1,153 @@
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import {
+  AccessibilityInfo,
+  Animated,
+  Easing,
+  KeyboardAvoidingView,
+  Modal,
+  PanResponder,
+  Platform,
+  Pressable,
+  View,
+  useWindowDimensions,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useNativeTimelineTheme } from "./theme";
+
+/**
+ * A content-sized bottom sheet: dimmed backdrop, grabber, drag or tap outside
+ * to dismiss, keyboard-aware and safe-area padded. The native counterpart of
+ * the web's anchored menus at phone width.
+ */
+export function BottomSheet(props: {
+  open: boolean;
+  onClose: () => void;
+  accessibilityLabel: string;
+  /** Cap as a fraction of the window height (default 0.85). */
+  maxHeightRatio?: number | undefined;
+  children: ReactNode;
+}) {
+  const theme = useNativeTimelineTheme();
+  const c = theme.colors;
+  const insets = useSafeAreaInsets();
+  const { height } = useWindowDimensions();
+  const [mounted, setMounted] = useState(props.open);
+  const progress = useRef(new Animated.Value(0)).current;
+  const drag = useRef(new Animated.Value(0)).current;
+  const onClose = useRef(props.onClose);
+  onClose.current = props.onClose;
+
+  useEffect(() => {
+    let cancelled = false;
+    if (props.open) {
+      setMounted(true);
+      drag.setValue(0);
+      void AccessibilityInfo.isReduceMotionEnabled().then((reduce) => {
+        if (cancelled) return;
+        Animated.timing(progress, {
+          toValue: 1,
+          duration: reduce ? 0 : 260,
+          easing: Easing.bezier(0.22, 1, 0.36, 1),
+          useNativeDriver: true,
+        }).start();
+      });
+    } else if (mounted) {
+      Animated.timing(progress, {
+        toValue: 0,
+        duration: 200,
+        easing: Easing.in(Easing.quad),
+        useNativeDriver: true,
+      }).start(({ finished }) => {
+        if (finished && !cancelled) setMounted(false);
+      });
+    }
+    return () => {
+      cancelled = true;
+    };
+  }, [drag, mounted, progress, props.open]);
+
+  const pan = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: (_event, gesture) =>
+        gesture.dy > 6 && Math.abs(gesture.dy) > Math.abs(gesture.dx),
+      onPanResponderMove: (_event, gesture) => drag.setValue(Math.max(0, gesture.dy)),
+      onPanResponderRelease: (_event, gesture) => {
+        if (gesture.dy > 90 || gesture.vy > 0.9) onClose.current();
+        else Animated.spring(drag, { toValue: 0, useNativeDriver: true, bounciness: 0 }).start();
+      },
+      onPanResponderTerminate: () =>
+        Animated.spring(drag, { toValue: 0, useNativeDriver: true, bounciness: 0 }).start(),
+    }),
+  ).current;
+
+  if (!mounted) return null;
+  const translateY = Animated.add(
+    progress.interpolate({ inputRange: [0, 1], outputRange: [height, 0] }),
+    drag,
+  );
+  return (
+    <Modal
+      visible
+      transparent
+      animationType="none"
+      statusBarTranslucent
+      onRequestClose={props.onClose}
+    >
+      <KeyboardAvoidingView
+        behavior={Platform.OS === "ios" ? "padding" : undefined}
+        style={{ flex: 1, justifyContent: "flex-end" }}
+      >
+        <Animated.View
+          style={{
+            position: "absolute",
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            backgroundColor: "rgba(0, 0, 0, 0.4)",
+            opacity: progress,
+          }}
+        >
+          <Pressable
+            style={{ flex: 1 }}
+            onPress={props.onClose}
+            accessibilityRole="button"
+            accessibilityLabel="Close"
+          />
+        </Animated.View>
+        <Animated.View
+          accessibilityViewIsModal
+          accessibilityLabel={props.accessibilityLabel}
+          style={{
+            maxHeight: height * (props.maxHeightRatio ?? 0.85),
+            backgroundColor: c.bg,
+            borderTopLeftRadius: 16,
+            borderTopRightRadius: 16,
+            paddingBottom: Math.max(insets.bottom, 12),
+            transform: [{ translateY }],
+            shadowColor: "#000",
+            shadowOpacity: 0.12,
+            shadowRadius: 16,
+            shadowOffset: { width: 0, height: -2 },
+            elevation: 16,
+          }}
+        >
+          <View
+            {...pan.panHandlers}
+            style={{ alignItems: "center", paddingTop: 8, paddingBottom: 4 }}
+          >
+            <View
+              style={{
+                width: 36,
+                height: 5,
+                borderRadius: 3,
+                backgroundColor: c["border-strong"] ?? c.border,
+              }}
+            />
+          </View>
+          {props.children}
+        </Animated.View>
+      </KeyboardAvoidingView>
+    </Modal>
+  );
+}

package/src/timeline/theme.tsx

@@ -0,0 +1,128 @@
+import { createContext, useContext, useMemo, type ReactNode } from "react";
+import { Platform, type TextStyle } from "react-native";
+import { webColorsDark, webColorsLight, webLengths } from "../ui/web-tokens.gen";
+
+/* ----------------------------------------------------------------------------
+   Native timeline theme
+
+   The web design tokens (generated from the web stylesheet) drive every color,
+   size and radius, so the native timeline matches the web app at phone width.
+   Hosts override tokens (brand colors, fonts) without forking components.
+   -------------------------------------------------------------------------- */
+
+export type WebColorToken = keyof typeof webColorsLight;
+export type NativeTimelineColors = Record<WebColorToken, string>;
+
+export interface NativeTimelineFonts {
+  /** Font family per weight for the sans face; undefined → platform system font. */
+  sans?: Partial<Record<"400" | "500" | "600" | "700", string>> | undefined;
+  /** Font family per weight for the mono face; undefined → platform monospace. */
+  mono?: Partial<Record<"400" | "500", string>> | undefined;
+  /** Regular-weight italic family (custom fonts cannot be synthesized italic on iOS). */
+  sansItalic?: string | undefined;
+  /** Extra sans letter spacing (pt) to match the web face's metrics. */
+  sansTracking?: number | undefined;
+}
+
+export interface NativeTimelineTheme {
+  scheme: "light" | "dark";
+  colors: NativeTimelineColors;
+  size: {
+    xs: number;
+    sm: number;
+    base: number;
+    md: number;
+    composer: number;
+  };
+  radius: { xs: number; sm: number; md: number; lg: number; xl: number; full: number };
+  fonts: NativeTimelineFonts;
+}
+
+export interface NativeTimelineThemeOverrides {
+  light?: Partial<NativeTimelineColors> | undefined;
+  dark?: Partial<NativeTimelineColors> | undefined;
+  fonts?: NativeTimelineFonts | undefined;
+}
+
+export function createNativeTimelineTheme(
+  scheme: "light" | "dark",
+  overrides: NativeTimelineThemeOverrides = {},
+): NativeTimelineTheme {
+  const base = scheme === "dark" ? webColorsDark : webColorsLight;
+  return {
+    scheme,
+    colors: { ...base, ...(scheme === "dark" ? overrides.dark : overrides.light) },
+    size: {
+      xs: webLengths["font-size-xs"],
+      sm: webLengths["font-size-sm"],
+      base: webLengths["font-size-base"],
+      md: webLengths["font-size-md"],
+      composer: webLengths["font-size-composer"],
+    },
+    radius: {
+      xs: webLengths["radius-xs"],
+      sm: webLengths["radius-sm"],
+      md: webLengths["radius-md"],
+      lg: webLengths["radius-lg"],
+      xl: webLengths["radius-xl"],
+      full: webLengths["radius-full"],
+    },
+    fonts: overrides.fonts ?? {},
+  };
+}
+
+/**
+ * Fill for an inset block on the page (code blocks). Web uses `surface-1`, which reads
+ * as a block on the component `bg`; when the host page itself is `surface-1` (the
+ * white or near-black app canvas), the block falls back to the web component `bg` so
+ * it never disappears into the page.
+ */
+export function insetSurface(theme: NativeTimelineTheme): string {
+  const { colors } = theme;
+  if (colors["surface-1"] !== colors.bg) return colors["surface-1"];
+  return (theme.scheme === "dark" ? webColorsDark : webColorsLight).bg;
+}
+
+const ThemeContext = createContext<NativeTimelineTheme>(createNativeTimelineTheme("light"));
+
+export function NativeTimelineThemeProvider({
+  scheme,
+  overrides,
+  children,
+}: {
+  scheme: "light" | "dark";
+  overrides?: NativeTimelineThemeOverrides | undefined;
+  children: ReactNode;
+}) {
+  const theme = useMemo(() => createNativeTimelineTheme(scheme, overrides), [scheme, overrides]);
+  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
+}
+
+export function useNativeTimelineTheme(): NativeTimelineTheme {
+  return useContext(ThemeContext);
+}
+
+/** Text style for a web weight, resolving host font families when supplied. */
+export function fontStyle(
+  theme: NativeTimelineTheme,
+  weight: 400 | 500 | 600 | 700 = 400,
+  face: "sans" | "mono" = "sans",
+): TextStyle {
+  if (face === "mono") {
+    const family = theme.fonts.mono?.[weight >= 500 ? "500" : "400"] ?? theme.fonts.mono?.["400"];
+    return family ? { fontFamily: family } : { fontFamily: MONO_FALLBACK, fontWeight: `${weight}` };
+  }
+  const key = `${weight}` as "400" | "500" | "600" | "700";
+  const family = theme.fonts.sans?.[key];
+  // Android measures single-line text without letter spacing, so tracked text loses
+  // its last glyphs (a truncated "…" shows as ".."); the tweak only matters on iOS.
+  const tracking =
+    theme.fonts.sansTracking && Platform.OS !== "android"
+      ? { letterSpacing: theme.fonts.sansTracking }
+      : {};
+  return family ? { fontFamily: family, ...tracking } : { fontWeight: key, ...tracking };
+}
+
+const MONO_FALLBACK = "Menlo";
+
+export { MONO_FALLBACK };

package/src/timeline/thinking-orb.tsx

@@ -0,0 +1,93 @@
+import { MODE_FRAMES, resolvePreset, type OrbState } from "thinking-orbs/engine";
+import { useEffect, useMemo, useState } from "react";
+import { AccessibilityInfo, AppState } from "react-native";
+import Svg, { Circle, Line } from "react-native-svg";
+import { useNativeTimelineTheme } from "./theme";
+
+/** About 30 frames a second: smooth at 64pt without spending a frame budget. */
+const FRAME_MS = 33;
+
+function ink(white: number, alpha: number | undefined, dark: boolean): string {
+  // The engine's convention: 0 is the darkest ink on paper, mirrored on dark.
+  const level = Math.round((dark ? 1 - Math.min(1, Math.max(0, white)) : white) * 255);
+  return `rgba(${level},${level},${level},${alpha ?? 1})`;
+}
+
+/**
+ * The web's ThinkingOrb on native: the same `thinking-orbs` geometry (one
+ * frame of dots and edges per instant) drawn with SVG. Pauses in the
+ * background and holds a still frame under Reduce Motion, as the web does.
+ */
+export function ThinkingOrb({
+  state = "searching",
+  size = 64,
+  speed = 0.8,
+  displaySize,
+}: {
+  state?: OrbState;
+  size?: 64 | 20;
+  speed?: number;
+  /** Draw the tuned preset larger (for example a call screen) without losing sharpness. */
+  displaySize?: number;
+}) {
+  const theme = useNativeTimelineTheme();
+  const dark = theme.scheme === "dark";
+  const preset = useMemo(() => resolvePreset(state, size), [state, size]);
+  const [time, setTime] = useState(0.6);
+  const [reduceMotion, setReduceMotion] = useState(false);
+  const [active, setActive] = useState(AppState.currentState === "active");
+  useEffect(() => {
+    void AccessibilityInfo.isReduceMotionEnabled().then(setReduceMotion);
+    const motion = AccessibilityInfo.addEventListener("reduceMotionChanged", setReduceMotion);
+    const app = AppState.addEventListener("change", (next) => setActive(next === "active"));
+    return () => {
+      motion.remove();
+      app.remove();
+    };
+  }, []);
+  useEffect(() => {
+    if (reduceMotion || !active) return;
+    const started = Date.now();
+    const timer = setInterval(() => setTime((Date.now() - started) / 1000), FRAME_MS);
+    return () => clearInterval(timer);
+  }, [active, reduceMotion]);
+  const frame = MODE_FRAMES[preset.mode](
+    size,
+    reduceMotion ? 0.6 : time * preset.speed * speed,
+    preset.opts,
+  );
+  return (
+    <Svg
+      width={displaySize ?? size}
+      height={displaySize ?? size}
+      viewBox={`0 0 ${size} ${size}`}
+      accessibilityElementsHidden
+      importantForAccessibility="no"
+    >
+      {frame.lines.map((line, index) => (
+        <Line
+          // Stateless drawing slots retain their keys as coordinates animate.
+          // oxlint-disable-next-line react/no-array-index-key
+          key={`l${index}`}
+          x1={line.x1}
+          y1={line.y1}
+          x2={line.x2}
+          y2={line.y2}
+          stroke={ink(line.white, line.a, dark)}
+          strokeWidth={line.w}
+        />
+      ))}
+      {frame.dots.map((dot, index) => (
+        <Circle
+          // Stateless drawing slots retain their keys as coordinates animate.
+          // oxlint-disable-next-line react/no-array-index-key
+          key={`d${index}`}
+          cx={dot.x}
+          cy={dot.y}
+          r={dot.r}
+          fill={ink(dot.white, dot.a, dark)}
+        />
+      ))}
+    </Svg>
+  );
+}