AgentHub/client/src/components/workflows/SkillUsagePanel.tsx

/**
 * @file SkillUsagePanel.tsx
 * @description Which skills and plugins actually get used, from
 * `GET /api/workflows/skill-usage`: plugin totals as chips (skill calls + the
 * plugin's own MCP tool calls) over a ranked list of individual skills with
 * their call count and how many sessions reached for them. A skill that is
 * installed but never invoked simply never appears — the panel reports use, not
 * inventory.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

import { useCallback, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { api } from "../../lib/api";
import { useLiveRefresh } from "../../hooks/useLiveRefresh";
import type { SkillUsage } from "../../lib/types";

export function SkillUsagePanel({ statusFilter }: { statusFilter: string }) {
  const { t } = useTranslation("workflows");
  const [data, setData] = useState<SkillUsage | null>(null);
  const [error, setError] = useState<string | null>(null);

  const refresh = useCallback(async () => {
    try {
      setData(await api.workflows.skillUsage(statusFilter));
      setError(null);
    } catch (err) {
      setError(err instanceof Error ? err.message : t("failedLoad"));
    }
  }, [statusFilter, t]);

  useEffect(() => {
    void refresh();
  }, [refresh]);

  // Throttled (not debounced): a steady event stream still refreshes, every
  // 15 s — it is an aggregate over every event.
  useLiveRefresh(() => void refresh(), {
    throttleMs: 15000,
    match: (msg) => msg.type === "new_event" || msg.type === "session_updated",
  });

  if (error) return <p className="text-xs text-status-danger">{error}</p>;
  if (!data) return null;
  if (!data.skills.length && !data.plugins.length) {
    return <p className="text-sm text-fg-muted">{t("skillUsage.empty")}</p>;
  }

  const topCount = Math.max(...data.skills.map((s) => s.count), 1);

  return (
    <div className="space-y-4">
      {data.plugins.length > 0 && (
        <div>
          <p className="mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-fg-muted">
            {t("skillUsage.plugins")}
          </p>
          <div className="flex flex-wrap gap-1.5">
            {data.plugins.map((p) => (
              <span
                key={p.name}
                data-testid={`plugin-usage-${p.name}`}
                title={t("skillUsage.pluginBreakdown", {
                  skills: p.skills,
                  skillCalls: p.skillCalls,
                  mcpCalls: p.mcpCalls,
                })}
                className="rounded-full border border-border bg-surface-2 px-2.5 py-1 text-xs text-fg-secondary"
              >
                {p.name}
                <span className="ml-1.5 tabular-nums text-accent">{p.skillCalls + p.mcpCalls}</span>
              </span>
            ))}
          </div>
        </div>
      )}

      <div>
        <p className="mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-fg-muted">
          {t("skillUsage.skills")}
        </p>
        <div className="space-y-1">
          {data.skills.map((s) => (
            <div
              key={s.name}
              data-testid={`skill-usage-${s.name}`}
              className="flex items-center gap-2 text-xs"
            >
              <span className="w-56 shrink-0 truncate text-fg-secondary" title={s.name}>
                {s.name}
              </span>
              <div className="h-2 flex-1 overflow-hidden rounded-full bg-surface-3">
                <div
                  className="h-full rounded-full bg-accent"
                  style={{ width: `${(s.count / topCount) * 100}%` }}
                />
              </div>
              <span className="w-32 shrink-0 text-right tabular-nums text-fg-muted">
                {t("skillUsage.calls", { count: s.count })} ·{" "}
                {t("skillUsage.sessions", { count: s.sessions })}
              </span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}