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

/**
 * @file SagiPanel.tsx
 * @description Expanded Sagi panel: a live status strip (live / waiting /
 *   errored stat chips + connection state), quick navigation actions, and a
 *   local "Ask" box. Pure presentational - all data and the ask/navigation
 *   behavior are injected by the container.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */
/* =============================================================================
 * MODULE_GUIDE — extended in-file reference (comments only; safe to read, never executed)
 * =============================================================================
 * **Purpose:** Sagi is the optional on-screen mascot assistant — quips, intents, and lightweight event reactions layered above the dashboard chrome.
 *
 * ## Design constraints
 * - Local-first: no telemetry leaves the machine unless the user configures webhooks.
 * - Fail-safe hooks path on the server must never block Claude Code; UI mirrors that
 *   philosophy by degrading gracefully (empty states, stale badges, reconnect loops).
 * - Destructive flows stay behind explicit confirmation modals and server-side gates.
 * - Internationalization: user-visible strings belong in i18n JSON, not literals here.
 *
 * ## Remote data & SSH
 * Remote Data Sources let operators aggregate multiple machines. SSH entries describe
 * how to reach a peer dashboard; the global data scope (`dataScope.ts`) narrows every
 * scoped GET via `?sources=`. Health checks and import history surface in Settings.
 *
 * ## Internal dependencies
 * - `./brain`
 *
 * ## Public surface
 * - `SagiPanel` — exported API; see TSDoc on the symbol for behavior.
 *
 * ## Testing pointers
 * - Prefer colocated `__tests__` with Vitest + Testing Library for UI.
 * - Server contract changes require `npm run test:server` and OpenAPI sync.
 *
 * ## Related docs
 * - `ARCHITECTURE.md` — hooks → API → SQLite → WebSocket → UI pipeline.
 * - `docs/API.md` — REST reference.
 * - `skills/file-headers/` — mandatory `@author` header policy.
 * ============================================================================= */
/* -----------------------------------------------------------------------------
 * EXPORT CATALOG — quick index of symbols defined below (documentation only).
 * -----------------------------------------------------------------------------
 * **SagiPanel**
 *   Part of this module's public contract. Downstream imports should treat
 *   the signature and return type as stable unless release notes say otherwise.
 *   When behavior changes, update the `@file` overview and relevant tests.
 *
 * ----------------------------------------------------------------------------- */

import { useState, type FormEvent, type ReactNode } from "react";
import {
  Bell,
  BellOff,
  Trash2,
  X,
  Send,
  AlertTriangle,
  Hourglass,
  Radio,
  Heart,
  ChevronRight,
  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";

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

interface SagiPanelProps {
  /** The name the pet goes by now. */
  name: string;
  /** The pet's own name, which an empty nickname falls back to. */
  ownName: string;
  /** The user's nickname for the pet, "" when none. */
  nickname: string;
  onRename: (name: string) => void;
  onPat: () => void;
  /** Errored, then waiting sessions, named. */
  attention: ReadonlyArray<AttentionItem>;
  onOpenSession: (s: SagiSubject) => void;
  status: SagiStatus;
  muted: boolean;
  onToggleMute: () => void;
  onClearAlerts: () => void;
  onNavigate: (route: string) => void;
  /** Returns an answer to display, or null when the query was handed off. */
  onAsk: (query: string) => string | null;
  onClose: () => void;
}

export function SagiPanel({
  name,
  ownName,
  nickname,
  onRename,
  onPat,
  attention,
  onOpenSession,
  status,
  muted,
  onToggleMute,
  onClearAlerts,
  onNavigate,
  onAsk,
  onClose,
}: SagiPanelProps) {
  const { t } = useTranslation("settings");
  const [query, setQuery] = useState("");
  const [answer, setAnswer] = useState<string | null>(null);
  // The name being typed, or null while not renaming.
  const [renaming, setRenaming] = useState<string | null>(null);
  const saveName = () => {
    if (renaming === null) return;
    onRename(renaming);
    setRenaming(null);
  };

  const submit = (e: FormEvent) => {
    e.preventDefault();
    const result = onAsk(query);
    setAnswer(result); // null means it handed off (container navigates/closes)
    setQuery("");
  };

  return (
    <div
      className="w-72 overflow-hidden rounded-2xl border border-border-light bg-surface-2/95 shadow-2xl backdrop-blur-md animate-slide-up"
      role="dialog"
      aria-label={t("sagi.panel.label", { name })}
    >
      {/* header */}
      <div className="flex items-center justify-between gap-2 border-b border-border/70 bg-gradient-to-r from-accent/10 to-transparent px-3.5 py-2.5">
        <div className="flex items-center gap-2 min-w-0">
          <span className="text-base leading-none" aria-hidden>
            🐾
          </span>
          {renaming === null ? (
            <button
              type="button"
              className="min-w-0 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={saveName}
              onKeyDown={(e) => {
                if (e.key === "Enter") {
                  e.preventDefault();
                  saveName();
                } else if (e.key === "Escape") {
                  // Esc cancels the rename only, not the whole panel.
                  e.stopPropagation();
                  e.nativeEvent.stopImmediatePropagation();
                  setRenaming(null);
                }
              }}
            />
          )}
          <span
            className={`ml-0.5 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>
        </div>
        <div className="flex shrink-0 items-center">
          <button
            className="rounded-md p-1 text-fg-muted transition-colors hover:bg-surface-4 hover:text-status-danger"
            onClick={onPat}
            aria-label={t("sagi.panel.pat", { name })}
            title={t("sagi.panel.pat", { name })}
          >
            <Heart size={15} />
          </button>
          <button
            className="rounded-md p-1 text-fg-muted transition-colors hover:bg-surface-4 hover:text-fg-secondary"
            onClick={onClose}
            aria-label={t("sagi.panel.close", { name })}
          >
            <X size={15} />
          </button>
        </div>
      </div>

      <div className="p-3">
        {/* status stat chips */}
        <div className="mb-3 grid grid-cols-3 gap-1.5">
          <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"}
          />
        </div>

        {/* the sessions that need the user, by name */}
        {attention.length > 0 && (
          <div className="mb-3">
            <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>
        )}

        {/* quick actions */}
        <div className="mb-3 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>

        {/* ask */}
        <form onSubmit={submit} className="flex items-center gap-1.5">
          <input
            className="flex-1 rounded-lg border border-border bg-surface-1 px-2.5 py-1.5 text-xs text-fg-secondary placeholder-fg-muted transition-colors focus:border-accent focus:outline-none focus:ring-1 focus:ring-accent/30"
            placeholder={t("sagi.panel.askPlaceholder", { name })}
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            aria-label={t("sagi.panel.ask", { name })}
          />
          <button
            type="submit"
            className="btn-primary justify-center px-2.5 py-2"
            aria-label={t("sagi.panel.send")}
          >
            <Send size={14} />
          </button>
        </form>
        {answer && (
          <p className="mt-2 rounded-lg bg-surface-1/70 px-2.5 py-2 text-xs leading-relaxed text-fg-secondary">
            {answer}
          </p>
        )}
      </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,
};

function StatChip({
  icon: Icon,
  label,
  value,
  tone,
}: {
  icon: LucideIcon;
  label: string;
  value: number;
  tone: string;
}): ReactNode {
  const t = TONES[tone] ?? TONE_MUTED;
  return (
    <div className={`flex flex-col items-center gap-0.5 rounded-xl border py-1.5 ${t.wrap}`}>
      <Icon size={13} className={t.icon} aria-hidden />
      <span className={`text-base font-semibold leading-none tabular-nums ${t.value}`}>
        {value}
      </span>
      <span className="text-[9px] uppercase tracking-wider text-fg-muted">{label}</span>
    </div>
  );
}

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>
  );
}