feat: improve agent support in interactive rli (#209)

This PR adapts and modifies the changes from Jason's jason/agents_tab
branch. There are a number of additions to the interactive rli
interface:

- New Agents screens: Add agent list (with private/public tabs), detail,
and create screens to the interactive rli TUI, accessible from the main
menu via [a] shortcut
- Unified agent column definitions: Extract shared getAgentColumns() in
agentService and buildAgentTableColumns() in a new agentColumns.ts
module, used by both the CLI rli agent list and all
interactive agent pickers (agent list, devbox create, benchmark job
create) for consistent column layout (NAME, SOURCE, VERSION, ID,
CREATED) with terminal-width-adaptive sizing
- Agent picker in devbox create: Add optional agent mount field to the
devbox creation form with a tabbed private/public agent picker that
merges results during search
- Agent picker in benchmark job create: Wire up agent selection using
the shared columns, with server-side search and correct totalCount
propagation
- ResourcePicker improvements: Add extraDeps and extraOverhead props for
tab-switching contexts; add nextCursor support for opaque/merged
pagination cursors; stabilize checkbox column
rendering via ref to reduce flicker; fix cross-page multi-select by
tracking item objects in a ref Map
- CLI agent list cleanup: Remove local ColumnDef/computeColumnWidths()
in favor of shared getAgentColumns(); fix scoped package version styling
(lastIndexOf("@"))
- Routing & navigation: Register agent-list, agent-detail, agent-create
screens in Router with proper cleanup; add Agents to main menu and
benchmark menu label updates

## Files changed

src/services/agentService.ts             
Add AgentColumn, agentVersionText(), getAgentColumns(); fix totalCount
to use response.total_count
  
src/components/agentColumns.ts
New — shared buildAgentTableColumns() UI-layer column builder
  
src/commands/agent/list.ts
Replace local column/width logic with shared getAgentColumns()

src/screens/AgentListScreen.tsx
New — agent list with private/public tabs

src/screens/AgentDetailScreen.tsx
New — agent detail with delete operation

src/screens/AgentCreateScreen.tsx
New — agent creation form (npm/pip/git/object sources)

src/components/MainMenu.tsx
Add Agents menu item with [a] shortcut

src/components/BenchmarkMenu.tsx
Rename menu labels for clarity

src/router/Router.tsx
Register 3 new agent screens

src/store/navigationStore.tsx
Add agent screen types

src/screens/MenuScreen.tsx
Route "agents" selection to agent-list

src/components/DevboxCreatePage.tsx
Add agent mount picker with merged private+public search

src/screens/BenchmarkJobCreateScreen.tsx
Switch agent picker to single-select, use shared columns, server-side
search

src/components/ResourcePicker.tsx
Add extraDeps, extraOverhead, nextCursor; stabilize columns via ref; fix
cross-page selection tracking

src/hooks/useCursorPagination.ts
Support opaque nextCursor in fetch results

Author: jrvb-rl

src/commands/agent/list.ts

@@ -3,9 +3,12 @@
  */
 
 import chalk from "chalk";
-import { listAgents, type Agent } from "../../services/agentService.js";
+import {
+  listAgents,
+  getAgentColumns,
+  type Agent,
+} from "../../services/agentService.js";
 import { output, outputError } from "../../utils/output.js";
-import { formatTimeAgo } from "../../utils/time.js";
 
 interface ListOptions {
   full?: boolean;
@@ -16,81 +19,16 @@ interface ListOptions {
   output?: string;
 }
 
-interface ColumnDef {
-  header: string;
-  raw: (agent: Agent) => string;
-  styled: (agent: Agent) => string;
-}
-
-const columns: ColumnDef[] = [
-  {
-    header: "NAME",
-    raw: (a) => a.name,
-    styled(a) {
-      return this.raw(a);
-    },
-  },
-  {
-    header: "SOURCE",
-    raw: (a) => (a as any).source?.type || "-",
-    styled(a) {
-      return this.raw(a);
-    },
-  },
-  {
-    header: "VERSION",
-    raw: (a) => {
-      const pkg =
-        (a as any).source?.npm?.package_name ||
-        (a as any).source?.pip?.package_name;
-      return pkg ? `${pkg}@${a.version}` : a.version;
-    },
-    styled(a) {
-      const pkg =
-        (a as any).source?.npm?.package_name ||
-        (a as any).source?.pip?.package_name;
-      return pkg ? chalk.dim(pkg + "@") + a.version : a.version;
-    },
+/** Styling rules keyed by column key. Columns not listed render unstyled. */
+const columnStyle: Record<string, (raw: string) => string> = {
+  id: (v) => chalk.dim(v),
+  created: (v) => chalk.dim(v),
+  version: (v) => {
+    // Dim the "pkg@" prefix when present. Use lastIndexOf to skip scoped package @ (e.g. @scope/pkg@1.0)
+    const at = v.lastIndexOf("@");
+    return at > 0 ? chalk.dim(v.slice(0, at + 1)) + v.slice(at + 1) : v;
   },
-  {
-    header: "ID",
-    raw: (a) => a.id,
-    styled(a) {
-      return chalk.dim(a.id);
-    },
-  },
-  {
-    header: "CREATED",
-    raw: (a) => formatTimeAgo(a.create_time_ms),
-    styled(a) {
-      return chalk.dim(this.raw(a));
-    },
-  },
-];
-
-function computeColumnWidths(agents: Agent[]): number[] {
-  const minPad = 2;
-  const maxPad = 4;
-  const termWidth = process.stdout.columns || 120;
-
-  // Min width per column: max of header and all row values, plus minimum padding
-  const minWidths = columns.map((col) => {
-    const maxContent = agents.reduce(
-      (w, a) => Math.max(w, col.raw(a).length),
-      col.header.length,
-    );
-    return maxContent + minPad;
-  });
-
-  const totalMin = minWidths.reduce((s, w) => s + w, 0);
-  const slack = termWidth - totalMin;
-  const extraPerCol = Math.min(
-    maxPad - minPad,
-    Math.max(0, Math.floor(slack / columns.length)),
-  );
-
-  return minWidths.map((w) => w + extraPerCol);
-}
+};
 
 function padStyled(raw: string, styled: string, width: number): string {
   return styled + " ".repeat(Math.max(0, width - raw.length));
@@ -105,18 +43,23 @@ export function printAgentTable(agents: Agent[]): void {
     return;
   }
 
-  const widths = computeColumnWidths(agents);
   const termWidth = process.stdout.columns || 120;
+  const columns = getAgentColumns(agents, termWidth, false);
 
   // Header
-  const header = columns.map((col, i) => col.header.padEnd(widths[i])).join("");
+  const header = columns.map((col) => col.label.padEnd(col.width)).join("");
   console.log(chalk.bold(header));
   console.log(chalk.dim("─".repeat(Math.min(header.length, termWidth))));
 
   // Rows
   for (const agent of agents) {
     const line = columns
-      .map((col, i) => padStyled(col.raw(agent), col.styled(agent), widths[i]))
+      .map((col) => {
+        const raw = col.getValue(agent);
+        const styleFn = columnStyle[col.key];
+        const styled = styleFn ? styleFn(raw) : raw;
+        return padStyled(raw, styled, col.width);
+      })
       .join("");
     console.log(line);
   }

src/components/BenchmarkMenu.tsx

@@ -67,21 +67,21 @@ interface BenchmarkMenuItem {
 const benchmarkMenuItems: BenchmarkMenuItem[] = [
   {
     key: "benchmarks",
-    label: "Benchmark Defs",
+    label: "Available Benchmarks",
     description: "View benchmark definitions",
     icon: "◉",
     color: colors.primary,
   },
   {
     key: "benchmark-jobs",
-    label: "Orchestrator Jobs",
+    label: "Benchmark Orchestrator Jobs",
     description: "Run and manage benchmark jobs",
     icon: "▲",
     color: colors.warning,
   },
   {
     key: "benchmark-runs",
-    label: "Legacy Runs",
+    label: "Manual Benchmark Runs",
     description: "View and manage benchmark executions",
     icon: "◇",
     color: colors.success,