@theia/ai-core-ui 1.75.0-next.8 → 1.75.0

package/src/browser/ai-configuration/components/ai-configuration-controls.tsx

@@ -0,0 +1,382 @@
+// *****************************************************************************
+// Copyright (C) 2026 EclipseSource and others.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+/**
+ * Presentational, DI-free form controls shared across the AI configuration pages so that a given
+ * logical control (a toggle, a text input, a select, a numeric stepper, a chip/tag editor) looks
+ * and behaves the same regardless of which category renders it. Owners pass in the current value
+ * and an `onChange`/`onCommit` callback; controls that edit free text commit on blur/Enter so that
+ * typing does not write a preference per keystroke.
+ *
+ * All classes are prefixed `ai-config-` and are styled in `ai-configuration-components.css`.
+ */
+
+import { nls } from '@theia/core';
+import { codicon } from '@theia/core/lib/browser';
+import { SelectComponent, SelectOption } from '@theia/core/lib/browser/widgets/select-component';
+import * as React from '@theia/core/shared/react';
+
+/** Accessible toggle switch backed by a real checkbox; `large` renders the hero-sized variant. */
+export const AiToggleSwitch: React.FC<{
+    checked: boolean;
+    ariaLabel: string;
+    disabled?: boolean;
+    large?: boolean;
+    onChange: (checked: boolean) => void;
+}> = ({ checked, ariaLabel, disabled, large, onChange }) => (
+    <label className={`ai-config-switch${large ? ' ai-config-switch-large' : ''}`}>
+        <input
+            type='checkbox'
+            checked={checked}
+            disabled={disabled}
+            aria-label={ariaLabel}
+            onChange={e => onChange(e.target.checked)}
+        />
+        <span className='ai-config-switch-track'><span className='ai-config-switch-thumb'></span></span>
+    </label>
+);
+
+/** Single-line text input committing on blur or Enter (so typing does not write a preference per keystroke). */
+export const AiTextInput: React.FC<{
+    value: string;
+    ariaLabel: string;
+    placeholder?: string;
+    disabled?: boolean;
+    monospace?: boolean;
+    /** Masks the value (`type=password`) and disables autocomplete/spellcheck; used for API keys and secrets. */
+    password?: boolean;
+    /** Marks the input as invalid (error border) and, with {@link errorMessage}, shows the message beneath it. */
+    invalid?: boolean;
+    /** Validation message shown under the input when {@link invalid} is set. */
+    errorMessage?: string;
+    onCommit: (value: string) => void;
+}> = ({ value, ariaLabel, placeholder, disabled, monospace, password, invalid, errorMessage, onCommit }) => {
+    const [draft, setDraft] = React.useState(value);
+    React.useEffect(() => setDraft(value), [value]);
+    const commitIfChanged = (): void => {
+        if (draft !== value) {
+            onCommit(draft);
+        }
+    };
+    return <span className='ai-config-input-wrap'>
+        <input
+            className={`theia-input ai-config-input${monospace ? ' ai-config-input-mono' : ''}${invalid ? ' error' : ''}`}
+            type={password ? 'password' : 'text'}
+            value={draft}
+            aria-label={ariaLabel}
+            placeholder={placeholder}
+            disabled={disabled}
+            autoComplete={password ? 'off' : undefined}
+            spellCheck={false}
+            onChange={e => setDraft(e.target.value)}
+            onBlur={commitIfChanged}
+            onKeyDown={e => { if (e.key === 'Enter') { commitIfChanged(); } }}
+        />
+        {invalid && errorMessage && <span className='ai-config-input-error'>{errorMessage}</span>}
+    </span>;
+};
+
+/** Keeps a value inside the preference's `minimum`/`maximum`, either of which may be absent. */
+export function clampNumber(value: number, min: number | undefined, max: number | undefined): number {
+    let result = value;
+    if (min !== undefined) {
+        result = Math.max(min, result);
+    }
+    if (max !== undefined) {
+        result = Math.min(max, result);
+    }
+    return result;
+}
+
+/** A `− value +` numeric stepper. Commits on blur/Enter (typing) and immediately on the buttons. */
+export const AiNumberStepper: React.FC<{
+    value: number;
+    ariaLabel: string;
+    /**
+     * Whole numbers only, i.e. the preference is declared `integer`. A `number` preference keeps what the
+     * user typed: rounding it would turn a delay of `1.5` seconds into `2` on commit.
+     */
+    integer?: boolean;
+    min?: number;
+    max?: number;
+    disabled?: boolean;
+    onCommit: (value: number) => void;
+}> = ({ value, ariaLabel, integer, min, max, disabled, onCommit }) => {
+    const [draft, setDraft] = React.useState(String(value));
+    React.useEffect(() => setDraft(String(value)), [value]);
+    const commitDraft = (): void => {
+        const parsed = Number(draft);
+        const rounded = integer ? Math.round(parsed) : parsed;
+        const next = clampNumber(Number.isNaN(parsed) ? value : rounded, min, max);
+        setDraft(String(next));
+        if (next !== value) {
+            onCommit(next);
+        }
+    };
+    const step = (delta: number): void => {
+        const next = clampNumber(value + delta, min, max);
+        if (next !== value) {
+            onCommit(next);
+        }
+    };
+    return <span className='ai-config-stepper-wrap'>
+        <span className='ai-config-stepper'>
+            <button
+                type='button'
+                className='ai-config-stepper-button'
+                aria-label={nls.localize('theia/ai/core/aiConfiguration/decrease', 'Decrease')}
+                disabled={disabled || (min !== undefined && value <= min)}
+                onClick={() => step(-1)}
+            >−</button>
+            <input
+                className='ai-config-stepper-input'
+                inputMode='numeric'
+                aria-label={ariaLabel}
+                value={draft}
+                disabled={disabled}
+                onChange={e => setDraft(e.target.value)}
+                onBlur={commitDraft}
+                onKeyDown={e => { if (e.key === 'Enter') { commitDraft(); } }}
+            />
+            <button
+                type='button'
+                className='ai-config-stepper-button'
+                aria-label={nls.localize('theia/ai/core/aiConfiguration/increase', 'Increase')}
+                disabled={disabled || (max !== undefined && value >= max)}
+                onClick={() => step(1)}
+            >+</button>
+        </span>
+    </span>;
+};
+
+/**
+ * A `string[]` editor mirroring the Settings UI array input: each value is a list row with a hover-revealed
+ * remove button, and a final "Add Value…" input (Enter or the + button appends). It reuses the Settings UI's
+ * DOM shape and class names (styled by our own `.ai-config-array` rules) so it looks identical, without
+ * depending on the preferences package's DI-bound renderer. Values commit immediately on add/remove.
+ */
+export const AiArrayInput: React.FC<{
+    values: string[];
+    ariaLabel: string;
+    addPlaceholder: string;
+    disabled?: boolean;
+    /** Returns why an entry is not acceptable, or `undefined` to accept it. Rejected entries are not added. */
+    validate?: (value: string) => string | undefined;
+    onChange: (values: string[]) => void;
+}> = ({ values, ariaLabel, addPlaceholder, disabled, validate, onChange }) => {
+    const [draft, setDraft] = React.useState('');
+    const [error, setError] = React.useState<string | undefined>(undefined);
+    const addItem = (): void => {
+        const entry = draft.trim();
+        if (!entry) {
+            setDraft('');
+            setError(undefined);
+            return;
+        }
+        const rejection = validate?.(entry);
+        if (rejection) {
+            // Keep the text so the user can correct it rather than retype it.
+            setError(rejection);
+            return;
+        }
+        setError(undefined);
+        if (!values.includes(entry)) {
+            onChange([...values, entry]);
+        }
+        setDraft('');
+    };
+    const removeAt = (index: number): void => onChange(values.filter((_, itemIndex) => itemIndex !== index));
+    return <ul className='preference-array ai-config-array'>
+        {values.map((value, index) => (
+            <li className='preference-array-element' key={`${value}-${index}`}>
+                <span className='preference-array-element-val'>{value}</span>
+                <span
+                    className='preference-array-element-btn remove-btn'
+                    role='button'
+                    tabIndex={0}
+                    title={nls.localizeByDefault('Remove')}
+                    onClick={() => { if (!disabled) { removeAt(index); } }}
+                >
+                    <i className={codicon('close')}></i>
+                </span>
+            </li>
+        ))}
+        <li className='ai-config-array-input-row'>
+            <input
+                className='preference-array-input theia-input'
+                type='text'
+                aria-label={ariaLabel}
+                placeholder={addPlaceholder}
+                spellCheck={false}
+                value={draft}
+                disabled={disabled}
+                onChange={e => { setDraft(e.target.value); setError(undefined); }}
+                onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); addItem(); } }}
+            />
+            <span
+                className={`preference-array-element-btn ${codicon('add')}`}
+                role='button'
+                tabIndex={0}
+                title={nls.localizeByDefault('Add')}
+                onClick={() => { if (!disabled) { addItem(); } }}
+            ></span>
+        </li>
+        {error && <li className='ai-config-array-error'><span className='ai-config-input-error'>{error}</span></li>}
+    </ul>;
+};
+
+/** A monospace path input plus a "Browse…" button that delegates folder selection to `onBrowse`. */
+export const AiPathInput: React.FC<{
+    value: string;
+    placeholder: string;
+    browseLabel: string;
+    disabled?: boolean;
+    onCommit: (value: string) => void;
+    onBrowse: () => Promise<string | undefined>;
+}> = ({ value, placeholder, browseLabel, disabled, onCommit, onBrowse }) => {
+    const [draft, setDraft] = React.useState(value);
+    React.useEffect(() => setDraft(value), [value]);
+    const commitDraft = (): void => {
+        if (draft !== value) {
+            onCommit(draft);
+        }
+    };
+    const browse = (): void => {
+        onBrowse().then(picked => {
+            if (picked !== undefined) {
+                setDraft(picked);
+                onCommit(picked);
+            }
+        });
+    };
+    return <div className='ai-config-path-row'>
+        <input
+            className='theia-input ai-config-input ai-config-input-mono'
+            type='text'
+            value={draft}
+            placeholder={placeholder}
+            disabled={disabled}
+            onChange={e => setDraft(e.target.value)}
+            onBlur={commitDraft}
+            onKeyDown={e => { if (e.key === 'Enter') { commitDraft(); } }}
+        />
+        <button type='button' className='theia-button secondary' disabled={disabled} onClick={browse}>{browseLabel}</button>
+    </div>;
+};
+
+/**
+ * A button that hands editing off to the `settings.json` file. Used for preferences whose value is a
+ * complex object (or array of objects) that cannot be edited meaningfully through an inline control;
+ * clicking it opens `settings.json` focused on the preference, mirroring the Settings view's
+ * "Edit in settings.json" link.
+ */
+export const AiEditInSettingsButton: React.FC<{
+    label: string;
+    ariaLabel: string;
+    disabled?: boolean;
+    onClick: () => void;
+}> = ({ label, ariaLabel, disabled, onClick }) => (
+    <button
+        type='button'
+        className='theia-button secondary ai-config-edit-in-settings'
+        aria-label={ariaLabel}
+        disabled={disabled}
+        onClick={onClick}
+    >
+        <span className={codicon('edit')}></span>
+        {label}
+    </button>
+);
+
+/** A single option for {@link AiEnumSelect}. */
+export interface AiEnumOption {
+    readonly value: string;
+    readonly label: string;
+    /** Optional native tooltip, e.g. to surface an option's secondary description. */
+    readonly title?: string;
+    readonly disabled?: boolean;
+}
+
+/**
+ * A theme-styled select over a fixed set of options, backed by the shared {@link SelectComponent} so
+ * that each option can surface its own description (which native `<option>` cannot) and the control
+ * matches the Settings UI. Commits the selected value via `onCommit`.
+ */
+export const AiEnumSelect: React.FC<{
+    value: string | undefined;
+    options: AiEnumOption[];
+    ariaLabel: string;
+    className?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    onCommit: (value: string) => void;
+    // `ariaLabel` is intentionally not destructured: SelectComponent exposes no accessible-name prop yet.
+}> = ({ value, options, className, disabled, invalid, onCommit }) => {
+    // `title` becomes the per-option `description` shown by SelectComponent's dropdown.
+    const selectOptions = React.useMemo<SelectOption[]>(() => options.map(option => ({
+        value: option.value,
+        label: option.label,
+        description: option.title,
+        disabled: option.disabled
+    })), [options]);
+    const handleChange = React.useCallback((option: SelectOption): void => {
+        // SelectComponent has no whole-control `disabled`; guard the commit so a disabled select never writes.
+        if (!disabled && option.value !== undefined) {
+            onCommit(option.value);
+        }
+    }, [disabled, onCommit]);
+    const componentClassName = `ai-config-select${invalid ? ' error' : ''}${disabled ? ' disabled' : ''}${className ? ' ' + className : ''}`;
+    return <SelectComponent
+        options={selectOptions}
+        defaultValue={value}
+        onChange={handleChange}
+        className={componentClassName}
+    />;
+};
+
+/** A single non-"Limited" choice for {@link AiSessionLimitControl}, mapping a label to its magic value. */
+export interface SessionLimitSpecialOption {
+    readonly value: number;
+    readonly label: string;
+}
+
+/**
+ * A plain numeric input for a session-limit preference. Any special sentinel values (e.g. -1 = unlimited,
+ * 0 = don't persist) can be entered directly, instead of being hidden behind a separate
+ * "Limited / Unlimited / …" dropdown; the preference description explains what they mean.
+ */
+export const AiSessionLimitControl: React.FC<{
+    value: number;
+    limitedMin: number;
+    limitedMax?: number;
+    specials: SessionLimitSpecialOption[];
+    ariaLabel: string;
+    disabled?: boolean;
+    onCommit: (value: number) => void;
+}> = ({ value, limitedMin, limitedMax, specials, ariaLabel, disabled, onCommit }) => {
+    // Special sentinel values sit below the "limited" minimum, so the input has to allow entering them.
+    const min = specials.reduce((smallest, special) => Math.min(smallest, special.value), limitedMin);
+    return <AiNumberStepper
+        value={value}
+        ariaLabel={ariaLabel}
+        // A session limit is a count, so it stays a whole number even though the stepper allows fractions.
+        integer={true}
+        min={min}
+        max={limitedMax}
+        disabled={disabled}
+        onCommit={onCommit}
+    />;
+};

package/src/browser/ai-configuration/components/ai-configuration-item-row.tsx

@@ -0,0 +1,127 @@
+// *****************************************************************************
+// Copyright (C) 2026 EclipseSource and others.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import { codicon } from '@theia/core/lib/browser';
+import * as React from '@theia/core/shared/react';
+import { AiConfigurationItemStatus } from '../ai-configuration-category';
+import { AiConfigurationKindBadge, AiConfigurationStatusBadge } from './ai-configuration-primitives';
+import { AiConfigurationOrigin, AiConfigurationOriginBadges } from './ai-configuration-origin-badge';
+import { AiSettingGearButton } from './ai-configuration-setting-row';
+
+export interface AiConfigurationItemRowProps {
+    readonly label: string;
+    /**
+     * Anchors the row for deep links: rendered as `data-ai-config-row-id`, which is what a
+     * {@link AiConfigurationSelection.highlight} scrolls to and flashes.
+     */
+    readonly rowId?: string;
+    /** Renders the label in the code/monospace font (e.g. for shell command patterns), like the Variables list. */
+    readonly monospaceLabel?: boolean;
+    /** `codicon(...)` class shown before the label. */
+    readonly iconClass?: string;
+    readonly description?: string;
+    /** Short badges shown after the label, for what the item *is*. Use {@link origins} for where it came from. */
+    readonly tags?: string[];
+    /** Where the item came from, shown after the tags as {@link AiConfigurationOriginBadge}s. */
+    readonly origins?: AiConfigurationOrigin[];
+    /** Status badge shown on the right (e.g. an alias' resolved model). */
+    readonly status?: AiConfigurationItemStatus;
+    /** `true` reveals the modified edge (left indicator bar), matching {@link AiConfigurationSettingRow}. */
+    readonly modified?: boolean;
+    /** Optional trailing content (extra stats, or an inline control such as a select) shown on the right. */
+    readonly trailing?: React.ReactNode;
+    /**
+     * Opens the row's gear context menu (e.g. "Reset Setting") anchored at the cog, which appears on hover in
+     * the row's left gutter (mirroring {@link AiConfigurationSettingRow}). Wired the same way as
+     * {@link AiConfigurationSettingRow.onOpenMenu} (typically to {@link AiSettingsRowService.openResetMenu}).
+     * Omit to hide the gear.
+     */
+    readonly onOpenMenu?: (gear: HTMLElement) => void;
+    /**
+     * Invoked when the row is clicked or activated via keyboard; typically `ctx.navigate(...)`. When provided
+     * the whole row is a navigable control ending in a chevron. Omit it for rows that only host an inline
+     * control (e.g. the Tools page's per-tool confirmation select): the row is then not clickable and shows
+     * no chevron.
+     */
+    readonly onSelect?: () => void;
+    /**
+     * Turns the label into a link that navigates somewhere related to the row without being the row's own
+     * detail, e.g. an agent capability pointing at the (globally shared) snippet it pulls in. Distinct from
+     * {@link onSelect}: the row itself stays non-navigable, so a row can keep hosting its own control.
+     */
+    readonly onActivateLabel?: () => void;
+    /** Tooltip for an {@link onActivateLabel} label, explaining where the link goes. */
+    readonly labelTooltip?: string;
+}
+
+/**
+ * Overview row for a collection item: an icon, a label with an optional description, and a right-hand slot
+ * for a status badge / stats / an inline control. When {@link AiConfigurationItemRowProps.onSelect} is given
+ * the whole row is a single navigable control (click or Enter/Space) that opens the item's detail page,
+ * ending in a chevron; without it the row simply presents its trailing control. A flat, list-style
+ * alternative to a card grid, matching the Settings and extensions lists; every non-label slot is optional.
+ */
+export const AiConfigurationItemRow: React.FC<AiConfigurationItemRowProps> = ({
+    label, rowId, tags, origins, monospaceLabel, iconClass, description, status, modified, trailing, onOpenMenu, onSelect, onActivateLabel, labelTooltip
+}) => {
+    const navigable = onSelect !== undefined;
+    const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {
+        if (onSelect && (event.key === 'Enter' || event.key === ' ')) {
+            event.preventDefault();
+            onSelect();
+        }
+    };
+    return <div
+        className={`ai-configuration-item-row${navigable ? ' navigable' : ''}${modified ? ' modified' : ''}`}
+        data-ai-config-row-id={rowId}
+        role={navigable ? 'button' : undefined}
+        tabIndex={navigable ? 0 : undefined}
+        onClick={onSelect}
+        onKeyDown={navigable ? onKeyDown : undefined}
+    >
+        {onOpenMenu && <div className='ai-configuration-item-row-actions'>
+            <AiSettingGearButton onOpenMenu={onOpenMenu} />
+        </div>}
+        {iconClass && <span className={`ai-configuration-item-row-icon ${iconClass}`}></span>}
+        <div className='ai-configuration-item-row-text'>
+            {/* Name and badges share a line, so a badge reads as part of the name rather than as a second row. */}
+            <div className='ai-configuration-item-row-heading'>
+                {onActivateLabel
+                    ? <button
+                        type='button'
+                        className={`ai-configuration-item-row-label link${monospaceLabel ? ' mono' : ''}`}
+                        title={labelTooltip}
+                        onClick={event => {
+                            // A navigable row would otherwise also handle the click and open its own detail.
+                            event.stopPropagation();
+                            onActivateLabel();
+                        }}
+                    >{label}</button>
+                    : <span className={`ai-configuration-item-row-label${monospaceLabel ? ' mono' : ''}`}>{label}</span>}
+                {tags && tags.length > 0 && <span className='ai-configuration-item-row-tags'>
+                    {tags.map(tag => <AiConfigurationKindBadge key={tag} label={tag} variant='outline' />)}
+                </span>}
+                <AiConfigurationOriginBadges origins={origins} />
+            </div>
+            {description && <span className='ai-configuration-item-row-description'>{description}</span>}
+        </div>
+        <div className='ai-configuration-item-row-trailing'>
+            {status && <AiConfigurationStatusBadge status={status} />}
+            {trailing}
+            {navigable && <span className={`ai-configuration-item-row-chevron ${codicon('chevron-right')}`} aria-hidden={true}></span>}
+        </div>
+    </div>;
+};

package/src/browser/ai-configuration/components/ai-configuration-origin-badge.tsx

@@ -0,0 +1,114 @@
+// *****************************************************************************
+// Copyright (C) 2026 EclipseSource and others.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import { nls } from '@theia/core';
+import { codicon } from '@theia/core/lib/browser';
+import { InstalledAgentPluginInfo } from '@theia/ai-core/lib/browser/agent-plugin-ui-bridge';
+import * as React from '@theia/core/shared/react';
+
+/**
+ * Where a configuration entry came from, when that is not the user: an AI registry entry, or an Agent
+ * Plugin that contributed it. Built through {@link AiConfigurationOrigin.registry} or
+ * {@link AiConfigurationOrigin.agentPlugin} rather than by hand, so that the same origin reads the same
+ * on every page - an entry's provenance is surfaced in an overview list, on a detail header and in a
+ * collapsible row, and those diverged while each page phrased it for itself.
+ */
+export interface AiConfigurationOrigin {
+    /** Short, on one line next to the entry's name; the {@link tooltip} carries the detail. */
+    readonly label: string;
+    /** `codicon(...)` class shown before the label. */
+    readonly iconClass: string;
+    readonly tooltip: string;
+    /** Opens or reveals the origin. Omit for an origin with nothing to navigate to; the badge is then static. */
+    readonly activate?: () => void;
+}
+
+export namespace AiConfigurationOrigin {
+
+    /**
+     * An entry installed from, or linked to, an AI registry approval.
+     *
+     * @param open reveals the entry in the registry UI. Omit it where no registry UI is bound: the entry
+     * still came from the registry, which is worth stating, so the badge is shown - just not as a link.
+     */
+    export function registry(entryId: string, open?: () => void): AiConfigurationOrigin {
+        return {
+            label: nls.localize('theia/ai/core/aiConfiguration/origin/fromRegistry', 'From registry'),
+            iconClass: codicon('link-external'),
+            tooltip: open
+                ? nls.localize('theia/ai/core/aiConfiguration/origin/openInRegistry', 'Open in AI registry: {0}', entryId)
+                : nls.localize('theia/ai/core/aiConfiguration/origin/registryEntry', 'AI registry entry: {0}', entryId),
+            activate: open
+        };
+    }
+
+    /**
+     * An entry contributed by an installed Agent Plugin. Takes the resolved plugin rather than its
+     * identifier: a bare identifier is not worth showing, so a caller that cannot resolve one renders no
+     * badge at all.
+     */
+    export function agentPlugin(plugin: InstalledAgentPluginInfo, reveal: () => void): AiConfigurationOrigin {
+        return {
+            label: nls.localize('theia/ai/core/aiConfiguration/origin/viaAgentPlugin', 'via {0}', plugin.name),
+            // `package`, matching the Agent Plugin cards in the Extensions view; `extensions` is the icon
+            // that view's VS Code extension section owns.
+            iconClass: codicon('package'),
+            tooltip: nls.localize('theia/ai/core/aiConfiguration/origin/openAgentPlugin', 'Open the Agent Plugin that provides this: {0}', plugin.name),
+            activate: reveal
+        };
+    }
+}
+
+export interface AiConfigurationOriginBadgeProps {
+    readonly origin: AiConfigurationOrigin;
+}
+
+/**
+ * One {@link AiConfigurationOrigin} as a pill next to an entry's name: a `<button>` when the origin can
+ * be opened, a plain `<span>` when it cannot, so that only what is actually navigable is focusable.
+ * The click never bubbles - these sit inside rows and headers that are themselves clickable, and
+ * following the badge must not also open the row.
+ */
+export const AiConfigurationOriginBadge: React.FC<AiConfigurationOriginBadgeProps> = ({ origin }) => {
+    const content = <>
+        <span aria-hidden='true' className={`ai-configuration-origin-badge-icon ${origin.iconClass}`}></span>
+        <span className='ai-configuration-origin-badge-label'>{origin.label}</span>
+    </>;
+    return origin.activate
+        ? <button
+            type='button'
+            className='ai-configuration-origin-badge activatable'
+            title={origin.tooltip}
+            aria-label={origin.tooltip}
+            onClick={event => {
+                event.stopPropagation();
+                origin.activate!();
+            }}
+        >{content}</button>
+        : <span className='ai-configuration-origin-badge' title={origin.tooltip}>{content}</span>;
+};
+
+export interface AiConfigurationOriginBadgesProps {
+    readonly origins?: AiConfigurationOrigin[];
+}
+
+/** The origins of one entry, in the order given; nothing at all when it has none, which is the common case. */
+export const AiConfigurationOriginBadges: React.FC<AiConfigurationOriginBadgesProps> = ({ origins }) =>
+    origins && origins.length > 0
+        ? <span className='ai-configuration-origin-badges'>
+            {origins.map(origin => <AiConfigurationOriginBadge key={origin.label} origin={origin} />)}
+        </span>
+        : undefined;