+ <0||0>
+ No solve in progress — fire one from the Amicode chat, or run “Replay demo run”.
+
+
+
+
objective
–
+
iteration
–
+
feasibility
–
+
optimality
–
+
diff --git a/packages/extension/src/run_inspector.ts b/packages/extension/src/run_inspector.ts
index 28eed8e34..abf011f9e 100644
--- a/packages/extension/src/run_inspector.ts
+++ b/packages/extension/src/run_inspector.ts
@@ -1,5 +1,6 @@
import * as vscode from "vscode";
import * as path from "node:path";
+import { readFileSync } from "node:fs";
import { inspectorResourceRootDirs } from "./opencode_paths";
// ============================================================================
@@ -184,7 +185,33 @@ class InspectorView implements vscode.WebviewViewProvider {
const scriptUri = webview.asWebviewUri(
vscode.Uri.joinPath(this.ctx.extensionUri, "dist", "inspector_webview.js"),
);
+ const styleUri = webview.asWebviewUri(
+ vscode.Uri.joinPath(this.ctx.extensionUri, "media", "inspector.css"),
+ );
const nonce = newNonce();
+ // The "look" (body markup) lives in media/inspector.html and the "feel"
+ // (styling) in media/inspector.css — both owned by the design lane. This
+ // method owns only the security/wiring shell: the CSP, the nonce, and the
+ // resource URIs. The DOM-id + message contract between that markup and
+ // inspector_webview.ts is pinned by inspector_view_contract.test.ts.
+ //
+ // style-src keeps 'unsafe-inline' deliberately — it is load-bearing for the
+ // static style="opacity:0" attrs on preview-a/b in inspector.html (runtime
+ // .style mutations aren't CSP-governed, so those attrs are the only thing
+ // that needs it). Don't strip it as "dead" now that the stylesheet moved
+ // external; the contract test guards this grant.
+ let body: string;
+ try {
+ body = readFileSync(
+ vscode.Uri.joinPath(this.ctx.extensionUri, "media", "inspector.html").fsPath,
+ "utf8",
+ );
+ } catch (err) {
+ // A corrupt/partial install (media/inspector.html missing) would otherwise
+ // throw out of resolveWebviewView before webview.html is ever set → an
+ // opaque blank panel. Degrade to a readable message instead.
+ return renderFallbackHtml(err);
+ }
return /* html */ `
@@ -194,81 +221,10 @@ class InspectorView implements vscode.WebviewViewProvider {
img-src ${webview.cspSource} data: blob: https:;
script-src 'nonce-${nonce}';
style-src ${webview.cspSource} 'unsafe-inline';">
-
+
-
-
<0||0> Run Inspector
-
- idle
-
-
-
-
-
- <0||0>
- No solve in progress — fire one from the Amicode chat, or run “Replay demo run”.
-
-
-
-
objective
–
-
iteration
–
-
feasibility
–
-
optimality
–
-
+${body.trimEnd()}
`;
@@ -282,6 +238,26 @@ function newNonce(): string {
return s;
}
+/** Self-contained fallback shown when the view markup can't be read (corrupt or
+ * partial install). No external resources/scripts so it can't itself fail to
+ * render; keeps webview.html set so the panel shows a message, not a blank. */
+function renderFallbackHtml(err: unknown): string {
+ const detail = (err instanceof Error ? err.message : String(err))
+ .replace(/&/g, "&").replace(/
+
+
+
+
+
+
+
Run Inspector failed to load its view (media/inspector.html).
+
This usually means a corrupt or partial install — try reinstalling the extension.
+
${detail}
+
+`;
+}
+
export function registerRunInspector(ctx: vscode.ExtensionContext, runsRoot: string): InspectorView {
INSPECTOR = new InspectorView(ctx, runsRoot);
ctx.subscriptions.push(
diff --git a/packages/extension/test/__mocks__/vscode.ts b/packages/extension/test/__mocks__/vscode.ts
index 1995b5c29..f8817cc3e 100644
--- a/packages/extension/test/__mocks__/vscode.ts
+++ b/packages/extension/test/__mocks__/vscode.ts
@@ -6,6 +6,7 @@ export const window = {
showErrorMessage: () => Promise.resolve(undefined),
showWarningMessage: () => Promise.resolve(undefined),
createOutputChannel: () => ({ appendLine() {}, append() {}, dispose() {} }),
+ registerWebviewViewProvider: () => ({ dispose() {} }),
};
export const commands = { executeCommand: () => Promise.resolve(undefined) };
export const workspace = {
diff --git a/packages/extension/test/inspector_view_contract.test.ts b/packages/extension/test/inspector_view_contract.test.ts
new file mode 100644
index 000000000..e2d9cd052
--- /dev/null
+++ b/packages/extension/test/inspector_view_contract.test.ts
@@ -0,0 +1,94 @@
+import { describe, it, expect } from "vitest";
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { registerRunInspector } from "../src/run_inspector";
+
+// Pins the plumbing⇄view contract that the run_inspector.ts split now straddles:
+// the markup (media/inspector.html) and styling (media/inspector.css) are owned
+// by the design lane, while run_inspector.ts + inspector_webview.ts are the
+// plumbing. This test reds if a look-and-feel change drops a DOM id or a CSP
+// grant the webview script depends on — i.e. it lets design iterate freely while
+// guarding the exact seam the two lanes share. Renders through the public
+// WebviewViewProvider surface (resolveWebviewView), not internals.
+
+const PKG_ROOT = join(__dirname, "..");
+
+function renderInspectorHtml(): string {
+ const ctx = { extensionUri: { fsPath: PKG_ROOT }, subscriptions: [] as unknown[] };
+ const inspector = registerRunInspector(ctx as never, "/tmp/runs-test");
+ let captured = "";
+ const view = {
+ webview: {
+ options: {},
+ cspSource: "vscode-webview://unit",
+ asWebviewUri: (u: { fsPath?: string }) => ({ toString: () => "vscode-webview://unit/" + (u?.fsPath ?? String(u)) }),
+ postMessage: () => undefined,
+ set html(v: string) { captured = v; },
+ get html() { return captured; },
+ },
+ onDidDispose: () => ({ dispose() {} }),
+ };
+ inspector.resolveWebviewView(view as never);
+ return captured;
+}
+
+// Every id the webview script reads/writes MUST exist in the design-owned
+// markup, else the live inspector silently breaks with no test failure. The
+// regex below recovers the literal $("id")/getElementById("id") lookups; the
+// computed hot-path lookups it can't see are pinned explicitly just below.
+const SCRIPT = readFileSync(join(PKG_ROOT, "src", "inspector_webview.ts"), "utf8");
+function idsReferencedByScript(): string[] {
+ const ids = new Set();
+ for (const m of SCRIPT.matchAll(/\$\(\s*"([^"]+)"\s*\)/g)) ids.add(m[1]);
+ for (const m of SCRIPT.matchAll(/getElementById\(\s*"([^"]+)"\s*\)/g)) ids.add(m[1]);
+ return [...ids];
+}
+
+// Ids addressed only computationally — the double-buffer swap ($("preview-" +
+// buffer)) and the metric fan-out (for (const id of [...]) $(id)). The literal
+// regex is blind to these; they pass its check today only because they also
+// happen to appear as literals elsewhere, so a design edit that drops that
+// incidental alias would go unguarded. Listed explicitly rather than parsed out
+// of the source on purpose: this single-run seam is temporary (Phase 1.3
+// reshapes the inspector into per-run views and this test goes with it), so a
+// fully-derived id contract would be throwaway.
+const COMPUTED_FORM_IDS = ["preview-a", "preview-b", "m-obj", "m-iter", "m-pr", "m-du"];
+
+describe("Run Inspector view contract (plumbing ⇄ media/inspector.{html,css})", () => {
+ const html = renderInspectorHtml();
+
+ it("renders every DOM id the webview script depends on (literal + computed-form)", () => {
+ const ids = idsReferencedByScript();
+ expect(ids.length).toBeGreaterThan(0); // guard the regex itself
+ for (const id of [...new Set([...ids, ...COMPUTED_FORM_IDS])]) {
+ expect(html, `markup is missing id="${id}" (inspector_webview.ts drives it)`).toContain(`id="${id}"`);
+ }
+ });
+
+ it("links the external stylesheet and keeps the CSP authorizing every grant the view depends on", () => {
+ expect(html).toMatch(/]+rel="stylesheet"[^>]+href="vscode-webview:\/\/unit\/[^"]*inspector\.css"/);
+
+ // Pin grants to their directive, not just "appears somewhere in the CSP".
+ const styleSrc = html.match(/style-src([^;]*)/)?.[1] ?? "";
+ expect(styleSrc, "style-src must grant the webview source for the linked stylesheet").toContain("vscode-webview://unit");
+ // 'unsafe-inline' is the load-bearing grant: the static style="opacity:0"
+ // attrs on preview-a/b need it (runtime .style mutations aren't CSP-governed).
+ // Drop it and the previews start visible instead of fading in.
+ expect(styleSrc, "style-src must keep 'unsafe-inline' for the static style attrs").toContain("'unsafe-inline'");
+
+ // iter-frame PNGs load as asWebviewUri → vscode-webview:// URIs; img-src must grant the source.
+ const imgSrc = html.match(/img-src([^;]*)/)?.[1] ?? "";
+ expect(imgSrc, "img-src must grant the webview source for iter-frame PNGs").toContain("vscode-webview://unit");
+
+ expect(html).toMatch(/script-src 'nonce-/);
+ expect(html).toMatch(/