UHD_Media_Tool/apps/web/app/routes/console/agent.tsx

import type { AgentRunStatus } from "@umt/contracts";
import { Bot, FlaskConical } from "lucide-react";
import { useState } from "react";
import { useNavigate } from "react-router";
import { toast } from "sonner";
import { type AgentRunView, agentMockEnabled, RUN_STATUS_LABEL, useAgentRuns, useCreateAgentRun } from "~/api/agent.ts";
import { isMissingEndpoint } from "~/api/parse.ts";
import { RunStatusBadge } from "~/components/agent/agent-conversation.tsx";
import { GoalComposer } from "~/components/agent/agent-run-panel.tsx";
import { type DataColumn, DataTable } from "~/components/console/data-table.tsx";
import { FilterBar, FilterSelect } from "~/components/console/filter-bar.tsx";
import { PageHeader } from "~/components/console/page-header.tsx";
import { Button } from "~/components/ui/button.tsx";
import { relTime } from "~/components/workbench/release-fields.ts";
import { errorMessage } from "~/lib/api.ts";

const COLUMNS: DataColumn<AgentRunView>[] = [
  {
    key: "goal",
    header: "目标",
    cell: (r) => (
      <div className="min-w-0 max-w-md">
        <p className="line-clamp-2 break-words text-foreground">{r.goal}</p>
        {r.summary ? <p className="mt-0.5 line-clamp-1 text-meta text-muted-foreground">{r.summary}</p> : null}
      </div>
    ),
  },
  { key: "status", header: "状态", cell: (r) => <RunStatusBadge status={r.status} /> },
  {
    key: "mode",
    header: "模式",
    hideBelow: "md",
    cell: (r) => ((r.mode ?? r.scope.mode) === "plan_only" ? "只要方案" : "执行"),
  },
  { key: "tools", header: "工具调用", hideBelow: "md", align: "right", cell: (r) => r.toolCallCount },
  {
    key: "at",
    header: "开始",
    hideBelow: "sm",
    cell: (r) => <span className="whitespace-nowrap text-muted-foreground">{relTime(r.createdAt)}</span>,
  },
];

export default function AgentPage() {
  const [status, setStatus] = useState("");
  const runs = useAgentRuns((status || undefined) as AgentRunStatus | undefined);
  const create = useCreateAgentRun();
  const navigate = useNavigate();
  const mock = agentMockEnabled();
  const missing = !mock && isMissingEndpoint(runs.error);
  const rows = runs.data?.pages.flatMap((p) => p.items);

  return (
    <>
      <PageHeader
        title="Agent 会话"
        description="交代目标，Agent 在授权范围内边执行边汇报；只要方案时，它只调查不执行。"
      />
      {missing ? (
        <div className="mb-4 flex flex-wrap items-center gap-3 rounded-xl border border-warning/40 bg-warning/10 px-4 py-3 text-caption text-warning">
          <FlaskConical className="h-4 w-4 shrink-0" />
          <span className="min-w-0 flex-1">Agent 会话端点还没上线(W2-D 实现中)。可以先用 mock 数据预览交互。</span>
          <Button variant="outline" size="sm" onClick={() => window.location.assign("/console/agent?mock=1")}>
            用 mock 预览
          </Button>
        </div>
      ) : null}
      <div className="pg-slab mb-6 rounded-xl p-4">
        <GoalComposer
          pending={create.isPending}
          onSubmit={(goal, mode) =>
            create.mutate(
              { goal, mode },
              {
                onSuccess: (run) => navigate(`/console/agent/${run.id}${mock ? "?mock=1" : ""}`),
                onError: (e) => toast.error(errorMessage(e)),
              },
            )
          }
        />
      </div>
      <FilterBar onReset={status ? () => setStatus("") : undefined}>
        <FilterSelect
          label="状态"
          value={status}
          onChange={setStatus}
          options={Object.entries(RUN_STATUS_LABEL).map(([value, label]) => ({ value, label }))}
        />
      </FilterBar>
      <DataTable
        columns={COLUMNS}
        rows={missing ? [] : rows}
        rowKey={(r) => r.id}
        loading={runs.isPending}
        error={missing ? undefined : runs.error}
        onRetry={() => void runs.refetch()}
        empty={{
          icon: Bot,
          title: missing ? "会话端点未就绪" : "还没有会话",
          description: "例如：“把某部电影的 1080p 收进来”，或在任意页面右上角打开 Agent 侧栏。",
        }}
        onRowClick={(r) => navigate(`/console/agent/${r.id}${mock ? "?mock=1" : ""}`)}
        hasMore={runs.hasNextPage}
        onLoadMore={() => void runs.fetchNextPage()}
        loadingMore={runs.isFetchingNextPage}
      />
    </>
  );
}