@adecore/agents-react 0.20.1 → 0.21.1

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

@@ -0,0 +1,244 @@
+import { useEffect, useState } from 'react';
+import type { TFunction } from 'i18next';
+import clsx from 'clsx';
+import { Trans, useTranslation } from 'react-i18next';
+import { Check, Copy, Ellipsis, ExternalLink, FolderDown, ImageIcon, Maximize2 } from 'lucide-react';
+import type { ChatAttachment, ChatToolItem } from '@adecore/agent-contracts';
+import { Button, ButtonGroup, copyText, ErrorBoundary, FileIcon, Icon, IconButton, Menu, Surface } from '@adecore/ui';
+import { chatHost } from '../../../host';
+import { useChatScope } from '../../../scope';
+import { useCurrentItem } from '../../../state/chats';
+import { formatBytes } from '../../attachments';
+import { attachmentAspect, generatedImageView, type GeneratedImageFailure } from '../../logic/generated-image';
+import { toolStartedAt } from '../../logic/tools';
+import { CHIP_IN_MESSAGE, MENTION_TONE } from '../chips';
+import { openFileLink, useFileLinkCwd } from '../file-links';
+import { ImageThumb } from '../ImageView';
+import { ROW_GUTTER } from '../icons';
+import { RunningFor, WorkRow } from './WorkRows';
+
+const SAVED_FLASH_MS = 2000;
+
+// Where each image went, so a row the thread unmounts while scrolling still says so when it comes back.
+const savedPaths = new Map<string, string>();
+
+/* True for `ms` after `start()`, for a check mark that says an action landed. */
+function useFlash(ms: number): [boolean, () => void] {
+    const [on, setOn] = useState(false);
+    useEffect(() => {
+        if (!on) {
+            return;
+        }
+        const timer = setTimeout(() => setOn(false), ms);
+        return () => clearTimeout(timer);
+    }, [on, ms]);
+    return [on, () => setOn(true)];
+}
+
+function failureText(failure: GeneratedImageFailure, t: TFunction<'agent-chat'>): string | undefined {
+    switch (failure.kind) {
+        case 'provider':
+            return failure.message ?? undefined;
+        case 'empty':
+            return t('generatedImage.empty');
+        case 'not-image':
+            return t('generatedImage.notImage');
+        case 'too-large':
+            return t('generatedImage.tooLarge', { size: formatBytes(failure.limit) });
+    }
+}
+
+/* The line over the image, in the measures of a tool line but nothing to fold. */
+function HeadLine({ label, detail, live, startedAt }: { label: string; detail?: string; live?: boolean; startedAt?: number }) {
+    return (
+        <div className="-mx-1 mb-0.5 flex h-7 items-center gap-2 px-1 text-xs text-text-muted">
+            <span className={clsx(ROW_GUTTER, live && 'text-accent')}>
+                <Icon icon={ImageIcon} size={12} />
+            </span>
+            <span className={clsx('shrink-0', live && 'chat-live-text')}>{label}</span>
+            {detail && <span className="min-w-0 truncate text-text-faint">{detail}</span>}
+            <span className="grow" />
+            {startedAt !== undefined && <RunningFor startedAt={startedAt} />}
+        </div>
+    );
+}
+
+/* The file a saved image became, which opens where the app opens a file link. */
+function SavedFile({ path }: { path: string }) {
+    const cwd = useFileLinkCwd();
+    const { id } = useChatScope();
+    const chip = (
+        <>
+            <FileIcon path={path} size={14} />
+            <span className="truncate">{path}</span>
+        </>
+    );
+    if (chatHost().fileLinks === null) {
+        return <span className={clsx(CHIP_IN_MESSAGE, MENTION_TONE)}>{chip}</span>;
+    }
+    return (
+        <button
+            type="button"
+            className={clsx(CHIP_IN_MESSAGE, MENTION_TONE, 'hover:brightness-95')}
+            data-file-path={path}
+            onClick={() => openFileLink(cwd, { path, directory: false }, id)}
+        >
+            {chip}
+        </button>
+    );
+}
+
+function ReadyImage({ chatId, attachment, prompt, transparent }: { chatId: string; attachment: ChatAttachment; prompt: string | null; transparent: boolean }) {
+    const { t } = useTranslation('agent-chat');
+    const { id: scopeId } = useChatScope();
+    const { attachments } = chatHost();
+    const source = attachments.useUrl(scopeId, chatId, attachment.id);
+    const savedKey = `${scopeId}\n${chatId}\n${attachment.id}`;
+    const [lightbox, setLightbox] = useState(false);
+    const [saving, setSaving] = useState(false);
+    const [savedPath, setSavedPath] = useState(() => savedPaths.get(savedKey) ?? null);
+    const [savedFlash, flashSaved] = useFlash(SAVED_FLASH_MS);
+    const missing = source.failure !== null;
+    const aspect = attachmentAspect(attachment);
+    const { open, saveToProject } = attachments;
+
+    const detail = [
+        attachment.width !== undefined && attachment.height !== undefined
+            ? t('generatedImage.dimensions', { width: attachment.width, height: attachment.height })
+            : null,
+        formatBytes(attachment.size),
+        transparent ? t('generatedImage.transparent') : null
+    ]
+        .filter((part) => part !== null)
+        .join(' · ');
+
+    const openFile = open === undefined ? undefined : () => open(scopeId, chatId, attachment.id, attachment.name);
+
+    const save =
+        saveToProject === undefined
+            ? undefined
+            : async (): Promise<void> => {
+                  setSaving(true);
+                  try {
+                      const path = await saveToProject(scopeId, chatId, attachment.id, attachment.name);
+                      if (path !== null) {
+                          savedPaths.set(savedKey, path);
+                          setSavedPath(path);
+                          flashSaved();
+                      }
+                  } catch {
+                      // The host's dialog shows why; the row stays as it was.
+                  } finally {
+                      setSaving(false);
+                  }
+              };
+
+    const lightboxActions = (
+        <>
+            {openFile !== undefined && <IconButton icon={ExternalLink} size="sm" label={t('generatedImage.open')} onClick={openFile} />}
+            {save !== undefined && <IconButton icon={FolderDown} size="sm" label={t('generatedImage.save')} disabled={saving} onClick={() => void save()} />}
+        </>
+    );
+
+    return (
+        <div>
+            <HeadLine label={t('generatedImage.label')} detail={detail} />
+            <div className="flex max-w-90 flex-col gap-1.5">
+                <div
+                    className={clsx(
+                        'group/image relative',
+                        aspect === undefined && 'w-fit',
+                        transparent && source.url !== null && 'chat-checkerboard rounded-lg'
+                    )}
+                >
+                    <ImageThumb
+                        source={source}
+                        alt={attachment.name}
+                        aspect={aspect}
+                        className={aspect === undefined ? 'max-h-90 max-w-full object-contain' : undefined}
+                        actions={lightboxActions}
+                        open={lightbox}
+                        onOpenChange={setLightbox}
+                    />
+                    {source.url !== null && (
+                        <Surface
+                            role="toolbar"
+                            aria-label={t('generatedImage.actions')}
+                            className="absolute top-2 right-2 rounded-lg p-0.5 opacity-0 transition-opacity group-focus-within/image:opacity-100 group-hover/image:opacity-100 has-[[data-popup-open]]:opacity-100 pointer-coarse:opacity-100"
+                        >
+                            <ButtonGroup>
+                                <IconButton icon={Maximize2} size="sm" label={t('generatedImage.openLarge')} onClick={() => setLightbox(true)} />
+                                {prompt !== null && (
+                                    <Menu.Root>
+                                        <IconButton icon={Ellipsis} size="sm" label={t('generatedImage.more')} render={<Menu.Trigger />} />
+                                        <Menu.Popup align="end">
+                                            <Menu.Item onClick={() => copyText(prompt)}>
+                                                <Icon icon={Copy} size={14} /> {t('generatedImage.copyPrompt')}
+                                            </Menu.Item>
+                                        </Menu.Popup>
+                                    </Menu.Root>
+                                )}
+                            </ButtonGroup>
+                        </Surface>
+                    )}
+                </div>
+                {(openFile !== undefined || save !== undefined) && (
+                    <div className="flex items-center gap-1.5">
+                        {openFile !== undefined && (
+                            <Button size="xs" variant="secondary" disabled={missing} onClick={openFile}>
+                                {t('generatedImage.open')}
+                            </Button>
+                        )}
+                        {save !== undefined && (
+                            <Button size="xs" variant="secondary" disabled={missing || saving || savedFlash} onClick={() => void save()}>
+                                {savedFlash ? (
+                                    <>
+                                        <Icon icon={Check} size={12} /> {t('generatedImage.saved')}
+                                    </>
+                                ) : (
+                                    t('generatedImage.save')
+                                )}
+                            </Button>
+                        )}
+                    </div>
+                )}
+                {savedPath !== null && !savedFlash && (
+                    <div className="flex min-w-0 items-center gap-1.5 text-xs text-text-muted">
+                        <Trans t={t} i18nKey="generatedImage.savedTo" values={{ path: savedPath }} components={{ file: <SavedFile path={savedPath} /> }} />
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}
+
+/*
+ * The row of an image generation. Not a fold like other tool calls: the image is the result a person
+ * came for, so it stays open, opens large in the lightbox and offers what the host lets a person do
+ * with it. A failure is an ordinary failed tool line, with the reason as its detail.
+ */
+export function GeneratedImageRow({ chatId, tool: derived }: { chatId: string; tool: ChatToolItem }) {
+    const { t } = useTranslation('agent-chat');
+    const tool = useCurrentItem(chatId, derived);
+    const view = generatedImageView(tool);
+    switch (view.state) {
+        case 'generating':
+            return <HeadLine label={t('generatedImage.generating')} live startedAt={toolStartedAt(tool)} />;
+        case 'failed':
+            return (
+                <WorkRow
+                    tool={tool}
+                    icon={<Icon icon={ImageIcon} size={12} />}
+                    label={t('generatedImage.failed')}
+                    detail={failureText(view.failure, t) ?? ''}
+                    failed
+                />
+            );
+        case 'ready':
+            return (
+                <ErrorBoundary label={t('generatedImage.renderFailed')} resetKeys={[view.attachment]} compact className="relative rounded-lg">
+                    <ReadyImage chatId={chatId} attachment={view.attachment} prompt={view.prompt} transparent={view.transparent} />
+                </ErrorBoundary>
+            );
+    }
+}

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

@@ -1,8 +1,16 @@
 import { useContext, useMemo, useState, type ReactNode } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
-import { Bot, Brain, Check, ChevronDown, CircleAlert, File, Info, MessageCircleQuestionMark, TriangleAlert, X } from 'lucide-react';
-import type { ChatApprovalItem, ChatAttachment, ChatAssistantItem, ChatQuestionItem, ChatThinkingItem, ChatUserItem } from '@adecore/agent-contracts';
+import { Bot, Brain, Check, ChevronDown, CircleAlert, File, Info, MessageCircleQuestionMark, Reply, TriangleAlert, X } from 'lucide-react';
+import type {
+    ChatApprovalItem,
+    ChatAttachment,
+    ChatAssistantItem,
+    ChatQuestionItem,
+    ChatThinkingItem,
+    ChatUiChoiceOrigin,
+    ChatUserItem
+} from '@adecore/agent-contracts';
 import { fileBadge, formatBytes, isImageAttachment } from '../../attachments';
 import { useChatRow, useCurrentItem } from '../../../state/chats';
 import { chatHost } from '../../../host';
@@ -15,12 +23,13 @@ import { FadingWords } from '../FadingWords';
 import { settledBlocksText } from '../markdown-blocks';
 import { WHOLE_FADE_CLASS } from '../rehype-fade';
 import { useRevealedText } from '../reveal';
-import { formatAgo, formatElapsedShort, formatTokens } from '@adecore/ui/format';
+import { formatAgo, formatElapsedShort, formatMoment, formatTokens } from '@adecore/ui/format';
 import { Icon, Tooltip, useTickingText } from '@adecore/ui';
 import { toolSummary } from '../../logic/tools';
 import { ROW_GUTTER } from '../icons';
 import { useOpenForFind } from '../find-reveal';
-import { ReplyContext } from '../reply-context';
+import { ReplyContext, UiReplyNavigationContext } from '../reply-context';
+import { UiReply } from '../intelligent-ui/UiReply';
 
 // A long prompt folds so the answer stays in view; the reader can open it.
 const USER_FOLD_LINES = 8;
@@ -99,6 +108,7 @@ export function UserRow({ chatId, item }: { chatId: string; item: ChatUserItem }
                     ))}
                 </div>
             )}
+            {item.uiChoice !== undefined && <ChoiceLine chatId={chatId} choice={item.uiChoice} />}
             {item.text !== '' && (
                 <div className="relative max-w-[80%] rounded-2xl bg-surface-active px-3.5 py-2.5 text-sm wrap-anywhere text-text select-text">
                     <div data-find-field="text" className={clsx(long && !open && FOLD)}>
@@ -116,6 +126,34 @@ export function UserRow({ chatId, item }: { chatId: string; item: ChatUserItem }
     );
 }
 
+/*
+ * The choice a message answers. The label stays out of the message, which holds exactly what the agent
+ * read, and out of a copied selection; a screen reader hears it between the heading and the message.
+ */
+function ChoiceLine({ chatId, choice }: { chatId: string; choice: ChatUiChoiceOrigin }) {
+    const { t } = useTranslation('agent-chat');
+    const inherited = useContext(UiReplyNavigationContext);
+    const navigation = inherited?.chatId === chatId ? inherited : null;
+    const Tag = navigation ? 'button' : 'div';
+    return (
+        <Tag
+            type={navigation ? 'button' : undefined}
+            onClick={navigation ? () => navigation.reveal(choice) : undefined}
+            className={clsx(
+                'mb-1 flex max-w-[80%] items-start gap-1.5 px-1 text-left text-xs text-text-muted select-none',
+                navigation && 'rounded-md hover:text-text focus-visible:outline-2 focus-visible:outline-accent'
+            )}
+        >
+            <Icon icon={Reply} size={12} className="mt-1 shrink-0" />
+            <span className="min-w-0 wrap-anywhere">
+                {choice.older
+                    ? t('blocks.choseOlder', { label: choice.label, time: formatMoment(choice.sourceAt) })
+                    : t('blocks.chose', { label: choice.label })}
+            </span>
+        </Tag>
+    );
+}
+
 /*
  * Who wrote a message, for a screen reader only: one heading per message is what lets VoiceOver's
  * rotor walk a thread from message to message. `select-none`, so a selection copied across two
@@ -199,6 +237,24 @@ export function AssistantRow({ chatId, item: derived }: { chatId: string; item:
     const live = mode === 'words' && item.streaming;
     const reveal = useRevealedText(item.text, live);
 
+    if (item.ui?.length && !item.parentToolUseId && !(mode === 'whole' && item.streaming)) {
+        return (
+            <div data-find-item={item.id} className="-mx-1 px-1 pb-2">
+                <ReplyHeading chatId={chatId} />
+                <div data-find-field="text" data-quote-answer className="contents">
+                    <UiReply
+                        text={item.text}
+                        blocks={item.ui}
+                        answers={item.uiAnswers}
+                        queries={item.uiQueries}
+                        reply={reply}
+                        context={{ scopeId: scope.id, chatId, itemId: item.id, phase: item.streaming ? 'streaming' : 'final' }}
+                    />
+                </div>
+            </div>
+        );
+    }
+
     if (mode === 'blocks') {
         const settled = item.streaming ? settledBlocksText(item.text) : item.text;
         return (

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

@@ -4,7 +4,9 @@ import type { ThreadCard } from '../../../host';
 import type { TimelineRow } from '../../logic/timeline';
 import type { SubagentStep } from '../../subagent-view';
 import { AgentTurnRow, ApprovalHistoryRow, AssistantRow, CompactionRow, NoteRow, QuestionHistoryRow, ReportRow, ThinkingRow, UserRow } from './MessageRows';
+import { isImageGeneration } from '../../logic/generated-image';
 import { ForksRow } from './ForksRow';
+import { GeneratedImageRow } from './GeneratedImageRow';
 import { SubagentBranchRow } from './SubagentRow';
 import { VisualRow } from './VisualRow';
 import { WorkflowRow } from './WorkflowRow';
@@ -51,9 +53,9 @@ export function Row({ row, chatId, toggleGroup, toggleTurn, toggleSubagent, open
         case 'thinking':
             return <ThinkingRow chatId={chatId} item={row.item} />;
         case 'work':
-            return <WorkRow tool={row.tool} />;
+            return isImageGeneration(row.tool) ? <GeneratedImageRow chatId={chatId} tool={row.tool} /> : <WorkRow tool={row.tool} />;
         case 'work-live':
-            return <WorkLiveRow chatId={chatId} tool={row.tool} />;
+            return isImageGeneration(row.tool) ? <GeneratedImageRow chatId={chatId} tool={row.tool} /> : <WorkLiveRow chatId={chatId} tool={row.tool} />;
         case 'workflow':
             return <WorkflowRow chatId={chatId} tool={row.tool} workflow={row.workflow} onOpenAgent={openConversation} />;
         case 'work-group':

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

@@ -9,6 +9,8 @@ import { Icon, useNow } from '@adecore/ui';
 import { useOpenForFind } from '../find-reveal';
 import { Markdown } from '../Markdown';
 import { TaskRow } from './TaskRow';
+import { isImageGeneration } from '../../logic/generated-image';
+import { GeneratedImageRow } from './GeneratedImageRow';
 import { RunningFor, ToggleLine, WorkLiveRow, WorkRow } from './WorkRows';
 import { entryTimeOf, statusWordOf, taskIdOf } from '../../subagent-list';
 import { useSubagentSupport } from '../../subagent-support';
@@ -27,6 +29,9 @@ const CHILDREN_MAX_PX = 320;
  */
 function ChildRow({ chatId, item }: { chatId: string; item: ChatItem }) {
     if (item.kind === 'tool') {
+        if (isImageGeneration(item)) {
+            return <GeneratedImageRow chatId={chatId} tool={item} />;
+        }
         return item.state === 'running' ? <WorkLiveRow chatId={chatId} tool={item} /> : <WorkRow tool={item} />;
     }
     if (item.kind === 'assistant') {

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

@@ -114,8 +114,23 @@ function ToolBody({ tool }: { tool: ChatToolItem }) {
 }
 
 /* One settled tool call: a line, and its input and output behind it. An image the call looked at
-   is drawn under the line, because a picture says more about that read than its path does. */
-export function WorkRow({ tool, nested, detail }: { tool: ChatToolItem; nested?: boolean; detail?: string }) {
+   is drawn under the line, because a picture says more about that read than its path does.
+   `icon`, `label` and `failed` let a row that knows the call better name it in its own words. */
+export function WorkRow({
+    tool,
+    nested,
+    detail,
+    icon,
+    label,
+    failed
+}: {
+    tool: ChatToolItem;
+    nested?: boolean;
+    detail?: string;
+    icon?: React.ReactNode;
+    label?: string;
+    failed?: boolean;
+}) {
     const [open, setOpen] = useState(false);
     const image = tool.state === 'done' ? readImagePath(tool.name, tool.input) : null;
     const { ReadImage } = chatHost();
@@ -123,12 +138,12 @@ export function WorkRow({ tool, nested, detail }: { tool: ChatToolItem; nested?:
     return (
         <div data-find-item={tool.id} className={nested ? 'ml-6' : undefined}>
             <ToggleLine
-                icon={toolIcon(tool.name)}
-                label={tool.name}
+                icon={icon ?? toolIcon(tool.name)}
+                label={label ?? tool.name}
                 detail={detail ?? toolSummary(tool.name, tool.input)}
                 open={open}
                 onToggle={() => setOpen((o) => !o)}
-                failed={tool.state === 'error'}
+                failed={failed ?? tool.state === 'error'}
             />
             {image !== null && ReadImage !== null && <ReadImage path={image} />}
             {open && <ToolBody tool={tool} />}

package/src/host.ts

@@ -2,7 +2,18 @@ import type { ComponentProps, ComponentType, ReactNode, RefObject } from 'react'
 import type { Extension } from '@codemirror/state';
 import type { EditorView } from '@codemirror/view';
 import type { ThemeRegistration } from 'shiki';
-import type { AgentKind, ChatCheckpointDiff, ChatConfigurePayload, ChatItem, ChatSubagentItem } from '@adecore/agent-contracts';
+import type {
+    AgentKind,
+    ChatCheckpointDiff,
+    ChatConfigurePayload,
+    ChatItem,
+    ChatSubagentItem,
+    ChatUiChoicePayload,
+    ChatUiQueryPayload,
+    ChatUiQueryReading,
+    ChatUiLinkPayload,
+    ChatUiLinkReading
+} from '@adecore/agent-contracts';
 import { isApplePlatform } from '@adecore/ui';
 import type { TimelineRow } from './chat/logic/timeline';
 import type { FindReveal } from './chat/ui/find-reveal';
@@ -189,6 +200,14 @@ export interface ReplyAuthor {
  */
 export interface ChatHost {
     storage?: ChatStorageOptions;
+    intelligentUi?: {
+        subscribe?(scopeId: string, chatId: string, changed: () => void): () => void;
+        link?(scopeId: string, payload: ChatUiLinkPayload): Promise<ChatUiLinkReading>;
+        openLink?(scopeId: string, reading: ChatUiLinkReading): void;
+        openUrl?(scopeId: string, url: string): void;
+        query?(scopeId: string, payload: ChatUiQueryPayload): Promise<ChatUiQueryReading>;
+        sendChoice(scopeId: string, payload: ChatUiChoicePayload): Promise<'sent' | 'queued'>;
+    };
     /* 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[];
@@ -209,6 +228,13 @@ export interface ChatHost {
     attachments: {
         useUrl(scopeId: string, chatId: string, attachmentId: string): ResourceUrl;
         read(scopeId: string, chatId: string, attachmentId: string): Promise<Blob>;
+        /* Opens the file outside the chat, such as in the system's own app or as a download named `suggestedName`; left out, a generated image offers no Open. */
+        open?(scopeId: string, chatId: string, attachmentId: string, suggestedName: string): void;
+        /*
+         * Saves a copy into the folder the chat works for, through the host's own dialog, which also shows a failure.
+         * Resolves with the path as a file link opens it, or null when the person cancels; left out, a generated image offers no Save.
+         */
+        saveToProject?(scopeId: string, chatId: string, attachmentId: string, suggestedName: string): Promise<string | null>;
     };
     /* The image a tool read, drawn under its row; null draws none. */
     ReadImage: ComponentType<{ path: string }> | null;

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

@@ -435,6 +435,25 @@
     "zoomOut": "Zoom out",
     "reset": "Reset"
   },
+  "generatedImage": {
+    "label": "Generated image",
+    "generating": "Generating image",
+    "failed": "Image generation failed",
+    "empty": "The image came back empty",
+    "notImage": "The result is not an image",
+    "tooLarge": "The image is larger than {{size}}",
+    "dimensions": "{{width}} × {{height}}",
+    "transparent": "transparent",
+    "actions": "Image actions",
+    "more": "More actions",
+    "copyPrompt": "Copy prompt",
+    "open": "Open",
+    "openLarge": "Open large",
+    "save": "Save to project…",
+    "saved": "Saved",
+    "savedTo": "Saved to <file>{{path}}</file>",
+    "renderFailed": "This image failed to render"
+  },
   "account": {
     "pill": "{{provider}} account {{account}}"
   },
@@ -460,5 +479,87 @@
   "code": {
     "actions": "Code actions",
     "copyFailed": "Could not copy the code. Try again."
+  },
+  "blocks": {
+    "label": "Interactive block",
+    "progress": {
+      "label": "Progress",
+      "of": "{{value}} of {{max}}"
+    },
+    "step": {
+      "done": "Done",
+      "running": "Running",
+      "pending": "Waiting",
+      "failed": "Failed",
+      "skipped": "Skipped"
+    },
+    "stat": {
+      "change": "{{change}} from {{previous}}",
+      "from": "from {{previous}}"
+    },
+    "table": {
+      "label": "Table of {{columns}}",
+      "showAll": "Show all {{total}} rows"
+    },
+    "chart": {
+      "values": "Values",
+      "summary": "{{count}} values, highest {{label}} at {{value}}",
+      "summarySeries": "{{count}} categories, highest {{series}} for {{label}} at {{value}}"
+    },
+    "image": {
+      "label": "Image",
+      "unavailable": "The image is not available"
+    },
+    "sources": "Sources",
+    "citation": "Source {{number}}: {{title}}",
+    "outsideProject": "Outside the project, shown as text",
+    "options": "Options",
+    "choices": "Choices",
+    "checklist": "Checklist",
+    "choice": {
+      "waiting": "Available when the reply is done",
+      "reading": "Available once the live data is read",
+      "unavailable": "Not available",
+      "sent": "Sent",
+      "queued": "Queued",
+      "failed": "Could not send. Try again.",
+      "ready": "Choices are ready"
+    },
+    "answered": "Answered with “{{label}}”",
+    "chose": "Chose “{{label}}”",
+    "choseOlder": "Chose “{{label}}” on the reply of {{time}}",
+    "fixes_one": "{{count}} fix",
+    "fixes_other": "{{count}} fixes",
+    "shownAsText": "Shown as text",
+    "unknownComponent": "This version cannot draw {{component}}",
+    "renderFailed": "Could not draw this part",
+    "unreadable": "The block could not be read",
+    "live": {
+      "label": "Live",
+      "read": "read {{time}}",
+      "sources": "Reads {{sources}}",
+      "failed": "Could not read {{source}}",
+      "refused": "Not allowed to read {{source}}",
+      "notRead": "Not read",
+      "reasons": {
+        "access-unavailable": "The access of the chat that wrote this is no longer available.",
+        "block-stale": "This block changed since it was drawn.",
+        "busy": "Too many live blocks are reading right now.",
+        "link-unchecked": "This link has to be checked again.",
+        "link-unsupported": "This is not a link the machine can open.",
+        "links-unsupported": "The machine does not open links from blocks.",
+        "no-unique-match": "The source found no single match for that name.",
+        "outside-project": "This is outside the project the agent wrote this in.",
+        "query-undeclared": "This block does not read that source.",
+        "refresh-limit": "This source reads at most once every ten seconds.",
+        "result-too-large": "What the source returned is too large.",
+        "snapshot-too-large": "The first readings were too large to keep.",
+        "source-unregistered": "The machine does not know this source.",
+        "stale-read": "Read the source again before you choose.",
+        "target-unavailable": "What this points to is no longer available.",
+        "timed-out": "The source took too long to answer.",
+        "unreadable": "The source could not be read."
+      }
+    }
   }
 }