@adecore/agents-react 0.31.12 → 0.33.0

package/dist/providers/ProviderList.d.ts

@@ -5,7 +5,8 @@ interface ProviderListProps {
     groups: ProviderGroups;
     current: Picked | null;
     canAddAccount(kind: AgentKind): boolean;
+    canAddProvider?: boolean;
     onPick(picked: Picked): void;
 }
-export declare function ProviderList({ groups, current, canAddAccount, onPick }: ProviderListProps): import("react").JSX.Element;
+export declare function ProviderList({ groups, current, canAddAccount, canAddProvider, onPick }: ProviderListProps): import("react").JSX.Element;
 export {};

package/dist/providers/ProviderList.js

@@ -1,39 +1,231 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import { Plus } from 'lucide-react';
 import { AccountDot } from '../agents/AccountDot.js';
 import { accountName } from '../agents/accounts.js';
-import { IconButton, SectionLabel } from '@adecore/ui';
+import { Icon, IconButton, SectionLabel } from '@adecore/ui';
 import { CliMark } from './parts.js';
 import { accountNote } from './provider-groups.js';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const NOTE_TONES = {
-    muted: 'text-text-muted',
-    warning: 'text-status-needs-you'
+  muted: 'text-text-muted',
+  warning: 'text-status-needs-you'
 };
-function Note({ note }) {
-    return note === null ? null : _jsx("span", { className: clsx('shrink-0 truncate text-xs', NOTE_TONES[note.tone]), children: note.text });
+function Note(t0) {
+  const $ = _c(2);
+  const {
+    note
+  } = t0;
+  let t1;
+  if ($[0] !== note) {
+    t1 = note === null ? null : /*#__PURE__*/_jsx("span", {
+      className: clsx("shrink-0 truncate text-xs", NOTE_TONES[note.tone]),
+      children: note.text
+    });
+    $[0] = note;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
 }
 /*
  * A row of the list with a control of its own beside the part that picks it, so the two never nest. Every row
  * keeps the control's room, so the words on the right line up whether a row has one or not.
  */
-function ListRow({ selected, onSelect, children, trailing, className }) {
-    return (_jsxs("div", { className: clsx('group flex min-w-0 shrink-0 items-center gap-1 rounded-lg pr-1', selected ? 'bg-text/5' : 'hover:bg-surface-hover'), children: [_jsx("button", { type: "button", "aria-current": selected ? 'true' : undefined, className: clsx('flex min-w-0 grow items-center gap-3 self-stretch rounded-lg pl-3 text-left focus-visible:-outline-offset-2', className), onClick: onSelect, children: children }), _jsx("span", { className: "flex w-7 shrink-0 justify-center", children: trailing })] }));
+function ListRow(t0) {
+  const $ = _c(15);
+  const {
+    selected,
+    onSelect,
+    children,
+    trailing,
+    className
+  } = t0;
+  const t1 = selected ? "bg-text/5" : "hover:bg-surface-hover";
+  let t2;
+  if ($[0] !== t1) {
+    t2 = clsx("group flex min-w-0 shrink-0 items-center gap-1 rounded-lg pr-1", t1);
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const t3 = selected ? "true" : undefined;
+  let t4;
+  if ($[2] !== className) {
+    t4 = clsx("flex min-w-0 grow items-center gap-3 self-stretch rounded-lg pl-3 text-left focus-visible:-outline-offset-2", className);
+    $[2] = className;
+    $[3] = t4;
+  } else {
+    t4 = $[3];
+  }
+  let t5;
+  if ($[4] !== children || $[5] !== onSelect || $[6] !== t3 || $[7] !== t4) {
+    t5 = /*#__PURE__*/_jsx("button", {
+      type: "button",
+      "aria-current": t3,
+      className: t4,
+      onClick: onSelect,
+      children: children
+    });
+    $[4] = children;
+    $[5] = onSelect;
+    $[6] = t3;
+    $[7] = t4;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  let t6;
+  if ($[9] !== trailing) {
+    t6 = /*#__PURE__*/_jsx("span", {
+      className: "flex w-7 shrink-0 justify-center",
+      children: trailing
+    });
+    $[9] = trailing;
+    $[10] = t6;
+  } else {
+    t6 = $[10];
+  }
+  let t7;
+  if ($[11] !== t2 || $[12] !== t5 || $[13] !== t6) {
+    t7 = /*#__PURE__*/_jsxs("div", {
+      className: t2,
+      children: [t5, t6]
+    });
+    $[11] = t2;
+    $[12] = t5;
+    $[13] = t6;
+    $[14] = t7;
+  } else {
+    t7 = $[14];
+  }
+  return t7;
 }
 /* The providers by whether they are ready, need setup or are not installed; a group without providers is left out. */
-export function ProviderList({ groups, current, canAddAccount, onPick }) {
-    const { t } = useTranslation('agent-providers');
-    const picksCli = (kind) => (current?.kind === 'cli' || current?.kind === 'install') && current.cli === kind;
-    const picksAccount = (id) => current?.kind === 'account' && current.id === id;
-    const row = ({ provider, entries, note }) => {
-        // One account has no row of its own, so picking it lights up its provider.
-        const several = entries.length > 1;
-        const selected = picksCli(provider.kind) || (!several && entries[0] !== undefined && picksAccount(entries[0].id));
-        return (_jsxs("div", { className: "flex min-w-0 shrink-0 flex-col gap-0.5", children: [_jsxs(ListRow, { selected: selected, onSelect: () => onPick({ kind: 'cli', cli: provider.kind }), className: "py-2", trailing: canAddAccount(provider.kind) && (_jsx(IconButton, { icon: Plus, size: "sm", label: t('list.addAccount', { provider: provider.name }), className: clsx('group-hover:opacity-100 focus-visible:opacity-100', selected ? 'opacity-100' : 'opacity-0'), onClick: () => onPick({ kind: 'add', cli: provider.kind }) })), children: [_jsx(CliMark, { kind: provider.kind }), _jsx("span", { className: "min-w-0 grow truncate text-sm font-medium text-text", children: provider.name }), !several && _jsx(Note, { note: note })] }), several &&
-                    entries.map((entry) => (_jsxs(ListRow, { selected: picksAccount(entry.id), onSelect: () => onPick({ kind: 'account', id: entry.id }), className: "py-1.5", children: [_jsx("span", { className: "grid w-3.5 shrink-0 place-items-center", children: _jsx(AccountDot, { color: entry.account.color, className: "size-2.25" }) }), _jsx("span", { className: "min-w-0 grow truncate text-sm text-text", children: accountName(entry, provider.name) }), entry.isDefault && (_jsx("span", { className: "shrink-0 rounded-md bg-surface-active px-1.5 text-xs text-text-muted", children: t('list.default') })), _jsx(Note, { note: accountNote(entry.status) })] }, entry.id)))] }, provider.kind));
-    };
-    const section = (label, rows) => (_jsxs("section", { "aria-label": label, className: "flex min-w-0 shrink-0 flex-col gap-0.5 pb-2", children: [_jsx(SectionLabel, { className: "px-3 pt-1 pb-1", children: label }), rows] }, label));
-    return (_jsxs(_Fragment, { children: [groups.ready.length > 0 && section(t('list.ready'), groups.ready.map(row)), groups.setup.length > 0 && section(t('list.needsSetup'), groups.setup.map(row)), groups.ready.length === 0 && groups.setup.length === 0 && _jsx("p", { className: "px-3 py-2 text-xs text-text-muted", children: t('list.none') }), groups.missing.length > 0 &&
-                section(t('list.notInstalled'), _jsxs(_Fragment, { children: [groups.missing.map((provider) => (_jsxs(ListRow, { selected: picksCli(provider.kind), onSelect: () => onPick({ kind: 'install', cli: provider.kind }), className: "py-2", children: [_jsx(CliMark, { kind: provider.kind, className: "opacity-60" }), _jsx("span", { className: "min-w-0 grow truncate text-sm font-medium text-text-muted", children: provider.name })] }, provider.kind))), groups.missing.every((provider) => provider.install === undefined) && (_jsx("p", { className: "mt-1 px-3 text-xs text-text-faint", children: t('list.notInstalledNote') }))] }))] }));
-}
+export function ProviderList({
+  groups,
+  current,
+  canAddAccount,
+  canAddProvider = false,
+  onPick
+}) {
+  const {
+    t
+  } = useTranslation('agent-providers');
+  const picksCli = kind => (current?.kind === 'cli' || current?.kind === 'install') && current.cli === kind;
+  const picksAccount = id => current?.kind === 'account' && current.id === id;
+  const row = ({
+    provider,
+    entries,
+    note
+  }) => {
+    // One account has no row of its own, so picking it lights up its provider.
+    const several = entries.length > 1;
+    const selected = picksCli(provider.kind) || !several && entries[0] !== undefined && picksAccount(entries[0].id);
+    return /*#__PURE__*/_jsxs("div", {
+      className: "flex min-w-0 shrink-0 flex-col gap-0.5",
+      children: [/*#__PURE__*/_jsxs(ListRow, {
+        selected: selected,
+        onSelect: () => onPick({
+          kind: 'cli',
+          cli: provider.kind
+        }),
+        className: "py-2",
+        trailing: canAddAccount(provider.kind) && /*#__PURE__*/_jsx(IconButton, {
+          icon: Plus,
+          size: "sm",
+          label: t('list.addAccount', {
+            provider: provider.name
+          }),
+          className: clsx('group-hover:opacity-100 focus-visible:opacity-100', selected ? 'opacity-100' : 'opacity-0'),
+          onClick: () => onPick({
+            kind: 'add',
+            cli: provider.kind
+          })
+        }),
+        children: [/*#__PURE__*/_jsx(CliMark, {
+          kind: provider.kind
+        }), /*#__PURE__*/_jsx("span", {
+          className: "min-w-0 grow truncate text-sm font-medium text-text",
+          children: provider.name
+        }), !several && /*#__PURE__*/_jsx(Note, {
+          note: note
+        })]
+      }), several && entries.map(entry => /*#__PURE__*/_jsxs(ListRow, {
+        selected: picksAccount(entry.id),
+        onSelect: () => onPick({
+          kind: 'account',
+          id: entry.id
+        }),
+        className: "py-1.5",
+        children: [/*#__PURE__*/_jsx("span", {
+          className: "grid w-3.5 shrink-0 place-items-center",
+          children: /*#__PURE__*/_jsx(AccountDot, {
+            color: entry.account.color,
+            className: "size-2.25"
+          })
+        }), /*#__PURE__*/_jsx("span", {
+          className: "min-w-0 grow truncate text-sm text-text",
+          children: accountName(entry, provider.name)
+        }), entry.isDefault && /*#__PURE__*/_jsx("span", {
+          className: "shrink-0 rounded-md bg-surface-active px-1.5 text-xs text-text-muted",
+          children: t('list.default')
+        }), /*#__PURE__*/_jsx(Note, {
+          note: accountNote(entry.status)
+        })]
+      }, entry.id))]
+    }, provider.kind);
+  };
+  const section = (label, rows) => /*#__PURE__*/_jsxs("section", {
+    "aria-label": label,
+    className: "flex min-w-0 shrink-0 flex-col gap-0.5 pb-2",
+    children: [/*#__PURE__*/_jsx(SectionLabel, {
+      className: "px-3 pt-1 pb-1",
+      children: label
+    }), rows]
+  }, label);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [groups.ready.length > 0 && section(t('list.ready'), groups.ready.map(row)), groups.setup.length > 0 && section(t('list.needsSetup'), groups.setup.map(row)), groups.ready.length === 0 && groups.setup.length === 0 && /*#__PURE__*/_jsx("p", {
+      className: "px-3 py-2 text-xs text-text-muted",
+      children: t('list.none')
+    }), groups.missing.length > 0 && section(t('list.notInstalled'), /*#__PURE__*/_jsxs(_Fragment, {
+      children: [groups.missing.map(provider_0 => /*#__PURE__*/_jsxs(ListRow, {
+        selected: picksCli(provider_0.kind),
+        onSelect: () => onPick({
+          kind: 'install',
+          cli: provider_0.kind
+        }),
+        className: "py-2",
+        children: [/*#__PURE__*/_jsx(CliMark, {
+          kind: provider_0.kind,
+          className: "opacity-60"
+        }), /*#__PURE__*/_jsx("span", {
+          className: "min-w-0 grow truncate text-sm font-medium text-text-muted",
+          children: provider_0.name
+        })]
+      }, provider_0.kind)), groups.missing.every(provider_1 => provider_1.install === undefined) && /*#__PURE__*/_jsx("p", {
+        className: "mt-1 px-3 text-xs text-text-faint",
+        children: t('list.notInstalledNote')
+      })]
+    })), canAddProvider && /*#__PURE__*/_jsxs(ListRow, {
+      selected: current?.kind === 'catalog',
+      onSelect: () => onPick({
+        kind: 'catalog'
+      }),
+      className: "py-2",
+      children: [/*#__PURE__*/_jsx("span", {
+        className: "grid w-3.5 shrink-0 place-items-center text-text-muted",
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: Plus,
+          size: 14
+        })
+      }), /*#__PURE__*/_jsx("span", {
+        className: "min-w-0 grow truncate text-sm text-text-muted",
+        children: t('list.addProvider')
+      })]
+    })]
+  });
+}

package/dist/providers/ProvidersPane.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-import type { ProviderInfo } from '@adecore/agent-contracts';
+import type { AgentKind, ProviderInfo } from '@adecore/agent-contracts';
 import type { ProviderInstallStep } from './install-steps.js';
 import { type ProviderSetupStatus } from './provider-groups.js';
 interface ProvidersPaneProps {
@@ -8,6 +8,8 @@ interface ProvidersPaneProps {
     defaults?: boolean;
     installStepOf?(provider: ProviderInfo): ProviderInstallStep | null;
     setupStatusOf?(provider: ProviderInfo): ProviderSetupStatus | null;
+    sectionsOf?(provider: ProviderInfo): ReactNode | null;
+    addPage?(added: (kind: AgentKind) => void): ReactNode;
 }
-export declare function ProvidersPane({ target, detailOf, defaults, installStepOf, setupStatusOf }: ProvidersPaneProps): import("react").JSX.Element;
+export declare function ProvidersPane({ target, detailOf, defaults, installStepOf, setupStatusOf, sectionsOf, addPage }: ProvidersPaneProps): import("react").JSX.Element;
 export {};

package/dist/providers/ProvidersPane.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { accountLoginOf, accountsOfKind } from '../agents/accounts.js';
@@ -10,76 +10,256 @@ 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 { pickOfCli, pickOfTarget } from './pane-target.js';
 import { groupProviders } from './provider-groups.js';
 import { ProviderList } from './ProviderList.js';
 import { useProviderAccounts } from '../state/provider-accounts.js';
 import { useProviders } from '../state/providers.js';
+import { useHostLoginBlocked } from '../host-hooks.js';
 /* The agent CLIs of the host in scope, each with its accounts, beside the detail of what is picked. */
-export function ProvidersPane({ target = null, detailOf, defaults = true, installStepOf, setupStatusOf }) {
-    const { t } = useTranslation('agent-providers');
-    const { id: scopeId } = useChatScope();
-    const providers = useProviders((s) => s.providers);
-    const loaded = useProviders((s) => s.loaded);
-    const accounts = useProviderAccounts((s) => s.accounts);
-    const host = useChatHost();
-    const { openLogin } = host;
-    const loginBlocked = host.useLoginBlocked(scopeId);
-    const [picked, setPicked] = useState(() => pickOfTarget(target, providers));
-    const groups = groupProviders(providers, accounts, setupStatusOf);
-    const installed = [...groups.ready, ...groups.setup].map((row) => row.provider);
-    const entriesOf = (kind) => accountsOfKind(accounts, kind);
-    const loginOf = (kind) => accountLoginOf(accounts, kind);
-    // What was picked may be gone since (an account removed elsewhere); the first CLI stands in for it.
-    const pickedEntry = picked?.kind === 'account' ? (Object.hasOwn(accounts?.accounts ?? {}, picked.id) ? picked.id : null) : null;
-    const current = picked !== null && (picked.kind !== 'account' || pickedEntry !== null) ? picked : installed[0] ? { kind: 'cli', cli: installed[0].kind } : null;
-    const currentAccount = current?.kind === 'account' ? accounts?.accounts[current.id] : undefined;
-    const currentCli = current === null ? null : current.kind === 'account' ? currentAccount?.kind : current.cli;
-    const provider = (current?.kind === 'install' ? providers : installed).find((entry) => entry.kind === currentCli) ?? null;
-    // A search result lands on a row of a CLI's detail, so a picked account makes way for its CLI.
-    const [seenTarget, setSeenTarget] = useState(target);
-    if (target !== seenTarget) {
-        setSeenTarget(target);
-        const opened = pickOfTarget(target, providers);
-        if (opened !== null) {
-            setPicked(opened);
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export function ProvidersPane(t0) {
+  const $ = _c(13);
+  const {
+    target: t1,
+    detailOf,
+    defaults: t2,
+    installStepOf,
+    setupStatusOf,
+    sectionsOf,
+    addPage
+  } = t0;
+  const target = t1 === undefined ? null : t1;
+  const defaults = t2 === undefined ? true : t2;
+  const {
+    t
+  } = useTranslation("agent-providers");
+  const {
+    id: scopeId
+  } = useChatScope();
+  const providers = useProviders(_temp);
+  const loaded = useProviders(_temp2);
+  const accounts = useProviderAccounts(_temp3);
+  const host = useChatHost();
+  const {
+    openLogin
+  } = host;
+  const loginBlocked = useHostLoginBlocked(scopeId);
+  let t3;
+  if ($[0] !== providers || $[1] !== target) {
+    t3 = () => pickOfTarget(target, providers);
+    $[0] = providers;
+    $[1] = target;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  const [picked, setPicked] = useState(t3);
+  const groups = groupProviders(providers, accounts, setupStatusOf);
+  const installed = [...groups.ready, ...groups.setup].map(_temp4);
+  let t4;
+  if ($[3] !== accounts) {
+    t4 = kind => accountsOfKind(accounts, kind);
+    $[3] = accounts;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  const entriesOf = t4;
+  let t5;
+  if ($[5] !== accounts) {
+    t5 = kind_0 => accountLoginOf(accounts, kind_0);
+    $[5] = accounts;
+    $[6] = t5;
+  } else {
+    t5 = $[6];
+  }
+  const loginOf = t5;
+  const pickedEntry = picked?.kind === "account" ? Object.hasOwn(accounts?.accounts ?? {}, picked.id) ? picked.id : null : null;
+  const keeps = entry => {
+    switch (entry.kind) {
+      case "account":
+        {
+          return pickedEntry !== null;
         }
-        else if (target?.startsWith('providers.') && current?.kind !== 'cli' && provider !== null) {
-            setPicked({ kind: 'cli', cli: provider.kind });
+      case "catalog":
+        {
+          return addPage !== undefined;
         }
-    }
-    const added = (id, name, made) => {
-        setPicked({ kind: 'account', id });
-        if (made && provider !== null && loginOf(provider.kind) === 'terminal' && openLogin !== null && loginBlocked === null) {
-            void openLogin(scopeId, provider.kind, id, name);
-        }
-    };
-    const list = !loaded ? (_jsxs("div", { className: "flex flex-col gap-3 p-3", children: [_jsx(Skeleton, { className: "w-32" }), _jsx(Skeleton, { className: "w-40" })] })) : (_jsx(ProviderList, { groups: groups, current: current, canAddAccount: (kind) => loginOf(kind) !== null, onPick: setPicked }));
-    const detail = () => {
-        if (current === null || provider === null) {
-            return null;
-        }
-        if (current.kind === 'install') {
-            const extra = installStepOf?.(provider) ?? null;
-            const statuses = entriesOf(provider.kind).map((entry) => entry.status?.state);
-            // Without accounts to read, nothing says the CLI is signed out, so being there is all it takes.
-            const signedIn = statuses.length === 0 || statuses.includes('ready');
-            if (!provider.installed || !signedIn || (extra !== null && !extra.done)) {
-                return _jsx(InstallPage, { provider: provider, signedIn: signedIn, extra: extra }, provider.kind);
-            }
-        }
-        const own = current.kind === 'cli' || current.kind === 'install' ? (detailOf?.(provider) ?? null) : null;
-        if (own !== null) {
-            return own;
-        }
-        if (current.kind === 'add') {
-            return (_jsx(AddAccountForm, { provider: provider, entries: entriesOf(provider.kind), login: loginOf(provider.kind), onCancel: () => setPicked({ kind: 'cli', cli: provider.kind }), onAdded: added }, provider.kind));
+      case "cli":
+        {
+          return !loaded || installed.some(provider => provider.kind === entry.cli);
         }
-        if (current.kind === 'account') {
-            const entry = entriesOf(provider.kind).find((candidate) => candidate.id === current.id);
-            return (entry && (_jsx(AccountDetail, { provider: provider, entry: entry, login: loginOf(provider.kind), canOpenLogin: openLogin !== null, loginBlocked: loginBlocked, secretsAvailable: accounts?.secretsAvailable === true, onRemoved: () => setPicked({ kind: 'cli', cli: provider.kind }) }, entry.id)));
+      default:
+        {
+          return true;
         }
-        return (_jsx(CliDetail, { provider: provider, entries: accounts === null ? null : entriesOf(provider.kind), defaults: defaults, login: loginOf(provider.kind), onAddAccount: () => setPicked({ kind: 'add', cli: provider.kind }), onPickAccount: (id) => setPicked({ kind: 'account', id }) }));
-    };
-    return (_jsx(MasterDetail, { listWidth: 340, listLabel: t('list.label'), list: list, detail: _jsx(ErrorBoundary, { label: t('failed'), resetKeys: [scopeId, current?.kind, currentCli], children: _jsx("div", { className: "flex min-w-0 flex-col gap-7", children: detail() }) }) }));
+    }
+  };
+  const current = picked !== null && keeps(picked) ? picked : installed[0] ? {
+    kind: "cli",
+    cli: installed[0].kind
+  } : null;
+  const currentAccount = current?.kind === "account" ? accounts?.accounts[current.id] : undefined;
+  const currentCli = current === null || current.kind === "catalog" ? null : current.kind === "account" ? currentAccount?.kind : current.cli;
+  const provider_0 = (current?.kind === "install" ? providers : installed).find(entry_0 => entry_0.kind === currentCli) ?? null;
+  const [seenTarget, setSeenTarget] = useState(target);
+  if (target !== seenTarget) {
+    setSeenTarget(target);
+    const opened = pickOfTarget(target, providers);
+    if (opened !== null) {
+      setPicked(opened);
+    } else {
+      if (target?.startsWith("providers.") && current?.kind !== "cli" && provider_0 !== null) {
+        setPicked({
+          kind: "cli",
+          cli: provider_0.kind
+        });
+      }
+    }
+  }
+  const added = (id, name, made) => {
+    setPicked({
+      kind: "account",
+      id
+    });
+    if (made && provider_0 !== null && loginOf(provider_0.kind) === "terminal" && openLogin !== null && loginBlocked === null) {
+      openLogin(scopeId, provider_0.kind, id, name);
+    }
+  };
+  const list = !loaded ? /*#__PURE__*/_jsxs("div", {
+    className: "flex flex-col gap-3 p-3",
+    children: [/*#__PURE__*/_jsx(Skeleton, {
+      className: "w-32"
+    }), /*#__PURE__*/_jsx(Skeleton, {
+      className: "w-40"
+    })]
+  }) : /*#__PURE__*/_jsx(ProviderList, {
+    groups: groups,
+    current: current,
+    canAddAccount: kind_1 => loginOf(kind_1) !== null,
+    canAddProvider: addPage !== undefined,
+    onPick: setPicked
+  });
+  const detail = () => {
+    if (current?.kind === "catalog") {
+      return addPage?.(kind_2 => setPicked(pickOfCli(kind_2, providers))) ?? null;
+    }
+    if (current === null || provider_0 === null) {
+      return null;
+    }
+    if (current.kind === "install") {
+      const extra = installStepOf?.(provider_0) ?? null;
+      const statuses = entriesOf(provider_0.kind).map(_temp5);
+      const signedIn = statuses.length === 0 || statuses.includes("ready");
+      if (!provider_0.installed || !signedIn || extra !== null && !extra.done) {
+        return /*#__PURE__*/_jsx(InstallPage, {
+          provider: provider_0,
+          signedIn: signedIn,
+          extra: extra
+        }, provider_0.kind);
+      }
+    }
+    const own = current.kind === "cli" || current.kind === "install" ? detailOf?.(provider_0) ?? null : null;
+    if (own !== null) {
+      return own;
+    }
+    if (current.kind === "add") {
+      return /*#__PURE__*/_jsx(AddAccountForm, {
+        provider: provider_0,
+        entries: entriesOf(provider_0.kind),
+        login: loginOf(provider_0.kind),
+        onCancel: () => setPicked({
+          kind: "cli",
+          cli: provider_0.kind
+        }),
+        onAdded: added
+      }, provider_0.kind);
+    }
+    if (current.kind === "account") {
+      const entry_2 = entriesOf(provider_0.kind).find(candidate => candidate.id === current.id);
+      return entry_2 && /*#__PURE__*/_jsx(AccountDetail, {
+        provider: provider_0,
+        entry: entry_2,
+        login: loginOf(provider_0.kind),
+        canOpenLogin: openLogin !== null,
+        loginBlocked: loginBlocked,
+        secretsAvailable: accounts?.secretsAvailable === true,
+        onRemoved: () => setPicked({
+          kind: "cli",
+          cli: provider_0.kind
+        })
+      }, entry_2.id);
+    }
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(CliDetail, {
+        provider: provider_0,
+        entries: accounts === null ? null : entriesOf(provider_0.kind),
+        defaults: defaults,
+        login: loginOf(provider_0.kind),
+        onAddAccount: () => setPicked({
+          kind: "add",
+          cli: provider_0.kind
+        }),
+        onPickAccount: id_0 => setPicked({
+          kind: "account",
+          id: id_0
+        })
+      }), sectionsOf?.(provider_0) ?? null]
+    });
+  };
+  let t6;
+  if ($[7] !== t) {
+    t6 = t("list.label");
+    $[7] = t;
+    $[8] = t6;
+  } else {
+    t6 = $[8];
+  }
+  let t7;
+  if ($[9] !== t) {
+    t7 = t("failed");
+    $[9] = t;
+    $[10] = t7;
+  } else {
+    t7 = $[10];
+  }
+  const t8 = "flex min-w-0 flex-col gap-7";
+  const t9 = detail();
+  let t10;
+  if ($[11] !== t9) {
+    t10 = /*#__PURE__*/_jsx("div", {
+      className: t8,
+      children: t9
+    });
+    $[11] = t9;
+    $[12] = t10;
+  } else {
+    t10 = $[12];
+  }
+  return /*#__PURE__*/_jsx(MasterDetail, {
+    listWidth: 340,
+    listLabel: t6,
+    list: list,
+    detail: /*#__PURE__*/_jsx(ErrorBoundary, {
+      label: t7,
+      resetKeys: [scopeId, current?.kind, currentCli],
+      children: t10
+    })
+  });
+}
+function _temp5(entry_1) {
+  return entry_1.status?.state;
+}
+function _temp4(row) {
+  return row.provider;
+}
+function _temp3(s_1) {
+  return s_1.accounts;
+}
+function _temp2(s_0) {
+  return s_0.loaded;
 }
+function _temp(s) {
+  return s.providers;
+}