@ruimte/agents-react 0.0.0 → 0.7.0

package/dist/prompts/logic/prompts.fixtures.js

@@ -0,0 +1,73 @@
+const endpoints = {
+    id: 'endpoints',
+    header: 'Shared backoff',
+    question: 'Which endpoints should share the backoff?',
+    multiSelect: false,
+    choices: [
+        { label: 'All three', description: 'Chat, files and terminal' },
+        { label: 'Only chat and files', description: 'Keep terminal retries separate' }
+    ]
+};
+const checks = {
+    id: 'checks',
+    header: 'Validation',
+    question: 'Which checks should run before the change is ready?',
+    multiSelect: true,
+    choices: [
+        { label: 'Type check', description: 'Check all workspaces' },
+        { label: 'Unit tests', description: 'Run the targeted tests' },
+        { label: 'Build', description: 'Verify the production bundle' }
+    ]
+};
+const notes = { id: 'notes', header: 'Instructions', question: 'What else should the agent keep in mind?', multiSelect: false, choices: [] };
+const base = (id) => ({ id: `preview-${id}`, requestId: `preview-${id}`, createdAt: 0, turnId: null });
+const question = (id, questions, async = false) => ({
+    ...base(id),
+    kind: 'question',
+    questions,
+    answers: null,
+    state: 'pending',
+    async
+});
+const approval = (long = false) => ({
+    ...base(long ? 'long' : 'edit'),
+    kind: 'approval',
+    toolUseId: null,
+    toolName: 'Edit',
+    description: 'Replace the reconnect loop with the shared backoff and export it for the three endpoints.',
+    input: {
+        file_path: 'src/transport/pool.ts',
+        old_string: 'const retries = 10;',
+        new_string: 'const retries = 5;\nexport const backoff = createBackoff({ max: retries });' +
+            (long ? '\n' + Array.from({ length: 90 }, (_, i) => `// Context line ${i + 1}`).join('\n') : '')
+    },
+    canAllowAlways: false,
+    decision: 'pending'
+});
+// These never enter the chat store or the transport; the preview owns their lifetime.
+export const PROMPT_SAMPLES = [
+    { label: 'Permission · File edit', items: [approval()] },
+    {
+        label: 'Permission · Command',
+        items: [
+            {
+                ...base('command'),
+                kind: 'approval',
+                toolName: 'Bash',
+                toolUseId: null,
+                input: { command: 'bun run check && bun test', cwd: '/projects/ruimte' },
+                description: "Run the project's validation checks before continuing.",
+                canAllowAlways: true,
+                allowAlways: { label: 'Allow for this session', description: 'Allow commands in this session until it ends.' },
+                decision: 'pending'
+            }
+        ]
+    },
+    { label: 'Permission · Long diff', items: [approval(true)] },
+    { label: 'Question · Single choice', items: [question('single', [endpoints])] },
+    { label: 'Question · Multiple choices', items: [question('multiple', [checks])] },
+    { label: 'Question · Written answer', items: [question('written', [notes])] },
+    { label: 'Question · Three questions', items: [question('questions', [endpoints, checks, notes])] },
+    { label: 'Question · Optional', items: [question('optional', [endpoints], true)] },
+    { label: 'Several requests', items: [question('optional', [endpoints], true), approval(), question('single', [endpoints])] }
+];

package/dist/prompts/logic/prompts.js

@@ -0,0 +1,22 @@
+import { toggleChoice } from '../../chat/logic/answers';
+export const emptyPromptDraft = () => ({ index: 0, answers: {}, reason: '', showReason: false });
+export const answerValue = (answer) => (answer.custom ? answer.text.trim() : answer.choices.join(', '));
+export const questionAnswer = (draft, question) => draft.answers[question.id] ?? { choices: [], text: '', custom: question.choices.length === 0 };
+export function pickPromptChoice(answer, question, label) {
+    return { ...answer, custom: false, choices: question.multiSelect ? toggleChoice(answer.choices, label) : [label] };
+}
+/* An optional question never stands in front of a request that holds the agent up. */
+export const isBlockingPrompt = (item) => item.kind === 'approval' || !item.async;
+/* Blocking prompts first and optional ones after, each oldest first. The chat and a canvas's stack both follow it. */
+export const orderPrompts = (prompts, blocking, createdAt) => [...prompts].sort((a, b) => Number(blocking(b)) - Number(blocking(a)) || createdAt(a) - createdAt(b));
+export function nextPrompt(items, activeId) {
+    const active = items.find((item) => item.requestId === activeId);
+    if (active) {
+        return active;
+    }
+    return orderPrompts(items, isBlockingPrompt, (item) => item.createdAt)[0] ?? null;
+}
+export function promptAnswers(item, draft) {
+    const answers = Object.fromEntries(item.questions.map((question) => [question.id, answerValue(questionAnswer(draft, question))]));
+    return Object.values(answers).every((answer) => answer !== '') ? answers : null;
+}

package/dist/prompts/logic/subjects.d.ts

@@ -0,0 +1,49 @@
+import type { ReactNode } from 'react';
+import { type PendingPrompt, type PromptAction, type PromptDraft } from './prompts';
+export interface HostPrompt {
+    id: string;
+    createdAt: number;
+    blocking: boolean;
+    asks: 'approval' | 'question';
+    data: unknown;
+}
+export type PromptSubject = {
+    kind: 'chat';
+    nodeId: string;
+    item: PendingPrompt;
+} | {
+    kind: 'host';
+    nodeId: string;
+    prompt: HostPrompt;
+};
+export interface ChatPromptClients {
+    approve(chatId: string, requestId: string, decision: 'allow' | 'allow-always' | 'deny', message?: string): Promise<void>;
+    answer(chatId: string, requestId: string, answers: Record<string, string>): Promise<void>;
+    dismiss(chatId: string, itemId: string): Promise<void>;
+}
+export interface PromptViewProps {
+    subject: PromptSubject;
+    draft: PromptDraft;
+    onDraft(draft: PromptDraft): void;
+    onAction(action: PromptAction): void;
+    more: number;
+    hasDraft: boolean;
+    denyReason: boolean;
+    disabled: boolean;
+    sending: boolean;
+    error: string | null;
+    top?: ReactNode;
+    onReveal?: () => void;
+}
+export interface ApprovalButtonSpec {
+    id: string;
+    label: string;
+    description?: string;
+    primary: boolean;
+    action: PromptAction;
+}
+export declare const promptIdOf: (subject: PromptSubject) => string;
+export declare const promptCreatedAt: (subject: PromptSubject) => number;
+export declare const isBlockingSubject: (subject: PromptSubject) => boolean;
+export declare const approvalButtons: (subject: PromptSubject, reason: string) => ApprovalButtonSpec[];
+export declare const answerPrompt: (subject: PromptSubject, action: PromptAction, chat: ChatPromptClients | null) => Promise<void>;

package/dist/prompts/logic/subjects.js

@@ -0,0 +1,56 @@
+import i18next from 'i18next';
+import { chatHost } from '../../host';
+import { isBlockingPrompt } from './prompts';
+/* Unique across the chats of a surface and the app's own prompts, and stable while the prompt waits. */
+export const promptIdOf = (subject) => subject.kind === 'chat' ? `agent-chat:${subject.nodeId}:${subject.item.requestId}` : subject.prompt.id;
+export const promptCreatedAt = (subject) => (subject.kind === 'chat' ? subject.item.createdAt : subject.prompt.createdAt);
+/* Only a chat's optional question does not hold anything up; the app says so of its own. */
+export const isBlockingSubject = (subject) => (subject.kind === 'chat' ? isBlockingPrompt(subject.item) : subject.prompt.blocking);
+/* The buttons of a chat's permission request in the order it draws them: a remembered rule, Deny, then Allow as the primary. */
+export const approvalButtons = (subject, reason) => {
+    if (subject.kind !== 'chat' || subject.item.kind !== 'approval') {
+        return [];
+    }
+    const { item } = subject;
+    const message = reason.trim();
+    return [
+        ...(item.canAllowAlways && item.allowAlways
+            ? [
+                {
+                    id: 'allow-always',
+                    label: item.allowAlways.label,
+                    description: item.allowAlways.description,
+                    primary: false,
+                    action: { kind: 'approve', decision: 'allow-always' }
+                }
+            ]
+            : []),
+        {
+            id: 'deny',
+            label: i18next.t('agent-prompts:approval.deny'),
+            primary: false,
+            action: { kind: 'approve', decision: 'deny', ...(message ? { message } : {}) }
+        },
+        { id: 'allow', label: i18next.t('agent-prompts:approval.allow'), primary: true, action: { kind: 'approve', decision: 'allow' } }
+    ];
+};
+/* Sends a card's action as the request its subject is answered with. A refusal comes back as an error for the card to show. */
+export const answerPrompt = async (subject, action, chat) => {
+    if (subject.kind === 'host') {
+        return chatHost().prompts.answer(subject.prompt, action);
+    }
+    if (chat === null) {
+        throw new Error(i18next.t('agent-prompts:error.notConnected'));
+    }
+    const { item, nodeId } = subject;
+    if (action.kind === 'approve') {
+        return chat.approve(nodeId, item.requestId, action.decision, action.message);
+    }
+    if (action.kind === 'answer') {
+        return chat.answer(nodeId, item.requestId, action.answers);
+    }
+    if (action.kind === 'dismiss') {
+        return chat.dismiss(nodeId, item.id);
+    }
+    throw new Error(i18next.t('agent-prompts:error.noChoices'));
+};

package/dist/prompts/logic/useFocusAfterAnswer.d.ts

@@ -0,0 +1,6 @@
+import { type RefObject } from 'react';
+export interface FocusAfterAnswer {
+    hold(): void;
+    release(): void;
+}
+export declare function useFocusAfterAnswer(activeId: string | null, container: RefObject<HTMLElement | null>, onEmpty: () => void): FocusAfterAnswer;

package/dist/prompts/logic/useFocusAfterAnswer.js

@@ -0,0 +1,28 @@
+import { useEffect, useRef } from 'react';
+import { focusPromptStart } from './focus';
+/*
+ * The keyboard stays with the prompts it was answering: on where the card that comes next is answered, or
+ * wherever `onEmpty` puts it once none is left. A card answered with the keyboard elsewhere takes nothing.
+ */
+export function useFocusAfterAnswer(activeId, container, onEmpty) {
+    const pending = useRef(false);
+    useEffect(() => {
+        if (!pending.current) {
+            return;
+        }
+        pending.current = false;
+        if (!focusPromptStart(container.current)) {
+            onEmpty();
+        }
+        // Only a change of the front card is news; a new `onEmpty` each render is not.
+        // oxlint-disable-next-line react-hooks/exhaustive-deps
+    }, [activeId]);
+    return {
+        hold: () => {
+            pending.current = container.current?.contains(document.activeElement) === true;
+        },
+        release: () => {
+            pending.current = false;
+        }
+    };
+}

package/dist/prompts/logic/usePromptSession.d.ts

@@ -0,0 +1,24 @@
+import { type MouseEvent } from 'react';
+import { type PromptDraft } from './prompts';
+interface PromptSessionOptions<T> {
+    prompts: readonly T[];
+    idOf(prompt: T): string;
+    pick(waiting: readonly T[], activeId: string | null, activeIndex: number): T | null;
+    disabled: boolean;
+}
+export interface PromptSession<T> {
+    active: T | null;
+    activeId: string | null;
+    index: number;
+    waiting: readonly T[];
+    setActive(id: string): void;
+    draftOf(id: string): PromptDraft;
+    setDraft(id: string, draft: PromptDraft): void;
+    sending: boolean;
+    errorOf(id: string): string | null;
+    act(prompt: T, send: () => Promise<void>): Promise<'sent' | 'failed' | 'busy'>;
+    onPointerDownCapture(): void;
+    onClickCapture(event: MouseEvent): void;
+}
+export declare function usePromptSession<T>({ prompts, idOf, pick, disabled }: PromptSessionOptions<T>): PromptSession<T>;
+export {};

package/dist/prompts/logic/usePromptSession.js

@@ -0,0 +1,87 @@
+import { useRef, useState } from 'react';
+import { emptyPromptDraft } from './prompts';
+/*
+ * What answering a row of prompts needs besides the prompts: a draft per request that survives
+ * paging, one send at a time, the error of the request that failed, and the requests answered here
+ * that the machine has not taken off yet.
+ */
+export function usePromptSession({ prompts, idOf, pick, disabled }) {
+    const [activeId, setActiveId] = useState(null);
+    const [activeIndex, setActiveIndex] = useState(0);
+    const [completed, setCompleted] = useState([]);
+    const [drafts, setDrafts] = useState({});
+    const [sending, setSending] = useState(false);
+    const [error, setError] = useState(null);
+    const busy = useRef(false);
+    const pressedRequest = useRef(null);
+    const stillCompleted = completed.filter((id) => prompts.some((prompt) => idOf(prompt) === id));
+    if (stillCompleted.length !== completed.length) {
+        setCompleted(stillCompleted);
+    }
+    const waiting = prompts.filter((prompt) => !completed.includes(idOf(prompt)));
+    const active = pick(waiting, activeId, activeIndex);
+    const activeKey = active === null ? null : idOf(active);
+    const index = active === null ? 0 : waiting.indexOf(active);
+    if (index !== activeIndex) {
+        setActiveIndex(index);
+    }
+    if (activeKey !== activeId) {
+        setActiveId(activeKey);
+        setError(null);
+    }
+    const finish = (id) => {
+        setCompleted((current) => [...current, id]);
+        setDrafts((current) => {
+            const next = { ...current };
+            delete next[id];
+            return next;
+        });
+    };
+    const act = async (prompt, send) => {
+        if (busy.current || disabled) {
+            return 'busy';
+        }
+        const id = idOf(prompt);
+        busy.current = true;
+        setSending(true);
+        setError(null);
+        try {
+            await send();
+            finish(id);
+            return 'sent';
+        }
+        catch (cause) {
+            setError({ id, message: cause instanceof Error ? cause.message : String(cause) });
+            return 'failed';
+        }
+        finally {
+            busy.current = false;
+            setSending(false);
+        }
+    };
+    return {
+        active,
+        activeId: activeKey,
+        index,
+        waiting,
+        setActive: (id) => {
+            setActiveId(id);
+            setError(null);
+        },
+        draftOf: (id) => drafts[id] ?? emptyPromptDraft(),
+        setDraft: (id, draft) => setDrafts((current) => ({ ...current, [id]: draft })),
+        sending,
+        errorOf: (id) => (error?.id === id ? error.message : null),
+        act,
+        onPointerDownCapture: () => {
+            pressedRequest.current = activeKey;
+        },
+        onClickCapture: (event) => {
+            // A press that began on Send cannot become Allow when a request arrives underneath it.
+            if (event.detail > 0 && event.target.closest('.prompt-card') && pressedRequest.current !== activeKey) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        }
+    };
+}

package/dist/prompts/ui/ApprovalBody.d.ts

@@ -0,0 +1,13 @@
+import type { ChatApprovalItem } from '@ruimte/agent-contracts';
+import type { PromptDraft } from '../logic/prompts';
+export declare function CommandBox({ command, cwd }: {
+    command: string;
+    cwd?: string;
+}): import("react").JSX.Element;
+export declare function ApprovalBody({ item, draft, onDraft, denyReason, locked }: {
+    item: ChatApprovalItem;
+    draft: PromptDraft;
+    onDraft(draft: PromptDraft): void;
+    denyReason: boolean;
+    locked: boolean;
+}): import("react").JSX.Element;

package/dist/prompts/ui/ApprovalBody.js

@@ -0,0 +1,35 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense, useState } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { approvalChanges, fileChanges } from '../../chat/logic/tools';
+import { chatHost } from '../../host';
+import { lazyNamed } from '../../lazy';
+import { isPrimaryKey } from '../logic/keys';
+import { Button } from '@ruimte/ui/Button';
+import { TextMenu } from '@ruimte/ui/TextMenu';
+const EditDiff = lazyNamed(() => import('../../chat/ui/EditDiff'), 'default');
+const UnifiedDiff = lazyNamed(() => import('../../chat/ui/UnifiedDiff'), 'default');
+/* A command in the sunken box a person reads before allowing it, with the folder it runs in when that is known. */
+export function CommandBox({ command, cwd }) {
+    return (_jsxs(TextMenu, { className: "rounded-xl bg-surface-sunken p-3", children: [cwd !== undefined && _jsx("p", { className: "mb-2 break-all font-mono text-xs text-text-muted select-text", children: cwd }), _jsx("pre", { className: "whitespace-pre-wrap break-words font-mono text-code text-text select-text", children: command })] }));
+}
+function ApprovalDetails({ item }) {
+    const { t } = useTranslation('agent-prompts');
+    const [expanded, setExpanded] = useState(false);
+    const patches = approvalChanges(item.input);
+    const edits = patches.length ? [] : fileChanges(item.toolName, item.input);
+    const input = typeof item.input === 'object' && item.input !== null ? item.input : {};
+    return (_jsxs(_Fragment, { children: [item.description && _jsx("p", { className: "text-sm text-text-muted", children: item.description }), patches.length + edits.length > 1 && (_jsx("p", { className: "text-xs text-text-muted", children: t('approval.allChanges', { count: patches.length + edits.length }) })), patches.length + edits.length > 0 ? (_jsxs("div", { className: "overflow-hidden rounded-xl bg-surface-sunken", children: [_jsx("div", { className: clsx('overflow-auto', !expanded && 'max-h-44'), children: _jsxs(Suspense, { fallback: _jsx("p", { className: "p-3 text-xs text-text-muted", children: t('approval.loadingDiff') }), children: [patches.map((change, i) => (_jsx(UnifiedDiff, { change: change }, i))), edits.map((change, i) => (_jsx(EditDiff, { change: change }, i)))] }) }), _jsx("div", { className: "flex items-center border-t border-border p-1", children: _jsx(Button, { size: "sm", "aria-expanded": expanded, onClick: () => setExpanded(!expanded), children: expanded ? t('approval.collapseDiff') : t('approval.viewDiff') }) })] })) : typeof input.command === 'string' ? (_jsx(CommandBox, { command: input.command, cwd: typeof input.cwd === 'string' ? input.cwd : undefined })) : (_jsxs("details", { children: [_jsx("summary", { className: "flex h-7 cursor-pointer items-center text-xs text-text-muted", children: t('approval.details') }), _jsx(TextMenu, { children: _jsx("pre", { className: "max-h-64 overflow-auto whitespace-pre-wrap break-words rounded-xl bg-surface-sunken p-3 font-mono text-code text-text select-text", children: JSON.stringify(item.input, null, 2) }) })] }))] }));
+}
+/* A chat's permission request: the diff, the command or the raw input, and the reason a Deny may carry. */
+export function ApprovalBody({ item, draft, onDraft, denyReason, locked }) {
+    const { t } = useTranslation('agent-prompts');
+    const AnswerField = chatHost().dictation.Textarea;
+    return (_jsxs(_Fragment, { children: [_jsx(ApprovalDetails, { item: item }), denyReason && draft.showReason && (_jsx(AnswerField, { className: "field min-h-16 text-sm", autoFocus: true, "aria-label": t('approval.reasonLabel'), placeholder: t('approval.reasonPlaceholder'), disabled: locked, value: draft.reason, onChange: (e) => onDraft({ ...draft, reason: e.target.value }), onKeyDown: (e) => {
+                    // Mod+Enter presses Allow everywhere else in the card, which is the opposite of what a reason for declining is typed for.
+                    if (isPrimaryKey(e.nativeEvent, chatHost().isApplePlatform())) {
+                        e.preventDefault();
+                    }
+                } }))] }));
+}

package/dist/prompts/ui/PromptActions.d.ts

@@ -0,0 +1,26 @@
+import type { ButtonHTMLAttributes } from 'react';
+export declare function PromptPrimary(props: ButtonHTMLAttributes<HTMLButtonElement>): import("react").JSX.Element;
+export interface ApprovalButton {
+    id: string;
+    label: string;
+    description?: string;
+    primary: boolean;
+    onPress(): void;
+}
+export declare function ApprovalActions({ buttons, onAddReason, locked, sending }: {
+    buttons: readonly ApprovalButton[];
+    onAddReason?: () => void;
+    locked: boolean;
+    sending: boolean;
+}): import("react").JSX.Element;
+export declare function QuestionActions({ index, dismissable, last, ready, locked, sending, onPrevious, onDismiss, onCommit }: {
+    index: number;
+    dismissable: boolean;
+    last: boolean;
+    ready: boolean;
+    locked: boolean;
+    sending: boolean;
+    onPrevious(): void;
+    onDismiss(): void;
+    onCommit(): void;
+}): import("react").JSX.Element;

package/dist/prompts/ui/PromptActions.js

@@ -0,0 +1,19 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { ArrowUp, CircleCheck } from 'lucide-react';
+import { Button } from '@ruimte/ui/Button';
+import { Icon } from '@ruimte/ui/Icon';
+/* The one button Mod+Enter presses and ArrowDown from the heading lands on, when the body has nothing to choose. */
+export function PromptPrimary(props) {
+    return _jsx(Button, { variant: "inverse", size: "sm", "data-prompt-primary": true, ...props });
+}
+/* The buttons of a permission request, in the order a chat draws them: the quieter ones first, Allow last. */
+export function ApprovalActions({ buttons, onAddReason, locked, sending }) {
+    const { t } = useTranslation('agent-prompts');
+    return (_jsxs(_Fragment, { children: [onAddReason && (_jsx(Button, { size: "sm", disabled: locked, onClick: onAddReason, children: t('approval.addReason') })), _jsx("div", { className: "ml-auto flex flex-wrap items-center justify-end gap-1.5", children: buttons.map((button) => button.primary ? (_jsxs(PromptPrimary, { disabled: locked, onClick: button.onPress, children: [_jsx(Icon, { icon: CircleCheck, size: 16 }), sending ? t('sending') : button.label] }, button.id)) : (_jsx(Button, { size: "sm", disabled: locked, "aria-description": button.description, onClick: button.onPress, children: button.label }, button.id))) })] }));
+}
+/* The buttons of a question: back through its questions, dismissing an optional one, and Next until the last becomes Answer. */
+export function QuestionActions({ index, dismissable, last, ready, locked, sending, onPrevious, onDismiss, onCommit }) {
+    const { t } = useTranslation(['agent-prompts', 'agent-chat']);
+    return (_jsxs(_Fragment, { children: [index > 0 && (_jsx(Button, { size: "sm", disabled: sending, onClick: onPrevious, children: t('question.previous') })), dismissable && index === 0 && (_jsx(Button, { size: "sm", disabled: locked, onClick: onDismiss, children: t('agent-chat:common.action.dismiss') })), _jsx("span", { className: "grow" }), _jsxs(PromptPrimary, { disabled: locked || !ready, onClick: onCommit, children: [sending ? t('sending') : last ? t('question.answer') : t('question.next'), _jsx(Icon, { icon: ArrowUp, size: 16 })] })] }));
+}

package/dist/prompts/ui/PromptCard.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+export declare const PROMPT_SURFACE = "flex flex-col overflow-hidden rounded-2xl border border-border bg-[color-mix(in_srgb,var(--surface-raised)_92%,transparent)] shadow-float backdrop-blur-[14px]";
+export type PromptCardKind = 'approval' | 'question' | 'waiting';
+interface PromptCardProps {
+    kind: PromptCardKind;
+    heading: ReactNode;
+    meta?: ReactNode;
+    top?: ReactNode;
+    actions: ReactNode;
+    busy: boolean;
+    notice: string | null;
+    error: string | null;
+    children?: ReactNode;
+}
+export declare function PromptCard({ kind, heading, meta, top, actions, busy, notice, error, children }: PromptCardProps): import("react").JSX.Element;
+export {};

package/dist/prompts/ui/PromptCard.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { Hand, MessageCircleQuestionMark } from 'lucide-react';
+import { chatHost } from '../../host';
+import { headingKey, isPrimaryKey, staysInCard, stepIndex, toolbarKey } from '../logic/keys';
+import { Icon } from '@ruimte/ui/Icon';
+/* The raised glass a chat's composer is made of, for a card that stands on its own over a canvas. */
+export const PROMPT_SURFACE = 'flex flex-col overflow-hidden rounded-2xl border border-border bg-[color-mix(in_srgb,var(--surface-raised)_92%,transparent)] shadow-float backdrop-blur-[14px]';
+const ICONS = { approval: Hand, question: MessageCircleQuestionMark, waiting: MessageCircleQuestionMark };
+/*
+ * The keys every card shares: Mod+Enter, entering from the heading and the action row. The body handles
+ * its own keys first and says so with `preventDefault`.
+ */
+function onCardKeyDown(event) {
+    const card = event.currentTarget;
+    const target = event.target instanceof HTMLElement ? event.target : null;
+    if (!event.defaultPrevented) {
+        if (isPrimaryKey(event.nativeEvent, chatHost().isApplePlatform())) {
+            event.preventDefault();
+            // A click on the button itself, so a disabled Next or Answer stays as disabled as it looks.
+            card.querySelector('[data-prompt-primary]:not(:disabled)')?.click();
+        }
+        else if (target?.classList.contains('prompt-heading') && headingKey(event.nativeEvent)) {
+            event.preventDefault();
+            card.querySelector('[data-prompt-entry]:not(:disabled), [data-prompt-primary]:not(:disabled)')?.focus();
+        }
+        else {
+            const toolbar = target?.closest('[role="toolbar"]');
+            const step = toolbar ? toolbarKey(event.nativeEvent) : null;
+            if (toolbar && step !== null) {
+                event.preventDefault();
+                const buttons = [...toolbar.querySelectorAll('button:not(:disabled)')];
+                const current = buttons.findIndex((button) => button.contains(target));
+                buttons[stepIndex(current, buttons.length, step)]?.focus();
+            }
+        }
+    }
+    if (event.defaultPrevented || staysInCard(event.nativeEvent)) {
+        event.stopPropagation();
+    }
+}
+/* What every prompt looks like, whatever asked it: in a chat's composer and in a canvas's stack. */
+export function PromptCard({ kind, heading, meta, top, actions, busy, notice, error, children }) {
+    const { t } = useTranslation('agent-prompts');
+    const card = (_jsxs("div", { className: "prompt-card flex min-h-0 flex-col gap-2 p-3", role: "group", "aria-label": t(`card.${kind}`), "aria-busy": busy, onKeyDown: onCardKeyDown, children: [_jsx("div", { className: "-m-1.5 max-h-[min(50dvh,480px)] overflow-auto overscroll-contain p-1.5", children: _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx(Icon, { icon: ICONS[kind], size: 16, className: "mt-[3px] shrink-0 text-status-needs-you" }), _jsx("h3", { tabIndex: -1, className: "prompt-heading min-w-0 break-words text-sm font-semibold text-text outline-offset-4", children: heading })] }), meta && _jsx("div", { className: "flex flex-wrap gap-x-3 gap-y-1 text-xs text-text-muted", children: meta }), children, notice && _jsx("p", { className: "text-xs text-text-muted", children: notice }), error && (_jsx("p", { role: "alert", className: "text-xs text-status-error", children: error }))] }) }), _jsx("div", { role: "toolbar", "aria-label": t('toolbar'), className: "flex flex-wrap items-center gap-1.5", children: actions })] }));
+    if (top === undefined) {
+        return card;
+    }
+    return (_jsxs("div", { className: "flex min-h-0 flex-col", children: [top, card] }));
+}

package/dist/prompts/ui/PromptView.d.ts

@@ -0,0 +1,2 @@
+import { type PromptViewProps } from '../logic/subjects';
+export declare function PromptView(props: PromptViewProps): string | number | bigint | boolean | import("react").JSX.Element | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | Iterable<import("react").ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;

package/dist/prompts/ui/PromptView.js

@@ -0,0 +1,47 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { toolSummary } from '../../chat/logic/tools';
+import { chatHost } from '../../host';
+import { answerValue, promptAnswers, questionAnswer } from '../logic/prompts';
+import { approvalButtons } from '../logic/subjects';
+import { ApprovalBody } from './ApprovalBody';
+import { ApprovalActions, QuestionActions } from './PromptActions';
+import { PromptCard } from './PromptCard';
+import { QuestionBody } from './QuestionBody';
+/* A permission request or question, answered in place: a chat's, or one of the app's own that it draws itself. */
+export function PromptView(props) {
+    const { subject, draft, onDraft, onAction, more, hasDraft, denyReason, disabled, sending, error, top } = props;
+    const { t } = useTranslation('agent-prompts');
+    const locked = sending || disabled;
+    const notice = disabled ? t('error.notConnected') : null;
+    const buttons = approvalButtons(subject, draft.reason).map(({ action, ...button }) => ({ ...button, onPress: () => onAction(action) }));
+    if (subject.kind === 'host') {
+        return chatHost().prompts.render(subject.prompt, props);
+    }
+    const { item } = subject;
+    const question = item.kind === 'question' ? item.questions[Math.min(draft.index, item.questions.length - 1)] : null;
+    const answer = question ? questionAnswer(draft, question) : null;
+    const last = item.kind === 'question' && draft.index === item.questions.length - 1;
+    // Whether Next or Answer may go with this draft. The keys ask it as well as the button.
+    const readyWith = (next) => item.kind === 'question' && !!question && !!answerValue(questionAnswer(next, question)) && !(last && !promptAnswers(item, next));
+    const commit = (next) => {
+        if (item.kind !== 'question' || locked || !readyWith(next)) {
+            return;
+        }
+        if (!last) {
+            onDraft({ ...next, index: next.index + 1 });
+        }
+        else {
+            const answers = promptAnswers(item, next);
+            if (answers) {
+                onAction({ kind: 'answer', answers });
+            }
+        }
+    };
+    const multiple = item.kind === 'question' && item.questions.length > 1;
+    const meta = more > 0 || hasDraft || multiple ? (_jsxs(_Fragment, { children: [more > 0 && _jsx("span", { className: "tabular-nums", children: t('meta.waiting', { count: more + 1 }) }), multiple && _jsx("span", { className: "tabular-nums", children: t('meta.question', { index: draft.index + 1, total: item.questions.length }) }), hasDraft && _jsx("span", { children: t('meta.draftSaved') })] })) : null;
+    if (item.kind === 'approval') {
+        return (_jsx(PromptCard, { kind: "approval", heading: `${item.toolName === 'Bash' ? t('approval.runCommand') : item.toolName} ${item.toolName === 'Bash' ? '' : toolSummary(item.toolName, item.input)}`, meta: meta, top: top, busy: sending, notice: notice, error: error, actions: _jsx(ApprovalActions, { buttons: buttons, onAddReason: denyReason && !draft.showReason ? () => onDraft({ ...draft, showReason: true }) : undefined, locked: locked, sending: sending }), children: _jsx(ApprovalBody, { item: item, draft: draft, onDraft: onDraft, denyReason: denyReason, locked: locked }) }));
+    }
+    return (_jsx(PromptCard, { kind: "question", heading: question?.question, meta: meta, top: top, busy: sending, notice: notice, error: error, actions: _jsx(QuestionActions, { index: draft.index, dismissable: item.async === true, last: last, ready: readyWith(draft), locked: locked, sending: sending, onPrevious: () => onDraft({ ...draft, index: draft.index - 1 }), onDismiss: () => onAction({ kind: 'dismiss' }), onCommit: () => commit(draft) }), children: question && answer && (_jsx(QuestionBody, { question: question, answer: answer, onAnswer: (next) => onDraft({ ...draft, answers: { ...draft.answers, [question.id]: next } }), onCommit: (next) => commit({ ...draft, answers: { ...draft.answers, [question.id]: next } }), locked: locked })) }));
+}

package/dist/prompts/ui/QuestionBody.d.ts

@@ -0,0 +1,9 @@
+import type { ChatQuestion } from '@ruimte/agent-contracts';
+import { type PromptAnswer } from '../logic/prompts';
+export declare function QuestionBody({ question, answer, onAnswer, onCommit, locked }: {
+    question: ChatQuestion;
+    answer: PromptAnswer;
+    onAnswer(answer: PromptAnswer): void;
+    onCommit(answer: PromptAnswer): void;
+    locked: boolean;
+}): import("react").JSX.Element;