@softov/ahpc 0.1.0

package/dist/src/screens.js

@@ -0,0 +1,1322 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@textui/core/jsx-runtime";
+import { defineComponent, useApp, useCapabilities, useEffect, useFocusScope, useMemo, useRequiredService, useSize, useState, useStore, useStoreSubtree, useStoreValue, useTheme, } from '@textui/core';
+import { Badge, Column, Divider, EmptyState, Field, Form, FormActions, Marquee, Panel, RadioGroup, Row, SearchBox, Select, TextInput, argumentOf, useForm } from '@textui/widgets';
+import { PRESETS, presetFor, scheduleProblem, zoneIsKnownHere } from './schedule.js';
+import { AUTOMATIONS_SCOPE, CHANGES_SCOPE, CHAT_SCOPE, CONTROLLER, MCP_SCOPE, SESSIONS_SCOPE, SKILLS_SCOPE, modelCommand, settingCommand, } from './control.js';
+import { branchName, branchDrift, ARCHIVED, AUTOMATIONS, AUTOMATION_ROW, CHANGES, CUSTOMIZATIONS, DRAFT, EXPANDED, FILTER, FOCUS, HISTORY, HOST, INPUT, CHANGE_AT, CHANGE_ROW, CHANGE_SCOPES, FILES_AT, FILES_ENTRIES, FILES_OPEN, MODEL, MODEL_CONFIG, OPEN, OPEN_FILE, CHAT_URI, PROVIDER, QUEUE, SELECTED, SESSIONS, SETTINGS, SIDEBAR, CHATS, CURSOR, FIND, FINDING, FIND_AT, OPEN_TERMINAL, PRESENT, SPLIT_AT, SPLIT_DEFAULT, TERMINAL, TERMINALS, TURNS, WORKSPACE, hiddenSessions, openSession, visibleSessions, workspaceName, } from './state.js';
+import { findBlocks, toBlocks } from './blocks.js';
+import { decodeStatus } from './ahp/status.js';
+import { ChatTranscript } from './view/transcript.js';
+import { ChatComposer } from './view/composer.js';
+import { ChatSessionHead } from './view/sessionhead.js';
+import { settingIcon, valueIcon } from './view/icons.js';
+import { ChatHitl, ChatInputStatus } from './view/hitl.js';
+import { ChangesList } from './view/changes.js';
+import { FileList } from './view/files.js';
+import { AutomationList } from './view/automations.js';
+import { CustomizationList } from './view/customizations.js';
+import { TerminalView } from './view/terminal.js';
+import { FileDiff } from './view/filediff.js';
+import { diffLines } from './diff.js';
+import { ConnectionBadge, SessionList } from './view/sessions.js';
+import { SessionDetails } from './view/details.js';
+import { openPicker } from './view/picker.js';
+/**
+ * The screens.
+ *
+ * Eight, and each is a different question: which conversation, the
+ * conversation itself, starting one, what it changed, how it is configured,
+ * which host any of it is on, what the host handed it, and which of its tools
+ * are answering. Anything else that came up - a tool call's full output, the
+ * command palette, a confirm - is a layer or an expansion inside one of these,
+ * because none of them is a place you navigate *to*.
+ *
+ * Every screen is composition. The parts are in `view/`, the actions are in
+ * `control.ts`, and what is left here is which part goes where.
+ */
+/**
+ * Everything the catalogue knows about one session, as rows.
+ *
+ * Two sources, and they are not interchangeable: the summary is what
+ * `listSessions` returns and the detail is the session channel's own state -
+ * the chat URI, the lifecycle and the settings in force are only ever on the
+ * second. A pane that showed the summary alone could not answer "which chat is
+ * this" or "what may it do without asking", which are the two questions
+ * somebody reading a catalogue of agents actually has.
+ */
+function describe(session, detail) {
+    const status = decodeStatus(session.status);
+    const setting = (key) => {
+        const value = detail?.config.values[key];
+        if (value === undefined)
+            return '';
+        // The host's own wording. `acceptEdits` is an id, "Accept edits" is what
+        // the schema calls it, and the provider is the authority on both.
+        const property = detail?.config.properties.find((found) => found.key === key);
+        return property?.values.find((choice) => choice.value === value)?.label ?? value;
+    };
+    const changes = session.changes;
+    return [
+        { id: 'status', label: 'Status', value: status.label, tone: status.tone },
+        { id: 'activity', label: 'Doing', value: session.activity ?? detail?.activity ?? '', absent: 'nothing it says' },
+        { id: 'flags', label: 'Flags', value: [status.read ? 'read' : 'unread', status.archived ? 'archived' : ''].filter(Boolean).join(', ') },
+        { id: 'provider', label: 'Harness', value: session.provider },
+        { id: 'model', label: 'Model', value: detail?.model?.displayName ?? '', absent: 'nothing said yet' },
+        // What this model takes, which is not what the harness takes. Three of
+        // Claude's models accept five thinking levels, some accept one and some
+        // accept none, so the session-wide setting below can be a choice this
+        // model will not honour - and the only way to know was to try it.
+        ...(detail?.model?.options ?? []).map((option) => ({
+            id: `model.${option.key}`,
+            label: option.title,
+            // The host's words, positionally. Three implementations spell these
+            // five values three ways, and a client with its own list is one that
+            // disagrees with whichever host it is talking to.
+            value: option.values
+                .map((one) => (one.value === option.default ? `${one.label} (default)` : one.label))
+                .join(', '),
+        })),
+        // The host's own questions, in the host's own order. Naming them here is
+        // how the pane came to show a blank "Permissions" against a host whose key
+        // for it is `autoApprove`.
+        ...(detail?.config.properties ?? [])
+            .filter((property) => property.values.length > 0)
+            .map((property) => ({
+            id: `config.${property.key}`,
+            label: property.title,
+            value: setting(property.key),
+        })),
+        { id: 'workspace', label: 'Workspace', value: session.workingDirectories.map((dir) => dir.replace(/^file:\/\//, '')).join(', '), absent: 'the host\'s own directory' },
+        {
+            id: 'branch',
+            label: 'Branch',
+            value: [branchName(session), branchDrift(session)].filter(Boolean).join('  '),
+            absent: 'not a repository, or the host does not say',
+        },
+        // The identifiers, in full and copyable. A URI you can read half of is
+        // worse than one you cannot see at all: it looks like the whole thing.
+        { id: 'session', label: 'Session', value: session.resource },
+        { id: 'chat', label: 'Chat', value: detail?.chat ?? '', absent: 'no chat yet' },
+        // Only when there is more than one. A session with a single chat is a
+        // session where the two are the same thing, and a row saying "1 of 1" is
+        // a row that tells nobody anything.
+        ...((detail?.chats.length ?? 0) > 1
+            ? [{ id: 'chats', label: 'Chats', value: String(detail?.chats.length ?? 0) }]
+            : []),
+        // What the host said when it would not answer. `-32001 No agent for
+        // session` is a live catalogue listing something whose agent has exited:
+        // the row is real, and everything on the session channel is not there.
+        { id: 'lifecycle', label: 'Lifecycle', value: detail?.refusal ?? detail?.lifecycle ?? '', ...(detail?.refusal ? { tone: 'danger' } : {}) },
+        { id: 'created', label: 'Started', value: session.createdAt.slice(0, 16).replace('T', ' ') },
+        { id: 'modified', label: 'Updated', value: session.modifiedAt.slice(0, 16).replace('T', ' ') },
+        {
+            id: 'changes',
+            label: 'Changes',
+            value: changes?.files
+                ? `${changes.files} files  +${changes.additions ?? 0} -${changes.deletions ?? 0}`
+                : '',
+            absent: 'nothing yet',
+        },
+    ];
+}
+// ---------------------------------------------------------------- 1. sessions
+export const SessionsScreen = defineComponent('SessionsScreen', () => {
+    const app = useApp();
+    const theme = useTheme();
+    const controller = useRequiredService(CONTROLLER);
+    // While this is mounted, `n` `r` `a` `x` `d` mean what the catalogue means
+    // by them. On the conversation screen they do not exist.
+    useFocusScope({ id: SESSIONS_SCOPE });
+    useStoreSubtree(SESSIONS);
+    const filter = useStoreValue(FILTER, '') ?? '';
+    const archived = useStoreValue(ARCHIVED, false) ?? false;
+    const selected = useStoreValue(SELECTED, null) ?? null;
+    const sessions = visibleSessions(app.store);
+    const hidden = hiddenSessions(app.store);
+    const host = useStoreValue(HOST);
+    // A list with a highlight and nothing selected is a detail panel that is
+    // empty until a key is pressed.
+    const ids = sessions.map((session) => session.resource).join(',');
+    useEffect(() => {
+        if (sessions.length === 0)
+            return;
+        if (selected && sessions.some((session) => session.resource === selected))
+            return;
+        app.store.set(SELECTED, sessions[0]?.resource ?? null);
+    }, [ids]);
+    /**
+     * The pane with the keyboard is the wide one.
+     *
+     * A fixed split has to be wrong somewhere: forty cells for the detail pane
+     * left a session list too narrow to read a title in, and widening the list
+     * would truncate the URIs the detail pane exists to let you copy. Neither
+     * of those is a problem while you are looking at the *other* one, so the
+     * space follows the reader.
+     *
+     * Below `splitAt` there is not enough of it to divide at all: forty cells
+     * of detail take the list down to a column that cuts every title, and the
+     * detail pane they were taken for is still too narrow to hold the URIs it
+     * exists to show. Two truncated halves are worse than one whole one, so
+     * under that width the catalogue is one pane and the detail is a drawer.
+     *
+     * Right opens it and left puts it away: the key points at the pane, which
+     * is on the right of the screen. Above the split both panes are always
+     * drawn and the same two keys only move the keyboard between them.
+     */
+    const width = useSize().width;
+    const splitAt = useStoreValue(SPLIT_AT, SPLIT_DEFAULT) ?? SPLIT_DEFAULT;
+    // Three states: out, away, and nobody has said. The last one follows the
+    // window, so a terminal being dragged wider opens the pane - and a person
+    // who put it away keeps it away, which a plain boolean defaulted from the
+    // width could not do.
+    const asked = useStoreValue(SIDEBAR, null);
+    const open = asked ?? width > splitAt;
+    const focused = useStoreValue(FOCUS, null);
+    const reading = open && focused === 'chat.details';
+    const aside = Math.max(34, Math.min(56, Math.round(width * 0.4)));
+    // What the pane without the keyboard keeps: two fifths, and never less
+    // than a session title fits in. Capped as the terminal grows, because the
+    // pane being read has a use for the rest and this one does not.
+    const current = sessions.find((session) => session.resource === selected);
+    const status = current ? decodeStatus(current.status) : null;
+    const waiting = sessions.filter((session) => decodeStatus(session.status).activity === 'input').length;
+    // The channel's own state, asked for one session at a time. Asking for
+    // every row would be a round trip per row on a screen that already has
+    // everything a row needs.
+    const [detail, setDetail] = useState(null);
+    useEffect(() => {
+        setDetail(null);
+        if (!selected)
+            return;
+        let live = true;
+        // Caught, not `void`ed. A live catalogue lists sessions whose agent has
+        // gone, the host refuses to talk about them, and an unhandled rejection
+        // from a highlight moving is an application that exits when you press a
+        // down arrow.
+        void controller.detail(selected)
+            .then((found) => { if (live)
+            setDetail(found); })
+            .catch((error) => controller.report(error));
+        return () => { live = false; };
+    }, [selected ?? '']);
+    return (_jsxs(Row, { flex: 1, gap: 1, children: [_jsxs(Panel, { title: "Sessions", ...(reading ? { width: aside } : { flex: 1 }), meta: waiting > 0 ? `${theme.glyphs.warning} ${waiting} waiting on you` : `${sessions.length} shown`, children: [_jsx(SearchBox, { value: filter, placeholder: "title, provider or workspace", 
+                        // Named, so `ctrl+f` has something to focus. A control whose id
+                        // comes from its instance cannot be the target of a command.
+                        focusId: "chat.filter", onChange: (value) => app.store.set(FILTER, value) }), _jsx(SessionList, { sessions: sessions, selectedId: selected, focusId: "chat.sessions", 
+                        // The list, not the filter. Whatever registers first would
+                        // otherwise hold the keyboard on arrival, and the filter is drawn
+                        // above the list - which made every single-letter command a letter
+                        // typed into a text field. `n`, `a` and `d` did nothing at all,
+                        // which is not what a missing key looks like from the outside.
+                        autoFocus: true, flex: 1, onSelect: (uri) => app.store.set(SELECTED, uri), onOpen: (uri) => { controller.open(uri); app.screens.push('chat'); }, emptyMessage: filter ? 'Nothing matches' : 'No sessions on this host' }), archived
+                        ? _jsx("text", { content: "x  hide archived", fg: "subtle" })
+                        : hidden > 0
+                            ? _jsx("text", { content: `x  show archived (${hidden})`, fg: "subtle" })
+                            : null] }), open ? (_jsx(Panel, { title: "Session", ...(reading ? { flex: 1 } : { width: aside }), meta: current ? 'enter copies' : '', children: current && status ? (_jsxs(Column, { gap: 1, flex: 1, children: [_jsxs(Row, { gap: 1, children: [_jsx("text", { content: theme.glyphs[status.glyph], fg: status.tone }), _jsx("text", { content: current.title, bold: true, wrap: "word", flex: 1 }), status.archived ? _jsx(Badge, { label: "archived", tone: "muted" }) : null] }), _jsx(SessionDetails, { fields: describe(current, detail), focusId: "chat.details", claim: asked === true, 
+                            // Whole, not just the row under the cursor. The values here
+                            // are the answer - a workspace path, a branch, two URIs - and
+                            // a pane that shows you the first half of the one you are
+                            // looking for has made you walk to it to find out it was not
+                            // the one.
+                            values: "all" }), _jsx("text", { content: "", flex: 1 }), _jsx(ConnectionBadge, { url: host?.url ?? '', state: host?.state ?? 'offline', sessions: sessions.length })] })) : (_jsx(EmptyState, { title: "Nothing selected", message: "Choose a session on the left." })) })) : null] }));
+});
+/**
+ * The composer's control row, for whichever session it is above.
+ *
+ * Two of these are the client's own questions - which harness, which model -
+ * because the protocol asks them itself. Everything after them is the host's:
+ * one chip per property its schema offers, in its order, with its titles. The
+ * row used to name `permissionMode`, which is what the *fixture* calls its
+ * key, so against a real host - whose keys are `isolation`, `autoApprove` and
+ * `mode` - it showed one chip that could answer nothing.
+ *
+ * Labels, never ids. `acceptEdits` is what the host stores and "Accept edits"
+ * is what it calls it, and the schema is the authority on both - so a chip
+ * reads as a sentence about what will happen rather than as a config value.
+ */
+/**
+ * What a slash offers with no session open.
+ *
+ * Asked once and filtered locally as the draft is typed, the same way the
+ * chat screen filters a session's own list - a request per keystroke would
+ * ask the host the same question forty times to narrow one menu.
+ */
+/**
+ * What the host offers to complete the word the caret is in.
+ *
+ * Asked of the host on every change to the draft, because that is whose
+ * question it is - a path is a path on *its* filesystem, and which of them
+ * match what has been typed changes with every keystroke. Only when there is
+ * something to complete: a draft with no at-sign in its last word asks
+ * nothing, which is most keystrokes.
+ *
+ * Latest wins. Two answers can be in flight after two quick keystrokes, and
+ * the older one arriving second would put the wrong list under the caret.
+ */
+/**
+ * The draft with a completion's range replaced by its text.
+ *
+ * The range and not an append: what is being completed is a fragment, so
+ * `@src/ho` becomes `@src/host.ts` by replacing from the at-sign. Appending
+ * would produce `@src/ho@src/host.ts`.
+ */
+function splice(draft, path) {
+    return `${draft.slice(0, path.rangeStart)}${path.insertText}${draft.slice(path.rangeEnd)}`;
+}
+function usePathCompletions(draft, channel) {
+    const controller = useRequiredService(CONTROLLER);
+    const [found, setFound] = useState([]);
+    const asking = /(?:^|\s)@\S*$/.test(draft) ? draft : '';
+    useEffect(() => {
+        if (asking === '' || !channel) {
+            setFound([]);
+            return;
+        }
+        let mine = true;
+        void controller.completions(channel, asking)
+            .then((items) => { if (mine)
+            setFound(items); })
+            .catch(() => { if (mine)
+            setFound([]); });
+        return () => { mine = false; };
+    }, [asking, channel]);
+    return asking === '' ? [] : found;
+}
+/**
+ * The terminal screen.
+ *
+ * Nothing is decided here: which terminals exist, which is open and what
+ * happens when a line is sent all live in `terminal.ts`, and this puts them on
+ * screen. Unmounting it therefore does not lose the shell, which is the
+ * reason for the split.
+ */
+export const TerminalScreen = defineComponent('TerminalScreen', () => {
+    const app = useApp();
+    const controller = useRequiredService(CONTROLLER);
+    useFocusScope({ id: 'chat.terminal' });
+    const rows = useStoreValue(TERMINALS, []) ?? [];
+    const open = useStoreValue(OPEN_TERMINAL, null) ?? null;
+    const state = useStoreValue(TERMINAL, null);
+    const [draft, setDraft] = useState('');
+    const size = useSize();
+    /*
+     * Tell the host how wide this is being drawn.
+     *
+     * `terminal-channel.md` has `terminal/resized` among the actions a client
+     * dispatches, and its reducer sets `cols` and `rows`. A host never told
+     * wraps at its own default - eighty columns on a terminal twice that,
+     * which looks like the shell being wrong rather than like nobody having
+     * said. Sent whenever the size or the open terminal changes; the
+     * controller drops a repeat, so a re-render for any other reason costs
+     * nothing.
+     */
+    useEffect(() => {
+        if (open === null)
+            return;
+        controller.terminals.resize(size.width, size.height);
+    }, [open, size.width, size.height]);
+    // Asked for on arrival, and only then: a host with no terminals is the
+    // ordinary case, and a list polled behind a screen nobody is looking at is
+    // a request per second for an answer nobody reads.
+    useEffect(() => {
+        void controller.terminals.refresh().then(() => {
+            if (app.store.get(OPEN_TERMINAL))
+                return;
+            const first = (app.store.get(TERMINALS) ?? [])[0];
+            if (first)
+                controller.terminals.read(first.resource);
+        });
+    }, []);
+    if (rows.length === 0 && open === null) {
+        return (_jsx(EmptyState, { title: "No terminals", message: "ctrl+p, then Open a terminal. The shell runs on the host, in a directory it serves.", flex: 1 }));
+    }
+    return (_jsx(TerminalView, { rows: rows, open: open, state: state ?? null, draft: draft, onDraft: setDraft, onSend: (line) => { controller.terminals.write(line); setDraft(''); }, onSelect: (uri) => { controller.terminals.read(uri); } }));
+});
+function useHarnessCommands() {
+    const controller = useRequiredService(CONTROLLER);
+    const [items, setItems] = useState([]);
+    useEffect(() => {
+        void controller.harnessCommands().then(setItems)
+            .catch((error) => controller.report(error));
+    }, []);
+    return items;
+}
+function useComposerOptions() {
+    const unicode = useCapabilities().unicode;
+    const controller = useRequiredService(CONTROLLER);
+    const open = useStoreValue(OPEN, null) ?? null;
+    const provider = useStoreValue(PROVIDER, 'claude') ?? 'claude';
+    const model = useStoreValue(MODEL, '') ?? '';
+    const modelConfig = useStoreValue(MODEL_CONFIG, {}) ?? {};
+    const settings = useStoreValue(SETTINGS, {}) ?? {};
+    const workspace = useStoreValue(WORKSPACE, '') ?? '';
+    const [agents, setAgents] = useState([]);
+    const [config, setConfig] = useState(null);
+    useEffect(() => {
+        void controller.agents().then(setAgents).catch((error) => controller.report(error));
+    }, []);
+    // Asking is also what registers a command per property, so the chips below
+    // have something to open and the palette has the same questions in it.
+    useEffect(() => {
+        void controller.settings().then(setConfig)
+            .catch((error) => controller.report(error));
+    }, [provider, open]);
+    const agent = agents.find((found) => found.provider === provider);
+    // A harness with no models is the ordinary answer for one nobody has signed
+    // into, so the chip says so rather than opening on an empty list. Until the
+    // catalogue has arrived there is no harness to say it about.
+    const models = agent ? agent.models : null;
+    return [
+        {
+            id: 'harness',
+            // A mark on every chip, and it is not decoration. The row truncates
+            // labels from the right as the terminal narrows, and a chip that is only
+            // a label truncates to nothing you can identify; one that leads with a
+            // mark still says which question it is at four cells wide.
+            icon: settingIcon(unicode, 'harness'),
+            label: agent?.displayName ?? provider,
+            // Fixed once the session exists: it is the process the conversation is
+            // running in.
+            ...(open ? {} : { commandId: 'compose.harness' }),
+        },
+        {
+            id: 'model',
+            icon: settingIcon(unicode, 'model'),
+            label: models?.find((found) => found.id === model)?.displayName
+                ?? (model || (models !== null && models.length === 0 ? 'no models' : 'default')),
+            ...(models !== null && models.length === 0 ? {} : { commandId: 'compose.model' }),
+        },
+        /*
+         * The chosen model's own questions.
+         *
+         * The protocol says a client presents a model's `configSchema` as a form
+         * and returns the answers in `ModelSelection.config`. These are that form:
+         * they sit beside the session's questions because a person reads one row,
+         * and they are answered separately because they go out on the message
+         * rather than at the session.
+         */
+        ...(models?.find((found) => found.id === model)?.options ?? [])
+            .filter((property) => property.values.length > 0)
+            .map((property) => {
+            // What the host said it opens with, until somebody chooses.
+            const value = modelConfig[property.key] ?? property.default;
+            const chosen = property.values.find((found) => found.value === value);
+            return {
+                id: `model.${property.key}`,
+                icon: (value !== undefined
+                    ? valueIcon(unicode, value, chosen?.label)
+                    : undefined)
+                    ?? settingIcon(unicode, property.key, property.title),
+                label: chosen?.label ?? value ?? property.title,
+                title: property.title,
+                commandId: modelCommand(property.key),
+            };
+        }),
+        ...(config?.properties ?? [])
+            .filter((property) => property.values.length > 0)
+            // A key the model also asks about is the model's to answer: the session
+            // key is the whole harness's default and the model's is what this
+            // message runs at, and drawing both put two controls on one row
+            // disagreeing about the same setting.
+            .filter((property) => !(models?.find((found) => found.id === model)?.options ?? [])
+            .some((one) => one.key === property.key))
+            .map((property) => {
+            const value = settings[property.key];
+            const chosen = property.values.find((found) => found.value === value);
+            return {
+                id: property.key,
+                // The value's own mark where it has one - which of five approval
+                // modes is in force is the thing worth reading from the row itself.
+                // The question's mark otherwise, so a branch chip is still a branch.
+                icon: (value !== undefined
+                    ? valueIcon(unicode, value, chosen?.label)
+                    : undefined)
+                    ?? settingIcon(unicode, property.key, property.title),
+                label: chosen?.label ?? value ?? property.title,
+                // The question, for anything showing these with room for the pair.
+                title: property.title,
+                // Shown but not asked where the host says it cannot be changed on a
+                // running session: offering it produces a refusal, not an edit.
+                ...(open && !property.sessionMutable ? {} : { commandId: settingCommand(property.key) }),
+            };
+        }),
+        {
+            id: 'workspace',
+            icon: settingIcon(unicode, 'workspace'),
+            label: workspaceName(workspace ? `file://${workspace}` : undefined),
+            ...(open ? {} : { commandId: 'compose.workspace' }),
+        },
+    ];
+}
+// -------------------------------------------------------------------- 2. chat
+/**
+ * What goes after a slash, from both places it can come from.
+ *
+ * The client's own commands are the palette's, so a slash is a second way into
+ * the same list rather than a list of its own. The session's are the skills
+ * and prompts the host contributed - filtered to the ones a person may invoke,
+ * because a skill can be marked as the agent's alone and offering one is
+ * offering something the host will refuse.
+ *
+ * Disabled customizations are left out entirely rather than shown greyed. A
+ * menu is a list of what can be done, and a row that cannot be chosen is a row
+ * that has to be read to find that out.
+ */
+/**
+ * A command's arguments, written the way they would be typed.
+ *
+ * Required in angle brackets and optional in square ones, which is how every
+ * usage line since man(1) has said the same thing.
+ *
+ * An argument with fixed choices is left out: it is asked for with a picker,
+ * so nothing is typed after the name and a mask saying otherwise would be
+ * wrong. A command whose arguments are all pickers has no mask at all.
+ */
+function mask(args) {
+    const typed = (args ?? []).filter((arg) => arg.choices === undefined);
+    if (typed.length === 0)
+        return undefined;
+    return typed.map((arg) => (arg.required ? `<${arg.name}>` : `[${arg.name}]`)).join(' ');
+}
+function slashCommands(app, contributed) {
+    const session = contributed
+        .filter((item) => (item.kind === 'skill' || item.kind === 'prompt')
+        && item.enabled
+        && item.userInvocable !== false)
+        .map((item) => ({
+        id: item.name,
+        kind: 'session',
+        title: item.name,
+        ...(item.description ? { description: item.description } : {}),
+        ...(item.from ? { from: item.from } : {}),
+    }));
+    const client = app.commands.list({ slot: 'palette', enabledOnly: true })
+        .map((command) => ({
+        id: command.id,
+        kind: 'client',
+        title: command.title,
+        ...(command.description ? { description: command.description } : {}),
+        ...(mask(command.args) ? { hint: mask(command.args) } : {}),
+    }));
+    return [...session, ...client];
+}
+const NO_TURNS = [];
+const NO_QUEUE = [];
+const NONE_EXPANDED = {};
+export const ChatScreen = defineComponent('ChatScreen', () => {
+    const app = useApp();
+    const controller = useRequiredService(CONTROLLER);
+    useFocusScope({ id: CHAT_SCOPE });
+    // The empties are shared rather than written out, and it matters: a
+    // fallback literal is a new object every render, so a path nothing has
+    // written yet reads as *changed* every time it is read. Everything
+    // derived from one then changes too, and the memos below never hold.
+    const turns = useStoreValue(TURNS, NO_TURNS) ?? NO_TURNS;
+    const input = useStoreValue(INPUT, null) ?? null;
+    const queued = useStoreValue(QUEUE, NO_QUEUE) ?? NO_QUEUE;
+    const draft = useStoreValue(DRAFT, '') ?? '';
+    const expanded = useStoreValue(EXPANDED, NONE_EXPANDED) ?? NONE_EXPANDED;
+    const history = useStoreValue(HISTORY, []) ?? [];
+    const [recall, setRecall] = useState(history.length);
+    // The cursor is state like everything else, and it lives in the screen's
+    // own scope - so it survives a trip to the changes list, which is
+    // `keepAlive`, and dies with the screen, which is what a scope is for.
+    const [cursor, setCursor] = useStore(CURSOR, 0);
+    // Subscribed, because `openSession` is a plain read. The caption carries
+    // the session's own state, and a state arriving from the host while the
+    // conversation is open changed the store and left this screen showing
+    // what it said when the session was opened - so it only caught up when
+    // leaving and coming back remounted it.
+    useStoreSubtree(SESSIONS);
+    const session = openSession(app.store);
+    const model = useStoreValue(MODEL, '') ?? '';
+    const present = useStoreValue(PRESENT, []) ?? [];
+    const chat = useStoreValue(CHAT_URI, null) ?? null;
+    const running = turns.some((turn) => turn.state === 'running');
+    /*
+     * Memoised, and the three below it with it, because of what the
+     * transcript does with them.
+     *
+     * A component whose props are all unchanged is not re-run, and neither is
+     * anything under it - so stable props here are what keep a keystroke in
+     * the composer from rebuilding every block of the conversation and
+     * reconciling the whole feed. Derived fresh they were new objects every
+     * time, which is a change as far as anything can tell, and a screen that
+     * re-renders for the draft dragged four hundred blocks along with it.
+     */
+    const blocks = useMemo(() => toBlocks(turns, queued), [turns, queued]);
+    /*
+     * Find, over the conversation on screen.
+     *
+     * The matches are block indices and the cursor is a block index, so
+     * moving between them is moving the cursor - the feed then scrolls to it
+     * and draws it selected, which is the same thing that happens when the
+     * arrow keys walk the transcript. There is no second notion of "where the
+     * search is".
+     *
+     * `at` is clamped rather than reset, so a match list that shrinks as more
+     * is typed keeps the reader near where they were instead of throwing them
+     * back to the top of the conversation on every keystroke.
+     */
+    const finding = useStoreValue(FINDING, false) ?? false;
+    const query = useStoreValue(FIND, '') ?? '';
+    const found = useMemo(() => findBlocks(blocks, query), [blocks, query]);
+    const at = Math.min(useStoreValue(FIND_AT, 0) ?? 0, Math.max(0, found.length - 1));
+    /*
+     * The keyboard goes to the box when it opens.
+     *
+     * Not from the command that opens it, and not from this effect directly:
+     * the field is a child, its focus id is registered by the child's own
+     * mount effect, and a parent's effect runs first - so both of those ask
+     * for an id that does not exist yet and silently focus nothing. A
+     * microtask is after the whole flush, which is when the field is there.
+     */
+    useEffect(() => {
+        if (!finding)
+            return;
+        queueMicrotask(() => app.focus.focus('chat.find'));
+    }, [finding]);
+    const options = useComposerOptions();
+    // Read here as well as on the panel, because the slash menu is the other
+    // place a skill is reached from and this is the screen it is reached on.
+    // The store is shared, so a session already looked at costs nothing.
+    const { items: skills } = useCustomizations();
+    const paths = usePathCompletions(draft, useStoreValue(CHAT_URI, null) ?? null);
+    // Which conversation is being read, when there is more than one to read.
+    const chats = useStoreValue(CHATS, []) ?? [];
+    const reading = chats.findIndex((entry) => entry.resource === chat);
+    // The same answers the chips are showing, with the question beside each -
+    // read off one source rather than asked for a second time.
+    const settingRows = options
+        .filter((option) => option.title !== undefined)
+        .map((option) => ({ label: option.title, value: option.label }));
+    // What the caption is made of, as one value that can be compared. The
+    // parts are rebuilt every render and the caption they describe is not.
+    const headSignature = JSON.stringify([session, model, chat, settingRows, chats.length, reading]);
+    const head = useMemo(() => (_jsxs(Column, { padding: [0, 0, 1, 0], children: [session ? (_jsx(ChatSessionHead, { session: session, present: present, ...(model ? { model } : {}), ...(chat ? { chat } : {}), settings: chats.length > 1
+                    // Where a session holds several, which one is being read is the
+                    // first thing somebody needs from the header - a transcript
+                    // that changed under the same title is otherwise unexplained.
+                    ? [{ label: 'Chat', value: `${String(reading + 1)} of ${String(chats.length)}` }, ...settingRows]
+                    : settingRows })) : null, _jsx(Divider, { dim: true })] })), [headSignature]);
+    const onToggle = useMemo(() => (id) => {
+        // A queued message is not something to expand. Enter on one takes it
+        // back, which is the only thing there is to do to a message that has
+        // not been sent yet.
+        const waiting = id.startsWith('queued:') ? id.slice('queued:'.length) : null;
+        if (waiting !== null) {
+            controller.unqueue(waiting);
+            return;
+        }
+        app.store.set(EXPANDED, { ...expanded, [id]: !expanded[id] });
+    }, [expanded, controller, app]);
+    /*
+     * Reaching the top of the transcript asks for what is above it.
+     *
+     * The cursor arriving at the first block is the only "scrolled to the
+     * beginning" signal there is here - `Feed` owns the viewport and reports
+     * the selection, not the offset - and it is a good enough one: a person
+     * at the oldest turn on screen is a person looking for the one before it.
+     *
+     * `busy` keeps a second request from going out while the first is in
+     * flight, and `done` stops asking once the host has said there is nothing
+     * behind what is loaded. Both are per open session, which is what the
+     * dependency is for.
+     */
+    const uri = session?.resource ?? null;
+    const paging = useMemo(() => ({ busy: false, done: false }), [uri]);
+    // `useStore` hands back a fresh setter every render, which is a changed
+    // prop every render.
+    const onCursor = useMemo(() => (next) => {
+        setCursor(next);
+        if (next !== 0 || uri === null || paging.busy || paging.done)
+            return;
+        paging.busy = true;
+        void controller.loadOlderTurns(uri)
+            .then((more) => { paging.done = !more; })
+            .catch(() => { paging.done = true; })
+            .finally(() => { paging.busy = false; });
+    }, [uri, paging, controller]);
+    if (!session) {
+        return _jsx(EmptyState, { title: "No session open", message: "Open one from the catalogue.", flex: 1 });
+    }
+    return (_jsxs(Column, { flex: 1, gap: 1, children: [finding ? (
+            /*
+             * The find box, in the top right corner.
+             *
+             * A row of its own above the transcript rather than floating over
+             * it: a box drawn on top of the conversation hides the lines it is
+             * there to help you read, and the one row it costs is only spent
+             * while a search is open.
+             */
+            _jsxs(Row, { justify: "end", gap: 1, children: [_jsx(SearchBox, { value: query, placeholder: "find in this conversation", width: 40, focusId: "chat.find", onChange: (next) => {
+                            app.store.set(FIND, next);
+                            // A new term is a new search, so it starts at the first match
+                            // rather than at whatever number the last one had reached.
+                            app.store.set(FIND_AT, 0);
+                            const hits = findBlocks(blocks, next);
+                            if (hits.length > 0)
+                                setCursor(hits[0]);
+                        }, 
+                        // Enter is the next one, which is what every find box in a
+                        // terminal does. Up, down and escape are keybindings rather
+                        // than handlers here: the field does not claim them, so they
+                        // reach the bindings, and that is where every other key in this
+                        // application is declared.
+                        onSubmit: () => { void app.execute('chat.find.next'); } }), _jsx("text", { content: query.trim() === '' ? '' : found.length === 0
+                            ? 'no match'
+                            : `${String(at + 1)} of ${String(found.length)}`, fg: query.trim() !== '' && found.length === 0 ? 'danger' : 'accent' })] })) : null, _jsx(ChatTranscript
+            // The top of the conversation, inside it. See `head`.
+            , { 
+                // The top of the conversation, inside it. See `head`.
+                head: head, flex: 1, blocks: blocks, expanded: expanded, ...(finding && query.trim() !== '' ? { match: query.trim(), pinCursor: true } : {}), cursor: cursor ?? 0, onCursor: onCursor, onToggle: onToggle }), input ? (_jsx(ChatHitl, { input: input, onApprove: (option) => controller.approve(option), onDeny: () => controller.deny(), onAnswer: (answers, accepted) => controller.answer(answers, accepted), 
+                // The block takes keys globally while it is up, escape included -
+                // which is right for `a` and `d` and wrong for the one key that is
+                // how you leave. Sent back to the transcript unconditionally it
+                // read as "escape does nothing", and a session blocked on a
+                // confirmation could not be left without answering it. So escape
+                // leaves whatever it is in: the find box, then the block, then
+                // the screen. The find box is named here because a global handler
+                // runs before any keybinding, so the box's own escape never gets
+                // the key while a session is waiting on an answer.
+                onEscape: () => {
+                    if (finding) {
+                        void app.execute('chat.find.close');
+                        return;
+                    }
+                    if (app.focus.focused() === 'chat.transcript')
+                        app.screens.pop();
+                    else
+                        app.focus.focus('chat.transcript');
+                } })) : null, _jsx(ChatInputStatus, {}), _jsx(ChatComposer, { value: draft, running: running, queued: queued.length, options: options, onOption: (option, anchorId) => {
+                    if (option.commandId)
+                        openPicker(app, { commandId: option.commandId, anchorId });
+                }, commands: slashCommands(app, skills), paths: paths, onPath: (path) => {
+                    const next = splice(draft, path);
+                    app.store.set(DRAFT, next);
+                    controller.draft(next);
+                }, onChange: (value) => { app.store.set(DRAFT, value); controller.draft(value); }, onCommand: (picked) => {
+                    /*
+                     * A skill is typed, not run.
+                     *
+                     * There is no "invoke this skill" in the protocol: a host
+                     * contributes skills as customizations and a person invokes one by
+                     * sending its name as the message, exactly as they would have
+                     * typed it. So choosing one completes the draft rather than
+                     * dispatching anything - and leaves the trailing space, because
+                     * most of them take an argument and the alternative is a person
+                     * pressing enter on a bare `/review` to find out.
+                     */
+                    if (picked.kind === 'session') {
+                        app.store.set(DRAFT, `/${picked.id} `);
+                        app.focus.focus('chat.composer');
+                        return;
+                    }
+                    app.store.set(DRAFT, '');
+                    const command = app.commands.get(picked.id);
+                    // A command that still has a question to ask cannot just be run -
+                    // `execute` refuses a missing required argument, loudly - so it
+                    // gets its picker, the same one the chip above would have opened.
+                    if (command && argumentOf(command)) {
+                        openPicker(app, { commandId: picked.id, anchorId: 'chat.composer' });
+                        return;
+                    }
+                    void app.execute(picked.id, undefined, 'palette');
+                }, onSubmit: (value) => { controller.send(value); setRecall(history.length + 1); }, onCancel: () => app.focus.focus('chat.transcript'), onHistory: (direction) => {
+                    // Up at the top of an empty draft is the last thing you sent. It
+                    // is the fastest correction there is, and every other client has it.
+                    const next = Math.max(0, Math.min(history.length, recall + direction));
+                    setRecall(next);
+                    app.store.set(DRAFT, history[next] ?? '');
+                }, onLeave: () => app.focus.focus('chat.transcript'), autoFocus: !input })] }));
+});
+// --------------------------------------------------------------- 3. new session
+export const NewSessionScreen = defineComponent('NewSessionScreen', () => {
+    const app = useApp();
+    const controller = useRequiredService(CONTROLLER);
+    const theme = useTheme();
+    const draft = useStoreValue(DRAFT, '') ?? '';
+    const history = useStoreValue(HISTORY, []) ?? [];
+    const [recall, setRecall] = useState(history.length);
+    const options = useComposerOptions();
+    const harnessSkills = useHarnessCommands();
+    const newPaths = usePathCompletions(draft, 'ahp-root://');
+    return (_jsxs(Column, { flex: 1, gap: 1, children: [_jsxs(Column, { flex: 1, justify: "center", align: "center", gap: 0, children: [_jsx("text", { content: "A new session", fg: "muted" }), _jsx("text", { content: "The first message is what starts it.", fg: "subtle" }), _jsx("text", { content: `${theme.glyphs.chevronLeft} esc for the sessions you already have`, fg: "subtle" })] }), _jsx(ChatComposer, { value: draft, options: options, onOption: (option, anchorId) => {
+                    if (option.commandId)
+                        openPicker(app, { commandId: option.commandId, anchorId });
+                }, 
+                // The harness's as well as ours. A skill chosen here completes the
+                // draft to `/name `, and the message that creates the session is
+                // then the one that invokes it - which is where somebody most often
+                // wants a skill, and the only place it used to be unreachable.
+                commands: slashCommands(app, harnessSkills), 
+                // The root channel, since there is no session yet: a host answers
+                // for its own default directory, which is where this one would go.
+                paths: newPaths, onPath: (path) => app.store.set(DRAFT, splice(draft, path)), onChange: (value) => app.store.set(DRAFT, value), 
+                // Chosen here rather than sent. Without this the menu listed the
+                // client's own commands and pressing enter on one created a session
+                // whose first message was the literal text `/theme`.
+                onCommand: (picked) => {
+                    // A skill is typed, not run - the same as on an open session.
+                    // There is no "invoke this skill" in the protocol: a person
+                    // invokes one by sending its name, and here that name is also
+                    // what creates the session.
+                    if (picked.kind === 'session') {
+                        app.store.set(DRAFT, `/${picked.id} `);
+                        app.focus.focus('chat.composer');
+                        return;
+                    }
+                    app.store.set(DRAFT, '');
+                    const command = app.commands.get(picked.id);
+                    if (command && argumentOf(command)) {
+                        openPicker(app, { commandId: picked.id, anchorId: 'chat.composer' });
+                        return;
+                    }
+                    void app.execute(picked.id, undefined, 'palette');
+                }, 
+                // The message *is* the session. Nothing is created until there is
+                // something to say, which is why there is no Start button to leave
+                // pressed by mistake - and why the provider being lazy costs nothing:
+                // it does not attach until there is a turn to run, and this is one.
+                onSubmit: (value) => {
+                    const first = value.trim();
+                    if (!first)
+                        return;
+                    setRecall(history.length + 1);
+                    const workspace = app.store.get(WORKSPACE) ?? '';
+                    void controller.create({
+                        provider: app.store.get(PROVIDER) ?? 'claude',
+                        ...(workspace ? { workingDirectory: workspace } : {}),
+                        first,
+                    })
+                        .then(() => app.screens.push('chat'))
+                        // Stay here. A host that refused to create the session has left
+                        // nothing to navigate to, and the draft is still in the field.
+                        .catch((error) => controller.report(error));
+                }, onCancel: () => app.execute('go.sessions'), 
+                // Left off the front of the field, twice over, is the same thought as
+                // escape: out of here, back to what already exists.
+                onLeave: () => app.execute('go.sessions'), onHistory: (direction) => {
+                    const next = Math.max(0, Math.min(history.length, recall + direction));
+                    setRecall(next);
+                    app.store.set(DRAFT, history[next] ?? '');
+                }, autoFocus: true })] }));
+});
+// ----------------------------------------------------------------- 4. changes
+/**
+ * The changeset, and one file out of it.
+ *
+ * Two states of one screen rather than two screens, because opening a file is
+ * not somewhere you navigate to: escape goes back to the list and then out,
+ * the way it does everywhere else here. Which file is in the store so that
+ * leaving for the conversation and coming back arrives where it was.
+ *
+ * The content is fetched when a row opens and never before. A changeset is a
+ * list of names the host sends up front and a pile of bytes it does not, and
+ * a screen that read both together would download a session's whole diff to
+ * draw a list of filenames.
+ */
+export const ChangesScreen = defineComponent('ChangesScreen', () => {
+    const app = useApp();
+    const controller = useRequiredService(CONTROLLER);
+    const changes = useStoreValue(CHANGES, { status: 'complete', files: [] })
+        ?? { status: 'complete', files: [] };
+    const open = useStoreValue(OPEN_FILE, null) ?? null;
+    const session = openSession(app.store);
+    const file = changes.files.find((found) => found.uri === open) ?? null;
+    // Letters mean things here, so the scope is on while this screen is.
+    useFocusScope({ id: CHANGES_SCOPE });
+    /*
+     * Which changesets this session offers, and which of them is on screen.
+     *
+     * Asked of the host rather than assumed: a session advertises what it
+     * advertises, and a client that offered the four the protocol names would
+     * have three that are refused. Nothing is chosen here at first - an empty
+     * `CHANGE_AT` means whichever the host would pick, which is what this
+     * screen did before there was any way to ask for another.
+     */
+    const scopes = useStoreValue(CHANGE_SCOPES, []) ?? [];
+    const at = useStoreValue(CHANGE_AT, '') ?? '';
+    const uri = session?.resource ?? '';
+    useEffect(() => {
+        if (!uri)
+            return;
+        void controller.changesets(uri)
+            .then((found) => {
+            app.store.set(CHANGE_SCOPES, found);
+            /*
+             * Settle on one, rather than leaving "whichever the host would pick".
+             *
+             * The screen can draw the default without naming it, but nothing
+             * else can act on it: ticking a file off needs the changeset's own
+             * URI, and "the one you would have chosen" is not a URI. So the
+             * first reachable scope becomes the chosen one the moment the list
+             * arrives, and every key after that has something concrete to work
+             * with.
+             */
+            if ((app.store.get(CHANGE_AT) ?? '') !== '')
+                return;
+            const first = found.find((scope) => scope.variables.length === 0);
+            if (first)
+                app.store.set(CHANGE_AT, first.uriTemplate);
+        })
+            .catch((error) => controller.report(error));
+    }, [uri]);
+    // The chosen one, re-read when the choice moves. The default arrives on
+    // the session channel already, so only a named scope is fetched here.
+    useEffect(() => {
+        if (!uri || !at)
+            return;
+        void controller.changesAt(uri, at)
+            .then((found) => app.store.set(CHANGES, found))
+            .catch((error) => controller.report(error));
+    }, [uri, at]);
+    const chosen = scopes.find((scope) => scope.uriTemplate === at)
+        ?? scopes.find((scope) => scope.variables.length === 0);
+    /*
+     * Which row the cursor is on, kept in step with the list.
+     *
+     * `onSelect` fires when the selection *moves*, and the list arrives with
+     * its first row already selected - so without this, a key acting on "this
+     * file" does nothing until somebody has pressed an arrow, which reads as a
+     * key that works the second time.
+     */
+    const row = useStoreValue(CHANGE_ROW, '') ?? '';
+    useEffect(() => {
+        if (changes.files.some((one) => one.uri === row))
+            return;
+        app.store.set(CHANGE_ROW, changes.files[0]?.uri ?? '');
+    }, [changes.files.map((one) => one.uri).join('\u0000')]);
+    const [loaded, setLoaded] = useState(null);
+    const [failure, setFailure] = useState(null);
+    useEffect(() => {
+        if (!file) {
+            setLoaded(null);
+            setFailure(null);
+            return;
+        }
+        // Both sides at once. They are two fetches and one answer, and rendering
+        // half a diff while the other half is in flight makes every line of a
+        // file look added for as long as the second request takes.
+        let live = true;
+        setLoaded(null);
+        setFailure(null);
+        const side = async (ref) => (ref ? controller.content(ref) : { text: '' });
+        void Promise.all([side(file.content?.before), side(file.content?.after)])
+            .then(([before, after]) => {
+            if (!live)
+                return;
+            setLoaded({
+                uri: file.uri,
+                before: before.text,
+                after: after.text,
+                ...(before.binary ?? after.binary
+                    ? { binary: (before.binary ?? after.binary) }
+                    : {}),
+            });
+        })
+            .catch((error) => {
+            if (!live)
+                return;
+            // The host's own words. A blank pane over a ref that expired is the
+            // client looking broken for something the host said plainly.
+            setFailure(error instanceof Error ? error.message : String(error));
+        });
+        return () => { live = false; };
+    }, [file?.uri ?? '']);
+    const title = `Changes ${session ? `- ${session.title}` : ''}`;
+    if (file) {
+        const kind = !file.before ? 'new' : !file.after ? 'deleted' : 'edited';
+        return (_jsx(Panel, { title: title, flex: 1, children: failure !== null ? (_jsx(EmptyState, { title: "The host would not send it", message: failure, flex: 1 })) : !loaded ? (_jsx(EmptyState, { title: "Reading the file", flex: 1 })) : (_jsx(FileDiff, { path: file.uri.replace(/^file:\/\//, ''), kind: kind, diff: diffLines(loaded.before, loaded.after), ...(loaded.binary ? { binary: loaded.binary } : {}), flex: 1 })) }));
+    }
+    return (_jsxs(Panel, { title: title, flex: 1, children: [scopes.length > 1 ? (_jsx(Row, { gap: 2, children: scopes.map((scope) => {
+                    const here = scope.uriTemplate === (chosen?.uriTemplate ?? '');
+                    // A template with variables left in it is a question about a
+                    // turn, and there is nothing on this screen to answer it from.
+                    // Drawn anyway, dimmed: a scope the host offers and this screen
+                    // cannot reach is worth saying, and silently dropping it is how
+                    // somebody concludes their host does not have per-turn diffs.
+                    const reachable = scope.variables.length === 0;
+                    return (_jsx("text", { content: reachable ? scope.label : `${scope.label} (needs a turn)`, ...(here ? { fg: 'accent', bold: true } : {}), ...(reachable ? {} : { fg: 'muted' }) }, scope.uriTemplate));
+                }) })) : null, (changes.operations ?? []).length > 0 ? (_jsx(Row, { gap: 2, children: (changes.operations ?? []).map((operation) => (_jsx("text", { content: operation.status === 'idle'
+                        ? operation.label
+                        : `${operation.label} (${operation.status})`, fg: operation.status === 'error' ? 'danger' : operation.status === 'idle' ? 'muted' : 'warning' }, operation.id))) })) : null, _jsx(ChangesList, { changes: changes, reviewable: chosen?.reviewable === true, onOpen: (found) => app.store.set(OPEN_FILE, found), onSelect: (found) => app.store.set(CHANGE_ROW, found), autoFocus: true, flex: 1 })] }));
+});
+// ---------------------------------------------------- 6d. a new automation
+/**
+ * Writing one down.
+ *
+ * The half that was missing: this client could list, run and switch off an
+ * automation and could not make one, so the only way to have any was to write
+ * the daemon's own file by hand and restart it. That is not a workflow, it is
+ * what a person does when a client has a hole in it.
+ *
+ * The expression is checked here and *understood* on the host. `scheduleProblem`
+ * reads the protocol's grammar and stops there; when it next comes round is the
+ * host's answer, and it arrives as `nextRunAt` on the row this screen leaves
+ * behind. So the confirmation that a schedule is real is the list saying when it
+ * will fire, not this form saying it looks right.
+ *
+ * Manual-only is a real choice and not an empty box. The protocol says an
+ * automation with no triggers is one nothing fires, so leaving the schedule
+ * blank writes a definition with an empty trigger list rather than a broken one.
+ */
+export const NewAutomationScreen = defineComponent('NewAutomationScreen', () => {
+    const app = useApp();
+    const controller = useRequiredService(CONTROLLER);
+    const session = openSession(app.store);
+    const [failure, setFailure] = useState(null);
+    const form = useForm({
+        initialValues: {
+            title: '',
+            message: '',
+            // Where the open session is working, when there is one. It is the only
+            // directory this client can name without having listed something.
+            directory: (session?.workingDirectories[0] ?? '').replace(/^file:\/\//, ''),
+            expression: '',
+            // The machine's own, because a schedule written without thinking about
+            // the zone means the one the person writing it is in.
+            timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC',
+        },
+        validate: (values) => {
+            const errors = {};
+            if (values.title.trim() === '')
+                errors.title = 'An automation needs a name to be found by';
+            // The first message is what the automation is *for*: a session created
+            // and never spoken to does nothing at all.
+            if (values.message.trim() === '')
+                errors.message = 'This is what it will say, so it cannot be empty';
+            // Blank is manual-only, which is a choice. Anything else has to parse.
+            if (values.expression.trim() !== '') {
+                const problem = scheduleProblem(values.expression);
+                if (problem !== undefined)
+                    errors.expression = problem;
+                else if (!zoneIsKnownHere(values.timeZone)) {
+                    errors.timeZone = `This machine does not know ${values.timeZone}`;
+                }
+            }
+            return errors;
+        },
+        onSubmit: async (values) => {
+            const scheduled = values.expression.trim() !== '';
+            try {
+                await controller.createAutomation({
+                    title: values.title.trim(),
+                    enabled: true,
+                    message: { text: values.message.trim() },
+                    session: {
+                        ...(session?.provider ? { provider: session.provider } : {}),
+                        ...(values.directory.trim() !== ''
+                            ? { workingDirectories: [`file://${values.directory.trim()}`] }
+                            : {}),
+                    },
+                    // An empty list, not an absent key: the protocol says an empty
+                    // trigger list is what manual-only means, and a definition with no
+                    // `triggers` at all is one a host has to guess about.
+                    triggers: scheduled
+                        ? [{
+                                id: 't1',
+                                kind: 'schedule',
+                                schedule: { expression: values.expression.trim(), timeZone: values.timeZone.trim() },
+                            }]
+                        : [],
+                });
+                app.screens.pop();
+            }
+            catch (error) {
+                setFailure(error instanceof Error ? error.message : String(error));
+            }
+        },
+    });
+    return (_jsx(Panel, { title: "A new automation", flex: 1, children: _jsx(Form, { form: form, flex: 1, children: _jsxs(Column, { gap: 0, flex: 1, children: [_jsxs(Row, { gap: 1, children: [_jsx(Field, { name: "title", label: "Name", labelWidth: 10, required: true, flex: 2, children: _jsx(TextInput, { value: form.values.title, autoFocus: true, placeholder: "Nightly framework build", onChange: (value) => { form.setValue('title', value); form.touch('title'); } }) }), _jsx(Field, { name: "directory", label: "in", labelWidth: 3, flex: 2, children: _jsx(TextInput, { value: form.values.directory, placeholder: "the host's default directory", onChange: (value) => { form.setValue('directory', value); form.touch('directory'); } }) })] }), _jsx(Field, { name: "message", label: "Says", labelWidth: 10, required: true, children: _jsx(TextInput, { value: form.values.message, placeholder: "review what changed today", onChange: (value) => { form.setValue('message', value); form.touch('message'); } }) }), _jsx(Divider, {}), _jsx(Field, { name: "preset", label: "Runs", labelWidth: 10, children: _jsx(Select, { options: [
+                                ...PRESETS.map((one) => ({ value: one.id, label: one.label })),
+                                // Only reachable by typing. Offering it as a choice would be
+                                // offering to clear the field somebody just filled in.
+                                ...(presetFor(form.values.expression) === undefined
+                                    ? [{ value: 'custom', label: 'Something else, written below' }]
+                                    : []),
+                            ], value: presetFor(form.values.expression)?.id ?? 'custom', mode: "floating", onChange: (value) => {
+                                const chosen = PRESETS.find((one) => one.id === value);
+                                if (!chosen)
+                                    return;
+                                form.setValue('expression', chosen.expression);
+                                form.touch('expression');
+                            } }) }), _jsxs(Row, { gap: 1, children: [_jsx(Field, { name: "expression", label: "Schedule", labelWidth: 10, hint: "minute hour day month weekday", flex: 2, children: _jsx(TextInput, { value: form.values.expression, placeholder: "0 9 * * 1-5", onChange: (value) => { form.setValue('expression', value); form.touch('expression'); } }) }), _jsx(Field, { name: "timeZone", label: "Zone", labelWidth: 5, flex: 1, children: _jsx(TextInput, { value: form.values.timeZone, placeholder: "UTC", onChange: (value) => { form.setValue('timeZone', value); form.touch('timeZone'); } }) })] }), _jsx("text", { content: form.values.expression.trim() === ''
+                            ? 'No schedule: it runs when somebody presses Run.'
+                            : presetFor(form.values.expression)
+                                ? `${presetFor(form.values.expression)?.label}. The host works out the next one.`
+                                : 'The host works out when this comes round, and the list will say.', fg: "subtle" }), failure !== null ? _jsx("text", { content: failure, fg: "danger", wrap: "word" }) : null, _jsx(FormActions, { submitLabel: "Create", cancelLabel: "Cancel", onCancel: () => app.screens.pop() })] }) }) }));
+});
+// -------------------------------------------------------- 6c. the automations
+/**
+ * What the host does without being asked.
+ *
+ * The catalogue answers "what has been said"; this answers "what will happen".
+ * They are both the host's and only one of them was drawn, so a session that
+ * appeared at nine this morning was a session with no account of itself - which
+ * is what protocol 0.9.0's `origin` is for, and it is read on the catalogue
+ * rather than here.
+ *
+ * Read whole on every change rather than patched. The channel says an
+ * automation moved and the list is a dozen rows; a client that reduced its own
+ * copy would be a second answer to what the host holds, for no gain at this
+ * size.
+ */
+export const AutomationsScreen = defineComponent('AutomationsScreen', () => {
+    const app = useApp();
+    const controller = useRequiredService(CONTROLLER);
+    useFocusScope({ id: AUTOMATIONS_SCOPE });
+    const automations = useStoreValue(AUTOMATIONS, []) ?? [];
+    const [failure, setFailure] = useState(null);
+    const [loading, setLoading] = useState(true);
+    useEffect(() => {
+        let live = true;
+        const read = () => {
+            void controller.automations()
+                .then((found) => {
+                if (!live)
+                    return;
+                app.store.set(AUTOMATIONS, found);
+                setFailure(null);
+                setLoading(false);
+            })
+                .catch((error) => {
+                if (!live)
+                    return;
+                setLoading(false);
+                // The host's own words. "Serves no automations" and "the daemon
+                // has gone" want opposite things from a person.
+                setFailure(error instanceof Error ? error.message : String(error));
+            });
+        };
+        read();
+        // The change worth hearing about is the one nobody made.
+        const watch = controller.onAutomations(() => read());
+        return () => { live = false; watch.close(); };
+    }, []);
+    if (failure !== null) {
+        return (_jsx(Panel, { title: "Automations", flex: 1, children: _jsx(EmptyState, { title: "Nothing to schedule here", message: failure, flex: 1 }) }));
+    }
+    if (loading && automations.length === 0) {
+        return (_jsx(Panel, { title: "Automations", flex: 1, children: _jsx(EmptyState, { title: "Asking the host", message: "Reading what it holds.", flex: 1 }) }));
+    }
+    return (_jsx(Panel, { title: "Automations", flex: 1, children: _jsx(AutomationList, { automations: automations, focusId: "chat.automations", autoFocus: true, flex: 1, onSelect: (uri) => app.store.set(AUTOMATION_ROW, uri), 
+            // Enter runs it, which is the verb this screen is for. The others
+            // are keys, and all three are named in the hints.
+            onOpen: (uri) => { app.store.set(AUTOMATION_ROW, uri); void app.execute('automation.run'); } }) }));
+});
+// ------------------------------------------------------------- 6b. the files
+/**
+ * The host's filesystem, browsed.
+ *
+ * `resourceList` and `resourceRead` were on the connection and behind
+ * `ahpc resource`, and the only place a host's files were *drawn* was the `@`
+ * completion in the composer - so a host that serves a project made people
+ * type paths they could not see.
+ *
+ * One directory at a time rather than a tree: `resourceList` answers about one
+ * directory, and an expanding tree would be a request per node with nothing on
+ * screen meanwhile. Opening a file reads it and shows it; nothing here writes,
+ * though the host would now allow it - see the roadmap.
+ */
+export const FilesScreen = defineComponent('FilesScreen', () => {
+    const app = useApp();
+    const controller = useRequiredService(CONTROLLER);
+    const session = openSession(app.store);
+    /*
+     * The session's own directory, until somebody moves.
+     *
+     * The only directory a client can name without having listed something
+     * first: everything else it knows about the host's filesystem it learned
+     * from an answer.
+     */
+    const root = session?.workingDirectories[0] ?? '';
+    const at = (useStoreValue(FILES_AT, '') ?? '') || root;
+    const entries = useStoreValue(FILES_ENTRIES, []) ?? [];
+    const open = useStoreValue(FILES_OPEN, '') ?? '';
+    const [loading, setLoading] = useState(false);
+    const [failure, setFailure] = useState(null);
+    const [body, setBody] = useState(null);
+    useEffect(() => {
+        if (!at)
+            return;
+        let live = true;
+        const read = () => {
+            setLoading(true);
+            setFailure(null);
+            void controller.files(at)
+                .then((found) => { if (live) {
+                app.store.set(FILES_ENTRIES, found);
+                setLoading(false);
+            } })
+                .catch((error) => {
+                if (!live)
+                    return;
+                setLoading(false);
+                setFailure(error instanceof Error ? error.message : String(error));
+            });
+        };
+        read();
+        /*
+         * And again when the host says it changed.
+         *
+         * A watch rather than a timer: the protocol has one, and a screen that
+         * re-read on a schedule was asking a question the host had already
+         * offered to answer. Released on leaving, which is the only way a watch
+         * closes - the specification has no dispose command and the receiver
+         * lets the watcher go when the last subscriber unsubscribes.
+         */
+        let watching;
+        void controller.watchFiles(at, () => { if (live)
+            read(); })
+            .then((held) => { if (live)
+            watching = held;
+        else
+            held.close(); });
+        return () => { live = false; watching?.close(); };
+    }, [at]);
+    useEffect(() => {
+        if (!open) {
+            setBody(null);
+            return;
+        }
+        let live = true;
+        setBody(null);
+        void controller.file(open)
+            .then((found) => {
+            if (!live)
+                return;
+            // The encoding is *reported* by the host rather than assumed here: a
+            // pane that rendered base64 as text would print a PNG to a terminal.
+            setBody(found.encoding === 'base64'
+                ? { uri: open, text: '', binary: true }
+                : { uri: open, text: found.data });
+        })
+            .catch((error) => {
+            if (live)
+                setFailure(error instanceof Error ? error.message : String(error));
+        });
+        return () => { live = false; };
+    }, [open]);
+    const title = `Files ${session ? `- ${session.title}` : ''}`;
+    if (open) {
+        const name = open.replace(/^file:\/\//, '');
+        return (_jsx(Panel, { title: title, flex: 1, children: body === null ? (_jsx(EmptyState, { title: "Reading the file", message: name, flex: 1 })) : body.binary === true ? (_jsx(EmptyState, { title: "Not text", message: `${name} came back as bytes, so there is nothing to show.`, flex: 1 })) : (_jsxs(Column, { flex: 1, children: [_jsx(Marquee, { content: name, truncate: "start", fg: "muted" }), _jsx("text", { content: body.text, flex: 1 })] })) }));
+    }
+    return (_jsx(Panel, { title: title, flex: 1, children: _jsx(FileList, { at: at, entries: entries, loading: loading, ...(failure !== null ? { failure } : {}), ...(at !== root && at.length > root.length
+                ? { onUp: () => app.store.set(FILES_AT, at.slice(0, at.lastIndexOf('/'))) }
+                : {}), onOpen: (entry) => {
+                if (entry.kind === 'directory')
+                    app.store.set(FILES_AT, entry.uri);
+                else
+                    app.store.set(FILES_OPEN, entry.uri);
+            }, autoFocus: true, flex: 1 }) }));
+});
+// ------------------------------------------------------------------ 7. skills
+/**
+ * What the host handed this session, in two panels.
+ *
+ * Two rather than one with a filter, because they answer different questions.
+ * "What can I ask for" is a list of skills and prompts and it is read while
+ * composing; "why is that tool missing" is a list of MCP servers and their
+ * states and it is read when something did not work. A single list sorted by
+ * kind makes each of those a scroll past the other.
+ */
+function useCustomizations() {
+    const app = useApp();
+    const controller = useRequiredService(CONTROLLER);
+    const uri = useStoreValue(OPEN, '') ?? '';
+    const items = useStoreValue(CUSTOMIZATIONS, null);
+    useEffect(() => {
+        if (!uri)
+            return;
+        void controller.customizations(uri)
+            .then((found) => app.store.set(CUSTOMIZATIONS, found))
+            .catch((error) => controller.report(error));
+    }, [uri]);
+    return { items: items ?? [], loading: items === null };
+}
+/** A panel over one slice of the list, with the switch on each row live. */
+function CustomizationPanel(props) {
+    const app = useApp();
+    const controller = useRequiredService(CONTROLLER);
+    const uri = useStoreValue(OPEN, '') ?? '';
+    const { items, loading } = useCustomizations();
+    const shown = items.filter(props.keep);
+    if (!uri) {
+        return _jsx(EmptyState, { title: "No session open", message: "Open one from the catalogue.", flex: 1 });
+    }
+    if (loading)
+        return _jsx(EmptyState, { title: "Asking the host", flex: 1 });
+    if (shown.length === 0) {
+        return _jsx(EmptyState, { title: props.empty.title, message: props.empty.message, flex: 1 });
+    }
+    return (_jsx(Panel, { title: props.title, flex: 1, children: _jsx(CustomizationList, { items: shown, autoFocus: true, focusId: "customizations.list", onToggle: (item) => {
+                controller.setCustomizationEnabled(uri, item.id, !item.enabled);
+                // Answered locally as well as dispatched. The host tells every
+                // client when it has decided, but the row under the cursor should
+                // not sit on the old answer while that arrives.
+                app.store.set(CUSTOMIZATIONS, items.map((found) => (found.id === item.id ? { ...found, enabled: !item.enabled }
+                    : found.from === item.name ? { ...found, enabled: !item.enabled }
+                        : found)));
+            }, flex: 1 }) }));
+}
+export const SkillsScreen = defineComponent('SkillsScreen', () => {
+    useFocusScope({ id: SKILLS_SCOPE });
+    return CustomizationPanel({
+        title: 'Skills and commands',
+        scopeId: SKILLS_SCOPE,
+        empty: {
+            title: 'Nothing contributed',
+            message: 'No plugin or directory gave this session a skill, a prompt or an agent.',
+        },
+        // The containers too, because turning a plugin off is how you turn off
+        // the six skills it brought, and a list of only the leaves offers six
+        // switches where the host has one.
+        keep: (item) => item.kind === 'skill' || item.kind === 'prompt' || item.kind === 'agent'
+            || item.kind === 'plugin' || item.kind === 'directory',
+    });
+});
+// --------------------------------------------------------------------- 8. mcp
+export const McpScreen = defineComponent('McpScreen', () => {
+    useFocusScope({ id: MCP_SCOPE });
+    return CustomizationPanel({
+        title: 'MCP servers',
+        scopeId: MCP_SCOPE,
+        empty: {
+            title: 'No MCP servers',
+            message: 'This session was given none, by the host or by a plugin.',
+        },
+        keep: (item) => item.kind === 'mcpServer',
+    });
+});
+// ---------------------------------------------------------------- 5. settings
+export const SettingsScreen = defineComponent('SettingsScreen', () => {
+    const controller = useRequiredService(CONTROLLER);
+    const uri = useStoreValue(OPEN, '');
+    const [config, setConfig] = useState(null);
+    useEffect(() => {
+        if (!uri)
+            return;
+        void controller.config(uri).then(setConfig)
+            .catch((error) => controller.report(error));
+    }, [uri ?? '']);
+    if (!config)
+        return _jsx(EmptyState, { title: "Reading the session", flex: 1 });
+    return (_jsx(Panel, { title: "Session settings", flex: 1, children: _jsxs(Column, { gap: 1, flex: 1, children: [config.properties.map((property) => (_jsxs(Column, { gap: 0, children: [_jsxs(Row, { gap: 1, children: [_jsx("text", { content: property.title, bold: true }), !property.sessionMutable ? _jsx("text", { content: "fixed for this session", fg: "subtle" }) : null] }), property.description ? _jsx("text", { content: property.description, fg: "muted", wrap: "word" }) : null, _jsx(RadioGroup, { options: property.values.map((value) => ({ value: value.value, label: value.label })), value: config.values[property.key] ?? '', disabled: !property.sessionMutable, onChange: (value) => {
+                                if (!uri)
+                                    return;
+                                controller.setConfig(uri, property.key, value);
+                                setConfig({ ...config, values: { ...config.values, [property.key]: value } });
+                            } })] }, property.key))), _jsx("text", { content: "", flex: 1 }), _jsx("text", { content: "Only what the schema marks changeable on a running session is offered. The action merges one key - sending the whole object writes back what another client just changed.", fg: "subtle", wrap: "word" })] }) }));
+});
+// ------------------------------------------------------------------- 6. hosts
+export const HostsScreen = defineComponent('HostsScreen', () => {
+    const app = useApp();
+    const host = useStoreValue(HOST);
+    const [agents, setAgents] = useState([]);
+    useEffect(() => {
+        void app.services.require(CONTROLLER).agents().then(setAgents);
+    }, []);
+    return (_jsx(Panel, { title: "Hosts", flex: 1, children: _jsxs(Column, { gap: 1, flex: 1, children: [_jsx(ConnectionBadge, { url: host?.url ?? '', state: host?.state ?? 'offline' }), _jsx("text", { content: "An agent host is a sessions server. Several clients watch and drive the same sessions; none of them owns the process running the agent.", fg: "muted", wrap: "word" }), host?.id === 'fake' ? (_jsx("text", { content: "This is the scripted host: five seeded sessions and an agent that answers four ways. Start with --host ws://\u2026 to drive a real one instead.", fg: "subtle", wrap: "word" })) : (_jsx("text", { content: "A live host. What it says is what it sent.", fg: "subtle", wrap: "word" })), agents.map((agent) => (_jsxs(Column, { gap: 0, children: [_jsxs(Row, { gap: 1, children: [_jsx("text", { content: agent.displayName, bold: true }), _jsx(Badge, { label: agent.provider, tone: "muted" })] }), agent.description ? _jsx("text", { content: agent.description, fg: "muted" }) : null, agent.models.map((model) => (_jsx("text", { content: `  ${model.displayName}  (${model.id})`, fg: "subtle" }, model.id)))] }, agent.provider)))] }) }));
+});