@openhands/agent-canvas 1.13.0 → 1.15.0

package/dist/components/features/conversation/conversation-git-actions-toggle.js

@@ -0,0 +1,60 @@
+import { useTranslation as e } from "../../../node_modules/react-i18next/dist/es/useTranslation.js";
+import { I18nKey as t } from "../../../i18n/declaration.js";
+import { GitCommitHorizontal as n } from "../../../node_modules/lucide-react/dist/esm/icons/git-commit-horizontal.js";
+import { cn as r } from "../../../utils/utils.js";
+import { useActiveConversation as i } from "../../../hooks/query/use-active-conversation.js";
+import { formControlBorderClassName as a, formControlMutedHoverClassName as o, formControlTransitionClassName as s } from "../../../utils/form-control-classes.js";
+import { useIsArchivedConversation as c } from "../../../hooks/use-is-archived-conversation.js";
+import { ConversationGitActionsMenu as l } from "./conversation-git-actions-menu.js";
+import { ChatActionTooltip as u } from "../chat/chat-action-tooltip.js";
+import { useEffect as d, useRef as f, useState as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/components/features/conversation/conversation-git-actions-toggle.tsx
+var g = r("inline-flex h-7 min-h-7 w-fit shrink-0 cursor-pointer items-center justify-center gap-1.5 px-2.5", "rounded-md text-xs font-normal leading-none", a, s, "text-[var(--oh-muted)]", o, "disabled:cursor-not-allowed disabled:opacity-30");
+function _({ className: a }) {
+	let { t: o } = e("openhands"), s = c(), { data: _ } = i(), [v, y] = p(!1), b = f(null), x = _?.git_provider ?? "github";
+	d(() => {
+		if (!v) return;
+		let e = (e) => {
+			e.key === "Escape" && y(!1);
+		};
+		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+	}, [v]);
+	let S = o(t.CONVERSATION$OVERVIEW_DIFF_GIT_ACTIONS), C = /* @__PURE__ */ h("button", {
+		ref: b,
+		type: "button",
+		onClick: () => {
+			s || y((e) => !e);
+		},
+		disabled: s,
+		className: r(g, v && "bg-white/10 text-[var(--oh-foreground)]", s && "cursor-not-allowed opacity-50 hover:bg-transparent hover:text-[var(--oh-muted)]", a),
+		"aria-expanded": v,
+		"aria-haspopup": "menu",
+		"aria-disabled": s,
+		"data-testid": "conversation-git-actions-toggle",
+		children: [/* @__PURE__ */ m(n, {
+			className: "size-4 shrink-0",
+			size: 16,
+			"aria-hidden": !0
+		}), /* @__PURE__ */ m("span", {
+			className: "whitespace-nowrap",
+			children: S
+		})]
+	});
+	return /* @__PURE__ */ h("div", {
+		className: "relative inline-flex items-center self-center",
+		children: [s ? /* @__PURE__ */ m(u, {
+			tooltip: o(t.CONVERSATION$UNAVAILABLE_FOR_ARCHIVES),
+			ariaLabel: o(t.CONVERSATION$UNAVAILABLE_FOR_ARCHIVES),
+			children: C
+		}) : C, v ? /* @__PURE__ */ m(l, {
+			anchorRef: b,
+			gitProvider: x,
+			onClose: () => y(!1)
+		}) : null]
+	});
+}
+//#endregion
+export { _ as ConversationGitActionsToggle };
+
+//# sourceMappingURL=conversation-git-actions-toggle.js.map

package/dist/components/features/conversation/conversation-git-actions-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"conversation-git-actions-toggle.js","names":[],"sources":["../../../../src/components/features/conversation/conversation-git-actions-toggle.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { GitCommitHorizontal } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useIsArchivedConversation } from \"#/hooks/use-is-archived-conversation\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { Provider } from \"#/types/settings\";\nimport { cn } from \"#/utils/utils\";\nimport {\n  formControlBorderClassName,\n  formControlMutedHoverClassName,\n  formControlTransitionClassName,\n} from \"#/utils/form-control-classes\";\nimport { ChatActionTooltip } from \"../chat/chat-action-tooltip\";\nimport { ConversationGitActionsMenu } from \"./conversation-git-actions-menu\";\n\n/** Same 28px height as overview / drawer header icon buttons. */\nconst GIT_ACTIONS_BUTTON_CLASSNAME = cn(\n  \"inline-flex h-7 min-h-7 w-fit shrink-0 cursor-pointer items-center justify-center gap-1.5 px-2.5\",\n  \"rounded-md text-xs font-normal leading-none\",\n  formControlBorderClassName,\n  formControlTransitionClassName,\n  \"text-[var(--oh-muted)]\",\n  formControlMutedHoverClassName,\n  \"disabled:cursor-not-allowed disabled:opacity-30\",\n);\n\ninterface ConversationGitActionsToggleProps {\n  className?: string;\n}\n\n/**\n * Header control left of overview: opens the shared git-actions dropdown\n * (commit / pull / push / create PR / new branch) as chat prompts.\n */\nexport function ConversationGitActionsToggle({\n  className,\n}: ConversationGitActionsToggleProps) {\n  const { t } = useTranslation(\"openhands\");\n  const isArchivedConversation = useIsArchivedConversation();\n  const { data: conversation } = useActiveConversation();\n  const [isGitMenuOpen, setIsGitMenuOpen] = useState(false);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n\n  const gitProvider =\n    (conversation?.git_provider as Provider | undefined) ?? \"github\";\n\n  useEffect(() => {\n    if (!isGitMenuOpen) {\n      return undefined;\n    }\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        setIsGitMenuOpen(false);\n      }\n    };\n\n    window.addEventListener(\"keydown\", onKeyDown);\n    return () => window.removeEventListener(\"keydown\", onKeyDown);\n  }, [isGitMenuOpen]);\n\n  const label = t(I18nKey.CONVERSATION$OVERVIEW_DIFF_GIT_ACTIONS);\n\n  const button = (\n    <button\n      ref={buttonRef}\n      type=\"button\"\n      onClick={() => {\n        if (isArchivedConversation) {\n          return;\n        }\n        setIsGitMenuOpen((open) => !open);\n      }}\n      disabled={isArchivedConversation}\n      className={cn(\n        GIT_ACTIONS_BUTTON_CLASSNAME,\n        isGitMenuOpen && \"bg-white/10 text-[var(--oh-foreground)]\",\n        isArchivedConversation &&\n          \"cursor-not-allowed opacity-50 hover:bg-transparent hover:text-[var(--oh-muted)]\",\n        className,\n      )}\n      aria-expanded={isGitMenuOpen}\n      aria-haspopup=\"menu\"\n      aria-disabled={isArchivedConversation}\n      data-testid=\"conversation-git-actions-toggle\"\n    >\n      <GitCommitHorizontal className=\"size-4 shrink-0\" size={16} aria-hidden />\n      <span className=\"whitespace-nowrap\">{label}</span>\n    </button>\n  );\n\n  return (\n    <div className=\"relative inline-flex items-center self-center\">\n      {/* Label is visible, so a tooltip only adds value for the disabled reason. */}\n      {isArchivedConversation ? (\n        <ChatActionTooltip\n          tooltip={t(I18nKey.CONVERSATION$UNAVAILABLE_FOR_ARCHIVES)}\n          ariaLabel={t(I18nKey.CONVERSATION$UNAVAILABLE_FOR_ARCHIVES)}\n        >\n          {button}\n        </ChatActionTooltip>\n      ) : (\n        button\n      )}\n      {isGitMenuOpen ? (\n        <ConversationGitActionsMenu\n          anchorRef={buttonRef}\n          gitProvider={gitProvider}\n          onClose={() => setIsGitMenuOpen(false)}\n        />\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAiBA,IAAM,IAA+B,EACnC,oGACA,+CACA,GACA,GACA,0BACA,GACA,iDACF;AAUA,SAAgB,EAA6B,EAC3C,gBACoC;CACpC,IAAM,EAAE,SAAM,EAAe,WAAW,GAClC,IAAyB,EAA0B,GACnD,EAAE,MAAM,MAAiB,EAAsB,GAC/C,CAAC,GAAe,KAAoB,EAAS,EAAK,GAClD,IAAY,EAA0B,IAAI,GAE1C,IACH,GAAc,gBAAyC;CAE1D,QAAgB;EACd,IAAI,CAAC,GACH;EAGF,IAAM,KAAa,MAAyB;GAC1C,AAAI,EAAM,QAAQ,YAChB,EAAiB,EAAK;EAE1B;EAGA,OADA,OAAO,iBAAiB,WAAW,CAAS,SAC/B,OAAO,oBAAoB,WAAW,CAAS;CAC9D,GAAG,CAAC,CAAa,CAAC;CAElB,IAAM,IAAQ,EAAE,EAAQ,sCAAsC,GAExD,IACJ,kBAAC,UAAD;EACE,KAAK;EACL,MAAK;EACL,eAAe;GACT,KAGJ,GAAkB,MAAS,CAAC,CAAI;EAClC;EACA,UAAU;EACV,WAAW,EACT,GACA,KAAiB,2CACjB,KACE,mFACF,CACF;EACA,iBAAe;EACf,iBAAc;EACd,iBAAe;EACf,eAAY;YApBd,CAsBE,kBAAC,GAAD;GAAqB,WAAU;GAAkB,MAAM;GAAI,eAAA;EAAa,CAAA,GACxE,kBAAC,QAAD;GAAM,WAAU;aAAqB;EAAY,CAAA,CAC3C;;CAGV,OACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CAEG,IACC,kBAAC,GAAD;GACE,SAAS,EAAE,EAAQ,qCAAqC;GACxD,WAAW,EAAE,EAAQ,qCAAqC;aAEzD;EACgB,CAAA,IAEnB,GAED,IACC,kBAAC,GAAD;GACE,WAAW;GACE;GACb,eAAe,EAAiB,EAAK;EACtC,CAAA,IACC,IACD;;AAET"}

package/dist/components/features/conversation/conversation-main/chat-interface-wrapper.cjs

@@ -1,2 +1,2 @@
-require("../../../../_virtual/_rolldown/runtime.cjs");const e=require("../../chat/chat-interface.cjs");let t=require("react/jsx-runtime");function n({isRightPanelShown:n}){return(0,t.jsx)(`div`,{className:`flex justify-center w-full h-full`,children:(0,t.jsx)(`div`,{className:`w-full min-w-0 max-w-[800px] h-full flex flex-col min-h-0 transition-all duration-300 ease-in-out`,children:(0,t.jsx)(e.ChatInterface,{})})})}exports.ChatInterfaceWrapper=n;
+require("../../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../../stores/conversation-store.cjs"),t=require("../../../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.cjs"),n=require("../../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.cjs"),r=require("../../../../node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.cjs"),i=require("../../chat/chat-interface.cjs"),a=require("../conversation-overview-panel.cjs"),o=require("../../../../hooks/use-breakpoint.cjs"),s=require("../conversation-overview-panel.constants.cjs"),c=require("../../../../hooks/use-conversation-overview-column-space.cjs");let l=require("react"),u=require("react/jsx-runtime");var d=`w-full min-w-0 max-w-[800px] h-full flex flex-col min-h-0`;function f({isRightPanelShown:f}){let p=o.useBreakpoint(),m=!r.useReducedMotion()&&!0,h=e.useConversationStore(e=>e.isOverviewPanelShown),g=(0,l.useRef)(null),_=!p&&h,v=c.useConversationOverviewColumnSpace(g,_);return(0,u.jsxs)(`div`,{ref:g,className:`flex h-full min-h-0 w-full overflow-hidden`,children:[(0,u.jsx)(`div`,{className:`flex min-h-0 min-w-0 flex-1 justify-center overflow-hidden`,children:(0,u.jsx)(`div`,{className:d,children:(0,u.jsx)(i.ChatInterface,{})})}),(0,u.jsx)(t.AnimatePresence,{children:_&&v?(0,u.jsx)(n.motion.div,{"data-testid":`conversation-overview-column`,initial:m?{width:0,opacity:0}:!1,animate:{width:268,opacity:1},exit:m?{width:0,opacity:0}:{opacity:0},transition:s.CONVERSATION_OVERVIEW_PANEL_TRANSITION,className:`flex shrink-0 flex-col items-start overflow-hidden pt-4 pl-3 pr-4`,children:(0,u.jsx)(`div`,{className:`w-full shrink-0`,style:{width:268},children:(0,u.jsx)(a.ConversationOverviewPanel,{})})},`conversation-overview-column`):null})]})}exports.ChatInterfaceWrapper=f;
 //# sourceMappingURL=chat-interface-wrapper.cjs.map

package/dist/components/features/conversation/conversation-main/chat-interface-wrapper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"chat-interface-wrapper.cjs","names":[],"sources":["../../../../../src/components/features/conversation/conversation-main/chat-interface-wrapper.tsx"],"sourcesContent":["import { ChatInterface } from \"../../chat/chat-interface\";\n\ninterface ChatInterfaceWrapperProps {\n  isRightPanelShown: boolean;\n}\n\nexport function ChatInterfaceWrapper({\n  isRightPanelShown: _isRightPanelShown,\n}: ChatInterfaceWrapperProps) {\n  return (\n    <div className=\"flex justify-center w-full h-full\">\n      <div className=\"w-full min-w-0 max-w-[800px] h-full flex flex-col min-h-0 transition-all duration-300 ease-in-out\">\n        <ChatInterface />\n      </div>\n    </div>\n  );\n}\n"],"mappings":"0IAMA,SAAgB,EAAqB,CACnC,kBAAmB,GACS,CAC5B,OACE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,8CACb,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,8GACb,EAAA,EAAA,KAAC,EAAA,cAAD,CAAgB,CAAA,CACb,CAAA,CACF,CAAA,CAET"}
+{"version":3,"file":"chat-interface-wrapper.cjs","names":[],"sources":["../../../../../src/components/features/conversation/conversation-main/chat-interface-wrapper.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"framer-motion\";\nimport { ChatInterface } from \"../../chat/chat-interface\";\nimport { ConversationOverviewPanel } from \"../conversation-overview-panel\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { useBreakpoint } from \"#/hooks/use-breakpoint\";\nimport { useConversationOverviewColumnSpace } from \"#/hooks/use-conversation-overview-column-space\";\nimport {\n  CONVERSATION_OVERVIEW_COLUMN_WIDTH_PX,\n  CONVERSATION_OVERVIEW_PANEL_TRANSITION,\n} from \"../conversation-overview-panel.constants\";\n\ninterface ChatInterfaceWrapperProps {\n  isRightPanelShown: boolean;\n}\n\nconst THREAD_CLASSNAME =\n  \"w-full min-w-0 max-w-[800px] h-full flex flex-col min-h-0\";\n\nexport function ChatInterfaceWrapper({\n  isRightPanelShown: _isRightPanelShown,\n}: ChatInterfaceWrapperProps) {\n  const isMobile = useBreakpoint();\n  const reduceMotion = useReducedMotion();\n  const enableOverviewMotion = !reduceMotion && import.meta.env.MODE !== \"test\";\n  const isOverviewPanelShown = useConversationStore(\n    (state) => state.isOverviewPanelShown,\n  );\n  const containerRef = useRef<HTMLDivElement>(null);\n  const wantsOverviewPanel = !isMobile && isOverviewPanelShown;\n  const hasOverviewColumnSpace = useConversationOverviewColumnSpace(\n    containerRef,\n    wantsOverviewPanel,\n  );\n  const showOverviewPanel = wantsOverviewPanel && hasOverviewColumnSpace;\n\n  return (\n    <div\n      ref={containerRef}\n      className=\"flex h-full min-h-0 w-full overflow-hidden\"\n    >\n      <div className=\"flex min-h-0 min-w-0 flex-1 justify-center overflow-hidden\">\n        <div className={THREAD_CLASSNAME}>\n          <ChatInterface />\n        </div>\n      </div>\n      <AnimatePresence>\n        {showOverviewPanel ? (\n          <motion.div\n            key=\"conversation-overview-column\"\n            data-testid=\"conversation-overview-column\"\n            initial={enableOverviewMotion ? { width: 0, opacity: 0 } : false}\n            animate={{\n              width: CONVERSATION_OVERVIEW_COLUMN_WIDTH_PX,\n              opacity: 1,\n            }}\n            exit={\n              enableOverviewMotion ? { width: 0, opacity: 0 } : { opacity: 0 }\n            }\n            transition={CONVERSATION_OVERVIEW_PANEL_TRANSITION}\n            className=\"flex shrink-0 flex-col items-start overflow-hidden pt-4 pl-3 pr-4\"\n          >\n            <div\n              className=\"w-full shrink-0\"\n              style={{ width: CONVERSATION_OVERVIEW_COLUMN_WIDTH_PX }}\n            >\n              <ConversationOverviewPanel />\n            </div>\n          </motion.div>\n        ) : null}\n      </AnimatePresence>\n    </div>\n  );\n}\n"],"mappings":"kuBAgBA,IAAM,EACJ,4DAEF,SAAgB,EAAqB,CACnC,kBAAmB,GACS,CAC5B,IAAM,EAAW,EAAA,cAAc,EAEzB,EAAuB,CADR,EAAA,iBACS,GAAgB,GACxC,EAAuB,EAAA,qBAC1B,GAAU,EAAM,oBACnB,EACM,GAAA,EAAA,EAAA,QAAsC,IAAI,EAC1C,EAAqB,CAAC,GAAY,EAClC,EAAyB,EAAA,mCAC7B,EACA,CACF,EAGA,OACE,EAAA,EAAA,MAAC,MAAD,CACE,IAAK,EACL,UAAU,sDAFZ,EAIE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,uEACb,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,YACd,EAAA,EAAA,KAAC,EAAA,cAAD,CAAgB,CAAA,CACb,CAAA,CACF,CAAA,GACL,EAAA,EAAA,KAAC,EAAA,gBAAD,CAAA,SAZsB,GAAsB,GAcxC,EAAA,EAAA,KAAC,EAAA,OAAO,IAAR,CAEE,cAAY,+BACZ,QAAS,EAAuB,CAAE,MAAO,EAAG,QAAS,CAAE,EAAI,GAC3D,QAAS,CACP,MAAA,IACA,QAAS,CACX,EACA,KACE,EAAuB,CAAE,MAAO,EAAG,QAAS,CAAE,EAAI,CAAE,QAAS,CAAE,EAEjE,WAAY,EAAA,uCACZ,UAAU,8EAEV,EAAA,EAAA,KAAC,MAAD,CACE,UAAU,kBACV,MAAO,CAAE,MAAA,GAA6C,YAEtD,EAAA,EAAA,KAAC,EAAA,0BAAD,CAA4B,CAAA,CACzB,CAAA,CACK,EAnBN,8BAmBM,EACV,IACW,CAAA,CACd,GAET"}

package/dist/components/features/conversation/conversation-main/chat-interface-wrapper.js

@@ -1,16 +1,52 @@
-import { ChatInterface as e } from "../../chat/chat-interface.js";
-import { jsx as t } from "react/jsx-runtime";
+import { useConversationStore as e } from "../../../../stores/conversation-store.js";
+import { AnimatePresence as t } from "../../../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js";
+import { motion as n } from "../../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js";
+import { useReducedMotion as r } from "../../../../node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.js";
+import { ChatInterface as i } from "../../chat/chat-interface.js";
+import { ConversationOverviewPanel as a } from "../conversation-overview-panel.js";
+import { useBreakpoint as o } from "../../../../hooks/use-breakpoint.js";
+import { CONVERSATION_OVERVIEW_PANEL_TRANSITION as s } from "../conversation-overview-panel.constants.js";
+import { useConversationOverviewColumnSpace as c } from "../../../../hooks/use-conversation-overview-column-space.js";
+import { useRef as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/components/features/conversation/conversation-main/chat-interface-wrapper.tsx
-function n({ isRightPanelShown: n }) {
-	return /* @__PURE__ */ t("div", {
-		className: "flex justify-center w-full h-full",
-		children: /* @__PURE__ */ t("div", {
-			className: "w-full min-w-0 max-w-[800px] h-full flex flex-col min-h-0 transition-all duration-300 ease-in-out",
-			children: /* @__PURE__ */ t(e, {})
-		})
+var f = "w-full min-w-0 max-w-[800px] h-full flex flex-col min-h-0";
+function p({ isRightPanelShown: p }) {
+	let m = o(), h = !r() && !0, g = e((e) => e.isOverviewPanelShown), _ = l(null), v = !m && g, y = c(_, v);
+	return /* @__PURE__ */ d("div", {
+		ref: _,
+		className: "flex h-full min-h-0 w-full overflow-hidden",
+		children: [/* @__PURE__ */ u("div", {
+			className: "flex min-h-0 min-w-0 flex-1 justify-center overflow-hidden",
+			children: /* @__PURE__ */ u("div", {
+				className: f,
+				children: /* @__PURE__ */ u(i, {})
+			})
+		}), /* @__PURE__ */ u(t, { children: v && y ? /* @__PURE__ */ u(n.div, {
+			"data-testid": "conversation-overview-column",
+			initial: h ? {
+				width: 0,
+				opacity: 0
+			} : !1,
+			animate: {
+				width: 268,
+				opacity: 1
+			},
+			exit: h ? {
+				width: 0,
+				opacity: 0
+			} : { opacity: 0 },
+			transition: s,
+			className: "flex shrink-0 flex-col items-start overflow-hidden pt-4 pl-3 pr-4",
+			children: /* @__PURE__ */ u("div", {
+				className: "w-full shrink-0",
+				style: { width: 268 },
+				children: /* @__PURE__ */ u(a, {})
+			})
+		}, "conversation-overview-column") : null })]
 	});
 }
 //#endregion
-export { n as ChatInterfaceWrapper };
+export { p as ChatInterfaceWrapper };
 
 //# sourceMappingURL=chat-interface-wrapper.js.map

package/dist/components/features/conversation/conversation-main/chat-interface-wrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"chat-interface-wrapper.js","names":[],"sources":["../../../../../src/components/features/conversation/conversation-main/chat-interface-wrapper.tsx"],"sourcesContent":["import { ChatInterface } from \"../../chat/chat-interface\";\n\ninterface ChatInterfaceWrapperProps {\n  isRightPanelShown: boolean;\n}\n\nexport function ChatInterfaceWrapper({\n  isRightPanelShown: _isRightPanelShown,\n}: ChatInterfaceWrapperProps) {\n  return (\n    <div className=\"flex justify-center w-full h-full\">\n      <div className=\"w-full min-w-0 max-w-[800px] h-full flex flex-col min-h-0 transition-all duration-300 ease-in-out\">\n        <ChatInterface />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;AAMA,SAAgB,EAAqB,EACnC,mBAAmB,KACS;CAC5B,OACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,GAAD,CAAgB,CAAA;EACb,CAAA;CACF,CAAA;AAET"}
+{"version":3,"file":"chat-interface-wrapper.js","names":[],"sources":["../../../../../src/components/features/conversation/conversation-main/chat-interface-wrapper.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"framer-motion\";\nimport { ChatInterface } from \"../../chat/chat-interface\";\nimport { ConversationOverviewPanel } from \"../conversation-overview-panel\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { useBreakpoint } from \"#/hooks/use-breakpoint\";\nimport { useConversationOverviewColumnSpace } from \"#/hooks/use-conversation-overview-column-space\";\nimport {\n  CONVERSATION_OVERVIEW_COLUMN_WIDTH_PX,\n  CONVERSATION_OVERVIEW_PANEL_TRANSITION,\n} from \"../conversation-overview-panel.constants\";\n\ninterface ChatInterfaceWrapperProps {\n  isRightPanelShown: boolean;\n}\n\nconst THREAD_CLASSNAME =\n  \"w-full min-w-0 max-w-[800px] h-full flex flex-col min-h-0\";\n\nexport function ChatInterfaceWrapper({\n  isRightPanelShown: _isRightPanelShown,\n}: ChatInterfaceWrapperProps) {\n  const isMobile = useBreakpoint();\n  const reduceMotion = useReducedMotion();\n  const enableOverviewMotion = !reduceMotion && import.meta.env.MODE !== \"test\";\n  const isOverviewPanelShown = useConversationStore(\n    (state) => state.isOverviewPanelShown,\n  );\n  const containerRef = useRef<HTMLDivElement>(null);\n  const wantsOverviewPanel = !isMobile && isOverviewPanelShown;\n  const hasOverviewColumnSpace = useConversationOverviewColumnSpace(\n    containerRef,\n    wantsOverviewPanel,\n  );\n  const showOverviewPanel = wantsOverviewPanel && hasOverviewColumnSpace;\n\n  return (\n    <div\n      ref={containerRef}\n      className=\"flex h-full min-h-0 w-full overflow-hidden\"\n    >\n      <div className=\"flex min-h-0 min-w-0 flex-1 justify-center overflow-hidden\">\n        <div className={THREAD_CLASSNAME}>\n          <ChatInterface />\n        </div>\n      </div>\n      <AnimatePresence>\n        {showOverviewPanel ? (\n          <motion.div\n            key=\"conversation-overview-column\"\n            data-testid=\"conversation-overview-column\"\n            initial={enableOverviewMotion ? { width: 0, opacity: 0 } : false}\n            animate={{\n              width: CONVERSATION_OVERVIEW_COLUMN_WIDTH_PX,\n              opacity: 1,\n            }}\n            exit={\n              enableOverviewMotion ? { width: 0, opacity: 0 } : { opacity: 0 }\n            }\n            transition={CONVERSATION_OVERVIEW_PANEL_TRANSITION}\n            className=\"flex shrink-0 flex-col items-start overflow-hidden pt-4 pl-3 pr-4\"\n          >\n            <div\n              className=\"w-full shrink-0\"\n              style={{ width: CONVERSATION_OVERVIEW_COLUMN_WIDTH_PX }}\n            >\n              <ConversationOverviewPanel />\n            </div>\n          </motion.div>\n        ) : null}\n      </AnimatePresence>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAgBA,IAAM,IACJ;AAEF,SAAgB,EAAqB,EACnC,mBAAmB,KACS;CAC5B,IAAM,IAAW,EAAc,GAEzB,IAAuB,CADR,EACS,KAAgB,IACxC,IAAuB,GAC1B,MAAU,EAAM,oBACnB,GACM,IAAe,EAAuB,IAAI,GAC1C,IAAqB,CAAC,KAAY,GAClC,IAAyB,EAC7B,GACA,CACF;CAGA,OACE,kBAAC,OAAD;EACE,KAAK;EACL,WAAU;YAFZ,CAIE,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,OAAD;IAAK,WAAW;cACd,kBAAC,GAAD,CAAgB,CAAA;GACb,CAAA;EACF,CAAA,GACL,kBAAC,GAAD,EAAA,UAZsB,KAAsB,IAcxC,kBAAC,EAAO,KAAR;GAEE,eAAY;GACZ,SAAS,IAAuB;IAAE,OAAO;IAAG,SAAS;GAAE,IAAI;GAC3D,SAAS;IACP,OAAA;IACA,SAAS;GACX;GACA,MACE,IAAuB;IAAE,OAAO;IAAG,SAAS;GAAE,IAAI,EAAE,SAAS,EAAE;GAEjE,YAAY;GACZ,WAAU;aAEV,kBAAC,OAAD;IACE,WAAU;IACV,OAAO,EAAE,OAAA,IAA6C;cAEtD,kBAAC,GAAD,CAA4B,CAAA;GACzB,CAAA;EACK,GAnBN,8BAmBM,IACV,KACW,CAAA,CACd;;AAET"}

package/dist/components/features/conversation/conversation-main/conversation-main.cjs

@@ -1,2 +1,2 @@
-require("../../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../../utils/utils.cjs"),t=require("../../../../stores/conversation-store.cjs"),n=require("./chat-interface-wrapper.cjs"),r=require("../conversation-tabs/conversation-tab-content/conversation-tab-content.cjs"),i=require("../../../../hooks/use-breakpoint.cjs"),a=require("../conversation-name-with-status.cjs"),o=require("../conversation-tabs/conversation-tabs.cjs"),s=require("../../../ui/resize-handle.cjs"),c=require("../../../../hooks/use-resizable-panels.cjs"),l=require("../../sidebar/sidebar-mobile-menu-toggle.cjs");let u=require("react/jsx-runtime");function d(e){return e?`translate-x-0 opacity-100`:`w-0 translate-x-full opacity-0`}function f(){let f=i.useBreakpoint(),p=i.useBreakpoint(767),{isRightPanelShown:m}=t.useConversationStore(),{leftWidth:h,rightWidth:g,isDragging:_,containerRef:v,handleMouseDown:y}=c.useResizablePanels({defaultLeftWidth:50,minLeftWidth:30,maxLeftWidth:80,storageKey:`desktop-layout-panel-width`});return(0,u.jsx)(`div`,{className:e.cn(f?`relative min-h-0 flex-1 flex flex-col`:`h-full flex flex-col overflow-hidden`),children:(0,u.jsxs)(`div`,{ref:v,className:e.cn(`flex flex-1 overflow-hidden`,f?`flex-col`:`transition-all duration-300 ease-in-out`),style:f?void 0:{transitionProperty:_?`none`:`all`},children:[(0,u.jsxs)(`div`,{className:e.cn(`flex flex-col bg-base overflow-hidden`,f?`flex-1`:`transition-all duration-300 ease-in-out`),style:f?void 0:{width:m?`${h}%`:`100%`,transitionProperty:_?`none`:`all`},children:[(0,u.jsxs)(`div`,{"data-testid":`chat-pane-header`,className:e.cn(`flex h-10 min-h-10 shrink-0 items-center`,p&&`gap-2 pl-2.5`),children:[p?(0,u.jsx)(l.SidebarMobileMenuToggle,{}):null,(0,u.jsx)(`div`,{className:`min-w-0 flex-1`,children:(0,u.jsx)(a.ConversationNameWithStatus,{})})]}),(0,u.jsx)(`div`,{className:`flex-1 min-h-0 flex flex-col`,children:(0,u.jsx)(n.ChatInterfaceWrapper,{isRightPanelShown:!f&&m})})]}),!f&&m&&(0,u.jsx)(s.ResizeHandle,{onMouseDown:y,isDragging:_}),!f&&(0,u.jsx)(`div`,{className:e.cn(`transition-all duration-300 ease-in-out overflow-hidden`,d(m)),style:{width:m?`${g}%`:`0%`,transitionProperty:_?`opacity, transform`:`all`},children:(0,u.jsx)(`div`,{className:`flex h-full w-full flex-col`,children:(0,u.jsxs)(`div`,{className:`flex flex-col flex-1 min-h-0 bg-[var(--oh-surface)] border-l border-[var(--oh-border)] overflow-hidden`,children:[(0,u.jsx)(`div`,{"data-testid":`tabs-pane-header`,className:`flex shrink-0 flex-col border-b border-[var(--oh-border)]`,children:(0,u.jsx)(o.ConversationTabs,{isPanelResizing:_})}),(0,u.jsx)(`div`,{className:`flex-1 min-h-0 flex flex-col`,children:(0,u.jsx)(r.ConversationTabContent,{})})]})})})]})})}exports.ConversationMain=f;
+require("../../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../../utils/utils.cjs"),t=require("../../../../stores/conversation-store.cjs"),n=require("../conversation-overview-drawer-context.cjs"),r=require("../../../../hooks/use-breakpoint.cjs"),i=require("./chat-interface-wrapper.cjs"),a=require("../conversation-tabs/conversation-tab-content/conversation-tab-content.cjs"),o=require("../conversation-name-with-status.cjs"),s=require("../conversation-tabs/conversation-tabs.cjs"),c=require("../../../ui/resize-handle.cjs"),l=require("../../../../hooks/use-resizable-panels.cjs"),u=require("../../sidebar/sidebar-mobile-menu-toggle.cjs"),d=require("../conversation-overview-drawer.cjs");let f=require("react/jsx-runtime");function p(e){return e?`translate-x-0 opacity-100`:`w-0 translate-x-full opacity-0`}function m(){let m=r.useBreakpoint(),h=r.useBreakpoint(767),{isRightPanelShown:g}=t.useConversationStore(),_=!!n.useConversationOverviewDrawerOptional()?.section,{leftWidth:v,rightWidth:y,isDragging:b,containerRef:x,handleMouseDown:S}=l.useResizablePanels({defaultLeftWidth:50,minLeftWidth:30,maxLeftWidth:80,storageKey:`desktop-layout-panel-width`});return(0,f.jsx)(`div`,{className:e.cn(m?`relative min-h-0 flex-1 flex flex-col`:`h-full flex flex-col overflow-hidden`),children:(0,f.jsxs)(`div`,{ref:x,className:e.cn(`flex flex-1 overflow-hidden`,m?`flex-col`:`transition-all duration-300 ease-in-out`),style:m?void 0:{transitionProperty:b?`none`:`all`},children:[(0,f.jsxs)(`div`,{className:e.cn(`flex flex-col bg-base overflow-hidden`,m?`flex-1`:e.cn(`min-w-0`,!_&&`transition-[width] duration-300 ease-in-out`)),style:m?void 0:{width:g?`${v}%`:`100%`,transitionProperty:b||_?`none`:`width`},children:[(0,f.jsxs)(`div`,{"data-testid":`chat-pane-header`,className:e.cn(`flex h-10 min-h-10 shrink-0 items-center`,h&&`gap-2 pl-2.5`),children:[h?(0,f.jsx)(u.SidebarMobileMenuToggle,{}):null,(0,f.jsx)(`div`,{className:`min-w-0 flex-1`,children:(0,f.jsx)(o.ConversationNameWithStatus,{})})]}),(0,f.jsx)(`div`,{className:`flex-1 min-h-0 flex flex-col`,children:(0,f.jsx)(i.ChatInterfaceWrapper,{isRightPanelShown:!m&&g})})]}),!m&&g&&(0,f.jsx)(c.ResizeHandle,{onMouseDown:S,isDragging:b}),!m&&(0,f.jsx)(`div`,{className:e.cn(`transition-all duration-300 ease-in-out overflow-hidden`,p(g)),style:{width:g?`${y}%`:`0%`,transitionProperty:b?`opacity, transform`:`all`},children:(0,f.jsx)(`div`,{className:`flex h-full w-full flex-col`,children:(0,f.jsxs)(`div`,{className:`flex flex-col flex-1 min-h-0 bg-[var(--oh-surface)] border-l border-[var(--oh-border)] overflow-hidden`,children:[(0,f.jsx)(`div`,{"data-testid":`tabs-pane-header`,className:`flex shrink-0 flex-col border-b border-[var(--oh-border)]`,children:(0,f.jsx)(s.ConversationTabs,{isPanelResizing:b})}),(0,f.jsx)(`div`,{className:`flex-1 min-h-0 flex flex-col`,children:(0,f.jsx)(a.ConversationTabContent,{})})]})})}),(0,f.jsx)(d.ConversationOverviewDrawer,{isMobile:m,resizeContainerRef:x})]})})}exports.ConversationMain=m;
 //# sourceMappingURL=conversation-main.cjs.map

package/dist/components/features/conversation/conversation-main/conversation-main.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"conversation-main.cjs","names":[],"sources":["../../../../../src/components/features/conversation/conversation-main/conversation-main.tsx"],"sourcesContent":["import { cn } from \"#/utils/utils\";\nimport { ChatInterfaceWrapper } from \"./chat-interface-wrapper\";\nimport { ConversationTabContent } from \"../conversation-tabs/conversation-tab-content/conversation-tab-content\";\nimport { ConversationNameWithStatus } from \"../conversation-name-with-status\";\nimport { ConversationTabs } from \"../conversation-tabs/conversation-tabs\";\nimport { ResizeHandle } from \"../../../ui/resize-handle\";\nimport { useResizablePanels } from \"#/hooks/use-resizable-panels\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport {\n  useBreakpoint,\n  SIDEBAR_RAIL_COLLAPSE_MAX_WIDTH,\n} from \"#/hooks/use-breakpoint\";\nimport { SidebarMobileMenuToggle } from \"#/components/features/sidebar/sidebar-mobile-menu-toggle\";\n\nfunction getDesktopTabPanelClass(isRightPanelShown: boolean) {\n  return isRightPanelShown\n    ? \"translate-x-0 opacity-100\"\n    : \"w-0 translate-x-full opacity-0\";\n}\n\nexport function ConversationMain() {\n  const isMobile = useBreakpoint();\n  const isSidebarRailHidden = useBreakpoint(SIDEBAR_RAIL_COLLAPSE_MAX_WIDTH);\n  const { isRightPanelShown } = useConversationStore();\n\n  const { leftWidth, rightWidth, isDragging, containerRef, handleMouseDown } =\n    useResizablePanels({\n      defaultLeftWidth: 50,\n      minLeftWidth: 30,\n      maxLeftWidth: 80,\n      storageKey: \"desktop-layout-panel-width\",\n    });\n\n  return (\n    <div\n      className={cn(\n        isMobile\n          ? \"relative min-h-0 flex-1 flex flex-col\"\n          : \"h-full flex flex-col overflow-hidden\",\n      )}\n    >\n      <div\n        ref={containerRef}\n        className={cn(\n          \"flex flex-1 overflow-hidden\",\n          isMobile ? \"flex-col\" : \"transition-all duration-300 ease-in-out\",\n        )}\n        // transition toggled at runtime based on drag state\n        style={\n          !isMobile\n            ? { transitionProperty: isDragging ? \"none\" : \"all\" }\n            : undefined\n        }\n      >\n        {/* Chat Panel - always mounted, styled differently for mobile/desktop.\n            Owns its own header (name + status) and gets bottom padding so the\n            chat input doesn't slam the floor. */}\n        <div\n          className={cn(\n            \"flex flex-col bg-base overflow-hidden\",\n            isMobile ? \"flex-1\" : \"transition-all duration-300 ease-in-out\",\n          )}\n          // panel width computed at runtime by resize hook; transition toggled by drag state\n          style={\n            !isMobile\n              ? {\n                  width: isRightPanelShown ? `${leftWidth}%` : \"100%\",\n                  transitionProperty: isDragging ? \"none\" : \"all\",\n                }\n              : undefined\n          }\n        >\n          <div\n            data-testid=\"chat-pane-header\"\n            className={cn(\n              \"flex h-10 min-h-10 shrink-0 items-center\",\n              isSidebarRailHidden && \"gap-2 pl-2.5\",\n            )}\n          >\n            {isSidebarRailHidden ? <SidebarMobileMenuToggle /> : null}\n            <div className=\"min-w-0 flex-1\">\n              <ConversationNameWithStatus />\n            </div>\n          </div>\n          <div className=\"flex-1 min-h-0 flex flex-col\">\n            <ChatInterfaceWrapper\n              isRightPanelShown={!isMobile && isRightPanelShown}\n            />\n          </div>\n        </div>\n\n        {/* Resize Handle - only shown on desktop when right panel is visible */}\n        {!isMobile && isRightPanelShown && (\n          <ResizeHandle onMouseDown={handleMouseDown} isDragging={isDragging} />\n        )}\n\n        {/* Right panel: desktop side drawer. Mobile opens Files/Tools via /panel route. */}\n        {!isMobile && (\n          <div\n            className={cn(\n              \"transition-all duration-300 ease-in-out overflow-hidden\",\n              getDesktopTabPanelClass(isRightPanelShown),\n            )}\n            style={{\n              width: isRightPanelShown ? `${rightWidth}%` : \"0%\",\n              transitionProperty: isDragging ? \"opacity, transform\" : \"all\",\n            }}\n          >\n            <div className=\"flex h-full w-full flex-col\">\n              <div className=\"flex flex-col flex-1 min-h-0 bg-[var(--oh-surface)] border-l border-[var(--oh-border)] overflow-hidden\">\n                <div\n                  data-testid=\"tabs-pane-header\"\n                  className=\"flex shrink-0 flex-col border-b border-[var(--oh-border)]\"\n                >\n                  <ConversationTabs isPanelResizing={isDragging} />\n                </div>\n                <div className=\"flex-1 min-h-0 flex flex-col\">\n                  <ConversationTabContent />\n                </div>\n              </div>\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"0nBAcA,SAAS,EAAwB,EAA4B,CAC3D,OAAO,EACH,4BACA,gCACN,CAEA,SAAgB,GAAmB,CACjC,IAAM,EAAW,EAAA,cAAc,EACzB,EAAsB,EAAA,cAAA,GAA6C,EACnE,CAAE,qBAAsB,EAAA,qBAAqB,EAE7C,CAAE,YAAW,aAAY,aAAY,eAAc,mBACvD,EAAA,mBAAmB,CACjB,iBAAkB,GAClB,aAAc,GACd,aAAc,GACd,WAAY,4BACd,CAAC,EAEH,OACE,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,EAAA,GACT,EACI,wCACA,sCACN,YAEA,EAAA,EAAA,MAAC,MAAD,CACE,IAAK,EACL,UAAW,EAAA,GACT,8BACA,EAAW,WAAa,yCAC1B,EAEA,MACG,EAEG,IAAA,GADA,CAAE,mBAAoB,EAAa,OAAS,KAAM,WAT1D,EAgBE,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,EAAA,GACT,wCACA,EAAW,SAAW,yCACxB,EAEA,MACG,EAKG,IAAA,GAJA,CACE,MAAO,EAAoB,GAAG,EAAU,GAAK,OAC7C,mBAAoB,EAAa,OAAS,KAC5C,WAXR,EAeE,EAAA,EAAA,MAAC,MAAD,CACE,cAAY,mBACZ,UAAW,EAAA,GACT,2CACA,GAAuB,cACzB,WALF,CAOG,GAAsB,EAAA,EAAA,KAAC,EAAA,wBAAD,CAA0B,CAAA,EAAI,MACrD,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,2BACb,EAAA,EAAA,KAAC,EAAA,2BAAD,CAA6B,CAAA,CAC1B,CAAA,CACF,KACL,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,yCACb,EAAA,EAAA,KAAC,EAAA,qBAAD,CACE,kBAAmB,CAAC,GAAY,CACjC,CAAA,CACE,CAAA,CACF,IAGJ,CAAC,GAAY,IACZ,EAAA,EAAA,KAAC,EAAA,aAAD,CAAc,YAAa,EAA6B,YAAa,CAAA,EAItE,CAAC,IACA,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,EAAA,GACT,0DACA,EAAwB,CAAiB,CAC3C,EACA,MAAO,CACL,MAAO,EAAoB,GAAG,EAAW,GAAK,KAC9C,mBAAoB,EAAa,qBAAuB,KAC1D,YAEA,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,wCACb,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,kHAAf,EACE,EAAA,EAAA,KAAC,MAAD,CACE,cAAY,mBACZ,UAAU,sEAEV,EAAA,EAAA,KAAC,EAAA,iBAAD,CAAkB,gBAAiB,CAAa,CAAA,CAC7C,CAAA,GACL,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,yCACb,EAAA,EAAA,KAAC,EAAA,uBAAD,CAAyB,CAAA,CACtB,CAAA,CACF,GACF,CAAA,CACF,CAAA,CAEJ,GACF,CAAA,CAET"}
+{"version":3,"file":"conversation-main.cjs","names":[],"sources":["../../../../../src/components/features/conversation/conversation-main/conversation-main.tsx"],"sourcesContent":["import { cn } from \"#/utils/utils\";\nimport { ChatInterfaceWrapper } from \"./chat-interface-wrapper\";\nimport { ConversationTabContent } from \"../conversation-tabs/conversation-tab-content/conversation-tab-content\";\nimport { ConversationNameWithStatus } from \"../conversation-name-with-status\";\nimport { ConversationTabs } from \"../conversation-tabs/conversation-tabs\";\nimport { ResizeHandle } from \"../../../ui/resize-handle\";\nimport { useResizablePanels } from \"#/hooks/use-resizable-panels\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport {\n  useBreakpoint,\n  SIDEBAR_RAIL_COLLAPSE_MAX_WIDTH,\n} from \"#/hooks/use-breakpoint\";\nimport { SidebarMobileMenuToggle } from \"#/components/features/sidebar/sidebar-mobile-menu-toggle\";\nimport { ConversationOverviewDrawer } from \"../conversation-overview-drawer\";\nimport { useConversationOverviewDrawerOptional } from \"../conversation-overview-drawer-context\";\n\nfunction getDesktopTabPanelClass(isRightPanelShown: boolean) {\n  return isRightPanelShown\n    ? \"translate-x-0 opacity-100\"\n    : \"w-0 translate-x-full opacity-0\";\n}\n\nexport function ConversationMain() {\n  const isMobile = useBreakpoint();\n  const isSidebarRailHidden = useBreakpoint(SIDEBAR_RAIL_COLLAPSE_MAX_WIDTH);\n  const { isRightPanelShown } = useConversationStore();\n  const overviewDrawer = useConversationOverviewDrawerOptional();\n  const isSecondaryDrawerOpen = Boolean(overviewDrawer?.section);\n\n  const { leftWidth, rightWidth, isDragging, containerRef, handleMouseDown } =\n    useResizablePanels({\n      defaultLeftWidth: 50,\n      minLeftWidth: 30,\n      maxLeftWidth: 80,\n      storageKey: \"desktop-layout-panel-width\",\n    });\n\n  return (\n    <div\n      className={cn(\n        isMobile\n          ? \"relative min-h-0 flex-1 flex flex-col\"\n          : \"h-full flex flex-col overflow-hidden\",\n      )}\n    >\n      <div\n        ref={containerRef}\n        className={cn(\n          \"flex flex-1 overflow-hidden\",\n          isMobile ? \"flex-col\" : \"transition-all duration-300 ease-in-out\",\n        )}\n        // transition toggled at runtime based on drag state\n        style={\n          !isMobile\n            ? { transitionProperty: isDragging ? \"none\" : \"all\" }\n            : undefined\n        }\n      >\n        {/* Chat Panel - always mounted, styled differently for mobile/desktop.\n            Owns its own header (name + status) and gets bottom padding so the\n            chat input doesn't slam the floor. */}\n        <div\n          className={cn(\n            \"flex flex-col bg-base overflow-hidden\",\n            isMobile\n              ? \"flex-1\"\n              : cn(\n                  \"min-w-0\",\n                  !isSecondaryDrawerOpen &&\n                    \"transition-[width] duration-300 ease-in-out\",\n                ),\n          )}\n          // panel width computed at runtime by resize hook; transition toggled by drag state\n          style={\n            !isMobile\n              ? {\n                  width: isRightPanelShown ? `${leftWidth}%` : \"100%\",\n                  transitionProperty:\n                    isDragging || isSecondaryDrawerOpen ? \"none\" : \"width\",\n                }\n              : undefined\n          }\n        >\n          <div\n            data-testid=\"chat-pane-header\"\n            className={cn(\n              \"flex h-10 min-h-10 shrink-0 items-center\",\n              isSidebarRailHidden && \"gap-2 pl-2.5\",\n            )}\n          >\n            {isSidebarRailHidden ? <SidebarMobileMenuToggle /> : null}\n            <div className=\"min-w-0 flex-1\">\n              <ConversationNameWithStatus />\n            </div>\n          </div>\n          <div className=\"flex-1 min-h-0 flex flex-col\">\n            <ChatInterfaceWrapper\n              isRightPanelShown={!isMobile && isRightPanelShown}\n            />\n          </div>\n        </div>\n\n        {/* Resize Handle - only shown on desktop when right panel is visible */}\n        {!isMobile && isRightPanelShown && (\n          <ResizeHandle onMouseDown={handleMouseDown} isDragging={isDragging} />\n        )}\n\n        {/* Right panel: desktop side drawer. Mobile opens Files/Tools via /panel route. */}\n        {!isMobile && (\n          <div\n            className={cn(\n              \"transition-all duration-300 ease-in-out overflow-hidden\",\n              getDesktopTabPanelClass(isRightPanelShown),\n            )}\n            style={{\n              width: isRightPanelShown ? `${rightWidth}%` : \"0%\",\n              transitionProperty: isDragging ? \"opacity, transform\" : \"all\",\n            }}\n          >\n            <div className=\"flex h-full w-full flex-col\">\n              <div className=\"flex flex-col flex-1 min-h-0 bg-[var(--oh-surface)] border-l border-[var(--oh-border)] overflow-hidden\">\n                <div\n                  data-testid=\"tabs-pane-header\"\n                  className=\"flex shrink-0 flex-col border-b border-[var(--oh-border)]\"\n                >\n                  <ConversationTabs isPanelResizing={isDragging} />\n                </div>\n                <div className=\"flex-1 min-h-0 flex flex-col\">\n                  <ConversationTabContent />\n                </div>\n              </div>\n            </div>\n          </div>\n        )}\n        <ConversationOverviewDrawer\n          isMobile={isMobile}\n          resizeContainerRef={containerRef}\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":"ouBAgBA,SAAS,EAAwB,EAA4B,CAC3D,OAAO,EACH,4BACA,gCACN,CAEA,SAAgB,GAAmB,CACjC,IAAM,EAAW,EAAA,cAAc,EACzB,EAAsB,EAAA,cAAA,GAA6C,EACnE,CAAE,qBAAsB,EAAA,qBAAqB,EAE7C,EAAwB,EADP,EAAA,sCACe,GAAgB,QAEhD,CAAE,YAAW,aAAY,aAAY,eAAc,mBACvD,EAAA,mBAAmB,CACjB,iBAAkB,GAClB,aAAc,GACd,aAAc,GACd,WAAY,4BACd,CAAC,EAEH,OACE,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,EAAA,GACT,EACI,wCACA,sCACN,YAEA,EAAA,EAAA,MAAC,MAAD,CACE,IAAK,EACL,UAAW,EAAA,GACT,8BACA,EAAW,WAAa,yCAC1B,EAEA,MACG,EAEG,IAAA,GADA,CAAE,mBAAoB,EAAa,OAAS,KAAM,WAT1D,EAgBE,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,EAAA,GACT,wCACA,EACI,SACA,EAAA,GACE,UACA,CAAC,GACC,6CACJ,CACN,EAEA,MACG,EAMG,IAAA,GALA,CACE,MAAO,EAAoB,GAAG,EAAU,GAAK,OAC7C,mBACE,GAAc,EAAwB,OAAS,OACnD,WAlBR,EAsBE,EAAA,EAAA,MAAC,MAAD,CACE,cAAY,mBACZ,UAAW,EAAA,GACT,2CACA,GAAuB,cACzB,WALF,CAOG,GAAsB,EAAA,EAAA,KAAC,EAAA,wBAAD,CAA0B,CAAA,EAAI,MACrD,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,2BACb,EAAA,EAAA,KAAC,EAAA,2BAAD,CAA6B,CAAA,CAC1B,CAAA,CACF,KACL,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,yCACb,EAAA,EAAA,KAAC,EAAA,qBAAD,CACE,kBAAmB,CAAC,GAAY,CACjC,CAAA,CACE,CAAA,CACF,IAGJ,CAAC,GAAY,IACZ,EAAA,EAAA,KAAC,EAAA,aAAD,CAAc,YAAa,EAA6B,YAAa,CAAA,EAItE,CAAC,IACA,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,EAAA,GACT,0DACA,EAAwB,CAAiB,CAC3C,EACA,MAAO,CACL,MAAO,EAAoB,GAAG,EAAW,GAAK,KAC9C,mBAAoB,EAAa,qBAAuB,KAC1D,YAEA,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,wCACb,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,kHAAf,EACE,EAAA,EAAA,KAAC,MAAD,CACE,cAAY,mBACZ,UAAU,sEAEV,EAAA,EAAA,KAAC,EAAA,iBAAD,CAAkB,gBAAiB,CAAa,CAAA,CAC7C,CAAA,GACL,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,yCACb,EAAA,EAAA,KAAC,EAAA,uBAAD,CAAyB,CAAA,CACtB,CAAA,CACF,GACF,CAAA,CACF,CAAA,GAEP,EAAA,EAAA,KAAC,EAAA,2BAAD,CACY,WACV,mBAAoB,CACrB,CAAA,CACE,GACF,CAAA,CAET"}

package/dist/components/features/conversation/conversation-main/conversation-main.js

@@ -1,80 +1,86 @@
 import { cn as e } from "../../../../utils/utils.js";
 import { useConversationStore as t } from "../../../../stores/conversation-store.js";
-import { ChatInterfaceWrapper as n } from "./chat-interface-wrapper.js";
-import { ConversationTabContent as r } from "../conversation-tabs/conversation-tab-content/conversation-tab-content.js";
-import { useBreakpoint as i } from "../../../../hooks/use-breakpoint.js";
-import { ConversationNameWithStatus as a } from "../conversation-name-with-status.js";
-import { ConversationTabs as o } from "../conversation-tabs/conversation-tabs.js";
-import { ResizeHandle as s } from "../../../ui/resize-handle.js";
-import { useResizablePanels as c } from "../../../../hooks/use-resizable-panels.js";
-import { SidebarMobileMenuToggle as l } from "../../sidebar/sidebar-mobile-menu-toggle.js";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { useConversationOverviewDrawerOptional as n } from "../conversation-overview-drawer-context.js";
+import { useBreakpoint as r } from "../../../../hooks/use-breakpoint.js";
+import { ChatInterfaceWrapper as i } from "./chat-interface-wrapper.js";
+import { ConversationTabContent as a } from "../conversation-tabs/conversation-tab-content/conversation-tab-content.js";
+import { ConversationNameWithStatus as o } from "../conversation-name-with-status.js";
+import { ConversationTabs as s } from "../conversation-tabs/conversation-tabs.js";
+import { ResizeHandle as c } from "../../../ui/resize-handle.js";
+import { useResizablePanels as l } from "../../../../hooks/use-resizable-panels.js";
+import { SidebarMobileMenuToggle as u } from "../../sidebar/sidebar-mobile-menu-toggle.js";
+import { ConversationOverviewDrawer as d } from "../conversation-overview-drawer.js";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/components/features/conversation/conversation-main/conversation-main.tsx
-function f(e) {
+function m(e) {
 	return e ? "translate-x-0 opacity-100" : "w-0 translate-x-full opacity-0";
 }
-function p() {
-	let p = i(), m = i(767), { isRightPanelShown: h } = t(), { leftWidth: g, rightWidth: _, isDragging: v, containerRef: y, handleMouseDown: b } = c({
+function h() {
+	let h = r(), g = r(767), { isRightPanelShown: _ } = t(), v = !!n()?.section, { leftWidth: y, rightWidth: b, isDragging: x, containerRef: S, handleMouseDown: C } = l({
 		defaultLeftWidth: 50,
 		minLeftWidth: 30,
 		maxLeftWidth: 80,
 		storageKey: "desktop-layout-panel-width"
 	});
-	return /* @__PURE__ */ u("div", {
-		className: e(p ? "relative min-h-0 flex-1 flex flex-col" : "h-full flex flex-col overflow-hidden"),
-		children: /* @__PURE__ */ d("div", {
-			ref: y,
-			className: e("flex flex-1 overflow-hidden", p ? "flex-col" : "transition-all duration-300 ease-in-out"),
-			style: p ? void 0 : { transitionProperty: v ? "none" : "all" },
+	return /* @__PURE__ */ f("div", {
+		className: e(h ? "relative min-h-0 flex-1 flex flex-col" : "h-full flex flex-col overflow-hidden"),
+		children: /* @__PURE__ */ p("div", {
+			ref: S,
+			className: e("flex flex-1 overflow-hidden", h ? "flex-col" : "transition-all duration-300 ease-in-out"),
+			style: h ? void 0 : { transitionProperty: x ? "none" : "all" },
 			children: [
-				/* @__PURE__ */ d("div", {
-					className: e("flex flex-col bg-base overflow-hidden", p ? "flex-1" : "transition-all duration-300 ease-in-out"),
-					style: p ? void 0 : {
-						width: h ? `${g}%` : "100%",
-						transitionProperty: v ? "none" : "all"
+				/* @__PURE__ */ p("div", {
+					className: e("flex flex-col bg-base overflow-hidden", h ? "flex-1" : e("min-w-0", !v && "transition-[width] duration-300 ease-in-out")),
+					style: h ? void 0 : {
+						width: _ ? `${y}%` : "100%",
+						transitionProperty: x || v ? "none" : "width"
 					},
-					children: [/* @__PURE__ */ d("div", {
+					children: [/* @__PURE__ */ p("div", {
 						"data-testid": "chat-pane-header",
-						className: e("flex h-10 min-h-10 shrink-0 items-center", m && "gap-2 pl-2.5"),
-						children: [m ? /* @__PURE__ */ u(l, {}) : null, /* @__PURE__ */ u("div", {
+						className: e("flex h-10 min-h-10 shrink-0 items-center", g && "gap-2 pl-2.5"),
+						children: [g ? /* @__PURE__ */ f(u, {}) : null, /* @__PURE__ */ f("div", {
 							className: "min-w-0 flex-1",
-							children: /* @__PURE__ */ u(a, {})
+							children: /* @__PURE__ */ f(o, {})
 						})]
-					}), /* @__PURE__ */ u("div", {
+					}), /* @__PURE__ */ f("div", {
 						className: "flex-1 min-h-0 flex flex-col",
-						children: /* @__PURE__ */ u(n, { isRightPanelShown: !p && h })
+						children: /* @__PURE__ */ f(i, { isRightPanelShown: !h && _ })
 					})]
 				}),
-				!p && h && /* @__PURE__ */ u(s, {
-					onMouseDown: b,
-					isDragging: v
+				!h && _ && /* @__PURE__ */ f(c, {
+					onMouseDown: C,
+					isDragging: x
 				}),
-				!p && /* @__PURE__ */ u("div", {
-					className: e("transition-all duration-300 ease-in-out overflow-hidden", f(h)),
+				!h && /* @__PURE__ */ f("div", {
+					className: e("transition-all duration-300 ease-in-out overflow-hidden", m(_)),
 					style: {
-						width: h ? `${_}%` : "0%",
-						transitionProperty: v ? "opacity, transform" : "all"
+						width: _ ? `${b}%` : "0%",
+						transitionProperty: x ? "opacity, transform" : "all"
 					},
-					children: /* @__PURE__ */ u("div", {
+					children: /* @__PURE__ */ f("div", {
 						className: "flex h-full w-full flex-col",
-						children: /* @__PURE__ */ d("div", {
+						children: /* @__PURE__ */ p("div", {
 							className: "flex flex-col flex-1 min-h-0 bg-[var(--oh-surface)] border-l border-[var(--oh-border)] overflow-hidden",
-							children: [/* @__PURE__ */ u("div", {
+							children: [/* @__PURE__ */ f("div", {
 								"data-testid": "tabs-pane-header",
 								className: "flex shrink-0 flex-col border-b border-[var(--oh-border)]",
-								children: /* @__PURE__ */ u(o, { isPanelResizing: v })
-							}), /* @__PURE__ */ u("div", {
+								children: /* @__PURE__ */ f(s, { isPanelResizing: x })
+							}), /* @__PURE__ */ f("div", {
 								className: "flex-1 min-h-0 flex flex-col",
-								children: /* @__PURE__ */ u(r, {})
+								children: /* @__PURE__ */ f(a, {})
 							})]
 						})
 					})
+				}),
+				/* @__PURE__ */ f(d, {
+					isMobile: h,
+					resizeContainerRef: S
 				})
 			]
 		})
 	});
 }
 //#endregion
-export { p as ConversationMain };
+export { h as ConversationMain };
 
 //# sourceMappingURL=conversation-main.js.map

package/dist/components/features/conversation/conversation-main/conversation-main.js.map

@@ -1 +1 @@
-{"version":3,"file":"conversation-main.js","names":[],"sources":["../../../../../src/components/features/conversation/conversation-main/conversation-main.tsx"],"sourcesContent":["import { cn } from \"#/utils/utils\";\nimport { ChatInterfaceWrapper } from \"./chat-interface-wrapper\";\nimport { ConversationTabContent } from \"../conversation-tabs/conversation-tab-content/conversation-tab-content\";\nimport { ConversationNameWithStatus } from \"../conversation-name-with-status\";\nimport { ConversationTabs } from \"../conversation-tabs/conversation-tabs\";\nimport { ResizeHandle } from \"../../../ui/resize-handle\";\nimport { useResizablePanels } from \"#/hooks/use-resizable-panels\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport {\n  useBreakpoint,\n  SIDEBAR_RAIL_COLLAPSE_MAX_WIDTH,\n} from \"#/hooks/use-breakpoint\";\nimport { SidebarMobileMenuToggle } from \"#/components/features/sidebar/sidebar-mobile-menu-toggle\";\n\nfunction getDesktopTabPanelClass(isRightPanelShown: boolean) {\n  return isRightPanelShown\n    ? \"translate-x-0 opacity-100\"\n    : \"w-0 translate-x-full opacity-0\";\n}\n\nexport function ConversationMain() {\n  const isMobile = useBreakpoint();\n  const isSidebarRailHidden = useBreakpoint(SIDEBAR_RAIL_COLLAPSE_MAX_WIDTH);\n  const { isRightPanelShown } = useConversationStore();\n\n  const { leftWidth, rightWidth, isDragging, containerRef, handleMouseDown } =\n    useResizablePanels({\n      defaultLeftWidth: 50,\n      minLeftWidth: 30,\n      maxLeftWidth: 80,\n      storageKey: \"desktop-layout-panel-width\",\n    });\n\n  return (\n    <div\n      className={cn(\n        isMobile\n          ? \"relative min-h-0 flex-1 flex flex-col\"\n          : \"h-full flex flex-col overflow-hidden\",\n      )}\n    >\n      <div\n        ref={containerRef}\n        className={cn(\n          \"flex flex-1 overflow-hidden\",\n          isMobile ? \"flex-col\" : \"transition-all duration-300 ease-in-out\",\n        )}\n        // transition toggled at runtime based on drag state\n        style={\n          !isMobile\n            ? { transitionProperty: isDragging ? \"none\" : \"all\" }\n            : undefined\n        }\n      >\n        {/* Chat Panel - always mounted, styled differently for mobile/desktop.\n            Owns its own header (name + status) and gets bottom padding so the\n            chat input doesn't slam the floor. */}\n        <div\n          className={cn(\n            \"flex flex-col bg-base overflow-hidden\",\n            isMobile ? \"flex-1\" : \"transition-all duration-300 ease-in-out\",\n          )}\n          // panel width computed at runtime by resize hook; transition toggled by drag state\n          style={\n            !isMobile\n              ? {\n                  width: isRightPanelShown ? `${leftWidth}%` : \"100%\",\n                  transitionProperty: isDragging ? \"none\" : \"all\",\n                }\n              : undefined\n          }\n        >\n          <div\n            data-testid=\"chat-pane-header\"\n            className={cn(\n              \"flex h-10 min-h-10 shrink-0 items-center\",\n              isSidebarRailHidden && \"gap-2 pl-2.5\",\n            )}\n          >\n            {isSidebarRailHidden ? <SidebarMobileMenuToggle /> : null}\n            <div className=\"min-w-0 flex-1\">\n              <ConversationNameWithStatus />\n            </div>\n          </div>\n          <div className=\"flex-1 min-h-0 flex flex-col\">\n            <ChatInterfaceWrapper\n              isRightPanelShown={!isMobile && isRightPanelShown}\n            />\n          </div>\n        </div>\n\n        {/* Resize Handle - only shown on desktop when right panel is visible */}\n        {!isMobile && isRightPanelShown && (\n          <ResizeHandle onMouseDown={handleMouseDown} isDragging={isDragging} />\n        )}\n\n        {/* Right panel: desktop side drawer. Mobile opens Files/Tools via /panel route. */}\n        {!isMobile && (\n          <div\n            className={cn(\n              \"transition-all duration-300 ease-in-out overflow-hidden\",\n              getDesktopTabPanelClass(isRightPanelShown),\n            )}\n            style={{\n              width: isRightPanelShown ? `${rightWidth}%` : \"0%\",\n              transitionProperty: isDragging ? \"opacity, transform\" : \"all\",\n            }}\n          >\n            <div className=\"flex h-full w-full flex-col\">\n              <div className=\"flex flex-col flex-1 min-h-0 bg-[var(--oh-surface)] border-l border-[var(--oh-border)] overflow-hidden\">\n                <div\n                  data-testid=\"tabs-pane-header\"\n                  className=\"flex shrink-0 flex-col border-b border-[var(--oh-border)]\"\n                >\n                  <ConversationTabs isPanelResizing={isDragging} />\n                </div>\n                <div className=\"flex-1 min-h-0 flex flex-col\">\n                  <ConversationTabContent />\n                </div>\n              </div>\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAcA,SAAS,EAAwB,GAA4B;CAC3D,OAAO,IACH,8BACA;AACN;AAEA,SAAgB,IAAmB;CACjC,IAAM,IAAW,EAAc,GACzB,IAAsB,EAAA,GAA6C,GACnE,EAAE,yBAAsB,EAAqB,GAE7C,EAAE,cAAW,eAAY,eAAY,iBAAc,uBACvD,EAAmB;EACjB,kBAAkB;EAClB,cAAc;EACd,cAAc;EACd,YAAY;CACd,CAAC;CAEH,OACE,kBAAC,OAAD;EACE,WAAW,EACT,IACI,0CACA,sCACN;YAEA,kBAAC,OAAD;GACE,KAAK;GACL,WAAW,EACT,+BACA,IAAW,aAAa,yCAC1B;GAEA,OACG,IAEG,KAAA,IADA,EAAE,oBAAoB,IAAa,SAAS,MAAM;aAT1D;IAgBE,kBAAC,OAAD;KACE,WAAW,EACT,yCACA,IAAW,WAAW,yCACxB;KAEA,OACG,IAKG,KAAA,IAJA;MACE,OAAO,IAAoB,GAAG,EAAU,KAAK;MAC7C,oBAAoB,IAAa,SAAS;KAC5C;eAXR,CAeE,kBAAC,OAAD;MACE,eAAY;MACZ,WAAW,EACT,4CACA,KAAuB,cACzB;gBALF,CAOG,IAAsB,kBAAC,GAAD,CAA0B,CAAA,IAAI,MACrD,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,GAAD,CAA6B,CAAA;MAC1B,CAAA,CACF;SACL,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,GAAD,EACE,mBAAmB,CAAC,KAAY,EACjC,CAAA;KACE,CAAA,CACF;;IAGJ,CAAC,KAAY,KACZ,kBAAC,GAAD;KAAc,aAAa;KAA6B;IAAa,CAAA;IAItE,CAAC,KACA,kBAAC,OAAD;KACE,WAAW,EACT,2DACA,EAAwB,CAAiB,CAC3C;KACA,OAAO;MACL,OAAO,IAAoB,GAAG,EAAW,KAAK;MAC9C,oBAAoB,IAAa,uBAAuB;KAC1D;eAEA,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QACE,eAAY;QACZ,WAAU;kBAEV,kBAAC,GAAD,EAAkB,iBAAiB,EAAa,CAAA;OAC7C,CAAA,GACL,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,GAAD,CAAyB,CAAA;OACtB,CAAA,CACF;;KACF,CAAA;IACF,CAAA;GAEJ;;CACF,CAAA;AAET"}
+{"version":3,"file":"conversation-main.js","names":[],"sources":["../../../../../src/components/features/conversation/conversation-main/conversation-main.tsx"],"sourcesContent":["import { cn } from \"#/utils/utils\";\nimport { ChatInterfaceWrapper } from \"./chat-interface-wrapper\";\nimport { ConversationTabContent } from \"../conversation-tabs/conversation-tab-content/conversation-tab-content\";\nimport { ConversationNameWithStatus } from \"../conversation-name-with-status\";\nimport { ConversationTabs } from \"../conversation-tabs/conversation-tabs\";\nimport { ResizeHandle } from \"../../../ui/resize-handle\";\nimport { useResizablePanels } from \"#/hooks/use-resizable-panels\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport {\n  useBreakpoint,\n  SIDEBAR_RAIL_COLLAPSE_MAX_WIDTH,\n} from \"#/hooks/use-breakpoint\";\nimport { SidebarMobileMenuToggle } from \"#/components/features/sidebar/sidebar-mobile-menu-toggle\";\nimport { ConversationOverviewDrawer } from \"../conversation-overview-drawer\";\nimport { useConversationOverviewDrawerOptional } from \"../conversation-overview-drawer-context\";\n\nfunction getDesktopTabPanelClass(isRightPanelShown: boolean) {\n  return isRightPanelShown\n    ? \"translate-x-0 opacity-100\"\n    : \"w-0 translate-x-full opacity-0\";\n}\n\nexport function ConversationMain() {\n  const isMobile = useBreakpoint();\n  const isSidebarRailHidden = useBreakpoint(SIDEBAR_RAIL_COLLAPSE_MAX_WIDTH);\n  const { isRightPanelShown } = useConversationStore();\n  const overviewDrawer = useConversationOverviewDrawerOptional();\n  const isSecondaryDrawerOpen = Boolean(overviewDrawer?.section);\n\n  const { leftWidth, rightWidth, isDragging, containerRef, handleMouseDown } =\n    useResizablePanels({\n      defaultLeftWidth: 50,\n      minLeftWidth: 30,\n      maxLeftWidth: 80,\n      storageKey: \"desktop-layout-panel-width\",\n    });\n\n  return (\n    <div\n      className={cn(\n        isMobile\n          ? \"relative min-h-0 flex-1 flex flex-col\"\n          : \"h-full flex flex-col overflow-hidden\",\n      )}\n    >\n      <div\n        ref={containerRef}\n        className={cn(\n          \"flex flex-1 overflow-hidden\",\n          isMobile ? \"flex-col\" : \"transition-all duration-300 ease-in-out\",\n        )}\n        // transition toggled at runtime based on drag state\n        style={\n          !isMobile\n            ? { transitionProperty: isDragging ? \"none\" : \"all\" }\n            : undefined\n        }\n      >\n        {/* Chat Panel - always mounted, styled differently for mobile/desktop.\n            Owns its own header (name + status) and gets bottom padding so the\n            chat input doesn't slam the floor. */}\n        <div\n          className={cn(\n            \"flex flex-col bg-base overflow-hidden\",\n            isMobile\n              ? \"flex-1\"\n              : cn(\n                  \"min-w-0\",\n                  !isSecondaryDrawerOpen &&\n                    \"transition-[width] duration-300 ease-in-out\",\n                ),\n          )}\n          // panel width computed at runtime by resize hook; transition toggled by drag state\n          style={\n            !isMobile\n              ? {\n                  width: isRightPanelShown ? `${leftWidth}%` : \"100%\",\n                  transitionProperty:\n                    isDragging || isSecondaryDrawerOpen ? \"none\" : \"width\",\n                }\n              : undefined\n          }\n        >\n          <div\n            data-testid=\"chat-pane-header\"\n            className={cn(\n              \"flex h-10 min-h-10 shrink-0 items-center\",\n              isSidebarRailHidden && \"gap-2 pl-2.5\",\n            )}\n          >\n            {isSidebarRailHidden ? <SidebarMobileMenuToggle /> : null}\n            <div className=\"min-w-0 flex-1\">\n              <ConversationNameWithStatus />\n            </div>\n          </div>\n          <div className=\"flex-1 min-h-0 flex flex-col\">\n            <ChatInterfaceWrapper\n              isRightPanelShown={!isMobile && isRightPanelShown}\n            />\n          </div>\n        </div>\n\n        {/* Resize Handle - only shown on desktop when right panel is visible */}\n        {!isMobile && isRightPanelShown && (\n          <ResizeHandle onMouseDown={handleMouseDown} isDragging={isDragging} />\n        )}\n\n        {/* Right panel: desktop side drawer. Mobile opens Files/Tools via /panel route. */}\n        {!isMobile && (\n          <div\n            className={cn(\n              \"transition-all duration-300 ease-in-out overflow-hidden\",\n              getDesktopTabPanelClass(isRightPanelShown),\n            )}\n            style={{\n              width: isRightPanelShown ? `${rightWidth}%` : \"0%\",\n              transitionProperty: isDragging ? \"opacity, transform\" : \"all\",\n            }}\n          >\n            <div className=\"flex h-full w-full flex-col\">\n              <div className=\"flex flex-col flex-1 min-h-0 bg-[var(--oh-surface)] border-l border-[var(--oh-border)] overflow-hidden\">\n                <div\n                  data-testid=\"tabs-pane-header\"\n                  className=\"flex shrink-0 flex-col border-b border-[var(--oh-border)]\"\n                >\n                  <ConversationTabs isPanelResizing={isDragging} />\n                </div>\n                <div className=\"flex-1 min-h-0 flex flex-col\">\n                  <ConversationTabContent />\n                </div>\n              </div>\n            </div>\n          </div>\n        )}\n        <ConversationOverviewDrawer\n          isMobile={isMobile}\n          resizeContainerRef={containerRef}\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAgBA,SAAS,EAAwB,GAA4B;CAC3D,OAAO,IACH,8BACA;AACN;AAEA,SAAgB,IAAmB;CACjC,IAAM,IAAW,EAAc,GACzB,IAAsB,EAAA,GAA6C,GACnE,EAAE,yBAAsB,EAAqB,GAE7C,IAAwB,EADP,EACe,GAAgB,SAEhD,EAAE,cAAW,eAAY,eAAY,iBAAc,uBACvD,EAAmB;EACjB,kBAAkB;EAClB,cAAc;EACd,cAAc;EACd,YAAY;CACd,CAAC;CAEH,OACE,kBAAC,OAAD;EACE,WAAW,EACT,IACI,0CACA,sCACN;YAEA,kBAAC,OAAD;GACE,KAAK;GACL,WAAW,EACT,+BACA,IAAW,aAAa,yCAC1B;GAEA,OACG,IAEG,KAAA,IADA,EAAE,oBAAoB,IAAa,SAAS,MAAM;aAT1D;IAgBE,kBAAC,OAAD;KACE,WAAW,EACT,yCACA,IACI,WACA,EACE,WACA,CAAC,KACC,6CACJ,CACN;KAEA,OACG,IAMG,KAAA,IALA;MACE,OAAO,IAAoB,GAAG,EAAU,KAAK;MAC7C,oBACE,KAAc,IAAwB,SAAS;KACnD;eAlBR,CAsBE,kBAAC,OAAD;MACE,eAAY;MACZ,WAAW,EACT,4CACA,KAAuB,cACzB;gBALF,CAOG,IAAsB,kBAAC,GAAD,CAA0B,CAAA,IAAI,MACrD,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,GAAD,CAA6B,CAAA;MAC1B,CAAA,CACF;SACL,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,GAAD,EACE,mBAAmB,CAAC,KAAY,EACjC,CAAA;KACE,CAAA,CACF;;IAGJ,CAAC,KAAY,KACZ,kBAAC,GAAD;KAAc,aAAa;KAA6B;IAAa,CAAA;IAItE,CAAC,KACA,kBAAC,OAAD;KACE,WAAW,EACT,2DACA,EAAwB,CAAiB,CAC3C;KACA,OAAO;MACL,OAAO,IAAoB,GAAG,EAAW,KAAK;MAC9C,oBAAoB,IAAa,uBAAuB;KAC1D;eAEA,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QACE,eAAY;QACZ,WAAU;kBAEV,kBAAC,GAAD,EAAkB,iBAAiB,EAAa,CAAA;OAC7C,CAAA,GACL,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,GAAD,CAAyB,CAAA;OACtB,CAAA,CACF;;KACF,CAAA;IACF,CAAA;IAEP,kBAAC,GAAD;KACY;KACV,oBAAoB;IACrB,CAAA;GACE;;CACF,CAAA;AAET"}

package/dist/components/features/conversation/conversation-name-with-status.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("../../../types/agent-state.cjs"),i=require("../../../utils/status.cjs"),a=require("../../../utils/utils.cjs"),o=require("../../../hooks/use-conversation-id.cjs"),s=require("../../../hooks/query/use-active-conversation.cjs"),c=require("../../../hooks/use-agent-state.cjs"),l=require("../../../hooks/query/use-task-polling.cjs"),u=require("../../../hooks/mutation/use-unified-stop-conversation.cjs"),d=require("../../../hooks/use-user-providers.cjs"),f=require("../../../icons/debug-stackframe-dot.cjs"),p=require("../../../hooks/mutation/use-unified-start-conversation.cjs"),m=require("../controls/server-status-context-menu.cjs"),h=require("./conversation-name.cjs"),g=require("./right-panel-toggle.cjs");let _=require("react");_=e.__toESM(_,1);let v=require("react/jsx-runtime");function y(){let{t:e}=t.useTranslation(`openhands`),{conversationId:y}=o.useConversationId(),{data:b}=s.useActiveConversation(),{curAgentState:x}=c.useAgentState(),{isTask:S,taskStatus:C}=l.useTaskPolling(),{mutate:w}=u.useUnifiedPauseConversation(),{mutate:T}=p.useUnifiedResumeConversation(),{providers:E}=d.useUserProviders(),[D,O]=_.default.useState(!1),[k,A]=_.default.useState(!1),j=_.default.useRef(null),M=b?.execution_status??null,N=a.getStatusColor({isPausing:!1,isTask:S,taskStatus:C,isStartingStatus:x===r.AgentState.LOADING||x===r.AgentState.INIT,isStopStatus:i.isExecutionErrored(M),curAgentState:x}),P=D||k,F=()=>{O(!1),A(!1)};return(0,v.jsxs)(`div`,{className:`flex items-center justify-between w-full`,children:[(0,v.jsxs)(`div`,{className:`flex items-center min-w-0`,children:[(0,v.jsxs)(`div`,{className:`relative shrink-0`,onPointerEnter:e=>{e.pointerType===`mouse`&&A(!0)},onPointerLeave:e=>{e.pointerType===`mouse`&&A(!1)},children:[(0,v.jsx)(`button`,{ref:j,type:`button`,"data-testid":`server-status-menu-trigger`,"aria-label":e(n.I18nKey.COMMON$SERVER_STATUS),"aria-expanded":P,"aria-haspopup":`menu`,onClick:e=>{if(e.preventDefault(),e.stopPropagation(),P){F();return}O(!0)},className:a.cn(`flex items-center justify-center rounded-md`,`text-[var(--oh-muted)] hover:bg-white/10`),children:(0,v.jsx)(f.default,{className:`ml-[3.5px] w-6 h-6 cursor-pointer`,color:N,"aria-hidden":!0})}),P?(0,v.jsx)(m.ServerStatusContextMenu,{onClose:F,ignoreOutsideClickRef:j,onStopServer:i.isExecutionActive(M)?e=>{e.preventDefault(),e.stopPropagation(),y&&w({conversationId:y}),F()}:void 0,onStartServer:i.isExecutionPaused(M)?e=>{e.preventDefault(),e.stopPropagation(),y&&T({conversationId:y,providers:E}),F()}:void 0,executionStatus:M,position:`bottom`,className:`bottom-full left-0 mt-0 min-h-fit`,isPausing:!1}):null]}),(0,v.jsx)(h.ConversationName,{})]}),(0,v.jsx)(g.RightPanelToggle,{className:`mr-2`})]})}exports.ConversationNameWithStatus=y;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),n=require("../../../i18n/declaration.cjs"),r=require("../../../types/agent-state.cjs"),i=require("../../../utils/status.cjs"),a=require("../../../utils/utils.cjs"),o=require("../../../hooks/use-conversation-id.cjs"),s=require("../../../hooks/query/use-active-conversation.cjs"),c=require("../../../hooks/use-agent-state.cjs"),l=require("../../../hooks/query/use-task-polling.cjs"),u=require("../../../hooks/mutation/use-unified-stop-conversation.cjs"),d=require("../../../hooks/use-user-providers.cjs"),f=require("../../../icons/debug-stackframe-dot.cjs"),p=require("../../../hooks/mutation/use-unified-start-conversation.cjs"),m=require("../controls/server-status-context-menu.cjs"),h=require("./conversation-name.cjs"),g=require("./conversation-git-actions-toggle.cjs"),_=require("./conversation-overview-toggle.cjs"),v=require("./right-panel-toggle.cjs");let y=require("react");y=e.__toESM(y,1);let b=require("react/jsx-runtime");function x(){let{t:e}=t.useTranslation(`openhands`),{conversationId:x}=o.useConversationId(),{data:S}=s.useActiveConversation(),{curAgentState:C}=c.useAgentState(),{isTask:w,taskStatus:T}=l.useTaskPolling(),{mutate:E}=u.useUnifiedPauseConversation(),{mutate:D}=p.useUnifiedResumeConversation(),{providers:O}=d.useUserProviders(),[k,A]=y.default.useState(!1),[j,M]=y.default.useState(!1),N=y.default.useRef(null),P=S?.execution_status??null,F=a.getStatusColor({isPausing:!1,isTask:w,taskStatus:T,isStartingStatus:C===r.AgentState.LOADING||C===r.AgentState.INIT,isStopStatus:i.isExecutionErrored(P),curAgentState:C}),I=k||j,L=()=>{A(!1),M(!1)};return(0,b.jsxs)(`div`,{className:`flex items-center justify-between w-full`,children:[(0,b.jsxs)(`div`,{className:`flex items-center min-w-0`,children:[(0,b.jsxs)(`div`,{className:`relative shrink-0`,onPointerEnter:e=>{e.pointerType===`mouse`&&M(!0)},onPointerLeave:e=>{e.pointerType===`mouse`&&M(!1)},children:[(0,b.jsx)(`button`,{ref:N,type:`button`,"data-testid":`server-status-menu-trigger`,"aria-label":e(n.I18nKey.COMMON$SERVER_STATUS),"aria-expanded":I,"aria-haspopup":`menu`,onClick:e=>{if(e.preventDefault(),e.stopPropagation(),I){L();return}A(!0)},className:a.cn(`flex items-center justify-center rounded-md`,`text-[var(--oh-muted)] hover:bg-white/10`),children:(0,b.jsx)(f.default,{className:`ml-[3.5px] w-6 h-6 cursor-pointer`,color:F,"aria-hidden":!0})}),I?(0,b.jsx)(m.ServerStatusContextMenu,{onClose:L,ignoreOutsideClickRef:N,onStopServer:i.isExecutionActive(P)?e=>{e.preventDefault(),e.stopPropagation(),x&&E({conversationId:x}),L()}:void 0,onStartServer:i.isExecutionPaused(P)?e=>{e.preventDefault(),e.stopPropagation(),x&&D({conversationId:x,providers:O}),L()}:void 0,executionStatus:P,position:`bottom`,className:`bottom-full left-0 mt-0 min-h-fit`,isPausing:!1}):null]}),(0,b.jsx)(h.ConversationName,{})]}),(0,b.jsxs)(`div`,{className:`mr-2 flex shrink-0 items-center gap-1`,children:[(0,b.jsx)(g.ConversationGitActionsToggle,{}),(0,b.jsx)(_.ConversationOverviewToggle,{}),(0,b.jsx)(v.RightPanelToggle,{})]})]})}exports.ConversationNameWithStatus=x;
 //# sourceMappingURL=conversation-name-with-status.cjs.map

package/dist/components/features/conversation/conversation-name-with-status.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"conversation-name-with-status.cjs","names":[],"sources":["../../../../src/components/features/conversation/conversation-name-with-status.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { useTaskPolling } from \"#/hooks/query/use-task-polling\";\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useUnifiedPauseConversation } from \"#/hooks/mutation/use-unified-stop-conversation\";\nimport { useUnifiedResumeConversation } from \"#/hooks/mutation/use-unified-start-conversation\";\nimport { useConversationId } from \"#/hooks/use-conversation-id\";\nimport { useUserProviders } from \"#/hooks/use-user-providers\";\nimport { getStatusColor, cn } from \"#/utils/utils\";\nimport { AgentState } from \"#/types/agent-state\";\nimport DebugStackframeDot from \"#/icons/debug-stackframe-dot.svg?react\";\nimport { ServerStatusContextMenu } from \"../controls/server-status-context-menu\";\nimport { ConversationName } from \"./conversation-name\";\nimport { RightPanelToggle } from \"./right-panel-toggle\";\nimport {\n  isExecutionActive,\n  isExecutionErrored,\n  isExecutionPaused,\n} from \"#/utils/status\";\nimport { I18nKey } from \"#/i18n/declaration\";\n\nexport function ConversationNameWithStatus() {\n  const { t } = useTranslation(\"openhands\");\n  const { conversationId } = useConversationId();\n  const { data: conversation } = useActiveConversation();\n  const { curAgentState } = useAgentState();\n  const { isTask, taskStatus } = useTaskPolling();\n  const { mutate: pauseConversation } = useUnifiedPauseConversation();\n  const { mutate: resumeConversation } = useUnifiedResumeConversation();\n  const { providers } = useUserProviders();\n  const [menuOpen, setMenuOpen] = React.useState(false);\n  const [hoveredOpen, setHoveredOpen] = React.useState(false);\n  const triggerRef = React.useRef<HTMLButtonElement>(null);\n\n  const executionStatus = conversation?.execution_status ?? null;\n  const isStartingStatus =\n    curAgentState === AgentState.LOADING || curAgentState === AgentState.INIT;\n  const isStopStatus = isExecutionErrored(executionStatus);\n\n  const statusColor = getStatusColor({\n    isPausing: false,\n    isTask,\n    taskStatus,\n    isStartingStatus,\n    isStopStatus,\n    curAgentState,\n  });\n\n  const isMenuVisible = menuOpen || hoveredOpen;\n\n  const closeMenu = () => {\n    setMenuOpen(false);\n    setHoveredOpen(false);\n  };\n\n  const handleStopServer = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    if (conversationId) {\n      pauseConversation({ conversationId });\n    }\n    closeMenu();\n  };\n\n  const handleStartServer = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    if (conversationId) {\n      resumeConversation({ conversationId, providers });\n    }\n    closeMenu();\n  };\n\n  const handleStatusClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    // Click toggles for touch; on desktop it also dismisses a hover-opened menu\n    // instead of \"pinning\" it open under the cursor.\n    if (isMenuVisible) {\n      closeMenu();\n      return;\n    }\n    setMenuOpen(true);\n  };\n\n  return (\n    <div className=\"flex items-center justify-between w-full\">\n      <div className=\"flex items-center min-w-0\">\n        <div\n          className=\"relative shrink-0\"\n          onPointerEnter={(event) => {\n            // Gate on this event's pointer, not device-primary matchMedia — hybrid\n            // laptops can emit compatibility mouseenter for touchscreen taps.\n            if (event.pointerType === \"mouse\") {\n              setHoveredOpen(true);\n            }\n          }}\n          onPointerLeave={(event) => {\n            if (event.pointerType === \"mouse\") {\n              setHoveredOpen(false);\n            }\n          }}\n        >\n          <button\n            ref={triggerRef}\n            type=\"button\"\n            data-testid=\"server-status-menu-trigger\"\n            aria-label={t(I18nKey.COMMON$SERVER_STATUS)}\n            aria-expanded={isMenuVisible}\n            aria-haspopup=\"menu\"\n            onClick={handleStatusClick}\n            className={cn(\n              \"flex items-center justify-center rounded-md\",\n              \"text-[var(--oh-muted)] hover:bg-white/10\",\n            )}\n          >\n            <DebugStackframeDot\n              className=\"ml-[3.5px] w-6 h-6 cursor-pointer\"\n              color={statusColor}\n              aria-hidden\n            />\n          </button>\n          {isMenuVisible ? (\n            <ServerStatusContextMenu\n              onClose={closeMenu}\n              ignoreOutsideClickRef={triggerRef}\n              onStopServer={\n                isExecutionActive(executionStatus)\n                  ? handleStopServer\n                  : undefined\n              }\n              onStartServer={\n                isExecutionPaused(executionStatus)\n                  ? handleStartServer\n                  : undefined\n              }\n              executionStatus={executionStatus}\n              position=\"bottom\"\n              className=\"bottom-full left-0 mt-0 min-h-fit\"\n              isPausing={false}\n            />\n          ) : null}\n        </div>\n        <ConversationName />\n      </div>\n      <RightPanelToggle className=\"mr-2\" />\n    </div>\n  );\n}\n"],"mappings":"y8BAsBA,SAAgB,GAA6B,CAC3C,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAClC,CAAE,kBAAmB,EAAA,kBAAkB,EACvC,CAAE,KAAM,GAAiB,EAAA,sBAAsB,EAC/C,CAAE,iBAAkB,EAAA,cAAc,EAClC,CAAE,SAAQ,cAAe,EAAA,eAAe,EACxC,CAAE,OAAQ,GAAsB,EAAA,4BAA4B,EAC5D,CAAE,OAAQ,GAAuB,EAAA,6BAA6B,EAC9D,CAAE,aAAc,EAAA,iBAAiB,EACjC,CAAC,EAAU,GAAe,EAAA,QAAM,SAAS,EAAK,EAC9C,CAAC,EAAa,GAAkB,EAAA,QAAM,SAAS,EAAK,EACpD,EAAa,EAAA,QAAM,OAA0B,IAAI,EAEjD,EAAkB,GAAc,kBAAoB,KAKpD,EAAc,EAAA,eAAe,CACjC,UAAW,GACX,SACA,aACA,iBAPA,IAAkB,EAAA,WAAW,SAAW,IAAkB,EAAA,WAAW,KAQrE,aAPmB,EAAA,mBAAmB,CAOtC,EACA,eACF,CAAC,EAEK,EAAgB,GAAY,EAE5B,MAAkB,CACtB,EAAY,EAAK,EACjB,EAAe,EAAK,CACtB,EAgCA,OACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,oDAAf,EACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,qCAAf,EACE,EAAA,EAAA,MAAC,MAAD,CACE,UAAU,oBACV,eAAiB,GAAU,CAGrB,EAAM,cAAgB,SACxB,EAAe,EAAI,CAEvB,EACA,eAAiB,GAAU,CACrB,EAAM,cAAgB,SACxB,EAAe,EAAK,CAExB,WAbF,EAeE,EAAA,EAAA,KAAC,SAAD,CACE,IAAK,EACL,KAAK,SACL,cAAY,6BACZ,aAAY,EAAE,EAAA,QAAQ,oBAAoB,EAC1C,gBAAe,EACf,gBAAc,OACd,QArCiB,GAA+C,CAKxE,GAJA,EAAM,eAAe,EACrB,EAAM,gBAAgB,EAGlB,EAAe,CACjB,EAAU,EACV,MACF,CACA,EAAY,EAAI,CAClB,EA4BU,UAAW,EAAA,GACT,8CACA,0CACF,YAEA,EAAA,EAAA,KAAC,EAAA,QAAD,CACE,UAAU,oCACV,MAAO,EACP,cAAA,EACD,CAAA,CACK,CAAA,EACP,GACC,EAAA,EAAA,KAAC,EAAA,wBAAD,CACE,QAAS,EACT,sBAAuB,EACvB,aACE,EAAA,kBAAkB,CAAe,EAxErB,GAA+C,CACvE,EAAM,eAAe,EACrB,EAAM,gBAAgB,EAClB,GACF,EAAkB,CAAE,gBAAe,CAAC,EAEtC,EAAU,CACZ,EAmEkB,IAAA,GAEN,cACE,EAAA,kBAAkB,CAAe,EApEpB,GAA+C,CACxE,EAAM,eAAe,EACrB,EAAM,gBAAgB,EAClB,GACF,EAAmB,CAAE,iBAAgB,WAAU,CAAC,EAElD,EAAU,CACZ,EA+DkB,IAAA,GAEW,kBACjB,SAAS,SACT,UAAU,oCACV,UAAW,EACZ,CAAA,EACC,IACD,KACL,EAAA,EAAA,KAAC,EAAA,iBAAD,CAAmB,CAAA,CAChB,KACL,EAAA,EAAA,KAAC,EAAA,iBAAD,CAAkB,UAAU,MAAQ,CAAA,CACjC,GAET"}
+{"version":3,"file":"conversation-name-with-status.cjs","names":[],"sources":["../../../../src/components/features/conversation/conversation-name-with-status.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { useTaskPolling } from \"#/hooks/query/use-task-polling\";\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useUnifiedPauseConversation } from \"#/hooks/mutation/use-unified-stop-conversation\";\nimport { useUnifiedResumeConversation } from \"#/hooks/mutation/use-unified-start-conversation\";\nimport { useConversationId } from \"#/hooks/use-conversation-id\";\nimport { useUserProviders } from \"#/hooks/use-user-providers\";\nimport { getStatusColor, cn } from \"#/utils/utils\";\nimport { AgentState } from \"#/types/agent-state\";\nimport DebugStackframeDot from \"#/icons/debug-stackframe-dot.svg?react\";\nimport { ServerStatusContextMenu } from \"../controls/server-status-context-menu\";\nimport { ConversationName } from \"./conversation-name\";\nimport { ConversationGitActionsToggle } from \"./conversation-git-actions-toggle\";\nimport { ConversationOverviewToggle } from \"./conversation-overview-toggle\";\nimport { RightPanelToggle } from \"./right-panel-toggle\";\nimport {\n  isExecutionActive,\n  isExecutionErrored,\n  isExecutionPaused,\n} from \"#/utils/status\";\nimport { I18nKey } from \"#/i18n/declaration\";\n\nexport function ConversationNameWithStatus() {\n  const { t } = useTranslation(\"openhands\");\n  const { conversationId } = useConversationId();\n  const { data: conversation } = useActiveConversation();\n  const { curAgentState } = useAgentState();\n  const { isTask, taskStatus } = useTaskPolling();\n  const { mutate: pauseConversation } = useUnifiedPauseConversation();\n  const { mutate: resumeConversation } = useUnifiedResumeConversation();\n  const { providers } = useUserProviders();\n  const [menuOpen, setMenuOpen] = React.useState(false);\n  const [hoveredOpen, setHoveredOpen] = React.useState(false);\n  const triggerRef = React.useRef<HTMLButtonElement>(null);\n\n  const executionStatus = conversation?.execution_status ?? null;\n  const isStartingStatus =\n    curAgentState === AgentState.LOADING || curAgentState === AgentState.INIT;\n  const isStopStatus = isExecutionErrored(executionStatus);\n\n  const statusColor = getStatusColor({\n    isPausing: false,\n    isTask,\n    taskStatus,\n    isStartingStatus,\n    isStopStatus,\n    curAgentState,\n  });\n\n  const isMenuVisible = menuOpen || hoveredOpen;\n\n  const closeMenu = () => {\n    setMenuOpen(false);\n    setHoveredOpen(false);\n  };\n\n  const handleStopServer = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    if (conversationId) {\n      pauseConversation({ conversationId });\n    }\n    closeMenu();\n  };\n\n  const handleStartServer = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    if (conversationId) {\n      resumeConversation({ conversationId, providers });\n    }\n    closeMenu();\n  };\n\n  const handleStatusClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    // Click toggles for touch; on desktop it also dismisses a hover-opened menu\n    // instead of \"pinning\" it open under the cursor.\n    if (isMenuVisible) {\n      closeMenu();\n      return;\n    }\n    setMenuOpen(true);\n  };\n\n  return (\n    <div className=\"flex items-center justify-between w-full\">\n      <div className=\"flex items-center min-w-0\">\n        <div\n          className=\"relative shrink-0\"\n          onPointerEnter={(event) => {\n            // Gate on this event's pointer, not device-primary matchMedia — hybrid\n            // laptops can emit compatibility mouseenter for touchscreen taps.\n            if (event.pointerType === \"mouse\") {\n              setHoveredOpen(true);\n            }\n          }}\n          onPointerLeave={(event) => {\n            if (event.pointerType === \"mouse\") {\n              setHoveredOpen(false);\n            }\n          }}\n        >\n          <button\n            ref={triggerRef}\n            type=\"button\"\n            data-testid=\"server-status-menu-trigger\"\n            aria-label={t(I18nKey.COMMON$SERVER_STATUS)}\n            aria-expanded={isMenuVisible}\n            aria-haspopup=\"menu\"\n            onClick={handleStatusClick}\n            className={cn(\n              \"flex items-center justify-center rounded-md\",\n              \"text-[var(--oh-muted)] hover:bg-white/10\",\n            )}\n          >\n            <DebugStackframeDot\n              className=\"ml-[3.5px] w-6 h-6 cursor-pointer\"\n              color={statusColor}\n              aria-hidden\n            />\n          </button>\n          {isMenuVisible ? (\n            <ServerStatusContextMenu\n              onClose={closeMenu}\n              ignoreOutsideClickRef={triggerRef}\n              onStopServer={\n                isExecutionActive(executionStatus)\n                  ? handleStopServer\n                  : undefined\n              }\n              onStartServer={\n                isExecutionPaused(executionStatus)\n                  ? handleStartServer\n                  : undefined\n              }\n              executionStatus={executionStatus}\n              position=\"bottom\"\n              className=\"bottom-full left-0 mt-0 min-h-fit\"\n              isPausing={false}\n            />\n          ) : null}\n        </div>\n        <ConversationName />\n      </div>\n      <div className=\"mr-2 flex shrink-0 items-center gap-1\">\n        <ConversationGitActionsToggle />\n        <ConversationOverviewToggle />\n        <RightPanelToggle />\n      </div>\n    </div>\n  );\n}\n"],"mappings":"4iCAwBA,SAAgB,GAA6B,CAC3C,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAClC,CAAE,kBAAmB,EAAA,kBAAkB,EACvC,CAAE,KAAM,GAAiB,EAAA,sBAAsB,EAC/C,CAAE,iBAAkB,EAAA,cAAc,EAClC,CAAE,SAAQ,cAAe,EAAA,eAAe,EACxC,CAAE,OAAQ,GAAsB,EAAA,4BAA4B,EAC5D,CAAE,OAAQ,GAAuB,EAAA,6BAA6B,EAC9D,CAAE,aAAc,EAAA,iBAAiB,EACjC,CAAC,EAAU,GAAe,EAAA,QAAM,SAAS,EAAK,EAC9C,CAAC,EAAa,GAAkB,EAAA,QAAM,SAAS,EAAK,EACpD,EAAa,EAAA,QAAM,OAA0B,IAAI,EAEjD,EAAkB,GAAc,kBAAoB,KAKpD,EAAc,EAAA,eAAe,CACjC,UAAW,GACX,SACA,aACA,iBAPA,IAAkB,EAAA,WAAW,SAAW,IAAkB,EAAA,WAAW,KAQrE,aAPmB,EAAA,mBAAmB,CAOtC,EACA,eACF,CAAC,EAEK,EAAgB,GAAY,EAE5B,MAAkB,CACtB,EAAY,EAAK,EACjB,EAAe,EAAK,CACtB,EAgCA,OACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,oDAAf,EACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,qCAAf,EACE,EAAA,EAAA,MAAC,MAAD,CACE,UAAU,oBACV,eAAiB,GAAU,CAGrB,EAAM,cAAgB,SACxB,EAAe,EAAI,CAEvB,EACA,eAAiB,GAAU,CACrB,EAAM,cAAgB,SACxB,EAAe,EAAK,CAExB,WAbF,EAeE,EAAA,EAAA,KAAC,SAAD,CACE,IAAK,EACL,KAAK,SACL,cAAY,6BACZ,aAAY,EAAE,EAAA,QAAQ,oBAAoB,EAC1C,gBAAe,EACf,gBAAc,OACd,QArCiB,GAA+C,CAKxE,GAJA,EAAM,eAAe,EACrB,EAAM,gBAAgB,EAGlB,EAAe,CACjB,EAAU,EACV,MACF,CACA,EAAY,EAAI,CAClB,EA4BU,UAAW,EAAA,GACT,8CACA,0CACF,YAEA,EAAA,EAAA,KAAC,EAAA,QAAD,CACE,UAAU,oCACV,MAAO,EACP,cAAA,EACD,CAAA,CACK,CAAA,EACP,GACC,EAAA,EAAA,KAAC,EAAA,wBAAD,CACE,QAAS,EACT,sBAAuB,EACvB,aACE,EAAA,kBAAkB,CAAe,EAxErB,GAA+C,CACvE,EAAM,eAAe,EACrB,EAAM,gBAAgB,EAClB,GACF,EAAkB,CAAE,gBAAe,CAAC,EAEtC,EAAU,CACZ,EAmEkB,IAAA,GAEN,cACE,EAAA,kBAAkB,CAAe,EApEpB,GAA+C,CACxE,EAAM,eAAe,EACrB,EAAM,gBAAgB,EAClB,GACF,EAAmB,CAAE,iBAAgB,WAAU,CAAC,EAElD,EAAU,CACZ,EA+DkB,IAAA,GAEW,kBACjB,SAAS,SACT,UAAU,oCACV,UAAW,EACZ,CAAA,EACC,IACD,KACL,EAAA,EAAA,KAAC,EAAA,iBAAD,CAAmB,CAAA,CAChB,KACL,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,iDAAf,EACE,EAAA,EAAA,KAAC,EAAA,6BAAD,CAA+B,CAAA,GAC/B,EAAA,EAAA,KAAC,EAAA,2BAAD,CAA6B,CAAA,GAC7B,EAAA,EAAA,KAAC,EAAA,iBAAD,CAAmB,CAAA,CAChB,GACF,GAET"}