agent-canvas 0.2.1 → 0.7.0

package/bin/lib/commands/watch.ts

@@ -1,30 +1,30 @@
-import { parseArgs } from "util";
-import { ensureDaemon } from "../daemon-lifecycle.ts";
-import { getSessionId, consumeFeedback, waitForFeedback } from "../helpers.ts";
+import { parseArgs } from 'util'
+import { ensureDaemon } from '../daemon-lifecycle.ts'
+import { consumeFeedback, getSessionId, waitForFeedback } from '../helpers.ts'
 
 export async function handleWatch(args: string[]) {
-  const { values } = parseArgs({
-    args,
-    options: {
-      session: { type: "string" },
-    },
-  });
+	const { values } = parseArgs({
+		args,
+		options: {
+			session: { type: 'string' },
+		},
+	})
 
-  const sessionId = getSessionId(values.session);
-  await ensureDaemon();
+	const sessionId = getSessionId(values.session)
+	await ensureDaemon()
 
-  const feedback = await consumeFeedback(sessionId);
-  if (feedback) {
-    process.stdout.write(feedback);
-    process.exit(0);
-  }
+	const feedback = await consumeFeedback(sessionId)
+	if (feedback) {
+		process.stdout.write(feedback)
+		process.exit(0)
+	}
 
-  try {
-    const submittedFeedback = await waitForFeedback(sessionId);
-    process.stdout.write(submittedFeedback);
-  } catch (error) {
-    const message = error instanceof Error ? error.message : String(error);
-    console.error(`Error: ${message}`);
-    process.exit(1);
-  }
+	try {
+		const submittedFeedback = await waitForFeedback(sessionId)
+		process.stdout.write(submittedFeedback)
+	} catch (error) {
+		const message = error instanceof Error ? error.message : String(error)
+		console.error(`Error: ${message}`)
+		process.exit(1)
+	}
 }

package/bin/lib/config.ts

@@ -1,13 +1,13 @@
-import { resolve, join, dirname } from "path";
-import { readFileSync } from "fs";
-import { tmpdir } from "os";
+import { readFileSync } from 'fs'
+import { tmpdir } from 'os'
+import { dirname, join, resolve } from 'path'
 
-export const PACKAGE_ROOT = resolve(join(dirname(import.meta.path), "../.."));
-export const VERSION = JSON.parse(readFileSync(join(PACKAGE_ROOT, "package.json"), "utf-8")).version as string;
-export const TEMP_DIR = join(tmpdir(), "agent-canvas");
-export const DAEMON_PORT = parseInt(process.env.CANVAS_PORT || "19400", 10);
-export const BASE_URL = `http://localhost:${DAEMON_PORT}`;
-export const WS_URL = `ws://localhost:${DAEMON_PORT}`;
-export const TIMEOUT_MS = parseInt(process.env.CANVAS_TIMEOUT || String(60 * 60 * 1000), 10);
-export const PID_FILE = join(TEMP_DIR, "daemon.pid");
-export const CLI_AUTH_FILE = join(TEMP_DIR, "daemon-auth-token");
+export const PACKAGE_ROOT = resolve(join(dirname(import.meta.path), '../..'))
+export const VERSION = JSON.parse(readFileSync(join(PACKAGE_ROOT, 'package.json'), 'utf-8')).version as string
+export const TEMP_DIR = join(tmpdir(), 'agent-canvas')
+export const DAEMON_PORT = parseInt(process.env.CANVAS_PORT || '19400', 10)
+export const BASE_URL = `http://localhost:${DAEMON_PORT}`
+export const WS_URL = `ws://localhost:${DAEMON_PORT}`
+export const TIMEOUT_MS = parseInt(process.env.CANVAS_TIMEOUT || String(60 * 60 * 1000), 10)
+export const PID_FILE = join(TEMP_DIR, 'daemon.pid')
+export const CLI_AUTH_FILE = join(TEMP_DIR, 'daemon-auth-token')

package/bin/lib/daemon-lifecycle.ts

@@ -1,19 +1,15 @@
-import { readFileSync } from "fs";
-import { join } from "path";
-import {
-  createDaemonLifecycle,
-  DaemonStartError,
-  type DaemonEvent,
-} from "@fabrika/daemon-kit";
-import { PACKAGE_ROOT, TEMP_DIR, BASE_URL, PID_FILE, CLI_AUTH_FILE, VERSION } from "./config.ts";
+import { createDaemonLifecycle, type DaemonEvent, DaemonStartError } from '@fabrika/daemon-kit'
+import { readFileSync } from 'fs'
+import { join } from 'path'
+import { BASE_URL, CLI_AUTH_FILE, PACKAGE_ROOT, PID_FILE, TEMP_DIR, VERSION } from './config.ts'
 
 interface CanvasHealth {
-  pid: number;
-  version: string;
+	pid: number
+	version: string
 }
 
 function isRecord(value: unknown): value is Record<string, unknown> {
-  return typeof value === "object" && value !== null && !Array.isArray(value);
+	return typeof value === 'object' && value !== null && !Array.isArray(value)
 }
 
 /**
@@ -21,67 +17,67 @@ function isRecord(value: unknown): value is Record<string, unknown> {
  * behind. Drop this fallback once no such daemon can still be running.
  */
 function legacyPidFromFile(): number | undefined {
-  try {
-    const pid = Number(readFileSync(PID_FILE, "utf-8").trim());
-    return Number.isInteger(pid) && pid > 0 ? pid : undefined;
-  } catch {
-    return undefined;
-  }
+	try {
+		const pid = Number(readFileSync(PID_FILE, 'utf-8').trim())
+		return Number.isInteger(pid) && pid > 0 ? pid : undefined
+	} catch {
+		return undefined
+	}
 }
 
 function parseHealth(body: unknown): CanvasHealth | undefined {
-  if (!isRecord(body) || body.ok !== true || typeof body.version !== "string") return undefined;
-  const pid = typeof body.pid === "number" ? body.pid : legacyPidFromFile();
-  if (pid === undefined) return undefined;
-  return { pid, version: body.version };
+	if (!isRecord(body) || body.ok !== true || typeof body.version !== 'string') return undefined
+	const pid = typeof body.pid === 'number' ? body.pid : legacyPidFromFile()
+	if (pid === undefined) return undefined
+	return { pid, version: body.version }
 }
 
 function report(event: DaemonEvent) {
-  if (event.type === "version-mismatch") {
-    console.error(`Daemon version mismatch (daemon: ${event.running}, CLI: ${VERSION}), restarting...`);
-  }
-  if (event.type === "starting") console.error("Starting canvas daemon...");
-  if (event.type === "started") console.error("Daemon started.");
+	if (event.type === 'version-mismatch') {
+		console.error(`Daemon version mismatch (daemon: ${event.running}, CLI: ${VERSION}), restarting...`)
+	}
+	if (event.type === 'starting') console.error('Starting canvas daemon...')
+	if (event.type === 'started') console.error('Daemon started.')
 }
 
 const lifecycle = createDaemonLifecycle<CanvasHealth>({
-  baseUrl: BASE_URL,
-  parseHealth,
-  pidFile: PID_FILE,
-  // The running Bun, not a PATH lookup — `Bun.spawn` throws on a missing executable.
-  command: [process.execPath, "run", join(PACKAGE_ROOT, "daemon", "src", "server.ts")],
-  cwd: join(PACKAGE_ROOT, "daemon"),
-  logFile: join(TEMP_DIR, "daemon-startup.log"),
-  versionCheck: { expected: VERSION, of: (health) => health.version },
-  cleanupFiles: [CLI_AUTH_FILE],
-  onEvent: report,
-});
+	baseUrl: BASE_URL,
+	parseHealth,
+	pidFile: PID_FILE,
+	// The running Bun, not a PATH lookup — `Bun.spawn` throws on a missing executable.
+	command: [process.execPath, 'run', join(PACKAGE_ROOT, 'daemon', 'src', 'server.ts')],
+	cwd: join(PACKAGE_ROOT, 'daemon'),
+	logFile: join(TEMP_DIR, 'daemon-startup.log'),
+	versionCheck: { expected: VERSION, of: (health) => health.version },
+	cleanupFiles: [CLI_AUTH_FILE],
+	onEvent: report,
+})
 
 export async function isDaemonRunning(): Promise<boolean> {
-  return lifecycle.isRunning();
+	return lifecycle.isRunning()
 }
 
 function reportStartFailure(error: unknown): never {
-  if (error instanceof DaemonStartError && error.logTail) {
-    console.error("Daemon stderr:\n" + error.logTail);
-  }
-  console.error(`Error: ${error instanceof Error ? error.message : String(error)}`);
-  process.exit(1);
+	if (error instanceof DaemonStartError && error.logTail) {
+		console.error('Daemon stderr:\n' + error.logTail)
+	}
+	console.error(`Error: ${error instanceof Error ? error.message : String(error)}`)
+	process.exit(1)
 }
 
 export async function startDaemon(): Promise<void> {
-  await lifecycle.start().catch(reportStartFailure);
+	await lifecycle.start().catch(reportStartFailure)
 }
 
 export async function ensureDaemon(): Promise<void> {
-  await lifecycle.ensure().catch(reportStartFailure);
+	await lifecycle.ensure().catch(reportStartFailure)
 }
 
 export async function stopDaemon(): Promise<boolean> {
-  const result = await lifecycle.stop();
-  if (result.reason === "stopped") console.log("Daemon stopped.");
-  else if (result.reason === "stale-pid") console.log("Daemon was not running (stale PID file).");
-  else if (result.reason === "not-running") console.log("No daemon PID file found.");
-  else console.log(result.message);
-  return result.stopped;
+	const result = await lifecycle.stop()
+	if (result.reason === 'stopped') console.log('Daemon stopped.')
+	else if (result.reason === 'stale-pid') console.log('Daemon was not running (stale PID file).')
+	else if (result.reason === 'not-running') console.log('No daemon PID file found.')
+	else console.log(result.message)
+	return result.stopped
 }

package/bin/lib/helpers.ts

@@ -1,111 +1,117 @@
-import { spawn } from "child_process";
-import { randomUUID } from "crypto";
-import { waitForEvent, type WaiterSocket, type WaitVerdict } from "@fabrika/daemon-kit";
-import { BASE_URL, WS_URL, TIMEOUT_MS } from "./config.ts";
+import { type WaiterSocket, waitForEvent, type WaitVerdict } from '@fabrika/daemon-kit'
+import { spawn } from 'child_process'
+import { randomUUID } from 'crypto'
+import { z } from 'zod'
+import { BASE_URL, TIMEOUT_MS, WS_URL } from './config.ts'
 
 export function getSessionId(session?: string): string {
-  if (session) return session;
-  return process.env.CANVAS_SESSION_ID || (() => {
-    const id = randomUUID();
-    console.error(`Warning: CANVAS_SESSION_ID not set, using generated ID: ${id}`);
-    return id;
-  })();
+	if (session) return session
+	return process.env.CANVAS_SESSION_ID || (() => {
+		const id = randomUUID()
+		console.error(`Warning: CANVAS_SESSION_ID not set, using generated ID: ${id}`)
+		return id
+	})()
 }
 
+const consumeResponseSchema = z.discriminatedUnion('found', [
+	z.object({ found: z.literal(true), feedback: z.string() }),
+	z.object({ found: z.literal(false) }),
+])
+
 export async function consumeFeedback(sessionId: string): Promise<string | null> {
-  const res = await fetch(`${BASE_URL}/api/session/${sessionId}/feedback/consume`, { method: "POST" });
-  const data = await res.json() as any;
-  if (data.found) return data.feedback;
-  return null;
+	const res = await fetch(`${BASE_URL}/api/session/${sessionId}/feedback/consume`, { method: 'POST' })
+	const data = consumeResponseSchema.parse(await res.json())
+	if (data.found) return data.feedback
+	return null
 }
 
 export function openBrowser(url: string) {
-  const candidates = process.platform === "darwin"
-    ? ["open"]
-    : ["xdg-open", "wslview", "sensible-browser"];
+	const candidates = process.platform === 'darwin'
+		? ['open']
+		: ['xdg-open', 'wslview', 'sensible-browser']
 
-  for (const cmd of candidates) {
-    const which = Bun.spawnSync(["which", cmd]);
-    if (which.exitCode === 0) {
-      spawn(cmd, [url], { detached: true, stdio: "ignore" }).unref();
-      return;
-    }
-  }
-  console.error(`Open this URL in your browser: ${url}`);
+	for (const cmd of candidates) {
+		const which = Bun.spawnSync(['which', cmd])
+		if (which.exitCode === 0) {
+			spawn(cmd, [url], { detached: true, stdio: 'ignore' }).unref()
+			return
+		}
+	}
+	console.error(`Open this URL in your browser: ${url}`)
 }
 
 interface FeedbackWaitOptions {
-  createSocket?: (url: string) => WaiterSocket;
-  timeoutMs?: number;
-  reconnectAttempts?: number;
-  reconnectDelayMs?: number;
+	createSocket?: (url: string) => WaiterSocket
+	timeoutMs?: number
+	reconnectAttempts?: number
+	reconnectDelayMs?: number
 }
 
 interface CanvasRenderError {
-  revision: number;
-  filename: string;
-  message: string;
-  stack?: string;
-  componentStack?: string;
+	revision: number
+	filename: string
+	message: string
+	stack?: string
+	componentStack?: string
 }
 
 function isRecord(value: unknown): value is Record<string, unknown> {
-  return typeof value === "object" && value !== null && !Array.isArray(value);
+	return typeof value === 'object' && value !== null && !Array.isArray(value)
 }
 
 function isCanvasRenderError(value: unknown): value is CanvasRenderError {
-  return typeof value === "object" && value !== null
-    && "revision" in value && Number.isInteger(value.revision)
-    && "filename" in value && typeof value.filename === "string"
-    && "message" in value && typeof value.message === "string"
-    && (!("stack" in value) || value.stack === undefined || typeof value.stack === "string")
-    && (!("componentStack" in value) || value.componentStack === undefined || typeof value.componentStack === "string");
+	return typeof value === 'object' && value !== null
+		&& 'revision' in value && Number.isInteger(value.revision)
+		&& 'filename' in value && typeof value.filename === 'string'
+		&& 'message' in value && typeof value.message === 'string'
+		&& (!('stack' in value) || value.stack === undefined || typeof value.stack === 'string')
+		&& (!('componentStack' in value) || value.componentStack === undefined || typeof value.componentStack === 'string')
 }
 
 function formatCanvasRenderError(error: CanvasRenderError): string {
-  const details = [`Canvas render failed in ${error.filename} (revision ${error.revision}):`, error.message];
-  if (error.componentStack?.trim()) details.push(`Component stack:${error.componentStack}`);
-  if (error.stack?.trim()) details.push(`Browser stack:\n${error.stack}`);
-  return details.join("\n");
+	const details = [`Canvas render failed in ${error.filename} (revision ${error.revision}):`, error.message]
+	if (error.componentStack?.trim()) details.push(`Component stack:${error.componentStack}`)
+	if (error.stack?.trim()) details.push(`Browser stack:\n${error.stack}`)
+	return details.join('\n')
 }
 
 /** A canvas that failed to render is the answer — retrying the socket cannot fix it. */
 function readFeedbackFrame(frame: unknown): WaitVerdict<string> | undefined {
-  if (!isRecord(frame)) return undefined;
-  if (frame.type === "submit" && typeof frame.feedback === "string") {
-    return { type: "settle", value: frame.feedback };
-  }
-  if (frame.type === "render-error" && isCanvasRenderError(frame.error)) {
-    return { type: "fail", error: new Error(formatCanvasRenderError(frame.error)) };
-  }
-  return undefined;
+	if (!isRecord(frame)) return undefined
+	if (frame.type === 'submit' && typeof frame.feedback === 'string') {
+		return { type: 'settle', value: frame.feedback }
+	}
+	if (frame.type === 'render-error' && isCanvasRenderError(frame.error)) {
+		return { type: 'fail', error: new Error(formatCanvasRenderError(frame.error)) }
+	}
+	return undefined
 }
 
 export function waitForFeedback(sessionId: string, options: FeedbackWaitOptions = {}): Promise<string> {
-  return waitForEvent<string>({
-    url: `${WS_URL}/ws/wait/${sessionId}`,
-    onFrame: readFeedbackFrame,
-    ...(options.createSocket ? { createSocket: options.createSocket } : {}),
-    timeoutMs: options.timeoutMs ?? TIMEOUT_MS,
-    reconnect: {
-      attempts: options.reconnectAttempts ?? 3,
-      delayMs: options.reconnectDelayMs ?? 1_000,
-    },
-    messages: {
-      timeout: "Timeout waiting for feedback.",
-      closed: "WebSocket closed before feedback was submitted.",
-      connectionFailed: "WebSocket connection failed.",
-    },
-  });
+	return waitForEvent<string>({
+		url: `${WS_URL}/ws/wait/${sessionId}`,
+		onFrame: readFeedbackFrame,
+		...(options.createSocket ? { createSocket: options.createSocket } : {}),
+		timeoutMs: options.timeoutMs ?? TIMEOUT_MS,
+		reconnect: {
+			attempts: options.reconnectAttempts ?? 3,
+			delayMs: options.reconnectDelayMs ?? 1_000,
+		},
+		messages: {
+			timeout: 'Timeout waiting for feedback.',
+			closed: 'WebSocket closed before feedback was submitted.',
+			connectionFailed: 'WebSocket connection failed.',
+		},
+	})
 }
 
 export async function readLine(): Promise<string> {
-  const buf: number[] = [];
-  for await (const chunk of Bun.stdin.stream()) {
-    for (const byte of chunk) {
-      if (byte === 10) return Buffer.from(buf).toString("utf-8");
-      buf.push(byte);
-    }
-  }
-  return Buffer.from(buf).toString("utf-8");
+	const buf: number[] = []
+	for await (const chunk of Bun.stdin.stream()) {
+		for (const byte of chunk) {
+			if (byte === 10) return Buffer.from(buf).toString('utf-8')
+			buf.push(byte)
+		}
+	}
+	return Buffer.from(buf).toString('utf-8')
 }

package/bin/lib/instructions/app-review.md

@@ -0,0 +1,88 @@
+# Review mode — comments on a running application
+
+Review mode lets the user click through a running web application (a prototype, a mock, a dev server) and leave
+comments on its elements, the way they comment on a canvas. A comment stays a note until the user sends it to you.
+You receive sent threads as markdown, change the code, and answer each thread; the answer appears next to the element.
+
+Review mode has no session ID. Threads belong to a **project**. The commands default to `CANVAS_REVIEW_PROJECT`, then
+to the git repository's directory name; pass `--project <name>` to name another.
+
+## Setup
+
+Open the application through the review proxy. The application stays as it is:
+
+```bash
+bunx agent-canvas review open <url> --project <name>
+```
+
+`<url>` is where the application's dev server runs, e.g. `http://localhost:5173/`; read it from the running server or
+the project's dev script, and ask the user when you cannot tell. The daemon serves the application on a port of its own
+with the widget added to every HTML page, opens it in the user's browser and prints the address. Hot reload passes
+through. The port stays the same across daemon restarts. Only applications on `localhost` can be opened.
+
+When the user wants the widget on the application's own address instead, add the tag to its HTML page in development
+only:
+
+```bash
+bunx agent-canvas review snippet --project <name>
+# <script src="http://localhost:19400/assets/review.js" data-project="<name>"></script>
+```
+
+Tell the user to use **Comment** in the bottom-right toolbar: click an element, or select text first, write the
+comment, then **Send to Claude** or **Save note**.
+
+## Loop
+
+Start the watcher right away. The toolbar shows the user "Claude is listening" while it runs. Do NOT poll, sleep, or
+check proactively.
+
+**Claude Code**: open the application and watch in one command, with the Monitor tool and its longest timeout:
+
+```bash
+bunx agent-canvas review open <url> --follow --project <name>
+```
+
+Its first stdout line is the address the user reviews at. Then it keeps one connection open and prints every batch the
+user sends as one event. Its only other stdout line is the one that ends the watch when the daemon stays unreachable.
+When the monitor expires, re-arm it with `bunx agent-canvas review watch --follow --project <name>`, which does not
+open the browser again. With the snippet instead of the proxy, use that command from the start.
+
+**Other hosts**: run the one-shot watcher in the background. It prints one batch and exits; start it again after
+answering:
+
+```bash
+bunx agent-canvas review watch --project <name>
+```
+
+The output lists each thread with:
+
+- `Page` — the URL the comment was made on, hash route included. Through the proxy it carries the proxy's port; the
+  path and the hash are the application's.
+- `Where` — the page heading and the section or dialog around the element.
+- `Element` — ARIA role and accessible name, the way you would target the element in a browser.
+- `Selector` — a CSS path to the element.
+- `Components` — React components that own the element, outermost first.
+- `Source` — `file:line:column` where the element and its nearest components are written, innermost first. Start
+  there. It needs React 19 in development and source maps from the dev server; without them, search for the innermost
+  component instead.
+- `Selected text` — when the user commented on a text selection.
+- `Screenshot` — when the user attached one: a PNG of the element in its surroundings, the element outlined in red.
+  Read it; it shows what the user sees, which matters for visual comments.
+- `Markup` — the element's HTML, trimmed: classes, attributes and structure, not whole subtrees.
+- The conversation so far.
+
+For each thread:
+
+1. Make the change. The application's dev server reloads it; the user sees it in place.
+2. Answer the thread:
+
+   ```bash
+   bunx agent-canvas review reply <thread-id> "<what you changed>" --resolve --project <name>
+   ```
+
+   Leave out `--resolve` when you ask a question back; the thread returns to the user.
+
+With the one-shot watcher, start `review watch` again for the next batch.
+
+If the user says they already sent comments and no watcher was running, take them with `review fetch`. `review list`
+shows every thread that is not resolved, notes included.

package/bin/lib/instructions/component-checklist.md

@@ -9,9 +9,11 @@ Visual checklist. Read-only display (feedback via annotations).
 ## Usage
 
 ```jsx
-<Checklist items={[
-  { label: "Run migration on staging", checked: true },
-  { label: "Verify data integrity", checked: false },
-  { label: "Update API docs", checked: false },
-]} />
+<Checklist
+	items={[
+		{ label: 'Run migration on staging', checked: true },
+		{ label: 'Verify data integrity', checked: false },
+		{ label: 'Update API docs', checked: false },
+	]}
+/>
 ```

package/bin/lib/instructions/component-custom.md

@@ -6,23 +6,29 @@ When you use the full module format (`export default function Canvas()`), you ca
 
 ```jsx
 function Metric({ label, value, trend }) {
-  const color = trend === 'up' ? 'var(--color-accent-green)' : trend === 'down' ? 'var(--color-accent-red)' : 'var(--color-text-secondary)';
-  return (
-    <div style={{ display: 'flex', gap: 12, alignItems: 'baseline' }}>
-      <span style={{ color: 'var(--color-text-tertiary)', fontSize: '0.75rem' }}>{label}</span>
-      <span style={{ color, fontSize: '1.25rem', fontWeight: 600 }}>{value}</span>
-    </div>
-  );
+	const color = trend === 'up'
+		? 'var(--color-accent-green)'
+		: trend === 'down'
+		? 'var(--color-accent-red)'
+		: 'var(--color-text-secondary)'
+	return (
+		<div style={{ display: 'flex', gap: 12, alignItems: 'baseline' }}>
+			<span style={{ color: 'var(--color-text-tertiary)', fontSize: '0.75rem' }}>
+				{label}
+			</span>
+			<span style={{ color, fontSize: '1.25rem', fontWeight: 600 }}>{value}</span>
+		</div>
+	)
 }
 
 export default function Canvas() {
-  return (
-    <Section title="Performance Summary">
-      <Metric label="P95 Latency" value="42ms" trend="down" />
-      <Metric label="Error Rate" value="0.3%" trend="up" />
-      <Metric label="Throughput" value="1.2k rps" trend="up" />
-    </Section>
-  );
+	return (
+		<Section title="Performance Summary">
+			<Metric label="P95 Latency" value="42ms" trend="down" />
+			<Metric label="Error Rate" value="0.3%" trend="up" />
+			<Metric label="Throughput" value="1.2k rps" trend="up" />
+		</Section>
+	)
 }
 ```
 

package/bin/lib/instructions/component-diff.md

@@ -11,8 +11,9 @@ Shows a diff view between two code snippets.
 ## Usage
 
 ```jsx
-<Diff language="typescript"
-  before={`function auth(req) {\n  return true;\n}`}
-  after={`function auth(req) {\n  const token = req.headers.authorization;\n  if (!token) throw new Error('Unauthorized');\n  return verify(token);\n}`}
+<Diff
+	language="typescript"
+	before={`function auth(req) {\n  return true;\n}`}
+	after={`function auth(req) {\n  const token = req.headers.authorization;\n  if (!token) throw new Error('Unauthorized');\n  return verify(token);\n}`}
 />
 ```

package/bin/lib/instructions/component-item.md

@@ -21,23 +21,33 @@ Previously called "Task" — Item is the generalized version.
 ```jsx
 {/* As a plan task */}
 <Item id="migrate-db" label="Run database migration" badge="todo">
-  Execute the migration script against staging first.
-  <CodeBlock language="bash">npm run migrate:staging</CodeBlock>
+	Execute the migration script against staging first.
+	<CodeBlock language="bash">npm run migrate:staging</CodeBlock>
 </Item>
 
 {/* As a review finding */}
-<Item id="finding-1" label="Missing null check in auth handler" badge="critical" badgeVariant="danger">
-  The handler doesn't check for missing tokens.
-  <FilePreview path="src/auth.ts" lines={[42, 48]} />
+<Item
+	id="finding-1"
+	label="Missing null check in auth handler"
+	badge="critical"
+	badgeVariant="danger"
+>
+	The handler doesn't check for missing tokens.
+	<FilePreview path="src/auth.ts" lines={[42, 48]} />
 </Item>
 
 {/* As a requirement */}
-<Item id="req-auth" label="JWT authentication" badge="must-have" badgeVariant="danger">
-  All API endpoints must require a valid JWT token.
+<Item
+	id="req-auth"
+	label="JWT authentication"
+	badge="must-have"
+	badgeVariant="danger"
+>
+	All API endpoints must require a valid JWT token.
 </Item>
 
 {/* As an architecture component */}
 <Item label="API Gateway" badge="core" badgeVariant="info">
-  Routes requests to downstream services. Handles rate limiting.
+	Routes requests to downstream services. Handles rate limiting.
 </Item>
 ```

package/bin/lib/instructions/component-markdown.md

@@ -5,7 +5,8 @@ Renders markdown content with full GFM support (headings, lists, tables, code bl
 ## Inline source — markdown as children
 
 ```jsx
-<Markdown>{`
+<Markdown>
+	{`
 # Summary
 
 This is **bold** and *italic*. Here's a list:
@@ -17,7 +18,8 @@ This is **bold** and *italic*. Here's a list:
 \`\`\`typescript
 const x = 42;
 \`\`\`
-`}</Markdown>
+`}
+</Markdown>
 ```
 
 ## File reference — loads file content at compile time