@tangle-network/sandbox-ui 0.60.0 → 0.62.0

package/dist/{WorkflowGraph-VMG2ZEAN.js → WorkflowGraph-M5ZOY43R.js}

@@ -2,11 +2,9 @@ import {
   ProviderIcon
 } from "./chunk-GTJ5PSK5.js";
 import {
-  buildWorkflowGraph
-} from "./chunk-WEYFEMIN.js";
-import {
+  buildWorkflowGraph,
   providerLabel
-} from "./chunk-7JLB7UZ3.js";
+} from "./chunk-34F66QTV.js";
 import "./chunk-U67V476Y.js";
 
 // src/workflows/WorkflowGraph.tsx

package/dist/chat.d.ts

@@ -180,6 +180,16 @@ interface AgentSessionControlsProps {
     model?: AgentSessionModelControl;
     /** Thinking-effort level applied to subsequent turns. */
     reasoning?: AgentSessionReasoningControl;
+    /**
+     * Restrict the model catalog to what the selected harness can actually run,
+     * the same way `harness.locked` does — but WITHOUT locking the harness
+     * dropdown. Off by default: the strip shows every model and picking an
+     * incompatible one snaps the harness to the model's native backend. Turn it
+     * ON for a harness-first surface (e.g. a workspace-wide, sandbox-bound
+     * harness) where that silent backend swap is undesirable — an incompatible
+     * model is then simply not offered.
+     */
+    filterModelsToHarness?: boolean;
     /** Right-aligned extra content (token meter, cost, status). */
     trailing?: React.ReactNode;
     className?: string;
@@ -218,12 +228,17 @@ interface AgentSessionControlsProps {
  * coherent automatically (see harness-model-compat): picking a harness
  * snaps an incompatible model to that harness's best catalog option;
  * picking a model the current harness can't run switches to the model's
- * native harness — unless the harness is `locked`, in which case the
- * catalog itself is filtered to compatible models.
+ * native harness — unless the catalog is restricted to the harness (when
+ * `locked`, or the consumer sets `filterModelsToHarness`), in which case the
+ * incompatible model is never offered and no swap happens.
+ *
+ * When a reasoning control is also present, the effort is re-clamped into the
+ * set the new (harness, model) pair supports on every harness/model change, so
+ * the effort picker's label never disagrees with the value actually in effect.
  *
  * Designed to slot into `SandboxWorkbench`'s `session.composerControls`.
  */
-declare function AgentSessionControls({ harness, profile, model, reasoning, trailing, className, context, layout, menuPlacement, }: AgentSessionControlsProps): react_jsx_runtime.JSX.Element | null;
+declare function AgentSessionControls({ harness, profile, model, reasoning, filterModelsToHarness, trailing, className, context, layout, menuPlacement, }: AgentSessionControlsProps): react_jsx_runtime.JSX.Element | null;
 
 /** A staged attachment shown as a chip above the input. */
 interface ComposerFile {

package/dist/chat.js

@@ -17,7 +17,7 @@ import {
   modelProvider,
   snapHarnessToModel,
   snapModelToHarness
-} from "./chunk-V5JZOO3W.js";
+} from "./chunk-R72QYE2U.js";
 import "./chunk-HU4B2M4K.js";
 import "./chunk-SF6LPMMN.js";
 import "./chunk-EI44GEQ5.js";

package/dist/{chunk-WEYFEMIN.js → chunk-34F66QTV.js}

@@ -1,6 +1,17 @@
-import {
-  providerLabel
-} from "./chunk-7JLB7UZ3.js";
+// src/workflows/provider-label.ts
+var PROVIDER_LABELS = {
+  github: "GitHub",
+  gitlab: "GitLab",
+  slack: "Slack",
+  stripe: "Stripe",
+  notion: "Notion",
+  linear: "Linear",
+  discord: "Discord"
+};
+function providerLabel(provider) {
+  const key = provider.toLowerCase();
+  return PROVIDER_LABELS[key] ?? provider.charAt(0).toUpperCase() + provider.slice(1);
+}
 
 // src/workflows/model.ts
 import { parse as parseYaml } from "yaml";
@@ -293,5 +304,6 @@ function buildWorkflowGraph(yaml, options) {
 }
 
 export {
+  providerLabel,
   buildWorkflowGraph
 };

package/dist/{chunk-MKX3F55O.js → chunk-J36F6LD2.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-3J6FG3FJ.js";
 import {
   PortsList
-} from "./chunk-D7JJLG4L.js";
+} from "./chunk-OQZQFSWM.js";
 import {
   TerminalView
 } from "./chunk-VIREDUBF.js";

package/dist/{chunk-D7JJLG4L.js → chunk-OQZQFSWM.js}

@@ -589,12 +589,24 @@ function RailExpandable({
         onClick: onNavigate,
         ...item.prefetch !== void 0 ? { prefetch: item.prefetch } : {},
         className: cn(
-          "flex h-8 items-center gap-2 rounded-md px-2.5 text-[12px] transition-colors",
+          "flex h-8 min-w-0 items-center gap-2 rounded-md px-2.5 text-[12px] transition-colors",
           active ? "bg-[var(--accent-surface-strong)] font-medium text-[var(--accent-text)]" : "text-muted-foreground hover:bg-[var(--accent-surface-soft)] hover:text-foreground"
         ),
         children: [
           FIcon ? /* @__PURE__ */ jsx3(FIcon, { className: "h-4 w-4 shrink-0" }) : null,
-          /* @__PURE__ */ jsx3("span", { className: "truncate", children: item.label })
+          /* @__PURE__ */ jsx3(
+            "span",
+            {
+              className: cn("min-w-0 flex-1 truncate", item.isLoading && "shimmer-text"),
+              ...item.isLoading ? { role: "status", "aria-label": "Agent responding" } : {},
+              children: item.label
+            }
+          ),
+          item.isLoading ? /* @__PURE__ */ jsxs2("span", { className: "responding-ellipsis", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx3("span", {}),
+            /* @__PURE__ */ jsx3("span", {}),
+            /* @__PURE__ */ jsx3("span", {})
+          ] }) : null
         ]
       },
       item.id

package/dist/{chunk-V5JZOO3W.js → chunk-R72QYE2U.js}

@@ -28,6 +28,12 @@ import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import { Brain, ChevronDown, Sparkles } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var REASONING_LADDER = reasoningLadder;
+function clampReasoningLevel(value, available) {
+  if (value === "auto" || !available || available.includes(value)) {
+    return value;
+  }
+  return available.length ? available[available.length - 1] : "auto";
+}
 function ReasoningGlyph({ level }) {
   if (level === "auto") {
     return /* @__PURE__ */ jsx(Sparkles, { className: "h-3.5 w-3.5 text-muted-foreground" });
@@ -144,7 +150,11 @@ function ReasoningLevelPicker({
 }
 
 // src/chat/agent-session-controls.tsx
-import { reasoningEffortsFor } from "@tangle-network/agent-interface";
+import {
+  harnessHonorsEffort,
+  harnessHonorsModel,
+  reasoningEffortsFor
+} from "@tangle-network/agent-interface";
 import * as DropdownMenu2 from "@radix-ui/react-dropdown-menu";
 import { ChevronDown as ChevronDown3, Lock, SlidersHorizontal } from "lucide-react";
 
@@ -448,6 +458,14 @@ function ProfileForm({
 
 // src/chat/agent-session-controls.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function selectorIgnoreNote(harness) {
+  const ignoresModel = !harnessHonorsModel(harness);
+  const ignoresEffort = !harnessHonorsEffort(harness);
+  if (ignoresModel && ignoresEffort) return "Ignores model & effort";
+  if (ignoresModel) return "Ignores model selection";
+  if (ignoresEffort) return "Ignores reasoning effort";
+  return null;
+}
 function HarnessDropdown({
   value,
   onChange,
@@ -520,7 +538,8 @@ function HarnessDropdown({
               /* @__PURE__ */ jsx3(HarnessLogo, { type: option.type, size: 20, className: "mt-0.5" }),
               /* @__PURE__ */ jsxs3("span", { className: "flex min-w-0 flex-col gap-0.5", children: [
                 /* @__PURE__ */ jsx3("span", { className: "text-sm font-medium", children: option.label }),
-                option.description && /* @__PURE__ */ jsx3("span", { className: "text-xs text-muted-foreground", children: option.description })
+                option.description && /* @__PURE__ */ jsx3("span", { className: "text-xs text-muted-foreground", children: option.description }),
+                selectorIgnoreNote(option.type) && /* @__PURE__ */ jsx3("span", { className: "mt-0.5 inline-flex w-fit items-center rounded border border-[var(--md3-outline-variant)] px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: selectorIgnoreNote(option.type) })
               ] })
             ]
           },
@@ -530,11 +549,20 @@ function HarnessDropdown({
     ) })
   ] });
 }
+function modelReasoningCapability(models, canonicalId) {
+  if (!models || !canonicalId) return null;
+  const entry = models.find((m) => canonicalModelId(m) === canonicalId);
+  return entry ? {
+    supportsReasoning: entry.supportsReasoning,
+    maxEffort: entry.maxReasoningEffort
+  } : null;
+}
 function AgentSessionControls({
   harness,
   profile,
   model,
   reasoning,
+  filterModelsToHarness,
   trailing,
   className,
   context = "chat",
@@ -542,21 +570,45 @@ function AgentSessionControls({
   menuPlacement = "auto"
 }) {
   if (!harness && !profile && !model && !reasoning && !trailing) return null;
+  const restrictModelsToHarness = Boolean(
+    harness && (harness.locked || filterModelsToHarness)
+  );
+  const selectorHonorsModel = !harness || harnessHonorsModel(harness.value);
+  const selectorHonorsEffort = !harness || harnessHonorsEffort(harness.value);
+  const clampEffort = (harnessValue, modelId) => {
+    if (!reasoning) return;
+    const available = reasoningEffortsFor(
+      harnessValue,
+      modelReasoningCapability(model?.models, modelId)
+    );
+    const clamped = clampReasoningLevel(reasoning.value, available);
+    if (clamped !== reasoning.value) reasoning.onChange(clamped);
+  };
   const handleHarnessChange = (next) => {
     harness?.onChange(next);
+    let nextModelId = model?.value;
     if (model) {
       const snapped = snapModelToHarness(next, model.value, model.models);
-      if (snapped !== model.value) model.onChange(snapped);
+      if (snapped !== model.value) {
+        model.onChange(snapped);
+        nextModelId = snapped;
+      }
     }
+    clampEffort(next, nextModelId);
   };
   const handleModelChange = (nextModelId) => {
     model?.onChange(nextModelId);
-    if (harness && !harness.locked) {
+    let nextHarness = harness?.value;
+    if (harness && !restrictModelsToHarness) {
       const snapped = snapHarnessToModel(harness.value, nextModelId);
-      if (snapped !== harness.value) harness.onChange(snapped);
+      if (snapped !== harness.value) {
+        harness.onChange(snapped);
+        nextHarness = snapped;
+      }
     }
+    if (nextHarness) clampEffort(nextHarness, nextModelId);
   };
-  const visibleModels = model && harness?.locked ? model.models.filter(
+  const visibleModels = model && restrictModelsToHarness && harness ? model.models.filter(
     (entry) => isModelCompatibleWithHarness(
       harness.value,
       canonicalModelId(entry)
@@ -603,25 +655,19 @@ function AgentSessionControls({
       loading: model.loading,
       popular: model.popular,
       recents: model.recents,
-      disabled: model.disabled || (visibleModels ?? []).length === 0,
+      disabled: model.disabled || (visibleModels ?? []).length === 0 || !selectorHonorsModel,
       side: layout === "gear" ? void 0 : "bottom",
       avoidCollisions
     }
   );
-  const selectedModel = model?.models.find(
-    (entry) => canonicalModelId(entry) === model.value
-  );
-  const modelReasoning = selectedModel ? {
-    supportsReasoning: selectedModel.supportsReasoning,
-    maxEffort: selectedModel.maxReasoningEffort
-  } : null;
+  const modelReasoning = modelReasoningCapability(model?.models, model?.value);
   const reasoningNode = reasoning && /* @__PURE__ */ jsx3(
     ReasoningLevelPicker,
     {
       value: reasoning.value,
       onChange: reasoning.onChange,
       options: reasoning.options,
-      disabled: reasoning.disabled,
+      disabled: reasoning.disabled || !selectorHonorsEffort,
       available: harness ? reasoningEffortsFor(harness.value, modelReasoning) : reasoning.available,
       side: layout === "gear" ? void 0 : "bottom",
       avoidCollisions

package/dist/dashboard.d.ts

@@ -183,6 +183,8 @@ interface RailExpandableSubItem {
     }>;
     href: string;
     prefetch?: "none" | "intent" | "render" | "viewport";
+    /** Show a live working indicator on the row while the item is busy. */
+    isLoading?: boolean;
 }
 interface RailExpandableProps {
     icon: React.ComponentType<{

package/dist/dashboard.js

@@ -54,7 +54,7 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-D7JJLG4L.js";
+} from "./chunk-OQZQFSWM.js";
 import {
   BillingDashboard,
   InfoPanel,

package/dist/globals.css

@@ -542,6 +542,9 @@
   .mt-6 {
     margin-top: calc(var(--spacing) * 6);
   }
+  .mt-px {
+    margin-top: 1px;
+  }
   .mr-1 {
     margin-right: calc(var(--spacing) * 1);
   }
@@ -605,6 +608,9 @@
   .ml-2 {
     margin-left: calc(var(--spacing) * 2);
   }
+  .ml-2\.5 {
+    margin-left: calc(var(--spacing) * 2.5);
+  }
   .ml-10 {
     margin-left: calc(var(--spacing) * 10);
   }
@@ -756,9 +762,6 @@
   .h-56 {
     height: calc(var(--spacing) * 56);
   }
-  .h-64 {
-    height: calc(var(--spacing) * 64);
-  }
   .h-\[3px\] {
     height: 3px;
   }
@@ -789,9 +792,6 @@
   .h-\[640px\] {
     height: 640px;
   }
-  .h-\[720px\] {
-    height: 720px;
-  }
   .h-\[var\(--avatar-size\)\] {
     height: var(--avatar-size);
   }
@@ -1092,9 +1092,6 @@
   .w-\[420px\] {
     width: 420px;
   }
-  .w-\[460px\] {
-    width: 460px;
-  }
   .w-\[480px\] {
     width: 480px;
   }
@@ -1143,6 +1140,9 @@
   .w-\[var\(--tool-icon-size\)\] {
     width: var(--tool-icon-size);
   }
+  .w-fit {
+    width: fit-content;
+  }
   .w-full {
     width: 100%;
   }
@@ -1287,9 +1287,6 @@
   .flex-shrink-0 {
     flex-shrink: 0;
   }
-  .shrink {
-    flex-shrink: 1;
-  }
   .shrink-0 {
     flex-shrink: 0;
   }
@@ -1376,9 +1373,6 @@
   .cursor-default {
     cursor: default;
   }
-  .cursor-ew-resize {
-    cursor: ew-resize;
-  }
   .cursor-not-allowed {
     cursor: not-allowed;
   }
@@ -1909,6 +1903,12 @@
   .border-\[var\(--surface-danger-border\)\] {
     border-color: var(--surface-danger-border);
   }
+  .border-\[var\(--surface-danger-border\)\]\/60 {
+    border-color: var(--surface-danger-border);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--surface-danger-border) 60%, transparent);
+    }
+  }
   .border-\[var\(--surface-info-border\)\] {
     border-color: var(--surface-info-border);
   }
@@ -1963,12 +1963,6 @@
       border-color: color-mix(in oklab, var(--color-destructive) 30%, transparent);
     }
   }
-  .border-destructive\/40 {
-    border-color: color-mix(in srgb, hsl(var(--destructive)) 40%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
-    }
-  }
   .border-destructive\/50 {
     border-color: color-mix(in srgb, hsl(var(--destructive)) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2014,6 +2008,12 @@
       border-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
     }
   }
+  .border-primary\/15 {
+    border-color: color-mix(in srgb, hsl(var(--primary)) 15%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-primary) 15%, transparent);
+    }
+  }
   .border-primary\/20 {
     border-color: color-mix(in srgb, hsl(var(--primary)) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2026,12 +2026,6 @@
       border-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
     }
   }
-  .border-primary\/40 {
-    border-color: color-mix(in srgb, hsl(var(--primary)) 40%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
-    }
-  }
   .border-primary\/50 {
     border-color: color-mix(in srgb, hsl(var(--primary)) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2251,10 +2245,10 @@
   .bg-accent {
     background-color: var(--color-accent);
   }
-  .bg-accent\/30 {
-    background-color: color-mix(in srgb, hsl(var(--accent)) 30%, transparent);
+  .bg-accent\/20 {
+    background-color: color-mix(in srgb, hsl(var(--accent)) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-accent) 30%, transparent);
+      background-color: color-mix(in oklab, var(--color-accent) 20%, transparent);
     }
   }
   .bg-amber-500\/10 {
@@ -2320,6 +2314,12 @@
   .bg-card {
     background-color: var(--color-card);
   }
+  .bg-card\/40 {
+    background-color: color-mix(in srgb, hsl(var(--card)) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-card) 40%, transparent);
+    }
+  }
   .bg-card\/50 {
     background-color: color-mix(in srgb, hsl(var(--card)) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2818,15 +2818,9 @@
   .pb-1 {
     padding-bottom: calc(var(--spacing) * 1);
   }
-  .pb-1\.5 {
-    padding-bottom: calc(var(--spacing) * 1.5);
-  }
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
-  .pb-2\.5 {
-    padding-bottom: calc(var(--spacing) * 2.5);
-  }
   .pb-3 {
     padding-bottom: calc(var(--spacing) * 3);
   }
@@ -2845,8 +2839,8 @@
   .pl-3 {
     padding-left: calc(var(--spacing) * 3);
   }
-  .pl-4 {
-    padding-left: calc(var(--spacing) * 4);
+  .pl-3\.5 {
+    padding-left: calc(var(--spacing) * 3.5);
   }
   .pl-7 {
     padding-left: calc(var(--spacing) * 7);
@@ -3527,10 +3521,6 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-xl {
-    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
   .ring {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3750,13 +3740,6 @@
       }
     }
   }
-  .group-hover\:bg-primary {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        background-color: var(--color-primary);
-      }
-    }
-  }
   .group-hover\:text-primary {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -3799,11 +3782,6 @@
       }
     }
   }
-  .group-focus\:bg-primary {
-    &:is(:where(.group):focus *) {
-      background-color: var(--color-primary);
-    }
-  }
   .peer-disabled\:cursor-not-allowed {
     &:is(:where(.peer):disabled ~ *) {
       cursor: not-allowed;
@@ -4153,22 +4131,22 @@
       }
     }
   }
-  .hover\:bg-accent\/30 {
+  .hover\:bg-accent\/25 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in srgb, hsl(var(--accent)) 30%, transparent);
+        background-color: color-mix(in srgb, hsl(var(--accent)) 25%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-accent) 30%, transparent);
+          background-color: color-mix(in oklab, var(--color-accent) 25%, transparent);
         }
       }
     }
   }
-  .hover\:bg-accent\/35 {
+  .hover\:bg-accent\/30 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in srgb, hsl(var(--accent)) 35%, transparent);
+        background-color: color-mix(in srgb, hsl(var(--accent)) 30%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-accent) 35%, transparent);
+          background-color: color-mix(in oklab, var(--color-accent) 30%, transparent);
         }
       }
     }
@@ -4307,16 +4285,6 @@
       }
     }
   }
-  .hover\:bg-muted\/60 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, hsl(var(--muted)) 60%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-muted) 60%, transparent);
-        }
-      }
-    }
-  }
   .hover\:bg-muted\/80 {
     &:hover {
       @media (hover: hover) {
@@ -4896,15 +4864,6 @@
       opacity: 60%;
     }
   }
-  .disabled\:hover\:bg-transparent {
-    &:disabled {
-      &:hover {
-        @media (hover: hover) {
-          background-color: transparent;
-        }
-      }
-    }
-  }
   .data-\[disabled\]\:pointer-events-none {
     &[data-disabled] {
       pointer-events: none;
@@ -5444,11 +5403,6 @@
       }
     }
   }
-  .\[\@media\(hover\:none\)\]\:opacity-100 {
-    @media (hover:none) {
-      opacity: 100%;
-    }
-  }
 }
 :root,
 [data-sandbox-ui],
@@ -6057,6 +6011,56 @@
     background-size: 200% 100%;
     animation: shimmer 2s infinite;
   }
+  .shimmer-text {
+    background-image: linear-gradient(
+      90deg,
+      hsl(var(--muted-foreground)) 0%,
+      hsl(var(--muted-foreground)) 28%,
+      var(--accent-text) 50%,
+      hsl(var(--muted-foreground)) 72%,
+      hsl(var(--muted-foreground)) 100%
+    );
+    background-size: 200% 100%;
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: shimmer 1.3s linear infinite;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .shimmer-text {
+      animation: none;
+    }
+  }
+  .responding-ellipsis {
+    display: inline-flex;
+    width: 1.25rem;
+    margin-left: auto;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    gap: 0.1875rem;
+    color: hsl(var(--primary));
+  }
+  .responding-ellipsis > span {
+    width: 0.25rem;
+    height: 0.25rem;
+    border-radius: 9999px;
+    background: currentColor;
+    opacity: 0.6;
+    animation: responding-ellipsis 0.8s ease-in-out infinite;
+  }
+  .responding-ellipsis > span:nth-child(2) {
+    animation-delay: 0.15s;
+  }
+  .responding-ellipsis > span:nth-child(3) {
+    animation-delay: 0.3s;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .responding-ellipsis > span {
+      animation: none;
+      opacity: 0.8;
+    }
+  }
   .animate-in {
     animation: fade-in 0.25s ease-out;
   }
@@ -6091,6 +6095,16 @@
       background-position: 200% 0;
     }
   }
+  @keyframes responding-ellipsis {
+    0%, 80%, 100% {
+      opacity: 0.6;
+      transform: translateY(0);
+    }
+    40% {
+      opacity: 1;
+      transform: translateY(-1.5px);
+    }
+  }
   @keyframes fade-in {
     from {
       opacity: 0;