@adecore/agents-react 0.0.1 → 0.17.0-beta.2

package/dist/providers/variables.d.ts

@@ -0,0 +1,13 @@
+import type { ProviderAccountVariable } from '@adecore/agent-contracts';
+export interface VariableDraft {
+    key: string;
+    name: string;
+    value: string;
+    sensitive: boolean;
+    kept: string | null;
+}
+export declare function draftsOf(env: readonly ProviderAccountVariable[] | undefined): VariableDraft[];
+export declare function emptyDraft(sensitive: boolean): VariableDraft;
+export declare function variablesProblem(drafts: readonly VariableDraft[]): string | null;
+export declare function variablesOf(drafts: readonly VariableDraft[]): ProviderAccountVariable[];
+export declare function variablesChanged(drafts: readonly VariableDraft[], env: readonly ProviderAccountVariable[] | undefined): boolean;

package/dist/providers/variables.js

@@ -0,0 +1,63 @@
+import i18next from 'i18next';
+const NAME = /^[A-Za-z_][A-Za-z0-9_]{0,127}$/;
+let drafted = 0;
+function nextKey() {
+    drafted += 1;
+    return `variable-${drafted}`;
+}
+export function draftsOf(env) {
+    return (env ?? []).map((variable) => ({
+        key: nextKey(),
+        name: variable.name,
+        value: variable.value,
+        sensitive: variable.sensitive,
+        kept: variable.sensitive && variable.valueRedacted === true ? variable.name : null
+    }));
+}
+export function emptyDraft(sensitive) {
+    return { key: nextKey(), name: '', value: '', sensitive, kept: null };
+}
+/*
+ * A value the keychain holds only counts under the name it was kept under, and only while it stays
+ * sensitive: the machine finds it by that name, and never hands it out to be stored in plain text.
+ */
+function keepsValue(draft) {
+    return draft.value === '' && draft.sensitive && draft.kept === draft.name;
+}
+/* The first thing that keeps these from being saved, in a sentence; null when they can be. */
+export function variablesProblem(drafts) {
+    const words = (key, name) => i18next.t(`agent-providers:account.variables.problem.${key}`, { name });
+    const seen = new Set();
+    for (const draft of drafts) {
+        const name = draft.name.trim();
+        if (name === '') {
+            return words('noName', '');
+        }
+        if (!NAME.test(name)) {
+            return words('invalidName', name);
+        }
+        if (seen.has(name)) {
+            return words('duplicate', name);
+        }
+        seen.add(name);
+        if (draft.value === '' && !keepsValue({ ...draft, name })) {
+            return words('noValue', name);
+        }
+    }
+    return null;
+}
+/* The variables as `accounts.save` takes them; a kept value goes back empty and redacted, so the machine keeps what it has. */
+export function variablesOf(drafts) {
+    return drafts.map((draft) => {
+        const name = draft.name.trim();
+        if (keepsValue({ ...draft, name })) {
+            return { name, value: '', sensitive: true, valueRedacted: true };
+        }
+        return { name, value: draft.value, sensitive: draft.sensitive };
+    });
+}
+/* Whether the drafts say something other than what the machine holds. */
+export function variablesChanged(drafts, env) {
+    return (JSON.stringify(variablesOf(drafts)) !==
+        JSON.stringify((env ?? []).map(({ name, value, sensitive, valueRedacted }) => ({ name, value, sensitive, ...(valueRedacted ? { valueRedacted } : {}) }))));
+}

package/dist/scope.d.ts

@@ -0,0 +1,11 @@
+import type { ChatClient } from './chat/chat-client.js';
+import type { ChatTransport } from './transport.js';
+export interface ChatScope {
+    readonly id: string;
+    keyOf(chatId: string): string;
+    owns(key: string): boolean;
+    readonly transport: ChatTransport;
+    readonly chats: ChatClient;
+}
+export declare const ChatScopeContext: import("react").Context<ChatScope | null>;
+export declare function useChatScope(): ChatScope;

package/dist/scope.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react';
+export const ChatScopeContext = createContext(null);
+/* Throws outside a scope on purpose: a component that reads a chat has to know which host it runs on. */
+export function useChatScope() {
+    const scope = useContext(ChatScopeContext);
+    if (scope === null) {
+        throw new Error('This component reads a chat, so it has to be rendered inside a ChatScopeContext');
+    }
+    return scope;
+}

package/dist/settings/sections.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentType } from 'react';
+import { type LucideIcon } from 'lucide-react';
+import type { SettingsSectionEntry } from '@adecore/ui/settings';
+export interface AgentsSettingsSection {
+    id: string;
+    icon: LucideIcon;
+    split?: boolean;
+    label(): string;
+    description(): string;
+}
+export declare const PROVIDERS_SECTION: AgentsSettingsSection;
+export declare const USAGE_SECTION: AgentsSettingsSection;
+export declare function settingsSection(section: AgentsSettingsSection, pane: ComponentType): SettingsSectionEntry;

package/dist/settings/sections.js

@@ -0,0 +1,32 @@
+import i18next from 'i18next';
+import { Brain, ChartNoAxesColumn } from 'lucide-react';
+/* The agent CLIs of the host and the accounts they sign in with: `ProvidersPane`. */
+export const PROVIDERS_SECTION = {
+    id: 'providers',
+    icon: Brain,
+    split: true,
+    label: () => i18next.t('agent-providers:section.label'),
+    description: () => i18next.t('agent-providers:section.description')
+};
+/* The currency of the usage page and the way to it: `UsagePane`. */
+export const USAGE_SECTION = {
+    id: 'usage',
+    icon: ChartNoAxesColumn,
+    label: () => i18next.t('agent-usage:section.label'),
+    description: () => i18next.t('agent-usage:section.description')
+};
+/*
+ * The entry the dialog takes for a section, with the pane the app hands it: the pane of this package
+ * itself, a lazy one, or a wrapper that gives the pane what only the app knows. Built when the dialog
+ * draws, since the words follow the language.
+ */
+export function settingsSection(section, pane) {
+    return {
+        id: section.id,
+        icon: section.icon,
+        label: section.label(),
+        description: section.description(),
+        pane,
+        split: section.split
+    };
+}

package/dist/state/chats.d.ts

@@ -0,0 +1,44 @@
+import type { ChatApprovalItem, ChatBookmark, ChatEvent, ChatHistoryResult, ChatInfo, ChatItem, ChatQuestionItem } from '@adecore/agent-contracts';
+export interface ChatState {
+    info: ChatInfo;
+    items: Record<string, ChatItem>;
+    structure: Record<string, ChatItem>;
+    order: string[];
+    history?: ChatHistoryPage;
+    waitingBefore?: string[];
+    bookmarks?: ChatBookmark[];
+}
+export type ChatHistoryPage = ChatHistoryResult['history'];
+export interface ChatPage {
+    history: ChatHistoryPage;
+    pending: ChatItem[];
+}
+export type ChatsById = Record<string, ChatState>;
+export type ChatStatuses = Record<string, Pick<ChatState, 'info'>>;
+export interface ChatSink {
+    reset(chatId: string, info: ChatInfo, items: ChatItem[], page?: ChatPage): void;
+    prepend(chatId: string, cursor: string, page: ChatHistoryResult): void;
+    apply(chatId: string, event: ChatEvent): void;
+    status(chatId: string, info: ChatInfo): void;
+    bookmarks(chatId: string, bookmarks: ChatBookmark[]): void;
+    forget(chatId: string): void;
+}
+interface ChatsStore {
+    byKey: ChatsById;
+    statusByKey: ChatStatuses;
+    reset(key: string, info: ChatInfo, items: ChatItem[], page?: ChatPage): void;
+    prepend(key: string, cursor: string, page: ChatHistoryResult): void;
+    apply(key: string, event: ChatEvent): void;
+    status(key: string, info: ChatInfo): void;
+    bookmarks(key: string, bookmarks: ChatBookmark[]): void;
+    forget(key: string): void;
+    forgetWhere(matches: (key: string) => boolean): void;
+}
+export declare function prependPage(state: ChatState, cursor: string, page: ChatHistoryResult): ChatState;
+export declare function waitingRequestsOf(chat: Pick<ChatState, 'structure' | 'order' | 'waitingBefore'> | undefined): Array<ChatApprovalItem | ChatQuestionItem>;
+export declare function applyEvent(state: ChatState, event: ChatEvent): ChatState;
+export declare const useChats: import("zustand").UseBoundStore<import("zustand").StoreApi<ChatsStore>>;
+export declare function chatSink(keyOf: (chatId: string) => string): ChatSink;
+export declare function useChatRow<T>(chatId: string, select: (row: ChatState | undefined) => T): T;
+export declare function useCurrentItem<T extends ChatItem>(chatId: string, derived: T): T;
+export {};

package/dist/state/chats.js

@@ -0,0 +1,199 @@
+import { create } from 'zustand';
+import { useChatScope } from '../scope.js';
+function isWaiting(item) {
+    return (item?.kind === 'approval' && item.decision === 'pending') || (item?.kind === 'question' && item.state === 'pending');
+}
+function stateOf(info, items, page) {
+    const byId = Object.fromEntries(items.map((item) => [item.id, item]));
+    const order = items.map((item) => item.id);
+    if (page === undefined || page.history.cursor === null) {
+        return { info, items: byId, structure: byId, order };
+    }
+    const before = page.pending.filter((item) => !(item.id in byId));
+    for (const item of before) {
+        byId[item.id] = item;
+    }
+    return { info, items: byId, structure: byId, order, history: page.history, waitingBefore: before.map((item) => item.id) };
+}
+/* An older host names no place in the thread, and it always hands over the whole of it. */
+function isBeforePage(state, historyIndex) {
+    return state.history !== undefined && historyIndex !== undefined && historyIndex < state.history.start;
+}
+/* An item from before the page this client holds matters only as a request that waits, or one that stopped waiting. */
+function withEarlierItem(state, item) {
+    const waiting = state.waitingBefore ?? [];
+    const held = waiting.includes(item.id);
+    if (isWaiting(item)) {
+        return { ...withItem(state, item), waitingBefore: held ? waiting : [...waiting, item.id] };
+    }
+    return held ? { ...withItem(state, item), waitingBefore: waiting.filter((id) => id !== item.id) } : state;
+}
+/* The page before the one a chat holds, unless the thread was read again since that page was asked for. */
+export function prependPage(state, cursor, page) {
+    if (state.history?.cursor !== cursor) {
+        return state;
+    }
+    const held = new Set(state.order);
+    const older = page.items.filter((item) => !held.has(item.id));
+    const olderIds = new Set(older.map((item) => item.id));
+    const items = { ...state.items };
+    for (const item of older) {
+        items[item.id] = item;
+    }
+    const order = [...olderIds, ...state.order];
+    if (page.history.cursor === null) {
+        const { history: _history, waitingBefore: _waitingBefore, ...rest } = state;
+        return { ...rest, items, structure: items, order };
+    }
+    const waitingBefore = (state.waitingBefore ?? []).filter((id) => !olderIds.has(id));
+    return { ...state, items, structure: items, order, history: page.history, waitingBefore };
+}
+/* The requests that still wait, oldest first: those from before the page this client holds, then the thread's own. */
+export function waitingRequestsOf(chat) {
+    return [...(chat?.waitingBefore ?? []), ...(chat?.order ?? [])].map((id) => chat?.structure[id]).filter(isWaiting);
+}
+/* The state with one item replaced, in the thread and in the structure the rows come from. */
+function withItem(state, item) {
+    const items = { ...state.items, [item.id]: item };
+    return { ...state, items, structure: items };
+}
+/* Cheap enough, since a status only arrives when the host saw one change, never on a streamed word. */
+function sameInfo(left, right) {
+    return JSON.stringify(left) === JSON.stringify(right);
+}
+/* The statuses with this chat's info in them, the same object when that info is already there. */
+function withStatus(statuses, key, info) {
+    return statuses[key]?.info === info ? statuses : { ...statuses, [key]: { info } };
+}
+function without(rows, matches) {
+    return Object.fromEntries(Object.entries(rows).filter(([key]) => !matches(key)));
+}
+export function applyEvent(state, event) {
+    switch (event.type) {
+        case 'item': {
+            if (isBeforePage(state, event.historyIndex)) {
+                return withEarlierItem(state, event.item);
+            }
+            const known = event.item.id in state.items;
+            return { ...withItem(state, event.item), order: known ? state.order : [...state.order, event.item.id] };
+        }
+        case 'delta': {
+            const item = state.items[event.itemId];
+            if (item?.kind === 'assistant' || item?.kind === 'thinking') {
+                const grown = { ...item, text: item.text + event.text };
+                // The first text is structure after all, since an empty reply that is not streaming has no row.
+                if (item.text === '') {
+                    return withItem(state, grown);
+                }
+                return { ...state, items: { ...state.items, [event.itemId]: grown } };
+            }
+            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 } };
+                return { ...state, items: { ...state.items, [event.itemId]: grown } };
+            }
+            return state;
+        }
+        case 'info':
+            return { ...state, info: event.info };
+        case 'reset':
+            return stateOf(event.info, event.items);
+    }
+}
+export const useChats = create((set) => ({
+    byKey: {},
+    statusByKey: {},
+    reset(key, info, items, page) {
+        set((s) => {
+            // The bookmarks are not part of the thread; they come in on their own and outlive a reset of it.
+            const bookmarks = s.byKey[key]?.bookmarks;
+            const next = stateOf(info, items, page);
+            return {
+                byKey: { ...s.byKey, [key]: bookmarks === undefined ? next : { ...next, bookmarks } },
+                statusByKey: withStatus(s.statusByKey, key, info)
+            };
+        });
+    },
+    prepend(key, cursor, page) {
+        set((s) => {
+            const current = s.byKey[key];
+            if (!current) {
+                return {};
+            }
+            const next = prependPage(current, cursor, page);
+            return next === current ? {} : { byKey: { ...s.byKey, [key]: next } };
+        });
+    },
+    apply(key, event) {
+        set((s) => {
+            const current = s.byKey[key];
+            if (!current) {
+                return {};
+            }
+            const next = applyEvent(current, event);
+            return { byKey: { ...s.byKey, [key]: next }, statusByKey: withStatus(s.statusByKey, key, next.info) };
+        });
+    },
+    /*
+     * The status of a chat this window is not reading, which the host sends for every chat it has
+     * loaded. The thread stays empty until somebody attaches, since this is what a header, a list and
+     * the counters need, and they ask the info and never the items.
+     */
+    status(key, info) {
+        set((s) => {
+            const current = s.byKey[key];
+            if (!current) {
+                return { byKey: { ...s.byKey, [key]: stateOf(info, []) }, statusByKey: withStatus(s.statusByKey, key, info) };
+            }
+            // An attached client already had this on `chat.event`; writing it again would redraw the thread.
+            if (sameInfo(current.info, info)) {
+                return {};
+            }
+            return { byKey: { ...s.byKey, [key]: { ...current, info } }, statusByKey: withStatus(s.statusByKey, key, info) };
+        });
+    },
+    bookmarks(key, bookmarks) {
+        set((s) => {
+            const current = s.byKey[key];
+            if (!current) {
+                return {};
+            }
+            return { byKey: { ...s.byKey, [key]: { ...current, bookmarks } } };
+        });
+    },
+    forget(key) {
+        set((s) => {
+            const next = { ...s.byKey };
+            delete next[key];
+            const statuses = { ...s.statusByKey };
+            delete statuses[key];
+            return { byKey: next, statusByKey: statuses };
+        });
+    },
+    forgetWhere(matches) {
+        set((s) => ({ byKey: without(s.byKey, matches), statusByKey: without(s.statusByKey, matches) }));
+    }
+}));
+/* The sink of one host's chat client: it hands over chat ids, this puts them under the keys of its scope. */
+export function chatSink(keyOf) {
+    return {
+        reset: (chatId, info, items, page) => useChats.getState().reset(keyOf(chatId), info, items, page),
+        prepend: (chatId, cursor, page) => useChats.getState().prepend(keyOf(chatId), cursor, page),
+        apply: (chatId, event) => useChats.getState().apply(keyOf(chatId), event),
+        status: (chatId, info) => useChats.getState().status(keyOf(chatId), info),
+        bookmarks: (chatId, bookmarks) => useChats.getState().bookmarks(keyOf(chatId), bookmarks),
+        forget: (chatId) => useChats.getState().forget(keyOf(chatId))
+    };
+}
+/* One chat's thread in the scope this is rendered in. The selector keeps a render tied to the field it reads. */
+export function useChatRow(chatId, select) {
+    const { keyOf } = useChatScope();
+    return useChats((s) => select(s.byKey[keyOf(chatId)]));
+}
+/* The item as the thread holds it now, for a row derived from the structure, which a delta leaves alone. */
+export function useCurrentItem(chatId, derived) {
+    return useChatRow(chatId, (row) => {
+        const item = row?.items[derived.id];
+        return item?.kind === derived.kind ? item : derived;
+    });
+}

package/dist/state/provider-accounts.d.ts

@@ -0,0 +1,17 @@
+import type { ProviderAccounts } from '@adecore/agent-contracts';
+import type { ChatTransport } from '../transport.js';
+export interface ProviderAccountsRow {
+    accounts: ProviderAccounts | null;
+    loaded: boolean;
+}
+interface ProviderAccountsStore {
+    byScope: Record<string, ProviderAccountsRow>;
+    set(scopeId: string, accounts: ProviderAccounts | null): void;
+    forget(scopeId: string): void;
+}
+export declare const useProviderAccountsStore: import("zustand").UseBoundStore<import("zustand").StoreApi<ProviderAccountsStore>>;
+export declare function useProviderAccounts<T>(select: (row: ProviderAccountsRow) => T): T;
+export declare function providerAccountsOf(scopeId: string): ProviderAccountsRow;
+export declare function knownAccounts(row: ProviderAccountsRow): ProviderAccounts | null | undefined;
+export declare function watchProviderAccounts(scopeId: string, transport: ChatTransport): () => void;
+export {};

package/dist/state/provider-accounts.js

@@ -0,0 +1,67 @@
+import { create } from 'zustand';
+import { useChatScope } from '../scope.js';
+/* One object for a host that has not answered yet, so a selector gets a stable snapshot. */
+const NONE = { accounts: null, loaded: false };
+/* The accounts of every agent CLI on each host, and what each CLI last said about who is signed in there. */
+export const useProviderAccountsStore = create((set, get) => ({
+    byScope: {},
+    set(scopeId, accounts) {
+        set({ byScope: { ...get().byScope, [scopeId]: { accounts, loaded: true } } });
+    },
+    forget(scopeId) {
+        const { [scopeId]: _gone, ...rest } = get().byScope;
+        set({ byScope: rest });
+    }
+}));
+/* The accounts of the host in scope, like `useProviders`. */
+export function useProviderAccounts(select) {
+    const { id } = useChatScope();
+    return useProviderAccountsStore((s) => select(s.byScope[id] ?? NONE));
+}
+export function providerAccountsOf(scopeId) {
+    return useProviderAccountsStore.getState().byScope[scopeId] ?? NONE;
+}
+/* The accounts as `accountFor` takes them: undefined until the host answered, null for one that keeps none. */
+export function knownAccounts(row) {
+    return row.loaded ? row.accounts : undefined;
+}
+/*
+ * Keeps one host's accounts in the store: the whole list on every fresh link, then every change the
+ * host announces. Answers the function that stops it.
+ */
+export function watchProviderAccounts(scopeId, transport) {
+    const store = useProviderAccountsStore.getState();
+    // A list asked for before a change arrived is older than that change, so it is dropped.
+    let changes = 0;
+    const load = () => {
+        const asked = changes;
+        transport
+            .request('accounts.list', {})
+            .then((accounts) => {
+            if (changes === asked) {
+                store.set(scopeId, accounts);
+            }
+        })
+            .catch(() => {
+            // A host from before accounts never answers; it has only each CLI's own login.
+            if (changes === asked && !providerAccountsOf(scopeId).loaded) {
+                store.set(scopeId, null);
+            }
+        });
+    };
+    const off = [
+        transport.on('accounts.changed', (accounts) => {
+            changes += 1;
+            store.set(scopeId, accounts);
+        }),
+        transport.subscribeStatus((status) => {
+            if (status === 'open') {
+                load();
+            }
+        })
+    ];
+    if (transport.status === 'open') {
+        load();
+    }
+    return () => off.forEach((stop) => stop());
+}

package/dist/state/providers.d.ts

@@ -0,0 +1,17 @@
+import type { ProviderInfo } from '@adecore/agent-contracts';
+export interface ProvidersRow {
+    providers: ProviderInfo[];
+    loaded: boolean;
+}
+interface ProvidersStore {
+    byScope: Record<string, ProvidersRow>;
+    setProviders(scopeId: string, providers: ProviderInfo[]): void;
+    forget(scopeId: string): void;
+}
+export declare const useProvidersStore: import("zustand").UseBoundStore<import("zustand").StoreApi<ProvidersStore>>;
+export declare function useProviders<T>(select: (row: ProvidersRow) => T): T;
+export declare function providersOf(scopeId: string): ProvidersRow;
+export declare function providerSinkFor(scopeId: string): {
+    setProviders(providers: ProviderInfo[]): void;
+};
+export {};

package/dist/state/providers.js

@@ -0,0 +1,33 @@
+import { create } from 'zustand';
+import { useChatScope } from '../scope.js';
+/* One object for a host that has not answered yet, so a selector gets a stable snapshot. */
+const NONE = { providers: [], loaded: false };
+/* Which agent CLIs each host reports, and their models; filled once per connection. */
+export const useProvidersStore = create((set, get) => ({
+    byScope: {},
+    setProviders(scopeId, providers) {
+        set({ byScope: { ...get().byScope, [scopeId]: { providers, loaded: true } } });
+    },
+    forget(scopeId) {
+        const { [scopeId]: _gone, ...rest } = get().byScope;
+        set({ byScope: rest });
+    }
+}));
+/*
+ * The CLIs of the host in scope. An agent menu has to offer what the host the chat will run on has
+ * installed, never what another host answered.
+ */
+export function useProviders(select) {
+    const { id } = useChatScope();
+    return useProvidersStore((s) => select(s.byScope[id] ?? NONE));
+}
+/* The same answer outside a render. */
+export function providersOf(scopeId) {
+    return useProvidersStore.getState().byScope[scopeId] ?? NONE;
+}
+/* What one host's chat client fills in; it knows its own host and nothing of the others. */
+export function providerSinkFor(scopeId) {
+    return {
+        setProviders: (providers) => useProvidersStore.getState().setProviders(scopeId, providers)
+    };
+}

package/dist/state/usage.d.ts

@@ -0,0 +1,44 @@
+import type { UsageLimitsSnapshot, UsageSummaryPayload, UsageSummaryResult } from '@adecore/agent-contracts';
+import type { UsageCurrency } from '../usage/format.js';
+export type UsagePeriod = 'today' | '7d' | '30d' | '90d';
+export type UsageMetric = 'cost' | 'tokens';
+export declare const USAGE_PERIODS: readonly {
+    id: UsagePeriod;
+    days: number;
+}[];
+export declare let USAGE_PREFERENCES_KEY: string;
+export declare function usagePreferencesKey(): string;
+interface Preferences {
+    period: UsagePeriod;
+    metric: UsageMetric;
+    currency: UsageCurrency;
+}
+export declare function dayOf(date: Date): string;
+export declare function windowFor(period: UsagePeriod, now?: Date): UsageSummaryPayload;
+export declare function summaryPayload(period: UsagePeriod, account: string | null, now?: Date): UsageSummaryPayload;
+export declare function askedKey(payload: UsageSummaryPayload): string;
+interface UsageRow {
+    asked: string | null;
+    summary: UsageSummaryResult | null;
+    loading: boolean;
+    failed: boolean;
+    limits: UsageLimitsSnapshot | null;
+}
+interface UsageStore extends Preferences {
+    byScope: Record<string, UsageRow>;
+    chosen: string | null;
+    choose(scopeId: string | null): void;
+    setPeriod(period: UsagePeriod): void;
+    setMetric(metric: UsageMetric): void;
+    setCurrency(currency: UsageCurrency): void;
+    setLoading(scopeId: string, loading: boolean): void;
+    receive(scopeId: string, asked: string, summary: UsageSummaryResult): void;
+    fail(scopeId: string): void;
+    setLimits(scopeId: string, limits: UsageLimitsSnapshot): void;
+    forget(scopeId: string): void;
+}
+export declare function reloadUsagePreferences(): void;
+export declare const useUsageStore: import("zustand").UseBoundStore<import("zustand").StoreApi<UsageStore>>;
+export type UsageView = Preferences & UsageRow;
+export declare function useUsage<T>(select: (view: UsageView) => T): T;
+export {};