fix(web): 控制台界面细节与 uhd_web 控件规范对齐

- 顶栏搜索移进右侧玻璃胶囊;输入框改淡玻璃(边线 0.46 → 0.16,悬停加深,聚焦 / 出错保留光晕)
- 新增 SegmentedControl(滑动 seg-thumb),替换站点、下载、订阅、文件、智能体列表及对话框里的实心选中块;Tabs 改为同一枚滑块
- 开关型按钮统一 outline + aria-pressed 选中外观;页头 / 工具栏次操作描边、图标钮描边圆;文件排序改 Select;下载总速度加标签
- 分页一页放得下时只留总数、空列表不渲染、按容器宽度收起按钮
- 运行状态存储区重排;智能体列表页与会话页共用外壳路由,标题与左栏不再重挂载
- 站点卡片「⋯」不再单独换行;设置导航、状态计数、多选条件改玻璃选中态

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01Cxwgnn2pbzQ7rXv3rq7fei

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

@@ -1,31 +1,27 @@
 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 { Outlet, useParams } from "react-router";
+import { agentMockEnabled } from "~/api/agent.ts";
+import { agentRunHref, pageListMemory, usePageListGroup, useRunGroup } from "~/components/agent/agent-nav.ts";
 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";
+import { cn } from "~/lib/utils.ts";
 
-// 智能体入口页(AGUI-3):左栏会话列表(等你处理置顶),右边新对话输入框 + 3 个快捷目标。
-export default function AgentPage() {
-  const create = useCreateAgentRun();
-  const navigate = useNavigate();
+/**
+ * 智能体页的外壳(AGUI-3):列表页与会话页共用。标题、演示提示与左栏会话列表在这里,只挂载一次;
+ * 右栏是子路由(新对话输入框 / 某个会话)。切换会话、回到列表都不重挂载左栏,也不重播入场动画,
+ * 标题与两栏的位置不跳。
+ */
+export default function AgentLayout() {
+  const { runId } = useParams();
   const mock = agentMockEnabled();
-  const [group, setGroup] = usePageListGroup();
+  const runGroupOf = useRunGroup(runId);
+  // 列表页没有 tab 就是「对话」;会话页的左栏分栏跟随当前会话(巡检会话及其子会话在「自动巡检」),也可以手动切换(记在 URL)
+  const [group, setGroup] = usePageListGroup(runId ? runGroupOf : undefined);
 
   return (
     <>
-      <PageHeader title="智能体" />
+      <PageHeader title="智能体" className="mb-4 md:mb-6" />
       {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" />
@@ -37,37 +33,31 @@ export default function AgentPage() {
       ) : null}
       <div
         data-agent-page
-        className="grid grid-cols-1 gap-4 lg:grid-cols-[minmax(0,20rem)_minmax(0,1fr)] lg:items-start"
+        // 智能体页没有右下角悬浮按钮,收回主内容区为它留的底部空白,两栏正好占满一屏
+        className="-mb-16 grid grid-cols-1 gap-4 lg:grid-cols-[minmax(0,19rem)_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">
+        {/* 窄屏:列表页把会话列表排在输入框下面;会话页不显示列表(顶部有「全部会话」返回) */}
+        <aside
+          className={cn(
+            "pg-slab order-2 rounded-2xl p-3 lg:order-1 lg:block lg:h-[calc(100dvh-11.25rem)] lg:overflow-hidden",
+            runId && "hidden",
+          )}
+        >
           <AgentSessionList
+            activeId={runId}
             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)),
-                },
-              )
-            }
-          />
+        </aside>
+        <div className="order-1 min-w-0 lg:order-2">
+          <Outlet context={{ group } satisfies AgentOutletContext} />
         </div>
       </div>
     </>
   );
 }
+
+export type AgentOutletContext = { group: ReturnType<typeof usePageListGroup>[0] };