@genesislcap/ai-assistant 14.458.3 → 14.460.0

package/src/components/waves-indicator.ts

@@ -0,0 +1,221 @@
+import { avoidTreeShaking } from '@genesislcap/foundation-utils';
+import { attr, css, customElement, GenesisElement, html } from '@genesislcap/web-core';
+import {
+  AI_COLOUR_AMBER,
+  AI_COLOUR_CYAN,
+  AI_COLOUR_PINK,
+  AI_COLOUR_VIOLET,
+} from '../styles/ai-colours';
+import { AiHaloOverlay } from './halo-overlay';
+
+const WAVES_DEFAULT_SIZE = 56;
+/** CSS-ready form of `WAVES_DEFAULT_SIZE` (the `css` tag rejects raw numbers). */
+const WAVES_DEFAULT_SIZE_CSS = `${WAVES_DEFAULT_SIZE}px`;
+
+/** SVG coordinate space the waves are drawn in (square; the circle fills it). */
+const VIEWBOX = 120;
+const CENTRE = VIEWBOX / 2;
+/** Horizontal sampling step when tracing each wave path. Lower = smoother. */
+const SAMPLE_STEP = 6;
+
+/**
+ * Per-wave parameters. Each wave is a travelling sine (amplitude/frequency/phase)
+ * plus a slower, longer-wavelength term that makes the line "slosh" like liquid.
+ */
+interface WaveConfig {
+  colour: string;
+  /** Peak height of the travelling wave, in viewBox units. */
+  amplitude: number;
+  /** Angular frequency of the travelling wave (radians per viewBox unit). */
+  frequency: number;
+  /** How fast the travelling wave scrolls (radians per frame). */
+  phaseSpeed: number;
+  /** Vertical centre offset so the waves stack rather than overlap exactly. */
+  verticalOffset: number;
+  /** Amplitude of the slow sloshing term. */
+  slosh: number;
+  /** Angular frequency of the sloshing term (radians per viewBox unit). */
+  sloshFrequency: number;
+  /** How fast the sloshing term evolves (radians per frame). */
+  sloshSpeed: number;
+}
+
+const WAVES: WaveConfig[] = [
+  {
+    colour: AI_COLOUR_AMBER,
+    amplitude: 11,
+    frequency: 0.085,
+    phaseSpeed: 0.05,
+    verticalOffset: -6,
+    slosh: 6,
+    sloshFrequency: 0.018,
+    sloshSpeed: 0.021,
+  },
+  {
+    colour: AI_COLOUR_PINK,
+    amplitude: 14,
+    frequency: 0.07,
+    phaseSpeed: -0.043,
+    verticalOffset: -2,
+    slosh: 7,
+    sloshFrequency: 0.022,
+    sloshSpeed: -0.017,
+  },
+  {
+    colour: AI_COLOUR_CYAN,
+    amplitude: 13,
+    frequency: 0.095,
+    phaseSpeed: 0.037,
+    verticalOffset: 2,
+    slosh: 5,
+    sloshFrequency: 0.015,
+    sloshSpeed: 0.025,
+  },
+  {
+    colour: AI_COLOUR_VIOLET,
+    amplitude: 10,
+    frequency: 0.06,
+    phaseSpeed: -0.055,
+    verticalOffset: 6,
+    slosh: 8,
+    sloshFrequency: 0.025,
+    sloshSpeed: -0.013,
+  },
+];
+
+const wavePathsMarkup = WAVES.map(
+  (w, i) => `<path class="wave" data-wave="${i}" stroke="${w.colour}" />`,
+).join('');
+
+/**
+ * Animated "waves inside a circle" loading indicator — coloured sine waves that
+ * slosh like glowing liquid inside a circular window, ringed by a rotating
+ * gradient halo (the same effect as `<ai-halo-overlay>`).
+ *
+ * Visual sibling of the dots loading indicator; the two are interchangeable
+ * styles of the same "assistant is working" state.
+ *
+ * @example
+ * ```html
+ * <ai-waves-indicator size="56"></ai-waves-indicator>
+ * ```
+ *
+ * @beta
+ */
+@customElement({
+  name: 'ai-waves-indicator',
+  template: html<AiWavesIndicator>`
+    <div class="window" role="img" aria-label="Assistant is working">
+      <svg class="waves" viewBox="0 0 ${VIEWBOX} ${VIEWBOX}" preserveAspectRatio="none">
+        <defs>
+          <filter id="wave-glow" x="-20%" y="-20%" width="140%" height="140%">
+            <feGaussianBlur stdDeviation="1.6" result="blur" />
+            <feMerge>
+              <feMergeNode in="blur" />
+              <feMergeNode in="SourceGraphic" />
+            </feMerge>
+          </filter>
+        </defs>
+        <g filter="url(#wave-glow)">${wavePathsMarkup}</g>
+      </svg>
+      <ai-halo-overlay active border-size="2" glow-opacity="0.5" glow-spread="55"></ai-halo-overlay>
+    </div>
+  `,
+  styles: css`
+    :host {
+      display: inline-block;
+      width: var(--waves-size, ${WAVES_DEFAULT_SIZE_CSS});
+      height: var(--waves-size, ${WAVES_DEFAULT_SIZE_CSS});
+    }
+
+    .window {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      overflow: hidden;
+      background: radial-gradient(circle at 50% 32%, #2b3140 0%, #11141c 55%, #05070c 100%);
+    }
+
+    .waves {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+    }
+
+    .wave {
+      fill: none;
+      stroke-width: 2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+  `,
+})
+export class AiWavesIndicator extends GenesisElement {
+  /** Diameter of the circular window in px. Default: 56. */
+  @attr({ converter: { fromView: Number, toView: String } }) size: number = WAVES_DEFAULT_SIZE;
+
+  sizeChanged() {
+    this.style.setProperty('--waves-size', `${this.size}px`);
+  }
+
+  // A rAF loop drives the wave paths for the same reason `<ai-halo-overlay>`
+  // hand-drives its rotation: a pure-CSS approach can't produce per-frame sine
+  // geometry, and SMIL/`<animate>` can't express the combined travel + slosh.
+
+  private frame = 0;
+  private animFrame?: number;
+  private wavePaths?: SVGPathElement[];
+
+  connectedCallback() {
+    super.connectedCallback();
+    // Guard against a reconnect starting a second concurrent loop.
+    if (this.animFrame === undefined) {
+      this.tick();
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.animFrame !== undefined) {
+      cancelAnimationFrame(this.animFrame);
+      this.animFrame = undefined;
+    }
+  }
+
+  private tick() {
+    // Stop ticking once disconnected (belt-and-braces alongside the cancel in
+    // disconnectedCallback) so no frames are scheduled while detached.
+    if (!this.isConnected) {
+      this.animFrame = undefined;
+      return;
+    }
+    if (!this.wavePaths) {
+      const paths = this.shadowRoot?.querySelectorAll<SVGPathElement>('.wave');
+      if (paths?.length) this.wavePaths = Array.from(paths);
+    }
+    this.wavePaths?.forEach((path, i) => {
+      path.setAttribute('d', AiWavesIndicator.buildWavePath(WAVES[i], this.frame));
+    });
+    this.frame += 1;
+    this.animFrame = requestAnimationFrame(() => this.tick());
+  }
+
+  /** Trace one wave's polyline `d` attribute for the given frame. */
+  private static buildWavePath(cfg: WaveConfig, frame: number): string {
+    const segments: string[] = [];
+    for (let x = 0; x <= VIEWBOX; x += SAMPLE_STEP) {
+      const y =
+        CENTRE +
+        cfg.verticalOffset +
+        cfg.amplitude * Math.sin(x * cfg.frequency + frame * cfg.phaseSpeed) +
+        cfg.slosh * Math.sin(x * cfg.sloshFrequency + frame * cfg.sloshSpeed);
+      segments.push(`${x},${y.toFixed(2)}`);
+    }
+    return `M ${segments.join(' L ')}`;
+  }
+}
+
+// Ensure the halo overlay used for the ring is registered alongside this component.
+avoidTreeShaking(AiHaloOverlay);

package/src/main/main.styles.ts

@@ -101,14 +101,22 @@ export const styles = css`
     animation: settings-slide-out 0.2s ease-in forwards;
   }
 
-  rapid-multiselect::part(root) {
-    min-width: 80px;
-    width: 300%;
+  /* Collapsed control footprint stays compact (100px)... */
+  rapid-categorized-multiselect::part(root) {
+    min-width: 0;
+    width: 100px;
   }
 
-  rapid-multiselect::part(control),
-  .settings-panel > [part='download-button'] {
-    width: fit-content;
+  /* ...while the dropdown panel, being absolutely positioned, can be wider
+     (200px) without affecting the root's layout footprint. The control sits on
+     a different side of the settings panel depending on the container width
+     (see the layout rules below), so the dropdown must anchor to whichever side
+     keeps it inside the panel. Default (narrow) layout puts the control on the
+     LEFT, so the dropdown grows rightward. */
+  rapid-categorized-multiselect::part(options) {
+    width: 200px;
+    left: 0;
+    right: auto;
   }
 
   .settings-panel > [part='toggle-tool-calls'] {
@@ -127,6 +135,7 @@ export const styles = css`
   }
 
   .settings-panel > [part='download-button'] {
+    width: fit-content;
     grid-column: 2;
     grid-row: 2;
   }
@@ -176,6 +185,13 @@ export const styles = css`
     .settings-panel > .settings-animations {
       grid-row: 2;
     }
+
+    /* Control now sits on the RIGHT (justify-self: end / margin-left: auto in
+       the wider layouts), so the dropdown grows leftward to stay in the panel. */
+    rapid-categorized-multiselect::part(options) {
+      left: auto;
+      right: 0;
+    }
   }
 
   @container (min-width: 750px) {
@@ -417,6 +433,13 @@ export const styles = css`
     animation: slide-in-left 0.25s ease-out;
   }
 
+  /* A 'bubble' interaction reads like a normal assistant message: avatar to the
+     left, bubble to the right — not the full-width column the other interaction
+     presentations use. */
+  .message-row.interaction.present-bubble {
+    flex-direction: row;
+  }
+
   .avatar {
     position: relative;
     width: 32px;
@@ -525,7 +548,10 @@ export const styles = css`
     border: 1px solid color-mix(in srgb, var(--ai-function-color, #86efac) 20%, transparent);
   }
 
-  .message.interaction {
+  /* 'label' (default) and 'bare' interactions render the widget chrome-free and
+     full-width — the widget owns its body. */
+  .message-row.interaction.present-label .message,
+  .message-row.interaction.present-bare .message {
     background: none;
     border: none;
     padding: 0;
@@ -533,6 +559,17 @@ export const styles = css`
     width: 100%;
   }
 
+  /* 'bubble' interactions reuse the standard assistant-message skin so the
+     widget sits inside a normal chat bubble. Padding, max-width and min-width
+     come from the base .message rule. */
+  .message-row.interaction.present-bubble .message {
+    background: linear-gradient(135deg, var(--neutral-layer-3) 0%, var(--neutral-layer-4) 100%);
+    color: var(--neutral-foreground-rest);
+    border-radius: 4px 18px 18px;
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest);
+    box-shadow: var(--ai-message-shadow, 0 2px 8px rgb(0 0 0 / 15%));
+  }
+
   .sender {
     font-weight: bold;
     font-size: 0.9em;
@@ -809,6 +846,24 @@ export const styles = css`
     }
   }
 
+  .thinking-waves,
+  .thinking-flowing-waves,
+  .thinking-plasma {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    align-self: center;
+    gap: 6px;
+    padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 3px);
+  }
+
+  .thinking-caption {
+    font-size: var(--type-ramp-minus-1-font-size, 12px);
+    line-height: var(--type-ramp-minus-1-line-height, 16px);
+    color: var(--neutral-foreground-rest);
+    opacity: 70%;
+  }
+
   .attachment-chips {
     display: flex;
     flex-wrap: wrap;

package/src/main/main.template.ts

@@ -20,11 +20,12 @@ import type {
   ChatAttachment,
   ChatMessage,
   ChatToolCall,
+  InteractionPresentation,
 } from '@genesislcap/foundation-ai';
 import { isChatToolCallUnknown } from '@genesislcap/foundation-ai';
 import { classNames, html, ref, repeat, when, ViewTemplate } from '@genesislcap/web-core';
 import type { FoundationAiAssistant } from './main';
-import { ANIMATION_DEFS } from './main.types';
+import { ANIMATION_DEFS, LOADING_STYLE_ANIMATIONS } from './main.types';
 
 function unknownToolPayload(tc: ChatToolCall): string {
   if (!isChatToolCallUnknown(tc)) return '';
@@ -40,10 +41,6 @@ function unknownToolPayload(tc: ChatToolCall): string {
   return lines.join('\n');
 }
 
-const animationItemRenderer = (option: any): ViewTemplate => html`
-  <span part="option-label" title="${() => option.tooltip}">${() => option.label}</span>
-`;
-
 const HALO_SPEED_DEFAULT = 1.5;
 const HALO_SPEED_ORCHESTRATING = 0.4;
 const HALO_BORDER_SIZE_DEFAULT = 3;
@@ -52,9 +49,10 @@ const HALO_BORDER_SIZE_DEFAULT = 3;
 const SESSION_COST_DECIMALS = 4;
 
 const animationOptions = Object.entries(ANIMATION_DEFS).map(([value, def]) => ({
+  type: def.category,
   value,
   label: def.label,
-  tooltip: def.tooltip,
+  description: def.description,
 }));
 
 // Avatar markup is owned by the component (`assistantIconSafe` / `userIconSafe`),
@@ -120,6 +118,14 @@ const senderLabel: Record<string, string> = {
   ai: 'Assistant',
 };
 
+/**
+ * Resolves how the host frames an interaction widget, defaulting to `'label'`
+ * (the historical "Assistant" label, no bubble). Callers guard on
+ * `m.interaction` first; non-interaction messages never consult this.
+ */
+const interactionPresentation = (m: ChatMessage): InteractionPresentation =>
+  m.interaction?.presentation ?? 'label';
+
 // ─── Sub-agent trace fragments ────────────────────────────────────────────────
 
 const subAgentAssistantTemplate = html<ChatMessage>`
@@ -176,6 +182,57 @@ const liveSubAgentTraceTemplate = html<FoundationAiAssistant>`
   </div>
 `;
 
+// The interchangeable loading indicators. These MUST be stable module-level
+// instances: the binding that selects between them reads `enabledAnimations`,
+// which is backed by the redux store proxy and re-evaluates on every change to
+// the aiAssistant slice (i.e. every new message, including hidden tool-call and
+// thinking-step messages). Returning a fresh `html` instance from that binding
+// would make FAST tear down and rebuild the indicator DOM each time, restarting
+// the CSS animations and rAF loops. Stable references let FAST reuse the
+// existing view so the animation runs uninterrupted.
+const thinkingDotsTemplate = html<FoundationAiAssistant>`
+  <div class="thinking-dots">
+    <div class="dot dot-1"></div>
+    <div class="dot dot-2"></div>
+    <div class="dot dot-3"></div>
+    <div class="dot dot-4"></div>
+  </div>
+`;
+
+const thinkingWavesTemplate = html<FoundationAiAssistant>`
+  <div class="thinking-waves" part="thinking-waves">
+    <ai-waves-indicator></ai-waves-indicator>
+    <span class="thinking-caption">Thinking...</span>
+  </div>
+`;
+
+const thinkingFlowingWavesTemplate = html<FoundationAiAssistant>`
+  <div class="thinking-flowing-waves" part="thinking-flowing-waves">
+    <ai-flowing-waves-indicator></ai-flowing-waves-indicator>
+    <span class="thinking-caption">Thinking...</span>
+  </div>
+`;
+
+const thinkingPlasmaTemplate = html<FoundationAiAssistant>`
+  <div class="thinking-plasma" part="thinking-plasma">
+    <ai-plasma-orb-indicator></ai-plasma-orb-indicator>
+    <span class="thinking-caption">Thinking...</span>
+  </div>
+`;
+
+/**
+ * Picks the loading indicator for the currently enabled style, falling back to
+ * the dots (also the default when no animations config is supplied). Returns a
+ * stable template instance per style — see the note above.
+ */
+const selectThinkingTemplate = (x: FoundationAiAssistant): ViewTemplate<FoundationAiAssistant> => {
+  const enabled = x.enabledAnimations;
+  if (enabled.includes('waves')) return thinkingWavesTemplate;
+  if (enabled.includes('flowingWaves')) return thinkingFlowingWavesTemplate;
+  if (enabled.includes('plasma')) return thinkingPlasmaTemplate;
+  return thinkingDotsTemplate;
+};
+
 // ─── Public factory ───────────────────────────────────────────────────────────
 
 /** @internal */
@@ -184,7 +241,7 @@ export const FoundationAiAssistantTemplate = (
 ): ViewTemplate<FoundationAiAssistant> => {
   const buttonTag = `${designSystemPrefix}-button`;
   const switchTag = `${designSystemPrefix}-switch`;
-  const multiselectTag = `${designSystemPrefix}-multiselect`;
+  const categorizedMultiselectTag = `${designSystemPrefix}-categorized-multiselect`;
   const textareaTag = `${designSystemPrefix}-text-area`;
   const iconTag = `${designSystemPrefix}-icon`;
   const progressTag = `${designSystemPrefix}-progress`;
@@ -236,7 +293,10 @@ ${(tc) => (tc.foldPath?.length ? `${tc.foldPath.join(' › ')} › ` : '')}<stro
     ${when(
       (m) => m.role !== 'system-event',
       html<ChatMessage, FoundationAiAssistant>`
-        <div class="message-row ${(m) => messageType(m)}">
+        <div
+          class="message-row ${(m) => messageType(m)} ${(m) =>
+            m.interaction ? `present-${interactionPresentation(m)}` : ''}"
+        >
           <div class="avatar ${(m) => messageType(m)}">
             ${when(
               // Keyed on messageType (not raw role) so a synthetic-user message,
@@ -247,14 +307,21 @@ ${(tc) => (tc.foldPath?.length ? `${tc.foldPath.join(' › ')} › ` : '')}<stro
             )}${when((m) => messageType(m) !== 'user', assistantAvatarTemplate)}
           </div>
           <div class="message ${(m) => messageType(m)}">
-            <div class="sender">
-              ${(m, c) =>
-                messageType(m) === 'ai-function' &&
-                m.agentName &&
-                (c.parent as FoundationAiAssistant).showAgentSwitchIndicator
-                  ? `Tool Call · ${m.agentLabel ?? m.agentName}`
-                  : senderLabel[messageType(m)]}
-            </div>
+            ${when(
+              // A 'bare' interaction owns its full presentation — suppress the
+              // host sender label. Every other message keeps it.
+              (m) => !(m.interaction && interactionPresentation(m) === 'bare'),
+              html<ChatMessage, FoundationAiAssistant>`
+                <div class="sender">
+                  ${(m, c) =>
+                    messageType(m) === 'ai-function' &&
+                    m.agentName &&
+                    (c.parent as FoundationAiAssistant).showAgentSwitchIndicator
+                      ? `Tool Call · ${m.agentLabel ?? m.agentName}`
+                      : senderLabel[messageType(m)]}
+                </div>
+              `,
+            )}
             <div class="content">
               ${when(
                 (m) => m.content,
@@ -473,16 +540,14 @@ ${(tc) => (tc.foldPath?.length ? `${tc.foldPath.join(' › ')} › ` : '')}<stro
                   html<FoundationAiAssistant>`
                     <div class="settings-animations">
                       <span class="settings-label">Animations</span>
-                      <${multiselectTag}
+                      <${categorizedMultiselectTag}
                         part="toggle-animations"
                         :selectedOptions=${(x) => x.enabledAnimations}
                         :options=${() => animationOptions}
-                        :itemRenderer=${() => animationItemRenderer}
                         @selectionChange=${(x, c) =>
                           x.setEnabledAnimations((c.event as CustomEvent).detail)}
                         search="false"
-                        all="false"
-                      ></${multiselectTag}>
+                      ></${categorizedMultiselectTag}>
                     </div>
                   `,
                 )}
@@ -590,7 +655,8 @@ ${(tc) => (tc.foldPath?.length ? `${tc.foldPath.join(' › ')} › ` : '')}<stro
         ${when(
           (x) =>
             x.showLoadingIndicator &&
-            (x.chatConfig.ui?.animations == null || x.enabledAnimations.includes('loading')),
+            (x.chatConfig.ui?.animations == null ||
+              LOADING_STYLE_ANIMATIONS.some((s) => x.enabledAnimations.includes(s))),
           html<FoundationAiAssistant>`
             <div class="message-row ai" part="thinking">
               <div class="avatar">
@@ -603,12 +669,7 @@ ${(tc) => (tc.foldPath?.length ? `${tc.foldPath.join(' › ')} › ` : '')}<stro
                         <span class="avatar-icon" :innerHTML="${() => x.assistantIconSafe}"></span>
                       `}
               </div>
-              <div class="thinking-dots">
-                <div class="dot dot-1"></div>
-                <div class="dot dot-2"></div>
-                <div class="dot dot-3"></div>
-                <div class="dot dot-4"></div>
-              </div>
+              ${(x) => selectThinkingTemplate(x)}
             </div>
           `,
         )}

package/src/main/main.ts

@@ -47,8 +47,11 @@ import { AiChatBubble } from '../components/chat-bubble/chat-bubble';
 import { ChatDriver } from '../components/chat-driver/chat-driver';
 import { AiChatInteractionWrapper } from '../components/chat-interaction-wrapper/chat-interaction-wrapper';
 import { AiChatMarkdown } from '../components/chat-markdown/chat-markdown';
+import { AiFlowingWavesIndicator } from '../components/flowing-waves-indicator';
 import { AiHaloOverlay } from '../components/halo-overlay';
 import { OrchestratingDriver } from '../components/orchestrating-driver/orchestrating-driver';
+import { AiPlasmaOrbIndicator } from '../components/plasma-orb-indicator';
+import { AiWavesIndicator } from '../components/waves-indicator';
 import type { AgentConfig } from '../config/config';
 import {
   recordMetaEvent,
@@ -66,6 +69,7 @@ import {
 } from '../styles/ai-colours';
 import { ChatSuggestions } from '../suggestions/chat-suggestions';
 import { AnimatedPanelToggle } from '../utils/animated-panel-toggle';
+import { resolveExclusiveLoadingStyle } from '../utils/animation-exclusivity';
 import { logger } from '../utils/logger';
 import { filterVisibleMessages, trailingInteractionRow } from '../utils/message-partition';
 import { sumCosts } from '../utils/sum-costs';
@@ -80,7 +84,7 @@ import type {
   SubmitMessageResult,
   SuggestionsState,
 } from './main.types';
-import { ALL_ANIMATIONS } from './main.types';
+import { DEFAULT_ANIMATIONS } from './main.types';
 
 /** Context window sizes (in tokens) for known models. */
 /**
@@ -137,6 +141,9 @@ avoidTreeShaking(
   AiChatMarkdown,
   AiChatInteractionWrapper,
   AiHaloOverlay,
+  AiWavesIndicator,
+  AiFlowingWavesIndicator,
+  AiPlasmaOrbIndicator,
   AiChatBubble,
   AiActivityHalo,
   ChatSuggestions,
@@ -656,7 +663,9 @@ export class FoundationAiAssistant extends GenesisElement {
       return;
     }
     const last = this.messages[this.messages.length - 1];
-    if (last?.interaction) {
+    // Hide only while a pending interaction blocks on the user; a resolved
+    // interaction means the assistant is computing again (keep the halo).
+    if (last?.interaction && !last.interaction.resolved) {
       this.showHalo = 'no';
     } else if (this.showHalo !== 'orchestrating') {
       this.showHalo = 'agent';
@@ -1047,9 +1056,10 @@ export class FoundationAiAssistant extends GenesisElement {
       this.showToolCalls = ui.showToolCalls === true;
       this.showThinkingSteps = ui.showThinkingSteps === true;
       this.showAgentSwitchIndicator = ui.showAgentSwitchIndicator === true;
-      this.enabledAnimations =
+      this.enabledAnimations = resolveExclusiveLoadingStyle(
         (ui.animations?.enabled as AiAssistantAnimation[]) ??
-        (ui.animations ? [...ALL_ANIMATIONS] : []);
+          (ui.animations ? [...DEFAULT_ANIMATIONS] : []),
+      );
 
       const defaultAgent = this.chatConfig.picker?.defaultAgent;
       if (defaultAgent && (this.agents ?? []).some((a) => a.name === defaultAgent)) {
@@ -1216,9 +1226,13 @@ export class FoundationAiAssistant extends GenesisElement {
     // waiting for the user, not computing.
     if (this.busy) {
       const last = this.messages[this.messages.length - 1];
-      if (last?.interaction) {
+      // Only a *pending* interaction means the assistant is blocked waiting on
+      // the user. Once it's resolved — or for any normal step — the assistant is
+      // computing again, so the indicator should resume (e.g. while it works out
+      // the next planning question after the user answers a widget).
+      if (last?.interaction && !last.interaction.resolved) {
         this.stopLoadingTimer();
-      } else if (last?.role === 'assistant') {
+      } else {
         this.startLoadingTimer();
       }
     }
@@ -1302,7 +1316,7 @@ export class FoundationAiAssistant extends GenesisElement {
     });
   }
 
-  private static readonly DEFAULT_LOADING_DELAY_S = 5;
+  private static readonly DEFAULT_LOADING_DELAY_S = 0;
   private static readonly DEFAULT_SUGGESTION_COUNT = 3;
   private static readonly MS_PER_SECOND = 1000;
 
@@ -1506,7 +1520,9 @@ export class FoundationAiAssistant extends GenesisElement {
   }
 
   setEnabledAnimations(animations: AiAssistantAnimation[]) {
-    this.enabledAnimations = animations;
+    // The dots and waves loading styles are mutually exclusive — enabling one
+    // disables the other (see resolveExclusiveLoadingStyle).
+    this.enabledAnimations = resolveExclusiveLoadingStyle(animations, this.enabledAnimations);
   }
 
   getDebugLog() {