feat(studio): treat artifacts as data and delegate rich formats to canvas viewers

The previous artifact increment compiled `.tsx`/`.jsx` artifacts into executable
React modules, which promoted untrusted run output to executable code while the
formats reviewers actually asked for (PPTX, XLSX, DOCX, GLB, Lottie) stayed
unrendered. Replace that contract: every artifact kind is now an inert data
presentation (code, diff, image, json, svg, text), and executable viewer code
comes only from the operator-controlled Canvas viewer root discovered under
`$QODER_HOME/canvas/canvases`.

Adds `artifact-viewers.ts` (viewer discovery and renderer selection),
`artifact-viewer-runtime.ts` (Canvas SDK runtime resolution and file serving),
and `canvas-viewer-compile.ts`; removes `artifact-compile.ts` and the in-sandbox
`artifact-host` bundle plus its build entry. Artifact indexing now rejects
symlinks and paths escaping the physical root, route dispatch no longer crashes
Studio on a rejected handler, and `--canvas-viewers`/`--canvas-sdk-root`/
`--canvas-sdk-media` make the viewer roots configurable. Artifact directories
become optional preloads, so Studio can start without any input flag.

Validated with `npx vitest run test/artifact-viewers.test.ts test/artifact-poc.test.ts test/server.test.ts test/studio-shell-model.test.ts` (56 passing); spec `docs/specs/2026-08-20-harness-studio-artifact-view.md` updated to Implemented.

Co-authored-by: QoderAI <qoder_ai@qoder.com>

Author: phodal

docs/specs/2026-08-20-harness-studio-artifact-view.md

@@ -25,26 +25,8 @@ await build({
   define: { "process.env.NODE_ENV": '"production"' },
   logLevel: "warning",
 });
-// The artifact host is a separate IIFE bundle, not a chunk of the shell: it runs
-// inside the sandboxed artifact iframe, which has an opaque origin and can load
-// a classic script without CORS but not a module script.
-await build({
-  entryPoints: { "artifact-host": join(packageRoot, "src", "app", "artifact-host.ts") },
-  outdir: join(appDir, "assets"),
-  entryNames: "[name]",
-  bundle: true,
-  format: "iife",
-  globalName: "harnessArtifactHost",
-  platform: "browser",
-  target: "es2022",
-  minify: true,
-  sourcemap: true,
-  define: { "process.env.NODE_ENV": '"production"' },
-  logLevel: "warning",
-});
 await Promise.all([
   copyFile(join(packageRoot, "src", "app", "index.html"), join(appDir, "index.html")),
-  copyFile(join(packageRoot, "src", "app", "artifact-host.html"), join(appDir, "artifact-host.html")),
   ...["tokens.css", "shell.css", "workbench.css"].map((file) =>
     copyFile(join(packageRoot, "src", "app", "styles", file), join(appDir, "assets", file)),
   ),

packages/harness-studio/scripts/build-app.mjs

@@ -236,10 +236,12 @@ function stopConditionLabel(enabled: StopConditionState): string {
 
 export function RunView({
   aguiEndpoint,
+  artifactEndpoint,
   navigation,
   initialMode = "live",
 }: {
   aguiEndpoint: string;
+  artifactEndpoint?: string;
   navigation?: ReactNode;
   initialMode?: SurfaceMode;
 }): React.JSX.Element {
@@ -427,7 +429,7 @@ export function RunView({
     <div className="debugger-grid">
       {live ? <LiveExecutionTree state={viewState} prompt={viewPrompt} /> : <ExecutionTree session={retainedSession} cursor={cursor} expanded={expandedNodes} onToggle={toggleExpanded} onSelect={selectNode} />}
       {live ? <LiveNotebook state={viewState} prompt={viewPrompt} groups={liveGroups} /> : <SessionNotebook session={retainedSession} cursor={cursor} expanded={expandedNodes} onSelect={selectCursor} onToggle={toggleExpanded} />}
-      {live ? <LiveInspector state={viewState} /> : <StateInspector session={retainedSession} cursor={cursor} activeTab={inspectorTab} onTab={setInspectorTab} onPrevious={() => selectCursor(previousStateCursor(retainedSession, cursor))} />}
+      {live ? <LiveInspector state={viewState} /> : <StateInspector session={retainedSession} cursor={cursor} activeTab={inspectorTab} artifactEndpoint={artifactEndpoint} onTab={setInspectorTab} onPrevious={() => selectCursor(previousStateCursor(retainedSession, cursor))} />}
     </div>
 
     {live ? <LiveTimeline state={viewState} bins={liveBins} eventCount={liveTimeline.length} /> : <TimelineMinimap session={retainedSession} cursor={cursor} onSelect={selectCursor} />}
@@ -551,25 +553,25 @@ function ValidationCell({ event }: { event: DebuggerEvent }): React.JSX.Element
   return <section className={`validation-cell ${validation.status}`}><header><span><StatusIcon size={15} weight="fill" /><strong>{validation.command}</strong></span><time>{validation.duration}</time></header><p>{validation.summary}</p><ul>{validation.output.map((line) => <li key={line}>{line}</li>)}</ul></section>;
 }
 
-function StateInspector(props: { session: DebuggerSession; cursor: DebuggerCursor; activeTab: InspectorTab; onTab: (tab: InspectorTab) => void; onPrevious: () => void }): React.JSX.Element {
+function StateInspector(props: { session: DebuggerSession; cursor: DebuggerCursor; activeTab: InspectorTab; artifactEndpoint?: string; onTab: (tab: InspectorTab) => void; onPrevious: () => void }): React.JSX.Element {
   const event = eventForCursor(props.session, props.cursor);
   const previous = priorStopEvent(props.session, props.cursor);
   const tablist = useRovingTablist({ ids: INSPECTOR_TABS.map((tab) => tab.id), active: props.activeTab, onSelect: props.onTab, panelId: "state-inspector-panel" });
   return <aside className="state-inspector" aria-label="State Inspector">
     <header><div><small>State Inspector</small><strong>{event.phase} · {event.timestamp}</strong></div><span>{props.cursor.toolCallId ? "Tool Call Cursor" : "Evidence Cursor"}</span></header>
     <nav className="inspector-tabs" aria-label="State Inspector views" {...tablist.tablistProps}>{INSPECTOR_TABS.map((tab) => { const TabIcon = tab.icon; return <button key={tab.id} type="button" {...tablist.getTabProps(tab.id)} onClick={() => props.onTab(tab.id)}><TabIcon size={14} /><span>{tab.label}</span></button>; })}</nav>
-    <div className="inspector-scroll" id="state-inspector-panel" role="tabpanel"><div className="inspector-comparison"><strong>{INSPECTOR_TABS.find((tab) => tab.id === props.activeTab)?.label} at {event.timestamp}</strong><span>Compared with {previous?.timestamp ?? "session start"}</span></div><InspectorContent session={props.session} tab={props.activeTab} cursor={props.cursor} /></div>
+    <div className="inspector-scroll" id="state-inspector-panel" role="tabpanel"><div className="inspector-comparison"><strong>{INSPECTOR_TABS.find((tab) => tab.id === props.activeTab)?.label} at {event.timestamp}</strong><span>Compared with {previous?.timestamp ?? "session start"}</span></div><InspectorContent session={props.session} tab={props.activeTab} cursor={props.cursor} artifactEndpoint={props.artifactEndpoint} /></div>
     <footer><button type="button" onClick={props.onPrevious}><ClockCounterClockwise size={13} />Previous State</button><button type="button"><Clock size={13} />View History</button></footer>
   </aside>;
 }
 
-function InspectorContent({ session, tab, cursor }: { session: DebuggerSession; tab: InspectorTab; cursor: DebuggerCursor }): React.JSX.Element {
+function InspectorContent({ session, tab, cursor, artifactEndpoint }: { session: DebuggerSession; tab: InspectorTab; cursor: DebuggerCursor; artifactEndpoint?: string }): React.JSX.Element {
   const event = eventForCursor(session, cursor);
   const tool = toolForCursor(session, cursor);
   const cumulative = cumulativeFileChanges(session, cursor);
   if (tab === "changes") return <ChangesInspector event={event} cumulative={cumulative} />;
   if (tab === "files") return <FilesInspector session={session} files={cumulative} />;
-  if (tab === "artifacts") return <ArtifactsInspector event={event} />;
+  if (tab === "artifacts") return <ArtifactsInspector endpoint={artifactEndpoint} />;
   if (tab === "tests") return <TestsInspector session={session} event={event} />;
   if (tab === "terminal") return <TerminalInspector event={event} />;
   if (tab === "plan") return <PlanInspector event={event} />;
@@ -593,8 +595,25 @@ function FilesInspector({ session, files }: { session: DebuggerSession; files: D
   return <><InspectorSection title="Observed files" count={files.length}>{files.length > 0 ? <FileRows files={files} /> : <p className="inspector-empty">No modified file observed before this cursor.</p>}</InspectorSection><InspectorSection title="Exploration ledger" count={resources.length}>{resources.length === 0 ? <p className="inspector-empty">No retained file resources in this session.</p> : <ul className="simple-rows">{resources.map((file, index) => <li key={`${file}:${index}`}><FileText size={13} /><code>{file}</code><span>Retained</span></li>)}</ul>}</InspectorSection></>;
 }
 
-function ArtifactsInspector({ event }: { event: DebuggerEvent }): React.JSX.Element {
-  return <><InspectorSection title="Retained artifacts"><ul className="simple-rows"><li><ImageSquare size={13} /><span>acp-debugger-reference.png</span><em>Input</em></li><li><BracketsCurly size={13} /><span>session-debugger-state.json</span><em>{event.timestamp}</em></li></ul></InspectorSection><InspectorSection title="Boundary"><p className="inspector-note">Artifact rows belong to this recorded sample. They are not a restorable workspace snapshot.</p></InspectorSection></>;
+function ArtifactsInspector({ endpoint }: { endpoint?: string }): React.JSX.Element {
+  const [artifacts, setArtifacts] = useState<Array<{ id: string; label: string; renderer: string }>>();
+  const [failure, setFailure] = useState<string>();
+  useEffect(() => {
+    if (endpoint === undefined) return;
+    const controller = new AbortController();
+    void fetch(endpoint, { signal: controller.signal }).then(async (response) => {
+      if (!response.ok) throw new Error(`Artifact catalog failed (${response.status}).`);
+      const payload = await response.json() as { artifacts?: Array<{ id: string; label: string; renderer: string }> };
+      setArtifacts(Array.isArray(payload.artifacts) ? payload.artifacts : []);
+    }).catch((error: unknown) => {
+      if (!controller.signal.aborted) setFailure(error instanceof Error ? error.message : String(error));
+    });
+    return () => controller.abort();
+  }, [endpoint]);
+  if (endpoint === undefined) return <InspectorSection title="Retained artifacts"><p className="inspector-empty">No artifact directory is configured for this Studio run.</p></InspectorSection>;
+  if (failure !== undefined) return <InspectorSection title="Retained artifacts"><p className="inspector-empty">{failure}</p></InspectorSection>;
+  if (artifacts === undefined) return <InspectorSection title="Retained artifacts"><p className="inspector-empty">Loading artifact catalog…</p></InspectorSection>;
+  return <><InspectorSection title="Retained artifacts" count={artifacts.length}>{artifacts.length === 0 ? <p className="inspector-empty">The configured artifact directory is empty.</p> : <ul className="simple-rows">{artifacts.map((artifact) => <li key={artifact.id}><FileText size={13} /><span>{artifact.label}</span><em>{artifact.renderer}</em></li>)}</ul>}</InspectorSection><InspectorSection title="Boundary"><p className="inspector-note">These rows come from the configured read-only artifact catalog. They are not a restorable workspace snapshot.</p></InspectorSection></>;
 }
 
 function TestsInspector({ session, event }: { session: DebuggerSession; event: DebuggerEvent }): React.JSX.Element {

packages/harness-studio/src/app/App.tsx

@@ -4,10 +4,11 @@ import { FileDiff, type FileDiffMetadata } from "@pierre/diffs/react";
 import type { DebuggerDiff } from "./session-debugger-model.js";
 import { buildDebuggerPatch } from "./code-rendering-model.js";
 
-export default function StudioDiff({ diff }: { diff: DebuggerDiff }): React.JSX.Element {
-  const fileDiff = useMemo(() => parseFileDiff(diff), [diff]);
+export default function StudioDiff(props: { diff?: DebuggerDiff; patch?: string }): React.JSX.Element {
+  const patch = props.patch ?? (props.diff === undefined ? "" : buildDebuggerPatch(props.diff));
+  const fileDiff = useMemo(() => parseFileDiff(patch), [patch]);
   if (fileDiff === undefined) {
-    return <pre className="studio-diff-fallback">{buildDebuggerPatch(diff)}</pre>;
+    return <pre className="studio-diff-fallback">{patch}</pre>;
   }
   return <div className="studio-diff-renderer" data-code-diff="pierre">
     <FileDiff
@@ -28,9 +29,9 @@ export default function StudioDiff({ diff }: { diff: DebuggerDiff }): React.JSX.
   </div>;
 }
 
-function parseFileDiff(diff: DebuggerDiff): FileDiffMetadata | undefined {
+function parseFileDiff(patch: string): FileDiffMetadata | undefined {
   try {
-    return parsePatchFiles(buildDebuggerPatch(diff), `session-debugger:${diff.path}:${diff.before.length}:${diff.after.length}`)
+    return parsePatchFiles(patch, `artifact:${patch.length}`)
       .flatMap((patch) => patch.files)
       .at(0);
   } catch {

packages/harness-studio/src/app/RunView.tsx

@@ -42,8 +42,8 @@ export function studioDestinations(config: StudioConfig): readonly StudioDestina
       id: "artifacts",
       label: "Artifacts",
       group: "Observe",
-      availability: config.artifactsEnabled ? "ready" : "foundation",
-      status: config.artifactsEnabled ? "Run outputs" : "Artifact directory required",
+      availability: config.artifactsEnabled ? "ready" : "partial",
+      status: config.artifactsEnabled ? "Run outputs" : "Analyze artifacts",
     },
     {
       id: "debugger",