sitevision-cli 1.0.0-beta.13 → 1.0.0-beta.15

package/dist/shell/Shell.js

@@ -0,0 +1,520 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import path from 'node:path';
+import { useCallback, useEffect, useMemo, useReducer, useState } from 'react';
+import { Box, Text, useApp, useInput, useStdout } from 'ink';
+import Spinner from 'ink-spinner';
+import { detectProject, appTypeOf, localizedText, readWorkspaceDevProperties, readSvcConfig, writeSvcConfig, writeDevProperties, } from '../utils/project-detection.js';
+import { appGroup } from '../utils/workspace.js';
+import { listAddons, listExecutables, } from '../utils/sitevision-api.js';
+import { useTasks, runningTasks, startActivate, getTasks, } from '../utils/tasks.js';
+import { PasswordInput } from '../components/PasswordInput.js';
+import { AuthLoginScreen } from '../components/AuthLoginScreen.js';
+import { TopBar, Navigator, NavigatorStrip, BottomBar, navWidth, NARROW_BELOW, ACCENT, } from './Frame.js';
+import { TabBar, TABS, Overview, Versions, Log, } from './Tabs.js';
+import { CommandPalette } from './CommandPalette.js';
+import { ConfigForm } from './ConfigForm.js';
+import { AddonPicker } from './AddonPicker.js';
+import { SettingsScreen } from './Settings.js';
+import { baseEnvironment, environmentColor, environmentNames, environmentProject, isProductionEnvironment, resolveEnvironment, } from '../utils/environments.js';
+import { t } from '../utils/i18n.js';
+import { actionForKey, authState, resolveDeployConfig, } from './actions.js';
+function useSize() {
+    const { stdout } = useStdout();
+    const read = () => ({ columns: stdout.columns || 80, rows: stdout.rows || 24 });
+    const [size, setSize] = useState(read);
+    useEffect(() => {
+        const onResize = () => setSize(read());
+        stdout.on('resize', onResize);
+        return () => {
+            stdout.off('resize', onResize);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [stdout]);
+    return size;
+}
+export function Shell({ apps: initialApps, workspaceRoot, version }) {
+    const { exit } = useApp();
+    const { columns, rows } = useSize();
+    const tasks = useTasks();
+    const [apps, setApps] = useState(initialApps);
+    const [selected, setSelected] = useState(0);
+    const [tab, setTab] = useState('overview');
+    const [focus, setFocus] = useState(workspaceRoot ? 'nav' : 'content');
+    const [overlay, setOverlay] = useState(null);
+    const [versions, setVersions] = useState({});
+    const [versionRow, setVersionRow] = useState(0);
+    const [logScroll, setLogScroll] = useState(0);
+    const [logWrap, setLogWrap] = useState(false);
+    const [notice, setNotice] = useState(null);
+    const [, tick] = useReducer((n) => n + 1, 0);
+    // In workspace mode the row after the last app is "Workspace settings".
+    const settings = Boolean(workspaceRoot) && selected === apps.length;
+    const rawProject = apps[Math.min(selected, apps.length - 1)];
+    // Active environment, remembered per workspace (or app) in .svcconfig.
+    const configRoot = workspaceRoot ?? rawProject.root;
+    const [envChoice, setEnvChoice] = useState(() => readSvcConfig(configRoot).environment ?? '');
+    const envNames = environmentNames(rawProject.devProperties);
+    const envList = envNames.join(',');
+    const env = envNames.includes(envChoice)
+        ? envChoice
+        : baseEnvironment(rawProject.devProperties);
+    const project = useMemo(() => environmentProject(rawProject, env), [rawProject, env]);
+    const isProduction = isProductionEnvironment(env, rawProject.devProperties);
+    const versionsKey = `${project.root}|${env}`;
+    const single = !workspaceRoot;
+    const workspaceTarget = useMemo(() => workspaceRoot
+        ? {
+            root: workspaceRoot,
+            base: readWorkspaceDevProperties(workspaceRoot),
+            devProperties: resolveEnvironment(readWorkspaceDevProperties(workspaceRoot), env),
+            environment: env,
+            workspace: true,
+        }
+        : undefined, 
+    // Re-read after any reload so saved values show up.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [workspaceRoot, apps, env]);
+    const narrow = columns < NARROW_BELOW;
+    const sidebar = navWidth(columns);
+    const running = runningTasks();
+    // Re-render once a second while something runs so elapsed times move.
+    useEffect(() => {
+        if (running.length === 0)
+            return;
+        const timer = setInterval(tick, 1000);
+        return () => clearInterval(timer);
+    }, [running.length]);
+    const reload = useCallback(() => {
+        setApps(current => current.map(app => {
+            try {
+                return detectProject(app.root) ?? app;
+            }
+            catch {
+                return app;
+            }
+        }));
+    }, []);
+    // A finished npm install changes what detection sees (node_modules,
+    // sitevision-scripts); re-detect so the status strip flips.
+    const installsDone = tasks.filter(task => task.kind === 'install' && task.status !== 'running').length;
+    useEffect(() => {
+        if (installsDone > 0)
+            reload();
+    }, [installsDone, reload]);
+    const notify = useCallback((text, level = 'info') => {
+        setNotice({ text, level });
+    }, []);
+    const quit = useCallback(() => {
+        for (const task of getTasks())
+            if (task.status === 'running')
+                task.stop();
+        exit();
+    }, [exit]);
+    const context = useMemo(() => ({
+        project,
+        reload,
+        notify,
+        quit,
+        setTab(next) {
+            setTab(next);
+            setFocus('content');
+        },
+        openSettings() {
+            setOverlay({ kind: 'settings' });
+        },
+        environment: env,
+        isProduction,
+        cycleEnvironment() {
+            const next = envNames[(envNames.indexOf(env) + 1) % envNames.length];
+            setEnvChoice(next);
+            writeSvcConfig(configRoot, { environment: next });
+            notify(t('switched to {env}', { env: next }));
+        },
+        async addEnvironment() {
+            const name = await new Promise(resolve => {
+                setOverlay({
+                    kind: 'prompt',
+                    label: t('Environment name (e.g. test, prod)'),
+                    resolve,
+                });
+            });
+            const clean = name
+                ?.trim()
+                .toLowerCase()
+                .replaceAll(/[^\d\-a-z]/g, '');
+            if (!clean || clean === baseEnvironment(rawProject.devProperties))
+                return;
+            const targetRoot = workspaceRoot ?? rawProject.root;
+            const base = (workspaceRoot
+                ? readWorkspaceDevProperties(workspaceRoot)
+                : rawProject.devProperties);
+            if (!base)
+                return;
+            writeDevProperties(targetRoot, {
+                ...base,
+                environments: { ...base.environments, [clean]: {} },
+            });
+            reload();
+            setEnvChoice(clean);
+            writeSvcConfig(configRoot, { environment: clean });
+            notify(t('environment {env} added', { env: clean }), 'ok');
+        },
+        openWorkspaceSettings: workspaceRoot
+            ? () => {
+                setSelected(apps.length);
+                setFocus('content');
+            }
+            : undefined,
+        askPassword: (label, rememberLabel) => new Promise(resolve => {
+            setOverlay({ kind: 'password', label, rememberLabel, resolve });
+        }),
+        login: method => new Promise(resolve => {
+            setOverlay({
+                kind: 'login',
+                method,
+                devProperties: project.devProperties,
+                resolve,
+            });
+        }),
+        confirm: message => new Promise(resolve => {
+            setOverlay({ kind: 'confirm', message, resolve });
+        }),
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [project, reload, notify, quit, workspaceRoot, apps.length, env, envList]);
+    const run = useCallback((action) => {
+        setOverlay(null);
+        if (action.enabled && !action.enabled(project)) {
+            notify(`${t(action.label)}: ${action.detail?.(project) ?? t('not available')}`, 'warn');
+            return;
+        }
+        action.run(context).catch((error) => {
+            notify(error instanceof Error ? error.message : String(error), 'error');
+        });
+    }, [context, project, notify]);
+    const fetchVersions = useCallback(async (fresh = false) => {
+        const key = versionsKey;
+        const config = await resolveDeployConfig(context, fresh);
+        if (!config)
+            return;
+        setVersions(v => ({
+            ...v,
+            [key]: { ...v[key], loading: true, error: undefined },
+        }));
+        const result = await listExecutables(config);
+        setVersions(v => ({
+            ...v,
+            [key]: {
+                loading: false,
+                executables: result.executables ?? v[key]?.executables,
+                error: result.error,
+                fetchedAt: result.success ? Date.now() : v[key]?.fetchedAt,
+            },
+        }));
+        setVersionRow(0);
+    }, [versionsKey, context]);
+    const activateSelected = useCallback(async () => {
+        const executable = versions[versionsKey]?.executables?.[versionRow];
+        if (!executable)
+            return;
+        if (executable.active) {
+            notify(t('{v} is already active', { v: executable.appVersion }));
+            return;
+        }
+        const config = await resolveDeployConfig(context);
+        if (!config)
+            return;
+        const task = startActivate(project, config, executable.id, executable.appVersion);
+        const wait = () => new Promise(resolve => {
+            const check = () => task.status === 'running' ? setTimeout(check, 200) : resolve();
+            check();
+        });
+        await wait();
+        notify(task.error ?? t('{v} activated', { v: executable.appVersion }), task.error ? 'error' : 'ok');
+        await fetchVersions();
+    }, [versions, project, versionRow, context, notify, fetchVersions]);
+    const formActive = (tab === 'config' || settings) && focus === 'content';
+    const [editing, setEditing] = useState(false);
+    const pickAddon = useCallback(async () => new Promise(resolve => {
+        setOverlay({ kind: 'picker', resolve });
+    }), []);
+    const loadAddons = useCallback(async () => {
+        const config = await resolveDeployConfig(context);
+        return config ? listAddons(config) : { error: t('No credentials.') };
+    }, [context]);
+    const appTasks = tasks.filter(task => task.appRoot === project.root);
+    const logTask = appTasks.find(task => task.status === 'running') ?? appTasks.at(-1);
+    useInput((raw, key) => {
+        // Terminals speaking the kitty keyboard protocol report shift+s as
+        // "s" plus a shift flag; fold that back into the uppercase letter so
+        // P, K, R behave the same everywhere.
+        const input = key.shift && raw.length === 1 && /[a-z]/.test(raw)
+            ? raw.toUpperCase()
+            : raw;
+        if (key.escape) {
+            setFocus(single ? 'content' : 'nav');
+            return;
+        }
+        if (input === '/') {
+            setOverlay({ kind: 'palette' });
+            return;
+        }
+        if (key.tab) {
+            setFocus(f => f === 'nav' && !single ? 'content' : single ? 'content' : 'nav');
+            return;
+        }
+        if (input === 'a' && tab !== 'versions') {
+            setTab('versions');
+            setFocus('content');
+            if (!Object.hasOwn(versions, versionsKey))
+                void fetchVersions(false);
+            return;
+        }
+        const digit = Number.parseInt(input, 10);
+        if (digit >= 1 && digit <= TABS.length) {
+            setTab(TABS[digit - 1].id);
+            setFocus('content');
+            return;
+        }
+        if (key.leftArrow || key.rightArrow) {
+            const i = TABS.findIndex(entry => entry.id === tab);
+            setTab(TABS[(i + (key.rightArrow ? 1 : TABS.length - 1)) % TABS.length].id);
+            return;
+        }
+        if (settings && focus === 'content') {
+            // Settings pane: the form owns everything but q and Tab/Esc above.
+            if (input === 'q')
+                quit();
+            return;
+        }
+        if (focus === 'nav') {
+            const last = single ? apps.length - 1 : apps.length;
+            if (key.upArrow)
+                setSelected(s => (s > 0 ? s - 1 : last));
+            if (key.downArrow)
+                setSelected(s => (s < last ? s + 1 : 0));
+            if (key.return)
+                setFocus('content');
+        }
+        else if (tab === 'versions') {
+            const count = versions[versionsKey]?.executables?.length ?? 0;
+            if (key.upArrow)
+                setVersionRow(r => Math.max(0, r - 1));
+            if (key.downArrow)
+                setVersionRow(r => Math.min(Math.max(0, count - 1), r + 1));
+            if (input === 'R')
+                void fetchVersions(false);
+            else if (input === 'a' && count > 0)
+                void activateSelected();
+        }
+        else if (tab === 'log') {
+            const max = Math.max(0, (logTask?.lines.length ?? 0) - 1);
+            if (key.upArrow)
+                setLogScroll(s => Math.min(max, s + 1));
+            if (key.downArrow)
+                setLogScroll(s => Math.max(0, s - 1));
+            if (key.pageUp)
+                setLogScroll(s => Math.min(max, s + 10));
+            if (key.pageDown)
+                setLogScroll(s => Math.max(0, s - 10));
+            if (input === 'f')
+                setLogScroll(0);
+            else if (input === 'x')
+                setLogWrap(w => !w);
+        }
+        const action = actionForKey(input);
+        if (action)
+            run(action);
+    }, { isActive: overlay === null && !editing });
+    // Frame geometry: one row for Ink's trailing newline, top bar, bottom bar.
+    const frameRows = Math.max(10, rows - 1);
+    const mainHeight = frameRows - 2;
+    const contentHeight = mainHeight - 1 - (narrow ? 1 : 0);
+    const groupOf = (app) => workspaceRoot ? appGroup(workspaceRoot, app.root) : '.';
+    const appName = localizedText(project.manifest.name) || project.manifest.id;
+    const tabName = t(TABS.find(entry => entry.id === tab).label).toLowerCase();
+    const contextLabel = settings
+        ? `${t('workspace')} ▸ ${t('settings')}`
+        : workspaceRoot
+            ? `${t('workspace')} ▸ ${path.relative(workspaceRoot, project.root)} ▸ ${tabName}`
+            : `${appName} ▸ ${tabName}`;
+    const h = (pairs) => pairs.map(([key, label]) => ({ key, label: t(label) }));
+    const settingsHints = editing
+        ? h([
+            ['Enter', 'save'],
+            ['Esc', 'cancel'],
+        ])
+        : formActive
+            ? h([
+                ['↑↓', 'field'],
+                ['Enter', 'edit'],
+                ['Esc', 'back'],
+                ['q', 'quit'],
+            ])
+            : h([
+                ['Enter', 'edit settings'],
+                ['↑↓', 'apps'],
+                ['q', 'quit'],
+            ]);
+    const hints = overlay
+        ? h([['Esc', 'cancel']])
+        : settings
+            ? settingsHints
+            : tab === 'versions'
+                ? h([
+                    ['a', 'activate'],
+                    ['R', 'refresh'],
+                    ['p', 'deploy'],
+                    ['/', 'commands'],
+                    ['q', 'quit'],
+                ])
+                : tab === 'log'
+                    ? h([
+                        ['f', 'follow'],
+                        ['x', 'wrap'],
+                        ['K', 'stop'],
+                        ['p', 'deploy'],
+                        ['/', 'commands'],
+                        ['q', 'quit'],
+                    ])
+                    : tab === 'config'
+                        ? editing
+                            ? h([
+                                ['Enter', 'save'],
+                                ['Esc', 'cancel'],
+                            ])
+                            : formActive
+                                ? h([
+                                    ['↑↓', 'field'],
+                                    ['Enter', 'edit'],
+                                    ['^O', 'pick addon'],
+                                    ['y', 'sync'],
+                                    ['/', 'commands'],
+                                    ['q', 'quit'],
+                                ])
+                                : h([
+                                    ['Tab', 'edit'],
+                                    ['y', 'sync'],
+                                    ['l', 'login'],
+                                    ['/', 'commands'],
+                                    ['q', 'quit'],
+                                ])
+                        : h([
+                            ['d', 'dev'],
+                            ['w', 'watch'],
+                            ['b', 'build'],
+                            ['s', 'sign'],
+                            ['p', 'deploy'],
+                            ['a', 'activate'],
+                            ['E', 'env'],
+                            ['i', 'install'],
+                            ['/', 'commands'],
+                            ['q', 'quit'],
+                        ]);
+    const right = running.length > 0 ? (_jsxs(Text, { children: [_jsx(Text, { color: ACCENT, children: _jsx(Spinner, { type: "dots" }) }), ' ', running[0].label, " ", running[0].appName, running.length > 1 && (_jsxs(Text, { dimColor: true, children: [" \u00B7 ", t('{n} tasks', { n: running.length })] }))] })) : notice ? (_jsx(Text, { color: { info: undefined, ok: 'green', warn: 'yellow', error: 'red' }[notice.level], wrap: "truncate", children: notice.text })) : (_jsx(Text, { dimColor: true, children: t('idle') }));
+    const closeOverlay = () => setOverlay(null);
+    const content = overlay ? (renderOverlay(overlay, {
+        project,
+        closeOverlay,
+        run,
+        notify,
+        loadAddons,
+        height: contentHeight,
+        rerender: tick,
+        openWorkspace: workspaceRoot
+            ? () => {
+                setOverlay(null);
+                setSelected(apps.length);
+                setFocus('content');
+            }
+            : undefined,
+    })) : settings && workspaceTarget ? (_jsx(ConfigForm, { project: workspaceTarget, active: formActive, width: narrow ? columns : columns - sidebar, height: contentHeight, pickAddon: async () => null, onSaved: () => {
+            reload();
+            notify(t('workspace config saved'), 'ok');
+        }, onEditingChange: setEditing }, "workspace")) : (_jsxs(_Fragment, { children: [tab === 'overview' && (_jsx(Overview, { project: project, tasks: tasks, height: contentHeight })), tab === 'config' && (_jsx(ConfigForm, { project: {
+                    root: project.root,
+                    devProperties: project.devProperties,
+                    base: rawProject.devProperties,
+                    environment: env,
+                }, active: formActive, width: narrow ? columns : columns - sidebar, height: contentHeight, pickAddon: pickAddon, onSaved: () => {
+                    reload();
+                    notify(t('config saved'), 'ok');
+                }, onEditingChange: setEditing }, `${project.root}|${env}`)), tab === 'versions' && (_jsx(Versions, { project: project, state: versions[versionsKey], selected: versionRow })), tab === 'log' && (_jsx(Log, { task: logTask, height: contentHeight, scroll: logScroll, wrap: logWrap }))] }));
+    return (_jsxs(Box, { flexDirection: "column", width: columns, height: frameRows, children: [_jsx(TopBar, { context: contextLabel, domain: project.devProperties?.domain, auth: authState(project), environment: {
+                    name: env,
+                    color: environmentColor(env, rawProject.devProperties),
+                }, version: version }), _jsxs(Box, { flexGrow: 1, height: mainHeight, borderStyle: "single", borderDimColor: true, borderLeft: false, borderRight: false, borderBottom: false, children: [!narrow && (_jsx(Navigator, { apps: apps, groupOf: groupOf, selected: selected, focused: focus === 'nav', tasks: tasks, height: mainHeight - 1, single: single, settingsSelected: settings, width: sidebar })), _jsxs(Box, { flexDirection: "column", width: narrow ? columns : columns - sidebar, overflow: "hidden", children: [narrow && !single && (_jsx(NavigatorStrip, { apps: apps, selected: selected, focused: focus === 'nav' })), settings ? (_jsxs(Box, { paddingX: 1, children: [_jsx(Text, { bold: true, color: ACCENT, children: t('Workspace settings') }), _jsx(Text, { dimColor: true, children: t(' · shared .dev_properties.json at the root') })] })) : (_jsx(TabBar, { tab: tab, narrow: narrow, focused: focus === 'content' })), _jsx(Box, { height: contentHeight, overflow: "hidden", alignItems: "flex-start", children: content })] })] }), _jsx(BottomBar, { hints: hints, right: right })] }));
+}
+function renderOverlay(overlay, env) {
+    const { project, closeOverlay, run, notify, loadAddons, height, rerender, openWorkspace, } = env;
+    switch (overlay.kind) {
+        case 'palette':
+            return (_jsx(CommandPalette, { project: project, onRun: run, onClose: closeOverlay, height: height }));
+        case 'password':
+            return (_jsx(PasswordInput, { label: overlay.label, showRememberOption: Boolean(overlay.rememberLabel), rememberLabel: overlay.rememberLabel ? `${overlay.rememberLabel}: ` : undefined, onSubmit: (password, remember) => {
+                    closeOverlay();
+                    overlay.resolve({ password, remember });
+                }, onCancel: () => {
+                    closeOverlay();
+                    overlay.resolve(null);
+                } }, overlay.label));
+        case 'login':
+            return (_jsx(AuthLoginScreen, { method: overlay.method, devProperties: overlay.devProperties, onComplete: credential => {
+                    closeOverlay();
+                    overlay.resolve(credential);
+                }, onError: message => {
+                    closeOverlay();
+                    notify(message, 'error');
+                    overlay.resolve(null);
+                }, onCancel: () => {
+                    closeOverlay();
+                    overlay.resolve(null);
+                } }));
+        case 'confirm':
+            return (_jsx(Confirm, { message: overlay.message, onAnswer: answer => {
+                    closeOverlay();
+                    overlay.resolve(answer);
+                } }));
+        case 'prompt':
+            return (_jsx(TextPrompt, { label: overlay.label, onSubmit: value => {
+                    closeOverlay();
+                    overlay.resolve(value);
+                }, onCancel: () => {
+                    closeOverlay();
+                    overlay.resolve(null);
+                } }));
+        case 'settings':
+            return (_jsx(SettingsScreen, { onChanged: rerender, onClose: closeOverlay, onOpenWorkspace: openWorkspace }));
+        case 'picker':
+            return (_jsx(AddonPicker, { domain: project.devProperties?.domain ?? '', appType: appTypeOf(project.manifest), initialQuery: localizedText(project.manifest.name), load: loadAddons, height: height, onSelect: name => {
+                    closeOverlay();
+                    overlay.resolve(name);
+                }, onClose: () => {
+                    closeOverlay();
+                    overlay.resolve(null);
+                } }));
+    }
+}
+function Confirm({ message, onAnswer, }) {
+    useInput(input => {
+        if (input === 'y' || input === 'Y')
+            onAnswer(true);
+        else if (input === 'n' || input === 'N')
+            onAnswer(false);
+    });
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "yellow", paddingX: 1, children: [_jsx(Text, { children: message }), _jsx(Text, { dimColor: true, children: t('y confirm · n cancel') })] }));
+}
+function TextPrompt({ label, onSubmit, onCancel, }) {
+    const [value, setValue] = useState('');
+    useInput((input, key) => {
+        if (key.escape)
+            onCancel();
+        else if (key.return)
+            onSubmit(value);
+        else if (key.backspace || key.delete)
+            setValue(v => v.slice(0, -1));
+        else if (input && !key.ctrl && !key.meta)
+            setValue(v => v + input);
+    });
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: ACCENT, paddingX: 1, children: [_jsx(Text, { bold: true, children: label }), _jsxs(Text, { children: [_jsx(Text, { color: ACCENT, children: "\u276F " }), value, _jsx(Text, { inverse: true, children: " " })] }), _jsx(Text, { dimColor: true, children: t('Press Enter to submit, Esc to cancel') })] }));
+}

package/dist/shell/Tabs.d.ts

@@ -0,0 +1,36 @@
+import type { ProjectInfo } from '../types/index.js';
+import { type Task } from '../utils/tasks.js';
+import { type Executable } from '../utils/sitevision-api.js';
+import { type Tab } from './actions.js';
+export declare const TABS: {
+    id: Tab;
+    label: string;
+    short: string;
+}[];
+export declare function TabBar({ tab, narrow, focused, }: {
+    tab: Tab;
+    narrow: boolean;
+    focused: boolean;
+}): import("react").JSX.Element;
+export declare function Overview({ project, tasks, height, }: {
+    project: ProjectInfo;
+    tasks: Task[];
+    height: number;
+}): import("react").JSX.Element;
+export interface VersionsState {
+    loading: boolean;
+    executables?: Executable[];
+    error?: string;
+    fetchedAt?: number;
+}
+export declare function Versions({ project, state, selected, }: {
+    project: ProjectInfo;
+    state?: VersionsState;
+    selected: number;
+}): import("react").JSX.Element;
+export declare function Log({ task, height, scroll, wrap, }: {
+    task?: Task;
+    height: number;
+    scroll: number;
+    wrap: boolean;
+}): import("react").JSX.Element;

package/dist/shell/Tabs.js

@@ -0,0 +1,85 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import Spinner from 'ink-spinner';
+import { appTypeOf, getPackageJsonSyncChanges, localizedText, } from '../utils/project-detection.js';
+import { checkSitevisionScriptsCompatibility } from '../utils/sitevision-scripts-runner.js';
+import { ACCENT, elapsed } from './Frame.js';
+import { t } from '../utils/i18n.js';
+export const TABS = [
+    { id: 'overview', label: 'Overview', short: 'Ovw' },
+    { id: 'config', label: 'Config', short: 'Cfg' },
+    { id: 'versions', label: 'Versions', short: 'Ver' },
+    { id: 'log', label: 'Log', short: 'Log' },
+];
+export function TabBar({ tab, narrow, focused, }) {
+    return (_jsx(Box, { paddingX: 1, children: TABS.map((entry, i) => (_jsxs(Text, { children: [_jsxs(Text, { bold: entry.id === tab, color: entry.id === tab ? ACCENT : undefined, dimColor: entry.id !== tab, underline: entry.id === tab && focused, children: [i + 1, " ", t(narrow ? entry.short : entry.label)] }), ' '.repeat(3)] }, entry.id))) }));
+}
+function Row({ label, value, dim, }) {
+    return (_jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { dimColor: true, children: label.padEnd(14) }), value, dim && _jsxs(Text, { dimColor: true, children: [" ", dim] })] }));
+}
+const LEVEL_COLOR = {
+    info: undefined,
+    ok: 'green',
+    warn: 'yellow',
+    error: 'red',
+};
+const STATUS_GLYPH = {
+    running: _jsx(Spinner, { type: "dots" }),
+    success: _jsx(Text, { color: "green", children: "\u2713" }),
+    error: _jsx(Text, { color: "red", children: "\u2717" }),
+    stopped: _jsx(Text, { dimColor: true, children: "\u25A0" }),
+};
+function time(ms, seconds = false) {
+    const d = new Date(ms);
+    const hh = String(d.getHours()).padStart(2, '0');
+    const mm = String(d.getMinutes()).padStart(2, '0');
+    const ss = String(d.getSeconds()).padStart(2, '0');
+    return seconds ? `${hh}:${mm}:${ss}` : `${hh}:${mm}`;
+}
+export function Overview({ project, tasks, height, }) {
+    const dev = project.devProperties;
+    const inherited = new Set(project.inheritedKeys);
+    const src = (key) => (inherited.has(key) ? t('↑ root') : undefined);
+    const notSet = t('not set');
+    const sync = dev ? getPackageJsonSyncChanges(project.root, dev).length : 0;
+    const scripts = checkSitevisionScriptsCompatibility(project.root);
+    const recent = tasks
+        .filter(task => task.appRoot === project.root && task.status !== 'running')
+        .slice(-Math.max(1, height - 18))
+        .toReversed();
+    const status = (ok, okText, badText, warn = false) => (_jsxs(Text, { children: [_jsx(Text, { color: ok ? 'green' : warn ? 'yellow' : 'red', children: ok ? '✓' : warn ? '~' : '✗' }), ' ', ok ? okText : badText] }));
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, overflow: "hidden", children: [_jsxs(Text, { bold: true, children: [localizedText(project.manifest.name) || project.manifest.id, ' ', _jsxs(Text, { dimColor: true, children: [project.manifest.type, project.manifest.bundled ? t(' · bundled') : ''] })] }), _jsx(Row, { label: t('id'), value: project.manifest.id }), _jsx(Row, { label: t('version'), value: project.manifest.version }), _jsx(Row, { label: t('type'), value: `${project.manifest.type} (${appTypeOf(project.manifest) ?? '?'})` }), _jsx(Row, { label: t('addon'), value: dev?.addonName ?? notSet, dim: src('addonName') }), _jsx(Row, { label: t('site'), value: dev?.siteName ?? notSet, dim: src('siteName') }), _jsx(Row, { label: t('environment'), value: dev?.environmentName ?? 'dev', dim: dev?.productionEnvironment ? t('production') : undefined }), _jsx(Row, { label: t('domain'), value: dev?.domain ?? notSet, dim: src('domain') }), _jsx(Row, { label: t('auth'), value: dev?.authMethod ?? (dev ? 'basic' : notSet), dim: src('authMethod') }), _jsx(Row, { label: t('signing user'), value: dev?.signingUsername ?? notSet, dim: src('signingUsername') }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Text, { dimColor: true, children: [t('deps').padEnd(10), status(project.hasNodeModules, 'node_modules', t('missing · i to install'))] }), _jsxs(Text, { dimColor: true, children: [t('config').padEnd(10), status(Boolean(dev), t('dev properties'), t('missing · e to edit'))] }), _jsxs(Text, { dimColor: true, children: [t('sync').padEnd(10), status(sync === 0, 'package.json', sync === 1
+                                ? t('1 diff · y to apply')
+                                : t('{n} diffs · y to apply', { n: sync }), true)] }), _jsxs(Text, { dimColor: true, children: [t('signing').padEnd(10), status(project.hasSigningProperties, dev?.signingUsername ?? '', t('missing · / set up signing'))] }), _jsxs(Text, { dimColor: true, children: [t('scripts').padEnd(10), status(scripts.status === 'ok', scripts.installed ?? '', scripts.installed
+                                ? `${scripts.installed} · ${scripts.status}`
+                                : t('not installed · i to install'), scripts.status !== 'not-installed')] }), project.hasLegacyPassword && (_jsxs(Text, { color: "yellow", children: [' '.repeat(10), t('⚠ plaintext password in .dev_properties.json · / migrate')] }))] }), recent.length > 0 && (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, dimColor: true, children: t('RECENT') }), recent.map(task => (_jsxs(Text, { wrap: "truncate", children: [_jsxs(Text, { dimColor: true, children: [time(task.endedAt ?? task.startedAt), " "] }), STATUS_GLYPH[task.status], " ", task.label, ' ', _jsx(Text, { dimColor: true, children: task.error ?? elapsed(task) })] }, task.id)))] }))] }));
+}
+export function Versions({ project, state, selected, }) {
+    if (!project.devProperties) {
+        return (_jsx(Box, { paddingX: 1, children: _jsx(Text, { color: "yellow", children: t('⚠ Configure dev properties first (e).') }) }));
+    }
+    if (!state) {
+        return (_jsx(Box, { paddingX: 1, children: _jsx(Text, { dimColor: true, children: t('Press R to fetch versions from {domain}.', {
+                    domain: project.devProperties.domain,
+                }) }) }));
+    }
+    const list = state.executables ?? [];
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, overflow: "hidden", children: [_jsxs(Text, { dimColor: true, children: [t('APP IDENTIFIER').padEnd(30), t('VERSION').padEnd(12), t('ACTIVE'), state.loading && (_jsxs(Text, { color: ACCENT, children: [' '.repeat(3), _jsx(Spinner, { type: "dots" })] }))] }), state.error && _jsx(Text, { color: "red", children: state.error }), list.map((e, i) => (_jsxs(Text, { backgroundColor: i === selected ? ACCENT : undefined, color: i === selected ? 'black' : undefined, wrap: "truncate", children: [e.appIdentifier.padEnd(30).slice(0, 30), e.appVersion.padEnd(12), e.active ? '●' : '○', i === selected ? ` ${e.id}` : ''] }, e.id))), !state.loading && !state.error && list.length === 0 && (_jsx(Text, { dimColor: true, children: t('No versions uploaded to {addon}.', {
+                    addon: project.devProperties.addonName,
+                }) })), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: true, children: [list.length === 1
+                            ? t('1 version · a activate selected · R refresh')
+                            : t('{n} versions · a activate selected · R refresh', {
+                                n: list.length,
+                            }), state.fetchedAt
+                            ? t(' · fetched {time}', { time: time(state.fetchedAt) })
+                            : ''] }) })] }));
+}
+export function Log({ task, height, scroll, wrap, }) {
+    if (!task) {
+        return (_jsx(Box, { paddingX: 1, children: _jsx(Text, { dimColor: true, children: t('No task yet. d dev · w watch · b build · s sign · p deploy') }) }));
+    }
+    const visible = Math.max(1, height - 2);
+    const end = Math.max(0, task.lines.length - scroll);
+    const lines = task.lines.slice(Math.max(0, end - visible), end);
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, overflow: "hidden", children: [_jsxs(Text, { children: [STATUS_GLYPH[task.status], " ", task.label, " ", task.appName, ' ', _jsxs(Text, { dimColor: true, children: [task.phase, " \u00B7 ", elapsed(task), scroll > 0 ? ` · ↑${scroll}` : t(' · following')] })] }), lines.map((line, i) => (_jsxs(Text, { wrap: wrap ? 'wrap' : 'truncate', color: LEVEL_COLOR[line.level], children: [_jsxs(Text, { dimColor: true, children: [time(line.time, true), " ", line.tag.padEnd(3)] }), ' ', line.text] }, i)))] }));
+}