/** @jsxImportSource @opentui/solid */ import type { ScrollBoxRenderable } from "@opentui/core" import { useKeyboard } from "@opentui/solid" import "opentui-spinner/solid" import { Show, createMemo, indexArray } from "solid-js" import { SPINNER_FRAMES } from "../tui/component/spinner" import { RunEntryContent, separatorRows } from "./scrollback.writer" import type { FooterSubagentDetail, FooterSubagentTab, RunDiffStyle } from "./types" import type { RunFooterTheme, RunTheme } from "./theme" export const SUBAGENT_INSPECTOR_ROWS = 14 function statusColor(theme: RunFooterTheme, status: FooterSubagentTab["status"]) { if (status === "completed") { return theme.highlight } if (status === "error") { return theme.error } return theme.highlight } function statusIcon(status: FooterSubagentTab["status"]) { if (status === "completed") { return "●" } if (status === "error") { return "◍" } return "◔" } export function RunFooterSubagentBody(props: { active: () => boolean theme: () => RunTheme tab: () => FooterSubagentTab | undefined index: () => number total: () => number detail: () => FooterSubagentDetail | undefined width: () => number diffStyle?: RunDiffStyle onCycle: (dir: -1 | 1) => void onClose: () => void }) { const theme = createMemo(() => props.theme()) const footer = createMemo(() => theme().footer) const tab = createMemo(() => props.tab()) const commits = createMemo(() => props.detail()?.commits ?? []) const opts = createMemo(() => ({ diffStyle: props.diffStyle })) const scrollbar = createMemo(() => ({ trackOptions: { backgroundColor: footer().surface, foregroundColor: footer().line, }, })) const title = createMemo(() => { const current = tab() if (!current) { return "" } return current.description || current.title || current.label }) const subtitle = createMemo(() => { const current = tab() if (!current || title() === current.label) { return "" } return current.label }) const rows = indexArray(commits, (commit, index) => ( {index > 0 && separatorRows(commits()[index - 1], commit()) > 0 ? : null} )) let scroll: ScrollBoxRenderable | undefined useKeyboard((event) => { if (!props.active()) { return } if (event.name === "escape") { event.preventDefault() props.onClose() return } if (event.name === "tab" && !event.shift) { event.preventDefault() props.onCycle(1) return } if (event.name === "up" || event.name === "k") { event.preventDefault() scroll?.scrollBy(-1) return } if (event.name === "down" || event.name === "j") { event.preventDefault() scroll?.scrollBy(1) } }) return ( {(current) => ( {current().status === "running" ? ( ) : ( {statusIcon(current().status)} )} {title()} 0}> {" " + subtitle()} 1 && props.index() > 0}> {props.index()} of {props.total()} )} { scroll = item }} > {commits().length > 0 ? ( rows() ) : ( No subagent activity yet )} ) }