@adecore/agents-react 0.23.0 → 0.24.0

package/src/providers/AddAccountForm.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { ChevronRight } from 'lucide-react';
 import type { ProviderInfo } from '@adecore/agent-contracts';
 import { freeAccountColor, mintAccountId, type AccountEntry } from '../agents/accounts';
-import { chatHost } from '../host';
+import { useChatHost } from '../host';
 import { useChatScope } from '../scope';
 import { createAccount, linkAccount } from './account-actions';
 import { AccountColors } from './AccountColors';
@@ -28,8 +28,9 @@ interface AddAccountFormProps {
 export function AddAccountForm({ provider, entries, onCancel, onAdded }: AddAccountFormProps) {
     const { t } = useTranslation('agent-providers');
     const scope = useChatScope();
+    const { accents } = useChatHost();
     const [name, setName] = useState('');
-    const [color, setColor] = useState<string>(() => freeAccountColor(entries, chatHost().accents.current()));
+    const [color, setColor] = useState<string>(() => freeAccountColor(entries, accents, accents.current()));
     const [advanced, setAdvanced] = useState(false);
     const [folder, setFolder] = useState('');
     const [busy, setBusy] = useState(false);

package/src/providers/ProvidersPane.tsx

@@ -7,7 +7,7 @@ import { AccountDot } from '../agents/AccountDot';
 import { ACCOUNT_TONE_CLASSES, accountName, accountsOfKind, accountStatusLine, type AccountEntry } from '../agents/accounts';
 import { ErrorBoundary, Icon, IconButton, SectionLabel, Skeleton } from '@adecore/ui';
 import { MasterDetail } from '@adecore/ui/settings';
-import { chatHost } from '../host';
+import { useChatHost } from '../host';
 import { useChatScope } from '../scope';
 import { AccountDetail } from './AccountDetail';
 import { AddAccountForm } from './AddAccountForm';
@@ -63,8 +63,9 @@ export function ProvidersPane({ target = null, detailOf, defaults = true }: Prov
     const providers = useProviders((s) => s.providers);
     const loaded = useProviders((s) => s.loaded);
     const accounts = useProviderAccounts((s) => s.accounts);
-    const { openLogin } = chatHost();
-    const loginBlocked = chatHost().useLoginBlocked(scopeId);
+    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 installed = useMemo(() => providers.filter((provider) => provider.installed || provider.kind === 'apple'), [providers]);

package/src/providers/account-actions.ts

@@ -1,7 +1,7 @@
 import i18next from 'i18next';
 import type { AgentKind, ProviderAccount, ProviderAccountMap } from '@adecore/agent-contracts';
 import { accountFor, readChatPreferences, rememberChatAccount } from '../chat/preferences';
-import { chatHost } from '../host';
+import type { ChatHost } from '../host';
 import type { ChatScope } from '../scope';
 import { providerAccountsOf, useProviderAccountsStore } from '../state/provider-accounts';
 import type { ChatTransport } from '../transport';
@@ -22,29 +22,29 @@ function linkTo(scope: ChatScope): ChatTransport {
 }
 
 /* The whole map, as `accounts.save` takes it. Answers false when the host refused, which a toast then says. */
-export async function saveAccounts(scope: ChatScope, accounts: ProviderAccountMap): Promise<boolean> {
+export async function saveAccounts(scope: ChatScope, host: Pick<ChatHost, 'notify'>, accounts: ProviderAccountMap): Promise<boolean> {
     try {
         useProviderAccountsStore.getState().set(scope.id, await linkTo(scope).request('accounts.save', { accounts }));
         return true;
     } catch (e) {
-        chatHost().notify({ id: `providers-save-${scope.id}`, kind: 'error', title: words('account.saveFailed'), description: reason(e) });
+        host.notify({ id: `providers-save-${scope.id}`, kind: 'error', title: words('account.saveFailed'), description: reason(e) });
         return false;
     }
 }
 
 /* One account changed and every other one as the host last said. */
-export function saveAccount(scope: ChatScope, id: string, account: ProviderAccount): Promise<boolean> {
+export function saveAccount(scope: ChatScope, host: Pick<ChatHost, 'notify'>, id: string, account: ProviderAccount): Promise<boolean> {
     const current = providerAccountsOf(scope.id).accounts?.accounts ?? {};
-    return saveAccounts(scope, { ...current, [id]: account });
+    return saveAccounts(scope, host, { ...current, [id]: account });
 }
 
 /*
  * Forgets an account; its folder stays where it is. A pick for new agents that named it goes back to
  * the CLI's default account, since no chat started from it yet.
  */
-export async function removeAccount(scope: ChatScope, id: string, kind: AgentKind): Promise<void> {
+export async function removeAccount(scope: ChatScope, host: Pick<ChatHost, 'notify'>, id: string, kind: AgentKind): Promise<void> {
     const { [id]: _gone, ...rest } = providerAccountsOf(scope.id).accounts?.accounts ?? {};
-    if (!(await saveAccounts(scope, rest))) {
+    if (!(await saveAccounts(scope, host, rest))) {
         throw new Error(words('account.saveFailed'));
     }
     if (accountFor(readChatPreferences(), scope.id, kind) === id) {

package/src/providers/index.ts

@@ -0,0 +1,17 @@
+// Public API: exports.test.ts snapshots this list, so a name added or dropped here is an API change.
+export { AccountDot } from '../agents/AccountDot';
+export { AgentIcon } from '../agents/AgentIcon';
+export { ModelOptionControl } from '../agents/ModelOptionControl';
+export { ProviderLogo } from '../agents/ProviderLogo';
+export { type AccountEntry, accountsOfKind, accountName, ACCOUNT_TONE_CLASSES, accountStatusLine, canContinueOn, type AccountTone } from '../agents/accounts';
+export { modelName, useModelName, shortModelName } from '../agents/model-name';
+export { optionValue, carryOptions } from '../agents/model-options';
+export { modelRequirementOf, type ModelRequirement } from '../agents/model-requirement';
+export { AccountColors } from './AccountColors';
+export { AccountDetail } from './AccountDetail';
+export { AccountVariables } from './AccountVariables';
+export { AddAccountForm } from './AddAccountForm';
+export { CliDetail } from './CliDetail';
+export { ProvidersPane } from './ProvidersPane';
+export { saveAccounts, saveAccount, removeAccount, createAccount, linkAccount } from './account-actions';
+export { CliMark, CliTile } from './parts';

package/src/providers/provider-abilities.ts

@@ -1,5 +1,5 @@
 import i18next from 'i18next';
-import type { ProviderInfo } from '@adecore/agent-contracts';
+import type { ProviderCapabilities, ProviderInfo } from '@adecore/agent-contracts';
 
 /* What a provider offers, in one sentence, where it can be opened and whether its hooks report status. */
 export function providerAbilities(provider: ProviderInfo): string {
@@ -7,3 +7,8 @@ export function providerAbilities(provider: ProviderInfo): string {
     const status = provider.capabilities.hooks ? i18next.t('agent-providers:abilities.reportsStatus') : i18next.t('agent-providers:abilities.noStatus');
     return `${where} ${status}`;
 }
+
+/* Whether a message sent while a turn runs may join it. Undefined while the host has not answered `provider.list`, which steers nothing. */
+export function canSteer(capabilities: ProviderCapabilities | undefined): boolean {
+    return capabilities?.steer === true;
+}

package/src/state/chats.ts

@@ -11,6 +11,7 @@ import type {
     ChatQuestionItem,
     ChatVisual
 } from '@adecore/agent-contracts';
+import { appendToolOutput } from '@adecore/agent-contracts/text';
 import { ChatScopeContext, useChatScope } from '../scope';
 
 export interface ChatState {
@@ -123,7 +124,8 @@ export function prependPage(state: ChatState, cursor: string, page: ChatHistoryR
     const olderIds = new Set(older.map((item) => item.id));
     const items = { ...state.items };
     for (const item of older) {
-        items[item.id] = item;
+        // A request from before the page that this client already holds came in live, which is never older than the page.
+        items[item.id] = state.items[item.id] ?? item;
     }
     const order = [...olderIds, ...state.order];
     if (page.history.cursor === null) {
@@ -193,7 +195,7 @@ export function applyEvent(state: ChatState, event: ChatEvent): ChatState {
             }
             if (item?.kind === 'tool' && item.state === 'running') {
                 const progress = item.progress ?? { startedAt: null, description: null, output: null };
-                const grown = { ...item, progress: { ...progress, output: (progress.output ?? '') + event.text } };
+                const grown = { ...item, progress: { ...progress, output: appendToolOutput(progress.output, event.text) } };
                 return { ...state, items: { ...state.items, [event.itemId]: grown } };
             }
             return state;

package/src/state/index.ts

@@ -0,0 +1,39 @@
+// Public API: exports.test.ts snapshots this list, so a name added or dropped here is an API change.
+export {
+    type ChatState,
+    type ChatsById,
+    type ChatStatuses,
+    type ChatSink,
+    prependPage,
+    waitingRequestsOf,
+    applyEvent,
+    useChats,
+    chatSink,
+    useChatRow,
+    useReportedModels,
+    useCurrentItem,
+    type ChatHistoryPage,
+    type ChatPage
+} from './chats';
+export {
+    useProviderAccountsStore,
+    useProviderAccounts,
+    providerAccountsOf,
+    knownAccounts,
+    watchProviderAccounts,
+    type ProviderAccountsRow
+} from './provider-accounts';
+export { useProvidersStore, useProviders, providersOf, providerSinkFor, type ProvidersRow } from './providers';
+export {
+    type UsageMetric,
+    USAGE_PREFERENCES_KEY,
+    usagePreferencesKey,
+    dayOf,
+    windowFor,
+    summaryPayload,
+    reloadUsagePreferences,
+    useUsageStore,
+    useUsage,
+    type UsagePeriod,
+    type UsageView
+} from './usage';

package/src/testing/index.ts

@@ -0,0 +1,2 @@
+// Public API: exports.test.ts snapshots this list, so a name added or dropped here is an API change.
+export { PROMPT_SAMPLES } from './prompts';

package/src/{prompts/logic/prompts.fixtures.ts → testing/prompts.ts}

@@ -1,5 +1,5 @@
 import type { ChatQuestion, ChatQuestionItem, ChatApprovalItem } from '@adecore/agent-contracts';
-import type { PendingPrompt } from './prompts';
+import type { PendingPrompt } from '../prompts/logic/prompts';
 
 const endpoints: ChatQuestion = {
     id: 'endpoints',

package/src/theme.css

@@ -91,13 +91,14 @@
     /*
      * A chat that is a view of its own reads in a column. The scroller keeps the full width of the
      * main column, so its scrollbar sits at that column's right edge and nothing jumps when the
-     * thread grows past a screenful; only the rows and the composer inside it are centered.
+     * thread grows past a screenful; only the rows and the composer inside it are centered. The
+     * width is the person's reading width (`chat/reading-width.ts`).
      */
-    .chat-column .chat-column-content { margin-inline: auto; max-width: 768px; }
+    .chat-column .chat-column-content { margin-inline: auto; max-width: var(--chat-measure, 768px); }
     /* Wide pages clear the scrubber even when the reply column needs no extra padding. */
     .chat-wide-content { max-width: calc(100% - 2 * var(--chat-wide-inset, 0px)); }
     /* Wider by the input's inset (`.composer-input .cm-content` padding plus the card's border), so what is typed lines up with the thread. */
-    .chat-column .chat-composer-content { margin-inline: auto; max-width: calc(768px + 2 * 21px); }
+    .chat-column .chat-composer-content { margin-inline: auto; max-width: calc(var(--chat-measure, 768px) + 2 * 21px); }
 
     /* A diff inside a chat tool block; the library paints its own colors inside a shadow root and
        takes the face it draws them in through these variables. */
@@ -184,6 +185,15 @@
     --tw-prose-th-borders: var(--border);
     --tw-prose-td-borders: var(--border);
 }
+/* A muted `Markdown`, such as a thought the model had before it answered. */
+.prose.chat-markdown[data-muted] {
+    --tw-prose-body: var(--text-muted);
+    --tw-prose-headings: var(--text-muted);
+    --tw-prose-bold: var(--text-muted);
+    --tw-prose-quotes: var(--text-muted);
+    --tw-prose-code: var(--text-muted);
+    --tw-prose-pre-code: var(--text-muted);
+}
 /* Headings stay on the app's scale, which is flatter than the one prose brings. */
 .chat-markdown :is(h1, h2, h3, h4) { font-weight: 600; line-height: round(1.3em, 1px); }
 .chat-markdown h1 { font-size: var(--text-lg); }

package/src/usage/UsageBreakdown.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import type { UsageModel, UsageProject, UsageProvider, UsageSummaryResult } from '@adecore/agent-contracts';
 import { EmptyState, Icon, SectionLabel, Segmented, Tooltip } from '@adecore/ui';
 import { useChatScope } from '../scope';
-import { chatHost } from '../host';
+import { useChatHost } from '../host';
 import type { UsageMetric } from '../state/usage';
 import { ProviderLogo } from '../agents/ProviderLogo';
 import { USAGE_PROVIDERS, totalTokensOf } from '@adecore/agent-contracts';
@@ -97,8 +97,9 @@ function ModelRows({ models, metric, total }: { models: readonly UsageModel[]; m
 
 /* One project's row, under the name and the mark its host gives it, or its folder's own under a folder. */
 function ProjectRow({ project, top, money }: { project: UsageProject; top: number; money(usd: number): string }) {
+    const host = useChatHost();
     // The usage on screen is one host's, so the look of a project is that host's too.
-    const look = chatHost().useProjectLook(useChatScope().id, project.projectId);
+    const look = host.useProjectLook(useChatScope().id, project.projectId);
     return (
         /* The mark sits on the title rather than between the two lines, so the icons line up with the names. */
         <div className={`${ROW} h-auto items-start py-1.5`}>

package/src/usage/UsageLimits.tsx

@@ -4,7 +4,7 @@ import { LogIn } from 'lucide-react';
 import type { UsageProvider } from '@adecore/agent-contracts';
 import { AccountDot } from '../agents/AccountDot';
 import { Button, Icon, SectionLabel, Segmented, Tooltip, useNow } from '@adecore/ui';
-import { chatHost } from '../host';
+import { useChatHost } from '../host';
 import { PROVIDER_COLORS, PROVIDER_LABELS } from './format';
 import { accountNote, checkedLabel, hasSeveralAccounts, isSignedOut, type LimitAccount } from './limit-groups';
 import { WindowBar } from './LimitsList';
@@ -93,14 +93,15 @@ function LimitCard({ account, named, now, login }: { account: LimitAccount; name
  * credential: every CLI holds its own login and answers the question when the daemon starts one and asks.
  */
 export function UsageLimits() {
+    const host = useChatHost();
     const { t } = useTranslation('agent-usage');
     const limits = useUsageLimits();
     const groups = useLimitGroups(limits);
     const now = useNow(MINUTE_MS);
     const scopeId = useChatScope().id;
     const loginCommands = useProviderAccountsStore((s) => s.byScope[scopeId]?.accounts?.loginCommands);
-    const { openLogin } = chatHost();
-    const blocked = chatHost().useLoginBlocked(scopeId);
+    const { openLogin } = host;
+    const blocked = host.useLoginBlocked(scopeId);
     const [filter, setFilter] = useState<Filter>('all');
 
     if (limits === null) {

package/src/usage/UsagePage.tsx

@@ -4,7 +4,7 @@ import { ChartNoAxesColumn, RefreshCw } from 'lucide-react';
 import { USAGE_PROVIDERS, type UsageAccount } from '@adecore/agent-contracts';
 import { Button, CloseButton, Dialog, EmptyState, FormError, IconButton, Segmented, Select, Skeleton } from '@adecore/ui';
 import { AccountDot } from '../agents/AccountDot';
-import { chatHost } from '../host';
+import { useChatHost } from '../host';
 import { useChatScope } from '../scope';
 import { useProvidersStore } from '../state/providers';
 import { askedKey, summaryPayload, USAGE_PERIODS, useUsage, useUsageStore, type UsageMetric, type UsagePeriod } from '../state/usage';
@@ -39,6 +39,7 @@ function useAnswering(transport: ChatTransport): boolean {
  * agent looks like too, and the way to fix that is the agent settings.
  */
 function HostAgents() {
+    const host = useChatHost();
     const { t } = useTranslation('agent-usage');
     const { id } = useChatScope();
     const row = useProvidersStore((s) => s.byScope[id]);
@@ -51,7 +52,7 @@ function HostAgents() {
             <p className="text-xs text-text-muted">
                 {installed.length === 0 ? t('agents.none') : t('agents.installed', { list: installed.map((provider) => provider.name).join(', ') })}
             </p>
-            <Button size="sm" variant="secondary" onClick={() => chatHost().openSettings('agents')}>
+            <Button size="sm" variant="secondary" onClick={() => host.openSettings('agents')}>
                 {t('agents.settings')}
             </Button>
         </div>

package/src/usage/index.ts

@@ -0,0 +1,16 @@
+// Public API: exports.test.ts snapshots this list, so a name added or dropped here is an API change.
+export { WindowBar, LimitsList, AccountLimitsList } from './LimitsList';
+export { UsageBreakdown } from './UsageBreakdown';
+export { UsageChart } from './UsageChart';
+export { UsageDialog } from './UsageDialog';
+export { UsageLimits } from './UsageLimits';
+export { UsageLimitsCard } from './UsageLimitsCard';
+export { UsagePage } from './UsagePage';
+export { UsagePane } from './UsagePane';
+export { UsageSummary } from './UsageSummary';
+export { UsageTiles } from './UsageTiles';
+export { formatClock, type UsageCurrency } from './format';
+export type { LimitAccount, LimitGroup } from './limit-groups';
+export { useLimitGroups } from './limits';
+export { useMoney } from './money';
+export { niceScale, labelEveryFor, deriveUsage, type ChartSlot, type ProviderTotal, type DerivedUsage } from './summary';