pmx-canvas 0.8.2 → 0.9.0

package/src/client/canvas/CanvasViewport.tsx

@@ -1,4 +1,5 @@
 import { effect } from '@preact/signals';
+import { Component } from 'preact';
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { askText } from './TextPrompt';
 import { ContextNode } from '../nodes/ContextNode';
@@ -42,6 +43,7 @@ import { importFiles } from './import-files';
 import { IntentLayer } from './IntentLayer';
 import { AgentPresenceLayer } from './AgentPresenceLayer';
 import { HumanPresenceLayer } from './HumanPresenceLayer';
+import { NearPinCard, NearPinLayer } from './NearPinLayer';
 import { reportHumanCursor } from '../state/human-store';
 import { ScopeFenceLayer } from './ScopeFenceLayer';
 import { CanvasNode } from './CanvasNode';
@@ -94,6 +96,29 @@ function renderNodeContent(node: CanvasNodeState) {
   }
 }
 
+/**
+ * One card in the world. A drag frame replaces only the moved node's object in
+ * the nodes map, so every other card keeps its props and skips the re-render
+ * (and its header re-measure); its own signals still update it.
+ */
+class WorldNode extends Component<{
+  node: CanvasNodeState;
+  onContextMenu?: (e: MouseEvent, nodeId: string) => void;
+}> {
+  shouldComponentUpdate(next: { node: CanvasNodeState; onContextMenu?: (e: MouseEvent, nodeId: string) => void }) {
+    return next.node !== this.props.node || next.onContextMenu !== this.props.onContextMenu;
+  }
+
+  render() {
+    const { node, onContextMenu } = this.props;
+    return (
+      <CanvasNode node={node} onContextMenu={onContextMenu}>
+        {renderNodeContent(node)}
+      </CanvasNode>
+    );
+  }
+}
+
 function distanceToSegment(
   point: { x: number; y: number },
   start: { x: number; y: number },
@@ -295,6 +320,8 @@ export function CanvasViewport({
   const containerRef = usePanZoom({
     viewport,
     disabled: annotationMode,
+    onBackgroundContextMenu: onCanvasContextMenu,
+    onEdgeContextMenu,
     onViewportChange: (next) => {
       // Don't pan while lassoing — usePanZoom's pointerdown still fires
       // (native listener) before our Preact handler can stopPropagation.
@@ -683,8 +710,8 @@ export function CanvasViewport({
   );
 
   const handleContextMenu = useCallback((e: MouseEvent) => {
-    // Right-click is a pan gesture, never a menu trigger. Suppress the
-    // browser menu whether it lands on the board or bubbles from a node.
+    // usePanZoom distinguishes a background right-click from a right-drag
+    // on release. Suppress the native menu on both press and release.
     e.preventDefault();
   }, []);
 
@@ -783,6 +810,10 @@ export function CanvasViewport({
     expandedNodeId.value,
     new Set(hiddenByCollapsedGroup.value.keys()),
   );
+  const lowestZ = worldNodes.reduce((lowest, node) => Math.min(lowest, Math.floor(node.zIndex)), 0);
+  const highestZ = worldNodes.reduce((highest, node) => Math.max(highest, Math.ceil(node.zIndex)), 0);
+  // Keep group-body hit order without changing the frames' visual stacking.
+  const hitOffset = highestZ - lowestZ + 3;
   const dropTarget = dragDropTarget.value;
   const dropTargetGroup = dropTarget ? nodes.value.get(dropTarget.groupId) : undefined;
   const draggedNode = dropTarget ? nodes.value.get(dropTarget.nodeId) : undefined;
@@ -827,7 +858,9 @@ export function CanvasViewport({
         width: '100%',
         height: '100%',
         position: 'relative',
-        overflow: 'hidden',
+        // The camera owns scrolling. Hidden permits native focus/resize scroll,
+        // adding an untracked offset underneath our viewport transform.
+        overflow: 'clip',
         cursor:
           annotationTool === 'eraser'
             ? 'cell'
@@ -849,6 +882,9 @@ export function CanvasViewport({
         style={{
           transform: `matrix(${v.scale}, 0, 0, ${v.scale}, ${v.x}, ${v.y})`,
           transformOrigin: '0 0',
+          '--node-port-z': lowestZ - 1,
+          '--node-hit-offset': hitOffset,
+          '--edge-line-z': lowestZ - hitOffset - 1,
           position: 'absolute',
           top: 0,
           left: 0,
@@ -858,7 +894,9 @@ export function CanvasViewport({
         <IntentLayer />
         <AgentPresenceLayer />
         <HumanPresenceLayer />
-        <EdgeLayer nodes={nodes} edges={edges} onEdgeContextMenu={onEdgeContextMenu} />
+        <EdgeLayer nodes={nodes} edges={edges} part="lines" />
+        <EdgeLayer nodes={nodes} edges={edges} part="pills" />
+        <EdgeLayer nodes={nodes} edges={edges} part="pill-hits" />
         {draggingEdge.value && (
           <div
             class="edge-hint-pill"
@@ -893,9 +931,7 @@ export function CanvasViewport({
         <AnnotationLayer annotations={Array.from(annotations.value.values())} />
         {draftAnnotation && draftAnnotation.points.length >= 2 && <AnnotationLayer annotations={[draftAnnotation]} />}
         {worldNodes.map((node) => (
-          <CanvasNode key={node.id} node={node} onContextMenu={onNodeContextMenu}>
-            {renderNodeContent(node)}
-          </CanvasNode>
+          <WorldNode key={node.id} node={node} onContextMenu={onNodeContextMenu} />
         ))}
         {/* Snap alignment guide lines */}
         {activeGuides.value && (
@@ -952,6 +988,8 @@ export function CanvasViewport({
           }}
         />
       )}
+      <NearPinLayer />
+      <NearPinCard />
       {lassoStyle && <div class="lasso-rect" style={lassoStyle} />}
       {dropActive && (
         <div class="drop-zone-overlay">

package/src/client/canvas/CommandBar.tsx

@@ -1,22 +1,26 @@
 import { useState } from 'preact/hooks';
+import { BarHint } from './BarHint';
 import { IconSteer, IconClose } from '../icons';
-import { contextPinnedNodeIds, nodes, toggleContextPin } from '../state/canvas-store';
+import { nodes, toggleContextPin } from '../state/canvas-store';
+import { activeContextPinnedNodeIds } from '../state/knowledge-store';
 import { steerableAgents } from '../state/presence-store';
 import { sendSteering } from '../state/session-store';
 import { modChord } from '../utils/platform';
 import { ChoiceMenu } from './ChoiceMenu';
+import { agentSessionsEnabled } from '../state/workspace-settings';
+import { useChromeHeight } from './use-chrome-height';
 
 /**
  * Command bar (rail-chrome-v2 phase 5): the human's steering surface while a
  * session is attached — the design's floating composer, centered at the
- * bottom of the canvas region. Above it, the pinned context as gold ✦ chips
+ * bottom of the canvas region. Above it, the pinned context as blue chips
  * (× unpins — the same pin the node's own control toggles); the composer row
- * posts an AX steering message to the session. The context-budget meter lives
- * in the top bar (`ContextBudget`), where the mockup puts it. Replaces the
- * quiet board's pin bar only while attached.
+ * posts an AX steering message to the session. What is in the agent's
+ * context is summarised in the top bar's context chip (`ContextChip`).
  */
 export function CommandBar() {
-  const pinnedIds = [...contextPinnedNodeIds.value];
+  const barRef = useChromeHeight('--command-bar-height');
+  const pinnedIds = [...activeContextPinnedNodeIds.value];
   const nodeMap = nodes.value;
   const [draft, setDraft] = useState('');
   const [sending, setSending] = useState(false);
@@ -43,7 +47,7 @@ export function CommandBar() {
 
   const submit = async () => {
     const message = draft.trim();
-    if (!message || sending) return;
+    if (!agentSessionsEnabled.value || !message || sending) return;
     setSending(true);
     const ok = await sendSteering(message, effectiveTarget);
     setSending(false);
@@ -51,7 +55,13 @@ export function CommandBar() {
   };
 
   return (
-    <div class="command-bar" data-testid="command-bar">
+    <div
+      ref={barRef}
+      class="command-bar"
+      data-testid="command-bar"
+      hidden={!agentSessionsEnabled.value}
+      style={!agentSessionsEnabled.value ? { display: 'none' } : undefined}
+    >
       {pinnedIds.length > 0 && (
         <div class="command-bar-chips" aria-label="Pinned context">
           {pinnedIds.map((id) => {
@@ -60,21 +70,17 @@ export function CommandBar() {
               typeof node?.data.title === 'string' && node.data.title.trim() ? node.data.title : (node?.type ?? id);
             return (
               <span key={id} class="command-bar-chip" data-node-id={id}>
-                <span class="command-bar-chip-glyph" aria-hidden="true">
-                  ✦
-                </span>
-                <span class="command-bar-chip-label" title={title}>
-                  {title}
-                </span>
-                <button
-                  type="button"
-                  class="command-bar-chip-unpin"
-                  aria-label={`Unpin ${title}`}
-                  title="Remove from context"
-                  onClick={() => toggleContextPin(id)}
-                >
-                  <IconClose size={14} />
-                </button>
+                <span class="command-bar-chip-label">{title}</span>
+                <BarHint label="Remove from context" side="up">
+                  <button
+                    type="button"
+                    class="command-bar-chip-unpin"
+                    aria-label={`Unpin ${title}`}
+                    onClick={() => toggleContextPin(id)}
+                  >
+                    <IconClose size={14} />
+                  </button>
+                </BarHint>
               </span>
             );
           })}

package/src/client/canvas/CommandPalette.tsx

@@ -13,12 +13,13 @@ 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 { agentSessionsEnabled } from '../state/workspace-settings';
 import { TYPE_LABELS, type CanvasNodeState } from '../types';
 import { invalidateTokenCache } from '../theme/tokens';
 import { clearThemeOverride } from '../state/theme-override';
 import { canvasThemeScheme } from '../../shared/themes.js';
 import { getNodeIcon, IconArrange, IconFitAll, IconMinimap, IconMoon, IconNodeMarkdown, IconSteer } from '../icons';
-import { activeBoardId, openBoard } from '../state/boards-store';
+import { openMemoryTarget } from '../state/boards-store';
 import { requestJson } from '../state/intent-bridge';
 
 import { modChord } from '../utils/platform';
@@ -219,7 +220,7 @@ export function CommandPalette({ onClose, onToggleMinimap }: { onClose: () => vo
           onClose();
         },
       },
-      ...(sessionActive.value
+      ...(!agentSessionsEnabled.value || sessionActive.value
         ? []
         : [
             {
@@ -341,16 +342,8 @@ export function CommandPalette({ onClose, onToggleMinimap }: { onClose: () => vo
       indices: [],
       action: () => {
         void (async () => {
-          await openBoard(hit.boardId);
-          if (activeBoardId.value !== hit.boardId) return;
-          for (let attempt = 0; attempt < 40 && activeBoardId.value === hit.boardId; attempt++) {
-            if (nodes.value.has(hit.cardId)) {
-              focusNode(hit.cardId);
-              onClose();
-              return;
-            }
-            await new Promise((resolve) => window.setTimeout(resolve, 25));
-          }
+          await openMemoryTarget(hit);
+          onClose();
         })();
       },
     });

package/src/client/canvas/ConnectionBanner.tsx

@@ -11,7 +11,8 @@ import {
  * 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.
+ *   bridge is backing off. HTTP saves may need renewed capability after a
+ *   daemon restart; 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.
@@ -39,8 +40,7 @@ export function ConnectionBanner() {
           ↻
         </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.
+          <b>Reconnecting…</b> live updates are paused; retry refused saves after reconnect. The board may be stale.
         </span>
         <span class="connection-banner-meta">
           {attempt > 0 ? `retry ${attempt}` : 'retrying'}

package/src/client/canvas/ContextChip.tsx

@@ -0,0 +1,296 @@
+import { age } from '../utils/time-ago';
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { IconClose, IconPin } from '../icons';
+import { attentionHistoryOpen } from '../state/attention-store';
+import { activeBoardId, boardList, browsingMemory, setBoardPinned } from '../state/boards-store';
+import { clearContextPins, nodes, toggleContextPin } from '../state/canvas-store';
+import { activeContextPinnedNodeIds } from '../state/knowledge-store';
+import {
+  approxTokens,
+  briefSize,
+  formatTokens,
+  pinnedBoardReads,
+  refreshContextChip,
+} from '../state/context-chip-store';
+import { contextPinMeta, linksChanged, pinnedReadState, writerName } from '../state/context-status-store';
+import { nearPins } from '../state/near-pin-store';
+import { activeSession } from '../state/presence-store';
+import { BarHint } from './BarHint';
+import { GLYPHS } from './NodeContextMark';
+
+/** The quiet footer when Agent sessions is off; pins still curate agent context. */
+export function ContextPinBar() {
+  const count = activeContextPinnedNodeIds.value.size;
+  if (count === 0 || attentionHistoryOpen.value) return null;
+
+  return (
+    <div class="context-pin-bar" role="region" aria-label="Pinned context">
+      <IconPin size={14} />
+      <span>{plural(count, 'node')} in context</span>
+      <BarHint label="Clear all context pins" side="up" align="end">
+        <button type="button" aria-label="Clear all context pins" onClick={clearContextPins}>
+          <IconClose size={12} />
+        </button>
+      </BarHint>
+    </div>
+  );
+}
+
+/**
+ * One context chip (docs/design/ContextChip.dc.html): everything in the agent's
+ * context, in brief order — cards pinned on this board, near (derived, muted),
+ * pinned boards (sent as maps) — with what the brief costs in tokens. Opened,
+ * one list with read state and unpin.
+ */
+
+function plural(count: number, word: string): string {
+  return `${count} ${word}${count === 1 ? '' : 's'}`;
+}
+
+function nodeTitle(id: string): string {
+  const node = nodes.value.get(id);
+  return typeof node?.data.title === 'string' && node.data.title ? node.data.title : id;
+}
+
+export function ContextChip() {
+  const [open, setOpen] = useState(false);
+  const root = useRef<HTMLDivElement>(null);
+  const chip = useRef<HTMLButtonElement>(null);
+  const boardId = activeBoardId.value;
+
+  useEffect(() => {
+    if (!open) return;
+    refreshContextChip();
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key !== 'Escape') return;
+      setOpen(false);
+      chip.current?.focus();
+    };
+    const onDown = (event: PointerEvent) => {
+      if (root.current && !root.current.contains(event.target as Node)) setOpen(false);
+    };
+    window.addEventListener('keydown', onKey);
+    window.addEventListener('pointerdown', onDown);
+    return () => {
+      window.removeEventListener('keydown', onKey);
+      window.removeEventListener('pointerdown', onDown);
+    };
+  }, [open]);
+
+  const library = browsingMemory.value;
+  if (!boardId && !library) return null;
+
+  // Library curation must not expose controls for the agent's hidden active cards.
+  const cardIds = library ? [] : [...activeContextPinnedNodeIds.value];
+  const near = library ? [] : [...nearPins.value.entries()];
+  const boards = boardList.value.filter((board) => board.pin && (library || board.id !== boardId));
+  const empty = cardIds.length === 0 && boards.length === 0;
+  const pinners = [
+    ...cardIds.map((id) => contextPinMeta.value[id]?.pinnedBy),
+    ...boards.map((board) => board.pin?.pinnedBy),
+  ];
+  const agentOnly = !empty && pinners.every((by) => by?.actor === 'agent');
+
+  const size = briefSize.value;
+  const cost = size ? `≈ ${approxTokens(size.chars)} tokens` : '';
+  const host = activeSession.value;
+
+  const segments: Array<{ text: string; kind?: 'near' | 'agent' }> = [];
+  if (cardIds.length) segments.push({ text: plural(cardIds.length, 'card') });
+  if (near.length) segments.push({ text: `${near.length} near`, kind: 'near' });
+  if (boards.length) segments.push({ text: plural(boards.length, 'board') });
+  if (agentOnly) {
+    const by = pinners.find((pinner) => pinner?.actor === 'agent');
+    segments.push({ text: `by ${by ? writerName(by) : 'agent'}`, kind: 'agent' });
+  }
+
+  return (
+    <div class="context-chip-wrap" ref={root}>
+      <button
+        ref={chip}
+        type="button"
+        class={`context-chip${empty ? ' is-empty' : ''}${open ? ' is-open' : ''}`}
+        aria-expanded={open}
+        aria-haspopup="dialog"
+        data-testid="context-chip"
+        onClick={() => setOpen(!open)}
+      >
+        <span class="context-chip-pin">
+          <IconPin size={13} />
+          {agentOnly && <span class="context-chip-agent-dot" aria-hidden="true" />}
+        </span>
+        {empty ? (
+          <span>Nothing in context</span>
+        ) : (
+          <>
+            <span class="context-chip-wide">
+              {segments.map((segment, index) => (
+                <span key={segment.text} class={segment.kind ? `is-${segment.kind}` : undefined}>
+                  {index > 0 ? ' · ' : ''}
+                  {segment.text}
+                </span>
+              ))}
+            </span>
+            <span class="context-chip-narrow">{cardIds.length + boards.length} in context</span>
+            {cost && (
+              <span class="context-chip-cost" data-testid="token-cost">
+                {cost}
+              </span>
+            )}
+          </>
+        )}
+      </button>
+      {open && (
+        <div class="context-panel" role="dialog" aria-label="In the agent's context">
+          <div class="context-panel-head">
+            <span class="context-panel-title">In the agent’s context</span>
+            {cost && <span class="context-panel-mono">{cost}</span>}
+          </div>
+          {empty ? (
+            <p class="context-panel-cap">
+              Nothing is pinned. Pin a card or a board and the agent gets it first; it can still find and pull anything
+              else on the board.
+            </p>
+          ) : (
+            <>
+              <p class="context-panel-cap">
+                What the canvas sends the agent costs {cost || 'a few tokens'}.
+                {host?.contextUsage
+                  ? ` ${host.label}’s whole context holds ${formatTokens(host.contextUsage.used)} tokens.`
+                  : ''}
+              </p>
+
+              <div class="context-panel-section">
+                <span>Cards on this board · {cardIds.length}</span>
+                {cardIds.length > 0 && (
+                  <button type="button" class="context-panel-link" onClick={() => clearContextPins()}>
+                    Clear all
+                  </button>
+                )}
+              </div>
+              <ul class="context-panel-list">
+                {cardIds.map((id) => {
+                  const node = nodes.value.get(id);
+                  const state = pinnedReadState(id, node?.contentRevision ?? 0);
+                  const links = state.kind === 'read' && linksChanged(id, node?.linksRevision ?? 0);
+                  const byAgent = contextPinMeta.value[id]?.pinnedBy.actor === 'agent';
+                  return (
+                    <li key={id} class="context-panel-row">
+                      <span class="context-panel-pin">
+                        <IconPin size={9} />
+                        {byAgent && <span class="context-chip-agent-dot" aria-hidden="true" />}
+                      </span>
+                      <span class="context-panel-name">{nodeTitle(id)}</span>
+                      {links ? (
+                        <span class="context-tag is-links">
+                          <svg viewBox="0 0 24 24" width="10" height="10" aria-hidden="true">
+                            <path d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1" />
+                          </svg>
+                          links changed
+                        </span>
+                      ) : (
+                        <ReadTag state={state.kind} at={state.kind === 'not-read' ? null : state.at} />
+                      )}
+                      <button
+                        type="button"
+                        class="context-panel-x"
+                        aria-label={`Unpin ${nodeTitle(id)}`}
+                        onClick={() => toggleContextPin(id)}
+                      >
+                        ×
+                      </button>
+                    </li>
+                  );
+                })}
+              </ul>
+
+              {near.length > 0 && (
+                <>
+                  <div class="context-panel-section">
+                    <span>Near · {near.length}</span>
+                    <span class="context-panel-cap-inline">
+                      derived · <span class="context-panel-wide">sent as </span>title + summary
+                    </span>
+                  </div>
+                  <ul class="context-panel-list">
+                    {near.map(([id, pins]) => (
+                      <li key={id} class="context-panel-row is-near">
+                        <span class="context-panel-near-ring" aria-hidden="true" />
+                        <span class="context-panel-name is-soft">{nodeTitle(id)}</span>
+                        <span class="context-panel-cap-inline">near {pins[0]?.pinTitle}</span>
+                        <button type="button" class="context-panel-promote" onClick={() => toggleContextPin(id)}>
+                          Pin
+                        </button>
+                      </li>
+                    ))}
+                  </ul>
+                </>
+              )}
+
+              {boards.length > 0 && (
+                <>
+                  <div class="context-panel-section">
+                    <span>Boards · {boards.length}</span>
+                    <span class="context-panel-cap-inline">sent as a map</span>
+                  </div>
+                  <ul class="context-panel-list">
+                    {boards.map((board) => {
+                      const read = pinnedBoardReads.value.get(board.id);
+                      return (
+                        <li key={board.id} class="context-panel-row">
+                          <svg
+                            class="context-panel-board"
+                            viewBox="0 0 24 24"
+                            width="14"
+                            height="14"
+                            aria-hidden="true"
+                          >
+                            <path d="M4 4h16v16H4zM9 9h6v6H9z" />
+                          </svg>
+                          <span class="context-panel-name">{board.name}</span>
+                          <ReadTag state={read ? 'read' : 'not-read'} at={read?.lastReadAt ?? null} />
+                          <span class="context-panel-cap-inline">map</span>
+                          <button
+                            type="button"
+                            class="context-panel-x"
+                            aria-label={`Unpin ${board.name}`}
+                            onClick={() => void setBoardPinned(board.id, false)}
+                          >
+                            ×
+                          </button>
+                        </li>
+                      );
+                    })}
+                  </ul>
+                  <p class="context-panel-cap">
+                    A pinned board travels as a map: its folder, README summary, each pinned card’s title and summary,
+                    and its links and backlinks. The agent pulls a card or the whole board in full when it decides it
+                    needs to.
+                  </p>
+                </>
+              )}
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** A read-state tag with its glyph (ContextChip.dc.html): eye read, eye-off not read, warn changed. */
+function ReadTag({ state, at }: { state: 'read' | 'not-read' | 'changed'; at: string | null }) {
+  const [tone, glyph, word] =
+    state === 'changed'
+      ? (['is-changed', GLYPHS.warn, 'changed'] as const)
+      : state === 'read' && at
+        ? (['is-read', GLYPHS.eye, `read ${age(at)}`] as const)
+        : (['is-not-read', GLYPHS.eyeOff, 'not read yet'] as const);
+  return (
+    <span class={`context-tag ${tone}`}>
+      <svg viewBox="0 0 24 24" width="11" height="11" aria-hidden="true">
+        <path d={glyph} />
+      </svg>
+      {word}
+    </span>
+  );
+}