@openhands/agent-canvas 1.14.0 → 1.16.0

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"workspace-path.cjs","names":[],"sources":["../../../../src/components/features/files-tab/workspace-path.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { CopyToClipboardButton } from \"#/components/shared/buttons/copy-to-clipboard-button\";\nimport { I18nKey } from \"#/i18n/declaration\";\n\ninterface WorkspacePathProps {\n  path?: string | null;\n}\n\nexport function WorkspacePath({ path }: WorkspacePathProps) {\n  const { t } = useTranslation(\"openhands\");\n  const [isCopied, setIsCopied] = React.useState(false);\n  const workspacePath = path?.trim();\n\n  React.useEffect(() => {\n    if (!isCopied) return undefined;\n\n    const timeout = window.setTimeout(() => setIsCopied(false), 2000);\n    return () => window.clearTimeout(timeout);\n  }, [isCopied]);\n\n  if (!workspacePath) return null;\n\n  const handleCopy = async () => {\n    await navigator.clipboard.writeText(workspacePath);\n    setIsCopied(true);\n  };\n\n  return (\n    <div\n      className=\"flex min-w-0 items-center gap-2 border-b border-[var(--oh-border)] px-3 py-1.5 text-xs\"\n      data-testid=\"files-tab-workspace-path\"\n    >\n      <span className=\"shrink-0 text-[var(--oh-muted)]\">\n        {t(I18nKey.WORKSPACE$TITLE)}:\n      </span>\n      <span\n        className=\"min-w-0 flex-1 truncate font-mono\"\n        data-testid=\"files-tab-workspace-path-value\"\n        title={workspacePath}\n      >\n        {workspacePath}\n      </span>\n      <CopyToClipboardButton\n        isHidden={false}\n        isDisabled={isCopied}\n        onClick={handleCopy}\n        mode={isCopied ? \"copied\" : \"copy\"}\n      />\n    </div>\n  );\n}\n"],"mappings":"4TAUA,SAAgB,EAAc,CAAE,QAA4B,CAC1D,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAClC,CAAC,EAAU,GAAe,EAAA,QAAM,SAAS,EAAK,EAC9C,EAAgB,GAAM,KAAK,EAgBjC,OAdA,EAAA,QAAM,cAAgB,CACpB,GAAI,CAAC,EAAU,OAEf,IAAM,EAAU,OAAO,eAAiB,EAAY,EAAK,EAAG,GAAI,EAChE,UAAa,OAAO,aAAa,CAAO,CAC1C,EAAG,CAAC,CAAQ,CAAC,EAER,GAQH,EAAA,EAAA,MAAC,MAAD,CACE,UAAU,yFACV,cAAY,oCAFd,EAIE,EAAA,EAAA,MAAC,OAAD,CAAM,UAAU,2CAAhB,CACG,EAAE,EAAA,QAAQ,eAAe,EAAE,GACxB,KACN,EAAA,EAAA,KAAC,OAAD,CACE,UAAU,oCACV,cAAY,iCACZ,MAAO,WAEN,CACG,CAAA,GACN,EAAA,EAAA,KAAC,EAAA,sBAAD,CACE,SAAU,GACV,WAAY,EACZ,QAAS,SAvBgB,CAC7B,MAAM,UAAU,UAAU,UAAU,CAAa,EACjD,EAAY,EAAI,CAClB,EAqBM,KAAM,EAAW,SAAW,MAC7B,CAAA,CACE,IA5BoB,IA8B7B"}

package/dist/components/features/files-tab/workspace-path.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface WorkspacePathProps {
+    path?: string | null;
+}
+export declare function WorkspacePath({ path }: WorkspacePathProps): React.JSX.Element | null;
+export {};

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

@@ -0,0 +1,41 @@
+import { useTranslation as e } from "../../../node_modules/react-i18next/dist/es/useTranslation.js";
+import { I18nKey as t } from "../../../i18n/declaration.js";
+import { CopyToClipboardButton as n } from "../../shared/buttons/copy-to-clipboard-button.js";
+import r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/features/files-tab/workspace-path.tsx
+function o({ path: o }) {
+	let { t: s } = e("openhands"), [c, l] = r.useState(!1), u = o?.trim();
+	return r.useEffect(() => {
+		if (!c) return;
+		let e = window.setTimeout(() => l(!1), 2e3);
+		return () => window.clearTimeout(e);
+	}, [c]), u ? /* @__PURE__ */ a("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: [
+			/* @__PURE__ */ a("span", {
+				className: "shrink-0 text-[var(--oh-muted)]",
+				children: [s(t.WORKSPACE$TITLE), ":"]
+			}),
+			/* @__PURE__ */ i("span", {
+				className: "min-w-0 flex-1 truncate font-mono",
+				"data-testid": "files-tab-workspace-path-value",
+				title: u,
+				children: u
+			}),
+			/* @__PURE__ */ i(n, {
+				isHidden: !1,
+				isDisabled: c,
+				onClick: async () => {
+					await navigator.clipboard.writeText(u), l(!0);
+				},
+				mode: c ? "copied" : "copy"
+			})
+		]
+	}) : null;
+}
+//#endregion
+export { o as WorkspacePath };
+
+//# sourceMappingURL=workspace-path.js.map

package/dist/components/features/files-tab/workspace-path.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"workspace-path.js","names":[],"sources":["../../../../src/components/features/files-tab/workspace-path.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { CopyToClipboardButton } from \"#/components/shared/buttons/copy-to-clipboard-button\";\nimport { I18nKey } from \"#/i18n/declaration\";\n\ninterface WorkspacePathProps {\n  path?: string | null;\n}\n\nexport function WorkspacePath({ path }: WorkspacePathProps) {\n  const { t } = useTranslation(\"openhands\");\n  const [isCopied, setIsCopied] = React.useState(false);\n  const workspacePath = path?.trim();\n\n  React.useEffect(() => {\n    if (!isCopied) return undefined;\n\n    const timeout = window.setTimeout(() => setIsCopied(false), 2000);\n    return () => window.clearTimeout(timeout);\n  }, [isCopied]);\n\n  if (!workspacePath) return null;\n\n  const handleCopy = async () => {\n    await navigator.clipboard.writeText(workspacePath);\n    setIsCopied(true);\n  };\n\n  return (\n    <div\n      className=\"flex min-w-0 items-center gap-2 border-b border-[var(--oh-border)] px-3 py-1.5 text-xs\"\n      data-testid=\"files-tab-workspace-path\"\n    >\n      <span className=\"shrink-0 text-[var(--oh-muted)]\">\n        {t(I18nKey.WORKSPACE$TITLE)}:\n      </span>\n      <span\n        className=\"min-w-0 flex-1 truncate font-mono\"\n        data-testid=\"files-tab-workspace-path-value\"\n        title={workspacePath}\n      >\n        {workspacePath}\n      </span>\n      <CopyToClipboardButton\n        isHidden={false}\n        isDisabled={isCopied}\n        onClick={handleCopy}\n        mode={isCopied ? \"copied\" : \"copy\"}\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAUA,SAAgB,EAAc,EAAE,WAA4B;CAC1D,IAAM,EAAE,SAAM,EAAe,WAAW,GAClC,CAAC,GAAU,KAAe,EAAM,SAAS,EAAK,GAC9C,IAAgB,GAAM,KAAK;CAgBjC,OAdA,EAAM,gBAAgB;EACpB,IAAI,CAAC,GAAU;EAEf,IAAM,IAAU,OAAO,iBAAiB,EAAY,EAAK,GAAG,GAAI;EAChE,aAAa,OAAO,aAAa,CAAO;CAC1C,GAAG,CAAC,CAAQ,CAAC,GAER,IAQH,kBAAC,OAAD;EACE,WAAU;EACV,eAAY;YAFd;GAIE,kBAAC,QAAD;IAAM,WAAU;cAAhB,CACG,EAAE,EAAQ,eAAe,GAAE,GACxB;;GACN,kBAAC,QAAD;IACE,WAAU;IACV,eAAY;IACZ,OAAO;cAEN;GACG,CAAA;GACN,kBAAC,GAAD;IACE,UAAU;IACV,YAAY;IACZ,SAAS,YAvBgB;KAE7B,AADA,MAAM,UAAU,UAAU,UAAU,CAAa,GACjD,EAAY,EAAI;IAClB;IAqBM,MAAM,IAAW,WAAW;GAC7B,CAAA;EACE;MA5BoB;AA8B7B"}

package/dist/components/features/home/featured-automations/automation-health-indicator.cjs

@@ -0,0 +1,2 @@
+require("../../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../../utils/utils.cjs");let t=require("react/jsx-runtime");function n({health:n}){return n===`success`?(0,t.jsx)(`svg`,{viewBox:`0 0 12 12`,className:`h-2.5 w-2.5 shrink-0 stroke-[var(--oh-status-success)]`,fill:`none`,strokeWidth:2.25,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,children:(0,t.jsx)(`path`,{d:`M2.5 6.5 5 9l4.5-5.5`})}):(0,t.jsx)(`span`,{"aria-hidden":`true`,className:e.cn(`h-1.5 w-1.5 shrink-0 rounded-full`,n===`failed`&&`bg-[var(--oh-status-error)]`,n===`in_progress`&&`animate-pulse bg-[var(--oh-status-success)] motion-reduce:animate-none`,(n===`none`||n===`unknown`)&&`bg-[var(--oh-border)]`)})}exports.AutomationHealthIndicator=n;
+//# sourceMappingURL=automation-health-indicator.cjs.map

package/dist/components/features/home/featured-automations/automation-health-indicator.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"automation-health-indicator.cjs","names":[],"sources":["../../../../../src/components/features/home/featured-automations/automation-health-indicator.tsx"],"sourcesContent":["import { cn } from \"#/utils/utils\";\nimport type { AutomationRunHealth } from \"./automation-run-health\";\n\ninterface AutomationHealthIndicatorProps {\n  health: AutomationRunHealth;\n}\n\n/**\n * Visual-only latest-run health mark. Decorative on purpose: the owning\n * control carries the translated status text (e.g. via sr-only), so the\n * indicator itself is hidden from assistive technology.\n */\nexport function AutomationHealthIndicator({\n  health,\n}: AutomationHealthIndicatorProps) {\n  if (health === \"success\") {\n    return (\n      <svg\n        viewBox=\"0 0 12 12\"\n        className=\"h-2.5 w-2.5 shrink-0 stroke-[var(--oh-status-success)]\"\n        fill=\"none\"\n        strokeWidth={2.25}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M2.5 6.5 5 9l4.5-5.5\" />\n      </svg>\n    );\n  }\n\n  return (\n    <span\n      aria-hidden=\"true\"\n      className={cn(\n        \"h-1.5 w-1.5 shrink-0 rounded-full\",\n        health === \"failed\" && \"bg-[var(--oh-status-error)]\",\n        health === \"in_progress\" &&\n          \"animate-pulse bg-[var(--oh-status-success)] motion-reduce:animate-none\",\n        (health === \"none\" || health === \"unknown\") && \"bg-[var(--oh-border)]\",\n      )}\n    />\n  );\n}\n"],"mappings":"wIAYA,SAAgB,EAA0B,CACxC,UACiC,CAiBjC,OAhBI,IAAW,WAEX,EAAA,EAAA,KAAC,MAAD,CACE,QAAQ,YACR,UAAU,yDACV,KAAK,OACL,YAAa,KACb,cAAc,QACd,eAAe,QACf,cAAY,iBAEZ,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,sBAAwB,CAAA,CAC7B,CAAA,GAKP,EAAA,EAAA,KAAC,OAAD,CACE,cAAY,OACZ,UAAW,EAAA,GACT,oCACA,IAAW,UAAY,8BACvB,IAAW,eACT,0EACD,IAAW,QAAU,IAAW,YAAc,uBACjD,CACD,CAAA,CAEL"}

package/dist/components/features/home/featured-automations/automation-health-indicator.js

@@ -0,0 +1,22 @@
+import { cn as e } from "../../../../utils/utils.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/features/home/featured-automations/automation-health-indicator.tsx
+function n({ health: n }) {
+	return n === "success" ? /* @__PURE__ */ t("svg", {
+		viewBox: "0 0 12 12",
+		className: "h-2.5 w-2.5 shrink-0 stroke-[var(--oh-status-success)]",
+		fill: "none",
+		strokeWidth: 2.25,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ t("path", { d: "M2.5 6.5 5 9l4.5-5.5" })
+	}) : /* @__PURE__ */ t("span", {
+		"aria-hidden": "true",
+		className: e("h-1.5 w-1.5 shrink-0 rounded-full", n === "failed" && "bg-[var(--oh-status-error)]", n === "in_progress" && "animate-pulse bg-[var(--oh-status-success)] motion-reduce:animate-none", (n === "none" || n === "unknown") && "bg-[var(--oh-border)]")
+	});
+}
+//#endregion
+export { n as AutomationHealthIndicator };
+
+//# sourceMappingURL=automation-health-indicator.js.map

package/dist/components/features/home/featured-automations/automation-health-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"automation-health-indicator.js","names":[],"sources":["../../../../../src/components/features/home/featured-automations/automation-health-indicator.tsx"],"sourcesContent":["import { cn } from \"#/utils/utils\";\nimport type { AutomationRunHealth } from \"./automation-run-health\";\n\ninterface AutomationHealthIndicatorProps {\n  health: AutomationRunHealth;\n}\n\n/**\n * Visual-only latest-run health mark. Decorative on purpose: the owning\n * control carries the translated status text (e.g. via sr-only), so the\n * indicator itself is hidden from assistive technology.\n */\nexport function AutomationHealthIndicator({\n  health,\n}: AutomationHealthIndicatorProps) {\n  if (health === \"success\") {\n    return (\n      <svg\n        viewBox=\"0 0 12 12\"\n        className=\"h-2.5 w-2.5 shrink-0 stroke-[var(--oh-status-success)]\"\n        fill=\"none\"\n        strokeWidth={2.25}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M2.5 6.5 5 9l4.5-5.5\" />\n      </svg>\n    );\n  }\n\n  return (\n    <span\n      aria-hidden=\"true\"\n      className={cn(\n        \"h-1.5 w-1.5 shrink-0 rounded-full\",\n        health === \"failed\" && \"bg-[var(--oh-status-error)]\",\n        health === \"in_progress\" &&\n          \"animate-pulse bg-[var(--oh-status-success)] motion-reduce:animate-none\",\n        (health === \"none\" || health === \"unknown\") && \"bg-[var(--oh-border)]\",\n      )}\n    />\n  );\n}\n"],"mappings":";;;AAYA,SAAgB,EAA0B,EACxC,aACiC;CAiBjC,OAhBI,MAAW,YAEX,kBAAC,OAAD;EACE,SAAQ;EACR,WAAU;EACV,MAAK;EACL,aAAa;EACb,eAAc;EACd,gBAAe;EACf,eAAY;YAEZ,kBAAC,QAAD,EAAM,GAAE,uBAAwB,CAAA;CAC7B,CAAA,IAKP,kBAAC,QAAD;EACE,eAAY;EACZ,WAAW,EACT,qCACA,MAAW,YAAY,+BACvB,MAAW,iBACT,2EACD,MAAW,UAAU,MAAW,cAAc,uBACjD;CACD,CAAA;AAEL"}

package/dist/components/features/home/featured-automations/automation-run-activity-metrics.cjs

@@ -0,0 +1,2 @@
+require("../../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../../i18n/declaration.cjs"),t=require("../../../../types/automation.cjs");var n=1e3,r=30*6e4;function i(e,n=Date.now()){let r=e.started_at?new Date(e.started_at).getTime():NaN;if(Number.isNaN(r)||r<=0)return null;if(e.completed_at){let t=new Date(e.completed_at).getTime();return Number.isNaN(t)||t<r?null:t-r}return e.status===t.AutomationRunStatus.PENDING||e.status===t.AutomationRunStatus.RUNNING?Math.max(0,n-r):null}function a(e){if(e==null||e<=0)return 11;let t=Math.log(Math.min(r,Math.max(n,e))/n)/Math.log(r/n);return Math.round(6+t*9)}function o(e){switch(e){case t.AutomationRunStatus.COMPLETED:return`bg-[var(--oh-status-success)]`;case t.AutomationRunStatus.FAILED:return`bg-[var(--oh-status-error)]`;case t.AutomationRunStatus.RUNNING:return`bg-[var(--oh-status-success)] animate-pulse motion-reduce:animate-none`;case t.AutomationRunStatus.PENDING:return`bg-[repeating-linear-gradient(-45deg,var(--oh-muted)_0_1.5px,var(--oh-border)_1.5px_3px)]`;case t.AutomationRunStatus.CANCELLED:return`bg-[var(--oh-muted)]`;default:return`bg-[var(--oh-border)]`}}function s(n){switch(n){case t.AutomationRunStatus.COMPLETED:return e.I18nKey.AUTOMATIONS$DETAIL$SUCCESSFUL;case t.AutomationRunStatus.FAILED:return e.I18nKey.AUTOMATIONS$DETAIL$FAILED;case t.AutomationRunStatus.PENDING:return e.I18nKey.AUTOMATIONS$DETAIL$PENDING;case t.AutomationRunStatus.RUNNING:return e.I18nKey.AUTOMATIONS$DETAIL$RUNNING;case t.AutomationRunStatus.CANCELLED:return e.I18nKey.AUTOMATIONS$DETAIL$CANCELLED;case t.AutomationRunStatus.SKIPPED:return e.I18nKey.AUTOMATIONS$DETAIL$SKIPPED;default:return e.I18nKey.FEATURED_AUTOMATIONS$STATUS_UNKNOWN}}function c(e){return e==null||e<=0?null:e<6e4?`${Math.max(1,Math.round(e/1e3))}s`:e<36e5?`${Math.round(e/6e4)}m`:`${(e/36e5).toFixed(1)}h`}exports.barColorClassForStatus=o,exports.durationMsToSparklineBarHeightPx=a,exports.formatDurationForTitle=c,exports.getAutomationRunDurationMs=i,exports.getAutomationRunStatusLabelKey=s;
+//# sourceMappingURL=automation-run-activity-metrics.cjs.map

package/dist/components/features/home/featured-automations/automation-run-activity-metrics.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"automation-run-activity-metrics.cjs","names":[],"sources":["../../../../../src/components/features/home/featured-automations/automation-run-activity-metrics.ts"],"sourcesContent":["import { I18nKey } from \"#/i18n/declaration\";\nimport { AutomationRunStatus, type AutomationRun } from \"#/types/automation\";\n\n/** Sparkline track height; bars sit on the baseline inside this. */\nexport const AUTOMATION_RUN_ACTIVITY_TRACK_PX = 18;\nexport const AUTOMATION_RUN_ACTIVITY_MIN_BAR_PX = 6;\nexport const AUTOMATION_RUN_ACTIVITY_MAX_BAR_PX = 15;\n/** Used when duration cannot be derived (no timestamps, skipped, etc.). */\nexport const AUTOMATION_RUN_ACTIVITY_UNKNOWN_BAR_PX = 11;\n\nconst MIN_DURATION_MS = 1_000;\n/** Log-scale ceiling so multi-hour runs still fit the track. */\nconst MAX_DURATION_MS = 30 * 60_000;\n\n/**\n * Wall-clock duration for a run, or null when it cannot be measured.\n * In-flight runs use elapsed time since `started_at` when that is usable.\n */\nexport function getAutomationRunDurationMs(\n  run: AutomationRun,\n  nowMs: number = Date.now(),\n): number | null {\n  const startMs = run.started_at ? new Date(run.started_at).getTime() : NaN;\n  if (Number.isNaN(startMs) || startMs <= 0) return null;\n\n  if (run.completed_at) {\n    const endMs = new Date(run.completed_at).getTime();\n    if (Number.isNaN(endMs) || endMs < startMs) return null;\n    return endMs - startMs;\n  }\n\n  if (\n    run.status === AutomationRunStatus.PENDING ||\n    run.status === AutomationRunStatus.RUNNING\n  ) {\n    return Math.max(0, nowMs - startMs);\n  }\n\n  return null;\n}\n\n/** Map duration → bar height (log scale, clamped). Color stays status-driven. */\nexport function durationMsToSparklineBarHeightPx(\n  durationMs: number | null,\n): number {\n  if (durationMs == null || durationMs <= 0) {\n    return AUTOMATION_RUN_ACTIVITY_UNKNOWN_BAR_PX;\n  }\n\n  const clamped = Math.min(\n    MAX_DURATION_MS,\n    Math.max(MIN_DURATION_MS, durationMs),\n  );\n  const t =\n    Math.log(clamped / MIN_DURATION_MS) /\n    Math.log(MAX_DURATION_MS / MIN_DURATION_MS);\n\n  return Math.round(\n    AUTOMATION_RUN_ACTIVITY_MIN_BAR_PX +\n      t *\n        (AUTOMATION_RUN_ACTIVITY_MAX_BAR_PX -\n          AUTOMATION_RUN_ACTIVITY_MIN_BAR_PX),\n  );\n}\n\nexport function barColorClassForStatus(\n  status: AutomationRunStatus | string,\n): string {\n  switch (status) {\n    case AutomationRunStatus.COMPLETED:\n      return \"bg-[var(--oh-status-success)]\";\n    case AutomationRunStatus.FAILED:\n      return \"bg-[var(--oh-status-error)]\";\n    case AutomationRunStatus.RUNNING:\n      return \"bg-[var(--oh-status-success)] animate-pulse motion-reduce:animate-none\";\n    case AutomationRunStatus.PENDING:\n      // Grey hatch so pending reads as queued, distinct from solid cancelled/skipped.\n      return \"bg-[repeating-linear-gradient(-45deg,var(--oh-muted)_0_1.5px,var(--oh-border)_1.5px_3px)]\";\n    case AutomationRunStatus.CANCELLED:\n      return \"bg-[var(--oh-muted)]\";\n    default:\n      return \"bg-[var(--oh-border)]\";\n  }\n}\n\nexport function getAutomationRunStatusLabelKey(\n  status: AutomationRunStatus | string,\n): I18nKey {\n  switch (status) {\n    case AutomationRunStatus.COMPLETED:\n      return I18nKey.AUTOMATIONS$DETAIL$SUCCESSFUL;\n    case AutomationRunStatus.FAILED:\n      return I18nKey.AUTOMATIONS$DETAIL$FAILED;\n    case AutomationRunStatus.PENDING:\n      return I18nKey.AUTOMATIONS$DETAIL$PENDING;\n    case AutomationRunStatus.RUNNING:\n      return I18nKey.AUTOMATIONS$DETAIL$RUNNING;\n    case AutomationRunStatus.CANCELLED:\n      return I18nKey.AUTOMATIONS$DETAIL$CANCELLED;\n    case AutomationRunStatus.SKIPPED:\n      return I18nKey.AUTOMATIONS$DETAIL$SKIPPED;\n    default:\n      return I18nKey.FEATURED_AUTOMATIONS$STATUS_UNKNOWN;\n  }\n}\n\nexport function formatDurationForTitle(\n  durationMs: number | null,\n): string | null {\n  if (durationMs == null || durationMs <= 0) return null;\n  if (durationMs < 60_000) {\n    return `${Math.max(1, Math.round(durationMs / 1000))}s`;\n  }\n  if (durationMs < 3_600_000) {\n    return `${Math.round(durationMs / 60_000)}m`;\n  }\n  return `${(durationMs / 3_600_000).toFixed(1)}h`;\n}\n"],"mappings":"wJAUA,IAAM,EAAkB,IAElB,EAAkB,GAAK,IAM7B,SAAgB,EACd,EACA,EAAgB,KAAK,IAAI,EACV,CACf,IAAM,EAAU,EAAI,WAAa,IAAI,KAAK,EAAI,UAAU,EAAE,QAAQ,EAAI,IACtE,GAAI,OAAO,MAAM,CAAO,GAAK,GAAW,EAAG,OAAO,KAElD,GAAI,EAAI,aAAc,CACpB,IAAM,EAAQ,IAAI,KAAK,EAAI,YAAY,EAAE,QAAQ,EAEjD,OADI,OAAO,MAAM,CAAK,GAAK,EAAQ,EAAgB,KAC5C,EAAQ,CACjB,CASA,OANE,EAAI,SAAW,EAAA,oBAAoB,SACnC,EAAI,SAAW,EAAA,oBAAoB,QAE5B,KAAK,IAAI,EAAG,EAAQ,CAAO,EAG7B,IACT,CAGA,SAAgB,EACd,EACQ,CACR,GAAI,GAAc,MAAQ,GAAc,EACtC,MAAA,IAOF,IAAM,EACJ,KAAK,IALS,KAAK,IACnB,EACA,KAAK,IAAI,EAAiB,CAAU,CAG3B,EAAU,CAAe,EAClC,KAAK,IAAI,EAAkB,CAAe,EAE5C,OAAO,KAAK,MAAA,EAER,EAAA,CAGJ,CACF,CAEA,SAAgB,EACd,EACQ,CACR,OAAQ,EAAR,CACE,KAAK,EAAA,oBAAoB,UACvB,MAAO,gCACT,KAAK,EAAA,oBAAoB,OACvB,MAAO,8BACT,KAAK,EAAA,oBAAoB,QACvB,MAAO,yEACT,KAAK,EAAA,oBAAoB,QAEvB,MAAO,4FACT,KAAK,EAAA,oBAAoB,UACvB,MAAO,uBACT,QACE,MAAO,uBACX,CACF,CAEA,SAAgB,EACd,EACS,CACT,OAAQ,EAAR,CACE,KAAK,EAAA,oBAAoB,UACvB,OAAO,EAAA,QAAQ,8BACjB,KAAK,EAAA,oBAAoB,OACvB,OAAO,EAAA,QAAQ,0BACjB,KAAK,EAAA,oBAAoB,QACvB,OAAO,EAAA,QAAQ,2BACjB,KAAK,EAAA,oBAAoB,QACvB,OAAO,EAAA,QAAQ,2BACjB,KAAK,EAAA,oBAAoB,UACvB,OAAO,EAAA,QAAQ,6BACjB,KAAK,EAAA,oBAAoB,QACvB,OAAO,EAAA,QAAQ,2BACjB,QACE,OAAO,EAAA,QAAQ,mCACnB,CACF,CAEA,SAAgB,EACd,EACe,CAQf,OAPI,GAAc,MAAQ,GAAc,EAAU,KAC9C,EAAa,IACR,GAAG,KAAK,IAAI,EAAG,KAAK,MAAM,EAAa,GAAI,CAAC,EAAE,GAEnD,EAAa,KACR,GAAG,KAAK,MAAM,EAAa,GAAM,EAAE,GAErC,IAAI,EAAa,MAAW,QAAQ,CAAC,EAAE,EAChD"}

package/dist/components/features/home/featured-automations/automation-run-activity-metrics.js

@@ -0,0 +1,45 @@
+import { I18nKey as e } from "../../../../i18n/declaration.js";
+import { AutomationRunStatus as t } from "../../../../types/automation.js";
+var n = 1e3, r = 30 * 6e4;
+function i(e, n = Date.now()) {
+	let r = e.started_at ? new Date(e.started_at).getTime() : NaN;
+	if (Number.isNaN(r) || r <= 0) return null;
+	if (e.completed_at) {
+		let t = new Date(e.completed_at).getTime();
+		return Number.isNaN(t) || t < r ? null : t - r;
+	}
+	return e.status === t.PENDING || e.status === t.RUNNING ? Math.max(0, n - r) : null;
+}
+function a(e) {
+	if (e == null || e <= 0) return 11;
+	let t = Math.log(Math.min(r, Math.max(n, e)) / n) / Math.log(r / n);
+	return Math.round(6 + t * 9);
+}
+function o(e) {
+	switch (e) {
+		case t.COMPLETED: return "bg-[var(--oh-status-success)]";
+		case t.FAILED: return "bg-[var(--oh-status-error)]";
+		case t.RUNNING: return "bg-[var(--oh-status-success)] animate-pulse motion-reduce:animate-none";
+		case t.PENDING: return "bg-[repeating-linear-gradient(-45deg,var(--oh-muted)_0_1.5px,var(--oh-border)_1.5px_3px)]";
+		case t.CANCELLED: return "bg-[var(--oh-muted)]";
+		default: return "bg-[var(--oh-border)]";
+	}
+}
+function s(n) {
+	switch (n) {
+		case t.COMPLETED: return e.AUTOMATIONS$DETAIL$SUCCESSFUL;
+		case t.FAILED: return e.AUTOMATIONS$DETAIL$FAILED;
+		case t.PENDING: return e.AUTOMATIONS$DETAIL$PENDING;
+		case t.RUNNING: return e.AUTOMATIONS$DETAIL$RUNNING;
+		case t.CANCELLED: return e.AUTOMATIONS$DETAIL$CANCELLED;
+		case t.SKIPPED: return e.AUTOMATIONS$DETAIL$SKIPPED;
+		default: return e.FEATURED_AUTOMATIONS$STATUS_UNKNOWN;
+	}
+}
+function c(e) {
+	return e == null || e <= 0 ? null : e < 6e4 ? `${Math.max(1, Math.round(e / 1e3))}s` : e < 36e5 ? `${Math.round(e / 6e4)}m` : `${(e / 36e5).toFixed(1)}h`;
+}
+//#endregion
+export { o as barColorClassForStatus, a as durationMsToSparklineBarHeightPx, c as formatDurationForTitle, i as getAutomationRunDurationMs, s as getAutomationRunStatusLabelKey };
+
+//# sourceMappingURL=automation-run-activity-metrics.js.map

package/dist/components/features/home/featured-automations/automation-run-activity-metrics.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"automation-run-activity-metrics.js","names":[],"sources":["../../../../../src/components/features/home/featured-automations/automation-run-activity-metrics.ts"],"sourcesContent":["import { I18nKey } from \"#/i18n/declaration\";\nimport { AutomationRunStatus, type AutomationRun } from \"#/types/automation\";\n\n/** Sparkline track height; bars sit on the baseline inside this. */\nexport const AUTOMATION_RUN_ACTIVITY_TRACK_PX = 18;\nexport const AUTOMATION_RUN_ACTIVITY_MIN_BAR_PX = 6;\nexport const AUTOMATION_RUN_ACTIVITY_MAX_BAR_PX = 15;\n/** Used when duration cannot be derived (no timestamps, skipped, etc.). */\nexport const AUTOMATION_RUN_ACTIVITY_UNKNOWN_BAR_PX = 11;\n\nconst MIN_DURATION_MS = 1_000;\n/** Log-scale ceiling so multi-hour runs still fit the track. */\nconst MAX_DURATION_MS = 30 * 60_000;\n\n/**\n * Wall-clock duration for a run, or null when it cannot be measured.\n * In-flight runs use elapsed time since `started_at` when that is usable.\n */\nexport function getAutomationRunDurationMs(\n  run: AutomationRun,\n  nowMs: number = Date.now(),\n): number | null {\n  const startMs = run.started_at ? new Date(run.started_at).getTime() : NaN;\n  if (Number.isNaN(startMs) || startMs <= 0) return null;\n\n  if (run.completed_at) {\n    const endMs = new Date(run.completed_at).getTime();\n    if (Number.isNaN(endMs) || endMs < startMs) return null;\n    return endMs - startMs;\n  }\n\n  if (\n    run.status === AutomationRunStatus.PENDING ||\n    run.status === AutomationRunStatus.RUNNING\n  ) {\n    return Math.max(0, nowMs - startMs);\n  }\n\n  return null;\n}\n\n/** Map duration → bar height (log scale, clamped). Color stays status-driven. */\nexport function durationMsToSparklineBarHeightPx(\n  durationMs: number | null,\n): number {\n  if (durationMs == null || durationMs <= 0) {\n    return AUTOMATION_RUN_ACTIVITY_UNKNOWN_BAR_PX;\n  }\n\n  const clamped = Math.min(\n    MAX_DURATION_MS,\n    Math.max(MIN_DURATION_MS, durationMs),\n  );\n  const t =\n    Math.log(clamped / MIN_DURATION_MS) /\n    Math.log(MAX_DURATION_MS / MIN_DURATION_MS);\n\n  return Math.round(\n    AUTOMATION_RUN_ACTIVITY_MIN_BAR_PX +\n      t *\n        (AUTOMATION_RUN_ACTIVITY_MAX_BAR_PX -\n          AUTOMATION_RUN_ACTIVITY_MIN_BAR_PX),\n  );\n}\n\nexport function barColorClassForStatus(\n  status: AutomationRunStatus | string,\n): string {\n  switch (status) {\n    case AutomationRunStatus.COMPLETED:\n      return \"bg-[var(--oh-status-success)]\";\n    case AutomationRunStatus.FAILED:\n      return \"bg-[var(--oh-status-error)]\";\n    case AutomationRunStatus.RUNNING:\n      return \"bg-[var(--oh-status-success)] animate-pulse motion-reduce:animate-none\";\n    case AutomationRunStatus.PENDING:\n      // Grey hatch so pending reads as queued, distinct from solid cancelled/skipped.\n      return \"bg-[repeating-linear-gradient(-45deg,var(--oh-muted)_0_1.5px,var(--oh-border)_1.5px_3px)]\";\n    case AutomationRunStatus.CANCELLED:\n      return \"bg-[var(--oh-muted)]\";\n    default:\n      return \"bg-[var(--oh-border)]\";\n  }\n}\n\nexport function getAutomationRunStatusLabelKey(\n  status: AutomationRunStatus | string,\n): I18nKey {\n  switch (status) {\n    case AutomationRunStatus.COMPLETED:\n      return I18nKey.AUTOMATIONS$DETAIL$SUCCESSFUL;\n    case AutomationRunStatus.FAILED:\n      return I18nKey.AUTOMATIONS$DETAIL$FAILED;\n    case AutomationRunStatus.PENDING:\n      return I18nKey.AUTOMATIONS$DETAIL$PENDING;\n    case AutomationRunStatus.RUNNING:\n      return I18nKey.AUTOMATIONS$DETAIL$RUNNING;\n    case AutomationRunStatus.CANCELLED:\n      return I18nKey.AUTOMATIONS$DETAIL$CANCELLED;\n    case AutomationRunStatus.SKIPPED:\n      return I18nKey.AUTOMATIONS$DETAIL$SKIPPED;\n    default:\n      return I18nKey.FEATURED_AUTOMATIONS$STATUS_UNKNOWN;\n  }\n}\n\nexport function formatDurationForTitle(\n  durationMs: number | null,\n): string | null {\n  if (durationMs == null || durationMs <= 0) return null;\n  if (durationMs < 60_000) {\n    return `${Math.max(1, Math.round(durationMs / 1000))}s`;\n  }\n  if (durationMs < 3_600_000) {\n    return `${Math.round(durationMs / 60_000)}m`;\n  }\n  return `${(durationMs / 3_600_000).toFixed(1)}h`;\n}\n"],"mappings":";;AAUA,IAAM,IAAkB,KAElB,IAAkB,KAAK;AAM7B,SAAgB,EACd,GACA,IAAgB,KAAK,IAAI,GACV;CACf,IAAM,IAAU,EAAI,aAAa,IAAI,KAAK,EAAI,UAAU,EAAE,QAAQ,IAAI;CACtE,IAAI,OAAO,MAAM,CAAO,KAAK,KAAW,GAAG,OAAO;CAElD,IAAI,EAAI,cAAc;EACpB,IAAM,IAAQ,IAAI,KAAK,EAAI,YAAY,EAAE,QAAQ;EAEjD,OADI,OAAO,MAAM,CAAK,KAAK,IAAQ,IAAgB,OAC5C,IAAQ;CACjB;CASA,OANE,EAAI,WAAW,EAAoB,WACnC,EAAI,WAAW,EAAoB,UAE5B,KAAK,IAAI,GAAG,IAAQ,CAAO,IAG7B;AACT;AAGA,SAAgB,EACd,GACQ;CACR,IAAI,KAAc,QAAQ,KAAc,GACtC,OAAA;CAOF,IAAM,IACJ,KAAK,IALS,KAAK,IACnB,GACA,KAAK,IAAI,GAAiB,CAAU,CAG3B,IAAU,CAAe,IAClC,KAAK,IAAI,IAAkB,CAAe;CAE5C,OAAO,KAAK,MAAA,IAER,IAAA,CAGJ;AACF;AAEA,SAAgB,EACd,GACQ;CACR,QAAQ,GAAR;EACE,KAAK,EAAoB,WACvB,OAAO;EACT,KAAK,EAAoB,QACvB,OAAO;EACT,KAAK,EAAoB,SACvB,OAAO;EACT,KAAK,EAAoB,SAEvB,OAAO;EACT,KAAK,EAAoB,WACvB,OAAO;EACT,SACE,OAAO;CACX;AACF;AAEA,SAAgB,EACd,GACS;CACT,QAAQ,GAAR;EACE,KAAK,EAAoB,WACvB,OAAO,EAAQ;EACjB,KAAK,EAAoB,QACvB,OAAO,EAAQ;EACjB,KAAK,EAAoB,SACvB,OAAO,EAAQ;EACjB,KAAK,EAAoB,SACvB,OAAO,EAAQ;EACjB,KAAK,EAAoB,WACvB,OAAO,EAAQ;EACjB,KAAK,EAAoB,SACvB,OAAO,EAAQ;EACjB,SACE,OAAO,EAAQ;CACnB;AACF;AAEA,SAAgB,EACd,GACe;CAQf,OAPI,KAAc,QAAQ,KAAc,IAAU,OAC9C,IAAa,MACR,GAAG,KAAK,IAAI,GAAG,KAAK,MAAM,IAAa,GAAI,CAAC,EAAE,KAEnD,IAAa,OACR,GAAG,KAAK,MAAM,IAAa,GAAM,EAAE,KAErC,IAAI,IAAa,MAAW,QAAQ,CAAC,EAAE;AAChD"}

package/dist/components/features/home/featured-automations/automation-run-activity-sparkline.cjs

@@ -0,0 +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("../../../../utils/utils.cjs"),r=require("../../../../node_modules/@heroui/tooltip/dist/chunk-AUA5GDXN.cjs"),i=require("../../../shared/navigation-link.cjs"),a=require("../../../../types/automation.cjs"),o=require("../../../../utils/format-relative-time.cjs"),s=require("./automation-run-health.cjs");require("../../../../hooks/query/use-latest-automation-runs.cjs");const c=require("../../../../hooks/use-home-automation-actions.cjs"),l=require("./automation-run-activity-metrics.cjs");let u=require("react"),d=require("react/jsx-runtime");function f({label:e,children:t}){return(0,d.jsxs)(`div`,{className:`flex items-start gap-2 text-xs`,children:[(0,d.jsx)(`span`,{className:`w-16 shrink-0 text-[var(--oh-muted)]`,children:e}),(0,d.jsx)(`span`,{className:`min-w-0 flex-1 break-words text-white`,children:t})]})}function p({run:r,nowMs:i}){let{t:c,i18n:u}=e.useTranslation(`openhands`),p=s.getLastRunTimestamp(r),m=p?o.formatRelativeTime(p,u.language,c):null,h=l.formatDurationForTitle(l.getAutomationRunDurationMs(r,i)),g=c(l.getAutomationRunStatusLabelKey(r.status)),_=r.status===a.AutomationRunStatus.FAILED&&r.error_detail?.trim()||null;return(0,d.jsxs)(`div`,{className:`flex w-[220px] flex-col gap-2 p-3`,children:[(0,d.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,d.jsx)(`span`,{"aria-hidden":`true`,className:n.cn(`h-3 w-1.5 shrink-0 rounded-[1px]`,l.barColorClassForStatus(r.status))}),(0,d.jsx)(`span`,{className:`text-sm font-medium text-white`,children:g})]}),(0,d.jsxs)(`div`,{className:`flex flex-col gap-1`,children:[m?(0,d.jsx)(f,{label:c(t.I18nKey.AUTOMATIONS$DETAIL$LAST_RUN),children:m}):null,h?(0,d.jsx)(f,{label:c(t.I18nKey.FEATURED_AUTOMATIONS$RUN_DURATION),children:h}):null]}),_?(0,d.jsx)(`p`,{className:`line-clamp-3 text-xs text-[var(--oh-status-error)]`,children:_}):null]})}function m({automationId:t,run:a,nowMs:o}){let{t:s}=e.useTranslation(`openhands`),c=l.getAutomationRunDurationMs(a,o),u=s(l.getAutomationRunStatusLabelKey(a.status)),f=`/automations/${encodeURIComponent(t)}?run=${encodeURIComponent(a.id)}`;return(0,d.jsx)(r.tooltip_default,{content:(0,d.jsx)(p,{run:a,nowMs:o}),placement:`top`,closeDelay:80,delay:200,disableAnimation:!1,className:`rounded-xl border border-[var(--oh-border)] bg-base-secondary p-0 text-white shadow-xl`,children:(0,d.jsx)(i.NavigationLink,{to:f,"aria-label":u,className:`group/spark-bar inline-flex h-full cursor-pointer items-end px-[2px] focus:outline-none focus-visible:ring-1 focus-visible:ring-[var(--oh-focus)]`,onMouseDown:e=>e.stopPropagation(),onClick:e=>e.stopPropagation(),children:(0,d.jsx)(`span`,{className:n.cn(`w-1 shrink-0 origin-bottom rounded-[1px]`,`transition-transform duration-100 ease-out motion-reduce:transition-none`,`group-hover/spark-bar:scale-x-[1.4] group-hover/spark-bar:scale-y-[1.15]`,`group-focus-visible/spark-bar:scale-x-[1.4] group-focus-visible/spark-bar:scale-y-[1.15]`,l.barColorClassForStatus(a.status)),style:{height:l.durationMsToSparklineBarHeightPx(c)}})})})}function h({automationId:n,runs:r,testId:i}){let{t:a}=e.useTranslation(`openhands`),o=r.some(e=>c.isInFlightAutomationRun(e)),[s,l]=(0,u.useState)(()=>Date.now());if((0,u.useEffect)(()=>{if(!o)return;let e=window.setInterval(()=>l(Date.now()),1e3);return()=>window.clearInterval(e)},[o]),r.length===0)return null;let f=[...r].reverse().slice(-12);return(0,d.jsx)(`span`,{"data-testid":i,"aria-label":a(t.I18nKey.FEATURED_AUTOMATIONS$RUN_ACTIVITY_LABEL,{count:f.length}),className:`inline-flex shrink-0 items-end`,style:{height:18},onMouseDown:e=>e.preventDefault(),children:f.map((e,t)=>(0,d.jsx)(m,{automationId:n,run:e,nowMs:s},`${e.id}-${t}`))})}exports.AutomationRunActivitySparkline=h;
+//# sourceMappingURL=automation-run-activity-sparkline.cjs.map

package/dist/components/features/home/featured-automations/automation-run-activity-sparkline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"automation-run-activity-sparkline.cjs","names":[],"sources":["../../../../../src/components/features/home/featured-automations/automation-run-activity-sparkline.tsx"],"sourcesContent":["import { Tooltip } from \"@heroui/react\";\nimport { useEffect, useState, type ReactNode } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { AUTOMATION_RUN_ACTIVITY_LIMIT } from \"#/hooks/query/use-latest-automation-runs\";\nimport { isInFlightAutomationRun } from \"#/hooks/use-home-automation-actions\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { AutomationRunStatus, type AutomationRun } from \"#/types/automation\";\nimport { formatRelativeTime } from \"#/utils/format-relative-time\";\nimport { cn } from \"#/utils/utils\";\nimport { getLastRunTimestamp } from \"./automation-run-health\";\nimport {\n  AUTOMATION_RUN_ACTIVITY_TRACK_PX,\n  barColorClassForStatus,\n  durationMsToSparklineBarHeightPx,\n  formatDurationForTitle,\n  getAutomationRunDurationMs,\n  getAutomationRunStatusLabelKey,\n} from \"./automation-run-activity-metrics\";\n\ninterface AutomationRunActivitySparklineProps {\n  automationId: string;\n  /** Newest-first run list (same order as the runs API). */\n  runs: readonly AutomationRun[];\n  testId?: string;\n}\n\nfunction TooltipRow({\n  label,\n  children,\n}: {\n  label: string;\n  children: ReactNode;\n}) {\n  return (\n    <div className=\"flex items-start gap-2 text-xs\">\n      <span className=\"w-16 shrink-0 text-[var(--oh-muted)]\">{label}</span>\n      <span className=\"min-w-0 flex-1 break-words text-white\">{children}</span>\n    </div>\n  );\n}\n\nfunction RunActivityBarTooltip({\n  run,\n  nowMs,\n}: {\n  run: AutomationRun;\n  nowMs: number;\n}) {\n  const { t, i18n } = useTranslation(\"openhands\");\n  const timestamp = getLastRunTimestamp(run);\n  const when = timestamp\n    ? formatRelativeTime(timestamp, i18n.language, t)\n    : null;\n  const durationMs = getAutomationRunDurationMs(run, nowMs);\n  const durationLabel = formatDurationForTitle(durationMs);\n  const statusLabel = t(getAutomationRunStatusLabelKey(run.status));\n  const errorDetail =\n    run.status === AutomationRunStatus.FAILED\n      ? run.error_detail?.trim() || null\n      : null;\n\n  return (\n    <div className=\"flex w-[220px] flex-col gap-2 p-3\">\n      <div className=\"flex items-center gap-2\">\n        <span\n          aria-hidden=\"true\"\n          className={cn(\n            \"h-3 w-1.5 shrink-0 rounded-[1px]\",\n            barColorClassForStatus(run.status),\n          )}\n        />\n        <span className=\"text-sm font-medium text-white\">{statusLabel}</span>\n      </div>\n\n      <div className=\"flex flex-col gap-1\">\n        {when ? (\n          <TooltipRow label={t(I18nKey.AUTOMATIONS$DETAIL$LAST_RUN)}>\n            {when}\n          </TooltipRow>\n        ) : null}\n        {durationLabel ? (\n          <TooltipRow label={t(I18nKey.FEATURED_AUTOMATIONS$RUN_DURATION)}>\n            {durationLabel}\n          </TooltipRow>\n        ) : null}\n      </div>\n\n      {errorDetail ? (\n        <p className=\"line-clamp-3 text-xs text-[var(--oh-status-error)]\">\n          {errorDetail}\n        </p>\n      ) : null}\n    </div>\n  );\n}\n\nfunction RunActivityBar({\n  automationId,\n  run,\n  nowMs,\n}: {\n  automationId: string;\n  run: AutomationRun;\n  nowMs: number;\n}) {\n  const { t } = useTranslation(\"openhands\");\n  const durationMs = getAutomationRunDurationMs(run, nowMs);\n  const statusLabel = t(getAutomationRunStatusLabelKey(run.status));\n  const disableAnimation = import.meta.env.MODE === \"test\";\n  const href = `/automations/${encodeURIComponent(automationId)}?run=${encodeURIComponent(run.id)}`;\n\n  return (\n    <Tooltip\n      content={<RunActivityBarTooltip run={run} nowMs={nowMs} />}\n      placement=\"top\"\n      closeDelay={80}\n      delay={200}\n      disableAnimation={disableAnimation}\n      className=\"rounded-xl border border-[var(--oh-border)] bg-base-secondary p-0 text-white shadow-xl\"\n    >\n      {/* Wider hit target than the 4px bar so cancelled/skipped greys are easy to inspect. */}\n      <NavigationLink\n        to={href}\n        aria-label={statusLabel}\n        className=\"group/spark-bar inline-flex h-full cursor-pointer items-end px-[2px] focus:outline-none focus-visible:ring-1 focus-visible:ring-[var(--oh-focus)]\"\n        onMouseDown={(event) => event.stopPropagation()}\n        onClick={(event) => event.stopPropagation()}\n      >\n        <span\n          className={cn(\n            \"w-1 shrink-0 origin-bottom rounded-[1px]\",\n            \"transition-transform duration-100 ease-out motion-reduce:transition-none\",\n            // Grow the hovered/focused bar so it reads clearly among neighbors.\n            \"group-hover/spark-bar:scale-x-[1.4] group-hover/spark-bar:scale-y-[1.15]\",\n            \"group-focus-visible/spark-bar:scale-x-[1.4] group-focus-visible/spark-bar:scale-y-[1.15]\",\n            barColorClassForStatus(run.status),\n          )}\n          style={{ height: durationMsToSparklineBarHeightPx(durationMs) }}\n        />\n      </NavigationLink>\n    </Tooltip>\n  );\n}\n\n/**\n * Colored-bar sparkline of recent automation runs (oldest → newest left to\n * right). Color encodes status; height encodes run duration (log-scaled).\n * Bars link to the automation detail page focused on that run.\n */\nexport function AutomationRunActivitySparkline({\n  automationId,\n  runs,\n  testId,\n}: AutomationRunActivitySparklineProps) {\n  const { t } = useTranslation(\"openhands\");\n  const hasInFlight = runs.some((run) => isInFlightAutomationRun(run));\n  const [nowMs, setNowMs] = useState(() => Date.now());\n\n  useEffect(() => {\n    if (!hasInFlight) return undefined;\n    // Tick while a run is in flight so bar height tracks elapsed time between\n    // the slower runs-list polls.\n    const id = window.setInterval(() => setNowMs(Date.now()), 1000);\n    return () => window.clearInterval(id);\n  }, [hasInFlight]);\n\n  if (runs.length === 0) return null;\n\n  // API is newest-first; reverse so the sparkline reads left→right as time.\n  const bars = [...runs].reverse().slice(-AUTOMATION_RUN_ACTIVITY_LIMIT);\n\n  return (\n    <span\n      data-testid={testId}\n      aria-label={t(I18nKey.FEATURED_AUTOMATIONS$RUN_ACTIVITY_LABEL, {\n        count: bars.length,\n      })}\n      className=\"inline-flex shrink-0 items-end\"\n      style={{ height: AUTOMATION_RUN_ACTIVITY_TRACK_PX }}\n      onMouseDown={(event) => event.preventDefault()}\n    >\n      {bars.map((run, index) => (\n        <RunActivityBar\n          key={`${run.id}-${index}`}\n          automationId={automationId}\n          run={run}\n          nowMs={nowMs}\n        />\n      ))}\n    </span>\n  );\n}\n"],"mappings":"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"}

package/dist/components/features/home/featured-automations/automation-run-activity-sparkline.js

@@ -0,0 +1,108 @@
+import { useTranslation as e } from "../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+import { I18nKey as t } from "../../../../i18n/declaration.js";
+import { cn as n } from "../../../../utils/utils.js";
+import { tooltip_default as r } from "../../../../node_modules/@heroui/tooltip/dist/chunk-AUA5GDXN.js";
+import { NavigationLink as i } from "../../../shared/navigation-link.js";
+import { AutomationRunStatus as a } from "../../../../types/automation.js";
+import { formatRelativeTime as o } from "../../../../utils/format-relative-time.js";
+import { getLastRunTimestamp as s } from "./automation-run-health.js";
+import "../../../../hooks/query/use-latest-automation-runs.js";
+import { isInFlightAutomationRun as c } from "../../../../hooks/use-home-automation-actions.js";
+import { barColorClassForStatus as l, durationMsToSparklineBarHeightPx as u, formatDurationForTitle as d, getAutomationRunDurationMs as f, getAutomationRunStatusLabelKey as p } from "./automation-run-activity-metrics.js";
+import { useEffect as m, useState as h } from "react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+//#region src/components/features/home/featured-automations/automation-run-activity-sparkline.tsx
+function v({ label: e, children: t }) {
+	return /* @__PURE__ */ _("div", {
+		className: "flex items-start gap-2 text-xs",
+		children: [/* @__PURE__ */ g("span", {
+			className: "w-16 shrink-0 text-[var(--oh-muted)]",
+			children: e
+		}), /* @__PURE__ */ g("span", {
+			className: "min-w-0 flex-1 break-words text-white",
+			children: t
+		})]
+	});
+}
+function y({ run: r, nowMs: i }) {
+	let { t: c, i18n: u } = e("openhands"), m = s(r), h = m ? o(m, u.language, c) : null, y = d(f(r, i)), b = c(p(r.status)), x = r.status === a.FAILED && r.error_detail?.trim() || null;
+	return /* @__PURE__ */ _("div", {
+		className: "flex w-[220px] flex-col gap-2 p-3",
+		children: [
+			/* @__PURE__ */ _("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ g("span", {
+					"aria-hidden": "true",
+					className: n("h-3 w-1.5 shrink-0 rounded-[1px]", l(r.status))
+				}), /* @__PURE__ */ g("span", {
+					className: "text-sm font-medium text-white",
+					children: b
+				})]
+			}),
+			/* @__PURE__ */ _("div", {
+				className: "flex flex-col gap-1",
+				children: [h ? /* @__PURE__ */ g(v, {
+					label: c(t.AUTOMATIONS$DETAIL$LAST_RUN),
+					children: h
+				}) : null, y ? /* @__PURE__ */ g(v, {
+					label: c(t.FEATURED_AUTOMATIONS$RUN_DURATION),
+					children: y
+				}) : null]
+			}),
+			x ? /* @__PURE__ */ g("p", {
+				className: "line-clamp-3 text-xs text-[var(--oh-status-error)]",
+				children: x
+			}) : null
+		]
+	});
+}
+function b({ automationId: t, run: a, nowMs: o }) {
+	let { t: s } = e("openhands"), c = f(a, o), d = s(p(a.status)), m = `/automations/${encodeURIComponent(t)}?run=${encodeURIComponent(a.id)}`;
+	return /* @__PURE__ */ g(r, {
+		content: /* @__PURE__ */ g(y, {
+			run: a,
+			nowMs: o
+		}),
+		placement: "top",
+		closeDelay: 80,
+		delay: 200,
+		disableAnimation: !1,
+		className: "rounded-xl border border-[var(--oh-border)] bg-base-secondary p-0 text-white shadow-xl",
+		children: /* @__PURE__ */ g(i, {
+			to: m,
+			"aria-label": d,
+			className: "group/spark-bar inline-flex h-full cursor-pointer items-end px-[2px] focus:outline-none focus-visible:ring-1 focus-visible:ring-[var(--oh-focus)]",
+			onMouseDown: (e) => e.stopPropagation(),
+			onClick: (e) => e.stopPropagation(),
+			children: /* @__PURE__ */ g("span", {
+				className: n("w-1 shrink-0 origin-bottom rounded-[1px]", "transition-transform duration-100 ease-out motion-reduce:transition-none", "group-hover/spark-bar:scale-x-[1.4] group-hover/spark-bar:scale-y-[1.15]", "group-focus-visible/spark-bar:scale-x-[1.4] group-focus-visible/spark-bar:scale-y-[1.15]", l(a.status)),
+				style: { height: u(c) }
+			})
+		})
+	});
+}
+function x({ automationId: n, runs: r, testId: i }) {
+	let { t: a } = e("openhands"), o = r.some((e) => c(e)), [s, l] = h(() => Date.now());
+	if (m(() => {
+		if (!o) return;
+		let e = window.setInterval(() => l(Date.now()), 1e3);
+		return () => window.clearInterval(e);
+	}, [o]), r.length === 0) return null;
+	let u = [...r].reverse().slice(-12);
+	return /* @__PURE__ */ g("span", {
+		"data-testid": i,
+		"aria-label": a(t.FEATURED_AUTOMATIONS$RUN_ACTIVITY_LABEL, { count: u.length }),
+		className: "inline-flex shrink-0 items-end",
+		style: { height: 18 },
+		onMouseDown: (e) => e.preventDefault(),
+		children: u.map((e, t) => /* @__PURE__ */ g(b, {
+			automationId: n,
+			run: e,
+			nowMs: s
+		}, `${e.id}-${t}`))
+	});
+}
+//#endregion
+export { x as AutomationRunActivitySparkline };
+
+//# sourceMappingURL=automation-run-activity-sparkline.js.map

package/dist/components/features/home/featured-automations/automation-run-activity-sparkline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"automation-run-activity-sparkline.js","names":[],"sources":["../../../../../src/components/features/home/featured-automations/automation-run-activity-sparkline.tsx"],"sourcesContent":["import { Tooltip } from \"@heroui/react\";\nimport { useEffect, useState, type ReactNode } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { AUTOMATION_RUN_ACTIVITY_LIMIT } from \"#/hooks/query/use-latest-automation-runs\";\nimport { isInFlightAutomationRun } from \"#/hooks/use-home-automation-actions\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { AutomationRunStatus, type AutomationRun } from \"#/types/automation\";\nimport { formatRelativeTime } from \"#/utils/format-relative-time\";\nimport { cn } from \"#/utils/utils\";\nimport { getLastRunTimestamp } from \"./automation-run-health\";\nimport {\n  AUTOMATION_RUN_ACTIVITY_TRACK_PX,\n  barColorClassForStatus,\n  durationMsToSparklineBarHeightPx,\n  formatDurationForTitle,\n  getAutomationRunDurationMs,\n  getAutomationRunStatusLabelKey,\n} from \"./automation-run-activity-metrics\";\n\ninterface AutomationRunActivitySparklineProps {\n  automationId: string;\n  /** Newest-first run list (same order as the runs API). */\n  runs: readonly AutomationRun[];\n  testId?: string;\n}\n\nfunction TooltipRow({\n  label,\n  children,\n}: {\n  label: string;\n  children: ReactNode;\n}) {\n  return (\n    <div className=\"flex items-start gap-2 text-xs\">\n      <span className=\"w-16 shrink-0 text-[var(--oh-muted)]\">{label}</span>\n      <span className=\"min-w-0 flex-1 break-words text-white\">{children}</span>\n    </div>\n  );\n}\n\nfunction RunActivityBarTooltip({\n  run,\n  nowMs,\n}: {\n  run: AutomationRun;\n  nowMs: number;\n}) {\n  const { t, i18n } = useTranslation(\"openhands\");\n  const timestamp = getLastRunTimestamp(run);\n  const when = timestamp\n    ? formatRelativeTime(timestamp, i18n.language, t)\n    : null;\n  const durationMs = getAutomationRunDurationMs(run, nowMs);\n  const durationLabel = formatDurationForTitle(durationMs);\n  const statusLabel = t(getAutomationRunStatusLabelKey(run.status));\n  const errorDetail =\n    run.status === AutomationRunStatus.FAILED\n      ? run.error_detail?.trim() || null\n      : null;\n\n  return (\n    <div className=\"flex w-[220px] flex-col gap-2 p-3\">\n      <div className=\"flex items-center gap-2\">\n        <span\n          aria-hidden=\"true\"\n          className={cn(\n            \"h-3 w-1.5 shrink-0 rounded-[1px]\",\n            barColorClassForStatus(run.status),\n          )}\n        />\n        <span className=\"text-sm font-medium text-white\">{statusLabel}</span>\n      </div>\n\n      <div className=\"flex flex-col gap-1\">\n        {when ? (\n          <TooltipRow label={t(I18nKey.AUTOMATIONS$DETAIL$LAST_RUN)}>\n            {when}\n          </TooltipRow>\n        ) : null}\n        {durationLabel ? (\n          <TooltipRow label={t(I18nKey.FEATURED_AUTOMATIONS$RUN_DURATION)}>\n            {durationLabel}\n          </TooltipRow>\n        ) : null}\n      </div>\n\n      {errorDetail ? (\n        <p className=\"line-clamp-3 text-xs text-[var(--oh-status-error)]\">\n          {errorDetail}\n        </p>\n      ) : null}\n    </div>\n  );\n}\n\nfunction RunActivityBar({\n  automationId,\n  run,\n  nowMs,\n}: {\n  automationId: string;\n  run: AutomationRun;\n  nowMs: number;\n}) {\n  const { t } = useTranslation(\"openhands\");\n  const durationMs = getAutomationRunDurationMs(run, nowMs);\n  const statusLabel = t(getAutomationRunStatusLabelKey(run.status));\n  const disableAnimation = import.meta.env.MODE === \"test\";\n  const href = `/automations/${encodeURIComponent(automationId)}?run=${encodeURIComponent(run.id)}`;\n\n  return (\n    <Tooltip\n      content={<RunActivityBarTooltip run={run} nowMs={nowMs} />}\n      placement=\"top\"\n      closeDelay={80}\n      delay={200}\n      disableAnimation={disableAnimation}\n      className=\"rounded-xl border border-[var(--oh-border)] bg-base-secondary p-0 text-white shadow-xl\"\n    >\n      {/* Wider hit target than the 4px bar so cancelled/skipped greys are easy to inspect. */}\n      <NavigationLink\n        to={href}\n        aria-label={statusLabel}\n        className=\"group/spark-bar inline-flex h-full cursor-pointer items-end px-[2px] focus:outline-none focus-visible:ring-1 focus-visible:ring-[var(--oh-focus)]\"\n        onMouseDown={(event) => event.stopPropagation()}\n        onClick={(event) => event.stopPropagation()}\n      >\n        <span\n          className={cn(\n            \"w-1 shrink-0 origin-bottom rounded-[1px]\",\n            \"transition-transform duration-100 ease-out motion-reduce:transition-none\",\n            // Grow the hovered/focused bar so it reads clearly among neighbors.\n            \"group-hover/spark-bar:scale-x-[1.4] group-hover/spark-bar:scale-y-[1.15]\",\n            \"group-focus-visible/spark-bar:scale-x-[1.4] group-focus-visible/spark-bar:scale-y-[1.15]\",\n            barColorClassForStatus(run.status),\n          )}\n          style={{ height: durationMsToSparklineBarHeightPx(durationMs) }}\n        />\n      </NavigationLink>\n    </Tooltip>\n  );\n}\n\n/**\n * Colored-bar sparkline of recent automation runs (oldest → newest left to\n * right). Color encodes status; height encodes run duration (log-scaled).\n * Bars link to the automation detail page focused on that run.\n */\nexport function AutomationRunActivitySparkline({\n  automationId,\n  runs,\n  testId,\n}: AutomationRunActivitySparklineProps) {\n  const { t } = useTranslation(\"openhands\");\n  const hasInFlight = runs.some((run) => isInFlightAutomationRun(run));\n  const [nowMs, setNowMs] = useState(() => Date.now());\n\n  useEffect(() => {\n    if (!hasInFlight) return undefined;\n    // Tick while a run is in flight so bar height tracks elapsed time between\n    // the slower runs-list polls.\n    const id = window.setInterval(() => setNowMs(Date.now()), 1000);\n    return () => window.clearInterval(id);\n  }, [hasInFlight]);\n\n  if (runs.length === 0) return null;\n\n  // API is newest-first; reverse so the sparkline reads left→right as time.\n  const bars = [...runs].reverse().slice(-AUTOMATION_RUN_ACTIVITY_LIMIT);\n\n  return (\n    <span\n      data-testid={testId}\n      aria-label={t(I18nKey.FEATURED_AUTOMATIONS$RUN_ACTIVITY_LABEL, {\n        count: bars.length,\n      })}\n      className=\"inline-flex shrink-0 items-end\"\n      style={{ height: AUTOMATION_RUN_ACTIVITY_TRACK_PX }}\n      onMouseDown={(event) => event.preventDefault()}\n    >\n      {bars.map((run, index) => (\n        <RunActivityBar\n          key={`${run.id}-${index}`}\n          automationId={automationId}\n          run={run}\n          nowMs={nowMs}\n        />\n      ))}\n    </span>\n  );\n}\n"],"mappings":"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"}

package/dist/components/features/home/featured-automations/automation-run-health.cjs

@@ -0,0 +1,2 @@
+require("../../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../../i18n/declaration.cjs"),t=require("../../../../types/automation.cjs"),n=require("../../../../utils/automation-schedule.cjs");function r(e){if(e.isLoading||e.isError)return`unknown`;if(!e.latestRun)return`none`;switch(e.latestRun.status){case t.AutomationRunStatus.COMPLETED:return`success`;case t.AutomationRunStatus.FAILED:return`failed`;case t.AutomationRunStatus.PENDING:case t.AutomationRunStatus.RUNNING:return`in_progress`;default:return`unknown`}}function i(t){switch(t){case`success`:return e.I18nKey.FEATURED_AUTOMATIONS$LAST_RUN_SUCCEEDED;case`failed`:return e.I18nKey.FEATURED_AUTOMATIONS$LAST_RUN_FAILED;case`in_progress`:return e.I18nKey.FEATURED_AUTOMATIONS$RUN_IN_PROGRESS;case`none`:return e.I18nKey.AUTOMATIONS$DETAIL$NO_RUNS;default:return e.I18nKey.FEATURED_AUTOMATIONS$STATUS_UNKNOWN}}var a={github:`GitHub`,gitlab:`GitLab`,slack:`Slack`,linear:`Linear`,jira:`Jira`};function o(e){let t=e.trim().toLowerCase();return t?a[t]??t.replace(/\b\w/g,e=>e.toUpperCase()):e}function s(e){let{trigger:t}=e;return t.type===`event`&&t.on?n.formatEventOn(t.on):null}function c(e){let{trigger:t}=e;return t.type===`event`&&t.source?.trim()||null}function l(e){let{trigger:t}=e;return t.type===`event`?null:t.schedule_human||t.schedule||t.type||null}function u(e){let{trigger:t}=e;if(t.type===`event`){let t=c(e);return[s(e)??``,t?`(${o(t)})`:``].filter(Boolean).join(` `)}return l(e)??t.type}var d=48;function f(e){let t=e.trim().replace(/\s+/g,` `);if(!t)return t;let n=t.match(/^.*?[.!?](?=\s|$)/)?.[0]??t;return n.length<=d?n:`${n.slice(0,d-1).trimEnd()}…`}function p(e,t=f(e)){return e.trim().replace(/\s+/g,` `)!==t}function m(e){let t=e.completed_at??e.started_at;if(!t)return null;let n=new Date(t).getTime();return Number.isNaN(n)||n===0?null:t}exports.deriveRunHealth=r,exports.formatTriggerSourceLabel=o,exports.getLastRunTimestamp=m,exports.getRunHealthLabelKey=i,exports.getTriggerEventLabel=s,exports.getTriggerScheduleLabel=l,exports.getTriggerSource=c,exports.getTriggerSummary=u,exports.shortenAutomationErrorDetail=f,exports.shouldShowAutomationErrorHovercard=p;
+//# sourceMappingURL=automation-run-health.cjs.map