@genesislcap/ai-assistant 14.432.2 → 14.433.1

package/dist/esm/main/main.template.js

@@ -189,6 +189,68 @@ ${(tc) => { var _a; return (((_a = tc.foldPath) === null || _a === void 0 ? void
           </div>
         </div>
       `)}
+  `;
+    // ── Agent picker ────────────────────────────────────────────────────────────
+    const agentToggleButtonTemplate = html `
+    <${buttonTag}
+      class="agent-toggle-button"
+      part="agent-toggle-button"
+      appearance="stealth"
+      title=${(x) => {
+        var _a;
+        return x.agentPickerOpen
+            ? 'Close agent picker'
+            : x.pinnedAgentName !== null
+                ? x.pinnedAgentHint
+                    ? `${x.pinnedAgentName} — ${x.pinnedAgentHint}`
+                    : ((_a = x.pinnedAgentName) !== null && _a !== void 0 ? _a : '')
+                : '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 `<${iconTag} name="chevron-down"></${iconTag}>`)}
+      ${when((x) => !x.agentPickerOpen && x.pinnedAgentName !== null, html `
+          <${iconTag}
+            name="thumbtack"
+            style="${(x) => (x.pinnedAgentColour ? `color: ${x.pinnedAgentColour}` : '')}"
+          ></${iconTag}>
+        `)}
+      ${when((x) => !x.agentPickerOpen && x.pinnedAgentName === null, html `
+          <span class="agent-toggle-label">Auto</span>
+        `)}
+    </${buttonTag}>
+  `;
+    const attachButtonTemplate = html `
+    <${buttonTag}
+      class="attach-button"
+      part="attach-button"
+      appearance="stealth"
+      title=${(x) => { var _a; return `Attach file (${(_a = x.chatConfig.ui) === null || _a === void 0 ? void 0 : _a.acceptedFiles})`; }}
+      ?disabled=${(x) => x.state === 'loading'}
+      @click=${(x) => x.triggerFileInput()}
+    ><${iconTag} name="paperclip"></${iconTag}></${buttonTag}>
+  `;
+    const inputLeftControlsTemplate = html `
+    <div class="input-left-controls" part="input-left-controls">
+      ${when((x) => x.agentPickerEnabled, agentToggleButtonTemplate)}
+      ${when((x) => { var _a; return !!((_a = x.chatConfig.ui) === null || _a === void 0 ? void 0 : _a.acceptedFiles); }, attachButtonTemplate)}
+    </div>
+  `;
+    const agentPickerPanelTemplate = html `
+    <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) => { var _a; return (_a = x.agents) !== null && _a !== void 0 ? _a : []; }}"
+        :pinnedAgentName="${(x) => x.pinnedAgentName}"
+        @agent-pinned="${(x, c) => {
+        x.pinnedAgentName = c.event.detail;
+        x.toggleAgentPicker();
+    }}"
+      ></foundation-ai-agent-picker>
+    </div>
   `;
     // ── Root template ───────────────────────────────────────────────────────────
     return html `
@@ -382,23 +444,15 @@ ${(tc) => { var _a; return (((_a = tc.foldPath) === null || _a === void 0 ? void
             @suggestion-clicked="${(x, c) => x.handleSuggestionClick(c.event.detail)}"
           ></chat-suggestions>
         `)}
-      ${when((x) => { var _a; return !(x.state === 'loading' && ((_a = x.activeAgent) === null || _a === void 0 ? void 0 : _a.chatInputDuringExecution) === 'hidden'); }, html `
+      ${when((x) => x.agentPickerEnabled && x.agentPickerOpen, agentPickerPanelTemplate)}
+      ${when((x) => !(x.state === 'loading' && x.effectiveChatInputDuringExecution === 'hidden'), html `
           <div class="input-row" part="input-row">
-            ${when((x) => { var _a; return !!((_a = x.chatConfig.ui) === null || _a === void 0 ? void 0 : _a.acceptedFiles); }, html `
-                <${buttonTag}
-                  class="attach-button"
-                  part="attach-button"
-                  appearance="stealth"
-                  title=${(x) => { var _a; return `Attach file (${(_a = x.chatConfig.ui) === null || _a === void 0 ? void 0 : _a.acceptedFiles})`; }}
-                  ?disabled=${(x) => x.state === 'loading'}
-                  @click=${(x) => x.triggerFileInput()}
-                ><${iconTag} name="paperclip"></${iconTag}></${buttonTag}>
-              `)}
+            ${when((x) => { var _a; return x.agentPickerEnabled || !!((_a = x.chatConfig.ui) === null || _a === void 0 ? void 0 : _a.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.value)}

package/dist/esm/state/ai-assistant-slice.js

@@ -10,9 +10,12 @@ export const defaultSessionState = {
     contextTokens: undefined,
     contextLimit: undefined,
     activeAgent: undefined,
+    pinnedAgentName: null,
+    agentPickerOpen: false,
     inputValue: '',
     liveSubAgentTrace: [],
     liveSubAgentName: null,
+    subAgentInputOverrides: [],
 };
 export const aiAssistantSlice = createSlice({
     name: 'aiAssistant',
@@ -48,6 +51,12 @@ export const aiAssistantSlice = createSlice({
         setActiveAgent(state, action) {
             state.activeAgent = action.payload;
         },
+        setPinnedAgentName(state, action) {
+            state.pinnedAgentName = action.payload;
+        },
+        setAgentPickerOpen(state, action) {
+            state.agentPickerOpen = action.payload;
+        },
         setInputValue(state, action) {
             state.inputValue = action.payload;
         },
@@ -57,6 +66,12 @@ export const aiAssistantSlice = createSlice({
         setLiveSubAgentName(state, action) {
             state.liveSubAgentName = action.payload;
         },
+        addSubAgentInputOverride(state, action) {
+            state.subAgentInputOverrides.push(action.payload);
+        },
+        removeSubAgentInputOverride(state, action) {
+            state.subAgentInputOverrides = state.subAgentInputOverrides.filter((o) => o.id !== action.payload.id);
+        },
     },
     selectors: {},
 });

package/dist/esm/utils/animated-panel-toggle.js

@@ -0,0 +1,62 @@
+/**
+ * Drives the open/close lifecycle of a slide-out panel inside a component's
+ * shadow root, with a tracked close timer instead of an `animationend`
+ * listener so the panel cannot wedge open if it's unmounted mid-animation
+ * (pop-in/pop-out, dock change, host disconnect).
+ *
+ * @internal
+ */
+export class AnimatedPanelToggle {
+    constructor(host, selector, closeDurationMs, getOpen, setOpen) {
+        this.host = host;
+        this.selector = selector;
+        this.closeDurationMs = closeDurationMs;
+        this.getOpen = getOpen;
+        this.setOpen = setOpen;
+    }
+    queryPanel() {
+        var _a;
+        return (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(this.selector);
+    }
+    toggle() {
+        var _a;
+        if (this.getOpen()) {
+            // Capture the panel reference now so the timer callback strips
+            // `closing` from the same node, regardless of any later remounts.
+            // Leftover `closing` is what breaks the next open: with
+            // `animation-fill-mode: forwards` the slide-out keyframe pins the panel
+            // to opacity 0, so a remount looks like a no-op.
+            const panel = this.queryPanel();
+            panel === null || panel === void 0 ? void 0 : panel.classList.add('closing');
+            if (this.timer != null)
+                clearTimeout(this.timer);
+            this.timer = setTimeout(() => {
+                this.timer = undefined;
+                panel === null || panel === void 0 ? void 0 : panel.classList.remove('closing');
+                this.setOpen(false);
+            }, this.closeDurationMs);
+        }
+        else {
+            // Re-opened mid-close: cancel the pending flip and strip the closing
+            // class so the panel snaps back to the open state.
+            if (this.timer != null) {
+                clearTimeout(this.timer);
+                this.timer = undefined;
+                (_a = this.queryPanel()) === null || _a === void 0 ? void 0 : _a.classList.remove('closing');
+            }
+            this.setOpen(true);
+        }
+    }
+    /**
+     * Synchronously finalise an in-flight close — call from
+     * `disconnectedCallback` so the closed state lands in the store before any
+     * session ref is cleared.
+     */
+    finalize() {
+        if (this.timer == null)
+            return;
+        clearTimeout(this.timer);
+        this.timer = undefined;
+        this.setOpen(false);
+    }
+}

package/dist/esm/utils/index.js

@@ -1,2 +1,3 @@
+export * from './animated-panel-toggle';
 export * from './logger';
 export * from './tool-fold';

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/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/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.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/fallback-agents.ts","../src/config/index.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/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/history-transform.ts","../src/utils/index.ts","../src/utils/logger.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/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/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.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/fallback-agents.ts","../src/config/index.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/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/tool-fold.ts"],"version":"5.9.2"}

package/docs/gemini-empty-response.md

@@ -0,0 +1,110 @@
+# Gemini 2.5 empty-response quirk — follow-up
+
+> **Status:** known issue, mitigated at the consumer level (showcase). Pending a
+> proper transport-level fix in a follow-up PR.
+
+## Symptom
+
+On the first `generateContent` call against `gemini-2.5-flash` (and reportedly
+also `gemini-2.5-pro`), the API occasionally returns a 200 response with **no
+output** when:
+
+- `contents` contains only user-role messages — i.e. no prior model turn, AND
+- the request has a non-trivial `tools` array and/or a long `systemInstruction`.
+
+The shape of the broken response:
+
+```json
+{
+  "candidates": [{
+    "content": { "role": "model" },
+    "finishReason": "STOP",
+    "index": 0
+  }],
+  "usageMetadata": {
+    "promptTokenCount": 2373,
+    "totalTokenCount": 2373
+  }
+}
+```
+
+Note `totalTokenCount === promptTokenCount` — Gemini emitted **zero** output
+tokens. `finishReason` is `STOP` (normal termination), not a safety block. The
+`candidatesTokenCount` field is missing entirely.
+
+In `ChatDriver` this hits the empty-response retry path. Three retries later we
+give up and surface "Remote agent returned no response." The second user turn
+always succeeds because there is now a prior model turn in history (even our
+own "Remote agent returned no response" reply is enough of an anchor).
+
+## Known mitigations
+
+Only one workaround has been reported as effective: **inject a prior model turn
+into the request**. Confirmed ineffective in community reports:
+
+- Lowering `temperature`.
+- Setting `thinkingConfig: { thinkingBudget: 0 }`.
+
+References:
+
+- <https://discuss.ai.google.dev/t/finishreason-stop-but-parts-is-missing-inside-candidate/99331>
+- <https://github.com/livekit/agents/issues/4706>
+- <https://github.com/BerriAI/litellm/issues/24442>
+
+## Current mitigation (showcase only)
+
+The showcase `genesis-assistant` configures a minimal `primerHistory` on the
+trades agent — a benign `[user: "Hi", assistant: "Hi — how can I help…"]`
+exchange. That single fake model turn is enough to satisfy Gemini.
+
+We deliberately keep the primer **innocuous**: any text resembling a system
+update or directive reinforcement (e.g. `[SYSTEM UPDATE]: Your core behavioral
+directives are…`) is caught by Gemini's prompt-injection safety training and
+rejected. Plain greeting language is fine.
+
+## Proposed follow-up: fix in `gemini-transport`
+
+The right place to absorb this is `packages/foundation/foundation-ai/src/transports/gemini-transport.ts`
+— specifically `toGeminiContents`. If the assembled `contents` array contains
+**only** user-role entries (no model turn at all) at send time, prepend a
+synthetic anchor pair:
+
+```ts
+contents.unshift(
+  { role: 'user', parts: [{ text: 'Hi' }] },
+  { role: 'model', parts: [{ text: 'Hi! How can I help today?' }] },
+);
+```
+
+Properties of this approach:
+
+- **Transport-scoped** — only applies when sending to Gemini; other transports
+  (Claude, OpenAI, etc.) are unaffected.
+- **Transparent to the framework** — `ChatDriver` and the rest of the UI never
+  see the synthetic turns. They are not stored in `this.history`, not rendered,
+  not surfaced to consumers.
+- **Self-cleaning** — once the conversation has any real model turn, the
+  injection no-ops.
+
+### Why we did **not** ship this now
+
+A consumer-level fix is more visible and easier to reason about. Hiding the
+workaround inside the transport risks masking related issues — e.g. if the
+shape of system prompts or tool sets ever evolves such that Gemini fails
+elsewhere, an always-on anchor would silently hide the regression. Surfacing
+the workaround as an explicit `primerHistory` on each agent gives consumers a
+chance to notice and remove it when it's no longer needed.
+
+The transport-level fix is worth doing **once** the quirk is confirmed against
+Google's official guidance or a forum/issue closeout — at which point we can
+also remove the per-agent primers.
+
+## Acceptance criteria for the follow-up PR
+
+- [ ] Add the anchor-injection logic in `gemini-transport.ts:toGeminiContents`.
+- [ ] Unit test: contents containing only user messages get the anchor prepended.
+- [ ] Unit test: contents containing any model message do **not** get the anchor.
+- [ ] Remove the showcase `tradesPrimerHistory` and confirm "Book a trade" works
+      on the first turn.
+- [ ] Add an integration note / TODO so the workaround can be ripped out when
+      Google ships a fix.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/ai-assistant",
   "description": "Genesis AI Assistant micro-frontend",
-  "version": "14.432.2",
+  "version": "14.433.1",
   "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.432.2",
-    "@genesislcap/genx": "14.432.2",
-    "@genesislcap/rollup-builder": "14.432.2",
-    "@genesislcap/ts-builder": "14.432.2",
-    "@genesislcap/uvu-playwright-builder": "14.432.2",
-    "@genesislcap/vite-builder": "14.432.2",
-    "@genesislcap/webpack-builder": "14.432.2",
+    "@genesislcap/foundation-testing": "14.433.1",
+    "@genesislcap/genx": "14.433.1",
+    "@genesislcap/rollup-builder": "14.433.1",
+    "@genesislcap/ts-builder": "14.433.1",
+    "@genesislcap/uvu-playwright-builder": "14.433.1",
+    "@genesislcap/vite-builder": "14.433.1",
+    "@genesislcap/webpack-builder": "14.433.1",
     "@types/dompurify": "^3.0.5",
     "@types/marked": "^5.0.2"
   },
   "dependencies": {
-    "@genesislcap/foundation-ai": "14.432.2",
-    "@genesislcap/foundation-logger": "14.432.2",
-    "@genesislcap/foundation-redux": "14.432.2",
-    "@genesislcap/foundation-ui": "14.432.2",
-    "@genesislcap/foundation-utils": "14.432.2",
-    "@genesislcap/rapid-design-system": "14.432.2",
-    "@genesislcap/web-core": "14.432.2",
+    "@genesislcap/foundation-ai": "14.433.1",
+    "@genesislcap/foundation-logger": "14.433.1",
+    "@genesislcap/foundation-redux": "14.433.1",
+    "@genesislcap/foundation-ui": "14.433.1",
+    "@genesislcap/foundation-utils": "14.433.1",
+    "@genesislcap/rapid-design-system": "14.433.1",
+    "@genesislcap/web-core": "14.433.1",
     "dompurify": "^3.3.1",
     "marked": "^17.0.3"
   },
@@ -93,5 +93,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a93cc1972a01671997a744f7ce0477ca5809006d"
+  "gitHead": "320ccc8baed03cd24394a913aed3ae72e1d24991"
 }

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

@@ -0,0 +1,2 @@
+/** Sentinel value used by the segmented control / select to represent "Auto". */
+export const AGENT_PICKER_AUTO_VALUE = '__auto__';

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

@@ -0,0 +1,74 @@
+import { css } from '@genesislcap/web-core';
+
+export const styles = css`
+  :host {
+    display: block;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  .picker {
+    position: relative;
+    padding: 6px calc(var(--design-unit) * 3px);
+    background-color: var(--neutral-layer-2);
+  }
+
+  /* Clipping wrapper. The inner segmented-control is naturally inline-flex
+     and auto-sizes to its segments, so it would overflow the panel without
+     ever reporting scrollWidth > clientWidth. By giving the wrapper a
+     constrained width (flex+min-width:0) and overflow:hidden, the wrapper's
+     scrollWidth reflects the segments' natural width while clientWidth is
+     the available width — that's what we measure to decide on the fallback. */
+  .segmented-row {
+    display: flex;
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  /* When the fallback select is showing, take the segmented row out of layout
+     but keep it in the DOM so the ResizeObserver can re-measure when the
+     container grows back and we can swap back to segmented-control. */
+  .picker[data-effective='select'] .segmented-row {
+    position: absolute;
+    inset: 6px calc(var(--design-unit) * 3px);
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  .segmented-control {
+    flex: 0 0 auto;
+  }
+
+  .select-fallback {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .select-label {
+    font-family: var(--body-font);
+    font-size: 0.8em;
+    color: var(--neutral-foreground-hint, var(--neutral-foreground-rest));
+  }
+
+  .select-control {
+    flex: 1 1 auto;
+    min-width: 0;
+    padding: 4px 8px;
+    background: var(--neutral-layer-3);
+    color: var(--neutral-foreground-rest);
+    border: 1px solid var(--neutral-stroke-rest);
+    border-radius: 4px;
+    font-family: var(--body-font);
+    font-size: 0.85em;
+    cursor: pointer;
+  }
+
+  .select-control:focus-visible {
+    outline: 2px solid var(--accent-fill-rest);
+    outline-offset: 1px;
+  }
+`;

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

@@ -0,0 +1,89 @@
+import { html, ref, repeat, ViewTemplate, when } from '@genesislcap/web-core';
+import type { AgentConfig } from '../../config/config';
+import type { AgentPicker } from './agent-picker';
+import { AGENT_PICKER_AUTO_VALUE } from './agent-picker.constants';
+
+const AUTO_LABEL = 'Auto';
+const AUTO_HINT = 'Let the orchestrator pick the right agent for each message.';
+
+/** @internal */
+export const AgentPickerTemplate = (designSystemPrefix: string): ViewTemplate<AgentPicker> => {
+  const segmentedControlTag = `${designSystemPrefix}-segmented-control`;
+  const segmentedItemTag = `${designSystemPrefix}-segmented-item`;
+
+  return html<AgentPicker>`
+    <div class="picker" data-effective="${(x) => x.effectiveMode}" part="picker">
+      ${when(
+        (x) => x.mode === 'segmented-control',
+        html<AgentPicker>`
+          <div class="segmented-row" ${ref('segmentedRowEl')}>
+            <${segmentedControlTag}
+              class="segmented-control"
+              appearance="primary"
+              aria-label="Active agent"
+              :value="${(x) => x.currentValue}"
+              @change="${(x, c) => {
+                const value = (c.event.currentTarget as HTMLElement & { value?: string }).value;
+                // The segmented-control re-emits 'change' on its initial value
+                // sync; ignore it so we don't close the panel on open.
+                if (typeof value !== 'string' || value === x.currentValue) return;
+                x.selectByValue(value);
+              }}"
+            >
+              <${segmentedItemTag}
+                value="${AGENT_PICKER_AUTO_VALUE}"
+                title="${AUTO_HINT}"
+              >${AUTO_LABEL}</${segmentedItemTag}>
+              ${repeat(
+                (x) => x.selectableAgents,
+                html<AgentConfig, AgentPicker>`
+                  <${segmentedItemTag}
+                    value="${(a) => a.name}"
+                    title="${(a) => a.manualSelection?.hint ?? ''}"
+                  >${(a) => a.name}</${segmentedItemTag}>
+                `,
+              )}
+            </${segmentedControlTag}>
+          </div>
+        `,
+      )}
+      ${when(
+        (x) => x.effectiveMode === 'select',
+        html<AgentPicker>`
+          <div class="select-fallback">
+            <span class="select-label">Agent:</span>
+            <select
+              class="select-control"
+              aria-label="Active agent"
+              @change="${(x, c) => {
+                const value = (c.event.target as HTMLSelectElement).value;
+                x.selectByValue(value);
+              }}"
+            >
+              <option
+                value="${AGENT_PICKER_AUTO_VALUE}"
+                title="${AUTO_HINT}"
+                ?selected="${(x) => x.pinnedAgentName === null}"
+              >
+                ${AUTO_LABEL}
+              </option>
+              ${repeat(
+                (x) => x.selectableAgents,
+                html<AgentConfig, AgentPicker>`
+                  <option
+                    value="${(a) => a.name}"
+                    title="${(a) => a.manualSelection?.hint ?? ''}"
+                    ?selected="${(a, c) => c.parent.pinnedAgentName === a.name}"
+                  >
+                    ${(a) =>
+                      a.manualSelection?.hint ? `${a.name} — ${a.manualSelection.hint}` : a.name}
+                  </option>
+                `,
+              )}
+            </select>
+          </div>
+        `,
+      )}
+    </div>
+  `;
+};