pmx-canvas 0.11.0 → 0.12.1

package/src/client/canvas/EdgeEditor.tsx

@@ -0,0 +1,149 @@
+import { signal } from '@preact/signals';
+import { useState } from 'preact/hooks';
+import { RELATION_KINDS, relationKind } from '../../shared/relations.js';
+import { activeBoard, activeBoardId, boardIncarnation } from '../state/boards-store';
+import { edges, selectedEdgeId, viewport } from '../state/canvas-store';
+import { removeEdgeFromClient, updateEdgeFromClient } from '../state/intent-bridge';
+import type { CanvasEdge } from '../types';
+import { canvasArea } from './canvas-area';
+
+export const edgeEditorAnchor = signal<{ id: string; incarnation: number; point: { x: number; y: number } } | null>(
+  null,
+);
+
+/** Like EdgeHint, the editor lives in App's screen layer, outside the transformed world. */
+export function SelectedEdgeEditor() {
+  const anchor = edgeEditorAnchor.value;
+  const edge = anchor ? edges.value.get(anchor.id) : null;
+  return anchor && edge && anchor.id === selectedEdgeId.value && anchor.incarnation === boardIncarnation ? (
+    <EdgeEditor key={`${anchor.incarnation}:${edge.id}`} edge={edge} point={anchor.point} />
+  ) : null;
+}
+
+/** Screen-sized controls anchored to the selected relation, not scaled with its SVG. */
+export function EdgeEditor({ edge, point }: { edge: CanvasEdge; point: { x: number; y: number } }) {
+  const [field, setField] = useState<'label' | 'reason' | 'kind' | null>(null);
+  const [value, setValue] = useState('');
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState('');
+  const [incarnation] = useState(boardIncarnation);
+  const [boardId] = useState(activeBoardId.value);
+  const edit = (next: NonNullable<typeof field>) => {
+    setField(next);
+    setValue(next === 'kind' ? relationKind(edge) : (edge[next] ?? ''));
+    setError('');
+  };
+  const save = async (patch: Parameters<typeof updateEdgeFromClient>[1] | null) => {
+    if (pending || incarnation !== boardIncarnation) return;
+    setPending(true);
+    const result = patch
+      ? await updateEdgeFromClient(edge.id, patch, boardId)
+      : await removeEdgeFromClient(edge.id, boardId);
+    if (incarnation !== boardIncarnation) return;
+    setPending(false);
+    if (result.ok) {
+      setField(null);
+      setError('');
+      if (!patch && selectedEdgeId.value === edge.id) selectedEdgeId.value = null;
+    } else setError('Change refused. Your draft is still here.');
+  };
+  const area = canvasArea();
+  const view = viewport.value;
+  const width = Math.min(320, area.width - 24);
+  const x = Math.max(
+    area.left + 12,
+    Math.min(area.left + area.width - width - 12, area.left + point.x * view.scale + view.x - width / 2),
+  );
+  const y = Math.max(
+    area.top + 8,
+    Math.min(area.top + area.height - (field ? 180 : 60), area.top + point.y * view.scale + view.y + 20),
+  );
+  const kinds = [
+    ...new Set(
+      [...RELATION_KINDS, ...(activeBoard()?.relationVocabulary ?? [])]
+        .map((item) => item.kind)
+        .concat(relationKind(edge)),
+    ),
+  ];
+  return (
+    <form
+      class="edge-editor"
+      aria-label="Edit relation"
+      style={{ left: x, top: y, width }}
+      onPointerDown={(event) => event.stopPropagation()}
+      onKeyDown={(event) => {
+        event.stopPropagation();
+        if (event.key === 'Escape' && !pending) {
+          event.preventDefault();
+          setField(null);
+          selectedEdgeId.value = null;
+        }
+      }}
+      onSubmit={(event) => {
+        event.preventDefault();
+        if (field) void save({ [field]: value });
+      }}
+    >
+      <fieldset disabled={pending}>
+        <div class="edge-editor-tools">
+          <select
+            aria-label="Relation kind"
+            value={relationKind(edge)}
+            onChange={(event) => {
+              const kind = event.currentTarget.value;
+              if (kind === '__custom') edit('kind');
+              else {
+                setField('kind');
+                setValue(kind);
+                void save({ kind });
+              }
+            }}
+          >
+            {kinds.map((kind) => (
+              <option key={kind} value={kind}>
+                {kind}
+              </option>
+            ))}
+            <option value="__custom">Custom…</option>
+          </select>
+          <button type="button" onClick={() => edit('label')}>
+            Label
+          </button>
+          <button type="button" onClick={() => edit('reason')}>
+            Why
+          </button>
+          <button type="button" onClick={() => void save(null)}>
+            Delete
+          </button>
+        </div>
+        {field && (
+          <div class="edge-editor-field">
+            <label>
+              {field === 'reason' ? 'Why this relation?' : field === 'label' ? 'Label' : 'Custom kind'}
+              <input
+                autoFocus
+                value={value}
+                required={field === 'kind'}
+                maxLength={field === 'kind' ? 80 : field === 'reason' ? 4000 : 1000}
+                onInput={(event) => setValue(event.currentTarget.value)}
+              />
+            </label>
+            <div>
+              <button type="submit">Save</button>{' '}
+              <button
+                type="button"
+                onClick={() => {
+                  setField(null);
+                  setError('');
+                }}
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        )}
+        {error && <p role="alert">{error}</p>}
+      </fieldset>
+    </form>
+  );
+}

package/src/client/canvas/EdgeLayer.tsx

@@ -7,15 +7,23 @@ import {
   selectedEdgeId,
   viewport,
   visibleNodeFor,
+  groupContents,
 } from '../state/canvas-store';
 import { linkMarks, writerName } from '../state/context-status-store';
 import { HUMAN_STARTED_SESSION_LABEL } from '../../shared/agent-presence';
 import { activeSession } from '../state/presence-store';
-import { activeBoard } from '../state/boards-store';
+import { activeBoard, boardIncarnation } from '../state/boards-store';
 import { reportClientViewportSize } from '../state/intent-bridge';
 import { relationDefinition, relationKind, relationText } from '../../shared/relations.js';
 import type { CanvasEdge, CanvasNodeState } from '../types';
-import { relationFilter, relationFocus, relationHighlight } from '../state/relation-store';
+import {
+  dependencyAnalysis,
+  relationWarning,
+  relationFilter,
+  relationFocus,
+  relationHighlight,
+} from '../state/relation-store';
+import { edgeEditorAnchor } from './EdgeEditor';
 
 /** Filter only the kinds on this board; shared presets are managed in Home. */
 export function RelationLegend() {
@@ -71,6 +79,17 @@ export function RelationLegend() {
           </button>
         );
       })}
+      {dependencyAnalysis.value.hasDependencies && (
+        <>
+          <span class={dependencyAnalysis.value.cycles ? 'relation-warning' : ''}>
+            {dependencyAnalysis.value.cycles ? '⚠ ' : ''}
+            {dependencyAnalysis.value.cycles} dependency cycles
+          </span>
+          {dependencyAnalysis.value.focused && (
+            <span>Change selection → {dependencyAnalysis.value.affected.size} affected</span>
+          )}
+        </>
+      )}
     </div>
   );
 }
@@ -312,6 +331,7 @@ function edgeLayout(
   scale: number,
   obstacles: LabelObstacle[],
   textWidth: (text: string, weight?: number) => number,
+  parallelCount: number,
 ) {
   const dx = end.x - start.x;
   const dy = end.y - start.y;
@@ -334,7 +354,16 @@ function edgeLayout(
   const zoom = edgeZoom.value;
   const marks = linkMarks(edge);
   // Reasons belong in the hint/inspector, not a long pill covering both endpoints.
-  const label = edge.label ?? edge.kind;
+  const baseLabel = edge.label ?? edge.kind;
+  const label = parallelCount > 1 ? `${baseLabel ?? relationKind(edge)} · ×${parallelCount}` : baseLabel;
+  const warning = [
+    dependencyAnalysis.value.cycleEdges.has(edge.id) ? 'Cycle' : '',
+    relationWarning(edge).length ? 'Source needs review' : '',
+  ]
+    .filter(Boolean)
+    .join(' · ');
+  const warningText = warning ? `⚠ ${warning}` : '';
+  const warningWidth = warning ? textWidth(warningText, 500) + 12 : 0;
   const showLabel = !!label && zoom >= 0.35;
   // Pill layout in label units (× labelScale): the label, then a hairline and
   // "not seen by …", which keeps only its glyph on a short line or below 60% zoom.
@@ -346,12 +375,12 @@ function edgeLayout(
   // A short line: the full pill plus some line on either side would not fit.
   const notSeenWords = marks.notSeen && zoom >= 0.6 && dist >= (fullWidth + 60) * labelScale;
   const notSeenWidth = marks.notSeen ? (labelWidth ? 12 : 0) + (notSeenWords ? wordedNotSeenWidth : 12) : 0;
-  const pillWidth = pad * 2 + labelWidth + notSeenWidth;
+  const pillWidth = pad * 2 + labelWidth + notSeenWidth + warningWidth;
   const labelX = -pillWidth / 2 + pad;
   const notSeenX = labelX + labelWidth + (labelWidth ? 12 : 0);
-  const hasPill = showLabel || marks.notSeen;
-  const curveMid = hasPill ? bezierMidpoint(start.x, start.y, cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y) : null;
-  const mid = curveMid ? placeLabel(curveMid, pillWidth * labelScale, 20 * labelScale, obstacles, 4 * scale) : null;
+  const hasPill = showLabel || marks.notSeen || warningWidth > 0;
+  const curveMid = bezierMidpoint(start.x, start.y, cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y);
+  const mid = hasPill ? placeLabel(curveMid, pillWidth * labelScale, 20 * labelScale, obstacles, 4 * scale) : null;
   if (mid) {
     obstacles.push({
       x: mid.x - (pillWidth / 2) * labelScale,
@@ -377,6 +406,8 @@ function edgeLayout(
     notSeenX,
     curveMid,
     mid,
+    warningText,
+    warningX: labelX + labelWidth + notSeenWidth + 6,
   };
 }
 
@@ -406,12 +437,15 @@ function EdgePath({ edge, fromNode, toNode, layout, focused, dimmed, selected, s
     // that LANDED on an edge must not immediately undo itself.
     e.stopPropagation();
     selectedEdgeId.value = edge.id;
+    edgeHint.value = null;
   };
   const showHint = (anchor: Element, point?: { x: number; y: number }) => {
+    if (selectedEdgeId.value === edge.id) return;
     const text = [
       `${String(fromNode.data.title ?? fromNode.id)} → ${String(toNode.data.title ?? toNode.id)}`,
       relationText(edge),
       linkHint(edge, marks.notSeen),
+      ...relationWarning(edge),
     ]
       .filter(Boolean)
       .join('\n');
@@ -511,6 +545,17 @@ function EdgePath({ edge, fromNode, toNode, layout, focused, dimmed, selected, s
             )}
           </g>
         )}
+        {layout.warningText && (
+          <text
+            class="edge-label"
+            x={layout.warningX * labelScale}
+            text-anchor="start"
+            dominant-baseline="central"
+            fill="var(--c-warn)"
+          >
+            {layout.warningText}
+          </text>
+        )}
       </g>
     );
   }
@@ -615,7 +660,17 @@ export function EdgeLayer({ nodes, edges }: EdgeLayerProps) {
           return Math.ceil(Math.max(metrics.width, metrics.actualBoundingBoxLeft + metrics.actualBoundingBoxRight));
         };
         const nodeMap = nodes.value;
-        const edgeList = Array.from(edges.value.values());
+        const inside = groupContents.value;
+        const edgeList = Array.from(edges.value.values()).filter(
+          (edge) => !inside || inside.has(edge.from) || inside.has(edge.to),
+        );
+        const resolve = (id: string) => {
+          const visible = visibleNodeFor(id);
+          return nodeMap.get(visible?.id ?? id) ?? nodeMap.get(id);
+        };
+        const pairs = new Map<string, number>();
+        const pairKey = (edge: CanvasEdge) => JSON.stringify([edge.from, edge.to].sort());
+        for (const edge of edgeList) if (!edge.toBoardId) pairs.set(pairKey(edge), (pairs.get(pairKey(edge)) ?? 0) + 1);
         const scale = edgeChromeScale(edgeZoom.value);
 
         // Allocate a port to every incident link, including parallel and reverse links.
@@ -623,8 +678,8 @@ export function EdgeLayer({ nodes, edges }: EdgeLayerProps) {
         const sides = new Map<string, Array<{ anchor: Anchor; node: CanvasNodeState; order: number; id: string }>>();
         for (const edge of edgeList) {
           if (edge.toBoardId) continue;
-          const from = visibleNodeFor(edge.from);
-          const to = visibleNodeFor(edge.to);
+          const from = resolve(edge.from);
+          const to = resolve(edge.to);
           if (!from || !to || from.id === to.id) continue;
           const start = computeAnchor(from, to);
           const end = computeAnchor(to, from);
@@ -657,7 +712,7 @@ export function EdgeLayer({ nodes, edges }: EdgeLayerProps) {
         const obstacles: LabelObstacle[] = [];
         const portSize = 32 / edgeZoom.value;
         for (const node of nodeMap.values()) {
-          if (visibleNodeFor(node.id)?.id !== node.id) continue;
+          if (resolve(node.id)?.id !== node.id) continue;
           const frame = node.type === 'group' && !node.collapsed;
           const { x, y } = node.position;
           const { width, height } = node.size;
@@ -681,14 +736,30 @@ export function EdgeLayer({ nodes, edges }: EdgeLayerProps) {
         const layouts = new Map<string, ReturnType<typeof edgeLayout>>();
         for (const edge of edgeList) {
           const anchors = ports.get(edge.id);
-          if (anchors) layouts.set(edge.id, edgeLayout(edge, anchors.start, anchors.end, scale, obstacles, textWidth));
+          if (anchors)
+            layouts.set(
+              edge.id,
+              edgeLayout(edge, anchors.start, anchors.end, scale, obstacles, textWidth, pairs.get(pairKey(edge)) ?? 1),
+            );
         }
-        return { nodeMap, edgeList, layouts, scale };
+        return { nodeMap, edgeList, layouts, scale, resolve };
       }),
     [nodes, edges, textContext, font],
   );
 
-  const { nodeMap, edgeList, layouts, scale } = geometry.value;
+  const { nodeMap, edgeList, layouts, scale, resolve } = geometry.value;
+  const selected = selectedEdgeId.value;
+  const layout = selected ? layouts.get(selected) : null;
+  const point = layout?.mid ?? layout?.curveMid;
+  useLayoutEffect(() => {
+    edgeEditorAnchor.value = selected && point ? { id: selected, incarnation: boardIncarnation, point } : null;
+  }, [selected, point?.x, point?.y, boardIncarnation]);
+  useEffect(
+    () => () => {
+      edgeEditorAnchor.value = null;
+    },
+    [],
+  );
   const focusId = relationFocus.value;
   const hasFocus = focusId !== null;
   const searchSet = searchHighlightIds.value;
@@ -758,8 +829,8 @@ export function EdgeLayer({ nodes, edges }: EdgeLayerProps) {
               // Remote endpoints are navigable links, never a same-ID card on this board.
               if (edge.toBoardId) return null;
               // An endpoint hidden behind a collapsed group's chip is drawn to the chip.
-              const fromNode = visibleNodeFor(edge.from);
-              const toNode = visibleNodeFor(edge.to);
+              const fromNode = resolve(edge.from);
+              const toNode = resolve(edge.to);
               const layout = layouts.get(edge.id);
               if (!fromNode || !toNode || !layout) return null;
               const isConnected = hasFocus && (edge.from === focusId || edge.to === focusId);

package/src/client/canvas/ExpandedNodeOverlay.tsx

@@ -1,5 +1,7 @@
 import { HTML_SURFACE_PUSH_SOURCE } from '../../shared/ax-surface-protocol.js';
 import { BarHint } from './BarHint';
+import { AttentionHistory } from './AttentionHistory';
+import { AttentionToast } from './AttentionToast';
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
 import { ContextNode } from '../nodes/ContextNode';
 import { DiffNode } from '../nodes/DiffNode';
@@ -397,6 +399,8 @@ export function ExpandedNodeOverlay() {
             {pendingClose ? 'Saving edits…' : 'esc or click outside to close'}
           </span>
         </div>
+        <AttentionToast />
+        <AttentionHistory />
         {canPresent && presenting && (
           <div
             ref={presentationOverlayRef}

package/src/client/canvas/GroupNavigation.tsx

@@ -0,0 +1,85 @@
+import { activeBoard } from '../state/boards-store';
+import { useLayoutEffect, useRef } from 'preact/hooks';
+import { reportClientViewportSize } from '../state/intent-bridge';
+import { focusNode, groupContents, groupPath, groupViewNodes, leaveGroup, nodes } from '../state/canvas-store';
+
+export function GroupBreadcrumbs() {
+  const path = groupPath.value;
+  const ref = useRef<HTMLElement>(null);
+  useLayoutEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    const resize = new ResizeObserver(() => void reportClientViewportSize());
+    resize.observe(element);
+    return () => resize.disconnect();
+  }, [path.length > 0]);
+  if (!path.length) return null;
+  return (
+    <nav
+      ref={ref}
+      class="group-breadcrumbs"
+      aria-label="Group navigation"
+      onPointerDown={(event) => event.stopPropagation()}
+    >
+      <button type="button" onClick={() => leaveGroup(0)}>
+        {activeBoard()?.name ?? 'Board'}
+      </button>
+      {path.map((visit, index) => (
+        <span key={visit.id}>
+          <span aria-hidden="true"> / </span>
+          <button
+            type="button"
+            aria-current={index === path.length - 1 ? 'location' : undefined}
+            disabled={index === path.length - 1}
+            onClick={() => leaveGroup(index + 1)}
+          >
+            {String(nodes.value.get(visit.id)?.data.title ?? 'Group')}
+          </button>
+        </span>
+      ))}
+      <button type="button" onClick={() => leaveGroup()} aria-label="Leave group">
+        Esc · goes up
+      </button>
+    </nav>
+  );
+}
+
+export function GroupOutsideLinks() {
+  const inside = groupContents.value;
+  if (!inside) return null;
+  const outside = [...groupViewNodes.value.values()].filter((node) => !inside.has(node.id));
+  const children = [...nodes.value.values()].filter((node) => inside.has(node.id));
+  const root = nodes.value.get(groupPath.value.at(-1)!.id)!;
+  const left = children.length ? Math.min(...children.map((node) => node.position.x)) - 24 : root.position.x;
+  const top = children.length ? Math.min(...children.map((node) => node.position.y)) - 40 : root.position.y;
+  const right = children.length
+    ? Math.max(...children.map((node) => node.position.x + node.size.width)) + 24
+    : left + 320;
+  const bottom = children.length
+    ? Math.max(...children.map((node) => node.position.y + node.size.height)) + 24
+    : top + 120;
+  return (
+    <>
+      <div class="group-inside-frame" style={{ left, top, width: right - left, height: bottom - top }}>
+        <span>Inside {String(root.data.title ?? 'Group')}</span>
+      </div>
+      {outside.map((node, index) => (
+        <div key={node.id} class="group-outside-endpoint" style={{ left: node.position.x, top: node.position.y }}>
+          {index === 0 && <span class="group-outside-label">Outside</span>}
+          <button
+            type="button"
+            class="group-outside-stub"
+            onPointerDown={(event) => event.stopPropagation()}
+            onClick={(event) => {
+              event.stopPropagation();
+              focusNode(node.id, { recordHistory: false, persistStacking: false });
+            }}
+          >
+            ↗ {String(node.data.title ?? node.type)}
+            <span>{node.type} · Show on canvas</span>
+          </button>
+        </div>
+      ))}
+    </>
+  );
+}

package/src/client/canvas/RelationsPanel.tsx

@@ -4,6 +4,7 @@ import { relationDefinition, relationSourceEnd } from '../../shared/relations.js
 import { activeBoardId, boardList, openMemoryTarget } from '../state/boards-store';
 import { edges, nodes } from '../state/canvas-store';
 import { requestJson } from '../state/intent-bridge';
+import { showRelationsOnCanvas } from '../state/relation-store';
 
 /** The expanded card's evidence and uses, from the same graph agents navigate. */
 export function RelationsPanel({ nodeId }: { nodeId: string }) {
@@ -50,6 +51,14 @@ export function RelationsPanel({ nodeId }: { nodeId: string }) {
   return (
     <aside class="relations-panel" aria-label="Relations">
       <h3>Relations</h3>
+      <div class="relation-navigation">
+        <button type="button" onClick={() => showRelationsOnCanvas(nodeId, 'lineage')}>
+          Show lineage
+        </button>
+        <button type="button" onClick={() => showRelationsOnCanvas(nodeId, 'connections')}>
+          Show on canvas
+        </button>
+      </div>
       {!graph && <p role="status">{unavailable ? 'Relations unavailable. Reopen to retry.' : 'Loading relations…'}</p>}
       {graph && relations.length === 0 && <p>No connections yet.</p>}
       {relations.map((edge, index) => {

package/src/client/canvas/SelectionBar.tsx

@@ -13,6 +13,7 @@ import { createEdgeFromClient, createGroupFromClient, removeNodeFromClient } fro
 import { sessionActive } from '../state/presence-store';
 import { BarHint } from './BarHint';
 import { useChromeHeight } from './use-chrome-height';
+import { openBoardMove } from './BoardMoveDialog';
 
 /**
  * Floating bottom-center bar for a multi-selection (rail-chrome-v2 phase 7,
@@ -174,6 +175,26 @@ export function SelectionBar() {
           </BarHint>
         </>
       )}
+      <BarHint label="Move to new board" side="up">
+        <button
+          type="button"
+          class="selection-bar-icon"
+          aria-label="Move to new board"
+          onClick={() => openBoardMove([...selectedNodeIds.value])}
+        >
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            aria-hidden="true"
+          >
+            <path d="M6 3H2v10h12V9M8 8l6-6M9 2h5v5" />
+          </svg>
+        </button>
+      </BarHint>
       <BarHint label="Pin to agent context" side="up">
         <button type="button" class="selection-bar-action is-pin" onClick={handlePinContext}>
           <span aria-hidden="true">✦</span>

package/src/client/canvas/SessionPanel.tsx

@@ -4,7 +4,9 @@ import { IconChevronRight, IconUndo } from '../icons';
 import { useNow } from './use-now';
 import { agentPhaseLabel } from '../../shared/agent-presence.js';
 import { formatCountdown, gateRemainingMs } from '../../shared/approval-gates.js';
-import { focusNode, selectedNodeIds } from '../state/canvas-store';
+import { focusNode, nodes, selectedNodeIds } from '../state/canvas-store';
+import { activeBoardId } from '../state/boards-store';
+import { createNodeFromClient } from '../state/intent-bridge';
 import { activeSession, agentPresences, attachedSessions, writerColor } from '../state/presence-store';
 import {
   type ApprovalGateView,
@@ -96,6 +98,35 @@ function clock(iso: string): string {
 }
 
 function WorkItemRow({ item }: { item: WorkItemView }) {
+  const [busy, setBusy] = useState(false);
+  const [pending, setPending] = useState<{ boardId: string; nodeId: string } | null>(null);
+  const boardId = activeBoardId.value;
+  const boardNodes = nodes.value;
+  const presentation = [...nodes.value.values()].find(
+    (node) => node.type === 'status' && node.data.workItemId === item.id,
+  );
+  useEffect(() => {
+    if (!pending) return;
+    if (boardId === pending.boardId && !boardNodes.has(pending.nodeId)) return;
+    if (boardId === pending.boardId) focusNode(pending.nodeId);
+    setPending(null);
+    setBusy(false);
+  }, [pending, boardId, boardNodes]);
+  const show = async () => {
+    if (presentation) return focusNode(presentation.id);
+    if (!boardId || busy) return;
+    setBusy(true);
+    const result = await createNodeFromClient({
+      type: 'status',
+      data: { workItemId: item.id },
+      width: 360,
+      height: 200,
+      expectedBoardId: boardId,
+    });
+    if (result.ok && result.id && activeBoardId.value === boardId) {
+      setPending({ boardId, nodeId: result.id });
+    } else setBusy(false);
+  };
   const glyph = WORK_GLYPH[item.status] ?? 'queued';
   const nodeId = item.nodeIds[0];
   return (
@@ -106,6 +137,9 @@ function WorkItemRow({ item }: { item: WorkItemView }) {
           {item.title}
         </button>
         {item.detail && <div class="session-item-detail">{item.detail}</div>}
+        <button type="button" class="session-show-work" disabled={busy} onClick={() => void show()}>
+          {busy ? 'Showing…' : presentation ? 'Show card' : 'Show on board'}
+        </button>
       </div>
       <span class="session-item-status">{WORK_STATUS_TEXT[item.status] ?? glyph}</span>
       <span class="session-item-time">{clock(item.updatedAt)}</span>

package/src/client/canvas/TextPrompt.tsx

@@ -1,5 +1,6 @@
 import { signal } from '@preact/signals';
 import { useEffect, useRef } from 'preact/hooks';
+import { useFocusTrap } from './use-focus-trap';
 
 /**
  * In-canvas replacement for `window.prompt`, which embedded browser panes
@@ -9,6 +10,8 @@ import { useEffect, useRef } from 'preact/hooks';
 interface TextPromptRequest {
   title: string;
   placeholder: string;
+  description?: string;
+  maxLength?: number;
   /** Prefilled (and pre-selected) value — edit flows start from the current text. */
   initial: string;
   /** Submitting an empty field resolves '' instead of null — "clear the value" flows. */
@@ -25,7 +28,7 @@ let promptSeq = 0;
 export function askText(
   title: string,
   placeholder: string,
-  opts: { initial?: string; allowEmpty?: boolean; confirm?: string } = {},
+  opts: { initial?: string; allowEmpty?: boolean; confirm?: string; description?: string; maxLength?: number } = {},
 ): Promise<string | null> {
   return new Promise((resolve) => {
     textPromptRequest.value?.resolve(null);
@@ -34,6 +37,8 @@ export function askText(
       seq: promptSeq,
       title,
       placeholder,
+      description: opts.description,
+      maxLength: opts.maxLength,
       initial: opts.initial ?? '',
       allowEmpty: opts.allowEmpty ?? false,
       confirm: opts.confirm ?? 'Add',
@@ -51,6 +56,8 @@ function settle(value: string | null): void {
 export function TextPrompt() {
   const request = textPromptRequest.value;
   const inputRef = useRef<HTMLInputElement>(null);
+  const dialogRef = useRef<HTMLDivElement>(null);
+  useFocusTrap(dialogRef, request !== null, { initial: inputRef });
 
   useEffect(() => {
     if (!request) return;
@@ -78,13 +85,21 @@ export function TextPrompt() {
   return (
     <div class="text-prompt-backdrop" onPointerDown={() => settle(null)}>
       <div
+        ref={dialogRef}
         class="text-prompt"
         role="dialog"
+        aria-modal="true"
         aria-label={request.title}
+        aria-describedby={request.description ? 'text-prompt-description' : undefined}
         data-testid="text-prompt"
         onPointerDown={(e) => e.stopPropagation()}
       >
         <div class="text-prompt-title">{request.title}</div>
+        {request.description && (
+          <div id="text-prompt-description" class="text-prompt-description">
+            {request.description}
+          </div>
+        )}
         <input
           // A fresh element per ask (so defaultValue applies) focused in the
           // ref callback, which Preact runs synchronously during commit — the
@@ -101,6 +116,8 @@ export function TextPrompt() {
           type="text"
           defaultValue={request.initial}
           placeholder={request.placeholder}
+          aria-label={request.title}
+          maxLength={request.maxLength}
           onKeyDown={(e) => {
             // Contained: the global shortcut layer must not see these.
             if (e.key === 'Enter') {