@stigmer/react 3.12.7 → 3.12.9

package/src/index.ts

@@ -234,6 +234,7 @@ export type {
   SessionRunConfig,
   SetupTabProps,
   SetupTabMutationCallbacks,
+  SetupTabAutoApprove,
 } from "./session/index.js";
 
 // Activity — unified recent activity (sessions + workflow executions)
@@ -285,6 +286,8 @@ export {
   ContextGauge,
   SummarizationBadge,
   SummarizationCard,
+  RecalledMemoriesCard,
+  resolveInjectedFacts,
   PlanCompletionCard,
   PlanArtifactCard,
   PlanStreamingCard,
@@ -411,6 +414,7 @@ export type {
   ContextGaugeProps,
   SummarizationBadgeProps,
   SummarizationCardProps,
+  RecalledMemoriesCardProps,
   PlanCompletionCardProps,
   PlanArtifactCardProps,
   PlanStreamingCardProps,
@@ -551,7 +555,6 @@ export type {
   SessionComposerHandle,
   SessionComposerProps,
   SessionComposerSubmitContext,
-  ComposerAutoApproveProps,
   InteractionModePickerProps,
   InteractionModeOption,
 } from "./composer/index.js";
@@ -866,6 +869,7 @@ export type {
 // hooks (confirm/reject/delete/edit), grouping helpers, and the list panel
 export {
   useMemories,
+  useMemory,
   useConfirmMemory,
   useRejectMemory,
   useDeleteMemory,
@@ -873,15 +877,18 @@ export {
   groupMemoriesByLifecycle,
   formatMemoryProvenance,
   MemoryListPanel,
+  MemoryProposalCardBody,
 } from "./memory/index.js";
 export type {
   UseMemoriesReturn,
+  UseMemoryReturn,
   UseConfirmMemoryReturn,
   UseRejectMemoryReturn,
   UseDeleteMemoryReturn,
   UseUpdateMemoryContentReturn,
   MemoryGroups,
   MemoryListPanelProps,
+  MemoryProposalCardBodyProps,
 } from "./memory/index.js";
 
 // IAM Policy — data hooks, behavior hooks, headless hook, and styled components for access management

package/src/internal/MemoryEnabledRow.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { cn } from "@stigmer/theme";
+import { getUserMessage } from "@stigmer/sdk";
+import { Switch } from "../switch/Switch.js";
+import { SpinnerIcon } from "./SpinnerIcon.js";
+
+/** Props for {@link MemoryEnabledRow}. */
+export interface MemoryEnabledRowProps {
+  /** Id for the switch control (aria-labelledby wiring). */
+  readonly id: string;
+  /** The stored flag value (server state, or an optimistic pending value). */
+  readonly checked: boolean;
+  /** Fired with the next value when the user flips the switch. */
+  readonly onToggle: (next: boolean) => void;
+  /** `true` while the flip is being saved (switch disabled, spinner shown). */
+  readonly saving: boolean;
+  /** `true` when the caller may not edit the flag (read-only rendering). */
+  readonly readOnly?: boolean;
+  /** Error from the last failed flip, or `null`. */
+  readonly error: Error | null;
+  /**
+   * The scope-specific helper copy (DD-006 D6's transparency statement
+   * belongs here). Rendered under the title, wired as the switch's
+   * accessible description.
+   */
+  readonly helperText: string;
+}
+
+/**
+ * The `memory_enabled` consent toggle — one row, shared verbatim by
+ * {@link OrgPreferencesPanel} and {@link AccountPreferencesPanel} so the
+ * two scopes of the double opt-in (DD-006 D1) present identically.
+ *
+ * INSTANT-APPLY by deliberate exception (UX checkpoint, owner-approved
+ * 2026-08-22): both host panels are save-button forms, but a consent bit
+ * flipped-and-unsaved that silently reverts on navigation is exactly the
+ * failure consent UX must not have — so this row saves the moment it is
+ * flipped, matching the Switch primitive's own contract ("instant binary
+ * changes") and every peer product's memory toggle. The helper copy
+ * states it. Hosts wire `onToggle` to their own full-spec-replace update
+ * and pass the in-flight/error state back down.
+ */
+export function MemoryEnabledRow({
+  id,
+  checked,
+  onToggle,
+  saving,
+  readOnly = false,
+  error,
+  helperText,
+}: MemoryEnabledRowProps) {
+  const titleId = `${id}-title`;
+  const descriptionId = `${id}-description`;
+
+  return (
+    <div className="stg:space-y-1">
+      <div className="stg:flex stg:items-start stg:justify-between stg:gap-3">
+        <div className="stg:min-w-0 stg:flex-1">
+          <span
+            id={titleId}
+            className="stg:block stg:text-xs stg:font-medium stg:text-foreground"
+          >
+            Memory
+          </span>
+          <p
+            id={descriptionId}
+            className="stg:text-[0.65rem] stg:leading-snug stg:text-muted-foreground"
+          >
+            {helperText}
+          </p>
+        </div>
+        <span className="stg:flex stg:shrink-0 stg:items-center stg:gap-1.5">
+          {saving && <SpinnerIcon size={12} />}
+          <Switch
+            id={id}
+            checked={checked}
+            onCheckedChange={onToggle}
+            disabled={saving || readOnly}
+            aria-labelledby={titleId}
+            aria-describedby={descriptionId}
+          />
+        </span>
+      </div>
+      {error && (
+        <p className="stg:text-[0.65rem] stg:text-destructive" role="alert">
+          {getUserMessage(error)}
+        </p>
+      )}
+    </div>
+  );
+}

package/src/internal/VirtualizedThread.tsx

@@ -25,6 +25,7 @@ import { ApprovalContext, type ApprovalContextValue } from "../execution/Approva
 import { FileReviewContext, type FileReviewContextValue } from "../execution/FileReviewContext.js";
 import { DevProfiler, useDomNodeCount } from "./dev/index.js";
 import { JumpToLatestButton } from "./JumpToLatestButton.js";
+import { usePinToLatestOnSignal } from "./useAutoScroll.js";
 import { ApprovalPeekBar } from "./ApprovalPeekBar.js";
 import { ThreadItemWrapper } from "./ThreadItemWrapper.js";
 
@@ -57,6 +58,8 @@ export interface VirtualizedThreadProps {
   readonly onRetryExecution?: (message: string) => void;
   readonly onEditMessage?: (text: string) => void;
   readonly slots?: MessageThreadSlots;
+  /** Scroll-on-send counter from `MessageThread` (see `usePinToLatestOnSignal`). */
+  readonly pinToLatestSignal?: number;
 }
 
 // ---------------------------------------------------------------------------
@@ -127,6 +130,7 @@ export function VirtualizedThread({
   onRetryExecution,
   onEditMessage,
   slots,
+  pinToLatestSignal,
 }: VirtualizedThreadProps) {
   const virtuosoRef = useRef<VirtuosoHandle>(null);
   const scrollerRef = useRef<HTMLDivElement | null>(null);
@@ -149,6 +153,7 @@ export function VirtualizedThread({
       behavior: "smooth",
     });
   }, []);
+  usePinToLatestOnSignal(pinToLatestSignal, jumpToLatest);
 
   const renderProps = useMemo(
     () => ({

package/src/internal/__tests__/useAutoScroll.layout.test.tsx

@@ -17,7 +17,11 @@
 
 import { describe, it, expect, vi, afterEach } from "vitest";
 import { render, cleanup } from "@testing-library/react";
-import { useAutoScroll, type UseAutoScrollReturn } from "../useAutoScroll";
+import {
+  useAutoScroll,
+  usePinToLatestOnSignal,
+  type UseAutoScrollReturn,
+} from "../useAutoScroll";
 
 const VIEWPORT_PX = 240;
 const ITEM_PX = 48;
@@ -125,9 +129,11 @@ describe("useAutoScroll under real layout (F-09)", () => {
     scroller().scrollTop = 0;
     await settled(() => expect(latest.isFollowing).toBe(false));
 
-    // Growth while disengaged (an incoming message, or the reader's own
-    // send arriving via refetch): the view must NOT move under them.
-    // This is the measured scroll-on-send posture — see the F-09 record.
+    // Growth while disengaged (an INCOMING message): the view must NOT
+    // move under them. Unchanged by scroll-on-send (stigmer-cloud#267):
+    // the reader's OWN send now pins via the surface-driven signal
+    // (`usePinToLatestOnSignal`, suite below) — the hook's growth pathway
+    // itself still never moves a scrolled-up reader.
     rerender(<AsyncThread items={messages(31)} />);
     await new Promise((resolve) => setTimeout(resolve, 100));
     expect(scroller().scrollTop).toBe(0);
@@ -141,3 +147,98 @@ describe("useAutoScroll under real layout (F-09)", () => {
     });
   });
 });
+
+// ---------------------------------------------------------------------------
+// Scroll-on-send: the surface-driven pin signal (stigmer-cloud#267)
+// ---------------------------------------------------------------------------
+
+/**
+ * AsyncThread plus the send-signal seam every thread surface wires — same
+ * late-mounting wrapper shape (see the determinism note above: the bottom
+ * pin coming from the ResizeObserver pathway is what makes the scroll-up
+ * steps race-free).
+ */
+function SignalThread({
+  items,
+  signal,
+}: {
+  readonly items: readonly string[];
+  readonly signal: number | undefined;
+}) {
+  const hook = useAutoScroll();
+  latest = hook;
+  usePinToLatestOnSignal(signal, hook.jumpToLatest);
+  return (
+    <div
+      ref={hook.scrollRef}
+      data-testid="scroller"
+      style={{ height: VIEWPORT_PX, overflowY: "auto" }}
+    >
+      {items.length === 0 ? (
+        <div data-testid="skeleton" style={{ height: 100 }} />
+      ) : (
+        <div ref={hook.contentRef} data-testid="content">
+          {items.map((text) => (
+            <div key={text} style={{ height: ITEM_PX }}>
+              {text}
+            </div>
+          ))}
+        </div>
+      )}
+      <div ref={hook.sentinelRef} aria-hidden="true" />
+    </div>
+  );
+}
+
+describe("usePinToLatestOnSignal under real layout (stigmer-cloud#267)", () => {
+  it("a signal increment pins a scrolled-up reader to the latest content and re-engages follow", async () => {
+    const { rerender } = render(<SignalThread items={[]} signal={0} />);
+    rerender(<SignalThread items={messages(30)} signal={0} />);
+    await settled(() => {
+      expect(isPinnedToBottom(scroller())).toBe(true);
+      // Follow-STATE quiescence before the reader scrolls (the F-09
+      // case's own discipline) — a queued pre-scroll TRUE must not
+      // re-arm follow behind the scroll-up.
+      expect(latest.isFollowing).toBe(true);
+    });
+
+    // The reader deliberately scrolls up — follow disengages.
+    scroller().scrollTop = 0;
+    await settled(() => expect(latest.isFollowing).toBe(false));
+
+    // Their OWN send: the surface increments the signal. The pin fires
+    // AND re-engages follow, so the reply that streams in next stays in
+    // view — the whole point of stigmer-cloud#267.
+    rerender(<SignalThread items={messages(30)} signal={1} />);
+    await settled(() => {
+      expect(isPinnedToBottom(scroller())).toBe(true);
+      expect(latest.isFollowing).toBe(true);
+    });
+
+    // And subsequent growth (the streamed reply) keeps following.
+    rerender(<SignalThread items={messages(31)} signal={1} />);
+    await settled(() => expect(isPinnedToBottom(scroller())).toBe(true));
+  });
+
+  it("never pins on mount, on an unchanged signal, or on the undefined→number transition (opt-out and prop-appearing are not sends)", async () => {
+    // Mount without a signal: no pin beyond the hook's own first-fill.
+    const { rerender } = render(<SignalThread items={[]} signal={undefined} />);
+    rerender(<SignalThread items={messages(30)} signal={undefined} />);
+    await settled(() => {
+      expect(isPinnedToBottom(scroller())).toBe(true);
+      expect(latest.isFollowing).toBe(true);
+    });
+
+    scroller().scrollTop = 0;
+    await settled(() => expect(latest.isFollowing).toBe(false));
+
+    // undefined → number (the surface flips scrollOnSend back on, or the
+    // prop gets wired late): a prop appearing is not a send.
+    rerender(<SignalThread items={messages(30)} signal={3} />);
+    // Unchanged signal on a later render: also not a send.
+    rerender(<SignalThread items={messages(30)} signal={3} />);
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    expect(scroller().scrollTop).toBe(0);
+    expect(latest.isFollowing).toBe(false);
+  });
+});

package/src/internal/__tests__/useAutoScroll.test.tsx

@@ -121,13 +121,20 @@ afterEach(() => {
  * observation-time geometry and can be delivered after the reader has
  * scrolled again (the stale-payload race pinned in the browser suite) —
  * so the entry list itself is deliberately empty here.
+ *
+ * The far-from-bottom position is 100, not 0, and that is load-bearing:
+ * the hook disengages only when the READER moved (scrollTop differs from
+ * the hook's own last write — the growth-vs-reader discriminator,
+ * stigmer-cloud#267), and in this harness the mount write landed at 0
+ * (happy-dom scrollHeight is 0 at mount). A real reader's scroll-up always
+ * moves scrollTop off the pin position; 100 simulates exactly that.
  */
 function fireIO(nearBottom: boolean) {
   const scroller = screen.getByTestId("scroller");
   Object.defineProperty(scroller, "scrollHeight", { value: 1000, configurable: true });
   Object.defineProperty(scroller, "clientHeight", { value: 200, configurable: true });
   // Within the 80px near-bottom margin, or far above it.
-  scroller.scrollTop = nearBottom ? 800 : 0;
+  scroller.scrollTop = nearBottom ? 800 : 100;
   act(() => {
     ioCallback([], {} as IntersectionObserver);
   });
@@ -212,6 +219,39 @@ describe("useAutoScroll", () => {
     expect(latestResult.isFollowing).toBe(true);
   });
 
+  it("holds follow when a not-visible delivery measures growth under the hook's own pin — only the READER may disengage (stigmer-cloud#267)", () => {
+    render(<Harness />);
+    const scroller = screen.getByTestId("scroller");
+    Object.defineProperty(scroller, "clientHeight", { value: 200, configurable: true });
+
+    // The hook pins: jumpToLatest writes scrollTop = scrollHeight and
+    // records the write.
+    Object.defineProperty(scroller, "scrollHeight", { value: 1000, configurable: true });
+    act(() => {
+      latestResult.jumpToLatest();
+    });
+    expect(scroller.scrollTop).toBe(1000);
+
+    // Content grows UNDER the pin before the RO write runs; a queued IO
+    // delivery measures the post-growth geometry: far from the bottom,
+    // yet scrollTop still sits exactly on the hook's own write — the
+    // reader never moved. Disengaging here would make the imminent RO
+    // callback drop its write and strand the thread (the deadlock the
+    // browser suite reproduced ~1-in-5 before the discriminator).
+    Object.defineProperty(scroller, "scrollHeight", { value: 2000, configurable: true });
+    act(() => {
+      ioCallback([], {} as IntersectionObserver);
+    });
+    expect(latestResult.isFollowing).toBe(true);
+
+    // The READER escapes (scrollTop moves off the pin): disengage holds.
+    scroller.scrollTop = 500;
+    act(() => {
+      ioCallback([], {} as IntersectionObserver);
+    });
+    expect(latestResult.isFollowing).toBe(false);
+  });
+
   it("jumpToLatest re-engages follow mode", () => {
     render(<Harness />);
     fireIO(false);

package/src/internal/useAutoScroll.ts

@@ -69,6 +69,13 @@ export function useAutoScroll(): UseAutoScrollReturn {
   const [isFollowing, setIsFollowing] = useState(true);
   const isFollowingRef = useRef(true);
   const rafIdRef = useRef(0);
+  // The last scrollTop THIS HOOK wrote (mount pin, rAF growth writes,
+  // jumpToLatest). The reader-vs-growth discriminator for the observer
+  // callbacks: content growth never moves scrollTop — only the reader
+  // does — so "not near bottom" while scrollTop still sits exactly on the
+  // system's own last write means content grew under a pin, not that the
+  // reader escaped.
+  const lastSystemScrollTopRef = useRef<number | null>(null);
 
   // Keep ref in sync with state so observer callbacks read the latest
   // value without re-subscribing on every state change.
@@ -85,6 +92,7 @@ export function useAutoScroll(): UseAutoScrollReturn {
     // Establish initial position at the bottom so the first IO
     // callback sees the sentinel as intersecting.
     scroller.scrollTop = scroller.scrollHeight;
+    lastSystemScrollTopRef.current = scroller.scrollTop;
 
     const io = new IntersectionObserver(
       () => {
@@ -101,6 +109,18 @@ export function useAutoScroll(): UseAutoScrollReturn {
         const visible =
           el.scrollHeight - el.scrollTop - el.clientHeight <=
           NEAR_BOTTOM_MARGIN_PX;
+        // The growth-vs-reader discriminator (the write-time guard's
+        // mirror, found via the stigmer-cloud#267 pin-on-send suite): a
+        // delivery can measure geometry where content ALREADY grew below
+        // a system pin but the pin's ResizeObserver write has not run
+        // yet. Measured live that reads "not visible" — yet the reader
+        // never moved (scrollTop still sits exactly on the system's own
+        // last write). Disengaging here would make the imminent RO
+        // callback drop its write and strand the thread one row shy of
+        // the bottom with follow off. Only the READER may disengage.
+        if (!visible && el.scrollTop === lastSystemScrollTopRef.current) {
+          return;
+        }
         isFollowingRef.current = visible;
         setIsFollowing(visible);
       },
@@ -147,6 +167,7 @@ export function useAutoScroll(): UseAutoScrollReturn {
         if (!el) return;
         if (scheduledAt !== null && el.scrollTop !== scheduledAt) return;
         el.scrollTop = el.scrollHeight;
+        lastSystemScrollTopRef.current = el.scrollTop;
       });
     });
     ro.observe(node);
@@ -157,6 +178,7 @@ export function useAutoScroll(): UseAutoScrollReturn {
     const el = scrollRef.current;
     if (!el) return;
     el.scrollTop = el.scrollHeight;
+    lastSystemScrollTopRef.current = el.scrollTop;
     // Eagerly set following — IO callback will confirm when the
     // sentinel becomes visible after the scroll.
     isFollowingRef.current = true;
@@ -165,3 +187,35 @@ export function useAutoScroll(): UseAutoScrollReturn {
 
   return { scrollRef, sentinelRef, contentRef, isFollowing, jumpToLatest };
 }
+
+/**
+ * Pins the thread to its latest content whenever `signal` changes — the
+ * scroll-on-send idiom (stigmer-cloud#267): each surface increments a
+ * monotonic counter at its own "the reader sent something" moment (an
+ * optimistic message appearing, a conversation reply dispatched, a HITL
+ * decision submitted), and the pin re-engages follow mode so the resulting
+ * content lands in view even for a reader who had deliberately scrolled up.
+ * WhatsApp convention: showing the result of the reader's OWN action is
+ * Nielsen #1 system-status feedback — distinct from INCOMING content, which
+ * must never move a scrolled-up reader (the F-09 posture, unchanged).
+ *
+ * <p>No pin fires on mount, on an `undefined` signal (surface opted out or
+ * prop not wired), or on the `undefined`→number transition (a prop
+ * appearing is not a send).
+ *
+ * @internal Not part of the public API.
+ */
+export function usePinToLatestOnSignal(
+  signal: number | undefined,
+  pinToLatest: () => void,
+): void {
+  const previousRef = useRef(signal);
+  useEffect(() => {
+    const previous = previousRef.current;
+    previousRef.current = signal;
+    if (signal === undefined || previous === undefined || signal === previous) {
+      return;
+    }
+    pinToLatest();
+  }, [signal, pinToLatest]);
+}

package/src/memory/MemoryProposalCard.tsx

@@ -0,0 +1,181 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { cn } from "@stigmer/theme";
+import { getUserMessage } from "@stigmer/sdk";
+import type { Memory } from "@stigmer/protos/ai/stigmer/agentic/memory/v1/api_pb";
+import { MemoryLifecycleState } from "@stigmer/protos/ai/stigmer/agentic/memory/v1/enum_pb";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
+import { formatMemoryProvenance } from "./memoryGroups.js";
+import { useConfirmMemory } from "./useConfirmMemory.js";
+import { useMemory } from "./useMemory.js";
+import { useRejectMemory } from "./useRejectMemory.js";
+
+/** Props for {@link MemoryProposalCardBody}. */
+export interface MemoryProposalCardBodyProps {
+  /** The proposed memory's resource id (from the remember tool's answer). */
+  readonly memoryId: string;
+  /**
+   * The proposed fact as frozen in the tool result — shown VERBATIM
+   * (DD-005 D6: what you confirm is what future prompts inject, byte for
+   * byte). The live record's text supersedes it once fetched, so an edit
+   * made on the memory page is reflected here too.
+   */
+  readonly fact: string;
+  /** Additional CSS class names for the root container. */
+  readonly className?: string;
+}
+
+/**
+ * The in-session consent surface for a memory proposal (DD-005 D4): the
+ * body of a `remember` tool call's row in the message thread, rendering
+ * the proposed fact verbatim with one-click Confirm / Reject actions.
+ *
+ * Lifecycle honesty across surfaces and reloads: the tool result this
+ * renders from is FROZEN at capture time, so the card fetches the
+ * record's current state ({@link useMemory}) — a proposal decided from
+ * the memory settings page (or another device) shows its decided state
+ * here instead of stale action buttons, and a deleted record reads
+ * "no longer stored" rather than failing. Rejection is one click, no
+ * confirmation dialog (the T04 Cursor lesson: expensive review teaches
+ * users to ignore the queue); deletion-with-confirmation lives on the
+ * memory page, the catch-up surface.
+ *
+ * Borderless by design (the {@link ApprovalCardBody} posture): the tool
+ * row's card owns the chrome, this component owns only the body. All
+ * visual properties flow through `--stgm-*` design tokens.
+ */
+export function MemoryProposalCardBody({
+  memoryId,
+  fact,
+  className,
+}: MemoryProposalCardBodyProps) {
+  const { memory, isLoading, notFound, error: fetchError } = useMemory(memoryId);
+  const { confirmMemory, isConfirming, error: confirmError } = useConfirmMemory();
+  const { rejectMemory, isRejecting, error: rejectError } = useRejectMemory();
+
+  // The card's own decision lands here so the settled state renders
+  // immediately — the fetch stays the authority for every OTHER writer
+  // (the memory page, another device), read once on mount.
+  const [decided, setDecided] = useState<Memory | null>(null);
+
+  const act = useCallback(
+    async (action: (id: string) => Promise<Memory>) => {
+      try {
+        setDecided(await action(memoryId));
+      } catch {
+        // Error state is surfaced via the hooks.
+      }
+    },
+    [memoryId],
+  );
+
+  const record = decided ?? memory;
+  const state = record?.status?.lifecycleState;
+  // The live record's text supersedes the frozen tool result (the subject
+  // may have edited the fact on the memory page before deciding).
+  const displayFact = record?.spec?.content || fact;
+  const provenance = record ? formatMemoryProvenance(record) : null;
+  const actionError = confirmError ?? rejectError;
+  const isBusy = isConfirming || isRejecting;
+
+  const showActions =
+    !notFound &&
+    fetchError == null &&
+    (state === undefined ||
+      state === MemoryLifecycleState.lifecycle_state_unspecified ||
+      state === MemoryLifecycleState.lifecycle_state_proposed);
+
+  return (
+    <div className={cn("stg:space-y-2", className)} data-cursor-target="memory-proposal">
+      <p className="stg:text-sm stg:text-foreground stg:whitespace-pre-wrap">
+        {displayFact}
+      </p>
+
+      <p className="stg:text-xs stg:text-muted-foreground">
+        {provenance ? `${provenance} · ` : ""}
+        Proposed to remember — nothing is stored in your sessions until you
+        confirm it.
+      </p>
+
+      {notFound ? (
+        <p className="stg:text-xs stg:text-muted-foreground" role="status">
+          No longer stored.
+        </p>
+      ) : fetchError ? (
+        // The fact stays visible (it is frozen in the tool result); only
+        // the actionable state is unavailable. Decide from the memory
+        // page instead — the catch-up surface.
+        <p className="stg:text-xs stg:text-muted-foreground" role="status">
+          Couldn&apos;t load this proposal&apos;s current state — review it in
+          Settings → Memory.
+        </p>
+      ) : showActions ? (
+        <div className="stg:flex stg:items-center stg:gap-1.5">
+          <ChipButton
+            label={`Confirm memory: ${displayFact}`}
+            onClick={() => void act(confirmMemory)}
+            disabled={isBusy || isLoading}
+            emphasis="primary"
+          >
+            {isConfirming && <SpinnerIcon size={12} />}
+            Confirm
+          </ChipButton>
+          <ChipButton
+            label={`Reject memory: ${displayFact}`}
+            onClick={() => void act(rejectMemory)}
+            disabled={isBusy || isLoading}
+          >
+            {isRejecting && <SpinnerIcon size={12} />}
+            Reject
+          </ChipButton>
+        </div>
+      ) : (
+        <p className="stg:text-xs stg:text-muted-foreground" role="status">
+          {state === MemoryLifecycleState.lifecycle_state_confirmed
+            ? "Confirmed — recalled in your future sessions."
+            : "Rejected — not stored."}
+        </p>
+      )}
+
+      {actionError && (
+        <p className="stg:text-[0.65rem] stg:text-destructive" role="alert">
+          {getUserMessage(actionError)}
+        </p>
+      )}
+    </div>
+  );
+}
+
+function ChipButton({
+  label,
+  onClick,
+  disabled,
+  emphasis,
+  children,
+}: {
+  readonly label: string;
+  readonly onClick: () => void;
+  readonly disabled?: boolean;
+  readonly emphasis?: "primary";
+  readonly children: React.ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      onClick={onClick}
+      disabled={disabled}
+      className={cn(
+        "stg:inline-flex stg:items-center stg:gap-1 stg:rounded-md stg:px-2.5 stg:py-1 stg:text-xs stg:font-medium",
+        emphasis === "primary"
+          ? "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary-hover"
+          : "stg:border stg:border-input stg:bg-background stg:text-foreground stg:hover:bg-accent stg:hover:text-accent-foreground",
+        "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+        "stg:disabled:pointer-events-none stg:disabled:opacity-50",
+      )}
+    >
+      {children}
+    </button>
+  );
+}