feat(agent): 抽屉与会话页统一成一个对话界面,子会话在父会话里实时可见

- 抽屉和会话页渲染同一套 GoalComposer / AgentRunPanel;抽屉标题即最近会话切换,
  头部只有新对话、在页面打开、关闭;去掉右下角悬浮按钮和最小化小窗
- 会话列表合一:对话与巡检混排带类型小标签,搜索 + 一个状态下拉,只列顶层会话
  (GET /agent/runs?roots=true,新增可选参数)
- 子会话卡片:由镜像的 subagent_* 事件折成,显示任务、状态、当前步骤、用时、调用次数、费用,
  可展开看过程、可打开;顶部「N 个子会话运行中」跳到卡片;subagent_completed 加可选 durationMs
- 回答去内部字段:汇报规则禁止照抄键值与字段表;展示层 stripInternalFields 把字段行 / 字段表移进技术信息
- 开场建议按页面给 2 条完整问法、点了直接发;指令只留 /先给方案,/重跑 改成「重新运行」按钮

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01Cxwgnn2pbzQ7rXv3rq7fei
This commit is contained in:
rootandClaude Opus 5.5 committed 2026-10-08 13:56:38 +08:00
1 parent dd0f6e2c09
commit 3692793dff
35 files changed
+1454 -1137

No files matched your search

+5 -7
View File
@@ -1,23 +1,21 @@
import { ArrowLeft, PanelRightOpen } from "lucide-react";
import { Link, useNavigate, useOutletContext, useParams } from "react-router";
import { Link, useNavigate, useParams } from "react-router";
import { agentMockEnabled } from "~/api/agent.ts";
import { agentListHref } from "~/components/agent/agent-nav.ts";
import { AgentRunPanel } from "~/components/agent/agent-run-panel.tsx";
import { agentReturnPath, showAgentRunInDrawer } from "~/components/agent/agent-store.ts";
import { Button } from "~/components/ui/button.tsx";
import type { AgentOutletContext } from "./agent.tsx";
// 会话页的右栏(AGUI-3):会话列占满(顶部概况条、底部输入区);标题与左栏会话列表在外壳 agent.tsx,切换会话不重挂载。
// 步骤、子会话、预算与模型在概况条里。
// 会话页的右栏:和抽屉里同一个会话组件(顶部状态与统计、会话流、底部输入区);标题与左栏会话列表在外壳 agent.tsx,
// 切换会话不重挂载。子会话在会话流里派出它的位置。
export default function AgentRunPage() {
const { runId = "" } = useParams();
const navigate = useNavigate();
const mock = agentMockEnabled();
const { group } = useOutletContext<AgentOutletContext>();
return (
<div className="pg-slab flex h-[calc(100dvh-10.25rem)] min-h-[28rem] flex-col gap-2 rounded-2xl p-3 md:p-4 lg:h-[calc(100dvh-11.25rem)]">
<Button asChild variant="ghost" size="sm" className="-mt-1 -ml-2 self-start text-muted-foreground lg:hidden">
<Link to={agentListHref(group, mock)}>
<Link to={agentListHref(mock)}>
<ArrowLeft />
全部会话
</Link>
@@ -29,7 +27,7 @@ export default function AgentRunPage() {
actions={
// 整页 → 抽屉:回到进智能体页面之前的页面,会话在抽屉里接着看
<Button
variant="outline"
variant="ghost"
size="icon-sm"
aria-label="在侧边打开"
title="在侧边打开,回到之前的页面"
+3 -2
View File
@@ -6,14 +6,15 @@ import { GoalComposer } from "~/components/agent/agent-run-panel.tsx";
import { quickGoalsFor } from "~/components/agent/quick-goals.ts";
import { errorMessage } from "~/lib/api.ts";
// 智能体列表页的右栏:新对话输入框 + 3 个快捷目标(标题与左栏会话列表在外壳 agent.tsx)
// 智能体会话页的右栏:新对话(和抽屉里同一个组件;标题与左栏会话列表在外壳 agent.tsx)
export default function AgentIndexPage() {
const create = useCreateAgentRun();
const navigate = useNavigate();
const mock = agentMockEnabled();
return (
<div className="pg-slab mx-auto w-full max-w-[88ch] rounded-2xl p-4">
<div className="pg-slab flex min-h-[26rem] flex-col rounded-2xl p-3 md:p-4 lg:h-[calc(100dvh-11.25rem)]">
<GoalComposer
className="mx-auto w-full max-w-[88ch]"
pending={create.isPending}
suggestions={quickGoalsFor("/console/agent")}
draftKey={DRAFT_PAGE_GOAL}
+9 -17
View File
@@ -1,27 +1,24 @@
import { FlaskConical } from "lucide-react";
import { Outlet, useParams } from "react-router";
import { agentMockEnabled } from "~/api/agent.ts";
import { agentRunHref, pageListMemory, usePageListGroup, useRunGroup } from "~/components/agent/agent-nav.ts";
import { agentRunHref, pageListMemory } from "~/components/agent/agent-nav.ts";
import { AgentSessionList } from "~/components/agent/agent-session-list.tsx";
import { PageHeader } from "~/components/console/page-header.tsx";
import { Button } from "~/components/ui/button.tsx";
import { cn } from "~/lib/utils.ts";
/**
* 智能体页的外壳(AGUI-3):列表页与会话页共用。标题、演示提示与左栏会话列表在这里,只挂载一次;
* 右栏是子路由(新对话输入框 / 某个会话)。切换会话、回到列表都不重挂载左栏,也不重播入场动画,
* 标题与两栏的位置不跳。
* 智能体会话页的外壳:列表页与会话页共用。标题、演示提示与左栏会话列表在这里,只挂载一次;
* 右栏是子路由(新对话 / 某个会话),和抽屉里是同一个组件。切换会话、回到列表都不重挂载左栏,
* 也不重播入场动画,标题与两栏的位置不跳。
*/
export default function AgentLayout() {
const { runId } = useParams();
const mock = agentMockEnabled();
const runGroupOf = useRunGroup(runId);
// 列表页没有 tab 就是「对话」;会话页的左栏分栏跟随当前会话(巡检会话及其子会话在「自动巡检」),也可以手动切换(记在 URL)
const [group, setGroup] = usePageListGroup(runId ? runGroupOf : undefined);
return (
<>
<PageHeader title="智能体" className="mb-4 md:mb-6" />
<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" />
@@ -33,10 +30,9 @@ export default function AgentLayout() {
) : null}
<div
data-agent-page
// 智能体页没有右下角悬浮按钮,收回主内容区为它留的底部空白,两栏正好占满一屏
className="-mb-16 grid grid-cols-1 gap-4 lg:grid-cols-[minmax(0,19rem)_minmax(0,1fr)] lg:items-start"
className="grid grid-cols-1 gap-4 lg:grid-cols-[minmax(0,19rem)_minmax(0,1fr)] lg:items-start"
>
{/* 窄屏:列表页把会话列表排在输入框下面;会话页不显示列表(顶部有「全部会话」返回) */}
{/* 窄屏:列表页把会话列表排在新对话下面;会话页不显示列表(顶部有「全部会话」返回) */}
<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",
@@ -46,18 +42,14 @@ export default function AgentLayout() {
<AgentSessionList
activeId={runId}
hrefFor={(id) => agentRunHref(id, mock)}
group={group}
onGroupChange={setGroup}
memory={pageListMemory}
className="h-full"
className="h-full max-lg:max-h-[32rem]"
/>
</aside>
<div className="order-1 min-w-0 lg:order-2">
<Outlet context={{ group } satisfies AgentOutletContext} />
<Outlet />
</div>
</div>
</>
);
}
export type AgentOutletContext = { group: ReturnType<typeof usePageListGroup>[0] };
+4 -5
View File
@@ -6,7 +6,7 @@ import { useSession } from "~/api/auth.ts";
import { AgentDrawer, AgentDrawerTrigger } from "~/components/agent/agent-drawer.tsx";
import { outletKey } from "~/components/agent/agent-store.ts";
import { AccountMenu } from "~/components/console/account-menu.tsx";
import { AgentLauncher, AgentNavEntry } from "~/components/console/agent-launcher.tsx";
import { AgentHotkey, AgentNavEntry } from "~/components/console/agent-launcher.tsx";
import { ErrorState } from "~/components/console/empty-state.tsx";
import { InboxBell } from "~/components/console/inbox-bell.tsx";
import { findNavItem, NAV_GROUPS, type NavGroup, pageTitle } from "~/components/console/nav.ts";
@@ -259,7 +259,7 @@ function ConsoleShell({ session }: { session: SessionInfo }) {
<div className="flex items-center gap-0.5 p-1">
<SearchTrigger className="mr-1" />
<InboxBell bare />
{/* 桌面有侧栏主入口与右下角悬浮按钮,顶栏的智能体按钮只在窄屏保留 */}
{/* 桌面的入口是侧栏最上方的「智能体」;没有侧栏的窄屏用顶栏胶囊里的这颗 */}
<AgentDrawerTrigger className="xl:hidden" />
<ThemeToggle bare />
<AccountMenu session={session} bare />
@@ -268,8 +268,7 @@ function ConsoleShell({ session }: { session: SessionInfo }) {
</div>
</header>
{/* 底部留出悬浮按钮的高度,页面末尾的内容能滚到它上面 */}
<main className={cn("relative flex-1 overflow-x-clip", !wide && "px-4 pt-6 pb-24 md:px-6 md:pt-8")}>
<main className={cn("relative flex-1 overflow-x-clip", !wide && "px-4 pt-6 pb-10 md:px-6 md:pt-8")}>
<div
key={outletKey(location.pathname)}
className={cn(!wide && "mx-auto max-w-6xl", "motion-safe:animate-blur-in")}
@@ -278,7 +277,7 @@ function ConsoleShell({ session }: { session: SessionInfo }) {
</div>
</main>
<AgentDrawer />
<AgentLauncher />
<AgentHotkey />
<CommandPalette />
</div>
</div>