@marver-design/marver 0.16.0 → 0.17.0

package/docs/live-jam.md

@@ -89,19 +89,31 @@ resolves a thread; you do that after reviewing.
 
 The missing sense that no-shell used to cost - "does my frame actually RENDER?" - is a
 server capability instead, rendered in the machine's own headless Chrome (no bundled
-browser, CDP over Node's built-in WebSocket) and written as a PNG under
+browser; CDP over Chrome's debugging pipe, so the browser lives exactly as long as the
+shot) and written as a PNG under
 `design/.local/shots/`. Two transports reach it, because the no-shell jail rules out the
 obvious one:
 
 - **The file-drop inbox** (works for every agent, including Claude Code, which has no shell
   and whose WebFetch refuses localhost). The agent writes
-  `design/.local/shots/<slug>.request.json` with `{"frame":"<id>","theme":"<t>"}`; the dev
-  server renders and writes `<slug>.result.json` with the PNG path or an error, which the
-  agent Reads.
-- **`npx marver shot <frame> [--scale 1-4]`** / `GET /api/shot?frame=<id>&theme=<t>&scale=<n>`
-  for humans and shell-ful agents - the same renderer, one line. Default 2x; `--scale 4` for a
-  print-quality still (a slide comes back 5120×2880). A frame too tall for the asked scale steps
-  down and says so in `note`; the file name carries the scale actually used (`…@4x.png`).
+  `design/.local/shots/<slug>.request.json` with `{"frame":"<id>","theme":"<t>"}` - or
+  `{"scene":"<name>"}`, `{"frames":[...]}`, `{"all":true}` for a batch; the dev server renders
+  and writes `<slug>.result.json` with the PNG path or an error (a batch: `results`, one entry
+  per frame), which the agent Reads.
+- **`npx marver shot <frame ...> | --scene <name> | --all [--scale 1-4] [--json]`** /
+  `GET /api/shot?frame=<id>&theme=<t>&scale=<n>` / `POST /api/shots {frames|scene|all, theme,
+  scale}` for humans and shell-ful agents - the same renderer, one line. A batch is ONE
+  operation: one headless browser, `MARVER_SHOT_CONCURRENCY` frames at a time inside it
+  (default up to 6, sized to the machine), so a scene costs about what a frame does. Default
+  2x; `--scale 4` for a print-quality still (a slide comes back 5120×2880). A frame too tall
+  for the asked scale steps down and says so in `note`; the file name carries the scale
+  actually used (`…@4x.png`). A frame that ran out of settle budget still ships, marked
+  `unsettled` with a note.
+- **The browser's life.** The headless Chrome exists only while an operation runs - it is
+  driven over Chrome's own debugging pipe, so it dies with the dev server however the server
+  dies (Ctrl-C, a closed terminal, `kill -9`), and none is kept between shots. `MARVER_CHROME`
+  picks the binary; pointing it at a Chrome for Testing or Chromium build makes the shot
+  browser a different app from your own, which some people prefer on macOS.
   The canvas's **copy as image** (`i` / `⇧i`, the images-square toolbar button) is this same
   renderer with `format=png`, so what a designer pastes and what an agent shoots is one picture.
 

package/docs/publish.md

@@ -33,8 +33,8 @@ opens the same view on the published site, as long as its board and frame shippe
 directory in full (the `--boards` filter covers frames, not public assets). A flow you
 publish must have all its `data-goto` targets on a published board. Sidebar folders ship
 only around published boards (a folder with nothing published never reaches the bundle),
-and `description`s ship only for published things - the project's, the published boards',
-their folders', scenes' and frames'.
+and `title`s and `description`s ship only for published things - the project's, the
+published boards', their folders', scenes' and frames'.
 
 ## Who can open your canvas
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marver-design/marver",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "The agent-native design canvas. A design/ folder, one command, a canvas of live frames built from your repo's real components - comment @marver and your own coding agent does the work. The tool ships no AI.",
   "type": "module",
   "private": false,

package/src/client/shell/App.tsx

@@ -1,5 +1,5 @@
 import { Component, useEffect, useRef, useState, type MouseEvent as ReactMouseEvent, type ReactNode } from 'react'
-import { useStore, CONFIG, LOCKED_SHELL, PUBLISHED, SOURCE_REVEALED, boardLabel, boardFrames, cap, humanize, fetchBoardNames, hydrateBoardPolicy, landingMode, playsAsSlides, type FrameEntry } from './store.ts'
+import { useStore, CONFIG, LOCKED_SHELL, PUBLISHED, SOURCE_REVEALED, boardLabel, boardFrames, cap, humanize, fetchBoardNames, hydrateBoardPolicy, landingMode, playsAsSlides, sceneLabel, type FrameEntry } from './store.ts'
 import { BoardList } from './BoardList.tsx'
 import { ContextMenu, copyToClipboard, framePath, useContextMenu, type MenuItem } from './ContextMenu.tsx'
 import { Tip } from './Tip.tsx'
@@ -8,7 +8,8 @@ import { animateLayout, Canvas, canvasCtl } from './canvas/Canvas.tsx'
 import { frameByWindow } from './canvas/frame-registry.ts'
 import { enterFocus, enterPlay, enterSlides, playCtl, PlayOverlay } from './Play.tsx'
 import { bootHash, parseHash, writeHash } from './hash.ts'
-import { CaretIcon, CheckIcon, ColumnsIcon, FrameRectIcon, ImagesSquareIcon, IntentGlyph, MoonIcon, PanelFilledIcon, PanelHollowIcon, ParallelogramDuoIcon, ParallelogramFillIcon, PlayIcon, SignpostIcon, SlideFrameIcon, SunIcon, VariantsIcon, XIcon, deviceIcon } from './icons.tsx'
+import { CaretIcon, CheckIcon, ColumnsIcon, FrameRectIcon, ImagesSquareIcon, IntentGlyph, MoonIcon, PanelFilledIcon, PanelHollowIcon, ParallelogramDuoIcon, ParallelogramFillIcon, PencilSimpleIcon, PlayIcon, SignpostIcon, SlideFrameIcon, SunIcon, VariantsIcon, XIcon, deviceIcon } from './icons.tsx'
+import { humanize as slugLabel, readTitle } from '../../shared/board-tree.ts'
 import { CommentsController, revealThread } from './Comments.tsx'
 import { poweredByUrl } from '../../shared/utm.ts'
 import { avatarFallback, useComments } from './comments-store.ts'
@@ -19,17 +20,31 @@ const commentsStore = () => useComments.getState()
 let booted = false                             // survives Fast Refresh; see the boot effect
 
 /** One collapsible scene group in the sidebar. `held` marks a scene that contains a
- *  selected frame - a quiet secondary wash so ancestry survives collapsing the group. */
-function SceneGroup({ name, count, held, onPick, onContextMenu, children }: { name: string; count: number; held: boolean; onPick?: () => void; onContextMenu?: (e: ReactMouseEvent) => void; children: ReactNode }) {
+ *  selected frame - a quiet secondary wash so ancestry survives collapsing the group.
+ *  `renaming` swaps the label for an input: the scene's TITLE (its brief's front matter) -
+ *  the directory never moves from here. */
+function SceneGroup({ name, label, count, held, renaming, onRename, onPick, onContextMenu, children }: { name: string; label: string; count: number; held: boolean; renaming?: boolean; onRename?: (title: string | null) => void; onPick?: () => void; onContextMenu?: (e: ReactMouseEvent) => void; children: ReactNode }) {
   const [open, setOpen] = useState(true)
+  const done = useRef(false)   // Enter then blur: one commit
+  if (renaming) { done.current = false }
+  const finish = (v: string | null) => { if (done.current) return; done.current = true; onRename?.(v) }
   return (
     <div>
-      <button className={`it${held ? ' held' : ''}`} onClick={() => setOpen(!open)} onContextMenu={onContextMenu}>
-        <CaretIcon size={11} className="tw" style={{ transform: open ? undefined : 'rotate(-90deg)' }} />
-        {/* the NAME selects every frame in the scene; the caret/row still collapses */}
-        <span onClick={(e) => { if (!onPick) return; e.stopPropagation(); onPick() }}>{humanize(name) || '(root)'}</span>
-        <small>{count}</small>
-      </button>
+      {renaming ? (
+        <div className="it editing">
+          <CaretIcon size={11} className="tw" style={{ transform: open ? undefined : 'rotate(-90deg)' }} />
+          <input autoFocus defaultValue={label} spellCheck={false} onFocus={(e) => e.currentTarget.select()}
+            onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); finish(e.currentTarget.value) } else if (e.key === 'Escape') { e.preventDefault(); finish(null) } }}
+            onBlur={(e) => finish(e.currentTarget.value)} />
+        </div>
+      ) : (
+        <button className={`it${held ? ' held' : ''}`} onClick={() => setOpen(!open)} onContextMenu={onContextMenu}>
+          <CaretIcon size={11} className="tw" style={{ transform: open ? undefined : 'rotate(-90deg)' }} />
+          {/* the NAME selects every frame in the scene; the caret/row still collapses */}
+          <span onClick={(e) => { if (!onPick) return; e.stopPropagation(); onPick() }}>{label || '(root)'}</span>
+          <small>{count}</small>
+        </button>
+      )}
       {open && children}
     </div>
   )
@@ -325,6 +340,7 @@ export function App() {
   const { boot, applyManifest, togglePanel, select, setInteract, runTidy, toast, spawn } = useStore.getState()
   const [pillOpen, setPillOpen] = useState(true)
   const cm = useContextMenu()   // shared sidebar right-click menu (boards + scenes)
+  const [sceneNaming, setSceneNaming] = useState<string | null>(null)   // the scene whose title is being edited inline
 
   // boot honors the deep link: board before load, play mode after it.
   // Selection + camera intent are restored by the Canvas boot effect. The module-level
@@ -431,9 +447,10 @@ export function App() {
     return () => { window.removeEventListener('popstate', onPop); window.removeEventListener('hashchange', onPop) }
   }, [])
 
-  // page title follows the open board
+  // page title follows the open board (and its title, when one is set)
   const board = useStore((s) => s.board)
-  useEffect(() => { document.title = board ? `${boardLabel(board)} - Marver` : 'Marver' }, [board])
+  const titles = useStore((s) => s.boardTitles)
+  useEffect(() => { document.title = board ? `${boardLabel(board)} - Marver` : 'Marver' }, [board, titles])
 
   // favicon follows the mode: blue pack in design mode, purple pack in interact.
   // The links are rebuilt (not toggled) so the set stays deterministic; the .ico is
@@ -484,6 +501,8 @@ export function App() {
   useEffect(() => {
     if (!import.meta.hot) return
     import.meta.hot.on('sh:manifest', (m: any) => applyManifest(m))
+    // a brief's title or description changed with the frames intact: relabel, never re-key
+    import.meta.hot.on('sh:scenes', (m: any) => useStore.getState().setScenes(m?.scenes))
     // Live Jam presence: the daemon broadcasts the set of frames Marver is editing.
     // Camera-safe by construction - this only toggles a glow class, never moves the view.
     import.meta.hot.on('sh:jam-activity', (m: any) => useStore.getState().setWorking(Array.isArray(m?.frames) ? m.frames.filter((x: unknown) => typeof x === 'string') : []))
@@ -779,15 +798,24 @@ export function App() {
             <BoardList onMenu={cm.open} />
             <div className="hd" style={{ marginTop: 10 }}>Scenes</div>
             {scenes.map((sc) => (
-              <SceneGroup key={sc.name} name={sc.name} count={sc.frames}
+              <SceneGroup key={sc.name} name={sc.name} label={sceneLabel(sc.name)} count={sc.frames}
                 held={frames.some((f) => f.scene === sc.name && selFrames.has(f.id))}
+                renaming={sceneNaming === sc.name}
+                onRename={(raw) => {
+                  setSceneNaming(null)
+                  const title = raw === null ? undefined : readTitle(raw)
+                  if (!title || title === sceneLabel(sc.name)) return                    // Escape, empty, or unchanged = never mind
+                  if (scenes.some((o) => o.name !== sc.name && sceneLabel(o.name) === title)) { toast(`a scene called "${title}" already exists`); return }
+                  // typing what the directory reads as anyway clears the title - the brief stays clean
+                  useStore.getState().renameScene(sc.name, title === slugLabel(sc.name) ? '' : title).then((r) => { if (!r.ok) toast(r.error ?? 'rename failed') })
+                }}
                 onContextMenu={(e) => cm.open(e, [{
                   label: 'Copy path',
                   icon: <SignpostIcon size={15} />,
                   onClick: () => copyToClipboard(sc.name
                     ? `board: ${useStore.getState().board} · scene: ${sc.name}  (design/scenes/${sc.name}/)`
                     : `board: ${useStore.getState().board} · scene: (root)`, 'path copied'),
-                }])}
+                }, ...(!PUBLISHED && sc.name ? [{ label: 'Rename', icon: <PencilSimpleIcon size={15} />, onClick: () => setSceneNaming(sc.name) }] : [])])}
                 onPick={() => {
                   const keys = nodes.filter((n) => frames.some((f) => f.scene === sc.name && f.id === n.frame) && !n.missing).map((n) => n.key)
                   if (!keys.length) return

package/src/client/shell/BoardList.tsx

@@ -1,12 +1,12 @@
 import { useEffect, useRef, useState, type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent, type ReactNode } from 'react'
-import { useStore, HAS_ALL_SCENES, PUBLISHED, boardLabel, fetchBoardTree, type TreeBase } from './store.ts'
+import { useStore, HAS_ALL_SCENES, PUBLISHED, fetchBoardTree, rememberTitles, type TreeBase } from './store.ts'
 import { canvasCtl } from './canvas/Canvas.tsx'
 import { Tip } from './Tip.tsx'
 import { copyToClipboard, type MenuItem, type MenuOpener } from './ContextMenu.tsx'
 import { ArrowLineUpIcon, CardsIcon, CardsThreeIcon, FolderIcon, FolderMinusIcon, FolderOpenIcon, FolderPlusIcon, PencilSimpleIcon, SignpostIcon } from './icons.tsx'
 import {
-  applyDrop, boardsIn, createFolder, deleteFolder, folderOf, foldersIn, isBoardName, isOwnSlot, moveBoard, newFolderSlot, renameFolder, resolveDrop, rootIndex, slugify,
-  type Drag, type Drop, type TreeItem,
+  applyDrop, boardsIn, createFolder, deleteFolder, folderIn, folderOf, foldersIn, humanize, isOwnSlot, labelOf, moveBoard, newFolderSlot, readTitle, resolveDrop, retitleFolder, rootIndex, slugFor,
+  type Drag, type Drop, type Folder, type Row, type TreeItem,
 } from '../../shared/board-tree.ts'
 
 /**
@@ -21,7 +21,6 @@ import {
 
 const CLOSED_KEY = 'mv-folders-closed'   // collapsed folders are a viewer preference, never data
 const readClosed = (): Record<string, true> => { try { return JSON.parse(localStorage.getItem(CLOSED_KEY) ?? '{}') } catch { return {} } }
-const INDENT = 28                        // px a board row indents inside a folder; left of it is the root gutter
 
 /** The inline input: renaming a board or a folder, or naming a NEW folder that does not exist
  *  yet - drawn at root `index`, optionally with `board` already inside it. */
@@ -31,6 +30,8 @@ type Intent = (tree: TreeItem[]) => TreeItem[] | null
 
 export function BoardList({ onMenu }: { onMenu: MenuOpener }) {
   const board = useStore((s) => s.board)
+  const titles = useStore((s) => s.boardTitles)                       // board slug → title, off the last tree read
+  const label = (n: string) => labelOf(n, titles[n])                  // a board's label; a folder's is labelOf(name, item.title)
   const [tree, setTree] = useState<TreeItem[]>([])
   const [naming, setNaming] = useState<Naming | null>(null)
   const [closed, setClosed] = useState<Record<string, true>>(readClosed)
@@ -50,7 +51,7 @@ export function BoardList({ onMenu }: { onMenu: MenuOpener }) {
   // drag runs on pointer events, NOT native drag-and-drop: native DnD hands the cursor to
   // the OS (arrow/move), so a grabbing hand can't persist. Owning the gesture lets us hold
   // the grabbing cursor for the whole drag via a body class.
-  const gestureRef = useRef<{ pointerId: number; startX: number; startY: number; item: Drag; dragging: boolean; el: HTMLElement } | null>(null)
+  const gestureRef = useRef<{ pointerId: number; startX: number; startY: number; item: Drag; dragging: boolean; el: HTMLElement; x: number; y: number } | null>(null)
   const treeRef = useRef(tree)
   treeRef.current = tree
   const namingRef = useRef(naming)                                   // commit reads the LIVE naming state, never a stale closure (Escape, then a late blur)
@@ -70,6 +71,7 @@ export function BoardList({ onMenu }: { onMenu: MenuOpener }) {
       if (seq !== loadSeq.current) return false                    // an older read landing late never overwrites a newer one
       confirmedRef.current = snap.tree
       baseRef.current = snap.base
+      rememberTitles(snap.titles)                                    // the labels follow the same latest-wins rule
       lastErr.current = ''
       show()
       return true
@@ -156,92 +158,117 @@ export function BoardList({ onMenu }: { onMenu: MenuOpener }) {
     }
   }
 
-  // ---- inline naming (rename a board, rename a folder, name a new folder) ----
+  // ---- inline naming (retitle a board, retitle a folder, name a new folder) ----
+  // What the human types is the TITLE - any casing, punctuation, emoji - what the row shows.
+  // The slug (the board's file name, the folder's key on its boards and in the registry) is
+  // the object's identity: agents, publish.json, URLs and comment threads hold it, so a rename
+  // never moves it. A new folder mints its slug from the title once. Typing exactly what the
+  // slug reads as anyway ("Research" for `research`) clears the title - the file stays clean.
+  // An empty entry, or the label unchanged, means never mind.
   const commit = async (raw: string) => {
     const n = namingRef.current
     if (!n || commitBusy.current) return                      // Enter already fired this (or Escape cancelled); ignore the follow-up blur
     commitBusy.current = true
     try {
+      const title = readTitle(raw)
+      if (!title) { setNaming(null); return }
+      // two rows reading alike would be a trap: a name another board (folder) already shows stays editing
+      const taken = (kind: 'board' | 'folder') => useStore.getState().toast(`a ${kind} called "${title}" already exists`)
+      const stored = (slug: string) => (title === humanize(slug) ? '' : title)
       if (n.kind === 'board') {
-        const next = raw.trim()
-        if (!next || next === n.name) { setNaming(null); return }
-        if (!isBoardName(next) || next === 'all-scenes' || boardsIn(tree).includes(next)) {
-          useStore.getState().toast('use a free name - lowercase letters, numbers and dashes'); return   // stay editing
-        }
-        const r = await useStore.getState().renameBoard(n.name, next)
-        if (r.ok) { setNaming(null); refresh() }
-        else useStore.getState().toast(r.error ?? 'rename failed')                                      // stay editing
+        if (title === label(n.name)) { setNaming(null); return }
+        if (boardsIn(tree).some((b) => b !== n.name && label(b) === title) || (HAS_ALL_SCENES && label('all-scenes') === title)) { taken('board'); return }
+        let r = await useStore.getState().renameBoard(n.name, stored(n.name), baseRef.current.boards[n.name])
+        if (!r.ok && r.stale && await load()) r = await useStore.getState().renameBoard(n.name, stored(n.name), baseRef.current.boards[n.name])   // the file moved on (a drag just before, an agent): re-read, once more
+        if (!r.ok) { useStore.getState().toast(r.error ?? 'rename failed'); return }   // stay editing
+        setNaming(null)
+        refresh()
         return
       }
-      // folders: what the human types becomes a slug ("Old stuff" -> old-stuff, shown "Old Stuff");
-      // an empty entry means never mind
-      if (!raw.trim() || (n.kind === 'folder' && slugify(raw) === n.name)) { setNaming(null); return }
-      const slug = slugify(raw)
-      if (!slug) { useStore.getState().toast('use letters, numbers and dashes'); return }
-      if (foldersIn(tree).includes(slug)) { useStore.getState().toast(`a folder named "${slug}" already exists`); return }
-      setNaming(null)
+      const folderLabels = tree.filter((it): it is Folder => it.kind === 'folder' && (n.kind !== 'folder' || it.name !== n.name)).map((it) => labelOf(it.name, it.title))
       if (n.kind === 'folder') {
-        const wasClosed = !!closed[n.name]
-        setOpen(n.name, true); setOpen(slug, !wasClosed)                          // the collapsed flag follows the name, and only that
-        mutate((t) => renameFolder(t, n.name, slug))
-      } else if (n.kind === 'new') {
-        setOpen(slug, true)                                                       // a new folder opens, whatever an old namesake left behind
-        if (!mutate((t) => createFolder(t, slug, n.index, n.board))) useStore.getState().toast('that board is gone - nothing changed')
+        const current = folderIn(tree, n.name)
+        if (!current || title === labelOf(n.name, current.title)) { setNaming(null); return }
+        if (folderLabels.includes(title)) { taken('folder'); return }
+        setNaming(null)
+        mutate((t) => retitleFolder(t, n.name, stored(n.name)))
+        return
       }
+      if (n.kind !== 'new') return
+      if (folderLabels.includes(title)) { taken('folder'); return }
+      const { index, board: withBoard } = n
+      const slug = slugFor(title, foldersIn(tree))                                // "Old stuff" → old-stuff (-2 past a namesake); "🚀" alone → folder
+      setNaming(null)
+      setOpen(slug, true)                                                       // a new folder opens, whatever an old namesake left behind
+      if (!mutate((t) => createFolder(t, slug, index, withBoard, stored(slug) || undefined))) useStore.getState().toast('that board is gone - nothing changed')
     } finally { commitBusy.current = false }
   }
 
   // ---- drag and drop: one pointer gesture for board rows and folder rows ----
-  /** The drop target under the pointer for the item being dragged, or null. The DOM hit becomes
-   *  plain facts (which row, which half, the top edge, the root gutter) for the pure resolver. */
-  const dropAt = (x: number, y: number, d: Drag): Drop | null => {
-    const el = (document.elementFromPoint(x, y) as HTMLElement | null)?.closest('[data-board-row],[data-folder-row]') as HTMLElement | null
-    if (!el) return null
+  /** The rows as rendered, measured - what the pure resolver reads the pointer against. */
+  const rootRef = useRef<HTMLDivElement>(null)
+  const measure = (): Row[] => Array.from(rootRef.current?.querySelectorAll<HTMLElement>('[data-board-row],[data-folder-row]') ?? []).map((el) => {
     const r = el.getBoundingClientRect()
-    const hit = {
-      kind: (el.hasAttribute('data-folder-row') ? 'folder' : 'board') as Drag['kind'],
-      name: el.dataset.folderRow ?? el.dataset.board ?? '',
-      parent: el.hasAttribute('data-folder-row') ? null : (el.dataset.folder ?? null),
-      below: y > r.top + r.height / 2,
-      topEdge: y < r.top + r.height * 0.3,
-      gutter: x < r.left + INDENT,
-    }
-    const target = resolveDrop(treeRef.current, d, hit)
+    const folder = el.hasAttribute('data-folder-row')
+    return { kind: folder ? 'folder' : 'board', name: el.dataset.folderRow ?? el.dataset.board ?? '', parent: folder ? null : (el.dataset.folder ?? null), open: el.dataset.open === '1', top: r.top, bottom: r.bottom, left: r.left }
+  })
+  /** The drop target for the pointer at (x, y), or null: outside the panel (a release there
+   *  cancels), or a slot that would change nothing. Inside the panel there is always one - the
+   *  ends clamp - so the seam on screen is exactly where a release lands. */
+  const dropAt = (x: number, y: number, d: Drag): Drop | null => {
+    const panel = rootRef.current?.closest('.sh-panel')?.getBoundingClientRect()
+    if (!panel || x < panel.left || x >= panel.right || y < panel.top || y >= panel.bottom) return null
+    const target = resolveDrop(treeRef.current, d, measure(), x, y)
     return target && !isOwnSlot(treeRef.current, d, target) ? target : null
   }
+  const dropRef = useRef<Drop | null>(null)                          // the target on screen; the release applies THIS, never a recomputation
+  const showDrop = (t: Drop | null) => { dropRef.current = t; setDrop(t) }
   const resetPointer = () => {
     const g = gestureRef.current
     gestureRef.current = null
     if (g) { try { g.el.releasePointerCapture(g.pointerId) } catch { /* already released */ } }
     document.body.classList.remove('sh-board-dragging')
     setDrag(null)
-    setDrop(null)
+    showDrop(null)
   }
   const onPointerDown = (e: ReactPointerEvent<HTMLButtonElement>, item: Drag) => {
     if (e.button !== 0) return                                    // left button only; right-click opens the menu
     const el = e.currentTarget
     try { el.setPointerCapture(e.pointerId) } catch { /* capture can fail on rapid input */ }
-    gestureRef.current = { pointerId: e.pointerId, startX: e.clientX, startY: e.clientY, item, dragging: false, el }
+    gestureRef.current = { pointerId: e.pointerId, startX: e.clientX, startY: e.clientY, item, dragging: false, el, x: e.clientX, y: e.clientY }
   }
   const onPointerMove = (e: ReactPointerEvent<HTMLButtonElement>) => {
     const g = gestureRef.current
     if (!g || g.pointerId !== e.pointerId) return
+    g.x = e.clientX; g.y = e.clientY
     if (!g.dragging) {
       if (Math.hypot(e.clientX - g.startX, e.clientY - g.startY) < 5) return   // click vs drag threshold
       g.dragging = true
       setDrag(g.item)
       document.body.classList.add('sh-board-dragging')            // holds the grabbing cursor for the whole drag
     }
-    setDrop(dropAt(e.clientX, e.clientY, g.item))
+    showDrop(dropAt(e.clientX, e.clientY, g.item))
   }
+  // the tree changed under a drag in progress (a poll, an agent's write): the seam is re-read
+  // against the rows as they are NOW, from where the pointer is - never a slot that no longer means it
+  useEffect(() => {
+    const g = gestureRef.current
+    if (g?.dragging) showDrop(dropAt(g.x, g.y, g.item))
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tree])
   const onPointerUp = (e: ReactPointerEvent<HTMLButtonElement>) => {
     const g = gestureRef.current
     if (!g || g.pointerId !== e.pointerId) return
     // the item is the one the gesture STARTED on - never the row that happens to receive the
-    // up (capture can be lost, a refresh can re-key the dragged row)
+    // up (capture can be lost, a refresh can re-key the dragged row); the target is the seam
+    // the human saw
     const item = g.item
     const dragged = g.dragging
-    const target = dragged ? dropAt(e.clientX, e.clientY, item) : null
+    // a release outside the panel cancels, even after a seam showed (the pointer can leave
+    // between the last move and the up); inside, the seam is the contract
+    const panel = rootRef.current?.closest('.sh-panel')?.getBoundingClientRect()
+    const inside = !!panel && e.clientX >= panel.left && e.clientX < panel.right && e.clientY >= panel.top && e.clientY < panel.bottom
+    const target = dragged && inside ? dropRef.current : null
     resetPointer()
     if (dragged) {
       if (!target) return
@@ -290,7 +317,6 @@ export function BoardList({ onMenu }: { onMenu: MenuOpener }) {
   }
   const onMenuRef = useRef(onMenu)
   onMenuRef.current = onMenu
-  const rootRef = useRef<HTMLDivElement>(null)
   useEffect(() => {
     const panel = rootRef.current?.closest('.sh-panel')
     const scroll = rootRef.current?.closest('.sh-panel-scroll')
@@ -320,13 +346,14 @@ export function BoardList({ onMenu }: { onMenu: MenuOpener }) {
     return drop.index === index ? ' drop-before' : last && drop.index === index + 1 ? ' drop-after' : ''
   }
   const boardRow = (n: string, parent: string | null, index: number, last: boolean) => {
+    const dragging = drag?.kind === 'board' && drag.name === n
+    const dropCls = dragging ? '' : n === 'all-scenes' ? (drop && !('into' in drop) && drop.list === null && drop.index === tree.length ? ' drop-before' : '') : seam(parent, index, last)
+    // the row being renamed is still a row: measured by a drag (its slot exists) and it draws its seam
     if (naming?.kind === 'board' && naming.name === n) return (
-      <div key={n} className={`it board editing${parent ? ' in-folder' : ''}`}><CardsIcon size={14} />{input(n)}</div>
+      <div key={n} data-board-row data-board={n} data-folder={parent ?? undefined} className={`it board editing${parent ? ' in-folder' : ''}${dropCls}`}><CardsIcon size={14} />{input(label(n))}</div>
     )
     const canDrag = !PUBLISHED && n !== 'all-scenes'
     const item: Drag = { kind: 'board', name: n }
-    const dragging = drag?.kind === 'board' && drag.name === n
-    const dropCls = dragging ? '' : n === 'all-scenes' ? (drop && !('into' in drop) && drop.list === null && drop.index === tree.length ? ' drop-before' : '') : seam(parent, index, last)
     return (
       <button key={`${parent ?? ''}/${n}`} data-board-row data-board={n} data-folder={parent ?? undefined} data-reorderable={canDrag || undefined}
         className={`it board${parent ? ' in-folder' : ''}${n === board ? ' cur' : ''}${dragging ? ' dragging' : ''}${dropCls}`}
@@ -341,22 +368,25 @@ export function BoardList({ onMenu }: { onMenu: MenuOpener }) {
         onPointerCancel={canDrag ? () => resetPointer() : undefined}
         onLostPointerCapture={canDrag ? (e) => { if (gestureRef.current?.pointerId === e.pointerId) resetPointer() } : undefined}>
         {n === 'all-scenes' ? <CardsThreeIcon size={14} /> : <CardsIcon size={14} />}
-        <span>{boardLabel(n)}</span>
+        <span>{label(n)}</span>
       </button>
     )
   }
-  const folderRow = (f: string, boards: string[], index: number): ReactNode[] => {
+  const folderRow = (it: Folder, boards: string[], index: number): ReactNode[] => {
+    const f = it.name
     const open = !closed[f]
     const rows: ReactNode[] = []
     if (naming?.kind === 'folder' && naming.name === f) {
-      rows.push(<div key={`f:${f}`} className="it folder editing">{open ? <FolderOpenIcon size={14} /> : <FolderIcon size={14} />}{input(f)}</div>)
+      rows.push(<div key={`f:${f}`} data-folder-row={f} data-open={open ? '1' : '0'} className={`it folder editing${seam(null, index, false)}`}>{open ? <FolderOpenIcon size={14} /> : <FolderIcon size={14} />}{input(labelOf(f, it.title))}</div>)
     } else {
       const item: Drag = { kind: 'folder', name: f }
       const dragging = drag?.kind === 'folder' && drag.name === f
       const into = !!drag && !!drop && 'into' in drop && drop.into === f
+      // a slot inside an open EMPTY folder has no board row to draw on: the indented seam sits under the header
+      const inSeam = !!drag && !!drop && !('into' in drop) && drop.list === f && open && boards.length === 0
       rows.push(
-        <button key={`f:${f}`} data-folder-row={f} data-reorderable={!PUBLISHED || undefined}
-          className={`it folder${boards.includes(board) ? ' held' : ''}${dragging ? ' dragging' : ''}${into ? ' drop-into' : ''}${dragging ? '' : seam(null, index, false)}`}
+        <button key={`f:${f}`} data-folder-row={f} data-open={open ? '1' : '0'} data-reorderable={!PUBLISHED || undefined}
+          className={`it folder${boards.includes(board) ? ' held' : ''}${dragging ? ' dragging' : ''}${into ? ' drop-into' : ''}${inSeam ? ' drop-in' : ''}${dragging ? '' : seam(null, index, false)}`}
           onClick={(e) => { if (PUBLISHED || e.detail === 0) setOpen(f, !open) }}
           onContextMenu={(e) => onMenu(e, folderMenu(f, boards))}
           onPointerDown={!PUBLISHED ? (e) => onPointerDown(e, item) : undefined}
@@ -365,7 +395,7 @@ export function BoardList({ onMenu }: { onMenu: MenuOpener }) {
           onPointerCancel={!PUBLISHED ? () => resetPointer() : undefined}
           onLostPointerCapture={!PUBLISHED ? (e) => { if (gestureRef.current?.pointerId === e.pointerId) resetPointer() } : undefined}>
           {open ? <FolderOpenIcon size={14} /> : <FolderIcon size={14} />}
-          <span>{boardLabel(f)}</span>
+          <span>{labelOf(f, it.title)}</span>
           <small>{boards.length}</small>
         </button>,
       )
@@ -380,12 +410,12 @@ export function BoardList({ onMenu }: { onMenu: MenuOpener }) {
   const rows: ReactNode[] = []
   const draftRows = draft ? [
     <div key="f:new" className="it folder editing"><FolderOpenIcon size={14} />{input('', 'Folder name')}</div>,
-    ...(draft.board ? [<div key="new/board" className={`it board in-folder draft${draft.board === board ? ' cur' : ''}`}><CardsIcon size={14} /><span>{boardLabel(draft.board)}</span></div>] : []),
+    ...(draft.board ? [<div key="new/board" className={`it board in-folder draft${draft.board === board ? ' cur' : ''}`}><CardsIcon size={14} /><span>{label(draft.board)}</span></div>] : []),
   ] : []
   tree.forEach((it, i) => {
     if (draft && draft.index === i) rows.push(...draftRows)
     if (it.kind === 'board') { if (draft?.board !== it.name) rows.push(boardRow(it.name, null, i, false)) }
-    else rows.push(...folderRow(it.name, draft?.board ? it.boards.filter((b) => b !== draft.board) : it.boards, i))
+    else rows.push(...folderRow(it, draft?.board ? it.boards.filter((b) => b !== draft.board) : it.boards, i))
   })
   if (draft && draft.index >= tree.length) rows.push(...draftRows)
   if (HAS_ALL_SCENES) rows.push(boardRow('all-scenes', null, -1, false))   // a published bundle without it shows none

package/src/client/shell/LockedApp.tsx

@@ -107,7 +107,8 @@ export function App() {
     return c.live(board)
   }, [board])
 
-  useEffect(() => { document.title = board ? `${boardLabel(board)} - Marver` : 'Marver' }, [board])
+  const titles = useStore((s) => s.boardTitles)
+  useEffect(() => { document.title = board ? `${boardLabel(board)} - Marver` : 'Marver' }, [board, titles])
 
   return (
     <div tabIndex={-1} className="sh-app dark">

package/src/client/shell/Play.tsx

@@ -168,6 +168,7 @@ export function PlayOverlay() {
 function BoardMenu({ current }: { current: string }) {
   const pop = usePopover()
   const [names, setNames] = useState<string[]>([current])
+  useStore((s) => s.boardTitles)   // labels follow titles (the fetch below refreshes them)
   // refreshed on every open - agents create boards while you present
   useEffect(() => { if (pop.open) fetchBoardNames().then(setNames).catch(() => {}) }, [pop.open])
   return (

package/src/client/shell/labels.ts

@@ -4,7 +4,7 @@
 export const cap = (s: string): string => (s ? s[0].toUpperCase() + s.slice(1) : s)
 
 /** D5: derive a display label from a kebab slug - drop the dashes, Title Case each word.
- *  For board/scene NAMES only (device/theme names are single words, cap is right there).
- *  Acronyms ("tms" -> "Tms") await the board `title` override (C3); an explicit title,
- *  once present, is shown verbatim and never passes through here. */
-export const humanize = (s: string): string => s.replace(/-/g, ' ').replace(/(^|\s)\S/g, (c) => c.toUpperCase())
+ *  For board/folder/scene NAMES only (device/theme names are single words, cap is right
+ *  there). An explicit `title` (boards, folders, scenes - v1.6.1) is shown verbatim and never
+ *  passes through here; `labelOf` in shared/board-tree.ts picks. */
+export { humanize } from '../../shared/board-tree.ts'