sitevision-cli 1.0.0-beta.3 → 1.0.0-beta.31

package/dist/commands/dev.js

@@ -1,359 +1,54 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import fs from 'fs';
-import path from 'path';
 import React from 'react';
-import { render, Box, Text, useApp, useInput } from 'ink';
+import { render, Box, Text, useApp, useInput, useStdout } from 'ink';
 import { StatusIndicator } from '../components/StatusIndicator.js';
-import { WebpackRunner, hasLocalWebpackConfig } from '../utils/webpack-runner.js';
-import { hasSitevisionScripts, runSitevisionScriptsBuild, getDelegatedZipPath, checkSitevisionScriptsCompatibility, } from '../utils/sitevision-scripts-runner.js';
 import { promptPassword, promptYesNo } from '../utils/password-prompt.js';
-import { signApp, deployApp } from '../utils/sitevision-api.js';
 import { setDeployPassword } from '../utils/keychain.js';
 import { resolveSigningPassword } from '../utils/signing-password.js';
-import { copyStaticToBuild, createBuildZip, cleanBuild } from '../utils/zip.js';
-import { isBundledApp, getAppType, getFullAppId, getZipPath, getSignedZipPath, localizedText, } from '../utils/project-detection.js';
-export function DevScreen({ projectRoot, manifest, devProperties, signed, deploy = true, signingCredentials, onBack, onRetryCredentials, }) {
+import { startDev, useTasks } from '../utils/tasks.js';
+import { Log } from '../shell/Tabs.js';
+/** Standalone `svc dev` / `svc watch`: one task, its log, Ctrl+C or q to stop. */
+export function DevScreen({ project, options }) {
     const { exit } = useApp();
-    const [state, setState] = React.useState({
-        status: 'initializing',
-        message: 'Starting webpack watch...',
-        buildCount: 0,
-        webpackReady: false,
-    });
+    const { stdout } = useStdout();
+    const tasks = useTasks();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const task = React.useMemo(() => startDev(project, options), []);
+    const live = tasks.find(t => t.id === task.id) ?? task;
     useInput((input, key) => {
-        if (onBack && (key.escape || input === 'q')) {
-            onBack();
-        }
-        if (onRetryCredentials && state.status === 'error' && input === 'r') {
-            onRetryCredentials();
-        }
-    });
-    const webpackRunnerRef = React.useRef(null);
-    const watchersRef = React.useRef([]);
-    const debounceTimerRef = React.useRef(null);
-    const isBuildingRef = React.useRef(false);
-    const pendingRebuildRef = React.useRef(false);
-    // Sign (if needed) and deploy an already-built zip, updating UI state.
-    const signAndDeploy = React.useCallback(async (zipPath, buildTime) => {
-        try {
-            let deployZipPath = zipPath;
-            // Sign if needed
-            if (signed && signingCredentials) {
-                setState(prev => ({
-                    ...prev,
-                    status: 'signing',
-                    message: 'Signing app...',
-                }));
-                const signedZipPath = getSignedZipPath(projectRoot, manifest);
-                const signResult = await signApp(zipPath, signingCredentials, signedZipPath);
-                if (!signResult.success) {
-                    setState(prev => ({
-                        ...prev,
-                        status: 'error',
-                        message: `Signing failed: ${signResult.error}`,
-                        error: signResult.error,
-                    }));
-                    return;
-                }
-                deployZipPath = signedZipPath;
-            }
-            // Watch/build-only mode: stop after building (and signing).
-            if (!deploy || !devProperties) {
-                setState(prev => ({
-                    ...prev,
-                    status: 'ready',
-                    message: signed
-                        ? 'Signed. Watching for changes...'
-                        : 'Built. Watching for changes...',
-                    buildCount: prev.buildCount + 1,
-                    lastBuildTime: buildTime,
-                    error: undefined,
-                }));
-                return;
-            }
-            // Deploy
-            setState(prev => ({
-                ...prev,
-                status: 'deploying',
-                message: 'Deploying to dev...',
-            }));
-            const appType = getAppType(manifest);
-            const deployResult = await deployApp(deployZipPath, {
-                domain: devProperties.domain,
-                siteName: devProperties.siteName,
-                addonName: devProperties.addonName,
-                username: devProperties.username,
-                password: devProperties.password,
-                useHTTP: devProperties.useHTTPForDevDeploy,
-            }, appType, true);
-            if (!deployResult.success) {
-                setState(prev => ({
-                    ...prev,
-                    status: 'error',
-                    message: `Deploy failed: ${deployResult.error}`,
-                    error: deployResult.error,
-                }));
-                return;
-            }
-            // Success - back to watching
-            setState(prev => ({
-                ...prev,
-                status: 'ready',
-                message: 'Deployed. Watching for changes...',
-                buildCount: prev.buildCount + 1,
-                lastBuildTime: buildTime,
-                error: undefined,
-            }));
-        }
-        catch (error) {
-            setState(prev => ({
-                ...prev,
-                status: 'error',
-                message: error instanceof Error ? error.message : String(error),
-                error: error instanceof Error ? error.message : String(error),
-            }));
-        }
-    }, [projectRoot, manifest, devProperties, signed, deploy, signingCredentials]);
-    // In-house webpack path: copy static, zip, then sign + deploy.
-    const handleBuildComplete = React.useCallback(async (result) => {
-        if (!result.success) {
-            setState(prev => ({
-                ...prev,
-                status: 'error',
-                message: result.errors?.join('\n') || 'Build failed',
-                error: result.errors?.join('\n'),
-            }));
-            return;
-        }
-        try {
-            copyStaticToBuild(projectRoot);
-            const appId = getFullAppId(manifest.id);
-            await createBuildZip(projectRoot, appId);
-            await signAndDeploy(getZipPath(projectRoot, manifest), result.stats?.time);
-        }
-        catch (error) {
-            setState(prev => ({
-                ...prev,
-                status: 'error',
-                message: error instanceof Error ? error.message : String(error),
-                error: error instanceof Error ? error.message : String(error),
-            }));
-        }
-    }, [projectRoot, manifest, signAndDeploy]);
-    // Delegated path: full `sitevision-scripts build` then sign + deploy.
-    // Coalesces overlapping triggers so a save mid-build queues one rebuild.
-    const runDelegatedBuild = React.useCallback(async () => {
-        if (isBuildingRef.current) {
-            pendingRebuildRef.current = true;
-            return;
-        }
-        isBuildingRef.current = true;
-        const buildOnce = async () => {
-            pendingRebuildRef.current = false;
-            setState(prev => ({
-                ...prev,
-                status: 'building',
-                message: 'Building via sitevision-scripts...',
-            }));
-            const result = await runSitevisionScriptsBuild(projectRoot);
-            if (result.success) {
-                await signAndDeploy(getDelegatedZipPath(projectRoot, manifest.id));
-            }
-            else {
-                setState(prev => ({
-                    ...prev,
-                    status: 'error',
-                    message: result.error ?? 'Build failed',
-                    error: `${result.error}\n${result.output.slice(-1000)}`,
-                }));
-            }
-            if (pendingRebuildRef.current) {
-                await buildOnce();
-            }
-        };
-        try {
-            await buildOnce();
-        }
-        finally {
-            isBuildingRef.current = false;
-        }
-    }, [projectRoot, manifest, signAndDeploy]);
-    // Watch source files and trigger a delegated rebuild (debounced).
-    const startFileWatcher = React.useCallback(() => {
-        const targets = [
-            'src',
-            'static',
-            'i18n',
-            'resource',
-            'config',
-            'manifest.json',
-        ]
-            .map(name => path.join(projectRoot, name))
-            .filter(target => fs.existsSync(target));
-        for (const target of targets) {
-            const isDir = fs.statSync(target).isDirectory();
-            const watcher = fs.watch(target, { recursive: isDir }, () => {
-                if (debounceTimerRef.current) {
-                    clearTimeout(debounceTimerRef.current);
-                }
-                debounceTimerRef.current = setTimeout(() => {
-                    void runDelegatedBuild();
-                }, 300);
-            });
-            watchersRef.current.push(watcher);
-        }
-    }, [projectRoot, runDelegatedBuild]);
-    React.useEffect(() => {
-        const isBundled = isBundledApp(manifest);
-        async function startWatch() {
-            try {
-                // Clean build directory
-                cleanBuild(projectRoot);
-                if (isBundled && !hasLocalWebpackConfig(projectRoot)) {
-                    // No local webpack config: delegate each build to
-                    // sitevision-scripts (full rebuild) and watch source files
-                    // ourselves, keeping the CLI's own sign + deploy flow.
-                    if (!hasSitevisionScripts(projectRoot)) {
-                        setState({
-                            status: 'error',
-                            message: 'No webpack.config.js found and @sitevision/sitevision-scripts is not installed. Run npm install.',
-                            buildCount: 0,
-                            webpackReady: false,
-                            error: 'No build pipeline available',
-                        });
-                        return;
-                    }
-                    const warning = checkSitevisionScriptsCompatibility(projectRoot).warning;
-                    setState(prev => ({ ...prev, webpackReady: true, warning }));
-                    startFileWatcher();
-                    await runDelegatedBuild();
-                }
-                else if (isBundled) {
-                    // Project ships its own webpack config: incremental in-process watch.
-                    if (!WebpackRunner.isWebpackAvailable(projectRoot)) {
-                        setState({
-                            status: 'error',
-                            message: 'webpack not found. Run npm install.',
-                            buildCount: 0,
-                            webpackReady: false,
-                            error: 'webpack not found',
-                        });
-                        return;
-                    }
-                    setState(prev => ({
-                        ...prev,
-                        status: 'building',
-                        message: 'Starting initial build...',
-                    }));
-                    const appType = getAppType(manifest);
-                    const runner = new WebpackRunner(projectRoot, {
-                        mode: 'development',
-                        watch: true,
-                        cssPrefix: manifest.id,
-                        restApp: appType === 'rest',
-                    });
-                    webpackRunnerRef.current = runner;
-                    await runner.watch(handleBuildComplete);
-                    setState(prev => ({
-                        ...prev,
-                        status: 'watching',
-                        message: 'Building...',
-                        webpackReady: true,
-                    }));
-                }
-                else {
-                    // Non-bundled app: just copy and deploy
-                    setState(prev => ({
-                        ...prev,
-                        status: 'building',
-                        message: 'Copying files...',
-                    }));
-                    await handleBuildComplete({
-                        success: true,
-                        stats: { time: 0, hash: '', assets: [] },
-                    });
-                }
-            }
-            catch (error) {
-                setState({
-                    status: 'error',
-                    message: error instanceof Error ? error.message : String(error),
-                    buildCount: 0,
-                    webpackReady: false,
-                    error: error instanceof Error ? error.message : String(error),
-                });
-            }
-        }
-        startWatch();
-        // Cleanup
-        return () => {
-            if (webpackRunnerRef.current) {
-                webpackRunnerRef.current.close().catch(() => { });
-            }
-            if (debounceTimerRef.current) {
-                clearTimeout(debounceTimerRef.current);
-            }
-            for (const watcher of watchersRef.current) {
-                watcher.close();
-            }
-            watchersRef.current = [];
-        };
-    }, [
-        projectRoot,
-        manifest,
-        handleBuildComplete,
-        runDelegatedBuild,
-        startFileWatcher,
-    ]);
-    // Handle Ctrl+C
-    React.useEffect(() => {
-        const handleExit = () => {
-            if (webpackRunnerRef.current) {
-                webpackRunnerRef.current.close().catch(() => { });
-            }
-            for (const watcher of watchersRef.current) {
-                watcher.close();
-            }
+        if (key.escape || input === 'q') {
+            live.stop();
             exit();
-        };
-        process.on('SIGINT', handleExit);
-        process.on('SIGTERM', handleExit);
-        return () => {
-            process.off('SIGINT', handleExit);
-            process.off('SIGTERM', handleExit);
-        };
-    }, [exit]);
-    const getStatusType = () => {
-        switch (state.status) {
-            case 'error':
-                return 'error';
-            case 'ready':
-                return 'success';
-            default:
-                return 'running';
-        }
-    };
-    const getStatusLabel = () => {
-        switch (state.status) {
-            case 'initializing':
-                return 'Initializing';
-            case 'watching':
-                return 'Watching';
-            case 'building':
-                return 'Building';
-            case 'signing':
-                return 'Signing';
-            case 'deploying':
-                return 'Deploying';
-            case 'ready':
-                return 'Ready';
-            case 'error':
-                return 'Error';
         }
+    });
+    const status = live.status === 'running'
+        ? live.phase === 'error'
+            ? 'error'
+            : 'running'
+        : live.status === 'success'
+            ? 'success'
+            : 'error';
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(StatusIndicator, { status: status, label: live.phase, message: `${live.label} ${live.appName}` }), _jsx(Box, { marginTop: 1, children: _jsx(Log, { task: live, height: (stdout.rows || 24) - 6, scroll: 0, wrap: true }) }), _jsx(Text, { dimColor: true, children: "Press q, Esc or Ctrl+C to stop" })] }));
+}
+/** Resolve signing credentials for signed dev/watch, prompting if needed. */
+export async function resolveSigningForCli(project) {
+    if (!project.hasSigningProperties ||
+        !project.devProperties?.signingUsername) {
+        console.log('\n\x1b[33mSigning credentials not configured.\x1b[0m');
+        console.log('Run \x1b[36msetup-signing\x1b[0m to configure credentials.\n');
+        return undefined;
+    }
+    const signingUsername = project.devProperties.signingUsername;
+    const password = await resolveSigningPassword(signingUsername);
+    if (!password) {
+        console.log('\x1b[31mError: Password is required for signed mode\x1b[0m');
+        return undefined;
+    }
+    return {
+        username: signingUsername,
+        password,
+        certificateName: project.devProperties.certificateName,
     };
-    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(StatusIndicator, { status: getStatusType(), label: getStatusLabel(), message: state.message }) }), state.warning && (_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { color: "yellow", children: ["\u26A0 ", state.warning] }) })), state.buildCount > 0 && (_jsx(Box, { marginLeft: 2, marginBottom: 1, children: _jsxs(Text, { dimColor: true, children: ["Builds: ", state.buildCount, state.lastBuildTime
-                            ? ` | Last build: ${state.lastBuildTime}ms`
-                            : '', signed ? ' | Signed mode' : ''] }) })), _jsx(Box, { marginLeft: 2, marginBottom: 1, children: _jsxs(Text, { dimColor: true, children: [localizedText(manifest.name), " v", manifest.version] }) }), deploy && devProperties && (_jsx(Box, { marginLeft: 2, marginBottom: 1, children: _jsxs(Text, { dimColor: true, children: ["Target: ", devProperties.domain, "/", devProperties.siteName, "/", devProperties.addonName] }) })), state.status === 'error' && state.error && (_jsx(Box, { flexDirection: "column", marginTop: 1, children: _jsx(Text, { color: "red", children: state.error }) })), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [state.status === 'error' && onRetryCredentials && (_jsx(Text, { dimColor: true, children: "Press r to retry with new credentials" })), onBack ? (_jsx(Text, { dimColor: true, children: "Press q or Esc to return to menu (Ctrl+C to stop process)" })) : (_jsx(Text, { dimColor: true, children: "Press Ctrl+C to stop" }))] })] }));
 }
 export const devCommand = {
     name: 'dev',
@@ -368,15 +63,22 @@ export const devCommand = {
         },
     },
     async execute({ project, flags }) {
-        // Check if dev properties are configured
-        if (!project.hasDevProperties || !project.devProperties) {
+        const dev = project.devProperties;
+        if (!project.hasDevProperties || !dev) {
             console.log('\n\x1b[33mDeployment credentials not configured.\x1b[0m');
             console.log('Create a .dev_properties.json file with domain, siteName, addonName, and username, then run setup.\n');
             return;
         }
-        // Resolve deploy password (already loaded from keychain/env in detectProject — prompt if missing)
-        if (!project.devProperties.password) {
-            const { domain, username } = project.devProperties;
+        // The standalone command only prompts for a basic password; OAuth2/cookie
+        // logins are interactive and live in the shell (`svc`) or `svc deploy`.
+        if ((dev.authMethod ?? 'basic') !== 'basic' &&
+            !dev.accessToken &&
+            !dev.sessionCookie) {
+            console.log('\n\x1b[33mNo token/cookie available. Run `svc` and use Dev from the shell, or set SITEVISION_ACCESS_TOKEN / SITEVISION_SESSION_COOKIE.\x1b[0m\n');
+            return;
+        }
+        if ((dev.authMethod ?? 'basic') === 'basic' && !dev.password) {
+            const { domain, username } = dev;
             console.log('');
             const pw = await promptPassword(`Deploy password for ${username}@${domain}: `);
             if (!pw) {
@@ -387,31 +89,28 @@ export const devCommand = {
             if (remember && domain && username) {
                 setDeployPassword(domain, username, pw);
             }
-            project.devProperties.password = pw;
+            dev.password = pw;
         }
-        const signed = Boolean(flags['signed']);
         let signingCredentials;
-        // If signed mode, resolve signing password (keychain → env → prompt)
-        if (signed) {
-            if (!project.hasSigningProperties ||
-                !project.devProperties.signingUsername) {
-                console.log('\n\x1b[33mSigning credentials not configured.\x1b[0m');
-                console.log('Run \x1b[36msetup-signing\x1b[0m to configure credentials.\n');
+        if (flags['signed']) {
+            signingCredentials = await resolveSigningForCli(project);
+            if (!signingCredentials)
                 return;
-            }
-            const signingUsername = project.devProperties.signingUsername;
-            const password = await resolveSigningPassword(signingUsername);
-            if (!password) {
-                console.log('\x1b[31mError: Password is required for signed mode\x1b[0m');
-                return;
-            }
-            signingCredentials = {
-                username: signingUsername,
-                password,
-                certificateName: project.devProperties.certificateName,
-            };
         }
-        const { waitUntilExit } = render(_jsx(DevScreen, { projectRoot: project.root, manifest: project.manifest, devProperties: project.devProperties, signed: signed, signingCredentials: signingCredentials }));
+        const { waitUntilExit } = render(_jsx(DevScreen, { project: project, options: {
+                deploy: true,
+                signingCredentials,
+                deployConfig: {
+                    domain: dev.domain,
+                    siteName: dev.siteName,
+                    addonName: dev.addonName,
+                    username: dev.username,
+                    password: dev.password,
+                    accessToken: dev.accessToken,
+                    sessionCookie: dev.sessionCookie,
+                    useHTTP: dev.useHTTPForDevDeploy,
+                },
+            } }));
         await waitUntilExit();
     },
 };

package/dist/commands/watch.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { render } from 'ink';
-import { DevScreen } from './dev.js';
-import { resolveSigningPassword } from '../utils/signing-password.js';
+import { DevScreen, resolveSigningForCli } from './dev.js';
 export const watchCommand = {
     name: 'watch',
     description: 'Watch and rebuild (optionally signing) without deploying',
@@ -15,30 +14,13 @@ export const watchCommand = {
         },
     },
     async execute({ project, flags }) {
-        const signed = Boolean(flags['signed']);
         let signingCredentials;
-        // Signed mode: resolve signing credentials (keychain → env → prompt).
-        // No deploy credentials are needed — watch never deploys.
-        if (signed) {
-            if (!project.hasSigningProperties ||
-                !project.devProperties?.signingUsername) {
-                console.log('\n\x1b[33mSigning credentials not configured.\x1b[0m');
-                console.log('Run \x1b[36msetup-signing\x1b[0m to configure credentials.\n');
+        if (flags['signed']) {
+            signingCredentials = await resolveSigningForCli(project);
+            if (!signingCredentials)
                 return;
-            }
-            const signingUsername = project.devProperties.signingUsername;
-            const password = await resolveSigningPassword(signingUsername);
-            if (!password) {
-                console.log('\x1b[31mError: Password is required for signed mode\x1b[0m');
-                return;
-            }
-            signingCredentials = {
-                username: signingUsername,
-                password,
-                certificateName: project.devProperties.certificateName,
-            };
         }
-        const { waitUntilExit } = render(_jsx(DevScreen, { projectRoot: project.root, manifest: project.manifest, devProperties: project.devProperties, signed: signed, deploy: false, signingCredentials: signingCredentials }));
+        const { waitUntilExit } = render(_jsx(DevScreen, { project: project, options: { deploy: false, signingCredentials } }));
         await waitUntilExit();
     },
 };

package/dist/components/AnimatedLogo.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useEffect, useRef, useState } from 'react';
-import { Box, Text } from 'ink';
+import { Box, Text, useStdout } from 'ink';
 import { AUTHOR, BIG_LOGO } from '../utils/branding.js';
 const FRAME_MS = 45;
 const SWEEP_COLS_PER_FRAME = 7; // how fast the wipe edge moves left → right
@@ -83,5 +83,11 @@ export function AnimatedLogo({ art = BIG_LOGO, onDone }) {
         }
     }, [frame, total, onDone]);
     const edge = (frame + 1) * SWEEP_COLS_PER_FRAME;
-    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [art.map((line, y) => (_jsx(Text, { children: buildSpans(line, y, frame, edge).map((span, index) => (_jsx(Fragment, { children: span.color ? (_jsx(Text, { color: span.color, children: span.text })) : (_jsx(Text, { children: span.text })) }, index))) }, y))), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { dimColor: true, children: '  a tool by ' }), _jsx(Text, { bold: true, children: AUTHOR })] })] }));
+    // Centre the wordmark on the alternate screen. `rows - 1` leaves room for
+    // Ink's trailing newline; a terminal too short for the art just renders it
+    // top-aligned rather than scrolling.
+    const { stdout } = useStdout();
+    const height = (stdout.rows || 24) - 1;
+    const fits = height >= art.length + 2;
+    return (_jsx(Box, { width: stdout.columns || 80, height: fits ? height : undefined, alignItems: "center", justifyContent: "center", children: _jsxs(Box, { flexDirection: "column", padding: 1, children: [art.map((line, y) => (_jsx(Text, { children: buildSpans(line, y, frame, edge).map((span, index) => (_jsx(Fragment, { children: span.color ? (_jsx(Text, { color: span.color, children: span.text })) : (_jsx(Text, { children: span.text })) }, index))) }, y))), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { dimColor: true, children: '  a tool by ' }), _jsx(Text, { bold: true, children: AUTHOR })] })] }) }));
 }

package/dist/components/AuthLoginScreen.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { DevProperties } from '../types/index.js';
+interface Credential {
+    accessToken?: string;
+    sessionCookie?: string;
+}
+interface Props {
+    method: 'oauth2' | 'cookie';
+    devProperties: DevProperties;
+    onComplete: (credential: Credential) => void;
+    onError: (message: string) => void;
+    onCancel: () => void;
+}
+/**
+ * Ink-native interactive login for OAuth2 and session-cookie auth. Drives the
+ * browser and (for cookie) the "press Enter to capture" handoff through Ink's
+ * own input, so it works inside the TUI as well as the standalone command —
+ * neither needs to own raw stdin the way the old console prompt did.
+ */
+export declare function AuthLoginScreen({ method, devProperties, onComplete, onError, onCancel, }: Props): React.JSX.Element;
+export {};

package/dist/components/AuthLoginScreen.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Box, Text, useInput } from 'ink';
+import Spinner from 'ink-spinner';
+import { t } from '../utils/i18n.js';
+import { beginOAuth2Login, openBrowser } from '../utils/oauth2-auth.js';
+import { beginCookieLogin, } from '../utils/session-cookie-auth.js';
+/**
+ * Ink-native interactive login for OAuth2 and session-cookie auth. Drives the
+ * browser and (for cookie) the "press Enter to capture" handoff through Ink's
+ * own input, so it works inside the TUI as well as the standalone command —
+ * neither needs to own raw stdin the way the old console prompt did.
+ */
+export function AuthLoginScreen({ method, devProperties, onComplete, onError, onCancel, }) {
+    const [phase, setPhase] = React.useState('starting');
+    const [authUrl, setAuthUrl] = React.useState('');
+    const [note, setNote] = React.useState('');
+    const [loginUrl, setLoginUrl] = React.useState('');
+    const cookieRef = React.useRef(null);
+    const cancelOAuthRef = React.useRef(null);
+    React.useEffect(() => {
+        void (async () => {
+            if (method === 'oauth2') {
+                const session = beginOAuth2Login(devProperties);
+                if (!session) {
+                    onError('OAuth2 is not fully configured (authorization/token endpoint or client ID missing).');
+                    return;
+                }
+                cancelOAuthRef.current = session.cancel;
+                setAuthUrl(session.authUrl);
+                openBrowser(session.authUrl);
+                setPhase('awaiting');
+                const { token, error } = await session.complete();
+                cancelOAuthRef.current = null;
+                if (token) {
+                    onComplete({ accessToken: token });
+                }
+                else {
+                    onError(error ?? 'OAuth2 login failed.');
+                }
+            }
+            else {
+                const session = await beginCookieLogin(devProperties);
+                if (!session) {
+                    onError('Could not open a login browser (is Chrome installed?). Set SITEVISION_SESSION_COOKIE or pass --cookie with a cookie copied from your browser.');
+                    return;
+                }
+                cookieRef.current = session;
+                setLoginUrl(session.loginUrl);
+                setPhase('awaiting');
+            }
+        })();
+        // Release resources if the screen unmounts before completing: close the
+        // browser (cookie) and the loopback server (oauth2, frees the port).
+        return () => {
+            void cookieRef.current?.close();
+            cookieRef.current = null;
+            cancelOAuthRef.current?.();
+            cancelOAuthRef.current = null;
+        };
+        // Run once: the parent mounts this fresh when a login is needed.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    useInput((_input, key) => {
+        if (key.escape) {
+            onCancel();
+            return;
+        }
+        if (method === 'cookie' && phase === 'awaiting' && key.return) {
+            const session = cookieRef.current;
+            if (!session)
+                return;
+            setPhase('capturing');
+            void (async () => {
+                const result = await session.capture();
+                if (result.cookie) {
+                    cookieRef.current = null;
+                    await session.close();
+                    onComplete({ sessionCookie: result.cookie });
+                }
+                else {
+                    // Keep the browser open so the user can navigate and retry.
+                    setNote(result.error ?? 'No session cookie found.');
+                    setPhase('awaiting');
+                }
+            })();
+        }
+    });
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: "cyan", children: method === 'oauth2' ? t('OAuth2 login') : t('Session cookie login') }) }), method === 'oauth2' ? (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: "green", children: _jsx(Spinner, { type: "dots" }) }), _jsxs(Text, { children: [" ", t('Waiting for you to finish login in the browser…')] })] }), authUrl && (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: t("If the browser didn't open, visit:") }), _jsx(Text, { children: authUrl })] }))] })) : (_jsxs(Box, { flexDirection: "column", children: [phase === 'starting' && (_jsxs(Box, { children: [_jsx(Text, { color: "green", children: _jsx(Spinner, { type: "dots" }) }), _jsxs(Text, { children: [" ", t('Opening browser…')] })] })), phase === 'awaiting' && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { children: t('A Chrome window is open at:') }), _jsx(Text, { color: "cyan", children: loginUrl }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { children: t('1. Log in to the site there, single sign-on included.') }), _jsx(Text, { children: t('2. Wait until the site itself has finished loading.') }), _jsx(Text, { children: t('3. Come back here and press Enter.') })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: t('Leave the browser window open; it closes once the session is captured.') }) })] })), phase === 'capturing' && (_jsxs(Box, { children: [_jsx(Text, { color: "green", children: _jsx(Spinner, { type: "dots" }) }), _jsxs(Text, { children: [" ", t('Capturing session…')] })] })), note && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "yellow", children: note }) }))] })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: t('Press Esc to cancel.') }) })] }));
+}