@marver-design/marver 0.7.0 → 0.8.0

package/src/client/shell/Play.tsx

@@ -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 ?? {}
@@ -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/FrameNode.tsx

@@ -1,6 +1,6 @@
 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 { registerFrame, unregisterFrame } from './frame-registry.ts'
@@ -10,6 +10,24 @@ import { registerLeanFrame, dropSnapshot, scheduleCapture, invalidateLean } from
 export const HEADER = 28
 const SNAP = 12
 
+/** Live Jam working shimmer (SPEC §10): 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
  * and never remounted - theme changes go through sh:set-theme, size changes are CSS only.
@@ -23,6 +41,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.
@@ -140,11 +160,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(() => {
@@ -287,11 +309,15 @@ export const FrameNode = memo(function FrameNode({ node }: { node: Node }) {
 
   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 (SPEC §10) - 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()}
@@ -348,6 +374,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/comments-store.ts

@@ -16,8 +16,10 @@ interface CommentsState {
   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
   needsIdentity: boolean              // published viewer tried to comment while signed out
@@ -25,6 +27,9 @@ interface CommentsState {
 
   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. */
+  poke(board?: string): void
   send(events: CommentEvent[]): Promise<boolean>
   create(body: string): Promise<void>
   reply(threadId: string, body: string): Promise<void>
@@ -32,11 +37,12 @@ interface CommentsState {
   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
 }
 
@@ -52,20 +58,49 @@ 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).
+  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
+        s.jamToast({
+          threadId, board, ts: e.ts,
+          preview: (e.body ?? '').replace(/\s+/g, ' ').slice(0, 90),
+          frame, frameTitle: entry?.title ?? frame, intent: entry?.intent,
+        })
+      }
+    })
+  }
   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]))
+    if (fresh.length) { set(derive([...get().events, ...fresh])); notifyAgent(fresh) }
   }
 
   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 = 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 ?? []) })
+    },
 
     async load(board) {
       set({ board })
       const me = await api('me')
-      if (me.ok) set({ me: me.data.user ?? null, local: !!me.data.local })
+      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 ?? []))
     },
@@ -144,6 +179,7 @@ export const useComments = create<CommentsState>((set, get) => {
 
     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 }) },
     dismissIdentity() { set({ needsIdentity: false }) },   // inviteToken survives dismissal - commenting later reopens the claim
@@ -162,7 +198,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 +211,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/icons.tsx

@@ -40,12 +40,16 @@ export const MonitorIcon = icon(<path d="M208,40H48A24,24,0,0,0,24,64V176a24,24,
 export const TvIcon = icon(<path d="M216,64H147.31l34.35-34.34a8,8,0,1,0-11.32-11.32L128,60.69,85.66,18.34A8,8,0,0,0,74.34,29.66L108.69,64H40A16,16,0,0,0,24,80V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V80A16,16,0,0,0,216,64Zm0,136H40V80H216V200Z" />)
 export const SignpostIcon = icon(<path d="M246,106.65,212.33,69.3A16,16,0,0,0,200.44,64H136V32a8,8,0,0,0-16,0V64H40A16,16,0,0,0,24,80v64a16,16,0,0,0,16,16h80v64a8,8,0,0,0,16,0V160h64.44a16,16,0,0,0,11.89-5.3L246,117.35A8,8,0,0,0,246,106.65ZM200.44,144H40V80H200.44l28.8,32Z" />)
 export const ParallelogramDuoIcon = icon(<><path d="M239.29,59.28l-64.8,144a8,8,0,0,1-7.3,4.72H24a8,8,0,0,1-7.3-11.28l64.8-144A8,8,0,0,1,88.81,48H232A8,8,0,0,1,239.29,59.28Z" opacity=".1" /><path d="M245.43,47.31A15.94,15.94,0,0,0,232,40H88.81a16,16,0,0,0-14.59,9.43l-64.8,144A16,16,0,0,0,24,216H167.19a16,16,0,0,0,14.59-9.43l64.8-144A16,16,0,0,0,245.43,47.31ZM167.19,200H24L88.81,56H232Z" /></>)
+/** The marver mark, SOLID fill (for the Marver avatar - a filled white parallelogram on accent). */
+export const ParallelogramFillIcon = icon(<path d="M245.43,47.31A15.94,15.94,0,0,0,232,40H88.81a16,16,0,0,0-14.59,9.43l-64.8,144A16,16,0,0,0,24,216H167.19a16,16,0,0,0,14.59-9.43l64.8-144A16,16,0,0,0,245.43,47.31Z" />)
 /** Sidebar trigger, custom in Phosphor 256-space: outer frame + panel pill -
  *  pill filled while the sidebar is open, hollow while collapsed. */
 export const PanelFilledIcon = icon(<><rect x="32" y="48" width="192" height="160" rx="32" fill="none" stroke="currentColor" strokeWidth="16" /><rect x="72" y="88" width="48" height="80" rx="24" /></>)
 
 /** Plain UI frame - the rectangle every non-content sidebar row leads with. */
 export const FrameRectIcon = icon(<rect x="40" y="52" width="176" height="152" rx="20" fill="none" stroke="currentColor" strokeWidth="16" />)
+export const UserIcon = icon(<path d="M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8c18.84-32.56,52.14-52,89.07-52s70.23,19.44,89.07,52a8,8,0,1,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z" />)
+export const PencilSimpleIcon = icon(<path d="M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM92.69,208H48V163.31l88-88L180.69,120ZM192,108.68,147.31,64l24-24L216,84.68Z" />)
 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" /></>)
 

package/src/client/shell/mentions.ts

@@ -0,0 +1,18 @@
+/**
+ * @marver mention parsing (SPEC-live-jam §1) - pure, so the rendering is unit-testable without
+ * pulling the whole comment UI (and its virtual:sh-config) into the test.
+ */
+
+/** Split a comment body into plain text and @marver mention segments (case-insensitive, word-bounded). */
+export function parseMentions(body: string): { text: string; mention: boolean }[] {
+  const out: { text: string; mention: boolean }[] = []
+  let last = 0
+  for (const m of body.matchAll(/@marver\b/gi)) {
+    const i = m.index ?? 0
+    if (i > last) out.push({ text: body.slice(last, i), mention: false })
+    out.push({ text: m[0], mention: true })
+    last = i + m[0].length
+  }
+  if (last < body.length) out.push({ text: body.slice(last), mention: false })
+  return out.length ? out : [{ text: body, mention: false }]
+}

package/src/client/shell/store.ts

@@ -33,7 +33,10 @@ export interface Node {
   sizeMode?: 'auto' | 'manual' | 'device'
   status: 'loading' | 'ready' | 'error'; error?: string; missing?: boolean
 }
-export interface Toast { id: number; text: string }
+/** A Live Jam notification (SPEC-live-jam §9): a persistent bottom-right glass pill for a Marver
+ *  reply. Frame-first: the FRAME is the news (icon + title, blue), Marver + preview below. */
+export interface JamNote { threadId: string; board: string; preview: string; ts: number; frame?: string; frameTitle?: string; intent?: string }
+export interface Toast { id: number; text: string; jam?: JamNote }
 
 export const CONFIG: { viewports: Record<string, { width: number; height: number }>; themes: string[]; zoomSpeed?: number; noTheme: boolean; setup?: boolean; projectName?: string } = shConfig
 
@@ -169,6 +172,15 @@ interface State {
   setTheme(theme: string): void
   runTidy(): void
   toast(text: string): void
+  jamToast(note: JamNote): void
+  dismissToast(id: number): void
+  clearJamToasts(): void
+  /** Frames Marver is editing right now (Live Jam presence, SPEC §10) - drives the working glow. */
+  working: string[]
+  /** When each working frame's job started (ms epoch) - phases the animations so parallel
+   *  frames never pulse in sync. */
+  workingSince: Record<string, number>
+  setWorking(frames: string[]): void
   spawn(frameId: string): Node | null
   save(): Promise<boolean>
 }
@@ -420,7 +432,7 @@ export const useStore = create<State>((set, get) => {
   return {
     manifest: null, nodes: [], selection: [], interact: null, viewTheme: initialViewTheme(), play: null, gesture: false, laser: false,
     board: DATA?.default ?? 'all-scenes', boardAuto: (DATA?.default ?? 'all-scenes') === 'all-scenes', deviceView: null, sceneRows: null, layout: null, layoutRaw: undefined, baseLayout: null,
-    panelOpen: true, scale: 1, toasts: [], boardHash: null, dirty: false,
+    panelOpen: true, scale: 1, toasts: [], working: [], workingSince: {}, boardHash: null, dirty: false,
     pendingFrameRevisions: {}, externalLeases: {}, playUpdateRevision: null, playNav: 0,
 
     async boot() {
@@ -833,6 +845,22 @@ export const useStore = create<State>((set, get) => {
       set((s) => ({ toasts: [...s.toasts, { id, text }] }))
       setTimeout(() => set((s) => ({ toasts: s.toasts.filter((t) => t.id !== id) })), 4000)
     },
+    /** A Live Jam reply notification: persistent (no auto-dismiss), one per thread (a newer reply
+     *  supersedes), capped so the stack stays small. */
+    jamToast(note) {
+      const id = ++toastSeq
+      set((s) => ({ toasts: [...s.toasts.filter((t) => t.jam?.threadId !== note.threadId), { id, text: 'Marver replied', jam: note }].slice(-8) }))
+    },
+    dismissToast(id) { set((s) => ({ toasts: s.toasts.filter((t) => t.id !== id) })) },
+    clearJamToasts() { set((s) => ({ toasts: s.toasts.filter((t) => !t.jam) })) },
+    setWorking(frames) {
+      // preserve each frame's original start time; stamp now() only for newly-working frames -
+      // the start phases the working animations so parallel frames never pulse in sync
+      const prev = get().workingSince
+      const workingSince: Record<string, number> = {}
+      for (const f of frames) workingSince[f] = prev[f] ?? Date.now()
+      set({ working: frames, workingSince })
+    },
     spawn(frameId) {
       const { manifest, nodes, deviceView, baseLayout } = get()
       const f = manifest?.frames.find((x) => x.id === frameId)