@marver-design/marver 0.8.0 → 0.8.1

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,8 +11,8 @@ 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)
@@ -21,16 +21,20 @@ interface CommentsState {
   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
-  /** Fetch the active board's log NOW (Live Jam: the daemon just wrote a reply) - same union path
-   *  as the poll, so dedup + the reply notification behave identically. */
+  /** 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
-  send(events: CommentEvent[]): Promise<boolean>
+  /** `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>
@@ -57,34 +61,87 @@ const api = async (path: string, body?: unknown) => {
 }
 
 export const useComments = create<CommentsState>((set, get) => {
-  const derive = (events: CommentEvent[]) => ({ events, threads: replay(events) })
-  // Live Jam (SPEC §9): a Marver reply that arrives AFTER the initial load (load() baselines via
-  // derive, so pre-existing replies never notify) raises a persistent bottom-right pill. Keyed on
-  // the event id via `union`'s fresh filter, so it fires exactly once; active-board only by
-  // construction (union runs against the active board's poll).
+  // 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 board = get().board ?? ''
       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 frame = get().threads.find((t) => t.id === threadId)?.frame
-        const entry = frame ? s.manifest?.frames.find((f) => f.id === frame) : undefined
+        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, ts: e.ts,
+          threadId, board: t?.board ?? e.board ?? get().board ?? '', ts: e.ts,
           preview: (e.body ?? '').replace(/\s+/g, ' ').slice(0, 90),
-          frame, frameTitle: entry?.title ?? frame, intent: entry?.intent,
+          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])); notifyAgent(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 {
@@ -92,17 +149,24 @@ export const useComments = create<CommentsState>((set, get) => {
     commentMode: false, show: true, showAnchor: true, active: null, draft: null, needsIdentity: false, inviteToken: null,
 
     poke(board) {
-      const b = get().board
-      if (!b || (board && board !== b)) return   // only the active board renders; others load on switch
-      void api(`comments/${b}`).then((r) => { if (r.ok && get().board === b) union(r.data.events ?? []) })
+      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.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 })
-      const res = await api(`comments/${board}`)
-      if (res.ok && get().board === board) set(derive(res.data.events ?? []))
+      await fetchAll()
     },
 
     /** Liveness: SSE on the published serve; dev has no event rail (its sync loop
@@ -111,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) })
@@ -125,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)
@@ -133,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)
@@ -144,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
     },
 
@@ -160,28 +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) {

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
  */

package/src/client/shell/icons.tsx

@@ -53,7 +53,7 @@ export const PencilSimpleIcon = icon(<path d="M227.31,73.37,182.63,28.68a16,16,0
 export const LinkIcon = icon(<path d="M137.54,186.36a8,8,0,0,1,0,11.31l-9.94,10A56,56,0,0,1,48.38,128.4L72.5,104.28A56,56,0,0,1,149.31,102a8,8,0,1,1-10.64,12,40,40,0,0,0-54.85,1.63L59.7,139.72a40,40,0,0,0,56.58,56.58l9.94-9.94A8,8,0,0,1,137.54,186.36Zm70.08-138a56.08,56.08,0,0,0-79.22,0l-9.94,9.95a8,8,0,0,0,11.32,11.31l9.94-9.94a40,40,0,0,1,56.58,56.58L172.18,140.4a40,40,0,0,1-54.85,1.6,8,8,0,1,0-10.64,12,56,56,0,0,0,76.81-2.26l24.12-24.12A56.08,56.08,0,0,0,207.62,48.38Z" />)
 export const LaserIcon = icon(<><circle cx="128" cy="128" r="56" fill="none" stroke="currentColor" strokeWidth="16" /><path d="M128 24 V56 M128 200 V232 M24 128 H56 M200 128 H232" fill="none" stroke="currentColor" strokeWidth="16" strokeLinecap="round" /><circle cx="128" cy="128" r="12" /></>)
 
-/* Content-frame intent glyphs (SPEC-026), custom in the same 256-space. */
+/* Content-frame intent glyphs, custom in the same 256-space. */
 export const DiagramShapeIcon = icon(<><rect x="28" y="36" width="88" height="64" rx="14" fill="none" stroke="currentColor" strokeWidth="16" /><rect x="140" y="156" width="88" height="64" rx="14" fill="none" stroke="currentColor" strokeWidth="16" /><path d="M116 68 H184 V156" fill="none" stroke="currentColor" strokeWidth="16" strokeLinecap="round" strokeLinejoin="round" /></>)
 export const SpecDocIcon = icon(<><path d="M44 48 H180 M44 96 H212 M44 144 H212 M44 192 H140" fill="none" stroke="currentColor" strokeWidth="16" strokeLinecap="round" /></>)
 export const MoodboardIcon = icon(<><rect x="32" y="48" width="192" height="160" rx="20" fill="none" stroke="currentColor" strokeWidth="16" /><circle cx="96" cy="104" r="18" /><path d="M56 192 L112 128 L150 168 L178 140 L200 164 V192 Z" /></>)

package/src/client/shell/keys.ts

@@ -0,0 +1,39 @@
+/**
+ * Node-key identity for comments. Board nodes the file does not key yet used to
+ * get a RANDOM key per load - and comments anchor to node keys, so every comment
+ * created on a never-saved board orphaned on the next mount: dev board switches
+ * and reloads, and every single visit on a published canvas (which can never
+ * save keys back). Deriving the key from board + frame + occurrence makes the
+ * same board file yield the same keys in every session and for every viewer.
+ * Keys stored in the file still win; this only names the unnamed.
+ */
+
+/** 64 bits from two independent 32-bit passes (djb2-xor with different seeds):
+ *  a single 32-bit hash has practical collisions, and a collision here would
+ *  make key assignment depend on which OTHER nodes happen to be present. */
+const h32 = (s: string, seed: number): number => {
+  let h = seed
+  for (let i = 0; i < s.length; i++) h = (((h << 5) + h) ^ s.charCodeAt(i)) >>> 0
+  return h >>> 0
+}
+
+export function stableNodeKey(board: string, frame: string, salt: number): string {
+  const s = `${board}|${frame}|${salt}`
+  return 'n_' + h32(s, 5381).toString(36) + h32(s, 52711).toString(36)
+}
+
+/**
+ * The ONE answer to "which node renders this thread": the stored anchor when that
+ * node still exists AND still shows the thread's frame, else the first node showing
+ * the frame (adoption - a stale key from a past session, a board rewrite, a deleted
+ * copy must degrade to the frame, never to invisible), else null (frame not on this
+ * board). Every consumer - pin layer, reveal, the hosting checks - must agree, or
+ * a card renders on one node while another claims the hosting behavior.
+ */
+export function threadHostKey(
+  t: { nodeKey?: string; frame?: string },
+  nodes: readonly { key: string; frame: string }[],
+): string | null {
+  if (t.nodeKey && nodes.some((n) => n.key === t.nodeKey && n.frame === t.frame)) return t.nodeKey
+  return nodes.find((n) => n.frame === t.frame)?.key ?? null
+}

package/src/client/shell/mentions.ts

@@ -1,5 +1,5 @@
 /**
- * @marver mention parsing (SPEC-live-jam §1) - pure, so the rendering is unit-testable without
+ * @marver mention parsing - pure, so the rendering is unit-testable without
  * pulling the whole comment UI (and its virtual:sh-config) into the test.
  */
 

package/src/client/shell/perf.ts

@@ -1,7 +1,7 @@
 /**
  * B0.4: canvas performance instrumentation. Zero cost unless explicitly enabled.
  *
- * Enabled in dev, or in ANY build (incl. packed/published - the SPEC-M4 gate is dev AND
+ * Enabled in dev, or in ANY build (incl. packed/published - the gate is dev AND
  * publish) via `?mvperf` in the URL or `localStorage.mvPerf==='1'`. So publish-side gate
  * measurement is possible without shipping an always-on probe.
  *