agent-canvas 0.1.37 → 0.1.38

package/.github/workflows/deploy-worker-prod.yml

@@ -14,7 +14,6 @@ jobs:
     uses: ./.github/workflows/deploy-worker.yml
     with:
       env: prod
-    secrets:
-      CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-      CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-      SHARE_AUTH_TOKEN: ${{ secrets.SHARE_AUTH_TOKEN_PROD }}
+    # inherit so the reusable workflow can resolve secrets; the env-scoped
+    # values (set on the `prod` environment) win over repo-level ones.
+    secrets: inherit

package/.github/workflows/deploy-worker-stage.yml

@@ -16,7 +16,6 @@ jobs:
     uses: ./.github/workflows/deploy-worker.yml
     with:
       env: stage
-    secrets:
-      CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-      CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-      SHARE_AUTH_TOKEN: ${{ secrets.SHARE_AUTH_TOKEN_STAGE }}
+    # inherit so the reusable workflow can resolve secrets; the env-scoped
+    # values (set on the `stage` environment) win over repo-level ones.
+    secrets: inherit

package/.github/workflows/deploy-worker.yml

@@ -7,14 +7,13 @@ on:
         description: "Target environment (stage or prod)"
         required: true
         type: string
-    secrets:
-      CLOUDFLARE_API_TOKEN:
-        required: true
-      CLOUDFLARE_ACCOUNT_ID:
-        required: true
-      SHARE_AUTH_TOKEN:
-        description: "Bearer token the daemon must send to POST /shares. Optional but strongly recommended in production."
-        required: false
+    # No `secrets:` inputs on purpose. The deploy job below declares
+    # `environment: ${{ inputs.env }}`, so referencing `secrets.X` directly
+    # resolves the matching *environment* secret (falling back to a
+    # repo-level secret of the same name). Callers pass `secrets: inherit`
+    # so org/repo secrets remain reachable too. This is what makes the
+    # CLOUDFLARE_* / SHARE_AUTH_TOKEN values environment-scoped — a prod
+    # token can never be read by a stage deploy and vice versa.
 
 jobs:
   deploy:

package/bin/lib/commands/push.ts

@@ -59,7 +59,11 @@ export async function handlePush(args: string[]) {
   // Skip restart only for clear user errors (syntax errors with line/col,
   // runtime validation errors) — those won't be fixed by a restart.
   const isUserError = !result.ok && result.errors && Object.values(result.errors).every((e: any) =>
-    typeof e === "string" && (/\(line \d+, col \d+\)/.test(e) || e.startsWith("Runtime error:")));
+    typeof e === "string" && (
+      /\(line \d+, col \d+\)/.test(e) ||
+      /Syntax Error|Parse error|Mermaid syntax error/i.test(e) ||
+      e.startsWith("Runtime error:")
+    ));
   const shouldRestart = !result.ok && result.error === "Canvas compilation failed" && !isUserError;
   if (shouldRestart) {
     console.error("Compilation failed, restarting daemon and retrying...");

package/daemon/src/compiler.test.ts

@@ -0,0 +1,39 @@
+import { test, expect } from "bun:test";
+import { compilePlan } from "./compiler";
+
+// Regression coverage for the error-reporting path. Bun surfaces JSX syntax
+// errors through three shapes (Transpiler throw, build logs, AggregateError
+// from Bun.build); all must reach the CLI as an actionable message carrying a
+// position + code frame — never a bare "Parse error" / "Bundle failed".
+
+test("syntax error reports line, column and a code frame", async () => {
+  // A straight double-quote inside a double-quoted attribute terminates the
+  // attribute early — the exact mistake that previously printed only
+  // "Parse error" with no location.
+  const result = await compilePlan(`<Section title="a "b" c">x</Section>`);
+
+  expect(result.ok).toBe(false);
+  if (result.ok) return;
+  expect(result.error).toMatch(/\(line \d+, col \d+\)/);
+  // Code frame: offending source line + caret.
+  expect(result.error).toContain("^");
+});
+
+test("syntax error line maps back to the authored file (1-based, not offset by injected imports)", async () => {
+  // Bad token on the authored 3rd line; the reported line must be small/positive,
+  // not shifted by the prepended component-import preamble.
+  const result = await compilePlan(`<Section title="ok">\n  <Item id="a" label="x">\n    <span a="1 "2"></span>\n  </Item>\n</Section>`);
+
+  expect(result.ok).toBe(false);
+  if (result.ok) return;
+  const m = result.error.match(/\(line (\d+), col \d+\)/);
+  expect(m).not.toBeNull();
+  const line = Number(m![1]);
+  expect(line).toBeGreaterThan(0);
+  expect(line).toBeLessThan(10);
+});
+
+test("well-formed canvas compiles", async () => {
+  const result = await compilePlan(`<Section title="Hello"><Item id="a" label="b">text</Item></Section>`);
+  expect(result.ok).toBe(true);
+});

package/daemon/src/compiler.ts

@@ -130,7 +130,59 @@ async function validateCompiledPlan(js: string): Promise<{ ok: true } | { ok: fa
   return { ok: true };
 }
 
+/**
+ * Normalize a Bun build/transpile failure into a precise, actionable string.
+ *
+ * Bun surfaces JSX syntax errors through three different shapes, all handled
+ * here so the CLI never again prints a bare "Parse error" / "Bundle failed":
+ *   - `Bun.Transpiler.transformSync` throws a `BuildMessage` (has `.position`).
+ *   - `Bun.build()` returns `{ success: false, logs: [BuildMessage] }`.
+ *   - `Bun.build()` throws an `AggregateError` whose `.errors[0]` is a
+ *     `BuildMessage` — the case the old catch discarded, returning only the
+ *     useless top-level "Bundle failed".
+ *
+ * `lineOffset` is the number of lines Canvas prepended (component imports +
+ * wrapper) so the reported line maps back to the user's authored file. When a
+ * position is available we append `(line N, col M)` plus a one-line code frame
+ * with a caret — that suffix is also what lets the CLI classify the error as a
+ * user error and skip a pointless daemon restart (see push.ts).
+ */
+function formatBuildError(err: any, lineOffset: number): string {
+  // Collect every candidate that might carry a `.position`, most specific first.
+  const candidates: any[] = [];
+  if (err?.position) candidates.push(err);
+  if (Array.isArray(err?.errors)) candidates.push(...err.errors);
+  if (!candidates.length && err && typeof err[Symbol.iterator] === "function") {
+    try { candidates.push(...err); } catch {}
+  }
+  const detail = candidates.find((c) => c?.position) ?? candidates[0] ?? err;
+  const message = String(detail?.message || err?.message || "Syntax error").split("\n")[0];
+
+  const pos = detail?.position;
+  if (!pos || typeof pos.line !== "number") return message;
+
+  const loc = ` (line ${pos.line - lineOffset}, col ${pos.column})`;
+  let frame = "";
+  if (typeof pos.lineText === "string") {
+    const caret = " ".repeat(Math.max(0, pos.column ?? 0)) + "^";
+    frame = `\n  ${pos.lineText}\n  ${caret}`;
+  }
+  return `${message}${loc}${frame}`;
+}
+
 export async function compilePlan(jsx: string, projectRoot?: string): Promise<CompileResult> {
+  // Strip leading pragma / block / line comments (e.g. `/** @jsxImportSource ... */`).
+  // Authored JSX sometimes carries a JSX-runtime pragma from another toolchain;
+  // Canvas injects its own imports and uses the React automatic runtime, so the
+  // pragma is unused. Left in place it sits at the top level of the wrapped
+  // fragment as plain text (JSX only treats `{/* */}` as a comment) and renders
+  // literally on the page.
+  let stripped: string;
+  do {
+    stripped = jsx;
+    jsx = jsx.replace(/^\s*(?:\/\*[\s\S]*?\*\/|\/\/[^\n]*)\s*/, "");
+  } while (jsx !== stripped);
+
   // Resolve file contents at compile time
   if (projectRoot) {
     jsx = resolveFilePreviews(jsx, projectRoot);
@@ -150,18 +202,18 @@ export async function compilePlan(jsx: string, projectRoot?: string): Promise<Co
     ? `${COMPONENT_IMPORTS}\n${jsx}`
     : `${COMPONENT_IMPORTS}\nexport default function Plan() {\n  return (<>${jsx}</>);\n}\n`;
 
+  // Offset: COMPONENT_IMPORTS lines + wrapper lines (export default function
+  // Plan() + return). Used to map Bun's line numbers back to the authored file.
+  const wrapperLines = hasDefaultExport ? 1 : 2;
+  const lineOffset = COMPONENT_IMPORTS_LINES + wrapperLines;
+
   // Pre-validate syntax with Bun.Transpiler — gives precise error positions,
   // unlike Bun.build() which throws opaque "Bundle failed" for syntax errors.
   try {
     const transpiler = new Bun.Transpiler({ loader: "jsx" });
     transpiler.transformSync(source);
   } catch (syntaxError: any) {
-    const pos = syntaxError?.position;
-    // Offset: COMPONENT_IMPORTS lines + wrapper lines (export default function Plan() + return)
-    const wrapperLines = hasDefaultExport ? 1 : 2;
-    const lineOffset = COMPONENT_IMPORTS_LINES + wrapperLines;
-    const loc = pos ? ` (line ${pos.line - lineOffset}, col ${pos.column})` : "";
-    return { ok: false, error: `${syntaxError?.message || "Syntax error"}${loc}` };
+    return { ok: false, error: formatBuildError(syntaxError, lineOffset) };
   }
 
   const tmpFile = join(COMPILE_TEMP_DIR, `plan-${randomUUID()}.jsx`);
@@ -178,9 +230,9 @@ export async function compilePlan(jsx: string, projectRoot?: string): Promise<Co
       });
 
       if (!result.success) {
-        const errors = result.logs
-          .filter((l) => l.level === "error")
-          .map((l) => l.message)
+        const errorLogs = result.logs.filter((l) => l.level === "error");
+        const errors = errorLogs
+          .map((l) => formatBuildError(l, lineOffset))
           .join("\n");
         return { ok: false, error: errors || "Bundle failed" };
       }
@@ -192,8 +244,17 @@ export async function compilePlan(jsx: string, projectRoot?: string): Promise<Co
       }
       return { ok: true, js };
     } catch (buildError: any) {
-      // Bun.build() can throw "Unknown Error, TODO" in long-running processes
-      // when its internal bundler state gets corrupted. Let the CLI handle restart.
+      // A real syntax error surfaces as an AggregateError carrying BuildMessages
+      // (with positions) — format it precisely. The opaque "Unknown Error, TODO"
+      // corruption case (internal bundler state gets corrupted in long-running
+      // processes) has no sub-errors; pass it through so the CLI restarts the
+      // daemon and retries.
+      const hasDetail =
+        buildError?.position ||
+        (Array.isArray(buildError?.errors) && buildError.errors.length > 0);
+      if (hasDetail) {
+        return { ok: false, error: formatBuildError(buildError, lineOffset) };
+      }
       return { ok: false, error: buildError?.message || "Unknown Error" };
     }
   } catch (e: any) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agent-canvas",
-  "version": "0.1.37",
+  "version": "0.1.38",
   "description": "Interactive visual canvas for Claude Code — rich annotatable documents in the browser",
   "bin": {
     "agent-canvas": "bin/agent-canvas.js"