@genesislcap/ai-assistant 14.458.0 → 14.458.1-GENC-0.2

package/dist/esm/main/main.styles.js

@@ -95,14 +95,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'] {
@@ -121,6 +129,7 @@ export const styles = css `
   }
 
   .settings-panel > [part='download-button'] {
+    width: fit-content;
     grid-column: 2;
     grid-row: 2;
   }
@@ -170,6 +179,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) {
@@ -803,6 +819,22 @@ export const styles = css `
     }
   }
 
+  .thinking-waves {
+    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/dist/esm/main/main.template.js

@@ -31,18 +31,16 @@ function unknownToolPayload(tc) {
     }
     return lines.join('\n');
 }
-const animationItemRenderer = (option) => 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;
 /** Decimal places shown for the running session cost (USD). 4 ≈ $0.0001 resolution. */
 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`),
 // which holds the sanitized SVG string for the default or any consumer override
@@ -141,7 +139,7 @@ const liveSubAgentTraceTemplate = html `
 export const FoundationAiAssistantTemplate = (designSystemPrefix) => {
     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`;
@@ -356,15 +354,13 @@ ${(tc) => { var _a; return (((_a = tc.foldPath) === null || _a === void 0 ? void
                 ${when((x) => { var _a, _b; return ((_b = (_a = x.chatConfig.ui) === null || _a === void 0 ? void 0 : _a.animations) === null || _b === void 0 ? void 0 : _b.userConfigurable) === true; }, html `
                     <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.detail)}
                         search="false"
-                        all="false"
-                      ></${multiselectTag}>
+                      ></${categorizedMultiselectTag}>
                     </div>
                   `)}
               </div>
@@ -453,7 +449,9 @@ ${(tc) => { var _a; return (((_a = tc.foldPath) === null || _a === void 0 ? void
         ${when((x) => {
         var _a;
         return x.showLoadingIndicator &&
-            (((_a = x.chatConfig.ui) === null || _a === void 0 ? void 0 : _a.animations) == null || x.enabledAnimations.includes('loading'));
+            (((_a = x.chatConfig.ui) === null || _a === void 0 ? void 0 : _a.animations) == null ||
+                x.enabledAnimations.includes('loading') ||
+                x.enabledAnimations.includes('waves'));
     }, html `
             <div class="message-row ai" part="thinking">
               <div class="avatar">
@@ -465,12 +463,21 @@ ${(tc) => { var _a; return (((_a = tc.foldPath) === null || _a === void 0 ? void
                         <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) => x.enabledAnimations.includes('waves')
+        ? html `
+                      <div class="thinking-waves" part="thinking-waves">
+                        <ai-waves-indicator></ai-waves-indicator>
+                        <span class="thinking-caption">Thinking...</span>
+                      </div>
+                    `
+        : html `
+                      <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>
+                    `}
             </div>
           `)}
       </div>

package/dist/esm/main/main.types.js

@@ -2,16 +2,29 @@
  * Registry of all available animations with their display metadata.
  * Adding an entry here automatically extends the {@link AiAssistantAnimation} type.
  *
+ * @remarks
+ * `loading` (dots) and `waves` are two interchangeable styles of the same
+ * "is the assistant working" indicator and are therefore grouped under the same
+ * {@link AiAssistantAnimationDef.category}. They are mutually exclusive — see
+ * `LOADING_STYLE_ANIMATIONS`.
+ *
  * @beta
  */
 export const ANIMATION_DEFS = {
     loading: {
-        label: 'Loading indicator',
-        tooltip: 'Shows a pulsing animation while the assistant is generating a response.',
+        label: 'Dots',
+        description: 'Shows pulsing dots while the assistant is generating a response.',
+        category: 'Loading style',
+    },
+    waves: {
+        label: 'Waves',
+        description: 'Shows glowing sine waves inside a circle while the assistant is generating a response.',
+        category: 'Loading style',
     },
     halo: {
         label: 'Halo',
-        tooltip: 'Displays a glowing halo around the assistant avatar while a response is streaming.',
+        description: 'Displays a glowing halo around the assistant avatar while a response is streaming.',
+        category: 'Effects',
     },
 };
 /**
@@ -20,3 +33,21 @@ export const ANIMATION_DEFS = {
  * @internal
  */
 export const ALL_ANIMATIONS = Object.keys(ANIMATION_DEFS);
+/**
+ * The interchangeable "assistant is working" loading-indicator styles. At most
+ * one of these may be enabled at a time — enabling one disables the other.
+ *
+ * @internal
+ */
+export const LOADING_STYLE_ANIMATIONS = [
+    'loading',
+    'waves',
+];
+/**
+ * Animations enabled by default when a consumer opts into the animations
+ * feature without specifying an explicit `enabled` list. Keeps the dots loading
+ * style (the long-standing default); the waves style is opt-in.
+ *
+ * @internal
+ */
+export const DEFAULT_ANIMATIONS = ['loading', 'halo'];

package/dist/esm/utils/animation-exclusivity.js

@@ -0,0 +1,33 @@
+import { LOADING_STYLE_ANIMATIONS } from '../main/main.types';
+/**
+ * Enforces that at most one loading-indicator style (dots vs. waves) is enabled
+ * at a time. The two are alternative presentations of the same "assistant is
+ * working" state, so selecting one must deselect the other.
+ *
+ * The settings control is a multiselect (checkboxes), which permits selecting
+ * both; this resolver makes the loading-style group behave like a radio group
+ * by dropping the previously-selected style whenever a new one is added.
+ *
+ * @param next - The freshly-selected animation list (e.g. emitted by the
+ *   multiselect, or read from consumer config).
+ * @param previous - The animation list in effect before this change. Used to
+ *   work out which loading style was just added so the other can be dropped.
+ *   Pass `[]` when resolving an initial/config value with no prior state.
+ * @returns `next` with at most one loading style retained. When both are
+ *   present and neither is newly added (e.g. a misconfigured `enabled` list),
+ *   the first entry of `LOADING_STYLE_ANIMATIONS` (dots) wins.
+ *
+ * @internal
+ */
+export function resolveExclusiveLoadingStyle(next, previous = []) {
+    var _a;
+    const selectedStyles = LOADING_STYLE_ANIMATIONS.filter((style) => next.includes(style));
+    if (selectedStyles.length <= 1) {
+        return next;
+    }
+    // Both styles selected — keep whichever was just added (absent from
+    // `previous`); fall back to the first declared style on ambiguity.
+    const justAdded = (_a = selectedStyles.find((style) => !previous.includes(style))) !== null && _a !== void 0 ? _a : selectedStyles[0];
+    return next.filter((animation) => animation === justAdded ||
+        !LOADING_STYLE_ANIMATIONS.includes(animation));
+}

package/dist/esm/utils/animation-exclusivity.test.js

@@ -0,0 +1,41 @@
+import { assert, createLogicSuite } from '@genesislcap/foundation-testing';
+import { resolveExclusiveLoadingStyle } from './animation-exclusivity';
+const suite = createLogicSuite('resolveExclusiveLoadingStyle');
+suite('leaves a selection with only the dots loading style untouched', () => {
+    const next = ['loading', 'halo'];
+    assert.equal(resolveExclusiveLoadingStyle(next, ['halo']), ['loading', 'halo']);
+});
+suite('leaves a selection with only the waves loading style untouched', () => {
+    const next = ['waves', 'halo'];
+    assert.equal(resolveExclusiveLoadingStyle(next, ['halo']), ['waves', 'halo']);
+});
+suite('leaves a selection with no loading style untouched', () => {
+    assert.equal(resolveExclusiveLoadingStyle(['halo'], []), ['halo']);
+});
+suite('drops dots when waves was just added on top of dots', () => {
+    // Previously dots was on; user ticks waves → waves wins, dots removed.
+    const result = resolveExclusiveLoadingStyle(['loading', 'waves', 'halo'], ['loading', 'halo']);
+    assert.equal(result, ['waves', 'halo']);
+});
+suite('drops waves when dots was just added on top of waves', () => {
+    // Previously waves was on; user ticks dots → dots wins, waves removed.
+    const result = resolveExclusiveLoadingStyle(['loading', 'waves', 'halo'], ['waves', 'halo']);
+    assert.equal(result, ['loading', 'halo']);
+});
+suite('preserves the order of the surviving selection', () => {
+    const result = resolveExclusiveLoadingStyle(['halo', 'loading', 'waves'], ['halo', 'loading']);
+    // waves was just added → loading dropped; halo and waves keep their order.
+    assert.equal(result, ['halo', 'waves']);
+});
+suite('falls back to dots when both are present with no prior state (e.g. bad config)', () => {
+    const result = resolveExclusiveLoadingStyle(['loading', 'waves', 'halo'], []);
+    assert.equal(result, ['loading', 'halo']);
+});
+suite('falls back to dots when both were already present (neither newly added)', () => {
+    const result = resolveExclusiveLoadingStyle(['loading', 'waves'], ['loading', 'waves', 'halo']);
+    assert.equal(result, ['loading']);
+});
+suite('handles an empty selection', () => {
+    assert.equal(resolveExclusiveLoadingStyle([], ['loading']), []);
+});
+suite.run();

package/dist/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/index.ts","../src/channel/ai-activity-bus.ts","../src/channel/ai-activity-channel.ts","../src/components/halo-overlay.ts","../src/components/activity-halo/activity-halo.ts","../src/components/agent-picker/agent-picker.constants.ts","../src/components/agent-picker/agent-picker.styles.ts","../src/components/agent-picker/agent-picker.template.ts","../src/components/agent-picker/agent-picker.ts","../src/components/agent-picker/index.ts","../src/components/ai-driver/ai-driver.ts","../src/components/ai-driver/index.ts","../src/components/chat-bubble/chat-bubble.styles.ts","../src/components/chat-bubble/chat-bubble.template.ts","../src/components/chat-bubble/chat-bubble.ts","../src/components/chat-bubble/index.ts","../src/components/chat-driver/align-event-globals.ts","../src/components/chat-driver/chat-driver.test.ts","../src/components/chat-driver/chat-driver.ts","../src/components/chat-driver/index.ts","../src/components/chat-interaction-wrapper/chat-interaction-wrapper.styles.ts","../src/components/chat-interaction-wrapper/chat-interaction-wrapper.template.ts","../src/components/chat-interaction-wrapper/chat-interaction-wrapper.test.ts","../src/components/chat-interaction-wrapper/chat-interaction-wrapper.ts","../src/components/chat-interaction-wrapper/index.ts","../src/components/chat-markdown/chat-markdown.ts","../src/components/chat-markdown/index.ts","../src/components/orchestrating-driver/index.ts","../src/components/orchestrating-driver/orchestrating-driver.ts","../src/components/popout-manager/index.ts","../src/components/popout-manager/popout-manager.ts","../src/config/config.ts","../src/config/define-stateful-agent.ts","../src/config/fallback-agents.ts","../src/config/index.ts","../src/config/validate-providers.test.ts","../src/config/validate-providers.ts","../src/main/index.ts","../src/main/main.styles.ts","../src/main/main.template.ts","../src/main/main.ts","../src/main/main.types.ts","../src/state/ai-assistant-slice.ts","../src/state/debug-event-log.ts","../src/state/driver-registry.ts","../src/state/session-store.ts","../src/styles/ai-colours.ts","../src/styles/index.ts","../src/styles/styles.ts","../src/suggestions/chat-suggestions.ts","../src/tags/index.ts","../src/types/ai-chat-widget.ts","../src/utils/animated-panel-toggle.ts","../src/utils/history-transform.ts","../src/utils/index.ts","../src/utils/logger.ts","../src/utils/message-partition.test.ts","../src/utils/message-partition.ts","../src/utils/sum-costs.test.ts","../src/utils/sum-costs.ts","../src/utils/tool-fold.ts"],"version":"5.9.2"}
+{"root":["../src/index.ts","../src/channel/ai-activity-bus.ts","../src/channel/ai-activity-channel.ts","../src/components/halo-overlay.ts","../src/components/waves-indicator.ts","../src/components/activity-halo/activity-halo.ts","../src/components/agent-picker/agent-picker.constants.ts","../src/components/agent-picker/agent-picker.styles.ts","../src/components/agent-picker/agent-picker.template.ts","../src/components/agent-picker/agent-picker.ts","../src/components/agent-picker/index.ts","../src/components/ai-driver/ai-driver.ts","../src/components/ai-driver/index.ts","../src/components/chat-bubble/chat-bubble.styles.ts","../src/components/chat-bubble/chat-bubble.template.ts","../src/components/chat-bubble/chat-bubble.ts","../src/components/chat-bubble/index.ts","../src/components/chat-driver/align-event-globals.ts","../src/components/chat-driver/chat-driver.test.ts","../src/components/chat-driver/chat-driver.ts","../src/components/chat-driver/index.ts","../src/components/chat-interaction-wrapper/chat-interaction-wrapper.styles.ts","../src/components/chat-interaction-wrapper/chat-interaction-wrapper.template.ts","../src/components/chat-interaction-wrapper/chat-interaction-wrapper.test.ts","../src/components/chat-interaction-wrapper/chat-interaction-wrapper.ts","../src/components/chat-interaction-wrapper/index.ts","../src/components/chat-markdown/chat-markdown.ts","../src/components/chat-markdown/index.ts","../src/components/orchestrating-driver/index.ts","../src/components/orchestrating-driver/orchestrating-driver.ts","../src/components/popout-manager/index.ts","../src/components/popout-manager/popout-manager.ts","../src/config/config.ts","../src/config/define-stateful-agent.ts","../src/config/fallback-agents.ts","../src/config/index.ts","../src/config/validate-providers.test.ts","../src/config/validate-providers.ts","../src/main/index.ts","../src/main/main.styles.ts","../src/main/main.template.ts","../src/main/main.ts","../src/main/main.types.ts","../src/state/ai-assistant-slice.ts","../src/state/debug-event-log.ts","../src/state/driver-registry.ts","../src/state/session-store.ts","../src/styles/ai-colours.ts","../src/styles/index.ts","../src/styles/styles.ts","../src/suggestions/chat-suggestions.ts","../src/tags/index.ts","../src/types/ai-chat-widget.ts","../src/utils/animated-panel-toggle.ts","../src/utils/animation-exclusivity.test.ts","../src/utils/animation-exclusivity.ts","../src/utils/history-transform.ts","../src/utils/index.ts","../src/utils/logger.ts","../src/utils/message-partition.test.ts","../src/utils/message-partition.ts","../src/utils/sum-costs.test.ts","../src/utils/sum-costs.ts","../src/utils/tool-fold.ts"],"version":"5.9.2"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/ai-assistant",
   "description": "Genesis AI Assistant micro-frontend",
-  "version": "14.458.0",
+  "version": "14.458.1-GENC-0.2",
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
   "types": "dist/ai-assistant.d.ts",
@@ -64,24 +64,24 @@
     }
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.458.0",
-    "@genesislcap/genx": "14.458.0",
-    "@genesislcap/rollup-builder": "14.458.0",
-    "@genesislcap/ts-builder": "14.458.0",
-    "@genesislcap/uvu-playwright-builder": "14.458.0",
-    "@genesislcap/vite-builder": "14.458.0",
-    "@genesislcap/webpack-builder": "14.458.0",
+    "@genesislcap/foundation-testing": "14.458.1-GENC-0.2",
+    "@genesislcap/genx": "14.458.1-GENC-0.2",
+    "@genesislcap/rollup-builder": "14.458.1-GENC-0.2",
+    "@genesislcap/ts-builder": "14.458.1-GENC-0.2",
+    "@genesislcap/uvu-playwright-builder": "14.458.1-GENC-0.2",
+    "@genesislcap/vite-builder": "14.458.1-GENC-0.2",
+    "@genesislcap/webpack-builder": "14.458.1-GENC-0.2",
     "@types/dompurify": "^3.0.5",
     "@types/marked": "^5.0.2"
   },
   "dependencies": {
-    "@genesislcap/foundation-ai": "14.458.0",
-    "@genesislcap/foundation-logger": "14.458.0",
-    "@genesislcap/foundation-redux": "14.458.0",
-    "@genesislcap/foundation-ui": "14.458.0",
-    "@genesislcap/foundation-utils": "14.458.0",
-    "@genesislcap/rapid-design-system": "14.458.0",
-    "@genesislcap/web-core": "14.458.0",
+    "@genesislcap/foundation-ai": "14.458.1-GENC-0.2",
+    "@genesislcap/foundation-logger": "14.458.1-GENC-0.2",
+    "@genesislcap/foundation-redux": "14.458.1-GENC-0.2",
+    "@genesislcap/foundation-ui": "14.458.1-GENC-0.2",
+    "@genesislcap/foundation-utils": "14.458.1-GENC-0.2",
+    "@genesislcap/rapid-design-system": "14.458.1-GENC-0.2",
+    "@genesislcap/web-core": "14.458.1-GENC-0.2",
     "dompurify": "^3.3.1",
     "marked": "^17.0.3"
   },
@@ -93,5 +93,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "be04e474ce5154f026d9d01372eec7c6a24b012f"
+  "gitHead": "7506d57ff2fb4954bdba714195727a48ebb3d9a3"
 }

package/src/components/waves-indicator.ts

@@ -0,0 +1,212 @@
+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();
+    this.tick();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.animFrame !== undefined) {
+      cancelAnimationFrame(this.animFrame);
+      this.animFrame = undefined;
+    }
+  }
+
+  private tick() {
+    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) {
@@ -809,6 +825,22 @@ export const styles = css`
     }
   }
 
+  .thinking-waves {
+    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;