@invergent/agent-chat-react 2.13.3 → 2.14.0

package/dist/index.cjs

@@ -22,7 +22,7 @@ var diff = require('diff');
 var AnsiImport = require('ansi-to-react');
 var cmdk = require('cmdk');
 var nanoid = require('nanoid');
-var tokenlens = require('tokenlens');
+require('tokenlens');
 require('pdfjs-dist/web/pdf_viewer.css');
 var dateFns = require('date-fns');
 
@@ -1040,39 +1040,6 @@ var ConversationScrollButton = ({
   );
 };
 
-// src/components/ui/button-group.tsx
-init_utils();
-var buttonGroupVariants = classVarianceAuthority.cva(
-  "group/button-group flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 *:data-[slot=input]:px-4 has-[>[data-variant=outline]]:*:data-[slot=input-group]:border-border has-[>[data-variant=outline]]:*:data-[slot=input-group]:px-2.5 has-[>[data-variant=outline]]:*:data-[slot=select-trigger]:border-border has-[>[data-variant=outline]]:*:[[role=combobox]]:px-2.5 has-[>[data-variant=outline]]:[&>[data-slot=input-group]:has(:focus-visible)]:border-ring has-[>[data-variant=outline]]:[&>[data-slot=select-trigger]:focus-visible]:border-ring has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-none [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[>[data-variant=outline]]:[&>input]:border-border has-[>[data-variant=outline]]:[&>input:focus-visible]:border-ring",
-  {
-    variants: {
-      orientation: {
-        horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-none!",
-        vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-none!"
-      }
-    },
-    defaultVariants: {
-      orientation: "horizontal"
-    }
-  }
-);
-function ButtonGroup({
-  className,
-  orientation,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      role: "group",
-      "data-slot": "button-group",
-      "data-orientation": orientation,
-      className: cn(buttonGroupVariants({ orientation }), className),
-      ...props
-    }
-  );
-}
-
 // src/components/ai-elements/message.tsx
 init_utils();
 
@@ -8450,7 +8417,7 @@ var PromptInput = ({
         onSubmit: handleSubmit,
         ref: formRef,
         ...props,
-        children: /* @__PURE__ */ jsxRuntime.jsx(BrandBeam, { size: "line", active: beamActive, strength: 0.7, borderRadius: 24, children: /* @__PURE__ */ jsxRuntime.jsx(InputGroup, { className: "overflow-hidden rounded-3xl border border-input bg-white px-4 py-2 shadow-sm dark:bg-card dark:shadow-none dark:ring-1 dark:ring-white/5 has-[textarea]:rounded-3xl has-[>[data-align=block-end]]:rounded-3xl has-[>[data-align=block-start]]:rounded-3xl", children }) })
+        children: /* @__PURE__ */ jsxRuntime.jsx(BrandBeam, { size: "line", active: beamActive, strength: 0.7, children: /* @__PURE__ */ jsxRuntime.jsx(InputGroup, { className: "overflow-hidden rounded-3xl border border-input bg-white px-4 py-2 shadow-sm dark:bg-card dark:shadow-none dark:ring-1 dark:ring-white/5 has-[textarea]:rounded-3xl has-data-[align=block-end]:rounded-3xl has-data-[align=block-start]:rounded-3xl has-[>[data-align=block-end]]:rounded-3xl has-[>[data-align=block-start]]:rounded-3xl", children }) })
       }
     )
   ] });
@@ -8713,6 +8680,7 @@ function Progress({
 // src/components/ai-elements/context.tsx
 init_utils();
 var PERCENT_MAX = 100;
+var NEARLY_FULL = 0.9;
 var ICON_RADIUS = 10;
 var ICON_VIEWBOX = 24;
 var ICON_CENTER = 12;
@@ -8805,167 +8773,50 @@ var ContextContentHeader = ({
   const total = new Intl.NumberFormat("en-US", {
     notation: "compact"
   }).format(maxTokens);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full space-y-2 p-3", className), ...props, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 text-xs", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { children: displayPct }),
-      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: " text-muted-foreground", children: [
+  const nearlyFull = usedPercent >= NEARLY_FULL;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full space-y-2 px-3 py-2.5", className), ...props, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "p",
+        {
+          className: cn(
+            "text-sm font-medium tabular-nums",
+            nearlyFull && "text-destructive"
+          ),
+          children: displayPct
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground tabular-nums", children: [
         used,
         " / ",
         total
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsxRuntime.jsx(Progress, { className: "bg-muted", value: usedPercent * PERCENT_MAX }) })
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Progress,
+      {
+        className: cn(
+          // The primitive only clips its x-axis, which leaves the fill's
+          // square end poking out of the pill at both ends.
+          "h-1 overflow-hidden rounded-full bg-muted",
+          // Amber, not `bg-primary`: primary is the host app's colour, and
+          // the two hosts disagree — the agent web app is amber, Studio is
+          // near-black — so the same bar came out black beside a Send
+          // button the composer hardcodes amber. This is the composer's
+          // own accent, so it reads the same wherever it is embedded.
+          "[&>[data-slot=progress-indicator]]:bg-amber-500",
+          nearlyFull && "[&>[data-slot=progress-indicator]]:bg-destructive"
+        ),
+        value: usedPercent * PERCENT_MAX
+      }
+    )
   ] }) });
 };
 var ContextContentBody = ({
   children,
   className,
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full p-3", className), ...props, children });
-var TokensWithCost = ({
-  tokens,
-  costText
-}) => /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-  tokens === void 0 ? "\u2014" : new Intl.NumberFormat("en-US", {
-    notation: "compact"
-  }).format(tokens),
-  costText ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-2 text-muted-foreground", children: [
-    "\u2022 ",
-    costText
-  ] }) : null
-] });
-var ContextInputUsage = ({
-  className,
-  children,
-  ...props
-}) => {
-  const { usage, modelId } = useContextValue();
-  const inputTokens = usage?.inputTokens ?? 0;
-  if (children) {
-    return children;
-  }
-  if (!inputTokens) {
-    return null;
-  }
-  const inputCost = modelId ? tokenlens.getUsage({
-    modelId,
-    usage: { input: inputTokens, output: 0 }
-  }).costUSD?.totalUSD : void 0;
-  const inputCostText = new Intl.NumberFormat("en-US", {
-    currency: "USD",
-    style: "currency"
-  }).format(inputCost ?? 0);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cn("flex items-center justify-between text-xs", className),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Input" }),
-        /* @__PURE__ */ jsxRuntime.jsx(TokensWithCost, { costText: inputCostText, tokens: inputTokens })
-      ]
-    }
-  );
-};
-var ContextOutputUsage = ({
-  className,
-  children,
-  ...props
-}) => {
-  const { usage, modelId } = useContextValue();
-  const outputTokens = usage?.outputTokens ?? 0;
-  if (children) {
-    return children;
-  }
-  if (!outputTokens) {
-    return null;
-  }
-  const outputCost = modelId ? tokenlens.getUsage({
-    modelId,
-    usage: { input: 0, output: outputTokens }
-  }).costUSD?.totalUSD : void 0;
-  const outputCostText = new Intl.NumberFormat("en-US", {
-    currency: "USD",
-    style: "currency"
-  }).format(outputCost ?? 0);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cn("flex items-center justify-between text-xs", className),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Output" }),
-        /* @__PURE__ */ jsxRuntime.jsx(TokensWithCost, { costText: outputCostText, tokens: outputTokens })
-      ]
-    }
-  );
-};
-var ContextReasoningUsage = ({
-  className,
-  children,
-  ...props
-}) => {
-  const { usage, modelId } = useContextValue();
-  const reasoningTokens = usage?.reasoningTokens ?? 0;
-  if (children) {
-    return children;
-  }
-  if (!reasoningTokens) {
-    return null;
-  }
-  const reasoningCost = modelId ? tokenlens.getUsage({
-    modelId,
-    usage: { reasoningTokens }
-  }).costUSD?.totalUSD : void 0;
-  const reasoningCostText = new Intl.NumberFormat("en-US", {
-    currency: "USD",
-    style: "currency"
-  }).format(reasoningCost ?? 0);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cn("flex items-center justify-between text-xs", className),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Reasoning" }),
-        /* @__PURE__ */ jsxRuntime.jsx(TokensWithCost, { costText: reasoningCostText, tokens: reasoningTokens })
-      ]
-    }
-  );
-};
-var ContextCacheUsage = ({
-  className,
-  children,
-  ...props
-}) => {
-  const { usage, modelId } = useContextValue();
-  const cacheTokens = usage?.cachedInputTokens ?? 0;
-  if (children) {
-    return children;
-  }
-  if (!cacheTokens) {
-    return null;
-  }
-  const cacheCost = modelId ? tokenlens.getUsage({
-    modelId,
-    usage: { cacheReads: cacheTokens, input: 0, output: 0 }
-  }).costUSD?.totalUSD : void 0;
-  const cacheCostText = new Intl.NumberFormat("en-US", {
-    currency: "USD",
-    style: "currency"
-  }).format(cacheCost ?? 0);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cn("flex items-center justify-between text-xs", className),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Cache" }),
-        /* @__PURE__ */ jsxRuntime.jsx(TokensWithCost, { costText: cacheCostText, tokens: cacheTokens })
-      ]
-    }
-  );
-};
+}) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full space-y-1.5 px-3 py-2.5", className), ...props, children });
 
 // src/components/chat/chat-composer.tsx
 init_utils();
@@ -9380,6 +9231,20 @@ function SkillsEmptyState() {
   ] });
 }
 var TOOLS_ITEM_CLASS = "gap-3 rounded-md px-3 py-2 pointer-coarse:min-h-11 pointer-coarse:text-[15px]";
+var VIEW_MODE_SEGMENTS = [
+  {
+    mode: "simple",
+    label: "Simple",
+    icon: lucideReact.MessageSquareIcon,
+    tooltip: "Simple \u2014 just the conversation"
+  },
+  {
+    mode: "expert",
+    label: "Advanced",
+    icon: lucideReact.ListTreeIcon,
+    tooltip: "Advanced \u2014 every step the agent took"
+  }
+];
 function ChatComposer(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(PromptInputProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(ChatComposerInner, { ...props }) });
 }
@@ -9734,6 +9599,12 @@ function ChatComposerInner({
   );
   const [contextOpen, setContextOpen] = react.useState(false);
   const contextPercentLabel = tokenUsage?.contextWindow ? `${Math.min(100, Math.round(tokenUsage.totalTokens / tokenUsage.contextWindow * 100))}%` : "0%";
+  const contextBreakdown = tokenUsage ? [
+    { label: "Input", tokens: tokenUsage.inputTokens },
+    { label: "Output", tokens: tokenUsage.outputTokens },
+    ...tokenUsage.reasoningTokens > 0 ? [{ label: "Reasoning", tokens: tokenUsage.reasoningTokens }] : [],
+    ...tokenUsage.cachedInputTokens > 0 ? [{ label: "Cache", tokens: tokenUsage.cachedInputTokens }] : []
+  ] : [];
   const canAttach = !disabled && !awaitingAnswer;
   const showPaneToggles = Boolean(
     canShowBrowser && onToggleBrowser || canShowWorkspace && onToggleWorkspace
@@ -9742,47 +9613,39 @@ function ChatComposerInner({
     browserProfilesEnabled && onSelectBrowserProfile && adapter.listBrowserProfiles
   );
   const showToolsPanel = canAttach || showPaneToggles || canPickProfile;
-  const viewModeToggle = onViewModeChange ? /* @__PURE__ */ jsxRuntime.jsxs(
-    ButtonGroup,
+  const viewModeToggle = onViewModeChange ? /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
     {
+      role: "group",
       "aria-label": "Chat view mode",
-      className: "overflow-hidden rounded-full border border-border bg-muted/40 p-0.5",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          PromptInputButton,
-          {
-            "aria-label": "Simple view",
-            "aria-pressed": viewMode === "simple",
-            tooltip: "Simple \u2014 just the conversation",
-            variant: viewMode === "simple" ? "secondary" : "ghost",
-            onClick: () => onViewModeChange("simple"),
-            className: cn(
-              // 32px is a comfortable segment for a cursor and a miss for a
-              // thumb, so touch takes both halves to the 44px floor.
-              "size-8 rounded-full pointer-coarse:size-11",
-              viewMode === "simple" && "shadow-sm"
-            ),
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquareIcon, { className: "size-[18px] pointer-coarse:size-5" })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
+      className: "flex shrink-0 items-center gap-0.5 rounded-full bg-muted/60 p-0.5",
+      children: VIEW_MODE_SEGMENTS.map(({ mode, label, icon: Icon, tooltip }) => {
+        const selected = viewMode === mode;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
           PromptInputButton,
           {
-            "aria-label": "Advanced view",
-            "aria-pressed": viewMode === "expert",
-            tooltip: "Advanced \u2014 every step the agent took",
-            variant: viewMode === "expert" ? "secondary" : "ghost",
-            onClick: () => onViewModeChange("expert"),
+            size: "sm",
+            "aria-label": `${label} view`,
+            "aria-pressed": selected,
+            tooltip,
+            variant: "ghost",
+            onClick: () => onViewModeChange(mode),
             className: cn(
-              // 32px is a comfortable segment for a cursor and a miss for a
-              // thumb, so touch takes both halves to the 44px floor.
-              "size-8 rounded-full pointer-coarse:size-11",
-              viewMode === "expert" && "shadow-sm"
+              // Icon-width on a phone, word-width with a cursor; the coarse
+              // bump takes the segment to the 44px touch floor either way.
+              // Words, not the shouted uppercase the button base defaults to —
+              // this is a label on a switch, not a call to action.
+              "h-8 gap-1.5 rounded-full border-0 bg-transparent px-3.5 text-xs font-normal capitalize tracking-normal md:px-3 pointer-coarse:h-11 pointer-coarse:px-5",
+              selected ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:bg-background/60 hover:text-foreground"
             ),
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListTreeIcon, { className: "size-[18px] pointer-coarse:size-5" })
-          }
-        )
-      ]
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-4 md:hidden" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden md:inline", children: label })
+            ]
+          },
+          mode
+        );
+      })
     }
   ) : null;
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -9999,37 +9862,44 @@ function ChatComposerInner({
                           ),
                           children: [
                             /* @__PURE__ */ jsxRuntime.jsx(ContextContentHeader, {}),
-                            /* @__PURE__ */ jsxRuntime.jsx(ContextContentBody, { children: tokenUsage.totalTokens > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                              /* @__PURE__ */ jsxRuntime.jsx(ContextInputUsage, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-xs", children: [
-                                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Input" }),
-                                /* @__PURE__ */ jsxRuntime.jsx("span", { children: tokenUsage.inputTokens.toLocaleString() })
-                              ] }) }),
-                              /* @__PURE__ */ jsxRuntime.jsx(ContextOutputUsage, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-xs", children: [
-                                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Output" }),
-                                /* @__PURE__ */ jsxRuntime.jsx("span", { children: tokenUsage.outputTokens.toLocaleString() })
-                              ] }) }),
-                              tokenUsage.reasoningTokens > 0 && /* @__PURE__ */ jsxRuntime.jsx(ContextReasoningUsage, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-xs", children: [
-                                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Reasoning" }),
-                                /* @__PURE__ */ jsxRuntime.jsx("span", { children: tokenUsage.reasoningTokens.toLocaleString() })
-                              ] }) }),
-                              tokenUsage.cachedInputTokens > 0 && /* @__PURE__ */ jsxRuntime.jsx(ContextCacheUsage, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-xs", children: [
-                                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Cache" }),
-                                /* @__PURE__ */ jsxRuntime.jsx("span", { children: tokenUsage.cachedInputTokens.toLocaleString() })
-                              ] }) })
-                            ] }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground text-center py-1", children: "Empty" }) }),
-                            tokenUsage.totalTokens > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full items-center justify-end gap-3 bg-secondary p-2", children: /* @__PURE__ */ jsxRuntime.jsx(
-                              Button,
+                            /* @__PURE__ */ jsxRuntime.jsx(ContextContentBody, { children: tokenUsage.totalTokens > 0 ? contextBreakdown.map(({ label, tokens }) => /* @__PURE__ */ jsxRuntime.jsxs(
+                              "div",
                               {
-                                type: "button",
-                                size: "xs",
-                                className: "pointer-coarse:h-11 pointer-coarse:px-4 pointer-coarse:text-sm",
-                                onClick: () => {
-                                  setContextOpen(false);
-                                  onSend("/compress");
-                                },
-                                children: "Compress"
-                              }
-                            ) })
+                                className: "flex items-center justify-between gap-4 text-xs",
+                                children: [
+                                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: label }),
+                                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tabular-nums", children: tokens.toLocaleString() })
+                                ]
+                              },
+                              label
+                            )) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground text-center py-1", children: "Empty" }) }),
+                            tokenUsage.totalTokens > 0 && // The action the panel exists for, so it gets the panel's
+                            // width rather than a filled block shoved into the corner
+                            // of a grey bar — that bar was a second surface inside a
+                            // small popover, squaring its own corners off against the
+                            // rounded ones around it. It keeps a rule of its own
+                            // because the sheet form has no divide-y, and the one
+                            // division worth drawing is between reading and acting.
+                            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5 border-t border-border px-3 py-2.5", children: [
+                              /* @__PURE__ */ jsxRuntime.jsxs(
+                                Button,
+                                {
+                                  type: "button",
+                                  size: "sm",
+                                  variant: "outline",
+                                  className: "w-full",
+                                  onClick: () => {
+                                    setContextOpen(false);
+                                    onSend("/compress");
+                                  },
+                                  children: [
+                                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ShrinkIcon, {}),
+                                    "Compress"
+                                  ]
+                                }
+                              ),
+                              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-[11px] leading-snug text-muted-foreground", children: "Sums up the thread to free the window" })
+                            ] })
                           ]
                         }
                       )