pmx-canvas 0.4.8 → 0.5.0

package/src/client/canvas/CommandPalette.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import { canvasArea } from './canvas-area';
 import {
   autoArrange,
   canvasTheme,
@@ -8,12 +9,17 @@ import {
   nodes,
   searchHighlightIds,
 } from '../state/canvas-store';
-import { createNodeFromClient, saveCanvasTheme } from '../state/intent-bridge';
+import { saveCanvasTheme } from '../state/intent-bridge';
+import { createNodeInView } from './create-in-view';
+import { sessionActive } from '../state/presence-store';
+import { startSession } from '../state/session-store';
 import { TYPE_LABELS, type CanvasNodeState } from '../types';
 import { invalidateTokenCache } from '../theme/tokens';
 import { clearThemeOverride } from '../state/theme-override';
+import { getNodeIcon, IconArrange, IconFitAll, IconMinimap, IconMoon, IconNodeMarkdown, IconSteer } from '../icons';
 
-import { MOD_KEY } from '../utils/platform';
+import { modChord } from '../utils/platform';
+import { useFocusTrap } from './use-focus-trap';
 
 // ── Types ───────────────────────────────────────────────────
 interface PaletteItem {
@@ -21,8 +27,10 @@ interface PaletteItem {
   kind: 'node' | 'action';
   label: string;
   description?: string;
-  badge: string;
-  badgeClass?: string;
+  /** Keyboard shortcut shown as a kbd on action rows. */
+  shortcut?: string;
+  icon: (p: { size?: number; class?: string }) => preact.JSX.Element;
+  iconTone?: 'accent' | 'purple' | 'muted';
   nodeType?: CanvasNodeState['type'];
   action: () => void;
 }
@@ -100,6 +108,8 @@ export function CommandPalette({ onClose, onToggleMinimap }: { onClose: () => vo
   const [selectedIndex, setSelectedIndex] = useState(0);
   const inputRef = useRef<HTMLInputElement>(null);
   const listRef = useRef<HTMLDivElement>(null);
+  const dialogRef = useRef<HTMLDivElement>(null);
+  useFocusTrap(dialogRef, true, { initial: inputRef });
 
   // Autofocus
   useEffect(() => {
@@ -114,12 +124,20 @@ export function CommandPalette({ onClose, onToggleMinimap }: { onClose: () => vo
     for (const node of nodes.value.values()) {
       const title = (node.data.title as string) || TYPE_LABELS[node.type];
       const content = (node.data.content as string) || (node.data.path as string) || '';
+      const childCount = node.type === 'group' && Array.isArray(node.data.children) ? node.data.children.length : 0;
       items.push({
         id: `node:${node.id}`,
         kind: 'node',
         label: title,
-        description: content.length > 80 ? content.slice(0, 80) + '...' : content || undefined,
-        badge: TYPE_LABELS[node.type],
+        description:
+          node.type === 'group'
+            ? `group · ${childCount} node${childCount === 1 ? '' : 's'}`
+            : content.length > 60
+              ? `${TYPE_LABELS[node.type].toLowerCase()} · ${content.slice(0, 60)}…`
+              : content
+                ? `${TYPE_LABELS[node.type].toLowerCase()} · ${content}`
+                : TYPE_LABELS[node.type].toLowerCase(),
+        icon: getNodeIcon(node.type),
         nodeType: node.type,
         action: () => {
           focusNode(node.id);
@@ -129,26 +147,50 @@ export function CommandPalette({ onClose, onToggleMinimap }: { onClose: () => vo
     }
 
     // Action items
-    const actions: Array<{ label: string; badge: string; action: () => void }> = [
+    const actions: Array<{
+      label: string;
+      shortcut?: string;
+      icon: PaletteItem['icon'];
+      iconTone?: PaletteItem['iconTone'];
+      action: () => void;
+    }> = [
       {
-        label: 'New note (markdown node)',
-        badge: 'CREATE',
+        label: 'New markdown note',
+        shortcut: 'M',
+        icon: IconNodeMarkdown,
+        iconTone: 'accent',
         action: () => {
-          createNodeFromClient({ type: 'markdown', title: 'New note', width: 520, height: 360 });
+          void createNodeInView({ type: 'markdown', title: 'New note', width: 520, height: 360 });
           onClose();
         },
       },
+      ...(sessionActive.value
+        ? []
+        : [
+            {
+              label: 'Start agent session',
+              icon: IconSteer,
+              iconTone: 'purple' as const,
+              action: () => {
+                void startSession();
+                onClose();
+              },
+            },
+          ]),
       {
-        label: 'Fit all nodes',
-        badge: 'VIEW',
+        label: 'Fit view',
+        shortcut: 'F',
+        icon: IconFitAll,
+        iconTone: 'muted',
         action: () => {
-          fitAll(window.innerWidth, window.innerHeight);
+          fitAll(canvasArea().width, canvasArea().height);
           onClose();
         },
       },
       {
         label: 'Auto-arrange (grid)',
-        badge: 'LAYOUT',
+        icon: IconArrange,
+        iconTone: 'muted',
         action: () => {
           autoArrange();
           onClose();
@@ -156,7 +198,8 @@ export function CommandPalette({ onClose, onToggleMinimap }: { onClose: () => vo
       },
       {
         label: 'Auto-arrange (graph-aware)',
-        badge: 'LAYOUT',
+        icon: IconArrange,
+        iconTone: 'muted',
         action: () => {
           forceDirectedArrange();
           onClose();
@@ -164,7 +207,8 @@ export function CommandPalette({ onClose, onToggleMinimap }: { onClose: () => vo
       },
       {
         label: 'Toggle minimap',
-        badge: 'VIEW',
+        icon: IconMinimap,
+        iconTone: 'muted',
         action: () => {
           onToggleMinimap();
           onClose();
@@ -172,7 +216,8 @@ export function CommandPalette({ onClose, onToggleMinimap }: { onClose: () => vo
       },
       {
         label: 'Toggle theme (dark/light)',
-        badge: 'THEME',
+        icon: IconMoon,
+        iconTone: 'muted',
         action: () => {
           const next = canvasTheme.value === 'dark' ? 'light' : 'dark';
           // An explicit pick ends any ?theme= session override, same as the
@@ -192,8 +237,9 @@ export function CommandPalette({ onClose, onToggleMinimap }: { onClose: () => vo
         id: `action:${a.label}`,
         kind: 'action',
         label: a.label,
-        badge: a.badge,
-        badgeClass: 'command-palette-badge--action',
+        ...(a.shortcut ? { shortcut: a.shortcut } : {}),
+        icon: a.icon,
+        ...(a.iconTone ? { iconTone: a.iconTone } : {}),
         action: a.action,
       });
     }
@@ -229,6 +275,9 @@ export function CommandPalette({ onClose, onToggleMinimap }: { onClose: () => vo
     // Sort by score descending
     filtered.sort((a, b) => b.score - a.score);
   }
+  // Grouped render order (design item 7): Actions first, then Jump to.
+  filtered = [...filtered.filter((item) => item.kind === 'action'), ...filtered.filter((item) => item.kind === 'node')];
+  const firstNodeIndex = filtered.findIndex((item) => item.kind === 'node');
 
   // ── Sync spatial search highlights to canvas ──────────────
   useEffect(() => {
@@ -292,48 +341,74 @@ export function CommandPalette({ onClose, onToggleMinimap }: { onClose: () => vo
 
   return (
     <div class="command-palette-backdrop" onMouseDown={onClose}>
-      <div class="command-palette" onMouseDown={(e) => e.stopPropagation()}>
-        <input
-          ref={inputRef}
-          type="text"
-          class="command-palette-input"
-          value={query}
-          onInput={(e) => setQuery((e.target as HTMLInputElement).value)}
-          onKeyDown={handleKeyDown}
-          placeholder={`Search nodes and actions... (${MOD_KEY}+K)`}
-        />
-        <div class="command-palette-hint">
-          <span>
-            <kbd>{'\u2191'}</kbd>
-            <kbd>{'\u2193'}</kbd> navigate
-          </span>
-          <span>
-            <kbd>{'\u21B5'}</kbd> select
-          </span>
-          <span>
-            <kbd>esc</kbd> close
-          </span>
-          <span>
-            <kbd>type:</kbd> filter by type
-          </span>
+      <div
+        ref={dialogRef}
+        class="command-palette"
+        role="dialog"
+        aria-modal="true"
+        aria-label="Search and commands"
+        onMouseDown={(e) => e.stopPropagation()}
+      >
+        <div class="command-palette-search">
+          <svg
+            width="15"
+            height="15"
+            viewBox="0 0 16 16"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            aria-hidden="true"
+          >
+            <circle cx="7" cy="7" r="4.5" />
+            <line x1="10.5" y1="10.5" x2="14.5" y2="14.5" />
+          </svg>
+          <input
+            ref={inputRef}
+            type="text"
+            class="command-palette-input"
+            value={query}
+            onInput={(e) => setQuery((e.target as HTMLInputElement).value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Search nodes, run actions, jump to…"
+            aria-label="Search nodes, run actions, jump to"
+          />
+          <kbd class="command-palette-esc">esc</kbd>
         </div>
         <div class="command-palette-results" ref={listRef}>
           {filtered.length === 0 && <div class="command-palette-empty">No matching nodes or actions</div>}
-          {filtered.map((item, i) => (
-            <button
-              key={item.id}
-              type="button"
-              class={`command-palette-item${i === clampedIndex ? ' selected' : ''}`}
-              onMouseEnter={() => setSelectedIndex(i)}
-              onClick={() => item.action()}
-            >
-              <span class={`command-palette-badge${item.badgeClass ? ` ${item.badgeClass}` : ''}`}>{item.badge}</span>
-              <span class="command-palette-label">
-                {item.indices.length > 0 ? highlightMatch(item.label, item.indices) : item.label}
-              </span>
-              {item.description && <span class="command-palette-desc">{item.description}</span>}
-            </button>
-          ))}
+          {filtered.map((item, i) => {
+            const Icon = item.icon;
+            const heading = i === 0 && item.kind === 'action' ? 'Actions' : i === firstNodeIndex ? 'Jump to' : null;
+            return (
+              <div key={item.id} class="command-palette-row">
+                {heading && <div class="command-palette-group">{heading}</div>}
+                <button
+                  type="button"
+                  class={`command-palette-item${i === clampedIndex ? ' selected' : ''}`}
+                  onMouseEnter={() => setSelectedIndex(i)}
+                  onClick={() => item.action()}
+                >
+                  <span class={`command-palette-icon tone-${item.iconTone ?? 'kind'}`} aria-hidden="true">
+                    <Icon size={14} />
+                  </span>
+                  <span class="command-palette-label">
+                    {item.indices.length > 0 ? highlightMatch(item.label, item.indices) : item.label}
+                    {item.description && <span class="command-palette-desc"> — {item.description}</span>}
+                  </span>
+                  {item.shortcut && <kbd class="command-palette-kbd">{item.shortcut}</kbd>}
+                </button>
+              </div>
+            );
+          })}
+        </div>
+        <div class="command-palette-hint">
+          <span>↑↓ navigate</span>
+          <span>↵ open</span>
+          <span>esc close</span>
+          <span>type: filter</span>
+          <span class="command-palette-hint-spacer" />
+          <span>{modChord('K')}</span>
         </div>
       </div>
     </div>

package/src/client/canvas/ConnectionBanner.tsx

@@ -0,0 +1,65 @@
+import { computed } from '@preact/signals';
+import {
+  connectionStatus,
+  hasInitialServerLayout,
+  reconnectAttempt,
+  reconnectDelay,
+  workbenchConnectionEpoch,
+} from '../state/canvas-store';
+
+/**
+ * Degraded connection states (rail-chrome-v2 phase 7, design item 14), mapped
+ * onto the transport the bridge already runs:
+ * - reconnecting: the stream (SSE or the polling fallback) is down and the
+ *   bridge is backing off. Edits still go over HTTP; the board may be stale.
+ * - resyncing: a transport came back after a drop and the full `connected`
+ *   snapshot is being applied — the seq cursor was dropped, the board reloads
+ *   from the server's snapshot without touching local edits.
+ * Neither shows on first boot; the top-bar dot carries the same state.
+ */
+export type DegradedState = 'reconnecting' | 'resyncing' | null;
+
+export const degradedState = computed<DegradedState>(() => {
+  if (connectionStatus.value === 'disconnected') return 'reconnecting';
+  if (connectionStatus.value === 'connected' && !hasInitialServerLayout.value && workbenchConnectionEpoch.value > 1) {
+    return 'resyncing';
+  }
+  return null;
+});
+
+export function ConnectionBanner() {
+  const state = degradedState.value;
+  if (!state) return null;
+  if (state === 'reconnecting') {
+    const attempt = reconnectAttempt.value;
+    const delay = reconnectDelay.value;
+    return (
+      <div class="connection-banner is-reconnecting" role="status" data-testid="connection-banner">
+        <span class="connection-banner-glyph" aria-hidden="true">
+          ↻
+        </span>
+        <span class="connection-banner-text">
+          <b>Reconnecting…</b> live updates are paused; edits still save, the board may be stale until the stream
+          returns.
+        </span>
+        <span class="connection-banner-meta">
+          {attempt > 0 ? `retry ${attempt}` : 'retrying'}
+          {delay > 0 ? ` · ${Math.max(1, Math.round(delay / 1000))}s` : ''}
+        </span>
+      </div>
+    );
+  }
+  return (
+    <div class="connection-banner is-resyncing" role="status" data-testid="connection-banner">
+      <span class="connection-banner-glyph" aria-hidden="true">
+        ⟳
+      </span>
+      <span class="connection-banner-text">
+        <b>Resyncing from snapshot</b> — the event cursor went stale; the board reloads without losing local edits.
+      </span>
+      <span class="connection-banner-progress" aria-hidden="true">
+        <span class="connection-banner-progress-fill" />
+      </span>
+    </div>
+  );
+}

package/src/client/canvas/ContextMenu.tsx

@@ -2,7 +2,6 @@ import type { ComponentChildren } from 'preact';
 import { useCallback, useEffect, useState } from 'preact/hooks';
 import {
   contextPinnedNodeIds,
-  dockNode,
   edges,
   expandNode,
   focusNode,
@@ -12,7 +11,6 @@ import {
   removeNode,
   toggleCollapsed,
   toggleContextPin,
-  undockNode,
   updateNode,
 } from '../state/canvas-store';
 import {
@@ -20,11 +18,15 @@ import {
   createGroupFromClient,
   createNodeFromClient,
   refreshWebpageNodeFromClient,
+  removeEdgeFromClient,
   removeNodeFromClient,
   sendIntent,
+  setGroupChildrenFromClient,
   ungroupFromClient,
+  updateEdgeFromClient,
   updateNodeFromClient,
 } from '../state/intent-bridge';
+import { askText } from './TextPrompt';
 import { EXPANDABLE_TYPES } from '../types';
 import type { CanvasNodeState } from '../types';
 
@@ -41,6 +43,12 @@ export type MenuState =
       y: number;
       canvasX: number;
       canvasY: number;
+    }
+  | {
+      kind: 'edge';
+      x: number;
+      y: number;
+      edgeId: string;
     };
 
 export function useContextMenu() {
@@ -58,6 +66,12 @@ export function useContextMenu() {
     setMenu({ kind: 'canvas', x: e.clientX, y: e.clientY, canvasX, canvasY });
   }, []);
 
+  const openEdgeMenu = useCallback((e: MouseEvent, edgeId: string) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setMenu({ kind: 'edge', x: e.clientX, y: e.clientY, edgeId });
+  }, []);
+
   const closeMenu = useCallback(() => setMenu(null), []);
 
   useEffect(() => {
@@ -74,7 +88,7 @@ export function useContextMenu() {
     };
   }, [menu]);
 
-  return { menu, openNodeMenu, openCanvasMenu, closeMenu };
+  return { menu, openNodeMenu, openCanvasMenu, openEdgeMenu, closeMenu };
 }
 
 interface ContextMenuProps {
@@ -99,6 +113,44 @@ export function ContextMenu({ menu, onClose }: ContextMenuProps) {
     const node = nodes.value.get(menu.nodeId);
     if (!node) return null;
     items = buildNodeMenuItems(node);
+  } else if (menu.kind === 'edge') {
+    // The full edge lifecycle from one menu: relabel, retype, restyle, delete —
+    // a drawn edge used to be frozen the moment it existed.
+    const edgeId = menu.edgeId;
+    const edge = edges.value.get(edgeId);
+    items = [
+      {
+        label: edge?.label
+          ? `Edit label “${edge.label.slice(0, 18)}${edge.label.length > 18 ? '…' : ''}”`
+          : 'Add label…',
+        action: () => {
+          void askText('Edge label (empty clears it)', 'label text', {
+            initial: edge?.label ?? '',
+            allowEmpty: true,
+            confirm: 'Save',
+          }).then((next) => {
+            if (next === null) return;
+            void updateEdgeFromClient(edgeId, { label: next });
+          });
+        },
+      },
+      { separator: true },
+      ...(['flow', 'depends-on', 'relation', 'references'] as const).map((type) => ({
+        label: `${edge?.type === type ? '✓' : ' '} ${type}`,
+        action: () => void updateEdgeFromClient(edgeId, { type }),
+      })),
+      { separator: true },
+      ...(['solid', 'dashed', 'dotted'] as const).map((style) => ({
+        label: `${(edge?.style ?? 'solid') === style ? '✓' : ' '} ${style}`,
+        action: () => void updateEdgeFromClient(edgeId, { style }),
+      })),
+      { separator: true },
+      {
+        label: 'Delete edge',
+        danger: true,
+        action: () => void removeEdgeFromClient(edgeId),
+      },
+    ];
   } else {
     items = buildCanvasMenuItems(menu.canvasX, menu.canvasY);
   }
@@ -147,7 +199,7 @@ export function ContextMenu({ menu, onClose }: ContextMenuProps) {
           <button
             key={itemKey}
             type="button"
-            class="context-menu-item"
+            class={`context-menu-item${item.danger ? ' is-danger' : ''}`}
             onClick={() => {
               item.action?.();
               onClose();
@@ -167,6 +219,8 @@ interface MenuItem {
   shortcut?: string;
   action?: () => void;
   separator?: boolean;
+  /** Destructive item — rendered in the danger color. */
+  danger?: boolean;
   render?: (onClose: () => void) => ComponentChildren;
 }
 
@@ -294,7 +348,9 @@ async function createPromptedNode(opts: {
   titleFallback: string;
   errorMessage: string;
 }): Promise<void> {
-  const value = window.prompt(opts.promptLabel, opts.placeholder ?? '');
+  // In-canvas prompt: `window.prompt` (and `window.alert`) are silent no-ops
+  // in embedded browser panes — these menu items "did nothing" there.
+  const value = await askText(opts.promptLabel, opts.placeholder ?? '');
   if (!value) return;
   const trimmed = value.trim();
   if (!trimmed) return;
@@ -311,7 +367,7 @@ async function createPromptedNode(opts: {
   });
 
   if (!result.ok) {
-    window.alert(opts.errorMessage);
+    console.error(`[canvas-menu] ${opts.errorMessage}`);
   }
 }
 
@@ -561,35 +617,40 @@ function buildNodeMenuItems(node: CanvasNodeState): MenuItem[] {
     if (childIds.length > 0) {
       items.push({
         label: `Ungroup (${childIds.length} node${childIds.length !== 1 ? 's' : ''})`,
-        action: () => ungroupFromClient(node.id),
+        // Dissolve — the same op an agent's ungroup runs.
+        action: () => {
+          removeNode(node.id);
+          void ungroupFromClient(node.id);
+        },
       });
     }
   }
 
-  // Dock/undock for status and ledger nodes
-  if (node.type === 'status' || node.type === 'ledger') {
-    items.push({ separator: true });
-    if (node.dockPosition !== null) {
-      items.push({
-        label: 'Undock to canvas',
-        action: () => undockNode(node.id),
-      });
-    } else {
-      items.push({
-        label: 'Dock left of toolbar',
-        action: () => dockNode(node.id, 'left'),
-      });
-      items.push({
-        label: 'Dock right of toolbar',
-        action: () => dockNode(node.id, 'right'),
-      });
-    }
+  // A member of a frame can leave it alone — the drag-out gesture ("release
+  // to remove") exists but is easy to miss; this is the discoverable path.
+  const parentGroupId = typeof node.data.parentGroup === 'string' ? node.data.parentGroup : null;
+  const parentGroup = parentGroupId ? nodes.value.get(parentGroupId) : undefined;
+  if (parentGroup && parentGroup.type === 'group') {
+    const parentTitle =
+      typeof parentGroup.data.title === 'string' && parentGroup.data.title ? parentGroup.data.title : 'frame';
+    const siblings = Array.isArray(parentGroup.data.children)
+      ? (parentGroup.data.children as string[]).filter((childId) => childId !== node.id)
+      : [];
+    items.push({
+      label: `Remove from “${parentTitle}”`,
+      action: () => {
+        void setGroupChildrenFromClient(parentGroup.id, siblings);
+      },
+    });
   }
 
-  // Report #64: status nodes are removable like any other node type.
+  // Report #64: status nodes are removable like any other node type. Named
+  // "Delete" — "Close" did not read as destructive, and a frame's delete
+  // deserves the honest caveat that its members stay.
   items.push({ separator: true });
   items.push({
-    label: 'Close',
+    label: node.type === 'group' ? 'Delete frame (children stay)' : 'Delete',
+    danger: true,
     action: () => {
       removeNode(node.id);
       void removeNodeFromClient(node.id);

package/src/client/canvas/ContextPinBar.tsx

@@ -1,9 +1,9 @@
-import { clearContextPins, contextPinnedNodeIds, hasOpenDockedContextPanel } from '../state/canvas-store';
+import { clearContextPins, contextPinnedNodeIds } from '../state/canvas-store';
 import { attentionHistoryOpen } from '../state/attention-store';
 
 export function ContextPinBar() {
   const count = contextPinnedNodeIds.value.size;
-  if (count === 0 || attentionHistoryOpen.value || hasOpenDockedContextPanel.value) return null;
+  if (count === 0 || attentionHistoryOpen.value) return null;
 
   return (
     <div class="context-pin-bar">