@openhands/agent-canvas 1.12.0 → 1.14.0

package/dist/components/features/chat/tool-visualizers/file-editor/file-editor.js

@@ -1,59 +1,101 @@
-import { defineVisualizer as e } from "../define.js";
-import { textFromContent as t } from "../text-content.js";
-import { CodeBlock as n } from "../primitives/code-block.js";
-import { getLanguageFromPath as r } from "../../../../../utils/get-language-from-path.js";
-import { DiffView as i } from "../primitives/diff-view.js";
-import { FilePathChip as a } from "../primitives/file-path-chip.js";
+import { useOptionalConversationId as e } from "../../../../../hooks/use-conversation-id.js";
+import { useFilesTabStore as t } from "../../../../../stores/files-tab-store.js";
+import { useActiveConversation as n } from "../../../../../hooks/query/use-active-conversation.js";
+import { useSelectConversationTab as r } from "../../../../../hooks/use-select-conversation-tab.js";
+import { defineVisualizer as i } from "../define.js";
+import { textFromContent as a } from "../text-content.js";
+import { CodeBlock as o } from "../primitives/code-block.js";
+import { getLanguageFromPath as s } from "../../../../../utils/get-language-from-path.js";
+import { toWorkspaceRelativePath as c } from "../../../../../utils/workspace-relative-path.js";
+import { DiffView as l } from "../primitives/diff-view.js";
+import { FilePathChip as u } from "../primitives/file-path-chip.js";
+import { isMarkdownFilePath as d } from "../../../../../utils/is-markdown-file-path.js";
+import { MarkdownFilePreview as f } from "../primitives/markdown-file-preview.js";
 import "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/components/features/chat/tool-visualizers/file-editor/file-editor.tsx
-var c = e({
-	actionKinds: ["FileEditorAction", "StrReplaceEditorAction"],
-	observationKinds: ["FileEditorObservation", "StrReplaceEditorObservation"],
-	Body: function({ action: e, observation: c }) {
-		let l = c?.observation.path ?? e?.action.path ?? "", u = c?.observation.command ?? e?.action.command, d = r(l), f = e?.action.view_range, p = u === "view" && f ? `${f[0]}-${f[1]}` : void 0, m = l ? /* @__PURE__ */ o(a, {
-			path: l,
-			range: p
-		}) : null;
-		if (c) {
-			let e = c.observation, r = null;
-			if (e.error) r = /* @__PURE__ */ o("span", {
-				className: "whitespace-pre-wrap text-xs text-danger",
-				children: e.error
-			});
-			else if (e.old_content != null && e.new_content != null) r = /* @__PURE__ */ o(i, {
-				oldText: e.old_content,
-				newText: e.new_content
-			});
-			else {
-				let i = e.new_content || e.output || (e.content ? t(e.content) : "");
-				r = i ? /* @__PURE__ */ o(n, {
-					code: i,
-					language: d
-				}) : null;
+var h = ({ action: e, observation: t }) => t?.observation.path ?? e?.action.path ?? "";
+function g({ action: e, observation: t, onOpenFile: n }) {
+	let r = h({
+		action: e,
+		observation: t
+	}), i = t?.observation.command ?? e?.action.command, c = s(r), g = e?.action.view_range, _ = i === "view" && g ? `${g[0]}-${g[1]}` : void 0, v = r ? /* @__PURE__ */ p(u, {
+		path: r,
+		range: _,
+		onClick: n
+	}) : null, y = (e) => r && i === "create" && d(r) ? {
+		chip: null,
+		body: /* @__PURE__ */ p(f, {
+			content: e,
+			path: r,
+			onView: n
+		})
+	} : {
+		chip: v,
+		body: /* @__PURE__ */ p(o, {
+			code: e,
+			language: c
+		})
+	};
+	if (t) {
+		let e = t.observation, n = null, r = v;
+		if (e.error) n = /* @__PURE__ */ p("span", {
+			className: "whitespace-pre-wrap text-xs text-danger",
+			children: e.error
+		});
+		else if (e.old_content != null && e.new_content != null) n = /* @__PURE__ */ p(l, {
+			oldText: e.old_content,
+			newText: e.new_content
+		});
+		else {
+			let t = e.new_content || e.output || (e.content ? a(e.content) : "");
+			if (t) {
+				let e = y(t);
+				r = e.chip, n = e.body;
 			}
-			return /* @__PURE__ */ s("div", {
-				className: "flex flex-col gap-2",
-				children: [m, r]
-			});
 		}
-		if (e) {
-			let t = e.action, r = null;
-			return t.command === "create" && t.file_text ? r = /* @__PURE__ */ o(n, {
-				code: t.file_text,
-				language: d
-			}) : (t.command === "str_replace" || t.command === "insert") && t.new_str != null && (r = /* @__PURE__ */ o(i, {
-				oldText: t.old_str ?? "",
-				newText: t.new_str
-			})), /* @__PURE__ */ s("div", {
-				className: "flex flex-col gap-2",
-				children: [m, r]
-			});
-		}
-		return null;
+		return /* @__PURE__ */ m("div", {
+			className: "flex flex-col gap-2",
+			children: [r, n]
+		});
+	}
+	if (e) {
+		let t = e.action, n = null, r = v;
+		if (t.command === "create" && t.file_text) {
+			let e = y(t.file_text);
+			r = e.chip, n = e.body;
+		} else (t.command === "str_replace" || t.command === "insert") && t.new_str != null && (n = /* @__PURE__ */ p(l, {
+			oldText: t.old_str ?? "",
+			newText: t.new_str
+		}));
+		return /* @__PURE__ */ m("div", {
+			className: "flex flex-col gap-2",
+			children: [r, n]
+		});
+	}
+	return null;
+}
+function _({ conversationId: e, ...i }) {
+	let { navigateToTab: a } = r(), o = t((e) => e.setSelectedPath), { data: s } = n(), l = h(i), u = s?.workspace?.working_dir, d = l && i.observation ? () => {
+		o(c(l, u), e), a("files");
+	} : void 0;
+	return /* @__PURE__ */ p(g, {
+		...i,
+		onOpenFile: d
+	});
+}
+var v = i({
+	actionKinds: ["FileEditorAction", "StrReplaceEditorAction"],
+	observationKinds: ["FileEditorObservation", "StrReplaceEditorObservation"],
+	Body: function(t) {
+		let { conversationId: n } = e();
+		return n ? /* @__PURE__ */ p(_, {
+			...t,
+			conversationId: n
+		}) : /* @__PURE__ */ p(g, { ...t });
 	}
 });
 //#endregion
-export { c as fileEditorVisualizer };
+export { v as fileEditorVisualizer };
 
 //# sourceMappingURL=file-editor.js.map

package/dist/components/features/chat/tool-visualizers/file-editor/file-editor.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-editor.js","names":[],"sources":["../../../../../../src/components/features/chat/tool-visualizers/file-editor/file-editor.tsx"],"sourcesContent":["import React from \"react\";\nimport { getLanguageFromPath } from \"#/utils/get-language-from-path\";\nimport { defineVisualizer } from \"../define\";\nimport { textFromContent } from \"../text-content\";\nimport { CodeBlock } from \"../primitives/code-block\";\nimport { DiffView } from \"../primitives/diff-view\";\nimport { FilePathChip } from \"../primitives/file-path-chip\";\n\n/**\n * File-editor visualizer for `file_editor` / `str_replace_editor` tools.\n *\n * Observation card: error → message; `str_replace`/`insert` → diff of the file\n * before vs after; `create`/`view` → the file content. Action card (shown while\n * the edit is in flight): `create` → new content; `str_replace` → diff of the\n * replaced snippet; `view`/`undo_edit` → just the path + range.\n */\nexport const fileEditorVisualizer = defineVisualizer({\n  actionKinds: [\"FileEditorAction\", \"StrReplaceEditorAction\"],\n  observationKinds: [\"FileEditorObservation\", \"StrReplaceEditorObservation\"],\n  Body: function FileEditorBody({ action, observation }) {\n    const path = observation?.observation.path ?? action?.action.path ?? \"\";\n    const command = observation?.observation.command ?? action?.action.command;\n    const language = getLanguageFromPath(path);\n\n    const viewRange = action?.action.view_range;\n    const range =\n      command === \"view\" && viewRange\n        ? `${viewRange[0]}-${viewRange[1]}`\n        : undefined;\n    const chip = path ? <FilePathChip path={path} range={range} /> : null;\n\n    if (observation) {\n      const obs = observation.observation;\n      let body: React.ReactNode = null;\n      if (obs.error) {\n        body = (\n          <span className=\"whitespace-pre-wrap text-xs text-danger\">\n            {obs.error}\n          </span>\n        );\n      } else if (obs.old_content != null && obs.new_content != null) {\n        // Nullish, not truthy: an empty string is a valid side of the diff —\n        // clearing a file or inserting into an empty file must still render it.\n        body = <DiffView oldText={obs.old_content} newText={obs.new_content} />;\n      } else {\n        // `view` returns the snippet the agent saw in `content` (the `cat -n`\n        // output) rather than `output`/`new_content`, so fall back to it.\n        // Mirrors the markdown path's \"prefer content for view\" handling.\n        const content =\n          obs.new_content ||\n          obs.output ||\n          (obs.content ? textFromContent(obs.content) : \"\");\n        body = content ? (\n          <CodeBlock code={content} language={language} />\n        ) : null;\n      }\n      return (\n        <div className=\"flex flex-col gap-2\">\n          {chip}\n          {body}\n        </div>\n      );\n    }\n\n    if (action) {\n      const act = action.action;\n      let body: React.ReactNode = null;\n      if (act.command === \"create\" && act.file_text) {\n        body = <CodeBlock code={act.file_text} language={language} />;\n      } else if (\n        (act.command === \"str_replace\" || act.command === \"insert\") &&\n        act.new_str != null\n      ) {\n        // `insert` carries only `new_str`, no `old_str`. Key on `new_str` and\n        // default `old_str` to \"\" so an in-flight insert shows an addition diff\n        // instead of nothing.\n        body = <DiffView oldText={act.old_str ?? \"\"} newText={act.new_str} />;\n      }\n      return (\n        <div className=\"flex flex-col gap-2\">\n          {chip}\n          {body}\n        </div>\n      );\n    }\n\n    return null;\n  },\n});\n"],"mappings":";;;;;;;;;AAgBA,IAAa,IAAuB,EAAiB;CACnD,aAAa,CAAC,oBAAoB,wBAAwB;CAC1D,kBAAkB,CAAC,yBAAyB,6BAA6B;CACzE,MAAM,SAAwB,EAAE,WAAQ,kBAAe;EACrD,IAAM,IAAO,GAAa,YAAY,QAAQ,GAAQ,OAAO,QAAQ,IAC/D,IAAU,GAAa,YAAY,WAAW,GAAQ,OAAO,SAC7D,IAAW,EAAoB,CAAI,GAEnC,IAAY,GAAQ,OAAO,YAC3B,IACJ,MAAY,UAAU,IAClB,GAAG,EAAU,GAAG,GAAG,EAAU,OAC7B,KAAA,GACA,IAAO,IAAO,kBAAC,GAAD;GAAoB;GAAa;EAAQ,CAAA,IAAI;EAEjE,IAAI,GAAa;GACf,IAAM,IAAM,EAAY,aACpB,IAAwB;GAC5B,IAAI,EAAI,OACN,IACE,kBAAC,QAAD;IAAM,WAAU;cACb,EAAI;GACD,CAAA;QAEH,IAAI,EAAI,eAAe,QAAQ,EAAI,eAAe,MAGvD,IAAO,kBAAC,GAAD;IAAU,SAAS,EAAI;IAAa,SAAS,EAAI;GAAc,CAAA;QACjE;IAIL,IAAM,IACJ,EAAI,eACJ,EAAI,WACH,EAAI,UAAU,EAAgB,EAAI,OAAO,IAAI;IAChD,IAAO,IACL,kBAAC,GAAD;KAAW,MAAM;KAAmB;IAAW,CAAA,IAC7C;GACN;GACA,OACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACG,GACA,CACE;;EAET;EAEA,IAAI,GAAQ;GACV,IAAM,IAAM,EAAO,QACf,IAAwB;GAY5B,OAXI,EAAI,YAAY,YAAY,EAAI,YAClC,IAAO,kBAAC,GAAD;IAAW,MAAM,EAAI;IAAqB;GAAW,CAAA,KAE3D,EAAI,YAAY,iBAAiB,EAAI,YAAY,aAClD,EAAI,WAAW,SAKf,IAAO,kBAAC,GAAD;IAAU,SAAS,EAAI,WAAW;IAAI,SAAS,EAAI;GAAU,CAAA,IAGpE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACG,GACA,CACE;;EAET;EAEA,OAAO;CACT;AACF,CAAC"}
+{"version":3,"file":"file-editor.js","names":[],"sources":["../../../../../../src/components/features/chat/tool-visualizers/file-editor/file-editor.tsx"],"sourcesContent":["/**\n * File-editor visualizer for `file_editor` / `str_replace_editor` tools.\n *\n * Observation card: error → message; `str_replace`/`insert` → diff of the file\n * before vs after; `create`/`view` → the file content. Action card (shown while\n * the edit is in flight): `create` → new content; `str_replace` → diff of the\n * replaced snippet; `view`/`undo_edit` → just the path + range.\n *\n * Created Markdown artifacts get a height-clipped rich preview with a View bar\n * that opens the Files drawer, instead of dumping the full source into a code\n * block. Reads/edits of `.md` files keep the normal CodeBlock / DiffView path.\n */\nimport React from \"react\";\nimport { getLanguageFromPath } from \"#/utils/get-language-from-path\";\nimport { toWorkspaceRelativePath } from \"#/utils/workspace-relative-path\";\nimport { useOptionalConversationId } from \"#/hooks/use-conversation-id\";\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useSelectConversationTab } from \"#/hooks/use-select-conversation-tab\";\nimport { useFilesTabStore } from \"#/stores/files-tab-store\";\nimport type {\n  FileEditorAction,\n  StrReplaceEditorAction,\n} from \"#/types/agent-server/core/base/action\";\nimport type {\n  FileEditorObservation,\n  StrReplaceEditorObservation,\n} from \"#/types/agent-server/core/base/observation\";\nimport { defineVisualizer, VisualizerProps } from \"../define\";\nimport { textFromContent } from \"../text-content\";\nimport { CodeBlock } from \"../primitives/code-block\";\nimport { DiffView } from \"../primitives/diff-view\";\nimport { FilePathChip } from \"../primitives/file-path-chip\";\nimport {\n  isMarkdownFilePath,\n  MarkdownFilePreview,\n} from \"../primitives/markdown-file-preview\";\n\ntype FileEditorCardProps = VisualizerProps<\n  FileEditorAction | StrReplaceEditorAction,\n  FileEditorObservation | StrReplaceEditorObservation\n>;\n\n/** The path the event touched; observations win because they are authoritative. */\nconst resolvePath = ({ action, observation }: FileEditorCardProps): string =>\n  observation?.observation.path ?? action?.action.path ?? \"\";\n\ninterface FileEditorCardBodyProps extends FileEditorCardProps {\n  /**\n   * Deep-links the file into the Files drawer. Absent outside a conversation\n   * route, where there is no drawer to open; the card then stays read-only.\n   * Also omitted for in-flight creates so View does not open a missing file.\n   */\n  onOpenFile?: () => void;\n}\n\nfunction FileEditorCardBody({\n  action,\n  observation,\n  onOpenFile,\n}: FileEditorCardBodyProps) {\n  const path = resolvePath({ action, observation });\n  const command = observation?.observation.command ?? action?.action.command;\n  const language = getLanguageFromPath(path);\n\n  const viewRange = action?.action.view_range;\n  const range =\n    command === \"view\" && viewRange\n      ? `${viewRange[0]}-${viewRange[1]}`\n      : undefined;\n  const chip = path ? (\n    <FilePathChip path={path} range={range} onClick={onOpenFile} />\n  ) : null;\n\n  const renderFileContent = (content: string) => {\n    // Only created Markdown artifacts get the rich preview — `view` returns\n    // `cat -n` numbered snippets that must stay in a CodeBlock.\n    if (path && command === \"create\" && isMarkdownFilePath(path)) {\n      // Markdown artifacts own their card (clipped preview + optional View),\n      // so skip the separate path chip to avoid a duplicate filename affordance.\n      return {\n        chip: null as React.ReactNode,\n        body: (\n          <MarkdownFilePreview\n            content={content}\n            path={path}\n            onView={onOpenFile}\n          />\n        ),\n      };\n    }\n    return {\n      chip,\n      body: <CodeBlock code={content} language={language} />,\n    };\n  };\n\n  if (observation) {\n    const obs = observation.observation;\n    let body: React.ReactNode = null;\n    let leadingChip: React.ReactNode = chip;\n    if (obs.error) {\n      body = (\n        <span className=\"whitespace-pre-wrap text-xs text-danger\">\n          {obs.error}\n        </span>\n      );\n    } else if (obs.old_content != null && obs.new_content != null) {\n      // Nullish, not truthy: an empty string is a valid side of the diff —\n      // clearing a file or inserting into an empty file must still render it.\n      body = <DiffView oldText={obs.old_content} newText={obs.new_content} />;\n    } else {\n      // `view` returns the snippet the agent saw in `content` (the `cat -n`\n      // output) rather than `output`/`new_content`, so fall back to it.\n      // Mirrors the markdown path's \"prefer content for view\" handling.\n      const content =\n        obs.new_content ||\n        obs.output ||\n        (obs.content ? textFromContent(obs.content) : \"\");\n      if (content) {\n        const rendered = renderFileContent(content);\n        leadingChip = rendered.chip;\n        body = rendered.body;\n      }\n    }\n    return (\n      <div className=\"flex flex-col gap-2\">\n        {leadingChip}\n        {body}\n      </div>\n    );\n  }\n\n  if (action) {\n    const act = action.action;\n    let body: React.ReactNode = null;\n    let leadingChip: React.ReactNode = chip;\n    if (act.command === \"create\" && act.file_text) {\n      const rendered = renderFileContent(act.file_text);\n      leadingChip = rendered.chip;\n      body = rendered.body;\n    } else if (\n      (act.command === \"str_replace\" || act.command === \"insert\") &&\n      act.new_str != null\n    ) {\n      // `insert` carries only `new_str`, no `old_str`. Key on `new_str` and\n      // default `old_str` to \"\" so an in-flight insert shows an addition diff\n      // instead of nothing.\n      body = <DiffView oldText={act.old_str ?? \"\"} newText={act.new_str} />;\n    }\n    return (\n      <div className=\"flex flex-col gap-2\">\n        {leadingChip}\n        {body}\n      </div>\n    );\n  }\n\n  return null;\n}\n\n/**\n * Conversation-scoped wrapper: owns the Files-drawer deep link. Split from the\n * card so the conversation-only hooks below never run outside a conversation\n * route (they throw on a missing conversation id).\n */\nfunction FileEditorCardWithDrawerLink({\n  conversationId,\n  ...props\n}: FileEditorCardProps & { conversationId: string }) {\n  const { navigateToTab } = useSelectConversationTab();\n  const setSelectedPath = useFilesTabStore((state) => state.setSelectedPath);\n  const { data: conversation } = useActiveConversation();\n  const path = resolvePath(props);\n  const workingDir = conversation?.workspace?.working_dir;\n\n  // Only deep-link once the observation exists — the file is not guaranteed\n  // to be on disk while the create action is still in flight.\n  const onOpenFile =\n    path && props.observation\n      ? () => {\n          setSelectedPath(\n            toWorkspaceRelativePath(path, workingDir),\n            conversationId,\n          );\n          navigateToTab(\"files\");\n        }\n      : undefined;\n\n  return <FileEditorCardBody {...props} onOpenFile={onOpenFile} />;\n}\n\nexport const fileEditorVisualizer = defineVisualizer({\n  actionKinds: [\"FileEditorAction\", \"StrReplaceEditorAction\"],\n  observationKinds: [\"FileEditorObservation\", \"StrReplaceEditorObservation\"],\n  Body: function FileEditorBody(props) {\n    const { conversationId } = useOptionalConversationId();\n\n    return conversationId ? (\n      <FileEditorCardWithDrawerLink\n        {...props}\n        conversationId={conversationId}\n      />\n    ) : (\n      <FileEditorCardBody {...props} />\n    );\n  },\n});\n"],"mappings":";;;;;;;;;;;;;;;;AA2CA,IAAM,KAAe,EAAE,WAAQ,qBAC7B,GAAa,YAAY,QAAQ,GAAQ,OAAO,QAAQ;AAW1D,SAAS,EAAmB,EAC1B,WACA,gBACA,iBAC0B;CAC1B,IAAM,IAAO,EAAY;EAAE;EAAQ;CAAY,CAAC,GAC1C,IAAU,GAAa,YAAY,WAAW,GAAQ,OAAO,SAC7D,IAAW,EAAoB,CAAI,GAEnC,IAAY,GAAQ,OAAO,YAC3B,IACJ,MAAY,UAAU,IAClB,GAAG,EAAU,GAAG,GAAG,EAAU,OAC7B,KAAA,GACA,IAAO,IACX,kBAAC,GAAD;EAAoB;EAAa;EAAO,SAAS;CAAa,CAAA,IAC5D,MAEE,KAAqB,MAGrB,KAAQ,MAAY,YAAY,EAAmB,CAAI,IAGlD;EACL,MAAM;EACN,MACE,kBAAC,GAAD;GACW;GACH;GACN,QAAQ;EACT,CAAA;CAEL,IAEK;EACL;EACA,MAAM,kBAAC,GAAD;GAAW,MAAM;GAAmB;EAAW,CAAA;CACvD;CAGF,IAAI,GAAa;EACf,IAAM,IAAM,EAAY,aACpB,IAAwB,MACxB,IAA+B;EACnC,IAAI,EAAI,OACN,IACE,kBAAC,QAAD;GAAM,WAAU;aACb,EAAI;EACD,CAAA;OAEH,IAAI,EAAI,eAAe,QAAQ,EAAI,eAAe,MAGvD,IAAO,kBAAC,GAAD;GAAU,SAAS,EAAI;GAAa,SAAS,EAAI;EAAc,CAAA;OACjE;GAIL,IAAM,IACJ,EAAI,eACJ,EAAI,WACH,EAAI,UAAU,EAAgB,EAAI,OAAO,IAAI;GAChD,IAAI,GAAS;IACX,IAAM,IAAW,EAAkB,CAAO;IAE1C,AADA,IAAc,EAAS,MACvB,IAAO,EAAS;GAClB;EACF;EACA,OACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACG,GACA,CACE;;CAET;CAEA,IAAI,GAAQ;EACV,IAAM,IAAM,EAAO,QACf,IAAwB,MACxB,IAA+B;EACnC,IAAI,EAAI,YAAY,YAAY,EAAI,WAAW;GAC7C,IAAM,IAAW,EAAkB,EAAI,SAAS;GAEhD,AADA,IAAc,EAAS,MACvB,IAAO,EAAS;EAClB,OAAO,CACJ,EAAI,YAAY,iBAAiB,EAAI,YAAY,aAClD,EAAI,WAAW,SAKf,IAAO,kBAAC,GAAD;GAAU,SAAS,EAAI,WAAW;GAAI,SAAS,EAAI;EAAU,CAAA;EAEtE,OACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACG,GACA,CACE;;CAET;CAEA,OAAO;AACT;AAOA,SAAS,EAA6B,EACpC,mBACA,GAAG,KACgD;CACnD,IAAM,EAAE,qBAAkB,EAAyB,GAC7C,IAAkB,GAAkB,MAAU,EAAM,eAAe,GACnE,EAAE,MAAM,MAAiB,EAAsB,GAC/C,IAAO,EAAY,CAAK,GACxB,IAAa,GAAc,WAAW,aAItC,IACJ,KAAQ,EAAM,oBACJ;EAKJ,AAJA,EACE,EAAwB,GAAM,CAAU,GACxC,CACF,GACA,EAAc,OAAO;CACvB,IACA,KAAA;CAEN,OAAO,kBAAC,GAAD;EAAoB,GAAI;EAAmB;CAAa,CAAA;AACjE;AAEA,IAAa,IAAuB,EAAiB;CACnD,aAAa,CAAC,oBAAoB,wBAAwB;CAC1D,kBAAkB,CAAC,yBAAyB,6BAA6B;CACzE,MAAM,SAAwB,GAAO;EACnC,IAAM,EAAE,sBAAmB,EAA0B;EAErD,OAAO,IACL,kBAAC,GAAD;GACE,GAAI;GACY;EACjB,CAAA,IAED,kBAAC,GAAD,EAAoB,GAAI,EAAQ,CAAA;CAEpC;AACF,CAAC"}

package/dist/components/features/chat/tool-visualizers/primitives/file-path-chip.cjs

@@ -1,2 +1,2 @@
-const e=require("../../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../../../icons/file.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");function i({path:e,range:n}){return(0,r.jsxs)(`span`,{className:`inline-flex max-w-full items-center gap-1.5 self-start rounded bg-surface-raised px-2 py-0.5 font-mono text-xs text-foreground`,children:[(0,r.jsx)(t.default,{className:`h-3.5 w-3.5 flex-shrink-0 text-muted`}),(0,r.jsx)(`span`,{className:`break-all`,children:n?`${e}:${n}`:e})]})}exports.FilePathChip=i;
+const e=require("../../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../../../icons/file.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");function i({path:e,range:n,onClick:i}){let a=(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.default,{className:`h-3.5 w-3.5 flex-shrink-0 text-muted`}),(0,r.jsx)(`span`,{className:`break-all`,children:n?`${e}:${n}`:e})]}),o=`inline-flex max-w-full items-center gap-1.5 self-start rounded bg-surface-raised px-2 py-0.5 font-mono text-xs text-foreground`;return i?(0,r.jsx)(`button`,{type:`button`,className:`${o} cursor-pointer hover:bg-[var(--oh-interactive-hover)]`,onClick:i,children:a}):(0,r.jsx)(`span`,{className:o,children:a})}exports.FilePathChip=i;
 //# sourceMappingURL=file-path-chip.cjs.map

package/dist/components/features/chat/tool-visualizers/primitives/file-path-chip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"file-path-chip.cjs","names":[],"sources":["../../../../../../src/components/features/chat/tool-visualizers/primitives/file-path-chip.tsx"],"sourcesContent":["import React from \"react\";\nimport FileIcon from \"#/icons/file.svg?react\";\n\ninterface FilePathChipProps {\n  path: string;\n  /** Optional line-range suffix, e.g. \"12-48\". */\n  range?: string;\n}\n\n/**\n * Monospace file-path pill with a file icon and an optional line-range suffix.\n */\nexport function FilePathChip({ path, range }: FilePathChipProps) {\n  return (\n    <span className=\"inline-flex max-w-full items-center gap-1.5 self-start rounded bg-surface-raised px-2 py-0.5 font-mono text-xs text-foreground\">\n      <FileIcon className=\"h-3.5 w-3.5 flex-shrink-0 text-muted\" />\n      <span className=\"break-all\">{range ? `${path}:${range}` : path}</span>\n    </span>\n  );\n}\n"],"mappings":"uLAYA,SAAgB,EAAa,CAAE,OAAM,SAA4B,CAC/D,OACE,EAAA,EAAA,MAAC,OAAD,CAAM,UAAU,0IAAhB,EACE,EAAA,EAAA,KAAC,EAAA,QAAD,CAAU,UAAU,sCAAwC,CAAA,GAC5D,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,qBAAa,EAAQ,GAAG,EAAK,GAAG,IAAU,CAAW,CAAA,CACjE,GAEV"}
+{"version":3,"file":"file-path-chip.cjs","names":[],"sources":["../../../../../../src/components/features/chat/tool-visualizers/primitives/file-path-chip.tsx"],"sourcesContent":["import React from \"react\";\nimport FileIcon from \"#/icons/file.svg?react\";\n\ninterface FilePathChipProps {\n  path: string;\n  /** Optional line-range suffix, e.g. \"12-48\". */\n  range?: string;\n  /** Opens the referenced file when the surrounding visualizer can navigate. */\n  onClick?: () => void;\n}\n\n/**\n * Monospace file-path pill with an optional navigation affordance.\n *\n * The static variant remains available for visualizers without a workspace\n * target; passing `onClick` upgrades the same visual language to a button.\n */\nexport function FilePathChip({ path, range, onClick }: FilePathChipProps) {\n  const content = (\n    <>\n      <FileIcon className=\"h-3.5 w-3.5 flex-shrink-0 text-muted\" />\n      <span className=\"break-all\">{range ? `${path}:${range}` : path}</span>\n    </>\n  );\n  const className =\n    \"inline-flex max-w-full items-center gap-1.5 self-start rounded bg-surface-raised px-2 py-0.5 font-mono text-xs text-foreground\";\n\n  if (onClick) {\n    return (\n      <button\n        type=\"button\"\n        className={`${className} cursor-pointer hover:bg-[var(--oh-interactive-hover)]`}\n        onClick={onClick}\n      >\n        {content}\n      </button>\n    );\n  }\n\n  return <span className={className}>{content}</span>;\n}\n"],"mappings":"uLAiBA,SAAgB,EAAa,CAAE,OAAM,QAAO,WAA8B,CACxE,IAAM,GACJ,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,KAAC,EAAA,QAAD,CAAU,UAAU,sCAAwC,CAAA,GAC5D,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,qBAAa,EAAQ,GAAG,EAAK,GAAG,IAAU,CAAW,CAAA,CACrE,CAAA,CAAA,EAEE,EACJ,iIAcF,OAZI,GAEA,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,UAAW,GAAG,EAAU,wDACf,mBAER,CACK,CAAA,GAIL,EAAA,EAAA,KAAC,OAAD,CAAiB,qBAAY,CAAc,CAAA,CACpD"}

package/dist/components/features/chat/tool-visualizers/primitives/file-path-chip.d.ts

@@ -3,9 +3,14 @@ interface FilePathChipProps {
     path: string;
     /** Optional line-range suffix, e.g. "12-48". */
     range?: string;
+    /** Opens the referenced file when the surrounding visualizer can navigate. */
+    onClick?: () => void;
 }
 /**
- * Monospace file-path pill with a file icon and an optional line-range suffix.
+ * Monospace file-path pill with an optional navigation affordance.
+ *
+ * The static variant remains available for visualizers without a workspace
+ * target; passing `onClick` upgrades the same visual language to a button.
  */
-export declare function FilePathChip({ path, range }: FilePathChipProps): React.JSX.Element;
+export declare function FilePathChip({ path, range, onClick }: FilePathChipProps): React.JSX.Element;
 export {};

package/dist/components/features/chat/tool-visualizers/primitives/file-path-chip.js

@@ -1,17 +1,23 @@
 import e from "../../../../../icons/file.js";
 import "react";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/components/features/chat/tool-visualizers/primitives/file-path-chip.tsx
-function r({ path: r, range: i }) {
-	return /* @__PURE__ */ n("span", {
-		className: "inline-flex max-w-full items-center gap-1.5 self-start rounded bg-surface-raised px-2 py-0.5 font-mono text-xs text-foreground",
-		children: [/* @__PURE__ */ t(e, { className: "h-3.5 w-3.5 flex-shrink-0 text-muted" }), /* @__PURE__ */ t("span", {
-			className: "break-all",
-			children: i ? `${r}:${i}` : r
-		})]
+function i({ path: i, range: a, onClick: o }) {
+	let s = /* @__PURE__ */ r(t, { children: [/* @__PURE__ */ n(e, { className: "h-3.5 w-3.5 flex-shrink-0 text-muted" }), /* @__PURE__ */ n("span", {
+		className: "break-all",
+		children: a ? `${i}:${a}` : i
+	})] }), c = "inline-flex max-w-full items-center gap-1.5 self-start rounded bg-surface-raised px-2 py-0.5 font-mono text-xs text-foreground";
+	return o ? /* @__PURE__ */ n("button", {
+		type: "button",
+		className: `${c} cursor-pointer hover:bg-[var(--oh-interactive-hover)]`,
+		onClick: o,
+		children: s
+	}) : /* @__PURE__ */ n("span", {
+		className: c,
+		children: s
 	});
 }
 //#endregion
-export { r as FilePathChip };
+export { i as FilePathChip };
 
 //# sourceMappingURL=file-path-chip.js.map

package/dist/components/features/chat/tool-visualizers/primitives/file-path-chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-path-chip.js","names":[],"sources":["../../../../../../src/components/features/chat/tool-visualizers/primitives/file-path-chip.tsx"],"sourcesContent":["import React from \"react\";\nimport FileIcon from \"#/icons/file.svg?react\";\n\ninterface FilePathChipProps {\n  path: string;\n  /** Optional line-range suffix, e.g. \"12-48\". */\n  range?: string;\n}\n\n/**\n * Monospace file-path pill with a file icon and an optional line-range suffix.\n */\nexport function FilePathChip({ path, range }: FilePathChipProps) {\n  return (\n    <span className=\"inline-flex max-w-full items-center gap-1.5 self-start rounded bg-surface-raised px-2 py-0.5 font-mono text-xs text-foreground\">\n      <FileIcon className=\"h-3.5 w-3.5 flex-shrink-0 text-muted\" />\n      <span className=\"break-all\">{range ? `${path}:${range}` : path}</span>\n    </span>\n  );\n}\n"],"mappings":";;;;AAYA,SAAgB,EAAa,EAAE,SAAM,YAA4B;CAC/D,OACE,kBAAC,QAAD;EAAM,WAAU;YAAhB,CACE,kBAAC,GAAD,EAAU,WAAU,uCAAwC,CAAA,GAC5D,kBAAC,QAAD;GAAM,WAAU;aAAa,IAAQ,GAAG,EAAK,GAAG,MAAU;EAAW,CAAA,CACjE;;AAEV"}
+{"version":3,"file":"file-path-chip.js","names":[],"sources":["../../../../../../src/components/features/chat/tool-visualizers/primitives/file-path-chip.tsx"],"sourcesContent":["import React from \"react\";\nimport FileIcon from \"#/icons/file.svg?react\";\n\ninterface FilePathChipProps {\n  path: string;\n  /** Optional line-range suffix, e.g. \"12-48\". */\n  range?: string;\n  /** Opens the referenced file when the surrounding visualizer can navigate. */\n  onClick?: () => void;\n}\n\n/**\n * Monospace file-path pill with an optional navigation affordance.\n *\n * The static variant remains available for visualizers without a workspace\n * target; passing `onClick` upgrades the same visual language to a button.\n */\nexport function FilePathChip({ path, range, onClick }: FilePathChipProps) {\n  const content = (\n    <>\n      <FileIcon className=\"h-3.5 w-3.5 flex-shrink-0 text-muted\" />\n      <span className=\"break-all\">{range ? `${path}:${range}` : path}</span>\n    </>\n  );\n  const className =\n    \"inline-flex max-w-full items-center gap-1.5 self-start rounded bg-surface-raised px-2 py-0.5 font-mono text-xs text-foreground\";\n\n  if (onClick) {\n    return (\n      <button\n        type=\"button\"\n        className={`${className} cursor-pointer hover:bg-[var(--oh-interactive-hover)]`}\n        onClick={onClick}\n      >\n        {content}\n      </button>\n    );\n  }\n\n  return <span className={className}>{content}</span>;\n}\n"],"mappings":";;;;AAiBA,SAAgB,EAAa,EAAE,SAAM,UAAO,cAA8B;CACxE,IAAM,IACJ,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,EAAU,WAAU,uCAAwC,CAAA,GAC5D,kBAAC,QAAD;EAAM,WAAU;YAAa,IAAQ,GAAG,EAAK,GAAG,MAAU;CAAW,CAAA,CACrE,EAAA,CAAA,GAEE,IACJ;CAcF,OAZI,IAEA,kBAAC,UAAD;EACE,MAAK;EACL,WAAW,GAAG,EAAU;EACf;YAER;CACK,CAAA,IAIL,kBAAC,QAAD;EAAiB;YAAY;CAAc,CAAA;AACpD"}

package/dist/components/features/chat/tool-visualizers/primitives/markdown-file-preview.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("../../../../../node_modules/lucide-react/dist/esm/icons/arrow-up-right.cjs"),r=require("../../../../../types/agent-server/type-guards.cjs"),i=require("../../../markdown/markdown-renderer.cjs"),a=require("../../../../../icons/file.cjs"),o=require("../../../../../ui/typography.cjs"),s=require("../../../markdown/plan-components.cjs"),c=require("../../../../../utils/is-markdown-file-path.cjs");let l=require("react/jsx-runtime");var u=new Set([`FileEditorAction`,`StrReplaceEditorAction`]),d=new Set([`FileEditorObservation`,`StrReplaceEditorObservation`]);function f(e,t){if(r.isActionEvent(e)&&u.has(e.action.kind))return e.action.path||null;if(r.isObservationEvent(e)&&d.has(e.observation.kind)){let n=e.observation.path;if(n)return n;if(t&&u.has(t.action.kind))return t.action.path||null}return null}function p(e,t){if(r.isActionEvent(e)&&u.has(e.action.kind))return e.action.command||null;if(r.isObservationEvent(e)&&d.has(e.observation.kind)){let n=e.observation.command;if(n)return n;if(t&&u.has(t.action.kind))return t.action.command||null}return null}function m(e,t){let n=f(e,t),r=p(e,t);return!!(n&&r===`create`&&c.isMarkdownFilePath(n))}function h({content:r,path:c,onView:u}){let{t:d}=e.useTranslation(`openhands`),f=c.split(`/`).pop()||c;return(0,l.jsxs)(`div`,{className:`w-full overflow-hidden rounded-[12px] border border-[var(--oh-border)] bg-[var(--oh-surface)]`,"data-testid":`markdown-file-preview`,children:[(0,l.jsx)(`div`,{"data-testid":`markdown-file-preview-content`,className:`max-h-40 overflow-y-auto px-4 py-3 text-white custom-scrollbar-always [--oh-scroll-fade-from:var(--oh-surface)]`,children:(0,l.jsx)(i.MarkdownRenderer,{content:r,includeStandard:!0,includeHeadings:!0,components:s.planComponents})}),(0,l.jsxs)(`div`,{className:`flex h-10 items-center justify-between gap-2 border-t border-[var(--oh-border)] px-3`,children:[(0,l.jsxs)(`div`,{className:`flex min-w-0 items-center gap-1.5`,children:[(0,l.jsx)(a.default,{className:`h-3.5 w-3.5 flex-shrink-0 text-[var(--oh-muted)]`}),(0,l.jsx)(o.Typography.Text,{className:`truncate font-mono text-[11px] leading-4 tracking-[0.11px] text-[var(--oh-muted)]`,children:f})]}),u?(0,l.jsxs)(`button`,{type:`button`,onClick:u,className:`flex shrink-0 cursor-pointer items-center gap-1 transition-opacity hover:opacity-80`,"data-testid":`markdown-file-preview-view`,children:[(0,l.jsx)(o.Typography.Text,{className:`text-[11px] leading-4 tracking-[0.11px] text-white`,children:d(t.I18nKey.COMMON$VIEW)}),(0,l.jsx)(n.ArrowUpRight,{className:`text-white`,size:16})]}):null]})]})}exports.MarkdownFilePreview=h,exports.isMarkdownFileEditorEvent=m;
+//# sourceMappingURL=markdown-file-preview.cjs.map

package/dist/components/features/chat/tool-visualizers/primitives/markdown-file-preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown-file-preview.cjs","names":[],"sources":["../../../../../../src/components/features/chat/tool-visualizers/primitives/markdown-file-preview.tsx"],"sourcesContent":["/**\n * Inline markdown artifact preview for chat tool cards.\n *\n * Shows a height-limited scrollable rich preview so long reports stay compact\n * in the stream; the footer View action deep-links into the Files drawer for\n * the full document. Markdown *create* file-editor events stay expanded and\n * ungrouped so the preview is visible without an extra click.\n */\nimport { useTranslation } from \"react-i18next\";\nimport { ArrowUpRight } from \"lucide-react\";\nimport FileIcon from \"#/icons/file.svg?react\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { MarkdownRenderer } from \"#/components/features/markdown/markdown-renderer\";\nimport { planComponents } from \"#/components/features/markdown/plan-components\";\nimport { Typography } from \"#/ui/typography\";\nimport { isMarkdownFilePath } from \"#/utils/is-markdown-file-path\";\nimport type {\n  ActionEvent,\n  ObservationEvent,\n  OpenHandsEvent,\n} from \"#/types/agent-server/core\";\nimport {\n  isActionEvent,\n  isObservationEvent,\n} from \"#/types/agent-server/type-guards\";\nimport type {\n  FileEditorAction,\n  StrReplaceEditorAction,\n} from \"#/types/agent-server/core/base/action\";\nimport type {\n  FileEditorObservation,\n  StrReplaceEditorObservation,\n} from \"#/types/agent-server/core/base/observation\";\n\nexport { isMarkdownFilePath } from \"#/utils/is-markdown-file-path\";\n\nconst FILE_EDITOR_ACTION_KINDS = new Set([\n  \"FileEditorAction\",\n  \"StrReplaceEditorAction\",\n]);\nconst FILE_EDITOR_OBSERVATION_KINDS = new Set([\n  \"FileEditorObservation\",\n  \"StrReplaceEditorObservation\",\n]);\n\ninterface MarkdownFilePreviewProps {\n  content: string;\n  path: string;\n  /** When omitted (e.g. in-flight create), the View affordance is hidden. */\n  onView?: () => void;\n}\n\n/**\n * Resolves the file path for a file-editor action/observation, including the\n * observation's originating action when the observation omits `path`.\n */\nfunction getFileEditorEventPath(\n  event: OpenHandsEvent,\n  correspondingAction?: ActionEvent,\n): string | null {\n  if (isActionEvent(event) && FILE_EDITOR_ACTION_KINDS.has(event.action.kind)) {\n    return (\n      (event as ActionEvent<FileEditorAction | StrReplaceEditorAction>).action\n        .path || null\n    );\n  }\n\n  if (\n    isObservationEvent(event) &&\n    FILE_EDITOR_OBSERVATION_KINDS.has(event.observation.kind)\n  ) {\n    const path = (\n      event as ObservationEvent<\n        FileEditorObservation | StrReplaceEditorObservation\n      >\n    ).observation.path;\n    if (path) return path;\n    if (\n      correspondingAction &&\n      FILE_EDITOR_ACTION_KINDS.has(correspondingAction.action.kind)\n    ) {\n      return (\n        (\n          correspondingAction as ActionEvent<\n            FileEditorAction | StrReplaceEditorAction\n          >\n        ).action.path || null\n      );\n    }\n  }\n\n  return null;\n}\n\n/**\n * Resolves the file-editor command (`create` / `view` / …), including the\n * observation's originating action when the observation omits `command`.\n */\nfunction getFileEditorEventCommand(\n  event: OpenHandsEvent,\n  correspondingAction?: ActionEvent,\n): string | null {\n  if (isActionEvent(event) && FILE_EDITOR_ACTION_KINDS.has(event.action.kind)) {\n    return (\n      (event as ActionEvent<FileEditorAction | StrReplaceEditorAction>).action\n        .command || null\n    );\n  }\n\n  if (\n    isObservationEvent(event) &&\n    FILE_EDITOR_OBSERVATION_KINDS.has(event.observation.kind)\n  ) {\n    const command = (\n      event as ObservationEvent<\n        FileEditorObservation | StrReplaceEditorObservation\n      >\n    ).observation.command;\n    if (command) return command;\n    if (\n      correspondingAction &&\n      FILE_EDITOR_ACTION_KINDS.has(correspondingAction.action.kind)\n    ) {\n      return (\n        (\n          correspondingAction as ActionEvent<\n            FileEditorAction | StrReplaceEditorAction\n          >\n        ).action.command || null\n      );\n    }\n  }\n\n  return null;\n}\n\n/**\n * True for file-editor *create* events whose path is a markdown artifact.\n *\n * Used to keep those cards expanded and outside collapsed action groups so\n * the clipped preview is visible by default. Reads/edits of `.md` files stay\n * on the normal groupable path.\n */\nexport function isMarkdownFileEditorEvent(\n  event: OpenHandsEvent,\n  correspondingAction?: ActionEvent,\n): boolean {\n  const path = getFileEditorEventPath(event, correspondingAction);\n  const command = getFileEditorEventCommand(event, correspondingAction);\n  return Boolean(path && command === \"create\" && isMarkdownFilePath(path));\n}\n\n/**\n * Height-clipped markdown card with an optional View bar that opens the file.\n */\nexport function MarkdownFilePreview({\n  content,\n  path,\n  onView,\n}: MarkdownFilePreviewProps) {\n  const { t } = useTranslation(\"openhands\");\n  const fileName = path.split(\"/\").pop() || path;\n\n  return (\n    <div\n      className=\"w-full overflow-hidden rounded-[12px] border border-[var(--oh-border)] bg-[var(--oh-surface)]\"\n      data-testid=\"markdown-file-preview\"\n    >\n      <div\n        data-testid=\"markdown-file-preview-content\"\n        className=\"max-h-40 overflow-y-auto px-4 py-3 text-white custom-scrollbar-always [--oh-scroll-fade-from:var(--oh-surface)]\"\n      >\n        {/* Deliberately compact: the clipped in-stream card reuses the plan\n            preview's small typography; the Files drawer renders the same\n            artifact full-size with the default components. */}\n        <MarkdownRenderer\n          content={content}\n          includeStandard\n          includeHeadings\n          components={planComponents}\n        />\n      </div>\n      <div className=\"flex h-10 items-center justify-between gap-2 border-t border-[var(--oh-border)] px-3\">\n        <div className=\"flex min-w-0 items-center gap-1.5\">\n          <FileIcon className=\"h-3.5 w-3.5 flex-shrink-0 text-[var(--oh-muted)]\" />\n          <Typography.Text className=\"truncate font-mono text-[11px] leading-4 tracking-[0.11px] text-[var(--oh-muted)]\">\n            {fileName}\n          </Typography.Text>\n        </div>\n        {onView ? (\n          <button\n            type=\"button\"\n            onClick={onView}\n            className=\"flex shrink-0 cursor-pointer items-center gap-1 transition-opacity hover:opacity-80\"\n            data-testid=\"markdown-file-preview-view\"\n          >\n            <Typography.Text className=\"text-[11px] leading-4 tracking-[0.11px] text-white\">\n              {t(I18nKey.COMMON$VIEW)}\n            </Typography.Text>\n            <ArrowUpRight className=\"text-white\" size={16} />\n          </button>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"ynBAoCA,IAAM,EAA2B,IAAI,IAAI,CACvC,mBACA,wBACF,CAAC,EACK,EAAgC,IAAI,IAAI,CAC5C,wBACA,6BACF,CAAC,EAaD,SAAS,EACP,EACA,EACe,CACf,GAAI,EAAA,cAAc,CAAK,GAAK,EAAyB,IAAI,EAAM,OAAO,IAAI,EACxE,OACG,EAAiE,OAC/D,MAAQ,KAIf,GACE,EAAA,mBAAmB,CAAK,GACxB,EAA8B,IAAI,EAAM,YAAY,IAAI,EACxD,CACA,IAAM,EACJ,EAGA,YAAY,KACd,GAAI,EAAM,OAAO,EACjB,GACE,GACA,EAAyB,IAAI,EAAoB,OAAO,IAAI,EAE5D,OAEI,EAGA,OAAO,MAAQ,IAGvB,CAEA,OAAO,IACT,CAMA,SAAS,EACP,EACA,EACe,CACf,GAAI,EAAA,cAAc,CAAK,GAAK,EAAyB,IAAI,EAAM,OAAO,IAAI,EACxE,OACG,EAAiE,OAC/D,SAAW,KAIlB,GACE,EAAA,mBAAmB,CAAK,GACxB,EAA8B,IAAI,EAAM,YAAY,IAAI,EACxD,CACA,IAAM,EACJ,EAGA,YAAY,QACd,GAAI,EAAS,OAAO,EACpB,GACE,GACA,EAAyB,IAAI,EAAoB,OAAO,IAAI,EAE5D,OAEI,EAGA,OAAO,SAAW,IAG1B,CAEA,OAAO,IACT,CASA,SAAgB,EACd,EACA,EACS,CACT,IAAM,EAAO,EAAuB,EAAO,CAAmB,EACxD,EAAU,EAA0B,EAAO,CAAmB,EACpE,MAAO,GAAQ,GAAQ,IAAY,UAAY,EAAA,mBAAmB,CAAI,EACxE,CAKA,SAAgB,EAAoB,CAClC,UACA,OACA,UAC2B,CAC3B,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAClC,EAAW,EAAK,MAAM,GAAG,EAAE,IAAI,GAAK,EAE1C,OACE,EAAA,EAAA,MAAC,MAAD,CACE,UAAU,gGACV,cAAY,iCAFd,EAIE,EAAA,EAAA,KAAC,MAAD,CACE,cAAY,gCACZ,UAAU,4HAKV,EAAA,EAAA,KAAC,EAAA,iBAAD,CACW,UACT,gBAAA,GACA,gBAAA,GACA,WAAY,EAAA,cACb,CAAA,CACE,CAAA,GACL,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,gGAAf,EACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,6CAAf,EACE,EAAA,EAAA,KAAC,EAAA,QAAD,CAAU,UAAU,kDAAoD,CAAA,GACxE,EAAA,EAAA,KAAC,EAAA,WAAW,KAAZ,CAAiB,UAAU,6FACxB,CACc,CAAA,CACd,IACJ,GACC,EAAA,EAAA,MAAC,SAAD,CACE,KAAK,SACL,QAAS,EACT,UAAU,sFACV,cAAY,sCAJd,EAME,EAAA,EAAA,KAAC,EAAA,WAAW,KAAZ,CAAiB,UAAU,8DACxB,EAAE,EAAA,QAAQ,WAAW,CACP,CAAA,GACjB,EAAA,EAAA,KAAC,EAAA,aAAD,CAAc,UAAU,aAAa,KAAM,EAAK,CAAA,CAC1C,IACN,IACD,GACF,GAET"}

package/dist/components/features/chat/tool-visualizers/primitives/markdown-file-preview.d.ts

@@ -0,0 +1,20 @@
+import type { ActionEvent, OpenHandsEvent } from "#/types/agent-server/core";
+export { isMarkdownFilePath } from "#/utils/is-markdown-file-path";
+interface MarkdownFilePreviewProps {
+    content: string;
+    path: string;
+    /** When omitted (e.g. in-flight create), the View affordance is hidden. */
+    onView?: () => void;
+}
+/**
+ * True for file-editor *create* events whose path is a markdown artifact.
+ *
+ * Used to keep those cards expanded and outside collapsed action groups so
+ * the clipped preview is visible by default. Reads/edits of `.md` files stay
+ * on the normal groupable path.
+ */
+export declare function isMarkdownFileEditorEvent(event: OpenHandsEvent, correspondingAction?: ActionEvent): boolean;
+/**
+ * Height-clipped markdown card with an optional View bar that opens the file.
+ */
+export declare function MarkdownFilePreview({ content, path, onView, }: MarkdownFilePreviewProps): import("react").JSX.Element;

package/dist/components/features/chat/tool-visualizers/primitives/markdown-file-preview.js

@@ -0,0 +1,76 @@
+import { useTranslation as e } from "../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+import { I18nKey as t } from "../../../../../i18n/declaration.js";
+import { ArrowUpRight as n } from "../../../../../node_modules/lucide-react/dist/esm/icons/arrow-up-right.js";
+import { isActionEvent as r, isObservationEvent as i } from "../../../../../types/agent-server/type-guards.js";
+import { MarkdownRenderer as a } from "../../../markdown/markdown-renderer.js";
+import o from "../../../../../icons/file.js";
+import { Typography as s } from "../../../../../ui/typography.js";
+import { planComponents as c } from "../../../markdown/plan-components.js";
+import { isMarkdownFilePath as l } from "../../../../../utils/is-markdown-file-path.js";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/features/chat/tool-visualizers/primitives/markdown-file-preview.tsx
+var f = new Set(["FileEditorAction", "StrReplaceEditorAction"]), p = new Set(["FileEditorObservation", "StrReplaceEditorObservation"]);
+function m(e, t) {
+	if (r(e) && f.has(e.action.kind)) return e.action.path || null;
+	if (i(e) && p.has(e.observation.kind)) {
+		let n = e.observation.path;
+		if (n) return n;
+		if (t && f.has(t.action.kind)) return t.action.path || null;
+	}
+	return null;
+}
+function h(e, t) {
+	if (r(e) && f.has(e.action.kind)) return e.action.command || null;
+	if (i(e) && p.has(e.observation.kind)) {
+		let n = e.observation.command;
+		if (n) return n;
+		if (t && f.has(t.action.kind)) return t.action.command || null;
+	}
+	return null;
+}
+function g(e, t) {
+	let n = m(e, t), r = h(e, t);
+	return !!(n && r === "create" && l(n));
+}
+function _({ content: r, path: i, onView: l }) {
+	let { t: f } = e("openhands"), p = i.split("/").pop() || i;
+	return /* @__PURE__ */ d("div", {
+		className: "w-full overflow-hidden rounded-[12px] border border-[var(--oh-border)] bg-[var(--oh-surface)]",
+		"data-testid": "markdown-file-preview",
+		children: [/* @__PURE__ */ u("div", {
+			"data-testid": "markdown-file-preview-content",
+			className: "max-h-40 overflow-y-auto px-4 py-3 text-white custom-scrollbar-always [--oh-scroll-fade-from:var(--oh-surface)]",
+			children: /* @__PURE__ */ u(a, {
+				content: r,
+				includeStandard: !0,
+				includeHeadings: !0,
+				components: c
+			})
+		}), /* @__PURE__ */ d("div", {
+			className: "flex h-10 items-center justify-between gap-2 border-t border-[var(--oh-border)] px-3",
+			children: [/* @__PURE__ */ d("div", {
+				className: "flex min-w-0 items-center gap-1.5",
+				children: [/* @__PURE__ */ u(o, { className: "h-3.5 w-3.5 flex-shrink-0 text-[var(--oh-muted)]" }), /* @__PURE__ */ u(s.Text, {
+					className: "truncate font-mono text-[11px] leading-4 tracking-[0.11px] text-[var(--oh-muted)]",
+					children: p
+				})]
+			}), l ? /* @__PURE__ */ d("button", {
+				type: "button",
+				onClick: l,
+				className: "flex shrink-0 cursor-pointer items-center gap-1 transition-opacity hover:opacity-80",
+				"data-testid": "markdown-file-preview-view",
+				children: [/* @__PURE__ */ u(s.Text, {
+					className: "text-[11px] leading-4 tracking-[0.11px] text-white",
+					children: f(t.COMMON$VIEW)
+				}), /* @__PURE__ */ u(n, {
+					className: "text-white",
+					size: 16
+				})]
+			}) : null]
+		})]
+	});
+}
+//#endregion
+export { _ as MarkdownFilePreview, g as isMarkdownFileEditorEvent };
+
+//# sourceMappingURL=markdown-file-preview.js.map

package/dist/components/features/chat/tool-visualizers/primitives/markdown-file-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown-file-preview.js","names":[],"sources":["../../../../../../src/components/features/chat/tool-visualizers/primitives/markdown-file-preview.tsx"],"sourcesContent":["/**\n * Inline markdown artifact preview for chat tool cards.\n *\n * Shows a height-limited scrollable rich preview so long reports stay compact\n * in the stream; the footer View action deep-links into the Files drawer for\n * the full document. Markdown *create* file-editor events stay expanded and\n * ungrouped so the preview is visible without an extra click.\n */\nimport { useTranslation } from \"react-i18next\";\nimport { ArrowUpRight } from \"lucide-react\";\nimport FileIcon from \"#/icons/file.svg?react\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { MarkdownRenderer } from \"#/components/features/markdown/markdown-renderer\";\nimport { planComponents } from \"#/components/features/markdown/plan-components\";\nimport { Typography } from \"#/ui/typography\";\nimport { isMarkdownFilePath } from \"#/utils/is-markdown-file-path\";\nimport type {\n  ActionEvent,\n  ObservationEvent,\n  OpenHandsEvent,\n} from \"#/types/agent-server/core\";\nimport {\n  isActionEvent,\n  isObservationEvent,\n} from \"#/types/agent-server/type-guards\";\nimport type {\n  FileEditorAction,\n  StrReplaceEditorAction,\n} from \"#/types/agent-server/core/base/action\";\nimport type {\n  FileEditorObservation,\n  StrReplaceEditorObservation,\n} from \"#/types/agent-server/core/base/observation\";\n\nexport { isMarkdownFilePath } from \"#/utils/is-markdown-file-path\";\n\nconst FILE_EDITOR_ACTION_KINDS = new Set([\n  \"FileEditorAction\",\n  \"StrReplaceEditorAction\",\n]);\nconst FILE_EDITOR_OBSERVATION_KINDS = new Set([\n  \"FileEditorObservation\",\n  \"StrReplaceEditorObservation\",\n]);\n\ninterface MarkdownFilePreviewProps {\n  content: string;\n  path: string;\n  /** When omitted (e.g. in-flight create), the View affordance is hidden. */\n  onView?: () => void;\n}\n\n/**\n * Resolves the file path for a file-editor action/observation, including the\n * observation's originating action when the observation omits `path`.\n */\nfunction getFileEditorEventPath(\n  event: OpenHandsEvent,\n  correspondingAction?: ActionEvent,\n): string | null {\n  if (isActionEvent(event) && FILE_EDITOR_ACTION_KINDS.has(event.action.kind)) {\n    return (\n      (event as ActionEvent<FileEditorAction | StrReplaceEditorAction>).action\n        .path || null\n    );\n  }\n\n  if (\n    isObservationEvent(event) &&\n    FILE_EDITOR_OBSERVATION_KINDS.has(event.observation.kind)\n  ) {\n    const path = (\n      event as ObservationEvent<\n        FileEditorObservation | StrReplaceEditorObservation\n      >\n    ).observation.path;\n    if (path) return path;\n    if (\n      correspondingAction &&\n      FILE_EDITOR_ACTION_KINDS.has(correspondingAction.action.kind)\n    ) {\n      return (\n        (\n          correspondingAction as ActionEvent<\n            FileEditorAction | StrReplaceEditorAction\n          >\n        ).action.path || null\n      );\n    }\n  }\n\n  return null;\n}\n\n/**\n * Resolves the file-editor command (`create` / `view` / …), including the\n * observation's originating action when the observation omits `command`.\n */\nfunction getFileEditorEventCommand(\n  event: OpenHandsEvent,\n  correspondingAction?: ActionEvent,\n): string | null {\n  if (isActionEvent(event) && FILE_EDITOR_ACTION_KINDS.has(event.action.kind)) {\n    return (\n      (event as ActionEvent<FileEditorAction | StrReplaceEditorAction>).action\n        .command || null\n    );\n  }\n\n  if (\n    isObservationEvent(event) &&\n    FILE_EDITOR_OBSERVATION_KINDS.has(event.observation.kind)\n  ) {\n    const command = (\n      event as ObservationEvent<\n        FileEditorObservation | StrReplaceEditorObservation\n      >\n    ).observation.command;\n    if (command) return command;\n    if (\n      correspondingAction &&\n      FILE_EDITOR_ACTION_KINDS.has(correspondingAction.action.kind)\n    ) {\n      return (\n        (\n          correspondingAction as ActionEvent<\n            FileEditorAction | StrReplaceEditorAction\n          >\n        ).action.command || null\n      );\n    }\n  }\n\n  return null;\n}\n\n/**\n * True for file-editor *create* events whose path is a markdown artifact.\n *\n * Used to keep those cards expanded and outside collapsed action groups so\n * the clipped preview is visible by default. Reads/edits of `.md` files stay\n * on the normal groupable path.\n */\nexport function isMarkdownFileEditorEvent(\n  event: OpenHandsEvent,\n  correspondingAction?: ActionEvent,\n): boolean {\n  const path = getFileEditorEventPath(event, correspondingAction);\n  const command = getFileEditorEventCommand(event, correspondingAction);\n  return Boolean(path && command === \"create\" && isMarkdownFilePath(path));\n}\n\n/**\n * Height-clipped markdown card with an optional View bar that opens the file.\n */\nexport function MarkdownFilePreview({\n  content,\n  path,\n  onView,\n}: MarkdownFilePreviewProps) {\n  const { t } = useTranslation(\"openhands\");\n  const fileName = path.split(\"/\").pop() || path;\n\n  return (\n    <div\n      className=\"w-full overflow-hidden rounded-[12px] border border-[var(--oh-border)] bg-[var(--oh-surface)]\"\n      data-testid=\"markdown-file-preview\"\n    >\n      <div\n        data-testid=\"markdown-file-preview-content\"\n        className=\"max-h-40 overflow-y-auto px-4 py-3 text-white custom-scrollbar-always [--oh-scroll-fade-from:var(--oh-surface)]\"\n      >\n        {/* Deliberately compact: the clipped in-stream card reuses the plan\n            preview's small typography; the Files drawer renders the same\n            artifact full-size with the default components. */}\n        <MarkdownRenderer\n          content={content}\n          includeStandard\n          includeHeadings\n          components={planComponents}\n        />\n      </div>\n      <div className=\"flex h-10 items-center justify-between gap-2 border-t border-[var(--oh-border)] px-3\">\n        <div className=\"flex min-w-0 items-center gap-1.5\">\n          <FileIcon className=\"h-3.5 w-3.5 flex-shrink-0 text-[var(--oh-muted)]\" />\n          <Typography.Text className=\"truncate font-mono text-[11px] leading-4 tracking-[0.11px] text-[var(--oh-muted)]\">\n            {fileName}\n          </Typography.Text>\n        </div>\n        {onView ? (\n          <button\n            type=\"button\"\n            onClick={onView}\n            className=\"flex shrink-0 cursor-pointer items-center gap-1 transition-opacity hover:opacity-80\"\n            data-testid=\"markdown-file-preview-view\"\n          >\n            <Typography.Text className=\"text-[11px] leading-4 tracking-[0.11px] text-white\">\n              {t(I18nKey.COMMON$VIEW)}\n            </Typography.Text>\n            <ArrowUpRight className=\"text-white\" size={16} />\n          </button>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAoCA,IAAM,IAA2B,IAAI,IAAI,CACvC,oBACA,wBACF,CAAC,GACK,IAAgC,IAAI,IAAI,CAC5C,yBACA,6BACF,CAAC;AAaD,SAAS,EACP,GACA,GACe;CACf,IAAI,EAAc,CAAK,KAAK,EAAyB,IAAI,EAAM,OAAO,IAAI,GACxE,OACG,EAAiE,OAC/D,QAAQ;CAIf,IACE,EAAmB,CAAK,KACxB,EAA8B,IAAI,EAAM,YAAY,IAAI,GACxD;EACA,IAAM,IACJ,EAGA,YAAY;EACd,IAAI,GAAM,OAAO;EACjB,IACE,KACA,EAAyB,IAAI,EAAoB,OAAO,IAAI,GAE5D,OAEI,EAGA,OAAO,QAAQ;CAGvB;CAEA,OAAO;AACT;AAMA,SAAS,EACP,GACA,GACe;CACf,IAAI,EAAc,CAAK,KAAK,EAAyB,IAAI,EAAM,OAAO,IAAI,GACxE,OACG,EAAiE,OAC/D,WAAW;CAIlB,IACE,EAAmB,CAAK,KACxB,EAA8B,IAAI,EAAM,YAAY,IAAI,GACxD;EACA,IAAM,IACJ,EAGA,YAAY;EACd,IAAI,GAAS,OAAO;EACpB,IACE,KACA,EAAyB,IAAI,EAAoB,OAAO,IAAI,GAE5D,OAEI,EAGA,OAAO,WAAW;CAG1B;CAEA,OAAO;AACT;AASA,SAAgB,EACd,GACA,GACS;CACT,IAAM,IAAO,EAAuB,GAAO,CAAmB,GACxD,IAAU,EAA0B,GAAO,CAAmB;CACpE,OAAO,GAAQ,KAAQ,MAAY,YAAY,EAAmB,CAAI;AACxE;AAKA,SAAgB,EAAoB,EAClC,YACA,SACA,aAC2B;CAC3B,IAAM,EAAE,SAAM,EAAe,WAAW,GAClC,IAAW,EAAK,MAAM,GAAG,EAAE,IAAI,KAAK;CAE1C,OACE,kBAAC,OAAD;EACE,WAAU;EACV,eAAY;YAFd,CAIE,kBAAC,OAAD;GACE,eAAY;GACZ,WAAU;aAKV,kBAAC,GAAD;IACW;IACT,iBAAA;IACA,iBAAA;IACA,YAAY;GACb,CAAA;EACE,CAAA,GACL,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,GAAD,EAAU,WAAU,mDAAoD,CAAA,GACxE,kBAAC,EAAW,MAAZ;KAAiB,WAAU;eACxB;IACc,CAAA,CACd;OACJ,IACC,kBAAC,UAAD;IACE,MAAK;IACL,SAAS;IACT,WAAU;IACV,eAAY;cAJd,CAME,kBAAC,EAAW,MAAZ;KAAiB,WAAU;eACxB,EAAE,EAAQ,WAAW;IACP,CAAA,GACjB,kBAAC,GAAD;KAAc,WAAU;KAAa,MAAM;IAAK,CAAA,CAC1C;QACN,IACD;IACF;;AAET"}

package/dist/components/features/controls/server-status-context-menu.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("../../../utils/status.cjs"),r=require("../../../utils/utils.cjs"),i=require("../../../ui/context-menu.cjs"),a=require("../../../hooks/use-click-outside-element.cjs"),o=require("../../../ui/divider.cjs"),s=require("../../../icons/stop-circle.cjs"),c=require("../../../icons/play-circle.cjs"),l=require("./server-status-context-menu-icon-text.cjs"),u=require("./server-status.cjs");let d=require("react/jsx-runtime");function f({onClose:f,onStopServer:p,onStartServer:m,executionStatus:h,position:g=`top`,className:_=``,isPausing:v=!1}){let{t:y}=e.useTranslation(`openhands`),b=a.useClickOutsideElement(f),x=n.isExecutionActive(h),S=n.isExecutionPaused(h),C=x||S;return(0,d.jsxs)(i.ContextMenu,{ref:b,testId:`server-status-context-menu`,position:g,alignment:`left`,size:`default`,className:r.cn(`left-2 w-fit min-w-42`,_),children:[(0,d.jsx)(u.default,{executionStatus:h,isPausing:v,className:`pl-0 pr-2 py-1`}),C&&(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(o.Divider,{inset:`menu`}),x&&p&&(0,d.jsx)(l.ServerStatusContextMenuIconText,{icon:(0,d.jsx)(s.default,{width:18,height:18}),text:y(t.I18nKey.COMMON$STOP_RUNTIME),onClick:p,testId:`stop-server-button`}),S&&m&&(0,d.jsx)(l.ServerStatusContextMenuIconText,{icon:(0,d.jsx)(c.default,{width:18,height:18}),text:y(t.I18nKey.COMMON$START_RUNTIME),onClick:m,testId:`start-server-button`})]})]})}exports.ServerStatusContextMenu=f;
+require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),t=require("../../../i18n/declaration.cjs"),n=require("../../../utils/status.cjs"),r=require("../../../utils/utils.cjs"),i=require("../../../ui/context-menu.cjs"),a=require("../../../hooks/use-click-outside-element.cjs"),o=require("../../../ui/divider.cjs"),s=require("../../../icons/stop-circle.cjs"),c=require("../../../icons/play-circle.cjs"),l=require("./server-status-context-menu-icon-text.cjs"),u=require("./server-status.cjs");let d=require("react/jsx-runtime");function f({onClose:f,onStopServer:p,onStartServer:m,executionStatus:h,position:g=`top`,className:_=``,isPausing:v=!1,ignoreOutsideClickRef:y}){let{t:b}=e.useTranslation(`openhands`),x=a.useClickOutsideElement(f,y),S=n.isExecutionActive(h),C=n.isExecutionPaused(h),w=S||C;return(0,d.jsxs)(i.ContextMenu,{ref:x,testId:`server-status-context-menu`,position:g,alignment:`left`,size:`default`,className:r.cn(`left-2 w-fit min-w-42`,_),children:[(0,d.jsx)(u.default,{executionStatus:h,isPausing:v,className:`pl-0 pr-2 py-1`}),w&&(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(o.Divider,{inset:`menu`}),S&&p&&(0,d.jsx)(l.ServerStatusContextMenuIconText,{icon:(0,d.jsx)(s.default,{width:18,height:18}),text:b(t.I18nKey.COMMON$STOP_RUNTIME),onClick:p,testId:`stop-server-button`}),C&&m&&(0,d.jsx)(l.ServerStatusContextMenuIconText,{icon:(0,d.jsx)(c.default,{width:18,height:18}),text:b(t.I18nKey.COMMON$START_RUNTIME),onClick:m,testId:`start-server-button`})]})]})}exports.ServerStatusContextMenu=f;
 //# sourceMappingURL=server-status-context-menu.cjs.map

package/dist/components/features/controls/server-status-context-menu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"server-status-context-menu.cjs","names":[],"sources":["../../../../src/components/features/controls/server-status-context-menu.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { ContextMenu } from \"#/ui/context-menu\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport StopCircleIcon from \"#/icons/stop-circle.svg?react\";\nimport PlayCircleIcon from \"#/icons/play-circle.svg?react\";\nimport { ServerStatusContextMenuIconText } from \"./server-status-context-menu-icon-text\";\nimport { ServerStatus } from \"./server-status\";\nimport { Divider } from \"#/ui/divider\";\nimport { cn } from \"#/utils/utils\";\nimport { ExecutionStatus } from \"#/types/agent-server/core/base/common\";\nimport { isExecutionActive, isExecutionPaused } from \"#/utils/status\";\n\ninterface ServerStatusContextMenuProps {\n  onClose: () => void;\n  onStopServer?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onStartServer?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  executionStatus: ExecutionStatus | null;\n  position?: \"top\" | \"bottom\";\n  className?: string;\n  isPausing?: boolean;\n}\n\nexport function ServerStatusContextMenu({\n  onClose,\n  onStopServer,\n  onStartServer,\n  executionStatus,\n  position = \"top\",\n  className = \"\",\n  isPausing = false,\n}: ServerStatusContextMenuProps) {\n  const { t } = useTranslation(\"openhands\");\n  const ref = useClickOutsideElement<HTMLUListElement>(onClose);\n\n  const isActive = isExecutionActive(executionStatus);\n  const isPaused = isExecutionPaused(executionStatus);\n  const shouldActionShown = isActive || isPaused;\n\n  return (\n    <ContextMenu\n      ref={ref}\n      testId=\"server-status-context-menu\"\n      position={position}\n      alignment=\"left\"\n      size=\"default\"\n      className={cn(\"left-2 w-fit min-w-42\", className)}\n    >\n      <ServerStatus\n        executionStatus={executionStatus}\n        isPausing={isPausing}\n        className=\"pl-0 pr-2 py-1\"\n      />\n\n      {shouldActionShown && (\n        <>\n          <Divider inset=\"menu\" />\n\n          {isActive && onStopServer && (\n            <ServerStatusContextMenuIconText\n              icon={<StopCircleIcon width={18} height={18} />}\n              text={t(I18nKey.COMMON$STOP_RUNTIME)}\n              onClick={onStopServer}\n              testId=\"stop-server-button\"\n            />\n          )}\n\n          {isPaused && onStartServer && (\n            <ServerStatusContextMenuIconText\n              icon={<PlayCircleIcon width={18} height={18} />}\n              text={t(I18nKey.COMMON$START_RUNTIME)}\n              onClick={onStartServer}\n              testId=\"start-server-button\"\n            />\n          )}\n        </>\n      )}\n    </ContextMenu>\n  );\n}\n"],"mappings":"0lBAuBA,SAAgB,EAAwB,CACtC,UACA,eACA,gBACA,kBACA,WAAW,MACX,YAAY,GACZ,YAAY,IACmB,CAC/B,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAClC,EAAM,EAAA,uBAAyC,CAAO,EAEtD,EAAW,EAAA,kBAAkB,CAAe,EAC5C,EAAW,EAAA,kBAAkB,CAAe,EAC5C,EAAoB,GAAY,EAEtC,OACE,EAAA,EAAA,MAAC,EAAA,YAAD,CACO,MACL,OAAO,6BACG,WACV,UAAU,OACV,KAAK,UACL,UAAW,EAAA,GAAG,wBAAyB,CAAS,WANlD,EAQE,EAAA,EAAA,KAAC,EAAA,QAAD,CACmB,kBACN,YACX,UAAU,gBACX,CAAA,EAEA,IACC,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,KAAC,EAAA,QAAD,CAAS,MAAM,MAAQ,CAAA,EAEtB,GAAY,IACX,EAAA,EAAA,KAAC,EAAA,gCAAD,CACE,MAAM,EAAA,EAAA,KAAC,EAAA,QAAD,CAAgB,MAAO,GAAI,OAAQ,EAAK,CAAA,EAC9C,KAAM,EAAE,EAAA,QAAQ,mBAAmB,EACnC,QAAS,EACT,OAAO,oBACR,CAAA,EAGF,GAAY,IACX,EAAA,EAAA,KAAC,EAAA,gCAAD,CACE,MAAM,EAAA,EAAA,KAAC,EAAA,QAAD,CAAgB,MAAO,GAAI,OAAQ,EAAK,CAAA,EAC9C,KAAM,EAAE,EAAA,QAAQ,oBAAoB,EACpC,QAAS,EACT,OAAO,qBACR,CAAA,CAEH,CAAA,CAAA,CAEO,GAEjB"}
+{"version":3,"file":"server-status-context-menu.cjs","names":[],"sources":["../../../../src/components/features/controls/server-status-context-menu.tsx"],"sourcesContent":["import type { MouseEvent, RefObject } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { ContextMenu } from \"#/ui/context-menu\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport StopCircleIcon from \"#/icons/stop-circle.svg?react\";\nimport PlayCircleIcon from \"#/icons/play-circle.svg?react\";\nimport { ServerStatusContextMenuIconText } from \"./server-status-context-menu-icon-text\";\nimport { ServerStatus } from \"./server-status\";\nimport { Divider } from \"#/ui/divider\";\nimport { cn } from \"#/utils/utils\";\nimport { ExecutionStatus } from \"#/types/agent-server/core/base/common\";\nimport { isExecutionActive, isExecutionPaused } from \"#/utils/status\";\n\ninterface ServerStatusContextMenuProps {\n  onClose: () => void;\n  onStopServer?: (event: MouseEvent<HTMLButtonElement>) => void;\n  onStartServer?: (event: MouseEvent<HTMLButtonElement>) => void;\n  executionStatus: ExecutionStatus | null;\n  position?: \"top\" | \"bottom\";\n  className?: string;\n  isPausing?: boolean;\n  ignoreOutsideClickRef?: RefObject<HTMLElement | null>;\n}\n\nexport function ServerStatusContextMenu({\n  onClose,\n  onStopServer,\n  onStartServer,\n  executionStatus,\n  position = \"top\",\n  className = \"\",\n  isPausing = false,\n  ignoreOutsideClickRef,\n}: ServerStatusContextMenuProps) {\n  const { t } = useTranslation(\"openhands\");\n  const ref = useClickOutsideElement<HTMLUListElement>(\n    onClose,\n    ignoreOutsideClickRef,\n  );\n\n  const isActive = isExecutionActive(executionStatus);\n  const isPaused = isExecutionPaused(executionStatus);\n  const shouldActionShown = isActive || isPaused;\n\n  return (\n    <ContextMenu\n      ref={ref}\n      testId=\"server-status-context-menu\"\n      position={position}\n      alignment=\"left\"\n      size=\"default\"\n      className={cn(\"left-2 w-fit min-w-42\", className)}\n    >\n      <ServerStatus\n        executionStatus={executionStatus}\n        isPausing={isPausing}\n        className=\"pl-0 pr-2 py-1\"\n      />\n\n      {shouldActionShown && (\n        <>\n          <Divider inset=\"menu\" />\n\n          {isActive && onStopServer && (\n            <ServerStatusContextMenuIconText\n              icon={<StopCircleIcon width={18} height={18} />}\n              text={t(I18nKey.COMMON$STOP_RUNTIME)}\n              onClick={onStopServer}\n              testId=\"stop-server-button\"\n            />\n          )}\n\n          {isPaused && onStartServer && (\n            <ServerStatusContextMenuIconText\n              icon={<PlayCircleIcon width={18} height={18} />}\n              text={t(I18nKey.COMMON$START_RUNTIME)}\n              onClick={onStartServer}\n              testId=\"start-server-button\"\n            />\n          )}\n        </>\n      )}\n    </ContextMenu>\n  );\n}\n"],"mappings":"0lBAyBA,SAAgB,EAAwB,CACtC,UACA,eACA,gBACA,kBACA,WAAW,MACX,YAAY,GACZ,YAAY,GACZ,yBAC+B,CAC/B,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAClC,EAAM,EAAA,uBACV,EACA,CACF,EAEM,EAAW,EAAA,kBAAkB,CAAe,EAC5C,EAAW,EAAA,kBAAkB,CAAe,EAC5C,EAAoB,GAAY,EAEtC,OACE,EAAA,EAAA,MAAC,EAAA,YAAD,CACO,MACL,OAAO,6BACG,WACV,UAAU,OACV,KAAK,UACL,UAAW,EAAA,GAAG,wBAAyB,CAAS,WANlD,EAQE,EAAA,EAAA,KAAC,EAAA,QAAD,CACmB,kBACN,YACX,UAAU,gBACX,CAAA,EAEA,IACC,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,KAAC,EAAA,QAAD,CAAS,MAAM,MAAQ,CAAA,EAEtB,GAAY,IACX,EAAA,EAAA,KAAC,EAAA,gCAAD,CACE,MAAM,EAAA,EAAA,KAAC,EAAA,QAAD,CAAgB,MAAO,GAAI,OAAQ,EAAK,CAAA,EAC9C,KAAM,EAAE,EAAA,QAAQ,mBAAmB,EACnC,QAAS,EACT,OAAO,oBACR,CAAA,EAGF,GAAY,IACX,EAAA,EAAA,KAAC,EAAA,gCAAD,CACE,MAAM,EAAA,EAAA,KAAC,EAAA,QAAD,CAAgB,MAAO,GAAI,OAAQ,EAAK,CAAA,EAC9C,KAAM,EAAE,EAAA,QAAQ,oBAAoB,EACpC,QAAS,EACT,OAAO,qBACR,CAAA,CAEH,CAAA,CAAA,CAEO,GAEjB"}

package/dist/components/features/controls/server-status-context-menu.d.ts

@@ -1,12 +1,14 @@
+import type { MouseEvent, RefObject } from "react";
 import { ExecutionStatus } from "#/types/agent-server/core/base/common";
 interface ServerStatusContextMenuProps {
     onClose: () => void;
-    onStopServer?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    onStartServer?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onStopServer?: (event: MouseEvent<HTMLButtonElement>) => void;
+    onStartServer?: (event: MouseEvent<HTMLButtonElement>) => void;
     executionStatus: ExecutionStatus | null;
     position?: "top" | "bottom";
     className?: string;
     isPausing?: boolean;
+    ignoreOutsideClickRef?: RefObject<HTMLElement | null>;
 }
-export declare function ServerStatusContextMenu({ onClose, onStopServer, onStartServer, executionStatus, position, className, isPausing, }: ServerStatusContextMenuProps): import("react").JSX.Element;
+export declare function ServerStatusContextMenu({ onClose, onStopServer, onStartServer, executionStatus, position, className, isPausing, ignoreOutsideClickRef, }: ServerStatusContextMenuProps): import("react").JSX.Element;
 export {};

package/dist/components/features/controls/server-status-context-menu.js

@@ -11,10 +11,10 @@ import { ServerStatusContextMenuIconText as u } from "./server-status-context-me
 import d from "./server-status.js";
 import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/components/features/controls/server-status-context-menu.tsx
-function h({ onClose: h, onStopServer: g, onStartServer: _, executionStatus: v, position: y = "top", className: b = "", isPausing: x = !1 }) {
-	let { t: S } = e("openhands"), C = o(h), w = n(v), T = r(v), E = w || T;
+function h({ onClose: h, onStopServer: g, onStartServer: _, executionStatus: v, position: y = "top", className: b = "", isPausing: x = !1, ignoreOutsideClickRef: S }) {
+	let { t: C } = e("openhands"), w = o(h, S), T = n(v), E = r(v), D = T || E;
 	return /* @__PURE__ */ m(a, {
-		ref: C,
+		ref: w,
 		testId: "server-status-context-menu",
 		position: y,
 		alignment: "left",
@@ -24,23 +24,23 @@ function h({ onClose: h, onStopServer: g, onStartServer: _, executionStatus: v,
 			executionStatus: v,
 			isPausing: x,
 			className: "pl-0 pr-2 py-1"
-		}), E && /* @__PURE__ */ m(f, { children: [
+		}), D && /* @__PURE__ */ m(f, { children: [
 			/* @__PURE__ */ p(s, { inset: "menu" }),
-			w && g && /* @__PURE__ */ p(u, {
+			T && g && /* @__PURE__ */ p(u, {
 				icon: /* @__PURE__ */ p(c, {
 					width: 18,
 					height: 18
 				}),
-				text: S(t.COMMON$STOP_RUNTIME),
+				text: C(t.COMMON$STOP_RUNTIME),
 				onClick: g,
 				testId: "stop-server-button"
 			}),
-			T && _ && /* @__PURE__ */ p(u, {
+			E && _ && /* @__PURE__ */ p(u, {
 				icon: /* @__PURE__ */ p(l, {
 					width: 18,
 					height: 18
 				}),
-				text: S(t.COMMON$START_RUNTIME),
+				text: C(t.COMMON$START_RUNTIME),
 				onClick: _,
 				testId: "start-server-button"
 			})

package/dist/components/features/controls/server-status-context-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"server-status-context-menu.js","names":[],"sources":["../../../../src/components/features/controls/server-status-context-menu.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { ContextMenu } from \"#/ui/context-menu\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport StopCircleIcon from \"#/icons/stop-circle.svg?react\";\nimport PlayCircleIcon from \"#/icons/play-circle.svg?react\";\nimport { ServerStatusContextMenuIconText } from \"./server-status-context-menu-icon-text\";\nimport { ServerStatus } from \"./server-status\";\nimport { Divider } from \"#/ui/divider\";\nimport { cn } from \"#/utils/utils\";\nimport { ExecutionStatus } from \"#/types/agent-server/core/base/common\";\nimport { isExecutionActive, isExecutionPaused } from \"#/utils/status\";\n\ninterface ServerStatusContextMenuProps {\n  onClose: () => void;\n  onStopServer?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onStartServer?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  executionStatus: ExecutionStatus | null;\n  position?: \"top\" | \"bottom\";\n  className?: string;\n  isPausing?: boolean;\n}\n\nexport function ServerStatusContextMenu({\n  onClose,\n  onStopServer,\n  onStartServer,\n  executionStatus,\n  position = \"top\",\n  className = \"\",\n  isPausing = false,\n}: ServerStatusContextMenuProps) {\n  const { t } = useTranslation(\"openhands\");\n  const ref = useClickOutsideElement<HTMLUListElement>(onClose);\n\n  const isActive = isExecutionActive(executionStatus);\n  const isPaused = isExecutionPaused(executionStatus);\n  const shouldActionShown = isActive || isPaused;\n\n  return (\n    <ContextMenu\n      ref={ref}\n      testId=\"server-status-context-menu\"\n      position={position}\n      alignment=\"left\"\n      size=\"default\"\n      className={cn(\"left-2 w-fit min-w-42\", className)}\n    >\n      <ServerStatus\n        executionStatus={executionStatus}\n        isPausing={isPausing}\n        className=\"pl-0 pr-2 py-1\"\n      />\n\n      {shouldActionShown && (\n        <>\n          <Divider inset=\"menu\" />\n\n          {isActive && onStopServer && (\n            <ServerStatusContextMenuIconText\n              icon={<StopCircleIcon width={18} height={18} />}\n              text={t(I18nKey.COMMON$STOP_RUNTIME)}\n              onClick={onStopServer}\n              testId=\"stop-server-button\"\n            />\n          )}\n\n          {isPaused && onStartServer && (\n            <ServerStatusContextMenuIconText\n              icon={<PlayCircleIcon width={18} height={18} />}\n              text={t(I18nKey.COMMON$START_RUNTIME)}\n              onClick={onStartServer}\n              testId=\"start-server-button\"\n            />\n          )}\n        </>\n      )}\n    </ContextMenu>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAuBA,SAAgB,EAAwB,EACtC,YACA,iBACA,kBACA,oBACA,cAAW,OACX,eAAY,IACZ,eAAY,MACmB;CAC/B,IAAM,EAAE,SAAM,EAAe,WAAW,GAClC,IAAM,EAAyC,CAAO,GAEtD,IAAW,EAAkB,CAAe,GAC5C,IAAW,EAAkB,CAAe,GAC5C,IAAoB,KAAY;CAEtC,OACE,kBAAC,GAAD;EACO;EACL,QAAO;EACG;EACV,WAAU;EACV,MAAK;EACL,WAAW,EAAG,yBAAyB,CAAS;YANlD,CAQE,kBAAC,GAAD;GACmB;GACN;GACX,WAAU;EACX,CAAA,GAEA,KACC,kBAAA,GAAA,EAAA,UAAA;GACE,kBAAC,GAAD,EAAS,OAAM,OAAQ,CAAA;GAEtB,KAAY,KACX,kBAAC,GAAD;IACE,MAAM,kBAAC,GAAD;KAAgB,OAAO;KAAI,QAAQ;IAAK,CAAA;IAC9C,MAAM,EAAE,EAAQ,mBAAmB;IACnC,SAAS;IACT,QAAO;GACR,CAAA;GAGF,KAAY,KACX,kBAAC,GAAD;IACE,MAAM,kBAAC,GAAD;KAAgB,OAAO;KAAI,QAAQ;IAAK,CAAA;IAC9C,MAAM,EAAE,EAAQ,oBAAoB;IACpC,SAAS;IACT,QAAO;GACR,CAAA;EAEH,EAAA,CAAA,CAEO;;AAEjB"}
+{"version":3,"file":"server-status-context-menu.js","names":[],"sources":["../../../../src/components/features/controls/server-status-context-menu.tsx"],"sourcesContent":["import type { MouseEvent, RefObject } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { ContextMenu } from \"#/ui/context-menu\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport StopCircleIcon from \"#/icons/stop-circle.svg?react\";\nimport PlayCircleIcon from \"#/icons/play-circle.svg?react\";\nimport { ServerStatusContextMenuIconText } from \"./server-status-context-menu-icon-text\";\nimport { ServerStatus } from \"./server-status\";\nimport { Divider } from \"#/ui/divider\";\nimport { cn } from \"#/utils/utils\";\nimport { ExecutionStatus } from \"#/types/agent-server/core/base/common\";\nimport { isExecutionActive, isExecutionPaused } from \"#/utils/status\";\n\ninterface ServerStatusContextMenuProps {\n  onClose: () => void;\n  onStopServer?: (event: MouseEvent<HTMLButtonElement>) => void;\n  onStartServer?: (event: MouseEvent<HTMLButtonElement>) => void;\n  executionStatus: ExecutionStatus | null;\n  position?: \"top\" | \"bottom\";\n  className?: string;\n  isPausing?: boolean;\n  ignoreOutsideClickRef?: RefObject<HTMLElement | null>;\n}\n\nexport function ServerStatusContextMenu({\n  onClose,\n  onStopServer,\n  onStartServer,\n  executionStatus,\n  position = \"top\",\n  className = \"\",\n  isPausing = false,\n  ignoreOutsideClickRef,\n}: ServerStatusContextMenuProps) {\n  const { t } = useTranslation(\"openhands\");\n  const ref = useClickOutsideElement<HTMLUListElement>(\n    onClose,\n    ignoreOutsideClickRef,\n  );\n\n  const isActive = isExecutionActive(executionStatus);\n  const isPaused = isExecutionPaused(executionStatus);\n  const shouldActionShown = isActive || isPaused;\n\n  return (\n    <ContextMenu\n      ref={ref}\n      testId=\"server-status-context-menu\"\n      position={position}\n      alignment=\"left\"\n      size=\"default\"\n      className={cn(\"left-2 w-fit min-w-42\", className)}\n    >\n      <ServerStatus\n        executionStatus={executionStatus}\n        isPausing={isPausing}\n        className=\"pl-0 pr-2 py-1\"\n      />\n\n      {shouldActionShown && (\n        <>\n          <Divider inset=\"menu\" />\n\n          {isActive && onStopServer && (\n            <ServerStatusContextMenuIconText\n              icon={<StopCircleIcon width={18} height={18} />}\n              text={t(I18nKey.COMMON$STOP_RUNTIME)}\n              onClick={onStopServer}\n              testId=\"stop-server-button\"\n            />\n          )}\n\n          {isPaused && onStartServer && (\n            <ServerStatusContextMenuIconText\n              icon={<PlayCircleIcon width={18} height={18} />}\n              text={t(I18nKey.COMMON$START_RUNTIME)}\n              onClick={onStartServer}\n              testId=\"start-server-button\"\n            />\n          )}\n        </>\n      )}\n    </ContextMenu>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAyBA,SAAgB,EAAwB,EACtC,YACA,iBACA,kBACA,oBACA,cAAW,OACX,eAAY,IACZ,eAAY,IACZ,4BAC+B;CAC/B,IAAM,EAAE,SAAM,EAAe,WAAW,GAClC,IAAM,EACV,GACA,CACF,GAEM,IAAW,EAAkB,CAAe,GAC5C,IAAW,EAAkB,CAAe,GAC5C,IAAoB,KAAY;CAEtC,OACE,kBAAC,GAAD;EACO;EACL,QAAO;EACG;EACV,WAAU;EACV,MAAK;EACL,WAAW,EAAG,yBAAyB,CAAS;YANlD,CAQE,kBAAC,GAAD;GACmB;GACN;GACX,WAAU;EACX,CAAA,GAEA,KACC,kBAAA,GAAA,EAAA,UAAA;GACE,kBAAC,GAAD,EAAS,OAAM,OAAQ,CAAA;GAEtB,KAAY,KACX,kBAAC,GAAD;IACE,MAAM,kBAAC,GAAD;KAAgB,OAAO;KAAI,QAAQ;IAAK,CAAA;IAC9C,MAAM,EAAE,EAAQ,mBAAmB;IACnC,SAAS;IACT,QAAO;GACR,CAAA;GAGF,KAAY,KACX,kBAAC,GAAD;IACE,MAAM,kBAAC,GAAD;KAAgB,OAAO;KAAI,QAAQ;IAAK,CAAA;IAC9C,MAAM,EAAE,EAAQ,oBAAoB;IACpC,SAAS;IACT,QAAO;GACR,CAAA;EAEH,EAAA,CAAA,CAEO;;AAEjB"}