xtralab 0.11.1 → 0.12.1

package/lib/askAgent/queue.js

@@ -0,0 +1,207 @@
+import { Signal } from '@lumino/signaling';
+let idCounter = 0;
+function nextId() {
+    return `queued-${Date.now().toString(36)}-${idCounter++}`;
+}
+/**
+ * The accumulated ask-agent prompts awaiting a batch send.
+ *
+ * Queueing decouples writing review comments from deciding where they go:
+ * the popup appends entries here instead of sending, the side panel lists
+ * and edits them, and one batch send flushes the lot, delivering each
+ * destination's prompts as one numbered message. The queue itself is a
+ * plain in-memory model; the plugin mirrors it into the JupyterLab state
+ * database (via {@link serializeQueuedPrompts}) so a page reload does not
+ * silently drop typed comments.
+ */
+export class PromptQueue {
+    constructor(items = []) {
+        this._changed = new Signal(this);
+        this._items = items;
+    }
+    /**
+     * The queued prompts, oldest first.
+     */
+    get items() {
+        return this._items;
+    }
+    /**
+     * Emitted whenever the queue contents change.
+     */
+    get changed() {
+        return this._changed;
+    }
+    /**
+     * Append a prompt to the queue.
+     */
+    add(context, instruction, target) {
+        this._items = [
+            ...this._items,
+            { id: nextId(), context, instruction, target }
+        ];
+        this._changed.emit();
+    }
+    /**
+     * Replace the instruction of the queued prompt `id`, if still present.
+     */
+    updateInstruction(id, instruction) {
+        let touched = false;
+        this._items = this._items.map(item => {
+            if (item.id !== id || item.instruction === instruction) {
+                return item;
+            }
+            touched = true;
+            return { ...item, instruction };
+        });
+        if (touched) {
+            this._changed.emit();
+        }
+    }
+    /**
+     * Repoint the queued prompt `id` at `target`, if still present.
+     */
+    updateTarget(id, target) {
+        let touched = false;
+        this._items = this._items.map(item => {
+            if (item.id !== id) {
+                return item;
+            }
+            touched = true;
+            return { ...item, target };
+        });
+        if (touched) {
+            this._changed.emit();
+        }
+    }
+    /**
+     * Remove the queued prompt `id`, if still present.
+     */
+    remove(id) {
+        this.removeMany([id]);
+    }
+    /**
+     * Remove several queued prompts at once (one signal emission) — used when
+     * a batch send succeeds for one target while other targets' prompts stay.
+     */
+    removeMany(ids) {
+        const drop = new Set(ids);
+        const remaining = this._items.filter(item => !drop.has(item.id));
+        if (remaining.length !== this._items.length) {
+            this._items = remaining;
+            this._changed.emit();
+        }
+    }
+    /**
+     * Drop every queued prompt.
+     */
+    clear() {
+        if (this._items.length > 0) {
+            this._items = [];
+            this._changed.emit();
+        }
+    }
+    /**
+     * Replace the whole queue (used to restore and to undo a clear).
+     */
+    reset(items) {
+        this._items = [...items];
+        this._changed.emit();
+    }
+}
+/**
+ * Validate one persisted context. Only fields that still match the
+ * `IAskAgentContext` contract are kept, so schema drift (or manual
+ * state-database edits) degrades an entry instead of poisoning the queue.
+ */
+function sanitizeContext(value) {
+    if (value === null || typeof value !== 'object') {
+        return null;
+    }
+    const raw = value;
+    if (typeof raw.path !== 'string' || raw.path.length === 0) {
+        return null;
+    }
+    const context = {
+        path: raw.path,
+        text: typeof raw.text === 'string' ? raw.text : ''
+    };
+    if (typeof raw.cwd === 'string') {
+        context.cwd = raw.cwd;
+    }
+    const cell = raw.cell;
+    if (cell !== null &&
+        typeof cell === 'object' &&
+        typeof cell.index === 'number' &&
+        typeof cell.type === 'string') {
+        context.cell = { index: cell.index, type: cell.type };
+    }
+    if (typeof raw.startLine === 'number') {
+        context.startLine = raw.startLine;
+    }
+    if (typeof raw.endLine === 'number') {
+        context.endLine = raw.endLine;
+    }
+    if (typeof raw.linesInWorkingFile === 'boolean') {
+        context.linesInWorkingFile = raw.linesInWorkingFile;
+    }
+    if (typeof raw.location === 'string') {
+        context.location = raw.location;
+    }
+    if (typeof raw.note === 'string') {
+        context.note = raw.note;
+    }
+    return context;
+}
+/**
+ * Validate one persisted target; anything that does not parse becomes
+ * `null`, which the panel surfaces as "pick where to send this".
+ */
+function sanitizeTarget(value) {
+    if (value === null || typeof value !== 'object') {
+        return null;
+    }
+    const raw = value;
+    if (raw.kind === 'new' && typeof raw.agentId === 'string') {
+        return { kind: 'new', agentId: raw.agentId };
+    }
+    if (raw.kind === 'session' && typeof raw.name === 'string') {
+        return { kind: 'session', name: raw.name };
+    }
+    return null;
+}
+/**
+ * Rebuild queued prompts from a value read back from the state database.
+ * Entries that no longer parse are dropped silently — the queue is a
+ * convenience buffer, not a document.
+ */
+export function deserializeQueuedPrompts(value) {
+    if (!Array.isArray(value)) {
+        return [];
+    }
+    const items = [];
+    for (const entry of value) {
+        const record = entry;
+        const context = sanitizeContext(record === null || record === void 0 ? void 0 : record.context);
+        if (context !== null && typeof (record === null || record === void 0 ? void 0 : record.instruction) === 'string') {
+            items.push({
+                id: nextId(),
+                context,
+                instruction: record.instruction,
+                target: sanitizeTarget(record === null || record === void 0 ? void 0 : record.target)
+            });
+        }
+    }
+    return items;
+}
+/**
+ * The queue as a JSON value for the state database. Ids are session-scoped
+ * handles, so they are not persisted; {@link deserializeQueuedPrompts}
+ * assigns fresh ones on load.
+ */
+export function serializeQueuedPrompts(items) {
+    return items.map(({ context, instruction, target }) => ({
+        context: { ...context },
+        instruction,
+        target: target === null ? null : { ...target }
+    }));
+}

package/lib/askAgent/queuePanel.d.ts

@@ -0,0 +1,76 @@
+import type { TranslationBundle } from '@jupyterlab/translation';
+import { ReactWidget } from '@jupyterlab/ui-components';
+import type { CommandRegistry } from '@lumino/commands';
+import type { Message } from '@lumino/messaging';
+import type { IAgent } from '../launcher/agents';
+import type { PromptQueue } from './queue';
+import type { ISessionTarget } from './targetPicker';
+/**
+ * The right-sidebar review panel for queued ask-agent prompts.
+ *
+ * Lists every queued comment — jump-to-code context line, snippet preview,
+ * editable instruction, its own destination picker, remove button — plus a
+ * send button that flushes the whole queue in one go: prompts sharing a
+ * destination are combined into one numbered message, and each destination
+ * gets its own delivery. The widget re-renders on queue changes itself; the
+ * plugin additionally ties it to the agent registry and terminal signals so
+ * the destination choices stay current.
+ */
+export declare class AskAgentQueuePanel extends ReactWidget {
+    constructor(options: AskAgentQueuePanel.IOptions);
+    render(): JSX.Element;
+    /**
+     * Dispose on close (e.g. the close button when the panel has been dragged
+     * to the main area) rather than leaving a detached, reusable widget
+     * behind. The plugin recreates the panel in the side area on demand; the
+     * queue itself lives on in the model.
+     */
+    protected onCloseRequest(msg: Message): void;
+    private _onQueueChanged;
+    private _options;
+}
+/**
+ * A namespace for `AskAgentQueuePanel` statics.
+ */
+export declare namespace AskAgentQueuePanel {
+    /**
+     * Construction options for {@link AskAgentQueuePanel}.
+     */
+    interface IOptions {
+        /**
+         * The queue the panel lists and edits.
+         */
+        queue: PromptQueue;
+        /**
+         * Command registry used to open queued locations in the editor.
+         */
+        commands: CommandRegistry;
+        /**
+         * Live reader of the prompt-capable agents (called on every render).
+         */
+        agents: () => IAgent[];
+        /**
+         * Live reader of the running agent terminals (called on every render).
+         */
+        targets: () => ISessionTarget[];
+        /**
+         * Live reader of whether a batch send is in flight (called on every
+         * render). While true the send and clear buttons are disabled, so one
+         * flush cannot be double-delivered.
+         */
+        sending: () => boolean;
+        /**
+         * Translation bundle for the panel's own labels.
+         */
+        trans: TranslationBundle;
+        /**
+         * Send every queued prompt to its own destination (the panel only calls
+         * this while all instructions and destinations are valid).
+         */
+        onSend: () => void;
+        /**
+         * Clear the queue (the plugin offers an undo toast).
+         */
+        onClear: () => void;
+    }
+}

package/lib/askAgent/queuePanel.js

@@ -0,0 +1,188 @@
+import { Notification } from '@jupyterlab/apputils';
+import { PathExt } from '@jupyterlab/coreutils';
+import { closeIcon, HTMLSelect, ReactWidget } from '@jupyterlab/ui-components';
+import * as React from 'react';
+import { contextSummary } from './popup';
+import { serverPath } from './prompt';
+/**
+ * Command the context buttons dispatch; keeps the panel decoupled from the plugin.
+ */
+const HIGHLIGHT_LINES_COMMAND = 'xtralab:highlight-lines';
+/**
+ * Textarea height that fits `text` without scrolling, within sane bounds:
+ * tall enough to look editable, short enough that one long comment cannot
+ * crowd out the rest of the queue.
+ */
+function rowsFor(text) {
+    return Math.min(8, Math.max(2, text.split('\n').length));
+}
+/**
+ * A target as a `<select>` option value: `session:<name>` for a running
+ * agent terminal, `new:<agentId>` for a fresh terminal, `''` for a missing
+ * target (the placeholder option).
+ */
+function encodeTarget(target) {
+    if (target === null) {
+        return '';
+    }
+    return target.kind === 'session'
+        ? `session:${target.name}`
+        : `new:${target.agentId}`;
+}
+function decodeTarget(value) {
+    if (value.startsWith('session:')) {
+        return { kind: 'session', name: value.slice('session:'.length) };
+    }
+    if (value.startsWith('new:')) {
+        return { kind: 'new', agentId: value.slice('new:'.length) };
+    }
+    return null;
+}
+/**
+ * Whether `target` can be sent to right now: its session is still running,
+ * or its agent still accepts a command-line prompt.
+ */
+function targetIsLive(target, agents, targets) {
+    if (target === null) {
+        return false;
+    }
+    return target.kind === 'session'
+        ? targets.some(session => session.name === target.name)
+        : agents.some(agent => agent.id === target.agentId);
+}
+function QueuePanelComponent(props) {
+    const { queue, commands, agents: readAgents, targets: readTargets, sending: readSending, trans, onSend, onClear } = props;
+    // Snapshots for this render; the widget re-renders on every queue, agent
+    // registry and terminal change, so these stay current.
+    const items = queue.items;
+    const agents = readAgents();
+    const targets = readTargets();
+    const sending = readSending();
+    const complete = items.every(item => item.instruction.trim().length > 0);
+    const targeted = items.every(item => targetIsLive(item.target, agents, targets));
+    const canSend = items.length > 0 && complete && targeted && !sending;
+    const jumpTo = (item) => {
+        var _a;
+        const { context } = item;
+        const path = serverPath(context);
+        // The highlighter needs line numbers that index the working file:
+        // notebook lines are cell-relative (or raw-JSON offsets), and diff
+        // selections may come from another revision — just open the document
+        // in those cases.
+        const jump = context.cell === undefined &&
+            context.startLine !== undefined &&
+            context.linesInWorkingFile !== false &&
+            PathExt.extname(path) !== '.ipynb'
+            ? commands.execute(HIGHLIGHT_LINES_COMMAND, {
+                path,
+                line: context.startLine,
+                endLine: (_a = context.endLine) !== null && _a !== void 0 ? _a : context.startLine
+            })
+            : commands.execute('docmanager:open', { path });
+        jump.catch((error) => {
+            console.error('xtralab: failed to open the queued location', error);
+            Notification.error(trans.__('Could not open %1', path), {
+                autoClose: 3000
+            });
+        });
+    };
+    if (items.length === 0) {
+        return (React.createElement("div", { className: "jp-xtralab-AskAgentQueue-body" },
+            React.createElement("div", { className: "jp-xtralab-AskAgentQueue-blank" }, trans.__('No queued prompts. Select code in an editor, notebook or git diff and choose “Queue” in the ask-agent popup; each prompt keeps its own destination and everything is sent in one go.'))));
+    }
+    return (React.createElement("div", { className: "jp-xtralab-AskAgentQueue-body" },
+        React.createElement("ul", { className: "jp-xtralab-AskAgentQueue-list" }, items.map(item => {
+            var _a, _b, _c, _d;
+            const summary = contextSummary(item.context, trans);
+            const missing = item.instruction.trim().length === 0;
+            const target = item.target;
+            const live = targetIsLive(target, agents, targets);
+            // Say what sending will do for this prompt — paste into a running
+            // terminal, or start a fresh one — and badge it with the agent's
+            // icon, so a mixed queue can be scanned without opening dropdowns.
+            let icon = null;
+            let targetTitle = trans.__('The destination picked for this prompt is gone — choose another');
+            if (live && target !== null) {
+                if (target.kind === 'session') {
+                    icon =
+                        (_b = (_a = targets.find(session => session.name === target.name)) === null || _a === void 0 ? void 0 : _a.icon) !== null && _b !== void 0 ? _b : null;
+                    targetTitle = trans.__('Sends into the agent running in terminal %1', target.name);
+                }
+                else {
+                    const agent = agents.find(entry => entry.id === target.agentId);
+                    icon = (_c = agent === null || agent === void 0 ? void 0 : agent.icon) !== null && _c !== void 0 ? _c : null;
+                    targetTitle = trans.__('Starts %1 in a new terminal', (_d = agent === null || agent === void 0 ? void 0 : agent.label) !== null && _d !== void 0 ? _d : target.agentId);
+                }
+            }
+            return (React.createElement("li", { className: "jp-xtralab-AskAgentQueue-item", key: item.id },
+                React.createElement("div", { className: "jp-xtralab-AskAgentQueue-itemHeader" },
+                    React.createElement("button", { type: "button", className: "jp-xtralab-AskAgentQueue-itemContext", title: trans.__('Open %1 in the editor', serverPath(item.context)), onClick: () => jumpTo(item) }, summary),
+                    React.createElement("button", { type: "button", className: "jp-xtralab-AskAgentQueue-itemRemove", title: trans.__('Remove from the queue'), "aria-label": trans.__('Remove from the queue'), onClick: () => queue.remove(item.id) },
+                        React.createElement(closeIcon.react, { tag: "span", className: "jp-xtralab-AskAgentQueue-itemRemoveIcon" }))),
+                item.context.text.length > 0 && (React.createElement("pre", { className: "jp-xtralab-AskAgentQueue-snippet" }, item.context.text)),
+                React.createElement("textarea", { className: "jp-xtralab-AskAgentQueue-instruction", rows: rowsFor(item.instruction), spellCheck: false, "aria-invalid": missing, "aria-label": trans.__('Instruction about %1', summary), placeholder: trans.__('Describe the change…'), defaultValue: item.instruction, onChange: event => queue.updateInstruction(item.id, event.target.value) }),
+                React.createElement("div", { className: "jp-xtralab-AskAgentQueue-itemTargetRow" },
+                    React.createElement("span", { className: "jp-xtralab-AskAgentQueue-itemTargetIcon", "aria-hidden": "true" }, icon !== null && React.createElement(icon.react, { tag: "span" })),
+                    React.createElement(HTMLSelect, { className: "jp-xtralab-AskAgentQueue-itemTarget", "aria-invalid": !live, "aria-label": trans.__('Send to'), title: targetTitle, value: live ? encodeTarget(target) : '', onChange: event => {
+                            const picked = decodeTarget(event.target.value);
+                            if (picked !== null) {
+                                queue.updateTarget(item.id, picked);
+                            }
+                        } },
+                        !live && (React.createElement("option", { value: "", disabled: true }, trans.__('Choose where to send…'))),
+                        targets.length > 0 && (React.createElement("optgroup", { label: trans.__('Running agents') }, targets.map(session => (React.createElement("option", { key: session.name, value: `session:${session.name}` }, trans.__('Terminal %1 · %2', session.name, session.label)))))),
+                        agents.length > 0 && (React.createElement("optgroup", { label: trans.__('New terminal') }, agents.map(agent => (React.createElement("option", { key: agent.id, value: `new:${agent.id}` }, trans.__('New terminal · %1', agent.label))))))))));
+        })),
+        React.createElement("div", { className: "jp-xtralab-AskAgentQueue-footer" },
+            agents.length === 0 && targets.length === 0 && (React.createElement("div", { className: "jp-xtralab-AskAgentQueue-noTargets" }, trans.__('No agent accepts an initial prompt. Configure agents in the launcher settings.'))),
+            React.createElement("div", { className: "jp-xtralab-AskAgentQueue-actions" },
+                React.createElement("button", { type: "button", className: "jp-xtralab-AskAgentQueue-clear", disabled: sending, title: trans.__('Remove every queued prompt'), onClick: onClear }, trans.__('Clear')),
+                React.createElement("button", { type: "button", className: "jp-xtralab-AskAgentQueue-send", disabled: !canSend, title: sending
+                        ? trans.__('Sending…')
+                        : !complete
+                            ? trans.__('Every queued prompt needs an instruction')
+                            : !targeted
+                                ? trans.__('Every queued prompt needs a destination')
+                                : trans.__('Send each queued prompt to its chosen destination'), onClick: () => {
+                        if (canSend) {
+                            onSend();
+                        }
+                    } }, sending
+                    ? trans.__('Sending…')
+                    : trans._n('Send %1 prompt', 'Send %1 prompts', items.length))))));
+}
+/**
+ * The right-sidebar review panel for queued ask-agent prompts.
+ *
+ * Lists every queued comment — jump-to-code context line, snippet preview,
+ * editable instruction, its own destination picker, remove button — plus a
+ * send button that flushes the whole queue in one go: prompts sharing a
+ * destination are combined into one numbered message, and each destination
+ * gets its own delivery. The widget re-renders on queue changes itself; the
+ * plugin additionally ties it to the agent registry and terminal signals so
+ * the destination choices stay current.
+ */
+export class AskAgentQueuePanel extends ReactWidget {
+    constructor(options) {
+        super();
+        this._options = options;
+        this.addClass('jp-xtralab-AskAgentQueue');
+        options.queue.changed.connect(this._onQueueChanged, this);
+    }
+    render() {
+        return React.createElement(QueuePanelComponent, { ...this._options });
+    }
+    /**
+     * Dispose on close (e.g. the close button when the panel has been dragged
+     * to the main area) rather than leaving a detached, reusable widget
+     * behind. The plugin recreates the panel in the side area on demand; the
+     * queue itself lives on in the model.
+     */
+    onCloseRequest(msg) {
+        super.onCloseRequest(msg);
+        this.dispose();
+    }
+    _onQueueChanged() {
+        this.update();
+    }
+}

package/lib/askAgent/targetPicker.d.ts

@@ -0,0 +1,58 @@
+import type { TranslationBundle } from '@jupyterlab/translation';
+import { LabIcon } from '@jupyterlab/ui-components';
+import type { IAgent } from '../launcher/agents';
+/**
+ * A running agent terminal offered as a prompt target: the session data
+ * from `IAgentTerminals` plus the matching agent's icon, resolved by the
+ * plugin so these components stay presentation-only.
+ */
+export interface ISessionTarget {
+    /**
+     * The terminal session name.
+     */
+    name: string;
+    /**
+     * The session's display label (usually the agent's name).
+     */
+    label: string;
+    /**
+     * The agent's latest activity line, when one is available.
+     */
+    activity: string | null;
+    /**
+     * The running agent's icon.
+     */
+    icon: LabIcon;
+}
+/**
+ * The chip row picking where a prompt goes: "New terminal" plus one chip
+ * per running agent session. Renders nothing while no agent session is
+ * running (a new terminal is then the only possibility and the row would
+ * be noise).
+ */
+export declare function TargetChips(props: {
+    /**
+     * Agents that could start in a new terminal; gates the "New terminal" chip.
+     */
+    agents: IAgent[];
+    /**
+     * The running agent sessions.
+     */
+    targets: ISessionTarget[];
+    /**
+     * The selected session name, or `null` for a new terminal.
+     */
+    targetName: string | null;
+    trans: TranslationBundle;
+    onSelect: (targetName: string | null) => void;
+}): JSX.Element | null;
+/**
+ * The icon radiogroup picking which agent a new terminal starts with.
+ * Renders nothing when no agent accepts an initial prompt.
+ */
+export declare function AgentChoices(props: {
+    agents: IAgent[];
+    agentId: string;
+    trans: TranslationBundle;
+    onSelect: (agentId: string) => void;
+}): JSX.Element | null;

package/lib/askAgent/targetPicker.js

@@ -0,0 +1,74 @@
+import { addIcon } from '@jupyterlab/ui-components';
+import * as React from 'react';
+/**
+ * Keyboard support shared by the two radiogroups below, following the ARIA
+ * radio-group pattern: the group is one tab stop (only the checked radio is
+ * tabbable) and the arrow keys move the selection to the neighbouring
+ * radio, wrapping around. Selection follows focus, so the handler clicks
+ * the neighbour and the re-render moves the roving tabindex along.
+ */
+function onRadioGroupKeyDown(event) {
+    let delta;
+    switch (event.key) {
+        case 'ArrowRight':
+        case 'ArrowDown':
+            delta = 1;
+            break;
+        case 'ArrowLeft':
+        case 'ArrowUp':
+            delta = -1;
+            break;
+        default:
+            return;
+    }
+    const radios = Array.from(event.currentTarget.querySelectorAll('[role="radio"]'));
+    const index = radios.findIndex(radio => radio === event.target);
+    if (index === -1) {
+        return;
+    }
+    event.preventDefault();
+    const next = radios[(index + delta + radios.length) % radios.length];
+    next.focus();
+    next.click();
+}
+/**
+ * The chip row picking where a prompt goes: "New terminal" plus one chip
+ * per running agent session. Renders nothing while no agent session is
+ * running (a new terminal is then the only possibility and the row would
+ * be noise).
+ */
+export function TargetChips(props) {
+    const { agents, targets, targetName, trans, onSelect } = props;
+    if (targets.length === 0) {
+        return null;
+    }
+    return (React.createElement("div", { className: "jp-xtralab-AskAgent-targets", role: "radiogroup", "aria-label": trans.__('Send to'), onKeyDown: onRadioGroupKeyDown },
+        agents.length > 0 && (React.createElement("button", { type: "button", role: "radio", "aria-checked": targetName === null, tabIndex: targetName === null ? 0 : -1, title: trans.__('Start the agent in a new terminal'), className: 'jp-xtralab-AskAgent-targetButton' +
+                (targetName === null ? ' jp-mod-selected' : ''), 
+            // Keep focus where the user is typing while picking a target.
+            onMouseDown: event => event.preventDefault(), onClick: () => onSelect(null) },
+            React.createElement(addIcon.react, { tag: "span", className: "jp-xtralab-AskAgent-targetIcon" }),
+            React.createElement("span", { className: "jp-xtralab-AskAgent-targetLabel" }, trans.__('New terminal')))),
+        targets.map(target => (React.createElement("button", { key: target.name, type: "button", role: "radio", "aria-checked": target.name === targetName, tabIndex: target.name === targetName ? 0 : -1, title: target.activity
+                ? trans.__('%1 · %2 — %3', target.label, target.name, target.activity)
+                : trans.__('%1 · %2', target.label, target.name), className: 'jp-xtralab-AskAgent-targetButton' +
+                (target.name === targetName ? ' jp-mod-selected' : ''), onMouseDown: event => event.preventDefault(), onClick: () => onSelect(target.name) },
+            React.createElement(target.icon.react, { tag: "span", className: "jp-xtralab-AskAgent-targetIcon" }),
+            React.createElement("span", { className: "jp-xtralab-AskAgent-targetLabel" }, target.label),
+            React.createElement("span", { className: "jp-xtralab-AskAgent-targetName" }, target.name))))));
+}
+/**
+ * The icon radiogroup picking which agent a new terminal starts with.
+ * Renders nothing when no agent accepts an initial prompt.
+ */
+export function AgentChoices(props) {
+    const { agents, agentId, trans, onSelect } = props;
+    if (agents.length === 0) {
+        return null;
+    }
+    return (React.createElement("div", { className: "jp-xtralab-AskAgent-agents", role: "radiogroup", "aria-label": trans.__('Agent'), onKeyDown: onRadioGroupKeyDown }, agents.map(agent => (React.createElement("button", { key: agent.id, type: "button", role: "radio", "aria-checked": agent.id === agentId, tabIndex: agent.id === agentId ? 0 : -1, title: agent.label, "aria-label": agent.label, className: 'jp-xtralab-AskAgent-agentButton' +
+            (agent.id === agentId ? ' jp-mod-selected' : ''), 
+        // Keep focus where the user is typing while picking an agent.
+        onMouseDown: event => event.preventDefault(), onClick: () => onSelect(agent.id) },
+        React.createElement(agent.icon.react, { tag: "span", className: "jp-xtralab-AskAgent-agentIcon" }))))));
+}