@openhands/agent-canvas 1.13.0 → 1.15.0

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

@@ -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"}
+{"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

@@ -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

@@ -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"}
+{"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

@@ -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

@@ -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

@@ -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"}
+{"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

@@ -0,0 +1,2 @@
+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;
+//# sourceMappingURL=files-tab-tree.constants.cjs.map

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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"}
+{"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

@@ -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 {};

package/dist/components/features/files-tab/segmented-toggle.js

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

package/dist/components/features/files-tab/segmented-toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-toggle.js","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":";;;AAsBA,SAAgB,EAAkC,EAChD,UACA,YACA,aACA,cACA,aAC0B;CAC1B,OACE,kBAAC,OAAD;EACE,MAAK;EACL,cAAY;EACZ,eAAa;EACb,WAAU;YAET,EAAQ,KAAK,MAAW;GACvB,IAAM,IAAW,EAAO,UAAU;GAClC,OACE,kBAAC,UAAD;IAEE,MAAK;IACL,MAAK;IACL,gBAAc;IACd,eACE,IAAS,GAAG,EAAO,UAAU,EAAO,UAAU,KAAA;IAEhD,eAAe,EAAS,EAAO,KAAK;IACpC,WAAW,EACT,yFACA,IACI,gDACA,yCACN;cAdF,CAgBG,EAAO,OACN,kBAAC,QAAD;KAAM,WAAU;eACb,EAAO;IACJ,CAAA,IACJ,MACH,EAAO,KACF;MArBD,EAAO,KAqBN;EAEZ,CAAC;CACE,CAAA;AAET"}
+{"version":3,"file":"segmented-toggle.js","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":";;;AAwBA,SAAgB,EAAkC,EAChD,UACA,YACA,aACA,cACA,WACA,cACA,gBAAa,MACa;CAC1B,OACE,kBAAC,OAAD;EACE,MAAK;EACL,cAAY;EACZ,eAAa;EACb,WAAW,EACT,IAAa,gBAAgB,eAC7B,uEACA,CACF;YAEC,EAAQ,KAAK,MAAW;GACvB,IAAM,IAAW,EAAO,UAAU;GAClC,OACE,kBAAC,UAAD;IAEE,MAAK;IACL,MAAK;IACL,gBAAc;IACd,eACE,IAAS,GAAG,EAAO,UAAU,EAAO,UAAU,KAAA;IAEhD,eAAe,EAAS,EAAO,KAAK;IACpC,WAAW,EACT,yFACA,KAAc,qCACd,IACI,gDACA,yCACN;cAfF,CAiBG,EAAO,MACP,EAAO,KACF;MAlBD,EAAO,KAkBN;EAEZ,CAAC;CACE,CAAA;AAET"}

package/dist/components/features/files-tab/tree-node.cjs

@@ -1,2 +1,2 @@
-require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../utils/utils.cjs"),t=require("../../../icons/file.cjs"),n=require("../../../icons/folder.cjs");let r=require("react"),i=require("react/jsx-runtime");function a({node:o,depth:s,selectedPath:c,onSelectFile:l}){let[u,d]=(0,r.useState)(!1),f=8+s*12;if(o.isDirectory)return(0,i.jsxs)(`li`,{children:[(0,i.jsxs)(`button`,{type:`button`,onClick:()=>d(e=>!e),"aria-expanded":u,"data-testid":`file-tree-dir-${o.path}`,className:e.cn(`flex w-full items-center gap-1.5 py-1 pr-2 text-left text-sm text-white`,`hover:bg-tertiary cursor-pointer`),style:{paddingLeft:`${f}px`},children:[(0,i.jsx)(`span`,{"aria-hidden":!0,className:e.cn(`inline-block w-3 text-[10px] text-[var(--oh-muted)] transition-transform`,u?`rotate-90`:`rotate-0`),children:`▶`}),(0,i.jsx)(n.default,{className:`w-3.5 h-3.5 shrink-0`}),(0,i.jsx)(`span`,{className:`truncate`,children:o.name})]}),u&&o.children.length>0&&(0,i.jsx)(`ul`,{children:o.children.map(e=>(0,i.jsx)(a,{node:e,depth:s+1,selectedPath:c,onSelectFile:l},e.path))})]});let p=c===o.path;return(0,i.jsx)(`li`,{children:(0,i.jsxs)(`button`,{type:`button`,onClick:()=>l(o.path),"data-testid":`file-tree-file-${o.path}`,className:e.cn(`flex w-full items-center gap-1.5 py-1 pr-2 text-left text-sm`,`hover:bg-tertiary cursor-pointer`,p?`bg-[var(--oh-interactive-hover)] text-white`:`text-[var(--oh-text-tertiary)]`),style:{paddingLeft:`${f+16}px`},children:[(0,i.jsx)(t.default,{className:`w-3.5 h-3.5 shrink-0`}),(0,i.jsx)(`span`,{className:`truncate`,children:o.name})]})})}exports.TreeNode=a;
+require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../node_modules/lucide-react/dist/esm/icons/chevron-down.cjs"),t=require("../../../node_modules/lucide-react/dist/esm/icons/chevron-right.cjs"),n=require("../../../utils/utils.cjs"),r=require("../../../icons/file.cjs"),i=require("../../../icons/folder.cjs");let a=require("react"),o=require("react/jsx-runtime");function s({node:c,depth:l,selectedPath:u,onSelectFile:d}){let[f,p]=(0,a.useState)(!1),m=8+l*12;if(c.isDirectory)return(0,o.jsxs)(`li`,{children:[(0,o.jsxs)(`button`,{type:`button`,onClick:()=>p(e=>!e),"aria-expanded":f,"data-testid":`file-tree-dir-${c.path}`,className:n.cn(`flex w-full items-center gap-1.5 py-1 pr-2 text-left text-sm text-white`,`hover:bg-tertiary cursor-pointer`),style:{paddingLeft:`${m}px`},children:[(0,o.jsx)(`span`,{"aria-hidden":!0,className:`inline-flex w-3.5 shrink-0 items-center justify-center text-[var(--oh-muted)]`,children:f?(0,o.jsx)(e.ChevronDown,{className:`w-3.5 h-3.5`}):(0,o.jsx)(t.ChevronRight,{className:`w-3.5 h-3.5`})}),(0,o.jsx)(i.default,{className:`w-3.5 h-3.5 shrink-0`}),(0,o.jsx)(`span`,{className:`truncate`,children:c.name})]}),f&&c.children.length>0&&(0,o.jsx)(`ul`,{children:c.children.map(e=>(0,o.jsx)(s,{node:e,depth:l+1,selectedPath:u,onSelectFile:d},e.path))})]});let h=u===c.path;return(0,o.jsx)(`li`,{children:(0,o.jsxs)(`button`,{type:`button`,onClick:()=>d(c.path),"data-testid":`file-tree-file-${c.path}`,className:n.cn(`flex w-full items-center gap-1.5 py-1 pr-2 text-left text-sm`,`hover:bg-tertiary cursor-pointer`,h?`bg-[var(--oh-interactive-hover)] text-white`:`text-[var(--oh-text-tertiary)]`),style:{paddingLeft:`${m+16}px`},children:[(0,o.jsx)(r.default,{className:`w-3.5 h-3.5 shrink-0`}),(0,o.jsx)(`span`,{className:`truncate`,children:c.name})]})})}exports.TreeNode=s;
 //# sourceMappingURL=tree-node.cjs.map

package/dist/components/features/files-tab/tree-node.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tree-node.cjs","names":[],"sources":["../../../../src/components/features/files-tab/tree-node.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport FileIcon from \"#/icons/file.svg?react\";\nimport FolderIcon from \"#/icons/folder.svg?react\";\nimport { FileTreeNode } from \"#/utils/file-tree\";\nimport { cn } from \"#/utils/utils\";\n\ninterface TreeNodeProps {\n  node: FileTreeNode;\n  depth: number;\n  selectedPath: string | null;\n  onSelectFile: (path: string) => void;\n}\n\nexport function TreeNode({\n  node,\n  depth,\n  selectedPath,\n  onSelectFile,\n}: TreeNodeProps) {\n  const [isOpen, setIsOpen] = useState(false);\n  const indentPx = 8 + depth * 12;\n\n  if (node.isDirectory) {\n    return (\n      <li>\n        <button\n          type=\"button\"\n          onClick={() => setIsOpen((prev) => !prev)}\n          aria-expanded={isOpen}\n          data-testid={`file-tree-dir-${node.path}`}\n          className={cn(\n            \"flex w-full items-center gap-1.5 py-1 pr-2 text-left text-sm text-white\",\n            \"hover:bg-tertiary cursor-pointer\",\n          )}\n          // per-row indentation computed from tree depth at runtime\n          style={{ paddingLeft: `${indentPx}px` }}\n        >\n          <span\n            aria-hidden\n            className={cn(\n              \"inline-block w-3 text-[10px] text-[var(--oh-muted)] transition-transform\",\n              isOpen ? \"rotate-90\" : \"rotate-0\",\n            )}\n          >\n            ▶\n          </span>\n          <FolderIcon className=\"w-3.5 h-3.5 shrink-0\" />\n          <span className=\"truncate\">{node.name}</span>\n        </button>\n        {isOpen && node.children.length > 0 && (\n          <ul>\n            {node.children.map((child) => (\n              <TreeNode\n                key={child.path}\n                node={child}\n                depth={depth + 1}\n                selectedPath={selectedPath}\n                onSelectFile={onSelectFile}\n              />\n            ))}\n          </ul>\n        )}\n      </li>\n    );\n  }\n\n  const isSelected = selectedPath === node.path;\n  return (\n    <li>\n      <button\n        type=\"button\"\n        onClick={() => onSelectFile(node.path)}\n        data-testid={`file-tree-file-${node.path}`}\n        className={cn(\n          \"flex w-full items-center gap-1.5 py-1 pr-2 text-left text-sm\",\n          \"hover:bg-tertiary cursor-pointer\",\n          isSelected\n            ? \"bg-[var(--oh-interactive-hover)] text-white\"\n            : \"text-[var(--oh-text-tertiary)]\",\n        )}\n        // per-row indentation computed from tree depth at runtime\n        style={{ paddingLeft: `${indentPx + 16}px` }}\n      >\n        <FileIcon className=\"w-3.5 h-3.5 shrink-0\" />\n        <span className=\"truncate\">{node.name}</span>\n      </button>\n    </li>\n  );\n}\n"],"mappings":"iOAcA,SAAgB,EAAS,CACvB,OACA,QACA,eACA,gBACgB,CAChB,GAAM,CAAC,EAAQ,IAAA,EAAA,EAAA,UAAsB,EAAK,EACpC,EAAW,EAAI,EAAQ,GAE7B,GAAI,EAAK,YACP,OACE,EAAA,EAAA,MAAC,KAAD,CAAA,SAAA,EACE,EAAA,EAAA,MAAC,SAAD,CACE,KAAK,SACL,YAAe,EAAW,GAAS,CAAC,CAAI,EACxC,gBAAe,EACf,cAAa,iBAAiB,EAAK,OACnC,UAAW,EAAA,GACT,0EACA,kCACF,EAEA,MAAO,CAAE,YAAa,GAAG,EAAS,GAAI,WAVxC,EAYE,EAAA,EAAA,KAAC,OAAD,CACE,cAAA,GACA,UAAW,EAAA,GACT,2EACA,EAAS,YAAc,UACzB,WACD,GAEK,CAAA,GACN,EAAA,EAAA,KAAC,EAAA,QAAD,CAAY,UAAU,sBAAwB,CAAA,GAC9C,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,oBAAY,EAAK,IAAW,CAAA,CACtC,IACP,GAAU,EAAK,SAAS,OAAS,IAChC,EAAA,EAAA,KAAC,KAAD,CAAA,SACG,EAAK,SAAS,IAAK,IAClB,EAAA,EAAA,KAAC,EAAD,CAEE,KAAM,EACN,MAAO,EAAQ,EACD,eACA,cACf,EALM,EAAM,IAKZ,CACF,CACC,CAAA,CAEJ,CAAA,CAAA,EAIR,IAAM,EAAa,IAAiB,EAAK,KACzC,OACE,EAAA,EAAA,KAAC,KAAD,CAAA,UACE,EAAA,EAAA,MAAC,SAAD,CACE,KAAK,SACL,YAAe,EAAa,EAAK,IAAI,EACrC,cAAa,kBAAkB,EAAK,OACpC,UAAW,EAAA,GACT,+DACA,mCACA,EACI,8CACA,gCACN,EAEA,MAAO,CAAE,YAAa,GAAG,EAAW,GAAG,GAAI,WAZ7C,EAcE,EAAA,EAAA,KAAC,EAAA,QAAD,CAAU,UAAU,sBAAwB,CAAA,GAC5C,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,oBAAY,EAAK,IAAW,CAAA,CACtC,GACN,CAAA,CAER"}
+{"version":3,"file":"tree-node.cjs","names":[],"sources":["../../../../src/components/features/files-tab/tree-node.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { ChevronDown, ChevronRight } from \"lucide-react\";\n\nimport FileIcon from \"#/icons/file.svg?react\";\nimport FolderIcon from \"#/icons/folder.svg?react\";\nimport { FileTreeNode } from \"#/utils/file-tree\";\nimport { cn } from \"#/utils/utils\";\n\ninterface TreeNodeProps {\n  node: FileTreeNode;\n  depth: number;\n  selectedPath: string | null;\n  onSelectFile: (path: string) => void;\n}\n\nexport function TreeNode({\n  node,\n  depth,\n  selectedPath,\n  onSelectFile,\n}: TreeNodeProps) {\n  const [isOpen, setIsOpen] = useState(false);\n  const indentPx = 8 + depth * 12;\n\n  if (node.isDirectory) {\n    return (\n      <li>\n        <button\n          type=\"button\"\n          onClick={() => setIsOpen((prev) => !prev)}\n          aria-expanded={isOpen}\n          data-testid={`file-tree-dir-${node.path}`}\n          className={cn(\n            \"flex w-full items-center gap-1.5 py-1 pr-2 text-left text-sm text-white\",\n            \"hover:bg-tertiary cursor-pointer\",\n          )}\n          // per-row indentation computed from tree depth at runtime\n          style={{ paddingLeft: `${indentPx}px` }}\n        >\n          <span\n            aria-hidden\n            className=\"inline-flex w-3.5 shrink-0 items-center justify-center text-[var(--oh-muted)]\"\n          >\n            {isOpen ? (\n              <ChevronDown className=\"w-3.5 h-3.5\" />\n            ) : (\n              <ChevronRight className=\"w-3.5 h-3.5\" />\n            )}\n          </span>\n          <FolderIcon className=\"w-3.5 h-3.5 shrink-0\" />\n          <span className=\"truncate\">{node.name}</span>\n        </button>\n        {isOpen && node.children.length > 0 && (\n          <ul>\n            {node.children.map((child) => (\n              <TreeNode\n                key={child.path}\n                node={child}\n                depth={depth + 1}\n                selectedPath={selectedPath}\n                onSelectFile={onSelectFile}\n              />\n            ))}\n          </ul>\n        )}\n      </li>\n    );\n  }\n\n  const isSelected = selectedPath === node.path;\n  return (\n    <li>\n      <button\n        type=\"button\"\n        onClick={() => onSelectFile(node.path)}\n        data-testid={`file-tree-file-${node.path}`}\n        className={cn(\n          \"flex w-full items-center gap-1.5 py-1 pr-2 text-left text-sm\",\n          \"hover:bg-tertiary cursor-pointer\",\n          isSelected\n            ? \"bg-[var(--oh-interactive-hover)] text-white\"\n            : \"text-[var(--oh-text-tertiary)]\",\n        )}\n        // per-row indentation computed from tree depth at runtime\n        style={{ paddingLeft: `${indentPx + 16}px` }}\n      >\n        <FileIcon className=\"w-3.5 h-3.5 shrink-0\" />\n        <span className=\"truncate\">{node.name}</span>\n      </button>\n    </li>\n  );\n}\n"],"mappings":"kYAeA,SAAgB,EAAS,CACvB,OACA,QACA,eACA,gBACgB,CAChB,GAAM,CAAC,EAAQ,IAAA,EAAA,EAAA,UAAsB,EAAK,EACpC,EAAW,EAAI,EAAQ,GAE7B,GAAI,EAAK,YACP,OACE,EAAA,EAAA,MAAC,KAAD,CAAA,SAAA,EACE,EAAA,EAAA,MAAC,SAAD,CACE,KAAK,SACL,YAAe,EAAW,GAAS,CAAC,CAAI,EACxC,gBAAe,EACf,cAAa,iBAAiB,EAAK,OACnC,UAAW,EAAA,GACT,0EACA,kCACF,EAEA,MAAO,CAAE,YAAa,GAAG,EAAS,GAAI,WAVxC,EAYE,EAAA,EAAA,KAAC,OAAD,CACE,cAAA,GACA,UAAU,yFAET,GACC,EAAA,EAAA,KAAC,EAAA,YAAD,CAAa,UAAU,aAAe,CAAA,GAEtC,EAAA,EAAA,KAAC,EAAA,aAAD,CAAc,UAAU,aAAe,CAAA,CAErC,CAAA,GACN,EAAA,EAAA,KAAC,EAAA,QAAD,CAAY,UAAU,sBAAwB,CAAA,GAC9C,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,oBAAY,EAAK,IAAW,CAAA,CACtC,IACP,GAAU,EAAK,SAAS,OAAS,IAChC,EAAA,EAAA,KAAC,KAAD,CAAA,SACG,EAAK,SAAS,IAAK,IAClB,EAAA,EAAA,KAAC,EAAD,CAEE,KAAM,EACN,MAAO,EAAQ,EACD,eACA,cACf,EALM,EAAM,IAKZ,CACF,CACC,CAAA,CAEJ,CAAA,CAAA,EAIR,IAAM,EAAa,IAAiB,EAAK,KACzC,OACE,EAAA,EAAA,KAAC,KAAD,CAAA,UACE,EAAA,EAAA,MAAC,SAAD,CACE,KAAK,SACL,YAAe,EAAa,EAAK,IAAI,EACrC,cAAa,kBAAkB,EAAK,OACpC,UAAW,EAAA,GACT,+DACA,mCACA,EACI,8CACA,gCACN,EAEA,MAAO,CAAE,YAAa,GAAG,EAAW,GAAG,GAAI,WAZ7C,EAcE,EAAA,EAAA,KAAC,EAAA,QAAD,CAAU,UAAU,sBAAwB,CAAA,GAC5C,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,oBAAY,EAAK,IAAW,CAAA,CACtC,GACN,CAAA,CAER"}

package/dist/components/features/files-tab/tree-node.js

@@ -1,50 +1,52 @@
-import { cn as e } from "../../../utils/utils.js";
-import t from "../../../icons/file.js";
-import n from "../../../icons/folder.js";
-import { useState as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { ChevronDown as e } from "../../../node_modules/lucide-react/dist/esm/icons/chevron-down.js";
+import { ChevronRight as t } from "../../../node_modules/lucide-react/dist/esm/icons/chevron-right.js";
+import { cn as n } from "../../../utils/utils.js";
+import r from "../../../icons/file.js";
+import i from "../../../icons/folder.js";
+import { useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/components/features/files-tab/tree-node.tsx
-function o({ node: s, depth: c, selectedPath: l, onSelectFile: u }) {
-	let [d, f] = r(!1), p = 8 + c * 12;
-	if (s.isDirectory) return /* @__PURE__ */ a("li", { children: [/* @__PURE__ */ a("button", {
+function c({ node: l, depth: u, selectedPath: d, onSelectFile: f }) {
+	let [p, m] = a(!1), h = 8 + u * 12;
+	if (l.isDirectory) return /* @__PURE__ */ s("li", { children: [/* @__PURE__ */ s("button", {
 		type: "button",
-		onClick: () => f((e) => !e),
-		"aria-expanded": d,
-		"data-testid": `file-tree-dir-${s.path}`,
-		className: e("flex w-full items-center gap-1.5 py-1 pr-2 text-left text-sm text-white", "hover:bg-tertiary cursor-pointer"),
-		style: { paddingLeft: `${p}px` },
+		onClick: () => m((e) => !e),
+		"aria-expanded": p,
+		"data-testid": `file-tree-dir-${l.path}`,
+		className: n("flex w-full items-center gap-1.5 py-1 pr-2 text-left text-sm text-white", "hover:bg-tertiary cursor-pointer"),
+		style: { paddingLeft: `${h}px` },
 		children: [
-			/* @__PURE__ */ i("span", {
+			/* @__PURE__ */ o("span", {
 				"aria-hidden": !0,
-				className: e("inline-block w-3 text-[10px] text-[var(--oh-muted)] transition-transform", d ? "rotate-90" : "rotate-0"),
-				children: "▶"
+				className: "inline-flex w-3.5 shrink-0 items-center justify-center text-[var(--oh-muted)]",
+				children: o(p ? e : t, { className: "w-3.5 h-3.5" })
 			}),
-			/* @__PURE__ */ i(n, { className: "w-3.5 h-3.5 shrink-0" }),
-			/* @__PURE__ */ i("span", {
+			/* @__PURE__ */ o(i, { className: "w-3.5 h-3.5 shrink-0" }),
+			/* @__PURE__ */ o("span", {
 				className: "truncate",
-				children: s.name
+				children: l.name
 			})
 		]
-	}), d && s.children.length > 0 && /* @__PURE__ */ i("ul", { children: s.children.map((e) => /* @__PURE__ */ i(o, {
+	}), p && l.children.length > 0 && /* @__PURE__ */ o("ul", { children: l.children.map((e) => /* @__PURE__ */ o(c, {
 		node: e,
-		depth: c + 1,
-		selectedPath: l,
-		onSelectFile: u
+		depth: u + 1,
+		selectedPath: d,
+		onSelectFile: f
 	}, e.path)) })] });
-	let m = l === s.path;
-	return /* @__PURE__ */ i("li", { children: /* @__PURE__ */ a("button", {
+	let g = d === l.path;
+	return /* @__PURE__ */ o("li", { children: /* @__PURE__ */ s("button", {
 		type: "button",
-		onClick: () => u(s.path),
-		"data-testid": `file-tree-file-${s.path}`,
-		className: e("flex w-full items-center gap-1.5 py-1 pr-2 text-left text-sm", "hover:bg-tertiary cursor-pointer", m ? "bg-[var(--oh-interactive-hover)] text-white" : "text-[var(--oh-text-tertiary)]"),
-		style: { paddingLeft: `${p + 16}px` },
-		children: [/* @__PURE__ */ i(t, { className: "w-3.5 h-3.5 shrink-0" }), /* @__PURE__ */ i("span", {
+		onClick: () => f(l.path),
+		"data-testid": `file-tree-file-${l.path}`,
+		className: n("flex w-full items-center gap-1.5 py-1 pr-2 text-left text-sm", "hover:bg-tertiary cursor-pointer", g ? "bg-[var(--oh-interactive-hover)] text-white" : "text-[var(--oh-text-tertiary)]"),
+		style: { paddingLeft: `${h + 16}px` },
+		children: [/* @__PURE__ */ o(r, { className: "w-3.5 h-3.5 shrink-0" }), /* @__PURE__ */ o("span", {
 			className: "truncate",
-			children: s.name
+			children: l.name
 		})]
 	}) });
 }
 //#endregion
-export { o as TreeNode };
+export { c as TreeNode };
 
 //# sourceMappingURL=tree-node.js.map

package/dist/components/features/files-tab/tree-node.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree-node.js","names":[],"sources":["../../../../src/components/features/files-tab/tree-node.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport FileIcon from \"#/icons/file.svg?react\";\nimport FolderIcon from \"#/icons/folder.svg?react\";\nimport { FileTreeNode } from \"#/utils/file-tree\";\nimport { cn } from \"#/utils/utils\";\n\ninterface TreeNodeProps {\n  node: FileTreeNode;\n  depth: number;\n  selectedPath: string | null;\n  onSelectFile: (path: string) => void;\n}\n\nexport function TreeNode({\n  node,\n  depth,\n  selectedPath,\n  onSelectFile,\n}: TreeNodeProps) {\n  const [isOpen, setIsOpen] = useState(false);\n  const indentPx = 8 + depth * 12;\n\n  if (node.isDirectory) {\n    return (\n      <li>\n        <button\n          type=\"button\"\n          onClick={() => setIsOpen((prev) => !prev)}\n          aria-expanded={isOpen}\n          data-testid={`file-tree-dir-${node.path}`}\n          className={cn(\n            \"flex w-full items-center gap-1.5 py-1 pr-2 text-left text-sm text-white\",\n            \"hover:bg-tertiary cursor-pointer\",\n          )}\n          // per-row indentation computed from tree depth at runtime\n          style={{ paddingLeft: `${indentPx}px` }}\n        >\n          <span\n            aria-hidden\n            className={cn(\n              \"inline-block w-3 text-[10px] text-[var(--oh-muted)] transition-transform\",\n              isOpen ? \"rotate-90\" : \"rotate-0\",\n            )}\n          >\n            ▶\n          </span>\n          <FolderIcon className=\"w-3.5 h-3.5 shrink-0\" />\n          <span className=\"truncate\">{node.name}</span>\n        </button>\n        {isOpen && node.children.length > 0 && (\n          <ul>\n            {node.children.map((child) => (\n              <TreeNode\n                key={child.path}\n                node={child}\n                depth={depth + 1}\n                selectedPath={selectedPath}\n                onSelectFile={onSelectFile}\n              />\n            ))}\n          </ul>\n        )}\n      </li>\n    );\n  }\n\n  const isSelected = selectedPath === node.path;\n  return (\n    <li>\n      <button\n        type=\"button\"\n        onClick={() => onSelectFile(node.path)}\n        data-testid={`file-tree-file-${node.path}`}\n        className={cn(\n          \"flex w-full items-center gap-1.5 py-1 pr-2 text-left text-sm\",\n          \"hover:bg-tertiary cursor-pointer\",\n          isSelected\n            ? \"bg-[var(--oh-interactive-hover)] text-white\"\n            : \"text-[var(--oh-text-tertiary)]\",\n        )}\n        // per-row indentation computed from tree depth at runtime\n        style={{ paddingLeft: `${indentPx + 16}px` }}\n      >\n        <FileIcon className=\"w-3.5 h-3.5 shrink-0\" />\n        <span className=\"truncate\">{node.name}</span>\n      </button>\n    </li>\n  );\n}\n"],"mappings":";;;;;;AAcA,SAAgB,EAAS,EACvB,SACA,UACA,iBACA,mBACgB;CAChB,IAAM,CAAC,GAAQ,KAAa,EAAS,EAAK,GACpC,IAAW,IAAI,IAAQ;CAE7B,IAAI,EAAK,aACP,OACE,kBAAC,MAAD,EAAA,UAAA,CACE,kBAAC,UAAD;EACE,MAAK;EACL,eAAe,GAAW,MAAS,CAAC,CAAI;EACxC,iBAAe;EACf,eAAa,iBAAiB,EAAK;EACnC,WAAW,EACT,2EACA,kCACF;EAEA,OAAO,EAAE,aAAa,GAAG,EAAS,IAAI;YAVxC;GAYE,kBAAC,QAAD;IACE,eAAA;IACA,WAAW,EACT,4EACA,IAAS,cAAc,UACzB;cACD;GAEK,CAAA;GACN,kBAAC,GAAD,EAAY,WAAU,uBAAwB,CAAA;GAC9C,kBAAC,QAAD;IAAM,WAAU;cAAY,EAAK;GAAW,CAAA;EACtC;KACP,KAAU,EAAK,SAAS,SAAS,KAChC,kBAAC,MAAD,EAAA,UACG,EAAK,SAAS,KAAK,MAClB,kBAAC,GAAD;EAEE,MAAM;EACN,OAAO,IAAQ;EACD;EACA;CACf,GALM,EAAM,IAKZ,CACF,EACC,CAAA,CAEJ,EAAA,CAAA;CAIR,IAAM,IAAa,MAAiB,EAAK;CACzC,OACE,kBAAC,MAAD,EAAA,UACE,kBAAC,UAAD;EACE,MAAK;EACL,eAAe,EAAa,EAAK,IAAI;EACrC,eAAa,kBAAkB,EAAK;EACpC,WAAW,EACT,gEACA,oCACA,IACI,gDACA,gCACN;EAEA,OAAO,EAAE,aAAa,GAAG,IAAW,GAAG,IAAI;YAZ7C,CAcE,kBAAC,GAAD,EAAU,WAAU,uBAAwB,CAAA,GAC5C,kBAAC,QAAD;GAAM,WAAU;aAAY,EAAK;EAAW,CAAA,CACtC;IACN,CAAA;AAER"}
+{"version":3,"file":"tree-node.js","names":[],"sources":["../../../../src/components/features/files-tab/tree-node.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { ChevronDown, ChevronRight } from \"lucide-react\";\n\nimport FileIcon from \"#/icons/file.svg?react\";\nimport FolderIcon from \"#/icons/folder.svg?react\";\nimport { FileTreeNode } from \"#/utils/file-tree\";\nimport { cn } from \"#/utils/utils\";\n\ninterface TreeNodeProps {\n  node: FileTreeNode;\n  depth: number;\n  selectedPath: string | null;\n  onSelectFile: (path: string) => void;\n}\n\nexport function TreeNode({\n  node,\n  depth,\n  selectedPath,\n  onSelectFile,\n}: TreeNodeProps) {\n  const [isOpen, setIsOpen] = useState(false);\n  const indentPx = 8 + depth * 12;\n\n  if (node.isDirectory) {\n    return (\n      <li>\n        <button\n          type=\"button\"\n          onClick={() => setIsOpen((prev) => !prev)}\n          aria-expanded={isOpen}\n          data-testid={`file-tree-dir-${node.path}`}\n          className={cn(\n            \"flex w-full items-center gap-1.5 py-1 pr-2 text-left text-sm text-white\",\n            \"hover:bg-tertiary cursor-pointer\",\n          )}\n          // per-row indentation computed from tree depth at runtime\n          style={{ paddingLeft: `${indentPx}px` }}\n        >\n          <span\n            aria-hidden\n            className=\"inline-flex w-3.5 shrink-0 items-center justify-center text-[var(--oh-muted)]\"\n          >\n            {isOpen ? (\n              <ChevronDown className=\"w-3.5 h-3.5\" />\n            ) : (\n              <ChevronRight className=\"w-3.5 h-3.5\" />\n            )}\n          </span>\n          <FolderIcon className=\"w-3.5 h-3.5 shrink-0\" />\n          <span className=\"truncate\">{node.name}</span>\n        </button>\n        {isOpen && node.children.length > 0 && (\n          <ul>\n            {node.children.map((child) => (\n              <TreeNode\n                key={child.path}\n                node={child}\n                depth={depth + 1}\n                selectedPath={selectedPath}\n                onSelectFile={onSelectFile}\n              />\n            ))}\n          </ul>\n        )}\n      </li>\n    );\n  }\n\n  const isSelected = selectedPath === node.path;\n  return (\n    <li>\n      <button\n        type=\"button\"\n        onClick={() => onSelectFile(node.path)}\n        data-testid={`file-tree-file-${node.path}`}\n        className={cn(\n          \"flex w-full items-center gap-1.5 py-1 pr-2 text-left text-sm\",\n          \"hover:bg-tertiary cursor-pointer\",\n          isSelected\n            ? \"bg-[var(--oh-interactive-hover)] text-white\"\n            : \"text-[var(--oh-text-tertiary)]\",\n        )}\n        // per-row indentation computed from tree depth at runtime\n        style={{ paddingLeft: `${indentPx + 16}px` }}\n      >\n        <FileIcon className=\"w-3.5 h-3.5 shrink-0\" />\n        <span className=\"truncate\">{node.name}</span>\n      </button>\n    </li>\n  );\n}\n"],"mappings":";;;;;;;;AAeA,SAAgB,EAAS,EACvB,SACA,UACA,iBACA,mBACgB;CAChB,IAAM,CAAC,GAAQ,KAAa,EAAS,EAAK,GACpC,IAAW,IAAI,IAAQ;CAE7B,IAAI,EAAK,aACP,OACE,kBAAC,MAAD,EAAA,UAAA,CACE,kBAAC,UAAD;EACE,MAAK;EACL,eAAe,GAAW,MAAS,CAAC,CAAI;EACxC,iBAAe;EACf,eAAa,iBAAiB,EAAK;EACnC,WAAW,EACT,2EACA,kCACF;EAEA,OAAO,EAAE,aAAa,GAAG,EAAS,IAAI;YAVxC;GAYE,kBAAC,QAAD;IACE,eAAA;IACA,WAAU;cAGR,EADD,IACE,IAEA,GAFD,EAAa,WAAU,cAAe,CAEC;GAErC,CAAA;GACN,kBAAC,GAAD,EAAY,WAAU,uBAAwB,CAAA;GAC9C,kBAAC,QAAD;IAAM,WAAU;cAAY,EAAK;GAAW,CAAA;EACtC;KACP,KAAU,EAAK,SAAS,SAAS,KAChC,kBAAC,MAAD,EAAA,UACG,EAAK,SAAS,KAAK,MAClB,kBAAC,GAAD;EAEE,MAAM;EACN,OAAO,IAAQ;EACD;EACA;CACf,GALM,EAAM,IAKZ,CACF,EACC,CAAA,CAEJ,EAAA,CAAA;CAIR,IAAM,IAAa,MAAiB,EAAK;CACzC,OACE,kBAAC,MAAD,EAAA,UACE,kBAAC,UAAD;EACE,MAAK;EACL,eAAe,EAAa,EAAK,IAAI;EACrC,eAAa,kBAAkB,EAAK;EACpC,WAAW,EACT,gEACA,oCACA,IACI,gDACA,gCACN;EAEA,OAAO,EAAE,aAAa,GAAG,IAAW,GAAG,IAAI;YAZ7C,CAcE,kBAAC,GAAD,EAAU,WAAU,uBAAwB,CAAA,GAC5C,kBAAC,QAAD;GAAM,WAAU;aAAY,EAAK;EAAW,CAAA,CACtC;IACN,CAAA;AAER"}

package/dist/components/features/files-tab/workspace-path.cjs

@@ -0,0 +1,2 @@
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),n=require("../../../i18n/declaration.cjs"),r=require("../../shared/buttons/copy-to-clipboard-button.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");function o({path:e}){let{t:o}=t.useTranslation(`openhands`),[s,c]=i.default.useState(!1),l=e?.trim();return i.default.useEffect(()=>{if(!s)return;let e=window.setTimeout(()=>c(!1),2e3);return()=>window.clearTimeout(e)},[s]),l?(0,a.jsxs)(`div`,{className:`flex min-w-0 items-center gap-2 border-b border-[var(--oh-border)] px-3 py-1.5 text-xs`,"data-testid":`files-tab-workspace-path`,children:[(0,a.jsxs)(`span`,{className:`shrink-0 text-[var(--oh-muted)]`,children:[o(n.I18nKey.WORKSPACE$TITLE),`:`]}),(0,a.jsx)(`span`,{className:`min-w-0 flex-1 truncate font-mono`,"data-testid":`files-tab-workspace-path-value`,title:l,children:l}),(0,a.jsx)(r.CopyToClipboardButton,{isHidden:!1,isDisabled:s,onClick:async()=>{await navigator.clipboard.writeText(l),c(!0)},mode:s?`copied`:`copy`})]}):null}exports.WorkspacePath=o;
+//# sourceMappingURL=workspace-path.cjs.map