@openhands/agent-canvas 1.14.0 → 1.15.0

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

package/dist/components/features/conversation/conversation-name-with-status.js

@@ -13,75 +13,84 @@ import m from "../../../icons/debug-stackframe-dot.js";
 import { useUnifiedResumeConversation as h } from "../../../hooks/mutation/use-unified-start-conversation.js";
 import { ServerStatusContextMenu as g } from "../controls/server-status-context-menu.js";
 import { ConversationName as _ } from "./conversation-name.js";
-import { RightPanelToggle as v } from "./right-panel-toggle.js";
-import y from "react";
-import { jsx as b, jsxs as x } from "react/jsx-runtime";
+import { ConversationGitActionsToggle as v } from "./conversation-git-actions-toggle.js";
+import { ConversationOverviewToggle as y } from "./conversation-overview-toggle.js";
+import { RightPanelToggle as b } from "./right-panel-toggle.js";
+import x from "react";
+import { jsx as S, jsxs as C } from "react/jsx-runtime";
 //#region src/components/features/conversation/conversation-name-with-status.tsx
-function S() {
-	let { t: S } = e("openhands"), { conversationId: C } = c(), { data: w } = l(), { curAgentState: T } = u(), { isTask: E, taskStatus: D } = d(), { mutate: O } = f(), { mutate: k } = h(), { providers: A } = p(), [j, M] = y.useState(!1), [N, P] = y.useState(!1), F = y.useRef(null), I = w?.execution_status ?? null, L = s({
+function w() {
+	let { t: w } = e("openhands"), { conversationId: T } = c(), { data: E } = l(), { curAgentState: D } = u(), { isTask: O, taskStatus: k } = d(), { mutate: A } = f(), { mutate: j } = h(), { providers: M } = p(), [N, P] = x.useState(!1), [F, I] = x.useState(!1), L = x.useRef(null), R = E?.execution_status ?? null, z = s({
 		isPausing: !1,
-		isTask: E,
-		taskStatus: D,
-		isStartingStatus: T === n.LOADING || T === n.INIT,
-		isStopStatus: i(I),
-		curAgentState: T
-	}), R = j || N, z = () => {
-		M(!1), P(!1);
+		isTask: O,
+		taskStatus: k,
+		isStartingStatus: D === n.LOADING || D === n.INIT,
+		isStopStatus: i(R),
+		curAgentState: D
+	}), B = N || F, V = () => {
+		P(!1), I(!1);
 	};
-	return /* @__PURE__ */ x("div", {
+	return /* @__PURE__ */ C("div", {
 		className: "flex items-center justify-between w-full",
-		children: [/* @__PURE__ */ x("div", {
+		children: [/* @__PURE__ */ C("div", {
 			className: "flex items-center min-w-0",
-			children: [/* @__PURE__ */ x("div", {
+			children: [/* @__PURE__ */ C("div", {
 				className: "relative shrink-0",
 				onPointerEnter: (e) => {
-					e.pointerType === "mouse" && P(!0);
+					e.pointerType === "mouse" && I(!0);
 				},
 				onPointerLeave: (e) => {
-					e.pointerType === "mouse" && P(!1);
+					e.pointerType === "mouse" && I(!1);
 				},
-				children: [/* @__PURE__ */ b("button", {
-					ref: F,
+				children: [/* @__PURE__ */ S("button", {
+					ref: L,
 					type: "button",
 					"data-testid": "server-status-menu-trigger",
-					"aria-label": S(t.COMMON$SERVER_STATUS),
-					"aria-expanded": R,
+					"aria-label": w(t.COMMON$SERVER_STATUS),
+					"aria-expanded": B,
 					"aria-haspopup": "menu",
 					onClick: (e) => {
-						if (e.preventDefault(), e.stopPropagation(), R) {
-							z();
+						if (e.preventDefault(), e.stopPropagation(), B) {
+							V();
 							return;
 						}
-						M(!0);
+						P(!0);
 					},
 					className: o("flex items-center justify-center rounded-md", "text-[var(--oh-muted)] hover:bg-white/10"),
-					children: /* @__PURE__ */ b(m, {
+					children: /* @__PURE__ */ S(m, {
 						className: "ml-[3.5px] w-6 h-6 cursor-pointer",
-						color: L,
+						color: z,
 						"aria-hidden": !0
 					})
-				}), R ? /* @__PURE__ */ b(g, {
-					onClose: z,
-					ignoreOutsideClickRef: F,
-					onStopServer: r(I) ? (e) => {
-						e.preventDefault(), e.stopPropagation(), C && O({ conversationId: C }), z();
+				}), B ? /* @__PURE__ */ S(g, {
+					onClose: V,
+					ignoreOutsideClickRef: L,
+					onStopServer: r(R) ? (e) => {
+						e.preventDefault(), e.stopPropagation(), T && A({ conversationId: T }), V();
 					} : void 0,
-					onStartServer: a(I) ? (e) => {
-						e.preventDefault(), e.stopPropagation(), C && k({
-							conversationId: C,
-							providers: A
-						}), z();
+					onStartServer: a(R) ? (e) => {
+						e.preventDefault(), e.stopPropagation(), T && j({
+							conversationId: T,
+							providers: M
+						}), V();
 					} : void 0,
-					executionStatus: I,
+					executionStatus: R,
 					position: "bottom",
 					className: "bottom-full left-0 mt-0 min-h-fit",
 					isPausing: !1
 				}) : null]
-			}), /* @__PURE__ */ b(_, {})]
-		}), /* @__PURE__ */ b(v, { className: "mr-2" })]
+			}), /* @__PURE__ */ S(_, {})]
+		}), /* @__PURE__ */ C("div", {
+			className: "mr-2 flex shrink-0 items-center gap-1",
+			children: [
+				/* @__PURE__ */ S(v, {}),
+				/* @__PURE__ */ S(y, {}),
+				/* @__PURE__ */ S(b, {})
+			]
+		})]
 	});
 }
 //#endregion
-export { S as ConversationNameWithStatus };
+export { w as ConversationNameWithStatus };
 
 //# sourceMappingURL=conversation-name-with-status.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"conversation-name-with-status.js","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":";;;;;;;;;;;;;;;;;;;AAsBA,SAAgB,IAA6B;CAC3C,IAAM,EAAE,SAAM,EAAe,WAAW,GAClC,EAAE,sBAAmB,EAAkB,GACvC,EAAE,MAAM,MAAiB,EAAsB,GAC/C,EAAE,qBAAkB,EAAc,GAClC,EAAE,WAAQ,kBAAe,EAAe,GACxC,EAAE,QAAQ,MAAsB,EAA4B,GAC5D,EAAE,QAAQ,MAAuB,EAA6B,GAC9D,EAAE,iBAAc,EAAiB,GACjC,CAAC,GAAU,KAAe,EAAM,SAAS,EAAK,GAC9C,CAAC,GAAa,KAAkB,EAAM,SAAS,EAAK,GACpD,IAAa,EAAM,OAA0B,IAAI,GAEjD,IAAkB,GAAc,oBAAoB,MAKpD,IAAc,EAAe;EACjC,WAAW;EACX;EACA;EACA,kBAPA,MAAkB,EAAW,WAAW,MAAkB,EAAW;EAQrE,cAPmB,EAAmB,CAOtC;EACA;CACF,CAAC,GAEK,IAAgB,KAAY,GAE5B,UAAkB;EAEtB,AADA,EAAY,EAAK,GACjB,EAAe,EAAK;CACtB;CAgCA,OACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IACE,WAAU;IACV,iBAAiB,MAAU;KAGzB,AAAI,EAAM,gBAAgB,WACxB,EAAe,EAAI;IAEvB;IACA,iBAAiB,MAAU;KACzB,AAAI,EAAM,gBAAgB,WACxB,EAAe,EAAK;IAExB;cAbF,CAeE,kBAAC,UAAD;KACE,KAAK;KACL,MAAK;KACL,eAAY;KACZ,cAAY,EAAE,EAAQ,oBAAoB;KAC1C,iBAAe;KACf,iBAAc;KACd,UArCiB,MAA+C;MAKxE,IAJA,EAAM,eAAe,GACrB,EAAM,gBAAgB,GAGlB,GAAe;OACjB,EAAU;OACV;MACF;MACA,EAAY,EAAI;KAClB;KA4BU,WAAW,EACT,+CACA,0CACF;eAEA,kBAAC,GAAD;MACE,WAAU;MACV,OAAO;MACP,eAAA;KACD,CAAA;IACK,CAAA,GACP,IACC,kBAAC,GAAD;KACE,SAAS;KACT,uBAAuB;KACvB,cACE,EAAkB,CAAe,KAxErB,MAA+C;MAMvE,AALA,EAAM,eAAe,GACrB,EAAM,gBAAgB,GAClB,KACF,EAAkB,EAAE,kBAAe,CAAC,GAEtC,EAAU;KACZ,IAmEkB,KAAA;KAEN,eACE,EAAkB,CAAe,KApEpB,MAA+C;MAMxE,AALA,EAAM,eAAe,GACrB,EAAM,gBAAgB,GAClB,KACF,EAAmB;OAAE;OAAgB;MAAU,CAAC,GAElD,EAAU;KACZ,IA+DkB,KAAA;KAEW;KACjB,UAAS;KACT,WAAU;KACV,WAAW;IACZ,CAAA,IACC,IACD;OACL,kBAAC,GAAD,CAAmB,CAAA,CAChB;MACL,kBAAC,GAAD,EAAkB,WAAU,OAAQ,CAAA,CACjC;;AAET"}
+{"version":3,"file":"conversation-name-with-status.js","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":";;;;;;;;;;;;;;;;;;;;;AAwBA,SAAgB,IAA6B;CAC3C,IAAM,EAAE,SAAM,EAAe,WAAW,GAClC,EAAE,sBAAmB,EAAkB,GACvC,EAAE,MAAM,MAAiB,EAAsB,GAC/C,EAAE,qBAAkB,EAAc,GAClC,EAAE,WAAQ,kBAAe,EAAe,GACxC,EAAE,QAAQ,MAAsB,EAA4B,GAC5D,EAAE,QAAQ,MAAuB,EAA6B,GAC9D,EAAE,iBAAc,EAAiB,GACjC,CAAC,GAAU,KAAe,EAAM,SAAS,EAAK,GAC9C,CAAC,GAAa,KAAkB,EAAM,SAAS,EAAK,GACpD,IAAa,EAAM,OAA0B,IAAI,GAEjD,IAAkB,GAAc,oBAAoB,MAKpD,IAAc,EAAe;EACjC,WAAW;EACX;EACA;EACA,kBAPA,MAAkB,EAAW,WAAW,MAAkB,EAAW;EAQrE,cAPmB,EAAmB,CAOtC;EACA;CACF,CAAC,GAEK,IAAgB,KAAY,GAE5B,UAAkB;EAEtB,AADA,EAAY,EAAK,GACjB,EAAe,EAAK;CACtB;CAgCA,OACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IACE,WAAU;IACV,iBAAiB,MAAU;KAGzB,AAAI,EAAM,gBAAgB,WACxB,EAAe,EAAI;IAEvB;IACA,iBAAiB,MAAU;KACzB,AAAI,EAAM,gBAAgB,WACxB,EAAe,EAAK;IAExB;cAbF,CAeE,kBAAC,UAAD;KACE,KAAK;KACL,MAAK;KACL,eAAY;KACZ,cAAY,EAAE,EAAQ,oBAAoB;KAC1C,iBAAe;KACf,iBAAc;KACd,UArCiB,MAA+C;MAKxE,IAJA,EAAM,eAAe,GACrB,EAAM,gBAAgB,GAGlB,GAAe;OACjB,EAAU;OACV;MACF;MACA,EAAY,EAAI;KAClB;KA4BU,WAAW,EACT,+CACA,0CACF;eAEA,kBAAC,GAAD;MACE,WAAU;MACV,OAAO;MACP,eAAA;KACD,CAAA;IACK,CAAA,GACP,IACC,kBAAC,GAAD;KACE,SAAS;KACT,uBAAuB;KACvB,cACE,EAAkB,CAAe,KAxErB,MAA+C;MAMvE,AALA,EAAM,eAAe,GACrB,EAAM,gBAAgB,GAClB,KACF,EAAkB,EAAE,kBAAe,CAAC,GAEtC,EAAU;KACZ,IAmEkB,KAAA;KAEN,eACE,EAAkB,CAAe,KApEpB,MAA+C;MAMxE,AALA,EAAM,eAAe,GACrB,EAAM,gBAAgB,GAClB,KACF,EAAmB;OAAE;OAAgB;MAAU,CAAC,GAElD,EAAU;KACZ,IA+DkB,KAAA;KAEW;KACjB,UAAS;KACT,WAAU;KACV,WAAW;IACZ,CAAA,IACC,IACD;OACL,kBAAC,GAAD,CAAmB,CAAA,CAChB;MACL,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,GAAD,CAA+B,CAAA;IAC/B,kBAAC,GAAD,CAA6B,CAAA;IAC7B,kBAAC,GAAD,CAAmB,CAAA;GAChB;IACF;;AAET"}

package/dist/components/features/conversation/conversation-name.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("../../../hooks/use-conversation-id.cjs"),i=require("../../../utils/custom-toast-handlers.cjs"),a=require("../../../hooks/query/use-active-conversation.cjs"),o=require("../../../hooks/use-conversation-name-context-menu.cjs"),s=require("../conversation-panel/system-message-modal.cjs"),c=require("../conversation-panel/skills-modal.cjs"),l=require("../conversation-panel/hooks-modal.cjs"),u=require("../../../hooks/mutation/use-update-conversation.cjs"),d=require("../conversation-panel/ellipsis-button.cjs"),f=require("./conversation-name-context-menu.cjs"),p=require("../conversation-panel/confirm-delete-modal.cjs"),m=require("../conversation-panel/confirm-stop-modal.cjs"),h=require("./transcript-export-modal.cjs");let g=require("react");g=e.__toESM(g,1);let _=require("react/jsx-runtime");function v(){let{t:e}=t.useTranslation(`openhands`),{conversationId:v}=r.useConversationId(),{data:y}=a.useActiveConversation(),{mutate:b}=u.useUpdateConversation(),[x,S]=g.default.useState(`view`),[C,w]=g.default.useState(!1),[T,E]=g.default.useState(!1),D=g.default.useRef(null),O=g.default.useRef(null),{handleDelete:k,handleStop:A,handleDownloadConversation:j,handleDisplayCost:M,handleShowAgentTools:N,handleShowSkills:P,handleShowHooks:ee,handleTogglePublic:F,handleCopyShareLink:I,shareUrl:L,handleConfirmDelete:R,handleConfirmStop:z,systemModalVisible:B,setSystemModalVisible:V,skillsModalVisible:H,setSkillsModalVisible:U,hooksModalVisible:W,setHooksModalVisible:G,confirmDeleteModalVisible:K,setConfirmDeleteModalVisible:q,confirmStopModalVisible:J,setConfirmStopModalVisible:Y,systemMessage:X,shouldShowStop:Z,shouldShowDownloadConversation:Q,shouldShowDisplayCost:$,shouldShowAgentTools:te,shouldShowSkills:ne,shouldShowHooks:re}=o.useConversationNameContextMenu({conversationId:v,executionStatus:y?.execution_status,showOptions:!0,onContextMenuToggle:w});return g.default.useEffect(()=>{x===`edit`&&D.current?.focus()},[x]),y?(0,_.jsxs)(_.Fragment,{children:[(0,_.jsxs)(`div`,{className:`flex items-center gap-2 h-[22px] text-base font-normal text-left pl-0 lg:pl-1 min-w-0`,"data-testid":`conversation-name`,children:[x===`edit`?(0,_.jsx)(`input`,{ref:D,"data-testid":`conversation-name-input`,onClick:e=>{x===`edit`&&(e.preventDefault(),e.stopPropagation())},onBlur:()=>{if(D.current?.value&&v){let t=D.current.value.trim();t!==y?.title&&b({conversationId:v,newTitle:t},{onSuccess:()=>{i.displaySuccessToast(e(n.I18nKey.CONVERSATION$TITLE_UPDATED))}})}else D.current&&(D.current.value=y?.title??``);S(`view`)},onKeyUp:e=>{e.nativeEvent.isComposing||e.key===`Enter`&&e.currentTarget.blur()},type:`text`,defaultValue:y.title||``,className:`text-white leading-5 bg-transparent border-none outline-none text-base font-normal w-fit max-w-fit field-sizing-content`}):(0,_.jsx)(`div`,{className:`text-white leading-5 truncate`,"data-testid":`conversation-name-title`,onDoubleClick:()=>{S(`edit`)},title:y.title||``,children:y.title}),x!==`edit`&&(0,_.jsxs)(`div`,{ref:O,className:`relative flex items-center shrink-0`,children:[(0,_.jsx)(d.EllipsisButton,{onClick:e=>{e.preventDefault(),e.stopPropagation(),w(!C)},ariaLabel:e(n.I18nKey.COMMON$MORE_OPTIONS)}),C&&(0,_.jsx)(f.ConversationNameContextMenu,{onClose:()=>w(!1),onRename:e=>{e.preventDefault(),e.stopPropagation(),S(`edit`),w(!1)},onDelete:k,onStop:Z?A:void 0,onDisplayCost:$?M:void 0,onShowAgentTools:te?N:void 0,onShowSkills:ne?P:void 0,onShowHooks:re?ee:void 0,onTogglePublic:F,onCopyShareLink:I,shareUrl:L,onExportTranscript:e=>{e.preventDefault(),e.stopPropagation(),E(!0),w(!1)},onDownloadConversation:Q?j:void 0,position:`bottom`,anchorRef:O})]})]}),T&&v&&(0,_.jsx)(h.TranscriptExportModal,{conversationId:v,conversationUrl:y.conversation_url,sessionApiKey:y.session_api_key,conversationTitle:y.title,model:y.llm_model,onClose:()=>E(!1)}),(0,_.jsx)(s.SystemMessageModal,{isOpen:B,onClose:()=>V(!1),systemMessage:X||null}),H&&(0,_.jsx)(c.SkillsModal,{onClose:()=>U(!1)}),W&&(0,_.jsx)(l.HooksModal,{onClose:()=>G(!1)}),K&&(0,_.jsx)(p.ConfirmDeleteModal,{onConfirm:R,onCancel:()=>q(!1),conversationTitle:y?.title||``}),J&&(0,_.jsx)(m.ConfirmStopModal,{onConfirm:z,onCancel:()=>Y(!1)})]}):null}exports.ConversationName=v;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),n=require("../../../i18n/declaration.cjs"),r=require("../../../hooks/use-conversation-id.cjs"),i=require("../../../utils/custom-toast-handlers.cjs"),a=require("../../../hooks/query/use-active-conversation.cjs"),o=require("../../../hooks/use-conversation-name-context-menu.cjs"),s=require("../conversation-panel/system-message-modal.cjs"),c=require("../conversation-panel/skills-modal.cjs"),l=require("../conversation-panel/hooks-modal.cjs"),u=require("../conversation-panel/ellipsis-button.cjs"),d=require("../../../hooks/mutation/use-update-conversation.cjs"),f=require("./conversation-name-context-menu.cjs"),p=require("../conversation-panel/confirm-delete-modal.cjs"),m=require("../conversation-panel/confirm-stop-modal.cjs"),h=require("./transcript-export-modal.cjs");let g=require("react");g=e.__toESM(g,1);let _=require("react/jsx-runtime");function v(){let{t:e}=t.useTranslation(`openhands`),{conversationId:v}=r.useConversationId(),{data:y}=a.useActiveConversation(),{mutate:b}=d.useUpdateConversation(),[x,S]=g.default.useState(`view`),[C,w]=g.default.useState(!1),[T,E]=g.default.useState(!1),D=g.default.useRef(null),O=g.default.useRef(null),{handleDelete:k,handleStop:A,handleDownloadConversation:j,handleDisplayCost:M,handleShowAgentTools:N,handleShowSkills:P,handleShowHooks:ee,handleTogglePublic:F,handleCopyShareLink:I,shareUrl:L,handleConfirmDelete:R,handleConfirmStop:z,systemModalVisible:B,setSystemModalVisible:V,skillsModalVisible:H,setSkillsModalVisible:U,hooksModalVisible:W,setHooksModalVisible:G,confirmDeleteModalVisible:K,setConfirmDeleteModalVisible:q,confirmStopModalVisible:J,setConfirmStopModalVisible:Y,systemMessage:X,shouldShowStop:Z,shouldShowDownloadConversation:Q,shouldShowDisplayCost:$,shouldShowAgentTools:te,shouldShowSkills:ne,shouldShowHooks:re}=o.useConversationNameContextMenu({conversationId:v,executionStatus:y?.execution_status,showOptions:!0,onContextMenuToggle:w});return g.default.useEffect(()=>{x===`edit`&&D.current?.focus()},[x]),y?(0,_.jsxs)(_.Fragment,{children:[(0,_.jsxs)(`div`,{className:`flex items-center gap-2 h-[22px] text-base font-normal text-left pl-0 lg:pl-1 min-w-0`,"data-testid":`conversation-name`,children:[x===`edit`?(0,_.jsx)(`input`,{ref:D,"data-testid":`conversation-name-input`,onClick:e=>{x===`edit`&&(e.preventDefault(),e.stopPropagation())},onBlur:()=>{if(D.current?.value&&v){let t=D.current.value.trim();t!==y?.title&&b({conversationId:v,newTitle:t},{onSuccess:()=>{i.displaySuccessToast(e(n.I18nKey.CONVERSATION$TITLE_UPDATED))}})}else D.current&&(D.current.value=y?.title??``);S(`view`)},onKeyUp:e=>{e.nativeEvent.isComposing||e.key===`Enter`&&e.currentTarget.blur()},type:`text`,defaultValue:y.title||``,className:`text-white leading-5 bg-transparent border-none outline-none text-base font-normal w-fit max-w-fit field-sizing-content`}):(0,_.jsx)(`div`,{className:`text-white leading-5 truncate`,"data-testid":`conversation-name-title`,onDoubleClick:()=>{S(`edit`)},title:y.title||``,children:y.title}),x!==`edit`&&(0,_.jsxs)(`div`,{ref:O,className:`relative flex items-center shrink-0`,children:[(0,_.jsx)(u.EllipsisButton,{onClick:e=>{e.preventDefault(),e.stopPropagation(),w(!C)},ariaLabel:e(n.I18nKey.COMMON$MORE_OPTIONS)}),C&&(0,_.jsx)(f.ConversationNameContextMenu,{onClose:()=>w(!1),onRename:e=>{e.preventDefault(),e.stopPropagation(),S(`edit`),w(!1)},onDelete:k,onStop:Z?A:void 0,onDisplayCost:$?M:void 0,onShowAgentTools:te?N:void 0,onShowSkills:ne?P:void 0,onShowHooks:re?ee:void 0,onTogglePublic:F,onCopyShareLink:I,shareUrl:L,onExportTranscript:e=>{e.preventDefault(),e.stopPropagation(),E(!0),w(!1)},onDownloadConversation:Q?j:void 0,position:`bottom`,anchorRef:O})]})]}),T&&v&&(0,_.jsx)(h.TranscriptExportModal,{conversationId:v,conversationUrl:y.conversation_url,sessionApiKey:y.session_api_key,conversationTitle:y.title,model:y.llm_model,onClose:()=>E(!1)}),(0,_.jsx)(s.SystemMessageModal,{isOpen:B,onClose:()=>V(!1),systemMessage:X||null}),H&&(0,_.jsx)(c.SkillsModal,{onClose:()=>U(!1)}),W&&(0,_.jsx)(l.HooksModal,{onClose:()=>G(!1)}),K&&(0,_.jsx)(p.ConfirmDeleteModal,{onConfirm:R,onCancel:()=>q(!1),conversationTitle:y?.title||``}),J&&(0,_.jsx)(m.ConfirmStopModal,{onConfirm:z,onCancel:()=>Y(!1)})]}):null}exports.ConversationName=v;
 //# sourceMappingURL=conversation-name.cjs.map

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

@@ -7,8 +7,8 @@ import { useConversationNameContextMenu as a } from "../../../hooks/use-conversa
 import { SystemMessageModal as o } from "../conversation-panel/system-message-modal.js";
 import { SkillsModal as s } from "../conversation-panel/skills-modal.js";
 import { HooksModal as c } from "../conversation-panel/hooks-modal.js";
-import { useUpdateConversation as l } from "../../../hooks/mutation/use-update-conversation.js";
-import { EllipsisButton as u } from "../conversation-panel/ellipsis-button.js";
+import { EllipsisButton as l } from "../conversation-panel/ellipsis-button.js";
+import { useUpdateConversation as u } from "../../../hooks/mutation/use-update-conversation.js";
 import { ConversationNameContextMenu as d } from "./conversation-name-context-menu.js";
 import { ConfirmDeleteModal as f } from "../conversation-panel/confirm-delete-modal.js";
 import { ConfirmStopModal as p } from "../conversation-panel/confirm-stop-modal.js";
@@ -17,7 +17,7 @@ import h from "react";
 import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
 //#region src/components/features/conversation/conversation-name.tsx
 function y() {
-	let { t: y } = e("openhands"), { conversationId: b } = n(), { data: x } = i(), { mutate: S } = l(), [C, w] = h.useState("view"), [T, E] = h.useState(!1), [D, O] = h.useState(!1), k = h.useRef(null), A = h.useRef(null), { handleDelete: j, handleStop: M, handleDownloadConversation: N, handleDisplayCost: P, handleShowAgentTools: F, handleShowSkills: ee, handleShowHooks: I, handleTogglePublic: L, handleCopyShareLink: R, shareUrl: z, handleConfirmDelete: B, handleConfirmStop: V, systemModalVisible: H, setSystemModalVisible: U, skillsModalVisible: W, setSkillsModalVisible: G, hooksModalVisible: K, setHooksModalVisible: q, confirmDeleteModalVisible: J, setConfirmDeleteModalVisible: Y, confirmStopModalVisible: X, setConfirmStopModalVisible: Z, systemMessage: Q, shouldShowStop: $, shouldShowDownloadConversation: te, shouldShowDisplayCost: ne, shouldShowAgentTools: re, shouldShowSkills: ie, shouldShowHooks: ae } = a({
+	let { t: y } = e("openhands"), { conversationId: b } = n(), { data: x } = i(), { mutate: S } = u(), [C, w] = h.useState("view"), [T, E] = h.useState(!1), [D, O] = h.useState(!1), k = h.useRef(null), A = h.useRef(null), { handleDelete: j, handleStop: M, handleDownloadConversation: N, handleDisplayCost: P, handleShowAgentTools: F, handleShowSkills: ee, handleShowHooks: I, handleTogglePublic: L, handleCopyShareLink: R, shareUrl: z, handleConfirmDelete: B, handleConfirmStop: V, systemModalVisible: H, setSystemModalVisible: U, skillsModalVisible: W, setSkillsModalVisible: G, hooksModalVisible: K, setHooksModalVisible: q, confirmDeleteModalVisible: J, setConfirmDeleteModalVisible: Y, confirmStopModalVisible: X, setConfirmStopModalVisible: Z, systemMessage: Q, shouldShowStop: $, shouldShowDownloadConversation: te, shouldShowDisplayCost: ne, shouldShowAgentTools: re, shouldShowSkills: ie, shouldShowHooks: ae } = a({
 		conversationId: b,
 		executionStatus: x?.execution_status,
 		showOptions: !0,
@@ -64,7 +64,7 @@ function y() {
 			}), C !== "edit" && /* @__PURE__ */ v("div", {
 				ref: A,
 				className: "relative flex items-center shrink-0",
-				children: [/* @__PURE__ */ _(u, {
+				children: [/* @__PURE__ */ _(l, {
 					onClick: (e) => {
 						e.preventDefault(), e.stopPropagation(), E(!T);
 					},

package/dist/components/features/conversation/conversation-overview-automations-panel.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("../automations/automation-card-skeleton.cjs"),r=require("../../../hooks/query/use-automations.cjs"),i=require("../automations/automation-group.cjs"),a=require("../automations/add-automation-modal.cjs"),o=require("../automations/backend-not-configured.cjs"),s=require("../automations/empty-state.cjs"),c=require("../automations/error-state.cjs"),l=require("../../../hooks/query/use-automation-health.cjs");let u=require("react"),d=require("react/jsx-runtime");var f=()=>void 0;function p({openAdd:p}){let{t:m}=e.useTranslation(`openhands`),[h,g]=(0,u.useState)(p),{data:_,isLoading:v,refetch:y}=l.useAutomationHealth(),{data:b,isLoading:x,isError:S,refetch:C}=r.useAutomations({limit:50,offset:0,enabled:_?.status===`ok`});(0,u.useEffect)(()=>{p&&g(!0)},[p]);let w;return w=v||_?.status===`ok`&&x?(0,d.jsx)(n.AutomationCardSkeleton,{}):_?.status===`ok`?S?(0,d.jsx)(c.ErrorState,{onRetry:C}):b?.automations.length?(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(i.AutomationGroup,{title:m(t.I18nKey.CONVERSATION_PANEL$AUTOMATIONS),count:b.automations.length,automations:b.automations,view:`list`,onToggle:f,onRunNow:f,onDelete:f,onExport:f}),(0,d.jsx)(a.AddAutomationModal,{isOpen:h,onClose:()=>g(!1)})]}):(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(s.EmptyState,{}),(0,d.jsx)(a.AddAutomationModal,{isOpen:h,onClose:()=>g(!1)})]}):(0,d.jsx)(o.BackendUnavailable,{onRetry:y}),(0,d.jsx)(`div`,{"data-testid":`conversation-overview-automations-panel`,children:w})}exports.ConversationOverviewAutomationsPanel=p;
+//# sourceMappingURL=conversation-overview-automations-panel.cjs.map

package/dist/components/features/conversation/conversation-overview-automations-panel.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"conversation-overview-automations-panel.cjs","names":[],"sources":["../../../../src/components/features/conversation/conversation-overview-automations-panel.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { AutomationCardSkeleton } from \"#/components/features/automations/automation-card-skeleton\";\nimport { AutomationGroup } from \"#/components/features/automations/automation-group\";\nimport { AddAutomationModal } from \"#/components/features/automations/add-automation-modal\";\nimport { BackendNotConfigured } from \"#/components/features/automations/backend-not-configured\";\nimport { EmptyState } from \"#/components/features/automations/empty-state\";\nimport { ErrorState } from \"#/components/features/automations/error-state\";\nimport { useAutomations } from \"#/hooks/query/use-automations\";\nimport { useAutomationHealth } from \"#/hooks/query/use-automation-health\";\nimport { I18nKey } from \"#/i18n/declaration\";\n\ninterface ConversationOverviewAutomationsPanelProps {\n  openAdd: boolean;\n}\n\nconst NOOP = () => undefined;\n\n/** Reuses the existing Automations list and creation guidance in the drawer. */\nexport function ConversationOverviewAutomationsPanel({\n  openAdd,\n}: ConversationOverviewAutomationsPanelProps) {\n  const { t } = useTranslation(\"openhands\");\n  const [isAddModalOpen, setIsAddModalOpen] = useState(openAdd);\n  const {\n    data: health,\n    isLoading: isHealthLoading,\n    refetch: refetchHealth,\n  } = useAutomationHealth();\n  const { data, isLoading, isError, refetch } = useAutomations({\n    limit: 50,\n    offset: 0,\n    enabled: health?.status === \"ok\",\n  });\n\n  useEffect(() => {\n    if (openAdd) setIsAddModalOpen(true);\n  }, [openAdd]);\n\n  // Every state renders inside the same panel container so the drawer's\n  // DOM contract (one `conversation-overview-automations-panel` node) holds\n  // regardless of backend health or list contents.\n  let body;\n  if (isHealthLoading || (health?.status === \"ok\" && isLoading)) {\n    body = <AutomationCardSkeleton />;\n  } else if (health?.status !== \"ok\") {\n    body = <BackendNotConfigured onRetry={refetchHealth} />;\n  } else if (isError) {\n    body = <ErrorState onRetry={refetch} />;\n  } else if (!data?.automations.length) {\n    body = (\n      <>\n        <EmptyState />\n        <AddAutomationModal\n          isOpen={isAddModalOpen}\n          onClose={() => setIsAddModalOpen(false)}\n        />\n      </>\n    );\n  } else {\n    body = (\n      <>\n        <AutomationGroup\n          title={t(I18nKey.CONVERSATION_PANEL$AUTOMATIONS)}\n          count={data.automations.length}\n          automations={data.automations}\n          view=\"list\"\n          onToggle={NOOP}\n          onRunNow={NOOP}\n          onDelete={NOOP}\n          onExport={NOOP}\n        />\n        <AddAutomationModal\n          isOpen={isAddModalOpen}\n          onClose={() => setIsAddModalOpen(false)}\n        />\n      </>\n    );\n  }\n\n  return (\n    <div data-testid=\"conversation-overview-automations-panel\">{body}</div>\n  );\n}\n"],"mappings":"soBAgBA,IAAM,MAAa,IAAA,GAGnB,SAAgB,EAAqC,CACnD,WAC4C,CAC5C,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAClC,CAAC,EAAgB,IAAA,EAAA,EAAA,UAA8B,CAAO,EACtD,CACJ,KAAM,EACN,UAAW,EACX,QAAS,GACP,EAAA,oBAAoB,EAClB,CAAE,OAAM,YAAW,UAAS,WAAY,EAAA,eAAe,CAC3D,MAAO,GACP,OAAQ,EACR,QAAS,GAAQ,SAAW,IAC9B,CAAC,GAED,EAAA,EAAA,eAAgB,CACV,GAAS,EAAkB,EAAI,CACrC,EAAG,CAAC,CAAO,CAAC,EAKZ,IAAI,EAsCJ,MArCA,CAGE,EAHE,GAAoB,GAAQ,SAAW,MAAQ,GAC1C,EAAA,EAAA,KAAC,EAAA,uBAAD,CAAyB,CAAA,EACvB,GAAQ,SAAW,KAEnB,GACF,EAAA,EAAA,KAAC,EAAA,WAAD,CAAY,QAAS,CAAU,CAAA,EAC5B,GAAM,YAAY,QAY1B,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,KAAC,EAAA,gBAAD,CACE,MAAO,EAAE,EAAA,QAAQ,8BAA8B,EAC/C,MAAO,EAAK,YAAY,OACxB,YAAa,EAAK,YAClB,KAAK,OACL,SAAU,EACV,SAAU,EACV,SAAU,EACV,SAAU,CACX,CAAA,GACD,EAAA,EAAA,KAAC,EAAA,mBAAD,CACE,OAAQ,EACR,YAAe,EAAkB,EAAK,CACvC,CAAA,CACD,CAAA,CAAA,GAzBF,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,KAAC,EAAA,WAAD,CAAa,CAAA,GACb,EAAA,EAAA,KAAC,EAAA,mBAAD,CACE,OAAQ,EACR,YAAe,EAAkB,EAAK,CACvC,CAAA,CACD,CAAA,CAAA,GAXG,EAAA,EAAA,KAAC,EAAA,mBAAD,CAAsB,QAAS,CAAgB,CAAA,GAmCtD,EAAA,EAAA,KAAC,MAAD,CAAK,cAAY,mDAA2C,CAAU,CAAA,CAE1E"}

package/dist/components/features/conversation/conversation-overview-automations-panel.d.ts

@@ -0,0 +1,6 @@
+interface ConversationOverviewAutomationsPanelProps {
+    openAdd: boolean;
+}
+/** Reuses the existing Automations list and creation guidance in the drawer. */
+export declare function ConversationOverviewAutomationsPanel({ openAdd, }: ConversationOverviewAutomationsPanelProps): import("react").JSX.Element;
+export {};