@marver-design/marver 0.6.0 → 0.8.0

package/src/client/shell/Toolbar.tsx

@@ -0,0 +1,201 @@
+/**
+ * Shared top-right toolbar pieces (prototype-review Phase 1). The canvas pill and the
+ * prototype pill render the SAME controls so they never drift: laser / comment buttons
+ * (store-level, zero coupling), a Hide-UI toggle (one shared body class), and controlled
+ * Device / Theme dropdowns whose wiring stays local to each surface (canvas mutates
+ * selection/board; play mutates play.device/theme). usePopover + Popover live here too so
+ * both App and Play share the popover chrome.
+ */
+import { createPortal } from 'react-dom'
+import { useEffect, useRef, useState, type ReactNode } from 'react'
+import { useStore, CONFIG, cap } from './store.ts'
+import { useComments } from './comments-store.ts'
+import { Tip } from './Tip.tsx'
+import { CaretIcon, CheckIcon, CommentIcon, DevicesIcon, EyeSlashIcon, FrameCornersIcon, LaserIcon, MoonIcon, SunIcon, deviceIcon } from './icons.tsx'
+
+const commentsStore = () => useComments.getState()
+
+/** Shared popover machinery: trigger position, outside-click close, portal to the app
+ *  root (glass never nests - a nested backdrop-filter cannot sample the page). */
+export function usePopover() {
+  const [open, setOpen] = useState(false)
+  const [pos, setPos] = useState({ left: 0, top: 0 })
+  const boxRef = useRef<HTMLDivElement>(null)
+  const menuRef = useRef<HTMLDivElement>(null)
+  const toggle = () => {
+    if (!open && boxRef.current) {
+      const r = boxRef.current.getBoundingClientRect()
+      setPos({ left: r.left, top: r.bottom + 10 })
+    }
+    setOpen(!open)
+  }
+  useEffect(() => {
+    if (!open) return
+    const close = (e: PointerEvent) => {
+      const t = e.target as globalThis.Node
+      if (!boxRef.current?.contains(t) && !menuRef.current?.contains(t)) setOpen(false)
+    }
+    window.addEventListener('pointerdown', close)
+    return () => window.removeEventListener('pointerdown', close)
+  }, [open])
+  return { open, setOpen, pos, boxRef, menuRef, toggle }
+}
+
+export function Popover({ pop, children, dark }: { pop: ReturnType<typeof usePopover>; children: ReactNode; dark?: boolean }) {
+  const app = document.querySelector('.sh-app')
+  if (!pop.open || !app) return null
+  return createPortal(
+    <div className={`sh-menu${dark ? ' sh-menu-dark' : ''}`} ref={pop.menuRef} style={{ left: pop.pos.left, top: pop.pos.top }}>{children}</div>,
+    app,
+  )
+}
+
+// ---- Hide UI: one shared, binary body class (canvas + prototype) ---------------------
+// The state IS the body class - one source of truth for both pills, so they can never
+// desync. Not persisted, so a page refresh always restores the chrome (the safety net
+// for a forgotten shortcut). toggleHideUI is the only writer; useHideUI subscribes.
+
+const hideListeners = new Set<() => void>()
+export const isHideUI = () => document.body.classList.contains('sh-hide-ui')
+export function toggleHideUI() {
+  document.body.classList.toggle('sh-hide-ui', !isHideUI())
+  hideListeners.forEach((f) => f())
+}
+export function useHideUI() {
+  const [on, setOn] = useState(isHideUI)
+  useEffect(() => {
+    const f = () => setOn(isHideUI())
+    hideListeners.add(f)
+    return () => { hideListeners.delete(f) }
+  }, [])
+  return on
+}
+
+// ---- 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={<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)
+      }}><LaserIcon size={16} /></button>
+    </Tip>
+  )
+}
+
+/** 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={<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)
+        c.setMode(!c.commentMode)
+        useStore.getState().toast(c.commentMode ? 'comment mode off' : 'comment mode - click an element in a frame')
+      }}><CommentIcon size={16} /></button>
+    </Tip>
+  )
+}
+
+/** Hide-UI toggle - the dedicated binary control (no auto-fade, no hover-reveal). Its
+ *  tooltip carries the way back; H is the shortcut, wired per-surface. */
+export function HideUIButton() {
+  const on = useHideUI()
+  return (
+    <Tip side="bottom" label={<><b>Hide all UI</b><span>press H to reveal</span></>}>
+      <button className={`sh-pill-btn${on ? ' on' : ''}`} onClick={toggleHideUI}><EyeSlashIcon size={16} /></button>
+    </Tip>
+  )
+}
+
+/** Controlled device dropdown. `value` is the active device name ('fill' allowed when
+ *  includeFill), null = default/mixed. The trigger + menu chrome is shared; the adapter
+ *  owns what select does. */
+export function DevicePicker({ value, onSelect, includeDefault, includeFill, hint, dark }: {
+  value: string | null
+  onSelect: (name: string | null) => void
+  includeDefault?: boolean
+  includeFill?: boolean
+  hint?: ReactNode
+  dark?: boolean
+}) {
+  const pop = usePopover()
+  const entries = Object.entries(CONFIG.viewports)
+  const pick = (name: string | null) => { onSelect(name); pop.setOpen(false) }
+  const triggerIcon = value === 'fill' ? <FrameCornersIcon size={16} /> : deviceIcon(value, 16)
+  return (
+    <div className="sh-theme" ref={pop.boxRef}>
+      <Tip side="bottom" label={<><b>Device view</b>{hint && <span>{hint}</span>}</>}>
+        <button className="sh-pill-btn" onClick={pop.toggle}>
+          {triggerIcon}
+          <CaretIcon size={11} style={{ transform: pop.open ? 'rotate(180deg)' : undefined }} />
+        </button>
+      </Tip>
+      <Popover pop={pop} dark={dark}>
+        {includeDefault && <>
+          <button onClick={() => pick(null)}>
+            <DevicesIcon size={15} /><span>Default</span><kbd>0</kbd>
+            {value === null && <CheckIcon size={13} className="chk" />}
+          </button>
+          <i className="div" />
+        </>}
+        {entries.map(([name, vp], i) => (
+          <button key={name} onClick={() => pick(name)} title={`${vp.width} × ${vp.height}`}>
+            {deviceIcon(name)}<span>{cap(name)}</span><kbd>{i < 9 ? i + 1 : ''}</kbd>
+            {value === name && <CheckIcon size={13} className="chk" />}
+          </button>
+        ))}
+        {includeFill && <button onClick={() => pick('fill')}>
+          <FrameCornersIcon size={15} /><span>Fill window</span><kbd>{entries.length + 1}</kbd>
+          {value === 'fill' && <CheckIcon size={13} className="chk" />}
+        </button>}
+      </Popover>
+    </div>
+  )
+}
+
+/** Controlled theme dropdown. `value` drives the trigger (the level the picker acts on -
+ *  the scope MAJORITY on the canvas); `checked` is the menu tick and can differ (undefined
+ *  = tick `value`; null = tick nothing, e.g. a mixed selection). onSelect owns the write. */
+export function ThemePicker({ value, checked, onSelect, hint, dark }: { value: string; checked?: string | null; onSelect: (t: string) => void; hint?: ReactNode; dark?: boolean }) {
+  const pop = usePopover()
+  const pick = (t: string) => { onSelect(t); pop.setOpen(false) }
+  const tick = checked === undefined ? value : checked
+  return (
+    <div className="sh-theme" ref={pop.boxRef}>
+      <Tip side="bottom" label={<><b>Theme</b>{hint && <span>{hint}</span>}</>}>
+        <button className="sh-pill-btn" onClick={pop.toggle}>
+          {value === 'dark' ? <MoonIcon size={16} /> : <SunIcon size={16} />}
+          <CaretIcon size={11} style={{ transform: pop.open ? 'rotate(180deg)' : undefined }} />
+        </button>
+      </Tip>
+      <Popover pop={pop} dark={dark}>
+        {CONFIG.themes.map((t) => (
+          <button key={t} onClick={() => pick(t)}>
+            {t === 'dark' ? <MoonIcon size={15} /> : <SunIcon size={15} />}
+            <span>{t}</span>
+            {tick === t && <CheckIcon size={13} className="chk" />}
+          </button>
+        ))}
+      </Popover>
+    </div>
+  )
+}

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.
@@ -81,7 +101,16 @@ export const FrameNode = memo(function FrameNode({ node }: { node: Node }) {
     if (node.status !== 'ready' || node.missing) return
     const iframe = iframeRef.current
     if (!iframe) return
-    const t = setTimeout(() => scheduleCapture(node.key, iframe, { sourceRevision: String(node.nav ?? 0), theme: node.theme }), 450)
+    const t = setTimeout(() => {
+      // never re-admit a cover while this frame hosts an open thread / draft: the live app
+      // must stay visible (its highlight updates in real time). A status/theme change would
+      // 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
+      if (hosting) return
+      scheduleCapture(node.key, iframe, { sourceRevision: String(node.nav ?? 0), theme: node.theme })
+    }, 450)
     return () => clearTimeout(t)
     // node.theme IS a dep: baked content (mermaid SVG) can't be re-themed by the cover's attribute
     // flip, so a theme change re-captures after the live frame re-renders (key includes theme).
@@ -111,16 +140,33 @@ 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)) || s.draft?.nodeKey === node.key)
+    (!!s.active && s.threads.some((t) => t.id === s.active && t.nodeKey === node.key && !t.resolved)) || 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
+  // mode ends and either bakes a stale highlight or hides the live one. Mirror the interact
+  // rail: drop the cover while hosting, rebuild a fresh lean once the card closes (the
+  // highlight is cleared by then, so the recapture is clean).
+  const prevHostsCard = useRef(hostsCard)
+  useEffect(() => {
+    if (prevHostsCard.current === hostsCard) return
+    const wasHosting = prevHostsCard.current
+    prevHostsCard.current = hostsCard
+    if (hostsCard) invalidateLean(node.key)
+    else if (wasHosting && node.status === 'ready' && iframeRef.current)
+      scheduleCapture(node.key, iframeRef.current, { sourceRevision: String(node.nav ?? 0), theme: node.theme }, true)
+  }, [hostsCard, node.key, node.nav, node.theme, node.status])
   useEffect(() => {
     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(() => {
@@ -263,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()}
@@ -324,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

@@ -30,6 +30,7 @@ export const CheckIcon = icon(<path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l
 export const ColumnsIcon = icon(<path d="M104,32H64A16,16,0,0,0,48,48V208a16,16,0,0,0,16,16h40a16,16,0,0,0,16-16V48A16,16,0,0,0,104,32Zm0,176H64V48h40ZM192,32H152a16,16,0,0,0-16,16V208a16,16,0,0,0,16,16h40a16,16,0,0,0,16-16V48A16,16,0,0,0,192,32Zm0,176H152V48h40Z" />)
 export const ArrowUpIcon = icon(<path d="M205.66,117.66a8,8,0,0,1-11.32,0L136,59.31V216a8,8,0,0,1-16,0V59.31L61.66,117.66a8,8,0,0,1-11.32-11.32l72-72a8,8,0,0,1,11.32,0l72,72A8,8,0,0,1,205.66,117.66Z" />)
 export const CommentIcon = icon(<path d="M132,24A100.11,100.11,0,0,0,32,124v84a16,16,0,0,0,16,16h84a100,100,0,0,0,0-200Zm0,184H48V124a84,84,0,1,1,84,84Z" />)
+export const EyeSlashIcon = icon(<path d="M53.92,34.62A8,8,0,1,0,42.08,45.38L61.32,66.55C25,88.84,9.38,123.2,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208a127.11,127.11,0,0,0,52.07-11.07l22,24.21a8,8,0,1,0,11.84-10.76Zm47.33,75.84,41.67,45.85a32,32,0,0,1-41.67-45.85ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.47,133.47,0,0,1,25,128c4.69-8.79,19.66-33.39,47.35-49.38l18,19.75a48,48,0,0,0,63.66,70l14.73,16.2A112,112,0,0,1,128,192Zm6-95.43a8,8,0,0,1,3-15.72,48.16,48.16,0,0,1,38.77,42.64,8,8,0,0,1-7.22,8.71,6.39,6.39,0,0,1-.75,0,8,8,0,0,1-8-7.26A32.09,32.09,0,0,0,134,96.57Zm113.28,34.69c-.42.94-10.55,23.37-33.36,43.8a8,8,0,1,1-10.67-11.92A132.77,132.77,0,0,0,231,128a133.15,133.15,0,0,0-23.12-30.77C185.67,75.19,158.78,64,128,64a118.37,118.37,0,0,0-19.36,1.57A8,8,0,1,1,106,49.79,134,134,0,0,1,128,48c34.88,0,66.57,13.26,91.66,38.35,18.83,18.83,27.3,37.62,27.65,38.41A8,8,0,0,1,247.31,131.26Z" />)
 export const CheckSquareOffsetIcon = icon(<path d="M224,48V208a16,16,0,0,1-16,16H136a8,8,0,0,1,0-16h72V48H48v96a8,8,0,0,1-16,0V48A16,16,0,0,1,48,32H208A16,16,0,0,1,224,48ZM125.66,154.34a8,8,0,0,0-11.32,0L64,204.69,45.66,186.34a8,8,0,0,0-11.32,11.32l24,24a8,8,0,0,0,11.32,0l56-56A8,8,0,0,0,125.66,154.34Z" />)
 export const DevicesIcon = icon(<path d="M224,72H208V64a24,24,0,0,0-24-24H40A24,24,0,0,0,16,64v96a24,24,0,0,0,24,24H152v8a24,24,0,0,0,24,24h48a24,24,0,0,0,24-24V96A24,24,0,0,0,224,72ZM40,168a8,8,0,0,1-8-8V64a8,8,0,0,1,8-8H184a8,8,0,0,1,8,8v8H176a24,24,0,0,0-24,24v72Zm192,24a8,8,0,0,1-8,8H176a8,8,0,0,1-8-8V96a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8Zm-96,16a8,8,0,0,1-8,8H88a8,8,0,0,1,0-16h40A8,8,0,0,1,136,208Zm80-96a8,8,0,0,1-8,8H192a8,8,0,0,1,0-16h16A8,8,0,0,1,216,112Z" />)
 export const DeviceMobileIcon = icon(<path d="M176,16H80A24,24,0,0,0,56,40V216a24,24,0,0,0,24,24h96a24,24,0,0,0,24-24V40A24,24,0,0,0,176,16ZM72,64H184V192H72Zm8-32h96a8,8,0,0,1,8,8v8H72V40A8,8,0,0,1,80,32Zm96,192H80a8,8,0,0,1-8-8v-8H184v8A8,8,0,0,1,176,224Z" />)
@@ -39,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)