@mastra/playground-ui 46.0.0-alpha.5 → 46.0.0-alpha.7

package/CHANGELOG.md

@@ -1,5 +1,65 @@
 # @mastra/playground-ui
 
+## 46.0.0-alpha.7
+
+### Patch Changes
+
+- Updated dependencies [[`d94b8e1`](https://github.com/mastra-ai/mastra/commit/d94b8e1cee67416d518a8c30099040061bef6a1c)]:
+  - @mastra/core@1.56.0-alpha.7
+  - @mastra/client-js@1.37.0-alpha.7
+  - @mastra/react@1.4.0-alpha.7
+
+## 46.0.0-alpha.6
+
+### Minor Changes
+
+- Added per-project trace list columns for duration, token usage, estimated cost, and custom metadata. ([#20535](https://github.com/mastra-ai/mastra/pull/20535))
+
+- Preserved browser shortcuts by making the MainSidebar Command+B toggle opt-in. Consumers that want the previous shortcut can enable it explicitly: ([#20614](https://github.com/mastra-ai/mastra/pull/20614))
+
+  ```tsx
+  <MainSidebarProvider disableKeyboardShortcut={false}>{children}</MainSidebarProvider>
+  ```
+
+  Added selective hooks for consumers that only need sidebar state or mobile drawer state:
+
+  ```tsx
+  import { useMaybeSidebarState, useMobileDrawer } from '@mastra/playground-ui/components/MainSidebar';
+
+  const sidebar = useMaybeSidebarState();
+  const { openMobile } = useMobileDrawer();
+  ```
+
+- Added a pointer-aware ring around the chat composer. At rest it is a plain border; on hover or focus a soft arc lights the edge under the cursor, and while the agent is running the arc rotates on its own so the composer itself shows the run instead of a separate "working…" label. ([#20630](https://github.com/mastra-ai/mastra/pull/20630))
+
+  ```tsx
+  import { ComposerBox, ComposerRing } from '@mastra/playground-ui/components/Composer';
+
+  <ComposerRing busy={isRunning}>
+    <ComposerBox>{/* input and actions */}</ComposerBox>
+  </ComposerRing>;
+  ```
+
+  Wrap `ComposerBox` with it and pass `busy` — the ring becomes the composer's edge, so the box no longer needs a border of its own.
+
+### Patch Changes
+
+- Fixed three problems with the conversation rail in chat threads. ([#20615](https://github.com/mastra-ai/mastra/pull/20615))
+
+  **The rail now marks the turn you are reading after older history loads.** Scrolling up to load earlier messages used to leave the oldest message highlighted as the current turn, so the marker jumped to the top of the thread instead of following the transcript.
+
+  **Scrolling stays responsive in long threads.** The rail re-derived the order of every message on each scroll event. It now does that only when messages are added or removed.
+
+  **The rail can be used in a browser-only app.** Importing it no longer drags the whole `@mastra/react` entry point into the bundle.
+
+- Fixed the last column header in Sankey charts (for example SENTIMENT on the Trace Intelligence page) rendering right up against the chart's edge. It now keeps the same spacing as the first column's header. ([#20589](https://github.com/mastra-ai/mastra/pull/20589))
+
+- Updated dependencies [[`82201f7`](https://github.com/mastra-ai/mastra/commit/82201f75fae8e050a8de2df08b74875ee74c6b83), [`fb18da5`](https://github.com/mastra-ai/mastra/commit/fb18da56fc35689ae370621a8f10b5b0d8606e20), [`fb18da5`](https://github.com/mastra-ai/mastra/commit/fb18da56fc35689ae370621a8f10b5b0d8606e20), [`0a6598b`](https://github.com/mastra-ai/mastra/commit/0a6598bde80bde008986ad6616bed9632b9294cb), [`9e1dad8`](https://github.com/mastra-ai/mastra/commit/9e1dad8f7b1cab2bb7ade90e5b7561f24577b88a), [`2f43145`](https://github.com/mastra-ai/mastra/commit/2f4314504c03cbba280414ac81ba3197448ee6b0), [`34d34d8`](https://github.com/mastra-ai/mastra/commit/34d34d8c811df512fef4dd5459f79b7821be1866), [`19ccefa`](https://github.com/mastra-ai/mastra/commit/19ccefa628dc971b4bfa2058a324a6ac9b846358), [`34d34d8`](https://github.com/mastra-ai/mastra/commit/34d34d8c811df512fef4dd5459f79b7821be1866)]:
+  - @mastra/core@1.56.0-alpha.6
+  - @mastra/client-js@1.37.0-alpha.6
+  - @mastra/memory@1.25.0-alpha.2
+  - @mastra/react@1.4.0-alpha.6
+
 ## 46.0.0-alpha.5
 
 ### Patch Changes

package/dist/Composer.css

@@ -1,3 +1,83 @@
+/* All three must be registered: an unregistered custom property is a raw token,
+   it cannot be interpolated by a transition or a keyframe. */
+@property --composer-ring-angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+
+/* Offset rather than a second driver of the angle: the spin picks up from
+   wherever the pointer left the arc instead of snapping back to 0deg. */
+@property --composer-ring-spin {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+
+@property --composer-ring-strength {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 0;
+}
+
+.composer-ring {
+  --composer-ring-color: var(--accent1);
+
+  position: relative;
+  border-radius: 23px;
+  padding: 1px;
+  background-color: color-mix(in oklab, var(--border2) 40%, transparent);
+  background-image: conic-gradient(
+    from calc(var(--composer-ring-angle) + var(--composer-ring-spin) - 60deg),
+    transparent 0deg,
+    color-mix(in oklab, var(--composer-ring-color) calc(var(--composer-ring-strength) * 100%), transparent) 60deg,
+    transparent 120deg
+  );
+  transition:
+    --composer-ring-strength 320ms ease-out,
+    box-shadow 320ms ease-out;
+}
+
+/* The ring is the composer's only edge. */
+.composer-ring > [data-slot='composer-box'] {
+  border-color: transparent;
+}
+
+.composer-ring:focus-within {
+  background-color: var(--border2);
+}
+
+.composer-ring:hover,
+.composer-ring:focus-within {
+  --composer-ring-strength: 0.4;
+}
+
+.composer-ring[data-busy='true'] {
+  --composer-ring-strength: 0.65;
+
+  animation: composer-ring-spin 2.4s linear infinite;
+  box-shadow: 0 4px 20px -4px color-mix(in oklab, var(--composer-ring-color) 12%, transparent);
+}
+
+@keyframes composer-ring-spin {
+  from {
+    --composer-ring-spin: 0deg;
+  }
+
+  to {
+    --composer-ring-spin: 360deg;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .composer-ring {
+    transition: none;
+  }
+
+  .composer-ring[data-busy='true'] {
+    animation: none;
+  }
+}
 @keyframes composer-sending {
   0% {
     transform: translate3d(0, 300%, 0);

package/dist/components/ChatShell.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const messageScroller = require('../message-scroller-DIgCd5n3.cjs');
+const messageScroller = require('../message-scroller-BmzjZZNs.cjs');
 const utils_cn = require('../cn-vA5sWo9W.cjs');
 
 function ChatShellRoot({ className, scroller, ...props }) {

package/dist/components/ChatShell.es.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { d as MessageScrollerProvider, e as MessageScrollerViewport, M as MessageScroller, a as MessageScrollerButton, b as MessageScrollerContent } from '../message-scroller-BQpwFsqj.js';
+import { d as MessageScrollerProvider, e as MessageScrollerViewport, M as MessageScroller, a as MessageScrollerButton, b as MessageScrollerContent } from '../message-scroller-D5O7sUS5.js';
 import { c as cn } from '../cn-BakJzhuv.js';
 
 function ChatShellRoot({ className, scroller, ...props }) {

package/dist/components/Composer.cjs.js

@@ -7,6 +7,37 @@ const React = require('react');
 const scrollArea = require('../scroll-area-Dv6QagXt.cjs');
 const utils_cn = require('../cn-vA5sWo9W.cjs');
 
+function useComposerPointerAngle(enabled) {
+  const elementRef = React.useRef(null);
+  React.useEffect(() => {
+    const element = elementRef.current;
+    if (!element || !enabled) return;
+    let animationFrame;
+    let clientX = 0;
+    let clientY = 0;
+    const paintAngle = () => {
+      animationFrame = void 0;
+      const bounds = element.getBoundingClientRect();
+      const radians = Math.atan2(
+        clientY - (bounds.top + bounds.height / 2),
+        clientX - (bounds.left + bounds.width / 2)
+      );
+      element.style.setProperty("--composer-ring-angle", `${radians * 180 / Math.PI + 90}deg`);
+    };
+    const trackPointer = (event) => {
+      clientX = event.clientX;
+      clientY = event.clientY;
+      animationFrame ??= requestAnimationFrame(paintAngle);
+    };
+    window.addEventListener("pointermove", trackPointer, { passive: true });
+    return () => {
+      window.removeEventListener("pointermove", trackPointer);
+      if (animationFrame !== void 0) cancelAnimationFrame(animationFrame);
+    };
+  }, [enabled]);
+  return elementRef;
+}
+
 const Composer = React.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("form", { ref, "data-slot": "composer", ...props, children }));
 Composer.displayName = "Composer";
 const ComposerBox = React.forwardRef(
@@ -28,6 +59,20 @@ const ComposerBox = React.forwardRef(
   )
 );
 ComposerBox.displayName = "ComposerBox";
+const ComposerRing = ({ busy = false, className, ...props }) => {
+  const ringRef = useComposerPointerAngle(!busy);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: ringRef,
+      "data-slot": "composer-ring",
+      "data-busy": busy ? "true" : "false",
+      className: utils_cn.cn("composer-ring mx-auto w-full max-w-3xl", className),
+      ...props
+    }
+  );
+};
+ComposerRing.displayName = "ComposerRing";
 const ComposerAttachments = React.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -98,4 +143,5 @@ exports.ComposerActions = ComposerActions;
 exports.ComposerAttachments = ComposerAttachments;
 exports.ComposerBox = ComposerBox;
 exports.ComposerInput = ComposerInput;
+exports.ComposerRing = ComposerRing;
 //# sourceMappingURL=Composer.cjs.js.map

package/dist/components/Composer.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Composer.cjs.js","sources":["../../src/ds/components/Composer/composer.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport { ScrollArea } from '../ScrollArea';\nimport { cn } from '@/lib/utils';\n\nimport './composer-sending.css';\n\nexport type ComposerProps = ComponentPropsWithoutRef<'form'>;\n\nexport interface ComposerInputProps extends ComponentPropsWithoutRef<'textarea'> {\n  /** Maximum height of the scrolling input viewport. */\n  maxHeight?: string;\n}\n\nexport const Composer = forwardRef<HTMLFormElement, ComposerProps>(({ children, ...props }, ref) => (\n  <form ref={ref} data-slot=\"composer\" {...props}>\n    {children}\n  </form>\n));\nComposer.displayName = 'Composer';\n\nexport interface ComposerBoxProps extends ComponentPropsWithoutRef<'div'> {\n  sendingPulseKey?: number;\n}\n\nexport const ComposerBox = forwardRef<HTMLDivElement, ComposerBoxProps>(\n  ({ children, className, sendingPulseKey = 0, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"composer-box\"\n      className={cn(\n        'duration-normal @container relative mx-auto mt-auto w-full max-w-3xl overflow-hidden rounded-[22px] border border-border2/40 bg-surface3 transition-colors focus-within:border-border2',\n        className,\n      )}\n      {...props}\n    >\n      <ComposerSendingPulse pulseKey={sendingPulseKey} />\n      <div className=\"relative z-10\">{children}</div>\n    </div>\n  ),\n);\nComposerBox.displayName = 'ComposerBox';\n\nexport const ComposerAttachments = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      role=\"region\"\n      data-slot=\"composer-attachments\"\n      className={cn('mx-auto w-full max-w-3xl pb-2', className)}\n      {...props}\n    />\n  ),\n);\nComposerAttachments.displayName = 'ComposerAttachments';\n\nexport const ComposerInput = forwardRef<HTMLTextAreaElement, ComposerInputProps>(\n  ({ className, maxHeight = '212px', ...props }, ref) => (\n    <ScrollArea maxHeight={maxHeight}>\n      <textarea\n        ref={ref}\n        data-slot=\"composer-input\"\n        className={cn(\n          'min-h-17 field-sizing-content w-full resize-none overflow-hidden bg-transparent px-3 pt-3 pb-2 text-ui-lg leading-ui-lg text-neutral6 outline-hidden placeholder:text-neutral3 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n          className,\n        )}\n        {...props}\n      />\n    </ScrollArea>\n  ),\n);\nComposerInput.displayName = 'ComposerInput';\n\nexport const ComposerActions = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      role=\"region\"\n      data-slot=\"composer-actions\"\n      className={cn('flex flex-wrap-reverse items-center justify-between gap-2 px-1.5 pb-1.5', className)}\n      {...props}\n    />\n  ),\n);\nComposerActions.displayName = 'ComposerActions';\n\nconst ComposerGradientColumn = ({ className }: { className?: string }) => (\n  <div className={cn('flex size-full flex-col -space-y-3', className)}>\n    <div className=\"bg-accent1 w-full flex-1 blur-xl\" />\n    <div className=\"bg-accent1Dark w-full flex-1 blur-xl\" />\n    <div className=\"bg-accent1 w-full flex-1 blur-xl\" />\n    <div className=\"bg-accent1Darker w-full flex-1 blur-xl\" />\n  </div>\n);\n\nconst ComposerSendingPulse = ({ pulseKey }: { pulseKey: number }) => {\n  if (pulseKey === 0) return null;\n\n  return (\n    <div\n      key={pulseKey}\n      aria-hidden=\"true\"\n      data-slot=\"composer-sending-pulse\"\n      className=\"composer-sending pointer-events-none absolute top-0 left-[-10%] z-0 flex h-10 w-[120%] transform-gpu\"\n    >\n      <ComposerGradientColumn />\n      <ComposerGradientColumn className=\"-translate-y-2\" />\n      <ComposerGradientColumn />\n    </div>\n  );\n};\n"],"names":["forwardRef","jsx","jsxs","cn","ScrollArea"],"mappings":"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"}
+{"version":3,"file":"Composer.cjs.js","sources":["../../src/ds/components/Composer/use-composer-pointer-angle.ts","../../src/ds/components/Composer/composer.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\n/** Aims the composer ring at the cursor without re-rendering on every move. */\nexport function useComposerPointerAngle(enabled: boolean) {\n  const elementRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element || !enabled) return;\n\n    let animationFrame: number | undefined;\n    let clientX = 0;\n    let clientY = 0;\n\n    const paintAngle = () => {\n      animationFrame = undefined;\n      const bounds = element.getBoundingClientRect();\n      const radians = Math.atan2(\n        clientY - (bounds.top + bounds.height / 2),\n        clientX - (bounds.left + bounds.width / 2),\n      );\n      // conic-gradient starts at 12 o'clock, atan2 at 3 o'clock\n      element.style.setProperty('--composer-ring-angle', `${(radians * 180) / Math.PI + 90}deg`);\n    };\n\n    const trackPointer = (event: PointerEvent) => {\n      clientX = event.clientX;\n      clientY = event.clientY;\n      animationFrame ??= requestAnimationFrame(paintAngle);\n    };\n\n    window.addEventListener('pointermove', trackPointer, { passive: true });\n    return () => {\n      window.removeEventListener('pointermove', trackPointer);\n      if (animationFrame !== undefined) cancelAnimationFrame(animationFrame);\n    };\n  }, [enabled]);\n\n  return elementRef;\n}\n","import type { ComponentPropsWithoutRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport { ScrollArea } from '../ScrollArea';\nimport { useComposerPointerAngle } from './use-composer-pointer-angle';\nimport { cn } from '@/lib/utils';\n\nimport './composer-ring.css';\nimport './composer-sending.css';\n\nexport type ComposerProps = ComponentPropsWithoutRef<'form'>;\n\nexport interface ComposerInputProps extends ComponentPropsWithoutRef<'textarea'> {\n  /** Maximum height of the scrolling input viewport. */\n  maxHeight?: string;\n}\n\nexport const Composer = forwardRef<HTMLFormElement, ComposerProps>(({ children, ...props }, ref) => (\n  <form ref={ref} data-slot=\"composer\" {...props}>\n    {children}\n  </form>\n));\nComposer.displayName = 'Composer';\n\nexport interface ComposerBoxProps extends ComponentPropsWithoutRef<'div'> {\n  sendingPulseKey?: number;\n}\n\nexport const ComposerBox = forwardRef<HTMLDivElement, ComposerBoxProps>(\n  ({ children, className, sendingPulseKey = 0, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"composer-box\"\n      className={cn(\n        'duration-normal @container relative mx-auto mt-auto w-full max-w-3xl overflow-hidden rounded-[22px] border border-border2/40 bg-surface3 transition-colors focus-within:border-border2',\n        className,\n      )}\n      {...props}\n    >\n      <ComposerSendingPulse pulseKey={sendingPulseKey} />\n      <div className=\"relative z-10\">{children}</div>\n    </div>\n  ),\n);\nComposerBox.displayName = 'ComposerBox';\n\nexport interface ComposerRingProps extends ComponentPropsWithoutRef<'div'> {\n  busy?: boolean;\n}\n\n/**\n * Edge for the composer box it wraps: a conic arc lit under the cursor on hover,\n * spinning on its own while the agent runs, never both at once. Wraps rather\n * than decorates because the box clips its overflow and would cut the arc off.\n */\nexport const ComposerRing = ({ busy = false, className, ...props }: ComposerRingProps) => {\n  const ringRef = useComposerPointerAngle(!busy);\n\n  return (\n    <div\n      ref={ringRef}\n      data-slot=\"composer-ring\"\n      data-busy={busy ? 'true' : 'false'}\n      className={cn('composer-ring mx-auto w-full max-w-3xl', className)}\n      {...props}\n    />\n  );\n};\nComposerRing.displayName = 'ComposerRing';\n\nexport const ComposerAttachments = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      role=\"region\"\n      data-slot=\"composer-attachments\"\n      className={cn('mx-auto w-full max-w-3xl pb-2', className)}\n      {...props}\n    />\n  ),\n);\nComposerAttachments.displayName = 'ComposerAttachments';\n\nexport const ComposerInput = forwardRef<HTMLTextAreaElement, ComposerInputProps>(\n  ({ className, maxHeight = '212px', ...props }, ref) => (\n    <ScrollArea maxHeight={maxHeight}>\n      <textarea\n        ref={ref}\n        data-slot=\"composer-input\"\n        className={cn(\n          'min-h-17 field-sizing-content w-full resize-none overflow-hidden bg-transparent px-3 pt-3 pb-2 text-ui-lg leading-ui-lg text-neutral6 outline-hidden placeholder:text-neutral3 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n          className,\n        )}\n        {...props}\n      />\n    </ScrollArea>\n  ),\n);\nComposerInput.displayName = 'ComposerInput';\n\nexport const ComposerActions = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      role=\"region\"\n      data-slot=\"composer-actions\"\n      className={cn('flex flex-wrap-reverse items-center justify-between gap-2 px-1.5 pb-1.5', className)}\n      {...props}\n    />\n  ),\n);\nComposerActions.displayName = 'ComposerActions';\n\nconst ComposerGradientColumn = ({ className }: { className?: string }) => (\n  <div className={cn('flex size-full flex-col -space-y-3', className)}>\n    <div className=\"bg-accent1 w-full flex-1 blur-xl\" />\n    <div className=\"bg-accent1Dark w-full flex-1 blur-xl\" />\n    <div className=\"bg-accent1 w-full flex-1 blur-xl\" />\n    <div className=\"bg-accent1Darker w-full flex-1 blur-xl\" />\n  </div>\n);\n\nconst ComposerSendingPulse = ({ pulseKey }: { pulseKey: number }) => {\n  if (pulseKey === 0) return null;\n\n  return (\n    <div\n      key={pulseKey}\n      aria-hidden=\"true\"\n      data-slot=\"composer-sending-pulse\"\n      className=\"composer-sending pointer-events-none absolute top-0 left-[-10%] z-0 flex h-10 w-[120%] transform-gpu\"\n    >\n      <ComposerGradientColumn />\n      <ComposerGradientColumn className=\"-translate-y-2\" />\n      <ComposerGradientColumn />\n    </div>\n  );\n};\n"],"names":["useRef","useEffect","forwardRef","jsx","jsxs","cn","ScrollArea"],"mappings":"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"}

package/dist/components/Composer.es.js

@@ -1,9 +1,40 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
+import { useRef, useEffect, forwardRef } from 'react';
 import { S as ScrollArea } from '../scroll-area-DZrEuKjC.js';
 import { c as cn } from '../cn-BakJzhuv.js';
 
-import '../Composer.css';const Composer = forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx("form", { ref, "data-slot": "composer", ...props, children }));
+import '../Composer.css';function useComposerPointerAngle(enabled) {
+  const elementRef = useRef(null);
+  useEffect(() => {
+    const element = elementRef.current;
+    if (!element || !enabled) return;
+    let animationFrame;
+    let clientX = 0;
+    let clientY = 0;
+    const paintAngle = () => {
+      animationFrame = void 0;
+      const bounds = element.getBoundingClientRect();
+      const radians = Math.atan2(
+        clientY - (bounds.top + bounds.height / 2),
+        clientX - (bounds.left + bounds.width / 2)
+      );
+      element.style.setProperty("--composer-ring-angle", `${radians * 180 / Math.PI + 90}deg`);
+    };
+    const trackPointer = (event) => {
+      clientX = event.clientX;
+      clientY = event.clientY;
+      animationFrame ??= requestAnimationFrame(paintAngle);
+    };
+    window.addEventListener("pointermove", trackPointer, { passive: true });
+    return () => {
+      window.removeEventListener("pointermove", trackPointer);
+      if (animationFrame !== void 0) cancelAnimationFrame(animationFrame);
+    };
+  }, [enabled]);
+  return elementRef;
+}
+
+const Composer = forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx("form", { ref, "data-slot": "composer", ...props, children }));
 Composer.displayName = "Composer";
 const ComposerBox = forwardRef(
   ({ children, className, sendingPulseKey = 0, ...props }, ref) => /* @__PURE__ */ jsxs(
@@ -24,6 +55,20 @@ const ComposerBox = forwardRef(
   )
 );
 ComposerBox.displayName = "ComposerBox";
+const ComposerRing = ({ busy = false, className, ...props }) => {
+  const ringRef = useComposerPointerAngle(!busy);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: ringRef,
+      "data-slot": "composer-ring",
+      "data-busy": busy ? "true" : "false",
+      className: cn("composer-ring mx-auto w-full max-w-3xl", className),
+      ...props
+    }
+  );
+};
+ComposerRing.displayName = "ComposerRing";
 const ComposerAttachments = forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
@@ -89,5 +134,5 @@ const ComposerSendingPulse = ({ pulseKey }) => {
   );
 };
 
-export { Composer, ComposerActions, ComposerAttachments, ComposerBox, ComposerInput };
+export { Composer, ComposerActions, ComposerAttachments, ComposerBox, ComposerInput, ComposerRing };
 //# sourceMappingURL=Composer.es.js.map

package/dist/components/Composer.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Composer.es.js","sources":["../../src/ds/components/Composer/composer.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport { ScrollArea } from '../ScrollArea';\nimport { cn } from '@/lib/utils';\n\nimport './composer-sending.css';\n\nexport type ComposerProps = ComponentPropsWithoutRef<'form'>;\n\nexport interface ComposerInputProps extends ComponentPropsWithoutRef<'textarea'> {\n  /** Maximum height of the scrolling input viewport. */\n  maxHeight?: string;\n}\n\nexport const Composer = forwardRef<HTMLFormElement, ComposerProps>(({ children, ...props }, ref) => (\n  <form ref={ref} data-slot=\"composer\" {...props}>\n    {children}\n  </form>\n));\nComposer.displayName = 'Composer';\n\nexport interface ComposerBoxProps extends ComponentPropsWithoutRef<'div'> {\n  sendingPulseKey?: number;\n}\n\nexport const ComposerBox = forwardRef<HTMLDivElement, ComposerBoxProps>(\n  ({ children, className, sendingPulseKey = 0, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"composer-box\"\n      className={cn(\n        'duration-normal @container relative mx-auto mt-auto w-full max-w-3xl overflow-hidden rounded-[22px] border border-border2/40 bg-surface3 transition-colors focus-within:border-border2',\n        className,\n      )}\n      {...props}\n    >\n      <ComposerSendingPulse pulseKey={sendingPulseKey} />\n      <div className=\"relative z-10\">{children}</div>\n    </div>\n  ),\n);\nComposerBox.displayName = 'ComposerBox';\n\nexport const ComposerAttachments = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      role=\"region\"\n      data-slot=\"composer-attachments\"\n      className={cn('mx-auto w-full max-w-3xl pb-2', className)}\n      {...props}\n    />\n  ),\n);\nComposerAttachments.displayName = 'ComposerAttachments';\n\nexport const ComposerInput = forwardRef<HTMLTextAreaElement, ComposerInputProps>(\n  ({ className, maxHeight = '212px', ...props }, ref) => (\n    <ScrollArea maxHeight={maxHeight}>\n      <textarea\n        ref={ref}\n        data-slot=\"composer-input\"\n        className={cn(\n          'min-h-17 field-sizing-content w-full resize-none overflow-hidden bg-transparent px-3 pt-3 pb-2 text-ui-lg leading-ui-lg text-neutral6 outline-hidden placeholder:text-neutral3 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n          className,\n        )}\n        {...props}\n      />\n    </ScrollArea>\n  ),\n);\nComposerInput.displayName = 'ComposerInput';\n\nexport const ComposerActions = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      role=\"region\"\n      data-slot=\"composer-actions\"\n      className={cn('flex flex-wrap-reverse items-center justify-between gap-2 px-1.5 pb-1.5', className)}\n      {...props}\n    />\n  ),\n);\nComposerActions.displayName = 'ComposerActions';\n\nconst ComposerGradientColumn = ({ className }: { className?: string }) => (\n  <div className={cn('flex size-full flex-col -space-y-3', className)}>\n    <div className=\"bg-accent1 w-full flex-1 blur-xl\" />\n    <div className=\"bg-accent1Dark w-full flex-1 blur-xl\" />\n    <div className=\"bg-accent1 w-full flex-1 blur-xl\" />\n    <div className=\"bg-accent1Darker w-full flex-1 blur-xl\" />\n  </div>\n);\n\nconst ComposerSendingPulse = ({ pulseKey }: { pulseKey: number }) => {\n  if (pulseKey === 0) return null;\n\n  return (\n    <div\n      key={pulseKey}\n      aria-hidden=\"true\"\n      data-slot=\"composer-sending-pulse\"\n      className=\"composer-sending pointer-events-none absolute top-0 left-[-10%] z-0 flex h-10 w-[120%] transform-gpu\"\n    >\n      <ComposerGradientColumn />\n      <ComposerGradientColumn className=\"-translate-y-2\" />\n      <ComposerGradientColumn />\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Composer.es.js","sources":["../../src/ds/components/Composer/use-composer-pointer-angle.ts","../../src/ds/components/Composer/composer.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\n/** Aims the composer ring at the cursor without re-rendering on every move. */\nexport function useComposerPointerAngle(enabled: boolean) {\n  const elementRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element || !enabled) return;\n\n    let animationFrame: number | undefined;\n    let clientX = 0;\n    let clientY = 0;\n\n    const paintAngle = () => {\n      animationFrame = undefined;\n      const bounds = element.getBoundingClientRect();\n      const radians = Math.atan2(\n        clientY - (bounds.top + bounds.height / 2),\n        clientX - (bounds.left + bounds.width / 2),\n      );\n      // conic-gradient starts at 12 o'clock, atan2 at 3 o'clock\n      element.style.setProperty('--composer-ring-angle', `${(radians * 180) / Math.PI + 90}deg`);\n    };\n\n    const trackPointer = (event: PointerEvent) => {\n      clientX = event.clientX;\n      clientY = event.clientY;\n      animationFrame ??= requestAnimationFrame(paintAngle);\n    };\n\n    window.addEventListener('pointermove', trackPointer, { passive: true });\n    return () => {\n      window.removeEventListener('pointermove', trackPointer);\n      if (animationFrame !== undefined) cancelAnimationFrame(animationFrame);\n    };\n  }, [enabled]);\n\n  return elementRef;\n}\n","import type { ComponentPropsWithoutRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport { ScrollArea } from '../ScrollArea';\nimport { useComposerPointerAngle } from './use-composer-pointer-angle';\nimport { cn } from '@/lib/utils';\n\nimport './composer-ring.css';\nimport './composer-sending.css';\n\nexport type ComposerProps = ComponentPropsWithoutRef<'form'>;\n\nexport interface ComposerInputProps extends ComponentPropsWithoutRef<'textarea'> {\n  /** Maximum height of the scrolling input viewport. */\n  maxHeight?: string;\n}\n\nexport const Composer = forwardRef<HTMLFormElement, ComposerProps>(({ children, ...props }, ref) => (\n  <form ref={ref} data-slot=\"composer\" {...props}>\n    {children}\n  </form>\n));\nComposer.displayName = 'Composer';\n\nexport interface ComposerBoxProps extends ComponentPropsWithoutRef<'div'> {\n  sendingPulseKey?: number;\n}\n\nexport const ComposerBox = forwardRef<HTMLDivElement, ComposerBoxProps>(\n  ({ children, className, sendingPulseKey = 0, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"composer-box\"\n      className={cn(\n        'duration-normal @container relative mx-auto mt-auto w-full max-w-3xl overflow-hidden rounded-[22px] border border-border2/40 bg-surface3 transition-colors focus-within:border-border2',\n        className,\n      )}\n      {...props}\n    >\n      <ComposerSendingPulse pulseKey={sendingPulseKey} />\n      <div className=\"relative z-10\">{children}</div>\n    </div>\n  ),\n);\nComposerBox.displayName = 'ComposerBox';\n\nexport interface ComposerRingProps extends ComponentPropsWithoutRef<'div'> {\n  busy?: boolean;\n}\n\n/**\n * Edge for the composer box it wraps: a conic arc lit under the cursor on hover,\n * spinning on its own while the agent runs, never both at once. Wraps rather\n * than decorates because the box clips its overflow and would cut the arc off.\n */\nexport const ComposerRing = ({ busy = false, className, ...props }: ComposerRingProps) => {\n  const ringRef = useComposerPointerAngle(!busy);\n\n  return (\n    <div\n      ref={ringRef}\n      data-slot=\"composer-ring\"\n      data-busy={busy ? 'true' : 'false'}\n      className={cn('composer-ring mx-auto w-full max-w-3xl', className)}\n      {...props}\n    />\n  );\n};\nComposerRing.displayName = 'ComposerRing';\n\nexport const ComposerAttachments = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      role=\"region\"\n      data-slot=\"composer-attachments\"\n      className={cn('mx-auto w-full max-w-3xl pb-2', className)}\n      {...props}\n    />\n  ),\n);\nComposerAttachments.displayName = 'ComposerAttachments';\n\nexport const ComposerInput = forwardRef<HTMLTextAreaElement, ComposerInputProps>(\n  ({ className, maxHeight = '212px', ...props }, ref) => (\n    <ScrollArea maxHeight={maxHeight}>\n      <textarea\n        ref={ref}\n        data-slot=\"composer-input\"\n        className={cn(\n          'min-h-17 field-sizing-content w-full resize-none overflow-hidden bg-transparent px-3 pt-3 pb-2 text-ui-lg leading-ui-lg text-neutral6 outline-hidden placeholder:text-neutral3 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n          className,\n        )}\n        {...props}\n      />\n    </ScrollArea>\n  ),\n);\nComposerInput.displayName = 'ComposerInput';\n\nexport const ComposerActions = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      role=\"region\"\n      data-slot=\"composer-actions\"\n      className={cn('flex flex-wrap-reverse items-center justify-between gap-2 px-1.5 pb-1.5', className)}\n      {...props}\n    />\n  ),\n);\nComposerActions.displayName = 'ComposerActions';\n\nconst ComposerGradientColumn = ({ className }: { className?: string }) => (\n  <div className={cn('flex size-full flex-col -space-y-3', className)}>\n    <div className=\"bg-accent1 w-full flex-1 blur-xl\" />\n    <div className=\"bg-accent1Dark w-full flex-1 blur-xl\" />\n    <div className=\"bg-accent1 w-full flex-1 blur-xl\" />\n    <div className=\"bg-accent1Darker w-full flex-1 blur-xl\" />\n  </div>\n);\n\nconst ComposerSendingPulse = ({ pulseKey }: { pulseKey: number }) => {\n  if (pulseKey === 0) return null;\n\n  return (\n    <div\n      key={pulseKey}\n      aria-hidden=\"true\"\n      data-slot=\"composer-sending-pulse\"\n      className=\"composer-sending pointer-events-none absolute top-0 left-[-10%] z-0 flex h-10 w-[120%] transform-gpu\"\n    >\n      <ComposerGradientColumn />\n      <ComposerGradientColumn className=\"-translate-y-2\" />\n      <ComposerGradientColumn />\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/DataList.cjs.js

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const dataList = require('../data-list-CEGVpKNo.cjs');
-const dataListSkeleton = require('../data-list-skeleton-CmCTE-HQ.cjs');
+const dataList = require('../data-list-B3P5IlxV.cjs');
+const dataListSkeleton = require('../data-list-skeleton-ClGPuUja.cjs');
 const jsxRuntime = require('react/jsx-runtime');
-const dataListTopCell = require('../data-list-top-cell-DoeqMbd1.cjs');
+const dataListTopCell = require('../data-list-top-cell-Dfg0AKmr.cjs');
 const dateFns = require('date-fns');
-const tracesDataList = require('../traces-data-list-CwGS6fk9.cjs');
+const tracesDataList = require('../traces-data-list-D3TOjHkm.cjs');
 
 function toDate(value) {
   const date = value instanceof Date ? value : new Date(value);

package/dist/components/DataList.es.js

@@ -1,9 +1,9 @@
-export { D as DataList } from '../data-list-SGIqDkMi.js';
-export { D as DataListSkeleton } from '../data-list-skeleton-CQvX7jIh.js';
+export { D as DataList } from '../data-list-CZC8N3I4.js';
+export { D as DataListSkeleton } from '../data-list-skeleton-BDQEjCWH.js';
 import { jsx } from 'react/jsx-runtime';
-import { a as DataListCell, c as DataListNextPageLoading, f as DataListNoMatch, h as DataListRowButton, k as DataListTopCell, l as DataListTop, D as DataListRoot } from '../data-list-top-cell-D9EsRa0k.js';
+import { a as DataListCell, c as DataListNextPageLoading, f as DataListNoMatch, i as DataListRowButton, m as DataListTopCell, n as DataListTop, D as DataListRoot } from '../data-list-top-cell-S98SdRsx.js';
 import { format, isToday } from 'date-fns';
-export { T as TracesDataList } from '../traces-data-list-CB4kjGeS.js';
+export { T as TracesDataList } from '../traces-data-list-a3sYTxch.js';
 
 function toDate(value) {
   const date = value instanceof Date ? value : new Date(value);

package/dist/components/EnvironmentVariablesEditor.cjs.js

@@ -10,7 +10,7 @@ const Button = require('../Button-Bm94fEF2.cjs');
 const Notice = require('../Notice-B9cdEg8R.cjs');
 const envFile = require('../env-file-BU2hStkm.cjs');
 const Txt = require('../Txt-I5lK8zy7.cjs');
-const dataList = require('../data-list-CEGVpKNo.cjs');
+const dataList = require('../data-list-B3P5IlxV.cjs');
 const hooks_useCopyToClipboard = require('../hooks/use-copy-to-clipboard.cjs.js');
 const fieldBlock = require('../field-block-BcTR08I7.cjs');
 const inputGroup = require('../input-group-CH72YUVL.cjs');

package/dist/components/EnvironmentVariablesEditor.es.js

@@ -6,7 +6,7 @@ import { B as Button } from '../Button-Bx2lFdqb.js';
 import { N as Notice } from '../Notice-DIK9IZsq.js';
 import { D as DUPLICATE_ENVIRONMENT_VARIABLE_MESSAGE } from '../env-file-BITYowCx.js';
 import { T as Txt } from '../Txt-Df42XG5p.js';
-import { D as DataList } from '../data-list-SGIqDkMi.js';
+import { D as DataList } from '../data-list-CZC8N3I4.js';
 import { useCopyToClipboard } from '../hooks/use-copy-to-clipboard.es.js';
 import { F as FieldBlock } from '../field-block-B63CpA4d.js';
 import { I as InputGroup, c as InputGroupInput, a as InputGroupAddon, b as InputGroupButton } from '../input-group-Dzs-ai0n.js';

package/dist/components/LogsDataList.cjs.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const logsDataList = require('../logs-data-list-C_FyPCxE.cjs');
-const dataListSkeleton = require('../data-list-skeleton-CmCTE-HQ.cjs');
+const logsDataList = require('../logs-data-list-DTt_DmNk.cjs');
+const dataListSkeleton = require('../data-list-skeleton-ClGPuUja.cjs');
 
 
 

package/dist/components/LogsDataList.es.js

@@ -1,3 +1,3 @@
-export { L as LogsDataList } from '../logs-data-list-BhDEUkXZ.js';
-export { D as LogsDataListSkeleton } from '../data-list-skeleton-CQvX7jIh.js';
+export { L as LogsDataList } from '../logs-data-list-C9Q9MHsz.js';
+export { D as LogsDataListSkeleton } from '../data-list-skeleton-BDQEjCWH.js';
 //# sourceMappingURL=LogsDataList.es.js.map