feat(files): an HTML file opens as the page — Files panel, Chat preview, File Explorer

Clicking an .html/.htm file now renders it instead of showing its source or
downloading it:
- Changes/Files panel: a whole HTML file opens on Preview (Raw = the editor).
- Chat file preview: a workspace page brings its relative files along.
- File Explorer: double-click / Enter opens a viewer; Download stays on its
  header and right-click menu.

The page runs in the chat artifact's sandbox (iframe srcdoc, scripts, never
allow-same-origin). Its relative stylesheets (and their url()s), scripts,
images, media and icons are read by the dashboard through the existing
download routes and inlined as <style>/data: URLs (lib/htmlInline.ts: never
above the folder's root, ≤ 60 files / 30 MB) — the login cookie is
SameSite=Strict, so a frame could not fetch them itself, and no new route
serves files without it.

client/src/components/run/ChatFilePreview.tsx

@@ -39,6 +39,7 @@ import { useDialog } from "../../hooks/useDialog";
 import { dragSkill } from "../../lib/promptAttach";
 import { readMarkdownPreview } from "../../lib/markdownView";
 import { MarkdownPreview } from "../MarkdownPreview";
+import { HtmlFrame, fetchVia } from "../HtmlFrame";
 import { CodeBlock } from "../conversation/CodeBlock";
 import { useTheme } from "../../hooks/useTheme";
 import { toast } from "../../lib/toast";
@@ -85,6 +86,18 @@ export const extOf = (p: string) => {
 export const displayName = (p: string) =>
   DROP_RE.test(p) ? baseName(p).replace(/^[0-9a-f]{16}-?/, "") || baseName(p) : baseName(p);
 
+/** A file inside the pane's folder: the git target that reads it and its path there. */
+function workspaceFile(path: string, scope: PreviewScope) {
+  const file = slashed(path);
+  const base = slashed(scope.cwd).replace(/\/+$/, "");
+  if (scope.laneId === null || !base || !file.startsWith(`${base}/`)) return null;
+  const target =
+    base === slashed(scope.laneCwd).replace(/\/+$/, "")
+      ? scope.laneId
+      : gitTarget(scope.laneId, scope.sessionId);
+  return { target, rel: file.slice(base.length + 1) };
+}
+
 type Content =
   | { kind: "loading" }
   | { kind: "image"; src: string }
@@ -121,8 +134,8 @@ function useContent(path: string, scope: PreviewScope): Content {
       };
     }
     const file = slashed(path);
-    const base = slashed(scope.cwd).replace(/\/+$/, "");
-    if (scope.laneId === null || !base || !file.startsWith(`${base}/`)) {
+    const inside = workspaceFile(path, scope);
+    if (!inside) {
       // Claude Code's own files (memory, a skill): the config pages' guarded read.
       if (/\/\.claude\//.test(file) && !IMAGE_RE.test(file)) {
         show(
@@ -147,11 +160,7 @@ function useContent(path: string, scope: PreviewScope): Content {
         live = false;
       };
     }
-    const rel = file.slice(base.length + 1);
-    const target =
-      base === slashed(scope.laneCwd).replace(/\/+$/, "")
-        ? scope.laneId
-        : gitTarget(scope.laneId, scope.sessionId);
+    const { target, rel } = inside;
     if (IMAGE_RE.test(path)) {
       setContent({ kind: "image", src: api.lanes.gitRawUrl(target, rel) });
       return;
@@ -235,9 +244,28 @@ function defaultView(path: string): View {
   return kind === "markdown" && !readMarkdownPreview() ? "code" : "preview";
 }
 
-function Body({ path, content, view }: { path: string; content: Content; view: View }) {
+function Body({
+  path,
+  content,
+  view,
+  scope,
+}: {
+  path: string;
+  content: Content;
+  view: View;
+  scope: PreviewScope;
+}) {
   const { t } = useTranslation("run");
   const kind = artifactKind(path);
+  // A page in the workspace brings its relative CSS, scripts and images along.
+  const inside = kind === "html" ? workspaceFile(path, scope) : null;
+  const insideTarget = inside ? JSON.stringify(inside.target) : null;
+  const page = useMemo(() => {
+    if (!inside) return null;
+    const { target, rel } = inside;
+    return { rel, fetchFile: fetchVia((p) => api.lanes.gitDownloadUrl(target, p)) };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [insideTarget, inside?.rel]);
   // An image the route refused (gone, server mode) shows like no preview.
   const [broken, setBroken] = useState<string | null>(null);
   const shown: Content =
@@ -290,6 +318,18 @@ function Body({ path, content, view }: { path: string; content: Content; view: V
     );
   }
   if (kind === "csv") return <CsvTable text={shown.text} tab={/\.tsv$/i.test(path)} />;
+  if (page && !shown.truncated) {
+    return (
+      <HtmlFrame
+        key={path}
+        path={page.rel}
+        html={shown.text}
+        fetchFile={page.fetchFile}
+        title={baseName(path)}
+        testId="artifact-frame"
+      />
+    );
+  }
   return <ArtifactFrame kind={kind} text={shown.text} title={baseName(path)} />;
 }
 
@@ -503,7 +543,7 @@ export function FilePreview({
           </button>
         </div>
       </header>
-      <Body path={path} content={content} view={view} />
+      <Body path={path} content={content} view={view} scope={scope} />
     </section>
   );
   // Full screen: over the whole page, where a pane's edges cannot clip it.

client/src/components/run/__tests__/ChatFilePreview.test.tsx

@@ -242,7 +242,9 @@ describe("the artifact view", () => {
       ((await screen.findByTestId("artifact-frame")) as HTMLIFrameElement).getAttribute("srcdoc")
     ).toContain("two");
     fireEvent.click(versions.querySelector("button")!);
-    expect(screen.getByTestId("artifact-frame").getAttribute("srcdoc")).toContain("<p>one</p>");
+    await vi.waitFor(() =>
+      expect(screen.getByTestId("artifact-frame").getAttribute("srcdoc")).toContain("<p>one</p>")
+    );
     cleanup();
   });