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

package/board/client/needs-you-section.tsx

@@ -0,0 +1,133 @@
+/**
+ * "Needs you": the stuck work waiting for a reply on the spec issue, each as
+ * a card with its reason, detail, what was tried and its reply buttons, and
+ * what came of the replies the board already posted.
+ */
+import { Icon } from '@getpaseo/plugin/client/react-native'
+import { Text, View } from 'react-native'
+
+import { Section, StageHeader } from './board-panel-parts'
+import type { Look } from './board-panel-styles'
+import { StuckActions } from './stuck-actions'
+
+import type { BoardState, NeedsYou } from '../shared/board-state'
+import { postedText, type PostedReply } from '../shared/reply-actions'
+
+const NeedsYouCard = ({
+    item,
+    run_id,
+    spec_number,
+    posted,
+    chat_agent_id,
+    theme,
+    styles,
+}: {
+    item: NeedsYou
+    run_id: string
+    spec_number: number | null
+    posted: PostedReply[]
+    chat_agent_id: string | null
+} & Look) => (
+    <View style={[styles.card, styles.cardStuck]}>
+        <View style={styles.cardTop}>
+            <Icon
+                name="OctagonAlert"
+                size={14}
+                color={theme.colors.statusDanger}
+            />
+            <Text
+                style={[styles.cardTitle, { color: theme.colors.statusDanger }]}
+            >
+                {item.subject}
+            </Text>
+        </View>
+        <Text style={styles.text}>{item.reason}</Text>
+        {item.detail ? (
+            <Text style={styles.muted} numberOfLines={8} selectable>
+                {item.detail}
+            </Text>
+        ) : null}
+        {item.tried.length > 0 ? (
+            <>
+                <Text style={styles.label}>Tried</Text>
+                {item.tried.map((line, index) => (
+                    <Text key={`${index}-${line}`} style={styles.muted}>
+                        {index + 1}. {line}
+                    </Text>
+                ))}
+            </>
+        ) : null}
+        <StuckActions
+            run_id={run_id}
+            item={item}
+            spec_number={spec_number}
+            posted={posted}
+            chat_agent_id={chat_agent_id}
+            theme={theme}
+        />
+    </View>
+)
+
+export const NeedsYouSection = ({
+    state,
+    posted,
+    chat_agent_id,
+    theme,
+    styles,
+}: {
+    state: BoardState
+    posted: PostedReply[]
+    chat_agent_id: string | null
+} & Look) => {
+    const { run } = state
+    const look = { theme, styles }
+    // Replies the board posted whose stuck item is gone: say what came of them.
+    const answered = posted.filter(
+        (entry) =>
+            !state.needs_you.some(
+                (item) => item.key === entry.key && item.since === entry.since
+            )
+    )
+
+    return (
+        <Section styles={styles}>
+            <StageHeader
+                title="Needs you"
+                hint="stuck work waiting for your reply on the spec issue"
+                icon="OctagonAlert"
+                count={state.needs_you.length}
+                color={theme.colors.statusDanger}
+                folded={null}
+                onPress={null}
+                {...look}
+            />
+            {state.needs_you.length > 0 ? (
+                <View style={styles.stageBody}>
+                    {state.needs_you.map((item) => (
+                        <NeedsYouCard
+                            key={`${item.key}-${item.since}`}
+                            item={item}
+                            run_id={run.run_id}
+                            spec_number={run.spec_number}
+                            posted={posted}
+                            chat_agent_id={chat_agent_id}
+                            {...look}
+                        />
+                    ))}
+                </View>
+            ) : null}
+            {answered.length > 0 ? (
+                <View style={styles.stageBody}>
+                    {answered.map((entry) => (
+                        <Text
+                            key={`${entry.key}-${entry.since}`}
+                            style={styles.muted}
+                        >
+                            {postedText({ posted: entry })}
+                        </Text>
+                    ))}
+                </View>
+            ) : null}
+        </Section>
+    )
+}

package/board/client/one-line.tsx

@@ -0,0 +1,193 @@
+/**
+ * The side panel's one-line rule (#626): every card line and the footer
+ * stay on one line, cut at the end with "…". A tap on a cut line opens a
+ * bubble with its full text; a second tap, or a tap anywhere else, closes
+ * it. On a computer, hovering opens it too.
+ *
+ * A card or the footer is a bubble scope (`useBubbles` and `BubbleScope`):
+ * it shows the open bubble of its lines under them. Inside the panel
+ * (`SharedBubbles`), one bubble is open at a time across every scope; a
+ * card or footer drawn on its own keeps its bubble itself.
+ */
+import {
+    createContext,
+    useContext,
+    useId,
+    useState,
+    type Dispatch,
+    type ReactNode,
+    type SetStateAction,
+} from 'react'
+
+import {
+    Pressable,
+    Text,
+    type StyleProp,
+    type TextStyle,
+    type ViewStyle,
+} from 'react-native'
+
+import type { Styles } from './board-panel-styles'
+
+type OpenBubble = {
+    /** The card or footer that shows it. */
+    scope: string
+    /** The cut line it belongs to. */
+    line: string
+    text: string
+    /** Opened by hovering: leaving the line closes it, a tap keeps it. */
+    hovered: boolean
+}
+
+type Shared = {
+    open: OpenBubble | null
+    show: Dispatch<SetStateAction<OpenBubble | null>>
+}
+
+export type Bubbles = Shared & { scope: string }
+
+const SharedContext = createContext<Shared | null>(null)
+
+const ScopeContext = createContext<Bubbles | null>(null)
+
+/**
+ * One open bubble for everything under it: the scrolling panel and the
+ * status bar pinned below it.
+ */
+export const BubbleProvider = ({ children }: { children: ReactNode }) => {
+    const [open, show] = useState<OpenBubble | null>(null)
+    return (
+        <SharedContext.Provider value={{ open, show }}>
+            {children}
+        </SharedContext.Provider>
+    )
+}
+
+const ClosesBubble = ({
+    style,
+    children,
+}: {
+    style: StyleProp<ViewStyle>
+    children: ReactNode
+}) => {
+    const shared = useContext(SharedContext)
+    return (
+        <Pressable
+            accessible={false}
+            onPress={() => shared?.show(null)}
+            style={style}
+        >
+            {children}
+        </Pressable>
+    )
+}
+
+/**
+ * One open bubble for the whole panel (a `BubbleProvider`'s, when inside
+ * one). A tap on any part of the panel that isn't a button of its own
+ * closes it.
+ */
+export const SharedBubbles = ({
+    style,
+    children,
+}: {
+    style: StyleProp<ViewStyle>
+    children: ReactNode
+}) => {
+    const shared = useContext(SharedContext)
+    const body = <ClosesBubble style={style}>{children}</ClosesBubble>
+    return shared ? body : <BubbleProvider>{body}</BubbleProvider>
+}
+
+/** Closes the panel's open bubble: for a button's tap that does more. */
+export const useCloseBubble = (): (() => void) => {
+    const shared = useContext(SharedContext)
+    return () => shared?.show(null)
+}
+
+/** A card's or the footer's bubbles: the panel's, or its own outside one. */
+export const useBubbles = (): Bubbles => {
+    const shared = useContext(SharedContext)
+    const [open, show] = useState<OpenBubble | null>(null)
+    const scope = useId()
+    return { scope, ...(shared ?? { open, show }) }
+}
+
+/** Gives its cut lines their bubble, and shows it under them when open. */
+export const BubbleScope = ({
+    bubbles,
+    styles,
+    children,
+}: {
+    bubbles: Bubbles
+    styles: Styles
+    children: ReactNode
+}) => (
+    <ScopeContext.Provider value={bubbles}>
+        {children}
+        {bubbles.open?.scope === bubbles.scope ? (
+            <Text style={styles.bubble} onPress={() => bubbles.show(null)}>
+                {bubbles.open.text}
+            </Text>
+        ) : null}
+    </ScopeContext.Provider>
+)
+
+/**
+ * A line of text cut at its end with "…". Inside a `BubbleScope`, a tap
+ * (or hovering) opens its full text in a bubble, or `full` when given: a
+ * short line's longer sentence. `children`, when given, draw the line in
+ * place of `text` (as nested, colored texts), which stays its plain words.
+ */
+export const CutLine = ({
+    text,
+    full,
+    style,
+    styles,
+    children,
+}: {
+    text: string
+    full?: string
+    style: StyleProp<TextStyle>
+    styles: Styles
+    children?: ReactNode
+}) => {
+    const bubbles = useContext(ScopeContext)
+    const line = useId()
+    const shown = full ?? text
+    const label = (
+        <Text style={style} numberOfLines={1} ellipsizeMode="tail">
+            {children ?? text}
+        </Text>
+    )
+    if (!bubbles) return label
+    const { scope, show } = bubbles
+    return (
+        <Pressable
+            accessibilityRole="button"
+            accessibilityHint="Shows the full text"
+            onPress={() =>
+                show((open) =>
+                    open?.line === line && !open.hovered
+                        ? null
+                        : { scope, line, text: shown, hovered: false }
+                )
+            }
+            onHoverIn={() =>
+                show((open) =>
+                    open === null || open.hovered
+                        ? { scope, line, text: shown, hovered: true }
+                        : open
+                )
+            }
+            onHoverOut={() =>
+                show((open) =>
+                    open?.line === line && open.hovered ? null : open
+                )
+            }
+            style={styles.cut}
+        >
+            {label}
+        </Pressable>
+    )
+}

package/board/client/repo-wait-banner.tsx

@@ -0,0 +1,69 @@
+/**
+ * The repo wait's banner (#632): the run waits for an earlier run on the
+ * same repo (#615), from `repo_wait_started` until `repo_wait_ended`. It
+ * says which run, how long it has waited, counting up by itself, and has
+ * the amber bar of a wait on purpose. In a run with no sign of life
+ * (#635), it says so instead, in red, and its time stops at the last sign.
+ */
+import { Icon } from '@getpaseo/plugin/client/react-native'
+import { Text, View } from 'react-native'
+
+import { useNow } from './board-look'
+import type { Look } from './board-panel-styles'
+
+import { elapsedText, type BoardState } from '../shared/board-state'
+
+/**
+ * The banner's words.
+ *
+ * @example
+ * repoWaitText({ runs: ['20260923t113000z-5b1e0c2a'], ms: 725_000 })
+ * // 'waiting for run 20260923t113000z-5b1e0c2a on this repo · 12m 5s'
+ */
+export const repoWaitText = ({
+    runs,
+    ms,
+}: {
+    runs: string[]
+    ms: number
+}): string => {
+    const which =
+        runs.length === 0
+            ? 'an earlier run'
+            : runs.map((run_id) => `run ${run_id}`).join(', ')
+    return `waiting for ${which} on this repo · ${elapsedText({ ms })}`
+}
+
+export const RepoWaitBanner = ({
+    wait,
+    lifeless = null,
+    theme,
+    styles,
+}: {
+    wait: NonNullable<BoardState['repo_wait']>
+    /** The run's lack of a sign of life (#635), from `noLife`. */
+    lifeless?: { text: string; at: number } | null
+} & Look) => {
+    const ticking = useNow()
+    const now = lifeless?.at ?? ticking
+    const color = lifeless
+        ? theme.colors.statusDanger
+        : theme.colors.statusWarning
+    const text = repoWaitText({
+        runs: wait.runs,
+        ms: now - Date.parse(wait.since),
+    })
+    return (
+        <View style={[styles.banner, { borderColor: color }]}>
+            <Icon name="Hourglass" size={13} color={color} />
+            <Text style={[styles.bannerText, { color }]}>
+                {lifeless ? `${text} · ${lifeless.text}` : text}
+            </Text>
+            <View style={styles.spacer} />
+            <View
+                accessibilityLabel={lifeless ? 'no sign of life' : 'waiting'}
+                style={[styles.waitBar, { backgroundColor: color }]}
+            />
+        </View>
+    )
+}

package/board/client/run-footer.tsx

@@ -0,0 +1,68 @@
+/**
+ * The bottom of the side panel's scrolling part: the run id, the event
+ * count and engine state, and the counters (the decision model, memory,
+ * agent messages, outside changes to the shared .git). The latest event's
+ * age is in the status bar (`status-bar.tsx`). Each stays on one line
+ * (`one-line.tsx`); a tap shows it whole in a bubble.
+ */
+import { View } from 'react-native'
+
+import { useNow } from './board-look'
+import type { Look } from './board-panel-styles'
+import { noLife } from './engine-life'
+import { BubbleScope, CutLine, useBubbles } from './one-line'
+
+import type { BoardState } from '../shared/board-state'
+
+export const RunFooter = ({ state, styles }: { state: BoardState } & Look) => {
+    const bubbles = useBubbles()
+    const now = useNow()
+    const { run, memory } = state
+    const line = (text: string) => (
+        <CutLine text={text} style={styles.small} styles={styles} />
+    )
+    // A run with no sign of life says so here too, not "engine running".
+    const engine =
+        noLife({ state, now })?.text ??
+        `engine ${
+            run.engine_ended
+                ? run.engine_ended.ok
+                    ? 'finished'
+                    : 'stopped'
+                : 'running'
+        }`
+    const memoryChanges =
+        memory.added + memory.updated + memory.refused + memory.failed > 0
+            ? `; ${memory.added} added, ${memory.updated} updated, ${memory.refused} refused, ${memory.failed} failed`
+            : ''
+    return (
+        <>
+            <View style={styles.rule} />
+            <BubbleScope bubbles={bubbles} styles={styles}>
+                {line(
+                    `${run.run_id} · ${state.event_count} events · ${engine}`
+                )}
+                {state.jev.asked > 0
+                    ? line(
+                          `Decision model, in shadow mode: ${state.jev.asked} asked, ${state.jev.answered} answered, ${state.jev.failed} without an answer. The engine doesn't act on them.`
+                      )
+                    : null}
+                {memory.searches > 0 || memory.learner !== 'waiting'
+                    ? line(
+                          `Memory: ${memory.searches} searches (${memory.search_errors} vault errors), ${memory.shown} shown. Learner: ${memory.learner}${memoryChanges}.`
+                      )
+                    : null}
+                {state.messages.sent + state.messages.refused > 0
+                    ? line(
+                          `Agent messages: ${state.messages.sent} sent, ${state.messages.delivered} handed over, ${state.messages.refused} refused.`
+                      )
+                    : null}
+                {state.shared_git_changed > 0
+                    ? line(
+                          `Outside changes to the shared .git: ${state.shared_git_changed}. Other processes made them, not the agents.`
+                      )
+                    : null}
+            </BubbleScope>
+        </>
+    )
+}

package/board/client/run-header.tsx

@@ -0,0 +1,189 @@
+/**
+ * The top of the side panel: the title and status, the run tabs, the run's
+ * title and pull request, plan usage, what the engine is doing now, the
+ * run's tokens and plan used, and the banners (a repo wait, a limit wait, a
+ * version note, a stop, the engine ending, intake refusing the run).
+ */
+import type { PluginWorkspacePanelProps } from '@getpaseo/plugin/client'
+import { ExternalLink } from '@getpaseo/plugin/client/ui'
+import { Text, View } from 'react-native'
+
+import {
+    limitWaitText,
+    runTitle,
+    statusColor,
+    statusText,
+    tokensText,
+    usageLineWaitText,
+    useNow,
+} from './board-look'
+import { Banner, StepLine } from './board-panel-parts'
+import type { Look } from './board-panel-styles'
+import { noLife } from './engine-life'
+import { RepoWaitBanner } from './repo-wait-banner'
+import { RunPicker } from './run-picker'
+import { UsageLine } from './usage-line'
+
+import {
+    planUsedText,
+    stoppedText,
+    type BoardState,
+    type RunSummary,
+} from '../shared/board-state'
+
+export const RunHeader = ({
+    state,
+    runs,
+    setPicked,
+    layout,
+    theme,
+    styles,
+}: {
+    state: BoardState
+    runs: RunSummary[]
+    setPicked: (run_id: string) => void
+    layout: PluginWorkspacePanelProps['layout']
+} & Look) => {
+    const { run } = state
+    const look = { theme, styles }
+    // With no sign of life (#635), the step's time and the repo wait's stop.
+    const lifeless = noLife({ state, now: useNow() })
+    return (
+        <>
+            <View style={styles.row}>
+                <Text style={styles.title}>Luca board</Text>
+                <View style={styles.spacer} />
+                <Text
+                    style={[
+                        styles.pill,
+                        {
+                            color: statusColor({ status: run.status, theme }),
+                            borderColor: statusColor({
+                                status: run.status,
+                                theme,
+                            }),
+                        },
+                    ]}
+                >
+                    {statusText({ status: run.status })}
+                </Text>
+            </View>
+            {runs.length > 1 ? (
+                <RunPicker
+                    runs={runs}
+                    selected={run.run_id}
+                    onPick={setPicked}
+                    {...look}
+                />
+            ) : null}
+            <Text style={styles.text} numberOfLines={layout.compact ? 3 : 2}>
+                {runTitle(run)}
+                {run.branch ? (
+                    <Text style={styles.muted}> · {run.branch}</Text>
+                ) : null}
+            </Text>
+            {run.pr_url ? (
+                <ExternalLink href={run.pr_url}>
+                    <Text style={styles.prLink}>
+                        Pull request{run.pr_number ? ` #${run.pr_number}` : ''}:{' '}
+                        {run.pr_url}
+                    </Text>
+                </ExternalLink>
+            ) : null}
+            <UsageLine state={state} {...look} />
+            {state.current_step ? (
+                <StepLine
+                    step={state.current_step}
+                    prefix="Now: "
+                    at={lifeless?.at ?? null}
+                    styles={styles}
+                />
+            ) : null}
+            {state.run_tokens > 0 ? (
+                <Text style={styles.mono}>
+                    This run&apos;s tokens:{' '}
+                    {tokensText({ tokens: state.run_tokens })} of its run budget{' '}
+                    {tokensText({ tokens: state.run_budget_tokens })}
+                </Text>
+            ) : null}
+            {state.run_plan_used.length > 0 ? (
+                <Text style={styles.mono}>
+                    This run used:{' '}
+                    {planUsedText({ used: state.run_plan_used, sign: '' })}
+                </Text>
+            ) : null}
+            {state.repo_wait && run.engine_ended === null ? (
+                <RepoWaitBanner
+                    wait={state.repo_wait}
+                    lifeless={lifeless}
+                    {...look}
+                />
+            ) : null}
+            {state.limit_wait ? (
+                <Banner
+                    icon="Hourglass"
+                    color={theme.colors.statusWarning}
+                    styles={styles}
+                >
+                    {limitWaitText({
+                        window: state.limit_wait.window,
+                        resets_at: state.limit_wait.resets_at,
+                        now: Date.now(),
+                    })}
+                </Banner>
+            ) : null}
+            {state.usage_line_wait ? (
+                <Banner
+                    icon="Hourglass"
+                    color={theme.colors.statusWarning}
+                    styles={styles}
+                >
+                    {usageLineWaitText({
+                        ...state.usage_line_wait,
+                        now: Date.now(),
+                    })}
+                </Banner>
+            ) : null}
+            {run.version_note ? (
+                <Banner
+                    icon="Info"
+                    color={theme.colors.statusWarning}
+                    styles={styles}
+                >
+                    {run.version_note}
+                </Banner>
+            ) : null}
+            {run.stopped ? (
+                <Banner
+                    icon="OctagonX"
+                    color={theme.colors.statusDanger}
+                    styles={styles}
+                >
+                    {stoppedText(run.stopped)}
+                </Banner>
+            ) : null}
+            {run.engine_ended && !run.engine_ended.ok ? (
+                <Banner
+                    icon="OctagonX"
+                    color={theme.colors.statusDanger}
+                    styles={styles}
+                >
+                    The engine stopped: {run.engine_ended.message}
+                </Banner>
+            ) : null}
+            {run.refusal.length > 0 ? (
+                <Banner
+                    icon="Ban"
+                    color={theme.colors.statusDanger}
+                    styles={styles}
+                >
+                    Intake refused the run. {run.refusal.join(' ')}
+                </Banner>
+            ) : null}
+            <Text style={styles.small}>
+                Step dots: tests → red check → code → checks → review. Tap a
+                card for details.
+            </Text>
+        </>
+    )
+}