@ranker/raxflow 0.2.0

package/src/hub/__tests__/commands.test.ts

@@ -0,0 +1,84 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { registerCommand, getCommandRegistry } from "../commands/index.js";
+import { CommandDefinition } from "../types.js";
+
+describe("Command Registry", () => {
+  beforeEach(() => {
+    // Clear the registry before each test
+    const registry = getCommandRegistry();
+    registry.clear();
+  });
+
+  describe("registerCommand", () => {
+    it("should register a command", () => {
+      const cmd: CommandDefinition = {
+        name: "test",
+        description: "Test command",
+        handler: async () => {},
+      };
+
+      registerCommand(cmd);
+      const registry = getCommandRegistry();
+      expect(registry.has("test")).toBe(true);
+    });
+
+    it("should register command with aliases", () => {
+      const cmd: CommandDefinition = {
+        name: "status",
+        description: "Show status",
+        handler: async () => {},
+        aliases: ["st", "s"],
+      };
+
+      registerCommand(cmd);
+      const registry = getCommandRegistry();
+      expect(registry.has("status")).toBe(true);
+      expect(registry.has("st")).toBe(true);
+      expect(registry.has("s")).toBe(true);
+    });
+
+    it("should allow multiple commands to be registered", () => {
+      registerCommand({
+        name: "cmd1",
+        description: "Command 1",
+        handler: async () => {},
+      });
+
+      registerCommand({
+        name: "cmd2",
+        description: "Command 2",
+        handler: async () => {},
+      });
+
+      const registry = getCommandRegistry();
+      expect(registry.size).toBe(2);
+    });
+  });
+
+  describe("getCommandRegistry", () => {
+    it("should return the same registry instance", () => {
+      const registry1 = getCommandRegistry();
+      const registry2 = getCommandRegistry();
+      expect(registry1).toBe(registry2);
+    });
+
+    it("should allow retrieving registered commands", async () => {
+      const mockHandler = async () => {
+        // Mock handler that does nothing
+      };
+      
+      registerCommand({
+        name: "mock",
+        description: "Mock command",
+        handler: mockHandler,
+      });
+
+      const registry = getCommandRegistry();
+      const cmd = registry.get("mock");
+      expect(cmd).toBeDefined();
+      expect(cmd?.name).toBe("mock");
+      expect(cmd?.description).toBe("Mock command");
+      expect(cmd?.handler).toBe(mockHandler);
+    });
+  });
+});

package/src/hub/__tests__/history.test.ts

@@ -0,0 +1,137 @@
+import { describe, it, expect, beforeEach, afterEach } from "vitest";
+import { CommandHistory } from "../history.js";
+import * as fs from "fs/promises";
+import * as path from "path";
+import { tmpdir } from "os";
+
+describe("CommandHistory", () => {
+  let tempDir: string;
+  let history: CommandHistory;
+
+  beforeEach(async () => {
+    // Create a temporary directory for testing
+    tempDir = path.join(tmpdir(), `raxflow-test-${Date.now()}`);
+    await fs.mkdir(tempDir, { recursive: true });
+    history = new CommandHistory(tempDir);
+  });
+
+  afterEach(async () => {
+    // Clean up temporary directory
+    try {
+      await fs.rm(tempDir, { recursive: true });
+    } catch {
+      // Ignore cleanup errors
+    }
+  });
+
+  describe("add", () => {
+    it("should add a command to history", () => {
+      history.add("status");
+      expect(history.getAll()).toContain("status");
+    });
+
+    it("should not add duplicate consecutive commands", () => {
+      history.add("status");
+      history.add("status");
+      expect(history.getAll().filter(c => c === "status").length).toBe(1);
+    });
+
+    it("should allow same command if not consecutive", () => {
+      history.add("status");
+      history.add("agents");
+      history.add("status");
+      expect(history.getAll()).toEqual(["status", "agents", "status"]);
+    });
+  });
+
+  describe("up/down navigation", () => {
+    it("should return undefined when navigating up on empty history", () => {
+      expect(history.up()).toBeUndefined();
+    });
+
+    it("should return commands when navigating up", () => {
+      history.add("status");
+      history.add("agents");
+      history.add("run test");
+
+      expect(history.up()).toBe("run test");
+      expect(history.up()).toBe("agents");
+      expect(history.up()).toBe("status");
+    });
+
+    it("should stop at the beginning when navigating up", () => {
+      history.add("status");
+      history.up();
+      expect(history.up()).toBeUndefined();
+    });
+
+    it("should navigate down after navigating up", () => {
+      history.add("status");
+      history.add("agents");
+      history.up();
+      history.up();
+      expect(history.down()).toBe("agents");
+    });
+
+    it("should return undefined when navigating down past the end", () => {
+      history.add("status");
+      history.down();
+      expect(history.down()).toBeUndefined();
+    });
+  });
+
+  describe("save and load", () => {
+    it("should save history to file", async () => {
+      history.add("status");
+      history.add("agents");
+      await history.save();
+
+      const historyPath = path.join(tempDir, ".rax", "history.json");
+      const content = await fs.readFile(historyPath, "utf-8");
+      const saved = JSON.parse(content);
+      expect(saved).toEqual(["status", "agents"]);
+    });
+
+    it("should load history from file", async () => {
+      // Setup: Create history file
+      const raxDir = path.join(tempDir, ".rax");
+      await fs.mkdir(raxDir, { recursive: true });
+      const historyPath = path.join(raxDir, "history.json");
+      await fs.writeFile(historyPath, JSON.stringify(["status", "agents"]));
+
+      // Load and verify
+      const newHistory = new CommandHistory(tempDir);
+      await newHistory.load();
+      expect(newHistory.getAll()).toEqual(["status", "agents"]);
+    });
+
+    it("should handle missing history file gracefully", async () => {
+      await history.load();
+      expect(history.getAll()).toEqual([]);
+    });
+
+    it("should limit history to last 1000 commands", async () => {
+      // Add 1005 commands
+      for (let i = 0; i < 1005; i++) {
+        history.add(`command-${i}`);
+      }
+      await history.save();
+
+      const historyPath = path.join(tempDir, ".rax", "history.json");
+      const content = await fs.readFile(historyPath, "utf-8");
+      const saved = JSON.parse(content);
+      expect(saved.length).toBe(1000);
+      expect(saved[0]).toBe("command-5"); // First 5 should be removed
+      expect(saved[saved.length - 1]).toBe("command-1004");
+    });
+  });
+
+  describe("getAll", () => {
+    it("should return copy of history array", () => {
+      history.add("status");
+      const all = history.getAll();
+      all.push("modified");
+      expect(history.getAll()).not.toContain("modified");
+    });
+  });
+});

package/src/hub/__tests__/parser.test.ts

@@ -0,0 +1,105 @@
+import { describe, it, expect } from "vitest";
+import { parseCommand, getCompletions } from "../parser.js";
+import { HubContext } from "../types.js";
+
+describe("parseCommand", () => {
+  it("should parse a simple command", () => {
+    const result = parseCommand("status");
+    expect(result.name).toBe("status");
+    expect(result.args).toEqual([]);
+    expect(result.flags).toEqual({});
+  });
+
+  it("should parse a command with arguments", () => {
+    const result = parseCommand("run Create an API");
+    expect(result.name).toBe("run");
+    expect(result.args).toEqual(["Create", "an", "API"]);
+    expect(result.flags).toEqual({});
+  });
+
+  it("should parse a command with long flags", () => {
+    const result = parseCommand("run --workflow test.json --stream Create API");
+    expect(result.name).toBe("run");
+    expect(result.args).toEqual(["Create", "API"]);
+    expect(result.flags).toEqual({
+      workflow: "test.json",
+      stream: true,
+    });
+  });
+
+  it("should parse a command with short flags", () => {
+    const result = parseCommand("logs -f --agent CodeGenerator");
+    expect(result.name).toBe("logs");
+    expect(result.args).toEqual([]);
+    expect(result.flags).toEqual({
+      f: true,
+      agent: "CodeGenerator",
+    });
+  });
+
+  it("should parse mixed flags and arguments", () => {
+    const result = parseCommand("run --json --max-parallel 6 Create API");
+    expect(result.name).toBe("run");
+    expect(result.args).toEqual(["Create", "API"]);
+    expect(result.flags).toEqual({
+      json: true,
+      "max-parallel": "6",
+    });
+  });
+
+  it("should handle empty input", () => {
+    const result = parseCommand("");
+    expect(result.name).toBe("");
+    expect(result.args).toEqual([]);
+    expect(result.flags).toEqual({});
+  });
+
+  it("should handle whitespace-only input", () => {
+    const result = parseCommand("   ");
+    expect(result.name).toBe("");
+    expect(result.args).toEqual([]);
+    expect(result.flags).toEqual({});
+  });
+});
+
+describe("getCompletions", () => {
+  it("should return all commands for empty input", () => {
+    const completions = getCompletions("");
+    expect(completions).toContain("run");
+    expect(completions).toContain("status");
+    expect(completions).toContain("agents");
+    expect(completions).toContain("exit");
+    expect(completions.length).toBeGreaterThan(10);
+  });
+
+  it("should filter commands by prefix", () => {
+    const completions = getCompletions("sta");
+    expect(completions).toContain("status");
+    expect(completions.every(c => c.startsWith("sta"))).toBe(true);
+  });
+
+  it("should suggest run flags after 'run' command", () => {
+    const completions = getCompletions("run ");
+    expect(completions).toContain("--workflow");
+    expect(completions).toContain("--max-parallel");
+    expect(completions).toContain("--stream");
+    expect(completions).toContain("--json");
+  });
+
+  it("should suggest log flags after 'logs' command", () => {
+    const completions = getCompletions("logs ");
+    expect(completions).toContain("-f");
+    expect(completions).toContain("--agent");
+    expect(completions).toContain("--level");
+  });
+
+  it("should return empty array for unknown command context", () => {
+    const completions = getCompletions("unknowncommand ");
+    expect(completions).toEqual([]);
+  });
+
+  it("should handle partial flag completion", () => {
+    const completions = getCompletions("run --work");
+    expect(completions).toContain("--workflow");
+  });
+});

package/src/hub/commands/agents.ts

@@ -0,0 +1,53 @@
+import { HubContext } from "../types.js";
+import { drawBox } from "../styles/borders.js";
+import { colorize, formatStatus, providerIndicators } from "../styles/colors.js";
+import { padRight } from "../styles/typography.js";
+
+interface AgentInfo {
+  name: string;
+  role: string;
+  status: string;
+  provider: string;
+  lastExecution: string;
+  avgResponseTime: string;
+}
+
+export async function listAgents(_args: string[], _flags: Record<string, string | boolean>, _context: HubContext): Promise<void> {
+  const width = 75;
+  
+  // Agent definitions from official-agents
+  const agents: AgentInfo[] = [
+    { name: "IntentClassifier", role: "Classify user intent", status: "online", provider: "host", lastExecution: "2s ago", avgResponseTime: "45ms" },
+    { name: "Brainstorm", role: "Generate ideas", status: "online", provider: "host", lastExecution: "5m ago", avgResponseTime: "120ms" },
+    { name: "Spec", role: "Write specifications", status: "online", provider: "host", lastExecution: "1m ago", avgResponseTime: "89ms" },
+    { name: "Architecture", role: "Design architecture", status: "online", provider: "host", lastExecution: "3m ago", avgResponseTime: "156ms" },
+    { name: "TaskPlanner", role: "Decompose to DAG", status: "online", provider: "host", lastExecution: "2s ago", avgResponseTime: "34ms" },
+    { name: "CodeGenerator", role: "Generate code", status: "running", provider: "host", lastExecution: "running", avgResponseTime: "234ms" },
+    { name: "Test", role: "Run tests", status: "queued", provider: "host", lastExecution: "--", avgResponseTime: "--" },
+    { name: "Validator", role: "Validate outputs", status: "online", provider: "host", lastExecution: "1m ago", avgResponseTime: "67ms" },
+    { name: "Fix", role: "Patch defects", status: "online", provider: "host", lastExecution: "2m ago", avgResponseTime: "89ms" },
+    { name: "Optimizer", role: "Optimize performance", status: "idle", provider: "anthropic", lastExecution: "1h ago", avgResponseTime: "178ms" },
+    { name: "Documentation", role: "Generate docs", status: "online", provider: "host", lastExecution: "5m ago", avgResponseTime: "145ms" },
+    { name: "Benchmark", role: "Run benchmarks", status: "idle", provider: "host", lastExecution: "2h ago", avgResponseTime: "567ms" },
+  ];
+
+  const lines: string[] = [];
+
+  // Header
+  lines.push(`  ${colorize("AGENT", "bright")}           ${colorize("ROLE", "bright")}              ${colorize("STATUS", "bright")}    ${colorize("PROVIDER", "bright")}  ${colorize("LAST RUN", "bright")}`);
+  lines.push("  " + "─".repeat(71));
+
+  // Agent list
+  for (const agent of agents) {
+    const indicator = formatStatus(agent.status);
+    const providerTag = providerIndicators[agent.provider] || "[?]";
+    const statusColor = agent.status === "running" ? "yellow" : agent.status === "queued" ? "gray" : "green";
+    
+    lines.push(`  ${padRight(agent.name, 16)} ${padRight(agent.role.slice(0, 17), 18)} ${indicator} ${colorize(agent.status.toUpperCase().padEnd(8), statusColor)} ${providerTag}    ${colorize(agent.lastExecution, "gray")}`);
+  }
+
+  lines.push("");
+  lines.push(`  ${colorize("Legend:", "bright")} ● online  ○ idle  ▶ running  ◐ queued`);
+
+  console.log(drawBox(lines, width, "AGENTS"));
+}

package/src/hub/commands/index.ts

@@ -0,0 +1,140 @@
+import { CommandDefinition } from "../types.js";
+import { showStatus } from "./status.js";
+import { listAgents } from "./agents.js";
+import { runWorkflow } from "./run.js";
+import { listProviders } from "./providers.js";
+import { listWorkflows } from "./workflows.js";
+import { showLogs } from "./logs.js";
+import { showMetrics } from "./metrics.js";
+import { showMemory } from "./memory.js";
+import { startTUI } from "../../tui/index.js";
+
+const commands = new Map<string, CommandDefinition>();
+
+export function registerCommand(def: CommandDefinition): void {
+  commands.set(def.name, def);
+  if (def.aliases) {
+    for (const alias of def.aliases) {
+      commands.set(alias, def);
+    }
+  }
+}
+
+export function getCommandRegistry(): Map<string, CommandDefinition> {
+  return commands;
+}
+
+registerCommand({
+  name: "help",
+  aliases: ["?"],
+  description: "Affiche l'aide",
+  handler: async () => {
+    console.log(`
+Commandes disponibles:
+  • run <prompt>     : Exécuter un workflow
+  • status           : Voir l'état du système
+  • agents           : Liste des agents
+  • providers        : État des providers
+  • workflows        : Blueprints disponibles
+  • logs             : Logs en temps réel
+  • metrics          : Métriques de performance
+  • memory           : Graph QSGM
+  • dashboard        : Ouvrir dashboard web
+  • ui               : Mode TUI plein écran
+  • chat             : Mode conversationnel
+  • help             : Cette aide
+  • exit             : Quitter
+    `);
+  },
+});
+
+registerCommand({
+  name: "exit",
+  aliases: ["quit"],
+  description: "Quitte le hub",
+  handler: async () => {
+  },
+});
+
+registerCommand({
+  name: "status",
+  description: "Affiche le statut du système",
+  handler: showStatus,
+});
+
+registerCommand({
+  name: "agents",
+  description: "Liste les agents disponibles",
+  handler: listAgents,
+});
+
+registerCommand({
+  name: "providers",
+  description: "Liste les providers configurés",
+  handler: listProviders,
+});
+
+registerCommand({
+  name: "workflows",
+  description: "Liste les workflows disponibles",
+  handler: listWorkflows,
+});
+
+registerCommand({
+  name: "logs",
+  description: "Affiche les logs en temps réel",
+  handler: showLogs,
+});
+
+registerCommand({
+  name: "metrics",
+  description: "Affiche les métriques de performance",
+  handler: showMetrics,
+});
+
+registerCommand({
+  name: "memory",
+  description: "Affiche le statut de la mémoire",
+  handler: showMemory,
+});
+
+registerCommand({
+  name: "run",
+  description: "Exécute un workflow avec le prompt spécifié",
+  handler: runWorkflow,
+});
+
+registerCommand({
+  name: "ui",
+  description: "Lance le mode TUI plein écran",
+  handler: async () => {
+    console.log("\n🎬 Lancement du mode TUI...\n");
+    const { waitUntilExit } = startTUI();
+    await waitUntilExit();
+  },
+});
+
+registerCommand({
+  name: "chat",
+  description: "Lance le mode conversationnel",
+  handler: async () => {
+    console.log("\n💬 Lancement du mode Chat (TUI)...\n");
+    const { waitUntilExit } = startTUI();
+    await waitUntilExit();
+  },
+});
+
+const placeholderCommands = [
+  "install", "config", "doctor", "bridge-test", "benchmark", 
+  "evolve", "dashboard"
+];
+
+for (const cmd of placeholderCommands) {
+  registerCommand({
+    name: cmd,
+    description: `Commande ${cmd}`,
+    handler: async () => {
+      console.log(`⚠️  Commande '${cmd}' sera implémentée dans une phase ultérieure`);
+    },
+  });
+}

package/src/hub/commands/logs.ts

@@ -0,0 +1,70 @@
+import { HubContext } from "../types.js";
+import { drawBox } from "../styles/borders.js";
+import { colorize, ansiColors } from "../styles/colors.js";
+
+interface LogEntry {
+  timestamp: string;
+  level: "INFO" | "WARN" | "ERROR" | "SUCCESS" | "MUTATE";
+  agent: string;
+  message: string;
+}
+
+export async function showLogs(_args: string[], flags: Record<string, string | boolean>, _context: HubContext): Promise<void> {
+  const width = 85;
+  const followMode = flags["f"] === true || flags["follow"] === true;
+  const agentFilter = typeof flags["agent"] === "string" ? flags["agent"] : null;
+  const levelFilter = typeof flags["level"] === "string" ? flags["level"].toUpperCase() : null;
+
+  // Sample log entries
+  const logs: LogEntry[] = [
+    { timestamp: "14:23:07.123", level: "INFO", agent: "IntentClassifier", message: 'detected: "code_generation"' },
+    { timestamp: "14:23:07.456", level: "INFO", agent: "TaskPlanner", message: "decomposed into 5 tasks" },
+    { timestamp: "14:23:08.012", level: "SUCCESS", agent: "CodeGenerator", message: "generating auth module" },
+    { timestamp: "14:23:09.234", level: "SUCCESS", agent: "CodeGenerator", message: "artifacts: 3 files" },
+    { timestamp: "14:23:09.456", level: "INFO", agent: "TestAgent", message: "running test suite" },
+    { timestamp: "14:23:12.789", level: "WARN", agent: "TestAgent", message: "2 tests failed, triggering FixAgent" },
+    { timestamp: "14:23:13.012", level: "INFO", agent: "FixAgent", message: "patching auth/login.ts" },
+    { timestamp: "14:23:14.345", level: "SUCCESS", agent: "FixAgent", message: "patches applied" },
+    { timestamp: "14:23:14.567", level: "MUTATE", agent: "MutationAgent", message: "workflow optimized (+2 validation nodes)" },
+  ];
+
+  // Filter logs
+  let filteredLogs = logs;
+  if (agentFilter) {
+    filteredLogs = filteredLogs.filter(l => l.agent.toLowerCase().includes(agentFilter.toLowerCase()));
+  }
+  if (levelFilter) {
+    filteredLogs = filteredLogs.filter(l => l.level === levelFilter);
+  }
+
+  const lines: string[] = [];
+  
+  // Header
+  lines.push(`  ${colorize("TIME", "bright")}         ${colorize("LEVEL", "bright")}     ${colorize("AGENT", "bright")}              ${colorize("MESSAGE", "bright")}`);
+  lines.push("  " + "─".repeat(81));
+
+  // Log entries
+  for (const log of filteredLogs) {
+    const levelColor: Record<string, keyof typeof ansiColors> = {
+      "INFO": "cyan",
+      "WARN": "yellow",
+      "ERROR": "red",
+      "SUCCESS": "green",
+      "MUTATE": "magenta",
+    };
+    
+    lines.push(`  ${log.timestamp} ${colorize(log.level.padEnd(8), levelColor[log.level] || "white")} ${log.agent.padEnd(18)} ${log.message}`);
+  }
+
+  if (followMode) {
+    lines.push("");
+    lines.push(colorize("  [Following... Press Ctrl+C to stop]", "gray"));
+  }
+
+  console.log(drawBox(lines, width, "LOGS"));
+
+  if (followMode) {
+    // In a real implementation, this would stream new logs
+    console.log(colorize("\n  (Follow mode not yet implemented)", "gray"));
+  }
+}

package/src/hub/commands/memory.ts

@@ -0,0 +1,47 @@
+import { HubContext } from "../types.js";
+import { drawBox } from "../styles/borders.js";
+import { colorize, statusIndicators } from "../styles/colors.js";
+
+export async function showMemory(_args: string[], _flags: Record<string, string | boolean>, _context: HubContext): Promise<void> {
+  const width = 70;
+
+  const stats = {
+    graphNodes: 247,
+    vectorStoreSize: "1.2 MB",
+    cacheEntries: 47,
+    lastAccess: "2s ago",
+    recentMutations: 3,
+    cacheHitRate: "94%",
+  };
+
+  const lines: string[] = [];
+
+  // Stats
+  lines.push(`  ${colorize("Graph Memory Nodes:", "bright")}   ${colorize(stats.graphNodes.toString(), "cyan")} ${statusIndicators.online}`);
+  lines.push(`  ${colorize("Vector Store Size:", "bright")}    ${colorize(stats.vectorStoreSize, "cyan")}`);
+  lines.push(`  ${colorize("Cache Entries:", "bright")}        ${colorize(stats.cacheEntries.toString(), "cyan")}`);
+  lines.push(`  ${colorize("Last Access:", "bright")}          ${colorize(stats.lastAccess, "gray")}`);
+  lines.push(`  ${colorize("Recent Mutations:", "bright")}     ${colorize(`+${stats.recentMutations}`, "yellow")} ${statusIndicators.mutation}`);
+  lines.push(`  ${colorize("Cache Hit Rate:", "bright")}       ${colorize(stats.cacheHitRate, "green")}`);
+
+  lines.push("");
+  lines.push(colorize("  Sample Graph Structure:", "bright"));
+  lines.push("  " + "─".repeat(66));
+
+  // Visual graph representation
+  lines.push("");
+  lines.push(`    [action:code_gen]${statusIndicators.online}`);
+  lines.push(`           │`);
+  lines.push(`           ├───▶ [file:auth.ts]${statusIndicators.online}`);
+  lines.push(`           │           │`);
+  lines.push(`           │           ├───▶ [task:login]${statusIndicators.online}`);
+  lines.push(`           │           │`);
+  lines.push(`           │           └───▶ [test:auth]${statusIndicators.online}`);
+  lines.push(`           │                       │`);
+  lines.push(`           │                       │`);
+  lines.push(`           └───────────────────────┴───▶ [fix:patch_001]${statusIndicators.mutation}`);
+  lines.push("");
+  lines.push(colorize("  // QUANTUM_SEMANTIC_GRAPH_MEMORY", "gray"));
+
+  console.log(drawBox(lines, width, "MEMORY"));
+}

package/src/hub/commands/metrics.ts

@@ -0,0 +1,49 @@
+import { HubContext } from "../types.js";
+import { drawBox, drawProgressBar } from "../styles/borders.js";
+import { colorize } from "../styles/colors.js";
+import { padRight } from "../styles/typography.js";
+
+interface MetricInfo {
+  label: string;
+  value: string;
+  trend?: string;
+}
+
+export async function showMetrics(_args: string[], _flags: Record<string, string | boolean>, _context: HubContext): Promise<void> {
+  const width = 65;
+
+  const metrics: MetricInfo[] = [
+    { label: "Sessions", value: "12", trend: "↗" },
+    { label: "Avg Duration", value: "14.2s", trend: "▼ -12%" },
+    { label: "Success Rate", value: "96%", trend: "▲ +3%" },
+    { label: "Cost (USD)", value: "$0.002", trend: "→" },
+    { label: "Cache Savings", value: "67%", trend: "↗" },
+  ];
+
+  const topAgents = [
+    { name: "CodeGenerator", usage: 45 },
+    { name: "TestAgent", usage: 32 },
+    { name: "FixAgent", usage: 18 },
+    { name: "IntentClassifier", usage: 5 },
+  ];
+
+  const lines: string[] = [];
+
+  // General metrics
+  for (const metric of metrics) {
+    const trendColor = metric.trend?.includes("▲") ? "green" : metric.trend?.includes("▼") ? "green" : "gray";
+    lines.push(`  ${padRight(metric.label, 15)} ${colorize(metric.value.padEnd(12), "cyan")} ${colorize(metric.trend || "", trendColor)}`);
+  }
+
+  lines.push("");
+  lines.push(colorize("  Top Agents:", "bright"));
+  lines.push("  " + "─".repeat(61));
+
+  // Top agents with progress bars
+  for (const agent of topAgents) {
+    const bar = drawProgressBar(agent.usage, 20);
+    lines.push(`  ${padRight(agent.name, 18)} ${bar} ${colorize(`${agent.usage}%`, "yellow")}`);
+  }
+
+  console.log(drawBox(lines, width, "METRICS"));
+}