@openhands/agent-canvas 1.1.0 → 1.2.1

package/dist/components/features/chat/components/chat-input-profile-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-input-profile-picker.js","names":[],"sources":["../../../../../src/components/features/chat/components/chat-input-profile-picker.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useChatInputProfileState } from \"#/hooks/use-chat-input-profile-state\";\nimport { ComboboxCaretInline } from \"#/ui/combobox-caret\";\nimport SettingsGearIcon from \"#/icons/settings-gear.svg?react\";\nimport CheckIcon from \"#/icons/checkmark.svg?react\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { ContextMenu } from \"#/ui/context-menu\";\nimport { ContextMenuListItem } from \"#/components/features/context-menu/context-menu-list-item\";\nimport { Divider } from \"#/ui/divider\";\nimport { Typography } from \"#/ui/typography\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { chatInputPillButtonClassName } from \"#/utils/form-control-classes\";\n\nconst PROFILE_LABEL_MAX_CHARS = 18;\n\nfunction truncateLabel(label: string): string {\n  return label.length <= PROFILE_LABEL_MAX_CHARS\n    ? label\n    : `${label.slice(0, PROFILE_LABEL_MAX_CHARS)}…`;\n}\n\ninterface ChatInputProfileMenuContentProps {\n  onClose: () => void;\n  dividerInset?: \"menu\";\n  settingsLinkClassName?: string;\n  settingsIconClassName?: string;\n}\n\nexport function ChatInputProfileMenuContent({\n  onClose,\n  dividerInset,\n  settingsLinkClassName,\n  settingsIconClassName,\n}: ChatInputProfileMenuContentProps) {\n  const { t } = useTranslation(\"openhands\");\n  const { profiles, currentProfileId, selectProfile } =\n    useChatInputProfileState();\n\n  const handleSelect = (profile: (typeof profiles)[number]) => {\n    selectProfile(profile);\n    onClose();\n  };\n\n  return (\n    <>\n      {profiles.length > 0 && (\n        <>\n          {/* role=\"presentation\" keeps this a valid <li> child of the\n              ContextMenu <ul> without exposing the label as a menu item. */}\n          <li role=\"presentation\" className=\"px-2 pt-1 pb-0.5\">\n            <Typography.Text className=\"text-[11px] font-medium text-[var(--oh-text-dim)] uppercase tracking-wide leading-4\">\n              {t(I18nKey.SETTINGS$AVAILABLE_PROFILES)}\n            </Typography.Text>\n          </li>\n          {profiles.map((profile) => {\n            const isCurrent =\n              profile.id != null && profile.id === currentProfileId;\n            return (\n              <ContextMenuListItem\n                key={profile.id ?? profile.name}\n                testId={`chat-input-agent-profile-option-${profile.name}`}\n                onClick={(event) => {\n                  event.preventDefault();\n                  event.stopPropagation();\n                  if (isCurrent) {\n                    onClose();\n                    return;\n                  }\n                  handleSelect(profile);\n                }}\n                className={cn(\n                  \"flex items-center gap-2\",\n                  isCurrent && \"bg-[var(--oh-interactive-hover)]\",\n                )}\n              >\n                <span\n                  className=\"flex-1 truncate text-sm leading-5\"\n                  title={profile.name}\n                >\n                  {profile.name}\n                </span>\n                {isCurrent && (\n                  <CheckIcon\n                    width={14}\n                    height={14}\n                    className=\"shrink-0\"\n                    aria-hidden\n                  />\n                )}\n              </ContextMenuListItem>\n            );\n          })}\n        </>\n      )}\n      {profiles.length > 0 && <Divider inset={dividerInset} />}\n      <li className=\"text-sm\">\n        <NavigationLink\n          to=\"/settings/agents\"\n          onClick={onClose}\n          className={cn(\n            \"flex h-[30px] items-center gap-2 rounded p-2 leading-5 text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)] transition-colors\",\n            settingsLinkClassName,\n          )}\n        >\n          <SettingsGearIcon\n            width={16}\n            height={16}\n            className={cn(\"shrink-0\", settingsIconClassName)}\n            aria-hidden\n          />\n          <span>{t(I18nKey.CHAT$MANAGE_AGENT_PROFILES)}</span>\n        </NavigationLink>\n      </li>\n    </>\n  );\n}\n\nexport function ChatInputProfilePicker() {\n  const { t } = useTranslation(\"openhands\");\n  const { profiles, currentProfileName, isLoading, isSwitching } =\n    useChatInputProfileState();\n  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\n  const triggerRef = React.useRef<HTMLButtonElement>(null);\n  const popoverRef = useClickOutsideElement<HTMLUListElement>(\n    () => setIsPopoverOpen(false),\n    triggerRef,\n  );\n\n  // Nothing to launch from yet (empty store before the backend seeds, or an\n  // agent-server without the /api/agent-profiles surface): stay out of the way.\n  if (isLoading || profiles.length === 0) {\n    return null;\n  }\n\n  const label = currentProfileName ?? t(I18nKey.CHAT$AGENT_PROFILE_PLACEHOLDER);\n\n  return (\n    <div className=\"relative min-w-0\">\n      <button\n        ref={triggerRef}\n        type=\"button\"\n        className={cn(chatInputPillButtonClassName, \"max-w-[200px]\")}\n        title={currentProfileName ?? undefined}\n        data-testid=\"chat-input-agent-profile\"\n        aria-expanded={isPopoverOpen}\n        aria-haspopup=\"dialog\"\n        // Disabled while a profile switch (new-conversation create / activate) is\n        // in flight, so re-opening the menu can't fire a second create. The menu\n        // closes on select, so this is the only double-submit path.\n        disabled={isSwitching}\n        aria-busy={isSwitching}\n        onClick={(event) => {\n          event.preventDefault();\n          event.stopPropagation();\n          setIsPopoverOpen((open) => !open);\n        }}\n      >\n        <span className=\"truncate\">{truncateLabel(label)}</span>\n        <ComboboxCaretInline isOpen={isPopoverOpen} />\n      </button>\n\n      {isPopoverOpen && (\n        <ContextMenu\n          ref={popoverRef}\n          testId=\"chat-input-agent-profile-popover\"\n          position=\"top\"\n          alignment=\"left\"\n          spacing=\"none\"\n          className=\"z-[60] mb-2 min-w-[200px] max-w-[320px] max-h-[60vh] overflow-y-auto\"\n        >\n          <ChatInputProfileMenuContent\n            onClose={() => setIsPopoverOpen(false)}\n          />\n        </ContextMenu>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAgBA,IAAM,IAA0B;AAEhC,SAAS,EAAc,GAAuB;AAC5C,QAAO,EAAM,UAAU,IACnB,IACA,GAAG,EAAM,MAAM,GAAG,EAAwB,CAAC;;AAUjD,SAAgB,EAA4B,EAC1C,YACA,iBACA,0BACA,4BACmC;CACnC,IAAM,EAAE,SAAM,EAAe,YAAY,EACnC,EAAE,aAAU,qBAAkB,qBAClC,GAA0B,EAEtB,KAAgB,MAAuC;AAE3D,EADA,EAAc,EAAQ,EACtB,GAAS;;AAGX,QACE,kBAAA,GAAA,EAAA,UAAA;EACG,EAAS,SAAS,KACjB,kBAAA,GAAA,EAAA,UAAA,CAGE,kBAAC,MAAD;GAAI,MAAK;GAAe,WAAU;aAChC,kBAAC,EAAW,MAAZ;IAAiB,WAAU;cACxB,EAAE,EAAQ,4BAA4B;IACvB,CAAA;GACf,CAAA,EACJ,EAAS,KAAK,MAAY;GACzB,IAAM,IACJ,EAAQ,MAAM,QAAQ,EAAQ,OAAO;AACvC,UACE,kBAAC,GAAD;IAEE,QAAQ,mCAAmC,EAAQ;IACnD,UAAU,MAAU;AAGlB,SAFA,EAAM,gBAAgB,EACtB,EAAM,iBAAiB,EACnB,GAAW;AACb,SAAS;AACT;;AAEF,OAAa,EAAQ;;IAEvB,WAAW,EACT,2BACA,KAAa,mCACd;cAfH,CAiBE,kBAAC,QAAD;KACE,WAAU;KACV,OAAO,EAAQ;eAEd,EAAQ;KACJ,CAAA,EACN,KACC,kBAAC,GAAD;KACE,OAAO;KACP,QAAQ;KACR,WAAU;KACV,eAAA;KACA,CAAA,CAEgB;MA9Bf,EAAQ,MAAM,EAAQ,KA8BP;IAExB,CACD,EAAA,CAAA;EAEJ,EAAS,SAAS,KAAK,kBAAC,GAAD,EAAS,OAAO,GAAgB,CAAA;EACxD,kBAAC,MAAD;GAAI,WAAU;aACZ,kBAAC,GAAD;IACE,IAAG;IACH,SAAS;IACT,WAAW,EACT,+IACA,EACD;cANH,CAQE,kBAAC,GAAD;KACE,OAAO;KACP,QAAQ;KACR,WAAW,EAAG,YAAY,EAAsB;KAChD,eAAA;KACA,CAAA,EACF,kBAAC,QAAD,EAAA,UAAO,EAAE,EAAQ,2BAA2B,EAAQ,CAAA,CACrC;;GACd,CAAA;EACJ,EAAA,CAAA;;AAIP,SAAgB,IAAyB;CACvC,IAAM,EAAE,SAAM,EAAe,YAAY,EACnC,EAAE,aAAU,uBAAoB,cAAW,mBAC/C,GAA0B,EACtB,CAAC,GAAe,KAAoB,EAAM,SAAS,GAAM,EACzD,IAAa,EAAM,OAA0B,KAAK,EAClD,IAAa,QACX,EAAiB,GAAM,EAC7B,EACD;AAID,KAAI,KAAa,EAAS,WAAW,EACnC,QAAO;CAGT,IAAM,IAAQ,KAAsB,EAAE,EAAQ,+BAA+B;AAE7E,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,UAAD;GACE,KAAK;GACL,MAAK;GACL,WAAW,EAAG,GAA8B,gBAAgB;GAC5D,OAAO,KAAsB,KAAA;GAC7B,eAAY;GACZ,iBAAe;GACf,iBAAc;GAId,UAAU;GACV,aAAW;GACX,UAAU,MAAU;AAGlB,IAFA,EAAM,gBAAgB,EACtB,EAAM,iBAAiB,EACvB,GAAkB,MAAS,CAAC,EAAK;;aAhBrC,CAmBE,kBAAC,QAAD;IAAM,WAAU;cAAY,EAAc,EAAM;IAAQ,CAAA,EACxD,kBAAC,GAAD,EAAqB,QAAQ,GAAiB,CAAA,CACvC;MAER,KACC,kBAAC,GAAD;GACE,KAAK;GACL,QAAO;GACP,UAAS;GACT,WAAU;GACV,SAAQ;GACR,WAAU;aAEV,kBAAC,GAAD,EACE,eAAe,EAAiB,GAAM,EACtC,CAAA;GACU,CAAA,CAEZ"}

package/dist/components/features/chat/components/resolve-picker-kind.cjs

@@ -0,0 +1,2 @@
+require(`../../../../_virtual/_rolldown/runtime.cjs`);function e({hasConversation:e,isCloud:t,isAcp:n,profilesAvailable:r}){return e?n?`model`:`llm-profile`:r?`agent-profile`:t?`model`:`llm-profile`}exports.resolvePickerKind=e;
+//# sourceMappingURL=resolve-picker-kind.cjs.map

package/dist/components/features/chat/components/resolve-picker-kind.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve-picker-kind.cjs","names":[],"sources":["../../../../../src/components/features/chat/components/resolve-picker-kind.ts"],"sourcesContent":["export type PickerKind = \"model\" | \"agent-profile\" | \"llm-profile\";\n\nexport interface ResolvePickerKindInput {\n  /** A conversation is active (i.e. we're inside a conversation, not on home). */\n  hasConversation: boolean;\n  /** The active backend is cloud (vs. a local agent-server). */\n  isCloud: boolean;\n  /** The current context runs an ACP agent (active conv or home ACP settings). */\n  isAcp: boolean;\n  /** At least one AgentProfile exists to launch the next conversation from. */\n  profilesAvailable: boolean;\n}\n\n/**\n * Decide which chat-input model/profile picker to show. Pure so the matrix is\n * unit-tested directly (see `resolve-picker-kind.test.ts`).\n *\n *  - Home (local or cloud): the AgentProfile picker, which starts a new\n *    conversation / activates the default (#3727, cloud via #15060). When no\n *    profiles exist yet, fall back — cloud → model, local → LLM-profile (cloud\n *    has no home LLM-profile activate path).\n *  - In an ACP conversation (local or cloud): the model picker — ACP owns its\n *    LLM via the subprocess/session, so the picker just live-switches the\n *    session model (set_session_model / cloud's switch_acp_model proxy).\n *  - In an OpenHands conversation (local or cloud): the LLM-profile picker,\n *    which live-switches the running conversation's LLM profile via\n *    /switch_profile — a real endpoint on both backends (cloud proxies\n *    POST /api/v1/app-conversations/{id}/switch_profile, unchanged since\n *    OpenHands#14288). There is no cloud-specific restriction here.\n */\nexport function resolvePickerKind({\n  hasConversation,\n  isCloud,\n  isAcp,\n  profilesAvailable,\n}: ResolvePickerKindInput): PickerKind {\n  if (!hasConversation) {\n    if (profilesAvailable) return \"agent-profile\";\n    return isCloud ? \"model\" : \"llm-profile\";\n  }\n  return isAcp ? \"model\" : \"llm-profile\";\n}\n"],"mappings":"sDA8BA,SAAgB,EAAkB,CAChC,kBACA,UACA,QACA,qBACqC,CAKrC,OAJK,EAIE,EAAQ,QAAU,cAHnB,EAA0B,gBACvB,EAAU,QAAU"}

package/dist/components/features/chat/components/resolve-picker-kind.d.ts

@@ -0,0 +1,29 @@
+export type PickerKind = "model" | "agent-profile" | "llm-profile";
+export interface ResolvePickerKindInput {
+    /** A conversation is active (i.e. we're inside a conversation, not on home). */
+    hasConversation: boolean;
+    /** The active backend is cloud (vs. a local agent-server). */
+    isCloud: boolean;
+    /** The current context runs an ACP agent (active conv or home ACP settings). */
+    isAcp: boolean;
+    /** At least one AgentProfile exists to launch the next conversation from. */
+    profilesAvailable: boolean;
+}
+/**
+ * Decide which chat-input model/profile picker to show. Pure so the matrix is
+ * unit-tested directly (see `resolve-picker-kind.test.ts`).
+ *
+ *  - Home (local or cloud): the AgentProfile picker, which starts a new
+ *    conversation / activates the default (#3727, cloud via #15060). When no
+ *    profiles exist yet, fall back — cloud → model, local → LLM-profile (cloud
+ *    has no home LLM-profile activate path).
+ *  - In an ACP conversation (local or cloud): the model picker — ACP owns its
+ *    LLM via the subprocess/session, so the picker just live-switches the
+ *    session model (set_session_model / cloud's switch_acp_model proxy).
+ *  - In an OpenHands conversation (local or cloud): the LLM-profile picker,
+ *    which live-switches the running conversation's LLM profile via
+ *    /switch_profile — a real endpoint on both backends (cloud proxies
+ *    POST /api/v1/app-conversations/{id}/switch_profile, unchanged since
+ *    OpenHands#14288). There is no cloud-specific restriction here.
+ */
+export declare function resolvePickerKind({ hasConversation, isCloud, isAcp, profilesAvailable, }: ResolvePickerKindInput): PickerKind;

package/dist/components/features/chat/components/resolve-picker-kind.js

@@ -0,0 +1,8 @@
+//#region src/components/features/chat/components/resolve-picker-kind.ts
+function e({ hasConversation: e, isCloud: t, isAcp: n, profilesAvailable: r }) {
+	return e ? n ? "model" : "llm-profile" : r ? "agent-profile" : t ? "model" : "llm-profile";
+}
+//#endregion
+export { e as resolvePickerKind };
+
+//# sourceMappingURL=resolve-picker-kind.js.map

package/dist/components/features/chat/components/resolve-picker-kind.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve-picker-kind.js","names":[],"sources":["../../../../../src/components/features/chat/components/resolve-picker-kind.ts"],"sourcesContent":["export type PickerKind = \"model\" | \"agent-profile\" | \"llm-profile\";\n\nexport interface ResolvePickerKindInput {\n  /** A conversation is active (i.e. we're inside a conversation, not on home). */\n  hasConversation: boolean;\n  /** The active backend is cloud (vs. a local agent-server). */\n  isCloud: boolean;\n  /** The current context runs an ACP agent (active conv or home ACP settings). */\n  isAcp: boolean;\n  /** At least one AgentProfile exists to launch the next conversation from. */\n  profilesAvailable: boolean;\n}\n\n/**\n * Decide which chat-input model/profile picker to show. Pure so the matrix is\n * unit-tested directly (see `resolve-picker-kind.test.ts`).\n *\n *  - Home (local or cloud): the AgentProfile picker, which starts a new\n *    conversation / activates the default (#3727, cloud via #15060). When no\n *    profiles exist yet, fall back — cloud → model, local → LLM-profile (cloud\n *    has no home LLM-profile activate path).\n *  - In an ACP conversation (local or cloud): the model picker — ACP owns its\n *    LLM via the subprocess/session, so the picker just live-switches the\n *    session model (set_session_model / cloud's switch_acp_model proxy).\n *  - In an OpenHands conversation (local or cloud): the LLM-profile picker,\n *    which live-switches the running conversation's LLM profile via\n *    /switch_profile — a real endpoint on both backends (cloud proxies\n *    POST /api/v1/app-conversations/{id}/switch_profile, unchanged since\n *    OpenHands#14288). There is no cloud-specific restriction here.\n */\nexport function resolvePickerKind({\n  hasConversation,\n  isCloud,\n  isAcp,\n  profilesAvailable,\n}: ResolvePickerKindInput): PickerKind {\n  if (!hasConversation) {\n    if (profilesAvailable) return \"agent-profile\";\n    return isCloud ? \"model\" : \"llm-profile\";\n  }\n  return isAcp ? \"model\" : \"llm-profile\";\n}\n"],"mappings":";AA8BA,SAAgB,EAAkB,EAChC,oBACA,YACA,UACA,wBACqC;AAKrC,QAJK,IAIE,IAAQ,UAAU,gBAHnB,IAA0B,kBACvB,IAAU,UAAU"}

package/dist/components/features/chat/goal-status-banner.cjs

@@ -0,0 +1,2 @@
+require(`../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../stores/goal-store.cjs`),t=require(`./goal-status-content.cjs`);let n=require(`react/jsx-runtime`);function r({conversationId:r}){let i=e.useGoalStore(e=>e.statusByConversation),a=r?i[r]:void 0;return a?.active?(0,n.jsx)(t.GoalStatusContent,{status:a}):null}exports.GoalStatusBanner=r;
+//# sourceMappingURL=goal-status-banner.cjs.map

package/dist/components/features/chat/goal-status-banner.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"goal-status-banner.cjs","names":[],"sources":["../../../../src/components/features/chat/goal-status-banner.tsx"],"sourcesContent":["import { useGoalStore } from \"#/stores/goal-store\";\nimport { GoalStatusContent } from \"./goal-status-content\";\n\nexport interface GoalStatusBannerProps {\n  conversationId: string | null | undefined;\n}\n\n/**\n * Live, bottom-pinned banner for an *active* `/goal` loop, fed by goal\n * ConversationStateUpdateEvents (see useGoalStore). Once the loop ends it hides:\n * the final status is rendered inline in the message timeline instead (see\n * event-message.tsx + should-render-event.ts), so the finished goal settles into\n * the conversation and later messages append below it.\n */\nexport function GoalStatusBanner({ conversationId }: GoalStatusBannerProps) {\n  const statusByConversation = useGoalStore((s) => s.statusByConversation);\n  const status = conversationId\n    ? statusByConversation[conversationId]\n    : undefined;\n\n  if (!status?.active) return null;\n\n  return <GoalStatusContent status={status} />;\n}\n"],"mappings":"+KAcA,SAAgB,EAAiB,CAAE,kBAAyC,CAC1E,IAAM,EAAuB,EAAA,aAAc,GAAM,EAAE,qBAAqB,CAClE,EAAS,EACX,EAAqB,GACrB,IAAA,GAIJ,OAFK,GAAQ,QAEN,EAAA,EAAA,KAAC,EAAA,kBAAD,CAA2B,SAAU,CAAA,CAFhB"}

package/dist/components/features/chat/goal-status-banner.d.ts

@@ -0,0 +1,11 @@
+export interface GoalStatusBannerProps {
+    conversationId: string | null | undefined;
+}
+/**
+ * Live, bottom-pinned banner for an *active* `/goal` loop, fed by goal
+ * ConversationStateUpdateEvents (see useGoalStore). Once the loop ends it hides:
+ * the final status is rendered inline in the message timeline instead (see
+ * event-message.tsx + should-render-event.ts), so the finished goal settles into
+ * the conversation and later messages append below it.
+ */
+export declare function GoalStatusBanner({ conversationId }: GoalStatusBannerProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/features/chat/goal-status-banner.js

@@ -0,0 +1,12 @@
+import { useGoalStore as e } from "../../../stores/goal-store.js";
+import { GoalStatusContent as t } from "./goal-status-content.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/features/chat/goal-status-banner.tsx
+function r({ conversationId: r }) {
+	let i = e((e) => e.statusByConversation), a = r ? i[r] : void 0;
+	return a?.active ? /* @__PURE__ */ n(t, { status: a }) : null;
+}
+//#endregion
+export { r as GoalStatusBanner };
+
+//# sourceMappingURL=goal-status-banner.js.map

package/dist/components/features/chat/goal-status-banner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"goal-status-banner.js","names":[],"sources":["../../../../src/components/features/chat/goal-status-banner.tsx"],"sourcesContent":["import { useGoalStore } from \"#/stores/goal-store\";\nimport { GoalStatusContent } from \"./goal-status-content\";\n\nexport interface GoalStatusBannerProps {\n  conversationId: string | null | undefined;\n}\n\n/**\n * Live, bottom-pinned banner for an *active* `/goal` loop, fed by goal\n * ConversationStateUpdateEvents (see useGoalStore). Once the loop ends it hides:\n * the final status is rendered inline in the message timeline instead (see\n * event-message.tsx + should-render-event.ts), so the finished goal settles into\n * the conversation and later messages append below it.\n */\nexport function GoalStatusBanner({ conversationId }: GoalStatusBannerProps) {\n  const statusByConversation = useGoalStore((s) => s.statusByConversation);\n  const status = conversationId\n    ? statusByConversation[conversationId]\n    : undefined;\n\n  if (!status?.active) return null;\n\n  return <GoalStatusContent status={status} />;\n}\n"],"mappings":";;;;AAcA,SAAgB,EAAiB,EAAE,qBAAyC;CAC1E,IAAM,IAAuB,GAAc,MAAM,EAAE,qBAAqB,EAClE,IAAS,IACX,EAAqB,KACrB,KAAA;AAIJ,QAFK,GAAQ,SAEN,kBAAC,GAAD,EAA2B,WAAU,CAAA,GAFhB"}

package/dist/components/features/chat/goal-status-content.cjs

@@ -0,0 +1,2 @@
+require(`../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),t=require(`../../../i18n/declaration.cjs`),n=require(`../../../utils/utils.cjs`),r=require(`../../../hooks/use-conversation-id.cjs`),i=require(`../../../utils/custom-toast-handlers.cjs`),a=require(`../../../stores/goal-store.cjs`),o=require(`../../../hooks/mutation/conversation-mutation-utils.cjs`),s=require(`./generic-event-message.cjs`),c=require(`../../../icons/check-circle-solid.cjs`),l=require(`../../../icons/x-circle-solid.cjs`),u=require(`../../../utils/form-control-classes.cjs`);let d=require(`react`),f=require(`react/jsx-runtime`);var p={running:t.I18nKey.GOAL$STATUS_RUNNING,complete:t.I18nKey.GOAL$STATUS_COMPLETE,capped:t.I18nKey.GOAL$STATUS_CAPPED,interrupted:t.I18nKey.GOAL$STATUS_INTERRUPTED};function m({status:m}){let{t:h}=e.useTranslation(`openhands`),{conversationId:g}=r.useOptionalConversationId(),_=a.useGoalStore(e=>g?!!e.statusByConversation[g]?.active:!1),[v,y]=(0,d.useState)(!1),{active:b,objective:x,iteration:S,max_iterations:C,verdict:w}=m,T=w?Math.round(w.score*100):null,E=w?.missing?h(t.I18nKey.GOAL$MISSING,{missing:w.missing}):``,D=async(e,t)=>{if(!(!g||v)){y(!0);try{await e(g)}catch(e){i.displayErrorToast(e instanceof Error&&e.message?e.message:h(t))}finally{y(!1)}}},O=()=>D(async e=>{await o.stopGoal(e),await o.pauseConversation(e)},t.I18nKey.GOAL$STOP_FAILED),k=()=>D(o.resumeGoal,t.I18nKey.GOAL$RESUME_FAILED),A=null;return g&&b?A=(0,f.jsx)(`button`,{type:`button`,"data-testid":`goal-stop`,disabled:v,onClick:O,className:n.cn(u.chatInputPillButtonClassName,u.formControlDisabledClassName),children:h(t.I18nKey.GOAL$STOP)}):g&&m.status===`interrupted`&&!_&&(A=(0,f.jsx)(`button`,{type:`button`,"data-testid":`goal-resume`,disabled:v,onClick:k,className:n.cn(u.chatInputPillButtonClassName,u.formControlDisabledClassName),children:h(t.I18nKey.GOAL$RESUME)})),(0,f.jsx)(`div`,{"data-testid":`goal-status`,className:`flex flex-col w-full`,children:(0,f.jsx)(s.GenericEventMessage,{title:(0,f.jsxs)(`span`,{className:`flex items-center gap-2 flex-wrap`,children:[(0,f.jsx)(`span`,{className:`opacity-60`,children:h(t.I18nKey.GOAL$PREFIX)}),(0,f.jsx)(`span`,{children:x}),(0,f.jsx)(`span`,{className:`opacity-60`,children:h(t.I18nKey.GOAL$ROUND,{iteration:S,max:C})}),(0,f.jsx)(`span`,{children:h(p[m.status])}),T!==null&&(0,f.jsx)(`span`,{className:`opacity-60`,children:h(t.I18nKey.GOAL$SCORE,{score:T})}),b?(0,f.jsx)(`span`,{"data-testid":`goal-spinner`,className:`inline-block w-3.5 h-3.5 ml-1 rounded-full border-2 border-transparent border-t-[var(--oh-border-input)] animate-spin`}):m.status===`complete`?(0,f.jsx)(`span`,{"data-testid":`goal-done`,className:`inline-flex ml-1`,children:(0,f.jsx)(c.default,{className:`w-3.5 h-3.5 fill-success`})}):(0,f.jsx)(`span`,{"data-testid":`goal-ended`,className:`inline-flex ml-1`,children:(0,f.jsx)(l.default,{className:`w-3.5 h-3.5 fill-[var(--oh-muted)]`})})]}),titleTrailing:A,details:E,initiallyExpanded:!b,chevronPosition:`before`})})}exports.GoalStatusContent=m;
+//# sourceMappingURL=goal-status-content.cjs.map

package/dist/components/features/chat/goal-status-content.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"goal-status-content.cjs","names":[],"sources":["../../../../src/components/features/chat/goal-status-content.tsx"],"sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport CheckCircle from \"#/icons/check-circle-solid.svg?react\";\nimport XCircle from \"#/icons/x-circle-solid.svg?react\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { GoalStatus } from \"#/types/agent-server/core/events/conversation-state-event\";\nimport { useGoalStore } from \"#/stores/goal-store\";\nimport { useOptionalConversationId } from \"#/hooks/use-conversation-id\";\nimport {\n  pauseConversation,\n  resumeGoal,\n  stopGoal,\n} from \"#/hooks/mutation/conversation-mutation-utils\";\nimport { displayErrorToast } from \"#/utils/custom-toast-handlers\";\nimport { cn } from \"#/utils/utils\";\nimport {\n  chatInputPillButtonClassName,\n  formControlDisabledClassName,\n} from \"#/utils/form-control-classes\";\nimport { GenericEventMessage } from \"./generic-event-message\";\n\nconst STATUS_LABEL_KEY: Record<GoalStatus[\"status\"], I18nKey> = {\n  running: I18nKey.GOAL$STATUS_RUNNING,\n  complete: I18nKey.GOAL$STATUS_COMPLETE,\n  capped: I18nKey.GOAL$STATUS_CAPPED,\n  interrupted: I18nKey.GOAL$STATUS_INTERRUPTED,\n};\n\n/**\n * Goal-status row: objective, round count, status word, the judge's score, the\n * judge's \"missing\" note (expandable), and an indicator — spinner while running,\n * green check when complete, muted cross when it ends without completing\n * (capped/interrupted).\n *\n * Also exposes the loop controls at the end of the row: a Stop button while the\n * loop is active and a Resume button once it is interrupted. Stop both cancels\n * the loop (`stopGoal`) and interrupts the conversation, because the backend's\n * stop deliberately leaves the in-flight agent turn running.\n *\n * Used in two places: the live bottom banner (GoalStatusBanner) while a loop is\n * active, and inline in the message timeline for the terminal status, so a\n * finished `/goal` settles into the conversation. Because the inline copy mounts\n * fresh once terminal, `initiallyExpanded={!active}` expands the note there\n * without any re-mount trickery.\n */\nexport function GoalStatusContent({ status }: { status: GoalStatus }) {\n  const { t } = useTranslation(\"openhands\");\n  const { conversationId } = useOptionalConversationId();\n  // Whether *some* goal loop is currently live for this conversation. Used to\n  // hide a stale inline Resume button once the user has resumed (or started a\n  // new goal): resuming again would just 409 on the backend.\n  const goalActive = useGoalStore((s) =>\n    conversationId\n      ? Boolean(s.statusByConversation[conversationId]?.active)\n      : false,\n  );\n  const [pending, setPending] = useState(false);\n  const {\n    active,\n    objective,\n    iteration,\n    max_iterations: maxIterations,\n    verdict,\n  } = status;\n  const scorePct = verdict ? Math.round(verdict.score * 100) : null;\n  const details = verdict?.missing\n    ? t(I18nKey.GOAL$MISSING, { missing: verdict.missing })\n    : \"\";\n\n  const runAction = async (\n    action: (id: string) => Promise<void>,\n    failKey: I18nKey,\n  ) => {\n    if (!conversationId || pending) return;\n    setPending(true);\n    try {\n      await action(conversationId);\n    } catch (err) {\n      displayErrorToast(\n        err instanceof Error && err.message ? err.message : t(failKey),\n      );\n    } finally {\n      setPending(false);\n    }\n  };\n\n  // stopGoal only cancels the loop; the backend leaves the current agent turn\n  // running, so interrupt the conversation too to actually halt it.\n  const handleStop = () =>\n    runAction(async (id) => {\n      await stopGoal(id);\n      await pauseConversation(id);\n    }, I18nKey.GOAL$STOP_FAILED);\n\n  const handleResume = () => runAction(resumeGoal, I18nKey.GOAL$RESUME_FAILED);\n\n  let actionButton: ReactNode = null;\n  if (conversationId && active) {\n    actionButton = (\n      <button\n        type=\"button\"\n        data-testid=\"goal-stop\"\n        disabled={pending}\n        onClick={handleStop}\n        className={cn(\n          chatInputPillButtonClassName,\n          formControlDisabledClassName,\n        )}\n      >\n        {t(I18nKey.GOAL$STOP)}\n      </button>\n    );\n  } else if (conversationId && status.status === \"interrupted\" && !goalActive) {\n    actionButton = (\n      <button\n        type=\"button\"\n        data-testid=\"goal-resume\"\n        disabled={pending}\n        onClick={handleResume}\n        className={cn(\n          chatInputPillButtonClassName,\n          formControlDisabledClassName,\n        )}\n      >\n        {t(I18nKey.GOAL$RESUME)}\n      </button>\n    );\n  }\n\n  return (\n    <div data-testid=\"goal-status\" className=\"flex flex-col w-full\">\n      <GenericEventMessage\n        title={\n          <span className=\"flex items-center gap-2 flex-wrap\">\n            <span className=\"opacity-60\">{t(I18nKey.GOAL$PREFIX)}</span>\n            <span>{objective}</span>\n            <span className=\"opacity-60\">\n              {t(I18nKey.GOAL$ROUND, { iteration, max: maxIterations })}\n            </span>\n            <span>{t(STATUS_LABEL_KEY[status.status])}</span>\n            {scorePct !== null && (\n              <span className=\"opacity-60\">\n                {t(I18nKey.GOAL$SCORE, { score: scorePct })}\n              </span>\n            )}\n            {active ? (\n              <span\n                data-testid=\"goal-spinner\"\n                className=\"inline-block w-3.5 h-3.5 ml-1 rounded-full border-2 border-transparent border-t-[var(--oh-border-input)] animate-spin\"\n              />\n            ) : status.status === \"complete\" ? (\n              <span data-testid=\"goal-done\" className=\"inline-flex ml-1\">\n                <CheckCircle className=\"w-3.5 h-3.5 fill-success\" />\n              </span>\n            ) : (\n              <span data-testid=\"goal-ended\" className=\"inline-flex ml-1\">\n                <XCircle className=\"w-3.5 h-3.5 fill-[var(--oh-muted)]\" />\n              </span>\n            )}\n          </span>\n        }\n        titleTrailing={actionButton}\n        details={details}\n        initiallyExpanded={!active}\n        chevronPosition=\"before\"\n      />\n    </div>\n  );\n}\n"],"mappings":"uqBAqBA,IAAM,EAA0D,CAC9D,QAAS,EAAA,QAAQ,oBACjB,SAAU,EAAA,QAAQ,qBAClB,OAAQ,EAAA,QAAQ,mBAChB,YAAa,EAAA,QAAQ,wBACtB,CAmBD,SAAgB,EAAkB,CAAE,UAAkC,CACpE,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CACnC,CAAE,kBAAmB,EAAA,2BAA2B,CAIhD,EAAa,EAAA,aAAc,GAC/B,EACI,EAAQ,EAAE,qBAAqB,IAAiB,OAChD,GACL,CACK,CAAC,EAAS,IAAA,EAAA,EAAA,UAAuB,GAAM,CACvC,CACJ,SACA,YACA,YACA,eAAgB,EAChB,WACE,EACE,EAAW,EAAU,KAAK,MAAM,EAAQ,MAAQ,IAAI,CAAG,KACvD,EAAU,GAAS,QACrB,EAAE,EAAA,QAAQ,aAAc,CAAE,QAAS,EAAQ,QAAS,CAAC,CACrD,GAEE,EAAY,MAChB,EACA,IACG,CACC,MAAC,GAAkB,GACvB,GAAW,GAAK,CAChB,GAAI,CACF,MAAM,EAAO,EAAe,OACrB,EAAK,CACZ,EAAA,kBACE,aAAe,OAAS,EAAI,QAAU,EAAI,QAAU,EAAE,EAAQ,CAC/D,QACO,CACR,EAAW,GAAM,IAMf,MACJ,EAAU,KAAO,IAAO,CACtB,MAAM,EAAA,SAAS,EAAG,CAClB,MAAM,EAAA,kBAAkB,EAAG,EAC1B,EAAA,QAAQ,iBAAiB,CAExB,MAAqB,EAAU,EAAA,WAAY,EAAA,QAAQ,mBAAmB,CAExE,EAA0B,KAiC9B,OAhCI,GAAkB,EACpB,GACE,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,cAAY,YACZ,SAAU,EACV,QAAS,EACT,UAAW,EAAA,GACT,EAAA,6BACA,EAAA,6BACD,UAEA,EAAE,EAAA,QAAQ,UAAU,CACd,CAAA,CAEF,GAAkB,EAAO,SAAW,eAAiB,CAAC,IAC/D,GACE,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,cAAY,cACZ,SAAU,EACV,QAAS,EACT,UAAW,EAAA,GACT,EAAA,6BACA,EAAA,6BACD,UAEA,EAAE,EAAA,QAAQ,YAAY,CAChB,CAAA,GAKX,EAAA,EAAA,KAAC,MAAD,CAAK,cAAY,cAAc,UAAU,iCACvC,EAAA,EAAA,KAAC,EAAA,oBAAD,CACE,OACE,EAAA,EAAA,MAAC,OAAD,CAAM,UAAU,6CAAhB,EACE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,sBAAc,EAAE,EAAA,QAAQ,YAAY,CAAQ,CAAA,EAC5D,EAAA,EAAA,KAAC,OAAD,CAAA,SAAO,EAAiB,CAAA,EACxB,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,sBACb,EAAE,EAAA,QAAQ,WAAY,CAAE,YAAW,IAAK,EAAe,CAAC,CACpD,CAAA,EACP,EAAA,EAAA,KAAC,OAAD,CAAA,SAAO,EAAE,EAAiB,EAAO,QAAQ,CAAQ,CAAA,CAChD,IAAa,OACZ,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,sBACb,EAAE,EAAA,QAAQ,WAAY,CAAE,MAAO,EAAU,CAAC,CACtC,CAAA,CAER,GACC,EAAA,EAAA,KAAC,OAAD,CACE,cAAY,eACZ,UAAU,wHACV,CAAA,CACA,EAAO,SAAW,YACpB,EAAA,EAAA,KAAC,OAAD,CAAM,cAAY,YAAY,UAAU,6BACtC,EAAA,EAAA,KAAC,EAAA,QAAD,CAAa,UAAU,2BAA6B,CAAA,CAC/C,CAAA,EAEP,EAAA,EAAA,KAAC,OAAD,CAAM,cAAY,aAAa,UAAU,6BACvC,EAAA,EAAA,KAAC,EAAA,QAAD,CAAS,UAAU,qCAAuC,CAAA,CACrD,CAAA,CAEJ,GAET,cAAe,EACN,UACT,kBAAmB,CAAC,EACpB,gBAAgB,SAChB,CAAA,CACE,CAAA"}

package/dist/components/features/chat/goal-status-content.d.ts

@@ -0,0 +1,21 @@
+import { GoalStatus } from "#/types/agent-server/core/events/conversation-state-event";
+/**
+ * Goal-status row: objective, round count, status word, the judge's score, the
+ * judge's "missing" note (expandable), and an indicator — spinner while running,
+ * green check when complete, muted cross when it ends without completing
+ * (capped/interrupted).
+ *
+ * Also exposes the loop controls at the end of the row: a Stop button while the
+ * loop is active and a Resume button once it is interrupted. Stop both cancels
+ * the loop (`stopGoal`) and interrupts the conversation, because the backend's
+ * stop deliberately leaves the in-flight agent turn running.
+ *
+ * Used in two places: the live bottom banner (GoalStatusBanner) while a loop is
+ * active, and inline in the message timeline for the terminal status, so a
+ * finished `/goal` settles into the conversation. Because the inline copy mounts
+ * fresh once terminal, `initiallyExpanded={!active}` expands the note there
+ * without any re-mount trickery.
+ */
+export declare function GoalStatusContent({ status }: {
+    status: GoalStatus;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/features/chat/goal-status-content.js

@@ -0,0 +1,98 @@
+import { useTranslation as e } from "../../../node_modules/react-i18next/dist/es/useTranslation.js";
+import { I18nKey as t } from "../../../i18n/declaration.js";
+import { cn as n } from "../../../utils/utils.js";
+import { useOptionalConversationId as r } from "../../../hooks/use-conversation-id.js";
+import { displayErrorToast as i } from "../../../utils/custom-toast-handlers.js";
+import { useGoalStore as a } from "../../../stores/goal-store.js";
+import { pauseConversation as o, resumeGoal as s, stopGoal as c } from "../../../hooks/mutation/conversation-mutation-utils.js";
+import { GenericEventMessage as l } from "./generic-event-message.js";
+import u from "../../../icons/check-circle-solid.js";
+import d from "../../../icons/x-circle-solid.js";
+import { chatInputPillButtonClassName as f, formControlDisabledClassName as p } from "../../../utils/form-control-classes.js";
+import { useState as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+//#region src/components/features/chat/goal-status-content.tsx
+var _ = {
+	running: t.GOAL$STATUS_RUNNING,
+	complete: t.GOAL$STATUS_COMPLETE,
+	capped: t.GOAL$STATUS_CAPPED,
+	interrupted: t.GOAL$STATUS_INTERRUPTED
+};
+function v({ status: v }) {
+	let { t: y } = e("openhands"), { conversationId: b } = r(), x = a((e) => b ? !!e.statusByConversation[b]?.active : !1), [S, C] = m(!1), { active: w, objective: T, iteration: E, max_iterations: D, verdict: O } = v, k = O ? Math.round(O.score * 100) : null, A = O?.missing ? y(t.GOAL$MISSING, { missing: O.missing }) : "", j = async (e, t) => {
+		if (!(!b || S)) {
+			C(!0);
+			try {
+				await e(b);
+			} catch (e) {
+				i(e instanceof Error && e.message ? e.message : y(t));
+			} finally {
+				C(!1);
+			}
+		}
+	}, M = () => j(async (e) => {
+		await c(e), await o(e);
+	}, t.GOAL$STOP_FAILED), N = () => j(s, t.GOAL$RESUME_FAILED), P = null;
+	return b && w ? P = /* @__PURE__ */ h("button", {
+		type: "button",
+		"data-testid": "goal-stop",
+		disabled: S,
+		onClick: M,
+		className: n(f, p),
+		children: y(t.GOAL$STOP)
+	}) : b && v.status === "interrupted" && !x && (P = /* @__PURE__ */ h("button", {
+		type: "button",
+		"data-testid": "goal-resume",
+		disabled: S,
+		onClick: N,
+		className: n(f, p),
+		children: y(t.GOAL$RESUME)
+	})), /* @__PURE__ */ h("div", {
+		"data-testid": "goal-status",
+		className: "flex flex-col w-full",
+		children: /* @__PURE__ */ h(l, {
+			title: /* @__PURE__ */ g("span", {
+				className: "flex items-center gap-2 flex-wrap",
+				children: [
+					/* @__PURE__ */ h("span", {
+						className: "opacity-60",
+						children: y(t.GOAL$PREFIX)
+					}),
+					/* @__PURE__ */ h("span", { children: T }),
+					/* @__PURE__ */ h("span", {
+						className: "opacity-60",
+						children: y(t.GOAL$ROUND, {
+							iteration: E,
+							max: D
+						})
+					}),
+					/* @__PURE__ */ h("span", { children: y(_[v.status]) }),
+					k !== null && /* @__PURE__ */ h("span", {
+						className: "opacity-60",
+						children: y(t.GOAL$SCORE, { score: k })
+					}),
+					w ? /* @__PURE__ */ h("span", {
+						"data-testid": "goal-spinner",
+						className: "inline-block w-3.5 h-3.5 ml-1 rounded-full border-2 border-transparent border-t-[var(--oh-border-input)] animate-spin"
+					}) : v.status === "complete" ? /* @__PURE__ */ h("span", {
+						"data-testid": "goal-done",
+						className: "inline-flex ml-1",
+						children: /* @__PURE__ */ h(u, { className: "w-3.5 h-3.5 fill-success" })
+					}) : /* @__PURE__ */ h("span", {
+						"data-testid": "goal-ended",
+						className: "inline-flex ml-1",
+						children: /* @__PURE__ */ h(d, { className: "w-3.5 h-3.5 fill-[var(--oh-muted)]" })
+					})
+				]
+			}),
+			titleTrailing: P,
+			details: A,
+			initiallyExpanded: !w,
+			chevronPosition: "before"
+		})
+	});
+}
+//#endregion
+export { v as GoalStatusContent };
+
+//# sourceMappingURL=goal-status-content.js.map

package/dist/components/features/chat/goal-status-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"goal-status-content.js","names":[],"sources":["../../../../src/components/features/chat/goal-status-content.tsx"],"sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport CheckCircle from \"#/icons/check-circle-solid.svg?react\";\nimport XCircle from \"#/icons/x-circle-solid.svg?react\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { GoalStatus } from \"#/types/agent-server/core/events/conversation-state-event\";\nimport { useGoalStore } from \"#/stores/goal-store\";\nimport { useOptionalConversationId } from \"#/hooks/use-conversation-id\";\nimport {\n  pauseConversation,\n  resumeGoal,\n  stopGoal,\n} from \"#/hooks/mutation/conversation-mutation-utils\";\nimport { displayErrorToast } from \"#/utils/custom-toast-handlers\";\nimport { cn } from \"#/utils/utils\";\nimport {\n  chatInputPillButtonClassName,\n  formControlDisabledClassName,\n} from \"#/utils/form-control-classes\";\nimport { GenericEventMessage } from \"./generic-event-message\";\n\nconst STATUS_LABEL_KEY: Record<GoalStatus[\"status\"], I18nKey> = {\n  running: I18nKey.GOAL$STATUS_RUNNING,\n  complete: I18nKey.GOAL$STATUS_COMPLETE,\n  capped: I18nKey.GOAL$STATUS_CAPPED,\n  interrupted: I18nKey.GOAL$STATUS_INTERRUPTED,\n};\n\n/**\n * Goal-status row: objective, round count, status word, the judge's score, the\n * judge's \"missing\" note (expandable), and an indicator — spinner while running,\n * green check when complete, muted cross when it ends without completing\n * (capped/interrupted).\n *\n * Also exposes the loop controls at the end of the row: a Stop button while the\n * loop is active and a Resume button once it is interrupted. Stop both cancels\n * the loop (`stopGoal`) and interrupts the conversation, because the backend's\n * stop deliberately leaves the in-flight agent turn running.\n *\n * Used in two places: the live bottom banner (GoalStatusBanner) while a loop is\n * active, and inline in the message timeline for the terminal status, so a\n * finished `/goal` settles into the conversation. Because the inline copy mounts\n * fresh once terminal, `initiallyExpanded={!active}` expands the note there\n * without any re-mount trickery.\n */\nexport function GoalStatusContent({ status }: { status: GoalStatus }) {\n  const { t } = useTranslation(\"openhands\");\n  const { conversationId } = useOptionalConversationId();\n  // Whether *some* goal loop is currently live for this conversation. Used to\n  // hide a stale inline Resume button once the user has resumed (or started a\n  // new goal): resuming again would just 409 on the backend.\n  const goalActive = useGoalStore((s) =>\n    conversationId\n      ? Boolean(s.statusByConversation[conversationId]?.active)\n      : false,\n  );\n  const [pending, setPending] = useState(false);\n  const {\n    active,\n    objective,\n    iteration,\n    max_iterations: maxIterations,\n    verdict,\n  } = status;\n  const scorePct = verdict ? Math.round(verdict.score * 100) : null;\n  const details = verdict?.missing\n    ? t(I18nKey.GOAL$MISSING, { missing: verdict.missing })\n    : \"\";\n\n  const runAction = async (\n    action: (id: string) => Promise<void>,\n    failKey: I18nKey,\n  ) => {\n    if (!conversationId || pending) return;\n    setPending(true);\n    try {\n      await action(conversationId);\n    } catch (err) {\n      displayErrorToast(\n        err instanceof Error && err.message ? err.message : t(failKey),\n      );\n    } finally {\n      setPending(false);\n    }\n  };\n\n  // stopGoal only cancels the loop; the backend leaves the current agent turn\n  // running, so interrupt the conversation too to actually halt it.\n  const handleStop = () =>\n    runAction(async (id) => {\n      await stopGoal(id);\n      await pauseConversation(id);\n    }, I18nKey.GOAL$STOP_FAILED);\n\n  const handleResume = () => runAction(resumeGoal, I18nKey.GOAL$RESUME_FAILED);\n\n  let actionButton: ReactNode = null;\n  if (conversationId && active) {\n    actionButton = (\n      <button\n        type=\"button\"\n        data-testid=\"goal-stop\"\n        disabled={pending}\n        onClick={handleStop}\n        className={cn(\n          chatInputPillButtonClassName,\n          formControlDisabledClassName,\n        )}\n      >\n        {t(I18nKey.GOAL$STOP)}\n      </button>\n    );\n  } else if (conversationId && status.status === \"interrupted\" && !goalActive) {\n    actionButton = (\n      <button\n        type=\"button\"\n        data-testid=\"goal-resume\"\n        disabled={pending}\n        onClick={handleResume}\n        className={cn(\n          chatInputPillButtonClassName,\n          formControlDisabledClassName,\n        )}\n      >\n        {t(I18nKey.GOAL$RESUME)}\n      </button>\n    );\n  }\n\n  return (\n    <div data-testid=\"goal-status\" className=\"flex flex-col w-full\">\n      <GenericEventMessage\n        title={\n          <span className=\"flex items-center gap-2 flex-wrap\">\n            <span className=\"opacity-60\">{t(I18nKey.GOAL$PREFIX)}</span>\n            <span>{objective}</span>\n            <span className=\"opacity-60\">\n              {t(I18nKey.GOAL$ROUND, { iteration, max: maxIterations })}\n            </span>\n            <span>{t(STATUS_LABEL_KEY[status.status])}</span>\n            {scorePct !== null && (\n              <span className=\"opacity-60\">\n                {t(I18nKey.GOAL$SCORE, { score: scorePct })}\n              </span>\n            )}\n            {active ? (\n              <span\n                data-testid=\"goal-spinner\"\n                className=\"inline-block w-3.5 h-3.5 ml-1 rounded-full border-2 border-transparent border-t-[var(--oh-border-input)] animate-spin\"\n              />\n            ) : status.status === \"complete\" ? (\n              <span data-testid=\"goal-done\" className=\"inline-flex ml-1\">\n                <CheckCircle className=\"w-3.5 h-3.5 fill-success\" />\n              </span>\n            ) : (\n              <span data-testid=\"goal-ended\" className=\"inline-flex ml-1\">\n                <XCircle className=\"w-3.5 h-3.5 fill-[var(--oh-muted)]\" />\n              </span>\n            )}\n          </span>\n        }\n        titleTrailing={actionButton}\n        details={details}\n        initiallyExpanded={!active}\n        chevronPosition=\"before\"\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAqBA,IAAM,IAA0D;CAC9D,SAAS,EAAQ;CACjB,UAAU,EAAQ;CAClB,QAAQ,EAAQ;CAChB,aAAa,EAAQ;CACtB;AAmBD,SAAgB,EAAkB,EAAE,aAAkC;CACpE,IAAM,EAAE,SAAM,EAAe,YAAY,EACnC,EAAE,sBAAmB,GAA2B,EAIhD,IAAa,GAAc,MAC/B,IACI,EAAQ,EAAE,qBAAqB,IAAiB,SAChD,GACL,EACK,CAAC,GAAS,KAAc,EAAS,GAAM,EACvC,EACJ,WACA,cACA,cACA,gBAAgB,GAChB,eACE,GACE,IAAW,IAAU,KAAK,MAAM,EAAQ,QAAQ,IAAI,GAAG,MACvD,IAAU,GAAS,UACrB,EAAE,EAAQ,cAAc,EAAE,SAAS,EAAQ,SAAS,CAAC,GACrD,IAEE,IAAY,OAChB,GACA,MACG;AACC,SAAC,KAAkB,IACvB;KAAW,GAAK;AAChB,OAAI;AACF,UAAM,EAAO,EAAe;YACrB,GAAK;AACZ,MACE,aAAe,SAAS,EAAI,UAAU,EAAI,UAAU,EAAE,EAAQ,CAC/D;aACO;AACR,MAAW,GAAM;;;IAMf,UACJ,EAAU,OAAO,MAAO;AAEtB,EADA,MAAM,EAAS,EAAG,EAClB,MAAM,EAAkB,EAAG;IAC1B,EAAQ,iBAAiB,EAExB,UAAqB,EAAU,GAAY,EAAQ,mBAAmB,EAExE,IAA0B;AAiC9B,QAhCI,KAAkB,IACpB,IACE,kBAAC,UAAD;EACE,MAAK;EACL,eAAY;EACZ,UAAU;EACV,SAAS;EACT,WAAW,EACT,GACA,EACD;YAEA,EAAE,EAAQ,UAAU;EACd,CAAA,GAEF,KAAkB,EAAO,WAAW,iBAAiB,CAAC,MAC/D,IACE,kBAAC,UAAD;EACE,MAAK;EACL,eAAY;EACZ,UAAU;EACV,SAAS;EACT,WAAW,EACT,GACA,EACD;YAEA,EAAE,EAAQ,YAAY;EAChB,CAAA,GAKX,kBAAC,OAAD;EAAK,eAAY;EAAc,WAAU;YACvC,kBAAC,GAAD;GACE,OACE,kBAAC,QAAD;IAAM,WAAU;cAAhB;KACE,kBAAC,QAAD;MAAM,WAAU;gBAAc,EAAE,EAAQ,YAAY;MAAQ,CAAA;KAC5D,kBAAC,QAAD,EAAA,UAAO,GAAiB,CAAA;KACxB,kBAAC,QAAD;MAAM,WAAU;gBACb,EAAE,EAAQ,YAAY;OAAE;OAAW,KAAK;OAAe,CAAC;MACpD,CAAA;KACP,kBAAC,QAAD,EAAA,UAAO,EAAE,EAAiB,EAAO,QAAQ,EAAQ,CAAA;KAChD,MAAa,QACZ,kBAAC,QAAD;MAAM,WAAU;gBACb,EAAE,EAAQ,YAAY,EAAE,OAAO,GAAU,CAAC;MACtC,CAAA;KAER,IACC,kBAAC,QAAD;MACE,eAAY;MACZ,WAAU;MACV,CAAA,GACA,EAAO,WAAW,aACpB,kBAAC,QAAD;MAAM,eAAY;MAAY,WAAU;gBACtC,kBAAC,GAAD,EAAa,WAAU,4BAA6B,CAAA;MAC/C,CAAA,GAEP,kBAAC,QAAD;MAAM,eAAY;MAAa,WAAU;gBACvC,kBAAC,GAAD,EAAS,WAAU,sCAAuC,CAAA;MACrD,CAAA;KAEJ;;GAET,eAAe;GACN;GACT,mBAAmB,CAAC;GACpB,iBAAgB;GAChB,CAAA;EACE,CAAA"}

package/dist/components/features/chat/interactive-chat-box.cjs

@@ -1,2 +1,2 @@
-require(`../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../types/agent-state.cjs`),t=require(`../../../utils/utils.cjs`),n=require(`../../../hooks/use-conversation-id.cjs`),r=require(`../../../stores/conversation-store.cjs`),i=require(`../../../hooks/query/use-active-conversation.cjs`),a=require(`../../../hooks/use-agent-state.cjs`),o=require(`./utils/chat-input.utils.cjs`),s=require(`../../../hooks/query/use-sub-conversation-task-polling.cjs`),c=require(`./custom-chat-input.cjs`),l=require(`../../../hooks/chat/use-btw-interceptor.cjs`),u=require(`../../../hooks/chat/use-model-interceptor.cjs`),d=require(`../../../hooks/chat/use-chat-attachment-upload.cjs`),f=require(`./git-control-bar.cjs`);let p=require(`react/jsx-runtime`);function m({onSubmit:m,disabled:h=!1}){let{images:g,files:_,imagesMarkedUploadAsFile:v,clearAllFiles:y,subConversationTaskId:b}=r.useConversationStore(),{curAgentState:x}=a.useAgentState(),{data:S}=i.useActiveConversation(),{conversationId:C}=n.useOptionalConversationId(),w=C??S?.id??null,{taskStatus:T}=s.useSubConversationTaskPolling(b,S?.id||null),{handleUpload:E}=d.useChatAttachmentUpload(),D=u.useModelInterceptor(w,l.useBtwInterceptor(w,e=>{let{imagesToEmbed:t,imagesAsFiles:n}=o.partitionImagesForUpload(g,v);m(e,t,[..._,...n]),y()}));return(0,p.jsxs)(`div`,{"data-testid":`interactive-chat-box`,children:[(0,p.jsx)(c.CustomChatInput,{disabled:h||x===e.AgentState.AWAITING_USER_CONFIRMATION||t.isTaskPolling(T),isNewConversationPending:h,onSubmit:D,onFilesPaste:E}),(0,p.jsx)(`div`,{className:`mt-3 pb-3`,children:(0,p.jsx)(f.GitControlBar,{onSuggestionsClick:e=>{D(e)}})})]})}exports.InteractiveChatBox=m;
+require(`../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../types/agent-state.cjs`),t=require(`../../../utils/utils.cjs`),n=require(`../../../hooks/use-conversation-id.cjs`),r=require(`../../../stores/conversation-store.cjs`),i=require(`../../../hooks/query/use-active-conversation.cjs`),a=require(`../../../hooks/use-agent-state.cjs`),o=require(`./utils/chat-input.utils.cjs`),s=require(`../../../hooks/query/use-sub-conversation-task-polling.cjs`),c=require(`./custom-chat-input.cjs`),l=require(`../../../hooks/chat/use-btw-interceptor.cjs`),u=require(`../../../hooks/chat/use-goal-interceptor.cjs`),d=require(`../../../hooks/chat/use-model-interceptor.cjs`),f=require(`../../../hooks/chat/use-chat-attachment-upload.cjs`),p=require(`./git-control-bar.cjs`);let m=require(`react/jsx-runtime`);function h({onSubmit:h,disabled:g=!1}){let{images:_,files:v,imagesMarkedUploadAsFile:y,clearAllFiles:b,subConversationTaskId:x}=r.useConversationStore(),{curAgentState:S}=a.useAgentState(),{data:C}=i.useActiveConversation(),{conversationId:w}=n.useOptionalConversationId(),T=w??C?.id??null,{taskStatus:E}=s.useSubConversationTaskPolling(x,C?.id||null),{handleUpload:D}=f.useChatAttachmentUpload(),O=d.useModelInterceptor(T,u.useGoalInterceptor(T,l.useBtwInterceptor(T,e=>{let{imagesToEmbed:t,imagesAsFiles:n}=o.partitionImagesForUpload(_,y);h(e,t,[...v,...n]),b()})));return(0,m.jsxs)(`div`,{"data-testid":`interactive-chat-box`,children:[(0,m.jsx)(c.CustomChatInput,{disabled:g||S===e.AgentState.AWAITING_USER_CONFIRMATION||t.isTaskPolling(E),isNewConversationPending:g,onSubmit:O,onFilesPaste:D}),(0,m.jsx)(`div`,{className:`mt-3 pb-3`,children:(0,m.jsx)(p.GitControlBar,{onSuggestionsClick:e=>{O(e)}})})]})}exports.InteractiveChatBox=h;
 //# sourceMappingURL=interactive-chat-box.cjs.map

package/dist/components/features/chat/interactive-chat-box.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"interactive-chat-box.cjs","names":[],"sources":["../../../../src/components/features/chat/interactive-chat-box.tsx"],"sourcesContent":["import { CustomChatInput } from \"./custom-chat-input\";\nimport { useBtwInterceptor } from \"#/hooks/chat/use-btw-interceptor\";\nimport { useModelInterceptor } from \"#/hooks/chat/use-model-interceptor\";\nimport { useChatAttachmentUpload } from \"#/hooks/chat/use-chat-attachment-upload\";\nimport { AgentState } from \"#/types/agent-state\";\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useOptionalConversationId } from \"#/hooks/use-conversation-id\";\nimport { GitControlBar } from \"./git-control-bar\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { useSubConversationTaskPolling } from \"#/hooks/query/use-sub-conversation-task-polling\";\nimport { partitionImagesForUpload } from \"#/components/features/chat/utils/chat-input.utils\";\nimport { isTaskPolling } from \"#/utils/utils\";\n\ninterface InteractiveChatBoxProps {\n  onSubmit: (message: string, images: File[], files: File[]) => void;\n  disabled?: boolean;\n}\n\nexport function InteractiveChatBox({\n  onSubmit,\n  disabled = false,\n}: InteractiveChatBoxProps) {\n  const {\n    images,\n    files,\n    imagesMarkedUploadAsFile,\n    clearAllFiles,\n    subConversationTaskId,\n  } = useConversationStore();\n  const { curAgentState } = useAgentState();\n  const { data: conversation } = useActiveConversation();\n  const { conversationId: routeConversationId } = useOptionalConversationId();\n  const conversationId = routeConversationId ?? conversation?.id ?? null;\n\n  const { taskStatus: subConversationTaskStatus } =\n    useSubConversationTaskPolling(\n      subConversationTaskId,\n      conversation?.id || null,\n    );\n\n  const { handleUpload } = useChatAttachmentUpload();\n\n  const handleAfterModel = useBtwInterceptor(conversationId, (message) => {\n    const { imagesToEmbed, imagesAsFiles } = partitionImagesForUpload(\n      images,\n      imagesMarkedUploadAsFile,\n    );\n    onSubmit(message, imagesToEmbed, [...files, ...imagesAsFiles]);\n    clearAllFiles();\n  });\n  const handleSubmit = useModelInterceptor(conversationId, handleAfterModel);\n\n  const handleSuggestionsClick = (suggestion: string) => {\n    handleSubmit(suggestion);\n  };\n\n  const isDisabled =\n    disabled ||\n    curAgentState === AgentState.AWAITING_USER_CONFIRMATION ||\n    isTaskPolling(subConversationTaskStatus);\n\n  return (\n    <div data-testid=\"interactive-chat-box\">\n      <CustomChatInput\n        disabled={isDisabled}\n        isNewConversationPending={disabled}\n        onSubmit={handleSubmit}\n        onFilesPaste={handleUpload}\n      />\n      <div className=\"mt-3 pb-3\">\n        <GitControlBar onSuggestionsClick={handleSuggestionsClick} />\n      </div>\n    </div>\n  );\n}\n"],"mappings":"kvBAmBA,SAAgB,EAAmB,CACjC,WACA,WAAW,IACe,CAC1B,GAAM,CACJ,SACA,QACA,2BACA,gBACA,yBACE,EAAA,sBAAsB,CACpB,CAAE,iBAAkB,EAAA,eAAe,CACnC,CAAE,KAAM,GAAiB,EAAA,uBAAuB,CAChD,CAAE,eAAgB,GAAwB,EAAA,2BAA2B,CACrE,EAAiB,GAAuB,GAAc,IAAM,KAE5D,CAAE,WAAY,GAClB,EAAA,8BACE,EACA,GAAc,IAAM,KACrB,CAEG,CAAE,gBAAiB,EAAA,yBAAyB,CAU5C,EAAe,EAAA,oBAAoB,EARhB,EAAA,kBAAkB,EAAiB,GAAY,CACtE,GAAM,CAAE,gBAAe,iBAAkB,EAAA,yBACvC,EACA,EACD,CACD,EAAS,EAAS,EAAe,CAAC,GAAG,EAAO,GAAG,EAAc,CAAC,CAC9D,GAAe,EAEwC,CAAiB,CAW1E,OACE,EAAA,EAAA,MAAC,MAAD,CAAK,cAAY,gCAAjB,EACE,EAAA,EAAA,KAAC,EAAA,gBAAD,CACE,SAPJ,GACA,IAAkB,EAAA,WAAW,4BAC7B,EAAA,cAAc,EAA0B,CAMpC,yBAA0B,EAC1B,SAAU,EACV,aAAc,EACd,CAAA,EACF,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,sBACb,EAAA,EAAA,KAAC,EAAA,cAAD,CAAe,mBAlBW,GAAuB,CACrD,EAAa,EAAW,EAiByC,CAAA,CACzD,CAAA,CACF"}
+{"version":3,"file":"interactive-chat-box.cjs","names":[],"sources":["../../../../src/components/features/chat/interactive-chat-box.tsx"],"sourcesContent":["import { CustomChatInput } from \"./custom-chat-input\";\nimport { useBtwInterceptor } from \"#/hooks/chat/use-btw-interceptor\";\nimport { useGoalInterceptor } from \"#/hooks/chat/use-goal-interceptor\";\nimport { useModelInterceptor } from \"#/hooks/chat/use-model-interceptor\";\nimport { useChatAttachmentUpload } from \"#/hooks/chat/use-chat-attachment-upload\";\nimport { AgentState } from \"#/types/agent-state\";\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useOptionalConversationId } from \"#/hooks/use-conversation-id\";\nimport { GitControlBar } from \"./git-control-bar\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { useSubConversationTaskPolling } from \"#/hooks/query/use-sub-conversation-task-polling\";\nimport { partitionImagesForUpload } from \"#/components/features/chat/utils/chat-input.utils\";\nimport { isTaskPolling } from \"#/utils/utils\";\n\ninterface InteractiveChatBoxProps {\n  onSubmit: (message: string, images: File[], files: File[]) => void;\n  disabled?: boolean;\n}\n\nexport function InteractiveChatBox({\n  onSubmit,\n  disabled = false,\n}: InteractiveChatBoxProps) {\n  const {\n    images,\n    files,\n    imagesMarkedUploadAsFile,\n    clearAllFiles,\n    subConversationTaskId,\n  } = useConversationStore();\n  const { curAgentState } = useAgentState();\n  const { data: conversation } = useActiveConversation();\n  const { conversationId: routeConversationId } = useOptionalConversationId();\n  const conversationId = routeConversationId ?? conversation?.id ?? null;\n\n  const { taskStatus: subConversationTaskStatus } =\n    useSubConversationTaskPolling(\n      subConversationTaskId,\n      conversation?.id || null,\n    );\n\n  const { handleUpload } = useChatAttachmentUpload();\n\n  const handleAfterGoal = useBtwInterceptor(conversationId, (message) => {\n    const { imagesToEmbed, imagesAsFiles } = partitionImagesForUpload(\n      images,\n      imagesMarkedUploadAsFile,\n    );\n    onSubmit(message, imagesToEmbed, [...files, ...imagesAsFiles]);\n    clearAllFiles();\n  });\n  const handleAfterModel = useGoalInterceptor(conversationId, handleAfterGoal);\n  const handleSubmit = useModelInterceptor(conversationId, handleAfterModel);\n\n  const handleSuggestionsClick = (suggestion: string) => {\n    handleSubmit(suggestion);\n  };\n\n  const isDisabled =\n    disabled ||\n    curAgentState === AgentState.AWAITING_USER_CONFIRMATION ||\n    isTaskPolling(subConversationTaskStatus);\n\n  return (\n    <div data-testid=\"interactive-chat-box\">\n      <CustomChatInput\n        disabled={isDisabled}\n        isNewConversationPending={disabled}\n        onSubmit={handleSubmit}\n        onFilesPaste={handleUpload}\n      />\n      <div className=\"mt-3 pb-3\">\n        <GitControlBar onSuggestionsClick={handleSuggestionsClick} />\n      </div>\n    </div>\n  );\n}\n"],"mappings":"4yBAoBA,SAAgB,EAAmB,CACjC,WACA,WAAW,IACe,CAC1B,GAAM,CACJ,SACA,QACA,2BACA,gBACA,yBACE,EAAA,sBAAsB,CACpB,CAAE,iBAAkB,EAAA,eAAe,CACnC,CAAE,KAAM,GAAiB,EAAA,uBAAuB,CAChD,CAAE,eAAgB,GAAwB,EAAA,2BAA2B,CACrE,EAAiB,GAAuB,GAAc,IAAM,KAE5D,CAAE,WAAY,GAClB,EAAA,8BACE,EACA,GAAc,IAAM,KACrB,CAEG,CAAE,gBAAiB,EAAA,yBAAyB,CAW5C,EAAe,EAAA,oBAAoB,EADhB,EAAA,mBAAmB,EARpB,EAAA,kBAAkB,EAAiB,GAAY,CACrE,GAAM,CAAE,gBAAe,iBAAkB,EAAA,yBACvC,EACA,EACD,CACD,EAAS,EAAS,EAAe,CAAC,GAAG,EAAO,GAAG,EAAc,CAAC,CAC9D,GAAe,EAE2C,CACH,CAAiB,CAW1E,OACE,EAAA,EAAA,MAAC,MAAD,CAAK,cAAY,gCAAjB,EACE,EAAA,EAAA,KAAC,EAAA,gBAAD,CACE,SAPJ,GACA,IAAkB,EAAA,WAAW,4BAC7B,EAAA,cAAc,EAA0B,CAMpC,yBAA0B,EAC1B,SAAU,EACV,aAAc,EACd,CAAA,EACF,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,sBACb,EAAA,EAAA,KAAC,EAAA,cAAD,CAAe,mBAlBW,GAAuB,CACrD,EAAa,EAAW,EAiByC,CAAA,CACzD,CAAA,CACF"}

package/dist/components/features/chat/interactive-chat-box.js

@@ -8,32 +8,33 @@ import { partitionImagesForUpload as o } from "./utils/chat-input.utils.js";
 import { useSubConversationTaskPolling as s } from "../../../hooks/query/use-sub-conversation-task-polling.js";
 import { CustomChatInput as c } from "./custom-chat-input.js";
 import { useBtwInterceptor as l } from "../../../hooks/chat/use-btw-interceptor.js";
-import { useModelInterceptor as u } from "../../../hooks/chat/use-model-interceptor.js";
-import { useChatAttachmentUpload as d } from "../../../hooks/chat/use-chat-attachment-upload.js";
-import { GitControlBar as f } from "./git-control-bar.js";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { useGoalInterceptor as u } from "../../../hooks/chat/use-goal-interceptor.js";
+import { useModelInterceptor as d } from "../../../hooks/chat/use-model-interceptor.js";
+import { useChatAttachmentUpload as f } from "../../../hooks/chat/use-chat-attachment-upload.js";
+import { GitControlBar as p } from "./git-control-bar.js";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/components/features/chat/interactive-chat-box.tsx
-function h({ onSubmit: h, disabled: g = !1 }) {
-	let { images: _, files: v, imagesMarkedUploadAsFile: y, clearAllFiles: b, subConversationTaskId: x } = r(), { curAgentState: S } = a(), { data: C } = i(), { conversationId: w } = n(), T = w ?? C?.id ?? null, { taskStatus: E } = s(x, C?.id || null), { handleUpload: D } = d(), O = u(T, l(T, (e) => {
-		let { imagesToEmbed: t, imagesAsFiles: n } = o(_, y);
-		h(e, t, [...v, ...n]), b();
-	}));
-	return /* @__PURE__ */ m("div", {
+function g({ onSubmit: g, disabled: _ = !1 }) {
+	let { images: v, files: y, imagesMarkedUploadAsFile: b, clearAllFiles: x, subConversationTaskId: S } = r(), { curAgentState: C } = a(), { data: w } = i(), { conversationId: T } = n(), E = T ?? w?.id ?? null, { taskStatus: D } = s(S, w?.id || null), { handleUpload: O } = f(), k = d(E, u(E, l(E, (e) => {
+		let { imagesToEmbed: t, imagesAsFiles: n } = o(v, b);
+		g(e, t, [...y, ...n]), x();
+	})));
+	return /* @__PURE__ */ h("div", {
 		"data-testid": "interactive-chat-box",
-		children: [/* @__PURE__ */ p(c, {
-			disabled: g || S === e.AWAITING_USER_CONFIRMATION || t(E),
-			isNewConversationPending: g,
-			onSubmit: O,
-			onFilesPaste: D
-		}), /* @__PURE__ */ p("div", {
+		children: [/* @__PURE__ */ m(c, {
+			disabled: _ || C === e.AWAITING_USER_CONFIRMATION || t(D),
+			isNewConversationPending: _,
+			onSubmit: k,
+			onFilesPaste: O
+		}), /* @__PURE__ */ m("div", {
 			className: "mt-3 pb-3",
-			children: /* @__PURE__ */ p(f, { onSuggestionsClick: (e) => {
-				O(e);
+			children: /* @__PURE__ */ m(p, { onSuggestionsClick: (e) => {
+				k(e);
 			} })
 		})]
 	});
 }
 //#endregion
-export { h as InteractiveChatBox };
+export { g as InteractiveChatBox };
 
 //# sourceMappingURL=interactive-chat-box.js.map

package/dist/components/features/chat/interactive-chat-box.js.map

@@ -1 +1 @@
-{"version":3,"file":"interactive-chat-box.js","names":[],"sources":["../../../../src/components/features/chat/interactive-chat-box.tsx"],"sourcesContent":["import { CustomChatInput } from \"./custom-chat-input\";\nimport { useBtwInterceptor } from \"#/hooks/chat/use-btw-interceptor\";\nimport { useModelInterceptor } from \"#/hooks/chat/use-model-interceptor\";\nimport { useChatAttachmentUpload } from \"#/hooks/chat/use-chat-attachment-upload\";\nimport { AgentState } from \"#/types/agent-state\";\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useOptionalConversationId } from \"#/hooks/use-conversation-id\";\nimport { GitControlBar } from \"./git-control-bar\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { useSubConversationTaskPolling } from \"#/hooks/query/use-sub-conversation-task-polling\";\nimport { partitionImagesForUpload } from \"#/components/features/chat/utils/chat-input.utils\";\nimport { isTaskPolling } from \"#/utils/utils\";\n\ninterface InteractiveChatBoxProps {\n  onSubmit: (message: string, images: File[], files: File[]) => void;\n  disabled?: boolean;\n}\n\nexport function InteractiveChatBox({\n  onSubmit,\n  disabled = false,\n}: InteractiveChatBoxProps) {\n  const {\n    images,\n    files,\n    imagesMarkedUploadAsFile,\n    clearAllFiles,\n    subConversationTaskId,\n  } = useConversationStore();\n  const { curAgentState } = useAgentState();\n  const { data: conversation } = useActiveConversation();\n  const { conversationId: routeConversationId } = useOptionalConversationId();\n  const conversationId = routeConversationId ?? conversation?.id ?? null;\n\n  const { taskStatus: subConversationTaskStatus } =\n    useSubConversationTaskPolling(\n      subConversationTaskId,\n      conversation?.id || null,\n    );\n\n  const { handleUpload } = useChatAttachmentUpload();\n\n  const handleAfterModel = useBtwInterceptor(conversationId, (message) => {\n    const { imagesToEmbed, imagesAsFiles } = partitionImagesForUpload(\n      images,\n      imagesMarkedUploadAsFile,\n    );\n    onSubmit(message, imagesToEmbed, [...files, ...imagesAsFiles]);\n    clearAllFiles();\n  });\n  const handleSubmit = useModelInterceptor(conversationId, handleAfterModel);\n\n  const handleSuggestionsClick = (suggestion: string) => {\n    handleSubmit(suggestion);\n  };\n\n  const isDisabled =\n    disabled ||\n    curAgentState === AgentState.AWAITING_USER_CONFIRMATION ||\n    isTaskPolling(subConversationTaskStatus);\n\n  return (\n    <div data-testid=\"interactive-chat-box\">\n      <CustomChatInput\n        disabled={isDisabled}\n        isNewConversationPending={disabled}\n        onSubmit={handleSubmit}\n        onFilesPaste={handleUpload}\n      />\n      <div className=\"mt-3 pb-3\">\n        <GitControlBar onSuggestionsClick={handleSuggestionsClick} />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAmBA,SAAgB,EAAmB,EACjC,aACA,cAAW,MACe;CAC1B,IAAM,EACJ,WACA,UACA,6BACA,kBACA,6BACE,GAAsB,EACpB,EAAE,qBAAkB,GAAe,EACnC,EAAE,MAAM,MAAiB,GAAuB,EAChD,EAAE,gBAAgB,MAAwB,GAA2B,EACrE,IAAiB,KAAuB,GAAc,MAAM,MAE5D,EAAE,YAAY,MAClB,EACE,GACA,GAAc,MAAM,KACrB,EAEG,EAAE,oBAAiB,GAAyB,EAU5C,IAAe,EAAoB,GARhB,EAAkB,IAAiB,MAAY;EACtE,IAAM,EAAE,kBAAe,qBAAkB,EACvC,GACA,EACD;AAED,EADA,EAAS,GAAS,GAAe,CAAC,GAAG,GAAO,GAAG,EAAc,CAAC,EAC9D,GAAe;GAEwC,CAAiB;AAW1E,QACE,kBAAC,OAAD;EAAK,eAAY;YAAjB,CACE,kBAAC,GAAD;GACE,UAPJ,KACA,MAAkB,EAAW,8BAC7B,EAAc,EAA0B;GAMpC,0BAA0B;GAC1B,UAAU;GACV,cAAc;GACd,CAAA,EACF,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,GAAD,EAAe,qBAlBW,MAAuB;AACrD,MAAa,EAAW;MAiByC,CAAA;GACzD,CAAA,CACF"}
+{"version":3,"file":"interactive-chat-box.js","names":[],"sources":["../../../../src/components/features/chat/interactive-chat-box.tsx"],"sourcesContent":["import { CustomChatInput } from \"./custom-chat-input\";\nimport { useBtwInterceptor } from \"#/hooks/chat/use-btw-interceptor\";\nimport { useGoalInterceptor } from \"#/hooks/chat/use-goal-interceptor\";\nimport { useModelInterceptor } from \"#/hooks/chat/use-model-interceptor\";\nimport { useChatAttachmentUpload } from \"#/hooks/chat/use-chat-attachment-upload\";\nimport { AgentState } from \"#/types/agent-state\";\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useOptionalConversationId } from \"#/hooks/use-conversation-id\";\nimport { GitControlBar } from \"./git-control-bar\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { useSubConversationTaskPolling } from \"#/hooks/query/use-sub-conversation-task-polling\";\nimport { partitionImagesForUpload } from \"#/components/features/chat/utils/chat-input.utils\";\nimport { isTaskPolling } from \"#/utils/utils\";\n\ninterface InteractiveChatBoxProps {\n  onSubmit: (message: string, images: File[], files: File[]) => void;\n  disabled?: boolean;\n}\n\nexport function InteractiveChatBox({\n  onSubmit,\n  disabled = false,\n}: InteractiveChatBoxProps) {\n  const {\n    images,\n    files,\n    imagesMarkedUploadAsFile,\n    clearAllFiles,\n    subConversationTaskId,\n  } = useConversationStore();\n  const { curAgentState } = useAgentState();\n  const { data: conversation } = useActiveConversation();\n  const { conversationId: routeConversationId } = useOptionalConversationId();\n  const conversationId = routeConversationId ?? conversation?.id ?? null;\n\n  const { taskStatus: subConversationTaskStatus } =\n    useSubConversationTaskPolling(\n      subConversationTaskId,\n      conversation?.id || null,\n    );\n\n  const { handleUpload } = useChatAttachmentUpload();\n\n  const handleAfterGoal = useBtwInterceptor(conversationId, (message) => {\n    const { imagesToEmbed, imagesAsFiles } = partitionImagesForUpload(\n      images,\n      imagesMarkedUploadAsFile,\n    );\n    onSubmit(message, imagesToEmbed, [...files, ...imagesAsFiles]);\n    clearAllFiles();\n  });\n  const handleAfterModel = useGoalInterceptor(conversationId, handleAfterGoal);\n  const handleSubmit = useModelInterceptor(conversationId, handleAfterModel);\n\n  const handleSuggestionsClick = (suggestion: string) => {\n    handleSubmit(suggestion);\n  };\n\n  const isDisabled =\n    disabled ||\n    curAgentState === AgentState.AWAITING_USER_CONFIRMATION ||\n    isTaskPolling(subConversationTaskStatus);\n\n  return (\n    <div data-testid=\"interactive-chat-box\">\n      <CustomChatInput\n        disabled={isDisabled}\n        isNewConversationPending={disabled}\n        onSubmit={handleSubmit}\n        onFilesPaste={handleUpload}\n      />\n      <div className=\"mt-3 pb-3\">\n        <GitControlBar onSuggestionsClick={handleSuggestionsClick} />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAoBA,SAAgB,EAAmB,EACjC,aACA,cAAW,MACe;CAC1B,IAAM,EACJ,WACA,UACA,6BACA,kBACA,6BACE,GAAsB,EACpB,EAAE,qBAAkB,GAAe,EACnC,EAAE,MAAM,MAAiB,GAAuB,EAChD,EAAE,gBAAgB,MAAwB,GAA2B,EACrE,IAAiB,KAAuB,GAAc,MAAM,MAE5D,EAAE,YAAY,MAClB,EACE,GACA,GAAc,MAAM,KACrB,EAEG,EAAE,oBAAiB,GAAyB,EAW5C,IAAe,EAAoB,GADhB,EAAmB,GARpB,EAAkB,IAAiB,MAAY;EACrE,IAAM,EAAE,kBAAe,qBAAkB,EACvC,GACA,EACD;AAED,EADA,EAAS,GAAS,GAAe,CAAC,GAAG,GAAO,GAAG,EAAc,CAAC,EAC9D,GAAe;GAE2C,CACH,CAAiB;AAW1E,QACE,kBAAC,OAAD;EAAK,eAAY;YAAjB,CACE,kBAAC,GAAD;GACE,UAPJ,KACA,MAAkB,EAAW,8BAC7B,EAAc,EAA0B;GAMpC,0BAA0B;GAC1B,UAAU;GACV,cAAc;GACd,CAAA,EACF,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,GAAD,EAAe,qBAlBW,MAAuB;AACrD,MAAa,EAAW;MAiByC,CAAA;GACzD,CAAA,CACF"}

package/dist/components/features/chat/tool-visualizers/primitives/code-block.cjs

@@ -1,2 +1,2 @@
-const e=require(`../../../../../_virtual/_rolldown/runtime.cjs`),t=require(`../../../../../node_modules/react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus.cjs`),n=require(`../../../../shared/buttons/copyable-content-wrapper.cjs`),r=require(`../../../../../node_modules/react-syntax-highlighter/dist/esm/prism-light.cjs`);require(`../../../markdown/syntax-highlighter.cjs`);const i=require(`../../../../conversation-events/chat/event-content-helpers/shared.cjs`);let a=require(`react`);a=e.__toESM(a,1);let o=require(`react/jsx-runtime`);function s({code:e,language:a,copy:s=!0}){let c=(0,o.jsx)(r.default,{className:`rounded-lg text-xs`,style:t.default,language:a,PreTag:`div`,children:e.length>1e3?`${e.slice(0,i.MAX_CONTENT_LENGTH)}…`:e});return s?(0,o.jsx)(n.CopyableContentWrapper,{text:e,children:c}):c}exports.CodeBlock=s;
+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/react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus.cjs`),i=require(`../../../../shared/buttons/copyable-content-wrapper.cjs`),a=require(`../../../../../node_modules/react-syntax-highlighter/dist/esm/prism-light.cjs`);require(`../../../markdown/syntax-highlighter.cjs`);const o=require(`../../../../conversation-events/chat/event-content-helpers/shared.cjs`);let s=require(`react`);s=e.__toESM(s,1);let c=require(`react/jsx-runtime`);function l({code:e,language:l,copy:u=!0,placeholder:d,expandable:f=!1,wrapLongLines:p=!1}){let{t:m}=t.useTranslation(`openhands`),[h,g]=s.default.useState(!1),_=e.length>o.MAX_CONTENT_LENGTH,v=(_&&!(f&&h)?`${e.slice(0,1e3)}…`:e).trim()||d||``,y=u&&e.trim().length>0,b=m(h?n.I18nKey.BUTTON$COLLAPSE:n.I18nKey.BUTTON$EXPAND),x=(0,c.jsx)(a.default,{className:`rounded-lg text-xs`,style:r.default,language:l,PreTag:`div`,wrapLongLines:p,customStyle:p?{whiteSpace:`pre-wrap`}:void 0,codeTagProps:p?{style:{whiteSpace:`pre-wrap`}}:void 0,children:v});return(0,c.jsxs)(`div`,{className:`flex flex-col gap-1`,children:[y?(0,c.jsx)(i.CopyableContentWrapper,{text:e,children:x}):x,f&&_&&(0,c.jsx)(`button`,{type:`button`,onClick:()=>g(e=>!e),className:`self-start text-xs text-muted transition-colors hover:text-white hover:underline`,children:b})]})}exports.CodeBlock=l;
 //# sourceMappingURL=code-block.cjs.map

package/dist/components/features/chat/tool-visualizers/primitives/code-block.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"code-block.cjs","names":[],"sources":["../../../../../../src/components/features/chat/tool-visualizers/primitives/code-block.tsx"],"sourcesContent":["import React from \"react\";\nimport { vscDarkPlus } from \"react-syntax-highlighter/dist/esm/styles/prism\";\nimport { SyntaxHighlighter } from \"../../../markdown/syntax-highlighter\";\nimport { CopyableContentWrapper } from \"#/components/shared/buttons/copyable-content-wrapper\";\nimport { MAX_CONTENT_LENGTH } from \"#/components/conversation-events/chat/event-content-helpers/shared\";\n\ninterface CodeBlockProps {\n  code: string;\n  /** Prism language hint (e.g. \"bash\", \"python\"). */\n  language?: string;\n  /** Show a copy button on hover. Defaults to true. */\n  copy?: boolean;\n}\n\n/**\n * Syntax-highlighted code block with an optional hover copy button. Long\n * content is truncated to the same limit the markdown path uses; the copy\n * button always yields the full, untruncated text.\n */\nexport function CodeBlock({ code, language, copy = true }: CodeBlockProps) {\n  const display =\n    code.length > MAX_CONTENT_LENGTH\n      ? `${code.slice(0, MAX_CONTENT_LENGTH)}…`\n      : code;\n\n  const block = (\n    <SyntaxHighlighter\n      className=\"rounded-lg text-xs\"\n      style={vscDarkPlus}\n      language={language}\n      PreTag=\"div\"\n    >\n      {display}\n    </SyntaxHighlighter>\n  );\n\n  return copy ? (\n    <CopyableContentWrapper text={code}>{block}</CopyableContentWrapper>\n  ) : (\n    block\n  );\n}\n"],"mappings":"miBAmBA,SAAgB,EAAU,CAAE,OAAM,WAAU,OAAO,IAAwB,CAMzE,IAAM,GACJ,EAAA,EAAA,KAAC,EAAA,QAAD,CACE,UAAU,qBACV,MAAO,EAAA,QACG,WACV,OAAO,eATT,EAAK,OAAA,IACD,GAAG,EAAK,MAAM,EAAG,EAAA,mBAAmB,CAAC,GACrC,EAUgB,CAAA,CAGtB,OAAO,GACL,EAAA,EAAA,KAAC,EAAA,uBAAD,CAAwB,KAAM,WAAO,EAA+B,CAAA,CAEpE"}
+{"version":3,"file":"code-block.cjs","names":[],"sources":["../../../../../../src/components/features/chat/tool-visualizers/primitives/code-block.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { vscDarkPlus } from \"react-syntax-highlighter/dist/esm/styles/prism\";\nimport { SyntaxHighlighter } from \"../../../markdown/syntax-highlighter\";\nimport { CopyableContentWrapper } from \"#/components/shared/buttons/copyable-content-wrapper\";\nimport { MAX_CONTENT_LENGTH } from \"#/components/conversation-events/chat/event-content-helpers/shared\";\nimport { I18nKey } from \"#/i18n/declaration\";\n\ninterface CodeBlockProps {\n  code: string;\n  /** Prism language hint (e.g. \"bash\", \"python\"). */\n  language?: string;\n  /** Show a copy button on hover. Defaults to true. */\n  copy?: boolean;\n  /** Text shown when code is empty. */\n  placeholder?: string;\n  /** Let truncated content be expanded inline. Defaults to false. */\n  expandable?: boolean;\n  /** Wrap long lines instead of horizontal-only scrolling. Defaults to false. */\n  wrapLongLines?: boolean;\n}\n\n/**\n * Syntax-highlighted code block with an optional hover copy button. Long\n * content is truncated to the same limit the markdown path uses, optionally\n * with an inline expand control. The copy button always yields the full,\n * untruncated text.\n */\nexport function CodeBlock({\n  code,\n  language,\n  copy = true,\n  placeholder,\n  expandable = false,\n  wrapLongLines = false,\n}: CodeBlockProps) {\n  const { t } = useTranslation(\"openhands\");\n  const [isExpanded, setIsExpanded] = React.useState(false);\n  const isTruncated = code.length > MAX_CONTENT_LENGTH;\n  const display =\n    isTruncated && !(expandable && isExpanded)\n      ? `${code.slice(0, MAX_CONTENT_LENGTH)}…`\n      : code;\n  const text = display.trim() || placeholder || \"\";\n  const canCopy = copy && code.trim().length > 0;\n  const toggleLabel = isExpanded\n    ? t(I18nKey.BUTTON$COLLAPSE)\n    : t(I18nKey.BUTTON$EXPAND);\n\n  const block = (\n    <SyntaxHighlighter\n      className=\"rounded-lg text-xs\"\n      style={vscDarkPlus}\n      language={language}\n      PreTag=\"div\"\n      wrapLongLines={wrapLongLines}\n      customStyle={wrapLongLines ? { whiteSpace: \"pre-wrap\" } : undefined}\n      codeTagProps={\n        wrapLongLines ? { style: { whiteSpace: \"pre-wrap\" } } : undefined\n      }\n    >\n      {text}\n    </SyntaxHighlighter>\n  );\n\n  return (\n    <div className=\"flex flex-col gap-1\">\n      {canCopy ? (\n        <CopyableContentWrapper text={code}>{block}</CopyableContentWrapper>\n      ) : (\n        block\n      )}\n      {expandable && isTruncated && (\n        <button\n          type=\"button\"\n          onClick={() => setIsExpanded((prev) => !prev)}\n          className=\"self-start text-xs text-muted transition-colors hover:text-white hover:underline\"\n        >\n          {toggleLabel}\n        </button>\n      )}\n    </div>\n  );\n}\n"],"mappings":"sqBA4BA,SAAgB,EAAU,CACxB,OACA,WACA,OAAO,GACP,cACA,aAAa,GACb,gBAAgB,IACC,CACjB,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CACnC,CAAC,EAAY,GAAiB,EAAA,QAAM,SAAS,GAAM,CACnD,EAAc,EAAK,OAAS,EAAA,mBAK5B,GAHJ,GAAe,EAAE,GAAc,GAC3B,GAAG,EAAK,MAAM,EAAA,IAAsB,CAAC,GACrC,GACe,MAAM,EAAI,GAAe,GACxC,EAAU,GAAQ,EAAK,MAAM,CAAC,OAAS,EACvC,EACF,EADgB,EACd,EAAA,QAAQ,gBACR,EAAA,QAAQ,cAAc,CAEtB,GACJ,EAAA,EAAA,KAAC,EAAA,QAAD,CACE,UAAU,qBACV,MAAO,EAAA,QACG,WACV,OAAO,MACQ,gBACf,YAAa,EAAgB,CAAE,WAAY,WAAY,CAAG,IAAA,GAC1D,aACE,EAAgB,CAAE,MAAO,CAAE,WAAY,WAAY,CAAE,CAAG,IAAA,YAGzD,EACiB,CAAA,CAGtB,OACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,+BAAf,CACG,GACC,EAAA,EAAA,KAAC,EAAA,uBAAD,CAAwB,KAAM,WAAO,EAA+B,CAAA,CAEpE,EAED,GAAc,IACb,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,YAAe,EAAe,GAAS,CAAC,EAAK,CAC7C,UAAU,4FAET,EACM,CAAA,CAEP"}

package/dist/components/features/chat/tool-visualizers/primitives/code-block.d.ts

@@ -4,11 +4,18 @@ interface CodeBlockProps {
     language?: string;
     /** Show a copy button on hover. Defaults to true. */
     copy?: boolean;
+    /** Text shown when code is empty. */
+    placeholder?: string;
+    /** Let truncated content be expanded inline. Defaults to false. */
+    expandable?: boolean;
+    /** Wrap long lines instead of horizontal-only scrolling. Defaults to false. */
+    wrapLongLines?: boolean;
 }
 /**
  * Syntax-highlighted code block with an optional hover copy button. Long
- * content is truncated to the same limit the markdown path uses; the copy
- * button always yields the full, untruncated text.
+ * content is truncated to the same limit the markdown path uses, optionally
+ * with an inline expand control. The copy button always yields the full,
+ * untruncated text.
  */
-export declare function CodeBlock({ code, language, copy }: CodeBlockProps): import("react/jsx-runtime").JSX.Element;
+export declare function CodeBlock({ code, language, copy, placeholder, expandable, wrapLongLines, }: CodeBlockProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/features/chat/tool-visualizers/primitives/code-block.js

@@ -1,25 +1,38 @@
-import e from "../../../../../node_modules/react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus.js";
-import { CopyableContentWrapper as t } from "../../../../shared/buttons/copyable-content-wrapper.js";
-import n from "../../../../../node_modules/react-syntax-highlighter/dist/esm/prism-light.js";
+import { useTranslation as e } from "../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+import { I18nKey as t } from "../../../../../i18n/declaration.js";
+import n from "../../../../../node_modules/react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus.js";
+import { CopyableContentWrapper as r } from "../../../../shared/buttons/copyable-content-wrapper.js";
+import i from "../../../../../node_modules/react-syntax-highlighter/dist/esm/prism-light.js";
 import "../../../markdown/syntax-highlighter.js";
-import { MAX_CONTENT_LENGTH as r } from "../../../../conversation-events/chat/event-content-helpers/shared.js";
-import "react";
-import { jsx as i } from "react/jsx-runtime";
+import { MAX_CONTENT_LENGTH as a } from "../../../../conversation-events/chat/event-content-helpers/shared.js";
+import o from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/components/features/chat/tool-visualizers/primitives/code-block.tsx
-function a({ code: a, language: o, copy: s = !0 }) {
-	let c = /* @__PURE__ */ i(n, {
+function l({ code: l, language: u, copy: d = !0, placeholder: f, expandable: p = !1, wrapLongLines: m = !1 }) {
+	let { t: h } = e("openhands"), [g, _] = o.useState(!1), v = l.length > a, y = (v && !(p && g) ? `${l.slice(0, 1e3)}…` : l).trim() || f || "", b = d && l.trim().length > 0, x = h(g ? t.BUTTON$COLLAPSE : t.BUTTON$EXPAND), S = /* @__PURE__ */ s(i, {
 		className: "rounded-lg text-xs",
-		style: e,
-		language: o,
+		style: n,
+		language: u,
 		PreTag: "div",
-		children: a.length > 1e3 ? `${a.slice(0, r)}…` : a
+		wrapLongLines: m,
+		customStyle: m ? { whiteSpace: "pre-wrap" } : void 0,
+		codeTagProps: m ? { style: { whiteSpace: "pre-wrap" } } : void 0,
+		children: y
+	});
+	return /* @__PURE__ */ c("div", {
+		className: "flex flex-col gap-1",
+		children: [b ? /* @__PURE__ */ s(r, {
+			text: l,
+			children: S
+		}) : S, p && v && /* @__PURE__ */ s("button", {
+			type: "button",
+			onClick: () => _((e) => !e),
+			className: "self-start text-xs text-muted transition-colors hover:text-white hover:underline",
+			children: x
+		})]
 	});
-	return s ? /* @__PURE__ */ i(t, {
-		text: a,
-		children: c
-	}) : c;
 }
 //#endregion
-export { a as CodeBlock };
+export { l as CodeBlock };
 
 //# sourceMappingURL=code-block.js.map

package/dist/components/features/chat/tool-visualizers/primitives/code-block.js.map

@@ -1 +1 @@
-{"version":3,"file":"code-block.js","names":[],"sources":["../../../../../../src/components/features/chat/tool-visualizers/primitives/code-block.tsx"],"sourcesContent":["import React from \"react\";\nimport { vscDarkPlus } from \"react-syntax-highlighter/dist/esm/styles/prism\";\nimport { SyntaxHighlighter } from \"../../../markdown/syntax-highlighter\";\nimport { CopyableContentWrapper } from \"#/components/shared/buttons/copyable-content-wrapper\";\nimport { MAX_CONTENT_LENGTH } from \"#/components/conversation-events/chat/event-content-helpers/shared\";\n\ninterface CodeBlockProps {\n  code: string;\n  /** Prism language hint (e.g. \"bash\", \"python\"). */\n  language?: string;\n  /** Show a copy button on hover. Defaults to true. */\n  copy?: boolean;\n}\n\n/**\n * Syntax-highlighted code block with an optional hover copy button. Long\n * content is truncated to the same limit the markdown path uses; the copy\n * button always yields the full, untruncated text.\n */\nexport function CodeBlock({ code, language, copy = true }: CodeBlockProps) {\n  const display =\n    code.length > MAX_CONTENT_LENGTH\n      ? `${code.slice(0, MAX_CONTENT_LENGTH)}…`\n      : code;\n\n  const block = (\n    <SyntaxHighlighter\n      className=\"rounded-lg text-xs\"\n      style={vscDarkPlus}\n      language={language}\n      PreTag=\"div\"\n    >\n      {display}\n    </SyntaxHighlighter>\n  );\n\n  return copy ? (\n    <CopyableContentWrapper text={code}>{block}</CopyableContentWrapper>\n  ) : (\n    block\n  );\n}\n"],"mappings":";;;;;;;;AAmBA,SAAgB,EAAU,EAAE,SAAM,aAAU,UAAO,MAAwB;CAMzE,IAAM,IACJ,kBAAC,GAAD;EACE,WAAU;EACV,OAAO;EACG;EACV,QAAO;YATT,EAAK,SAAA,MACD,GAAG,EAAK,MAAM,GAAG,EAAmB,CAAC,KACrC;EAUgB,CAAA;AAGtB,QAAO,IACL,kBAAC,GAAD;EAAwB,MAAM;YAAO;EAA+B,CAAA,GAEpE"}
+{"version":3,"file":"code-block.js","names":[],"sources":["../../../../../../src/components/features/chat/tool-visualizers/primitives/code-block.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { vscDarkPlus } from \"react-syntax-highlighter/dist/esm/styles/prism\";\nimport { SyntaxHighlighter } from \"../../../markdown/syntax-highlighter\";\nimport { CopyableContentWrapper } from \"#/components/shared/buttons/copyable-content-wrapper\";\nimport { MAX_CONTENT_LENGTH } from \"#/components/conversation-events/chat/event-content-helpers/shared\";\nimport { I18nKey } from \"#/i18n/declaration\";\n\ninterface CodeBlockProps {\n  code: string;\n  /** Prism language hint (e.g. \"bash\", \"python\"). */\n  language?: string;\n  /** Show a copy button on hover. Defaults to true. */\n  copy?: boolean;\n  /** Text shown when code is empty. */\n  placeholder?: string;\n  /** Let truncated content be expanded inline. Defaults to false. */\n  expandable?: boolean;\n  /** Wrap long lines instead of horizontal-only scrolling. Defaults to false. */\n  wrapLongLines?: boolean;\n}\n\n/**\n * Syntax-highlighted code block with an optional hover copy button. Long\n * content is truncated to the same limit the markdown path uses, optionally\n * with an inline expand control. The copy button always yields the full,\n * untruncated text.\n */\nexport function CodeBlock({\n  code,\n  language,\n  copy = true,\n  placeholder,\n  expandable = false,\n  wrapLongLines = false,\n}: CodeBlockProps) {\n  const { t } = useTranslation(\"openhands\");\n  const [isExpanded, setIsExpanded] = React.useState(false);\n  const isTruncated = code.length > MAX_CONTENT_LENGTH;\n  const display =\n    isTruncated && !(expandable && isExpanded)\n      ? `${code.slice(0, MAX_CONTENT_LENGTH)}…`\n      : code;\n  const text = display.trim() || placeholder || \"\";\n  const canCopy = copy && code.trim().length > 0;\n  const toggleLabel = isExpanded\n    ? t(I18nKey.BUTTON$COLLAPSE)\n    : t(I18nKey.BUTTON$EXPAND);\n\n  const block = (\n    <SyntaxHighlighter\n      className=\"rounded-lg text-xs\"\n      style={vscDarkPlus}\n      language={language}\n      PreTag=\"div\"\n      wrapLongLines={wrapLongLines}\n      customStyle={wrapLongLines ? { whiteSpace: \"pre-wrap\" } : undefined}\n      codeTagProps={\n        wrapLongLines ? { style: { whiteSpace: \"pre-wrap\" } } : undefined\n      }\n    >\n      {text}\n    </SyntaxHighlighter>\n  );\n\n  return (\n    <div className=\"flex flex-col gap-1\">\n      {canCopy ? (\n        <CopyableContentWrapper text={code}>{block}</CopyableContentWrapper>\n      ) : (\n        block\n      )}\n      {expandable && isTruncated && (\n        <button\n          type=\"button\"\n          onClick={() => setIsExpanded((prev) => !prev)}\n          className=\"self-start text-xs text-muted transition-colors hover:text-white hover:underline\"\n        >\n          {toggleLabel}\n        </button>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;AA4BA,SAAgB,EAAU,EACxB,SACA,aACA,UAAO,IACP,gBACA,gBAAa,IACb,mBAAgB,MACC;CACjB,IAAM,EAAE,SAAM,EAAe,YAAY,EACnC,CAAC,GAAY,KAAiB,EAAM,SAAS,GAAM,EACnD,IAAc,EAAK,SAAS,GAK5B,KAHJ,KAAe,EAAE,KAAc,KAC3B,GAAG,EAAK,MAAM,GAAA,IAAsB,CAAC,KACrC,GACe,MAAM,IAAI,KAAe,IACxC,IAAU,KAAQ,EAAK,MAAM,CAAC,SAAS,GACvC,IACF,EADgB,IACd,EAAQ,kBACR,EAAQ,cAAc,EAEtB,IACJ,kBAAC,GAAD;EACE,WAAU;EACV,OAAO;EACG;EACV,QAAO;EACQ;EACf,aAAa,IAAgB,EAAE,YAAY,YAAY,GAAG,KAAA;EAC1D,cACE,IAAgB,EAAE,OAAO,EAAE,YAAY,YAAY,EAAE,GAAG,KAAA;YAGzD;EACiB,CAAA;AAGtB,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACG,IACC,kBAAC,GAAD;GAAwB,MAAM;aAAO;GAA+B,CAAA,GAEpE,GAED,KAAc,KACb,kBAAC,UAAD;GACE,MAAK;GACL,eAAe,GAAe,MAAS,CAAC,EAAK;GAC7C,WAAU;aAET;GACM,CAAA,CAEP"}

package/dist/components/features/chat/tool-visualizers/primitives/output-pane.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`),r=require(`../../../../shared/buttons/copyable-content-wrapper.cjs`),i=require(`../../../../conversation-events/chat/event-content-helpers/shared.cjs`);let a=require(`react`);a=e.__toESM(a,1);let o=require(`react/jsx-runtime`);function s({output:e,exitCode:a,copy:s=!0}){let{t:c}=t.useTranslation(`openhands`),l=(e.length>1e3?`${e.slice(0,i.MAX_CONTENT_LENGTH)}…`:e).trim(),u=a!=null&&a!==0&&a!==-1,d=(0,o.jsx)(`pre`,{className:`overflow-auto whitespace-pre-wrap rounded border border-surface-raised bg-surface-raised p-2 text-xs text-foreground`,children:l||c(n.I18nKey.OBSERVATION$COMMAND_NO_OUTPUT)});return(0,o.jsxs)(`div`,{className:`flex flex-col gap-1`,children:[u&&(0,o.jsx)(`span`,{className:`self-start rounded bg-status-fail-bg px-1.5 py-0.5 font-mono text-xs text-status-fail-text`,children:c(n.I18nKey.OBSERVATION$EXIT_CODE,{code:a})}),s&&l?(0,o.jsx)(r.CopyableContentWrapper,{text:e,children:d}):d]})}exports.OutputPane=s;
+const e=require(`../../../../../_virtual/_rolldown/runtime.cjs`),t=require(`../../../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),n=require(`../../../../../i18n/declaration.cjs`),r=require(`./code-block.cjs`);let i=require(`react`);i=e.__toESM(i,1);let a=require(`react/jsx-runtime`);function o({output:e,exitCode:i,copy:o=!0}){let{t:s}=t.useTranslation(`openhands`);return(0,a.jsxs)(`div`,{className:`flex flex-col gap-1`,children:[i!=null&&i!==0&&i!==-1&&(0,a.jsx)(`span`,{className:`self-start rounded bg-status-fail-bg px-1.5 py-0.5 font-mono text-xs text-status-fail-text`,children:s(n.I18nKey.OBSERVATION$EXIT_CODE,{code:i})}),(0,a.jsx)(r.CodeBlock,{code:e,language:`bash`,copy:o,placeholder:s(n.I18nKey.OBSERVATION$COMMAND_NO_OUTPUT),expandable:!0,wrapLongLines:!0})]})}exports.OutputPane=o;
 //# sourceMappingURL=output-pane.cjs.map

package/dist/components/features/chat/tool-visualizers/primitives/output-pane.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"output-pane.cjs","names":[],"sources":["../../../../../../src/components/features/chat/tool-visualizers/primitives/output-pane.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { CopyableContentWrapper } from \"#/components/shared/buttons/copyable-content-wrapper\";\nimport { MAX_CONTENT_LENGTH } from \"#/components/conversation-events/chat/event-content-helpers/shared\";\n\ninterface OutputPaneProps {\n  output: string;\n  /** Process exit code, when known. `0` and `-1` (timeout) are not badged —\n   *  the card's success indicator already conveys those. */\n  exitCode?: number | null;\n  /** Show a hover copy button that yields the full, untruncated output.\n   *  Defaults to true; suppressed automatically when there is no output. */\n  copy?: boolean;\n}\n\n/**\n * Monospace output block for command results, with a failure exit-code badge\n * and an optional hover copy button. Long content is truncated in the display\n * to the same limit the markdown path uses; the copy button always yields the\n * full, untruncated output.\n */\nexport function OutputPane({ output, exitCode, copy = true }: OutputPaneProps) {\n  const { t } = useTranslation(\"openhands\");\n  const display =\n    output.length > MAX_CONTENT_LENGTH\n      ? `${output.slice(0, MAX_CONTENT_LENGTH)}…`\n      : output;\n  const text = display.trim();\n  const showExitBadge = exitCode != null && exitCode !== 0 && exitCode !== -1;\n\n  const pane = (\n    <pre className=\"overflow-auto whitespace-pre-wrap rounded border border-surface-raised bg-surface-raised p-2 text-xs text-foreground\">\n      {text || t(I18nKey.OBSERVATION$COMMAND_NO_OUTPUT)}\n    </pre>\n  );\n\n  return (\n    <div className=\"flex flex-col gap-1\">\n      {showExitBadge && (\n        <span className=\"self-start rounded bg-status-fail-bg px-1.5 py-0.5 font-mono text-xs text-status-fail-text\">\n          {t(I18nKey.OBSERVATION$EXIT_CODE, { code: exitCode })}\n        </span>\n      )}\n      {copy && text ? (\n        <CopyableContentWrapper text={output}>{pane}</CopyableContentWrapper>\n      ) : (\n        pane\n      )}\n    </div>\n  );\n}\n"],"mappings":"uaAsBA,SAAgB,EAAW,CAAE,SAAQ,WAAU,OAAO,IAAyB,CAC7E,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CAKnC,GAHJ,EAAO,OAAA,IACH,GAAG,EAAO,MAAM,EAAG,EAAA,mBAAmB,CAAC,GACvC,GACe,MAAM,CACrB,EAAgB,GAAY,MAAQ,IAAa,GAAK,IAAa,GAEnE,GACJ,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,gIACZ,GAAQ,EAAE,EAAA,QAAQ,8BAA8B,CAC7C,CAAA,CAGR,OACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,+BAAf,CACG,IACC,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,sGACb,EAAE,EAAA,QAAQ,sBAAuB,CAAE,KAAM,EAAU,CAAC,CAChD,CAAA,CAER,GAAQ,GACP,EAAA,EAAA,KAAC,EAAA,uBAAD,CAAwB,KAAM,WAAS,EAA8B,CAAA,CAErE,EAEE"}
+{"version":3,"file":"output-pane.cjs","names":[],"sources":["../../../../../../src/components/features/chat/tool-visualizers/primitives/output-pane.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { CodeBlock } from \"./code-block\";\n\ninterface OutputPaneProps {\n  output: string;\n  /** Process exit code, when known. `0` and `-1` (timeout) are not badged —\n   *  the card's success indicator already conveys those. */\n  exitCode?: number | null;\n  /** Show a hover copy button that yields the full, untruncated output.\n   *  Defaults to true; suppressed automatically when there is no output. */\n  copy?: boolean;\n}\n\n/**\n * Monospace output block for command results, with a failure exit-code badge\n * and an optional hover copy button. Long content is truncated in the display\n * to the same limit the markdown path uses, with an inline control to reveal\n * the full output. The copy button always yields the untruncated output.\n */\nexport function OutputPane({ output, exitCode, copy = true }: OutputPaneProps) {\n  const { t } = useTranslation(\"openhands\");\n  const showExitBadge = exitCode != null && exitCode !== 0 && exitCode !== -1;\n\n  return (\n    <div className=\"flex flex-col gap-1\">\n      {showExitBadge && (\n        <span className=\"self-start rounded bg-status-fail-bg px-1.5 py-0.5 font-mono text-xs text-status-fail-text\">\n          {t(I18nKey.OBSERVATION$EXIT_CODE, { code: exitCode })}\n        </span>\n      )}\n      <CodeBlock\n        code={output}\n        language=\"bash\"\n        copy={copy}\n        placeholder={t(I18nKey.OBSERVATION$COMMAND_NO_OUTPUT)}\n        expandable\n        wrapLongLines\n      />\n    </div>\n  );\n}\n"],"mappings":"6SAqBA,SAAgB,EAAW,CAAE,SAAQ,WAAU,OAAO,IAAyB,CAC7E,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CAGzC,OACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,+BAAf,CAHoB,GAAY,MAAQ,IAAa,GAAK,IAAa,KAKnE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,sGACb,EAAE,EAAA,QAAQ,sBAAuB,CAAE,KAAM,EAAU,CAAC,CAChD,CAAA,EAET,EAAA,EAAA,KAAC,EAAA,UAAD,CACE,KAAM,EACN,SAAS,OACH,OACN,YAAa,EAAE,EAAA,QAAQ,8BAA8B,CACrD,WAAA,GACA,cAAA,GACA,CAAA,CACE"}

package/dist/components/features/chat/tool-visualizers/primitives/output-pane.d.ts

@@ -10,8 +10,8 @@ interface OutputPaneProps {
 /**
  * Monospace output block for command results, with a failure exit-code badge
  * and an optional hover copy button. Long content is truncated in the display
- * to the same limit the markdown path uses; the copy button always yields the
- * full, untruncated output.
+ * to the same limit the markdown path uses, with an inline control to reveal
+ * the full output. The copy button always yields the untruncated output.
  */
 export declare function OutputPane({ output, exitCode, copy }: OutputPaneProps): import("react/jsx-runtime").JSX.Element;
 export {};