@xpert-ai/chatkit-ui 0.5.8 → 0.5.10

package/dist/index.cjs

@@ -1405,12 +1405,23 @@ function countCompletedTodos(items) {
 
 // src/lib/task-summary.ts
 var PLAN_PATTERN = /<proposed_plan>\s*([\s\S]*?)\s*<\/proposed_plan>/i;
+var WEB_SEARCH_RESULT_PATTERN = /^Title:\s*(.+?)\r?\nURL:\s*(https?:\/\/\S+)\s*$/gim;
+var SANDBOX_FILE_OUTPUT_TOOLS = /* @__PURE__ */ new Set([
+  "sandbox_write_file",
+  "sandbox_append_file",
+  "sandbox_edit_file",
+  "sandbox_multi_edit_file"
+]);
 function isObject(value) {
   return Boolean(value) && typeof value === "object" && !Array.isArray(value);
 }
 function stringValue(value) {
   return typeof value === "string" && value.trim() ? value.trim() : void 0;
 }
+function compactText(value, maxLength) {
+  const normalized = value.replace(/\s+/g, " ").trim();
+  return normalized.length <= maxLength ? normalized : `${normalized.slice(0, maxLength - 3).trimEnd()}...`;
+}
 function timestamp(value) {
   const parsed = value ? Date.parse(value) : 0;
   return Number.isNaN(parsed) ? 0 : parsed;
@@ -1482,19 +1493,29 @@ function normalizeOutput(value) {
   const id = stringValue(candidate.id);
   const title = stringValue(candidate.title);
   const kind = artifactKind(candidate.kind);
-  if (!id || !title || !kind) return null;
-  const status = candidate.status;
+  const status = stringValue(candidate.status)?.toLowerCase();
+  const normalizedStatus = status === "success" ? status : void 0;
+  const resource = normalizeResource(candidate.resource);
+  if (!id || !title || !kind || status !== void 0 && status !== "success" || !isOpenableOutputResource(resource)) {
+    return null;
+  }
   return {
     id,
     kind,
     title,
     description: stringValue(candidate.description),
-    status: status === "pending" || status === "running" || status === "success" || status === "error" ? status : void 0,
-    resource: normalizeResource(candidate.resource),
+    status: normalizedStatus,
+    resource,
     messageId: stringValue(candidate.messageId),
     updatedAt: stringValue(candidate.updatedAt)
   };
 }
+function isCompletedOpenableOutput(output) {
+  return (output.status === void 0 || output.status === "success") && isOpenableOutputResource(output.resource);
+}
+function isOpenableOutputResource(resource) {
+  return resource?.type === "workspace_file" || resource?.type === "artifact" || resource?.type === "url";
+}
 function normalizeSource(value) {
   if (!isObject(value)) return null;
   const candidate = value;
@@ -1549,11 +1570,10 @@ function contributionFromPart(part) {
   if (part.type !== "component" || !isObject(part.data)) return null;
   const data = part.data;
   const direct = normalizeTaskSummaryContribution(data.taskSummary);
-  if (direct) return direct;
-  if (!isObject(data._meta)) return null;
-  return normalizeTaskSummaryContribution(
+  const metadataContribution = isObject(data._meta) ? normalizeTaskSummaryContribution(
     data._meta["xpertai/taskSummary"]
-  );
+  ) : null;
+  return direct ?? metadataContribution;
 }
 function extractPlan(message) {
   const match = PLAN_PATTERN.exec(messageText(message.content));
@@ -1621,17 +1641,9 @@ function knownPartOutputs(part, message) {
   if (part.type !== "component" || !isObject(part.data)) return [];
   const data = part.data;
   const outputs = [...contributionFromPart(part)?.outputs ?? []];
-  if (data.type === "McpApp") {
-    outputs.push({
-      id: `mcp-app:${stringValue(part.id) ?? message.id ?? "message"}`,
-      kind: "mcp_app",
-      title: stringValue(data.title) ?? "MCP App",
-      resource: message.id ? { type: "message", messageId: message.id } : void 0,
-      messageId: message.id,
-      updatedAt
-    });
-  }
-  if (isObject(data.artifact)) {
+  const sandboxOutput = sandboxFileOutput(data, message);
+  if (sandboxOutput) outputs.push(sandboxOutput);
+  if (isObject(data.artifact) && isCompletedOutputStatus(data.artifact.status)) {
     const artifact = data.artifact;
     const artifactId = stringValue(artifact.artifactId) ?? stringValue(artifact.id);
     const workspacePath = stringValue(artifact.workspacePath);
@@ -1657,6 +1669,7 @@ function knownPartOutputs(part, message) {
   for (const value of [data.artifactLink, data.file]) {
     if (!isObject(value)) continue;
     const artifact = value;
+    if (!isCompletedOutputStatus(artifact.status)) continue;
     const artifactId = stringValue(artifact.artifactId) ?? stringValue(artifact.id);
     const workspacePath = stringValue(artifact.workspacePath);
     const id = artifactId ?? stringValue(artifact.fileAssetId) ?? workspacePath;
@@ -1678,6 +1691,52 @@ function knownPartOutputs(part, message) {
   }
   return outputs;
 }
+function sandboxFileOutput(data, message) {
+  const tool = stringValue(data.tool);
+  const status = stringValue(data.status)?.toLowerCase();
+  if (!tool || !SANDBOX_FILE_OUTPUT_TOOLS.has(tool) || status !== "success" || !isObject(data.input)) {
+    return void 0;
+  }
+  const workspacePath = portableWorkspacePath(
+    data.input.file_path
+  );
+  if (!workspacePath) return void 0;
+  return {
+    id: `workspace-file:${workspacePath}`,
+    kind: outputKindFromPath(workspacePath),
+    title: workspacePath.split("/").at(-1) ?? workspacePath,
+    status: "success",
+    resource: { type: "workspace_file", workspacePath },
+    messageId: message.id,
+    updatedAt: message.updatedAt ?? message.createdAt
+  };
+}
+function portableWorkspacePath(value) {
+  const path = stringValue(value)?.replace(/\\/g, "/").replace(/^\.\/+/, "").replace(/\/{2,}/g, "/");
+  if (!path || path.startsWith("/") || /^[a-z]:\//i.test(path) || path.split("/").some((segment) => segment === "..")) {
+    return void 0;
+  }
+  return path;
+}
+function outputKindFromPath(path) {
+  const extension = path.match(/\.([^./]+)$/)?.[1]?.toLowerCase();
+  if (extension === "html" || extension === "htm") return "site";
+  if (["png", "jpg", "jpeg", "gif", "webp", "svg", "avif"].includes(extension ?? ""))
+    return "image";
+  if (["csv", "xls", "xlsx", "ods"].includes(extension ?? ""))
+    return "spreadsheet";
+  if (["ppt", "pptx", "odp"].includes(extension ?? ""))
+    return "presentation";
+  if (["pdf", "doc", "docx", "md", "markdown", "txt", "rtf", "odt"].includes(
+    extension ?? ""
+  ))
+    return "document";
+  return "file";
+}
+function isCompletedOutputStatus(value) {
+  const status = stringValue(value)?.toLowerCase();
+  return status === void 0 || status === "success";
+}
 function sourceFromReference(reference, message) {
   const updatedAt = message.updatedAt ?? message.createdAt;
   const common = {
@@ -1750,25 +1809,42 @@ function fileSources(files, message) {
     ];
   });
 }
-function capabilitySources(message) {
-  const selection = message.runtimeCapabilities;
-  if (!selection) return [];
+function webSearchSources(part, message) {
+  if (part.type !== "component" || !isObject(part.data)) return [];
+  const data = part.data;
+  if (data.tool !== "web_search" || stringValue(data.status)?.toLowerCase() !== "success") {
+    return [];
+  }
+  const output = stringValue(data.output);
+  if (!output) return [];
   const updatedAt = message.updatedAt ?? message.createdAt;
-  const common = { messageId: message.id, updatedAt };
-  return [
-    ...selection.skills.ids.map((id) => ({
-      ...common,
-      id: `skill:${id}`,
-      kind: "skill",
-      title: id
-    })),
-    ...selection.plugins.nodeKeys.map((id) => ({
-      ...common,
-      id: `plugin:${id}`,
-      kind: "plugin",
-      title: id
-    }))
-  ];
+  const sources = [];
+  for (const match of output.matchAll(WEB_SEARCH_RESULT_PATTERN)) {
+    const rawTitle = stringValue(match[1]);
+    const url = httpUrl(match[2]);
+    if (!url) continue;
+    const title = rawTitle && rawTitle.toLowerCase() !== "n/a" ? rawTitle : new URL(url).hostname;
+    sources.push({
+      id: `web:${url}`,
+      kind: "web_page",
+      title: compactText(title, 160),
+      description: url,
+      resource: { type: "url", url },
+      messageId: message.id,
+      updatedAt
+    });
+  }
+  return sources;
+}
+function httpUrl(value) {
+  const url = stringValue(value);
+  if (!url) return void 0;
+  try {
+    const parsed = new URL(url);
+    return parsed.protocol === "http:" || parsed.protocol === "https:" ? url : void 0;
+  } catch {
+    return void 0;
+  }
 }
 function collectLiveTaskSummary({
   messages,
@@ -1788,7 +1864,9 @@ function collectLiveTaskSummary({
     (message) => extractPlan(message) ?? []
   );
   const agentRuns = messages.flatMap(
-    (message) => (message.agentRuns ?? []).filter((run) => Boolean(run.parentId)).map((run) => ({
+    (message) => (message.agentRuns ?? []).filter(
+      (run) => run.category?.trim().toLowerCase() === "agent" && Boolean(run.parentId)
+    ).map((run) => ({
       id: run.id,
       parentId: run.parentId,
       level: agentRunLevel(run, messages),
@@ -1796,7 +1874,7 @@ function collectLiveTaskSummary({
       title: (run.agentKey ? agentNames?.get(run.agentKey) : void 0) ?? run.title ?? run.xpertName ?? run.agentKey ?? "Agent",
       status: taskSummaryAgentStatus(run.status),
       elapsedTime: run.elapsedTime,
-      error: typeof run.error === "string" ? run.error : void 0,
+      error: typeof run.error === "string" ? compactText(run.error, 160) : void 0,
       messageId: message.id,
       updatedAt: run.updatedAt ?? run.endedAt ?? run.startedAt ?? message.updatedAt
     }))
@@ -1820,7 +1898,7 @@ function collectLiveTaskSummary({
           (part) => knownPartOutputs(part, message)
         )
       )
-    ]),
+    ]).filter(isCompletedOpenableOutput),
     sources: mergeLatest([
       ...contributions.flatMap((item) => item.sources ?? []).filter((source) => source.kind !== "sub_agent"),
       ...messages.flatMap((message) => [
@@ -1829,7 +1907,9 @@ function collectLiveTaskSummary({
         ),
         ...fileSources(message.fileAssets, message),
         ...fileSources(message.attachments, message),
-        ...capabilitySources(message)
+        ...contentParts(message.content).flatMap(
+          (part) => webSearchSources(part, message)
+        )
       ])
     ]),
     agents: mergeAgents(agentRuns),
@@ -1841,17 +1921,21 @@ function mergeTaskSummary(history, live, historySections) {
   const outputs = mergeLatest([
     ...historySections?.outputs ?? history?.outputs.items ?? [],
     ...live.outputs
-  ]);
+  ]).filter(isCompletedOpenableOutput);
   const sources = mergeLatest([
     ...historySections?.sources ?? history?.sources.items ?? [],
     ...live.sources
   ]);
-  const agents = mergeAgents([
-    ...(historySections?.agents ?? history?.agents.items ?? []).filter(
-      (agent) => Boolean(agent.parentId)
-    ),
-    ...live.agents
-  ]);
+  const historyAgents = historySections?.agents ?? history?.agents.items ?? [];
+  const eligibleHistoryAgents = historyAgents.filter(
+    (agent) => Boolean(agent.parentId)
+  );
+  const excludedHistoryAgentCount = historyAgents.length - eligibleHistoryAgents.length;
+  const historyAgentTotal = Math.max(
+    0,
+    (history?.agents.total ?? 0) - excludedHistoryAgentCount
+  );
+  const agents = mergeAgents([...eligibleHistoryAgents, ...live.agents]);
   const pending = mergePending([
     ...historySections?.pending ?? history?.pending.items ?? [],
     ...live.pending
@@ -1876,7 +1960,7 @@ function mergeTaskSummary(history, live, historySections) {
     totals: {
       outputs: Math.max(history?.outputs.total ?? 0, outputs.length),
       sources: Math.max(history?.sources.total ?? 0, sources.length),
-      agents: agents.length,
+      agents: Math.max(historyAgentTotal, agents.length),
       pending: Math.max(history?.pending.total ?? 0, pending.length)
     }
   };
@@ -2487,7 +2571,7 @@ var useStreamContext = () => {
 };
 
 // src/components/composer/ComposerMenu.tsx
-var React12 = __toESM(require("react"), 1);
+var React13 = __toESM(require("react"), 1);
 var import_lucide_react4 = require("lucide-react");
 
 // src/i18n/useChatkitTranslation.ts
@@ -2579,7 +2663,6 @@ var en_US_default = {
       partial: "Partially ready",
       failed: "Failed"
     },
-    poweredBy: "Powered by Xpert AI",
     followUps: {
       pending: "Pending follow-ups",
       queue: "Queue",
@@ -2889,7 +2972,20 @@ var en_US_default = {
     status: {
       pending: "Pending",
       in_progress: "In progress",
-      completed: "Completed"
+      completed: "Completed",
+      active: "Active",
+      paused: "Paused",
+      blocked: "Blocked",
+      usage_limited: "Usage limited",
+      budget_limited: "Budget limited",
+      complete: "Completed",
+      success: "Completed",
+      error: "Failed",
+      running: "Running",
+      starting: "Starting",
+      stopping: "Stopping",
+      timeout: "Timed out",
+      interrupted: "Interrupted"
     },
     pending: {
       approval: "Approval required",
@@ -3155,7 +3251,6 @@ var zh_CN_default = {
       partial: "\u90E8\u5206\u5C31\u7EEA",
       failed: "\u89E3\u6790\u5931\u8D25"
     },
-    poweredBy: "\u7531 Xpert AI \u9A71\u52A8",
     followUps: {
       pending: "\u5F85\u5904\u7406 Follow-up",
       queue: "\u6392\u961F",
@@ -3465,7 +3560,20 @@ var zh_CN_default = {
     status: {
       pending: "\u5F85\u5904\u7406",
       in_progress: "\u8FDB\u884C\u4E2D",
-      completed: "\u5DF2\u5B8C\u6210"
+      completed: "\u5DF2\u5B8C\u6210",
+      active: "\u8FDB\u884C\u4E2D",
+      paused: "\u5DF2\u6682\u505C",
+      blocked: "\u5DF2\u963B\u585E",
+      usage_limited: "\u7528\u91CF\u53D7\u9650",
+      budget_limited: "\u9884\u7B97\u53D7\u9650",
+      complete: "\u5DF2\u5B8C\u6210",
+      success: "\u5DF2\u5B8C\u6210",
+      error: "\u5931\u8D25",
+      running: "\u8FD0\u884C\u4E2D",
+      starting: "\u542F\u52A8\u4E2D",
+      stopping: "\u505C\u6B62\u4E2D",
+      timeout: "\u5DF2\u8D85\u65F6",
+      interrupted: "\u5DF2\u4E2D\u65AD"
     },
     pending: {
       approval: "\u9700\u8981\u5BA1\u6279",
@@ -3905,12 +4013,16 @@ function ThemeProvider({ children, theme: themeProp }) {
   React2.useEffect(() => {
     if (!themeRef.current) return;
     const el = themeRef.current;
+    const root = document.documentElement;
+    const rootWasDark = root.classList.contains("dark");
     const { colorScheme, radius, density, typography, color } = theme;
     const isDarkMode2 = colorScheme === "dark";
     if (isDarkMode2) {
       el.classList.add("dark");
+      root.classList.add("dark");
     } else {
       el.classList.remove("dark");
+      root.classList.remove("dark");
     }
     if (radius) {
       el.dataset.radius = radius;
@@ -3952,7 +4064,6 @@ function ThemeProvider({ children, theme: themeProp }) {
       }
     }
     if (color) {
-      const root = document.documentElement;
       if (color.grayscale) {
         const grayscaleColors = generateGrayscaleColors(color.grayscale, isDarkMode2);
         Object.entries(grayscaleColors).forEach(([key, value]) => {
@@ -3999,8 +4110,8 @@ function ThemeProvider({ children, theme: themeProp }) {
     }
     setThemeRevision((current) => current + 1);
     return () => {
-      const root = document.documentElement;
       el.classList.remove("dark");
+      root.classList.toggle("dark", rootWasDark);
       el.removeAttribute("data-radius");
       el.removeAttribute("data-density");
       el.style.removeProperty("--density-spacing");
@@ -4595,25 +4706,93 @@ var Input = React8.forwardRef(
 );
 Input.displayName = "Input";
 
+// src/components/ui/tooltip.tsx
+var React9 = require("react");
+var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    TooltipPrimitive.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props
+    }
+  );
+}
+function Tooltip({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    TooltipPrimitive.Root,
+    {
+      "data-slot": "tooltip",
+      ...props
+    }
+  ) });
+}
+function TooltipTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    TooltipPrimitive.Trigger,
+    {
+      "data-slot": "tooltip-trigger",
+      ...props
+    }
+  );
+}
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  hideArrow = false,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    TooltipPrimitive.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TooltipPrimitive.Arrow, { className: "bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" }) : null
+      ]
+    }
+  ) });
+}
+
+// src/components/composer/ConnectorMenuPanel.tsx
+var React12 = __toESM(require("react"), 1);
+var import_lucide_react3 = require("lucide-react");
+
 // src/components/ui/scroll-area.tsx
-var React9 = __toESM(require("react"), 1);
+var React10 = __toESM(require("react"), 1);
 var ScrollAreaPrimitive = __toESM(require("@radix-ui/react-scroll-area"), 1);
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var ScrollArea = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var ScrollArea = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
   ScrollAreaPrimitive.Root,
   {
     ref,
     className: cn("relative min-w-0 overflow-hidden", className),
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ScrollAreaPrimitive.Viewport, { className: "h-full w-full min-w-0 max-w-full rounded-[inherit] [&>div]:!block [&>div]:!w-full", children }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ScrollBar, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ScrollAreaPrimitive.Corner, {})
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ScrollAreaPrimitive.Viewport, { className: "h-full w-full min-w-0 max-w-full rounded-[inherit] [&>div]:!block [&>div]:!w-full", children }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ScrollBar, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ScrollAreaPrimitive.Corner, {})
     ]
   }
 ));
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React9.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+var ScrollBar = React10.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
   ScrollAreaPrimitive.ScrollAreaScrollbar,
   {
     ref,
@@ -4625,20 +4804,16 @@ var ScrollBar = React9.forwardRef(({ className, orientation = "vertical", ...pro
       className
     ),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
   }
 ));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
-// src/components/composer/ConnectorMenuPanel.tsx
-var React11 = __toESM(require("react"), 1);
-var import_lucide_react3 = require("lucide-react");
-
 // src/components/ui/separator.tsx
-var React10 = __toESM(require("react"), 1);
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var Separator = React10.forwardRef(
-  ({ className, orientation = "horizontal", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+var React11 = __toESM(require("react"), 1);
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Separator = React11.forwardRef(
+  ({ className, orientation = "horizontal", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "div",
     {
       ref,
@@ -4656,7 +4831,7 @@ var Separator = React10.forwardRef(
 Separator.displayName = "Separator";
 
 // src/components/composer/ConnectorMenuPanel.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function resolveConnectorManagementUrl(apiUrl, scope) {
   const base2 = apiUrl?.trim() || window.location.href;
   const path = scope.type === "project" ? `/project/${encodeURIComponent(scope.projectId)}/config` : `/xpert/w/${encodeURIComponent(scope.workspaceId)}/connectors`;
@@ -4688,7 +4863,7 @@ function ConnectorIcon({
   label
 }) {
   if (option.icon?.type === "image" && typeof option.icon.value === "string") {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       "img",
       {
         src: option.icon.value,
@@ -4697,13 +4872,13 @@ function ConnectorIcon({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "span",
     {
       "aria-hidden": "true",
       title: label,
       className: "flex size-7 items-center justify-center rounded-md bg-muted text-muted-foreground",
-      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react3.Cable, { className: "size-4" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react3.Cable, { className: "size-4" })
     }
   );
 }
@@ -4719,22 +4894,22 @@ function ConnectorMenuPanel({
   apiUrl
 }) {
   const { t, i18n: i18n2 } = useChatkitTranslation();
-  const [query, setQuery] = React11.useState("");
-  const [scope, setScope] = React11.useState(null);
-  const [options, setOptions] = React11.useState([]);
-  const [loading, setLoading] = React11.useState(false);
-  const [error, setError] = React11.useState(null);
-  const [connectingBindingId, setConnectingBindingId] = React11.useState(null);
+  const [query, setQuery] = React12.useState("");
+  const [scope, setScope] = React12.useState(null);
+  const [options, setOptions] = React12.useState([]);
+  const [loading, setLoading] = React12.useState(false);
+  const [error, setError] = React12.useState(null);
+  const [connectingBindingId, setConnectingBindingId] = React12.useState(null);
   const loadErrorMessage = t("composer.connectors.loadError");
   const accessDeniedMessage = t("composer.connectors.accessDenied");
   const scopeUnavailableMessage = t("composer.connectors.scopeUnavailable");
-  const pollAbortRef = React11.useRef(null);
-  const popupRef = React11.useRef(null);
-  const selectedBindingIdSet = React11.useMemo(
+  const pollAbortRef = React12.useRef(null);
+  const popupRef = React12.useRef(null);
+  const selectedBindingIdSet = React12.useMemo(
     () => new Set(selectedBindingIds),
     [selectedBindingIds]
   );
-  const loadConnectors = React11.useCallback(
+  const loadConnectors = React12.useCallback(
     async (signal) => {
       if (!client || !xpertId) return;
       const response = await client.connectors.runtimeOptions(xpertId, {
@@ -4746,7 +4921,7 @@ function ConnectorMenuPanel({
     },
     [client, projectId, xpertId]
   );
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (!client || !xpertId) {
       setScope(null);
       setOptions([]);
@@ -4769,7 +4944,7 @@ function ConnectorMenuPanel({
     });
     return () => controller.abort();
   }, [accessDeniedMessage, client, loadConnectors, loadErrorMessage, xpertId]);
-  React11.useEffect(
+  React12.useEffect(
     () => () => {
       pollAbortRef.current?.abort();
       if (popupRef.current && !popupRef.current.closed) {
@@ -4780,7 +4955,7 @@ function ConnectorMenuPanel({
   );
   const manageUrl = scope ? resolveConnectorManagementUrl(apiUrl, scope) : null;
   const normalizedQuery = query.trim().toLocaleLowerCase();
-  const filteredOptions = React11.useMemo(
+  const filteredOptions = React12.useMemo(
     () => options.filter((option) => {
       if (!normalizedQuery) return true;
       const searchable = `${localizeText(
@@ -4791,7 +4966,7 @@ function ConnectorMenuPanel({
     }),
     [i18n2.language, normalizedQuery, options]
   );
-  const refresh = React11.useCallback(async () => {
+  const refresh = React12.useCallback(async () => {
     setLoading(true);
     try {
       await loadConnectors();
@@ -4800,7 +4975,7 @@ function ConnectorMenuPanel({
       setLoading(false);
     }
   }, [loadConnectors]);
-  const pollAuthorization = React11.useCallback(
+  const pollAuthorization = React12.useCallback(
     async (bindingId, initial, popup, signal) => {
       if (!client) return;
       let status = initial;
@@ -4837,7 +5012,7 @@ function ConnectorMenuPanel({
     },
     [client, onSelectionChange, refresh, selectedBindingIds, xpertId]
   );
-  const openManageConnectors = React11.useCallback(() => {
+  const openManageConnectors = React12.useCallback(() => {
     if (!manageUrl) {
       setError(scopeUnavailableMessage);
       return;
@@ -4849,7 +5024,7 @@ function ConnectorMenuPanel({
     }
     popup.opener = null;
   }, [manageUrl, scopeUnavailableMessage, t]);
-  const connectPersonalBinding = React11.useCallback(
+  const connectPersonalBinding = React12.useCallback(
     async (option) => {
       if (!client) return;
       if (option.profile) {
@@ -4935,7 +5110,7 @@ function ConnectorMenuPanel({
       xpertId
     ]
   );
-  const handleOptionClick = React11.useCallback(
+  const handleOptionClick = React12.useCallback(
     (option) => {
       if (!isConnectorUsable(option)) {
         if (option.authorizationMode === "personal") {
@@ -4956,15 +5131,15 @@ function ConnectorMenuPanel({
       selectedBindingIds
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "div",
     {
       "data-slot": "composer-connector-panel",
       className: "flex w-full min-w-0 max-w-full flex-col",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "p-3 pb-2", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "relative", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react3.Search, { className: "pointer-events-none absolute left-3 top-1/2 size-5 -translate-y-1/2 text-muted-foreground" }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "p-3 pb-2", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "relative", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react3.Search, { className: "pointer-events-none absolute left-3 top-1/2 size-5 -translate-y-1/2 text-muted-foreground" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             Input,
             {
               value: query,
@@ -4974,15 +5149,15 @@ function ConnectorMenuPanel({
             }
           )
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ScrollArea, { className: "max-h-72 min-h-0 px-3", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { "data-slot": "composer-connector-list", className: "space-y-1 pb-2", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(ConnectorMessage, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react3.Loader2, { className: "mr-2 inline size-4 animate-spin" }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ScrollArea, { className: "max-h-72 min-h-0 px-3", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { "data-slot": "composer-connector-list", className: "space-y-1 pb-2", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(ConnectorMessage, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react3.Loader2, { className: "mr-2 inline size-4 animate-spin" }),
           t("composer.connectors.loading")
-        ] }) : !xpertId ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ConnectorMessage, { children: scopeUnavailableMessage }) : filteredOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ConnectorMessage, { children: t("composer.connectors.empty") }) : filteredOptions.map((option) => {
+        ] }) : !xpertId ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ConnectorMessage, { children: scopeUnavailableMessage }) : filteredOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ConnectorMessage, { children: t("composer.connectors.empty") }) : filteredOptions.map((option) => {
           const label = localizeText(option.label, i18n2.language);
           const selected = selectedBindingIdSet.has(option.bindingId);
           const usable = isConnectorUsable(option);
           const connecting = connectingBindingId === option.bindingId;
-          return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
             "button",
             {
               type: "button",
@@ -4994,13 +5169,13 @@ function ConnectorMenuPanel({
               ),
               onClick: () => handleOptionClick(option),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ConnectorIcon, { option, label }),
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "min-w-0 flex-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "block truncate text-base", children: label || option.provider }),
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "block truncate text-xs text-muted-foreground", children: option.authorizationMode === "personal" ? t("composer.connectors.personal") : scope?.type === "workspace" ? t("composer.connectors.workspaceShared") : t("composer.connectors.shared") })
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ConnectorIcon, { option, label }),
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "block truncate text-base", children: label || option.provider }),
+                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "block truncate text-xs text-muted-foreground", children: option.authorizationMode === "personal" ? t("composer.connectors.personal") : scope?.type === "workspace" ? t("composer.connectors.workspaceShared") : t("composer.connectors.shared") })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "inline-flex shrink-0 items-center gap-1.5 text-sm text-muted-foreground", children: [
-                  connecting ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react3.Loader2, { className: "size-4 animate-spin" }) : selected ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react3.Check, { className: "size-4 text-primary" }) : usable ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "size-4 rounded-full border border-current" }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react3.Link2, { className: "size-4" }),
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "inline-flex shrink-0 items-center gap-1.5 text-sm text-muted-foreground", children: [
+                  connecting ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react3.Loader2, { className: "size-4 animate-spin" }) : selected ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react3.Check, { className: "size-4 text-primary" }) : usable ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "size-4 rounded-full border border-current" }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react3.Link2, { className: "size-4" }),
                   connecting ? t("composer.connectors.connecting") : selected ? t("composer.connectors.selected") : usable ? t("composer.connectors.select") : option.authorizationMode === "personal" ? t("composer.connectors.connect") : t("composer.connectors.unavailable")
                 ] })
               ]
@@ -5008,9 +5183,9 @@ function ConnectorMenuPanel({
             option.bindingId
           );
         }) }) }),
-        error ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { role: "alert", className: "px-4 py-2 text-sm text-destructive", children: error }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Separator, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+        error ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { role: "alert", className: "px-4 py-2 text-sm text-destructive", children: error }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Separator, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
           "button",
           {
             type: "button",
@@ -5018,7 +5193,7 @@ function ConnectorMenuPanel({
             disabled: !scope,
             onClick: openManageConnectors,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react3.ArrowUpRight, { className: "size-5" }),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react3.ArrowUpRight, { className: "size-5" }),
               t("composer.connectors.manage")
             ]
           }
@@ -5031,27 +5206,29 @@ function isAccessDenied(error) {
   return error instanceof Error && "status" in error && (error.status === 401 || error.status === 403);
 }
 function ConnectorMessage({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex min-h-40 items-center justify-center px-4 text-center text-sm text-muted-foreground", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex min-h-40 items-center justify-center px-4 text-center text-sm text-muted-foreground", children });
 }
 
 // src/components/composer/ComposerMenu.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var COMPOSER_MENU_EXPANDED_WIDTH_REM = 33;
+var COMPOSER_MENU_COLLISION_PADDING = 12;
 function getIconComponent(icon) {
   const iconMap = {
-    plus: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react4.Plus, { size: 16 }),
-    document: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react4.FileText, { size: 16 }),
-    write: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react4.Pencil, { size: 16 }),
-    sparkle: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react4.Sparkles, { size: 16 }),
-    lightbulb: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react4.Lightbulb, { size: 16 }),
-    "settings-slider": /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react4.SlidersHorizontal, { size: 16 }),
-    search: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react4.Search, { size: 16 }),
-    globe: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react4.Globe, { size: 16 }),
-    images: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react4.Images, { size: 16 })
+    plus: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react4.Plus, { size: 16 }),
+    document: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react4.FileText, { size: 16 }),
+    write: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react4.Pencil, { size: 16 }),
+    sparkle: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react4.Sparkles, { size: 16 }),
+    lightbulb: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react4.Lightbulb, { size: 16 }),
+    "settings-slider": /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react4.SlidersHorizontal, { size: 16 }),
+    search: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react4.Search, { size: 16 }),
+    globe: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react4.Globe, { size: 16 }),
+    images: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react4.Images, { size: 16 })
   };
   return iconMap[icon] || iconMap.sparkle;
 }
 function Toggle({ checked }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "span",
     {
       "aria-hidden": "true",
@@ -5059,7 +5236,7 @@ function Toggle({ checked }) {
         "relative inline-flex h-6 w-10 shrink-0 items-center rounded-full transition-colors",
         checked ? "bg-primary" : "bg-muted-foreground/20"
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "span",
         {
           className: cn(
@@ -5095,13 +5272,14 @@ function ComposerMenu({
 }) {
   const { t } = useChatkitTranslation();
   const { theme } = useTheme();
-  const [open, setOpen] = React12.useState(false);
-  const [activePanel, setActivePanel] = React12.useState(
+  const [open, setOpen] = React13.useState(false);
+  const [activePanel, setActivePanel] = React13.useState(
     null
   );
-  const [query, setQuery] = React12.useState("");
-  const [collisionBoundary, setCollisionBoundary] = React12.useState();
-  const triggerRef = React12.useRef(null);
+  const [query, setQuery] = React13.useState("");
+  const [collisionBoundary, setCollisionBoundary] = React13.useState();
+  const [canExpandSecondaryPanel, setCanExpandSecondaryPanel] = React13.useState(false);
+  const triggerRef = React13.useRef(null);
   const roundedClass = getRoundedClass(theme.radius);
   const panelRoundedClass = getPanelRoundedClass(theme.radius);
   const menuItemRoundedClass = getMenuItemRoundedClass(theme.radius);
@@ -5127,8 +5305,148 @@ function ComposerMenu({
     setActivePanel(panel);
     setQuery("");
   };
+  React13.useLayoutEffect(() => {
+    if (!open || !collisionBoundary) {
+      setCanExpandSecondaryPanel(false);
+      return;
+    }
+    const updateLayout = () => {
+      const trigger = triggerRef.current;
+      if (!trigger) {
+        setCanExpandSecondaryPanel(false);
+        return;
+      }
+      const boundaryRect = collisionBoundary.getBoundingClientRect();
+      const triggerRect = trigger.getBoundingClientRect();
+      const rootFontSize = Number.parseFloat(
+        window.getComputedStyle(document.documentElement).fontSize
+      );
+      const remInPixels = Number.isFinite(rootFontSize) ? rootFontSize : 16;
+      const menuLeft = Math.max(
+        triggerRect.left,
+        boundaryRect.left + COMPOSER_MENU_COLLISION_PADDING
+      );
+      const availableWidth = boundaryRect.right - COMPOSER_MENU_COLLISION_PADDING - menuLeft;
+      const requiredWidth = COMPOSER_MENU_EXPANDED_WIDTH_REM * remInPixels;
+      setCanExpandSecondaryPanel(availableWidth >= requiredWidth);
+    };
+    updateLayout();
+    window.addEventListener("resize", updateLayout);
+    const resizeObserver = typeof ResizeObserver === "function" ? new ResizeObserver(updateLayout) : null;
+    resizeObserver?.observe(collisionBoundary);
+    if (triggerRef.current) {
+      resizeObserver?.observe(triggerRef.current);
+    }
+    return () => {
+      window.removeEventListener("resize", updateLayout);
+      resizeObserver?.disconnect();
+    };
+  }, [collisionBoundary, open]);
+  const returnToPrimaryPanel = () => {
+    setActivePanel(null);
+    setQuery("");
+  };
+  const activePanelLabel = activePanel === "targets" ? t("composer.workbuddy.targets") : activePanel === "experts" ? t("composer.workbuddy.experts") : activePanel === "skills" ? t("composer.capabilities.skills") : activePanel === "connectors" ? t("composer.workbuddy.connectors") : null;
   const normalizedQuery = query.trim().toLocaleLowerCase();
   const matchesQuery2 = (label, description) => !normalizedQuery || `${label} ${description ?? ""}`.toLocaleLowerCase().includes(normalizedQuery);
+  const renderDetailPills = (label, values) => {
+    if (!values?.length) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "text-[11px] font-medium uppercase text-muted-foreground", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
+        values.slice(0, 6).map((value) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          "span",
+          {
+            className: "max-w-full truncate rounded-md bg-muted px-1.5 py-0.5 text-[11px] text-foreground",
+            children: value
+          },
+          value
+        )),
+        values.length > 6 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "rounded-md bg-muted px-1.5 py-0.5 text-[11px] text-muted-foreground", children: [
+          "+",
+          values.length - 6
+        ] }) : null
+      ] })
+    ] });
+  };
+  const renderSubAgentDetailCard = (subAgent) => {
+    const agentKind = subAgent.type === "xpert" ? t("composer.capabilities.xpertAgent") : t("composer.capabilities.agent");
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+      "div",
+      {
+        "data-slot": "runtime-sub-agent-detail-card",
+        className: cn(
+          "pointer-events-none w-80 space-y-3 border border-border bg-popover p-3 text-popover-foreground shadow-lg",
+          panelRoundedClass
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              ChatkitAvatar,
+              {
+                avatar: normalizeChatkitAvatar(subAgent.avatar),
+                label: subAgent.label,
+                className: "h-9 w-9 shrink-0",
+                fallbackClassName: "text-xs"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "truncate text-sm font-medium", children: subAgent.label }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "truncate text-xs text-muted-foreground", children: subAgent.name ?? agentKind })
+            ] })
+          ] }),
+          subAgent.description ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "line-clamp-4 text-xs leading-5 text-muted-foreground", children: subAgent.description }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "grid grid-cols-2 gap-2 text-xs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "rounded-md bg-muted px-2 py-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "block text-[11px] text-muted-foreground", children: t("composer.capabilities.type") }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "font-medium", children: agentKind })
+            ] }),
+            subAgent.agentKey || subAgent.xpertId ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "rounded-md bg-muted px-2 py-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "block text-[11px] text-muted-foreground", children: t("composer.capabilities.identifier") }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "block truncate font-mono text-[11px]", children: subAgent.agentKey ?? subAgent.xpertId })
+            ] }) : null
+          ] }),
+          renderDetailPills(
+            t("composer.capabilities.tools"),
+            subAgent.toolNames
+          ),
+          renderDetailPills(
+            t("composer.capabilities.toolsets"),
+            subAgent.toolsetNames
+          ),
+          renderDetailPills(
+            t("composer.capabilities.knowledge"),
+            subAgent.knowledgebaseNames
+          )
+        ]
+      }
+    );
+  };
+  const renderSubAgentInfoButton = (subAgent) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      "button",
+      {
+        type: "button",
+        "aria-label": t("composer.capabilities.agentDetails"),
+        "data-slot": "runtime-sub-agent-info-trigger",
+        className: "mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground",
+        onClick: (event) => event.stopPropagation(),
+        onPointerDown: (event) => event.stopPropagation(),
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react4.Info, { size: 14 })
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      TooltipContent,
+      {
+        side: "top",
+        align: "center",
+        sideOffset: 8,
+        hideArrow: true,
+        className: "bg-transparent p-0 text-popover-foreground shadow-none",
+        children: renderSubAgentDetailCard(subAgent)
+      }
+    )
+  ] });
   const renderCapabilityPanel = (panel) => {
     const isSkills = panel === "skills";
     const filteredSkills = isSkills ? skills.filter((skill) => matchesQuery2(skill.label, skill.description)) : [];
@@ -5139,7 +5457,7 @@ function ComposerMenu({
         skill.id
       ) : false;
       const skillDescription = skill.description ?? skill.repositoryName;
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
         DropdownMenuCheckboxItem,
         {
           checked: selected,
@@ -5152,14 +5470,14 @@ function ComposerMenu({
             selected && "bg-muted"
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               "span",
               {
                 className: cn(
                   "flex size-7 shrink-0 items-center justify-center text-muted-foreground",
                   skillDescription && "mt-0.5"
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                   RuntimeCapabilityIcon,
                   {
                     option: {
@@ -5174,9 +5492,9 @@ function ComposerMenu({
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "min-w-0 flex-1 text-left", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "block truncate", children: skill.label }),
-              skillDescription && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "block truncate text-xs text-muted-foreground", children: skillDescription })
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "min-w-0 flex-1 text-left", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "block truncate", children: skill.label }),
+              skillDescription && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "block truncate text-xs text-muted-foreground", children: skillDescription })
             ] })
           ]
         },
@@ -5202,7 +5520,7 @@ function ComposerMenu({
         "subAgent",
         subAgent.nodeKey
       ) : false;
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
         DropdownMenuCheckboxItem,
         {
           checked: selected,
@@ -5218,7 +5536,7 @@ function ComposerMenu({
             selected && "bg-muted"
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "mt-0.5 flex size-7 shrink-0 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "mt-0.5 flex size-7 shrink-0 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               RuntimeCapabilityIcon,
               {
                 option: {
@@ -5231,16 +5549,17 @@ function ComposerMenu({
                 variant: "list"
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "min-w-0 flex-1 text-left", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "block truncate", children: subAgent.label }),
-              (subAgent.description || subAgent.name) && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "block truncate text-xs text-muted-foreground", children: subAgent.description ?? subAgent.name })
-            ] })
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "min-w-0 flex-1 text-left", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "block truncate", children: subAgent.label }),
+              (subAgent.description || subAgent.name) && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "block truncate text-xs text-muted-foreground", children: subAgent.description ?? subAgent.name })
+            ] }),
+            renderSubAgentInfoButton(subAgent)
           ]
         },
         subAgent.nodeKey
       );
     });
-    const toolRows = isSkills ? tools.filter((tool) => matchesQuery2(tool.label, tool.shortLabel)).map((tool) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    const toolRows = isSkills ? tools.filter((tool) => matchesQuery2(tool.label, tool.shortLabel)).map((tool) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "button",
       {
         type: "button",
@@ -5253,14 +5572,14 @@ function ComposerMenu({
           setOpen(false);
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "flex size-7 shrink-0 items-center justify-center text-muted-foreground", children: getIconComponent(tool.icon) }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "truncate", children: tool.label })
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "flex size-7 shrink-0 items-center justify-center text-muted-foreground", children: getIconComponent(tool.icon) }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "truncate", children: tool.label })
         ]
       },
       tool.id
     )) : [];
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(SecondaryPanel, { panelRoundedClass, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         PanelSearch,
         {
           value: query,
@@ -5270,29 +5589,109 @@ function ComposerMenu({
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ScrollArea, { className: "h-72 px-2 pb-2", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { "data-slot": "composer-capability-list", className: "space-y-1", children: [
-        isSkills && expertSkills.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SkillGroup, { label: t("composer.workbuddy.expertSkills"), children: expertSkills.map(renderSkillRow) }) : null,
-        isSkills ? Array.from(projectSkillGroups.entries()).map(
-          ([projectLabel, projectSkills]) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-            SkillGroup,
-            {
-              label: t("composer.workbuddy.projectSkills", {
-                project: projectLabel
-              }),
-              children: projectSkills.map(renderSkillRow)
-            },
-            projectLabel
-          )
-        ) : capabilityRows,
-        toolRows,
-        (isSkills ? filteredSkills.length : capabilityRows.length) === 0 && toolRows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex min-h-32 items-center justify-center px-4 text-center text-sm text-muted-foreground", children: t(
-          isSkills ? "composer.workbuddy.emptySkills" : "composer.workbuddy.emptyExperts"
-        ) }) : null
-      ] }) })
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        "div",
+        {
+          "data-slot": "composer-capability-scroll",
+          className: "max-h-72 overflow-y-auto overscroll-contain px-2 pb-2",
+          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { "data-slot": "composer-capability-list", className: "space-y-1", children: [
+            isSkills && expertSkills.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SkillGroup, { label: t("composer.workbuddy.expertSkills"), children: expertSkills.map(renderSkillRow) }) : null,
+            isSkills ? Array.from(projectSkillGroups.entries()).map(
+              ([projectLabel, projectSkills]) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                SkillGroup,
+                {
+                  label: t("composer.workbuddy.projectSkills", {
+                    project: projectLabel
+                  }),
+                  children: projectSkills.map(renderSkillRow)
+                },
+                projectLabel
+              )
+            ) : capabilityRows,
+            toolRows,
+            (isSkills ? filteredSkills.length : capabilityRows.length) === 0 && toolRows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex min-h-32 items-center justify-center px-4 text-center text-sm text-muted-foreground", children: t(
+              isSkills ? "composer.workbuddy.emptySkills" : "composer.workbuddy.emptyExperts"
+            ) }) : null
+          ] })
+        }
+      )
     ] });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(DropdownMenu, { open, onOpenChange: handleOpenChange, modal: false, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  const primaryPanel = /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    "div",
+    {
+      "data-slot": "composer-primary-panel",
+      className: cn(
+        "w-64 max-w-full shrink-0 overflow-hidden bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10",
+        panelRoundedClass
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          DropdownMenuItem,
+          {
+            disabled: !attachmentsEnabled,
+            onSelect: onAttachmentClick,
+            className: cn("gap-3 p-1.5 font-normal", menuItemRoundedClass),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react4.Paperclip, { className: "size-5" }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "flex-1 text-base", children: t("composer.addAttachment") }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react4.ChevronRight, { className: "size-4" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DropdownMenuSeparator, { className: "my-2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          PrimaryPanelItem,
+          {
+            icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react4.Target, {}),
+            label: t("composer.workbuddy.targets"),
+            active: activePanel === "targets",
+            onSelect: () => choosePanel("targets"),
+            className: menuItemRoundedClass
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          PrimaryPanelItem,
+          {
+            icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react4.Bot, {}),
+            label: t("composer.workbuddy.experts"),
+            count: selectedSubAgentCount,
+            active: activePanel === "experts",
+            onSelect: () => choosePanel("experts"),
+            className: menuItemRoundedClass
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          PrimaryPanelItem,
+          {
+            icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react4.WandSparkles, {}),
+            label: t("composer.capabilities.skills"),
+            count: selectedSkillCount,
+            active: activePanel === "skills",
+            onSelect: () => choosePanel("skills"),
+            className: menuItemRoundedClass
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          PrimaryPanelItem,
+          {
+            icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react4.Plug, {}),
+            label: t("composer.workbuddy.connectors"),
+            count: selectedConnectorBindingIds?.length ?? 0,
+            active: activePanel === "connectors",
+            disabled: !connectorsEnabled,
+            onSelect: () => choosePanel("connectors"),
+            className: menuItemRoundedClass
+          }
+        )
+      ]
+    }
+  );
+  const secondaryPanelExpandsRight = Boolean(
+    activePanel && activePanelLabel && canExpandSecondaryPanel
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(DropdownMenu, { open, onOpenChange: handleOpenChange, modal: false, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       Button,
       {
         ref: triggerRef,
@@ -5306,7 +5705,7 @@ function ComposerMenu({
           "size-9 shrink-0 transition-[background-color,border-radius] duration-300 hover:bg-muted",
           open ? "rounded-full bg-muted" : roundedClass
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           import_lucide_react4.Plus,
           {
             className: cn(
@@ -5317,173 +5716,116 @@ function ComposerMenu({
         )
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       DropdownMenuContent,
       {
         align: "start",
         side: "top",
         sideOffset: 8,
         collisionBoundary,
-        collisionPadding: 12,
+        collisionPadding: COMPOSER_MENU_COLLISION_PADDING,
+        "data-layout": canExpandSecondaryPanel ? "wide" : "narrow",
         className: cn(
-          "bg-transparent shadow-none ring-0",
-          activePanel ? "w-[37rem] max-w-(--radix-dropdown-menu-content-available-width) overflow-visible p-1" : "w-[16.5rem] overflow-visible p-1"
+          "max-w-(--radix-dropdown-menu-content-available-width) bg-transparent p-1 shadow-none ring-0",
+          secondaryPanelExpandsRight ? "w-[33rem] overflow-visible" : "w-[16.5rem] overflow-hidden"
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
           "div",
           {
+            "data-slot": "composer-menu-layout",
             className: cn(
-              "items-end gap-2",
-              activePanel ? "flex w-full min-w-0" : "flex"
+              "flex items-end",
+              secondaryPanelExpandsRight && "w-full min-w-0 gap-2"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-                "div",
-                {
-                  "data-slot": "composer-primary-panel",
-                  className: cn(
-                    "w-64 max-w-full shrink-0 overflow-hidden bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10",
-                    panelRoundedClass
-                  ),
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-                      DropdownMenuItem,
-                      {
-                        disabled: !attachmentsEnabled,
-                        onSelect: onAttachmentClick,
-                        className: cn("gap-3 p-1.5 font-normal", menuItemRoundedClass),
-                        children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react4.Paperclip, { className: "size-5" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "flex-1 text-base", children: t("composer.addAttachment") }),
-                          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react4.ChevronRight, { className: "size-4" })
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropdownMenuSeparator, { className: "my-2" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                      PrimaryPanelItem,
-                      {
-                        icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react4.Target, {}),
-                        label: t("composer.workbuddy.targets"),
-                        active: activePanel === "targets",
-                        onSelect: () => choosePanel("targets"),
-                        className: menuItemRoundedClass
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                      PrimaryPanelItem,
-                      {
-                        icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react4.Bot, {}),
-                        label: t("composer.workbuddy.experts"),
-                        count: selectedSubAgentCount,
-                        active: activePanel === "experts",
-                        onSelect: () => choosePanel("experts"),
-                        className: menuItemRoundedClass
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                      PrimaryPanelItem,
-                      {
-                        icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react4.WandSparkles, {}),
-                        label: t("composer.capabilities.skills"),
-                        count: selectedSkillCount,
-                        active: activePanel === "skills",
-                        onSelect: () => choosePanel("skills"),
-                        className: menuItemRoundedClass
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                      PrimaryPanelItem,
-                      {
-                        icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react4.Plug, {}),
-                        label: t("composer.workbuddy.connectors"),
-                        count: selectedConnectorBindingIds?.length ?? 0,
-                        active: activePanel === "connectors",
-                        disabled: !connectorsEnabled,
-                        onSelect: () => choosePanel("connectors"),
-                        className: menuItemRoundedClass
-                      }
-                    )
-                  ]
-                }
-              ),
-              activePanel === "targets" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SecondaryPanel, { panelRoundedClass, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "space-y-1 p-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-                  DropdownMenuItem,
+              secondaryPanelExpandsRight ? primaryPanel : null,
+              activePanel && activePanelLabel ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(SecondaryPanel, { panelRoundedClass, children: [
+                !secondaryPanelExpandsRight ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                  PanelHeader,
                   {
-                    role: "switch",
-                    "aria-checked": goalPanelOpen,
-                    disabled: !goalCommandAvailable,
-                    onSelect: (event) => {
-                      event.preventDefault();
-                      onGoalPanelOpenChange?.(!goalPanelOpen);
-                    },
-                    className: cn(
-                      "gap-3 p-1.5",
-                      menuItemRoundedClass,
-                      goalPanelOpen && "bg-muted"
-                    ),
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react4.Target, { className: "size-5" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "min-w-0 flex-1 text-base", children: t("chat.goal.label") }),
-                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Toggle, { checked: goalPanelOpen })
-                    ]
+                    label: activePanelLabel,
+                    onBack: returnToPrimaryPanel,
+                    className: menuItemRoundedClass
                   }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-                  DropdownMenuItem,
+                ) : null,
+                activePanel === "targets" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "space-y-1 p-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+                    DropdownMenuItem,
+                    {
+                      role: "switch",
+                      "aria-checked": goalPanelOpen,
+                      disabled: !goalCommandAvailable,
+                      onSelect: (event) => {
+                        event.preventDefault();
+                        onGoalPanelOpenChange?.(!goalPanelOpen);
+                      },
+                      className: cn(
+                        "gap-3 p-1.5",
+                        menuItemRoundedClass,
+                        goalPanelOpen && "bg-muted"
+                      ),
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react4.Target, { className: "size-5" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "min-w-0 flex-1 text-base", children: t("chat.goal.label") }),
+                        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Toggle, { checked: goalPanelOpen })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+                    DropdownMenuItem,
+                    {
+                      role: "switch",
+                      "aria-checked": planModeEnabled,
+                      onSelect: (event) => {
+                        event.preventDefault();
+                        onPlanModeChange?.(!planModeEnabled);
+                      },
+                      className: cn(
+                        "gap-3 p-1.5",
+                        menuItemRoundedClass,
+                        planModeEnabled && "bg-muted"
+                      ),
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react4.ListChecks, { className: "size-5" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "min-w-0 flex-1 text-base", children: t("composer.planMode") }),
+                        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Toggle, { checked: planModeEnabled })
+                      ]
+                    }
+                  )
+                ] }) : activePanel === "experts" || activePanel === "skills" ? renderCapabilityPanel(activePanel) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                  ConnectorMenuPanel,
                   {
-                    role: "switch",
-                    "aria-checked": planModeEnabled,
-                    onSelect: (event) => {
-                      event.preventDefault();
-                      onPlanModeChange?.(!planModeEnabled);
-                    },
-                    className: cn(
-                      "gap-3 p-1.5",
-                      menuItemRoundedClass,
-                      planModeEnabled && "bg-muted"
-                    ),
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react4.ListChecks, { className: "size-5" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "min-w-0 flex-1 text-base", children: t("composer.planMode") }),
-                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Toggle, { checked: planModeEnabled })
-                    ]
+                    client: connectorClient ?? null,
+                    xpertId: connectorXpertId,
+                    projectId: connectorProjectId,
+                    selectedBindingIds: selectedConnectorBindingIds,
+                    onSelectionChange: onConnectorSelectionChange,
+                    apiUrl
                   }
                 )
-              ] }) }) : activePanel === "experts" || activePanel === "skills" ? renderCapabilityPanel(activePanel) : activePanel === "connectors" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SecondaryPanel, { panelRoundedClass, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                ConnectorMenuPanel,
-                {
-                  client: connectorClient ?? null,
-                  xpertId: connectorXpertId,
-                  projectId: connectorProjectId,
-                  selectedBindingIds: selectedConnectorBindingIds,
-                  onSelectionChange: onConnectorSelectionChange,
-                  apiUrl
-                }
-              ) }) : null
+              ] }) : primaryPanel
             ]
           }
         )
       }
     ),
-    planModeEnabled ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    planModeEnabled ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       ActiveIndicator,
       {
         label: t("composer.planModeActive"),
         ariaLabel: t("composer.disablePlanMode"),
-        icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react4.ListChecks, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react4.ListChecks, {}),
         roundedClass,
         disabled,
         onClick: () => onPlanModeChange?.(false)
       }
     ) : null,
-    goalCommandAvailable && goalPanelOpen ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    goalCommandAvailable && goalPanelOpen ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       ActiveIndicator,
       {
         label: t("chat.goal.label"),
         ariaLabel: t("chat.goal.hide"),
-        icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react4.Target, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react4.Target, {}),
         roundedClass,
         disabled,
         onClick: () => onGoalPanelOpenChange?.(false)
@@ -5491,6 +5833,29 @@ function ComposerMenu({
     ) : null
   ] });
 }
+function PanelHeader({
+  label,
+  onBack,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+      DropdownMenuItem,
+      {
+        onSelect: (event) => {
+          event.preventDefault();
+          onBack();
+        },
+        className: cn("gap-3 p-1.5 font-normal", className),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react4.ArrowLeft, { className: "size-5" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "min-w-0 flex-1 text-base", children: label })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DropdownMenuSeparator, { className: "my-0" })
+  ] });
+}
 function PrimaryPanelItem({
   icon,
   label,
@@ -5500,7 +5865,7 @@ function PrimaryPanelItem({
   onSelect,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     DropdownMenuItem,
     {
       disabled,
@@ -5510,10 +5875,10 @@ function PrimaryPanelItem({
       },
       className: cn("gap-3 p-1.5 font-normal", className, active && "bg-muted"),
       children: [
-        React12.cloneElement(icon, { className: "size-5" }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "min-w-0 flex-1 text-base", children: label }),
-        count > 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "rounded-full bg-primary/10 px-1.5 py-0.5 text-xs font-normal text-primary", children: count }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react4.ChevronRight, { className: "size-4" })
+        React13.cloneElement(icon, { className: "size-5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "min-w-0 flex-1 text-base", children: label }),
+        count > 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "rounded-full bg-primary/10 px-1.5 py-0.5 text-xs font-normal text-primary", children: count }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react4.ChevronRight, { className: "size-4" })
       ]
     }
   );
@@ -5522,20 +5887,20 @@ function SecondaryPanel({
   panelRoundedClass,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "div",
     {
       "data-slot": "composer-secondary-panel",
       className: cn(
-        "min-w-0 max-w-full flex-1 overflow-hidden bg-popover text-popover-foreground shadow-lg ring-1 ring-foreground/10",
+        "w-64 min-w-0 max-w-full overflow-hidden bg-popover text-popover-foreground shadow-lg ring-1 ring-foreground/10",
         panelRoundedClass
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "div",
         {
           "data-slot": "composer-secondary-scroll",
-          className: "w-full min-w-0 overflow-x-auto overflow-y-hidden overscroll-x-contain",
-          children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "w-full min-w-80", children })
+          className: "w-full min-w-0 overflow-x-hidden",
+          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "w-full min-w-0", children })
         }
       )
     }
@@ -5546,9 +5911,9 @@ function PanelSearch({
   onChange,
   placeholder
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "relative p-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react4.Search, { className: "pointer-events-none absolute left-5 top-1/2 size-5 -translate-y-1/2 text-muted-foreground" }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { "data-slot": "composer-panel-search", className: "px-2 pt-1 pb-2", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react4.Search, { className: "pointer-events-none absolute left-3 top-1/2 size-5 -translate-y-1/2 text-muted-foreground" }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       Input,
       {
         autoFocus: true,
@@ -5558,14 +5923,14 @@ function PanelSearch({
         className: "h-8 border-0 bg-muted pl-10 text-base shadow-none focus-visible:ring-1"
       }
     )
-  ] });
+  ] }) });
 }
 function SkillGroup({
   label,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("section", { "data-slot": "composer-skill-group", className: "space-y-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "px-1.5 pt-1 text-xs font-normal text-muted-foreground", children: label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("section", { "data-slot": "composer-skill-group", className: "space-y-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "px-1.5 pt-1 text-xs font-normal text-muted-foreground", children: label }),
     children
   ] });
 }
@@ -5577,7 +5942,7 @@ function ActiveIndicator({
   disabled,
   onClick
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "button",
     {
       type: "button",
@@ -5589,28 +5954,28 @@ function ActiveIndicator({
         roundedClass
       ),
       children: [
-        React12.cloneElement(icon, { className: "mr-1.5 size-3.5" }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react4.X, { className: "ml-0 h-3.5 w-0 shrink-0 overflow-hidden opacity-0 transition-[width,margin,opacity] duration-200 group-hover/indicator:ml-1 group-hover/indicator:w-3.5 group-hover/indicator:opacity-100 group-focus-visible/indicator:ml-1 group-focus-visible/indicator:w-3.5 group-focus-visible/indicator:opacity-100" })
+        React13.cloneElement(icon, { className: "mr-1.5 size-3.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react4.X, { className: "ml-0 h-3.5 w-0 shrink-0 overflow-hidden opacity-0 transition-[width,margin,opacity] duration-200 group-hover/indicator:ml-1 group-hover/indicator:w-3.5 group-hover/indicator:opacity-100 group-focus-visible/indicator:ml-1 group-focus-visible/indicator:w-3.5 group-focus-visible/indicator:opacity-100" })
       ]
     }
   );
 }
 
 // src/components/composer/ModelPicker.tsx
-var React13 = __toESM(require("react"), 1);
+var React14 = __toESM(require("react"), 1);
 var import_lucide_react5 = require("lucide-react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function ModelProviderAvatar({
   avatar,
   className,
   imageClassName,
   iconClassName
 }) {
-  const [failedUrl, setFailedUrl] = React13.useState(null);
+  const [failedUrl, setFailedUrl] = React14.useState(null);
   const avatarUrl = avatar?.url;
   const showImage = Boolean(avatarUrl && failedUrl !== avatarUrl);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "span",
     {
       "aria-hidden": "true",
@@ -5620,7 +5985,7 @@ function ModelProviderAvatar({
         className
       ),
       style: avatar?.background ? { backgroundColor: avatar.background } : void 0,
-      children: showImage ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      children: showImage ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "img",
         {
           "data-slot": "model-provider-avatar-image",
@@ -5629,7 +5994,7 @@ function ModelProviderAvatar({
           className: cn("size-full object-contain p-1", imageClassName),
           onError: () => setFailedUrl(avatarUrl ?? null)
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react5.Bot, { "aria-hidden": "true", className: cn("size-3.5", iconClassName) })
+      ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react5.Bot, { "aria-hidden": "true", className: cn("size-3.5", iconClassName) })
     }
   );
 }
@@ -5645,8 +6010,8 @@ function ModelPicker({
   const selectedModel = enabledModels.find(
     (model) => model.id === selectedModelId
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(DropdownMenu, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(DropdownMenu, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
       "button",
       {
         type: "button",
@@ -5660,7 +6025,7 @@ function ModelPicker({
           "disabled:pointer-events-none disabled:opacity-50"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             ModelProviderAvatar,
             {
               avatar: selectedModel?.avatar,
@@ -5669,8 +6034,8 @@ function ModelPicker({
               iconClassName: "size-3"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "truncate", children: selectedModel?.label ?? copy.label }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "truncate", children: selectedModel?.label ?? copy.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             import_lucide_react5.ChevronDown,
             {
               "aria-hidden": "true",
@@ -5680,7 +6045,7 @@ function ModelPicker({
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
       DropdownMenuContent,
       {
         align: "end",
@@ -5689,8 +6054,8 @@ function ModelPicker({
         collisionPadding: 12,
         className: "w-80 max-w-[calc(100vw-1.5rem)] overflow-hidden rounded-xl p-0",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-start gap-3 px-3 py-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-start gap-3 px-3 py-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
               ModelProviderAvatar,
               {
                 avatar: selectedModel?.avatar,
@@ -5698,34 +6063,34 @@ function ModelPicker({
                 iconClassName: "size-4"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "min-w-0 flex-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "block text-sm font-semibold text-popover-foreground", children: copy.title }),
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "mt-0.5 block text-xs leading-4 text-muted-foreground", children: copy.description })
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "block text-sm font-semibold text-popover-foreground", children: copy.title }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "mt-0.5 block text-xs leading-4 text-muted-foreground", children: copy.description })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DropdownMenuSeparator, { className: "mx-0 my-0" }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DropdownMenuLabel, { className: "px-3 pt-2.5 pb-1 text-[11px] font-semibold tracking-wide uppercase", children: copy.availableModels }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DropdownMenuSeparator, { className: "mx-0 my-0" }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DropdownMenuLabel, { className: "px-3 pt-2.5 pb-1 text-[11px] font-semibold tracking-wide uppercase", children: copy.availableModels }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             DropdownMenuRadioGroup,
             {
               value: selectedModel?.id ?? "",
               onValueChange: onSelect,
               className: "space-y-0.5 px-1.5 pb-1.5",
-              children: models.map((model) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+              children: models.map((model) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
                 DropdownMenuRadioItem,
                 {
                   value: model.id,
                   disabled: model.disabled,
                   className: "min-h-12 cursor-pointer items-center gap-2.5 rounded-lg px-2 py-2 pr-9 data-disabled:cursor-not-allowed",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ModelProviderAvatar, { avatar: model.avatar, className: "size-7" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "min-w-0 flex-1", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "flex min-w-0 items-center gap-1.5", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "truncate font-medium text-popover-foreground", children: model.label }),
-                        model.default ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "shrink-0 rounded-full bg-primary/10 px-1.5 py-0.5 text-[10px] font-medium text-primary", children: copy.defaultBadge }) : null,
-                        model.disabled ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "shrink-0 rounded-full bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground", children: copy.unavailableBadge }) : null
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ModelProviderAvatar, { avatar: model.avatar, className: "size-7" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "min-w-0 flex-1", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "flex min-w-0 items-center gap-1.5", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "truncate font-medium text-popover-foreground", children: model.label }),
+                        model.default ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "shrink-0 rounded-full bg-primary/10 px-1.5 py-0.5 text-[10px] font-medium text-primary", children: copy.defaultBadge }) : null,
+                        model.disabled ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "shrink-0 rounded-full bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground", children: copy.unavailableBadge }) : null
                       ] }),
-                      model.description ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "mt-0.5 block truncate text-xs text-muted-foreground", children: model.description }) : null
+                      model.description ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "mt-0.5 block truncate text-xs text-muted-foreground", children: model.description }) : null
                     ] })
                   ]
                 },
@@ -5733,26 +6098,26 @@ function ModelPicker({
               ))
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DropdownMenuSeparator, { className: "mx-0 my-0" }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DropdownMenuSeparator, { className: "mx-0 my-0" }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
             "div",
             {
               "data-slot": "model-picker-future-controls",
               className: "flex items-center gap-2.5 bg-muted/30 px-3 py-2.5",
               "aria-disabled": "true",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                   import_lucide_react5.SlidersHorizontal,
                   {
                     "aria-hidden": "true",
                     className: "size-4 shrink-0 text-muted-foreground"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "min-w-0 flex-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "block text-xs font-medium text-popover-foreground", children: copy.futureTitle }),
-                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "block truncate text-[11px] text-muted-foreground", children: copy.futureDescription })
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "block text-xs font-medium text-popover-foreground", children: copy.futureTitle }),
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "block truncate text-[11px] text-muted-foreground", children: copy.futureDescription })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "shrink-0 rounded-full border border-border px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground", children: copy.futureBadge })
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "shrink-0 rounded-full border border-border px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground", children: copy.futureBadge })
               ]
             }
           )
@@ -5763,9 +6128,9 @@ function ModelPicker({
 }
 
 // src/components/composer/WorkspaceFileMentionPalette.tsx
-var React14 = __toESM(require("react"), 1);
+var React15 = __toESM(require("react"), 1);
 var import_lucide_react6 = require("lucide-react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var WORKSPACE_FILE_LIST_DEPTH = 12;
 function getWorkspaceFilePath(file) {
   return file.fullPath?.trim() || file.filePath.trim();
@@ -5777,7 +6142,7 @@ function flattenWorkspaceFiles(files) {
     return [...isDirectory ? [] : [file], ...flattenWorkspaceFiles(children)];
   });
 }
-var WorkspaceFileMentionPalette = React14.forwardRef(function WorkspaceFileMentionPalette2({
+var WorkspaceFileMentionPalette = React15.forwardRef(function WorkspaceFileMentionPalette2({
   client,
   assistantId,
   projectId,
@@ -5787,14 +6152,14 @@ var WorkspaceFileMentionPalette = React14.forwardRef(function WorkspaceFileMenti
   className
 }, ref) {
   const { t } = useChatkitTranslation();
-  const [files, setFiles] = React14.useState([]);
-  const [loading, setLoading] = React14.useState(false);
-  const [error, setError] = React14.useState(null);
-  const [activeIndex, setActiveIndex] = React14.useState(0);
-  const activeIndexRef = React14.useRef(0);
-  const optionRefs = React14.useRef([]);
+  const [files, setFiles] = React15.useState([]);
+  const [loading, setLoading] = React15.useState(false);
+  const [error, setError] = React15.useState(null);
+  const [activeIndex, setActiveIndex] = React15.useState(0);
+  const activeIndexRef = React15.useRef(0);
+  const optionRefs = React15.useRef([]);
   const loadErrorMessage = t("composer.fileMentions.loadError");
-  React14.useEffect(() => {
+  React15.useEffect(() => {
     if (!client || !projectId && !assistantId) {
       setFiles([]);
       setLoading(false);
@@ -5826,7 +6191,7 @@ var WorkspaceFileMentionPalette = React14.forwardRef(function WorkspaceFileMenti
     return () => controller.abort();
   }, [assistantId, client, loadErrorMessage, projectId]);
   const normalizedQuery = query.trim().toLocaleLowerCase();
-  const visibleFiles = React14.useMemo(
+  const visibleFiles = React15.useMemo(
     () => files.filter((file) => {
       const filePath = getWorkspaceFilePath(file);
       if (selectedFilePaths.has(filePath)) return false;
@@ -5835,17 +6200,17 @@ var WorkspaceFileMentionPalette = React14.forwardRef(function WorkspaceFileMenti
     }),
     [files, normalizedQuery, selectedFilePaths]
   );
-  React14.useLayoutEffect(() => {
+  React15.useLayoutEffect(() => {
     setActiveIndex((current) => {
       const nextIndex = visibleFiles.length === 0 ? 0 : Math.min(current, visibleFiles.length - 1);
       activeIndexRef.current = nextIndex;
       return nextIndex;
     });
   }, [visibleFiles.length]);
-  React14.useEffect(() => {
+  React15.useEffect(() => {
     optionRefs.current[activeIndex]?.scrollIntoView?.({ block: "nearest" });
   }, [activeIndex]);
-  React14.useImperativeHandle(
+  React15.useImperativeHandle(
     ref,
     () => ({
       moveActive: (direction) => {
@@ -5864,7 +6229,7 @@ var WorkspaceFileMentionPalette = React14.forwardRef(function WorkspaceFileMenti
     [onSelect, visibleFiles]
   );
   const unavailable = !client || !projectId && !assistantId;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     "div",
     {
       "data-slot": "workspace-file-mention-palette",
@@ -5873,20 +6238,20 @@ var WorkspaceFileMentionPalette = React14.forwardRef(function WorkspaceFileMenti
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "border-b border-border px-3 py-2 text-xs font-medium text-muted-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "border-b border-border px-3 py-2 text-xs font-medium text-muted-foreground", children: [
           t("composer.fileMentions.title"),
-          query ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "ml-1 text-foreground", children: [
+          query ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "ml-1 text-foreground", children: [
             "@",
             query
           ] }) : null
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "max-h-56 overflow-y-auto p-1", children: unavailable ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(PaletteMessage, { children: t("composer.fileMentions.unavailable") }) : loading ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(PaletteMessage, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react6.Loader2, { className: "size-4 animate-spin" }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "max-h-56 overflow-y-auto p-1", children: unavailable ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(PaletteMessage, { children: t("composer.fileMentions.unavailable") }) : loading ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(PaletteMessage, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react6.Loader2, { className: "size-4 animate-spin" }),
           t("composer.fileMentions.loading")
-        ] }) : error ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(PaletteMessage, { role: "alert", children: error }) : visibleFiles.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(PaletteMessage, { children: t("composer.fileMentions.empty") }) : visibleFiles.map((file, index) => {
+        ] }) : error ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(PaletteMessage, { role: "alert", children: error }) : visibleFiles.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(PaletteMessage, { children: t("composer.fileMentions.empty") }) : visibleFiles.map((file, index) => {
           const filePath = getWorkspaceFilePath(file);
           const label = file.filePath || filePath;
-          return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
             "button",
             {
               ref: (node) => {
@@ -5907,10 +6272,10 @@ var WorkspaceFileMentionPalette = React14.forwardRef(function WorkspaceFileMenti
                 index === activeIndex && "bg-muted"
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-md bg-background text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react6.FileText, { className: "size-4" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "min-w-0 flex-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "block truncate font-medium", children: label }),
-                  filePath || file.mimeType ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "block truncate text-xs text-muted-foreground", children: filePath || file.mimeType }) : null
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-md bg-background text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react6.FileText, { className: "size-4" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "block truncate font-medium", children: label }),
+                  filePath || file.mimeType ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "block truncate text-xs text-muted-foreground", children: filePath || file.mimeType }) : null
                 ] })
               ]
             },
@@ -5925,7 +6290,7 @@ function PaletteMessage({
   children,
   role
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "div",
     {
       role,
@@ -5936,22 +6301,22 @@ function PaletteMessage({
 }
 
 // src/components/composer/ProjectSelector.tsx
-var React16 = __toESM(require("react"), 1);
+var React17 = __toESM(require("react"), 1);
 var import_lucide_react7 = require("lucide-react");
 
 // src/components/ui/popover.tsx
-var React15 = require("react");
+var React16 = require("react");
 var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"), 1);
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function Popover({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
 }
 function PopoverTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
 }
 function PopoverContent({
   className,
@@ -5959,7 +6324,7 @@ function PopoverContent({
   sideOffset = 4,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     PopoverPrimitive.Content,
     {
       "data-slot": "popover-content",
@@ -5975,7 +6340,7 @@ function PopoverContent({
 }
 
 // src/components/composer/ProjectSelector.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var PROJECT_PAGE_SIZE = 100;
 async function listAllAvailableProjects(projectsClient, xpertId, signal) {
   const projects = [];
@@ -6009,20 +6374,20 @@ function ProjectSelector({
 }) {
   const { t } = useChatkitTranslation();
   const { theme } = useTheme();
-  const [open, setOpen] = React16.useState(false);
-  const [query, setQuery] = React16.useState("");
-  const [createMode, setCreateMode] = React16.useState(false);
-  const [newProjectName, setNewProjectName] = React16.useState("");
-  const [projects, setProjects] = React16.useState([]);
-  const [loadFailed, setLoadFailed] = React16.useState(false);
-  const [loadedFor, setLoadedFor] = React16.useState(null);
+  const [open, setOpen] = React17.useState(false);
+  const [query, setQuery] = React17.useState("");
+  const [createMode, setCreateMode] = React17.useState(false);
+  const [newProjectName, setNewProjectName] = React17.useState("");
+  const [projects, setProjects] = React17.useState([]);
+  const [loadFailed, setLoadFailed] = React17.useState(false);
+  const [loadedFor, setLoadedFor] = React17.useState(null);
   const panelRoundedClass = getPanelRoundedClass(theme.radius);
   const menuItemRoundedClass = getMenuItemRoundedClass(theme.radius);
   const lockedProjectLabel = label?.trim();
-  React16.useEffect(() => {
+  React17.useEffect(() => {
     if (disabled) setOpen(false);
   }, [disabled]);
-  React16.useEffect(() => {
+  React17.useEffect(() => {
     if (locked) {
       setProjects([]);
       setLoadFailed(false);
@@ -6062,12 +6427,12 @@ function ProjectSelector({
     });
     return () => controller.abort();
   }, [client, locked, xpertId]);
-  const activeProject = React16.useMemo(
+  const activeProject = React17.useMemo(
     () => projects.find((project) => project.id === activeProjectId) ?? null,
     [activeProjectId, projects]
   );
   const normalizedQuery = query.trim().toLocaleLowerCase();
-  const filteredProjects = React16.useMemo(
+  const filteredProjects = React17.useMemo(
     () => projects.filter((project) => {
       if (!normalizedQuery) return true;
       return project.name.toLocaleLowerCase().includes(normalizedQuery);
@@ -6077,24 +6442,24 @@ function ProjectSelector({
   const hasAvailableProjects = locked ? Boolean(activeProjectId) : loadedFor?.client === client && loadedFor.xpertId === xpertId && !loadFailed && projects.length > 0;
   const projectRailAvailable = hasAvailableProjects || Boolean(onProjectCreate);
   const isLoadingProjects = !locked && Boolean(client && xpertId) && loadedFor === null && !loadFailed;
-  React16.useEffect(() => {
+  React17.useEffect(() => {
     onAvailabilityChange?.(projectRailAvailable);
   }, [onAvailabilityChange, projectRailAvailable]);
   if (locked && activeProjectId) {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "div",
       {
         "data-slot": "composer-project-rail",
         className: "flex h-10 min-w-0 items-center px-1",
-        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
           "div",
           {
             "data-slot": "composer-project-locked",
             className: "inline-flex h-5 max-w-full items-center gap-1.5 rounded-sm px-2 text-sm text-muted-foreground",
             title: lockedProjectLabel || activeProjectId,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react7.FolderLock, { className: "size-3.5 shrink-0" }),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "truncate", children: lockedProjectLabel || activeProjectId })
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.FolderLock, { className: "size-3.5 shrink-0" }),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "truncate", children: lockedProjectLabel || activeProjectId })
             ]
           }
         )
@@ -6102,12 +6467,12 @@ function ProjectSelector({
     );
   }
   if (!projectRailAvailable) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "div",
     {
       "data-slot": "composer-project-rail",
       className: "flex h-10 min-w-0 items-center px-1",
-      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
         Popover,
         {
           open,
@@ -6120,7 +6485,7 @@ function ProjectSelector({
             }
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
               "button",
               {
                 type: "button",
@@ -6128,13 +6493,13 @@ function ProjectSelector({
                 className: "inline-flex h-5 max-w-full items-center gap-1.5 rounded-sm px-2 text-sm text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
                 "aria-label": t("composer.projects.select"),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react7.Folder, { className: "size-3.5 shrink-0" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "truncate", children: activeProject?.name ?? t("composer.projects.select") }),
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react7.ChevronDown, { className: "size-3.5 shrink-0" })
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.Folder, { className: "size-3.5 shrink-0" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "truncate", children: activeProject?.name ?? t("composer.projects.select") }),
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.ChevronDown, { className: "size-3.5 shrink-0" })
                 ]
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
               PopoverContent,
               {
                 side: "top",
@@ -6142,15 +6507,15 @@ function ProjectSelector({
                 sideOffset: 8,
                 collisionPadding: 8,
                 className: cn(
-                  "w-64 max-w-[calc(100vw-1rem)] overflow-hidden border-0 bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10",
+                  "flex max-h-(--radix-popover-content-available-height) w-64 max-w-[calc(100vw-1rem)] overflow-hidden border-0 bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10",
                   panelRoundedClass
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                   "div",
                   {
                     "data-slot": "composer-project-command",
-                    className: "flex size-full flex-col overflow-hidden",
-                    children: createMode ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+                    className: "flex min-h-0 w-full flex-col overflow-hidden",
+                    children: createMode ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
                       "form",
                       {
                         "data-slot": "composer-project-create-form",
@@ -6163,7 +6528,7 @@ function ProjectSelector({
                           setOpen(false);
                         },
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                             Input,
                             {
                               autoFocus: true,
@@ -6178,8 +6543,8 @@ function ProjectSelector({
                               )
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex justify-end gap-2", children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex justify-end gap-2", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                               "button",
                               {
                                 type: "button",
@@ -6191,7 +6556,7 @@ function ProjectSelector({
                                 children: t("composer.projects.cancel")
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                               "button",
                               {
                                 type: "submit",
@@ -6203,15 +6568,15 @@ function ProjectSelector({
                           ] })
                         ]
                       }
-                    ) : /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
                         "div",
                         {
                           "data-slot": "composer-project-search",
-                          className: "relative mb-2",
+                          className: "relative mb-2 shrink-0",
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react7.Search, { className: "pointer-events-none absolute left-3 top-1/2 z-10 size-4 -translate-y-1/2 text-muted-foreground" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.Search, { className: "pointer-events-none absolute left-3 top-1/2 z-10 size-4 -translate-y-1/2 text-muted-foreground" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                               Input,
                               {
                                 autoFocus: true,
@@ -6227,70 +6592,77 @@ function ProjectSelector({
                           ]
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ScrollArea, { className: "max-h-75", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                         "div",
                         {
-                          "data-slot": "composer-project-list",
-                          className: "flex flex-col",
-                          children: [
-                            activeProjectId && !normalizedQuery ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-                              "button",
-                              {
-                                type: "button",
-                                "data-slot": "composer-project-clear",
-                                className: cn(
-                                  "relative flex w-full cursor-default select-none items-center gap-3 px-1.5 py-1.5 text-left text-base outline-none hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground",
-                                  menuItemRoundedClass
-                                ),
-                                onClick: () => {
-                                  if (disabled) return;
-                                  onProjectChange?.(null);
-                                  setOpen(false);
-                                },
-                                children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react7.FolderX, { className: "size-5 shrink-0 text-muted-foreground" }),
-                                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "min-w-0 flex-1 truncate font-normal", children: t("composer.projects.none") })
-                                ]
-                              }
-                            ) : null,
-                            isLoadingProjects ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ProjectMessage, { children: t("composer.projects.loading") }) : loadFailed ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ProjectMessage, { children: t("composer.projects.loadError") }) : filteredProjects.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ProjectMessage, { children: t("composer.projects.empty") }) : filteredProjects.map((project) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-                              "button",
-                              {
-                                type: "button",
-                                "data-slot": "composer-project-item",
-                                className: cn(
-                                  "relative flex w-full cursor-default select-none items-center gap-3 px-1.5 py-1.5 text-left text-base outline-none hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground",
-                                  menuItemRoundedClass,
-                                  project.id === activeProjectId && "bg-accent text-accent-foreground"
-                                ),
-                                onClick: () => {
-                                  if (disabled) return;
-                                  if (project.id !== activeProjectId) {
-                                    onProjectChange?.(project.id);
+                          "data-slot": "composer-project-scroll-region",
+                          className: "min-h-0 flex-1 max-h-75 overflow-y-auto overscroll-contain",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+                            "div",
+                            {
+                              "data-slot": "composer-project-list",
+                              className: "flex flex-col",
+                              children: [
+                                activeProjectId && !normalizedQuery ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+                                  "button",
+                                  {
+                                    type: "button",
+                                    "data-slot": "composer-project-clear",
+                                    className: cn(
+                                      "relative flex w-full cursor-default select-none items-center gap-3 px-1.5 py-1.5 text-left text-base outline-none hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground",
+                                      menuItemRoundedClass
+                                    ),
+                                    onClick: () => {
+                                      if (disabled) return;
+                                      onProjectChange?.(null);
+                                      setOpen(false);
+                                    },
+                                    children: [
+                                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.FolderX, { className: "size-5 shrink-0 text-muted-foreground" }),
+                                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "min-w-0 flex-1 truncate font-normal", children: t("composer.projects.none") })
+                                    ]
                                   }
-                                  setOpen(false);
-                                },
-                                children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react7.Folder, { className: "size-5 shrink-0 text-muted-foreground" }),
-                                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "min-w-0 flex-1 truncate font-normal", children: project.name }),
-                                  project.id === activeProjectId ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react7.Check, { className: "size-4 shrink-0" }) : null
-                                ]
-                              },
-                              project.id
-                            ))
-                          ]
+                                ) : null,
+                                isLoadingProjects ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ProjectMessage, { children: t("composer.projects.loading") }) : loadFailed ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ProjectMessage, { children: t("composer.projects.loadError") }) : filteredProjects.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ProjectMessage, { children: t("composer.projects.empty") }) : filteredProjects.map((project) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+                                  "button",
+                                  {
+                                    type: "button",
+                                    "data-slot": "composer-project-item",
+                                    className: cn(
+                                      "relative flex w-full cursor-default select-none items-center gap-3 px-1.5 py-1.5 text-left text-base outline-none hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground",
+                                      menuItemRoundedClass,
+                                      project.id === activeProjectId && "bg-accent text-accent-foreground"
+                                    ),
+                                    onClick: () => {
+                                      if (disabled) return;
+                                      if (project.id !== activeProjectId) {
+                                        onProjectChange?.(project.id);
+                                      }
+                                      setOpen(false);
+                                    },
+                                    children: [
+                                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.Folder, { className: "size-5 shrink-0 text-muted-foreground" }),
+                                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "min-w-0 flex-1 truncate font-normal", children: project.name }),
+                                      project.id === activeProjectId ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.Check, { className: "size-4 shrink-0" }) : null
+                                    ]
+                                  },
+                                  project.id
+                                ))
+                              ]
+                            }
+                          )
                         }
-                      ) }),
-                      onProjectCreate ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+                      ),
+                      onProjectCreate ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
                         "button",
                         {
                           type: "button",
                           "data-slot": "composer-project-create",
-                          className: "mt-1 flex w-full items-center gap-3 border-t border-border px-1.5 py-1.5 text-left text-sm font-normal outline-none hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground",
+                          className: "mt-1 flex w-full shrink-0 items-center gap-3 border-t border-border px-1.5 py-1.5 text-left text-sm font-normal outline-none hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground",
                           onClick: () => setCreateMode(true),
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react7.Plus, { className: "size-4 shrink-0" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: t("composer.projects.new") })
+                            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.Plus, { className: "size-4 shrink-0" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: t("composer.projects.new") })
                           ]
                         }
                       ) : null
@@ -6306,77 +6678,11 @@ function ProjectSelector({
   );
 }
 function ProjectMessage({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex min-h-24 items-center justify-center px-4 text-center text-sm text-muted-foreground", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex min-h-24 items-center justify-center px-4 text-center text-sm text-muted-foreground", children });
 }
 
 // src/components/composer/SendButton.tsx
 var import_lucide_react8 = require("lucide-react");
-
-// src/components/ui/tooltip.tsx
-var React17 = require("react");
-var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
-var import_jsx_runtime19 = require("react/jsx-runtime");
-function TooltipProvider({
-  delayDuration = 0,
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    TooltipPrimitive.Provider,
-    {
-      "data-slot": "tooltip-provider",
-      delayDuration,
-      ...props
-    }
-  );
-}
-function Tooltip({
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    TooltipPrimitive.Root,
-    {
-      "data-slot": "tooltip",
-      ...props
-    }
-  ) });
-}
-function TooltipTrigger({
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    TooltipPrimitive.Trigger,
-    {
-      "data-slot": "tooltip-trigger",
-      ...props
-    }
-  );
-}
-function TooltipContent({
-  className,
-  sideOffset = 0,
-  hideArrow = false,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-    TooltipPrimitive.Content,
-    {
-      "data-slot": "tooltip-content",
-      sideOffset,
-      className: cn(
-        "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TooltipPrimitive.Arrow, { className: "bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" }) : null
-      ]
-    }
-  ) });
-}
-
-// src/components/composer/SendButton.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
 function SendButton({
   disabled = false,
@@ -20382,7 +20688,8 @@ function useTaskSummary({
   enabled,
   conversationId,
   client,
-  live
+  live,
+  refreshVersion = 0
 }) {
   const [loaded, setLoaded] = React59.useState(null);
   const [historySections, setHistorySections] = React59.useState({});
@@ -20427,7 +20734,14 @@ function useTaskSummary({
       abortSectionRequests();
       requestVersionRef.current += 1;
     };
-  }, [abortSectionRequests, client, conversationId, enabled, retryVersion]);
+  }, [
+    abortSectionRequests,
+    client,
+    conversationId,
+    enabled,
+    refreshVersion,
+    retryVersion
+  ]);
   const snapshot = loaded?.conversationId === conversationId ? loaded.snapshot : null;
   const activeHistorySections = React59.useMemo(
     () => historySectionsConversationId === conversationId ? historySections : {},
@@ -20469,13 +20783,7 @@ function useTaskSummary({
         }
       }
     },
-    [
-      activeHistorySections,
-      client,
-      conversationId,
-      enabled,
-      loadingSections
-    ]
+    [activeHistorySections, client, conversationId, enabled, loadingSections]
   );
   return {
     summary: mergeTaskSummary(snapshot, live, activeHistorySections),
@@ -20580,6 +20888,7 @@ function TaskSummaryContent({
 }) {
   const { t } = useChatkitTranslation();
   const [expanded, setExpanded] = React60.useState({});
+  const [expandedLocal, setExpandedLocal] = React60.useState({});
   const hasTask = Boolean(
     summary.goal || summary.plan || summary.todos?.items.length
   );
@@ -20594,6 +20903,12 @@ function TaskSummaryContent({
     }
   };
   const sectionItems = (section, items) => expanded[section] ? items : items.slice(0, PREVIEW_SIZE);
+  const localSectionItems = (section, items) => expandedLocal[section] ? items : items.slice(0, PREVIEW_SIZE);
+  const localizedStatus = (status) => {
+    if (!status) return void 0;
+    const key = status.trim().toLowerCase().replace(/[\s-]+/g, "_");
+    return t(`taskSummary.status.${key}`, { defaultValue: status });
+  };
   const openSummaryItem = (resource, messageId, title) => {
     if (resource?.type === "message") {
       onNavigateMessage(resource.messageId);
@@ -20626,6 +20941,25 @@ function TaskSummaryContent({
       }
     );
   };
+  const localSectionAction = (section, total2) => {
+    if (total2 <= PREVIEW_SIZE) return null;
+    const isExpanded = Boolean(expandedLocal[section]);
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
+      "button",
+      {
+        type: "button",
+        className: "mt-1 flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground",
+        onClick: () => setExpandedLocal((state) => ({
+          ...state,
+          [section]: !isExpanded
+        })),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_lucide_react36.ListChecks, { className: "size-3.5" }),
+          isExpanded ? t("taskSummary.collapse") : t("taskSummary.viewAll", { count: total2 })
+        ]
+      }
+    );
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "divide-y divide-border/70", children: [
     Boolean(historyError) && /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "m-3 flex items-start justify-between gap-3 rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2 text-xs text-destructive", children: [
       /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { children: t("taskSummary.historyError") }),
@@ -20642,52 +20976,41 @@ function TaskSummaryContent({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
-      SummarySection,
-      {
-        title: t("taskSummary.sections.outputs"),
-        children: [
-          summary.outputs.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(SummaryPrompt, { onClick: onFocusComposer, children: t("taskSummary.createOutput") }) : sectionItems("outputs", summary.outputs).map((item) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
-            SummaryButton,
-            {
-              title: item.title,
-              description: item.description ?? item.status,
-              leading: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_lucide_react36.FileOutput, { className: "size-4" }),
-              trailing: item.resource && item.resource.type !== "message" ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_lucide_react36.ExternalLink, { className: "size-3.5" }) : void 0,
-              onClick: () => openSummaryItem(item.resource, item.messageId, item.title)
-            },
-            item.id
-          )),
-          sectionAction("outputs", summary.totals.outputs)
-        ]
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
-      SummarySection,
-      {
-        title: t("taskSummary.sections.sources"),
-        children: [
-          sectionItems("sources", summary.sources).map((item) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
-            SummaryButton,
-            {
-              title: item.title,
-              description: item.description,
-              leading: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_lucide_react36.BookOpen, { className: "size-4" }),
-              trailing: item.resource && item.resource.type !== "message" ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_lucide_react36.ExternalLink, { className: "size-3.5" }) : void 0,
-              onClick: () => openSummaryItem(item.resource, item.messageId, item.title)
-            },
-            item.id
-          )),
-          sectionAction("sources", summary.totals.sources)
-        ]
-      }
-    ),
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(SummarySection, { title: t("taskSummary.sections.outputs"), children: [
+      summary.outputs.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(SummaryPrompt, { onClick: onFocusComposer, children: t("taskSummary.createOutput") }) : sectionItems("outputs", summary.outputs).map((item) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+        SummaryButton,
+        {
+          title: item.title,
+          metadata: localizedStatus(item.status),
+          description: item.description,
+          leading: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_lucide_react36.FileOutput, { className: "size-4" }),
+          trailing: item.resource && item.resource.type !== "message" ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_lucide_react36.ExternalLink, { className: "size-3.5" }) : void 0,
+          onClick: () => openSummaryItem(item.resource, item.messageId, item.title)
+        },
+        item.id
+      )),
+      sectionAction("outputs", summary.totals.outputs)
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(SummarySection, { title: t("taskSummary.sections.sources"), children: [
+      sectionItems("sources", summary.sources).map((item) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+        SummaryButton,
+        {
+          title: item.title,
+          description: item.description,
+          leading: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_lucide_react36.BookOpen, { className: "size-4" }),
+          trailing: item.resource && item.resource.type !== "message" ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_lucide_react36.ExternalLink, { className: "size-3.5" }) : void 0,
+          onClick: () => openSummaryItem(item.resource, item.messageId, item.title)
+        },
+        item.id
+      )),
+      sectionAction("sources", summary.totals.sources)
+    ] }),
     hasTask && /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(SummarySection, { title: t("taskSummary.sections.task"), children: [
       summary.goal && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
         SummaryButton,
         {
           title: summary.goal.objective,
-          description: summary.goal.status,
+          metadata: localizedStatus(summary.goal.status),
           leading: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_lucide_react36.Target, { className: "size-4" }),
           onClick: onFocusComposer
         }
@@ -20701,34 +21024,45 @@ function TaskSummaryContent({
           onClick: () => summary.plan?.messageId ? onNavigateMessage(summary.plan.messageId) : onFocusComposer()
         }
       ),
-      (summary.todos?.items ?? []).slice(0, PREVIEW_SIZE).map((todo) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+      localSectionItems("todos", summary.todos?.items ?? []).map(
+        (todo) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+          SummaryButton,
+          {
+            title: todo.content,
+            metadata: localizedStatus(todo.status),
+            leading: todo.status === "completed" ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_lucide_react36.CheckCircle2, { className: "size-4 text-muted-foreground" }) : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_lucide_react36.CircleEllipsis, { className: "size-4 text-muted-foreground" }),
+            onClick: () => summary.todos?.messageId ? onNavigateMessage(summary.todos.messageId) : onFocusComposer()
+          },
+          todo.id
+        )
+      ),
+      localSectionAction("todos", summary.todos?.items.length ?? 0)
+    ] }),
+    summary.running.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(SummarySection, { title: t("taskSummary.sections.running"), children: [
+      localSectionItems("running", summary.running).map((item) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
         SummaryButton,
         {
-          title: todo.content,
-          description: t(`taskSummary.status.${todo.status}`),
-          leading: todo.status === "completed" ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_lucide_react36.CheckCircle2, { className: "size-4 text-muted-foreground" }) : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_lucide_react36.CircleEllipsis, { className: "size-4 text-muted-foreground" }),
-          onClick: () => summary.todos?.messageId ? onNavigateMessage(summary.todos.messageId) : onFocusComposer()
+          title: item.title,
+          metadata: localizedStatus(item.status),
+          description: item.description,
+          leading: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_lucide_react36.PlayCircle, { className: "size-4" }),
+          trailing: item.resource ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_lucide_react36.ExternalLink, { className: "size-3.5" }) : void 0,
+          onClick: () => item.resource && onOpenResource(item.resource, void 0, item.title)
         },
-        todo.id
-      ))
+        item.id
+      )),
+      localSectionAction("running", summary.running.length)
     ] }),
-    summary.running.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(SummarySection, { title: t("taskSummary.sections.running"), children: summary.running.slice(0, PREVIEW_SIZE).map((item) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
-      SummaryButton,
-      {
-        title: item.title,
-        description: item.description ?? item.status,
-        leading: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_lucide_react36.PlayCircle, { className: "size-4" }),
-        trailing: item.resource ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_lucide_react36.ExternalLink, { className: "size-3.5" }) : void 0,
-        onClick: () => item.resource && onOpenResource(item.resource, void 0, item.title)
-      },
-      item.id
-    )) }),
     summary.agents.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(SummarySection, { title: t("taskSummary.sections.agents"), children: [
       sectionItems("agents", summary.agents).map((item) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
         SummaryButton,
         {
           title: item.title,
-          description: [item.status, formatElapsed(item.elapsedTime)].filter(Boolean).join(" \xB7 "),
+          metadata: [
+            localizedStatus(item.status),
+            formatElapsed(item.elapsedTime)
+          ].filter(Boolean).join(" \xB7 "),
+          description: item.error,
           leading: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_lucide_react36.Bot, { className: "size-4" }),
           onClick: () => item.messageId ? onNavigateMessage(item.messageId) : onFocusComposer()
         },
@@ -20776,16 +21110,20 @@ function SummaryPrompt({
 }
 function SummaryButton({
   title,
+  metadata,
   description,
   leading,
   trailing,
   onClick
 }) {
+  const tooltipText = [title, metadata, description].filter(Boolean);
   return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
     "button",
     {
       type: "button",
-      disabled: !onClick,
+      title: tooltipText.join("\n"),
+      "aria-disabled": !onClick,
+      tabIndex: onClick ? 0 : -1,
       onClick,
       className: cn(
         "flex w-full min-w-0 items-start gap-2.5 rounded-lg px-2 py-1.5 text-left transition-colors",
@@ -20796,6 +21134,7 @@ function SummaryButton({
         leading && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "mt-0.5 shrink-0 text-muted-foreground", children: leading }),
         /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("span", { className: "min-w-0 flex-1", children: [
           /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "block truncate text-sm font-medium leading-5 text-foreground", children: title }),
+          metadata && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "mt-0.5 block truncate text-xs text-muted-foreground", children: metadata }),
           description && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "mt-0.5 block line-clamp-2 text-xs text-muted-foreground", children: description })
         ] }),
         trailing && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "mt-0.5 text-muted-foreground", children: trailing })
@@ -21892,7 +22231,8 @@ function Chat({
     enabled: taskSummaryEnabled,
     conversationId: taskSummaryConversationId,
     client: stream.client,
-    live: liveTaskSummary
+    live: liveTaskSummary,
+    refreshVersion: stream.historyMessageLoadVersion
   });
   const navigateToTaskSummaryMessage = React61.useCallback(
     async (messageId) => {
@@ -23657,22 +23997,6 @@ function Chat({
                   ]
                 }
               ),
-              !isAtBottom && messages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "sticky bottom-20 z-20 flex justify-center px-4 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
-                Button,
-                {
-                  type: "button",
-                  size: "icon-sm",
-                  variant: hasUpdatesBelow ? "default" : "outline",
-                  className: cn(
-                    "pointer-events-auto rounded-full shadow-md dark:border-white/20 dark:ring-1 dark:ring-white/15 dark:shadow-[0_0_0_1px_rgba(255,255,255,0.06),0_10px_30px_rgba(0,0,0,0.45)]",
-                    hasUpdatesBelow && "animate-bounce"
-                  ),
-                  onClick: () => scrollToBottom(true, true),
-                  "aria-label": t("chat.scrollToBottom"),
-                  title: t("chat.scrollToBottom"),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_lucide_react37.ArrowDown, { size: 16 })
-                }
-              ) }),
               quoteSelection && /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
                 "div",
                 {
@@ -23730,11 +24054,34 @@ function Chat({
                   "data-slot": "chatkit-chat-composer",
                   "data-position": isInitialComposer ? "centered" : "bottom",
                   className: cn(
-                    "mx-auto w-full p-2 z-10 bg-background",
+                    "mx-auto w-full max-w-2xl px-4 pb-4 pt-2 z-10 bg-background",
                     isInitialComposer ? "mb-auto" : "sticky bottom-0"
                   ),
                   style: chatColumnStyle,
                   children: [
+                    !isAtBottom && messages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+                      "div",
+                      {
+                        "data-slot": "scroll-to-bottom",
+                        className: "pointer-events-none absolute left-1/2 top-0 z-20 flex -translate-x-1/2 -translate-y-full justify-center",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+                          Button,
+                          {
+                            type: "button",
+                            size: "icon-sm",
+                            variant: hasUpdatesBelow ? "default" : "outline",
+                            className: cn(
+                              "pointer-events-auto rounded-full shadow-md dark:border-white/20 dark:ring-1 dark:ring-white/15 dark:shadow-[0_0_0_1px_rgba(255,255,255,0.06),0_10px_30px_rgba(0,0,0,0.45)]",
+                              hasUpdatesBelow && "animate-bounce"
+                            ),
+                            onClick: () => scrollToBottom(true, true),
+                            "aria-label": t("chat.scrollToBottom"),
+                            title: t("chat.scrollToBottom"),
+                            children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_lucide_react37.ArrowDown, { size: 16 })
+                          }
+                        )
+                      }
+                    ),
                     threadErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "mb-3 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive overflow-auto", children: threadErrorMessage }),
                     /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
                       ChatAttachments,
@@ -24007,7 +24354,7 @@ function Chat({
                             {
                               "data-slot": "composer-editor-surface",
                               className: cn(
-                                "relative flex min-h-[10rem] min-w-0 bg-background px-2 pt-2 pb-14",
+                                "relative flex min-h-[6.5rem] min-w-0 bg-background px-2 pt-2 pb-14",
                                 "rounded-composer-editor"
                               ),
                               children: [
@@ -24028,7 +24375,7 @@ function Chat({
                                     onKeyDown: handleComposerKeyDown,
                                     "data-placeholder": inputPlaceholder,
                                     className: cn(
-                                      "min-h-20 max-h-36 w-full overflow-y-auto whitespace-pre-wrap break-words bg-transparent px-2 py-2 text-base leading-6 text-foreground outline-none",
+                                      "min-h-10 max-h-36 w-full overflow-y-auto whitespace-pre-wrap break-words bg-transparent px-2 py-2 text-base leading-6 text-foreground outline-none",
                                       "empty:before:pointer-events-none empty:before:text-muted-foreground empty:before:content-[attr(data-placeholder)]",
                                       (missingConfig || isHistoryLoading || hasPendingInteractiveRequest) && "cursor-not-allowed opacity-50"
                                     ),
@@ -24183,14 +24530,6 @@ function Chat({
                         ),
                         children: disclaimer.text
                       }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
-                      "div",
-                      {
-                        "data-slot": "chat-footer",
-                        className: "relative mt-2 flex min-h-6 items-center justify-center gap-2 text-xs text-muted-foreground",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { children: t("chat.poweredBy") })
-                      }
                     )
                   ]
                 }