@agents24/chat-react 0.2.0 → 0.3.1

package/dist/ui/index.cjs

@@ -76,7 +76,10 @@ __export(ui_exports, {
   attachmentVariants: () => attachmentVariants,
   bubbleVariants: () => bubbleVariants,
   cn: () => cn,
+  hitlActionLabel: () => hitlActionLabel,
+  hitlTitle: () => hitlTitle,
   markerVariants: () => markerVariants,
+  resolvedHitlLabel: () => resolvedHitlLabel,
   shouldCollapseUserMessage: () => shouldCollapseUserMessage
 });
 module.exports = __toCommonJS(ui_exports);
@@ -797,65 +800,6 @@ var import_lucide_react4 = require("lucide-react");
 var React4 = __toESM(require("react"), 1);
 var import_lucide_react3 = require("lucide-react");
 
-// src/ui/mcp-connect-required-card.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var STATUS_LABELS = {
-  pending: "Connect",
-  connecting: "Connecting",
-  connected: "Connected",
-  resuming: "Resuming",
-  error: "Try again"
-};
-function McpConnectRequiredCard({
-  serverName,
-  providerKey,
-  message,
-  status = "pending",
-  disabled = false,
-  loading = false,
-  error,
-  onConnect,
-  className,
-  ...props
-}) {
-  const label = String(serverName || providerKey || "MCP server").trim();
-  const isBusy = loading || status === "connecting" || status === "resuming";
-  const isConnected = status === "connected";
-  const buttonDisabled = disabled || isBusy || isConnected || !onConnect;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    "div",
-    {
-      "data-agents24-mcp-connect-card": true,
-      "data-status": status,
-      className: cn(
-        "w-full rounded-lg border border-border/50 bg-muted/25 p-3 text-sm text-foreground",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex min-w-0 items-start justify-between gap-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "truncate text-sm font-medium", children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mt-1 text-sm text-muted-foreground", children: message || "Connect your account to continue." }),
-          status === "error" && error ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mt-2 text-sm text-destructive", children: error }) : null
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          "button",
-          {
-            type: "button",
-            className: cn(
-              "shrink-0 rounded-md border px-3 py-1.5 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-60",
-              status === "pending" || status === "error" ? "border-neutral-900 bg-neutral-900 text-white hover:bg-neutral-800" : "border-border bg-background text-foreground hover:bg-muted"
-            ),
-            disabled: buttonDisabled,
-            onClick: onConnect,
-            children: STATUS_LABELS[status]
-          }
-        )
-      ] })
-    }
-  );
-}
-
 // src/ui/message-response.tsx
 var React3 = __toESM(require("react"), 1);
 var import_streamdown = require("streamdown");
@@ -990,7 +934,7 @@ function useStreamingText({
 }
 
 // src/ui/message-response.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var BLOCK_MARKDOWN_TAGS = /* @__PURE__ */ new Set([
   "blockquote",
   "div",
@@ -1033,12 +977,12 @@ function MessageMarkdownParagraph({
   );
   const isImageOnly = childArray.length === 1 && React3.isValidElement(childArray[0]) && childArray[0].props.node?.tagName === "img";
   if (isImageOnly) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children });
   }
   if (childArray.some(hasBlockMarkdownChild)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ...domProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ...domProps, children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { ...domProps, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { ...domProps, children });
 }
 var MESSAGE_RESPONSE_COMPONENTS = {
   p: MessageMarkdownParagraph
@@ -1084,7 +1028,7 @@ var MessageResponse = React3.memo(
       () => ({ ...MESSAGE_RESPONSE_COMPONENTS, ...components }),
       [components]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       import_streamdown.Streamdown,
       {
         className: cn("size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0", className),
@@ -1099,20 +1043,47 @@ var MessageResponse = React3.memo(
 );
 MessageResponse.displayName = "MessageResponse";
 
-// src/ui/agent-response-timeline.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var CONNECT_DECISION = "connect";
-var HITL_DECISIONS = ["approve", "edit", "reject", "respond", "connect"];
-function asRecord(value) {
-  return value && typeof value === "object" && !Array.isArray(value) ? value : null;
-}
+// src/ui/hitl-presentation.ts
 function optionalString(value) {
   return typeof value === "string" && value.trim() ? value.trim() : null;
 }
+function hitlActionLabel(part, action) {
+  if (action === "approve") return ["tool_review", "app_data_permission"].includes(part.hitlKind) ? "Allow once" : "Approve";
+  if (action === "reject") return ["tool_review", "app_data_permission"].includes(part.hitlKind) ? "Don\u2019t allow" : "Reject";
+  if (action === "connect") return "Connect";
+  return "Skip";
+}
+function hitlTitle(part) {
+  const presentation = part.presentation || {};
+  if (part.hitlKind === "tool_review") return `Run ${optionalString(presentation.tool_name) || "this tool"}?`;
+  if (part.hitlKind === "mcp_auth") return `Connect ${optionalString(presentation.server_name) || "this service"} to continue`;
+  if (part.hitlKind === "app_data_permission") return "Allow this data change?";
+  return part.message;
+}
+function resolvedHitlLabel(part) {
+  const outcome = String(part.resolution?.outcome || part.status).trim().toLowerCase();
+  return {
+    approved: part.hitlKind === "user_approval" ? "Approved" : "Allowed",
+    rejected: part.hitlKind === "user_approval" ? "Rejected" : "Not allowed",
+    connected: "Connected",
+    skipped: "Skipped",
+    timeout: "Timed out",
+    expired: "Timed out",
+    cancelled: "Cancelled",
+    invalidated: "No longer available",
+    policy_denied: "Not allowed"
+  }[outcome] || outcome.replace(/_/g, " ");
+}
+
+// src/ui/agent-response-timeline.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function optionalString2(value) {
+  return typeof value === "string" && value.trim() ? value.trim() : null;
+}
 function presentationValue(part, key) {
   const presentation = part.presentation || {};
   const snakeKey = key.replace(/[A-Z]/g, (letter) => `_${letter.toLowerCase()}`);
-  return optionalString(presentation[key]) || optionalString(presentation[snakeKey]);
+  return optionalString2(presentation[key]) || optionalString2(presentation[snakeKey]);
 }
 function groupKey(part) {
   return presentationValue(part, "groupKey");
@@ -1130,7 +1101,7 @@ function isActiveTool(part, activeToolId) {
   return part.id === activeToolId || part.toolCallId === activeToolId || part.state === "input-available" || part.state === "input-streaming";
 }
 function Shimmer({ children, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: cn("inline-block animate-pulse", className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: cn("inline-block animate-pulse", className), children });
 }
 function CompactTask({
   children,
@@ -1142,12 +1113,12 @@ function CompactTask({
 }) {
   const [open, setOpen] = React4.useState(defaultOpen);
   const expandable = Boolean(children || detail);
-  const content = loading ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Shimmer, { children: label }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: label });
+  const content = loading ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Shimmer, { children: label }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: label });
   if (!expandable) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: cn("flex min-w-0 items-center gap-1.5 text-sm", error ? "text-destructive" : "text-muted-foreground"), children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: cn("flex min-w-0 items-center gap-1.5 text-sm", error ? "text-destructive" : "text-muted-foreground"), children: content });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "w-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       "button",
       {
         "aria-expanded": open,
@@ -1159,12 +1130,12 @@ function CompactTask({
         type: "button",
         children: [
           content,
-          open ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react3.ChevronDown, { className: "size-3" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react3.ChevronRight, { className: "size-3 opacity-70" })
+          open ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react3.ChevronDown, { className: "size-3" }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react3.ChevronRight, { className: "size-3 opacity-70" })
         ]
       }
     ),
-    open ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "mt-1 pl-4 text-sm text-muted-foreground", children: [
-      detail ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: detail }) : null,
+    open ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mt-1 pl-4 text-sm text-muted-foreground", children: [
+      detail ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { children: detail }) : null,
       children
     ] }) : null
   ] });
@@ -1173,7 +1144,7 @@ function ToolPartRow({
   activeToolId,
   part
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { "data-agents24-tool-part": part.type, "data-state": part.state, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { "data-agents24-tool-part": part.type, "data-state": part.state, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     CompactTask,
     {
       defaultOpen: part.state === "output-error",
@@ -1189,41 +1160,18 @@ function ToolGroup({
   parts
 }) {
   const loading = parts.some((part) => isActiveTool(part, activeToolId));
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CompactTask, { label: groupLabel(parts[0]), loading, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "space-y-1", children: parts.map((part) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CompactTask, { label: groupLabel(parts[0]), loading, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "space-y-1", children: parts.map((part) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
       className: cn("text-sm", part.state === "output-error" ? "text-destructive" : "text-muted-foreground"),
       children: [
-        isActiveTool(part, activeToolId) ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Shimmer, { children: toolLabel(part) }) : toolLabel(part),
-        toolDetail(part) ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ml-1 text-xs text-muted-foreground/75", children: toolDetail(part) }) : null
+        isActiveTool(part, activeToolId) ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Shimmer, { children: toolLabel(part) }) : toolLabel(part),
+        toolDetail(part) ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ml-1 text-xs text-muted-foreground/75", children: toolDetail(part) }) : null
       ]
     },
     part.id
   )) }) });
 }
-function collectHitlDecisions(part) {
-  const configs = Array.isArray(part.hitl.review_configs) ? part.hitl.review_configs : [];
-  const decisions = configs.flatMap((config) => {
-    const record = asRecord(config);
-    const allowed = Array.isArray(record?.allowed_decisions) ? record?.allowed_decisions : [];
-    return allowed.filter((item) => HITL_DECISIONS.includes(String(item)));
-  });
-  return Array.from(new Set(decisions));
-}
-function isMcpConnectHitl(part) {
-  const kind = `${part.hitlKind || optionalString(part.hitl.kind) || ""}`.toLowerCase();
-  const decisions = collectHitlDecisions(part);
-  return decisions.includes(CONNECT_DECISION) || kind.includes("mcp") || kind.includes("connection");
-}
-function mcpConnectLabel(part) {
-  const payload = asRecord(part.hitl.client_safe_payload);
-  const origin = asRecord(part.hitl.origin);
-  return optionalString(part.hitl.server_name) || optionalString(part.hitl.provider_name) || optionalString(payload?.server_name) || optionalString(payload?.provider_name) || optionalString(origin?.server_name) || optionalString(origin?.provider_name) || "MCP server";
-}
-function normalizedMcpStatus(status) {
-  if (status === "connecting" || status === "connected" || status === "resuming" || status === "error") return status;
-  return "pending";
-}
 function HitlPartRow({
   getHitlActionState,
   isLoading,
@@ -1231,36 +1179,40 @@ function HitlPartRow({
   part
 }) {
   const state = getHitlActionState?.(part);
-  const message = optionalString(part.hitl.message) || optionalString(part.hitl.text) || "Input is required to continue.";
-  if (isMcpConnectHitl(part)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      McpConnectRequiredCard,
+  const [comment, setComment] = React4.useState("");
+  const presentation = part.presentation || {};
+  const requireComment = presentation.require_comment === true;
+  const isTerminal = part.status !== "pending";
+  if (isTerminal) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "px-1 py-1 text-sm text-muted-foreground", children: resolvedHitlLabel(part) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "space-y-2.5 rounded-lg bg-muted/45 px-3 py-2.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "text-sm font-medium text-foreground text-pretty", children: hitlTitle(part) }),
+    requireComment ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "textarea",
       {
-        error: state?.error,
-        message,
-        onConnect: onHitlAction ? () => onHitlAction(part, CONNECT_DECISION) : void 0,
-        serverName: mcpConnectLabel(part),
-        status: normalizedMcpStatus(state?.status)
+        "aria-label": "Approval comment",
+        className: "min-h-20 w-full resize-y rounded-md border border-border/60 bg-background px-3 py-2 text-sm outline-none focus-visible:border-neutral-300 focus-visible:ring-0 dark:focus-visible:border-neutral-600",
+        onChange: (event) => setComment(event.target.value),
+        placeholder: "Comment required",
+        value: comment
       }
-    );
-  }
-  const decisions = collectHitlDecisions(part);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "space-y-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MessageResponse, { children: message }),
-    state?.error ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-sm text-destructive", children: state.error }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex flex-wrap items-center gap-2", children: decisions.map((decision) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    ) : null,
+    state?.error ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "text-sm text-destructive", children: state.error }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex flex-wrap items-center gap-1.5", children: part.allowedActions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "button",
       {
+        "aria-label": hitlActionLabel(part, action),
         className: cn(
-          "min-w-24 rounded-md border px-3 py-1.5 text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-60",
-          decision === "approve" || decision === "connect" ? "border-neutral-900 bg-neutral-900 text-white hover:bg-neutral-800" : "border-border bg-background text-foreground hover:bg-muted"
+          "min-h-10 rounded-md px-3 text-sm font-medium transition-[background-color,color,opacity,transform] duration-150 ease-out active:scale-[0.96] disabled:pointer-events-none disabled:opacity-60",
+          action === "approve" || action === "connect" ? "bg-neutral-900 text-white hover:bg-neutral-800 dark:bg-neutral-100 dark:text-neutral-900 dark:hover:bg-white" : "bg-transparent text-muted-foreground hover:bg-background/80 hover:text-foreground"
         ),
-        disabled: !onHitlAction || isLoading || state?.status === "connecting" || state?.status === "resuming",
-        onClick: () => onHitlAction?.(part, decision),
+        disabled: !onHitlAction || isLoading || state?.status === "connecting" || state?.status === "resuming" || requireComment && !comment.trim(),
+        onClick: () => onHitlAction?.(part, action, comment.trim() || void 0),
         type: "button",
-        children: decision === "connect" ? "Connect" : decision
+        children: hitlActionLabel(part, action)
       },
-      decision
+      action
     )) })
   ] });
 }
@@ -1272,20 +1224,20 @@ function DefaultPartRow({
   onHitlAction,
   part
 }) {
-  if (part.kind === "text") return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MessageResponse, { children: part.text });
-  if (part.kind === "tool") return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ToolPartRow, { activeToolId, part });
+  if (part.kind === "text") return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MessageResponse, { children: part.text });
+  if (part.kind === "tool") return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ToolPartRow, { activeToolId, part });
   if (part.kind === "reasoning") {
     const label = part.text || part.label || "Thinking";
-    return part.status === "running" || part.status === "streaming" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Shimmer, { className: "text-sm text-muted-foreground", children: label }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-sm text-muted-foreground", children: label });
+    return part.status === "running" || part.status === "streaming" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Shimmer, { className: "text-sm text-muted-foreground", children: label }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "text-sm text-muted-foreground", children: label });
   }
   if (part.kind === "ui-blocks") {
     if (part.state === "output-error") {
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-sm text-destructive", children: part.errorText || "Failed to render UI content." });
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "text-sm text-destructive", children: part.errorText || "Failed to render UI content." });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CompactTask, { label: part.state === "input-streaming" ? "Rendering UI block" : "Rendered UI block", loading: part.state === "input-streaming" });
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CompactTask, { label: part.state === "input-streaming" ? "Rendering UI block" : "Rendered UI block", loading: part.state === "input-streaming" });
   }
   if (part.kind === "hitl") {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       HitlPartRow,
       {
         getHitlActionState,
@@ -1295,8 +1247,8 @@ function DefaultPartRow({
       }
     );
   }
-  if (part.kind === "error") return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-sm text-destructive", children: part.errorText });
-  if (part.kind === "data") return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { "data-agents24-data-part": part.name, className: "hidden", children: message.id });
+  if (part.kind === "error") return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "text-sm text-destructive", children: part.errorText });
+  if (part.kind === "data") return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { "data-agents24-data-part": part.name, className: "hidden", children: message.id });
   return null;
 }
 function AgentResponseTimeline({
@@ -1321,11 +1273,11 @@ function AgentResponseTimeline({
         group.push(candidate);
         index += 1;
       }
-      rendered.push(group.length === 1 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ToolPartRow, { activeToolId, part: group[0] }, group[0].id) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ToolGroup, { activeToolId, parts: group }, `tool-group-${key}-${group[0].id}`));
+      rendered.push(group.length === 1 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ToolPartRow, { activeToolId, part: group[0] }, group[0].id) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ToolGroup, { activeToolId, parts: group }, `tool-group-${key}-${group[0].id}`));
       continue;
     }
     rendered.push(
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(React4.Fragment, { children: renderPart ? renderPart(part, message) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(React4.Fragment, { children: renderPart ? renderPart(part, message) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         DefaultPartRow,
         {
           activeToolId,
@@ -1340,16 +1292,16 @@ function AgentResponseTimeline({
     index += 1;
   }
   if (rendered.length === 0 && message.content) {
-    rendered.push(/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MessageResponse, { children: message.content }, `${message.id}-fallback`));
+    rendered.push(/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MessageResponse, { children: message.content }, `${message.id}-fallback`));
   }
   if (rendered.length === 0 && isLoading) {
-    rendered.push(/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-sm text-muted-foreground", children: "Thinking" }, `${message.id}-thinking`));
+    rendered.push(/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "text-sm text-muted-foreground", children: "Thinking" }, `${message.id}-thinking`));
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "space-y-3", children: rendered });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "space-y-3", children: rendered });
 }
 
 // src/ui/agent-chat-message.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var DEFAULT_USER_MESSAGE_COLLAPSE_THRESHOLD = 360;
 var DEFAULT_USER_MESSAGE_COLLAPSED_LINES = 4;
 function shouldCollapseUserMessage(content, threshold = DEFAULT_USER_MESSAGE_COLLAPSE_THRESHOLD) {
@@ -1372,9 +1324,9 @@ function AgentChatUserMessageContent({
     display: "-webkit-box",
     overflow: "hidden"
   } : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex min-w-0 flex-col gap-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { id: contentId, className: "min-w-0", style: clampedStyle, children: content }),
-    shouldCollapse ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex min-w-0 flex-col gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { id: contentId, className: "min-w-0", style: clampedStyle, children: content }),
+    shouldCollapse ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "button",
       {
         "aria-controls": contentId,
@@ -1387,7 +1339,7 @@ function AgentChatUserMessageContent({
         type: "button",
         children: [
           isExpanded ? showLessLabel : showMoreLabel,
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { "aria-hidden": "true", className: "size-4", strokeWidth: 2 })
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { "aria-hidden": "true", className: "size-4", strokeWidth: 2 })
         ]
       }
     ) : null
@@ -1419,9 +1371,9 @@ function AgentChatMessage({
   const resolvedUserContent = userMessageContent ?? message.content;
   const shouldRenderContent = isAssistant || Boolean(renderUserContent || resolvedUserContent);
   const showAttachments = Boolean(message.attachments?.length) && (message.role === "user" || showAssistantAttachments);
-  const renderedActions = actions ?? (actionHandlers ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AgentChatDefaultActions, { handlers: actionHandlers, message }) : null);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(ChatMessage, { className, dir, from: message.role, children: [
-    showAttachments ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChatAttachments, { className: "mb-2", dir, children: message.attachments?.map((attachment, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  const renderedActions = actions ?? (actionHandlers ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AgentChatDefaultActions, { handlers: actionHandlers, message }) : null);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(ChatMessage, { className, dir, from: message.role, children: [
+    showAttachments ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChatAttachments, { className: "mb-2", dir, children: message.attachments?.map((attachment, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       ChatAttachment,
       {
         data: attachment,
@@ -1429,13 +1381,13 @@ function AgentChatMessage({
       },
       String(attachment.url || attachment.filename || index)
     )) }) : null,
-    shouldRenderContent ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    shouldRenderContent ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       ChatMessageContent,
       {
         className: cn(isAssistant ? "bg-transparent p-0" : void 0, contentClassName),
         dir,
         children: [
-          isAssistant ? renderAssistantContent ? renderAssistantContent({ isStreaming, message }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          isAssistant ? renderAssistantContent ? renderAssistantContent({ isStreaming, message }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             AgentResponseTimeline,
             {
               getHitlActionState,
@@ -1445,7 +1397,7 @@ function AgentChatMessage({
               renderPart
             }
           ) : null,
-          !isAssistant ? renderUserContent ? renderUserContent({ message }) : resolvedUserContent ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          !isAssistant ? renderUserContent ? renderUserContent({ message }) : resolvedUserContent ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             AgentChatUserMessageContent,
             {
               collapsedLines: userMessageCollapsedLines,
@@ -1458,16 +1410,16 @@ function AgentChatMessage({
         ]
       }
     ) : null,
-    renderedActions ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: cn(dir === "rtl" ? "mt-1 h-9 w-full translate-x-2" : "mt-1 h-9 w-full -translate-x-2", actionsClassName), children: renderedActions }) : null
+    renderedActions ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: cn(dir === "rtl" ? "mt-1 h-9 w-full translate-x-2" : "mt-1 h-9 w-full -translate-x-2", actionsClassName), children: renderedActions }) : null
   ] });
 }
 
 // src/ui/bubble.tsx
 var import_class_variance_authority2 = require("class-variance-authority");
 var import_react_slot2 = require("@radix-ui/react-slot");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function BubbleGroup({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "div",
     {
       "data-slot": "bubble-group",
@@ -1501,7 +1453,7 @@ function Bubble({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "div",
     {
       "data-slot": "bubble",
@@ -1518,7 +1470,7 @@ function BubbleContent({
   ...props
 }) {
   const Comp = asChild ? import_react_slot2.Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     Comp,
     {
       "data-slot": "bubble-content",
@@ -1555,7 +1507,7 @@ function BubbleReactions({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "div",
     {
       "data-slot": "bubble-reactions",
@@ -1570,7 +1522,7 @@ function BubbleReactions({
 // src/ui/marker.tsx
 var import_class_variance_authority3 = require("class-variance-authority");
 var import_react_slot3 = require("@radix-ui/react-slot");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var markerVariants = (0, import_class_variance_authority3.cva)(
   "group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-foreground",
   {
@@ -1590,7 +1542,7 @@ function Marker({
   ...props
 }) {
   const Comp = asChild ? import_react_slot3.Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     Comp,
     {
       "data-slot": "marker",
@@ -1601,7 +1553,7 @@ function Marker({
   );
 }
 function MarkerIcon({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "span",
     {
       "data-slot": "marker-icon",
@@ -1615,7 +1567,7 @@ function MarkerIcon({ className, ...props }) {
   );
 }
 function MarkerContent({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "span",
     {
       "data-slot": "marker-content",
@@ -1627,6 +1579,65 @@ function MarkerContent({ className, ...props }) {
     }
   );
 }
+
+// src/ui/mcp-connect-required-card.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var STATUS_LABELS = {
+  pending: "Connect",
+  connecting: "Connecting",
+  connected: "Connected",
+  resuming: "Resuming",
+  error: "Try again"
+};
+function McpConnectRequiredCard({
+  serverName,
+  providerKey,
+  message,
+  status = "pending",
+  disabled = false,
+  loading = false,
+  error,
+  onConnect,
+  className,
+  ...props
+}) {
+  const label = String(serverName || providerKey || "MCP server").trim();
+  const isBusy = loading || status === "connecting" || status === "resuming";
+  const isConnected = status === "connected";
+  const buttonDisabled = disabled || isBusy || isConnected || !onConnect;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "div",
+    {
+      "data-agents24-mcp-connect-card": true,
+      "data-status": status,
+      className: cn(
+        "w-full rounded-lg border border-border/50 bg-muted/25 p-3 text-sm text-foreground",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex min-w-0 items-start justify-between gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "truncate text-sm font-medium", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-1 text-sm text-muted-foreground", children: message || "Connect your account to continue." }),
+          status === "error" && error ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-2 text-sm text-destructive", children: error }) : null
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "button",
+          {
+            type: "button",
+            className: cn(
+              "shrink-0 rounded-md border px-3 py-1.5 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-60",
+              status === "pending" || status === "error" ? "border-neutral-900 bg-neutral-900 text-white hover:bg-neutral-800" : "border-border bg-background text-foreground hover:bg-muted"
+            ),
+            disabled: buttonDisabled,
+            onClick: onConnect,
+            children: STATUS_LABELS[status]
+          }
+        )
+      ] })
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AgentChatComposer,
@@ -1675,7 +1686,10 @@ function MarkerContent({ className, ...props }) {
   attachmentVariants,
   bubbleVariants,
   cn,
+  hitlActionLabel,
+  hitlTitle,
   markerVariants,
+  resolvedHitlLabel,
   shouldCollapseUserMessage
 });
 //# sourceMappingURL=index.cjs.map