```

feat(agent): 添加对持久化子智能体的支持并增强委派管理

添加了持久化子智能体的完整生命周期管理功能，包括创建、更新、删除和查询API接口。
新增了子智能体的JSON-RPC通信协议支持，实现了远程调用和任务管理功能。

同时增强了委派管理器的功能：
- 添加了对本地委派、插件委派和本地回退的开关控制
- 实现了持久化子智能体任务的自动检测和本地执行保护
- 增加了对不同委派类型的权限验证机制

修改了智能体注册表以支持插件智能体的条件性包含，并更新了工具注册逻辑以支持可选工具。

BREAKING CHANGE: 委派管理器的构造函数签名已更改，添加了新的控制参数。
```

app-instance/frontend/app/(app)/agents/page.tsx

@@ -1,11 +1,30 @@
 'use client';
 
 import React, { useCallback, useEffect, useState } from 'react';
-import { Bot, Plus, RefreshCw, Trash2, Loader2, AlertCircle, Tags, ChevronDown } from 'lucide-react';
+import {
+  AlertCircle,
+  Bot,
+  ChevronDown,
+  Loader2,
+  Pencil,
+  Plus,
+  RefreshCw,
+  Tags,
+  Trash2,
+} from 'lucide-react';
 
-import { addAgent, deleteAgent, listAgents, refreshAgents } from '@/lib/api';
+import {
+  addAgent,
+  createSubagent,
+  deleteAgent,
+  deleteSubagent,
+  listAgents,
+  listSubagents,
+  refreshAgents,
+  updateSubagent,
+} from '@/lib/api';
 import { useChatStore } from '@/lib/store';
-import type { UiAgentDescriptor } from '@/types';
+import type { UiAgentDescriptor, UiSubagentDescriptor } from '@/types';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@@ -13,9 +32,11 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/component
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Textarea } from '@/components/ui/textarea';
 
-const EMPTY_FORM = {
+const EMPTY_AGENT_FORM = {
   id: '',
   name: '',
   description: '',
@@ -30,17 +51,69 @@ const EMPTY_FORM = {
   aliases: '',
 };
 
+const EMPTY_SUBAGENT_FORM = {
+  id: '',
+  name: '',
+  description: '',
+  system_prompt: '',
+  model: '',
+  delegation_mode: 'remote_a2a_only',
+  enabled: true,
+  allow_mcp: true,
+  tags: '',
+  aliases: '',
+  metadata_json: '{}',
+  mcp_servers_json: '{}',
+};
+
+function formatJson(value: Record<string, unknown>): string {
+  return JSON.stringify(value, null, 2);
+}
+
+function parseJsonObject(raw: string, label: string): Record<string, unknown> {
+  const probe = raw.trim();
+  if (!probe) {
+    return {};
+  }
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(probe);
+  } catch {
+    throw new Error(`${label} 需要是合法 JSON`);
+  }
+  if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+    throw new Error(`${label} 需要是 JSON 对象`);
+  }
+  return parsed as Record<string, unknown>;
+}
+
+function parseNestedJsonObject(raw: string, label: string): Record<string, Record<string, unknown>> {
+  const parsed = parseJsonObject(raw, label);
+  for (const [key, value] of Object.entries(parsed)) {
+    if (!value || typeof value !== 'object' || Array.isArray(value)) {
+      throw new Error(`${label} 中的 ${key} 必须是 JSON 对象`);
+    }
+  }
+  return parsed as Record<string, Record<string, unknown>>;
+}
+
 export default function AgentsPage() {
   const cachedAgents = useChatStore((s) => s.agentRegistry);
   const setCachedAgents = useChatStore((s) => s.setAgentRegistry);
   const [agents, setAgents] = useState<UiAgentDescriptor[]>(cachedAgents);
+  const [subagents, setSubagents] = useState<UiSubagentDescriptor[]>([]);
   const [loading, setLoading] = useState(cachedAgents.length === 0);
   const [refreshing, setRefreshing] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [dialogOpen, setDialogOpen] = useState(false);
-  const [submitting, setSubmitting] = useState(false);
-  const [advancedOpen, setAdvancedOpen] = useState(false);
-  const [form, setForm] = useState(EMPTY_FORM);
+  const [agentDialogOpen, setAgentDialogOpen] = useState(false);
+  const [subagentDialogOpen, setSubagentDialogOpen] = useState(false);
+  const [agentSubmitting, setAgentSubmitting] = useState(false);
+  const [subagentSubmitting, setSubagentSubmitting] = useState(false);
+  const [agentAdvancedOpen, setAgentAdvancedOpen] = useState(false);
+  const [subagentAdvancedOpen, setSubagentAdvancedOpen] = useState(false);
+  const [agentForm, setAgentForm] = useState(EMPTY_AGENT_FORM);
+  const [subagentForm, setSubagentForm] = useState(EMPTY_SUBAGENT_FORM);
+  const [editingSubagentId, setEditingSubagentId] = useState<string | null>(null);
 
   const load = useCallback(async (background = false) => {
     if (background) {
@@ -50,9 +123,14 @@ export default function AgentsPage() {
     }
     setError(null);
     try {
-      const data = await listAgents();
-      const nextAgents = Array.isArray(data) ? data : [];
+      const [agentData, subagentData] = await Promise.all([
+        listAgents(),
+        listSubagents(),
+      ]);
+      const nextAgents = Array.isArray(agentData) ? agentData : [];
+      const nextSubagents = Array.isArray(subagentData) ? subagentData : [];
       setAgents(nextAgents);
+      setSubagents(nextSubagents);
       setCachedAgents(nextAgents);
     } catch (err: any) {
       setError(err.message || '加载智能体失败');
@@ -73,9 +151,14 @@ export default function AgentsPage() {
     setError(null);
     setRefreshing(true);
     try {
-      const data = await refreshAgents();
-      const nextAgents = data.agents || [];
+      const [agentData, subagentData] = await Promise.all([
+        refreshAgents(),
+        listSubagents(),
+      ]);
+      const nextAgents = agentData.agents || [];
+      const nextSubagents = Array.isArray(subagentData) ? subagentData : [];
       setAgents(nextAgents);
+      setSubagents(nextSubagents);
       setCachedAgents(nextAgents);
     } catch (err: any) {
       setError(err.message || '刷新智能体失败');
@@ -84,59 +167,133 @@ export default function AgentsPage() {
     }
   };
 
-  const handleDialogOpenChange = (open: boolean) => {
-    setDialogOpen(open);
+  const handleAgentDialogOpenChange = (open: boolean) => {
+    setAgentDialogOpen(open);
     if (!open) {
-      setAdvancedOpen(false);
-      setForm(EMPTY_FORM);
+      setAgentAdvancedOpen(false);
+      setAgentForm(EMPTY_AGENT_FORM);
     }
   };
 
-  const handleCreate = async (e: React.FormEvent) => {
+  const handleSubagentDialogOpenChange = (open: boolean) => {
+    setSubagentDialogOpen(open);
+    if (!open) {
+      setSubagentAdvancedOpen(false);
+      setEditingSubagentId(null);
+      setSubagentForm(EMPTY_SUBAGENT_FORM);
+    }
+  };
+
+  const handleCreateAgent = async (e: React.FormEvent) => {
     e.preventDefault();
-    const hasAddress = [form.base_url, form.endpoint, form.card_url].some((value) => value.trim());
+    const hasAddress = [agentForm.base_url, agentForm.endpoint, agentForm.card_url].some((value) => value.trim());
     if (!hasAddress) {
       setError('请至少填写 A2A 部署地址、接口地址或卡片地址');
       return;
     }
-    setSubmitting(true);
+    setAgentSubmitting(true);
     setError(null);
     try {
       await addAgent({
-        id: form.id || undefined,
-        name: form.name || undefined,
-        description: form.description || undefined,
+        id: agentForm.id || undefined,
+        name: agentForm.name || undefined,
+        description: agentForm.description || undefined,
         protocol: 'a2a',
-        base_url: form.base_url || undefined,
-        endpoint: form.endpoint || undefined,
-        card_url: form.card_url || undefined,
-        auth_env: form.auth_env || undefined,
-        auth_mode: form.auth_mode || 'none',
-        auth_audience: form.auth_mode === 'none' ? undefined : form.auth_audience || undefined,
-        auth_scopes: form.auth_mode === 'none'
+        base_url: agentForm.base_url || undefined,
+        endpoint: agentForm.endpoint || undefined,
+        card_url: agentForm.card_url || undefined,
+        auth_env: agentForm.auth_env || undefined,
+        auth_mode: agentForm.auth_mode || 'none',
+        auth_audience: agentForm.auth_mode === 'none' ? undefined : agentForm.auth_audience || undefined,
+        auth_scopes: agentForm.auth_mode === 'none'
           ? []
-          : form.auth_scopes.split(',').map((item) => item.trim()).filter(Boolean),
-        tags: form.tags.split(',').map((item) => item.trim()).filter(Boolean),
-        aliases: form.aliases.split(',').map((item) => item.trim()).filter(Boolean),
+          : agentForm.auth_scopes.split(',').map((item) => item.trim()).filter(Boolean),
+        tags: agentForm.tags.split(',').map((item) => item.trim()).filter(Boolean),
+        aliases: agentForm.aliases.split(',').map((item) => item.trim()).filter(Boolean),
       });
-      handleDialogOpenChange(false);
-      await load();
+      handleAgentDialogOpenChange(false);
+      await load(true);
     } catch (err: any) {
       setError(err.message || '新增智能体失败');
     } finally {
-      setSubmitting(false);
+      setAgentSubmitting(false);
     }
   };
 
-  const handleDelete = async (agentId: string) => {
+  const handleDeleteAgent = async (agentId: string) => {
     try {
       await deleteAgent(agentId);
-      await load();
+      await load(true);
     } catch (err: any) {
       setError(err.message || '删除智能体失败');
     }
   };
 
+  const handleEditSubagent = (subagent: UiSubagentDescriptor) => {
+    setEditingSubagentId(subagent.id);
+    setSubagentForm({
+      id: subagent.id,
+      name: subagent.name,
+      description: subagent.description,
+      system_prompt: subagent.system_prompt || '',
+      model: subagent.model || '',
+      delegation_mode: subagent.delegation_mode || 'remote_a2a_only',
+      enabled: subagent.enabled,
+      allow_mcp: subagent.allow_mcp,
+      tags: (subagent.tags || []).join(', '),
+      aliases: (subagent.aliases || []).join(', '),
+      metadata_json: formatJson(subagent.metadata || {}),
+      mcp_servers_json: formatJson(subagent.mcp_servers || {}),
+    });
+    setSubagentDialogOpen(true);
+  };
+
+  const handleSaveSubagent = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!subagentForm.id.trim()) {
+      setError('Sub-agent ID 不能为空');
+      return;
+    }
+    setSubagentSubmitting(true);
+    setError(null);
+    try {
+      const payload = {
+        id: subagentForm.id.trim(),
+        name: subagentForm.name.trim() || subagentForm.id.trim(),
+        description: subagentForm.description.trim() || subagentForm.name.trim() || subagentForm.id.trim(),
+        system_prompt: subagentForm.system_prompt,
+        model: subagentForm.model.trim() || undefined,
+        enabled: subagentForm.enabled,
+        delegation_mode: subagentForm.delegation_mode,
+        allow_mcp: subagentForm.allow_mcp,
+        tags: subagentForm.tags.split(',').map((item) => item.trim()).filter(Boolean),
+        aliases: subagentForm.aliases.split(',').map((item) => item.trim()).filter(Boolean),
+        metadata: parseJsonObject(subagentForm.metadata_json, 'Metadata'),
+        mcp_servers: parseNestedJsonObject(subagentForm.mcp_servers_json, 'MCP Servers'),
+      };
+      if (editingSubagentId) {
+        await updateSubagent(editingSubagentId, payload);
+      } else {
+        await createSubagent(payload);
+      }
+      handleSubagentDialogOpenChange(false);
+      await load(true);
+    } catch (err: any) {
+      setError(err.message || '保存 Sub-Agent 失败');
+    } finally {
+      setSubagentSubmitting(false);
+    }
+  };
+
+  const handleDeleteManagedSubagent = async (subagentId: string) => {
+    try {
+      await deleteSubagent(subagentId);
+      await load(true);
+    } catch (err: any) {
+      setError(err.message || '删除 Sub-Agent 失败');
+    }
+  };
+
   if (loading) {
     return (
       <div className="flex items-center justify-center py-20">
@@ -154,17 +311,17 @@ export default function AgentsPage() {
             智能体
           </h1>
           <p className="text-sm text-muted-foreground mt-1">
-            管理工作区智能体，并查看来自插件、技能和内置能力的可委派目标。
+            管理外部 A2A 智能体，以及持久化的本地 Sub-Agent。
           </p>
         </div>
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-2 flex-wrap">
           <Button variant="outline" size="sm" onClick={handleRefresh}>
             <RefreshCw className={`w-4 h-4 mr-2 ${refreshing ? 'animate-spin' : ''}`} />
             刷新
           </Button>
-          <Dialog open={dialogOpen} onOpenChange={handleDialogOpenChange}>
+          <Dialog open={agentDialogOpen} onOpenChange={handleAgentDialogOpenChange}>
             <DialogTrigger asChild>
-              <Button size="sm">
+              <Button size="sm" variant="outline">
                 <Plus className="w-4 h-4 mr-2" />
                 新增智能体
               </Button>
@@ -173,53 +330,51 @@ export default function AgentsPage() {
               <DialogHeader>
                 <DialogTitle>新增工作区智能体</DialogTitle>
               </DialogHeader>
-              <form className="space-y-4" onSubmit={handleCreate}>
+              <form className="space-y-4" onSubmit={handleCreateAgent}>
                 <div className="space-y-2">
                   <Label htmlFor="base_url">A2A 部署地址</Label>
                   <Input
                     id="base_url"
-                    value={form.base_url}
-                    onChange={(e) => setForm((s) => ({ ...s, base_url: e.target.value }))}
+                    value={agentForm.base_url}
+                    onChange={(e) => setAgentForm((s) => ({ ...s, base_url: e.target.value }))}
                     placeholder="https://agent.example.com 或 agent.example.com:19090"
                   />
                   <p className="text-xs text-muted-foreground leading-relaxed">
                     默认只需要填写部署地址。保存时会自动读取
-                    <code className="mx-1">/.well-known/agent-card</code>
-                    、<code className="mx-1">/.well-known/agent-card.json</code>
-                    和<code className="mx-1">/.well-known/agent.json</code>
-                    ，并补齐 ID、名称、描述、接口地址等信息。
+                    <code className="mx-1">/.well-known</code>
+                    路径并补齐 card 信息。
                   </p>
                 </div>
-                <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
+                <Collapsible open={agentAdvancedOpen} onOpenChange={setAgentAdvancedOpen}>
                   <CollapsibleTrigger asChild>
                     <Button type="button" variant="outline" className="w-full justify-between">
                       高级设置（可选）
-                      <ChevronDown className={`w-4 h-4 transition-transform ${advancedOpen ? 'rotate-180' : ''}`} />
+                      <ChevronDown className={`w-4 h-4 transition-transform ${agentAdvancedOpen ? 'rotate-180' : ''}`} />
                     </Button>
                   </CollapsibleTrigger>
                   <CollapsibleContent className="space-y-4 pt-4">
                     <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                       <div className="space-y-2">
                         <Label htmlFor="id">ID</Label>
-                        <Input id="id" value={form.id} onChange={(e) => setForm((s) => ({ ...s, id: e.target.value }))} placeholder="留空则从 A2A card 自动生成" />
+                        <Input id="id" value={agentForm.id} onChange={(e) => setAgentForm((s) => ({ ...s, id: e.target.value }))} />
                       </div>
                       <div className="space-y-2">
                         <Label htmlFor="name">名称</Label>
-                        <Input id="name" value={form.name} onChange={(e) => setForm((s) => ({ ...s, name: e.target.value }))} placeholder="留空则从 A2A card 自动填充" />
+                        <Input id="name" value={agentForm.name} onChange={(e) => setAgentForm((s) => ({ ...s, name: e.target.value }))} />
                       </div>
                     </div>
                     <div className="space-y-2">
                       <Label htmlFor="description">描述</Label>
-                      <Textarea id="description" value={form.description} onChange={(e) => setForm((s) => ({ ...s, description: e.target.value }))} rows={3} placeholder="留空则从 A2A card 自动填充" />
+                      <Textarea id="description" value={agentForm.description} onChange={(e) => setAgentForm((s) => ({ ...s, description: e.target.value }))} rows={3} />
                     </div>
                     <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                       <div className="space-y-2">
                         <Label htmlFor="endpoint">接口地址</Label>
-                        <Input id="endpoint" value={form.endpoint} onChange={(e) => setForm((s) => ({ ...s, endpoint: e.target.value }))} placeholder="https://agent.example.com/rpc" />
+                        <Input id="endpoint" value={agentForm.endpoint} onChange={(e) => setAgentForm((s) => ({ ...s, endpoint: e.target.value }))} />
                       </div>
                       <div className="space-y-2">
                         <Label htmlFor="card_url">卡片地址</Label>
-                        <Input id="card_url" value={form.card_url} onChange={(e) => setForm((s) => ({ ...s, card_url: e.target.value }))} placeholder="https://agent.example.com/.well-known/agent-card" />
+                        <Input id="card_url" value={agentForm.card_url} onChange={(e) => setAgentForm((s) => ({ ...s, card_url: e.target.value }))} />
                       </div>
                     </div>
                     <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
@@ -227,8 +382,8 @@ export default function AgentsPage() {
                         <Label htmlFor="auth_mode">鉴权模式</Label>
                         <select
                           id="auth_mode"
-                          value={form.auth_mode}
-                          onChange={(e) => setForm((s) => ({ ...s, auth_mode: e.target.value }))}
+                          value={agentForm.auth_mode}
+                          onChange={(e) => setAgentForm((s) => ({ ...s, auth_mode: e.target.value }))}
                           className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
                         >
                           <option value="none">none</option>
@@ -237,46 +392,211 @@ export default function AgentsPage() {
                       </div>
                       <div className="space-y-2">
                         <Label htmlFor="auth_audience">Audience</Label>
-                        <Input id="auth_audience" value={form.auth_audience} onChange={(e) => setForm((s) => ({ ...s, auth_audience: e.target.value }))} placeholder="planner 或 a2a:planner" />
+                        <Input id="auth_audience" value={agentForm.auth_audience} onChange={(e) => setAgentForm((s) => ({ ...s, auth_audience: e.target.value }))} />
                       </div>
                       <div className="space-y-2">
                         <Label htmlFor="auth_scopes">Scopes</Label>
-                        <Input id="auth_scopes" value={form.auth_scopes} onChange={(e) => setForm((s) => ({ ...s, auth_scopes: e.target.value }))} placeholder="run_task" />
+                        <Input id="auth_scopes" value={agentForm.auth_scopes} onChange={(e) => setAgentForm((s) => ({ ...s, auth_scopes: e.target.value }))} />
                       </div>
                     </div>
                     <div className="space-y-2">
                       <Label htmlFor="auth_env">认证环境变量</Label>
-                      <Input id="auth_env" value={form.auth_env} onChange={(e) => setForm((s) => ({ ...s, auth_env: e.target.value }))} placeholder="例如：MY_AGENT_TOKEN" />
+                      <Input id="auth_env" value={agentForm.auth_env} onChange={(e) => setAgentForm((s) => ({ ...s, auth_env: e.target.value }))} />
                     </div>
                     <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                       <div className="space-y-2">
                         <Label htmlFor="tags">标签</Label>
-                        <Input id="tags" value={form.tags} onChange={(e) => setForm((s) => ({ ...s, tags: e.target.value }))} placeholder="例如：评审, 代码, 安全" />
+                        <Input id="tags" value={agentForm.tags} onChange={(e) => setAgentForm((s) => ({ ...s, tags: e.target.value }))} />
                       </div>
                       <div className="space-y-2">
                         <Label htmlFor="aliases">别名</Label>
-                        <Input id="aliases" value={form.aliases} onChange={(e) => setForm((s) => ({ ...s, aliases: e.target.value }))} placeholder="例如：reviewer, audit-agent" />
+                        <Input id="aliases" value={agentForm.aliases} onChange={(e) => setAgentForm((s) => ({ ...s, aliases: e.target.value }))} />
                       </div>
                     </div>
                   </CollapsibleContent>
                 </Collapsible>
                 <div className="rounded-md border border-border/70 bg-muted/30 px-3 py-2 text-xs text-muted-foreground">
-                  如果远端 card 需要额外鉴权信息，或者服务没有暴露标准
-                  <code className="mx-1">.well-known</code>
-                  路径，再展开高级设置手动补充。
+                  如果这是持久化本地 Sub-Agent，请改用下面的 Sub-Agent 面板，不要在这里单独删除 registry 记录。
                 </div>
                 <div className="flex justify-end gap-2">
-                  <Button type="button" variant="outline" onClick={() => handleDialogOpenChange(false)}>
+                  <Button type="button" variant="outline" onClick={() => handleAgentDialogOpenChange(false)}>
                     取消
                   </Button>
-                  <Button type="submit" disabled={submitting}>
-                    {submitting ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <Plus className="w-4 h-4 mr-2" />}
+                  <Button type="submit" disabled={agentSubmitting}>
+                    {agentSubmitting ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <Plus className="w-4 h-4 mr-2" />}
                     保存
                   </Button>
                 </div>
               </form>
             </DialogContent>
           </Dialog>
+          <Dialog open={subagentDialogOpen} onOpenChange={handleSubagentDialogOpenChange}>
+            <DialogTrigger asChild>
+              <Button size="sm">
+                <Plus className="w-4 h-4 mr-2" />
+                新增 Sub-Agent
+              </Button>
+            </DialogTrigger>
+            <DialogContent className="sm:max-w-3xl">
+              <DialogHeader>
+                <DialogTitle>{editingSubagentId ? '编辑 Sub-Agent' : '新增 Persistent Sub-Agent'}</DialogTitle>
+              </DialogHeader>
+              <form className="space-y-4" onSubmit={handleSaveSubagent}>
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                  <div className="space-y-2">
+                    <Label htmlFor="subagent_id">ID</Label>
+                    <Input
+                      id="subagent_id"
+                      value={subagentForm.id}
+                      disabled={Boolean(editingSubagentId)}
+                      onChange={(e) => setSubagentForm((s) => ({ ...s, id: e.target.value }))}
+                      placeholder="research-agent"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="subagent_name">名称</Label>
+                    <Input
+                      id="subagent_name"
+                      value={subagentForm.name}
+                      onChange={(e) => setSubagentForm((s) => ({ ...s, name: e.target.value }))}
+                      placeholder="Research Agent"
+                    />
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="subagent_description">描述</Label>
+                  <Textarea
+                    id="subagent_description"
+                    rows={3}
+                    value={subagentForm.description}
+                    onChange={(e) => setSubagentForm((s) => ({ ...s, description: e.target.value }))}
+                    placeholder="用于研究和资料整理的本地持久化子智能体"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="subagent_prompt">System Prompt</Label>
+                  <Textarea
+                    id="subagent_prompt"
+                    rows={6}
+                    value={subagentForm.system_prompt}
+                    onChange={(e) => setSubagentForm((s) => ({ ...s, system_prompt: e.target.value }))}
+                    placeholder="Focus on research tasks, be concise, and cite concrete findings."
+                  />
+                </div>
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                  <div className="space-y-2">
+                    <Label htmlFor="subagent_model">模型</Label>
+                    <Input
+                      id="subagent_model"
+                      value={subagentForm.model}
+                      onChange={(e) => setSubagentForm((s) => ({ ...s, model: e.target.value }))}
+                      placeholder="留空则继承主 Agent 默认模型"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="delegation_mode">委派模式</Label>
+                    <select
+                      id="delegation_mode"
+                      value={subagentForm.delegation_mode}
+                      onChange={(e) => setSubagentForm((s) => ({ ...s, delegation_mode: e.target.value }))}
+                      className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+                    >
+                      <option value="remote_a2a_only">remote_a2a_only</option>
+                      <option value="full">full</option>
+                    </select>
+                  </div>
+                </div>
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                  <div className="flex items-center justify-between rounded-md border border-border/70 px-3 py-2">
+                    <div>
+                      <Label htmlFor="subagent_enabled">启用</Label>
+                      <p className="text-xs text-muted-foreground mt-1">关闭后仍保留 workspace 和配置</p>
+                    </div>
+                    <Switch
+                      id="subagent_enabled"
+                      checked={subagentForm.enabled}
+                      onCheckedChange={(checked) => setSubagentForm((s) => ({ ...s, enabled: checked }))}
+                    />
+                  </div>
+                  <div className="flex items-center justify-between rounded-md border border-border/70 px-3 py-2">
+                    <div>
+                      <Label htmlFor="subagent_allow_mcp">允许 MCP</Label>
+                      <p className="text-xs text-muted-foreground mt-1">保留 MCP 配置并在运行时接入</p>
+                    </div>
+                    <Switch
+                      id="subagent_allow_mcp"
+                      checked={subagentForm.allow_mcp}
+                      onCheckedChange={(checked) => setSubagentForm((s) => ({ ...s, allow_mcp: checked }))}
+                    />
+                  </div>
+                </div>
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                  <div className="space-y-2">
+                    <Label htmlFor="subagent_tags">标签</Label>
+                    <Input
+                      id="subagent_tags"
+                      value={subagentForm.tags}
+                      onChange={(e) => setSubagentForm((s) => ({ ...s, tags: e.target.value }))}
+                      placeholder="research, notes"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="subagent_aliases">别名</Label>
+                    <Input
+                      id="subagent_aliases"
+                      value={subagentForm.aliases}
+                      onChange={(e) => setSubagentForm((s) => ({ ...s, aliases: e.target.value }))}
+                      placeholder="researcher, local-research"
+                    />
+                  </div>
+                </div>
+                <Collapsible open={subagentAdvancedOpen} onOpenChange={setSubagentAdvancedOpen}>
+                  <CollapsibleTrigger asChild>
+                    <Button type="button" variant="outline" className="w-full justify-between">
+                      原始 JSON 设置（Metadata / MCP）
+                      <ChevronDown className={`w-4 h-4 transition-transform ${subagentAdvancedOpen ? 'rotate-180' : ''}`} />
+                    </Button>
+                  </CollapsibleTrigger>
+                  <CollapsibleContent className="space-y-4 pt-4">
+                    <div className="space-y-2">
+                      <Label htmlFor="subagent_metadata_json">Metadata JSON</Label>
+                      <Textarea
+                        id="subagent_metadata_json"
+                        rows={6}
+                        value={subagentForm.metadata_json}
+                        onChange={(e) => setSubagentForm((s) => ({ ...s, metadata_json: e.target.value }))}
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="subagent_mcp_json">MCP Servers JSON</Label>
+                      <Textarea
+                        id="subagent_mcp_json"
+                        rows={8}
+                        value={subagentForm.mcp_servers_json}
+                        onChange={(e) => setSubagentForm((s) => ({ ...s, mcp_servers_json: e.target.value }))}
+                      />
+                    </div>
+                  </CollapsibleContent>
+                </Collapsible>
+                <div className="rounded-md border border-border/70 bg-muted/30 px-3 py-2 text-xs text-muted-foreground">
+                  创建后会自动生成独立 workspace、写入
+                  <code className="mx-1">AGENTS.json</code>
+                  和
+                  <code className="mx-1">AGENTS.md</code>
+                  ，并注册到工作区智能体列表。
+                </div>
+                <div className="flex justify-end gap-2">
+                  <Button type="button" variant="outline" onClick={() => handleSubagentDialogOpenChange(false)}>
+                    取消
+                  </Button>
+                  <Button type="submit" disabled={subagentSubmitting}>
+                    {subagentSubmitting ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : editingSubagentId ? <Pencil className="w-4 h-4 mr-2" /> : <Plus className="w-4 h-4 mr-2" />}
+                    {editingSubagentId ? '更新' : '创建'}
+                  </Button>
+                </div>
+              </form>
+            </DialogContent>
+          </Dialog>
         </div>
       </div>
 
@@ -291,73 +611,178 @@ export default function AgentsPage() {
         </Card>
       )}
 
-      <div className="grid grid-cols-1 xl:grid-cols-2 gap-4">
-        {agents.map((agent) => {
-          const isWorkspace = agent.source === 'workspace';
-          return (
-            <Card key={agent.id}>
-              <CardHeader className="pb-3">
-                <div className="flex items-start justify-between gap-4">
-                  <div className="min-w-0 flex-1">
-                    <CardTitle className="text-base truncate">{agent.name}</CardTitle>
-                    <p className="text-xs text-muted-foreground mt-1 font-mono">{agent.id}</p>
-                    <p className="text-sm text-muted-foreground mt-2 leading-relaxed">
-                      {agent.description || '—'}
-                    </p>
-                  </div>
-                  <div className="flex items-center gap-2 flex-wrap justify-end">
-                    <Badge variant="outline">{agent.source === 'workspace' ? '工作区' : agent.source === 'plugin' ? '插件' : agent.source === 'skill' ? '技能' : '内置'}</Badge>
-                    <Badge variant="secondary">{agent.protocol || '本地'}</Badge>
-                    {agent.support_streaming && <Badge className="bg-sky-600">流式</Badge>}
-                    {agent.support_group && <Badge className="bg-emerald-600">群组</Badge>}
-                  </div>
-                </div>
-              </CardHeader>
-              <CardContent className="space-y-3 pt-0">
-                <div className="grid grid-cols-1 gap-2 text-xs text-muted-foreground">
-                  {agent.base_url && <div><span className="font-medium text-foreground">基础地址：</span> {agent.base_url}</div>}
-                  {agent.endpoint && <div><span className="font-medium text-foreground">接口地址：</span> {agent.endpoint}</div>}
-                  {agent.card_url && <div><span className="font-medium text-foreground">卡片地址：</span> {agent.card_url}</div>}
-                  {agent.auth_env && <div><span className="font-medium text-foreground">认证变量：</span> {agent.auth_env}</div>}
-                  {agent.auth_mode && agent.auth_mode !== 'none' && <div><span className="font-medium text-foreground">鉴权模式：</span> {agent.auth_mode}</div>}
-                  {agent.auth_audience && <div><span className="font-medium text-foreground">Audience：</span> {agent.auth_audience}</div>}
-                  {(agent.auth_scopes || []).length > 0 && <div><span className="font-medium text-foreground">Scopes：</span> {(agent.auth_scopes || []).join(', ')}</div>}
-                </div>
-                {(agent.tags.length > 0 || agent.aliases.length > 0) && (
-                  <div className="space-y-2">
-                    {agent.tags.length > 0 && (
-                      <div className="flex items-start gap-2 flex-wrap">
-                        <Tags className="w-3.5 h-3.5 mt-0.5 text-muted-foreground" />
-                        {agent.tags.map((tag) => (
-                          <Badge key={tag} variant="outline" className="text-xs">{tag}</Badge>
-                        ))}
-                      </div>
-                    )}
-                    {agent.aliases.length > 0 && (
-                      <div className="flex items-center gap-2 flex-wrap text-xs text-muted-foreground">
-                        <span className="font-medium text-foreground">别名：</span>
-                        {agent.aliases.map((alias) => (
-                          <code key={alias} className="px-2 py-0.5 rounded bg-muted">{alias}</code>
-                        ))}
+      <Tabs defaultValue="agents" className="space-y-4">
+        <TabsList>
+          <TabsTrigger value="agents">委派目标</TabsTrigger>
+          <TabsTrigger value="subagents">Persistent Sub-Agents</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="agents" className="space-y-4">
+          <div className="grid grid-cols-1 xl:grid-cols-2 gap-4">
+            {agents.map((agent) => {
+              const isWorkspace = agent.source === 'workspace';
+              const isManagedSubagent = Boolean(agent.metadata && agent.metadata.local_subagent);
+              return (
+                <Card key={agent.id}>
+                  <CardHeader className="pb-3">
+                    <div className="flex items-start justify-between gap-4">
+                      <div className="min-w-0 flex-1">
+                        <CardTitle className="text-base truncate">{agent.name}</CardTitle>
+                        <p className="text-xs text-muted-foreground mt-1 font-mono">{agent.id}</p>
+                        <p className="text-sm text-muted-foreground mt-2 leading-relaxed">
+                          {agent.description || '—'}
+                        </p>
+                      </div>
+                      <div className="flex items-center gap-2 flex-wrap justify-end">
+                        <Badge variant="outline">{agent.source === 'workspace' ? '工作区' : agent.source === 'plugin' ? '插件' : agent.source === 'skill' ? '技能' : '内置'}</Badge>
+                        <Badge variant="secondary">{agent.protocol || '本地'}</Badge>
+                        {isManagedSubagent && <Badge className="bg-amber-600">受管 Sub-Agent</Badge>}
+                        {agent.support_streaming && <Badge className="bg-sky-600">流式</Badge>}
+                        {agent.support_group && <Badge className="bg-emerald-600">群组</Badge>}
+                      </div>
+                    </div>
+                  </CardHeader>
+                  <CardContent className="space-y-3 pt-0">
+                    <div className="grid grid-cols-1 gap-2 text-xs text-muted-foreground">
+                      {agent.base_url && <div><span className="font-medium text-foreground">基础地址：</span> {agent.base_url}</div>}
+                      {agent.endpoint && <div><span className="font-medium text-foreground">接口地址：</span> {agent.endpoint}</div>}
+                      {agent.card_url && <div><span className="font-medium text-foreground">卡片地址：</span> {agent.card_url}</div>}
+                      {agent.auth_env && <div><span className="font-medium text-foreground">认证变量：</span> {agent.auth_env}</div>}
+                      {agent.auth_mode && agent.auth_mode !== 'none' && <div><span className="font-medium text-foreground">鉴权模式：</span> {agent.auth_mode}</div>}
+                      {agent.auth_audience && <div><span className="font-medium text-foreground">Audience：</span> {agent.auth_audience}</div>}
+                      {(agent.auth_scopes || []).length > 0 && <div><span className="font-medium text-foreground">Scopes：</span> {(agent.auth_scopes || []).join(', ')}</div>}
+                    </div>
+                    {(agent.tags.length > 0 || agent.aliases.length > 0) && (
+                      <div className="space-y-2">
+                        {agent.tags.length > 0 && (
+                          <div className="flex items-start gap-2 flex-wrap">
+                            <Tags className="w-3.5 h-3.5 mt-0.5 text-muted-foreground" />
+                            {agent.tags.map((tag) => (
+                              <Badge key={tag} variant="outline" className="text-xs">{tag}</Badge>
+                            ))}
+                          </div>
+                        )}
+                        {agent.aliases.length > 0 && (
+                          <div className="flex items-center gap-2 flex-wrap text-xs text-muted-foreground">
+                            <span className="font-medium text-foreground">别名：</span>
+                            {agent.aliases.map((alias) => (
+                              <code key={alias} className="px-2 py-0.5 rounded bg-muted">{alias}</code>
+                            ))}
+                          </div>
+                        )}
                       </div>
                     )}
+                    <div className="flex justify-end">
+                      {isManagedSubagent ? (
+                        <span className="text-xs text-muted-foreground">请在 Sub-Agent 面板管理</span>
+                      ) : isWorkspace ? (
+                        <Button variant="outline" size="sm" onClick={() => handleDeleteAgent(agent.id)}>
+                          <Trash2 className="w-4 h-4 mr-2" />
+                          删除
+                        </Button>
+                      ) : (
+                        <span className="text-xs text-muted-foreground">只读来源</span>
+                      )}
+                    </div>
+                  </CardContent>
+                </Card>
+              );
+            })}
+          </div>
+        </TabsContent>
+
+        <TabsContent value="subagents" className="space-y-4">
+          <Card className="border-border/70 bg-muted/20">
+            <CardContent className="pt-6 text-sm text-muted-foreground leading-relaxed">
+              持久化 Sub-Agent 会在
+              <code className="mx-1">~/.nanobot/workspace/agents/&lt;id&gt;_agent</code>
+              下拥有自己的 workspace、`AGENTS.json`、`AGENTS.md`、skills 和 memory。
+              默认委派模式是
+              <code className="mx-1">remote_a2a_only</code>
+              ，即只能向外委派到远端 A2A agent。
+            </CardContent>
+          </Card>
+          <div className="grid grid-cols-1 xl:grid-cols-2 gap-4">
+            {subagents.map((subagent) => (
+              <Card key={subagent.id}>
+                <CardHeader className="pb-3">
+                  <div className="flex items-start justify-between gap-4">
+                    <div className="min-w-0 flex-1">
+                      <CardTitle className="text-base truncate">{subagent.name}</CardTitle>
+                      <p className="text-xs text-muted-foreground mt-1 font-mono">{subagent.id}</p>
+                      <p className="text-sm text-muted-foreground mt-2 leading-relaxed">
+                        {subagent.description || '—'}
+                      </p>
+                    </div>
+                    <div className="flex items-center gap-2 flex-wrap justify-end">
+                      <Badge variant={subagent.enabled ? 'default' : 'outline'}>
+                        {subagent.enabled ? '启用' : '停用'}
+                      </Badge>
+                      <Badge variant="secondary">{subagent.delegation_mode}</Badge>
+                      {subagent.allow_mcp && <Badge className="bg-sky-600">MCP</Badge>}
+                      {subagent.model && <Badge variant="outline">{subagent.model}</Badge>}
+                    </div>
                   </div>
-                )}
-                <div className="flex justify-end">
-                  {isWorkspace ? (
-                    <Button variant="outline" size="sm" onClick={() => handleDelete(agent.id)}>
+                </CardHeader>
+                <CardContent className="space-y-3 pt-0">
+                  <div className="grid grid-cols-1 gap-2 text-xs text-muted-foreground">
+                    <div><span className="font-medium text-foreground">Workspace：</span> {subagent.workspace}</div>
+                    <div><span className="font-medium text-foreground">Base URL：</span> {subagent.base_url}</div>
+                    <div><span className="font-medium text-foreground">RPC：</span> {subagent.endpoint}</div>
+                    <div><span className="font-medium text-foreground">Card：</span> {subagent.card_url}</div>
+                    <div><span className="font-medium text-foreground">MCP Servers：</span> {Object.keys(subagent.mcp_servers || {}).length}</div>
+                  </div>
+                  {subagent.system_prompt && (
+                    <div className="rounded-md border border-border/70 bg-muted/30 px-3 py-2">
+                      <div className="text-xs font-medium text-foreground mb-1">System Prompt</div>
+                      <p className="text-xs text-muted-foreground whitespace-pre-wrap line-clamp-5">
+                        {subagent.system_prompt}
+                      </p>
+                    </div>
+                  )}
+                  {(subagent.tags.length > 0 || subagent.aliases.length > 0) && (
+                    <div className="space-y-2">
+                      {subagent.tags.length > 0 && (
+                        <div className="flex items-start gap-2 flex-wrap">
+                          <Tags className="w-3.5 h-3.5 mt-0.5 text-muted-foreground" />
+                          {subagent.tags.map((tag) => (
+                            <Badge key={tag} variant="outline" className="text-xs">{tag}</Badge>
+                          ))}
+                        </div>
+                      )}
+                      {subagent.aliases.length > 0 && (
+                        <div className="flex items-center gap-2 flex-wrap text-xs text-muted-foreground">
+                          <span className="font-medium text-foreground">别名：</span>
+                          {subagent.aliases.map((alias) => (
+                            <code key={alias} className="px-2 py-0.5 rounded bg-muted">{alias}</code>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  )}
+                  <div className="flex justify-end gap-2">
+                    <Button variant="outline" size="sm" onClick={() => handleEditSubagent(subagent)}>
+                      <Pencil className="w-4 h-4 mr-2" />
+                      编辑
+                    </Button>
+                    <Button variant="outline" size="sm" onClick={() => handleDeleteManagedSubagent(subagent.id)}>
                       <Trash2 className="w-4 h-4 mr-2" />
                       删除
                     </Button>
-                  ) : (
-                    <span className="text-xs text-muted-foreground">只读来源</span>
-                  )}
-                </div>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+          {subagents.length === 0 && (
+            <Card>
+              <CardContent className="pt-6 text-sm text-muted-foreground">
+                还没有持久化 Sub-Agent。点击右上角“新增 Sub-Agent”开始创建。
               </CardContent>
             </Card>
-          );
-        })}
-      </div>
+          )}
+        </TabsContent>
+      </Tabs>
     </div>
   );
 }

app-instance/frontend/app/(app)/cron/page.tsx

@@ -20,6 +20,7 @@ import {
 } from '@/lib/api';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { TaskManagementTabs } from '@/components/task-management/TaskManagementTabs';
 import { Badge } from '@/components/ui/badge';
 import { Switch } from '@/components/ui/switch';
 import { Input } from '@/components/ui/input';
@@ -132,6 +133,8 @@ export default function CronPage() {
 
   return (
     <div className="max-w-5xl mx-auto p-6 space-y-6">
+      <TaskManagementTabs />
+
       <div className="flex items-center justify-between">
         <h1 className="text-2xl font-bold flex items-center gap-2">
           <Clock className="w-6 h-6" />

app-instance/frontend/app/(app)/office/[taskId]/page.tsx

@@ -0,0 +1,532 @@
+'use client';
+
+import Link from 'next/link';
+import { useParams } from 'next/navigation';
+import React from 'react';
+import {
+  ArrowLeft,
+  ArrowRight,
+  Boxes,
+  FolderOutput,
+  ListTree,
+  MessageSquare,
+  PanelRightOpen,
+  Siren,
+  Users,
+} from 'lucide-react';
+
+import {
+  OfficeStatusBadge,
+  formatOfficeDuration,
+  formatOfficeTime,
+  progressPercent,
+} from '@/components/office/OfficeShared';
+import { OfficePhaserCanvas } from '@/components/office/OfficePhaserCanvas';
+import { TaskManagementTabs } from '@/components/task-management/TaskManagementTabs';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { buildOfficeView, isOfficeTaskTerminal } from '@/lib/office';
+import { useChatStore } from '@/lib/store';
+
+function PixelPanel({
+  title,
+  subtitle,
+  children,
+  icon: Icon,
+}: {
+  title: string;
+  subtitle?: string;
+  children: React.ReactNode;
+  icon?: React.ComponentType<{ className?: string }>;
+}) {
+  return (
+    <div className="rounded-none border-4 border-[#0e1119] bg-[#141722] p-4 text-slate-100 shadow-[0_0_0_2px_#1a1b2f_inset]">
+      <div className="flex items-center gap-2 font-mono text-sm font-bold uppercase tracking-[0.18em] text-[#fef3c7]">
+        {Icon ? <Icon className="h-4 w-4" /> : null}
+        {title}
+      </div>
+      {subtitle ? (
+        <div className="mt-2 text-xs text-slate-400">{subtitle}</div>
+      ) : null}
+      <div className="mt-4">{children}</div>
+    </div>
+  );
+}
+
+function BoardPanel({
+  icon: Icon,
+  title,
+  description,
+  children,
+}: {
+  icon: React.ComponentType<{ className?: string }>;
+  title: string;
+  description?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <Card className="rounded-none border-4 border-[#0e1119] bg-[#141722] text-slate-100 shadow-[0_0_0_2px_#1a1b2f_inset]">
+      <CardHeader className="border-b border-[#262a3d] pb-3">
+        <CardTitle className="flex items-center gap-2 text-base text-[#fef3c7]">
+          <Icon className="h-4 w-4" />
+          {title}
+        </CardTitle>
+        {description ? <CardDescription className="text-slate-400">{description}</CardDescription> : null}
+      </CardHeader>
+      <CardContent>{children}</CardContent>
+    </Card>
+  );
+}
+
+export default function OfficeDetailPage() {
+  const params = useParams<{ taskId: string }>();
+  const taskId = decodeURIComponent(Array.isArray(params?.taskId) ? params.taskId[0] : params?.taskId ?? '');
+
+  const sessions = useChatStore((state) => state.sessions);
+  const processRuns = useChatStore((state) => state.processRuns);
+  const processEvents = useChatStore((state) => state.processEvents);
+  const processArtifacts = useChatStore((state) => state.processArtifacts);
+
+  const office = React.useMemo(
+    () => buildOfficeView(taskId, { sessions, processRuns, processEvents, processArtifacts }),
+    [processArtifacts, processEvents, processRuns, sessions, taskId]
+  );
+
+  const [selectedRunId, setSelectedRunId] = React.useState<string | null>(null);
+  const [detailOpen, setDetailOpen] = React.useState(false);
+
+  React.useEffect(() => {
+    setSelectedRunId(office?.rootRunId ?? null);
+    setDetailOpen(false);
+  }, [office?.rootRunId]);
+
+  const selectedTask = React.useMemo(
+    () => office?.tasks.find((task) => task.runId === selectedRunId) ?? office?.tasks[0] ?? null,
+    [office?.tasks, selectedRunId]
+  );
+
+  const selectedEvents = React.useMemo(
+    () => processEvents
+      .filter((event) => event.run_id === selectedTask?.runId)
+      .sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
+      .slice(0, 8),
+    [processEvents, selectedTask?.runId]
+  );
+
+  const selectedArtifacts = React.useMemo(
+    () => processArtifacts
+      .filter((artifact) => artifact.run_id === selectedTask?.runId)
+      .sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime()),
+    [processArtifacts, selectedTask?.runId]
+  );
+
+  const openRunDetail = React.useCallback((runId: string) => {
+    setSelectedRunId(runId);
+    setDetailOpen(true);
+  }, []);
+
+  if (!office) {
+    return (
+      <div className="mx-auto flex max-w-4xl flex-col gap-4 p-6">
+        <Button asChild variant="outline" className="w-fit">
+          <Link href="/office">
+            <ArrowLeft className="mr-2 h-4 w-4" />
+            返回 Office 列表
+          </Link>
+        </Button>
+        <Card className="border-dashed">
+          <CardContent className="py-16 text-center">
+            <h1 className="text-2xl font-semibold">任务不存在</h1>
+            <p className="mt-2 text-sm text-muted-foreground">
+              当前 store 中没有这个 task 的运行数据。先从对话页发起任务，或者回到 Office 列表查看当前可用任务。
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  const progressValue = progressPercent(office.progress.value, office.progress.max);
+
+  return (
+    <div className="mx-auto max-w-[1720px] space-y-6 p-6">
+      <TaskManagementTabs />
+
+      <div className="flex flex-wrap items-center gap-3">
+        <Button asChild variant="outline" size="sm">
+          <Link href="/office">
+            <ArrowLeft className="mr-2 h-4 w-4" />
+            返回 Office
+          </Link>
+        </Button>
+        <Button asChild variant="ghost" size="sm">
+          <Link href="/">
+            <MessageSquare className="mr-2 h-4 w-4" />
+            回到对话
+          </Link>
+        </Button>
+      </div>
+
+      <div className="space-y-5">
+        <div className="mx-auto max-w-[1280px] rounded-none border-4 border-[#0e1119] bg-[#141522] p-4 shadow-[0_0_0_2px_#241d36_inset]">
+          <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+            <div className="min-w-0">
+              <div className="flex flex-wrap items-center gap-3">
+                <h1 className="truncate font-mono text-3xl font-bold uppercase tracking-[0.18em] text-[#fef3c7]">
+                  {office.title}
+                </h1>
+                <OfficeStatusBadge status={office.status} className="bg-black/20" />
+              </div>
+              <div className="mt-3 flex flex-wrap items-center gap-x-4 gap-y-2 font-mono text-xs uppercase tracking-[0.14em] text-slate-400">
+                <span>Lead: {office.rootActorName}</span>
+                <span>Session: {office.sourceSessionLabel}</span>
+                <span>Started: {formatOfficeTime(office.createdAt)}</span>
+                <span>Duration: {formatOfficeDuration(office.durationMs)}</span>
+              </div>
+            </div>
+
+            <div className="grid min-w-[320px] gap-3 sm:grid-cols-2 lg:w-[430px]">
+              <MetricTile label="运行实例" value={String(office.stats.totalRuns)} />
+              <MetricTile label="参与成员" value={String(office.stats.memberCount)} />
+              <MetricTile label="产物数量" value={String(office.stats.artifactCount)} />
+              <MetricTile label="告警数量" value={String(office.alerts.length)} />
+            </div>
+          </div>
+        </div>
+
+        <div className="mx-auto max-w-[1280px]">
+          <OfficePhaserCanvas
+            office={office}
+            selectedRunId={selectedTask?.runId ?? null}
+            onRunSelect={openRunDetail}
+            showMetaBar={false}
+          />
+        </div>
+
+        <div className="mx-auto grid max-w-[1280px] gap-5 xl:grid-cols-[390px_minmax(0,1fr)_390px]">
+          <PixelPanel
+            title="昨日小记"
+            subtitle="用任务摘要、告警和最近更新来替代原版 memo 区。"
+          >
+            <div className="space-y-3 text-sm leading-6 text-slate-300">
+              <div className="rounded-none border-2 border-[#2d3348] bg-[#0f1420] px-3 py-3">
+                {selectedTask?.summary || '当前选中任务没有摘要，先从右侧任务看板切一个具体 run 看现场。'}
+              </div>
+              {office.alerts.slice(0, 2).map((alert) => (
+                <button
+                  key={alert.id}
+                  type="button"
+                  disabled={!alert.runId}
+                  onClick={() => alert.runId && openRunDetail(alert.runId)}
+                  className="block w-full rounded-none border-2 border-[#40202a] bg-[#201118] px-3 py-3 text-left transition-colors enabled:hover:border-[#fb7185] disabled:cursor-default"
+                >
+                  <div className="font-medium text-rose-200">{alert.title}</div>
+                  {alert.description ? <div className="mt-1 text-xs text-slate-400">{alert.description}</div> : null}
+                </button>
+              ))}
+            </div>
+          </PixelPanel>
+
+          <PixelPanel
+            title="任务控制台"
+            subtitle="保留原版中间控制栏的位置，但改成适配 task runtime 的真实数据。"
+          >
+            <div className="space-y-4">
+              <div className="grid gap-3 sm:grid-cols-2">
+                <MiniMetric label="当前阶段" value={office.progress.stageLabel ?? office.currentStageLabel ?? '-'} />
+                <MiniMetric label="活跃实例" value={String(office.stats.activeRuns)} />
+              </div>
+
+              <div className="space-y-2">
+                <div className="flex items-center justify-between gap-3 font-mono text-[11px] uppercase tracking-[0.14em] text-slate-400">
+                  <span>{office.progress.label}</span>
+                  <span>{progressValue}%</span>
+                </div>
+                <div className="h-4 rounded-none border-2 border-[#263144] bg-[#0f1420] p-[2px]">
+                  <div
+                    className="h-full bg-[linear-gradient(90deg,#22d3ee,#fde047,#fb7185)] transition-all"
+                    style={{ width: `${progressValue}%` }}
+                  />
+                </div>
+              </div>
+
+              {selectedTask ? (
+                <div className="rounded-none border-2 border-[#2d3348] bg-[#0f1420] px-3 py-3">
+                  <div className="font-mono text-[11px] uppercase tracking-[0.14em] text-slate-400">当前聚焦</div>
+                  <div className="mt-2 text-sm font-semibold text-slate-100">{selectedTask.title}</div>
+                  <div className="mt-1 text-xs text-slate-400">
+                    {selectedTask.actorName} · {selectedTask.stageLabel ?? '无阶段标签'}
+                  </div>
+                </div>
+              ) : null}
+
+              <div className="grid gap-2 sm:grid-cols-2">
+                <Button
+                  onClick={() => setDetailOpen(true)}
+                  className="w-full rounded-none border-2 border-[#2f3b16] bg-[#78a340] text-[#f3ffe6] hover:bg-[#8fbe4a]"
+                >
+                  打开详情
+                  <PanelRightOpen className="ml-2 h-4 w-4" />
+                </Button>
+                <Button
+                  asChild
+                  variant="outline"
+                  className="w-full rounded-none border-2 border-[#30364d] bg-[#171b29] text-slate-100 hover:bg-[#21283a]"
+                >
+                  <Link href="/">
+                    回到对话
+                    <ArrowRight className="ml-2 h-4 w-4" />
+                  </Link>
+                </Button>
+              </div>
+
+              {isOfficeTaskTerminal(office.status) ? (
+                <div className="rounded-none border-2 border-[#365443] bg-[#12221d] px-3 py-3 text-sm text-emerald-200">
+                  任务已结束，办公室已解散，但现场记录仍可回看。
+                </div>
+              ) : null}
+            </div>
+          </PixelPanel>
+
+          <PixelPanel
+            title="办公人员名单"
+            subtitle="原版 visitor 区的替代，这里展示当前参与 task 的 agent 成员。"
+          >
+            <div className="space-y-2">
+              {office.members.map((member) => (
+                <button
+                  key={member.memberId}
+                  type="button"
+                  onClick={() => openRunDetail(member.currentRunId)}
+                  className="flex w-full items-center justify-between gap-3 rounded-none border-2 border-[#2d3348] bg-[#0f1420] px-3 py-3 text-left transition-colors hover:border-[#64748b]"
+                >
+                  <div className="min-w-0">
+                    <div className="truncate font-medium text-slate-100">{member.actorName}</div>
+                    <div className="truncate text-xs text-slate-400">{member.currentTitle}</div>
+                  </div>
+                  <OfficeStatusBadge status={member.status} />
+                </button>
+              ))}
+            </div>
+          </PixelPanel>
+        </div>
+
+        <div className="mx-auto grid max-w-[1280px] gap-5 xl:grid-cols-[1.08fr_0.92fr]">
+          <BoardPanel
+            icon={ListTree}
+            title="任务看板"
+            description="当前 task 下所有 run 的结构化列表。"
+          >
+            <div className="space-y-3">
+              {office.tasks.map((task) => (
+                <button
+                  key={task.runId}
+                  type="button"
+                  onClick={() => openRunDetail(task.runId)}
+                  className={`w-full rounded-none border-2 px-4 py-3 text-left transition-colors ${
+                    selectedTask?.runId === task.runId
+                      ? 'border-[#facc15] bg-[#201922]'
+                      : 'border-[#2d3348] bg-[#0f1420] hover:border-[#64748b]'
+                  }`}
+                >
+                  <div className="flex items-start justify-between gap-3">
+                    <div className="min-w-0">
+                      <div className="flex items-center gap-2">
+                        <span className="truncate font-medium text-slate-100">{task.title}</span>
+                        {task.isRoot ? (
+                          <span className="rounded-none border border-[#4a3c17] bg-[#3b2f12] px-2 py-0.5 font-mono text-[10px] text-[#fef3c7]">
+                            ROOT
+                          </span>
+                        ) : null}
+                      </div>
+                      <div className="mt-1 flex flex-wrap gap-x-3 gap-y-1 text-xs text-slate-400">
+                        <span>{task.actorName}</span>
+                        <span>{formatOfficeTime(task.updatedAt)}</span>
+                        <span>{task.artifactCount} 个产物</span>
+                      </div>
+                    </div>
+                    <OfficeStatusBadge status={task.status} />
+                  </div>
+                </button>
+              ))}
+            </div>
+          </BoardPanel>
+
+          <div className="space-y-5">
+            <BoardPanel
+              icon={Boxes}
+              title="分工关系"
+              description="主 Agent 到子 Agent 的委派关系。"
+            >
+              <div className="space-y-2">
+                {office.assignments.length === 0 ? (
+                  <div className="rounded-none border-2 border-dashed border-[#30364d] bg-[#0f1420] px-3 py-4 text-sm text-slate-400">
+                    当前没有可见的子任务分工。
+                  </div>
+                ) : (
+                  office.assignments.map((assignment) => (
+                    <button
+                      key={assignment.ownerRunId}
+                      type="button"
+                      onClick={() => openRunDetail(assignment.ownerRunId)}
+                      className="w-full rounded-none border-2 border-[#2d3348] bg-[#0f1420] px-3 py-3 text-left text-sm transition-colors hover:border-[#64748b]"
+                    >
+                      <div className="font-medium text-slate-100">{assignment.label}</div>
+                      <div className="mt-1 text-slate-400">{assignment.assigneeActorNames.join(' / ')}</div>
+                    </button>
+                  ))
+                )}
+              </div>
+            </BoardPanel>
+
+            <BoardPanel
+              icon={Siren}
+              title="现场告警"
+              description="优先展示失败、阻塞和较高风险的任务信号。"
+            >
+              <div className="space-y-2">
+                {office.alerts.length === 0 ? (
+                  <div className="rounded-none border-2 border-dashed border-[#30364d] bg-[#0f1420] px-3 py-4 text-sm text-slate-400">
+                    当前没有高优先级告警。
+                  </div>
+                ) : (
+                  office.alerts.map((alert) => (
+                    <button
+                      key={alert.id}
+                      type="button"
+                      disabled={!alert.runId}
+                      onClick={() => alert.runId && openRunDetail(alert.runId)}
+                      className="w-full rounded-none border-2 border-[#40202a] bg-[#201118] px-3 py-3 text-left transition-colors enabled:hover:border-[#fb7185] disabled:cursor-default"
+                    >
+                      <div className="font-medium text-rose-200">{alert.title}</div>
+                      {alert.description ? <div className="mt-1 text-sm text-slate-400">{alert.description}</div> : null}
+                    </button>
+                  ))
+                )}
+              </div>
+            </BoardPanel>
+          </div>
+        </div>
+      </div>
+
+      <Sheet open={detailOpen} onOpenChange={setDetailOpen}>
+        <SheetContent side="right" className="w-full border-l border-border sm:max-w-3xl">
+          <SheetHeader className="pr-8">
+            <SheetTitle>{selectedTask?.title ?? '任务详情'}</SheetTitle>
+            <SheetDescription>
+              {selectedTask
+                ? `${selectedTask.actorName} · ${selectedTask.stageLabel ?? '无阶段标签'}`
+                : '当前没有选中的任务实例。'}
+            </SheetDescription>
+          </SheetHeader>
+
+          {!selectedTask ? (
+            <div className="mt-6 rounded-xl border border-dashed border-border/60 px-4 py-6 text-sm text-muted-foreground">
+              当前没有可展示的任务详情。
+            </div>
+          ) : (
+            <ScrollArea className="mt-6 h-[calc(100vh-8.5rem)] pr-3">
+              <div className="space-y-4 pb-6">
+                <div className="rounded-xl border border-border/60 px-4 py-4">
+                  <div className="flex items-center justify-between gap-3">
+                    <div className="min-w-0">
+                      <div className="truncate font-medium">{selectedTask.title}</div>
+                      <div className="mt-1 text-xs text-muted-foreground">{selectedTask.actorName}</div>
+                    </div>
+                    <OfficeStatusBadge status={selectedTask.status} />
+                  </div>
+                  <div className="mt-3 grid gap-2 text-sm">
+                    <div className="flex items-center justify-between gap-3">
+                      <span className="text-muted-foreground">开始时间</span>
+                      <span>{formatOfficeTime(selectedTask.startedAt)}</span>
+                    </div>
+                    <div className="flex items-center justify-between gap-3">
+                      <span className="text-muted-foreground">最近更新</span>
+                      <span>{formatOfficeTime(selectedTask.updatedAt)}</span>
+                    </div>
+                    <div className="flex items-center justify-between gap-3">
+                      <span className="text-muted-foreground">阶段</span>
+                      <span>{selectedTask.stageLabel ?? '-'}</span>
+                    </div>
+                  </div>
+                  {selectedTask.summary ? (
+                    <div className="mt-3 rounded-lg bg-muted/40 px-3 py-3 text-sm text-muted-foreground">
+                      {selectedTask.summary}
+                    </div>
+                  ) : null}
+                </div>
+
+                <div className="grid gap-4 lg:grid-cols-[0.95fr_1.05fr]">
+                  <div className="rounded-xl border border-border/60">
+                    <div className="border-b border-border/60 px-4 py-3 text-sm font-medium">产物</div>
+                    <div className="space-y-2 p-4">
+                      {selectedArtifacts.length === 0 ? (
+                        <div className="text-sm text-muted-foreground">当前没有产物。</div>
+                      ) : (
+                        selectedArtifacts.map((artifact) => (
+                          <div key={artifact.artifact_id} className="rounded-lg border border-border/60 px-3 py-3">
+                            <div className="font-medium">{artifact.title}</div>
+                            <div className="mt-1 text-xs text-muted-foreground">
+                              {artifact.artifact_type} · {formatOfficeTime(artifact.created_at)}
+                            </div>
+                          </div>
+                        ))
+                      )}
+                    </div>
+                  </div>
+
+                  <div className="rounded-xl border border-border/60">
+                    <div className="border-b border-border/60 px-4 py-3 text-sm font-medium">最近事件</div>
+                    <div className="space-y-2 p-4">
+                      {selectedEvents.length === 0 ? (
+                        <div className="text-sm text-muted-foreground">当前没有事件。</div>
+                      ) : (
+                        selectedEvents.map((event) => (
+                          <div key={event.event_id} className="rounded-lg border border-border/60 px-3 py-3">
+                            <div className="flex items-center justify-between gap-3">
+                              <div className="text-xs uppercase tracking-wide text-muted-foreground">{event.kind}</div>
+                              <div className="text-xs text-muted-foreground">{formatOfficeTime(event.created_at)}</div>
+                            </div>
+                            <div className="mt-2 text-sm text-foreground/90">
+                              {event.text || '结构化更新'}
+                            </div>
+                          </div>
+                        ))
+                      )}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </ScrollArea>
+          )}
+        </SheetContent>
+      </Sheet>
+    </div>
+  );
+}
+
+function MetricTile({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="rounded-none border-2 border-[#2d3348] bg-[#0f1420] px-4 py-4 text-slate-100">
+      <div className="font-mono text-[11px] uppercase tracking-[0.14em] text-slate-400">{label}</div>
+      <div className="mt-2 text-xl font-semibold">{value}</div>
+    </div>
+  );
+}
+
+function MiniMetric({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="rounded-none border-2 border-[#2d3348] bg-[#0f1420] px-3 py-3 text-slate-100">
+      <div className="font-mono text-[11px] uppercase tracking-[0.14em] text-slate-400">{label}</div>
+      <div className="mt-2 text-sm font-semibold">{value}</div>
+    </div>
+  );
+}

app-instance/frontend/app/(app)/office/page.tsx

@@ -0,0 +1,268 @@
+'use client';
+
+import Link from 'next/link';
+import React from 'react';
+import {
+  Activity,
+  ArrowRight,
+  Clock3,
+  FolderKanban,
+  Loader2,
+  Sparkles,
+  Users,
+} from 'lucide-react';
+
+import { OfficeStatusBadge, formatOfficeTime, progressPercent } from '@/components/office/OfficeShared';
+import { TaskManagementTabs } from '@/components/task-management/TaskManagementTabs';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { buildOfficeTaskList, isOfficeTaskTerminal } from '@/lib/office';
+import { useChatStore } from '@/lib/store';
+
+function TaskCard({
+  taskId,
+  title,
+  sessionLabel,
+  rootActorName,
+  status,
+  updatedAt,
+  memberCount,
+  activeRuns,
+  artifactCount,
+  errorCount,
+  currentStageLabel,
+  progressLabel,
+  progressValue,
+}: {
+  taskId: string;
+  title: string;
+  sessionLabel: string;
+  rootActorName: string;
+  status: Parameters<typeof OfficeStatusBadge>[0]['status'];
+  updatedAt: string;
+  memberCount: number;
+  activeRuns: number;
+  artifactCount: number;
+  errorCount: number;
+  currentStageLabel: string | null;
+  progressLabel: string;
+  progressValue: number;
+}) {
+  return (
+    <Card className="border-border/80 transition-colors hover:border-primary/30">
+      <CardHeader className="pb-3">
+        <div className="flex items-start justify-between gap-3">
+          <div className="min-w-0 flex-1">
+            <CardTitle className="truncate text-lg">{title}</CardTitle>
+            <CardDescription className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs">
+              <span>会话: {sessionLabel}</span>
+              <span>主 Agent: {rootActorName}</span>
+              <span>更新于 {formatOfficeTime(updatedAt)}</span>
+            </CardDescription>
+          </div>
+          <OfficeStatusBadge status={status} />
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="grid gap-3 sm:grid-cols-4">
+          <Metric icon={Users} label="成员" value={String(memberCount)} />
+          <Metric icon={Activity} label="活跃" value={String(activeRuns)} />
+          <Metric icon={FolderKanban} label="产物" value={String(artifactCount)} />
+          <Metric icon={Sparkles} label="异常" value={String(errorCount)} />
+        </div>
+
+        <div className="space-y-2">
+          <div className="flex items-center justify-between gap-3 text-sm">
+            <span className="truncate text-muted-foreground">{progressLabel}</span>
+            {currentStageLabel ? <span className="truncate font-medium">{currentStageLabel}</span> : null}
+          </div>
+          <div className="h-2.5 overflow-hidden rounded-full bg-secondary">
+            <div
+              className="h-full rounded-full bg-primary transition-all"
+              style={{ width: `${progressValue}%` }}
+            />
+          </div>
+        </div>
+
+        <div className="flex justify-end">
+          <Button asChild size="sm">
+            <Link href={`/office/${encodeURIComponent(taskId)}`}>
+              进入办公室
+              <ArrowRight className="ml-2 h-4 w-4" />
+            </Link>
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function Metric({
+  icon: Icon,
+  label,
+  value,
+}: {
+  icon: React.ComponentType<{ className?: string }>;
+  label: string;
+  value: string;
+}) {
+  return (
+    <div className="rounded-xl border border-border/60 bg-muted/30 px-3 py-3">
+      <div className="flex items-center gap-2 text-xs text-muted-foreground">
+        <Icon className="h-3.5 w-3.5" />
+        <span>{label}</span>
+      </div>
+      <div className="mt-2 text-lg font-semibold">{value}</div>
+    </div>
+  );
+}
+
+export default function OfficeListPage() {
+  const sessionId = useChatStore((state) => state.sessionId);
+  const sessions = useChatStore((state) => state.sessions);
+  const processRuns = useChatStore((state) => state.processRuns);
+  const processEvents = useChatStore((state) => state.processEvents);
+  const processArtifacts = useChatStore((state) => state.processArtifacts);
+  const wsStatus = useChatStore((state) => state.wsStatus);
+
+  const tasks = React.useMemo(
+    () => buildOfficeTaskList({
+      sessionId,
+      sessions,
+      processRuns,
+      processEvents,
+      processArtifacts,
+    }),
+    [processArtifacts, processEvents, processRuns, sessionId, sessions]
+  );
+
+  const activeTasks = tasks.filter((task) => !isOfficeTaskTerminal(task.status));
+  const recentTasks = tasks.filter((task) => isOfficeTaskTerminal(task.status));
+
+  return (
+    <div className="mx-auto max-w-7xl space-y-6 p-6">
+      <TaskManagementTabs />
+
+      <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
+        <div>
+          <h1 className="text-3xl font-semibold tracking-tight">Office</h1>
+          <p className="mt-2 max-w-3xl text-sm text-muted-foreground">
+            基于当前会话的真实运行数据，展示主 Agent 与子 Agent 的任务现场。任务结束后会从活跃现场移除，但保留回看入口。
+          </p>
+        </div>
+        <Card className="min-w-[280px] border-border/70">
+          <CardContent className="flex items-center justify-between gap-4 p-4">
+            <div>
+              <div className="text-xs text-muted-foreground">当前会话</div>
+              <div className="mt-1 font-medium">{sessionId}</div>
+            </div>
+            <div className="text-right">
+              <div className="text-xs text-muted-foreground">连接状态</div>
+              <div className="mt-1 font-medium">{wsStatus === 'connected' ? '已连接' : wsStatus}</div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {wsStatus === 'connecting' && tasks.length === 0 ? (
+        <div className="flex items-center gap-3 rounded-xl border border-dashed border-border px-4 py-6 text-sm text-muted-foreground">
+          <Loader2 className="h-4 w-4 animate-spin" />
+          正在等待运行时数据...
+        </div>
+      ) : null}
+
+      {tasks.length === 0 ? (
+        <Card className="border-dashed">
+          <CardContent className="flex flex-col items-center justify-center py-16 text-center">
+            <Clock3 className="h-10 w-10 text-muted-foreground/50" />
+            <h2 className="mt-4 text-xl font-semibold">当前没有可展示的任务现场</h2>
+            <p className="mt-2 max-w-xl text-sm text-muted-foreground">
+              先回到对话页发起一次主 Agent 任务。开始执行后，这里会出现活跃的 office 卡片。
+            </p>
+            <Button asChild className="mt-6">
+              <Link href="/">回到对话</Link>
+            </Button>
+          </CardContent>
+        </Card>
+      ) : (
+        <>
+          <section className="space-y-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <h2 className="text-xl font-semibold">活跃 Office</h2>
+                <p className="text-sm text-muted-foreground">正在运行中的任务现场会优先显示。</p>
+              </div>
+              <div className="text-sm text-muted-foreground">{activeTasks.length} 个任务</div>
+            </div>
+            {activeTasks.length === 0 ? (
+              <Card className="border-dashed">
+                <CardContent className="py-10 text-center text-sm text-muted-foreground">
+                  当前没有活跃任务，下面可以查看最近结束的任务。
+                </CardContent>
+              </Card>
+            ) : (
+              <div className="grid gap-4 lg:grid-cols-2">
+                {activeTasks.map((task) => (
+                  <TaskCard
+                    key={task.taskId}
+                    taskId={task.taskId}
+                    title={task.title}
+                    sessionLabel={task.sessionLabel}
+                    rootActorName={task.rootActorName}
+                    status={task.status}
+                    updatedAt={task.updatedAt}
+                    memberCount={task.memberCount}
+                    activeRuns={task.activeRuns}
+                    artifactCount={task.artifactCount}
+                    errorCount={task.errorCount}
+                    currentStageLabel={task.currentStageLabel}
+                    progressLabel={task.progress.label}
+                    progressValue={progressPercent(task.progress.value, task.progress.max)}
+                  />
+                ))}
+              </div>
+            )}
+          </section>
+
+          <section className="space-y-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <h2 className="text-xl font-semibold">最近结束</h2>
+                <p className="text-sm text-muted-foreground">已完成、失败或取消的任务仍保留回看入口。</p>
+              </div>
+              <div className="text-sm text-muted-foreground">{recentTasks.length} 个任务</div>
+            </div>
+            {recentTasks.length === 0 ? (
+              <Card className="border-dashed">
+                <CardContent className="py-10 text-center text-sm text-muted-foreground">
+                  还没有历史任务。
+                </CardContent>
+              </Card>
+            ) : (
+              <div className="grid gap-4 lg:grid-cols-2">
+                {recentTasks.map((task) => (
+                  <TaskCard
+                    key={task.taskId}
+                    taskId={task.taskId}
+                    title={task.title}
+                    sessionLabel={task.sessionLabel}
+                    rootActorName={task.rootActorName}
+                    status={task.status}
+                    updatedAt={task.updatedAt}
+                    memberCount={task.memberCount}
+                    activeRuns={task.activeRuns}
+                    artifactCount={task.artifactCount}
+                    errorCount={task.errorCount}
+                    currentStageLabel={task.currentStageLabel}
+                    progressLabel={task.progress.label}
+                    progressValue={progressPercent(task.progress.value, task.progress.max)}
+                  />
+                ))}
+              </div>
+            )}
+          </section>
+        </>
+      )}
+    </div>
+  );
+}

app-instance/frontend/app/(app)/page.tsx

@@ -1,8 +1,10 @@
 'use client';
 
+import Link from 'next/link';
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { MessageSquare, Paperclip, Plus, Send, Trash2, X } from 'lucide-react';
+import { ArrowRight, Building2, MessageSquare, Paperclip, Plus, Send, Trash2, X } from 'lucide-react';
 
+import { OfficeStatusBadge } from '@/components/office/OfficeShared';
 import { ChatWorkbench } from '@/components/chat-workbench/ChatWorkbench';
 import { Button } from '@/components/ui/button';
 import { ScrollArea } from '@/components/ui/scroll-area';
@@ -19,6 +21,7 @@ import {
   uploadFile,
   wsManager,
 } from '@/lib/api';
+import { buildOfficeTaskList, isOfficeTaskTerminal } from '@/lib/office';
 import { useChatStore } from '@/lib/store';
 import type { ChatMessage, FileAttachment, ProcessWsEvent, SessionUpdatedEvent, SlashCommand, WsEvent } from '@/types';
 
@@ -133,6 +136,19 @@ export default function ChatPage() {
     );
   }, [commands, input]);
 
+  const officeTasks = useMemo(
+    () => buildOfficeTaskList({
+      sessionId,
+      sessions,
+      processRuns,
+      processEvents,
+      processArtifacts,
+    }),
+    [processArtifacts, processEvents, processRuns, sessionId, sessions]
+  );
+
+  const currentOfficeTask = officeTasks.find((task) => !isOfficeTaskTerminal(task.status)) ?? officeTasks[0] ?? null;
+
   const loadSessions = useCallback(async () => {
     try {
       const list = await listSessions();
@@ -544,6 +560,37 @@ export default function ChatPage() {
       </div>
 
       <div className="flex-1 flex flex-col min-w-0">
+        {currentOfficeTask ? (
+          <div className="border-b border-border bg-background/90 px-4 py-3 backdrop-blur">
+            <div className="mx-auto flex max-w-6xl flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+              <div className="min-w-0">
+                <div className="flex flex-wrap items-center gap-2">
+                  <div className="flex items-center gap-2 text-sm font-medium">
+                    <Building2 className="h-4 w-4" />
+                    当前任务现场
+                  </div>
+                  <OfficeStatusBadge status={currentOfficeTask.status} />
+                </div>
+                <div className="mt-1 truncate text-sm text-muted-foreground">
+                  {currentOfficeTask.title}
+                  <span className="ml-2">主 Agent: {currentOfficeTask.rootActorName}</span>
+                </div>
+              </div>
+              <div className="flex shrink-0 items-center gap-2">
+                <Button asChild variant="outline" size="sm">
+                  <Link href="/office">查看全部 Office</Link>
+                </Button>
+                <Button asChild size="sm">
+                  <Link href={`/office/${encodeURIComponent(currentOfficeTask.taskId)}`}>
+                    查看任务现场
+                    <ArrowRight className="ml-2 h-4 w-4" />
+                  </Link>
+                </Button>
+              </div>
+            </div>
+          </div>
+        ) : null}
+
         <div className="flex-1 min-h-0">
           <ChatWorkbench
             messages={messages}
@@ -554,7 +601,7 @@ export default function ChatPage() {
             processEvents={processEvents}
             processArtifacts={processArtifacts}
             selectedRunId={selectedRunId}
-            onSelectRun={setSelectedRunId}
+            onSelectRun={(runId) => setSelectedRunId(selectedRunId === runId ? null : runId)}
             onCancelRun={handleCancelRun}
           />
         </div>