pmx-canvas 0.7.1 → 0.7.3

package/src/client/canvas/CommandBar.tsx

@@ -1,9 +1,10 @@
 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';
 import { modChord } from '../utils/platform';
+import { ChoiceMenu } from './ChoiceMenu';
 
 /**
  * Command bar (rail-chrome-v2 phase 5): the human's steering surface while a
@@ -72,7 +73,7 @@ export function CommandBar() {
                   title="Remove from context"
                   onClick={() => toggleContextPin(id)}
                 >
-                  ×
+                  <IconClose size={14} />
                 </button>
               </span>
             );
@@ -83,33 +84,34 @@ export function CommandBar() {
       <div class="command-bar-composer">
         <IconSteer size={15} class="command-bar-icon" />
         {showPicker && (
-          <select
-            class="command-bar-target"
-            aria-label="Steer which agent"
-            title="Connected agents — steering reaches all of them unless you address one"
+          <ChoiceMenu
+            className="command-bar-target"
+            label="Steer which agent"
             value={effectiveTarget ?? ''}
-            onChange={(e) => setTarget((e.target as HTMLSelectElement).value || null)}
-          >
-            <option value="">All agents</option>
-            {agents.map((agent) => {
-              // Pump health at the point of choice: unclaimed steers already
-              // sitting in this agent's queue (a growing number means its loop
-              // is not polling), and proof-of-polling when its consumer key
-              // claimed recently — attached alone doesn't mean anyone reads
-              // the inbox.
-              const queued = agent.pendingSteers && agent.pendingSteers > 0 ? ` · ${agent.pendingSteers} queued` : '';
-              const polling = agent.polling ? ' · polling' : '';
-              return (
-                <option key={agent.value} value={agent.value} disabled={!agent.steerable}>
-                  {agent.attached
+            above
+            onChange={(value) => setTarget(value || null)}
+            options={[
+              { value: '', label: 'All agents' },
+              ...agents.map((agent) => {
+                // Pump health at the point of choice: unclaimed steers already
+                // sitting in this agent's queue (a growing number means its loop
+                // is not polling), and proof-of-polling when its consumer key
+                // claimed recently — attached alone doesn't mean anyone reads
+                // the inbox.
+                const queued = agent.pendingSteers && agent.pendingSteers > 0 ? ` · ${agent.pendingSteers} queued` : '';
+                const polling = agent.polling ? ' · polling' : '';
+                return {
+                  value: agent.value,
+                  disabled: !agent.steerable,
+                  label: agent.attached
                     ? `${agent.label}${polling}${queued}`
                     : agent.steerable
                       ? `${agent.label} · writer${polling}${queued}`
-                      : `${agent.label} · no inbox`}
-                </option>
-              );
-            })}
-          </select>
+                      : `${agent.label} · no inbox`,
+                };
+              }),
+            ]}
+          />
         )}
         <input
           class="command-bar-input"

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,7 @@
 import { useRef, useState } from 'preact/hooks';
 import { useFocusTrap } from './use-focus-trap';
+import { IconExternalLink } from '../icons';
+import { ChoiceMenu } from './ChoiceMenu';
 
 /** Draft only: GitHub owns authentication and the final public submission. */
 export function FeedbackDialog({ onClose }: { onClose: () => void }) {
@@ -39,14 +41,15 @@ export function FeedbackDialog({ onClose }: { onClose: () => void }) {
           public. Only what you enter below is included; no board contents, workspace paths, screenshots, or logs are
           attached.
         </p>
-        <label>
-          Feedback type
-          <select class="text-prompt-input" value={kind} onChange={(e) => setKind(e.currentTarget.value)}>
-            <option>Bug report</option>
-            <option>Feature request</option>
-            <option>General feedback</option>
-          </select>
-        </label>
+        <div class="feedback-field">
+          <span>Feedback type</span>
+          <ChoiceMenu
+            label="Feedback type"
+            value={kind}
+            onChange={setKind}
+            options={['Bug report', 'Feature request', 'General feedback'].map((value) => ({ value, label: value }))}
+          />
+        </div>
         <label>
           Title
           <input
@@ -77,7 +80,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

@@ -8,10 +8,7 @@ import {
   IconLogo,
   IconMinimap,
   IconMoon,
-  IconNodeFile,
   IconNodeGroup,
-  IconNodeHtml,
-  IconNodeImage,
   IconNodeMarkdown,
   IconNodeWebpage,
   IconPen,
@@ -21,6 +18,7 @@ import {
   IconSun,
   IconTextAnnotation,
   IconTrace,
+  IconUpload,
 } from '../icons';
 import {
   autoArrange,
@@ -176,37 +174,33 @@ export function ToolRail({
   const traceNodeCount = Array.from(nodes.value.values()).filter((n) => n.type === 'trace').length;
   const edgeCount = edges.value.size;
   const [feedbackOpen, setFeedbackOpen] = useState(false);
-  const [openMenu, setOpenMenu] = useState<null | 'theme' | 'annotate'>(null);
-  const [menuAnchor, setMenuAnchor] = useState<{ top: number; bottom: number; right: number } | null>(null);
+  const [openMenu, setOpenMenu] = useState<null | 'theme'>(null);
+  const [menuAnchor, setMenuAnchor] = useState<{ bottom: number; right: number } | null>(null);
   const railRef = useRef<HTMLDivElement>(null);
-  const documentInput = useRef<HTMLInputElement>(null);
+  const fileInput = useRef<HTMLInputElement>(null);
 
-  const toggleMenu = (menu: 'theme' | 'annotate') => (e: MouseEvent) => {
+  const toggleMenu = (menu: 'theme') => (e: MouseEvent) => {
     if (openMenu === menu) {
       setOpenMenu(null);
       return;
     }
     const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-    setMenuAnchor({ top: rect.top, bottom: rect.bottom, right: rect.right });
+    setMenuAnchor({ bottom: rect.bottom, right: rect.right });
     setOpenMenu(menu);
   };
 
   // The rail scrolls (overflow-y:auto), so an absolutely-positioned popover
   // would be clipped by it. Fixed positioning from the trigger's rect escapes
-  // the scroll container; the annotate menu top-aligns with its trigger, the
-  // theme menu (bottom cluster) bottom-aligns so it grows upward.
-  const sideMenuStyle = (alignBottom: boolean) =>
-    menuAnchor
-      ? alignBottom
-        ? {
-            position: 'fixed' as const,
-            left: `${menuAnchor.right + 8}px`,
-            bottom: `${window.innerHeight - menuAnchor.bottom}px`,
-            top: 'auto',
-            right: 'auto',
-          }
-        : { position: 'fixed' as const, left: `${menuAnchor.right + 8}px`, top: `${menuAnchor.top}px`, right: 'auto' }
-      : undefined;
+  // the scroll container; the theme menu bottom-aligns so it grows upward.
+  const sideMenuStyle = menuAnchor
+    ? {
+        position: 'fixed' as const,
+        left: `${menuAnchor.right + 8}px`,
+        bottom: `${window.innerHeight - menuAnchor.bottom}px`,
+        top: 'auto',
+        right: 'auto',
+      }
+    : undefined;
 
   useEffect(() => {
     if (!openMenu) return;
@@ -330,22 +324,20 @@ export function ToolRail({
         >
           <IconNodeMarkdown size={15} />
         </RailButton>
-        <RailButton label="Image" shortcut="I" onClick={() => promptedCreate('image')}>
-          <IconNodeImage size={15} />
-        </RailButton>
-        <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
+          label="Attach files"
+          ariaLabel="Attach files"
+          detail="Images (PNG, JPEG, SVG…), Markdown and text/code files. PDF, Word, Excel, PowerPoint and OpenDocument use agent import with review."
+          onClick={() => fileInput.current?.click()}
+        >
+          <IconUpload size={15} />
         </RailButton>
         <input
-          ref={documentInput}
+          ref={fileInput}
           type="file"
           hidden
           multiple
-          accept=".pdf,.ppt,.pptx,.xls,.xlsx,.doc,.docx,.odt,.ods,.odp"
-          aria-label="Attach documents"
+          aria-label="Attach files"
           onChange={(event) => {
             const area = canvasArea();
             const view = viewport.value;
@@ -360,17 +352,6 @@ export function ToolRail({
         <RailButton label="Webpage" shortcut="W" onClick={() => promptedCreate('webpage')}>
           <IconNodeWebpage size={15} />
         </RailButton>
-        <RailButton
-          label="HTML surface"
-          shortcut="H"
-          onClick={() =>
-            void createNodeInView({ type: 'html', title: 'HTML surface' }).catch((error) =>
-              logRailError('create html', error),
-            )
-          }
-        >
-          <IconNodeHtml />
-        </RailButton>
         <RailButton
           label="Group"
           shortcut="G"
@@ -382,61 +363,28 @@ export function ToolRail({
         >
           <IconNodeGroup size={15} />
         </RailButton>
-        <span class="toolbar-menu-anchor">
-          <RailButton
-            label="Annotate"
-            shortcut="A"
-            detail="Draw · Text note · Eraser"
-            active={annotationTool !== null}
-            menuOpen={openMenu === 'annotate'}
-            onClick={toggleMenu('annotate')}
-          >
-            {annotationTool === 'eraser' ? (
-              <IconEraser />
-            ) : annotationTool === 'text' ? (
-              <IconTextAnnotation />
-            ) : (
-              <IconPen />
-            )}
-          </RailButton>
-          {openMenu === 'annotate' && (
-            <div class="toolbar-menu" style={sideMenuStyle(false)} role="menu" aria-label="Annotate">
-              <button
-                type="button"
-                class={`toolbar-menu-item${annotationTool === 'pen' ? ' active' : ''}`}
-                onClick={() => {
-                  onSetAnnotationTool(annotationTool === 'pen' ? null : 'pen');
-                  setOpenMenu(null);
-                }}
-              >
-                <IconPen />
-                <span>{annotationTool === 'pen' ? 'Stop annotating' : 'Draw (A)'}</span>
-              </button>
-              <button
-                type="button"
-                class={`toolbar-menu-item${annotationTool === 'text' ? ' active' : ''}`}
-                onClick={() => {
-                  onSetAnnotationTool(annotationTool === 'text' ? null : 'text');
-                  setOpenMenu(null);
-                }}
-              >
-                <IconTextAnnotation />
-                <span>{annotationTool === 'text' ? 'Stop text notes' : 'Text note'}</span>
-              </button>
-              <button
-                type="button"
-                class={`toolbar-menu-item${annotationTool === 'eraser' ? ' active' : ''}`}
-                onClick={() => {
-                  onSetAnnotationTool(annotationTool === 'eraser' ? null : 'eraser');
-                  setOpenMenu(null);
-                }}
-              >
-                <IconEraser />
-                <span>{annotationTool === 'eraser' ? 'Stop erasing' : 'Eraser'}</span>
-              </button>
-            </div>
-          )}
-        </span>
+        <RailButton
+          label="Draw"
+          shortcut="A"
+          active={annotationTool === 'pen'}
+          onClick={() => onSetAnnotationTool(annotationTool === 'pen' ? null : 'pen')}
+        >
+          <IconPen />
+        </RailButton>
+        <RailButton
+          label="Text note"
+          active={annotationTool === 'text'}
+          onClick={() => onSetAnnotationTool(annotationTool === 'text' ? null : 'text')}
+        >
+          <IconTextAnnotation />
+        </RailButton>
+        <RailButton
+          label="Eraser"
+          active={annotationTool === 'eraser'}
+          onClick={() => onSetAnnotationTool(annotationTool === 'eraser' ? null : 'eraser')}
+        >
+          <IconEraser />
+        </RailButton>
 
         <div class="rail-spacer" />
 
@@ -484,7 +432,7 @@ export function ToolRail({
             {canvasThemeScheme(activeTheme) === 'dark' ? <IconSun /> : <IconMoon />}
           </RailButton>
           {openMenu === 'theme' && (
-            <div class="toolbar-menu" style={sideMenuStyle(true)} role="menu" aria-label="Theme">
+            <div class="toolbar-menu" style={sideMenuStyle} role="menu" aria-label="Theme">
               {CANVAS_THEMES.map((name) => (
                 <button
                   key={name}

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>