@meistrari/tela-cli 0.1.0

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

@@ -0,0 +1,231 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { Text, useInput } from 'ink'
+import type { PushPreview } from '../../commands/push.ts'
+import type { PushResult } from '../../types.ts'
+import { AppFrame, Callout, Section, SelectList, SpinnerText, TextEntry } from '../components.tsx'
+import type { CommandScreenController } from '../runtime.tsx'
+
+export interface PushScreenResult {
+    ok: boolean
+    branch?: string
+    commitMessage?: string
+    commitSha?: string
+    retriedCommit?: boolean
+    nextActions: string[]
+}
+
+export interface PushScreenProps {
+    controller: CommandScreenController<PushScreenResult>
+    initialMode?: 'manual' | 'claude'
+    initialManualMessage?: string
+    dryRun?: boolean
+    loadPreview: (input: {
+        mode: 'manual' | 'claude'
+        manualMessage?: string
+    }) => Promise<PushPreview>
+    execute: (input: {
+        commitMessage: string
+        messageSource: 'manual' | 'claude' | 'fallback'
+        fallbackReason?: string
+    }) => Promise<PushResult>
+}
+
+type PushPhase = 'mode' | 'loadingPreview' | 'review' | 'running' | 'done'
+
+export function PushScreen(props: PushScreenProps): React.ReactElement {
+    const [phase, setPhase] = useState<PushPhase>(props.initialMode ? 'loadingPreview' : 'mode')
+    const [mode, setMode] = useState<'manual' | 'claude'>(props.initialMode ?? 'manual')
+    const [modeIndex, setModeIndex] = useState(props.initialMode === 'claude' ? 1 : 0)
+    const [preview, setPreview] = useState<PushPreview | null>(null)
+    const [message, setMessage] = useState(props.initialManualMessage ?? '')
+    const [result, setResult] = useState<PushResult | null>(null)
+    const startedRef = useRef(false)
+
+    useEffect(() => {
+        if (phase !== 'loadingPreview' || startedRef.current) {
+            return
+        }
+
+        startedRef.current = true
+        void props.loadPreview({
+            mode,
+            manualMessage: props.initialManualMessage ?? undefined,
+        })
+            .then((nextPreview) => {
+                setPreview(nextPreview)
+                setMessage(nextPreview.suggestedMessage ?? props.initialManualMessage ?? '')
+                setPhase('review')
+            })
+            .catch((error) => {
+                props.controller.reject(error)
+            })
+    }, [mode, phase, props])
+
+    useEffect(() => {
+        if (phase === 'review' || phase === 'done') {
+            startedRef.current = false
+        }
+    }, [phase])
+
+    useEffect(() => {
+        if (phase === 'done' && result) {
+            props.controller.resolve({
+                ok: true,
+                branch: result.branch,
+                commitMessage: result.message,
+                commitSha: result.commitSha,
+                retriedCommit: result.retriedCommit,
+                nextActions: [
+                    'Run `tela feedback --list` to inspect feedback for the pushed commit.',
+                    'Use `tela status` if you want to verify the repository is clean afterward.',
+                ],
+            }, 40)
+        }
+    }, [phase, props, result])
+
+    useInput((input, key) => {
+        if (phase === 'mode') {
+            if (key.downArrow || input === 'j') {
+                setModeIndex(current => Math.min(current + 1, 1))
+                return
+            }
+
+            if (key.upArrow || input === 'k') {
+                setModeIndex(current => Math.max(current - 1, 0))
+                return
+            }
+
+            if (key.escape) {
+                props.controller.reject(new Error('Push cancelled.'))
+                return
+            }
+
+            if (key.return) {
+                setMode(modeIndex === 0 ? 'manual' : 'claude')
+                setPhase('loadingPreview')
+            }
+            return
+        }
+
+        if (phase === 'review') {
+            if (key.escape) {
+                props.controller.reject(new Error('Push cancelled.'))
+                return
+            }
+
+            if (key.backspace || key.delete) {
+                setMessage(current => current.slice(0, -1))
+                return
+            }
+
+            if (key.return) {
+                if (props.dryRun) {
+                    props.controller.resolve({
+                        ok: true,
+                        branch: preview?.branch,
+                        commitMessage: message,
+                        nextActions: ['Run `tela push` without `--dry-run` when the plan looks correct.'],
+                    })
+                    return
+                }
+
+                setPhase('running')
+                void props.execute({
+                    commitMessage: message,
+                    messageSource: preview?.messageSource ?? (mode === 'manual' ? 'manual' : 'claude'),
+                    fallbackReason: preview?.fallbackReason,
+                })
+                    .then((nextResult) => {
+                        setResult(nextResult)
+                        setPhase('done')
+                    })
+                    .catch((error) => {
+                        props.controller.reject(error)
+                    })
+                return
+            }
+
+            if (input) {
+                setMessage(current => `${current}${input}`)
+            }
+        }
+    })
+
+    return (
+        <AppFrame
+            title="Push"
+            subtitle="Preview the worktree, review the commit message, and publish the branch."
+            footer={
+                phase === 'mode'
+                    ? '↑/↓ move · Enter select · Esc cancel'
+                    : phase === 'review'
+                        ? 'Type to edit commit message · Enter push · Esc cancel'
+                        : undefined
+            }
+            status={phase === 'running' ? 'Creating commit and pushing branch' : undefined}
+        >
+            {phase === 'mode' ? (
+                <Section title="Commit message mode">
+                    <SelectList
+                        items={[
+                            { key: 'manual', label: 'Write the commit message manually' },
+                            { key: 'claude', label: 'Generate the commit message with Claude' },
+                        ]}
+                        currentIndex={modeIndex}
+                    />
+                </Section>
+            ) : null}
+
+            {phase === 'loadingPreview' ? (
+                <Section title="Loading preview">
+                    <SpinnerText label="Inspecting the current repository state" />
+                </Section>
+            ) : null}
+
+            {phase === 'review' && preview ? (
+                <>
+                    <Section title="Repository">
+                        <Text>Repo root: {preview.repoRoot}</Text>
+                        <Text>Branch: {preview.detached ? '<detached>' : (preview.branch ?? '<unknown>')}</Text>
+                        <Text>Upstream: {preview.upstream ?? '<none>'}</Text>
+                        <Text>Changed files: {preview.statusCounts.total}</Text>
+                        <Text>Staged: {preview.statusCounts.staged}</Text>
+                        <Text>Unstaged: {preview.statusCounts.unstaged}</Text>
+                        <Text>Untracked: {preview.statusCounts.untracked}</Text>
+                    </Section>
+                    {preview.worktreeStatus ? (
+                        <Section title="Worktree">
+                            <Text>{preview.worktreeStatus}</Text>
+                        </Section>
+                    ) : null}
+                    {preview.messageSource === 'fallback' ? (
+                        <Callout tone="warn">
+                            {`Using deterministic fallback message because ${preview.fallbackReason ?? 'Claude did not return a usable message'}.`}
+                        </Callout>
+                    ) : null}
+                    <Section title="Commit message">
+                        <TextEntry label="Message" value={message} placeholder="Commit message" />
+                    </Section>
+                </>
+            ) : null}
+
+            {phase === 'running' ? (
+                <Section title="Running">
+                    <SpinnerText label="Staging, committing, and pushing" />
+                </Section>
+            ) : null}
+
+            {phase === 'done' && result ? (
+                <>
+                    <Section title="Result">
+                        <Text>Branch: {result.branch}</Text>
+                        <Text>Commit: {result.commitSha}</Text>
+                        <Text>Upstream: {result.upstream ?? '<set on push>'}</Text>
+                        <Text>Retry after hook changes: {result.retriedCommit ? 'yes' : 'no'}</Text>
+                    </Section>
+                    <Callout tone="success">Push completed successfully.</Callout>
+                </>
+            ) : null}
+        </AppFrame>
+    )
+}

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

@@ -0,0 +1,291 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { Box, Text, useInput } from 'ink'
+import type {
+    RunCommandResult,
+    RunExecutionControl,
+    RunExecutionSnapshot,
+    RunStepSummary,
+} from '../../commands/run.ts'
+import { createUserFacingError, toUserFacingError } from '../../errors.ts'
+import { AppFrame, Callout, Section, SpinnerText } from '../components.tsx'
+import type { CommandScreenController } from '../runtime.tsx'
+
+export interface RunScreenProps {
+    controller: CommandScreenController<RunCommandResult>
+    initialSnapshot: RunExecutionSnapshot
+    execute: (input: {
+        onSnapshot: (snapshot: RunExecutionSnapshot) => void
+        onControl: (control: RunExecutionControl) => void
+    }) => Promise<RunCommandResult>
+    completionDelayMs?: number
+}
+
+export interface RunChatHandoffScreenProps {
+    controller: CommandScreenController<void>
+    snapshot: RunExecutionSnapshot
+    launchDelayMs?: number
+}
+
+type RunScreenPhase = 'running' | 'done' | 'failed'
+
+function appendTerminalStep(
+    snapshot: RunExecutionSnapshot,
+    status: RunExecutionSnapshot['status'],
+    summary: string,
+    detail?: string,
+): RunExecutionSnapshot {
+    const lastStep = snapshot.steps.at(-1)
+    const steps = lastStep?.summary === summary
+        ? snapshot.steps
+        : [
+            ...snapshot.steps,
+            {
+                id: `step-${snapshot.steps.length + 1}`,
+                kind: 'result' as const,
+                summary,
+                detail,
+                notable: status !== 'success',
+            },
+        ]
+
+    return {
+        ...snapshot,
+        status,
+        currentActivity: summary,
+        steps,
+        activeTools: [],
+        execution: {
+            ...snapshot.execution,
+            status,
+            errors: detail ? [detail, ...snapshot.execution.errors] : snapshot.execution.errors,
+        },
+    }
+}
+
+function snapshotFromResult(
+    result: RunCommandResult,
+    startedAtMs: number,
+): RunExecutionSnapshot {
+    return {
+        repoRoot: result.repoRoot,
+        mode: result.mode,
+        model: result.config.model,
+        artifactPath: result.resultPath,
+        startedAtMs,
+        status: result.execution.status,
+        currentActivity: result.steps.at(-1)?.summary ?? 'Run complete.',
+        steps: result.steps,
+        activeTools: [],
+        execution: result.execution,
+    }
+}
+
+function formatElapsed(startedAtMs: number): string {
+    const elapsedMs = Math.max(0, Date.now() - startedAtMs)
+    if (elapsedMs < 1000) {
+        return `${elapsedMs}ms`
+    }
+
+    const seconds = elapsedMs / 1000
+    if (seconds < 60) {
+        return `${seconds.toFixed(seconds >= 10 ? 1 : 2)}s`
+    }
+
+    const minutes = Math.floor(seconds / 60)
+    const remainder = Math.round(seconds % 60)
+    return `${minutes}m ${remainder}s`
+}
+
+function renderStep(step: RunStepSummary, showDetails: boolean): React.ReactElement {
+    return (
+        <Box key={step.id} flexDirection="column" marginBottom={showDetails && step.detail ? 1 : 0}>
+            <Text color={step.notable ? 'yellowBright' : undefined}>{`• ${step.summary}`}</Text>
+            {showDetails && step.detail ? (
+                <Box marginLeft={2} flexDirection="column">
+                    {step.detail.split('\n').map((line, index) => (
+                        <Text key={`${step.id}-detail-${index}`} dimColor>{line}</Text>
+                    ))}
+                </Box>
+            ) : null}
+        </Box>
+    )
+}
+
+export function RunScreen(props: RunScreenProps): React.ReactElement {
+    const [snapshot, setSnapshot] = useState<RunExecutionSnapshot>(props.initialSnapshot)
+    const [phase, setPhase] = useState<RunScreenPhase>('running')
+    const [showDetails, setShowDetails] = useState(false)
+    const [autoScroll, setAutoScroll] = useState(true)
+    const [now, setNow] = useState(Date.now())
+    const controlRef = useRef<RunExecutionControl | null>(null)
+    const cancelStateRef = useRef<'idle' | 'interrupt' | 'kill'>('idle')
+    const startedRef = useRef(false)
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setNow(Date.now())
+        }, 250)
+
+        return () => {
+            clearInterval(interval)
+        }
+    }, [])
+
+    useEffect(() => {
+        if (startedRef.current) {
+            return
+        }
+
+        startedRef.current = true
+        void props.execute({
+            onSnapshot(nextSnapshot) {
+                setSnapshot(nextSnapshot)
+            },
+            onControl(control) {
+                controlRef.current = control
+            },
+        })
+            .then((result) => {
+                setSnapshot(current => snapshotFromResult(result, current.startedAtMs))
+                setPhase('done')
+                props.controller.resolve(result, props.completionDelayMs ?? 180)
+            })
+            .catch((error) => {
+                const userError = toUserFacingError(error)
+                setSnapshot(current => appendTerminalStep(
+                    current,
+                    userError.code === 'run_cancelled' ? 'cancelled' : 'failed',
+                    userError.summary,
+                    userError.details,
+                ))
+                setPhase('failed')
+                props.controller.reject(error, props.completionDelayMs ?? 180)
+            })
+    }, [props])
+
+    useInput((input, key) => {
+        if (input === 'd') {
+            setShowDetails(current => !current)
+            return
+        }
+
+        if (input === 'a') {
+            setAutoScroll(current => !current)
+            return
+        }
+
+        if (!key.ctrl || input !== 'c' || phase !== 'running') {
+            return
+        }
+
+        if (!controlRef.current) {
+            props.controller.reject(createUserFacingError({
+                code: 'run_cancelled',
+                summary: 'Claude run was cancelled.',
+                fixes: ['Run `tela run` again when you are ready to continue.'],
+                exitCode: 130,
+            }))
+            return
+        }
+
+        if (cancelStateRef.current === 'idle') {
+            cancelStateRef.current = 'interrupt'
+            setSnapshot(current => ({
+                ...current,
+                currentActivity: 'Interrupt requested. Waiting for Claude to stop…',
+            }))
+            controlRef.current.interrupt()
+            return
+        }
+
+        cancelStateRef.current = 'kill'
+        setSnapshot(current => ({
+            ...current,
+            currentActivity: 'Force stopping Claude…',
+        }))
+        controlRef.current.kill()
+    })
+
+    const displayedSteps = useMemo(() => {
+        return autoScroll ? snapshot.steps.slice(-8) : snapshot.steps
+    }, [autoScroll, snapshot.steps])
+
+    const footer = [
+        'd details',
+        autoScroll ? 'a show-all' : 'a auto-scroll',
+        'ctrl+c cancel',
+    ].join('   ')
+
+    return (
+        <AppFrame
+            title="Run"
+            subtitle="Follow the current local agent execution in real time."
+            footer={footer}
+            status={phase === 'running' ? 'Claude one-shot run in progress' : undefined}
+        >
+            <Section title="Overview">
+                <Text>Repo root: {snapshot.repoRoot}</Text>
+                <Text>Mode: {snapshot.mode}</Text>
+                <Text>Model: {snapshot.model ?? '<default>'}</Text>
+                <Text>Artifact: {snapshot.artifactPath}</Text>
+                <Text>Elapsed: {formatElapsed(snapshot.startedAtMs || now)}</Text>
+                <Text>Status: {snapshot.status}</Text>
+            </Section>
+
+            <Section title="Activity">
+                {phase === 'running'
+                    ? <SpinnerText label={snapshot.currentActivity} />
+                    : <Text>{snapshot.currentActivity}</Text>}
+            </Section>
+
+            {snapshot.activeTools.length > 0 ? (
+                <Section title="Active tools">
+                    {snapshot.activeTools.map(tool => (
+                        <Text key={tool.id}>
+                            {`${tool.summary} · ${tool.elapsedSeconds}s`}
+                        </Text>
+                    ))}
+                </Section>
+            ) : null}
+
+            <Section title={autoScroll ? 'Timeline (latest)' : 'Timeline'}>
+                {displayedSteps.length > 0 ? displayedSteps.map(step => renderStep(step, showDetails)) : (
+                    <Text dimColor>No execution steps yet.</Text>
+                )}
+            </Section>
+
+            {phase === 'done' ? (
+                <Callout tone="success">Run complete. Tela will print the durable recap next.</Callout>
+            ) : null}
+            {phase === 'failed' ? (
+                <Callout tone={snapshot.status === 'cancelled' ? 'warn' : 'error'}>
+                    {snapshot.status === 'cancelled' ? 'Run cancelled.' : 'Run failed.'}
+                </Callout>
+            ) : null}
+        </AppFrame>
+    )
+}
+
+export function RunChatHandoffScreen(props: RunChatHandoffScreenProps): React.ReactElement {
+    useEffect(() => {
+        props.controller.resolve(undefined, props.launchDelayMs ?? 650)
+    }, [props])
+
+    return (
+        <AppFrame
+            title="Run"
+            subtitle="Handing off to native Claude chat. Tela will resume after you exit Claude."
+            status="Launching Claude chat…"
+        >
+            <Section title="Overview">
+                <Text>Repo root: {props.snapshot.repoRoot}</Text>
+                <Text>Mode: {props.snapshot.mode}</Text>
+                <Text>Model: {props.snapshot.model ?? '<default>'}</Text>
+                <Text>Artifact: {props.snapshot.artifactPath}</Text>
+            </Section>
+            <Callout tone="info">
+                Claude chat will take over this terminal. Follow the steps there, then exit Claude to let Tela read the result artifact.
+            </Callout>
+        </AppFrame>
+    )
+}