// <AgentStateRow> — an agent's turn state, whether it is paused, and the
// tokens in its context and billed, as the details table's "state" row. The
// terminal preview below the table carries no badges of its own (the full
// terminal tab does), so this is where the panel says what the agent is doing.
// Follows the agent's state stream, which announces on a change and once a
// minute, so the row reads "waiting" until the first report lands.
import {
  StateBadges,
  termPaths,
  tokenTotal,
} from "../terminal/AgentTermPreview.js";
import { useSwarmAgentStateStream } from "../terminal/useSwarmAgentStateStream.js";
import "./AgentStateRow.css";

export function AgentStateRow({ agent }: { agent: string }) {
  const { header } = useSwarmAgentStateStream(termPaths(agent).state);
  if (!header) {
    return (
      <span
        class="ui-agent-state-waiting"
        title="the agent reports its state when it changes, and once a minute"
      >
        waiting for the agent's report…
      </span>
    );
  }
  return (
    <div class="ui-agent-state-row">
      <StateBadges
        header={header}
        ctx={tokenTotal(header.ctx_usage)}
        cost={tokenTotal(header.cost_usage)}
        withModel={false}
      />
    </div>
  );
}