UHD_Media_Tool/apps/web/app/components/agent/agent-drawer.tsx

import { ArrowLeft, Bot, ExternalLink, History, Maximize2, Minus, Plus, X } from "lucide-react";
import { useRef } from "react";
import { Link, useLocation } from "react-router";
import { toast } from "sonner";
import { agentMockEnabled, isRunActive, useAgentRun, useCreateAgentRun } from "~/api/agent.ts";
import { StreamingCursor } from "~/components/agentui/streaming-response.tsx";
import { Button } from "~/components/ui/button.tsx";
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "~/components/ui/sheet.tsx";
import { errorMessage } from "~/lib/api.ts";
import { cn } from "~/lib/utils.ts";
import { capabilityMeta, isDenied, RunStatusBadge } from "./agent-conversation.tsx";
import { AgentRunPanel, GoalComposer } from "./agent-run-panel.tsx";
import { AgentSessionList } from "./agent-session-list.tsx";
import {
  type AgentContext,
  type AgentDrawerTab,
  agentShortcutLabel,
  contextFromPath,
  contextPrefix,
  lastAgentDrawerTab,
  minimizeAgentDrawer,
  openAgentDrawer,
  openAgentHistoryRun,
  restoreAgentDrawer,
  setAgentDrawerOpen,
  setAgentDrawerRun,
  setAgentDrawerTab,
  showAgentRunInDrawer,
  splitContextGoal,
  useAgentDrawer,
} from "./agent-store.ts";
import { AgentRunOpenContext } from "./agent-subagent-tree.tsx";
import { quickGoalsFor } from "./quick-goals.ts";
import { useAgentStream } from "./use-agent-stream.ts";

/** 悬浮按钮等"抽屉外但属于抽屉"的控件打这个属性:点它不算点外面(否则先被关掉又被重新打开) */
export const AGENT_LAUNCHER_ATTR = "data-agent-launcher";

const CONTEXT_KEYS: [keyof AgentContext, string][] = [
  ["entityId", "作品"],
  ["releaseId", "资源"],
  ["downloadTaskId", "下载任务"],
  ["recordId", "整理记录"],
  ["siteId", "站点"],
  ["taskId", "任务"],
];

function ContextChips({ context }: { context: AgentContext }) {
  const chips = CONTEXT_KEYS.filter(([k]) => context[k]);
  if (!chips.length) return null;
  return (
    <ul aria-label="当前页面上下文" className="mt-1.5 flex flex-wrap gap-1">
      {chips.map(([k, label]) => (
        <li
          key={k}
          className="max-w-full truncate rounded-full border border-border/70 px-2 py-0.5 font-mono text-label text-muted-foreground"
          title={String(context[k])}
        >
          {label} · {String(context[k]).slice(0, 12)}
        </li>
      ))}
    </ul>
  );
}

const TABS: { value: AgentDrawerTab; label: string }[] = [
  { value: "current", label: "当前" },
  { value: "history", label: "历史" },
];

function DrawerTabs({ tab }: { tab: AgentDrawerTab }) {
  return (
    <div
      role="tablist"
      aria-label="Agent 视图"
      className="mt-2 inline-flex w-fit gap-1 rounded-full border border-border/70 p-0.5"
    >
      {TABS.map((t) => (
        <button
          key={t.value}
          type="button"
          role="tab"
          id={`agent-tab-${t.value}`}
          aria-selected={tab === t.value}
          aria-controls="agent-tabpanel"
          onClick={() => setAgentDrawerTab(t.value)}
          className={cn(
            "h-7 cursor-pointer rounded-full border border-transparent px-3 text-meta text-muted-foreground outline-none transition-colors duration-micro hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring",
            tab === t.value && "pill-selected text-foreground",
          )}
        >
          {t.label}
        </button>
      ))}
    </div>
  );
}

/** 历史 Tab 里打开的一条会话:返回列表 + 目标 + 在页面打开(次要);正文复用会话组件,进行中可继续输入 */
function HistoryRunView({ runId }: { runId: string }) {
  const run = useAgentRun(runId);
  const mock = agentMockEnabled();
  return (
    <div className="flex min-h-0 flex-1 flex-col gap-2">
      <div className="flex min-w-0 items-center gap-1">
        <Button variant="ghost" size="sm" className="-ml-2 shrink-0" onClick={() => openAgentHistoryRun(null)}>
          <ArrowLeft />
          返回列表
        </Button>
        <p className="min-w-0 flex-1 truncate text-caption text-muted-foreground" title={run.data?.run.goal}>
          {run.data ? splitContextGoal(run.data.run.goal).text : ""}
        </p>
        <Button asChild variant="ghost" size="xs" className="shrink-0 text-muted-foreground">
          <Link to={`/console/agent/${runId}${mock ? "?mock=1" : ""}`} onClick={() => setAgentDrawerOpen(false)}>
            <ExternalLink />
            在页面打开
          </Link>
        </Button>
      </div>
      <AgentRunOpenContext.Provider value={openAgentHistoryRun}>
        <AgentRunPanel key={runId} runId={runId} compact className="flex-1" onCreated={showAgentRunInDrawer} />
      </AgentRunOpenContext.Provider>
    </div>
  );
}

/**
 * Agent 侧栏抽屉:任意页面可打开,带当前页面上下文(entityId / siteId / taskId 等)作为 goal 前缀;
 * 顶部 Tab「当前 / 历史」:历史里点一条在抽屉内打开(不跳页),返回列表保留筛选与滚动位置;抽屉记住上次 Tab。
 * 运行中可最小化到右下角小窗,流式输出继续。
 * 挂载:在 console layout 里渲染一次 <AgentDrawer />;顶栏放 <AgentDrawerTrigger />。
 * 页面内打开:import { openAgentDrawer } from "~/components/agent/agent-store.ts"。
 */
export function AgentDrawer() {
  const { open, minimized, context, runId, tab, historyRunId } = useAgentDrawer();
  const create = useCreateAgentRun();
  const prefix = contextPrefix(context);
  const { pathname } = useLocation();
  const content = useRef<HTMLDivElement>(null);
  const history = tab === "history";

  return (
    <>
      <Sheet open={open} onOpenChange={setAgentDrawerOpen}>
        <SheetContent
          ref={content}
          side="right"
          className="w-full gap-0 p-0 sm:max-w-xl"
          // 打开即可输入:焦点直接给输入框(新目标或运行中的追加消息),没有输入框时退回抽屉本身
          onOpenAutoFocus={(e) => {
            const ta = content.current?.querySelector<HTMLTextAreaElement>("textarea:not([disabled])");
            if (!ta) return;
            e.preventDefault();
            ta.focus();
            ta.setSelectionRange(ta.value.length, ta.value.length);
          }}
          onInteractOutside={(e) => {
            if ((e.target as Element | null)?.closest?.(`[${AGENT_LAUNCHER_ATTR}]`)) e.preventDefault();
          }}
        >
          <SheetHeader className="gap-1 border-b border-[var(--shell-border)] px-5 pt-4 pb-3 pr-24">
            <SheetTitle className="flex items-center gap-2 text-lead">
              <Bot className="h-4 w-4" />
              Agent
            </SheetTitle>
            <SheetDescription className={cn("break-words", history && "sr-only")}>
              {context?.label ? `当前对象：${context.label}` : "交代目标，Agent 在授权范围内执行并汇报。"}
              <span className="ml-1 hidden text-muted-foreground/75 sm:inline">
                （{agentShortcutLabel()} 开关，Esc 关闭）
              </span>
            </SheetDescription>
            {context && !history ? <ContextChips context={context} /> : null}
            <DrawerTabs tab={tab} />
          </SheetHeader>
          {runId && !history ? (
            <Button
              variant="ghost"
              size="icon-sm"
              className="absolute top-4 right-14"
              aria-label="最小化（运行继续）"
              title="最小化（运行继续）"
              onClick={minimizeAgentDrawer}
            >
              <Minus />
            </Button>
          ) : null}
          <div
            id="agent-tabpanel"
            role="tabpanel"
            aria-labelledby={`agent-tab-${tab}`}
            className="flex min-h-0 flex-1 flex-col px-4 py-3"
          >
            {history ? (
              historyRunId ? (
                <HistoryRunView runId={historyRunId} />
              ) : (
                <AgentSessionList
                  remember
                  activeId={runId ?? undefined}
                  onOpen={openAgentHistoryRun}
                  className="flex-1"
                />
              )
            ) : runId ? (
              <AgentRunOpenContext.Provider value={openAgentHistoryRun}>
                <AgentRunPanel runId={runId} compact className="flex-1" onCreated={showAgentRunInDrawer} />
              </AgentRunOpenContext.Provider>
            ) : (
              <GoalComposer
                key={`${context?.entityId ?? ""}${context?.releaseId ?? ""}${context?.goal ?? ""}`}
                compact
                suggestions={context?.goal ? undefined : quickGoalsFor(pathname)}
                prefix={prefix || undefined}
                defaultGoal={context?.goal ?? ""}
                pending={create.isPending}
                onSubmit={(goal, opts) =>
                  create.mutate(
                    { goal: `${prefix}${goal}`, ...opts },
                    {
                      onSuccess: (run) => setAgentDrawerRun(run.id),
                      onError: (e) => toast.error(errorMessage(e)),
                    },
                  )
                }
              />
            )}
          </div>
          {history ? null : (
            <div className="flex flex-wrap items-center justify-end gap-2 border-t border-[var(--shell-border)] px-5 py-2.5">
              {runId ? (
                <>
                  <Button variant="ghost" size="sm" onClick={() => openAgentDrawer(context)}>
                    <Plus />
                    新目标
                  </Button>
                  <Button asChild variant="ghost" size="sm" className="text-muted-foreground">
                    <Link to={`/console/agent/${runId}`} onClick={() => setAgentDrawerOpen(false)}>
                      <ExternalLink />
                      在页面打开
                    </Link>
                  </Button>
                </>
              ) : (
                <Button variant="ghost" size="sm" onClick={() => setAgentDrawerTab("history")}>
                  <History />
                  历史会话
                </Button>
              )}
            </div>
          )}
        </SheetContent>
      </Sheet>
      {minimized && runId ? <AgentMiniDock runId={runId} /> : null}
    </>
  );
}

/** 最小化后的小窗:保持事件流订阅,显示状态与最新一句输出 */
function AgentMiniDock({ runId }: { runId: string }) {
  const run = useAgentRun(runId);
  const active = isRunActive(run.data?.run.status);
  const live = useAgentStream(runId, active || !run.data);
  const last = live.items[live.items.length - 1];
  const streaming = active && !live.finished;
  const line =
    last?.kind === "text"
      ? last.text.trim().split("\n").pop()
      : last?.kind === "tool"
        ? `${isDenied(last.call) ? "被拒绝" : last.call.status === "running" ? "调用" : "完成"} · ${capabilityMeta(last.call.capabilityId)?.title ?? last.call.capabilityId}`
        : last?.kind === "thinking"
          ? "思考中…"
          : last?.kind === "end"
            ? last.ok
              ? "已完成，展开查看核实结果"
              : last.message
            : "等待输出…";
  const status = run.data
    ? live.finished && isRunActive(run.data.run.status)
      ? "running"
      : run.data.run.status
    : null;
  return (
    <section
      aria-label="Agent 小窗"
      className="pg-float fixed right-4 bottom-4 z-40 w-80 max-w-[calc(100vw-2rem)] rounded-2xl p-3 animate-in fade-in-0 slide-in-from-bottom-2 duration-base ease-pop motion-reduce:animate-none"
    >
      <div className="flex items-center gap-2">
        <Bot aria-hidden className="size-4 shrink-0 text-muted-foreground" />
        {status ? <RunStatusBadge status={status} /> : null}
        <span className="min-w-0 flex-1 truncate text-meta text-muted-foreground">
          {run.data ? splitContextGoal(run.data.run.goal).text : ""}
        </span>
        <Button variant="ghost" size="icon-xs" aria-label="展开 Agent" title="展开" onClick={restoreAgentDrawer}>
          <Maximize2 />
        </Button>
        <Button
          variant="ghost"
          size="icon-xs"
          aria-label="关闭小窗（运行在后台继续）"
          title="关闭小窗（运行在后台继续）"
          onClick={() => setAgentDrawerOpen(false)}
        >
          <X />
        </Button>
      </div>
      <button
        type="button"
        onClick={restoreAgentDrawer}
        className="mt-2 block w-full cursor-pointer rounded-lg px-1 text-left text-caption leading-5 text-foreground/90 outline-none focus-visible:ring-2 focus-visible:ring-ring"
      >
        <span className="line-clamp-2 break-words">
          {line}
          {streaming && last?.kind === "text" ? <StreamingCursor /> : null}
        </span>
      </button>
    </section>
  );
}

/** 顶栏按钮:有最小化的运行时恢复它;否则按当前路由带上下文打开(页面内按钮用 openAgentDrawer 传更完整的上下文) */
export function AgentDrawerTrigger({ className }: { className?: string }) {
  const { minimized, runId } = useAgentDrawer();
  const { pathname } = useLocation();
  return (
    <Button
      variant="ghost"
      size="icon-sm"
      aria-label="打开 Agent"
      title={`Agent(${agentShortcutLabel()})`}
      className={className}
      onClick={() =>
        minimized && runId ? restoreAgentDrawer() : openAgentDrawer(contextFromPath(pathname), lastAgentDrawerTab())
      }
    >
      <Bot />
    </Button>
  );
}