UHD_Media_Tool/apps/web/app/components/console/agent-launcher.tsx

import { Bot, Keyboard } from "lucide-react";
import { useEffect, useMemo } from "react";
import { useLocation } from "react-router";
import { isRunActive, RUN_STATUS_LABEL, useAgentRuns } from "~/api/agent.ts";
import { AGENT_LAUNCHER_ATTR } from "~/components/agent/agent-drawer.tsx";
import {
  agentShortcutLabel,
  isAgentShortcut,
  shortGoalTitle,
  toggleAgentDrawer,
} from "~/components/agent/agent-store.ts";
import { cn } from "~/lib/utils.ts";

// 智能体抽屉的入口只有一个按钮:桌面是侧栏最上方的「智能体」,没有侧栏的窄屏是顶栏胶囊里的智能体按钮
// (agent-drawer.tsx 的 AgentDrawerTrigger);再加全局快捷键 Ctrl/⌘+J。右下角悬浮按钮已去掉(2026-10-08)。
// 都走 toggleAgentDrawer,行为一致:打开中 → 收起;上次的会话还在 → 接着看;否则带当前页面上下文开新对话。

/** 进行中的会话数与最近一条的状态摘要(列表里有进行中的会话时 5 秒轮询一次) */
export function useActiveAgentRuns() {
  const runs = useAgentRuns(undefined, undefined, { roots: true });
  return useMemo(() => {
    const active = (runs.data?.pages ?? []).flatMap((p) => p.items).filter((r) => isRunActive(r.status));
    const latest = active[0];
    return {
      count: active.length,
      summary: latest ? `${RUN_STATUS_LABEL[latest.status]} · ${shortGoalTitle(latest.goal)}` : null,
    };
  }, [runs.data]);
}

/** 全局快捷键:Ctrl/⌘+J 切换抽屉(Esc 关闭由抽屉自身处理) */
function useAgentHotkey() {
  const { pathname } = useLocation();
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (e.repeat || !isAgentShortcut(e)) return;
      e.preventDefault();
      toggleAgentDrawer(pathname);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [pathname]);
}

/** 全局快捷键 Ctrl/⌘+J(没有界面,挂在 console layout 里一次) */
export function AgentHotkey() {
  useAgentHotkey();
  return null;
}

/** 进行中的脉冲点:减少动态效果时只留静态点 */
function PulseDot({ className }: { className?: string }) {
  return (
    <span aria-hidden className={cn("relative flex size-2.5", className)}>
      <span className="absolute inline-flex size-full rounded-full bg-primary/60 motion-safe:animate-ping" />
      <span className="relative inline-flex size-2.5 rounded-full bg-primary" />
    </span>
  );
}

function CountBadge({ count, className }: { count: number; className?: string }) {
  if (!count) return null;
  return (
    <span
      className={cn(
        "grid h-5 min-w-5 place-items-center rounded-full bg-primary px-1 text-label font-semibold text-primary-foreground tabular-nums",
        className,
      )}
    >
      {count > 99 ? "99+" : count}
    </span>
  );
}

/** 侧栏最上方的 Agent 主入口:强调样式(棱镜环),显示进行中会话数 */
export function AgentNavEntry({ collapsed = false, onNavigate }: { collapsed?: boolean; onNavigate?: () => void }) {
  const { pathname } = useLocation();
  const { count, summary } = useActiveAgentRuns();
  const shortcut = agentShortcutLabel();
  const activate = () => {
    onNavigate?.();
    toggleAgentDrawer(pathname);
  };
  const title = `智能体(${shortcut})${summary ? `\n${summary}` : ""}`;

  if (collapsed) {
    return (
      <button
        type="button"
        {...{ [AGENT_LAUNCHER_ATTR]: "" }}
        onClick={activate}
        title={title}
        aria-label={count ? `打开智能体（${count} 个会话进行中）` : "打开智能体"}
        aria-keyshortcuts="Control+J Meta+J"
        className="prism-ring relative mb-2 grid h-10 w-10 shrink-0 cursor-pointer place-items-center rounded-xl text-foreground outline-none transition-transform duration-micro active:scale-[0.95] focus-visible:ring-2 focus-visible:ring-ring"
      >
        <Bot className="h-[18px] w-[18px]" />
        {count ? <CountBadge count={count} className="absolute -top-1.5 -right-1.5" /> : null}
      </button>
    );
  }
  return (
    <button
      type="button"
      {...{ [AGENT_LAUNCHER_ATTR]: "" }}
      onClick={activate}
      title={title}
      aria-keyshortcuts="Control+J Meta+J"
      className="prism-ring flex w-full cursor-pointer items-center gap-3 rounded-xl px-2.5 py-2 text-left text-foreground outline-none transition-transform duration-micro active:scale-[0.98] focus-visible:ring-2 focus-visible:ring-ring"
    >
      <span className="grid size-8 shrink-0 place-items-center rounded-lg pill-selected">
        <Bot className="h-4 w-4" />
      </span>
      <span className="flex min-w-0 flex-1 flex-col">
        <span className="flex items-center gap-2 text-sm font-semibold">
          智能体
          {count ? <PulseDot /> : null}
        </span>
        {count ? <span className="truncate text-meta text-muted-foreground">{count} 个会话进行中</span> : null}
      </span>
      {count ? (
        <CountBadge count={count} />
      ) : (
        <kbd className="rounded-tight border border-border/70 px-1 font-sans text-label leading-4 text-muted-foreground">
          {shortcut}
        </kbd>
      )}
    </button>
  );
}

/** 快捷键说明(设置页"快捷键"一节用) */
export function AgentShortcutsHelp() {
  const shortcut = agentShortcutLabel();
  const rows: [string, string][] = [
    [shortcut, "打开 / 收起智能体，附带当前页面"],
    ["Esc", "关闭智能体"],
    ["Enter", "发送目标；Shift+Enter 换行"],
  ];
  return (
    <section aria-labelledby="agent-shortcuts-title" className="space-y-2">
      <h3 id="agent-shortcuts-title" className="flex items-center gap-2 text-sm font-semibold">
        <Keyboard aria-hidden className="size-4 text-muted-foreground" />
        快捷键
      </h3>
      <dl className="grid grid-cols-[auto_1fr] items-center gap-x-4 gap-y-1.5 text-caption">
        {rows.map(([k, v]) => (
          <div key={k} className="contents">
            <dt>
              <kbd className="rounded-tight border border-border/70 px-1.5 py-0.5 font-sans text-label text-foreground">
                {k}
              </kbd>
            </dt>
            <dd className="text-muted-foreground">{v}</dd>
          </div>
        ))}
      </dl>
    </section>
  );
}