@openhands/agent-canvas 1.10.0 → 1.12.0

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

@@ -1,110 +1,127 @@
 import { useTranslation as e } from "../../../../node_modules/react-i18next/dist/es/useTranslation.js";
 import { I18nKey as t } from "../../../../i18n/declaration.js";
 import { Folder as n } from "../../../../node_modules/lucide-react/dist/esm/icons/folder.js";
-import { FaCodeBranch as r } from "../../../../node_modules/react-icons/fa/index.js";
-import { FaBitbucket as i, FaGithub as a, FaGitlab as o } from "../../../../node_modules/react-icons/fa6/index.js";
-import s from "../../../../assets/branding/azure-devops-logo.js";
-import { ConversationStatusDot as c } from "../conversation-status-dot.js";
-import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { resolveAcpProviderIcon as r } from "../../../../constants/acp-providers.js";
+import { getDisplayConversationTags as i } from "../../../../api/agent-server-adapter.js";
+import { FaCodeBranch as a } from "../../../../node_modules/react-icons/fa/index.js";
+import { FaBitbucket as o, FaGithub as s, FaGitlab as c } from "../../../../node_modules/react-icons/fa6/index.js";
+import l from "../../../../assets/branding/azure-devops-logo.js";
+import { ConversationStatusDot as u } from "../conversation-status-dot.js";
+import { AgentBrandIcon as d } from "../../../shared/agent-brand-icon.js";
+import { getConversationTagLabel as f } from "./conversation-tag-display.js";
+import { getConversationTagIcon as p } from "./conversation-tag-icons.js";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region src/components/features/conversation-panel/conversation-card/conversation-card-preview.tsx
-var f = {
-	bitbucket: i,
-	bitbucket_data_center: i,
-	github: a,
-	gitlab: o
+var _ = {
+	bitbucket: o,
+	bitbucket_data_center: o,
+	github: s,
+	gitlab: c
 };
-function p({ label: e, children: t }) {
-	return /* @__PURE__ */ d("div", {
-		className: "flex items-start gap-2 text-xs",
-		children: [/* @__PURE__ */ u("span", {
-			className: "w-20 shrink-0 text-[var(--oh-muted)]",
+function v({ label: e, children: t }) {
+	return /* @__PURE__ */ g("div", {
+		className: "flex items-start gap-2 text-xs leading-4",
+		children: [/* @__PURE__ */ h("span", {
+			className: "w-20 shrink-0 whitespace-normal break-words text-[var(--oh-muted)]",
 			children: e
-		}), /* @__PURE__ */ u("span", {
-			className: "min-w-0 flex-1 break-words text-[var(--oh-foreground)]",
+		}), /* @__PURE__ */ h("span", {
+			className: "min-w-0 flex-1 overflow-visible whitespace-normal break-words text-[var(--oh-foreground)]",
 			children: t
 		})]
 	});
 }
-function m({ title: i, executionStatus: a, sandboxStatus: o, selectedRepository: m, workspaceWorkingDir: h, llmModel: g, createdAt: _ }) {
-	let { t: v } = e("openhands"), y = m?.selected_repository ?? null, b = m?.selected_branch ?? null, x = m?.git_provider ?? null, S = x ? f[x] : null, C = _ ? new Date(_).toLocaleString(void 0, {
+function y({ icon: e, children: t, testId: n, tagKey: r }) {
+	return /* @__PURE__ */ g("span", {
+		"data-testid": n,
+		"data-tag-key": r,
+		className: "inline-flex min-w-0 max-w-full items-start gap-1.5",
+		children: [e ? /* @__PURE__ */ h("span", {
+			className: "inline-flex h-4 min-w-3 shrink-0 items-center justify-center [&_svg]:block",
+			children: e
+		}) : null, /* @__PURE__ */ h("span", {
+			className: "min-w-0 flex-1 whitespace-normal break-all",
+			children: t
+		})]
+	});
+}
+function b({ title: o, executionStatus: s, sandboxStatus: c, selectedRepository: b, workspaceWorkingDir: x, llmModel: S, agentKind: C = null, acpServer: w = null, createdAt: T, tags: E = null }) {
+	let { t: D } = e("openhands"), O = b?.selected_repository ?? null, k = b?.selected_branch ?? null, A = b?.git_provider ?? null, j = A ? _[A] : null, M = T ? new Date(T).toLocaleString(void 0, {
 		dateStyle: "medium",
 		timeStyle: "short"
-	}) : null;
-	return /* @__PURE__ */ d("div", {
-		className: "flex w-[280px] flex-col gap-3 p-3",
-		children: [/* @__PURE__ */ d("div", {
+	}) : null, N = i(E);
+	return /* @__PURE__ */ g("div", {
+		"data-testid": "conversation-card-preview",
+		className: "flex w-[280px] max-w-[min(280px,90vw)] flex-col gap-3 overflow-visible p-3",
+		children: [/* @__PURE__ */ g("div", {
 			className: "flex items-start gap-2",
-			children: [a === void 0 ? null : /* @__PURE__ */ u("div", {
-				className: "mt-0.5",
-				children: /* @__PURE__ */ u(c, {
-					executionStatus: a,
-					sandboxStatus: o,
+			children: [s === void 0 ? null : /* @__PURE__ */ h("span", {
+				className: "inline-flex h-5 w-2.5 shrink-0 items-center justify-center",
+				children: /* @__PURE__ */ h(u, {
+					executionStatus: s,
+					sandboxStatus: c,
 					showTooltip: !1
 				})
-			}), /* @__PURE__ */ u("span", {
-				className: "break-words text-sm font-medium text-white",
-				children: i
+			}), /* @__PURE__ */ h("span", {
+				className: "break-words text-sm font-medium leading-5 text-white",
+				children: o
 			})]
-		}), /* @__PURE__ */ d("dl", {
+		}), /* @__PURE__ */ g("dl", {
 			className: "flex flex-col gap-1.5",
 			children: [
-				y ? /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(p, {
-					label: v(t.CONVERSATION$REPOSITORY),
-					children: /* @__PURE__ */ d("span", {
-						className: "inline-flex min-w-0 items-start gap-1.5",
-						children: [
-							S ? /* @__PURE__ */ u(S, {
-								size: 12,
-								className: "mt-0.5 shrink-0"
-							}) : null,
-							x === "azure_devops" ? /* @__PURE__ */ u(s, { className: "mt-0.5 h-3 w-3 shrink-0" }) : null,
-							/* @__PURE__ */ u("span", {
-								className: "break-all",
-								children: y
-							})
-						]
+				O ? /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(v, {
+					label: D(t.CONVERSATION_PANEL$PREVIEW_REPO),
+					children: /* @__PURE__ */ h(y, {
+						icon: j ? /* @__PURE__ */ h(j, { size: 12 }) : A === "azure_devops" ? /* @__PURE__ */ h(l, { className: "h-3 w-3" }) : void 0,
+						children: O
 					})
-				}), b ? /* @__PURE__ */ u(p, {
-					label: v(t.CONVERSATION$BRANCH),
-					children: /* @__PURE__ */ d("span", {
-						className: "inline-flex min-w-0 items-start gap-1.5",
-						children: [/* @__PURE__ */ u(r, {
-							size: 11,
-							className: "mt-0.5 shrink-0"
-						}), /* @__PURE__ */ u("span", {
-							className: "break-all",
-							children: b
-						})]
+				}), k ? /* @__PURE__ */ h(v, {
+					label: D(t.CONVERSATION_PANEL$PREVIEW_BRANCH),
+					children: /* @__PURE__ */ h(y, {
+						icon: /* @__PURE__ */ h(a, { size: 11 }),
+						children: k
 					})
-				}) : null] }) : h ? /* @__PURE__ */ u(p, {
-					label: v(t.CONVERSATION_PANEL$PREVIEW_DIRECTORY),
-					children: /* @__PURE__ */ d("span", {
-						className: "inline-flex min-w-0 items-start gap-1.5",
-						children: [/* @__PURE__ */ u(n, {
-							size: 12,
-							className: "mt-0.5 shrink-0"
-						}), /* @__PURE__ */ u("span", {
-							className: "break-all",
-							children: h
-						})]
+				}) : null] }) : x ? /* @__PURE__ */ h(v, {
+					label: D(t.CONVERSATION_PANEL$PREVIEW_DIRECTORY),
+					children: /* @__PURE__ */ h(y, {
+						icon: /* @__PURE__ */ h(n, { size: 12 }),
+						children: x
 					})
 				}) : null,
-				g ? /* @__PURE__ */ u(p, {
-					label: v(t.CONVERSATION_PANEL$PREVIEW_MODEL),
-					children: /* @__PURE__ */ u("span", {
-						className: "break-all",
-						children: g
+				S ? /* @__PURE__ */ h(v, {
+					label: D(t.CONVERSATION_PANEL$PREVIEW_MODEL),
+					children: /* @__PURE__ */ h(y, {
+						testId: "conversation-card-preview-model",
+						icon: /* @__PURE__ */ h(d, {
+							kind: C === "acp" ? r(w) : "openhands",
+							size: 12
+						}),
+						children: S
 					})
 				}) : null,
-				C ? /* @__PURE__ */ u(p, {
-					label: v(t.CONVERSATION$CREATED),
-					children: C
+				N.map(([e, t]) => {
+					let n = p(e, t);
+					return /* @__PURE__ */ h(v, {
+						label: f(e, D),
+						children: /* @__PURE__ */ h(y, {
+							testId: "conversation-card-preview-tag-row",
+							tagKey: e,
+							icon: /* @__PURE__ */ h(n, {
+								"aria-hidden": !0,
+								className: "h-3 w-3"
+							}),
+							children: t
+						})
+					}, e);
+				}),
+				M ? /* @__PURE__ */ h(v, {
+					label: D(t.CONVERSATION$CREATED),
+					children: M
 				}) : null
 			]
 		})]
 	});
 }
 //#endregion
-export { m as ConversationCardPreview };
+export { b as ConversationCardPreview };
 
 //# sourceMappingURL=conversation-card-preview.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"conversation-card-preview.js","names":[],"sources":["../../../../../src/components/features/conversation-panel/conversation-card/conversation-card-preview.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Folder } from \"lucide-react\";\nimport { FaBitbucket, FaGithub, FaGitlab } from \"react-icons/fa6\";\nimport { FaCodeBranch } from \"react-icons/fa\";\nimport type { IconType } from \"react-icons/lib\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport type { RepositorySelection } from \"#/api/open-hands.types\";\nimport type { Provider } from \"#/types/settings\";\nimport type { ExecutionStatus } from \"#/types/agent-server/core/base/common\";\nimport type { SandboxStatus } from \"#/api/conversation-service/agent-server-conversation-service.types\";\nimport AzureDevOpsLogo from \"#/assets/branding/azure-devops-logo.svg?react\";\nimport { ConversationStatusDot } from \"../conversation-status-dot\";\n\ninterface ConversationCardPreviewProps {\n  title: string;\n  executionStatus?: ExecutionStatus | null;\n  sandboxStatus?: SandboxStatus | null;\n  selectedRepository: RepositorySelection | null;\n  workspaceWorkingDir?: string | null;\n  llmModel?: string | null;\n  createdAt?: string;\n}\n\nconst providerIcon: Partial<Record<Provider, IconType>> = {\n  bitbucket: FaBitbucket,\n  bitbucket_data_center: FaBitbucket,\n  github: FaGithub,\n  gitlab: FaGitlab,\n};\n\ninterface PreviewRowProps {\n  label: string;\n  children: ReactNode;\n}\n\nfunction PreviewRow({ label, children }: PreviewRowProps) {\n  return (\n    <div className=\"flex items-start gap-2 text-xs\">\n      <span className=\"w-20 shrink-0 text-[var(--oh-muted)]\">{label}</span>\n      <span className=\"min-w-0 flex-1 break-words text-[var(--oh-foreground)]\">\n        {children}\n      </span>\n    </div>\n  );\n}\n\nexport function ConversationCardPreview({\n  title,\n  executionStatus,\n  sandboxStatus,\n  selectedRepository,\n  workspaceWorkingDir,\n  llmModel,\n  createdAt,\n}: ConversationCardPreviewProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  const repository = selectedRepository?.selected_repository ?? null;\n  const branch = selectedRepository?.selected_branch ?? null;\n  const provider = selectedRepository?.git_provider ?? null;\n  const ProviderIcon = provider ? providerIcon[provider] : null;\n\n  const createdLabel = createdAt\n    ? new Date(createdAt).toLocaleString(undefined, {\n        dateStyle: \"medium\",\n        timeStyle: \"short\",\n      })\n    : null;\n\n  return (\n    <div className=\"flex w-[280px] flex-col gap-3 p-3\">\n      <div className=\"flex items-start gap-2\">\n        {executionStatus !== undefined ? (\n          <div className=\"mt-0.5\">\n            <ConversationStatusDot\n              executionStatus={executionStatus}\n              sandboxStatus={sandboxStatus}\n              showTooltip={false}\n            />\n          </div>\n        ) : null}\n        <span className=\"break-words text-sm font-medium text-white\">\n          {title}\n        </span>\n      </div>\n\n      <dl className=\"flex flex-col gap-1.5\">\n        {repository ? (\n          <>\n            <PreviewRow label={t(I18nKey.CONVERSATION$REPOSITORY)}>\n              <span className=\"inline-flex min-w-0 items-start gap-1.5\">\n                {ProviderIcon ? (\n                  <ProviderIcon size={12} className=\"mt-0.5 shrink-0\" />\n                ) : null}\n                {provider === \"azure_devops\" ? (\n                  <AzureDevOpsLogo className=\"mt-0.5 h-3 w-3 shrink-0\" />\n                ) : null}\n                <span className=\"break-all\">{repository}</span>\n              </span>\n            </PreviewRow>\n            {branch ? (\n              <PreviewRow label={t(I18nKey.CONVERSATION$BRANCH)}>\n                <span className=\"inline-flex min-w-0 items-start gap-1.5\">\n                  <FaCodeBranch size={11} className=\"mt-0.5 shrink-0\" />\n                  <span className=\"break-all\">{branch}</span>\n                </span>\n              </PreviewRow>\n            ) : null}\n          </>\n        ) : workspaceWorkingDir ? (\n          <PreviewRow label={t(I18nKey.CONVERSATION_PANEL$PREVIEW_DIRECTORY)}>\n            <span className=\"inline-flex min-w-0 items-start gap-1.5\">\n              <Folder size={12} className=\"mt-0.5 shrink-0\" />\n              <span className=\"break-all\">{workspaceWorkingDir}</span>\n            </span>\n          </PreviewRow>\n        ) : null}\n\n        {llmModel ? (\n          <PreviewRow label={t(I18nKey.CONVERSATION_PANEL$PREVIEW_MODEL)}>\n            <span className=\"break-all\">{llmModel}</span>\n          </PreviewRow>\n        ) : null}\n\n        {createdLabel ? (\n          <PreviewRow label={t(I18nKey.CONVERSATION$CREATED)}>\n            {createdLabel}\n          </PreviewRow>\n        ) : null}\n      </dl>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AAwBA,IAAM,IAAoD;CACxD,WAAW;CACX,uBAAuB;CACvB,QAAQ;CACR,QAAQ;AACV;AAOA,SAAS,EAAW,EAAE,UAAO,eAA6B;CACxD,OACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,QAAD;GAAM,WAAU;aAAwC;EAAY,CAAA,GACpE,kBAAC,QAAD;GAAM,WAAU;GACb;EACG,CAAA,CACH;;AAET;AAEA,SAAgB,EAAwB,EACtC,UACA,oBACA,kBACA,uBACA,wBACA,aACA,gBAC+B;CAC/B,IAAM,EAAE,SAAM,EAAe,WAAW,GAElC,IAAa,GAAoB,uBAAuB,MACxD,IAAS,GAAoB,mBAAmB,MAChD,IAAW,GAAoB,gBAAgB,MAC/C,IAAe,IAAW,EAAa,KAAY,MAEnD,IAAe,IACjB,IAAI,KAAK,CAAS,EAAE,eAAe,KAAA,GAAW;EAC5C,WAAW;EACX,WAAW;CACb,CAAC,IACD;CAEJ,OACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACG,MAAoB,KAAA,IAQjB,OAPF,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD;KACmB;KACF;KACf,aAAa;IACd,CAAA;GACE,CAAA,GAEP,kBAAC,QAAD;IAAM,WAAU;cACb;GACG,CAAA,CACH;MAEL,kBAAC,MAAD;GAAI,WAAU;aAAd;IACG,IACC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;KAAY,OAAO,EAAE,EAAQ,uBAAuB;eAClD,kBAAC,QAAD;MAAM,WAAU;gBAAhB;OACG,IACC,kBAAC,GAAD;QAAc,MAAM;QAAI,WAAU;OAAmB,CAAA,IACnD;OACH,MAAa,iBACZ,kBAAC,GAAD,EAAiB,WAAU,0BAA2B,CAAA,IACpD;OACJ,kBAAC,QAAD;QAAM,WAAU;kBAAa;OAAiB,CAAA;MAC1C;;IACI,CAAA,GACX,IACC,kBAAC,GAAD;KAAY,OAAO,EAAE,EAAQ,mBAAmB;eAC9C,kBAAC,QAAD;MAAM,WAAU;gBAAhB,CACE,kBAAC,GAAD;OAAc,MAAM;OAAI,WAAU;MAAmB,CAAA,GACrD,kBAAC,QAAD;OAAM,WAAU;iBAAa;MAAa,CAAA,CACtC;;IACI,CAAA,IACV,IACJ,EAAA,CAAA,IACA,IACF,kBAAC,GAAD;KAAY,OAAO,EAAE,EAAQ,oCAAoC;eAC/D,kBAAC,QAAD;MAAM,WAAU;gBAAhB,CACE,kBAAC,GAAD;OAAQ,MAAM;OAAI,WAAU;MAAmB,CAAA,GAC/C,kBAAC,QAAD;OAAM,WAAU;iBAAa;MAA0B,CAAA,CACnD;;IACI,CAAA,IACV;IAEH,IACC,kBAAC,GAAD;KAAY,OAAO,EAAE,EAAQ,gCAAgC;eAC3D,kBAAC,QAAD;MAAM,WAAU;gBAAa;KAAe,CAAA;IAClC,CAAA,IACV;IAEH,IACC,kBAAC,GAAD;KAAY,OAAO,EAAE,EAAQ,oBAAoB;eAC9C;IACS,CAAA,IACV;GACF;IACD;;AAET"}
+{"version":3,"file":"conversation-card-preview.js","names":[],"sources":["../../../../../src/components/features/conversation-panel/conversation-card/conversation-card-preview.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Folder } from \"lucide-react\";\nimport { FaBitbucket, FaGithub, FaGitlab } from \"react-icons/fa6\";\nimport { FaCodeBranch } from \"react-icons/fa\";\nimport type { IconType } from \"react-icons/lib\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport type { RepositorySelection } from \"#/api/open-hands.types\";\nimport type { Provider } from \"#/types/settings\";\nimport type { ExecutionStatus } from \"#/types/agent-server/core/base/common\";\nimport type { SandboxStatus } from \"#/api/conversation-service/agent-server-conversation-service.types\";\nimport { getDisplayConversationTags } from \"#/api/agent-server-adapter\";\nimport { resolveAcpProviderIcon } from \"#/constants/acp-providers\";\nimport AzureDevOpsLogo from \"#/assets/branding/azure-devops-logo.svg?react\";\nimport { AgentBrandIcon } from \"#/components/shared/agent-brand-icon\";\nimport { ConversationStatusDot } from \"../conversation-status-dot\";\nimport { getConversationTagLabel } from \"./conversation-tag-display\";\nimport { getConversationTagIcon } from \"./conversation-tag-icons\";\n\ninterface ConversationCardPreviewProps {\n  title: string;\n  executionStatus?: ExecutionStatus | null;\n  sandboxStatus?: SandboxStatus | null;\n  selectedRepository: RepositorySelection | null;\n  workspaceWorkingDir?: string | null;\n  llmModel?: string | null;\n  /**\n   * High-level kind of the conversation's agent. Drives the model row's brand\n   * mark exactly like the card chip does — without it an ACP conversation\n   * would show the OpenHands wordmark next to a Claude Code / Codex / Gemini\n   * model, contradicting the chip on the very card being hovered.\n   */\n  agentKind?: \"openhands\" | \"acp\" | null;\n  /** Registry key of the ACP CLI server, resolved to its brand mark. */\n  acpServer?: string | null;\n  createdAt?: string;\n  /**\n   * Server-side conversation tags. Always shown in the hovercard when present\n   * (except keys already covered by repository / branch / directory rows).\n   * Sidebar card chips stay gated by the panel's Tags preference.\n   */\n  tags?: Record<string, string> | null;\n}\n\nconst providerIcon: Partial<Record<Provider, IconType>> = {\n  bitbucket: FaBitbucket,\n  bitbucket_data_center: FaBitbucket,\n  github: FaGithub,\n  gitlab: FaGitlab,\n};\n\ninterface PreviewRowProps {\n  label: string;\n  children: ReactNode;\n}\n\nfunction PreviewRow({ label, children }: PreviewRowProps) {\n  return (\n    <div className=\"flex items-start gap-2 text-xs leading-4\">\n      <span className=\"w-20 shrink-0 whitespace-normal break-words text-[var(--oh-muted)]\">\n        {label}\n      </span>\n      <span className=\"min-w-0 flex-1 overflow-visible whitespace-normal break-words text-[var(--oh-foreground)]\">\n        {children}\n      </span>\n    </div>\n  );\n}\n\n/**\n * Icon + value for preview rows. The icon sits in a box matching the first\n * line's height (``leading-4``) so it stays optically centered when the value\n * wraps to multiple lines. The slot has a 12px *minimum* rather than a fixed\n * width so the wider OpenHands wordmark (18px at ``size={12}``) is not clipped,\n * while the square icons still share one column.\n */\nfunction PreviewValueWithIcon({\n  icon,\n  children,\n  testId,\n  tagKey,\n}: {\n  icon?: ReactNode;\n  children: ReactNode;\n  testId?: string;\n  tagKey?: string;\n}) {\n  return (\n    <span\n      data-testid={testId}\n      data-tag-key={tagKey}\n      className=\"inline-flex min-w-0 max-w-full items-start gap-1.5\"\n    >\n      {icon ? (\n        <span className=\"inline-flex h-4 min-w-3 shrink-0 items-center justify-center [&_svg]:block\">\n          {icon}\n        </span>\n      ) : null}\n      <span className=\"min-w-0 flex-1 whitespace-normal break-all\">\n        {children}\n      </span>\n    </span>\n  );\n}\n\nexport function ConversationCardPreview({\n  title,\n  executionStatus,\n  sandboxStatus,\n  selectedRepository,\n  workspaceWorkingDir,\n  llmModel,\n  agentKind = null,\n  acpServer = null,\n  createdAt,\n  tags = null,\n}: ConversationCardPreviewProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  const repository = selectedRepository?.selected_repository ?? null;\n  const branch = selectedRepository?.selected_branch ?? null;\n  const provider = selectedRepository?.git_provider ?? null;\n  const ProviderIcon = provider ? providerIcon[provider] : null;\n\n  const createdLabel = createdAt\n    ? new Date(createdAt).toLocaleString(undefined, {\n        dateStyle: \"medium\",\n        timeStyle: \"short\",\n      })\n    : null;\n\n  const previewTags = getDisplayConversationTags(tags);\n\n  return (\n    <div\n      data-testid=\"conversation-card-preview\"\n      className=\"flex w-[280px] max-w-[min(280px,90vw)] flex-col gap-3 overflow-visible p-3\"\n    >\n      <div className=\"flex items-start gap-2\">\n        {executionStatus !== undefined ? (\n          <span className=\"inline-flex h-5 w-2.5 shrink-0 items-center justify-center\">\n            <ConversationStatusDot\n              executionStatus={executionStatus}\n              sandboxStatus={sandboxStatus}\n              showTooltip={false}\n            />\n          </span>\n        ) : null}\n        <span className=\"break-words text-sm font-medium leading-5 text-white\">\n          {title}\n        </span>\n      </div>\n\n      <dl className=\"flex flex-col gap-1.5\">\n        {repository ? (\n          <>\n            <PreviewRow label={t(I18nKey.CONVERSATION_PANEL$PREVIEW_REPO)}>\n              <PreviewValueWithIcon\n                icon={\n                  ProviderIcon ? (\n                    <ProviderIcon size={12} />\n                  ) : provider === \"azure_devops\" ? (\n                    <AzureDevOpsLogo className=\"h-3 w-3\" />\n                  ) : undefined\n                }\n              >\n                {repository}\n              </PreviewValueWithIcon>\n            </PreviewRow>\n            {branch ? (\n              <PreviewRow label={t(I18nKey.CONVERSATION_PANEL$PREVIEW_BRANCH)}>\n                <PreviewValueWithIcon icon={<FaCodeBranch size={11} />}>\n                  {branch}\n                </PreviewValueWithIcon>\n              </PreviewRow>\n            ) : null}\n          </>\n        ) : workspaceWorkingDir ? (\n          <PreviewRow label={t(I18nKey.CONVERSATION_PANEL$PREVIEW_DIRECTORY)}>\n            <PreviewValueWithIcon icon={<Folder size={12} />}>\n              {workspaceWorkingDir}\n            </PreviewValueWithIcon>\n          </PreviewRow>\n        ) : null}\n\n        {llmModel ? (\n          <PreviewRow label={t(I18nKey.CONVERSATION_PANEL$PREVIEW_MODEL)}>\n            <PreviewValueWithIcon\n              testId=\"conversation-card-preview-model\"\n              icon={\n                <AgentBrandIcon\n                  kind={\n                    agentKind === \"acp\"\n                      ? resolveAcpProviderIcon(acpServer)\n                      : \"openhands\"\n                  }\n                  size={12}\n                />\n              }\n            >\n              {llmModel}\n            </PreviewValueWithIcon>\n          </PreviewRow>\n        ) : null}\n\n        {previewTags.map(([key, value]) => {\n          const Icon = getConversationTagIcon(key, value);\n          const label = getConversationTagLabel(key, t);\n\n          return (\n            <PreviewRow key={key} label={label}>\n              <PreviewValueWithIcon\n                testId=\"conversation-card-preview-tag-row\"\n                tagKey={key}\n                icon={<Icon aria-hidden className=\"h-3 w-3\" />}\n              >\n                {value}\n              </PreviewValueWithIcon>\n            </PreviewRow>\n          );\n        })}\n\n        {createdLabel ? (\n          <PreviewRow label={t(I18nKey.CONVERSATION$CREATED)}>\n            {createdLabel}\n          </PreviewRow>\n        ) : null}\n      </dl>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/features/conversation-panel/conversation-card/conversation-repo-link.cjs

@@ -1,2 +1,2 @@
-require("../../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../../node_modules/react-icons/fa/index.cjs"),t=require("../../../../node_modules/react-icons/fa6/index.cjs"),n=require("../../../../assets/branding/azure-devops-logo.cjs");let r=require("react/jsx-runtime");var i={bitbucket:t.FaBitbucket,bitbucket_data_center:t.FaBitbucket,github:t.FaGithub,gitlab:t.FaGitlab};function a({selectedRepository:t}){let a=t.git_provider?i[t.git_provider]:null;return(0,r.jsxs)(`div`,{className:`flex min-w-0 flex-1 items-center gap-2 overflow-hidden`,children:[(0,r.jsxs)(`div`,{className:`flex min-w-0 items-center gap-1`,children:[a&&(0,r.jsx)(a,{size:14,className:`shrink-0 text-[var(--oh-muted)]`}),t.git_provider===`azure_devops`&&(0,r.jsx)(n.default,{className:`h-[14px] w-[14px] shrink-0 text-[var(--oh-muted)]`}),(0,r.jsx)(`span`,{"data-testid":`conversation-card-selected-repository`,className:`min-w-0 truncate text-xs text-[var(--oh-muted)]`,children:t.selected_repository})]}),(0,r.jsxs)(`div`,{className:`flex min-w-0 items-center gap-1`,children:[(0,r.jsx)(e.FaCodeBranch,{size:12,className:`shrink-0 text-[var(--oh-muted)]`}),(0,r.jsx)(`span`,{"data-testid":`conversation-card-selected-branch`,className:`min-w-0 truncate text-xs text-[var(--oh-muted)]`,children:t.selected_branch})]})]})}exports.ConversationRepoLink=a;
+require("../../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../../utils/utils.cjs"),t=require("../../../../node_modules/react-icons/fa/index.cjs"),n=require("../../../../node_modules/react-icons/fa6/index.cjs"),r=require("../../../../assets/branding/azure-devops-logo.cjs"),i=require("./conversation-card-meta-chip.cjs");let a=require("react/jsx-runtime");var o=e.cn(i.CONVERSATION_CARD_META_CHIP_CLASSNAME,`shrink`),s={bitbucket:n.FaBitbucket,bitbucket_data_center:n.FaBitbucket,github:n.FaGithub,gitlab:n.FaGitlab};function c({selectedRepository:e}){let n=e.git_provider?s[e.git_provider]:null,c=e.selected_repository,l=e.selected_branch;return(0,a.jsxs)(`div`,{className:`flex min-w-0 flex-1 items-center gap-1 overflow-hidden`,children:[c?(0,a.jsxs)(`span`,{"data-testid":`conversation-card-selected-repository`,title:c,className:o,children:[(n||e.git_provider===`azure_devops`)&&(0,a.jsx)(`span`,{className:`inline-flex h-4 w-3 shrink-0 items-center justify-center [&_svg]:block`,"aria-hidden":!0,children:n?(0,a.jsx)(n,{className:`h-3 w-3`}):(0,a.jsx)(r.default,{className:`h-3 w-3`})}),(0,a.jsx)(`span`,{className:`truncate leading-4`,children:c})]}):null,l?(0,a.jsxs)(`span`,{"data-testid":`conversation-card-selected-branch`,title:l,className:o,children:[(0,a.jsx)(`span`,{className:i.CONVERSATION_CARD_META_CHIP_ICON_SLOT_CLASSNAME,"aria-hidden":!0,children:(0,a.jsx)(t.FaCodeBranch,{className:i.CONVERSATION_CARD_META_CHIP_ICON_CLASSNAME})}),(0,a.jsx)(`span`,{className:`truncate leading-4`,children:l})]}):null]})}exports.ConversationRepoLink=c;
 //# sourceMappingURL=conversation-repo-link.cjs.map

package/dist/components/features/conversation-panel/conversation-card/conversation-repo-link.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"conversation-repo-link.cjs","names":[],"sources":["../../../../../src/components/features/conversation-panel/conversation-card/conversation-repo-link.tsx"],"sourcesContent":["import { FaBitbucket, FaGithub, FaGitlab } from \"react-icons/fa6\";\nimport { FaCodeBranch } from \"react-icons/fa\";\nimport { IconType } from \"react-icons/lib\";\nimport { RepositorySelection } from \"#/api/open-hands.types\";\nimport { Provider } from \"#/types/settings\";\nimport AzureDevOpsLogo from \"#/assets/branding/azure-devops-logo.svg?react\";\n\ninterface ConversationRepoLinkProps {\n  selectedRepository: RepositorySelection;\n}\n\nconst providerIcon: Partial<Record<Provider, IconType>> = {\n  bitbucket: FaBitbucket,\n  bitbucket_data_center: FaBitbucket,\n  github: FaGithub,\n  gitlab: FaGitlab,\n};\n\nexport function ConversationRepoLink({\n  selectedRepository,\n}: ConversationRepoLinkProps) {\n  const Icon = selectedRepository.git_provider\n    ? providerIcon[selectedRepository.git_provider]\n    : null;\n\n  return (\n    <div className=\"flex min-w-0 flex-1 items-center gap-2 overflow-hidden\">\n      <div className=\"flex min-w-0 items-center gap-1\">\n        {Icon && <Icon size={14} className=\"shrink-0 text-[var(--oh-muted)]\" />}\n        {selectedRepository.git_provider === \"azure_devops\" && (\n          <AzureDevOpsLogo className=\"h-[14px] w-[14px] shrink-0 text-[var(--oh-muted)]\" />\n        )}\n        <span\n          data-testid=\"conversation-card-selected-repository\"\n          className=\"min-w-0 truncate text-xs text-[var(--oh-muted)]\"\n        >\n          {selectedRepository.selected_repository}\n        </span>\n      </div>\n      <div className=\"flex min-w-0 items-center gap-1\">\n        <FaCodeBranch size={12} className=\"shrink-0 text-[var(--oh-muted)]\" />\n\n        <span\n          data-testid=\"conversation-card-selected-branch\"\n          className=\"min-w-0 truncate text-xs text-[var(--oh-muted)]\"\n        >\n          {selectedRepository.selected_branch}\n        </span>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"6RAWA,IAAM,EAAoD,CACxD,UAAW,EAAA,YACX,sBAAuB,EAAA,YACvB,OAAQ,EAAA,SACR,OAAQ,EAAA,QACV,EAEA,SAAgB,EAAqB,CACnC,sBAC4B,CAC5B,IAAM,EAAO,EAAmB,aAC5B,EAAa,EAAmB,cAChC,KAEJ,OACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,kEAAf,EACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,2CAAf,CACG,IAAQ,EAAA,EAAA,KAAC,EAAD,CAAM,KAAM,GAAI,UAAU,iCAAmC,CAAA,EACrE,EAAmB,eAAiB,iBACnC,EAAA,EAAA,KAAC,EAAA,QAAD,CAAiB,UAAU,mDAAqD,CAAA,GAElF,EAAA,EAAA,KAAC,OAAD,CACE,cAAY,wCACZ,UAAU,2DAET,EAAmB,mBAChB,CAAA,CACH,KACL,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,2CAAf,EACE,EAAA,EAAA,KAAC,EAAA,aAAD,CAAc,KAAM,GAAI,UAAU,iCAAmC,CAAA,GAErE,EAAA,EAAA,KAAC,OAAD,CACE,cAAY,oCACZ,UAAU,2DAET,EAAmB,eAChB,CAAA,CACH,GACF,GAET"}
+{"version":3,"file":"conversation-repo-link.cjs","names":[],"sources":["../../../../../src/components/features/conversation-panel/conversation-card/conversation-repo-link.tsx"],"sourcesContent":["import { FaBitbucket, FaGithub, FaGitlab } from \"react-icons/fa6\";\nimport { FaCodeBranch } from \"react-icons/fa\";\nimport { IconType } from \"react-icons/lib\";\nimport { RepositorySelection } from \"#/api/open-hands.types\";\nimport { Provider } from \"#/types/settings\";\nimport AzureDevOpsLogo from \"#/assets/branding/azure-devops-logo.svg?react\";\nimport { cn } from \"#/utils/utils\";\nimport {\n  CONVERSATION_CARD_META_CHIP_CLASSNAME,\n  CONVERSATION_CARD_META_CHIP_ICON_CLASSNAME,\n  CONVERSATION_CARD_META_CHIP_ICON_SLOT_CLASSNAME,\n} from \"./conversation-card-meta-chip\";\n\n/**\n * Repo and branch share one ``overflow-hidden`` row, so unlike the standalone\n * chips they must be allowed to shrink: with the shared class's ``shrink-0``\n * a long repository name claims the full row and pushes the branch chip out of\n * view entirely. Shrinking lets both stay visible and truncate proportionally.\n */\nconst REPO_LINK_CHIP_CLASSNAME = cn(\n  CONVERSATION_CARD_META_CHIP_CLASSNAME,\n  \"shrink\",\n);\n\ninterface ConversationRepoLinkProps {\n  selectedRepository: RepositorySelection;\n}\n\nconst providerIcon: Partial<Record<Provider, IconType>> = {\n  bitbucket: FaBitbucket,\n  bitbucket_data_center: FaBitbucket,\n  github: FaGithub,\n  gitlab: FaGitlab,\n};\n\nexport function ConversationRepoLink({\n  selectedRepository,\n}: ConversationRepoLinkProps) {\n  const Icon = selectedRepository.git_provider\n    ? providerIcon[selectedRepository.git_provider]\n    : null;\n  const repository = selectedRepository.selected_repository;\n  const branch = selectedRepository.selected_branch;\n\n  return (\n    <div className=\"flex min-w-0 flex-1 items-center gap-1 overflow-hidden\">\n      {repository ? (\n        <span\n          data-testid=\"conversation-card-selected-repository\"\n          title={repository}\n          className={REPO_LINK_CHIP_CLASSNAME}\n        >\n          {(Icon || selectedRepository.git_provider === \"azure_devops\") && (\n            <span\n              className={CONVERSATION_CARD_META_CHIP_ICON_SLOT_CLASSNAME}\n              aria-hidden\n            >\n              {Icon ? (\n                <Icon className={CONVERSATION_CARD_META_CHIP_ICON_CLASSNAME} />\n              ) : (\n                <AzureDevOpsLogo\n                  className={CONVERSATION_CARD_META_CHIP_ICON_CLASSNAME}\n                />\n              )}\n            </span>\n          )}\n          <span className=\"truncate leading-4\">{repository}</span>\n        </span>\n      ) : null}\n      {branch ? (\n        <span\n          data-testid=\"conversation-card-selected-branch\"\n          title={branch}\n          className={REPO_LINK_CHIP_CLASSNAME}\n        >\n          <span\n            className={CONVERSATION_CARD_META_CHIP_ICON_SLOT_CLASSNAME}\n            aria-hidden\n          >\n            <FaCodeBranch\n              className={CONVERSATION_CARD_META_CHIP_ICON_CLASSNAME}\n            />\n          </span>\n          <span className=\"truncate leading-4\">{branch}</span>\n        </span>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"qXAmBA,IAAM,EAA2B,EAAA,GAC/B,EAAA,sCACA,QACF,EAMM,EAAoD,CACxD,UAAW,EAAA,YACX,sBAAuB,EAAA,YACvB,OAAQ,EAAA,SACR,OAAQ,EAAA,QACV,EAEA,SAAgB,EAAqB,CACnC,sBAC4B,CAC5B,IAAM,EAAO,EAAmB,aAC5B,EAAa,EAAmB,cAChC,KACE,EAAa,EAAmB,oBAChC,EAAS,EAAmB,gBAElC,OACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,kEAAf,CACG,GACC,EAAA,EAAA,MAAC,OAAD,CACE,cAAY,wCACZ,MAAO,EACP,UAAW,WAHb,EAKI,GAAQ,EAAmB,eAAiB,kBAC5C,EAAA,EAAA,KAAC,OAAD,CACE,UAAA,yEACA,cAAA,YAEC,GACC,EAAA,EAAA,KAAC,EAAD,CAAM,UAAA,SAAwD,CAAA,GAE9D,EAAA,EAAA,KAAC,EAAA,QAAD,CACE,UAAA,SACD,CAAA,CAEC,CAAA,GAER,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,8BAAsB,CAAiB,CAAA,CACnD,IACJ,KACH,GACC,EAAA,EAAA,MAAC,OAAD,CACE,cAAY,oCACZ,MAAO,EACP,UAAW,WAHb,EAKE,EAAA,EAAA,KAAC,OAAD,CACE,UAAW,EAAA,gDACX,cAAA,aAEA,EAAA,EAAA,KAAC,EAAA,aAAD,CACE,UAAW,EAAA,0CACZ,CAAA,CACG,CAAA,GACN,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,8BAAsB,CAAa,CAAA,CAC/C,IACJ,IACD,GAET"}

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

@@ -1,46 +1,48 @@
-import { FaCodeBranch as e } from "../../../../node_modules/react-icons/fa/index.js";
-import { FaBitbucket as t, FaGithub as n, FaGitlab as r } from "../../../../node_modules/react-icons/fa6/index.js";
-import i from "../../../../assets/branding/azure-devops-logo.js";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { cn as e } from "../../../../utils/utils.js";
+import { FaCodeBranch as t } from "../../../../node_modules/react-icons/fa/index.js";
+import { FaBitbucket as n, FaGithub as r, FaGitlab as i } from "../../../../node_modules/react-icons/fa6/index.js";
+import a from "../../../../assets/branding/azure-devops-logo.js";
+import { CONVERSATION_CARD_META_CHIP_CLASSNAME as o, CONVERSATION_CARD_META_CHIP_ICON_CLASSNAME as s, CONVERSATION_CARD_META_CHIP_ICON_SLOT_CLASSNAME as c } from "./conversation-card-meta-chip.js";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/features/conversation-panel/conversation-card/conversation-repo-link.tsx
-var s = {
-	bitbucket: t,
-	bitbucket_data_center: t,
-	github: n,
-	gitlab: r
+var d = e(o, "shrink"), f = {
+	bitbucket: n,
+	bitbucket_data_center: n,
+	github: r,
+	gitlab: i
 };
-function c({ selectedRepository: t }) {
-	let n = t.git_provider ? s[t.git_provider] : null;
-	return /* @__PURE__ */ o("div", {
-		className: "flex min-w-0 flex-1 items-center gap-2 overflow-hidden",
-		children: [/* @__PURE__ */ o("div", {
-			className: "flex min-w-0 items-center gap-1",
-			children: [
-				n && /* @__PURE__ */ a(n, {
-					size: 14,
-					className: "shrink-0 text-[var(--oh-muted)]"
-				}),
-				t.git_provider === "azure_devops" && /* @__PURE__ */ a(i, { className: "h-[14px] w-[14px] shrink-0 text-[var(--oh-muted)]" }),
-				/* @__PURE__ */ a("span", {
-					"data-testid": "conversation-card-selected-repository",
-					className: "min-w-0 truncate text-xs text-[var(--oh-muted)]",
-					children: t.selected_repository
-				})
-			]
-		}), /* @__PURE__ */ o("div", {
-			className: "flex min-w-0 items-center gap-1",
-			children: [/* @__PURE__ */ a(e, {
-				size: 12,
-				className: "shrink-0 text-[var(--oh-muted)]"
-			}), /* @__PURE__ */ a("span", {
-				"data-testid": "conversation-card-selected-branch",
-				className: "min-w-0 truncate text-xs text-[var(--oh-muted)]",
-				children: t.selected_branch
+function p({ selectedRepository: e }) {
+	let n = e.git_provider ? f[e.git_provider] : null, r = e.selected_repository, i = e.selected_branch;
+	return /* @__PURE__ */ u("div", {
+		className: "flex min-w-0 flex-1 items-center gap-1 overflow-hidden",
+		children: [r ? /* @__PURE__ */ u("span", {
+			"data-testid": "conversation-card-selected-repository",
+			title: r,
+			className: d,
+			children: [(n || e.git_provider === "azure_devops") && /* @__PURE__ */ l("span", {
+				className: "inline-flex h-4 w-3 shrink-0 items-center justify-center [&_svg]:block",
+				"aria-hidden": !0,
+				children: l(n || a, { className: "h-3 w-3" })
+			}), /* @__PURE__ */ l("span", {
+				className: "truncate leading-4",
+				children: r
 			})]
-		})]
+		}) : null, i ? /* @__PURE__ */ u("span", {
+			"data-testid": "conversation-card-selected-branch",
+			title: i,
+			className: d,
+			children: [/* @__PURE__ */ l("span", {
+				className: c,
+				"aria-hidden": !0,
+				children: /* @__PURE__ */ l(t, { className: s })
+			}), /* @__PURE__ */ l("span", {
+				className: "truncate leading-4",
+				children: i
+			})]
+		}) : null]
 	});
 }
 //#endregion
-export { c as ConversationRepoLink };
+export { p as ConversationRepoLink };
 
 //# sourceMappingURL=conversation-repo-link.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"conversation-repo-link.js","names":[],"sources":["../../../../../src/components/features/conversation-panel/conversation-card/conversation-repo-link.tsx"],"sourcesContent":["import { FaBitbucket, FaGithub, FaGitlab } from \"react-icons/fa6\";\nimport { FaCodeBranch } from \"react-icons/fa\";\nimport { IconType } from \"react-icons/lib\";\nimport { RepositorySelection } from \"#/api/open-hands.types\";\nimport { Provider } from \"#/types/settings\";\nimport AzureDevOpsLogo from \"#/assets/branding/azure-devops-logo.svg?react\";\n\ninterface ConversationRepoLinkProps {\n  selectedRepository: RepositorySelection;\n}\n\nconst providerIcon: Partial<Record<Provider, IconType>> = {\n  bitbucket: FaBitbucket,\n  bitbucket_data_center: FaBitbucket,\n  github: FaGithub,\n  gitlab: FaGitlab,\n};\n\nexport function ConversationRepoLink({\n  selectedRepository,\n}: ConversationRepoLinkProps) {\n  const Icon = selectedRepository.git_provider\n    ? providerIcon[selectedRepository.git_provider]\n    : null;\n\n  return (\n    <div className=\"flex min-w-0 flex-1 items-center gap-2 overflow-hidden\">\n      <div className=\"flex min-w-0 items-center gap-1\">\n        {Icon && <Icon size={14} className=\"shrink-0 text-[var(--oh-muted)]\" />}\n        {selectedRepository.git_provider === \"azure_devops\" && (\n          <AzureDevOpsLogo className=\"h-[14px] w-[14px] shrink-0 text-[var(--oh-muted)]\" />\n        )}\n        <span\n          data-testid=\"conversation-card-selected-repository\"\n          className=\"min-w-0 truncate text-xs text-[var(--oh-muted)]\"\n        >\n          {selectedRepository.selected_repository}\n        </span>\n      </div>\n      <div className=\"flex min-w-0 items-center gap-1\">\n        <FaCodeBranch size={12} className=\"shrink-0 text-[var(--oh-muted)]\" />\n\n        <span\n          data-testid=\"conversation-card-selected-branch\"\n          className=\"min-w-0 truncate text-xs text-[var(--oh-muted)]\"\n        >\n          {selectedRepository.selected_branch}\n        </span>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAWA,IAAM,IAAoD;CACxD,WAAW;CACX,uBAAuB;CACvB,QAAQ;CACR,QAAQ;AACV;AAEA,SAAgB,EAAqB,EACnC,yBAC4B;CAC5B,IAAM,IAAO,EAAmB,eAC5B,EAAa,EAAmB,gBAChC;CAEJ,OACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf;IACG,KAAQ,kBAAC,GAAD;KAAM,MAAM;KAAI,WAAU;IAAmC,CAAA;IACrE,EAAmB,iBAAiB,kBACnC,kBAAC,GAAD,EAAiB,WAAU,oDAAqD,CAAA;IAElF,kBAAC,QAAD;KACE,eAAY;KACZ,WAAU;eAET,EAAmB;IAChB,CAAA;GACH;MACL,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,GAAD;IAAc,MAAM;IAAI,WAAU;GAAmC,CAAA,GAErE,kBAAC,QAAD;IACE,eAAY;IACZ,WAAU;cAET,EAAmB;GAChB,CAAA,CACH;IACF;;AAET"}
+{"version":3,"file":"conversation-repo-link.js","names":[],"sources":["../../../../../src/components/features/conversation-panel/conversation-card/conversation-repo-link.tsx"],"sourcesContent":["import { FaBitbucket, FaGithub, FaGitlab } from \"react-icons/fa6\";\nimport { FaCodeBranch } from \"react-icons/fa\";\nimport { IconType } from \"react-icons/lib\";\nimport { RepositorySelection } from \"#/api/open-hands.types\";\nimport { Provider } from \"#/types/settings\";\nimport AzureDevOpsLogo from \"#/assets/branding/azure-devops-logo.svg?react\";\nimport { cn } from \"#/utils/utils\";\nimport {\n  CONVERSATION_CARD_META_CHIP_CLASSNAME,\n  CONVERSATION_CARD_META_CHIP_ICON_CLASSNAME,\n  CONVERSATION_CARD_META_CHIP_ICON_SLOT_CLASSNAME,\n} from \"./conversation-card-meta-chip\";\n\n/**\n * Repo and branch share one ``overflow-hidden`` row, so unlike the standalone\n * chips they must be allowed to shrink: with the shared class's ``shrink-0``\n * a long repository name claims the full row and pushes the branch chip out of\n * view entirely. Shrinking lets both stay visible and truncate proportionally.\n */\nconst REPO_LINK_CHIP_CLASSNAME = cn(\n  CONVERSATION_CARD_META_CHIP_CLASSNAME,\n  \"shrink\",\n);\n\ninterface ConversationRepoLinkProps {\n  selectedRepository: RepositorySelection;\n}\n\nconst providerIcon: Partial<Record<Provider, IconType>> = {\n  bitbucket: FaBitbucket,\n  bitbucket_data_center: FaBitbucket,\n  github: FaGithub,\n  gitlab: FaGitlab,\n};\n\nexport function ConversationRepoLink({\n  selectedRepository,\n}: ConversationRepoLinkProps) {\n  const Icon = selectedRepository.git_provider\n    ? providerIcon[selectedRepository.git_provider]\n    : null;\n  const repository = selectedRepository.selected_repository;\n  const branch = selectedRepository.selected_branch;\n\n  return (\n    <div className=\"flex min-w-0 flex-1 items-center gap-1 overflow-hidden\">\n      {repository ? (\n        <span\n          data-testid=\"conversation-card-selected-repository\"\n          title={repository}\n          className={REPO_LINK_CHIP_CLASSNAME}\n        >\n          {(Icon || selectedRepository.git_provider === \"azure_devops\") && (\n            <span\n              className={CONVERSATION_CARD_META_CHIP_ICON_SLOT_CLASSNAME}\n              aria-hidden\n            >\n              {Icon ? (\n                <Icon className={CONVERSATION_CARD_META_CHIP_ICON_CLASSNAME} />\n              ) : (\n                <AzureDevOpsLogo\n                  className={CONVERSATION_CARD_META_CHIP_ICON_CLASSNAME}\n                />\n              )}\n            </span>\n          )}\n          <span className=\"truncate leading-4\">{repository}</span>\n        </span>\n      ) : null}\n      {branch ? (\n        <span\n          data-testid=\"conversation-card-selected-branch\"\n          title={branch}\n          className={REPO_LINK_CHIP_CLASSNAME}\n        >\n          <span\n            className={CONVERSATION_CARD_META_CHIP_ICON_SLOT_CLASSNAME}\n            aria-hidden\n          >\n            <FaCodeBranch\n              className={CONVERSATION_CARD_META_CHIP_ICON_CLASSNAME}\n            />\n          </span>\n          <span className=\"truncate leading-4\">{branch}</span>\n        </span>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAmBA,IAAM,IAA2B,EAC/B,GACA,QACF,GAMM,IAAoD;CACxD,WAAW;CACX,uBAAuB;CACvB,QAAQ;CACR,QAAQ;AACV;AAEA,SAAgB,EAAqB,EACnC,yBAC4B;CAC5B,IAAM,IAAO,EAAmB,eAC5B,EAAa,EAAmB,gBAChC,MACE,IAAa,EAAmB,qBAChC,IAAS,EAAmB;CAElC,OACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACG,IACC,kBAAC,QAAD;GACE,eAAY;GACZ,OAAO;GACP,WAAW;aAHb,EAKI,KAAQ,EAAmB,iBAAiB,mBAC5C,kBAAC,QAAD;IACE,WAAA;IACA,eAAA;cAGE,EADD,KAGE,GAFD,EAAM,WAAA,UAAwD,CAI7D;GAEC,CAAA,GAER,kBAAC,QAAD;IAAM,WAAU;cAAsB;GAAiB,CAAA,CACnD;OACJ,MACH,IACC,kBAAC,QAAD;GACE,eAAY;GACZ,OAAO;GACP,WAAW;aAHb,CAKE,kBAAC,QAAD;IACE,WAAW;IACX,eAAA;cAEA,kBAAC,GAAD,EACE,WAAW,EACZ,CAAA;GACG,CAAA,GACN,kBAAC,QAAD;IAAM,WAAU;cAAsB;GAAa,CAAA,CAC/C;OACJ,IACD;;AAET"}

package/dist/components/features/conversation-panel/conversation-card/conversation-tag-chips.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("./conversation-card-meta-chip.cjs"),a=require("./conversation-tag-display.cjs"),o=require("./conversation-tag-icons.cjs");let s=require("react");s=e.__toESM(s,1);let c=require("react/jsx-runtime"),l=require("react-dom");function u({icon:e,keyName:t,testId:n}){return(0,c.jsx)(`span`,{className:i.CONVERSATION_CARD_META_CHIP_ICON_SLOT_CLASSNAME,"aria-hidden":!0,children:(0,c.jsx)(e,{"data-testid":n,"data-tag-key":t,"aria-hidden":!0,className:i.CONVERSATION_CARD_META_CHIP_ICON_CLASSNAME})})}function d({icon:e,keyName:t,value:n,iconTestId:r}){return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(u,{icon:e,keyName:t,testId:r}),(0,c.jsx)(`span`,{className:`truncate leading-4`,children:a.truncateTagChipValue(n)})]})}function f({tags:e}){let{t:f}=t.useTranslation(`openhands`),p=s.default.useRef(null),m=s.default.useRef(null),h=s.default.useRef(null),g=s.default.useRef(null),[_,v]=s.default.useState(e.length),[y,b]=s.default.useState(!1),[x,S]=s.default.useState(null),C=s.default.useCallback(()=>{let e=p.current,t=m.current;!e||!t||v(a.computeVisibleTagChipCount(Array.from(t.children).map(e=>e.offsetWidth),e.clientWidth))},[]),w=s.default.useCallback(()=>{let e=h.current;if(!e)return;let t=e.getBoundingClientRect(),n=t.left;n+256>window.innerWidth-8&&(n=Math.max(8,window.innerWidth-8-256)),S({top:t.bottom+4,left:n})},[]),T=e.map(([e,t])=>`${e}=${t}`).join(``),E=s.default.useRef(null);if(s.default.useLayoutEffect(()=>{E.current!==T&&(E.current=T,b(!1),C())},[T,C]),s.default.useEffect(()=>{let e=p.current;if(!e||typeof ResizeObserver>`u`)return;let t=new ResizeObserver(()=>C());return t.observe(e),()=>t.disconnect()},[C]),s.default.useLayoutEffect(()=>{if(!y){S(null);return}return w(),window.addEventListener(`resize`,w),window.addEventListener(`scroll`,w,!0),()=>{window.removeEventListener(`resize`,w),window.removeEventListener(`scroll`,w,!0)}},[y,w]),s.default.useEffect(()=>{if(!y)return;let e=e=>{let t=e.target;h.current?.contains(t)||g.current?.contains(t)||b(!1)},t=e=>{e.key===`Escape`&&b(!1)};return document.addEventListener(`mousedown`,e),document.addEventListener(`keydown`,t),()=>{document.removeEventListener(`mousedown`,e),document.removeEventListener(`keydown`,t)}},[y]),e.length===0)return null;let D=Math.max(0,e.length-_),O=e.slice(0,_),k=e.slice(_),A=e=>{e.stopPropagation()};return(0,c.jsxs)(`div`,{"data-testid":`conversation-card-tag-chips`,className:`relative min-w-0 w-full`,children:[(0,c.jsx)(`div`,{ref:m,"aria-hidden":!0,className:`pointer-events-none fixed top-0 -left-[10000px] z-[-1] flex flex-nowrap items-center gap-1 opacity-0`,children:e.map(([e,t])=>(0,c.jsx)(`span`,{className:i.CONVERSATION_CARD_META_CHIP_CLASSNAME,children:(0,c.jsx)(d,{icon:o.getConversationTagIcon(e,t),keyName:e,value:t})},e))}),(0,c.jsxs)(`div`,{ref:p,"data-testid":`conversation-card-tag-row`,className:`flex w-full min-w-0 max-w-full flex-nowrap items-center gap-1 overflow-hidden`,children:[O.map(([e,t])=>(0,c.jsx)(`span`,{"data-testid":`conversation-card-tag-chip`,title:a.formatConversationTagTooltip(e,t,f),className:i.CONVERSATION_CARD_META_CHIP_CLASSNAME,children:(0,c.jsx)(d,{icon:o.getConversationTagIcon(e,t),keyName:e,value:t,iconTestId:`conversation-card-tag-chip-icon`})},e)),D>0?(0,c.jsxs)(`button`,{ref:h,type:`button`,"data-testid":`conversation-card-tag-overflow`,"aria-expanded":y,"aria-haspopup":`dialog`,"aria-label":f(n.I18nKey.CONVERSATION$TAGS_OVERFLOW_ARIA,{count:D}),onMouseDown:A,onClick:e=>{e.preventDefault(),e.stopPropagation(),b(e=>!e)},className:r.cn(i.CONVERSATION_CARD_META_CHIP_CLASSNAME,`shrink-0 self-center hover:bg-[var(--oh-interactive-hover)] hover:text-[var(--foreground)]`),children:[(0,c.jsx)(`span`,{className:`inline-flex h-4 w-0 shrink-0`,"aria-hidden":!0}),(0,c.jsx)(`span`,{className:`leading-4`,children:`+${D}`})]}):null]}),y&&x&&typeof document<`u`&&(0,l.createPortal)((0,c.jsx)(`div`,{ref:g,role:`dialog`,"data-testid":`conversation-card-tag-overflow-popover`,className:r.cn(`z-[9999] min-w-[10rem] max-w-[16rem]`,`rounded-md border border-[var(--oh-border-subtle)]`,`bg-[var(--oh-surface)] p-2 shadow-lg`),style:{position:`fixed`,top:x.top,left:x.left},onMouseDown:A,onClick:e=>{e.preventDefault(),e.stopPropagation()},children:(0,c.jsx)(`dl`,{className:`m-0 flex flex-col gap-1`,children:k.map(([e,t])=>(0,c.jsxs)(`div`,{"data-testid":`conversation-card-tag-overflow-row`,className:`grid grid-cols-[minmax(0,auto)_minmax(0,1fr)] gap-x-2 text-[10px] leading-4`,children:[(0,c.jsxs)(`dt`,{className:`m-0 inline-flex min-w-0 items-center gap-1 whitespace-normal break-words text-[var(--oh-muted)]`,children:[(0,c.jsx)(u,{icon:o.getConversationTagIcon(e,t)}),(0,c.jsx)(`span`,{className:`min-w-0 whitespace-normal break-words leading-4`,children:a.getConversationTagLabel(e,f)})]}),(0,c.jsx)(`dd`,{className:`m-0 whitespace-normal break-words text-left leading-4 text-[var(--foreground)]`,title:t,children:t})]},e))})}),document.body)]})}exports.ConversationTagChips=f;
+//# sourceMappingURL=conversation-tag-chips.cjs.map

package/dist/components/features/conversation-panel/conversation-card/conversation-tag-chips.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"conversation-tag-chips.cjs","names":[],"sources":["../../../../../src/components/features/conversation-panel/conversation-card/conversation-tag-chips.tsx"],"sourcesContent":["import React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport {\n  computeVisibleTagChipCount,\n  formatConversationTagTooltip,\n  getConversationTagLabel,\n  truncateTagChipValue,\n} from \"./conversation-tag-display\";\nimport {\n  getConversationTagIcon,\n  type ConversationTagIcon,\n} from \"./conversation-tag-icons\";\nimport {\n  CONVERSATION_CARD_META_CHIP_CLASSNAME,\n  CONVERSATION_CARD_META_CHIP_ICON_CLASSNAME,\n  CONVERSATION_CARD_META_CHIP_ICON_SLOT_CLASSNAME,\n} from \"./conversation-card-meta-chip\";\n\ninterface ConversationTagChipsProps {\n  tags: Array<[string, string]>;\n}\n\n/**\n * Fixed line-height slot so Lucide / react-icons / local SVGs share the same\n * optical center as the ``leading-4`` chip / overflow text (raw ``h-3 w-3``\n * SVGs sit on the baseline and look high or low depending on the glyph).\n */\nfunction TagIconSlot({\n  icon: Icon,\n  keyName,\n  testId,\n}: {\n  icon: ConversationTagIcon;\n  keyName?: string;\n  testId?: string;\n}) {\n  return (\n    <span\n      className={CONVERSATION_CARD_META_CHIP_ICON_SLOT_CLASSNAME}\n      aria-hidden\n    >\n      <Icon\n        data-testid={testId}\n        data-tag-key={keyName}\n        aria-hidden\n        className={CONVERSATION_CARD_META_CHIP_ICON_CLASSNAME}\n      />\n    </span>\n  );\n}\n\nfunction TagChipContent({\n  icon,\n  keyName,\n  value,\n  iconTestId,\n}: {\n  icon: ConversationTagIcon;\n  keyName: string;\n  value: string;\n  /**\n   * Only the visible row passes this. The off-screen measure row renders the\n   * same chips, so tagging both would emit every chip test id twice and break\n   * ``getByTestId`` (singular) for any card with tags.\n   */\n  iconTestId?: string;\n}) {\n  return (\n    <>\n      <TagIconSlot icon={icon} keyName={keyName} testId={iconTestId} />\n      <span className=\"truncate leading-4\">{truncateTagChipValue(value)}</span>\n    </>\n  );\n}\n\n/**\n * Single-row tag chips for a conversation card. Chip labels are value-only\n * (key lives in the tooltip); chips that do not fit fold behind a ``+N``\n * button that opens a key/value popover.\n *\n * The overflow popover is portaled with ``position: fixed`` so it is not\n * clipped by the chip row's ``overflow-hidden`` or the sidebar scroller.\n */\nexport function ConversationTagChips({ tags }: ConversationTagChipsProps) {\n  const { t } = useTranslation(\"openhands\");\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const measureRef = React.useRef<HTMLDivElement>(null);\n  const triggerRef = React.useRef<HTMLButtonElement>(null);\n  const popoverRef = React.useRef<HTMLDivElement>(null);\n  const [visibleCount, setVisibleCount] = React.useState(tags.length);\n  const [isOverflowOpen, setIsOverflowOpen] = React.useState(false);\n  const [popoverBox, setPopoverBox] = React.useState<{\n    top: number;\n    left: number;\n  } | null>(null);\n\n  const recomputeVisibleCount = React.useCallback(() => {\n    const container = containerRef.current;\n    const measure = measureRef.current;\n    if (!container || !measure) {\n      return;\n    }\n\n    const widths = Array.from(measure.children).map(\n      (child) => (child as HTMLElement).offsetWidth,\n    );\n    setVisibleCount(computeVisibleTagChipCount(widths, container.clientWidth));\n  }, []);\n\n  const measurePopover = React.useCallback(() => {\n    const trigger = triggerRef.current;\n    if (!trigger) {\n      return;\n    }\n    const rect = trigger.getBoundingClientRect();\n    const gutter = 8;\n    const width = 16 * 16;\n    let left = rect.left;\n    if (left + width > window.innerWidth - gutter) {\n      left = Math.max(gutter, window.innerWidth - gutter - width);\n    }\n    setPopoverBox({ top: rect.bottom + 4, left });\n  }, []);\n\n  // Callers build this array fresh on every render (``getDisplayConversationTags``\n  // returns a new array), so keying the reset effect on ``tags`` identity would\n  // fire on every parent render — closing an open ``+N`` popover and forcing a\n  // layout read on each 10s panel refetch. Compare tag *content* instead.\n  const tagsKey = tags.map(([key, value]) => `${key}=${value}`).join(\"\\u001f\");\n  const lastTagsKeyRef = React.useRef<string | null>(null);\n\n  React.useLayoutEffect(() => {\n    if (lastTagsKeyRef.current === tagsKey) {\n      return;\n    }\n    lastTagsKeyRef.current = tagsKey;\n    setIsOverflowOpen(false);\n    recomputeVisibleCount();\n  }, [tagsKey, recomputeVisibleCount]);\n\n  React.useEffect(() => {\n    const container = containerRef.current;\n    if (!container || typeof ResizeObserver === \"undefined\") {\n      return undefined;\n    }\n\n    const observer = new ResizeObserver(() => recomputeVisibleCount());\n    observer.observe(container);\n    return () => observer.disconnect();\n  }, [recomputeVisibleCount]);\n\n  React.useLayoutEffect(() => {\n    if (!isOverflowOpen) {\n      setPopoverBox(null);\n      return undefined;\n    }\n    measurePopover();\n    window.addEventListener(\"resize\", measurePopover);\n    window.addEventListener(\"scroll\", measurePopover, true);\n    return () => {\n      window.removeEventListener(\"resize\", measurePopover);\n      window.removeEventListener(\"scroll\", measurePopover, true);\n    };\n  }, [isOverflowOpen, measurePopover]);\n\n  React.useEffect(() => {\n    if (!isOverflowOpen) {\n      return undefined;\n    }\n    const onPointerDown = (event: MouseEvent) => {\n      const target = event.target as Node;\n      if (triggerRef.current?.contains(target)) {\n        return;\n      }\n      if (popoverRef.current?.contains(target)) {\n        return;\n      }\n      setIsOverflowOpen(false);\n    };\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        setIsOverflowOpen(false);\n      }\n    };\n    // mousedown (not click) so the opening click cannot race-close the panel,\n    // and so NavigationLink activation is easier to cancel on the trigger.\n    document.addEventListener(\"mousedown\", onPointerDown);\n    document.addEventListener(\"keydown\", onKeyDown);\n    return () => {\n      document.removeEventListener(\"mousedown\", onPointerDown);\n      document.removeEventListener(\"keydown\", onKeyDown);\n    };\n  }, [isOverflowOpen]);\n\n  if (tags.length === 0) {\n    return null;\n  }\n\n  const hiddenCount = Math.max(0, tags.length - visibleCount);\n  const visibleTags = tags.slice(0, visibleCount);\n  const overflowTags = tags.slice(visibleCount);\n\n  const stopCardNavigation = (event: React.SyntheticEvent) => {\n    // Don't preventDefault on mousedown — that suppresses the subsequent click\n    // when the chip sits inside a conversation NavigationLink.\n    event.stopPropagation();\n  };\n\n  const activateOverflow = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    setIsOverflowOpen((open) => !open);\n  };\n\n  return (\n    <div\n      data-testid=\"conversation-card-tag-chips\"\n      className=\"relative min-w-0 w-full\"\n    >\n      <div\n        ref={measureRef}\n        aria-hidden\n        className=\"pointer-events-none fixed top-0 -left-[10000px] z-[-1] flex flex-nowrap items-center gap-1 opacity-0\"\n      >\n        {tags.map(([key, value]) => (\n          <span key={key} className={CONVERSATION_CARD_META_CHIP_CLASSNAME}>\n            <TagChipContent\n              icon={getConversationTagIcon(key, value)}\n              keyName={key}\n              value={value}\n            />\n          </span>\n        ))}\n      </div>\n\n      <div\n        ref={containerRef}\n        data-testid=\"conversation-card-tag-row\"\n        className=\"flex w-full min-w-0 max-w-full flex-nowrap items-center gap-1 overflow-hidden\"\n      >\n        {visibleTags.map(([key, value]) => (\n          <span\n            key={key}\n            data-testid=\"conversation-card-tag-chip\"\n            title={formatConversationTagTooltip(key, value, t)}\n            className={CONVERSATION_CARD_META_CHIP_CLASSNAME}\n          >\n            <TagChipContent\n              icon={getConversationTagIcon(key, value)}\n              keyName={key}\n              value={value}\n              iconTestId=\"conversation-card-tag-chip-icon\"\n            />\n          </span>\n        ))}\n        {hiddenCount > 0 ? (\n          <button\n            ref={triggerRef}\n            type=\"button\"\n            data-testid=\"conversation-card-tag-overflow\"\n            aria-expanded={isOverflowOpen}\n            aria-haspopup=\"dialog\"\n            aria-label={t(I18nKey.CONVERSATION$TAGS_OVERFLOW_ARIA, {\n              count: hiddenCount,\n            })}\n            onMouseDown={stopCardNavigation}\n            onClick={activateOverflow}\n            className={cn(\n              CONVERSATION_CARD_META_CHIP_CLASSNAME,\n              \"shrink-0 self-center hover:bg-[var(--oh-interactive-hover)] hover:text-[var(--foreground)]\",\n            )}\n          >\n            {/* Match chip height (icon slot + label) so +N shares the same centerline. */}\n            <span className=\"inline-flex h-4 w-0 shrink-0\" aria-hidden />\n            <span className=\"leading-4\">{`+${hiddenCount}`}</span>\n          </button>\n        ) : null}\n      </div>\n\n      {isOverflowOpen &&\n        popoverBox &&\n        typeof document !== \"undefined\" &&\n        createPortal(\n          // Stop card-level click activation when interacting with the list.\n          // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- dialog surface must swallow clicks\n          <div\n            ref={popoverRef}\n            role=\"dialog\"\n            data-testid=\"conversation-card-tag-overflow-popover\"\n            className={cn(\n              \"z-[9999] min-w-[10rem] max-w-[16rem]\",\n              \"rounded-md border border-[var(--oh-border-subtle)]\",\n              \"bg-[var(--oh-surface)] p-2 shadow-lg\",\n            )}\n            style={{\n              position: \"fixed\",\n              top: popoverBox.top,\n              left: popoverBox.left,\n            }}\n            onMouseDown={stopCardNavigation}\n            onClick={(event) => {\n              event.preventDefault();\n              event.stopPropagation();\n            }}\n          >\n            <dl className=\"m-0 flex flex-col gap-1\">\n              {overflowTags.map(([key, value]) => (\n                <div\n                  key={key}\n                  data-testid=\"conversation-card-tag-overflow-row\"\n                  className=\"grid grid-cols-[minmax(0,auto)_minmax(0,1fr)] gap-x-2 text-[10px] leading-4\"\n                >\n                  <dt className=\"m-0 inline-flex min-w-0 items-center gap-1 whitespace-normal break-words text-[var(--oh-muted)]\">\n                    <TagIconSlot icon={getConversationTagIcon(key, value)} />\n                    <span className=\"min-w-0 whitespace-normal break-words leading-4\">\n                      {getConversationTagLabel(key, t)}\n                    </span>\n                  </dt>\n                  <dd\n                    className=\"m-0 whitespace-normal break-words text-left leading-4 text-[var(--foreground)]\"\n                    title={value}\n                  >\n                    {value}\n                  </dd>\n                </div>\n              ))}\n            </dl>\n          </div>,\n          document.body,\n        )}\n    </div>\n  );\n}\n"],"mappings":"2cA8BA,SAAS,EAAY,CACnB,KAAM,EACN,UACA,UAKC,CACD,OACE,EAAA,EAAA,KAAC,OAAD,CACE,UAAW,EAAA,gDACX,cAAA,aAEA,EAAA,EAAA,KAAC,EAAD,CACE,cAAa,EACb,eAAc,EACd,cAAA,GACA,UAAW,EAAA,0CACZ,CAAA,CACG,CAAA,CAEV,CAEA,SAAS,EAAe,CACtB,OACA,UACA,QACA,cAWC,CACD,OACE,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,KAAC,EAAD,CAAmB,OAAe,UAAS,OAAQ,CAAa,CAAA,GAChE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,8BAAsB,EAAA,qBAAqB,CAAK,CAAQ,CAAA,CACxE,CAAA,CAAA,CAEN,CAUA,SAAgB,EAAqB,CAAE,QAAmC,CACxE,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAClC,EAAe,EAAA,QAAM,OAAuB,IAAI,EAChD,EAAa,EAAA,QAAM,OAAuB,IAAI,EAC9C,EAAa,EAAA,QAAM,OAA0B,IAAI,EACjD,EAAa,EAAA,QAAM,OAAuB,IAAI,EAC9C,CAAC,EAAc,GAAmB,EAAA,QAAM,SAAS,EAAK,MAAM,EAC5D,CAAC,EAAgB,GAAqB,EAAA,QAAM,SAAS,EAAK,EAC1D,CAAC,EAAY,GAAiB,EAAA,QAAM,SAGhC,IAAI,EAER,EAAwB,EAAA,QAAM,gBAAkB,CACpD,IAAM,EAAY,EAAa,QACzB,EAAU,EAAW,QACvB,CAAC,GAAa,CAAC,GAOnB,EAAgB,EAAA,2BAHD,MAAM,KAAK,EAAQ,QAAQ,EAAE,IACzC,GAAW,EAAsB,WAEO,EAAQ,EAAU,WAAW,CAAC,CAC3E,EAAG,CAAC,CAAC,EAEC,EAAiB,EAAA,QAAM,gBAAkB,CAC7C,IAAM,EAAU,EAAW,QAC3B,GAAI,CAAC,EACH,OAEF,IAAM,EAAO,EAAQ,sBAAsB,EAGvC,EAAO,EAAK,KACZ,EAAO,IAAQ,OAAO,WAAa,IACrC,EAAO,KAAK,IAAI,EAAQ,OAAO,WAAa,EAAS,GAAK,GAE5D,EAAc,CAAE,IAAK,EAAK,OAAS,EAAG,MAAK,CAAC,CAC9C,EAAG,CAAC,CAAC,EAMC,EAAU,EAAK,KAAK,CAAC,EAAK,KAAW,GAAG,EAAI,GAAG,GAAO,EAAE,KAAK,GAAQ,EACrE,EAAiB,EAAA,QAAM,OAAsB,IAAI,EAiEvD,GA/DA,EAAA,QAAM,oBAAsB,CACtB,EAAe,UAAY,IAG/B,EAAe,QAAU,EACzB,EAAkB,EAAK,EACvB,EAAsB,EACxB,EAAG,CAAC,EAAS,CAAqB,CAAC,EAEnC,EAAA,QAAM,cAAgB,CACpB,IAAM,EAAY,EAAa,QAC/B,GAAI,CAAC,GAAa,OAAO,eAAmB,IAC1C,OAGF,IAAM,EAAW,IAAI,mBAAqB,EAAsB,CAAC,EAEjE,OADA,EAAS,QAAQ,CAAS,MACb,EAAS,WAAW,CACnC,EAAG,CAAC,CAAqB,CAAC,EAE1B,EAAA,QAAM,oBAAsB,CAC1B,GAAI,CAAC,EAAgB,CACnB,EAAc,IAAI,EAClB,MACF,CAIA,OAHA,EAAe,EACf,OAAO,iBAAiB,SAAU,CAAc,EAChD,OAAO,iBAAiB,SAAU,EAAgB,EAAI,MACzC,CACX,OAAO,oBAAoB,SAAU,CAAc,EACnD,OAAO,oBAAoB,SAAU,EAAgB,EAAI,CAC3D,CACF,EAAG,CAAC,EAAgB,CAAc,CAAC,EAEnC,EAAA,QAAM,cAAgB,CACpB,GAAI,CAAC,EACH,OAEF,IAAM,EAAiB,GAAsB,CAC3C,IAAM,EAAS,EAAM,OACjB,EAAW,SAAS,SAAS,CAAM,GAGnC,EAAW,SAAS,SAAS,CAAM,GAGvC,EAAkB,EAAK,CACzB,EACM,EAAa,GAAyB,CACtC,EAAM,MAAQ,UAChB,EAAkB,EAAK,CAE3B,EAKA,OAFA,SAAS,iBAAiB,YAAa,CAAa,EACpD,SAAS,iBAAiB,UAAW,CAAS,MACjC,CACX,SAAS,oBAAoB,YAAa,CAAa,EACvD,SAAS,oBAAoB,UAAW,CAAS,CACnD,CACF,EAAG,CAAC,CAAc,CAAC,EAEf,EAAK,SAAW,EAClB,OAAO,KAGT,IAAM,EAAc,KAAK,IAAI,EAAG,EAAK,OAAS,CAAY,EACpD,EAAc,EAAK,MAAM,EAAG,CAAY,EACxC,EAAe,EAAK,MAAM,CAAY,EAEtC,EAAsB,GAAgC,CAG1D,EAAM,gBAAgB,CACxB,EAQA,OACE,EAAA,EAAA,MAAC,MAAD,CACE,cAAY,8BACZ,UAAU,mCAFZ,EAIE,EAAA,EAAA,KAAC,MAAD,CACE,IAAK,EACL,cAAA,GACA,UAAU,gHAET,EAAK,KAAK,CAAC,EAAK,MACf,EAAA,EAAA,KAAC,OAAD,CAAgB,UAAW,EAAA,gDACzB,EAAA,EAAA,KAAC,EAAD,CACE,KAAM,EAAA,uBAAuB,EAAK,CAAK,EACvC,QAAS,EACF,OACR,CAAA,CACG,EANK,CAML,CACP,CACE,CAAA,GAEL,EAAA,EAAA,MAAC,MAAD,CACE,IAAK,EACL,cAAY,4BACZ,UAAU,yFAHZ,CAKG,EAAY,KAAK,CAAC,EAAK,MACtB,EAAA,EAAA,KAAC,OAAD,CAEE,cAAY,6BACZ,MAAO,EAAA,6BAA6B,EAAK,EAAO,CAAC,EACjD,UAAW,EAAA,gDAEX,EAAA,EAAA,KAAC,EAAD,CACE,KAAM,EAAA,uBAAuB,EAAK,CAAK,EACvC,QAAS,EACF,QACP,WAAW,iCACZ,CAAA,CACG,EAXC,CAWD,CACP,EACA,EAAc,GACb,EAAA,EAAA,MAAC,SAAD,CACE,IAAK,EACL,KAAK,SACL,cAAY,iCACZ,gBAAe,EACf,gBAAc,SACd,aAAY,EAAE,EAAA,QAAQ,gCAAiC,CACrD,MAAO,CACT,CAAC,EACD,YAAa,EACb,QA1DgB,GAA+C,CACvE,EAAM,eAAe,EACrB,EAAM,gBAAgB,EACtB,EAAmB,GAAS,CAAC,CAAI,CACnC,EAuDU,UAAW,EAAA,GACT,EAAA,sCACA,4FACF,WAdF,EAiBE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,+BAA+B,cAAA,EAAa,CAAA,GAC5D,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,qBAAa,IAAI,GAAoB,CAAA,CAC/C,IACN,IACD,IAEJ,GACC,GACA,OAAO,SAAa,MAAA,EAAA,EAAA,eAIlB,EAAA,EAAA,KAAC,MAAD,CACE,IAAK,EACL,KAAK,SACL,cAAY,yCACZ,UAAW,EAAA,GACT,uCACA,qDACA,sCACF,EACA,MAAO,CACL,SAAU,QACV,IAAK,EAAW,IAChB,KAAM,EAAW,IACnB,EACA,YAAa,EACb,QAAU,GAAU,CAClB,EAAM,eAAe,EACrB,EAAM,gBAAgB,CACxB,YAEA,EAAA,EAAA,KAAC,KAAD,CAAI,UAAU,mCACX,EAAa,KAAK,CAAC,EAAK,MACvB,EAAA,EAAA,MAAC,MAAD,CAEE,cAAY,qCACZ,UAAU,uFAHZ,EAKE,EAAA,EAAA,MAAC,KAAD,CAAI,UAAU,2GAAd,EACE,EAAA,EAAA,KAAC,EAAD,CAAa,KAAM,EAAA,uBAAuB,EAAK,CAAK,CAAI,CAAA,GACxD,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,2DACb,EAAA,wBAAwB,EAAK,CAAC,CAC3B,CAAA,CACJ,KACJ,EAAA,EAAA,KAAC,KAAD,CACE,UAAU,iFACV,MAAO,WAEN,CACC,CAAA,CACD,GAhBE,CAgBF,CACN,CACC,CAAA,CACD,CAAA,EACL,SAAS,IACX,CACC,GAET"}

package/dist/components/features/conversation-panel/conversation-card/conversation-tag-chips.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+interface ConversationTagChipsProps {
+    tags: Array<[string, string]>;
+}
+/**
+ * Single-row tag chips for a conversation card. Chip labels are value-only
+ * (key lives in the tooltip); chips that do not fit fold behind a ``+N``
+ * button that opens a key/value popover.
+ *
+ * The overflow popover is portaled with ``position: fixed`` so it is not
+ * clipped by the chip row's ``overflow-hidden`` or the sidebar scroller.
+ */
+export declare function ConversationTagChips({ tags }: ConversationTagChipsProps): React.JSX.Element | null;
+export {};