npm - @openhands/agent-canvas - Versions diffs - 1.14.0 → 1.16.0 - Mend

@openhands/agent-canvas 1.14.0 → 1.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1855) hide show

package/dist/components/features/diff-viewer/uncommitted-changes-row.js ADDED Viewed

@@ -0,0 +1,51 @@
+import { useTranslation as e } from "../../../node_modules/react-i18next/dist/es/useTranslation.js";
+import { I18nKey as t } from "../../../i18n/declaration.js";
+import { ChevronDown as n } from "../../../node_modules/lucide-react/dist/esm/icons/chevron-down.js";
+import { ChevronRight as r } from "../../../node_modules/lucide-react/dist/esm/icons/chevron-right.js";
+import { AccordionPanel as i } from "./accordion-panel.js";
+import { DiffChangeList as a } from "./diff-change-list.js";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/features/diff-viewer/uncommitted-changes-row.tsx
+var c = "-", l = "DIFF_VIEWER$UNCOMMITTED_FILE_COUNT";
+function u({ changes: u, isExpanded: d, onToggle: f }) {
+	let { t: p } = e("openhands");
+	return /* @__PURE__ */ s("div", {
+		"data-testid": "uncommitted-changes-row",
+		className: "w-full flex flex-col",
+		children: [/* @__PURE__ */ s("button", {
+			type: "button",
+			onClick: f,
+			"aria-expanded": d,
+			"data-testid": "uncommitted-changes-row-toggle",
+			className: "w-full flex h-10 items-center gap-2 px-3 border-b border-[var(--oh-border)] text-sm text-content text-left hover:cursor-pointer",
+			children: [
+				/* @__PURE__ */ o("code", {
+					className: "w-[7ch] flex-shrink-0 text-center font-mono text-xs text-[var(--oh-muted)]",
+					children: c
+				}),
+				/* @__PURE__ */ o("strong", {
+					className: "flex-1 truncate font-medium",
+					children: p(t.DIFF_VIEWER$UNCOMMITTED)
+				}),
+				u.length > 0 ? /* @__PURE__ */ o("span", {
+					"data-testid": "uncommitted-changes-count",
+					className: "text-xs text-[var(--oh-muted)] tabular-nums flex-shrink-0",
+					children: p(l, { count: u.length })
+				}) : null,
+				o(d ? n : r, {
+					className: "w-4 h-4 shrink-0 text-[var(--oh-muted)]",
+					"aria-hidden": !0
+				})
+			]
+		}), /* @__PURE__ */ o(i, {
+			open: d,
+			testId: "uncommitted-changes-row-content",
+			className: "w-full flex flex-col pl-6",
+			children: u.length > 0 ? /* @__PURE__ */ o(a, { changes: u }) : null
+		})]
+	});
+}
+//#endregion
+export { u as UncommittedChangesRow };
+//# sourceMappingURL=uncommitted-changes-row.js.map

package/dist/components/features/diff-viewer/uncommitted-changes-row.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"uncommitted-changes-row.js","names":[],"sources":["../../../../src/components/features/diff-viewer/uncommitted-changes-row.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { ChevronDown, ChevronRight } from \"lucide-react\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { AccordionPanel } from \"./accordion-panel\";\nimport { DiffChangeList, type DiffChangeListItem } from \"./diff-change-list\";\n\nconst EMPTY_COMMIT_SHA_PLACEHOLDER = \"-\";\n/** Base key for i18next pluralization (`_one` / `_other` suffixes). */\nconst UNCOMMITTED_FILE_COUNT_I18N_KEY = \"DIFF_VIEWER$UNCOMMITTED_FILE_COUNT\";\n\nexport interface UncommittedChangesRowProps {\n changes: DiffChangeListItem[];\n isExpanded: boolean;\n onToggle: () => void;\n}\n\n/**\n * Top accordion row in the Commits pane for working-tree changes that\n * are not yet associated with a commit. Same single-open accordion\n * contract as CommitRow.\n */\nexport function UncommittedChangesRow({\n changes,\n isExpanded,\n onToggle,\n}: UncommittedChangesRowProps) {\n const { t } = useTranslation(\"openhands\");\n\n return (\n <div data-testid=\"uncommitted-changes-row\" className=\"w-full flex flex-col\">\n <button\n type=\"button\"\n onClick={onToggle}\n aria-expanded={isExpanded}\n data-testid=\"uncommitted-changes-row-toggle\"\n className=\"w-full flex h-10 items-center gap-2 px-3 border-b border-[var(--oh-border)] text-sm text-content text-left hover:cursor-pointer\"\n >\n <code className=\"w-[7ch] flex-shrink-0 text-center font-mono text-xs text-[var(--oh-muted)]\">\n {EMPTY_COMMIT_SHA_PLACEHOLDER}\n </code>\n <strong className=\"flex-1 truncate font-medium\">\n {t(I18nKey.DIFF_VIEWER$UNCOMMITTED)}\n </strong>\n {changes.length > 0 ? (\n <span\n data-testid=\"uncommitted-changes-count\"\n className=\"text-xs text-[var(--oh-muted)] tabular-nums flex-shrink-0\"\n >\n {t(UNCOMMITTED_FILE_COUNT_I18N_KEY, { count: changes.length })}\n </span>\n ) : null}\n {isExpanded ? (\n <ChevronDown\n className=\"w-4 h-4 shrink-0 text-[var(--oh-muted)]\"\n aria-hidden\n />\n ) : (\n <ChevronRight\n className=\"w-4 h-4 shrink-0 text-[var(--oh-muted)]\"\n aria-hidden\n />\n )}\n </button>\n\n <AccordionPanel\n open={isExpanded}\n testId=\"uncommitted-changes-row-content\"\n className=\"w-full flex flex-col pl-6\"\n >\n {changes.length > 0 ? <DiffChangeList changes={changes} /> : null}\n </AccordionPanel>\n </div>\n );\n}\n"],"mappings":";;;;;;;;AAMA,IAAM,IAA+B,KAE/B,IAAkC;AAaxC,SAAgB,EAAsB,EACpC,YACA,eACA,eAC6B;CAC7B,IAAM,EAAE,SAAM,EAAe,WAAW;CAExC,OACE,kBAAC,OAAD;EAAK,eAAY;EAA0B,WAAU;YAArD,CACE,kBAAC,UAAD;GACE,MAAK;GACL,SAAS;GACT,iBAAe;GACf,eAAY;GACZ,WAAU;aALZ;IAOE,kBAAC,QAAD;KAAM,WAAU;eACb;IACG,CAAA;IACN,kBAAC,UAAD;KAAQ,WAAU;eACf,EAAE,EAAQ,uBAAuB;IAC5B,CAAA;IACP,EAAQ,SAAS,IAChB,kBAAC,QAAD;KACE,eAAY;KACZ,WAAU;eAET,EAAE,GAAiC,EAAE,OAAO,EAAQ,OAAO,CAAC;IACzD,CAAA,IACJ;IAEF,EADD,IACE,IAKA,GALD;KACE,WAAU;KACV,eAAA;IACD,CAKA;GAEG;MAER,kBAAC,GAAD;GACE,MAAM;GACN,QAAO;GACP,WAAU;aAET,EAAQ,SAAS,IAAI,kBAAC,GAAD,EAAyB,WAAU,CAAA,IAAI;EAC/C,CAAA,CACb;;AAET"}

package/dist/components/features/files-tab/file-content-viewer.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),t=require("../../../i18n/declaration.cjs"),n=require("../markdown/markdown-renderer.cjs"),r=require("../../../utils/is-markdown-file-path.cjs"),i=require("../../../stores/use-workspace-mutation-counter.cjs"),a=require("../../../hooks/query/use-workspace-file-content.cjs"),o=require("./highlighted-source-view.cjs");let s=require("react/jsx-runtime");var c=new Set([`html`,`htm`,`svg`]),l={pptx:`PowerPoint`,ppt:`PowerPoint`,docx:`Word`,doc:`Word`,xlsx:`Excel`,xls:`Excel`};function u(e){let t=e.lastIndexOf(`.`);return t===-1?``:e.slice(t+1).toLowerCase()}function d({path:n}){let{t:r}=e.useTranslation(`openhands`),i=l[u(n)];return(0,s.jsx)(`div`,{className:`flex h-full w-full items-center justify-center text-sm text-[var(--oh-muted)]`,"data-testid":i?`file-content-viewer-unsupported-document`:`file-content-viewer-binary-fallback`,children:i?r(t.I18nKey.FILES$UNSUPPORTED_DOCUMENT,{type:i}):r(t.I18nKey.FILES$BINARY_FALLBACK)})}function f({path:l,viewMode:f}){let{t:p}=e.useTranslation(`openhands`),m=a.useWorkspaceFileContent(l),h=i.useWorkspaceMutationCounter(e=>e.count);if(m.isLoading)return(0,s.jsx)(`div`,{className:`flex h-full w-full items-center justify-center text-sm text-[var(--oh-muted)]`,children:p(t.I18nKey.FILES$LOADING_FILES)});if(m.isError||!m.data)return(0,s.jsx)(`div`,{className:`flex h-full w-full items-center justify-center text-sm text-[var(--oh-muted)]`,"data-testid":`file-content-viewer-error`,children:m.error?.message??p(t.I18nKey.FILES$LOAD_ERROR)});let{kind:g,text:_,staticUrl:v,mimeType:y}=m.data,b=i.withWorkspaceCacheBuster(v,h);return f===`plain`?g===`text`&&_!==null?(0,s.jsx)(o.HighlightedSourceView,{path:l,text:_,mimeType:y??void 0}):(0,s.jsx)(d,{path:l}):g===`image`?(0,s.jsx)(`div`,{className:`flex h-full w-full items-center justify-center bg-[var(--oh-surface)] p-4`,"data-testid":`file-content-viewer-image`,children:(0,s.jsx)(`img`,{src:b,alt:l,className:`max-h-full max-w-full object-contain`})}):g===`pdf`?(0,s.jsx)(`iframe`,{title:l,src:b,sandbox:`allow-same-origin`,"data-testid":`file-content-viewer-iframe`,className:`h-full w-full bg-white`}):g===`binary`?(0,s.jsx)(d,{path:l}):y===`text/html`||c.has(u(l))?(0,s.jsx)(`iframe`,{title:l,src:b,sandbox:`allow-same-origin`,"data-testid":`file-content-viewer-iframe`,className:`h-full w-full bg-white`}):g===`text`&&r.isMarkdownFilePath(l)?(0,s.jsx)(`div`,{"data-testid":`file-content-viewer-markdown`,className:`h-full w-full overflow-auto bg-[var(--oh-surface)] text-white custom-scrollbar-always [--oh-scroll-fade-from:var(--oh-surface)]`,children:(0,s.jsx)(`div`,{className:`prose prose-sm prose-invert max-w-none p-6 [--tw-prose-body:#fff] [--tw-prose-bold:#fff] [--tw-prose-headings:#fff] [--tw-prose-lead:#fff] [--tw-prose-counters:#fff] [--tw-prose-quotes:#fff] [--tw-prose-quote-borders:var(--oh-border-subtle)] [--tw-prose-bullets:var(--oh-muted)] [--tw-prose-hr:var(--oh-border-subtle)] [--tw-prose-captions:var(--oh-muted)] [--tw-prose-kbd:#fff]`,children:(0,s.jsx)(n.MarkdownRenderer,{content:_??``,includeStandard:!0,includeHeadings:!0})})}):g===`text`&&_!==null?(0,s.jsx)(o.HighlightedSourceView,{path:l,text:_,mimeType:y??void 0}):(0,s.jsx)(d,{path:l})}exports.FileContentViewer=f;
+require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),t=require("../../../i18n/declaration.cjs"),n=require("../markdown/markdown-renderer.cjs"),r=require("../../../stores/use-workspace-mutation-counter.cjs"),i=require("../../../utils/is-markdown-file-path.cjs"),a=require("../../../hooks/query/use-workspace-file-content.cjs"),o=require("./highlighted-source-view.cjs");let s=require("react/jsx-runtime");var c=new Set([`html`,`htm`,`svg`]),l={pptx:`PowerPoint`,ppt:`PowerPoint`,docx:`Word`,doc:`Word`,xlsx:`Excel`,xls:`Excel`};function u(e){let t=e.lastIndexOf(`.`);return t===-1?``:e.slice(t+1).toLowerCase()}function d({path:n}){let{t:r}=e.useTranslation(`openhands`),i=l[u(n)];return(0,s.jsx)(`div`,{className:`flex h-full w-full items-center justify-center text-sm text-[var(--oh-muted)]`,"data-testid":i?`file-content-viewer-unsupported-document`:`file-content-viewer-binary-fallback`,children:i?r(t.I18nKey.FILES$UNSUPPORTED_DOCUMENT,{type:i}):r(t.I18nKey.FILES$BINARY_FALLBACK)})}function f({path:l,viewMode:f}){let{t:p}=e.useTranslation(`openhands`),m=a.useWorkspaceFileContent(l),h=r.useWorkspaceMutationCounter(e=>e.count);if(m.isLoading)return(0,s.jsx)(`div`,{className:`flex h-full w-full items-center justify-center text-sm text-[var(--oh-muted)]`,children:p(t.I18nKey.FILES$LOADING_FILES)});if(m.isError||!m.data)return(0,s.jsx)(`div`,{className:`flex h-full w-full items-center justify-center text-sm text-[var(--oh-muted)]`,"data-testid":`file-content-viewer-error`,children:m.error?.message??p(t.I18nKey.FILES$LOAD_ERROR)});let{kind:g,text:_,staticUrl:v,mimeType:y}=m.data,b=r.withWorkspaceCacheBuster(v,h);return f===`plain`?g===`text`&&_!==null?(0,s.jsx)(o.HighlightedSourceView,{path:l,text:_,mimeType:y??void 0}):(0,s.jsx)(d,{path:l}):g===`image`?(0,s.jsx)(`div`,{className:`flex h-full w-full items-center justify-center bg-[var(--oh-surface)] p-4`,"data-testid":`file-content-viewer-image`,children:(0,s.jsx)(`img`,{src:b,alt:l,className:`max-h-full max-w-full object-contain`})}):g===`pdf`?(0,s.jsx)(`iframe`,{title:l,src:b,"data-testid":`file-content-viewer-iframe`,className:`h-full w-full bg-white`}):g===`binary`?(0,s.jsx)(d,{path:l}):y===`text/html`||c.has(u(l))?(0,s.jsx)(`iframe`,{title:l,src:b,sandbox:`allow-same-origin`,"data-testid":`file-content-viewer-iframe`,className:`h-full w-full bg-white`}):g===`text`&&i.isMarkdownFilePath(l)?(0,s.jsx)(`div`,{"data-testid":`file-content-viewer-markdown`,className:`h-full w-full overflow-auto bg-[var(--oh-surface)] text-white custom-scrollbar-always [--oh-scroll-fade-from:var(--oh-surface)]`,children:(0,s.jsx)(`div`,{className:`prose prose-sm prose-invert max-w-none p-6 [--tw-prose-body:#fff] [--tw-prose-bold:#fff] [--tw-prose-headings:#fff] [--tw-prose-lead:#fff] [--tw-prose-counters:#fff] [--tw-prose-quotes:#fff] [--tw-prose-quote-borders:var(--oh-border-subtle)] [--tw-prose-bullets:var(--oh-muted)] [--tw-prose-hr:var(--oh-border-subtle)] [--tw-prose-captions:var(--oh-muted)] [--tw-prose-kbd:#fff]`,children:(0,s.jsx)(n.MarkdownRenderer,{content:_??``,includeStandard:!0,includeHeadings:!0})})}):g===`text`&&_!==null?(0,s.jsx)(o.HighlightedSourceView,{path:l,text:_,mimeType:y??void 0}):(0,s.jsx)(d,{path:l})}exports.FileContentViewer=f;
 //# sourceMappingURL=file-content-viewer.cjs.map

package/dist/components/features/files-tab/file-content-viewer.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"file-content-viewer.cjs","names":[],"sources":["../../../../src/components/features/files-tab/file-content-viewer.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\n\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useWorkspaceFileContent } from \"#/hooks/query/use-workspace-file-content\";\nimport {\n useWorkspaceMutationCounter,\n withWorkspaceCacheBuster,\n} from \"#/stores/use-workspace-mutation-counter\";\nimport { MarkdownRenderer } from \"#/components/features/markdown/markdown-renderer\";\nimport { isMarkdownFilePath } from \"#/utils/is-markdown-file-path\";\nimport { HighlightedSourceView } from \"./highlighted-source-view\";\nimport type { ViewMode } from \"./view-mode\";\n\ninterface FileContentViewerProps {\n path: string;\n viewMode: ViewMode;\n}\n\nconst HTML_LIKE_EXTS = new Set([\"html\", \"htm\", \"svg\"]);\n\n// Office/document formats we can't preview inline. The label doubles as the\n// allow-list (a present entry => Office doc) and feeds a clear, format-named\n// \"no preview\" message instead of the generic binary fallback.\nconst OFFICE_DOCUMENT_LABELS: Record<string, string> = {\n pptx: \"PowerPoint\",\n ppt: \"PowerPoint\",\n docx: \"Word\",\n doc: \"Word\",\n xlsx: \"Excel\",\n xls: \"Excel\",\n};\n\nfunction getExtension(path: string): string {\n const idx = path.lastIndexOf(\".\");\n return idx === -1 ? \"\" : path.slice(idx + 1).toLowerCase();\n}\n\n/*\n Fallback shown when a file's bytes aren't previewable. Office documents\n * (.pptx / .docx / .xlsx …) get a clear, format-named message; every other\n * binary keeps the generic \"binary file\" string so the pane is never blank.\n /\nfunction UnpreviewableFallback({ path }: { path: string }) {\n const { t } = useTranslation(\"openhands\");\n const documentLabel = OFFICE_DOCUMENT_LABELS[getExtension(path)];\n return (\n <div\n className=\"flex h-full w-full items-center justify-center text-sm text-[var(--oh-muted)]\"\n data-testid={\n documentLabel\n ? \"file-content-viewer-unsupported-document\"\n : \"file-content-viewer-binary-fallback\"\n }\n >\n {documentLabel\n ? t(I18nKey.FILES$UNSUPPORTED_DOCUMENT, { type: documentLabel })\n : t(I18nKey.FILES$BINARY_FALLBACK)}\n </div>\n );\n}\n\n/\n Renders the contents of a single workspace file. In `rich` mode we point\n * an iframe / <img> straight at the agent server's static workspace\n * fileserver for HTML / SVG / images / PDFs, so relative asset references\n * load naturally. In `plain` mode we always show the raw bytes as text (or\n * a fallback message for binaries).\n /\nexport function FileContentViewer({ path, viewMode }: FileContentViewerProps) {\n const { t } = useTranslation(\"openhands\");\n const query = useWorkspaceFileContent(path);\n // Subscribe to the workspace mutation counter so the iframe / <img> src\n // changes after every agent-side edit, forcing a fresh fetch even when\n // the path* hasn't moved (e.g. agent rewrote `style.css` referenced by\n // the currently-displayed `index.html`).\n const mutationCounter = useWorkspaceMutationCounter((state) => state.count);\n\n if (query.isLoading) {\n return (\n <div className=\"flex h-full w-full items-center justify-center text-sm text-[var(--oh-muted)]\">\n {t(I18nKey.FILES$LOADING_FILES)}\n </div>\n );\n }\n\n if (query.isError \|\| !query.data) {\n // Show a load-error message rather than the binary-fallback string —\n // these are completely different failure modes (couldn't even fetch\n // the file vs. fetched fine but the bytes aren't previewable) and\n // mixing them up hides real backend failures behind a misleading\n // \"Binary file\" label. Prefer the underlying error's own message when\n // we have one; fall back to the generic translated string otherwise.\n return (\n <div\n className=\"flex h-full w-full items-center justify-center text-sm text-[var(--oh-muted)]\"\n data-testid=\"file-content-viewer-error\"\n >\n {(query.error as Error \| undefined)?.message ??\n t(I18nKey.FILES$LOAD_ERROR)}\n </div>\n );\n }\n\n const { kind, text, staticUrl, mimeType } = query.data;\n const bustedStaticUrl = withWorkspaceCacheBuster(staticUrl, mutationCounter);\n\n // ----- Plain mode: raw source bytes, syntax-highlighted when we can\n // recognize the grammar (falls through to a `<pre>` otherwise). This\n // includes \"plain\" view of markdown / HTML, where the point is to see\n // the markup behind the rich preview.\n if (viewMode === \"plain\") {\n if (kind === \"text\" && text !== null) {\n return (\n <HighlightedSourceView\n path={path}\n text={text}\n mimeType={mimeType ?? undefined}\n />\n );\n }\n return <UnpreviewableFallback path={path} />;\n }\n\n // ----- Rich mode: render HTML, markdown, images, PDFs from staticUrl. ----\n if (kind === \"image\") {\n return (\n <div\n className=\"flex h-full w-full items-center justify-center bg-[var(--oh-surface)] p-4\"\n data-testid=\"file-content-viewer-image\"\n >\n <img\n src={bustedStaticUrl}\n alt={path}\n className=\"max-h-full max-w-full object-contain\"\n />\n </div>\n );\n }\n\n if (kind === \"pdf\") {\n // PDFs can carry embedded JavaScript (AcroForm, OpenAction…). Even\n // though `staticUrl` lives on the agent server origin, the PDF\n // viewer's scripting capability isn't worth the risk for a file\n // preview, so we sandbox the iframe. `allow-same-origin` lets the\n // browser's built-in PDF viewer load the underlying bytes without\n // tripping cross-origin restrictions; we omit `allow-scripts`\n // because no PDF preview we care about needs to run JS in the\n // parent's origin.\n return (\n <iframe\n title={path}\n src={bustedStaticUrl}\n sandbox=\"allow-same-origin\"\n data-testid=\"file-content-viewer-iframe\"\n className=\"h-full w-full bg-white\"\n />\n );\n }\n\n if (kind === \"binary\") {\n return <UnpreviewableFallback path={path} />;\n }\n\n // Text-like content.\n if (mimeType === \"text/html\" \|\| HTML_LIKE_EXTS.has(getExtension(path))) {\n // Sandbox the preview iframe: `allow-same-origin` keeps the frame on\n // the workspace fileserver's origin so relative `<link href=\"…\">`,\n // `<img src=\"…\">`, etc. continue to resolve, while the absence of\n // `allow-scripts` means any `<script>` (or `onerror=…`, inline event\n // handler, …) inside the previewed file is inert. This is exactly\n // the safe-preview posture we want — users can look at their HTML\n // without it executing in the canvas's context.\n return (\n <iframe\n title={path}\n src={bustedStaticUrl}\n sandbox=\"allow-same-origin\"\n data-testid=\"file-content-viewer-iframe\"\n className=\"h-full w-full bg-white\"\n />\n );\n }\n\n if (kind === \"text\" && isMarkdownFilePath(path)) {\n // Match the right-pane chrome color so the rich-rendered markdown\n // blends with the surrounding files tab instead of painting a stark\n // white card. `--oh-scroll-fade-from` keeps wide-table edge fades on\n // the same surface (otherwise they default to `--oh-color-base`).\n // We use `prose-invert` (typography plugin's dark-theme variant) and\n // then layer arbitrary CSS-variable overrides on top to pin body /\n // bold / quote text to pure white — the user specifically asked for\n // every text element (not just headings) to read as white. The custom\n // heading components in `markdown/headings.tsx` already hard-code\n // `text-white`, so headers stay white through this change.\n return (\n <div\n data-testid=\"file-content-viewer-markdown\"\n className=\"h-full w-full overflow-auto bg-[var(--oh-surface)] text-white custom-scrollbar-always [--oh-scroll-fade-from:var(--oh-surface)]\"\n >\n <div className=\"prose prose-sm prose-invert max-w-none p-6 [--tw-prose-body:#fff] [--tw-prose-bold:#fff] [--tw-prose-headings:#fff] [--tw-prose-lead:#fff] [--tw-prose-counters:#fff] [--tw-prose-quotes:#fff] [--tw-prose-quote-borders:var(--oh-border-subtle)] [--tw-prose-bullets:var(--oh-muted)] [--tw-prose-hr:var(--oh-border-subtle)] [--tw-prose-captions:var(--oh-muted)] [--tw-prose-kbd:#fff]\">\n <MarkdownRenderer\n content={text ?? \"\"}\n includeStandard\n includeHeadings\n />\n </div>\n </div>\n );\n }\n\n // Rich mode for actual source code (.ts, .py, .yaml, .css, …): there\n // is no other \"rich\" rendering to fall back to, so highlighted source\n // IS the rich view. Identical to the plain-mode treatment — keeping\n // both branches reuse `HighlightedSourceView` means the toggle has the\n // same visual identity for source files in both modes (which is the\n // honest answer: source IS rendered code).\n if (kind === \"text\" && text !== null) {\n return (\n <HighlightedSourceView\n path={path}\n text={text}\n mimeType={mimeType ?? undefined}\n />\n );\n }\n\n // Truly unknown / empty payload — show a fallback so the pane is never\n // blank.\n return <UnpreviewableFallback path={path} />;\n}\n"],"mappings":"oeAkBA,IAAM,EAAiB,IAAI,IAAI,CAAC,OAAQ,MAAO,KAAK,CAAC,EAK/C,EAAiD,CACrD,KAAM,aACN,IAAK,aACL,KAAM,OACN,IAAK,OACL,KAAM,QACN,IAAK,OACP,EAEA,SAAS,EAAa,EAAsB,CAC1C,IAAM,EAAM,EAAK,YAAY,GAAG,EAChC,OAAO,IAAQ,GAAK,GAAK,EAAK,MAAM,EAAM,CAAC,EAAE,YAAY,CAC3D,CAOA,SAAS,EAAsB,CAAE,QAA0B,CACzD,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAClC,EAAgB,EAAuB,EAAa,CAAI,GAC9D,OACE,EAAA,EAAA,KAAC,MAAD,CACE,UAAU,gFACV,cACE,EACI,2CACA,+CAGL,EACG,EAAE,EAAA,QAAQ,2BAA4B,CAAE,KAAM,CAAc,CAAC,EAC7D,EAAE,EAAA,QAAQ,qBAAqB,CAChC,CAAA,CAET,CASA,SAAgB,EAAkB,CAAE,OAAM,YAAoC,CAC5E,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAClC,EAAQ,EAAA,wBAAwB,CAAI,EAKpC,EAAkB,EAAA,4BAA6B,GAAU,EAAM,KAAK,EAE1E,GAAI,EAAM,UACR,OACE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,yFACZ,EAAE,EAAA,QAAQ,mBAAmB,CAC3B,CAAA,EAIT,GAAI,EAAM,SAAW,CAAC,EAAM,KAO1B,OACE,EAAA,EAAA,KAAC,MAAD,CACE,UAAU,gFACV,cAAY,qCAEV,EAAM,OAA6B,SACnC,EAAE,EAAA,QAAQ,gBAAgB,CACzB,CAAA,EAIT,GAAM,CAAE,OAAM,OAAM,YAAW,YAAa,EAAM,KAC5C,EAAkB,EAAA,yBAAyB,EAAW,CAAe,EA4H3E,OAtHI,IAAa,QACX,IAAS,QAAU,IAAS,MAE5B,EAAA,EAAA,KAAC,EAAA,sBAAD,CACQ,OACA,OACN,SAAU,GAAY,IAAA,EACvB,CAAA,GAGE,EAAA,EAAA,KAAC,EAAD,CAA6B,MAAO,CAAA,EAIzC,IAAS,SAET,EAAA,EAAA,KAAC,MAAD,CACE,UAAU,4EACV,cAAY,sCAEZ,EAAA,EAAA,KAAC,MAAD,CACE,IAAK,EACL,IAAK,EACL,UAAU,sCACX,CAAA,CACE,CAAA,EAIL,IAAS,OAUT,EAAA,EAAA,KAAC,SAAD,CACE,MAAO,EACP,IAAK,EACL,QAAQ,oBACR,cAAY,6BACZ,UAAU,wBACX,CAAA,EAID,IAAS,UACJ,EAAA,EAAA,KAAC,EAAD,CAA6B,MAAO,CAAA,EAIzC,IAAa,aAAe,EAAe,IAAI,EAAa,CAAI,CAAC,GASjE,EAAA,EAAA,KAAC,SAAD,CACE,MAAO,EACP,IAAK,EACL,QAAQ,oBACR,cAAY,6BACZ,UAAU,wBACX,CAAA,EAID,IAAS,QAAU,EAAA,mBAAmB,CAAI,GAY1C,EAAA,EAAA,KAAC,MAAD,CACE,cAAY,+BACZ,UAAU,4IAEV,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,uYACb,EAAA,EAAA,KAAC,EAAA,iBAAD,CACE,QAAS,GAAQ,GACjB,gBAAA,GACA,gBAAA,EACD,CAAA,CACE,CAAA,CACF,CAAA,EAUL,IAAS,QAAU,IAAS,MAE5B,EAAA,EAAA,KAAC,EAAA,sBAAD,CACQ,OACA,OACN,SAAU,GAAY,IAAA,EACvB,CAAA,GAME,EAAA,EAAA,KAAC,EAAD,CAA6B,MAAO,CAAA,CAC7C"}
1	+ {"version":3,"file":"file-content-viewer.cjs","names":[],"sources":["../../../../src/components/features/files-tab/file-content-viewer.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\n\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useWorkspaceFileContent } from \"#/hooks/query/use-workspace-file-content\";\nimport {\n useWorkspaceMutationCounter,\n withWorkspaceCacheBuster,\n} from \"#/stores/use-workspace-mutation-counter\";\nimport { MarkdownRenderer } from \"#/components/features/markdown/markdown-renderer\";\nimport { isMarkdownFilePath } from \"#/utils/is-markdown-file-path\";\nimport { HighlightedSourceView } from \"./highlighted-source-view\";\nimport type { ViewMode } from \"./view-mode\";\n\ninterface FileContentViewerProps {\n path: string;\n viewMode: ViewMode;\n}\n\nconst HTML_LIKE_EXTS = new Set([\"html\", \"htm\", \"svg\"]);\n\n// Office/document formats we can't preview inline. The label doubles as the\n// allow-list (a present entry => Office doc) and feeds a clear, format-named\n// \"no preview\" message instead of the generic binary fallback.\nconst OFFICE_DOCUMENT_LABELS: Record<string, string> = {\n pptx: \"PowerPoint\",\n ppt: \"PowerPoint\",\n docx: \"Word\",\n doc: \"Word\",\n xlsx: \"Excel\",\n xls: \"Excel\",\n};\n\nfunction getExtension(path: string): string {\n const idx = path.lastIndexOf(\".\");\n return idx === -1 ? \"\" : path.slice(idx + 1).toLowerCase();\n}\n\n/*\n Fallback shown when a file's bytes aren't previewable. Office documents\n * (.pptx / .docx / .xlsx …) get a clear, format-named message; every other\n * binary keeps the generic \"binary file\" string so the pane is never blank.\n /\nfunction UnpreviewableFallback({ path }: { path: string }) {\n const { t } = useTranslation(\"openhands\");\n const documentLabel = OFFICE_DOCUMENT_LABELS[getExtension(path)];\n return (\n <div\n className=\"flex h-full w-full items-center justify-center text-sm text-[var(--oh-muted)]\"\n data-testid={\n documentLabel\n ? \"file-content-viewer-unsupported-document\"\n : \"file-content-viewer-binary-fallback\"\n }\n >\n {documentLabel\n ? t(I18nKey.FILES$UNSUPPORTED_DOCUMENT, { type: documentLabel })\n : t(I18nKey.FILES$BINARY_FALLBACK)}\n </div>\n );\n}\n\n/\n Renders the contents of a single workspace file. In `rich` mode we point\n * an iframe / <img> straight at the agent server's static workspace\n * fileserver for HTML / SVG / images / PDFs, so relative asset references\n * load naturally. In `plain` mode we always show the raw bytes as text (or\n * a fallback message for binaries).\n /\nexport function FileContentViewer({ path, viewMode }: FileContentViewerProps) {\n const { t } = useTranslation(\"openhands\");\n const query = useWorkspaceFileContent(path);\n // Subscribe to the workspace mutation counter so the iframe / <img> src\n // changes after every agent-side edit, forcing a fresh fetch even when\n // the path* hasn't moved (e.g. agent rewrote `style.css` referenced by\n // the currently-displayed `index.html`).\n const mutationCounter = useWorkspaceMutationCounter((state) => state.count);\n\n if (query.isLoading) {\n return (\n <div className=\"flex h-full w-full items-center justify-center text-sm text-[var(--oh-muted)]\">\n {t(I18nKey.FILES$LOADING_FILES)}\n </div>\n );\n }\n\n if (query.isError \|\| !query.data) {\n // Show a load-error message rather than the binary-fallback string —\n // these are completely different failure modes (couldn't even fetch\n // the file vs. fetched fine but the bytes aren't previewable) and\n // mixing them up hides real backend failures behind a misleading\n // \"Binary file\" label. Prefer the underlying error's own message when\n // we have one; fall back to the generic translated string otherwise.\n return (\n <div\n className=\"flex h-full w-full items-center justify-center text-sm text-[var(--oh-muted)]\"\n data-testid=\"file-content-viewer-error\"\n >\n {(query.error as Error \| undefined)?.message ??\n t(I18nKey.FILES$LOAD_ERROR)}\n </div>\n );\n }\n\n const { kind, text, staticUrl, mimeType } = query.data;\n const bustedStaticUrl = withWorkspaceCacheBuster(staticUrl, mutationCounter);\n\n // ----- Plain mode: raw source bytes, syntax-highlighted when we can\n // recognize the grammar (falls through to a `<pre>` otherwise). This\n // includes \"plain\" view of markdown / HTML, where the point is to see\n // the markup behind the rich preview.\n if (viewMode === \"plain\") {\n if (kind === \"text\" && text !== null) {\n return (\n <HighlightedSourceView\n path={path}\n text={text}\n mimeType={mimeType ?? undefined}\n />\n );\n }\n return <UnpreviewableFallback path={path} />;\n }\n\n // ----- Rich mode: render HTML, markdown, images, PDFs from staticUrl. ----\n if (kind === \"image\") {\n return (\n <div\n className=\"flex h-full w-full items-center justify-center bg-[var(--oh-surface)] p-4\"\n data-testid=\"file-content-viewer-image\"\n >\n <img\n src={bustedStaticUrl}\n alt={path}\n className=\"max-h-full max-w-full object-contain\"\n />\n </div>\n );\n }\n\n if (kind === \"pdf\") {\n // Deliberately NOT sandboxed: Chromium refuses to instantiate its\n // built-in PDF viewer inside any sandboxed frame (the `sandbox`\n // attribute disables plugins unconditionally — no token re-enables\n // them), rendering \"This page has been blocked by Chrome\" instead of\n // the document. Unsandboxed is safe here: the fileserver declares\n // `Content-Type: application/pdf`, which browsers never sniff into\n // HTML, so the frame can only host the PDF viewer — and PDF-embedded\n // JS (AcroForm, OpenAction…) runs in the viewer's own sandboxed\n // engine with no access to this page's DOM.\n return (\n <iframe\n title={path}\n src={bustedStaticUrl}\n data-testid=\"file-content-viewer-iframe\"\n className=\"h-full w-full bg-white\"\n />\n );\n }\n\n if (kind === \"binary\") {\n return <UnpreviewableFallback path={path} />;\n }\n\n // Text-like content.\n if (mimeType === \"text/html\" \|\| HTML_LIKE_EXTS.has(getExtension(path))) {\n // Sandbox the preview iframe: `allow-same-origin` keeps the frame on\n // the workspace fileserver's origin so relative `<link href=\"…\">`,\n // `<img src=\"…\">`, etc. continue to resolve, while the absence of\n // `allow-scripts` means any `<script>` (or `onerror=…`, inline event\n // handler, …) inside the previewed file is inert. This is exactly\n // the safe-preview posture we want — users can look at their HTML\n // without it executing in the canvas's context.\n return (\n <iframe\n title={path}\n src={bustedStaticUrl}\n sandbox=\"allow-same-origin\"\n data-testid=\"file-content-viewer-iframe\"\n className=\"h-full w-full bg-white\"\n />\n );\n }\n\n if (kind === \"text\" && isMarkdownFilePath(path)) {\n // Match the right-pane chrome color so the rich-rendered markdown\n // blends with the surrounding files tab instead of painting a stark\n // white card. `--oh-scroll-fade-from` keeps wide-table edge fades on\n // the same surface (otherwise they default to `--oh-color-base`).\n // We use `prose-invert` (typography plugin's dark-theme variant) and\n // then layer arbitrary CSS-variable overrides on top to pin body /\n // bold / quote text to pure white — the user specifically asked for\n // every text element (not just headings) to read as white. The custom\n // heading components in `markdown/headings.tsx` already hard-code\n // `text-white`, so headers stay white through this change.\n return (\n <div\n data-testid=\"file-content-viewer-markdown\"\n className=\"h-full w-full overflow-auto bg-[var(--oh-surface)] text-white custom-scrollbar-always [--oh-scroll-fade-from:var(--oh-surface)]\"\n >\n <div className=\"prose prose-sm prose-invert max-w-none p-6 [--tw-prose-body:#fff] [--tw-prose-bold:#fff] [--tw-prose-headings:#fff] [--tw-prose-lead:#fff] [--tw-prose-counters:#fff] [--tw-prose-quotes:#fff] [--tw-prose-quote-borders:var(--oh-border-subtle)] [--tw-prose-bullets:var(--oh-muted)] [--tw-prose-hr:var(--oh-border-subtle)] [--tw-prose-captions:var(--oh-muted)] [--tw-prose-kbd:#fff]\">\n <MarkdownRenderer\n content={text ?? \"\"}\n includeStandard\n includeHeadings\n />\n </div>\n </div>\n );\n }\n\n // Rich mode for actual source code (.ts, .py, .yaml, .css, …): there\n // is no other \"rich\" rendering to fall back to, so highlighted source\n // IS the rich view. Identical to the plain-mode treatment — keeping\n // both branches reuse `HighlightedSourceView` means the toggle has the\n // same visual identity for source files in both modes (which is the\n // honest answer: source IS rendered code).\n if (kind === \"text\" && text !== null) {\n return (\n <HighlightedSourceView\n path={path}\n text={text}\n mimeType={mimeType ?? undefined}\n />\n );\n }\n\n // Truly unknown / empty payload — show a fallback so the pane is never\n // blank.\n return <UnpreviewableFallback path={path} />;\n}\n"],"mappings":"oeAkBA,IAAM,EAAiB,IAAI,IAAI,CAAC,OAAQ,MAAO,KAAK,CAAC,EAK/C,EAAiD,CACrD,KAAM,aACN,IAAK,aACL,KAAM,OACN,IAAK,OACL,KAAM,QACN,IAAK,OACP,EAEA,SAAS,EAAa,EAAsB,CAC1C,IAAM,EAAM,EAAK,YAAY,GAAG,EAChC,OAAO,IAAQ,GAAK,GAAK,EAAK,MAAM,EAAM,CAAC,EAAE,YAAY,CAC3D,CAOA,SAAS,EAAsB,CAAE,QAA0B,CACzD,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAClC,EAAgB,EAAuB,EAAa,CAAI,GAC9D,OACE,EAAA,EAAA,KAAC,MAAD,CACE,UAAU,gFACV,cACE,EACI,2CACA,+CAGL,EACG,EAAE,EAAA,QAAQ,2BAA4B,CAAE,KAAM,CAAc,CAAC,EAC7D,EAAE,EAAA,QAAQ,qBAAqB,CAChC,CAAA,CAET,CASA,SAAgB,EAAkB,CAAE,OAAM,YAAoC,CAC5E,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAClC,EAAQ,EAAA,wBAAwB,CAAI,EAKpC,EAAkB,EAAA,4BAA6B,GAAU,EAAM,KAAK,EAE1E,GAAI,EAAM,UACR,OACE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,yFACZ,EAAE,EAAA,QAAQ,mBAAmB,CAC3B,CAAA,EAIT,GAAI,EAAM,SAAW,CAAC,EAAM,KAO1B,OACE,EAAA,EAAA,KAAC,MAAD,CACE,UAAU,gFACV,cAAY,qCAEV,EAAM,OAA6B,SACnC,EAAE,EAAA,QAAQ,gBAAgB,CACzB,CAAA,EAIT,GAAM,CAAE,OAAM,OAAM,YAAW,YAAa,EAAM,KAC5C,EAAkB,EAAA,yBAAyB,EAAW,CAAe,EA4H3E,OAtHI,IAAa,QACX,IAAS,QAAU,IAAS,MAE5B,EAAA,EAAA,KAAC,EAAA,sBAAD,CACQ,OACA,OACN,SAAU,GAAY,IAAA,EACvB,CAAA,GAGE,EAAA,EAAA,KAAC,EAAD,CAA6B,MAAO,CAAA,EAIzC,IAAS,SAET,EAAA,EAAA,KAAC,MAAD,CACE,UAAU,4EACV,cAAY,sCAEZ,EAAA,EAAA,KAAC,MAAD,CACE,IAAK,EACL,IAAK,EACL,UAAU,sCACX,CAAA,CACE,CAAA,EAIL,IAAS,OAWT,EAAA,EAAA,KAAC,SAAD,CACE,MAAO,EACP,IAAK,EACL,cAAY,6BACZ,UAAU,wBACX,CAAA,EAID,IAAS,UACJ,EAAA,EAAA,KAAC,EAAD,CAA6B,MAAO,CAAA,EAIzC,IAAa,aAAe,EAAe,IAAI,EAAa,CAAI,CAAC,GASjE,EAAA,EAAA,KAAC,SAAD,CACE,MAAO,EACP,IAAK,EACL,QAAQ,oBACR,cAAY,6BACZ,UAAU,wBACX,CAAA,EAID,IAAS,QAAU,EAAA,mBAAmB,CAAI,GAY1C,EAAA,EAAA,KAAC,MAAD,CACE,cAAY,+BACZ,UAAU,4IAEV,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,uYACb,EAAA,EAAA,KAAC,EAAA,iBAAD,CACE,QAAS,GAAQ,GACjB,gBAAA,GACA,gBAAA,EACD,CAAA,CACE,CAAA,CACF,CAAA,EAUL,IAAS,QAAU,IAAS,MAE5B,EAAA,EAAA,KAAC,EAAA,sBAAD,CACQ,OACA,OACN,SAAU,GAAY,IAAA,EACvB,CAAA,GAME,EAAA,EAAA,KAAC,EAAD,CAA6B,MAAO,CAAA,CAC7C"}

package/dist/components/features/files-tab/file-content-viewer.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { useTranslation as e } from "../../../node_modules/react-i18next/dist/es/useTranslation.js";
 import { I18nKey as t } from "../../../i18n/declaration.js";
 import { MarkdownRenderer as n } from "../markdown/markdown-renderer.js";
-import { isMarkdownFilePath as r } from "../../../utils/is-markdown-file-path.js";
-import { useWorkspaceMutationCounter as i, withWorkspaceCacheBuster as a } from "../../../stores/use-workspace-mutation-counter.js";
+import { useWorkspaceMutationCounter as r, withWorkspaceCacheBuster as i } from "../../../stores/use-workspace-mutation-counter.js";
+import { isMarkdownFilePath as a } from "../../../utils/is-markdown-file-path.js";
 import { useWorkspaceFileContent as o } from "../../../hooks/query/use-workspace-file-content.js";
 import { HighlightedSourceView as s } from "./highlighted-source-view.js";
 import { jsx as c } from "react/jsx-runtime";
@@ -32,7 +32,7 @@ function f({ path: n }) {
 	});
 }
 function p({ path: u, viewMode: p }) {
-	let { t: m } = e("openhands"), h = o(u), g = i((e) => e.count);
+	let { t: m } = e("openhands"), h = o(u), g = r((e) => e.count);
 	if (h.isLoading) return /* @__PURE__ */ c("div", {
 		className: "flex h-full w-full items-center justify-center text-sm text-[var(--oh-muted)]",
 		children: m(t.FILES$LOADING_FILES)
@@ -42,7 +42,7 @@ function p({ path: u, viewMode: p }) {
 		"data-testid": "file-content-viewer-error",
 		children: h.error?.message ?? m(t.FILES$LOAD_ERROR)
 	});
-	let { kind: _, text: v, staticUrl: y, mimeType: b } = h.data, x = a(y, g);
+	let { kind: _, text: v, staticUrl: y, mimeType: b } = h.data, x = i(y, g);
 	return p === "plain" ? _ === "text" && v !== null ? /* @__PURE__ */ c(s, {
 		path: u,
 		text: v,
@@ -58,7 +58,6 @@ function p({ path: u, viewMode: p }) {
 	}) : _ === "pdf" ? /* @__PURE__ */ c("iframe", {
 		title: u,
 		src: x,
-		sandbox: "allow-same-origin",
 		"data-testid": "file-content-viewer-iframe",
 		className: "h-full w-full bg-white"
 	}) : _ === "binary" ? /* @__PURE__ */ c(f, { path: u }) : b === "text/html" || l.has(d(u)) ? /* @__PURE__ */ c("iframe", {
@@ -67,7 +66,7 @@ function p({ path: u, viewMode: p }) {
 		sandbox: "allow-same-origin",
 		"data-testid": "file-content-viewer-iframe",
 		className: "h-full w-full bg-white"
-	}) : _ === "text" && r(u) ? /* @__PURE__ */ c("div", {
+	}) : _ === "text" && a(u) ? /* @__PURE__ */ c("div", {
 		"data-testid": "file-content-viewer-markdown",
 		className: "h-full w-full overflow-auto bg-[var(--oh-surface)] text-white custom-scrollbar-always [--oh-scroll-fade-from:var(--oh-surface)]",
 		children: /* @__PURE__ */ c("div", {

package/dist/components/features/files-tab/file-content-viewer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"file-content-viewer.js","names":[],"sources":["../../../../src/components/features/files-tab/file-content-viewer.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\n\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useWorkspaceFileContent } from \"#/hooks/query/use-workspace-file-content\";\nimport {\n useWorkspaceMutationCounter,\n withWorkspaceCacheBuster,\n} from \"#/stores/use-workspace-mutation-counter\";\nimport { MarkdownRenderer } from \"#/components/features/markdown/markdown-renderer\";\nimport { isMarkdownFilePath } from \"#/utils/is-markdown-file-path\";\nimport { HighlightedSourceView } from \"./highlighted-source-view\";\nimport type { ViewMode } from \"./view-mode\";\n\ninterface FileContentViewerProps {\n path: string;\n viewMode: ViewMode;\n}\n\nconst HTML_LIKE_EXTS = new Set([\"html\", \"htm\", \"svg\"]);\n\n// Office/document formats we can't preview inline. The label doubles as the\n// allow-list (a present entry => Office doc) and feeds a clear, format-named\n// \"no preview\" message instead of the generic binary fallback.\nconst OFFICE_DOCUMENT_LABELS: Record<string, string> = {\n pptx: \"PowerPoint\",\n ppt: \"PowerPoint\",\n docx: \"Word\",\n doc: \"Word\",\n xlsx: \"Excel\",\n xls: \"Excel\",\n};\n\nfunction getExtension(path: string): string {\n const idx = path.lastIndexOf(\".\");\n return idx === -1 ? \"\" : path.slice(idx + 1).toLowerCase();\n}\n\n/*\n Fallback shown when a file's bytes aren't previewable. Office documents\n * (.pptx / .docx / .xlsx …) get a clear, format-named message; every other\n * binary keeps the generic \"binary file\" string so the pane is never blank.\n /\nfunction UnpreviewableFallback({ path }: { path: string }) {\n const { t } = useTranslation(\"openhands\");\n const documentLabel = OFFICE_DOCUMENT_LABELS[getExtension(path)];\n return (\n <div\n className=\"flex h-full w-full items-center justify-center text-sm text-[var(--oh-muted)]\"\n data-testid={\n documentLabel\n ? \"file-content-viewer-unsupported-document\"\n : \"file-content-viewer-binary-fallback\"\n }\n >\n {documentLabel\n ? t(I18nKey.FILES$UNSUPPORTED_DOCUMENT, { type: documentLabel })\n : t(I18nKey.FILES$BINARY_FALLBACK)}\n </div>\n );\n}\n\n/\n Renders the contents of a single workspace file. In `rich` mode we point\n * an iframe / <img> straight at the agent server's static workspace\n * fileserver for HTML / SVG / images / PDFs, so relative asset references\n * load naturally. In `plain` mode we always show the raw bytes as text (or\n * a fallback message for binaries).\n /\nexport function FileContentViewer({ path, viewMode }: FileContentViewerProps) {\n const { t } = useTranslation(\"openhands\");\n const query = useWorkspaceFileContent(path);\n // Subscribe to the workspace mutation counter so the iframe / <img> src\n // changes after every agent-side edit, forcing a fresh fetch even when\n // the path* hasn't moved (e.g. agent rewrote `style.css` referenced by\n // the currently-displayed `index.html`).\n const mutationCounter = useWorkspaceMutationCounter((state) => state.count);\n\n if (query.isLoading) {\n return (\n <div className=\"flex h-full w-full items-center justify-center text-sm text-[var(--oh-muted)]\">\n {t(I18nKey.FILES$LOADING_FILES)}\n </div>\n );\n }\n\n if (query.isError \|\| !query.data) {\n // Show a load-error message rather than the binary-fallback string —\n // these are completely different failure modes (couldn't even fetch\n // the file vs. fetched fine but the bytes aren't previewable) and\n // mixing them up hides real backend failures behind a misleading\n // \"Binary file\" label. Prefer the underlying error's own message when\n // we have one; fall back to the generic translated string otherwise.\n return (\n <div\n className=\"flex h-full w-full items-center justify-center text-sm text-[var(--oh-muted)]\"\n data-testid=\"file-content-viewer-error\"\n >\n {(query.error as Error \| undefined)?.message ??\n t(I18nKey.FILES$LOAD_ERROR)}\n </div>\n );\n }\n\n const { kind, text, staticUrl, mimeType } = query.data;\n const bustedStaticUrl = withWorkspaceCacheBuster(staticUrl, mutationCounter);\n\n // ----- Plain mode: raw source bytes, syntax-highlighted when we can\n // recognize the grammar (falls through to a `<pre>` otherwise). This\n // includes \"plain\" view of markdown / HTML, where the point is to see\n // the markup behind the rich preview.\n if (viewMode === \"plain\") {\n if (kind === \"text\" && text !== null) {\n return (\n <HighlightedSourceView\n path={path}\n text={text}\n mimeType={mimeType ?? undefined}\n />\n );\n }\n return <UnpreviewableFallback path={path} />;\n }\n\n // ----- Rich mode: render HTML, markdown, images, PDFs from staticUrl. ----\n if (kind === \"image\") {\n return (\n <div\n className=\"flex h-full w-full items-center justify-center bg-[var(--oh-surface)] p-4\"\n data-testid=\"file-content-viewer-image\"\n >\n <img\n src={bustedStaticUrl}\n alt={path}\n className=\"max-h-full max-w-full object-contain\"\n />\n </div>\n );\n }\n\n if (kind === \"pdf\") {\n // PDFs can carry embedded JavaScript (AcroForm, OpenAction…). Even\n // though `staticUrl` lives on the agent server origin, the PDF\n // viewer's scripting capability isn't worth the risk for a file\n // preview, so we sandbox the iframe. `allow-same-origin` lets the\n // browser's built-in PDF viewer load the underlying bytes without\n // tripping cross-origin restrictions; we omit `allow-scripts`\n // because no PDF preview we care about needs to run JS in the\n // parent's origin.\n return (\n <iframe\n title={path}\n src={bustedStaticUrl}\n sandbox=\"allow-same-origin\"\n data-testid=\"file-content-viewer-iframe\"\n className=\"h-full w-full bg-white\"\n />\n );\n }\n\n if (kind === \"binary\") {\n return <UnpreviewableFallback path={path} />;\n }\n\n // Text-like content.\n if (mimeType === \"text/html\" \|\| HTML_LIKE_EXTS.has(getExtension(path))) {\n // Sandbox the preview iframe: `allow-same-origin` keeps the frame on\n // the workspace fileserver's origin so relative `<link href=\"…\">`,\n // `<img src=\"…\">`, etc. continue to resolve, while the absence of\n // `allow-scripts` means any `<script>` (or `onerror=…`, inline event\n // handler, …) inside the previewed file is inert. This is exactly\n // the safe-preview posture we want — users can look at their HTML\n // without it executing in the canvas's context.\n return (\n <iframe\n title={path}\n src={bustedStaticUrl}\n sandbox=\"allow-same-origin\"\n data-testid=\"file-content-viewer-iframe\"\n className=\"h-full w-full bg-white\"\n />\n );\n }\n\n if (kind === \"text\" && isMarkdownFilePath(path)) {\n // Match the right-pane chrome color so the rich-rendered markdown\n // blends with the surrounding files tab instead of painting a stark\n // white card. `--oh-scroll-fade-from` keeps wide-table edge fades on\n // the same surface (otherwise they default to `--oh-color-base`).\n // We use `prose-invert` (typography plugin's dark-theme variant) and\n // then layer arbitrary CSS-variable overrides on top to pin body /\n // bold / quote text to pure white — the user specifically asked for\n // every text element (not just headings) to read as white. The custom\n // heading components in `markdown/headings.tsx` already hard-code\n // `text-white`, so headers stay white through this change.\n return (\n <div\n data-testid=\"file-content-viewer-markdown\"\n className=\"h-full w-full overflow-auto bg-[var(--oh-surface)] text-white custom-scrollbar-always [--oh-scroll-fade-from:var(--oh-surface)]\"\n >\n <div className=\"prose prose-sm prose-invert max-w-none p-6 [--tw-prose-body:#fff] [--tw-prose-bold:#fff] [--tw-prose-headings:#fff] [--tw-prose-lead:#fff] [--tw-prose-counters:#fff] [--tw-prose-quotes:#fff] [--tw-prose-quote-borders:var(--oh-border-subtle)] [--tw-prose-bullets:var(--oh-muted)] [--tw-prose-hr:var(--oh-border-subtle)] [--tw-prose-captions:var(--oh-muted)] [--tw-prose-kbd:#fff]\">\n <MarkdownRenderer\n content={text ?? \"\"}\n includeStandard\n includeHeadings\n />\n </div>\n </div>\n );\n }\n\n // Rich mode for actual source code (.ts, .py, .yaml, .css, …): there\n // is no other \"rich\" rendering to fall back to, so highlighted source\n // IS the rich view. Identical to the plain-mode treatment — keeping\n // both branches reuse `HighlightedSourceView` means the toggle has the\n // same visual identity for source files in both modes (which is the\n // honest answer: source IS rendered code).\n if (kind === \"text\" && text !== null) {\n return (\n <HighlightedSourceView\n path={path}\n text={text}\n mimeType={mimeType ?? undefined}\n />\n );\n }\n\n // Truly unknown / empty payload — show a fallback so the pane is never\n // blank.\n return <UnpreviewableFallback path={path} />;\n}\n"],"mappings":";;;;;;;;;AAkBA,IAAM,IAAiB,IAAI,IAAI;CAAC;CAAQ;CAAO;AAAK,CAAC,GAK/C,IAAiD;CACrD,MAAM;CACN,KAAK;CACL,MAAM;CACN,KAAK;CACL,MAAM;CACN,KAAK;AACP;AAEA,SAAS,EAAa,GAAsB;CAC1C,IAAM,IAAM,EAAK,YAAY,GAAG;CAChC,OAAO,MAAQ,KAAK,KAAK,EAAK,MAAM,IAAM,CAAC,EAAE,YAAY;AAC3D;AAOA,SAAS,EAAsB,EAAE,WAA0B;CACzD,IAAM,EAAE,SAAM,EAAe,WAAW,GAClC,IAAgB,EAAuB,EAAa,CAAI;CAC9D,OACE,kBAAC,OAAD;EACE,WAAU;EACV,eACE,IACI,6CACA;YAGL,IACG,EAAE,EAAQ,4BAA4B,EAAE,MAAM,EAAc,CAAC,IAC7D,EAAE,EAAQ,qBAAqB;CAChC,CAAA;AAET;AASA,SAAgB,EAAkB,EAAE,SAAM,eAAoC;CAC5E,IAAM,EAAE,SAAM,EAAe,WAAW,GAClC,IAAQ,EAAwB,CAAI,GAKpC,IAAkB,GAA6B,MAAU,EAAM,KAAK;CAE1E,IAAI,EAAM,WACR,OACE,kBAAC,OAAD;EAAK,WAAU;YACZ,EAAE,EAAQ,mBAAmB;CAC3B,CAAA;CAIT,IAAI,EAAM,WAAW,CAAC,EAAM,MAO1B,OACE,kBAAC,OAAD;EACE,WAAU;EACV,eAAY;YAEV,EAAM,OAA6B,WACnC,EAAE,EAAQ,gBAAgB;CACzB,CAAA;CAIT,IAAM,EAAE,SAAM,SAAM,cAAW,gBAAa,EAAM,MAC5C,IAAkB,EAAyB,GAAW,CAAe;CA4H3E,OAtHI,MAAa,UACX,MAAS,UAAU,MAAS,OAE5B,kBAAC,GAAD;EACQ;EACA;EACN,UAAU,KAAY,KAAA;CACvB,CAAA,IAGE,kBAAC,GAAD,EAA6B,QAAO,CAAA,IAIzC,MAAS,UAET,kBAAC,OAAD;EACE,WAAU;EACV,eAAY;YAEZ,kBAAC,OAAD;GACE,KAAK;GACL,KAAK;GACL,WAAU;EACX,CAAA;CACE,CAAA,IAIL,MAAS,QAUT,kBAAC,UAAD;EACE,OAAO;EACP,KAAK;EACL,SAAQ;EACR,eAAY;EACZ,WAAU;CACX,CAAA,IAID,MAAS,WACJ,kBAAC,GAAD,EAA6B,QAAO,CAAA,IAIzC,MAAa,eAAe,EAAe,IAAI,EAAa,CAAI,CAAC,IASjE,kBAAC,UAAD;EACE,OAAO;EACP,KAAK;EACL,SAAQ;EACR,eAAY;EACZ,WAAU;CACX,CAAA,IAID,MAAS,UAAU,EAAmB,CAAI,IAY1C,kBAAC,OAAD;EACE,eAAY;EACZ,WAAU;YAEV,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,GAAD;IACE,SAAS,KAAQ;IACjB,iBAAA;IACA,iBAAA;GACD,CAAA;EACE,CAAA;CACF,CAAA,IAUL,MAAS,UAAU,MAAS,OAE5B,kBAAC,GAAD;EACQ;EACA;EACN,UAAU,KAAY,KAAA;CACvB,CAAA,IAME,kBAAC,GAAD,EAA6B,QAAO,CAAA;AAC7C"}
1	+ {"version":3,"file":"file-content-viewer.js","names":[],"sources":["../../../../src/components/features/files-tab/file-content-viewer.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\n\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useWorkspaceFileContent } from \"#/hooks/query/use-workspace-file-content\";\nimport {\n useWorkspaceMutationCounter,\n withWorkspaceCacheBuster,\n} from \"#/stores/use-workspace-mutation-counter\";\nimport { MarkdownRenderer } from \"#/components/features/markdown/markdown-renderer\";\nimport { isMarkdownFilePath } from \"#/utils/is-markdown-file-path\";\nimport { HighlightedSourceView } from \"./highlighted-source-view\";\nimport type { ViewMode } from \"./view-mode\";\n\ninterface FileContentViewerProps {\n path: string;\n viewMode: ViewMode;\n}\n\nconst HTML_LIKE_EXTS = new Set([\"html\", \"htm\", \"svg\"]);\n\n// Office/document formats we can't preview inline. The label doubles as the\n// allow-list (a present entry => Office doc) and feeds a clear, format-named\n// \"no preview\" message instead of the generic binary fallback.\nconst OFFICE_DOCUMENT_LABELS: Record<string, string> = {\n pptx: \"PowerPoint\",\n ppt: \"PowerPoint\",\n docx: \"Word\",\n doc: \"Word\",\n xlsx: \"Excel\",\n xls: \"Excel\",\n};\n\nfunction getExtension(path: string): string {\n const idx = path.lastIndexOf(\".\");\n return idx === -1 ? \"\" : path.slice(idx + 1).toLowerCase();\n}\n\n/*\n Fallback shown when a file's bytes aren't previewable. Office documents\n * (.pptx / .docx / .xlsx …) get a clear, format-named message; every other\n * binary keeps the generic \"binary file\" string so the pane is never blank.\n /\nfunction UnpreviewableFallback({ path }: { path: string }) {\n const { t } = useTranslation(\"openhands\");\n const documentLabel = OFFICE_DOCUMENT_LABELS[getExtension(path)];\n return (\n <div\n className=\"flex h-full w-full items-center justify-center text-sm text-[var(--oh-muted)]\"\n data-testid={\n documentLabel\n ? \"file-content-viewer-unsupported-document\"\n : \"file-content-viewer-binary-fallback\"\n }\n >\n {documentLabel\n ? t(I18nKey.FILES$UNSUPPORTED_DOCUMENT, { type: documentLabel })\n : t(I18nKey.FILES$BINARY_FALLBACK)}\n </div>\n );\n}\n\n/\n Renders the contents of a single workspace file. In `rich` mode we point\n * an iframe / <img> straight at the agent server's static workspace\n * fileserver for HTML / SVG / images / PDFs, so relative asset references\n * load naturally. In `plain` mode we always show the raw bytes as text (or\n * a fallback message for binaries).\n /\nexport function FileContentViewer({ path, viewMode }: FileContentViewerProps) {\n const { t } = useTranslation(\"openhands\");\n const query = useWorkspaceFileContent(path);\n // Subscribe to the workspace mutation counter so the iframe / <img> src\n // changes after every agent-side edit, forcing a fresh fetch even when\n // the path* hasn't moved (e.g. agent rewrote `style.css` referenced by\n // the currently-displayed `index.html`).\n const mutationCounter = useWorkspaceMutationCounter((state) => state.count);\n\n if (query.isLoading) {\n return (\n <div className=\"flex h-full w-full items-center justify-center text-sm text-[var(--oh-muted)]\">\n {t(I18nKey.FILES$LOADING_FILES)}\n </div>\n );\n }\n\n if (query.isError \|\| !query.data) {\n // Show a load-error message rather than the binary-fallback string —\n // these are completely different failure modes (couldn't even fetch\n // the file vs. fetched fine but the bytes aren't previewable) and\n // mixing them up hides real backend failures behind a misleading\n // \"Binary file\" label. Prefer the underlying error's own message when\n // we have one; fall back to the generic translated string otherwise.\n return (\n <div\n className=\"flex h-full w-full items-center justify-center text-sm text-[var(--oh-muted)]\"\n data-testid=\"file-content-viewer-error\"\n >\n {(query.error as Error \| undefined)?.message ??\n t(I18nKey.FILES$LOAD_ERROR)}\n </div>\n );\n }\n\n const { kind, text, staticUrl, mimeType } = query.data;\n const bustedStaticUrl = withWorkspaceCacheBuster(staticUrl, mutationCounter);\n\n // ----- Plain mode: raw source bytes, syntax-highlighted when we can\n // recognize the grammar (falls through to a `<pre>` otherwise). This\n // includes \"plain\" view of markdown / HTML, where the point is to see\n // the markup behind the rich preview.\n if (viewMode === \"plain\") {\n if (kind === \"text\" && text !== null) {\n return (\n <HighlightedSourceView\n path={path}\n text={text}\n mimeType={mimeType ?? undefined}\n />\n );\n }\n return <UnpreviewableFallback path={path} />;\n }\n\n // ----- Rich mode: render HTML, markdown, images, PDFs from staticUrl. ----\n if (kind === \"image\") {\n return (\n <div\n className=\"flex h-full w-full items-center justify-center bg-[var(--oh-surface)] p-4\"\n data-testid=\"file-content-viewer-image\"\n >\n <img\n src={bustedStaticUrl}\n alt={path}\n className=\"max-h-full max-w-full object-contain\"\n />\n </div>\n );\n }\n\n if (kind === \"pdf\") {\n // Deliberately NOT sandboxed: Chromium refuses to instantiate its\n // built-in PDF viewer inside any sandboxed frame (the `sandbox`\n // attribute disables plugins unconditionally — no token re-enables\n // them), rendering \"This page has been blocked by Chrome\" instead of\n // the document. Unsandboxed is safe here: the fileserver declares\n // `Content-Type: application/pdf`, which browsers never sniff into\n // HTML, so the frame can only host the PDF viewer — and PDF-embedded\n // JS (AcroForm, OpenAction…) runs in the viewer's own sandboxed\n // engine with no access to this page's DOM.\n return (\n <iframe\n title={path}\n src={bustedStaticUrl}\n data-testid=\"file-content-viewer-iframe\"\n className=\"h-full w-full bg-white\"\n />\n );\n }\n\n if (kind === \"binary\") {\n return <UnpreviewableFallback path={path} />;\n }\n\n // Text-like content.\n if (mimeType === \"text/html\" \|\| HTML_LIKE_EXTS.has(getExtension(path))) {\n // Sandbox the preview iframe: `allow-same-origin` keeps the frame on\n // the workspace fileserver's origin so relative `<link href=\"…\">`,\n // `<img src=\"…\">`, etc. continue to resolve, while the absence of\n // `allow-scripts` means any `<script>` (or `onerror=…`, inline event\n // handler, …) inside the previewed file is inert. This is exactly\n // the safe-preview posture we want — users can look at their HTML\n // without it executing in the canvas's context.\n return (\n <iframe\n title={path}\n src={bustedStaticUrl}\n sandbox=\"allow-same-origin\"\n data-testid=\"file-content-viewer-iframe\"\n className=\"h-full w-full bg-white\"\n />\n );\n }\n\n if (kind === \"text\" && isMarkdownFilePath(path)) {\n // Match the right-pane chrome color so the rich-rendered markdown\n // blends with the surrounding files tab instead of painting a stark\n // white card. `--oh-scroll-fade-from` keeps wide-table edge fades on\n // the same surface (otherwise they default to `--oh-color-base`).\n // We use `prose-invert` (typography plugin's dark-theme variant) and\n // then layer arbitrary CSS-variable overrides on top to pin body /\n // bold / quote text to pure white — the user specifically asked for\n // every text element (not just headings) to read as white. The custom\n // heading components in `markdown/headings.tsx` already hard-code\n // `text-white`, so headers stay white through this change.\n return (\n <div\n data-testid=\"file-content-viewer-markdown\"\n className=\"h-full w-full overflow-auto bg-[var(--oh-surface)] text-white custom-scrollbar-always [--oh-scroll-fade-from:var(--oh-surface)]\"\n >\n <div className=\"prose prose-sm prose-invert max-w-none p-6 [--tw-prose-body:#fff] [--tw-prose-bold:#fff] [--tw-prose-headings:#fff] [--tw-prose-lead:#fff] [--tw-prose-counters:#fff] [--tw-prose-quotes:#fff] [--tw-prose-quote-borders:var(--oh-border-subtle)] [--tw-prose-bullets:var(--oh-muted)] [--tw-prose-hr:var(--oh-border-subtle)] [--tw-prose-captions:var(--oh-muted)] [--tw-prose-kbd:#fff]\">\n <MarkdownRenderer\n content={text ?? \"\"}\n includeStandard\n includeHeadings\n />\n </div>\n </div>\n );\n }\n\n // Rich mode for actual source code (.ts, .py, .yaml, .css, …): there\n // is no other \"rich\" rendering to fall back to, so highlighted source\n // IS the rich view. Identical to the plain-mode treatment — keeping\n // both branches reuse `HighlightedSourceView` means the toggle has the\n // same visual identity for source files in both modes (which is the\n // honest answer: source IS rendered code).\n if (kind === \"text\" && text !== null) {\n return (\n <HighlightedSourceView\n path={path}\n text={text}\n mimeType={mimeType ?? undefined}\n />\n );\n }\n\n // Truly unknown / empty payload — show a fallback so the pane is never\n // blank.\n return <UnpreviewableFallback path={path} />;\n}\n"],"mappings":";;;;;;;;;AAkBA,IAAM,IAAiB,IAAI,IAAI;CAAC;CAAQ;CAAO;AAAK,CAAC,GAK/C,IAAiD;CACrD,MAAM;CACN,KAAK;CACL,MAAM;CACN,KAAK;CACL,MAAM;CACN,KAAK;AACP;AAEA,SAAS,EAAa,GAAsB;CAC1C,IAAM,IAAM,EAAK,YAAY,GAAG;CAChC,OAAO,MAAQ,KAAK,KAAK,EAAK,MAAM,IAAM,CAAC,EAAE,YAAY;AAC3D;AAOA,SAAS,EAAsB,EAAE,WAA0B;CACzD,IAAM,EAAE,SAAM,EAAe,WAAW,GAClC,IAAgB,EAAuB,EAAa,CAAI;CAC9D,OACE,kBAAC,OAAD;EACE,WAAU;EACV,eACE,IACI,6CACA;YAGL,IACG,EAAE,EAAQ,4BAA4B,EAAE,MAAM,EAAc,CAAC,IAC7D,EAAE,EAAQ,qBAAqB;CAChC,CAAA;AAET;AASA,SAAgB,EAAkB,EAAE,SAAM,eAAoC;CAC5E,IAAM,EAAE,SAAM,EAAe,WAAW,GAClC,IAAQ,EAAwB,CAAI,GAKpC,IAAkB,GAA6B,MAAU,EAAM,KAAK;CAE1E,IAAI,EAAM,WACR,OACE,kBAAC,OAAD;EAAK,WAAU;YACZ,EAAE,EAAQ,mBAAmB;CAC3B,CAAA;CAIT,IAAI,EAAM,WAAW,CAAC,EAAM,MAO1B,OACE,kBAAC,OAAD;EACE,WAAU;EACV,eAAY;YAEV,EAAM,OAA6B,WACnC,EAAE,EAAQ,gBAAgB;CACzB,CAAA;CAIT,IAAM,EAAE,SAAM,SAAM,cAAW,gBAAa,EAAM,MAC5C,IAAkB,EAAyB,GAAW,CAAe;CA4H3E,OAtHI,MAAa,UACX,MAAS,UAAU,MAAS,OAE5B,kBAAC,GAAD;EACQ;EACA;EACN,UAAU,KAAY,KAAA;CACvB,CAAA,IAGE,kBAAC,GAAD,EAA6B,QAAO,CAAA,IAIzC,MAAS,UAET,kBAAC,OAAD;EACE,WAAU;EACV,eAAY;YAEZ,kBAAC,OAAD;GACE,KAAK;GACL,KAAK;GACL,WAAU;EACX,CAAA;CACE,CAAA,IAIL,MAAS,QAWT,kBAAC,UAAD;EACE,OAAO;EACP,KAAK;EACL,eAAY;EACZ,WAAU;CACX,CAAA,IAID,MAAS,WACJ,kBAAC,GAAD,EAA6B,QAAO,CAAA,IAIzC,MAAa,eAAe,EAAe,IAAI,EAAa,CAAI,CAAC,IASjE,kBAAC,UAAD;EACE,OAAO;EACP,KAAK;EACL,SAAQ;EACR,eAAY;EACZ,WAAU;CACX,CAAA,IAID,MAAS,UAAU,EAAmB,CAAI,IAY1C,kBAAC,OAAD;EACE,eAAY;EACZ,WAAU;YAEV,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,GAAD;IACE,SAAS,KAAQ;IACjB,iBAAA;IACA,iBAAA;GACD,CAAA;EACE,CAAA;CACF,CAAA,IAUL,MAAS,UAAU,MAAS,OAE5B,kBAAC,GAAD;EACQ;EACA;EACN,UAAU,KAAY,KAAA;CACvB,CAAA,IAME,kBAAC,GAAD,EAA6B,QAAO,CAAA;AAC7C"}

package/dist/components/features/files-tab/file-quick-row.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),t=require("../../../i18n/declaration.cjs"),n=require("../../../node_modules/lucide-react/dist/esm/icons/list-tree.cjs"),r=require("../../../utils/utils.cjs"),i=require("../../../utils/file-priority.cjs");let a=require("react"),o=require("react/jsx-runtime");function s({paths:s,selectedPath:c,onSelectFile:l,isTreeVisible:u,onToggleTree:d}){let{t:f}=e.useTranslation(`openhands`),p=(0,a.useMemo)(()=>i.sortFilesByPriority(s),[s]);return(0,o.jsxs)(`div`,{className:`flex items-center gap-1.5 border-b border-[var(--oh-border)] px-2 py-1.5 min-h-[34px]`,"data-testid":`file-quick-row`,children:[(0,o.jsx)(`button`,{type:`button`,onClick:d,"data-testid":`file-quick-row-tree-toggle`,"aria-pressed":u,"aria-label":f(u?t.I18nKey.FILES$HIDE_FILE_TREE:t.I18nKey.FILES$SHOW_FILE_TREE),title:f(u?t.I18nKey.FILES$HIDE_FILE_TREE:t.I18nKey.FILES$SHOW_FILE_TREE),className:r.cn(`shrink-0 inline-flex items-center justify-center w-6 h-6 rounded-md cursor-pointer`,`text-[var(--oh-text-tertiary)] hover:bg-tertiary`,u&&`bg-[var(--oh-surface-raised)]`),children:(0,o.jsx)(n.ListTree,{className:`w-3 h-3`,"aria-hidden":!0,strokeWidth:2})}),p.length>0&&(0,o.jsx)(`div`,{className:`flex flex-nowrap items-center gap-1.5 overflow-hidden flex-1 min-w-0`,children:p.map(e=>{let t=c===e;return(0,o.jsx)(`button`,{type:`button`,onClick:()=>l(e),title:e,"data-testid":`file-quick-row-item-${e}`,className:r.cn(`inline-flex items-center px-2 py-0.5 text-xs whitespace-nowrap rounded-md cursor-pointer`,t?`bg-[var(--oh-interactive-hover)] text-white`:`bg-[var(--oh-surface-raised)] text-[var(--oh-text-tertiary)] hover:bg-tertiary`),children:e},e)})})]})}exports.FileQuickRow=s;
+require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),t=require("../../../i18n/declaration.cjs"),n=require("../../../node_modules/lucide-react/dist/esm/icons/list-tree.cjs"),r=require("../../../utils/utils.cjs"),i=require("../../../icons/u-close.cjs");let a=require("react/jsx-runtime");var o=`[scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden`;function s({openPaths:s,selectedPath:c,onSelectFile:l,onCloseFile:u,isTreeVisible:d,onToggleTree:f,actions:p}){let{t:m}=e.useTranslation(`openhands`);return(0,a.jsxs)(`div`,{className:`flex h-[34px] shrink-0 items-stretch gap-1.5 overflow-y-hidden border-b border-[var(--oh-border)] px-2`,"data-testid":`file-quick-row`,children:[(0,a.jsx)(`button`,{type:`button`,onClick:f,"data-testid":`file-quick-row-tree-toggle`,"aria-pressed":d,"aria-label":m(d?t.I18nKey.FILES$HIDE_FILE_TREE:t.I18nKey.FILES$SHOW_FILE_TREE),title:m(d?t.I18nKey.FILES$HIDE_FILE_TREE:t.I18nKey.FILES$SHOW_FILE_TREE),className:r.cn(`shrink-0 self-center inline-flex items-center justify-center w-6 h-6 rounded-md cursor-pointer`,`text-[var(--oh-text-tertiary)] hover:bg-tertiary`,d&&`bg-[var(--oh-surface-raised)]`),children:(0,a.jsx)(n.ListTree,{className:`w-3 h-3`,"aria-hidden":!0,strokeWidth:2})}),s.length>0?(0,a.jsx)(`div`,{role:`tablist`,"aria-label":m(t.I18nKey.COMMON$FILES),className:r.cn(`flex min-h-0 min-w-0 flex-1 flex-nowrap items-stretch overflow-x-auto overflow-y-hidden overscroll-y-none`,o),children:s.map((e,n)=>{let o=c===e,s=e.split(`/`).pop()||e;return(0,a.jsxs)(`div`,{className:r.cn(`group/file-tab relative flex shrink-0 items-stretch`,`border-r border-r-[var(--oh-border)]`,n===0&&`border-l border-l-[var(--oh-border)]`,`border-b-2 -mb-px transition-colors`,o?`border-b-white text-white`:`border-b-transparent text-[var(--oh-muted)] hover:text-white hover:border-b-white/25`),children:[(0,a.jsx)(`button`,{type:`button`,role:`tab`,"aria-selected":o,onClick:()=>l(e),title:e,"data-testid":`file-quick-row-item-${e}`,className:`flex min-w-0 max-w-[160px] items-center pl-2.5 pr-1 text-xs cursor-pointer text-inherit`,children:(0,a.jsx)(`span`,{className:`truncate`,children:s})}),(0,a.jsx)(`button`,{type:`button`,"data-testid":`file-quick-row-close-${e}`,"aria-label":m(t.I18nKey.FILES$CLOSE_TAB,{path:e}),title:m(t.I18nKey.FILES$CLOSE_TAB,{path:e}),className:r.cn(`inline-flex items-center justify-center size-5 self-center mr-1 rounded-sm shrink-0 cursor-pointer`,`text-inherit hover:bg-white/10`,`opacity-100 transition-opacity`,`md:opacity-0 md:group-hover/file-tab:opacity-100 md:group-focus-within/file-tab:opacity-100`),onClick:()=>u(e),children:(0,a.jsx)(i.default,{width:10,height:10,"aria-hidden":!0})})]},e)})}):(0,a.jsx)(`div`,{className:`flex-1 min-w-0`}),p?(0,a.jsx)(`div`,{className:`ml-auto shrink-0 self-center flex items-center gap-1`,children:p}):null]})}exports.FileQuickRow=s;
 //# sourceMappingURL=file-quick-row.cjs.map

package/dist/components/features/files-tab/file-quick-row.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"file-quick-row.cjs","names":[],"sources":["../../../../src/components/features/files-tab/file-quick-row.tsx"],"sourcesContent":["import { ListTree } from \"lucide-react\";\nimport { ~~useMemo~~ } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ~~I18nKey }~~ from \"#/~~i18n~~/~~declaration~~\";\nimport { ~~sortFilesByPriority~~ } from \"#/~~utils~~/~~file-priority~~\";\nimport { cn } from \"#/utils/utils\";\n\ninterface FileQuickRowProps {\n paths: string[];\n selectedPath: string \| null;\n onSelectFile: (path: string) => void;\n /** Whether the left-hand file tree is currently visible. /\n isTreeVisible: boolean;\n /* Toggle the visibility of the left-hand file tree. /\n onToggleTree: () => void;\n~~}\n\n/\n~~ ~~Horizontal~~ ~~\"quick~~ ~~access\"~~ ~~row~~ of ~~files~~ at ~~the~~ ~~top~~ of ~~the~~ ~~file~~ ~~viewer.\~~n * ~~Important~~ ~~entrypoints~~ ~~(index.html,~~ ~~README.md,~~ ~~package~~.~~json,~~ …) ~~appear\n~~ * ~~first.~~ A ~~file-tree toggle on~~ the ~~leading~~ ~~edge shows~~ or ~~hides the full~~\n * ~~tree~~ on ~~the~~ ~~left~~ — ~~there~~ is no ~~overflow~~ ~~dropdown, so anything that doesn't fit\n * here is reachable by opening the tree~~.\n */\nexport function FileQuickRow({\n ~~paths~~,\n selectedPath,\n onSelectFile,\n isTreeVisible,\n onToggleTree,\n}: FileQuickRowProps) {\n const { t } = useTranslation(\"openhands\");\n\n ~~const sortedByPriority = useMemo(() => sortFilesByPriority(paths), [paths]);\n\n~~ return (\n <div\n className=\"flex items-~~center~~ gap-1.5 border-b border-[var(--oh-border)] px-2 ~~py-1.5 min-h-[34px]~~\"\n data-testid=\"file-quick-row\"\n >\n <button\n type=\"button\"\n onClick={onToggleTree}\n data-testid=\"file-quick-row-tree-toggle\"\n aria-pressed={isTreeVisible}\n aria-label={t(\n isTreeVisible\n ? I18nKey.FILES$HIDE_FILE_TREE\n : I18nKey.FILES$SHOW_FILE_TREE,\n )}\n title={t(\n isTreeVisible\n ? I18nKey.FILES$HIDE_FILE_TREE\n : I18nKey.FILES$SHOW_FILE_TREE,\n )}\n className={cn(\n \"shrink-0 inline-flex items-center justify-center w-6 h-6 rounded-md cursor-pointer\",\n \"text-[var(--oh-text-tertiary)] hover:bg-tertiary\",\n isTreeVisible && \"bg-[var(--oh-surface-raised)]\",\n )}\n >\n <ListTree className=\"w-3 h-3\" aria-hidden strokeWidth={2} />\n </button>\n\n {~~sortedByPriority~~.length > 0 && (\n <div ~~className~~=\"flex flex-nowrap items-~~center~~ ~~gap~~-~~1.5~~ overflow-hidden ~~flex~~-~~1 min~~-~~w-0~~\">\n {~~sortedByPriority~~.map((path) => {\n const isSelected = selectedPath === path;\n return (\n <~~button~~\n key={path}\n type=\"button\"\n onClick={() => onSelectFile(path)}\n title={path}\n data-testid={`file-quick-row-item-${path}`}\n className={cn(\n \"inline-flex items-center px-2 py-0.5 ~~text~~-xs ~~whitespace~~-~~nowrap~~ rounded-md cursor-pointer\",\n ~~isSelected\n~~ ? \"bg-~~[var(--oh-interactive-~~hover~~)] text~~-white\"\n : \"bg-~~[var(--oh~~-~~surface~~-~~raised)]~~ ~~text~~-~~[var(--oh~~-~~text~~-~~tertiary)]~~ ~~hover~~:bg-~~tertiary~~\",\n )}\n ~~>\n~~ {path}\n </button>\n );\n })}\n </div>\n )}\n </div>\n );\n}\n"],"mappings":"~~uYAwBA~~,SAAgB,EAAa,CAC3B,~~QACA~~,eACA,eACA,gBACA,~~gBACoB~~,CACpB,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,~~EAElC~~,~~GAAA,EAAA,EAAA,aAAiC,EAAA,oBAAoB,CAAK,EAAG,CAAC,CAAK,CAAC,EAE1E,~~OACE,EAAA,EAAA,MAAC,MAAD,CACE,UAAU,~~wFACV~~,cAAY,0BAFd,EAIE,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,QAAS,EACT,cAAY,6BACZ,eAAc,EACd,aAAY,EACV,EACI,EAAA,QAAQ,qBACR,EAAA,QAAQ,oBACd,EACA,MAAO,EACL,EACI,EAAA,QAAQ,qBACR,EAAA,QAAQ,oBACd,EACA,UAAW,EAAA,GACT,~~qFACA~~,mDACA,GAAiB,+BACnB,YAEA,EAAA,EAAA,KAAC,EAAA,SAAD,CAAU,UAAU,UAAU,cAAA,GAAY,YAAa,CAAI,CAAA,CACrD,CAAA,EAEP,~~EAAiB~~,OAAS,~~IACzB~~,EAAA,EAAA,KAAC,MAAD,~~CAAK~~,~~UAAU~~,~~gFACZ~~,~~EAAiB~~,~~IAAK~~,~~GAAS~~,CAC9B,IAAM,EAAa,IAAiB,~~EACpC~~,OACE,EAAA,EAAA,KAAC,SAAD,~~CAEE~~,KAAK,SACL,YAAe,EAAa,CAAI,EAChC,MAAO,EACP,cAAa,uBAAuB,IACpC,UAAW,EAAA,GACT,~~2FACA~~,~~EACI~~,~~8CACA~~,~~gFACN~~,~~WAEC~~,~~CACK~~,~~EAbD~~,~~CAaC~~,~~CAEZ~~,CAAC,CACE,CAAA,~~CAEJ~~,GAET"}
1	+ {"version":3,"file":"file-quick-row.cjs","names":[],"sources":["../../../../src/components/features/files-tab/file-quick-row.tsx"],"sourcesContent":["import { ListTree } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport CloseIcon from \"#/icons/u-close.svg?react\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\n\ninterface FileQuickRowProps {\n /** Open file tabs only (paths the user or agent has opened). /\n openPaths: string[];\n selectedPath: string \| null;\n onSelectFile: (path: string) => void;\n onCloseFile: (path: string) => void;\n /* Whether the left-hand file tree is currently visible. /\n isTreeVisible: boolean;\n /* Toggle the visibility of the left-hand file tree. /\n onToggleTree: () => void;\n /* Trailing actions (e.g. refresh), pinned to the right. /\n actions?: ReactNode;\n}\n\nconst HIDDEN_SCROLLBAR_CLASSNAME =\n \"[scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden\";\n\n/\n Horizontal strip of open-file tabs. A path only appears after the user or\n * agent opens it. Overflow scrolls horizontally without a visible scrollbar.\n */\nexport function FileQuickRow({\n openPaths,\n selectedPath,\n onSelectFile,\n onCloseFile,\n isTreeVisible,\n onToggleTree,\n actions,\n}: FileQuickRowProps) {\n const { t } = useTranslation(\"openhands\");\n\n return (\n <div\n className=\"flex h-[34px] shrink-0 items-stretch gap-1.5 overflow-y-hidden border-b border-[var(--oh-border)] px-2\"\n data-testid=\"file-quick-row\"\n >\n <button\n type=\"button\"\n onClick={onToggleTree}\n data-testid=\"file-quick-row-tree-toggle\"\n aria-pressed={isTreeVisible}\n aria-label={t(\n isTreeVisible\n ? I18nKey.FILES$HIDE_FILE_TREE\n : I18nKey.FILES$SHOW_FILE_TREE,\n )}\n title={t(\n isTreeVisible\n ? I18nKey.FILES$HIDE_FILE_TREE\n : I18nKey.FILES$SHOW_FILE_TREE,\n )}\n className={cn(\n \"shrink-0 self-center inline-flex items-center justify-center w-6 h-6 rounded-md cursor-pointer\",\n \"text-[var(--oh-text-tertiary)] hover:bg-tertiary\",\n isTreeVisible && \"bg-[var(--oh-surface-raised)]\",\n )}\n >\n <ListTree className=\"w-3 h-3\" aria-hidden strokeWidth={2} />\n </button>\n\n {openPaths.length > 0 ? (\n <div\n role=\"tablist\"\n aria-label={t(I18nKey.COMMON$FILES)}\n className={cn(\n \"flex min-h-0 min-w-0 flex-1 flex-nowrap items-stretch overflow-x-auto overflow-y-hidden overscroll-y-none\",\n HIDDEN_SCROLLBAR_CLASSNAME,\n )}\n >\n {openPaths.map((path, index) => {\n const isSelected = selectedPath === path;\n const fileName = path.split(\"/\").pop() \|\| path;\n return (\n <div\n key={path}\n className={cn(\n \"group/file-tab relative flex shrink-0 items-stretch\",\n // Vertical edges on every tab (left on the first, right on all).\n \"border-r border-r-[var(--oh-border)]\",\n index === 0 && \"border-l border-l-[var(--oh-border)]\",\n \"border-b-2 -mb-px transition-colors\",\n isSelected\n ? \"border-b-white text-white\"\n : \"border-b-transparent text-[var(--oh-muted)] hover:text-white hover:border-b-white/25\",\n )}\n >\n <button\n type=\"button\"\n role=\"tab\"\n aria-selected={isSelected}\n onClick={() => onSelectFile(path)}\n title={path}\n data-testid={`file-quick-row-item-${path}`}\n className=\"flex min-w-0 max-w-[160px] items-center pl-2.5 pr-1 text-xs cursor-pointer text-inherit\"\n >\n <span className=\"truncate\">{fileName}</span>\n </button>\n <button\n type=\"button\"\n data-testid={`file-quick-row-close-${path}`}\n aria-label={t(I18nKey.FILES$CLOSE_TAB, { path })}\n title={t(I18nKey.FILES$CLOSE_TAB, { path })}\n className={cn(\n \"inline-flex items-center justify-center size-5 self-center mr-1 rounded-sm shrink-0 cursor-pointer\",\n \"text-inherit hover:bg-white/10\",\n // Always visible on small / touch-first viewports; hover to\n // reveal on fine pointers (desktop).\n \"opacity-100 transition-opacity\",\n \"md:opacity-0 md:group-hover/file-tab:opacity-100 md:group-focus-within/file-tab:opacity-100\",\n )}\n onClick={() => onCloseFile(path)}\n >\n <CloseIcon width={10} height={10} aria-hidden />\n </button>\n </div>\n );\n })}\n </div>\n ) : (\n <div className=\"flex-1 min-w-0\" />\n )}\n\n {actions ? (\n <div className=\"ml-auto shrink-0 self-center flex items-center gap-1\">\n {actions}\n </div>\n ) : null}\n </div>\n );\n}\n"],"mappings":"8WAqBA,IAAM,EACJ,iFAMF,SAAgB,EAAa,CAC3B,YACA,eACA,eACA,cACA,gBACA,eACA,WACoB,CACpB,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAExC,OACE,EAAA,EAAA,MAAC,MAAD,CACE,UAAU,yGACV,cAAY,0BAFd,EAIE,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,QAAS,EACT,cAAY,6BACZ,eAAc,EACd,aAAY,EACV,EACI,EAAA,QAAQ,qBACR,EAAA,QAAQ,oBACd,EACA,MAAO,EACL,EACI,EAAA,QAAQ,qBACR,EAAA,QAAQ,oBACd,EACA,UAAW,EAAA,GACT,iGACA,mDACA,GAAiB,+BACnB,YAEA,EAAA,EAAA,KAAC,EAAA,SAAD,CAAU,UAAU,UAAU,cAAA,GAAY,YAAa,CAAI,CAAA,CACrD,CAAA,EAEP,EAAU,OAAS,GAClB,EAAA,EAAA,KAAC,MAAD,CACE,KAAK,UACL,aAAY,EAAE,EAAA,QAAQ,YAAY,EAClC,UAAW,EAAA,GACT,4GACA,CACF,WAEC,EAAU,KAAK,EAAM,IAAU,CAC9B,IAAM,EAAa,IAAiB,EAC9B,EAAW,EAAK,MAAM,GAAG,EAAE,IAAI,GAAK,EAC1C,OACE,EAAA,EAAA,MAAC,MAAD,CAEE,UAAW,EAAA,GACT,sDAEA,uCACA,IAAU,GAAK,uCACf,sCACA,EACI,4BACA,sFACN,WAXF,EAaE,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,KAAK,MACL,gBAAe,EACf,YAAe,EAAa,CAAI,EAChC,MAAO,EACP,cAAa,uBAAuB,IACpC,UAAU,oGAEV,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,oBAAY,CAAe,CAAA,CACrC,CAAA,GACR,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,cAAa,wBAAwB,IACrC,aAAY,EAAE,EAAA,QAAQ,gBAAiB,CAAE,MAAK,CAAC,EAC/C,MAAO,EAAE,EAAA,QAAQ,gBAAiB,CAAE,MAAK,CAAC,EAC1C,UAAW,EAAA,GACT,qGACA,iCAGA,iCACA,6FACF,EACA,YAAe,EAAY,CAAI,YAE/B,EAAA,EAAA,KAAC,EAAA,QAAD,CAAW,MAAO,GAAI,OAAQ,GAAI,cAAA,EAAa,CAAA,CACzC,CAAA,CACL,GAxCE,CAwCF,CAET,CAAC,CACE,CAAA,GAEL,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,gBAAkB,CAAA,EAGlC,GACC,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,gEACZ,CACE,CAAA,EACH,IACD,GAET"}

package/dist/components/features/files-tab/file-quick-row.d.ts CHANGED Viewed

@@ -1,18 +1,20 @@
+import type { ReactNode } from "react";
 interface FileQuickRowProps {
-    paths: string[];
+    /** Open file tabs only (paths the user or agent has opened). */
+    openPaths: string[];
     selectedPath: string | null;
     onSelectFile: (path: string) => void;
+    onCloseFile: (path: string) => void;
     /** Whether the left-hand file tree is currently visible. */
     isTreeVisible: boolean;
     /** Toggle the visibility of the left-hand file tree. */
     onToggleTree: () => void;
+    /** Trailing actions (e.g. refresh), pinned to the right. */
+    actions?: ReactNode;
 }
 /**
- * Horizontal "quick access" row of files at the top of the file viewer.
- * Important entrypoints (index.html, README.md, package.json, …) appear
- * first. A file-tree toggle on the leading edge shows or hides the full
- * tree on the left — there is no overflow dropdown, so anything that doesn't fit
- * here is reachable by opening the tree.
+ * Horizontal strip of open-file tabs. A path only appears after the user or
+ * agent opens it. Overflow scrolls horizontally without a visible scrollbar.
  */
-export declare function FileQuickRow({ paths, selectedPath, onSelectFile, isTreeVisible, onToggleTree, }: FileQuickRowProps): import("react").JSX.Element;
+export declare function FileQuickRow({ openPaths, selectedPath, onSelectFile, onCloseFile, isTreeVisible, onToggleTree, actions, }: FileQuickRowProps): import("react").JSX.Element;
 export {};

package/dist/components/features/files-tab/file-quick-row.js CHANGED Viewed

@@ -2,42 +2,71 @@ import { useTranslation as e } from "../../../node_modules/react-i18next/dist/es
 import { I18nKey as t } from "../../../i18n/declaration.js";
 import { ListTree as n } from "../../../node_modules/lucide-react/dist/esm/icons/list-tree.js";
 import { cn as r } from "../../../utils/utils.js";
-import { sortFilesByPriority as i } from "../../../utils/file-priority.js";
-import { useMemo as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import i from "../../../icons/u-close.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/components/features/files-tab/file-quick-row.tsx
-function c({ paths: c, selectedPath: l, onSelectFile: u, isTreeVisible: d, onToggleTree: f }) {
-	let { t: p } = e("openhands"), m = a(() => i(c), [c]);
-	return /* @__PURE__ */ s("div", {
-		className: "flex items-center gap-1.5 border-b border-[var(--oh-border)] px-2 py-1.5 min-h-[34px]",
+var s = "[scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden";
+function c({ openPaths: c, selectedPath: l, onSelectFile: u, onCloseFile: d, isTreeVisible: f, onToggleTree: p, actions: m }) {
+	let { t: h } = e("openhands");
+	return /* @__PURE__ */ o("div", {
+		className: "flex h-[34px] shrink-0 items-stretch gap-1.5 overflow-y-hidden border-b border-[var(--oh-border)] px-2",
 		"data-testid": "file-quick-row",
-		children: [/* @__PURE__ */ o("button", {
-			type: "button",
-			onClick: f,
-			"data-testid": "file-quick-row-tree-toggle",
-			"aria-pressed": d,
-			"aria-label": p(d ? t.FILES$HIDE_FILE_TREE : t.FILES$SHOW_FILE_TREE),
-			title: p(d ? t.FILES$HIDE_FILE_TREE : t.FILES$SHOW_FILE_TREE),
-			className: r("shrink-0 inline-flex items-center justify-center w-6 h-6 rounded-md cursor-pointer", "text-[var(--oh-text-tertiary)] hover:bg-tertiary", d && "bg-[var(--oh-surface-raised)]"),
-			children: /* @__PURE__ */ o(n, {
-				className: "w-3 h-3",
-				"aria-hidden": !0,
-				strokeWidth: 2
-			})
-		}), m.length > 0 && /* @__PURE__ */ o("div", {
-			className: "flex flex-nowrap items-center gap-1.5 overflow-hidden flex-1 min-w-0",
-			children: m.map((e) => {
-				let t = l === e;
-				return /* @__PURE__ */ o("button", {
-					type: "button",
-					onClick: () => u(e),
-					title: e,
-					"data-testid": `file-quick-row-item-${e}`,
-					className: r("inline-flex items-center px-2 py-0.5 text-xs whitespace-nowrap rounded-md cursor-pointer", t ? "bg-[var(--oh-interactive-hover)] text-white" : "bg-[var(--oh-surface-raised)] text-[var(--oh-text-tertiary)] hover:bg-tertiary"),
-					children: e
-				}, e);
-			})
-		})]
+		children: [
+			/* @__PURE__ */ a("button", {
+				type: "button",
+				onClick: p,
+				"data-testid": "file-quick-row-tree-toggle",
+				"aria-pressed": f,
+				"aria-label": h(f ? t.FILES$HIDE_FILE_TREE : t.FILES$SHOW_FILE_TREE),
+				title: h(f ? t.FILES$HIDE_FILE_TREE : t.FILES$SHOW_FILE_TREE),
+				className: r("shrink-0 self-center inline-flex items-center justify-center w-6 h-6 rounded-md cursor-pointer", "text-[var(--oh-text-tertiary)] hover:bg-tertiary", f && "bg-[var(--oh-surface-raised)]"),
+				children: /* @__PURE__ */ a(n, {
+					className: "w-3 h-3",
+					"aria-hidden": !0,
+					strokeWidth: 2
+				})
+			}),
+			c.length > 0 ? /* @__PURE__ */ a("div", {
+				role: "tablist",
+				"aria-label": h(t.COMMON$FILES),
+				className: r("flex min-h-0 min-w-0 flex-1 flex-nowrap items-stretch overflow-x-auto overflow-y-hidden overscroll-y-none", s),
+				children: c.map((e, n) => {
+					let s = l === e, c = e.split("/").pop() || e;
+					return /* @__PURE__ */ o("div", {
+						className: r("group/file-tab relative flex shrink-0 items-stretch", "border-r border-r-[var(--oh-border)]", n === 0 && "border-l border-l-[var(--oh-border)]", "border-b-2 -mb-px transition-colors", s ? "border-b-white text-white" : "border-b-transparent text-[var(--oh-muted)] hover:text-white hover:border-b-white/25"),
+						children: [/* @__PURE__ */ a("button", {
+							type: "button",
+							role: "tab",
+							"aria-selected": s,
+							onClick: () => u(e),
+							title: e,
+							"data-testid": `file-quick-row-item-${e}`,
+							className: "flex min-w-0 max-w-[160px] items-center pl-2.5 pr-1 text-xs cursor-pointer text-inherit",
+							children: /* @__PURE__ */ a("span", {
+								className: "truncate",
+								children: c
+							})
+						}), /* @__PURE__ */ a("button", {
+							type: "button",
+							"data-testid": `file-quick-row-close-${e}`,
+							"aria-label": h(t.FILES$CLOSE_TAB, { path: e }),
+							title: h(t.FILES$CLOSE_TAB, { path: e }),
+							className: r("inline-flex items-center justify-center size-5 self-center mr-1 rounded-sm shrink-0 cursor-pointer", "text-inherit hover:bg-white/10", "opacity-100 transition-opacity", "md:opacity-0 md:group-hover/file-tab:opacity-100 md:group-focus-within/file-tab:opacity-100"),
+							onClick: () => d(e),
+							children: /* @__PURE__ */ a(i, {
+								width: 10,
+								height: 10,
+								"aria-hidden": !0
+							})
+						})]
+					}, e);
+				})
+			}) : /* @__PURE__ */ a("div", { className: "flex-1 min-w-0" }),
+			m ? /* @__PURE__ */ a("div", {
+				className: "ml-auto shrink-0 self-center flex items-center gap-1",
+				children: m
+			}) : null
+		]
 	});
 }
 //#endregion

package/dist/components/features/files-tab/file-quick-row.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"file-quick-row.js","names":[],"sources":["../../../../src/components/features/files-tab/file-quick-row.tsx"],"sourcesContent":["import { ListTree } from \"lucide-react\";\nimport { ~~useMemo~~ } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ~~I18nKey }~~ from \"#/~~i18n~~/~~declaration~~\";\nimport { ~~sortFilesByPriority~~ } from \"#/~~utils~~/~~file-priority~~\";\nimport { cn } from \"#/utils/utils\";\n\ninterface FileQuickRowProps {\n paths: string[];\n selectedPath: string \| null;\n onSelectFile: (path: string) => void;\n /** Whether the left-hand file tree is currently visible. /\n isTreeVisible: boolean;\n /* Toggle the visibility of the left-hand file tree. /\n onToggleTree: () => void;\n~~}\n\n/\n~~ ~~Horizontal~~ ~~\"quick~~ ~~access\"~~ ~~row~~ of ~~files~~ at ~~the~~ ~~top~~ of ~~the~~ ~~file~~ ~~viewer.\~~n * ~~Important~~ ~~entrypoints~~ ~~(index.html,~~ ~~README.md,~~ ~~package~~.~~json,~~ …) ~~appear\n~~ * ~~first.~~ A ~~file-tree toggle on~~ the ~~leading~~ ~~edge shows~~ or ~~hides the full~~\n * ~~tree~~ on ~~the~~ ~~left~~ — ~~there~~ is no ~~overflow~~ ~~dropdown, so anything that doesn't fit\n * here is reachable by opening the tree~~.\n */\nexport function FileQuickRow({\n ~~paths~~,\n selectedPath,\n onSelectFile,\n isTreeVisible,\n onToggleTree,\n}: FileQuickRowProps) {\n const { t } = useTranslation(\"openhands\");\n\n ~~const sortedByPriority = useMemo(() => sortFilesByPriority(paths), [paths]);\n\n~~ return (\n <div\n className=\"flex items-~~center~~ gap-1.5 border-b border-[var(--oh-border)] px-2 ~~py-1.5 min-h-[34px]~~\"\n data-testid=\"file-quick-row\"\n >\n <button\n type=\"button\"\n onClick={onToggleTree}\n data-testid=\"file-quick-row-tree-toggle\"\n aria-pressed={isTreeVisible}\n aria-label={t(\n isTreeVisible\n ? I18nKey.FILES$HIDE_FILE_TREE\n : I18nKey.FILES$SHOW_FILE_TREE,\n )}\n title={t(\n isTreeVisible\n ? I18nKey.FILES$HIDE_FILE_TREE\n : I18nKey.FILES$SHOW_FILE_TREE,\n )}\n className={cn(\n \"shrink-0 inline-flex items-center justify-center w-6 h-6 rounded-md cursor-pointer\",\n \"text-[var(--oh-text-tertiary)] hover:bg-tertiary\",\n isTreeVisible && \"bg-[var(--oh-surface-raised)]\",\n )}\n >\n <ListTree className=\"w-3 h-3\" aria-hidden strokeWidth={2} />\n </button>\n\n {~~sortedByPriority~~.length > 0 && (\n <div ~~className~~=\"flex flex-nowrap items-~~center~~ ~~gap~~-~~1.5~~ overflow-hidden ~~flex~~-~~1 min~~-~~w-0~~\">\n {~~sortedByPriority~~.map((path) => {\n const isSelected = selectedPath === path;\n return (\n <~~button~~\n key={path}\n type=\"button\"\n onClick={() => onSelectFile(path)}\n title={path}\n data-testid={`file-quick-row-item-${path}`}\n className={cn(\n \"inline-flex items-center px-2 py-0.5 ~~text~~-xs ~~whitespace~~-~~nowrap~~ rounded-md cursor-pointer\",\n ~~isSelected\n~~ ? \"bg-~~[var(--oh-interactive-~~hover~~)] text~~-white\"\n : \"bg-~~[var(--oh~~-~~surface~~-~~raised)]~~ ~~text~~-~~[var(--oh~~-~~text~~-~~tertiary)]~~ ~~hover~~:bg-~~tertiary~~\",\n )}\n ~~>\n~~ {path}\n </button>\n );\n })}\n </div>\n )}\n </div>\n );\n}\n"],"mappings":"~~;;;;;;;;AAwBA~~,SAAgB,EAAa,EAC3B,~~UACA~~,iBACA,iBACA,kBACA,~~mBACoB~~;CACpB,IAAM,EAAE,SAAM,EAAe,WAAW~~,GAElC,IAAmB,QAAc,EAAoB,CAAK,GAAG,CAAC,CAAK,CAAC~~;~~CAE1E~~,OACE,kBAAC,OAAD;EACE,WAAU;EACV,eAAY;YAFd,~~CAIE,~~kBAAC,UAAD;~~GACE~~,MAAK;~~GACL~~,SAAS;~~GACT~~,eAAY;~~GACZ~~,gBAAc;~~GACd~~,cAAY,EACV,IACI,EAAQ,uBACR,EAAQ,oBACd;~~GACA~~,OAAO,EACL,IACI,EAAQ,uBACR,EAAQ,oBACd;~~GACA~~,WAAW,EACT,~~sFACA~~,oDACA,KAAiB,+BACnB;~~aAEA~~,kBAAC,GAAD;~~IAAU~~,WAAU;~~IAAU~~,eAAA;~~IAAY~~,aAAa;~~GAAI~~,CAAA;~~EACrD~~,CAAA,GAEP,~~EAAiB~~,SAAS,~~KACzB~~,kBAAC,OAAD;~~GAAK~~,~~WAAU~~;~~aACZ~~,~~EAAiB~~,KAAK,~~MAAS~~;~~IAC9B~~,IAAM,IAAa,MAAiB;~~IACpC~~,OACE,kBAAC,UAAD;~~KAEE~~,MAAK;~~KACL~~,eAAe,EAAa,CAAI;~~KAChC~~,OAAO;~~KACP~~,eAAa,uBAAuB;~~KACpC~~,WAAW,EACT,~~4FACA~~,~~IACI~~,~~gDACA~~,~~gFACN~~;~~eAEC~~;~~IACK~~,~~GAbD~~,~~CAaC~~;~~GAEZ~~,CAAC;~~EACE~~,CAAA,~~CAEJ~~;;AAET"}
1	+ {"version":3,"file":"file-quick-row.js","names":[],"sources":["../../../../src/components/features/files-tab/file-quick-row.tsx"],"sourcesContent":["import { ListTree } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport CloseIcon from \"#/icons/u-close.svg?react\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\n\ninterface FileQuickRowProps {\n /** Open file tabs only (paths the user or agent has opened). /\n openPaths: string[];\n selectedPath: string \| null;\n onSelectFile: (path: string) => void;\n onCloseFile: (path: string) => void;\n /* Whether the left-hand file tree is currently visible. /\n isTreeVisible: boolean;\n /* Toggle the visibility of the left-hand file tree. /\n onToggleTree: () => void;\n /* Trailing actions (e.g. refresh), pinned to the right. /\n actions?: ReactNode;\n}\n\nconst HIDDEN_SCROLLBAR_CLASSNAME =\n \"[scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden\";\n\n/\n Horizontal strip of open-file tabs. A path only appears after the user or\n * agent opens it. Overflow scrolls horizontally without a visible scrollbar.\n */\nexport function FileQuickRow({\n openPaths,\n selectedPath,\n onSelectFile,\n onCloseFile,\n isTreeVisible,\n onToggleTree,\n actions,\n}: FileQuickRowProps) {\n const { t } = useTranslation(\"openhands\");\n\n return (\n <div\n className=\"flex h-[34px] shrink-0 items-stretch gap-1.5 overflow-y-hidden border-b border-[var(--oh-border)] px-2\"\n data-testid=\"file-quick-row\"\n >\n <button\n type=\"button\"\n onClick={onToggleTree}\n data-testid=\"file-quick-row-tree-toggle\"\n aria-pressed={isTreeVisible}\n aria-label={t(\n isTreeVisible\n ? I18nKey.FILES$HIDE_FILE_TREE\n : I18nKey.FILES$SHOW_FILE_TREE,\n )}\n title={t(\n isTreeVisible\n ? I18nKey.FILES$HIDE_FILE_TREE\n : I18nKey.FILES$SHOW_FILE_TREE,\n )}\n className={cn(\n \"shrink-0 self-center inline-flex items-center justify-center w-6 h-6 rounded-md cursor-pointer\",\n \"text-[var(--oh-text-tertiary)] hover:bg-tertiary\",\n isTreeVisible && \"bg-[var(--oh-surface-raised)]\",\n )}\n >\n <ListTree className=\"w-3 h-3\" aria-hidden strokeWidth={2} />\n </button>\n\n {openPaths.length > 0 ? (\n <div\n role=\"tablist\"\n aria-label={t(I18nKey.COMMON$FILES)}\n className={cn(\n \"flex min-h-0 min-w-0 flex-1 flex-nowrap items-stretch overflow-x-auto overflow-y-hidden overscroll-y-none\",\n HIDDEN_SCROLLBAR_CLASSNAME,\n )}\n >\n {openPaths.map((path, index) => {\n const isSelected = selectedPath === path;\n const fileName = path.split(\"/\").pop() \|\| path;\n return (\n <div\n key={path}\n className={cn(\n \"group/file-tab relative flex shrink-0 items-stretch\",\n // Vertical edges on every tab (left on the first, right on all).\n \"border-r border-r-[var(--oh-border)]\",\n index === 0 && \"border-l border-l-[var(--oh-border)]\",\n \"border-b-2 -mb-px transition-colors\",\n isSelected\n ? \"border-b-white text-white\"\n : \"border-b-transparent text-[var(--oh-muted)] hover:text-white hover:border-b-white/25\",\n )}\n >\n <button\n type=\"button\"\n role=\"tab\"\n aria-selected={isSelected}\n onClick={() => onSelectFile(path)}\n title={path}\n data-testid={`file-quick-row-item-${path}`}\n className=\"flex min-w-0 max-w-[160px] items-center pl-2.5 pr-1 text-xs cursor-pointer text-inherit\"\n >\n <span className=\"truncate\">{fileName}</span>\n </button>\n <button\n type=\"button\"\n data-testid={`file-quick-row-close-${path}`}\n aria-label={t(I18nKey.FILES$CLOSE_TAB, { path })}\n title={t(I18nKey.FILES$CLOSE_TAB, { path })}\n className={cn(\n \"inline-flex items-center justify-center size-5 self-center mr-1 rounded-sm shrink-0 cursor-pointer\",\n \"text-inherit hover:bg-white/10\",\n // Always visible on small / touch-first viewports; hover to\n // reveal on fine pointers (desktop).\n \"opacity-100 transition-opacity\",\n \"md:opacity-0 md:group-hover/file-tab:opacity-100 md:group-focus-within/file-tab:opacity-100\",\n )}\n onClick={() => onCloseFile(path)}\n >\n <CloseIcon width={10} height={10} aria-hidden />\n </button>\n </div>\n );\n })}\n </div>\n ) : (\n <div className=\"flex-1 min-w-0\" />\n )}\n\n {actions ? (\n <div className=\"ml-auto shrink-0 self-center flex items-center gap-1\">\n {actions}\n </div>\n ) : null}\n </div>\n );\n}\n"],"mappings":";;;;;;;AAqBA,IAAM,IACJ;AAMF,SAAgB,EAAa,EAC3B,cACA,iBACA,iBACA,gBACA,kBACA,iBACA,cACoB;CACpB,IAAM,EAAE,SAAM,EAAe,WAAW;CAExC,OACE,kBAAC,OAAD;EACE,WAAU;EACV,eAAY;YAFd;GAIE,kBAAC,UAAD;IACE,MAAK;IACL,SAAS;IACT,eAAY;IACZ,gBAAc;IACd,cAAY,EACV,IACI,EAAQ,uBACR,EAAQ,oBACd;IACA,OAAO,EACL,IACI,EAAQ,uBACR,EAAQ,oBACd;IACA,WAAW,EACT,kGACA,oDACA,KAAiB,+BACnB;cAEA,kBAAC,GAAD;KAAU,WAAU;KAAU,eAAA;KAAY,aAAa;IAAI,CAAA;GACrD,CAAA;GAEP,EAAU,SAAS,IAClB,kBAAC,OAAD;IACE,MAAK;IACL,cAAY,EAAE,EAAQ,YAAY;IAClC,WAAW,EACT,6GACA,CACF;cAEC,EAAU,KAAK,GAAM,MAAU;KAC9B,IAAM,IAAa,MAAiB,GAC9B,IAAW,EAAK,MAAM,GAAG,EAAE,IAAI,KAAK;KAC1C,OACE,kBAAC,OAAD;MAEE,WAAW,EACT,uDAEA,wCACA,MAAU,KAAK,wCACf,uCACA,IACI,8BACA,sFACN;gBAXF,CAaE,kBAAC,UAAD;OACE,MAAK;OACL,MAAK;OACL,iBAAe;OACf,eAAe,EAAa,CAAI;OAChC,OAAO;OACP,eAAa,uBAAuB;OACpC,WAAU;iBAEV,kBAAC,QAAD;QAAM,WAAU;kBAAY;OAAe,CAAA;MACrC,CAAA,GACR,kBAAC,UAAD;OACE,MAAK;OACL,eAAa,wBAAwB;OACrC,cAAY,EAAE,EAAQ,iBAAiB,EAAE,QAAK,CAAC;OAC/C,OAAO,EAAE,EAAQ,iBAAiB,EAAE,QAAK,CAAC;OAC1C,WAAW,EACT,sGACA,kCAGA,kCACA,6FACF;OACA,eAAe,EAAY,CAAI;iBAE/B,kBAAC,GAAD;QAAW,OAAO;QAAI,QAAQ;QAAI,eAAA;OAAa,CAAA;MACzC,CAAA,CACL;QAxCE,CAwCF;IAET,CAAC;GACE,CAAA,IAEL,kBAAC,OAAD,EAAK,WAAU,iBAAkB,CAAA;GAGlC,IACC,kBAAC,OAAD;IAAK,WAAU;cACZ;GACE,CAAA,IACH;EACD;;AAET"}

package/dist/components/features/files-tab/files-tab-tree.constants.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ require("../../../_virtual/_rolldown/runtime.cjs");var e=`files-tab-tree-width`,t=`files-tab-tree-resize-handle`;exports.FILES_TAB_TREE_RESIZE_HANDLE_TEST_ID=t,exports.FILES_TAB_TREE_WIDTH_STORAGE_KEY=e;
2	+ //# sourceMappingURL=files-tab-tree.constants.cjs.map

package/dist/components/features/files-tab/files-tab-tree.constants.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"files-tab-tree.constants.cjs","names":[],"sources":["../../../../src/components/features/files-tab/files-tab-tree.constants.ts"],"sourcesContent":["/** Persisted pixel width of the Files tab tree sidebar. */\nexport const FILES_TAB_TREE_WIDTH_STORAGE_KEY = \"files-tab-tree-width\";\n\n/** Matches the previous fixed `w-56` (14rem) tree width. */\nexport const FILES_TAB_TREE_DEFAULT_WIDTH_PX = 224;\nexport const FILES_TAB_TREE_MIN_WIDTH_PX = 160;\nexport const FILES_TAB_TREE_MAX_WIDTH_PX = 480;\n\nexport const FILES_TAB_TREE_RESIZE_HANDLE_TEST_ID =\n \"files-tab-tree-resize-handle\";\n"],"mappings":"mDACA,IAAa,EAAmC,uBAOnC,EACX"}

package/dist/components/features/files-tab/files-tab-tree.constants.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+/** Persisted pixel width of the Files tab tree sidebar. */
+export declare const FILES_TAB_TREE_WIDTH_STORAGE_KEY = "files-tab-tree-width";
+/** Matches the previous fixed `w-56` (14rem) tree width. */
+export declare const FILES_TAB_TREE_DEFAULT_WIDTH_PX = 224;
+export declare const FILES_TAB_TREE_MIN_WIDTH_PX = 160;
+export declare const FILES_TAB_TREE_MAX_WIDTH_PX = 480;
+export declare const FILES_TAB_TREE_RESIZE_HANDLE_TEST_ID = "files-tab-tree-resize-handle";

package/dist/components/features/files-tab/files-tab-tree.constants.js ADDED Viewed

@@ -0,0 +1,6 @@
+//#region src/components/features/files-tab/files-tab-tree.constants.ts
+var e = "files-tab-tree-width", t = "files-tab-tree-resize-handle";
+//#endregion
+export { t as FILES_TAB_TREE_RESIZE_HANDLE_TEST_ID, e as FILES_TAB_TREE_WIDTH_STORAGE_KEY };
+//# sourceMappingURL=files-tab-tree.constants.js.map

package/dist/components/features/files-tab/files-tab-tree.constants.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"files-tab-tree.constants.js","names":[],"sources":["../../../../src/components/features/files-tab/files-tab-tree.constants.ts"],"sourcesContent":["/** Persisted pixel width of the Files tab tree sidebar. */\nexport const FILES_TAB_TREE_WIDTH_STORAGE_KEY = \"files-tab-tree-width\";\n\n/** Matches the previous fixed `w-56` (14rem) tree width. */\nexport const FILES_TAB_TREE_DEFAULT_WIDTH_PX = 224;\nexport const FILES_TAB_TREE_MIN_WIDTH_PX = 160;\nexport const FILES_TAB_TREE_MAX_WIDTH_PX = 480;\n\nexport const FILES_TAB_TREE_RESIZE_HANDLE_TEST_ID =\n \"files-tab-tree-resize-handle\";\n"],"mappings":";AACA,IAAa,IAAmC,wBAOnC,IACX"}

package/dist/components/features/files-tab/segmented-toggle.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../utils/utils.cjs");let t=require("react/jsx-runtime");function n({value:n,options:r,onChange:i,ariaLabel:a,testId:o}){return(0,t.jsx)(`div`,{role:`radiogroup`,"aria-label":a,"data-testid":o,className:`inline-flex items-center rounded-md bg-[var(--oh-surface-raised)] p-0.5 text-xs`,children:r.map(r=>{let a=r.value===n;return(0,t.jsxs)(`button`,{type:`button`,role:`radio`,"aria-checked":a,"data-testid":o?`${o}-option-${r.value}`:void 0,onClick:()=>i(r.value),className:e.cn(`inline-flex items-center gap-1.5 px-2.5 py-1 rounded cursor-pointer transition-colors`,a?`bg-[var(--oh-interactive-hover)] text-white`:`text-[var(--oh-muted)] hover:text-white`),children:[r.icon?(0,t.jsx)(`span`,{className:`inline-flex size-3.5 shrink-0 items-center justify-center [&_svg]:size-3.5`,children:r.icon}):null,r.label]},r.value)})})}exports.SegmentedToggle=n;
+require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../utils/utils.cjs");let t=require("react/jsx-runtime");function n({value:n,options:r,onChange:i,ariaLabel:a,testId:o,className:s,equalWidth:c=!1}){return(0,t.jsx)(`div`,{role:`radiogroup`,"aria-label":a,"data-testid":o,className:e.cn(c?`flex w-full`:`inline-flex`,`items-center rounded-md bg-[var(--oh-surface-raised)] p-0.5 text-xs`,s),children:r.map(r=>{let a=r.value===n;return(0,t.jsxs)(`button`,{type:`button`,role:`radio`,"aria-checked":a,"data-testid":o?`${o}-option-${r.value}`:void 0,onClick:()=>i(r.value),className:e.cn(`inline-flex items-center gap-1.5 px-2 py-0.5 rounded cursor-pointer transition-colors`,c&&`flex-1 justify-center text-center`,a?`bg-[var(--oh-interactive-hover)] text-white`:`text-[var(--oh-muted)] hover:text-white`),children:[r.icon,r.label]},r.value)})})}exports.SegmentedToggle=n;
 //# sourceMappingURL=segmented-toggle.cjs.map

package/dist/components/features/files-tab/segmented-toggle.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"segmented-toggle.cjs","names":[],"sources":["../../../../src/components/features/files-tab/segmented-toggle.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"#/utils/utils\";\n\ninterface SegmentedToggleOption<T extends string> {\n value: T;\n label: string;\n icon?: ReactNode;\n}\n\ninterface SegmentedToggleProps<T extends string> {\n value: T;\n options: SegmentedToggleOption<T>[];\n onChange: (value: T) => void;\n ariaLabel: string;\n testId?: string;\n}\n\n/*\n Lightweight 2-state segmented control used for the files-tab toggles\n * (\"~~Diff view\" on/off, \"~~Rich\"/\"Plain\"). ~~Kept~~ ~~local~~ ~~because~~ ~~the~~ ~~existing\n~~ * ~~shared switch components are heavier than what we need here~~.\n */\nexport function SegmentedToggle<T extends string>({\n value,\n options,\n onChange,\n ariaLabel,\n testId,\n}: SegmentedToggleProps<T>) {\n return (\n <div\n role=\"radiogroup\"\n aria-label={ariaLabel}\n data-testid={testId}\n className=\"inline-flex items-center rounded-md bg-[var(--oh-surface-raised)] p-0.5 text-xs\"\n >\n {options.map((option) => {\n const isActive = option.value === value;\n return (\n <button\n key={option.value}\n type=\"button\"\n role=\"radio\"\n aria-checked={isActive}\n data-testid={\n testId ? `${testId}-option-${option.value}` : undefined\n }\n onClick={() => onChange(option.value)}\n className={cn(\n \"inline-flex items-center gap-1.5 px-2.5 py-1 rounded cursor-pointer transition-colors\",\n isActive\n ? \"bg-[var(--oh-interactive-hover)] text-white\"\n : \"text-[var(--oh-muted)] hover:text-white\",\n )}\n >\n {option.icon ~~? (\n <span className=\"inline-flex size-3.5 shrink-0 items-center justify-center [&_svg]:size-3.5\">\n {option.icon~~}\n ~~</span>\n~~ ~~) : null}\n~~ {option.label}\n </button>\n );\n })}\n </div>\n );\n}\n"],"mappings":"~~kIAsBA~~,SAAgB,EAAkC,CAChD,QACA,UACA,WACA,YACA,~~UAC0B~~,CAC1B,OACE,EAAA,EAAA,KAAC,MAAD,CACE,KAAK,aACL,aAAY,EACZ,cAAa,EACb,~~UAAU~~,~~2FAET~~,EAAQ,IAAK,GAAW,CACvB,IAAM,EAAW,EAAO,QAAU,EAClC,OACE,EAAA,EAAA,MAAC,SAAD,CAEE,KAAK,SACL,KAAK,QACL,eAAc,EACd,cACE,EAAS,GAAG,EAAO,UAAU,EAAO,QAAU,IAAA,GAEhD,YAAe,EAAS,EAAO,KAAK,EACpC,UAAW,EAAA,GACT,wFACA,EACI,8CACA,yCACN,~~WAdF~~,~~CAgBG~~,EAAO,~~MACN~~,~~EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,sFACb,~~EAAO,~~IACJ,CAAA,EACJ,KACH,EAAO,~~KACF,~~GArBD~~,EAAO,~~KAqBN~~,CAEZ,CAAC,CACE,CAAA,CAET"}
1	+ {"version":3,"file":"segmented-toggle.cjs","names":[],"sources":["../../../../src/components/features/files-tab/segmented-toggle.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"#/utils/utils\";\n\ninterface SegmentedToggleOption<T extends string> {\n value: T;\n label: string;\n icon?: ReactNode;\n}\n\ninterface SegmentedToggleProps<T extends string> {\n value: T;\n options: SegmentedToggleOption<T>[];\n onChange: (value: T) => void;\n ariaLabel: string;\n testId?: string;\n className?: string;\n /** Stretch the control and give each option an equal share of the width. /\n equalWidth?: boolean;\n}\n\n/\n Lightweight 2-state segmented control used for the files-tab toggles\n * (\"Rich\"/\"Plain\") and a few other compact two-way choices.\n */\nexport function SegmentedToggle<T extends string>({\n value,\n options,\n onChange,\n ariaLabel,\n testId,\n className,\n equalWidth = false,\n}: SegmentedToggleProps<T>) {\n return (\n <div\n role=\"radiogroup\"\n aria-label={ariaLabel}\n data-testid={testId}\n className={cn(\n equalWidth ? \"flex w-full\" : \"inline-flex\",\n \"items-center rounded-md bg-[var(--oh-surface-raised)] p-0.5 text-xs\",\n className,\n )}\n >\n {options.map((option) => {\n const isActive = option.value === value;\n return (\n <button\n key={option.value}\n type=\"button\"\n role=\"radio\"\n aria-checked={isActive}\n data-testid={\n testId ? `${testId}-option-${option.value}` : undefined\n }\n onClick={() => onChange(option.value)}\n className={cn(\n \"inline-flex items-center gap-1.5 px-2 py-0.5 rounded cursor-pointer transition-colors\",\n equalWidth && \"flex-1 justify-center text-center\",\n isActive\n ? \"bg-[var(--oh-interactive-hover)] text-white\"\n : \"text-[var(--oh-muted)] hover:text-white\",\n )}\n >\n {option.icon}\n {option.label}\n </button>\n );\n })}\n </div>\n );\n}\n"],"mappings":"kIAwBA,SAAgB,EAAkC,CAChD,QACA,UACA,WACA,YACA,SACA,YACA,aAAa,IACa,CAC1B,OACE,EAAA,EAAA,KAAC,MAAD,CACE,KAAK,aACL,aAAY,EACZ,cAAa,EACb,UAAW,EAAA,GACT,EAAa,cAAgB,cAC7B,sEACA,CACF,WAEC,EAAQ,IAAK,GAAW,CACvB,IAAM,EAAW,EAAO,QAAU,EAClC,OACE,EAAA,EAAA,MAAC,SAAD,CAEE,KAAK,SACL,KAAK,QACL,eAAc,EACd,cACE,EAAS,GAAG,EAAO,UAAU,EAAO,QAAU,IAAA,GAEhD,YAAe,EAAS,EAAO,KAAK,EACpC,UAAW,EAAA,GACT,wFACA,GAAc,oCACd,EACI,8CACA,yCACN,WAfF,CAiBG,EAAO,KACP,EAAO,KACF,GAlBD,EAAO,KAkBN,CAEZ,CAAC,CACE,CAAA,CAET"}

package/dist/components/features/files-tab/segmented-toggle.d.ts CHANGED Viewed

@@ -10,11 +10,13 @@ interface SegmentedToggleProps<T extends string> {
     onChange: (value: T) => void;
     ariaLabel: string;
     testId?: string;
+    className?: string;
+    /** Stretch the control and give each option an equal share of the width. */
+    equalWidth?: boolean;
 }
 /**
  * Lightweight 2-state segmented control used for the files-tab toggles
- * ("Diff view" on/off, "Rich"/"Plain"). Kept local because the existing
- * shared switch components are heavier than what we need here.
+ * ("Rich"/"Plain") and a few other compact two-way choices.
  */
-export declare function SegmentedToggle<T extends string>({ value, options, onChange, ariaLabel, testId, }: SegmentedToggleProps<T>): import("react").JSX.Element;
+export declare function SegmentedToggle<T extends string>({ value, options, onChange, ariaLabel, testId, className, equalWidth, }: SegmentedToggleProps<T>): import("react").JSX.Element;
 export {};