@adecore/agents-react 0.31.11 → 0.32.0

package/src/usage/UsageBreakdown.tsx

@@ -5,14 +5,14 @@ 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 { useChatHost } from '../host';
 import type { UsageMetric } from '../state/usage';
 import { ProviderLogo } from '../agents/ProviderLogo';
 import { USAGE_PROVIDERS, totalTokensOf } from '@adecore/agent-contracts';
-import { modelNameFromSlug } from '../agents/model-name';
+import { useModelName } from '../agents/model-name';
 import { formatCount, formatTokens, PROVIDER_COLORS, PROVIDER_LABELS, shortPath, slotLabel } from './format';
 import { useMoney } from './money';
 import { deriveDays } from './summary';
+import { useHostProjectLook } from '../host-hooks';
 
 type Breakdown = 'models' | 'projects' | 'day';
 
@@ -40,6 +40,16 @@ function ProviderMark({ provider }: { provider: UsageProvider }) {
     );
 }
 
+/* The name the machine's catalog gives the model, where it has the model; the slug made readable where it does not. */
+function ModelName({ provider, slug }: { provider: UsageProvider; slug: string }) {
+    return useModelName(provider, slug);
+}
+
+function PricedAs({ provider, slug }: { provider: UsageProvider; slug: string }) {
+    const { t } = useTranslation('agent-usage');
+    return t('breakdown.models.pricedAs', { model: useModelName(provider, slug) });
+}
+
 function ModelRows({ models, metric, total }: { models: readonly UsageModel[]; metric: UsageMetric; total: number }) {
     const { t } = useTranslation('agent-usage');
     const money = useMoney();
@@ -61,9 +71,11 @@ function ModelRows({ models, metric, total }: { models: readonly UsageModel[]; m
             {sorted.map((model) => (
                 <div key={`${model.provider} ${model.model}`} className={ROW}>
                     <ProviderMark provider={model.provider} />
-                    <span className="truncate">{modelNameFromSlug(model.model)}</span>
+                    <span className="truncate">
+                        <ModelName provider={model.provider} slug={model.model} />
+                    </span>
                     {model.priceBasis === 'family' && model.pricedAs !== null && (
-                        <Tooltip label={t('breakdown.models.pricedAs', { model: modelNameFromSlug(model.pricedAs) })}>
+                        <Tooltip label={<PricedAs provider={model.provider} slug={model.pricedAs} />}>
                             <span className="text-text-faint">
                                 <Icon icon={Info} size={12} />
                             </span>
@@ -97,9 +109,8 @@ 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 = host.useProjectLook(useChatScope().id, project.projectId);
+    const look = useHostProjectLook(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

@@ -12,6 +12,7 @@ import { useLimitGroups, useUsageLimits } from './limits';
 import { useProviderAccountsStore } from '../state/provider-accounts';
 import { useChatScope } from '../scope';
 import { ProviderLogo } from '../agents/ProviderLogo';
+import { useHostLoginBlocked } from '../host-hooks';
 
 const MINUTE_MS = 60_000;
 
@@ -101,7 +102,7 @@ export function UsageLimits() {
     const scopeId = useChatScope().id;
     const loginCommands = useProviderAccountsStore((s) => s.byScope[scopeId]?.accounts?.loginCommands);
     const { openLogin } = host;
-    const blocked = host.useLoginBlocked(scopeId);
+    const blocked = useHostLoginBlocked(scopeId);
     const [filter, setFilter] = useState<Filter>('all');
 
     if (limits === null) {

package/src/usage/UsagePage.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState, useSyncExternalStore, type ReactNode } from 'react';
+import { useCallback, useEffect, useState, useSyncExternalStore, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ChartNoAxesColumn, RefreshCw } from 'lucide-react';
 import { USAGE_PROVIDERS, type UsageAccount } from '@adecore/agent-contracts';
@@ -29,7 +29,7 @@ const DIALOG_CENTER = 'pointer-events-none absolute inset-0';
 /* Whether the scope's host answers right now, redrawn as its link comes and goes. */
 function useAnswering(transport: ChatTransport): boolean {
     return useSyncExternalStore(
-        useCallback((onChange: () => void) => transport.subscribeStatus(onChange), [transport]),
+        (onChange: () => void) => transport.subscribeStatus(onChange),
         () => transport.status === 'open'
     );
 }
@@ -43,7 +43,7 @@ function HostAgents() {
     const { t } = useTranslation('agent-usage');
     const { id } = useChatScope();
     const row = useProvidersStore((s) => s.byScope[id]);
-    const installed = useMemo(() => (row?.providers ?? []).filter((provider) => provider.installed), [row]);
+    const installed = (row?.providers ?? []).filter((provider) => provider.installed);
     if (!row?.loaded) {
         return null;
     }

package/src/usage/index.ts

@@ -10,7 +10,7 @@ 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 { evenPace, type EvenPace, type LimitAccount, type LimitGroup, type PaceStanding } from './limit-groups';
 export { useLimitGroups } from './limits';
 export { useMoney } from './money';
 export { niceScale, labelEveryFor, deriveUsage, type ChartSlot, type ProviderTotal, type DerivedUsage } from './summary';

package/src/usage/limit-groups.ts

@@ -1,5 +1,6 @@
 import i18next from 'i18next';
 import {
+    evenPace,
     USAGE_PROVIDERS,
     type ProviderAccounts,
     type ProviderAccountStatus,
@@ -13,6 +14,8 @@ import { accountName, accountsOfKind, accountStatusLine } from '../agents/accoun
 import { formatDuration } from '@adecore/ui/format';
 import { PROVIDER_LABELS } from './format';
 
+export { evenPace, type EvenPace, type PaceStanding } from '@adecore/agent-contracts';
+
 const MINUTE = 60_000;
 
 /* One account of a CLI as the limits draw it. */
@@ -93,6 +96,15 @@ export function nextReset(windows: readonly UsageWindow[], now: number): (UsageW
     return next;
 }
 
+/* The bar as words for whoever cannot see the mark: how much is used and how that stands against an even pace. */
+export function paceText(window: UsageWindow, now: number): string {
+    const percent = Math.round(window.used * 100);
+    const pace = evenPace(window, now);
+    return pace === null
+        ? i18next.t('agent-usage:limits.used', { percent })
+        : i18next.t(`agent-usage:limits.pace.${pace.standing}`, { percent, pace: pace.percent });
+}
+
 /* When the numbers came in and from where: a read of the machine's own, or a turn that reported them. Null before the first read. */
 export function checkedLabel(entry: UsageLimitsProvider, now: number): string | null {
     if (entry.checkedAt <= 0) {

package/src/usage/limits.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect } from 'react';
 import type { UsageLimitsSnapshot } from '@adecore/agent-contracts';
 import { useChatScope, type ChatScope } from '../scope';
 import { useProviderAccountsStore } from '../state/provider-accounts';
@@ -67,5 +67,5 @@ export function useUsageLimits(): UsageLimitsSnapshot | null {
 export function useLimitGroups(limits: UsageLimitsSnapshot | null): LimitGroup[] {
     const { id } = useChatScope();
     const accounts = useProviderAccountsStore((s) => s.byScope[id]?.accounts ?? null);
-    return useMemo(() => (limits === null ? [] : limitGroups(limits, accounts)), [limits, accounts]);
+    return limits === null ? [] : limitGroups(limits, accounts);
 }

package/src/usage/money.ts

@@ -1,4 +1,3 @@
-import { useMemo } from 'react';
 import { useUsage } from '../state/usage';
 import { moneyFormat } from './format';
 
@@ -6,5 +5,5 @@ import { moneyFormat } from './format';
 export function useMoney(): (usd: number) => string {
     const currency = useUsage((s) => s.currency);
     const rate = useUsage((s) => s.summary?.rate ?? null);
-    return useMemo(() => moneyFormat(currency, rate), [currency, rate]);
+    return moneyFormat(currency, rate);
 }