@voidlabs.gg/voidshift 0.0.0-stage → 0.4.1

package/dist/tui/screens/workflow-form.js

@@ -0,0 +1,375 @@
+// The workflow form: Name, Starts when (triggers), Steps, Project, Rounds.
+// Saves with `vsf agents workflow add|edit` (and `rename` first when the name
+// changed), each run as a child process.
+import React, { useReducer, useState } from 'react';
+import { Box, Text } from 'ink';
+import { useData } from "../data.js";
+import { useBackGuard, useEquivalent, useHints, useKeys, useScreen } from "../context.js";
+import { theme } from "../theme.js";
+import { Panel, Select, TextInput } from "../widgets.js";
+import { tilde } from "../format.js";
+import { matchWarnings, stepLabel, stepName, triggerText, warningText, sameTriggerLike } from "./workflows.js";
+const h = React.createElement;
+export function formReducer(s, a) {
+    switch (a.type) {
+        case 'name':
+            return { ...s, name: a.value };
+        case 'addTrigger':
+            return s.triggers.some((t) => sameTriggerLike(t, a.trigger)) ? s : { ...s, triggers: [...s.triggers, a.trigger] };
+        case 'removeTrigger':
+            return { ...s, triggers: s.triggers.filter((_, i) => i !== a.index) };
+        case 'addStep':
+            return s.steps.includes(a.id) ? s : { ...s, steps: [...s.steps, a.id] };
+        case 'removeStep':
+            return { ...s, steps: s.steps.filter((_, i) => i !== a.index) };
+        case 'moveStep': {
+            const to = a.index + a.dir;
+            if (to < 0 || to >= s.steps.length || a.index < 0 || a.index >= s.steps.length)
+                return s;
+            const steps = [...s.steps];
+            [steps[a.index], steps[to]] = [steps[to], steps[a.index]];
+            return { ...s, steps };
+        }
+        case 'project':
+            return { ...s, project: a.value };
+        case 'rounds':
+            return { ...s, rounds: Math.max(1, Math.min(9, Math.round(a.value))) };
+    }
+}
+export function initialForm(w, name, projects) {
+    if (w)
+        return { name, triggers: w.triggers.map((t) => ({ team: t.team, label: t.label })), steps: [...w.steps], project: w.project, rounds: w.maxRounds };
+    return { name: '', triggers: [], steps: [], project: projects.length === 1 ? projects[0] : '', rounds: 3 };
+}
+const FALLBACK_PRODUCERS = ['vs-plan', 'vs-dev'];
+// A producer (Plan or Dev) is what a failed check sends the work back to.
+export function hasProducer(steps, catalog) {
+    return steps.some((id) => {
+        const s = catalog?.steps.find((x) => x.id === id);
+        return s ? s.output === 'plan' || s.output === 'commits' : FALLBACK_PRODUCERS.includes(id);
+    });
+}
+export const effectiveRounds = (s, catalog) => (hasProducer(s.steps, catalog) ? s.rounds : 1);
+// Steps that can still be added, in catalog order.
+export function availableSteps(s, catalog) {
+    const all = catalog?.steps.map((x) => ({ id: x.id, label: x.label, hint: x.hint })) ?? [
+        { id: 'vs-plan', label: 'Plan', hint: '' },
+        { id: 'vs-plan-review', label: 'Plan review', hint: '' },
+        { id: 'vs-publish', label: 'Publish', hint: '' },
+        { id: 'vs-dev', label: 'Dev', hint: '' },
+        { id: 'vs-qa', label: 'QA', hint: '' },
+    ];
+    return all.filter((x) => !s.steps.includes(x.id));
+}
+// "when ENG + vs-plan: Dev → QA in tether-relay, 3 rounds"
+export function summaryLine(s, catalog) {
+    const when = s.triggers.length ? s.triggers.map(triggerText).join(', ') : '(no trigger yet)';
+    const steps = s.steps.length ? s.steps.map((id) => stepLabel(catalog, id)).join(' → ') : '(no steps yet)';
+    const project = s.project || '(no project yet)';
+    const n = effectiveRounds(s, catalog);
+    return `when ${when}: ${steps} in ${project}, ${n} ${n === 1 ? 'round' : 'rounds'}`;
+}
+export function formProblems(s, isNew, origName, existingNames, projectNames) {
+    const out = [];
+    const name = s.name.trim();
+    if (!name)
+        out.push('Give the workflow a name.');
+    else if (/\s/.test(name))
+        out.push('The name cannot have spaces.');
+    else if ((isNew || name !== origName) && existingNames.includes(name))
+        out.push(`A workflow named ${name} already exists.`);
+    if (!s.triggers.length)
+        out.push('Add at least one trigger (press a on Starts when).');
+    if (!s.steps.length)
+        out.push('Add at least one step (press + on Steps).');
+    if (!projectNames.length)
+        out.push('There are no projects yet. Add one on the Projects tab first.');
+    else if (!s.project || !projectNames.includes(s.project))
+        out.push('Choose a project.');
+    return out;
+}
+// The command a save runs (after `rename`, when the name changed).
+export function saveArgs(s, isNew, catalog) {
+    return [
+        'agents',
+        'workflow',
+        isNew ? 'add' : 'edit',
+        s.name.trim(),
+        ...s.triggers.flatMap((t) => ['--trigger', `${t.team}:${t.label}`]),
+        '--steps',
+        s.steps.map((id) => stepName(catalog, id)).join(','),
+        '--project',
+        s.project,
+        '--rounds',
+        String(effectiveRounds(s, catalog)),
+    ];
+}
+export const renameArgs = (from, to) => ['agents', 'workflow', 'rename', from, to];
+// A trigger from the two text fields, or a complaint.
+export function makeTrigger(team, label) {
+    const t = team.trim().toUpperCase();
+    const l = label.trim();
+    if (!t)
+        return { error: 'Give the Linear team, like ENG.' };
+    if (t.includes(':') || /\s/.test(t))
+        return { error: 'The team is a short key like ENG.' };
+    if (!l)
+        return { error: 'Give the label, like vs-plan.' };
+    return { trigger: { team: t, label: l } };
+}
+// Warnings for triggers this workflow shares with another. In place when
+// editing, last in order when new.
+export function sharedTriggerWarnings(workflows, s, origName) {
+    const me = { name: s.name.trim() || 'this workflow', triggers: s.triggers };
+    const others = workflows.map((w) => ({ name: w.name, triggers: w.triggers }));
+    const at = origName === null ? -1 : others.findIndex((w) => w.name === origName);
+    const merged = at >= 0 ? others.map((w, i) => (i === at ? me : w)) : [...others, me];
+    return matchWarnings(merged)
+        .filter((w) => w.loser === me.name || w.winner === me.name)
+        .map(warningText);
+}
+export function sectionsFor(s, catalog) {
+    return hasProducer(s.steps, catalog) ? ['name', 'triggers', 'steps', 'project', 'rounds'] : ['name', 'triggers', 'steps', 'project'];
+}
+const KEY_HINTS = [
+    { key: 'tab', label: 'next field' },
+    { key: 'ctrl+s', label: 'save' },
+    { key: 'esc', label: 'discard' },
+];
+// ---- component ----------------------------------------------------------------
+function Label(props) {
+    return h(Box, { width: 13, flexShrink: 0 }, h(Text, { bold: props.focused, color: props.focused ? theme.accent : theme.text }, props.text));
+}
+function WorkflowForm(props) {
+    const ctx = useScreen();
+    const { state } = useData();
+    const catalog = state.steps;
+    const origName = typeof props.params.name === 'string' ? props.params.name : null;
+    const isNew = origName === null;
+    const projectNames = state.projects.map((p) => p.name);
+    const [initial] = useState(() => initialForm(origName ? state.workflows.find((w) => w.name === origName) : undefined, origName ?? '', projectNames));
+    const [form, dispatch] = useReducer(formReducer, initial);
+    const [focus, setFocus] = useState('name');
+    const [tCursor, setTCursor] = useState(0);
+    const [sCursor, setSCursor] = useState(0);
+    const [adding, setAdding] = useState(null);
+    const [newTeam, setNewTeam] = useState('');
+    const [newLabel, setNewLabel] = useState('');
+    const [addError, setAddError] = useState(null);
+    const [picking, setPicking] = useState(null);
+    const [attempted, setAttempted] = useState(false);
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    const sections = sectionsFor(form, catalog);
+    const where = sections.includes(focus) ? focus : 'steps';
+    const producer = hasProducer(form.steps, catalog);
+    const avail = availableSteps(form, catalog);
+    const dirty = JSON.stringify(form) !== JSON.stringify(initial);
+    const existing = state.workflows.map((w) => w.name);
+    const problems = formProblems(form, isNew, origName, existing, projectNames);
+    const nameTaken = form.name.trim() !== '' && (isNew || form.name.trim() !== origName) && existing.includes(form.name.trim());
+    const warnings = sharedTriggerWarnings(state.workflows, form, origName);
+    const typing = (where === 'name' && adding === null && picking === null) || adding !== null;
+    useHints(adding !== null ? [{ key: 'enter', label: 'add trigger' }, { key: 'tab', label: 'team / label' }, { key: 'esc', label: 'cancel' }] : picking !== null ? [{ key: '↑↓', label: 'choose' }, { key: 'enter', label: 'add step' }, { key: 'esc', label: 'cancel' }] : KEY_HINTS);
+    useEquivalent(form.name.trim() ? saveArgs(form, isNew, catalog) : null);
+    useBackGuard(() => true);
+    const move = (delta) => setFocus(sections[(sections.indexOf(where) + delta + sections.length) % sections.length]);
+    const save = async () => {
+        if (busy)
+            return;
+        if (problems.length) {
+            setAttempted(true);
+            return;
+        }
+        setBusy(true);
+        setError(null);
+        const name = form.name.trim();
+        if (!isNew && origName && name !== origName) {
+            const r = await ctx.actions.run({ args: renameArgs(origName, name), title: 'Rename workflow', noConfirm: true });
+            if (!r || r.code !== 0) {
+                setBusy(false);
+                if (r)
+                    setError(r.output || 'Could not rename the workflow.');
+                return;
+            }
+        }
+        const r = await ctx.actions.run({ args: saveArgs(form, isNew, catalog), title: 'Save workflow', noConfirm: true, done: `Saved ${name}` });
+        setBusy(false);
+        if (r && r.code === 0)
+            ctx.nav.pop();
+        else if (r)
+            setError(r.output || `vsf exited with code ${r.code}`);
+    };
+    const discard = async () => {
+        if (dirty) {
+            const ok = await ctx.actions.confirm({ title: 'Discard changes?', body: 'What you changed here will be lost.', confirmLabel: 'Discard', cancelLabel: 'Keep editing' });
+            if (!ok)
+                return;
+        }
+        ctx.nav.pop();
+    };
+    const commitTrigger = () => {
+        const r = makeTrigger(newTeam, newLabel);
+        if ('error' in r) {
+            setAddError(r.error);
+            setAdding(newTeam.trim() ? 'label' : 'team');
+            return;
+        }
+        dispatch({ type: 'addTrigger', trigger: r.trigger });
+        setTCursor(form.triggers.length);
+        setAdding(null);
+        setAddError(null);
+        setNewTeam('');
+        setNewLabel('');
+    };
+    useKeys((input, key) => {
+        // A Select that is open owns the keys.
+        if (ctx.capturing && !typing)
+            return;
+        if (key.escape) {
+            if (adding !== null) {
+                setAdding(null);
+                setAddError(null);
+            }
+            else if (picking !== null)
+                setPicking(null);
+            else
+                void discard();
+            return;
+        }
+        if (key.ctrl && input === 's') {
+            void save();
+            return;
+        }
+        if (adding !== null) {
+            if (key.tab)
+                setAdding(adding === 'team' ? 'label' : 'team');
+            return;
+        }
+        if (picking !== null) {
+            if (key.upArrow)
+                setPicking((i) => Math.max(0, (i ?? 0) - 1));
+            else if (key.downArrow)
+                setPicking((i) => Math.min(avail.length - 1, (i ?? 0) + 1));
+            else if (key.return) {
+                const pick = avail[picking];
+                if (pick) {
+                    dispatch({ type: 'addStep', id: pick.id });
+                    setSCursor(form.steps.length);
+                }
+                setPicking(null);
+            }
+            return;
+        }
+        if (key.tab) {
+            move(key.shift ? -1 : 1);
+            return;
+        }
+        if (where === 'name') {
+            if (key.downArrow)
+                move(1);
+            else if (key.upArrow)
+                move(-1);
+            return;
+        }
+        if (where === 'triggers') {
+            if (input === 'a') {
+                setAdding('team');
+                setNewTeam('');
+                setNewLabel('');
+                setAddError(null);
+            }
+            else if (input === 'x' && form.triggers.length) {
+                dispatch({ type: 'removeTrigger', index: tCursor });
+                setTCursor(Math.max(0, Math.min(tCursor, form.triggers.length - 2)));
+            }
+            else if (key.upArrow)
+                (tCursor > 0 ? setTCursor(tCursor - 1) : move(-1));
+            else if (key.downArrow)
+                (tCursor < form.triggers.length - 1 ? setTCursor(tCursor + 1) : move(1));
+            return;
+        }
+        if (where === 'steps') {
+            if ((input === '+' || input === 'a') && avail.length)
+                setPicking(0);
+            else if (input === 'x' && form.steps.length) {
+                dispatch({ type: 'removeStep', index: sCursor });
+                setSCursor(Math.max(0, Math.min(sCursor, form.steps.length - 2)));
+            }
+            else if (input === 'J' || input === 'K') {
+                const dir = input === 'J' ? 1 : -1;
+                if (sCursor + dir >= 0 && sCursor + dir < form.steps.length) {
+                    dispatch({ type: 'moveStep', index: sCursor, dir });
+                    setSCursor(sCursor + dir);
+                }
+            }
+            else if (key.leftArrow)
+                setSCursor(Math.max(0, sCursor - 1));
+            else if (key.rightArrow)
+                setSCursor(Math.min(form.steps.length - 1, sCursor + 1));
+            else if (key.upArrow)
+                move(-1);
+            else if (key.downArrow)
+                move(1);
+            return;
+        }
+        if (where === 'project') {
+            if (key.upArrow)
+                move(-1);
+            else if (key.downArrow)
+                move(1);
+            return;
+        }
+        if (where === 'rounds') {
+            if (/^[1-9]$/.test(input))
+                dispatch({ type: 'rounds', value: Number(input) });
+            else if (key.leftArrow || input === '-')
+                dispatch({ type: 'rounds', value: form.rounds - 1 });
+            else if (key.rightArrow || input === '+')
+                dispatch({ type: 'rounds', value: form.rounds + 1 });
+            else if (key.upArrow)
+                move(-1);
+            else if (key.downArrow)
+                move(1);
+        }
+    }, { whileCapturing: true });
+    const projectOptions = state.projects.map((p) => ({ value: p.name, label: p.name, hint: `${tilde(p.path)}, PRs into ${p.base ?? 'the default branch'}` }));
+    // Steps line: "1 Dev  →  2 QA", the focused one highlighted.
+    const stepNodes = [];
+    form.steps.forEach((id, i) => {
+        const on = where === 'steps' && i === sCursor;
+        if (i > 0)
+            stepNodes.push(h(Text, { key: `a${i}`, color: theme.dim }, '  →  '));
+        stepNodes.push(h(Text, { key: id, backgroundColor: on ? theme.selected : undefined, bold: on, color: on ? theme.bold : undefined }, `${i + 1} ${stepLabel(catalog, id)}`));
+    });
+    return h(Panel, { title: isNew ? 'New workflow' : 'Edit workflow', focused: true }, 
+    // Name
+    h(Box, null, h(Label, { text: 'Name', focused: where === 'name' }), where === 'name' && adding === null && picking === null ? null : h(Text, null, ' '), h(TextInput, { value: form.name, onChange: (v) => dispatch({ type: 'name', value: v }), focus: where === 'name' && adding === null && picking === null, placeholder: 'tether-relay-build' }), nameTaken ? h(Text, { color: theme.red }, '   already taken') : null), h(Text, null, ' '), 
+    // Triggers
+    h(Box, null, h(Label, { text: 'Starts when', focused: where === 'triggers' }), h(Box, { flexDirection: 'column', flexGrow: 1 }, form.triggers.length === 0 ? h(Text, { color: theme.dim }, ' no trigger yet') : null, ...form.triggers.map((t, i) => {
+        const on = where === 'triggers' && i === tCursor && adding === null;
+        return h(Text, { key: `${t.team}:${t.label}`, backgroundColor: on ? theme.selected : undefined, bold: on, color: on ? theme.bold : undefined }, ` ${triggerText(t)} `);
+    }), adding !== null
+        ? h(Box, { flexDirection: 'column' }, h(Box, null, h(Text, { color: theme.dim }, ' team '), h(TextInput, { value: newTeam, onChange: setNewTeam, focus: adding === 'team', placeholder: 'ENG', onSubmit: () => setAdding('label') }), h(Text, { color: theme.dim }, '  label '), h(TextInput, { value: newLabel, onChange: setNewLabel, focus: adding === 'label', placeholder: 'vs-plan', onSubmit: commitTrigger })), addError ? h(Text, { color: theme.red }, `  ${addError}`) : null)
+        : null), h(Box, { flexShrink: 0, marginLeft: 2 }, h(Text, { color: theme.dim }, where === 'triggers' ? 'a add trigger · x remove' : ''))), h(Text, null, ' '), 
+    // Steps
+    h(Box, null, h(Label, { text: 'Steps', focused: where === 'steps' }), h(Box, { flexDirection: 'column', flexGrow: 1 }, form.steps.length === 0 ? h(Text, { color: theme.dim }, ' no steps yet') : h(Text, { wrap: 'truncate-end' }, ' ', ...stepNodes), picking !== null
+        ? h(Box, { flexDirection: 'column' }, ...avail.map((s, i) => h(Text, { key: s.id, wrap: 'truncate-end', backgroundColor: i === picking ? theme.selected : undefined, color: i === picking ? theme.bold : theme.text }, ` ${i === picking ? '▶ ' : '  '}${s.label}`, s.hint ? h(Text, { color: theme.dim, wrap: 'truncate-end' }, `  ${s.hint}`) : null)))
+        : avail.length
+            ? h(Text, { color: theme.dim, wrap: 'truncate-end' }, ` available: ${avail.map((s) => s.label).join(', ')}`)
+            : null), h(Box, { flexShrink: 0, marginLeft: 2 }, h(Text, { color: theme.dim }, where === 'steps' && picking === null ? '+ add · J/K reorder · x remove' : ''))), h(Text, null, ' '), 
+    // Project
+    h(Box, null, h(Label, { text: 'Project', focused: where === 'project' }), projectOptions.length
+        ? h(Select, { options: projectOptions, value: form.project, onChange: (v) => dispatch({ type: 'project', value: v }), focus: where === 'project' && adding === null && picking === null })
+        : h(Text, { color: theme.red }, 'No projects yet. Add one on the Projects tab.')), h(Text, null, ' '), 
+    // Rounds
+    h(Box, null, h(Label, { text: 'Rounds', focused: where === 'rounds' }), producer
+        ? h(Text, null, h(Text, { bold: where === 'rounds', color: where === 'rounds' ? theme.accent : undefined }, ` ${form.rounds} `), h(Text, { color: theme.dim }, '  tries at Plan or Dev before the card parks'))
+        : h(Text, { color: theme.dim }, '1   fixed: no step here can be sent back')), h(Text, null, ' '), h(Text, { color: theme.accent, wrap: 'truncate-end' }, summaryLine(form, catalog)), ...warnings.map((w, i) => h(Text, { key: `w${i}`, color: theme.yellow, wrap: 'truncate-end' }, `! ${w}`)), attempted && problems.length ? h(Box, { flexDirection: 'column', marginTop: 1 }, ...problems.map((p, i) => h(Text, { key: i, color: theme.red }, `! ${p}`))) : null, error ? h(Box, { marginTop: 1 }, h(Text, { color: theme.red }, error)) : null, busy ? h(Text, { color: theme.dim }, 'Saving...') : null);
+}
+export const workflowFormScreen = {
+    id: 'agents.workflow.form',
+    title: (p) => ['Workflows', typeof p.name === 'string' ? `Edit ${p.name}` : 'New workflow'],
+    component: (props) => h(WorkflowForm, { params: props.params }),
+    hints: () => KEY_HINTS,
+};

package/dist/tui/screens/workflows.d.ts

@@ -0,0 +1,41 @@
+import { type StepsCatalog, type WorkflowItem } from '../data.ts';
+import { type Column } from '../widgets.ts';
+import type { Screen } from '../screens.ts';
+export declare function stepLabel(catalog: StepsCatalog | null, id: string): string;
+export declare function stepName(catalog: StepsCatalog | null, id: string): string;
+export interface TriggerLike {
+    team: string;
+    label: string;
+}
+export declare const triggerText: (t: TriggerLike) => string;
+export declare const triggersText: (triggers: TriggerLike[]) => string;
+export declare const sameTriggerLike: (a: TriggerLike, b: TriggerLike) => boolean;
+export declare const stepsText: (catalog: StepsCatalog | null, steps: string[]) => string;
+export interface MatchWarning {
+    loser: string;
+    winner: string;
+    triggers: TriggerLike[];
+}
+export declare function matchWarnings(workflows: {
+    name: string;
+    triggers: TriggerLike[];
+}[]): MatchWarning[];
+export declare const warningText: (w: MatchWarning) => string;
+export declare function moveArgs(workflows: {
+    name: string;
+}[], index: number, dir: 1 | -1): string[] | null;
+export declare function workflowColumns(columns: number, workflows?: WorkflowItem[], catalog?: StepsCatalog | null): Column[];
+export declare function workflowRows(workflows: WorkflowItem[], catalog: StepsCatalog | null): (string | {
+    text: string;
+    colour: "#6b7280";
+    bold?: undefined;
+} | {
+    text: string;
+    bold: boolean;
+    colour?: undefined;
+} | {
+    text: string;
+    colour: "#7aa2f7";
+    bold?: undefined;
+})[][];
+export declare const workflowsScreen: Screen;

package/dist/tui/screens/workflows.js

@@ -0,0 +1,174 @@
+// Agents, Workflows: the workflows in match order. Every change is a real
+// `vsf agents workflow ...` command run as a child process.
+import React, { useState } from 'react';
+import { Box, Text } from 'ink';
+import { useData } from "../data.js";
+import { useEquivalent, useHints, useKeys, useScreen } from "../context.js";
+import { theme } from "../theme.js";
+import { Panel, Table, TextInput } from "../widgets.js";
+const h = React.createElement;
+// ---- pure helpers (shared with the workflow form) --------------------------
+const FALLBACK_LABELS = {
+    'vs-plan': 'Plan',
+    'vs-plan-review': 'Plan review',
+    'vs-publish': 'Publish',
+    'vs-dev': 'Dev',
+    'vs-qa': 'QA',
+};
+export function stepLabel(catalog, id) {
+    const found = catalog?.steps.find((s) => s.id === id);
+    if (found)
+        return found.label;
+    if (FALLBACK_LABELS[id])
+        return FALLBACK_LABELS[id];
+    const t = id.replace(/^vs-/, '').replace(/-/g, ' ');
+    return t.charAt(0).toUpperCase() + t.slice(1);
+}
+// The short name the commands take: "dev", "plan-review".
+export function stepName(catalog, id) {
+    return catalog?.steps.find((s) => s.id === id)?.name ?? id.replace(/^vs-/, '');
+}
+export const triggerText = (t) => `${t.team} + ${t.label}`;
+export const triggersText = (triggers) => triggers.map(triggerText).join(', ');
+export const sameTriggerLike = (a, b) => a.team === b.team && a.label === b.label;
+export const stepsText = (catalog, steps) => steps.map((s) => stepLabel(catalog, s)).join(' → ');
+// Two workflows that start on the same TEAM:LABEL: only the first in order
+// starts the card. One entry per (loser, winner) pair.
+export function matchWarnings(workflows) {
+    const out = [];
+    workflows.forEach((w, j) => {
+        const byWinner = new Map();
+        for (const t of w.triggers) {
+            const winner = workflows.slice(0, j).find((o) => o.triggers.some((x) => sameTriggerLike(x, t)));
+            if (!winner)
+                continue;
+            byWinner.set(winner.name, [...(byWinner.get(winner.name) ?? []), t]);
+        }
+        for (const [winner, triggers] of byWinner)
+            out.push({ loser: w.name, winner, triggers });
+    });
+    return out;
+}
+export const warningText = (w) => `${w.loser} also starts on ${w.triggers.map(triggerText).join(', ')}, so ${w.winner} wins.`;
+// The move command for J (dir 1, down) or K (dir -1, up); null at the ends.
+export function moveArgs(workflows, index, dir) {
+    const me = workflows[index];
+    const other = workflows[index + dir];
+    if (!me || !other)
+        return null;
+    return ['agents', 'workflow', 'move', me.name, dir === 1 ? '--after' : '--before', other.name];
+}
+// Column widths that fit the longest cell (plus a gap), within the terminal.
+export function workflowColumns(columns, workflows = [], catalog = null) {
+    const fit = (min, texts, max) => Math.min(max, Math.max(min, ...texts.map((t) => t.length + 2)));
+    const budget = Math.max(60, columns - 12);
+    const name = fit(12, workflows.map((w) => w.name), 28);
+    const trig = fit(14, workflows.map((w) => triggersText(w.triggers)), 28);
+    const proj = fit(10, workflows.map((w) => w.project), 20);
+    const steps = Math.max(12, Math.min(fit(12, workflows.map((w) => stepsText(catalog, w.steps)), 48), budget - 4 - 6 - name - trig - proj));
+    return [{ title: '#', width: 4 }, { title: 'Name', width: name }, { title: 'Starts when', width: trig }, { title: 'Steps', width: steps }, { title: 'Project', width: proj }, { title: 'Rounds' }];
+}
+export function workflowRows(workflows, catalog) {
+    return workflows.map((w, i) => [
+        { text: String(i + 1), colour: theme.dim },
+        { text: w.name, bold: true },
+        triggersText(w.triggers),
+        stepsText(catalog, w.steps),
+        { text: w.project, colour: theme.accent },
+        String(w.maxRounds),
+    ]);
+}
+// ---- screen ----------------------------------------------------------------
+const LIST_HINTS = [
+    { key: 'n', label: 'new' },
+    { key: 'e', label: 'edit' },
+    { key: 'R', label: 'rename' },
+    { key: 'J/K', label: 'move down/up' },
+    { key: 'd', label: 'delete' },
+    { key: 'esc', label: 'back' },
+];
+function WorkflowsList() {
+    const ctx = useScreen();
+    const { state } = useData();
+    const list = state.workflows;
+    const [selName, setSelName] = useState(null);
+    const [renaming, setRenaming] = useState(null);
+    const [draft, setDraft] = useState('');
+    const found = list.findIndex((w) => w.name === selName);
+    const index = found >= 0 ? found : Math.min(0, list.length - 1);
+    const selected = list[index];
+    const warnings = matchWarnings(list);
+    useHints(renaming !== null ? [{ key: 'enter', label: 'rename' }, { key: 'esc', label: 'cancel' }] : LIST_HINTS);
+    useEquivalent(renaming !== null && draft.trim() && draft.trim() !== renaming ? ['agents', 'workflow', 'rename', renaming, draft.trim()] : null);
+    const rename = async () => {
+        const next = draft.trim();
+        if (renaming === null)
+            return;
+        if (!next || next === renaming) {
+            setRenaming(null);
+            return;
+        }
+        if (list.some((w) => w.name === next)) {
+            ctx.toast(`A workflow named ${next} already exists.`, 'error');
+            return;
+        }
+        const r = await ctx.actions.run({ args: ['agents', 'workflow', 'rename', renaming, next], title: 'Rename workflow', noConfirm: true, done: `Renamed to ${next}` });
+        if (r && r.code === 0)
+            setSelName(next);
+        if (r)
+            setRenaming(null);
+    };
+    useKeys((input, key) => {
+        if (renaming !== null) {
+            if (key.escape)
+                setRenaming(null);
+            return;
+        }
+        if (key.upArrow || input === 'k')
+            setSelName(list[Math.max(0, index - 1)]?.name ?? null);
+        else if (key.downArrow || input === 'j')
+            setSelName(list[Math.min(list.length - 1, index + 1)]?.name ?? null);
+        else if (input === 'n') {
+            if (!state.projects.length)
+                ctx.toast('Add a project first, on the Projects tab.', 'info');
+            else
+                ctx.nav.push('agents.workflow.form', {});
+        }
+        else if ((input === 'e' || key.return) && selected)
+            ctx.nav.push('agents.workflow.form', { name: selected.name });
+        else if (input === 'R' && selected) {
+            setDraft(selected.name);
+            setRenaming(selected.name);
+        }
+        else if ((input === 'J' || input === 'K') && selected) {
+            const args = moveArgs(list, index, input === 'J' ? 1 : -1);
+            if (!args)
+                ctx.toast(input === 'J' ? 'Already last.' : 'Already first.', 'info');
+            else
+                void ctx.actions.run({ args, title: 'Move workflow', noConfirm: true, done: `Moved ${selected.name}` });
+        }
+        else if (input === 'd' && selected) {
+            void ctx.actions.run({
+                args: ['agents', 'workflow', 'rm', selected.name, '--yes'],
+                title: `Delete workflow ${selected.name}?`,
+                body: 'Cards will no longer start it. Runs already recorded stay.',
+                confirmLabel: 'Delete',
+                done: `Deleted ${selected.name}`,
+            });
+        }
+    }, { whileCapturing: true });
+    return h(Panel, { title: 'Workflows, in match order', focused: true }, h(Text, { color: theme.dim }, 'The first workflow that matches a card wins.'), h(Text, null, ' '), h(Table, {
+        columns: workflowColumns(ctx.columns, list, state.steps),
+        rows: workflowRows(list, state.steps),
+        selected: index,
+        empty: state.loaded ? 'No workflows yet. Press n to make one.' : 'Loading...',
+    }), warnings.length ? h(Text, null, ' ') : null, ...warnings.map((w, i) => h(Text, { key: i, color: theme.yellow, wrap: 'truncate-end' }, `! ${warningText(w)}${i === warnings.length - 1 ? ' J/K reorders.' : ''}`)), renaming !== null
+        ? h(Box, { marginTop: 1 }, h(Text, { color: theme.dim }, `Rename ${renaming} to  `), h(TextInput, { value: draft, onChange: setDraft, onSubmit: () => void rename() }))
+        : null, state.errors.workflows ? h(Text, { color: theme.red }, state.errors.workflows) : null);
+}
+export const workflowsScreen = {
+    id: 'agents.workflows',
+    title: 'Workflows',
+    component: WorkflowsList,
+    hints: () => LIST_HINTS,
+};

package/dist/tui/screens.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { type Hint } from './context.ts';
+import type { Params } from './nav.ts';
+export interface ScreenProps {
+    params: Params;
+}
+export interface Screen {
+    id: string;
+    title: string | string[] | ((params: Params) => string | string[]);
+    component: (props: ScreenProps) => React.ReactElement | null;
+    hints: (props: {
+        params: Params;
+    }) => Hint[];
+}
+export interface TabDef {
+    id: string;
+    label: string;
+    params?: Params;
+}
+export declare const AGENT_TABS: TabDef[];
+export declare const activeTab: (params: Params) => TabDef;
+export declare function ScreenHost(props: {
+    id: string;
+    params: Params;
+    extraHints?: Hint[];
+}): React.ReactElement;
+export declare const screens: Record<string, Screen>;
+export declare function titleOf(screen: Screen, params: Params): string[];
+export declare function hintsOf(id: string, params: Params): Hint[];
+export declare function crumbsOf(id: string, params: Params): string[];