@xpert-ai/chatkit-ui 0.4.1 → 0.4.3

package/dist/index.cjs

@@ -11622,7 +11622,7 @@ function appendQuery(path, params) {
   const query = params.toString();
   return query ? `${path}?${query}` : path;
 }
-function buildMcpAppReviveParams(data) {
+function buildMcpAppReviveParams(data, options) {
   const params = new URLSearchParams();
   const add = (key, value) => {
     if (value) {
@@ -11635,15 +11635,16 @@ function buildMcpAppReviveParams(data) {
   add("toolCallId", data.toolCallId);
   add("resourceUri", data.resourceUri);
   add("title", typeof data.title === "string" ? data.title : void 0);
-  add("token", data.appInstanceToken);
+  add("messageId", options?.messageId);
+  add("token", options?.appInstanceToken ?? data.appInstanceToken);
   return params;
 }
-function buildMcpAppEndpointPath(data, endpoint) {
+function buildMcpAppEndpointPath(data, endpoint, options) {
   return appendQuery(
     `/api/xpert-toolset/mcp-apps/${encodeURIComponent(
       data.appInstanceId
     )}/${endpoint}`,
-    buildMcpAppReviveParams(data)
+    buildMcpAppReviveParams(data, options)
   );
 }
 function escapeHtmlAttribute(value) {
@@ -12102,6 +12103,7 @@ function normalizeMcpAppResourceResponse(value, data) {
     uri: readString3(raw.uri),
     mimeType: readString3(raw.mimeType),
     html,
+    appInstanceToken: readString3(raw.appInstanceToken),
     resourceUri: readString3(raw.resourceUri),
     title: resourceInfo.title,
     description: resourceInfo.description,
@@ -12147,6 +12149,7 @@ function isMcpAppComponentData(data) {
 }
 function McpAppMessage({
   data,
+  messageId,
   className
 }) {
   const { i18n: i18n2 } = useChatkitTranslation();
@@ -12162,6 +12165,7 @@ function McpAppMessage({
   const sentInitialResultRef = React35.useRef(false);
   const modelContextRef = React35.useRef(null);
   const [resource, setResource] = React35.useState(null);
+  const [runtimeAppInstanceToken, setRuntimeAppInstanceToken] = React35.useState(data.appInstanceToken);
   const [srcDoc, setSrcDoc] = React35.useState(null);
   const [height, setHeight] = React35.useState(420);
   const [error, setError] = React35.useState(null);
@@ -12169,16 +12173,21 @@ function McpAppMessage({
   const resourceUrl = React35.useMemo(
     () => buildXpertApiUrl(
       apiUrl,
-      buildMcpAppEndpointPath(data, "resource")
+      buildMcpAppEndpointPath(data, "resource", {
+        messageId
+      })
     ),
-    [apiUrl, data]
+    [apiUrl, data, messageId]
   );
   const rpcUrl = React35.useMemo(
     () => buildXpertApiUrl(
       apiUrl,
-      buildMcpAppEndpointPath(data, "rpc")
+      buildMcpAppEndpointPath(data, "rpc", {
+        appInstanceToken: runtimeAppInstanceToken,
+        messageId
+      })
     ),
-    [apiUrl, data]
+    [apiUrl, data, messageId, runtimeAppInstanceToken]
   );
   const postToApp = React35.useCallback((message) => {
     iframeRef.current?.contentWindow?.postMessage(message, "*");
@@ -12235,6 +12244,7 @@ function McpAppMessage({
     const controller = new AbortController();
     initializedRef.current = false;
     sentInitialResultRef.current = false;
+    setRuntimeAppInstanceToken(data.appInstanceToken);
     setIsLoading(true);
     setError(null);
     setResource(null);
@@ -12253,6 +12263,9 @@ function McpAppMessage({
           data
         );
         setResource(normalizedResource);
+        setRuntimeAppInstanceToken(
+          normalizedResource.appInstanceToken ?? data.appInstanceToken
+        );
         const hostLocale = normalizeHostLocale(i18n2.language);
         setSrcDoc(
           injectMcpAppTheme(
@@ -12280,6 +12293,7 @@ function McpAppMessage({
     authenticatedFetch,
     data,
     data.appInstanceId,
+    data.appInstanceToken,
     data.csp,
     i18n2.language,
     resourceUrl
@@ -12826,7 +12840,7 @@ function renderContentItem(content, index, message, lookupMessages, options) {
       return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(WidgetMessage, { messageId, data: content.data }) }, content.id ?? `widget-${index}`);
     }
     if (isMcpAppComponent(content)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(McpAppMessage, { data: content.data }) }, content.id ?? `mcp-app-${index}`);
+      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(McpAppMessage, { messageId, data: content.data }) }, content.id ?? `mcp-app-${index}`);
     }
     if (getComponentMessagePresentation(content, getToolStepData(content)) === "grouped-step") {
       return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
@@ -17081,6 +17095,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,
     {
@@ -17096,309 +17117,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,
           {
@@ -17443,386 +17480,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,
           {