hyperhive/frontend/packages/swarm-ui/src/agent/roster/AgentCard.tsx

// <AgentCard> — one card per roster agent (mara: "main view: name,
// status, message, wanted" / "message as second line" / "more like
// card per agent") — the FilterableView `view === "cards"` alternative
// to the original `Table`, not its replacement (see `AgentsPage`'s own
// comment). Clicking a card opens a detail panel repeating this same
// info plus what doesn't fit here (hive, config-PR link, matrix
// link-account) — mara: "the info from main list should be included in
// the agent view" too, not just the leftovers.
//
// Built on the shared `Card` primitive (`ui/card/`) for the clickable/
// selectable-container mechanics — the `stopPropagation` wrapper around
// `WantedMenu` below keeps its own clicks (mouse or keyboard-synthesized,
// `WantedMenu` hosts real `<button>`s) from also firing `Card`'s
// `onClick` and opening the detail panel.
import { useState } from "preact/hooks";
import { Badge } from "@hive/shared/badge.js";
import type { ProblemDetails } from "@hive/shared/api-error.js";
import { Card } from "../../ui/card/Card.js";
import { RelativeTime } from "../../ui/relative-time/RelativeTime.js";
import { AgentIcon } from "../AgentIcon.js";
import { ClaudeLoginDialog } from "../claude-login/ClaudeLoginDialog.js";
import { FRESHNESS, showsLoginNeeded, type AgentRow } from "../AgentTypes.js";
import { WantedMenu } from "./WantedMenu.js";
import "./AgentCard.css";

export function AgentCard({
  row,
  pending,
  error,
  selected,
  onSelectUp,
  onSelectOffline,
  onSelectPaused,
  onOpenDetail,
}: {
  row: AgentRow;
  pending: boolean;
  error: ProblemDetails | undefined;
  /** This row is the one currently shown in the detail panel — a
   * highlight only (the panel itself is the source of truth), so a
   * page-refresh landing on a still-valid selection reads as obviously
   * "that one" rather than a silent selection nothing marks. */
  selected: boolean;
  onSelectUp: (row: AgentRow) => void;
  onSelectOffline: (row: AgentRow) => void;
  onSelectPaused: (row: AgentRow) => void;
  onOpenDetail: (row: AgentRow) => void;
}) {
  const { tone, label } = FRESHNESS[row.freshness];
  const [loggingIn, setLoggingIn] = useState(false);
  return (
    <Card selected={selected} onClick={() => onOpenDetail(row)}>
      <div class="ui-agent-card-row">
        <AgentIcon name={row.name} />
        <div class="ui-agent-card-body">
          <div class="ui-agent-card-line1">
            <span class="ui-agent-card-name">{row.name}</span>
            <Badge
              tone={tone}
              title={
                row.freshness === "unknown"
                  ? "reported by its hive but not registered in swarm-level identity — needs migration"
                  : undefined
              }
              value={
                <>
                  {label}
                  {row.last_seen_unix !== null ? (
                    <>
                      {" "}
                      (<RelativeTime epochMs={row.last_seen_unix * 1000} />)
                    </>
                  ) : null}
                </>
              }
            />
            {showsLoginNeeded(row) ? (
              <span
                class="ui-agent-card-login"
                onClick={(e) => e.stopPropagation()}
              >
                <Badge
                  tone="warning"
                  value="login needed"
                  title="the agent's claude has no session; its turns wait until it is logged in"
                />
                <Badge
                  variant="quiet"
                  value="log in"
                  title={`log ${row.name} in to claude from here`}
                  onClick={() => setLoggingIn(true)}
                />
                {loggingIn ? (
                  <ClaudeLoginDialog
                    agent={row.name}
                    onClose={() => setLoggingIn(false)}
                  />
                ) : null}
              </span>
            ) : null}
            <span
              class="ui-agent-card-wanted"
              onClick={(e) => e.stopPropagation()}
            >
              <WantedMenu
                row={row}
                pending={pending}
                showDestroy={false}
                onSelectUp={onSelectUp}
                onSelectOffline={onSelectOffline}
                onSelectPaused={onSelectPaused}
              />
              {error ? (
                <Badge
                  tone="negative"
                  value="failed"
                  title={error.detail ?? "the declaration failed"}
                />
              ) : null}
            </span>
          </div>
          <div class="ui-agent-card-message">
            {row.snapshot?.status_text ?? "—"}
          </div>
        </div>
      </div>
    </Card>
  );
}