@meistrari/tela-cli 0.1.1 → 0.3.0

package/src/ink/screens/setup/setup-screen.tsx

@@ -0,0 +1,574 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { useInput } from 'ink'
+import { ENVIRONMENT_PRESET_OPTIONS, resolveEnvironmentConfigForPreset } from '../../../config.ts'
+import {
+    loadSshPublicKey,
+    validateSshPublicKeyPath,
+} from '../../../forgejo.ts'
+import type { TelaCliAuthState, TelaCliForgejoOrganization } from '../../../types.ts'
+import { StepFrame } from './step-frame.tsx'
+import type { BreadcrumbEntry } from './breadcrumb.tsx'
+import {
+    getVisibleEditSteps,
+    summarizeStep,
+    type SetupStepDescriptor,
+    type SetupStepId,
+} from './steps.ts'
+import { DoneStep } from './steps/done-step.tsx'
+import { EnvironmentStep } from './steps/environment-step.tsx'
+import { OrganizationStep } from './steps/organization-step.tsx'
+import { ReviewStep } from './steps/review-step.tsx'
+import { RunningStep } from './steps/running-step.tsx'
+import { SshKeyStep, buildSshKeyOptions } from './steps/ssh-key-step.tsx'
+import { TextFieldStep } from './steps/text-field-step.tsx'
+import {
+    CUSTOM_SSH_KEY_OPTION,
+    type SetupFormValues,
+    type SetupScreenProps,
+    type SetupScreenResult,
+} from './types.ts'
+
+export type { SetupScreenProps, SetupScreenResult } from './types.ts'
+
+type SetupPhase =
+    | 'editing'
+    | 'review'
+    | 'authenticating'
+    | 'selectingOrganization'
+    | 'provisioning'
+    | 'done'
+
+type TextStepId = Exclude<SetupStepId, 'environment' | 'sshKey'>
+
+function pushProgressLines(lines: string[], message: string): string[] {
+    const nextLines = message
+        .split('\n')
+        .map(line => line.trim())
+        .filter(Boolean)
+
+    if (nextLines.length === 0) {
+        return lines
+    }
+
+    return [...lines, ...nextLines].slice(-12)
+}
+
+export function SetupScreen(props: SetupScreenProps): React.ReactElement {
+    const [phase, setPhase] = useState<SetupPhase>('editing')
+    const [stepIndex, setStepIndex] = useState(0)
+    const [values, setValues] = useState<SetupFormValues>({
+        environment: props.defaults.environment,
+        agentApiUrl: props.defaults.agentApiUrl,
+        authApiUrl: props.defaults.authApiUrl,
+        authDashboardUrl: props.defaults.authDashboardUrl,
+        telaApiUrl: props.defaults.telaApiUrl,
+        requesterApplicationId: props.defaults.requesterApplicationId,
+        targetApplicationId: props.defaults.targetApplicationId,
+        cloneRoot: props.defaults.cloneRoot,
+        sshKeySelection: props.sshPublicKeys[0]?.path ?? CUSTOM_SSH_KEY_OPTION,
+        sshKeyPath: '',
+    })
+    const [errors, setErrors] = useState<Partial<Record<SetupStepId, string>>>({})
+    const [createCloneRoot, setCreateCloneRoot] = useState(true)
+    const [progressLines, setProgressLines] = useState<string[]>([])
+    const [verificationUrl, setVerificationUrl] = useState<string | null>(null)
+    const [userCode, setUserCode] = useState<string | null>(null)
+    const [runningStage, setRunningStage] = useState<'auth' | 'provision'>('auth')
+    const [authenticated, setAuthenticated] = useState<TelaCliAuthState | null>(null)
+    const [organizationOptions, setOrganizationOptions] = useState<TelaCliForgejoOrganization[]>([])
+    const [organizationIndex, setOrganizationIndex] = useState(0)
+    const [preferredOrganizationId, setPreferredOrganizationId] = useState<string | undefined>(undefined)
+    const [selectedOrganization, setSelectedOrganization] = useState<TelaCliForgejoOrganization | null>(null)
+    const [result, setResult] = useState<SetupScreenResult | null>(null)
+    const authStartedRef = useRef(false)
+    const provisionStartedRef = useRef(false)
+
+    const visibleSteps = useMemo(() => getVisibleEditSteps(values), [values])
+    const safeStepIndex = Math.min(stepIndex, Math.max(visibleSteps.length - 1, 0))
+    const currentStep: SetupStepDescriptor | undefined = visibleSteps[safeStepIndex]
+
+    const resolvedConfig = useMemo(() => {
+        try {
+            return resolveEnvironmentConfigForPreset(values.environment, values)
+        }
+        catch {
+            return {
+                environment: values.environment,
+                agentApiUrl: values.agentApiUrl,
+                authApiUrl: values.authApiUrl,
+                authDashboardUrl: values.authDashboardUrl,
+                telaApiUrl: values.telaApiUrl,
+                requesterApplicationId: values.requesterApplicationId,
+                targetApplicationId: values.targetApplicationId,
+            }
+        }
+    }, [values])
+
+    const sshKeyOptions = useMemo(() => buildSshKeyOptions(props.sshPublicKeys), [props.sshPublicKeys])
+    const selectedSshKey = useMemo(() => {
+        if (values.sshKeySelection === CUSTOM_SSH_KEY_OPTION) {
+            try {
+                return values.sshKeyPath.trim() ? loadSshPublicKey(values.sshKeyPath) : undefined
+            }
+            catch {
+                return undefined
+            }
+        }
+
+        return props.sshPublicKeys.find(key => key.path === values.sshKeySelection)
+    }, [props.sshPublicKeys, values.sshKeyPath, values.sshKeySelection])
+    const cloneRootState = useMemo(() => props.inspectCloneRoot(values.cloneRoot), [props, values.cloneRoot])
+
+    const breadcrumb = useMemo<BreadcrumbEntry[]>(() => {
+        const entries: BreadcrumbEntry[] = []
+        const answered = visibleSteps.slice(0, safeStepIndex)
+        for (const step of answered) {
+            entries.push({
+                label: step.label,
+                value: summarizeStep(step, values, selectedSshKey?.title),
+            })
+        }
+
+        return entries
+    }, [safeStepIndex, selectedSshKey, values, visibleSteps])
+
+    const reviewResolved = Boolean(authenticated && selectedOrganization)
+
+    function resetResolvedSetup(): void {
+        setAuthenticated(null)
+        setOrganizationOptions([])
+        setOrganizationIndex(0)
+        setPreferredOrganizationId(undefined)
+        setSelectedOrganization(null)
+        setProgressLines([])
+        setVerificationUrl(null)
+        setUserCode(null)
+        setRunningStage('auth')
+    }
+
+    useEffect(() => {
+        if (phase !== 'authenticating') {
+            authStartedRef.current = false
+        }
+
+        if (phase !== 'provisioning') {
+            provisionStartedRef.current = false
+        }
+    }, [phase])
+
+    useEffect(() => {
+        if (phase !== 'authenticating' || authStartedRef.current) {
+            return
+        }
+
+        authStartedRef.current = true
+        resetResolvedSetup()
+        setRunningStage('auth')
+        setProgressLines(['Starting Tela sign-in...'])
+
+        void props.authenticate({
+            ...resolvedConfig,
+            cloneRoot: values.cloneRoot,
+        }, (event) => {
+            if (event.type === 'user_code') {
+                setVerificationUrl(event.verificationUrl ?? null)
+                setUserCode(event.userCode ?? null)
+            }
+            setProgressLines(current => pushProgressLines(current, event.message))
+        })
+            .then(async (auth) => {
+                setAuthenticated(auth)
+                setVerificationUrl(null)
+                setUserCode(null)
+                setProgressLines(current => pushProgressLines(
+                    current,
+                    `Signed in as ${auth.user.email} in ${auth.workspace.title}.`,
+                ))
+                setProgressLines(current => pushProgressLines(current, 'Loading workspace organizations...'))
+
+                const organizationResolution = await props.resolveOrganizations({
+                    ...resolvedConfig,
+                    cloneRoot: values.cloneRoot,
+                    auth,
+                })
+
+                setOrganizationOptions(organizationResolution.organizations)
+                setPreferredOrganizationId(organizationResolution.preferredOrganization?.id)
+
+                if (organizationResolution.organizations.length === 1) {
+                    const organization = organizationResolution.organizations[0]!
+                    setSelectedOrganization(organization)
+                    setProgressLines(current => pushProgressLines(
+                        current,
+                        `Using workspace organization ${organization.name}.`,
+                    ))
+                    setPhase('review')
+                    return
+                }
+
+                const preferredIndex = organizationResolution.organizations.findIndex(
+                    organization => organization.id === organizationResolution.preferredOrganization?.id,
+                )
+                setOrganizationIndex(Math.max(preferredIndex, 0))
+                setPhase('selectingOrganization')
+            })
+            .catch((error) => {
+                props.controller.reject(error)
+            })
+    }, [phase, props, resolvedConfig, values.cloneRoot])
+
+    useEffect(() => {
+        if (phase !== 'provisioning' || provisionStartedRef.current) {
+            return
+        }
+
+        provisionStartedRef.current = true
+        setRunningStage('provision')
+        setVerificationUrl(null)
+        setUserCode(null)
+
+        if (!selectedSshKey) {
+            props.controller.reject(new Error('SSH public key is required.'))
+            return
+        }
+
+        if (!authenticated || !selectedOrganization) {
+            props.controller.reject(new Error('Authenticated organization selection is required.'))
+            return
+        }
+
+        setProgressLines(current => pushProgressLines(
+            current,
+            `Provisioning Forgejo access for ${selectedOrganization.name}.`,
+        ))
+
+        void props.execute({
+            ...resolvedConfig,
+            cloneRoot: values.cloneRoot,
+            createCloneRoot,
+            sshKey: selectedSshKey,
+            auth: authenticated,
+            organization: selectedOrganization,
+        }, (event) => {
+            setProgressLines(current => pushProgressLines(current, event.message))
+        })
+            .then((nextResult) => {
+                setResult(nextResult)
+                setPhase('done')
+            })
+            .catch((error) => {
+                props.controller.reject(error)
+            })
+    }, [
+        authenticated,
+        createCloneRoot,
+        phase,
+        props,
+        resolvedConfig,
+        selectedOrganization,
+        selectedSshKey,
+        values.cloneRoot,
+    ])
+
+    useEffect(() => {
+        if (phase === 'done' && result) {
+            props.controller.resolve(result, 80)
+        }
+    }, [phase, props, result])
+
+    useInput((input, key) => {
+        if (phase === 'authenticating' || phase === 'provisioning' || phase === 'done') {
+            return
+        }
+
+        if (phase === 'selectingOrganization') {
+            if (key.escape || key.leftArrow) {
+                resetResolvedSetup()
+                setPhase('review')
+                return
+            }
+
+            if (key.upArrow || key.downArrow) {
+                const direction = key.upArrow ? -1 : 1
+                setOrganizationIndex(current => {
+                    if (organizationOptions.length === 0) {
+                        return current
+                    }
+
+                    return (organizationOptions.length + current + direction) % organizationOptions.length
+                })
+                return
+            }
+
+            if (key.return) {
+                const organization = organizationOptions[organizationIndex]
+                if (!organization) {
+                    props.controller.reject(new Error('Organization selection is required.'))
+                    return
+                }
+
+                setSelectedOrganization(organization)
+                setProgressLines(current => pushProgressLines(
+                    current,
+                    `Selected workspace organization ${organization.name}.`,
+                ))
+                setPhase('review')
+            }
+
+            return
+        }
+
+        if (phase === 'review') {
+            if (key.escape || key.leftArrow) {
+                if (reviewResolved) {
+                    if (organizationOptions.length > 1) {
+                        setSelectedOrganization(null)
+                        setPhase('selectingOrganization')
+                        return
+                    }
+
+                    resetResolvedSetup()
+                    return
+                }
+
+                setPhase('editing')
+                setStepIndex(Math.max(visibleSteps.length - 1, 0))
+                return
+            }
+
+            if (!cloneRootState.exists && (input === ' ' || key.rightArrow)) {
+                setCreateCloneRoot(current => !current)
+                return
+            }
+
+            if (key.return) {
+                setPhase(reviewResolved ? 'provisioning' : 'authenticating')
+            }
+
+            return
+        }
+
+        if (!currentStep) {
+            return
+        }
+
+        if (key.escape || key.leftArrow) {
+            if (safeStepIndex === 0) {
+                props.controller.reject(new Error('Setup cancelled.'))
+                return
+            }
+
+            setErrors(current => ({ ...current, [currentStep.id]: undefined }))
+            setStepIndex(current => Math.max(current - 1, 0))
+            return
+        }
+
+        if (currentStep.kind === 'select-environment' && (key.upArrow || key.downArrow)) {
+            const direction = key.upArrow ? -1 : 1
+            setValues((current) => {
+                const currentIdx = ENVIRONMENT_PRESET_OPTIONS.findIndex(option => option.value === current.environment)
+                const nextIdx = (ENVIRONMENT_PRESET_OPTIONS.length + currentIdx + direction) % ENVIRONMENT_PRESET_OPTIONS.length
+                return {
+                    ...current,
+                    environment: ENVIRONMENT_PRESET_OPTIONS[nextIdx]?.value ?? current.environment,
+                }
+            })
+            return
+        }
+
+        if (currentStep.kind === 'select-ssh-key' && (key.upArrow || key.downArrow)) {
+            const direction = key.upArrow ? -1 : 1
+            setValues((current) => {
+                const currentIdx = sshKeyOptions.findIndex(option => option.key === current.sshKeySelection)
+                const nextIdx = (sshKeyOptions.length + currentIdx + direction) % sshKeyOptions.length
+                return {
+                    ...current,
+                    sshKeySelection: sshKeyOptions[nextIdx]?.key ?? current.sshKeySelection,
+                }
+            })
+            return
+        }
+
+        if (currentStep.kind === 'text' && (key.backspace || key.delete)) {
+            const fieldKey = currentStep.id as TextStepId
+            setValues(current => ({
+                ...current,
+                [fieldKey]: current[fieldKey].slice(0, -1),
+            }))
+            setErrors(current => ({ ...current, [currentStep.id]: undefined }))
+            return
+        }
+
+        if (key.return) {
+            const validationError = validateStep(currentStep, values, props, selectedSshKey)
+            if (validationError) {
+                setErrors(current => ({ ...current, [currentStep.id]: validationError }))
+                return
+            }
+
+            const nextIndex = safeStepIndex + 1
+            const nextVisible = getVisibleEditSteps(values)
+            if (nextIndex >= nextVisible.length) {
+                setPhase('review')
+                return
+            }
+
+            setStepIndex(nextIndex)
+            return
+        }
+
+        if (currentStep.kind === 'text' && input) {
+            const fieldKey = currentStep.id as TextStepId
+            setValues(current => ({
+                ...current,
+                [fieldKey]: `${current[fieldKey]}${input}`,
+            }))
+            setErrors(current => ({ ...current, [currentStep.id]: undefined }))
+        }
+    })
+
+    if (phase === 'authenticating' || phase === 'provisioning') {
+        return (
+            <RunningStep
+                stage={runningStage}
+                organizationName={selectedOrganization?.name}
+                verificationUrl={verificationUrl}
+                userCode={userCode}
+                progressLines={progressLines}
+            />
+        )
+    }
+
+    if (phase === 'done' && result) {
+        return <DoneStep result={result} />
+    }
+
+    if (phase === 'selectingOrganization' && authenticated) {
+        return (
+            <OrganizationStep
+                auth={authenticated}
+                organizations={organizationOptions}
+                currentIndex={organizationIndex}
+                preferredOrganizationId={preferredOrganizationId}
+            />
+        )
+    }
+
+    if (phase === 'review') {
+        return (
+            <ReviewStep
+                values={values}
+                resolvedConfig={resolvedConfig}
+                auth={authenticated}
+                selectedOrganization={selectedOrganization}
+                selectedSshKey={selectedSshKey}
+                cloneRootState={cloneRootState}
+                createCloneRoot={createCloneRoot}
+            />
+        )
+    }
+
+    if (!currentStep) {
+        return (
+            <StepFrame
+                stepNumber={1}
+                totalSteps={1}
+                stepLabel="Setup"
+                question="Preparing setup…"
+                breadcrumb={[]}
+                footer="Esc cancel"
+            >
+                <></>
+            </StepFrame>
+        )
+    }
+
+    const footer = buildFooter(currentStep, safeStepIndex === 0)
+    const error = errors[currentStep.id]
+
+    return (
+        <StepFrame
+            stepNumber={safeStepIndex + 1}
+            totalSteps={visibleSteps.length}
+            stepLabel={currentStep.label}
+            question={currentStep.question}
+            breadcrumb={breadcrumb}
+            footer={footer}
+        >
+            {renderStepBody(currentStep, values, error, sshKeyOptions, props.sshPublicKeys.length > 0)}
+        </StepFrame>
+    )
+}
+
+function renderStepBody(
+    step: SetupStepDescriptor,
+    values: SetupFormValues,
+    error: string | undefined,
+    sshKeyOptions: ReturnType<typeof buildSshKeyOptions>,
+    hasDiscoveredKeys: boolean,
+): React.ReactElement {
+    if (step.kind === 'select-environment') {
+        return <EnvironmentStep values={values} />
+    }
+
+    if (step.kind === 'select-ssh-key') {
+        return (
+            <SshKeyStep
+                options={sshKeyOptions}
+                selection={values.sshKeySelection}
+                hasDiscoveredKeys={hasDiscoveredKeys}
+            />
+        )
+    }
+
+    const fieldKey = step.id as TextStepId
+    return (
+        <TextFieldStep
+            value={values[fieldKey]}
+            placeholder={step.placeholder}
+            error={error}
+        />
+    )
+}
+
+function buildFooter(step: SetupStepDescriptor, isFirstStep: boolean): string {
+    const back = isFirstStep ? 'Esc cancel' : 'Esc back'
+    switch (step.kind) {
+        case 'select-environment':
+            return `↑/↓ choose · Enter continue · ${back}`
+        case 'select-ssh-key':
+            return `↑/↓ choose · Enter continue · ${back}`
+        case 'text':
+            return `Type to edit · Enter continue · ${back}`
+    }
+}
+
+function validateStep(
+    step: SetupStepDescriptor,
+    values: SetupFormValues,
+    props: SetupScreenProps,
+    selectedSshKey: ReturnType<typeof loadSshPublicKey> | undefined,
+): string | undefined {
+    switch (step.id) {
+        case 'environment':
+            return undefined
+        case 'agentApiUrl':
+            return props.validateAgentApiUrl(values.agentApiUrl)
+        case 'authApiUrl':
+            return props.validateAuthApiUrl(values.authApiUrl)
+        case 'authDashboardUrl':
+            return props.validateAuthDashboardUrl(values.authDashboardUrl)
+        case 'telaApiUrl':
+            return props.validateTelaApiUrl(values.telaApiUrl)
+        case 'requesterApplicationId':
+            return props.validateApplicationId(values.requesterApplicationId, 'Requester application ID')
+        case 'targetApplicationId':
+            return props.validateApplicationId(values.targetApplicationId, 'Target application ID')
+        case 'cloneRoot':
+            return props.validateCloneRoot(values.cloneRoot)
+        case 'sshKey':
+            return selectedSshKey ? undefined : 'SSH public key is required'
+        case 'sshKeyPath':
+            return validateSshPublicKeyPath(values.sshKeyPath)
+    }
+}

package/src/ink/screens/setup/step-frame.tsx

@@ -0,0 +1,30 @@
+import React, { type ReactNode } from 'react'
+import { AppFrame, Section } from '../../components.tsx'
+import { Breadcrumb, type BreadcrumbEntry } from './breadcrumb.tsx'
+
+export interface StepFrameProps {
+    stepNumber: number
+    totalSteps: number
+    stepLabel: string
+    question: string
+    breadcrumb: BreadcrumbEntry[]
+    footer?: string
+    status?: string
+    children: ReactNode
+}
+
+export function StepFrame(props: StepFrameProps): React.ReactElement {
+    return (
+        <AppFrame
+            title="Setup"
+            subtitle={`Step ${props.stepNumber} of ${props.totalSteps} — ${props.stepLabel}`}
+            footer={props.footer}
+            status={props.status}
+        >
+            <Breadcrumb entries={props.breadcrumb} />
+            <Section title={props.question}>
+                {props.children}
+            </Section>
+        </AppFrame>
+    )
+}

package/src/ink/screens/setup/steps/done-step.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { Text } from 'ink'
+import { AppFrame, Section } from '../../../components.tsx'
+import type { SetupScreenResult } from '../types.ts'
+
+export function DoneStep(props: { result: SetupScreenResult }): React.ReactElement {
+    return (
+        <AppFrame
+            title="Setup"
+            subtitle="Setup complete."
+        >
+            <Section title="Authenticated">
+                <Text>User: {props.result.config.auth?.user.email ?? '<missing>'}</Text>
+                <Text>Workspace: {props.result.config.auth?.workspace.title ?? '<missing>'}</Text>
+                <Text>Organization: {props.result.config.forgejoOrganization?.name ?? '<missing>'}</Text>
+                <Text>Clone root: {props.result.config.cloneRoot}</Text>
+                <Text>Forgejo user: {props.result.config.forgejoUserRegistered ? 'registered' : 'pending'}</Text>
+            </Section>
+            <Section title="Checks">
+                {props.result.checks.map(check => (
+                    <Text key={check.label}>
+                        {check.label}: {check.status} — {check.detail}
+                    </Text>
+                ))}
+            </Section>
+        </AppFrame>
+    )
+}

package/src/ink/screens/setup/steps/environment-step.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { ENVIRONMENT_PRESET_OPTIONS } from '../../../../config.ts'
+import { SelectList } from '../../../components.tsx'
+import type { SetupFormValues } from '../types.ts'
+
+export function EnvironmentStep(props: { values: SetupFormValues }): React.ReactElement {
+    const currentIndex = Math.max(
+        ENVIRONMENT_PRESET_OPTIONS.findIndex(option => option.value === props.values.environment),
+        0,
+    )
+
+    return (
+        <SelectList
+            items={ENVIRONMENT_PRESET_OPTIONS.map(option => ({
+                key: option.value,
+                label: option.label,
+                hint: option.hint,
+            }))}
+            currentIndex={currentIndex}
+        />
+    )
+}

package/src/ink/screens/setup/steps/organization-step.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { Text } from 'ink'
+import { AppFrame, Section, SelectList } from '../../../components.tsx'
+import type { TelaCliAuthState, TelaCliForgejoOrganization } from '../../../../types.ts'
+
+export function OrganizationStep(props: {
+    auth: TelaCliAuthState
+    organizations: TelaCliForgejoOrganization[]
+    currentIndex: number
+    preferredOrganizationId?: string
+}): React.ReactElement {
+    return (
+        <AppFrame
+            title="Setup"
+            subtitle="Choose the workspace organization for Forgejo access."
+            footer="↑/↓ choose · Enter continue · Esc back"
+        >
+            <Section title="Authenticated">
+                <Text>User: {props.auth.user.email}</Text>
+                <Text>Workspace: {props.auth.workspace.title}</Text>
+            </Section>
+            <Section title="Forgejo organization">
+                <SelectList
+                    items={props.organizations.map(organization => ({
+                        key: organization.id,
+                        label: organization.name,
+                        hint: organization.id === props.preferredOrganizationId ? 'saved from previous setup' : undefined,
+                    }))}
+                    currentIndex={props.currentIndex}
+                />
+            </Section>
+        </AppFrame>
+    )
+}