@1agh/maude 0.28.0 → 0.29.0

package/{plugins/design/dev-server → apps/studio}/http.ts

@@ -19,7 +19,8 @@ import type { ActiveJsonShape } from './exporters/scope.ts';
 import type { Inspect } from './inspect.ts';
 import { canvasSlug, writeLocator } from './locator.ts';
 import { DEV_SERVER_ROOT } from './paths.ts';
-import { RUNTIME_PACKAGES, getRuntimeBundle, packageForSlug, slugFor } from './runtime-bundle.ts';
+import { getRuntimeBundle, packageForSlug, RUNTIME_PACKAGES, slugFor } from './runtime-bundle.ts';
+import { loadWhatsNew } from './whats-new.ts';
 
 // Real disk install root — never the virtual `/$bunfs/root` of compiled bins.
 // See paths.ts for the resolution logic + Phase 19.1 / v0.18.1 rationale.
@@ -131,7 +132,10 @@ function safePathUnderRoot(reqUrl: string, repoRoot: string): string | null {
 // and inside the standalone binary's embedded FS in --compile mode.
 const DIST_DIR = join(HERE, 'dist');
 const CLIENT_DIR = join(HERE, 'client');
-const TEMPLATES_DIR = join(HERE, '..', 'templates');
+// Templates stayed under the design *plugin* (plugins/design/templates) when the
+// dev-server moved to apps/studio (DDR-095) — both ship in the npm tarball, so
+// from DEV_SERVER_ROOT (apps/studio) reach across with ../../plugins/design.
+const TEMPLATES_DIR = join(HERE, '..', '..', 'plugins', 'design', 'templates');
 
 // In-memory transpile cache. Key = absolute canvas path. Repeat GETs against an
 // unchanged source skip the parse + ID-injection + Bun.Transpiler + Bun.build
@@ -424,6 +428,12 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
 
     '/_config': () => Response.json({ ...ctx.cfg, canvasOrigin: ctx.canvasOrigin }),
 
+    // What's New feed (DDR-A) — read-only product-update list surfaced in the
+    // Maude UI chrome. Main-origin only by omission from the canvas-origin
+    // allowlist below (the untrusted canvas iframe never needs it).
+    '/_api/whats-new': () =>
+      Response.json(loadWhatsNew(), { headers: { 'Cache-Control': 'no-store' } }),
+
     '/_index-data': async () =>
       Response.json(await api.buildIndexData(), { headers: { 'Cache-Control': 'no-store' } }),
 
@@ -582,6 +592,91 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
       return new Response('Method not allowed', { status: 405 });
     },
 
+    '/_api/canvas': async (req: Request) => {
+      // Phase 22 — create + soft-delete a canvas from the browser file tree.
+      // POST   body { name, kind?: "brief-board", group? } → 201 { file, rel, slug }
+      // DELETE ?file=<rel>                                 → 200 { rel, slug, trashed[] }
+      // MAIN ORIGIN ONLY: this route is intentionally absent from
+      // startCanvasServer's allowlist (DDR-054) — the untrusted canvas iframe
+      // origin must never reach a file-write/-delete endpoint. Validation lives in
+      // api.createCanvas / api.deleteCanvas (containment + group allowlist).
+      if (req.method === 'DELETE') {
+        const file = new URL(req.url).searchParams.get('file');
+        const result = await api.deleteCanvas({ file });
+        if (!result.ok) {
+          return Response.json(
+            { ok: false, error: result.error },
+            { status: result.status, headers: { 'Cache-Control': 'no-store' } }
+          );
+        }
+        return Response.json(
+          {
+            ok: true,
+            rel: result.rel,
+            slug: result.slug,
+            trashed: result.trashed,
+            trashDir: result.trashDir,
+          },
+          { status: 200, headers: { 'Cache-Control': 'no-store' } }
+        );
+      }
+      if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
+      const body = await readJson<{ name?: unknown; kind?: unknown; group?: unknown }>(
+        req,
+        8 * 1024
+      );
+      if (!body) return new Response('body required', { status: 400 });
+      const result = await api.createCanvas(body);
+      if (!result.ok) {
+        return Response.json(
+          { ok: false, error: result.error },
+          { status: result.status, headers: { 'Cache-Control': 'no-store' } }
+        );
+      }
+      return Response.json(
+        { ok: true, file: result.file, rel: result.rel, slug: result.slug },
+        { status: 201, headers: { 'Cache-Control': 'no-store' } }
+      );
+    },
+
+    '/_api/asset': async (req: Request) => {
+      // Phase 23 — binary image upload from the canvas (drag-drop / paste / the
+      // a11y file picker). POST raw image bytes → content-addressed write under
+      // <designRoot>/assets/<sha8>.<ext>, returns 201 { path }. This route is on
+      // the canvas-origin allowlist (CANVAS_SAFE_API below) — a bigger grant than
+      // the inert annotation-SVG write (binary, disk) — so the caps in
+      // api.saveAsset (magic-byte sniff, 10 MB ceiling, content-addressed name,
+      // traversal guard, no-SVG, dedupe) are the load-bearing trust mitigation,
+      // NOT optional. See DDR (Task 9).
+      if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
+      // Early reject on a declared oversize body (the post-read length check in
+      // saveAsset is the authoritative gate — Content-Length can be omitted/lied).
+      const declared = Number(req.headers.get('content-length') || '0');
+      if (Number.isFinite(declared) && declared > 10 * 1024 * 1024) {
+        return Response.json(
+          { ok: false, error: 'asset exceeds the 10 MB cap' },
+          { status: 413, headers: { 'Cache-Control': 'no-store' } }
+        );
+      }
+      let bytes: Uint8Array;
+      try {
+        bytes = new Uint8Array(await req.arrayBuffer());
+      } catch {
+        return new Response('could not read request body', { status: 400 });
+      }
+      const result = await api.saveAsset(bytes);
+      if (!result.ok) {
+        return Response.json(
+          { ok: false, error: result.error },
+          { status: result.status ?? 400, headers: { 'Cache-Control': 'no-store' } }
+        );
+      }
+      return Response.json(
+        { path: result.path },
+        { status: 201, headers: { 'Cache-Control': 'no-store' } }
+      );
+    },
+
     '/_api/export-history': async (req: Request) => {
       // Phase 6.5 T10 — read-only recent-exports feed for the dialog's
       // Recent tab. Writes happen as a side-effect of `/_api/export`.
@@ -791,6 +886,11 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
         headers: {
           'Content-Type': MIME[e] || 'application/octet-stream',
           'Cache-Control': 'no-store',
+          // DDR-088 follow-up — never let a browser MIME-sniff a served file
+          // (e.g. an uploaded GIF/WEBP polyglot) into a richer type. Assets are
+          // only referenced via <image href> + the canvas CSP blocks script, so
+          // this is defense-in-depth on the static lane.
+          'X-Content-Type-Options': 'nosniff',
         },
       });
     } catch (err) {
@@ -837,6 +937,7 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
     '/_api/git-user', // presence display name
     '/_api/canvas-meta', // layout/viewport sidecar (GET + PATCH)
     '/_api/annotations', // annotation SVG (GET + PUT) — drives the collab bridge
+    '/_api/asset', // Phase 23 — capped binary image upload (sniff+10MB+sha8 name+no-SVG)
     '/_api/git-committers', // @mention autocomplete
     '/_api/ai', // AI-activity banner
     '/_comments', // per-file comment list (renders pins)

package/{plugins/design/dev-server → apps/studio}/input-router.tsx

@@ -1,6 +1,6 @@
 /**
  * @file       input-router.tsx — canvas pointer/keyboard classifier + hook
- * @scope      plugins/design/dev-server/input-router.tsx
+ * @scope      apps/studio/input-router.tsx
  * @purpose    Owned by canvas-lib's DesignCanvas. Classifies the NON-WHEEL
  *             subset of pointer + key events into discrete router actions.
  *             `useViewportController` keeps owning wheel + middle-mouse +
@@ -68,6 +68,10 @@ export type Tool =
   | 'hand'
   | 'comment'
   | 'pen'
+  // Annotation polish (item 8) — FigJam-style highlighter. A `pen`-shaped tool
+  // that produces a translucent wide multiply stroke (a PenStroke with
+  // `highlighter:true`), not a new stroke type.
+  | 'highlighter'
   // Phase 24 — `shape` is the single active draw tool that produces rect /
   // ellipse / polygon strokes (the kind is chosen via the palette popover).
   // `rect` / `ellipse` stay in the union as the stroke discriminants they
@@ -82,6 +86,7 @@ export type Tool =
 
 const ANNOTATION_TOOLS = new Set<Tool>([
   'pen',
+  'highlighter',
   'shape',
   'rect',
   'ellipse',
@@ -167,6 +172,8 @@ export function classify(input: ClassifyInput): RouterAction {
     if (k === 'h') return { kind: 'tool', tool: 'hand' };
     if (k === 'c') return { kind: 'tool', tool: 'comment' };
     if (k === 'b') return { kind: 'tool', tool: 'pen' };
+    // I = hIghlighter (a free bare letter; 'H' is taken by Hand).
+    if (k === 'i') return { kind: 'tool', tool: 'highlighter' };
     // Phase 24 — R (and legacy O) both arm the single Shape tool; the specific
     // primitive is picked from the palette's shape-kind popover.
     if (k === 'r' || k === 'o') return { kind: 'tool', tool: 'shape' };

package/{plugins/design/dev-server → apps/studio}/inspect.ts

@@ -8,6 +8,9 @@ export interface SelectedElement {
   file: string;
   /** CSS-selector path (v1 anchor). Always present for backwards-compat + legacy HTML canvases. */
   selector: string;
+  /** Occurrence index among `querySelectorAll(selector)` — disambiguates a
+   * component repeated within one artboard. Absent → first match. */
+  index?: number;
   tag: string;
   classes: string;
   text: string;
@@ -140,6 +143,7 @@ export function createInspect(
     return {
       file,
       selector: String(sel.selector || ''),
+      index: typeof sel.index === 'number' ? sel.index : undefined,
       tag: String(sel.tag || ''),
       classes: String(sel.classes || ''),
       text: String(sel.text || '').slice(0, 240),
@@ -281,7 +285,7 @@ const INSPECTOR_SCRIPT = `
     var withSelector = commentsCache.filter(function(c) { return c && c.selector; });
     withSelector.forEach(function(c, i) {
       var target = null;
-      try { target = document.querySelector(c.selector); } catch (e) {}
+      try { var _all = document.querySelectorAll(c.selector); var _i = (typeof c.index === 'number' && c.index > 0 && c.index < _all.length) ? c.index : 0; target = _all[_i] || _all[0] || null; } catch (e) {}
       var pin = document.createElement('button');
       pin.className = 'dgn-pin' + (c.status === 'resolved' ? ' resolved' : '') + (c.id === focusedPinId ? ' focused' : '');
       pin.textContent = String(i + 1);
@@ -309,7 +313,7 @@ const INSPECTOR_SCRIPT = `
       var node = pinNodes[i];
       var x, y, hidden = false;
       if (!node.target || !node.target.isConnected) {
-        try { node.target = document.querySelector(node.comment.selector); } catch (e) {}
+        try { var _nc = node.comment; var _na = document.querySelectorAll(_nc.selector); var _ni = (typeof _nc.index === 'number' && _nc.index > 0 && _nc.index < _na.length) ? _nc.index : 0; node.target = _na[_ni] || _na[0] || null; } catch (e) {}
       }
       if (node.target) {
         var r = node.target.getBoundingClientRect();
@@ -352,6 +356,19 @@ const INSPECTOR_SCRIPT = `
     new MutationObserver(function(){ startTick(); }).observe(document.documentElement, { subtree: true, attributes: true, attributeFilter: ['style', 'class'], childList: true });
   }
 
+  // ⌘K / Ctrl+K command palette — keydown fired inside the canvas iframe never
+  // reaches the shell's window-scoped listener (iframe keyboard isolation), so
+  // the palette wouldn't open while focus is in the canvas. Forward the chord to
+  // the parent; the shell toggles the palette (mirrors its own handler, which
+  // fires "even in inputs"). Capture phase so canvas-lib's pan/zoom keydown
+  // handler can't swallow it first.
+  document.addEventListener('keydown', function(e) {
+    if ((e.metaKey || e.ctrlKey) && (e.key === 'k' || e.key === 'K')) {
+      e.preventDefault();
+      try { window.parent.postMessage({ dgn: 'toggle-palette' }, '*'); } catch (err) {}
+    }
+  }, true);
+
   window.addEventListener('message', function(e) {
     var m = e.data;
     if (!m || typeof m !== 'object' || !m.dgn) return;
@@ -368,7 +385,7 @@ const INSPECTOR_SCRIPT = `
       var c = commentsCache.find(function(x){ return x && x.id === m.id; });
       if (c && c.selector) {
         try {
-          var t = document.querySelector(c.selector);
+          var _ta = document.querySelectorAll(c.selector); var _ti = (typeof c.index === 'number' && c.index > 0 && c.index < _ta.length) ? c.index : 0; var t = _ta[_ti] || _ta[0] || null;
           if (t) t.scrollIntoView({ behavior: 'smooth', block: 'center' });
         } catch (e) {}
       }

package/{plugins/design/dev-server → apps/studio}/marquee-overlay.tsx

@@ -1,6 +1,6 @@
 /**
  * @file       marquee-overlay.tsx — T26 (Wave 3)
- * @scope      plugins/design/dev-server/marquee-overlay.tsx
+ * @scope      apps/studio/marquee-overlay.tsx
  * @purpose    Element-level marquee selection. Drag from empty padding inside
  *             an artboard body (NOT on top of a `[data-cd-id]` element) to
  *             lasso multiple stamped elements. Aseprite modifier vocabulary:
@@ -22,6 +22,7 @@
 
 import { useEffect, useRef } from 'react';
 
+import { scopedCdSelector, selectorIndex } from './dom-selection.ts';
 import { DRAG_THRESHOLD_PX } from './input-router.tsx';
 import { type Selection, useSelectionSet } from './use-selection-set.tsx';
 import { useToolMode } from './use-tool-mode.tsx';
@@ -103,10 +104,12 @@ function elementToSelection(el: Element, bodyAncestor: Element): Selection | nul
   const artboardEl = bodyAncestor.closest('[data-dc-screen]');
   const artboardId = artboardEl?.getAttribute('data-dc-screen') ?? null;
   const rect = (el as HTMLElement).getBoundingClientRect();
+  const marqueeSelector = scopedCdSelector(cdId, artboardId);
   return {
     id: cdId,
-    selector: `[data-cd-id="${cdId}"]`,
+    selector: marqueeSelector,
     artboardId,
+    index: selectorIndex(document, marqueeSelector, el),
     tag: el.tagName.toLowerCase(),
     classes: (el.getAttribute('class') ?? '')
       .trim()
@@ -277,6 +280,6 @@ export function applyMarqueeMode(
   selSet.replace(next);
 }
 
+export type { Mode };
 // Re-export for tests.
 export { modeOf };
-export type { Mode };

package/{plugins/design/dev-server → apps/studio}/participants-chrome.tsx

@@ -1,6 +1,6 @@
 /**
  * @file       participants-chrome.tsx — top-right avatar stack of live peers
- * @scope      plugins/design/dev-server/participants-chrome.tsx
+ * @scope      apps/studio/participants-chrome.tsx
  * @purpose    Phase 8 Task 6 — show who's currently on the canvas. Colored
  *             initials in a circle per peer, with a popover for full name +
  *             "Follow" button. Follow mode publishes `followTarget` on my

package/{plugins/design/dev-server → apps/studio}/paths.ts

@@ -8,10 +8,14 @@
 //                                  is the virtual `/$bunfs/root` (bun --compile
 //                                  embedded fs) — NOT a real disk path.
 //                                  Walk up from process.execPath until we find
-//                                  the real plugins/design/dev-server/ dir.
-//   3. Compiled binary, marketplace cache: similar to (2) but lives at
-//                                  ~/.claude/plugins/cache/maude/design/<v>/
-//                                  dev-server/. Same walk-up logic finds it.
+//                                  the real apps/studio/ dir.
+//   3. Compiled binary, marketplace cache: the marketplace clone ships only the
+//                                  plugin markdown (plugins/design/) — the
+//                                  dev-server ships via npm (package.json files),
+//                                  so the runtime is resolved from the npm
+//                                  package layout, never the marketplace cache.
+//                                  Same walk-up logic anchors on http.ts. See
+//                                  DDR-095 for the apps/studio relocation.
 //
 // Why this matters: Phase 19 v0.18.0 used `dirname(fileURLToPath(import.meta.url))`
 // universally. In the compiled binary that's `/$bunfs/root` — a virtual path —
@@ -28,7 +32,7 @@ import { fileURLToPath } from 'node:url';
 
 /**
  * Real disk path to the dev-server install dir
- * (`plugins/design/dev-server/` inside whatever package layout we're in).
+ * (`apps/studio/` inside whatever package layout we're in).
  *
  * Always a directory that contains `http.ts` + `dist/` + (optionally)
  * `node_modules/` and `client/`. Never a virtual `/$bunfs/*` path.
@@ -86,16 +90,16 @@ function resolveDevServerRoot(): string {
   }
 
   // (2 + 3) Compiled binary: walk up from process.execPath until we find a dir
-  // that *contains* `plugins/design/dev-server/<canonical files>`. Match both
-  // npm install layout (binary at @1agh/maude-<plat>/maude → walk up 4 levels
-  // to @1agh/maude/) AND marketplace cache layout (binary somewhere under
-  // ~/.claude/plugins/cache/maude/design/<v>/dev-server/dist/).
+  // that *contains* `apps/studio/<canonical files>`. Match the npm install
+  // layout (binary at @1agh/maude-<plat>/maude → walk up to @1agh/maude/, which
+  // ships apps/studio/ via package.json files). The dev-server is NOT shipped via
+  // the marketplace clone, so there is no marketplace-cache anchor (DDR-095).
   let cur = dirname(process.execPath);
   for (let i = 0; i < 10; i++) {
     // Check if cur itself is the dev-server root.
     if (isDevServerDir(cur)) return cur;
-    // Check if cur contains plugins/design/dev-server/.
-    const nested = join(cur, 'plugins', 'design', 'dev-server');
+    // Check if cur contains apps/studio/.
+    const nested = join(cur, 'apps', 'studio');
     if (isDevServerDir(nested)) return nested;
     const parent = dirname(cur);
     if (parent === cur) break;

package/{plugins/design/dev-server → apps/studio}/server.ts

@@ -28,7 +28,7 @@ import { createHttp } from './http.ts';
 import { createInspect } from './inspect.ts';
 import { startHeapWatch } from './mem.ts';
 import { createSyncRuntime } from './sync/index.ts';
-import { type WsData, createWs, isLoopbackHost, parseCollabSlug } from './ws.ts';
+import { createWs, isLoopbackHost, parseCollabSlug, type WsData } from './ws.ts';
 
 // Phase 19 / DDR-044 — covers the marketplace-cache-install gap where
 // node_modules/ ships empty (git clone honors .gitignore). Auto-installs +
@@ -101,11 +101,20 @@ const { port: BASE_PORT, explicit: PORT_EXPLICIT } = resolvePort();
 
 type BunServer = ReturnType<typeof Bun.serve<WsData, never>>;
 
+// Phase 23 security review (DDR-088 follow-up) — hard ceiling on a buffered
+// request body. Without it Bun's 128 MB default applies, so `POST /_api/asset`
+// would buffer up to 128 MB into RAM BEFORE api.saveAsset's 10 MB check runs
+// (memory amplification from the untrusted canvas origin). 16 MB covers every
+// legit body (10 MB asset + 1 MB annotation SVG + small JSON) with headroom and
+// bounds the pre-handler buffer; the authoritative per-route caps still apply.
+const MAX_REQUEST_BODY = 16 * 1024 * 1024;
+
 function startServer(port: number): BunServer {
   return Bun.serve<WsData, never>({
     port,
     hostname: '127.0.0.1',
     development: process.env.NODE_ENV !== 'production',
+    maxRequestBodySize: MAX_REQUEST_BODY,
     routes: http.routes,
     async fetch(req, srv) {
       const pathname = new URL(req.url).pathname;
@@ -167,6 +176,9 @@ function startCanvasServer(port: number): BunServer {
     port,
     hostname: '127.0.0.1',
     development: process.env.NODE_ENV !== 'production',
+    // DDR-088 follow-up — bound the pre-handler request buffer on the UNTRUSTED
+    // canvas origin (the asset upload lives here). See MAX_REQUEST_BODY.
+    maxRequestBodySize: MAX_REQUEST_BODY,
     // Hard allowlist of route-table endpoints (Bun matches `routes` before
     // `fetch`). Only the collab/display-data endpoints the canvas runtime needs
     // — see http.isCanvasSafeRoute for the trust rationale. The dynamic
@@ -176,6 +188,12 @@ function startCanvasServer(port: number): BunServer {
       '/_api/git-user': http.routes['/_api/git-user'],
       '/_api/canvas-meta': http.routes['/_api/canvas-meta'],
       '/_api/annotations': http.routes['/_api/annotations'],
+      // Phase 23 — capped binary image upload (magic-byte sniff + 10 MB +
+      // content-addressed name + traversal guard + no-SVG, in api.saveAsset).
+      // Bun matches `routes` BEFORE `fetch`, so the route must be listed here
+      // explicitly — the CANVAS_SAFE_API entry alone only opens the fetch
+      // fall-through (which serves files, not route handlers). See DDR (Task 9).
+      '/_api/asset': http.routes['/_api/asset'],
       '/_api/git-committers': http.routes['/_api/git-committers'],
       '/_api/ai': http.routes['/_api/ai'],
       '/_comments': http.routes['/_comments'],

package/{plugins/design/dev-server → apps/studio}/sync/index.ts

@@ -29,15 +29,15 @@ import type { Context } from '../context.ts';
 import { type CanvasSyncAgent, createCanvasSyncAgent } from './agent.ts';
 import {
   type ConnectionMonitor,
-  type ProviderStatus,
   createConnectionMonitor,
+  type ProviderStatus,
 } from './connection-state.ts';
-import { type EchoGuard, createEchoGuard } from './echo-guard.ts';
-import { type FsReader, createFsReader } from './fs-mirror.ts';
+import { createEchoGuard, type EchoGuard } from './echo-guard.ts';
+import { createFsReader, type FsReader } from './fs-mirror.ts';
 import { getHubToken } from './hubs-config.ts';
 import { migrateSeed } from './migrate-seed.ts';
-import { type DocProjection, createDocProjection } from './projection.ts';
-import { type SyncStatusStore, createSyncStatusStore } from './status.ts';
+import { createDocProjection, type DocProjection } from './projection.ts';
+import { createSyncStatusStore, type SyncStatusStore } from './status.ts';
 import { writeUntrustedMarkers } from './untrusted.ts';
 
 /** A minimum-surface stand-in for the HocuspocusProvider's runtime API. */
@@ -824,7 +824,7 @@ async function defaultProviderFactory(args: {
     mod = await import('@hocuspocus/provider');
   } catch (err) {
     throw new Error(
-      `@hocuspocus/provider unavailable — install it under plugins/design/dev-server/. (${err instanceof Error ? err.message : String(err)})`
+      `@hocuspocus/provider unavailable — install it under apps/studio/. (${err instanceof Error ? err.message : String(err)})`
     );
   }
   // Hocuspocus accepts ws:// or wss://; the linked URL is http(s)://, so swap

package/{plugins/design/dev-server → apps/studio}/sync/materialize.ts

@@ -21,7 +21,7 @@
 
 import type * as Y from 'yjs';
 import { Y_TYPES } from '../collab/persistence.ts';
-import { Y_SYNC_TYPES, annotationsFromDoc, commentsFromDoc } from './codec.ts';
+import { annotationsFromDoc, commentsFromDoc, Y_SYNC_TYPES } from './codec.ts';
 
 export interface CanonicalMaterialization {
   html: string;
@@ -59,4 +59,4 @@ export function materializeCanonical(doc: Y.Doc): string {
 }
 
 // Re-export so a shadow-compare caller has the type names in one import.
-export { Y_TYPES, Y_SYNC_TYPES };
+export { Y_SYNC_TYPES, Y_TYPES };

package/{plugins/design/dev-server → apps/studio}/test/ai-activity.test.ts

@@ -2,7 +2,7 @@
 
 import { describe, expect, test } from 'bun:test';
 
-import { HEARTBEAT_GRACE_MS, createAiActivity } from '../collab/ai-activity.ts';
+import { createAiActivity, HEARTBEAT_GRACE_MS } from '../collab/ai-activity.ts';
 import { type Context, createBus } from '../context.ts';
 
 function makeCtx(): { ctx: Context; events: { file: string; entry: unknown }[] } {

package/{plugins/design/dev-server → apps/studio}/test/annotations-api.test.ts

@@ -8,11 +8,10 @@
 //   - PUT rejects oversized bodies (>1 MB)
 //   - Unknown method → 405
 
+import { describe, expect, test } from 'bun:test';
 import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
 import { join } from 'node:path';
 
-import { describe, expect, test } from 'bun:test';
-
 import { bootServer, killProc, makeSandbox, nextPort } from './_helpers.ts';
 
 const SVG_OK =

package/{plugins/design/dev-server → apps/studio}/test/annotations-layer.test.ts

@@ -11,23 +11,25 @@ import { describe, expect, test } from 'bun:test';
 
 import {
   type ArrowStroke,
+  arrowHeadPoints,
   type EllipseStroke,
+  type ImageStroke,
+  type LinkStroke,
   type PenStroke,
   type PolygonStroke,
-  type RectStroke,
-  STICKY_PALETTE,
-  type StickyStroke,
-  type Stroke,
-  type TextStroke,
-  arrowHeadPoints,
   penPathD,
   polygonPoints,
   polygonVertices,
+  type RectStroke,
   rid,
+  STICKY_PALETTE,
+  type StickyStroke,
+  type Stroke,
   strokeBBox,
   strokeHitTest,
   strokesShallowEqual,
   strokesToSvg,
+  type TextStroke,
 } from '../annotations-layer.tsx';
 
 describe('annotations-layer / penPathD', () => {
@@ -696,6 +698,67 @@ describe('annotations-layer / Phase 21 sticky + standalone-text geometry', () =>
   });
 });
 
+describe('annotations-layer / Phase 23 image + link geometry', () => {
+  const image: ImageStroke = {
+    id: 'im',
+    tool: 'image',
+    x: 30,
+    y: 40,
+    w: 200,
+    h: 150,
+    href: 'assets/deadbeef.png',
+  };
+  const link: LinkStroke = {
+    id: 'lk',
+    tool: 'link',
+    x: 30,
+    y: 40,
+    w: 260,
+    h: 76,
+    url: 'https://example.com',
+    title: 'Example',
+    domain: 'example.com',
+  };
+
+  test('image bbox is its rect extent (normalizes negative extent)', () => {
+    expect(strokeBBox(image)).toEqual({ x: 30, y: 40, w: 200, h: 150 });
+    expect(strokeBBox({ ...image, x: 230, y: 190, w: -200, h: -150 })).toEqual({
+      x: 30,
+      y: 40,
+      w: 200,
+      h: 150,
+    });
+  });
+
+  test('link bbox is its card extent', () => {
+    expect(strokeBBox(link)).toEqual({ x: 30, y: 40, w: 260, h: 76 });
+  });
+
+  test('image + link are filled-card hits anywhere inside', () => {
+    expect(strokeHitTest(image, 100, 100, 4)).toBe(true); // interior
+    expect(strokeHitTest(image, 30, 40, 4)).toBe(true); // corner
+    expect(strokeHitTest(image, 999, 999, 4)).toBe(false); // far outside
+    expect(strokeHitTest(link, 100, 60, 4)).toBe(true);
+    expect(strokeHitTest(link, 999, 999, 4)).toBe(false);
+  });
+
+  test('image serializes a same-origin <image> with preserveAspectRatio', () => {
+    const svg = strokesToSvg([image]);
+    expect(svg).toContain('<image');
+    expect(svg).toContain('data-tool="image"');
+    expect(svg).toContain('preserveAspectRatio="xMidYMid meet"');
+    expect(svg).toContain('href="assets/deadbeef.png"');
+  });
+
+  test('link serializes a card <g> carrying its data-* payload', () => {
+    const svg = strokesToSvg([link]);
+    expect(svg).toContain('data-tool="link"');
+    expect(svg).toContain('data-url="https://example.com"');
+    expect(svg).toContain('data-domain="example.com"');
+    expect(svg).toContain('<rect');
+  });
+});
+
 describe('annotations-layer / Phase 24 polygon geometry', () => {
   test('polygonVertices span the full bbox for every shape', () => {
     for (const shape of ['diamond', 'triangle', 'triangle-down'] as const) {