fix(dashnote): apply CodeRabbit review feedback

Address actionable findings from CodeRabbit review on PR #74. Net effect:
nine bug fixes / a11y improvements in dashnote, plus tighter test coverage
for the cache, session, and reload-stale-response invariants.

- a11y: drawer toggle aria-label flips with state; OperationResultNotice
  uses assertive aria-live for errors so role="alert" semantics hold
- LoginModal: clear stale error and mnemonic when modal reopens
- NotesWorkspace: monotonic reload token + session-snapshot guard so a
  late listMyNotes response from a previous identity/contract can't
  clobber state or write the wrong workspace into cache
- notesCache: key by identityId + contractId + network (per CLAUDE.md);
  clearCachedNotes sweeps every contract+network slot for an identity
- useTheme: optional-chain .matches so missing matchMedia falls back to
  "dark" instead of throwing
- SessionContext: isolate DPNS lookup failures so a name-service hiccup
  doesn't fail an otherwise-valid session; clear any prior remembered
  identity when login uses rememberMe: false (prevents logout falling
  back to the wrong identity)
- App.test.tsx: import ReactNode instead of using bare React.ReactNode
  (jsx: react-jsx doesn't put React in scope as a namespace)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: thephez

example-apps/dashnote/src/components/AppShell.tsx

@@ -133,7 +133,8 @@ export function AppShell({
           <button
             type="button"
             onClick={() => setDrawerOpen(!drawerOpen)}
-            aria-label="Open menu"
+            aria-label={drawerOpen ? "Close menu" : "Open menu"}
+            title={drawerOpen ? "Close menu" : "Open menu"}
             aria-expanded={drawerOpen}
             className="flex h-8 w-8 items-center justify-center rounded-md text-ink-3 hover:text-ink"
           >

example-apps/dashnote/src/components/LoginModal.tsx

@@ -35,6 +35,8 @@ export function LoginModal({ open, onClose }: LoginModalProps) {
     if (open) {
       setRememberMe(true);
       setUseDifferentIdentity(false);
+      setError(null);
+      setMnemonic("");
     }
   }, [open]);
 

example-apps/dashnote/src/components/NotesWorkspace.tsx

@@ -75,6 +75,9 @@ export function NotesWorkspace({
   const [conflictWarning, setConflictWarning] = useState<string | null>(null);
   const lastRevalidatedAt = useRef(0);
   const inFlightWriteRef = useRef(false);
+  // Monotonic token so a late listMyNotes() response from a previous
+  // identity/contract/session can't clobber state for the current one.
+  const reloadTokenRef = useRef(0);
   // Mirror editor state in refs so revalidation routines can compare against
   // the live values without participating in their dependency arrays (which
   // would re-fire effects on every keystroke).
@@ -158,13 +161,25 @@ export function NotesWorkspace({
       if (!hadNotes) setListLoading(true);
       setRevalidating(true);
       setError(null);
+      reloadTokenRef.current += 1;
+      const myToken = reloadTokenRef.current;
+      const startedIdentityId = identityId;
+      const startedContractId = contractId;
       try {
         const nextNotes = await listMyNotes({
           sdk,
           contractId,
           ownerId: identityId,
           log,
         });
+        // Bail if a newer reload started, or session keys changed under us.
+        if (
+          reloadTokenRef.current !== myToken ||
+          startedIdentityId !== identityId ||
+          startedContractId !== contractId
+        ) {
+          return;
+        }
         lastRevalidatedAt.current = Date.now();
         const changed = !notesEqualByRevision(prevNotes, nextNotes);
         if (changed) {
@@ -217,11 +232,14 @@ export function NotesWorkspace({
         });
         setEditsReady(true);
       } catch (err) {
+        if (reloadTokenRef.current !== myToken) return;
         setError(errorMessage(err));
         if (!hadNotes) setNotes([]);
       } finally {
-        setListLoading(false);
-        setRevalidating(false);
+        if (reloadTokenRef.current === myToken) {
+          setListLoading(false);
+          setRevalidating(false);
+        }
       }
     },
     [contractId, identityId, log, sdk, status, isDesktop],

example-apps/dashnote/src/components/OperationResultNotice.tsx

@@ -25,7 +25,7 @@ export function OperationResultNotice({
   return (
     <div
       role={tone === "error" ? "alert" : "status"}
-      aria-live="polite"
+      aria-live={tone === "error" ? "assertive" : "polite"}
       className={`rounded-lg border px-4 py-3 max-md:rounded-none max-md:border-0 max-md:bg-transparent max-md:px-4 max-md:py-3 ${toneClass[tone]}`}
     >
       <div className="text-[10px] font-semibold uppercase tracking-[0.12em]">

example-apps/dashnote/src/hooks/useTheme.ts

@@ -8,7 +8,7 @@ export function getInitialTheme(): Theme {
   if (typeof window === "undefined") return "dark";
   const stored = window.localStorage.getItem(STORAGE_KEY);
   if (stored === "light" || stored === "dark") return stored;
-  if (window.matchMedia?.("(prefers-color-scheme: light)").matches) {
+  if (window.matchMedia?.("(prefers-color-scheme: light)")?.matches) {
     return "light";
   }
   return "dark";

example-apps/dashnote/src/lib/notesCache.ts

@@ -22,8 +22,19 @@ interface CachedWorkspace {
   notes: NoteRecord[];
 }
 
-function storageKey(identityId: string): string {
-  return `${STORAGE_PREFIX}${identityId}`;
+function storageKey(
+  identityId: string,
+  contractId: string,
+  network: Network,
+): string {
+  return `${STORAGE_PREFIX}${identityId}.${contractId}.${network}`;
+}
+
+// Prefix for every cache entry belonging to a single identity, regardless
+// of which contract/network it was scoped to. Used by clearCachedNotes
+// when the caller doesn't know (or care about) the contract+network.
+function identityPrefix(identityId: string): string {
+  return `${STORAGE_PREFIX}${identityId}.`;
 }
 
 export function loadCachedNotes(
@@ -32,8 +43,9 @@ export function loadCachedNotes(
   network: Network,
 ): NoteRecord[] | null {
   if (!identityId || !contractId) return null;
+  const key = storageKey(identityId, contractId, network);
   try {
-    const raw = localStorage.getItem(storageKey(identityId));
+    const raw = localStorage.getItem(key);
     if (!raw) return null;
     const parsed = JSON.parse(raw) as Partial<CachedWorkspace>;
     if (
@@ -43,13 +55,13 @@ export function loadCachedNotes(
       parsed.network !== network ||
       !Array.isArray(parsed.notes)
     ) {
-      localStorage.removeItem(storageKey(identityId));
+      localStorage.removeItem(key);
       return null;
     }
     return parsed.notes as NoteRecord[];
   } catch {
     try {
-      localStorage.removeItem(storageKey(identityId));
+      localStorage.removeItem(key);
     } catch {
       // ignore
     }
@@ -73,16 +85,28 @@ export function saveCachedNotes(
     notes,
   };
   try {
-    localStorage.setItem(storageKey(identityId), JSON.stringify(payload));
+    localStorage.setItem(
+      storageKey(identityId, contractId, network),
+      JSON.stringify(payload),
+    );
   } catch {
     // ignore — quota or disabled storage
   }
 }
 
+// Clears every cached workspace for `identityId` across all contract/network
+// combinations. Forget-identity / logout flows don't know which combos the
+// user has visited, so we sweep by prefix.
 export function clearCachedNotes(identityId: string): void {
   if (!identityId) return;
   try {
-    localStorage.removeItem(storageKey(identityId));
+    const prefix = identityPrefix(identityId);
+    const toRemove: string[] = [];
+    for (let i = 0; i < localStorage.length; i += 1) {
+      const k = localStorage.key(i);
+      if (k && k.startsWith(prefix)) toRemove.push(k);
+    }
+    toRemove.forEach((k) => localStorage.removeItem(k));
   } catch {
     // ignore
   }

example-apps/dashnote/src/session/SessionContext.tsx

@@ -163,15 +163,23 @@ export function SessionProvider({ children }: { children: ReactNode }) {
 
         // Resolve the DPNS name after auth so we can persist it alongside
         // the identity ID — DPNS bindings are permanent, so what we save
-        // here is correct for every future load.
+        // here is correct for every future load. A naming-service failure
+        // shouldn't kill an otherwise-valid session: caption is optional.
         let resolvedName: string | null = null;
         if (resolvedId) {
-          resolvedName = await resolveDpnsName(connected, resolvedId);
+          try {
+            resolvedName = await resolveDpnsName(connected, resolvedId);
+          } catch (dpnsErr) {
+            log(`DPNS lookup failed: ${errorMessage(dpnsErr)}`, "info");
+          }
           setDpnsName(resolvedName);
         }
         if (rememberMe && resolvedId) {
           saveRememberedIdentity({ id: resolvedId, name: resolvedName });
           setRememberedIdentityId(resolvedId);
+        } else {
+          clearRememberedIdentity();
+          setRememberedIdentityId(null);
         }
       } catch (err) {
         const message = errorMessage(err);
@@ -229,10 +237,14 @@ export function SessionProvider({ children }: { children: ReactNode }) {
       // (e.g. the identity registered a name after we last saved, or this
       // record predates the dpnsName field).
       if (!remembered.name) {
-        const fresh = await resolveDpnsName(connected, remembered.id);
-        if (fresh) {
-          setDpnsName(fresh);
-          saveRememberedIdentity({ id: remembered.id, name: fresh });
+        try {
+          const fresh = await resolveDpnsName(connected, remembered.id);
+          if (fresh) {
+            setDpnsName(fresh);
+            saveRememberedIdentity({ id: remembered.id, name: fresh });
+          }
+        } catch (dpnsErr) {
+          log(`DPNS lookup failed: ${errorMessage(dpnsErr)}`, "info");
         }
       }
     } catch (err) {

example-apps/dashnote/test/App.test.tsx

@@ -7,6 +7,7 @@ import {
   screen,
   waitFor,
 } from "@testing-library/react";
+import type { ReactNode } from "react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
 import App from "../src/App";
@@ -37,7 +38,7 @@ vi.mock("../src/components/AppShell", () => ({
     onLoginOpen,
     onTabChange,
   }: {
-    children: React.ReactNode;
+    children: ReactNode;
     onLoginOpen: () => void;
     onTabChange: (tab: "notes" | "how-it-works") => void;
   }) => (

example-apps/dashnote/test/NotesWorkspace.test.tsx

@@ -293,7 +293,9 @@ describe("NotesWorkspace", () => {
 
     // The cache should hold the merged (fresh) revision so a cold reload
     // would paint the up-to-date content immediately.
-    const cacheRaw = localStorage.getItem("dashnote.notes.identity-1");
+    const cacheRaw = localStorage.getItem(
+      "dashnote.notes.identity-1.contract-1.testnet",
+    );
     expect(cacheRaw).toBeTruthy();
     const cached = JSON.parse(cacheRaw as string);
     expect(cached.notes).toHaveLength(1);
@@ -687,7 +689,7 @@ describe("NotesWorkspace", () => {
   describe("cache hydration & revalidation", () => {
     function seedCache(notes: unknown[], identityId = "identity-1") {
       localStorage.setItem(
-        `dashnote.notes.${identityId}`,
+        `dashnote.notes.${identityId}.contract-1.testnet`,
         JSON.stringify({
           version: 1,
           identityId,
@@ -937,6 +939,85 @@ describe("NotesWorkspace", () => {
       expect(screen.queryByDisplayValue("Mobile body")).toBeNull();
     });
 
+    it("ignores a late listMyNotes response from a previous identity/contract", async () => {
+      // Scenario: workspace is mounted for identity-1 + contract-1, and
+      // listMyNotes is in flight. Before it resolves, the user switches to
+      // identity-2 + contract-2 (re-render with a new session). The first
+      // request finally resolves with notes for the *previous* session — it
+      // must be ignored, both for state (no stale notes painted) and for
+      // cache writes (no notes saved under the previous identity/contract).
+      mockUseSession.mockReturnValue(makeSession());
+
+      // First call: hold open so we can resolve it after the switch.
+      let resolveFirst: (value: unknown[]) => void = () => {};
+      // Second call: also hold open so we can assert against the *old*
+      // response specifically without the new one painting first.
+      let resolveSecond: (value: unknown[]) => void = () => {};
+      mockListMyNotes
+        .mockImplementationOnce(
+          () =>
+            new Promise((resolve) => {
+              resolveFirst = resolve;
+            }),
+        )
+        .mockImplementationOnce(
+          () =>
+            new Promise((resolve) => {
+              resolveSecond = resolve;
+            }),
+        );
+      mockGetNote.mockImplementation(() => new Promise(() => {}));
+
+      const { rerender } = render(<NotesWorkspace onOpenSettings={vi.fn()} />);
+
+      // Switch to a new identity+contract while the first listMyNotes is
+      // still pending. Re-rendering with a fresh session value triggers the
+      // hydrate effect, which kicks off a new reloadNotes (and bumps the
+      // reload token).
+      mockUseSession.mockReturnValue(
+        makeSession({ identityId: "identity-2", contractId: "contract-2" }),
+      );
+      rerender(<NotesWorkspace onOpenSettings={vi.fn()} />);
+
+      // Wait until the post-rerender hydrate effect has actually issued its
+      // own listMyNotes call. This proves the new reload token is in place
+      // before we resolve the stale request — otherwise the test could pass
+      // by microtask-timing accident rather than by the guard's logic.
+      await waitFor(() => {
+        expect(mockListMyNotes).toHaveBeenCalledTimes(2);
+      });
+
+      // Now resolve the *stale* first request with notes that belong to the
+      // previous session. The guard inside reloadNotes should drop them.
+      const staleNote = {
+        id: "stale-1",
+        ownerId: "identity-1",
+        title: "Stale title from old session",
+        message: "should not appear",
+        createdAt: 1000,
+        updatedAt: 2000,
+        revision: 1,
+      };
+      resolveFirst([staleNote]);
+
+      // Poll the invariant directly — `waitFor` retries until microtasks
+      // queued by resolveFirst() have settled. If the guard is missing,
+      // this fails (cache write happens synchronously in the await
+      // continuation); if it's working, the cache stays null.
+      await waitFor(() => {
+        expect(
+          localStorage.getItem("dashnote.notes.identity-1.contract-1.testnet"),
+        ).toBeNull();
+      });
+      expect(screen.queryByText(/stale title from old session/i)).toBeNull();
+      expect(
+        localStorage.getItem("dashnote.notes.identity-2.contract-2.testnet"),
+      ).toBeNull();
+
+      // Clean up: let the second pending promise resolve so cleanup() doesn't hang.
+      resolveSecond([]);
+    });
+
     it("keeps cached notes visible when the network revalidation fails", async () => {
       mockUseSession.mockReturnValue(makeSession());
       seedCache([