soja-cli 1.4.0

package/dist/ui/overlays/NewTaskOverlay.js

@@ -0,0 +1,117 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { useState } from 'react';
+import { TASK_PRIORITIES, TASK_TYPES } from '../../domain/task.js';
+import { useAppState } from '../app-state.js';
+import { TextField } from '../components/TextField.js';
+import { Button } from '../kit/Button.js';
+import { Clickable } from '../kit/Clickable.js';
+import { useQuery } from '../hooks/use-query.js';
+import { Layer } from '../input/dispatcher.js';
+import { useKeys } from '../input/KeyProvider.js';
+import { palette, symbols, toneColors } from '../theme/theme.js';
+import { memberOptions, priorityOptions, projectOptions, NONE, typeOptions, fromOption } from './options.js';
+import { OverlayFrame } from './OverlayFrame.js';
+import { completeFrom } from './PromptOverlay.js';
+const FIELDS = ['title', 'project', 'type', 'priority', 'assignee', 'requester'];
+const LABELS = {
+    title: 'Title',
+    project: 'Project',
+    type: 'Type',
+    priority: 'Priority',
+    assignee: 'Assignee',
+    requester: 'Requested by',
+};
+/**
+ * Quick capture. Only the title is required and Enter creates from any
+ * field, so "type title, Enter" is the whole flow when defaults are fine.
+ */
+export function NewTaskOverlay({ spec }) {
+    const { services, session, closeOverlay, run } = useAppState();
+    const context = useQuery(async () => {
+        const [projects, members, requesters] = await Promise.all([
+            services.projects.list(session),
+            services.workspaces.members(session),
+            services.tasks.knownRequesters(session),
+        ]);
+        return { projects: projectOptions(projects), members: memberOptions(members, session.user.id), requesters };
+    }, `new-task:${session.workspace.id}`);
+    const [focus, setFocus] = useState('title');
+    const [title, setTitle] = useState('');
+    const [requester, setRequester] = useState('');
+    const [projectId, setProjectId] = useState(spec.projectId ?? NONE);
+    const [type, setType] = useState('feature');
+    const [priority, setPriority] = useState('medium');
+    const [assigneeId, setAssigneeId] = useState(session.user.id);
+    const [busy, setBusy] = useState(false);
+    const projects = context.data?.projects ?? [];
+    const members = context.data?.members ?? [];
+    const requesters = context.data?.requesters ?? [];
+    const completion = focus === 'requester' ? completeFrom(requester, requesters) : null;
+    const create = async () => {
+        if (busy)
+            return;
+        setBusy(true);
+        const created = await run(() => services.tasks.create(session, {
+            title,
+            projectId: fromOption(projectId),
+            type,
+            priority,
+            assigneeId: fromOption(assigneeId),
+            requester,
+        }), `Task created: ${title.trim()}`);
+        setBusy(false);
+        if (created)
+            closeOverlay(spec);
+    };
+    const cycle = (values, current, step) => values[(values.indexOf(current) + step + values.length) % values.length] ?? current;
+    const cycleOption = (options, current, step) => cycle(options.map((option) => option.value), current, step);
+    const moveFocus = (direction) => setFocus(cycle(FIELDS, focus, direction));
+    const step = (field, direction) => {
+        if (field === 'project')
+            setProjectId(cycleOption(projects, projectId, direction));
+        if (field === 'type')
+            setType(cycle(TASK_TYPES, type, direction));
+        if (field === 'priority')
+            setPriority(cycle([...TASK_PRIORITIES].reverse(), priority, direction));
+        if (field === 'assignee')
+            setAssigneeId(cycleOption(members, assigneeId, direction));
+    };
+    useKeys(Layer.overlay, (input, key) => {
+        if (key.escape)
+            closeOverlay(spec);
+        else if (key.return)
+            void create();
+        else if (key.tab && completion)
+            setRequester(completion);
+        else if ((key.tab && !key.shift) || key.downArrow)
+            moveFocus(1);
+        else if ((key.tab && key.shift) || key.upArrow)
+            moveFocus(-1);
+        else if (focus !== 'title' && focus !== 'requester' && (key.leftArrow || key.rightArrow || input === ' ' || input === 'h' || input === 'l')) {
+            step(focus, key.leftArrow || input === 'h' ? -1 : 1);
+        }
+        return true;
+    });
+    const option = (options, value) => options.find((candidate) => candidate.value === value);
+    /** `‹ Feature ›`: a value you change with ←/→ or by clicking it. */
+    const choice = (field, picked) => {
+        const focused = focus === field;
+        const color = picked?.tone ? toneColors(picked.tone).fg : picked?.dim ? palette.muted : palette.text;
+        return (_jsxs(Clickable, { onClick: () => (focused ? step(field, 1) : setFocus(field)), layer: Layer.overlay, children: [_jsxs(Text, { backgroundColor: focused ? palette.selection : palette.neutralSoft, children: [_jsx(Text, { color: focused ? palette.accent : palette.faint, children: ' ‹ ' }), _jsx(Text, { color: color, bold: focused, children: picked?.label ?? '—' }), _jsx(Text, { color: focused ? palette.accent : palette.faint, children: ' › ' })] }), picked?.hint && focused ? _jsx(Text, { color: palette.muted, children: `  ${picked.hint}` }) : null] }));
+    };
+    const rows = {
+        title: _jsx(TextField, { value: title, onChange: setTitle, active: focus === 'title', placeholder: "What needs to happen?", width: 46 }),
+        project: choice('project', option(projects, projectId)),
+        type: choice('type', option(typeOptions, type)),
+        priority: choice('priority', option(priorityOptions, priority)),
+        assignee: choice('assignee', option(members, assigneeId)),
+        requester: (_jsxs(Box, { children: [_jsx(TextField, { value: requester, onChange: setRequester, active: focus === 'requester', placeholder: requesters[0] ?? 'Marketing, Finance…', width: 30 }), completion ? _jsx(Text, { color: palette.muted, children: `  tab → ${completion}` }) : null] })),
+    };
+    return (_jsxs(OverlayFrame, { title: "New task", context: session.workspace.name, width: 70, hints: [
+            ['enter', 'create'],
+            ['tab ↓', 'next field'],
+            ['←→', 'change'],
+            ['esc', 'cancel'],
+        ], children: [FIELDS.map((field) => (_jsx(Clickable, { onClick: () => setFocus(field), layer: Layer.overlay, children: _jsxs(Box, { marginBottom: field === 'title' ? 1 : 0, flexGrow: 1, children: [_jsx(Box, { width: 15, flexShrink: 0, children: _jsxs(Text, { color: focus === field ? palette.accent : palette.muted, bold: focus === field, children: [focus === field ? `${symbols.pointer} ` : '  ', LABELS[field]] }) }), rows[field]] }) }, field))), _jsxs(Box, { marginTop: 1, justifyContent: "space-between", children: [_jsx(Text, { color: palette.faint, children: "Only the title is required." }), _jsxs(Box, { gap: 2, children: [_jsx(Button, { label: "Cancel", onPress: () => closeOverlay(spec) }), _jsx(Button, { label: "Create task", variant: "primary", onPress: () => void create() })] })] })] }));
+}

package/dist/ui/overlays/OverlayFrame.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { useRef } from 'react';
+import { useAppState } from '../app-state.js';
+import { useMeasure } from '../hooks/use-measure.js';
+import { useTerminalSize } from '../hooks/use-terminal-size.js';
+import { useHints } from '../chrome/context.js';
+import { Layer } from '../input/dispatcher.js';
+import { Clickable } from '../kit/Clickable.js';
+import { Panel } from '../kit/Panel.js';
+import { palette } from '../theme/theme.js';
+/**
+ * A floating window over the screen, centered, on a raised surface. The
+ * screen stays visible behind it; clicking outside closes it, like Esc.
+ */
+export function OverlayFrame({ title, context, hints, width = 76, children }) {
+    useHints(hints);
+    const { closeOverlay } = useAppState();
+    const { columns, rows } = useTerminalSize();
+    const ref = useRef(null);
+    const { height } = useMeasure(ref);
+    const hasMeasured = height > 0;
+    const shown = Math.min(width, columns - 4);
+    const longContext = context !== undefined && context.length + title.length + 10 > shown;
+    const top = hasMeasured ? Math.max(1, Math.floor((rows - height) / 2)) : 2;
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { position: "absolute", top: 0, left: 0, width: columns, height: rows, children: _jsx(Clickable, { onClick: () => closeOverlay(), layer: Layer.overlay, width: columns, flexGrow: 1, children: _jsx(Box, { width: columns, height: rows }) }) }), _jsx(Box, { ref: ref, position: "absolute", top: top, left: Math.max(0, Math.floor((columns - shown) / 2)), width: shown, flexDirection: "column", children: _jsx(Clickable, { onClick: () => undefined, layer: Layer.overlay, flexDirection: "column", children: _jsx(Panel, { title: title, aside: longContext ? undefined : context, focused: true, backgroundColor: palette.surface, width: shown, children: _jsxs(Box, { flexDirection: "column", paddingY: 0, children: [longContext ? (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: palette.muted, children: context }) })) : null, children] }) }) }) })] }));
+}
+/** Rows a window can give its list or content (the window floats with a margin). */
+export function useOverlayHeight() {
+    return Math.max(3, useTerminalSize().rows - 10);
+}
+/** Width available inside a window of `width` columns. */
+export function useOverlayWidth(width = 76) {
+    return Math.max(20, Math.min(width, useTerminalSize().columns - 4) - 4);
+}

package/dist/ui/overlays/PickerOverlay.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { useState } from 'react';
+import { useAppState } from '../app-state.js';
+import { TextField } from '../components/TextField.js';
+import { useList } from '../hooks/use-list.js';
+import { Layer } from '../input/dispatcher.js';
+import { useKeys } from '../input/KeyProvider.js';
+import { Clickable } from '../kit/Clickable.js';
+import { ScrollBar } from '../kit/ScrollBar.js';
+import { palette, symbols, toneColors } from '../theme/theme.js';
+import { OverlayFrame, useOverlayHeight } from './OverlayFrame.js';
+const CREATE = '__create__';
+export function matchOptions(options, query) {
+    const needle = query.trim().toLowerCase();
+    if (!needle)
+        return [...options];
+    return options.filter((option) => `${option.label} ${option.hint ?? ''}`.toLowerCase().includes(needle));
+}
+export function PickerOverlay({ spec }) {
+    const { closeOverlay } = useAppState();
+    const [query, setQuery] = useState('');
+    const [busy, setBusy] = useState(false);
+    const height = Math.min(14, useOverlayHeight() - (spec.filterable ? 3 : 0));
+    const matches = matchOptions(spec.options, query);
+    const canCreate = Boolean(spec.create && query.trim() && matches.length === 0);
+    const items = canCreate && spec.create ? [{ value: CREATE, label: spec.create.label(query.trim()) }] : matches;
+    const initialIndex = Math.max(0, spec.options.findIndex((option) => option.value === spec.initial));
+    const list = useList(items.length, height, !spec.filterable, initialIndex);
+    const choose = async (option) => {
+        if (!option || busy)
+            return;
+        setBusy(true);
+        const result = option.value === CREATE && spec.create ? await spec.create.onCreate(query.trim()) : await spec.onSelect(option.value);
+        setBusy(false);
+        if (result !== false)
+            closeOverlay(spec);
+    };
+    useKeys(Layer.overlay, (input, key) => {
+        if (key.escape)
+            closeOverlay(spec);
+        else if (key.return)
+            void choose(items[list.index]);
+        else if (list.handleKey(input, key))
+            return true;
+        else if (!spec.filterable && /^[1-9]$/.test(input))
+            void choose(items[Number(input) - 1]);
+        return true; // modal: nothing below reacts while a picker is open
+    });
+    const visible = items.slice(list.offset, list.offset + height);
+    const labelWidth = Math.max(8, ...items.map((option) => option.label.length)) + 2;
+    const hintWidth = Math.max(0, ...items.map((option) => option.hint?.length ?? 0));
+    // Wide enough for the options and, when possible, for the title and context on one line.
+    const width = Math.min(96, Math.max(44, labelWidth + hintWidth + 14, (spec.context?.length ?? 0) + spec.title.length + 12));
+    return (_jsxs(OverlayFrame, { title: spec.title, context: spec.context, width: width, hints: [
+            ['↑↓', 'move'],
+            ['enter', 'select'],
+            ...(spec.filterable ? [] : [['1-9', 'pick']]),
+            ['esc', 'cancel'],
+        ], children: [spec.filterable ? (_jsx(Box, { marginBottom: 1, children: _jsx(TextField, { value: query, onChange: (next) => {
+                        setQuery(next);
+                        list.select(0);
+                    }, placeholder: "Type to filter" }) })) : null, items.length === 0 ? _jsx(Text, { color: palette.faint, children: "No matches." }) : null, _jsxs(Box, { children: [_jsx(Clickable, { onWheel: (direction) => list.select(list.index + direction), layer: Layer.overlay, flexDirection: "column", flexGrow: 1, children: visible.map((option, position) => {
+                            const index = list.offset + position;
+                            const selected = index === list.index;
+                            const current = option.value === spec.initial;
+                            const bg = selected ? { backgroundColor: palette.selection } : {};
+                            const tone = option.tone ? toneColors(option.tone).fg : undefined;
+                            const color = option.value === CREATE ? palette.accent : option.dim ? palette.muted : (tone ?? palette.text);
+                            return (_jsx(Clickable, { onClick: () => void choose(option), layer: Layer.overlay, children: _jsxs(Box, { flexGrow: 1, ...bg, children: [_jsx(Text, { color: palette.accent, ...bg, children: selected ? `${symbols.pointer} ` : '  ' }), !spec.filterable ? _jsx(Text, { color: palette.faint, ...bg, children: index < 9 ? `${index + 1} ` : '  ' }) : null, _jsx(Box, { width: labelWidth, flexShrink: 0, children: _jsx(Text, { color: color, bold: selected, ...bg, children: option.label }) }), _jsx(Box, { flexGrow: 1, flexShrink: 1, children: option.hint ? (_jsx(Text, { color: palette.muted, wrap: "truncate-middle", ...bg, children: option.hint })) : null }), current ? _jsx(Text, { color: palette.accent, ...bg, children: ` ${symbols.check} ` }) : null] }) }, option.value));
+                        }) }), _jsx(ScrollBar, { total: items.length, visible: height, offset: list.offset, height: Math.min(height, items.length) })] })] }));
+}

package/dist/ui/overlays/PromptOverlay.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { useState } from 'react';
+import { useAppState } from '../app-state.js';
+import { TextField } from '../components/TextField.js';
+import { palette } from '../theme/theme.js';
+import { Layer } from '../input/dispatcher.js';
+import { useKeys } from '../input/KeyProvider.js';
+import { OverlayFrame } from './OverlayFrame.js';
+export function completeFrom(value, suggestions) {
+    const needle = value.trim().toLowerCase();
+    if (!needle)
+        return null;
+    const match = suggestions.find((suggestion) => suggestion.toLowerCase().startsWith(needle));
+    return match && match !== value ? match : null;
+}
+export function PromptOverlay({ spec }) {
+    const { closeOverlay, notify } = useAppState();
+    const [value, setValue] = useState(spec.initial ?? '');
+    const [busy, setBusy] = useState(false);
+    const suggestions = spec.suggestions ?? [];
+    const completion = completeFrom(value, suggestions);
+    const submit = async () => {
+        if (busy)
+            return;
+        if (!spec.allowEmpty && !value.trim()) {
+            notify('Type something first.', 'error');
+            return;
+        }
+        setBusy(true);
+        const result = await spec.onSubmit(value);
+        setBusy(false);
+        if (result !== false)
+            closeOverlay(spec);
+    };
+    useKeys(Layer.overlay, (_input, key) => {
+        if (key.escape)
+            closeOverlay(spec);
+        else if (key.return)
+            void submit();
+        else if (key.tab && completion)
+            setValue(completion);
+        return true;
+    });
+    const others = suggestions.filter((suggestion) => suggestion !== value).slice(0, 6);
+    return (_jsxs(OverlayFrame, { title: spec.title, context: spec.context, hints: [
+            ['enter', 'save'],
+            ...(suggestions.length ? [['tab', 'complete']] : []),
+            ['esc', 'cancel'],
+        ], children: [_jsx(TextField, { value: value, onChange: setValue, placeholder: spec.placeholder }), completion ? (_jsx(Text, { color: palette.muted, children: `tab → ${completion}` })) : others.length ? (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: palette.faint, wrap: "truncate-end", children: `known: ${others.join(', ')}` }) })) : null] }));
+}

package/dist/ui/overlays/SearchOverlay.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { useState } from 'react';
+import { useAppState } from '../app-state.js';
+import { EmptyState } from '../components/EmptyState.js';
+import { TaskTable, tableRows } from '../components/TaskTable.js';
+import { TextField } from '../components/TextField.js';
+import { palette } from '../theme/theme.js';
+import { EMPTY_SEARCH } from '../copy.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 { OverlayFrame, useOverlayHeight, useOverlayWidth } from './OverlayFrame.js';
+const WIDTH = 104;
+/** Live search by title or ID. Results update on every keystroke. */
+export function SearchOverlay({ spec }) {
+    const { services, session, closeOverlay, go } = useAppState();
+    const width = useOverlayWidth(WIDTH);
+    const [query, setQuery] = useState('');
+    const results = useQuery(() => services.tasks.search(session, query, 100), `search:${session.workspace.id}:${query}`);
+    const tasks = results.data ?? [];
+    const tableHeight = Math.min(16, useOverlayHeight() - 3);
+    const open = (index) => {
+        const task = tasks[index];
+        if (!task)
+            return;
+        closeOverlay(spec);
+        go({ type: 'push', route: { name: 'task', ref: task.ref } });
+    };
+    const list = useList(tasks.length, tableRows(tableHeight), false);
+    useKeys(Layer.overlay, (input, key) => {
+        if (key.escape)
+            closeOverlay(spec);
+        else if (key.return)
+            open(list.index);
+        else
+            list.handleKey(input, key);
+        return true;
+    });
+    return (_jsxs(OverlayFrame, { title: "Search", context: "title or ID, closed and archived too", width: WIDTH, hints: [
+            ['↑/↓', 'move'],
+            ['enter', 'open'],
+            ['esc', 'close'],
+        ], children: [_jsx(Box, { marginBottom: 1, children: _jsx(TextField, { value: query, onChange: (next) => {
+                        setQuery(next);
+                        list.select(0);
+                    }, placeholder: "stripe, SOJA-12\u2026" }) }), !query.trim() ? (_jsx(Text, { color: palette.faint, children: "Start typing: a word from the title, or a number like 12." })) : tasks.length === 0 && !results.loading ? (_jsx(EmptyState, { lines: EMPTY_SEARCH })) : (_jsx(TaskTable, { tasks: tasks, selected: list.index, offset: list.offset, height: tableHeight, width: width, layer: Layer.overlay, onSelect: (index) => list.select(index), onOpen: open, onScroll: (delta) => list.select(list.index + delta) }))] }));
+}

package/dist/ui/overlays/options.js

@@ -0,0 +1,29 @@
+import { TASK_PRIORITIES, TASK_STATUSES, TASK_TYPES, TYPE_LABELS } from '../../domain/task.js';
+import { priorityStyles, priorityTone, statusStyles, statusTone } from '../theme/theme.js';
+export const NONE = '__none__';
+export const statusOptions = TASK_STATUSES.map((status) => {
+    const style = statusStyles[status];
+    return { value: status, label: `${style.glyph} ${style.label}`, tone: statusTone[status], dim: status === 'cancelled' };
+});
+export const priorityOptions = [...TASK_PRIORITIES].reverse().map((priority) => {
+    const style = priorityStyles[priority];
+    return { value: priority, label: priority === 'none' ? 'NONE' : style.label, tone: priorityTone[priority], dim: priority === 'none' };
+});
+export const typeOptions = TASK_TYPES.map((type) => ({ value: type, label: TYPE_LABELS[type] }));
+export function memberOptions(members, meId) {
+    return [
+        ...members.map((member) => ({
+            value: member.id,
+            label: `@${member.username}`,
+            hint: member.id === meId ? `${member.displayName} (you)` : member.displayName,
+        })),
+        { value: NONE, label: 'Unassigned', dim: true },
+    ];
+}
+export function projectOptions(projects) {
+    return [
+        ...projects.map((project) => ({ value: project.id, label: project.name, hint: project.key })),
+        { value: NONE, label: 'No project', dim: true },
+    ];
+}
+export const fromOption = (value) => (value === NONE ? null : value);

package/dist/ui/overlays/types.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/screens/AccessScreen.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { useCallback, useEffect, useState } from 'react';
+import { FileConfigStore } from '../../config/config.js';
+import { CredentialStore } from '../../config/credentials.js';
+import { resolvePaths } from '../../config/paths.js';
+import { ApiClient } from '../../data/remote/api-client.js';
+import { toDisplayError } from '../../utils/errors.js';
+import { useLayout } from '../hooks/use-layout.js';
+import { Layer } from '../input/dispatcher.js';
+import { useKeys } from '../input/KeyProvider.js';
+import { Badge } from '../kit/Badge.js';
+import { Clickable } from '../kit/Clickable.js';
+import { Panel } from '../kit/Panel.js';
+import { palette, symbols } from '../theme/theme.js';
+import { ScreenFrame } from './ScreenFrame.js';
+export function AccessScreen({ active }) {
+    const { height, width } = useLayout();
+    const [requests, setRequests] = useState([]);
+    const [index, setIndex] = useState(0);
+    const [error, setError] = useState('');
+    const [busy, setBusy] = useState(false);
+    const api = useCallback(() => {
+        const remote = new FileConfigStore(resolvePaths().configFile).load()?.remote;
+        const token = remote ? new CredentialStore(resolvePaths().credentialsFile).token(remote.apiUrl) : null;
+        return remote && token ? new ApiClient(remote.apiUrl, token) : null;
+    }, []);
+    const refresh = useCallback(async () => {
+        const client = api();
+        if (!client) {
+            setError('La revisión de solicitudes requiere una sesión remota.');
+            return;
+        }
+        try {
+            setRequests((await client.get('/v1/admin/access-requests')).requests);
+            setError('');
+        }
+        catch (failure) {
+            setError(toDisplayError(failure).message);
+        }
+    }, [api]);
+    useEffect(() => {
+        if (!active)
+            return;
+        const timer = setTimeout(() => void refresh(), 0);
+        return () => clearTimeout(timer);
+    }, [active, refresh]);
+    const decide = async (decision) => {
+        const request = requests[index];
+        const client = api();
+        if (!request || !client || busy)
+            return;
+        setBusy(true);
+        try {
+            await client.post(`/v1/admin/access-requests/${request.id}/${decision}`);
+            await refresh();
+            setIndex(Math.min(index, Math.max(0, requests.length - 2)));
+        }
+        catch (failure) {
+            setError(toDisplayError(failure).message);
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    useKeys(Layer.screen, (input, key) => {
+        if (key.upArrow || input === 'k') {
+            setIndex((n) => Math.max(0, n - 1));
+            return true;
+        }
+        if (key.downArrow || input === 'j') {
+            setIndex((n) => Math.min(requests.length - 1, n + 1));
+            return true;
+        }
+        if (input === 'y') {
+            void decide('approve');
+            return true;
+        }
+        if (input === 'n') {
+            void decide('reject');
+            return true;
+        }
+        if (input === 'r') {
+            void refresh();
+            return true;
+        }
+        return false;
+    }, active);
+    const request = requests[index];
+    return _jsx(ScreenFrame, { title: "Access approvals", aside: `${requests.length} pending`, hints: [[`↑↓`, 'select'], ['y', 'approve'], ['n', 'reject'], ['r', 'refresh'], ['esc', 'back']], children: _jsxs(Box, { flexDirection: "row", gap: 1, height: Math.max(5, height - 3), children: [_jsxs(Panel, { title: "Pending requests", width: Math.max(28, Math.floor(width * 0.42)), children: [requests.length ? requests.map((item, position) => _jsx(Clickable, { active: active, onClick: () => setIndex(position), children: _jsxs(Box, { backgroundColor: position === index ? palette.selection : undefined, gap: 1, children: [_jsx(Text, { color: palette.accent, children: position === index ? symbols.pointer : ' ' }), _jsx(Text, { color: palette.text, children: `@${item.username}` }), _jsx(Badge, { tone: "warning", children: "pending" })] }) }, item.id)) : _jsx(Text, { color: palette.muted, children: error ? 'Could not load requests.' : 'No pending requests.' }), busy ? _jsx(Text, { color: palette.muted, children: "Saving decision\u2026" }) : null] }), _jsxs(Panel, { title: request ? request.displayName : 'Request details', flexGrow: 1, children: [error ? _jsx(Text, { color: palette.danger, children: error }) : null, request ? _jsxs(_Fragment, { children: [_jsx(Text, { color: palette.muted, children: `@${request.username} · GitHub ID ${request.githubId} · ${request.countryCode ?? 'country missing'}` }), _jsx(Text, { color: palette.muted, children: `Date of birth: ${request.dateOfBirth ?? 'not provided'} · ${request.submittedAt}` }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: palette.text, bold: true, children: "Interest letter" }) }), _jsx(Text, { color: palette.text, wrap: "wrap", children: request.letter }), _jsxs(Box, { marginTop: 1, gap: 2, children: [_jsx(Text, { color: palette.success, children: "y approve" }), _jsx(Text, { color: palette.danger, children: "n reject" })] })] }) : null] })] }) });
+}