pmx-canvas 0.6.5 → 0.7.1

package/src/cli/commands/pins.ts

@@ -17,7 +17,9 @@ cmd(
     if (flags.help || flags.h) return showCommandHelp('pin');
 
     if (flags.list) {
-      const result = await invokeOperation('pinned-context.get', {});
+      const result = await invokeOperation('pinned-context.get', {
+        board: typeof flags.board === 'string' ? flags.board : undefined,
+      });
       output(result);
       return;
     }
@@ -36,7 +38,9 @@ cmd(
     }
 
     // Default: list
-    const result = await invokeOperation('pinned-context.get', {});
+    const result = await invokeOperation('pinned-context.get', {
+      board: typeof flags.board === 'string' ? flags.board : undefined,
+    });
     output(result);
   },
 );

package/src/cli/commands/pump.ts

@@ -91,6 +91,9 @@ function runExec(template: string, steer: PendingSteer, consumer: string): Promi
         PMX_STEER_CONSUMER: consumer,
       },
     });
+    // A command that exits without reading stdin (`exit 1`, a notifier) closes
+    // the pipe first; the EPIPE is not the command's result — its exit code is.
+    child.stdin.on('error', () => {});
     child.stdin.write(steer.message);
     child.stdin.end();
     child.on('close', (code) => resolve(code ?? 1));

package/src/cli/commands/query.ts

@@ -36,11 +36,30 @@ cmd(
     const query = positional[0] || (typeof flags.query === 'string' ? flags.query : '');
     if (!query) die('Missing search query', 'pmx-canvas search "query"');
 
-    const result = await invokeOperation('search', { q: query });
+    const result = await invokeOperation('search', { q: query, ...(flags.library ? { scope: 'library' } : {}) });
     output(result);
   },
 );
 
+cmd(
+  'context',
+  'Read the budgeted cross-board context brief',
+  ['pmx-canvas context --consumer codex --budget 16000'],
+  async (args) => {
+    const { flags } = parseFlags(args);
+    if (flags.help || flags.h) return showCommandHelp('context');
+    output(
+      await invokeOperation('context.get', {
+        ...(typeof flags.consumer === 'string' ? { consumer: flags.consumer } : {}),
+        ...(typeof flags.since === 'string' || typeof flags.since === 'number' ? { since: Number(flags.since) } : {}),
+        ...(typeof flags.budget === 'string' || typeof flags.budget === 'number'
+          ? { budget: Number(flags.budget) }
+          : {}),
+      }),
+    );
+  },
+);
+
 // ── validate ─────────────────────────────────────────────────
 cmd(
   'validate',
@@ -114,13 +133,20 @@ cmd('code-graph', 'Show auto-detected file dependency graph', ['pmx-canvas code-
 });
 
 // ── spatial ──────────────────────────────────────────────────
-cmd('spatial', 'Spatial analysis: clusters, reading order, neighborhoods', ['pmx-canvas spatial'], async (args) => {
-  const { flags } = parseFlags(args);
-  if (flags.help || flags.h) return showCommandHelp('spatial');
+cmd(
+  'spatial',
+  'Spatial analysis: clusters, reading order, neighborhoods',
+  ['pmx-canvas spatial', 'pmx-canvas spatial --board <id>'],
+  async (args) => {
+    const { flags } = parseFlags(args);
+    if (flags.help || flags.h) return showCommandHelp('spatial');
 
-  const result = await invokeOperation('spatial.get', {});
-  output(result);
-});
+    const result = await invokeOperation('spatial.get', {
+      board: typeof flags.board === 'string' ? flags.board : undefined,
+    });
+    output(result);
+  },
+);
 
 // ── watch ────────────────────────────────────────────────────
 cmd(

package/src/cli/commands/view.ts

@@ -42,16 +42,17 @@ cmd('open', 'Open the current workbench in the browser', ['pmx-canvas open'], as
 cmd(
   'layout',
   'Get the full canvas layout (nodes, edges, viewport)',
-  ['pmx-canvas layout', 'pmx-canvas layout --summary'],
+  ['pmx-canvas layout', 'pmx-canvas layout --board <id>', 'pmx-canvas layout --summary'],
   async (args) => {
     const { flags } = parseFlags(args, { boolFlags: ['summary'] });
     if (flags.help || flags.h) return showCommandHelp('layout');
 
+    const board = typeof flags.board === 'string' ? flags.board : undefined;
     if (flags.summary || flags.compact) {
-      output(await invokeOperation('summary.get', {}));
+      output(await invokeOperation('summary.get', { board }));
       return;
     }
-    const result = await invokeOperation('layout.get', {});
+    const result = await invokeOperation('layout.get', { board });
     output(result);
   },
 );
@@ -61,12 +62,13 @@ cmd('status', 'Quick canvas summary', ['pmx-canvas status'], async (args) => {
   const { flags } = parseFlags(args);
   if (flags.help || flags.h) return showCommandHelp('status');
 
-  const layout = (await invokeOperation('layout.get', {})) as {
+  const board = typeof flags.board === 'string' ? flags.board : undefined;
+  const layout = (await invokeOperation('layout.get', { board })) as {
     nodes: Array<Record<string, unknown>>;
     edges: unknown[];
     viewport: unknown;
   };
-  const pinned = (await invokeOperation('pinned-context.get', {})) as { count: number; nodeIds: string[] };
+  const pinned = (await invokeOperation('pinned-context.get', { board })) as { count: number; nodeIds: string[] };
 
   const typeCounts: Record<string, number> = {};
   for (const n of layout.nodes) {

package/src/cli/daemon.ts

@@ -49,14 +49,24 @@ export function isProcessRunning(pid: number): boolean {
 }
 
 /**
- * Whether pid's command line contains `needle`. Returns null when `ps` cannot
- * answer (no such process, unsupported platform) — callers fall back to the
- * plain liveness signal.
+ * Whether pid's command line contains `needle`. Returns null when the OS probe
+ * cannot answer (no such process or unavailable command). Stop must not treat
+ * an unknown identity as permission to signal a live process.
  */
 export function processCommandMatches(pid: number, needle: string): boolean | null {
   if (!Number.isInteger(pid) || pid <= 0) return null;
   try {
-    const command = execFileSync('ps', ['-o', 'command=', '-p', String(pid)], {
+    const executable = process.platform === 'win32' ? 'powershell.exe' : 'ps';
+    const args =
+      process.platform === 'win32'
+        ? [
+            '-NoProfile',
+            '-NonInteractive',
+            '-Command',
+            `(Get-CimInstance Win32_Process -Filter 'ProcessId = ${pid}').CommandLine`,
+          ]
+        : ['-o', 'command=', '-p', String(pid)];
+    const command = execFileSync(executable, args, {
       encoding: 'utf-8',
       stdio: ['ignore', 'pipe', 'ignore'],
     }).trim();
@@ -69,8 +79,8 @@ export function processCommandMatches(pid: number, needle: string): boolean | nu
 
 /**
  * Liveness with a PID-recycling guard: the pid must be alive AND its command
- * line must still look like our daemon (unless `ps` is unavailable, in which
- * case the plain liveness signal wins).
+ * line must still look like our daemon. Status falls back to plain liveness
+ * when the command probe is unavailable; stop requires a verified match.
  */
 export function isOwnDaemonProcess(pid: number, entryNeedle: string): boolean {
   if (!isProcessRunning(pid)) return false;
@@ -439,7 +449,27 @@ export async function stopServeDaemon(
     process.exit(1);
   }
 
-  if (!isOwnDaemonProcess(pid, options.entry)) {
+  const commandMatches = processCommandMatches(pid, options.entry);
+  if (commandMatches !== true) {
+    if (isProcessRunning(pid)) {
+      outputJson({
+        ok: false,
+        daemon: true,
+        stopped: false,
+        running: responsive,
+        error:
+          commandMatches === false
+            ? `PID ${pid} is live but does not belong to this installation. The pid file was preserved.`
+            : `PID ${pid} is live but its installation could not be verified. The pid file was preserved.`,
+        hint: 'Use the matching installation and workspace to stop the daemon; verify the process before removing its pid file.',
+        pid,
+        url,
+        healthUrl,
+        logFile: options.logFile,
+        pidFile: options.pidFile,
+      });
+      process.exit(1);
+    }
     removePidFile(options.pidFile);
     outputJson({
       ok: true,

package/src/cli/index.ts

@@ -38,6 +38,7 @@ const AGENT_COMMANDS = new Set([
   'edge',
   'json-render',
   'search',
+  'context',
   'layout',
   'status',
   'arrange',
@@ -45,6 +46,10 @@ const AGENT_COMMANDS = new Set([
   'fit',
   'screenshot',
   'pin',
+  'board',
+  'backup',
+  'restore',
+  'export',
   'ax',
   'pump',
   'undo',
@@ -306,6 +311,10 @@ Agent CLI (works against running server):
   diagram add                         Add an Excalidraw diagram node
   html primitive add|schema           Add or inspect HTML communication primitives
   pin <ids...> | --list | --clear     Manage context pins
+  board list|create|rename|category   Manage boards (the human opens them in the workbench)
+  backup [status|schedule]            Back up every board, now or on a schedule
+  restore <backup-file>               Replace every board with a backup
+  export [--board id] [--out file]    Export a board as one HTML file anyone can open
   undo / redo / history               Time travel
   snapshot save|list|restore|diff|delete
                                       Manage snapshots
@@ -425,14 +434,15 @@ Examples:
   console.log('    pmx-canvas --help          (all commands)');
   console.log('\n  Press Ctrl+C to stop\n');
 
-  process.on('SIGINT', () => {
+  const shutdown = () => {
     console.log('\nShutting down...');
-    canvas.stop();
-    process.exit(0);
-  });
-
-  process.on('SIGTERM', () => {
-    canvas.stop();
-    process.exit(0);
-  });
+    try {
+      canvas.stop();
+      process.exit(0);
+    } catch (error) {
+      console.error('Shutdown refused: canvas changes could not be saved. Fix persistence and retry shutdown.', error);
+    }
+  };
+  process.on('SIGINT', shutdown);
+  process.on('SIGTERM', shutdown);
 }

package/src/cli/shared.ts

@@ -133,7 +133,8 @@ async function invokeOperation(name: string, input: Record<string, unknown>): Pr
 // ── Flag parsing ─────────────────────────────────────────────
 
 /**
- * `options.boolFlags` marks flags that are boolean FOR THIS COMMAND. Value
+ * `options.boolFlags` marks flags that are boolean FOR THIS COMMAND, while
+ * `options.valueFlags` overrides a globally boolean flag for one command. Value
  * flags consume the next token verbatim (so a unified diff beginning with
  * `--- a/file` survives), which makes a flag that is boolean here and
  * value-taking elsewhere ambiguous — `--summary` is boolean in `history` /
@@ -144,7 +145,7 @@ async function invokeOperation(name: string, input: Record<string, unknown>): Pr
  */
 function parseFlags(
   args: string[],
-  options: { boolFlags?: readonly string[] } = {},
+  options: { boolFlags?: readonly string[]; valueFlags?: readonly string[] } = {},
 ): { positional: string[]; flags: Record<string, string | true> } {
   const positional: string[] = [];
   const flags: Record<string, string | true> = {};
@@ -187,6 +188,7 @@ function parseFlags(
     'check',
     'skip-mcp',
   ]);
+  for (const flag of options.valueFlags ?? []) BOOL_FLAGS.delete(flag);
   for (let i = 0; i < args.length; i++) {
     const arg = args[i];
     // Conventional end-of-flags separator: the rest is positional, never flags.
@@ -847,6 +849,13 @@ function showCommandHelp(name: string): void {
     console.log('\nAlias:');
     console.log('  Equivalent to: pmx-canvas external-app add --kind excalidraw ...');
   }
+  if (name === 'export') {
+    console.log('\nOptions:');
+    console.log('  --board <id>               Export this board instead of the open board');
+    console.log('  --out <path>               Copy the export to this path');
+    console.log('  --include-files            Include local file contents (default: excluded)');
+    console.log('  --include-derived-text     Include imported document text (default: excluded)');
+  }
   console.log('');
 }
 

package/src/client/App.tsx

@@ -8,9 +8,13 @@ import { CanvasViewport } from './canvas/CanvasViewport';
 import { CommandBar } from './canvas/CommandBar';
 import { ConnectionBanner } from './canvas/ConnectionBanner';
 import { CommandPalette } from './canvas/CommandPalette';
+import { BoardLinkDialog } from './canvas/BoardLinkDialog';
 import { ContextMenu, useContextMenu } from './canvas/ContextMenu';
 import { ContextPinBar } from './canvas/ContextPinBar';
 import { EmptyState } from './canvas/EmptyState';
+import { HomeView } from './canvas/HomeView';
+import { ExportDialog } from './canvas/ExportDialog';
+import { activeBoardId, boardsLoaded } from './state/boards-store';
 import { createNodeInView } from './canvas/create-in-view';
 import { undoFromKeyboard } from './state/session-store';
 import { ActivityFeed, WritersSheet } from './canvas/ExternalWriters';
@@ -67,11 +71,13 @@ export function App() {
   const [minimapVisible, setMinimapVisible] = useState(true);
   const [snapshotOpen, setSnapshotOpen] = useState(false);
   const [paletteOpen, setPaletteOpen] = useState(false);
+  const [boardLinkOpen, setBoardLinkOpen] = useState(false);
   const [shortcutsOpen, setShortcutsOpen] = useState(false);
   const [annotationTool, setAnnotationTool] = useState<AnnotationTool>(null);
   const snapshotBtnRef = useRef<HTMLButtonElement>(null);
   const { menu, openNodeMenu, openCanvasMenu, openEdgeMenu, closeMenu } = useContextMenu();
   const hasInitialLayout = hasInitialServerLayout.value;
+  const onHome = boardsLoaded.value && activeBoardId.value === null;
   // rail-chrome-v2: the one selector every agent surface mounts on. Exposed
   // as a data attribute so styling and tests can key on it; the quiet board
   // (no attached session) must stay byte-clean of agent chrome.
@@ -90,6 +96,12 @@ export function App() {
     return connectSSE();
   }, []);
 
+  useEffect(() => {
+    const open = () => setBoardLinkOpen(true);
+    window.addEventListener('pmx-open-board-link', open);
+    return () => window.removeEventListener('pmx-open-board-link', open);
+  }, []);
+
   // Keep the server's idea of this window's size current (0.4.6 orb feedback
   // #2) so an agent `fit` computes a scale that actually fits the human's
   // canvas region. Connect-time reporting lives in the SSE bridge; this covers
@@ -221,7 +233,6 @@ export function App() {
         if (ids.length === 0) return;
         e.preventDefault();
         for (const id of ids) {
-          removeNode(id);
           void removeNodeFromClient(id).catch((error) => logAppError('delete', error));
         }
         clearSelection();
@@ -357,16 +368,21 @@ export function App() {
           <AttentionHistory />
           <ActivityFeed />
           <WritersSheet />
-          {hasInitialLayout && allNodes.length === 0 && intents.value.size === 0 && (
-            <EmptyState onOpenPalette={() => setPaletteOpen(true)} />
+          {onHome ? (
+            <HomeView />
+          ) : (
+            hasInitialLayout &&
+            allNodes.length === 0 &&
+            intents.value.size === 0 && <EmptyState onOpenPalette={() => setPaletteOpen(true)} />
           )}
           {selectedNodeIds.value.size > 0 && <SelectionBar />}
           {sessionIsActive ? <CommandBar /> : contextPinnedNodeIds.value.size > 0 && <ContextPinBar />}
           <SessionReceipt onOpenSnapshots={() => setSnapshotOpen(true)} />
           <TextPrompt />
+          <ExportDialog />
           {expandedNodeId.value && <ExpandedNodeOverlay />}
           <SnapshotPanel open={snapshotOpen} onClose={handleCloseSnapshot} anchorRef={snapshotBtnRef} />
-          {minimapVisible && (
+          {minimapVisible && !onHome && (
             <Minimap
               viewport={viewport}
               nodes={nodes}
@@ -381,6 +397,7 @@ export function App() {
       {sessionIsActive && <SessionPanel />}
       {menu && <ContextMenu menu={menu} onClose={closeMenu} />}
       {paletteOpen && <CommandPalette onClose={() => setPaletteOpen(false)} onToggleMinimap={handleToggleMinimap} />}
+      {boardLinkOpen && <BoardLinkDialog onClose={() => setBoardLinkOpen(false)} />}
       {shortcutsOpen && <ShortcutOverlay onClose={() => setShortcutsOpen(false)} />}
     </div>
   );

package/src/client/canvas/AttentionToast.tsx

@@ -9,11 +9,13 @@ export function AttentionToast() {
       type="button"
       class={`attention-toast attention-tone-${toast.tone}`}
       onClick={openAttentionHistory}
-      aria-label={`${toast.title} — open change history`}
-      title={toast.detail || toast.title}
+      aria-label={`${toast.title}${toast.detail ? `: ${toast.detail}` : ''} — open change history`}
     >
       <span class="attention-toast-dot" aria-hidden="true" />
-      <span class="attention-toast-title">{toast.title}</span>
+      <span class="attention-toast-copy">
+        <span class="attention-toast-title">{toast.title}</span>
+        {toast.detail && <span class="attention-toast-detail">{toast.detail}</span>}
+      </span>
     </button>
   );
 }

package/src/client/canvas/BoardCopyDialog.tsx

@@ -0,0 +1,153 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+import {
+  createBoardFrom,
+  openBoard,
+  previewBoardCopy,
+  type BoardCopyPreview,
+  type BoardSummary,
+} from '../state/boards-store';
+import { useFocusTrap } from './use-focus-trap';
+
+export function BoardCopyDialog({ board, onClose }: { board: BoardSummary; onClose: () => void }) {
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const nameRef = useRef<HTMLInputElement>(null);
+  const [preview, setPreview] = useState<BoardCopyPreview | null>(null);
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [name, setName] = useState(`${board.name} copy`);
+  const [includeReadme, setIncludeReadme] = useState(true);
+  const [includeStructure, setIncludeStructure] = useState(true);
+  const [openAfter, setOpenAfter] = useState(false);
+  const [error, setError] = useState('');
+  const [saving, setSaving] = useState(false);
+  useFocusTrap(dialogRef, true, { initial: nameRef });
+
+  useEffect(() => {
+    let active = true;
+    void previewBoardCopy(board.id).then((result) => {
+      if (!active) return;
+      if (!result || !Array.isArray(result.cards)) return setError('Could not load reusable cards. Try again.');
+      setPreview(result);
+      setSelected(new Set(result.cards.filter((card) => card.reusable).map((card) => card.id)));
+    });
+    return () => {
+      active = false;
+    };
+  }, [board.id]);
+
+  const submit = async (event: Event) => {
+    event.preventDefault();
+    if (!name.trim() || !preview) return;
+    setSaving(true);
+    setError('');
+    const created = await createBoardFrom({
+      sourceBoardId: board.id,
+      name: name.trim(),
+      ...(board.category ? { category: board.category } : {}),
+      nodeIds: [...selected],
+      includeReadme,
+      includeStructure,
+    });
+    setSaving(false);
+    if (!created) return setError('Could not create the board. Try a different name.');
+    if (openAfter) await openBoard(created.id);
+    onClose();
+  };
+
+  return (
+    <div class="text-prompt-backdrop" onMouseDown={onClose}>
+      <div
+        ref={dialogRef}
+        class="text-prompt board-copy-dialog"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="board-copy-title"
+        onMouseDown={(e) => e.stopPropagation()}
+      >
+        <form onSubmit={submit}>
+          <h2 id="board-copy-title">Create from {board.name}</h2>
+          <label class="board-copy-field">
+            Board name
+            <input
+              ref={nameRef}
+              class="text-prompt-input"
+              value={name}
+              onInput={(e) => setName(e.currentTarget.value)}
+            />
+          </label>
+          {!preview && !error && (
+            <div class="board-copy-status" role="status">
+              Loading reusable cards…
+            </div>
+          )}
+          {error && (
+            <div class="board-copy-error" role="alert">
+              {error}
+            </div>
+          )}
+          {preview && (
+            <fieldset class="board-copy-cards">
+              <legend>Cards to copy</legend>
+              {preview.cards.filter((card) => card.reusable).length === 0 ? (
+                <div class="board-copy-status">No reusable cards on this board.</div>
+              ) : (
+                preview.cards
+                  .filter((card) => card.reusable)
+                  .map((card) => (
+                    <label class="board-copy-card" key={card.id}>
+                      <input
+                        type="checkbox"
+                        checked={selected.has(card.id)}
+                        onChange={(e) => {
+                          const next = new Set(selected);
+                          e.currentTarget.checked ? next.add(card.id) : next.delete(card.id);
+                          setSelected(next);
+                        }}
+                      />
+                      <span>
+                        <strong>{card.title || 'Untitled card'}</strong>
+                        <small>{card.type}</small>
+                      </span>
+                    </label>
+                  ))
+              )}
+            </fieldset>
+          )}
+          <div class="board-copy-options">
+            <label>
+              <input
+                type="checkbox"
+                checked={includeStructure}
+                onChange={(e) => setIncludeStructure(e.currentTarget.checked)}
+              />{' '}
+              Preserve groups and connections
+            </label>
+            <label>
+              <input
+                type="checkbox"
+                checked={includeReadme}
+                disabled={!preview?.readmeNodeId}
+                onChange={(e) => setIncludeReadme(e.currentTarget.checked)}
+              />{' '}
+              Include README
+            </label>
+            <label>
+              <input type="checkbox" checked={openAfter} onChange={(e) => setOpenAfter(e.currentTarget.checked)} /> Open
+              the new board after creating
+            </label>
+          </div>
+          <p class="board-copy-note">
+            Only selected cards and structure are copied. Asks, history, and context pins start clear.
+          </p>
+          <div class="text-prompt-actions">
+            <button type="button" onClick={onClose}>
+              Cancel
+            </button>
+            <button type="submit" disabled={!preview || !name.trim() || saving}>
+              {saving ? 'Creating…' : 'Create board'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

package/src/client/canvas/BoardFolderDialog.tsx

@@ -0,0 +1,120 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { normalizeBoardCategory } from '../../shared/boards.js';
+import { boardList, updateBoard, type BoardSummary } from '../state/boards-store';
+import { useFocusTrap } from './use-focus-trap';
+
+/** A destination picker: select an existing folder, optionally create a child, then move. */
+export function BoardFolderDialog({
+  board,
+  folders,
+  onClose,
+}: {
+  board: BoardSummary;
+  folders: string[];
+  onClose: () => void;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [parent, setParent] = useState(board.category ?? '');
+  const [name, setName] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+  useFocusTrap(ref, true);
+  useEffect(() => {
+    const onEscape = (event: KeyboardEvent) => {
+      if (event.key !== 'Escape') return;
+      event.preventDefault();
+      event.stopPropagation();
+      if (!busy) onClose();
+    };
+    window.addEventListener('keydown', onEscape, true);
+    return () => window.removeEventListener('keydown', onEscape, true);
+  }, [busy, onClose]);
+
+  const destination = name.trim() ? [parent, name.trim()].filter(Boolean).join('/') : parent;
+  const move = async () => {
+    let category: string | null;
+    try {
+      if (name.includes('/')) throw new Error('Use one folder name; choose its parent above.');
+      category = normalizeBoardCategory(destination);
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : String(cause));
+      return;
+    }
+    setBusy(true);
+    setError('');
+    await updateBoard(board.id, { category });
+    if (boardList.value.find((entry) => entry.id === board.id)?.category === category) onClose();
+    else setError('Could not move this board. Try again.');
+    setBusy(false);
+  };
+
+  return (
+    <div class="text-prompt-backdrop" onPointerDown={() => !busy && onClose()}>
+      <div
+        ref={ref}
+        class="text-prompt home-folder-dialog"
+        role="dialog"
+        aria-modal="true"
+        aria-label={`Move ${board.name}`}
+        onPointerDown={(event) => event.stopPropagation()}
+      >
+        <div class="text-prompt-title">Move “{board.name}”</div>
+        <p class="home-folder-hint">Choose a folder, or create one inside it. The board keeps its content and links.</p>
+        <fieldset class="home-folder-options" disabled={busy}>
+          <legend>Destination folder</legend>
+          {['', ...folders].map((path) => (
+            <label
+              key={path}
+              class="home-folder-option"
+              style={{ paddingLeft: `${8 + Math.min(path.split('/').length - 1, 5) * 14}px` }}
+            >
+              <input
+                type="radio"
+                name="folder-destination"
+                value={path}
+                checked={parent === path}
+                onChange={() => {
+                  setParent(path);
+                  setError('');
+                }}
+              />
+              <span>{path || 'Home (no folder)'}</span>
+            </label>
+          ))}
+        </fieldset>
+        <label class="home-folder-new">
+          New folder inside {parent || 'Home'} <span class="home-folder-hint">(optional)</span>
+          <input
+            class="text-prompt-input"
+            aria-label="New folder name"
+            placeholder="e.g. Decisions"
+            maxLength={60}
+            value={name}
+            disabled={busy}
+            onInput={(event) => {
+              setName(event.currentTarget.value);
+              setError('');
+            }}
+          />
+        </label>
+        <div class="home-folder-hint">
+          Move to: <strong>{destination || 'Home'}</strong>
+        </div>
+        {error && <p role="alert">{error}</p>}
+        <div class="text-prompt-actions">
+          <button type="button" class="text-prompt-cancel" disabled={busy} onClick={onClose}>
+            Cancel
+          </button>
+          <button
+            type="button"
+            class="text-prompt-confirm"
+            disabled={busy || destination === (board.category ?? '')}
+            onClick={() => void move()}
+          >
+            {busy ? 'Moving…' : 'Move board'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}