AgentHub/client/src/components/Sagi/SagiInfo.tsx

/**
 * @file SagiInfo.tsx
 * @description What the pet knows, shown inside its chat window (`PetChat`):
 *   the name you rename by clicking it (`PetNameButton`), and a status strip
 *   (`SagiInfo`) — live / waiting / errored counts and the connection state
 *   always in sight, and on expanding, the sessions that need the user, by
 *   name, plus Mute and Clear alerts. Pure presentational: all data and
 *   behavior are injected by the container (`Sagi.tsx`).
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

import { useState } from "react";
import {
  AlertTriangle,
  Bell,
  BellOff,
  ChevronDown,
  ChevronRight,
  Hourglass,
  Radio,
  Trash2,
  type LucideIcon,
} from "lucide-react";
import { useTranslation } from "react-i18next";
import { subjectLabel, type AttentionItem, type SagiStatus, type SagiSubject } from "./brain";
import { PET_NAME_MAX } from "./prefs";
import { isSubmitEnter } from "../../lib/keys";

/** How many sessions the "Needs you" list shows before pointing at Sessions. */
const ATTENTION_SHOWN = 4;

/** The pet's name; a click renames it in place (empty = its own name). */
export function PetNameButton({
  name,
  ownName,
  nickname,
  onRename,
}: {
  name: string;
  ownName: string;
  nickname: string;
  onRename: (name: string) => void;
}) {
  const { t } = useTranslation("settings");
  // The name being typed, or null while not renaming.
  const [renaming, setRenaming] = useState<string | null>(null);
  const save = () => {
    if (renaming === null) return;
    onRename(renaming);
    setRenaming(null);
  };
  return renaming === null ? (
    <button
      type="button"
      className="max-w-full truncate rounded px-0.5 text-sm font-semibold text-fg-primary hover:bg-surface-4"
      onClick={() => setRenaming(nickname)}
      aria-label={t("sagi.panel.rename", { name })}
      title={t("sagi.panel.rename", { name })}
    >
      {name}
    </button>
  ) : (
    <input
      autoFocus
      className="w-28 rounded border border-accent bg-surface-1 px-1 py-0.5 text-sm text-fg-primary focus:outline-none"
      value={renaming}
      maxLength={PET_NAME_MAX}
      placeholder={ownName}
      aria-label={t("sagi.panel.renameLabel")}
      title={t("sagi.panel.renameHint")}
      onChange={(e) => setRenaming(e.target.value)}
      onBlur={save}
      onKeyDown={(e) => {
        if (isSubmitEnter(e)) {
          e.preventDefault();
          save();
        } else if (e.key === "Escape") {
          // Esc cancels the rename only, not the whole chat.
          e.stopPropagation();
          e.nativeEvent.stopImmediatePropagation();
          setRenaming(null);
        }
      }}
    />
  );
}

interface SagiInfoProps {
  attention: ReadonlyArray<AttentionItem>;
  onOpenSession: (s: SagiSubject) => void;
  status: SagiStatus;
  muted: boolean;
  onToggleMute: () => void;
  onClearAlerts: () => void;
  onNavigate: (route: string) => void;
  /** Expanded at first: the sessions that need the user and the actions. */
  defaultOpen?: boolean;
}

/** The status strip under the chat's header. */
export function SagiInfo({
  attention,
  onOpenSession,
  status,
  muted,
  onToggleMute,
  onClearAlerts,
  onNavigate,
  defaultOpen = false,
}: SagiInfoProps) {
  const { t } = useTranslation("settings");
  const [open, setOpen] = useState(defaultOpen);
  const Chevron = open ? ChevronDown : ChevronRight;
  return (
    <div className="pet-chat-info border-b border-border/60 px-3 py-2">
      <button
        type="button"
        className="flex w-full items-center gap-1.5 rounded-lg text-left"
        onClick={() => setOpen((v) => !v)}
        aria-expanded={open}
        aria-label={t("sagi.chat.status")}
        title={t("sagi.chat.status")}
      >
        <StatChip
          icon={Radio}
          label={t("sagi.panel.statLive")}
          value={status.liveCount}
          tone={status.liveCount > 0 ? "accent" : "muted"}
        />
        <StatChip
          icon={Hourglass}
          label={t("sagi.panel.statWaiting")}
          value={status.waitingCount}
          tone={status.waitingCount > 0 ? "amber" : "muted"}
        />
        <StatChip
          icon={AlertTriangle}
          label={t("sagi.panel.statErrored")}
          value={status.errorCount}
          tone={status.errorCount > 0 ? "red" : "muted"}
        />
        <span
          className={`ml-auto inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-[10px] font-medium ${
            status.connected
              ? "bg-status-success/15 text-status-success"
              : "bg-status-danger/15 text-status-danger"
          }`}
        >
          <span
            className={`inline-block h-1.5 w-1.5 rounded-full ${
              status.connected ? "bg-status-success" : "bg-status-danger"
            }`}
            aria-hidden
          />
          {status.connected ? t("sagi.panel.live") : t("sagi.panel.offline")}
        </span>
        <Chevron size={13} className="shrink-0 text-fg-muted" aria-hidden />
      </button>

      {open && (
        <div className="mt-2 max-h-48 overflow-y-auto">
          {/* the sessions that need the user, by name */}
          {attention.length > 0 && (
            <div className="mb-2">
              <div className="mb-1 text-[10px] font-medium uppercase tracking-wider text-fg-muted">
                {t("sagi.panel.attention")}
              </div>
              <ul className="space-y-1">
                {attention.slice(0, ATTENTION_SHOWN).map((item) => (
                  <li key={item.id}>
                    <button
                      className="group flex w-full items-center gap-2 rounded-lg bg-surface-1 px-2 py-1.5 text-left text-xs transition-colors hover:bg-surface-4"
                      onClick={() => onOpenSession(item)}
                      title={item.cwd ?? item.id}
                    >
                      {item.kind === "error" ? (
                        <AlertTriangle
                          size={13}
                          className="shrink-0 text-status-danger"
                          aria-hidden
                        />
                      ) : (
                        <Hourglass size={13} className="shrink-0 text-status-warning" aria-hidden />
                      )}
                      <span className="min-w-0 flex-1 truncate text-fg-secondary group-hover:text-fg-primary">
                        {subjectLabel(item)}
                      </span>
                      <span className="shrink-0 text-[10px] text-fg-muted">
                        {item.kind === "error"
                          ? t("sagi.panel.attentionError")
                          : t("sagi.panel.attentionWaiting")}
                      </span>
                      <ChevronRight size={12} className="shrink-0 text-fg-muted" aria-hidden />
                    </button>
                  </li>
                ))}
              </ul>
              {attention.length > ATTENTION_SHOWN && (
                <button
                  className="mt-1 text-[11px] text-accent hover:underline"
                  onClick={() => onNavigate("/sessions")}
                >
                  {t("sagi.panel.attentionMore", { count: attention.length - ATTENTION_SHOWN })}
                </button>
              )}
            </div>
          )}

          <div className="grid grid-cols-2 gap-1.5">
            <ActionButton
              icon={muted ? BellOff : Bell}
              label={muted ? t("sagi.panel.unmute") : t("sagi.panel.mute")}
              onClick={onToggleMute}
            />
            <ActionButton
              icon={Trash2}
              label={t("sagi.panel.clearAlerts")}
              disabled={status.errorCount === 0}
              onClick={onClearAlerts}
            />
          </div>
        </div>
      )}
    </div>
  );
}

interface Tone {
  wrap: string;
  value: string;
  icon: string;
}

const TONE_MUTED: Tone = {
  wrap: "border-border bg-surface-1",
  value: "text-fg-secondary",
  icon: "text-fg-muted",
};

const TONES: Record<string, Tone> = {
  accent: { wrap: "border-accent/30 bg-accent/10", value: "text-fg-primary", icon: "text-accent" },
  amber: {
    wrap: "border-status-warning/30 bg-status-warning/10",
    value: "text-status-warning",
    icon: "text-status-warning",
  },
  red: {
    wrap: "border-status-danger/30 bg-status-danger/10",
    value: "text-status-danger",
    icon: "text-status-danger",
  },
  muted: TONE_MUTED,
};

/** One count, compact: icon, number, label on one line. */
function StatChip({
  icon: Icon,
  label,
  value,
  tone,
}: {
  icon: LucideIcon;
  label: string;
  value: number;
  tone: string;
}) {
  const t = TONES[tone] ?? TONE_MUTED;
  return (
    <span className={`inline-flex items-center gap-1 rounded-full border px-1.5 py-0.5 ${t.wrap}`}>
      <Icon size={11} className={t.icon} aria-hidden />
      <span className={`text-xs font-semibold tabular-nums ${t.value}`}>{value}</span>
      <span className="text-[9px] uppercase tracking-wider text-fg-muted">{label}</span>
    </span>
  );
}

function ActionButton({
  icon: Icon,
  label,
  onClick,
  disabled,
}: {
  icon: LucideIcon;
  label: string;
  onClick: () => void;
  disabled?: boolean;
}) {
  return (
    <button
      className="flex w-full items-center gap-1.5 rounded-lg bg-surface-1 px-2 py-1.5 text-xs text-fg-secondary transition-colors hover:bg-surface-4 hover:text-fg-primary disabled:cursor-not-allowed disabled:opacity-40"
      onClick={onClick}
      disabled={disabled}
    >
      <Icon size={14} className="shrink-0" />
      <span className="truncate">{label}</span>
    </button>
  );
}