@adecore/agents-react 0.31.5 → 0.31.6

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/agents-react",
-  "version": "0.31.5",
+  "version": "0.31.6",
   "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.6",
+    "@adecore/editor": "0.31.6",
+    "@adecore/editor-react": "0.31.6",
+    "@adecore/intelligent-ui": "0.31.6",
+    "@adecore/merge": "0.31.6",
     "@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.6",
     "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.6",
     "@types/bun": "^1.4.2",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",

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 };
+}