@openhands/agent-canvas 1.14.0 → 1.16.0

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

@@ -0,0 +1,102 @@
+import { useTranslation as e } from "../../../node_modules/react-i18next/dist/es/useTranslation.js";
+import { I18nKey as t } from "../../../i18n/declaration.js";
+import { Laptop as n } from "../../../node_modules/lucide-react/dist/esm/icons/laptop.js";
+import { cn as r } from "../../../utils/utils.js";
+import { useConversationId as i } from "../../../hooks/use-conversation-id.js";
+import { CONVERSATION_OVERVIEW_GIT_PART as a, CONVERSATION_OVERVIEW_SECTION as o, CONVERSATION_OVERVIEW_SECTION_GROUPS as s, isOverviewGitPartPinned as c, isOverviewSectionPinned as l } from "./conversation-overview-sections.js";
+import { useConversationLocalStorageState as u } from "../../../utils/conversation-local-storage.js";
+import { Divider as d } from "../../../ui/divider.js";
+import { useConversationOverviewStats as f } from "../../../hooks/use-conversation-overview-stats.js";
+import { useConversationPrimaryRepository as p } from "../../../hooks/use-conversation-primary-repository.js";
+import { ConversationOverviewDiffsRow as m } from "./conversation-overview-diffs-row.js";
+import { ConversationOverviewContextMenu as h } from "./conversation-overview-context-menu.js";
+import { ConversationOverviewGitSection as g } from "./conversation-overview-git-section.js";
+import { EllipsisButton as _ } from "../conversation-panel/ellipsis-button.js";
+import v, { useRef as y, useState as b } from "react";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
+//#region src/components/features/conversation/conversation-overview-panel.tsx
+var C = r("w-full max-w-[240px] rounded-xl border border-[var(--oh-border)]", "bg-[var(--oh-surface)] pb-1"), w = r("flex items-center gap-2 rounded-md px-2 py-1.5", "transition-colors hover:bg-white/5"), T = "size-4 shrink-0 text-[var(--oh-muted)]";
+function E({ icon: e, label: t, value: n, testId: r }) {
+	return /* @__PURE__ */ S("li", {
+		"data-testid": r,
+		className: w,
+		children: [
+			e,
+			/* @__PURE__ */ x("span", {
+				className: "min-w-0 flex-1 truncate text-sm text-[var(--oh-foreground)]",
+				children: t
+			}),
+			/* @__PURE__ */ x("span", {
+				className: "max-w-[45%] shrink-0 truncate text-right text-sm text-[var(--oh-muted)]",
+				children: n
+			})
+		]
+	});
+}
+function D() {
+	return /* @__PURE__ */ x("div", {
+		className: "px-1",
+		children: /* @__PURE__ */ x(d, { inset: "menu" })
+	});
+}
+function O() {
+	let { t: r } = e("openhands"), d = f(), { conversationId: w } = i(), { state: O } = u(w), { isConnected: k } = p(), [A, j] = b(!1), M = y(null), N = (e) => l(e, O.unpinnedOverviewSections ?? []), P = c(a.changes, O.unpinnedOverviewGitParts ?? []), F = N(o.git) && (P || k), I = s.flatMap((e) => e.sections.filter((e) => N(e))), L = [];
+	F && L.push({
+		kind: "git",
+		key: "git"
+	}), I.length > 0 && L.push({
+		kind: "sections",
+		key: I.join("-"),
+		sections: I
+	});
+	let R = (e) => {
+		switch (e) {
+			case o.workspace: return /* @__PURE__ */ x(E, {
+				testId: "conversation-overview-workspace",
+				icon: /* @__PURE__ */ x(n, { className: T }),
+				label: r(t.CONVERSATION$OVERVIEW_WORKSPACE),
+				value: d.workspaceName ?? r(t.CONVERSATION$OVERVIEW_NONE)
+			}, e);
+			case o.git: return null;
+			default: return e;
+		}
+	};
+	return /* @__PURE__ */ S("aside", {
+		"data-testid": "conversation-overview-panel",
+		"aria-label": r(t.CONVERSATION$OVERVIEW),
+		className: C,
+		children: [/* @__PURE__ */ S("div", {
+			className: "flex items-center justify-between px-4 pb-0.5 pt-2.5",
+			children: [/* @__PURE__ */ x("span", {
+				className: "text-xs font-medium text-[var(--oh-muted)]",
+				children: r(t.CONVERSATION$OVERVIEW)
+			}), /* @__PURE__ */ S("div", {
+				className: "relative shrink-0",
+				children: [/* @__PURE__ */ x(_, {
+					ref: M,
+					testId: "conversation-overview-ellipsis",
+					onClick: () => j((e) => !e),
+					ariaLabel: r(t.COMMON$MORE_OPTIONS)
+				}), /* @__PURE__ */ x(h, {
+					isOpen: A,
+					onClose: () => j(!1),
+					ignoreOutsideClickRef: M,
+					anchorRef: M
+				})]
+			})]
+		}), L.map((e, t) => /* @__PURE__ */ S(v.Fragment, { children: [t > 0 ? /* @__PURE__ */ x(D, {}) : null, e.kind === "git" ? /* @__PURE__ */ S("div", {
+			"data-testid": "conversation-overview-git-block",
+			children: [P ? /* @__PURE__ */ x("ul", {
+				className: "px-2",
+				children: /* @__PURE__ */ x(m, {})
+			}) : null, k ? /* @__PURE__ */ x(g, {}) : null]
+		}) : /* @__PURE__ */ x("ul", {
+			className: "px-2",
+			children: e.sections.map((e) => R(e))
+		})] }, e.key))]
+	});
+}
+//#endregion
+export { O as ConversationOverviewPanel };
+
+//# sourceMappingURL=conversation-overview-panel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"conversation-overview-panel.js","names":[],"sources":["../../../../src/components/features/conversation/conversation-overview-panel.tsx"],"sourcesContent":["import React, { useRef, useState } from \"react\";\nimport { Laptop } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useConversationOverviewStats } from \"#/hooks/use-conversation-overview-stats\";\nimport { useConversationId } from \"#/hooks/use-conversation-id\";\nimport { useConversationPrimaryRepository } from \"#/hooks/use-conversation-primary-repository\";\nimport { useConversationLocalStorageState } from \"#/utils/conversation-local-storage\";\nimport { ConversationOverviewDiffsRow } from \"./conversation-overview-diffs-row\";\nimport { ConversationOverviewContextMenu } from \"./conversation-overview-context-menu\";\nimport { ConversationOverviewGitSection } from \"./conversation-overview-git-section\";\nimport { EllipsisButton } from \"#/components/features/conversation-panel/ellipsis-button\";\nimport { Divider } from \"#/ui/divider\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport {\n  CONVERSATION_OVERVIEW_GIT_PART,\n  CONVERSATION_OVERVIEW_SECTION,\n  CONVERSATION_OVERVIEW_SECTION_GROUPS,\n  isOverviewGitPartPinned,\n  isOverviewSectionPinned,\n  type ConversationOverviewSection,\n} from \"./conversation-overview-sections\";\n\nconst PANEL_CLASSNAME = cn(\n  \"w-full max-w-[240px] rounded-xl border border-[var(--oh-border)]\",\n  \"bg-[var(--oh-surface)] pb-1\",\n);\n\nconst ROW_CLASSNAME = cn(\n  \"flex items-center gap-2 rounded-md px-2 py-1.5\",\n  \"transition-colors hover:bg-white/5\",\n);\n\nconst ROW_ICON_CLASSNAME = \"size-4 shrink-0 text-[var(--oh-muted)]\";\n\ninterface OverviewRowProps {\n  icon: React.ReactNode;\n  label: string;\n  value: React.ReactNode;\n  testId: string;\n}\n\nfunction OverviewRow({ icon, label, value, testId }: OverviewRowProps) {\n  return (\n    <li data-testid={testId} className={ROW_CLASSNAME}>\n      {icon}\n      <span className=\"min-w-0 flex-1 truncate text-sm text-[var(--oh-foreground)]\">\n        {label}\n      </span>\n      <span className=\"max-w-[45%] shrink-0 truncate text-right text-sm text-[var(--oh-muted)]\">\n        {value}\n      </span>\n    </li>\n  );\n}\n\nfunction OverviewSectionDivider() {\n  // Match dropdown/context-menu separators: `px-1` host + `inset=\"menu\"`\n  // Divider (12px slot, line bleeds into the horizontal padding).\n  return (\n    <div className=\"px-1\">\n      <Divider inset=\"menu\" />\n    </div>\n  );\n}\n\ntype OverviewPanelBlock =\n  | {\n      kind: \"sections\";\n      key: string;\n      sections: ConversationOverviewSection[];\n    }\n  | { kind: \"git\"; key: \"git\" };\n\nexport function ConversationOverviewPanel() {\n  const { t } = useTranslation(\"openhands\");\n  const stats = useConversationOverviewStats();\n  const { conversationId } = useConversationId();\n  const { state } = useConversationLocalStorageState(conversationId);\n  const { isConnected: isGitConnected } = useConversationPrimaryRepository();\n  const [isMenuOpen, setIsMenuOpen] = useState(false);\n  const menuAnchorRef = useRef<HTMLButtonElement>(null);\n\n  const isPinned = (section: ConversationOverviewSection) =>\n    isOverviewSectionPinned(section, state.unpinnedOverviewSections ?? []);\n\n  const showChanges = isOverviewGitPartPinned(\n    CONVERSATION_OVERVIEW_GIT_PART.changes,\n    state.unpinnedOverviewGitParts ?? [],\n  );\n\n  const showGitBlock =\n    isPinned(CONVERSATION_OVERVIEW_SECTION.git) &&\n    (showChanges || isGitConnected);\n\n  const workspaceSections = CONVERSATION_OVERVIEW_SECTION_GROUPS.flatMap(\n    (group) => group.sections.filter((section) => isPinned(section)),\n  );\n\n  // Git content first (untitled); Workspace sits below it.\n  const panelBlocks: OverviewPanelBlock[] = [];\n  if (showGitBlock) {\n    panelBlocks.push({ kind: \"git\", key: \"git\" });\n  }\n  if (workspaceSections.length > 0) {\n    panelBlocks.push({\n      kind: \"sections\",\n      key: workspaceSections.join(\"-\"),\n      sections: workspaceSections,\n    });\n  }\n\n  const renderSection = (section: ConversationOverviewSection) => {\n    switch (section) {\n      case CONVERSATION_OVERVIEW_SECTION.workspace:\n        return (\n          <OverviewRow\n            key={section}\n            testId=\"conversation-overview-workspace\"\n            icon={<Laptop className={ROW_ICON_CLASSNAME} />}\n            label={t(I18nKey.CONVERSATION$OVERVIEW_WORKSPACE)}\n            value={stats.workspaceName ?? t(I18nKey.CONVERSATION$OVERVIEW_NONE)}\n          />\n        );\n      case CONVERSATION_OVERVIEW_SECTION.git:\n        // Rendered as its own panel block (not a group row).\n        return null;\n      default: {\n        const _exhaustive: never = section;\n        return _exhaustive;\n      }\n    }\n  };\n\n  return (\n    <aside\n      data-testid=\"conversation-overview-panel\"\n      aria-label={t(I18nKey.CONVERSATION$OVERVIEW)}\n      className={PANEL_CLASSNAME}\n    >\n      <div className=\"flex items-center justify-between px-4 pb-0.5 pt-2.5\">\n        <span className=\"text-xs font-medium text-[var(--oh-muted)]\">\n          {t(I18nKey.CONVERSATION$OVERVIEW)}\n        </span>\n        <div className=\"relative shrink-0\">\n          <EllipsisButton\n            ref={menuAnchorRef}\n            testId=\"conversation-overview-ellipsis\"\n            onClick={() => setIsMenuOpen((open) => !open)}\n            ariaLabel={t(I18nKey.COMMON$MORE_OPTIONS)}\n          />\n          <ConversationOverviewContextMenu\n            isOpen={isMenuOpen}\n            onClose={() => setIsMenuOpen(false)}\n            ignoreOutsideClickRef={menuAnchorRef}\n            anchorRef={menuAnchorRef}\n          />\n        </div>\n      </div>\n\n      {panelBlocks.map((block, blockIndex) => (\n        <React.Fragment key={block.key}>\n          {blockIndex > 0 ? <OverviewSectionDivider /> : null}\n          {block.kind === \"git\" ? (\n            <div data-testid=\"conversation-overview-git-block\">\n              {showChanges ? (\n                <ul className=\"px-2\">\n                  <ConversationOverviewDiffsRow />\n                </ul>\n              ) : null}\n              {isGitConnected ? <ConversationOverviewGitSection /> : null}\n            </div>\n          ) : (\n            <ul className=\"px-2\">\n              {block.sections.map((section) => renderSection(section))}\n            </ul>\n          )}\n        </React.Fragment>\n      ))}\n    </aside>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAuBA,IAAM,IAAkB,EACtB,oEACA,6BACF,GAEM,IAAgB,EACpB,kDACA,oCACF,GAEM,IAAqB;AAS3B,SAAS,EAAY,EAAE,SAAM,UAAO,UAAO,aAA4B;CACrE,OACE,kBAAC,MAAD;EAAI,eAAa;EAAQ,WAAW;YAApC;GACG;GACD,kBAAC,QAAD;IAAM,WAAU;cACb;GACG,CAAA;GACN,kBAAC,QAAD;IAAM,WAAU;cACb;GACG,CAAA;EACJ;;AAER;AAEA,SAAS,IAAyB;CAGhC,OACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,GAAD,EAAS,OAAM,OAAQ,CAAA;CACpB,CAAA;AAET;AAUA,SAAgB,IAA4B;CAC1C,IAAM,EAAE,SAAM,EAAe,WAAW,GAClC,IAAQ,EAA6B,GACrC,EAAE,sBAAmB,EAAkB,GACvC,EAAE,aAAU,EAAiC,CAAc,GAC3D,EAAE,aAAa,MAAmB,EAAiC,GACnE,CAAC,GAAY,KAAiB,EAAS,EAAK,GAC5C,IAAgB,EAA0B,IAAI,GAE9C,KAAY,MAChB,EAAwB,GAAS,EAAM,4BAA4B,CAAC,CAAC,GAEjE,IAAc,EAClB,EAA+B,SAC/B,EAAM,4BAA4B,CAAC,CACrC,GAEM,IACJ,EAAS,EAA8B,GAAG,MACzC,KAAe,IAEZ,IAAoB,EAAqC,SAC5D,MAAU,EAAM,SAAS,QAAQ,MAAY,EAAS,CAAO,CAAC,CACjE,GAGM,IAAoC,CAAC;CAI3C,AAHI,KACF,EAAY,KAAK;EAAE,MAAM;EAAO,KAAK;CAAM,CAAC,GAE1C,EAAkB,SAAS,KAC7B,EAAY,KAAK;EACf,MAAM;EACN,KAAK,EAAkB,KAAK,GAAG;EAC/B,UAAU;CACZ,CAAC;CAGH,IAAM,KAAiB,MAAyC;EAC9D,QAAQ,GAAR;GACE,KAAK,EAA8B,WACjC,OACE,kBAAC,GAAD;IAEE,QAAO;IACP,MAAM,kBAAC,GAAD,EAAQ,WAAW,EAAqB,CAAA;IAC9C,OAAO,EAAE,EAAQ,+BAA+B;IAChD,OAAO,EAAM,iBAAiB,EAAE,EAAQ,0BAA0B;GACnE,GALM,CAKN;GAEL,KAAK,EAA8B,KAEjC,OAAO;GACT,SAEE,OAAO;EAEX;CACF;CAEA,OACE,kBAAC,SAAD;EACE,eAAY;EACZ,cAAY,EAAE,EAAQ,qBAAqB;EAC3C,WAAW;YAHb,CAKE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,QAAD;IAAM,WAAU;cACb,EAAE,EAAQ,qBAAqB;GAC5B,CAAA,GACN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,GAAD;KACE,KAAK;KACL,QAAO;KACP,eAAe,GAAe,MAAS,CAAC,CAAI;KAC5C,WAAW,EAAE,EAAQ,mBAAmB;IACzC,CAAA,GACD,kBAAC,GAAD;KACE,QAAQ;KACR,eAAe,EAAc,EAAK;KAClC,uBAAuB;KACvB,WAAW;IACZ,CAAA,CACE;KACF;MAEJ,EAAY,KAAK,GAAO,MACvB,kBAAC,EAAM,UAAP,EAAA,UAAA,CACG,IAAa,IAAI,kBAAC,GAAD,CAAyB,CAAA,IAAI,MAC9C,EAAM,SAAS,QACd,kBAAC,OAAD;GAAK,eAAY;aAAjB,CACG,IACC,kBAAC,MAAD;IAAI,WAAU;cACZ,kBAAC,GAAD,CAA+B,CAAA;GAC7B,CAAA,IACF,MACH,IAAiB,kBAAC,GAAD,CAAiC,CAAA,IAAI,IACpD;OAEL,kBAAC,MAAD;GAAI,WAAU;aACX,EAAM,SAAS,KAAK,MAAY,EAAc,CAAO,CAAC;EACrD,CAAA,CAEQ,EAAA,GAhBK,EAAM,GAgBX,CACjB,CACI;;AAEX"}

package/dist/components/features/conversation/conversation-overview-project-scope-toggle.cjs

@@ -0,0 +1,2 @@
+require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),t=require("../../../i18n/declaration.cjs"),n=require("../../../utils/conversation-overview-project-scope.cjs"),r=require("../files-tab/segmented-toggle.cjs");let i=require("react/jsx-runtime");function a({value:a,onChange:o,testId:s}){let{t:c}=e.useTranslation(`openhands`);return(0,i.jsx)(`div`,{className:`flex w-full justify-center [&>[role=radiogroup]]:w-full`,children:(0,i.jsx)(r.SegmentedToggle,{value:a,onChange:o,ariaLabel:c(t.I18nKey.CONVERSATION$OVERVIEW_SCOPE_FILTER),testId:s,options:[{value:n.CONVERSATION_OVERVIEW_PROJECT_SCOPE.project,label:c(t.I18nKey.CONVERSATION$OVERVIEW_SCOPE_PROJECT)},{value:n.CONVERSATION_OVERVIEW_PROJECT_SCOPE.all,label:c(t.I18nKey.CONVERSATION$OVERVIEW_SCOPE_ALL)}]})})}exports.ConversationOverviewProjectScopeToggle=a;
+//# sourceMappingURL=conversation-overview-project-scope-toggle.cjs.map

package/dist/components/features/conversation/conversation-overview-project-scope-toggle.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"conversation-overview-project-scope-toggle.cjs","names":[],"sources":["../../../../src/components/features/conversation/conversation-overview-project-scope-toggle.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { SegmentedToggle } from \"#/components/features/files-tab/segmented-toggle\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport {\n  CONVERSATION_OVERVIEW_PROJECT_SCOPE,\n  type ConversationOverviewProjectScope,\n} from \"#/utils/conversation-overview-project-scope\";\n\ninterface ConversationOverviewProjectScopeToggleProps {\n  value: ConversationOverviewProjectScope;\n  onChange: (value: ConversationOverviewProjectScope) => void;\n  testId: string;\n}\n\nexport function ConversationOverviewProjectScopeToggle({\n  value,\n  onChange,\n  testId,\n}: ConversationOverviewProjectScopeToggleProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  return (\n    <div className=\"flex w-full justify-center [&>[role=radiogroup]]:w-full\">\n      <SegmentedToggle<ConversationOverviewProjectScope>\n        value={value}\n        onChange={onChange}\n        ariaLabel={t(I18nKey.CONVERSATION$OVERVIEW_SCOPE_FILTER)}\n        testId={testId}\n        options={[\n          {\n            value: CONVERSATION_OVERVIEW_PROJECT_SCOPE.project,\n            label: t(I18nKey.CONVERSATION$OVERVIEW_SCOPE_PROJECT),\n          },\n          {\n            value: CONVERSATION_OVERVIEW_PROJECT_SCOPE.all,\n            label: t(I18nKey.CONVERSATION$OVERVIEW_SCOPE_ALL),\n          },\n        ]}\n      />\n    </div>\n  );\n}\n"],"mappings":"sUAcA,SAAgB,EAAuC,CACrD,QACA,WACA,UAC8C,CAC9C,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAExC,OACE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,oEACb,EAAA,EAAA,KAAC,EAAA,gBAAD,CACS,QACG,WACV,UAAW,EAAE,EAAA,QAAQ,kCAAkC,EAC/C,SACR,QAAS,CACP,CACE,MAAO,EAAA,oCAAoC,QAC3C,MAAO,EAAE,EAAA,QAAQ,mCAAmC,CACtD,EACA,CACE,MAAO,EAAA,oCAAoC,IAC3C,MAAO,EAAE,EAAA,QAAQ,+BAA+B,CAClD,CACF,CACD,CAAA,CACE,CAAA,CAET"}

package/dist/components/features/conversation/conversation-overview-project-scope-toggle.d.ts

@@ -0,0 +1,8 @@
+import { type ConversationOverviewProjectScope } from "#/utils/conversation-overview-project-scope";
+interface ConversationOverviewProjectScopeToggleProps {
+    value: ConversationOverviewProjectScope;
+    onChange: (value: ConversationOverviewProjectScope) => void;
+    testId: string;
+}
+export declare function ConversationOverviewProjectScopeToggle({ value, onChange, testId, }: ConversationOverviewProjectScopeToggleProps): import("react").JSX.Element;
+export {};

package/dist/components/features/conversation/conversation-overview-project-scope-toggle.js

@@ -0,0 +1,29 @@
+import { useTranslation as e } from "../../../node_modules/react-i18next/dist/es/useTranslation.js";
+import { I18nKey as t } from "../../../i18n/declaration.js";
+import { CONVERSATION_OVERVIEW_PROJECT_SCOPE as n } from "../../../utils/conversation-overview-project-scope.js";
+import { SegmentedToggle as r } from "../files-tab/segmented-toggle.js";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/features/conversation/conversation-overview-project-scope-toggle.tsx
+function a({ value: a, onChange: o, testId: s }) {
+	let { t: c } = e("openhands");
+	return /* @__PURE__ */ i("div", {
+		className: "flex w-full justify-center [&>[role=radiogroup]]:w-full",
+		children: /* @__PURE__ */ i(r, {
+			value: a,
+			onChange: o,
+			ariaLabel: c(t.CONVERSATION$OVERVIEW_SCOPE_FILTER),
+			testId: s,
+			options: [{
+				value: n.project,
+				label: c(t.CONVERSATION$OVERVIEW_SCOPE_PROJECT)
+			}, {
+				value: n.all,
+				label: c(t.CONVERSATION$OVERVIEW_SCOPE_ALL)
+			}]
+		})
+	});
+}
+//#endregion
+export { a as ConversationOverviewProjectScopeToggle };
+
+//# sourceMappingURL=conversation-overview-project-scope-toggle.js.map

package/dist/components/features/conversation/conversation-overview-project-scope-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"conversation-overview-project-scope-toggle.js","names":[],"sources":["../../../../src/components/features/conversation/conversation-overview-project-scope-toggle.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { SegmentedToggle } from \"#/components/features/files-tab/segmented-toggle\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport {\n  CONVERSATION_OVERVIEW_PROJECT_SCOPE,\n  type ConversationOverviewProjectScope,\n} from \"#/utils/conversation-overview-project-scope\";\n\ninterface ConversationOverviewProjectScopeToggleProps {\n  value: ConversationOverviewProjectScope;\n  onChange: (value: ConversationOverviewProjectScope) => void;\n  testId: string;\n}\n\nexport function ConversationOverviewProjectScopeToggle({\n  value,\n  onChange,\n  testId,\n}: ConversationOverviewProjectScopeToggleProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  return (\n    <div className=\"flex w-full justify-center [&>[role=radiogroup]]:w-full\">\n      <SegmentedToggle<ConversationOverviewProjectScope>\n        value={value}\n        onChange={onChange}\n        ariaLabel={t(I18nKey.CONVERSATION$OVERVIEW_SCOPE_FILTER)}\n        testId={testId}\n        options={[\n          {\n            value: CONVERSATION_OVERVIEW_PROJECT_SCOPE.project,\n            label: t(I18nKey.CONVERSATION$OVERVIEW_SCOPE_PROJECT),\n          },\n          {\n            value: CONVERSATION_OVERVIEW_PROJECT_SCOPE.all,\n            label: t(I18nKey.CONVERSATION$OVERVIEW_SCOPE_ALL),\n          },\n        ]}\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAcA,SAAgB,EAAuC,EACrD,UACA,aACA,aAC8C;CAC9C,IAAM,EAAE,SAAM,EAAe,WAAW;CAExC,OACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,GAAD;GACS;GACG;GACV,WAAW,EAAE,EAAQ,kCAAkC;GAC/C;GACR,SAAS,CACP;IACE,OAAO,EAAoC;IAC3C,OAAO,EAAE,EAAQ,mCAAmC;GACtD,GACA;IACE,OAAO,EAAoC;IAC3C,OAAO,EAAE,EAAQ,+BAA+B;GAClD,CACF;EACD,CAAA;CACE,CAAA;AAET"}

package/dist/components/features/conversation/conversation-overview-secrets-panel.cjs

@@ -0,0 +1,2 @@
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),n=require("../../../i18n/declaration.cjs"),r=require("../../../node_modules/lucide-react/dist/esm/icons/trash-2.cjs"),i=require("../../../utils/utils.cjs"),a=require("../../../node_modules/@tanstack/react-query/build/modern/QueryClientProvider.cjs"),o=require("./conversation-overview-drawer-context.cjs"),s=require("../../../utils/extension-module-card-classes.cjs"),c=require("../../shared/modals/confirmation-modal.cjs"),l=require("../../../hooks/query/use-get-secrets.cjs"),u=require("../../../hooks/mutation/use-delete-secret.cjs"),d=require("../settings/secrets-settings/secret-form.cjs");let f=require("react");f=e.__toESM(f,1);let p=require("react/jsx-runtime");function m({openAdd:e}){let m=a.useQueryClient(),{t:h}=t.useTranslation(`openhands`),g=o.useConversationOverviewDrawerOptional()?.addRequestKey??0,{data:_,isLoading:v}=l.useSearchSecrets(),{mutate:y,isPending:b}=u.useDeleteSecret(),[x,S]=(0,f.useState)(`list`),[C,w]=(0,f.useState)(null);(0,f.useEffect)(()=>{e&&S(`add-secret-form`)},[e]),(0,f.useEffect)(()=>{g!==0&&S(`add-secret-form`)},[g]);let T=()=>{m.invalidateQueries({queryKey:[`secrets-search`]}),m.invalidateQueries({queryKey:[`secrets`]})};return x===`add-secret-form`?(0,p.jsx)(`div`,{"data-testid":`conversation-overview-secrets-add-form`,className:`flex h-full min-h-0 flex-col overflow-y-auto p-4`,children:(0,p.jsx)(d.SecretForm,{mode:`add`,selectedSecret:null,onCancel:()=>S(`list`)})}):(0,p.jsxs)(`div`,{"data-testid":`conversation-overview-secrets-panel`,className:`flex h-full min-h-0 flex-col`,children:[(0,p.jsx)(`div`,{className:`min-h-0 flex-1 overflow-y-auto px-2 py-2`,children:v?(0,p.jsx)(`p`,{className:`px-2 py-4 text-sm text-[var(--oh-muted)]`,children:h(n.I18nKey.HOME$LOADING)}):_&&_.length>0?(0,p.jsx)(`ul`,{className:`flex flex-col gap-0.5`,children:_.map(e=>(0,p.jsxs)(`li`,{"data-testid":`conversation-overview-secret-item`,className:`group flex items-center gap-2 rounded-md px-2 py-2 hover:bg-white/5`,children:[(0,p.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,p.jsx)(`p`,{className:`truncate text-sm text-[var(--oh-foreground)]`,children:e.name}),e.description?(0,p.jsx)(`p`,{className:`truncate text-xs text-[var(--oh-muted)]`,children:e.description}):null]}),(0,p.jsx)(`button`,{type:`button`,"data-testid":`conversation-overview-secret-delete-${e.name}`,"aria-label":h(n.I18nKey.BUTTON$DELETE),onClick:()=>w(e.name),className:i.cn(`shrink-0 rounded-md p-1 text-[var(--oh-muted)]`,`opacity-0 transition-opacity group-hover:opacity-100`,`hover:bg-white/10 hover:text-[var(--oh-foreground)]`),children:(0,p.jsx)(r.Trash2,{className:`size-3.5`,"aria-hidden":!0})})]},e.name))}):(0,p.jsx)(`p`,{"data-testid":`conversation-overview-secrets-empty`,className:i.cn(s.extensionModuleEmptyStateClassName,`px-2 py-6 text-center text-sm`),children:h(n.I18nKey.SECRETS$EMPTY)})}),C?(0,p.jsx)(c.ConfirmationModal,{text:h(n.I18nKey.SECRETS$CONFIRM_DELETE_KEY),isConfirming:b,onCancel:()=>w(null),onConfirm:()=>{y(C,{onSettled:()=>w(null),onSuccess:T,onError:T})}}):null]})}exports.ConversationOverviewSecretsPanel=m;
+//# sourceMappingURL=conversation-overview-secrets-panel.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"conversation-overview-secrets-panel.cjs","names":[],"sources":["../../../../src/components/features/conversation/conversation-overview-secrets-panel.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { useQueryClient } from \"@tanstack/react-query\";\nimport { Trash2 } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useSearchSecrets } from \"#/hooks/query/use-get-secrets\";\nimport { useDeleteSecret } from \"#/hooks/mutation/use-delete-secret\";\nimport { SecretForm } from \"#/components/features/settings/secrets-settings/secret-form\";\nimport { ConfirmationModal } from \"#/components/shared/modals/confirmation-modal\";\nimport { cn } from \"#/utils/utils\";\nimport { extensionModuleEmptyStateClassName } from \"#/utils/extension-module-card-classes\";\nimport { useConversationOverviewDrawerOptional } from \"./conversation-overview-drawer-context\";\n\ninterface ConversationOverviewSecretsPanelProps {\n  openAdd: boolean;\n}\n\nexport function ConversationOverviewSecretsPanel({\n  openAdd,\n}: ConversationOverviewSecretsPanelProps) {\n  const queryClient = useQueryClient();\n  const { t } = useTranslation(\"openhands\");\n  const addRequestKey =\n    useConversationOverviewDrawerOptional()?.addRequestKey ?? 0;\n\n  const { data: secrets, isLoading } = useSearchSecrets();\n  const { mutate: deleteSecret, isPending: isDeleting } = useDeleteSecret();\n\n  const [view, setView] = useState<\"list\" | \"add-secret-form\">(\"list\");\n  const [secretToDelete, setSecretToDelete] = useState<string | null>(null);\n\n  useEffect(() => {\n    if (!openAdd) {\n      return;\n    }\n    setView(\"add-secret-form\");\n  }, [openAdd]);\n\n  useEffect(() => {\n    if (addRequestKey === 0) {\n      return;\n    }\n    setView(\"add-secret-form\");\n  }, [addRequestKey]);\n\n  const invalidateSecrets = () => {\n    queryClient.invalidateQueries({ queryKey: [\"secrets-search\"] });\n    queryClient.invalidateQueries({ queryKey: [\"secrets\"] });\n  };\n\n  if (view === \"add-secret-form\") {\n    return (\n      <div\n        data-testid=\"conversation-overview-secrets-add-form\"\n        className=\"flex h-full min-h-0 flex-col overflow-y-auto p-4\"\n      >\n        <SecretForm\n          mode=\"add\"\n          selectedSecret={null}\n          onCancel={() => setView(\"list\")}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div\n      data-testid=\"conversation-overview-secrets-panel\"\n      className=\"flex h-full min-h-0 flex-col\"\n    >\n      <div className=\"min-h-0 flex-1 overflow-y-auto px-2 py-2\">\n        {isLoading ? (\n          <p className=\"px-2 py-4 text-sm text-[var(--oh-muted)]\">\n            {t(I18nKey.HOME$LOADING)}\n          </p>\n        ) : secrets && secrets.length > 0 ? (\n          <ul className=\"flex flex-col gap-0.5\">\n            {secrets.map((secret) => (\n              <li\n                key={secret.name}\n                data-testid=\"conversation-overview-secret-item\"\n                className=\"group flex items-center gap-2 rounded-md px-2 py-2 hover:bg-white/5\"\n              >\n                <div className=\"min-w-0 flex-1\">\n                  <p className=\"truncate text-sm text-[var(--oh-foreground)]\">\n                    {secret.name}\n                  </p>\n                  {secret.description ? (\n                    <p className=\"truncate text-xs text-[var(--oh-muted)]\">\n                      {secret.description}\n                    </p>\n                  ) : null}\n                </div>\n                <button\n                  type=\"button\"\n                  data-testid={`conversation-overview-secret-delete-${secret.name}`}\n                  aria-label={t(I18nKey.BUTTON$DELETE)}\n                  onClick={() => setSecretToDelete(secret.name)}\n                  className={cn(\n                    \"shrink-0 rounded-md p-1 text-[var(--oh-muted)]\",\n                    \"opacity-0 transition-opacity group-hover:opacity-100\",\n                    \"hover:bg-white/10 hover:text-[var(--oh-foreground)]\",\n                  )}\n                >\n                  <Trash2 className=\"size-3.5\" aria-hidden />\n                </button>\n              </li>\n            ))}\n          </ul>\n        ) : (\n          <p\n            data-testid=\"conversation-overview-secrets-empty\"\n            className={cn(\n              extensionModuleEmptyStateClassName,\n              \"px-2 py-6 text-center text-sm\",\n            )}\n          >\n            {t(I18nKey.SECRETS$EMPTY)}\n          </p>\n        )}\n      </div>\n\n      {secretToDelete ? (\n        <ConfirmationModal\n          text={t(I18nKey.SECRETS$CONFIRM_DELETE_KEY)}\n          isConfirming={isDeleting}\n          onCancel={() => setSecretToDelete(null)}\n          onConfirm={() => {\n            deleteSecret(secretToDelete, {\n              onSettled: () => setSecretToDelete(null),\n              onSuccess: invalidateSecrets,\n              onError: invalidateSecrets,\n            });\n          }}\n        />\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"qyBAiBA,SAAgB,EAAiC,CAC/C,WACwC,CACxC,IAAM,EAAc,EAAA,eAAe,EAC7B,CAAE,KAAM,EAAA,eAAe,WAAW,EAClC,EACJ,EAAA,sCAAsC,GAAG,eAAiB,EAEtD,CAAE,KAAM,EAAS,aAAc,EAAA,iBAAiB,EAChD,CAAE,OAAQ,EAAc,UAAW,GAAe,EAAA,gBAAgB,EAElE,CAAC,EAAM,IAAA,EAAA,EAAA,UAAgD,MAAM,EAC7D,CAAC,EAAgB,IAAA,EAAA,EAAA,UAA6C,IAAI,GAExE,EAAA,EAAA,eAAgB,CACT,GAGL,EAAQ,iBAAiB,CAC3B,EAAG,CAAC,CAAO,CAAC,GAEZ,EAAA,EAAA,eAAgB,CACV,IAAkB,GAGtB,EAAQ,iBAAiB,CAC3B,EAAG,CAAC,CAAa,CAAC,EAElB,IAAM,MAA0B,CAC9B,EAAY,kBAAkB,CAAE,SAAU,CAAC,gBAAgB,CAAE,CAAC,EAC9D,EAAY,kBAAkB,CAAE,SAAU,CAAC,SAAS,CAAE,CAAC,CACzD,EAiBA,OAfI,IAAS,mBAET,EAAA,EAAA,KAAC,MAAD,CACE,cAAY,yCACZ,UAAU,6DAEV,EAAA,EAAA,KAAC,EAAA,WAAD,CACE,KAAK,MACL,eAAgB,KAChB,aAAgB,EAAQ,MAAM,CAC/B,CAAA,CACE,CAAA,GAKP,EAAA,EAAA,MAAC,MAAD,CACE,cAAY,sCACZ,UAAU,wCAFZ,EAIE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,oDACZ,GACC,EAAA,EAAA,KAAC,IAAD,CAAG,UAAU,oDACV,EAAE,EAAA,QAAQ,YAAY,CACtB,CAAA,EACD,GAAW,EAAQ,OAAS,GAC9B,EAAA,EAAA,KAAC,KAAD,CAAI,UAAU,iCACX,EAAQ,IAAK,IACZ,EAAA,EAAA,MAAC,KAAD,CAEE,cAAY,oCACZ,UAAU,+EAHZ,EAKE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,0BAAf,EACE,EAAA,EAAA,KAAC,IAAD,CAAG,UAAU,wDACV,EAAO,IACP,CAAA,EACF,EAAO,aACN,EAAA,EAAA,KAAC,IAAD,CAAG,UAAU,mDACV,EAAO,WACP,CAAA,EACD,IACD,KACL,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,cAAa,uCAAuC,EAAO,OAC3D,aAAY,EAAE,EAAA,QAAQ,aAAa,EACnC,YAAe,EAAkB,EAAO,IAAI,EAC5C,UAAW,EAAA,GACT,iDACA,uDACA,qDACF,YAEA,EAAA,EAAA,KAAC,EAAA,OAAD,CAAQ,UAAU,WAAW,cAAA,EAAa,CAAA,CACpC,CAAA,CACN,GA3BG,EAAO,IA2BV,CACL,CACC,CAAA,GAEJ,EAAA,EAAA,KAAC,IAAD,CACE,cAAY,sCACZ,UAAW,EAAA,GACT,EAAA,mCACA,+BACF,WAEC,EAAE,EAAA,QAAQ,aAAa,CACvB,CAAA,CAEF,CAAA,EAEJ,GACC,EAAA,EAAA,KAAC,EAAA,kBAAD,CACE,KAAM,EAAE,EAAA,QAAQ,0BAA0B,EAC1C,aAAc,EACd,aAAgB,EAAkB,IAAI,EACtC,cAAiB,CACf,EAAa,EAAgB,CAC3B,cAAiB,EAAkB,IAAI,EACvC,UAAW,EACX,QAAS,CACX,CAAC,CACH,CACD,CAAA,EACC,IACD,GAET"}

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

@@ -0,0 +1,6 @@
+import React from "react";
+interface ConversationOverviewSecretsPanelProps {
+    openAdd: boolean;
+}
+export declare function ConversationOverviewSecretsPanel({ openAdd, }: ConversationOverviewSecretsPanelProps): React.JSX.Element;
+export {};

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

@@ -0,0 +1,89 @@
+import { useTranslation as e } from "../../../node_modules/react-i18next/dist/es/useTranslation.js";
+import { I18nKey as t } from "../../../i18n/declaration.js";
+import { Trash2 as n } from "../../../node_modules/lucide-react/dist/esm/icons/trash-2.js";
+import { cn as r } from "../../../utils/utils.js";
+import { useQueryClient as i } from "../../../node_modules/@tanstack/react-query/build/modern/QueryClientProvider.js";
+import { useConversationOverviewDrawerOptional as a } from "./conversation-overview-drawer-context.js";
+import { extensionModuleEmptyStateClassName as o } from "../../../utils/extension-module-card-classes.js";
+import { ConfirmationModal as s } from "../../shared/modals/confirmation-modal.js";
+import { useSearchSecrets as c } from "../../../hooks/query/use-get-secrets.js";
+import { useDeleteSecret as l } from "../../../hooks/mutation/use-delete-secret.js";
+import { SecretForm as u } from "../settings/secrets-settings/secret-form.js";
+import { useEffect as d, useState as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/features/conversation/conversation-overview-secrets-panel.tsx
+function h({ openAdd: h }) {
+	let g = i(), { t: _ } = e("openhands"), v = a()?.addRequestKey ?? 0, { data: y, isLoading: b } = c(), { mutate: x, isPending: S } = l(), [C, w] = f("list"), [T, E] = f(null);
+	d(() => {
+		h && w("add-secret-form");
+	}, [h]), d(() => {
+		v !== 0 && w("add-secret-form");
+	}, [v]);
+	let D = () => {
+		g.invalidateQueries({ queryKey: ["secrets-search"] }), g.invalidateQueries({ queryKey: ["secrets"] });
+	};
+	return C === "add-secret-form" ? /* @__PURE__ */ p("div", {
+		"data-testid": "conversation-overview-secrets-add-form",
+		className: "flex h-full min-h-0 flex-col overflow-y-auto p-4",
+		children: /* @__PURE__ */ p(u, {
+			mode: "add",
+			selectedSecret: null,
+			onCancel: () => w("list")
+		})
+	}) : /* @__PURE__ */ m("div", {
+		"data-testid": "conversation-overview-secrets-panel",
+		className: "flex h-full min-h-0 flex-col",
+		children: [/* @__PURE__ */ p("div", {
+			className: "min-h-0 flex-1 overflow-y-auto px-2 py-2",
+			children: b ? /* @__PURE__ */ p("p", {
+				className: "px-2 py-4 text-sm text-[var(--oh-muted)]",
+				children: _(t.HOME$LOADING)
+			}) : y && y.length > 0 ? /* @__PURE__ */ p("ul", {
+				className: "flex flex-col gap-0.5",
+				children: y.map((e) => /* @__PURE__ */ m("li", {
+					"data-testid": "conversation-overview-secret-item",
+					className: "group flex items-center gap-2 rounded-md px-2 py-2 hover:bg-white/5",
+					children: [/* @__PURE__ */ m("div", {
+						className: "min-w-0 flex-1",
+						children: [/* @__PURE__ */ p("p", {
+							className: "truncate text-sm text-[var(--oh-foreground)]",
+							children: e.name
+						}), e.description ? /* @__PURE__ */ p("p", {
+							className: "truncate text-xs text-[var(--oh-muted)]",
+							children: e.description
+						}) : null]
+					}), /* @__PURE__ */ p("button", {
+						type: "button",
+						"data-testid": `conversation-overview-secret-delete-${e.name}`,
+						"aria-label": _(t.BUTTON$DELETE),
+						onClick: () => E(e.name),
+						className: r("shrink-0 rounded-md p-1 text-[var(--oh-muted)]", "opacity-0 transition-opacity group-hover:opacity-100", "hover:bg-white/10 hover:text-[var(--oh-foreground)]"),
+						children: /* @__PURE__ */ p(n, {
+							className: "size-3.5",
+							"aria-hidden": !0
+						})
+					})]
+				}, e.name))
+			}) : /* @__PURE__ */ p("p", {
+				"data-testid": "conversation-overview-secrets-empty",
+				className: r(o, "px-2 py-6 text-center text-sm"),
+				children: _(t.SECRETS$EMPTY)
+			})
+		}), T ? /* @__PURE__ */ p(s, {
+			text: _(t.SECRETS$CONFIRM_DELETE_KEY),
+			isConfirming: S,
+			onCancel: () => E(null),
+			onConfirm: () => {
+				x(T, {
+					onSettled: () => E(null),
+					onSuccess: D,
+					onError: D
+				});
+			}
+		}) : null]
+	});
+}
+//#endregion
+export { h as ConversationOverviewSecretsPanel };
+
+//# sourceMappingURL=conversation-overview-secrets-panel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"conversation-overview-secrets-panel.js","names":[],"sources":["../../../../src/components/features/conversation/conversation-overview-secrets-panel.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { useQueryClient } from \"@tanstack/react-query\";\nimport { Trash2 } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useSearchSecrets } from \"#/hooks/query/use-get-secrets\";\nimport { useDeleteSecret } from \"#/hooks/mutation/use-delete-secret\";\nimport { SecretForm } from \"#/components/features/settings/secrets-settings/secret-form\";\nimport { ConfirmationModal } from \"#/components/shared/modals/confirmation-modal\";\nimport { cn } from \"#/utils/utils\";\nimport { extensionModuleEmptyStateClassName } from \"#/utils/extension-module-card-classes\";\nimport { useConversationOverviewDrawerOptional } from \"./conversation-overview-drawer-context\";\n\ninterface ConversationOverviewSecretsPanelProps {\n  openAdd: boolean;\n}\n\nexport function ConversationOverviewSecretsPanel({\n  openAdd,\n}: ConversationOverviewSecretsPanelProps) {\n  const queryClient = useQueryClient();\n  const { t } = useTranslation(\"openhands\");\n  const addRequestKey =\n    useConversationOverviewDrawerOptional()?.addRequestKey ?? 0;\n\n  const { data: secrets, isLoading } = useSearchSecrets();\n  const { mutate: deleteSecret, isPending: isDeleting } = useDeleteSecret();\n\n  const [view, setView] = useState<\"list\" | \"add-secret-form\">(\"list\");\n  const [secretToDelete, setSecretToDelete] = useState<string | null>(null);\n\n  useEffect(() => {\n    if (!openAdd) {\n      return;\n    }\n    setView(\"add-secret-form\");\n  }, [openAdd]);\n\n  useEffect(() => {\n    if (addRequestKey === 0) {\n      return;\n    }\n    setView(\"add-secret-form\");\n  }, [addRequestKey]);\n\n  const invalidateSecrets = () => {\n    queryClient.invalidateQueries({ queryKey: [\"secrets-search\"] });\n    queryClient.invalidateQueries({ queryKey: [\"secrets\"] });\n  };\n\n  if (view === \"add-secret-form\") {\n    return (\n      <div\n        data-testid=\"conversation-overview-secrets-add-form\"\n        className=\"flex h-full min-h-0 flex-col overflow-y-auto p-4\"\n      >\n        <SecretForm\n          mode=\"add\"\n          selectedSecret={null}\n          onCancel={() => setView(\"list\")}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div\n      data-testid=\"conversation-overview-secrets-panel\"\n      className=\"flex h-full min-h-0 flex-col\"\n    >\n      <div className=\"min-h-0 flex-1 overflow-y-auto px-2 py-2\">\n        {isLoading ? (\n          <p className=\"px-2 py-4 text-sm text-[var(--oh-muted)]\">\n            {t(I18nKey.HOME$LOADING)}\n          </p>\n        ) : secrets && secrets.length > 0 ? (\n          <ul className=\"flex flex-col gap-0.5\">\n            {secrets.map((secret) => (\n              <li\n                key={secret.name}\n                data-testid=\"conversation-overview-secret-item\"\n                className=\"group flex items-center gap-2 rounded-md px-2 py-2 hover:bg-white/5\"\n              >\n                <div className=\"min-w-0 flex-1\">\n                  <p className=\"truncate text-sm text-[var(--oh-foreground)]\">\n                    {secret.name}\n                  </p>\n                  {secret.description ? (\n                    <p className=\"truncate text-xs text-[var(--oh-muted)]\">\n                      {secret.description}\n                    </p>\n                  ) : null}\n                </div>\n                <button\n                  type=\"button\"\n                  data-testid={`conversation-overview-secret-delete-${secret.name}`}\n                  aria-label={t(I18nKey.BUTTON$DELETE)}\n                  onClick={() => setSecretToDelete(secret.name)}\n                  className={cn(\n                    \"shrink-0 rounded-md p-1 text-[var(--oh-muted)]\",\n                    \"opacity-0 transition-opacity group-hover:opacity-100\",\n                    \"hover:bg-white/10 hover:text-[var(--oh-foreground)]\",\n                  )}\n                >\n                  <Trash2 className=\"size-3.5\" aria-hidden />\n                </button>\n              </li>\n            ))}\n          </ul>\n        ) : (\n          <p\n            data-testid=\"conversation-overview-secrets-empty\"\n            className={cn(\n              extensionModuleEmptyStateClassName,\n              \"px-2 py-6 text-center text-sm\",\n            )}\n          >\n            {t(I18nKey.SECRETS$EMPTY)}\n          </p>\n        )}\n      </div>\n\n      {secretToDelete ? (\n        <ConfirmationModal\n          text={t(I18nKey.SECRETS$CONFIRM_DELETE_KEY)}\n          isConfirming={isDeleting}\n          onCancel={() => setSecretToDelete(null)}\n          onConfirm={() => {\n            deleteSecret(secretToDelete, {\n              onSettled: () => setSecretToDelete(null),\n              onSuccess: invalidateSecrets,\n              onError: invalidateSecrets,\n            });\n          }}\n        />\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAiBA,SAAgB,EAAiC,EAC/C,cACwC;CACxC,IAAM,IAAc,EAAe,GAC7B,EAAE,SAAM,EAAe,WAAW,GAClC,IACJ,EAAsC,GAAG,iBAAiB,GAEtD,EAAE,MAAM,GAAS,iBAAc,EAAiB,GAChD,EAAE,QAAQ,GAAc,WAAW,MAAe,EAAgB,GAElE,CAAC,GAAM,KAAW,EAAqC,MAAM,GAC7D,CAAC,GAAgB,KAAqB,EAAwB,IAAI;CASxE,AAPA,QAAgB;EACT,KAGL,EAAQ,iBAAiB;CAC3B,GAAG,CAAC,CAAO,CAAC,GAEZ,QAAgB;EACV,MAAkB,KAGtB,EAAQ,iBAAiB;CAC3B,GAAG,CAAC,CAAa,CAAC;CAElB,IAAM,UAA0B;EAE9B,AADA,EAAY,kBAAkB,EAAE,UAAU,CAAC,gBAAgB,EAAE,CAAC,GAC9D,EAAY,kBAAkB,EAAE,UAAU,CAAC,SAAS,EAAE,CAAC;CACzD;CAiBA,OAfI,MAAS,oBAET,kBAAC,OAAD;EACE,eAAY;EACZ,WAAU;YAEV,kBAAC,GAAD;GACE,MAAK;GACL,gBAAgB;GAChB,gBAAgB,EAAQ,MAAM;EAC/B,CAAA;CACE,CAAA,IAKP,kBAAC,OAAD;EACE,eAAY;EACZ,WAAU;YAFZ,CAIE,kBAAC,OAAD;GAAK,WAAU;aACZ,IACC,kBAAC,KAAD;IAAG,WAAU;cACV,EAAE,EAAQ,YAAY;GACtB,CAAA,IACD,KAAW,EAAQ,SAAS,IAC9B,kBAAC,MAAD;IAAI,WAAU;cACX,EAAQ,KAAK,MACZ,kBAAC,MAAD;KAEE,eAAY;KACZ,WAAU;eAHZ,CAKE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,KAAD;OAAG,WAAU;iBACV,EAAO;MACP,CAAA,GACF,EAAO,cACN,kBAAC,KAAD;OAAG,WAAU;iBACV,EAAO;MACP,CAAA,IACD,IACD;SACL,kBAAC,UAAD;MACE,MAAK;MACL,eAAa,uCAAuC,EAAO;MAC3D,cAAY,EAAE,EAAQ,aAAa;MACnC,eAAe,EAAkB,EAAO,IAAI;MAC5C,WAAW,EACT,kDACA,wDACA,qDACF;gBAEA,kBAAC,GAAD;OAAQ,WAAU;OAAW,eAAA;MAAa,CAAA;KACpC,CAAA,CACN;OA3BG,EAAO,IA2BV,CACL;GACC,CAAA,IAEJ,kBAAC,KAAD;IACE,eAAY;IACZ,WAAW,EACT,GACA,+BACF;cAEC,EAAE,EAAQ,aAAa;GACvB,CAAA;EAEF,CAAA,GAEJ,IACC,kBAAC,GAAD;GACE,MAAM,EAAE,EAAQ,0BAA0B;GAC1C,cAAc;GACd,gBAAgB,EAAkB,IAAI;GACtC,iBAAiB;IACf,EAAa,GAAgB;KAC3B,iBAAiB,EAAkB,IAAI;KACvC,WAAW;KACX,SAAS;IACX,CAAC;GACH;EACD,CAAA,IACC,IACD;;AAET"}

package/dist/components/features/conversation/conversation-overview-sections.cjs

@@ -0,0 +1,2 @@
+require("../../../_virtual/_rolldown/runtime.cjs");var e={workspace:`workspace`,git:`git`},t=[e.workspace,e.git],n=new Set(t),r={changes:`changes`,repository:`repository`,branch:`branch`,commits:`commits`,pull_requests:`pull_requests`},i=[r.changes,r.repository,r.branch,r.commits,r.pull_requests],a=new Set(i),o=[],s=[],c=[{sections:[e.workspace]}];function l(e,t){return!t.includes(e)}function u(e,t){return!t.includes(e)}exports.CONVERSATION_OVERVIEW_GIT_PART=r,exports.CONVERSATION_OVERVIEW_SECTION=e,exports.CONVERSATION_OVERVIEW_SECTION_GROUPS=c,exports.DEFAULT_UNPINNED_OVERVIEW_GIT_PARTS=s,exports.DEFAULT_UNPINNED_OVERVIEW_SECTIONS=o,exports.VALID_CONVERSATION_OVERVIEW_GIT_PARTS=a,exports.VALID_CONVERSATION_OVERVIEW_SECTIONS=n,exports.isOverviewGitPartPinned=u,exports.isOverviewSectionPinned=l;
+//# sourceMappingURL=conversation-overview-sections.cjs.map

package/dist/components/features/conversation/conversation-overview-sections.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"conversation-overview-sections.cjs","names":[],"sources":["../../../../src/components/features/conversation/conversation-overview-sections.ts"],"sourcesContent":["/**\n * Pinable rows in the conversation overview panel.\n * Persistence uses the inverse denylist `unpinnedOverviewSections`\n * (empty = all pinned), matching drawer tab pin semantics.\n *\n * Git is a pinable parent section with its own sub-part denylist\n * (`unpinnedOverviewGitParts`), including Changes.\n */\nexport const CONVERSATION_OVERVIEW_SECTION = {\n  workspace: \"workspace\",\n  git: \"git\",\n} as const;\n\nexport type ConversationOverviewSection =\n  (typeof CONVERSATION_OVERVIEW_SECTION)[keyof typeof CONVERSATION_OVERVIEW_SECTION];\n\nexport const CONVERSATION_OVERVIEW_SECTIONS: readonly ConversationOverviewSection[] =\n  [CONVERSATION_OVERVIEW_SECTION.workspace, CONVERSATION_OVERVIEW_SECTION.git];\n\nexport const VALID_CONVERSATION_OVERVIEW_SECTIONS: ReadonlySet<string> =\n  new Set(CONVERSATION_OVERVIEW_SECTIONS);\n\n/**\n * Sub-rows inside the git overview block. Controlled independently via\n * `unpinnedOverviewGitParts` when the parent git section is pinned.\n * Changes lives here (not as a top-level overview section).\n */\nexport const CONVERSATION_OVERVIEW_GIT_PART = {\n  changes: \"changes\",\n  repository: \"repository\",\n  branch: \"branch\",\n  commits: \"commits\",\n  pull_requests: \"pull_requests\",\n} as const;\n\nexport type ConversationOverviewGitPart =\n  (typeof CONVERSATION_OVERVIEW_GIT_PART)[keyof typeof CONVERSATION_OVERVIEW_GIT_PART];\n\nexport const CONVERSATION_OVERVIEW_GIT_PARTS: readonly ConversationOverviewGitPart[] =\n  [\n    CONVERSATION_OVERVIEW_GIT_PART.changes,\n    CONVERSATION_OVERVIEW_GIT_PART.repository,\n    CONVERSATION_OVERVIEW_GIT_PART.branch,\n    CONVERSATION_OVERVIEW_GIT_PART.commits,\n    CONVERSATION_OVERVIEW_GIT_PART.pull_requests,\n  ];\n\nexport const VALID_CONVERSATION_OVERVIEW_GIT_PARTS: ReadonlySet<string> =\n  new Set(CONVERSATION_OVERVIEW_GIT_PARTS);\n\n/** No overview sections are hidden by default. */\nexport const DEFAULT_UNPINNED_OVERVIEW_SECTIONS: readonly ConversationOverviewSection[] =\n  [];\n\nexport const DEFAULT_UNPINNED_OVERVIEW_GIT_PARTS: readonly ConversationOverviewGitPart[] =\n  [];\n\n/**\n * Visual groups in the panel. Dividers render between non-empty groups.\n * Workspace stands alone below the untitled Git block (Changes + metadata)\n * that the panel prepends when pinned.\n */\nexport const CONVERSATION_OVERVIEW_SECTION_GROUPS: readonly {\n  sections: readonly ConversationOverviewSection[];\n}[] = [\n  {\n    sections: [CONVERSATION_OVERVIEW_SECTION.workspace],\n  },\n];\n\nexport function isOverviewSectionPinned(\n  section: ConversationOverviewSection,\n  unpinnedOverviewSections: readonly string[],\n): boolean {\n  return !unpinnedOverviewSections.includes(section);\n}\n\nexport function isOverviewGitPartPinned(\n  part: ConversationOverviewGitPart,\n  unpinnedOverviewGitParts: readonly string[],\n): boolean {\n  return !unpinnedOverviewGitParts.includes(part);\n}\n"],"mappings":"mDAQA,IAAa,EAAgC,CAC3C,UAAW,YACX,IAAK,KACP,EAKa,EACX,CAAC,EAA8B,UAAW,EAA8B,GAAG,EAEhE,EACX,IAAI,IAAI,CAA8B,EAO3B,EAAiC,CAC5C,QAAS,UACT,WAAY,aACZ,OAAQ,SACR,QAAS,UACT,cAAe,eACjB,EAKa,EACX,CACE,EAA+B,QAC/B,EAA+B,WAC/B,EAA+B,OAC/B,EAA+B,QAC/B,EAA+B,aACjC,EAEW,EACX,IAAI,IAAI,CAA+B,EAG5B,EACX,CAAC,EAEU,EACX,CAAC,EAOU,EAEP,CACJ,CACE,SAAU,CAAC,EAA8B,SAAS,CACpD,CACF,EAEA,SAAgB,EACd,EACA,EACS,CACT,MAAO,CAAC,EAAyB,SAAS,CAAO,CACnD,CAEA,SAAgB,EACd,EACA,EACS,CACT,MAAO,CAAC,EAAyB,SAAS,CAAI,CAChD"}

package/dist/components/features/conversation/conversation-overview-sections.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Pinable rows in the conversation overview panel.
+ * Persistence uses the inverse denylist `unpinnedOverviewSections`
+ * (empty = all pinned), matching drawer tab pin semantics.
+ *
+ * Git is a pinable parent section with its own sub-part denylist
+ * (`unpinnedOverviewGitParts`), including Changes.
+ */
+export declare const CONVERSATION_OVERVIEW_SECTION: {
+    readonly workspace: "workspace";
+    readonly git: "git";
+};
+export type ConversationOverviewSection = (typeof CONVERSATION_OVERVIEW_SECTION)[keyof typeof CONVERSATION_OVERVIEW_SECTION];
+export declare const CONVERSATION_OVERVIEW_SECTIONS: readonly ConversationOverviewSection[];
+export declare const VALID_CONVERSATION_OVERVIEW_SECTIONS: ReadonlySet<string>;
+/**
+ * Sub-rows inside the git overview block. Controlled independently via
+ * `unpinnedOverviewGitParts` when the parent git section is pinned.
+ * Changes lives here (not as a top-level overview section).
+ */
+export declare const CONVERSATION_OVERVIEW_GIT_PART: {
+    readonly changes: "changes";
+    readonly repository: "repository";
+    readonly branch: "branch";
+    readonly commits: "commits";
+    readonly pull_requests: "pull_requests";
+};
+export type ConversationOverviewGitPart = (typeof CONVERSATION_OVERVIEW_GIT_PART)[keyof typeof CONVERSATION_OVERVIEW_GIT_PART];
+export declare const CONVERSATION_OVERVIEW_GIT_PARTS: readonly ConversationOverviewGitPart[];
+export declare const VALID_CONVERSATION_OVERVIEW_GIT_PARTS: ReadonlySet<string>;
+/** No overview sections are hidden by default. */
+export declare const DEFAULT_UNPINNED_OVERVIEW_SECTIONS: readonly ConversationOverviewSection[];
+export declare const DEFAULT_UNPINNED_OVERVIEW_GIT_PARTS: readonly ConversationOverviewGitPart[];
+/**
+ * Visual groups in the panel. Dividers render between non-empty groups.
+ * Workspace stands alone below the untitled Git block (Changes + metadata)
+ * that the panel prepends when pinned.
+ */
+export declare const CONVERSATION_OVERVIEW_SECTION_GROUPS: readonly {
+    sections: readonly ConversationOverviewSection[];
+}[];
+export declare function isOverviewSectionPinned(section: ConversationOverviewSection, unpinnedOverviewSections: readonly string[]): boolean;
+export declare function isOverviewGitPartPinned(part: ConversationOverviewGitPart, unpinnedOverviewGitParts: readonly string[]): boolean;

package/dist/components/features/conversation/conversation-overview-sections.js

@@ -0,0 +1,27 @@
+//#region src/components/features/conversation/conversation-overview-sections.ts
+var e = {
+	workspace: "workspace",
+	git: "git"
+}, t = [e.workspace, e.git], n = new Set(t), r = {
+	changes: "changes",
+	repository: "repository",
+	branch: "branch",
+	commits: "commits",
+	pull_requests: "pull_requests"
+}, i = [
+	r.changes,
+	r.repository,
+	r.branch,
+	r.commits,
+	r.pull_requests
+], a = new Set(i), o = [], s = [], c = [{ sections: [e.workspace] }];
+function l(e, t) {
+	return !t.includes(e);
+}
+function u(e, t) {
+	return !t.includes(e);
+}
+//#endregion
+export { r as CONVERSATION_OVERVIEW_GIT_PART, e as CONVERSATION_OVERVIEW_SECTION, c as CONVERSATION_OVERVIEW_SECTION_GROUPS, s as DEFAULT_UNPINNED_OVERVIEW_GIT_PARTS, o as DEFAULT_UNPINNED_OVERVIEW_SECTIONS, a as VALID_CONVERSATION_OVERVIEW_GIT_PARTS, n as VALID_CONVERSATION_OVERVIEW_SECTIONS, u as isOverviewGitPartPinned, l as isOverviewSectionPinned };
+
+//# sourceMappingURL=conversation-overview-sections.js.map

package/dist/components/features/conversation/conversation-overview-sections.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"conversation-overview-sections.js","names":[],"sources":["../../../../src/components/features/conversation/conversation-overview-sections.ts"],"sourcesContent":["/**\n * Pinable rows in the conversation overview panel.\n * Persistence uses the inverse denylist `unpinnedOverviewSections`\n * (empty = all pinned), matching drawer tab pin semantics.\n *\n * Git is a pinable parent section with its own sub-part denylist\n * (`unpinnedOverviewGitParts`), including Changes.\n */\nexport const CONVERSATION_OVERVIEW_SECTION = {\n  workspace: \"workspace\",\n  git: \"git\",\n} as const;\n\nexport type ConversationOverviewSection =\n  (typeof CONVERSATION_OVERVIEW_SECTION)[keyof typeof CONVERSATION_OVERVIEW_SECTION];\n\nexport const CONVERSATION_OVERVIEW_SECTIONS: readonly ConversationOverviewSection[] =\n  [CONVERSATION_OVERVIEW_SECTION.workspace, CONVERSATION_OVERVIEW_SECTION.git];\n\nexport const VALID_CONVERSATION_OVERVIEW_SECTIONS: ReadonlySet<string> =\n  new Set(CONVERSATION_OVERVIEW_SECTIONS);\n\n/**\n * Sub-rows inside the git overview block. Controlled independently via\n * `unpinnedOverviewGitParts` when the parent git section is pinned.\n * Changes lives here (not as a top-level overview section).\n */\nexport const CONVERSATION_OVERVIEW_GIT_PART = {\n  changes: \"changes\",\n  repository: \"repository\",\n  branch: \"branch\",\n  commits: \"commits\",\n  pull_requests: \"pull_requests\",\n} as const;\n\nexport type ConversationOverviewGitPart =\n  (typeof CONVERSATION_OVERVIEW_GIT_PART)[keyof typeof CONVERSATION_OVERVIEW_GIT_PART];\n\nexport const CONVERSATION_OVERVIEW_GIT_PARTS: readonly ConversationOverviewGitPart[] =\n  [\n    CONVERSATION_OVERVIEW_GIT_PART.changes,\n    CONVERSATION_OVERVIEW_GIT_PART.repository,\n    CONVERSATION_OVERVIEW_GIT_PART.branch,\n    CONVERSATION_OVERVIEW_GIT_PART.commits,\n    CONVERSATION_OVERVIEW_GIT_PART.pull_requests,\n  ];\n\nexport const VALID_CONVERSATION_OVERVIEW_GIT_PARTS: ReadonlySet<string> =\n  new Set(CONVERSATION_OVERVIEW_GIT_PARTS);\n\n/** No overview sections are hidden by default. */\nexport const DEFAULT_UNPINNED_OVERVIEW_SECTIONS: readonly ConversationOverviewSection[] =\n  [];\n\nexport const DEFAULT_UNPINNED_OVERVIEW_GIT_PARTS: readonly ConversationOverviewGitPart[] =\n  [];\n\n/**\n * Visual groups in the panel. Dividers render between non-empty groups.\n * Workspace stands alone below the untitled Git block (Changes + metadata)\n * that the panel prepends when pinned.\n */\nexport const CONVERSATION_OVERVIEW_SECTION_GROUPS: readonly {\n  sections: readonly ConversationOverviewSection[];\n}[] = [\n  {\n    sections: [CONVERSATION_OVERVIEW_SECTION.workspace],\n  },\n];\n\nexport function isOverviewSectionPinned(\n  section: ConversationOverviewSection,\n  unpinnedOverviewSections: readonly string[],\n): boolean {\n  return !unpinnedOverviewSections.includes(section);\n}\n\nexport function isOverviewGitPartPinned(\n  part: ConversationOverviewGitPart,\n  unpinnedOverviewGitParts: readonly string[],\n): boolean {\n  return !unpinnedOverviewGitParts.includes(part);\n}\n"],"mappings":";AAQA,IAAa,IAAgC;CAC3C,WAAW;CACX,KAAK;AACP,GAKa,IACX,CAAC,EAA8B,WAAW,EAA8B,GAAG,GAEhE,IACX,IAAI,IAAI,CAA8B,GAO3B,IAAiC;CAC5C,SAAS;CACT,YAAY;CACZ,QAAQ;CACR,SAAS;CACT,eAAe;AACjB,GAKa,IACX;CACE,EAA+B;CAC/B,EAA+B;CAC/B,EAA+B;CAC/B,EAA+B;CAC/B,EAA+B;AACjC,GAEW,IACX,IAAI,IAAI,CAA+B,GAG5B,IACX,CAAC,GAEU,IACX,CAAC,GAOU,IAEP,CACJ,EACE,UAAU,CAAC,EAA8B,SAAS,EACpD,CACF;AAEA,SAAgB,EACd,GACA,GACS;CACT,OAAO,CAAC,EAAyB,SAAS,CAAO;AACnD;AAEA,SAAgB,EACd,GACA,GACS;CACT,OAAO,CAAC,EAAyB,SAAS,CAAI;AAChD"}

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

@@ -0,0 +1,2 @@
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),n=require("../../../i18n/declaration.cjs"),r=require("../../../utils/utils.cjs"),i=require("../../../hooks/query/use-active-conversation.cjs"),a=require("../../../hooks/query/use-conversation-skills.cjs"),o=require("../../../hooks/query/use-settings.cjs"),s=require("../../../hooks/use-skill-enablement.cjs"),c=require("./conversation-overview-drawer-context.cjs"),l=require("../../../utils/extension-module-card-classes.cjs"),u=require("../skills/skill-card.cjs"),d=require("../skills/skill-detail-modal.cjs"),f=require("../skills/add-skill-modal.cjs"),p=require("../skills/skills-toolbar.cjs"),m=require("../skills/skill-filters-modal.cjs"),h=require("../skills/skill-filter.cjs"),g=require("../../../utils/conversation-overview-project-scope.cjs"),_=require("./conversation-overview-project-scope-toggle.cjs");let v=require("react");v=e.__toESM(v,1);let y=require("react/jsx-runtime");function b({openAdd:e}){let{t:b}=t.useTranslation(`openhands`),{isLoading:x}=o.useSettings(),{data:S}=i.useActiveConversation(),{data:C,isLoading:w}=a.useConversationSkills(),{isEnabled:T,setEnabled:E}=s.useSkillEnablement(),D=c.useConversationOverviewDrawerOptional()?.addRequestKey??0,O=S?.selected_workspace??null,[k,A]=(0,v.useState)(g.CONVERSATION_OVERVIEW_PROJECT_SCOPE.project),[j,M]=(0,v.useState)(h.EMPTY_SKILL_FILTER_STATE),[N,P]=(0,v.useState)(!1),[F,I]=(0,v.useState)(null),[L,R]=(0,v.useState)(!1);(0,v.useEffect)(()=>{e&&R(!0)},[e]),(0,v.useEffect)(()=>{D!==0&&R(!0)},[D]);let z=(0,v.useMemo)(()=>{if(!C)return[];let e=g.filterSkillsByProjectScope(C,k,O);return k===g.CONVERSATION_OVERVIEW_PROJECT_SCOPE.all?g.sortSkillsByProjectRelevance(e,O):e},[C,k,O]),B=(0,v.useMemo)(()=>h.applySkillFilters(z,T,j),[z,T,j]);return w||x?(0,y.jsx)(`div`,{"data-testid":`conversation-overview-skills-panel`,className:`text-sm text-muted`,children:`…`}):!C||C.length===0?(0,y.jsxs)(`div`,{"data-testid":`conversation-overview-skills-panel`,className:`flex flex-col gap-4`,children:[(0,y.jsx)(`div`,{"data-testid":`conversation-overview-skills-empty`,className:l.extensionModuleEmptyStateClassName,children:(0,y.jsx)(`p`,{className:`text-sm text-tertiary-light`,children:b(n.I18nKey.SETTINGS$SKILLS_NO_SKILLS)})}),L?(0,y.jsx)(f.AddSkillModal,{onClose:()=>R(!1)}):null]}):(0,y.jsxs)(`div`,{"data-testid":`conversation-overview-skills-panel`,className:`flex flex-col gap-4`,children:[(0,y.jsx)(_.ConversationOverviewProjectScopeToggle,{value:k,onChange:A,testId:`conversation-overview-skills-scope`}),(0,y.jsx)(p.SkillsToolbar,{search:j.query,onSearchChange:e=>M(t=>({...t,query:e})),activeFilterCount:h.countActiveFilters(j),onOpenFilters:()=>P(!0)}),z.length===0?(0,y.jsx)(`div`,{"data-testid":`conversation-overview-skills-project-empty`,className:l.extensionModuleEmptyStateClassName,children:(0,y.jsx)(`p`,{className:`text-sm text-tertiary-light`,children:b(n.I18nKey.CONVERSATION$OVERVIEW_SCOPE_PROJECT_EMPTY_SKILLS)})}):B.length===0?(0,y.jsx)(`div`,{"data-testid":`conversation-overview-skills-no-match`,className:l.extensionModuleEmptyStateClassName,children:(0,y.jsx)(`p`,{className:`text-sm text-tertiary-light`,children:b(n.I18nKey.SETTINGS$SKILLS_NO_MATCH)})}):(0,y.jsx)(`section`,{className:r.cn(`flex min-w-0 flex-col gap-3`,l.extensionModuleCardGridContainerClassName),children:(0,y.jsx)(`div`,{className:r.cn(l.extensionModuleCardGridClassName,`grid-cols-1`),children:B.map(e=>(0,y.jsx)(u.SkillCard,{skill:e,enabled:T(e),onOpen:()=>I(e),onToggle:t=>E(e.name,t)},e.name))})}),F?(0,y.jsx)(d.SkillDetailModal,{skill:F,enabled:T(F),onToggle:e=>E(F.name,e),onClose:()=>I(null)}):null,L?(0,y.jsx)(f.AddSkillModal,{onClose:()=>R(!1)}):null,N?(0,y.jsx)(m.SkillFiltersModal,{groups:h.buildSkillFacetGroups(z,T,j),activeCount:h.countActiveFilters(j),onToggle:(e,t)=>M(n=>h.toggleSkillFilterValue(n,e,t)),onClearAll:()=>M(e=>h.clearSkillFilterFacets(e)),onClose:()=>P(!1)}):null]})}exports.ConversationOverviewSkillsPanel=b;
+//# sourceMappingURL=conversation-overview-skills-panel.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"conversation-overview-skills-panel.cjs","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":"+/BAyCA,SAAgB,EAAgC,CAC9C,WACuC,CACvC,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAClC,CAAE,UAAW,GAAoB,EAAA,YAAY,EAC7C,CAAE,KAAM,GAAiB,EAAA,sBAAsB,EAC/C,CAAE,KAAM,EAAQ,UAAW,GAAkB,EAAA,sBAAsB,EACnE,CAAE,YAAW,cAAe,EAAA,mBAAmB,EAC/C,EACJ,EAAA,sCAAsC,GAAG,eAAiB,EACtD,EAAa,GAAc,oBAAsB,KAEjD,CAAC,EAAc,IAAA,EAAA,EAAA,UAEjB,EAAA,oCAAoC,OACtC,EACI,CAAC,EAAQ,IAAA,EAAA,EAAA,UACb,EAAA,wBACF,EACM,CAAC,EAAoB,IAAA,EAAA,EAAA,UAAkC,EAAK,EAC5D,CAAC,EAAe,IAAA,EAAA,EAAA,UAA+C,IAAI,EACnE,CAAC,EAAmB,IAAA,EAAA,EAAA,UAAiC,EAAK,GAEhE,EAAA,EAAA,eAAgB,CACT,GAGL,EAAqB,EAAI,CAC3B,EAAG,CAAC,CAAO,CAAC,GAEZ,EAAA,EAAA,eAAgB,CACV,IAAkB,GAGtB,EAAqB,EAAI,CAC3B,EAAG,CAAC,CAAa,CAAC,EAElB,IAAM,GAAA,EAAA,EAAA,aAA6B,CACjC,GAAI,CAAC,EACH,MAAO,CAAC,EAEV,IAAM,EAAW,EAAA,2BACf,EACA,EACA,CACF,EACA,OAAO,IAAiB,EAAA,oCAAoC,IACxD,EAAA,6BAA6B,EAAU,CAAU,EACjD,CACN,EAAG,CAAC,EAAQ,EAAc,CAAU,CAAC,EAE/B,GAAA,EAAA,EAAA,aACE,EAAA,kBAAkB,EAAc,EAAW,CAAM,EACvD,CAAC,EAAc,EAAW,CAAM,CAClC,EAkCA,OAhCI,GAAiB,GAEjB,EAAA,EAAA,KAAC,MAAD,CACE,cAAY,qCACZ,UAAU,8BACX,GAEI,CAAA,EAIL,CAAC,GAAU,EAAO,SAAW,GAE7B,EAAA,EAAA,MAAC,MAAD,CACE,cAAY,qCACZ,UAAU,+BAFZ,EAIE,EAAA,EAAA,KAAC,MAAD,CACE,cAAY,qCACZ,UAAW,EAAA,6CAEX,EAAA,EAAA,KAAC,IAAD,CAAG,UAAU,uCACV,EAAE,EAAA,QAAQ,yBAAyB,CACnC,CAAA,CACA,CAAA,EACJ,GACC,EAAA,EAAA,KAAC,EAAA,cAAD,CAAe,YAAe,EAAqB,EAAK,CAAI,CAAA,EAC1D,IACD,KAKP,EAAA,EAAA,MAAC,MAAD,CACE,cAAY,qCACZ,UAAU,+BAFZ,EAIE,EAAA,EAAA,KAAC,EAAA,uCAAD,CACE,MAAO,EACP,SAAU,EACV,OAAO,oCACR,CAAA,GACD,EAAA,EAAA,KAAC,EAAA,cAAD,CACE,OAAQ,EAAO,MACf,eAAiB,GACf,EAAW,IAAc,CAAE,GAAG,EAAU,OAAM,EAAE,EAElD,kBAAmB,EAAA,mBAAmB,CAAM,EAC5C,kBAAqB,EAAsB,EAAI,CAChD,CAAA,EAEA,EAAa,SAAW,GACvB,EAAA,EAAA,KAAC,MAAD,CACE,cAAY,6CACZ,UAAW,EAAA,6CAEX,EAAA,EAAA,KAAC,IAAD,CAAG,UAAU,uCACV,EAAE,EAAA,QAAQ,gDAAgD,CAC1D,CAAA,CACA,CAAA,EACH,EAAe,SAAW,GAC5B,EAAA,EAAA,KAAC,MAAD,CACE,cAAY,wCACZ,UAAW,EAAA,6CAEX,EAAA,EAAA,KAAC,IAAD,CAAG,UAAU,uCACV,EAAE,EAAA,QAAQ,wBAAwB,CAClC,CAAA,CACA,CAAA,GAEL,EAAA,EAAA,KAAC,UAAD,CACE,UAAW,EAAA,GACT,8BACA,EAAA,yCACF,YAEA,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,GAAG,EAAA,iCAAkC,aAAa,WAC/D,EAAe,IAAK,IACnB,EAAA,EAAA,KAAC,EAAA,UAAD,CAES,QACP,QAAS,EAAU,CAAK,EACxB,WAAc,EAAiB,CAAK,EACpC,SAAW,GAAY,EAAW,EAAM,KAAM,CAAO,CACtD,EALM,EAAM,IAKZ,CACF,CACE,CAAA,CACE,CAAA,EAGV,GACC,EAAA,EAAA,KAAC,EAAA,iBAAD,CACE,MAAO,EACP,QAAS,EAAU,CAAa,EAChC,SAAW,GAAY,EAAW,EAAc,KAAM,CAAO,EAC7D,YAAe,EAAiB,IAAI,CACrC,CAAA,EACC,KAEH,GACC,EAAA,EAAA,KAAC,EAAA,cAAD,CAAe,YAAe,EAAqB,EAAK,CAAI,CAAA,EAC1D,KAEH,GACC,EAAA,EAAA,KAAC,EAAA,kBAAD,CACE,OAAQ,EAAA,sBAAsB,EAAc,EAAW,CAAM,EAC7D,YAAa,EAAA,mBAAmB,CAAM,EACtC,UAAW,EAAS,IAClB,EAAW,GACT,EAAA,uBAAuB,EAAU,EAAS,CAAK,CACjD,EAEF,eACE,EAAW,GAAa,EAAA,uBAAuB,CAAQ,CAAC,EAE1D,YAAe,EAAsB,EAAK,CAC3C,CAAA,EACC,IACD,GAET"}

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

@@ -0,0 +1,6 @@
+import React from "react";
+interface ConversationOverviewSkillsPanelProps {
+    openAdd: boolean;
+}
+export declare function ConversationOverviewSkillsPanel({ openAdd, }: ConversationOverviewSkillsPanelProps): React.JSX.Element;
+export {};

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

@@ -0,0 +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 { 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 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;
+	}, [
+		F,
+		V,
+		B
+	]), Q = D(() => _(Z, L, U), [
+		Z,
+		L,
+		U
+	]);
+	return I || N ? /* @__PURE__ */ k("div", {
+		"data-testid": "conversation-overview-skills-panel",
+		className: "text-sm text-muted",
+		children: "…"
+	}) : !F || F.length === 0 ? /* @__PURE__ */ A("div", {
+		"data-testid": "conversation-overview-skills-panel",
+		className: "flex flex-col gap-4",
+		children: [/* @__PURE__ */ k("div", {
+			"data-testid": "conversation-overview-skills-empty",
+			className: u,
+			children: /* @__PURE__ */ k("p", {
+				className: "text-sm text-tertiary-light",
+				children: M(t.SETTINGS$SKILLS_NO_SKILLS)
+			})
+		}), 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__ */ k(T, {
+				value: V,
+				onChange: H,
+				testId: "conversation-overview-skills-scope"
+			}),
+			/* @__PURE__ */ k(m, {
+				search: U.query,
+				onSearchChange: (e) => W((t) => ({
+					...t,
+					query: e
+				})),
+				activeFilterCount: b(U),
+				onOpenFilters: () => K(!0)
+			}),
+			Z.length === 0 ? /* @__PURE__ */ k("div", {
+				"data-testid": "conversation-overview-skills-project-empty",
+				className: u,
+				children: /* @__PURE__ */ k("p", {
+					className: "text-sm text-tertiary-light",
+					children: M(t.CONVERSATION$OVERVIEW_SCOPE_PROJECT_EMPTY_SKILLS)
+				})
+			}) : Q.length === 0 ? /* @__PURE__ */ k("div", {
+				"data-testid": "conversation-overview-skills-no-match",
+				className: u,
+				children: /* @__PURE__ */ k("p", {
+					className: "text-sm text-tertiary-light",
+					children: M(t.SETTINGS$SKILLS_NO_MATCH)
+				})
+			}) : /* @__PURE__ */ k("section", {
+				className: n("flex min-w-0 flex-col gap-3", l),
+				children: /* @__PURE__ */ k("div", {
+					className: n(c, "grid-cols-1"),
+					children: Q.map((e) => /* @__PURE__ */ k(d, {
+						skill: e,
+						enabled: L(e),
+						onOpen: () => J(e),
+						onToggle: (t) => R(e.name, t)
+					}, e.name))
+				})
+			}),
+			q ? /* @__PURE__ */ k(f, {
+				skill: q,
+				enabled: L(q),
+				onToggle: (e) => R(q.name, e),
+				onClose: () => J(null)
+			}) : null,
+			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 { j as ConversationOverviewSkillsPanel };
+
+//# sourceMappingURL=conversation-overview-skills-panel.js.map