@genesislcap/ai-assistant 14.409.0-FUI-2495.2 → 14.409.1

package/src/components/halo-overlay.ts

@@ -6,11 +6,6 @@ import {
   AI_COLOUR_VIOLET,
 } from '../styles/ai-colours';
 
-const HALO_DEFAULT_SPEED = 1.5;
-const HALO_DEFAULT_BORDER_SIZE = 3;
-const HALO_DEFAULT_GLOW_OPACITY = 0.35;
-const HALO_DEFAULT_GLOW_SPREAD = 70;
-
 /**
  * Animated halo overlay — rotating conic-gradient border with an inward glow.
  *
@@ -51,7 +46,7 @@ const HALO_DEFAULT_GLOW_SPREAD = 70;
       position: absolute;
       inset: 0;
       border-radius: inherit;
-      padding: var(--halo-border-size, 3px);
+      padding: 3px;
       background: repeating-conic-gradient(
         from var(--halo-angle, 0deg),
         ${AI_COLOUR_AMBER},
@@ -84,47 +79,14 @@ const HALO_DEFAULT_GLOW_SPREAD = 70;
         ${AI_COLOUR_VIOLET},
         ${AI_COLOUR_AMBER}
       );
-      opacity: var(--halo-glow-opacity, 0.35);
-      -webkit-mask-image: radial-gradient(
-        ellipse at center,
-        transparent var(--halo-glow-spread, 70%),
-        black 100%
-      );
-      mask-image: radial-gradient(
-        ellipse at center,
-        transparent var(--halo-glow-spread, 70%),
-        black 100%
-      );
+      opacity: 0.35;
+      -webkit-mask-image: radial-gradient(ellipse at center, transparent 70%, black 100%);
+      mask-image: radial-gradient(ellipse at center, transparent 70%, black 100%);
     }
   `,
 })
 export class AiHaloOverlay extends GenesisElement {
   @attr({ mode: 'boolean' }) active: boolean = false;
-  /** Rotation speed in degrees per frame. Default: 1.5 (≈ 4 s per full revolution at 60 fps). */
-  @attr({ converter: { fromView: Number, toView: String } }) speed: number = HALO_DEFAULT_SPEED;
-  /** Rotation direction. Default: 'cw' (clockwise). */
-  @attr direction: 'cw' | 'ccw' = 'cw';
-  /** Border thickness in px. Default: 3. */
-  @attr({ attribute: 'border-size', converter: { fromView: Number, toView: String } })
-  borderSize: number = HALO_DEFAULT_BORDER_SIZE;
-  /** Glow layer opacity (0–1). Default: 0.35. */
-  @attr({ attribute: 'glow-opacity', converter: { fromView: Number, toView: String } })
-  glowOpacity: number = HALO_DEFAULT_GLOW_OPACITY;
-  /** Transparent stop of the radial glow mask as a percentage (0–100). Higher = less spread. Default: 70. */
-  @attr({ attribute: 'glow-spread', converter: { fromView: Number, toView: String } })
-  glowSpread: number = HALO_DEFAULT_GLOW_SPREAD;
-
-  borderSizeChanged() {
-    this.style.setProperty('--halo-border-size', `${this.borderSize}px`);
-  }
-
-  glowOpacityChanged() {
-    this.style.setProperty('--halo-glow-opacity', String(this.glowOpacity));
-  }
-
-  glowSpreadChanged() {
-    this.style.setProperty('--halo-glow-spread', `${this.glowSpread}%`);
-  }
 
   // TODO: The rAF loop is fine for demos but has two drawbacks vs a pure CSS @property animation:
   // 1. It runs on the main thread, so heavy JS work can cause the animation to stutter.
@@ -132,6 +94,8 @@ export class AiHaloOverlay extends GenesisElement {
   // Once @property inside Shadow DOM has solid cross-browser support, consider switching back
   // to a CSS @keyframes approach and removing connectedCallback/disconnectedCallback/tick().
 
+  // 1.5° per frame @ 60 fps ≈ 4 s per full revolution
+  private static readonly DEG_PER_FRAME = 1.5;
   private static readonly FULL_ROTATION_DEG = 360;
 
   private angle = 0;
@@ -150,9 +114,7 @@ export class AiHaloOverlay extends GenesisElement {
   }
 
   private tick() {
-    const step = this.direction === 'ccw' ? -this.speed : this.speed;
-    this.angle =
-      (this.angle + step + AiHaloOverlay.FULL_ROTATION_DEG) % AiHaloOverlay.FULL_ROTATION_DEG;
+    this.angle = (this.angle + AiHaloOverlay.DEG_PER_FRAME) % AiHaloOverlay.FULL_ROTATION_DEG;
     this.style.setProperty('--halo-angle', `${this.angle}deg`);
     this.animFrame = requestAnimationFrame(() => this.tick());
   }

package/src/config/config.ts

@@ -1,10 +1,24 @@
 import type { ChatMessage, ChatToolDefinition, ChatToolHandlers } from '@genesislcap/foundation-ai';
 
-interface BaseAgentConfig {
+/**
+ * Configuration for a single specialist agent.
+ *
+ * When multiple agents are provided to `FoundationAiAssistant`, an orchestrating layer
+ * will route each user message to the appropriate specialist based on intent. When only
+ * one agent is configured, routing is skipped.
+ *
+ * @beta
+ */
+export interface AgentConfig {
   /**
    * Display name shown in the chat header when this agent is active.
    */
   name: string;
+  /**
+   * Plain-language description of what this agent handles.
+   * Used by the classifier to auto-generate its routing prompt.
+   */
+  description: string;
   /**
    * System prompt injected into every conversation turn for this agent.
    */
@@ -23,47 +37,3 @@ interface BaseAgentConfig {
    */
   primerHistory?: ChatMessage[];
 }
-
-/**
- * Configuration for a specialist agent.
- *
- * Specialist agents are offered to the classifier for intent routing. The
- * `description` is used to auto-generate the classifier prompt — no manual
- * routing prompt authoring required.
- *
- * @beta
- */
-export interface SpecialistAgentConfig extends BaseAgentConfig {
-  /**
-   * Plain-language description of what this agent handles.
-   * Used by the classifier to auto-generate its routing prompt.
-   */
-  description: string;
-  fallback?: never;
-}
-
-/**
- * Configuration for a fallback agent.
- *
- * Invoked when the classifier returns no match. Excluded from the classifier
- * prompt. Only one fallback is permitted per agents array.
- *
- * @beta
- */
-export interface FallbackAgentConfig extends BaseAgentConfig {
-  /**
-   * Marks this agent as the fallback for unrecognised requests.
-   */
-  fallback: true;
-  description?: never;
-}
-
-/**
- * Configuration for an agent passed to `FoundationAiAssistant`.
- *
- * Either a specialist (requires `description`) or a fallback (requires
- * `fallback: true`). Passing both or neither is a compile error.
- *
- * @beta
- */
-export type AgentConfig = SpecialistAgentConfig | FallbackAgentConfig;

package/src/config/index.ts

@@ -1,2 +1 @@
 export * from './config';
-export * from './fallback-agents';

package/src/index.ts

@@ -1,12 +1,8 @@
 export * from './main/main';
 export * from './main/main.types';
 export * from './main/main.template';
-export * from './components/ai-driver';
 export * from './components/chat-driver';
-export * from './components/orchestrating-driver';
-export * from './components/popout-manager';
 export * from './channel/ai-activity-channel';
 export * from './channel/ai-activity-bus';
 export * from './config/config';
-export * from './config/fallback-agents';
 export type { AiChatWidget } from './types/ai-chat-widget';

package/src/main/main.styles.ts

@@ -17,7 +17,6 @@ export const styles = css`
   }
 
   .chat-wrapper {
-    container-type: inline-size;
     position: relative;
     display: flex;
     flex-direction: column;
@@ -63,140 +62,22 @@ export const styles = css`
     font-size: 1.2em;
   }
 
-  @keyframes settings-slide-in {
-    from {
-      opacity: 0%;
-      transform: translateY(-6px);
-    }
-
-    to {
-      opacity: 100%;
-      transform: translateY(0);
-    }
-  }
-
-  @keyframes settings-slide-out {
-    from {
-      opacity: 100%;
-      transform: translateY(0);
-    }
-
-    to {
-      opacity: 0%;
-      transform: translateY(-6px);
-    }
-  }
-
   .settings-panel {
-    animation: settings-slide-in 0.2s ease-out;
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 4px);
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: calc(var(--design-unit) * 4px);
     padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 3px);
     border-bottom: 1px solid var(--neutral-stroke-rest);
     background-color: var(--neutral-layer-2);
   }
 
-  .settings-panel.closing {
-    animation: settings-slide-out 0.2s ease-in forwards;
-  }
-
-  rapid-multiselect::part(root) {
-    min-width: 80px;
-    width: 300%;
-  }
-
-  rapid-multiselect::part(control),
-  .settings-panel > [part='download-button'] {
-    width: fit-content;
-  }
-
-  .settings-panel > [part='toggle-tool-calls'] {
-    grid-column: 1;
-    grid-row: 1;
-  }
-
-  .settings-panel > [part='toggle-thinking'] {
-    grid-column: 2;
-    grid-row: 1;
-  }
-
-  .settings-panel > [part='toggle-agent-switch'] {
-    grid-column: 1;
-    grid-row: 2;
-  }
-
-  .settings-panel > [part='download-button'] {
-    grid-column: 2;
-    grid-row: 2;
-  }
-
   .settings-animations {
     display: flex;
     align-items: center;
     gap: calc(var(--design-unit) * 2px);
   }
 
-  .settings-panel > .settings-animations {
-    grid-column: 1/2;
-    grid-row: 3;
-  }
-
-  @container (min-width: 400px) {
-    .settings-panel {
-      grid-template-columns: auto 1fr;
-      align-items: start;
-    }
-
-    .settings-panel > [part='toggle-tool-calls'] {
-      grid-column: 1;
-      grid-row: 1;
-    }
-
-    .settings-panel > [part='toggle-thinking'] {
-      grid-column: 1;
-      grid-row: 2;
-    }
-
-    .settings-panel > [part='toggle-agent-switch'] {
-      grid-column: 1;
-      grid-row: 3;
-    }
-
-    .settings-panel > [part='download-button'],
-    .settings-panel > .settings-animations {
-      grid-column: 2;
-      justify-self: end;
-    }
-
-    .settings-panel > [part='download-button'] {
-      grid-row: 1;
-    }
-
-    .settings-panel > .settings-animations {
-      grid-row: 2;
-    }
-  }
-
-  @container (min-width: 750px) {
-    .settings-panel {
-      display: flex;
-      flex-wrap: nowrap;
-      align-items: center;
-      gap: calc(var(--design-unit) * 4px);
-    }
-
-    .settings-panel > [part='download-button'],
-    .settings-panel > .settings-animations {
-      justify-self: unset;
-      margin-left: auto;
-    }
-
-    .settings-panel > [part='download-button'] ~ .settings-animations {
-      margin-left: 0;
-    }
-  }
-
   .messages {
     flex: 1;
     overflow-y: auto;
@@ -242,28 +123,6 @@ export const styles = css`
     }
   }
 
-  .agent-switch-indicator {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin: 8px 0;
-    color: var(--neutral-foreground-hint, var(--neutral-foreground-rest));
-    opacity: 60%;
-    font-size: 0.75em;
-  }
-
-  .agent-switch-indicator::before,
-  .agent-switch-indicator::after {
-    content: '';
-    flex: 1;
-    height: 1px;
-    background: currentColor;
-  }
-
-  .agent-switch-label {
-    white-space: nowrap;
-  }
-
   .message-row {
     display: flex;
     align-items: flex-start;

package/src/main/main.template.ts

@@ -7,10 +7,6 @@ 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;
-
 const animationOptions = Object.entries(ANIMATION_DEFS).map(([value, def]) => ({
   value,
   label: def.label,
@@ -38,8 +34,6 @@ const genesisIconTemplate = html`
  */
 const messageType = (m: ChatMessage): string => {
   switch (true) {
-    case m.role === 'system-event':
-      return 'agent-switch';
     case m.role === 'user':
       return 'user';
     case !!m.thinking:
@@ -74,13 +68,13 @@ export const FoundationAiAssistantTemplate = (
   return html<FoundationAiAssistant>`
     <div class="chat-wrapper" part="chat-wrapper">
       ${when(
-        (x) => !!x.chatConfig.ui?.acceptedFiles,
+        (x) => !!x.chatConfig.acceptedFiles,
         html<FoundationAiAssistant>`
           <input
             class="file-input"
             type="file"
             multiple
-            accept=${(x) => x.chatConfig.ui?.acceptedFiles}
+            accept=${(x) => x.chatConfig.acceptedFiles}
             @change=${(x, c) => x.handleFileSelect(c.event)}
           />
         `,
@@ -88,21 +82,23 @@ export const FoundationAiAssistantTemplate = (
       ${when(
         (x) =>
           !!x.popoutMode ||
-          x.chatConfig.ui?.showToolCalls != null ||
-          x.chatConfig.ui?.showThinkingSteps != null ||
-          x.chatConfig.ui?.showAgentSwitchIndicator != null ||
-          x.chatConfig.ui?.allowDebugDownload === true ||
-          x.chatConfig.ui?.animations != null,
+          x.chatConfig.showToolCalls != null ||
+          x.chatConfig.showThinkingSteps != null ||
+          x.chatConfig.allowDebugDownload === true ||
+          x.chatConfig.animations != null,
         html<FoundationAiAssistant>`
           <div
-            class="chat-header ${(x) => (x.popoutMode !== 'collapse' ? 'draggable' : '')}"
+            class="chat-header ${(x) => (x.popoutMode === 'expand' ? 'draggable' : '')}"
             part="chat-header"
             @mousedown="${(x, c) => x.onChatHeaderMouseDown(c.event as MouseEvent)}"
           >
             ${when(
-              (x) => !!x.headerTitle,
+              (x) => !!(x.headerTitle ?? x.agents?.[0]?.name),
               html<FoundationAiAssistant>`
-                <span class="chat-title" part="chat-title">${(x) => x.headerTitle}</span>
+                <!-- TODO: multi-agent orchestration — bind to active agent name rather than always agents[0] -->
+                <span class="chat-title" part="chat-title">
+                  ${(x) => x.headerTitle ?? x.agents?.[0]?.name}
+                </span>
               `,
             )}
             <div class="header-actions" part="header-actions">
@@ -122,11 +118,10 @@ export const FoundationAiAssistantTemplate = (
               )}
               ${when(
                 (x) =>
-                  x.chatConfig.ui?.showToolCalls != null ||
-                  x.chatConfig.ui?.showThinkingSteps != null ||
-                  x.chatConfig.ui?.showAgentSwitchIndicator != null ||
-                  x.chatConfig.ui?.allowDebugDownload === true ||
-                  x.chatConfig.ui?.animations != null,
+                  x.chatConfig.showToolCalls != null ||
+                  x.chatConfig.showThinkingSteps != null ||
+                  x.chatConfig.allowDebugDownload === true ||
+                  x.chatConfig.animations != null,
                 html<FoundationAiAssistant>`
                   <${buttonTag}
                     class="settings-button"
@@ -144,7 +139,7 @@ export const FoundationAiAssistantTemplate = (
             html<FoundationAiAssistant>`
               <div class="settings-panel" part="settings-panel">
                 ${when(
-                  (x) => x.chatConfig.ui?.showToolCalls != null,
+                  (x) => x.chatConfig.showToolCalls != null,
                   html<FoundationAiAssistant>`
                     <${switchTag}
                       part="toggle-tool-calls"
@@ -154,7 +149,7 @@ export const FoundationAiAssistantTemplate = (
                   `,
                 )}
                 ${when(
-                  (x) => x.chatConfig.ui?.showThinkingSteps != null,
+                  (x) => x.chatConfig.showThinkingSteps != null,
                   html<FoundationAiAssistant>`
                     <${switchTag}
                       part="toggle-thinking"
@@ -164,27 +159,17 @@ export const FoundationAiAssistantTemplate = (
                   `,
                 )}
                 ${when(
-                  (x) => x.chatConfig.ui?.showAgentSwitchIndicator != null,
-                  html<FoundationAiAssistant>`
-                    <${switchTag}
-                      part="toggle-agent-switch"
-                      :checked=${(x) => x.showAgentSwitchIndicator}
-                      @change=${(x) => x.toggleShowAgentSwitchIndicator()}
-                    >Agents</${switchTag}>
-                  `,
-                )}
-                ${when(
-                  (x) => x.chatConfig.ui?.allowDebugDownload === true,
+                  (x) => x.chatConfig.allowDebugDownload === true,
                   html<FoundationAiAssistant>`
                     <${buttonTag}
                       part="download-button"
                       appearance="stealth"
-                      @click=${(x) => x.downloadDebugLog()}
-                    >Download agent log</${buttonTag}>
+                      @click=${(x) => x.downloadHistory()}
+                    >Download debug state</${buttonTag}>
                   `,
                 )}
                 ${when(
-                  (x) => x.chatConfig.ui?.animations?.userConfigurable === true,
+                  (x) => x.chatConfig.animations?.userConfigurable === true,
                   html<FoundationAiAssistant>`
                     <div class="settings-animations">
                       <span class="settings-label">Animations</span>
@@ -212,91 +197,71 @@ export const FoundationAiAssistantTemplate = (
         ${repeat(
           (x) => x.visibleMessages,
           html<ChatMessage, FoundationAiAssistant>`
-            ${when(
-              (m) => m.role === 'system-event',
-              html<ChatMessage, FoundationAiAssistant>`
-                <div class="agent-switch-indicator" part="agent-switch-indicator">
-                  <span class="agent-switch-label">${(m) => m.content}</span>
-                </div>
-              `,
-            )}
-            ${when(
-              (m) => m.role !== 'system-event',
-              html<ChatMessage, FoundationAiAssistant>`
-                <div class="message-row ${(m) => messageType(m)}">
+            <div class="message-row ${(m) => messageType(m)}">
+              ${when(
+                (m) => m.role !== 'user',
+                html<ChatMessage, FoundationAiAssistant>`
+                  <div class="avatar ${(m) => messageType(m)}">
+                    ${when(
+                      (m, c) => !!(c.parent as FoundationAiAssistant).imageSrc,
+                      html<ChatMessage, FoundationAiAssistant>`
+                        <img
+                          src="${(m, c) => (c.parent as FoundationAiAssistant).imageSrc}"
+                          alt="Assistant"
+                          class="avatar-img"
+                        />
+                      `,
+                    )}
+                    ${when(
+                      (m, c) => !(c.parent as FoundationAiAssistant).imageSrc,
+                      genesisIconTemplate,
+                    )}
+                  </div>
+                `,
+              )}
+              <div class="message ${(m) => messageType(m)}">
+                <div class="sender">${(m) => senderLabel[messageType(m)]}</div>
+                <div class="content">
                   ${when(
-                    (m) => m.role !== 'user',
+                    (m) => m.content,
                     html<ChatMessage, FoundationAiAssistant>`
-                      <div class="avatar ${(m) => messageType(m)}">
-                        ${when(
-                          (m, c) => !!(c.parent as FoundationAiAssistant).imageSrc,
-                          html<ChatMessage, FoundationAiAssistant>`
-                            <img
-                              src="${(m, c) => (c.parent as FoundationAiAssistant).imageSrc}"
-                              alt="Assistant"
-                              class="avatar-img"
-                            />
-                          `,
-                        )}
-                        ${when(
-                          (m, c) => !(c.parent as FoundationAiAssistant).imageSrc,
-                          genesisIconTemplate,
-                        )}
-                      </div>
+                      <ai-chat-markdown :content="${(m) => m.content}"></ai-chat-markdown>
                     `,
                   )}
-                  <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.agentName}`
-                          : senderLabel[messageType(m)]}
-                    </div>
-                    <div class="content">
-                      ${when(
-                        (m) => m.content,
-                        html<ChatMessage, FoundationAiAssistant>`
-                          <ai-chat-markdown :content="${(m) => m.content}"></ai-chat-markdown>
-                        `,
-                      )}
-                      ${when(
-                        (m) => m.toolCalls,
-                        html<ChatMessage, FoundationAiAssistant>`
-                          ${repeat(
-                            (m) => m.toolCalls ?? [],
-                            html<ChatToolCall>`
-                              <pre class="payload"><strong>${(tc) => tc.name}</strong>(${(tc) =>
-                                JSON.stringify(tc.args, null, 2)})</pre>
-                            `,
-                          )}
-                        `,
-                      )}
-                      ${when(
-                        (m) => m.interaction,
-                        html<ChatMessage, FoundationAiAssistant>`
-                          <ai-chat-interaction-wrapper
-                            :componentName=${(m) => m.interaction!.componentName}
-                            :data=${(m) => m.interaction!.data}
-                            :interactionId=${(m) => m.interaction!.interactionId}
-                            :resolved=${(m) => !!m.interaction!.resolved}
-                            @interaction-completed=${(m, c) =>
-                              c.parent.handleInteractionCompleted(c.event)}
-                          ></ai-chat-interaction-wrapper>
+                  ${when(
+                    (m) => m.toolCalls,
+                    html<ChatMessage, FoundationAiAssistant>`
+                      ${repeat(
+                        (m) => m.toolCalls ?? [],
+                        html<ChatToolCall>`
+                          <pre class="payload"><strong>${(tc) => tc.name}</strong>(${(tc) =>
+                            JSON.stringify(tc.args, null, 2)})</pre>
                         `,
                       )}
-                    </div>
-                  </div>
+                    `,
+                  )}
+                  ${when(
+                    (m) => m.interaction,
+                    html<ChatMessage, FoundationAiAssistant>`
+                      <ai-chat-interaction-wrapper
+                        :componentName=${(m) => m.interaction!.componentName}
+                        :data=${(m) => m.interaction!.data}
+                        :interactionId=${(m) => m.interaction!.interactionId}
+                        :resolved=${(m) => !!m.interaction!.resolved}
+                        @interaction-completed=${(m, c) =>
+                          c.parent.handleInteractionCompleted(c.event)}
+                      ></ai-chat-interaction-wrapper>
+                    `,
+                  )}
                 </div>
-              `,
-            )}
+              </div>
+            </div>
           `,
         )}
         ${when(
           (x) =>
             x.showLoadingIndicator &&
-            (x.chatConfig.ui?.animations == null || x.enabledAnimations.includes('loading')),
+            (x.chatConfig.animations == null || x.enabledAnimations.includes('loading')),
           html<FoundationAiAssistant>`
             <div class="message-row ai" part="thinking">
               <div class="avatar">
@@ -359,13 +324,13 @@ export const FoundationAiAssistantTemplate = (
 
       <div class="input-row" part="input-row">
         ${when(
-          (x) => !!x.chatConfig.ui?.acceptedFiles,
+          (x) => !!x.chatConfig.acceptedFiles,
           html<FoundationAiAssistant>`
             <${buttonTag}
               class="attach-button"
               part="attach-button"
               appearance="stealth"
-              title=${(x) => `Attach file (${x.chatConfig.ui?.acceptedFiles})`}
+              title=${(x) => `Attach file (${x.chatConfig.acceptedFiles})`}
               ?disabled=${(x) => x.state === 'loading'}
               @click=${(x) => x.triggerFileInput()}
             ><${iconTag} name="paperclip"></${iconTag}></${buttonTag}>
@@ -399,10 +364,7 @@ export const FoundationAiAssistantTemplate = (
       </div>
       <ai-halo-overlay
         part="halo-overlay"
-        ?active=${(x) => x.showHalo !== 'no' && x.enabledAnimations.includes('halo')}
-        :speed="${(x) => (x.showHalo === 'orchestrating' ? HALO_SPEED_ORCHESTRATING : HALO_SPEED_DEFAULT)}"
-        direction="${(x) => (x.showHalo === 'orchestrating' ? 'ccw' : 'cw')}"
-        :borderSize="${(x) => (x.showHalo === 'orchestrating' ? 2 : HALO_BORDER_SIZE_DEFAULT)}"
+        ?active=${(x) => x.showHalo && x.enabledAnimations.includes('halo')}
       ></ai-halo-overlay>
     </div>
   `;