@marver-design/marver 0.7.0 → 0.8.1

package/src/client/shell/Play.tsx

@@ -1,5 +1,5 @@
 /**
- * Play mode (SPEC-M2 §1): full-window near-black backdrop, ONE device shell centered at
+ * Play mode: full-window near-black backdrop, ONE device shell centered at
  * the chosen viewport's exact CSS pixels, scaled to fit - or `fill`, where the frame IS
  * the window. The device hosts a single stage iframe that swaps frames in place.
  *
@@ -125,6 +125,7 @@ function PlayComments({ iframe, frameId, vp, dw, dh, ready }: {
   dw: number; dh: number; ready: number
 }) {
   const show = useComments((s) => s.show)
+  const showAnchor = useComments((s) => s.showAnchor)
   const active = useComments((s) => s.active)
   const draft = useComments((s) => s.draft)
   const allThreads = useComments((s) => s.threads)
@@ -165,11 +166,12 @@ function PlayComments({ iframe, frameId, vp, dw, dh, ready }: {
   useEffect(() => {
     const win = iframe.current?.contentWindow
     if (!win) return
-    // only while the thread is active (or composing) AND pins are shown - closing or ⇧C clears it
-    const at = !show ? null : (draft?.frame === frameId ? draft.anchor
+    // only while the thread is active (or composing) AND pins are shown AND element focus is
+    // on (⇧L) - closing, ⇧C, or dimming focus clears it
+    const at = !show || !showAnchor ? null : (draft?.frame === frameId ? draft.anchor
       : (active ? (threads.find((t) => t.id === active && (t.anchor as any)?.el)?.anchor ?? null) : null))
     win.postMessage({ type: 'sh:highlight-anchor', frame: frameId, anchor: at ?? null }, location.origin)
-  }, [active, draft, show, frameId, iframe, rects, ready])
+  }, [active, draft, show, showAnchor, frameId, iframe, rects, ready])
 
   if (!show) return null
 
@@ -201,7 +203,7 @@ function PlayComments({ iframe, frameId, vp, dw, dh, ready }: {
           </div>
         )
       })}
-      {activeThread && <ThreadCard key={active!} thread={activeThread} at={pinAt(activeThread)} bounds={{ w: dw, h: dh }} />}
+      {activeThread && <ThreadCard key={active!} thread={activeThread} at={pinAt(activeThread)} bounds={{ w: dw, h: dh }} stage />}
       {draftAt && <DraftComposer at={draftAt} bounds={{ w: dw, h: dh }} hue={(draft?.anchor as any)?.el?.hue} />}
     </div>
   )
@@ -218,6 +220,7 @@ function PlayInner() {
   const playNav = useStore((s) => s.playNav)
   const laser = useStore((s) => s.laser)
   const commentMode = useComments((s) => s.commentMode)
+  const playShowAnchor = useComments((s) => s.showAnchor)
   const iframeRef = useRef<HTMLIFrameElement>(null)
   // the src is frozen at mount - navigation happens INSIDE the stage; device and theme
   // changes must never reload it (a phone does not remount when you flip dark mode)
@@ -244,7 +247,7 @@ function PlayInner() {
   // laser / comment ride the same rail as canvas frames, broadcast to the stage iframe.
   // Re-sent on stage-ready (below) so a stage reload restores the mode.
   useEffect(() => { postStage({ type: 'sh:laser', on: laser }) }, [laser])
-  useEffect(() => { postStage({ type: 'sh:pick', on: commentMode }) }, [commentMode])
+  useEffect(() => { postStage({ type: 'sh:pick', on: commentMode, quiet: !useComments.getState().showAnchor }) }, [commentMode, playShowAnchor])
 
   const exit = () => {
     const { at } = useStore.getState().play ?? {}
@@ -278,7 +281,7 @@ function PlayInner() {
   }
   const restart = () => { const list = playList(); if (list.length) goTo(list[0]) }
 
-  /** Variant siblings of the CURRENT frame present on this board (SPEC-023 §6): the
+  /** Variant siblings of the CURRENT frame present on this board: the
    *  review question is "which direction is better on THIS screen" - switch in place,
    *  device and theme preserved, each variant's own data-goto links drive after. */
   const variantList = () => {
@@ -333,7 +336,7 @@ function PlayInner() {
           postStage({ type: 'sh:set-theme', theme: p.theme })
         }
         postStage({ type: 'sh:laser', on: s.laser })
-        postStage({ type: 'sh:pick', on: commentsStore().commentMode })
+        postStage({ type: 'sh:pick', on: commentsStore().commentMode, quiet: !commentsStore().showAnchor })
         setStageReady((n) => n + 1)            // a reload wiped the frame's lock; let PlayComments re-drive it
       } else if (data.type === 'sh:stage-at') {
         const p = s.play
@@ -397,6 +400,7 @@ function PlayInner() {
     if (key === 'l') { const s = useStore.getState(); if (!s.laser) commentsStore().setMode(false); s.setLaser(!s.laser); return }
     if (key === 'c') { const c = commentsStore(); if (!c.commentMode) useStore.getState().setLaser(false); c.setMode(!c.commentMode); return }
     if (key === 'C') { const c = commentsStore(); c.setShow(!c.show); return }   // ⇧C hides/shows pins
+    if (key === 'L') { const c = commentsStore(); c.setShowAnchor(!c.showAnchor); return }   // ⇧L element focus
 
     if (/^Digit[1-9]$/.test(code)) {
       const names = Object.keys(CONFIG.viewports)

package/src/client/shell/Toolbar.tsx

@@ -73,13 +73,24 @@ export function useHideUI() {
 
 // ---- shared controls ----------------------------------------------------------------
 
+/** Two-row shortcut tooltip: one action per row, key right-aligned - the provenance
+ *  tooltip's bold-value/muted-key language, shared by every two-shortcut button. */
+function TipRows({ rows }: { rows: [string, string][] }) {
+  return (
+    <span className="sh-tip-rows">
+      {rows.map(([label, key]) => <span className="r" key={key}><b>{label}</b><span>{key}</span></span>)}
+    </span>
+  )
+}
+
 /** Laser toggle - store-level, identical on canvas and prototype. The per-surface code
  *  broadcasts sh:laser to its frame(s); this only flips the flag (and drops comment mode,
  *  since the two are one-at-a-time). */
 export function LaserButton() {
   const laser = useStore((s) => s.laser)
+  const showAnchor = useComments((s) => s.showAnchor)
   return (
-    <Tip side="bottom" label={<><b>Laser mode</b><span>L</span></>}>
+    <Tip side="bottom" label={<TipRows rows={[['Laser mode', 'L'], [showAnchor ? 'Hide laser comment' : 'Show laser comment', '⇧L']]} />}>
       <button className={`sh-pill-btn${laser ? ' on' : ''}`} onClick={() => {
         if (!laser) commentsStore().setMode(false)
         useStore.getState().setLaser(!laser)
@@ -91,8 +102,9 @@ export function LaserButton() {
 /** Comment toggle - store-level, identical on canvas and prototype. */
 export function CommentButton() {
   const commentMode = useComments((s) => s.commentMode)
+  const show = useComments((s) => s.show)
   return (
-    <Tip side="bottom" label={<><b>Comment</b><span>C · ⇧C hides pins</span></>}>
+    <Tip side="bottom" label={<TipRows rows={[['Comment', 'C'], [show ? 'Hide pins' : 'Show pins', '⇧C']]} />}>
       <button className={`sh-pill-btn${commentMode ? ' on' : ''}`} onClick={() => {
         const c = commentsStore()
         if (!c.commentMode) useStore.getState().setLaser(false)

package/src/client/shell/canvas/Canvas.tsx

@@ -100,7 +100,7 @@ export const canvasCtl = {
   wheel(_input: CanvasWheelInput) {},
 }
 
-/** Variant-group captions (SPEC-023 §4): "Landing · 3 variants" above each group with
+/** Variant-group captions: "Landing · 3 variants" above each group with
  *  2+ members on this board. World-space (scales with the canvas); min screen size via
  *  --sh-inv. Groups with one lone member on a curated board keep the badge, no caption. */
 function GroupCaptions() {

package/src/client/shell/canvas/FrameNode.tsx

@@ -1,8 +1,9 @@
 import { memo, useCallback, useEffect, useRef } from 'react'
 import { cap, frameUrl, useStore, CONFIG, type Node } from '../store.ts'
-import { CopyIcon, IntentGlyph, ReloadIcon, XIcon } from '../icons.tsx'
+import { CopyIcon, IntentGlyph, ParallelogramFillIcon, ReloadIcon, XIcon } from '../icons.tsx'
 import { CommentLayer } from '../Comments.tsx'
 import { useComments } from '../comments-store.ts'
+import { threadHostKey } from '../keys.ts'
 import { registerFrame, unregisterFrame } from './frame-registry.ts'
 import { primeCameraFor } from './camera-broadcast.ts'
 import { registerLeanFrame, dropSnapshot, scheduleCapture, invalidateLean } from './snapshots.ts'
@@ -10,8 +11,26 @@ import { registerLeanFrame, dropSnapshot, scheduleCapture, invalidateLean } from
 export const HEADER = 28
 const SNAP = 12
 
+/** Live Jam working shimmer: a slim 2x6 strip of tiny marver marks on the frame's left
+ *  flank, top-aligned - each mark twinkles on its own scattered beat, phased per frame by
+ *  --mv-w0 (set on the node) so parallel frames never pulse in sync. */
+const SHIM_DELAYS = Array.from({ length: 12 }, (_, i) => {
+  const r = Math.floor(i / 2), c = i % 2
+  return (((r * 7 + c * 13) % 9) / 9) * 0.95
+})
+function WorkShimmer({ belowBadge }: { belowBadge: boolean }) {
+  // a variant badge owns the top of the left flank - the shimmer yields and sits below it
+  return (
+    <div className={`sh-work-ind${belowBadge ? ' below-vbadge' : ''}`} aria-hidden>
+      {SHIM_DELAYS.map((d, i) => (
+        <ParallelogramFillIcon key={i} size={5} style={{ animationDelay: `calc(var(--mv-w0, 0s) + ${d.toFixed(2)}s)` }} />
+      ))}
+    </div>
+  )
+}
+
 /**
- * One frame on the canvas. Iframe laws (spec §7): the iframe element is created once per node key
+ * One frame on the canvas. Iframe laws: the iframe element is created once per node key
  * and never remounted - theme changes go through sh:set-theme, size changes are CSS only.
  *
  * Every interactive element carries `sh-no-pan` (rzpp's panning.excluded checks the event
@@ -23,6 +42,8 @@ export const FrameNode = memo(function FrameNode({ node }: { node: Node }) {
   const frame = useStore((s) => s.frameFor(node))
   const selected = useStore((s) => s.selection.includes(node.key))
   const interact = useStore((s) => s.interact === node.key)
+  const working = useStore((s) => s.working.includes(node.frame))   // Live Jam: Marver is editing this frame
+  const workingSince = useStore((s) => s.workingSince[node.frame])
   // B0.1: no reactive scale subscription - it re-rendered every FrameNode on every
   // pan/zoom tick. gestureScale below measures the world rect (the canonical source,
   // Law G-5); the stored scale is only a never-hit fallback, read lazily at drag time.
@@ -68,7 +89,7 @@ export const FrameNode = memo(function FrameNode({ node }: { node: Node }) {
     registerWin()
   }, [node.key])
 
-  // SPEC-M5: register the facade <iframe> so the lean coordinator can drive its srcdoc imperatively.
+  // Register the facade <iframe> so the lean coordinator can drive its srcdoc imperatively.
   const bindLean = useCallback((el: HTMLIFrameElement | null) => { registerLeanFrame(node.key, el) }, [node.key])
   // capture a fresh lean snapshot once the frame is ready and quiet, and whenever its CONTENT changes
   // (nav). Resize needs no re-capture (the lean doc reflows) and theme needs none (attribute flip),
@@ -87,7 +108,10 @@ export const FrameNode = memo(function FrameNode({ node }: { node: Node }) {
       // otherwise capture the live DOM WITH the highlight baked in and re-cover it. The
       // hostsCard rail recaptures a clean lean once the card closes.
       const c = useComments.getState()
-      const hosting = (!!c.active && c.threads.some((th) => th.id === c.active && th.nodeKey === node.key && !th.resolved)) || c.draft?.nodeKey === node.key
+      // hosting goes through the resolver (keys.ts): an adopted thread's card renders
+      // here even though its stored nodeKey names a node that no longer exists
+      const hosting = (!!c.active && c.threads.some((th) =>
+        th.id === c.active && !th.resolved && threadHostKey(th, useStore.getState().nodes) === node.key)) || c.draft?.nodeKey === node.key
       if (hosting) return
       scheduleCapture(node.key, iframe, { sourceRevision: String(node.nav ?? 0), theme: node.theme })
     }, 450)
@@ -112,7 +136,7 @@ export const FrameNode = memo(function FrameNode({ node }: { node: Node }) {
       scheduleCapture(node.key, iframeRef.current, { sourceRevision: String(node.nav ?? 0), theme: node.theme }, true)
   }, [interact, node.key, node.nav, node.theme, node.status])
 
-  // laser mode (SPEC-M3 §7) rides the same rail; re-sent when a frame becomes ready
+  // laser mode rides the same rail; re-sent when a frame becomes ready
   // so late loaders join an already-lasered board
   const laser = useStore((s) => s.laser)
   const commentMode = useComments((s) => s.commentMode)
@@ -120,7 +144,8 @@ export const FrameNode = memo(function FrameNode({ node }: { node: Node }) {
   // neighbors - each node is a stacking context, so an overflowing card would
   // otherwise paint under the next frame
   const hostsCard = useComments((s) =>
-    (!!s.active && s.threads.some((t) => t.id === s.active && t.nodeKey === node.key && !t.resolved)) || s.draft?.nodeKey === node.key)
+    (!!s.active && s.threads.some((t) =>
+      t.id === s.active && !t.resolved && threadHostKey(t, useStore.getState().nodes) === node.key)) || s.draft?.nodeKey === node.key)
   // a frame hosting an OPEN thread or a draft must show its LIVE app, not the frozen lean
   // cover: the active-element highlight lives in the live DOM and updates in real time
   // (open -> lit, close -> cleared). Without this the cover re-freezes the moment comment
@@ -140,11 +165,13 @@ export const FrameNode = memo(function FrameNode({ node }: { node: Node }) {
     if (node.status === 'ready' || !laser)
       iframeRef.current?.contentWindow?.postMessage({ type: 'sh:laser', on: laser }, location.origin)
   }, [laser, node.status])
-  // comment mode = pick mode in the frame (late loaders join like laser does)
+  // comment mode = pick mode in the frame (late loaders join like laser does); quiet when
+  // laser comment (⇧L) is off - clicks still anchor, no lighting in the artwork
+  const showAnchor = useComments((s) => s.showAnchor)
   useEffect(() => {
     if (node.status === 'ready' || !commentMode)
-      iframeRef.current?.contentWindow?.postMessage({ type: 'sh:pick', on: commentMode }, location.origin)
-  }, [commentMode, node.status])
+      iframeRef.current?.contentWindow?.postMessage({ type: 'sh:pick', on: commentMode, quiet: !showAnchor }, location.origin)
+  }, [commentMode, showAnchor, node.status])
   // B0.2: the interact target owns its own wheel (app scrolls); passive frames forward
   // wheel to the canvas. Replayed on ready like laser/pick so a reload restores truth.
   useEffect(() => {
@@ -177,7 +204,7 @@ export const FrameNode = memo(function FrameNode({ node }: { node: Node }) {
     if (frame && iframeRef.current) iframeRef.current.src = frameUrl(frame, node.theme)
   }, [node.nav])
 
-  // ready timeout (spec §7): 10s without sh:ready -> error card with reload
+  // ready timeout: 10s without sh:ready -> error card with reload
   useEffect(() => {
     if (node.status !== 'loading') return
     const t = setTimeout(() => setStatus(node.key, 'error', 'frame never reported ready (10s)'), 10_000)
@@ -280,18 +307,22 @@ export const FrameNode = memo(function FrameNode({ node }: { node: Node }) {
     )
   }
 
-  // variant badge (SPEC-023 §4): letter + name floating LEFT of the frame, outside the
+  // variant badge: letter + name floating LEFT of the frame, outside the
   // artwork, world-anchored (scales with zoom) with a screen-space minimum via --sh-inv
   const variantName = frame.title
     ?? cap((frame.id.split('/').pop() ?? '').replace(/^[a-z]-/, '').replace(/-/g, ' '))
 
   return (
     <div
-      className={`sh-node${selected ? ' sel' : ''}${interact ? ' interact' : ''}`}
+      className={`sh-node${selected ? ' sel' : ''}${interact ? ' interact' : ''}${working ? ' working' : ''}`}
       data-theme={node.theme}
-      style={{ transform: `translate(${node.x}px, ${node.y}px)`, width: node.w, height: node.h + HEADER, zIndex: hostsCard ? 30 : undefined }}
+      style={{ transform: `translate(${node.x}px, ${node.y}px)`, width: node.w, height: node.h + HEADER, zIndex: hostsCard ? 30 : undefined,
+        // phase every working animation by when THIS frame's job started - parallel
+        // frames pulsing in sync would read as one fake choreography
+        ...(working ? { ['--mv-w0' as string]: `${-(Date.now() - (workingSince ?? Date.now()))}ms` } : {}) }}
       data-node={node.key}
     >
+      {working && <WorkShimmer belowBadge={!!frame.variantGroup} />}
       {frame.variantGroup && (
         <div className="sh-vbadge sh-no-pan" title={`${frame.variantGroup} · variant ${frame.variant?.toUpperCase()} - click to select`}
           onPointerDown={(e) => e.stopPropagation()}
@@ -301,7 +332,7 @@ export const FrameNode = memo(function FrameNode({ node }: { node: Node }) {
         </div>
       )}
       <div className="sh-node-head sh-no-pan" onPointerDown={(e) => drag(e, 'move')} title={frame.file}>
-        {/* content frames carry their intent glyph in the chrome (SPEC-026) */}
+        {/* content frames carry their intent glyph in the chrome */}
         {frame.intent && <IntentGlyph intent={frame.intent} size={12} className="iicon sh-no-pan" aria-label={frame.intent} />}
         <span className="id sh-no-pan">{frame.title ?? frame.id}</span>
         <span className="dim sh-no-pan">{Math.round(node.w)} · {node.theme}</span>
@@ -331,7 +362,7 @@ export const FrameNode = memo(function FrameNode({ node }: { node: Node }) {
           onLoad={registerWin}
           style={{ width: node.w, height: node.h, display: node.missing || node.status === 'error' ? 'none' : 'block' }}
         />
-        {/* SPEC-M5 lean facade: a DOM-snapshot (static html, 0 JS) covering the live iframe only while
+        {/* Lean facade: a DOM-snapshot (static html, 0 JS) covering the live iframe only while
             the canvas is gesturing (CSS), so a heavy frame never flashes white mid-transform and the
             device sweep reflows correctly. sandbox WITHOUT allow-scripts = no JS runs; allow-same-origin
             so fonts/assets resolve and the shell can flip its theme + restore scroll. Never registered,
@@ -348,6 +379,7 @@ export const FrameNode = memo(function FrameNode({ node }: { node: Node }) {
             onDoubleClick={(e) => { e.stopPropagation(); setInteract(node.key) }}
           />
         )}
+        {working && <div className="sh-work-wave" />}
       </div>
 
       {/* comments live OUTSIDE the clipped body: a card or pin near the frame edge

package/src/client/shell/canvas/snapshots.ts

@@ -1,5 +1,5 @@
 /**
- * SPEC-M5 slice 1: the lean-frame facade coordinator. Imperative on purpose - the facade is a
+ * The lean-frame facade coordinator. Imperative on purpose - the facade is a
  * `<iframe class="sh-lean" sandbox="allow-same-origin">` driven by setting .srcdoc directly, so no
  * FrameNode subscribes to snapshot state and a pan/zoom tick triggers zero React renders.
  *
@@ -13,7 +13,7 @@
  * INVALIDATE the lean (never mutate a displayed one - baked mermaid can't re-theme in place) and a
  * fresh capture is admitted before it is shown again. Captures run bounded-parallel, viewport-first, at idle, never while busy.
  *
- * Correctness beats the flash-guard (codex): a frame the serialiser cannot render faithfully
+ * Correctness beats the flash-guard: a frame the serialiser cannot render faithfully
  * (canvas/video/shadow-dom/cross-origin-css, or an unrestorable scroller) is left DEGRADED - no
  * `data-ready`, no cover, live pixels stay. Every install is guarded by a per-node GENERATION token
  * so an in-flight capture can never paint a stale/wrong-node cover after a reload or unmount.
@@ -87,7 +87,7 @@ function install(nodeKey: string): void {
     const doc = iframe.contentDocument
     if (!cur || !doc) return
     if (!restoreScroll(doc, cur.scrollMap)) { cur.degraded = [...cur.degraded, 'scroll']; iframe.removeAttribute('srcdoc'); return }
-    // CSP guard (codex): if a hardened host blocked the inline <style> (style-src 'self'), the lean is
+    // CSP guard: if a hardened host blocked the inline <style> (style-src 'self'), the lean is
     // unstyled - the sentinel custom prop won't resolve. Stay live rather than show an unstyled cover.
     if (getComputedStyle(doc.documentElement).getPropertyValue('--mv-lean-ok').trim() !== '1') { iframe.removeAttribute('srcdoc'); return }
     applyTheme(doc, cur.theme)

package/src/client/shell/comments-store.ts

@@ -1,5 +1,5 @@
 /**
- * Comment state for the shell (SPEC-M3 §6) - its own small store beside the canvas
+ * Comment state for the shell - its own small store beside the canvas
  * store. One API client for both worlds: `marver dev` (api.ts mirror, local profile,
  * poll) and the published serve (collab.ts, sessions, SSE). The shell never branches
  * on which one it is beyond capability flags the endpoints themselves report.
@@ -11,32 +11,42 @@ import { ROUTE } from '../const.ts'
 export interface Me { email: string; name: string; avatar?: string }
 
 interface CommentsState {
-  events: CommentEvent[]              // the active board's log
-  threads: Thread[]                   // derived on every change
+  events: CommentEvent[]              // EVERY board's log, unioned - comments are frame-scoped
+  threads: Thread[]                   // derived on every change; each carries its origin board
   board: string | null
   me: Me | null                       // null on published until signed in
   local: boolean                      // dev mirror (identity is the local profile)
+  connected: boolean                  // dev only: a connect account provides name/email (read-only here)
   commentMode: boolean                // C - picking + composing
   show: boolean                       // Shift+C - pins visible at all
+  showAnchor: boolean                 // Shift+L - light the tagged ELEMENT while its thread is open
   active: string | null               // open thread id
-  draft: { nodeKey: string; frame: string; anchor: unknown } | null   // picked, composing
+  // picked, composing. `board` is captured at pick time - the write must land in the
+  // log of the board the user was LOOKING at, however long the composer stays open
+  draft: { nodeKey: string; frame: string; anchor: unknown; board?: string } | null
   needsIdentity: boolean              // published viewer tried to comment while signed out
   inviteToken: string | null          // arrived via an invite link - claim flow, token known
 
   load(board: string): Promise<void>
   live(board: string): () => void
-  send(events: CommentEvent[]): Promise<boolean>
+  /** Fetch a board's log NOW (Live Jam: the daemon just wrote a reply THERE) - same union
+   *  path as the poll, so dedup + the reply notification behave identically. ANY board:
+   *  notifications must reach the user wherever they are on the canvas. */
+  poke(board?: string): void
+  /** `board` routes the write to a thread's ORIGIN log; default = the active board. */
+  send(events: CommentEvent[], board?: string): Promise<boolean>
   create(body: string): Promise<void>
   reply(threadId: string, body: string): Promise<void>
   replyOk(threadId: string, body: string): Promise<boolean>
   resolve(threadId: string, reopen?: boolean): Promise<void>
   setMode(on: boolean): void
   setShow(show: boolean): void
+  setShowAnchor(on: boolean): void
   setActive(id: string | null): void
   setDraft(d: CommentsState['draft']): void
   signIn(email: string, password: string): Promise<string | null>
   claim(token: string, password: string, name: string, avatar?: string): Promise<string | null>
-  saveProfile(patch: Partial<Me>): Promise<void>
+  saveProfile(patch: Partial<Me>): Promise<string | null>
   dismissIdentity(): void
 }
 
@@ -51,23 +61,112 @@ const api = async (path: string, body?: unknown) => {
 }
 
 export const useComments = create<CommentsState>((set, get) => {
-  const derive = (events: CommentEvent[]) => ({ events, threads: replay(events) })
+  // replay PER BOARD, then concatenate: replay keys threads by commentId alone, so a
+  // (copied, malicious, or just colliding) id in two logs must not merge across boards
+  const derive = (events: CommentEvent[]) => {
+    const byBoard = new Map<string, CommentEvent[]>()
+    for (const e of events) {
+      const k = e.board ?? ''
+      const arr = byBoard.get(k) ?? []
+      arr.push(e)
+      byBoard.set(k, arr)
+    }
+    return { events, threads: [...byBoard.values()].flatMap((evs) => replay(evs)) }
+  }
+  // a static 0.8.1 serve answers every /api/* with 404 - comments simply do not exist
+  // there. Latch off after detection so N boards are not swept into 404s every 30s.
+  let apiOff = false
+  // the boot instant: an event younger than the page can never be "history", so it may
+  // notify even before its board's baseline sweep lands (the poke/SSE-beats-load race)
+  const bootTs = Date.now()
+  // Live Jam: a Marver reply that arrives AFTER the baseline raises a persistent
+  // bottom-right pill - from ANY board (the store holds every log), keyed on the event id
+  // via `union`'s fresh filter so it fires exactly once. The pill's board is the THREAD's
+  // origin board, so View can navigate there.
+  const notifyAgent = (fresh: CommentEvent[]) => {
+    const replies = fresh.filter((e) => e.agent && e.type === 'reply')
+    if (!replies.length) return
+    void import('./store.ts').then(({ useStore }) => {
+      const s = useStore.getState()
+      for (const e of replies) {
+        const threadId = e.parentId ?? e.commentId ?? ''
+        // the FRAME is the news: resolve the reply's thread -> frame -> manifest title + intent
+        const t = get().threads.find((t) => t.id === threadId)
+        const entry = t?.frame ? s.manifest?.frames.find((f) => f.id === t.frame) : undefined
+        s.jamToast({
+          threadId, board: t?.board ?? e.board ?? get().board ?? '', ts: e.ts,
+          preview: (e.body ?? '').replace(/\s+/g, ' ').slice(0, 90),
+          frame: t?.frame, frameTitle: entry?.title ?? t?.frame, intent: entry?.intent,
+        })
+      }
+    })
+  }
+  // events are append-only everywhere, so union is ALWAYS safe - the one rule is the
+  // baseline, PER BOARD: a board's first successful read must never replay its history
+  // as notifications (the switcher list can arrive after the first sweep, so a global
+  // flag would announce a late board's whole past as news)
+  const baselinedBoards = new Set<string>()
+  // dedup by (board, id): the same id in two DIFFERENT logs is two events, never one
+  const key = (e: CommentEvent) => `${e.board ?? ''}|${e.id}`
   const union = (events: CommentEvent[]) => {
-    const have = new Set(get().events.map((e) => e.id))
-    const fresh = events.filter((e) => !have.has(e.id))
-    if (fresh.length) set(derive([...get().events, ...fresh]))
+    const have = new Set(get().events.map(key))
+    // dedupe within the batch too - a union-merged log can carry a duplicated line
+    const fresh = events.filter((e) => !have.has(key(e)) && (have.add(key(e)), true))
+    if (!fresh.length) return
+    set(derive([...get().events, ...fresh]))
+    notifyAgent(fresh.filter((e) => (e.board && baselinedBoards.has(e.board)) || e.ts > bootTs))
+  }
+  /** Legacy logs (0.8.0 clients never sent `board`) get it from the endpoint they came
+   *  from - without it, replies to their threads would route to whatever board is open. */
+  const stamped = (events: CommentEvent[] | undefined, board: string): CommentEvent[] =>
+    (events ?? []).map((e) => (e.board ? e : { ...e, board }))
+  /** Every board that could hold a log: the switcher list plus the active board -
+   *  the sum of what this client can navigate to. Transport failure = just the
+   *  active board; the next sweep widens again. */
+  const watchNames = async (): Promise<string[]> => {
+    const names = new Set<string>()
+    try {
+      const { fetchBoardNames } = await import('./store.ts')
+      for (const n of await fetchBoardNames()) names.add(n)
+    } catch { /* keep what we have */ }
+    const b = get().board
+    if (b) names.add(b)
+    return [...names]
+  }
+  /** One sweep across every board's log - the notification feed and the frame-scoped
+   *  thread state are the same fetch. Boards baseline AFTER their events land. */
+  const fetchAll = async () => {
+    if (apiOff) return
+    const names = await watchNames()
+    const results = await Promise.all(names.map((n) =>
+      api(`comments/${n}`).then((r) => (r.ok ? stamped(r.data.events as CommentEvent[] | undefined, n) : null))))
+    union(results.flatMap((evs) => evs ?? []))
+    names.forEach((n, i) => { if (results[i] !== null) baselinedBoards.add(n) })
   }
 
   return {
-    events: [], threads: [], board: null, me: null, local: false,
-    commentMode: false, show: true, active: null, draft: null, needsIdentity: false, inviteToken: null,
+    events: [], threads: [], board: null, me: null, local: false, connected: false,
+    commentMode: false, show: true, showAnchor: true, active: null, draft: null, needsIdentity: false, inviteToken: null,
+
+    poke(board) {
+      const b = board ?? get().board
+      if (!b || apiOff) return
+      void api(`comments/${b}`).then((r) => {
+        if (!r.ok) return
+        union(stamped(r.data.events, b))   // brand-new events still notify via the bootTs rule
+        baselinedBoards.add(b)
+      })
+    },
 
     async load(board) {
-      set({ board })
+      // threads are frame-scoped and global - a board switch keeps them all (the same
+      // frame on another board keeps its pins); only the open card and a draft reset
+      if (get().board !== board) set({ board, active: null, draft: null })
+      else set({ board })
       const me = await api('me')
-      if (me.ok) set({ me: me.data.user ?? null, local: !!me.data.local })
-      const res = await api(`comments/${board}`)
-      if (res.ok && get().board === board) set(derive(res.data.events ?? []))
+      if (me.status === 404) { apiOff = true; return }   // static serve: no comments API at all
+      if (me.ok) set({ me: me.data.user ?? null, local: !!me.data.local, connected: !!me.data.connected })
+      await fetchAll()
     },
 
     /** Liveness: SSE on the published serve; dev has no event rail (its sync loop
@@ -76,12 +175,13 @@ export const useComments = create<CommentsState>((set, get) => {
       const stops: (() => void)[] = []
       let es: EventSource | null = null
       const wantSSE = () => {
-        if (es || get().local) return
+        if (es || get().local || apiOff) return
         es = new EventSource(`${ROUTE}/api/events`)
         es.addEventListener('comment', (e) => {
           try {
             const { board: b, ev } = JSON.parse((e as MessageEvent).data)
-            if (b === get().board) union([ev])
+            // every board: notifications reach the viewer anywhere (envelope names the log)
+            union(stamped([ev], typeof b === 'string' ? b : ''))
           } catch { /* ignore */ }
         })
         es.addEventListener('resync', () => { void get().load(board) })
@@ -90,7 +190,7 @@ export const useComments = create<CommentsState>((set, get) => {
       // `local` is only known once load() has answered - defer the SSE decision past it
       const t = setTimeout(wantSSE, 1500)
       stops.push(() => { clearTimeout(t); es?.close() })
-      const poll = () => { if (get().board === board) void api(`comments/${board}`).then((r) => r.ok && union(r.data.events ?? [])) }
+      const poll = () => { if (get().board === board) void fetchAll() }
       const iv = setInterval(poll, 30_000)
       const onFocus = () => poll()
       window.addEventListener('focus', onFocus)
@@ -98,10 +198,15 @@ export const useComments = create<CommentsState>((set, get) => {
       return () => stops.forEach((f) => f())
     },
 
-    async send(events) {
-      const { board } = get()
-      if (!board) return false
-      const res = await api(`comments/${board}`, { events })
+    async send(events, board) {
+      const target = board ?? get().board
+      if (!target) return false
+      // stamp the origin board BEFORE the POST: the dev server fills it at origin, but
+      // the published server stores events as sent - an unstamped event would come back
+      // board-less on the next load and its replies could then route to the wrong log.
+      // Stamping client-side keeps the stored bytes and the optimistic copy identical.
+      const stamped = events.map((e) => ({ ...e, board: e.board ?? target }))
+      const res = await api(`comments/${target}`, { events: stamped })
       if (res.status === 401) { set({ needsIdentity: true }); return false }
       // any other refusal gets said out loud - a silent dead Enter key reads as a bug
       // (the canonical case: a signed-in viewer on a read-only board)
@@ -109,11 +214,10 @@ export const useComments = create<CommentsState>((set, get) => {
         const { useStore } = await import('./store.ts')
         useStore.getState().toast(String((res.data as any)?.error ?? 'comment rejected'))
       }
-      // union only what the server took - a rejected send must not leave phantoms -
-      // and only if the user is still LOOKING at that board (a slow response after a
-      // board switch must not leak events into the wrong client state); client ids
-      // keep the eventual SSE/poll echo idempotent either way
-      if (res.ok && get().board === board) union(events)
+      // union only what the server took - a rejected send must not leave phantoms; the
+      // store is global now, so an accepted write lands regardless of the viewed board
+      // (client ids keep the eventual SSE/poll echo idempotent)
+      if (res.ok) union(stamped)
       return res.ok
     },
 
@@ -125,27 +229,32 @@ export const useComments = create<CommentsState>((set, get) => {
         id: uuid(), ts: Date.now(), type: 'create', commentId: id,
         nodeKey: draft.nodeKey, frame: draft.frame, anchor: draft.anchor,
         author: me ?? undefined, body: body.trim(),
-      }])
+      }], draft.board)
       if (ok) set({ draft: null, active: id, commentMode: false })
     },
 
     async reply(threadId, body) { await get().replyOk(threadId, body) },
     async replyOk(threadId, body) {
       if (!body.trim()) return false
+      // route to the thread's ORIGIN log - the viewer may be reading it from another
+      // board (frame-scoped display); a reply landing in the wrong log would fork it
+      const origin = get().threads.find((t) => t.id === threadId)?.board
       return get().send([{
         id: uuid(), ts: Date.now(), type: 'reply', commentId: uuid(), parentId: threadId,
         author: get().me ?? undefined, body: body.trim(),
-      }])
+      }], origin)
     },
 
     async resolve(threadId, reopen = false) {
-      await get().send([{ id: uuid(), ts: Date.now(), type: reopen ? 'reopen' : 'resolve', commentId: threadId }])
+      const origin = get().threads.find((t) => t.id === threadId)?.board
+      await get().send([{ id: uuid(), ts: Date.now(), type: reopen ? 'reopen' : 'resolve', commentId: threadId }], origin)
     },
 
     setMode(on) { set({ commentMode: on, ...(on ? { show: true } : { draft: null }) }) },
     setShow(show) { set({ show }) },
+    setShowAnchor(showAnchor) { set({ showAnchor }) },
     setActive(active) { set({ active }) },
-    setDraft(draft) { set({ draft }) },
+    setDraft(draft) { set({ draft: draft ? { ...draft, board: draft.board ?? get().board ?? undefined } : null }) },
     dismissIdentity() { set({ needsIdentity: false }) },   // inviteToken survives dismissal - commenting later reopens the claim
 
     async signIn(email, password) {
@@ -162,7 +271,9 @@ export const useComments = create<CommentsState>((set, get) => {
     },
     async saveProfile(patch) {
       const res = await api('profile', patch)
-      if (res.ok) set({ me: res.data.user })
+      if (!res.ok) return res.data?.error ?? 'could not save - try again'
+      set({ me: res.data.user })
+      return null
     },
   }
 })
@@ -173,6 +284,9 @@ if (typeof window !== 'undefined' && (import.meta as any).env?.DEV) (window as a
 /** Initials + deterministic hue for avatarless authors - the whole fallback ladder. */
 export const avatarFallback = (author?: { email?: string; name?: string }) => {
   const name = author?.name || author?.email || '?'
+  // the unset dev default ("You", no account) renders in the COMMENT green - it's the mode's
+  // own hue, not a fake identity color, until a real profile is set
+  if (name === 'You' && !author?.email) return { initials: 'Y', hue: 131 }
   const initials = name.split(/\s+/).map((w) => w[0]).slice(0, 2).join('').toUpperCase()
   let h = 0
   for (const c of (author?.email || name)) h = (h * 31 + c.charCodeAt(0)) % 360

package/src/client/shell/hash.ts

@@ -1,5 +1,5 @@
 /**
- * Deep links (SPEC-M2 §3). Hash-based so any static host serves them and a URL copied
+ * Deep links. Hash-based so any static host serves them and a URL copied
  * from dev works verbatim on a published site. The URL is a projection of state - the
  * shell writes it as board/selection/play change and parses it once on boot; camera
  * intent is always fit semantics (fit-all / fit-selection), never raw coordinates.
@@ -7,7 +7,7 @@
  *   #/                     default board, fit all
  *   #/b/<board>            board, fit all
  *   #/b/<board>?n=k1,k2    board with nodes selected, camera fit to selection
- *   #/b/<board>?c=<id>     board with a comment thread open (SPEC-M3 §6)
+ *   #/b/<board>?c=<id>     board with a comment thread open
  *   #/i/<token>            invite link - opens the claim dialog with the token
  *   #/p/<board>?at=<frame-id>&device=<viewport>&theme=<theme>   play mode
  */