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

package/board/client/run-picker.tsx

@@ -0,0 +1,98 @@
+/**
+ * The run tabs: one chip per recent run, with the older ones folded behind
+ * one chip.
+ */
+import { useState } from 'react'
+
+import { Pressable, Text, View } from 'react-native'
+
+import { statusColor, statusText } from './board-look'
+import type { Look } from './board-panel-styles'
+import { useCloseBubble } from './one-line'
+
+import { foldRuns, type RunSummary } from '../shared/board-state'
+
+/** A tab per recent run; the older ones stay folded behind one chip. */
+export const RunPicker = ({
+    runs,
+    selected,
+    onPick,
+    theme,
+    styles,
+}: {
+    runs: RunSummary[]
+    selected: string
+    onPick: (run_id: string) => void
+} & Look) => {
+    const [showOlder, setShowOlder] = useState(false)
+    const closeBubble = useCloseBubble()
+    const { shown, folded } = foldRuns({ runs, selected })
+    const pick = (run_id: string) => {
+        closeBubble()
+        onPick(run_id)
+    }
+    return (
+        <View style={styles.row}>
+            {(showOlder ? [...shown, ...folded] : shown).map((run) => (
+                <RunChip
+                    key={run.run_id}
+                    run={run}
+                    on={run.run_id === selected}
+                    onPick={pick}
+                    theme={theme}
+                    styles={styles}
+                />
+            ))}
+            {folded.length > 0 ? (
+                <Pressable
+                    accessibilityRole="button"
+                    accessibilityLabel={
+                        showOlder
+                            ? 'Fold the older runs'
+                            : `Show ${folded.length} older runs`
+                    }
+                    onPress={() => {
+                        closeBubble()
+                        setShowOlder((open) => !open)
+                    }}
+                    style={styles.chip}
+                >
+                    <Text style={styles.small}>
+                        {showOlder ? 'fold older' : `${folded.length} older`}
+                    </Text>
+                </Pressable>
+            ) : null}
+        </View>
+    )
+}
+
+const RunChip = ({
+    run,
+    on,
+    onPick,
+    theme,
+    styles,
+}: {
+    run: RunSummary
+    on: boolean
+    onPick: (run_id: string) => void
+} & Look) => (
+    <Pressable
+        accessibilityRole="button"
+        accessibilityLabel={`Show run ${run.run_id}`}
+        onPress={() => onPick(run.run_id)}
+        style={[styles.chip, on ? styles.chipOn : null]}
+    >
+        <Text style={styles.small}>
+            {run.spec_number === null ? 'demo' : `#${run.spec_number}`} ·{' '}
+            <Text
+                style={{
+                    color: statusColor({ status: run.status, theme }),
+                }}
+            >
+                {statusText({ status: run.status })}
+            </Text>
+            {run.needs_you > 0 ? ` · ${run.needs_you} need you` : ''}
+        </Text>
+    </Pressable>
+)

package/board/client/status-bar.tsx

@@ -0,0 +1,131 @@
+/**
+ * The status bar (#633): one line pinned at the bottom of the side panel,
+ * below the scrolling cards, such as
+ * "4/10 joined · 2·1 agents · 3.1M/15M tok · week 42% · latest 2s ago".
+ * Each agent count is in its model's color. A tap shows it all in words.
+ */
+import { Fragment } from 'react'
+
+import { Text, View } from 'react-native'
+
+import { modelColor, percentText, tokensText, useNow } from './board-look'
+import type { Look } from './board-panel-styles'
+import { BubbleScope, CutLine, useBubbles } from './one-line'
+
+import { elapsedText, type BoardState } from '../shared/board-state'
+
+/** The models first in the bar, in this order; any other comes after. */
+const MODEL_ORDER = ['opus', 'sonnet', 'haiku']
+
+/**
+ * The agents in a turn and their running helpers, counted per model, in
+ * `MODEL_ORDER`.
+ *
+ * @example
+ * agentsPerModel({ state }) // [{ model: 'opus', count: 2 }, { model: 'sonnet', count: 1 }]
+ */
+const agentsPerModel = ({
+    state,
+}: {
+    state: BoardState
+}): { model: string; count: number }[] => {
+    const counts = new Map<string, number>()
+    const count = (name: string | null) => {
+        const model = (name ?? 'unknown').toLowerCase()
+        counts.set(model, (counts.get(model) ?? 0) + 1)
+    }
+    for (const agent of state.live_agents) {
+        count(agent.model)
+        // Running helpers count too (#636), on their own model.
+        for (const helper of agent.helpers) {
+            if (!helper.done) count(helper.model)
+        }
+    }
+    const rank = (model: string) => {
+        const found = MODEL_ORDER.indexOf(model)
+        return found === -1 ? MODEL_ORDER.length : found
+    }
+    return [...counts.entries()]
+        .map(([model, count]) => ({ model, count }))
+        .sort(
+            (left, right) =>
+                rank(left.model) - rank(right.model) ||
+                left.model.localeCompare(right.model)
+        )
+}
+
+/** Tokens, short, with no ".0": 15000000 → "15M", 3100000 → "3.1M". */
+const shortTokens = ({ tokens }: { tokens: number }): string =>
+    tokensText({ tokens }).replace(/\.0(?=[kM]$)/, '')
+
+export const StatusBar = ({
+    state,
+    theme,
+    styles,
+}: { state: BoardState } & Look) => {
+    const bubbles = useBubbles()
+    const now = useNow()
+    const joined = state.tickets.filter((card) => card.stage === 'done').length
+    const total = state.tickets.length
+    const models = agentsPerModel({ state })
+    const used = shortTokens({ tokens: state.run_tokens })
+    const budget = shortTokens({ tokens: state.run_budget_tokens })
+    const week = state.usage?.weekly_percent ?? null
+    const age =
+        state.latest_at === null
+            ? null
+            : elapsedText({ ms: now - Date.parse(state.latest_at) })
+
+    const head = `${joined}/${total} joined · `
+    const counts =
+        models.length === 0
+            ? '0'
+            : models.map(({ count }) => String(count)).join('·')
+    const tail = [
+        ' agents',
+        `${used}/${budget} tok`,
+        `week ${percentText({ percent: week })}`,
+        `latest ${age === null ? '–' : `${age} ago`}`,
+    ].join(' · ')
+    const full = [
+        `${joined} of ${total} tickets joined`,
+        models.length === 0
+            ? 'no agents running'
+            : `agents running: ${models.map(({ model, count }) => `${count} on ${model}`).join(', ')}`,
+        `${used} of the run's ${budget} tokens`,
+        week === null
+            ? 'no plan reading yet this week'
+            : `plan ${week}% used this week`,
+        age === null ? 'no event yet' : `latest event ${age} ago`,
+    ].join(' · ')
+
+    return (
+        <View style={styles.statusBar}>
+            <BubbleScope bubbles={bubbles} styles={styles}>
+                <CutLine
+                    text={`${head}${counts}${tail}`}
+                    full={full}
+                    style={styles.mono}
+                    styles={styles}
+                >
+                    {head}
+                    {models.length === 0
+                        ? counts
+                        : models.map(({ model, count }, index) => (
+                              <Fragment key={model}>
+                                  {index > 0 ? '·' : ''}
+                                  <Text
+                                      style={{
+                                          color: modelColor({ model, theme }),
+                                      }}
+                                  >
+                                      {String(count)}
+                                  </Text>
+                              </Fragment>
+                          ))}
+                    {tail}
+                </CutLine>
+            </BubbleScope>
+        </View>
+    )
+}

package/board/client/step-dots.tsx

@@ -0,0 +1,127 @@
+/**
+ * A ticket card's step dots: one dot per step (tests, red check, code,
+ * checks, review), done, current, stopped, skipped, or still to do, with
+ * the current step's name.
+ */
+import { Text, View } from 'react-native'
+
+import type { Look } from './board-panel-styles'
+
+import {
+    ALL_STEPS_DONE,
+    REFACTOR_SKIPS_STEPS,
+    STEP_NAMES,
+    type TicketCard,
+} from '../shared/board-state'
+
+export type DotKind = 'done' | 'current' | 'todo' | 'skip' | 'stopped'
+
+export const dotKinds = ({ ticket }: { ticket: TicketCard }): DotKind[] =>
+    STEP_NAMES.map((_, index) => {
+        if (ticket.refactor && index < REFACTOR_SKIPS_STEPS) return 'skip'
+        if (index < ticket.step) return 'done'
+        if (index === ticket.step) {
+            return ticket.stage === 'skipped' || ticket.stage === 'stuck'
+                ? 'stopped'
+                : 'current'
+        }
+        return 'todo'
+    })
+
+const stepLabel = ({ ticket }: { ticket: TicketCard }): string => {
+    if (ticket.step >= ALL_STEPS_DONE) return 'all steps done'
+    const name = STEP_NAMES[ticket.step]
+    if (!name) return ticket.activity
+    if (ticket.stage === 'stuck') return `stuck at ${name}`
+    if (ticket.stage === 'skipped') return `stopped at ${name}`
+    return name
+}
+
+export const StepDots = ({
+    ticket,
+    theme,
+    styles,
+}: { ticket: TicketCard } & Look) => {
+    const kinds = dotKinds({ ticket })
+    const { colors } = theme
+    const highlight =
+        ticket.stage === 'stuck' ? colors.statusDanger : colors.accent
+    const labelColor =
+        ticket.step >= ALL_STEPS_DONE
+            ? colors.statusSuccess
+            : kinds.includes('current')
+              ? highlight
+              : colors.foregroundMuted
+    const described = STEP_NAMES.map(
+        (name, index) => `${name} ${kinds[index] ?? ''}`
+    ).join(', ')
+    return (
+        <View
+            style={styles.dots}
+            accessible
+            accessibilityLabel={`Steps: ${described}`}
+        >
+            {kinds.map((kind, index) => {
+                const reached = kind === 'done' || kind === 'current'
+                const look =
+                    kind === 'done'
+                        ? [
+                              styles.dot,
+                              {
+                                  backgroundColor: colors.statusSuccess,
+                                  borderColor: colors.statusSuccess,
+                              },
+                          ]
+                        : kind === 'current'
+                          ? [
+                                styles.dotCurrent,
+                                {
+                                    backgroundColor: highlight,
+                                    borderColor: highlight,
+                                },
+                            ]
+                          : kind === 'stopped'
+                            ? [
+                                  styles.dotCurrent,
+                                  {
+                                      backgroundColor: colors.surface2,
+                                      borderColor: highlight,
+                                  },
+                              ]
+                            : kind === 'skip'
+                              ? [
+                                    styles.dot,
+                                    styles.dotSkip,
+                                    { borderColor: colors.foregroundMuted },
+                                ]
+                              : [
+                                    styles.dot,
+                                    { borderColor: colors.foregroundMuted },
+                                ]
+                return (
+                    <View key={STEP_NAMES[index]} style={styles.dotCell}>
+                        {index > 0 ? (
+                            <View
+                                style={[
+                                    styles.link,
+                                    {
+                                        backgroundColor: reached
+                                            ? colors.statusSuccess
+                                            : colors.border,
+                                    },
+                                ]}
+                            />
+                        ) : null}
+                        <View style={look} />
+                    </View>
+                )
+            })}
+            <Text
+                style={[styles.stepLabel, { color: labelColor }]}
+                numberOfLines={1}
+            >
+                {stepLabel({ ticket })}
+            </Text>
+        </View>
+    )
+}

package/board/client/stuck-actions.tsx

@@ -0,0 +1,269 @@
+import { useMemo, useState } from 'react'
+
+import type { PluginTheme } from '@getpaseo/plugin'
+import { usePaseo, useRpc } from '@getpaseo/plugin/client'
+import { copyText, useToast } from '@getpaseo/plugin/client/react-native'
+import { Pressable, StyleSheet, Text, View } from 'react-native'
+
+import { MONO } from './board-look'
+
+import { replyPostRpc } from '../shared/board-rpc'
+import {
+    confirmReplyText,
+    postedFor,
+    postedText,
+    replyButtons,
+    unstickCommand,
+    type PostedReply,
+    type ReplyButton,
+} from '../shared/reply-actions'
+
+/**
+ * The actions on stuck work (#503), in the side panel and in the chat's
+ * stuck rows: a button per reply the engine takes, which asks to confirm
+ * and then posts the reply on the spec issue through `reply.post`, and
+ * "Help me", which sends `/luca-unstick` to a chat's agent.
+ */
+
+const makeStyles = ({ theme }: { theme: PluginTheme }) => {
+    const { colors } = theme
+    return StyleSheet.create({
+        box: { gap: 6 },
+        row: {
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            alignItems: 'center',
+            gap: 6,
+        },
+        label: {
+            color: colors.foregroundMuted,
+            fontSize: 12,
+            fontWeight: '700',
+        },
+        text: { color: colors.foreground, fontSize: 12 },
+        muted: { color: colors.foregroundMuted, fontSize: 12 },
+        danger: { color: colors.statusDanger, fontSize: 12 },
+        success: { color: colors.statusSuccess, fontSize: 12 },
+        button: {
+            borderWidth: 1,
+            borderColor: colors.border,
+            backgroundColor: colors.surface2,
+            borderRadius: 6,
+            paddingHorizontal: 9,
+            paddingVertical: 4,
+        },
+        buttonText: {
+            color: colors.foreground,
+            fontSize: 12,
+            fontFamily: MONO,
+        },
+        primary: {
+            borderRadius: 6,
+            paddingHorizontal: 10,
+            paddingVertical: 4,
+            backgroundColor: colors.accent,
+        },
+        primaryText: {
+            color: colors.accentForeground,
+            fontSize: 12,
+            fontWeight: '700',
+        },
+        posted: { borderColor: colors.statusSuccess },
+        postedText: { color: colors.statusSuccess },
+        locked: { opacity: 0.45 },
+    })
+}
+
+type Styles = ReturnType<typeof makeStyles>
+
+/** What a reply button reads, for its state. */
+const buttonLabel = ({ button }: { button: ReplyButton }): string => {
+    switch (button.state) {
+        case 'sending':
+            return `${button.reply} · posting…`
+        case 'posted':
+            return `${button.reply} · posted`
+        default:
+            return button.reply
+    }
+}
+
+const ReplyButtonView = ({
+    button,
+    onPress,
+    styles,
+}: {
+    button: ReplyButton
+    onPress: () => void
+    styles: Styles
+}) => (
+    <Pressable
+        accessibilityRole="button"
+        accessibilityLabel={`Post the reply ${button.reply}`}
+        accessibilityState={{ disabled: button.state !== 'ready' }}
+        disabled={button.state !== 'ready'}
+        onPress={onPress}
+        style={[
+            styles.button,
+            button.state === 'posted' ? styles.posted : null,
+            button.state === 'locked' ? styles.locked : null,
+        ]}
+    >
+        <Text
+            style={[
+                styles.buttonText,
+                button.state === 'posted' ? styles.postedText : null,
+            ]}
+        >
+            {buttonLabel({ button })}
+        </Text>
+    </Pressable>
+)
+
+/**
+ * A stuck item's reply buttons and "Help me". `posted` is what the board
+ * says it posted (from `board.read`); a post made here shows at once too.
+ * `chat_agent_id` is the chat "Help me" sends `/luca-unstick` to; without
+ * one, the command is copied instead.
+ */
+export const StuckActions = ({
+    run_id,
+    item,
+    spec_number,
+    posted,
+    chat_agent_id,
+    theme,
+}: {
+    run_id: string
+    item: { key: string; ticket: number | null; since: string }
+    spec_number: number | null
+    posted: PostedReply[]
+    chat_agent_id: string | null
+    theme: PluginTheme
+}) => {
+    const styles = useMemo(() => makeStyles({ theme }), [theme])
+    const postReply = useRpc(replyPostRpc)
+    const paseo = usePaseo()
+    const toast = useToast()
+    const [confirming, setConfirming] = useState<string | null>(null)
+    const [sending, setSending] = useState<string | null>(null)
+    const [mine, setMine] = useState<PostedReply | null>(null)
+    const [note, setNote] = useState<{ ok: boolean; text: string } | null>(null)
+
+    const known = [...posted, ...(mine ? [mine] : [])]
+    const buttons = replyButtons({ item, posted: known, sending })
+    const done = postedFor({ item, posted: known })
+    const command = unstickCommand({ run_id, ticket: item.ticket })
+
+    const post = async ({ reply }: { reply: string }) => {
+        setConfirming(null)
+        setSending(reply)
+        setNote(null)
+        try {
+            const output = await postReply({ run_id, key: item.key, reply })
+            if (output.posted) setMine(output.posted)
+            setNote({ ok: output.ok, text: output.message })
+        } catch (error) {
+            setNote({
+                ok: false,
+                text: `Couldn't post \`${reply}\`: ${String(error)}`,
+            })
+        } finally {
+            setSending(null)
+        }
+    }
+
+    const helpMe = async () => {
+        if (chat_agent_id !== null) {
+            try {
+                await paseo.agents.ref(chat_agent_id).send(command)
+                toast.show(`Sent ${command} to the run's chat.`, {
+                    variant: 'success',
+                })
+                return
+            } catch {
+                // The chat may be gone: copy it instead.
+            }
+        }
+        try {
+            await copyText(command)
+            toast.show(`Copied ${command}. Paste it in a chat.`, {
+                variant: 'success',
+            })
+        } catch {
+            toast.error(`Could not copy. Type ${command} in a chat.`)
+        }
+    }
+
+    return (
+        <View style={styles.box}>
+            <Text style={styles.label}>
+                Reply on{' '}
+                {spec_number === null
+                    ? 'the spec issue'
+                    : `spec issue #${spec_number}`}
+            </Text>
+            <View style={styles.row}>
+                {buttons.map((button) => (
+                    <ReplyButtonView
+                        key={button.reply}
+                        button={button}
+                        onPress={() => {
+                            setNote(null)
+                            setConfirming(button.reply)
+                        }}
+                        styles={styles}
+                    />
+                ))}
+            </View>
+            {confirming !== null && done === null && sending === null ? (
+                <View style={styles.row}>
+                    <Text style={styles.text}>
+                        {confirmReplyText({ reply: confirming, spec_number })}
+                    </Text>
+                    <Pressable
+                        accessibilityRole="button"
+                        accessibilityLabel={`Yes, post ${confirming}`}
+                        onPress={() => void post({ reply: confirming })}
+                        style={styles.primary}
+                    >
+                        <Text style={styles.primaryText}>Post</Text>
+                    </Pressable>
+                    <Pressable
+                        accessibilityRole="button"
+                        accessibilityLabel="Cancel"
+                        onPress={() => setConfirming(null)}
+                        style={styles.button}
+                    >
+                        <Text style={styles.buttonText}>Cancel</Text>
+                    </Pressable>
+                </View>
+            ) : null}
+            {note !== null && !(note.ok && done !== null) ? (
+                <Text style={note.ok ? styles.success : styles.danger}>
+                    {note.text}
+                </Text>
+            ) : null}
+            {done !== null ? (
+                <Text style={styles.success}>
+                    {postedText({ posted: done })}
+                </Text>
+            ) : null}
+            <View style={styles.row}>
+                <Pressable
+                    accessibilityRole="button"
+                    accessibilityLabel={`Help me: ${command}`}
+                    onPress={() => void helpMe()}
+                    style={styles.button}
+                >
+                    <Text style={styles.buttonText}>Help me</Text>
+                </Pressable>
+                <Text style={styles.muted}>
+                    {chat_agent_id === null
+                        ? `copies ${command}`
+                        : `sends ${command} to the run's chat`}
+                </Text>
+            </View>
+        </View>
+    )
+}