@openhands/agent-canvas 1.15.0 → 1.16.0

package/dist/components/features/conversation/conversation-overview-skills-panel.js

@@ -1,138 +1,120 @@
 import { useTranslation as e } from "../../../node_modules/react-i18next/dist/es/useTranslation.js";
 import { I18nKey as t } from "../../../i18n/declaration.js";
 import { cn as n } from "../../../utils/utils.js";
-import { retrieveAxiosErrorMessage as r } from "../../../utils/retrieve-axios-error-message.js";
-import { displayErrorToast as i } from "../../../utils/custom-toast-handlers.js";
-import { useActiveConversation as a } from "../../../hooks/query/use-active-conversation.js";
-import { useConversationSkills as o } from "../../../hooks/query/use-conversation-skills.js";
-import { useSettings as s } from "../../../hooks/query/use-settings.js";
-import { useConversationOverviewDrawerOptional as c } from "./conversation-overview-drawer-context.js";
-import { extensionModuleCardGridClassName as ee, extensionModuleCardGridContainerClassName as l, extensionModuleEmptyStateClassName as u } from "../../../utils/extension-module-card-classes.js";
-import { useSaveSettings as d } from "../../../hooks/mutation/use-save-settings.js";
-import { SkillCard as f } from "../skills/skill-card.js";
-import { SkillDetailModal as p } from "../skills/skill-detail-modal.js";
-import { AddSkillModal as m } from "../skills/add-skill-modal.js";
-import { SkillsToolbar as te } from "../skills/skills-toolbar.js";
-import { SkillFiltersModal as ne } from "../skills/skill-filters-modal.js";
-import { EMPTY_SKILL_FILTER_STATE as re, applySkillFilters as ie, buildSkillFacetGroups as ae, clearSkillFilterFacets as h, countActiveFilters as g, toggleSkillFilterValue as _ } from "../skills/skill-filter.js";
-import { CONVERSATION_OVERVIEW_PROJECT_SCOPE as v, filterSkillsByProjectScope as y, sortSkillsByProjectRelevance as b } from "../../../utils/conversation-overview-project-scope.js";
-import { ConversationOverviewProjectScopeToggle as x } from "./conversation-overview-project-scope-toggle.js";
-import { useEffect as S, useMemo as C, useState as w } from "react";
-import { jsx as T, jsxs as E } from "react/jsx-runtime";
+import { useActiveConversation as r } from "../../../hooks/query/use-active-conversation.js";
+import { useConversationSkills as i } from "../../../hooks/query/use-conversation-skills.js";
+import { useSettings as a } from "../../../hooks/query/use-settings.js";
+import { useSkillEnablement as o } from "../../../hooks/use-skill-enablement.js";
+import { useConversationOverviewDrawerOptional as s } from "./conversation-overview-drawer-context.js";
+import { extensionModuleCardGridClassName as c, extensionModuleCardGridContainerClassName as l, extensionModuleEmptyStateClassName as u } from "../../../utils/extension-module-card-classes.js";
+import { SkillCard as d } from "../skills/skill-card.js";
+import { SkillDetailModal as f } from "../skills/skill-detail-modal.js";
+import { AddSkillModal as p } from "../skills/add-skill-modal.js";
+import { SkillsToolbar as m } from "../skills/skills-toolbar.js";
+import { SkillFiltersModal as h } from "../skills/skill-filters-modal.js";
+import { EMPTY_SKILL_FILTER_STATE as g, applySkillFilters as _, buildSkillFacetGroups as v, clearSkillFilterFacets as y, countActiveFilters as b, toggleSkillFilterValue as x } from "../skills/skill-filter.js";
+import { CONVERSATION_OVERVIEW_PROJECT_SCOPE as S, filterSkillsByProjectScope as C, sortSkillsByProjectRelevance as w } from "../../../utils/conversation-overview-project-scope.js";
+import { ConversationOverviewProjectScopeToggle as T } from "./conversation-overview-project-scope-toggle.js";
+import { useEffect as E, useMemo as D, useState as O } from "react";
+import { jsx as k, jsxs as A } from "react/jsx-runtime";
 //#region src/components/features/conversation/conversation-overview-skills-panel.tsx
-function D({ openAdd: D }) {
-	let { t: O } = e("openhands"), { mutate: k } = d(), { data: A, isLoading: j } = s(), { data: M } = a(), { data: N, isLoading: P } = o(), F = c()?.addRequestKey ?? 0, I = M?.selected_workspace ?? null, [L, R] = w(/* @__PURE__ */ new Set()), [z, B] = w(!1), [V, H] = w(v.project), [U, W] = w(re), [G, K] = w(!1), [q, J] = w(null), [Y, X] = w(!1);
-	S(() => {
-		j || !A || (R(new Set(A.disabled_skills ?? [])), B(!0));
-	}, [j, A?.disabled_skills]), S(() => {
-		D && X(!0);
-	}, [D]), S(() => {
-		F !== 0 && X(!0);
-	}, [F]), S(() => {
-		z && k({ disabled_skills: Array.from(L) }, { onError: (e) => {
-			i(r(e) || O(t.ERROR$GENERIC));
-		} });
+function j({ openAdd: j }) {
+	let { t: M } = e("openhands"), { isLoading: N } = a(), { data: P } = r(), { data: F, isLoading: I } = i(), { isEnabled: L, setEnabled: R } = o(), z = s()?.addRequestKey ?? 0, B = P?.selected_workspace ?? null, [V, H] = O(S.project), [U, W] = O(g), [G, K] = O(!1), [q, J] = O(null), [Y, X] = O(!1);
+	E(() => {
+		j && X(!0);
+	}, [j]), E(() => {
+		z !== 0 && X(!0);
+	}, [z]);
+	let Z = D(() => {
+		if (!F) return [];
+		let e = C(F, V, B);
+		return V === S.all ? w(e, B) : e;
 	}, [
-		L,
-		z,
-		k,
-		O
-	]);
-	let Z = C(() => {
-		if (!N) return [];
-		let e = y(N, V, I);
-		return V === v.all ? b(e, I) : e;
-	}, [
-		N,
+		F,
 		V,
-		I
-	]), Q = C(() => ie(Z, L, U), [
+		B
+	]), Q = D(() => _(Z, L, U), [
 		Z,
 		L,
 		U
-	]), $ = (e, t) => {
-		R((n) => {
-			let r = new Set(n);
-			return t ? r.delete(e) : r.add(e), r;
-		});
-	};
-	return P || j ? /* @__PURE__ */ T("div", {
+	]);
+	return I || N ? /* @__PURE__ */ k("div", {
 		"data-testid": "conversation-overview-skills-panel",
 		className: "text-sm text-muted",
 		children: "…"
-	}) : !N || N.length === 0 ? /* @__PURE__ */ E("div", {
+	}) : !F || F.length === 0 ? /* @__PURE__ */ A("div", {
 		"data-testid": "conversation-overview-skills-panel",
 		className: "flex flex-col gap-4",
-		children: [/* @__PURE__ */ T("div", {
+		children: [/* @__PURE__ */ k("div", {
 			"data-testid": "conversation-overview-skills-empty",
 			className: u,
-			children: /* @__PURE__ */ T("p", {
+			children: /* @__PURE__ */ k("p", {
 				className: "text-sm text-tertiary-light",
-				children: O(t.SETTINGS$SKILLS_NO_SKILLS)
+				children: M(t.SETTINGS$SKILLS_NO_SKILLS)
 			})
-		}), Y ? /* @__PURE__ */ T(m, { onClose: () => X(!1) }) : null]
-	}) : /* @__PURE__ */ E("div", {
+		}), Y ? /* @__PURE__ */ k(p, { onClose: () => X(!1) }) : null]
+	}) : /* @__PURE__ */ A("div", {
 		"data-testid": "conversation-overview-skills-panel",
 		className: "flex flex-col gap-4",
 		children: [
-			/* @__PURE__ */ T(x, {
+			/* @__PURE__ */ k(T, {
 				value: V,
 				onChange: H,
 				testId: "conversation-overview-skills-scope"
 			}),
-			/* @__PURE__ */ T(te, {
+			/* @__PURE__ */ k(m, {
 				search: U.query,
 				onSearchChange: (e) => W((t) => ({
 					...t,
 					query: e
 				})),
-				activeFilterCount: g(U),
+				activeFilterCount: b(U),
 				onOpenFilters: () => K(!0)
 			}),
-			Z.length === 0 ? /* @__PURE__ */ T("div", {
+			Z.length === 0 ? /* @__PURE__ */ k("div", {
 				"data-testid": "conversation-overview-skills-project-empty",
 				className: u,
-				children: /* @__PURE__ */ T("p", {
+				children: /* @__PURE__ */ k("p", {
 					className: "text-sm text-tertiary-light",
-					children: O(t.CONVERSATION$OVERVIEW_SCOPE_PROJECT_EMPTY_SKILLS)
+					children: M(t.CONVERSATION$OVERVIEW_SCOPE_PROJECT_EMPTY_SKILLS)
 				})
-			}) : Q.length === 0 ? /* @__PURE__ */ T("div", {
+			}) : Q.length === 0 ? /* @__PURE__ */ k("div", {
 				"data-testid": "conversation-overview-skills-no-match",
 				className: u,
-				children: /* @__PURE__ */ T("p", {
+				children: /* @__PURE__ */ k("p", {
 					className: "text-sm text-tertiary-light",
-					children: O(t.SETTINGS$SKILLS_NO_MATCH)
+					children: M(t.SETTINGS$SKILLS_NO_MATCH)
 				})
-			}) : /* @__PURE__ */ T("section", {
+			}) : /* @__PURE__ */ k("section", {
 				className: n("flex min-w-0 flex-col gap-3", l),
-				children: /* @__PURE__ */ T("div", {
-					className: n(ee, "grid-cols-1"),
-					children: Q.map((e) => /* @__PURE__ */ T(f, {
+				children: /* @__PURE__ */ k("div", {
+					className: n(c, "grid-cols-1"),
+					children: Q.map((e) => /* @__PURE__ */ k(d, {
 						skill: e,
-						enabled: !L.has(e.name),
+						enabled: L(e),
 						onOpen: () => J(e),
-						onToggle: (t) => $(e.name, t)
+						onToggle: (t) => R(e.name, t)
 					}, e.name))
 				})
 			}),
-			q ? /* @__PURE__ */ T(p, {
+			q ? /* @__PURE__ */ k(f, {
 				skill: q,
-				enabled: !L.has(q.name),
-				onToggle: (e) => $(q.name, e),
+				enabled: L(q),
+				onToggle: (e) => R(q.name, e),
 				onClose: () => J(null)
 			}) : null,
-			Y ? /* @__PURE__ */ T(m, { onClose: () => X(!1) }) : null,
-			G ? /* @__PURE__ */ T(ne, {
-				groups: ae(Z, L, U),
-				activeCount: g(U),
-				onToggle: (e, t) => W((n) => _(n, e, t)),
-				onClearAll: () => W((e) => h(e)),
+			Y ? /* @__PURE__ */ k(p, { onClose: () => X(!1) }) : null,
+			G ? /* @__PURE__ */ k(h, {
+				groups: v(Z, L, U),
+				activeCount: b(U),
+				onToggle: (e, t) => W((n) => x(n, e, t)),
+				onClearAll: () => W((e) => y(e)),
 				onClose: () => K(!1)
 			}) : null
 		]
 	});
 }
 //#endregion
-export { D as ConversationOverviewSkillsPanel };
+export { j as ConversationOverviewSkillsPanel };
 
 //# sourceMappingURL=conversation-overview-skills-panel.js.map

package/dist/components/features/conversation/conversation-overview-skills-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"conversation-overview-skills-panel.js","names":[],"sources":["../../../../src/components/features/conversation/conversation-overview-skills-panel.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useSaveSettings } from \"#/hooks/mutation/use-save-settings\";\nimport { useSettings } from \"#/hooks/query/use-settings\";\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useConversationSkills } from \"#/hooks/query/use-conversation-skills\";\nimport { SkillCard } from \"#/components/features/skills/skill-card\";\nimport { SkillDetailModal } from \"#/components/features/skills/skill-detail-modal\";\nimport { AddSkillModal } from \"#/components/features/skills/add-skill-modal\";\nimport { SkillsToolbar } from \"#/components/features/skills/skills-toolbar\";\nimport { SkillFiltersModal } from \"#/components/features/skills/skill-filters-modal\";\nimport {\n  applySkillFilters,\n  buildSkillFacetGroups,\n  clearSkillFilterFacets,\n  countActiveFilters,\n  toggleSkillFilterValue,\n  EMPTY_SKILL_FILTER_STATE,\n  type SkillFilterState,\n} from \"#/components/features/skills/skill-filter\";\nimport {\n  extensionModuleCardGridClassName,\n  extensionModuleCardGridContainerClassName,\n  extensionModuleEmptyStateClassName,\n} from \"#/utils/extension-module-card-classes\";\nimport { displayErrorToast } from \"#/utils/custom-toast-handlers\";\nimport { retrieveAxiosErrorMessage } from \"#/utils/retrieve-axios-error-message\";\nimport type { SkillInfo } from \"#/types/settings\";\nimport { cn } from \"#/utils/utils\";\nimport {\n  CONVERSATION_OVERVIEW_PROJECT_SCOPE,\n  filterSkillsByProjectScope,\n  sortSkillsByProjectRelevance,\n  type ConversationOverviewProjectScope,\n} from \"#/utils/conversation-overview-project-scope\";\nimport { useConversationOverviewDrawerOptional } from \"./conversation-overview-drawer-context\";\nimport { ConversationOverviewProjectScopeToggle } from \"./conversation-overview-project-scope-toggle\";\n\ninterface ConversationOverviewSkillsPanelProps {\n  openAdd: boolean;\n}\n\nexport function ConversationOverviewSkillsPanel({\n  openAdd,\n}: ConversationOverviewSkillsPanelProps) {\n  const { t } = useTranslation(\"openhands\");\n  const { mutate: saveSettings } = useSaveSettings();\n  const { data: settings, isLoading: settingsLoading } = useSettings();\n  const { data: conversation } = useActiveConversation();\n  const { data: skills, isLoading: skillsLoading } = useConversationSkills();\n  const addRequestKey =\n    useConversationOverviewDrawerOptional()?.addRequestKey ?? 0;\n  const projectDir = conversation?.selected_workspace ?? null;\n\n  const [disabledSet, setDisabledSet] = useState<Set<string>>(new Set());\n  const [hasHydratedInitialSettings, setHasHydratedInitialSettings] =\n    useState(false);\n  const [projectScope, setProjectScope] =\n    useState<ConversationOverviewProjectScope>(\n      CONVERSATION_OVERVIEW_PROJECT_SCOPE.project,\n    );\n  const [filter, setFilter] = useState<SkillFilterState>(\n    EMPTY_SKILL_FILTER_STATE,\n  );\n  const [isFiltersModalOpen, setIsFiltersModalOpen] = useState(false);\n  const [selectedSkill, setSelectedSkill] = useState<SkillInfo | null>(null);\n  const [showAddSkillModal, setShowAddSkillModal] = useState(false);\n\n  useEffect(() => {\n    if (settingsLoading || !settings) {\n      return;\n    }\n    setDisabledSet(new Set(settings.disabled_skills ?? []));\n    setHasHydratedInitialSettings(true);\n  }, [settingsLoading, settings?.disabled_skills]);\n\n  useEffect(() => {\n    if (!openAdd) {\n      return;\n    }\n    setShowAddSkillModal(true);\n  }, [openAdd]);\n\n  useEffect(() => {\n    if (addRequestKey === 0) {\n      return;\n    }\n    setShowAddSkillModal(true);\n  }, [addRequestKey]);\n\n  useEffect(() => {\n    if (!hasHydratedInitialSettings) {\n      return;\n    }\n    saveSettings(\n      { disabled_skills: Array.from(disabledSet) },\n      {\n        onError: (error) => {\n          displayErrorToast(\n            retrieveAxiosErrorMessage(error) || t(I18nKey.ERROR$GENERIC),\n          );\n        },\n      },\n    );\n  }, [disabledSet, hasHydratedInitialSettings, saveSettings, t]);\n\n  const scopedSkills = useMemo(() => {\n    if (!skills) {\n      return [];\n    }\n    const filtered = filterSkillsByProjectScope(\n      skills,\n      projectScope,\n      projectDir,\n    );\n    return projectScope === CONVERSATION_OVERVIEW_PROJECT_SCOPE.all\n      ? sortSkillsByProjectRelevance(filtered, projectDir)\n      : filtered;\n  }, [skills, projectScope, projectDir]);\n\n  const filteredSkills = useMemo(\n    () => applySkillFilters(scopedSkills, disabledSet, filter),\n    [scopedSkills, disabledSet, filter],\n  );\n\n  const handleToggle = (skillName: string, enabled: boolean) => {\n    setDisabledSet((previous) => {\n      const next = new Set(previous);\n      if (enabled) {\n        next.delete(skillName);\n      } else {\n        next.add(skillName);\n      }\n      return next;\n    });\n  };\n\n  if (skillsLoading || settingsLoading) {\n    return (\n      <div\n        data-testid=\"conversation-overview-skills-panel\"\n        className=\"text-sm text-muted\"\n      >\n        …\n      </div>\n    );\n  }\n\n  if (!skills || skills.length === 0) {\n    return (\n      <div\n        data-testid=\"conversation-overview-skills-panel\"\n        className=\"flex flex-col gap-4\"\n      >\n        <div\n          data-testid=\"conversation-overview-skills-empty\"\n          className={extensionModuleEmptyStateClassName}\n        >\n          <p className=\"text-sm text-tertiary-light\">\n            {t(I18nKey.SETTINGS$SKILLS_NO_SKILLS)}\n          </p>\n        </div>\n        {showAddSkillModal ? (\n          <AddSkillModal onClose={() => setShowAddSkillModal(false)} />\n        ) : null}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      data-testid=\"conversation-overview-skills-panel\"\n      className=\"flex flex-col gap-4\"\n    >\n      <ConversationOverviewProjectScopeToggle\n        value={projectScope}\n        onChange={setProjectScope}\n        testId=\"conversation-overview-skills-scope\"\n      />\n      <SkillsToolbar\n        search={filter.query}\n        onSearchChange={(query) =>\n          setFilter((previous) => ({ ...previous, query }))\n        }\n        activeFilterCount={countActiveFilters(filter)}\n        onOpenFilters={() => setIsFiltersModalOpen(true)}\n      />\n\n      {scopedSkills.length === 0 ? (\n        <div\n          data-testid=\"conversation-overview-skills-project-empty\"\n          className={extensionModuleEmptyStateClassName}\n        >\n          <p className=\"text-sm text-tertiary-light\">\n            {t(I18nKey.CONVERSATION$OVERVIEW_SCOPE_PROJECT_EMPTY_SKILLS)}\n          </p>\n        </div>\n      ) : filteredSkills.length === 0 ? (\n        <div\n          data-testid=\"conversation-overview-skills-no-match\"\n          className={extensionModuleEmptyStateClassName}\n        >\n          <p className=\"text-sm text-tertiary-light\">\n            {t(I18nKey.SETTINGS$SKILLS_NO_MATCH)}\n          </p>\n        </div>\n      ) : (\n        <section\n          className={cn(\n            \"flex min-w-0 flex-col gap-3\",\n            extensionModuleCardGridContainerClassName,\n          )}\n        >\n          <div className={cn(extensionModuleCardGridClassName, \"grid-cols-1\")}>\n            {filteredSkills.map((skill) => (\n              <SkillCard\n                key={skill.name}\n                skill={skill}\n                enabled={!disabledSet.has(skill.name)}\n                onOpen={() => setSelectedSkill(skill)}\n                onToggle={(enabled) => handleToggle(skill.name, enabled)}\n              />\n            ))}\n          </div>\n        </section>\n      )}\n\n      {selectedSkill ? (\n        <SkillDetailModal\n          skill={selectedSkill}\n          enabled={!disabledSet.has(selectedSkill.name)}\n          onToggle={(enabled) => handleToggle(selectedSkill.name, enabled)}\n          onClose={() => setSelectedSkill(null)}\n        />\n      ) : null}\n\n      {showAddSkillModal ? (\n        <AddSkillModal onClose={() => setShowAddSkillModal(false)} />\n      ) : null}\n\n      {isFiltersModalOpen ? (\n        <SkillFiltersModal\n          groups={buildSkillFacetGroups(scopedSkills, disabledSet, filter)}\n          activeCount={countActiveFilters(filter)}\n          onToggle={(groupId, value) =>\n            setFilter((previous) =>\n              toggleSkillFilterValue(previous, groupId, value),\n            )\n          }\n          onClearAll={() =>\n            setFilter((previous) => clearSkillFilterFacets(previous))\n          }\n          onClose={() => setIsFiltersModalOpen(false)}\n        />\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"conversation-overview-skills-panel.js","names":[],"sources":["../../../../src/components/features/conversation/conversation-overview-skills-panel.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useSettings } from \"#/hooks/query/use-settings\";\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useConversationSkills } from \"#/hooks/query/use-conversation-skills\";\nimport { useSkillEnablement } from \"#/hooks/use-skill-enablement\";\nimport { SkillCard } from \"#/components/features/skills/skill-card\";\nimport { SkillDetailModal } from \"#/components/features/skills/skill-detail-modal\";\nimport { AddSkillModal } from \"#/components/features/skills/add-skill-modal\";\nimport { SkillsToolbar } from \"#/components/features/skills/skills-toolbar\";\nimport { SkillFiltersModal } from \"#/components/features/skills/skill-filters-modal\";\nimport {\n  applySkillFilters,\n  buildSkillFacetGroups,\n  clearSkillFilterFacets,\n  countActiveFilters,\n  toggleSkillFilterValue,\n  EMPTY_SKILL_FILTER_STATE,\n  type SkillFilterState,\n} from \"#/components/features/skills/skill-filter\";\nimport {\n  extensionModuleCardGridClassName,\n  extensionModuleCardGridContainerClassName,\n  extensionModuleEmptyStateClassName,\n} from \"#/utils/extension-module-card-classes\";\nimport type { SkillInfo } from \"#/types/settings\";\nimport { cn } from \"#/utils/utils\";\nimport {\n  CONVERSATION_OVERVIEW_PROJECT_SCOPE,\n  filterSkillsByProjectScope,\n  sortSkillsByProjectRelevance,\n  type ConversationOverviewProjectScope,\n} from \"#/utils/conversation-overview-project-scope\";\nimport { useConversationOverviewDrawerOptional } from \"./conversation-overview-drawer-context\";\nimport { ConversationOverviewProjectScopeToggle } from \"./conversation-overview-project-scope-toggle\";\n\ninterface ConversationOverviewSkillsPanelProps {\n  openAdd: boolean;\n}\n\nexport function ConversationOverviewSkillsPanel({\n  openAdd,\n}: ConversationOverviewSkillsPanelProps) {\n  const { t } = useTranslation(\"openhands\");\n  const { isLoading: settingsLoading } = useSettings();\n  const { data: conversation } = useActiveConversation();\n  const { data: skills, isLoading: skillsLoading } = useConversationSkills();\n  const { isEnabled, setEnabled } = useSkillEnablement();\n  const addRequestKey =\n    useConversationOverviewDrawerOptional()?.addRequestKey ?? 0;\n  const projectDir = conversation?.selected_workspace ?? null;\n\n  const [projectScope, setProjectScope] =\n    useState<ConversationOverviewProjectScope>(\n      CONVERSATION_OVERVIEW_PROJECT_SCOPE.project,\n    );\n  const [filter, setFilter] = useState<SkillFilterState>(\n    EMPTY_SKILL_FILTER_STATE,\n  );\n  const [isFiltersModalOpen, setIsFiltersModalOpen] = useState(false);\n  const [selectedSkill, setSelectedSkill] = useState<SkillInfo | null>(null);\n  const [showAddSkillModal, setShowAddSkillModal] = useState(false);\n\n  useEffect(() => {\n    if (!openAdd) {\n      return;\n    }\n    setShowAddSkillModal(true);\n  }, [openAdd]);\n\n  useEffect(() => {\n    if (addRequestKey === 0) {\n      return;\n    }\n    setShowAddSkillModal(true);\n  }, [addRequestKey]);\n\n  const scopedSkills = useMemo(() => {\n    if (!skills) {\n      return [];\n    }\n    const filtered = filterSkillsByProjectScope(\n      skills,\n      projectScope,\n      projectDir,\n    );\n    return projectScope === CONVERSATION_OVERVIEW_PROJECT_SCOPE.all\n      ? sortSkillsByProjectRelevance(filtered, projectDir)\n      : filtered;\n  }, [skills, projectScope, projectDir]);\n\n  const filteredSkills = useMemo(\n    () => applySkillFilters(scopedSkills, isEnabled, filter),\n    [scopedSkills, isEnabled, filter],\n  );\n\n  if (skillsLoading || settingsLoading) {\n    return (\n      <div\n        data-testid=\"conversation-overview-skills-panel\"\n        className=\"text-sm text-muted\"\n      >\n        …\n      </div>\n    );\n  }\n\n  if (!skills || skills.length === 0) {\n    return (\n      <div\n        data-testid=\"conversation-overview-skills-panel\"\n        className=\"flex flex-col gap-4\"\n      >\n        <div\n          data-testid=\"conversation-overview-skills-empty\"\n          className={extensionModuleEmptyStateClassName}\n        >\n          <p className=\"text-sm text-tertiary-light\">\n            {t(I18nKey.SETTINGS$SKILLS_NO_SKILLS)}\n          </p>\n        </div>\n        {showAddSkillModal ? (\n          <AddSkillModal onClose={() => setShowAddSkillModal(false)} />\n        ) : null}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      data-testid=\"conversation-overview-skills-panel\"\n      className=\"flex flex-col gap-4\"\n    >\n      <ConversationOverviewProjectScopeToggle\n        value={projectScope}\n        onChange={setProjectScope}\n        testId=\"conversation-overview-skills-scope\"\n      />\n      <SkillsToolbar\n        search={filter.query}\n        onSearchChange={(query) =>\n          setFilter((previous) => ({ ...previous, query }))\n        }\n        activeFilterCount={countActiveFilters(filter)}\n        onOpenFilters={() => setIsFiltersModalOpen(true)}\n      />\n\n      {scopedSkills.length === 0 ? (\n        <div\n          data-testid=\"conversation-overview-skills-project-empty\"\n          className={extensionModuleEmptyStateClassName}\n        >\n          <p className=\"text-sm text-tertiary-light\">\n            {t(I18nKey.CONVERSATION$OVERVIEW_SCOPE_PROJECT_EMPTY_SKILLS)}\n          </p>\n        </div>\n      ) : filteredSkills.length === 0 ? (\n        <div\n          data-testid=\"conversation-overview-skills-no-match\"\n          className={extensionModuleEmptyStateClassName}\n        >\n          <p className=\"text-sm text-tertiary-light\">\n            {t(I18nKey.SETTINGS$SKILLS_NO_MATCH)}\n          </p>\n        </div>\n      ) : (\n        <section\n          className={cn(\n            \"flex min-w-0 flex-col gap-3\",\n            extensionModuleCardGridContainerClassName,\n          )}\n        >\n          <div className={cn(extensionModuleCardGridClassName, \"grid-cols-1\")}>\n            {filteredSkills.map((skill) => (\n              <SkillCard\n                key={skill.name}\n                skill={skill}\n                enabled={isEnabled(skill)}\n                onOpen={() => setSelectedSkill(skill)}\n                onToggle={(enabled) => setEnabled(skill.name, enabled)}\n              />\n            ))}\n          </div>\n        </section>\n      )}\n\n      {selectedSkill ? (\n        <SkillDetailModal\n          skill={selectedSkill}\n          enabled={isEnabled(selectedSkill)}\n          onToggle={(enabled) => setEnabled(selectedSkill.name, enabled)}\n          onClose={() => setSelectedSkill(null)}\n        />\n      ) : null}\n\n      {showAddSkillModal ? (\n        <AddSkillModal onClose={() => setShowAddSkillModal(false)} />\n      ) : null}\n\n      {isFiltersModalOpen ? (\n        <SkillFiltersModal\n          groups={buildSkillFacetGroups(scopedSkills, isEnabled, filter)}\n          activeCount={countActiveFilters(filter)}\n          onToggle={(groupId, value) =>\n            setFilter((previous) =>\n              toggleSkillFilterValue(previous, groupId, value),\n            )\n          }\n          onClearAll={() =>\n            setFilter((previous) => clearSkillFilterFacets(previous))\n          }\n          onClose={() => setIsFiltersModalOpen(false)}\n        />\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/features/conversation/conversation-tabs/conversation-tabs.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/gauge.cjs"),r=require("../../../../node_modules/lucide-react/dist/esm/icons/globe.cjs"),i=require("../../../../node_modules/lucide-react/dist/esm/icons/list-todo.cjs"),a=require("../../../../node_modules/lucide-react/dist/esm/icons/square-chevron-right.cjs"),o=require("../../../../types/agent-state.cjs"),s=require("../../../../utils/utils.cjs"),c=require("../../../../hooks/use-conversation-id.cjs"),l=require("../../../../utils/conversation-local-storage.cjs"),u=require("../../../../stores/conversation-store.cjs"),d=require("../../../../contexts/active-backend-context.cjs"),f=require("../../../../hooks/use-agent-state.cjs"),p=require("../../../../node_modules/framer-motion/dist/es/components/LayoutGroup/index.cjs"),m=require("../../../../ui/typography.cjs"),h=require("../../../../hooks/use-select-conversation-tab.cjs"),g=require("../../../../icons/document.cjs"),_=require("../../../../hooks/use-handle-build-plan-click.cjs"),v=require("../../../../node_modules/react-icons/lu/index.cjs"),y=require("../../conversation-panel/ellipsis-button.cjs"),b=require("../../chat/chat-action-tooltip.cjs"),x=require("../../../../utils/mobile-top-bar-icon-button-classes.cjs"),S=require("../../../../icons/double-check.cjs"),C=require("./conversation-tab-nav.cjs"),ee=require("./drawer-vscode-link.cjs"),te=require("../../../../hooks/use-task-list.cjs"),w=require("./conversation-tabs-context-menu.cjs");let T=require("react"),E=require("react/jsx-runtime");function D({variant:D=`default`,isPanelResizing:O=!1}){let{conversationId:k}=c.useConversationId(),{setSelectedTab:A,planContent:ne}=u.useConversationStore(),[j,M]=(0,T.useState)(!1),{state:N}=l.useConversationLocalStorageState(k),{hasTaskList:P}=te.useTaskList(),{backend:F}=d.useActiveBackend(),{handleBuildPlanClick:re}=_.useHandleBuildPlanClick(),{curAgentState:I}=f.useAgentState(),{selectTab:L,isTabActive:R,onTabChange:z,selectedTab:B,isRightPanelShown:V}=h.useSelectConversationTab();(0,T.useEffect)(()=>{A(N.selectedTab)},[A,N.selectedTab]),(0,T.useEffect)(()=>{V&&(B||z(`files`))},[V,B,z]);let{t:H,i18n:U}=e.useTranslation(`openhands`),W=[{tabValue:`files`,isActive:R(`files`),icon:g.default,onClick:()=>L(`files`),tooltipContent:H(t.I18nKey.COMMON$FILES),tooltipAriaLabel:H(t.I18nKey.COMMON$FILES),label:H(t.I18nKey.COMMON$FILES)},{tabValue:`commits`,isActive:R(`commits`),icon:v.LuFileDiff,onClick:()=>L(`commits`),tooltipContent:H(t.I18nKey.DIFF_VIEWER$COMMITS),tooltipAriaLabel:H(t.I18nKey.DIFF_VIEWER$COMMITS),label:H(t.I18nKey.DIFF_VIEWER$COMMITS)},{tabValue:`planner`,isActive:R(`planner`),icon:i.ListTodo,onClick:()=>L(`planner`),tooltipContent:H(t.I18nKey.COMMON$PLANNER),tooltipAriaLabel:H(t.I18nKey.COMMON$PLANNER),label:H(t.I18nKey.COMMON$PLANNER)},{tabValue:`terminal`,isActive:R(`terminal`),icon:a.SquareChevronRight,onClick:()=>L(`terminal`),tooltipContent:H(t.I18nKey.COMMON$TERMINAL),tooltipAriaLabel:H(t.I18nKey.COMMON$TERMINAL),label:H(t.I18nKey.COMMON$TERMINAL),className:`pl-2`},{tabValue:`browser`,isActive:R(`browser`),icon:r.Globe,onClick:()=>L(`browser`),tooltipContent:H(t.I18nKey.COMMON$BROWSER),tooltipAriaLabel:H(t.I18nKey.COMMON$BROWSER),label:H(t.I18nKey.COMMON$BROWSER)},{tabValue:`usage`,isActive:R(`usage`),icon:n.Gauge,onClick:()=>L(`usage`),tooltipContent:H(t.I18nKey.COMMON$USAGE),tooltipAriaLabel:H(t.I18nKey.COMMON$USAGE),label:H(t.I18nKey.COMMON$USAGE)}];P&&W.splice(2,0,{tabValue:`tasklist`,isActive:R(`tasklist`),icon:S.default,onClick:()=>L(`tasklist`),tooltipContent:H(t.I18nKey.COMMON$TASK_LIST),tooltipAriaLabel:H(t.I18nKey.COMMON$TASK_LIST),label:H(t.I18nKey.COMMON$TASK_LIST)});let G=W.filter(e=>e.tabValue===`planner`&&F.kind!==`cloud`?!1:N.unpinnedTabs.includes(e.tabValue)?B===e.tabValue:!0),K=N.unpinnedTabs.join(`,`),q=I===o.AgentState.RUNNING||I===o.AgentState.LOADING||!ne,J=(0,T.useRef)(null),Y=(0,T.useRef)(null),X=(0,T.useRef)(null),Z=(0,T.useRef)(null),Q=(0,T.useRef)(null),[ie,$]=(0,T.useState)(G.length);(0,T.useLayoutEffect)(()=>{let e=J.current,t=Y.current,n=X.current,r=Z.current;if(!e||!t||!n||!r)return;let i=()=>{let i=t.querySelectorAll(`[data-tab-measure="true"]`),a=i.length,o=e.getBoundingClientRect().width;if(o===0){$(a);return}let s=Array.from(i).map(e=>e.getBoundingClientRect().width);if(s.length!==a||a===0){$(Math.max(0,a));return}let c=n.getBoundingClientRect().width,l=r.getBoundingClientRect().width,u=getComputedStyle(e).columnGap||getComputedStyle(e).gap,d=parseFloat(u)||6,f=0;for(let e=a;e>=0;--e){let t=c+l;for(let n=0;n<e;n+=1)t+=s[n]??0;if(e>0&&(t+=e*d),t<=o+.5){f=e;break}}$(e=>e===f?e:f)};if(i(),typeof ResizeObserver>`u`)return;let a=new ResizeObserver(i);return a.observe(e),()=>a.disconnect()},[K,G.length,P,F.kind,B,V,U.language]);let ae=Math.min(ie,G.length);return(0,E.jsxs)(E.Fragment,{children:[(0,E.jsxs)(`div`,{className:s.cn(`relative w-full min-w-0`,D===`compact`?`flex h-full min-h-0 items-center py-0 pl-0 pr-1`:`min-h-10 p-1`),children:[(0,E.jsx)(`div`,{ref:Y,"aria-hidden":!0,className:`pointer-events-none absolute top-0 left-[-10000px] flex flex-nowrap items-center gap-1.5`,children:G.map(({tabValue:e,icon:t,isActive:n,tooltipContent:r,tooltipAriaLabel:i,label:a,className:o},c)=>(0,E.jsx)(b.ChatActionTooltip,{tooltip:r,ariaLabel:i,children:(0,E.jsx)(C.ConversationTabNav,{tabValue:e,icon:t,onClick:()=>{},isActive:n,label:a,className:s.cn(o,`shrink-0`),measureOnly:!0})},`measure-${e}-${c}`))}),(0,E.jsxs)(`div`,{ref:J,className:`flex w-full min-w-0 flex-nowrap items-center justify-start`,children:[(0,E.jsx)(`div`,{className:`flex min-w-0 flex-1 items-center justify-start overflow-hidden`,children:(0,E.jsxs)(`div`,{className:`flex w-fit max-w-full min-w-0 items-center gap-1.5`,children:[(0,E.jsx)(p.LayoutGroup,{id:`conversation-drawer-tabs`,children:(0,E.jsx)(`div`,{className:`flex w-fit max-w-full min-w-0 flex-nowrap items-center gap-1.5 overflow-x-hidden`,children:G.slice(0,ae).map(({tabValue:e,icon:t,onClick:n,isActive:r,tooltipContent:i,tooltipAriaLabel:a,label:o,className:c},l)=>(0,E.jsx)(b.ChatActionTooltip,{tooltip:i,ariaLabel:a,children:(0,E.jsx)(C.ConversationTabNav,{tabValue:e,icon:t,onClick:n,isActive:r,label:o,className:s.cn(c,`shrink-0`),suppressLayoutAnimation:O})},`${e}-${l}`))})}),(0,E.jsxs)(`div`,{ref:X,className:`relative shrink-0`,children:[(0,E.jsx)(y.EllipsisButton,{ref:Q,onClick:()=>M(!j),ariaLabel:H(t.I18nKey.COMMON$MORE_OPTIONS),iconClassName:D===`compact`?x.mobileTopBarIconClassName:void 0}),(0,E.jsx)(w.ConversationTabsContextMenu,{isOpen:j,onClose:()=>M(!1),ignoreOutsideClickRef:Q,anchorRef:Q})]})]})}),(0,E.jsx)(`div`,{ref:Z,className:s.cn(`ml-auto shrink-0`,F.kind===`cloud`&&`pr-1`),children:F.kind===`cloud`&&(0,E.jsx)(ee.DrawerVSCodeLink,{})})]})]}),R(`planner`)&&(0,E.jsx)(`div`,{className:s.cn(`flex h-10 min-h-10 shrink-0 items-center border-t border-[var(--oh-border)] pl-[10px] pr-1`),children:(0,E.jsx)(`button`,{type:`button`,onClick:re,disabled:q,className:s.cn(`flex h-5 min-w-17 items-center justify-center rounded bg-white px-2 transition-opacity`,q?`cursor-not-allowed opacity-50`:`cursor-pointer hover:opacity-90`),"data-testid":`planner-tab-build-button`,children:(0,E.jsxs)(m.Typography.Text,{className:`text-[11px] font-normal leading-5 text-black`,children:[H(t.I18nKey.COMMON$BUILD),` ⌘↩`]})})})]})}exports.ConversationTabs=D;
+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/gauge.cjs"),r=require("../../../../node_modules/lucide-react/dist/esm/icons/globe.cjs"),i=require("../../../../node_modules/lucide-react/dist/esm/icons/list-todo.cjs"),a=require("../../../../node_modules/lucide-react/dist/esm/icons/square-chevron-right.cjs"),o=require("../../../../types/agent-state.cjs"),s=require("../../../../utils/utils.cjs"),c=require("../../../../hooks/use-conversation-id.cjs"),l=require("../../../../utils/conversation-local-storage.cjs"),u=require("../../../../stores/conversation-store.cjs"),d=require("../../../../contexts/active-backend-context.cjs"),f=require("../../../../hooks/use-agent-state.cjs"),p=require("../../../../node_modules/framer-motion/dist/es/components/LayoutGroup/index.cjs"),m=require("../../../../ui/typography.cjs"),h=require("../../../../hooks/use-select-conversation-tab.cjs"),g=require("../../../../icons/document.cjs"),_=require("../../../../hooks/use-handle-build-plan-click.cjs"),v=require("../../../../node_modules/react-icons/lu/index.cjs"),y=require("../../conversation-panel/ellipsis-button.cjs"),b=require("../../chat/chat-action-tooltip.cjs"),x=require("../../../../utils/mobile-top-bar-icon-button-classes.cjs"),ee=require("../../../../icons/double-check.cjs"),S=require("./conversation-tab-nav.cjs"),te=require("./drawer-vscode-link.cjs"),C=require("../../../../hooks/use-task-list.cjs"),ne=require("./conversation-tabs-context-menu.cjs");let w=require("react"),T=require("react/jsx-runtime");function E({variant:E=`default`,isPanelResizing:D=!1}){let{conversationId:O}=c.useConversationId(),{setSelectedTab:k,planContent:A}=u.useConversationStore(),[j,M]=(0,w.useState)(!1),{state:N}=l.useConversationLocalStorageState(O),{hasTaskList:P}=C.useTaskList(),{backend:F}=d.useActiveBackend(),{handleBuildPlanClick:re}=_.useHandleBuildPlanClick(),{curAgentState:I}=f.useAgentState(),{selectTab:L,isTabActive:R,onTabChange:z,selectedTab:B,isRightPanelShown:V}=h.useSelectConversationTab();(0,w.useEffect)(()=>{k(N.selectedTab)},[k,N.selectedTab]),(0,w.useEffect)(()=>{V&&(B||z(`files`))},[V,B,z]);let{t:H,i18n:U}=e.useTranslation(`openhands`),W=[{tabValue:`files`,isActive:R(`files`),icon:g.default,onClick:()=>L(`files`),tooltipContent:H(t.I18nKey.COMMON$FILES),tooltipAriaLabel:H(t.I18nKey.COMMON$FILES),label:H(t.I18nKey.COMMON$FILES)},{tabValue:`commits`,isActive:R(`commits`),icon:v.LuFileDiff,onClick:()=>L(`commits`),tooltipContent:H(t.I18nKey.DIFF_VIEWER$COMMITS),tooltipAriaLabel:H(t.I18nKey.DIFF_VIEWER$COMMITS),label:H(t.I18nKey.DIFF_VIEWER$COMMITS)},{tabValue:`planner`,isActive:R(`planner`),icon:i.ListTodo,onClick:()=>L(`planner`),tooltipContent:H(t.I18nKey.COMMON$PLANNER),tooltipAriaLabel:H(t.I18nKey.COMMON$PLANNER),label:H(t.I18nKey.COMMON$PLANNER)},{tabValue:`terminal`,isActive:R(`terminal`),icon:a.SquareChevronRight,onClick:()=>L(`terminal`),tooltipContent:H(t.I18nKey.COMMON$TERMINAL),tooltipAriaLabel:H(t.I18nKey.COMMON$TERMINAL),label:H(t.I18nKey.COMMON$TERMINAL),className:`pl-2`},{tabValue:`browser`,isActive:R(`browser`),icon:r.Globe,onClick:()=>L(`browser`),tooltipContent:H(t.I18nKey.COMMON$BROWSER),tooltipAriaLabel:H(t.I18nKey.COMMON$BROWSER),label:H(t.I18nKey.COMMON$BROWSER)},{tabValue:`usage`,isActive:R(`usage`),icon:n.Gauge,onClick:()=>L(`usage`),tooltipContent:H(t.I18nKey.COMMON$USAGE),tooltipAriaLabel:H(t.I18nKey.COMMON$USAGE),label:H(t.I18nKey.COMMON$USAGE)}];P&&W.splice(2,0,{tabValue:`tasklist`,isActive:R(`tasklist`),icon:ee.default,onClick:()=>L(`tasklist`),tooltipContent:H(t.I18nKey.COMMON$TASK_LIST),tooltipAriaLabel:H(t.I18nKey.COMMON$TASK_LIST),label:H(t.I18nKey.COMMON$TASK_LIST)});let G=W.filter(e=>e.tabValue===`planner`&&F.kind!==`cloud`?!1:N.unpinnedTabs.includes(e.tabValue)?B===e.tabValue:!0),K=N.unpinnedTabs.join(`,`),q=I===o.AgentState.RUNNING||I===o.AgentState.LOADING||!A,J=(0,w.useRef)(null),Y=(0,w.useRef)(null),X=(0,w.useRef)(null),Z=(0,w.useRef)(null),Q=(0,w.useRef)(null),[ie,$]=(0,w.useState)(G.length);(0,w.useLayoutEffect)(()=>{let e=J.current,t=Y.current,n=X.current,r=Z.current;if(!e||!t||!n||!r)return;let i=()=>{let i=t.querySelectorAll(`[data-tab-measure="true"]`),a=i.length,o=e.getBoundingClientRect().width;if(o===0){$(a);return}let s=Array.from(i).map(e=>e.getBoundingClientRect().width);if(s.length!==a||a===0){$(Math.max(0,a));return}let c=n.getBoundingClientRect().width,l=r.getBoundingClientRect().width,u=getComputedStyle(e).columnGap||getComputedStyle(e).gap,d=parseFloat(u)||6,f=0;for(let e=a;e>=0;--e){let t=c+l;for(let n=0;n<e;n+=1)t+=s[n]??0;if(e>0&&(t+=e*d),t<=o+.5){f=e;break}}$(e=>e===f?e:f)};if(i(),typeof ResizeObserver>`u`)return;let a=new ResizeObserver(i);return a.observe(e),a.observe(r),()=>a.disconnect()},[K,G.length,P,F.kind,B,V,U.language]);let ae=Math.min(ie,G.length);return(0,T.jsxs)(T.Fragment,{children:[(0,T.jsxs)(`div`,{className:s.cn(`relative w-full min-w-0`,E===`compact`?`flex h-full min-h-0 items-center py-0 pl-0 pr-1`:`min-h-10 p-1`),children:[(0,T.jsx)(`div`,{ref:Y,"aria-hidden":!0,className:`pointer-events-none absolute top-0 left-[-10000px] flex flex-nowrap items-center gap-1.5`,children:G.map(({tabValue:e,icon:t,isActive:n,tooltipContent:r,tooltipAriaLabel:i,label:a,className:o},c)=>(0,T.jsx)(b.ChatActionTooltip,{tooltip:r,ariaLabel:i,children:(0,T.jsx)(S.ConversationTabNav,{tabValue:e,icon:t,onClick:()=>{},isActive:n,label:a,className:s.cn(o,`shrink-0`),measureOnly:!0})},`measure-${e}-${c}`))}),(0,T.jsxs)(`div`,{ref:J,className:`flex w-full min-w-0 flex-nowrap items-center justify-start`,children:[(0,T.jsx)(`div`,{className:`flex min-w-0 flex-1 items-center justify-start overflow-hidden`,children:(0,T.jsxs)(`div`,{className:`flex w-fit max-w-full min-w-0 items-center gap-1.5`,children:[(0,T.jsx)(p.LayoutGroup,{id:`conversation-drawer-tabs`,children:(0,T.jsx)(`div`,{className:`flex w-fit max-w-full min-w-0 flex-nowrap items-center gap-1.5 overflow-x-hidden`,children:G.slice(0,ae).map(({tabValue:e,icon:t,onClick:n,isActive:r,tooltipContent:i,tooltipAriaLabel:a,label:o,className:c},l)=>(0,T.jsx)(b.ChatActionTooltip,{tooltip:i,ariaLabel:a,children:(0,T.jsx)(S.ConversationTabNav,{tabValue:e,icon:t,onClick:n,isActive:r,label:o,className:s.cn(c,`shrink-0`),suppressLayoutAnimation:D})},`${e}-${l}`))})}),(0,T.jsxs)(`div`,{ref:X,className:`relative shrink-0`,children:[(0,T.jsx)(y.EllipsisButton,{ref:Q,onClick:()=>M(!j),ariaLabel:H(t.I18nKey.COMMON$MORE_OPTIONS),iconClassName:E===`compact`?x.mobileTopBarIconClassName:void 0}),(0,T.jsx)(ne.ConversationTabsContextMenu,{isOpen:j,onClose:()=>M(!1),ignoreOutsideClickRef:Q,anchorRef:Q})]})]})}),(0,T.jsx)(`div`,{ref:Z,className:`ml-auto shrink-0 pr-1`,children:(0,T.jsx)(te.DrawerVSCodeLink,{})})]})]}),R(`planner`)&&(0,T.jsx)(`div`,{className:s.cn(`flex h-10 min-h-10 shrink-0 items-center border-t border-[var(--oh-border)] pl-[10px] pr-1`),children:(0,T.jsx)(`button`,{type:`button`,onClick:re,disabled:q,className:s.cn(`flex h-5 min-w-17 items-center justify-center rounded bg-white px-2 transition-opacity`,q?`cursor-not-allowed opacity-50`:`cursor-pointer hover:opacity-90`),"data-testid":`planner-tab-build-button`,children:(0,T.jsxs)(m.Typography.Text,{className:`text-[11px] font-normal leading-5 text-black`,children:[H(t.I18nKey.COMMON$BUILD),` ⌘↩`]})})})]})}exports.ConversationTabs=E;
 //# sourceMappingURL=conversation-tabs.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"conversation-tabs.cjs","names":[],"sources":["../../../../../src/components/features/conversation/conversation-tabs/conversation-tabs.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { LayoutGroup } from \"framer-motion\";\nimport { Gauge, Globe, ListTodo, SquareChevronRight } from \"lucide-react\";\nimport { LuFileDiff } from \"react-icons/lu\";\nimport DocumentIcon from \"#/icons/document.svg?react\";\nimport DoubleCheckIcon from \"#/icons/double-check.svg?react\";\nimport { EllipsisButton } from \"#/components/features/conversation-panel/ellipsis-button\";\nimport { cn } from \"#/utils/utils\";\nimport { useConversationLocalStorageState } from \"#/utils/conversation-local-storage\";\nimport { ConversationTabNav } from \"./conversation-tab-nav\";\nimport { DrawerVSCodeLink } from \"./drawer-vscode-link\";\nimport { ChatActionTooltip } from \"../../chat/chat-action-tooltip\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { ConversationTabsContextMenu } from \"./conversation-tabs-context-menu\";\nimport { useConversationId } from \"#/hooks/use-conversation-id\";\nimport { useSelectConversationTab } from \"#/hooks/use-select-conversation-tab\";\nimport { useTaskList } from \"#/hooks/use-task-list\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport { useHandleBuildPlanClick } from \"#/hooks/use-handle-build-plan-click\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { AgentState } from \"#/types/agent-state\";\nimport { Typography } from \"#/ui/typography\";\nimport { mobileTopBarIconClassName } from \"#/utils/mobile-top-bar-icon-button-classes\";\n\nexport function ConversationTabs({\n  variant = \"default\",\n  isPanelResizing = false,\n}: {\n  variant?: \"default\" | \"compact\";\n  /** True while the desktop drawer gripper is being dragged. */\n  isPanelResizing?: boolean;\n}) {\n  const { conversationId } = useConversationId();\n  const { setSelectedTab, planContent } = useConversationStore();\n\n  const [isMenuOpen, setIsMenuOpen] = useState(false);\n\n  const { state: persistedState } =\n    useConversationLocalStorageState(conversationId);\n\n  const { hasTaskList } = useTaskList();\n  const { backend } = useActiveBackend();\n\n  const { handleBuildPlanClick } = useHandleBuildPlanClick();\n  const { curAgentState } = useAgentState();\n\n  const {\n    selectTab,\n    isTabActive,\n    onTabChange,\n    selectedTab,\n    isRightPanelShown,\n  } = useSelectConversationTab();\n\n  // Restore the most-recently-used tab from localStorage so users don't\n  // lose their tab selection across reloads.\n  //\n  // Note: we deliberately do NOT mirror `rightPanelShown` from\n  // localStorage. The drawer's open/closed state is session-only — see\n  // the comment in `useConversationStore` and the schema note in\n  // `conversation-local-storage.ts` for the rationale.\n  useEffect(() => {\n    setSelectedTab(persistedState.selectedTab);\n  }, [setSelectedTab, persistedState.selectedTab]);\n\n  useEffect(() => {\n    const handlePanelVisibilityChange = () => {\n      if (isRightPanelShown) {\n        // If no tab is selected, default to files tab\n        if (!selectedTab) {\n          onTabChange(\"files\");\n        }\n      }\n    };\n\n    handlePanelVisibilityChange();\n  }, [isRightPanelShown, selectedTab, onTabChange]);\n\n  const { t, i18n } = useTranslation(\"openhands\");\n\n  // `files` is intentionally the leftmost tab — it's the primary entry\n  // point for inspecting agent output (workspace files + git diff).\n  const tabs = [\n    {\n      tabValue: \"files\",\n      isActive: isTabActive(\"files\"),\n      icon: DocumentIcon,\n      onClick: () => selectTab(\"files\"),\n      tooltipContent: t(I18nKey.COMMON$FILES),\n      tooltipAriaLabel: t(I18nKey.COMMON$FILES),\n      label: t(I18nKey.COMMON$FILES),\n    },\n    {\n      tabValue: \"commits\",\n      isActive: isTabActive(\"commits\"),\n      icon: LuFileDiff,\n      onClick: () => selectTab(\"commits\"),\n      tooltipContent: t(I18nKey.DIFF_VIEWER$COMMITS),\n      tooltipAriaLabel: t(I18nKey.DIFF_VIEWER$COMMITS),\n      label: t(I18nKey.DIFF_VIEWER$COMMITS),\n    },\n    {\n      tabValue: \"planner\",\n      isActive: isTabActive(\"planner\"),\n      icon: ListTodo,\n      onClick: () => selectTab(\"planner\"),\n      tooltipContent: t(I18nKey.COMMON$PLANNER),\n      tooltipAriaLabel: t(I18nKey.COMMON$PLANNER),\n      label: t(I18nKey.COMMON$PLANNER),\n    },\n    {\n      tabValue: \"terminal\",\n      isActive: isTabActive(\"terminal\"),\n      icon: SquareChevronRight,\n      onClick: () => selectTab(\"terminal\"),\n      tooltipContent: t(I18nKey.COMMON$TERMINAL),\n      tooltipAriaLabel: t(I18nKey.COMMON$TERMINAL),\n      label: t(I18nKey.COMMON$TERMINAL),\n      className: \"pl-2\",\n    },\n    {\n      tabValue: \"browser\",\n      isActive: isTabActive(\"browser\"),\n      icon: Globe,\n      onClick: () => selectTab(\"browser\"),\n      tooltipContent: t(I18nKey.COMMON$BROWSER),\n      tooltipAriaLabel: t(I18nKey.COMMON$BROWSER),\n      label: t(I18nKey.COMMON$BROWSER),\n    },\n    {\n      tabValue: \"usage\",\n      isActive: isTabActive(\"usage\"),\n      icon: Gauge,\n      onClick: () => selectTab(\"usage\"),\n      tooltipContent: t(I18nKey.COMMON$USAGE),\n      tooltipAriaLabel: t(I18nKey.COMMON$USAGE),\n      label: t(I18nKey.COMMON$USAGE),\n    },\n  ];\n\n  if (hasTaskList) {\n    // Insert after the file-related tabs.\n    tabs.splice(2, 0, {\n      tabValue: \"tasklist\",\n      isActive: isTabActive(\"tasklist\"),\n      icon: DoubleCheckIcon,\n      onClick: () => selectTab(\"tasklist\"),\n      tooltipContent: t(I18nKey.COMMON$TASK_LIST),\n      tooltipAriaLabel: t(I18nKey.COMMON$TASK_LIST),\n      label: t(I18nKey.COMMON$TASK_LIST),\n    });\n  }\n\n  // Pinned tabs always show in the bar. Unpinned tabs stay hidden unless the\n  // user has that tab selected — then it appears while active so the bar\n  // matches the open panel. Hide Planner on local backends — the planning\n  // agent isn't supported locally.\n  const visibleTabs = tabs.filter((tab) => {\n    if (tab.tabValue === \"planner\" && backend.kind !== \"cloud\") return false;\n    if (!persistedState.unpinnedTabs.includes(tab.tabValue)) return true;\n    return selectedTab === tab.tabValue;\n  });\n\n  const unpinnedSignature = persistedState.unpinnedTabs.join(\",\");\n\n  const isAgentRunning =\n    curAgentState === AgentState.RUNNING ||\n    curAgentState === AgentState.LOADING;\n  const isBuildDisabled = isAgentRunning || !planContent;\n\n  const tabsRowInnerRef = useRef<HTMLDivElement>(null);\n  const measureRowRef = useRef<HTMLDivElement>(null);\n  const menuRef = useRef<HTMLDivElement>(null);\n  const vscodeButtonRef = useRef<HTMLDivElement>(null);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n  const [inlineTabCount, setInlineTabCount] = useState(visibleTabs.length);\n\n  useLayoutEffect(() => {\n    const rowInner = tabsRowInnerRef.current;\n    const measureRow = measureRowRef.current;\n    const menuEl = menuRef.current;\n    const vscodeEl = vscodeButtonRef.current;\n    if (!rowInner || !measureRow || !menuEl || !vscodeEl) return undefined;\n\n    const measure = () => {\n      const measureButtons = measureRow.querySelectorAll<HTMLButtonElement>(\n        '[data-tab-measure=\"true\"]',\n      );\n      const tabCount = measureButtons.length;\n\n      const rowWidth = rowInner.getBoundingClientRect().width;\n      if (rowWidth === 0) {\n        setInlineTabCount(tabCount);\n        return;\n      }\n\n      const widths = Array.from(measureButtons).map(\n        (button) => button.getBoundingClientRect().width,\n      );\n\n      if (widths.length !== tabCount || tabCount === 0) {\n        setInlineTabCount(Math.max(0, tabCount));\n        return;\n      }\n\n      const menuWidth = menuEl.getBoundingClientRect().width;\n      const vscodeWidth = vscodeEl.getBoundingClientRect().width;\n      const gapCss =\n        getComputedStyle(rowInner).columnGap || getComputedStyle(rowInner).gap;\n      const gapPx = parseFloat(gapCss) || 6;\n\n      let nextCount = 0;\n      for (let k = tabCount; k >= 0; k -= 1) {\n        let total = menuWidth + vscodeWidth;\n        for (let i = 0; i < k; i += 1) {\n          total += widths[i] ?? 0;\n        }\n        if (k > 0) {\n          total += k * gapPx;\n        }\n        if (total <= rowWidth + 0.5) {\n          nextCount = k;\n          break;\n        }\n      }\n\n      setInlineTabCount((prev) => (prev === nextCount ? prev : nextCount));\n    };\n\n    measure();\n    if (typeof ResizeObserver === \"undefined\") return undefined;\n    const ro = new ResizeObserver(measure);\n    ro.observe(rowInner);\n    return () => ro.disconnect();\n  }, [\n    unpinnedSignature,\n    visibleTabs.length,\n    hasTaskList,\n    backend.kind,\n    selectedTab,\n    isRightPanelShown,\n    i18n.language,\n  ]);\n\n  const safeInlineTabCount = Math.min(inlineTabCount, visibleTabs.length);\n\n  return (\n    <>\n      <div\n        className={cn(\n          \"relative w-full min-w-0\",\n          variant === \"compact\"\n            ? \"flex h-full min-h-0 items-center py-0 pl-0 pr-1\"\n            : \"min-h-10 p-1\",\n        )}\n      >\n        <div\n          ref={measureRowRef}\n          aria-hidden\n          className=\"pointer-events-none absolute top-0 left-[-10000px] flex flex-nowrap items-center gap-1.5\"\n        >\n          {visibleTabs.map(\n            (\n              {\n                tabValue,\n                icon,\n                isActive,\n                tooltipContent,\n                tooltipAriaLabel,\n                label,\n                className: tabClassName,\n              },\n              index,\n            ) => (\n              <ChatActionTooltip\n                key={`measure-${tabValue}-${index}`}\n                tooltip={tooltipContent}\n                ariaLabel={tooltipAriaLabel}\n              >\n                <ConversationTabNav\n                  tabValue={tabValue}\n                  icon={icon}\n                  onClick={() => {}}\n                  isActive={isActive}\n                  label={label}\n                  className={cn(tabClassName, \"shrink-0\")}\n                  measureOnly\n                />\n              </ChatActionTooltip>\n            ),\n          )}\n        </div>\n        <div\n          ref={tabsRowInnerRef}\n          className=\"flex w-full min-w-0 flex-nowrap items-center justify-start\"\n        >\n          <div className=\"flex min-w-0 flex-1 items-center justify-start overflow-hidden\">\n            <div className=\"flex w-fit max-w-full min-w-0 items-center gap-1.5\">\n              <LayoutGroup id=\"conversation-drawer-tabs\">\n                <div className=\"flex w-fit max-w-full min-w-0 flex-nowrap items-center gap-1.5 overflow-x-hidden\">\n                  {visibleTabs\n                    .slice(0, safeInlineTabCount)\n                    .map(\n                      (\n                        {\n                          tabValue,\n                          icon,\n                          onClick,\n                          isActive,\n                          tooltipContent,\n                          tooltipAriaLabel,\n                          label,\n                          className: tabClassName,\n                        },\n                        index,\n                      ) => (\n                        <ChatActionTooltip\n                          key={`${tabValue}-${index}`}\n                          tooltip={tooltipContent}\n                          ariaLabel={tooltipAriaLabel}\n                        >\n                          <ConversationTabNav\n                            tabValue={tabValue}\n                            icon={icon}\n                            onClick={onClick}\n                            isActive={isActive}\n                            label={label}\n                            className={cn(tabClassName, \"shrink-0\")}\n                            suppressLayoutAnimation={isPanelResizing}\n                          />\n                        </ChatActionTooltip>\n                      ),\n                    )}\n                </div>\n              </LayoutGroup>\n              <div ref={menuRef} className=\"relative shrink-0\">\n                <EllipsisButton\n                  ref={anchorRef}\n                  onClick={() => setIsMenuOpen(!isMenuOpen)}\n                  ariaLabel={t(I18nKey.COMMON$MORE_OPTIONS)}\n                  iconClassName={\n                    variant === \"compact\"\n                      ? mobileTopBarIconClassName\n                      : undefined\n                  }\n                />\n                <ConversationTabsContextMenu\n                  isOpen={isMenuOpen}\n                  onClose={() => setIsMenuOpen(false)}\n                  ignoreOutsideClickRef={anchorRef}\n                  anchorRef={anchorRef}\n                />\n              </div>\n            </div>\n          </div>\n          {/* Keep the ref'd wrapper mounted on local backends too — the\n              overflow measurement effect above bails if it's missing. */}\n          <div\n            ref={vscodeButtonRef}\n            className={cn(\n              \"ml-auto shrink-0\",\n              backend.kind === \"cloud\" && \"pr-1\",\n            )}\n          >\n            {backend.kind === \"cloud\" && <DrawerVSCodeLink />}\n          </div>\n        </div>\n      </div>\n      {isTabActive(\"planner\") && (\n        <div\n          className={cn(\n            \"flex h-10 min-h-10 shrink-0 items-center border-t border-[var(--oh-border)] pl-[10px] pr-1\",\n          )}\n        >\n          <button\n            type=\"button\"\n            onClick={handleBuildPlanClick}\n            disabled={isBuildDisabled}\n            className={cn(\n              \"flex h-5 min-w-17 items-center justify-center rounded bg-white px-2 transition-opacity\",\n              isBuildDisabled\n                ? \"cursor-not-allowed opacity-50\"\n                : \"cursor-pointer hover:opacity-90\",\n            )}\n            data-testid=\"planner-tab-build-button\"\n          >\n            <Typography.Text className=\"text-[11px] font-normal leading-5 text-black\">\n              {/* eslint-disable-next-line i18next/no-literal-string */}\n              {t(I18nKey.COMMON$BUILD)} ⌘↩\n            </Typography.Text>\n          </button>\n        </div>\n      )}\n    </>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"conversation-tabs.cjs","names":[],"sources":["../../../../../src/components/features/conversation/conversation-tabs/conversation-tabs.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { LayoutGroup } from \"framer-motion\";\nimport { Gauge, Globe, ListTodo, SquareChevronRight } from \"lucide-react\";\nimport { LuFileDiff } from \"react-icons/lu\";\nimport DocumentIcon from \"#/icons/document.svg?react\";\nimport DoubleCheckIcon from \"#/icons/double-check.svg?react\";\nimport { EllipsisButton } from \"#/components/features/conversation-panel/ellipsis-button\";\nimport { cn } from \"#/utils/utils\";\nimport { useConversationLocalStorageState } from \"#/utils/conversation-local-storage\";\nimport { ConversationTabNav } from \"./conversation-tab-nav\";\nimport { DrawerVSCodeLink } from \"./drawer-vscode-link\";\nimport { ChatActionTooltip } from \"../../chat/chat-action-tooltip\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { ConversationTabsContextMenu } from \"./conversation-tabs-context-menu\";\nimport { useConversationId } from \"#/hooks/use-conversation-id\";\nimport { useSelectConversationTab } from \"#/hooks/use-select-conversation-tab\";\nimport { useTaskList } from \"#/hooks/use-task-list\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport { useHandleBuildPlanClick } from \"#/hooks/use-handle-build-plan-click\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { AgentState } from \"#/types/agent-state\";\nimport { Typography } from \"#/ui/typography\";\nimport { mobileTopBarIconClassName } from \"#/utils/mobile-top-bar-icon-button-classes\";\n\nexport function ConversationTabs({\n  variant = \"default\",\n  isPanelResizing = false,\n}: {\n  variant?: \"default\" | \"compact\";\n  /** True while the desktop drawer gripper is being dragged. */\n  isPanelResizing?: boolean;\n}) {\n  const { conversationId } = useConversationId();\n  const { setSelectedTab, planContent } = useConversationStore();\n\n  const [isMenuOpen, setIsMenuOpen] = useState(false);\n\n  const { state: persistedState } =\n    useConversationLocalStorageState(conversationId);\n\n  const { hasTaskList } = useTaskList();\n  const { backend } = useActiveBackend();\n\n  const { handleBuildPlanClick } = useHandleBuildPlanClick();\n  const { curAgentState } = useAgentState();\n\n  const {\n    selectTab,\n    isTabActive,\n    onTabChange,\n    selectedTab,\n    isRightPanelShown,\n  } = useSelectConversationTab();\n\n  // Restore the most-recently-used tab from localStorage so users don't\n  // lose their tab selection across reloads.\n  //\n  // Note: we deliberately do NOT mirror `rightPanelShown` from\n  // localStorage. The drawer's open/closed state is session-only — see\n  // the comment in `useConversationStore` and the schema note in\n  // `conversation-local-storage.ts` for the rationale.\n  useEffect(() => {\n    setSelectedTab(persistedState.selectedTab);\n  }, [setSelectedTab, persistedState.selectedTab]);\n\n  useEffect(() => {\n    const handlePanelVisibilityChange = () => {\n      if (isRightPanelShown) {\n        // If no tab is selected, default to files tab\n        if (!selectedTab) {\n          onTabChange(\"files\");\n        }\n      }\n    };\n\n    handlePanelVisibilityChange();\n  }, [isRightPanelShown, selectedTab, onTabChange]);\n\n  const { t, i18n } = useTranslation(\"openhands\");\n\n  // `files` is intentionally the leftmost tab — it's the primary entry\n  // point for inspecting agent output (workspace files + git diff).\n  const tabs = [\n    {\n      tabValue: \"files\",\n      isActive: isTabActive(\"files\"),\n      icon: DocumentIcon,\n      onClick: () => selectTab(\"files\"),\n      tooltipContent: t(I18nKey.COMMON$FILES),\n      tooltipAriaLabel: t(I18nKey.COMMON$FILES),\n      label: t(I18nKey.COMMON$FILES),\n    },\n    {\n      tabValue: \"commits\",\n      isActive: isTabActive(\"commits\"),\n      icon: LuFileDiff,\n      onClick: () => selectTab(\"commits\"),\n      tooltipContent: t(I18nKey.DIFF_VIEWER$COMMITS),\n      tooltipAriaLabel: t(I18nKey.DIFF_VIEWER$COMMITS),\n      label: t(I18nKey.DIFF_VIEWER$COMMITS),\n    },\n    {\n      tabValue: \"planner\",\n      isActive: isTabActive(\"planner\"),\n      icon: ListTodo,\n      onClick: () => selectTab(\"planner\"),\n      tooltipContent: t(I18nKey.COMMON$PLANNER),\n      tooltipAriaLabel: t(I18nKey.COMMON$PLANNER),\n      label: t(I18nKey.COMMON$PLANNER),\n    },\n    {\n      tabValue: \"terminal\",\n      isActive: isTabActive(\"terminal\"),\n      icon: SquareChevronRight,\n      onClick: () => selectTab(\"terminal\"),\n      tooltipContent: t(I18nKey.COMMON$TERMINAL),\n      tooltipAriaLabel: t(I18nKey.COMMON$TERMINAL),\n      label: t(I18nKey.COMMON$TERMINAL),\n      className: \"pl-2\",\n    },\n    {\n      tabValue: \"browser\",\n      isActive: isTabActive(\"browser\"),\n      icon: Globe,\n      onClick: () => selectTab(\"browser\"),\n      tooltipContent: t(I18nKey.COMMON$BROWSER),\n      tooltipAriaLabel: t(I18nKey.COMMON$BROWSER),\n      label: t(I18nKey.COMMON$BROWSER),\n    },\n    {\n      tabValue: \"usage\",\n      isActive: isTabActive(\"usage\"),\n      icon: Gauge,\n      onClick: () => selectTab(\"usage\"),\n      tooltipContent: t(I18nKey.COMMON$USAGE),\n      tooltipAriaLabel: t(I18nKey.COMMON$USAGE),\n      label: t(I18nKey.COMMON$USAGE),\n    },\n  ];\n\n  if (hasTaskList) {\n    // Insert after the file-related tabs.\n    tabs.splice(2, 0, {\n      tabValue: \"tasklist\",\n      isActive: isTabActive(\"tasklist\"),\n      icon: DoubleCheckIcon,\n      onClick: () => selectTab(\"tasklist\"),\n      tooltipContent: t(I18nKey.COMMON$TASK_LIST),\n      tooltipAriaLabel: t(I18nKey.COMMON$TASK_LIST),\n      label: t(I18nKey.COMMON$TASK_LIST),\n    });\n  }\n\n  // Pinned tabs always show in the bar. Unpinned tabs stay hidden unless the\n  // user has that tab selected — then it appears while active so the bar\n  // matches the open panel. Hide Planner on local backends — the planning\n  // agent isn't supported locally.\n  const visibleTabs = tabs.filter((tab) => {\n    if (tab.tabValue === \"planner\" && backend.kind !== \"cloud\") return false;\n    if (!persistedState.unpinnedTabs.includes(tab.tabValue)) return true;\n    return selectedTab === tab.tabValue;\n  });\n\n  const unpinnedSignature = persistedState.unpinnedTabs.join(\",\");\n\n  const isAgentRunning =\n    curAgentState === AgentState.RUNNING ||\n    curAgentState === AgentState.LOADING;\n  const isBuildDisabled = isAgentRunning || !planContent;\n\n  const tabsRowInnerRef = useRef<HTMLDivElement>(null);\n  const measureRowRef = useRef<HTMLDivElement>(null);\n  const menuRef = useRef<HTMLDivElement>(null);\n  const vscodeButtonRef = useRef<HTMLDivElement>(null);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n  const [inlineTabCount, setInlineTabCount] = useState(visibleTabs.length);\n\n  useLayoutEffect(() => {\n    const rowInner = tabsRowInnerRef.current;\n    const measureRow = measureRowRef.current;\n    const menuEl = menuRef.current;\n    const vscodeEl = vscodeButtonRef.current;\n    if (!rowInner || !measureRow || !menuEl || !vscodeEl) return undefined;\n\n    const measure = () => {\n      const measureButtons = measureRow.querySelectorAll<HTMLButtonElement>(\n        '[data-tab-measure=\"true\"]',\n      );\n      const tabCount = measureButtons.length;\n\n      const rowWidth = rowInner.getBoundingClientRect().width;\n      if (rowWidth === 0) {\n        setInlineTabCount(tabCount);\n        return;\n      }\n\n      const widths = Array.from(measureButtons).map(\n        (button) => button.getBoundingClientRect().width,\n      );\n\n      if (widths.length !== tabCount || tabCount === 0) {\n        setInlineTabCount(Math.max(0, tabCount));\n        return;\n      }\n\n      const menuWidth = menuEl.getBoundingClientRect().width;\n      const vscodeWidth = vscodeEl.getBoundingClientRect().width;\n      const gapCss =\n        getComputedStyle(rowInner).columnGap || getComputedStyle(rowInner).gap;\n      const gapPx = parseFloat(gapCss) || 6;\n\n      let nextCount = 0;\n      for (let k = tabCount; k >= 0; k -= 1) {\n        let total = menuWidth + vscodeWidth;\n        for (let i = 0; i < k; i += 1) {\n          total += widths[i] ?? 0;\n        }\n        if (k > 0) {\n          total += k * gapPx;\n        }\n        if (total <= rowWidth + 0.5) {\n          nextCount = k;\n          break;\n        }\n      }\n\n      setInlineTabCount((prev) => (prev === nextCount ? prev : nextCount));\n    };\n\n    measure();\n    if (typeof ResizeObserver === \"undefined\") return undefined;\n    const ro = new ResizeObserver(measure);\n    ro.observe(rowInner);\n    // The editor button's presence is resolved asynchronously (the hook probes\n    // /api/vscode/status), and it sits inside an `ml-auto shrink-0` wrapper, so\n    // it appearing or disappearing does not change `rowInner`'s own box and\n    // would not otherwise re-measure. Its width is folded into the fit\n    // calculation above, so a stale value permanently costs an inline tab.\n    ro.observe(vscodeEl);\n    return () => ro.disconnect();\n  }, [\n    unpinnedSignature,\n    visibleTabs.length,\n    hasTaskList,\n    backend.kind,\n    selectedTab,\n    isRightPanelShown,\n    i18n.language,\n  ]);\n\n  const safeInlineTabCount = Math.min(inlineTabCount, visibleTabs.length);\n\n  return (\n    <>\n      <div\n        className={cn(\n          \"relative w-full min-w-0\",\n          variant === \"compact\"\n            ? \"flex h-full min-h-0 items-center py-0 pl-0 pr-1\"\n            : \"min-h-10 p-1\",\n        )}\n      >\n        <div\n          ref={measureRowRef}\n          aria-hidden\n          className=\"pointer-events-none absolute top-0 left-[-10000px] flex flex-nowrap items-center gap-1.5\"\n        >\n          {visibleTabs.map(\n            (\n              {\n                tabValue,\n                icon,\n                isActive,\n                tooltipContent,\n                tooltipAriaLabel,\n                label,\n                className: tabClassName,\n              },\n              index,\n            ) => (\n              <ChatActionTooltip\n                key={`measure-${tabValue}-${index}`}\n                tooltip={tooltipContent}\n                ariaLabel={tooltipAriaLabel}\n              >\n                <ConversationTabNav\n                  tabValue={tabValue}\n                  icon={icon}\n                  onClick={() => {}}\n                  isActive={isActive}\n                  label={label}\n                  className={cn(tabClassName, \"shrink-0\")}\n                  measureOnly\n                />\n              </ChatActionTooltip>\n            ),\n          )}\n        </div>\n        <div\n          ref={tabsRowInnerRef}\n          className=\"flex w-full min-w-0 flex-nowrap items-center justify-start\"\n        >\n          <div className=\"flex min-w-0 flex-1 items-center justify-start overflow-hidden\">\n            <div className=\"flex w-fit max-w-full min-w-0 items-center gap-1.5\">\n              <LayoutGroup id=\"conversation-drawer-tabs\">\n                <div className=\"flex w-fit max-w-full min-w-0 flex-nowrap items-center gap-1.5 overflow-x-hidden\">\n                  {visibleTabs\n                    .slice(0, safeInlineTabCount)\n                    .map(\n                      (\n                        {\n                          tabValue,\n                          icon,\n                          onClick,\n                          isActive,\n                          tooltipContent,\n                          tooltipAriaLabel,\n                          label,\n                          className: tabClassName,\n                        },\n                        index,\n                      ) => (\n                        <ChatActionTooltip\n                          key={`${tabValue}-${index}`}\n                          tooltip={tooltipContent}\n                          ariaLabel={tooltipAriaLabel}\n                        >\n                          <ConversationTabNav\n                            tabValue={tabValue}\n                            icon={icon}\n                            onClick={onClick}\n                            isActive={isActive}\n                            label={label}\n                            className={cn(tabClassName, \"shrink-0\")}\n                            suppressLayoutAnimation={isPanelResizing}\n                          />\n                        </ChatActionTooltip>\n                      ),\n                    )}\n                </div>\n              </LayoutGroup>\n              <div ref={menuRef} className=\"relative shrink-0\">\n                <EllipsisButton\n                  ref={anchorRef}\n                  onClick={() => setIsMenuOpen(!isMenuOpen)}\n                  ariaLabel={t(I18nKey.COMMON$MORE_OPTIONS)}\n                  iconClassName={\n                    variant === \"compact\"\n                      ? mobileTopBarIconClassName\n                      : undefined\n                  }\n                />\n                <ConversationTabsContextMenu\n                  isOpen={isMenuOpen}\n                  onClose={() => setIsMenuOpen(false)}\n                  ignoreOutsideClickRef={anchorRef}\n                  anchorRef={anchorRef}\n                />\n              </div>\n            </div>\n          </div>\n          {/* The ref'd wrapper must stay mounted — the overflow measurement\n              effect above bails if it's missing. */}\n          <div ref={vscodeButtonRef} className=\"ml-auto shrink-0 pr-1\">\n            <DrawerVSCodeLink />\n          </div>\n        </div>\n      </div>\n      {isTabActive(\"planner\") && (\n        <div\n          className={cn(\n            \"flex h-10 min-h-10 shrink-0 items-center border-t border-[var(--oh-border)] pl-[10px] pr-1\",\n          )}\n        >\n          <button\n            type=\"button\"\n            onClick={handleBuildPlanClick}\n            disabled={isBuildDisabled}\n            className={cn(\n              \"flex h-5 min-w-17 items-center justify-center rounded bg-white px-2 transition-opacity\",\n              isBuildDisabled\n                ? \"cursor-not-allowed opacity-50\"\n                : \"cursor-pointer hover:opacity-90\",\n            )}\n            data-testid=\"planner-tab-build-button\"\n          >\n            <Typography.Text className=\"text-[11px] font-normal leading-5 text-black\">\n              {/* eslint-disable-next-line i18next/no-literal-string */}\n              {t(I18nKey.COMMON$BUILD)} ⌘↩\n            </Typography.Text>\n          </button>\n        </div>\n      )}\n    </>\n  );\n}\n"],"mappings":"2qDA0BA,SAAgB,EAAiB,CAC/B,UAAU,UACV,kBAAkB,IAKjB,CACD,GAAM,CAAE,kBAAmB,EAAA,kBAAkB,EACvC,CAAE,iBAAgB,eAAgB,EAAA,qBAAqB,EAEvD,CAAC,EAAY,IAAA,EAAA,EAAA,UAA0B,EAAK,EAE5C,CAAE,MAAO,GACb,EAAA,iCAAiC,CAAc,EAE3C,CAAE,eAAgB,EAAA,YAAY,EAC9B,CAAE,WAAY,EAAA,iBAAiB,EAE/B,CAAE,yBAAyB,EAAA,wBAAwB,EACnD,CAAE,iBAAkB,EAAA,cAAc,EAElC,CACJ,YACA,cACA,cACA,cACA,qBACE,EAAA,yBAAyB,GAS7B,EAAA,EAAA,eAAgB,CACd,EAAe,EAAe,WAAW,CAC3C,EAAG,CAAC,EAAgB,EAAe,WAAW,CAAC,GAE/C,EAAA,EAAA,eAAgB,CAER,IAEG,GACH,EAAY,OAAO,EAM3B,EAAG,CAAC,EAAmB,EAAa,CAAW,CAAC,EAEhD,GAAM,CAAE,IAAG,QAAS,EAAA,eAAe,WAAW,EAIxC,EAAO,CACX,CACE,SAAU,QACV,SAAU,EAAY,OAAO,EAC7B,KAAM,EAAA,QACN,YAAe,EAAU,OAAO,EAChC,eAAgB,EAAE,EAAA,QAAQ,YAAY,EACtC,iBAAkB,EAAE,EAAA,QAAQ,YAAY,EACxC,MAAO,EAAE,EAAA,QAAQ,YAAY,CAC/B,EACA,CACE,SAAU,UACV,SAAU,EAAY,SAAS,EAC/B,KAAM,EAAA,WACN,YAAe,EAAU,SAAS,EAClC,eAAgB,EAAE,EAAA,QAAQ,mBAAmB,EAC7C,iBAAkB,EAAE,EAAA,QAAQ,mBAAmB,EAC/C,MAAO,EAAE,EAAA,QAAQ,mBAAmB,CACtC,EACA,CACE,SAAU,UACV,SAAU,EAAY,SAAS,EAC/B,KAAM,EAAA,SACN,YAAe,EAAU,SAAS,EAClC,eAAgB,EAAE,EAAA,QAAQ,cAAc,EACxC,iBAAkB,EAAE,EAAA,QAAQ,cAAc,EAC1C,MAAO,EAAE,EAAA,QAAQ,cAAc,CACjC,EACA,CACE,SAAU,WACV,SAAU,EAAY,UAAU,EAChC,KAAM,EAAA,mBACN,YAAe,EAAU,UAAU,EACnC,eAAgB,EAAE,EAAA,QAAQ,eAAe,EACzC,iBAAkB,EAAE,EAAA,QAAQ,eAAe,EAC3C,MAAO,EAAE,EAAA,QAAQ,eAAe,EAChC,UAAW,MACb,EACA,CACE,SAAU,UACV,SAAU,EAAY,SAAS,EAC/B,KAAM,EAAA,MACN,YAAe,EAAU,SAAS,EAClC,eAAgB,EAAE,EAAA,QAAQ,cAAc,EACxC,iBAAkB,EAAE,EAAA,QAAQ,cAAc,EAC1C,MAAO,EAAE,EAAA,QAAQ,cAAc,CACjC,EACA,CACE,SAAU,QACV,SAAU,EAAY,OAAO,EAC7B,KAAM,EAAA,MACN,YAAe,EAAU,OAAO,EAChC,eAAgB,EAAE,EAAA,QAAQ,YAAY,EACtC,iBAAkB,EAAE,EAAA,QAAQ,YAAY,EACxC,MAAO,EAAE,EAAA,QAAQ,YAAY,CAC/B,CACF,EAEI,GAEF,EAAK,OAAO,EAAG,EAAG,CAChB,SAAU,WACV,SAAU,EAAY,UAAU,EAChC,KAAM,GAAA,QACN,YAAe,EAAU,UAAU,EACnC,eAAgB,EAAE,EAAA,QAAQ,gBAAgB,EAC1C,iBAAkB,EAAE,EAAA,QAAQ,gBAAgB,EAC5C,MAAO,EAAE,EAAA,QAAQ,gBAAgB,CACnC,CAAC,EAOH,IAAM,EAAc,EAAK,OAAQ,GAC3B,EAAI,WAAa,WAAa,EAAQ,OAAS,QAAgB,GAC9D,EAAe,aAAa,SAAS,EAAI,QAAQ,EAC/C,IAAgB,EAAI,SADqC,EAEjE,EAEK,EAAoB,EAAe,aAAa,KAAK,GAAG,EAKxD,EAFJ,IAAkB,EAAA,WAAW,SAC7B,IAAkB,EAAA,WAAW,SACW,CAAC,EAErC,GAAA,EAAA,EAAA,QAAyC,IAAI,EAC7C,GAAA,EAAA,EAAA,QAAuC,IAAI,EAC3C,GAAA,EAAA,EAAA,QAAiC,IAAI,EACrC,GAAA,EAAA,EAAA,QAAyC,IAAI,EAC7C,GAAA,EAAA,EAAA,QAAsC,IAAI,EAC1C,CAAC,GAAgB,IAAA,EAAA,EAAA,UAA8B,EAAY,MAAM,GAEvE,EAAA,EAAA,qBAAsB,CACpB,IAAM,EAAW,EAAgB,QAC3B,EAAa,EAAc,QAC3B,EAAS,EAAQ,QACjB,EAAW,EAAgB,QACjC,GAAI,CAAC,GAAY,CAAC,GAAc,CAAC,GAAU,CAAC,EAAU,OAEtD,IAAM,MAAgB,CACpB,IAAM,EAAiB,EAAW,iBAChC,2BACF,EACM,EAAW,EAAe,OAE1B,EAAW,EAAS,sBAAsB,EAAE,MAClD,GAAI,IAAa,EAAG,CAClB,EAAkB,CAAQ,EAC1B,MACF,CAEA,IAAM,EAAS,MAAM,KAAK,CAAc,EAAE,IACvC,GAAW,EAAO,sBAAsB,EAAE,KAC7C,EAEA,GAAI,EAAO,SAAW,GAAY,IAAa,EAAG,CAChD,EAAkB,KAAK,IAAI,EAAG,CAAQ,CAAC,EACvC,MACF,CAEA,IAAM,EAAY,EAAO,sBAAsB,EAAE,MAC3C,EAAc,EAAS,sBAAsB,EAAE,MAC/C,EACJ,iBAAiB,CAAQ,EAAE,WAAa,iBAAiB,CAAQ,EAAE,IAC/D,EAAQ,WAAW,CAAM,GAAK,EAEhC,EAAY,EAChB,IAAK,IAAI,EAAI,EAAU,GAAK,EAAG,IAAQ,CACrC,IAAI,EAAQ,EAAY,EACxB,IAAK,IAAI,EAAI,EAAG,EAAI,EAAG,GAAK,EAC1B,GAAS,EAAO,IAAM,EAKxB,GAHI,EAAI,IACN,GAAS,EAAI,GAEX,GAAS,EAAW,GAAK,CAC3B,EAAY,EACZ,KACF,CACF,CAEA,EAAmB,GAAU,IAAS,EAAY,EAAO,CAAU,CACrE,EAGA,GADA,EAAQ,EACJ,OAAO,eAAmB,IAAa,OAC3C,IAAM,EAAK,IAAI,eAAe,CAAO,EAQrC,OAPA,EAAG,QAAQ,CAAQ,EAMnB,EAAG,QAAQ,CAAQ,MACN,EAAG,WAAW,CAC7B,EAAG,CACD,EACA,EAAY,OACZ,EACA,EAAQ,KACR,EACA,EACA,EAAK,QACP,CAAC,EAED,IAAM,GAAqB,KAAK,IAAI,GAAgB,EAAY,MAAM,EAEtE,OACE,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,EAAA,GACT,0BACA,IAAY,UACR,kDACA,cACN,WANF,EAQE,EAAA,EAAA,KAAC,MAAD,CACE,IAAK,EACL,cAAA,GACA,UAAU,oGAET,EAAY,KAET,CACE,WACA,OACA,WACA,iBACA,mBACA,QACA,UAAW,GAEb,KAEA,EAAA,EAAA,KAAC,EAAA,kBAAD,CAEE,QAAS,EACT,UAAW,YAEX,EAAA,EAAA,KAAC,EAAA,mBAAD,CACY,WACJ,OACN,YAAe,CAAC,EACN,WACH,QACP,UAAW,EAAA,GAAG,EAAc,UAAU,EACtC,YAAA,EACD,CAAA,CACgB,EAbZ,WAAW,EAAS,GAAG,GAaX,CAEvB,CACG,CAAA,GACL,EAAA,EAAA,MAAC,MAAD,CACE,IAAK,EACL,UAAU,sEAFZ,EAIE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,2EACb,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,8DAAf,EACE,EAAA,EAAA,KAAC,EAAA,YAAD,CAAa,GAAG,qCACd,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,4FACZ,EACE,MAAM,EAAG,EAAkB,EAC3B,KAEG,CACE,WACA,OACA,UACA,WACA,iBACA,mBACA,QACA,UAAW,GAEb,KAEA,EAAA,EAAA,KAAC,EAAA,kBAAD,CAEE,QAAS,EACT,UAAW,YAEX,EAAA,EAAA,KAAC,EAAA,mBAAD,CACY,WACJ,OACG,UACC,WACH,QACP,UAAW,EAAA,GAAG,EAAc,UAAU,EACtC,wBAAyB,CAC1B,CAAA,CACgB,EAbZ,GAAG,EAAS,GAAG,GAaH,CAEvB,CACC,CAAA,CACM,CAAA,GACb,EAAA,EAAA,MAAC,MAAD,CAAK,IAAK,EAAS,UAAU,6BAA7B,EACE,EAAA,EAAA,KAAC,EAAA,eAAD,CACE,IAAK,EACL,YAAe,EAAc,CAAC,CAAU,EACxC,UAAW,EAAE,EAAA,QAAQ,mBAAmB,EACxC,cACE,IAAY,UACR,EAAA,0BACA,IAAA,EAEP,CAAA,GACD,EAAA,EAAA,KAAC,GAAA,4BAAD,CACE,OAAQ,EACR,YAAe,EAAc,EAAK,EAClC,sBAAuB,EACZ,WACZ,CAAA,CACE,GACF,GACF,CAAA,GAGL,EAAA,EAAA,KAAC,MAAD,CAAK,IAAK,EAAiB,UAAU,kCACnC,EAAA,EAAA,KAAC,GAAA,iBAAD,CAAmB,CAAA,CAChB,CAAA,CACF,GACF,IACJ,EAAY,SAAS,IACpB,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,EAAA,GACT,4FACF,YAEA,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,QAAS,GACT,SAAU,EACV,UAAW,EAAA,GACT,yFACA,EACI,gCACA,iCACN,EACA,cAAY,qCAEZ,EAAA,EAAA,MAAC,EAAA,WAAW,KAAZ,CAAiB,UAAU,wDAA3B,CAEG,EAAE,EAAA,QAAQ,YAAY,EAAE,KACV,GACX,CAAA,CACL,CAAA,CAEP,CAAA,CAAA,CAEN"}

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

@@ -14,25 +14,25 @@ import { useAgentState as f } from "../../../../hooks/use-agent-state.js";
 import { LayoutGroup as ee } from "../../../../node_modules/framer-motion/dist/es/components/LayoutGroup/index.js";
 import { Typography as te } from "../../../../ui/typography.js";
 import { useSelectConversationTab as ne } from "../../../../hooks/use-select-conversation-tab.js";
-import re from "../../../../icons/document.js";
-import { useHandleBuildPlanClick as p } from "../../../../hooks/use-handle-build-plan-click.js";
-import { LuFileDiff as m } from "../../../../node_modules/react-icons/lu/index.js";
-import { EllipsisButton as h } from "../../conversation-panel/ellipsis-button.js";
-import { ChatActionTooltip as g } from "../../chat/chat-action-tooltip.js";
-import { mobileTopBarIconClassName as _ } from "../../../../utils/mobile-top-bar-icon-button-classes.js";
+import p from "../../../../icons/document.js";
+import { useHandleBuildPlanClick as m } from "../../../../hooks/use-handle-build-plan-click.js";
+import { LuFileDiff as h } from "../../../../node_modules/react-icons/lu/index.js";
+import { EllipsisButton as g } from "../../conversation-panel/ellipsis-button.js";
+import { ChatActionTooltip as _ } from "../../chat/chat-action-tooltip.js";
+import { mobileTopBarIconClassName as re } from "../../../../utils/mobile-top-bar-icon-button-classes.js";
 import v from "../../../../icons/double-check.js";
 import { ConversationTabNav as y } from "./conversation-tab-nav.js";
 import { DrawerVSCodeLink as ie } from "./drawer-vscode-link.js";
 import { useTaskList as ae } from "../../../../hooks/use-task-list.js";
-import { ConversationTabsContextMenu as oe } from "./conversation-tabs-context-menu.js";
-import { useEffect as b, useLayoutEffect as se, useRef as x, useState as S } from "react";
-import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
+import { ConversationTabsContextMenu as b } from "./conversation-tabs-context-menu.js";
+import { useEffect as x, useLayoutEffect as S, useRef as C, useState as w } from "react";
+import { Fragment as T, jsx as E, jsxs as D } from "react/jsx-runtime";
 //#region src/components/features/conversation/conversation-tabs/conversation-tabs.tsx
-function E({ variant: E = "default", isPanelResizing: D = !1 }) {
-	let { conversationId: O } = c(), { setSelectedTab: k, planContent: A } = u(), [j, M] = S(!1), { state: N } = l(O), { hasTaskList: P } = ae(), { backend: F } = d(), { handleBuildPlanClick: I } = p(), { curAgentState: L } = f(), { selectTab: R, isTabActive: z, onTabChange: B, selectedTab: V, isRightPanelShown: H } = ne();
-	b(() => {
-		k(N.selectedTab);
-	}, [k, N.selectedTab]), b(() => {
+function O({ variant: O = "default", isPanelResizing: oe = !1 }) {
+	let { conversationId: k } = c(), { setSelectedTab: A, planContent: j } = u(), [M, N] = w(!1), { state: P } = l(k), { hasTaskList: F } = ae(), { backend: I } = d(), { handleBuildPlanClick: se } = m(), { curAgentState: L } = f(), { selectTab: R, isTabActive: z, onTabChange: B, selectedTab: V, isRightPanelShown: H } = ne();
+	x(() => {
+		A(P.selectedTab);
+	}, [A, P.selectedTab]), x(() => {
 		H && (V || B("files"));
 	}, [
 		H,
@@ -43,7 +43,7 @@ function E({ variant: E = "default", isPanelResizing: D = !1 }) {
 		{
 			tabValue: "files",
 			isActive: z("files"),
-			icon: re,
+			icon: p,
 			onClick: () => R("files"),
 			tooltipContent: U(t.COMMON$FILES),
 			tooltipAriaLabel: U(t.COMMON$FILES),
@@ -52,7 +52,7 @@ function E({ variant: E = "default", isPanelResizing: D = !1 }) {
 		{
 			tabValue: "commits",
 			isActive: z("commits"),
-			icon: m,
+			icon: h,
 			onClick: () => R("commits"),
 			tooltipContent: U(t.DIFF_VIEWER$COMMITS),
 			tooltipAriaLabel: U(t.DIFF_VIEWER$COMMITS),
@@ -96,7 +96,7 @@ function E({ variant: E = "default", isPanelResizing: D = !1 }) {
 			label: U(t.COMMON$USAGE)
 		}
 	];
-	P && G.splice(2, 0, {
+	F && G.splice(2, 0, {
 		tabValue: "tasklist",
 		isActive: z("tasklist"),
 		icon: v,
@@ -105,8 +105,8 @@ function E({ variant: E = "default", isPanelResizing: D = !1 }) {
 		tooltipAriaLabel: U(t.COMMON$TASK_LIST),
 		label: U(t.COMMON$TASK_LIST)
 	});
-	let K = G.filter((e) => e.tabValue === "planner" && F.kind !== "cloud" ? !1 : N.unpinnedTabs.includes(e.tabValue) ? V === e.tabValue : !0), ce = N.unpinnedTabs.join(","), q = L === o.RUNNING || L === o.LOADING || !A, J = x(null), Y = x(null), X = x(null), Z = x(null), Q = x(null), [le, $] = S(K.length);
-	se(() => {
+	let K = G.filter((e) => e.tabValue === "planner" && I.kind !== "cloud" ? !1 : P.unpinnedTabs.includes(e.tabValue) ? V === e.tabValue : !0), ce = P.unpinnedTabs.join(","), q = L === o.RUNNING || L === o.LOADING || !j, J = C(null), Y = C(null), X = C(null), Z = C(null), Q = C(null), [le, $] = w(K.length);
+	S(() => {
 		let e = J.current, t = Y.current, n = X.current, r = Z.current;
 		if (!e || !t || !n || !r) return;
 		let i = () => {
@@ -133,27 +133,27 @@ function E({ variant: E = "default", isPanelResizing: D = !1 }) {
 		};
 		if (i(), typeof ResizeObserver > "u") return;
 		let a = new ResizeObserver(i);
-		return a.observe(e), () => a.disconnect();
+		return a.observe(e), a.observe(r), () => a.disconnect();
 	}, [
 		ce,
 		K.length,
-		P,
-		F.kind,
+		F,
+		I.kind,
 		V,
 		H,
 		W.language
 	]);
 	let ue = Math.min(le, K.length);
-	return /* @__PURE__ */ T(C, { children: [/* @__PURE__ */ T("div", {
-		className: s("relative w-full min-w-0", E === "compact" ? "flex h-full min-h-0 items-center py-0 pl-0 pr-1" : "min-h-10 p-1"),
-		children: [/* @__PURE__ */ w("div", {
+	return /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ D("div", {
+		className: s("relative w-full min-w-0", O === "compact" ? "flex h-full min-h-0 items-center py-0 pl-0 pr-1" : "min-h-10 p-1"),
+		children: [/* @__PURE__ */ E("div", {
 			ref: Y,
 			"aria-hidden": !0,
 			className: "pointer-events-none absolute top-0 left-[-10000px] flex flex-nowrap items-center gap-1.5",
-			children: K.map(({ tabValue: e, icon: t, isActive: n, tooltipContent: r, tooltipAriaLabel: i, label: a, className: o }, c) => /* @__PURE__ */ w(g, {
+			children: K.map(({ tabValue: e, icon: t, isActive: n, tooltipContent: r, tooltipAriaLabel: i, label: a, className: o }, c) => /* @__PURE__ */ E(_, {
 				tooltip: r,
 				ariaLabel: i,
-				children: /* @__PURE__ */ w(y, {
+				children: /* @__PURE__ */ E(y, {
 					tabValue: e,
 					icon: t,
 					onClick: () => {},
@@ -163,62 +163,62 @@ function E({ variant: E = "default", isPanelResizing: D = !1 }) {
 					measureOnly: !0
 				})
 			}, `measure-${e}-${c}`))
-		}), /* @__PURE__ */ T("div", {
+		}), /* @__PURE__ */ D("div", {
 			ref: J,
 			className: "flex w-full min-w-0 flex-nowrap items-center justify-start",
-			children: [/* @__PURE__ */ w("div", {
+			children: [/* @__PURE__ */ E("div", {
 				className: "flex min-w-0 flex-1 items-center justify-start overflow-hidden",
-				children: /* @__PURE__ */ T("div", {
+				children: /* @__PURE__ */ D("div", {
 					className: "flex w-fit max-w-full min-w-0 items-center gap-1.5",
-					children: [/* @__PURE__ */ w(ee, {
+					children: [/* @__PURE__ */ E(ee, {
 						id: "conversation-drawer-tabs",
-						children: /* @__PURE__ */ w("div", {
+						children: /* @__PURE__ */ E("div", {
 							className: "flex w-fit max-w-full min-w-0 flex-nowrap items-center gap-1.5 overflow-x-hidden",
-							children: K.slice(0, ue).map(({ tabValue: e, icon: t, onClick: n, isActive: r, tooltipContent: i, tooltipAriaLabel: a, label: o, className: c }, l) => /* @__PURE__ */ w(g, {
+							children: K.slice(0, ue).map(({ tabValue: e, icon: t, onClick: n, isActive: r, tooltipContent: i, tooltipAriaLabel: a, label: o, className: c }, l) => /* @__PURE__ */ E(_, {
 								tooltip: i,
 								ariaLabel: a,
-								children: /* @__PURE__ */ w(y, {
+								children: /* @__PURE__ */ E(y, {
 									tabValue: e,
 									icon: t,
 									onClick: n,
 									isActive: r,
 									label: o,
 									className: s(c, "shrink-0"),
-									suppressLayoutAnimation: D
+									suppressLayoutAnimation: oe
 								})
 							}, `${e}-${l}`))
 						})
-					}), /* @__PURE__ */ T("div", {
+					}), /* @__PURE__ */ D("div", {
 						ref: X,
 						className: "relative shrink-0",
-						children: [/* @__PURE__ */ w(h, {
+						children: [/* @__PURE__ */ E(g, {
 							ref: Q,
-							onClick: () => M(!j),
+							onClick: () => N(!M),
 							ariaLabel: U(t.COMMON$MORE_OPTIONS),
-							iconClassName: E === "compact" ? _ : void 0
-						}), /* @__PURE__ */ w(oe, {
-							isOpen: j,
-							onClose: () => M(!1),
+							iconClassName: O === "compact" ? re : void 0
+						}), /* @__PURE__ */ E(b, {
+							isOpen: M,
+							onClose: () => N(!1),
 							ignoreOutsideClickRef: Q,
 							anchorRef: Q
 						})]
 					})]
 				})
-			}), /* @__PURE__ */ w("div", {
+			}), /* @__PURE__ */ E("div", {
 				ref: Z,
-				className: s("ml-auto shrink-0", F.kind === "cloud" && "pr-1"),
-				children: F.kind === "cloud" && /* @__PURE__ */ w(ie, {})
+				className: "ml-auto shrink-0 pr-1",
+				children: /* @__PURE__ */ E(ie, {})
 			})]
 		})]
-	}), z("planner") && /* @__PURE__ */ w("div", {
+	}), z("planner") && /* @__PURE__ */ E("div", {
 		className: s("flex h-10 min-h-10 shrink-0 items-center border-t border-[var(--oh-border)] pl-[10px] pr-1"),
-		children: /* @__PURE__ */ w("button", {
+		children: /* @__PURE__ */ E("button", {
 			type: "button",
-			onClick: I,
+			onClick: se,
 			disabled: q,
 			className: s("flex h-5 min-w-17 items-center justify-center rounded bg-white px-2 transition-opacity", q ? "cursor-not-allowed opacity-50" : "cursor-pointer hover:opacity-90"),
 			"data-testid": "planner-tab-build-button",
-			children: /* @__PURE__ */ T(te.Text, {
+			children: /* @__PURE__ */ D(te.Text, {
 				className: "text-[11px] font-normal leading-5 text-black",
 				children: [U(t.COMMON$BUILD), " ⌘↩"]
 			})
@@ -226,6 +226,6 @@ function E({ variant: E = "default", isPanelResizing: D = !1 }) {
 	})] });
 }
 //#endregion
-export { E as ConversationTabs };
+export { O as ConversationTabs };
 
 //# sourceMappingURL=conversation-tabs.js.map