agent-canvas 0.1.0 → 0.1.3

package/bin/agent-canvas.ts

@@ -15,7 +15,14 @@ const WS_URL = `ws://localhost:${DAEMON_PORT}`;
 const TIMEOUT_MS = parseInt(process.env.CANVAS_TIMEOUT || String(60 * 60 * 1000), 10);
 const PID_FILE = join(TEMP_DIR, "daemon.pid");
 
-function getSessionId(): string {
+function getSessionId(args?: string[]): string {
+  // Check --session flag first
+  if (args) {
+    const idx = args.indexOf("--session");
+    if (idx !== -1 && args[idx + 1]) {
+      return args[idx + 1];
+    }
+  }
   return process.env.CANVAS_SESSION_ID || (() => {
     const id = randomUUID();
     console.error(`Warning: CANVAS_SESSION_ID not set, using generated ID: ${id}`);
@@ -51,7 +58,7 @@ function printUsage() {
 Commands:
   agent-canvas install [local|global]  Install skill & hooks for Claude Code
   agent-canvas push <file.jsx>         Push a canvas, open browser
-  agent-canvas wait                    Wait for user feedback (prints to stdout)
+  agent-canvas wait [--session <id>]   Wait for user feedback (prints to stdout)
   agent-canvas daemon status           Show daemon status
   agent-canvas daemon stop             Stop the daemon
 
@@ -165,7 +172,7 @@ async function handlePush(args: string[]) {
     jsx = readFileSync(filePath, "utf-8");
   }
 
-  const sessionId = getSessionId();
+  const sessionId = getSessionId(args);
   const projectRoot = process.env.CANVAS_PROJECT_ROOT || process.cwd();
 
   // Extract --label flag
@@ -203,7 +210,7 @@ async function handlePush(args: string[]) {
 // ── wait ──
 
 async function handleWait(args: string[]) {
-  const sessionId = getSessionId();
+  const sessionId = getSessionId(args);
 
   await ensureDaemon();
 

package/hooks/session-start.sh

@@ -1,11 +1,13 @@
 #!/bin/bash
 # Injects CANVAS_SESSION_ID and CANVAS_PROJECT_ROOT into Claude Code environment.
 # Called by Claude Code's SessionStart hook.
-INPUT=$(cat /dev/stdin)
-SESSION_ID=$(echo "$INPUT" | grep -o '"session_id":"[^"]*"' | cut -d'"' -f4)
-CWD=$(echo "$INPUT" | grep -o '"cwd":"[^"]*"' | cut -d'"' -f4)
 
-if [ -n "$SESSION_ID" ] && [ -n "$CLAUDE_ENV_FILE" ]; then
+if [ -n "$CLAUDE_ENV_FILE" ]; then
+  # Extract session ID from CLAUDE_ENV_FILE path:
+  # /home/.../.claude/session-env/<SESSION_ID>/sessionstart-hook-0.sh
+  SESSION_ID=$(basename "$(dirname "$CLAUDE_ENV_FILE")")
+  CWD="${CLAUDE_PROJECT_DIR:-$(pwd)}"
+
   echo "export CANVAS_SESSION_ID=$SESSION_ID" >> "$CLAUDE_ENV_FILE"
   echo "export CANVAS_PROJECT_ROOT=$CWD" >> "$CLAUDE_ENV_FILE"
 fi

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agent-canvas",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "description": "Interactive visual canvas for Claude Code — rich annotatable documents in the browser",
   "bin": {
     "agent-canvas": "bin/agent-canvas.js"
@@ -29,6 +29,10 @@
     "@types/react-dom": "^18.3.1",
     "tailwindcss": "4"
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/contember/agent-canvas"
+  },
   "license": "MIT",
   "keywords": [
     "claude-code",

package/skills/canvas/SKILL.md

@@ -23,10 +23,10 @@ Canvas opens a rich, annotatable document in the user's browser. You write JSX,
 
 ### Writing a Canvas
 
-Use the **Write** tool to create a `.jsx` file in `.claude/canvas/`:
+Use the **Write** tool to create a `.jsx` file in `.claude/agent-canvas/`:
 
 ```jsx
-// Write to: .claude/canvas/plan.jsx
+// Write to: .claude/agent-canvas/plan.jsx
 
 <Section title="Authentication Redesign">
   A proposal to replace session-based auth with JWT tokens.
@@ -50,10 +50,10 @@ Components are auto-available — no imports needed. The file is a JSX fragment
 After writing the file, push it to open the canvas in the browser:
 
 ```bash
-bunx agent-canvas push .claude/canvas/plan.jsx --label "Implementation Plan"
+bunx agent-canvas push .claude/agent-canvas/plan.jsx --label "Implementation Plan"
 ```
 
-This opens the canvas in the user's browser (first time) and exits immediately. The round label defaults to the filename if `--label` is omitted.
+This opens the canvas in the user's browser (first time) and exits immediately. The round label defaults to the filename if `--label` is omitted. **Always show the `browserUrl` from the push output to the user** so they can open the canvas manually if auto-open didn't work.
 
 ### Waiting for feedback
 
@@ -65,12 +65,14 @@ bunx agent-canvas wait
 
 This **blocks until the user submits feedback**, then prints feedback markdown to stdout. If feedback was already submitted (e.g. retrying after a disconnect), it returns immediately with the existing feedback.
 
+> **Note:** If `push` outputs a warning "CANVAS_SESSION_ID not set, using generated ID: ...", you must pass that ID to wait: `bunx agent-canvas wait --session <id>`
+
 ### Iterating
 
 Use the **Edit** tool to modify the existing JSX based on feedback — targeted edits, not full rewrites. Then push and wait again:
 
 ```bash
-bunx agent-canvas push .claude/canvas/plan.jsx --label "Implementation Plan (revised)"
+bunx agent-canvas push .claude/agent-canvas/plan.jsx --label "Implementation Plan (revised)"
 bunx agent-canvas wait
 ```
 
@@ -81,19 +83,19 @@ Each push creates a new **round** — the user sees previous rounds and their fe
 Maintain separate files for different phases:
 
 ```bash
-bunx agent-canvas push .claude/canvas/discovery.jsx --label "Discovery"
+bunx agent-canvas push .claude/agent-canvas/discovery.jsx --label "Discovery"
 bunx agent-canvas wait
 # ... process feedback ...
-bunx agent-canvas push .claude/canvas/requirements.jsx --label "Requirements"
+bunx agent-canvas push .claude/agent-canvas/requirements.jsx --label "Requirements"
 bunx agent-canvas wait
 # ... process feedback ...
-bunx agent-canvas push .claude/canvas/plan.jsx --label "Implementation Plan"
+bunx agent-canvas push .claude/agent-canvas/plan.jsx --label "Implementation Plan"
 bunx agent-canvas wait
 ```
 
 ### File Location
 
-All canvas files go in `.claude/canvas/` within the project root. Add `.claude/canvas/` to `.gitignore` — these are ephemeral working files.
+All canvas files go in `.claude/agent-canvas/` within the project root. Add `.claude/agent-canvas/` to `.gitignore` — these are ephemeral working files.
 
 ## Choosing a Flow
 
@@ -127,8 +129,8 @@ User wants to make a decision?
 
 1. **Determine flow** from user intent
 2. **Announce** briefly: "I'll start with discovery, then create a detailed plan."
-3. **Write canvas JSX** with the Write tool to `.claude/canvas/<name>.jsx`
-4. **Push**: `bunx agent-canvas push .claude/canvas/<name>.jsx --label "<Label>"`
+3. **Write canvas JSX** with the Write tool to `.claude/agent-canvas/<name>.jsx`
+4. **Push**: `bunx agent-canvas push .claude/agent-canvas/<name>.jsx --label "<Label>"`
 5. **Tell the user** the canvas is ready for review (they see it in their browser)
 6. **Wait**: `bunx agent-canvas wait` — this blocks until the user submits feedback
 7. **Read feedback** — check for annotations, answers, added context files, approval
@@ -163,7 +165,7 @@ Then interview deeply in each selected area across subsequent rounds. Or ask in
 
 ## Important Rules
 
-- **Write** canvas files to `.claude/canvas/` using the Write tool. Never use bash heredocs or cat.
+- **Write** canvas files to `.claude/agent-canvas/` using the Write tool. Never use bash heredocs or cat.
 - **Edit** canvas files using the Edit tool. Never rewrite entire files — make targeted edits.
 - JSX can be a fragment (just tags) or a full module with `export default function Canvas()`.
 - Every `<Item>` and interactive component needs a unique `id`.

package/skills/canvas/flows.md

@@ -2,7 +2,7 @@
 
 Each flow is a sequence of canvas rounds. Phases can be skipped or combined based on context.
 
-**Tooling reminder**: Write all `.jsx` files using the **Write** tool to `.claude/canvas/`. Edit them with the **Edit** tool. Push with `bunx agent-canvas push .claude/canvas/<file>.jsx --label "<Label>"`, then `bunx agent-canvas wait` to block for feedback. The JSX blocks below show what to write — they are the file content, not bash commands.
+**Tooling reminder**: Write all `.jsx` files using the **Write** tool to `.claude/agent-canvas/`. Edit them with the **Edit** tool. Push with `bunx agent-canvas push .claude/agent-canvas/<file>.jsx --label "<Label>"`, then `bunx agent-canvas wait` to block for feedback. The JSX blocks below show what to write — they are the file content, not bash commands.
 
 ---
 
@@ -16,7 +16,7 @@ Each flow is a sequence of canvas rounds. Phases can be skipped or combined base
 
 Goal: understand scope, constraints, and user expectations. Start broad, go deep.
 
-Write to `.claude/canvas/discovery.jsx`, then push and wait:
+Write to `.claude/agent-canvas/discovery.jsx`, then push and wait:
 
 ```jsx
 <Section title="Discovery: [Feature Name]">

package/daemon/dist/theme.css

@@ -1,66 +0,0 @@
-@theme {
-  /* Colors — initial values, overridden by [data-theme] in styles.css */
-  --color-bg-base: #1a1a1a;
-  --color-bg-surface: #1e1e1e;
-  --color-bg-elevated: #242424;
-  --color-bg-code: #1c1c1c;
-  --color-bg-input: rgba(255, 248, 240, 0.03);
-  --color-bg-elevated-half: rgba(36, 36, 36, 0.5);
-
-  --color-text-primary: #e8e4df;
-  --color-text-secondary: #a09a92;
-  --color-text-tertiary: #847d75;
-  --color-text-code: #c4beb7;
-  --color-text-disabled: #3a3530;
-  --color-text-inverse: #1a1a1a;
-
-  --color-border-subtle: rgba(255, 248, 240, 0.06);
-  --color-border-medium: rgba(255, 248, 240, 0.08);
-  --color-border-hover: rgba(255, 248, 240, 0.12);
-  --color-border-strong: rgba(255, 248, 240, 0.15);
-
-  --color-accent-green: #4a9e6d;
-  --color-accent-green-muted: rgba(74, 158, 109, 0.12);
-  --color-accent-amber: #c49a3a;
-  --color-accent-amber-muted: rgba(196, 154, 58, 0.12);
-  --color-accent-red: #c45a5a;
-  --color-accent-red-muted: rgba(196, 90, 90, 0.12);
-  --color-accent-blue: #5a8ec4;
-  --color-accent-blue-muted: rgba(90, 142, 196, 0.10);
-
-  --color-highlight-bg: rgba(255, 220, 100, 0.15);
-  --color-highlight-border: rgba(255, 220, 100, 0.35);
-  --color-highlight-annotation: rgba(255, 220, 100, 0.08);
-  --color-highlight-active: rgba(255, 220, 100, 0.25);
-  --color-highlight-selected: rgba(255, 220, 100, 0.10);
-
-  --color-badge-bg: rgba(196, 154, 58, 0.20);
-  --color-btn-primary: #e8e4df;
-  --color-btn-primary-text: #1a1a1a;
-
-  /* Fonts */
-  --font-heading: 'Instrument Serif', Georgia, 'Times New Roman', serif;
-  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
-
-  /* Font sizes */
-  --text-section: 1.75rem;
-  --text-section--line-height: 1.25;
-  --text-section--letter-spacing: -0.01em;
-  --text-task-label: 0.9375rem;
-  --text-task-label--line-height: 1.4;
-  --text-body: 0.875rem;
-  --text-body--line-height: 1.65;
-  --text-code: 0.8125rem;
-  --text-code--line-height: 1.6;
-  --text-meta: 0.75rem;
-  --text-meta--line-height: 1.4;
-  --text-meta--letter-spacing: 0.02em;
-  --text-tiny: 0.6875rem;
-  --text-tiny--line-height: 1.4;
-
-  /* Shadows */
-  --shadow-sm: 0 1px 2px var(--color-shadow);
-  --shadow-md: 0 4px 12px var(--color-shadow);
-  --shadow-lg: 0 8px 24px var(--color-shadow);
-}