@1agh/maude 0.58.2 → 0.59.0

package/apps/studio/test/figma-provenance.test.ts

@@ -0,0 +1,108 @@
+// Provenance for an imported canvas (DDR-216 D7 / T9).
+//
+// The plan flags this exact prop-threading as having silently no-opped once
+// before: a badge shipped prop-threaded-but-never-stored, so `.meta.json` said
+// one thing and the tree showed nothing. So this asserts the SERVER half
+// end-to-end against a live `/_index-data` — that `kind` actually survives
+// `loadCanvasMeta` → `NOTABLE_KINDS` → the wire — rather than unit-testing a
+// constant that a missing wire would leave green.
+
+import { afterAll, beforeAll, describe, expect, test } from 'bun:test';
+import { mkdirSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import type { Subprocess } from 'bun';
+
+import { bootServer, killProc, makeSandbox, nextPort } from './_helpers.ts';
+
+let proc: Subprocess;
+let base: string;
+let designRoot: string;
+
+const CANVAS = `import { DCArtboard, DesignCanvas } from '@maude/canvas-lib';
+export default function Canvas() {
+  return (
+    <DesignCanvas>
+      <DCArtboard id="node-2-23" label="Imported" width={400} height={300} kind="digital" />
+    </DesignCanvas>
+  );
+}
+`;
+
+beforeAll(async () => {
+  const sandbox = makeSandbox();
+  designRoot = sandbox.designRoot;
+  mkdirSync(join(designRoot, 'ui'), { recursive: true });
+
+  // An imported canvas: `kind` + a source block carrying IDENTIFIERS ONLY.
+  writeFileSync(join(designRoot, 'ui', 'imported.tsx'), CANVAS);
+  writeFileSync(
+    join(designRoot, 'ui', 'imported.meta.json'),
+    JSON.stringify({
+      kind: 'imported-figma',
+      source: {
+        fileKey: 'dGNzRC2kmrmGnOxaBa0RI7',
+        nodeId: '2:23',
+        importedAt: '2026-08-09T00:00:00.000Z',
+      },
+      layout: { artboards: [{ id: 'node-2-23', x: 0, y: 0 }] },
+    })
+  );
+
+  // A hand-authored canvas alongside it — the badge must NOT appear on this one.
+  writeFileSync(join(designRoot, 'ui', 'handmade.tsx'), CANVAS);
+  writeFileSync(join(designRoot, 'ui', 'handmade.meta.json'), JSON.stringify({ layout: {} }));
+
+  const port = nextPort();
+  base = `http://localhost:${port}`;
+  proc = await bootServer(sandbox.root, port);
+});
+
+afterAll(async () => {
+  await killProc(proc);
+});
+
+async function indexData(): Promise<Record<string, unknown>> {
+  const res = await fetch(`${base}/_index-data`);
+  expect(res.status).toBe(200);
+  return (await res.json()) as Record<string, unknown>;
+}
+
+describe('the imported-figma kind reaches the tree', () => {
+  test('canvasKinds carries it for the imported canvas', async () => {
+    const data = await indexData();
+    const kinds = data.canvasKinds as Record<string, string>;
+    const entry = Object.entries(kinds).find(([p]) => p.endsWith('imported.tsx'));
+    expect(entry).toBeDefined();
+    expect(entry?.[1]).toBe('imported-figma');
+  });
+
+  test('a hand-authored canvas gets NO kind — the badge means something', async () => {
+    const data = await indexData();
+    const kinds = data.canvasKinds as Record<string, string>;
+    expect(Object.keys(kinds).some((p) => p.endsWith('handmade.tsx'))).toBe(false);
+  });
+});
+
+describe('provenance carries identifiers only (D7)', () => {
+  test('no Figma NAME or node text is anywhere on the wire', async () => {
+    // `.meta.json` and `config.json` are versioned, peer-synced (DDR-054) AND
+    // read into multiple agents' context. DDR-172 Decision 8 traced exactly
+    // this class and ELIMINATED the free-text sink rather than bounding it;
+    // D7 applies the same elimination here.
+    const raw = JSON.stringify(await indexData());
+    expect(raw).not.toContain('Karta');
+    expect(raw).not.toContain('žluť');
+    expect(raw).not.toContain('<script');
+  });
+
+  test('the recorded source fields are charset-constrained shapes', async () => {
+    const meta = JSON.parse(
+      await Bun.file(join(designRoot, 'ui', 'imported.meta.json')).text()
+    ) as { source: { fileKey: string; nodeId: string; importedAt: string } };
+    expect(meta.source.fileKey).toMatch(/^[A-Za-z0-9]{10,64}$/);
+    expect(meta.source.nodeId).toMatch(/^[0-9]+:[0-9]+$/);
+    expect(Number.isNaN(Date.parse(meta.source.importedAt))).toBe(false);
+    // Exactly three fields — no room for a name, a title or a description.
+    expect(Object.keys(meta.source).sort()).toEqual(['fileKey', 'importedAt', 'nodeId']);
+  });
+});

package/apps/studio/test/figma-routes.test.ts

@@ -0,0 +1,294 @@
+// `/_api/figma/*` — the MAIN-origin half of DDR-216 D3.
+//
+// canvas-origin-gate.test.ts already asserts these routes are unreachable from
+// the segregated canvas origin. That proves the wrong property on its own: the
+// MAIN origin is reachable from any website the user visits while the dev
+// server is up. Round 1 of the DDR-216 security review found the first draft
+// named no CSRF / DNS-rebind guard at all, with a working PoC — a CORS-simple
+// POST that plants an attacker's PAT (`connect`) or spends the user's on an
+// attacker-chosen key (`probe`), opaque response, real side effect.
+//
+// So this file asserts the complementary half:
+//   • cross-site  → 403 (Sec-Fetch-Site, the `sameOriginWrite` guard)
+//   • foreign Host header → 403 (the DNS-rebinding `isTrustedRequestHost` guard)
+//   • the stored key is NEVER echoed on ANY response path
+//   • `probe` is gated as a WRITE even though it stores nothing — it spends the
+//     credential and reaches the network.
+
+import { afterAll, beforeAll, describe, expect, test } from 'bun:test';
+import { mkdtempSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import type { Subprocess } from 'bun';
+
+import { bootServer, killProc, makeSandbox, nextPort } from './_helpers.ts';
+
+const TOKEN = 'figd_ROUTECANARY_0123456789abcdef';
+
+let proc: Subprocess;
+let port: number;
+let base: string;
+let keysPath: string;
+let keysDir: string;
+
+beforeAll(async () => {
+  const { root } = makeSandbox();
+  keysDir = mkdtempSync(join(tmpdir(), 'maude-figma-routes-keys-'));
+  keysPath = join(keysDir, 'keys.json');
+  writeFileSync(keysPath, JSON.stringify({ keys: {} }), { mode: 0o600 });
+  port = nextPort();
+  base = `http://localhost:${port}`;
+  proc = await bootServer(root, port, { MAUDE_GEN_KEYS_PATH: keysPath });
+});
+
+afterAll(async () => {
+  await killProc(proc);
+  rmSync(keysDir, { recursive: true, force: true });
+});
+
+function storedToken(): string | undefined {
+  try {
+    return JSON.parse(readFileSync(keysPath, 'utf8')).keys?.figma;
+  } catch {
+    return undefined;
+  }
+}
+
+// The WRITE guard in this codebase is `sameOriginWrite`, which keys on `Origin`
+// — the header a browser stamps unspoofably on every cross-origin POST/DELETE.
+// (`Sec-Fetch-Site` is what `sameOriginRead` uses, for the GET case below where
+// browsers do NOT reliably send Origin.) These tests therefore send a real
+// cross-origin `Origin`, which is what an attacker page actually produces.
+describe('cross-origin writes are refused (the CSRF guard)', () => {
+  const EVIL = 'https://evil.example';
+  const PLANTED = 'figd_ATTACKER_PLANTED_0123456789';
+
+  test('POST /_api/figma/connect cross-origin is 403 and stores nothing', async () => {
+    const res = await fetch(`${base}/_api/figma/connect`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', Origin: EVIL },
+      body: JSON.stringify({ token: PLANTED }),
+    });
+    expect(res.status).toBe(403);
+    expect(storedToken()).toBeUndefined();
+  });
+
+  test('POST /_api/figma/probe cross-origin is 403 — probe spends the credential', async () => {
+    const res = await fetch(`${base}/_api/figma/probe`, {
+      method: 'POST',
+      headers: { Origin: EVIL },
+    });
+    expect(res.status).toBe(403);
+  });
+
+  test('DELETE /_api/figma/connect cross-origin is 403', async () => {
+    const res = await fetch(`${base}/_api/figma/connect`, {
+      method: 'DELETE',
+      headers: { Origin: EVIL },
+    });
+    expect(res.status).toBe(403);
+  });
+
+  test('a CORS-simple POST (no preflight, text/plain) is still refused', async () => {
+    // The PoC shape from the DDR-216 review: a simple content type means no
+    // preflight and the page cannot read the response — but the side effect
+    // would land if the server allowed it. Origin is still stamped.
+    const res = await fetch(`${base}/_api/figma/connect`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'text/plain', Origin: EVIL },
+      body: JSON.stringify({ token: PLANTED }),
+    });
+    expect(res.status).toBe(403);
+    expect(storedToken()).toBeUndefined();
+  });
+});
+
+describe('cross-site reads are refused (Sec-Fetch-Site, the GET case)', () => {
+  test('GET /_api/figma/status with Sec-Fetch-Site: cross-site is 403', async () => {
+    // A no-cors GET from an attacker page passes the loopback guard and may omit
+    // Origin entirely, so `sameOriginWrite` cannot see it. Without the read
+    // guard this leaks whether the user has Figma connected.
+    const res = await fetch(`${base}/_api/figma/status`, {
+      headers: { 'Sec-Fetch-Site': 'cross-site' },
+    });
+    expect(res.status).toBe(403);
+  });
+});
+
+describe('a foreign Host header is refused (the DNS-rebinding guard)', () => {
+  for (const [label, host] of [
+    ['an attacker-controlled name', 'evil.example'],
+    ['a rebinding service name', 'figma.127.0.0.1.nip.io'],
+  ]) {
+    test(`GET /_api/figma/status with Host: ${label} is 403`, async () => {
+      const res = await fetch(`${base}/_api/figma/status`, { headers: { Host: host } });
+      expect(res.status).toBe(403);
+    });
+  }
+});
+
+describe('method gating', () => {
+  test('GET /_api/figma/connect is 405', async () => {
+    expect((await fetch(`${base}/_api/figma/connect`)).status).toBe(405);
+  });
+
+  test('GET /_api/figma/probe is 405 — probe is a write', async () => {
+    expect((await fetch(`${base}/_api/figma/probe`)).status).toBe(405);
+  });
+
+  test('POST /_api/figma/status is 405', async () => {
+    expect((await fetch(`${base}/_api/figma/status`, { method: 'POST' })).status).toBe(405);
+  });
+});
+
+describe('same-origin happy path — and the key never comes back out', () => {
+  test('status reports presence only, plus the granular scope to ask for', async () => {
+    const res = await fetch(`${base}/_api/figma/status`, {
+      headers: { 'Sec-Fetch-Site': 'same-origin' },
+    });
+    expect(res.status).toBe(200);
+    const body = (await res.json()) as Record<string, unknown>;
+    expect(body.configured).toBe(false);
+    // The blanket `files:read` scope is deprecated — the UI must never name it.
+    expect(body.requiredScope).toBe('file_content:read');
+    expect(JSON.stringify(body)).not.toContain('figd_');
+  });
+
+  test('connect stores the key and returns presence only — never the value', async () => {
+    const res = await fetch(`${base}/_api/figma/connect`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', 'Sec-Fetch-Site': 'same-origin' },
+      body: JSON.stringify({ token: TOKEN }),
+    });
+    expect(res.status).toBe(200);
+    const raw = await res.text();
+    expect(JSON.parse(raw)).toEqual({ configured: true });
+    expect(raw).not.toContain(TOKEN);
+    expect(raw).not.toContain('ROUTECANARY');
+    // It really did store it — the assertion above is about the RESPONSE, not
+    // about the write silently failing.
+    expect(storedToken()).toBe(TOKEN);
+  });
+
+  test('status still never echoes the value once one is configured', async () => {
+    const res = await fetch(`${base}/_api/figma/status`, {
+      headers: { 'Sec-Fetch-Site': 'same-origin' },
+    });
+    const raw = await res.text();
+    expect(JSON.parse(raw).configured).toBe(true);
+    expect(raw).not.toContain('ROUTECANARY');
+  });
+
+  test('a malformed token is refused with a message that does not echo it', async () => {
+    const junk = 'not a token REFLECTION_CANARY';
+    const res = await fetch(`${base}/_api/figma/connect`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', 'Sec-Fetch-Site': 'same-origin' },
+      body: JSON.stringify({ token: junk }),
+    });
+    expect(res.status).toBe(400);
+    const raw = await res.text();
+    expect(raw).not.toContain('REFLECTION_CANARY');
+    // The previously-stored good token is untouched by a failed write.
+    expect(storedToken()).toBe(TOKEN);
+  });
+
+  test('probe surfaces a typed failure without leaking the token', async () => {
+    // No network stub here — the real api.figma.com will reject this canary
+    // token (or the call fails to connect in CI). Either way the response must
+    // be a typed reason with a code-owned message and no credential in it.
+    const res = await fetch(`${base}/_api/figma/probe`, {
+      method: 'POST',
+      headers: { 'Sec-Fetch-Site': 'same-origin' },
+    });
+    const raw = await res.text();
+    expect(raw).not.toContain('ROUTECANARY');
+    expect(raw).not.toContain('figd_');
+    const body = JSON.parse(raw) as { ok: boolean; reason?: string };
+    if (!body.ok) {
+      expect(['unauthorized', 'forbidden', 'network', 'bad_response', 'rate_limited']).toContain(
+        body.reason
+      );
+    }
+  });
+
+  test('disconnect clears the key', async () => {
+    const res = await fetch(`${base}/_api/figma/connect`, {
+      method: 'DELETE',
+      headers: { 'Sec-Fetch-Site': 'same-origin' },
+    });
+    expect(res.status).toBe(200);
+    expect(await res.json()).toEqual({ configured: false });
+    expect(storedToken()).toBeUndefined();
+  });
+});
+
+describe('/_api/figma/import — same gate, and a validated body', () => {
+  test('cross-origin is 403 — it spends the PAT and writes to disk', async () => {
+    const res = await fetch(`${base}/_api/figma/import`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', Origin: 'https://evil.example' },
+      body: JSON.stringify({ mode: 'board', url: 'https://www.figma.com/board/AAAAAAAAAA/x' }),
+    });
+    expect(res.status).toBe(403);
+  });
+
+  test('a foreign Host is 403', async () => {
+    const res = await fetch(`${base}/_api/figma/import`, {
+      method: 'POST',
+      headers: { Host: 'evil.example' },
+      body: '{}',
+    });
+    expect(res.status).toBe(403);
+  });
+
+  test('GET is 405', async () => {
+    expect((await fetch(`${base}/_api/figma/import`)).status).toBe(405);
+  });
+
+  test.each([
+    ['no body', {}],
+    ['unknown mode', { mode: 'everything', url: 'https://www.figma.com/board/AAAAAAAAAA/x' }],
+    ['missing url', { mode: 'board' }],
+    ['empty url', { mode: 'board', url: '' }],
+  ])('a malformed request is 400 (%s)', async (_label, body) => {
+    const res = await fetch(`${base}/_api/figma/import`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', 'Sec-Fetch-Site': 'same-origin' },
+      body: JSON.stringify(body),
+    });
+    expect(res.status).toBe(400);
+  });
+
+  test('a caller cannot choose an output path', async () => {
+    // The body shape is fixed: {mode, url, dryRun}. A slug/path/into field is
+    // simply not read — the same "the producer never picks its own target"
+    // discipline DDR-174 applies to its authoring agent.
+    const res = await fetch(`${base}/_api/figma/import`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', 'Sec-Fetch-Site': 'same-origin' },
+      body: JSON.stringify({
+        mode: 'board',
+        url: 'https://www.figma.com/board/AAAAAAAAAA/x',
+        slug: '../../etc/passwd',
+        into: '/etc/passwd',
+      }),
+    });
+    // It gets past validation (the url is well-formed) and fails on the
+    // credential instead — the point is that the path fields were ignored.
+    const raw = await res.text();
+    expect(raw).not.toContain('etc/passwd');
+    expect([400, 502]).toContain(res.status);
+  });
+
+  test('a failure never echoes an upstream string', async () => {
+    const res = await fetch(`${base}/_api/figma/import`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', 'Sec-Fetch-Site': 'same-origin' },
+      body: JSON.stringify({ mode: 'board', url: 'https://www.figma.com/board/AAAAAAAAAA/x' }),
+    });
+    const raw = await res.text();
+    expect(raw).not.toContain('figd_');
+    expect(raw).not.toContain('ROUTECANARY');
+  });
+});

package/apps/studio/test/fixtures/perf-canvas.mjs

@@ -0,0 +1,201 @@
+// perf-canvas.mjs — deterministic large-canvas fixture generator.
+//
+// Produces the synthetic worst-case the render-performance work is measured
+// against: N artboards on one world plane plus M annotation stickies, with NO
+// filters, blends or feTurbulence. That absence is the point — the earlier
+// moodboard RCA (.ai/archive/logs/rca/issue-canvas-pan-zoom-jank-large-
+// moodboard.md) covered the expensive-paint regime; the failures this fixture
+// reproduces (a 128-artboard onboarding flow, a sticky-dense FigJam board) are
+// the opposite shape: cheap paint, huge node count. Mixing filters back in
+// would re-measure the case that is already fixed.
+//
+// Written as .mjs rather than the .ts the plan named, because the probe
+// (`_perf-probe.mjs`) runs under plain node and imports this module directly;
+// bun tests import .mjs identically, so nothing is lost.
+//
+// Deterministic by construction — no Date.now(), no Math.random(). Two runs
+// produce byte-identical files, so a re-measured baseline compares like with
+// like.
+
+import { mkdirSync, writeFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+
+/** Grid geometry — mirrors DesignCanvas's own default grid vocabulary. */
+const BOARD_W = 1280;
+const BOARD_H = 800;
+const GUTTER = 80;
+const COLS = 8;
+
+/** Sticky geometry, matching the imported-FigJam shape (240px square, r=8). */
+const STICKY = 240;
+const STICKY_GAP = 40;
+const STICKY_COLS = 12;
+
+// Fixed word pool — index-addressed, never shuffled, so labels stay stable
+// across regenerations.
+const WORDS = [
+  'Onboarding',
+  'Signup',
+  'Paywall',
+  'Empty state',
+  'Error',
+  'Success',
+  'Profile',
+  'Settings',
+  'Search',
+  'Detail',
+  'Checkout',
+  'Review',
+];
+
+const STICKY_TEXT = [
+  'Ship the import path',
+  'Cut the cold start',
+  'Fewer modal steps',
+  'Copy is too long',
+  'Needs an empty state',
+  'Great onboarding',
+  'Slow on mobile',
+  'Loved the polish',
+];
+
+/** Deterministic pseudo-shuffle: a fixed odd stride over the pool. */
+function pick(pool, i) {
+  return pool[(i * 7) % pool.length];
+}
+
+/**
+ * Body markup for one artboard. Deliberately ~35 DOM nodes — a realistic mock,
+ * not an empty box. An empty artboard would understate reconciliation cost and
+ * flatter every measurement taken against this fixture.
+ */
+function artboardBody(i) {
+  const rows = Array.from(
+    { length: 6 },
+    (_, r) => `
+          <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
+            <div style={{ width: 32, height: 32, borderRadius: 6, background: 'var(--bg-2, #e8e3d8)' }} />
+            <div style={{ flex: 1 }}>
+              <div style={{ height: 10, width: '${40 + ((i + r) % 5) * 10}%', borderRadius: 3, background: 'var(--bg-3, #ddd6c8)' }} />
+              <div style={{ height: 8, width: '${25 + ((i + r) % 4) * 8}%', marginTop: 6, borderRadius: 3, background: 'var(--bg-2, #e8e3d8)' }} />
+            </div>
+            <div style={{ width: 56, height: 24, borderRadius: 4, background: 'var(--accent, #6b5bd6)', opacity: 0.18 }} />
+          </div>`
+  ).join('');
+
+  return `
+        <div style={{ padding: 32, display: 'flex', flexDirection: 'column', gap: 16 }}>
+          <h2 style={{ margin: 0, font: '600 24px/1.2 var(--font-sans, system-ui)' }}>${pick(WORDS, i)} ${i}</h2>
+          <p style={{ margin: 0, font: '400 14px/1.5 var(--font-sans, system-ui)', opacity: 0.7 }}>
+            Synthetic perf fixture board ${i} — no filters, no blends, cheap paint.
+          </p>${rows}
+        </div>`;
+}
+
+/** Build the canvas .tsx source for `boards` artboards. */
+export function renderCanvasSource(boards) {
+  const items = Array.from({ length: boards }, (_, i) => {
+    const col = i % COLS;
+    const row = Math.floor(i / COLS);
+    const x = col * (BOARD_W + GUTTER);
+    const y = row * (BOARD_H + GUTTER);
+    return `      <DCArtboard
+        id="b${i}"
+        label="${pick(WORDS, i)} ${i}"
+        width={${BOARD_W}}
+        height={${BOARD_H}}
+        x={${x}}
+        y={${y}}
+        fixed
+      >${artboardBody(i)}
+      </DCArtboard>`;
+  }).join('\n');
+
+  return `// GENERATED by apps/studio/test/fixtures/perf-canvas.mjs — do not hand-edit.
+// Synthetic render-performance fixture: ${boards} artboards, no filters/blends.
+import { DCArtboard, DesignCanvas } from '@maude/canvas-lib';
+
+export default function Canvas() {
+  return (
+    <DesignCanvas>
+${items}
+    </DesignCanvas>
+  );
+}
+`;
+}
+
+/** Build the `.meta.json` sidecar carrying the artboard grid positions. */
+export function renderMeta(boards) {
+  const artboards = Array.from({ length: boards }, (_, i) => ({
+    id: `b${i}`,
+    x: (i % COLS) * (BOARD_W + GUTTER),
+    y: Math.floor(i / COLS) * (BOARD_H + GUTTER),
+  }));
+  return {
+    title: `Perf fixture (${boards} boards)`,
+    subtitle: 'Generated render-performance fixture — safe to delete.',
+    tags: ['perf-fixture'],
+    status: 'draft',
+    layout: { artboards },
+  };
+}
+
+/**
+ * Build the annotations SVG carrying `strokes` stickies. Shape copied from a
+ * real imported-FigJam board so the layer exercises the same code path
+ * (`data-mdcc-annotations`, `data-tool="sticky"`, rect + body text per group).
+ */
+export function renderAnnotations(strokes) {
+  if (strokes <= 0) return null;
+  const nodes = Array.from({ length: strokes }, (_, i) => {
+    const col = i % STICKY_COLS;
+    const row = Math.floor(i / STICKY_COLS);
+    const x = col * (STICKY + STICKY_GAP);
+    // Park the sticky field below the artboard grid so the two layers are
+    // measurable together without overlapping hit-test surfaces.
+    const y = 100000 + row * (STICKY + STICKY_GAP);
+    return (
+      `<g data-id="perf_${i}" data-tool="sticky" data-r="8" data-fs="14" fill="#cfc4ec">` +
+      `<rect x="${x}" y="${y}" width="${STICKY}" height="${STICKY}" rx="8" ry="8"/>` +
+      `<text data-sticky-body="1" x="${x + 12}" y="${y + 12}" font-size="14" fill="#1a1a1a" dominant-baseline="hanging">` +
+      `${pick(STICKY_TEXT, i)} ${i}</text></g>`
+    );
+  }).join('');
+  return `<svg xmlns="http://www.w3.org/2000/svg" data-mdcc-annotations="1">${nodes}</svg>`;
+}
+
+/**
+ * Write the fixture into a design root.
+ *
+ * @param {object} opts
+ * @param {string} opts.designRoot  Absolute path to a `.design/` directory.
+ * @param {number} [opts.boards]    Artboard count (default 128 — the SPKIE repro).
+ * @param {number} [opts.strokes]   Sticky count (default 150 — the Team Retro repro).
+ * @param {string} [opts.slug]      Canvas basename (default `perf-fixture`).
+ * @returns {{canvasPath: string, metaPath: string, annotationsPath: string|null, canvasRel: string}}
+ */
+export function writePerfCanvas({
+  designRoot,
+  boards = 128,
+  strokes = 150,
+  slug = 'perf-fixture',
+}) {
+  const canvasPath = join(designRoot, 'ui', `${slug}.tsx`);
+  const metaPath = join(designRoot, 'ui', `${slug}.meta.json`);
+  mkdirSync(dirname(canvasPath), { recursive: true });
+
+  writeFileSync(canvasPath, renderCanvasSource(boards), 'utf8');
+  writeFileSync(metaPath, `${JSON.stringify(renderMeta(boards), null, 2)}\n`, 'utf8');
+
+  // Annotations live at the design root under the flattened `<dir>-<slug>`
+  // naming the annotations API uses, NOT beside the canvas.
+  let annotationsPath = null;
+  const svg = renderAnnotations(strokes);
+  if (svg) {
+    annotationsPath = join(designRoot, `ui-${slug.replace(/-/g, '_')}.annotations.svg`);
+    writeFileSync(annotationsPath, svg, 'utf8');
+  }
+
+  return { canvasPath, metaPath, annotationsPath, canvasRel: `ui/${slug}.tsx` };
+}

package/apps/studio/test/git-cloud-posture.test.ts

@@ -0,0 +1,50 @@
+// DDR-218 (fix 8, sync RCA 2026-08-10) — the cloud-managed GitPanel posture.
+//
+// Source-level assertions, the cloud-shell-surfaces pattern: what these pin is
+// exactly what would regress — someone gating the withdrawal on `historyOnly`
+// alone (dropping the desktop half), breaking the live connect/disconnect
+// reaction, or wiring `cloudManaged` from something other than the
+// CORROBORATED link (`credentialed` — config.json alone is attacker-authorable,
+// B2).
+
+import { describe, expect, test } from 'bun:test';
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+const STUDIO = join(import.meta.dir, '..');
+const APP = readFileSync(join(STUDIO, 'client', 'app.jsx'), 'utf8');
+const GIT_PANEL = readFileSync(join(STUDIO, 'client', 'panels', 'GitPanel.jsx'), 'utf8');
+const CLOUD_BAR = readFileSync(join(STUDIO, 'client', 'panels', 'CloudBar.jsx'), 'utf8');
+
+describe('a cloud-linked repo shows ONE save mechanism (DDR-218)', () => {
+  test('cloudManaged withdraws exactly like the cell-side historyOnly', () => {
+    expect(GIT_PANEL).toContain('const withdrawn = historyOnly || cloudManaged;');
+    // Every render gate the working-tree half hides behind must read the
+    // merged flag — a `!historyOnly` guard reintroduces the desktop leak.
+    expect(GIT_PANEL).toMatch(/\{!withdrawn && \(\s*<div className="gp-tabs"/);
+    expect(GIT_PANEL).toContain("{tab === 'changes' && !withdrawn ? (");
+  });
+
+  test('the posture reacts LIVE to connect/disconnect, not only at mount', () => {
+    // The initial useState alone would leave a freshly-linked panel on Changes.
+    expect(GIT_PANEL).toMatch(/useEffect\(\(\) => \{\s*if \(withdrawn\) setTab\('history'\);/);
+  });
+
+  test('the note names the active mechanism, and only in the desktop posture', () => {
+    expect(GIT_PANEL).toContain('data-testid="git-cloud-managed"');
+    expect(GIT_PANEL).toMatch(/\{cloudManaged && \(\s*<div className="gp-cloud-note"/);
+    expect(GIT_PANEL).toContain('Cloud is saving');
+  });
+
+  test('the app gate is the CORROBORATED link, and the cell posture is untouched', () => {
+    expect(APP).toContain('cloudManaged={!cfg.cloud && !!cloudLinkedHub?.credentialed}');
+    expect(APP).toContain('historyOnly={!!cfg.cloud}');
+  });
+
+  test('CloudBar lifts every link change the posture depends on', () => {
+    // status resolve + attach + detach — the three places the link changes.
+    const lifts = CLOUD_BAR.match(/onLinkedHub\?\.\(/g) ?? [];
+    expect(lifts.length).toBeGreaterThanOrEqual(3);
+    expect(APP).toContain('onLinkedHub={setCloudLinkedHub}');
+  });
+});

package/apps/studio/test/hub-link.test.ts

@@ -67,3 +67,14 @@ test('a second credential for the same hub replaces the token (per-machine key)'
   // Trust is not duplicated.
   expect(cfg.trusted.filter((u: string) => u === 'https://hub.example.dev')).toHaveLength(1);
 });
+
+test('role + expiresAt round-trip through the store (the renewal deadline survives)', () => {
+  saveHubCredential('https://hub.example.dev', 'mau_secret', 'member', 1786400000000);
+  const cfg = JSON.parse(readFileSync(process.env.HUBS_CONFIG_PATH as string, 'utf8'));
+  expect(cfg.hubs['https://hub.example.dev'].role).toBe('member');
+  expect(cfg.hubs['https://hub.example.dev'].expiresAt).toBe(1786400000000);
+  // Absent stays absent — a self-hosted hub's credential carries no deadline.
+  saveHubCredential('https://hub.example.dev', 'mau_secret2');
+  const cfg2 = JSON.parse(readFileSync(process.env.HUBS_CONFIG_PATH as string, 'utf8'));
+  expect(cfg2.hubs['https://hub.example.dev'].expiresAt).toBeUndefined();
+});