@alecsibilia/luca 14.0.0-alpha.2 → 14.0.0-alpha.21

package/board/client/engine-life.ts

@@ -0,0 +1,48 @@
+/**
+ * A run with no sign of life (#635): its engine is gone (the plugin's
+ * process check found none, for a run it didn't start), or its live file
+ * went stale (written more than a minute ago). Its busy cards say so, with
+ * a flat red heartbeat, and their timers stop at the last sign of life.
+ */
+import {
+    elapsedText,
+    liveIsFresh,
+    needsEngine,
+    type BoardState,
+} from '../shared/board-state'
+
+/**
+ * Why the run shows no sign of life, in words, and the time of its last
+ * sign (the live file's write, else the latest record): `null` while the
+ * engine is alive, or when the run needs none.
+ *
+ * @example
+ * noLife({ state, now }) // { text: 'no sign of life for 1m 10s', at: 1790000000000 }
+ */
+export const noLife = ({
+    state,
+    now,
+}: {
+    state: BoardState
+    now: number
+}): { text: string; at: number } | null => {
+    if (!needsEngine({ state })) return null
+    const written = state.live_written_at
+    if (state.engine_gone) {
+        const at = Date.parse(
+            written ??
+                state.latest_at ??
+                state.run.last_time ??
+                state.run.started_at
+        )
+        return {
+            text: `engine not running · last sign of life ${elapsedText({ ms: now - at })} ago`,
+            at,
+        }
+    }
+    if (written === null || liveIsFresh({ written_at: written, now })) {
+        return null
+    }
+    const at = Date.parse(written)
+    return { text: `no sign of life for ${elapsedText({ ms: now - at })}`, at }
+}

package/board/client/final-review-stack.tsx

@@ -0,0 +1,144 @@
+/**
+ * The final review as a stack of its lenses (Waiting, Reviewing, Fixing,
+ * Clean), with the round and fix round and a line saying where it stands.
+ */
+import { Icon } from '@getpaseo/plugin/client/react-native'
+import { Text, View } from 'react-native'
+
+import { DIMMED, lensColor } from './board-look'
+import { Counter, StageHeader } from './board-panel-parts'
+import { LENS_STAGES } from './board-panel-stages'
+import type { Look } from './board-panel-styles'
+
+import { LOOP_CAP, type BoardState, type LensCard } from '../shared/board-state'
+
+const findingsLine = ({ lens }: { lens: LensCard }): string | null => {
+    const parts = [
+        lens.findings.blocker > 0 ? `${lens.findings.blocker} blocker` : null,
+        lens.findings.should_fix > 0
+            ? `${lens.findings.should_fix} should-fix`
+            : null,
+        lens.findings.nit > 0 ? `${lens.findings.nit} nit` : null,
+    ].filter((part) => part !== null)
+    return parts.length > 0 ? parts.join(', ') : null
+}
+
+const LensCardView = ({ lens, theme, styles }: { lens: LensCard } & Look) => {
+    const color = lensColor({ state: lens.state, theme })
+    const findings = findingsLine({ lens })
+    return (
+        <View style={styles.card}>
+            <View style={styles.cardTop}>
+                <Text style={styles.cardTitle}>{lens.name}</Text>
+                <View style={styles.spacer} />
+                <Text style={[styles.pill, { color, borderColor: color }]}>
+                    {lens.state}
+                </Text>
+            </View>
+            {findings ? (
+                <Text
+                    style={[
+                        styles.muted,
+                        {
+                            color:
+                                lens.findings.blocker > 0
+                                    ? theme.colors.statusDanger
+                                    : theme.colors.statusWarning,
+                        },
+                    ]}
+                >
+                    {findings}
+                </Text>
+            ) : null}
+        </View>
+    )
+}
+
+const reviewLine = ({ state }: { state: BoardState }): string => {
+    const review = state.final_review
+    const open = state.tickets.filter(
+        (ticket) => ticket.stage !== 'done' && ticket.stage !== 'skipped'
+    ).length
+    switch (review.state) {
+        case 'waiting':
+            return review.active
+                ? 'Every ticket is done or skipped. It starts next.'
+                : `Starts when every ticket is done or skipped (${open} still open).`
+        case 'reviewing':
+            return `Round ${review.round}: a fresh reviewer per lens reads the whole run branch.`
+        case 'fixing':
+            return `Fix round ${review.fix_round}/${LOOP_CAP}: the implementer fixes what the lenses found.`
+        case 'stuck':
+            return 'Stuck: it needs your reply (see Needs you).'
+        case 'passed':
+            return 'Passed.'
+    }
+}
+
+export const FinalReviewStack = ({
+    state,
+    theme,
+    styles,
+}: { state: BoardState } & Look) => {
+    const review = state.final_review
+    return (
+        <View
+            style={[styles.block, review.active ? null : { opacity: DIMMED }]}
+        >
+            <View style={styles.row}>
+                <Icon
+                    name="GitPullRequest"
+                    size={15}
+                    color={theme.colors.foreground}
+                />
+                <Text style={styles.reviewTitle}>Final review · 5 lenses</Text>
+                <View style={styles.spacer} />
+                <Counter
+                    label="round"
+                    value={review.round}
+                    theme={theme}
+                    styles={styles}
+                />
+                <Counter
+                    label="fix"
+                    value={review.fix_round}
+                    theme={theme}
+                    styles={styles}
+                />
+            </View>
+            <Text style={styles.muted}>{reviewLine({ state })}</Text>
+            {LENS_STAGES.map((entry) => {
+                const lenses = review.lenses.filter(
+                    (lens) => lens.state === entry.stage
+                )
+                return (
+                    <View key={entry.stage} style={styles.block}>
+                        <StageHeader
+                            title={entry.title}
+                            hint=""
+                            icon={entry.icon}
+                            count={lenses.length}
+                            color={lensColor({ state: entry.stage, theme })}
+                            folded={null}
+                            onPress={null}
+                            theme={theme}
+                            styles={styles}
+                        />
+                        {lenses.length > 0 ? (
+                            <View style={styles.stageBody}>
+                                {lenses.map((lens) => (
+                                    <LensCardView
+                                        key={lens.name}
+                                        lens={lens}
+                                        theme={theme}
+                                        styles={styles}
+                                    />
+                                ))}
+                            </View>
+                        ) : null}
+                    </View>
+                )
+            })}
+        </View>
+    )
+}

package/board/client/heartbeat.tsx

@@ -0,0 +1,61 @@
+/**
+ * A busy card's heartbeat (#631): 20 small bars at the end of its
+ * step-dots line, one per second, oldest on the left, each as tall as its
+ * agent's activity that second in the live file. Green while working; a
+ * flat line in the muted colour when nothing happened in those seconds; a
+ * flat red line when the run shows no sign of life (#635).
+ * Plain `View`s, redrawn with the card on the board's 1-second tick.
+ */
+import { View } from 'react-native'
+
+import type { Look } from './board-panel-styles'
+
+import type { LiveAgent } from '../shared/board-state'
+
+/** How many seconds the heartbeat shows. */
+const BARS = 20
+
+/** A quiet second's bar height, in points. */
+const LOW = 2
+
+/** A count this big or bigger fills a bar. */
+const LOUD = 12
+
+/** A bar's height for `count`: one point more per tick, up to `LOUD`. */
+const heightOf = (count: number): number => LOW + Math.min(count, LOUD)
+
+export const Heartbeat = ({
+    live,
+    gone = false,
+    theme,
+    styles,
+}: {
+    /** `null` for a card with no live entry: a flat line. */
+    live: LiveAgent | null
+    /** The run shows no sign of life (#635): a flat red line. */
+    gone?: boolean
+} & Look) => {
+    const counts = gone || live === null ? [] : live.activity.slice(-BARS)
+    const bars = [
+        ...Array.from({ length: BARS - counts.length }, () => 0),
+        ...counts,
+    ]
+    const color = gone
+        ? theme.colors.statusDanger
+        : bars.some((count) => count > 0)
+          ? theme.colors.statusSuccess
+          : theme.colors.foregroundMuted
+    return (
+        <View accessibilityLabel="Heartbeat" style={styles.heartbeat}>
+            {bars.map((count, index) => (
+                <View
+                    key={index}
+                    style={[
+                        styles.heartbeatBar,
+                        { height: heightOf(count), backgroundColor: color },
+                    ]}
+                />
+            ))}
+        </View>
+    )
+}

package/board/client/helper-lines.tsx

@@ -0,0 +1,69 @@
+/**
+ * A card's helper lines (#636): under its step-dots line, one line per
+ * helper its agent has running, from the run's live file: "helper", the
+ * helper's model as a coloured tag, its latest action and how long ago,
+ * with a left edge in the model's colour. A helper that's done has no line.
+ */
+import { Text, View } from 'react-native'
+
+import { modelColor } from './board-look'
+import type { Look } from './board-panel-styles'
+import { callWords } from './live-line'
+import { CutLine } from './one-line'
+
+import { elapsedText, type LiveAgent } from '../shared/board-state'
+
+export const HelperLines = ({
+    live,
+    now,
+    theme,
+    styles,
+}: { live: LiveAgent | null; now: number } & Look) => (
+    <>
+        {(live?.helpers ?? [])
+            .filter((helper) => !helper.done)
+            .map((helper, index) => {
+                const model = helper.model ?? 'haiku'
+                const color = modelColor({ model, theme })
+                const { action } = helper
+                return (
+                    <View
+                        key={index}
+                        style={[
+                            styles.line,
+                            styles.helperLine,
+                            { borderLeftColor: color },
+                        ]}
+                    >
+                        <Text
+                            style={[styles.muted, styles.fixed]}
+                            numberOfLines={1}
+                        >
+                            helper
+                        </Text>
+                        <Text
+                            style={[styles.tag, { color, borderColor: color }]}
+                            numberOfLines={1}
+                        >
+                            {model}
+                        </Text>
+                        {action !== null ? (
+                            <>
+                                <CutLine
+                                    text={callWords(action)}
+                                    style={styles.text}
+                                    styles={styles}
+                                />
+                                <Text
+                                    style={[styles.mono, styles.fixed]}
+                                    numberOfLines={1}
+                                >
+                                    {`${elapsedText({ ms: now - Date.parse(action.at) })} ago`}
+                                </Text>
+                            </>
+                        ) : null}
+                    </View>
+                )
+            })}
+    </>
+)

package/board/client/live-feed.tsx

@@ -0,0 +1,86 @@
+/**
+ * The live feed (#634): a folded section at the bottom of the side panel,
+ * the run's last actions from its live file, across tickets. Open, it
+ * shows one line per action, newest last: the time, the ticket, the role
+ * in its model's colour, and the action. The panel keeps whether it is
+ * open, so a new read leaves it as it was.
+ */
+import { Text, View } from 'react-native'
+
+import { clockText, modelColor } from './board-look'
+import { Section, StageHeader } from './board-panel-parts'
+import type { Look } from './board-panel-styles'
+import { callWords } from './live-line'
+import { BubbleScope, CutLine, useBubbles } from './one-line'
+
+import type { BoardState, LiveFeedEntry } from '../shared/board-state'
+
+const FeedLine = ({
+    entry,
+    theme,
+    styles,
+}: { entry: LiveFeedEntry } & Look) => (
+    <View style={styles.line}>
+        <Text style={[styles.mono, styles.fixed]} numberOfLines={1}>
+            {clockText({ iso: entry.at })}
+        </Text>
+        {entry.ticket === null ? null : (
+            <Text style={[styles.muted, styles.fixed]} numberOfLines={1}>
+                #{entry.ticket}
+            </Text>
+        )}
+        <Text
+            style={[
+                styles.muted,
+                styles.fixed,
+                { color: modelColor({ model: entry.model ?? '', theme }) },
+            ]}
+            numberOfLines={1}
+        >
+            {entry.role}
+        </Text>
+        <CutLine text={callWords(entry)} style={styles.muted} styles={styles} />
+    </View>
+)
+
+export const LiveFeed = ({
+    state,
+    folded,
+    onToggle,
+    theme,
+    styles,
+}: {
+    state: BoardState
+    folded: boolean
+    onToggle: () => void
+} & Look) => {
+    const bubbles = useBubbles()
+    const look = { theme, styles }
+    return (
+        <Section styles={styles}>
+            <StageHeader
+                title="Live feed"
+                hint="the latest actions, newest last"
+                icon="Activity"
+                count={state.feed.length}
+                color={theme.colors.foregroundMuted}
+                folded={folded}
+                onPress={onToggle}
+                {...look}
+            />
+            {folded || state.feed.length === 0 ? null : (
+                <View style={styles.stageBody}>
+                    <BubbleScope bubbles={bubbles} styles={styles}>
+                        {state.feed.map((entry, index) => (
+                            <FeedLine
+                                key={`${entry.at}-${index}`}
+                                entry={entry}
+                                {...look}
+                            />
+                        ))}
+                    </BubbleScope>
+                </View>
+            )}
+        </Section>
+    )
+}

package/board/client/live-line.ts

@@ -0,0 +1,73 @@
+/**
+ * A card's "doing now" words (#628), from its agent's entry in the run's
+ * live file: who is working and on what, and how long ago it last acted.
+ */
+import { elapsedText, type LiveAgent } from '../shared/board-state'
+
+/** A tool's icon and verb on the card; a tool not here gets "•" and its name. */
+const TOOL_WORDS: Record<string, { icon: string; verb: string }> = {
+    Edit: { icon: '✎', verb: 'editing' },
+    MultiEdit: { icon: '✎', verb: 'editing' },
+    NotebookEdit: { icon: '✎', verb: 'editing' },
+    Write: { icon: '✎', verb: 'writing' },
+    Read: { icon: '≡', verb: 'reading' },
+    Grep: { icon: '⌕', verb: 'searching' },
+    Glob: { icon: '⌕', verb: 'searching' },
+    Bash: { icon: '▸', verb: '' },
+    Agent: { icon: '⇢', verb: 'helper' },
+    Task: { icon: '⇢', verb: 'helper' },
+}
+
+/** A tool call in words, with its icon first: "✎ editing gate-runner.ts". */
+export const callWords = ({
+    tool,
+    target,
+}: {
+    tool: string
+    target: string
+}) => {
+    const { icon, verb } = TOOL_WORDS[tool] ?? { icon: '•', verb: tool }
+    return [icon, verb, target].filter((part) => part !== '').join(' ')
+}
+
+/**
+ * "<role> <icon> <action>", or, while a tool call is open, "<role> <icon>
+ * <action> · running <time>". `null` with no live entry or no action yet,
+ * so the card shows its step text.
+ *
+ * @example
+ * liveText({ live, now }) // 'implementer ✎ editing gate-runner.ts'
+ * liveText({ live: running, now }) // 'implementer ▸ bun test · running 3m 12s'
+ */
+export const liveText = ({
+    live,
+    now,
+}: {
+    live: LiveAgent | null
+    now: number
+}): string | null => {
+    if (live === null) return null
+    const { open_call, action } = live
+    if (open_call !== null) {
+        const running = elapsedText({
+            ms: now - Date.parse(open_call.started_at),
+        })
+        return `${live.role} ${callWords(open_call)} · running ${running}`
+    }
+    return action === null ? null : `${live.role} ${callWords(action)}`
+}
+
+/**
+ * The latest action's age after a card's tokens, " · 2s ago", or nothing
+ * with no live action.
+ */
+export const liveAgeText = ({
+    live,
+    now,
+}: {
+    live: LiveAgent | null
+    now: number
+}): string =>
+    live?.action
+        ? ` · ${elapsedText({ ms: now - Date.parse(live.action.at) })} ago`
+        : ''

package/board/client/model-line.tsx

@@ -0,0 +1,178 @@
+/**
+ * A card's model line (#630): the agent's model as a coloured tag, then
+ * Clef's line saying why it got that model, from its `model_reason` and
+ * its `agent_model` answer. A pick from Clef's answer shows a bar filled to
+ * its confidence: green when sharp (at or over the config's
+ * `models.confidence_bar`), orange when split. A tap on the line shows a
+ * full sentence. An older journal, with no `model_reason`, shows the tag
+ * only.
+ */
+import { Text, View } from 'react-native'
+
+import { CONFIDENCE_COLORS, modelColor } from './board-look'
+import type { Look } from './board-panel-styles'
+import { CutLine } from './one-line'
+
+import type { AgentModel } from '../shared/board-state'
+
+/** Clef's line: its short text, its full sentence, and its bar, if any. */
+type ClefLine = {
+    short: string
+    full: string
+    /** The confidence its bar is filled to; `null` for no bar. */
+    confidence: number | null
+    sharp: boolean
+}
+
+/** "ticket-reviewer" → "ticket-reviewers". */
+const plural = ({ role }: { role: string }): string => `${role}s`
+
+const capital = ({ text }: { text: string }): string =>
+    text.charAt(0).toUpperCase() + text.slice(1)
+
+/**
+ * Clef's line for a model and its reason, judged against the bar; `null`
+ * for an older journal's start, with no reason, or a reason the board
+ * doesn't know.
+ *
+ * @example
+ * clefLine({ model: { role: 'implementer', name: 'opus', reason: 'unsure', answer: { role: 'implementer', pick: 'sonnet', confidence: 0.56 } }, bar: 0.8 })
+ * // { short: '0.56 split → stayed on opus', full: 'Clef picked sonnet but was only 0.56 sure (split: under 0.8), so Luca stayed on opus.', confidence: 0.56, sharp: false }
+ */
+export const clefLine = ({
+    model,
+    bar,
+}: {
+    model: AgentModel
+    bar: number
+}): ClefLine | null => {
+    const { role, name, reason, answer } = model
+    const confidence = answer?.confidence ?? null
+    const pick = answer?.pick ?? 'no model'
+    const sharp = confidence !== null && confidence >= bar
+    const word = sharp ? 'sharp' : 'split'
+    const sure = confidence?.toFixed(2) ?? ''
+    const judged = `${word}: ${sharp ? 'at or over' : 'under'} ${bar}`
+    const plain = { confidence: null, sharp: false }
+    switch (reason) {
+        case 'decision_model':
+            return {
+                short: `${confidence === null ? 'clef' : `${sure} ${word}`} → ${name}`,
+                full:
+                    confidence === null
+                        ? `Clef picked ${name}, so Luca ran the ${role} on it.`
+                        : `Clef picked ${name} and was ${sure} sure (${judged}), so Luca ran the ${role} on it.`,
+                confidence,
+                sharp,
+            }
+        case 'unsure':
+            return {
+                short: `${confidence === null ? 'unsure' : `${sure} ${word}`} → stayed on ${name}`,
+                full:
+                    confidence === null
+                        ? `Clef picked ${pick} but didn't say how sure it was, so Luca stayed on ${name}.`
+                        : sharp
+                          ? `Clef picked ${pick}, which the ${role} can't run on, so Luca stayed on ${name}.`
+                          : `Clef picked ${pick} but was only ${sure} sure (${judged}), so Luca stayed on ${name}.`,
+                confidence,
+                sharp,
+            }
+        case 'floor':
+            return {
+                short: `floor ${name} → ${name}`,
+                full: `The ${role}'s model floor is ${name}, so it runs on ${name} whatever Clef picks.`,
+                ...plain,
+            }
+        case 'after_failure':
+            return {
+                short: `a try failed → ${name}`,
+                full: `The ${role} already failed a try on this ticket on a cheaper model, so Luca runs it on ${name}.`,
+                ...plain,
+            }
+        case 'no_answer':
+            return {
+                short: `clef didn't answer → ${name}`,
+                full: `Clef didn't answer (it was off, timed out, or failed), so Luca ran the ${role} on ${name}.`,
+                ...plain,
+            }
+        case 'locked':
+            return {
+                short: `${plural({ role })} always run on ${name}`,
+                full: `${capital({ text: plural({ role }) })} always run on ${name}: Clef doesn't pick their model.`,
+                ...plain,
+            }
+        default:
+            return null
+    }
+}
+
+/** Clef's confidence as a small bar, filled to it. */
+const ConfidenceBar = ({
+    confidence,
+    sharp,
+    styles,
+}: {
+    confidence: number
+    sharp: boolean
+} & Pick<Look, 'styles'>) => {
+    const now = Math.round(confidence * 100)
+    return (
+        <View
+            accessibilityRole="progressbar"
+            accessibilityLabel={`Clef's confidence, ${sharp ? 'sharp' : 'split'}`}
+            accessibilityValue={{ min: 0, max: 100, now }}
+            style={styles.confidence}
+        >
+            <View
+                style={[
+                    styles.confidenceFill,
+                    {
+                        width: `${now}%`,
+                        backgroundColor: sharp
+                            ? CONFIDENCE_COLORS.sharp
+                            : CONFIDENCE_COLORS.split,
+                    },
+                ]}
+            />
+        </View>
+    )
+}
+
+/** The model tag and Clef's line, on one line. */
+export const ModelLine = ({
+    model,
+    bar,
+    theme,
+    styles,
+}: {
+    model: AgentModel
+    bar: number
+} & Look) => {
+    const color = modelColor({ model: model.name, theme })
+    const clef = clefLine({ model, bar })
+    return (
+        <View style={styles.line}>
+            <Text
+                style={[styles.tag, { color, borderColor: color }]}
+                numberOfLines={1}
+            >
+                {model.name}
+            </Text>
+            {clef !== null && clef.confidence !== null ? (
+                <ConfidenceBar
+                    confidence={clef.confidence}
+                    sharp={clef.sharp}
+                    styles={styles}
+                />
+            ) : null}
+            {clef ? (
+                <CutLine
+                    text={clef.short}
+                    full={clef.full}
+                    style={styles.muted}
+                    styles={styles}
+                />
+            ) : null}
+        </View>
+    )
+}