soja-cli 1.4.0

package/dist/ui/screens/ChatScreen.js

@@ -0,0 +1,450 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { useEffect, useRef, useState } from 'react';
+import { taskRefsIn } from '../../domain/chat.js';
+import { formatTaskRef } from '../../domain/task.js';
+import { formatStamp } from '../../utils/time.js';
+import { terminalSafe, wrapText } from '../../utils/text.js';
+import { useAppState } from '../app-state.js';
+import { EmptyState } from '../components/EmptyState.js';
+import { useLayout } from '../hooks/use-layout.js';
+import { useQuery } from '../hooks/use-query.js';
+import { Layer } from '../input/dispatcher.js';
+import { useKeys } from '../input/KeyProvider.js';
+import { editText } from '../input/text-editing.js';
+import { palette, symbols, toneColors } from '../theme/theme.js';
+import { Clickable } from '../kit/Clickable.js';
+import { Spinner } from '../kit/Spinner.js';
+import { ScreenFrame } from './ScreenFrame.js';
+/** Channel list beside the messages from this width on. */
+const WIDE = 100;
+const SIDEBAR = 24;
+const COMPOSER_LINES = 4;
+const TOPIC = '__topic__';
+const ARCHIVE = '__archive__';
+const EMPTY_DRAFT = { value: '', cursor: 0 };
+export function ChatScreen({ active, initialChannel }) {
+    const { services } = useAppState();
+    const chat = services.chat;
+    if (!chat) {
+        return (_jsx(ScreenFrame, { hints: [['esc', 'back']], children: _jsx(EmptyState, { lines: ['The chat needs a team.', 'Sign in to a SOJA server with `soja login --server <url>`.'] }) }));
+    }
+    return _jsx(Chat, { chat: chat, active: active, initialChannel: initialChannel });
+}
+function Chat({ chat, active, initialChannel }) {
+    const { services, session, run, notify, invalidateQueries, openOverlay, go, syncStatus } = useAppState();
+    const { width, height, sidebar: layoutSidebar } = useLayout();
+    const [channelId, setChannelId] = useState(null);
+    const [focus, setFocus] = useState('input');
+    const [draft, setDraft] = useState(EMPTY_DRAFT);
+    const [replyTo, setReplyTo] = useState(null);
+    const [editing, setEditing] = useState(null);
+    const [selected, setSelected] = useState(0);
+    const channels = useQuery(() => chat.channels(session), `chat-channels:${session.workspace.id}`, [`chat-channels:${session.workspace.id}`]);
+    const list = channels.data ?? [];
+    const wanted = initialChannel?.replace(/^#/, '').toLowerCase();
+    const channel = list.find((candidate) => candidate.id === channelId) ?? list.find((candidate) => candidate.name === wanted) ?? list[0] ?? null;
+    const messages = useQuery(async () => (channel ? chat.messages(session, channel.id, 300) : []), `chat-messages:${channel?.id ?? ''}`, channel ? [`chat-messages:${channel.id}`] : []);
+    const items = messages.data ?? [];
+    const members = useQuery(() => services.workspaces.members(session), `members:${session.workspace.id}`, [`members:${session.workspace.id}`]);
+    const notices = useQuery(async () => ((await services.sync?.notices(session.workspace.id)) ?? []).filter((notice) => notice.field === 'chat'), `chat-notices:${session.workspace.id}`, [`chat-notices:${session.workspace.id}`]);
+    // Reading a channel marks it read (once per new message, not on every refresh).
+    const marked = useRef(new Map());
+    const latestSeq = Math.max(0, ...items.map((message) => message.seq ?? 0));
+    useEffect(() => {
+        if (!active || !channel || latestSeq <= channel.lastReadSeq || (marked.current.get(channel.id) ?? 0) >= latestSeq)
+            return;
+        marked.current.set(channel.id, latestSeq);
+        void chat.markRead(session, channel.id).then(() => invalidateQueries([
+            `chat-channels:${session.workspace.id}`,
+            `sidebar-channels:${session.workspace.id}`,
+            `chat-totals:${session.workspace.id}`,
+        ]), () => undefined);
+    }, [active, channel, latestSeq, chat, session, invalidateQueries]);
+    const current = items[Math.min(selected, items.length - 1)];
+    const switchTo = (next) => {
+        setChannelId(next.id);
+        setReplyTo(null);
+        setEditing(null);
+        setFocus('input');
+    };
+    const cycle = (step) => {
+        const open = list.filter((candidate) => !candidate.archivedAt);
+        const index = open.findIndex((candidate) => candidate.id === channel?.id);
+        const next = open[(index + step + open.length) % open.length];
+        if (next)
+            switchTo(next);
+    };
+    const pickChannel = () => openOverlay({
+        kind: 'picker',
+        title: 'Channels',
+        filterable: true,
+        initial: channel?.id ?? null,
+        options: [
+            ...list.map((candidate) => ({
+                value: candidate.id,
+                label: `#${candidate.name}`,
+                ...(candidate.unread ? { hint: `${candidate.unread} unread${candidate.mentions ? ` ${symbols.dot} @${candidate.mentions}` : ''}` } : {}),
+                ...(candidate.archivedAt ? { dim: true, hint: 'archived' } : {}),
+            })),
+            ...(channel
+                ? [
+                    { value: TOPIC, label: `Topic of #${channel.name}…`, hint: channel.topic ?? 'none' },
+                    ...(channel.name === 'general'
+                        ? []
+                        : [{ value: ARCHIVE, label: channel.archivedAt ? `Restore #${channel.name}` : `Archive #${channel.name}`, hint: 'owners', dim: true }]),
+                ]
+                : []),
+        ],
+        onSelect: (value) => {
+            if (value === TOPIC && channel)
+                return editTopic(channel);
+            if (value === ARCHIVE && channel) {
+                const archived = !channel.archivedAt;
+                return run(() => chat.updateChannel(session, channel.id, { archived }), archived ? `#${channel.name} archived` : `#${channel.name} restored`);
+            }
+            const next = list.find((candidate) => candidate.id === value);
+            if (next)
+                switchTo(next);
+        },
+        create: {
+            label: (query) => `Create #${query.trim().toLowerCase().replace(/^#/, '')}`,
+            onCreate: (query) => run(() => chat.createChannel(session, query).then((created) => setChannelId(created.id)), 'Channel created'),
+        },
+    });
+    const editTopic = (target) => openOverlay({
+        kind: 'prompt',
+        title: `Topic of #${target.name}`,
+        initial: target.topic ?? '',
+        placeholder: 'What this channel is for',
+        allowEmpty: true,
+        onSubmit: (topic) => run(() => chat.updateChannel(session, target.id, { topic: topic.trim() || null }), 'Topic saved'),
+    });
+    const reviewNotices = () => {
+        const sync = services.sync;
+        const pending = notices.data ?? [];
+        if (!sync || pending.length === 0)
+            return;
+        openOverlay({
+            kind: 'picker',
+            title: 'Not applied',
+            context: 'Chat',
+            options: pending.flatMap((notice) => [
+                ...(typeof notice.overwritten === 'string' ? [{ value: `restore:${notice.id}`, label: `Put the text back: ${oneLine(notice.overwritten)}` }] : []),
+                { value: `dismiss:${notice.id}`, label: `Dismiss: ${notice.message}`, dim: true },
+            ]),
+            onSelect: (value) => {
+                const [action, id] = value.split(':');
+                const notice = pending.find((candidate) => candidate.id === id);
+                if (!notice)
+                    return;
+                if (action === 'restore' && typeof notice.overwritten === 'string') {
+                    setDraft({ value: notice.overwritten, cursor: notice.overwritten.length });
+                    setFocus('input');
+                }
+                return run(() => sync.dismissNotice(notice.id));
+            },
+        });
+    };
+    const submit = () => {
+        const text = draft.value.trim();
+        if (!text || !channel)
+            return;
+        const target = editing;
+        const quoted = replyTo;
+        setDraft(EMPTY_DRAFT);
+        setReplyTo(null);
+        setEditing(null);
+        void run(() => (target ? chat.edit(session, target.id, text) : chat.send(session, channel.id, text, { replyToId: quoted?.id ?? null }))).then((ok) => {
+            // Keep what you wrote if it could not be queued.
+            if (!ok)
+                setDraft({ value: text, cursor: text.length });
+        });
+    };
+    /** `@an` + tab → `@angel `. Returns false when there is nothing to complete. */
+    const complete = () => {
+        const before = draft.value.slice(0, draft.cursor);
+        const match = /@([\w.-]*)$/.exec(before);
+        if (!match)
+            return false;
+        const prefix = (match[1] ?? '').toLowerCase();
+        const names = (members.data ?? []).map((member) => member.username).filter((name) => name !== session.user.username && name.toLowerCase().startsWith(prefix));
+        const [name] = names;
+        if (!name)
+            return true; // nothing matches; stay in the field
+        const start = before.length - prefix.length;
+        const value = `${draft.value.slice(0, start)}${name} ${draft.value.slice(draft.cursor)}`;
+        setDraft({ value, cursor: start + name.length + 1 });
+        return true;
+    };
+    const focusMessages = () => {
+        if (items.length === 0)
+            return;
+        setSelected(items.length - 1);
+        setFocus('messages');
+    };
+    useKeys(Layer.input, (input, key) => {
+        if (key.return && key.meta) {
+            setDraft(insert(draft, '\n'));
+            return true;
+        }
+        if (key.return) {
+            submit();
+            return true;
+        }
+        if (key.tab) {
+            if (!complete())
+                focusMessages();
+            return true;
+        }
+        if (key.escape && (replyTo || editing)) {
+            if (editing)
+                setDraft(EMPTY_DRAFT);
+            setReplyTo(null);
+            setEditing(null);
+            return true;
+        }
+        if (key.upArrow && !draft.value) {
+            focusMessages();
+            return true;
+        }
+        // A multi-line paste keeps its lines.
+        if (input.length > 1 && /[\r\n]/.test(input) && !key.ctrl && !key.meta) {
+            setDraft(insert(draft, terminalSafe(input)));
+            return true;
+        }
+        const next = editText(draft, input, key);
+        if (!next)
+            return false;
+        setDraft(next);
+        return true;
+    }, active && focus === 'input');
+    const openTask = (message) => {
+        const refs = taskRefsIn(message.body).map(formatTaskRef);
+        const [only] = refs;
+        if (!only)
+            notify('No task in this message.');
+        else if (refs.length === 1)
+            go({ type: 'push', route: { name: 'task', ref: only } });
+        else {
+            openOverlay({
+                kind: 'picker',
+                title: 'Open task',
+                options: refs.map((ref) => ({ value: ref, label: ref })),
+                onSelect: (ref) => go({ type: 'push', route: { name: 'task', ref } }),
+            });
+        }
+    };
+    useKeys(Layer.screen, (input, key) => {
+        // Ctrl+G is available while the composer is focused; TextInput leaves it
+        // unhandled, so the channel picker works without changing focus first.
+        if (key.ctrl && input.toLowerCase() === 'g') {
+            pickChannel();
+            return true;
+        }
+        if (key.ctrl || key.meta)
+            return false;
+        if (focus === 'input')
+            return false;
+        const message = current;
+        if (key.tab || input === 'i' || key.escape)
+            setFocus('input');
+        else if (input === 'j' || key.downArrow) {
+            if (selected >= items.length - 1)
+                setFocus('input');
+            else
+                setSelected(selected + 1);
+        }
+        else if (input === 'k' || key.upArrow) {
+            if (selected > 0)
+                setSelected(selected - 1);
+            else if (channel) {
+                void run(async () => {
+                    const count = await chat.loadOlder(session, channel.id);
+                    setSelected(count);
+                    if (count === 0)
+                        notify(`That is the beginning of #${channel.name}.`);
+                });
+            }
+        }
+        else if (input === '#')
+            pickChannel();
+        else if (input === ']')
+            cycle(1);
+        else if (input === '[')
+            cycle(-1);
+        else if (input === '!')
+            reviewNotices();
+        else if (!message || message.deletedAt)
+            return false;
+        else if (input === 'r') {
+            setReplyTo(message);
+            setEditing(null);
+            setFocus('input');
+        }
+        else if (input === 'e') {
+            if (!message.mine)
+                notify('You can only edit your own messages.', 'error');
+            else {
+                setEditing(message);
+                setReplyTo(null);
+                setDraft({ value: message.body, cursor: message.body.length });
+                setFocus('input');
+            }
+        }
+        else if (input === 'd') {
+            if (!message.mine)
+                notify('You can only delete your own messages.', 'error');
+            else {
+                openOverlay({
+                    kind: 'confirm',
+                    title: 'Delete this message?',
+                    message: `“${oneLine(message.body)}” is removed for everyone in the channel.`,
+                    confirmLabel: 'Delete for everyone',
+                    tone: 'danger',
+                    onConfirm: () => run(() => chat.remove(session, message.id), 'Message deleted'),
+                });
+            }
+        }
+        else if (input === 't') {
+            let ref = '';
+            void run(async () => {
+                ref = (await chat.taskFromMessage(session, message.id)).ref;
+            }).then((ok) => {
+                if (ok)
+                    notify(`Created ${ref} from the message`, 'success');
+            });
+        }
+        else if (key.return)
+            openTask(message);
+        else
+            return false;
+        return true;
+    }, active);
+    // ── Layout ───────────────────────────────────────────────────────────────
+    // The app sidebar already lists channels; the chat's own list is for when it is hidden.
+    const wide = width >= WIDE && layoutSidebar === 0;
+    const mainWidth = wide ? width - SIDEBAR - 2 : width;
+    const composerLines = composerRows(draft, mainWidth - 2).slice(-COMPOSER_LINES);
+    const noticeCount = notices.data?.length ?? 0;
+    const banner = editing ? 'Editing your message' : replyTo ? `Replying to ${replyTo.author ? `@${replyTo.author.username}` : 'a message'}: ${oneLine(replyTo.body)}` : null;
+    const areaRows = Math.max(3, height - 2 - composerLines.length - (banner ? 1 : 0) - (noticeCount ? 1 : 0));
+    const focusMessagesAt = (index) => {
+        setSelected(index);
+        setFocus('messages');
+    };
+    const rows = messageRows(items, mainWidth - 2);
+    // Pinned to the newest message; scrolls up only as far as the selection needs.
+    let start = Math.max(0, rows.length - areaRows);
+    const firstSelected = focus === 'messages' ? rows.findIndex((row) => row.index === selected) : -1;
+    if (firstSelected >= 0 && firstSelected < start)
+        start = firstSelected;
+    const visible = rows.slice(start, start + areaRows);
+    const hints = focus === 'input'
+        ? [
+            ['enter', editing ? 'save' : 'send'],
+            ['alt+enter', 'new line'],
+            ['ctrl+g', 'channels'],
+            ['tab', '@ complete / messages'],
+            ['esc', replyTo || editing ? 'cancel' : 'back'],
+        ]
+        : [
+            ...(noticeCount ? [['!', `${noticeCount} not applied`]] : []),
+            ['r', 'reply'],
+            ['t', 'task'],
+            ['e', 'edit'],
+            ['d', 'delete'],
+            ['enter', 'open task'],
+            ['#', 'channels'],
+            ['tab', 'write'],
+        ];
+    return (_jsx(ScreenFrame, { title: channel ? `#${channel.name}` : 'Chat', aside: syncStatus?.online === false
+            ? 'offline · sent when you reconnect'
+            : channel?.archivedAt
+                ? 'archived'
+                : (channel?.topic ?? (wide ? undefined : '# channels')), hints: hints, children: _jsxs(Box, { children: [wide ? _jsx(Sidebar, { channels: list, current: channel?.id ?? null }) : null, _jsxs(Box, { flexDirection: "column", width: mainWidth, children: [_jsx(Clickable, { onWheel: (direction) => focusMessagesAt(Math.max(0, Math.min(items.length - 1, (focus === 'messages' ? selected : items.length - 1) + direction))), active: active, flexDirection: "column", children: _jsx(Box, { flexDirection: "column", height: areaRows, justifyContent: "flex-end", children: !channel ? (channels.data ? _jsx(EmptyState, { lines: ['No channels yet.', 'They arrive with the first sync.'], icon: symbols.unread }) : _jsx(Spinner, { label: "Loading\u2026" })) : items.length === 0 ? (_jsx(EmptyState, { lines: [`No messages in #${channel.name} yet.`, 'Say hi.'], icon: symbols.unread })) : (visible.map((row) => (_jsx(Clickable, { onClick: () => focusMessagesAt(row.index), active: active, children: _jsx(MessageRow, { row: row, message: items[row.index], selected: focus === 'messages' && row.index === selected }) }, row.key)))) }) }), noticeCount ? (_jsx(Text, { color: palette.danger, wrap: "truncate-end", children: `! ${notices.data?.[0]?.message ?? ''}${noticeCount > 1 ? ` (+${noticeCount - 1})` : ''} ${symbols.dot} tab, then ! to review` })) : null, banner ? (_jsx(Text, { dimColor: true, wrap: "truncate-end", children: `${symbols.reply} ${banner} ${symbols.dot} esc cancel` })) : null, _jsx(Clickable, { onClick: () => setFocus('input'), active: active, children: _jsx(Composer, { lines: composerLines, active: active && focus === 'input', placeholder: channel ? `Message #${channel.name}` : 'Message' }) })] })] }) }));
+}
+function Sidebar({ channels, current }) {
+    return (_jsxs(Box, { flexDirection: "column", width: SIDEBAR, marginRight: 2, flexShrink: 0, children: [_jsx(Text, { dimColor: true, bold: true, children: "CHANNELS" }), channels.map((channel) => {
+                const here = channel.id === current;
+                return (_jsxs(Box, { justifyContent: "space-between", children: [_jsx(Text, { wrap: "truncate-end", color: here ? palette.accent : undefined, dimColor: Boolean(channel.archivedAt), bold: here || channel.unread > 0, children: `${here ? symbols.pointer : ' '}#${channel.name}` }), channel.unread ? (_jsx(Text, { color: channel.mentions ? palette.warning : palette.accent, children: channel.mentions ? `@${channel.mentions}` : String(channel.unread) })) : null] }, channel.id));
+            }), _jsx(Text, { dimColor: true, children: '[ ] switch  # all' })] }));
+}
+/** Each author keeps a color, so a conversation reads at a glance. */
+const AUTHOR_TONES = ['info', 'merged', 'warning', 'success', 'danger'];
+function authorColor(message) {
+    if (message.mine)
+        return palette.accent;
+    const name = message.author?.username ?? '';
+    let hash = 0;
+    for (const char of name)
+        hash = (hash * 31 + char.charCodeAt(0)) >>> 0;
+    return toneColors(AUTHOR_TONES[hash % AUTHOR_TONES.length] ?? 'info').fg;
+}
+function MessageRow({ row, message, selected }) {
+    if (!message)
+        return null;
+    const background = selected ? palette.selection : message.mentionsMe ? palette.warningSoft : undefined;
+    const bg = background ? { backgroundColor: background } : {};
+    if (row.kind === 'quote') {
+        return (_jsx(Box, { flexGrow: 1, ...bg, children: _jsx(Text, { wrap: "truncate-end", color: palette.faint, children: ` ${' '.repeat(row.stamp.length)}${row.text}` }) }));
+    }
+    const textColor = message.deletedAt ? palette.faint : palette.text;
+    return (_jsx(Box, { flexGrow: 1, ...bg, children: _jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: palette.accent, children: selected ? symbols.pointer : ' ' }), _jsx(Text, { color: palette.faint, children: row.stamp }), _jsx(Text, { bold: true, color: authorColor(message), children: row.author }), _jsx(Text, { color: textColor, italic: Boolean(message.deletedAt), children: row.text }), row.kind === 'first' && message.pending ? _jsx(Text, { color: palette.faint, children: ` ${symbols.pending}` }) : null, row.kind === 'first' && message.editedAt && !message.deletedAt ? _jsx(Text, { color: palette.faint, children: ' (edited)' }) : null] }) }));
+}
+function Composer({ lines, active, placeholder }) {
+    const empty = lines.length === 1 && lines[0]?.text === '';
+    return (_jsx(Box, { flexDirection: "column", flexGrow: 1, borderStyle: "round", borderColor: active ? palette.borderFocus : palette.border, paddingX: 1, children: lines.map((line, index) => (_jsxs(Text, { children: [_jsx(Text, { color: active ? palette.accent : undefined, dimColor: !active, children: index === 0 ? '› ' : '  ' }), empty ? (_jsxs(_Fragment, { children: [active ? _jsx(Text, { inverse: true, children: placeholder.slice(0, 1) }) : null, _jsx(Text, { dimColor: true, children: active ? placeholder.slice(1) : placeholder })] })) : line.cursor === null || !active ? (_jsx(Text, { children: line.text })) : (_jsxs(_Fragment, { children: [_jsx(Text, { children: line.text.slice(0, line.cursor) }), _jsx(Text, { inverse: true, children: line.text.slice(line.cursor, line.cursor + 1) || ' ' }), _jsx(Text, { children: line.text.slice(line.cursor + 1) })] }))] }, index))) }));
+}
+/** The draft split into display lines, with the cursor placed on its line. */
+function composerRows(draft, width) {
+    const size = Math.max(4, width);
+    const rows = [];
+    let offset = 0;
+    for (const paragraph of draft.value.split('\n')) {
+        const chunks = paragraph.length === 0 ? [''] : (paragraph.match(new RegExp(`.{1,${size}}`, 'gs')) ?? ['']);
+        for (const [index, chunk] of chunks.entries()) {
+            const last = index === chunks.length - 1;
+            const inside = draft.cursor >= offset && (draft.cursor < offset + chunk.length || (last && draft.cursor === offset + chunk.length));
+            rows.push({ text: chunk, cursor: inside ? draft.cursor - offset : null });
+            offset += chunk.length;
+        }
+        offset += 1; // the newline
+    }
+    return rows;
+}
+function messageRows(messages, width) {
+    const now = new Date();
+    const authorWidth = Math.min(16, Math.max(6, ...messages.map((message) => (message.author?.username.length ?? 7) + 2)));
+    const stampWidth = 7;
+    const textWidth = Math.max(10, width - 1 - stampWidth - authorWidth);
+    return messages.flatMap((message, index) => {
+        const stamp = formatStamp(message.createdAt, now).padEnd(stampWidth);
+        const author = (message.author ? `@${message.author.username}` : 'someone').slice(0, authorWidth - 1).padEnd(authorWidth);
+        const rows = [];
+        if (message.replyTo) {
+            const who = message.replyTo.author ? `@${message.replyTo.author.username}: ` : '';
+            const quoted = message.replyTo.deleted ? 'deleted message' : oneLine(message.replyTo.body);
+            rows.push({ key: `${message.id}:q`, index, kind: 'quote', stamp, author: '', text: `${symbols.reply} ${who}${quoted}` });
+        }
+        const lines = message.deletedAt ? ['message deleted'] : wrapText(message.body, textWidth);
+        for (const [line, text] of lines.entries()) {
+            rows.push({
+                key: `${message.id}:${line}`,
+                index,
+                kind: line === 0 ? 'first' : 'more',
+                stamp: line === 0 ? stamp : ' '.repeat(stampWidth),
+                author: line === 0 ? author : ' '.repeat(authorWidth),
+                text,
+            });
+        }
+        return rows;
+    });
+}
+function insert(draft, text) {
+    return { value: draft.value.slice(0, draft.cursor) + text + draft.value.slice(draft.cursor), cursor: draft.cursor + text.length };
+}
+function oneLine(text) {
+    const [first = ''] = text.split('\n');
+    return first.length > 60 ? `${first.slice(0, 59)}${symbols.ellipsis}` : first;
+}

package/dist/ui/screens/HelpScreen.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { APP_DESCRIPTION, APP_NAME } from '../branding/brand.js';
+import { useLayout } from '../hooks/use-layout.js';
+import { palette } from '../theme/theme.js';
+import { Keycap } from '../kit/Keycap.js';
+import { Panel } from '../kit/Panel.js';
+import { ScreenFrame } from './ScreenFrame.js';
+const SECTIONS = [
+    [
+        'Move',
+        [
+            ['j / k', 'Down / up'],
+            ['g / G', 'Top / bottom'],
+            ['enter', 'Open'],
+            ['esc / q', 'Back'],
+            ['h / l', 'Previous / next filter'],
+            ['1–7', 'Jump to filter'],
+        ],
+    ],
+    [
+        'Tasks',
+        [
+            ['n', 'New task'],
+            ['s', 'Status'],
+            ['p', 'Priority (in a task)'],
+            ['a', 'Assign'],
+            ['c', 'Comment'],
+            ['e', 'Edit any field'],
+            ['d', 'Description'],
+            ['m', 'Move to project'],
+            ['t', 'Type'],
+            ['r', 'Requester'],
+            ['x', 'Done / reopen'],
+        ],
+    ],
+    [
+        'Git (in a task)',
+        [
+            ['b', 'Start / switch branch'],
+            ['g', 'Git menu'],
+            ['C', 'Commit (pick files)'],
+        ],
+    ],
+    [
+        'Chat (remote mode)',
+        [
+            ['#', 'Open the chat'],
+            ['enter / alt+enter', 'Send / new line'],
+            ['tab', '@ complete, or pick a message'],
+            ['r / t', 'Reply / task from message'],
+            ['e / d', 'Edit / delete yours'],
+            ['ctrl+g', 'Pick / create channel'],
+            ['[ ] / #', 'Switch channel'],
+        ],
+    ],
+    [
+        'Go to',
+        [
+            ['/', 'Search'],
+            [': or ctrl+k', 'Commands'],
+            ['p', 'Projects'],
+            ['w', 'Workspaces'],
+            ['A', 'Access approvals (CEO, remote mode)'],
+            ['r', 'Link repo (in Projects)'],
+        ],
+    ],
+    [
+        'Mouse',
+        [
+            ['click', 'Select; again to open'],
+            ['wheel', 'Scroll lists and chat'],
+            ['click outside', 'Close a window'],
+            ['shift+drag', 'Select text to copy'],
+        ],
+    ],
+    [
+        'General',
+        [
+            ['?', 'Help'],
+            ['q', 'Quit (from home)'],
+            ['ctrl+c', 'Quit now'],
+        ],
+    ],
+];
+export function HelpScreen() {
+    const { width } = useLayout();
+    const columns = width >= 118 ? 3 : width >= 76 ? 2 : 1;
+    // Sections go to the shortest column, in order, so the columns end at similar heights.
+    const groups = Array.from({ length: columns }, () => []);
+    const heights = Array.from({ length: columns }, () => 0);
+    for (const section of SECTIONS) {
+        const shortest = heights.indexOf(Math.min(...heights));
+        groups[shortest]?.push(section);
+        heights[shortest] = (heights[shortest] ?? 0) + section[1].length + 2;
+    }
+    const columnWidth = Math.floor((width - (columns - 1)) / columns);
+    return (_jsx(ScreenFrame, { title: `${APP_NAME} Help`, aside: APP_DESCRIPTION, hints: [['esc', 'back']], children: _jsx(Box, { gap: 1, children: groups.map((group, index) => (_jsx(Box, { flexDirection: "column", width: columnWidth, children: group.map(([title, keys]) => (_jsx(Panel, { title: title, children: keys.map(([key, description]) => (_jsxs(Box, { children: [_jsx(Box, { width: Math.max(...keys.map(([candidate]) => candidate.length)) + 4, flexShrink: 0, children: _jsx(Keycap, { keys: key }) }), _jsx(Text, { color: palette.muted, wrap: "truncate-end", children: description })] }, key))) }, title))) }, index))) }) }));
+}

package/dist/ui/screens/ProjectsScreen.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { basename } from 'node:path';
+import { Box, Text } from 'ink';
+import { useAppState } from '../app-state.js';
+import { EmptyState } from '../components/EmptyState.js';
+import { EMPTY_PROJECTS } from '../copy.js';
+import { useFlows } from '../hooks/use-flows.js';
+import { useLayout } from '../hooks/use-layout.js';
+import { useList } from '../hooks/use-list.js';
+import { useQuery } from '../hooks/use-query.js';
+import { Layer } from '../input/dispatcher.js';
+import { useKeys } from '../input/KeyProvider.js';
+import { palette, symbols } from '../theme/theme.js';
+import { Clickable } from '../kit/Clickable.js';
+import { Gauge } from '../kit/Gauge.js';
+import { ScreenFrame } from './ScreenFrame.js';
+export function ProjectsScreen({ active }) {
+    const { services, session, go } = useAppState();
+    const { width, height } = useLayout();
+    const query = useQuery(() => services.projects.list(session), `projects:${session.workspace.id}`, [`projects:${session.workspace.id}`, `tasks:${session.workspace.id}`]);
+    const projects = query.data ?? [];
+    const rows = Math.max(1, height - 3);
+    const list = useList(projects.length, rows);
+    const flows = useFlows();
+    useKeys(Layer.screen, (input, key) => {
+        if (list.handleKey(input, key))
+            return true;
+        if (key.ctrl || key.meta)
+            return false;
+        const project = projects[list.index];
+        if (key.return && project)
+            go({ type: 'push', route: { name: 'project', projectId: project.id } });
+        else if (input === 'n')
+            flows.newProject();
+        else if (input === 'r' && project)
+            void flows.pickRepository(project);
+        else if (input === 'e' && project)
+            flows.editProject(project);
+        else
+            return false;
+        return true;
+    }, active);
+    const wide = width >= 88;
+    // Fixed columns: pointer, key, active; then progress, review, blocked, done gauge and repo when wide.
+    const nameWidth = Math.max(10, width - 2 - 9 - 8 - (wide ? 10 + 8 + 9 + 17 + 16 : 0) - 1);
+    return (_jsx(ScreenFrame, { title: "Projects", aside: projects.length ? `${projects.length} project${projects.length === 1 ? '' : 's'}` : undefined, hints: [
+            ['↑↓', 'move'],
+            ['enter', 'open'],
+            ['n', 'new project'],
+            ['r', 'link repo'],
+            ['e', 'edit'],
+            ['esc', 'back'],
+        ], children: projects.length === 0 && !query.loading ? (_jsx(EmptyState, { lines: EMPTY_PROJECTS, icon: symbols.dot })) : (_jsxs(Clickable, { onWheel: (direction) => list.select(list.index + direction), active: active, flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Box, { width: 2 }), _jsx(Header, { width: 9, text: "KEY" }), _jsx(Box, { width: nameWidth, flexShrink: 0, children: _jsx(Text, { color: palette.faint, bold: true, children: "NAME" }) }), _jsx(Header, { width: 8, text: "ACTIVE", right: true }), wide ? (_jsxs(_Fragment, { children: [_jsx(Header, { width: 10, text: "PROGRESS", right: true }), _jsx(Header, { width: 8, text: "REVIEW", right: true }), _jsx(Header, { width: 9, text: "BLOCKED", right: true }), _jsx(Box, { width: 17, paddingLeft: 3, children: _jsx(Text, { color: palette.faint, bold: true, children: "DONE" }) }), _jsx(Box, { width: 16, paddingLeft: 2, children: _jsx(Text, { color: palette.faint, bold: true, children: "REPO" }) })] })) : null] }), projects.slice(list.offset, list.offset + rows - 1).map((project, position) => {
+                    const index = list.offset + position;
+                    const selected = index === list.index;
+                    const bg = selected ? { backgroundColor: palette.selection } : {};
+                    const total = Object.values(project.counts).reduce((sum, count) => sum + count, 0);
+                    return (_jsx(Clickable, { active: active, onClick: () => (selected ? go({ type: 'push', route: { name: 'project', projectId: project.id } }) : list.select(index)), children: _jsxs(Box, { flexGrow: 1, ...bg, children: [_jsx(Box, { width: 2, children: _jsx(Text, { color: palette.accent, children: selected ? symbols.pointer : ' ' }) }), _jsx(Box, { width: 9, children: _jsx(Text, { color: selected ? palette.accent : palette.muted, bold: selected, children: project.key }) }), _jsx(Box, { width: nameWidth, flexShrink: 0, children: _jsx(Text, { color: palette.text, bold: selected, wrap: "truncate-end", children: project.name }) }), _jsx(Count, { width: 8, value: project.active, color: palette.text }), wide ? (_jsxs(_Fragment, { children: [_jsx(Count, { width: 10, value: project.counts.in_progress, color: palette.warning }), _jsx(Count, { width: 8, value: project.counts.review, color: palette.info }), _jsx(Count, { width: 9, value: project.counts.blocked, color: palette.danger }), _jsx(Box, { width: 17, paddingLeft: 3, children: _jsx(Gauge, { value: project.counts.done, total: total, width: 8 }) }), _jsx(Box, { width: 16, paddingLeft: 2, children: _jsx(Text, { color: project.repositoryPath ? palette.muted : palette.faint, wrap: "truncate-end", children: project.repositoryPath ? basename(project.repositoryPath) : 'not linked · r' }) })] })) : null] }) }, project.id));
+                })] })) }));
+}
+function Header({ width, text, right = false }) {
+    return (_jsx(Box, { width: width, justifyContent: right ? 'flex-end' : 'flex-start', children: _jsx(Text, { color: palette.faint, bold: true, children: text }) }));
+}
+function Count({ width, value, color }) {
+    return (_jsx(Box, { width: width, justifyContent: "flex-end", children: _jsx(Text, { color: value ? color : palette.faint, children: value ? String(value) : symbols.dot }) }));
+}

package/dist/ui/screens/ScreenFrame.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useHints } from '../chrome/context.js';
+import { useLayout } from '../hooks/use-layout.js';
+import { Panel } from '../kit/Panel.js';
+/**
+ * A screen: one panel filling the main area, titled in its border. Its
+ * shortcuts go to the status bar while it is on top. Content keeps its
+ * natural height and is clipped, never squeezed into overlapping rows.
+ */
+export function ScreenFrame({ hints, title, aside, children }) {
+    useHints(hints);
+    const { height } = useLayout();
+    return (_jsx(Panel, { title: title, aside: aside, focused: true, height: height + 2, flexGrow: 1, children: children }));
+}