@genesislcap/ai-assistant 14.432.2 → 14.433.0

package/src/components/agent-picker/agent-picker.ts

@@ -0,0 +1,148 @@
+import {
+  attr,
+  customElement,
+  GenesisElement,
+  html,
+  observable,
+  volatile,
+} from '@genesislcap/web-core';
+import type { AgentConfig } from '../../config/config';
+import type { AgentPickerMode } from '../../main/main.types';
+import { styles } from './agent-picker.styles';
+import { AgentPickerTemplate } from './agent-picker.template';
+
+/** Sentinel value used by the segmented control / select to represent "Auto". */
+export const AGENT_PICKER_AUTO_VALUE = '__auto__';
+
+/** Tolerance for `scrollWidth > clientWidth` overflow detection (sub-pixel rounding). */
+const OVERFLOW_TOLERANCE_PX = 1;
+
+/**
+ * User-facing agent picker rendered above the chat input.
+ *
+ * Renders `Auto` plus each top-level agent that has `manualSelection.enabled`.
+ * Sub-agents and non-selectable specialists are excluded. Hidden when fewer
+ * than two agents are configured or none are manually selectable.
+ *
+ * @fires agent-pinned - Fired when the user changes selection. `detail` is the
+ *   agent name (string) or `null` for Auto.
+ *
+ * @beta
+ */
+@customElement({
+  name: 'foundation-ai-agent-picker',
+  template: html`
+    ${(x: AgentPicker) => AgentPickerTemplate(x.designSystemPrefix)}
+  `,
+  styles,
+})
+export class AgentPicker extends GenesisElement {
+  /** Design-system tag prefix, e.g. `'rapid'` for `rapid-segmented-control`. */
+  @attr({ attribute: 'design-system-prefix' }) designSystemPrefix: string = 'rapid';
+  /** Picker variant, sourced from the assistant's `chatConfig.agentPicker`. */
+  @observable mode: AgentPickerMode = 'disabled';
+  /** Top-level agents passed to the assistant. */
+  @observable agents: AgentConfig[] = [];
+  /** Currently pinned agent name, or `null` for Auto. */
+  @observable pinnedAgentName: string | null = null;
+
+  /** @internal — set via the template `${ref(...)}` binding. */
+  segmentedRowEl?: HTMLElement;
+
+  /**
+   * @internal — true when the segmented row's content overflows its container.
+   * Drives the fallback to `select` rendering. Only meaningful when
+   * `mode === 'segmented-control'`.
+   */
+  @observable overflowing: boolean = false;
+
+  private resizeObserver?: ResizeObserver;
+
+  /** Top-level agents that opted in to manual selection. */
+  @volatile
+  get selectableAgents(): AgentConfig[] {
+    return (this.agents ?? []).filter((a) => a.manualSelection?.enabled);
+  }
+
+  /** Whether the picker should render at all. */
+  @volatile
+  get visible(): boolean {
+    if (this.mode === 'disabled') return false;
+    if ((this.agents?.length ?? 0) <= 1) return false;
+    if (this.selectableAgents.length === 0) return false;
+    return true;
+  }
+
+  /**
+   * The variant actually rendered: `'select'` if user-configured or if the
+   * segmented row currently overflows; `'segmented-control'` otherwise.
+   */
+  @volatile
+  get effectiveMode(): 'select' | 'segmented-control' {
+    if (this.mode === 'segmented-control') {
+      return this.overflowing ? 'select' : 'segmented-control';
+    }
+    return 'select';
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    if (typeof ResizeObserver === 'undefined') return;
+    this.resizeObserver = new ResizeObserver(() => this.measureOverflow());
+    this.resizeObserver.observe(this);
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = undefined;
+  }
+
+  /**
+   * Re-measure when agents change — newly added selectable agents may push the
+   * segmented row past the container's width.
+   */
+  agentsChanged(): void {
+    queueMicrotask(() => this.measureOverflow());
+  }
+
+  modeChanged(): void {
+    queueMicrotask(() => this.measureOverflow());
+  }
+
+  /**
+   * Measures whether the segmented row's natural content width exceeds the
+   * container's visible width. Bails when the row isn't currently rendered
+   * (e.g. when `mode !== 'segmented-control'`).
+   */
+  private measureOverflow(): void {
+    const row = this.segmentedRowEl;
+    if (!row) {
+      this.overflowing = false;
+      return;
+    }
+    this.overflowing = row.scrollWidth > row.clientWidth + OVERFLOW_TOLERANCE_PX;
+  }
+
+  selectAgent(name: string | null): void {
+    this.pinnedAgentName = name;
+    // Always emit — the host may close a slide-out panel on click even when
+    // the selection didn't change.
+    this.$emit('agent-pinned', name);
+  }
+
+  /**
+   * Maps a value from the segmented-control or select (which uses
+   * {@link AGENT_PICKER_AUTO_VALUE} for Auto) back to the `string | null` form
+   * expected by `selectAgent`.
+   */
+  selectByValue(value: string): void {
+    this.selectAgent(value === AGENT_PICKER_AUTO_VALUE ? null : value);
+  }
+
+  /** Current pinned agent name as a value the segmented-control / select can bind to. */
+  @volatile
+  get currentValue(): string {
+    return this.pinnedAgentName ?? AGENT_PICKER_AUTO_VALUE;
+  }
+}

package/src/components/agent-picker/index.ts

@@ -0,0 +1 @@
+export * from './agent-picker';

package/src/components/chat-driver/chat-driver.ts

@@ -66,6 +66,13 @@ export class ChatDriver extends EventTarget implements AiDriver {
   private toolHandlers: ChatToolHandlers;
   private primerHistory?: ChatMessage[];
   private activeAgentName?: string;
+  /**
+   * When set, `requestInteraction` delegates to this callback instead of using
+   * this driver's own pending map. Wired by `invokeSubAgent` so a sub-agent's
+   * widget renders in — and resolves through — the parent (ultimately the
+   * root) driver, where the main UI is listening.
+   */
+  private hostInteractionRequester?: <T>(componentName: string, data: any) => Promise<T>;
   /**
    * When set (e.g. by OrchestratingDriver), applied only to the conversation slice
    * sent to the model — stored `history` stays unchanged for UI and logging.
@@ -237,14 +244,43 @@ export class ChatDriver extends EventTarget implements AiDriver {
     return this.busy;
   }
 
+  /**
+   * Wire a parent driver as the host for this driver's interactions. When set,
+   * `requestInteraction` delegates upward so the widget renders in (and
+   * resolves through) the parent's history and pending map. Calls chain
+   * naturally: a grandchild → child → root.
+   */
+  public setHostInteractionRequester(
+    fn: <T>(componentName: string, data: any) => Promise<T>,
+  ): void {
+    this.hostInteractionRequester = fn;
+  }
+
   /**
    * Request a custom UI interaction. Emits a new message with the interaction.
    * Tool handlers can call this to pause execution until the user completes the UI interaction.
    *
+   * If a host requester is wired (sub-agent case), the call delegates upward
+   * so the interaction lives on the parent — the main UI is only listening to
+   * the root driver. Only one interaction may be in flight at any time on a
+   * given root: concurrent calls (e.g. two parallel sub-agents both spawning a
+   * widget) throw. Parallel sub-agents are for parallel work, not for user
+   * interaction, which is inherently sequential.
+   *
    * @param componentName - The custom element name to render.
    * @param data - Data to pass to the component.
    */
   public async requestInteraction<T>(componentName: string, data: any): Promise<T> {
+    if (this.hostInteractionRequester) {
+      return this.hostInteractionRequester<T>(componentName, data);
+    }
+    if (this.pendingInteractions.size > 0) {
+      throw new Error(
+        'requestInteraction: another user interaction is already in flight. ' +
+          'Only one interaction may be active at a time — sequence them in a single tool handler ' +
+          'rather than spawning widgets from parallel sub-agents or parallel tool calls.',
+      );
+    }
     const interactionId = crypto.randomUUID();
     return new Promise((resolve, reject) => {
       this.pendingInteractions.set(interactionId, { resolve, reject });
@@ -396,6 +432,14 @@ export class ChatDriver extends EventTarget implements AiDriver {
 
     const child = new ChatDriver(this.aiProvider);
     child.applyAgent({ ...subConfig, primerHistory: effectivePrimer });
+    // Route interactions back through this driver so widgets render in the
+    // parent's (ultimately the root's) history and resolve via the same
+    // pending map the main UI is wired to. Recurses naturally for nested
+    // sub-agents.
+    child.setHostInteractionRequester(
+      <R>(componentName: string, data: any): Promise<R> =>
+        this.requestInteraction<R>(componentName, data),
+    );
 
     const forwardTrace = (e: Event) => {
       this.dispatchEvent(
@@ -406,12 +450,18 @@ export class ChatDriver extends EventTarget implements AiDriver {
     };
     child.addEventListener('history-updated', forwardTrace);
 
-    this.dispatchEvent(new CustomEvent('sub-agent-start', { detail: { name } }));
+    // Unique per-invocation id so listeners can pair start/stop reliably even
+    // when the same sub-agent runs multiple times in parallel.
+    const invocationId = crypto.randomUUID();
+    const chatInputDuringExecution = options?.chatInputDuringExecution;
+    const lifecycleDetail = { name, invocationId, chatInputDuringExecution };
+
+    this.dispatchEvent(new CustomEvent('sub-agent-start', { detail: lifecycleDetail }));
     try {
       await child.sendMessage(task ?? '');
     } finally {
       child.removeEventListener('history-updated', forwardTrace);
-      this.dispatchEvent(new CustomEvent('sub-agent-stop', { detail: { name } }));
+      this.dispatchEvent(new CustomEvent('sub-agent-stop', { detail: lifecycleDetail }));
     }
 
     const trace = child.getHistory() as ChatMessage[];
@@ -651,17 +701,28 @@ export class ChatDriver extends EventTarget implements AiDriver {
             ? `${baseSystemPrompt ?? ''}\n\nIMPORTANT: You must respond to the user's message. Call the appropriate tool or provide a text response — do not return an empty response.`
             : baseSystemPrompt;
 
+      // Capture the pending user input, then clear the slots BEFORE the chat
+      // call. `sendMessage` already appended the user message to `this.history`,
+      // so on retries (empty / malformed) we must rely on history alone —
+      // otherwise the message gets sent twice (once via history, once via
+      // `currentInput`), which Gemini answers with an empty response and then
+      // we retry forever.
+      const userInputForCall = currentInput;
+      const attachmentsForCall = currentAttachments;
+      currentInput = '';
+      currentAttachments = undefined;
+
       const options: ChatRequestOptions = {
         systemPrompt,
         // Strip fold-only properties (foldEvent, foldPath) before sending to provider
         tools: this.toolDefinitions.length ? this.toolDefinitions : undefined,
-        attachments: currentAttachments,
+        attachments: attachmentsForCall,
       };
 
       let response: ChatMessage;
       try {
         // eslint-disable-next-line no-await-in-loop
-        response = await this.aiProvider.chat!(historyForCall, currentInput, options);
+        response = await this.aiProvider.chat!(historyForCall, userInputForCall, options);
       } catch (e) {
         if (e instanceof MalformedFunctionCallError) {
           malformedAttempts += 1;
@@ -683,8 +744,6 @@ export class ChatDriver extends EventTarget implements AiDriver {
         throw e;
       }
 
-      currentAttachments = undefined;
-
       const isThinkingStep = response.content && response.toolCalls?.length;
       const isEmptyResponse = !response.content?.trim() && !response.toolCalls?.length;
 
@@ -918,8 +977,6 @@ export class ChatDriver extends EventTarget implements AiDriver {
       if (this.subAgentCompletion) {
         return { reason: 'done' };
       }
-
-      currentInput = '';
     }
 
     if (iterations >= this.maxToolIterations) {

package/src/components/orchestrating-driver/orchestrating-driver.ts

@@ -69,6 +69,7 @@ export class OrchestratingDriver extends EventTarget implements AiDriver {
   private readonly maxHandoffs: number;
   private readonly classifierHistoryLength: number;
   private readonly classifierRetries: number;
+  private pinnedAgentName: string | null = null;
 
   activeAgent?: AgentConfig;
 
@@ -121,6 +122,9 @@ export class OrchestratingDriver extends EventTarget implements AiDriver {
         new CustomEvent('sub-agent-history-updated', { detail: (e as CustomEvent).detail }),
       );
     });
+    this.chatDriver.addEventListener('sub-agent-start', (e: Event) => {
+      this.dispatchEvent(new CustomEvent('sub-agent-start', { detail: (e as CustomEvent).detail }));
+    });
     this.chatDriver.addEventListener('sub-agent-stop', (e: Event) => {
       this.dispatchEvent(new CustomEvent('sub-agent-stop', { detail: (e as CustomEvent).detail }));
     });
@@ -134,6 +138,16 @@ export class OrchestratingDriver extends EventTarget implements AiDriver {
     return this.chatDriver.isBusy();
   }
 
+  /**
+   * Pins routing to a specific agent by name. While pinned, the classifier is
+   * skipped and the continuation tool is hidden from the agent's tool list, so
+   * the agent cannot quietly hand back to the orchestrator. Pass `null` to
+   * return to automatic routing.
+   */
+  setPinnedAgent(name: string | null): void {
+    this.pinnedAgentName = name;
+  }
+
   loadHistory(messages: ChatMessage[]): void {
     this.chatDriver.loadHistory(messages);
   }
@@ -148,7 +162,11 @@ export class OrchestratingDriver extends EventTarget implements AiDriver {
     count: number,
     allAgentInfo?: AllAgentSummary[],
   ): Promise<string[]> {
-    const agentInfo = this.specialists.map((s) => ({
+    // When pinned to a specialist, scope suggestions to that agent so the
+    // proposed prompts reflect the active routing instead of the full panel.
+    const pinned = this.resolvePinnedAgent();
+    const candidates = pinned && isSpecialist(pinned) ? [pinned] : this.specialists;
+    const agentInfo = candidates.map((s) => ({
       name: s.name,
       description: s.description,
       tools: s.toolDefinitions ?? [],
@@ -167,8 +185,9 @@ export class OrchestratingDriver extends EventTarget implements AiDriver {
       }),
     );
 
-    this.dispatchEvent(new CustomEvent('orchestrating-start'));
-    let currentAgent = await this.classify(input, history, this.activeAgent);
+    const pinned = this.resolvePinnedAgent();
+    if (!pinned) this.dispatchEvent(new CustomEvent('orchestrating-start'));
+    let currentAgent = pinned ?? (await this.classify(input, history, this.activeAgent));
     let isHandoff = false;
     let handoffs = 0;
     let handoffSummary = '';
@@ -189,7 +208,9 @@ export class OrchestratingDriver extends EventTarget implements AiDriver {
         result = await this.chatDriver.sendMessage(input, attachments);
       }
 
-      if (result.reason !== 'agent-handoff' || isFallback(currentAgent)) {
+      // Pinned agents never hand off — the continuation tool is filtered out in
+      // applyAgent, but this guards against a model hallucinating a handoff result.
+      if (result.reason !== 'agent-handoff' || isFallback(currentAgent) || pinned) {
         break;
       }
 
@@ -219,8 +240,9 @@ export class OrchestratingDriver extends EventTarget implements AiDriver {
   }
 
   private applyAgent(agent: AgentConfig): void {
-    // Fallback agents are terminal and should not hand off to other specialists
-    const agentToApply = isFallback(agent)
+    // Fallback and pinned agents are terminal — neither should hand off.
+    const isTerminal = isFallback(agent) || this.pinnedAgentName !== null;
+    const agentToApply = isTerminal
       ? agent
       : {
           ...agent,
@@ -315,6 +337,23 @@ export class OrchestratingDriver extends EventTarget implements AiDriver {
     return this.specialists[0];
   }
 
+  /**
+   * Returns the pinned agent if `pinnedAgentName` matches a known specialist or
+   * fallback. Logs and returns `undefined` if pinned to a name that no longer
+   * exists in the agents array — caller falls back to the classifier.
+   */
+  private resolvePinnedAgent(): AgentConfig | undefined {
+    if (this.pinnedAgentName === null) return undefined;
+    const match = this.agents.find((a) => a.name === this.pinnedAgentName);
+    if (!match) {
+      logger.warn(
+        `OrchestratingDriver: pinned agent "${this.pinnedAgentName}" not found in agents array — falling back to classifier.`,
+      );
+      return undefined;
+    }
+    return match;
+  }
+
   private appendInlineMessage(content: string): void {
     const history = this.chatDriver.getHistory() as ChatMessage[];
     this.chatDriver.loadHistory([...history, { role: 'assistant', content }]);

package/src/config/config.ts

@@ -1,20 +1,31 @@
-import type { ChatMessage, ChatToolDefinition, ChatToolHandlers } from '@genesislcap/foundation-ai';
+import type {
+  ChatInputDuringExecutionMode,
+  ChatMessage,
+  ChatToolDefinition,
+  ChatToolHandlers,
+} from '@genesislcap/foundation-ai';
+
+export type { ChatInputDuringExecutionMode };
 
 /**
- * Controls how the main chat input area behaves while this agent is executing
- * (i.e. while `state === 'loading'` — covers both LLM thinking and pending
- * widget interactions).
+ * Opts an agent in to manual selection from the assistant's agent picker.
  *
- * - `'disabled'` (default): input stays visible but disabled.
- * - `'hidden'`: the entire input row (attach button, textarea, send button) is
- *   hidden. Useful for agents whose interaction widgets contain their own
- *   input affordances and where a second disabled chat input is redundant or
- *   confusing — typically long-running agents (planners) where one transition
- *   in/out is less jarring than mid-run flicker.
+ * Only applies to top-level agents — sub-agents are never user-selectable.
+ * Has no effect unless the assistant's `agentPicker` is also enabled.
  *
  * @beta
  */
-export type ChatInputDuringExecutionMode = 'disabled' | 'hidden';
+export interface ManualSelectionConfig {
+  /**
+   * Whether this agent appears in the picker.
+   */
+  enabled: boolean;
+  /**
+   * Optional short description shown as a tooltip on the picker entry, and as
+   * a secondary line in the dropdown variant.
+   */
+  hint?: string;
+}
 
 interface BaseAgentConfig {
   /**
@@ -47,6 +58,12 @@ interface BaseAgentConfig {
    * Defaults to `'disabled'`. See {@link ChatInputDuringExecutionMode}.
    */
   chatInputDuringExecution?: ChatInputDuringExecutionMode;
+  /**
+   * Opts this agent in to manual selection from the assistant's agent picker.
+   * Has no effect on sub-agents or when the assistant's `agentPicker` is
+   * disabled. See {@link ManualSelectionConfig}.
+   */
+  manualSelection?: ManualSelectionConfig;
 }
 
 /**

package/src/index.ts

@@ -1,6 +1,7 @@
 export * from './main/main';
 export * from './main/main.types';
 export * from './main/main.template';
+export * from './components/agent-picker';
 export * from './components/ai-driver';
 export * from './components/chat-driver';
 export * from './components/orchestrating-driver';

package/src/main/main.styles.ts

@@ -522,10 +522,69 @@ export const styles = css`
     background-color: var(--neutral-layer-2);
   }
 
+  .input-left-controls {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: calc(var(--design-unit) * 1px);
+  }
+
+  /* Lock the width so the column doesn't reflow when the button content
+     switches between the "Auto" label, the pin icon, and the chevron. */
+  .agent-toggle-button {
+    width: 56px;
+    min-width: 56px;
+    max-width: 56px;
+    box-sizing: border-box;
+  }
+
+  .agent-toggle-label {
+    font-size: 0.75em;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+  }
+
+  @keyframes agent-picker-slide-in {
+    from {
+      opacity: 0%;
+      transform: translateY(8px);
+    }
+
+    to {
+      opacity: 100%;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes agent-picker-slide-out {
+    from {
+      opacity: 100%;
+      transform: translateY(0);
+    }
+
+    to {
+      opacity: 0%;
+      transform: translateY(8px);
+    }
+  }
+
+  .agent-picker-panel {
+    animation: agent-picker-slide-in 0.2s ease-out;
+    overflow: hidden;
+  }
+
+  .agent-picker-panel.closing {
+    animation: agent-picker-slide-out 0.2s ease-in forwards;
+  }
+
   .chat-input {
     flex: 1;
     resize: none;
     max-height: 150px;
+
+    /* Match the height of the left-controls column when it has stacked buttons,
+       so the textarea fills the row instead of sitting flush to the send button. */
+    align-self: stretch;
   }
 
   .file-input {

package/src/main/main.template.ts

@@ -268,6 +268,80 @@ ${(tc) => (tc.foldPath?.length ? `${tc.foldPath.join(' › ')} › ` : '')}<stro
     )}
   `;
 
+  // ── Agent picker ────────────────────────────────────────────────────────────
+
+  const agentToggleButtonTemplate = html<FoundationAiAssistant>`
+    <${buttonTag}
+      class="agent-toggle-button"
+      part="agent-toggle-button"
+      appearance="stealth"
+      title=${(x) =>
+        x.agentPickerOpen
+          ? 'Close agent picker'
+          : x.pinnedAgentName !== null
+            ? x.pinnedAgentHint
+              ? `${x.pinnedAgentName} — ${x.pinnedAgentHint}`
+              : (x.pinnedAgentName ?? '')
+            : 'Attempts to route messages to the correct available agent. Click to manually pin an agent.'}
+      ?disabled=${(x) => x.state === 'loading'}
+      @click=${(x) => x.toggleAgentPicker()}
+    >
+      ${when(
+        (x) => x.agentPickerOpen,
+        html<FoundationAiAssistant>`<${iconTag} name="chevron-down"></${iconTag}>`,
+      )}
+      ${when(
+        (x) => !x.agentPickerOpen && x.pinnedAgentName !== null,
+        html<FoundationAiAssistant>`
+          <${iconTag}
+            name="thumbtack"
+            style="${(x) => (x.pinnedAgentColour ? `color: ${x.pinnedAgentColour}` : '')}"
+          ></${iconTag}>
+        `,
+      )}
+      ${when(
+        (x) => !x.agentPickerOpen && x.pinnedAgentName === null,
+        html<FoundationAiAssistant>`
+          <span class="agent-toggle-label">Auto</span>
+        `,
+      )}
+    </${buttonTag}>
+  `;
+
+  const attachButtonTemplate = html<FoundationAiAssistant>`
+    <${buttonTag}
+      class="attach-button"
+      part="attach-button"
+      appearance="stealth"
+      title=${(x) => `Attach file (${x.chatConfig.ui?.acceptedFiles})`}
+      ?disabled=${(x) => x.state === 'loading'}
+      @click=${(x) => x.triggerFileInput()}
+    ><${iconTag} name="paperclip"></${iconTag}></${buttonTag}>
+  `;
+
+  const inputLeftControlsTemplate = html<FoundationAiAssistant>`
+    <div class="input-left-controls" part="input-left-controls">
+      ${when((x) => x.agentPickerEnabled, agentToggleButtonTemplate)}
+      ${when((x) => !!x.chatConfig.ui?.acceptedFiles, attachButtonTemplate)}
+    </div>
+  `;
+
+  const agentPickerPanelTemplate = html<FoundationAiAssistant>`
+    <div class="agent-picker-panel" part="agent-picker-panel">
+      <foundation-ai-agent-picker
+        part="agent-picker"
+        :designSystemPrefix="${(x) => x.designSystemPrefix}"
+        :mode="${(x) => x.agentPicker}"
+        :agents="${(x) => x.agents ?? []}"
+        :pinnedAgentName="${(x) => x.pinnedAgentName}"
+        @agent-pinned="${(x, c) => {
+          x.pinnedAgentName = (c.event as CustomEvent<string | null>).detail;
+          x.toggleAgentPicker();
+        }}"
+      ></foundation-ai-agent-picker>
+    </div>
+  `;
+
   // ── Root template ───────────────────────────────────────────────────────────
 
   return html<FoundationAiAssistant>`
@@ -509,28 +583,20 @@ ${(tc) => (tc.foldPath?.length ? `${tc.foldPath.join(' › ')} › ` : '')}<stro
           ></chat-suggestions>
         `,
       )}
+      ${when((x) => x.agentPickerEnabled && x.agentPickerOpen, agentPickerPanelTemplate)}
       ${when(
-        (x) => !(x.state === 'loading' && x.activeAgent?.chatInputDuringExecution === 'hidden'),
+        (x) => !(x.state === 'loading' && x.effectiveChatInputDuringExecution === 'hidden'),
         html<FoundationAiAssistant>`
           <div class="input-row" part="input-row">
             ${when(
-              (x) => !!x.chatConfig.ui?.acceptedFiles,
-              html<FoundationAiAssistant>`
-                <${buttonTag}
-                  class="attach-button"
-                  part="attach-button"
-                  appearance="stealth"
-                  title=${(x) => `Attach file (${x.chatConfig.ui?.acceptedFiles})`}
-                  ?disabled=${(x) => x.state === 'loading'}
-                  @click=${(x) => x.triggerFileInput()}
-                ><${iconTag} name="paperclip"></${iconTag}></${buttonTag}>
-              `,
+              (x) => x.agentPickerEnabled || !!x.chatConfig.ui?.acceptedFiles,
+              inputLeftControlsTemplate,
             )}
             <${textareaTag}
               ${ref('chatInputEl')}
               class="chat-input"
               part="input"
-              placeholder=${(x) => x.placeholder}
+              placeholder=${(x) => x.effectivePlaceholder}
               :value=${(x) => x.inputValue}
               ?disabled=${(x) => x.state === 'loading'}
               @input=${(x, c) => (x.inputValue = (c.event.target as any).value)}