@adecore/agents-react 0.31.5 → 0.31.7

package/dist/agents/provider-paths.js

@@ -1,10 +1,12 @@
+import { siGithubcopilot } from 'simple-icons';
 /*
- * The marks of Anthropic, OpenAI and xAI, and a monogram for a provider with no mark of its own. Lucide has no brand marks, so these are the icon rule's
+ * The marks of Anthropic, OpenAI, xAI and GitHub Copilot, and a monogram for a provider with no mark of its own. Lucide has no brand marks, so these are the icon rule's
  * exception for provider marks. One path each, in `currentColor`, so a row decides how loud the logo is.
  */
 export const PROVIDER_PATHS = {
     claude: 'M4.709 15.955l4.72-2.647.079-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.377-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.048.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.607.212-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.914-1.316-.012.01z',
     codex: 'M21.55 10.004a5.416 5.416 0 00-.478-4.501c-1.217-2.09-3.662-3.166-6.05-2.66A5.59 5.59 0 0010.831 1C8.39.995 6.224 2.546 5.473 4.838A5.553 5.553 0 001.76 7.496a5.487 5.487 0 00.691 6.5 5.416 5.416 0 00.477 4.502c1.217 2.09 3.662 3.165 6.05 2.66A5.586 5.586 0 0013.168 23c2.443.006 4.61-1.546 5.361-3.84a5.554 5.554 0 003.715-2.66 5.488 5.488 0 00-.693-6.497v.001zm-8.381 11.558a4.199 4.199 0 01-2.675-.954c.034-.018.093-.05.132-.074l4.44-2.53a.71.71 0 00.364-.623v-6.176l1.877 1.069c.02.01.033.029.036.05v5.115c-.003 2.274-1.87 4.118-4.174 4.123zM4.192 17.78a4.059 4.059 0 01-.498-2.763c.032.019.09.055.131.078l4.44 2.53c.225.13.504.13.73 0l5.42-3.088v2.138a.068.068 0 01-.027.057L9.9 19.288c-1.999 1.136-4.552.46-5.707-1.51h-.001zM3.023 8.216A4.15 4.15 0 015.198 6.41l-.002.151v5.06a.711.711 0 00.364.624l5.42 3.087-1.876 1.07a.067.067 0 01-.063.005l-4.489-2.559c-1.995-1.14-2.679-3.658-1.53-5.63h.001zm15.417 3.54l-5.42-3.088L14.896 7.6a.067.067 0 01.063-.006l4.489 2.557c1.998 1.14 2.683 3.662 1.529 5.633a4.163 4.163 0 01-2.174 1.807V12.38a.71.71 0 00-.363-.623zm1.867-2.773a6.04 6.04 0 00-.132-.078l-4.44-2.53a.731.731 0 00-.729 0l-5.42 3.088V7.325a.068.068 0 01.027-.057L14.1 4.713c2-1.137 4.555-.46 5.707 1.513.487.833.664 1.809.499 2.757h.001zm-11.741 3.81l-1.877-1.068a.065.065 0 01-.036-.051V6.559c.001-2.277 1.873-4.122 4.181-4.12.976 0 1.92.338 2.671.954-.034.018-.092.05-.131.073l-4.44 2.53a.71.71 0 00-.365.623l-.003 6.173v.001zm1.02-2.168L12 9.25l2.414 1.375v2.75L12 14.75l-2.415-1.375v-2.75z',
     nanogpt: 'M5 20V4h2.6l8.8 11.2V4H19v16h-2.6L7.6 8.8V20z',
-    grok: 'M6.469 8.776 16.512 23h-4.464L2.005 8.776H6.47Zm-.004 7.9 2.233 3.164L6.467 23H2l4.465-6.324ZM22 2.582V23h-3.659V7.764L22 2.582ZM22 1l-9.952 14.095-2.233-3.163L17.533 1H22Z'
+    grok: 'M6.469 8.776 16.512 23h-4.464L2.005 8.776H6.47Zm-.004 7.9 2.233 3.164L6.467 23H2l4.465-6.324ZM22 2.582V23h-3.659V7.764L22 2.582ZM22 1l-9.952 14.095-2.233-3.163L17.533 1H22Z',
+    copilot: siGithubcopilot.path
 };

package/dist/chat/ui/rows/WorkRows.js

@@ -76,7 +76,7 @@ export function ToggleLine({ icon, label, brand, detail, command, look, path, op
     const classes = clsx(
     // Fix the width so long commands reach the truncation inside the negative margins.
     'group/line -mx-1 mb-0.5 flex h-7 w-[calc(100%+8px)] items-center gap-2 rounded-md px-1 text-left text-xs text-text-muted', onToggle !== undefined && 'hover:bg-surface-hover', failed && 'text-status-error', className);
-    const content = (_jsxs(_Fragment, { children: [_jsx("span", { className: clsx(ROW_GUTTER, live && 'text-accent'), children: icon }), _jsxs("span", { className: clsx('shrink-0', live && 'chat-live-text'), children: [brand !== undefined && _jsx("span", { className: BRAND, children: brand }), brand !== undefined && label !== '' && ' ', label] }), look !== undefined ? (_jsxs(_Fragment, { children: [look.run.detail !== '' && (_jsx("span", { "data-find-field": "summary", className: "min-w-0 truncate font-mono text-code text-text-faint", children: _jsx(LookDetail, { run: look.run, chatId: look.chatId }) })), _jsx(LookTags, { run: look.run })] })) : (detail && (_jsx("span", { "data-find-field": "summary", className: "min-w-0 truncate font-mono text-code text-text-faint", children: command ? _jsx(ShellCommand, { command: detail }) : path ? _jsx(MiddleTruncate, { text: detail }) : detail }))), _jsx("span", { className: "grow" }), trailing, time !== undefined && _jsx(RowTime, { at: time }), failed && _jsx(Icon, { icon: X, size: 12, className: "shrink-0" }), onToggle !== undefined && (_jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('shrink-0 text-text-faint transition-transform', open && 'rotate-90') }))] }));
+    const content = (_jsxs(_Fragment, { children: [_jsx("span", { className: clsx(ROW_GUTTER, live && 'text-accent'), children: icon }), _jsxs("span", { className: "flex min-w-0 items-baseline gap-2", children: [_jsxs("span", { className: clsx('shrink-0', live && 'chat-live-text'), children: [brand !== undefined && _jsx("span", { className: BRAND, children: brand }), brand !== undefined && label !== '' && ' ', label] }), look !== undefined ? (_jsxs(_Fragment, { children: [look.run.detail !== '' && (_jsx("span", { "data-find-field": "summary", className: "min-w-0 truncate font-mono text-code text-text-faint", children: _jsx(LookDetail, { run: look.run, chatId: look.chatId }) })), _jsx(LookTags, { run: look.run })] })) : (detail && (_jsx("span", { "data-find-field": "summary", className: "min-w-0 truncate font-mono text-code text-text-faint", children: command ? _jsx(ShellCommand, { command: detail }) : path ? _jsx(MiddleTruncate, { text: detail }) : detail })))] }), _jsx("span", { className: "grow" }), trailing, time !== undefined && _jsx(RowTime, { at: time }), failed && _jsx(Icon, { icon: X, size: 12, className: "shrink-0" }), onToggle !== undefined && (_jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('shrink-0 text-text-faint transition-transform', open && 'rotate-90') }))] }));
     if (onToggle === undefined) {
         return _jsx("div", { className: classes, children: content });
     }

package/dist/providers/ProvidersPane.js

@@ -13,6 +13,7 @@ import { AccountDetail } from './AccountDetail.js';
 import { AddAccountForm } from './AddAccountForm.js';
 import { CliDetail } from './CliDetail.js';
 import { InstallPage } from './InstallPage.js';
+import { pickOfTarget } from './pane-target.js';
 import { CliMark } from './parts.js';
 import { useProviderAccounts } from '../state/provider-accounts.js';
 import { useProviders } from '../state/providers.js';
@@ -30,7 +31,7 @@ export function ProvidersPane({ target = null, detailOf, defaults = true, instal
     const host = useChatHost();
     const { openLogin } = host;
     const loginBlocked = host.useLoginBlocked(scopeId);
-    const [picked, setPicked] = useState(() => (target === 'providers.apple' ? { kind: 'cli', cli: 'apple' } : null));
+    const [picked, setPicked] = useState(() => pickOfTarget(target, providers));
     // A provider that never runs in a terminal is no CLI to install: it is turned on in its own detail, so it is always listed.
     const installed = useMemo(() => providers.filter((provider) => provider.installed || !provider.capabilities.terminal), [providers]);
     const missing = useMemo(() => providers.filter((provider) => !provider.installed && provider.capabilities.terminal), [providers]);
@@ -47,8 +48,9 @@ export function ProvidersPane({ target = null, detailOf, defaults = true, instal
     const [seenTarget, setSeenTarget] = useState(target);
     if (target !== seenTarget) {
         setSeenTarget(target);
-        if (target === 'providers.apple') {
-            setPicked({ kind: 'cli', cli: 'apple' });
+        const opened = pickOfTarget(target, providers);
+        if (opened !== null) {
+            setPicked(opened);
         }
         else if (target?.startsWith('providers.') && current?.kind !== 'cli' && provider !== null) {
             setPicked({ kind: 'cli', cli: provider.kind });

package/dist/providers/pane-target.d.ts

@@ -0,0 +1,15 @@
+import type { AgentKind, ProviderInfo } from '@adecore/agent-contracts';
+export type Picked = {
+    kind: 'cli';
+    cli: AgentKind;
+} | {
+    kind: 'install';
+    cli: AgentKind;
+} | {
+    kind: 'account';
+    id: string;
+} | {
+    kind: 'add';
+    cli: AgentKind;
+};
+export declare function pickOfTarget(target: string | null, providers: ProviderInfo[]): Picked | null;

package/dist/providers/pane-target.js

@@ -0,0 +1,17 @@
+const INSTALL_TARGET = 'providers.install.';
+/* What a target opens on its own, before any CLI is picked; null for a target that only lands on a row of the CLI already shown. */
+export function pickOfTarget(target, providers) {
+    if (target === 'providers.apple') {
+        return { kind: 'cli', cli: 'apple' };
+    }
+    if (!target?.startsWith(INSTALL_TARGET) || target.length === INSTALL_TARGET.length) {
+        return null;
+    }
+    const cli = target.slice(INSTALL_TARGET.length);
+    const provider = providers.find((entry) => entry.kind === cli);
+    // A CLI the host has not reported yet is taken as missing; once it is installed and signed in, its install page gives way to its detail.
+    if (provider !== undefined && (provider.installed || !provider.capabilities.terminal)) {
+        return { kind: 'cli', cli };
+    }
+    return { kind: 'install', cli };
+}

package/dist/usage/format.js

@@ -20,12 +20,19 @@ export function moneyFormat(currency, rate) {
         return formatMoney(value, code, value !== 0 && Math.abs(value) < 0.01 ? 4 : undefined);
     };
 }
-export const PROVIDER_LABELS = { claude: 'Claude Code', codex: 'Codex', nanogpt: 'NanoGPT', grok: 'Grok' };
+export const PROVIDER_LABELS = {
+    claude: 'Claude Code',
+    codex: 'Codex',
+    nanogpt: 'NanoGPT',
+    grok: 'Grok',
+    copilot: 'GitHub Copilot'
+};
 export const PROVIDER_COLORS = {
     claude: 'var(--chart-claude)',
     codex: 'var(--chart-codex)',
     nanogpt: 'var(--chart-nanogpt)',
-    grok: 'var(--chart-grok)'
+    grok: 'var(--chart-grok)',
+    copilot: 'var(--chart-copilot)'
 };
 /*
  * A slot is `2026-09-10` or `2026-09-10T14`, already in the viewer's own zone, so it is read as plain

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/agents-react",
-  "version": "0.31.5",
+  "version": "0.31.7",
   "description": "React agent chat threads, composers, approvals, provider accounts and usage views.",
   "type": "module",
   "exports": {
@@ -67,11 +67,11 @@
     "test:visuals": "bun --config=integration.bunfig.toml --conditions=source test ./src/chat/visual-viewport.integration.test.ts"
   },
   "dependencies": {
-    "@adecore/agent-contracts": "0.31.5",
-    "@adecore/editor": "0.31.5",
-    "@adecore/editor-react": "0.31.5",
-    "@adecore/intelligent-ui": "0.31.5",
-    "@adecore/merge": "0.31.5",
+    "@adecore/agent-contracts": "0.31.7",
+    "@adecore/editor": "0.31.7",
+    "@adecore/editor-react": "0.31.7",
+    "@adecore/intelligent-ui": "0.31.7",
+    "@adecore/merge": "0.31.7",
     "@codemirror/commands": "^6.11.1",
     "@codemirror/language": "^6.12.4",
     "@codemirror/state": "^6.7.6",
@@ -94,14 +94,14 @@
     "zustand": "^5.0.15"
   },
   "peerDependencies": {
-    "@adecore/ui": "^0.31.5",
+    "@adecore/ui": "^0.31.7",
     "i18next": "^26.4.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-i18next": "^17.0.15"
   },
   "devDependencies": {
-    "@adecore/ui": "0.31.5",
+    "@adecore/ui": "0.31.7",
     "@types/bun": "^1.4.2",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",

package/src/agents/provider-paths.ts

@@ -1,12 +1,14 @@
 import type { UsageProvider } from '@adecore/agent-contracts';
+import { siGithubcopilot } from 'simple-icons';
 
 /*
- * The marks of Anthropic, OpenAI and xAI, and a monogram for a provider with no mark of its own. Lucide has no brand marks, so these are the icon rule's
+ * The marks of Anthropic, OpenAI, xAI and GitHub Copilot, and a monogram for a provider with no mark of its own. Lucide has no brand marks, so these are the icon rule's
  * exception for provider marks. One path each, in `currentColor`, so a row decides how loud the logo is.
  */
 export const PROVIDER_PATHS: Record<UsageProvider, string> = {
     claude: 'M4.709 15.955l4.72-2.647.079-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.377-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.048.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.607.212-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.914-1.316-.012.01z',
     codex: 'M21.55 10.004a5.416 5.416 0 00-.478-4.501c-1.217-2.09-3.662-3.166-6.05-2.66A5.59 5.59 0 0010.831 1C8.39.995 6.224 2.546 5.473 4.838A5.553 5.553 0 001.76 7.496a5.487 5.487 0 00.691 6.5 5.416 5.416 0 00.477 4.502c1.217 2.09 3.662 3.165 6.05 2.66A5.586 5.586 0 0013.168 23c2.443.006 4.61-1.546 5.361-3.84a5.554 5.554 0 003.715-2.66 5.488 5.488 0 00-.693-6.497v.001zm-8.381 11.558a4.199 4.199 0 01-2.675-.954c.034-.018.093-.05.132-.074l4.44-2.53a.71.71 0 00.364-.623v-6.176l1.877 1.069c.02.01.033.029.036.05v5.115c-.003 2.274-1.87 4.118-4.174 4.123zM4.192 17.78a4.059 4.059 0 01-.498-2.763c.032.019.09.055.131.078l4.44 2.53c.225.13.504.13.73 0l5.42-3.088v2.138a.068.068 0 01-.027.057L9.9 19.288c-1.999 1.136-4.552.46-5.707-1.51h-.001zM3.023 8.216A4.15 4.15 0 015.198 6.41l-.002.151v5.06a.711.711 0 00.364.624l5.42 3.087-1.876 1.07a.067.067 0 01-.063.005l-4.489-2.559c-1.995-1.14-2.679-3.658-1.53-5.63h.001zm15.417 3.54l-5.42-3.088L14.896 7.6a.067.067 0 01.063-.006l4.489 2.557c1.998 1.14 2.683 3.662 1.529 5.633a4.163 4.163 0 01-2.174 1.807V12.38a.71.71 0 00-.363-.623zm1.867-2.773a6.04 6.04 0 00-.132-.078l-4.44-2.53a.731.731 0 00-.729 0l-5.42 3.088V7.325a.068.068 0 01.027-.057L14.1 4.713c2-1.137 4.555-.46 5.707 1.513.487.833.664 1.809.499 2.757h.001zm-11.741 3.81l-1.877-1.068a.065.065 0 01-.036-.051V6.559c.001-2.277 1.873-4.122 4.181-4.12.976 0 1.92.338 2.671.954-.034.018-.092.05-.131.073l-4.44 2.53a.71.71 0 00-.365.623l-.003 6.173v.001zm1.02-2.168L12 9.25l2.414 1.375v2.75L12 14.75l-2.415-1.375v-2.75z',
     nanogpt: 'M5 20V4h2.6l8.8 11.2V4H19v16h-2.6L7.6 8.8V20z',
-    grok: 'M6.469 8.776 16.512 23h-4.464L2.005 8.776H6.47Zm-.004 7.9 2.233 3.164L6.467 23H2l4.465-6.324ZM22 2.582V23h-3.659V7.764L22 2.582ZM22 1l-9.952 14.095-2.233-3.163L17.533 1H22Z'
+    grok: 'M6.469 8.776 16.512 23h-4.464L2.005 8.776H6.47Zm-.004 7.9 2.233 3.164L6.467 23H2l4.465-6.324ZM22 2.582V23h-3.659V7.764L22 2.582ZM22 1l-9.952 14.095-2.233-3.163L17.533 1H22Z',
+    copilot: siGithubcopilot.path
 };

package/src/chat/ui/rows/WorkRows.tsx

@@ -154,27 +154,30 @@ export function ToggleLine({
     const content = (
         <>
             <span className={clsx(ROW_GUTTER, live && 'text-accent')}>{icon}</span>
-            <span className={clsx('shrink-0', live && 'chat-live-text')}>
-                {brand !== undefined && <span className={BRAND}>{brand}</span>}
-                {brand !== undefined && label !== '' && ' '}
-                {label}
-            </span>
-            {look !== undefined ? (
-                <>
-                    {look.run.detail !== '' && (
+            {/* The label is sans and the detail mono, so only a shared baseline puts them on one line. */}
+            <span className="flex min-w-0 items-baseline gap-2">
+                <span className={clsx('shrink-0', live && 'chat-live-text')}>
+                    {brand !== undefined && <span className={BRAND}>{brand}</span>}
+                    {brand !== undefined && label !== '' && ' '}
+                    {label}
+                </span>
+                {look !== undefined ? (
+                    <>
+                        {look.run.detail !== '' && (
+                            <span data-find-field="summary" className="min-w-0 truncate font-mono text-code text-text-faint">
+                                <LookDetail run={look.run} chatId={look.chatId} />
+                            </span>
+                        )}
+                        <LookTags run={look.run} />
+                    </>
+                ) : (
+                    detail && (
                         <span data-find-field="summary" className="min-w-0 truncate font-mono text-code text-text-faint">
-                            <LookDetail run={look.run} chatId={look.chatId} />
+                            {command ? <ShellCommand command={detail} /> : path ? <MiddleTruncate text={detail} /> : detail}
                         </span>
-                    )}
-                    <LookTags run={look.run} />
-                </>
-            ) : (
-                detail && (
-                    <span data-find-field="summary" className="min-w-0 truncate font-mono text-code text-text-faint">
-                        {command ? <ShellCommand command={detail} /> : path ? <MiddleTruncate text={detail} /> : detail}
-                    </span>
-                )
-            )}
+                    )
+                )}
+            </span>
             <span className="grow" />
             {trailing}
             {time !== undefined && <RowTime at={time} />}

package/src/providers/ProvidersPane.tsx

@@ -14,13 +14,11 @@ import { AddAccountForm } from './AddAccountForm';
 import { CliDetail } from './CliDetail';
 import { InstallPage } from './InstallPage';
 import type { ProviderInstallStep } from './install-steps';
+import { pickOfTarget, type Picked } from './pane-target';
 import { CliMark } from './parts';
 import { useProviderAccounts } from '../state/provider-accounts';
 import { useProviders } from '../state/providers';
 
-// `install` is a CLI picked while it was missing: its install page stays until it is installed and signed in.
-type Picked = { kind: 'cli'; cli: AgentKind } | { kind: 'install'; cli: AgentKind } | { kind: 'account'; id: string } | { kind: 'add'; cli: AgentKind };
-
 /* A row of the list with a control of its own beside the part that picks it, so the two never nest. */
 function ListRow({
     selected,
@@ -51,7 +49,7 @@ function ListRow({
 }
 
 interface ProvidersPaneProps {
-    /* The row a search result leads to, by its `searchId`; the pane opens on the CLI it belongs to. */
+    /* The row a search result leads to, by its `searchId`; the pane opens on the CLI it belongs to. `providers.install.<kind>` opens on that CLI's install page, or on its detail once it is installed. */
     target?: string | null;
     /* The detail of a provider the app draws itself, such as a model the host runs on its own; null draws the CLI's own. */
     detailOf?(provider: ProviderInfo): ReactNode | null;
@@ -71,7 +69,7 @@ export function ProvidersPane({ target = null, detailOf, defaults = true, instal
     const host = useChatHost();
     const { openLogin } = host;
     const loginBlocked = host.useLoginBlocked(scopeId);
-    const [picked, setPicked] = useState<Picked | null>(() => (target === 'providers.apple' ? { kind: 'cli', cli: 'apple' } : null));
+    const [picked, setPicked] = useState<Picked | null>(() => pickOfTarget(target, providers));
 
     // A provider that never runs in a terminal is no CLI to install: it is turned on in its own detail, so it is always listed.
     const installed = useMemo(() => providers.filter((provider) => provider.installed || !provider.capabilities.terminal), [providers]);
@@ -92,8 +90,9 @@ export function ProvidersPane({ target = null, detailOf, defaults = true, instal
     const [seenTarget, setSeenTarget] = useState(target);
     if (target !== seenTarget) {
         setSeenTarget(target);
-        if (target === 'providers.apple') {
-            setPicked({ kind: 'cli', cli: 'apple' });
+        const opened = pickOfTarget(target, providers);
+        if (opened !== null) {
+            setPicked(opened);
         } else if (target?.startsWith('providers.') && current?.kind !== 'cli' && provider !== null) {
             setPicked({ kind: 'cli', cli: provider.kind });
         }

package/src/providers/pane-target.ts

@@ -0,0 +1,23 @@
+import type { AgentKind, ProviderInfo } from '@adecore/agent-contracts';
+
+// `install` is a CLI picked while it was missing: its install page stays until it is installed and signed in.
+export type Picked = { kind: 'cli'; cli: AgentKind } | { kind: 'install'; cli: AgentKind } | { kind: 'account'; id: string } | { kind: 'add'; cli: AgentKind };
+
+const INSTALL_TARGET = 'providers.install.';
+
+/* What a target opens on its own, before any CLI is picked; null for a target that only lands on a row of the CLI already shown. */
+export function pickOfTarget(target: string | null, providers: ProviderInfo[]): Picked | null {
+    if (target === 'providers.apple') {
+        return { kind: 'cli', cli: 'apple' };
+    }
+    if (!target?.startsWith(INSTALL_TARGET) || target.length === INSTALL_TARGET.length) {
+        return null;
+    }
+    const cli = target.slice(INSTALL_TARGET.length) as AgentKind;
+    const provider = providers.find((entry) => entry.kind === cli);
+    // A CLI the host has not reported yet is taken as missing; once it is installed and signed in, its install page gives way to its detail.
+    if (provider !== undefined && (provider.installed || !provider.capabilities.terminal)) {
+        return { kind: 'cli', cli };
+    }
+    return { kind: 'install', cli };
+}

package/src/usage/format.ts

@@ -28,13 +28,20 @@ export function moneyFormat(currency: UsageCurrency, rate: UsageRate | null): (u
     };
 }
 
-export const PROVIDER_LABELS: Record<UsageProvider, string> = { claude: 'Claude Code', codex: 'Codex', nanogpt: 'NanoGPT', grok: 'Grok' };
+export const PROVIDER_LABELS: Record<UsageProvider, string> = {
+    claude: 'Claude Code',
+    codex: 'Codex',
+    nanogpt: 'NanoGPT',
+    grok: 'Grok',
+    copilot: 'GitHub Copilot'
+};
 
 export const PROVIDER_COLORS: Record<UsageProvider, string> = {
     claude: 'var(--chart-claude)',
     codex: 'var(--chart-codex)',
     nanogpt: 'var(--chart-nanogpt)',
-    grok: 'var(--chart-grok)'
+    grok: 'var(--chart-grok)',
+    copilot: 'var(--chart-copilot)'
 };
 
 /*