bosun 0.42.2 → 0.42.4

package/tui/app.mjs

@@ -1,12 +1,14 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import htm from "htm";
 import { Box, Text, useInput } from "ink";
 
 import wsBridge from "./lib/ws-bridge.mjs";
 import StatusHeader from "./components/status-header.mjs";
+import { readTuiHeaderConfig } from "./lib/header-config.mjs";
 import TasksScreen from "./screens/tasks.mjs";
 import AgentsScreen from "./screens/agents.mjs";
 import StatusScreen from "./screens/status.mjs";
+import { listTasksFromApi } from "../ui/tui/tasks-screen-helpers.js";
 
 const html = htm.bind(React.createElement);
 
@@ -16,51 +18,112 @@ const SCREENS = {
   agents: AgentsScreen,
 };
 
+function ScreenTabs({ screen }) {
+  const navItems = [
+    { key: "status", num: "1", label: "Status" },
+    { key: "tasks", num: "2", label: "Tasks" },
+    { key: "agents", num: "3", label: "Agents" },
+  ];
+
+  return html`
+    <${Box} paddingX=${1} borderStyle="single">
+      ${navItems.map((item, index) => html`
+        <${React.Fragment} key=${item.key}>
+          <${Text} inverse=${screen === item.key} color=${screen === item.key ? undefined : "cyan"}>
+            [${item.num}] ${item.label}
+          <//>
+          ${index < navItems.length - 1 ? html`<${Text} dimColor>  <//>` : null}
+        <//>
+      `)}
+      <${Text} dimColor>  [q] Quit<//>
+    <//>
+  `;
+}
+
+function upsertById(items, nextItem) {
+  const index = items.findIndex((item) => item.id === nextItem.id);
+  if (index === -1) return [nextItem, ...items];
+  const next = [...items];
+  next[index] = { ...next[index], ...nextItem };
+  return next;
+}
+
 export default function App({ host, port, connectOnly, initialScreen, refreshMs }) {
   const [screen, setScreen] = useState(initialScreen || "status");
   const [connected, setConnected] = useState(false);
+  const [connectionState, setConnectionState] = useState("offline");
   const [stats, setStats] = useState(null);
   const [sessions, setSessions] = useState([]);
   const [tasks, setTasks] = useState([]);
   const [error, setError] = useState(null);
+  const [refreshCountdownSec, setRefreshCountdownSec] = useState(
+    Math.max(0, Math.ceil(Number(refreshMs || 2000) / 1000)),
+  );
+  const [screenInputLocked, setScreenInputLocked] = useState(false);
+  const [headerConfig, setHeaderConfig] = useState(() => readTuiHeaderConfig());
+
+  const bridge = useMemo(
+    () => (typeof wsBridge === "function" ? wsBridge({ host, port, refreshMs }) : wsBridge),
+    [host, port, refreshMs],
+  );
+  const bridgeRef = useRef(bridge);
 
   useEffect(() => {
-    const bridge = wsBridge({ host, port });
+    let active = true;
+    bridgeRef.current = bridge;
+    setHeaderConfig(readTuiHeaderConfig(bridge?.configDir));
+
+    const resetRefreshCountdown = () => {
+      setRefreshCountdownSec(Math.max(0, Math.ceil(Number(refreshMs || 2000) / 1000)));
+    };
+    const refreshTasks = async () => {
+      try {
+        const nextTasks = await listTasksFromApi();
+        if (active) setTasks(nextTasks);
+      } catch (err) {
+        if (active) setError(String(err?.message || err || "Failed to load tasks"));
+      }
+    };
+
+    const unsubscribes = [];
+    const on = (eventName, handler) => {
+      const unsubscribe = bridge.on(eventName, handler);
+      unsubscribes.push(unsubscribe);
+    };
 
-    bridge.on("connect", () => {
+    on("connect", () => {
       setConnected(true);
+      setConnectionState("connected");
       setError(null);
+      resetRefreshCountdown();
+      void refreshTasks();
     });
-
-    bridge.on("disconnect", () => {
+    on("disconnect", () => {
       setConnected(false);
+      setConnectionState("reconnecting");
     });
-
-    bridge.on("error", (err) => {
-      setError(err.message);
+    on("reconnecting", () => {
+      setConnected(false);
+      setConnectionState("reconnecting");
     });
-
-    bridge.on("stats", (data) => {
+    on("error", (err) => {
+      const message = err?.message || String(err || "Connection failed");
+      setError(message);
+      if (String(message).includes("Max reconnection attempts")) {
+        setConnectionState("offline");
+      }
+    });
+    on("stats", (data) => {
       setStats(data);
+      resetRefreshCountdown();
     });
-
-    bridge.on("session:start", (session) => {
-      setSessions((prev) => [...prev, session]);
+    on("session:start", (session) => {
+      setSessions((prev) => upsertById(prev, session));
     });
-
-    bridge.on("session:update", (session) => {
-      setSessions((prev) => {
-        const existingIndex = prev.findIndex((candidate) => candidate.id === session.id);
-        if (existingIndex >= 0) {
-          const updated = [...prev];
-          updated[existingIndex] = session;
-          return updated;
-        }
-        return [session, ...prev];
-      });
+    on("session:update", (session) => {
+      setSessions((prev) => upsertById(prev, session));
     });
-
-    bridge.on("sessions:update", (payload) => {
+    on("sessions:update", (payload) => {
       const nextSessions = Array.isArray(payload?.sessions)
         ? payload.sessions
         : Array.isArray(payload)
@@ -68,175 +131,73 @@ export default function App({ host, port, connectOnly, initialScreen, refreshMs
           : [];
       setSessions(nextSessions);
     });
-
-    bridge.on("session:end", (session) => {
-      setSessions((prev) => prev.filter((candidate) => candidate.id !== session.id));
+    on("session:end", (session) => {
+      setSessions((prev) => prev.filter((item) => item.id !== session.id));
     });
-
-    bridge.on("task:update", (task) => {
-      setTasks((prev) => {
-        const idx = prev.findIndex((candidate) => candidate.id === task.id);
-        if (idx >= 0) {
-          const updated = [...prev];
-          updated[idx] = task;
-          return updated;
-        }
-        return [...prev, task];
-      });
+    on("tasks:update", () => {
+      void refreshTasks();
     });
-
-    bridge.on("task:create", (task) => {
-      setTasks((prev) => [...prev, task]);
+    on("task:update", (task) => {
+      setTasks((prev) => upsertById(prev, task));
     });
-
-    bridge.on("task:delete", (taskId) => {
+    on("task:create", (task) => {
+      setTasks((prev) => upsertById(prev, task));
+    });
+    on("task:delete", (taskId) => {
       setTasks((prev) => prev.filter((task) => task.id !== taskId));
     });
-
-    const applyRetryQueue = (retryData) => {
-      setStats((prev) => ({
-        ...(prev || {}),
-        retryQueue: retryData,
-      }));
-    };
-
-    const retryUnsubscribes = [];
-
-    retryUnsubscribes.push(bridge.on("retry:update", applyRetryQueue));
-    retryUnsubscribes.push(bridge.on("retry-queue-updated", applyRetryQueue));
+    on("retry:update", (retryQueue) => {
+      setStats((prev) => ({ ...(prev || {}), retryQueue }));
+    });
+    on("retry-queue-updated", (retryQueue) => {
+      setStats((prev) => ({ ...(prev || {}), retryQueue }));
+    });
 
     bridge.connect();
+    void refreshTasks();
 
     return () => {
-      retryUnsubscribes.forEach((unsubscribe) => {
-        if (typeof unsubscribe === "function") {
-          unsubscribe();
-        }
-      });
-
-    return () => {
-      retryUnsubscribes.forEach((unsubscribe) => {
-        if (typeof unsubscribe === "function") {
-          unsubscribe();
-        }
-      });
-
-    return () => {
-      retryUnsubscribes.forEach((unsubscribe) => {
-        if (typeof unsubscribe === "function") {
-          unsubscribe();
-        }
-      });
-
-    return () => {
-      retryUnsubscribes.forEach((unsubscribe) => {
-        if (typeof unsubscribe === "function") {
-          unsubscribe();
-        }
-      });
-
-    return () => {
-      retryUnsubscribes.forEach((unsubscribe) => {
-        if (typeof unsubscribe === "function") {
-          unsubscribe();
-        }
-      });
-
-    return () => {
-      retryUnsubscribes.forEach((unsubscribe) => {
-        if (typeof unsubscribe === "function") {
-          unsubscribe();
-        }
-      });
-
-    return () => {
-      retryUnsubscribes.forEach((unsubscribe) => {
-        if (typeof unsubscribe === "function") {
-          unsubscribe();
-        }
-      });
-
-    return () => {
-      retryUnsubscribes.forEach((unsubscribe) => {
-        if (typeof unsubscribe === "function") {
-          unsubscribe();
-        }
-      });
-
-    return () => {
-      retryUnsubscribes.forEach((unsubscribe) => {
-        if (typeof unsubscribe === "function") {
-          unsubscribe();
-        }
-      });
-
-    return () => {
-      retryUnsubscribes.forEach((unsubscribe) => {
-        if (typeof unsubscribe === "function") {
-          unsubscribe();
-        }
-      });
-
-    return () => {
-      retryUnsubscribes.forEach((unsubscribe) => {
-        if (typeof unsubscribe === "function") {
-          unsubscribe();
-        }
-      });
-
-    return () => {
-      retryUnsubscribes.forEach((unsubscribe) => {
-        if (typeof unsubscribe === "function") {
-          unsubscribe();
-        }
-      });
-
-    return () => {
-      retryUnsubscribes.forEach((unsubscribe) => {
-        if (typeof unsubscribe === "function") {
-          unsubscribe();
-        }
-      });
-
-    return () => {
-      retryUnsubscribes.forEach((unsubscribe) => {
-        if (typeof unsubscribe === "function") {
-          unsubscribe();
-        }
+      active = false;
+      unsubscribes.forEach((unsubscribe) => {
+        if (typeof unsubscribe === "function") unsubscribe();
       });
       bridge.disconnect();
+      bridgeRef.current = null;
     };
-  }, [host, port]);
+  }, [bridge, refreshMs]);
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setRefreshCountdownSec((prev) => Math.max(0, prev - 1));
+    }, 1000);
+    return () => clearInterval(intervalId);
+  }, []);
 
   const handleKeyPress = useCallback((key) => {
-    if (key === "q") {
-      process.exit(0);
-    }
-    if (key === "1") {
-      setScreen("status");
-    }
-    if (key === "2") {
-      setScreen("tasks");
-    }
-    if (key === "3") {
-      setScreen("agents");
-    }
+    if (key === "q") process.exit(0);
+    if (key === "1") setScreen("status");
+    if (key === "2") setScreen("tasks");
+    if (key === "3") setScreen("agents");
   }, []);
 
   useInput((input) => {
+    if (screenInputLocked) return;
     handleKeyPress(input);
   });
 
   const ScreenComponent = SCREENS[screen] || StatusScreen;
-  const wsBridgeInstance = typeof wsBridge === "function" ? wsBridge({ host, port }) : wsBridge;
 
   return html`
     <${Box} flexDirection="column" minHeight=${0}>
       <${StatusHeader}
         stats=${stats}
         connected=${connected}
-        screen=${screen}
+        connectionState=${connectionState}
+        projectLabel=${headerConfig.projectLabel}
+        configuredProviders=${headerConfig.configuredProviders}
+        refreshCountdownSec=${refreshCountdownSec}
       />
+      <${ScreenTabs} screen=${screen} />
       <${Box} flexDirection="column" flexGrow=${1}>
         ${error
           ? html`
@@ -249,16 +210,15 @@ export default function App({ host, port, connectOnly, initialScreen, refreshMs
           stats=${stats}
           sessions=${sessions}
           tasks=${tasks}
-          wsBridge=${wsBridgeInstance}
+          wsBridge=${bridgeRef.current}
           host=${host}
           port=${port}
           connectOnly=${connectOnly}
           refreshMs=${refreshMs}
+          onTasksChange=${setTasks}
+          onInputCaptureChange=${setScreenInputLocked}
         />
       <//>
-      <${Box} paddingX=${1} borderStyle="single">
-        <${Text} dimColor>[1] Status [2] Tasks [3] Agents [q] Quit<//>
-      <//>
     <//>
   `;
 }

package/tui/components/status-header.mjs

@@ -4,99 +4,202 @@ import { Box, Text } from "ink";
 
 const html = htm.bind(React.createElement);
 
-const STATUS_COLORS = {
-  connected: "green",
-  disconnected: "red",
-  active: "green",
+const PROVIDER_ORDER = ["claude", "codex", "gemini", "copilot"];
+const PROVIDER_ALIASES = {
+  anthropic: "claude",
+  claude: "claude",
+  openai: "codex",
+  azure: "codex",
+  codex: "codex",
+  google: "gemini",
+  gemini: "gemini",
+  copilot: "copilot",
+  github: "copilot",
 };
+const TONE_COLORS = {
+  normal: undefined,
+  dim: undefined,
+  warning: "yellow",
+  danger: "red",
+};
+const CONNECTION_STATES = {
+  connected: { color: "green", label: "Connected" },
+  reconnecting: { color: "yellow", label: "Reconnecting" },
+  offline: { color: "red", label: "Offline" },
+};
+
+function toNumber(value, fallback = 0) {
+  const numeric = Number(value);
+  return Number.isFinite(numeric) ? numeric : fallback;
+}
+
+function padMetric(value, width = 0) {
+  return String(value ?? "").padStart(width, " ");
+}
+
+function formatCompactMetric(value) {
+  const numeric = Math.max(0, toNumber(value, 0));
+  if (numeric >= 1_000_000) return `${(numeric / 1_000_000).toFixed(1)}m`;
+  if (numeric >= 1_000) return `${(numeric / 1_000).toFixed(1)}k`;
+  if (numeric >= 100) return String(Math.round(numeric));
+  if (numeric >= 10) return Number(numeric.toFixed(1)).toString();
+  return Number(numeric.toFixed(2)).toString();
+}
 
 function formatDuration(ms) {
-  const safe = Math.max(0, Number(ms || 0));
-  const seconds = Math.floor(safe / 1000);
-  const minutes = Math.floor(seconds / 60);
-  const hours = Math.floor(minutes / 60);
-  const days = Math.floor(hours / 24);
-  if (days > 0) return `${days}d ${hours % 24}h`;
-  if (hours > 0) return `${hours}h ${minutes % 60}m`;
-  if (minutes > 0) return `${minutes}m ${seconds % 60}s`;
+  const safeMs = Math.max(0, toNumber(ms, 0));
+  const totalSeconds = Math.floor(safeMs / 1000);
+  const days = Math.floor(totalSeconds / 86400);
+  const hours = Math.floor((totalSeconds % 86400) / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+  if (days > 0) return `${days}d ${hours}h`;
+  if (hours > 0) return `${hours}h ${minutes}m`;
+  if (minutes > 0) return `${minutes}m ${seconds}s`;
   return `${seconds}s`;
 }
 
-function formatCost(usd) {
-  const value = Number(usd || 0);
-  return `$${Number.isFinite(value) ? value.toFixed(2) : "0.00"}`;
+function normalizeProviderKey(provider) {
+  const normalized = String(provider || "").trim().toLowerCase();
+  return PROVIDER_ALIASES[normalized] || normalized;
 }
 
-export default function StatusHeader({ stats, connected, screen }) {
-  const s = {
-    uptimeMs: 0,
-    runtimeMs: 0,
-    totalCostUsd: 0,
-    totalSessions: 0,
-    activeSessions: 0,
-    totalTasks: 0,
-    activeTasks: 0,
-    completedTasks: 0,
-    failedTasks: 0,
-    retryQueue: { count: 0 },
-    workflows: { active: 0, total: 0 },
-    agents: { online: 0, total: 0 },
-    ...(stats || {}),
-  };
+function formatRateValue(value, unit = "min") {
+  if (value == null) return "n/a";
+  return `${toNumber(value, 0)}/${unit}`;
+}
 
-  const navItems = [
-    { key: "status", num: "1", label: "Status" },
-    { key: "tasks", num: "2", label: "Tasks" },
-    { key: "agents", num: "3", label: "Agents" },
+function resolveProviderTone(bucket = {}) {
+  const values = [bucket.primary, bucket.secondary, bucket.credits]
+    .map((value) => (value == null ? null : toNumber(value, NaN)))
+    .filter((value) => Number.isFinite(value));
+  if (values.some((value) => value <= 0)) return "danger";
+
+  const limits = [
+    [bucket.primary, bucket.primaryLimit],
+    [bucket.secondary, bucket.secondaryLimit],
+    [bucket.credits, bucket.creditsLimit],
   ];
+  if (limits.some(([remaining, limit]) => Number.isFinite(Number(remaining)) && Number.isFinite(Number(limit)) && Number(limit) > 0 && (Number(remaining) / Number(limit)) <= 0.2)) {
+    return "warning";
+  }
+  if (values.some((value) => value <= 20)) return "warning";
+  return "normal";
+}
+
+export function normalizeHeaderRateLimits(rateLimits = {}, configuredProviders = {}) {
+  const normalized = {};
+  for (const [provider, bucket] of Object.entries(rateLimits || {})) {
+    const key = normalizeProviderKey(provider);
+    if (!PROVIDER_ORDER.includes(key) || !bucket || typeof bucket !== "object") continue;
+    normalized[key] = {
+      primary: bucket.primary == null ? null : toNumber(bucket.primary, 0),
+      secondary: bucket.secondary == null ? null : toNumber(bucket.secondary, 0),
+      credits: bucket.credits == null ? null : toNumber(bucket.credits, 0),
+      primaryLimit: bucket.primaryLimit == null ? null : toNumber(bucket.primaryLimit, 0),
+      secondaryLimit: bucket.secondaryLimit == null ? null : toNumber(bucket.secondaryLimit, 0),
+      creditsLimit: bucket.creditsLimit == null ? null : toNumber(bucket.creditsLimit, 0),
+      unit: String(bucket.unit || "min").trim() || "min",
+    };
+  }
+
+  return PROVIDER_ORDER.reduce((acc, provider) => {
+    const configured = configuredProviders[provider] === true || Boolean(normalized[provider]);
+    const bucket = normalized[provider] || null;
+    if (!configured || !bucket) {
+      acc[provider] = {
+        provider,
+        configured,
+        tone: "dim",
+        label: `${provider} n/a`,
+      };
+      return acc;
+    }
+
+    acc[provider] = {
+      provider,
+      configured,
+      tone: resolveProviderTone(bucket),
+      label: `${provider} primary ${formatRateValue(bucket.primary, bucket.unit)} | secondary ${formatRateValue(bucket.secondary, bucket.unit)} | credits ${bucket.credits == null ? "n/a" : toNumber(bucket.credits, 0)}`,
+    };
+    return acc;
+  }, {});
+}
+
+export function buildStatusHeaderModel({
+  stats = {},
+  configuredProviders = {},
+  connectionState = "offline",
+  projectLabel = "No project",
+  refreshCountdownSec = 0,
+} = {}) {
+  const activeAgents = Math.max(0, toNumber(stats?.activeAgents, 0));
+  const maxAgents = Math.max(0, toNumber(stats?.maxAgents, 0));
+  const throughputTps = Math.max(0, toNumber(stats?.throughputTps, 0));
+  const uptimeMs = Math.max(0, toNumber(stats?.uptimeMs, 0));
+  const tokensIn = Math.max(0, toNumber(stats?.tokensIn, 0));
+  const tokensOut = Math.max(0, toNumber(stats?.tokensOut, 0));
+  const tokensTotal = Math.max(0, toNumber(stats?.tokensTotal ?? stats?.totalTokens, tokensIn + tokensOut));
+  const providers = normalizeHeaderRateLimits(stats?.rateLimits || {}, configuredProviders);
+  const connection = CONNECTION_STATES[connectionState] || CONNECTION_STATES.offline;
+
+  return {
+    row1: `Agents: ${padMetric(activeAgents, 2)}/${padMetric(maxAgents, 2)} | Throughput: ${throughputTps} tps | Runtime: ${formatDuration(uptimeMs)} | Tokens: in ${formatCompactMetric(tokensIn)} | out ${formatCompactMetric(tokensOut)} | total ${formatCompactMetric(tokensTotal)}`,
+    row2: PROVIDER_ORDER.map((provider) => providers[provider]),
+    row3: {
+      connection,
+      projectLabel: String(projectLabel || "").trim() || "No project",
+      refreshLabel: `Next refresh: ${Math.max(0, Math.trunc(toNumber(refreshCountdownSec, 0)))}s`,
+    },
+  };
+}
+
+export default function StatusHeader({
+  stats,
+  connected,
+  connectionState,
+  projectLabel,
+  configuredProviders,
+  refreshCountdownSec,
+}) {
+  const resolvedConnectionState = connectionState || (connected ? "connected" : "offline");
+  const model = buildStatusHeaderModel({
+    stats,
+    configuredProviders,
+    connectionState: resolvedConnectionState,
+    projectLabel,
+    refreshCountdownSec,
+  });
+  const connectionDot = resolvedConnectionState === "reconnecting" && refreshCountdownSec % 2 === 0
+    ? "◌"
+    : "●";
 
   return html`
-    <${Box} flexDirection="column" borderStyle="round" paddingX=${1}>
-      <${Box} justifyContent="space-between">
-        <${Box}>
-          <${Text} bold>Bosun TUI<//>
-          <${Text} dimColor> | <//>
-          <${Text}
-            color=${connected ? STATUS_COLORS.connected : STATUS_COLORS.disconnected}
-            bold=${!connected}
-          >
-            ${connected ? "Connected" : "Disconnected"}
-          <//>
-        <//>
-        <${Box}>
-          <${Text} dimColor>Uptime: <//>
-          <${Text}>${formatDuration(s.uptimeMs)}<//>
-          <${Text} dimColor> | Runtime: <//>
-          <${Text}>${formatDuration(s.runtimeMs)}<//>
-          <${Text} dimColor> | Cost: <//>
-          <${Text}>${formatCost(s.totalCostUsd)}<//>
-        <//>
-      <//>
+    <${Box} flexDirection="column" paddingX=${1} paddingTop=${1}>
       <${Box}>
-        <${Text} dimColor>Sessions: <//>
-        <${Text} color=${s.activeSessions > 0 ? STATUS_COLORS.active : undefined}>
-          ${s.activeSessions}
-        <//>
-        <${Text} dimColor>/${s.totalSessions}  Tasks: <//>
-        <${Text} color=${s.activeTasks > 0 ? STATUS_COLORS.active : undefined}>
-          ${s.activeTasks}
-        <//>
-        <${Text} dimColor>
-          /${s.totalTasks}  Done:${s.completedTasks}  Fail:${s.failedTasks}
-           | Retry:${s.retryQueue?.count || 0}
-           | WF:${s.workflows?.active || 0}/${s.workflows?.total || 0}
-           | Agents:${s.agents?.online || 0}/${s.agents?.total || 0}
-        <//>
+        <${Text}>${model.row1}<//>
       <//>
-      <${Box}>
-        ${navItems.map((item) => html`
-          <${Box} key=${item.key} marginRight=${2}>
-            <${Text} inverse=${screen === item.key} color=${screen === item.key ? undefined : "cyan"}>
-              [${item.num}] ${item.label}
+      <${Box} marginTop=${1}>
+        ${model.row2.map((provider, index) => html`
+          <${React.Fragment} key=${provider.provider}>
+            <${Text}
+              color=${TONE_COLORS[provider.tone]}
+              dimColor=${provider.tone === "dim"}
+            >
+              ${provider.label}
             <//>
+            ${index < model.row2.length - 1 ? html`<${Text} dimColor> | <//>` : null}
           <//>
         `)}
       <//>
+      <${Box} marginTop=${1}>
+        <${Text} color=${model.row3.connection.color}>${connectionDot}<//>
+        <${Text}> ${model.row3.connection.label}<//>
+        <${Text} dimColor> | Project: <//>
+        <${Text}>${model.row3.projectLabel}<//>
+        <${Text} dimColor> | <//>
+        <${Text}>${model.row3.refreshLabel}<//>
+      <//>
     <//>
   `;
 }