AgentHub/client/src/components/NeedsYouStrip.tsx

/**
 * @file NeedsYouStrip.tsx
 * @description The Dashboard's pinned "Needs you" strip: every active session
 * blocked on the user (`awaiting_input_since`), each linking straight to its
 * workspace pane (or replay), else its analysis page. Renders nothing while no
 * session is waiting. `compact` is the one-line form shown above Analytics.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

import { useCallback, useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { BellRing } from "lucide-react";
import { api, type RunHandle } from "../lib/api";
import { timeAgo } from "../lib/format";
import { useLiveRefresh } from "../hooks/useLiveRefresh";
import { laneChangeMatcher, runKeyOf } from "../lib/laneChange";
import { workspaceHref } from "./SessionRowMenu";
import type { Session } from "../lib/types";

export function NeedsYouStrip({ compact = false }: { compact?: boolean }) {
  const { t } = useTranslation("dashboard");
  const [sessions, setSessions] = useState<Session[]>([]);
  // The real count: only the first 20 are fetched and listed.
  const [total, setTotal] = useState(0);
  const [runs, setRuns] = useState<RunHandle[]>([]);

  const load = useCallback(() => {
    api.sessions
      .list({ awaiting: true, limit: 20 })
      .then((r) => {
        setSessions(r.sessions);
        setTotal(r.total);
      })
      .catch(() => undefined); // the strip is a shortcut; the pages show errors
  }, []);
  // The live panes (for the links) move only when a lane's run columns do.
  const loadRuns = useCallback(() => {
    api.run
      .list()
      .then((r) => setRuns(r.items))
      .catch(() => undefined);
  }, []);

  useEffect(() => {
    load();
    loadRuns();
  }, [load, loadRuns]);
  useLiveRefresh(load, {
    intervalMs: 15000,
    match: (msg) => msg.type === "session_updated" || msg.type === "session_created",
  });
  const [runChanged] = useState(() => laneChangeMatcher(runKeyOf));
  useLiveRefresh(loadRuns, { intervalMs: 15000, match: runChanged });

  if (sessions.length === 0) return null;

  return (
    <section
      aria-label={t("needsYou.title")}
      className={`card border-status-warning/40 ${compact ? "px-3 py-2" : "p-4"}`}
    >
      <div className={`flex flex-wrap items-center gap-2 ${compact ? "" : "mb-3"}`}>
        <BellRing className="w-4 h-4 text-status-warning flex-shrink-0" aria-hidden />
        <h2 className="text-sm font-medium text-fg-primary">
          {t("needsYou.title")}{" "}
          <span className="text-fg-muted font-normal">({Math.max(total, sessions.length)})</span>
        </h2>
        {compact &&
          sessions.slice(0, 5).map((s) => (
            <Link
              key={s.id}
              to={workspaceHref(s, runs) ?? `/sessions/${s.id}`}
              className="text-xs px-2 py-0.5 rounded-full bg-status-warning/10 border border-status-warning/30 text-fg-secondary hover:text-fg-primary truncate max-w-[14rem]"
            >
              {s.name || s.id.slice(0, 8)}
            </Link>
          ))}
      </div>
      {!compact && (
        <ul className="divide-y divide-border">
          {sessions.map((s) => (
            <li key={s.id}>
              <Link
                to={workspaceHref(s, runs) ?? `/sessions/${s.id}`}
                className="flex items-center gap-3 py-2 px-1 hover:bg-surface-4 rounded"
              >
                <span className="w-2 h-2 rounded-full bg-status-warning flex-shrink-0" />
                <span className="text-sm text-fg-secondary truncate flex-1">
                  {s.name || s.id.slice(0, 8)}
                </span>
                <span className="text-[11px] text-fg-muted truncate max-w-[16rem]">{s.cwd}</span>
                {s.awaiting_input_since && (
                  <span className="text-[11px] text-fg-muted flex-shrink-0">
                    {t("needsYou.since", { ago: timeAgo(s.awaiting_input_since) })}
                  </span>
                )}
              </Link>
            </li>
          ))}
        </ul>
      )}
    </section>
  );
}