@athenaintel/react 0.28.1 → 0.32.0

package/dist/chat/statewire-banners.cjs

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const lucideReact = require("lucide-react");
 const statewireLifecycleContext = require("../provider/statewire-lifecycle-context.cjs");
+const errors = require("../agent-runtime/src/errors.cjs");
 const cnfast = require("cnfast");
 const ERROR_BANNER_TONE = {
   paywall: "border-violet-200 bg-violet-50 text-violet-900",
@@ -11,10 +12,35 @@ const ERROR_BANNER_TONE = {
   "read-only": "border-amber-200 bg-amber-50 text-amber-900",
   command: "border-red-200 bg-red-50 text-red-900"
 };
-const StatewireErrorBanner = () => {
+function refusalOffersNewSession(code) {
+  return code === errors.COLLAB_AGENT_CHANNEL_SESSION_MISMATCH;
+}
+const StartNewSessionButton = ({
+  onClick,
+  className
+}) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "button",
+  {
+    type: "button",
+    onClick,
+    className: cnfast.cn(
+      "inline-flex shrink-0 items-center gap-1.5 rounded-md border border-current/20 bg-white/70 px-2 py-1 font-medium text-xs transition-colors hover:bg-white",
+      className
+    ),
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SquarePenIcon, { className: "size-3.5", "aria-hidden": true }),
+      "Start a new session"
+    ]
+  }
+);
+const StatewireErrorBanner = ({ onStartNewSession }) => {
   const lifecycle = statewireLifecycleContext.useAthenaStatewireLifecycle();
   if (!(lifecycle == null ? void 0 : lifecycle.error)) return null;
   const { error, dismissError } = lifecycle;
+  const startNewSession = onStartNewSession && refusalOffersNewSession(error.code) ? () => {
+    dismissError();
+    onStartNewSession();
+  } : null;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -28,6 +54,7 @@ const StatewireErrorBanner = () => {
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold text-xs", children: error.title }),
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "pt-0.5 text-xs leading-snug opacity-80", children: error.message })
         ] }),
+        startNewSession ? /* @__PURE__ */ jsxRuntime.jsx(StartNewSessionButton, { onClick: startNewSession }) : null,
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
@@ -78,6 +105,8 @@ const StatewireConnectionBanner = () => {
     }
   );
 };
+exports.StartNewSessionButton = StartNewSessionButton;
 exports.StatewireConnectionBanner = StatewireConnectionBanner;
 exports.StatewireErrorBanner = StatewireErrorBanner;
+exports.refusalOffersNewSession = refusalOffersNewSession;
 //# sourceMappingURL=statewire-banners.cjs.map

package/dist/chat/statewire-banners.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"statewire-banners.cjs","sources":["../../src/chat/statewire-banners.tsx"],"sourcesContent":["import { RefreshCwIcon, XIcon } from 'lucide-react';\nimport type { FC } from 'react';\nimport { useAthenaStatewireLifecycle } from '../provider/statewire-lifecycle-context';\nimport type { AthenaStatewireErrorNotice } from '../runtime/statewire-lifecycle';\nimport { cn } from '../lib/utils';\n\nconst ERROR_BANNER_TONE: Record<AthenaStatewireErrorNotice['kind'], string> = {\n  paywall: 'border-violet-200 bg-violet-50 text-violet-900',\n  // A refused send, not a broken chat: the thread is busy (out-of-band run)\n  // or needs a new chat — amber, like the connection strip.\n  'read-only': 'border-amber-200 bg-amber-50 text-amber-900',\n  command: 'border-red-200 bg-red-50 text-red-900',\n};\n\n/**\n * Dismissible transport-error banner: send rejections (including the\n * pre-cutover-thread dispatch fence's 409), paywall refusals, and command\n * failures that would otherwise vanish into the console after the composer\n * already cleared. Renders nothing outside `AthenaProvider`.\n */\nexport const StatewireErrorBanner: FC = () => {\n  const lifecycle = useAthenaStatewireLifecycle();\n  if (!lifecycle?.error) return null;\n  const { error, dismissError } = lifecycle;\n\n  return (\n    <div\n      role=\"alert\"\n      className={cn(\n        'aui-statewire-error-banner flex w-full items-start gap-2 rounded-xl border px-3 py-2.5',\n        ERROR_BANNER_TONE[error.kind],\n      )}\n    >\n      <div className=\"min-w-0 flex-1\">\n        <p className=\"font-semibold text-xs\">{error.title}</p>\n        <p className=\"pt-0.5 text-xs leading-snug opacity-80\">{error.message}</p>\n      </div>\n      <button\n        type=\"button\"\n        aria-label=\"Dismiss chat error\"\n        onClick={dismissError}\n        className=\"shrink-0 rounded p-1 transition-colors hover:bg-black/5\"\n      >\n        <XIcon className=\"size-3.5\" />\n      </button>\n    </div>\n  );\n};\n\n/**\n * Degraded-connection strip: shown only while the statewire channel is\n * degraded, with a manual reconnect affordance when the transport exposes one.\n */\nexport const StatewireConnectionBanner: FC = () => {\n  const lifecycle = useAthenaStatewireLifecycle();\n  const connection = lifecycle?.connection;\n  if (!connection?.degraded) return null;\n  const offline = connection.status === 'stopped';\n\n  return (\n    <div\n      role=\"status\"\n      className=\"aui-statewire-connection-banner flex w-full items-center gap-2 rounded-xl border border-amber-200 bg-amber-50 px-3 py-2 text-amber-800 text-xs\"\n    >\n      <span\n        aria-hidden=\"true\"\n        className={cn(\n          'size-2 shrink-0 rounded-full',\n          offline ? 'bg-red-500' : 'animate-pulse bg-amber-500',\n        )}\n      />\n      <span className=\"min-w-0 flex-1\">\n        {offline ? (connection.message ?? 'Chat is offline.') : 'Retrying chat connection…'}\n      </span>\n      {lifecycle?.reconnect ? (\n        <button\n          type=\"button\"\n          aria-label=\"Reconnect chat\"\n          onClick={lifecycle.reconnect}\n          className=\"shrink-0 rounded-md border border-amber-300 bg-white px-2 py-1 font-medium transition-colors hover:bg-amber-100\"\n        >\n          <RefreshCwIcon className=\"size-3.5\" />\n        </button>\n      ) : null}\n    </div>\n  );\n};\n"],"names":["useAthenaStatewireLifecycle","jsxs","cn","jsx","XIcon","RefreshCwIcon"],"mappings":";;;;;;AAMA,MAAM,oBAAwE;AAAA,EAC5E,SAAS;AAAA;AAAA;AAAA,EAGT,aAAa;AAAA,EACb,SAAS;AACX;AAQO,MAAM,uBAA2B,MAAM;AAC5C,QAAM,YAAYA,0BAAAA,4BAAA;AAClB,MAAI,EAAC,uCAAW,OAAO,QAAO;AAC9B,QAAM,EAAE,OAAO,aAAA,IAAiB;AAEhC,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAWC,OAAAA;AAAAA,QACT;AAAA,QACA,kBAAkB,MAAM,IAAI;AAAA,MAAA;AAAA,MAG9B,UAAA;AAAA,QAAAD,2BAAAA,KAAC,OAAA,EAAI,WAAU,kBACb,UAAA;AAAA,UAAAE,2BAAAA,IAAC,KAAA,EAAE,WAAU,yBAAyB,UAAA,MAAM,OAAM;AAAA,UAClDA,2BAAAA,IAAC,KAAA,EAAE,WAAU,0CAA0C,gBAAM,QAAA,CAAQ;AAAA,QAAA,GACvE;AAAA,QACAA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAW;AAAA,YACX,SAAS;AAAA,YACT,WAAU;AAAA,YAEV,UAAAA,2BAAAA,IAACC,YAAAA,OAAA,EAAM,WAAU,WAAA,CAAW;AAAA,UAAA;AAAA,QAAA;AAAA,MAC9B;AAAA,IAAA;AAAA,EAAA;AAGN;AAMO,MAAM,4BAAgC,MAAM;AACjD,QAAM,YAAYJ,0BAAAA,4BAAA;AAClB,QAAM,aAAa,uCAAW;AAC9B,MAAI,EAAC,yCAAY,UAAU,QAAO;AAClC,QAAM,UAAU,WAAW,WAAW;AAEtC,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAU;AAAA,MAEV,UAAA;AAAA,QAAAE,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAY;AAAA,YACZ,WAAWD,OAAAA;AAAAA,cACT;AAAA,cACA,UAAU,eAAe;AAAA,YAAA;AAAA,UAC3B;AAAA,QAAA;AAAA,QAEFC,2BAAAA,IAAC,UAAK,WAAU,kBACb,oBAAW,WAAW,WAAW,qBAAsB,4BAAA,CAC1D;AAAA,SACC,uCAAW,aACVA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAW;AAAA,YACX,SAAS,UAAU;AAAA,YACnB,WAAU;AAAA,YAEV,UAAAA,2BAAAA,IAACE,YAAAA,eAAA,EAAc,WAAU,WAAA,CAAW;AAAA,UAAA;AAAA,QAAA,IAEpC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGV;;;"}
+{"version":3,"file":"statewire-banners.cjs","sources":["../../src/chat/statewire-banners.tsx"],"sourcesContent":["import { COLLAB_AGENT_CHANNEL_SESSION_MISMATCH } from '@athenaintel/agent-runtime';\nimport { RefreshCwIcon, SquarePenIcon, XIcon } from 'lucide-react';\nimport type { FC } from 'react';\nimport { useAthenaStatewireLifecycle } from '../provider/statewire-lifecycle-context';\nimport type { AthenaStatewireErrorNotice } from '../runtime/statewire-lifecycle';\nimport { cn } from '../lib/utils';\n\nconst ERROR_BANNER_TONE: Record<AthenaStatewireErrorNotice['kind'], string> = {\n  paywall: 'border-violet-200 bg-violet-50 text-violet-900',\n  // A refused send, not a broken chat: the thread is busy (out-of-band run)\n  // or needs a new chat — amber, like the connection strip.\n  'read-only': 'border-amber-200 bg-amber-50 text-amber-900',\n  command: 'border-red-200 bg-red-50 text-red-900',\n};\n\n/**\n * Whether a refusal's way on is a new session: the session keeps the\n * collab-agent channel (the app's mode) it started on, so a send in the other\n * mode can only go to a new one.\n */\nexport function refusalOffersNewSession(code: string | null | undefined): boolean {\n  return code === COLLAB_AGENT_CHANNEL_SESSION_MISMATCH;\n}\n\n/** The \"Start a new session\" action a refusal notice offers. */\nexport const StartNewSessionButton: FC<{ onClick: () => void; className?: string }> = ({\n  onClick,\n  className,\n}) => (\n  <button\n    type=\"button\"\n    onClick={onClick}\n    className={cn(\n      'inline-flex shrink-0 items-center gap-1.5 rounded-md border border-current/20 bg-white/70 px-2 py-1 font-medium text-xs transition-colors hover:bg-white',\n      className,\n    )}\n  >\n    <SquarePenIcon className=\"size-3.5\" aria-hidden />\n    Start a new session\n  </button>\n);\n\nexport interface StatewireErrorBannerProps {\n  /**\n   * Starts a new session — offered when the refusal's way on is one (a send in\n   * another mode than the session's). `AthenaChat` passes the thread list's\n   * `newThread`; without it the banner offers no action.\n   */\n  onStartNewSession?: () => void;\n}\n\n/**\n * Dismissible transport-error banner: send rejections (including the\n * pre-cutover-thread dispatch fence's 409), paywall refusals, and command\n * failures that would otherwise vanish into the console after the composer\n * already cleared. Renders nothing outside `AthenaProvider`.\n */\nexport const StatewireErrorBanner: FC<StatewireErrorBannerProps> = ({ onStartNewSession }) => {\n  const lifecycle = useAthenaStatewireLifecycle();\n  if (!lifecycle?.error) return null;\n  const { error, dismissError } = lifecycle;\n  const startNewSession =\n    onStartNewSession && refusalOffersNewSession(error.code)\n      ? () => {\n          dismissError();\n          onStartNewSession();\n        }\n      : null;\n\n  return (\n    <div\n      role=\"alert\"\n      className={cn(\n        'aui-statewire-error-banner flex w-full items-start gap-2 rounded-xl border px-3 py-2.5',\n        ERROR_BANNER_TONE[error.kind],\n      )}\n    >\n      <div className=\"min-w-0 flex-1\">\n        <p className=\"font-semibold text-xs\">{error.title}</p>\n        <p className=\"pt-0.5 text-xs leading-snug opacity-80\">{error.message}</p>\n      </div>\n      {startNewSession ? <StartNewSessionButton onClick={startNewSession} /> : null}\n      <button\n        type=\"button\"\n        aria-label=\"Dismiss chat error\"\n        onClick={dismissError}\n        className=\"shrink-0 rounded p-1 transition-colors hover:bg-black/5\"\n      >\n        <XIcon className=\"size-3.5\" />\n      </button>\n    </div>\n  );\n};\n\n/**\n * Degraded-connection strip: shown only while the statewire channel is\n * degraded, with a manual reconnect affordance when the transport exposes one.\n */\nexport const StatewireConnectionBanner: FC = () => {\n  const lifecycle = useAthenaStatewireLifecycle();\n  const connection = lifecycle?.connection;\n  if (!connection?.degraded) return null;\n  const offline = connection.status === 'stopped';\n\n  return (\n    <div\n      role=\"status\"\n      className=\"aui-statewire-connection-banner flex w-full items-center gap-2 rounded-xl border border-amber-200 bg-amber-50 px-3 py-2 text-amber-800 text-xs\"\n    >\n      <span\n        aria-hidden=\"true\"\n        className={cn(\n          'size-2 shrink-0 rounded-full',\n          offline ? 'bg-red-500' : 'animate-pulse bg-amber-500',\n        )}\n      />\n      <span className=\"min-w-0 flex-1\">\n        {offline ? (connection.message ?? 'Chat is offline.') : 'Retrying chat connection…'}\n      </span>\n      {lifecycle?.reconnect ? (\n        <button\n          type=\"button\"\n          aria-label=\"Reconnect chat\"\n          onClick={lifecycle.reconnect}\n          className=\"shrink-0 rounded-md border border-amber-300 bg-white px-2 py-1 font-medium transition-colors hover:bg-amber-100\"\n        >\n          <RefreshCwIcon className=\"size-3.5\" />\n        </button>\n      ) : null}\n    </div>\n  );\n};\n"],"names":["COLLAB_AGENT_CHANNEL_SESSION_MISMATCH","jsxs","cn","jsx","SquarePenIcon","useAthenaStatewireLifecycle","XIcon","RefreshCwIcon"],"mappings":";;;;;;;AAOA,MAAM,oBAAwE;AAAA,EAC5E,SAAS;AAAA;AAAA;AAAA,EAGT,aAAa;AAAA,EACb,SAAS;AACX;AAOO,SAAS,wBAAwB,MAA0C;AAChF,SAAO,SAASA,OAAAA;AAClB;AAGO,MAAM,wBAAyE,CAAC;AAAA,EACrF;AAAA,EACA;AACF,MACEC,2BAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,MAAK;AAAA,IACL;AAAA,IACA,WAAWC,OAAAA;AAAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IAGF,UAAA;AAAA,MAAAC,2BAAAA,IAACC,YAAAA,eAAA,EAAc,WAAU,YAAW,eAAW,MAAC;AAAA,MAAE;AAAA,IAAA;AAAA,EAAA;AAEpD;AAkBK,MAAM,uBAAsD,CAAC,EAAE,wBAAwB;AAC5F,QAAM,YAAYC,0BAAAA,4BAAA;AAClB,MAAI,EAAC,uCAAW,OAAO,QAAO;AAC9B,QAAM,EAAE,OAAO,aAAA,IAAiB;AAChC,QAAM,kBACJ,qBAAqB,wBAAwB,MAAM,IAAI,IACnD,MAAM;AACJ,iBAAA;AACA,sBAAA;AAAA,EACF,IACA;AAEN,SACEJ,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAWC,OAAAA;AAAAA,QACT;AAAA,QACA,kBAAkB,MAAM,IAAI;AAAA,MAAA;AAAA,MAG9B,UAAA;AAAA,QAAAD,2BAAAA,KAAC,OAAA,EAAI,WAAU,kBACb,UAAA;AAAA,UAAAE,2BAAAA,IAAC,KAAA,EAAE,WAAU,yBAAyB,UAAA,MAAM,OAAM;AAAA,UAClDA,2BAAAA,IAAC,KAAA,EAAE,WAAU,0CAA0C,gBAAM,QAAA,CAAQ;AAAA,QAAA,GACvE;AAAA,QACC,kBAAkBA,2BAAAA,IAAC,uBAAA,EAAsB,SAAS,iBAAiB,IAAK;AAAA,QACzEA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAW;AAAA,YACX,SAAS;AAAA,YACT,WAAU;AAAA,YAEV,UAAAA,2BAAAA,IAACG,YAAAA,OAAA,EAAM,WAAU,WAAA,CAAW;AAAA,UAAA;AAAA,QAAA;AAAA,MAC9B;AAAA,IAAA;AAAA,EAAA;AAGN;AAMO,MAAM,4BAAgC,MAAM;AACjD,QAAM,YAAYD,0BAAAA,4BAAA;AAClB,QAAM,aAAa,uCAAW;AAC9B,MAAI,EAAC,yCAAY,UAAU,QAAO;AAClC,QAAM,UAAU,WAAW,WAAW;AAEtC,SACEJ,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAU;AAAA,MAEV,UAAA;AAAA,QAAAE,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAY;AAAA,YACZ,WAAWD,OAAAA;AAAAA,cACT;AAAA,cACA,UAAU,eAAe;AAAA,YAAA;AAAA,UAC3B;AAAA,QAAA;AAAA,QAEFC,2BAAAA,IAAC,UAAK,WAAU,kBACb,oBAAW,WAAW,WAAW,qBAAsB,4BAAA,CAC1D;AAAA,SACC,uCAAW,aACVA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAW;AAAA,YACX,SAAS,UAAU;AAAA,YACnB,WAAU;AAAA,YAEV,UAAAA,2BAAAA,IAACI,YAAAA,eAAA,EAAc,WAAU,WAAA,CAAW;AAAA,UAAA;AAAA,QAAA,IAEpC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGV;;;;;"}

package/dist/chat/statewire-banners.d.ts

@@ -1,11 +1,30 @@
 import type { FC } from 'react';
+/**
+ * Whether a refusal's way on is a new session: the session keeps the
+ * collab-agent channel (the app's mode) it started on, so a send in the other
+ * mode can only go to a new one.
+ */
+export declare function refusalOffersNewSession(code: string | null | undefined): boolean;
+/** The "Start a new session" action a refusal notice offers. */
+export declare const StartNewSessionButton: FC<{
+    onClick: () => void;
+    className?: string;
+}>;
+export interface StatewireErrorBannerProps {
+    /**
+     * Starts a new session — offered when the refusal's way on is one (a send in
+     * another mode than the session's). `AthenaChat` passes the thread list's
+     * `newThread`; without it the banner offers no action.
+     */
+    onStartNewSession?: () => void;
+}
 /**
  * Dismissible transport-error banner: send rejections (including the
  * pre-cutover-thread dispatch fence's 409), paywall refusals, and command
  * failures that would otherwise vanish into the console after the composer
  * already cleared. Renders nothing outside `AthenaProvider`.
  */
-export declare const StatewireErrorBanner: FC;
+export declare const StatewireErrorBanner: FC<StatewireErrorBannerProps>;
 /**
  * Degraded-connection strip: shown only while the statewire channel is
  * degraded, with a manual reconnect affordance when the transport exposes one.

package/dist/chat/statewire-banners.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { RefreshCwIcon, XIcon } from "lucide-react";
+import { RefreshCwIcon, XIcon, SquarePenIcon } from "lucide-react";
 import { useAthenaStatewireLifecycle } from "../provider/statewire-lifecycle-context.js";
+import { COLLAB_AGENT_CHANNEL_SESSION_MISMATCH } from "../agent-runtime/src/errors.js";
 import { cn } from "cnfast";
 const ERROR_BANNER_TONE = {
   paywall: "border-violet-200 bg-violet-50 text-violet-900",
@@ -9,10 +10,35 @@ const ERROR_BANNER_TONE = {
   "read-only": "border-amber-200 bg-amber-50 text-amber-900",
   command: "border-red-200 bg-red-50 text-red-900"
 };
-const StatewireErrorBanner = () => {
+function refusalOffersNewSession(code) {
+  return code === COLLAB_AGENT_CHANNEL_SESSION_MISMATCH;
+}
+const StartNewSessionButton = ({
+  onClick,
+  className
+}) => /* @__PURE__ */ jsxs(
+  "button",
+  {
+    type: "button",
+    onClick,
+    className: cn(
+      "inline-flex shrink-0 items-center gap-1.5 rounded-md border border-current/20 bg-white/70 px-2 py-1 font-medium text-xs transition-colors hover:bg-white",
+      className
+    ),
+    children: [
+      /* @__PURE__ */ jsx(SquarePenIcon, { className: "size-3.5", "aria-hidden": true }),
+      "Start a new session"
+    ]
+  }
+);
+const StatewireErrorBanner = ({ onStartNewSession }) => {
   const lifecycle = useAthenaStatewireLifecycle();
   if (!(lifecycle == null ? void 0 : lifecycle.error)) return null;
   const { error, dismissError } = lifecycle;
+  const startNewSession = onStartNewSession && refusalOffersNewSession(error.code) ? () => {
+    dismissError();
+    onStartNewSession();
+  } : null;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -26,6 +52,7 @@ const StatewireErrorBanner = () => {
           /* @__PURE__ */ jsx("p", { className: "font-semibold text-xs", children: error.title }),
           /* @__PURE__ */ jsx("p", { className: "pt-0.5 text-xs leading-snug opacity-80", children: error.message })
         ] }),
+        startNewSession ? /* @__PURE__ */ jsx(StartNewSessionButton, { onClick: startNewSession }) : null,
         /* @__PURE__ */ jsx(
           "button",
           {
@@ -77,7 +104,9 @@ const StatewireConnectionBanner = () => {
   );
 };
 export {
+  StartNewSessionButton,
   StatewireConnectionBanner,
-  StatewireErrorBanner
+  StatewireErrorBanner,
+  refusalOffersNewSession
 };
 //# sourceMappingURL=statewire-banners.js.map

package/dist/chat/statewire-banners.js.map

@@ -1 +1 @@
-{"version":3,"file":"statewire-banners.js","sources":["../../src/chat/statewire-banners.tsx"],"sourcesContent":["import { RefreshCwIcon, XIcon } from 'lucide-react';\nimport type { FC } from 'react';\nimport { useAthenaStatewireLifecycle } from '../provider/statewire-lifecycle-context';\nimport type { AthenaStatewireErrorNotice } from '../runtime/statewire-lifecycle';\nimport { cn } from '../lib/utils';\n\nconst ERROR_BANNER_TONE: Record<AthenaStatewireErrorNotice['kind'], string> = {\n  paywall: 'border-violet-200 bg-violet-50 text-violet-900',\n  // A refused send, not a broken chat: the thread is busy (out-of-band run)\n  // or needs a new chat — amber, like the connection strip.\n  'read-only': 'border-amber-200 bg-amber-50 text-amber-900',\n  command: 'border-red-200 bg-red-50 text-red-900',\n};\n\n/**\n * Dismissible transport-error banner: send rejections (including the\n * pre-cutover-thread dispatch fence's 409), paywall refusals, and command\n * failures that would otherwise vanish into the console after the composer\n * already cleared. Renders nothing outside `AthenaProvider`.\n */\nexport const StatewireErrorBanner: FC = () => {\n  const lifecycle = useAthenaStatewireLifecycle();\n  if (!lifecycle?.error) return null;\n  const { error, dismissError } = lifecycle;\n\n  return (\n    <div\n      role=\"alert\"\n      className={cn(\n        'aui-statewire-error-banner flex w-full items-start gap-2 rounded-xl border px-3 py-2.5',\n        ERROR_BANNER_TONE[error.kind],\n      )}\n    >\n      <div className=\"min-w-0 flex-1\">\n        <p className=\"font-semibold text-xs\">{error.title}</p>\n        <p className=\"pt-0.5 text-xs leading-snug opacity-80\">{error.message}</p>\n      </div>\n      <button\n        type=\"button\"\n        aria-label=\"Dismiss chat error\"\n        onClick={dismissError}\n        className=\"shrink-0 rounded p-1 transition-colors hover:bg-black/5\"\n      >\n        <XIcon className=\"size-3.5\" />\n      </button>\n    </div>\n  );\n};\n\n/**\n * Degraded-connection strip: shown only while the statewire channel is\n * degraded, with a manual reconnect affordance when the transport exposes one.\n */\nexport const StatewireConnectionBanner: FC = () => {\n  const lifecycle = useAthenaStatewireLifecycle();\n  const connection = lifecycle?.connection;\n  if (!connection?.degraded) return null;\n  const offline = connection.status === 'stopped';\n\n  return (\n    <div\n      role=\"status\"\n      className=\"aui-statewire-connection-banner flex w-full items-center gap-2 rounded-xl border border-amber-200 bg-amber-50 px-3 py-2 text-amber-800 text-xs\"\n    >\n      <span\n        aria-hidden=\"true\"\n        className={cn(\n          'size-2 shrink-0 rounded-full',\n          offline ? 'bg-red-500' : 'animate-pulse bg-amber-500',\n        )}\n      />\n      <span className=\"min-w-0 flex-1\">\n        {offline ? (connection.message ?? 'Chat is offline.') : 'Retrying chat connection…'}\n      </span>\n      {lifecycle?.reconnect ? (\n        <button\n          type=\"button\"\n          aria-label=\"Reconnect chat\"\n          onClick={lifecycle.reconnect}\n          className=\"shrink-0 rounded-md border border-amber-300 bg-white px-2 py-1 font-medium transition-colors hover:bg-amber-100\"\n        >\n          <RefreshCwIcon className=\"size-3.5\" />\n        </button>\n      ) : null}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;AAMA,MAAM,oBAAwE;AAAA,EAC5E,SAAS;AAAA;AAAA;AAAA,EAGT,aAAa;AAAA,EACb,SAAS;AACX;AAQO,MAAM,uBAA2B,MAAM;AAC5C,QAAM,YAAY,4BAAA;AAClB,MAAI,EAAC,uCAAW,OAAO,QAAO;AAC9B,QAAM,EAAE,OAAO,aAAA,IAAiB;AAEhC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW;AAAA,QACT;AAAA,QACA,kBAAkB,MAAM,IAAI;AAAA,MAAA;AAAA,MAG9B,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAU,kBACb,UAAA;AAAA,UAAA,oBAAC,KAAA,EAAE,WAAU,yBAAyB,UAAA,MAAM,OAAM;AAAA,UAClD,oBAAC,KAAA,EAAE,WAAU,0CAA0C,gBAAM,QAAA,CAAQ;AAAA,QAAA,GACvE;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAW;AAAA,YACX,SAAS;AAAA,YACT,WAAU;AAAA,YAEV,UAAA,oBAAC,OAAA,EAAM,WAAU,WAAA,CAAW;AAAA,UAAA;AAAA,QAAA;AAAA,MAC9B;AAAA,IAAA;AAAA,EAAA;AAGN;AAMO,MAAM,4BAAgC,MAAM;AACjD,QAAM,YAAY,4BAAA;AAClB,QAAM,aAAa,uCAAW;AAC9B,MAAI,EAAC,yCAAY,UAAU,QAAO;AAClC,QAAM,UAAU,WAAW,WAAW;AAEtC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAU;AAAA,MAEV,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAY;AAAA,YACZ,WAAW;AAAA,cACT;AAAA,cACA,UAAU,eAAe;AAAA,YAAA;AAAA,UAC3B;AAAA,QAAA;AAAA,QAEF,oBAAC,UAAK,WAAU,kBACb,oBAAW,WAAW,WAAW,qBAAsB,4BAAA,CAC1D;AAAA,SACC,uCAAW,aACV;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAW;AAAA,YACX,SAAS,UAAU;AAAA,YACnB,WAAU;AAAA,YAEV,UAAA,oBAAC,eAAA,EAAc,WAAU,WAAA,CAAW;AAAA,UAAA;AAAA,QAAA,IAEpC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGV;"}
+{"version":3,"file":"statewire-banners.js","sources":["../../src/chat/statewire-banners.tsx"],"sourcesContent":["import { COLLAB_AGENT_CHANNEL_SESSION_MISMATCH } from '@athenaintel/agent-runtime';\nimport { RefreshCwIcon, SquarePenIcon, XIcon } from 'lucide-react';\nimport type { FC } from 'react';\nimport { useAthenaStatewireLifecycle } from '../provider/statewire-lifecycle-context';\nimport type { AthenaStatewireErrorNotice } from '../runtime/statewire-lifecycle';\nimport { cn } from '../lib/utils';\n\nconst ERROR_BANNER_TONE: Record<AthenaStatewireErrorNotice['kind'], string> = {\n  paywall: 'border-violet-200 bg-violet-50 text-violet-900',\n  // A refused send, not a broken chat: the thread is busy (out-of-band run)\n  // or needs a new chat — amber, like the connection strip.\n  'read-only': 'border-amber-200 bg-amber-50 text-amber-900',\n  command: 'border-red-200 bg-red-50 text-red-900',\n};\n\n/**\n * Whether a refusal's way on is a new session: the session keeps the\n * collab-agent channel (the app's mode) it started on, so a send in the other\n * mode can only go to a new one.\n */\nexport function refusalOffersNewSession(code: string | null | undefined): boolean {\n  return code === COLLAB_AGENT_CHANNEL_SESSION_MISMATCH;\n}\n\n/** The \"Start a new session\" action a refusal notice offers. */\nexport const StartNewSessionButton: FC<{ onClick: () => void; className?: string }> = ({\n  onClick,\n  className,\n}) => (\n  <button\n    type=\"button\"\n    onClick={onClick}\n    className={cn(\n      'inline-flex shrink-0 items-center gap-1.5 rounded-md border border-current/20 bg-white/70 px-2 py-1 font-medium text-xs transition-colors hover:bg-white',\n      className,\n    )}\n  >\n    <SquarePenIcon className=\"size-3.5\" aria-hidden />\n    Start a new session\n  </button>\n);\n\nexport interface StatewireErrorBannerProps {\n  /**\n   * Starts a new session — offered when the refusal's way on is one (a send in\n   * another mode than the session's). `AthenaChat` passes the thread list's\n   * `newThread`; without it the banner offers no action.\n   */\n  onStartNewSession?: () => void;\n}\n\n/**\n * Dismissible transport-error banner: send rejections (including the\n * pre-cutover-thread dispatch fence's 409), paywall refusals, and command\n * failures that would otherwise vanish into the console after the composer\n * already cleared. Renders nothing outside `AthenaProvider`.\n */\nexport const StatewireErrorBanner: FC<StatewireErrorBannerProps> = ({ onStartNewSession }) => {\n  const lifecycle = useAthenaStatewireLifecycle();\n  if (!lifecycle?.error) return null;\n  const { error, dismissError } = lifecycle;\n  const startNewSession =\n    onStartNewSession && refusalOffersNewSession(error.code)\n      ? () => {\n          dismissError();\n          onStartNewSession();\n        }\n      : null;\n\n  return (\n    <div\n      role=\"alert\"\n      className={cn(\n        'aui-statewire-error-banner flex w-full items-start gap-2 rounded-xl border px-3 py-2.5',\n        ERROR_BANNER_TONE[error.kind],\n      )}\n    >\n      <div className=\"min-w-0 flex-1\">\n        <p className=\"font-semibold text-xs\">{error.title}</p>\n        <p className=\"pt-0.5 text-xs leading-snug opacity-80\">{error.message}</p>\n      </div>\n      {startNewSession ? <StartNewSessionButton onClick={startNewSession} /> : null}\n      <button\n        type=\"button\"\n        aria-label=\"Dismiss chat error\"\n        onClick={dismissError}\n        className=\"shrink-0 rounded p-1 transition-colors hover:bg-black/5\"\n      >\n        <XIcon className=\"size-3.5\" />\n      </button>\n    </div>\n  );\n};\n\n/**\n * Degraded-connection strip: shown only while the statewire channel is\n * degraded, with a manual reconnect affordance when the transport exposes one.\n */\nexport const StatewireConnectionBanner: FC = () => {\n  const lifecycle = useAthenaStatewireLifecycle();\n  const connection = lifecycle?.connection;\n  if (!connection?.degraded) return null;\n  const offline = connection.status === 'stopped';\n\n  return (\n    <div\n      role=\"status\"\n      className=\"aui-statewire-connection-banner flex w-full items-center gap-2 rounded-xl border border-amber-200 bg-amber-50 px-3 py-2 text-amber-800 text-xs\"\n    >\n      <span\n        aria-hidden=\"true\"\n        className={cn(\n          'size-2 shrink-0 rounded-full',\n          offline ? 'bg-red-500' : 'animate-pulse bg-amber-500',\n        )}\n      />\n      <span className=\"min-w-0 flex-1\">\n        {offline ? (connection.message ?? 'Chat is offline.') : 'Retrying chat connection…'}\n      </span>\n      {lifecycle?.reconnect ? (\n        <button\n          type=\"button\"\n          aria-label=\"Reconnect chat\"\n          onClick={lifecycle.reconnect}\n          className=\"shrink-0 rounded-md border border-amber-300 bg-white px-2 py-1 font-medium transition-colors hover:bg-amber-100\"\n        >\n          <RefreshCwIcon className=\"size-3.5\" />\n        </button>\n      ) : null}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;AAOA,MAAM,oBAAwE;AAAA,EAC5E,SAAS;AAAA;AAAA;AAAA,EAGT,aAAa;AAAA,EACb,SAAS;AACX;AAOO,SAAS,wBAAwB,MAA0C;AAChF,SAAO,SAAS;AAClB;AAGO,MAAM,wBAAyE,CAAC;AAAA,EACrF;AAAA,EACA;AACF,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,MAAK;AAAA,IACL;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IAGF,UAAA;AAAA,MAAA,oBAAC,eAAA,EAAc,WAAU,YAAW,eAAW,MAAC;AAAA,MAAE;AAAA,IAAA;AAAA,EAAA;AAEpD;AAkBK,MAAM,uBAAsD,CAAC,EAAE,wBAAwB;AAC5F,QAAM,YAAY,4BAAA;AAClB,MAAI,EAAC,uCAAW,OAAO,QAAO;AAC9B,QAAM,EAAE,OAAO,aAAA,IAAiB;AAChC,QAAM,kBACJ,qBAAqB,wBAAwB,MAAM,IAAI,IACnD,MAAM;AACJ,iBAAA;AACA,sBAAA;AAAA,EACF,IACA;AAEN,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW;AAAA,QACT;AAAA,QACA,kBAAkB,MAAM,IAAI;AAAA,MAAA;AAAA,MAG9B,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAU,kBACb,UAAA;AAAA,UAAA,oBAAC,KAAA,EAAE,WAAU,yBAAyB,UAAA,MAAM,OAAM;AAAA,UAClD,oBAAC,KAAA,EAAE,WAAU,0CAA0C,gBAAM,QAAA,CAAQ;AAAA,QAAA,GACvE;AAAA,QACC,kBAAkB,oBAAC,uBAAA,EAAsB,SAAS,iBAAiB,IAAK;AAAA,QACzE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAW;AAAA,YACX,SAAS;AAAA,YACT,WAAU;AAAA,YAEV,UAAA,oBAAC,OAAA,EAAM,WAAU,WAAA,CAAW;AAAA,UAAA;AAAA,QAAA;AAAA,MAC9B;AAAA,IAAA;AAAA,EAAA;AAGN;AAMO,MAAM,4BAAgC,MAAM;AACjD,QAAM,YAAY,4BAAA;AAClB,QAAM,aAAa,uCAAW;AAC9B,MAAI,EAAC,yCAAY,UAAU,QAAO;AAClC,QAAM,UAAU,WAAW,WAAW;AAEtC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAU;AAAA,MAEV,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAY;AAAA,YACZ,WAAW;AAAA,cACT;AAAA,cACA,UAAU,eAAe;AAAA,YAAA;AAAA,UAC3B;AAAA,QAAA;AAAA,QAEF,oBAAC,UAAK,WAAU,kBACb,oBAAW,WAAW,WAAW,qBAAsB,4BAAA,CAC1D;AAAA,SACC,uCAAW,aACV;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAW;AAAA,YACX,SAAS,UAAU;AAAA,YACnB,WAAU;AAAA,YAEV,UAAA,oBAAC,eAAA,EAAc,WAAU,WAAA,CAAW;AAAA,UAAA;AAAA,QAAA,IAEpC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/chat/statewire-client-tools.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const athenaDiagnostics = require("../diagnostics/athena-diagnostics.cjs");
 const assistantStream = require("assistant-stream");
-const clientTools = require("../packages/agent-runtime/src/client-tools.cjs");
+const clientTools = require("../agent-runtime/src/client-tools.cjs");
 function hasCallableExecute(entry) {
   return !!entry && typeof entry === "object" && typeof entry.execute === "function";
 }

package/dist/chat/statewire-client-tools.js

@@ -1,6 +1,6 @@
 import { athenaDiagnostics } from "../diagnostics/athena-diagnostics.js";
 import { toJSONSchema, ToolResponse } from "assistant-stream";
-import { clientToolRunConfigEntries } from "../packages/agent-runtime/src/client-tools.js";
+import { clientToolRunConfigEntries } from "../agent-runtime/src/client-tools.js";
 function hasCallableExecute(entry) {
   return !!entry && typeof entry === "object" && typeof entry.execute === "function";
 }

package/dist/chat/super-grouping/CollapsibleGroup.cjs

@@ -144,7 +144,7 @@ const CollapsibleGroup = ({
               open ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
             ),
             style: { borderColor: `${theme.color}33` },
-            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2 px-5 py-4", children }) })
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2 px-5 py-4", children }) })
           }
         )
       ]

package/dist/chat/super-grouping/CollapsibleGroup.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleGroup.cjs","sources":["../../../src/chat/super-grouping/CollapsibleGroup.tsx"],"sourcesContent":["import { useAuiState } from '@assistant-ui/react';\nimport { ChevronDown, ChevronUp } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { createContext, useContext, useId, useMemo, useState } from 'react';\nimport { cn } from '../../lib/utils';\nimport { createToolBasedGroupingFunction, type GroupingFunction } from './grouping-function';\nimport { defaultGetToolGroupKey } from './toolkit-map';\n\n/**\n * Per-toolkit theme: the brand color that tints the group header, and an\n * optional icon URL a host serves (Olympus ships toolkit SVGs; the SDK does\n * not bundle images, so it tints only).\n */\nexport type ToolkitTheme = {\n  /** Hex brand color for this toolkit. */\n  color: string;\n  /** Absolute or root-relative URL of the toolkit icon, when the host has one. */\n  icon?: string;\n};\n\n/** Brand colors keyed by toolkit display name — the group keys the grouping function emits. */\nexport const TOOLKIT_THEMES: Record<string, ToolkitTheme> = {\n  Web: { color: '#7BCCFA' },\n  Document: { color: '#4586F9' },\n  'Document (Word)': { color: '#4586F9' },\n  Notebook: { color: '#FFAB00' },\n  Python: { color: '#00A76F' },\n  Spreadsheet: { color: '#00A76F' },\n  Email: { color: '#B584FF' },\n  AOP: { color: '#336DFF' },\n  App: { color: '#7336F5' },\n  Presentation: { color: '#F56B36' },\n  'User Interface': { color: '#7336F5' },\n  Canvas: { color: '#002542' },\n  Computer: { color: '#3E0042' },\n  Database: { color: '#7336F5' },\n  'Chrome Browser': { color: '#4285F4' },\n};\n\nexport const DEFAULT_TOOLKIT_THEME: ToolkitTheme = { color: '#919EAB' };\n\nconst DEFAULT_GROUPING = createToolBasedGroupingFunction(defaultGetToolGroupKey);\n\n/**\n * The grouping in force for the message being rendered. `SuperGroupingCard`\n * provides it so each `CollapsibleGroup` can tell whether it is the last\n * grouped block (the one that opens by default while the run is live) without\n * being handed the function as a prop through `Unstable_PartsGrouped`.\n */\nconst SuperGroupingContext = createContext<{ groupingFunction: GroupingFunction } | null>(null);\n\nexport const SuperGroupingProvider = SuperGroupingContext.Provider;\n\nexport interface CollapsibleGroupProps {\n  /** Group key from the grouping function (toolkit display name); `undefined` for ungrouped parts. */\n  groupKey: string | undefined;\n  /** Indices of the parts belonging to this group. */\n  indices: number[];\n  children?: ReactNode;\n  /** Host toolkit themes (colors, icons), merged over the built-in colors. */\n  themes?: Record<string, ToolkitTheme>;\n  /**\n   * Keep the group open regardless of the run state — a host rule such as\n   * \"an unsubmitted email draft stays visible\". The user's own toggle still\n   * wins once used.\n   */\n  forceOpen?: boolean;\n  /**\n   * Do not open the live group by default (screenshot-heavy browser-control\n   * runs hold hundreds of actions); the user can still expand it.\n   */\n  compactWhileRunning?: boolean;\n  /** Extra header controls, rendered as siblings of the toggle (never nested buttons). */\n  headerActions?: ReactNode;\n  /** The grouping used to find the last grouped block; defaults to the card's, then the SDK's. */\n  groupingFunction?: GroupingFunction;\n  className?: string;\n}\n\n/**\n * Per-toolkit collapsible block inside the grouped details panel — \"Using\n * Spreadsheet Toolkit · 4 tool calls\" — used by the SDK, Olympus, and the\n * Chrome extension. The last grouped block opens by default while the message\n * is running and settles closed; the user's toggle is remembered for the\n * mounted block.\n *\n * Selector discipline: one raw `s.message.content` read; every per-group\n * derivation (grouping, counts) runs in `useMemo` off it, so the grouping\n * pass happens once per content change instead of once per selector pass.\n */\nexport const CollapsibleGroup = ({\n  groupKey,\n  indices,\n  children,\n  themes,\n  forceOpen = false,\n  compactWhileRunning = false,\n  headerActions,\n  groupingFunction,\n  className,\n}: CollapsibleGroupProps) => {\n  const panelId = useId();\n  const isMessageRunning = useAuiState((s) => s.message.status?.type === 'running');\n  const messageContent = useAuiState((s) =>\n    s.message.role === 'assistant' ? s.message.content : undefined,\n  );\n  const contextGrouping = useContext(SuperGroupingContext)?.groupingFunction;\n  const grouping = groupingFunction ?? contextGrouping ?? DEFAULT_GROUPING;\n\n  const lastIndex = indices.at(-1);\n  const isLastGroup = useMemo(() => {\n    if (!messageContent) return false;\n    const lastGroup = grouping(messageContent)\n      .filter((group) => group.indices.length > 1)\n      .at(-1);\n    return lastGroup?.indices.at(-1) === lastIndex;\n  }, [messageContent, grouping, lastIndex]);\n\n  const toolCallCount = useMemo(\n    () =>\n      messageContent\n        ? indices.reduce(\n            (count, index) => (messageContent[index]?.type === 'tool-call' ? count + 1 : count),\n            0,\n          )\n        : 0,\n    [messageContent, indices],\n  );\n\n  const theme = useMemo<ToolkitTheme>(\n    () => (groupKey ? { ...TOOLKIT_THEMES, ...themes }[groupKey] ?? DEFAULT_TOOLKIT_THEME : DEFAULT_TOOLKIT_THEME),\n    [groupKey, themes],\n  );\n\n  const [userOpened, setOpen] = useState<boolean>();\n  const autoOpen = isLastGroup && isMessageRunning && !compactWhileRunning;\n  const open = userOpened ?? (autoOpen || forceOpen);\n\n  if (!groupKey || indices.length <= 1) return <>{children}</>;\n\n  const toggle = () => setOpen(!open);\n\n  return (\n    <div\n      data-slot=\"collapsible-group\"\n      data-group-key={groupKey}\n      className={cn('my-4 rounded-2xl border shadow-sm', className)}\n      style={{\n        borderColor: `${theme.color}33`,\n        background: `linear-gradient(to right, ${theme.color}0d, transparent, ${theme.color}0d)`,\n      }}\n    >\n      <div className=\"flex w-full items-center rounded-2xl\">\n        <button\n          type=\"button\"\n          onClick={toggle}\n          aria-expanded={open}\n          aria-controls={panelId}\n          className=\"flex min-w-0 flex-1 items-center justify-between gap-3 rounded-2xl px-5 py-3 text-left transition-colors hover:bg-black/5 dark:hover:bg-white/5\"\n        >\n          <span className=\"flex min-w-0 items-center gap-3 text-foreground/90\">\n            {theme.icon ? (\n              <img src={theme.icon} alt=\"\" aria-hidden=\"true\" className=\"size-5 shrink-0\" />\n            ) : (\n              <span\n                className=\"inline-block size-2 shrink-0 rounded-full\"\n                style={{ backgroundColor: theme.color }}\n                aria-hidden=\"true\"\n              />\n            )}\n            <span className=\"truncate text-sm font-semibold\">\n              {isMessageRunning ? 'Using ' : 'Used '}\n              {groupKey} Toolkit\n            </span>\n          </span>\n          <span className=\"shrink-0 text-xs font-medium text-muted-foreground\">\n            {toolCallCount} tool {toolCallCount === 1 ? 'call' : 'calls'}\n          </span>\n        </button>\n        <div className=\"flex shrink-0 items-center gap-1 pr-3 pl-1\">\n          {headerActions}\n          <button\n            type=\"button\"\n            onClick={toggle}\n            aria-label={open ? 'Collapse toolkit group' : 'Expand toolkit group'}\n            aria-expanded={open}\n            aria-controls={panelId}\n            className=\"flex items-center justify-center rounded-md p-1 text-muted-foreground transition-colors hover:bg-black/5 dark:hover:bg-white/5\"\n          >\n            {open ? <ChevronUp size={16} /> : <ChevronDown size={16} />}\n          </button>\n        </div>\n      </div>\n\n      <div\n        id={panelId}\n        className={cn(\n          'grid overflow-hidden border-t transition-[grid-template-rows] duration-200 ease-in-out motion-reduce:transition-none',\n          open ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',\n        )}\n        style={{ borderColor: `${theme.color}33` }}\n      >\n        <div className=\"overflow-hidden\">\n          <div className=\"space-y-2 px-5 py-4\">{children}</div>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["createToolBasedGroupingFunction","defaultGetToolGroupKey","createContext","groupingFunction","useId","useAuiState","_a","useContext","useMemo","useState","jsxs","cn","jsx","ChevronUp","ChevronDown"],"mappings":"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"}
+{"version":3,"file":"CollapsibleGroup.cjs","sources":["../../../src/chat/super-grouping/CollapsibleGroup.tsx"],"sourcesContent":["import { useAuiState } from '@assistant-ui/react';\nimport { ChevronDown, ChevronUp } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { createContext, useContext, useId, useMemo, useState } from 'react';\nimport { cn } from '../../lib/utils';\nimport { createToolBasedGroupingFunction, type GroupingFunction } from './grouping-function';\nimport { defaultGetToolGroupKey } from './toolkit-map';\n\n/**\n * Per-toolkit theme: the brand color that tints the group header, and an\n * optional icon URL a host serves (Olympus ships toolkit SVGs; the SDK does\n * not bundle images, so it tints only).\n */\nexport type ToolkitTheme = {\n  /** Hex brand color for this toolkit. */\n  color: string;\n  /** Absolute or root-relative URL of the toolkit icon, when the host has one. */\n  icon?: string;\n};\n\n/** Brand colors keyed by toolkit display name — the group keys the grouping function emits. */\nexport const TOOLKIT_THEMES: Record<string, ToolkitTheme> = {\n  Web: { color: '#7BCCFA' },\n  Document: { color: '#4586F9' },\n  'Document (Word)': { color: '#4586F9' },\n  Notebook: { color: '#FFAB00' },\n  Python: { color: '#00A76F' },\n  Spreadsheet: { color: '#00A76F' },\n  Email: { color: '#B584FF' },\n  AOP: { color: '#336DFF' },\n  App: { color: '#7336F5' },\n  Presentation: { color: '#F56B36' },\n  'User Interface': { color: '#7336F5' },\n  Canvas: { color: '#002542' },\n  Computer: { color: '#3E0042' },\n  Database: { color: '#7336F5' },\n  'Chrome Browser': { color: '#4285F4' },\n};\n\nexport const DEFAULT_TOOLKIT_THEME: ToolkitTheme = { color: '#919EAB' };\n\nconst DEFAULT_GROUPING = createToolBasedGroupingFunction(defaultGetToolGroupKey);\n\n/**\n * The grouping in force for the message being rendered. `SuperGroupingCard`\n * provides it so each `CollapsibleGroup` can tell whether it is the last\n * grouped block (the one that opens by default while the run is live) without\n * being handed the function as a prop through `Unstable_PartsGrouped`.\n */\nconst SuperGroupingContext = createContext<{ groupingFunction: GroupingFunction } | null>(null);\n\nexport const SuperGroupingProvider = SuperGroupingContext.Provider;\n\nexport interface CollapsibleGroupProps {\n  /** Group key from the grouping function (toolkit display name); `undefined` for ungrouped parts. */\n  groupKey: string | undefined;\n  /** Indices of the parts belonging to this group. */\n  indices: number[];\n  children?: ReactNode;\n  /** Host toolkit themes (colors, icons), merged over the built-in colors. */\n  themes?: Record<string, ToolkitTheme>;\n  /**\n   * Keep the group open regardless of the run state — a host rule such as\n   * \"an unsubmitted email draft stays visible\". The user's own toggle still\n   * wins once used.\n   */\n  forceOpen?: boolean;\n  /**\n   * Do not open the live group by default (screenshot-heavy browser-control\n   * runs hold hundreds of actions); the user can still expand it.\n   */\n  compactWhileRunning?: boolean;\n  /** Extra header controls, rendered as siblings of the toggle (never nested buttons). */\n  headerActions?: ReactNode;\n  /** The grouping used to find the last grouped block; defaults to the card's, then the SDK's. */\n  groupingFunction?: GroupingFunction;\n  className?: string;\n}\n\n/**\n * Per-toolkit collapsible block inside the grouped details panel — \"Using\n * Spreadsheet Toolkit · 4 tool calls\" — used by the SDK, Olympus, and the\n * Chrome extension. The last grouped block opens by default while the message\n * is running and settles closed; the user's toggle is remembered for the\n * mounted block.\n *\n * Selector discipline: one raw `s.message.content` read; every per-group\n * derivation (grouping, counts) runs in `useMemo` off it, so the grouping\n * pass happens once per content change instead of once per selector pass.\n */\nexport const CollapsibleGroup = ({\n  groupKey,\n  indices,\n  children,\n  themes,\n  forceOpen = false,\n  compactWhileRunning = false,\n  headerActions,\n  groupingFunction,\n  className,\n}: CollapsibleGroupProps) => {\n  const panelId = useId();\n  const isMessageRunning = useAuiState((s) => s.message.status?.type === 'running');\n  const messageContent = useAuiState((s) =>\n    s.message.role === 'assistant' ? s.message.content : undefined,\n  );\n  const contextGrouping = useContext(SuperGroupingContext)?.groupingFunction;\n  const grouping = groupingFunction ?? contextGrouping ?? DEFAULT_GROUPING;\n\n  const lastIndex = indices.at(-1);\n  const isLastGroup = useMemo(() => {\n    if (!messageContent) return false;\n    const lastGroup = grouping(messageContent)\n      .filter((group) => group.indices.length > 1)\n      .at(-1);\n    return lastGroup?.indices.at(-1) === lastIndex;\n  }, [messageContent, grouping, lastIndex]);\n\n  const toolCallCount = useMemo(\n    () =>\n      messageContent\n        ? indices.reduce(\n            (count, index) => (messageContent[index]?.type === 'tool-call' ? count + 1 : count),\n            0,\n          )\n        : 0,\n    [messageContent, indices],\n  );\n\n  const theme = useMemo<ToolkitTheme>(\n    () => (groupKey ? { ...TOOLKIT_THEMES, ...themes }[groupKey] ?? DEFAULT_TOOLKIT_THEME : DEFAULT_TOOLKIT_THEME),\n    [groupKey, themes],\n  );\n\n  const [userOpened, setOpen] = useState<boolean>();\n  const autoOpen = isLastGroup && isMessageRunning && !compactWhileRunning;\n  const open = userOpened ?? (autoOpen || forceOpen);\n\n  if (!groupKey || indices.length <= 1) return <>{children}</>;\n\n  const toggle = () => setOpen(!open);\n\n  return (\n    <div\n      data-slot=\"collapsible-group\"\n      data-group-key={groupKey}\n      className={cn('my-4 rounded-2xl border shadow-sm', className)}\n      style={{\n        borderColor: `${theme.color}33`,\n        background: `linear-gradient(to right, ${theme.color}0d, transparent, ${theme.color}0d)`,\n      }}\n    >\n      <div className=\"flex w-full items-center rounded-2xl\">\n        <button\n          type=\"button\"\n          onClick={toggle}\n          aria-expanded={open}\n          aria-controls={panelId}\n          className=\"flex min-w-0 flex-1 items-center justify-between gap-3 rounded-2xl px-5 py-3 text-left transition-colors hover:bg-black/5 dark:hover:bg-white/5\"\n        >\n          <span className=\"flex min-w-0 items-center gap-3 text-foreground/90\">\n            {theme.icon ? (\n              <img src={theme.icon} alt=\"\" aria-hidden=\"true\" className=\"size-5 shrink-0\" />\n            ) : (\n              <span\n                className=\"inline-block size-2 shrink-0 rounded-full\"\n                style={{ backgroundColor: theme.color }}\n                aria-hidden=\"true\"\n              />\n            )}\n            <span className=\"truncate text-sm font-semibold\">\n              {isMessageRunning ? 'Using ' : 'Used '}\n              {groupKey} Toolkit\n            </span>\n          </span>\n          <span className=\"shrink-0 text-xs font-medium text-muted-foreground\">\n            {toolCallCount} tool {toolCallCount === 1 ? 'call' : 'calls'}\n          </span>\n        </button>\n        <div className=\"flex shrink-0 items-center gap-1 pr-3 pl-1\">\n          {headerActions}\n          <button\n            type=\"button\"\n            onClick={toggle}\n            aria-label={open ? 'Collapse toolkit group' : 'Expand toolkit group'}\n            aria-expanded={open}\n            aria-controls={panelId}\n            className=\"flex items-center justify-center rounded-md p-1 text-muted-foreground transition-colors hover:bg-black/5 dark:hover:bg-white/5\"\n          >\n            {open ? <ChevronUp size={16} /> : <ChevronDown size={16} />}\n          </button>\n        </div>\n      </div>\n\n      <div\n        id={panelId}\n        className={cn(\n          'grid overflow-hidden border-t transition-[grid-template-rows] duration-200 ease-in-out motion-reduce:transition-none',\n          open ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',\n        )}\n        style={{ borderColor: `${theme.color}33` }}\n      >\n        <div className=\"overflow-hidden\">\n          <div className=\"flex flex-col gap-2 px-5 py-4\">{children}</div>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["createToolBasedGroupingFunction","defaultGetToolGroupKey","createContext","groupingFunction","useId","useAuiState","_a","useContext","useMemo","useState","jsxs","cn","jsx","ChevronUp","ChevronDown"],"mappings":"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"}

package/dist/chat/super-grouping/CollapsibleGroup.js

@@ -142,7 +142,7 @@ const CollapsibleGroup = ({
               open ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
             ),
             style: { borderColor: `${theme.color}33` },
-            children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "space-y-2 px-5 py-4", children }) })
+            children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 px-5 py-4", children }) })
           }
         )
       ]

package/dist/chat/super-grouping/CollapsibleGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleGroup.js","sources":["../../../src/chat/super-grouping/CollapsibleGroup.tsx"],"sourcesContent":["import { useAuiState } from '@assistant-ui/react';\nimport { ChevronDown, ChevronUp } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { createContext, useContext, useId, useMemo, useState } from 'react';\nimport { cn } from '../../lib/utils';\nimport { createToolBasedGroupingFunction, type GroupingFunction } from './grouping-function';\nimport { defaultGetToolGroupKey } from './toolkit-map';\n\n/**\n * Per-toolkit theme: the brand color that tints the group header, and an\n * optional icon URL a host serves (Olympus ships toolkit SVGs; the SDK does\n * not bundle images, so it tints only).\n */\nexport type ToolkitTheme = {\n  /** Hex brand color for this toolkit. */\n  color: string;\n  /** Absolute or root-relative URL of the toolkit icon, when the host has one. */\n  icon?: string;\n};\n\n/** Brand colors keyed by toolkit display name — the group keys the grouping function emits. */\nexport const TOOLKIT_THEMES: Record<string, ToolkitTheme> = {\n  Web: { color: '#7BCCFA' },\n  Document: { color: '#4586F9' },\n  'Document (Word)': { color: '#4586F9' },\n  Notebook: { color: '#FFAB00' },\n  Python: { color: '#00A76F' },\n  Spreadsheet: { color: '#00A76F' },\n  Email: { color: '#B584FF' },\n  AOP: { color: '#336DFF' },\n  App: { color: '#7336F5' },\n  Presentation: { color: '#F56B36' },\n  'User Interface': { color: '#7336F5' },\n  Canvas: { color: '#002542' },\n  Computer: { color: '#3E0042' },\n  Database: { color: '#7336F5' },\n  'Chrome Browser': { color: '#4285F4' },\n};\n\nexport const DEFAULT_TOOLKIT_THEME: ToolkitTheme = { color: '#919EAB' };\n\nconst DEFAULT_GROUPING = createToolBasedGroupingFunction(defaultGetToolGroupKey);\n\n/**\n * The grouping in force for the message being rendered. `SuperGroupingCard`\n * provides it so each `CollapsibleGroup` can tell whether it is the last\n * grouped block (the one that opens by default while the run is live) without\n * being handed the function as a prop through `Unstable_PartsGrouped`.\n */\nconst SuperGroupingContext = createContext<{ groupingFunction: GroupingFunction } | null>(null);\n\nexport const SuperGroupingProvider = SuperGroupingContext.Provider;\n\nexport interface CollapsibleGroupProps {\n  /** Group key from the grouping function (toolkit display name); `undefined` for ungrouped parts. */\n  groupKey: string | undefined;\n  /** Indices of the parts belonging to this group. */\n  indices: number[];\n  children?: ReactNode;\n  /** Host toolkit themes (colors, icons), merged over the built-in colors. */\n  themes?: Record<string, ToolkitTheme>;\n  /**\n   * Keep the group open regardless of the run state — a host rule such as\n   * \"an unsubmitted email draft stays visible\". The user's own toggle still\n   * wins once used.\n   */\n  forceOpen?: boolean;\n  /**\n   * Do not open the live group by default (screenshot-heavy browser-control\n   * runs hold hundreds of actions); the user can still expand it.\n   */\n  compactWhileRunning?: boolean;\n  /** Extra header controls, rendered as siblings of the toggle (never nested buttons). */\n  headerActions?: ReactNode;\n  /** The grouping used to find the last grouped block; defaults to the card's, then the SDK's. */\n  groupingFunction?: GroupingFunction;\n  className?: string;\n}\n\n/**\n * Per-toolkit collapsible block inside the grouped details panel — \"Using\n * Spreadsheet Toolkit · 4 tool calls\" — used by the SDK, Olympus, and the\n * Chrome extension. The last grouped block opens by default while the message\n * is running and settles closed; the user's toggle is remembered for the\n * mounted block.\n *\n * Selector discipline: one raw `s.message.content` read; every per-group\n * derivation (grouping, counts) runs in `useMemo` off it, so the grouping\n * pass happens once per content change instead of once per selector pass.\n */\nexport const CollapsibleGroup = ({\n  groupKey,\n  indices,\n  children,\n  themes,\n  forceOpen = false,\n  compactWhileRunning = false,\n  headerActions,\n  groupingFunction,\n  className,\n}: CollapsibleGroupProps) => {\n  const panelId = useId();\n  const isMessageRunning = useAuiState((s) => s.message.status?.type === 'running');\n  const messageContent = useAuiState((s) =>\n    s.message.role === 'assistant' ? s.message.content : undefined,\n  );\n  const contextGrouping = useContext(SuperGroupingContext)?.groupingFunction;\n  const grouping = groupingFunction ?? contextGrouping ?? DEFAULT_GROUPING;\n\n  const lastIndex = indices.at(-1);\n  const isLastGroup = useMemo(() => {\n    if (!messageContent) return false;\n    const lastGroup = grouping(messageContent)\n      .filter((group) => group.indices.length > 1)\n      .at(-1);\n    return lastGroup?.indices.at(-1) === lastIndex;\n  }, [messageContent, grouping, lastIndex]);\n\n  const toolCallCount = useMemo(\n    () =>\n      messageContent\n        ? indices.reduce(\n            (count, index) => (messageContent[index]?.type === 'tool-call' ? count + 1 : count),\n            0,\n          )\n        : 0,\n    [messageContent, indices],\n  );\n\n  const theme = useMemo<ToolkitTheme>(\n    () => (groupKey ? { ...TOOLKIT_THEMES, ...themes }[groupKey] ?? DEFAULT_TOOLKIT_THEME : DEFAULT_TOOLKIT_THEME),\n    [groupKey, themes],\n  );\n\n  const [userOpened, setOpen] = useState<boolean>();\n  const autoOpen = isLastGroup && isMessageRunning && !compactWhileRunning;\n  const open = userOpened ?? (autoOpen || forceOpen);\n\n  if (!groupKey || indices.length <= 1) return <>{children}</>;\n\n  const toggle = () => setOpen(!open);\n\n  return (\n    <div\n      data-slot=\"collapsible-group\"\n      data-group-key={groupKey}\n      className={cn('my-4 rounded-2xl border shadow-sm', className)}\n      style={{\n        borderColor: `${theme.color}33`,\n        background: `linear-gradient(to right, ${theme.color}0d, transparent, ${theme.color}0d)`,\n      }}\n    >\n      <div className=\"flex w-full items-center rounded-2xl\">\n        <button\n          type=\"button\"\n          onClick={toggle}\n          aria-expanded={open}\n          aria-controls={panelId}\n          className=\"flex min-w-0 flex-1 items-center justify-between gap-3 rounded-2xl px-5 py-3 text-left transition-colors hover:bg-black/5 dark:hover:bg-white/5\"\n        >\n          <span className=\"flex min-w-0 items-center gap-3 text-foreground/90\">\n            {theme.icon ? (\n              <img src={theme.icon} alt=\"\" aria-hidden=\"true\" className=\"size-5 shrink-0\" />\n            ) : (\n              <span\n                className=\"inline-block size-2 shrink-0 rounded-full\"\n                style={{ backgroundColor: theme.color }}\n                aria-hidden=\"true\"\n              />\n            )}\n            <span className=\"truncate text-sm font-semibold\">\n              {isMessageRunning ? 'Using ' : 'Used '}\n              {groupKey} Toolkit\n            </span>\n          </span>\n          <span className=\"shrink-0 text-xs font-medium text-muted-foreground\">\n            {toolCallCount} tool {toolCallCount === 1 ? 'call' : 'calls'}\n          </span>\n        </button>\n        <div className=\"flex shrink-0 items-center gap-1 pr-3 pl-1\">\n          {headerActions}\n          <button\n            type=\"button\"\n            onClick={toggle}\n            aria-label={open ? 'Collapse toolkit group' : 'Expand toolkit group'}\n            aria-expanded={open}\n            aria-controls={panelId}\n            className=\"flex items-center justify-center rounded-md p-1 text-muted-foreground transition-colors hover:bg-black/5 dark:hover:bg-white/5\"\n          >\n            {open ? <ChevronUp size={16} /> : <ChevronDown size={16} />}\n          </button>\n        </div>\n      </div>\n\n      <div\n        id={panelId}\n        className={cn(\n          'grid overflow-hidden border-t transition-[grid-template-rows] duration-200 ease-in-out motion-reduce:transition-none',\n          open ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',\n        )}\n        style={{ borderColor: `${theme.color}33` }}\n      >\n        <div className=\"overflow-hidden\">\n          <div className=\"space-y-2 px-5 py-4\">{children}</div>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["_a"],"mappings":"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"}
+{"version":3,"file":"CollapsibleGroup.js","sources":["../../../src/chat/super-grouping/CollapsibleGroup.tsx"],"sourcesContent":["import { useAuiState } from '@assistant-ui/react';\nimport { ChevronDown, ChevronUp } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { createContext, useContext, useId, useMemo, useState } from 'react';\nimport { cn } from '../../lib/utils';\nimport { createToolBasedGroupingFunction, type GroupingFunction } from './grouping-function';\nimport { defaultGetToolGroupKey } from './toolkit-map';\n\n/**\n * Per-toolkit theme: the brand color that tints the group header, and an\n * optional icon URL a host serves (Olympus ships toolkit SVGs; the SDK does\n * not bundle images, so it tints only).\n */\nexport type ToolkitTheme = {\n  /** Hex brand color for this toolkit. */\n  color: string;\n  /** Absolute or root-relative URL of the toolkit icon, when the host has one. */\n  icon?: string;\n};\n\n/** Brand colors keyed by toolkit display name — the group keys the grouping function emits. */\nexport const TOOLKIT_THEMES: Record<string, ToolkitTheme> = {\n  Web: { color: '#7BCCFA' },\n  Document: { color: '#4586F9' },\n  'Document (Word)': { color: '#4586F9' },\n  Notebook: { color: '#FFAB00' },\n  Python: { color: '#00A76F' },\n  Spreadsheet: { color: '#00A76F' },\n  Email: { color: '#B584FF' },\n  AOP: { color: '#336DFF' },\n  App: { color: '#7336F5' },\n  Presentation: { color: '#F56B36' },\n  'User Interface': { color: '#7336F5' },\n  Canvas: { color: '#002542' },\n  Computer: { color: '#3E0042' },\n  Database: { color: '#7336F5' },\n  'Chrome Browser': { color: '#4285F4' },\n};\n\nexport const DEFAULT_TOOLKIT_THEME: ToolkitTheme = { color: '#919EAB' };\n\nconst DEFAULT_GROUPING = createToolBasedGroupingFunction(defaultGetToolGroupKey);\n\n/**\n * The grouping in force for the message being rendered. `SuperGroupingCard`\n * provides it so each `CollapsibleGroup` can tell whether it is the last\n * grouped block (the one that opens by default while the run is live) without\n * being handed the function as a prop through `Unstable_PartsGrouped`.\n */\nconst SuperGroupingContext = createContext<{ groupingFunction: GroupingFunction } | null>(null);\n\nexport const SuperGroupingProvider = SuperGroupingContext.Provider;\n\nexport interface CollapsibleGroupProps {\n  /** Group key from the grouping function (toolkit display name); `undefined` for ungrouped parts. */\n  groupKey: string | undefined;\n  /** Indices of the parts belonging to this group. */\n  indices: number[];\n  children?: ReactNode;\n  /** Host toolkit themes (colors, icons), merged over the built-in colors. */\n  themes?: Record<string, ToolkitTheme>;\n  /**\n   * Keep the group open regardless of the run state — a host rule such as\n   * \"an unsubmitted email draft stays visible\". The user's own toggle still\n   * wins once used.\n   */\n  forceOpen?: boolean;\n  /**\n   * Do not open the live group by default (screenshot-heavy browser-control\n   * runs hold hundreds of actions); the user can still expand it.\n   */\n  compactWhileRunning?: boolean;\n  /** Extra header controls, rendered as siblings of the toggle (never nested buttons). */\n  headerActions?: ReactNode;\n  /** The grouping used to find the last grouped block; defaults to the card's, then the SDK's. */\n  groupingFunction?: GroupingFunction;\n  className?: string;\n}\n\n/**\n * Per-toolkit collapsible block inside the grouped details panel — \"Using\n * Spreadsheet Toolkit · 4 tool calls\" — used by the SDK, Olympus, and the\n * Chrome extension. The last grouped block opens by default while the message\n * is running and settles closed; the user's toggle is remembered for the\n * mounted block.\n *\n * Selector discipline: one raw `s.message.content` read; every per-group\n * derivation (grouping, counts) runs in `useMemo` off it, so the grouping\n * pass happens once per content change instead of once per selector pass.\n */\nexport const CollapsibleGroup = ({\n  groupKey,\n  indices,\n  children,\n  themes,\n  forceOpen = false,\n  compactWhileRunning = false,\n  headerActions,\n  groupingFunction,\n  className,\n}: CollapsibleGroupProps) => {\n  const panelId = useId();\n  const isMessageRunning = useAuiState((s) => s.message.status?.type === 'running');\n  const messageContent = useAuiState((s) =>\n    s.message.role === 'assistant' ? s.message.content : undefined,\n  );\n  const contextGrouping = useContext(SuperGroupingContext)?.groupingFunction;\n  const grouping = groupingFunction ?? contextGrouping ?? DEFAULT_GROUPING;\n\n  const lastIndex = indices.at(-1);\n  const isLastGroup = useMemo(() => {\n    if (!messageContent) return false;\n    const lastGroup = grouping(messageContent)\n      .filter((group) => group.indices.length > 1)\n      .at(-1);\n    return lastGroup?.indices.at(-1) === lastIndex;\n  }, [messageContent, grouping, lastIndex]);\n\n  const toolCallCount = useMemo(\n    () =>\n      messageContent\n        ? indices.reduce(\n            (count, index) => (messageContent[index]?.type === 'tool-call' ? count + 1 : count),\n            0,\n          )\n        : 0,\n    [messageContent, indices],\n  );\n\n  const theme = useMemo<ToolkitTheme>(\n    () => (groupKey ? { ...TOOLKIT_THEMES, ...themes }[groupKey] ?? DEFAULT_TOOLKIT_THEME : DEFAULT_TOOLKIT_THEME),\n    [groupKey, themes],\n  );\n\n  const [userOpened, setOpen] = useState<boolean>();\n  const autoOpen = isLastGroup && isMessageRunning && !compactWhileRunning;\n  const open = userOpened ?? (autoOpen || forceOpen);\n\n  if (!groupKey || indices.length <= 1) return <>{children}</>;\n\n  const toggle = () => setOpen(!open);\n\n  return (\n    <div\n      data-slot=\"collapsible-group\"\n      data-group-key={groupKey}\n      className={cn('my-4 rounded-2xl border shadow-sm', className)}\n      style={{\n        borderColor: `${theme.color}33`,\n        background: `linear-gradient(to right, ${theme.color}0d, transparent, ${theme.color}0d)`,\n      }}\n    >\n      <div className=\"flex w-full items-center rounded-2xl\">\n        <button\n          type=\"button\"\n          onClick={toggle}\n          aria-expanded={open}\n          aria-controls={panelId}\n          className=\"flex min-w-0 flex-1 items-center justify-between gap-3 rounded-2xl px-5 py-3 text-left transition-colors hover:bg-black/5 dark:hover:bg-white/5\"\n        >\n          <span className=\"flex min-w-0 items-center gap-3 text-foreground/90\">\n            {theme.icon ? (\n              <img src={theme.icon} alt=\"\" aria-hidden=\"true\" className=\"size-5 shrink-0\" />\n            ) : (\n              <span\n                className=\"inline-block size-2 shrink-0 rounded-full\"\n                style={{ backgroundColor: theme.color }}\n                aria-hidden=\"true\"\n              />\n            )}\n            <span className=\"truncate text-sm font-semibold\">\n              {isMessageRunning ? 'Using ' : 'Used '}\n              {groupKey} Toolkit\n            </span>\n          </span>\n          <span className=\"shrink-0 text-xs font-medium text-muted-foreground\">\n            {toolCallCount} tool {toolCallCount === 1 ? 'call' : 'calls'}\n          </span>\n        </button>\n        <div className=\"flex shrink-0 items-center gap-1 pr-3 pl-1\">\n          {headerActions}\n          <button\n            type=\"button\"\n            onClick={toggle}\n            aria-label={open ? 'Collapse toolkit group' : 'Expand toolkit group'}\n            aria-expanded={open}\n            aria-controls={panelId}\n            className=\"flex items-center justify-center rounded-md p-1 text-muted-foreground transition-colors hover:bg-black/5 dark:hover:bg-white/5\"\n          >\n            {open ? <ChevronUp size={16} /> : <ChevronDown size={16} />}\n          </button>\n        </div>\n      </div>\n\n      <div\n        id={panelId}\n        className={cn(\n          'grid overflow-hidden border-t transition-[grid-template-rows] duration-200 ease-in-out motion-reduce:transition-none',\n          open ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',\n        )}\n        style={{ borderColor: `${theme.color}33` }}\n      >\n        <div className=\"overflow-hidden\">\n          <div className=\"flex flex-col gap-2 px-5 py-4\">{children}</div>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["_a"],"mappings":"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"}

package/dist/chat/super-grouping/SuperGroupingCard.cjs

@@ -5,17 +5,21 @@ const react$1 = require("@assistant-ui/react");
 const lucideReact = require("lucide-react");
 const react = require("react");
 const toolFallback = require("../../tools/tool-fallback.cjs");
+const toolSummary = require("../../tools/tool-summary.cjs");
 const activityTimeline = require("./activity-timeline.cjs");
 const CollapsibleGroup = require("./CollapsibleGroup.cjs");
 const groupingFunction = require("./grouping-function.cjs");
 const ToolTimeline = require("./ToolTimeline.cjs");
 const timelineStep = require("./timeline-step.cjs");
 const toolkitMap = require("./toolkit-map.cjs");
+const toolMetadata = require("../../agent-runtime/src/tool-metadata.cjs");
 const cnfast = require("cnfast");
 const DEFAULT_MAX_VISIBLE_STEPS = 3;
 const MAX_REMEMBERED_EXPANSIONS = 200;
 const EMPTY_TIMELINE = [];
 const EMPTY_CONTENT = [];
+const RUNNING_STATUS = { type: "running" };
+const COMPLETE_STATUS = { type: "complete" };
 const rememberedExpansions = /* @__PURE__ */ new Map();
 function rememberExpansion(key, expanded) {
   rememberedExpansions.delete(key);
@@ -73,6 +77,7 @@ const SuperGroupingCard = react.memo(function SuperGroupingCard2({
   groupingFunction: groupingFunction$1,
   waitingTools,
   passThroughTools,
+  isInlineTool = toolMetadata.isInlineTool,
   waitingForInput = false,
   resolveToolDisplayName,
   expansionKey: expansionKeyProp,
@@ -115,14 +120,28 @@ const SuperGroupingCard = react.memo(function SuperGroupingCard2({
     phase,
     expandWhileWaiting
   });
+  const assetTitles = react.useMemo(() => toolSummary.collectAssetTitles(messageContent), [messageContent]);
   const steps = react.useMemo(
-    () => timeline.map((item, index) => timelineStep.toTimelineStep({ item, index, resolveToolDisplayName })),
-    [timeline, resolveToolDisplayName]
+    () => timeline.map((item, index) => timelineStep.toTimelineStep({ item, index, resolveToolDisplayName, assetTitles })),
+    [timeline, resolveToolDisplayName, assetTitles]
   );
+  const inlineParts = react.useMemo(() => {
+    const parts = [];
+    messageContent.forEach((part, index) => {
+      if (part.type === "tool-call" && isInlineTool(part.toolName)) {
+        parts.push({ index, key: part.toolCallId });
+      }
+    });
+    return parts;
+  }, [messageContent, isInlineTool]);
   const grouping = react.useMemo(
-    () => activityTimeline.excludeFinalTextFromGroups(groupingFunction$1 ?? groupingFunction.createToolBasedGroupingFunction(getToolGroupKey)),
-    [groupingFunction$1, getToolGroupKey]
+    () => activityTimeline.excludePartsFromGroups(
+      activityTimeline.excludeFinalTextFromGroups(groupingFunction$1 ?? groupingFunction.createToolBasedGroupingFunction(getToolGroupKey)),
+      (part) => part.type === "tool-call" && part.toolName !== void 0 && isInlineTool(part.toolName)
+    ),
+    [groupingFunction$1, getToolGroupKey, isInlineTool]
   );
+  const hasDetails = react.useMemo(() => grouping(messageContent).length > 0, [grouping, messageContent]);
   const groupingContext = react.useMemo(() => ({ groupingFunction: grouping }), [grouping]);
   const components = react.useMemo(
     () => ({
@@ -169,8 +188,8 @@ const SuperGroupingCard = react.memo(function SuperGroupingCard2({
             maxVisibleSteps,
             keepMounted: isActive || mountDetails,
             actions: renderHeaderActions == null ? void 0 : renderHeaderActions({ phase, messageContent }),
-            meta: isActive ? renderRunningMeta == null ? void 0 : renderRunningMeta({ phase }) : null,
-            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 pl-5", children: [
+            meta: phase === "running" ? renderRunningMeta == null ? void 0 : renderRunningMeta({ phase }) : null,
+            children: hasDetails ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 pl-5", children: [
               /* @__PURE__ */ jsxRuntime.jsxs(
                 "button",
                 {
@@ -201,15 +220,16 @@ const SuperGroupingCard = react.memo(function SuperGroupingCard2({
                   "aria-label": "Run details",
                   hidden: !expanded || !detailsExpanded,
                   className: cnfast.cn(
-                    "min-w-0 space-y-2 overflow-hidden border-l border-border/60 py-2 pl-3",
+                    "min-w-0 overflow-hidden border-l border-border/60 py-2 pl-3",
                     classNames == null ? void 0 : classNames.details
                   ),
-                  children: /* @__PURE__ */ jsxRuntime.jsx(CollapsibleGroup.SuperGroupingProvider, { value: groupingContext, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.MessagePrimitive.Unstable_PartsGrouped, { groupingFunction: grouping, components }) })
+                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cnfast.cn("flex flex-col gap-2", classNames == null ? void 0 : classNames.detailsParts), children: /* @__PURE__ */ jsxRuntime.jsx(CollapsibleGroup.SuperGroupingProvider, { value: groupingContext, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.MessagePrimitive.Unstable_PartsGrouped, { groupingFunction: grouping, components }) }) })
                 }
               ) : null
-            ] })
+            ] }) : null
           }
         ),
+        inlineParts.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "super-grouping-inline-tools", className: "mt-2 flex min-w-0 flex-col gap-2", children: inlineParts.map(({ index, key }) => /* @__PURE__ */ jsxRuntime.jsx(react$1.MessagePrimitive.PartByIndex, { index, components }, key)) }) : null,
         /* @__PURE__ */ jsxRuntime.jsx("output", { id: statusId, "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: phase === "waiting" ? "Waiting for your input" : latestStatus })
       ]
     }
@@ -225,16 +245,18 @@ const SuperGroupingFinalText = react.memo(function SuperGroupingFinalText2({
     var _a;
     return (_a = s.message.status) == null ? void 0 : _a.type;
   });
-  const finalText = react.useMemo(() => activityTimeline.getFinalText(messageContent), [messageContent]);
-  if (!finalText) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const parts = react.useMemo(() => activityTimeline.getFinalTextParts(messageContent), [messageContent]);
+  if (parts.length === 0) return null;
+  const running = statusType === "running" || statusType === "requires-action";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "super-grouping-final-text", className: "flex min-w-0 flex-col gap-1.5", children: parts.map((part, position) => /* @__PURE__ */ jsxRuntime.jsx(
     TextComponent,
     {
       type: "text",
-      text: finalText,
-      status: statusType === "running" || statusType === "requires-action" ? { type: "running" } : { type: "complete" }
-    }
-  );
+      text: part.text,
+      status: running && position === parts.length - 1 ? RUNNING_STATUS : COMPLETE_STATUS
+    },
+    part.index
+  )) });
 });
 exports.SuperGroupingCard = SuperGroupingCard;
 exports.SuperGroupingFinalText = SuperGroupingFinalText;