pmx-canvas 0.7.0 → 0.7.1

package/src/client/canvas/Presentation.tsx

@@ -1,9 +1,10 @@
-import { useEffect, useState } from 'preact/hooks';
+import { useEffect, useRef, useState } from 'preact/hooks';
 import { cameraSchema, interpolateCamera, resolveStop, type Camera, type Tour } from '../../shared/tour.js';
 import { canvasArea } from './canvas-area';
 import { cancelViewportAnimation, hasInitialServerLayout, nodes, viewport } from '../state/canvas-store';
 import { presenting, recordingCamera } from '../state/presentation';
 import { requestJson } from '../state/intent-bridge';
+import { usePanZoom } from './use-pan-zoom';
 
 declare global {
   interface Window {
@@ -22,6 +23,17 @@ export function Presentation() {
   const [error, setError] = useState('');
   const active = presenting.value;
   const ready = hasInitialServerLayout.value;
+  const frame = useRef(0);
+  const moveCamera = (camera: Camera) => {
+    cancelAnimationFrame(frame.current);
+    viewport.value = camera;
+  };
+  // A separate gesture surface keeps cards read-only and camera changes local.
+  const navigationRef = usePanZoom({
+    viewport,
+    onViewportChange: moveCamera,
+    onViewportCommit: moveCamera,
+  });
   useEffect(() => {
     const params = new URLSearchParams(location.search);
     presenting.value = params.get('present') === '1';
@@ -76,20 +88,20 @@ export function Presentation() {
     const from = { ...viewport.value };
     const start = performance.now();
     const duration = (stop.duration ?? 1) * 1000;
-    let frame = 0;
     const tick = (now: number) => {
       if (recordingCamera.value) return;
       const t = duration === 0 ? 1 : Math.min(1, (now - start) / duration);
       viewport.value = interpolateCamera(from, target, t, area.width, area.height, stop.easing, stop.pullback);
-      if (t < 1) frame = requestAnimationFrame(tick);
+      if (t < 1) frame.current = requestAnimationFrame(tick);
     };
-    frame = requestAnimationFrame(tick);
-    return () => cancelAnimationFrame(frame);
+    frame.current = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(frame.current);
   }, [active, index, tour]);
   useEffect(() => {
     if (!active) return;
     const key = (event: KeyboardEvent) => {
       event.stopImmediatePropagation();
+      if (event.target instanceof HTMLButtonElement && ['Enter', ' '].includes(event.key)) return;
       if (['Escape', 'ArrowRight', 'ArrowDown', 'ArrowLeft', 'ArrowUp', ' '].includes(event.key))
         event.preventDefault();
       if (event.key === 'Escape') presenting.value = false;
@@ -100,9 +112,27 @@ export function Presentation() {
     document.addEventListener('keydown', key, true);
     return () => document.removeEventListener('keydown', key, true);
   }, [active, tour]);
-  return active && error ? (
-    <div class="presentation-error" role="alert">
-      {error}
-    </div>
+  return active ? (
+    <>
+      {!recordingCamera.value && (
+        <div
+          class="presentation-navigation"
+          ref={navigationRef}
+          onPointerDown={(event) => {
+            if (event.button === 1 || event.button === 2) cancelAnimationFrame(frame.current);
+          }}
+          onContextMenu={(event) => event.preventDefault()}
+        >
+          <button type="button" class="presentation-exit" onClick={() => (presenting.value = false)}>
+            Exit presentation
+          </button>
+        </div>
+      )}
+      {error && (
+        <div class="presentation-error" role="alert">
+          {error}
+        </div>
+      )}
+    </>
   ) : null;
 }

package/src/client/canvas/SelectionBar.tsx

@@ -8,7 +8,6 @@ import {
   clearSelection,
   contextPinnedNodeIds,
   distributeSelection,
-  removeNode,
   selectedNodeIds,
 } from '../state/canvas-store';
 import { createEdgeFromClient, createGroupFromClient, removeNodeFromClient } from '../state/intent-bridge';
@@ -51,7 +50,6 @@ export function SelectionBar() {
   const handleDelete = useCallback(() => {
     const ids = Array.from(selectedNodeIds.value);
     for (const id of ids) {
-      removeNode(id);
       void removeNodeFromClient(id);
     }
     clearSelection();

package/src/client/nodes/AttachmentNode.tsx

@@ -11,7 +11,6 @@ export function AttachmentNode({ node, expanded = false }: { node: CanvasNodeSta
   const boardId = activeBoardId.value;
   const [job, setJob] = useState<DocumentImport | null>(null);
   const [review, setReview] = useState(expanded);
-  const [consent, setConsent] = useState(false);
   const [busy, setBusy] = useState(false);
   useEffect(() => {
     let current = true;
@@ -53,7 +52,6 @@ export function AttachmentNode({ node, expanded = false }: { node: CanvasNodeSta
     setBusy(false);
     if (result?.import) {
       setJob(result.import);
-      setConsent(false);
       setReview(false);
       if (expanded && action === 'commit') collapseExpandedNode();
     }
@@ -74,22 +72,19 @@ export function AttachmentNode({ node, expanded = false }: { node: CanvasNodeSta
         Download original · {Math.ceil(Number(node.data.size ?? 0) / 1024)} KB
       </a>
       {job?.reason && <p>{job.reason}</p>}
-      {canRequest && !consent && (
-        <button type="button" class="home-board-action" onClick={() => setConsent(true)}>
-          Ask agent to import
-        </button>
-      )}
-      {consent && (
+      {canRequest && (
         <>
-          <p>
-            The connected agent may send this file to its model provider. It needs file-reading tools and access to the
-            original. Canvas does not convert files itself.
+          <p id={`import-consent-${node.id}`}>
+            Asking the agent to import allows it to process this file with its tools and model provider.
           </p>
-          <button type="button" class="home-board-action" disabled={busy} onClick={() => void act('request')}>
-            Allow processing & request
-          </button>
-          <button type="button" class="home-board-action" onClick={() => setConsent(false)}>
-            Not now
+          <button
+            type="button"
+            class="attachment-button is-primary"
+            aria-describedby={`import-consent-${node.id}`}
+            disabled={busy}
+            onClick={() => void act('request')}
+          >
+            Ask agent to import
           </button>
         </>
       )}
@@ -98,17 +93,17 @@ export function AttachmentNode({ node, expanded = false }: { node: CanvasNodeSta
           No automatic extraction. Ask your connected agent to check its pending steering or use canvas_import list.
         </p>
       )}
-      {job?.status === 'drafted' && (
+      {job?.status === 'drafted' && !review && (
         <button
           type="button"
-          class="home-board-action"
+          class="attachment-button is-primary"
           onClick={() => (expanded ? setReview(true) : expandNode(node.id))}
         >
           Review Markdown · {job.sections.length} {job.sections.length === 1 ? 'card' : 'cards'}
         </button>
       )}
       {job && ['requested', 'drafted'].includes(job.status) && (
-        <button type="button" class="home-board-action" disabled={busy} onClick={() => void act('cancel')}>
+        <button type="button" class="attachment-button" disabled={busy} onClick={() => void act('cancel')}>
           Cancel import
         </button>
       )}
@@ -130,17 +125,19 @@ export function AttachmentNode({ node, expanded = false }: { node: CanvasNodeSta
               <pre>{section.markdown}</pre>
             </section>
           ))}
-          <button type="button" class="home-board-action" onClick={() => setReview(false)}>
-            Close review
-          </button>
-          <button
-            type="button"
-            class="home-view-new"
-            disabled={busy || boardId !== job.boardId}
-            onClick={() => void act('commit')}
-          >
-            Add to board
-          </button>
+          <div class="attachment-review-actions">
+            <button type="button" class="attachment-button" onClick={() => setReview(false)}>
+              Close review
+            </button>
+            <button
+              type="button"
+              class="attachment-button is-primary"
+              disabled={busy || boardId !== job.boardId}
+              onClick={() => void act('commit')}
+            >
+              Add to board
+            </button>
+          </div>
         </div>
       )}
     </div>

package/src/client/state/attention-bridge.ts

@@ -274,7 +274,9 @@ function enqueueToast(entry: AttentionEntry): void {
 
 /** Show a transient toast from arbitrary client code (e.g. AX action feedback). */
 export function showToast(tone: AttentionTone, title: string, detail = '', nodeIds: string[] = []): void {
-  enqueueToast(makeEntry(tone, title, detail, nodeIds));
+  const entry = makeEntry(tone, title, detail, nodeIds);
+  pushAttentionHistory(entry);
+  enqueueToast(entry);
 }
 
 function pulseNodes(nodeIds: string[]): void {

package/src/client/state/sse-bridge.ts

@@ -41,7 +41,7 @@ import {
 import { agentActivity, applyPresenceSnapshot, sessionActive } from './presence-store';
 import { applyHumanSnapshot, startHumanPresence } from './human-store';
 import type { HumanPresenceSnapshot } from '../../shared/human-presence.js';
-import { applySessionReceipt, refreshTimeline } from './session-store';
+import { applySessionReceipt, dismissSessionReceipt, refreshTimeline } from './session-store';
 import { initSessionThemeOverride, themeOverrideActive } from './theme-override';
 import { DEFAULT_POSITIONS, makeNodeState } from './node-factory';
 import { invalidateTokenCache } from '../theme/tokens';
@@ -479,6 +479,8 @@ function resyncForBoardSwitch(): void {
   hasInitialServerLayout.value = false;
   resetIntents();
   resetCanvasInteractionState();
+  resetAttentionBridge();
+  dismissSessionReceipt();
   axSurfaceState.value = null;
   void refreshAxSurface();
   const layoutAtRequest = layoutRevision;

package/src/client/theme/global.css

@@ -4784,7 +4784,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   position: absolute;
   top: 18px;
   right: 18px;
-  max-width: min(260px, calc(100% - 24px));
+  max-width: min(360px, calc(100% - 36px));
   display: inline-flex;
   align-items: center;
   gap: 8px;
@@ -4792,7 +4792,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   background: color-mix(in srgb, var(--c-panel-glass) 96%, transparent);
   backdrop-filter: blur(14px);
   border: 1px solid color-mix(in srgb, var(--c-line) 76%, var(--c-warn) 24%);
-  border-radius: 999px;
+  border-radius: 12px;
   box-shadow: 0 8px 22px var(--c-shadow);
   color: var(--c-text);
   font: inherit;
@@ -4831,15 +4831,27 @@ html.is-node-resizing .ext-app-preview-catcher {
   box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 28%, transparent);
 }
 
+.attention-toast-copy {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+  text-align: left;
+  overflow-wrap: anywhere;
+}
+
+.attention-toast-detail {
+  color: var(--c-text-soft);
+  font-size: 12px;
+  line-height: 1.45;
+  max-height: 9em;
+  overflow: auto;
+}
+
 .attention-toast-title {
   font-size: 12px;
   font-weight: 600;
   line-height: 1.2;
   letter-spacing: -0.005em;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 200px;
 }
 
 .attention-history {
@@ -6841,12 +6853,23 @@ html.is-node-dragging .intent-line-layer {
   padding: 4px 12px;
   cursor: pointer;
 }
-.is-presenting > :not(.app-main):not(.presentation-error),
+.is-presenting > :not(.app-main):not(.presentation-error):not(.presentation-navigation),
 .is-presenting .app-main > :not(.canvas-region),
 .is-presenting .canvas-region > :not(.canvas-viewport) {
   display: none !important;
 }
 .is-presenting .canvas-viewport { pointer-events: none; }
+.presentation-navigation {
+  position: fixed;
+  inset: 0;
+  z-index: 99;
+}
+.presentation-exit {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  box-shadow: 0 2px 12px var(--c-shadow);
+}
 .presentation-error {
   position: fixed;
   bottom: 16px;
@@ -7104,10 +7127,17 @@ html.is-node-dragging .intent-line-layer {
 }
 .export-dialog-links {
   display: flex;
+  flex-wrap: wrap;
   gap: 12px;
+  margin-top: 12px;
 }
 .export-dialog-links a {
-  color: var(--c-accent);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  text-decoration: none;
+  word-break: normal;
 }
 
 /* ── Home categories ── */
@@ -7267,9 +7297,42 @@ html.is-node-dragging .intent-line-layer {
 .attachment-node p { margin: 0; color: var(--c-text-soft); line-height: 1.5; }
 .attachment-node a, .md-import-source a { color: var(--c-accent); }
 .attachment-status { font-weight: 600; }
-.attachment-node .home-board-action { border-color: var(--c-line); color: var(--c-text); min-height: 34px; }
-.attachment-node .home-board-action:hover { background: var(--c-panel); border-color: var(--c-accent); }
+.attachment-button,
+.presentation-exit,
+.export-dialog-links a {
+  min-height: 38px;
+  padding: 8px 14px;
+  border: 1px solid var(--c-text-soft);
+  border-radius: 8px;
+  background: var(--c-panel);
+  color: var(--c-text);
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+}
+.attachment-button.is-primary,
+.export-dialog-links a.is-primary { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-bg); }
+.attachment-button:hover:not(:disabled),
+.presentation-exit:hover,
+.export-dialog-links a:hover { filter: brightness(1.12); }
+.attachment-button:focus-visible,
+.presentation-exit:focus-visible,
+.export-dialog-links a:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
+.attachment-button:disabled { opacity: 0.5; cursor: default; }
 .attachment-review { width: 100%; border-top: 1px solid var(--c-line); padding-top: 12px; }
+.attachment-review-actions {
+  position: sticky;
+  bottom: -16px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 12px;
+  margin-top: 24px;
+  padding: 16px 0;
+  border-top: 1px solid var(--c-line);
+  background: var(--c-panel);
+  z-index: 1;
+}
 .attachment-review pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.6 var(--mono); padding: 12px; background: var(--c-bg); border-radius: 8px; }
 .attachment-review h4 { margin-bottom: 6px; }
 .md-import-source { padding: 6px 12px; font-size: 11px; overflow-wrap: anywhere; color: var(--c-text-soft); border-top: 1px solid var(--c-line); }

package/src/server/operations/ops/imports.ts

@@ -1,6 +1,8 @@
 import { z } from 'zod';
 import { canvasState } from '../../canvas-state.js';
-import { addCanvasNode } from '../../canvas-operations.js';
+import { addCanvasNode, createCanvasGroup } from '../../canvas-operations.js';
+import { findOpenCanvasPosition, overlapsAny } from '../../../shared/placement.js';
+import { GROUP_PAD, GROUP_TITLEBAR_HEIGHT } from '../../placement.js';
 import {
   MAX_IMPORT_AGENT_DESCRIPTION_LENGTH,
   MAX_IMPORT_REASON_LENGTH,
@@ -192,6 +194,17 @@ const commit = defineOperation({
       throw new OperationError('Open the captured source board before committing this import.', 409);
     const a = canvasState.getAttachment(job.attachmentId);
     if (!a) throw new OperationError('Attachment not found.', 404);
+    const grouped = job.sections.length > 1;
+    const padX = grouped ? GROUP_PAD : 0;
+    const padY = grouped ? GROUP_PAD + GROUP_TITLEBAR_HEIGHT : 0;
+    const width = Math.min(job.sections.length, 2) * 440 - 40 + padX * 2;
+    const height = Math.ceil(job.sections.length / 2) * 340 - 60 + padY + padX;
+    // Reserve the whole grid, including its group frame, against current board
+    // geometry. Another import or edit may have occupied the drop-time anchor.
+    const obstacles = canvasState.getLayout().nodes;
+    const origin = overlapsAny(job.position, width, height, obstacles, 48)
+      ? findOpenCanvasPosition(obstacles, width, height, 48)
+      : job.position;
     const nodeIds = job.sections.map(
       (s, index) =>
         addCanvasNode({
@@ -201,17 +214,20 @@ const commit = defineOperation({
           data: {
             source: { attachmentId: a.id, filename: a.name, ...(s.reference ? { reference: s.reference } : {}) },
           },
-          x: job.position.x + (index % 2) * 440,
-          y: job.position.y + Math.floor(index / 2) * 340,
+          x: origin.x + padX + (index % 2) * 440,
+          y: origin.y + padY + Math.floor(index / 2) * 340,
           defaultWidth: 400,
           defaultHeight: 280,
           fileMode: 'auto',
         }).id,
     );
+    let groupId: string | undefined;
     try {
+      if (grouped) groupId = createCanvasGroup({ title: a.name, childIds: nodeIds }).id;
       const committed = canvasState.commitDocumentImport(i.id, nodeIds);
       return { ok: true, nodeIds, import: committed };
     } catch (error) {
+      if (groupId) canvasState.removeNode(groupId);
       for (const nodeId of nodeIds) canvasState.removeNode(nodeId);
       throw error;
     }