hermes-agent/web/src/components/PlatformsCard.tsx

import { AlertTriangle, PowerOff, Radio, Wifi, WifiOff } from "lucide-react";
import type { PlatformStatus } from "@/lib/api";
import { isoTimeAgo } from "@/lib/utils";
import { Badge } from "@nous-research/ui/ui/components/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@nous-research/ui/ui/components/card";
import { useI18n } from "@/i18n";

export function PlatformsCard({ platforms }: PlatformsCardProps) {
  const { t } = useI18n();
  const platformStateBadge: Record<
    string,
    { tone: "success" | "warning" | "destructive" | "outline"; label: string }
  > = {
    connected: { tone: "success", label: t.status.connected },
    disconnected: { tone: "warning", label: t.status.disconnected },
    disabled: { tone: "outline", label: t.status.disabled ?? "Disabled" },
    fatal: { tone: "destructive", label: t.status.error },
  };

  return (
    <Card>
      <CardHeader>
        <div className="flex items-center gap-2">
          <Radio className="h-5 w-5 text-muted-foreground" />
          <CardTitle className="text-base">
            {t.status.connectedPlatforms}
          </CardTitle>
        </div>
      </CardHeader>

      <CardContent className="grid gap-3">
        {platforms.map(([name, info]) => {
          const display = platformStateBadge[info.state] ?? {
            tone: "outline" as const,
            label: info.state,
          };
          const IconComponent =
            info.state === "connected"
              ? Wifi
              : info.state === "fatal"
                ? AlertTriangle
                : info.state === "disabled"
                  ? PowerOff
                  : WifiOff;

          return (
            <div
              key={name}
              className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 border border-border p-3 w-full"
            >
              <div className="flex items-center gap-3 min-w-0 w-full">
                <IconComponent
                  className={`h-4 w-4 shrink-0 ${
                    info.state === "connected"
                      ? "text-success"
                      : info.state === "fatal"
                        ? "text-destructive"
                        : info.state === "disabled"
                          ? "text-muted-foreground"
                          : "text-warning"
                  }`}
                />

                <div className="flex flex-col gap-0.5 min-w-0">
                  <span className="font-mondwest normal-case text-sm font-medium capitalize truncate">
                    {name}
                  </span>

                  {info.error_message && (
                    <span
                      className={`font-mondwest normal-case text-xs ${
                        info.state === "disabled"
                          ? "text-muted-foreground"
                          : "text-destructive"
                      }`}
                    >
                      {info.error_message}
                    </span>
                  )}

                  {info.updated_at && (
                    <span className="font-mondwest normal-case text-xs text-muted-foreground">
                      {t.status.lastUpdate}: {isoTimeAgo(info.updated_at)}
                    </span>
                  )}
                </div>
              </div>

              <Badge
                tone={display.tone}
                className="shrink-0 self-start sm:self-center"
              >
                {display.tone === "success" && (
                  <span className="mr-1 inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-current" />
                )}
                {display.label}
              </Badge>
            </div>
          );
        })}
      </CardContent>
    </Card>
  );
}

interface PlatformsCardProps {
  platforms: [string, PlatformStatus][];
}