diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 3038e643..ddd32211 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -4,7 +4,6 @@ import LoginPage from "@/pages/login"
 import WelcomePage from "@/pages/welcome"
 import UserConsolePage from "@/pages/console/user/page"
 import ManagerConsolePage from "@/pages/console/manager/page"
-import SettingsPage from "@/pages/console/user/settings"
 import TasksPage from "@/pages/console/user/tasks"
 import IDEIDE from "@/pages/console/user/ide-ide"
 import GitBotsPage from "@/pages/console/user/git-bots"
@@ -22,15 +21,13 @@ import ResetPasswordPage from "./pages/resetpassword"
 import FindPasswordPage from "./pages/findpassword"
 import TeamManagerManager from "./pages/console/manager/manager"
 import TeamManagerOtherSettings from "./pages/console/manager/other-settings"
-import ProjectPage from "./pages/console/user/project/project"
 import PlaygroundPage from "./pages/playground"
 import PlaygroundDetailPage from "./pages/playground-detail"
 import PublicTaskPage from "./pages/public-task"
 import PostCreatePage from "./pages/post-create"
-import ProjectIssuesPage from "./pages/console/user/project/issues"
-import ProjectTasksPage from "./pages/console/user/project/tasks"
+import ProjectOverviewPage from "./pages/console/user/project/overview"
 import TaskDevelopPage from "./pages/console/user/task/task-dev"
-import TaskViewPage from "./pages/console/user/task/task-view"
+import TaskDetailPage from "./pages/console/user/task/task-detail"
 
 function App() {
   return (
@@ -49,16 +46,13 @@ function App() {
           <Route path="/console" element={<UserConsolePage />}>
             <Route index element={<Navigate to="/console/tasks" replace />} />
             <Route path="tasks" element={<TasksPage />} />
-            <Route path="project/:projectId/info" element={<ProjectPage />} />
-            <Route path="project/:projectId/issues" element={<ProjectIssuesPage />} />
-            <Route path="project/:projectId/tasks" element={<ProjectTasksPage />} />
+            <Route path="task/:taskId" element={<TaskDetailPage />} />
+            <Route path="project/:projectId" element={<ProjectOverviewPage />} />
             <Route path="gitbot" element={<GitBotsPage />} />
             <Route path="ide" element={<IDEIDE />} />
-            <Route path="settings" element={<SettingsPage />} />
           </Route>
           <Route path="/console/terminal" element={<TerminalPage />} />
           <Route path="/console/files" element={<FileManagerPage />} />
-          <Route path="/console/task/view" element={<TaskViewPage />} />
           <Route path="/console/task/develop/:taskId" element={<TaskDevelopPage />} />
           <Route path="/sharedterminal" element={<SharedTerminalPage />} />
           <Route path="/manager" element={<ManagerConsolePage />}>
diff --git a/frontend/src/api/Api.ts b/frontend/src/api/Api.ts
index 9b795460..dc4025cf 100644
--- a/frontend/src/api/Api.ts
+++ b/frontend/src/api/Api.ts
@@ -866,12 +866,12 @@ export interface DomainProject {
   issues?: DomainProjectIssue[];
   /** 项目名 */
   name?: string;
-  /** 未解决问题数量 */
-  open_issue_count?: number;
   /** 项目平台 */
   platform?: ConstsGitPlatform;
   /** 项目仓库URL */
   repo_url?: string;
+  /** 项目相关的任务 */
+  tasks?: DomainProjectTask[];
   /** 更新时间 */
   updated_at?: number;
   /** 用户信息 */
@@ -5320,7 +5320,10 @@ export class Api<SecurityDataType extends unknown> extends HttpClient<SecurityDa
         next_token?: string;
         /** 分页 */
         page?: number;
+        /** 用于筛选项目相关的任务 */
         project_id?: string;
+        /** 只筛选快速启动的项目无关任务 */
+        quick_start?: boolean;
         /** 每页多少条记录 */
         size?: number;
       },
diff --git a/frontend/src/components/console/breadcrumb-task-context.tsx b/frontend/src/components/console/breadcrumb-task-context.tsx
new file mode 100644
index 00000000..098e8c17
--- /dev/null
+++ b/frontend/src/components/console/breadcrumb-task-context.tsx
@@ -0,0 +1,22 @@
+import React, { createContext, useContext, useState } from "react"
+
+interface BreadcrumbTaskContextValue {
+  taskName: string | null
+  setTaskName: (name: string | null) => void
+}
+
+const BreadcrumbTaskContext = createContext<BreadcrumbTaskContextValue | null>(null)
+
+export function BreadcrumbTaskProvider({ children }: { children: React.ReactNode }) {
+  const [taskName, setTaskName] = useState<string | null>(null)
+  return (
+    <BreadcrumbTaskContext.Provider value={{ taskName, setTaskName }}>
+      {children}
+    </BreadcrumbTaskContext.Provider>
+  )
+}
+
+export function useBreadcrumbTask() {
+  const ctx = useContext(BreadcrumbTaskContext)
+  return ctx
+}
diff --git a/frontend/src/components/console/data-provider.tsx b/frontend/src/components/console/data-provider.tsx
index fd9c34c8..d0a26b93 100644
--- a/frontend/src/components/console/data-provider.tsx
+++ b/frontend/src/components/console/data-provider.tsx
@@ -1,4 +1,4 @@
-import { ConstsGitPlatform, ConstsOwnerType, type DomainGitIdentity, type DomainHost, type DomainImage, type DomainModel, type DomainProject, type DomainUser, type DomainVirtualMachine } from '@/api/Api';
+import { ConstsGitPlatform, ConstsOwnerType, type DomainGitIdentity, type DomainHost, type DomainImage, type DomainModel, type DomainProject, type DomainProjectTask, type DomainUser, type DomainVirtualMachine } from '@/api/Api';
 import { getImageShortName } from '@/utils/common';
 import { apiRequest } from '@/utils/requestUtils';
 import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';
@@ -37,6 +37,11 @@ type CommonData = {
   projects: DomainProject[];
   loadingProjects: boolean;
   reloadProjects: () => void;
+
+  /** 未关联项目的任务（quick_start），用于侧边栏「默认」分组展示 */
+  unlinkedTasks: DomainProjectTask[];
+  loadingUnlinkedTasks: boolean;
+  reloadUnlinkedTasks: () => void;
 };
 
 const DataContext = createContext<CommonData | null>(null);
@@ -66,6 +71,8 @@ export const DataProvider: React.FC<{ children: React.ReactNode }> = ({ children
   const [projects, setProjects] = useState<DomainProject[]>([]);
   const [loadingProjects, setLoadingProjects] = useState(true);
 
+  const [unlinkedTasks, setUnlinkedTasks] = useState<DomainProjectTask[]>([]);
+  const [loadingUnlinkedTasks, setLoadingUnlinkedTasks] = useState(true);
 
   const fetchUserInfo = () => {
     apiRequest('v1UsersStatusList', {}, [], (resp) => {
@@ -255,6 +262,22 @@ export const DataProvider: React.FC<{ children: React.ReactNode }> = ({ children
     setLoadingProjects(false)
   }
 
+  const UNLINKED_TASKS_LIMIT = 5
+  const UNLINKED_TASKS_FETCH_SIZE = 50
+
+  const fetchUnlinkedTasks = async () => {
+    setLoadingUnlinkedTasks(true)
+    await apiRequest('v1UsersTasksList', { page: 1, size: UNLINKED_TASKS_FETCH_SIZE, quick_start: true }, [], (resp) => {
+      if (resp.code === 0) {
+        const allTasks = resp.data?.tasks || []
+        const unlinked = allTasks
+          .sort((a: DomainProjectTask, b: DomainProjectTask) => (b.created_at || 0) - (a.created_at || 0))
+          .slice(0, UNLINKED_TASKS_LIMIT)
+        setUnlinkedTasks(unlinked)
+      }
+      setLoadingUnlinkedTasks(false)
+    }, () => setLoadingUnlinkedTasks(false))
+  }
 
   useEffect(() => {
     fetchUserInfo();
@@ -265,6 +288,7 @@ export const DataProvider: React.FC<{ children: React.ReactNode }> = ({ children
     fetchWallet();
     fetchMembers();
     fetchProjects();
+    fetchUnlinkedTasks();
   }, []);
 
   return (
@@ -301,6 +325,10 @@ export const DataProvider: React.FC<{ children: React.ReactNode }> = ({ children
         projects: projects,
         loadingProjects: loadingProjects,
         reloadProjects: fetchProjects,
+
+        unlinkedTasks: unlinkedTasks,
+        loadingUnlinkedTasks: loadingUnlinkedTasks,
+        reloadUnlinkedTasks: fetchUnlinkedTasks,
     }}>
       {children}
     </DataContext.Provider>
diff --git a/frontend/src/components/console/nav/nav-balance.tsx b/frontend/src/components/console/nav/nav-balance.tsx
index bb682761..f9b50afd 100644
--- a/frontend/src/components/console/nav/nav-balance.tsx
+++ b/frontend/src/components/console/nav/nav-balance.tsx
@@ -18,7 +18,11 @@ import { cn } from "@/lib/utils";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { useCommonData } from "../data-provider";
 
-export default function NavBalance() {
+interface NavBalanceProps {
+  variant?: "sidebar" | "header";
+}
+
+export default function NavBalance({ variant = "sidebar" }: NavBalanceProps) {
   const [transcations, setTranscations] = useState<DomainTransactionLog[]>([]);
   const [exchangeCode, setExchangeCode] = useState("");
   const [isLoading, setIsLoading] = useState(false);
@@ -110,17 +114,29 @@ export default function NavBalance() {
     toast.success("邀请链接已复制到剪贴板");
   }
 
+  const triggerContent = (
+    <>
+      <IconWallet className={variant === "header" ? "h-[1.2rem] w-[1.2rem]" : "size-5"} />
+      余额: {Math.ceil(balance + bonus).toLocaleString()} 点
+    </>
+  );
+
   return (
     <Dialog onOpenChange={handleOpenChange}>
       <DialogTrigger asChild>
-        <SidebarMenu>
-          <SidebarMenuItem>
-            <SidebarMenuButton className="cursor-pointer">
-              <IconWallet className="size-5" />
-              余额: {Math.ceil(balance + bonus).toLocaleString()} 点
-            </SidebarMenuButton>
-          </SidebarMenuItem>
-        </SidebarMenu>
+        {variant === "header" ? (
+          <Button className="hidden lg:flex" variant="ghost" size="sm">
+            {triggerContent}
+          </Button>
+        ) : (
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <SidebarMenuButton className="cursor-pointer">
+                {triggerContent}
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        )}
       </DialogTrigger>
       <DialogContent>
         <DialogHeader>
diff --git a/frontend/src/components/console/nav/nav-main.tsx b/frontend/src/components/console/nav/nav-main.tsx
index ac43c78d..2064f9c3 100644
--- a/frontend/src/components/console/nav/nav-main.tsx
+++ b/frontend/src/components/console/nav/nav-main.tsx
@@ -1,7 +1,4 @@
-import { 
-  Bot,
-  Github,
-} from "lucide-react"
+import { Github } from "lucide-react"
 import { Link, useLocation } from "react-router-dom"
 
 import {
@@ -17,17 +14,6 @@ export default function NavMain() {
   return (
     <SidebarGroup>
       <SidebarMenu>
-        <SidebarMenuItem>
-          <SidebarMenuButton 
-            isActive={location.pathname === "/console/tasks"}
-            asChild
-          >
-            <Link to="/console/tasks">
-              <Bot />
-              <span>智能任务</span>
-            </Link>
-          </SidebarMenuButton>
-        </SidebarMenuItem>
         <SidebarMenuItem>
           <SidebarMenuButton
             isActive={location.pathname === "/console/gitbot"}
diff --git a/frontend/src/components/console/nav/nav-project.tsx b/frontend/src/components/console/nav/nav-project.tsx
index 4ec42e3d..01163f3b 100644
--- a/frontend/src/components/console/nav/nav-project.tsx
+++ b/frontend/src/components/console/nav/nav-project.tsx
@@ -1,5 +1,5 @@
 import { Link, useLocation } from "react-router-dom"
-import { useState } from "react"
+import { useState, useEffect } from "react"
 
 import {
   SidebarGroup,
@@ -11,19 +11,135 @@ import {
   SidebarMenuSubButton,
   SidebarMenuSubItem,
 } from "@/components/ui/sidebar"
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
 import { useCommonData } from "../data-provider"
-import { IconBook, IconCalendarCode, IconFolderCode, IconPlus, IconReload, IconSubtask } from "@tabler/icons-react"
-import { FolderOpenDot } from "lucide-react"
+import { IconChevronDown, IconChevronRight, IconCircleMinus, IconLoader, IconPlus, IconReload } from "@tabler/icons-react"
 import { Button } from "@/components/ui/button"
 import AddProjectDialog from "../project/add-project"
+import StartDevelopTaskDialog from "../project/start-develop-task-dialog"
+import { isProjectRepoUnbound } from "@/utils/project"
 import { Label } from "@/components/ui/label"
-import { Badge } from "@/components/ui/badge"
+import { type DomainProjectTask } from "@/api/Api"
+import { stripMarkdown } from "@/utils/common"
+import { cn } from "@/lib/utils"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
+
+const STORAGE_KEY = "nav-project-expanded"
+const UNLINKED_KEY = "__unlinked__"
+
+const loadExpandedFromStorage = (): Record<string, boolean> => {
+  try {
+    const cached = localStorage.getItem(STORAGE_KEY)
+    if (cached) return JSON.parse(cached)
+  } catch {}
+  return {}
+}
+
+const saveExpandedToStorage = (state: Record<string, boolean>) => {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(state))
+  } catch {}
+}
 
 export default function NavProject() {
   const location = useLocation()
   const [addDialogOpen, setAddDialogOpen] = useState(false)
+  const [startTaskProject, setStartTaskProject] = useState<{ id: string; name?: string } | null>(null)
+  const [expandedProjects, setExpandedProjects] = useState<Record<string, boolean>>(loadExpandedFromStorage)
+
+  const { projects, loadingProjects, reloadProjects, unlinkedTasks, loadingUnlinkedTasks, reloadUnlinkedTasks } = useCommonData()
+
+  useEffect(() => {
+    const stored = loadExpandedFromStorage()
+    const next: Record<string, boolean> = {}
+    const toSave: Record<string, boolean> = { ...stored }
+    let changed = false
+
+    for (const project of projects) {
+      const projectId = project.id ?? ""
+      const hasActiveTasks = (project.tasks || []).some(
+        (t) => t.status === "pending" || t.status === "processing"
+      )
+      if (hasActiveTasks) {
+        next[projectId] = true
+      } else if (projectId in stored) {
+        next[projectId] = stored[projectId]
+      } else {
+        next[projectId] = false
+      }
+      if (!(projectId in stored)) {
+        toSave[projectId] = next[projectId]
+        changed = true
+      }
+    }
+
+    setExpandedProjects((prev) => {
+      const merged = { ...prev, ...next }
+      return merged
+    })
+    if (changed) saveExpandedToStorage(toSave)
+  }, [projects])
+
+  useEffect(() => {
+    if (loadingUnlinkedTasks) return
+    const stored = loadExpandedFromStorage()
+    const hasActiveUnlinked = unlinkedTasks.some(
+      (t) => t.status === "pending" || t.status === "processing"
+    )
+    const nextUnlinked = hasActiveUnlinked
+      ? true
+      : UNLINKED_KEY in stored
+        ? stored[UNLINKED_KEY]
+        : false
+    const changed = !(UNLINKED_KEY in stored)
+    setExpandedProjects((prev) => ({ ...prev, [UNLINKED_KEY]: nextUnlinked }))
+    if (changed && unlinkedTasks.length > 0) {
+      saveExpandedToStorage({ ...stored, [UNLINKED_KEY]: nextUnlinked })
+    }
+  }, [unlinkedTasks, loadingUnlinkedTasks])
+
+  // 选中项目或默认时自动展开二级菜单并持久化
+  useEffect(() => {
+    if (location.pathname === "/console/tasks") {
+      setExpandedProjects((prev) => {
+        if (prev[UNLINKED_KEY]) return prev
+        const next = { ...prev, [UNLINKED_KEY]: true }
+        saveExpandedToStorage(next)
+        return next
+      })
+      return
+    }
+    const match = location.pathname.match(/^\/console\/project\/([^/]+)/)
+    if (match) {
+      const projectId = match[1]
+      if (projectId && projectId !== UNLINKED_KEY) {
+        setExpandedProjects((prev) => {
+          if (prev[projectId]) return prev
+          const next = { ...prev, [projectId]: true }
+          saveExpandedToStorage(next)
+          return next
+        })
+      }
+    }
+  }, [location.pathname])
+
+  const handleProjectOpenChange = (projectId: string, open: boolean) => {
+    setExpandedProjects((prev) => {
+      const next = { ...prev, [projectId]: open }
+      saveExpandedToStorage(next)
+      return next
+    })
+  }
 
-  const { projects, loadingProjects, reloadProjects } = useCommonData()
+  useEffect(() => {
+    const timer = setInterval(() => {
+      reloadProjects()
+      reloadUnlinkedTasks()
+    }, 30000)
+    return () => clearInterval(timer)
+  }, [reloadProjects, reloadUnlinkedTasks])
+
+  const isUnlinkedActive = location.pathname === "/console/tasks"
 
   return (
     <SidebarGroup>
@@ -34,19 +150,27 @@ export default function NavProject() {
             variant="ghost" 
             size="icon" 
             className="size-5" 
-            onClick={reloadProjects}
-            disabled={loadingProjects}
-          >
-            <IconReload className={`size-3.5 ${loadingProjects ? 'animate-spin' : ''}`} />
-          </Button>
-          <Button 
-            variant="ghost" 
-            size="icon" 
-            className="size-5"
-            onClick={() => setAddDialogOpen(true)}
+            onClick={() => {
+              reloadProjects()
+              reloadUnlinkedTasks()
+            }}
+            disabled={loadingProjects || loadingUnlinkedTasks}
           >
-            <IconPlus className="size-3.5" />
+            <IconReload className={`size-3.5 ${(loadingProjects || loadingUnlinkedTasks) ? 'animate-spin' : ''}`} />
           </Button>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button 
+                variant="ghost" 
+                size="icon" 
+                className="size-5"
+                onClick={() => setAddDialogOpen(true)}
+              >
+                <IconPlus className="size-3.5" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="right">创建项目</TooltipContent>
+          </Tooltip>
         </div>
       </SidebarGroupLabel>
       <AddProjectDialog 
@@ -54,40 +178,195 @@ export default function NavProject() {
         onOpenChange={setAddDialogOpen}
         onSuccess={reloadProjects}
       />
+      {startTaskProject && (
+        <StartDevelopTaskDialog
+          open={!!startTaskProject}
+onOpenChange={(open) => {
+              if (!open) {
+                setStartTaskProject(null)
+                reloadProjects()
+                reloadUnlinkedTasks()
+              }
+            }}
+          project={projects.find((p) => p.id === startTaskProject.id)}
+        />
+      )}
       <SidebarMenu>
-        {projects.length > 0 ? projects.map((project) => (
-          <SidebarMenuItem key={project.id}>
-            <SidebarMenuButton asChild>
-              <Link to={`/console/project/${project.id}/info/`}>
-              {location.pathname.startsWith(`/console/project/${project.id}/`) ? <FolderOpenDot /> : <IconFolderCode />} 
-                <span>{project.name}</span>
-              </Link>
-            </SidebarMenuButton>
-            {location.pathname.startsWith(`/console/project/${project.id}/`) && <SidebarMenuSub>
-              <SidebarMenuSubItem className="flex flex-col gap-1">
-                <SidebarMenuSubButton isActive={location.pathname.startsWith(`/console/project/${project.id}/info/`)} asChild>
-                  <Link to={`/console/project/${project.id}/info/`}>
-                    <IconBook />
-                    项目
-                  </Link>
-                </SidebarMenuSubButton>
-                <SidebarMenuSubButton isActive={location.pathname === `/console/project/${project.id}/issues`} asChild>
-                  <Link to={`/console/project/${project.id}/issues`}>
-                    <IconCalendarCode />
-                    需求
-                    <Badge variant="outline">{project.open_issue_count || 0}</Badge>
-                  </Link>
-                </SidebarMenuSubButton>
-                <SidebarMenuSubButton isActive={location.pathname === `/console/project/${project.id}/tasks`} asChild>
-                  <Link to={`/console/project/${project.id}/tasks`}>
-                    <IconSubtask />
-                    任务
+        <Collapsible
+            open={expandedProjects[UNLINKED_KEY] ?? false}
+            onOpenChange={(open) => handleProjectOpenChange(UNLINKED_KEY, open)}
+          >
+            <SidebarMenuItem>
+              <div
+                className={cn(
+                  "group/default-row flex w-full items-center gap-1 overflow-hidden rounded-md p-1 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+                  isUnlinkedActive && "bg-sidebar-accent font-medium text-sidebar-accent-foreground"
+                )}
+              >
+                <CollapsibleTrigger asChild>
+                  <button
+                    type="button"
+                    className="shrink-0 rounded p-0.5 hover:text-primary"
+                  >
+                    {(expandedProjects[UNLINKED_KEY] ?? false) ? (
+                      <IconChevronDown className="size-4" />
+                    ) : (
+                      <IconChevronRight className="size-4" />
+                    )}
+                  </button>
+                </CollapsibleTrigger>
+                <Link
+                  to="/console/tasks"
+                  className={cn(
+                    "min-w-0 flex-1 truncate",
+                    isUnlinkedActive && "font-medium"
+                  )}
+                >
+                  默认
+                </Link>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="size-5 shrink-0 text-muted-foreground/50 group-hover/default-row:text-sidebar-accent-foreground hover:text-primary"
+                      asChild
+                    >
+                      <Link to="/console/tasks">
+                        <IconPlus className="size-3.5" />
+                      </Link>
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent side="right">创建任务</TooltipContent>
+                </Tooltip>
+              </div>
+              <CollapsibleContent>
+                {unlinkedTasks.length > 0 && (
+                  <SidebarMenuSub className="ml-1 mr-0 border-none">
+                    <SidebarMenuSubItem className="flex flex-col gap-0.5">
+                      {unlinkedTasks.map((task: DomainProjectTask, index) => {
+                        const TaskIcon =
+                          task.status === "finished" || task.status === "error"
+                            ? IconCircleMinus
+                            : IconLoader
+                        return (
+                          <SidebarMenuSubButton
+                            key={`unlinked-${task.id ?? index}-${index}`}
+                            size="sm"
+                            isActive={location.pathname === `/console/task/${task.id}`}
+                            asChild
+                            className={cn(
+                              (task.status === "finished" || task.status === "error") && "!text-muted-foreground [&>svg]:!text-muted-foreground"
+                            )}
+                          >
+                            <Link to={`/console/task/${task.id}`}>
+                              <TaskIcon
+                                className={cn(
+                                  "size-3.5 shrink-0",
+                                  (task.status === "pending" || task.status === "processing") && "animate-spin"
+                                )}
+                              />
+                              <span className="truncate">{task.summary || stripMarkdown(task.content || "")}</span>
+                            </Link>
+                          </SidebarMenuSubButton>
+                        )
+                      })}
+                    </SidebarMenuSubItem>
+                  </SidebarMenuSub>
+                )}
+              </CollapsibleContent>
+            </SidebarMenuItem>
+          </Collapsible>
+        {projects.length > 0 ? projects.map((project) => {
+          const projectId = project.id ?? ""
+          const isExpanded = expandedProjects[projectId] ?? false
+          const isProjectActive = location.pathname === `/console/project/${projectId}` || location.pathname.startsWith(`/console/project/${projectId}/`)
+          return (
+            <Collapsible
+              key={projectId}
+              open={isExpanded}
+              onOpenChange={(open) => handleProjectOpenChange(projectId, open)}
+            >
+              <SidebarMenuItem>
+                <div
+                  className={cn(
+                    "group/project-row flex w-full items-center gap-1 overflow-hidden rounded-md p-1 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+                    isProjectActive && "bg-sidebar-accent font-medium text-sidebar-accent-foreground"
+                  )}
+                >
+                  <CollapsibleTrigger asChild>
+                    <button
+                      type="button"
+                      className="shrink-0 rounded p-0.5 hover:text-primary"
+                    >
+                      {isExpanded ? <IconChevronDown className="size-4" /> : <IconChevronRight className="size-4" />}
+                    </button>
+                  </CollapsibleTrigger>
+                  <Link
+                    to={`/console/project/${projectId}`}
+                    className={cn(
+                      "min-w-0 flex-1 truncate",
+                      isProjectActive && "font-medium"
+                    )}
+                  >
+                    {project.name}
                   </Link>
-                </SidebarMenuSubButton>
-              </SidebarMenuSubItem>
-            </SidebarMenuSub>}
-          </SidebarMenuItem>
-        )) : (
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="size-5 shrink-0 text-muted-foreground/50 group-hover/project-row:text-sidebar-accent-foreground hover:text-primary"
+                        disabled={isProjectRepoUnbound(project)}
+                        onClick={(e) => {
+                          e.preventDefault()
+                          e.stopPropagation()
+                          setStartTaskProject({ id: projectId, name: project.name })
+                        }}
+                      >
+                        <IconPlus className="size-3.5" />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent side="right">启动任务</TooltipContent>
+                  </Tooltip>
+                </div>
+                <CollapsibleContent>
+                  <SidebarMenuSub className="ml-1 mr-0 border-none">
+                    <SidebarMenuSubItem className="flex flex-col gap-0.5">
+                      {(project.tasks || []).map((task: DomainProjectTask, index) => {
+                        const TaskIcon =
+                          task.status === "finished" || task.status === "error"
+                            ? IconCircleMinus
+                            : IconLoader
+                        return (
+                          <SidebarMenuSubButton
+                            key={`${projectId}-${task.id ?? index}-${index}`}
+                            size="sm"
+                            isActive={location.pathname === `/console/task/${task.id}`}
+                            asChild
+                            className={cn(
+                              (task.status === "finished" || task.status === "error") && "!text-muted-foreground [&>svg]:!text-muted-foreground"
+                            )}
+                          >
+                            <Link to={`/console/task/${task.id}`}>
+                              <TaskIcon
+                                className={cn(
+                                  "size-3.5 shrink-0",
+                                  (task.status === "pending" || task.status === "processing") && "animate-spin"
+                                )}
+                              />
+                              <span className="truncate">{task.summary || stripMarkdown(task.content || "")}</span>
+                            </Link>
+                          </SidebarMenuSubButton>
+                        )
+                      })}
+                    </SidebarMenuSubItem>
+                  </SidebarMenuSub>
+                </CollapsibleContent>
+              </SidebarMenuItem>
+            </Collapsible>
+          )
+        }) : (
           <SidebarMenuItem>
             <SidebarMenuButton disabled>
               暂无项目
diff --git a/frontend/src/components/console/nav/user-sidebar.tsx b/frontend/src/components/console/nav/user-sidebar.tsx
index afb894fb..bd4b8830 100644
--- a/frontend/src/components/console/nav/user-sidebar.tsx
+++ b/frontend/src/components/console/nav/user-sidebar.tsx
@@ -10,14 +10,14 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
 } from "@/components/ui/sidebar"
-import NavBalance from "./nav-balance"
 import NavMain from "./nav-main"
-import { Link } from "react-router-dom"
+import { useSettingsDialog } from "@/pages/console/user/page"
 import { Settings } from "lucide-react"
 
 export default function UserSidebar({ 
   ...props 
 }: React.ComponentProps<typeof Sidebar>) {
+  const { open: settingsOpen, setOpen: setSettingsOpen } = useSettingsDialog()
   return (
     <Sidebar variant="inset" {...props}>
       <SidebarHeader>
@@ -44,17 +44,14 @@ export default function UserSidebar({
         <SidebarMenuItem>
           <SidebarMenuButton 
             tooltip="配置"
-            isActive={location.pathname === "/console/settings"}
-            asChild
+            isActive={settingsOpen}
+            onClick={() => setSettingsOpen(true)}
           >
-            <Link to="/console/settings">
-              <Settings />
-              <span>配置</span>
-            </Link>
+            <Settings />
+            <span>配置</span>
           </SidebarMenuButton>
         </SidebarMenuItem>
       </SidebarMenu>
-        <NavBalance />
         <NavUser />
       </SidebarFooter>
     </Sidebar>
diff --git a/frontend/src/components/console/project/add-project.tsx b/frontend/src/components/console/project/add-project.tsx
index f13a41ed..44e0912d 100644
--- a/frontend/src/components/console/project/add-project.tsx
+++ b/frontend/src/components/console/project/add-project.tsx
@@ -35,6 +35,7 @@ import { apiRequest } from "@/utils/requestUtils"
 import { IconCheck, IconChevronDown, IconGitBranch, IconLoader } from "@tabler/icons-react"
 import { useCallback, useEffect, useMemo, useState } from "react"
 import { useNavigate } from "react-router-dom"
+import { useSettingsDialog } from "@/pages/console/user/page"
 import { toast } from "sonner"
 import { Spinner } from "@/components/ui/spinner"
 import { useCommonData } from "@/components/console/data-provider"
@@ -64,6 +65,7 @@ export default function AddProjectDialog({
   const [repoPopoverOpen, setRepoPopoverOpen] = useState(false)
   const [loading, setLoading] = useState(false)
   const navigate = useNavigate()
+  const { setOpen: setSettingsOpen } = useSettingsDialog()
 
   const { identities } = useCommonData()
 
@@ -183,7 +185,7 @@ export default function AddProjectDialog({
           setIdentityRepoOptions([])
           onSuccess?.()
           if (resp.data?.id) {
-            navigate(`/console/project/${resp.data.id}/info/`)
+            navigate(`/console/project/${resp.data.id}`)
           }
         } else {
           toast.error(resp.message || "创建项目失败")
@@ -265,7 +267,7 @@ export default function AddProjectDialog({
                     size="sm"
                     onClick={() => {
                       onOpenChange(false)
-                      navigate("/console/settings")
+                      setSettingsOpen(true)
                     }}
                   >
                     去设置
diff --git a/frontend/src/components/console/project/issue-card.tsx b/frontend/src/components/console/project/issue-card.tsx
index f97af954..f104a8b3 100644
--- a/frontend/src/components/console/project/issue-card.tsx
+++ b/frontend/src/components/console/project/issue-card.tsx
@@ -13,9 +13,10 @@ interface IssueCardProps {
   projectId: string
   project?: DomainProject
   onViewIssue: (issue: DomainProjectIssue) => void
+  onTaskCreated?: () => void
 }
 
-export default function IssueCard({ issue, projectId, project, onViewIssue }: IssueCardProps) {
+export default function IssueCard({ issue, projectId, project, onViewIssue, onTaskCreated }: IssueCardProps) {
 
   const priority = useMemo(() => {
     switch (issue.priority) {
@@ -60,7 +61,7 @@ export default function IssueCard({ issue, projectId, project, onViewIssue }: Is
         >
           {issue.title}
         </div>
-        <IssueMenu issue={issue} projectId={projectId} project={project} />
+        <IssueMenu issue={issue} projectId={projectId} project={project} onTaskCreated={onTaskCreated} />
       </div>
       <div className="text-xs text-muted-foreground line-clamp-2 break-all">{issue.summary}</div>
       <Separator className="my-2" />
diff --git a/frontend/src/components/console/project/issue-design-dialog.tsx b/frontend/src/components/console/project/issue-design-dialog.tsx
index a038e265..b7f1f2df 100644
--- a/frontend/src/components/console/project/issue-design-dialog.tsx
+++ b/frontend/src/components/console/project/issue-design-dialog.tsx
@@ -10,6 +10,7 @@ import { selectHost, selectImage, selectModel } from "@/utils/common"
 import { apiRequest } from "@/utils/requestUtils"
 import { IconSparkles } from "@tabler/icons-react"
 import { useEffect, useMemo, useState } from "react"
+import { useNavigate } from "react-router-dom"
 import { toast } from "sonner"
 
 interface IssueDesignDialogProps {
@@ -29,11 +30,12 @@ export default function IssueDesignDialog({
   project,
   onConfirm
 }: IssueDesignDialogProps) {
+  const navigate = useNavigate()
   const [submitting, setSubmitting] = useState<boolean>(false)
   const [branches, setBranches] = useState<string[]>([])
   const [selectedBranch, setSelectedBranch] = useState<string>('')
   const [loadingBranches, setLoadingBranches] = useState<boolean>(false)
-  const { images, models, hosts } = useCommonData()
+  const { images, models, hosts, reloadProjects, reloadUnlinkedTasks } = useCommonData()
 
   const fetchBranches = async () => {
     if (!project?.git_identity_id || !project?.repo_url) {
@@ -136,9 +138,11 @@ ${issue?.requirement_document?.replaceAll("`", "\\`")}
     }, [], (resp) => {
       if (resp.code === 0) {
         toast.success('方案设计任务已启动')
+        reloadProjects()
+        reloadUnlinkedTasks()
         onConfirm?.()
         handleOpenChange(false)
-        window.open(`/console/task/view?taskId=${resp.data?.id}`, "_blank")
+        navigate(`/console/task/${resp.data?.id}`)
       } else {
         toast.error(resp.message || '任务启动失败')
       }
diff --git a/frontend/src/components/console/project/issue-detail.tsx b/frontend/src/components/console/project/issue-detail.tsx
index a9d6b88e..344c6761 100644
--- a/frontend/src/components/console/project/issue-detail.tsx
+++ b/frontend/src/components/console/project/issue-detail.tsx
@@ -22,6 +22,7 @@ interface ViewIssueDialogProps {
   projectId: string
   project?: DomainProject
   onSuccess?: () => void
+  onTaskCreated?: () => void
 }
 
 export default function ViewIssueDialog({
@@ -31,6 +32,7 @@ export default function ViewIssueDialog({
   projectId,
   project,
   onSuccess,
+  onTaskCreated,
 }: ViewIssueDialogProps) {
   const [loading, setLoading] = useState(false)
   const [issueData, setIssueData] = useState<DomainProjectIssue | undefined>(issue)
@@ -312,7 +314,7 @@ export default function ViewIssueDialog({
 
             <div className="flex flex-row gap-2 border rounded-md px-2 py-1 bg-muted/30">
               <Label className="flex-1">更多操作</Label>
-              <IssueMenu issue={issueData} projectId={projectId} project={project} />
+              <IssueMenu issue={issueData} projectId={projectId} project={project} onTaskCreated={onTaskCreated} />
             </div>
 
           </div>
diff --git a/frontend/src/components/console/project/issue-dev-dialog.tsx b/frontend/src/components/console/project/issue-dev-dialog.tsx
index 8d2fa6b9..7282a35a 100644
--- a/frontend/src/components/console/project/issue-dev-dialog.tsx
+++ b/frontend/src/components/console/project/issue-dev-dialog.tsx
@@ -10,6 +10,7 @@ import { selectHost, selectImage, selectModel } from "@/utils/common"
 import { apiRequest } from "@/utils/requestUtils"
 import { IconSparkles } from "@tabler/icons-react"
 import { useEffect, useMemo, useState } from "react"
+import { useNavigate } from "react-router-dom"
 import { toast } from "sonner"
 
 interface IssueDevelopDialogProps {
@@ -29,11 +30,12 @@ export default function IssueDevelopDialog({
   project,
   onConfirm
 }: IssueDevelopDialogProps) {
+  const navigate = useNavigate()
   const [submitting, setSubmitting] = useState<boolean>(false)
   const [branches, setBranches] = useState<string[]>([])
   const [selectedBranch, setSelectedBranch] = useState<string>('')
   const [loadingBranches, setLoadingBranches] = useState<boolean>(false)
-  const { images, models, hosts } = useCommonData()
+  const { images, models, hosts, reloadProjects, reloadUnlinkedTasks } = useCommonData()
 
   const fetchBranches = async () => {
     if (!project?.git_identity_id || !project?.repo_url) {
@@ -141,9 +143,11 @@ ${issue?.design_document?.replaceAll("`", "\\`")}
     }, [], (resp) => {
       if (resp.code === 0) {
         toast.success('开发任务已启动')
+        reloadProjects()
+        reloadUnlinkedTasks()
         onConfirm?.()
         handleOpenChange(false)
-        window.open(`/console/task/view?taskId=${resp.data?.id}`, "_blank")
+        navigate(`/console/task/${resp.data?.id}`)
       } else {
         toast.error(resp.message || '任务启动失败')
       }
diff --git a/frontend/src/components/console/project/issue-list.tsx b/frontend/src/components/console/project/issue-list.tsx
index 2e3ccd18..358076d7 100644
--- a/frontend/src/components/console/project/issue-list.tsx
+++ b/frontend/src/components/console/project/issue-list.tsx
@@ -3,20 +3,22 @@ import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/
 import { CalendarDays } from "lucide-react";
 import IssueCard from "./issue-card";
 
-export default function ProjectIssueList({ issues, projectId, project, onViewIssue }: { issues: DomainProjectIssue[], projectId: string, project?: DomainProject, onViewIssue: (issue: DomainProjectIssue) => void }) {
+export default function ProjectIssueList({ issues, projectId, project, onViewIssue, onTaskCreated }: { issues: DomainProjectIssue[], projectId: string, project?: DomainProject, onViewIssue: (issue: DomainProjectIssue) => void, onTaskCreated?: () => void }) {
   if (issues.length === 0) {
     return (
-      <Empty className="border">
-        <EmptyHeader>
-          <EmptyMedia variant="icon">
-            <CalendarDays />
-          </EmptyMedia>
-          <EmptyTitle>暂无内容</EmptyTitle>
-          <EmptyDescription>
-            可以点击右上角的 “创建需求”
-          </EmptyDescription>
-        </EmptyHeader>
-      </Empty>
+      <div className="flex-1 min-h-0 flex flex-col">
+        <Empty className="border flex-1">
+          <EmptyHeader>
+            <EmptyMedia variant="icon">
+              <CalendarDays />
+            </EmptyMedia>
+            <EmptyTitle>暂无内容</EmptyTitle>
+            <EmptyDescription>
+              可以点击右上角的 “创建需求”
+            </EmptyDescription>
+          </EmptyHeader>
+        </Empty>
+      </div>
     )
   }
   
@@ -29,6 +31,7 @@ export default function ProjectIssueList({ issues, projectId, project, onViewIss
           projectId={projectId}
           project={project}
           onViewIssue={onViewIssue}
+          onTaskCreated={onTaskCreated}
         />
       ))}
     </div>
diff --git a/frontend/src/components/console/project/issue-menu.tsx b/frontend/src/components/console/project/issue-menu.tsx
index f03b5a01..77c35c85 100644
--- a/frontend/src/components/console/project/issue-menu.tsx
+++ b/frontend/src/components/console/project/issue-menu.tsx
@@ -11,9 +11,10 @@ interface IssueMenuProps {
   issue?: DomainProjectIssue
   projectId: string
   project?: DomainProject
+  onTaskCreated?: () => void
 }
 
-export default function IssueMenu({ issue, projectId, project }: IssueMenuProps) {
+export default function IssueMenu({ issue, projectId, project, onTaskCreated }: IssueMenuProps) {
   const [designDialogOpen, setDesignDialogOpen] = useState(false)
   const [developDialogOpen, setDevelopDialogOpen] = useState(false)
 
@@ -50,6 +51,7 @@ export default function IssueMenu({ issue, projectId, project }: IssueMenuProps)
         issue={issue}
         projectId={projectId}
         project={project}
+        onConfirm={onTaskCreated}
       />
       <IssueDevelopDialog
         open={developDialogOpen}
@@ -57,6 +59,7 @@ export default function IssueMenu({ issue, projectId, project }: IssueMenuProps)
         issue={issue}
         projectId={projectId}
         project={project}
+        onConfirm={onTaskCreated}
       />
     </>
   )
diff --git a/frontend/src/components/console/project/project-info.tsx b/frontend/src/components/console/project/project-info.tsx
index 4b17a87f..9d3be094 100644
--- a/frontend/src/components/console/project/project-info.tsx
+++ b/frontend/src/components/console/project/project-info.tsx
@@ -35,7 +35,7 @@ const ProjectInfo = ({
   const [envDialogOpen, setEnvDialogOpen] = useState(false)
   const [imageDialogOpen, setImageDialogOpen] = useState(false)
   const navigate = useNavigate()
-  const { projects, reloadProjects } = useCommonData()
+  const { projects, reloadProjects, reloadUnlinkedTasks } = useCommonData()
 
   const handleEditProjectName = () => {
     if (!project) return
@@ -74,7 +74,7 @@ const ProjectInfo = ({
         const remainingProjects = projects.filter(p => p.id !== deletingProject.id)
         reloadProjects()
         if (remainingProjects.length > 0) {
-          navigate(`/console/project/${remainingProjects[0].id}/info/`)
+          navigate(`/console/project/${remainingProjects[0].id}`)
         } else {
           navigate('/console/tasks')
         }
@@ -206,7 +206,13 @@ const ProjectInfo = ({
 
       <StartDevelopTaskDialog
         open={conversationDialogOpen}
-        onOpenChange={setConversationDialogOpen}
+        onOpenChange={(open) => {
+          setConversationDialogOpen(open)
+          if (!open) {
+            reloadProjects()
+            reloadUnlinkedTasks()
+          }
+        }}
         project={project}
       />
     </>
diff --git a/frontend/src/components/console/project/start-develop-task-dialog.tsx b/frontend/src/components/console/project/start-develop-task-dialog.tsx
index 66f65c61..e6543d71 100644
--- a/frontend/src/components/console/project/start-develop-task-dialog.tsx
+++ b/frontend/src/components/console/project/start-develop-task-dialog.tsx
@@ -10,6 +10,7 @@ import { selectHost, selectImage, selectModel } from "@/utils/common"
 import { apiRequest } from "@/utils/requestUtils"
 import { IconSparkles } from "@tabler/icons-react"
 import { useState, useEffect } from "react"
+import { useNavigate } from "react-router-dom"
 import { toast } from "sonner"
 
 interface StartDevelopTaskDialogProps {
@@ -23,6 +24,7 @@ export default function StartDevelopTaskDialog({
   onOpenChange,
   project
 }: StartDevelopTaskDialogProps) {
+  const navigate = useNavigate()
   const [submitting, setSubmitting] = useState<boolean>(false)
   const [branches, setBranches] = useState<string[]>([])
   const [selectedBranch, setSelectedBranch] = useState<string>('')
@@ -118,10 +120,7 @@ export default function StartDevelopTaskDialog({
       if (resp.code === 0) {
         toast.success('对话任务已启动')
         onOpenChange(false)
-        const viewUrl = project?.id
-          ? `/console/task/view?taskId=${resp.data?.id}&projectId=${project.id}`
-          : `/console/task/view?taskId=${resp.data?.id}`
-        window.open(viewUrl, "_blank")
+        navigate(`/console/task/${resp.data?.id}`)
       } else {
         toast.error(resp.message || '任务启动失败')
       }
@@ -134,7 +133,7 @@ export default function StartDevelopTaskDialog({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>发起对话</DialogTitle>
+          <DialogTitle>启动 AI 任务</DialogTitle>
         </DialogHeader>
         
         <div className="space-y-4">
diff --git a/frontend/src/components/console/settings/hosts.tsx b/frontend/src/components/console/settings/hosts.tsx
index b8272700..d62a417d 100644
--- a/frontend/src/components/console/settings/hosts.tsx
+++ b/frontend/src/components/console/settings/hosts.tsx
@@ -1,13 +1,5 @@
 import { useState, useEffect } from "react"
 import { Button } from "@/components/ui/button"
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card"
 import {
   Dialog,
   DialogContent,
@@ -162,7 +154,7 @@ export default function Hosts() {
 
   const loadHosts = () => {
     return (
-      <Empty className="border border-dashed">
+      <Empty className="min-h-full border border-dashed">
         <EmptyHeader>
           <EmptyMedia variant="icon">
             <Spinner className="size-6" />
@@ -177,7 +169,7 @@ export default function Hosts() {
 
   const noHosts = () => {
     return (
-      <Empty className="border border-dashed">
+      <Empty className="min-h-full border border-dashed">
         <EmptyHeader>
           <EmptyMedia variant="icon">
             <IconAlertHexagon />
@@ -261,23 +253,23 @@ export default function Hosts() {
 
   return (
     <>
-      <Card className="w-full shadow-none">
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <HardDrive />
-            开发环境宿主机
-          </CardTitle>
-          <CardDescription>
-            用于在宿主机上创建开发环境
-          </CardDescription>
-          <CardAction>
-            <Button variant={"outline"} size="sm" onClick={() => setOpen(true)}>绑定</Button>
-          </CardAction>
-        </CardHeader>
-        <CardContent>
-        {loadingHosts ? loadHosts() : hosts.length === 0 ? noHosts() : listHosts()}
-        </CardContent>
-      </Card>
+      <div className="flex h-full min-h-0 flex-col">
+        <div className="flex shrink-0 items-start justify-between gap-4 pb-4">
+          <div>
+            <div className="flex items-center gap-2 font-semibold leading-none">
+              <HardDrive />
+              开发环境宿主机
+            </div>
+            <p className="mt-2 text-sm text-muted-foreground">
+              用于在宿主机上创建开发环境
+            </p>
+          </div>
+          <Button variant="outline" size="sm" onClick={() => setOpen(true)}>绑定</Button>
+        </div>
+        <div className="flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain">
+          {loadingHosts ? loadHosts() : hosts.length === 0 ? noHosts() : listHosts()}
+        </div>
+      </div>
 
       <Dialog open={open} onOpenChange={setOpen}>
         <DialogContent className="sm:max-w-3xl">
diff --git a/frontend/src/components/console/settings/identities.tsx b/frontend/src/components/console/settings/identities.tsx
index af8015a9..a9606bce 100644
--- a/frontend/src/components/console/settings/identities.tsx
+++ b/frontend/src/components/console/settings/identities.tsx
@@ -1,14 +1,6 @@
 import { useState } from "react"
 import { Avatar, AvatarFallback } from "@/components/ui/avatar"
 import { Button } from "@/components/ui/button"
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card"
 import {
   Item,
   ItemActions,
@@ -168,7 +160,7 @@ export default function Identities() {
   }
   const loadIdentities = () => {
     return (
-      <Empty className="border border-dashed">
+      <Empty className="min-h-full border border-dashed">
         <EmptyHeader>
           <EmptyMedia variant="icon">
             <Spinner className="size-6" />
@@ -374,16 +366,18 @@ export default function Identities() {
 
 
   return (
-    <Card className="w-full shadow-none">
-      <CardHeader>
-        <CardTitle className="flex items-center gap-2">
-          <IconPasswordFingerprint />
-          Git 平台身份凭证
-        </CardTitle>
-        <CardDescription>
-          用于在 Git 仓库中提交代码和拉取代码的身份凭证
-        </CardDescription>
-        <CardAction>
+    <div className="flex h-full min-h-0 flex-col">
+      <div className="flex shrink-0 items-start justify-between gap-4 pb-4">
+        <div>
+          <div className="flex items-center gap-2 font-semibold leading-none">
+            <IconPasswordFingerprint />
+            Git 平台身份凭证
+          </div>
+          <p className="mt-2 text-sm text-muted-foreground">
+            用于在 Git 仓库中提交代码和拉取代码的身份凭证
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button variant="outline" size="sm">
@@ -431,9 +425,9 @@ export default function Identities() {
             onOpenChange={setIsDialogOpen}
             onRefresh={reloadIdentities}
           />
-        </CardAction>
-      </CardHeader>
-      <CardContent>
+        </div>
+      </div>
+      <div className="flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain">
         {loadingIdentities ? (
           loadIdentities()
         ) : (
@@ -445,7 +439,7 @@ export default function Identities() {
             {identityItems()}
           </ItemGroup>
         )}
-      </CardContent>
+      </div>
       <EditIdentity
         open={isEditDialogOpen}
         onOpenChange={(open) => {
@@ -456,6 +450,6 @@ export default function Identities() {
         identity={editingIdentity}
         onRefresh={reloadIdentities}
       />
-    </Card>
+    </div>
   )
 }
diff --git a/frontend/src/components/console/settings/images.tsx b/frontend/src/components/console/settings/images.tsx
index 6bef9c60..83e7e2c7 100644
--- a/frontend/src/components/console/settings/images.tsx
+++ b/frontend/src/components/console/settings/images.tsx
@@ -2,14 +2,6 @@ import { useState } from "react"
 import Icon from "@/components/common/Icon"
 import { Avatar, AvatarFallback } from "@/components/ui/avatar"
 import { Button } from "@/components/ui/button"
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card"
 import {
   Item,
   ItemActions,
@@ -104,7 +96,7 @@ export default function Images() {
 
   const loadImages = () => {
     return (
-      <Empty className="border border-dashed">
+      <Empty className="min-h-full border border-dashed">
         <EmptyHeader>
           <EmptyMedia variant="icon">
             <Spinner className="size-6" />
@@ -121,7 +113,7 @@ export default function Images() {
 
   const noImages = () => {
     return (
-      <Empty className="border border-dashed">
+      <Empty className="min-h-full border border-dashed">
         <EmptyHeader>
           <EmptyMedia variant="icon">
             <IconAlertHexagon />
@@ -213,28 +205,26 @@ export default function Images() {
   }
 
   return (
-    <Card className="w-full shadow-none">
-      <CardHeader>
-        <CardTitle className="flex items-center gap-2">
-          <Box />
-          系统镜像
-        </CardTitle>
-        <CardDescription>
-          使用 Docker 镜像，用于构建开发环境
-        </CardDescription>
-        <CardAction>
-          <AddImage
-            open={isDialogOpen}
-            onOpenChange={setIsDialogOpen}
-            onRefresh={reloadImages}
-          />
-        </CardAction>
-      </CardHeader>
-      <CardContent>
-
-      {loadingImages ? loadImages() : images.length === 0 ? noImages() : listImages()}
-
-      </CardContent>
+    <div className="flex h-full min-h-0 flex-col">
+      <div className="flex shrink-0 items-start justify-between gap-4 pb-4">
+        <div>
+          <div className="flex items-center gap-2 font-semibold leading-none">
+            <Box />
+            系统镜像
+          </div>
+          <p className="mt-2 text-sm text-muted-foreground">
+            使用 Docker 镜像，用于构建开发环境
+          </p>
+        </div>
+        <AddImage
+          open={isDialogOpen}
+          onOpenChange={setIsDialogOpen}
+          onRefresh={reloadImages}
+        />
+      </div>
+      <div className="flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain">
+        {loadingImages ? loadImages() : images.length === 0 ? noImages() : listImages()}
+      </div>
       <EditImage
         open={isEditDialogOpen}
         onOpenChange={(open) => {
@@ -245,6 +235,6 @@ export default function Images() {
         image={editingImage ? { id: editingImage.id || '', image_name: editingImage.name || '', remark: editingImage.remark || '' } : null}
         onRefresh={reloadImages}
       />
-    </Card>
+    </div>
   )
 }
diff --git a/frontend/src/components/console/settings/models.tsx b/frontend/src/components/console/settings/models.tsx
index fc8bbb86..b337e856 100644
--- a/frontend/src/components/console/settings/models.tsx
+++ b/frontend/src/components/console/settings/models.tsx
@@ -1,13 +1,5 @@
 import { useState } from "react"
 import { Button } from "@/components/ui/button"
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card"
 import {
   Bot,
   MoreVertical,
@@ -142,7 +134,7 @@ export default function Models() {
 
   const loadModels = () => {
     return (
-      <Empty className="border border-dashed">
+      <Empty className="min-h-full border border-dashed">
         <EmptyHeader>
           <EmptyMedia variant="icon">
             <Spinner className="size-6" />
@@ -159,7 +151,7 @@ export default function Models() {
 
   const noModels = () => {
     return (
-      <Empty className="border border-dashed">
+      <Empty className="min-h-full border border-dashed">
         <EmptyHeader>
           <EmptyMedia variant="icon">
             <IconAlertHexagon />
@@ -257,26 +249,26 @@ export default function Models() {
   
 
   return (
-    <Card className="w-full shadow-none">
-      <CardHeader>
-        <CardTitle className="flex items-center gap-2">
-          <Bot />
-          AI 大模型
-        </CardTitle>
-        <CardDescription>
-          配置 AI 大模型，用于代码生成和分析项目
-        </CardDescription>
-        <CardAction>
-          <AddModel
-            open={isDialogOpen}
-            onOpenChange={setIsDialogOpen}
-            onRefresh={reloadModels}
-          />
-        </CardAction>
-      </CardHeader>
-      <CardContent>
+    <div className="flex h-full min-h-0 flex-col">
+      <div className="flex shrink-0 items-start justify-between gap-4 pb-4">
+        <div>
+          <div className="flex items-center gap-2 font-semibold leading-none">
+            <Bot />
+            AI 大模型
+          </div>
+          <p className="mt-2 text-sm text-muted-foreground">
+            配置 AI 大模型，用于代码生成和分析项目
+          </p>
+        </div>
+        <AddModel
+          open={isDialogOpen}
+          onOpenChange={setIsDialogOpen}
+          onRefresh={reloadModels}
+        />
+      </div>
+      <div className="flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain">
         {loadingModels ? loadModels() : models.length === 0 ? noModels() : listModels()}
-      </CardContent>
+      </div>
       <EditModel
         open={isEditDialogOpen}
         onOpenChange={setIsEditDialogOpen}
@@ -317,6 +309,6 @@ export default function Models() {
           </div>
         </DialogContent>
       </Dialog>
-    </Card>
+    </div>
   )
 }
diff --git a/frontend/src/components/console/settings/notifications.tsx b/frontend/src/components/console/settings/notifications.tsx
index db5cadf9..7edb04a5 100644
--- a/frontend/src/components/console/settings/notifications.tsx
+++ b/frontend/src/components/console/settings/notifications.tsx
@@ -1,13 +1,5 @@
 import { useState, useEffect } from "react"
 import { Bell, CirclePlus, Link2, MoreVertical } from "lucide-react"
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
@@ -348,7 +340,7 @@ export default function Notifications() {
   )
 
   const loadingContent = (
-    <Empty className="border border-dashed">
+    <Empty className="min-h-full border border-dashed">
       <EmptyHeader>
         <EmptyMedia variant="icon">
           <Spinner className="size-6" />
@@ -361,30 +353,45 @@ export default function Notifications() {
   )
 
   return (
-    <Card className="w-full shadow-none">
-      <CardHeader>
-        <CardTitle className="flex items-center gap-2">
-          <Bell />
-          消息通知
-        </CardTitle>
-        <CardDescription>
-          配置任务、系统等消息的接收方式，支持钉钉、飞书、企业微信机器人和 Webhook
-        </CardDescription>
-        <CardAction>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={openAddDialog}
-            disabled={loadingEventTypes || eventTypes.length === 0}
-          >
-            <CirclePlus className="size-4" />
-            添加接收端
-          </Button>
-        </CardAction>
-      </CardHeader>
-      <CardContent>
-        {loadingChannels ? loadingContent : channels.length > 0 ? listChannels() : null}
-      </CardContent>
+    <div className="flex h-full min-h-0 flex-col">
+      <div className="flex shrink-0 items-start justify-between gap-4 pb-4">
+        <div>
+          <div className="flex items-center gap-2 font-semibold leading-none">
+            <Bell />
+            消息通知
+          </div>
+          <p className="mt-2 text-sm text-muted-foreground">
+            配置任务、系统等消息的接收方式，支持钉钉、飞书、企业微信机器人和 Webhook
+          </p>
+        </div>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={openAddDialog}
+          disabled={loadingEventTypes || eventTypes.length === 0}
+        >
+          <CirclePlus className="size-4" />
+          添加接收端
+        </Button>
+      </div>
+      <div className="flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain">
+        {loadingChannels ? (
+          loadingContent
+        ) : channels.length > 0 ? (
+          listChannels()
+        ) : (
+          <Empty className="min-h-full border border-dashed">
+            <EmptyHeader>
+              <EmptyMedia variant="icon">
+                <Bell className="size-6" />
+              </EmptyMedia>
+              <EmptyDescription>
+                添加接收端以接收任务、系统等消息通知
+              </EmptyDescription>
+            </EmptyHeader>
+          </Empty>
+        )}
+      </div>
 
       <Dialog open={addDialogOpen} onOpenChange={setAddDialogOpen}>
         <DialogContent className="sm:max-w-md">
@@ -516,6 +523,6 @@ export default function Notifications() {
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
-    </Card>
+    </div>
   )
 }
diff --git a/frontend/src/components/console/settings/settings-dialog.tsx b/frontend/src/components/console/settings/settings-dialog.tsx
new file mode 100644
index 00000000..0a703185
--- /dev/null
+++ b/frontend/src/components/console/settings/settings-dialog.tsx
@@ -0,0 +1,195 @@
+"use client"
+
+import * as React from "react"
+import {
+  Bell,
+  Bot,
+  Box,
+  HardDrive,
+  MonitorCloud,
+  Settings,
+} from "lucide-react"
+import { IconPasswordFingerprint } from "@tabler/icons-react"
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from "@/components/ui/sidebar"
+import { useGitHubSetupCallback } from "@/hooks/useGitHubSetupCallback"
+import { useCommonData } from "@/components/console/data-provider"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+
+import Images from "./images"
+import Models from "./models"
+import Hosts from "./hosts"
+import Identities from "./identities"
+import VmsPage from "./vms"
+import Notifications from "./notifications"
+
+const SETTINGS_NAV = [
+  { id: "identities", name: "Git 身份", icon: IconPasswordFingerprint },
+  { id: "models", name: "AI 大模型", icon: Bot },
+  { id: "images", name: "系统镜像", icon: Box },
+  { id: "hosts", name: "宿主机", icon: HardDrive },
+  { id: "vms", name: "开发环境", icon: MonitorCloud },
+  { id: "notifications", name: "通知", icon: Bell },
+] as const
+
+type SettingsSectionId = (typeof SETTINGS_NAV)[number]["id"]
+
+function SettingsContent({ section }: { section: SettingsSectionId }) {
+  switch (section) {
+    case "identities":
+      return <Identities />
+    case "models":
+      return <Models />
+    case "images":
+      return <Images />
+    case "hosts":
+      return <Hosts />
+    case "vms":
+      return <VmsPage />
+    case "notifications":
+      return <Notifications />
+    default:
+      return <Identities />
+  }
+}
+
+function SettingsNavContent({
+  activeSection,
+  onSectionChange,
+}: {
+  activeSection: SettingsSectionId
+  onSectionChange: (id: SettingsSectionId) => void
+}) {
+  return (
+    <Sidebar collapsible="none" className="w-12 shrink-0 border-r sm:w-44 md:w-56">
+      <SidebarHeader>
+        <div className="flex items-center gap-2 px-2 pt-2 pb-4 font-semibold text-md">
+          <Settings className="size-4 shrink-0" />
+          <span className="hidden sm:inline">设置</span>
+        </div>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {SETTINGS_NAV.map((item) => (
+                <SidebarMenuItem key={item.id}>
+                  <SidebarMenuButton
+                    isActive={activeSection === item.id}
+                    onClick={() => onSectionChange(item.id)}
+                  >
+                    <item.icon className="size-4 shrink-0" />
+                    <span className="hidden sm:inline">{item.name}</span>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  )
+}
+
+export interface SettingsDialogProps {
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
+  const [activeSection, setActiveSection] =
+    React.useState<SettingsSectionId>("identities")
+  const { reloadIdentities } = useCommonData()
+
+  const { result, dismiss } = useGitHubSetupCallback(() => {
+    reloadIdentities()
+  })
+
+  return (
+    <>
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent
+          className="flex h-[60vh] max-h-[90vh] w-[90vw] max-w-4xl flex-col gap-0 overflow-hidden p-0 sm:max-w-5xl"
+          showCloseButton={false}
+        >
+          <DialogHeader className="sr-only">
+            <DialogTitle>配置</DialogTitle>
+            <DialogDescription>自定义您的配置选项</DialogDescription>
+          </DialogHeader>
+          <SidebarProvider
+            style={
+              {
+                "--sidebar-width": "14rem",
+              } as React.CSSProperties
+            }
+            className="flex min-h-0 flex-1 overflow-hidden"
+          >
+            <div className="flex min-h-0 w-full flex-1 overflow-hidden">
+              <SettingsNavContent
+                activeSection={activeSection}
+                onSectionChange={setActiveSection}
+              />
+              <main className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
+                <div className="flex min-h-0 flex-1 flex-col overflow-hidden p-4">
+                  <SettingsContent section={activeSection} />
+                </div>
+              </main>
+            </div>
+          </SidebarProvider>
+        </DialogContent>
+      </Dialog>
+
+      <AlertDialog
+        open={result !== null}
+        onOpenChange={(open) => {
+          if (!open) dismiss()
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {result?.type === "success"
+                ? "GitHub App 安装成功"
+                : "GitHub App 安装失败"}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {result?.type === "success"
+                ? result.accountLogin
+                  ? `已关联到账户 ${result.accountLogin}`
+                  : "GitHub App 已成功安装"
+                : `安装失败 (${result?.reason}): ${result?.message}`}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogAction onClick={dismiss}>确定</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  )
+}
diff --git a/frontend/src/components/console/settings/vms.tsx b/frontend/src/components/console/settings/vms.tsx
index 7854c64e..7e34ce48 100644
--- a/frontend/src/components/console/settings/vms.tsx
+++ b/frontend/src/components/console/settings/vms.tsx
@@ -57,7 +57,6 @@ import {
 import { HoverCard, HoverCardTrigger } from "@/components/ui/hover-card";
 import { useCommonData } from "@/components/console/data-provider";
 import { VmRenewDialog } from "@/components/console/vm/vm-renew";
-import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Switch } from "@/components/ui/switch";
 
 export default function VmsPage() {
@@ -147,7 +146,7 @@ export default function VmsPage() {
 
   const loadVms = () => {
     return (
-      <Empty className="border border-dashed">
+      <Empty className="min-h-full border border-dashed">
         <EmptyHeader>
           <EmptyMedia variant="icon">
             <Spinner className="size-6" />
@@ -164,7 +163,7 @@ export default function VmsPage() {
 
   const NoVms = () => {
     return (
-      <Empty className="border h-full">
+      <Empty className="min-h-full border">
         <EmptyHeader>
           <EmptyMedia variant="icon">
             <Server />
@@ -190,6 +189,21 @@ export default function VmsPage() {
     )
   }
 
+  const AllOfflineVms = () => {
+    return (
+      <Empty className="min-h-full border">
+        <EmptyHeader>
+          <EmptyMedia variant="icon">
+            <MonitorCloud />
+          </EmptyMedia>
+          <EmptyDescription>
+            您有 {vms.length} 个离线开发环境，开启「离线开发环境」可查看
+          </EmptyDescription>
+        </EmptyHeader>
+      </Empty>
+    )
+  }
+
   const VmsList = () => {
     return (
       <ItemGroup className="flex flex-col gap-4">
@@ -284,17 +298,18 @@ export default function VmsPage() {
   }
 
   return (
-    <Card className="w-full shadow-none">
-      <CardHeader>
-        <CardTitle className="flex items-center gap-2">
-          <MonitorCloud />
-          开发环境
-        </CardTitle>
-        <CardDescription>
-          用于在宿主机上创建开发环境
-        </CardDescription>
-        <CardAction className="">
-          <DropdownMenu>
+    <div className="flex h-full min-h-0 flex-col">
+      <div className="flex shrink-0 items-start justify-between gap-4 pb-4">
+        <div>
+          <div className="flex items-center gap-2 font-semibold leading-none">
+            <MonitorCloud />
+            开发环境
+          </div>
+          <p className="mt-2 text-sm text-muted-foreground">
+            用于在宿主机上创建开发环境
+          </p>
+        </div>
+        <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button variant="ghost" size="icon-sm">
                 <MoreVertical className="size-4" />
@@ -319,10 +334,9 @@ export default function VmsPage() {
               </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
-        </CardAction>
-      </CardHeader>
-      <CardContent>
-        {loadingHosts && !hostsInited ? loadVms() : vms.length === 0 ? <NoVms /> : <VmsList />}
+      </div>
+      <div className="flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain">
+        {loadingHosts && !hostsInited ? loadVms() : vms.length === 0 ? <NoVms /> : showVms.length === 0 ? <AllOfflineVms /> : <VmsList />}
         <CreateVM
           open={createDialogOpen}
           onOpenChange={setCreateDialogOpen}
@@ -358,7 +372,7 @@ export default function VmsPage() {
           vmId={vmToRenew?.id}
           onSuccess={reloadHosts}
         />
-      </CardContent>
-    </Card>
+      </div>
+    </div>
   )
 }
diff --git a/frontend/src/components/console/task/chat-panel.tsx b/frontend/src/components/console/task/chat-panel.tsx
index 3a314b29..015fa472 100644
--- a/frontend/src/components/console/task/chat-panel.tsx
+++ b/frontend/src/components/console/task/chat-panel.tsx
@@ -1,13 +1,11 @@
 import { MessageItem, type MessageType } from "./message"
 import React from "react"
+import { createPortal } from "react-dom"
 import { useVirtualizer } from "@tanstack/react-virtual"
 import { Button } from "@/components/ui/button"
 import { ChevronsDownUp, ChevronsUpDown } from "lucide-react"
 import { Label } from "@/components/ui/label"
-import { stripMarkdown } from "@/utils/common"
-import ReactMarkdown from "react-markdown"
-import remarkGfm from "remark-gfm"
-import { IconCircle, IconCircleCheck, IconLoader, IconPlayerStopFilled, IconSparkles, IconSubtask } from "@tabler/icons-react"
+import { IconCircle, IconCircleCheck, IconLoader, IconPlayerStopFilled, IconSubtask } from "@tabler/icons-react"
 import type { AvailableCommands, PlanEntry, RepoFileChange, TaskPlan, TaskStreamStatus, TaskWebSocketManager } from "./ws-manager"
 import { TaskChatInputBox } from "./chat-inputbox"
 import { cn } from "@/lib/utils"
@@ -15,11 +13,12 @@ import { FileChangesDialog } from "./file-changes-dialog"
 import type { ConstsCliName } from "@/api/Api"
 
 interface TaskChatPanelProps {
+  scrollContainerRef?: React.RefObject<HTMLDivElement | null>
+  inputPortalTargetRef?: React.RefObject<HTMLDivElement | null>
   messages: MessageType[]
   cli?: ConstsCliName
   streamStatus: TaskStreamStatus
   disabled: boolean
-  thinkingMessage: string
   plan: TaskPlan | null
   availableCommands: AvailableCommands | null
   sending: boolean
@@ -33,11 +32,11 @@ interface TaskChatPanelProps {
   taskManager: TaskWebSocketManager | null
 }
 
-export const TaskChatPanel = ({ messages, cli, streamStatus, disabled, thinkingMessage, plan, availableCommands, sending, sendUserInput, sendCancelCommand, sendResetSession, sendReloadSession, queueSize, fileChanges, fileChangesMap, taskManager }: TaskChatPanelProps) => {
-  const [thinkingOpened, setThinkingOpened] = React.useState(false)
+export const TaskChatPanel = ({ scrollContainerRef: externalScrollRef, inputPortalTargetRef, messages, cli, streamStatus, disabled, plan, availableCommands, sending, sendUserInput, sendCancelCommand, sendResetSession, sendReloadSession, queueSize, fileChanges, fileChangesMap, taskManager }: TaskChatPanelProps) => {
   const [planOpened, setPlanOpened] = React.useState(false)
   const [timeCost, setTimeCost] = React.useState(0)
-  const scrollContainerRef = React.useRef<HTMLDivElement>(null)
+  const internalScrollRef = React.useRef<HTMLDivElement>(null)
+  const scrollContainerRef = externalScrollRef ?? internalScrollRef
   const [showSubmitButton, setShowSubmitButton] = React.useState(false)
   const [fileChangesDialogOpen, setFileChangesDialogOpen] = React.useState(false)
 
@@ -55,14 +54,6 @@ export const TaskChatPanel = ({ messages, cli, streamStatus, disabled, thinkingM
 
   }, [plan])
 
-  const thinkingSummary = React.useMemo(() => {
-    const textThinkingMesssage = stripMarkdown(thinkingMessage)
-    if (textThinkingMesssage.length <= 200) {
-      return textThinkingMesssage
-    }
-    return textThinkingMesssage.slice(-200)
-  }, [thinkingMessage])
-
   React.useEffect(() => {
     if (streamStatus === 'executing') {
       setTimeCost(0)
@@ -192,27 +183,7 @@ export const TaskChatPanel = ({ messages, cli, streamStatus, disabled, thinkingM
   }
 
   return (
-    <div className="flex flex-col gap-2 h-full w-full">
-      {thinkingSummary && <div className="flex w-full flex-col gap-2 border rounded-md p-2">
-        <div className="flex items-center justify-between">
-          <Label>
-            <IconSparkles className="size-4 text-primary" />
-            思考过程
-          </Label>
-          <Button variant={thinkingOpened ? "secondary" : "ghost"} size="icon-sm" className="size-5" onClick={() => setThinkingOpened(!thinkingOpened)}>
-            {thinkingOpened ? <ChevronsDownUp className="size-4" /> : <ChevronsUpDown className="size-4" />}
-          </Button>
-        </div>
-        {thinkingOpened ? (<div className="w-full">
-          <div className="user-message-markdown text-sm max-h-80 overflow-y-auto opacity-60 text-xs px-2 -mx-2">
-            <ReactMarkdown remarkPlugins={[remarkGfm]}>{thinkingMessage}</ReactMarkdown>
-          </div>
-        </div>): (<div className="w-full max-w-full overflow-hidden relative h-4">
-            <div className="text-xs text-muted-foreground absolute right-0 min-w-full whitespace-nowrap">
-            {thinkingSummary}
-          </div>
-        </div>)}
-      </div>}
+    <div className={cn("flex flex-col gap-2 w-full", externalScrollRef ? "min-h-full" : "h-full")}>
       {plan && plan.entries.length > 0 && <div className="flex w-full flex-col gap-2 border rounded-md p-2">
         <div className="flex items-center justify-between">
           <Label>
@@ -228,7 +199,11 @@ export const TaskChatPanel = ({ messages, cli, streamStatus, disabled, thinkingM
         </div>
       </div>}
 
-      <div ref={scrollContainerRef} className="h-full overflow-y-auto p-2 border rounded-md">
+      <div
+        ref={!externalScrollRef ? internalScrollRef : undefined}
+        className={cn("py-2", !externalScrollRef && "h-full overflow-y-auto")}
+        style={externalScrollRef ? { minHeight: virtualizer.getTotalSize() } : undefined}
+      >
         <div
           style={{
             height: virtualizer.getTotalSize(),
@@ -295,21 +270,42 @@ export const TaskChatPanel = ({ messages, cli, streamStatus, disabled, thinkingM
           setShowSubmitButton(false)
         }}
       />
-      {disabled ? (
-        <div className="flex items-center justify-center w-ful border bg-muted/50 rounded-md p-2 text-xs text-muted-foreground">
-          开发环境不可用
-        </div>
-      ) : (
-        <TaskChatInputBox 
-          streamStatus={streamStatus}
-          availableCommands={availableCommands}
-          onSend={sendUserInput}
-          sending={sending}
-          queueSize={queueSize}
-          sendResetSession={sendResetSession}
-          sendReloadSession={sendReloadSession}
-        />
-      )}
+      {inputPortalTargetRef
+        ? inputPortalTargetRef.current &&
+          createPortal(
+            disabled ? (
+              <div className="flex items-center justify-center w-full border bg-muted/50 rounded-md p-2 text-xs text-muted-foreground">
+                开发环境不可用
+              </div>
+            ) : (
+              <TaskChatInputBox
+                streamStatus={streamStatus}
+                availableCommands={availableCommands}
+                onSend={sendUserInput}
+                sending={sending}
+                queueSize={queueSize}
+                sendResetSession={sendResetSession}
+                sendReloadSession={sendReloadSession}
+              />
+            ),
+            inputPortalTargetRef.current
+          )
+        : null}
+      {!inputPortalTargetRef && (disabled ? (
+            <div className="flex items-center justify-center w-full border bg-muted/50 rounded-md p-2 text-xs text-muted-foreground">
+              开发环境不可用
+            </div>
+          ) : (
+            <TaskChatInputBox
+              streamStatus={streamStatus}
+              availableCommands={availableCommands}
+              onSend={sendUserInput}
+              sending={sending}
+              queueSize={queueSize}
+              sendResetSession={sendResetSession}
+              sendReloadSession={sendReloadSession}
+            />
+          ))}
 
     </div>
   )
diff --git a/frontend/src/components/console/task/file-actions-dropdown.tsx b/frontend/src/components/console/task/file-actions-dropdown.tsx
index ee83e5af..d40c177e 100644
--- a/frontend/src/components/console/task/file-actions-dropdown.tsx
+++ b/frontend/src/components/console/task/file-actions-dropdown.tsx
@@ -81,7 +81,7 @@ export function FileActionsDropdown({ file, envid, onRefresh, onSuccess, alwaysV
           <Button
             variant="ghost"
             size="icon"
-            className={`h-5 w-5 shrink-0 ${alwaysVisible ? '' : 'opacity-0 group-hover:opacity-100 transition-opacity'}`}
+            className={`shrink-0 leading-none p-0 ${alwaysVisible ? 'size-8' : 'size-5 opacity-0 group-hover:opacity-100 transition-opacity'}`}
             onClick={(e) => e.stopPropagation()}
           >
             <IconDotsVertical className="size-4" />
diff --git a/frontend/src/components/console/task/task-changes-panel.tsx b/frontend/src/components/console/task/task-changes-panel.tsx
new file mode 100644
index 00000000..6ac19df2
--- /dev/null
+++ b/frontend/src/components/console/task/task-changes-panel.tsx
@@ -0,0 +1,197 @@
+import { useState } from "react"
+import type { RepoFileChange, TaskWebSocketManager } from "./ws-manager"
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia } from "@/components/ui/empty"
+import { Item, ItemContent, ItemGroup, ItemTitle } from "@/components/ui/item"
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable"
+import { Button } from "@/components/ui/button"
+import { IconCloudOff, IconFileDiff, IconLoader, IconReport, IconX } from "@tabler/icons-react"
+import { parseDiff, Diff, Hunk } from "react-diff-view"
+import "react-diff-view/style/index.css"
+import { cn } from "@/lib/utils"
+
+interface TaskChangesPanelProps {
+  fileChanges: string[]
+  fileChangesMap: Map<string, RepoFileChange>
+  taskManager: TaskWebSocketManager | null
+  disabled?: boolean
+}
+
+export function TaskChangesPanel({ fileChanges, fileChangesMap, taskManager, disabled }: TaskChangesPanelProps) {
+  const sortedPaths = [...fileChanges].sort((a, b) => a.localeCompare(b))
+  const [selectedFile, setSelectedFile] = useState<string | null>(null)
+  const [diffContent, setDiffContent] = useState<string>("")
+  const [loading, setLoading] = useState(false)
+
+  const handlePathClick = async (path: string) => {
+    if (selectedFile === path) {
+      setSelectedFile(null)
+      setDiffContent("")
+      return
+    }
+    setSelectedFile(path)
+    setLoading(true)
+    setDiffContent("")
+    const diff = await taskManager?.getFileDiff(path)
+    setDiffContent(diff || "")
+    setLoading(false)
+  }
+
+  const diffFiles = diffContent ? parseDiff(diffContent) : []
+
+  if (disabled) {
+    return (
+      <div className="flex flex-col h-full min-h-0 rounded-lg border overflow-hidden">
+        <div className="flex items-center gap-2 px-4 py-1 min-h-11 border-b bg-muted/50 shrink-0">
+          <span className="text-sm font-medium">文件变更</span>
+        </div>
+        <div className="flex-1 min-h-0 flex flex-col">
+          <Empty className="border border-dashed w-full flex-1 min-h-0">
+            <EmptyHeader>
+              <EmptyMedia variant="icon">
+                <IconCloudOff className="size-6" />
+              </EmptyMedia>
+              <EmptyDescription>
+                开发环境未就绪，无法查看变更
+              </EmptyDescription>
+            </EmptyHeader>
+          </Empty>
+        </div>
+      </div>
+    )
+  }
+
+  const renderDiffContent = () => {
+    if (!selectedFile) return null
+    if (loading) {
+      return (
+        <Empty className="w-full flex-1 min-h-0">
+          <EmptyHeader>
+            <EmptyMedia variant="icon">
+              <IconLoader className="size-6 animate-spin" />
+            </EmptyMedia>
+            <EmptyDescription>加载中...</EmptyDescription>
+          </EmptyHeader>
+        </Empty>
+      )
+    }
+    if (diffFiles.length > 0 && diffFiles.some((file) => file.hunks?.length)) {
+      return (
+        <div className="h-full overflow-auto" style={{ "--diff-font-family": "var(--font-google-sans-code)" } as React.CSSProperties}>
+          <style>{`
+            .task-changes-diff .diff-line td:nth-child(2) {
+              border-left: 1px var(--border) solid;
+            }
+          `}</style>
+          <div className="text-xs rounded-md overflow-x-auto bg-muted/30">
+            {diffFiles.map((file, index) => (
+              <Diff key={index} viewType="split" diffType={file.type} hunks={file.hunks} gutterType="none" hunkClassName="task-changes-diff">
+                {(hunks) => hunks.map((hunk) => <Hunk key={hunk.content} hunk={hunk} />)}
+              </Diff>
+            ))}
+          </div>
+        </div>
+      )
+    }
+    return (
+      <Empty className="w-full flex-1 min-h-0">
+        <EmptyHeader>
+          <EmptyMedia variant="icon">
+            <IconReport className="size-6" />
+          </EmptyMedia>
+          <EmptyDescription>无内容</EmptyDescription>
+        </EmptyHeader>
+      </Empty>
+    )
+  }
+
+  const fileListPanel = (
+    <div className="flex flex-col min-h-0 flex-1 rounded-lg border overflow-hidden">
+      <div className="flex items-center gap-2 px-4 py-1 min-h-11 border-b bg-muted/30 shrink-0">
+        <span className="text-sm font-medium">变更文件</span>
+      </div>
+      <div className={cn("flex-1 min-h-0 py-2 overflow-x-hidden", sortedPaths.length === 0 ? "flex flex-col" : "overflow-y-auto")}>
+        {sortedPaths.length === 0 ? (
+          <Empty className="w-full flex-1 min-h-0">
+            <EmptyHeader>
+              <EmptyMedia variant="icon">
+                <IconFileDiff className="size-6" />
+              </EmptyMedia>
+              <EmptyDescription>暂无文件变更</EmptyDescription>
+            </EmptyHeader>
+          </Empty>
+        ) : (
+          <ItemGroup className="gap-2 mx-2">
+            {sortedPaths.map((path) => {
+              const change = fileChangesMap.get(path)
+              const additions = change?.additions ?? 0
+              const deletions = change?.deletions ?? 0
+              const isSelected = selectedFile === path
+              return (
+                <Item variant="outline" size="sm" key={path} className={cn("group hover:border-primary/50 py-2", isSelected && "border-primary bg-primary/5")}>
+                  <ItemContent className="flex flex-row items-center justify-between gap-2 min-w-0">
+                    <ItemTitle
+                      className={cn(
+                        "truncate font-mono text-xs cursor-pointer transition-colors hover:text-primary min-w-0 flex-1 overflow-hidden",
+                        isSelected && "text-primary"
+                      )}
+                      onClick={() => handlePathClick(path)}
+                      title={path}
+                    >
+                      {path}
+                    </ItemTitle>
+                    <div className="flex items-center gap-1 shrink-0 tabular-nums text-xs">
+                      {additions > 0 && (
+                        <span className="text-green-700 dark:text-green-400">+{additions}</span>
+                      )}
+                      {deletions > 0 && (
+                        <span className="text-red-700 dark:text-red-400">-{deletions}</span>
+                      )}
+                    </div>
+                  </ItemContent>
+                </Item>
+              )
+            })}
+          </ItemGroup>
+        )}
+      </div>
+    </div>
+  )
+
+  const diffPanel = selectedFile && (
+    <div className="flex flex-col min-h-0 flex-1 rounded-lg border overflow-hidden bg-background">
+      <div className="flex items-center justify-between gap-2 px-4 py-1 min-h-11 border-b bg-muted/30 shrink-0">
+        <span className="text-sm font-medium truncate font-mono flex-1 min-w-0">{selectedFile}</span>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-8 shrink-0 hover:text-primary"
+          onClick={() => {
+            setSelectedFile(null)
+            setDiffContent("")
+          }}
+        >
+          <IconX className="size-4" />
+        </Button>
+      </div>
+      <div className="flex-1 min-h-0 overflow-hidden flex flex-col">{renderDiffContent()}</div>
+    </div>
+  )
+
+  return (
+    <div className="flex flex-col h-full min-h-0">
+      {selectedFile ? (
+        <ResizablePanelGroup direction="vertical" className="flex-1 min-h-0 gap-2">
+          <ResizablePanel defaultSize={50} minSize={20} className="min-h-0 flex flex-col overflow-hidden">
+            {fileListPanel}
+          </ResizablePanel>
+          <ResizableHandle withHandle className="shrink-0" />
+          <ResizablePanel defaultSize={50} minSize={20} className="min-h-0 flex flex-col overflow-hidden">
+            {diffPanel}
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      ) : (
+        <div className="flex-1 min-h-0 flex flex-col overflow-hidden">{fileListPanel}</div>
+      )}
+    </div>
+  )
+}
diff --git a/frontend/src/components/console/task/task-chat-section.tsx b/frontend/src/components/console/task/task-chat-section.tsx
new file mode 100644
index 00000000..fa13129e
--- /dev/null
+++ b/frontend/src/components/console/task/task-chat-section.tsx
@@ -0,0 +1,230 @@
+import { MessageItem, type MessageType } from "@/components/console/task/message"
+import { Button } from "@/components/ui/button"
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupTextarea } from "@/components/ui/input-group"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
+import { cn } from "@/lib/utils"
+import { IconDeviceDesktop, IconFile, IconGitBranch, IconSend, IconTerminal2 } from "@tabler/icons-react"
+
+const MOCK_MESSAGES: MessageType[] = [
+  {
+    id: "1",
+    time: Date.now() - 300000,
+    role: "user",
+    type: "user_input",
+    data: { content: "请帮我写个 Frida 脚本，来实现自动收取企业微信消息的逻辑" },
+  },
+  {
+    id: "2",
+    time: Date.now() - 270000,
+    role: "agent",
+    type: "agent_message_chunk",
+    data: {
+      content:
+        "这个请求我不能直接帮你写。企业微信涉及敏感的企业通信数据，建议通过以下合规方式实现：\n\n1. **官方 API**：使用企业微信提供的 Webhook、回调接口接收消息\n2. **会话存档**：开通企业微信的会话内容存档能力\n3. **群机器人**：在群内添加机器人，通过 Webhook 接收消息推送\n\n如需示例，我可以帮你写 Node.js 或 Python 调用上述接口的代码。",
+    },
+  },
+  {
+    id: "3",
+    time: Date.now() - 240000,
+    role: "user",
+    type: "user_input",
+    data: { content: "那就用官方 API 的方式，写一个 Python 示例吧" },
+  },
+  {
+    id: "4",
+    time: Date.now() - 240000,
+    role: "user",
+    type: "user_input",
+    data: { content: "那就用官方 API 的方式，写一个 Python 示例吧" },
+  },
+  {
+    id: "5",
+    time: Date.now() - 270000,
+    role: "agent",
+    type: "agent_message_chunk",
+    data: {
+      content:
+        "这个请求我不能直接帮你写。企业微信涉及敏感的企业通信数据，建议通过以下合规方式实现：\n\n1. **官方 API**：使用企业微信提供的 Webhook、回调接口接收消息\n2. **会话存档**：开通企业微信的会话内容存档能力\n3. **群机器人**：在群内添加机器人，通过 Webhook 接收消息推送\n\n如需示例，我可以帮你写 Node.js 或 Python 调用上述接口的代码。",
+    },
+  },
+  {
+    id: "6",
+    time: Date.now() - 270000,
+    role: "agent",
+    type: "agent_message_chunk",
+    data: {
+      content:
+        "这个请求我不能直接帮你写。企业微信涉及敏感的企业通信数据，建议通过以下合规方式实现：\n\n1. **官方 API**：使用企业微信提供的 Webhook、回调接口接收消息\n2. **会话存档**：开通企业微信的会话内容存档能力\n3. **群机器人**：在群内添加机器人，通过 Webhook 接收消息推送\n\n如需示例，我可以帮你写 Node.js 或 Python 调用上述接口的代码。",
+    },
+  },
+  {
+    id: "7",
+    time: Date.now() - 270000,
+    role: "agent",
+    type: "agent_message_chunk",
+    data: {
+      content:
+        "这个请求我不能直接帮你写。企业微信涉及敏感的企业通信数据，建议通过以下合规方式实现：\n\n1. **官方 API**：使用企业微信提供的 Webhook、回调接口接收消息\n2. **会话存档**：开通企业微信的会话内容存档能力\n3. **群机器人**：在群内添加机器人，通过 Webhook 接收消息推送\n\n如需示例，我可以帮你写 Node.js 或 Python 调用上述接口的代码。",
+    },
+  },
+  {
+    id: "8",
+    time: Date.now() - 270000,
+    role: "agent",
+    type: "agent_message_chunk",
+    data: {
+      content:
+        "这个请求我不能直接帮你写。企业微信涉及敏感的企业通信数据，建议通过以下合规方式实现：\n\n1. **官方 API**：使用企业微信提供的 Webhook、回调接口接收消息\n2. **会话存档**：开通企业微信的会话内容存档能力\n3. **群机器人**：在群内添加机器人，通过 Webhook 接收消息推送\n\n如需示例，我可以帮你写 Node.js 或 Python 调用上述接口的代码。",
+    },
+  },
+]
+
+export type PanelType = "files" | "terminal" | "changes" | "preview"
+
+const formatTokens = (tokens?: number) => {
+  if (tokens === undefined || tokens === null) return ""
+  if (tokens >= 1000000) return `${(tokens / 1000000).toFixed(1)}M`
+  if (tokens >= 1000) return `${(tokens / 1000).toFixed(1)}K`
+  return tokens.toString()
+}
+
+export interface TaskChatSectionProps {
+  inputValue: string
+  onInputChange: (value: string) => void
+  onSend: () => void
+  onKeyDown: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void
+  hasPanel: boolean
+  activePanel: PanelType | null
+  onTogglePanel: (panel: PanelType) => void
+  panelsDisabled?: boolean
+  taskStats?: { input_tokens?: number; output_tokens?: number; total_tokens?: number }
+}
+
+function PanelButton({
+  active,
+  disabled,
+  icon: Icon,
+  label,
+  onClick,
+}: {
+  active: boolean
+  disabled: boolean
+  icon: React.ComponentType<{ className?: string }>
+  label: string
+  onClick: () => void
+}) {
+  const button = (
+    <Button
+      variant="ghost"
+      size="sm"
+      className={cn("h-6 min-w-0 px-2 gap-1 text-xs font-normal", active && "text-primary bg-accent")}
+      onClick={onClick}
+      disabled={disabled}
+    >
+      <Icon className="size-3.5" />
+      {label}
+    </Button>
+  )
+  if (disabled) {
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span className="inline-flex">{button}</span>
+        </TooltipTrigger>
+        <TooltipContent>任务已结束，无法查看</TooltipContent>
+      </Tooltip>
+    )
+  }
+  return button
+}
+
+export function TaskChatSection({
+  inputValue,
+  onInputChange,
+  onSend,
+  onKeyDown,
+  hasPanel,
+  activePanel,
+  onTogglePanel,
+  panelsDisabled = false,
+  taskStats,
+}: TaskChatSectionProps) {
+  return (
+    <div className="flex flex-col h-full min-h-0 gap-4">
+      <div className="flex-1 min-h-0 overflow-y-auto">
+        <div className={cn("flex flex-col gap-4", hasPanel ? "max-w-full" : "mx-auto max-w-[800px]")}>
+          {MOCK_MESSAGES.map((msg) => (
+            <MessageItem key={msg.id} message={msg} />
+          ))}
+        </div>
+      </div>
+      <div className="shrink-0 bg-background">
+        <div className={cn("flex flex-col gap-2", hasPanel ? "max-w-full" : "mx-auto max-w-[800px]")}>
+          <InputGroup className="rounded-lg">
+            <InputGroupTextarea
+              className="min-h-10 max-h-32 text-sm break-all resize-none"
+              placeholder="要求后续变更"
+              value={inputValue}
+              onChange={(e) => onInputChange(e.target.value)}
+              onKeyDown={onKeyDown}
+            />
+            <InputGroupAddon align="block-end" className="flex justify-end">
+              <InputGroupButton
+                variant="default"
+                size="sm"
+                onClick={onSend}
+                disabled={!inputValue.trim()}
+                className="gap-1"
+              >
+                <IconSend className="size-4" />
+                发送
+              </InputGroupButton>
+            </InputGroupAddon>
+          </InputGroup>
+          <div className="flex items-center justify-between gap-2">
+            <div className="flex items-center gap-0.5">
+              <PanelButton
+                active={activePanel === "files"}
+                disabled={panelsDisabled}
+                icon={IconFile}
+                label="文件"
+                onClick={() => onTogglePanel("files")}
+              />
+              <PanelButton
+                active={activePanel === "terminal"}
+                disabled={panelsDisabled}
+                icon={IconTerminal2}
+                label="终端"
+                onClick={() => onTogglePanel("terminal")}
+              />
+              <PanelButton
+                active={activePanel === "changes"}
+                disabled={panelsDisabled}
+                icon={IconGitBranch}
+                label="修改"
+                onClick={() => onTogglePanel("changes")}
+              />
+              <PanelButton
+                active={activePanel === "preview"}
+                disabled={panelsDisabled}
+                icon={IconDeviceDesktop}
+                label="预览"
+                onClick={() => onTogglePanel("preview")}
+              />
+            </div>
+            {(taskStats?.input_tokens != null || taskStats?.output_tokens != null || taskStats?.total_tokens != null) ? (
+              <span className="text-xs text-muted-foreground shrink-0">
+                <span className="sm:hidden">
+                  {formatTokens(taskStats?.total_tokens ?? ((taskStats?.input_tokens ?? 0) + (taskStats?.output_tokens ?? 0)))} tokens
+                </span>
+                <span className="hidden sm:inline">
+                  输入 {formatTokens(taskStats?.input_tokens) || "-"} / 输出 {formatTokens(taskStats?.output_tokens) || "-"} tokens
+                </span>
+              </span>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/components/console/task/task-file-changes-panel.tsx b/frontend/src/components/console/task/task-file-changes-panel.tsx
new file mode 100644
index 00000000..9ba45936
--- /dev/null
+++ b/frontend/src/components/console/task/task-file-changes-panel.tsx
@@ -0,0 +1,150 @@
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { IconLoader, IconReport } from "@tabler/icons-react"
+import { parseDiff, Diff, Hunk } from "react-diff-view"
+import "react-diff-view/style/index.css"
+import type { RepoFileChange, TaskWebSocketManager } from "./ws-manager"
+import { cn } from "@/lib/utils"
+import { Badge } from "@/components/ui/badge"
+import { Checkbox } from "@/components/ui/checkbox"
+
+interface TaskFileChangesPanelProps {
+  fileChanges: string[]
+  fileChangesMap: Map<string, RepoFileChange>
+  taskManager: TaskWebSocketManager | null
+  onSubmit: (selectedFiles: string[]) => void
+  disabled?: boolean
+}
+
+export function TaskFileChangesPanel({
+  fileChanges,
+  fileChangesMap,
+  taskManager,
+  onSubmit,
+  disabled,
+}: TaskFileChangesPanelProps) {
+  const [selectedFile, setSelectedFile] = useState<string | null>(null)
+  const [diffContent, setDiffContent] = useState<string>("")
+  const [loading, setLoading] = useState(false)
+  const [checkedFiles, setCheckedFiles] = useState<Set<string>>(new Set())
+
+  const handleCheckboxChange = (path: string, checked: boolean) => {
+    setCheckedFiles((prev) => {
+      const newSet = new Set(prev)
+      if (checked) newSet.add(path)
+      else newSet.delete(path)
+      return newSet
+    })
+  }
+
+  const handleSubmitSelected = () => {
+    onSubmit(Array.from(checkedFiles))
+  }
+
+  const handleSubmitAll = () => {
+    onSubmit(fileChanges)
+  }
+
+  const handleFileClick = async (path: string) => {
+    if (selectedFile === path) {
+      setSelectedFile(null)
+      setDiffContent("")
+      return
+    }
+    setSelectedFile(path)
+    setLoading(true)
+    setDiffContent("")
+    const diff = await taskManager?.getFileDiff(path)
+    setDiffContent(diff || "")
+    setLoading(false)
+  }
+
+  const files = diffContent ? parseDiff(diffContent) : []
+
+  const renderStatusBadge = (change?: RepoFileChange) => {
+    if (!change) return null
+    switch (change.status) {
+      case "A":
+        return <Badge variant="outline">新增</Badge>
+      case "D":
+        return <Badge variant="outline">删除</Badge>
+      case "M":
+        return <Badge variant="outline">修改</Badge>
+      case "R":
+        return <Badge variant="outline">移动</Badge>
+      case "RM":
+        return <Badge variant="outline">删除</Badge>
+      default:
+        return <Badge variant="outline">新增</Badge>
+    }
+  }
+
+  return (
+    <div className="flex flex-col h-full min-h-0 rounded-xl border border-slate-200 dark:border-slate-800 overflow-hidden bg-white dark:bg-slate-950">
+      <div className="flex items-center justify-between px-3 py-2 border-b border-slate-200 dark:border-slate-800 bg-slate-100/80 dark:bg-slate-800/50 shrink-0">
+        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">以下修改尚未提交</span>
+        <div className="flex items-center gap-1">
+          <Button variant="ghost" size="sm" className="h-6 text-xs" onClick={handleSubmitSelected} disabled={disabled || checkedFiles.size === 0}>
+            提交选中 ({checkedFiles.size})
+          </Button>
+          <Button size="sm" className="h-6 text-xs" onClick={handleSubmitAll} disabled={disabled}>
+            全部提交
+          </Button>
+        </div>
+      </div>
+      <div className="flex-1 min-h-0 overflow-y-auto p-2 space-y-2">
+        {fileChanges.map((path) => {
+          const change = fileChangesMap.get(path)
+          const isSelected = selectedFile === path
+          return (
+            <div key={path}>
+              <div
+                className={cn(
+                  "flex items-center gap-2 px-2 py-1.5 rounded-md text-xs border cursor-pointer transition-colors",
+                  isSelected ? "text-primary border-primary bg-primary/5" : "hover:border-slate-300 dark:hover:border-slate-600"
+                )}
+              >
+                <Checkbox
+                  checked={checkedFiles.has(path)}
+                  onCheckedChange={(checked) => handleCheckboxChange(path, checked as boolean)}
+                  onClick={(e) => e.stopPropagation()}
+                />
+                <div className="truncate flex-1 min-w-0" onClick={() => handleFileClick(path)}>
+                  {path}
+                </div>
+                {renderStatusBadge(change)}
+              </div>
+              <style>{`
+                .user-diff-style .diff-line td:nth-child(2) {
+                  border-left: 1px var(--border) solid;
+                }
+              `}</style>
+              {isSelected && (
+                <div className="mt-1" style={{ "--diff-font-family": "var(--font-google-sans-code)" } as React.CSSProperties}>
+                  {loading ? (
+                    <div className="flex items-center justify-center py-8 text-slate-500">
+                      <IconLoader className="size-5 animate-spin" />
+                    </div>
+                  ) : files.length > 0 && files.some((file) => file.hunks?.length) ? (
+                    <div className="text-xs border rounded-md py-1 overflow-x-auto">
+                      {files.map((file, index) => (
+                        <Diff key={index} viewType="split" diffType={file.type} hunks={file.hunks} gutterType="none" hunkClassName="user-diff-style">
+                          {(hunks) => hunks.map((hunk) => <Hunk key={hunk.content} hunk={hunk} />)}
+                        </Diff>
+                      ))}
+                    </div>
+                  ) : (
+                    <div className="flex items-center justify-center py-8 text-slate-500">
+                      <IconReport className="size-5 mr-1" />
+                      <span className="text-xs">无内容</span>
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/components/console/task/task-file-explorer.tsx b/frontend/src/components/console/task/task-file-explorer.tsx
new file mode 100644
index 00000000..e4c79285
--- /dev/null
+++ b/frontend/src/components/console/task/task-file-explorer.tsx
@@ -0,0 +1,601 @@
+import { useState, useEffect, useCallback, useMemo, useRef, forwardRef, useImperativeHandle } from "react"
+import { getFileExtension } from "@/utils/common"
+import { cn } from "@/lib/utils"
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
+import { IconCloudOff, IconFileCode, IconFileSymlink, IconFileText, IconFolder, IconFolderOpen, IconFolderRoot, IconLoader, IconPhoto, IconReload, IconX } from "@tabler/icons-react"
+import { Button } from "@/components/ui/button"
+import { RepoFileEntryMode, TaskWebSocketManager, type RepoFileChange, type RepoFileStatus, type TaskStreamStatus } from "./ws-manager"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
+import { FileActionsDropdown } from "./file-actions-dropdown"
+import AceEditor from "react-ace"
+import "ace-builds/src-noconflict/mode-text"
+import "ace-builds/src-noconflict/mode-javascript"
+import "ace-builds/src-noconflict/mode-typescript"
+import "ace-builds/src-noconflict/mode-python"
+import "ace-builds/src-noconflict/mode-json"
+import "ace-builds/src-noconflict/mode-yaml"
+import "ace-builds/src-noconflict/mode-markdown"
+import "ace-builds/src-noconflict/mode-html"
+import "ace-builds/src-noconflict/mode-css"
+import "ace-builds/src-noconflict/mode-sql"
+import "ace-builds/src-noconflict/mode-sh"
+import "ace-builds/src-noconflict/mode-dockerfile"
+import "ace-builds/src-noconflict/mode-c_cpp"
+import "ace-builds/src-noconflict/mode-csharp"
+import "ace-builds/src-noconflict/mode-golang"
+import "ace-builds/src-noconflict/mode-ruby"
+import "ace-builds/src-noconflict/mode-rust"
+import "ace-builds/src-noconflict/mode-perl"
+import "ace-builds/src-noconflict/mode-swift"
+import "ace-builds/src-noconflict/mode-lua"
+import "ace-builds/src-noconflict/mode-php"
+import "ace-builds/src-noconflict/mode-java"
+import "@/utils/ace-theme"
+import React from "react"
+import { toast } from "sonner"
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia } from "@/components/ui/empty"
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable"
+
+interface TaskFileExplorerProps {
+  className?: string
+  disabled?: boolean
+  streamStatus?: TaskStreamStatus
+  fileChangesMap: Map<string, RepoFileChange>
+  changedPaths?: string[]
+  taskManager: TaskWebSocketManager | null
+  onRefresh?: () => void
+  envid?: string
+}
+
+// --- 文件树逻辑 ---
+const sortFiles = (files: RepoFileStatus[]) => {
+  return files.sort((a, b) => {
+    const getTypePriority = (file: RepoFileStatus) => {
+      return (file.entry_mode === RepoFileEntryMode.RepoEntryModeTree || file.entry_mode === RepoFileEntryMode.RepoEntryModeSubmodule) ? 0 : 2
+    }
+    const priorityA = getTypePriority(a)
+    const priorityB = getTypePriority(b)
+    if (priorityA !== priorityB) return priorityA - priorityB
+    return (a.name.toLowerCase() || '').localeCompare(b.name.toLowerCase() || '')
+  })
+}
+
+const isDirectory = (file: RepoFileStatus) => {
+  return file.entry_mode === RepoFileEntryMode.RepoEntryModeTree || file.entry_mode === RepoFileEntryMode.RepoEntryModeSubmodule
+}
+
+const getFileIcon = (file: RepoFileStatus, isOpen?: boolean) => {
+  switch (file.entry_mode) {
+    case RepoFileEntryMode.RepoEntryModeTree:
+      return isOpen ? <IconFolderOpen className="h-3.5 w-3.5 text-primary shrink-0" /> : <IconFolder className="h-3.5 w-3.5 text-primary shrink-0" />
+    case RepoFileEntryMode.RepoEntryModeSymlink:
+      return <IconFileSymlink className="size-3.5 text-muted-foreground shrink-0" />
+    case RepoFileEntryMode.RepoEntryModeExecutable:
+      return <IconFileCode className="size-3.5 text-muted-foreground shrink-0" />
+    case RepoFileEntryMode.RepoEntryModeSubmodule:
+      return isOpen ? <IconFolderOpen className="h-3.5 w-3.5 text-primary shrink-0" /> : <IconFolderRoot className="h-3.5 w-3.5 text-primary shrink-0" />
+    case RepoFileEntryMode.RepoEntryModeFile:
+    case RepoFileEntryMode.RepoEntryModeUnspecified:
+    default:
+      if (['jpg', 'png', 'gif', 'jpeg', 'webp', 'svg', 'ico'].includes(getFileExtension(file.name))) {
+        return <IconPhoto className="size-3.5 text-muted-foreground shrink-0" />
+      }
+      return <IconFileText className="size-3.5 text-muted-foreground shrink-0" />
+  }
+}
+
+const getLanguageMode = (fileName: string): string => {
+  const ext = fileName.split('.').pop()?.toLowerCase()
+  const modeMap: Record<string, string> = {
+    'bash': 'sh', 'c': 'c_cpp', 'cpp': 'c_cpp', 'cs': 'csharp', 'fish': 'sh', 'go': 'golang',
+    'h': 'c_cpp', 'htm': 'html', 'html': 'html', 'hpp': 'c_cpp', 'java': 'java', 'js': 'javascript',
+    'jsx': 'javascript', 'lua': 'lua', 'markdown': 'markdown', 'md': 'markdown', 'php': 'php',
+    'pl': 'perl', 'py': 'python', 'rb': 'ruby', 'rs': 'rust', 'sh': 'sh', 'swift': 'swift',
+    'sql': 'sql', 'ts': 'typescript', 'tsx': 'typescript', 'yml': 'yaml', 'yaml': 'yaml', 'zsh': 'sh',
+  }
+  return modeMap[ext || ''] || 'text'
+}
+
+const MAX_FILE_SIZE = 100 * 1024 // 100KB
+
+const BINARY_EXTENSIONS = [
+  '.png', '.jpg', '.jpeg', '.gif', '.webp', '.svg', '.bmp', '.ico',
+  '.mp4', '.webm', '.ogv', '.mov', '.avi', '.mkv', '.mp3', '.wav', '.ogg', '.aac', '.flac', '.m4a', '.wma',
+  '.pdf', '.zip', '.tar', '.gz', '.rar', '.7z', '.exe', '.dll', '.so', '.dylib',
+  '.woff', '.woff2', '.ttf', '.otf', '.eot',
+]
+
+function isBinaryExtension(path: string): boolean {
+  const ext = path.substring(path.lastIndexOf('.')).toLowerCase()
+  return BINARY_EXTENSIONS.includes(ext)
+}
+
+function tryDecodeAsText(bytes: Uint8Array): { text: string; isText: boolean } {
+  try {
+    const text = new TextDecoder('utf-8', { fatal: true }).decode(bytes)
+    return { text, isText: true }
+  } catch {
+    return { text: '', isText: false }
+  }
+}
+
+interface FileItem {
+  name: string
+  path: string
+  bytes: Uint8Array | null
+  content: string | null
+  isBinary: boolean
+  isTooLarge: boolean
+}
+
+// --- DirNode ref ---
+interface DirNodeRef {
+  refresh: () => Promise<void>
+  refreshPaths: (paths: string[]) => Promise<void>
+}
+
+// --- FileNode (新样式) ---
+const FileNode = ({ file, depth, onFileSelect, fileChangesMap, envid, onRefresh, selectedPath }: {
+  file: RepoFileStatus
+  depth: number
+  onFileSelect?: (path: string, file: RepoFileStatus) => void
+  fileChangesMap: Map<string, RepoFileChange>
+  envid?: string
+  onRefresh?: () => void
+  selectedPath?: string | null
+}) => {
+  const paddingLeft = depth * 14
+  const fileChange = fileChangesMap.get(file.path)
+  const hasChanges = !!fileChange?.status
+  const isSelected = selectedPath === file.path
+
+  return (
+    <div
+      className="flex items-center gap-1 mx-1.5 my-0.5 pl-1 pr-1.5 py-0.5 hover:bg-muted/60 rounded-md cursor-pointer select-none group transition-colors"
+      style={{ paddingLeft: `${paddingLeft + 6}px` }}
+    >
+      <div className="flex items-center gap-1.5 py-0.5 flex-1 truncate min-w-0" onClick={() => onFileSelect?.(file.path, file)}>
+        {getFileIcon(file)}
+        <span className={cn("text-sm truncate flex-1", isSelected && "text-primary")}>{file.name}</span>
+      </div>
+      <div className="relative size-5 shrink-0 flex items-center justify-center">
+        {hasChanges && (
+          <span className="text-[10px] font-medium text-amber-600 dark:text-amber-500 group-hover:opacity-0 transition-opacity">●</span>
+        )}
+        <div className="absolute inset-0 flex items-center justify-center">
+          <FileActionsDropdown file={file} envid={envid} onRefresh={onRefresh} onSuccess={onRefresh} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// --- DirNode (新样式) ---
+const DirNode = forwardRef<DirNodeRef, {
+  file?: RepoFileStatus
+  depth: number
+  onFileSelect?: (path: string, file: RepoFileStatus) => void
+  defaultExpanded?: boolean
+  taskManager: TaskWebSocketManager | null
+  streamStatus?: TaskStreamStatus
+  fileChangesMap: Map<string, RepoFileChange>
+  envid?: string
+  onRefresh?: () => void
+  selectedPath?: string | null
+}>(({ file, depth, onFileSelect, defaultExpanded = false, streamStatus, taskManager, fileChangesMap, envid, onRefresh, selectedPath }, ref) => {
+  const [children, setChildren] = useState<RepoFileStatus[]>([])
+  const [loading, setLoading] = useState(false)
+  const [expanded, setExpanded] = useState(defaultExpanded)
+  const [loaded, setLoaded] = useState(false)
+  const childRefs = useRef<Map<string, DirNodeRef>>(new Map())
+  const fullPath = file?.path || ''
+  const paddingLeft = depth * 14
+
+  const fetchChildren = useCallback(async (showLoading = true) => {
+    if (showLoading) setLoading(true)
+    try {
+      if (taskManager) {
+        const result = await taskManager.getFileList(fullPath)
+        const filtered = (result || []).filter(f => f.name !== '.git')
+        setChildren(sortFiles(filtered))
+        setLoaded(true)
+      }
+    } finally {
+      if (showLoading) setLoading(false)
+    }
+  }, [fullPath, taskManager])
+
+  const refresh = useCallback(async () => {
+    await fetchChildren(true)
+    const refreshPromises: Promise<void>[] = []
+    childRefs.current.forEach((childRef) => refreshPromises.push(childRef.refresh()))
+    await Promise.all(refreshPromises)
+  }, [fetchChildren])
+
+  const refreshPaths = useCallback(async (paths: string[]) => {
+    const needsRefresh = paths.some(p => {
+      const lastSlashIndex = p.lastIndexOf('/')
+      const parentPath = lastSlashIndex > 0 ? p.substring(0, lastSlashIndex) : ''
+      return parentPath === fullPath || (fullPath === '' && parentPath === '')
+    })
+    if (needsRefresh) await fetchChildren(false)
+    const childPaths = paths.filter(p => fullPath === '' || fullPath === '/' || p.startsWith(fullPath + '/'))
+    if (childPaths.length > 0) {
+      const refreshPromises: Promise<void>[] = []
+      childRefs.current.forEach((childRef) => refreshPromises.push(childRef.refreshPaths(childPaths)))
+      await Promise.all(refreshPromises)
+    }
+  }, [fullPath, fetchChildren])
+
+  useImperativeHandle(ref, () => ({ refresh, refreshPaths }), [refresh, refreshPaths])
+
+  const handleToggle = useCallback((open: boolean) => {
+    setExpanded(open)
+    if (open && !loaded) fetchChildren(true)
+  }, [loaded, fetchChildren])
+
+  useEffect(() => {
+    if (defaultExpanded && !loaded && (streamStatus === 'waiting' || streamStatus === 'executing')) {
+      fetchChildren(true)
+    }
+  }, [defaultExpanded, loaded, fetchChildren, streamStatus])
+
+  const hasChangesInChildren = useMemo(() => {
+    if (fileChangesMap.has(fullPath)) return true
+    if (children.some((child) => fileChangesMap.has(fullPath + '/' + child.name))) return true
+    const prefix = fullPath === '' ? '' : fullPath + '/'
+    for (const changedPath of fileChangesMap.keys()) {
+      if (prefix === '' || changedPath.startsWith(prefix)) return true
+    }
+    return false
+  }, [children, fileChangesMap, fullPath])
+
+  if (!file) {
+    if (loading && children.length === 0) {
+      return (
+        <Empty className="w-full flex-1 min-h-0 py-12">
+          <EmptyHeader>
+            <EmptyMedia variant="icon">
+              <IconLoader className="size-6 animate-spin" />
+            </EmptyMedia>
+            <EmptyDescription>正在加载...</EmptyDescription>
+          </EmptyHeader>
+        </Empty>
+      )
+    }
+    if (children.length === 0) {
+      return (
+        <Empty className="w-full flex-1 min-h-0 py-12">
+          <EmptyHeader>
+            <EmptyMedia variant="icon">
+              <IconFolder className="size-6 opacity-50" />
+            </EmptyMedia>
+            <EmptyDescription>当前目录没有文件</EmptyDescription>
+          </EmptyHeader>
+        </Empty>
+      )
+    }
+    return (
+      <div className="py-0.5">
+        {children.map((child) =>
+          isDirectory(child) ? (
+            <DirNode
+              key={child.name}
+              ref={(r) => { if (r) childRefs.current.set(child.name!, r); else childRefs.current.delete(child.name!) }}
+              file={child}
+              depth={depth}
+              onFileSelect={onFileSelect}
+              taskManager={taskManager}
+              fileChangesMap={fileChangesMap}
+              envid={envid}
+              onRefresh={onRefresh}
+              selectedPath={selectedPath}
+            />
+          ) : (
+            <FileNode key={child.name} file={child} depth={depth} onFileSelect={onFileSelect} fileChangesMap={fileChangesMap} envid={envid} onRefresh={onRefresh} selectedPath={selectedPath} />
+          )
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <Collapsible open={expanded} onOpenChange={handleToggle}>
+      <div
+        className="flex items-center gap-1 mx-1.5 my-0.5 pl-1 pr-1.5 py-0.5 hover:bg-muted/60 rounded-md cursor-pointer select-none group transition-colors"
+        style={{ paddingLeft: `${paddingLeft + 6}px` }}
+      >
+        <CollapsibleTrigger asChild>
+          <div className="flex items-center gap-1.5 flex-1 min-w-0 py-0.5">
+            {loading ? <IconLoader className="h-3.5 w-3.5 animate-spin text-primary shrink-0" /> : getFileIcon(file, expanded)}
+            <span className="text-sm truncate flex-1">{file.name}</span>
+          </div>
+        </CollapsibleTrigger>
+        <div className="relative size-5 shrink-0 flex items-center justify-center">
+          {hasChangesInChildren && <span className="text-[10px] font-medium text-amber-600 dark:text-amber-500 group-hover:opacity-0 transition-opacity">●</span>}
+          <div className="absolute inset-0 flex items-center justify-center">
+            <FileActionsDropdown file={file} envid={envid} onRefresh={async () => { await refresh(); onRefresh?.() }} onSuccess={async () => { await refresh(); onRefresh?.() }} />
+          </div>
+        </div>
+      </div>
+      <CollapsibleContent>
+        {children.map((child) =>
+          isDirectory(child) ? (
+            <DirNode
+              key={child.name}
+              ref={(r) => { if (r) childRefs.current.set(child.name!, r); else childRefs.current.delete(child.name!) }}
+              file={child}
+              depth={depth + 1}
+              onFileSelect={onFileSelect}
+              taskManager={taskManager}
+              fileChangesMap={fileChangesMap}
+              envid={envid}
+              onRefresh={onRefresh}
+              selectedPath={selectedPath}
+            />
+          ) : (
+            <FileNode key={child.name} file={child} depth={depth + 1} onFileSelect={onFileSelect} fileChangesMap={fileChangesMap} envid={envid} onRefresh={onRefresh} selectedPath={selectedPath} />
+          )
+        )}
+      </CollapsibleContent>
+    </Collapsible>
+  )
+})
+
+DirNode.displayName = 'DirNode'
+
+export const TaskFileExplorer = ({
+  className,
+  disabled,
+  streamStatus,
+  fileChangesMap,
+  changedPaths,
+  taskManager,
+  onRefresh,
+  envid,
+}: TaskFileExplorerProps): React.JSX.Element => {
+  const rootRef = useRef<DirNodeRef>(null)
+  const [refreshKey, setRefreshKey] = useState(0)
+  const [currentFile, setCurrentFile] = useState<FileItem | null>(null)
+  const [fileLoading, setFileLoading] = useState(false)
+
+  const handleRefresh = useCallback(() => {
+    setRefreshKey((prev) => prev + 1)
+    onRefresh?.()
+  }, [onRefresh])
+
+  const refreshPathsTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  useEffect(() => {
+    if (!changedPaths || changedPaths.length === 0) return
+    refreshPathsTimeoutRef.current && clearTimeout(refreshPathsTimeoutRef.current)
+    refreshPathsTimeoutRef.current = setTimeout(() => {
+      rootRef.current?.refreshPaths(changedPaths)
+      refreshPathsTimeoutRef.current = null
+    }, 300)
+    return () => {
+      refreshPathsTimeoutRef.current && clearTimeout(refreshPathsTimeoutRef.current)
+    }
+  }, [changedPaths])
+
+  const fetchFileContent = useCallback(async (path: string) => {
+    let bytes: Uint8Array | null = null
+    setFileLoading(true)
+    if (taskManager) {
+      bytes = await taskManager.getFileContent(path)
+      if (!bytes) toast.error(`文件读取失败`)
+    }
+    setFileLoading(false)
+    return bytes
+  }, [taskManager])
+
+  const openFile = useCallback(async (path: string) => {
+    if (!envid || !path) return null
+    if (currentFile?.path === path) return currentFile
+    const bytes = await fetchFileContent(path)
+    if (!bytes) return null
+    const isBinaryByExt = isBinaryExtension(path)
+    const isTooLarge = bytes.length > MAX_FILE_SIZE
+    const { text, isText } = isBinaryByExt ? { text: '', isText: false } : tryDecodeAsText(bytes)
+    const isBinary = isBinaryByExt || !isText
+    const file: FileItem = {
+      name: path.split('/').pop() || path,
+      path,
+      bytes,
+      content: isText ? text : null,
+      isBinary,
+      isTooLarge,
+    }
+    setCurrentFile(file)
+    return file
+  }, [envid, currentFile, fetchFileContent])
+
+  const handleFileSelect = useCallback((path: string, file: RepoFileStatus) => {
+    if (file.entry_mode === RepoFileEntryMode.RepoEntryModeTree || file.entry_mode === RepoFileEntryMode.RepoEntryModeSubmodule) return
+    openFile(path)
+  }, [openFile])
+
+  const reloadFile = useCallback(async () => {
+    if (!currentFile) return
+    const bytes = await fetchFileContent(currentFile.path)
+    if (!bytes) return
+    const isBinaryByExt = isBinaryExtension(currentFile.path)
+    const isTooLarge = bytes.length > MAX_FILE_SIZE
+    const { text, isText } = isBinaryByExt ? { text: '', isText: false } : tryDecodeAsText(bytes)
+    setCurrentFile({
+      ...currentFile,
+      bytes,
+      content: isText ? text : null,
+      isBinary: isBinaryByExt || !isText,
+      isTooLarge,
+    })
+    toast.success(`文件 ${currentFile.path} 已重新加载`)
+  }, [currentFile, fetchFileContent])
+
+  const closeFile = useCallback(() => {
+    setCurrentFile(null)
+  }, [])
+
+  const renderFileContent = () => {
+    if (!currentFile) {
+      return (
+        <Empty className="border border-dashed w-full h-full min-h-0">
+          <EmptyHeader>
+            <EmptyMedia variant="icon">
+              <IconFileText className="size-6 opacity-40" />
+            </EmptyMedia>
+            <EmptyDescription>点击左侧文件查看内容</EmptyDescription>
+          </EmptyHeader>
+        </Empty>
+      )
+    }
+    if (fileLoading) {
+      return (
+        <Empty className="border border-dashed w-full h-full min-h-0">
+          <EmptyHeader>
+            <EmptyMedia variant="icon">
+              <IconLoader className="size-6 animate-spin" />
+            </EmptyMedia>
+            <EmptyDescription>加载中...</EmptyDescription>
+          </EmptyHeader>
+        </Empty>
+      )
+    }
+    if (currentFile.isTooLarge) {
+      return (
+        <Empty className="border border-dashed w-full h-full min-h-0">
+          <EmptyHeader>
+            <EmptyMedia variant="icon">
+              <IconFileText className="size-6 opacity-50" />
+            </EmptyMedia>
+            <EmptyDescription>文件太大不支持预览</EmptyDescription>
+          </EmptyHeader>
+        </Empty>
+      )
+    }
+    if (currentFile.isBinary) {
+      return (
+        <Empty className="border border-dashed w-full h-full min-h-0">
+          <EmptyHeader>
+            <EmptyMedia variant="icon">
+              <IconFileText className="size-6 opacity-50" />
+            </EmptyMedia>
+            <EmptyDescription>二进制文件不支持预览</EmptyDescription>
+          </EmptyHeader>
+        </Empty>
+      )
+    }
+    return (
+      <AceEditor
+        mode={getLanguageMode(currentFile.path)}
+        readOnly
+        theme="monkeycode"
+        width="100%"
+        height="100%"
+        value={currentFile.content || ''}
+        showPrintMargin={false}
+        showGutter={true}
+        setOptions={{ fontFamily: "var(--font-google-sans-code)", fontSize: 12 }}
+      />
+    )
+  }
+
+  if (disabled) {
+    return (
+      <div className={cn("flex flex-col h-full min-h-0", className)}>
+        <div className="flex items-center gap-2 px-4 py-1 min-h-11 border-b bg-muted/50 shrink-0">
+          <span className="text-sm font-medium">项目文件</span>
+        </div>
+        <div className="flex-1 min-h-0 flex flex-col">
+          <Empty className="border border-dashed w-full flex-1 min-h-0">
+            <EmptyHeader>
+              <EmptyMedia variant="icon">
+                <IconCloudOff className="size-6" />
+              </EmptyMedia>
+              <EmptyDescription>
+                开发环境未就绪，请先进入开发页面启动任务
+              </EmptyDescription>
+            </EmptyHeader>
+          </Empty>
+        </div>
+      </div>
+    )
+  }
+
+  const fileTreePanel = (
+    <div className="flex flex-col min-h-0 flex-1 rounded-lg border overflow-hidden">
+      <div className="flex items-center justify-between px-4 py-1 min-h-11 border-b bg-muted/30 shrink-0">
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-medium">项目文件</span>
+        </div>
+        <div className="flex items-center gap-0.5">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="ghost" size="icon" className="size-8 shrink-0 hover:text-primary" onClick={handleRefresh} disabled={disabled}>
+                <IconReload className="size-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>刷新</TooltipContent>
+          </Tooltip>
+          <FileActionsDropdown
+            file={{ entry_mode: RepoFileEntryMode.RepoEntryModeTree, mode: 0, modified_at: 0, name: 'workspace', path: '', size: 0 }}
+            envid={envid}
+            onRefresh={handleRefresh}
+            onSuccess={handleRefresh}
+            alwaysVisible
+            hideDestructive
+          />
+        </div>
+      </div>
+      <div className="flex-1 min-h-0 overflow-y-auto py-1 flex flex-col">
+        <DirNode
+          key={refreshKey}
+          ref={rootRef}
+          streamStatus={streamStatus}
+          depth={0}
+          onFileSelect={handleFileSelect}
+          defaultExpanded
+          taskManager={taskManager}
+          fileChangesMap={fileChangesMap}
+          envid={envid}
+          onRefresh={handleRefresh}
+          selectedPath={currentFile?.path}
+        />
+      </div>
+    </div>
+  )
+
+  const previewPanel = currentFile && (
+    <div className="flex flex-col min-h-0 flex-1 rounded-lg border overflow-hidden bg-background">
+      <div className="flex items-center justify-between px-4 py-1 min-h-11 border-b bg-muted/30 shrink-0">
+        <span className="text-sm font-medium truncate flex-1 min-w-0">{currentFile.name}</span>
+        <div className="flex items-center gap-0.5">
+          <Button variant="ghost" size="icon" className="size-8 shrink-0 hover:text-primary" onClick={reloadFile} disabled={fileLoading}>
+            <IconReload className={cn("size-4", fileLoading && "animate-spin")} />
+          </Button>
+          <Button variant="ghost" size="icon" className="size-8 shrink-0 hover:text-primary" onClick={closeFile}>
+            <IconX className="size-4" />
+          </Button>
+        </div>
+      </div>
+      <div className="flex-1 min-h-0 overflow-hidden">{renderFileContent()}</div>
+    </div>
+  )
+
+  return (
+    <div className={cn("flex flex-col h-full min-h-0", className)}>
+      {currentFile ? (
+        <ResizablePanelGroup direction="vertical" className="flex-1 min-h-0 gap-2">
+          <ResizablePanel defaultSize={50} minSize={20} className="min-h-0 flex flex-col overflow-hidden">
+            {fileTreePanel}
+          </ResizablePanel>
+          <ResizableHandle withHandle className="shrink-0" />
+          <ResizablePanel defaultSize={50} minSize={20} className="min-h-0 flex flex-col overflow-hidden">
+            {previewPanel}
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      ) : (
+        <div className="flex-1 min-h-0 flex flex-col overflow-hidden">{fileTreePanel}</div>
+      )}
+    </div>
+  )
+}
diff --git a/frontend/src/components/console/task/task-input.tsx b/frontend/src/components/console/task/task-input.tsx
index c8fed039..7712288b 100644
--- a/frontend/src/components/console/task/task-input.tsx
+++ b/frontend/src/components/console/task/task-input.tsx
@@ -21,6 +21,7 @@ import { apiRequest } from "@/utils/requestUtils";
 import { IconBug, IconLink, IconPuzzle, IconSend, IconSourceCode, IconSquareRoundedLetterOFilled, IconTerminal2, IconUpload, IconUser, IconVocabulary, IconXboxX } from "@tabler/icons-react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
+import { useSettingsDialog } from "@/pages/console/user/page";
 import { flushSync } from "react-dom";
 import { toast } from "sonner";
 import { VoiceInputButton } from "./voice-input-button";
@@ -84,6 +85,7 @@ interface TaskInputProps {
 }
 
 export function TaskInput({ repos, onTaskCreated }: TaskInputProps) {
+  const navigate = useNavigate()
   // 输入相关状态
   const [taskContent, setTaskContent] = useState<string>("");
   const [taskType, setTaskType] = useState<ConstsTaskType>(ConstsTaskType.TaskTypeDevelop);
@@ -119,7 +121,7 @@ export function TaskInput({ repos, onTaskCreated }: TaskInputProps) {
   const fileInputRef = useRef<HTMLInputElement | null>(null);
 
   const { models, images, hosts, identities, user } = useCommonData();
-  const navigate = useNavigate();
+  const { setOpen: setSettingsOpen } = useSettingsDialog();
 
   const modelsWithEconomy = useMemo(() => {
     const economyModel = { 
@@ -299,7 +301,7 @@ export function TaskInput({ repos, onTaskCreated }: TaskInputProps) {
       if (resp.code === 0) {
         toast.success('任务启动成功');
         onTaskCreated();
-        window.open(`/console/task/view?taskId=${resp.data?.id}`, "_blank");
+        navigate(`/console/task/${resp.data?.id}`);
       } else {
         toast.error(resp.message || "任务启动失败");
       }
@@ -539,7 +541,7 @@ export function TaskInput({ repos, onTaskCreated }: TaskInputProps) {
                             size="sm"
                             onClick={() => {
                               setCodeDropdownOpen(false);
-                              navigate("/console/settings");
+                              setSettingsOpen(true);
                             }}
                           >
                             去设置
diff --git a/frontend/src/components/console/task/task-preview-panel.tsx b/frontend/src/components/console/task/task-preview-panel.tsx
new file mode 100644
index 00000000..7170e671
--- /dev/null
+++ b/frontend/src/components/console/task/task-preview-panel.tsx
@@ -0,0 +1,338 @@
+import { ConstsPortStatus, type DomainVMPort, type WebResp } from "@/api/Api"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia } from "@/components/ui/empty"
+import { Item, ItemContent, ItemTitle, ItemGroup, ItemActions, ItemDescription } from "@/components/ui/item"
+import { Spinner } from "@/components/ui/spinner"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
+import { apiRequest } from "@/utils/requestUtils"
+import { IconAccessPoint, IconAlertCircle, IconCloudOff, IconCopy, IconDotsVertical, IconHandStop, IconTrash } from "@tabler/icons-react"
+import { useState } from "react"
+import { toast } from "sonner"
+
+interface TaskPreviewPanelProps {
+  ports: DomainVMPort[] | undefined
+  hostId: string | undefined
+  vmId: string | undefined
+  onSuccess?: () => void
+  disabled?: boolean
+}
+
+export function TaskPreviewPanel({
+  ports,
+  hostId,
+  vmId,
+  onSuccess,
+  disabled,
+}: TaskPreviewPanelProps) {
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
+  const [portToDelete, setPortToDelete] = useState<DomainVMPort | null>(null)
+  const [portToOpen, setPortToOpen] = useState<number>(0)
+  const [portToClose, setPortToClose] = useState<number>(0)
+  const [whitelistDialogOpen, setWhitelistDialogOpen] = useState(false)
+  const [portToEditWhitelist, setPortToEditWhitelist] = useState<DomainVMPort | null>(null)
+  const [whitelistInput, setWhitelistInput] = useState("")
+  const [whitelistSaving, setWhitelistSaving] = useState(false)
+
+  const confirmDeletePort = () => {
+    if (!hostId || !vmId || !portToDelete) {
+      setDeleteDialogOpen(false)
+      return
+    }
+
+    setPortToClose(portToDelete.port as number)
+    setDeleteDialogOpen(false)
+
+    apiRequest('v1UsersHostsVmsPortsDelete', {
+      forward_id: portToDelete.forward_id
+    }, [hostId, vmId, String(portToDelete.port)], (resp) => {
+      if (resp.code === 0) {
+        toast.success("端口已关闭访问")
+        onSuccess?.()
+      } else {
+        toast.error(resp.message || "关闭访问失败")
+      }
+      setPortToClose(0)
+    })
+  }
+
+  const getMyIP = async (): Promise<string | null> => {
+    try {
+      const resp = await fetch('https://monkeycode-ai.online/get-my-ip', {
+        method: 'GET',
+        mode: 'cors',
+      })
+      if (!resp.ok) throw new Error()
+      const data = await resp.json()
+      return data.ip
+    } catch {
+      return null
+    }
+  }
+
+  const handleOpenPort = async (port: number, forwardId: string) => {
+    if (!hostId || !vmId || !port) return
+
+    setPortToOpen(port)
+    const ip = await getMyIP()
+    if (!ip) {
+      toast.error("获取本机 IP 失败")
+      setPortToOpen(0)
+      return
+    }
+
+    await apiRequest('v1UsersHostsVmsPortsCreate', {
+      forward_id: forwardId,
+      port: port,
+      white_list: [ip]
+    }, [hostId, vmId], (resp: WebResp) => {
+      if (resp.code === 0 && resp.data?.success) {
+        toast.success("端口开放成功")
+        onSuccess?.()
+      } else {
+        toast.error(resp.message || "端口开放失败")
+      }
+    })
+    setPortToOpen(0)
+  }
+
+  const handleOpenWhitelistDialog = (port: DomainVMPort) => {
+    setPortToEditWhitelist(port)
+    setWhitelistInput(port.white_list?.join('\n') || '')
+    setWhitelistDialogOpen(true)
+  }
+
+  const handleSaveWhitelist = async () => {
+    if (!hostId || !vmId || !portToEditWhitelist) return
+
+    const whitelistArray = whitelistInput
+      .split('\n')
+      .map(ip => ip.trim())
+      .filter(ip => ip.length > 0)
+
+    if (whitelistArray.length === 0) {
+      toast.error("请至少输入一个 IP 地址")
+      return
+    }
+
+    setWhitelistSaving(true)
+    await apiRequest('v1UsersHostsVmsPortsCreate', {
+      forward_id: portToEditWhitelist.forward_id,
+      port: portToEditWhitelist.port,
+      white_list: whitelistArray
+    }, [hostId, vmId], (resp: WebResp) => {
+      if (resp.code === 0) {
+        toast.success("白名单更新成功")
+        setWhitelistDialogOpen(false)
+        onSuccess?.()
+      } else {
+        toast.error(resp.message || "白名单更新失败")
+      }
+    })
+    setWhitelistSaving(false)
+  }
+
+  if (disabled) {
+    return (
+      <div className="flex flex-col h-full min-h-0 rounded-lg border overflow-hidden">
+        <div className="flex items-center gap-2 px-3 py-2 min-h-12 border-b bg-muted/50 shrink-0">
+          <span className="text-sm font-medium">在线预览</span>
+        </div>
+        <div className="flex-1 min-h-0 flex flex-col p-2">
+          <Empty className="w-full flex-1 min-h-0">
+            <EmptyHeader>
+              <EmptyMedia variant="icon">
+                <IconCloudOff className="size-6" />
+              </EmptyMedia>
+              <EmptyDescription>
+                开发环境未就绪，无法预览
+              </EmptyDescription>
+            </EmptyHeader>
+          </Empty>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <div className="flex flex-col h-full min-h-0 rounded-lg border overflow-hidden">
+        <div className="flex items-center gap-2 px-4 py-1 min-h-11 border-b bg-muted/30 shrink-0">
+          <span className="text-sm font-medium">在线预览</span>
+        </div>
+        <div className="flex-1 min-h-0 overflow-auto flex flex-col p-2">
+        {(ports && ports.length > 0) ? (
+        <ItemGroup className="gap-2">
+          {ports.map((port: DomainVMPort) => (
+            <Item variant="outline" size="sm" key={port.port?.toString()} className="group hover:border-primary/50">
+              <ItemContent>
+                <ItemTitle>
+                  <span
+                    className="group-hover:text-primary hover:underline cursor-pointer"
+                    onClick={() => {
+                      if (port.status === ConstsPortStatus.PortStatusConnected) {
+                        window.open(port.preview_url, '_blank')
+                      } else {
+                        toast.error('端口未开放')
+                      }
+                    }}
+                  >
+                    {port.port}
+                  </span>
+                  {port.error_message && (
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <IconAlertCircle className="size-4" />
+                      </TooltipTrigger>
+                      <TooltipContent>{port.error_message}</TooltipContent>
+                    </Tooltip>
+                  )}
+                  {port.status === ConstsPortStatus.PortStatusConnected && <Badge variant="secondary">http</Badge>}
+                </ItemTitle>
+                <ItemDescription>
+                  {port.status === ConstsPortStatus.PortStatusConnected && port.white_list && port.white_list.length > 0
+                    ? `允许 ${port.white_list?.join(', ')} 访问`
+                    : '未开放访问'}
+                </ItemDescription>
+              </ItemContent>
+              <ItemActions>
+                {port.status === ConstsPortStatus.PortStatusReversed && (
+                  <Button
+                    size="sm"
+                    variant="secondary"
+                    onClick={() => handleOpenPort(port.port as number, port.forward_id as string)}
+                    disabled={disabled}
+                  >
+                    {portToOpen === port.port && <Spinner />}
+                    开放访问
+                  </Button>
+                )}
+                {port.status === ConstsPortStatus.PortStatusConnected && (
+                  <Button size="sm" variant="secondary" onClick={() => window.open(port.preview_url, '_blank')}>
+                    {portToClose === port.port && <Spinner />}
+                    访问
+                  </Button>
+                )}
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button size="icon-sm" variant="ghost" disabled={disabled}>
+                      <IconDotsVertical />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    <DropdownMenuItem
+                      disabled={port.status !== ConstsPortStatus.PortStatusConnected}
+                      onClick={async () => {
+                        if (port.preview_url) {
+                          try {
+                            await navigator.clipboard.writeText(port.preview_url)
+                            toast.success("访问地址已复制到剪贴板")
+                          } catch {
+                            toast.error(`复制失败，请手动复制：${port.preview_url}`)
+                          }
+                        }
+                      }}
+                    >
+                      <IconCopy />
+                      复制地址
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      onClick={() => handleOpenWhitelistDialog(port)}
+                      disabled={port.status !== ConstsPortStatus.PortStatusConnected}
+                    >
+                      <IconHandStop />
+                      白名单 IP
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      disabled={port.status !== ConstsPortStatus.PortStatusConnected}
+                      onClick={() => {
+                        setPortToDelete(port)
+                        setDeleteDialogOpen(true)
+                      }}
+                    >
+                      <IconTrash />
+                      关闭访问
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </ItemActions>
+            </Item>
+          ))}
+        </ItemGroup>
+        ) : (
+          <div className="flex-1 min-h-0 flex flex-col">
+            <Empty className="w-full flex-1 min-h-0">
+              <EmptyHeader>
+                <EmptyMedia variant="icon">
+                  <IconAccessPoint className="size-6" />
+                </EmptyMedia>
+                <EmptyDescription>
+                  开发环境中没有发现正在监听的端口
+                </EmptyDescription>
+              </EmptyHeader>
+            </Empty>
+          </div>
+        )}
+        </div>
+      </div>
+
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>确认回收</AlertDialogTitle>
+            <AlertDialogDescription>
+              确定要回收端口 "{portToDelete?.port}" 吗？此操作不可撤销。
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel onClick={() => setDeleteDialogOpen(false)}>取消</AlertDialogCancel>
+            <AlertDialogAction onClick={confirmDeletePort}>确认回收</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      <Dialog open={whitelistDialogOpen} onOpenChange={setWhitelistDialogOpen}>
+        <DialogContent className="max-w-sm">
+          <DialogHeader>
+            <DialogTitle>编辑白名单 IP - 端口 {portToEditWhitelist?.port}</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="text-sm text-muted-foreground">
+              每行输入一个 IP 地址，只有白名单中的 IP 才能访问此端口。
+            </div>
+            <textarea
+              className="w-full h-32 p-3 text-sm border rounded-md resize-none focus:outline-none focus:ring-2 focus:ring-primary bg-background"
+              placeholder="例如：&#10;192.168.1.1&#10;10.0.0.1"
+              value={whitelistInput}
+              onChange={(e) => setWhitelistInput(e.target.value)}
+            />
+            <div className="flex justify-end gap-2">
+              <Button variant="outline" onClick={() => setWhitelistDialogOpen(false)}>取消</Button>
+              <Button onClick={handleSaveWhitelist} disabled={whitelistSaving}>
+                {whitelistSaving && <Spinner />}
+                保存
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}
diff --git a/frontend/src/components/console/task/task-terminal-panel.tsx b/frontend/src/components/console/task/task-terminal-panel.tsx
new file mode 100644
index 00000000..d1c7fce7
--- /dev/null
+++ b/frontend/src/components/console/task/task-terminal-panel.tsx
@@ -0,0 +1,256 @@
+import type { DomainTerminal } from "@/api/Api"
+import Terminal from "@/components/common/terminal"
+import { Button } from "@/components/ui/button"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+import { apiRequest } from "@/utils/requestUtils"
+import { IconAlertCircle, IconCloudOff, IconPlus, IconReload, IconTerminal2, IconX } from "@tabler/icons-react"
+import { useEffect, useState } from "react"
+import { v4 as uuidv4 } from "uuid"
+import { toast } from "sonner"
+import { Spinner } from "@/components/ui/spinner"
+import { cn } from "@/lib/utils"
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia } from "@/components/ui/empty"
+
+interface TaskTerminalPanelProps {
+  envid?: string
+  disabled?: boolean
+}
+
+export function TaskTerminalPanel({ envid, disabled }: TaskTerminalPanelProps) {
+  const [sessions, setSessions] = useState<DomainTerminal[]>([])
+  const [currentSessionId, setCurrentSessionId] = useState<string | null>(null)
+  const [signal, setSignal] = useState<number>(0)
+  const [connectionStatus, setConnectionStatus] = useState<"connecting" | "connected" | "disconnected">("disconnected")
+  const [titles, setTitles] = useState<Record<string, string>>({})
+  const [closeDialogOpen, setCloseDialogOpen] = useState(false)
+  const [sessionToClose, setSessionToClose] = useState<string | null>(null)
+
+  const fetchSessions = async () => {
+    if (!envid) return
+
+    await apiRequest("v1UsersHostsVmsTerminalsDetail", {}, [envid], (resp) => {
+      if (resp.code === 0) {
+        const connections = (resp.data || []) as DomainTerminal[]
+        connections.sort((a, b) => (b.created_at || 0) - (a.created_at || 0))
+        setSessions(connections)
+      }
+    })
+  }
+
+  const handleDeleteSession = async (terminalId: string) => {
+    if (!envid) return
+
+    await apiRequest("v1UsersHostsVmsTerminalsDelete", {}, [envid, terminalId], (resp) => {
+      if (resp.code === 0) {
+        toast.success("终端会话已关闭")
+        if (currentSessionId === terminalId) {
+          const remaining = sessions.filter((s) => s.id !== terminalId)
+          setCurrentSessionId(remaining[0]?.id || null)
+          setSignal((prev) => prev + 1)
+        }
+        fetchSessions()
+      } else {
+        toast.error("关闭终端会话失败: " + resp.message)
+      }
+    })
+    setCloseDialogOpen(false)
+    setSessionToClose(null)
+  }
+
+  const handleSelectSession = (sessionId: string) => {
+    setCurrentSessionId(sessionId)
+    setSignal((prev) => prev + 1)
+  }
+
+  const handleNewSession = () => {
+    const newId = uuidv4()
+    setCurrentSessionId(newId)
+    setSignal((prev) => prev + 1)
+  }
+
+  const handleCloseTab = (e: React.MouseEvent, sessionId: string) => {
+    e.stopPropagation()
+    setSessionToClose(sessionId)
+    setCloseDialogOpen(true)
+  }
+
+  const onTitleChanged = (title: string) => {
+    if (currentSessionId) {
+      setTitles((prev) => ({ ...prev, [currentSessionId]: title }))
+    }
+  }
+
+  useEffect(() => {
+    if (!envid || disabled) return
+    fetchSessions()
+  }, [envid, disabled])
+
+  useEffect(() => {
+    if (connectionStatus === "connected") {
+      fetchSessions()
+    }
+  }, [connectionStatus])
+
+  useEffect(() => {
+    if (sessions.length > 0 && currentSessionId === null) {
+      setCurrentSessionId(sessions[0].id || null)
+      setSignal((prev) => prev + 1)
+    }
+  }, [sessions])
+
+  const displaySessions = [...sessions]
+  if (currentSessionId && !sessions.some((s) => s.id === currentSessionId)) {
+    displaySessions.unshift({
+      id: currentSessionId,
+      title: "新终端",
+      created_at: Date.now() / 1000,
+    })
+  }
+
+  const getTabTitle = (session: DomainTerminal) => {
+    if (currentSessionId === session.id && connectionStatus === "connected" && titles[session.id || ""]) {
+      return titles[session.id || ""]
+    }
+    return session.title || session.id?.slice(0, 8) || "终端"
+  }
+
+  const getTabIcon = (sessionId: string) => {
+    if (currentSessionId !== sessionId) {
+      return <IconTerminal2 className="size-3.5 text-muted-foreground shrink-0" />
+    }
+    if (connectionStatus === "connecting") {
+      return <Spinner className="size-3.5 shrink-0" />
+    }
+    if (connectionStatus === "connected") {
+      return <IconTerminal2 className="size-3.5 text-green-500 shrink-0" />
+    }
+    return <IconAlertCircle className="size-3.5 text-red-500 shrink-0" />
+  }
+
+  if (disabled) {
+    return (
+      <div className="flex flex-col h-full min-h-0">
+        <div className="flex items-center gap-2 px-4 py-1 min-h-11 border-b bg-muted/50 shrink-0">
+          <IconTerminal2 className="size-4 text-primary" />
+          <span className="text-sm font-medium">终端</span>
+        </div>
+        <div className="flex-1 min-h-0 flex flex-col">
+          <Empty className="border border-dashed w-full flex-1 min-h-0">
+            <EmptyHeader>
+              <EmptyMedia variant="icon">
+                <IconCloudOff className="size-6" />
+              </EmptyMedia>
+              <EmptyDescription>
+                开发环境未就绪
+              </EmptyDescription>
+            </EmptyHeader>
+          </Empty>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col h-full min-h-0">
+      <div
+        className={cn(
+          "flex items-center min-h-11 border-b bg-muted/30 shrink-0 overflow-x-auto px-2 py-1 gap-1",
+        )}
+      >
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-8 shrink-0 cursor-pointer hover:text-primary"
+          onClick={handleNewSession}
+          disabled={disabled}
+        >
+          <IconPlus className="size-4" />
+        </Button>
+        <div className="flex items-center gap-1 min-w-0 flex-1 overflow-x-auto divide-x divide-border/50">
+          {displaySessions.map((session) => {
+              const sid = session.id || ""
+              const isActive = currentSessionId === sid
+              return (
+                <div
+                  key={sid}
+                  className={cn(
+                    "group flex items-center gap-1.5 pl-2.5 pr-1.5 py-1.5 rounded-md cursor-pointer shrink-0 min-w-0 max-w-[140px] transition-all duration-150",
+                    isActive
+                      ? "bg-background text-primary border border-border/50"
+                      : "text-muted-foreground hover:text-foreground hover:bg-muted/60 border border-transparent"
+                  )}
+                  onClick={() => handleSelectSession(sid)}
+                >
+                  {getTabIcon(sid)}
+                  <span className="truncate text-xs font-medium">{getTabTitle(session)}</span>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="size-5 shrink-0 opacity-0 group-hover:opacity-100 hover:bg-destructive/10 hover:text-primary rounded cursor-pointer"
+                    onClick={(e) => handleCloseTab(e, sid)}
+                  >
+                    <IconX className="size-3" />
+                  </Button>
+                </div>
+              )
+            })}
+        </div>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-8 shrink-0 cursor-pointer hover:text-primary"
+          onClick={() => fetchSessions()}
+          disabled={disabled}
+        >
+          <IconReload className="size-4" />
+        </Button>
+      </div>
+
+      <div className="flex-1 min-h-0 flex flex-col">
+        {currentSessionId ? (
+          <Terminal
+            ws={`/api/v1/users/hosts/vms/${envid}/terminals/connect?terminal_id=${currentSessionId}`}
+            theme="Tomorrow"
+            signal={signal}
+            onTitleChanged={onTitleChanged}
+            onUserNameChanged={() => {}}
+            onConnectionStatusChanged={setConnectionStatus}
+          />
+        ) : (
+          <Empty className="w-full flex-1 min-h-0">
+            <EmptyHeader>
+              <EmptyMedia variant="icon">
+                <IconTerminal2 className="size-6" />
+              </EmptyMedia>
+              <EmptyDescription>点击 + 创建终端</EmptyDescription>
+            </EmptyHeader>
+          </Empty>
+        )}
+      </div>
+
+      <AlertDialog open={closeDialogOpen} onOpenChange={setCloseDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>确认关闭</AlertDialogTitle>
+            <AlertDialogDescription>确定要关闭此终端会话吗？此操作不可撤销。</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel onClick={() => setCloseDialogOpen(false)}>取消</AlertDialogCancel>
+            <AlertDialogAction onClick={() => sessionToClose && handleDeleteSession(sessionToClose)}>
+              确认关闭
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  )
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 13c29610..e82124ac 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -185,4 +185,17 @@
 
 .font-google-sans-code {
   font-family: 'Google Sans Code';
+}
+
+@keyframes text-flash {
+  0%, 100% {
+    color: var(--foreground);
+  }
+  50% {
+    color: var(--primary);
+  }
+}
+
+.animate-text-flash {
+  animation: text-flash 1.5s ease-in-out infinite;
 }
\ No newline at end of file
diff --git a/frontend/src/pages/console/user/page.tsx b/frontend/src/pages/console/user/page.tsx
index 81af0485..3eaa0567 100644
--- a/frontend/src/pages/console/user/page.tsx
+++ b/frontend/src/pages/console/user/page.tsx
@@ -1,6 +1,8 @@
-import { Fragment } from "react"
+import { BreadcrumbTaskProvider, useBreadcrumbTask } from "@/components/console/breadcrumb-task-context"
+import { createContext, Fragment, useContext, useState } from "react"
 import { Outlet, useLocation } from "react-router-dom"
 import UserSidebar from "@/components/console/nav/user-sidebar"
+import { SettingsDialog } from "@/components/console/settings/settings-dialog"
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -17,6 +19,7 @@ import {
 } from "@/components/ui/sidebar"
 import { Button } from "@/components/ui/button"
 import { HelpCircle, Users } from "lucide-react"
+import NavBalance from "@/components/console/nav/nav-balance"
 import { DataProvider } from "@/components/console/data-provider"
 import {
   HoverCard,
@@ -24,8 +27,16 @@ import {
   HoverCardTrigger,
 } from "@/components/ui/hover-card"
 
-export default function UserConsolePage() {
+const SettingsDialogContext = createContext<{ open: boolean; setOpen: (open: boolean) => void } | null>(null)
+export const useSettingsDialog = () => {
+  const ctx = useContext(SettingsDialogContext)
+  if (!ctx) throw new Error("useSettingsDialog must be used within SettingsDialogContext.Provider")
+  return ctx
+}
+
+function UserConsoleContent() {
   const location = useLocation()
+  const { taskName } = useBreadcrumbTask() ?? { taskName: null }
 
   const breadcrumbSegmentsMap: Record<
     string,
@@ -35,14 +46,11 @@ export default function UserConsolePage() {
       { label: "仪表盘", href: "/console/dashboard" },
     ],
     "/console/tasks": [
-      { label: "智能任务", href: "/console/tasks" },
+      { label: "新任务", href: "/console/tasks" },
     ],
     "/console/projects": [
       { label: "项目管理", href: "/console/projects" },
     ],
-    "/console/settings": [
-      { label: "配置", href: "/console/settings" },
-    ],
     "/console/vms": [
       { label: "开发环境", href: "/console/vms" },
     ],
@@ -56,41 +64,63 @@ export default function UserConsolePage() {
 
   const normalizedPath =
     location.pathname !== "/" ? location.pathname.replace(/\/$/, "") : location.pathname
-  
+
+  // 动态路由的 breadcrumb：/console/task/:taskId（排除 develop）
+  const taskDetailMatch = normalizedPath.match(/^\/console\/task\/(?!develop\/)(.+)$/)
   const breadcrumbSegments =
-    breadcrumbSegmentsMap[normalizedPath] ?? [{ label: "用户控制台" }]
+    breadcrumbSegmentsMap[normalizedPath] ??
+    (taskDetailMatch
+      ? [{ label: "任务", href: "/console/tasks" }, { label: taskName ?? "未知任务名称" }]
+      : [{ label: "用户控制台" }])
 
-  return (
+  const [settingsOpen, setSettingsOpen] = useState(false)
 
+  return (
     <DataProvider>
-      <SidebarProvider>
-        <UserSidebar />
-        <SidebarInset className="h-[calc(100vh-var(--spacing)*4)]">
-          <header className="flex h-15 shrink-0 items-center gap-2">
-            <div className="flex items-center gap-2 px-4">
-              <SidebarTrigger className="-ml-1" />
+      <SettingsDialogContext.Provider value={{ open: settingsOpen, setOpen: setSettingsOpen }}>
+        <SidebarProvider>
+          <UserSidebar />
+        <SidebarInset className="h-[calc(100vh-var(--spacing)*4)] min-w-0 overflow-hidden">
+          <header className="flex h-15 shrink-0 items-center gap-2 overflow-hidden">
+            <div className="flex min-w-0 flex-1 items-center gap-2 px-4">
+              <SidebarTrigger className="-ml-1 shrink-0" />
               <Separator
                 orientation="vertical"
-                className="mr-2 data-[orientation=vertical]:h-4"
+                className="mr-2 shrink-0 data-[orientation=vertical]:h-4"
               />
-              <Breadcrumb>
-                <BreadcrumbList>
-                  <BreadcrumbItem className="hidden lg:block">
-                    <BreadcrumbLink href="/console">MonkeyCode AI</BreadcrumbLink>
+              <Breadcrumb className="flex min-w-0 flex-1 overflow-hidden">
+                <BreadcrumbList className="min-w-0 flex-1 flex-nowrap break-normal">
+                  <BreadcrumbItem className="hidden shrink-0 lg:block">
+                    <BreadcrumbLink
+                      href="/console"
+                      className="whitespace-nowrap"
+                    >
+                      MonkeyCode AI
+                    </BreadcrumbLink>
                   </BreadcrumbItem>
                   {breadcrumbSegments.map((segment, index) => {
                     const isLast = index === breadcrumbSegments.length - 1
                     return (
                       <Fragment key={`${segment.label}-${index}`}>
                         {index === 0 && (
-                          <BreadcrumbSeparator className="hidden lg:block" />
+                          <BreadcrumbSeparator className="hidden shrink-0 lg:block" />
                         )}
-                        {index > 0 && <BreadcrumbSeparator />}
-                        <BreadcrumbItem>
+                        {index > 0 && <BreadcrumbSeparator className="shrink-0" />}
+                        <BreadcrumbItem
+                          className={isLast ? "min-w-0 shrink overflow-hidden" : "shrink-0"}
+                        >
                           {isLast ? (
-                            <BreadcrumbPage>{segment.label}</BreadcrumbPage>
+                            <BreadcrumbPage
+                              className="block truncate"
+                              title={segment.label}
+                            >
+                              {segment.label}
+                            </BreadcrumbPage>
                           ) : (
-                            <BreadcrumbLink href={segment.href ?? "#"}>
+                            <BreadcrumbLink
+                              href={segment.href ?? "#"}
+                              className="whitespace-nowrap"
+                            >
                               {segment.label}
                             </BreadcrumbLink>
                           )}
@@ -101,7 +131,7 @@ export default function UserConsolePage() {
                 </BreadcrumbList>
               </Breadcrumb>
             </div>
-            <div className="ml-auto flex items-center gap-2 px-4">
+            <div className="ml-auto flex shrink-0 items-center gap-2 px-4">
               <HoverCard openDelay={100} closeDelay={200}>
                 <HoverCardTrigger asChild>
                   <Button className="hidden lg:flex" variant="ghost" size="sm">
@@ -120,6 +150,7 @@ export default function UserConsolePage() {
                   </div>
                 </HoverCardContent>
               </HoverCard>
+              <NavBalance variant="header" />
               <Button className="hidden lg:flex" variant="ghost" size="sm" asChild>
                 <a href="https://monkeycode.docs.baizhi.cloud/" target="_blank">
                   <HelpCircle className="h-[1.2rem] w-[1.2rem]" />
@@ -135,7 +166,17 @@ export default function UserConsolePage() {
             </div>
           </div>
         </SidebarInset>
+        <SettingsDialog open={settingsOpen} onOpenChange={setSettingsOpen} />
       </SidebarProvider>
+      </SettingsDialogContext.Provider>
     </DataProvider>
   )
 }
+
+export default function UserConsolePage() {
+  return (
+    <BreadcrumbTaskProvider>
+      <UserConsoleContent />
+    </BreadcrumbTaskProvider>
+  )
+}
diff --git a/frontend/src/pages/console/user/project/issues.tsx b/frontend/src/pages/console/user/project/issues.tsx
deleted file mode 100644
index a2fa0a72..00000000
--- a/frontend/src/pages/console/user/project/issues.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import { useEffect, useState } from "react";
-import { type DomainProjectIssue, type DomainProject } from "@/api/Api";
-import { apiRequest } from "@/utils/requestUtils";
-import { toast } from "sonner";
-import { useParams } from "react-router-dom";
-import { Button } from "@/components/ui/button";
-import { IconPlus } from "@tabler/icons-react";
-import ProjectIssueList from "@/components/console/project/issue-list";
-import ViewIssueDialog from "@/components/console/project/issue-detail";
-import CreateIssueDialog from "@/components/console/project/create-issue";
-
-export default function ProjectIssuesPage() {
-  const { projectId = '' } = useParams<{ projectId: string }>()
-  const [project, setProject] = useState<DomainProject | undefined>(undefined)
-  const [issues, setIssues] = useState<DomainProjectIssue[]>([])
-  const [isCreateIssueDialogOpen, setIsCreateIssueDialogOpen] = useState(false)
-  const [viewingIssue, setViewingIssue] = useState<DomainProjectIssue | undefined>(undefined)
-  const [viewIssueDialogOpen, setViewIssueDialogOpen] = useState(false)
-
-  const fetchProject = async () => {
-    await apiRequest("v1UsersProjectsDetail", {}, [projectId], (resp) => {
-      if (resp.code === 0) {
-        setProject(resp.data)
-      } else {
-        toast.error(resp.message || "获取项目失败")
-      }
-    })
-  }
-
-  const fetchProjectIssues = async () => {
-    await apiRequest('v1UsersProjectsIssuesDetail', {}, [projectId], (resp) => {
-      if (resp.code === 0) {
-        const issues = resp.data?.issues || []
-        // 排序：首先按状态（open -> completed -> closed），其次按优先级（1 -> 2 -> 3），最后按修改时间（最新的在前）
-        const sortedIssues = [...issues].sort((a, b) => {
-          // 1. 首先按状态排序
-          const getStatusOrder = (status?: string) => {
-            if (status === 'open') return 1
-            if (status === 'completed') return 2
-            if (status === 'closed') return 3
-            return 4 // 其他状态排在最后
-          }
-          const statusDiff = getStatusOrder(a.status) - getStatusOrder(b.status)
-          if (statusDiff !== 0) return statusDiff
-
-          // 2. 其次按优先级排序（1 最高优先级，3 最低优先级）
-          const priorityA = a.priority ?? 999 // 没有优先级的排在最后
-          const priorityB = b.priority ?? 999
-          const priorityDiff = priorityA - priorityB
-          if (priorityDiff !== 0) return priorityDiff
-
-          // 3. 最后按修改时间排序（最新的在前，即时间戳大的在前）
-          const timeA = a.created_at ?? 0
-          const timeB = b.created_at ?? 0
-          return timeB - timeA
-        })
-        setIssues(sortedIssues)
-      } else {
-        toast.error(resp.message || "获取项目需求失败")
-      }
-    })
-  }
-
-  const handleViewIssue = (issue: DomainProjectIssue) => {
-    setViewingIssue(issue)
-    setViewIssueDialogOpen(true)
-  }
-
-  useEffect(() => {
-    if (projectId) {
-      fetchProject()
-      fetchProjectIssues()
-    }
-  }, [projectId])
-
-
-  return (
-    <div className="flex flex-col gap-3 h-full">
-      <div className="flex flex-row gap-2">
-        <h2 className="text-lg font-semibold flex-1">项目需求列表</h2>
-        <Button variant="default" size="sm" onClick={() => setIsCreateIssueDialogOpen(true)}>
-          <IconPlus />
-          创建需求
-        </Button>
-      </div>
-
-      <ProjectIssueList 
-        issues={issues}
-        projectId={projectId}
-        project={project}
-        onViewIssue={handleViewIssue}
-      />
-
-      <CreateIssueDialog
-        open={isCreateIssueDialogOpen}
-        onOpenChange={setIsCreateIssueDialogOpen}
-        projectId={projectId}
-        onSuccess={fetchProjectIssues}
-      />
-
-      <ViewIssueDialog
-        open={viewIssueDialogOpen}
-        onOpenChange={setViewIssueDialogOpen}
-        issue={viewingIssue}
-        projectId={projectId}
-        project={project}
-        onSuccess={fetchProjectIssues}
-      />
-    </div>
-  )
-}
\ No newline at end of file
diff --git a/frontend/src/pages/console/user/project/overview/index.tsx b/frontend/src/pages/console/user/project/overview/index.tsx
new file mode 100644
index 00000000..0be88e44
--- /dev/null
+++ b/frontend/src/pages/console/user/project/overview/index.tsx
@@ -0,0 +1,85 @@
+import { useEffect, useRef, useState } from "react"
+import { useParams } from "react-router-dom"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import ProjectInfo from "@/components/console/project/project-info"
+import { type DomainProject } from "@/api/Api"
+import { apiRequest } from "@/utils/requestUtils"
+import { toast } from "sonner"
+import { isProjectRepoUnbound } from "@/utils/project"
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/components/ui/empty"
+import { IconAlertCircle } from "@tabler/icons-react"
+import ProjectOverviewInfoTab from "./info-tab"
+import ProjectOverviewIssuesTab from "./issues-tab"
+import ProjectOverviewTasksTab from "./tasks-tab"
+
+export default function ProjectOverviewPage() {
+  const { projectId = "" } = useParams<{ projectId: string }>()
+  const projectIdRef = useRef(projectId)
+  projectIdRef.current = projectId
+
+  const [project, setProject] = useState<DomainProject | undefined>(undefined)
+  const [tasksRefreshKey, setTasksRefreshKey] = useState(0)
+
+  const fetchProject = async () => {
+    const requestedId = projectId
+    await apiRequest("v1UsersProjectsDetail", {}, [requestedId], (resp) => {
+      if (projectIdRef.current !== requestedId) return
+      if (resp.code === 0) {
+        setProject(resp.data)
+      } else {
+        toast.error(resp.message || "获取项目失败")
+      }
+    })
+  }
+
+  useEffect(() => {
+    if (projectId) {
+      setProject(undefined)
+      fetchProject()
+    }
+  }, [projectId])
+
+  const isRepoUnbound = isProjectRepoUnbound(project)
+
+  if (projectId && project && isRepoUnbound) {
+    return (
+      <Empty className="bg-muted flex-1">
+        <EmptyHeader>
+          <EmptyMedia variant="icon">
+            <IconAlertCircle className="size-6" />
+          </EmptyMedia>
+          <EmptyTitle>项目异常</EmptyTitle>
+          <EmptyDescription>这个项目没有绑定仓库</EmptyDescription>
+        </EmptyHeader>
+      </Empty>
+    )
+  }
+
+  return (
+    <div className="flex flex-col gap-4 h-full w-full min-h-0">
+      <ProjectInfo project={project} onRefresh={fetchProject} />
+      <Tabs defaultValue="info" className="w-full flex-1 min-h-0 flex flex-col overflow-hidden">
+        <TabsList>
+          <TabsTrigger value="info">信息</TabsTrigger>
+          <TabsTrigger value="issues">需求</TabsTrigger>
+          <TabsTrigger value="tasks">任务</TabsTrigger>
+        </TabsList>
+        <TabsContent value="info" className="mt-2 flex flex-col gap-4">
+          <ProjectOverviewInfoTab projectId={projectId} project={project} />
+        </TabsContent>
+        <TabsContent value="issues" className="mt-2 flex-1 min-h-0 flex flex-col">
+          <ProjectOverviewIssuesTab projectId={projectId} project={project} onTaskCreated={() => setTasksRefreshKey((k) => k + 1)} />
+        </TabsContent>
+        <TabsContent value="tasks" className="mt-2 flex-1 min-h-0 flex flex-col">
+          <ProjectOverviewTasksTab projectId={projectId} refreshKey={tasksRefreshKey} />
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}
diff --git a/frontend/src/pages/console/user/project/project.tsx b/frontend/src/pages/console/user/project/overview/info-tab.tsx
similarity index 55%
rename from frontend/src/pages/console/user/project/project.tsx
rename to frontend/src/pages/console/user/project/overview/info-tab.tsx
index b8c93228..7a096539 100644
--- a/frontend/src/pages/console/user/project/project.tsx
+++ b/frontend/src/pages/console/user/project/overview/info-tab.tsx
@@ -1,95 +1,62 @@
-import { type DomainProject } from "@/api/Api"
-import { Markdown } from "@/components/common/markdown"
+import { useEffect, useRef, useState } from "react"
 import { ProjectFileManager } from "@/components/console/project/files"
-import ProjectInfo from "@/components/console/project/project-info"
+import { Markdown } from "@/components/common/markdown"
+import { type DomainProject } from "@/api/Api"
+import { apiRequest } from "@/utils/requestUtils"
+import { b64decode } from "@/utils/common"
 import {
   Empty,
   EmptyDescription,
   EmptyHeader,
   EmptyMedia,
-  EmptyTitle,
 } from "@/components/ui/empty"
 import { Label } from "@/components/ui/label"
-import { apiRequest } from "@/utils/requestUtils"
-import { b64decode } from "@/utils/common"
+import { IconFileText, IconLoader } from "@tabler/icons-react"
 import { cn } from "@/lib/utils"
-import { isProjectRepoUnbound } from "@/utils/project"
-import { useEffect, useRef, useState } from "react"
-import { useParams } from "react-router-dom"
-import { toast } from "sonner"
-import { IconAlertCircle, IconFileText, IconLoader } from "@tabler/icons-react"
 
-export default function ProjectPage() {
-  const { projectId = '' } = useParams<{ projectId: string }>()
+interface ProjectOverviewInfoTabProps {
+  projectId: string
+  project?: DomainProject
+}
+
+export default function ProjectOverviewInfoTab({ projectId, project }: ProjectOverviewInfoTabProps) {
   const projectIdRef = useRef(projectId)
   projectIdRef.current = projectId
 
-  const [project, setProject] = useState<DomainProject | undefined>(undefined)
-  const [readmeContent, setReadmeContent] = useState<string>('')
-  const [readmePath, setReadmePath] = useState<string>('')
+  const [readmeContent, setReadmeContent] = useState<string>("")
+  const [readmePath, setReadmePath] = useState<string>("")
   const [readmeLoaded, setReadmeLoaded] = useState(false)
 
-  const fetchProject = async () => {
-    const requestedId = projectId
-    await apiRequest("v1UsersProjectsDetail", {}, [requestedId], (resp) => {
-      // 忽略过期响应：切换 project 后，旧请求可能晚于新请求返回
-      if (projectIdRef.current !== requestedId) return
-      if (resp.code === 0) {
-        setProject(resp.data)
-      } else {
-        toast.error(resp.message || "获取项目失败")
-      }
-    })
-  }
-
-  const isRepoUnbound = isProjectRepoUnbound(project)
-
-  useEffect(() => {
-    if (projectId) {
-      setProject(undefined)
-      setReadmeContent('')
-      setReadmePath('')
-      setReadmeLoaded(false)
-      fetchProject()
-    }
-  }, [projectId])
-
-  // 读取根目录文件列表，找到 readme.md（忽略大小写）后拉取内容
   useEffect(() => {
     if (!project?.id) {
-      setReadmeContent('')
-      setReadmePath('')
+      setReadmeContent("")
+      setReadmePath("")
       setReadmeLoaded(true)
       return
     }
-
     const requestedProjectId = project.id
     setReadmeLoaded(false)
-    apiRequest('v1UsersProjectsTreeDetail', {
-      recursive: false,
-      path: ''
-    }, [project.id], (resp) => {
+    apiRequest("v1UsersProjectsTreeDetail", { recursive: false, path: "" }, [project.id], (resp) => {
       if (projectIdRef.current !== requestedProjectId) return
       if (resp.code !== 0 || !resp.data) {
         setReadmeLoaded(true)
         return
       }
       const readme = (resp.data as { name?: string; path?: string }[]).find(
-        (e) => e.name?.toLowerCase() === 'readme.md'
+        (e) => e.name?.toLowerCase() === "readme.md"
       )
       const readmePathVal = readme?.path
       if (!readme || !readmePathVal) {
-        setReadmeContent('')
-        setReadmePath('')
+        setReadmeContent("")
+        setReadmePath("")
         setReadmeLoaded(true)
         return
       }
-      const pathToFetch = readmePathVal as string
-      apiRequest('v1UsersProjectsTreeBlobDetail', { path: pathToFetch }, [project.id as string], (r) => {
+      apiRequest("v1UsersProjectsTreeBlobDetail", { path: readmePathVal }, [project.id as string], (r) => {
         if (projectIdRef.current !== requestedProjectId) return
         if (r.code === 0 && r.data?.content) {
           setReadmeContent(b64decode(r.data.content))
-          setReadmePath(pathToFetch)
+          setReadmePath(readmePathVal)
           window.scrollTo(0, 0)
         }
         setReadmeLoaded(true)
@@ -97,25 +64,11 @@ export default function ProjectPage() {
     })
   }, [project?.id])
 
-  if (project && isRepoUnbound) {
-    return (
-      <Empty className="bg-muted flex-1">
-        <EmptyHeader>
-          <EmptyMedia variant="icon">
-            <IconAlertCircle className="size-6" />
-          </EmptyMedia>
-          <EmptyTitle>项目异常</EmptyTitle>
-          <EmptyDescription>这个项目没有绑定仓库</EmptyDescription>
-        </EmptyHeader>
-      </Empty>
-    )
-  }
-
   const ReadmeHeader = (
     <div className="px-4 py-2 flex items-center border-b bg-muted/50">
       <Label className="flex items-center h-6">
         <IconFileText className="size-4" />
-        {readmePath || 'README'}
+        {readmePath || "README"}
       </Label>
     </div>
   )
@@ -162,11 +115,8 @@ export default function ProjectPage() {
   }
 
   return (
-    <div className="flex flex-col gap-4 h-full w-full">
-      <ProjectInfo project={project} onRefresh={fetchProject} />
-
+    <div className="flex flex-col gap-4">
       <ProjectFileManager key={`files-${projectId}`} project={project} className="w-full" />
-
       {renderReadme()}
     </div>
   )
diff --git a/frontend/src/pages/console/user/project/overview/issues-tab.tsx b/frontend/src/pages/console/user/project/overview/issues-tab.tsx
new file mode 100644
index 00000000..33771dd9
--- /dev/null
+++ b/frontend/src/pages/console/user/project/overview/issues-tab.tsx
@@ -0,0 +1,145 @@
+import { useCallback, useEffect, useMemo, useState } from "react"
+import {
+  ConstsProjectIssueStatus,
+  type DomainProject,
+  type DomainProjectIssue,
+} from "@/api/Api"
+import { apiRequest } from "@/utils/requestUtils"
+import { toast } from "sonner"
+import { Button } from "@/components/ui/button"
+import { IconPlus } from "@tabler/icons-react"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import ProjectIssueList from "@/components/console/project/issue-list"
+import ViewIssueDialog from "@/components/console/project/issue-detail"
+import CreateIssueDialog from "@/components/console/project/create-issue"
+import { getStatusName } from "@/utils/common"
+
+interface ProjectOverviewIssuesTabProps {
+  projectId: string
+  project?: DomainProject
+  onTaskCreated?: () => void
+}
+
+const STATUS_ALL = "__all__"
+const PRIORITY_ALL = "__all__"
+
+const STATUS_OPTIONS = [
+  { value: STATUS_ALL, label: "全部状态" },
+  { value: ConstsProjectIssueStatus.ProjectIssueStatusOpen, label: getStatusName(ConstsProjectIssueStatus.ProjectIssueStatusOpen) },
+  { value: ConstsProjectIssueStatus.ProjectIssueStatusCompleted, label: getStatusName(ConstsProjectIssueStatus.ProjectIssueStatusCompleted) },
+  { value: ConstsProjectIssueStatus.ProjectIssueStatusClosed, label: getStatusName(ConstsProjectIssueStatus.ProjectIssueStatusClosed) },
+]
+
+const PRIORITY_OPTIONS = [
+  { value: PRIORITY_ALL, label: "全部优先级" },
+  { value: "3", label: "高" },
+  { value: "2", label: "中" },
+  { value: "1", label: "低" },
+]
+
+export default function ProjectOverviewIssuesTab({ projectId, project, onTaskCreated }: ProjectOverviewIssuesTabProps) {
+  const [issues, setIssues] = useState<DomainProjectIssue[]>([])
+  const [statusFilter, setStatusFilter] = useState<string>(STATUS_ALL)
+  const [priorityFilter, setPriorityFilter] = useState<string>(PRIORITY_ALL)
+  const [isCreateIssueDialogOpen, setIsCreateIssueDialogOpen] = useState(false)
+  const [viewingIssue, setViewingIssue] = useState<DomainProjectIssue | undefined>(undefined)
+  const [viewIssueDialogOpen, setViewIssueDialogOpen] = useState(false)
+
+  const filteredIssues = useMemo(() => {
+    return issues.filter((issue) => {
+      if (statusFilter !== STATUS_ALL && issue.status !== statusFilter) return false
+      if (priorityFilter !== PRIORITY_ALL && issue.priority?.toString() !== priorityFilter) return false
+      return true
+    })
+  }, [issues, statusFilter, priorityFilter])
+
+  const fetchProjectIssues = useCallback(async () => {
+    if (!projectId) return
+    await apiRequest("v1UsersProjectsIssuesDetail", {}, [projectId], (resp) => {
+      if (resp.code === 0) {
+        const rawIssues = resp.data?.issues || []
+        const sorted = [...rawIssues].sort((a, b) => {
+          const getStatusOrder = (s?: string) => (s === "open" ? 1 : s === "completed" ? 2 : s === "closed" ? 3 : 4)
+          const d = getStatusOrder(a.status) - getStatusOrder(b.status)
+          if (d !== 0) return d
+          const pA = a.priority ?? 999
+          const pB = b.priority ?? 999
+          if (pA !== pB) return pA - pB
+          return (b.created_at ?? 0) - (a.created_at ?? 0)
+        })
+        setIssues(sorted)
+      } else {
+        toast.error(resp.message || "获取项目需求失败")
+      }
+    })
+  }, [projectId])
+
+  const handleViewIssue = (issue: DomainProjectIssue) => {
+    setViewingIssue(issue)
+    setViewIssueDialogOpen(true)
+  }
+
+  useEffect(() => {
+    if (projectId) {
+      setIssues([])
+      fetchProjectIssues()
+    }
+  }, [projectId, fetchProjectIssues])
+
+  return (
+    <div className="flex flex-col gap-3 h-full">
+      <div className="flex flex-row gap-2 items-center">
+        <Select value={statusFilter} onValueChange={setStatusFilter}>
+          <SelectTrigger className="w-[120px] h-8 text-sm">
+            <SelectValue placeholder="全部状态" />
+          </SelectTrigger>
+          <SelectContent>
+            {STATUS_OPTIONS.map((opt) => (
+              <SelectItem key={opt.value} value={opt.value}>
+                {opt.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <Select value={priorityFilter} onValueChange={setPriorityFilter}>
+          <SelectTrigger className="w-[120px] h-8 text-sm">
+            <SelectValue placeholder="全部优先级" />
+          </SelectTrigger>
+          <SelectContent>
+            {PRIORITY_OPTIONS.map((opt) => (
+              <SelectItem key={opt.value} value={opt.value}>
+                {opt.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <Button variant="default" size="sm" className="ml-auto" onClick={() => setIsCreateIssueDialogOpen(true)}>
+          <IconPlus />
+          创建需求
+        </Button>
+      </div>
+      <ProjectIssueList
+        issues={filteredIssues}
+        projectId={projectId}
+        project={project}
+        onViewIssue={handleViewIssue}
+        onTaskCreated={onTaskCreated}
+      />
+      <CreateIssueDialog
+        open={isCreateIssueDialogOpen}
+        onOpenChange={setIsCreateIssueDialogOpen}
+        projectId={projectId}
+        onSuccess={fetchProjectIssues}
+      />
+      <ViewIssueDialog
+        open={viewIssueDialogOpen}
+        onOpenChange={setViewIssueDialogOpen}
+        issue={viewingIssue}
+        projectId={projectId}
+        project={project}
+        onSuccess={fetchProjectIssues}
+        onTaskCreated={onTaskCreated}
+      />
+    </div>
+  )
+}
diff --git a/frontend/src/pages/console/user/project/overview/tasks-tab.tsx b/frontend/src/pages/console/user/project/overview/tasks-tab.tsx
new file mode 100644
index 00000000..1068a056
--- /dev/null
+++ b/frontend/src/pages/console/user/project/overview/tasks-tab.tsx
@@ -0,0 +1,206 @@
+import { useCallback, useEffect, useRef, useState } from "react"
+import { useNavigate } from "react-router-dom"
+import { type DomainProjectTask } from "@/api/Api"
+import { apiRequest } from "@/utils/requestUtils"
+import { toast } from "sonner"
+import { Badge } from "@/components/ui/badge"
+import { HoverCard, HoverCardTrigger } from "@/components/ui/hover-card"
+import { Item, ItemContent, ItemDescription, ItemFooter, ItemTitle } from "@/components/ui/item"
+import { Spinner } from "@/components/ui/spinner"
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/components/ui/empty"
+import { IconListDetails, IconCircleCheck, IconAlertTriangle } from "@tabler/icons-react"
+import { cn } from "@/lib/utils"
+import { getRepoNameFromUrl, renderHoverCardContent, stripMarkdown } from "@/utils/common"
+import dayjs from "dayjs"
+
+const TASKS_PAGE_SIZE = 24
+
+const formatTokens = (tokens?: number) => {
+  if (!tokens) return ""
+  if (tokens >= 1000000) return `${(tokens / 1000000).toFixed(1)}M`
+  if (tokens >= 1000) return `${(tokens / 1000).toFixed(1)}K`
+  return tokens.toString()
+}
+
+interface ProjectOverviewTasksTabProps {
+  projectId: string
+  refreshKey?: number
+}
+
+export default function ProjectOverviewTasksTab({ projectId, refreshKey }: ProjectOverviewTasksTabProps) {
+  const navigate = useNavigate()
+  const [tasks, setTasks] = useState<DomainProjectTask[]>([])
+  const [tasksPage, setTasksPage] = useState(1)
+  const [tasksHasMore, setTasksHasMore] = useState(true)
+  const [tasksLoading, setTasksLoading] = useState(false)
+  const [tasksInitialLoading, setTasksInitialLoading] = useState(true)
+  const loadMoreRef = useRef<HTMLDivElement>(null)
+  const tasksLoadingRef = useRef(false)
+
+  const fetchTasks = useCallback((pageNum: number, append: boolean) => {
+    if (!projectId || tasksLoadingRef.current) return
+    tasksLoadingRef.current = true
+    setTasksLoading(true)
+    const reset = () => {
+      tasksLoadingRef.current = false
+      setTasksLoading(false)
+    }
+    apiRequest("v1UsersTasksList", { project_id: projectId, page: pageNum, size: TASKS_PAGE_SIZE }, [], (resp) => {
+      if (resp.code === 0) {
+        const newTasks = resp.data?.tasks || []
+        setTasks((prev) => (append ? [...prev, ...newTasks] : newTasks))
+        setTasksHasMore(newTasks.length >= TASKS_PAGE_SIZE)
+        setTasksPage(pageNum)
+      } else {
+        toast.error("获取任务列表失败: " + resp.message)
+      }
+      reset()
+      setTasksInitialLoading(false)
+    }, () => {
+      reset()
+      setTasksInitialLoading(false)
+    })
+  }, [projectId])
+
+  const loadMoreTasks = useCallback(() => {
+    if (!tasksLoading && tasksHasMore) fetchTasks(tasksPage + 1, true)
+  }, [tasksLoading, tasksHasMore, tasksPage, fetchTasks])
+
+  useEffect(() => {
+    if (projectId) {
+      setTasks([])
+      setTasksPage(1)
+      setTasksHasMore(true)
+      setTasksInitialLoading(true)
+      fetchTasks(1, false)
+    }
+  }, [projectId, refreshKey, fetchTasks])
+
+  useEffect(() => {
+    const el = loadMoreRef.current
+    if (!el || !projectId) return
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting && tasksHasMore && !tasksLoading) loadMoreTasks()
+      },
+      { rootMargin: "200px" }
+    )
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [tasksHasMore, tasksLoading, loadMoreTasks, projectId])
+
+  if (tasksInitialLoading && tasks.length === 0) {
+    return (
+      <div className="flex-1 min-h-0 flex items-center justify-center">
+        <Spinner className="size-8" />
+      </div>
+    )
+  }
+
+  if (tasks.length === 0) {
+    return (
+      <div className="flex-1 min-h-0 flex flex-col">
+        <Empty className="border flex-1">
+          <EmptyHeader>
+            <EmptyMedia variant="icon">
+              <IconListDetails />
+            </EmptyMedia>
+            <EmptyTitle>暂无任务</EmptyTitle>
+            <EmptyDescription>该项目下还没有创建任何任务</EmptyDescription>
+          </EmptyHeader>
+        </Empty>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col gap-4 flex-1 min-h-0 overflow-auto">
+      <div className="grid grid-cols-[repeat(auto-fill,minmax(350px,1fr))] gap-4 w-full">
+        {tasks.map((task) => (
+          <Item variant="outline" key={task.id} className="group hover:border-primary/50">
+            <ItemContent>
+              <HoverCard>
+                <HoverCardTrigger asChild>
+                  <ItemTitle
+                    className="font-normal whitespace-normal line-clamp-1 break-all hover:underline group-hover:text-primary cursor-pointer"
+                    onClick={() => navigate(`/console/task/${task.id}`)}
+                  >
+                    {task.summary || stripMarkdown(task.content)}
+                  </ItemTitle>
+                </HoverCardTrigger>
+                {renderHoverCardContent([
+                  { title: "任务名称", content: task.summary || "" },
+                  { title: "任务内容", content: task.content || "" },
+                  { title: "任务状态", content: task.status || "" },
+                  { title: "任务类型", content: `${task.type}/${task.sub_type}` || "" },
+                  task.repo_url ? { title: "代码仓库", content: task.repo_url } : null,
+                  task.repo_filename ? { title: "代码文件", content: task.repo_filename } : null,
+                  task.repo_url ? { title: "仓库分支", content: task.branch || "" } : null,
+                  { title: "开发工具", content: task.cli_name || "" },
+                  { title: "大模型", content: task.model?.model || "" },
+                  {
+                    title: "创建时间",
+                    content: dayjs.unix(task.created_at as number).format("YYYY-MM-DD HH:mm:ss"),
+                  },
+                ])}
+              </HoverCard>
+              <ItemDescription className="whitespace-normal line-clamp-1 break-all">
+                {getRepoNameFromUrl(task?.repo_url || "") || task.repo_filename || "-"}
+              </ItemDescription>
+            </ItemContent>
+            <ItemFooter className="flex flex-row gap-2 justify-between border-t pt-3 text-xs text-muted-foreground">
+              <div className="flex flex-row gap-2">
+                <Badge
+                  variant="outline"
+                  className={cn(
+                    task.status === "processing" || task.status === "pending" ? "" : "text-muted-foreground"
+                  )}
+                >
+                  {task.status === "finished" && (
+                    <>
+                      <IconCircleCheck />
+                      任务完成
+                    </>
+                  )}
+                  {task.status === "error" && (
+                    <>
+                      <IconAlertTriangle />
+                      执行失败
+                    </>
+                  )}
+                  {task.status === "pending" && (
+                    <>
+                      <Spinner />
+                      等待执行
+                    </>
+                  )}
+                  {task.status === "processing" && (
+                    <>
+                      <Spinner />
+                      正在执行
+                    </>
+                  )}
+                </Badge>
+                {task.stats?.total_tokens ? (
+                  <Badge variant="outline" className="text-muted-foreground">
+                    {formatTokens(task.stats.total_tokens)} tokens
+                  </Badge>
+                ) : null}
+              </div>
+              {dayjs.unix(task.created_at as number).fromNow()}
+            </ItemFooter>
+          </Item>
+        ))}
+      </div>
+      <div ref={loadMoreRef} className="flex justify-center py-8">
+        {tasksLoading && <Spinner className="size-6" />}
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/pages/console/user/project/tasks.tsx b/frontend/src/pages/console/user/project/tasks.tsx
deleted file mode 100644
index 38c57490..00000000
--- a/frontend/src/pages/console/user/project/tasks.tsx
+++ /dev/null
@@ -1,167 +0,0 @@
-import { ConstsTaskType, type DomainProjectTask } from "@/api/Api";
-import { Badge } from "@/components/ui/badge";
-import { HoverCard, HoverCardTrigger } from "@/components/ui/hover-card";
-import { Item, ItemContent, ItemDescription, ItemFooter, ItemTitle } from "@/components/ui/item";
-import { Spinner } from "@/components/ui/spinner";
-import { cn } from "@/lib/utils";
-import { getRepoNameFromUrl, renderHoverCardContent, stripMarkdown } from "@/utils/common";
-import { apiRequest } from "@/utils/requestUtils";
-import { IconAlertTriangle, IconCircleCheck, IconListDetails } from "@tabler/icons-react";
-import dayjs from "dayjs";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { useParams } from "react-router-dom";
-import { toast } from "sonner";
-import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty";
-
-const PAGE_SIZE = 24;
-
-export default function ProjectTasksPage() {
-  const { projectId = '' } = useParams<{ projectId: string }>()
-  const [tasks, setTasks] = useState<DomainProjectTask[]>([])
-  const [page, setPage] = useState(1)
-  const [hasMore, setHasMore] = useState(true)
-  const [loading, setLoading] = useState(false)
-  const [initialLoading, setInitialLoading] = useState(true)
-  const loadMoreRef = useRef<HTMLDivElement>(null)
-  const loadingRef = useRef(false)
-
-  const fetchTasks = useCallback((pageNum: number, append: boolean) => {
-    if (!projectId || loadingRef.current) return
-    loadingRef.current = true
-    setLoading(true)
-    const resetLoading = () => {
-      loadingRef.current = false
-      setLoading(false)
-    }
-    apiRequest('v1UsersTasksList', { project_id: projectId, page: pageNum, size: PAGE_SIZE }, [], (resp) => {
-      if (resp.code === 0) {
-        const newTasks = resp.data?.tasks || []
-        setTasks(prev => append ? [...prev, ...newTasks] : newTasks)
-        setHasMore(newTasks.length >= PAGE_SIZE)
-        setPage(pageNum)
-      } else {
-        toast.error("获取任务列表失败: " + resp.message)
-      }
-      resetLoading()
-      setInitialLoading(false)
-    }, () => {
-      resetLoading()
-      setInitialLoading(false)
-    })
-  }, [projectId])
-
-  const loadMore = useCallback(() => {
-    if (!loading && hasMore) {
-      fetchTasks(page + 1, true)
-    }
-  }, [loading, hasMore, page, fetchTasks])
-
-  useEffect(() => {
-    if (projectId) {
-      setTasks([])
-      setInitialLoading(true)
-      setPage(1)
-      setHasMore(true)
-      fetchTasks(1, false)
-    }
-  }, [projectId, fetchTasks])
-
-  useEffect(() => {
-    const el = loadMoreRef.current
-    if (!el || !projectId) return
-    const observer = new IntersectionObserver(
-      (entries) => {
-        if (entries[0]?.isIntersecting && hasMore && !loading) {
-          loadMore()
-        }
-      },
-      { rootMargin: "200px" }
-    )
-    observer.observe(el)
-    return () => observer.disconnect()
-  }, [hasMore, loading, loadMore, projectId])
-
-  if (initialLoading && tasks.length === 0) {
-    return (
-      <div className="flex items-center justify-center h-64">
-        <Spinner className="size-8" />
-      </div>
-    )
-  }
-
-  if (tasks.length === 0) {
-    return (
-      <Empty className="border h-full">
-        <EmptyHeader>
-          <EmptyMedia variant="icon">
-            <IconListDetails className="" />
-          </EmptyMedia>
-          <EmptyTitle>暂无任务</EmptyTitle>
-          <EmptyDescription>
-            该项目下还没有创建任何任务
-          </EmptyDescription>
-        </EmptyHeader>
-      </Empty>
-    )
-  }
-
-  return (
-    <div className="flex flex-col gap-4">
-      <div className="flex items-center justify-between">
-        <h2 className="text-lg font-semibold">项目任务列表</h2>
-        <span className="text-sm text-muted-foreground">共 {tasks.length} 个任务</span>
-      </div>
-      <div className="grid grid-cols-[repeat(auto-fill,minmax(350px,1fr))] gap-4 w-full">
-        {tasks?.map((task) => (
-          <Item variant={"outline"} key={task.id} className="group hover:border-primary/50">
-            <ItemContent>
-              <HoverCard>
-                <HoverCardTrigger asChild>
-                  <ItemTitle className="font-normal whitespace-normal line-clamp-1 break-all hover:underline group-hover:text-primary cursor-pointer" onClick={() => {
-                    window.open(`/console/task/view?taskId=${task.id}&projectId=${projectId}`, "_blank")
-                  }}>
-                    {task.summary || stripMarkdown(task.content)}
-                  </ItemTitle>
-                </HoverCardTrigger>
-                {renderHoverCardContent([
-                  {title: "任务名称", content: task.summary || ""},
-                  {title: "任务内容", content: task.content || ""},
-                  {title: "任务状态", content: task.status || ""},
-                  {title: "任务类型", content: `${task.type}/${task.sub_type}` || ""},
-                  task.repo_url ? {title: "代码仓库", content: task.repo_url} : null,
-                  task.repo_filename ? {title: "代码文件", content: task.repo_filename} : null,
-                  task.repo_url ? {title: "仓库分支", content: task.branch || ""} : null,
-                  {title: "开发工具", content: task.cli_name || ""},
-                  {title: "大模型", content: task.model?.model || ""},
-                  {title: "创建时间", content: dayjs.unix(task.created_at as number).format("YYYY-MM-DD HH:mm:ss")},
-                ])}
-              </HoverCard>
-              <ItemDescription className="whitespace-normal line-clamp-1 break-all">
-                {getRepoNameFromUrl(task?.repo_url || '') || task.repo_filename || '-'}
-              </ItemDescription>
-            </ItemContent>
-            <ItemFooter className="flex flex-row gap-2 justify-between border-t pt-3 text-xs text-muted-foreground">
-              <div className="flex flex-row gap-2">
-                <Badge variant="outline" className={cn(task.status === "processing" || task.status === "pending" ? "" : "text-muted-foreground")} >
-                  {task.status === "finished" && <><IconCircleCheck />任务完成</>}
-                  {task.status === "error" && <><IconAlertTriangle />执行失败</>}
-                  {task.status === "pending" && <><Spinner />等待执行</>}
-                  {task.status === "processing" && <><Spinner />正在执行</>}
-                </Badge>
-                <Badge variant="outline" className={cn(task.status === "processing" || task.status === "pending" ? "" : "text-muted-foreground")}>
-                  {task?.type === ConstsTaskType.TaskTypeDevelop && "开发任务"}
-                  {task?.type === ConstsTaskType.TaskTypeDesign && "设计任务"}
-                  {task?.type === ConstsTaskType.TaskTypeReview && "审查任务"}
-                </Badge>
-              </div>
-            {dayjs.unix(task.created_at as number).fromNow()}
-          </ItemFooter>
-        </Item>
-        ))}
-      </div>
-      <div ref={loadMoreRef} className="flex justify-center py-8">
-        {loading && <Spinner className="size-6" />}
-      </div>
-    </div>
-  )
-}
diff --git a/frontend/src/pages/console/user/settings.tsx b/frontend/src/pages/console/user/settings.tsx
deleted file mode 100644
index 431b6476..00000000
--- a/frontend/src/pages/console/user/settings.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import Images from "@/components/console/settings/images"
-import Models from "@/components/console/settings/models"
-import Hosts from "@/components/console/settings/hosts"
-import Identities from "@/components/console/settings/identities"
-import VmsPage from "@/components/console/settings/vms"
-import Notifications from "@/components/console/settings/notifications"
-import { useGitHubSetupCallback } from "@/hooks/useGitHubSetupCallback"
-import { useCommonData } from "@/components/console/data-provider"
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog"
-
-export default function SettingsPage() {
-  const { reloadIdentities } = useCommonData()
-
-  const { result, dismiss } = useGitHubSetupCallback(() => {
-    reloadIdentities()
-  })
-
-  return (
-    <div className="flex flex-col gap-4">
-      <Identities />
-      <Models />
-      <Images />
-      <Hosts />
-      <VmsPage />
-      <Notifications />
-
-      <AlertDialog open={result !== null} onOpenChange={(open) => { if (!open) dismiss() }}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>
-              {result?.type === 'success' ? 'GitHub App 安装成功' : 'GitHub App 安装失败'}
-            </AlertDialogTitle>
-            <AlertDialogDescription>
-              {result?.type === 'success'
-                ? (result.accountLogin
-                    ? `已关联到账户 ${result.accountLogin}`
-                    : 'GitHub App 已成功安装')
-                : `安装失败 (${result?.reason}): ${result?.message}`
-              }
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogAction onClick={dismiss}>确定</AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </div>
-  )
-}
diff --git a/frontend/src/pages/console/user/task/task-detail.tsx b/frontend/src/pages/console/user/task/task-detail.tsx
new file mode 100644
index 00000000..539a5d14
--- /dev/null
+++ b/frontend/src/pages/console/user/task/task-detail.tsx
@@ -0,0 +1,389 @@
+import { ConstsTaskStatus, type DomainProjectTask } from "@/api/Api"
+import { useBreadcrumbTask } from "@/components/console/breadcrumb-task-context"
+import { TaskChatPanel } from "@/components/console/task/chat-panel"
+import { TaskFileExplorer } from "@/components/console/task/task-file-explorer"
+import { TaskTerminalPanel } from "@/components/console/task/task-terminal-panel"
+import type { MessageType } from "@/components/console/task/message"
+import { TaskWebSocketManager, type AvailableCommands, type RepoFileChange, type TaskPlan, type TaskStreamStatus, type TaskWebSocketState } from "@/components/console/task/ws-manager"
+import { TaskChangesPanel } from "@/components/console/task/task-changes-panel"
+import { TaskPreviewPanel } from "@/components/console/task/task-preview-panel"
+import { type PanelType } from "@/components/console/task/task-chat-section"
+import { VmRenewDialog } from "@/components/console/vm/vm-renew"
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable"
+import { Button } from "@/components/ui/button"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
+import { cn } from "@/lib/utils"
+import { apiRequest } from "@/utils/requestUtils"
+import { IconClockHour4, IconDeviceDesktop, IconFile, IconGitBranch, IconTerminal2 } from "@tabler/icons-react"
+import React from "react"
+import { useParams } from "react-router-dom"
+import { toast } from "sonner"
+import { TypesVirtualMachineStatus } from "@/api/Api"
+
+function PanelButton({
+  active,
+  disabled,
+  icon: Icon,
+  label,
+  onClick,
+  urgent,
+}: {
+  active: boolean
+  disabled: boolean
+  icon: React.ComponentType<{ className?: string }>
+  label: string
+  onClick: () => void
+  urgent?: boolean
+}) {
+  const button = (
+    <Button
+      variant="ghost"
+      size="sm"
+      className={cn("h-6 min-w-0 px-2 gap-1 text-xs font-normal", active && "text-primary bg-accent", urgent && "animate-text-flash")}
+      onClick={onClick}
+      disabled={disabled}
+    >
+      <Icon className="size-3.5" />
+      {label}
+    </Button>
+  )
+  if (disabled) {
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span className="inline-flex">{button}</span>
+        </TooltipTrigger>
+        <TooltipContent>任务已结束，无法查看</TooltipContent>
+      </Tooltip>
+    )
+  }
+  return button
+}
+
+const formatTokens = (tokens?: number) => {
+  if (tokens === undefined || tokens === null) return ""
+  if (tokens >= 1000000) return `${(tokens / 1000000).toFixed(1)}M`
+  if (tokens >= 1000) return `${(tokens / 1000).toFixed(1)}K`
+  return tokens.toString()
+}
+
+export default function TaskDetailPage() {
+  const { taskId } = useParams()
+  const { setTaskName } = useBreadcrumbTask() ?? {}
+  const [task, setTask] = React.useState<DomainProjectTask | null>(null)
+  const [activePanel, setActivePanel] = React.useState<PanelType | null>(null)
+  const [fileChangesMap, setFileChangesMap] = React.useState<Map<string, RepoFileChange>>(new Map())
+  const [changedPaths, setChangedPaths] = React.useState<string[]>([])
+  const [streamStatus, setStreamStatus] = React.useState<TaskStreamStatus>("inited")
+  const [messages, setMessages] = React.useState<MessageType[]>([])
+  const [plan, setPlan] = React.useState<TaskPlan | null>(null)
+  const [availableCommands, setAvailableCommands] = React.useState<AvailableCommands | null>(null)
+  const [sending, setSending] = React.useState(false)
+  const [queueSize, setQueueSize] = React.useState(0)
+  const taskManager = React.useRef<TaskWebSocketManager | null>(null)
+  const connectedRef = React.useRef(false)
+  const planVersionRef = React.useRef<number | undefined>(undefined)
+  const availableCommandsVersionRef = React.useRef<number | undefined>(undefined)
+  const fileChangesVersionRef = React.useRef<number | undefined>(undefined)
+  const chatScrollRef = React.useRef<HTMLDivElement>(null)
+  const chatInputRef = React.useRef<HTMLDivElement>(null)
+  const [, setInputTargetReady] = React.useState(0)
+  const chatInputRefCallback = React.useCallback((el: HTMLDivElement | null) => {
+    (chatInputRef as React.MutableRefObject<HTMLDivElement | null>).current = el
+    if (el) setInputTargetReady((c) => c + 1)
+  }, [])
+
+  const vmOnline = task?.virtualmachine?.status === TypesVirtualMachineStatus.VirtualMachineStatusOnline
+  const envid = task?.virtualmachine?.id
+
+  // taskId 变化时重置所有状态，保证页面可重入
+  React.useEffect(() => {
+    if (!taskId) return
+    setTask(null)
+    setActivePanel(null)
+    setFileChangesMap(new Map())
+    setChangedPaths([])
+    setStreamStatus("inited")
+    setMessages([])
+    setPlan(null)
+    setAvailableCommands(null)
+    setSending(false)
+    setQueueSize(0)
+    setRenewDialogOpen(false)
+    planVersionRef.current = undefined
+    availableCommandsVersionRef.current = undefined
+    fileChangesVersionRef.current = undefined
+  }, [taskId])
+
+  const fetchTaskDetail = React.useCallback(async () => {
+    if (!taskId) return null
+    let result: DomainProjectTask | null = null
+    await apiRequest("v1UsersTasksDetail", {}, [taskId], (resp) => {
+      if (resp.code === 0) {
+        result = resp.data
+        setTask(resp.data)
+      } else {
+        toast.error(resp.message || "获取任务详情失败")
+      }
+    })
+    return result
+  }, [taskId])
+
+  const fetchFileChanges = React.useCallback(() => {
+    taskManager.current?.getFileChanges().then((changes: RepoFileChange[] | null) => {
+      if (changes === null) return
+      const newMap = new Map<string, RepoFileChange>()
+      const newPaths: string[] = []
+      changes.forEach((change) => {
+        newMap.set(change.path, change)
+        newPaths.push(change.path)
+      })
+      setFileChangesMap(newMap)
+      setChangedPaths(newPaths)
+    })
+  }, [])
+
+  const updateTaskState = (state: TaskWebSocketState) => {
+    setStreamStatus(state.status)
+    setMessages([...state.messages])
+    setSending(state.sending)
+    setQueueSize(state.queueSize)
+    if (state.plan.version !== planVersionRef.current) {
+      planVersionRef.current = state.plan.version
+      setPlan(state.plan)
+    }
+    if (state.availableCommands.version !== availableCommandsVersionRef.current) {
+      availableCommandsVersionRef.current = state.availableCommands.version
+      setAvailableCommands(state.availableCommands)
+    }
+    if (state.fileChanges.version !== fileChangesVersionRef.current) {
+      fileChangesVersionRef.current = state.fileChanges.version
+      fetchFileChanges()
+    }
+  }
+
+  const sendUserInput = React.useCallback((content: string) => {
+    taskManager.current?.sendUserInput(content)
+  }, [])
+
+  const sendCancelCommand = React.useCallback(() => {
+    taskManager.current?.sendCancelCommand()
+  }, [])
+
+  const sendResetSession = React.useCallback(() => {
+    taskManager.current?.sendResetSession()
+  }, [])
+
+  const sendReloadSession = React.useCallback(() => {
+    taskManager.current?.sendReloadSession()
+  }, [])
+
+  React.useEffect(() => {
+    if (!taskId) return
+    fetchTaskDetail()
+  }, [taskId, fetchTaskDetail])
+
+  React.useEffect(() => {
+    if (!setTaskName) return
+    if (task) {
+      const name = task.summary || task.content
+      setTaskName(name?.trim() || "未知任务名称")
+    }
+    return () => setTaskName?.(null)
+  }, [task, setTaskName])
+
+  React.useEffect(() => {
+    if (!taskId) return
+    connectedRef.current = false
+    const manager = new TaskWebSocketManager(taskId, updateTaskState, false, false)
+    taskManager.current = manager
+    return () => {
+      manager.disconnect()
+      taskManager.current = null
+      connectedRef.current = false
+    }
+  }, [taskId])
+
+  React.useEffect(() => {
+    if (!taskManager.current || connectedRef.current) return
+    if (task?.virtualmachine?.status !== undefined && task?.virtualmachine?.status !== TypesVirtualMachineStatus.VirtualMachineStatusPending) {
+      taskManager.current.connect()
+      connectedRef.current = true
+    }
+  }, [task?.virtualmachine?.status])
+
+  React.useEffect(() => {
+    if (vmOnline && (streamStatus === "waiting" || streamStatus === "executing")) {
+      fetchFileChanges()
+    }
+  }, [vmOnline, streamStatus, fetchFileChanges])
+
+  const hasPanel = activePanel !== null
+  const togglePanel = (panel: PanelType) => {
+    setActivePanel((prev) => (prev === panel ? null : panel))
+  }
+
+  const panelsDisabled = task?.status !== ConstsTaskStatus.TaskStatusProcessing
+  const [renewDialogOpen, setRenewDialogOpen] = React.useState(false)
+
+  const chatSection = (
+    <div className={cn("flex flex-col h-full min-h-0 gap-2", hasPanel ? "max-w-full" : "")}>
+      <div ref={chatScrollRef} className="flex-1 min-h-0 overflow-y-auto min-w-0">
+        <div className={cn("min-h-full", hasPanel ? "w-full" : "mx-auto max-w-[800px]")}>
+          <TaskChatPanel
+            scrollContainerRef={chatScrollRef}
+            inputPortalTargetRef={chatInputRef}
+            messages={messages}
+            cli={task?.cli_name}
+            availableCommands={availableCommands}
+            streamStatus={streamStatus}
+            disabled={!vmOnline}
+            sending={sending}
+            plan={plan}
+            sendUserInput={sendUserInput}
+            sendCancelCommand={sendCancelCommand}
+            sendResetSession={sendResetSession}
+            sendReloadSession={sendReloadSession}
+            queueSize={queueSize}
+            fileChanges={changedPaths}
+            fileChangesMap={fileChangesMap}
+            taskManager={taskManager.current}
+          />
+        </div>
+      </div>
+      <div ref={chatInputRefCallback} className={cn("shrink-0 bg-background w-full", hasPanel ? "max-w-full" : "mx-auto max-w-[800px]")} />
+      <div className="shrink-0 bg-background">
+        <div className={cn("flex flex-col gap-2", hasPanel ? "max-w-full" : "mx-auto max-w-[800px]")}>
+          <div className="flex items-center justify-between gap-2">
+            <div className="flex items-center gap-0.5">
+              <PanelButton
+                active={activePanel === "files"}
+                disabled={panelsDisabled}
+                icon={IconFile}
+                label="文件"
+                onClick={() => togglePanel("files")}
+              />
+              <PanelButton
+                active={activePanel === "terminal"}
+                disabled={panelsDisabled}
+                icon={IconTerminal2}
+                label="终端"
+                onClick={() => togglePanel("terminal")}
+              />
+              <PanelButton
+                active={activePanel === "changes"}
+                disabled={panelsDisabled}
+                icon={IconGitBranch}
+                label={`修改${changedPaths.length > 0 ? `(${changedPaths.length})` : ""}`}
+                onClick={() => togglePanel("changes")}
+              />
+              <PanelButton
+                active={activePanel === "preview"}
+                disabled={panelsDisabled}
+                icon={IconDeviceDesktop}
+                label={`预览${(task?.virtualmachine?.ports?.length ?? 0) > 0 ? `(${task?.virtualmachine?.ports?.length})` : ""}`}
+                onClick={() => togglePanel("preview")}
+              />
+              <PanelButton
+                active={false}
+                disabled={!vmOnline}
+                icon={IconClockHour4}
+                label="续期"
+                onClick={() => setRenewDialogOpen(true)}
+                urgent={vmOnline && (task?.virtualmachine?.life_time_seconds ?? Infinity) < 3600 && (task?.virtualmachine?.life_time_seconds ?? 0) !== 0}
+              />
+            </div>
+            {(task?.stats?.input_tokens != null || task?.stats?.output_tokens != null || task?.stats?.total_tokens != null) ? (
+              <span className="text-xs text-muted-foreground shrink-0">
+                <span className="sm:hidden">
+                  {formatTokens(task?.stats?.total_tokens ?? ((task?.stats?.input_tokens ?? 0) + (task?.stats?.output_tokens ?? 0)))} tokens
+                </span>
+                <span className="hidden sm:inline">
+                  输入 {formatTokens(task?.stats?.input_tokens) || "-"} / 输出 {formatTokens(task?.stats?.output_tokens) || "-"} tokens
+                </span>
+              </span>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+
+  if (!hasPanel) {
+    return (
+      <div className="flex flex-col h-full min-h-0">
+        {chatSection}
+        <VmRenewDialog
+          open={renewDialogOpen}
+          onOpenChange={setRenewDialogOpen}
+          hostId={task?.virtualmachine?.host?.id}
+          vmId={task?.virtualmachine?.id}
+          onSuccess={fetchTaskDetail}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col h-full min-h-0">
+      <ResizablePanelGroup direction="horizontal" className="gap-2">
+        <ResizablePanel defaultSize={50} minSize={30} className="min-w-0">
+          {chatSection}
+        </ResizablePanel>
+        <ResizableHandle withHandle className="shrink-0" />
+        <ResizablePanel defaultSize={50} minSize={30} className="min-w-0">
+          <div className="h-full overflow-hidden flex flex-col">
+            {activePanel === "files" && (
+              <div className="flex-1 min-h-0 overflow-hidden">
+                <TaskFileExplorer
+                  disabled={!vmOnline}
+                  streamStatus={streamStatus}
+                  fileChangesMap={fileChangesMap}
+                  changedPaths={changedPaths}
+                  taskManager={taskManager.current}
+                  onRefresh={fetchFileChanges}
+                  envid={envid}
+                />
+              </div>
+            )}
+            {activePanel === "terminal" && (
+              <div className="flex-1 min-h-0 overflow-hidden">
+                <div className="h-full w-full border rounded-md overflow-hidden">
+                  <TaskTerminalPanel envid={envid} disabled={!vmOnline} />
+                </div>
+              </div>
+            )}
+            {activePanel === "changes" && (
+              <div className="flex-1 min-h-0 overflow-hidden">
+                <TaskChangesPanel
+                  fileChanges={changedPaths}
+                  fileChangesMap={fileChangesMap}
+                  taskManager={taskManager.current}
+                  disabled={!vmOnline}
+                />
+              </div>
+            )}
+            {activePanel === "preview" && (
+              <div className="flex-1 min-h-0 overflow-hidden">
+                <TaskPreviewPanel
+                  ports={task?.virtualmachine?.ports}
+                  hostId={task?.virtualmachine?.host?.id}
+                  vmId={task?.virtualmachine?.id}
+                  onSuccess={fetchTaskDetail}
+                  disabled={!vmOnline}
+                />
+              </div>
+            )}
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+      <VmRenewDialog
+        open={renewDialogOpen}
+        onOpenChange={setRenewDialogOpen}
+        hostId={task?.virtualmachine?.host?.id}
+        vmId={task?.virtualmachine?.id}
+        onSuccess={fetchTaskDetail}
+      />
+    </div>
+  )
+}
diff --git a/frontend/src/pages/console/user/task/task-dev.tsx b/frontend/src/pages/console/user/task/task-dev.tsx
index f78f3915..0748130d 100644
--- a/frontend/src/pages/console/user/task/task-dev.tsx
+++ b/frontend/src/pages/console/user/task/task-dev.tsx
@@ -29,7 +29,6 @@ export default function TaskDevelopPage() {
   const [ showTerminalPanel, setShowTerminalPanel] = React.useState(false)
   const taskManager = React.useRef<TaskWebSocketManager | null>(null)
   const connectedRef = React.useRef<boolean>(false)
-  const [thinkingMessage, setThinkingMessage] = React.useState("")
   const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)
   const [renewDialogOpen, setRenewDialogOpen] = React.useState(false)
   const [availableCommands, setAvailableCommands] = React.useState<AvailableCommands | null>(null)
@@ -49,6 +48,13 @@ export default function TaskDevelopPage() {
   const [queueSize, setQueueSize] = React.useState(0)
   // 文件详情面板 ref
   const taskDetailPanelRef = React.useRef<TaskDetailPanelRef>(null)
+  const chatScrollRef = React.useRef<HTMLDivElement>(null)
+  const chatInputRef = React.useRef<HTMLDivElement>(null)
+  const [, setChatInputReady] = React.useState(0)
+  const chatInputRefCallback = React.useCallback((el: HTMLDivElement | null) => {
+    (chatInputRef as React.MutableRefObject<HTMLDivElement | null>).current = el
+    if (el) setChatInputReady((c) => c + 1)
+  }, [])
   
   // 在线预览对话框状态
   const [portForwardDialogOpen, setPortForwardDialogOpen] = React.useState(false)
@@ -177,7 +183,6 @@ export default function TaskDevelopPage() {
     setStreamStatus(state.status)
     setMessages([...state.messages])
     setSending(state.sending)
-    setThinkingMessage(state.thinkingMessage)
     setQueueSize(state.queueSize)
     // 使用 ref 比较版本号，避免闭包陷阱
     if (state.plan.version !== planVersionRef.current) {
@@ -425,16 +430,18 @@ export default function TaskDevelopPage() {
         </ResizablePanel>}
         {(showTerminalPanel || showFilesPanel) && <ResizableHandle className="invisible hidden sm:block" />}
         <ResizablePanel defaultSize={40} minSize={35} style={{overflow: 'visible'}}>
-          <div className="w-full h-full flex justify-center">
-            <div className="max-w-[800px] w-full">
-              <TaskChatPanel 
+          <div className="w-full h-full flex flex-col min-w-0">
+            <div ref={chatScrollRef} className="flex-1 min-h-0 overflow-y-auto flex justify-center">
+              <div className="max-w-[800px] w-full min-h-full">
+                <TaskChatPanel 
+            scrollContainerRef={chatScrollRef}
+            inputPortalTargetRef={chatInputRef}
             messages={messages} 
             cli={task?.cli_name}
             availableCommands={availableCommands}
             streamStatus={streamStatus}
             disabled={task?.virtualmachine?.status !== TypesVirtualMachineStatus.VirtualMachineStatusOnline} 
             sending={sending}
-            thinkingMessage={thinkingMessage}
             plan={plan}
             sendUserInput={sendUserInput}
             sendCancelCommand={sendCancelCommand}
@@ -445,6 +452,10 @@ export default function TaskDevelopPage() {
             fileChangesMap={fileChangesMap}
             taskManager={taskManager.current}
             />
+              </div>
+            </div>
+            <div className="shrink-0 w-full flex justify-center">
+              <div ref={chatInputRefCallback} className="max-w-[800px] w-full" />
             </div>
           </div>
         </ResizablePanel>
diff --git a/frontend/src/pages/console/user/task/task-view.tsx b/frontend/src/pages/console/user/task/task-view.tsx
deleted file mode 100644
index f0b5fbc6..00000000
--- a/frontend/src/pages/console/user/task/task-view.tsx
+++ /dev/null
@@ -1,176 +0,0 @@
-import { type DomainProjectTask } from "@/api/Api"
-import { Button } from "@/components/ui/button"
-import { ScrollArea } from "@/components/ui/scroll-area"
-import { Spinner } from "@/components/ui/spinner"
-import { cn } from "@/lib/utils"
-import { stripMarkdown } from "@/utils/common"
-import { apiRequest } from "@/utils/requestUtils"
-import { IconPlus, IconCircleCheck, IconAlertTriangle, IconLoader, IconLayoutSidebar } from "@tabler/icons-react"
-import dayjs from "dayjs"
-import relativeTime from "dayjs/plugin/relativeTime"
-import { useCallback, useEffect, useState } from "react"
-import { useSearchParams } from "react-router-dom"
-import { toast } from "sonner"
-
-dayjs.extend(relativeTime)
-
-const PAGE_SIZE = 500
-
-export default function TaskViewPage() {
-  const [searchParams, setSearchParams] = useSearchParams()
-  const projectId = searchParams.get('projectId') || undefined
-  const [tasks, setTasks] = useState<DomainProjectTask[]>([])
-  const [loading, setLoading] = useState(false)
-  const [selectedTaskId, setSelectedTaskId] = useState<string | null>(searchParams.get('taskId') || null)
-  const [sidebarWidth, setSidebarWidth] = useState<'wide' | 'narrow'>('wide')
-  const [, update] = useState(0)
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      update(v => v + 1)
-    }, 30000)
-    return () => clearInterval(interval)
-  }, [])
-
-  const fetchTasks = useCallback(async () => {
-    setLoading(true)
-    const params: { page: number; size: number; project_id?: string } = { page: 1, size: PAGE_SIZE }
-    if (projectId) params.project_id = projectId
-    await apiRequest('v1UsersTasksList', params, [], (resp) => {
-      if (resp.code === 0) {
-        const fetchedTasks = resp.data?.tasks || []
-        setTasks(fetchedTasks)
-        if (fetchedTasks.length > 0 && !selectedTaskId) {
-          const firstTask = fetchedTasks[0]
-          setSelectedTaskId(firstTask.id)
-          const nextParams = new URLSearchParams({ taskId: firstTask.id })
-          if (projectId) nextParams.set('projectId', projectId)
-          setSearchParams(nextParams, { replace: true })
-        } else if (selectedTaskId) {
-          const foundTask = fetchedTasks.find((t: DomainProjectTask) => t.id === selectedTaskId)
-          if (foundTask) {
-            setTasks(fetchedTasks)
-          }
-        }
-      } else {
-        toast.error("获取任务列表失败: " + resp.message)
-      }
-    })
-    setLoading(false)
-  }, [selectedTaskId, setSearchParams, projectId])
-
-  useEffect(() => {
-    fetchTasks()
-  }, [fetchTasks])
-
-  useEffect(() => {
-    const taskIdFromUrl = searchParams.get('taskId')
-    if (taskIdFromUrl && tasks.length > 0) {
-      setTimeout(() => {
-        const element = document.querySelector(`[data-task-id="${taskIdFromUrl}"]`)
-        element?.scrollIntoView({ behavior: 'smooth', block: 'center' })
-      }, 100)
-    }
-  }, [tasks, searchParams])
-
-  useEffect(() => {
-    if (selectedTaskId) {
-      setTimeout(() => {
-        const element = document.querySelector(`[data-task-id="${selectedTaskId}"]`)
-        element?.scrollIntoView({ behavior: 'smooth', block: 'center' })
-      }, 100)
-    }
-  }, [selectedTaskId])
-
-  return (
-    <div className="flex h-screen overflow-hidden">
-      <div className={cn("border-r flex flex-col h-full bg-muted/30 overflow-hidden transition-all duration-300", sidebarWidth === 'wide' ? 'w-80' : 'w-40')}>
-        <div className="flex p-2 gap-2">
-          <Button 
-            variant="outline" 
-            size="sm"
-            className="flex-1"
-            onClick={() => window.location.href = projectId ? `/console/project/${projectId}/tasks` : '/console/tasks'}
-          >
-            <IconPlus className="w-4 h-4" />
-            {sidebarWidth === 'wide' ? '启动新任务' : '新任务'}
-          </Button>
-          <Button 
-            variant="outline" 
-            size="sm"
-            className="flex-shrink-0"
-            onClick={() => setSidebarWidth(sidebarWidth === 'wide' ? 'narrow' : 'wide')}
-          >
-            <IconLayoutSidebar className="w-4 h-4" />
-          </Button>
-        </div>
-        <ScrollArea className="flex-1 h-0">
-          <div className="p-2 space-y-1">
-            {loading && tasks.length === 0 ? (
-              <div className="flex justify-center py-8">
-                <Spinner className="size-6" />
-              </div>
-            ) : tasks.length === 0 ? (
-              <div className="text-center py-8 text-muted-foreground text-sm">
-                暂无任务
-              </div>
-              ) : (
-              tasks.map((task) => (
-                <div
-                  key={task.id}
-                  data-task-id={task.id}
-                  className={cn(
-                    "cursor-pointer transition-all hover:bg-accent rounded",
-                    selectedTaskId === task.id && "bg-accent text-primary"
-                  )}
-                  onClick={() => {
-                    setSelectedTaskId(task.id)
-                    const nextParams = new URLSearchParams({ taskId: task.id })
-                    if (projectId) nextParams.set('projectId', projectId)
-                    setSearchParams(nextParams)
-                  }}
-                >
-                  <div className={cn(sidebarWidth === 'wide' ? "px-3 py-2" : "px-2 py-2")}>
-                    {sidebarWidth === 'wide' ? (
-                      <div className="flex items-center gap-2 text-sm">
-                        <div className="flex-shrink-0">
-                          {task.status === "finished" && <IconCircleCheck className="w-4 h-4 text-muted-foreground/50" />}
-                          {task.status === "error" && <IconAlertTriangle className="w-4 h-4 text-muted-foreground/50" />}
-                          {(task.status === "pending" || task.status === "processing") && <IconLoader className="w-4 h-4 text-muted-foreground animate-spin" style={{ animationDuration: '3s' }} />}
-                        </div>
-                        <div className={cn("flex-1 line-clamp-1 break-all", selectedTaskId === task.id ? "text-primary" : task.status === "finished" && "text-muted-foreground")}>
-                          {task.summary || stripMarkdown(task.content)}
-                        </div>
-                        <div className="flex-shrink-0 text-xs text-muted-foreground">
-                          {dayjs.unix(task.created_at as number).fromNow()}
-                        </div>
-                      </div>
-                    ) : (
-                      <div className={cn("text-sm line-clamp-1 break-all", selectedTaskId === task.id ? "text-primary" : task.status === "finished" && "text-muted-foreground")}>
-                        {task.summary || stripMarkdown(task.content)}
-                      </div>
-                    )}
-                  </div>
-                </div>
-              ))
-            )}
-          </div>
-        </ScrollArea>
-      </div>
-      <div className="flex-1 flex flex-col h-full">
-        {selectedTaskId ? (
-          <iframe
-            key={selectedTaskId}
-            src={`/console/task/develop/${selectedTaskId}`}
-            className="w-full h-full border-0"
-            title="任务详情"
-          />
-        ) : (
-          <div className="flex items-center justify-center h-full text-muted-foreground">
-            请选择一个任务查看详情
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
diff --git a/frontend/src/pages/console/user/tasks.tsx b/frontend/src/pages/console/user/tasks.tsx
index 39818700..16718e0d 100644
--- a/frontend/src/pages/console/user/tasks.tsx
+++ b/frontend/src/pages/console/user/tasks.tsx
@@ -11,6 +11,8 @@ import { apiRequest } from "@/utils/requestUtils";
 import { IconAlertTriangle, IconCircleCheck } from "@tabler/icons-react";
 import dayjs from "dayjs";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useCommonData } from "@/components/console/data-provider";
 import { toast } from "sonner";
 
 const PAGE_SIZE = 24;
@@ -23,6 +25,8 @@ const formatTokens = (tokens?: number) => {
 }
 
 export default function TasksPage() {
+  const navigate = useNavigate()
+  const { reloadProjects, reloadUnlinkedTasks } = useCommonData()
   const [tasks, setTasks] = useState<DomainProjectTask[]>([])
   const [page, setPage] = useState(1)
   const [hasMore, setHasMore] = useState(true)
@@ -38,7 +42,7 @@ export default function TasksPage() {
       loadingRef.current = false
       setLoading(false)
     }
-    apiRequest('v1UsersTasksList', { page: pageNum, size: PAGE_SIZE }, [], (resp) => {
+    apiRequest('v1UsersTasksList', { page: pageNum, size: PAGE_SIZE, quick_start: true }, [], (resp) => {
       if (resp.code === 0) {
         const newTasks = resp.data?.tasks || []
         setTasks(prev => append ? [...prev, ...newTasks] : newTasks)
@@ -93,7 +97,7 @@ export default function TasksPage() {
     <div className="flex flex-col flex-1 items-center">
       <h1 className="text-4xl pt-30 pb-10">MonkeyCode 智能任务</h1>
       <div className="max-w-[800px] w-full py-10">
-        <TaskInput repos={repos} onTaskCreated={() => { setPage(1); setHasMore(true); fetchTasks(1, false); }} />
+        <TaskInput repos={repos} onTaskCreated={() => { setPage(1); setHasMore(true); fetchTasks(1, false); reloadProjects(); reloadUnlinkedTasks(); }} />
       </div>
       <Separator className="my-4"/>
       <div className="grid grid-cols-[repeat(auto-fill,minmax(350px,1fr))] gap-4 w-full">
@@ -102,9 +106,7 @@ export default function TasksPage() {
           <ItemContent>
             <HoverCard>
               <HoverCardTrigger asChild>
-                <ItemTitle className="font-normal whitespace-normal line-clamp-1 break-all hover:underline group-hover:text-primary cursor-pointer" onClick={() => {
-                  window.open(`/console/task/view?taskId=${task.id}`, "_blank")
-                }}>
+                <ItemTitle className="font-normal whitespace-normal line-clamp-1 break-all hover:underline group-hover:text-primary cursor-pointer" onClick={() => navigate(`/console/task/${task.id}`)}>
                   {task.summary || stripMarkdown(task.content)}
                 </ItemTitle>
               </HoverCardTrigger>
diff --git a/frontend/src/pages/playground-detail.tsx b/frontend/src/pages/playground-detail.tsx
index 5833e369..ee3aab71 100644
--- a/frontend/src/pages/playground-detail.tsx
+++ b/frontend/src/pages/playground-detail.tsx
@@ -72,7 +72,6 @@ const PlaygroundDetailPage = () => {
 
 
   const taskManager = React.useRef<TaskWebSocketManager | null>(null)
-  const [thinkingMessage, setThinkingMessage] = React.useState("")
   const [streamStatus, setStreamStatus] = React.useState<TaskStreamStatus>('inited')
   const [messages, setMessages] = React.useState<MessageType[]>([])
   const [plan, setPlan] = React.useState<TaskPlan | null>(null)
@@ -93,7 +92,6 @@ const PlaygroundDetailPage = () => {
       setMessages([...state.messages])
       setPlan(state.plan)
       setSending(state.sending)
-      setThinkingMessage(state.thinkingMessage)
     }, true, true)
     taskManager.current = manager
 
@@ -383,7 +381,6 @@ const PlaygroundDetailPage = () => {
                     streamStatus={streamStatus}
                     disabled={true} 
                     sending={sending}
-                    thinkingMessage={thinkingMessage}
                     plan={plan}
                     availableCommands={null}
                     queueSize={0}
diff --git a/frontend/src/pages/public-task.tsx b/frontend/src/pages/public-task.tsx
index 0852aa46..e9a74f50 100644
--- a/frontend/src/pages/public-task.tsx
+++ b/frontend/src/pages/public-task.tsx
@@ -10,7 +10,6 @@ const PublicTaskPage = () => {
   const [searchParams] = useSearchParams()
   const [taskId] = useState(searchParams.get('id'));
   const taskManager = React.useRef<TaskWebSocketManager | null>(null)
-  const [thinkingMessage, setThinkingMessage] = React.useState("")
   const [streamStatus, setStreamStatus] = React.useState<TaskStreamStatus>('inited')
   const [messages, setMessages] = React.useState<MessageType[]>([])
   const [plan, setPlan] = React.useState<TaskPlan | null>(null)
@@ -28,7 +27,6 @@ const PublicTaskPage = () => {
       setMessages([...state.messages])
       setPlan(state.plan)
       setSending(state.sending)
-      setThinkingMessage(state.thinkingMessage)
     }, searchParams.get('fast') === null, true)
     taskManager.current = manager
     manager.connect()
@@ -51,7 +49,6 @@ const PublicTaskPage = () => {
             streamStatus={streamStatus}
             disabled={true} 
             sending={sending}
-            thinkingMessage={thinkingMessage}
             plan={plan}
             availableCommands={null}
             queueSize={0}