pmx-canvas 0.6.3 → 0.6.5

package/src/cli/commands/record.ts

@@ -0,0 +1,218 @@
+import { mkdirSync, existsSync } from 'node:fs';
+import { resolve, join } from 'node:path';
+import { z } from 'zod';
+import { isCanvasTheme } from '../../shared/themes.js';
+import { derivedTour, tourSchema, tourFrames, type Camera, type TourNode } from '../../shared/tour.js';
+import {
+  startCanvasAutomationWebView,
+  evaluateCanvasAutomationWebView,
+  screenshotCanvasAutomationWebView,
+  resizeCanvasAutomationWebView,
+  stopCanvasAutomationWebView,
+} from '../../server/server.js';
+import { cmd, getBaseUrl, invokeOperation, output, parseFlags, showCommandHelp } from '../shared.js';
+
+export function parseRecordOptions(flags: Record<string, string | boolean>) {
+  const number = (key: string, fallback: number) => {
+    if (flags[key] === true || flags[key] === false) throw new Error(`--${key} needs a number`);
+    return flags[key] === undefined ? fallback : Number(flags[key]);
+  };
+  for (const key of ['tour-file', 'chrome-path']) {
+    if (flags[key] !== undefined && typeof flags[key] !== 'string') throw new Error(`--${key} needs a path`);
+  }
+  const resolution = String(flags.resolution ?? '1280x720').match(/^(\d+)x(\d+)$/);
+  if (!resolution) throw new Error('Use --resolution WIDTHxHEIGHT');
+  const options = z
+    .object({
+      width: z.number().int().min(64).max(7680),
+      height: z.number().int().min(64).max(4320),
+      fps: z.number().int().min(1).max(120),
+      duration: z.number().positive().max(86400).optional(),
+      mode: z.enum(['realtime', 'deterministic']),
+      output: z.string().min(1),
+    })
+    .parse({
+      width: Number(resolution[1]),
+      height: Number(resolution[2]),
+      fps: number('fps', 30),
+      duration: flags.duration === undefined ? undefined : number('duration', 10),
+      mode: flags.mode ?? 'realtime',
+      output: typeof flags.output === 'string' ? flags.output : '',
+    });
+  if (flags.theme !== undefined && !isCanvasTheme(flags.theme)) throw new Error('Unknown --theme');
+  if (options.mode === 'realtime' && !options.duration && flags['stop-on-signal'] !== true) {
+    throw new Error('Realtime recording needs --duration SECONDS or --stop-on-signal');
+  }
+  if (options.mode === 'deterministic' && (flags.duration !== undefined || flags['stop-on-signal'])) {
+    throw new Error('Deterministic duration comes from tour stops; omit --duration and --stop-on-signal');
+  }
+  if (flags['tour-file'] && options.mode !== 'deterministic')
+    throw new Error('--tour-file requires --mode deterministic');
+  return {
+    ...options,
+    theme: typeof flags.theme === 'string' ? flags.theme : undefined,
+    present: flags.present === true,
+    tourFile: typeof flags['tour-file'] === 'string' ? flags['tour-file'] : undefined,
+    chromePath: typeof flags['chrome-path'] === 'string' ? flags['chrome-path'] : undefined,
+  };
+}
+
+cmd('tour get', 'Read the persisted tour or derived group order', ['pmx-canvas tour get'], async () => {
+  output(await invokeOperation('tour.get', {}));
+});
+cmd(
+  'tour set',
+  'Persist camera stops from JSON (null resets to group order)',
+  ['pmx-canvas tour set --file tour.json'],
+  async (args) => {
+    const { flags } = parseFlags(args);
+    if (flags.help) return showCommandHelp('tour set');
+    if (typeof flags.file !== 'string') throw new Error('Missing --file');
+    const tour = tourSchema.nullable().parse(await Bun.file(flags.file).json());
+    output(await invokeOperation('tour.set', { tour }));
+  },
+);
+
+cmd(
+  'record',
+  'Optionally capture the board tour or live presentation using Bun.WebView Chrome',
+  [
+    'pmx-canvas record --duration 10 --present --output demo.mp4',
+    'pmx-canvas record --mode deterministic --tour-file tour.json --present --fps 30 --output frames',
+    'pmx-canvas record --stop-on-signal --resolution 1920x1080 --output live.mp4',
+  ],
+  async (args) => {
+    const { flags } = parseFlags(args, { boolFlags: ['present', 'stop-on-signal'] });
+    if (flags.help || flags.h) return showCommandHelp('record');
+    const options = parseRecordOptions(flags);
+    const outputPath = resolve(options.output);
+    const video = /\.mp4$/i.test(outputPath);
+    const framesPath = video ? `${outputPath}.frames` : outputPath;
+    if (existsSync(outputPath) || existsSync(framesPath)) throw new Error('Output already exists; choose a new path');
+    const response = await fetch(`${getBaseUrl()}/api/canvas/state`);
+    if (!response.ok) throw new Error(`Cannot read board: HTTP ${response.status}`);
+    const board = (await response.json()) as { nodes: TourNode[]; viewport: Camera; tour?: unknown };
+    const tour =
+      options.mode === 'deterministic'
+        ? tourSchema.parse(
+            options.tourFile ? await Bun.file(options.tourFile).json() : (board.tour ?? derivedTour(board.nodes)),
+          )
+        : undefined;
+    if (tour && !tour.stops.length) throw new Error('No tour stops: supply --tour-file or create groups/a tour');
+    const url = new URL('/workbench', getBaseUrl());
+    if (options.present) url.searchParams.set('present', '1');
+    if (tour) url.searchParams.set('capture', '1');
+    if (options.theme) url.searchParams.set('theme', options.theme);
+    let stopping = false;
+    const stop = () => {
+      stopping = true;
+    };
+    process.on('SIGINT', stop);
+    process.on('SIGTERM', stop);
+    let count = 0;
+    let duplicated = 0;
+    try {
+      await startCanvasAutomationWebView(url.href, {
+        backend: 'chrome',
+        width: options.width,
+        height: options.height,
+        chromePath: options.chromePath,
+      });
+      const deadline = Date.now() + 30_000;
+      while (!(await evaluateCanvasAutomationWebView('!!window.pmxCapture?.ready()'))) {
+        if (Date.now() > deadline) throw new Error('Workbench did not become capture-ready in 30 seconds');
+        await Bun.sleep(50);
+      }
+      // Chrome launch dimensions describe the outer window. WebView.resize
+      // applies viewport emulation, giving screenshots the requested pixels.
+      await resizeCanvasAutomationWebView(options.width, options.height);
+      await evaluateCanvasAutomationWebView(
+        'new Promise(r => requestAnimationFrame(() => requestAnimationFrame(() => r(true))))',
+      );
+      await evaluateCanvasAutomationWebView('document.fonts.ready.then(() => true)');
+      const area = (await evaluateCanvasAutomationWebView('window.pmxCapture.area()')) as {
+        width: number;
+        height: number;
+      };
+      const initial = (await evaluateCanvasAutomationWebView('window.pmxCapture.camera()')) as Camera;
+      mkdirSync(framesPath, { recursive: true });
+      const write = async (bytes: Uint8Array) => {
+        await Bun.write(join(framesPath, `frame-${String(count++).padStart(6, '0')}.png`), bytes);
+      };
+      const started = performance.now();
+      if (tour) {
+        for (const camera of tourFrames(tour, initial, board.nodes, area.width, area.height, options.fps)) {
+          if (stopping) break;
+          const applied = (await evaluateCanvasAutomationWebView(
+            `window.pmxCapture.frame(${JSON.stringify(camera)})`,
+          )) as Camera;
+          if (applied.x !== camera.x || applied.y !== camera.y || applied.scale !== camera.scale) {
+            throw new Error('Capture camera was changed before paint');
+          }
+          await write(await screenshotCanvasAutomationWebView({ format: 'png' }));
+        }
+      } else {
+        const limit = options.duration ? Math.ceil(options.duration * options.fps) : Infinity;
+        while (!stopping && count < limit) {
+          await Bun.sleep(Math.max(0, started + (count / options.fps) * 1000 - performance.now()));
+          const bytes = await screenshotCanvasAutomationWebView({ format: 'png' });
+          await write(bytes);
+          // Preserve wall-clock speed if capture is slower than requested fps.
+          const elapsedFrames = Math.min(limit, Math.floor(((performance.now() - started) / 1000) * options.fps));
+          while (count < elapsedFrames) {
+            await write(bytes);
+            duplicated++;
+          }
+        }
+      }
+      await Bun.write(
+        join(framesPath, 'recording.json'),
+        JSON.stringify(
+          {
+            mode: options.mode,
+            fps: options.fps,
+            width: options.width,
+            height: options.height,
+            frames: count,
+            duplicated,
+            seconds: count / options.fps,
+          },
+          null,
+          2,
+        ),
+      );
+    } finally {
+      process.off('SIGINT', stop);
+      process.off('SIGTERM', stop);
+      await stopCanvasAutomationWebView();
+    }
+    let encoded = false;
+    if (video && count > 0) {
+      const ffmpeg = Bun.which('ffmpeg');
+      if (!ffmpeg) console.error(`ffmpeg not found; PNG sequence retained at ${framesPath}`);
+      else {
+        const process = Bun.spawn(
+          [
+            ffmpeg,
+            '-n',
+            '-framerate',
+            String(options.fps),
+            '-i',
+            join(framesPath, 'frame-%06d.png'),
+            '-c:v',
+            'libx264',
+            '-pix_fmt',
+            'yuv420p',
+            '-vf',
+            'pad=ceil(iw/2)*2:ceil(ih/2)*2',
+            outputPath,
+          ],
+          { stdout: 'ignore', stderr: 'inherit' },
+        );
+        encoded = (await process.exited) === 0;
+        if (!encoded) throw new Error(`ffmpeg failed; PNG sequence retained at ${framesPath}`);
+      }
+    }
+    output({ ok: true, output: encoded ? outputPath : framesPath, frames: count, fps: options.fps, duplicated });
+  },
+);

package/src/cli/index.ts

@@ -32,6 +32,8 @@ if (args.includes('--version') || args.includes('-v')) {
 // ── Agent CLI subcommands ────────────────────────────────────
 // If first arg is a known subcommand (not a --flag), route to the agent CLI.
 const AGENT_COMMANDS = new Set([
+  'tour',
+  'record',
   'node',
   'edge',
   'json-render',

package/src/client/App.tsx

@@ -1,4 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import { Presentation } from './canvas/Presentation';
+import { presenting } from './state/presentation';
 import { AttentionHistory } from './canvas/AttentionHistory';
 import { AttentionToast } from './canvas/AttentionToast';
 import { registerCanvasArea, canvasArea } from './canvas/canvas-area';
@@ -324,7 +326,11 @@ export function App() {
   const area = canvasArea();
 
   return (
-    <div class="app-shell" data-session-active={sessionIsActive ? 'true' : 'false'}>
+    <div
+      class={`app-shell${presenting.value ? ' is-presenting' : ''}`}
+      data-session-active={sessionIsActive ? 'true' : 'false'}
+    >
+      <Presentation />
       <ToolRail
         minimapVisible={minimapVisible}
         onToggleMinimap={handleToggleMinimap}

package/src/client/canvas/AgentPresenceLayer.tsx

@@ -45,7 +45,7 @@ export function AgentPresenceLayer() {
       {cursors.map(({ presence, position }) => (
         <div
           key={presence.sessionId}
-          class={`agent-cursor phase-${presence.phase}${presence.attached ? '' : ' is-external'}${presence.parentAgentId ? ' is-worker' : ''}`}
+          class={`agent-cursor phase-${presence.phase}${presence.cursor ? ' has-explicit-cursor' : ''}${presence.attached ? '' : ' is-external'}${presence.parentAgentId ? ' is-worker' : ''}`}
           data-session-id={presence.sessionId}
           style={{
             transform: `translate(${position.x}px, ${position.y}px)`,

package/src/client/canvas/CanvasNode.tsx

@@ -187,6 +187,9 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
     viewport,
     onMove: handleMove,
     onDragEnd: handleDragEnd,
+    onClick: () => {
+      selectedNodeIds.value = new Set([node.id]);
+    },
   });
 
   // ── Resize ────────────────────────────────────────────
@@ -236,6 +239,11 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
     (e: PointerEvent) => {
       if (e.button !== 0) return;
       if (renaming) return;
+      // Title controls act on the node without selecting or dragging it.
+      if (e.target instanceof Element && e.target.closest('button, input')) {
+        e.stopPropagation();
+        return;
+      }
       if (canvasTool.value === 'connect') {
         startEdgeDrag(e);
         return;

package/src/client/canvas/FeedbackDialog.tsx

@@ -0,0 +1,86 @@
+import { useRef, useState } from 'preact/hooks';
+import { useFocusTrap } from './use-focus-trap';
+
+/** Draft only: GitHub owns authentication and the final public submission. */
+export function FeedbackDialog({ onClose }: { onClose: () => void }) {
+  const ref = useRef<HTMLFormElement>(null);
+  const [kind, setKind] = useState('Bug report');
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  useFocusTrap(ref, true);
+
+  return (
+    <div class="text-prompt-backdrop feedback-backdrop" onPointerDown={onClose}>
+      <form
+        ref={ref}
+        class="text-prompt feedback-dialog"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="feedback-title"
+        aria-describedby="feedback-privacy"
+        action="https://github.com/pskoett/pmx-canvas/issues/new"
+        method="get"
+        target="_blank"
+        rel="noopener noreferrer"
+        onPointerDown={(e) => e.stopPropagation()}
+        onKeyDown={(e) => {
+          e.stopPropagation();
+          if (e.key === 'Escape') {
+            e.preventDefault();
+            onClose();
+          }
+        }}
+      >
+        <div id="feedback-title" class="text-prompt-title">
+          Bug and feedback
+        </div>
+        <p id="feedback-privacy" class="feedback-note">
+          Opens a draft issue in pskoett/pmx-canvas. Review and submit it on GitHub using your account. Issues are
+          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>
+        <label>
+          Title
+          <input
+            class="text-prompt-input"
+            name="title"
+            required
+            maxLength={120}
+            value={title}
+            onInput={(e) => setTitle(e.currentTarget.value)}
+            placeholder="A short summary"
+          />
+        </label>
+        <label>
+          Description
+          <textarea
+            class="text-prompt-input"
+            required
+            maxLength={1200}
+            rows={6}
+            value={description}
+            onInput={(e) => setDescription(e.currentTarget.value)}
+            placeholder="What happened, what you expected, and steps to reproduce — or describe your idea."
+          />
+        </label>
+        <input type="hidden" name="body" value={`## ${kind}\n\n${description.trim()}`} />
+        <div class="text-prompt-actions">
+          <button type="button" class="text-prompt-cancel" onClick={onClose}>
+            Cancel
+          </button>
+          <button type="submit" class="text-prompt-confirm" disabled={!title.trim() || !description.trim()}>
+            Continue on GitHub ↗
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}

package/src/client/canvas/IntentLayer.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'preact/hooks';
 import { nodes } from '../state/canvas-store';
-import { hoveredIntentId, intents, type ClientIntent } from '../state/intent-store';
+import { hoveredIntentId, intents, removeIntent, type ClientIntent } from '../state/intent-store';
 import { vetoGhostIntent } from '../state/intent-bridge';
 import { getNodeIcon } from '../icons';
 import { TYPE_LABELS } from '../types';
@@ -241,7 +241,14 @@ export function IntentLayer() {
   if (list.length === 0) return null;
 
   return (
-    <div class="intent-layer">
+    <div
+      class="intent-layer"
+      onAnimationEnd={(event) => {
+        if (event.animationName !== 'intent-settle' && event.animationName !== 'intent-dissolve') return;
+        const id = (event.target as HTMLElement).dataset.intentId;
+        if (id && intents.value.get(id)?.phase !== 'forming') removeIntent(id);
+      }}
+    >
       <svg
         class="intent-line-layer"
         style={{

package/src/client/canvas/Presentation.tsx

@@ -0,0 +1,108 @@
+import { useEffect, 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';
+
+declare global {
+  interface Window {
+    pmxCapture?: {
+      ready: () => boolean;
+      area: typeof canvasArea;
+      camera: () => Camera;
+      frame: (camera: Camera) => Promise<Camera>;
+    };
+  }
+}
+
+export function Presentation() {
+  const [tour, setTour] = useState<Tour>({ stops: [] });
+  const [index, setIndex] = useState(0);
+  const [error, setError] = useState('');
+  const active = presenting.value;
+  const ready = hasInitialServerLayout.value;
+  useEffect(() => {
+    const params = new URLSearchParams(location.search);
+    presenting.value = params.get('present') === '1';
+    recordingCamera.value = params.get('capture') === '1';
+    window.pmxCapture = {
+      ready: () => hasInitialServerLayout.value,
+      area: canvasArea,
+      camera: () => ({ ...viewport.value }),
+      frame: async (camera) => {
+        recordingCamera.value = true;
+        cancelViewportAnimation();
+        viewport.value = cameraSchema.parse(camera);
+        // Two animation frames: Preact has committed and the browser has had
+        // a paint opportunity before the screenshot command is acknowledged.
+        await new Promise<void>((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve())));
+        return { ...viewport.value };
+      },
+    };
+    return () => {
+      delete window.pmxCapture;
+      presenting.value = false;
+      recordingCamera.value = false;
+    };
+  }, []);
+  useEffect(() => {
+    if (!active || !ready) return;
+    let cancelled = false;
+    void requestJson('read tour', '/api/canvas/tour', { tour: { stops: [] } as Tour }).then((result) => {
+      if (!cancelled) {
+        setTour(result.tour);
+        setIndex(0);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [active, ready]);
+  useEffect(() => {
+    if (!active || recordingCamera.value) return;
+    const stop = tour.stops[index];
+    if (!stop) return;
+    const area = canvasArea();
+    let target: Camera;
+    try {
+      target = resolveStop(stop, [...nodes.value.values()], area.width, area.height);
+      setError('');
+    } catch (error) {
+      setError(error instanceof Error ? error.message : String(error));
+      return;
+    }
+    cancelViewportAnimation();
+    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);
+    };
+    frame = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(frame);
+  }, [active, index, tour]);
+  useEffect(() => {
+    if (!active) return;
+    const key = (event: KeyboardEvent) => {
+      event.stopImmediatePropagation();
+      if (['Escape', 'ArrowRight', 'ArrowDown', 'ArrowLeft', 'ArrowUp', ' '].includes(event.key))
+        event.preventDefault();
+      if (event.key === 'Escape') presenting.value = false;
+      if (['ArrowRight', 'ArrowDown', ' '].includes(event.key))
+        setIndex((i) => Math.max(0, Math.min(tour.stops.length - 1, i + 1)));
+      if (['ArrowLeft', 'ArrowUp'].includes(event.key)) setIndex((i) => Math.max(0, i - 1));
+    };
+    document.addEventListener('keydown', key, true);
+    return () => document.removeEventListener('keydown', key, true);
+  }, [active, tour]);
+  return active && error ? (
+    <div class="presentation-error" role="alert">
+      {error}
+    </div>
+  ) : null;
+}