pmx-canvas 0.7.1 → 0.7.2

package/src/client/canvas/CommandBar.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'preact/hooks';
-import { IconSteer } from '../icons';
+import { IconSteer, IconClose } from '../icons';
 import { contextPinnedNodeIds, nodes, toggleContextPin } from '../state/canvas-store';
 import { steerableAgents } from '../state/presence-store';
 import { sendSteering } from '../state/session-store';
@@ -72,7 +72,7 @@ export function CommandBar() {
                   title="Remove from context"
                   onClick={() => toggleContextPin(id)}
                 >
-                  ×
+                  <IconClose size={14} />
                 </button>
               </span>
             );

package/src/client/canvas/ContextPinBar.tsx

@@ -1,5 +1,6 @@
 import { clearContextPins, contextPinnedNodeIds } from '../state/canvas-store';
 import { attentionHistoryOpen } from '../state/attention-store';
+import { IconClose } from '../icons';
 
 export function ContextPinBar() {
   const count = contextPinnedNodeIds.value.size;
@@ -15,8 +16,9 @@ export function ContextPinBar() {
         class="context-pin-bar-btn context-pin-bar-clear"
         onClick={clearContextPins}
         title="Clear all context pins"
+        aria-label="Clear all context pins"
       >
-        {'\u00d7'}
+        <IconClose size={14} />
       </button>
     </div>
   );

package/src/client/canvas/ExpandedNodeOverlay.tsx

@@ -25,7 +25,7 @@ import {
   pendingExpandedNodeCloseId,
   toggleContextPin,
 } from '../state/canvas-store';
-import { getNodeIcon } from '../icons';
+import { getNodeIcon, IconClose, IconExternalLink } from '../icons';
 import { useFocusTrap } from './use-focus-trap';
 import { TYPE_LABELS } from '../types';
 import type { CanvasNodeState } from '../types';
@@ -316,7 +316,7 @@ export function ExpandedNodeOverlay() {
                 onClick={() => void openNodeAsSite(node)}
                 title="Open as a full-page site in the system browser"
               >
-                Open in tab ↗
+                Open in tab <IconExternalLink size={14} />
               </button>
             )}
             {canPresent && (
@@ -331,7 +331,7 @@ export function ExpandedNodeOverlay() {
             )}
           </div>
           <button type="button" class="expanded-close" onClick={handleClose} title="Close (Esc)" aria-label="Close">
-            ×
+            <IconClose />
           </button>
         </div>
 

package/src/client/canvas/ExternalWriters.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef } from 'preact/hooks';
+import { IconClose, IconExternalLink } from '../icons';
 import type { AgentPresence } from '../../shared/agent-presence.js';
 import { vetoGhostIntent } from '../state/intent-bridge';
 import { type ClientIntent, intents, removeIntent } from '../state/intent-store';
@@ -149,7 +150,7 @@ export function ActivityFeed() {
             activityFeedOpen.value = false;
           }}
         >
-          ×
+          <IconClose />
         </button>
       </div>
       <div class="activity-filters">
@@ -226,7 +227,7 @@ export function ActivityFeed() {
             void startSession();
           }}
         >
-          Start session ↗
+          Start session <IconExternalLink size={14} />
         </button>
       </div>
     </div>
@@ -267,7 +268,7 @@ export function WritersSheet() {
           <span class="writers-title">Connected writers</span>
           <span class="writers-board">{sessionId.value.slice(0, 12)}</span>
           <button type="button" class="activity-feed-close" aria-label="Close writers" onClick={close}>
-            ×
+            <IconClose />
           </button>
         </div>
         <div class="writers-body">

package/src/client/canvas/FeedbackDialog.tsx

@@ -1,5 +1,6 @@
 import { useRef, useState } from 'preact/hooks';
 import { useFocusTrap } from './use-focus-trap';
+import { IconExternalLink } from '../icons';
 
 /** Draft only: GitHub owns authentication and the final public submission. */
 export function FeedbackDialog({ onClose }: { onClose: () => void }) {
@@ -77,7 +78,7 @@ export function FeedbackDialog({ onClose }: { onClose: () => void }) {
             Cancel
           </button>
           <button type="submit" class="text-prompt-confirm" disabled={!title.trim() || !description.trim()}>
-            Continue on GitHub ↗
+            Continue on GitHub <IconExternalLink size={14} />
           </button>
         </div>
       </form>

package/src/client/canvas/IntentLayer.tsx

@@ -2,7 +2,7 @@ import { useEffect } from 'preact/hooks';
 import { nodes } from '../state/canvas-store';
 import { hoveredIntentId, intents, removeIntent, type ClientIntent } from '../state/intent-store';
 import { vetoGhostIntent } from '../state/intent-bridge';
-import { getNodeIcon } from '../icons';
+import { getNodeIcon, IconClose } from '../icons';
 import { TYPE_LABELS } from '../types';
 import type { CanvasNodeState } from '../types';
 
@@ -102,7 +102,7 @@ function GhostInfo({ intent }: { intent: ClientIntent }) {
               void vetoGhostIntent(intent);
             }}
           >
-            ✕
+            <IconClose size={14} />
           </button>
         )}
       </div>

package/src/client/canvas/SelectionBar.tsx

@@ -1,5 +1,5 @@
 import { useCallback } from 'preact/hooks';
-import { IconArrange } from '../icons';
+import { IconArrange, IconClose } from '../icons';
 import { attentionHistoryOpen } from '../state/attention-store';
 import {
   addContextPins,
@@ -204,7 +204,7 @@ export function SelectionBar() {
       </BarHint>
       <BarHint label="Clear selection" shortcut="Esc" side="up">
         <button type="button" class="selection-bar-icon" onClick={clearSelection} aria-label="Clear selection">
-          ×
+          <IconClose size={14} />
         </button>
       </BarHint>
     </div>

package/src/client/canvas/SessionPanel.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'preact/hooks';
+import { IconChevronRight, IconUndo } from '../icons';
 import { useNow } from './use-now';
 import { agentIdentityHue, agentPhaseLabel } from '../../shared/agent-presence.js';
 import { formatCountdown, gateRemainingMs } from '../../shared/approval-gates.js';
@@ -301,7 +302,7 @@ function TimelineRow({ entry }: { entry: TimelineEntry }) {
             data-testid="timeline-undo"
             onClick={() => void undoAgentEdit(entry)}
           >
-            ↩ undo this edit
+            <IconUndo size={14} /> undo this edit
           </button>
         )}
         {undone && <div class="session-timeline-undone">undone · steering sent</div>}
@@ -387,8 +388,9 @@ export function SessionPanel() {
           class="session-collapse"
           onClick={() => setManuallyOpened(false)}
           title="Collapse session panel"
+          aria-label="Collapse session panel"
         >
-          ›
+          <IconChevronRight />
         </button>
       </header>
 
@@ -406,7 +408,7 @@ export function SessionPanel() {
               Agent edit on top: {undoable.body}
             </span>
             <button type="button" class="session-undo-btn" onClick={() => void undoAgentEdit(undoable)}>
-              ↩ Undo
+              <IconUndo size={14} /> Undo
             </button>
           </div>
         );
@@ -455,7 +457,7 @@ export function SessionPanel() {
                     {summary}
                   </span>
                   <span class={`session-section-chevron${showList ? ' is-open' : ''}`} aria-hidden="true">
-                    ›
+                    <IconChevronRight size={14} />
                   </span>
                 </button>
                 {showList &&

package/src/client/canvas/SessionReceipt.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'preact/hooks';
 import { dismissSessionReceipt, sessionReceipt } from '../state/session-store';
+import { IconClose } from '../icons';
 
 /**
  * Session receipt (rail-chrome-v2 phase 5, design item 2): a dismissible card
@@ -74,7 +75,7 @@ export function SessionReceipt({ onOpenSnapshots }: { onOpenSnapshots: () => voi
           onClick={dismissSessionReceipt}
           aria-label="Dismiss receipt"
         >
-          ×
+          <IconClose />
         </button>
       </div>
       <div class="session-receipt-tiles">

package/src/client/canvas/SnapshotPanel.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import { IconClose } from '../icons';
 import {
   type CanvasSnapshotInfo,
   deleteSnapshot,
@@ -183,7 +184,7 @@ export function SnapshotPanel({
           aria-label="Delete snapshot"
           disabled={restoringId !== null}
         >
-          ✕
+          <IconClose size={14} />
         </button>
       </>
     );
@@ -195,7 +196,7 @@ export function SnapshotPanel({
         <span class="snapshot-panel-sub">snapshots + sessions</span>
         <span class="snapshot-panel-spacer" />
         <button type="button" class="snapshot-panel-close" onClick={onClose} title="Close" aria-label="Close history">
-          ×
+          <IconClose />
         </button>
       </div>
 

package/src/client/canvas/ToolRail.tsx

@@ -21,6 +21,7 @@ import {
   IconSun,
   IconTextAnnotation,
   IconTrace,
+  IconUpload,
 } from '../icons';
 import {
   autoArrange,
@@ -337,7 +338,7 @@ export function ToolRail({
           <IconNodeFile size={15} />
         </RailButton>
         <RailButton label="Attach document" onClick={() => documentInput.current?.click()}>
-          <span aria-hidden="true">↥</span>
+          <IconUpload size={15} />
         </RailButton>
         <input
           ref={documentInput}

package/src/client/canvas/TopBar.tsx

@@ -4,7 +4,7 @@ import { BoardSwitcher } from './BoardSwitcher';
 import type { ComponentChildren } from 'preact';
 import { presenting } from '../state/presentation';
 import { useEffect, useState } from 'preact/hooks';
-import { IconFitAll, IconZoomIn, IconZoomOut } from '../icons';
+import { IconFitAll, IconZoomIn, IconZoomOut, IconClose } from '../icons';
 import {
   animateViewport,
   connectionStatus,
@@ -121,7 +121,7 @@ function AgentChip() {
                     void endSession({ source: session.source, agentId: session.agentId });
                   }}
                 >
-                  ×
+                  <IconClose size={14} />
                 </button>
               </span>
             </BarHint>

package/src/client/icons.tsx

@@ -11,16 +11,133 @@ const defaults = {
   'stroke-width': '1.5',
   'stroke-linecap': 'round',
   'stroke-linejoin': 'round',
+  'aria-hidden': 'true',
 } as const;
 
 function Icon({ size = 16, children, ...rest }: IconProps & { children: JSX.Element | JSX.Element[] }): JSX.Element {
   return (
-    <svg width={size} height={size} viewBox="0 0 16 16" {...defaults} {...rest}>
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      style={{ verticalAlign: 'middle', flexShrink: 0 }}
+      {...defaults}
+      {...rest}
+    >
       {children}
     </svg>
   );
 }
 
+export function IconClose(p: IconProps): JSX.Element {
+  return (
+    <Icon {...p}>
+      <path d="m4 4 8 8M12 4l-8 8" />
+    </Icon>
+  );
+}
+
+export function IconPlus(p: IconProps): JSX.Element {
+  return (
+    <Icon {...p}>
+      <path d="M8 2v12M2 8h12" />
+    </Icon>
+  );
+}
+
+export function IconPlusCircle(p: IconProps): JSX.Element {
+  return (
+    <Icon {...p}>
+      <circle cx="8" cy="8" r="6" />
+      <path d="M8 5v6M5 8h6" />
+    </Icon>
+  );
+}
+
+export function IconChevronRight(p: IconProps): JSX.Element {
+  return (
+    <Icon {...p}>
+      <polyline points="6 3 11 8 6 13" />
+    </Icon>
+  );
+}
+
+export function IconMore(p: IconProps): JSX.Element {
+  return (
+    <Icon {...p}>
+      <circle cx="3" cy="8" r="0.75" />
+      <circle cx="8" cy="8" r="0.75" />
+      <circle cx="13" cy="8" r="0.75" />
+    </Icon>
+  );
+}
+
+export function IconExternalLink(p: IconProps): JSX.Element {
+  return (
+    <Icon {...p}>
+      <path d="M9 2h5v5M14 2 7 9M6 3H2v11h11v-4" />
+    </Icon>
+  );
+}
+
+export function IconExpand(p: IconProps): JSX.Element {
+  return (
+    <Icon {...p}>
+      <path d="M9 2h5v5M14 2l-5 5M7 14H2V9M2 14l5-5" />
+    </Icon>
+  );
+}
+
+export function IconArrowLeft(p: IconProps): JSX.Element {
+  return (
+    <Icon {...p}>
+      <path d="M14 8H2m5-5-5 5 5 5" />
+    </Icon>
+  );
+}
+
+export function IconRefresh(p: IconProps): JSX.Element {
+  return (
+    <Icon {...p}>
+      <path d="M13.5 6A5.5 5.5 0 1 0 13 11M14 2v4h-4" />
+    </Icon>
+  );
+}
+
+export function IconUndo(p: IconProps): JSX.Element {
+  return (
+    <Icon {...p}>
+      <path d="M6 2 2 6l4 4M2 6h7a4 4 0 0 1 0 8" />
+    </Icon>
+  );
+}
+
+export function IconSparkle(p: IconProps): JSX.Element {
+  return (
+    <Icon {...p}>
+      <path d="m8 1 2 5 5 2-5 2-2 5-2-5-5-2 5-2Z" />
+    </Icon>
+  );
+}
+
+/** Upload into a tray — attach a document. */
+export function IconUpload(p: IconProps): JSX.Element {
+  return (
+    <Icon {...p}>
+      <path d="M8 10V2M4.5 5.5 8 2l3.5 3.5M2 10v3.5h12V10" />
+    </Icon>
+  );
+}
+
+/** Dropdown disclosure, sized like the other toolbar icons. */
+export function IconChevronDown(p: IconProps): JSX.Element {
+  return (
+    <Icon {...p}>
+      <polyline points="3 6 8 11 13 6" />
+    </Icon>
+  );
+}
+
 /** Expand-arrows — fit all nodes */
 export function IconFitAll(p: IconProps): JSX.Element {
   return (

package/src/client/nodes/BoardNode.tsx

@@ -1,5 +1,6 @@
 import type { CanvasNodeState } from '../types';
 import { boardList, openBoard } from '../state/boards-store';
+import { IconExternalLink } from '../icons';
 
 /** Native text-only cross-board link. Target identity is the durable board id. */
 export function BoardNode({ node }: { node: CanvasNodeState }) {
@@ -28,7 +29,7 @@ export function BoardNode({ node }: { node: CanvasNodeState }) {
         onClick={() => target && void openBoard(target.id)}
       >
         {target ? 'Open board' : 'Target unavailable'}
-        {target && <span aria-hidden="true">↗</span>}
+        {target && <IconExternalLink size={14} />}
       </button>
     </div>
   );

package/src/client/nodes/ExtAppFrame.tsx

@@ -2,6 +2,7 @@ import type { CallToolResult, ListToolsResult, RequestId, Tool } from '@modelcon
 import { ListToolsRequestSchema } from '@modelcontextprotocol/sdk/types.js';
 import { AppBridge, PostMessageTransport, buildAllowAttribute } from '@modelcontextprotocol/ext-apps/app-bridge';
 import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
+import { IconClose } from '../icons';
 import {
   AX_SURFACE_ACK_SOURCE,
   AX_SURFACE_EMIT_SOURCE,
@@ -1429,6 +1430,7 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
           <button
             type="button"
             onClick={() => setError(null)}
+            aria-label="Dismiss error"
             style={{
               background: 'none',
               border: 'none',
@@ -1438,7 +1440,7 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
               padding: '0 2px',
             }}
           >
-            ×
+            <IconClose size={14} />
           </button>
         </div>
       )}

package/src/client/nodes/FileNode.tsx

@@ -1,4 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'preact/hooks';
+import { IconPlusCircle, IconRefresh } from '../icons';
+import { delimiterForPath, parseDelimitedText } from '../../shared/delimited-text';
 import { updateNodeData } from '../state/canvas-store';
 import { iframeMode } from '../state/iframe-mode';
 import { fetchFile, updateNodeFromClient } from '../state/intent-bridge';
@@ -44,82 +46,6 @@ function langFromPath(path: string): string {
 /** Rendered-row ceiling for delimited files — a 200k-row CSV must not lock the browser. */
 const MAX_TABLE_ROWS = 500;
 
-export interface DelimitedTable {
-  header: string[];
-  /** Rectangular: every row padded (short) or truncated (long) to the header width. */
-  rows: string[][];
-}
-
-/** Column delimiter for a delimited-data path, or null when the file is not one. */
-function delimiterForPath(path: string): string | null {
-  const lower = path.toLowerCase();
-  if (lower.endsWith('.csv')) return ',';
-  if (lower.endsWith('.tsv')) return '\t';
-  return null;
-}
-
-/**
- * RFC4180-ish delimited-text parser. Quoted fields may contain the delimiter,
- * newlines, and `""` escapes; CRLF, LF and lone CR all end a record; a trailing
- * newline produces no phantom empty row. Ragged records are squared off against
- * the header width instead of throwing.
- */
-export function parseDelimitedText(text: string, delimiter: string): DelimitedTable {
-  const records: string[][] = [];
-  let row: string[] = [];
-  let field = '';
-  let quoted = false;
-  // Tracks whether the current record consumed anything — distinguishes a real
-  // empty-quoted record from the dangling state after a terminating newline.
-  let started = false;
-
-  for (let i = 0; i < text.length; i++) {
-    const char = text[i];
-    started = true;
-    if (quoted) {
-      if (char === '"') {
-        if (text[i + 1] === '"') {
-          field += '"';
-          i++;
-        } else {
-          quoted = false;
-        }
-      } else if (char === '\r' && text[i + 1] === '\n') {
-        field += '\n';
-        i++;
-      } else {
-        field += char;
-      }
-      continue;
-    }
-    if (char === '"' && field === '') {
-      quoted = true;
-    } else if (char === delimiter) {
-      row.push(field);
-      field = '';
-    } else if (char === '\n' || char === '\r') {
-      if (char === '\r' && text[i + 1] === '\n') i++;
-      row.push(field);
-      field = '';
-      records.push(row);
-      row = [];
-      started = false;
-    } else {
-      field += char;
-    }
-  }
-  if (started) {
-    row.push(field);
-    records.push(row);
-  }
-
-  const header = records.shift() ?? [];
-  return {
-    header,
-    rows: records.map((record) => Array.from({ length: header.length }, (_, i) => record[i] ?? '')),
-  };
-}
-
 /** Human-readable byte size, e.g. `4.2 MB`. */
 export function formatBytes(bytes: number): string {
   if (!Number.isFinite(bytes) || bytes < 0) return '';
@@ -349,7 +275,7 @@ function TextFileNode({ node, expanded = false }: { node: CanvasNodeState; expan
             flexShrink: 0,
           }}
         >
-          ⊕
+          <IconPlusCircle size={14} />
         </button>
         <button
           type="button"
@@ -365,7 +291,7 @@ function TextFileNode({ node, expanded = false }: { node: CanvasNodeState; expan
             flexShrink: 0,
           }}
         >
-          ↻
+          <IconRefresh size={14} />
         </button>
       </div>
 

package/src/client/nodes/ImageNode.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import { IconRefresh } from '../icons';
 import type { CanvasNodeState } from '../types';
 import { getImageNodeWarnings } from './image-warnings';
 
@@ -140,7 +141,7 @@ export function ImageNode({ node, expanded = false }: { node: CanvasNodeState; e
             {sizeLabel && <span>{sizeLabel}</span>}
             {zoom !== 1 && (
               <button type="button" class="image-node-zoom-reset" onClick={resetView} title="Reset zoom">
-                {zoomPct}% ↺
+                {zoomPct}% <IconRefresh size={14} />
               </button>
             )}
           </span>

package/src/client/nodes/MarkdownNode.tsx

@@ -1,5 +1,6 @@
 import type { JSX } from 'preact';
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import { IconArrowLeft } from '../icons';
 import { expandNode, updateNodeData } from '../state/canvas-store';
 import { fetchFile, renderMarkdown, saveFile, updateNodeFromClient } from '../state/intent-bridge';
 import type { CanvasNodeState } from '../types';
@@ -254,7 +255,7 @@ export function MarkdownNode({ node, expanded = false }: { node: CanvasNodeState
       <div class="md-editor-expanded" onKeyDown={handleKeyDown}>
         <div class="md-editor-toolbar">
           <button type="button" class="md-toolbar-btn" onClick={() => setSourceMode(false)}>
-            ← Back to document
+            <IconArrowLeft size={14} /> Back to document
           </button>
           <div style={{ display: 'flex', gap: '6px', alignItems: 'center' }}>
             {path && <span class="md-toolbar-path">{path.split('/').pop()}</span>}

package/src/client/nodes/PromptNode.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import { IconClose } from '../icons';
 import { updateNodeData } from '../state/canvas-store';
 import { fetchSlashCommands, renderMarkdown, submitCanvasPrompt, submitThreadReply } from '../state/intent-bridge';
 import type { CanvasNodeState } from '../types';
@@ -98,6 +99,7 @@ function ErrorBanner({ message, onDismiss }: { message: string | null; onDismiss
       <button
         type="button"
         onClick={onDismiss}
+        aria-label="Dismiss error"
         style={{
           background: 'none',
           border: 'none',
@@ -107,7 +109,7 @@ function ErrorBanner({ message, onDismiss }: { message: string | null; onDismiss
           padding: '0 2px',
         }}
       >
-        {'\u00d7'}
+        <IconClose size={14} />
       </button>
     </div>
   );

package/src/client/theme/global.css

@@ -760,6 +760,11 @@ body,
   border-radius: calc(3px * var(--node-chrome-scale, 1));
 }
 
+.canvas-node .node-controls button svg {
+  width: 1em;
+  height: 1em;
+}
+
 .canvas-node .node-controls button:hover {
   background: var(--c-surface-hover);
   color: var(--c-text);
@@ -1466,6 +1471,10 @@ body,
   animation: presence-pulse 1.4s ease-in-out infinite;
 }
 .session-collapse {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
   width: 26px;
   height: 26px;
   border: 1px solid transparent;
@@ -1682,8 +1691,9 @@ body,
   }
 }
 .session-section-chevron {
+  display: inline-flex;
+  flex-shrink: 0;
   color: var(--c-muted);
-  font-size: 13px;
   transition: transform 0.15s ease;
 }
 .session-section-chevron.is-open {
@@ -1966,8 +1976,13 @@ body,
   white-space: nowrap;
 }
 .command-bar-chip-unpin {
-  width: 14px;
-  height: 14px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: 0;
+  width: 20px;
+  height: 20px;
   border: none;
   border-radius: 50%;
   background: none;
@@ -6896,7 +6911,7 @@ html.is-node-dragging .intent-line-layer {
   align-items: center;
   gap: 6px;
   max-width: 280px;
-  padding: 4px 8px;
+  padding: 6px 8px;
   margin-left: -8px;
   background: none;
   border: 1px solid transparent;
@@ -6914,7 +6929,8 @@ html.is-node-dragging .intent-line-layer {
   white-space: nowrap;
 }
 .board-switcher-caret {
-  font-size: 10px;
+  display: inline-flex;
+  flex-shrink: 0;
   color: var(--c-text-soft);
 }
 .board-switcher-menu {