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

package/dist/shell/AddonPicker.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import Spinner from 'ink-spinner';
+import { ACCENT } from './Frame.js';
+import { fuzzyMatch } from './actions.js';
+import { t } from '../utils/i18n.js';
+export function AddonPicker({ domain, appType, initialQuery, load, onSelect, onClose, height, }) {
+    const [query, setQuery] = useState(initialQuery);
+    const [index, setIndex] = useState(0);
+    const [addons, setAddons] = useState(null);
+    const [error, setError] = useState('');
+    useEffect(() => {
+        void load().then(result => {
+            setAddons(result.addons ?? []);
+            setError(result.error ?? '');
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const matches = (addons ?? [])
+        .filter(a => fuzzyMatch(query, a.name))
+        .toSorted((a, b) => Number(b.appType === appType) - Number(a.appType === appType) ||
+        a.name.localeCompare(b.name));
+    useInput((input, key) => {
+        if (key.escape) {
+            onClose();
+        }
+        else if (key.return) {
+            const pick = matches[index];
+            if (pick)
+                onSelect(pick.name);
+        }
+        else if (key.upArrow) {
+            setIndex(i => (i > 0 ? i - 1 : Math.max(0, matches.length - 1)));
+        }
+        else if (key.downArrow) {
+            setIndex(i => (i < matches.length - 1 ? i + 1 : 0));
+        }
+        else if (key.backspace || key.delete) {
+            setQuery(q => q.slice(0, -1));
+            setIndex(0);
+        }
+        else if (input && !key.ctrl && !key.meta) {
+            setQuery(q => q + input);
+            setIndex(0);
+        }
+    });
+    const visible = Math.max(3, height - 6);
+    const start = Math.max(0, Math.min(index - visible + 1, matches.length - visible));
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: ACCENT, paddingX: 1, width: 64, height: Math.min(height, matches.length + 6), children: [_jsxs(Text, { children: [_jsx(Text, { bold: true, children: t('Addon Repository') }), _jsxs(Text, { dimColor: true, children: [" ", domain] })] }), _jsxs(Text, { children: [_jsx(Text, { color: ACCENT, children: "\u276F " }), query, _jsx(Text, { inverse: true, children: " " }), _jsxs(Text, { dimColor: true, children: ['  ', addons ? t('{n} of {m}', { n: matches.length, m: addons.length }) : ''] })] }), !addons && !error && (_jsxs(Text, { color: ACCENT, children: [_jsx(Spinner, { type: "dots" }), " ", _jsx(Text, { dimColor: true, children: t('fetching addons') })] })), error && _jsx(Text, { color: "red", children: error }), matches.slice(start, start + visible).map((a, i) => {
+                const selected = start + i === index;
+                return (_jsxs(Box, { justifyContent: "space-between", children: [_jsx(Box, { flexShrink: 1, marginRight: 1, children: _jsxs(Text, { backgroundColor: selected ? ACCENT : undefined, color: selected ? 'black' : undefined, wrap: "truncate", children: ['  ', a.name] }) }), _jsx(Box, { flexShrink: 0, children: _jsx(Text, { dimColor: true, children: a.appType ?? a.type }) })] }, a.id));
+            }), _jsx(Text, { dimColor: true, children: t('↑↓ move · Enter select · Esc cancel') })] }));
+}

package/dist/shell/CommandPalette.d.ts

@@ -0,0 +1,8 @@
+import type { ProjectInfo } from '../types/index.js';
+import { type Action } from './actions.js';
+export declare function CommandPalette({ project, onRun, onClose, height, }: {
+    project: ProjectInfo;
+    onRun: (action: Action) => void;
+    onClose: () => void;
+    height: number;
+}): import("react").JSX.Element;

package/dist/shell/CommandPalette.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { ACCENT } from './Frame.js';
+import { actions, fuzzyMatch } from './actions.js';
+import { t } from '../utils/i18n.js';
+const GROUPS = [
+    { id: 'app', label: 'APP' },
+    { id: 'setup', label: 'SETUP' },
+    { id: 'auth', label: 'AUTH' },
+];
+export function CommandPalette({ project, onRun, onClose, height, }) {
+    const [query, setQuery] = useState('');
+    const [index, setIndex] = useState(0);
+    const matches = actions.filter(a => fuzzyMatch(query, t(a.label)));
+    const ordered = GROUPS.flatMap(g => matches.filter(a => a.group === g.id));
+    useInput((input, key) => {
+        if (key.escape) {
+            onClose();
+        }
+        else if (key.return) {
+            const action = ordered[index];
+            if (action)
+                onRun(action);
+        }
+        else if (key.upArrow) {
+            setIndex(i => (i > 0 ? i - 1 : Math.max(0, ordered.length - 1)));
+        }
+        else if (key.downArrow) {
+            setIndex(i => (i < ordered.length - 1 ? i + 1 : 0));
+        }
+        else if (key.backspace || key.delete) {
+            setQuery(q => q.slice(0, -1));
+            setIndex(0);
+        }
+        else if (!key.ctrl && !key.meta && input) {
+            setQuery(q => q + input);
+            setIndex(0);
+        }
+    });
+    // Rows available inside the box: borders (2), title, query, footer.
+    const maxRows = Math.max(3, height - 5);
+    const rows = [];
+    let lastGroup;
+    // Keep the selection visible: skip leading rows when it is far down.
+    let skip = 0;
+    while (index - skip + 1 + 3 > maxRows)
+        skip += 1;
+    for (const [i, action] of ordered.entries()) {
+        if (i < skip)
+            continue;
+        if (rows.length >= maxRows)
+            break;
+        if (action.group !== lastGroup) {
+            rows.push(_jsx(Text, { bold: true, dimColor: true, children: t(GROUPS.find(g => g.id === action.group).label) }, `g-${action.group}`));
+            lastGroup = action.group;
+        }
+        const enabled = action.enabled?.(project) ?? true;
+        const detail = action.detail?.(project);
+        rows.push(_jsxs(Box, { justifyContent: "space-between", children: [_jsx(Box, { flexShrink: 1, marginRight: 1, children: _jsxs(Text, { backgroundColor: i === index ? ACCENT : undefined, color: i === index ? 'black' : undefined, dimColor: !enabled && i !== index, wrap: "truncate", children: ['  ', t(action.label), detail && _jsxs(Text, { dimColor: i !== index, children: [" \u00B7 ", detail] })] }) }), _jsx(Box, { flexShrink: 0, children: _jsx(Text, { bold: true, color: ACCENT, children: action.key ?? '—' }) })] }, action.id));
+    }
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: ACCENT, paddingX: 1, width: 64, height: rows.length + 5, children: [_jsxs(Text, { children: [_jsx(Text, { bold: true, children: t('Commands') }), _jsxs(Text, { dimColor: true, children: [" ", project.manifest.id] })] }), _jsxs(Text, { children: [_jsx(Text, { color: ACCENT, children: "\u276F " }), query, _jsx(Text, { inverse: true, children: " " }), _jsxs(Text, { dimColor: true, children: [" ", t('{n} actions', { n: ordered.length })] })] }), rows, _jsx(Text, { dimColor: true, children: t('type to filter · ↑↓ move · Enter run · Esc close') })] }));
+}

package/dist/shell/ConfigForm.d.ts

@@ -0,0 +1,35 @@
+import type { DevProperties } from '../types/index.js';
+type Method = 'basic' | 'oauth2' | 'cookie';
+interface Field {
+    key: string;
+    label: string;
+    kind?: 'text' | 'method' | 'bool' | 'secret';
+    required?: boolean;
+    when?: Method;
+    section?: string;
+    hint?: string;
+    perApp?: boolean;
+    help: string;
+}
+type Values = Record<string, string>;
+/** What the form edits: an app, or the workspace root (no addon, no package.json). */
+export interface ConfigTarget {
+    root: string;
+    devProperties?: Partial<DevProperties>;
+    base?: Partial<DevProperties>;
+    environment?: string;
+    workspace?: boolean;
+}
+/** Apply the form to disk and the keychain. Exported for the test. */
+export declare function saveConfig(project: ConfigTarget, values: Values, edited: Set<string>): void;
+export declare function visibleFields(method: Method, workspace?: boolean, envMode?: boolean): Field[];
+export declare function ConfigForm({ project, active, width, height, pickAddon, onSaved, onEditingChange, }: {
+    project: ConfigTarget;
+    active: boolean;
+    width: number;
+    height: number;
+    pickAddon: () => Promise<string | null>;
+    onSaved: () => void;
+    onEditingChange: (editing: boolean) => void;
+}): import("react").JSX.Element;
+export {};

package/dist/shell/ConfigForm.js

@@ -0,0 +1,472 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { getPackageJsonSyncChanges, readInheritedDevProperties, writeDevProperties, } from '../utils/project-detection.js';
+import { setDeployPassword, deleteDeployPassword, getOAuth2ClientSecret, setOAuth2ClientSecret, deleteOAuth2ClientSecret, getSigningPassword, setSigningPassword, deleteSigningPassword, } from '../utils/keychain.js';
+import { DEFAULT_SCOPES, discoverOAuth2Config } from '../utils/oauth2-auth.js';
+import { ACCENT } from './Frame.js';
+import { baseEnvironment, withEnvironmentOverride, } from '../utils/environments.js';
+import { t } from '../utils/i18n.js';
+const METHODS = ['basic', 'oauth2', 'cookie'];
+const FIELDS = [
+    {
+        key: 'domain',
+        help: 'Domain of the development environment (USE or TSE) without https://, e.g. myorg-use.sitevision-cloud.se. Deploys and version lookups go here.',
+        label: 'Development domain',
+        required: true,
+    },
+    {
+        key: 'siteName',
+        help: "Name of the site's root node in Sitevision, exactly as shown in the site tree. It becomes part of the REST API path.",
+        label: 'Site name',
+        required: true,
+    },
+    {
+        key: 'addonName',
+        help: "Name of the addon (custom module) in the site's Addon Repository that this app is uploaded into. Ctrl+O lists the existing ones.",
+        label: 'Addon name',
+        required: true,
+        hint: '^O pick from repo',
+        perApp: true,
+    },
+    {
+        key: 'username',
+        help: 'Sitevision account used for deploys, usually your Sitevision Cloud e-mail. It needs DEVELOPER or MANAGE_ADDONS permission on the site.',
+        label: 'Username',
+        required: true,
+    },
+    {
+        key: 'authMethod',
+        help: "How deploys authenticate: basic = username and password; oauth2 = bearer token from the site's OAuth2 provider (PKCE, opens a browser); cookie = reuse a browser SSO/SAML session.",
+        label: 'Auth method',
+        kind: 'method',
+    },
+    {
+        key: 'password',
+        help: 'Deploy password for the account above. Stored in the OS keychain, never in a file. Leave empty to be asked on each run.',
+        label: 'Password',
+        kind: 'secret',
+        when: 'basic',
+    },
+    {
+        key: 'clientId',
+        help: 'Client id of the OAuth2 client registered on the site. Its redirect URI must be http://127.0.0.1:8137/callback.',
+        label: 'OAuth2 client id',
+        required: true,
+        when: 'oauth2',
+    },
+    {
+        key: 'authorizationEndpoint',
+        help: "The provider's authorization URL. Filled in from the site's OpenID configuration when it can be discovered.",
+        label: 'Authorization endpoint',
+        required: true,
+        when: 'oauth2',
+    },
+    {
+        key: 'tokenEndpoint',
+        help: "The provider's token URL. Filled in from the site's OpenID configuration when it can be discovered.",
+        label: 'Token endpoint',
+        required: true,
+        when: 'oauth2',
+    },
+    {
+        key: 'scopes',
+        help: 'Space-separated scopes to request. ALL grants the Sitevision API and offline_access adds a refresh token so later runs log in silently. Match the casing your client expects.',
+        label: 'Scopes',
+        when: 'oauth2',
+        hint: 'ALL offline_access',
+    },
+    {
+        key: 'clientSecret',
+        help: 'Secret of a confidential OAuth2 client, stored in the OS keychain. Leave empty for a public client.',
+        label: 'Client secret',
+        kind: 'secret',
+        when: 'oauth2',
+    },
+    {
+        key: 'sessionLoginUrl',
+        help: 'Page opened in the browser for the SSO login. Leave empty to use the site root.',
+        label: 'Login URL',
+        when: 'cookie',
+        hint: 'blank = site root',
+    },
+    {
+        key: 'useHTTPForDevDeploy',
+        help: 'Use plain HTTP instead of HTTPS for deploys. Only for local or test servers without TLS.',
+        label: 'Use HTTP',
+        kind: 'bool',
+    },
+    {
+        key: 'baseEnvironment',
+        label: 'Environment name',
+        section: 'ENVIRONMENT',
+        hint: 'dev',
+        help: 'What this base configuration is: dev, test, prod… Other environments are added on top of it with E or the palette and override only what differs.',
+    },
+    {
+        key: 'production',
+        label: 'Production',
+        kind: 'bool',
+        section: 'ENVIRONMENT',
+        help: 'Treat deploys to this base environment as production: signed zip, confirmation, activation, and no dev loop. Off by default even when the name says prod, so a repo with only a production site still gets a dev loop.',
+    },
+    {
+        key: 'signingUsername',
+        help: 'Your developer.sitevision.se account. Production deploys need the app signed by it.',
+        label: 'Signing user',
+        section: 'SIGNING',
+        hint: 'required for signed deploys',
+    },
+    {
+        key: 'certificateName',
+        help: 'Which certificate to sign with when your developer account has several. Leave empty for the default.',
+        label: 'Certificate',
+        section: 'SIGNING',
+    },
+    {
+        key: 'signingPassword',
+        help: 'Password for the signing account, stored in the OS keychain. Leave empty to be asked on each run.',
+        label: 'Signing password',
+        kind: 'secret',
+        section: 'SIGNING',
+        hint: 'blank = prompt each run',
+    },
+];
+const ENV_KEYS = new Set([
+    'domain',
+    'siteName',
+    'addonName',
+    'username',
+    'authMethod',
+    'useHTTPForDevDeploy',
+    'clientId',
+    'authorizationEndpoint',
+    'tokenEndpoint',
+    'scopes',
+    'clientSecret',
+    'sessionLoginUrl',
+    'password',
+]);
+// Wide enough for the longest source text ("^O pick from repo").
+const SOURCE_WIDTH = 18;
+function fromProject(project) {
+    const dev = project.devProperties ?? {};
+    return {
+        domain: dev.domain ?? '',
+        siteName: dev.siteName ?? '',
+        addonName: dev.addonName ?? '',
+        username: dev.username ?? '',
+        authMethod: dev.authMethod ?? 'basic',
+        password: '',
+        clientId: dev.oauth2?.clientId ?? '',
+        authorizationEndpoint: dev.oauth2?.authorizationEndpoint ?? '',
+        tokenEndpoint: dev.oauth2?.tokenEndpoint ?? '',
+        scopes: (dev.oauth2?.scopes ?? DEFAULT_SCOPES).join(' '),
+        clientSecret: '',
+        sessionLoginUrl: dev.sessionLoginUrl ?? '',
+        useHTTPForDevDeploy: dev.useHTTPForDevDeploy ? 'yes' : 'no',
+        baseEnvironment: dev.baseEnvironment ?? '',
+        production: dev.production ? 'yes' : 'no',
+        signingUsername: dev.signingUsername ?? '',
+        certificateName: dev.certificateName ?? '',
+        signingPassword: '',
+    };
+}
+function storedSecret(project, key) {
+    const dev = project.devProperties;
+    if (!dev)
+        return false;
+    if (key === 'password')
+        return Boolean(dev.password);
+    if (key === 'clientSecret') {
+        return Boolean(dev.domain &&
+            dev.oauth2?.clientId &&
+            getOAuth2ClientSecret(dev.domain, dev.oauth2.clientId));
+    }
+    return Boolean(dev.signingUsername && getSigningPassword(dev.signingUsername));
+}
+/** Apply the form to disk and the keychain. Exported for the test. */
+export function saveConfig(project, values, edited) {
+    const method = values['authMethod'];
+    const next = {
+        domain: values['domain'],
+        siteName: values['siteName'],
+        addonName: values['addonName'],
+        username: values['username'],
+        authMethod: method,
+        useHTTPForDevDeploy: values['useHTTPForDevDeploy'] === 'yes',
+    };
+    if (values['baseEnvironment'])
+        next.baseEnvironment = values['baseEnvironment'].trim().toLowerCase();
+    if (values['production'] === 'yes')
+        next.production = true;
+    if (values['signingUsername'])
+        next.signingUsername = values['signingUsername'];
+    if (values['certificateName'])
+        next.certificateName = values['certificateName'];
+    if (method === 'oauth2') {
+        const scopes = values['scopes'].split(/[\s,]+/).filter(Boolean);
+        next.oauth2 = {
+            authorizationEndpoint: values['authorizationEndpoint'],
+            tokenEndpoint: values['tokenEndpoint'],
+            clientId: values['clientId'],
+            ...(scopes.length > 0 && { scopes }),
+            ...(project.devProperties?.oauth2?.redirectPort && {
+                redirectPort: project.devProperties.oauth2.redirectPort,
+            }),
+        };
+    }
+    else if (method === 'cookie' && values['sessionLoginUrl']) {
+        next.sessionLoginUrl = values['sessionLoginUrl'];
+    }
+    const env = project.environment;
+    if (env && env !== baseEnvironment(project.base) && project.base) {
+        // Non-dev environment: site/auth fields become an override, signing
+        // fields still live on the base.
+        const base = { ...project.base };
+        base.signingUsername = next.signingUsername;
+        base.certificateName = next.certificateName;
+        base.baseEnvironment = next.baseEnvironment;
+        base.production = next.production;
+        writeDevProperties(project.root, withEnvironmentOverride(base, env, {
+            domain: next.domain,
+            siteName: next.siteName,
+            addonName: next.addonName,
+            username: next.username,
+            authMethod: next.authMethod,
+            useHTTPForDevDeploy: next.useHTTPForDevDeploy,
+            oauth2: next.oauth2,
+            sessionLoginUrl: next.sessionLoginUrl,
+        }));
+    }
+    else {
+        writeDevProperties(project.root, {
+            ...next,
+            environments: project.base?.environments ?? project.devProperties?.environments,
+        });
+    }
+    const secret = (key, set, del) => {
+        if (!edited.has(key))
+            return;
+        const value = values[key] ?? '';
+        if (value)
+            set(value);
+        else
+            del();
+    };
+    secret('password', v => setDeployPassword(next.domain, next.username, v), () => deleteDeployPassword(next.domain, next.username));
+    if (next.oauth2) {
+        const { clientId } = next.oauth2;
+        secret('clientSecret', v => setOAuth2ClientSecret(next.domain, clientId, v), () => deleteOAuth2ClientSecret(next.domain, clientId));
+    }
+    if (next.signingUsername) {
+        const user = next.signingUsername;
+        secret('signingPassword', v => setSigningPassword(user, v), () => deleteSigningPassword(user));
+    }
+}
+export function visibleFields(method, workspace = false, envMode = false) {
+    return FIELDS.filter(f => (!f.when || f.when === method) &&
+        !(workspace && f.perApp) &&
+        !(envMode && (f.section === 'SIGNING' || f.section === 'ENVIRONMENT')));
+}
+export function ConfigForm({ project, active, width, height, pickAddon, onSaved, onEditingChange, }) {
+    const [values, setValues] = useState(() => fromProject(project));
+    const [cursor, setCursor] = useState(0);
+    const [editing, setEditing] = useState(false);
+    const [draft, setDraft] = useState('');
+    const [note, setNote] = useState('');
+    // Values always mirror the project; edits are committed field by field.
+    useEffect(() => {
+        setValues(fromProject(project));
+    }, [project]);
+    useEffect(() => {
+        onEditingChange(editing);
+        return () => {
+            onEditingChange(false);
+        };
+    }, [editing, onEditingChange]);
+    const method = values['authMethod'];
+    const envMode = Boolean(project.environment &&
+        project.environment !==
+            baseEnvironment(project.base ?? project.devProperties));
+    const fields = visibleFields(method, project.workspace, envMode);
+    const current = fields[Math.min(cursor, fields.length - 1)];
+    const inherited = readInheritedDevProperties(project.root);
+    const changes = project.devProperties && !project.workspace
+        ? getPackageJsonSyncChanges(project.root, project.devProperties)
+        : [];
+    // Write one field to disk (and the keychain for secrets) right away.
+    const commit = (key, value, label = current.label) => {
+        const next = { ...values, [key]: value };
+        setValues(next);
+        saveConfig(project, next, new Set([key]));
+        setNote(t('Saved {label}.', { label: t(label) }));
+        onSaved();
+    };
+    // Auto-fill OAuth2 endpoints from the site's OpenID configuration.
+    useEffect(() => {
+        if (method !== 'oauth2' || !values['domain'])
+            return;
+        if (values['authorizationEndpoint'] && values['tokenEndpoint'])
+            return;
+        let cancelled = false;
+        setNote(t('Looking up OAuth2 endpoints…'));
+        void discoverOAuth2Config(values['domain'], values['useHTTPForDevDeploy'] === 'yes').then(found => {
+            if (cancelled)
+                return;
+            if (found) {
+                const next = {
+                    ...values,
+                    authorizationEndpoint: values['authorizationEndpoint'] || found.authorizationEndpoint,
+                    tokenEndpoint: values['tokenEndpoint'] || found.tokenEndpoint,
+                };
+                setValues(next);
+                saveConfig(project, next, new Set());
+                onSaved();
+                setNote(t('Endpoints filled from the site OpenID config.'));
+            }
+            else {
+                setNote(t('Could not discover OAuth2 endpoints; enter them by hand.'));
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [method, values['domain']]);
+    // Options for a choice row; the draft holds the highlighted one while editing.
+    const options = (f) => f.kind === 'method' ? METHODS : f.kind === 'bool' ? ['yes', 'no'] : [];
+    const openPicker = () => {
+        void pickAddon().then(name => {
+            if (name) {
+                setEditing(false);
+                commit('addonName', name, 'Addon name');
+            }
+        });
+    };
+    useInput((input, key) => {
+        if (editing) {
+            const choices = options(current);
+            if (key.escape) {
+                setEditing(false);
+            }
+            else if (key.return) {
+                setEditing(false);
+                if (draft !== values[current.key])
+                    commit(current.key, draft);
+            }
+            else if (choices.length > 0) {
+                const step = key.leftArrow || key.upArrow
+                    ? -1
+                    : key.rightArrow || key.downArrow || input === ' '
+                        ? 1
+                        : 0;
+                if (step !== 0) {
+                    const i = choices.indexOf(draft);
+                    setDraft(choices[(i + step + choices.length) % choices.length]);
+                }
+            }
+            else if (key.ctrl && input === 'o' && current.key === 'addonName') {
+                openPicker();
+            }
+            else if (key.backspace || key.delete) {
+                setDraft(d => d.slice(0, -1));
+            }
+            else if (input && !key.ctrl && !key.meta) {
+                setDraft(d => d + input);
+            }
+            return;
+        }
+        if ((key.tab && !key.shift) || key.downArrow) {
+            setCursor(c => (c + 1) % fields.length);
+        }
+        else if ((key.tab && key.shift) || key.upArrow) {
+            setCursor(c => (c - 1 + fields.length) % fields.length);
+        }
+        else if (key.ctrl && input === 'o' && current.key === 'addonName') {
+            openPicker();
+        }
+        else if (key.return) {
+            setDraft(current.kind === 'secret' ? '' : (values[current.key] ?? ''));
+            setEditing(true);
+        }
+    }, { isActive: active });
+    const source = (f) => {
+        if (f.required && !(values[f.key] ?? ''))
+            return { text: t('✗ required'), color: 'red' };
+        if (f.kind === 'secret') {
+            return { text: storedSecret(project, f.key) ? t('keychain') : '—' };
+        }
+        const value = f.kind === 'bool' ? values[f.key] === 'yes' : values[f.key];
+        if (envMode && ENV_KEYS.has(f.key)) {
+            const override = project.base?.environments?.[project.environment];
+            const overridden = override &&
+                ([
+                    'clientId',
+                    'authorizationEndpoint',
+                    'tokenEndpoint',
+                    'scopes',
+                ].includes(f.key)
+                    ? Object.hasOwn(override, 'oauth2')
+                    : Object.hasOwn(override, f.key));
+            return {
+                text: overridden ? project.environment : t('↑ dev'),
+                color: overridden ? 'yellow' : undefined,
+            };
+        }
+        const inheritedValue = [
+            'clientId',
+            'authorizationEndpoint',
+            'tokenEndpoint',
+        ].includes(f.key)
+            ? inherited['oauth2']?.[f.key]
+            : inherited[f.key];
+        if (inheritedValue !== undefined &&
+            JSON.stringify(inheritedValue) === JSON.stringify(value)) {
+            return { text: t('↑ root') };
+        }
+        return { text: (values[f.key] ?? '') ? t('local') : '' };
+    };
+    // label column (24) + source column + paddings; never below 20.
+    const valueWidth = Math.max(20, width - 24 - SOURCE_WIDTH - 2);
+    const rows = [];
+    let lastSection;
+    for (const f of fields) {
+        if (f.section && f.section !== lastSection) {
+            rows.push(_jsx(Box, { marginTop: 1, children: _jsx(Text, { bold: true, dimColor: true, children: t(f.section) }) }, `s-${f.section}`));
+            lastSection = f.section;
+        }
+        const focused = active && f === current;
+        const typing = focused && editing;
+        // Keep the end of a long value (where the cursor is) visible while typing.
+        const tail = (text) => typing && text.length > valueWidth - 1
+            ? `…${text.slice(-(valueWidth - 2))}`
+            : text;
+        let display;
+        if (f.kind === 'method' || f.kind === 'bool') {
+            const choices = options(f);
+            const chosen = typing ? draft : values[f.key];
+            display = choices.map((m, i) => (_jsxs(Text, { children: [_jsx(Text, { bold: m === chosen, color: m === chosen ? ACCENT : undefined, inverse: typing && m === chosen, dimColor: m !== chosen, children: f.kind === 'bool' ? t(m) : m }), i < choices.length - 1 && _jsx(Text, { dimColor: true, children: " \u00B7 " })] }, m)));
+        }
+        else if (f.kind === 'secret') {
+            display = typing ? (_jsx(Text, { children: tail('•'.repeat(draft.length)) })) : (_jsx(Text, { dimColor: true, children: storedSecret(project, f.key)
+                    ? t('•••••••• keychain')
+                    : f.hint
+                        ? t(f.hint)
+                        : '' }));
+        }
+        else {
+            const value = typing ? draft : values[f.key];
+            display = value ? (_jsx(Text, { children: tail(value) })) : (_jsx(Text, { dimColor: true, children: typing ? '' : f.hint ? t(f.hint) : '—' }));
+        }
+        const src = source(f);
+        rows.push(_jsxs(Box, { height: 1, children: [_jsx(Text, { color: focused ? ACCENT : undefined, bold: focused, dimColor: !focused, children: (focused ? '▸ ' : '  ') + t(f.label).padEnd(22) }), _jsx(Box, { width: valueWidth, flexShrink: 0, children: _jsxs(Text, { wrap: "truncate", children: [display, typing && options(f).length === 0 && _jsx(Text, { inverse: true, children: " " })] }) }), _jsx(Box, { width: SOURCE_WIDTH, flexShrink: 0, children: _jsx(Text, { dimColor: !src.color, color: src.color, wrap: "truncate", children: focused && f.hint && f.key === 'addonName' ? t(f.hint) : src.text }) })] }, f.key));
+    }
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, overflow: "hidden", height: height, children: [_jsxs(Text, { dimColor: true, children: [('  ' + t('FIELD')).padEnd(24), t('VALUE').padEnd(valueWidth), t('SOURCE')] }), rows, project.workspace && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: t("Shared by every app below {root}. An app's own value wins.", {
+                        root: project.root,
+                    }) }) })), !project.workspace && (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Text, { bold: true, dimColor: true, children: [t('PACKAGE.JSON SYNC'), ' ', _jsx(Text, { color: changes.length > 0 ? 'yellow' : 'green', children: changes.length === 0
+                                    ? t('in sync')
+                                    : changes.length === 1
+                                        ? t('1 diff · y to apply')
+                                        : t('{n} diffs · y to apply', { n: changes.length }) })] }), changes.map(c => (_jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { color: c.from === undefined ? 'green' : 'yellow', children: c.from === undefined ? '+ ' : '~ ' }), c.key, ":", ' ', c.from !== undefined && _jsxs(Text, { dimColor: true, children: [c.from, " \u2192 "] }), c.to] }, c.key)))] })), _jsx(Box, { flexGrow: 1 }), _jsx(Box, { flexDirection: "column", borderStyle: "single", borderDimColor: true, borderLeft: false, borderRight: false, borderBottom: false, children: _jsxs(Text, { wrap: "wrap", children: [_jsx(Text, { bold: true, color: ACCENT, children: t(current.label) }), _jsxs(Text, { dimColor: true, children: [" \u00B7 ", t(current.help)] })] }) }), _jsx(Text, { color: "yellow", children: note })] }));
+}