@davstack/tui 0.2.0 → 0.3.0

package/src/views/AgentsList.tsx

@@ -0,0 +1,131 @@
+import React, { useMemo, useState } from "react"
+import { Box, Text, useInput } from "ink"
+
+import type { JobRecord, JobStatus } from "@davstack/open-agents/core/jobs"
+import { useAgentJobs } from "../hooks/useAgentJobs.ts"
+import { getRepoRootSafe } from "../lib/package-info.ts"
+import { jobStatusGlyph } from "../lib/agent-glyphs.ts"
+import { inferAgentTitle } from "../lib/agent-title.ts"
+import { useView } from "../state/view-context.tsx"
+import { useNoColor, colorOrUndef } from "../hooks/useNoColor.ts"
+import { ControlsHint } from "../components/ControlsHint.tsx"
+
+const AGENTS_CONTROLS =
+  "↑/↓ j/k focus  enter drill in  esc back  g agents  q quit  " +
+  "● running  ✗ failed  ○ done"
+
+const STATUS_LABEL: Record<JobStatus, string> = {
+  running: "run",
+  done: "done",
+  failed: "fail",
+  cancelled: "cancel",
+}
+
+const STATUS_COLOR: Record<JobStatus, string> = {
+  running: "yellow",
+  done: "gray",
+  failed: "red",
+  cancelled: "gray",
+}
+
+export function AgentsList(): React.ReactElement {
+  const repoPath = getRepoRootSafe()
+  const { jobs } = useAgentJobs(repoPath)
+  const { focusedIdx, setFocusedIdx, showAgent } = useView()
+  const [controlsOpen, setControlsOpen] = useState(false)
+
+  const rawModeSupported = process.stdin.isTTY === true
+  useInput(
+    (input, key) => {
+      if (input === "c") {
+        setControlsOpen((v) => !v)
+        return
+      }
+      if (jobs.length === 0) return
+      if (key.upArrow || input === "k") {
+        setFocusedIdx((focusedIdx - 1 + jobs.length) % jobs.length)
+      } else if (key.downArrow || input === "j") {
+        setFocusedIdx((focusedIdx + 1) % jobs.length)
+      } else if (key.return) {
+        const job = jobs[Math.min(focusedIdx, jobs.length - 1)]
+        if (job) showAgent(job.id)
+      }
+    },
+    { isActive: rawModeSupported },
+  )
+
+  if (jobs.length === 0) {
+    return <AgentsEmptyState controlsOpen={controlsOpen} />
+  }
+
+  const safeFocus = Math.min(focusedIdx, jobs.length - 1)
+
+  return (
+    <Box flexDirection="column">
+      {jobs.map((job, i) => (
+        <AgentListRow key={job.id} job={job} focused={i === safeFocus} />
+      ))}
+      <ControlsHint expanded={controlsOpen} controls={AGENTS_CONTROLS} />
+    </Box>
+  )
+}
+
+function AgentListRow({ job, focused }: { job: JobRecord; focused: boolean }): React.ReactElement {
+  const noColor = useNoColor()
+  const title = useMemo(() => truncateOneLine(inferAgentTitle({ prompt: job.prompt }), 80), [job.prompt])
+  const when = formatWhen(job.startedAt)
+
+  return (
+    <Box>
+      <Text color={colorOrUndef(focused ? "cyan" : undefined, noColor)}>
+        {focused ? "› " : "  "}
+      </Text>
+      <Text color={colorOrUndef(STATUS_COLOR[job.status], noColor)}>
+        {jobStatusGlyph(job.status, noColor)}
+      </Text>
+      <Text> {STATUS_LABEL[job.status].padEnd(7)}</Text>
+      <Text bold>{title.padEnd(82)}</Text>
+      <Text dimColor>{when}</Text>
+    </Box>
+  )
+}
+
+function AgentsEmptyState({ controlsOpen }: { controlsOpen: boolean }): React.ReactElement {
+  return (
+    <Box flexDirection="column">
+      <Text dimColor>
+        No agents have run in this repo yet. Submit one with: explore &quot;&lt;prompt&gt;&quot;
+      </Text>
+      <ControlsHint expanded={controlsOpen} controls={AGENTS_CONTROLS} />
+    </Box>
+  )
+}
+
+function formatWhen(startedAt: string, now = Date.now()): string {
+  const then = new Date(startedAt).getTime()
+  const ageMs = now - then
+  const dayMs = 24 * 60 * 60 * 1000
+  if (ageMs < dayMs) {
+    const ageMin = Math.max(0, Math.round(ageMs / 60000))
+    if (ageMin < 1) return "just now"
+    if (ageMin < 60) return `${ageMin}m ago`
+    const ageHr = Math.round(ageMin / 60)
+    return `${ageHr}h ago`
+  }
+  const d = new Date(then)
+  return `${ordinal(d.getDate())} ${MONTHS[d.getMonth()]}`
+}
+
+const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
+
+function ordinal(n: number): string {
+  const s = ["th", "st", "nd", "rd"]
+  const v = n % 100
+  return `${n}${s[(v - 20) % 10] ?? s[v] ?? s[0]}`
+}
+
+function truncateOneLine(s: string, n: number): string {
+  const one = s.replace(/\s+/g, " ").trim()
+  if (one.length <= n) return one
+  return one.slice(0, n - 1) + "…"
+}

package/src/views/ServerList.test.tsx

@@ -10,6 +10,7 @@ import { render } from "ink-testing-library"
 import { ServerList } from "./ServerList.tsx"
 import { ViewProvider } from "../state/view-context.tsx"
 import { DaemonsProvider, useDaemons, type DaemonRow } from "../state/daemons-context.tsx"
+import { AgentsProvider } from "../state/agents-context.tsx"
 import { QuitProvider } from "../state/quit-context.tsx"
 import type { DaemonDescriptor } from "../lib/daemon-registry.ts"
 
@@ -52,32 +53,35 @@ afterEach(() => {
   active = null
 })
 
-test("legend advertises the new hotkeys", () => {
+test("controls hint is collapsed by default", () => {
   const descriptors = [makeDescriptor("logs")]
   active = render(
     <ViewProvider>
-      <DaemonsProvider descriptors={descriptors}>
-        <QuitProvider>
+      <AgentsProvider>
+        <DaemonsProvider descriptors={descriptors}>
+          <QuitProvider>
           <ServerList />
-        </QuitProvider>
-      </DaemonsProvider>
+          </QuitProvider>
+        </DaemonsProvider>
+      </AgentsProvider>
     </ViewProvider>,
   )
   const frame = active.lastFrame() ?? ""
-  expect(frame).toContain("s start/stop")
-  expect(frame).toContain("k takeover")
-  expect(frame).toContain("1-9 jump")
+  expect(frame).toContain("c for controls")
+  expect(frame).not.toContain("s start/stop")
 })
 
 test("renders a row per descriptor with the focus marker on idx 0", () => {
   const descriptors = [makeDescriptor("logs"), makeDescriptor("vitest")]
   active = render(
     <ViewProvider>
-      <DaemonsProvider descriptors={descriptors}>
-        <QuitProvider>
+      <AgentsProvider>
+        <DaemonsProvider descriptors={descriptors}>
+          <QuitProvider>
           <ServerList />
-        </QuitProvider>
-      </DaemonsProvider>
+          </QuitProvider>
+        </DaemonsProvider>
+      </AgentsProvider>
     </ViewProvider>,
   )
   const frame = active.lastFrame() ?? ""
@@ -107,8 +111,9 @@ test("toggleByKey dispatches stop() for a running daemon", async () => {
 
   active = render(
     <ViewProvider>
-      <DaemonsProvider descriptors={descriptors}>
-        <QuitProvider>
+      <AgentsProvider>
+        <DaemonsProvider descriptors={descriptors}>
+          <QuitProvider>
           <Seed
             rows={[
               { descriptor: descriptors[0], status: "running", lines: [], exitCode: null },
@@ -118,8 +123,9 @@ test("toggleByKey dispatches stop() for a running daemon", async () => {
           />
           <Capture />
           <ServerList />
-        </QuitProvider>
-      </DaemonsProvider>
+          </QuitProvider>
+        </DaemonsProvider>
+      </AgentsProvider>
     </ViewProvider>,
   )
   await tick()
@@ -145,8 +151,9 @@ test("toggleByKey dispatches start() for an idle daemon", async () => {
 
   active = render(
     <ViewProvider>
-      <DaemonsProvider descriptors={descriptors}>
-        <QuitProvider>
+      <AgentsProvider>
+        <DaemonsProvider descriptors={descriptors}>
+          <QuitProvider>
           <Seed
             rows={[
               { descriptor: descriptors[0], status: "idle", lines: [], exitCode: null },
@@ -155,8 +162,9 @@ test("toggleByKey dispatches start() for an idle daemon", async () => {
           />
           <Capture />
           <ServerList />
-        </QuitProvider>
-      </DaemonsProvider>
+          </QuitProvider>
+        </DaemonsProvider>
+      </AgentsProvider>
     </ViewProvider>,
   )
   await tick()

package/src/views/ServerList.tsx

@@ -2,7 +2,7 @@
 // hotkeys (`↑/↓`, `enter`, `s`). Global hotkeys (`1..9`, `esc`, `q`) live
 // in <GlobalHotkeys>.
 
-import React from "react"
+import React, { useState } from "react"
 import { Box, Text, useInput } from "ink"
 
 import type { DaemonStatus } from "../hooks/useDaemonProcess.ts"
@@ -10,6 +10,11 @@ import { useView } from "../state/view-context.tsx"
 import { useDaemons, type DaemonRow } from "../state/daemons-context.tsx"
 import { useHotkeys } from "../hooks/useHotkeys.ts"
 import { useNoColor, colorOrUndef } from "../hooks/useNoColor.ts"
+import { ControlsHint } from "../components/ControlsHint.tsx"
+
+const DAEMONS_CONTROLS =
+  "↑/↓ focus  enter drill in  s start/stop  k takeover  1-9 jump  g agents  q quit  " +
+  "● running  ✗ crashed  ⚠ blocked"
 
 const STATUS_GLYPH: Record<DaemonStatus, string> = {
   idle: "○",
@@ -36,6 +41,7 @@ const STATUS_COLOR: Record<DaemonStatus, string> = {
 export function ServerList(): React.ReactElement {
   const { rows } = useDaemons()
   const { focusedIdx, setFocusedIdx, showLog } = useView()
+  const [controlsOpen, setControlsOpen] = useState(false)
   // Hotkeys hook gives us the toggle; quit isn't called here so we pass
   // a noop — the global useInput owns the q routing.
   const { onToggleFocused } = useHotkeys(() => {})
@@ -43,6 +49,10 @@ export function ServerList(): React.ReactElement {
   const rawModeSupported = process.stdin.isTTY === true
   useInput(
     (input, key) => {
+      if (input === "c") {
+        setControlsOpen((v) => !v)
+        return
+      }
       if (rows.length === 0) return
       if (key.upArrow) {
         setFocusedIdx((focusedIdx - 1 + rows.length) % rows.length)
@@ -66,11 +76,7 @@ export function ServerList(): React.ReactElement {
       {rows.map((row, i) => (
         <DaemonListRow key={row.descriptor.key} row={row} focused={i === focusedIdx} />
       ))}
-      <Box marginTop={1}>
-        <Text dimColor>
-          ↑/↓ focus  enter drill in  s start/stop  k takeover  1-9 jump  q quit  ● running  ✗ crashed  ⚠ blocked
-        </Text>
-      </Box>
+      <ControlsHint expanded={controlsOpen} controls={DAEMONS_CONTROLS} />
     </Box>
   )
 }