@jaxzhou/dsh-file-explorer 0.1.0 → 0.1.3

package/lib/client.js

@@ -23,14 +23,17 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   FILES_VIEW_ID: () => FILES_VIEW_ID,
+  RETAINED_PREVIEWS: () => RETAINED_PREVIEWS,
   apply: () => apply,
+  canExportPdf: () => canExportPdf,
   extensionOf: () => extensionOf,
   hasSourceToggle: () => hasSourceToggle,
   inject: () => inject,
   name: () => name,
   parseJsonDocument: () => parseJsonDocument,
   previewFormatFor: () => previewFormatFor,
-  previewLines: () => previewLines
+  previewLines: () => previewLines,
+  tabLabels: () => tabLabels
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -98,10 +101,14 @@ function previewFormatFor(path) {
   if (lang === void 0) return { kind: "text", lang: void 0, mediaType: void 0 };
   if (lang === "json") return { kind: "json", lang, mediaType: void 0 };
   if (lang === "markdown") return { kind: "markdown", lang, mediaType: void 0 };
+  if (lang === "html") return { kind: "html", lang, mediaType: void 0 };
   return { kind: "code", lang, mediaType: void 0 };
 }
 function hasSourceToggle(format) {
-  return format.kind === "markdown" || format.kind === "json";
+  return format.kind === "markdown" || format.kind === "html" || format.kind === "json";
+}
+function canExportPdf(format) {
+  return format.kind === "markdown" || format.kind === "html";
 }
 
 // src/client/FilesView.tsx
@@ -121,6 +128,24 @@ function pathParts(path) {
   if (at < 0) return { directory: "", name: path };
   return { directory: path.slice(0, at + 1), name: path.slice(at + 1) };
 }
+function tabLabels(open) {
+  const twins = /* @__PURE__ */ new Map();
+  for (const path of open) {
+    const { name: name2 } = pathParts(path);
+    twins.set(name2, (twins.get(name2) ?? 0) + 1);
+  }
+  const labels = {};
+  for (const path of open) {
+    const { directory, name: name2 } = pathParts(path);
+    if ((twins.get(name2) ?? 0) < 2) {
+      labels[path] = name2;
+      continue;
+    }
+    const parent = pathParts(directory.replace(/[/\\]+$/, "")).name;
+    labels[path] = parent === "" ? name2 : `${parent}/${name2}`;
+  }
+  return labels;
+}
 function previewLines(page) {
   return page.lines === 0 ? [] : page.text.split("\n");
 }
@@ -213,21 +238,32 @@ function Entry({
     ] });
   }
   if (entry.type === "file") {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: "dsh-fe-item", "data-files-entry": "file", "data-files-path": path, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      "button",
+    const isOpen = tree.open.has(path);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "li",
       {
-        type: "button",
-        className: "dsh-fe-row",
-        "aria-current": tree.state.selected === path,
-        onClick: () => {
-          tree.onOpen(path);
-        },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dsh_client_ui_primitives.FileTypeIcon, { kind: (0, import_dsh_client_ui_primitives.classifyFileType)(entry.name), size: 16 }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dsh-fe-name", children: entry.name })
-        ]
+        className: "dsh-fe-item",
+        "data-files-entry": "file",
+        "data-files-path": path,
+        "data-files-open": isOpen || void 0,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "button",
+          {
+            type: "button",
+            className: "dsh-fe-row",
+            "aria-current": tree.state.active === path,
+            onClick: () => {
+              tree.onOpen(path);
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dsh_client_ui_primitives.FileTypeIcon, { kind: (0, import_dsh_client_ui_primitives.classifyFileType)(entry.name), size: 16 }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dsh-fe-name", children: entry.name }),
+              isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dsh-fe-open-dot", "aria-hidden": "true" })
+            ]
+          }
+        )
       }
-    ) });
+    );
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: "dsh-fe-item", "data-files-entry": "other", "data-files-path": path, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dsh-fe-row dsh-fe-row-static", title: tree.t("tree.other"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dsh-fe-name", children: entry.name }) }) });
 }
@@ -248,10 +284,30 @@ function HighlightedSource({
     }
   ) });
 }
+function HtmlFrame({ html, title }) {
+  const url = (0, import_react.useMemo)(
+    () => URL.createObjectURL(new Blob([html], { type: "text/html" })),
+    [html]
+  );
+  (0, import_react.useEffect)(() => () => {
+    URL.revokeObjectURL(url);
+  }, [url]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "iframe",
+    {
+      className: "dsh-fe-html-frame",
+      src: url,
+      sandbox: "allow-scripts",
+      title,
+      "data-preview-html": true
+    }
+  );
+}
 function FormattedBody({
   page,
   format,
   jsonDocument,
+  proseRef,
   t
 }) {
   const copyLabel = t("code.copy");
@@ -296,7 +352,10 @@ function FormattedBody({
     t
   ]);
   if (format.kind === "markdown") {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dsh-fe-prose", "data-preview-format": "markdown", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dsh_client_ui_primitives.MarkdownText, { text: page.text, labels: markdownLabels }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dsh-fe-prose", ref: proseRef, "data-preview-format": "markdown", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dsh_client_ui_primitives.MarkdownText, { text: page.text, labels: markdownLabels }) });
+  }
+  if (format.kind === "html") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dsh-fe-html", "data-preview-format": "html", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HtmlFrame, { html: page.text, title: t("preview.htmlFrame") }) });
   }
   if (jsonDocument === void 0) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dsh-fe-json", "data-preview-format": "json", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -309,17 +368,81 @@ function FormattedBody({
     }
   ) });
 }
+function printableHtml(source, title) {
+  const parsed = new DOMParser().parseFromString(source, "text/html");
+  for (const script of [...parsed.querySelectorAll("script")]) script.remove();
+  for (const element of [...parsed.querySelectorAll("*")]) {
+    for (const attribute of [...element.attributes]) {
+      const name2 = attribute.name.toLowerCase();
+      if (name2.startsWith("on")) element.removeAttribute(attribute.name);
+      else if (/^\s*javascript:/i.test(attribute.value)) element.removeAttribute(attribute.name);
+    }
+  }
+  if (parsed.title === "") {
+    const tag = parsed.createElement("title");
+    tag.textContent = title;
+    parsed.head.append(tag);
+  }
+  return `<!doctype html>${parsed.documentElement.outerHTML}`;
+}
+function appStyleTags() {
+  return [...document.querySelectorAll('style, link[rel="stylesheet"]')].map((node) => node.outerHTML).join("\n");
+}
+function styledDocument(title, body) {
+  const safeTitle = title.replace(/[<&]/g, (character) => character === "<" ? "&lt;" : "&amp;");
+  return [
+    '<!doctype html><html><head><meta charset="utf-8">',
+    `<title>${safeTitle}</title>`,
+    appStyleTags(),
+    "<style>body{margin:0;padding:28px 32px;background:#fff;color:#111;",
+    "print-color-adjust:exact;-webkit-print-color-adjust:exact}</style>",
+    `</head><body>${body}</body></html>`
+  ].join("");
+}
+function createPrintFrame() {
+  const frame = document.createElement("iframe");
+  frame.setAttribute("aria-hidden", "true");
+  frame.setAttribute("data-preview-print", "");
+  frame.style.cssText = "position:fixed;left:-10000px;top:0;width:794px;height:1123px;border:0";
+  document.body.appendChild(frame);
+  return frame;
+}
+function printDocument(html) {
+  for (const stale of document.querySelectorAll("iframe[data-preview-print]")) stale.remove();
+  const frame = createPrintFrame();
+  const doc = frame.contentDocument;
+  if (doc === null) return;
+  doc.open();
+  doc.write(html);
+  doc.close();
+  const view = frame.contentWindow;
+  if (view === null) return;
+  view.addEventListener("afterprint", () => {
+    frame.remove();
+  }, { once: true });
+  view.focus();
+  view.print();
+}
+function bodyKindOf(content, format, mode, jsonWalkable) {
+  if (content !== null && content.kind === "image") return "image";
+  if (!hasSourceToggle(format)) return "source";
+  if ((mode ?? "rendered") === "source") return "source";
+  if (format.kind === "json" && !jsonWalkable) return "source";
+  return "rendered";
+}
 function PreviewBody({
-  state,
+  path,
   content,
   format,
   body,
   jsonDocument,
   jsonFallback,
+  wrap,
+  proseRef,
   t
 }) {
   if (content.kind === "image") {
-    const { name: name2 } = pathParts(state.selected ?? "");
+    const { name: name2 } = pathParts(path);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dsh-fe-scroll dsh-fe-imagehost", "data-preview-state": "ready", "data-preview-format": "image", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { className: "dsh-fe-image", src: content.image.dataUrl, alt: name2, "data-preview-image": true }) });
   }
   const page = content.page;
@@ -346,19 +469,21 @@ function PreviewBody({
       "data-preview-body": body,
       children: [
         jsonFallback && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "dsh-fe-note dsh-fe-note-error", "data-preview-row": "invalid-json", children: t("preview.jsonInvalid") }),
-        body === "rendered" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormattedBody, { page, format, jsonDocument, t }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HighlightedSource, { page, lang: format.lang, wrap: state.wrap, t }),
+        body === "rendered" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          FormattedBody,
+          {
+            page,
+            format,
+            jsonDocument,
+            proseRef,
+            t
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HighlightedSource, { page, lang: format.lang, wrap, t }),
         !page.eof && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "dsh-fe-note", "data-preview-row": "truncated", children: t("preview.truncated", { lines: page.lines }) })
       ]
     }
   );
 }
-function bodyKindOf(content, format, mode, jsonWalkable) {
-  if (content !== null && content.kind === "image") return "image";
-  if (!hasSourceToggle(format)) return "source";
-  if ((mode ?? "rendered") === "source") return "source";
-  if (format.kind === "json" && !jsonWalkable) return "source";
-  return "rendered";
-}
 function FilesView({
   sessionId,
   useSessions,
@@ -370,32 +495,50 @@ function FilesView({
 }) {
   const cwd = useSessions((sessions) => sessions.byId[sessionId]?.cwd);
   const state = useStore((store) => store);
-  const jsonDocument = (0, import_react.useMemo)(() => {
-    if (state.selected === null) return void 0;
-    if ((state.mode ?? "rendered") === "source") return void 0;
-    if (previewFormatFor(state.selected).kind !== "json") return void 0;
-    const preview2 = state.preview;
-    if (preview2.kind !== "ready" || preview2.content.kind !== "text") return void 0;
-    return parseJsonDocument(preview2.content.page.text);
-  }, [state.mode, state.preview, state.selected]);
+  const activeTabRef = (0, import_react.useRef)(null);
+  const proseRef = (0, import_react.useRef)(null);
+  const [copied, setCopied] = (0, import_react.useState)(null);
+  const copyTimer = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => () => {
+    if (copyTimer.current !== null) clearTimeout(copyTimer.current);
+  }, []);
   (0, import_react.useEffect)(() => {
     if (cwd === void 0 || state.root === cwd) return;
     actions.start(cwd);
     list(cwd);
   }, [actions, cwd, list, state.root]);
+  const active = state.active;
+  const format = active === null ? null : previewFormatFor(active);
+  const content = active !== null && state.previews[active]?.kind === "ready" ? state.previews[active].content : null;
+  const jsonDocument = (0, import_react.useMemo)(() => {
+    if (active === null || content === null || content.kind !== "text") return void 0;
+    if ((state.modes[active] ?? "rendered") === "source") return void 0;
+    if (previewFormatFor(active).kind !== "json") return void 0;
+    return parseJsonDocument(content.page.text);
+  }, [active, content, state.modes]);
+  (0, import_react.useEffect)(() => {
+    if (active === null) return;
+    if (state.previews[active] !== void 0) return;
+    read(active);
+  }, [active, read, state.previews]);
+  (0, import_react.useEffect)(() => {
+    activeTabRef.current?.scrollIntoView({ block: "nearest", inline: "nearest" });
+  }, [active]);
   if (cwd === void 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dsh-fe-root", "data-files-state": "no-workspace", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dsh-fe-status", children: t("tree.noWorkspace") }) });
   }
   if (state.root === null) return null;
+  const openSet = new Set(state.open);
   const tree = {
     state,
+    open: openSet,
     onToggle: (path) => {
       const loaded = state.levels[path] !== void 0;
       actions.toggled(path);
       if (!loaded) list(path);
     },
     onOpen: (path) => {
-      read(path);
+      actions.openFile(path);
     },
     t
   };
@@ -404,25 +547,46 @@ function FilesView({
     for (const path of state.expanded) list(path);
   };
   const reloadPreview = () => {
-    if (state.selected !== null) read(state.selected);
+    if (active !== null) read(active);
+  };
+  const copyActive = () => {
+    if (active === null || content === null || content.kind !== "text") return;
+    const path = active;
+    const text = content.page.text;
+    void (0, import_dsh_client_ui_primitives.writeClipboard)(text).then((ok) => {
+      if (!ok) return;
+      setCopied(path);
+      if (copyTimer.current !== null) clearTimeout(copyTimer.current);
+      copyTimer.current = setTimeout(() => {
+        setCopied(null);
+      }, 1e3);
+    });
+  };
+  const exportPdf = () => {
+    if (active === null || format === null || content === null || content.kind !== "text") return;
+    if (!canExportPdf(format)) return;
+    const name2 = pathParts(active).name;
+    if (format.kind === "html") {
+      printDocument(printableHtml(content.page.text, name2));
+      return;
+    }
+    const prose = proseRef.current;
+    if (prose === null) return;
+    printDocument(styledDocument(name2, prose.outerHTML));
+  };
+  const closeTab = (path) => {
+    actions.closeFile(path);
   };
   const root = pathParts(state.root);
-  const selected = state.selected === null ? null : pathParts(state.selected);
-  const preview = state.preview;
-  const format = state.selected === null ? null : previewFormatFor(state.selected);
-  const content = preview.kind === "ready" ? preview.content : null;
-  const fallbackFormat = { kind: "text", lang: void 0, mediaType: void 0 };
-  const body = bodyKindOf(
-    content,
-    format ?? fallbackFormat,
-    state.mode,
-    jsonDocument !== void 0
-  );
-  const jsonFallback = format?.kind === "json" && (state.mode ?? "rendered") === "rendered" && jsonDocument === void 0 && content !== null && content.kind === "text";
-  const meta = preview.kind !== "ready" ? null : preview.content.kind === "text" ? [
-    t("preview.lines", { lines: preview.content.page.lines }),
-    preview.content.page.bytes === void 0 ? null : (0, import_dsh_client_ui_primitives.fileSizeText)(preview.content.page.bytes)
-  ].filter((part) => part !== null).join(" \xB7 ") : preview.content.image.bytes === void 0 ? null : (0, import_dsh_client_ui_primitives.fileSizeText)(preview.content.image.bytes);
+  const labels = tabLabels(state.open);
+  const wrap = active === null ? true : state.wraps[active] ?? true;
+  const preview = active === null ? void 0 : state.previews[active];
+  const body = bodyKindOf(content, format ?? { kind: "text", lang: void 0, mediaType: void 0 }, active === null ? void 0 : state.modes[active], jsonDocument !== void 0);
+  const jsonFallback = format?.kind === "json" && (active === null ? "rendered" : state.modes[active] ?? "rendered") === "rendered" && jsonDocument === void 0 && content !== null && content.kind === "text";
+  const meta = content === null ? null : content.kind === "text" ? [
+    t("preview.lines", { lines: content.page.lines }),
+    content.page.bytes === void 0 ? null : (0, import_dsh_client_ui_primitives.fileSizeText)(content.page.bytes)
+  ].filter((part) => part !== null).join(" \xB7 ") : content.image.bytes === void 0 ? null : (0, import_dsh_client_ui_primitives.fileSizeText)(content.image.bytes);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
@@ -453,13 +617,63 @@ function FilesView({
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dsh-fe-scroll", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "dsh-fe-level", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Level, { path: state.root, tree }) }) })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dsh-fe-preview", "data-files-pane": "preview", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dsh-fe-head", children: [
-            selected === null ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dsh-fe-path dsh-fe-path-muted", children: t("preview.title") }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dsh-fe-path", title: state.selected ?? void 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dsh-fe-path-muted", children: selected.directory }),
-              selected.name
-            ] }) }),
-            meta !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dsh-fe-meta", "data-preview-meta": true, children: meta }),
-            format !== null && hasSourceToggle(format) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dsh-fe-head dsh-fe-tabhead", children: [
+            state.open.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dsh-fe-path dsh-fe-path-muted", children: t("preview.title") }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dsh-fe-tabs", role: "tablist", "aria-label": t("preview.tabs"), "data-preview-tabs": true, children: state.open.map((path) => {
+              const isActive = path === active;
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "dsh-fe-tab", role: "presentation", "data-preview-tab": path, "data-active": isActive || void 0, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  "button",
+                  {
+                    type: "button",
+                    role: "tab",
+                    "aria-selected": isActive,
+                    className: "dsh-fe-tab-label",
+                    title: path,
+                    ref: isActive ? activeTabRef : void 0,
+                    "data-preview-tab-open": path,
+                    onClick: () => {
+                      actions.activate(path);
+                    },
+                    onAuxClick: (event) => {
+                      if (event.button === 1) closeTab(path);
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dsh_client_ui_primitives.FileTypeIcon, { kind: (0, import_dsh_client_ui_primitives.classifyFileType)(path), size: 14 }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dsh-fe-tab-name", children: labels[path] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    className: "dsh-fe-tab-close",
+                    "aria-label": t("preview.close", { name: labels[path] }),
+                    title: t("preview.close", { name: labels[path] }),
+                    "data-preview-tab-close": path,
+                    onClick: () => {
+                      closeTab(path);
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", children: "\xD7" })
+                  }
+                )
+              ] }, path);
+            }) }),
+            active !== null && body === "source" && format?.lang !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dsh-fe-lang", "data-preview-lang-badge": true, children: format.lang }),
+            content !== null && meta !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dsh-fe-meta", "data-preview-meta": true, children: meta }),
+            content !== null && content.kind === "text" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "dsh-fe-tool",
+                "aria-label": t("preview.copy"),
+                title: t("preview.copy"),
+                "data-preview-copy": true,
+                onClick: copyActive,
+                children: copied === active ? t("preview.copied") : t("preview.copy")
+              }
+            ),
+            active !== null && format !== null && hasSourceToggle(format) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "button",
               {
                 type: "button",
@@ -469,27 +683,39 @@ function FilesView({
                 title: body === "source" ? t("preview.rendered") : t("preview.source"),
                 "data-preview-mode-toggle": true,
                 onClick: () => {
-                  actions.setMode(body === "source" ? "rendered" : "source");
+                  actions.setMode(active, body === "source" ? "rendered" : "source");
                 },
                 children: body === "source" ? t("preview.rendered") : t("preview.source")
               }
             ),
-            body === "source" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            active !== null && body === "rendered" && format !== null && canExportPdf(format) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "button",
               {
                 type: "button",
                 className: "dsh-fe-tool",
-                "aria-pressed": state.wrap,
-                "aria-label": state.wrap ? t("preview.nowrap") : t("preview.wrap"),
-                title: state.wrap ? t("preview.nowrap") : t("preview.wrap"),
+                "aria-label": t("preview.pdf"),
+                title: t("preview.pdf"),
+                "data-preview-pdf": true,
+                onClick: exportPdf,
+                children: t("preview.pdf")
+              }
+            ),
+            active !== null && body === "source" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "dsh-fe-tool",
+                "aria-pressed": wrap,
+                "aria-label": wrap ? t("preview.nowrap") : t("preview.wrap"),
+                title: wrap ? t("preview.nowrap") : t("preview.wrap"),
                 "data-preview-wrap-toggle": true,
                 onClick: () => {
-                  actions.setWrap(!state.wrap);
+                  actions.setWrap(active, !wrap);
                 },
-                children: state.wrap ? "\u21B5" : "\u2192"
+                children: wrap ? "\u21B5" : "\u2192"
               }
             ),
-            state.selected !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            active !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "button",
               {
                 type: "button",
@@ -502,21 +728,23 @@ function FilesView({
               }
             )
           ] }),
-          preview.kind === "loading" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dsh-fe-status", children: t("preview.loading") }),
-          preview.kind === "failed" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dsh-fe-scroll", "data-preview-state": "failed", children: [
+          active === null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dsh-fe-status", children: t("preview.placeholder") }),
+          active !== null && (preview === void 0 || preview.kind === "loading") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dsh-fe-status", children: t("preview.loading") }),
+          active !== null && preview?.kind === "failed" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dsh-fe-scroll", "data-preview-state": "failed", children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "dsh-fe-note dsh-fe-note-error", "data-preview-code": preview.failure.code, children: previewFailureLine(t, preview.failure) }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", className: "dsh-fe-tool", onClick: reloadPreview, children: t("preview.reload") })
           ] }),
-          state.selected === null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dsh-fe-status", children: t("preview.placeholder") }),
-          preview.kind === "ready" && content !== null && format !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          active !== null && content !== null && format !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             PreviewBody,
             {
-              state,
+              path: active,
               content,
               format,
               body,
               jsonDocument,
               jsonFallback,
+              wrap,
+              proseRef,
               t
             }
           )
@@ -529,16 +757,16 @@ function FilesView({
 // src/client/face.ts
 var PREVIEW_LINES = 2e3;
 function filesFace(remote, sessionId, signal, actions) {
-  const generations = /* @__PURE__ */ new Map();
-  let previewGeneration = 0;
+  const listingGenerations = /* @__PURE__ */ new Map();
+  const readGenerations = /* @__PURE__ */ new Map();
   return {
     list(path) {
       if (signal.aborted) return;
-      const generation = (generations.get(path) ?? 0) + 1;
-      generations.set(path, generation);
+      const generation = (listingGenerations.get(path) ?? 0) + 1;
+      listingGenerations.set(path, generation);
       actions.loading(path);
       void remote.workspaceFiles.list(sessionId, path, signal).then((result) => {
-        if (signal.aborted || generations.get(path) !== generation) return;
+        if (signal.aborted || listingGenerations.get(path) !== generation) return;
         if (result.ok) {
           actions.loaded(path, {
             entries: result.value.entries,
@@ -551,12 +779,12 @@ function filesFace(remote, sessionId, signal, actions) {
     },
     read(path) {
       if (signal.aborted) return;
-      previewGeneration += 1;
-      const generation = previewGeneration;
+      const generation = (readGenerations.get(path) ?? 0) + 1;
+      readGenerations.set(path, generation);
       const format = previewFormatFor(path);
-      actions.selecting(path);
+      actions.reading(path);
       const settle = (write) => {
-        if (signal.aborted || previewGeneration !== generation) return;
+        if (signal.aborted || readGenerations.get(path) !== generation) return;
         write();
       };
       if (format.kind === "image") {
@@ -631,7 +859,13 @@ var zh = {
   "json.expandNode": "\u5C55\u5F00",
   "json.copyTitle": "{action}",
   "preview.title": "\u9884\u89C8",
+  "preview.tabs": "\u6253\u5F00\u7684\u6587\u4EF6",
+  "preview.close": "\u5173\u95ED {name}",
   "preview.loading": "\u6B63\u5728\u8BFB\u53D6\u2026",
+  "preview.copy": "\u590D\u5236",
+  "preview.copied": "\u5DF2\u590D\u5236",
+  "preview.pdf": "\u5BFC\u51FA PDF",
+  "preview.htmlFrame": "HTML \u9884\u89C8",
   "preview.reload": "\u91CD\u65B0\u8BFB\u53D6",
   "preview.truncated": "\u6587\u4EF6\u8F83\u957F\uFF0C\u53EA\u663E\u793A\u524D {lines} \u884C\u3002",
   "preview.wrap": "\u81EA\u52A8\u6362\u884C",
@@ -676,7 +910,13 @@ var en = {
   "json.expandNode": "Expand",
   "json.copyTitle": "{action}",
   "preview.title": "Preview",
+  "preview.tabs": "Open files",
+  "preview.close": "Close {name}",
   "preview.loading": "Reading\u2026",
+  "preview.copy": "Copy",
+  "preview.copied": "Copied",
+  "preview.pdf": "Export PDF",
+  "preview.htmlFrame": "HTML preview",
   "preview.reload": "Reload",
   "preview.truncated": "This file is long, showing the first {lines} lines.",
   "preview.wrap": "Wrap long lines",
@@ -691,27 +931,36 @@ var en = {
 
 // src/client/store.ts
 var import_dsh_client_store = require("@deepseek-ai/dsh-client-store");
+var RETAINED_PREVIEWS = 5;
 function emptyState() {
   return {
     root: null,
     levels: {},
     expanded: [],
-    selected: null,
-    preview: { kind: "idle" },
-    wrap: true,
-    mode: null
+    open: [],
+    active: null,
+    previews: {},
+    retained: [],
+    modes: {},
+    wraps: {}
   };
 }
+function retain(d, path) {
+  d.retained = [path, ...d.retained.filter((candidate) => candidate !== path)];
+  const keep = /* @__PURE__ */ new Set([...d.active === null ? [] : [d.active], ...d.retained.slice(0, RETAINED_PREVIEWS)]);
+  for (const candidate of Object.keys(d.previews)) {
+    if (!keep.has(candidate)) delete d.previews[candidate];
+  }
+  d.retained = d.retained.filter((candidate) => keep.has(candidate));
+}
 function createFilesStore() {
   return (0, import_dsh_client_store.defineStore)({
     init: emptyState,
     actions: {
       start: (d, root) => {
+        Object.assign(d, emptyState());
         d.root = root;
-        d.levels = {};
         d.expanded = [root];
-        d.selected = null;
-        d.preview = { kind: "idle" };
       },
       loading: (d, path) => {
         d.levels[path] = { kind: "loading" };
@@ -730,28 +979,48 @@ function createFilesStore() {
       reset: (d) => {
         d.levels = {};
       },
-      selecting: (d, path) => {
-        d.selected = path;
-        d.preview = { kind: "loading", path };
-        d.mode = null;
+      openFile: (d, path) => {
+        if (!d.open.includes(path)) d.open.push(path);
+        d.active = path;
+      },
+      activate: (d, path) => {
+        if (!d.open.includes(path)) return;
+        d.active = path;
+        retain(d, path);
+      },
+      closeFile: (d, path) => {
+        const at = d.open.indexOf(path);
+        if (at < 0) return;
+        d.open.splice(at, 1);
+        delete d.previews[path];
+        delete d.modes[path];
+        delete d.wraps[path];
+        d.retained = d.retained.filter((candidate) => candidate !== path);
+        if (d.active !== path) return;
+        d.active = d.open[at] ?? d.open[at - 1] ?? null;
+      },
+      reading: (d, path) => {
+        if (!d.open.includes(path)) return;
+        d.previews[path] = { kind: "loading" };
       },
       previewLoaded: (d, path, content) => {
-        if (d.selected !== path) return;
-        d.preview = { kind: "ready", path, content };
+        if (!d.open.includes(path)) return;
+        d.previews[path] = { kind: "ready", content };
+        retain(d, path);
       },
       previewFailed: (d, path, failure) => {
-        if (d.selected !== path) return;
-        d.preview = { kind: "failed", path, failure };
+        if (!d.open.includes(path)) return;
+        d.previews[path] = { kind: "failed", failure };
       },
-      clearPreview: (d) => {
-        d.selected = null;
-        d.preview = { kind: "idle" };
+      dropPreview: (d, path) => {
+        delete d.previews[path];
+        d.retained = d.retained.filter((candidate) => candidate !== path);
       },
-      setWrap: (d, wrap) => {
-        d.wrap = wrap;
+      setWrap: (d, path, wrap) => {
+        d.wraps[path] = wrap;
       },
-      setMode: (d, mode) => {
-        d.mode = mode;
+      setMode: (d, path, mode) => {
+        d.modes[path] = mode;
       }
     }
   });
@@ -809,9 +1078,26 @@ var CSS = `
   box-sizing: border-box;
   height: 38px;
   padding: 0 6px 0 14px;
+  /* The row is filled rather than transparent, so the pane's chrome reads as
+     chrome instead of as the first line of the file. The palette's layer tokens
+     are all pure white in light mode (bg-base, bg-layer-1/2/3 share a value), so
+     the only token that separates a surface from the content in BOTH themes is
+     this wash: 4% ink in light, 8% in dark. See the note in CONTRIBUTING.md. */
+  background: var(--dsw-alias-bg-skeleton);
   border-bottom: 0.5px solid var(--dsw-alias-border-l3);
 }
 
+/* A grammar badge for the source body, which is where the language used to be
+   named: the code block's own banner is hidden in this pane so there is exactly
+   one copy control, in this row. */
+.dsh-fe-lang {
+  flex: 0 0 auto;
+  color: var(--dsw-alias-label-tertiary);
+  font-family: var(--ds-font-family-code, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 11px;
+  white-space: nowrap;
+}
+
 .dsh-fe-path {
   flex: 1 1 auto;
   min-width: 0;
@@ -974,7 +1260,15 @@ var CSS = `
   margin: 0;
 }
 
-.dsh-fe-source .md-code-block > [data-code-block-banner] > div:first-child:empty {
+/* One copy control per pane, in the header row above: the code block's own
+   banner would be a second, inside the scrollport, and it scrolls away. The
+   grammar it named is shown as the header's badge instead. Markdown fences keep
+   their banners \u2014 there, a banner belongs to the fence, not to the file.
+
+   The banner sits inside a sticky wrapper, hence the descendant match plus the
+   :has rule that takes the wrapper out with it. */
+.dsh-fe-source [data-code-block-banner],
+.dsh-fe-source .md-code-block > div:has(> [data-code-block-banner]) {
   display: none;
 }
 
@@ -999,6 +1293,143 @@ var CSS = `
   overflow-wrap: break-word;
 }
 
+/* The preview pane's header row carries the open tabs and, at its end, the
+   active tab's controls. The tabs take the room that is left and scroll; the
+   controls never shrink away. */
+.dsh-fe-tabhead {
+  gap: 8px;
+  padding: 0 6px 0 8px;
+}
+
+.dsh-fe-tabs {
+  display: flex;
+  flex: 1 1 auto;
+  gap: 2px;
+  align-items: stretch;
+  min-width: 90px;
+  height: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+}
+
+.dsh-fe-tabs::-webkit-scrollbar {
+  height: 0;
+}
+
+.dsh-fe-tab {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  min-width: 0;
+  max-width: 220px;
+  border-radius: 8px;
+}
+
+.dsh-fe-tab:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.dsh-fe-tab[data-active] {
+  background: var(--dsw-alias-interactive-bg-active);
+}
+
+.dsh-fe-tab-label {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  min-width: 0;
+  padding: 5px 4px 5px 8px;
+  color: var(--dsw-alias-label-secondary);
+  font: inherit;
+  font-size: 12px;
+  line-height: 1;
+  background: transparent;
+  border: 0;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.dsh-fe-tab[data-active] .dsh-fe-tab-label {
+  color: var(--dsw-alias-label-primary);
+}
+
+.dsh-fe-tab-name {
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* The close control appears for the tab under the pointer and for the active
+   tab, so a full strip stays readable. */
+.dsh-fe-tab-close {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  margin-right: 5px;
+  padding: 0;
+  color: var(--dsw-alias-label-tertiary);
+  font: inherit;
+  font-size: 14px;
+  line-height: 1;
+  background: transparent;
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  opacity: 0;
+}
+
+.dsh-fe-tab:hover .dsh-fe-tab-close,
+.dsh-fe-tab[data-active] .dsh-fe-tab-close,
+.dsh-fe-tab-close:focus-visible {
+  opacity: 1;
+}
+
+.dsh-fe-tab-close:hover {
+  color: var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+/* A file already open in a tab keeps a quiet marker in the tree, so the reader
+   can see where the strip came from without it competing with the active row. */
+.dsh-fe-open-dot {
+  flex: 0 0 auto;
+  width: 5px;
+  height: 5px;
+  margin-left: auto;
+  background: var(--dsw-alias-brand-primary);
+  border-radius: 50%;
+  opacity: 0.6;
+}
+
+/* An HTML file is drawn by the browser, in a frame that fills the pane. The
+   white canvas is the page's own, not this pane's: an unstyled document still
+   reads as a document rather than as a hole in the app.
+
+   The host takes its height from the scrollport's content box, so the frame ends
+   exactly where the pane's bottom inset begins and the scrollport itself never
+   scrolls \u2014 a page scrolls inside its own frame. */
+.dsh-fe-html {
+  display: flex;
+  height: 100%;
+  min-height: 0;
+  min-width: 0;
+}
+
+.dsh-fe-html-frame {
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  border: 0;
+  background: #fff;
+}
+
 /* Rendered Markdown: prose lays out in normal white space, with the pane's
    insets and no monospace inheritance from the source view. */
 .dsh-fe-prose {