supervisor

  on("ui.render", { component: "AbovePrompt", surface: "terminal" }, async ($, e, next) => {
    const { Box, Text } = $.ui.resolve(e);
    const width = Math.max(40, (e.props && e.props.bodyColumns ? e.props.bodyColumns : 100) - 4);
    const u = usageBits();
    const t = totalsLine();
    const r = state.lastRoute;
    const routeText = r
      ? "ROUTE " + r.type + "  " + (r.requested === undefined ? "inherit" : r.requested) + " \u2192 "
        + (r.action === "deny" ? "DENIED" : r.model) + "  [" + r.reasons.join(", ") + "]"
      : "ROUTE none yet \u00b7 capability graph fable>opus>sonnet>haiku, advisor = +1 rung";
    const live = liveAgents().slice(-4).map(function (a, i) {
      return (
        <Text key={"l" + i} color="green" wrap="truncate-end">
          {("LIVE  " + shortId(a.agentId) + " " + a.type + " " + a.model + " calls=" + a.calls + "/" + state.maxCalls
            + " tok=" + k(a.tokens) + " (reserved " + k(a.reserved) + ")").slice(0, width)}
        </Text>
      );
    });
    const done = state.order.map(function (id) { return state.agents[id]; })
      .filter(function (a) { return a && a.settled; }).slice(-3).map(function (a, i) {
        const dec = a.declared;
        return (
          <Text key={"d" + i} dimColor wrap="truncate-end">
            {("DONE  " + shortId(a.agentId) + " " + a.type + " " + a.model + " calls=" + a.calls
              + " measured=" + k(a.measured) + (dec === null ? " (no # EST:)" : " vs declared " + k(dec))).slice(0, width)}
          </Text>
        );
      });
    return (
      <Box flexDirection="column" borderStyle="round" borderColor="cyan" paddingX={1}>
        <Text bold color="cyan">
          {("SUBAGENT SUPERVISOR  spawns=" + state.totals.spawns + " rewritten=" + state.totals.rewrites
            + " denied=" + state.totals.denies + " live=" + liveAgents().length
            + "  \u00b7 reserved " + k(t.reserved) + " / charged " + k(t.measured)
            + "  \u00b7 5h " + u.five + "  \u00b7 " + u.cost).slice(0, width)}
        </Text>
        <Text color={r && r.action === "deny" ? "red" : r && r.action === "rewrite" ? "yellow" : "gray"} wrap="truncate-end">
          {routeText.slice(0, width)}
        </Text>
        {live}
        {done}
      </Box>
    );
  });