pmx-canvas 0.6.5 → 0.7.0

package/src/client/canvas/ExportDialog.tsx

@@ -0,0 +1,197 @@
+import { signal } from '@preact/signals';
+import { useEffect, useState } from 'preact/hooks';
+import { requestJson } from '../state/intent-bridge';
+import { activeBoardId } from '../state/boards-store';
+
+interface ExportManifest {
+  boardId: string;
+  boardName: string;
+  cards: number;
+  connections: number;
+  frames: number;
+  placeholders: Array<{ nodeId: string; title: string; reason: string }>;
+  files: Array<{ nodeId: string; path: string; included: boolean }>;
+  attachments: Array<{ nodeId: string; name: string }>;
+  sourceDerivedCards: Array<{ nodeId: string; included: boolean }>;
+  embeddedImages: number;
+  remoteImages: string[];
+  links: string[];
+  frameNetworkDestinations: string[];
+  embeddedCodeCanAccessNetwork: boolean;
+}
+
+interface ExportResult {
+  path: string;
+  url: string;
+  bytes: number;
+}
+
+export const exportDialogOpen = signal(false);
+
+function sizeLabel(bytes: number): string {
+  return bytes >= 1024 * 1024 ? `${(bytes / 1024 / 1024).toFixed(1)} MB` : `${Math.ceil(bytes / 1024)} KB`;
+}
+
+/**
+ * Export the open board as one HTML file (plan 013). An export is a share, so
+ * the dialog lists what goes into the file before it is written; file contents
+ * stay out unless the owner ticks them in.
+ */
+export function ExportDialog() {
+  const [includeFiles, setIncludeFiles] = useState(false);
+  const [includeDerivedText, setIncludeDerivedText] = useState(false);
+  const [manifest, setManifest] = useState<ExportManifest | null>(null);
+  const [result, setResult] = useState<ExportResult | null>(null);
+  const [busy, setBusy] = useState(false);
+  const open = exportDialogOpen.value;
+  const boardId = activeBoardId.value;
+
+  useEffect(() => {
+    if (!open || !boardId) return;
+    let current = true;
+    setResult(null);
+    setManifest(null);
+    void requestJson<{ manifest?: ExportManifest } | null>(
+      'exportPreview',
+      `/api/canvas/export/preview?board=${encodeURIComponent(boardId)}&includeFiles=${includeFiles}&includeDerivedText=${includeDerivedText}`,
+      null,
+    ).then((body) => {
+      if (current) setManifest(body?.manifest ?? null);
+    });
+    return () => {
+      current = false;
+    };
+  }, [open, includeFiles, includeDerivedText, boardId]);
+
+  useEffect(() => {
+    setIncludeDerivedText(false);
+  }, [open, boardId]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key !== 'Escape') return;
+      e.stopPropagation();
+      exportDialogOpen.value = false;
+    };
+    window.addEventListener('keydown', onKey, { capture: true });
+    return () => window.removeEventListener('keydown', onKey, { capture: true });
+  }, [open]);
+
+  if (!open) return null;
+
+  const write = async () => {
+    if (!manifest || manifest.boardId !== activeBoardId.value) return;
+    setBusy(true);
+    const body = await requestJson<ExportResult | null>('exportBoard', '/api/canvas/export', null, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ board: manifest.boardId, includeFiles, includeDerivedText }),
+    });
+    setBusy(false);
+    if (body?.path && activeBoardId.value === manifest.boardId) setResult(body);
+  };
+
+  return (
+    <div class="text-prompt-backdrop" onPointerDown={() => (exportDialogOpen.value = false)}>
+      <div
+        class="text-prompt export-dialog"
+        role="dialog"
+        aria-label="Export board"
+        data-testid="export-dialog"
+        onPointerDown={(e) => e.stopPropagation()}
+      >
+        <div class="text-prompt-title">Export {manifest ? `“${manifest.boardName}”` : 'board'}</div>
+        {!manifest ? (
+          <div class="export-dialog-note">Reading the board…</div>
+        ) : (
+          <>
+            <div class="export-dialog-note">
+              One HTML file anyone can open without installing anything. It will contain:
+            </div>
+            <ul class="export-dialog-list">
+              <li>
+                {manifest.cards} card{manifest.cards !== 1 ? 's' : ''} and {manifest.connections} connection
+                {manifest.connections !== 1 ? 's' : ''}
+              </li>
+              {manifest.frames > 0 && (
+                <li>{manifest.frames} embedded pages, charts or diagrams, with the code that draws them</li>
+              )}
+              {manifest.embeddedImages > 0 && <li>{manifest.embeddedImages} local images</li>}
+              {manifest.placeholders.length > 0 && (
+                <li>
+                  Shown as placeholders:{' '}
+                  {manifest.placeholders.map((entry) => `${entry.title} (${entry.reason})`).join(', ')}
+                </li>
+              )}
+              {manifest.remoteImages.length > 0 && (
+                <li>Web images loaded when opened: {manifest.remoteImages.join(', ')}</li>
+              )}
+              {manifest.links.length > 0 && <li>Links included in cards: {manifest.links.join(', ')}</li>}
+              {manifest.frameNetworkDestinations.length > 0 && (
+                <li>
+                  Network destinations referenced by embedded pages: {manifest.frameNetworkDestinations.join(', ')}
+                </li>
+              )}
+              {manifest.embeddedCodeCanAccessNetwork && (
+                <li>
+                  Warning: embedded code can access the network. Scripts may contact destinations that cannot be listed
+                  in advance.
+                </li>
+              )}
+            </ul>
+            {(manifest.attachments?.length ?? 0) > 0 && (
+              <p>Original attachments are excluded. Their filenames remain visible.</p>
+            )}
+            {(manifest.sourceDerivedCards?.length ?? 0) > 0 && (
+              <label class="export-dialog-files">
+                <input
+                  type="checkbox"
+                  checked={includeDerivedText}
+                  onChange={(event) => setIncludeDerivedText(event.currentTarget.checked)}
+                />
+                <span>Include imported document text ({manifest.sourceDerivedCards.length} cards)</span>
+              </label>
+            )}
+            {manifest.files.length > 0 && (
+              <label class="export-dialog-files">
+                <input
+                  type="checkbox"
+                  checked={includeFiles}
+                  onChange={(e) => setIncludeFiles((e.target as HTMLInputElement).checked)}
+                />
+                <span>
+                  Include the contents of {manifest.files.length} local file
+                  {manifest.files.length !== 1 ? 's' : ''}: {manifest.files.map((file) => file.path).join(', ')}
+                </span>
+              </label>
+            )}
+          </>
+        )}
+        {result && (
+          <div class="export-dialog-result" data-testid="export-result">
+            <div>
+              Saved ({sizeLabel(result.bytes)}): <code>{result.path}</code>
+            </div>
+            <div class="export-dialog-links">
+              <a href={result.url} target="_blank" rel="noopener noreferrer">
+                Open
+              </a>
+              <a href={`${result.url}?download=1`}>Download</a>
+            </div>
+          </div>
+        )}
+        <div class="text-prompt-actions">
+          <button type="button" class="text-prompt-cancel" onClick={() => (exportDialogOpen.value = false)}>
+            {result ? 'Done' : 'Cancel'}
+          </button>
+          {!result && (
+            <button type="button" class="text-prompt-confirm" disabled={!manifest || busy} onClick={() => void write()}>
+              {busy ? 'Exporting…' : 'Export'}
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/client/canvas/HomeView.tsx

@@ -0,0 +1,277 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+import type { ComponentChildren } from 'preact';
+import {
+  boardList,
+  activeBoardId,
+  createAndOpenBoard,
+  deleteBoard,
+  openBoard,
+  updateBoard,
+  type BoardSummary,
+} from '../state/boards-store';
+import { categoryAncestors, MIGRATED_SNAPSHOT_CATEGORY } from '../../shared/boards.js';
+import { askText } from './TextPrompt';
+import { BoardFolderDialog } from './BoardFolderDialog';
+import { requestJson } from '../state/intent-bridge';
+import { focusNode, nodes } from '../state/canvas-store';
+import { BoardCopyDialog } from './BoardCopyDialog';
+
+interface LibraryHit {
+  boardId: string;
+  boardTitle: string;
+  cardId: string;
+  title: string | null;
+  snippet: string;
+}
+
+function timeAgo(iso: string | null): string {
+  if (!iso) return 'never opened';
+  const mins = Math.floor((Date.now() - new Date(iso).getTime()) / 60000);
+  if (mins < 1) return 'just now';
+  if (mins < 60) return `${mins}m ago`;
+  const hrs = Math.floor(mins / 60);
+  if (hrs < 24) return `${hrs}h ago`;
+  const days = Math.floor(hrs / 24);
+  if (days < 30) return `${days}d ago`;
+  return new Date(iso).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
+}
+
+function nodesLabel(count: number): string {
+  return `${count} node${count !== 1 ? 's' : ''}`;
+}
+
+export async function promptNewBoard(): Promise<void> {
+  const name = await askText('New board', 'Board name', { confirm: 'Create' });
+  if (name) await createAndOpenBoard(name);
+}
+
+const COLLAPSED_KEY = 'pmx-canvas-home-collapsed';
+
+/** Which categories this viewer folded away; the migrated-snapshot shelf starts folded. */
+function readCollapsed(): Set<string> {
+  try {
+    const raw = localStorage.getItem(COLLAPSED_KEY);
+    if (raw) return new Set(JSON.parse(raw) as string[]);
+  } catch {
+    // Storage can be unavailable (private windows, embedded panes): fall back to the default.
+  }
+  return new Set([MIGRATED_SNAPSHOT_CATEGORY]);
+}
+
+function writeCollapsed(collapsed: Set<string>): void {
+  try {
+    localStorage.setItem(COLLAPSED_KEY, JSON.stringify([...collapsed]));
+  } catch {
+    // Folding still works for this visit without storage.
+  }
+}
+
+/**
+ * Home (plan 012): the view when no board is open — every board, filed under
+ * its category (most recently opened first within each). Categories keep the
+ * library findable as it grows into the working memory of many sessions.
+ * Deleting asks in place, naming the board and what it holds; browser confirm
+ * dialogs are no-ops in agent panes.
+ */
+export function HomeView() {
+  const boards = boardList.value;
+  const [confirmingDelete, setConfirmingDelete] = useState<string | null>(null);
+  const [moving, setMoving] = useState<string | null>(null);
+  const [copying, setCopying] = useState<string | null>(null);
+  const [search, setSearch] = useState('');
+  const [hits, setHits] = useState<LibraryHit[]>([]);
+  const [collapsed, setCollapsed] = useState<Set<string>>(readCollapsed);
+  const openHitSequence = useRef(0);
+  const folders = [
+    ...new Set(boards.flatMap((board) => (board.category ? categoryAncestors(board.category) : []))),
+  ].sort((a, b) => a.localeCompare(b));
+  const query = search.trim().toLocaleLowerCase();
+  const visible = boards.filter((board) => `${board.name} ${board.category ?? ''}`.toLocaleLowerCase().includes(query));
+  const visibleFolders = new Set(visible.flatMap((board) => (board.category ? categoryAncestors(board.category) : [])));
+  const movingBoard = boards.find((board) => board.id === moving);
+  const copyingBoard = boards.find((board) => board.id === copying);
+
+  useEffect(() => {
+    const q = search.trim();
+    if (!q) {
+      setHits([]);
+      return;
+    }
+    let cancelled = false;
+    const timer = window.setTimeout(() => {
+      void requestJson<{ results?: LibraryHit[] } | null>(
+        'searchLibrary',
+        `/api/canvas/search?q=${encodeURIComponent(q)}&scope=library&limit=30`,
+        null,
+      ).then((result) => {
+        if (!cancelled) setHits(result?.results ?? []);
+      });
+    }, 150);
+    return () => {
+      cancelled = true;
+      window.clearTimeout(timer);
+    };
+  }, [search]);
+
+  const openHit = async (hit: LibraryHit) => {
+    const sequence = ++openHitSequence.current;
+    await openBoard(hit.boardId);
+    for (let attempt = 0; attempt < 40; attempt++) {
+      if (sequence !== openHitSequence.current || activeBoardId.value !== hit.boardId) return;
+      if (nodes.value.has(hit.cardId)) {
+        focusNode(hit.cardId);
+        return;
+      }
+      await new Promise((resolve) => window.setTimeout(resolve, 25));
+    }
+  };
+
+  const toggle = (name: string) => {
+    const next = new Set(collapsed);
+    if (next.has(name)) next.delete(name);
+    else next.add(name);
+    setCollapsed(next);
+    writeCollapsed(next);
+  };
+
+  const rename = async (board: BoardSummary) => {
+    const name = await askText('Rename board', 'Board name', { initial: board.name, confirm: 'Rename' });
+    if (name && name !== board.name) await updateBoard(board.id, { name });
+  };
+
+  const row = (board: BoardSummary) =>
+    confirmingDelete === board.id ? (
+      <li key={board.id} class="home-board is-confirming" data-testid="home-board">
+        <div class="home-board-confirm-text">
+          Delete <strong>{board.name}</strong> and its {nodesLabel(board.nodeCount)} and snapshots? This can't be
+          undone.
+        </div>
+        <div class="home-board-actions">
+          <button type="button" class="home-board-action" onClick={() => setConfirmingDelete(null)}>
+            Cancel
+          </button>
+          <button
+            type="button"
+            class="home-board-action is-danger"
+            onClick={() => {
+              setConfirmingDelete(null);
+              void deleteBoard(board.id);
+            }}
+          >
+            Delete board
+          </button>
+        </div>
+      </li>
+    ) : (
+      <li key={board.id} class="home-board" data-testid="home-board">
+        <button type="button" class="home-board-open" onClick={() => void openBoard(board.id)}>
+          <span class="home-board-name">{board.name}</span>
+          <span class="home-board-meta">
+            {nodesLabel(board.nodeCount)} · {timeAgo(board.lastOpenedAt)}
+          </span>
+        </button>
+        <div class="home-board-actions">
+          <button type="button" class="home-board-action" aria-haspopup="dialog" onClick={() => setMoving(board.id)}>
+            Move
+          </button>
+          <button type="button" class="home-board-action" aria-haspopup="dialog" onClick={() => setCopying(board.id)}>
+            Create from…
+          </button>
+          <button type="button" class="home-board-action" onClick={() => void rename(board)}>
+            Rename
+          </button>
+          <button type="button" class="home-board-action" onClick={() => setConfirmingDelete(board.id)}>
+            Delete
+          </button>
+        </div>
+      </li>
+    );
+
+  const folder = (path: string, depth: number): ComponentChildren => {
+    const children = folders.filter(
+      (candidate) => candidate.slice(0, candidate.lastIndexOf('/')) === path && candidate.includes('/'),
+    );
+    const direct = visible.filter((board) => board.category === path);
+    const count = visible.filter((board) => board.category === path || board.category?.startsWith(`${path}/`)).length;
+    const expanded = !!query || !collapsed.has(path);
+    return (
+      <section key={path} class="home-section" data-testid="home-section" data-folder={path} aria-label={path}>
+        <button type="button" class="home-section-head" aria-expanded={expanded} onClick={() => toggle(path)}>
+          <svg class="home-section-chevron" viewBox="0 0 20 20" width="18" height="18" fill="none" aria-hidden="true">
+            <path d="m7.5 4.75 5.25 5.25-5.25 5.25" />
+          </svg>
+          <svg class="home-section-folder" viewBox="0 0 20 20" width="18" height="18" fill="none" aria-hidden="true">
+            <path d="M2.75 5.75A1.75 1.75 0 0 1 4.5 4h3l1.75 2h6.25a1.75 1.75 0 0 1 1.75 1.75v6.5A1.75 1.75 0 0 1 15.5 16h-11a1.75 1.75 0 0 1-1.75-1.75v-8.5Z" />
+          </svg>
+          <span class="home-section-name">{path.split('/').at(-1)}</span>
+          <span class="home-section-count">{count}</span>
+        </button>
+        {expanded && (
+          <div class="home-folder-children" style={{ marginLeft: depth < 5 ? '14px' : '0' }}>
+            {children.filter((child) => visibleFolders.has(child)).map((child) => folder(child, depth + 1))}
+            {direct.length > 0 && (
+              <ul class="home-view-list" aria-label={`Boards in ${path}`}>
+                {direct.map(row)}
+              </ul>
+            )}
+          </div>
+        )}
+      </section>
+    );
+  };
+
+  return (
+    <div class="home-view" data-testid="home-view">
+      <div class="home-view-inner">
+        <div class="home-view-head">
+          <h1 class="home-view-title">Boards</h1>
+          <button type="button" class="home-view-new" onClick={() => void promptNewBoard()}>
+            New board
+          </button>
+        </div>
+        <input
+          class="text-prompt-input home-search"
+          type="search"
+          aria-label="Find boards and folders"
+          placeholder="Find boards and folders…"
+          value={search}
+          onInput={(event) => setSearch(event.currentTarget.value)}
+        />
+        {boards.length === 0 ? (
+          <div class="home-view-empty">No boards yet. Create one, or let an agent start writing — it opens one.</div>
+        ) : query && hits.length > 0 ? (
+          <ul class="home-view-list" aria-label="Library search results">
+            {hits.map((hit) => (
+              <li class="home-board" key={`${hit.boardId}:${hit.cardId}`}>
+                <button type="button" class="home-board-open" onClick={() => void openHit(hit)}>
+                  <span class="home-board-name">{hit.title || hit.boardTitle}</span>
+                  <span class="home-board-meta">
+                    {hit.boardTitle} · {hit.snippet}
+                  </span>
+                </button>
+              </li>
+            ))}
+          </ul>
+        ) : visible.length === 0 ? (
+          <div class="home-view-empty" role="status">
+            No boards match “{search}”.
+          </div>
+        ) : (
+          <>
+            {folders.filter((path) => !path.includes('/') && visibleFolders.has(path)).map((path) => folder(path, 0))}
+            {visible.some((board) => !board.category) && (
+              <section aria-label="Unfiled boards">
+                {folders.length > 0 && <div class="home-folder-hint">Unfiled boards</div>}
+                <ul class="home-view-list">{visible.filter((board) => !board.category).map(row)}</ul>
+              </section>
+            )}
+          </>
+        )}
+      </div>
+      {movingBoard && (
+        <BoardFolderDialog key={movingBoard.id} board={movingBoard} folders={folders} onClose={() => setMoving(null)} />
+      )}
+      {copyingBoard && <BoardCopyDialog key={copyingBoard.id} board={copyingBoard} onClose={() => setCopying(null)} />}
+    </div>
+  );
+}

package/src/client/canvas/SessionPanel.tsx

@@ -8,6 +8,7 @@ import {
   type ApprovalGateView,
   endSession,
   heldGates,
+  resolvedGates,
   pendingGates,
   refreshTimeline,
   reopenGate,
@@ -195,6 +196,28 @@ function HeldGateRow({ gate }: { gate: ApprovalGateView }) {
   );
 }
 
+function answerLabel(gate: ApprovalGateView): string {
+  const by = gate.resolvedBy;
+  if (!by) return gate.status;
+  const decision = gate.status === 'approved' ? 'Approved' : 'Rejected';
+  if (by.actor === 'human') return `${decision} by you`;
+  if (by.actor === 'system') return `${decision} by system`;
+  const name = by.agentId || by.source || 'agent';
+  return `${gate.selfAnswer ? 'Self-' : ''}${decision.toLowerCase()} by ${name}`;
+}
+
+function ResolvedGateRow({ gate }: { gate: ApprovalGateView }) {
+  return (
+    <li class={`session-item status-${gate.status}`} data-gate-id={gate.id}>
+      <span class="session-glyph" aria-hidden="true" />
+      <div class="session-item-main">
+        <span class="session-item-title">{gate.title}</span>
+        <div class="session-item-detail">{answerLabel(gate)}</div>
+      </div>
+    </li>
+  );
+}
+
 /**
  * Scope row under the header: the fence the human granted, or the affordance
  * to grant one from the current selection. The server refuses agent writes
@@ -296,6 +319,7 @@ export function SessionPanel() {
   const items = sessionWorkItems.value;
   const gates = pendingGates.value;
   const held = heldGates.value;
+  const resolved = resolvedGates.value;
   const entries = timelineEntries.value;
   const [workOpen, setWorkOpen] = useState(false);
   // Which filter chip the pointer/focus is on — drives the caption under the
@@ -435,7 +459,7 @@ export function SessionPanel() {
                   </span>
                 </button>
                 {showList &&
-                  (gates.length === 0 && held.length === 0 && items.length === 0 ? (
+                  (gates.length === 0 && held.length === 0 && resolved.length === 0 && items.length === 0 ? (
                     <div class="session-empty">No work items yet — the agent's tasks and gates appear here.</div>
                   ) : (
                     <ul class="session-list" aria-live="polite" aria-label="Work items and gates">
@@ -445,6 +469,9 @@ export function SessionPanel() {
                       {held.map((gate) => (
                         <HeldGateRow key={gate.id} gate={gate} />
                       ))}
+                      {resolved.map((gate) => (
+                        <ResolvedGateRow key={gate.id} gate={gate} />
+                      ))}
                       {items.map((item) => (
                         <WorkItemRow key={item.id} item={item} />
                       ))}

package/src/client/canvas/ToolRail.tsx

@@ -30,8 +30,12 @@ import {
   forceDirectedArrange,
   nodes,
   traceEnabled,
+  viewport,
 } from '../state/canvas-store';
+import { importFiles } from './import-files';
+import { canvasArea } from './canvas-area';
 import { saveCanvasTheme } from '../state/intent-bridge';
+import { openBoard } from '../state/boards-store';
 import { createNodeInView } from './create-in-view';
 import { askText } from './TextPrompt';
 import { FeedbackDialog } from './FeedbackDialog';
@@ -175,6 +179,7 @@ export function ToolRail({
   const [openMenu, setOpenMenu] = useState<null | 'theme' | 'annotate'>(null);
   const [menuAnchor, setMenuAnchor] = useState<{ top: number; bottom: number; right: number } | null>(null);
   const railRef = useRef<HTMLDivElement>(null);
+  const documentInput = useRef<HTMLInputElement>(null);
 
   const toggleMenu = (menu: 'theme' | 'annotate') => (e: MouseEvent) => {
     if (openMenu === menu) {
@@ -240,9 +245,18 @@ export function ToolRail({
   return (
     <>
       <div class="tool-rail" ref={railRef} role="toolbar" aria-label="Canvas tools" aria-orientation="vertical">
-        <span class="rail-brand" title="PMX Canvas" aria-label="PMX Canvas">
-          <IconLogo size={22} />
-        </span>
+        <RailButton
+          label="Home"
+          ariaLabel="PMX Canvas — Home"
+          onClick={() => {
+            setOpenMenu(null);
+            void openBoard(null).catch((error) => logRailError('openHome', error));
+          }}
+        >
+          <span class="rail-brand">
+            <IconLogo size={22} />
+          </span>
+        </RailButton>
 
         <RailButton
           label="Bug and feedback"
@@ -322,6 +336,27 @@ export function ToolRail({
         <RailButton label="File" shortcut="Shift+F" onClick={() => promptedCreate('file')}>
           <IconNodeFile size={15} />
         </RailButton>
+        <RailButton label="Attach document" onClick={() => documentInput.current?.click()}>
+          <span aria-hidden="true">↥</span>
+        </RailButton>
+        <input
+          ref={documentInput}
+          type="file"
+          hidden
+          multiple
+          accept=".pdf,.ppt,.pptx,.xls,.xlsx,.doc,.docx,.odt,.ods,.odp"
+          aria-label="Attach documents"
+          onChange={(event) => {
+            const area = canvasArea();
+            const view = viewport.value;
+            void importFiles(
+              Array.from(event.currentTarget.files ?? []),
+              (area.width / 2 - view.x) / view.scale,
+              (area.height / 2 - view.y) / view.scale,
+            );
+            event.currentTarget.value = '';
+          }}
+        />
         <RailButton label="Webpage" shortcut="W" onClick={() => promptedCreate('webpage')}>
           <IconNodeWebpage size={15} />
         </RailButton>