@stigmer/react 3.12.6 → 3.12.8

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>
+  );
+}

package/src/memory/__tests__/MemoryListPanel.test.tsx

@@ -0,0 +1,259 @@
+import { describe, it, expect, vi, afterEach, beforeEach } from "vitest";
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type { ReactNode } from "react";
+import { create } from "@bufbuild/protobuf";
+import { MemorySchema, 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 { MemoryListSchema } from "@stigmer/protos/ai/stigmer/agentic/memory/v1/io_pb";
+import { StigmerContext } from "../../context";
+import { FetchCacheContext } from "../../internal/FetchCacheProvider";
+import { MemoryListPanel } from "../MemoryListPanel";
+
+function Providers({
+  client,
+  children,
+}: {
+  client: unknown;
+  children: ReactNode;
+}) {
+  return (
+    <FetchCacheContext.Provider value={null}>
+      <StigmerContext.Provider value={client as never}>
+        {children}
+      </StigmerContext.Provider>
+    </FetchCacheContext.Provider>
+  );
+}
+
+function makeMemory(
+  id: string,
+  state: MemoryLifecycleState,
+  content: string,
+  provenance?: { agentId: string; sessionId: string },
+): Memory {
+  return create(MemorySchema, {
+    apiVersion: "agentic.stigmer.ai/v1",
+    kind: "Memory",
+    metadata: { id, name: id, slug: id, org: "test-org" },
+    spec: { content, provenance },
+    status: { lifecycleState: state },
+  });
+}
+
+const PROPOSED = makeMemory(
+  "mem_proposed",
+  MemoryLifecycleState.lifecycle_state_proposed,
+  "Prefers terse answers.",
+  { agentId: "agt_1", sessionId: "ses_1" },
+);
+const CONFIRMED = makeMemory(
+  "mem_confirmed",
+  MemoryLifecycleState.lifecycle_state_confirmed,
+  "Deploys to us-east-1.",
+);
+const REJECTED = makeMemory(
+  "mem_rejected",
+  MemoryLifecycleState.lifecycle_state_rejected,
+  "Not actually true.",
+);
+
+function makeClient(memories: Memory[] = [PROPOSED, CONFIRMED, REJECTED]) {
+  return {
+    memory: {
+      list: vi
+        .fn()
+        .mockResolvedValue(
+          create(MemoryListSchema, { totalCount: memories.length, items: memories }),
+        ),
+      confirm: vi.fn().mockResolvedValue(CONFIRMED),
+      reject: vi.fn().mockResolvedValue(REJECTED),
+      delete: vi.fn().mockResolvedValue(PROPOSED),
+      update: vi.fn().mockResolvedValue(CONFIRMED),
+    },
+  };
+}
+
+beforeEach(() => vi.clearAllMocks());
+afterEach(cleanup);
+
+describe("MemoryListPanel", () => {
+  it("groups pending proposals first, then remembered, then rejected", async () => {
+    const client = makeClient();
+    render(
+      <Providers client={client}>
+        <MemoryListPanel org="test-org" />
+      </Providers>,
+    );
+
+    await waitFor(() =>
+      expect(screen.getByText("Prefers terse answers.")).toBeTruthy(),
+    );
+
+    const headings = screen.getAllByRole("heading", { level: 3 });
+    expect(headings.map((h) => h.textContent)).toEqual([
+      "Pending proposals",
+      "Remembered",
+      "Rejected",
+    ]);
+  });
+
+  it("shows the stored text verbatim with its provenance", async () => {
+    const client = makeClient([PROPOSED]);
+    render(
+      <Providers client={client}>
+        <MemoryListPanel org="test-org" />
+      </Providers>,
+    );
+
+    // The review surface never paraphrases: what is confirmed is what
+    // future prompts inject, byte for byte (DD-005 D6).
+    await waitFor(() =>
+      expect(screen.getByText("Prefers terse answers.")).toBeTruthy(),
+    );
+    expect(
+      screen.getByText(/Proposed by agent agt_1 in session ses_1/),
+    ).toBeTruthy();
+  });
+
+  it("confirms a proposal and refetches", async () => {
+    const client = makeClient([PROPOSED]);
+    const user = userEvent.setup();
+    render(
+      <Providers client={client}>
+        <MemoryListPanel org="test-org" />
+      </Providers>,
+    );
+
+    await waitFor(() =>
+      expect(screen.getByText("Prefers terse answers.")).toBeTruthy(),
+    );
+    await user.click(
+      screen.getByRole("button", { name: /Confirm memory: Prefers terse answers./ }),
+    );
+
+    await waitFor(() => expect(client.memory.confirm).toHaveBeenCalledWith("mem_proposed"));
+    await waitFor(() => expect(client.memory.list).toHaveBeenCalledTimes(2));
+  });
+
+  it("rejects with a single click — no confirmation dialog", async () => {
+    const client = makeClient([PROPOSED]);
+    const user = userEvent.setup();
+    render(
+      <Providers client={client}>
+        <MemoryListPanel org="test-org" />
+      </Providers>,
+    );
+
+    await waitFor(() =>
+      expect(screen.getByText("Prefers terse answers.")).toBeTruthy(),
+    );
+    await user.click(
+      screen.getByRole("button", { name: /Reject memory: Prefers terse answers./ }),
+    );
+
+    // One click, straight to the RPC (DD-005 D4): expensive review
+    // teaches users to ignore the queue.
+    await waitFor(() => expect(client.memory.reject).toHaveBeenCalledWith("mem_proposed"));
+  });
+
+  it("requires inline confirmation before deleting", async () => {
+    const client = makeClient([CONFIRMED]);
+    const user = userEvent.setup();
+    render(
+      <Providers client={client}>
+        <MemoryListPanel org="test-org" />
+      </Providers>,
+    );
+
+    await waitFor(() =>
+      expect(screen.getByText("Deploys to us-east-1.")).toBeTruthy(),
+    );
+    await user.click(
+      screen.getByRole("button", { name: /Delete memory: Deploys to us-east-1./ }),
+    );
+
+    // Nothing deleted yet — the row transformed into the inline confirm.
+    expect(client.memory.delete).not.toHaveBeenCalled();
+    expect(screen.getByText(/Forget this permanently\?/)).toBeTruthy();
+
+    await user.click(screen.getByRole("button", { name: "Delete" }));
+    await waitFor(() =>
+      expect(client.memory.delete).toHaveBeenCalledWith("mem_confirmed"),
+    );
+  });
+
+  it("edits a confirmed fact through the wipe-safe update mapper", async () => {
+    const client = makeClient([CONFIRMED]);
+    const user = userEvent.setup();
+    render(
+      <Providers client={client}>
+        <MemoryListPanel org="test-org" />
+      </Providers>,
+    );
+
+    await waitFor(() =>
+      expect(screen.getByText("Deploys to us-east-1.")).toBeTruthy(),
+    );
+    await user.click(
+      screen.getByRole("button", { name: /Edit memory: Deploys to us-east-1./ }),
+    );
+
+    const textarea = screen.getByRole("textbox", { name: "Edit memory text" });
+    expect((textarea as HTMLTextAreaElement).value).toBe("Deploys to us-east-1.");
+
+    await user.clear(textarea);
+    await user.type(textarea, "Deploys to eu-west-1.");
+    await user.click(screen.getByRole("button", { name: "Save memory text" }));
+
+    await waitFor(() =>
+      expect(client.memory.update).toHaveBeenCalledWith(
+        expect.objectContaining({
+          id: "mem_confirmed",
+          org: "test-org",
+          content: "Deploys to eu-west-1.",
+        }),
+      ),
+    );
+  });
+
+  it("offers no edit action on proposals — decide first, then edit", async () => {
+    const client = makeClient([PROPOSED]);
+    render(
+      <Providers client={client}>
+        <MemoryListPanel org="test-org" />
+      </Providers>,
+    );
+
+    await waitFor(() =>
+      expect(screen.getByText("Prefers terse answers.")).toBeTruthy(),
+    );
+    expect(screen.queryByRole("button", { name: /Edit memory/ })).toBeNull();
+  });
+
+  it("renders the empty state when nothing is remembered", async () => {
+    const client = makeClient([]);
+    render(
+      <Providers client={client}>
+        <MemoryListPanel org="test-org" />
+      </Providers>,
+    );
+
+    await waitFor(() =>
+      expect(screen.getByText(/Nothing remembered yet/)).toBeTruthy(),
+    );
+  });
+
+  it("surfaces list errors as an alert", async () => {
+    const client = {
+      memory: { list: vi.fn().mockRejectedValue(new Error("boom")) },
+    };
+    render(
+      <Providers client={client}>
+        <MemoryListPanel org="test-org" />
+      </Providers>,
+    );
+
+    await waitFor(() => expect(screen.getByRole("alert")).toBeTruthy());
+  });
+});

package/src/memory/__tests__/MemoryProposalCard.test.tsx

@@ -0,0 +1,236 @@
+// The in-session consent surface (DD-005 D4): verbatim fact, one-click
+// Confirm/Reject, and lifecycle honesty — the frozen tool result never
+// shows stale action buttons over a record that was already decided,
+// deleted, or unreachable.
+
+import { describe, it, expect, vi, afterEach, beforeEach } from "vitest";
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type { ReactNode } from "react";
+import { create } from "@bufbuild/protobuf";
+import { MemorySchema, 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 { StigmerError } from "@stigmer/sdk";
+import { StigmerContext } from "../../context";
+import { FetchCacheContext } from "../../internal/FetchCacheProvider";
+import { MemoryProposalCardBody } from "../MemoryProposalCard";
+
+function wrapper(client: unknown) {
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return (
+      <FetchCacheContext.Provider value={null}>
+        <StigmerContext.Provider value={client as never}>
+          {children}
+        </StigmerContext.Provider>
+      </FetchCacheContext.Provider>
+    );
+  };
+}
+
+const FACT = "Prefers concise answers with code examples.";
+
+function makeMemory(state: MemoryLifecycleState, content = FACT): Memory {
+  return create(MemorySchema, {
+    apiVersion: "agentic.stigmer.ai/v1",
+    kind: "Memory",
+    metadata: { id: "mem_1", name: "mem_1", slug: "mem-1", org: "test-org" },
+    spec: {
+      content,
+      provenance: { agentId: "agt_1", sessionId: "ses_1" },
+    },
+    status: { lifecycleState: state },
+  });
+}
+
+function renderCard(client: unknown) {
+  return render(<MemoryProposalCardBody memoryId="mem_1" fact={FACT} />, {
+    wrapper: wrapper(client),
+  });
+}
+
+/** Waits for the record fetch to settle and the named action to arm. */
+async function waitForAction(name: string): Promise<HTMLElement> {
+  let button: HTMLElement | null = null;
+  await waitFor(() => {
+    button = screen.getByRole("button", { name });
+    expect(button.hasAttribute("disabled")).toBe(false);
+  });
+  return button!;
+}
+
+beforeEach(() => vi.clearAllMocks());
+afterEach(cleanup);
+
+describe("MemoryProposalCardBody", () => {
+  it("renders the verbatim fact with Confirm/Reject while the record is proposed", async () => {
+    const client = {
+      memory: {
+        get: vi.fn().mockResolvedValue(
+          makeMemory(MemoryLifecycleState.lifecycle_state_proposed),
+        ),
+      },
+    };
+
+    renderCard(client);
+
+    // The exact stored text — never paraphrased (DD-005 D6).
+    expect(screen.getByText(FACT)).toBeTruthy();
+    await waitForAction(`Confirm memory: ${FACT}`);
+    expect(screen.getByRole("button", { name: `Reject memory: ${FACT}` })).toBeTruthy();
+    // Provenance renders beside the fact (DD-005 D6: origin builds trust).
+    expect(screen.getByText(/Proposed by agent agt_1/)).toBeTruthy();
+  });
+
+  it("confirms in one click and settles into the confirmed state line", async () => {
+    const confirm = vi
+      .fn()
+      .mockResolvedValue(makeMemory(MemoryLifecycleState.lifecycle_state_confirmed));
+    const client = {
+      memory: {
+        get: vi.fn().mockResolvedValue(
+          makeMemory(MemoryLifecycleState.lifecycle_state_proposed),
+        ),
+        confirm,
+      },
+    };
+
+    renderCard(client);
+    const user = userEvent.setup();
+    const confirmButton = await waitForAction(`Confirm memory: ${FACT}`);
+
+    await user.click(confirmButton);
+
+    expect(confirm).toHaveBeenCalledWith("mem_1");
+    await waitFor(() =>
+      expect(
+        screen.getByText("Confirmed — recalled in your future sessions."),
+      ).toBeTruthy(),
+    );
+    expect(screen.queryByRole("button")).toBeNull();
+  });
+
+  it("rejects in ONE click — no confirmation dialog (the T04 Cursor lesson)", async () => {
+    const reject = vi
+      .fn()
+      .mockResolvedValue(makeMemory(MemoryLifecycleState.lifecycle_state_rejected));
+    const client = {
+      memory: {
+        get: vi.fn().mockResolvedValue(
+          makeMemory(MemoryLifecycleState.lifecycle_state_proposed),
+        ),
+        reject,
+      },
+    };
+
+    renderCard(client);
+    const user = userEvent.setup();
+    const rejectButton = await waitForAction(`Reject memory: ${FACT}`);
+
+    await user.click(rejectButton);
+
+    expect(reject).toHaveBeenCalledWith("mem_1");
+    await waitFor(() =>
+      expect(screen.getByText("Rejected — not stored.")).toBeTruthy(),
+    );
+  });
+
+  it("shows the decided state instead of stale actions when another surface decided it", async () => {
+    // The tool result is frozen; the record was confirmed from the
+    // memory page (or another device) — the reloaded chip must say so.
+    const client = {
+      memory: {
+        get: vi.fn().mockResolvedValue(
+          makeMemory(MemoryLifecycleState.lifecycle_state_confirmed),
+        ),
+      },
+    };
+
+    renderCard(client);
+
+    await waitFor(() =>
+      expect(
+        screen.getByText("Confirmed — recalled in your future sessions."),
+      ).toBeTruthy(),
+    );
+    expect(screen.queryByRole("button")).toBeNull();
+  });
+
+  it("renders the live record's text when the fact was edited before deciding", async () => {
+    const edited = "Prefers concise answers, with Go examples.";
+    const client = {
+      memory: {
+        get: vi.fn().mockResolvedValue(
+          makeMemory(MemoryLifecycleState.lifecycle_state_proposed, edited),
+        ),
+      },
+    };
+
+    renderCard(client);
+
+    await waitFor(() => expect(screen.getByText(edited)).toBeTruthy());
+    expect(screen.queryByText(FACT)).toBeNull();
+  });
+
+  it("reads 'no longer stored' for a deleted record — a state, never an error", async () => {
+    const client = {
+      memory: {
+        get: vi
+          .fn()
+          .mockRejectedValue(new StigmerError("not-found", "memory not found", 5)),
+      },
+    };
+
+    renderCard(client);
+
+    await waitFor(() =>
+      expect(screen.getByText("No longer stored.")).toBeTruthy(),
+    );
+    expect(screen.queryByRole("button")).toBeNull();
+    expect(screen.queryByRole("alert")).toBeNull();
+  });
+
+  it("keeps the frozen fact visible when the state fetch fails, pointing at the memory page", async () => {
+    const client = {
+      memory: {
+        get: vi
+          .fn()
+          .mockRejectedValue(new StigmerError("unavailable", "server down", 14)),
+      },
+    };
+
+    renderCard(client);
+
+    await waitFor(() =>
+      expect(screen.getByText(/review it in Settings → Memory/)).toBeTruthy(),
+    );
+    // The fact is frozen in the tool result — it never disappears.
+    expect(screen.getByText(FACT)).toBeTruthy();
+    expect(screen.queryByRole("button")).toBeNull();
+  });
+
+  it("surfaces a failed decision inline and keeps the actions available", async () => {
+    const client = {
+      memory: {
+        get: vi.fn().mockResolvedValue(
+          makeMemory(MemoryLifecycleState.lifecycle_state_proposed),
+        ),
+        confirm: vi
+          .fn()
+          .mockRejectedValue(new StigmerError("unavailable", "server down", 14)),
+      },
+    };
+
+    renderCard(client);
+    const user = userEvent.setup();
+    const confirmButton = await waitForAction(`Confirm memory: ${FACT}`);
+
+    await user.click(confirmButton);
+
+    await waitFor(() => expect(screen.getByRole("alert")).toBeTruthy());
+    expect(
+      screen
+        .getByRole("button", { name: `Confirm memory: ${FACT}` })
+        .hasAttribute("disabled"),
+    ).toBe(false);
+  });
+});