@meistrari/tela-cli 0.7.0 → 0.7.4

package/src/ink/components.tsx

@@ -1,178 +0,0 @@
-/** @jsxImportSource react */
-import React, { useEffect, useMemo, useState, type ReactNode } from 'react'
-import { Box, Text } from 'ink'
-import { getTelaAsciiHeader } from '../ui.ts'
-
-export interface AppFrameProps {
-    title: string
-    subtitle?: string
-    footer?: string
-    status?: string
-    mascotRows?: readonly string[]
-    children: ReactNode
-}
-
-export function AppFrame(props: AppFrameProps): React.ReactElement {
-    const mascot = props.mascotRows
-    const header = useMemo(() => getTelaAsciiHeader(), [])
-
-    return (
-        <Box flexDirection="column" paddingX={2} paddingY={1}>
-            <Box flexDirection="column">
-                {header.map((line, index) => (
-                    <Text key={`header-${index}`} color="white">
-                        {line}
-                    </Text>
-                ))}
-            </Box>
-            <Box flexDirection="column" marginTop={1}>
-                <Text color="white" bold>Tela CLI · {props.title}</Text>
-                {props.subtitle ? <Text dimColor>{props.subtitle}</Text> : null}
-                {props.status ? <Text color="yellow">{props.status}</Text> : null}
-            </Box>
-            {mascot ? (
-                <Box flexDirection="column" marginTop={1}>
-                    {mascot.map((row, index) => (
-                        <Box key={`mascot-${index}`} flexDirection="row">
-                            {row.split('').map((cell, cellIndex) => {
-                                const level = Number.parseInt(cell, 16)
-                                const channel = Math.round((level / 15) * 255)
-                                const colorValue = `#${channel.toString(16).padStart(2, '0').repeat(3)}`
-                                return (
-                                    <Text key={`pixel-${index}-${cellIndex}`} backgroundColor={colorValue}>
-                                        {'  '}
-                                    </Text>
-                                )
-                            })}
-                        </Box>
-                    ))}
-                </Box>
-            ) : null}
-            <Box flexDirection="column" marginTop={1}>
-                {props.children}
-            </Box>
-            {props.footer ? (
-                <Box marginTop={1}>
-                    <Text dimColor>{props.footer}</Text>
-                </Box>
-            ) : null}
-        </Box>
-    )
-}
-
-export function Section(props: {
-    title: string
-    children: ReactNode
-}): React.ReactElement {
-    return (
-        <Box flexDirection="column" marginTop={1}>
-            <Text color="cyan">{props.title}</Text>
-            <Box flexDirection="column" marginLeft={2}>
-                {props.children}
-            </Box>
-        </Box>
-    )
-}
-
-export function KeyHints(props: {
-    items: string[]
-}): React.ReactElement {
-    return (
-        <Text dimColor>{props.items.join('   ')}</Text>
-    )
-}
-
-export function SelectList<T>(props: {
-    items: Array<{
-        key: T
-        label: string
-        hint?: string
-        selected?: boolean
-    }>
-    currentIndex: number
-    multiselect?: boolean
-}): React.ReactElement {
-    return (
-        <Box flexDirection="column">
-            {props.items.map((item, index) => {
-                const focused = index === props.currentIndex
-                const prefix = focused ? '›' : ' '
-                const selected = props.multiselect
-                    ? (item.selected ? '[x]' : '[ ]')
-                    : ''
-
-                return (
-                    <Text key={String(index)} color={focused ? 'greenBright' : undefined}>
-                        {`${prefix} ${selected} ${item.label}`.trimEnd()}
-                        {item.hint ? <Text dimColor>{` — ${item.hint}`}</Text> : null}
-                    </Text>
-                )
-            })}
-        </Box>
-    )
-}
-
-export function TextEntry(props: {
-    label: string
-    value: string
-    placeholder?: string
-    error?: string
-    masked?: boolean
-}): React.ReactElement {
-    const displayValue = props.value.length > 0
-        ? (props.masked ? '*'.repeat(props.value.length) : props.value)
-        : (props.placeholder ? `<${props.placeholder}>` : '')
-
-    return (
-        <Box flexDirection="column">
-            <Text>{props.label}</Text>
-            <Text color="greenBright">{displayValue || ' '}</Text>
-            {props.error ? <Text color="red">{props.error}</Text> : null}
-        </Box>
-    )
-}
-
-const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏']
-
-export function SpinnerText(props: {
-    label: string
-    active?: boolean
-}): React.ReactElement {
-    const [frameIndex, setFrameIndex] = useState(0)
-
-    useEffect(() => {
-        if (props.active === false) {
-            return
-        }
-
-        const interval = setInterval(() => {
-            setFrameIndex(current => (current + 1) % SPINNER_FRAMES.length)
-        }, 80)
-
-        return () => {
-            clearInterval(interval)
-        }
-    }, [props.active])
-
-    return (
-        <Text color="yellow">
-            {`${SPINNER_FRAMES[frameIndex]} ${props.label}`}
-        </Text>
-    )
-}
-
-export function Callout(props: {
-    tone: 'info' | 'warn' | 'error' | 'success'
-    children: ReactNode
-}): React.ReactElement {
-    const color = {
-        info: 'blueBright',
-        warn: 'yellowBright',
-        error: 'redBright',
-        success: 'greenBright',
-    } as const
-
-    return (
-        <Text color={color[props.tone]}>{props.children}</Text>
-    )
-}

package/src/ink/runtime.tsx

@@ -1,90 +0,0 @@
-/** @jsxImportSource react */
-import React from 'react'
-import { render, type Instance, type RenderOptions } from 'ink'
-
-export interface CommandScreenController<T> {
-    resolve(value: T, delayMs?: number): void
-    reject(error: unknown, delayMs?: number): void
-}
-
-export interface RenderCommandScreenOptions extends RenderOptions {
-    /**
-     * When true, the Ink instance erases its rendered output before unmounting
-     * so the final frame is not persisted to the terminal scrollback. Useful
-     * for transient screens like the bark intro that hand off to the next
-     * screen without leaving a visual residue.
-     */
-    clearOnExit?: boolean
-}
-
-export function renderCommandScreen<T>(
-    build: (controller: CommandScreenController<T>) => React.ReactElement,
-    options: RenderCommandScreenOptions = {},
-): Promise<T> {
-    const { clearOnExit, ...renderOptions } = options
-
-    return new Promise<T>((resolve, reject) => {
-        let settled = false
-        let instance: Instance | undefined
-
-        const teardown = () => {
-            if (clearOnExit) {
-                instance?.clear()
-            }
-            instance?.unmount()
-        }
-
-        const settle = (
-            handler: (value: T) => void | never,
-            payload: T,
-            delayMs = 0,
-        ) => {
-            if (settled) {
-                return
-            }
-
-            settled = true
-            const finish = () => {
-                teardown()
-                handler(payload)
-            }
-
-            if (delayMs > 0) {
-                setTimeout(finish, delayMs)
-                return
-            }
-
-            queueMicrotask(finish)
-        }
-
-        const controller: CommandScreenController<T> = {
-            resolve(value, delayMs) {
-                settle(resolve, value, delayMs)
-            },
-            reject(error, delayMs) {
-                if (settled) {
-                    return
-                }
-
-                settled = true
-                const finish = () => {
-                    teardown()
-                    reject(error)
-                }
-
-                if (delayMs && delayMs > 0) {
-                    setTimeout(finish, delayMs)
-                    return
-                }
-
-                queueMicrotask(finish)
-            },
-        }
-
-        instance = render(build(controller), {
-            exitOnCtrlC: true,
-            patchConsole: false,
-            ...renderOptions,
-        })
-    })
-}

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

@@ -1,395 +0,0 @@
-/** @jsxImportSource react */
-import React, { useEffect, useMemo, useState } from 'react'
-import { Box, Text, useInput } from 'ink'
-import type {
-    FeedbackData,
-    FeedbackEmptyState,
-    FeedbackEntry,
-    FeedbackSelectionMode,
-} from '../../commands/feedback.ts'
-import {
-    buildClaudeFeedbackPrompt,
-    buildFeedbackNextActions,
-    buildFeedbackReviewModel,
-    describeFeedbackEmptyState,
-    describeFeedbackSelectionMode,
-    formatFeedbackSelectionSummary,
-    getFeedbackEntryTitle,
-} from '../../commands/feedback.ts'
-import { AppFrame, Callout, KeyHints, Section } from '../components.tsx'
-import type { CommandScreenController } from '../runtime.tsx'
-
-export interface FeedbackSelectionResult {
-    selectedFeedbacks: FeedbackEntry[]
-    prompt?: string
-    launchedClaude: boolean
-    selectionMode: FeedbackSelectionMode
-}
-
-export interface FeedbackSelectionScreenProps {
-    controller: CommandScreenController<FeedbackSelectionResult>
-    data: FeedbackData
-    mode: FeedbackSelectionMode
-}
-
-type FeedbackPhase = 'browse' | 'confirm'
-
-function renderCatalog(
-    entries: FeedbackEntry[],
-    input: {
-        currentEntryId?: string
-        selectedIds: Set<string>
-        selectionEditable: boolean
-        selectionVisible: boolean
-    },
-): React.ReactElement {
-    const actionable = entries.filter(entry => entry.actionable)
-    const informational = entries.filter(entry => !entry.actionable)
-
-    const renderEntry = (entry: FeedbackEntry): React.ReactElement => {
-        const focused = entry.id === input.currentEntryId
-        const marker = focused ? '›' : ' '
-        const checkbox = input.selectionVisible
-            ? entry.actionable
-                ? input.selectedIds.has(entry.id) ? '[x]' : '[ ]'
-                : '[-]'
-            : ''
-
-        return (
-            <Text key={entry.id} color={focused ? 'greenBright' : undefined}>
-                {`${marker} ${checkbox} #${entry.number} [${entry.feedback.status}] ${getFeedbackEntryTitle(entry)}`.trimEnd()}
-                <Text dimColor>{` — ${entry.feedback.reason || '<empty>'}`}</Text>
-            </Text>
-        )
-    }
-
-    return (
-        <Box flexDirection="column">
-            {actionable.length > 0 ? (
-                <>
-                    <Text color="cyan">Actionable</Text>
-                    {actionable.map(renderEntry)}
-                </>
-            ) : null}
-            {informational.length > 0 ? (
-                <>
-                    {actionable.length > 0 ? <Text> </Text> : null}
-                    <Text color="cyan">Informational</Text>
-                    {informational.map(renderEntry)}
-                </>
-            ) : null}
-            {entries.length === 0 ? <Text dimColor>No feedback entries found for this commit.</Text> : null}
-            {!input.selectionEditable && input.selectionVisible ? (
-                <Text dimColor>Selection is locked for this review mode.</Text>
-            ) : null}
-        </Box>
-    )
-}
-
-function buildBrowseFooter(input: {
-    mode: FeedbackSelectionMode
-    selectionEditable: boolean
-}): string {
-    if (input.mode === 'list') {
-        return '↑/↓ move · Enter finish review · Esc exit'
-    }
-
-    if (input.selectionEditable) {
-        return '↑/↓ move · Space/x toggle · a select-all · n clear · Enter continue/finish · Esc exit'
-    }
-
-    return '↑/↓ move · Enter continue · Esc exit'
-}
-
-function formatSelectedTitles(entries: FeedbackEntry[]): string[] {
-    return entries.map(entry => `#${entry.number} ${getFeedbackEntryTitle(entry)}`)
-}
-
-function emptyStateTone(emptyState: FeedbackEmptyState): 'info' | 'warn' {
-    return emptyState === 'none' ? 'warn' : 'info'
-}
-
-export function FeedbackSelectionScreen(props: FeedbackSelectionScreenProps): React.ReactElement {
-    const review = useMemo(() => buildFeedbackReviewModel(props.data), [props.data])
-    const [phase, setPhase] = useState<FeedbackPhase>('browse')
-    const [cursor, setCursor] = useState(0)
-    const [selectedIds, setSelectedIds] = useState<Set<string>>(() => {
-        if (props.mode === 'all' || props.mode === 'default') {
-            return new Set(props.data.actionableEntries.map(entry => entry.id))
-        }
-
-        return new Set<string>()
-    })
-
-    const currentEntry = props.data.entries[cursor] ?? props.data.entries[0]
-    const selectionEditable = props.mode === 'select' || props.mode === 'default'
-    const selectionVisible = props.mode !== 'list' && review.emptyState === 'none'
-    const selectedFeedbacks = useMemo(() => {
-        return props.data.actionableEntries.filter(entry => selectedIds.has(entry.id))
-    }, [props.data.actionableEntries, selectedIds])
-    const prompt = selectedFeedbacks.length > 0
-        ? buildClaudeFeedbackPrompt({
-            repoRoot: props.data.repoRoot,
-            organizationName: props.data.organizationName,
-            repository: props.data.repository,
-            commitHash: props.data.commitHash,
-            selectedFeedbacks,
-        })
-        : undefined
-
-    useInput((input, key) => {
-        if (phase === 'browse') {
-            if ((key.downArrow || input === 'j') && props.data.entries.length > 0) {
-                setCursor(current => Math.min(current + 1, props.data.entries.length - 1))
-                return
-            }
-
-            if ((key.upArrow || input === 'k') && props.data.entries.length > 0) {
-                setCursor(current => Math.max(current - 1, 0))
-                return
-            }
-
-            if (key.escape) {
-                props.controller.resolve({
-                    selectedFeedbacks: [],
-                    launchedClaude: false,
-                    selectionMode: props.mode,
-                })
-                return
-            }
-
-            if (selectionEditable && selectionVisible && (input === ' ' || input === 'x')) {
-                if (!currentEntry?.actionable) {
-                    return
-                }
-
-                setSelectedIds(current => {
-                    const next = new Set(current)
-                    if (next.has(currentEntry.id)) {
-                        next.delete(currentEntry.id)
-                    }
-                    else {
-                        next.add(currentEntry.id)
-                    }
-                    return next
-                })
-                return
-            }
-
-            if (selectionEditable && selectionVisible && input === 'a') {
-                setSelectedIds(new Set(props.data.actionableEntries.map(entry => entry.id)))
-                return
-            }
-
-            if (selectionEditable && selectionVisible && input === 'n') {
-                setSelectedIds(new Set())
-                return
-            }
-
-            if (key.return) {
-                if (props.mode === 'list' || review.emptyState !== 'none' || selectedFeedbacks.length === 0) {
-                    props.controller.resolve({
-                        selectedFeedbacks,
-                        launchedClaude: false,
-                        selectionMode: props.mode,
-                    })
-                    return
-                }
-
-                setPhase('confirm')
-            }
-            return
-        }
-
-        if (phase === 'confirm') {
-            if (key.escape) {
-                setPhase('browse')
-                return
-            }
-
-            if (key.return) {
-                props.controller.resolve({
-                    selectedFeedbacks,
-                    prompt,
-                    launchedClaude: false,
-                    selectionMode: props.mode,
-                })
-            }
-        }
-    })
-
-    return (
-        <AppFrame
-            title="Feedback"
-            subtitle="Review commit feedback, refine the selection, and preview the exact Claude task."
-            footer={phase === 'browse' ? buildBrowseFooter({ mode: props.mode, selectionEditable }) : 'Enter launch Claude · Esc back'}
-        >
-            {phase === 'browse' ? (
-                <Box flexDirection="row" gap={2}>
-                    <Box flexDirection="column" width={56}>
-                        <Section title="Catalog">
-                            {renderCatalog(props.data.entries, {
-                                currentEntryId: currentEntry?.id,
-                                selectedIds,
-                                selectionEditable,
-                                selectionVisible,
-                            })}
-                        </Section>
-                    </Box>
-                    <Box flexDirection="column" flexGrow={1}>
-                        <Section title="Review summary">
-                            <Text>Repository: {props.data.organizationName}/{props.data.repository}</Text>
-                            <Text>Commit: {props.data.commitHash}</Text>
-                            <Text>Mode: {describeFeedbackSelectionMode(props.mode)}</Text>
-                            <Text>Feedbacks: {review.summary.totalFeedbacks}</Text>
-                            <Text>Actionable: {review.summary.actionableCount}</Text>
-                            <Text>Informational: {review.summary.informationalCount}</Text>
-                        </Section>
-
-                        <Section title="Detail">
-                            {currentEntry ? (
-                                <>
-                                    <Text>Focus: #{currentEntry.number}</Text>
-                                    <Text>Status: {currentEntry.feedback.status}</Text>
-                                    <Text>Reason: {currentEntry.feedback.reason || '<empty>'}</Text>
-                                    <Text>Suggestion: {currentEntry.feedback.suggestion.trim() || '<none>'}</Text>
-                                    <Text>Actionable: {currentEntry.actionable ? 'yes' : 'no'}</Text>
-                                </>
-                            ) : (
-                                <Text>No feedback entries found.</Text>
-                            )}
-                        </Section>
-
-                        <Section title="Selection">
-                            <Text>{`Selected actionable suggestions: ${selectedFeedbacks.length}`}</Text>
-                            <Text>{`Selection mode: ${describeFeedbackSelectionMode(props.mode)}`}</Text>
-                        </Section>
-
-                        {review.emptyState !== 'none' ? (
-                            <Callout tone={emptyStateTone(review.emptyState)}>
-                                {`${describeFeedbackEmptyState(review.emptyState)} Press Enter to finish the review.`}
-                            </Callout>
-                        ) : null}
-                        {review.emptyState === 'none' && selectionVisible && selectedFeedbacks.length === 0 ? (
-                            <Callout tone="warn">
-                                No suggestions are selected. Press Enter to finish without launching Claude, or choose suggestions first.
-                            </Callout>
-                        ) : null}
-                    </Box>
-                </Box>
-            ) : null}
-
-            {phase === 'confirm' ? (
-                <>
-                    <Section title="Selected suggestions">
-                        {formatSelectedTitles(selectedFeedbacks).map(line => (
-                            <Text key={line}>{line}</Text>
-                        ))}
-                    </Section>
-                    <Section title="Selection summary">
-                        {formatFeedbackSelectionSummary({
-                            selectionMode: props.mode,
-                            selectedFeedbacks,
-                        }).split('\n').map((line, index) => (
-                            <Text key={`selection-${index}`}>{line}</Text>
-                        ))}
-                    </Section>
-                    <Section title="Claude task">
-                        {prompt?.split('\n').map((line, index) => (
-                            <Text key={`prompt-${index}`}>{line}</Text>
-                        ))}
-                    </Section>
-                    <Callout tone="info">
-                        {`Claude will receive ${selectedFeedbacks.length} selected suggestion${selectedFeedbacks.length === 1 ? '' : 's'}.`}
-                    </Callout>
-                </>
-            ) : null}
-
-            {phase === 'browse' ? (
-                <KeyHints items={[
-                    `Commit ${props.data.commitHash}`,
-                    `${review.summary.totalFeedbacks} feedback item${review.summary.totalFeedbacks === 1 ? '' : 's'}`,
-                    props.mode === 'list' ? 'Review only' : `${selectedFeedbacks.length} selected`,
-                ]} />
-            ) : null}
-        </AppFrame>
-    )
-}
-
-export function FeedbackClaudeHandoffScreen(props: {
-    controller: CommandScreenController<void>
-    repoRoot: string
-    commitHash: string
-    selectedFeedbacks: FeedbackEntry[]
-    launchDelayMs?: number
-}): React.ReactElement {
-    useEffect(() => {
-        props.controller.resolve(undefined, props.launchDelayMs ?? 650)
-    }, [props.controller, props.launchDelayMs])
-
-    return (
-        <AppFrame
-            title="Feedback"
-            subtitle="Handing off to native Claude. Tela will resume after Claude exits."
-            status="Launching Claude review…"
-        >
-            <Section title="Overview">
-                <Text>Repo root: {props.repoRoot}</Text>
-                <Text>Commit: {props.commitHash}</Text>
-                <Text>Selected suggestions: {props.selectedFeedbacks.length}</Text>
-            </Section>
-            <Section title="Selected suggestions">
-                {formatSelectedTitles(props.selectedFeedbacks).map(line => (
-                    <Text key={line}>{line}</Text>
-                ))}
-            </Section>
-            <Callout tone="info">
-                Claude will take over this terminal to apply the selected feedback. Exit Claude to return to Tela for the outcome review.
-            </Callout>
-        </AppFrame>
-    )
-}
-
-export function FeedbackOutcomeScreen(props: {
-    controller: CommandScreenController<void>
-    commitHash: string
-    selectionMode: FeedbackSelectionMode
-    diffStat: string
-    selectedFeedbacks: FeedbackEntry[]
-}): React.ReactElement {
-    useEffect(() => {
-        props.controller.resolve(undefined, 40)
-    }, [props.controller])
-
-    return (
-        <AppFrame
-            title="Feedback"
-            subtitle="Claude finished applying the selected feedback suggestions."
-        >
-            <Section title="Summary">
-                <Text>Commit: {props.commitHash}</Text>
-                <Text>Mode: {describeFeedbackSelectionMode(props.selectionMode)}</Text>
-                <Text>Selected suggestions: {props.selectedFeedbacks.length}</Text>
-            </Section>
-            <Section title="Selected suggestions">
-                {formatSelectedTitles(props.selectedFeedbacks).map(line => (
-                    <Text key={line}>{line}</Text>
-                ))}
-            </Section>
-            <Section title="Local diff summary">
-                {props.diffStat.split('\n').map((line, index) => (
-                    <Text key={`diff-${index}`}>{line}</Text>
-                ))}
-            </Section>
-            <Section title="Next actions">
-                {buildFeedbackNextActions({
-                    launchedClaude: true,
-                    actionableCount: props.selectedFeedbacks.length,
-                    emptyState: 'none',
-                }).map(action => (
-                    <Text key={action}>{action}</Text>
-                ))}
-            </Section>
-        </AppFrame>
-    )
-}