agent-canvas 0.2.1 → 0.7.0

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

@@ -5,36 +5,42 @@ Renders a Mermaid diagram. Supports flowchart, sequence, ER, gantt, pie, and mor
 ## Usage
 
 ```jsx
-<Mermaid>{`
+<Mermaid>
+	{`
   graph TD
     A[Client] -->|HTTP| B(API Gateway)
     B --> C{Auth?}
     C -->|Valid| D[Service]
     C -->|Invalid| E[401 Response]
-`}</Mermaid>
+`}
+</Mermaid>
 ```
 
 ### Sequence diagram
 
 ```jsx
-<Mermaid>{`
+<Mermaid>
+	{`
   sequenceDiagram
     Client->>+API: POST /login
     API->>+DB: Find user
     DB-->>-API: User record
     API-->>-Client: JWT token
-`}</Mermaid>
+`}
+</Mermaid>
 ```
 
 ### ER diagram
 
 ```jsx
-<Mermaid>{`
+<Mermaid>
+	{`
   erDiagram
     USER ||--o{ ORDER : places
     ORDER ||--|{ LINE-ITEM : contains
     PRODUCT ||--o{ LINE-ITEM : "ordered in"
-`}</Mermaid>
+`}
+</Mermaid>
 ```
 
 For complex diagrams, prefer Mermaid over raw SVG. Use raw `<svg>` only when Mermaid can't express what you need.

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

@@ -12,8 +12,12 @@ Multi-select checkboxes.
 ## Usage
 
 ```jsx
-<MultiChoice id="affected-areas" label="Which areas need changes?" required
-  options={["Models", "API", "Frontend", "Tests"]} />
+<MultiChoice
+	id="affected-areas"
+	label="Which areas need changes?"
+	required
+	options={['Models', 'API', 'Frontend', 'Tests']}
+/>
 ```
 
 Appears in feedback as: `[affected-areas]: Models, API, Tests`

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

@@ -6,6 +6,6 @@ Softer than Callout. For asides, context, non-critical info.
 
 ```jsx
 <Note>
-  This pattern is also used in the payment service — see src/payments/auth.ts.
+	This pattern is also used in the payment service — see src/payments/auth.ts.
 </Note>
 ```

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

@@ -10,6 +10,6 @@ Inline badge. Use inside Item labels or body text.
 
 ```jsx
 <Item label="Fix the race condition">
-  <Priority level="high" /> This causes data corruption under load.
+	<Priority level="high" /> This causes data corruption under load.
 </Item>
 ```

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

@@ -15,6 +15,13 @@ Slider for numeric ranges or scales.
 ## Usage
 
 ```jsx
-<RangeInput id="effort-tolerance" label="How much refactoring is acceptable?"
-  min={1} max={5} minLabel="Minimal changes" maxLabel="Full rewrite OK" required />
+<RangeInput
+	id="effort-tolerance"
+	label="How much refactoring is acceptable?"
+	min={1}
+	max={5}
+	minLabel="Minimal changes"
+	maxLabel="Full rewrite OK"
+	required
+/>
 ```

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

@@ -16,17 +16,18 @@ The value stays outside normal canvas response state. It is not written to `loca
 
 ```jsx
 <Section title="Create an API token">
-  <Item id="open-settings" label="1. Open token settings">
-    Open the service's token settings. Create a token with the minimum scopes needed for this task.
-  </Item>
-
-  <SecretInput
-    id="service-token"
-    label="2. Paste the new token"
-    env="SERVICE_TOKEN"
-    placeholder="Paste token"
-    required
-  />
+	<Item id="open-settings" label="1. Open token settings">
+		Open the service's token settings. Create a token with the minimum scopes
+		needed for this task.
+	</Item>
+
+	<SecretInput
+		id="service-token"
+		label="2. Paste the new token"
+		env="SERVICE_TOKEN"
+		placeholder="Paste token"
+		required
+	/>
 </Section>
 ```
 

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

@@ -6,25 +6,71 @@ For custom visuals that Mermaid can't express, write `<svg>` directly. Use CSS v
 
 ```jsx
 <svg viewBox="0 0 400 200" style={{ width: '100%', maxWidth: 400 }}>
-  <rect x="10" y="10" width="120" height="50" rx="8"
-        fill="var(--color-accent-blue-muted)" stroke="var(--color-accent-blue)" strokeOpacity="0.3" />
-  <text x="70" y="40" textAnchor="middle" fill="var(--color-text-primary)" fontSize="13"
-        fontFamily="var(--font-body)">API Gateway</text>
+	<rect
+		x="10"
+		y="10"
+		width="120"
+		height="50"
+		rx="8"
+		fill="var(--color-accent-blue-muted)"
+		stroke="var(--color-accent-blue)"
+		strokeOpacity="0.3"
+	/>
+	<text
+		x="70"
+		y="40"
+		textAnchor="middle"
+		fill="var(--color-text-primary)"
+		fontSize="13"
+		fontFamily="var(--font-body)"
+	>
+		API Gateway
+	</text>
 
-  <line x1="130" y1="35" x2="180" y2="35" stroke="var(--color-text-tertiary)" strokeWidth="1.5"
-        markerEnd="url(#arrow)" />
+	<line
+		x1="130"
+		y1="35"
+		x2="180"
+		y2="35"
+		stroke="var(--color-text-tertiary)"
+		strokeWidth="1.5"
+		markerEnd="url(#arrow)"
+	/>
 
-  <rect x="180" y="10" width="120" height="50" rx="8"
-        fill="var(--color-accent-green-muted)" stroke="var(--color-accent-green)" strokeOpacity="0.3" />
-  <text x="240" y="40" textAnchor="middle" fill="var(--color-text-primary)" fontSize="13"
-        fontFamily="var(--font-body)">Auth Service</text>
+	<rect
+		x="180"
+		y="10"
+		width="120"
+		height="50"
+		rx="8"
+		fill="var(--color-accent-green-muted)"
+		stroke="var(--color-accent-green)"
+		strokeOpacity="0.3"
+	/>
+	<text
+		x="240"
+		y="40"
+		textAnchor="middle"
+		fill="var(--color-text-primary)"
+		fontSize="13"
+		fontFamily="var(--font-body)"
+	>
+		Auth Service
+	</text>
 
-  <defs>
-    <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6"
-            orient="auto-start-reverse">
-      <path d="M 0 0 L 10 5 L 0 10 z" fill="var(--color-text-tertiary)" />
-    </marker>
-  </defs>
+	<defs>
+		<marker
+			id="arrow"
+			viewBox="0 0 10 10"
+			refX="9"
+			refY="5"
+			markerWidth="6"
+			markerHeight="6"
+			orient="auto-start-reverse"
+		>
+			<path d="M 0 0 L 10 5 L 0 10 z" fill="var(--color-text-tertiary)" />
+		</marker>
+	</defs>
 </svg>
 ```
 

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

@@ -11,11 +11,11 @@ Simple data table.
 
 ```jsx
 <Table
-  headers={["Endpoint", "Method", "Auth"]}
-  rows={[
-    ["/users", "GET", "Required"],
-    ["/users/:id", "PUT", "Owner only"],
-    ["/health", "GET", "None"],
-  ]}
+	headers={['Endpoint', 'Method', 'Auth']}
+	rows={[
+		['/users', 'GET', 'Required'],
+		['/users/:id', 'PUT', 'Owner only'],
+		['/health', 'GET', 'None'],
+	]}
 />
 ```

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

@@ -19,15 +19,15 @@ Registers on mount, updates on change, unregisters on unmount.
 
 ```jsx
 function ProConList() {
-  const [pros, setPros] = React.useState(["Fast builds"]);
-  const [cons, setCons] = React.useState(["New runtime"]);
+	const [pros, setPros] = React.useState(['Fast builds'])
+	const [cons, setCons] = React.useState(['New runtime'])
 
-  useFeedback(
-    "pro-con",
-    `**Pros:** ${pros.join(", ")}\n**Cons:** ${cons.join(", ")}`,
-    { label: "Pro/Con Analysis" },
-  );
+	useFeedback(
+		'pro-con',
+		`**Pros:** ${pros.join(', ')}\n**Cons:** ${cons.join(', ')}`,
+		{ label: 'Pro/Con Analysis' },
+	)
 
-  return <div>{/* UI for managing pros/cons */}</div>;
+	return <div>{/* UI for managing pros/cons */}</div>
 }
 ```

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

@@ -12,6 +12,10 @@ Free text input.
 ## Usage
 
 ```jsx
-<UserInput id="constraints" label="Any constraints I should know about?"
-  placeholder="e.g. must work with existing Redis setup" required />
+<UserInput
+	id="constraints"
+	label="Any constraints I should know about?"
+	placeholder="e.g. must work with existing Redis setup"
+	required
+/>
 ```

package/bin/lib/instructions/flow-feature.md

@@ -44,11 +44,28 @@ If the user selects interview areas, push follow-up canvases with deep questions
 
 ```jsx
 <Section title="Backend Deep Dive">
-  <UserInput id="data-shape" label="Describe the data shape / entities involved" required />
-  <Choice id="mutation-pattern" label="How should mutations work?"
-    options={["Sync — mutate and return", "Async — queue and process", "Event-driven — publish and react"]} />
-  <UserInput id="invariants" label="What business rules / invariants must always hold?" />
-  <UserInput id="existing-patterns" label="Any existing patterns in the codebase I should follow?" />
+	<UserInput
+		id="data-shape"
+		label="Describe the data shape / entities involved"
+		required
+	/>
+	<Choice
+		id="mutation-pattern"
+		label="How should mutations work?"
+		options={[
+			'Sync — mutate and return',
+			'Async — queue and process',
+			'Event-driven — publish and react',
+		]}
+	/>
+	<UserInput
+		id="invariants"
+		label="What business rules / invariants must always hold?"
+	/>
+	<UserInput
+		id="existing-patterns"
+		label="Any existing patterns in the codebase I should follow?"
+	/>
 </Section>
 ```
 

package/bin/lib/instructions/flow-plan.md

@@ -96,11 +96,11 @@ Push AFTER implementation is complete. Always do this, even briefly. **After pus
 
 ## Skipping & Combining
 
-| Situation | Action |
-|---|---|
+| Situation                                      | Action                                 |
+| ---------------------------------------------- | -------------------------------------- |
 | User said "just do it" with clear instructions | Implement directly, push summary after |
-| Simple change (< 3 files) | Probably skip canvas entirely |
-| User explicitly says "don't plan, just code" | Implement, push summary |
-| Mid-flow user says "looks good, go ahead" | Skip remaining review rounds |
+| Simple change (< 3 files)                      | Probably skip canvas entirely          |
+| User explicitly says "don't plan, just code"   | Implement, push summary                |
+| Mid-flow user says "looks good, go ahead"      | Skip remaining review rounds           |
 
 **Always push a summary after implementation** (unless trivially small) **and watch for feedback** — the user may want to respond with follow-ups or corrections.

package/bin/lib/instructions/flow-runbook.md

@@ -12,31 +12,34 @@ Give the user ordered, concrete steps. Include the exact destination, required p
 
 ```jsx
 <Section title="Connect the service">
-  <Callout type="info">
-    Complete these steps in order. The token value will stay outside agent feedback and model context.
-  </Callout>
-
-  <Item id="open-token-page" label="1. Open token settings" status="todo">
-    Open https://service.example/settings/tokens while signed in to the target account.
-  </Item>
-
-  <Item id="create-token" label="2. Create a scoped token" status="todo">
-    Name it for this task. Grant only read:projects and write:deployments. Set the shortest practical expiry.
-  </Item>
-
-  <SecretInput
-    id="service-token"
-    label="3. Paste the token"
-    env="SERVICE_TOKEN"
-    required
-  />
-
-  <Choice
-    id="target-confirmation"
-    label="Which environment did you configure?"
-    options={["Staging", "Production"]}
-    required
-  />
+	<Callout type="info">
+		Complete these steps in order. The token value will stay outside agent
+		feedback and model context.
+	</Callout>
+
+	<Item id="open-token-page" label="1. Open token settings" status="todo">
+		Open https://service.example/settings/tokens while signed in to the target
+		account.
+	</Item>
+
+	<Item id="create-token" label="2. Create a scoped token" status="todo">
+		Name it for this task. Grant only read:projects and write:deployments. Set the
+		shortest practical expiry.
+	</Item>
+
+	<SecretInput
+		id="service-token"
+		label="3. Paste the token"
+		env="SERVICE_TOKEN"
+		required
+	/>
+
+	<Choice
+		id="target-confirmation"
+		label="Which environment did you configure?"
+		options={['Staging', 'Production']}
+		required
+	/>
 </Section>
 ```
 

package/bin/lib/instructions/overview.md

@@ -17,17 +17,17 @@ Use the **Write** tool to create `.jsx` files in `${TMPDIR:-/tmp}/agent-canvas/<
 // ${TMPDIR:-/tmp}/agent-canvas/<session-id>/plan.jsx
 
 <Section title="Authentication Redesign">
-  A proposal to replace session-based auth with JWT tokens.
+	A proposal to replace session-based auth with JWT tokens.
 
-  <Item id="current" label="Current state" badge="context" badgeVariant="info">
-    The app uses express-session with Redis store.
-    <FilePreview path="src/auth/session.ts" lines={[1, 45]} />
-  </Item>
+	<Item id="current" label="Current state" badge="context" badgeVariant="info">
+		The app uses express-session with Redis store.
+		<FilePreview path="src/auth/session.ts" lines={[1, 45]} />
+	</Item>
 
-  <Item id="proposal" label="Proposed change" badge="proposal">
-    Switch to stateless JWT with refresh token rotation.
-    <Callout type="warning">This will invalidate all existing sessions.</Callout>
-  </Item>
+	<Item id="proposal" label="Proposed change" badge="proposal">
+		Switch to stateless JWT with refresh token rotation.
+		<Callout type="warning">This will invalidate all existing sessions.</Callout>
+	</Item>
 </Section>
 ```
 
@@ -35,7 +35,7 @@ Components are auto-available — no imports needed. The file can be a JSX fragm
 
 **Content is JSX, not markdown.** Children of components are plain JSX text and nested components — NOT markdown. If you want to render markdown (lists, bold, headings, etc.), use the `<Markdown>` component explicitly. Raw `**bold**` or `- list items` in JSX children will render as literal text.
 
-**JSX escaping rules.** Content is in a JSX context. You MUST escape: `<` as `{'<'}` or `&lt;`, `>` as `{'>'}` or `&gt;`, `{` as `{'{'}`  and `}` as `{'}'}`. This is critical when writing code snippets, type signatures like `Option<String>`, or any text containing angle brackets. Alternatively, put such content inside `<CodeBlock>` or `<Markdown>` which handle escaping for you.
+**JSX escaping rules.** Content is in a JSX context. You MUST escape: `<` as `{'<'}` or `&lt;`, `>` as `{'>'}` or `&gt;`, `{` as `{'{'}` and `}` as `{'}'}`. This is critical when writing code snippets, type signatures like `Option<String>`, or any text containing angle brackets. Alternatively, put such content inside `<CodeBlock>` or `<Markdown>` which handle escaping for you.
 
 ### 2. Push
 
@@ -48,6 +48,7 @@ bunx agent-canvas push ${TMPDIR:-/tmp}/agent-canvas/<session-id>/ --session <ses
 All `*.jsx` files in the directory are pushed as a snapshot. Each file appears as a separate tab. **Always show the `browserUrl` from the output to the user.**
 
 Options:
+
 - `--label <text>` — revision label shown in the UI
 - `--response <text>` — short banner explaining how you addressed prior feedback (2-4 sentences, focus on "why" not "what")
 
@@ -123,9 +124,11 @@ All components are globally available in canvas JSX — no imports needed. For i
 **Never hardcode hex colors** — use CSS variables: `var(--color-text-primary)`, `var(--color-bg-surface)`, `var(--color-accent-blue)`, etc.
 
 ### Layout
+
 - **Section** — top-level collapsible grouping with serif heading. Props: `title`, `collapsed`
 
 ### Content
+
 - **Item** — primary content block (tasks, findings, requirements). Props: `id`, `label`, `badge`, `badgeVariant`, `status`
 - **CodeBlock** — syntax-highlighted code. Props: `language`
 - **FilePreview** — project file preview. Props: `path`, `lines` ([start, end])
@@ -140,6 +143,7 @@ All components are globally available in canvas JSX — no imports needed. For i
 - **Priority** — inline priority badge. Props: `level` (high/medium/low)
 
 ### Interactive (User Input)
+
 - **Choice** — single-select radio group. Props: `id`, `label`, `options`, `required`
 - **MultiChoice** — multi-select checkboxes. Props: `id`, `label`, `options`, `required`
 - **UserInput** — free text input. Props: `id`, `label`, `placeholder`, `required`
@@ -147,6 +151,7 @@ All components are globally available in canvas JSX — no imports needed. For i
 - **RangeInput** — numeric slider. Props: `id`, `label`, `min`, `max`, `minLabel`, `maxLabel`, `required`
 
 ### Advanced
+
 - **useFeedback** — hook for custom components to contribute computed data to feedback
 - **Custom components** — use `export default function Canvas()` module format to define helpers
 
@@ -174,17 +179,21 @@ Agent needs the user to complete manual steps? → RUNBOOK flow
 
 **Adapt dynamically**: flows are guidelines, not rigid pipelines. Skip or combine phases when appropriate:
 
-| Situation | Action |
-|---|---|
-| User gave a detailed spec | Skip to PLAN (skip discovery + requirements) |
-| User said "just do it" with clear instructions | Implement directly, push summary after |
-| Simple change (< 3 files) | Probably skip canvas entirely |
-| User explicitly says "don't plan, just code" | Implement, push summary |
-| Mid-flow user says "looks good, go ahead" | Skip remaining review rounds |
-| Discovery reveals it's trivial | Collapse remaining phases into one canvas |
+| Situation                                      | Action                                       |
+| ---------------------------------------------- | -------------------------------------------- |
+| User gave a detailed spec                      | Skip to PLAN (skip discovery + requirements) |
+| User said "just do it" with clear instructions | Implement directly, push summary after       |
+| Simple change (< 3 files)                      | Probably skip canvas entirely                |
+| User explicitly says "don't plan, just code"   | Implement, push summary                      |
+| Mid-flow user says "looks good, go ahead"      | Skip remaining review rounds                 |
+| Discovery reveals it's trivial                 | Collapse remaining phases into one canvas    |
 
 **Always push a summary after implementation** unless the change was trivially small (1-2 file edit).
 
+## Review Mode
+
+To collect comments on a running application instead of a canvas, read `bunx agent-canvas instructions app-review`.
+
 ## Flow Execution Pattern
 
 1. **Determine flow** from user intent

package/bin/lib/instructions/theming.md

@@ -5,6 +5,7 @@ Canvas supports light/dark themes. **Never hardcode hex colors** — use CSS var
 ## CSS Variables
 
 ### Text
+
 - `--color-text-primary` — main text
 - `--color-text-secondary` — supporting text
 - `--color-text-tertiary` — meta text, labels
@@ -12,6 +13,7 @@ Canvas supports light/dark themes. **Never hardcode hex colors** — use CSS var
 - `--color-text-inverse` — text on dark backgrounds
 
 ### Backgrounds
+
 - `--color-bg-base` — page background
 - `--color-bg-surface` — card/section background
 - `--color-bg-elevated` — floating elements
@@ -19,17 +21,20 @@ Canvas supports light/dark themes. **Never hardcode hex colors** — use CSS var
 - `--color-bg-input` — form input background
 
 ### Accents
+
 - `--color-accent-green`, `--color-accent-green-muted`
 - `--color-accent-amber`, `--color-accent-amber-muted`
 - `--color-accent-red`, `--color-accent-red-muted`
 - `--color-accent-blue`, `--color-accent-blue-muted`
 
 ### Borders
+
 - `--color-border-subtle` — light separators
 - `--color-border-medium` — visible borders
 - `--color-border-hover` — interactive hover state
 
 ### Fonts
+
 - `--font-heading` — section headings (Instrument Serif)
 - `--font-body` — body text (Inter)
 - `--font-mono` — code (JetBrains Mono)