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

import { ArrowLeft, PanelRightOpen } from "lucide-react";
import { Link, useNavigate, useParams } from "react-router";
import { agentMockEnabled } from "~/api/agent.ts";
import {
  agentListHref,
  agentRunHref,
  pageListMemory,
  usePageListGroup,
  useRunGroup,
} from "~/components/agent/agent-nav.ts";
import { AgentRunPanel } from "~/components/agent/agent-run-panel.tsx";
import { AgentSessionList } from "~/components/agent/agent-session-list.tsx";
import { agentReturnPath, showAgentRunInDrawer } from "~/components/agent/agent-store.ts";
import { Button } from "~/components/ui/button.tsx";

// 会话页(AGUI-3):左栏会话列表(xl 以上)· 会话列占满其余宽度(顶部概况条、底部输入区)。
// 不再有页头目标描述和右侧栏;步骤、子会话、预算与模型在概况条里。
export default function AgentRunPage() {
  const { runId = "" } = useParams();
  const navigate = useNavigate();
  const mock = agentMockEnabled();
  // 左栏分栏跟随当前会话(巡检会话及其子会话在「自动巡检」),也可以手动切换(记在 URL)
  const [group, setGroup] = usePageListGroup(useRunGroup(runId));
  return (
    <>
      <h1 className="sr-only">智能体会话</h1>
      <div data-agent-page className="grid grid-cols-1 gap-4 xl:grid-cols-[minmax(0,17rem)_minmax(0,1fr)]">
        <aside className="pg-slab hidden rounded-xl p-3 xl:block xl:h-[calc(100dvh-7rem)] xl:overflow-hidden">
          <AgentSessionList
            activeId={runId}
            hrefFor={(id) => agentRunHref(id, mock)}
            group={group}
            onGroupChange={setGroup}
            memory={pageListMemory}
            className="h-full"
          />
        </aside>
        <div className="pg-slab flex h-[calc(100dvh-7rem)] min-h-[28rem] flex-col gap-2 rounded-xl p-3 md:p-4">
          <Button asChild variant="ghost" size="sm" className="-mt-1 -ml-2 self-start text-muted-foreground xl:hidden">
            <Link to={agentListHref(group, mock)}>
              <ArrowLeft />
              全部会话
            </Link>
          </Button>
          <AgentRunPanel
            key={runId}
            runId={runId}
            className="min-h-0 flex-1"
            actions={
              // 整页 → 抽屉:回到进智能体页面之前的页面,会话在抽屉里接着看
              <Button
                variant="ghost"
                size="icon-sm"
                aria-label="在侧边打开"
                title="在侧边打开，回到之前的页面"
                onClick={() => {
                  showAgentRunInDrawer(runId);
                  navigate(agentReturnPath() ?? "/console");
                }}
              >
                <PanelRightOpen />
              </Button>
            }
          />
        </div>
      </div>
    </>
  );
}