@lotics/ui 5.3.0 → 5.5.0

package/src/agent_run.tsx

@@ -1,174 +1,169 @@
-import { StyleSheet, View } from "react-native";
-import { colors, solid, tint } from "./colors";
+import { useEffect, useRef, type ReactNode } from "react";
+import { Animated, StyleSheet, View } from "react-native";
+import { colors, solid } from "./colors";
 import { Text } from "./text";
-import { Icon, type IconName } from "./icon";
-import { ActivityIndicator } from "./activity_indicator";
-import { AnimationFadeIn } from "./animation_fade_in";
+import { type IconName } from "./icon";
+import { Peek } from "./peek";
+import { Stepper, Step, type StepStatus } from "./stepper";
 
 export type AgentStepStatus = "running" | "done" | "error";
 
 export interface AgentRunStep {
   id: string;
-  /** The action line — what the agent is doing ("Reading the image",
-   *  "Identifying the box style"). */
+  /** A `tool` step carries the RAW tool name (`update_records`) — the feed maps
+   *  it to a human label via the default map / `labelForTool`. A `step` carries
+   *  an already-human label. */
   label: string;
-  /** Streamed reasoning or result text under the label (muted). Grows as the
-   *  model streams; the host appends to it. */
+  /** A note under the label (a count, an input summary), muted. */
   detail?: string;
   status: AgentStepStatus;
-  /** A `tool` step renders its label in a monospace chip — it called a tool
-   *  rather than reasoned. */
   kind?: "step" | "tool";
+  /** Optional content shown in a `Peek` popover when the step is pressed —
+   *  glance into what the step did (the tool input, a result summary). */
+  peek?: ReactNode;
 }
 
 export interface AgentRunProps {
   steps: AgentRunStep[];
-  /** Whole-run state. `streaming` keeps the feed alive — the running node spins
-   *  and the header shows a working indicator; `done`/`error` settle it.
-   *  Defaults to `streaming` while any step is running, else `done`. */
+  /** The agent's streamed reasoning / answer text — shown as a narration block
+   *  above the feed, with a live caret while streaming. */
+  text?: string;
+  /** Whole-run state. `streaming` keeps the caret blinking + the latest step
+   *  pulsing; `done`/`error` settle it. Defaults to `streaming` while a step runs. */
   state?: "streaming" | "done" | "error";
-  /** Header label — the task the agent is performing ("Designing the dieline").
-   *  Omit for a bare step feed with no header band. */
-  title?: string;
+  /** Localize / override a TOOL step's display label by its raw tool name
+   *  (`update_records` → "Đang cập nhật dữ liệu"). Return `undefined` to fall
+   *  back to the built-in label. */
+  labelForTool?: (toolName: string) => string | undefined;
+  /** The always-last terminal step's label. Default "Done"; localize per app. */
+  doneLabel?: string;
   accessibilityLabel?: string;
 }
 
+// ── Tool → display meta ───────────────────────────────────────────────────────
+// The bounded set of platform tools an app agent can call. English by default
+// (the kit is locale-neutral; apps localize via `labelForTool`). A tool the map
+// doesn't know falls back to a prettified name + a neutral icon.
+const TOOL_META: Record<string, { label: string; icon: IconName }> = {
+  query_records: { label: "Searching records", icon: "search" },
+  get_record: { label: "Reading a record", icon: "file-text" },
+  get_records: { label: "Reading records", icon: "file-text" },
+  create_records: { label: "Creating records", icon: "plus" },
+  update_records: { label: "Updating records", icon: "square-pen" },
+  delete_records: { label: "Removing records", icon: "trash" },
+  generate_pdf_from_template: { label: "Generating PDF", icon: "file-down" },
+  generate_excel_from_template: { label: "Generating spreadsheet", icon: "file-spreadsheet" },
+  generate_docx_from_template: { label: "Generating document", icon: "file-text" },
+};
+
+function prettifyToolName(name: string): string {
+  const s = name.replace(/_/g, " ").trim();
+  return s ? s.charAt(0).toUpperCase() + s.slice(1) : name;
+}
+
+/** Resolve a tool's display label + icon: a caller override wins on the label,
+ *  then the built-in map, then a prettified fallback. Exported so other agent
+ *  surfaces (e.g. `AgentProgress`) render the same labels. */
+export function resolveToolMeta(
+  toolName: string,
+  labelForTool?: (toolName: string) => string | undefined,
+): { label: string; icon: IconName } {
+  const def =
+    TOOL_META[toolName] ??
+    (toolName.startsWith("generate_") && toolName.endsWith("_from_template")
+      ? { label: "Generating document", icon: "file-text" as IconName }
+      : undefined);
+  return {
+    label: labelForTool?.(toolName) ?? def?.label ?? prettifyToolName(toolName),
+    icon: def?.icon ?? "list",
+  };
+}
+
 /**
- * A live feed of an AI agent's work — the steps it takes (reasoning, tool
- * calls, results) revealed as they happen, on a connecting spine. The
- * transparent-work surface, NOT a spinner. Shares the `Timeline` node anatomy: a
- * tinted disc behind a full-colour icon, fading in as each step arrives. A
- * running step spins (blue); a finished step settles to an emerald check; a
- * failure to a red alert. Pair with `Composer` (the command that starts a
- * run) and `ReviewCard` (the result to review). Unlike `StepList` (a known,
- * guided run of fixed steps) the steps here arrive unknown-ahead.
+ * A live feed of an AI agent's work — the prose it streams + the tools it calls,
+ * on a vertical `Stepper`: one neutral dot per call (the latest pulsing while the
+ * run is live, a check once done) with a plain-text label, no chip/icon, ALWAYS
+ * ending on a "Done" terminal step. A step can carry `peek` content to glance
+ * into via a popover. Tool names map to labels via the built-in default + a
+ * `labelForTool` override. Pair with `Composer` + `ReviewCard`.
  */
 export function AgentRun(props: AgentRunProps) {
-  const { steps, title, accessibilityLabel } = props;
+  const { steps, text, labelForTool, doneLabel = "Done", accessibilityLabel } = props;
   const anyRunning = steps.some((s) => s.status === "running");
   const state = props.state ?? (anyRunning ? "streaming" : "done");
   const streaming = state === "streaming";
+  const last = steps.length - 1;
 
   return (
-    <View accessibilityLabel={accessibilityLabel} style={{ gap: title ? 12 : 0 }}>
-      {title ? (
-        <View style={styles.header}>
-          <Text size="sm" weight="semibold" style={{ flex: 1 }} numberOfLines={1}>
-            {title}
-          </Text>
-          <HeaderStatus state={state} streaming={streaming} />
-        </View>
+    <View accessibilityLabel={accessibilityLabel} style={{ gap: 12 }}>
+      {text ? (
+        <Text size="sm" style={styles.narration}>
+          {text}
+          {streaming ? <Caret /> : null}
+        </Text>
       ) : null}
 
-      <View>
+      <Stepper orientation="vertical" live={streaming}>
         {steps.map((s, i) => {
-          const last = i === steps.length - 1;
-          return (
-            <View key={s.id} style={styles.item}>
-              <View style={styles.spineCol}>
-                <AnimationFadeIn key={`${s.id}-${s.status}`}>
-                  <StepNode status={s.status} />
-                </AnimationFadeIn>
-                {!last ? <View style={styles.spine} /> : null}
-              </View>
-              <View style={[styles.contentCol, !last ? styles.contentGap : null]}>
-                {s.kind === "tool" ? (
-                  <View style={styles.toolChip}>
-                    <Text size="xs" color="muted" numberOfLines={1}>
-                      {s.label}
-                    </Text>
-                  </View>
-                ) : (
-                  <Text
-                    size="sm"
-                    weight={s.status === "running" ? "medium" : "regular"}
-                    color={s.status === "done" ? "muted" : s.status === "error" ? "danger" : "default"}
-                  >
-                    {s.label}
-                  </Text>
-                )}
-                {s.detail ? (
-                  <Text size="xs" color="muted" style={{ marginTop: 2 }}>
-                    {s.detail}
-                  </Text>
-                ) : null}
-              </View>
+          // Tools the SDK feeds arrive already "done"; show the most recent as
+          // the pulsing current while the run is still live.
+          const status: StepStatus =
+            s.status === "error"
+              ? "warning"
+              : s.status === "running" || (streaming && i === last)
+                ? "current"
+                : "done";
+          const label = s.kind === "tool" ? resolveToolMeta(s.label, labelForTool).label : s.label;
+          const body = (
+            <View style={{ gap: 1 }}>
+              <Text size="sm">{label}</Text>
+              {s.detail ? (
+                <Text size="xs" color={s.status === "error" ? "danger" : "muted"}>
+                  {s.detail}
+                </Text>
+              ) : null}
             </View>
           );
+          return (
+            <Step key={s.id} status={status}>
+              {s.peek ? (
+                <Peek accessibilityLabel={label} content={s.peek}>
+                  {body}
+                </Peek>
+              ) : (
+                body
+              )}
+            </Step>
+          );
         })}
-      </View>
+        {state === "done" ? (
+          <Step key="__done" status="complete">
+            <Text size="sm" weight="medium">
+              {doneLabel}
+            </Text>
+          </Step>
+        ) : null}
+      </Stepper>
     </View>
   );
 }
 
-const NODE_STATUS: Record<"done" | "error", { color: string; icon: IconName }> = {
-  done: { color: solid("emerald"), icon: "check" },
-  error: { color: solid("red"), icon: "circle-alert" },
-};
-
-function StepNode({ status }: { status: AgentStepStatus }) {
-  if (status === "running") {
-    return (
-      <View style={[styles.node, { backgroundColor: tint("blue", 0.12) }]}>
-        <ActivityIndicator size={12} color={solid("blue")} />
-      </View>
+// A blinking caret that trails the streamed text — the signature of live writing.
+function Caret() {
+  const opacity = useRef(new Animated.Value(1)).current;
+  useEffect(() => {
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(opacity, { toValue: 0, duration: 480, useNativeDriver: false }),
+        Animated.timing(opacity, { toValue: 1, duration: 480, useNativeDriver: false }),
+      ]),
     );
-  }
-  const s = NODE_STATUS[status];
-  return (
-    <View style={[styles.node, { backgroundColor: tint(status === "done" ? "emerald" : "red", 0.12) }]}>
-      <Icon name={s.icon} size={13} color={s.color} />
-    </View>
-  );
-}
-
-function HeaderStatus({ state, streaming }: { state: "streaming" | "done" | "error"; streaming: boolean }) {
-  if (streaming) {
-    return (
-      <View style={styles.headerStatus}>
-        <ActivityIndicator size={12} color={solid("blue")} />
-        <Text size="xs" weight="medium" style={{ color: solid("blue") }}>
-          Working
-        </Text>
-      </View>
-    );
-  }
-  if (state === "error") {
-    return (
-      <View style={styles.headerStatus}>
-        <Icon name="circle-alert" size={13} color={solid("red")} />
-        <Text size="xs" weight="medium" color="danger">
-          Stopped
-        </Text>
-      </View>
-    );
-  }
-  return (
-    <View style={styles.headerStatus}>
-      <Icon name="circle-check" size={13} color={solid("emerald")} />
-      <Text size="xs" weight="medium" style={{ color: solid("emerald") }}>
-        Done
-      </Text>
-    </View>
-  );
+    loop.start();
+    return () => loop.stop();
+  }, [opacity]);
+  return <Animated.Text style={{ opacity, color: solid("blue") }}>▍</Animated.Text>;
 }
 
-const NODE = 22;
-
 const styles = StyleSheet.create({
-  header: { flexDirection: "row", alignItems: "center", gap: 8, minHeight: 20 },
-  headerStatus: { flexDirection: "row", alignItems: "center", gap: 5 },
-  item: { flexDirection: "row", gap: 12 },
-  spineCol: { width: NODE, alignItems: "center", paddingTop: 1 },
-  spine: { width: 1.5, flex: 1, minHeight: 12, borderRadius: 1, backgroundColor: colors.zinc[200], marginTop: 3 },
-  contentCol: { flex: 1, paddingTop: 2 },
-  contentGap: { paddingBottom: 14 },
-  node: { width: NODE, height: NODE, borderRadius: NODE / 2, alignItems: "center", justifyContent: "center" },
-  toolChip: {
-    alignSelf: "flex-start",
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    borderRadius: 6,
-    backgroundColor: colors.zinc[100],
-  },
+  narration: { lineHeight: 21, color: colors.zinc[700] },
 });

package/src/animation_fade_in.tsx

@@ -4,19 +4,26 @@ import { Animated, StyleProp, ViewStyle } from "react-native";
 interface AnimationFadeInProps {
   children: React.ReactNode;
   style?: StyleProp<ViewStyle>;
+  /** Rise this many px while fading in — the "appearing into place" gesture.
+   *  Default 0 (fade only). */
+  translateY?: number;
 }
 
 export function AnimationFadeIn(props: AnimationFadeInProps) {
-  const { children, style } = props;
-  const opacity = useRef(new Animated.Value(0)).current;
+  const { children, style, translateY = 0 } = props;
+  const progress = useRef(new Animated.Value(0)).current;
 
   useEffect(() => {
-    Animated.spring(opacity, {
+    Animated.spring(progress, {
       toValue: 1,
       bounciness: 0,
       useNativeDriver: true,
     }).start();
-  }, [opacity]);
+  }, [progress]);
 
-  return <Animated.View style={[{ opacity }, style]}>{children}</Animated.View>;
+  const transform = translateY
+    ? [{ translateY: progress.interpolate({ inputRange: [0, 1], outputRange: [translateY, 0] }) }]
+    : undefined;
+
+  return <Animated.View style={[{ opacity: progress, transform }, style]}>{children}</Animated.View>;
 }

package/src/change_review.tsx

@@ -32,22 +32,45 @@ export interface ChangeReviewProps<T> {
   summary?: string;
   /** Card heading. Default "Suggested edits". */
   title?: string;
-  /** Providing either flips the card into 1-BY-1 mode: each proposal is its own
-   *  card with Keep / Drop; deciding COLLAPSES it to a preview the host can
-   *  `onUndoItem`. "Accept all" + "Apply kept" sit in a separate footer. The
-   *  decision is recorded — nothing writes until Apply. Omit both for whole-set. */
+  /** Providing either flips into 1-BY-1 mode: each proposal is its own card with
+   *  Keep / Drop; deciding COLLAPSES it to a preview the host can `onUndoItem`.
+   *  Omit both for whole-set (the list, reviewed together). The commit bar
+   *  (Accept all / Apply / Discard) is NOT here — it's `ChangeReviewActions`,
+   *  which the host places in a `DialogFooter` / `DrawerFooter` / inline. */
   onAcceptItem?: (index: number) => void;
   onRejectItem?: (index: number) => void;
   /** Revert a decided item back to pending (the Undo on a collapsed card). */
   onUndoItem?: (index: number) => void;
-  onApply?: () => void;
-  onDiscard?: () => void;
-  applyLabel?: string;
   /** 1-by-1 per-item action labels. Default "Keep" / "Drop". */
   acceptLabel?: string;
   rejectLabel?: string;
+  /** Once resolved the list settles to a quiet outcome line. */
+  status?: "open" | "applied" | "discarded";
+  /** Localize the chrome the LIST emits itself (Keep/Drop take their own props;
+   *  the commit-bar labels live on `ChangeReviewActions`). */
+  labels?: {
+    undo?: string;
+    applied?: string;
+    discarded?: string;
+    /** The "N of M kept" counter — default `${kept} of ${total} kept`. */
+    keptCount?: (kept: number, total: number) => string;
+  };
+}
+
+export interface ChangeReviewActionsProps<T> {
+  /** The same items + per-item status the list reads, so Accept-all knows which
+   *  are pending and Apply knows the kept count. */
+  items: T[];
+  statusOf?: (item: T, index: number) => ChangeReviewItemStatus;
+  /** Presence enables 1-by-1: shows Accept-all and disables Apply at 0 kept. Omit
+   *  for whole-set (no Accept-all; Apply commits the lot). */
+  onAcceptItem?: (index: number) => void;
+  onApply?: () => void;
+  onDiscard?: () => void;
+  applyLabel?: string;
   acceptAllLabel?: string;
-  /** Once resolved the card settles to a quiet outcome line (no actions). */
+  discardLabel?: string;
+  /** Self-hides unless open — the host can always render it. */
   status?: "open" | "applied" | "discarded";
 }
 
@@ -82,13 +105,15 @@ export function ChangeDiff({ before, after }: { before?: string; after: string }
 
 /**
  * An agent-proposed set of changes, reviewed before it lands — never
- * auto-applied. The component owns the review MECHANICS; `renderItem` owns how
- * each proposal looks, so it serves a field diff, a record, or an editable form
- * equally. Two modes. Whole-set: the list + apply / discard the lot. 1-BY-1
- * (when the host passes `onAcceptItem`/`onRejectItem`): each proposal is its own
- * card with Keep / Drop; deciding COLLAPSES the card to a preview with Undo, and
- * a separate footer carries Accept-all + the single Apply that commits the kept
- * set. Where a `ReviewCard` reviews a SINGLE proposal, this is the BATCH engine.
+ * auto-applied. This is the LIST half: it owns the review MECHANICS (per-item
+ * decide + collapse, the kept counter), `renderItem` owns how each proposal
+ * looks. The COMMIT BAR is `ChangeReviewActions` — a separate piece the host
+ * places where commit bars belong (a `DialogFooter`, a `DrawerFooter`, or
+ * inline under the list), so the commit never scrolls away inside a dialog.
+ * Two modes. Whole-set: the list, reviewed together. 1-BY-1 (when the host
+ * passes `onAcceptItem`/`onRejectItem`): each proposal is its own card with
+ * Keep / Drop; deciding COLLAPSES it to a preview with Undo. Where a
+ * `ReviewCard` reviews a SINGLE proposal, this is the BATCH engine.
  */
 export function ChangeReview<T>(props: ChangeReviewProps<T>) {
   const status = props.status ?? "open";
@@ -97,11 +122,13 @@ export function ChangeReview<T>(props: ChangeReviewProps<T>) {
   const statusFor = (item: T, i: number) => props.statusOf?.(item, i) ?? "pending";
   const keptCount = props.items.filter((it, i) => statusFor(it, i) === "accepted").length;
   const title = props.title ?? "Suggested edits";
-
-  const acceptAll = () =>
-    props.items.forEach((it, i) => {
-      if (statusFor(it, i) === "pending") props.onAcceptItem?.(i);
-    });
+  const L = {
+    undo: "Undo",
+    applied: "Applied",
+    discarded: "Discarded",
+    keptCount: (kept: number, total: number) => `${kept} of ${total} kept`,
+    ...props.labels,
+  };
 
   const summaryNote = props.summary ? (
     <View style={styles.note}>
@@ -111,6 +138,13 @@ export function ChangeReview<T>(props: ChangeReviewProps<T>) {
     </View>
   ) : null;
 
+  const resolvedLine =
+    status !== "open" ? (
+      <Text size="xs" color="muted" weight="medium">
+        {status === "applied" ? L.applied : L.discarded}
+      </Text>
+    ) : null;
+
   // ── 1-BY-1: each proposal a bordered card; deciding collapses it to a quiet,
   //    lighter row — visual weight tracks whether it still needs you ──────────
   if (perItem) {
@@ -122,68 +156,55 @@ export function ChangeReview<T>(props: ChangeReviewProps<T>) {
           </Text>
           {status === "open" ? (
             <Text size="xs" color="muted" tabular>
-              {keptCount} of {total} kept
+              {L.keptCount(keptCount, total)}
             </Text>
           ) : null}
         </View>
         {summaryNote}
 
         {status !== "open" ? (
-          <Text size="xs" color="muted" weight="medium">
-            {status === "applied" ? "Applied" : "Discarded"}
-          </Text>
+          resolvedLine
         ) : (
-          <>
-            <View style={styles.list}>
-              {props.items.map((item, i) => {
-                const st = statusFor(item, i);
-                if (st === "pending") {
-                  return (
-                    <View key={props.getKey(item, i)} style={styles.itemCard}>
-                      {props.renderItem(item, i)}
-                      <View style={styles.itemActions}>
-                        <Button title={props.rejectLabel ?? "Drop"} color="muted" shape="rounded" onPress={() => props.onRejectItem?.(i)} />
-                        <Button title={props.acceptLabel ?? "Keep"} color="secondary" shape="rounded" onPress={() => props.onAcceptItem?.(i)} />
-                      </View>
-                    </View>
-                  );
-                }
-                const kept = st === "accepted";
+          <View style={styles.list}>
+            {props.items.map((item, i) => {
+              const st = statusFor(item, i);
+              if (st === "pending") {
                 return (
-                  <View key={props.getKey(item, i)} style={[styles.decidedRow, kept ? null : styles.decidedDrop]}>
-                    <Icon name={kept ? "check" : "x"} size={15} color={kept ? colors.emerald[600] : colors.zinc[400]} />
-                    <View style={{ flex: 1 }}>
-                      {props.renderSummary ? (
-                        props.renderSummary(item, kept, i)
-                      ) : (
-                        <Text size="sm" color={kept ? "default" : "muted"} numberOfLines={1} style={kept ? null : styles.strike}>
-                          {props.getTitle?.(item, i) ?? ""}
-                        </Text>
-                      )}
+                  <View key={props.getKey(item, i)} style={styles.itemCard}>
+                    {props.renderItem(item, i)}
+                    <View style={styles.itemActions}>
+                      <Button title={props.rejectLabel ?? "Drop"} color="muted" shape="rounded" onPress={() => props.onRejectItem?.(i)} />
+                      <Button title={props.acceptLabel ?? "Keep"} color="secondary" shape="rounded" onPress={() => props.onAcceptItem?.(i)} />
                     </View>
-                    {props.onUndoItem ? (
-                      <Button title="Undo" color="muted" shape="rounded" onPress={() => props.onUndoItem?.(i)} />
-                    ) : null}
                   </View>
                 );
-              })}
-            </View>
-
-            <View style={styles.footer}>
-              <Button title={props.acceptAllLabel ?? "Accept all"} color="muted" shape="rounded" onPress={acceptAll} />
-              <View style={{ flex: 1 }} />
-              {props.onDiscard ? <Button title="Discard" color="muted" shape="rounded" onPress={props.onDiscard} /> : null}
-              {props.onApply ? (
-                <Button title={props.applyLabel ?? "Apply kept"} color="primary" shape="rounded" disabled={keptCount === 0} onPress={props.onApply} />
-              ) : null}
-            </View>
-          </>
+              }
+              const kept = st === "accepted";
+              return (
+                <View key={props.getKey(item, i)} style={[styles.decidedRow, kept ? null : styles.decidedDrop]}>
+                  <Icon name={kept ? "check" : "x"} size={15} color={kept ? colors.emerald[600] : colors.zinc[400]} />
+                  <View style={{ flex: 1 }}>
+                    {props.renderSummary ? (
+                      props.renderSummary(item, kept, i)
+                    ) : (
+                      <Text size="sm" color={kept ? "default" : "muted"} numberOfLines={1} style={kept ? null : styles.strike}>
+                        {props.getTitle?.(item, i) ?? ""}
+                      </Text>
+                    )}
+                  </View>
+                  {props.onUndoItem ? (
+                    <Button title={L.undo} color="muted" shape="rounded" onPress={() => props.onUndoItem?.(i)} />
+                  ) : null}
+                </View>
+              );
+            })}
+          </View>
         )}
       </View>
     );
   }
 
-  // ── WHOLE-SET: one bordered card, review the lot, apply / discard together ─
+  // ── WHOLE-SET: one bordered card, review the lot together ──────────────────
   return (
     <View style={[reviewCardStyle, status !== "open" ? reviewResolvedStyle : null]}>
       <Text size="xs" color="muted" weight="medium">
@@ -197,19 +218,43 @@ export function ChangeReview<T>(props: ChangeReviewProps<T>) {
           </View>
         ))}
       </View>
-      {status !== "open" ? (
-        <Text size="xs" color="muted" weight="medium">
-          {status === "applied" ? "Applied" : "Discarded"}
-        </Text>
-      ) : (
-        <View style={styles.footer}>
-          <View style={{ flex: 1 }} />
-          {props.onDiscard ? <Button title="Discard" color="muted" shape="rounded" onPress={props.onDiscard} /> : null}
-          {props.onApply ? (
-            <Button title={props.applyLabel ?? "Apply"} color="primary" shape="rounded" onPress={props.onApply} />
-          ) : null}
-        </View>
-      )}
+      {resolvedLine}
+    </View>
+  );
+}
+
+/**
+ * The commit bar for a `ChangeReview` — Accept all (1-by-1) · Discard · Apply.
+ * SEPARATE from the list so the host pins it where commit bars belong: drop it
+ * into a `DialogFooter` / `DrawerFooter`, or render it inline under the list.
+ * It reads the same `items` + `statusOf` the list does, so it owns Accept-all
+ * and the apply-disabled-at-0-kept logic — the host never re-derives them.
+ * Renders a right-aligned button row (no divider — the footer container or an
+ * inline wrapper provides the chrome); self-hides once `status` isn't open.
+ */
+export function ChangeReviewActions<T>(props: ChangeReviewActionsProps<T>) {
+  if ((props.status ?? "open") !== "open") return null;
+  const perItem = props.onAcceptItem != null;
+  const statusFor = (item: T, i: number) => props.statusOf?.(item, i) ?? "pending";
+  const keptCount = props.items.filter((it, i) => statusFor(it, i) === "accepted").length;
+  const acceptAll = () =>
+    props.items.forEach((it, i) => {
+      if (statusFor(it, i) === "pending") props.onAcceptItem?.(i);
+    });
+  return (
+    <View style={styles.actionsRow}>
+      {perItem ? <Button title={props.acceptAllLabel ?? "Accept all"} color="muted" shape="rounded" onPress={acceptAll} /> : null}
+      <View style={{ flex: 1 }} />
+      {props.onDiscard ? <Button title={props.discardLabel ?? "Discard"} color="muted" shape="rounded" onPress={props.onDiscard} /> : null}
+      {props.onApply ? (
+        <Button
+          title={props.applyLabel ?? (perItem ? "Apply kept" : "Apply")}
+          color="primary"
+          shape="rounded"
+          disabled={perItem && keptCount === 0}
+          onPress={props.onApply}
+        />
+      ) : null}
     </View>
   );
 }
@@ -246,7 +291,10 @@ const styles = {
     diff: { gap: 3 },
     diffLine: { flexDirection: "row", alignItems: "baseline", gap: 8 },
     strike: { textDecorationLine: "line-through" },
-    footer: { flexDirection: "row", alignItems: "center", gap: 8, borderTopWidth: 1, borderTopColor: colors.zinc[200], paddingTop: 14 },
+    // The commit bar: a plain right-aligned row. The container (DialogFooter / an
+    // inline wrapper) owns any divider — the bar itself stays chrome-less so it
+    // nests cleanly in a footer without double borders. flex:1 fills the row.
+    actionsRow: { flexDirection: "row", alignItems: "center", gap: 8, flex: 1 },
   }),
   marker: (color: string) => ({ color, width: 12 }),
   value: (color: string) => ({ color }),

package/src/share_or_download.test.ts

@@ -29,6 +29,17 @@ describe("shareOrDownloadFiles", () => {
     expect(shared.title).toBe("Ảnh");
   });
 
+  it("rides the given credentials on the blob fetch so an auth-gated proxy URL authorizes", async () => {
+    // Type the init param so mock.calls[0][1] is the RequestInit we assert on.
+    const fetchMock = vi.fn(async (_url: string, _init?: RequestInit) => new Response(new Blob(["img"], { type: "image/png" })));
+    vi.stubGlobal("fetch", fetchMock);
+    vi.stubGlobal("navigator", { canShare: () => true, share: vi.fn(async () => undefined) });
+
+    await shareOrDownloadFiles([{ url: "https://api.example/v1/files/k", filename: "a.png" }], { credentials: "include" });
+
+    expect(fetchMock.mock.calls[0][1]).toMatchObject({ credentials: "include" });
+  });
+
   it("treats a cancelled share sheet (AbortError) as done — never falls back to downloading", async () => {
     vi.stubGlobal("fetch", vi.fn(async () => new Response(new Blob(["img"], { type: "image/png" }))));
     const share = vi.fn(async () => { throw new DOMException("cancelled", "AbortError"); });