@openhands/agent-canvas 1.12.0 → 1.13.0

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"}

package/dist/components/features/conversation/conversation-name-context-menu.cjs

@@ -1,2 +1,2 @@
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),n=require("../../../i18n/declaration.cjs"),ee=require("../../../node_modules/lucide-react/dist/esm/icons/external-link.cjs"),r=require("../../../node_modules/lucide-react/dist/esm/icons/share-2.cjs"),i=require("../../../utils/utils.cjs"),a=require("../../../contexts/active-backend-context.cjs"),o=require("../../../hooks/query/use-active-conversation.cjs"),s=require("../../../icons/copy.cjs"),c=require("../../../icons/u-close.cjs"),l=require("../../../ui/context-menu.cjs"),u=require("../context-menu/context-menu-list-item.cjs"),d=require("../../../hooks/use-click-outside-element.cjs"),f=require("../../../ui/divider.cjs"),p=require("../../../icons/skills.cjs"),m=require("../../../icons/fishing-hook.cjs"),h=require("../../../icons/u-tools.cjs"),g=require("../context-menu/archived-disabled-tooltip.cjs"),_=require("../../../hooks/use-is-archived-conversation.cjs"),v=require("../../../hooks/use-breakpoint.cjs"),te=require("../../../icons/u-edit.cjs"),y=require("../../../icons/u-download.cjs"),ne=require("../../../icons/u-credit-card.cjs"),b=require("../../../icons/u-delete.cjs"),x=require("./conversation-name-context-menu-icon-text.cjs");let S=require("react");S=e.__toESM(S,1);let C=require("react/jsx-runtime"),w=require("react-dom");w=e.__toESM(w,1);function T({isPublic:e,onToggle:t,ariaLabel:n}){return(0,C.jsxs)(`label`,{className:`relative inline-flex shrink-0 cursor-pointer items-center`,children:[(0,C.jsx)(`input`,{hidden:!0,type:`checkbox`,"data-testid":`share-publicly-button`,checked:e,"aria-label":n,onChange:e=>t(e.target.checked)}),(0,C.jsx)(`span`,{"aria-hidden":!0,className:i.cn(`inline-flex h-3.5 w-7 items-center rounded-full px-0.5 py-px transition-colors duration-200 ease-in-out`,e?`bg-white`:`bg-base-secondary`),children:(0,C.jsx)(`span`,{className:i.cn(`block h-2 w-2 shrink-0 rounded-full transition-transform duration-200 ease-in-out`,e?`translate-x-[calc(1rem-1px)] bg-base-secondary`:`translate-x-px bg-tertiary-light`)})})]})}function E({onClose:e,onRename:E,onDelete:D,onStop:O,onDisplayCost:k,onShowAgentTools:A,onShowSkills:j,onShowHooks:M,onTogglePublic:N,onCopyShareLink:P,onExportTranscript:F,onDownloadConversation:I,shareUrl:L,position:R=`bottom`,anchorRef:z}){let B=v.useBreakpoint(),{t:V}=t.useTranslation(`openhands`),{backend:H}=a.useActiveBackend(),{data:U}=o.useActiveConversation(),W=_.useIsArchivedConversation(),G=d.useClickOutsideElement(e),K=z?.current??null,[q,J]=S.default.useState();S.default.useLayoutEffect(()=>{if(!K)return;let e=()=>{let e=K.getBoundingClientRect();if(!e)return;let t={position:`fixed`,zIndex:9999};R===`top`?t.bottom=window.innerHeight-e.top+8:t.top=e.bottom+8,t.left=e.left,J(t)};return e(),window.addEventListener(`resize`,e),window.addEventListener(`scroll`,e,!0),()=>{window.removeEventListener(`resize`,e),window.removeEventListener(`scroll`,e,!0)}},[K,R]);let Y=!!(A||j||M),X=!!k,re=!!(O||D),ie=H.kind===`cloud`?n.I18nKey.COMMON$CLOSE_CONVERSATION_STOP_RUNTIME:n.I18nKey.COMMON$STOP_CONVERSATION,ae=H.kind===`cloud`&&!!N,Z=U?.public||!1,Q=!!K,$=(0,C.jsxs)(l.ContextMenu,{ref:G,testId:`conversation-name-context-menu`,position:R,alignment:`left`,className:i.cn(B?`right-0 translate-x-[34%] left-auto`:``,Q?`!static !top-auto !bottom-auto !left-auto !right-auto !mt-0`:``),children:[E&&(0,C.jsx)(u.ContextMenuListItem,{testId:`rename-button`,onClick:E,children:(0,C.jsx)(x.ConversationNameContextMenuIconText,{icon:(0,C.jsx)(te.default,{width:16,height:16}),text:V(n.I18nKey.BUTTON$RENAME)})}),Y&&(0,C.jsx)(f.Divider,{testId:`separator-tools`,inset:`menu`}),j&&(0,C.jsx)(g.ArchivedDisabledTooltip,{isDisabled:W,children:(0,C.jsx)(u.ContextMenuListItem,{testId:`show-skills-button`,onClick:j,isDisabled:W,children:(0,C.jsx)(x.ConversationNameContextMenuIconText,{icon:(0,C.jsx)(p.default,{width:16,height:16,className:`stroke-[1.75]`,"aria-hidden":!0}),text:V(n.I18nKey.CONVERSATION$SHOW_SKILLS)})})}),M&&(0,C.jsx)(g.ArchivedDisabledTooltip,{isDisabled:W,children:(0,C.jsx)(u.ContextMenuListItem,{testId:`show-hooks-button`,onClick:M,isDisabled:W,children:(0,C.jsx)(x.ConversationNameContextMenuIconText,{icon:(0,C.jsx)(m.default,{width:16,height:16,"aria-hidden":!0}),text:V(n.I18nKey.CONVERSATION$SHOW_HOOKS)})})}),A&&(0,C.jsx)(g.ArchivedDisabledTooltip,{isDisabled:W,children:(0,C.jsx)(u.ContextMenuListItem,{testId:`show-agent-tools-button`,onClick:A,isDisabled:W,children:(0,C.jsx)(x.ConversationNameContextMenuIconText,{icon:(0,C.jsx)(h.default,{width:16,height:16}),text:V(n.I18nKey.BUTTON$SHOW_AGENT_TOOLS_AND_METADATA)})})}),F&&(0,C.jsx)(u.ContextMenuListItem,{testId:`export-transcript-button`,onClick:F,children:(0,C.jsx)(x.ConversationNameContextMenuIconText,{icon:(0,C.jsx)(y.default,{width:16,height:16}),text:V(n.I18nKey.BUTTON$EXPORT_TRANSCRIPT)})}),I&&(0,C.jsx)(u.ContextMenuListItem,{testId:`download-trajectory-button`,onClick:I,children:(0,C.jsx)(x.ConversationNameContextMenuIconText,{icon:(0,C.jsx)(y.default,{width:16,height:16}),text:V(n.I18nKey.BUTTON$DOWNLOAD_CONVERSATION_DATA)})}),(X||re)&&(0,C.jsx)(f.Divider,{testId:`separator-info-control`,inset:`menu`}),k&&(0,C.jsx)(u.ContextMenuListItem,{testId:`display-cost-button`,onClick:k,children:(0,C.jsx)(x.ConversationNameContextMenuIconText,{icon:(0,C.jsx)(ne.default,{width:16,height:16}),text:V(n.I18nKey.BUTTON$DISPLAY_COST)})}),ae&&N&&(0,C.jsxs)(`li`,{className:`flex w-full items-center gap-2 rounded px-2 py-2 hover:bg-[var(--oh-interactive-hover)]`,children:[(0,C.jsx)(`span`,{className:`flex shrink-0 items-center text-[var(--oh-muted)]`,"aria-hidden":!0,children:(0,C.jsx)(r.Share2,{size:16})}),(0,C.jsx)(`span`,{className:`min-w-0 flex-1 truncate text-sm`,children:V(n.I18nKey.CONVERSATION$SHARE_PUBLICLY)}),(0,C.jsxs)(`div`,{className:`flex shrink-0 items-center`,children:[Z&&L&&P&&(0,C.jsxs)(`div`,{className:`mr-2 flex items-center gap-0.5`,children:[(0,C.jsx)(`button`,{type:`button`,"data-testid":`copy-share-link-button`,onClick:P,className:`rounded p-0.5 text-[var(--oh-muted)] hover:bg-[var(--oh-interactive-selected)] hover:text-[var(--oh-foreground)] cursor-pointer [&_svg]:text-current`,title:V(n.I18nKey.BUTTON$COPY_TO_CLIPBOARD),children:(0,C.jsx)(s.default,{width:14,height:14})}),(0,C.jsx)(`a`,{"data-testid":`open-share-link-button`,href:L,target:`_blank`,rel:`noopener noreferrer`,onClick:e=>e.stopPropagation(),className:`rounded p-0.5 text-[var(--oh-muted)] no-underline visited:text-[var(--oh-muted)] hover:bg-[var(--oh-interactive-selected)] hover:text-[var(--oh-foreground)] cursor-pointer [&_svg]:text-current`,title:V(n.I18nKey.BUTTON$OPEN_IN_NEW_TAB),children:(0,C.jsx)(ee.ExternalLink,{size:14,"aria-hidden":!0})})]}),(0,C.jsx)(T,{isPublic:Z,onToggle:N,ariaLabel:V(n.I18nKey.CONVERSATION$SHARE_PUBLICLY)})]})]}),O&&(0,C.jsx)(g.ArchivedDisabledTooltip,{isDisabled:W,children:(0,C.jsx)(u.ContextMenuListItem,{testId:`stop-button`,onClick:O,isDisabled:W,children:(0,C.jsx)(x.ConversationNameContextMenuIconText,{icon:(0,C.jsx)(c.default,{width:16,height:16}),text:V(ie)})})}),D&&(0,C.jsx)(u.ContextMenuListItem,{testId:`delete-button`,onClick:D,children:(0,C.jsx)(x.ConversationNameContextMenuIconText,{icon:(0,C.jsx)(b.default,{width:16,height:16}),text:V(n.I18nKey.COMMON$DELETE_CONVERSATION)})})]});return Q?typeof document>`u`||!q?null:w.default.createPortal((0,C.jsx)(`div`,{style:q,children:$}),document.body):$}exports.ConversationNameContextMenu=E;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),n=require("../../../i18n/declaration.cjs"),r=require("../../../node_modules/lucide-react/dist/esm/icons/external-link.cjs"),ee=require("../../../node_modules/lucide-react/dist/esm/icons/gauge.cjs"),i=require("../../../node_modules/lucide-react/dist/esm/icons/share-2.cjs"),a=require("../../../utils/utils.cjs"),o=require("../../../contexts/active-backend-context.cjs"),s=require("../../../hooks/query/use-active-conversation.cjs"),c=require("../../../icons/copy.cjs"),l=require("../../../icons/u-close.cjs"),u=require("../../../ui/context-menu.cjs"),d=require("../context-menu/context-menu-list-item.cjs"),f=require("../../../hooks/use-click-outside-element.cjs"),p=require("../../../ui/divider.cjs"),m=require("../../../icons/skills.cjs"),h=require("../../../icons/fishing-hook.cjs"),g=require("../../../icons/u-tools.cjs"),_=require("../context-menu/archived-disabled-tooltip.cjs"),v=require("../../../hooks/use-is-archived-conversation.cjs"),y=require("./conversation-name-context-menu-icon-text.cjs"),te=require("../../../hooks/use-breakpoint.cjs"),ne=require("../../../icons/u-edit.cjs"),b=require("../../../icons/u-download.cjs"),x=require("../../../icons/u-delete.cjs");let S=require("react");S=e.__toESM(S,1);let C=require("react/jsx-runtime"),w=require("react-dom");w=e.__toESM(w,1);function T({isPublic:e,onToggle:t,ariaLabel:n}){return(0,C.jsxs)(`label`,{className:`relative inline-flex shrink-0 cursor-pointer items-center`,children:[(0,C.jsx)(`input`,{hidden:!0,type:`checkbox`,"data-testid":`share-publicly-button`,checked:e,"aria-label":n,onChange:e=>t(e.target.checked)}),(0,C.jsx)(`span`,{"aria-hidden":!0,className:a.cn(`inline-flex h-3.5 w-7 items-center rounded-full px-0.5 py-px transition-colors duration-200 ease-in-out`,e?`bg-white`:`bg-base-secondary`),children:(0,C.jsx)(`span`,{className:a.cn(`block h-2 w-2 shrink-0 rounded-full transition-transform duration-200 ease-in-out`,e?`translate-x-[calc(1rem-1px)] bg-base-secondary`:`translate-x-px bg-tertiary-light`)})})]})}function E({onClose:e,onRename:E,onDelete:D,onStop:O,onDisplayCost:k,onShowAgentTools:A,onShowSkills:j,onShowHooks:M,onTogglePublic:N,onCopyShareLink:P,onExportTranscript:F,onDownloadConversation:I,shareUrl:L,position:R=`bottom`,anchorRef:z}){let B=te.useBreakpoint(),{t:V}=t.useTranslation(`openhands`),{backend:H}=o.useActiveBackend(),{data:U}=s.useActiveConversation(),W=v.useIsArchivedConversation(),G=f.useClickOutsideElement(e,z),K=z?.current??null,[q,J]=S.default.useState();S.default.useLayoutEffect(()=>{if(!K)return;let e=()=>{let e=K.getBoundingClientRect();if(!e)return;let t={position:`fixed`,zIndex:9999};R===`top`?t.bottom=window.innerHeight-e.top+8:t.top=e.bottom+8,t.left=e.left,J(t)};return e(),window.addEventListener(`resize`,e),window.addEventListener(`scroll`,e,!0),()=>{window.removeEventListener(`resize`,e),window.removeEventListener(`scroll`,e,!0)}},[K,R]);let Y=!!(A||j||M),X=!!k,re=!!(O||D),ie=H.kind===`cloud`?n.I18nKey.COMMON$CLOSE_CONVERSATION_STOP_RUNTIME:n.I18nKey.COMMON$STOP_CONVERSATION,ae=H.kind===`cloud`&&!!N,Z=U?.public||!1,Q=!!K,$=(0,C.jsxs)(u.ContextMenu,{ref:G,testId:`conversation-name-context-menu`,position:R,alignment:`left`,className:a.cn(B?`right-0 translate-x-[34%] left-auto`:``,Q?`!static !top-auto !bottom-auto !left-auto !right-auto !mt-0`:``),children:[E&&(0,C.jsx)(d.ContextMenuListItem,{testId:`rename-button`,onClick:E,children:(0,C.jsx)(y.ConversationNameContextMenuIconText,{icon:(0,C.jsx)(ne.default,{width:16,height:16}),text:V(n.I18nKey.BUTTON$RENAME)})}),Y&&(0,C.jsx)(p.Divider,{testId:`separator-tools`,inset:`menu`}),j&&(0,C.jsx)(_.ArchivedDisabledTooltip,{isDisabled:W,children:(0,C.jsx)(d.ContextMenuListItem,{testId:`show-skills-button`,onClick:j,isDisabled:W,children:(0,C.jsx)(y.ConversationNameContextMenuIconText,{icon:(0,C.jsx)(m.default,{width:16,height:16,className:`stroke-[1.75]`,"aria-hidden":!0}),text:V(n.I18nKey.CONVERSATION$SHOW_SKILLS)})})}),M&&(0,C.jsx)(_.ArchivedDisabledTooltip,{isDisabled:W,children:(0,C.jsx)(d.ContextMenuListItem,{testId:`show-hooks-button`,onClick:M,isDisabled:W,children:(0,C.jsx)(y.ConversationNameContextMenuIconText,{icon:(0,C.jsx)(h.default,{width:16,height:16,"aria-hidden":!0}),text:V(n.I18nKey.CONVERSATION$SHOW_HOOKS)})})}),A&&(0,C.jsx)(_.ArchivedDisabledTooltip,{isDisabled:W,children:(0,C.jsx)(d.ContextMenuListItem,{testId:`show-agent-tools-button`,onClick:A,isDisabled:W,children:(0,C.jsx)(y.ConversationNameContextMenuIconText,{icon:(0,C.jsx)(g.default,{width:16,height:16}),text:V(n.I18nKey.BUTTON$SHOW_AGENT_TOOLS_AND_METADATA)})})}),F&&(0,C.jsx)(d.ContextMenuListItem,{testId:`export-transcript-button`,onClick:F,children:(0,C.jsx)(y.ConversationNameContextMenuIconText,{icon:(0,C.jsx)(b.default,{width:16,height:16}),text:V(n.I18nKey.BUTTON$EXPORT_TRANSCRIPT)})}),I&&(0,C.jsx)(d.ContextMenuListItem,{testId:`download-trajectory-button`,onClick:I,children:(0,C.jsx)(y.ConversationNameContextMenuIconText,{icon:(0,C.jsx)(b.default,{width:16,height:16}),text:V(n.I18nKey.BUTTON$DOWNLOAD_CONVERSATION_DATA)})}),(X||re)&&(0,C.jsx)(p.Divider,{testId:`separator-info-control`,inset:`menu`}),k&&(0,C.jsx)(d.ContextMenuListItem,{testId:`display-cost-button`,onClick:k,children:(0,C.jsx)(y.ConversationNameContextMenuIconText,{icon:(0,C.jsx)(ee.Gauge,{size:16}),text:V(n.I18nKey.BUTTON$DISPLAY_COST)})}),ae&&N&&(0,C.jsxs)(`li`,{className:`flex w-full items-center gap-2 rounded px-2 py-2 hover:bg-[var(--oh-interactive-hover)]`,children:[(0,C.jsx)(`span`,{className:`flex shrink-0 items-center text-[var(--oh-muted)]`,"aria-hidden":!0,children:(0,C.jsx)(i.Share2,{size:16})}),(0,C.jsx)(`span`,{className:`min-w-0 flex-1 truncate text-sm`,children:V(n.I18nKey.CONVERSATION$SHARE_PUBLICLY)}),(0,C.jsxs)(`div`,{className:`flex shrink-0 items-center`,children:[Z&&L&&P&&(0,C.jsxs)(`div`,{className:`mr-2 flex items-center gap-0.5`,children:[(0,C.jsx)(`button`,{type:`button`,"data-testid":`copy-share-link-button`,onClick:P,className:`rounded p-0.5 text-[var(--oh-muted)] hover:bg-[var(--oh-interactive-selected)] hover:text-[var(--oh-foreground)] cursor-pointer [&_svg]:text-current`,title:V(n.I18nKey.BUTTON$COPY_TO_CLIPBOARD),children:(0,C.jsx)(c.default,{width:14,height:14})}),(0,C.jsx)(`a`,{"data-testid":`open-share-link-button`,href:L,target:`_blank`,rel:`noopener noreferrer`,onClick:e=>e.stopPropagation(),className:`rounded p-0.5 text-[var(--oh-muted)] no-underline visited:text-[var(--oh-muted)] hover:bg-[var(--oh-interactive-selected)] hover:text-[var(--oh-foreground)] cursor-pointer [&_svg]:text-current`,title:V(n.I18nKey.BUTTON$OPEN_IN_NEW_TAB),children:(0,C.jsx)(r.ExternalLink,{size:14,"aria-hidden":!0})})]}),(0,C.jsx)(T,{isPublic:Z,onToggle:N,ariaLabel:V(n.I18nKey.CONVERSATION$SHARE_PUBLICLY)})]})]}),O&&(0,C.jsx)(_.ArchivedDisabledTooltip,{isDisabled:W,children:(0,C.jsx)(d.ContextMenuListItem,{testId:`stop-button`,onClick:O,isDisabled:W,children:(0,C.jsx)(y.ConversationNameContextMenuIconText,{icon:(0,C.jsx)(l.default,{width:16,height:16}),text:V(ie)})})}),D&&(0,C.jsx)(d.ContextMenuListItem,{testId:`delete-button`,onClick:D,children:(0,C.jsx)(y.ConversationNameContextMenuIconText,{icon:(0,C.jsx)(x.default,{width:16,height:16}),text:V(n.I18nKey.COMMON$DELETE_CONVERSATION)})})]});return Q?typeof document>`u`||!q?null:w.default.createPortal((0,C.jsx)(`div`,{style:q,children:$}),document.body):$}exports.ConversationNameContextMenu=E;
 //# sourceMappingURL=conversation-name-context-menu.cjs.map

package/dist/components/features/conversation/conversation-name-context-menu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"conversation-name-context-menu.cjs","names":[],"sources":["../../../../src/components/features/conversation/conversation-name-context-menu.tsx"],"sourcesContent":["import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { ExternalLink, Share2 } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { useBreakpoint } from \"#/hooks/use-breakpoint\";\nimport { cn } from \"#/utils/utils\";\nimport { ContextMenu } from \"#/ui/context-menu\";\nimport { ContextMenuListItem } from \"../context-menu/context-menu-list-item\";\nimport { Divider } from \"#/ui/divider\";\nimport { I18nKey } from \"#/i18n/declaration\";\n\nimport EditIcon from \"#/icons/u-edit.svg?react\";\nimport SkillsIcon from \"#/icons/skills.svg?react\";\nimport FishingHookIcon from \"#/icons/fishing-hook.svg?react\";\nimport ToolsIcon from \"#/icons/u-tools.svg?react\";\nimport DownloadIcon from \"#/icons/u-download.svg?react\";\nimport CreditCardIcon from \"#/icons/u-credit-card.svg?react\";\nimport CloseIcon from \"#/icons/u-close.svg?react\";\nimport DeleteIcon from \"#/icons/u-delete.svg?react\";\nimport CopyIcon from \"#/icons/copy.svg?react\";\nimport { ConversationNameContextMenuIconText } from \"./conversation-name-context-menu-icon-text\";\nimport { ArchivedDisabledTooltip } from \"../context-menu/archived-disabled-tooltip\";\nimport { useIsArchivedConversation } from \"#/hooks/use-is-archived-conversation\";\n\ninterface ConversationNameContextMenuProps {\n  onClose: () => void;\n  onRename?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onDelete?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onStop?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onDisplayCost?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onShowAgentTools?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onShowSkills?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onShowHooks?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onTogglePublic?: (nextIsPublic: boolean) => void;\n  onCopyShareLink?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onExportTranscript?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onDownloadConversation?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  shareUrl?: string;\n  position?: \"top\" | \"bottom\";\n  /**\n   * Element the menu should anchor against. When provided, the menu renders\n   * into a portal at the document body using fixed positioning so it cannot be\n   * clipped by ancestors with `overflow: hidden` (e.g. the chat panel that\n   * sits next to the right-side tabs panel).\n   */\n  anchorRef?: React.RefObject<HTMLElement | null>;\n}\n\nfunction PublicShareToggle({\n  isPublic,\n  onToggle,\n  ariaLabel,\n}: {\n  isPublic: boolean;\n  onToggle: (nextIsPublic: boolean) => void;\n  ariaLabel: string;\n}) {\n  return (\n    <label className=\"relative inline-flex shrink-0 cursor-pointer items-center\">\n      <input\n        hidden\n        type=\"checkbox\"\n        data-testid=\"share-publicly-button\"\n        checked={isPublic}\n        aria-label={ariaLabel}\n        onChange={(event) => onToggle(event.target.checked)}\n      />\n      <span\n        aria-hidden\n        className={cn(\n          \"inline-flex h-3.5 w-7 items-center rounded-full px-0.5 py-px transition-colors duration-200 ease-in-out\",\n          isPublic ? \"bg-white\" : \"bg-base-secondary\",\n        )}\n      >\n        <span\n          className={cn(\n            \"block h-2 w-2 shrink-0 rounded-full transition-transform duration-200 ease-in-out\",\n            isPublic\n              ? \"translate-x-[calc(1rem-1px)] bg-base-secondary\"\n              : \"translate-x-px bg-tertiary-light\",\n          )}\n        />\n      </span>\n    </label>\n  );\n}\n\nexport function ConversationNameContextMenu({\n  onClose,\n  onRename,\n  onDelete,\n  onStop,\n  onDisplayCost,\n  onShowAgentTools,\n  onShowSkills,\n  onShowHooks,\n  onTogglePublic,\n  onCopyShareLink,\n  onExportTranscript,\n  onDownloadConversation,\n  shareUrl,\n  position = \"bottom\",\n  anchorRef,\n}: ConversationNameContextMenuProps) {\n  const isMobile = useBreakpoint();\n\n  const { t } = useTranslation(\"openhands\");\n  const { backend } = useActiveBackend();\n  const { data: conversation } = useActiveConversation();\n  const isArchivedConversation = useIsArchivedConversation();\n  const ref = useClickOutsideElement<HTMLUListElement>(onClose);\n\n  const anchorElement = anchorRef?.current ?? null;\n  const [portalStyle, setPortalStyle] = React.useState<React.CSSProperties>();\n  React.useLayoutEffect(() => {\n    if (!anchorElement) return undefined;\n\n    const updatePosition = () => {\n      const rect = anchorElement.getBoundingClientRect();\n      if (!rect) return;\n      const gap = 8;\n      const style: React.CSSProperties = {\n        position: \"fixed\",\n        zIndex: 9999,\n      };\n      if (position === \"top\") {\n        style.bottom = window.innerHeight - rect.top + gap;\n      } else {\n        style.top = rect.bottom + gap;\n      }\n      style.left = rect.left;\n      setPortalStyle(style);\n    };\n\n    updatePosition();\n    window.addEventListener(\"resize\", updatePosition);\n    window.addEventListener(\"scroll\", updatePosition, true);\n    return () => {\n      window.removeEventListener(\"resize\", updatePosition);\n      window.removeEventListener(\"scroll\", updatePosition, true);\n    };\n  }, [anchorElement, position]);\n  const hasTools = Boolean(onShowAgentTools || onShowSkills || onShowHooks);\n  const hasInfo = Boolean(onDisplayCost);\n  const hasControl = Boolean(onStop || onDelete);\n  const stopLabelKey =\n    backend.kind === \"cloud\"\n      ? I18nKey.COMMON$CLOSE_CONVERSATION_STOP_RUNTIME\n      : I18nKey.COMMON$STOP_CONVERSATION;\n  const shouldShowPublicSharing =\n    backend.kind === \"cloud\" && Boolean(onTogglePublic);\n  const isPublic = conversation?.public || false;\n\n  const isPortaled = Boolean(anchorElement);\n  const portalClassName = isPortaled\n    ? \"!static !top-auto !bottom-auto !left-auto !right-auto !mt-0\"\n    : \"\";\n\n  const menu = (\n    <ContextMenu\n      ref={ref}\n      testId=\"conversation-name-context-menu\"\n      position={position}\n      alignment=\"left\"\n      className={cn(\n        isMobile ? \"right-0 translate-x-[34%] left-auto\" : \"\",\n        portalClassName,\n      )}\n    >\n      {onRename && (\n        <ContextMenuListItem testId=\"rename-button\" onClick={onRename}>\n          <ConversationNameContextMenuIconText\n            icon={<EditIcon width={16} height={16} />}\n            text={t(I18nKey.BUTTON$RENAME)}\n          />\n        </ContextMenuListItem>\n      )}\n\n      {hasTools && <Divider testId=\"separator-tools\" inset=\"menu\" />}\n\n      {onShowSkills && (\n        <ArchivedDisabledTooltip isDisabled={isArchivedConversation}>\n          <ContextMenuListItem\n            testId=\"show-skills-button\"\n            onClick={onShowSkills}\n            isDisabled={isArchivedConversation}\n          >\n            <ConversationNameContextMenuIconText\n              icon={\n                <SkillsIcon\n                  width={16}\n                  height={16}\n                  className=\"stroke-[1.75]\"\n                  aria-hidden\n                />\n              }\n              text={t(I18nKey.CONVERSATION$SHOW_SKILLS)}\n            />\n          </ContextMenuListItem>\n        </ArchivedDisabledTooltip>\n      )}\n\n      {onShowHooks && (\n        <ArchivedDisabledTooltip isDisabled={isArchivedConversation}>\n          <ContextMenuListItem\n            testId=\"show-hooks-button\"\n            onClick={onShowHooks}\n            isDisabled={isArchivedConversation}\n          >\n            <ConversationNameContextMenuIconText\n              icon={<FishingHookIcon width={16} height={16} aria-hidden />}\n              text={t(I18nKey.CONVERSATION$SHOW_HOOKS)}\n            />\n          </ContextMenuListItem>\n        </ArchivedDisabledTooltip>\n      )}\n\n      {onShowAgentTools && (\n        <ArchivedDisabledTooltip isDisabled={isArchivedConversation}>\n          <ContextMenuListItem\n            testId=\"show-agent-tools-button\"\n            onClick={onShowAgentTools}\n            isDisabled={isArchivedConversation}\n          >\n            <ConversationNameContextMenuIconText\n              icon={<ToolsIcon width={16} height={16} />}\n              text={t(I18nKey.BUTTON$SHOW_AGENT_TOOLS_AND_METADATA)}\n            />\n          </ContextMenuListItem>\n        </ArchivedDisabledTooltip>\n      )}\n\n      {onExportTranscript && (\n        <ContextMenuListItem\n          testId=\"export-transcript-button\"\n          onClick={onExportTranscript}\n        >\n          <ConversationNameContextMenuIconText\n            icon={<DownloadIcon width={16} height={16} />}\n            text={t(I18nKey.BUTTON$EXPORT_TRANSCRIPT)}\n          />\n        </ContextMenuListItem>\n      )}\n\n      {onDownloadConversation && (\n        <ContextMenuListItem\n          testId=\"download-trajectory-button\"\n          onClick={onDownloadConversation}\n        >\n          <ConversationNameContextMenuIconText\n            icon={<DownloadIcon width={16} height={16} />}\n            text={t(I18nKey.BUTTON$DOWNLOAD_CONVERSATION_DATA)}\n          />\n        </ContextMenuListItem>\n      )}\n\n      {(hasInfo || hasControl) && (\n        <Divider testId=\"separator-info-control\" inset=\"menu\" />\n      )}\n\n      {onDisplayCost && (\n        <ContextMenuListItem\n          testId=\"display-cost-button\"\n          onClick={onDisplayCost}\n        >\n          <ConversationNameContextMenuIconText\n            icon={<CreditCardIcon width={16} height={16} />}\n            text={t(I18nKey.BUTTON$DISPLAY_COST)}\n          />\n        </ContextMenuListItem>\n      )}\n\n      {shouldShowPublicSharing && onTogglePublic && (\n        <li className=\"flex w-full items-center gap-2 rounded px-2 py-2 hover:bg-[var(--oh-interactive-hover)]\">\n          <span\n            className=\"flex shrink-0 items-center text-[var(--oh-muted)]\"\n            aria-hidden\n          >\n            <Share2 size={16} />\n          </span>\n          <span className=\"min-w-0 flex-1 truncate text-sm\">\n            {t(I18nKey.CONVERSATION$SHARE_PUBLICLY)}\n          </span>\n          <div className=\"flex shrink-0 items-center\">\n            {isPublic && shareUrl && onCopyShareLink && (\n              <div className=\"mr-2 flex items-center gap-0.5\">\n                <button\n                  type=\"button\"\n                  data-testid=\"copy-share-link-button\"\n                  onClick={onCopyShareLink}\n                  className=\"rounded p-0.5 text-[var(--oh-muted)] hover:bg-[var(--oh-interactive-selected)] hover:text-[var(--oh-foreground)] cursor-pointer [&_svg]:text-current\"\n                  title={t(I18nKey.BUTTON$COPY_TO_CLIPBOARD)}\n                >\n                  <CopyIcon width={14} height={14} />\n                </button>\n                <a\n                  data-testid=\"open-share-link-button\"\n                  href={shareUrl}\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                  onClick={(event) => event.stopPropagation()}\n                  className=\"rounded p-0.5 text-[var(--oh-muted)] no-underline visited:text-[var(--oh-muted)] hover:bg-[var(--oh-interactive-selected)] hover:text-[var(--oh-foreground)] cursor-pointer [&_svg]:text-current\"\n                  title={t(I18nKey.BUTTON$OPEN_IN_NEW_TAB)}\n                >\n                  <ExternalLink size={14} aria-hidden />\n                </a>\n              </div>\n            )}\n            <PublicShareToggle\n              isPublic={isPublic}\n              onToggle={onTogglePublic}\n              ariaLabel={t(I18nKey.CONVERSATION$SHARE_PUBLICLY)}\n            />\n          </div>\n        </li>\n      )}\n\n      {onStop && (\n        <ArchivedDisabledTooltip isDisabled={isArchivedConversation}>\n          <ContextMenuListItem\n            testId=\"stop-button\"\n            onClick={onStop}\n            isDisabled={isArchivedConversation}\n          >\n            <ConversationNameContextMenuIconText\n              icon={<CloseIcon width={16} height={16} />}\n              text={t(stopLabelKey)}\n            />\n          </ContextMenuListItem>\n        </ArchivedDisabledTooltip>\n      )}\n\n      {onDelete && (\n        <ContextMenuListItem testId=\"delete-button\" onClick={onDelete}>\n          <ConversationNameContextMenuIconText\n            icon={<DeleteIcon width={16} height={16} />}\n            text={t(I18nKey.COMMON$DELETE_CONVERSATION)}\n          />\n        </ContextMenuListItem>\n      )}\n    </ContextMenu>\n  );\n\n  if (isPortaled) {\n    if (typeof document === \"undefined\" || !portalStyle) {\n      return null;\n    }\n    return ReactDOM.createPortal(\n      <div style={portalStyle}>{menu}</div>,\n      document.body,\n    );\n  }\n\n  return menu;\n}\n"],"mappings":"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"}
+{"version":3,"file":"conversation-name-context-menu.cjs","names":[],"sources":["../../../../src/components/features/conversation/conversation-name-context-menu.tsx"],"sourcesContent":["import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { ExternalLink, Gauge, Share2 } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { useBreakpoint } from \"#/hooks/use-breakpoint\";\nimport { cn } from \"#/utils/utils\";\nimport { ContextMenu } from \"#/ui/context-menu\";\nimport { ContextMenuListItem } from \"../context-menu/context-menu-list-item\";\nimport { Divider } from \"#/ui/divider\";\nimport { I18nKey } from \"#/i18n/declaration\";\n\nimport EditIcon from \"#/icons/u-edit.svg?react\";\nimport SkillsIcon from \"#/icons/skills.svg?react\";\nimport FishingHookIcon from \"#/icons/fishing-hook.svg?react\";\nimport ToolsIcon from \"#/icons/u-tools.svg?react\";\nimport DownloadIcon from \"#/icons/u-download.svg?react\";\nimport CloseIcon from \"#/icons/u-close.svg?react\";\nimport DeleteIcon from \"#/icons/u-delete.svg?react\";\nimport CopyIcon from \"#/icons/copy.svg?react\";\nimport { ConversationNameContextMenuIconText } from \"./conversation-name-context-menu-icon-text\";\nimport { ArchivedDisabledTooltip } from \"../context-menu/archived-disabled-tooltip\";\nimport { useIsArchivedConversation } from \"#/hooks/use-is-archived-conversation\";\n\ninterface ConversationNameContextMenuProps {\n  onClose: () => void;\n  onRename?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onDelete?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onStop?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onDisplayCost?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onShowAgentTools?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onShowSkills?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onShowHooks?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onTogglePublic?: (nextIsPublic: boolean) => void;\n  onCopyShareLink?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onExportTranscript?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onDownloadConversation?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  shareUrl?: string;\n  position?: \"top\" | \"bottom\";\n  /**\n   * Element the menu should anchor against. When provided, the menu renders\n   * into a portal at the document body using fixed positioning so it cannot be\n   * clipped by ancestors with `overflow: hidden` (e.g. the chat panel that\n   * sits next to the right-side tabs panel).\n   */\n  anchorRef?: React.RefObject<HTMLElement | null>;\n}\n\nfunction PublicShareToggle({\n  isPublic,\n  onToggle,\n  ariaLabel,\n}: {\n  isPublic: boolean;\n  onToggle: (nextIsPublic: boolean) => void;\n  ariaLabel: string;\n}) {\n  return (\n    <label className=\"relative inline-flex shrink-0 cursor-pointer items-center\">\n      <input\n        hidden\n        type=\"checkbox\"\n        data-testid=\"share-publicly-button\"\n        checked={isPublic}\n        aria-label={ariaLabel}\n        onChange={(event) => onToggle(event.target.checked)}\n      />\n      <span\n        aria-hidden\n        className={cn(\n          \"inline-flex h-3.5 w-7 items-center rounded-full px-0.5 py-px transition-colors duration-200 ease-in-out\",\n          isPublic ? \"bg-white\" : \"bg-base-secondary\",\n        )}\n      >\n        <span\n          className={cn(\n            \"block h-2 w-2 shrink-0 rounded-full transition-transform duration-200 ease-in-out\",\n            isPublic\n              ? \"translate-x-[calc(1rem-1px)] bg-base-secondary\"\n              : \"translate-x-px bg-tertiary-light\",\n          )}\n        />\n      </span>\n    </label>\n  );\n}\n\nexport function ConversationNameContextMenu({\n  onClose,\n  onRename,\n  onDelete,\n  onStop,\n  onDisplayCost,\n  onShowAgentTools,\n  onShowSkills,\n  onShowHooks,\n  onTogglePublic,\n  onCopyShareLink,\n  onExportTranscript,\n  onDownloadConversation,\n  shareUrl,\n  position = \"bottom\",\n  anchorRef,\n}: ConversationNameContextMenuProps) {\n  const isMobile = useBreakpoint();\n\n  const { t } = useTranslation(\"openhands\");\n  const { backend } = useActiveBackend();\n  const { data: conversation } = useActiveConversation();\n  const isArchivedConversation = useIsArchivedConversation();\n  const ref = useClickOutsideElement<HTMLUListElement>(onClose, anchorRef);\n\n  const anchorElement = anchorRef?.current ?? null;\n  const [portalStyle, setPortalStyle] = React.useState<React.CSSProperties>();\n  React.useLayoutEffect(() => {\n    if (!anchorElement) return undefined;\n\n    const updatePosition = () => {\n      const rect = anchorElement.getBoundingClientRect();\n      if (!rect) return;\n      const gap = 8;\n      const style: React.CSSProperties = {\n        position: \"fixed\",\n        zIndex: 9999,\n      };\n      if (position === \"top\") {\n        style.bottom = window.innerHeight - rect.top + gap;\n      } else {\n        style.top = rect.bottom + gap;\n      }\n      style.left = rect.left;\n      setPortalStyle(style);\n    };\n\n    updatePosition();\n    window.addEventListener(\"resize\", updatePosition);\n    window.addEventListener(\"scroll\", updatePosition, true);\n    return () => {\n      window.removeEventListener(\"resize\", updatePosition);\n      window.removeEventListener(\"scroll\", updatePosition, true);\n    };\n  }, [anchorElement, position]);\n  const hasTools = Boolean(onShowAgentTools || onShowSkills || onShowHooks);\n  const hasInfo = Boolean(onDisplayCost);\n  const hasControl = Boolean(onStop || onDelete);\n  const stopLabelKey =\n    backend.kind === \"cloud\"\n      ? I18nKey.COMMON$CLOSE_CONVERSATION_STOP_RUNTIME\n      : I18nKey.COMMON$STOP_CONVERSATION;\n  const shouldShowPublicSharing =\n    backend.kind === \"cloud\" && Boolean(onTogglePublic);\n  const isPublic = conversation?.public || false;\n\n  const isPortaled = Boolean(anchorElement);\n  const portalClassName = isPortaled\n    ? \"!static !top-auto !bottom-auto !left-auto !right-auto !mt-0\"\n    : \"\";\n\n  const menu = (\n    <ContextMenu\n      ref={ref}\n      testId=\"conversation-name-context-menu\"\n      position={position}\n      alignment=\"left\"\n      className={cn(\n        isMobile ? \"right-0 translate-x-[34%] left-auto\" : \"\",\n        portalClassName,\n      )}\n    >\n      {onRename && (\n        <ContextMenuListItem testId=\"rename-button\" onClick={onRename}>\n          <ConversationNameContextMenuIconText\n            icon={<EditIcon width={16} height={16} />}\n            text={t(I18nKey.BUTTON$RENAME)}\n          />\n        </ContextMenuListItem>\n      )}\n\n      {hasTools && <Divider testId=\"separator-tools\" inset=\"menu\" />}\n\n      {onShowSkills && (\n        <ArchivedDisabledTooltip isDisabled={isArchivedConversation}>\n          <ContextMenuListItem\n            testId=\"show-skills-button\"\n            onClick={onShowSkills}\n            isDisabled={isArchivedConversation}\n          >\n            <ConversationNameContextMenuIconText\n              icon={\n                <SkillsIcon\n                  width={16}\n                  height={16}\n                  className=\"stroke-[1.75]\"\n                  aria-hidden\n                />\n              }\n              text={t(I18nKey.CONVERSATION$SHOW_SKILLS)}\n            />\n          </ContextMenuListItem>\n        </ArchivedDisabledTooltip>\n      )}\n\n      {onShowHooks && (\n        <ArchivedDisabledTooltip isDisabled={isArchivedConversation}>\n          <ContextMenuListItem\n            testId=\"show-hooks-button\"\n            onClick={onShowHooks}\n            isDisabled={isArchivedConversation}\n          >\n            <ConversationNameContextMenuIconText\n              icon={<FishingHookIcon width={16} height={16} aria-hidden />}\n              text={t(I18nKey.CONVERSATION$SHOW_HOOKS)}\n            />\n          </ContextMenuListItem>\n        </ArchivedDisabledTooltip>\n      )}\n\n      {onShowAgentTools && (\n        <ArchivedDisabledTooltip isDisabled={isArchivedConversation}>\n          <ContextMenuListItem\n            testId=\"show-agent-tools-button\"\n            onClick={onShowAgentTools}\n            isDisabled={isArchivedConversation}\n          >\n            <ConversationNameContextMenuIconText\n              icon={<ToolsIcon width={16} height={16} />}\n              text={t(I18nKey.BUTTON$SHOW_AGENT_TOOLS_AND_METADATA)}\n            />\n          </ContextMenuListItem>\n        </ArchivedDisabledTooltip>\n      )}\n\n      {onExportTranscript && (\n        <ContextMenuListItem\n          testId=\"export-transcript-button\"\n          onClick={onExportTranscript}\n        >\n          <ConversationNameContextMenuIconText\n            icon={<DownloadIcon width={16} height={16} />}\n            text={t(I18nKey.BUTTON$EXPORT_TRANSCRIPT)}\n          />\n        </ContextMenuListItem>\n      )}\n\n      {onDownloadConversation && (\n        <ContextMenuListItem\n          testId=\"download-trajectory-button\"\n          onClick={onDownloadConversation}\n        >\n          <ConversationNameContextMenuIconText\n            icon={<DownloadIcon width={16} height={16} />}\n            text={t(I18nKey.BUTTON$DOWNLOAD_CONVERSATION_DATA)}\n          />\n        </ContextMenuListItem>\n      )}\n\n      {(hasInfo || hasControl) && (\n        <Divider testId=\"separator-info-control\" inset=\"menu\" />\n      )}\n\n      {onDisplayCost && (\n        <ContextMenuListItem\n          testId=\"display-cost-button\"\n          onClick={onDisplayCost}\n        >\n          <ConversationNameContextMenuIconText\n            icon={<Gauge size={16} />}\n            text={t(I18nKey.BUTTON$DISPLAY_COST)}\n          />\n        </ContextMenuListItem>\n      )}\n\n      {shouldShowPublicSharing && onTogglePublic && (\n        <li className=\"flex w-full items-center gap-2 rounded px-2 py-2 hover:bg-[var(--oh-interactive-hover)]\">\n          <span\n            className=\"flex shrink-0 items-center text-[var(--oh-muted)]\"\n            aria-hidden\n          >\n            <Share2 size={16} />\n          </span>\n          <span className=\"min-w-0 flex-1 truncate text-sm\">\n            {t(I18nKey.CONVERSATION$SHARE_PUBLICLY)}\n          </span>\n          <div className=\"flex shrink-0 items-center\">\n            {isPublic && shareUrl && onCopyShareLink && (\n              <div className=\"mr-2 flex items-center gap-0.5\">\n                <button\n                  type=\"button\"\n                  data-testid=\"copy-share-link-button\"\n                  onClick={onCopyShareLink}\n                  className=\"rounded p-0.5 text-[var(--oh-muted)] hover:bg-[var(--oh-interactive-selected)] hover:text-[var(--oh-foreground)] cursor-pointer [&_svg]:text-current\"\n                  title={t(I18nKey.BUTTON$COPY_TO_CLIPBOARD)}\n                >\n                  <CopyIcon width={14} height={14} />\n                </button>\n                <a\n                  data-testid=\"open-share-link-button\"\n                  href={shareUrl}\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                  onClick={(event) => event.stopPropagation()}\n                  className=\"rounded p-0.5 text-[var(--oh-muted)] no-underline visited:text-[var(--oh-muted)] hover:bg-[var(--oh-interactive-selected)] hover:text-[var(--oh-foreground)] cursor-pointer [&_svg]:text-current\"\n                  title={t(I18nKey.BUTTON$OPEN_IN_NEW_TAB)}\n                >\n                  <ExternalLink size={14} aria-hidden />\n                </a>\n              </div>\n            )}\n            <PublicShareToggle\n              isPublic={isPublic}\n              onToggle={onTogglePublic}\n              ariaLabel={t(I18nKey.CONVERSATION$SHARE_PUBLICLY)}\n            />\n          </div>\n        </li>\n      )}\n\n      {onStop && (\n        <ArchivedDisabledTooltip isDisabled={isArchivedConversation}>\n          <ContextMenuListItem\n            testId=\"stop-button\"\n            onClick={onStop}\n            isDisabled={isArchivedConversation}\n          >\n            <ConversationNameContextMenuIconText\n              icon={<CloseIcon width={16} height={16} />}\n              text={t(stopLabelKey)}\n            />\n          </ContextMenuListItem>\n        </ArchivedDisabledTooltip>\n      )}\n\n      {onDelete && (\n        <ContextMenuListItem testId=\"delete-button\" onClick={onDelete}>\n          <ConversationNameContextMenuIconText\n            icon={<DeleteIcon width={16} height={16} />}\n            text={t(I18nKey.COMMON$DELETE_CONVERSATION)}\n          />\n        </ContextMenuListItem>\n      )}\n    </ContextMenu>\n  );\n\n  if (isPortaled) {\n    if (typeof document === \"undefined\" || !portalStyle) {\n      return null;\n    }\n    return ReactDOM.createPortal(\n      <div style={portalStyle}>{menu}</div>,\n      document.body,\n    );\n  }\n\n  return menu;\n}\n"],"mappings":"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"}