From 3a5544a9e64d97e77be8ffa36e218ab8fe0c3131 Mon Sep 17 00:00:00 2001
From: Hongming Wang <hongmingwang.rabbit@users.noreply.github.com>
Date: Mon, 4 May 2026 16:18:08 -0700
Subject: [PATCH] feat(memory tab): add Edit affordance with optimistic-locking
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Memory tab supported only Add+Delete. Correcting an entry meant
deleting and re-adding, losing the row's version counter and any
concurrent-write guard the agent depends on.

Now: per-row Edit button reveals an inline editor (value textarea +
TTL). Save POSTs to the existing /memory upsert endpoint with
if_match_version pinned to the entry's current version. On 409 the
UI surfaces a retry hint and reloads.

Tests:
- 11 vitest cases covering pre-fill (JSON vs string), payload shape
  (parsed JSON, fallback to plain text, TTL inclusion/omission),
  cancel, 409 retry path, generic error path, and the no-version
  back-compat case.
- E2E gate 9c in test_staging_full_saas.sh: seed → GET version →
  conditional update → assert new value → stale-version POST must
  409. Pins the optimistic-locking contract end-to-end on staging.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 canvas/src/components/tabs/MemoryTab.tsx      | 143 ++++++++++--
 .../tabs/__tests__/MemoryTab.edit.test.tsx    | 220 ++++++++++++++++++
 tests/e2e/test_staging_full_saas.sh           |  47 +++-
 3 files changed, 395 insertions(+), 15 deletions(-)
 create mode 100644 canvas/src/components/tabs/__tests__/MemoryTab.edit.test.tsx

diff --git a/canvas/src/components/tabs/MemoryTab.tsx b/canvas/src/components/tabs/MemoryTab.tsx
index 2c5055f7..4243786f 100644
--- a/canvas/src/components/tabs/MemoryTab.tsx
+++ b/canvas/src/components/tabs/MemoryTab.tsx
@@ -10,6 +10,7 @@ interface Props {
 interface MemoryEntry {
   key: string;
   value: unknown;
+  version?: number;
   expires_at: string | null;
   updated_at: string;
 }
@@ -28,6 +29,10 @@ export function MemoryTab({ workspaceId }: Props) {
   const [newValue, setNewValue] = useState("");
   const [newTTL, setNewTTL] = useState("");
   const [error, setError] = useState<string | null>(null);
+  const [editingKey, setEditingKey] = useState<string | null>(null);
+  const [editValue, setEditValue] = useState("");
+  const [editTTL, setEditTTL] = useState("");
+  const [editError, setEditError] = useState<string | null>(null);
 
   const awarenessUrl = useMemo(() => {
     try {
@@ -109,6 +114,69 @@ export function MemoryTab({ workspaceId }: Props) {
     }
   };
 
+  const beginEdit = (entry: MemoryEntry) => {
+    setEditError(null);
+    setEditingKey(entry.key);
+    // Stringify objects/arrays as pretty JSON; render plain strings raw so the
+    // editor doesn't surprise users with surrounding quotes.
+    setEditValue(
+      typeof entry.value === "string"
+        ? entry.value
+        : JSON.stringify(entry.value, null, 2),
+    );
+    if (entry.expires_at) {
+      const remainingMs = new Date(entry.expires_at).getTime() - Date.now();
+      const ttl = Math.max(0, Math.floor(remainingMs / 1000));
+      setEditTTL(ttl > 0 ? String(ttl) : "");
+    } else {
+      setEditTTL("");
+    }
+  };
+
+  const cancelEdit = () => {
+    setEditingKey(null);
+    setEditValue("");
+    setEditTTL("");
+    setEditError(null);
+  };
+
+  const handleEditSave = async (entry: MemoryEntry) => {
+    setEditError(null);
+
+    let parsedValue: unknown;
+    try {
+      parsedValue = JSON.parse(editValue);
+    } catch {
+      parsedValue = editValue;
+    }
+
+    // if_match_version closes the silent-overwrite hole when two writers
+    // race. The handler returns 409 with the current version on mismatch
+    // — surface that as a retry hint and reload to pick up the new state.
+    const body: Record<string, unknown> = { key: entry.key, value: parsedValue };
+    if (typeof entry.version === "number") {
+      body.if_match_version = entry.version;
+    }
+    if (editTTL) {
+      const ttl = parseInt(editTTL);
+      if (!Number.isNaN(ttl) && ttl > 0) body.ttl_seconds = ttl;
+    }
+
+    try {
+      await api.post(`/workspaces/${workspaceId}/memory`, body);
+      cancelEdit();
+      loadMemory();
+    } catch (e) {
+      const message = e instanceof Error ? e.message : "Failed to save";
+      if (message.includes("409") || /if_match_version mismatch/i.test(message)) {
+        setEditError("This entry changed since you opened it. Reloading.");
+        loadMemory();
+      } else {
+        setEditError(message);
+      }
+    }
+  };
+
   const openAwareness = () => {
     window.open(awarenessUrl, "_blank", "noopener,noreferrer");
   };
@@ -308,24 +376,71 @@ export function MemoryTab({ workspaceId }: Props) {
 
                   {expanded === entry.key && (
                     <div className="px-3 pb-2 space-y-2">
-                      <pre className="text-[10px] text-ink-mid bg-surface-sunken rounded p-2 overflow-x-auto max-h-40">
-                        {JSON.stringify(entry.value, null, 2)}
-                      </pre>
+                      {editingKey === entry.key ? (
+                        <div className="space-y-2">
+                          <textarea
+                            value={editValue}
+                            onChange={(e) => setEditValue(e.target.value)}
+                            rows={4}
+                            aria-label={`Edit value for ${entry.key}`}
+                            className="w-full bg-surface-sunken border border-line rounded px-2 py-1 text-xs font-mono text-ink focus:outline-none focus:border-accent resize-none"
+                          />
+                          <input
+                            value={editTTL}
+                            onChange={(e) => setEditTTL(e.target.value)}
+                            placeholder="TTL in seconds (blank = no expiry)"
+                            aria-label={`Edit TTL for ${entry.key}`}
+                            className="w-full bg-surface-sunken border border-line rounded px-2 py-1 text-xs text-ink focus:outline-none focus:border-accent"
+                          />
+                          {editError && (
+                            <div role="alert" className="text-[10px] text-bad">
+                              {editError}
+                            </div>
+                          )}
+                          <div className="flex gap-2">
+                            <button
+                              type="button"
+                              onClick={() => handleEditSave(entry)}
+                              className="px-3 py-1 bg-accent hover:bg-accent-strong text-xs rounded text-white"
+                            >
+                              Save
+                            </button>
+                            <button
+                              type="button"
+                              onClick={cancelEdit}
+                              className="px-3 py-1 bg-surface-card hover:bg-surface-elevated text-xs rounded text-ink-mid"
+                            >
+                              Cancel
+                            </button>
+                          </div>
+                        </div>
+                      ) : (
+                        <pre className="text-[10px] text-ink-mid bg-surface-sunken rounded p-2 overflow-x-auto max-h-40">
+                          {JSON.stringify(entry.value, null, 2)}
+                        </pre>
+                      )}
                       <div className="flex items-center justify-between">
                         <span className="text-[9px] text-ink-soft">
                           Updated: {new Date(entry.updated_at).toLocaleString()}
                         </span>
-                        <button
-                          type="button"
-                          onClick={() => handleDelete(entry.key)}
-                          // hover:text-bad on top of text-bad was a no-op.
-                          // Switch to a hover bg + focus-visible ring so
-                          // the destructive button visibly responds and
-                          // keyboard users see focus.
-                          className="text-[10px] text-bad hover:bg-red-950/40 rounded px-1 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500/60"
-                        >
-                          Delete
-                        </button>
+                        <div className="flex items-center gap-2">
+                          {editingKey !== entry.key && (
+                            <button
+                              type="button"
+                              onClick={() => beginEdit(entry)}
+                              className="text-[10px] text-ink-mid hover:bg-surface-elevated rounded px-1 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/60"
+                            >
+                              Edit
+                            </button>
+                          )}
+                          <button
+                            type="button"
+                            onClick={() => handleDelete(entry.key)}
+                            className="text-[10px] text-bad hover:bg-red-950/40 rounded px-1 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500/60"
+                          >
+                            Delete
+                          </button>
+                        </div>
                       </div>
                     </div>
                   )}
diff --git a/canvas/src/components/tabs/__tests__/MemoryTab.edit.test.tsx b/canvas/src/components/tabs/__tests__/MemoryTab.edit.test.tsx
new file mode 100644
index 00000000..d20d8f28
--- /dev/null
+++ b/canvas/src/components/tabs/__tests__/MemoryTab.edit.test.tsx
@@ -0,0 +1,220 @@
+// @vitest-environment jsdom
+//
+// Pins the Edit affordance added to MemoryTab. Until this PR the Memory tab
+// was Add+Delete only; an entry that needed correction had to be deleted and
+// re-added — losing the version-counter and any in-flight optimistic-locking
+// invariants other writers depend on.
+//
+// Each test pins one branch of the new flow. If any fails, the bug is back.
+
+import { describe, it, expect, vi, afterEach, beforeEach } from "vitest";
+import { render, screen, cleanup, waitFor, fireEvent } from "@testing-library/react";
+import React from "react";
+
+afterEach(cleanup);
+
+const apiGet = vi.fn();
+const apiPost = vi.fn();
+const apiDel = vi.fn();
+vi.mock("@/lib/api", () => ({
+  api: {
+    get: (path: string) => apiGet(path),
+    post: (path: string, body: unknown) => apiPost(path, body),
+    del: (path: string) => apiDel(path),
+    patch: vi.fn(),
+    put: vi.fn(),
+  },
+}));
+
+import { MemoryTab } from "../MemoryTab";
+
+const sampleEntries = [
+  {
+    key: "team_brief",
+    value: { goal: "ship v2" },
+    version: 3,
+    expires_at: null,
+    updated_at: "2026-05-04T10:00:00Z",
+  },
+  {
+    key: "plain_note",
+    value: "raw text note",
+    version: 1,
+    expires_at: "2099-01-01T00:00:00Z",
+    updated_at: "2026-05-04T10:01:00Z",
+  },
+];
+
+beforeEach(() => {
+  apiGet.mockReset();
+  apiPost.mockReset();
+  apiDel.mockReset();
+  apiGet.mockImplementation((path: string) => {
+    if (path === "/workspaces/ws-test/memory") {
+      return Promise.resolve(sampleEntries);
+    }
+    return Promise.reject(new Error(`unmocked api.get: ${path}`));
+  });
+});
+
+async function renderAndExpand(key: string) {
+  render(<MemoryTab workspaceId="ws-test" />);
+  await waitFor(() => expect(apiGet).toHaveBeenCalled());
+  // Reveal the Advanced section that hosts the entry list.
+  const showAdvanced = await screen.findByRole("button", { name: "Show" });
+  fireEvent.click(showAdvanced);
+  // Expand the row.
+  const row = await screen.findByRole("button", { name: new RegExp(key) });
+  fireEvent.click(row);
+}
+
+describe("MemoryTab Edit affordance", () => {
+  it("Edit button appears once a row is expanded", async () => {
+    await renderAndExpand("team_brief");
+    expect(screen.getAllByRole("button", { name: "Edit" }).length).toBeGreaterThan(0);
+  });
+
+  it("clicking Edit on a JSON-valued entry pre-fills the textarea with pretty JSON", async () => {
+    await renderAndExpand("team_brief");
+    fireEvent.click(screen.getAllByRole("button", { name: "Edit" })[0]);
+    const textarea = (await screen.findByLabelText(
+      "Edit value for team_brief",
+    )) as HTMLTextAreaElement;
+    expect(textarea.value).toBe('{\n  "goal": "ship v2"\n}');
+  });
+
+  it("clicking Edit on a string-valued entry pre-fills raw (no surrounding quotes)", async () => {
+    await renderAndExpand("plain_note");
+    fireEvent.click(screen.getAllByRole("button", { name: "Edit" })[0]);
+    const textarea = (await screen.findByLabelText(
+      "Edit value for plain_note",
+    )) as HTMLTextAreaElement;
+    expect(textarea.value).toBe("raw text note");
+  });
+
+  it("Save POSTs with if_match_version + parsed value, then reloads", async () => {
+    apiPost.mockResolvedValue({ status: "ok", key: "team_brief", version: 4 });
+    await renderAndExpand("team_brief");
+    fireEvent.click(screen.getAllByRole("button", { name: "Edit" })[0]);
+    const textarea = await screen.findByLabelText("Edit value for team_brief");
+    fireEvent.change(textarea, { target: { value: '{"goal":"ship v3"}' } });
+    fireEvent.click(screen.getByRole("button", { name: "Save" }));
+
+    await waitFor(() => expect(apiPost).toHaveBeenCalledTimes(1));
+    expect(apiPost).toHaveBeenCalledWith("/workspaces/ws-test/memory", {
+      key: "team_brief",
+      value: { goal: "ship v3" },
+      if_match_version: 3,
+    });
+    // Reload after save → second GET.
+    await waitFor(() => expect(apiGet).toHaveBeenCalledTimes(2));
+  });
+
+  it("Save with non-JSON text falls back to plain string", async () => {
+    apiPost.mockResolvedValue({ status: "ok" });
+    await renderAndExpand("team_brief");
+    fireEvent.click(screen.getAllByRole("button", { name: "Edit" })[0]);
+    const textarea = await screen.findByLabelText("Edit value for team_brief");
+    fireEvent.change(textarea, { target: { value: "free-form note" } });
+    fireEvent.click(screen.getByRole("button", { name: "Save" }));
+
+    await waitFor(() => expect(apiPost).toHaveBeenCalledTimes(1));
+    expect(apiPost.mock.calls[0][1].value).toBe("free-form note");
+  });
+
+  it("TTL field is forwarded as ttl_seconds when set", async () => {
+    apiPost.mockResolvedValue({ status: "ok" });
+    await renderAndExpand("team_brief");
+    fireEvent.click(screen.getAllByRole("button", { name: "Edit" })[0]);
+    const ttlInput = await screen.findByLabelText("Edit TTL for team_brief");
+    fireEvent.change(ttlInput, { target: { value: "3600" } });
+    fireEvent.click(screen.getByRole("button", { name: "Save" }));
+
+    await waitFor(() => expect(apiPost).toHaveBeenCalledTimes(1));
+    expect(apiPost.mock.calls[0][1].ttl_seconds).toBe(3600);
+  });
+
+  it("blank/zero/non-numeric TTL is omitted from the payload", async () => {
+    apiPost.mockResolvedValue({ status: "ok" });
+    await renderAndExpand("team_brief");
+    fireEvent.click(screen.getAllByRole("button", { name: "Edit" })[0]);
+    const ttlInput = await screen.findByLabelText("Edit TTL for team_brief");
+    // Junk + zero both must drop out — payload must not contain ttl_seconds.
+    fireEvent.change(ttlInput, { target: { value: "abc" } });
+    fireEvent.click(screen.getByRole("button", { name: "Save" }));
+    await waitFor(() => expect(apiPost).toHaveBeenCalledTimes(1));
+    expect(apiPost.mock.calls[0][1]).not.toHaveProperty("ttl_seconds");
+  });
+
+  it("Cancel discards edits and restores the rendered value", async () => {
+    await renderAndExpand("team_brief");
+    fireEvent.click(screen.getAllByRole("button", { name: "Edit" })[0]);
+    const textarea = await screen.findByLabelText("Edit value for team_brief");
+    fireEvent.change(textarea, { target: { value: '{"goal":"discarded"}' } });
+    fireEvent.click(screen.getByRole("button", { name: "Cancel" }));
+
+    expect(apiPost).not.toHaveBeenCalled();
+    // Editor is gone; the JSON pre-block is back.
+    expect(screen.queryByLabelText("Edit value for team_brief")).toBeNull();
+    expect(screen.getAllByText(/"goal": "ship v2"/i).length).toBeGreaterThan(0);
+  });
+
+  it("409 response surfaces a retry hint and reloads", async () => {
+    apiPost.mockRejectedValueOnce(
+      new Error("HTTP 409: if_match_version mismatch"),
+    );
+    await renderAndExpand("team_brief");
+    fireEvent.click(screen.getAllByRole("button", { name: "Edit" })[0]);
+    const textarea = await screen.findByLabelText("Edit value for team_brief");
+    fireEvent.change(textarea, { target: { value: '{"goal":"ship v3"}' } });
+    fireEvent.click(screen.getByRole("button", { name: "Save" }));
+
+    await waitFor(() => expect(apiPost).toHaveBeenCalledTimes(1));
+    const alert = await screen.findByRole("alert");
+    expect(alert.textContent).toMatch(/changed since you opened it/i);
+    // Initial mount load + post-conflict reload.
+    await waitFor(() => expect(apiGet).toHaveBeenCalledTimes(2));
+  });
+
+  it("non-409 error surfaces the message and does not reload", async () => {
+    apiPost.mockRejectedValueOnce(new Error("boom"));
+    await renderAndExpand("team_brief");
+    fireEvent.click(screen.getAllByRole("button", { name: "Edit" })[0]);
+    fireEvent.click(screen.getByRole("button", { name: "Save" }));
+
+    const alert = await screen.findByRole("alert");
+    expect(alert.textContent).toBe("boom");
+    // Only the initial mount load — no retry reload.
+    expect(apiGet).toHaveBeenCalledTimes(1);
+  });
+
+  it("entry with no version omits if_match_version (back-compat with older shape)", async () => {
+    // Pre-version-counter shape: drop the `version` field from the row.
+    apiGet.mockReset();
+    apiGet.mockImplementation((path: string) => {
+      if (path === "/workspaces/ws-test/memory") {
+        return Promise.resolve([
+          {
+            key: "old_entry",
+            value: "legacy",
+            expires_at: null,
+            updated_at: "2026-05-04T10:00:00Z",
+          },
+        ]);
+      }
+      return Promise.reject(new Error(`unmocked: ${path}`));
+    });
+    apiPost.mockResolvedValue({ status: "ok" });
+
+    await renderAndExpand("old_entry");
+    fireEvent.click(screen.getAllByRole("button", { name: "Edit" })[0]);
+    const textarea = await screen.findByLabelText("Edit value for old_entry");
+    fireEvent.change(textarea, { target: { value: "updated" } });
+    fireEvent.click(screen.getByRole("button", { name: "Save" }));
+
+    await waitFor(() => expect(apiPost).toHaveBeenCalledTimes(1));
+    const payload = apiPost.mock.calls[0][1];
+    expect(payload).not.toHaveProperty("if_match_version");
+    expect(payload.value).toBe("updated");
+  });
+});
diff --git a/tests/e2e/test_staging_full_saas.sh b/tests/e2e/test_staging_full_saas.sh
index 1223012a..b1a0cc31 100755
--- a/tests/e2e/test_staging_full_saas.sh
+++ b/tests/e2e/test_staging_full_saas.sh
@@ -706,8 +706,53 @@ print(json.dumps({
 d=json.load(sys.stdin)
 print(len(d if isinstance(d, list) else d.get('events', [])))" 2>/dev/null || echo 0)
   log "    Activity events observed: $ACTIVITY_COUNT"
+
+  # ─── 9c. Workspace KV memory Edit round-trip ─────────────────────────
+  # Pins the Edit affordance added to the canvas Memory tab. The UI calls
+  # POST /workspaces/:id/memory with if_match_version, so the contract is:
+  #   1. initial POST creates row at version 1
+  #   2. GET returns version 1 + value
+  #   3. POST with if_match_version=1 updates → version 2
+  #   4. POST with if_match_version=1 again → 409 (optimistic-lock enforcement)
+  # Without (3) there is no Edit; without (4) two concurrent writers can
+  # silently overwrite each other and the agent loses delegation-ledger state.
+  log "9c.  Memory KV Edit round-trip (Edit affordance + 409 gate)"
+  EDIT_KEY="e2e_edit_gate_$SLUG"
+
+  # 1. seed
+  tenant_call POST "/workspaces/$PARENT_ID/memory" \
+    -H "Content-Type: application/json" \
+    -d "{\"key\":\"$EDIT_KEY\",\"value\":{\"step\":1}}" >/dev/null \
+    || fail "memory KV seed POST failed"
+
+  # 2. read back, capture version
+  EDIT_GET=$(tenant_call GET "/workspaces/$PARENT_ID/memory/$EDIT_KEY")
+  EDIT_VER=$(echo "$EDIT_GET" | python3 -c "import json,sys; print(json.load(sys.stdin)['version'])" 2>/dev/null || echo "")
+  [ -z "$EDIT_VER" ] && fail "memory KV GET missing version field. Body: ${EDIT_GET:0:200}"
+
+  # 3. conditional update with matching version
+  tenant_call POST "/workspaces/$PARENT_ID/memory" \
+    -H "Content-Type: application/json" \
+    -d "{\"key\":\"$EDIT_KEY\",\"value\":{\"step\":2},\"if_match_version\":$EDIT_VER}" >/dev/null \
+    || fail "memory KV conditional Edit failed (if_match_version=$EDIT_VER)"
+
+  # 4. value flipped + version incremented?
+  EDIT_GET2=$(tenant_call GET "/workspaces/$PARENT_ID/memory/$EDIT_KEY")
+  EDIT_VAL2=$(echo "$EDIT_GET2" | python3 -c "import json,sys; print(json.load(sys.stdin)['value'].get('step'))" 2>/dev/null || echo "")
+  [ "$EDIT_VAL2" = "2" ] || fail "memory KV Edit did not persist new value. Body: ${EDIT_GET2:0:200}"
+
+  # 5. stale-version POST must 409 — pin the optimistic-lock contract.
+  EDIT_STALE_CODE=$(tenant_call POST "/workspaces/$PARENT_ID/memory" \
+    -H "Content-Type: application/json" \
+    -d "{\"key\":\"$EDIT_KEY\",\"value\":{\"step\":3},\"if_match_version\":$EDIT_VER}" \
+    -o /tmp/memory_stale_resp.txt -w "%{http_code}" 2>/dev/null || echo "000")
+  [ "$EDIT_STALE_CODE" = "409" ] || fail "memory KV stale Edit must 409 (optimistic-lock). Got $EDIT_STALE_CODE: $(cat /tmp/memory_stale_resp.txt 2>/dev/null | head -c 200)"
+
+  # cleanup
+  tenant_call DELETE "/workspaces/$PARENT_ID/memory/$EDIT_KEY" >/dev/null 2>&1 || true
+  ok "Memory KV Edit round-trip + 409 gate passed"
 else
-  log "9/11 Canary mode — skipping HMA / peers / activity"
+  log "9/11 Canary mode — skipping HMA / peers / activity / memory-edit"
 fi
 
 # ─── 10. Delegation mechanics (full mode + child) ──────────────────────