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

import { FlaskConical } from "lucide-react";
import { useNavigate } from "react-router";
import { toast } from "sonner";
import { agentMockEnabled, useCreateAgentRun } from "~/api/agent.ts";
import {
  agentRunHref,
  DRAFT_PAGE_GOAL,
  pageListMemory,
  usePageListGroup,
  writeDraft,
} from "~/components/agent/agent-nav.ts";
import { GoalComposer } from "~/components/agent/agent-run-panel.tsx";
import { AgentSessionList } from "~/components/agent/agent-session-list.tsx";
import { quickGoalsFor } from "~/components/agent/quick-goals.ts";
import { PageHeader } from "~/components/console/page-header.tsx";
import { Button } from "~/components/ui/button.tsx";
import { errorMessage } from "~/lib/api.ts";

// 智能体入口页(AGUI-3):左栏会话列表(等你处理置顶),右边新对话输入框 + 3 个快捷目标。
export default function AgentPage() {
  const create = useCreateAgentRun();
  const navigate = useNavigate();
  const mock = agentMockEnabled();
  const [group, setGroup] = usePageListGroup();

  return (
    <>
      <PageHeader title="智能体" />
      {mock ? (
        <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">演示模式：会话是本地假数据，不连接后端，不执行任何操作。</span>
          <Button variant="outline" size="sm" onClick={() => window.location.assign("/console/agent?mock=0")}>
            退出演示
          </Button>
        </div>
      ) : null}
      <div
        data-agent-page
        className="grid grid-cols-1 gap-4 lg:grid-cols-[minmax(0,20rem)_minmax(0,1fr)] lg:items-start"
      >
        <div className="pg-slab order-2 rounded-xl p-3 lg:order-1 lg:h-[calc(100dvh-12rem)] lg:overflow-hidden">
          <AgentSessionList
            hrefFor={(id) => agentRunHref(id, mock)}
            group={group}
            onGroupChange={setGroup}
            memory={pageListMemory}
            className="h-full"
          />
        </div>
        <div className="pg-slab order-1 mx-auto w-full max-w-[88ch] rounded-xl p-4 lg:order-2">
          <GoalComposer
            pending={create.isPending}
            suggestions={quickGoalsFor("/console/agent")}
            draftKey={DRAFT_PAGE_GOAL}
            onSubmit={(goal, opts) =>
              create.mutate(
                { goal, ...opts },
                {
                  onSuccess: (run) => {
                    writeDraft(DRAFT_PAGE_GOAL, "");
                    navigate(agentRunHref(run.id, mock));
                  },
                  onError: (e) => toast.error(errorMessage(e)),
                },
              )
            }
          />
        </div>
      </div>
    </>
  );
}