soja-cli 1.4.0

package/dist/ui/screens/SetupScreen.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { useState } from 'react';
+import { slugify } from '../../domain/naming.js';
+import { toDisplayError } from '../../utils/errors.js';
+import { Splash } from '../branding/Splash.js';
+import { TextField } from '../components/TextField.js';
+import { useTerminalSize } from '../hooks/use-terminal-size.js';
+import { Button } from '../kit/Button.js';
+import { Gauge } from '../kit/Gauge.js';
+import { Panel } from '../kit/Panel.js';
+import { Spinner } from '../kit/Spinner.js';
+import { Layer } from '../input/dispatcher.js';
+import { useKeys } from '../input/KeyProvider.js';
+import { palette, symbols } from '../theme/theme.js';
+const STEPS = ['displayName', 'username', 'workspaceName'];
+const QUESTIONS = {
+    displayName: "What's your name?",
+    username: 'Username',
+    workspaceName: 'Workspace name',
+};
+const PLACEHOLDERS = {
+    displayName: 'Michael',
+    username: 'michael',
+    workspaceName: 'Bravos Development',
+};
+/** First run: three questions, then straight into SOJA. */
+export function SetupScreen({ services, onDone }) {
+    const [step, setStep] = useState(0);
+    const [values, setValues] = useState({ displayName: '', username: '', workspaceName: '' });
+    const [error, setError] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const current = STEPS[step] ?? 'displayName';
+    const advance = async () => {
+        if (busy)
+            return;
+        if (!values[current].trim()) {
+            setError('This one is required.');
+            return;
+        }
+        setError(null);
+        if (current === 'displayName' && !values.username) {
+            // Suggest a username from the name; it stays editable.
+            setValues((previous) => ({ ...previous, username: slugify(previous.displayName).replace(/-/g, '') }));
+        }
+        if (step < STEPS.length - 1) {
+            setStep(step + 1);
+            return;
+        }
+        setBusy(true);
+        try {
+            onDone(await services.session.setup(values));
+        }
+        catch (failure) {
+            setError(toDisplayError(failure).message);
+            setBusy(false);
+        }
+    };
+    useKeys(Layer.screen, (_input, key) => {
+        if (key.return)
+            void advance();
+        else if (key.escape && step > 0) {
+            setError(null);
+            setStep(step - 1);
+        }
+        else
+            return false;
+        return true;
+    });
+    const { columns, rows } = useTerminalSize();
+    const width = Math.min(76, columns - 4);
+    const stepTitles = { displayName: 'Your name', username: 'Username', workspaceName: 'Workspace' };
+    const helpers = {
+        displayName: 'How your teammates see you in SOJA.',
+        username: 'Used in @mentions and assignments. Letters, numbers and dashes.',
+        workspaceName: 'Your team or company. You can create more later.',
+    };
+    return (_jsx(Box, { width: columns, height: rows, alignItems: "center", justifyContent: "center", children: _jsxs(Box, { flexDirection: "column", width: width, children: [_jsx(Box, { justifyContent: "center", children: _jsx(Splash, { compact: true }) }), _jsxs(Panel, { title: "First setup", aside: `step ${step + 1} of ${STEPS.length}`, focused: true, width: width, children: [_jsx(Box, { gap: 1, marginBottom: 1, children: STEPS.map((name, index) => (_jsxs(Box, { gap: 1, children: [index > 0 ? _jsx(Text, { color: index <= step ? palette.accent : palette.border, children: '──' }) : null, _jsx(Text, { ...(index === step ? { backgroundColor: palette.accent, color: palette.onAccent, bold: true } : { color: index < step ? palette.success : palette.faint }), children: ` ${index < step ? symbols.check : String(index + 1)} ${stepTitles[name]} ` })] }, name))) }), _jsx(Text, { color: palette.text, bold: true, children: QUESTIONS[current] }), _jsx(Text, { color: palette.muted, children: helpers[current] }), _jsx(Box, { marginTop: 1, children: _jsx(TextField, { value: values[current], onChange: (value) => setValues((previous) => ({ ...previous, [current]: value })), placeholder: PLACEHOLDERS[current], width: width - 6 }) }), _jsx(Box, { marginTop: 1, flexDirection: "column", children: STEPS.slice(0, step).map((name) => (_jsx(Text, { color: palette.muted, children: `${symbols.check} ${stepTitles[name]}: ${values[name]}` }, name))) }), _jsxs(Box, { marginTop: 1, justifyContent: "space-between", children: [error ? (_jsx(Text, { color: palette.danger, children: `${symbols.cross} ${error}` })) : busy ? (_jsx(Spinner, { label: "Setting things up\u2026" })) : (_jsx(Gauge, { value: step, total: STEPS.length, width: 16 })), _jsxs(Box, { gap: 2, children: [step > 0 ? _jsx(Button, { label: "Back", layer: Layer.screen, onPress: () => { setError(null); setStep(step - 1); } }) : null, _jsx(Button, { label: step === STEPS.length - 1 ? 'Finish' : `Next ${symbols.arrow}`, variant: "primary", layer: Layer.screen, onPress: () => void advance() })] })] })] }), _jsx(Box, { justifyContent: "center", marginTop: 1, children: _jsx(Text, { color: palette.faint, children: "Everything stays on this machine \u00B7 enter next \u00B7 esc back \u00B7 ctrl+c quit" }) })] }) }));
+}

package/dist/ui/screens/TaskListScreen.js

@@ -0,0 +1,152 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { useEffect, useRef, useState } from 'react';
+import { FILTER_LABELS, TASK_FILTERS } from '../../application/filters.js';
+import { activeCount, countStatuses, TYPE_LABELS } from '../../domain/task.js';
+import { formatRelative } from '../../utils/time.js';
+import { useAppState } from '../app-state.js';
+import { EmptyState } from '../components/EmptyState.js';
+import { PriorityMeter, StatusBadge } from '../components/Labels.js';
+import { PullRequestSummary } from '../components/PullRequestLabel.js';
+import { TaskTable, tableRows } from '../components/TaskTable.js';
+import { EMPTY_TASKS, summaryRemark } from '../copy.js';
+import { useLayout } from '../hooks/use-layout.js';
+import { useList } from '../hooks/use-list.js';
+import { useQuery } from '../hooks/use-query.js';
+import { useTaskActions } from '../hooks/use-task-actions.js';
+import { Layer } from '../input/dispatcher.js';
+import { useKeys } from '../input/KeyProvider.js';
+import { Panel } from '../kit/Panel.js';
+import { Tabs } from '../kit/Tabs.js';
+import { palette, symbols } from '../theme/theme.js';
+import { Mascot } from '../mascot/Mascot.js';
+import { sceneForTaskList } from '../mascot/selection.js';
+import { clampLines, wrapText } from '../../utils/text.js';
+import { ScreenFrame } from './ScreenFrame.js';
+const HEADING = { ...FILTER_LABELS, mine: 'My work' };
+const TAB_LABELS = { ...FILTER_LABELS, mine: 'Mine', all: 'All' };
+const NO_TASKS = [];
+/** Rows of the preview panel, including its borders. */
+const PREVIEW_ROWS = 8;
+/** "What do I have to do now?" Home is this screen with no project. */
+export function TaskListScreen({ active, projectId, initialFilter }) {
+    const { services, session, go, cwd, homeFilter, setHomeFilter, syncStatus } = useAppState();
+    const actions = useTaskActions();
+    const { width, height } = useLayout();
+    // Home shares its filter with the sidebar; a project list keeps its own.
+    const [projectFilter, setProjectFilter] = useState(initialFilter ?? 'all');
+    const filter = projectId ? projectFilter : homeFilter;
+    const setFilter = projectId ? setProjectFilter : setHomeFilter;
+    const scope = projectId ? { projectId } : {};
+    const tasks = useQuery(() => services.tasks.list(session, filter, scope), `tasks:${session.workspace.id}:${filter}:${projectId ?? ''}`, [`tasks:${session.workspace.id}`]);
+    // GitHub pull requests of the listed tasks (one cached `gh` call per repository).
+    const withBranch = (tasks.data ?? []).filter((task) => task.branch);
+    const pullRequests = useQuery(() => services.git.pullRequestIndex(session, cwd, withBranch), `prs:${withBranch.map((task) => `${task.id}:${task.branch ?? ''}`).join(',')}`);
+    const project = useQuery(async () => (projectId ? ((await services.projects.list(session)).find((p) => p.id === projectId) ?? null) : null), `project:${projectId ?? ''}`, [`projects:${session.workspace.id}`, `tasks:${session.workspace.id}`]);
+    const list = tasks.data ?? NO_TASKS;
+    // Tabs and a gap; the project line; the preview panel when there is room for it.
+    const withPreview = height >= 22 && list.length > 0;
+    const showMascot = width >= 80 && height >= 34;
+    const mascotRows = showMascot ? 15 : 0;
+    const chromeRows = 2 + (projectId ? 2 : 0) + (withPreview ? PREVIEW_ROWS : 0);
+    const tableHeight = Math.max(3, height - chromeRows - mascotRows);
+    const selectedId = useRef(null);
+    const nav = useList(list.length, tableRows(tableHeight), true, 0, (index) => {
+        selectedId.current = list[index]?.id ?? null;
+    });
+    const selected = list[nav.index];
+    useEffect(() => {
+        if (tasks.loading)
+            return;
+        const remembered = selectedId.current;
+        if (remembered) {
+            const nextIndex = list.findIndex((task) => task.id === remembered);
+            if (nextIndex >= 0) {
+                if (nextIndex !== nav.index)
+                    nav.select(nextIndex);
+                selectedId.current = list[nextIndex]?.id ?? null;
+                return;
+            }
+        }
+        selectedId.current = list[nav.index]?.id ?? null;
+    }, [tasks.loading, tasks.data, nav.index, list, nav]);
+    const pick = (next) => {
+        selectedId.current = null;
+        setFilter(next);
+        nav.select(0);
+        // Filter changes intentionally reset to the first result, regardless of
+        // which task occupied index zero in the previous result set.
+        selectedId.current = null;
+    };
+    const setFilterAt = (index) => {
+        const next = TASK_FILTERS[(index + TASK_FILTERS.length) % TASK_FILTERS.length];
+        if (next)
+            pick(next);
+    };
+    const open = (task) => {
+        if (task)
+            go({ type: 'push', route: { name: 'task', ref: task.ref } });
+    };
+    useKeys(Layer.screen, (input, key) => {
+        if (nav.handleKey(input, key))
+            return true;
+        if (key.ctrl || key.meta)
+            return false;
+        // Archived is not a tab: moving right from it lands on the first tab, left on the last.
+        const tabIndex = TASK_FILTERS.indexOf(filter);
+        if ((key.tab && !key.shift) || input === 'l' || key.rightArrow)
+            setFilterAt(tabIndex + 1);
+        else if ((key.tab && key.shift) || input === 'h' || key.leftArrow)
+            setFilterAt(tabIndex === -1 ? TASK_FILTERS.length - 1 : tabIndex - 1);
+        else if (/^[1-7]$/.test(input))
+            setFilterAt(Number(input) - 1);
+        else if (key.return)
+            open(selected);
+        else if (input === 's' && selected)
+            actions.status(selected);
+        else if (input === 'a' && selected)
+            void actions.assign(selected);
+        else if (input === 'x' && selected)
+            void actions.toggleDone(selected);
+        else
+            return false;
+        return true;
+    }, active);
+    const counts = countStatuses(list);
+    const compactTabs = width < 96;
+    const title = project.data ? `${project.data.name} · ${project.data.key}` : HEADING[filter];
+    return (_jsxs(ScreenFrame, { title: title, aside: summaryText(filter, counts, list.length), hints: [
+            ['↑↓', 'move'],
+            ['enter', 'open'],
+            ['n', 'new'],
+            ['s', 'status'],
+            ['x', 'done'],
+            ['←→', 'filter'],
+            ['/', 'search'],
+            [':', 'commands'],
+            ['?', 'help'],
+        ], children: [project.data ? _jsx(ProjectLine, { project: project.data }) : null, _jsxs(Box, { justifyContent: "space-between", children: [_jsx(Tabs, { items: TASK_FILTERS.map((value, index) => ({ value, label: TAB_LABELS[value], shortcut: String(index + 1) })), value: TASK_FILTERS.includes(filter) ? filter : null, onChange: pick, active: active, compact: compactTabs }), filter === 'archived' ? _jsx(Text, { color: palette.warning, children: 'archived tasks' }) : null] }), _jsx(Box, { marginTop: 1, flexDirection: "column", height: tableHeight, children: tasks.error ? (_jsx(EmptyState, { lines: [tasks.error.message, tasks.error.hint ?? ''], icon: symbols.cross })) : list.length === 0 && !tasks.loading ? (_jsx(EmptyState, { lines: EMPTY_TASKS[filter], icon: symbols.check })) : (_jsx(TaskTable, { tasks: list, selected: nav.index, offset: nav.offset, height: tableHeight, width: width, showAssignee: filter !== 'mine', pullRequests: pullRequests.data, onSelect: (index) => nav.select(index), onOpen: (index) => open(list[index]), onScroll: (delta) => nav.select(nav.index + delta), active: active })) }), withPreview && selected ? _jsx(TaskPreview, { task: selected, pr: pullRequests.data?.get(selected.id), width: width, remark: summaryRemark(counts) }) : null, showMascot ? _jsx(Mascot, { scene: sceneForTaskList(list, filter, syncStatus?.syncing ?? false), paused: !active }) : null] }));
+}
+function summaryText(filter, counts, total) {
+    if (total === 0)
+        return undefined;
+    if (filter === 'done' || filter === 'archived')
+        return `${total} ${filter}`;
+    return `${activeCount(counts)} active ${symbols.dot} ${counts.in_progress} in progress ${symbols.dot} ${counts.review} review ${symbols.dot} ${counts.blocked} blocked`;
+}
+/** The selected task at a glance, so most of the time you do not need to open it. */
+function TaskPreview({ task, pr, width, remark }) {
+    const description = task.description ? clampLines(wrapText(task.description, width - 4), 2) : [];
+    const meta = [
+        TYPE_LABELS[task.type],
+        task.project?.name,
+        task.assignee ? `@${task.assignee.username}` : 'unassigned',
+        task.requester ? `for ${task.requester}` : null,
+        `updated ${formatRelative(task.updatedAt)}`,
+    ].filter(Boolean);
+    return (_jsx(Box, { marginTop: 1, children: _jsxs(Panel, { title: task.ref, aside: remark ?? undefined, height: PREVIEW_ROWS - 1, flexGrow: 1, children: [_jsx(Text, { wrap: "truncate-end", color: palette.text, bold: true, children: task.title }), _jsxs(Box, { gap: 2, children: [_jsx(StatusBadge, { status: task.status }), _jsx(PriorityMeter, { priority: task.priority }), _jsx(Text, { color: palette.muted, wrap: "truncate-end", children: meta.join(` ${symbols.dot} `) })] }), pr ? (_jsx(PullRequestSummary, { pr: pr })) : task.branch ? (_jsx(Text, { color: palette.muted, wrap: "truncate-end", children: `${symbols.link} ${task.branch}` })) : (_jsx(Text, { color: palette.faint, children: 'no branch yet · b in the task starts one' })), description.length ? (description.map((line, index) => (_jsx(Text, { color: palette.muted, children: line }, index)))) : (_jsx(Text, { color: palette.faint, children: 'No description.' }))] }) }));
+}
+function ProjectLine({ project }) {
+    const location = project.repositoryPath ?? project.repositoryUrl;
+    return (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: palette.muted, wrap: "truncate-end", children: [project.description, `${project.active} active`, `${project.counts.done} done`, location].filter(Boolean).join(`  ${symbols.dot}  `) }) }));
+}

package/dist/ui/screens/TaskScreen.js

@@ -0,0 +1,193 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { useEffect, useState } from 'react';
+import { PullRequestSummary } from '../components/PullRequestLabel.js';
+import { isClosed, isProvisional, TYPE_LABELS } from '../../domain/task.js';
+import { formatRelative, formatStamp } from '../../utils/time.js';
+import { clampLines, wrapText } from '../../utils/text.js';
+import { useAppState } from '../app-state.js';
+import { EmptyState } from '../components/EmptyState.js';
+import { PriorityMeter, StatusBadge } from '../components/Labels.js';
+import { Badge } from '../kit/Badge.js';
+import { Clickable } from '../kit/Clickable.js';
+import { Panel } from '../kit/Panel.js';
+import { Spinner } from '../kit/Spinner.js';
+import { useLayout } from '../hooks/use-layout.js';
+import { useQuery } from '../hooks/use-query.js';
+import { useTaskActions } from '../hooks/use-task-actions.js';
+import { Layer } from '../input/dispatcher.js';
+import { useKeys } from '../input/KeyProvider.js';
+import { palette, symbols } from '../theme/theme.js';
+import { ScreenFrame } from './ScreenFrame.js';
+import { Mascot } from '../mascot/Mascot.js';
+import { sceneForTask } from '../mascot/selection.js';
+const LABEL_WIDTH = 14;
+export function TaskScreen({ active, taskRef }) {
+    const { services, session, cwd, detectMerges, followPullRequests, openOverlay, run, syncStatus } = useAppState();
+    useEffect(() => {
+        void detectMerges(taskRef);
+        void followPullRequests(taskRef);
+    }, [detectMerges, followPullRequests, taskRef]);
+    const { width, height } = useLayout();
+    const actions = useTaskActions();
+    const [scroll, setScroll] = useState(0);
+    const [taskTarget, setTaskTarget] = useState(null);
+    const taskTopic = `task:${session.workspace.id}:${taskRef}`;
+    const query = useQuery(() => services.tasks.get(session, taskTarget ?? taskRef), `${taskTopic}:${taskTarget?.id ?? ''}`, [taskTopic]);
+    if (query.data && query.data.id !== taskTarget?.id) {
+        setTaskTarget({ id: query.data.id, number: query.data.number });
+    }
+    const task = query.data;
+    // Remote mode: conflicts and rejections the last syncs reported for this task.
+    const notices = useQuery(async () => (services.sync && query.data ? services.sync.notices(session.workspace.id, query.data.id) : []), `notices:${taskRef}:${query.data?.id ?? ''}`, [taskTopic]);
+    const openNotices = () => {
+        const sync = services.sync;
+        const list = notices.data ?? [];
+        if (!sync || list.length === 0 || !task)
+            return;
+        openOverlay({
+            kind: 'picker',
+            title: 'Sync notices',
+            context: task.ref,
+            options: list.flatMap((notice) => [
+                ...(notice.kind === 'conflict' && notice.field
+                    ? [{ value: `restore:${notice.id}`, label: `Restore ${notice.field} to ${JSON.stringify(notice.overwritten)}`, hint: 'their value' }]
+                    : []),
+                { value: `dismiss:${notice.id}`, label: `Dismiss: ${notice.message}`, dim: true },
+            ]),
+            onSelect: (value) => {
+                const [action, id] = value.split(':');
+                const notice = list.find((candidate) => candidate.id === id);
+                if (!notice)
+                    return;
+                return run(async () => {
+                    if (action === 'restore' && notice.field) {
+                        await services.tasks.update(session, task, { [notice.field]: notice.overwritten });
+                    }
+                    await sync.dismissNotice(notice.id);
+                }, action === 'restore' ? `${task.ref}: ${notice.field} restored` : 'Notice dismissed');
+            },
+        });
+    };
+    // Remote mode: the latest chat messages that name this task.
+    const chatMentions = useQuery(async () => (services.chat && query.data && !isProvisional(query.data.number) ? services.chat.mentionsOfTask(session, query.data.number, 3) : []), `task-chat:${taskRef}:${query.data?.number ?? ''}`, [taskTopic, `chat:${session.workspace.id}`]);
+    const mentionList = chatMentions.data ?? [];
+    // The pull request comes from GitHub (gh), so it loads on its own too.
+    const pullRequest = useQuery(async () => (query.data?.branch ? services.git.pullRequest(session, taskRef, cwd) : null), `pr:${session.workspace.id}:${taskRef}:${query.data?.branch ?? ''}`);
+    // Git state loads on its own so the task shows instantly even in big repositories.
+    const git = useQuery(() => services.git.inspect(session, taskRef, cwd), `git:${session.workspace.id}:${taskRef}`);
+    // Layout: header, title, chips and notices; then Details + Description; the Activity panel gets the rest.
+    // Details and Description side by side only when both keep a useful width.
+    const wide = width >= 110;
+    const showMascot = width >= 80 && height >= 34 && Boolean(task);
+    const mascotRows = showMascot ? 15 : 0;
+    const titleLines = task ? clampLines(wrapText(task.title, width), 2) : [''];
+    const noticeLines = Math.min(2, notices.data?.length ?? 0);
+    const detailsHeight = 8;
+    // Title, chips (with a gap) and notices; then the details panel (with a gap).
+    const headRows = titleLines.length + 2 + noticeLines + 1 + detailsHeight;
+    // Stacked (narrow) layouts give the description what is left above the activity's minimum (2 rows + borders);
+    // with no room it is hidden (d still edits it).
+    const stackedDescription = Math.min(5, height - headRows - 4 - mascotRows);
+    const descriptionHeight = wide ? detailsHeight : stackedDescription >= 3 ? stackedDescription : 0;
+    const upperRows = headRows + (wide ? 0 : descriptionHeight);
+    const timelineRows = Math.max(2, height - upperRows - 2 - mascotRows);
+    const showMentions = wide && mentionList.length > 0;
+    const activityWidth = showMentions ? Math.floor(width * 0.62) - 4 : width - 4;
+    const timeline = task ? timelineLines(task.timeline, activityWidth) : [];
+    const actorWidth = Math.min(18, Math.max(8, ...timeline.map((line) => line.actor.length)) + 2);
+    const maxScroll = Math.max(0, timeline.length - timelineRows);
+    const offset = Math.min(scroll, maxScroll);
+    const scrollBy = (delta) => setScroll(Math.max(0, Math.min(maxScroll, offset + delta)));
+    useKeys(Layer.screen, (input, key) => {
+        if (!task || key.ctrl || key.meta)
+            return false;
+        const bindings = {
+            s: () => actions.status(task),
+            p: () => actions.priority(task),
+            a: () => actions.assign(task),
+            t: () => actions.type(task),
+            m: () => actions.project(task),
+            r: () => actions.requester(task),
+            d: () => actions.description(task),
+            c: () => actions.comment(task),
+            e: () => actions.edit(task),
+            x: () => actions.toggleDone(task),
+            '!': openNotices,
+            b: () => actions.branch(task),
+            g: () => actions.gitMenu(task),
+            C: () => actions.commit(task),
+        };
+        const action = bindings[input];
+        if (action)
+            void action();
+        // Timeline scrolls from the newest entries (bottom) upwards.
+        else if (input === 'k' || key.upArrow)
+            setScroll(Math.min(maxScroll, offset + 1));
+        else if (input === 'j' || key.downArrow)
+            setScroll(Math.max(0, offset - 1));
+        else
+            return false;
+        return true;
+    }, active);
+    const noticeCount = notices.data?.length ?? 0;
+    const hints = [
+        ...(noticeCount ? [['!', `${noticeCount} sync notice${noticeCount === 1 ? '' : 's'}`]] : []),
+        ['s', 'status'],
+        ['p', 'priority'],
+        ['a', 'assign'],
+        ['c', 'comment'],
+        ['e', 'edit'],
+        ['g', 'git'],
+        ['x', task?.status === 'done' ? 'reopen' : 'done'],
+        ['esc', 'back'],
+    ];
+    if (!task) {
+        return (_jsxs(ScreenFrame, { title: taskRef, hints: [['esc', 'back']], children: [query.error ? _jsx(EmptyState, { lines: [query.error.message, query.error.hint ?? ''], icon: symbols.cross }) : _jsx(Spinner, { label: "Loading\u2026" }), width >= 80 && height >= 20 ? _jsx(Mascot, { scene: syncStatus?.syncing ? 'syncing' : query.loading ? 'clockIn' : 'bugHunt', paused: !active }) : null] }));
+    }
+    const end = timeline.length - offset;
+    const visibleTimeline = timeline.slice(Math.max(0, end - timelineRows), end);
+    const description = task.description ? clampLines(wrapText(task.description, (wide ? width - Math.floor(width / 2) : width) - 5), Math.max(1, descriptionHeight - 2)) : [];
+    const detailsWidth = wide ? Math.floor(width / 2) : width;
+    return (_jsxs(ScreenFrame, { title: `${task.ref} · ${TYPE_LABELS[task.type]}`, aside: width >= 70 ? `created ${formatStamp(task.createdAt)}${task.creator ? ` by @${task.creator.username}` : ''} ${symbols.dot} updated ${formatRelative(task.updatedAt)}` : undefined, hints: hints, children: [titleLines.map((line, index) => (_jsx(Text, { bold: true, color: palette.text, children: line }, index))), _jsxs(Box, { gap: 2, marginTop: 1, children: [_jsx(Clickable, { onClick: () => actions.status(task), active: active, children: _jsx(StatusBadge, { status: task.status }) }), _jsx(Clickable, { onClick: () => actions.priority(task), active: active, children: _jsx(PriorityMeter, { priority: task.priority }) }), task.archivedAt ? _jsx(Badge, { tone: "warning", children: `archived ${formatRelative(task.archivedAt)} · e to restore` }) : null, isClosed(task.status) && task.completedAt ? _jsx(Text, { color: palette.muted, children: `closed ${formatRelative(task.completedAt)}` }) : null] }), (notices.data ?? []).slice(0, 2).map((notice) => (_jsx(Clickable, { onClick: openNotices, active: active, children: _jsx(Text, { color: notice.kind === 'conflict' ? palette.warning : palette.danger, wrap: "truncate-end", children: `! ${notice.message}` }) }, notice.id))), _jsxs(Box, { marginTop: 1, flexDirection: wide ? 'row' : 'column', gap: wide ? 1 : 0, children: [_jsxs(Panel, { title: "Details", width: detailsWidth, height: detailsHeight, children: [_jsx(Field, { label: "Project", value: task.project?.name, onClick: () => actions.project(task), active: active }), _jsx(Field, { label: "Assignee", value: task.assignee ? `@${task.assignee.username}` : undefined, hint: task.assignee?.displayName, onClick: () => actions.assign(task), active: active }), _jsx(Field, { label: "Requested by", value: task.requester ?? undefined, onClick: () => actions.requester(task), active: active }), _jsx(GitFields, { state: git.data, fallbackBranch: task.branch ?? task.suggestedBranch, recorded: task.branch !== null, closed: isClosed(task.status), onBranch: () => actions.branch(task), onCommits: () => openOverlay({ kind: 'git-log' }), active: active }), _jsx(PullRequestField, { state: task.branch ? pullRequest.data : null, loading: pullRequest.loading, onClick: () => actions.gitMenu(task), active: active })] }), descriptionHeight ? (_jsx(Panel, { title: "Description", aside: description.length ? 'd edit' : undefined, height: descriptionHeight, flexGrow: 1, children: _jsx(Clickable, { onClick: () => void actions.description(task), active: active, flexDirection: "column", children: description.length ? (description.map((line, index) => (_jsx(Text, { color: palette.text, children: line }, index)))) : (_jsx(Text, { color: palette.faint, children: "No description. Press d (or click) to write one." })) }) })) : null] }), _jsxs(Box, { flexGrow: 1, gap: 1, children: [_jsx(Panel, { title: "Activity", aside: maxScroll > 0 ? (offset > 0 ? '↓ newer' : '↑ older') : undefined, height: timelineRows + 2, flexGrow: 1, children: _jsxs(Clickable, { onWheel: (direction) => scrollBy(-direction), active: active, flexDirection: "column", children: [visibleTimeline.map((line) => (_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: palette.faint, children: line.stamp.padEnd(7) }), _jsx(Text, { color: line.actor ? palette.muted : palette.faint, children: line.actor.padEnd(actorWidth) }), line.kind === 'comment' ? _jsx(Text, { color: palette.accent, children: line.first ? `${symbols.comment} ` : '  ' }) : _jsx(Text, { color: palette.faint, children: '• ' }), _jsx(Text, { color: line.kind === 'event' ? palette.muted : palette.text, children: line.text })] }, line.key))), visibleTimeline.length === 0 ? _jsx(Text, { color: palette.faint, children: "Nothing yet." }) : null] }) }), showMentions ? (_jsx(Panel, { title: "Mentioned in chat", height: timelineRows + 2, width: Math.floor(width * 0.38), children: mentionList.map((message) => (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: palette.muted, children: `${message.author ? `@${message.author.username}` : 'someone'} ` }), _jsx(Text, { color: palette.faint, children: formatStamp(message.createdAt) })] }), _jsx(Text, { color: palette.text, wrap: "truncate-end", children: message.body.split('\n')[0] })] }, message.id))) })) : null] }), showMascot && task ? _jsx(Mascot, { scene: syncStatus?.syncing ? 'syncing' : sceneForTask(task), paused: !active }) : null] }));
+}
+function PullRequestField({ state, loading, onClick, active }) {
+    return (_jsxs(FieldRow, { onClick: onClick, active: active, children: [_jsx(Box, { width: LABEL_WIDTH, flexShrink: 0, children: _jsx(Text, { dimColor: true, children: "Pull request" }) }), state?.status === 'found' ? (_jsx(PullRequestSummary, { pr: state.pr })) : state?.status === 'unavailable' ? (_jsx(Text, { dimColor: true, wrap: "truncate-end", children: `${state.reason}${state.hint ? `  ${state.hint}` : ''}` })) : state?.status === 'none' ? (_jsx(Text, { dimColor: true, wrap: "truncate-end", children: `none · g to open one` })) : (loading && state === undefined ? _jsx(Spinner, { label: "checking GitHub\u2026", color: palette.faint }) : _jsx(Text, { color: palette.faint, children: "\u2014" }))] }));
+}
+/** A row of the Details panel: clicking it opens what changes it. */
+function FieldRow({ onClick, active, children }) {
+    return (_jsx(Clickable, { onClick: onClick, active: active, children: _jsx(Box, { flexGrow: 1, children: children }) }));
+}
+function Field({ label, value, hint, onClick, active = true, }) {
+    return (_jsxs(FieldRow, { onClick: onClick, active: active, children: [_jsx(Box, { width: LABEL_WIDTH, flexShrink: 0, children: _jsx(Text, { color: palette.muted, children: label }) }), _jsxs(Text, { wrap: "truncate-end", children: [value ? _jsx(Text, { color: palette.text, children: value }) : _jsx(Text, { color: palette.faint, children: "\u2014" }), hint ? _jsx(Text, { color: palette.muted, children: value ? `  ${hint}` : `  suggested ${hint}` }) : null] })] }));
+}
+/** Branch and commits rows. Two rows always, so the layout does not jump while Git loads. */
+function GitFields({ state, fallbackBranch, recorded, closed, onBranch, onCommits, active, }) {
+    if (!state) {
+        return (_jsxs(_Fragment, { children: [_jsx(Field, { label: "Branch", value: recorded ? fallbackBranch : undefined, hint: recorded ? undefined : fallbackBranch, onClick: onBranch, active: active }), _jsxs(FieldRow, { active: active, children: [_jsx(Box, { width: LABEL_WIDTH, flexShrink: 0, children: _jsx(Text, { color: palette.muted, children: "Commits" }) }), _jsx(Spinner, { label: "reading Git\u2026", color: palette.faint })] })] }));
+    }
+    if (state.status === 'unavailable') {
+        return (_jsxs(_Fragment, { children: [_jsx(Field, { label: "Branch", value: recorded ? fallbackBranch : undefined, hint: recorded ? undefined : fallbackBranch, onClick: onBranch, active: active }), _jsxs(FieldRow, { onClick: onBranch, active: active, children: [_jsx(Box, { width: LABEL_WIDTH, flexShrink: 0, children: _jsx(Text, { color: palette.muted, children: "Git" }) }), _jsx(Text, { color: palette.faint, wrap: "truncate-end", children: state.reason })] })] }));
+    }
+    const [latest] = state.commits;
+    return (_jsxs(_Fragment, { children: [_jsxs(FieldRow, { onClick: onBranch, active: active, children: [_jsx(Box, { width: LABEL_WIDTH, flexShrink: 0, children: _jsx(Text, { color: palette.muted, children: "Branch" }) }), _jsxs(Text, { wrap: "truncate-end", children: [state.checkedOut ? (_jsx(Text, { color: palette.success, children: `${symbols.active} checked out  ` })) : state.branchExists ? (_jsx(Text, { color: palette.muted, children: 'not checked out  ' })) : state.recorded && !closed ? (_jsx(Text, { color: palette.warning, children: 'deleted, no merge found · b recreate · g forget  ' })) : state.recorded ? (_jsx(Text, { color: palette.muted, children: 'deleted  ' })) : closed ? null : (_jsx(Text, { color: palette.muted, children: 'suggested · b to start  ' })), state.uncommitted > 0 ? _jsx(Text, { color: palette.warning, children: `${state.uncommitted} uncommitted  ` }) : null, _jsx(Text, { color: state.branchExists ? palette.text : palette.faint, children: closed && !state.recorded && !state.branchExists ? '—' : state.branch })] })] }), _jsxs(FieldRow, { onClick: onCommits, active: active, children: [_jsx(Box, { width: LABEL_WIDTH, flexShrink: 0, children: _jsx(Text, { color: palette.muted, children: "Commits" }) }), latest ? (_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: palette.warning, children: latest.shortHash }), _jsx(Text, { children: ` ${latest.subject}` }), _jsx(Text, { dimColor: true, children: `  ${formatRelative(latest.date)}${state.commits.length > 1 ? `  +${state.commits.length - 1} more` : ''}` })] })) : (_jsx(Text, { color: palette.faint, children: "none yet" }))] })] }));
+}
+/** Flattens the timeline into display rows; comments wrap to at most three lines. */
+function timelineLines(entries, width) {
+    const textWidth = Math.max(10, width - 7 - 18 - 2);
+    const now = new Date();
+    return entries.flatMap((entry) => {
+        const stamp = formatStamp(entry.at, now);
+        const actor = entry.actor ? `@${entry.actor.username}` : '';
+        if (entry.kind === 'event')
+            return [{ key: entry.id, kind: entry.kind, stamp, actor, text: entry.text, first: true }];
+        return clampLines(wrapText(entry.body, textWidth), 3).map((text, index) => ({
+            key: `${entry.id}:${index}`,
+            kind: entry.kind,
+            stamp: index === 0 ? stamp : '',
+            actor: index === 0 ? actor : '',
+            text,
+            first: index === 0,
+        }));
+    });
+}