@meistrari/tela-cli 0.1.0

package/src/ink/components.tsx

@@ -0,0 +1,175 @@
+import React, { useEffect, useMemo, useState, type ReactNode } from 'react'
+import { Box, Text } from 'ink'
+import { getBootstrapPixelRows, 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 = useMemo(() => props.mascotRows ?? getBootstrapPixelRows(), [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>
+            <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>
+            <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

@@ -0,0 +1,89 @@
+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

@@ -0,0 +1,394 @@
+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>
+    )
+}