@adecore/agents-react 0.24.1 → 0.25.0

package/src/chat/ui/rows/WorkRows.tsx

@@ -1,4 +1,4 @@
-import { Fragment, Suspense, useEffect, useState, type Dispatch, type ReactNode, type SetStateAction } from 'react';
+import { Fragment, useEffect, useState, type Dispatch, type ReactNode, type SetStateAction } from 'react';
 import clsx from 'clsx';
 import i18next from 'i18next';
 import { useTranslation } from 'react-i18next';
@@ -28,7 +28,7 @@ import { useChatScope } from '../../../scope';
 import { useCurrentItem } from '../../../state/chats';
 import { useTimelineFlash } from '../../timeline-flash';
 import { formatClockDuration, formatElapsedShort } from '@adecore/ui/format';
-import { Icon, MiddleTruncate, Spinner, useTickingText } from '@adecore/ui';
+import { Icon, LazyBoundary, MiddleTruncate, Spinner, useTickingText } from '@adecore/ui';
 import { ROW_GUTTER, toolIcon } from '../icons';
 import { AnsiOutput } from '../AnsiOutput';
 import { RowTime } from '../RowTime';
@@ -122,7 +122,7 @@ export function ToggleLine({
 /* The diff renderers load lazily, so a diff waits on them under a line that says so. */
 function DiffSuspense({ children }: { children: ReactNode }) {
     const { t } = useTranslation('agent-chat');
-    return <Suspense fallback={<div className="px-3 py-2 text-xs text-text-faint">{t('work.loadingDiff')}</div>}>{children}</Suspense>;
+    return <LazyBoundary fallback={<div className="px-3 py-2 text-xs text-text-faint">{t('work.loadingDiff')}</div>}>{children}</LazyBoundary>;
 }
 
 /* A file in a changed files card, which opens its diff under it. */

package/src/host.ts

@@ -195,6 +195,30 @@ export interface ReplyAuthor {
     mark?: ReactNode;
 }
 
+/*
+ * Where the tiles of a Map come from. The host owns the service and whatever admits a request to it, so
+ * a chat never knows an address, a key or a vendor: it asks for the style of the theme and lets the host
+ * rewrite every address the map requests. `off` says why there are no tiles, and the map then draws its
+ * built-in outline beside the list of places.
+ */
+export type UiMapSource =
+    | {
+          state: 'tiles';
+          /* The style document of one theme. */
+          styleUrl(theme: 'light' | 'dark'): string;
+          /*
+           * Called for every address the map requests, such as to add a ticket or a header to those of the host's
+           * service. Rewrite only the addresses of your own origin and hand every other back as it came: the style
+           * and the tiles name other hosts too, and a ticket must not travel to them.
+           */
+          transformRequest?(url: string): { url: string; headers?: Record<string, string> };
+          /* The feature property that holds a label in `language` (such as `nl`); without it a label stays as the style writes it. */
+          labelField?(language: string): string;
+          /* The credit the tiles ask for, drawn under the map. */
+          attribution?: string;
+      }
+    | { state: 'off'; reason: 'disabled' | 'signed-out' | 'unavailable' };
+
 /*
  * What the app around the chat decides and the chat cannot, handed to the views by a `ChatHostProvider`.
  * Whatever an app leaves out keeps the default here, which is the chat without that part. One host may
@@ -209,6 +233,10 @@ export interface ChatHost {
         query?(scopeId: string, payload: ChatUiQueryPayload): Promise<ChatUiQueryReading>;
         sendChoice(scopeId: string, payload: ChatUiChoicePayload): Promise<'sent' | 'queued'>;
     };
+    /* The map tiles of a Map block; left out, a map draws its outline and its list of places only. */
+    maps?: {
+        useSource(scopeId: string): UiMapSource;
+    };
     /* The colors an account may wear in the order a picker offers them, the few it shows first, and their names. */
     accents: {
         all: readonly AccentChoice[];

package/src/index.ts

@@ -14,6 +14,7 @@ export {
     type VisualHost,
     type ReplyAuthor,
     type ChatHost,
+    type UiMapSource,
     ChatHostProvider,
     useChatHost,
     type AccentChoice,
@@ -32,18 +33,7 @@ export {
     isConnectionError
 } from './transport';
 export { portTransport, type PortTransport } from './port-transport';
-export {
-    onChatStorageConfiguration,
-    configureChatStorage,
-    chatStorageKey,
-    chatStorageLegacyKeys,
-    chatStorageAdapter,
-    hydrateChatStorage,
-    createChatStore,
-    type ChatStorageRecord,
-    type ChatStorageAdapter,
-    type ChatStorageOptions
-} from './storage';
+export { configureChatStorage, type ChatStorageRecord, type ChatStorageAdapter, type ChatStorageOptions } from './storage';
 export { setLazyPrefetch, onLazyOpenError } from './lazy';
 export { type MountedEntry, MountedRegistry } from './mounted-registry';
 export { type AgentsSettingsSection, PROVIDERS_SECTION, USAGE_SECTION, settingsSection } from './settings/sections';

package/src/lazy.tsx

@@ -1,4 +1,5 @@
 import { lazy, type ComponentProps, type ComponentType } from 'react';
+import { LoadedComponent } from '@adecore/ui';
 
 type Loader = () => Promise<unknown>;
 
@@ -38,12 +39,9 @@ export function lazyNamed<Module extends Record<Name, ComponentType<any>>, Name
     name: Name,
     options?: { readonly prefetch?: boolean }
 ): ComponentType<ComponentProps<Module[Name]>> {
-    let loaded: ComponentType<any> | null = null;
-    const open = async (): Promise<ComponentType<any>> => {
-        const component = (await load())[name];
-        loaded ??= component;
-        return component;
-    };
+    // Through `LoadedComponent`, so a `LazyBoundary` around it draws the moment the module lands.
+    const loaded = new LoadedComponent<ComponentType<any>>(async () => (await load())[name]);
+    const open = (): Promise<ComponentType<any>> => loaded.load();
     if (options?.prefetch !== false) {
         loaders.push(open);
         register?.(open);
@@ -60,7 +58,7 @@ export function lazyNamed<Module extends Record<Name, ComponentType<any>>, Name
         }
     });
     const LazyNamed = (props: ComponentProps<Module[Name]>) => {
-        const Component: ComponentType<any> = loaded ?? Lazy;
+        const Component: ComponentType<any> = loaded.current ?? Lazy;
         return <Component {...props} />;
     };
     return LazyNamed;

package/src/locales/en/agent-chat.ts

@@ -301,6 +301,8 @@ export default {
         },
         notice: {
             clearFailed: 'The thread could not be cleared',
+            stashChatsDropped_one: '1 attached chat is not in this project and was left out',
+            stashChatsDropped_other: '{{count}} attached chats are not in this project and were left out',
             compactFailed: 'The context could not be compacted',
             noAttachments: '{{agent}} takes no attachments',
             thisAgent: 'This agent',
@@ -344,6 +346,8 @@ export default {
         tooLong: 'characters, too long to send',
         stop: 'Stop, Shift-click to also stop its sub-agents',
         queueButton: 'Queue',
+        continue: 'Continue',
+        continueHint: 'Continue where the stopped turn left off',
         send: 'Send',
         clear: {
             title: 'Clear the thread?',
@@ -437,7 +441,9 @@ export default {
             title: 'Stashed prompts',
             noText: 'No text',
             files_one: '{{count}} file, not kept',
-            files_other: '{{count}} files, not kept'
+            files_other: '{{count}} files, not kept',
+            chats_one: '{{count}} chat attached',
+            chats_other: '{{count}} chats attached'
         },
         mode: {
             label: 'Permissions',
@@ -549,6 +555,15 @@ export default {
             failed: 'Failed',
             skipped: 'Skipped'
         },
+        event: {
+            tone: {
+                neutral: 'Neutral',
+                info: 'Info',
+                success: 'Success',
+                warning: 'Warning',
+                danger: 'Danger'
+            }
+        },
         stat: {
             change: '{{change}} from {{previous}}',
             from: 'from {{previous}}'
@@ -568,6 +583,35 @@ export default {
             showValues: 'Show all values',
             hideValues: 'Hide values'
         },
+        gallery: {
+            label_one: '{{count}} image',
+            label_other: '{{count}} images'
+        },
+        map: {
+            label_one: 'Map of {{count}} place',
+            label_other: 'Map of {{count}} places',
+            omitted_one: '{{count}} more place is not shown',
+            omitted_other: '{{count}} more places are not shown',
+            show: 'Show map',
+            waiting: 'The map waits for a free spot: only a few maps are drawn at once.',
+            contextLost: 'The map lost its graphics. The places stay listed.',
+            lookingUp: 'Looking up',
+            notFound: 'Not on the map',
+            zoomIn: 'Zoom in',
+            zoomOut: 'Zoom out',
+            scrollHint: 'Hold ⌘ or Ctrl and scroll to zoom',
+            touchHint: 'Use two fingers to move the map',
+            offline: 'Map tiles are not available offline. The places stay listed.',
+            disabled: 'Map tiles are off.',
+            signedOut: 'Sign in to show map tiles.',
+            unavailable: 'Map tiles are not available right now.'
+        },
+        compare: {
+            label: 'Compare {{before}} and {{after}}',
+            before: 'Before',
+            after: 'After',
+            missing: 'One image is not available'
+        },
         image: {
             label: 'Image',
             unavailable: 'The image is not available'
@@ -575,6 +619,9 @@ export default {
         sources: 'Sources',
         citation: 'Source {{number}}: {{title}}',
         outsideProject: 'Outside the project, shown as text',
+        textField: {
+            count: '{{used}} of {{max}} characters'
+        },
         options: 'Options',
         choices: 'Choices',
         checklist: 'Checklist',

package/src/locales/nl/agent-chat.ts

@@ -301,6 +301,8 @@ export default {
         },
         notice: {
             clearFailed: 'De thread kon niet worden gewist',
+            stashChatsDropped_one: '1 bijgevoegde chat hoort niet bij dit project en is weggelaten',
+            stashChatsDropped_other: '{{count}} bijgevoegde chats horen niet bij dit project en zijn weggelaten',
             compactFailed: 'De context kon niet worden gecomprimeerd',
             noAttachments: '{{agent}} neemt geen bijlagen aan',
             thisAgent: 'Deze agent',
@@ -344,6 +346,8 @@ export default {
         tooLong: 'tekens, te lang om te versturen',
         stop: 'Stoppen, Shift-klik stopt ook de sub-agents',
         queueButton: 'In de wachtrij zetten',
+        continue: 'Doorgaan',
+        continueHint: 'Ga verder waar de gestopte beurt ophield',
         send: 'Versturen',
         clear: {
             title: 'Thread wissen?',
@@ -437,7 +441,9 @@ export default {
             title: 'Stashed prompts',
             noText: 'Geen tekst',
             files_one: '{{count}} bestand, niet bewaard',
-            files_other: '{{count}} bestanden, niet bewaard'
+            files_other: '{{count}} bestanden, niet bewaard',
+            chats_one: '{{count}} chat bijgevoegd',
+            chats_other: '{{count}} chats bijgevoegd'
         },
         mode: {
             label: 'Rechten',
@@ -549,6 +555,15 @@ export default {
             failed: 'Mislukt',
             skipped: 'Overgeslagen'
         },
+        event: {
+            tone: {
+                neutral: 'Neutraal',
+                info: 'Info',
+                success: 'Gelukt',
+                warning: 'Waarschuwing',
+                danger: 'Gevaar'
+            }
+        },
         stat: {
             change: '{{change}} vanaf {{previous}}',
             from: 'vanaf {{previous}}'
@@ -568,6 +583,35 @@ export default {
             showValues: 'Alle waarden tonen',
             hideValues: 'Waarden verbergen'
         },
+        gallery: {
+            label_one: '{{count}} afbeelding',
+            label_other: '{{count}} afbeeldingen'
+        },
+        map: {
+            label_one: 'Kaart met {{count}} plek',
+            label_other: 'Kaart met {{count}} plekken',
+            omitted_one: '{{count}} plek meer wordt niet getoond',
+            omitted_other: '{{count}} plekken meer worden niet getoond',
+            show: 'Kaart tonen',
+            waiting: 'De kaart wacht op een vrije plek: er worden maar een paar kaarten tegelijk getekend.',
+            contextLost: 'De kaart is zijn beeldgeheugen kwijt. De plekken blijven in de lijst.',
+            lookingUp: 'Wordt opgezocht',
+            notFound: 'Niet op de kaart',
+            zoomIn: 'Inzoomen',
+            zoomOut: 'Uitzoomen',
+            scrollHint: 'Houd ⌘ of Ctrl ingedrukt en scrol om te zoomen',
+            touchHint: 'Gebruik twee vingers om de kaart te bewegen',
+            offline: 'Kaarttegels zijn offline niet beschikbaar. De plekken blijven in de lijst.',
+            disabled: 'Kaarttegels staan uit.',
+            signedOut: 'Log in om kaarttegels te tonen.',
+            unavailable: 'Kaarttegels zijn nu niet beschikbaar.'
+        },
+        compare: {
+            label: 'Vergelijk {{before}} en {{after}}',
+            before: 'Voor',
+            after: 'Na',
+            missing: 'Eén afbeelding is niet beschikbaar'
+        },
         image: {
             label: 'Afbeelding',
             unavailable: 'De afbeelding is niet beschikbaar'
@@ -575,6 +619,9 @@ export default {
         sources: 'Bronnen',
         citation: 'Bron {{number}}: {{title}}',
         outsideProject: 'Buiten het project, als tekst getoond',
+        textField: {
+            count: '{{used}} van {{max}} tekens'
+        },
         options: 'Opties',
         choices: 'Keuzes',
         checklist: 'Checklijst',

package/src/prompts/index.ts

@@ -1,20 +1,7 @@
 // Public API: exports.test.ts snapshots this list, so a name added or dropped here is an API change.
-export { focusPromptStart, focusPromptHeading } from './logic/focus';
+export { focusPromptStart } from './logic/focus';
 export { PROMPT_SHORTCUTS, pageKey, type PromptKeyEvent } from './logic/keys';
-export {
-    type PendingPrompt,
-    type PromptAction,
-    emptyPromptDraft,
-    answerValue,
-    questionAnswer,
-    pickPromptChoice,
-    isBlockingPrompt,
-    orderPrompts,
-    nextPrompt,
-    promptAnswers,
-    type PromptAnswer,
-    type PromptDraft
-} from './logic/prompts';
+export { type PendingPrompt, type PromptAction, emptyPromptDraft, orderPrompts, type PromptAnswer, type PromptDraft } from './logic/prompts';
 export {
     type HostPrompt,
     type PromptSubject,
@@ -28,8 +15,6 @@ export {
 } from './logic/subjects';
 export { useFocusAfterAnswer, type FocusAfterAnswer } from './logic/useFocusAfterAnswer';
 export { usePromptSession, type PromptSession } from './logic/usePromptSession';
-export { CommandBox, ApprovalBody } from './ui/ApprovalBody';
-export { PromptPrimary, ApprovalActions, QuestionActions, type ApprovalButton } from './ui/PromptActions';
+export { PromptPrimary, ApprovalActions, type ApprovalButton } from './ui/PromptActions';
 export { PROMPT_SURFACE, PromptCard, type PromptCardKind } from './ui/PromptCard';
 export { PromptView } from './ui/PromptView';
-export { QuestionBody } from './ui/QuestionBody';

package/src/providers/index.ts

@@ -3,15 +3,9 @@ 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 { type AccountEntry, accountsOfKind, 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 { carryOptions } from '../agents/model-options';
+export { type ModelRequirement } from '../agents/model-requirement';
 export { ProvidersPane } from './ProvidersPane';
-export { saveAccounts, saveAccount, removeAccount, createAccount, linkAccount } from './account-actions';
 export { CliMark, CliTile } from './parts';

package/src/state/index.ts

@@ -4,14 +4,11 @@ export {
     type ChatsById,
     type ChatStatuses,
     type ChatSink,
-    prependPage,
     waitingRequestsOf,
     applyEvent,
     useChats,
     chatSink,
     useChatRow,
-    useReportedModels,
-    useCurrentItem,
     type ChatHistoryPage,
     type ChatPage
 } from './chats';
@@ -24,16 +21,4 @@ export {
     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';
+export { type UsageMetric, USAGE_PREFERENCES_KEY, dayOf, windowFor, reloadUsagePreferences, useUsageStore, type UsagePeriod, type UsageView } from './usage';

package/src/state/usage.ts

@@ -23,10 +23,6 @@ onChatStorageConfiguration(() => {
     USAGE_PREFERENCES_KEY = storageKey();
 });
 
-export function usagePreferencesKey(): string {
-    return storageKey();
-}
-
 interface Preferences {
     period: UsagePeriod;
     metric: UsageMetric;

package/src/stylesheets.d.ts

@@ -0,0 +1,2 @@
+// The stylesheet of the map package is imported for its effect only.
+declare module 'maplibre-gl/dist/maplibre-gl.css';

package/src/theme.css

@@ -27,6 +27,9 @@
     --chart-4: #eda100;
     --chart-5: #e87ba4;
     --chart-6: #008300;
+    /* The two grounds of the map a page draws without tiles. */
+    --map-land: #f2f1ed;
+    --map-water: #d3dde5;
 }
 
 [data-theme="dark"] {
@@ -46,6 +49,8 @@
     --chart-4: #c98500;
     --chart-5: #d55181;
     --chart-6: #008300;
+    --map-land: #2c3135;
+    --map-water: #1a2026;
 }
 
 /* Output and diffs take the terminal's colors when the app loads `@adecore/terminal/terminal.css`,
@@ -56,6 +61,9 @@
     --chat-added: var(--term-ansi-green, var(--positive));
     --chat-removed: var(--term-ansi-red, var(--status-error));
     --chart-1: var(--accent);
+    /* The number of a place on a map and in its list: the ink on the ground, so it reads on either. */
+    --map-marker: var(--text);
+    --map-marker-text: var(--surface);
 }
 
 @theme inline {
@@ -73,6 +81,8 @@
     --color-chat-output: var(--chat-output);
     --color-chat-added: var(--chat-added);
     --color-chat-removed: var(--chat-removed);
+    --color-map-marker: var(--map-marker);
+    --color-map-marker-text: var(--map-marker-text);
 }
 
 @layer components {