@openhands/agent-canvas 1.12.0 → 1.13.0

package/dist/components/features/conversation-panel/conversation-card/conversation-card.js

@@ -1,134 +1,144 @@
 import { useTranslation as e } from "../../../../node_modules/react-i18next/dist/es/useTranslation.js";
 import { I18nKey as t } from "../../../../i18n/declaration.js";
-import { Pin as n } from "../../../../node_modules/lucide-react/dist/esm/icons/pin.js";
-import { cn as r } from "../../../../utils/utils.js";
-import { getDisplayConversationTags as i } from "../../../../api/agent-server-adapter.js";
-import ee from "../../../../api/conversation-service/conversation-service.api.js";
-import { useTracking as te } from "../../../../hooks/use-tracking.js";
-import { useDownloadConversation as ne } from "../../../../hooks/use-download-conversation.js";
-import { transformVSCodeUrl as a } from "../../../../utils/vscode-url-helper.js";
-import { formatTimeDelta as o } from "../../../../utils/format-time-delta.js";
-import { ConversationCardHeader as s } from "./conversation-card-header.js";
-import { ConversationCardActions as c } from "./conversation-card-actions.js";
-import { ConversationCardFooter as l } from "./conversation-card-footer.js";
-import { ConversationStatusBadges as u } from "./conversation-status-badges.js";
-import d from "react";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { Pin as ee } from "../../../../node_modules/lucide-react/dist/esm/icons/pin.js";
+import { cn as n } from "../../../../utils/utils.js";
+import { getDisplayConversationTags as te } from "../../../../api/agent-server-adapter.js";
+import ne from "../../../../api/conversation-service/conversation-service.api.js";
+import { useTracking as re } from "../../../../hooks/use-tracking.js";
+import { useDownloadConversation as r } from "../../../../hooks/use-download-conversation.js";
+import { transformVSCodeUrl as ie } from "../../../../utils/vscode-url-helper.js";
+import { formatTimeDelta as i } from "../../../../utils/format-time-delta.js";
+import { hoverRevealActionClassName as a, hoverRevealPinnedTimestampClassName as o, hoverRevealReserveClassName as ae, hoverRevealYieldClassName as oe } from "../../../../utils/hover-reveal-classes.js";
+import { ConversationCardHeader as se } from "./conversation-card-header.js";
+import { ConversationCardActions as s } from "./conversation-card-actions.js";
+import { ConversationCardFooter as ce } from "./conversation-card-footer.js";
+import { ConversationStatusBadges as c } from "./conversation-status-badges.js";
+import l from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/components/features/conversation-panel/conversation-card/conversation-card.tsx
-function m({ onClick: m, onDelete: h, onStop: g, onChangeTitle: _, showOptions: v, title: y, selectedRepository: b, lastUpdatedAt: x, createdAt: S, conversationId: C, executionStatus: w, sandboxStatus: T, contextMenuOpen: E = !1, onContextMenuToggle: D, isActive: O = !1, workspaceWorkingDir: k, showRepositoryMetadata: A = !0, llmModel: j = null, showLlmProfiles: M = !1, agentKind: N = null, acpServer: P = null, tags: F = null, showTags: I = !1, isPinned: L = !1, onTogglePin: R, alwaysShowPinIcon: z = !1 }) {
-	let { t: B } = e("openhands"), { trackDownloadVsCodeButtonClicked: V } = te(), [H, U] = d.useState("view"), { mutateAsync: W } = ne(), G = (e) => {
+function f({ onClick: f, onDelete: p, onArchive: m, onUnarchive: h, onStop: g, onChangeTitle: _, showOptions: v, title: y, selectedRepository: le, lastUpdatedAt: b, createdAt: x, conversationId: S, executionStatus: C, sandboxStatus: w, contextMenuOpen: T = !1, onContextMenuToggle: E, isActive: D = !1, workspaceWorkingDir: O, showRepositoryMetadata: k = !0, llmModel: A = null, showLlmProfiles: j = !1, agentKind: M = null, acpServer: N = null, tags: P = null, showTags: F = !1, isArchived: I = !1, isPinned: L = !1, onTogglePin: R, alwaysShowPinIcon: z = !1 }) {
+	let { t: B } = e("openhands"), { trackDownloadVsCodeButtonClicked: V } = re(), [H, U] = l.useState("view"), { mutateAsync: ue } = r(), de = (e) => {
 		e !== "" && e !== y && _?.(e), U("view");
+	}, W = (e) => {
+		e.preventDefault(), e.stopPropagation(), p?.(), E?.(!1);
+	}, G = (e) => {
+		e.preventDefault(), e.stopPropagation(), m?.(), E?.(!1);
 	}, K = (e) => {
-		e.preventDefault(), e.stopPropagation(), h?.(), D?.(!1);
+		e.preventDefault(), e.stopPropagation(), h?.(), E?.(!1);
 	}, q = (e) => {
-		e.preventDefault(), e.stopPropagation(), g?.(), D?.(!1);
+		e.preventDefault(), e.stopPropagation(), g?.(), E?.(!1);
 	}, J = (e) => {
-		e.preventDefault(), e.stopPropagation(), U("edit"), D?.(!1);
+		e.preventDefault(), e.stopPropagation(), U("edit"), E?.(!1);
 	}, Y = async (e) => {
-		if (e.preventDefault(), e.stopPropagation(), V(), C) try {
-			let e = await ee.getVSCodeUrl(C);
+		if (e.preventDefault(), e.stopPropagation(), V(), S) try {
+			let e = await ne.getVSCodeUrl(S);
 			if (e.vscode_url) {
-				let t = a(e.vscode_url);
+				let t = ie(e.vscode_url);
 				t && window.open(t, "_blank");
 			}
 		} catch {}
-		D?.(!1);
+		E?.(!1);
 	}, X = async (e) => {
-		e.preventDefault(), e.stopPropagation(), C && await W(C), D?.(!1);
-	}, re = (e) => {
+		e.preventDefault(), e.stopPropagation(), S && await ue(S), E?.(!1);
+	}, fe = (e) => {
 		e.preventDefault(), e.stopPropagation(), R?.();
-	}, ie = () => /* @__PURE__ */ f("button", {
+	}, pe = () => /* @__PURE__ */ u("button", {
 		type: "button",
-		"data-testid": C ? `conversation-pin-toggle-${C}` : "conversation-pin-toggle",
+		"data-testid": S ? `conversation-pin-toggle-${S}` : "conversation-pin-toggle",
 		"aria-pressed": L,
 		"aria-label": B(L ? t.CONVERSATION_PANEL$UNPIN_CONVERSATION : t.CONVERSATION_PANEL$PIN_CONVERSATION),
-		onClick: re,
-		className: r("flex shrink-0 cursor-pointer items-center justify-center rounded-md p-1", "text-[var(--oh-muted)] hover:bg-white/10 hover:text-white"),
-		children: /* @__PURE__ */ f(n, {
-			className: r("h-3.5 w-3.5", L && "fill-current"),
+		onClick: fe,
+		className: n("flex shrink-0 cursor-pointer items-center justify-center rounded-md p-1", "text-[var(--oh-muted)] hover:bg-white/10 hover:text-white"),
+		children: /* @__PURE__ */ u(ee, {
+			className: n("h-3.5 w-3.5", L && "fill-current"),
 			"aria-hidden": !0
 		})
-	}), Z = !!(h || _ || v), Q = Z || !!R, $ = z && L && !!R, ae = A || M && (N === "acp" || !!j) || I && i(F).length > 0;
-	return /* @__PURE__ */ p("div", {
+	}), Z = !!(p || m || h || _ || v), Q = Z || !!R, $ = z && L && !!R, me = k || I || j && (M === "acp" || !!A) || F && te(P).length > 0;
+	return /* @__PURE__ */ d("div", {
 		"data-testid": "conversation-card",
-		"data-context-menu-open": E.toString(),
-		"data-active": O ? "true" : "false",
-		onClick: m,
-		className: r("group relative h-auto w-full cursor-pointer rounded-md py-1 pl-2 pr-1 transition-colors", !E && "hover:bg-[var(--oh-surface)]", (O || E) && "bg-[var(--oh-surface)]"),
-		children: [/* @__PURE__ */ p("div", {
+		"data-context-menu-open": T.toString(),
+		"data-active": D ? "true" : "false",
+		onClick: f,
+		className: n("group relative h-auto w-full cursor-pointer rounded-md py-1 pl-2 pr-1 transition-colors", !T && "hover:bg-[var(--oh-surface)]", (D || T) && "bg-[var(--oh-surface)]"),
+		children: [/* @__PURE__ */ d("div", {
 			className: "flex items-center w-full min-w-0",
-			children: [/* @__PURE__ */ p("div", {
+			children: [/* @__PURE__ */ d("div", {
 				className: "flex items-center gap-2 flex-1 min-w-0 overflow-hidden",
-				children: [/* @__PURE__ */ f(s, {
+				children: [/* @__PURE__ */ u(se, {
 					title: y,
 					titleMode: H,
-					onTitleSave: G,
-					executionStatus: w,
-					sandboxStatus: T
-				}), T === "ERROR" && /* @__PURE__ */ f(u, {})]
-			}), /* @__PURE__ */ p("div", {
-				className: r("relative ml-auto pl-2 flex items-center justify-end shrink-0", $ ? "min-w-[3.75rem]" : Q && "group-hover:min-w-[3.75rem] group-focus-within:min-w-[3.75rem]", E && "min-w-[3.75rem]"),
-				children: [!$ && (S ?? x) && /* @__PURE__ */ f("p", {
-					className: r("text-xs text-[var(--oh-muted)] text-right whitespace-nowrap transition-opacity -translate-x-1.5", Q && "group-hover:opacity-0 group-focus-within:opacity-0", E && "opacity-0"),
-					children: /* @__PURE__ */ f("time", { children: o(x ?? S) })
-				}), Q ? /* @__PURE__ */ p("div", {
-					className: r("absolute right-0 top-1/2 flex -translate-y-1/2 items-center gap-0.5 transition-opacity", $ ? "pointer-events-auto visible opacity-100" : r("pointer-events-none opacity-0 invisible", "group-hover:pointer-events-auto group-hover:opacity-100 group-hover:visible", "group-focus-within:pointer-events-auto group-focus-within:opacity-100 group-focus-within:visible"), E && "pointer-events-auto visible opacity-100"),
+					onTitleSave: de,
+					executionStatus: C,
+					sandboxStatus: w
+				}), w === "ERROR" && /* @__PURE__ */ u(c, {})]
+			}), /* @__PURE__ */ d("div", {
+				className: n("relative ml-auto pl-2 flex items-center justify-end shrink-0", $ ? "min-w-[3.75rem]" : Q && ae(T)),
+				children: [!$ && (x ?? b) && /* @__PURE__ */ u("p", {
+					className: n("text-xs text-[var(--oh-muted)] text-right whitespace-nowrap transition-opacity -translate-x-1.5", Q && oe(T)),
+					children: /* @__PURE__ */ u("time", { children: i(b ?? x) })
+				}), Q ? /* @__PURE__ */ d("div", {
+					className: n("absolute right-0 top-1/2 flex -translate-y-1/2 items-center gap-0.5 transition-opacity", $ ? "pointer-events-auto visible opacity-100" : a(T)),
 					children: [
-						R ? ie() : null,
-						$ && (S ?? x) && Z ? /* @__PURE__ */ p("div", {
+						R ? pe() : null,
+						$ && (x ?? b) && Z ? /* @__PURE__ */ d("div", {
 							className: "relative shrink-0",
-							children: [/* @__PURE__ */ f("div", {
-								className: r(!E && "invisible pointer-events-none group-hover:visible group-hover:pointer-events-auto group-focus-within:visible group-focus-within:pointer-events-auto"),
-								children: /* @__PURE__ */ f(c, {
-									contextMenuOpen: E,
-									onContextMenuToggle: D || (() => {}),
-									onDelete: h && K,
+							children: [/* @__PURE__ */ u("div", {
+								className: a(T),
+								children: /* @__PURE__ */ u(s, {
+									contextMenuOpen: T,
+									onContextMenuToggle: E || (() => {}),
+									onDelete: p && W,
+									onArchive: m && G,
+									onUnarchive: h && K,
 									onStop: g && q,
 									onEdit: _ && J,
 									onDownloadViaVSCode: Y,
 									onDownloadConversation: X,
-									executionStatus: w,
-									conversationId: C,
+									executionStatus: C,
+									conversationId: S,
 									showOptions: v
 								})
-							}), /* @__PURE__ */ f("p", {
-								className: r("pointer-events-none absolute inset-0 flex items-center justify-end", "text-xs text-[var(--oh-muted)] whitespace-nowrap -translate-x-1.5", "group-hover:hidden group-focus-within:hidden", E && "hidden"),
-								children: /* @__PURE__ */ f("time", { children: o(x ?? S) })
+							}), /* @__PURE__ */ u("p", {
+								className: n("pointer-events-none absolute inset-0 items-center justify-end", "text-xs text-[var(--oh-muted)] whitespace-nowrap -translate-x-1.5", o(T)),
+								children: /* @__PURE__ */ u("time", { children: i(b ?? x) })
 							})]
 						}) : null,
-						!$ && Z ? /* @__PURE__ */ f(c, {
-							contextMenuOpen: E,
-							onContextMenuToggle: D || (() => {}),
-							onDelete: h && K,
+						!$ && Z ? /* @__PURE__ */ u(s, {
+							contextMenuOpen: T,
+							onContextMenuToggle: E || (() => {}),
+							onDelete: p && W,
+							onArchive: m && G,
+							onUnarchive: h && K,
 							onStop: g && q,
 							onEdit: _ && J,
 							onDownloadViaVSCode: Y,
 							onDownloadConversation: X,
-							executionStatus: w,
-							conversationId: C,
+							executionStatus: C,
+							conversationId: S,
 							showOptions: v
 						}) : null
 					]
 				}) : null]
 			})]
-		}), ae && /* @__PURE__ */ f(l, {
-			selectedRepository: b,
-			lastUpdatedAt: x,
-			createdAt: S,
-			executionStatus: w,
-			workspaceWorkingDir: k,
-			showRepositoryMetadata: A,
+		}), me && /* @__PURE__ */ u(ce, {
+			selectedRepository: le,
+			lastUpdatedAt: b,
+			createdAt: x,
+			executionStatus: C,
+			workspaceWorkingDir: O,
+			showRepositoryMetadata: k,
 			showTimestamp: !1,
-			llmModel: j,
-			showAgentChip: M,
-			agentKind: N,
-			acpServer: P,
-			tags: F,
-			showTags: I
+			llmModel: A,
+			showAgentChip: j,
+			agentKind: M,
+			acpServer: N,
+			tags: P,
+			showTags: F,
+			isArchived: I
 		})]
 	});
 }
 //#endregion
-export { m as ConversationCard };
+export { f as ConversationCard };
 
 //# sourceMappingURL=conversation-card.js.map

package/dist/components/features/conversation-panel/conversation-card/conversation-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"conversation-card.js","names":[],"sources":["../../../../../src/components/features/conversation-panel/conversation-card/conversation-card.tsx"],"sourcesContent":["import React from \"react\";\nimport { Pin } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useTracking } from \"#/hooks/use-tracking\";\nimport { cn } from \"#/utils/utils\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { transformVSCodeUrl } from \"#/utils/vscode-url-helper\";\nimport ConversationService from \"#/api/conversation-service/conversation-service.api\";\nimport { getDisplayConversationTags } from \"#/api/agent-server-adapter\";\nimport { ExecutionStatus } from \"#/types/agent-server/core/base/common\";\nimport { SandboxStatus } from \"#/api/conversation-service/agent-server-conversation-service.types\";\nimport { RepositorySelection } from \"#/api/open-hands.types\";\nimport { formatTimeDelta } from \"#/utils/format-time-delta\";\nimport { ConversationCardHeader } from \"./conversation-card-header\";\nimport { ConversationCardActions } from \"./conversation-card-actions\";\nimport { ConversationCardFooter } from \"./conversation-card-footer\";\nimport { ConversationStatusBadges } from \"./conversation-status-badges\";\nimport { useDownloadConversation } from \"#/hooks/use-download-conversation\";\n\ninterface ConversationCardProps {\n  onClick?: () => void;\n  onDelete?: () => void;\n  onStop?: () => void;\n  onChangeTitle?: (title: string) => void;\n  showOptions?: boolean;\n  title: string;\n  selectedRepository: RepositorySelection | null;\n  lastUpdatedAt: string;\n  createdAt?: string;\n  executionStatus?: ExecutionStatus | null;\n  sandboxStatus?: SandboxStatus | null;\n  conversationId?: string;\n  contextMenuOpen?: boolean;\n  onContextMenuToggle?: (isOpen: boolean) => void;\n  isActive?: boolean;\n  workspaceWorkingDir?: string | null;\n  showRepositoryMetadata?: boolean;\n  llmModel?: string | null;\n  showLlmProfiles?: boolean;\n  agentKind?: \"openhands\" | \"acp\" | null;\n  acpServer?: string | null;\n  tags?: Record<string, string> | null;\n  /** Gates the tag-chip row; wired to the panel's \"Tags\" metadata toggle. */\n  showTags?: boolean;\n  isPinned?: boolean;\n  onTogglePin?: () => void;\n  /** When true and pinned, keep the pin icon visible without hovering. */\n  alwaysShowPinIcon?: boolean;\n}\n\nexport function ConversationCard({\n  onClick,\n  onDelete,\n  onStop,\n  onChangeTitle,\n  showOptions,\n  title,\n  selectedRepository,\n  lastUpdatedAt,\n  createdAt,\n  conversationId,\n  executionStatus,\n  sandboxStatus,\n  contextMenuOpen = false,\n  onContextMenuToggle,\n  isActive = false,\n  workspaceWorkingDir,\n  showRepositoryMetadata = true,\n  llmModel = null,\n  showLlmProfiles = false,\n  agentKind = null,\n  acpServer = null,\n  tags = null,\n  showTags = false,\n  isPinned = false,\n  onTogglePin,\n  alwaysShowPinIcon = false,\n}: ConversationCardProps) {\n  const { t } = useTranslation(\"openhands\");\n  const { trackDownloadVsCodeButtonClicked } = useTracking();\n  const [titleMode, setTitleMode] = React.useState<\"view\" | \"edit\">(\"view\");\n  const { mutateAsync: downloadConversation } = useDownloadConversation();\n\n  const onTitleSave = (newTitle: string) => {\n    if (newTitle !== \"\" && newTitle !== title) {\n      onChangeTitle?.(newTitle);\n    }\n    setTitleMode(\"view\");\n  };\n\n  const handleDelete = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    onDelete?.();\n    onContextMenuToggle?.(false);\n  };\n\n  const handleStop = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    onStop?.();\n    onContextMenuToggle?.(false);\n  };\n\n  const handleEdit = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    setTitleMode(\"edit\");\n    onContextMenuToggle?.(false);\n  };\n\n  const handleDownloadViaVSCode = async (\n    event: React.MouseEvent<HTMLButtonElement>,\n  ) => {\n    event.preventDefault();\n    event.stopPropagation();\n    trackDownloadVsCodeButtonClicked();\n\n    // Fetch the VS Code URL from the API\n    if (conversationId) {\n      try {\n        const data = await ConversationService.getVSCodeUrl(conversationId);\n        if (data.vscode_url) {\n          const transformedUrl = transformVSCodeUrl(data.vscode_url);\n          if (transformedUrl) {\n            window.open(transformedUrl, \"_blank\");\n          }\n        }\n        // VS Code URL not available\n      } catch {\n        // Failed to fetch VS Code URL\n      }\n    }\n\n    onContextMenuToggle?.(false);\n  };\n\n  const handleDownloadConversation = async (\n    event: React.MouseEvent<HTMLButtonElement>,\n  ) => {\n    event.preventDefault();\n    event.stopPropagation();\n\n    if (conversationId) {\n      await downloadConversation(conversationId);\n    }\n    onContextMenuToggle?.(false);\n  };\n\n  const handleTogglePin = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    onTogglePin?.();\n  };\n\n  const renderPinButton = () => (\n    <button\n      type=\"button\"\n      data-testid={\n        conversationId\n          ? `conversation-pin-toggle-${conversationId}`\n          : \"conversation-pin-toggle\"\n      }\n      aria-pressed={isPinned}\n      aria-label={\n        isPinned\n          ? t(I18nKey.CONVERSATION_PANEL$UNPIN_CONVERSATION)\n          : t(I18nKey.CONVERSATION_PANEL$PIN_CONVERSATION)\n      }\n      onClick={handleTogglePin}\n      className={cn(\n        \"flex shrink-0 cursor-pointer items-center justify-center rounded-md p-1\",\n        \"text-[var(--oh-muted)] hover:bg-white/10 hover:text-white\",\n      )}\n    >\n      <Pin\n        className={cn(\"h-3.5 w-3.5\", isPinned && \"fill-current\")}\n        aria-hidden\n      />\n    </button>\n  );\n\n  const hasContextMenu = !!(onDelete || onChangeTitle || showOptions);\n  const hasHoverActions = hasContextMenu || !!onTogglePin;\n  const showPersistentPinIcon = alwaysShowPinIcon && isPinned && !!onTogglePin;\n  const shouldRenderFooter =\n    showRepositoryMetadata ||\n    (showLlmProfiles && (agentKind === \"acp\" || !!llmModel)) ||\n    (showTags && getDisplayConversationTags(tags).length > 0);\n\n  return (\n    <div\n      data-testid=\"conversation-card\"\n      data-context-menu-open={contextMenuOpen.toString()}\n      data-active={isActive ? \"true\" : \"false\"}\n      onClick={onClick}\n      className={cn(\n        \"group relative h-auto w-full cursor-pointer rounded-md py-1 pl-2 pr-1 transition-colors\",\n        !contextMenuOpen && \"hover:bg-[var(--oh-surface)]\",\n        (isActive || contextMenuOpen) && \"bg-[var(--oh-surface)]\",\n      )}\n    >\n      <div className=\"flex items-center w-full min-w-0\">\n        <div className=\"flex items-center gap-2 flex-1 min-w-0 overflow-hidden\">\n          <ConversationCardHeader\n            title={title}\n            titleMode={titleMode}\n            onTitleSave={onTitleSave}\n            executionStatus={executionStatus}\n            sandboxStatus={sandboxStatus}\n          />\n          {sandboxStatus === \"ERROR\" && <ConversationStatusBadges />}\n        </div>\n\n        <div\n          className={cn(\n            \"relative ml-auto pl-2 flex items-center justify-end shrink-0\",\n            // The hover action overlay (pin + ellipsis) is absolutely\n            // positioned, so reserve its width so the flex-1 title truncates\n            // instead of colliding with the buttons. Pinned cards keep the pin\n            // visible at rest, so reserve the width always for those.\n            showPersistentPinIcon\n              ? \"min-w-[3.75rem]\"\n              : hasHoverActions &&\n                  \"group-hover:min-w-[3.75rem] group-focus-within:min-w-[3.75rem]\",\n            contextMenuOpen && \"min-w-[3.75rem]\",\n          )}\n        >\n          {!showPersistentPinIcon && (createdAt ?? lastUpdatedAt) && (\n            <p\n              className={cn(\n                \"text-xs text-[var(--oh-muted)] text-right whitespace-nowrap transition-opacity -translate-x-1.5\",\n                hasHoverActions &&\n                  \"group-hover:opacity-0 group-focus-within:opacity-0\",\n                contextMenuOpen && \"opacity-0\",\n              )}\n            >\n              <time>{formatTimeDelta(lastUpdatedAt ?? createdAt)}</time>\n            </p>\n          )}\n\n          {hasHoverActions ? (\n            <div\n              className={cn(\n                \"absolute right-0 top-1/2 flex -translate-y-1/2 items-center gap-0.5 transition-opacity\",\n                showPersistentPinIcon\n                  ? \"pointer-events-auto visible opacity-100\"\n                  : cn(\n                      \"pointer-events-none opacity-0 invisible\",\n                      \"group-hover:pointer-events-auto group-hover:opacity-100 group-hover:visible\",\n                      \"group-focus-within:pointer-events-auto group-focus-within:opacity-100 group-focus-within:visible\",\n                    ),\n                contextMenuOpen && \"pointer-events-auto visible opacity-100\",\n              )}\n            >\n              {onTogglePin ? renderPinButton() : null}\n              {showPersistentPinIcon &&\n              (createdAt ?? lastUpdatedAt) &&\n              hasContextMenu ? (\n                <div className=\"relative shrink-0\">\n                  <div\n                    className={cn(\n                      !contextMenuOpen &&\n                        \"invisible pointer-events-none group-hover:visible group-hover:pointer-events-auto group-focus-within:visible group-focus-within:pointer-events-auto\",\n                    )}\n                  >\n                    <ConversationCardActions\n                      contextMenuOpen={contextMenuOpen}\n                      onContextMenuToggle={onContextMenuToggle || (() => {})}\n                      onDelete={onDelete && handleDelete}\n                      onStop={onStop && handleStop}\n                      onEdit={onChangeTitle && handleEdit}\n                      onDownloadViaVSCode={handleDownloadViaVSCode}\n                      onDownloadConversation={handleDownloadConversation}\n                      executionStatus={executionStatus}\n                      conversationId={conversationId}\n                      showOptions={showOptions}\n                    />\n                  </div>\n                  <p\n                    className={cn(\n                      \"pointer-events-none absolute inset-0 flex items-center justify-end\",\n                      \"text-xs text-[var(--oh-muted)] whitespace-nowrap -translate-x-1.5\",\n                      \"group-hover:hidden group-focus-within:hidden\",\n                      contextMenuOpen && \"hidden\",\n                    )}\n                  >\n                    <time>{formatTimeDelta(lastUpdatedAt ?? createdAt)}</time>\n                  </p>\n                </div>\n              ) : null}\n              {!showPersistentPinIcon && hasContextMenu ? (\n                <ConversationCardActions\n                  contextMenuOpen={contextMenuOpen}\n                  onContextMenuToggle={onContextMenuToggle || (() => {})}\n                  onDelete={onDelete && handleDelete}\n                  onStop={onStop && handleStop}\n                  onEdit={onChangeTitle && handleEdit}\n                  onDownloadViaVSCode={handleDownloadViaVSCode}\n                  onDownloadConversation={handleDownloadConversation}\n                  executionStatus={executionStatus}\n                  conversationId={conversationId}\n                  showOptions={showOptions}\n                />\n              ) : null}\n            </div>\n          ) : null}\n        </div>\n      </div>\n\n      {shouldRenderFooter && (\n        <ConversationCardFooter\n          selectedRepository={selectedRepository}\n          lastUpdatedAt={lastUpdatedAt}\n          createdAt={createdAt}\n          executionStatus={executionStatus}\n          workspaceWorkingDir={workspaceWorkingDir}\n          showRepositoryMetadata={showRepositoryMetadata}\n          showTimestamp={false}\n          llmModel={llmModel}\n          showAgentChip={showLlmProfiles}\n          agentKind={agentKind}\n          acpServer={acpServer}\n          tags={tags}\n          showTags={showTags}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"conversation-card.js","names":[],"sources":["../../../../../src/components/features/conversation-panel/conversation-card/conversation-card.tsx"],"sourcesContent":["import React from \"react\";\nimport { Pin } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useTracking } from \"#/hooks/use-tracking\";\nimport { cn } from \"#/utils/utils\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { transformVSCodeUrl } from \"#/utils/vscode-url-helper\";\nimport ConversationService from \"#/api/conversation-service/conversation-service.api\";\nimport { getDisplayConversationTags } from \"#/api/agent-server-adapter\";\nimport { ExecutionStatus } from \"#/types/agent-server/core/base/common\";\nimport { SandboxStatus } from \"#/api/conversation-service/agent-server-conversation-service.types\";\nimport { RepositorySelection } from \"#/api/open-hands.types\";\nimport { formatTimeDelta } from \"#/utils/format-time-delta\";\nimport {\n  hoverRevealActionClassName,\n  hoverRevealPinnedTimestampClassName,\n  hoverRevealReserveClassName,\n  hoverRevealYieldClassName,\n} from \"#/utils/hover-reveal-classes\";\nimport { ConversationCardHeader } from \"./conversation-card-header\";\nimport { ConversationCardActions } from \"./conversation-card-actions\";\nimport { ConversationCardFooter } from \"./conversation-card-footer\";\nimport { ConversationStatusBadges } from \"./conversation-status-badges\";\nimport { useDownloadConversation } from \"#/hooks/use-download-conversation\";\n\ninterface ConversationCardProps {\n  onClick?: () => void;\n  onDelete?: () => void;\n  onArchive?: () => void;\n  /**\n   * Restores an archived conversation. The panel passes this instead of\n   * `onArchive` for rows that are already archived, so the menu offers exactly\n   * one of the two directions.\n   */\n  onUnarchive?: () => void;\n  onStop?: () => void;\n  onChangeTitle?: (title: string) => void;\n  showOptions?: boolean;\n  title: string;\n  selectedRepository: RepositorySelection | null;\n  lastUpdatedAt: string;\n  createdAt?: string;\n  executionStatus?: ExecutionStatus | null;\n  sandboxStatus?: SandboxStatus | null;\n  conversationId?: string;\n  contextMenuOpen?: boolean;\n  onContextMenuToggle?: (isOpen: boolean) => void;\n  isActive?: boolean;\n  workspaceWorkingDir?: string | null;\n  showRepositoryMetadata?: boolean;\n  llmModel?: string | null;\n  showLlmProfiles?: boolean;\n  agentKind?: \"openhands\" | \"acp\" | null;\n  acpServer?: string | null;\n  tags?: Record<string, string> | null;\n  /** Gates the tag-chip row; wired to the panel's \"Tags\" metadata toggle. */\n  showTags?: boolean;\n  isArchived?: boolean;\n  isPinned?: boolean;\n  onTogglePin?: () => void;\n  /** When true and pinned, keep the pin icon visible without hovering. */\n  alwaysShowPinIcon?: boolean;\n}\n\nexport function ConversationCard({\n  onClick,\n  onDelete,\n  onArchive,\n  onUnarchive,\n  onStop,\n  onChangeTitle,\n  showOptions,\n  title,\n  selectedRepository,\n  lastUpdatedAt,\n  createdAt,\n  conversationId,\n  executionStatus,\n  sandboxStatus,\n  contextMenuOpen = false,\n  onContextMenuToggle,\n  isActive = false,\n  workspaceWorkingDir,\n  showRepositoryMetadata = true,\n  llmModel = null,\n  showLlmProfiles = false,\n  agentKind = null,\n  acpServer = null,\n  tags = null,\n  showTags = false,\n  isArchived = false,\n  isPinned = false,\n  onTogglePin,\n  alwaysShowPinIcon = false,\n}: ConversationCardProps) {\n  const { t } = useTranslation(\"openhands\");\n  const { trackDownloadVsCodeButtonClicked } = useTracking();\n  const [titleMode, setTitleMode] = React.useState<\"view\" | \"edit\">(\"view\");\n  const { mutateAsync: downloadConversation } = useDownloadConversation();\n\n  const onTitleSave = (newTitle: string) => {\n    if (newTitle !== \"\" && newTitle !== title) {\n      onChangeTitle?.(newTitle);\n    }\n    setTitleMode(\"view\");\n  };\n\n  const handleDelete = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    onDelete?.();\n    onContextMenuToggle?.(false);\n  };\n\n  const handleArchive = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    onArchive?.();\n    onContextMenuToggle?.(false);\n  };\n\n  const handleUnarchive = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    onUnarchive?.();\n    onContextMenuToggle?.(false);\n  };\n\n  const handleStop = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    onStop?.();\n    onContextMenuToggle?.(false);\n  };\n\n  const handleEdit = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    setTitleMode(\"edit\");\n    onContextMenuToggle?.(false);\n  };\n\n  const handleDownloadViaVSCode = async (\n    event: React.MouseEvent<HTMLButtonElement>,\n  ) => {\n    event.preventDefault();\n    event.stopPropagation();\n    trackDownloadVsCodeButtonClicked();\n\n    // Fetch the VS Code URL from the API\n    if (conversationId) {\n      try {\n        const data = await ConversationService.getVSCodeUrl(conversationId);\n        if (data.vscode_url) {\n          const transformedUrl = transformVSCodeUrl(data.vscode_url);\n          if (transformedUrl) {\n            window.open(transformedUrl, \"_blank\");\n          }\n        }\n        // VS Code URL not available\n      } catch {\n        // Failed to fetch VS Code URL\n      }\n    }\n\n    onContextMenuToggle?.(false);\n  };\n\n  const handleDownloadConversation = async (\n    event: React.MouseEvent<HTMLButtonElement>,\n  ) => {\n    event.preventDefault();\n    event.stopPropagation();\n\n    if (conversationId) {\n      await downloadConversation(conversationId);\n    }\n    onContextMenuToggle?.(false);\n  };\n\n  const handleTogglePin = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    onTogglePin?.();\n  };\n\n  const renderPinButton = () => (\n    <button\n      type=\"button\"\n      data-testid={\n        conversationId\n          ? `conversation-pin-toggle-${conversationId}`\n          : \"conversation-pin-toggle\"\n      }\n      aria-pressed={isPinned}\n      aria-label={\n        isPinned\n          ? t(I18nKey.CONVERSATION_PANEL$UNPIN_CONVERSATION)\n          : t(I18nKey.CONVERSATION_PANEL$PIN_CONVERSATION)\n      }\n      onClick={handleTogglePin}\n      className={cn(\n        \"flex shrink-0 cursor-pointer items-center justify-center rounded-md p-1\",\n        \"text-[var(--oh-muted)] hover:bg-white/10 hover:text-white\",\n      )}\n    >\n      <Pin\n        className={cn(\"h-3.5 w-3.5\", isPinned && \"fill-current\")}\n        aria-hidden\n      />\n    </button>\n  );\n\n  const hasContextMenu = !!(\n    onDelete ||\n    onArchive ||\n    onUnarchive ||\n    onChangeTitle ||\n    showOptions\n  );\n  const hasHoverActions = hasContextMenu || !!onTogglePin;\n  const showPersistentPinIcon = alwaysShowPinIcon && isPinned && !!onTogglePin;\n  const shouldRenderFooter =\n    showRepositoryMetadata ||\n    isArchived ||\n    (showLlmProfiles && (agentKind === \"acp\" || !!llmModel)) ||\n    (showTags && getDisplayConversationTags(tags).length > 0);\n\n  return (\n    <div\n      data-testid=\"conversation-card\"\n      data-context-menu-open={contextMenuOpen.toString()}\n      data-active={isActive ? \"true\" : \"false\"}\n      onClick={onClick}\n      className={cn(\n        \"group relative h-auto w-full cursor-pointer rounded-md py-1 pl-2 pr-1 transition-colors\",\n        !contextMenuOpen && \"hover:bg-[var(--oh-surface)]\",\n        (isActive || contextMenuOpen) && \"bg-[var(--oh-surface)]\",\n      )}\n    >\n      <div className=\"flex items-center w-full min-w-0\">\n        <div className=\"flex items-center gap-2 flex-1 min-w-0 overflow-hidden\">\n          <ConversationCardHeader\n            title={title}\n            titleMode={titleMode}\n            onTitleSave={onTitleSave}\n            executionStatus={executionStatus}\n            sandboxStatus={sandboxStatus}\n          />\n          {sandboxStatus === \"ERROR\" && <ConversationStatusBadges />}\n        </div>\n\n        <div\n          className={cn(\n            \"relative ml-auto pl-2 flex items-center justify-end shrink-0\",\n            // The hover action overlay (pin + ellipsis) is absolutely\n            // positioned, so reserve its width so the flex-1 title truncates\n            // instead of colliding with the buttons. Pinned cards keep the pin\n            // visible at rest, so reserve the width always for those. Touch /\n            // coarse-pointer devices also keep the reserve so the ellipsis stays\n            // clickable without a hover pass.\n            showPersistentPinIcon\n              ? \"min-w-[3.75rem]\"\n              : hasHoverActions && hoverRevealReserveClassName(contextMenuOpen),\n          )}\n        >\n          {!showPersistentPinIcon && (createdAt ?? lastUpdatedAt) && (\n            <p\n              className={cn(\n                \"text-xs text-[var(--oh-muted)] text-right whitespace-nowrap transition-opacity -translate-x-1.5\",\n                hasHoverActions && hoverRevealYieldClassName(contextMenuOpen),\n              )}\n            >\n              <time>{formatTimeDelta(lastUpdatedAt ?? createdAt)}</time>\n            </p>\n          )}\n\n          {hasHoverActions ? (\n            <div\n              className={cn(\n                \"absolute right-0 top-1/2 flex -translate-y-1/2 items-center gap-0.5 transition-opacity\",\n                showPersistentPinIcon\n                  ? \"pointer-events-auto visible opacity-100\"\n                  : hoverRevealActionClassName(contextMenuOpen),\n              )}\n            >\n              {onTogglePin ? renderPinButton() : null}\n              {showPersistentPinIcon &&\n              (createdAt ?? lastUpdatedAt) &&\n              hasContextMenu ? (\n                <div className=\"relative shrink-0\">\n                  <div className={hoverRevealActionClassName(contextMenuOpen)}>\n                    <ConversationCardActions\n                      contextMenuOpen={contextMenuOpen}\n                      onContextMenuToggle={onContextMenuToggle || (() => {})}\n                      onDelete={onDelete && handleDelete}\n                      onArchive={onArchive && handleArchive}\n                      onUnarchive={onUnarchive && handleUnarchive}\n                      onStop={onStop && handleStop}\n                      onEdit={onChangeTitle && handleEdit}\n                      onDownloadViaVSCode={handleDownloadViaVSCode}\n                      onDownloadConversation={handleDownloadConversation}\n                      executionStatus={executionStatus}\n                      conversationId={conversationId}\n                      showOptions={showOptions}\n                    />\n                  </div>\n                  <p\n                    className={cn(\n                      \"pointer-events-none absolute inset-0 items-center justify-end\",\n                      \"text-xs text-[var(--oh-muted)] whitespace-nowrap -translate-x-1.5\",\n                      hoverRevealPinnedTimestampClassName(contextMenuOpen),\n                    )}\n                  >\n                    <time>{formatTimeDelta(lastUpdatedAt ?? createdAt)}</time>\n                  </p>\n                </div>\n              ) : null}\n              {!showPersistentPinIcon && hasContextMenu ? (\n                <ConversationCardActions\n                  contextMenuOpen={contextMenuOpen}\n                  onContextMenuToggle={onContextMenuToggle || (() => {})}\n                  onDelete={onDelete && handleDelete}\n                  onArchive={onArchive && handleArchive}\n                  onUnarchive={onUnarchive && handleUnarchive}\n                  onStop={onStop && handleStop}\n                  onEdit={onChangeTitle && handleEdit}\n                  onDownloadViaVSCode={handleDownloadViaVSCode}\n                  onDownloadConversation={handleDownloadConversation}\n                  executionStatus={executionStatus}\n                  conversationId={conversationId}\n                  showOptions={showOptions}\n                />\n              ) : null}\n            </div>\n          ) : null}\n        </div>\n      </div>\n\n      {shouldRenderFooter && (\n        <ConversationCardFooter\n          selectedRepository={selectedRepository}\n          lastUpdatedAt={lastUpdatedAt}\n          createdAt={createdAt}\n          executionStatus={executionStatus}\n          workspaceWorkingDir={workspaceWorkingDir}\n          showRepositoryMetadata={showRepositoryMetadata}\n          showTimestamp={false}\n          llmModel={llmModel}\n          showAgentChip={showLlmProfiles}\n          agentKind={agentKind}\n          acpServer={acpServer}\n          tags={tags}\n          showTags={showTags}\n          isArchived={isArchived}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/features/conversation-panel/conversation-group-folder-list.cjs

@@ -1,2 +1,2 @@
-require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),t=require("../../../i18n/declaration.cjs"),n=require("./conversation-panel-list-helpers.cjs"),r=require("./conversation-group-folder-row.cjs");let i=require("react"),a=require("react/jsx-runtime");function o({groups:o,groupIds:s,groupFolderOrder:c,setGroupFolderOrder:l,collapsedGroupIds:u,expandedGroupPreviewIds:d,onToggleGroupCollapsed:f,onToggleGroupPreviewExpanded:p,isCreatingConversationFlow:m,activeConversationId:h,onLaunchFromGroup:g,renderConversationCard:_}){let{t:v}=e.useTranslation(`openhands`),[y,b]=(0,i.useState)(null),[x,S]=(0,i.useState)(null),[C,w]=(0,i.useState)(null),[T,E]=(0,i.useState)(!1),D=(0,i.useRef)(null);(0,i.useEffect)(()=>()=>{D.current&&clearTimeout(D.current)},[]);let O=(0,i.useCallback)(()=>{D.current&&clearTimeout(D.current),D.current=setTimeout(()=>{E(!1),D.current=null},300)},[]),k=(0,i.useCallback)(()=>{b(null),S(null),w(null)},[]),A=(0,i.useCallback)(e=>{let t=e.currentTarget.getBoundingClientRect();return e.clientY<t.top+t.height/2?`before`:`after`},[]),j=(0,i.useCallback)((e,t)=>{if(!y||y===e){k(),O();return}l(n.moveGroupFolderOrder(c,s,y,e,t)),k(),O()},[y,c,s,k,l,O]);return(0,a.jsx)(`nav`,{"aria-label":v(t.I18nKey.SIDEBAR$CONVERSATIONS),className:`space-y-1 md:space-y-0.5 pb-1`,children:o.map(e=>(0,a.jsx)(r.ConversationGroupFolderRow,{group:e,expanded:!u.has(e.id),previewExpanded:d.has(e.id),isDragging:y===e.id,dropIndicatorPosition:x===e.id&&y!==e.id?C:null,animateLayout:T,isCreatingConversationFlow:m,activeConversationId:h,onToggleExpanded:()=>f(e.id),onDragStart:()=>{E(!0),b(e.id)},onDragEnd:()=>{k(),O()},onDragOver:t=>{t.preventDefault();let{dataTransfer:n}=t;n&&(n.dropEffect=`move`),S(e.id),w(A(t))},onDragLeave:()=>{S(t=>t===e.id?null:t)},onDrop:t=>{t.preventDefault(),j(e.id,A(t))},onTogglePreviewExpanded:()=>p(e.id),onLaunchFromGroup:()=>g(e.launch),renderConversationCard:_},e.id))})}exports.ConversationGroupFolderList=o;
+require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),t=require("../../../i18n/declaration.cjs"),n=require("./conversation-panel-list-helpers.cjs"),r=require("./conversation-group-folder-row.cjs");let i=require("react"),a=require("react/jsx-runtime");function o({groups:o,groupIds:s,groupFolderOrder:c,setGroupFolderOrder:l,collapsedGroupIds:u,expandedGroupPreviewIds:d,discoveryConversationIds:f,onToggleGroupCollapsed:p,onToggleGroupPreviewExpanded:m,isCreatingConversationFlow:h,activeConversationId:g,onLaunchFromGroup:_,renderConversationCard:v}){let{t:y}=e.useTranslation(`openhands`),[b,x]=(0,i.useState)(null),[S,C]=(0,i.useState)(null),[w,T]=(0,i.useState)(null),[E,D]=(0,i.useState)(!1),O=(0,i.useRef)(null);(0,i.useEffect)(()=>()=>{O.current&&clearTimeout(O.current)},[]);let k=(0,i.useCallback)(()=>{O.current&&clearTimeout(O.current),O.current=setTimeout(()=>{D(!1),O.current=null},300)},[]),A=(0,i.useCallback)(()=>{x(null),C(null),T(null)},[]),j=(0,i.useCallback)(e=>{let t=e.currentTarget.getBoundingClientRect();return e.clientY<t.top+t.height/2?`before`:`after`},[]),M=(0,i.useCallback)((e,t)=>{if(!b||b===e){A(),k();return}l(n.moveGroupFolderOrder(c,s,b,e,t)),A(),k()},[b,c,s,A,l,k]);return(0,a.jsx)(`nav`,{"aria-label":y(t.I18nKey.SIDEBAR$CONVERSATIONS),className:`space-y-1 md:space-y-0.5 pb-1`,children:o.map(e=>(0,a.jsx)(r.ConversationGroupFolderRow,{group:e,expanded:!u.has(e.id),previewExpanded:d.has(e.id),isDragging:b===e.id,dropIndicatorPosition:S===e.id&&b!==e.id?w:null,animateLayout:E,isCreatingConversationFlow:h,activeConversationId:g,discoveryConversationIds:f,onToggleExpanded:()=>p(e.id),onDragStart:()=>{D(!0),x(e.id)},onDragEnd:()=>{A(),k()},onDragOver:t=>{t.preventDefault();let{dataTransfer:n}=t;n&&(n.dropEffect=`move`),C(e.id),T(j(t))},onDragLeave:()=>{C(t=>t===e.id?null:t)},onDrop:t=>{t.preventDefault(),M(e.id,j(t))},onTogglePreviewExpanded:()=>m(e.id),onLaunchFromGroup:()=>_(e.launch),renderConversationCard:v},e.id))})}exports.ConversationGroupFolderList=o;
 //# sourceMappingURL=conversation-group-folder-list.cjs.map

package/dist/components/features/conversation-panel/conversation-group-folder-list.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"conversation-group-folder-list.cjs","names":[],"sources":["../../../../src/components/features/conversation-panel/conversation-group-folder-list.tsx"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type DragEvent,\n  type ReactNode,\n} from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport type { AppConversation } from \"#/api/conversation-service/agent-server-conversation-service.types\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { ConversationGroupFolderRow } from \"./conversation-group-folder-row\";\nimport {\n  moveGroupFolderOrder,\n  type ConversationGroupLaunch,\n  type GroupFolderDropPosition,\n} from \"./conversation-panel-list-helpers\";\n\ninterface ConversationGroup {\n  id: string;\n  label: string;\n  conversations: AppConversation[];\n  launch: ConversationGroupLaunch;\n}\n\ninterface ConversationGroupFolderListProps {\n  groups: ConversationGroup[];\n  groupIds: readonly string[];\n  groupFolderOrder: readonly string[];\n  setGroupFolderOrder: (order: readonly string[]) => void;\n  collapsedGroupIds: ReadonlySet<string>;\n  expandedGroupPreviewIds: ReadonlySet<string>;\n  onToggleGroupCollapsed: (groupId: string) => void;\n  onToggleGroupPreviewExpanded: (groupId: string) => void;\n  isCreatingConversationFlow: boolean;\n  activeConversationId?: string | null;\n  onLaunchFromGroup: (launch: ConversationGroupLaunch) => void;\n  renderConversationCard: (conversation: AppConversation) => ReactNode;\n}\n\nexport function ConversationGroupFolderList({\n  groups,\n  groupIds,\n  groupFolderOrder,\n  setGroupFolderOrder,\n  collapsedGroupIds,\n  expandedGroupPreviewIds,\n  onToggleGroupCollapsed,\n  onToggleGroupPreviewExpanded,\n  isCreatingConversationFlow,\n  activeConversationId,\n  onLaunchFromGroup,\n  renderConversationCard,\n}: ConversationGroupFolderListProps) {\n  const { t } = useTranslation(\"openhands\");\n  const [draggedGroupId, setDraggedGroupId] = useState<string | null>(null);\n  const [dropTargetGroupId, setDropTargetGroupId] = useState<string | null>(\n    null,\n  );\n  const [dropPosition, setDropPosition] =\n    useState<GroupFolderDropPosition | null>(null);\n  // Layout animation is only enabled around a drag-and-drop reorder so that\n  // expand/collapse clicks don't trigger sibling repositioning animations.\n  const [animateLayout, setAnimateLayout] = useState(false);\n  const animateLayoutTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(\n    null,\n  );\n\n  useEffect(\n    () => () => {\n      if (animateLayoutTimeoutRef.current) {\n        clearTimeout(animateLayoutTimeoutRef.current);\n      }\n    },\n    [],\n  );\n\n  const stopAnimatingLayoutSoon = useCallback(() => {\n    if (animateLayoutTimeoutRef.current) {\n      clearTimeout(animateLayoutTimeoutRef.current);\n    }\n    animateLayoutTimeoutRef.current = setTimeout(() => {\n      setAnimateLayout(false);\n      animateLayoutTimeoutRef.current = null;\n    }, 300);\n  }, []);\n\n  const resetDragState = useCallback(() => {\n    setDraggedGroupId(null);\n    setDropTargetGroupId(null);\n    setDropPosition(null);\n  }, []);\n\n  const computeDropPosition = useCallback(\n    (event: DragEvent<HTMLElement>): GroupFolderDropPosition => {\n      const rect = event.currentTarget.getBoundingClientRect();\n      return event.clientY < rect.top + rect.height / 2 ? \"before\" : \"after\";\n    },\n    [],\n  );\n\n  const handleDrop = useCallback(\n    (targetGroupId: string, position: GroupFolderDropPosition) => {\n      if (!draggedGroupId || draggedGroupId === targetGroupId) {\n        resetDragState();\n        stopAnimatingLayoutSoon();\n        return;\n      }\n\n      setGroupFolderOrder(\n        moveGroupFolderOrder(\n          groupFolderOrder,\n          groupIds,\n          draggedGroupId,\n          targetGroupId,\n          position,\n        ),\n      );\n      resetDragState();\n      // Keep layout animation active across the reorder render, then disable\n      // it once the spring settles.\n      stopAnimatingLayoutSoon();\n    },\n    [\n      draggedGroupId,\n      groupFolderOrder,\n      groupIds,\n      resetDragState,\n      setGroupFolderOrder,\n      stopAnimatingLayoutSoon,\n    ],\n  );\n\n  return (\n    <nav\n      aria-label={t(I18nKey.SIDEBAR$CONVERSATIONS)}\n      className=\"space-y-1 md:space-y-0.5 pb-1\"\n    >\n      {groups.map((group) => (\n        <ConversationGroupFolderRow\n          key={group.id}\n          group={group}\n          expanded={!collapsedGroupIds.has(group.id)}\n          previewExpanded={expandedGroupPreviewIds.has(group.id)}\n          isDragging={draggedGroupId === group.id}\n          dropIndicatorPosition={\n            dropTargetGroupId === group.id && draggedGroupId !== group.id\n              ? dropPosition\n              : null\n          }\n          animateLayout={animateLayout}\n          isCreatingConversationFlow={isCreatingConversationFlow}\n          activeConversationId={activeConversationId}\n          onToggleExpanded={() => onToggleGroupCollapsed(group.id)}\n          onDragStart={() => {\n            setAnimateLayout(true);\n            setDraggedGroupId(group.id);\n          }}\n          onDragEnd={() => {\n            resetDragState();\n            stopAnimatingLayoutSoon();\n          }}\n          onDragOver={(event) => {\n            event.preventDefault();\n            const { dataTransfer } = event;\n            if (dataTransfer) {\n              dataTransfer.dropEffect = \"move\";\n            }\n            setDropTargetGroupId(group.id);\n            setDropPosition(computeDropPosition(event));\n          }}\n          onDragLeave={() => {\n            setDropTargetGroupId((current) =>\n              current === group.id ? null : current,\n            );\n          }}\n          onDrop={(event) => {\n            event.preventDefault();\n            handleDrop(group.id, computeDropPosition(event));\n          }}\n          onTogglePreviewExpanded={() => onToggleGroupPreviewExpanded(group.id)}\n          onLaunchFromGroup={() => onLaunchFromGroup(group.launch)}\n          renderConversationCard={renderConversationCard}\n        />\n      ))}\n    </nav>\n  );\n}\n"],"mappings":"0UAwCA,SAAgB,EAA4B,CAC1C,SACA,WACA,mBACA,sBACA,oBACA,0BACA,yBACA,+BACA,6BACA,uBACA,oBACA,0BACmC,CACnC,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAClC,CAAC,EAAgB,IAAA,EAAA,EAAA,UAA6C,IAAI,EAClE,CAAC,EAAmB,IAAA,EAAA,EAAA,UACxB,IACF,EACM,CAAC,EAAc,IAAA,EAAA,EAAA,UACsB,IAAI,EAGzC,CAAC,EAAe,IAAA,EAAA,EAAA,UAA6B,EAAK,EAClD,GAAA,EAAA,EAAA,QACJ,IACF,GAEA,EAAA,EAAA,mBACc,CACN,EAAwB,SAC1B,aAAa,EAAwB,OAAO,CAEhD,EACA,CAAC,CACH,EAEA,IAAM,GAAA,EAAA,EAAA,iBAA4C,CAC5C,EAAwB,SAC1B,aAAa,EAAwB,OAAO,EAE9C,EAAwB,QAAU,eAAiB,CACjD,EAAiB,EAAK,EACtB,EAAwB,QAAU,IACpC,EAAG,GAAG,CACR,EAAG,CAAC,CAAC,EAEC,GAAA,EAAA,EAAA,iBAAmC,CACvC,EAAkB,IAAI,EACtB,EAAqB,IAAI,EACzB,EAAgB,IAAI,CACtB,EAAG,CAAC,CAAC,EAEC,GAAA,EAAA,EAAA,aACH,GAA2D,CAC1D,IAAM,EAAO,EAAM,cAAc,sBAAsB,EACvD,OAAO,EAAM,QAAU,EAAK,IAAM,EAAK,OAAS,EAAI,SAAW,OACjE,EACA,CAAC,CACH,EAEM,GAAA,EAAA,EAAA,cACH,EAAuB,IAAsC,CAC5D,GAAI,CAAC,GAAkB,IAAmB,EAAe,CACvD,EAAe,EACf,EAAwB,EACxB,MACF,CAEA,EACE,EAAA,qBACE,EACA,EACA,EACA,EACA,CACF,CACF,EACA,EAAe,EAGf,EAAwB,CAC1B,EACA,CACE,EACA,EACA,EACA,EACA,EACA,CACF,CACF,EAEA,OACE,EAAA,EAAA,KAAC,MAAD,CACE,aAAY,EAAE,EAAA,QAAQ,qBAAqB,EAC3C,UAAU,yCAET,EAAO,IAAK,IACX,EAAA,EAAA,KAAC,EAAA,2BAAD,CAES,QACP,SAAU,CAAC,EAAkB,IAAI,EAAM,EAAE,EACzC,gBAAiB,EAAwB,IAAI,EAAM,EAAE,EACrD,WAAY,IAAmB,EAAM,GACrC,sBACE,IAAsB,EAAM,IAAM,IAAmB,EAAM,GACvD,EACA,KAES,gBACa,6BACN,uBACtB,qBAAwB,EAAuB,EAAM,EAAE,EACvD,gBAAmB,CACjB,EAAiB,EAAI,EACrB,EAAkB,EAAM,EAAE,CAC5B,EACA,cAAiB,CACf,EAAe,EACf,EAAwB,CAC1B,EACA,WAAa,GAAU,CACrB,EAAM,eAAe,EACrB,GAAM,CAAE,gBAAiB,EACrB,IACF,EAAa,WAAa,QAE5B,EAAqB,EAAM,EAAE,EAC7B,EAAgB,EAAoB,CAAK,CAAC,CAC5C,EACA,gBAAmB,CACjB,EAAsB,GACpB,IAAY,EAAM,GAAK,KAAO,CAChC,CACF,EACA,OAAS,GAAU,CACjB,EAAM,eAAe,EACrB,EAAW,EAAM,GAAI,EAAoB,CAAK,CAAC,CACjD,EACA,4BAA+B,EAA6B,EAAM,EAAE,EACpE,sBAAyB,EAAkB,EAAM,MAAM,EAC/B,wBACzB,EA3CM,EAAM,EA2CZ,CACF,CACE,CAAA,CAET"}
+{"version":3,"file":"conversation-group-folder-list.cjs","names":[],"sources":["../../../../src/components/features/conversation-panel/conversation-group-folder-list.tsx"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type DragEvent,\n  type ReactNode,\n} from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport type { AppConversation } from \"#/api/conversation-service/agent-server-conversation-service.types\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { ConversationGroupFolderRow } from \"./conversation-group-folder-row\";\nimport {\n  moveGroupFolderOrder,\n  type ConversationGroupLaunch,\n  type GroupFolderDropPosition,\n} from \"./conversation-panel-list-helpers\";\n\ninterface ConversationGroup {\n  id: string;\n  label: string;\n  conversations: AppConversation[];\n  launch: ConversationGroupLaunch;\n}\n\ninterface ConversationGroupFolderListProps {\n  groups: ConversationGroup[];\n  groupIds: readonly string[];\n  groupFolderOrder: readonly string[];\n  setGroupFolderOrder: (order: readonly string[]) => void;\n  collapsedGroupIds: ReadonlySet<string>;\n  expandedGroupPreviewIds: ReadonlySet<string>;\n  discoveryConversationIds: ReadonlySet<string> | null;\n  onToggleGroupCollapsed: (groupId: string) => void;\n  onToggleGroupPreviewExpanded: (groupId: string) => void;\n  isCreatingConversationFlow: boolean;\n  activeConversationId?: string | null;\n  onLaunchFromGroup: (launch: ConversationGroupLaunch) => void;\n  renderConversationCard: (conversation: AppConversation) => ReactNode;\n}\n\nexport function ConversationGroupFolderList({\n  groups,\n  groupIds,\n  groupFolderOrder,\n  setGroupFolderOrder,\n  collapsedGroupIds,\n  expandedGroupPreviewIds,\n  discoveryConversationIds,\n  onToggleGroupCollapsed,\n  onToggleGroupPreviewExpanded,\n  isCreatingConversationFlow,\n  activeConversationId,\n  onLaunchFromGroup,\n  renderConversationCard,\n}: ConversationGroupFolderListProps) {\n  const { t } = useTranslation(\"openhands\");\n  const [draggedGroupId, setDraggedGroupId] = useState<string | null>(null);\n  const [dropTargetGroupId, setDropTargetGroupId] = useState<string | null>(\n    null,\n  );\n  const [dropPosition, setDropPosition] =\n    useState<GroupFolderDropPosition | null>(null);\n  // Layout animation is only enabled around a drag-and-drop reorder so that\n  // expand/collapse clicks don't trigger sibling repositioning animations.\n  const [animateLayout, setAnimateLayout] = useState(false);\n  const animateLayoutTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(\n    null,\n  );\n\n  useEffect(\n    () => () => {\n      if (animateLayoutTimeoutRef.current) {\n        clearTimeout(animateLayoutTimeoutRef.current);\n      }\n    },\n    [],\n  );\n\n  const stopAnimatingLayoutSoon = useCallback(() => {\n    if (animateLayoutTimeoutRef.current) {\n      clearTimeout(animateLayoutTimeoutRef.current);\n    }\n    animateLayoutTimeoutRef.current = setTimeout(() => {\n      setAnimateLayout(false);\n      animateLayoutTimeoutRef.current = null;\n    }, 300);\n  }, []);\n\n  const resetDragState = useCallback(() => {\n    setDraggedGroupId(null);\n    setDropTargetGroupId(null);\n    setDropPosition(null);\n  }, []);\n\n  const computeDropPosition = useCallback(\n    (event: DragEvent<HTMLElement>): GroupFolderDropPosition => {\n      const rect = event.currentTarget.getBoundingClientRect();\n      return event.clientY < rect.top + rect.height / 2 ? \"before\" : \"after\";\n    },\n    [],\n  );\n\n  const handleDrop = useCallback(\n    (targetGroupId: string, position: GroupFolderDropPosition) => {\n      if (!draggedGroupId || draggedGroupId === targetGroupId) {\n        resetDragState();\n        stopAnimatingLayoutSoon();\n        return;\n      }\n\n      setGroupFolderOrder(\n        moveGroupFolderOrder(\n          groupFolderOrder,\n          groupIds,\n          draggedGroupId,\n          targetGroupId,\n          position,\n        ),\n      );\n      resetDragState();\n      // Keep layout animation active across the reorder render, then disable\n      // it once the spring settles.\n      stopAnimatingLayoutSoon();\n    },\n    [\n      draggedGroupId,\n      groupFolderOrder,\n      groupIds,\n      resetDragState,\n      setGroupFolderOrder,\n      stopAnimatingLayoutSoon,\n    ],\n  );\n\n  return (\n    <nav\n      aria-label={t(I18nKey.SIDEBAR$CONVERSATIONS)}\n      className=\"space-y-1 md:space-y-0.5 pb-1\"\n    >\n      {groups.map((group) => (\n        <ConversationGroupFolderRow\n          key={group.id}\n          group={group}\n          expanded={!collapsedGroupIds.has(group.id)}\n          previewExpanded={expandedGroupPreviewIds.has(group.id)}\n          isDragging={draggedGroupId === group.id}\n          dropIndicatorPosition={\n            dropTargetGroupId === group.id && draggedGroupId !== group.id\n              ? dropPosition\n              : null\n          }\n          animateLayout={animateLayout}\n          isCreatingConversationFlow={isCreatingConversationFlow}\n          activeConversationId={activeConversationId}\n          discoveryConversationIds={discoveryConversationIds}\n          onToggleExpanded={() => onToggleGroupCollapsed(group.id)}\n          onDragStart={() => {\n            setAnimateLayout(true);\n            setDraggedGroupId(group.id);\n          }}\n          onDragEnd={() => {\n            resetDragState();\n            stopAnimatingLayoutSoon();\n          }}\n          onDragOver={(event) => {\n            event.preventDefault();\n            const { dataTransfer } = event;\n            if (dataTransfer) {\n              dataTransfer.dropEffect = \"move\";\n            }\n            setDropTargetGroupId(group.id);\n            setDropPosition(computeDropPosition(event));\n          }}\n          onDragLeave={() => {\n            setDropTargetGroupId((current) =>\n              current === group.id ? null : current,\n            );\n          }}\n          onDrop={(event) => {\n            event.preventDefault();\n            handleDrop(group.id, computeDropPosition(event));\n          }}\n          onTogglePreviewExpanded={() => onToggleGroupPreviewExpanded(group.id)}\n          onLaunchFromGroup={() => onLaunchFromGroup(group.launch)}\n          renderConversationCard={renderConversationCard}\n        />\n      ))}\n    </nav>\n  );\n}\n"],"mappings":"0UAyCA,SAAgB,EAA4B,CAC1C,SACA,WACA,mBACA,sBACA,oBACA,0BACA,2BACA,yBACA,+BACA,6BACA,uBACA,oBACA,0BACmC,CACnC,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAClC,CAAC,EAAgB,IAAA,EAAA,EAAA,UAA6C,IAAI,EAClE,CAAC,EAAmB,IAAA,EAAA,EAAA,UACxB,IACF,EACM,CAAC,EAAc,IAAA,EAAA,EAAA,UACsB,IAAI,EAGzC,CAAC,EAAe,IAAA,EAAA,EAAA,UAA6B,EAAK,EAClD,GAAA,EAAA,EAAA,QACJ,IACF,GAEA,EAAA,EAAA,mBACc,CACN,EAAwB,SAC1B,aAAa,EAAwB,OAAO,CAEhD,EACA,CAAC,CACH,EAEA,IAAM,GAAA,EAAA,EAAA,iBAA4C,CAC5C,EAAwB,SAC1B,aAAa,EAAwB,OAAO,EAE9C,EAAwB,QAAU,eAAiB,CACjD,EAAiB,EAAK,EACtB,EAAwB,QAAU,IACpC,EAAG,GAAG,CACR,EAAG,CAAC,CAAC,EAEC,GAAA,EAAA,EAAA,iBAAmC,CACvC,EAAkB,IAAI,EACtB,EAAqB,IAAI,EACzB,EAAgB,IAAI,CACtB,EAAG,CAAC,CAAC,EAEC,GAAA,EAAA,EAAA,aACH,GAA2D,CAC1D,IAAM,EAAO,EAAM,cAAc,sBAAsB,EACvD,OAAO,EAAM,QAAU,EAAK,IAAM,EAAK,OAAS,EAAI,SAAW,OACjE,EACA,CAAC,CACH,EAEM,GAAA,EAAA,EAAA,cACH,EAAuB,IAAsC,CAC5D,GAAI,CAAC,GAAkB,IAAmB,EAAe,CACvD,EAAe,EACf,EAAwB,EACxB,MACF,CAEA,EACE,EAAA,qBACE,EACA,EACA,EACA,EACA,CACF,CACF,EACA,EAAe,EAGf,EAAwB,CAC1B,EACA,CACE,EACA,EACA,EACA,EACA,EACA,CACF,CACF,EAEA,OACE,EAAA,EAAA,KAAC,MAAD,CACE,aAAY,EAAE,EAAA,QAAQ,qBAAqB,EAC3C,UAAU,yCAET,EAAO,IAAK,IACX,EAAA,EAAA,KAAC,EAAA,2BAAD,CAES,QACP,SAAU,CAAC,EAAkB,IAAI,EAAM,EAAE,EACzC,gBAAiB,EAAwB,IAAI,EAAM,EAAE,EACrD,WAAY,IAAmB,EAAM,GACrC,sBACE,IAAsB,EAAM,IAAM,IAAmB,EAAM,GACvD,EACA,KAES,gBACa,6BACN,uBACI,2BAC1B,qBAAwB,EAAuB,EAAM,EAAE,EACvD,gBAAmB,CACjB,EAAiB,EAAI,EACrB,EAAkB,EAAM,EAAE,CAC5B,EACA,cAAiB,CACf,EAAe,EACf,EAAwB,CAC1B,EACA,WAAa,GAAU,CACrB,EAAM,eAAe,EACrB,GAAM,CAAE,gBAAiB,EACrB,IACF,EAAa,WAAa,QAE5B,EAAqB,EAAM,EAAE,EAC7B,EAAgB,EAAoB,CAAK,CAAC,CAC5C,EACA,gBAAmB,CACjB,EAAsB,GACpB,IAAY,EAAM,GAAK,KAAO,CAChC,CACF,EACA,OAAS,GAAU,CACjB,EAAM,eAAe,EACrB,EAAW,EAAM,GAAI,EAAoB,CAAK,CAAC,CACjD,EACA,4BAA+B,EAA6B,EAAM,EAAE,EACpE,sBAAyB,EAAkB,EAAM,MAAM,EAC/B,wBACzB,EA5CM,EAAM,EA4CZ,CACF,CACE,CAAA,CAET"}

package/dist/components/features/conversation-panel/conversation-group-folder-list.d.ts

@@ -14,6 +14,7 @@ interface ConversationGroupFolderListProps {
     setGroupFolderOrder: (order: readonly string[]) => void;
     collapsedGroupIds: ReadonlySet<string>;
     expandedGroupPreviewIds: ReadonlySet<string>;
+    discoveryConversationIds: ReadonlySet<string> | null;
     onToggleGroupCollapsed: (groupId: string) => void;
     onToggleGroupPreviewExpanded: (groupId: string) => void;
     isCreatingConversationFlow: boolean;
@@ -21,5 +22,5 @@ interface ConversationGroupFolderListProps {
     onLaunchFromGroup: (launch: ConversationGroupLaunch) => void;
     renderConversationCard: (conversation: AppConversation) => ReactNode;
 }
-export declare function ConversationGroupFolderList({ groups, groupIds, groupFolderOrder, setGroupFolderOrder, collapsedGroupIds, expandedGroupPreviewIds, onToggleGroupCollapsed, onToggleGroupPreviewExpanded, isCreatingConversationFlow, activeConversationId, onLaunchFromGroup, renderConversationCard, }: ConversationGroupFolderListProps): import("react").JSX.Element;
+export declare function ConversationGroupFolderList({ groups, groupIds, groupFolderOrder, setGroupFolderOrder, collapsedGroupIds, expandedGroupPreviewIds, discoveryConversationIds, onToggleGroupCollapsed, onToggleGroupPreviewExpanded, isCreatingConversationFlow, activeConversationId, onLaunchFromGroup, renderConversationCard, }: ConversationGroupFolderListProps): import("react").JSX.Element;
 export {};

package/dist/components/features/conversation-panel/conversation-group-folder-list.js

@@ -5,67 +5,68 @@ import { ConversationGroupFolderRow as r } from "./conversation-group-folder-row
 import { useCallback as i, useEffect as a, useRef as o, useState as s } from "react";
 import { jsx as c } from "react/jsx-runtime";
 //#region src/components/features/conversation-panel/conversation-group-folder-list.tsx
-function l({ groups: l, groupIds: u, groupFolderOrder: d, setGroupFolderOrder: f, collapsedGroupIds: p, expandedGroupPreviewIds: m, onToggleGroupCollapsed: h, onToggleGroupPreviewExpanded: g, isCreatingConversationFlow: _, activeConversationId: v, onLaunchFromGroup: y, renderConversationCard: b }) {
-	let { t: x } = e("openhands"), [S, C] = s(null), [w, T] = s(null), [E, D] = s(null), [O, k] = s(!1), A = o(null);
+function l({ groups: l, groupIds: u, groupFolderOrder: d, setGroupFolderOrder: f, collapsedGroupIds: p, expandedGroupPreviewIds: m, discoveryConversationIds: h, onToggleGroupCollapsed: g, onToggleGroupPreviewExpanded: _, isCreatingConversationFlow: v, activeConversationId: y, onLaunchFromGroup: b, renderConversationCard: x }) {
+	let { t: S } = e("openhands"), [C, w] = s(null), [T, E] = s(null), [D, O] = s(null), [k, A] = s(!1), j = o(null);
 	a(() => () => {
-		A.current && clearTimeout(A.current);
+		j.current && clearTimeout(j.current);
 	}, []);
-	let j = i(() => {
-		A.current && clearTimeout(A.current), A.current = setTimeout(() => {
-			k(!1), A.current = null;
+	let M = i(() => {
+		j.current && clearTimeout(j.current), j.current = setTimeout(() => {
+			A(!1), j.current = null;
 		}, 300);
-	}, []), M = i(() => {
-		C(null), T(null), D(null);
-	}, []), N = i((e) => {
+	}, []), N = i(() => {
+		w(null), E(null), O(null);
+	}, []), P = i((e) => {
 		let t = e.currentTarget.getBoundingClientRect();
 		return e.clientY < t.top + t.height / 2 ? "before" : "after";
-	}, []), P = i((e, t) => {
-		if (!S || S === e) {
-			M(), j();
+	}, []), F = i((e, t) => {
+		if (!C || C === e) {
+			N(), M();
 			return;
 		}
-		f(n(d, u, S, e, t)), M(), j();
+		f(n(d, u, C, e, t)), N(), M();
 	}, [
-		S,
+		C,
 		d,
 		u,
-		M,
+		N,
 		f,
-		j
+		M
 	]);
 	return /* @__PURE__ */ c("nav", {
-		"aria-label": x(t.SIDEBAR$CONVERSATIONS),
+		"aria-label": S(t.SIDEBAR$CONVERSATIONS),
 		className: "space-y-1 md:space-y-0.5 pb-1",
 		children: l.map((e) => /* @__PURE__ */ c(r, {
 			group: e,
 			expanded: !p.has(e.id),
 			previewExpanded: m.has(e.id),
-			isDragging: S === e.id,
-			dropIndicatorPosition: w === e.id && S !== e.id ? E : null,
-			animateLayout: O,
-			isCreatingConversationFlow: _,
-			activeConversationId: v,
-			onToggleExpanded: () => h(e.id),
+			isDragging: C === e.id,
+			dropIndicatorPosition: T === e.id && C !== e.id ? D : null,
+			animateLayout: k,
+			isCreatingConversationFlow: v,
+			activeConversationId: y,
+			discoveryConversationIds: h,
+			onToggleExpanded: () => g(e.id),
 			onDragStart: () => {
-				k(!0), C(e.id);
+				A(!0), w(e.id);
 			},
 			onDragEnd: () => {
-				M(), j();
+				N(), M();
 			},
 			onDragOver: (t) => {
 				t.preventDefault();
 				let { dataTransfer: n } = t;
-				n && (n.dropEffect = "move"), T(e.id), D(N(t));
+				n && (n.dropEffect = "move"), E(e.id), O(P(t));
 			},
 			onDragLeave: () => {
-				T((t) => t === e.id ? null : t);
+				E((t) => t === e.id ? null : t);
 			},
 			onDrop: (t) => {
-				t.preventDefault(), P(e.id, N(t));
+				t.preventDefault(), F(e.id, P(t));
 			},
-			onTogglePreviewExpanded: () => g(e.id),
-			onLaunchFromGroup: () => y(e.launch),
-			renderConversationCard: b
+			onTogglePreviewExpanded: () => _(e.id),
+			onLaunchFromGroup: () => b(e.launch),
+			renderConversationCard: x
 		}, e.id))
 	});
 }

package/dist/components/features/conversation-panel/conversation-group-folder-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"conversation-group-folder-list.js","names":[],"sources":["../../../../src/components/features/conversation-panel/conversation-group-folder-list.tsx"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type DragEvent,\n  type ReactNode,\n} from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport type { AppConversation } from \"#/api/conversation-service/agent-server-conversation-service.types\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { ConversationGroupFolderRow } from \"./conversation-group-folder-row\";\nimport {\n  moveGroupFolderOrder,\n  type ConversationGroupLaunch,\n  type GroupFolderDropPosition,\n} from \"./conversation-panel-list-helpers\";\n\ninterface ConversationGroup {\n  id: string;\n  label: string;\n  conversations: AppConversation[];\n  launch: ConversationGroupLaunch;\n}\n\ninterface ConversationGroupFolderListProps {\n  groups: ConversationGroup[];\n  groupIds: readonly string[];\n  groupFolderOrder: readonly string[];\n  setGroupFolderOrder: (order: readonly string[]) => void;\n  collapsedGroupIds: ReadonlySet<string>;\n  expandedGroupPreviewIds: ReadonlySet<string>;\n  onToggleGroupCollapsed: (groupId: string) => void;\n  onToggleGroupPreviewExpanded: (groupId: string) => void;\n  isCreatingConversationFlow: boolean;\n  activeConversationId?: string | null;\n  onLaunchFromGroup: (launch: ConversationGroupLaunch) => void;\n  renderConversationCard: (conversation: AppConversation) => ReactNode;\n}\n\nexport function ConversationGroupFolderList({\n  groups,\n  groupIds,\n  groupFolderOrder,\n  setGroupFolderOrder,\n  collapsedGroupIds,\n  expandedGroupPreviewIds,\n  onToggleGroupCollapsed,\n  onToggleGroupPreviewExpanded,\n  isCreatingConversationFlow,\n  activeConversationId,\n  onLaunchFromGroup,\n  renderConversationCard,\n}: ConversationGroupFolderListProps) {\n  const { t } = useTranslation(\"openhands\");\n  const [draggedGroupId, setDraggedGroupId] = useState<string | null>(null);\n  const [dropTargetGroupId, setDropTargetGroupId] = useState<string | null>(\n    null,\n  );\n  const [dropPosition, setDropPosition] =\n    useState<GroupFolderDropPosition | null>(null);\n  // Layout animation is only enabled around a drag-and-drop reorder so that\n  // expand/collapse clicks don't trigger sibling repositioning animations.\n  const [animateLayout, setAnimateLayout] = useState(false);\n  const animateLayoutTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(\n    null,\n  );\n\n  useEffect(\n    () => () => {\n      if (animateLayoutTimeoutRef.current) {\n        clearTimeout(animateLayoutTimeoutRef.current);\n      }\n    },\n    [],\n  );\n\n  const stopAnimatingLayoutSoon = useCallback(() => {\n    if (animateLayoutTimeoutRef.current) {\n      clearTimeout(animateLayoutTimeoutRef.current);\n    }\n    animateLayoutTimeoutRef.current = setTimeout(() => {\n      setAnimateLayout(false);\n      animateLayoutTimeoutRef.current = null;\n    }, 300);\n  }, []);\n\n  const resetDragState = useCallback(() => {\n    setDraggedGroupId(null);\n    setDropTargetGroupId(null);\n    setDropPosition(null);\n  }, []);\n\n  const computeDropPosition = useCallback(\n    (event: DragEvent<HTMLElement>): GroupFolderDropPosition => {\n      const rect = event.currentTarget.getBoundingClientRect();\n      return event.clientY < rect.top + rect.height / 2 ? \"before\" : \"after\";\n    },\n    [],\n  );\n\n  const handleDrop = useCallback(\n    (targetGroupId: string, position: GroupFolderDropPosition) => {\n      if (!draggedGroupId || draggedGroupId === targetGroupId) {\n        resetDragState();\n        stopAnimatingLayoutSoon();\n        return;\n      }\n\n      setGroupFolderOrder(\n        moveGroupFolderOrder(\n          groupFolderOrder,\n          groupIds,\n          draggedGroupId,\n          targetGroupId,\n          position,\n        ),\n      );\n      resetDragState();\n      // Keep layout animation active across the reorder render, then disable\n      // it once the spring settles.\n      stopAnimatingLayoutSoon();\n    },\n    [\n      draggedGroupId,\n      groupFolderOrder,\n      groupIds,\n      resetDragState,\n      setGroupFolderOrder,\n      stopAnimatingLayoutSoon,\n    ],\n  );\n\n  return (\n    <nav\n      aria-label={t(I18nKey.SIDEBAR$CONVERSATIONS)}\n      className=\"space-y-1 md:space-y-0.5 pb-1\"\n    >\n      {groups.map((group) => (\n        <ConversationGroupFolderRow\n          key={group.id}\n          group={group}\n          expanded={!collapsedGroupIds.has(group.id)}\n          previewExpanded={expandedGroupPreviewIds.has(group.id)}\n          isDragging={draggedGroupId === group.id}\n          dropIndicatorPosition={\n            dropTargetGroupId === group.id && draggedGroupId !== group.id\n              ? dropPosition\n              : null\n          }\n          animateLayout={animateLayout}\n          isCreatingConversationFlow={isCreatingConversationFlow}\n          activeConversationId={activeConversationId}\n          onToggleExpanded={() => onToggleGroupCollapsed(group.id)}\n          onDragStart={() => {\n            setAnimateLayout(true);\n            setDraggedGroupId(group.id);\n          }}\n          onDragEnd={() => {\n            resetDragState();\n            stopAnimatingLayoutSoon();\n          }}\n          onDragOver={(event) => {\n            event.preventDefault();\n            const { dataTransfer } = event;\n            if (dataTransfer) {\n              dataTransfer.dropEffect = \"move\";\n            }\n            setDropTargetGroupId(group.id);\n            setDropPosition(computeDropPosition(event));\n          }}\n          onDragLeave={() => {\n            setDropTargetGroupId((current) =>\n              current === group.id ? null : current,\n            );\n          }}\n          onDrop={(event) => {\n            event.preventDefault();\n            handleDrop(group.id, computeDropPosition(event));\n          }}\n          onTogglePreviewExpanded={() => onToggleGroupPreviewExpanded(group.id)}\n          onLaunchFromGroup={() => onLaunchFromGroup(group.launch)}\n          renderConversationCard={renderConversationCard}\n        />\n      ))}\n    </nav>\n  );\n}\n"],"mappings":";;;;;;;AAwCA,SAAgB,EAA4B,EAC1C,WACA,aACA,qBACA,wBACA,sBACA,4BACA,2BACA,iCACA,+BACA,yBACA,sBACA,6BACmC;CACnC,IAAM,EAAE,SAAM,EAAe,WAAW,GAClC,CAAC,GAAgB,KAAqB,EAAwB,IAAI,GAClE,CAAC,GAAmB,KAAwB,EAChD,IACF,GACM,CAAC,GAAc,KACnB,EAAyC,IAAI,GAGzC,CAAC,GAAe,KAAoB,EAAS,EAAK,GAClD,IAA0B,EAC9B,IACF;CAEA,cACc;EACV,AAAI,EAAwB,WAC1B,aAAa,EAAwB,OAAO;CAEhD,GACA,CAAC,CACH;CAEA,IAAM,IAA0B,QAAkB;EAIhD,AAHI,EAAwB,WAC1B,aAAa,EAAwB,OAAO,GAE9C,EAAwB,UAAU,iBAAiB;GAEjD,AADA,EAAiB,EAAK,GACtB,EAAwB,UAAU;EACpC,GAAG,GAAG;CACR,GAAG,CAAC,CAAC,GAEC,IAAiB,QAAkB;EAGvC,AAFA,EAAkB,IAAI,GACtB,EAAqB,IAAI,GACzB,EAAgB,IAAI;CACtB,GAAG,CAAC,CAAC,GAEC,IAAsB,GACzB,MAA2D;EAC1D,IAAM,IAAO,EAAM,cAAc,sBAAsB;EACvD,OAAO,EAAM,UAAU,EAAK,MAAM,EAAK,SAAS,IAAI,WAAW;CACjE,GACA,CAAC,CACH,GAEM,IAAa,GAChB,GAAuB,MAAsC;EAC5D,IAAI,CAAC,KAAkB,MAAmB,GAAe;GAEvD,AADA,EAAe,GACf,EAAwB;GACxB;EACF;EAcA,AAZA,EACE,EACE,GACA,GACA,GACA,GACA,CACF,CACF,GACA,EAAe,GAGf,EAAwB;CAC1B,GACA;EACE;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,OACE,kBAAC,OAAD;EACE,cAAY,EAAE,EAAQ,qBAAqB;EAC3C,WAAU;YAET,EAAO,KAAK,MACX,kBAAC,GAAD;GAES;GACP,UAAU,CAAC,EAAkB,IAAI,EAAM,EAAE;GACzC,iBAAiB,EAAwB,IAAI,EAAM,EAAE;GACrD,YAAY,MAAmB,EAAM;GACrC,uBACE,MAAsB,EAAM,MAAM,MAAmB,EAAM,KACvD,IACA;GAES;GACa;GACN;GACtB,wBAAwB,EAAuB,EAAM,EAAE;GACvD,mBAAmB;IAEjB,AADA,EAAiB,EAAI,GACrB,EAAkB,EAAM,EAAE;GAC5B;GACA,iBAAiB;IAEf,AADA,EAAe,GACf,EAAwB;GAC1B;GACA,aAAa,MAAU;IACrB,EAAM,eAAe;IACrB,IAAM,EAAE,oBAAiB;IAKzB,AAJI,MACF,EAAa,aAAa,SAE5B,EAAqB,EAAM,EAAE,GAC7B,EAAgB,EAAoB,CAAK,CAAC;GAC5C;GACA,mBAAmB;IACjB,GAAsB,MACpB,MAAY,EAAM,KAAK,OAAO,CAChC;GACF;GACA,SAAS,MAAU;IAEjB,AADA,EAAM,eAAe,GACrB,EAAW,EAAM,IAAI,EAAoB,CAAK,CAAC;GACjD;GACA,+BAA+B,EAA6B,EAAM,EAAE;GACpE,yBAAyB,EAAkB,EAAM,MAAM;GAC/B;EACzB,GA3CM,EAAM,EA2CZ,CACF;CACE,CAAA;AAET"}
+{"version":3,"file":"conversation-group-folder-list.js","names":[],"sources":["../../../../src/components/features/conversation-panel/conversation-group-folder-list.tsx"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type DragEvent,\n  type ReactNode,\n} from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport type { AppConversation } from \"#/api/conversation-service/agent-server-conversation-service.types\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { ConversationGroupFolderRow } from \"./conversation-group-folder-row\";\nimport {\n  moveGroupFolderOrder,\n  type ConversationGroupLaunch,\n  type GroupFolderDropPosition,\n} from \"./conversation-panel-list-helpers\";\n\ninterface ConversationGroup {\n  id: string;\n  label: string;\n  conversations: AppConversation[];\n  launch: ConversationGroupLaunch;\n}\n\ninterface ConversationGroupFolderListProps {\n  groups: ConversationGroup[];\n  groupIds: readonly string[];\n  groupFolderOrder: readonly string[];\n  setGroupFolderOrder: (order: readonly string[]) => void;\n  collapsedGroupIds: ReadonlySet<string>;\n  expandedGroupPreviewIds: ReadonlySet<string>;\n  discoveryConversationIds: ReadonlySet<string> | null;\n  onToggleGroupCollapsed: (groupId: string) => void;\n  onToggleGroupPreviewExpanded: (groupId: string) => void;\n  isCreatingConversationFlow: boolean;\n  activeConversationId?: string | null;\n  onLaunchFromGroup: (launch: ConversationGroupLaunch) => void;\n  renderConversationCard: (conversation: AppConversation) => ReactNode;\n}\n\nexport function ConversationGroupFolderList({\n  groups,\n  groupIds,\n  groupFolderOrder,\n  setGroupFolderOrder,\n  collapsedGroupIds,\n  expandedGroupPreviewIds,\n  discoveryConversationIds,\n  onToggleGroupCollapsed,\n  onToggleGroupPreviewExpanded,\n  isCreatingConversationFlow,\n  activeConversationId,\n  onLaunchFromGroup,\n  renderConversationCard,\n}: ConversationGroupFolderListProps) {\n  const { t } = useTranslation(\"openhands\");\n  const [draggedGroupId, setDraggedGroupId] = useState<string | null>(null);\n  const [dropTargetGroupId, setDropTargetGroupId] = useState<string | null>(\n    null,\n  );\n  const [dropPosition, setDropPosition] =\n    useState<GroupFolderDropPosition | null>(null);\n  // Layout animation is only enabled around a drag-and-drop reorder so that\n  // expand/collapse clicks don't trigger sibling repositioning animations.\n  const [animateLayout, setAnimateLayout] = useState(false);\n  const animateLayoutTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(\n    null,\n  );\n\n  useEffect(\n    () => () => {\n      if (animateLayoutTimeoutRef.current) {\n        clearTimeout(animateLayoutTimeoutRef.current);\n      }\n    },\n    [],\n  );\n\n  const stopAnimatingLayoutSoon = useCallback(() => {\n    if (animateLayoutTimeoutRef.current) {\n      clearTimeout(animateLayoutTimeoutRef.current);\n    }\n    animateLayoutTimeoutRef.current = setTimeout(() => {\n      setAnimateLayout(false);\n      animateLayoutTimeoutRef.current = null;\n    }, 300);\n  }, []);\n\n  const resetDragState = useCallback(() => {\n    setDraggedGroupId(null);\n    setDropTargetGroupId(null);\n    setDropPosition(null);\n  }, []);\n\n  const computeDropPosition = useCallback(\n    (event: DragEvent<HTMLElement>): GroupFolderDropPosition => {\n      const rect = event.currentTarget.getBoundingClientRect();\n      return event.clientY < rect.top + rect.height / 2 ? \"before\" : \"after\";\n    },\n    [],\n  );\n\n  const handleDrop = useCallback(\n    (targetGroupId: string, position: GroupFolderDropPosition) => {\n      if (!draggedGroupId || draggedGroupId === targetGroupId) {\n        resetDragState();\n        stopAnimatingLayoutSoon();\n        return;\n      }\n\n      setGroupFolderOrder(\n        moveGroupFolderOrder(\n          groupFolderOrder,\n          groupIds,\n          draggedGroupId,\n          targetGroupId,\n          position,\n        ),\n      );\n      resetDragState();\n      // Keep layout animation active across the reorder render, then disable\n      // it once the spring settles.\n      stopAnimatingLayoutSoon();\n    },\n    [\n      draggedGroupId,\n      groupFolderOrder,\n      groupIds,\n      resetDragState,\n      setGroupFolderOrder,\n      stopAnimatingLayoutSoon,\n    ],\n  );\n\n  return (\n    <nav\n      aria-label={t(I18nKey.SIDEBAR$CONVERSATIONS)}\n      className=\"space-y-1 md:space-y-0.5 pb-1\"\n    >\n      {groups.map((group) => (\n        <ConversationGroupFolderRow\n          key={group.id}\n          group={group}\n          expanded={!collapsedGroupIds.has(group.id)}\n          previewExpanded={expandedGroupPreviewIds.has(group.id)}\n          isDragging={draggedGroupId === group.id}\n          dropIndicatorPosition={\n            dropTargetGroupId === group.id && draggedGroupId !== group.id\n              ? dropPosition\n              : null\n          }\n          animateLayout={animateLayout}\n          isCreatingConversationFlow={isCreatingConversationFlow}\n          activeConversationId={activeConversationId}\n          discoveryConversationIds={discoveryConversationIds}\n          onToggleExpanded={() => onToggleGroupCollapsed(group.id)}\n          onDragStart={() => {\n            setAnimateLayout(true);\n            setDraggedGroupId(group.id);\n          }}\n          onDragEnd={() => {\n            resetDragState();\n            stopAnimatingLayoutSoon();\n          }}\n          onDragOver={(event) => {\n            event.preventDefault();\n            const { dataTransfer } = event;\n            if (dataTransfer) {\n              dataTransfer.dropEffect = \"move\";\n            }\n            setDropTargetGroupId(group.id);\n            setDropPosition(computeDropPosition(event));\n          }}\n          onDragLeave={() => {\n            setDropTargetGroupId((current) =>\n              current === group.id ? null : current,\n            );\n          }}\n          onDrop={(event) => {\n            event.preventDefault();\n            handleDrop(group.id, computeDropPosition(event));\n          }}\n          onTogglePreviewExpanded={() => onToggleGroupPreviewExpanded(group.id)}\n          onLaunchFromGroup={() => onLaunchFromGroup(group.launch)}\n          renderConversationCard={renderConversationCard}\n        />\n      ))}\n    </nav>\n  );\n}\n"],"mappings":";;;;;;;AAyCA,SAAgB,EAA4B,EAC1C,WACA,aACA,qBACA,wBACA,sBACA,4BACA,6BACA,2BACA,iCACA,+BACA,yBACA,sBACA,6BACmC;CACnC,IAAM,EAAE,SAAM,EAAe,WAAW,GAClC,CAAC,GAAgB,KAAqB,EAAwB,IAAI,GAClE,CAAC,GAAmB,KAAwB,EAChD,IACF,GACM,CAAC,GAAc,KACnB,EAAyC,IAAI,GAGzC,CAAC,GAAe,KAAoB,EAAS,EAAK,GAClD,IAA0B,EAC9B,IACF;CAEA,cACc;EACV,AAAI,EAAwB,WAC1B,aAAa,EAAwB,OAAO;CAEhD,GACA,CAAC,CACH;CAEA,IAAM,IAA0B,QAAkB;EAIhD,AAHI,EAAwB,WAC1B,aAAa,EAAwB,OAAO,GAE9C,EAAwB,UAAU,iBAAiB;GAEjD,AADA,EAAiB,EAAK,GACtB,EAAwB,UAAU;EACpC,GAAG,GAAG;CACR,GAAG,CAAC,CAAC,GAEC,IAAiB,QAAkB;EAGvC,AAFA,EAAkB,IAAI,GACtB,EAAqB,IAAI,GACzB,EAAgB,IAAI;CACtB,GAAG,CAAC,CAAC,GAEC,IAAsB,GACzB,MAA2D;EAC1D,IAAM,IAAO,EAAM,cAAc,sBAAsB;EACvD,OAAO,EAAM,UAAU,EAAK,MAAM,EAAK,SAAS,IAAI,WAAW;CACjE,GACA,CAAC,CACH,GAEM,IAAa,GAChB,GAAuB,MAAsC;EAC5D,IAAI,CAAC,KAAkB,MAAmB,GAAe;GAEvD,AADA,EAAe,GACf,EAAwB;GACxB;EACF;EAcA,AAZA,EACE,EACE,GACA,GACA,GACA,GACA,CACF,CACF,GACA,EAAe,GAGf,EAAwB;CAC1B,GACA;EACE;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,OACE,kBAAC,OAAD;EACE,cAAY,EAAE,EAAQ,qBAAqB;EAC3C,WAAU;YAET,EAAO,KAAK,MACX,kBAAC,GAAD;GAES;GACP,UAAU,CAAC,EAAkB,IAAI,EAAM,EAAE;GACzC,iBAAiB,EAAwB,IAAI,EAAM,EAAE;GACrD,YAAY,MAAmB,EAAM;GACrC,uBACE,MAAsB,EAAM,MAAM,MAAmB,EAAM,KACvD,IACA;GAES;GACa;GACN;GACI;GAC1B,wBAAwB,EAAuB,EAAM,EAAE;GACvD,mBAAmB;IAEjB,AADA,EAAiB,EAAI,GACrB,EAAkB,EAAM,EAAE;GAC5B;GACA,iBAAiB;IAEf,AADA,EAAe,GACf,EAAwB;GAC1B;GACA,aAAa,MAAU;IACrB,EAAM,eAAe;IACrB,IAAM,EAAE,oBAAiB;IAKzB,AAJI,MACF,EAAa,aAAa,SAE5B,EAAqB,EAAM,EAAE,GAC7B,EAAgB,EAAoB,CAAK,CAAC;GAC5C;GACA,mBAAmB;IACjB,GAAsB,MACpB,MAAY,EAAM,KAAK,OAAO,CAChC;GACF;GACA,SAAS,MAAU;IAEjB,AADA,EAAM,eAAe,GACrB,EAAW,EAAM,IAAI,EAAoB,CAAK,CAAC;GACjD;GACA,+BAA+B,EAA6B,EAAM,EAAE;GACpE,yBAAyB,EAAkB,EAAM,MAAM;GAC/B;EACzB,GA5CM,EAAM,EA4CZ,CACF;CACE,CAAA;AAET"}

package/dist/components/features/conversation-panel/conversation-group-folder-row.cjs

@@ -1,2 +1,2 @@
-require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),t=require("../../../i18n/declaration.cjs"),n=require("../../../node_modules/lucide-react/dist/esm/icons/folder-open.cjs"),r=require("../../../node_modules/lucide-react/dist/esm/icons/folder.cjs"),i=require("../../../node_modules/lucide-react/dist/esm/icons/plus.cjs"),a=require("../../../utils/utils.cjs"),o=require("../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.cjs"),s=require("./conversation-panel-list-helpers.cjs");let c=require("react"),l=require("react/jsx-runtime");function u({group:u,expanded:d,previewExpanded:f,isDragging:p,dropIndicatorPosition:m,animateLayout:h,isCreatingConversationFlow:g,activeConversationId:_,onToggleExpanded:v,onDragStart:y,onDragEnd:b,onDragOver:x,onDragLeave:S,onDrop:C,onTogglePreviewExpanded:w,onLaunchFromGroup:T,renderConversationCard:E}){let{t:D}=e.useTranslation(`openhands`),O=(0,c.useRef)(null),k=`thread-folder-${u.id.replace(/[^a-zA-Z0-9_-]/g,`-`)}`,A=u.id.replace(/[^a-zA-Z0-9_-]/g,`-`),{visibleConversations:j,isPreviewTruncated:M,isShowingAll:N}=s.getGroupConversationPreview(u.conversations,{expanded:f,activeConversationId:_});return(0,l.jsxs)(o.motion.section,{ref:O,layout:h?`position`:!1,transition:{type:`spring`,stiffness:600,damping:45},"aria-labelledby":k,"data-testid":`thread-folder-${A}`,onDragOver:x,onDragLeave:S,onDrop:C,className:`relative rounded-md`,children:[m?(0,l.jsx)(`div`,{"aria-hidden":!0,"data-testid":`thread-folder-drop-indicator-${A}`,className:a.cn(`pointer-events-none absolute inset-x-0 z-10 h-0.5 rounded-full bg-[var(--oh-accent)]`,m===`before`?`-top-0.5`:`-bottom-0.5`)}):null,(0,l.jsxs)(`div`,{className:a.cn(p&&`opacity-0`),children:[(0,l.jsxs)(`div`,{className:a.cn(`flex h-8 w-full min-w-0 items-center gap-0.5 rounded-md pl-2 pr-1 text-sm font-normal`,`text-[var(--oh-muted)] transition-colors hover:bg-[var(--oh-surface-raised)] hover:text-white`),children:[(0,l.jsxs)(`button`,{type:`button`,draggable:!0,id:k,"aria-expanded":d,"aria-controls":`thread-folder-content-${A}`,"data-testid":`thread-folder-drag-${A}`,"aria-label":D(d?t.I18nKey.CONVERSATION_PANEL$COLLAPSE_FOLDER:t.I18nKey.CONVERSATION_PANEL$EXPAND_FOLDER,{label:u.label}),onClick:v,onDragStart:e=>{e.stopPropagation();let{dataTransfer:t}=e;if(t){t.effectAllowed=`move`,t.setData(`text/plain`,u.id);let n=O.current;if(n&&typeof t.setDragImage==`function`){let r=n.getBoundingClientRect(),i=n.cloneNode(!0);i.style.position=`fixed`,i.style.top=`0`,i.style.left=`-9999px`,i.style.width=`${r.width}px`,i.style.margin=`0`,i.style.pointerEvents=`none`,i.style.borderRadius=`0.5rem`,i.style.padding=`0.25rem`,i.style.backgroundColor=`var(--oh-surface-raised)`,i.style.boxShadow=`0 8px 24px rgba(0, 0, 0, 0.35)`,document.body.appendChild(i),t.setDragImage(i,e.clientX-r.left,e.clientY-r.top),window.setTimeout(()=>i.remove(),0)}}y()},onDragEnd:e=>{e.stopPropagation(),b()},className:a.cn(`group/folder flex min-h-8 min-w-0 flex-1 cursor-grab items-center gap-2 rounded-md py-1 text-left text-inherit outline-none active:cursor-grabbing`,`focus-visible:ring-1 focus-visible:ring-[var(--oh-border)]`),children:[(0,l.jsx)(r.Folder,{className:a.cn(`h-4 w-4 shrink-0`,d?`hidden group-hover/folder:block`:`block group-hover/folder:hidden`),"aria-hidden":!0}),(0,l.jsx)(n.FolderOpen,{className:a.cn(`h-4 w-4 shrink-0`,d?`block group-hover/folder:hidden`:`hidden group-hover/folder:block`),"aria-hidden":!0}),(0,l.jsx)(`span`,{className:`truncate`,children:u.label})]}),(0,l.jsx)(`button`,{type:`button`,className:a.cn(`inline-flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-md`,`text-inherit transition-colors`,`hover:bg-white/10 hover:text-white`,`focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--oh-border)]`,`disabled:cursor-not-allowed disabled:opacity-50`),disabled:g,"aria-label":D(t.I18nKey.CONVERSATION_PANEL$ADD_CONVERSATION_TO_GROUP,{label:u.label}),"data-testid":`add-conversation-to-group-${A}`,onClick:e=>{e.preventDefault(),e.stopPropagation(),T()},children:(0,l.jsx)(i.Plus,{className:`h-3.5 w-3.5 shrink-0`,"aria-hidden":!0,strokeWidth:2})})]}),d?(0,l.jsxs)(`div`,{id:`thread-folder-content-${A}`,className:`mt-0.5 space-y-0.5`,children:[j.map(E),M?(0,l.jsx)(`div`,{className:`pl-2`,children:(0,l.jsx)(`button`,{type:`button`,"data-testid":`thread-folder-view-more-${A}`,onClick:w,className:`cursor-pointer text-xs text-[var(--oh-text-dim)] hover:text-white`,children:D(N?t.I18nKey.CONVERSATION_PANEL$LESS:t.I18nKey.CONVERSATION_PANEL$MORE)})}):null]}):null]})]})}exports.ConversationGroupFolderRow=u;
+require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),t=require("../../../i18n/declaration.cjs"),n=require("../../../node_modules/lucide-react/dist/esm/icons/folder-open.cjs"),r=require("../../../node_modules/lucide-react/dist/esm/icons/folder.cjs"),i=require("../../../node_modules/lucide-react/dist/esm/icons/plus.cjs"),a=require("../../../utils/utils.cjs"),o=require("../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.cjs"),s=require("./conversation-panel-list-helpers.cjs");let c=require("react"),l=require("react/jsx-runtime");function u({group:u,expanded:d,previewExpanded:f,isDragging:p,dropIndicatorPosition:m,animateLayout:h,isCreatingConversationFlow:g,activeConversationId:_,discoveryConversationIds:v,onToggleExpanded:y,onDragStart:b,onDragEnd:x,onDragOver:S,onDragLeave:C,onDrop:w,onTogglePreviewExpanded:T,onLaunchFromGroup:E,renderConversationCard:D}){let{t:O}=e.useTranslation(`openhands`),k=(0,c.useRef)(null),A=`thread-folder-${u.id.replace(/[^a-zA-Z0-9_-]/g,`-`)}`,j=u.id.replace(/[^a-zA-Z0-9_-]/g,`-`),{visibleConversations:M,isPreviewTruncated:N,isShowingAll:P}=s.getGroupConversationPreview(u.conversations,{expanded:f,activeConversationId:_,discoveryConversationIds:v??void 0});return(0,l.jsxs)(o.motion.section,{ref:k,layout:h?`position`:!1,transition:{type:`spring`,stiffness:600,damping:45},"aria-labelledby":A,"data-testid":`thread-folder-${j}`,onDragOver:S,onDragLeave:C,onDrop:w,className:`relative rounded-md`,children:[m?(0,l.jsx)(`div`,{"aria-hidden":!0,"data-testid":`thread-folder-drop-indicator-${j}`,className:a.cn(`pointer-events-none absolute inset-x-0 z-10 h-0.5 rounded-full bg-[var(--oh-accent)]`,m===`before`?`-top-0.5`:`-bottom-0.5`)}):null,(0,l.jsxs)(`div`,{className:a.cn(p&&`opacity-0`),children:[(0,l.jsxs)(`div`,{className:a.cn(`flex h-8 w-full min-w-0 items-center gap-0.5 rounded-md pl-2 pr-1 text-sm font-normal`,`text-[var(--oh-muted)] transition-colors hover:bg-[var(--oh-surface-raised)] hover:text-white`),children:[(0,l.jsxs)(`button`,{type:`button`,draggable:!0,id:A,"aria-expanded":d,"aria-controls":`thread-folder-content-${j}`,"data-testid":`thread-folder-drag-${j}`,"aria-label":O(d?t.I18nKey.CONVERSATION_PANEL$COLLAPSE_FOLDER:t.I18nKey.CONVERSATION_PANEL$EXPAND_FOLDER,{label:u.label}),onClick:y,onDragStart:e=>{e.stopPropagation();let{dataTransfer:t}=e;if(t){t.effectAllowed=`move`,t.setData(`text/plain`,u.id);let n=k.current;if(n&&typeof t.setDragImage==`function`){let r=n.getBoundingClientRect(),i=n.cloneNode(!0);i.style.position=`fixed`,i.style.top=`0`,i.style.left=`-9999px`,i.style.width=`${r.width}px`,i.style.margin=`0`,i.style.pointerEvents=`none`,i.style.borderRadius=`0.5rem`,i.style.padding=`0.25rem`,i.style.backgroundColor=`var(--oh-surface-raised)`,i.style.boxShadow=`0 8px 24px rgba(0, 0, 0, 0.35)`,document.body.appendChild(i),t.setDragImage(i,e.clientX-r.left,e.clientY-r.top),window.setTimeout(()=>i.remove(),0)}}b()},onDragEnd:e=>{e.stopPropagation(),x()},className:a.cn(`group/folder flex min-h-8 min-w-0 flex-1 cursor-grab items-center gap-2 rounded-md py-1 text-left text-inherit outline-none active:cursor-grabbing`,`focus-visible:ring-1 focus-visible:ring-[var(--oh-border)]`),children:[(0,l.jsx)(r.Folder,{className:a.cn(`h-4 w-4 shrink-0`,d?`hidden group-hover/folder:block`:`block group-hover/folder:hidden`),"aria-hidden":!0}),(0,l.jsx)(n.FolderOpen,{className:a.cn(`h-4 w-4 shrink-0`,d?`block group-hover/folder:hidden`:`hidden group-hover/folder:block`),"aria-hidden":!0}),(0,l.jsx)(`span`,{className:`truncate`,children:u.label})]}),(0,l.jsx)(`button`,{type:`button`,className:a.cn(`inline-flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-md`,`text-inherit transition-colors`,`hover:bg-white/10 hover:text-white`,`focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--oh-border)]`,`disabled:cursor-not-allowed disabled:opacity-50`),disabled:g,"aria-label":O(t.I18nKey.CONVERSATION_PANEL$ADD_CONVERSATION_TO_GROUP,{label:u.label}),"data-testid":`add-conversation-to-group-${j}`,onClick:e=>{e.preventDefault(),e.stopPropagation(),E()},children:(0,l.jsx)(i.Plus,{className:`h-3.5 w-3.5 shrink-0`,"aria-hidden":!0,strokeWidth:2})})]}),d?(0,l.jsxs)(`div`,{id:`thread-folder-content-${j}`,className:`mt-0.5 space-y-0.5`,children:[M.map(D),N?(0,l.jsx)(`div`,{className:`pl-2`,children:(0,l.jsx)(`button`,{type:`button`,"data-testid":`thread-folder-view-more-${j}`,onClick:T,className:`cursor-pointer text-xs text-[var(--oh-text-dim)] hover:text-white`,children:O(P?t.I18nKey.CONVERSATION_PANEL$LESS:t.I18nKey.CONVERSATION_PANEL$MORE)})}):null]}):null]})]})}exports.ConversationGroupFolderRow=u;
 //# sourceMappingURL=conversation-group-folder-row.cjs.map