@xpert-ai/chatkit-ui 0.4.2 → 0.4.4

package/dist/index.cjs

@@ -8708,11 +8708,78 @@ var proposedPlanOpenPattern = /^\s*<proposed_plan>\s*$/;
 var proposedPlanClosePattern = /^\s*<\/proposed_plan>\s*$/;
 var markdownFencePattern = /^ {0,3}(`{3,}|~{3,})/;
 var planMarkdownFencePattern = /^\s*(`{3,}|~{3,})[ \t]*(?:markdown|md)[^\n]*\r?\n([\s\S]*?)\r?\n\1[ \t]*\s*$/i;
+var knowledgebaseCitationEffectName = "knowledgebase.open_citation";
 var stripMarkdownNode = (props) => {
   const elementProps = { ...props };
   delete elementProps.node;
   return elementProps;
 };
+var parseKnowledgebaseCitationHref = (href) => {
+  if (typeof href !== "string" || !href.trim()) {
+    return null;
+  }
+  try {
+    const url = new URL(href);
+    if (url.protocol !== "xpert:" || url.hostname !== "knowledgebase" || url.pathname !== "/chunk") {
+      return null;
+    }
+    const documentId = url.searchParams.get("documentId")?.trim();
+    if (!documentId) {
+      return null;
+    }
+    const knowledgebaseId = url.searchParams.get("knowledgebaseId")?.trim();
+    const chunkId = url.searchParams.get("chunkId")?.trim();
+    const documentName = url.searchParams.get("documentName")?.trim();
+    return {
+      documentId,
+      citationUrl: href,
+      ...knowledgebaseId ? { knowledgebaseId } : {},
+      ...chunkId ? { chunkId } : {},
+      ...documentName ? { documentName } : {}
+    };
+  } catch {
+    return null;
+  }
+};
+var markdownUrlTransform = (value) => parseKnowledgebaseCitationHref(value) ? value : (0, import_react_markdown.defaultUrlTransform)(value);
+function MarkdownAnchor({
+  className,
+  href,
+  onClick,
+  ...props
+}) {
+  const parentMessenger = (0, import_react6.useContext)(ParentMessengerContext);
+  const citationTarget = parseKnowledgebaseCitationHref(href);
+  const anchorProps = stripMarkdownNode(props);
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    "a",
+    {
+      className: cn(
+        citationTarget ? "text-muted-foreground text-[0.85em] underline decoration-dotted underline-offset-4 transition-colors hover:text-primary" : "text-primary font-medium underline underline-offset-4",
+        className
+      ),
+      href,
+      target: citationTarget ? void 0 : "_blank",
+      rel: citationTarget ? void 0 : "noopener noreferrer",
+      "data-knowledgebase-citation": citationTarget ? "true" : void 0,
+      onClick: (event) => {
+        onClick?.(event);
+        if (!citationTarget || event.defaultPrevented) {
+          return;
+        }
+        event.preventDefault();
+        parentMessenger?.sendEvent("public_event", [
+          "effect",
+          {
+            name: knowledgebaseCitationEffectName,
+            data: citationTarget
+          }
+        ]);
+      },
+      ...anchorProps
+    }
+  );
+}
 var getTextContent = (children) => import_react6.Children.toArray(children).map((child) => {
   if (typeof child === "string" || typeof child === "number") {
     return String(child);
@@ -8807,6 +8874,7 @@ function MarkdownContent({ children }) {
     {
       remarkPlugins: [import_remark_gfm.default, import_remark_math.default],
       rehypePlugins: [import_rehype_katex.default],
+      urlTransform: markdownUrlTransform,
       components: defaultComponents,
       children
     }
@@ -9012,18 +9080,7 @@ var defaultComponents = {
       ...stripMarkdownNode(props)
     }
   ),
-  a: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-    "a",
-    {
-      className: cn(
-        "text-primary font-medium underline underline-offset-4",
-        className
-      ),
-      target: "_blank",
-      rel: "noopener noreferrer",
-      ...stripMarkdownNode(props)
-    }
-  ),
+  a: MarkdownAnchor,
   blockquote: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "blockquote",
     {
@@ -17095,6 +17152,13 @@ function Chat({
     fallbackTitle: t("history.threadFallback")
   });
   const assistantTitle = assistantName || resolvedTitle;
+  const layoutMaxWidth = options?.layout?.maxWidth;
+  const chatColumnStyle = React49.useMemo(() => {
+    if (layoutMaxWidth === void 0 || layoutMaxWidth === null || layoutMaxWidth === "") {
+      return void 0;
+    }
+    return { maxWidth: layoutMaxWidth };
+  }, [layoutMaxWidth]);
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
     UploadDroppedFiles,
     {
@@ -17110,309 +17174,325 @@ function Chat({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex items-center justify-between border-b p-2 sticky top-0 z-10 bg-background", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex items-center gap-3 overflow-hidden", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "relative shrink-0", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-                ChatkitAvatar,
-                {
-                  avatar: assistantAvatar,
-                  className: "h-9 w-9 border border-border/60",
-                  label: assistantTitle
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full border-2 border-background bg-green-500" })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "truncate", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-                "h2",
-                {
-                  className: "text-lg font-semibold truncate",
-                  title: assistantTitle,
-                  children: assistantTitle
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "text-xs text-muted-foreground", children: t("chat.statusOnline") })
-            ] })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex items-center gap-1", children: [
-            canMinimizeToPet && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Tooltip, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "inline-flex h-8 w-8", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-                "button",
-                {
-                  type: "button",
-                  onClick: handleMinimizeToPet,
-                  className: cn(
-                    "flex h-8 w-8 cursor-pointer items-center justify-center rounded-md",
-                    "text-muted-foreground hover:text-foreground hover:bg-muted",
-                    "transition-colors duration-150"
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+          "div",
+          {
+            "data-slot": "chatkit-chat-header",
+            className: "mx-auto flex w-full items-center justify-between border-b p-2 sticky top-0 z-10 bg-background",
+            style: chatColumnStyle,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex items-center gap-3 overflow-hidden", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "relative shrink-0", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                    ChatkitAvatar,
+                    {
+                      avatar: assistantAvatar,
+                      className: "h-9 w-9 border border-border/60",
+                      label: assistantTitle
+                    }
                   ),
-                  "aria-label": t("chat.minimizeToPet"),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.Minus, { size: 16 })
-                }
-              ) }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipContent, { side: "bottom", children: t("chat.minimizeToPet") })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Tooltip, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "inline-flex h-8 w-8", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => setPetSettingsOpen(true),
-                  className: cn(
-                    "flex h-8 w-8 cursor-pointer items-center justify-center rounded-md",
-                    "text-muted-foreground hover:text-foreground hover:bg-muted",
-                    "transition-colors duration-150"
+                  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full border-2 border-background bg-green-500" })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "truncate", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                    "h2",
+                    {
+                      className: "text-lg font-semibold truncate",
+                      title: assistantTitle,
+                      children: assistantTitle
+                    }
                   ),
-                  "aria-label": t("settings.open"),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.Settings, { size: 16 })
-                }
-              ) }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipContent, { side: "bottom", children: t("settings.open") })
-            ] }),
-            history?.enabled !== false && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Tooltip, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "inline-flex h-8 w-8", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: handleNewThread,
-                    disabled: missingConfig || isHistoryLoading,
-                    className: cn(
-                      "flex h-8 w-8 cursor-pointer items-center justify-center rounded-md",
-                      "text-muted-foreground hover:text-foreground hover:bg-muted",
-                      "transition-colors duration-150",
-                      "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed"
-                    ),
-                    "aria-label": t("history.newThread"),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.Pencil, { size: 16 })
-                  }
-                ) }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipContent, { side: "bottom", children: t("history.newThread") })
+                  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "text-xs text-muted-foreground", children: t("chat.statusOnline") })
+                ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-                HistorySidebar,
-                {
-                  threads,
-                  currentThreadId: stream.threadId ?? void 0,
-                  onNewThread: handleNewThread,
-                  onSelectThread: handleSelectThread,
-                  onDeleteThread: handleDeleteThread,
-                  showDelete: history?.showDelete !== false,
-                  disabled: missingConfig || isThreadsLoading || isHistoryLoading
-                }
-              )
-            ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex-1 p-4", children: [
-          errorMessage && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "mb-4 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: errorMessage }),
-          historyError && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900", children: historyError }),
-          showMissingConfig && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900", children: missingConfigDetailMessage }),
-          isHistoryLoading && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "mb-4 rounded-lg border border-muted px-3 py-2 text-sm text-muted-foreground", children: t("chat.loadingThread") }),
-          messages.length === 0 && !canLoadMoreMessages ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-            StartScreen,
-            {
-              startScreen,
-              onPromptClick: handlePromptClick,
-              onPromptEdit: handlePromptEdit,
-              promptSendDisabled: isSubmissionBlocked,
-              promptEditDisabled: isPromptEditDisabled
-            }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "space-y-4", children: [
-            canLoadMoreMessages && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex items-center gap-3 py-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "h-px min-w-8 flex-1 bg-border" }),
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-                Button,
+              /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex items-center gap-1", children: [
+                canMinimizeToPet && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Tooltip, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "inline-flex h-8 w-8", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: handleMinimizeToPet,
+                      className: cn(
+                        "flex h-8 w-8 cursor-pointer items-center justify-center rounded-md",
+                        "text-muted-foreground hover:text-foreground hover:bg-muted",
+                        "transition-colors duration-150"
+                      ),
+                      "aria-label": t("chat.minimizeToPet"),
+                      children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.Minus, { size: 16 })
+                    }
+                  ) }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipContent, { side: "bottom", children: t("chat.minimizeToPet") })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Tooltip, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "inline-flex h-8 w-8", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setPetSettingsOpen(true),
+                      className: cn(
+                        "flex h-8 w-8 cursor-pointer items-center justify-center rounded-md",
+                        "text-muted-foreground hover:text-foreground hover:bg-muted",
+                        "transition-colors duration-150"
+                      ),
+                      "aria-label": t("settings.open"),
+                      children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.Settings, { size: 16 })
+                    }
+                  ) }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipContent, { side: "bottom", children: t("settings.open") })
+                ] }),
+                history?.enabled !== false && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Tooltip, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "inline-flex h-8 w-8", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: handleNewThread,
+                        disabled: missingConfig || isHistoryLoading,
+                        className: cn(
+                          "flex h-8 w-8 cursor-pointer items-center justify-center rounded-md",
+                          "text-muted-foreground hover:text-foreground hover:bg-muted",
+                          "transition-colors duration-150",
+                          "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed"
+                        ),
+                        "aria-label": t("history.newThread"),
+                        children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.Pencil, { size: 16 })
+                      }
+                    ) }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipContent, { side: "bottom", children: t("history.newThread") })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                    HistorySidebar,
+                    {
+                      threads,
+                      currentThreadId: stream.threadId ?? void 0,
+                      onNewThread: handleNewThread,
+                      onSelectThread: handleSelectThread,
+                      onDeleteThread: handleDeleteThread,
+                      showDelete: history?.showDelete !== false,
+                      disabled: missingConfig || isThreadsLoading || isHistoryLoading
+                    }
+                  )
+                ] })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+          "div",
+          {
+            "data-slot": "chatkit-chat-content",
+            className: "mx-auto w-full flex-1 p-4",
+            style: chatColumnStyle,
+            children: [
+              errorMessage && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "mb-4 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: errorMessage }),
+              historyError && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900", children: historyError }),
+              showMissingConfig && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900", children: missingConfigDetailMessage }),
+              isHistoryLoading && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "mb-4 rounded-lg border border-muted px-3 py-2 text-sm text-muted-foreground", children: t("chat.loadingThread") }),
+              messages.length === 0 && !canLoadMoreMessages ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                StartScreen,
                 {
-                  type: "button",
-                  variant: "ghost",
-                  size: "sm",
-                  onClick: handleLoadMoreMessages,
-                  disabled: isLoadingMoreMessages,
-                  className: "h-7 px-2 text-xs font-medium text-muted-foreground hover:text-foreground",
-                  children: isLoadingMoreMessages ? t("chat.loadingMoreMessages") : t("chat.loadMoreMessages")
+                  startScreen,
+                  onPromptClick: handlePromptClick,
+                  onPromptEdit: handlePromptEdit,
+                  promptSendDisabled: isSubmissionBlocked,
+                  promptEditDisabled: isPromptEditDisabled
                 }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "h-px min-w-8 flex-1 bg-border" })
-            ] }),
-            messages.map((message, index) => {
-              const messageType = String(message.type);
-              const isAssistantMessage = messageType === "assistant" || messageType === "ai";
-              const isStreamingMessage = stream.isLoading && index === messages.length - 1;
-              const streamingStatus = isAssistantMessage ? getAssistantStreamingStatus(
-                {
-                  ...message,
-                  lastStreamOutputAt: lastStreamOutputAtRef.current
-                },
-                isStreamingMessage,
-                { now: streamingNow }
-              ) : null;
-              if (isAssistantMessage && !hasRenderableAssistantMessage(message) && !streamingStatus) {
-                return null;
-              }
-              const messageContent = typeof message.content === "string" ? message.content : Array.isArray(message.content) ? message.content.map((part) => formatMessageContent(part)).join("") : formatMessageContent(message.content);
-              const hasPlainRenderableContent = messageContent.trim().length > 0;
-              const humanMessage = message;
-              const humanReferences = humanMessage.references ?? [];
-              const humanAttachments = [
-                ...humanMessage.fileAssets ?? [],
-                ...humanMessage.attachments ?? []
-              ];
-              const humanRuntimeCapabilityOptions = message.type === "human" ? humanMessage.runtimeCapabilityOptions ?? getSelectedRuntimeCapabilityOptions(
-                getRecommendedRuntimeCapabilitiesSelection(
-                  humanMessage.runtimeCapabilities
-                ),
-                runtimeCapabilityOptions
-              ) : [];
-              const hasHumanAttachments = message.type === "human" && humanAttachments.length > 0;
-              const canQuoteMessage = message.type === "human" || isAssistantMessage;
-              const quoteSource = message.type === "human" ? t("chat.youLabel") : assistantTitle;
-              if (!isAssistantMessage && !hasPlainRenderableContent && !hasHumanAttachments && humanRuntimeCapabilityOptions.length === 0 && humanReferences.length === 0) {
-                return null;
-              }
-              return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-                "div",
-                {
-                  className: cn(
-                    "group flex gap-3",
-                    message.type === "human" ? "justify-end" : "justify-start -ml-1"
-                    // AI messages: slightly closer to left
+              ) : /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "space-y-4", children: [
+                canLoadMoreMessages && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex items-center gap-3 py-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "h-px min-w-8 flex-1 bg-border" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                    Button,
+                    {
+                      type: "button",
+                      variant: "ghost",
+                      size: "sm",
+                      onClick: handleLoadMoreMessages,
+                      disabled: isLoadingMoreMessages,
+                      className: "h-7 px-2 text-xs font-medium text-muted-foreground hover:text-foreground",
+                      children: isLoadingMoreMessages ? t("chat.loadingMoreMessages") : t("chat.loadMoreMessages")
+                    }
                   ),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "h-px min-w-8 flex-1 bg-border" })
+                ] }),
+                messages.map((message, index) => {
+                  const messageType = String(message.type);
+                  const isAssistantMessage = messageType === "assistant" || messageType === "ai";
+                  const isStreamingMessage = stream.isLoading && index === messages.length - 1;
+                  const streamingStatus = isAssistantMessage ? getAssistantStreamingStatus(
+                    {
+                      ...message,
+                      lastStreamOutputAt: lastStreamOutputAtRef.current
+                    },
+                    isStreamingMessage,
+                    { now: streamingNow }
+                  ) : null;
+                  if (isAssistantMessage && !hasRenderableAssistantMessage(message) && !streamingStatus) {
+                    return null;
+                  }
+                  const messageContent = typeof message.content === "string" ? message.content : Array.isArray(message.content) ? message.content.map((part) => formatMessageContent(part)).join("") : formatMessageContent(message.content);
+                  const hasPlainRenderableContent = messageContent.trim().length > 0;
+                  const humanMessage = message;
+                  const humanReferences = humanMessage.references ?? [];
+                  const humanAttachments = [
+                    ...humanMessage.fileAssets ?? [],
+                    ...humanMessage.attachments ?? []
+                  ];
+                  const humanRuntimeCapabilityOptions = message.type === "human" ? humanMessage.runtimeCapabilityOptions ?? getSelectedRuntimeCapabilityOptions(
+                    getRecommendedRuntimeCapabilitiesSelection(
+                      humanMessage.runtimeCapabilities
+                    ),
+                    runtimeCapabilityOptions
+                  ) : [];
+                  const hasHumanAttachments = message.type === "human" && humanAttachments.length > 0;
+                  const canQuoteMessage = message.type === "human" || isAssistantMessage;
+                  const quoteSource = message.type === "human" ? t("chat.youLabel") : assistantTitle;
+                  if (!isAssistantMessage && !hasPlainRenderableContent && !hasHumanAttachments && humanRuntimeCapabilityOptions.length === 0 && humanReferences.length === 0) {
+                    return null;
+                  }
+                  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
                     "div",
                     {
                       className: cn(
-                        "flex flex-col px-3 overflow-hidden",
-                        isAssistantMessage && "min-w-0 flex-1"
+                        "group flex gap-3",
+                        message.type === "human" ? "justify-end" : "justify-start -ml-1"
+                        // AI messages: slightly closer to left
                       ),
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-                          "div",
-                          {
-                            ...canQuoteMessage ? {
-                              "data-quote-message-id": message.id,
-                              "data-quote-source": quoteSource
-                            } : {},
-                            className: cn(
-                              "max-w-full rounded-2xl",
-                              message.type === "human" ? "bg-primary text-primary-foreground px-4 py-2.5" : message.type === "system" ? "bg-muted text-muted-foreground text-xs px-4 py-2.5" : "py-1 text-chat-foreground"
-                              // AI messages: use chat-specific foreground color
-                            ),
-                            children: isAssistantMessage ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-                              AssistantMessage,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+                        "div",
+                        {
+                          className: cn(
+                            "flex flex-col px-3 overflow-hidden",
+                            isAssistantMessage && "min-w-0 flex-1"
+                          ),
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                              "div",
                               {
-                                message: {
-                                  ...message,
-                                  type: "assistant"
-                                },
-                                messages: messages.slice(0, index + 1).map(
-                                  (item) => ({
-                                    ...item,
-                                    type: String(item.type) === "ai" ? "assistant" : item.type
-                                  })
+                                ...canQuoteMessage ? {
+                                  "data-quote-message-id": message.id,
+                                  "data-quote-source": quoteSource
+                                } : {},
+                                className: cn(
+                                  "max-w-full rounded-2xl",
+                                  message.type === "human" ? "bg-primary text-primary-foreground px-4 py-2.5" : message.type === "system" ? "bg-muted text-muted-foreground text-xs px-4 py-2.5" : "py-1 text-chat-foreground"
+                                  // AI messages: use chat-specific foreground color
                                 ),
+                                children: isAssistantMessage ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                                  AssistantMessage,
+                                  {
+                                    message: {
+                                      ...message,
+                                      type: "assistant"
+                                    },
+                                    messages: messages.slice(0, index + 1).map(
+                                      (item) => ({
+                                        ...item,
+                                        type: String(item.type) === "ai" ? "assistant" : item.type
+                                      })
+                                    ),
+                                    isStreaming: isStreamingMessage,
+                                    streamingStatus,
+                                    isThreadRunning: currentThreadIsRunning,
+                                    organizationId: stream.organizationId,
+                                    apiUrl: stream.apiUrl
+                                  }
+                                ) : /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
+                                  message.type === "human" && humanRuntimeCapabilityOptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "mb-2 flex flex-wrap gap-1.5", children: humanRuntimeCapabilityOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+                                    "span",
+                                    {
+                                      className: "inline-flex max-w-full items-center gap-1 rounded-md bg-primary-foreground/20 px-2 py-1 text-xs font-medium text-primary-foreground",
+                                      children: [
+                                        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                                          RuntimeCapabilityIcon,
+                                          {
+                                            option,
+                                            variant: "chip"
+                                          }
+                                        ),
+                                        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "max-w-[9rem] truncate", children: option.label })
+                                      ]
+                                    },
+                                    `${option.type}:${option.id}`
+                                  )) }),
+                                  message.type === "human" && humanReferences.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "mb-2 flex flex-wrap gap-1.5", children: humanReferences.map((reference) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                                    ReferenceChip,
+                                    {
+                                      reference,
+                                      variant: "message"
+                                    },
+                                    getReferenceKey(reference)
+                                  )) }),
+                                  message.type === "human" && humanAttachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "flex flex-wrap gap-1.5 mb-2", children: humanAttachments.map((file, fileIndex) => /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+                                    "div",
+                                    {
+                                      className: "flex items-center gap-1.5 rounded-md bg-primary-foreground/20 px-2 py-1 text-xs",
+                                      children: [
+                                        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.FileText, { size: 12 }),
+                                        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "max-w-[100px] truncate", children: file.originalName ?? file.id })
+                                      ]
+                                    },
+                                    fileIndex
+                                  )) }),
+                                  Array.isArray(message.content) ? message.content.map((part, partIndex) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                                    "p",
+                                    {
+                                      className: "wrap-break-word text-sm leading-relaxed",
+                                      children: formatMessageContent(part)
+                                    },
+                                    `${part.type}-${partIndex}`
+                                  )) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "wrap-break-word text-sm leading-relaxed", children: formatMessageContent(message.content) })
+                                ] })
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                              MessageActions,
+                              {
+                                content: messageContent,
+                                isAssistant: isAssistantMessage,
                                 isStreaming: isStreamingMessage,
-                                streamingStatus,
-                                isThreadRunning: currentThreadIsRunning,
-                                organizationId: stream.organizationId,
-                                apiUrl: stream.apiUrl
+                                onRetry: isAssistantMessage && !stream.isLoading && index === messages.length - 1 ? () => handleRetry(index) : void 0
                               }
-                            ) : /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
-                              message.type === "human" && humanRuntimeCapabilityOptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "mb-2 flex flex-wrap gap-1.5", children: humanRuntimeCapabilityOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
-                                "span",
-                                {
-                                  className: "inline-flex max-w-full items-center gap-1 rounded-md bg-primary-foreground/20 px-2 py-1 text-xs font-medium text-primary-foreground",
-                                  children: [
-                                    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-                                      RuntimeCapabilityIcon,
-                                      {
-                                        option,
-                                        variant: "chip"
-                                      }
-                                    ),
-                                    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "max-w-[9rem] truncate", children: option.label })
-                                  ]
-                                },
-                                `${option.type}:${option.id}`
-                              )) }),
-                              message.type === "human" && humanReferences.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "mb-2 flex flex-wrap gap-1.5", children: humanReferences.map((reference) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-                                ReferenceChip,
-                                {
-                                  reference,
-                                  variant: "message"
-                                },
-                                getReferenceKey(reference)
-                              )) }),
-                              message.type === "human" && humanAttachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "flex flex-wrap gap-1.5 mb-2", children: humanAttachments.map((file, fileIndex) => /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
-                                "div",
-                                {
-                                  className: "flex items-center gap-1.5 rounded-md bg-primary-foreground/20 px-2 py-1 text-xs",
-                                  children: [
-                                    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.FileText, { size: 12 }),
-                                    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "max-w-[100px] truncate", children: file.originalName ?? file.id })
-                                  ]
-                                },
-                                fileIndex
-                              )) }),
-                              Array.isArray(message.content) ? message.content.map((part, partIndex) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-                                "p",
-                                {
-                                  className: "wrap-break-word text-sm leading-relaxed",
-                                  children: formatMessageContent(part)
-                                },
-                                `${part.type}-${partIndex}`
-                              )) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "wrap-break-word text-sm leading-relaxed", children: formatMessageContent(message.content) })
-                            ] })
-                          }
-                        ),
-                        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-                          MessageActions,
-                          {
-                            content: messageContent,
-                            isAssistant: isAssistantMessage,
-                            isStreaming: isStreamingMessage,
-                            onRetry: isAssistantMessage && !stream.isLoading && index === messages.length - 1 ? () => handleRetry(index) : void 0
-                          }
-                        )
-                      ]
+                            )
+                          ]
+                        }
+                      )
+                    },
+                    message.id ?? `${message.type}-${index}`
+                  );
+                }),
+                showLoadingDots && (() => {
+                  const lastMessage = messages[messages.length - 1];
+                  const lastMessageType = lastMessage ? String(lastMessage.type) : "";
+                  const isLastMessageFromAI = lastMessageType === "ai" || lastMessageType === "assistant";
+                  const lastAssistantStatus = isLastMessageFromAI ? getAssistantStreamingStatus(
+                    {
+                      ...lastMessage,
+                      lastStreamOutputAt: lastStreamOutputAtRef.current
+                    },
+                    stream.isLoading,
+                    { now: streamingNow }
+                  ) : null;
+                  if (lastAssistantStatus) return null;
+                  const fallbackStreamingStatus = getAssistantStreamingStatus(
+                    {
+                      status: void 0,
+                      reasoning: void 0,
+                      lastStreamOutputAt: lastStreamOutputAtRef.current
+                    },
+                    stream.isLoading,
+                    { now: streamingNow }
+                  );
+                  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "flex justify-start gap-3 -ml-2", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "max-w-full rounded-2xl py-2.5", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                    AssistantStreamingIndicator,
+                    {
+                      status: fallbackStreamingStatus ?? "loading"
                     }
-                  )
-                },
-                message.id ?? `${message.type}-${index}`
-              );
-            }),
-            showLoadingDots && (() => {
-              const lastMessage = messages[messages.length - 1];
-              const lastMessageType = lastMessage ? String(lastMessage.type) : "";
-              const isLastMessageFromAI = lastMessageType === "ai" || lastMessageType === "assistant";
-              const lastAssistantStatus = isLastMessageFromAI ? getAssistantStreamingStatus(
-                {
-                  ...lastMessage,
-                  lastStreamOutputAt: lastStreamOutputAtRef.current
-                },
-                stream.isLoading,
-                { now: streamingNow }
-              ) : null;
-              if (lastAssistantStatus) return null;
-              const fallbackStreamingStatus = getAssistantStreamingStatus(
-                {
-                  status: void 0,
-                  reasoning: void 0,
-                  lastStreamOutputAt: lastStreamOutputAtRef.current
-                },
-                stream.isLoading,
-                { now: streamingNow }
-              );
-              return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "flex justify-start gap-3 -ml-2", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "max-w-full rounded-2xl py-2.5", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-                AssistantStreamingIndicator,
-                {
-                  status: fallbackStreamingStatus ?? "loading"
-                }
-              ) }) });
-            })()
-          ] })
-        ] }),
+                  ) }) });
+                })()
+              ] })
+            ]
+          }
+        ),
         !isAtBottom && messages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "sticky bottom-20 z-20 flex justify-center px-4 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
           Button,
           {
@@ -17457,386 +17537,394 @@ function Chat({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "p-2 sticky bottom-0 z-10 bg-background", children: [
-          threadErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime54.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_runtime54.jsx)(
-            ChatAttachments,
-            {
-              ref: attachmentsRef,
-              accept: acceptMimes,
-              maxCount: composer?.attachments?.maxCount ?? 10,
-              maxSize: composer?.attachments?.maxSize ?? 100 * 1024 * 1024,
-              retryUploadLabel: t("chat.retryUpload"),
-              uploadFile: uploadContextFile,
-              deleteFile: deleteContextFile,
-              getFileStatus: getContextFileStatus,
-              onStateChange: setAttachmentState
-            }
-          ),
-          references.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "mb-3 flex flex-wrap gap-2", children: references.map((reference) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-            ReferenceChip,
-            {
-              reference,
-              variant: "composer",
-              onRemove: () => setReferences(
-                (previous) => previous.filter(
-                  (item) => getReferenceKey(item) !== getReferenceKey(reference)
-                )
-              ),
-              removeLabel: t("composer.removeReference")
-            },
-            getReferenceKey(reference)
-          )) }),
-          detachedRunRuntimeCapabilityOptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "mb-2 flex flex-wrap items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "text-xs text-muted-foreground", children: t("composer.capabilities.runOnly") }),
-            detachedRunRuntimeCapabilityOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
-              "span",
-              {
-                className: "inline-flex max-w-full items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary",
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(RuntimeCapabilityIcon, { option, variant: "chip" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "max-w-40 truncate", children: option.label }),
-                  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => removeRunRuntimeCapability(option),
-                      className: "rounded-full p-0.5 hover:bg-primary/15",
-                      title: t("composer.capabilities.removeRunCapability"),
-                      "aria-label": t("composer.capabilities.removeRunCapability"),
-                      children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.X, { size: 11 })
-                    }
-                  )
-                ]
-              },
-              `${option.type}:${option.id}`
-            ))
-          ] }),
-          showGoalStatus && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
-            "div",
-            {
-              className: cn(
-                "mb-2 flex min-h-10 gap-2 rounded-md border border-border bg-background px-2.5 py-2 text-xs text-foreground shadow-sm",
-                isGoalObjectiveExpanded ? "items-start" : "items-center"
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+          "div",
+          {
+            "data-slot": "chatkit-chat-composer",
+            className: "mx-auto w-full p-2 sticky bottom-0 z-10 bg-background",
+            style: chatColumnStyle,
+            children: [
+              threadErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime54.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_runtime54.jsx)(
+                ChatAttachments,
+                {
+                  ref: attachmentsRef,
+                  accept: acceptMimes,
+                  maxCount: composer?.attachments?.maxCount ?? 10,
+                  maxSize: composer?.attachments?.maxSize ?? 100 * 1024 * 1024,
+                  retryUploadLabel: t("chat.retryUpload"),
+                  uploadFile: uploadContextFile,
+                  deleteFile: deleteContextFile,
+                  getFileStatus: getContextFileStatus,
+                  onStateChange: setAttachmentState
+                }
               ),
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-                  import_lucide_react29.Target,
-                  {
-                    className: cn(
-                      "size-4 shrink-0 text-muted-foreground",
-                      isGoalObjectiveExpanded && "mt-1"
+              references.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "mb-3 flex flex-wrap gap-2", children: references.map((reference) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                ReferenceChip,
+                {
+                  reference,
+                  variant: "composer",
+                  onRemove: () => setReferences(
+                    (previous) => previous.filter(
+                      (item) => getReferenceKey(item) !== getReferenceKey(reference)
                     )
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "min-w-0 flex-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex min-w-0 items-center gap-2", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "font-medium", children: t("chat.goal.label") }),
-                    threadGoal && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "shrink-0 rounded-md bg-muted px-1.5 py-0.5 text-[11px] text-muted-foreground", children: t(`chat.goal.status.${threadGoal.status}`) }),
-                    isGoalLoading && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.Loader2, { className: "size-3 animate-spin text-muted-foreground" })
-                  ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-                    "div",
-                    {
-                      className: cn(
-                        "mt-0.5 text-muted-foreground",
-                        threadGoal?.objective && !goalError && isGoalObjectiveExpanded ? "whitespace-pre-wrap break-words" : "truncate"
-                      ),
-                      children: goalError || threadGoal?.objective
-                    }
                   ),
-                  threadGoal && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "mt-1 flex flex-wrap gap-x-3 gap-y-1 text-[11px] text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { children: t("chat.goal.elapsed", {
-                    elapsed: formatGoalElapsed(displayedGoalElapsedSeconds)
-                  }) }) })
-                ] }),
-                threadGoal && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex shrink-0 items-center gap-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Tooltip, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-                      Button,
+                  removeLabel: t("composer.removeReference")
+                },
+                getReferenceKey(reference)
+              )) }),
+              detachedRunRuntimeCapabilityOptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "mb-2 flex flex-wrap items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "text-xs text-muted-foreground", children: t("composer.capabilities.runOnly") }),
+                detachedRunRuntimeCapabilityOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+                  "span",
+                  {
+                    className: "inline-flex max-w-full items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(RuntimeCapabilityIcon, { option, variant: "chip" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "max-w-40 truncate", children: option.label }),
+                      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => removeRunRuntimeCapability(option),
+                          className: "rounded-full p-0.5 hover:bg-primary/15",
+                          title: t("composer.capabilities.removeRunCapability"),
+                          "aria-label": t("composer.capabilities.removeRunCapability"),
+                          children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.X, { size: 11 })
+                        }
+                      )
+                    ]
+                  },
+                  `${option.type}:${option.id}`
+                ))
+              ] }),
+              showGoalStatus && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+                "div",
+                {
+                  className: cn(
+                    "mb-2 flex min-h-10 gap-2 rounded-md border border-border bg-background px-2.5 py-2 text-xs text-foreground shadow-sm",
+                    isGoalObjectiveExpanded ? "items-start" : "items-center"
+                  ),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                      import_lucide_react29.Target,
                       {
-                        type: "button",
-                        variant: "ghost",
-                        size: "icon-xs",
-                        disabled: isGoalLoading,
-                        onClick: () => {
-                          const prefix = "/goal edit ";
-                          setComposerText(`${prefix}${threadGoal.objective}`);
-                        },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.Pencil, { className: "size-3" })
+                        className: cn(
+                          "size-4 shrink-0 text-muted-foreground",
+                          isGoalObjectiveExpanded && "mt-1"
+                        )
                       }
-                    ) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipContent, { children: t("chat.goal.edit") })
-                  ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Tooltip, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-                      Button,
-                      {
-                        type: "button",
-                        variant: "ghost",
-                        size: "icon-xs",
-                        disabled: isGoalLoading,
-                        onClick: () => void handleGoalCommand({
-                          args: threadGoal.status === "paused" ? "resume" : "pause",
-                          commandSource: {
-                            type: "slash_command",
-                            name: "goal",
-                            source: "runtime",
-                            executionType: "insert_invocation"
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "min-w-0 flex-1", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex min-w-0 items-center gap-2", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "font-medium", children: t("chat.goal.label") }),
+                        threadGoal && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "shrink-0 rounded-md bg-muted px-1.5 py-0.5 text-[11px] text-muted-foreground", children: t(`chat.goal.status.${threadGoal.status}`) }),
+                        isGoalLoading && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.Loader2, { className: "size-3 animate-spin text-muted-foreground" })
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                        "div",
+                        {
+                          className: cn(
+                            "mt-0.5 text-muted-foreground",
+                            threadGoal?.objective && !goalError && isGoalObjectiveExpanded ? "whitespace-pre-wrap break-words" : "truncate"
+                          ),
+                          children: goalError || threadGoal?.objective
+                        }
+                      ),
+                      threadGoal && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "mt-1 flex flex-wrap gap-x-3 gap-y-1 text-[11px] text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { children: t("chat.goal.elapsed", {
+                        elapsed: formatGoalElapsed(displayedGoalElapsedSeconds)
+                      }) }) })
+                    ] }),
+                    threadGoal && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex shrink-0 items-center gap-1", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Tooltip, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                          Button,
+                          {
+                            type: "button",
+                            variant: "ghost",
+                            size: "icon-xs",
+                            disabled: isGoalLoading,
+                            onClick: () => {
+                              const prefix = "/goal edit ";
+                              setComposerText(`${prefix}${threadGoal.objective}`);
+                            },
+                            children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.Pencil, { className: "size-3" })
                           }
-                        }),
-                        children: threadGoal.status === "paused" ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.Play, { className: "size-3" }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.Pause, { className: "size-3" })
-                      }
-                    ) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipContent, { children: threadGoal.status === "paused" ? t("chat.goal.resume") : t("chat.goal.pause") })
-                  ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Tooltip, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-                      Button,
-                      {
-                        type: "button",
-                        variant: "ghost",
-                        size: "icon-xs",
-                        disabled: isGoalLoading,
-                        onClick: () => void handleGoalCommand({
-                          args: "clear",
-                          commandSource: {
-                            type: "slash_command",
-                            name: "goal",
-                            source: "runtime",
-                            executionType: "insert_invocation"
+                        ) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipContent, { children: t("chat.goal.edit") })
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Tooltip, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                          Button,
+                          {
+                            type: "button",
+                            variant: "ghost",
+                            size: "icon-xs",
+                            disabled: isGoalLoading,
+                            onClick: () => void handleGoalCommand({
+                              args: threadGoal.status === "paused" ? "resume" : "pause",
+                              commandSource: {
+                                type: "slash_command",
+                                name: "goal",
+                                source: "runtime",
+                                executionType: "insert_invocation"
+                              }
+                            }),
+                            children: threadGoal.status === "paused" ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.Play, { className: "size-3" }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.Pause, { className: "size-3" })
                           }
-                        }),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.Trash2, { className: "size-3" })
-                      }
-                    ) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipContent, { children: t("chat.goal.clear") })
-                  ] }),
-                  threadGoal.objective && !goalError && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Tooltip, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-                      Button,
-                      {
-                        type: "button",
-                        variant: "ghost",
-                        size: "icon-xs",
-                        "aria-expanded": isGoalObjectiveExpanded,
-                        "aria-label": isGoalObjectiveExpanded ? t("chat.goal.collapseObjective") : t("chat.goal.expandObjective"),
-                        onClick: () => setIsGoalObjectiveExpanded((expanded) => !expanded),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-                          import_lucide_react29.ChevronDown,
+                        ) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipContent, { children: threadGoal.status === "paused" ? t("chat.goal.resume") : t("chat.goal.pause") })
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Tooltip, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                          Button,
                           {
-                            className: cn(
-                              "size-3 transition-transform",
-                              isGoalObjectiveExpanded && "rotate-180"
-                            )
+                            type: "button",
+                            variant: "ghost",
+                            size: "icon-xs",
+                            disabled: isGoalLoading,
+                            onClick: () => void handleGoalCommand({
+                              args: "clear",
+                              commandSource: {
+                                type: "slash_command",
+                                name: "goal",
+                                source: "runtime",
+                                executionType: "insert_invocation"
+                              }
+                            }),
+                            children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.Trash2, { className: "size-3" })
                           }
-                        )
-                      }
-                    ) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipContent, { children: isGoalObjectiveExpanded ? t("chat.goal.collapseObjective") : t("chat.goal.expandObjective") })
-                  ] })
-                ] })
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-            PendingRuntimeServices,
-            {
-              state: stream.runtimeActivities.sandboxServices,
-              onStopService: (serviceId) => stream.stopRuntimeActivityItem("sandbox-services", serviceId),
-              attachToComposer: !hasPendingTodos && !hasPendingFollowUps,
-              className: hasPendingTodos || hasPendingFollowUps ? "mb-2" : void 0
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-            PendingTodos,
-            {
-              snapshot: stream.todos,
-              attachToComposer: !hasPendingFollowUps,
-              className: hasPendingFollowUps ? "mb-2" : void 0
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-            PendingFollowUps,
-            {
-              items: pendingFollowUps,
-              isLoading: stream.isLoading,
-              onPromoteToSteer: (id) => stream.promotePendingFollowUpToSteer(id),
-              canSendNow: stream.canSendPendingFollowUpNow,
-              onSendNow: (id) => stream.sendPendingFollowUpNow(id),
-              onEdit: handleEditPendingFollowUp,
-              onRemove: stream.removePendingFollowUp,
-              attachToComposer: true
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-            RequestUserInputPanel,
-            {
-              request: stream.pendingRequestUserInput,
-              onSubmit: stream.submitRequestUserInput,
-              onDismiss: stream.stop,
-              attachToComposer: true
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-            HITLApprovalPanel,
-            {
-              request: stream.pendingHITLRequest,
-              onSubmit: stream.submitHITLDecision,
-              onDismiss: stream.stop,
-              attachToComposer: true
-            }
-          ),
-          runtimeCapabilityPalette && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-            SlashPalette,
-            {
-              palette: runtimeCapabilityPalette,
-              options: slashPaletteOptions,
-              paletteRef: slashPaletteRef,
-              optionRefs: slashPaletteOptionRefs,
-              panelRoundedClass: getPanelRoundedClass(theme.radius),
-              itemRoundedClass: getMenuItemRoundedClass(theme.radius),
-              emptyLabel: slashPaletteEmptyLabel,
-              capabilityEmptyLabels: slashPaletteCapabilityEmptyLabels,
-              onSelect: selectSlashPaletteOption
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("form", { className: "flex items-end", onSubmit: handleSubmit, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
-            "div",
-            {
-              "data-slot": "composer-input-shell",
-              "data-layout": isComposerStacked ? "stacked" : "inline",
-              className: cn(
-                "relative flex flex-1 overflow-hidden",
-                "bg-background border border-border shadow-sm",
-                isComposerStacked ? "min-h-[5.5rem] px-1.5 pt-1.5 pb-12" : "min-h-12 px-1.5 py-1",
-                "focus-within:border-muted-foreground/30 focus-within:shadow-md",
-                "transition-[min-height,padding,border-radius,box-shadow,border-color] duration-300 ease-[cubic-bezier(0.2,0.8,0.2,1)]",
-                composerInputRoundedClass
-              ),
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-                  "div",
-                  {
-                    ref: composerInputRef,
-                    role: "textbox",
-                    "aria-multiline": "true",
-                    "aria-disabled": missingConfig || isHistoryLoading || hasPendingInteractiveRequest,
-                    contentEditable: !(missingConfig || isHistoryLoading || hasPendingInteractiveRequest),
-                    suppressContentEditableWarning: true,
-                    onInput: handleComposerInput,
-                    onCompositionEnd: handleComposerCompositionEnd,
-                    onSelect: handleComposerSelect,
-                    onPaste: handleComposerPaste,
-                    onKeyDown: handleComposerKeyDown,
-                    "data-placeholder": inputPlaceholder,
-                    className: cn(
-                      "min-h-8 max-h-32 w-full overflow-hidden whitespace-pre-wrap break-words bg-transparent text-sm leading-5 text-foreground outline-none transition-[padding,min-height] duration-300 ease-[cubic-bezier(0.2,0.8,0.2,1)]",
-                      isComposerStacked ? "px-2 py-1.5" : "py-1 pr-11 pl-11 mt-1",
-                      "empty:before:pointer-events-none empty:before:text-muted-foreground empty:before:content-[attr(data-placeholder)]",
-                      (missingConfig || isHistoryLoading || hasPendingInteractiveRequest) && "cursor-not-allowed opacity-50"
-                    ),
-                    children: renderedComposerParts.map(
-                      (part, index) => part.type === "text" ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(React49.Fragment, { children: part.text }, `text-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
-                        "span",
-                        {
-                          "data-composer-capability-key": part.key,
-                          "data-capability-type": part.capability.type,
-                          "data-capability-id": part.capability.id,
-                          contentEditable: false,
-                          className: "mx-0.5 inline-flex max-w-[14rem] select-none items-center gap-1 text-sm font-semibold text-primary align-baseline",
-                          children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-                              RuntimeCapabilityIcon,
+                        ) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipContent, { children: t("chat.goal.clear") })
+                      ] }),
+                      threadGoal.objective && !goalError && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Tooltip, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                          Button,
+                          {
+                            type: "button",
+                            variant: "ghost",
+                            size: "icon-xs",
+                            "aria-expanded": isGoalObjectiveExpanded,
+                            "aria-label": isGoalObjectiveExpanded ? t("chat.goal.collapseObjective") : t("chat.goal.expandObjective"),
+                            onClick: () => setIsGoalObjectiveExpanded((expanded) => !expanded),
+                            children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                              import_lucide_react29.ChevronDown,
                               {
-                                option: part.capability,
-                                variant: "chip"
+                                className: cn(
+                                  "size-3 transition-transform",
+                                  isGoalObjectiveExpanded && "rotate-180"
+                                )
                               }
-                            ),
-                            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "truncate", children: part.capability.label })
-                          ]
-                        },
-                        part.key
-                      )
-                    )
-                  },
-                  composerDomVersion
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
-                  "div",
-                  {
-                    "data-slot": "composer-action-bar",
-                    className: "pointer-events-none absolute inset-x-1.5 bottom-1 flex min-h-10 items-center justify-between gap-2",
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "pointer-events-none flex min-w-0 flex-1 items-center gap-1.5", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "pointer-events-auto flex shrink-0 items-center gap-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-                          ComposerMenu,
-                          {
-                            composer,
-                            onAttachmentClick: handleAttachmentClick,
-                            onToolSelect: handleToolSelect,
-                            selectedTool,
-                            planModeEnabled,
-                            onPlanModeChange: setPlanModeEnabled,
-                            goalCommandAvailable,
-                            goalPanelOpen: isGoalModeOpen,
-                            onGoalPanelOpenChange: handleGoalPanelOpenChange,
-                            runtimeCapabilities: runtimeCapabilitiesReady ? runtimeCapabilities : null,
-                            selectedRuntimeCapabilities: effectiveSessionRuntimeCapabilities,
-                            onRuntimeCapabilityToggle: handleSessionRuntimeCapabilityToggle,
-                            disabled: missingConfig || isHistoryLoading || hasPendingInteractiveRequest
+                            )
                           }
                         ) }),
-                        selectedTool && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { className: "pointer-events-auto inline-flex h-8 min-w-0 max-w-[14rem] shrink items-center gap-1.5 rounded-full bg-primary/10 px-2 text-xs font-medium text-primary transition-all duration-200", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "truncate", children: selectedTool.shortLabel ?? selectedTool.label }),
-                          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-                            "button",
+                        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipContent, { children: isGoalObjectiveExpanded ? t("chat.goal.collapseObjective") : t("chat.goal.expandObjective") })
+                      ] })
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                PendingRuntimeServices,
+                {
+                  state: stream.runtimeActivities.sandboxServices,
+                  onStopService: (serviceId) => stream.stopRuntimeActivityItem("sandbox-services", serviceId),
+                  attachToComposer: !hasPendingTodos && !hasPendingFollowUps,
+                  className: hasPendingTodos || hasPendingFollowUps ? "mb-2" : void 0
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                PendingTodos,
+                {
+                  snapshot: stream.todos,
+                  attachToComposer: !hasPendingFollowUps,
+                  className: hasPendingFollowUps ? "mb-2" : void 0
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                PendingFollowUps,
+                {
+                  items: pendingFollowUps,
+                  isLoading: stream.isLoading,
+                  onPromoteToSteer: (id) => stream.promotePendingFollowUpToSteer(id),
+                  canSendNow: stream.canSendPendingFollowUpNow,
+                  onSendNow: (id) => stream.sendPendingFollowUpNow(id),
+                  onEdit: handleEditPendingFollowUp,
+                  onRemove: stream.removePendingFollowUp,
+                  attachToComposer: true
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                RequestUserInputPanel,
+                {
+                  request: stream.pendingRequestUserInput,
+                  onSubmit: stream.submitRequestUserInput,
+                  onDismiss: stream.stop,
+                  attachToComposer: true
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                HITLApprovalPanel,
+                {
+                  request: stream.pendingHITLRequest,
+                  onSubmit: stream.submitHITLDecision,
+                  onDismiss: stream.stop,
+                  attachToComposer: true
+                }
+              ),
+              runtimeCapabilityPalette && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                SlashPalette,
+                {
+                  palette: runtimeCapabilityPalette,
+                  options: slashPaletteOptions,
+                  paletteRef: slashPaletteRef,
+                  optionRefs: slashPaletteOptionRefs,
+                  panelRoundedClass: getPanelRoundedClass(theme.radius),
+                  itemRoundedClass: getMenuItemRoundedClass(theme.radius),
+                  emptyLabel: slashPaletteEmptyLabel,
+                  capabilityEmptyLabels: slashPaletteCapabilityEmptyLabels,
+                  onSelect: selectSlashPaletteOption
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("form", { className: "flex items-end", onSubmit: handleSubmit, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+                "div",
+                {
+                  "data-slot": "composer-input-shell",
+                  "data-layout": isComposerStacked ? "stacked" : "inline",
+                  className: cn(
+                    "relative flex flex-1 overflow-hidden",
+                    "bg-background border border-border shadow-sm",
+                    isComposerStacked ? "min-h-[5.5rem] px-1.5 pt-1.5 pb-12" : "min-h-12 px-1.5 py-1",
+                    "focus-within:border-muted-foreground/30 focus-within:shadow-md",
+                    "transition-[min-height,padding,border-radius,box-shadow,border-color] duration-300 ease-[cubic-bezier(0.2,0.8,0.2,1)]",
+                    composerInputRoundedClass
+                  ),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                      "div",
+                      {
+                        ref: composerInputRef,
+                        role: "textbox",
+                        "aria-multiline": "true",
+                        "aria-disabled": missingConfig || isHistoryLoading || hasPendingInteractiveRequest,
+                        contentEditable: !(missingConfig || isHistoryLoading || hasPendingInteractiveRequest),
+                        suppressContentEditableWarning: true,
+                        onInput: handleComposerInput,
+                        onCompositionEnd: handleComposerCompositionEnd,
+                        onSelect: handleComposerSelect,
+                        onPaste: handleComposerPaste,
+                        onKeyDown: handleComposerKeyDown,
+                        "data-placeholder": inputPlaceholder,
+                        className: cn(
+                          "min-h-8 max-h-32 w-full overflow-hidden whitespace-pre-wrap break-words bg-transparent text-sm leading-5 text-foreground outline-none transition-[padding,min-height] duration-300 ease-[cubic-bezier(0.2,0.8,0.2,1)]",
+                          isComposerStacked ? "px-2 py-1.5" : "py-1 pr-11 pl-11 mt-1",
+                          "empty:before:pointer-events-none empty:before:text-muted-foreground empty:before:content-[attr(data-placeholder)]",
+                          (missingConfig || isHistoryLoading || hasPendingInteractiveRequest) && "cursor-not-allowed opacity-50"
+                        ),
+                        children: renderedComposerParts.map(
+                          (part, index) => part.type === "text" ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(React49.Fragment, { children: part.text }, `text-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+                            "span",
                             {
-                              type: "button",
-                              onClick: () => setSelectedTool(null),
-                              className: "shrink-0 rounded-full p-0.5 text-primary/70 hover:bg-primary/10 hover:text-primary",
-                              children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.X, { size: 12 })
-                            }
+                              "data-composer-capability-key": part.key,
+                              "data-capability-type": part.capability.type,
+                              "data-capability-id": part.capability.id,
+                              contentEditable: false,
+                              className: "mx-0.5 inline-flex max-w-[14rem] select-none items-center gap-1 text-sm font-semibold text-primary align-baseline",
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                                  RuntimeCapabilityIcon,
+                                  {
+                                    option: part.capability,
+                                    variant: "chip"
+                                  }
+                                ),
+                                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "truncate", children: part.capability.label })
+                              ]
+                            },
+                            part.key
                           )
-                        ] })
-                      ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "pointer-events-auto shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-                        SendButton,
-                        {
-                          disabled: isSendDisabled,
-                          isLoading: stream.isLoading,
-                          showStop: stream.isLoading && (!trimmedDraft || hasPendingInteractiveRequest),
-                          onStop: () => stream.stop(),
-                          stopLabel: t("chat.stop"),
-                          sendLabel: t("chat.send"),
-                          shortcuts: stream.isLoading && trimmedDraft ? [
+                        )
+                      },
+                      composerDomVersion
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+                      "div",
+                      {
+                        "data-slot": "composer-action-bar",
+                        className: "pointer-events-none absolute inset-x-1.5 bottom-1 flex min-h-10 items-center justify-between gap-2",
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "pointer-events-none flex min-w-0 flex-1 items-center gap-1.5", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "pointer-events-auto flex shrink-0 items-center gap-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                              ComposerMenu,
+                              {
+                                composer,
+                                onAttachmentClick: handleAttachmentClick,
+                                onToolSelect: handleToolSelect,
+                                selectedTool,
+                                planModeEnabled,
+                                onPlanModeChange: setPlanModeEnabled,
+                                goalCommandAvailable,
+                                goalPanelOpen: isGoalModeOpen,
+                                onGoalPanelOpenChange: handleGoalPanelOpenChange,
+                                runtimeCapabilities: runtimeCapabilitiesReady ? runtimeCapabilities : null,
+                                selectedRuntimeCapabilities: effectiveSessionRuntimeCapabilities,
+                                onRuntimeCapabilityToggle: handleSessionRuntimeCapabilityToggle,
+                                disabled: missingConfig || isHistoryLoading || hasPendingInteractiveRequest
+                              }
+                            ) }),
+                            selectedTool && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { className: "pointer-events-auto inline-flex h-8 min-w-0 max-w-[14rem] shrink items-center gap-1.5 rounded-full bg-primary/10 px-2 text-xs font-medium text-primary transition-all duration-200", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "truncate", children: selectedTool.shortLabel ?? selectedTool.label }),
+                              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                                "button",
+                                {
+                                  type: "button",
+                                  onClick: () => setSelectedTool(null),
+                                  className: "shrink-0 rounded-full p-0.5 text-primary/70 hover:bg-primary/10 hover:text-primary",
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.X, { size: 12 })
+                                }
+                              )
+                            ] })
+                          ] }),
+                          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "pointer-events-auto shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                            SendButton,
                             {
-                              label: t("chat.followUps.queue"),
-                              keys: "Enter"
+                              disabled: isSendDisabled,
+                              isLoading: stream.isLoading,
+                              showStop: stream.isLoading && (!trimmedDraft || hasPendingInteractiveRequest),
+                              onStop: () => stream.stop(),
+                              stopLabel: t("chat.stop"),
+                              sendLabel: t("chat.send"),
+                              shortcuts: stream.isLoading && trimmedDraft ? [
+                                {
+                                  label: t("chat.followUps.queue"),
+                                  keys: "Enter"
+                                }
+                              ] : void 0
                             }
-                          ] : void 0
-                        }
-                      ) })
-                    ]
-                  }
-                )
-              ]
-            }
-          ) }),
-          disclaimer?.text && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-            "p",
-            {
-              className: cn(
-                "mt-2 text-center text-xs",
-                disclaimer.highContrast ? "text-foreground" : "text-muted-foreground"
+                          ) })
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ) }),
+              disclaimer?.text && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                "p",
+                {
+                  className: cn(
+                    "mt-2 text-center text-xs",
+                    disclaimer.highContrast ? "text-foreground" : "text-muted-foreground"
+                  ),
+                  children: disclaimer.text
+                }
               ),
-              children: disclaimer.text
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "mt-2 flex items-center justify-center gap-2 text-xs text-muted-foreground", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { children: t("chat.poweredBy") }),
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ContextUsageIndicator, { className: "absolute right-4" })
-          ] })
-        ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "mt-2 flex items-center justify-center gap-2 text-xs text-muted-foreground", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { children: t("chat.poweredBy") }),
+                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ContextUsageIndicator, { className: "absolute right-4" })
+              ] })
+            ]
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
           SettingsSheet,
           {