diff --git a/docs/design/web-shell-context-panels.md b/docs/design/web-shell-context-panels.md
new file mode 100644
index 00000000000..ec4626020a6
--- /dev/null
+++ b/docs/design/web-shell-context-panels.md
@@ -0,0 +1,112 @@
+# Web Shell context panels
+
+## Goal
+
+Add a persistent header to active chat sessions and move supported workspace
+and background-task context into a fixed-width environment panel. Keep the
+existing artifact panel as an independent right-side surface.
+
+## Header
+
+The active chat header is opt-in so existing integrations without header props
+keep their previous layout. Passing `header` enables the default header, whose
+content is the current session title. `header.items` controls the title,
+environment action, and artifact-panel action independently; an empty items
+array hides the complete header. Passing `renderChatHeader` also enables the
+header and replaces it completely; the renderer receives the session metadata,
+enabled items, controlled panel state, and panel open-change callbacks. The
+compact sidebar toggle remains owned by `sidebar` and renders outside the
+custom header. While the artifact panel is closed, its toggle is in the chat
+header. While it is open, that same toggle moves to the right edge of the
+artifact-panel header, leaving the environment action at the right edge of the
+chat header adjacent to the panel.
+
+The artifact-panel action remains available when no tab exists. Opening an
+The empty panel shows Review and, when session-source metadata is supported,
+side-task history plus New side task. Once a tab is open, the panel header add
+menu contains Review and New side task without repeating the side-task history.
+Review opens the most recent transcript turn containing reviewable file
+changes, is disabled when no such turn exists, and is hidden from the add menu
+while a review tab is already open. Closing a populated artifact panel keeps
+its tabs so the header action can reopen the existing content.
+
+`rightPanel.items` independently controls whether Review and Side task appear
+on the empty panel page. Both items are enabled by default.
+
+## Side tasks
+
+A side task is a distinct daemon thread session in the same workspace as its
+parent. It renders the existing interactive chat pane, including the transcript,
+composer, approval-mode selector, model selector, streaming state, and
+permission handling. Creation uses the dedicated side-task endpoint to snapshot
+the main session's complete persisted model context at that moment, then
+continues independently. The snapshot is serialized against transcript writes,
+so a side task can be created while the parent is responding without observing
+a partial JSONL record. Inherited records are not replayed in the side-task
+transcript; only messages created inside the side task are shown.
+
+Side-task sessions record `sourceType: side_task` and the parent session id as
+`sourceId`. The Web Shell session catalog filters this source type, so side
+tasks do not appear as top-level sessions. With saved side tasks, hovering Side
+task on the empty right-panel page opens a menu of those sessions and a New
+action. With no saved task, clicking the row creates one directly. Selecting a
+saved task restores it as a tab. Closing a tab only detaches its client; the
+daemon transcript remains available for later conversation.
+
+`/btw <question>` keeps the lightweight, one-shot BTW interaction.
+`/btw side <question>` opens a new side-task draft and sends the question as
+its first prompt when the daemon advertises `session_side_task`. Hosts can
+trigger the same action through `shellRef.current.createSideTask()`.
+
+## Environment panel
+
+The environment panel uses only existing Web Shell capabilities:
+
+- workspace path;
+- Git branch and working-tree summary;
+- working-tree diff and commit history entry points;
+- configured agents entry point;
+- background agent, shell, and monitor task summaries.
+
+The environment action and environment section remain available throughout an
+active chat session. A clean working tree is shown explicitly; agent and
+background-task sections appear only when they have content.
+
+`environmentPanel.items` independently controls the environment, subagent, and
+background-task sections. All three sections are enabled by default.
+
+The local `/fork` command refreshes the session task snapshot as soon as its
+background agent launches. Fork agents have no parent transcript tool call, so
+their right-panel detail resolves the virtual subagent session by agent task ID
+instead of `toolUseId`.
+
+The local `/tasks` command opens the environment panel and refreshes its task
+snapshot instead of opening the legacy task dialog.
+
+Side-task, subagent, and fork transcripts expose their own file changes and
+artifacts through the main right panel. Their source session scopes tab
+identities and workspace actions, so opening a nested output creates a separate
+tab without replacing the main session's review or artifact tabs.
+
+It is a fixed-width, non-resizable layout column styled as a floating card with
+a border and shadow. At narrower message widths it opens as a dismissible
+floating popover instead of consuming chat width.
+
+The environment panel and artifact panel are independent. At desktop widths the
+two may be visible together. When the viewport cannot fit both, the artifact
+panel normally takes priority and the environment panel is hidden without
+losing its open state. Opening a subagent or background task from the
+environment panel keeps that panel visible beside the resulting detail. A
+floating environment panel is positioned within the remaining message area and
+never overlaps the artifact panel.
+
+## Responsive behavior
+
+The environment panel is hidden for split/full-page views. When the message
+area cannot keep at least 800 pixels after docking the panel, the panel closes
+and can be reopened as a floating popover. An open artifact panel takes
+priority when both panels cannot fit, but the environment action remains
+available for explicitly reopening the popover. The existing artifact drawer
+behavior on narrow screens is unchanged. On desktop, the artifact panel is a
+top-level layout column beside the chat shell, so it starts at the top of the
+page and the chat header ends at the panel boundary.
diff --git a/integration-tests/cli/qwen-serve-routes.test.ts b/integration-tests/cli/qwen-serve-routes.test.ts
index 95eaf0afec5..dd51c44c4cd 100644
--- a/integration-tests/cli/qwen-serve-routes.test.ts
+++ b/integration-tests/cli/qwen-serve-routes.test.ts
@@ -310,6 +310,7 @@ describe('qwen serve — capabilities envelope', () => {
       'session_list',
       'session_info',
       'session_source_metadata',
+      'session_side_task',
       'session_prompt',
       'session_cancel',
       'session_events',
diff --git a/packages/acp-bridge/src/bridge.test.ts b/packages/acp-bridge/src/bridge.test.ts
index cdb020ad80b..b30623e9c8b 100644
--- a/packages/acp-bridge/src/bridge.test.ts
+++ b/packages/acp-bridge/src/bridge.test.ts
@@ -62,6 +62,7 @@ import { TurnBoundaryCompactionEngine } from './compactionEngine.js';
 import {
   CHANNEL_STARTUP_PROFILE_META_KEY,
   CHANNEL_STARTUP_PROFILE_VERSION,
+  LOAD_REPLAY_HIDE_INHERITED_META_KEY,
 } from './bridgeTypes.js';
 import {
   ApprovalMode,
@@ -10827,6 +10828,103 @@ describe('createAcpSessionBridge', () => {
       await bridge.shutdown();
     });
 
+    it('creates a side task with hidden inherited replay', async () => {
+      const handle = makeChannel({
+        extMethodImpl: async (method) => {
+          if (method === SERVE_CONTROL_EXT_METHODS.sessionSideTask) {
+            return { newSessionId: 'side-1', title: 'Side task' };
+          }
+          if (method === SERVE_CONTROL_EXT_METHODS.sessionSource) {
+            return { persisted: true };
+          }
+          return {};
+        },
+        resumeSessionImpl: () => ({}),
+      });
+      const bridge = makeBridge({
+        channelFactory: async () => handle.channel,
+      });
+      const parent = await bridge.spawnOrAttach({
+        workspaceCwd: WS_A,
+        sessionScope: 'thread',
+      });
+
+      const sideTask = await bridge.createSideTaskSession(parent.sessionId, {
+        name: 'Side task',
+      });
+
+      expect(sideTask).toMatchObject({
+        sessionId: 'side-1',
+        sourceType: 'side_task',
+        sourceId: parent.sessionId,
+        sourcePersisted: true,
+        parentSessionId: parent.sessionId,
+      });
+      expect(bridge.getSessionSummary(sideTask.sessionId)).toMatchObject({
+        sourceType: 'side_task',
+        sourceId: parent.sessionId,
+      });
+      expect(handle.agent.extMethodCalls).toContainEqual({
+        method: SERVE_CONTROL_EXT_METHODS.sessionSource,
+        params: {
+          sessionId: sideTask.sessionId,
+          sourceType: 'side_task',
+          sourceId: parent.sessionId,
+        },
+      });
+      expect(handle.agent.loadSessionCalls[0]?._meta).toMatchObject({
+        [LOAD_REPLAY_HIDE_INHERITED_META_KEY]: true,
+      });
+
+      await bridge.shutdown();
+    });
+
+    it('creates a side task while the parent prompt is active', async () => {
+      const promptGate = deferred<void>();
+      const handle = makeChannel({
+        promptImpl: async () => {
+          await promptGate.promise;
+          return { stopReason: 'end_turn' };
+        },
+        extMethodImpl: async (method) => {
+          if (method === SERVE_CONTROL_EXT_METHODS.sessionSideTask) {
+            return { newSessionId: 'side-active', title: 'Side task' };
+          }
+          if (method === SERVE_CONTROL_EXT_METHODS.sessionSource) {
+            return { persisted: true };
+          }
+          return {};
+        },
+        resumeSessionImpl: () => ({}),
+      });
+      const bridge = makeBridge({
+        channelFactory: async () => handle.channel,
+      });
+      const parent = await bridge.spawnOrAttach({
+        workspaceCwd: WS_A,
+        sessionScope: 'thread',
+      });
+      const prompt = bridge.sendPrompt(parent.sessionId, {
+        sessionId: parent.sessionId,
+        prompt: [{ type: 'text', text: 'keep working' }],
+      });
+      await vi.waitFor(() => expect(handle.agent.promptCalls).toHaveLength(1));
+
+      await expect(
+        bridge.createSideTaskSession(parent.sessionId, { name: 'Side task' }),
+      ).resolves.toMatchObject({
+        sessionId: 'side-active',
+        parentSessionId: parent.sessionId,
+      });
+      expect(bridge.getSessionSummary(parent.sessionId)).toMatchObject({
+        hasActivePrompt: true,
+      });
+
+      promptGate.resolve();
+      await prompt;
+      await bridge.shutdown();
+    });
+
     it('carries persisted source metadata into ACP session restore', async () => {
       for (const action of ['load', 'resume'] as const) {
         const handle = makeChannel();
diff --git a/packages/acp-bridge/src/bridge.ts b/packages/acp-bridge/src/bridge.ts
index 1ecf00acc4f..25d5a4d7629 100644
--- a/packages/acp-bridge/src/bridge.ts
+++ b/packages/acp-bridge/src/bridge.ts
@@ -103,6 +103,7 @@ import {
   CHANNEL_STARTUP_PROFILE_VERSION,
   DAEMON_CHANNEL_DELIVERY_META_KEY,
   LOAD_REPLAY_BULK_MODE,
+  LOAD_REPLAY_HIDE_INHERITED_META_KEY,
   LOAD_REPLAY_META_KEY,
   LOAD_REPLAY_MODE_META_KEY,
   LOAD_REPLAY_PAGE_SIZE_META_KEY,
@@ -2031,6 +2032,7 @@ export function createAcpSessionBridge(opts: BridgeOptions): AcpSessionBridge {
   interface InFlightRestore {
     action: 'load' | 'resume';
     historyReplay: 'stream' | 'response';
+    hideInheritedHistory: boolean;
     promise: Promise<BridgeRestoredSession>;
     /**
      * Synchronous reservation slot for callers that coalesce onto this
@@ -4391,6 +4393,8 @@ export function createAcpSessionBridge(opts: BridgeOptions): AcpSessionBridge {
     }
     const historyReplay =
       action === 'load' ? (req.historyReplay ?? 'stream') : 'stream';
+    const hideInheritedHistory =
+      action === 'load' && req.hideInheritedHistory === true;
 
     const existing = byId.get(req.sessionId);
     if (existing) {
@@ -4452,7 +4456,8 @@ export function createAcpSessionBridge(opts: BridgeOptions): AcpSessionBridge {
       // missing snapshot. Same-action coalescing is unaffected.
       if (
         action !== inFlight.action ||
-        historyReplay !== inFlight.historyReplay
+        historyReplay !== inFlight.historyReplay ||
+        hideInheritedHistory !== inFlight.hideInheritedHistory
       ) {
         throw new RestoreInProgressError(
           req.sessionId,
@@ -4584,7 +4589,9 @@ export function createAcpSessionBridge(opts: BridgeOptions): AcpSessionBridge {
                 // intentionally has no `mcpServers` field for the
                 // same reason.
                 mcpServers: [],
-                ...(historyReplay === 'response' || req.sourceType
+                ...(historyReplay === 'response' ||
+                hideInheritedHistory ||
+                req.sourceType
                   ? {
                       _meta: {
                         ...sessionSourceRequestMeta(
@@ -4603,6 +4610,11 @@ export function createAcpSessionBridge(opts: BridgeOptions): AcpSessionBridge {
                                 : {}),
                             }
                           : {}),
+                        ...(hideInheritedHistory
+                          ? {
+                              [LOAD_REPLAY_HIDE_INHERITED_META_KEY]: true,
+                            }
+                          : {}),
                       },
                     }
                   : {}),
@@ -4846,6 +4858,7 @@ export function createAcpSessionBridge(opts: BridgeOptions): AcpSessionBridge {
     inFlightRestores.set(req.sessionId, {
       action,
       historyReplay,
+      hideInheritedHistory,
       promise,
       coalesceState,
     });
@@ -6226,14 +6239,22 @@ export function createAcpSessionBridge(opts: BridgeOptions): AcpSessionBridge {
 
       const entry = byId.get(sessionId);
       if (!entry) throw new SessionNotFoundError(sessionId);
+      const source = parseSessionSource(req.sourceType, req.sourceId);
+      if ('error' in source) {
+        throw new InvalidSessionMetadataError('sourceType', source.error);
+      }
+      const isSideTask = source.sourceType === 'side_task';
 
       let originatorClientId: string | undefined;
       if (context?.clientId !== undefined) {
         originatorClientId = resolveTrustedClientId(entry, context.clientId);
       }
 
-      const branchResult = entry.promptQueue.then(async () => {
-        if (entry.promptActive) {
+      const concurrentSideTask = isSideTask && entry.promptActive;
+      const branchResult = (
+        concurrentSideTask ? Promise.resolve() : entry.promptQueue
+      ).then(async () => {
+        if (entry.promptActive && !isSideTask) {
           throw new BranchWhilePromptActiveError(sessionId);
         }
 
@@ -6258,13 +6279,18 @@ export function createAcpSessionBridge(opts: BridgeOptions): AcpSessionBridge {
         try {
           const ci = await ensureChannel();
           const result = (await withTimeout(
-            ci.connection.extMethod(SERVE_CONTROL_EXT_METHODS.sessionBranch, {
-              sessionId,
-              cwd: boundWorkspace,
-              name: req.name,
-            }),
+            ci.connection.extMethod(
+              isSideTask
+                ? SERVE_CONTROL_EXT_METHODS.sessionSideTask
+                : SERVE_CONTROL_EXT_METHODS.sessionBranch,
+              {
+                sessionId,
+                cwd: boundWorkspace,
+                name: req.name,
+              },
+            ),
             initTimeoutMs,
-            'branchSession',
+            isSideTask ? 'createSideTaskSession' : 'branchSession',
           )) as { newSessionId: string; title?: string; displayName?: string };
 
           if (!result || typeof result.newSessionId !== 'string') {
@@ -6280,12 +6306,20 @@ export function createAcpSessionBridge(opts: BridgeOptions): AcpSessionBridge {
 
           let restored;
           try {
+            const hideInheritedHistory = req.replayInheritedHistory === false;
             restored = await restoreSession(
               'load',
               {
                 sessionId: result.newSessionId,
                 workspaceCwd: boundWorkspace,
                 clientId: context?.clientId,
+                ...(hideInheritedHistory
+                  ? {
+                      historyReplay: 'response',
+                      hideInheritedHistory: true,
+                    }
+                  : {}),
+                ...source,
               },
               {
                 skipFreshSessionAdmission: true,
@@ -6311,20 +6345,50 @@ export function createAcpSessionBridge(opts: BridgeOptions): AcpSessionBridge {
 
           const newEntry = byId.get(result.newSessionId);
           if (newEntry) newEntry.displayName = branchDisplayName;
+          let sourcePersisted: boolean | undefined;
+          if (newEntry?.sourceType) {
+            try {
+              const sourceResult = await withTimeout(
+                newEntry.connection.extMethod(
+                  SERVE_CONTROL_EXT_METHODS.sessionSource,
+                  {
+                    sessionId: newEntry.sessionId,
+                    sourceType: newEntry.sourceType,
+                    ...(newEntry.sourceId !== undefined
+                      ? { sourceId: newEntry.sourceId }
+                      : {}),
+                  },
+                ),
+                initTimeoutMs,
+                'sessionSource',
+              );
+              sourcePersisted =
+                (sourceResult as { persisted?: boolean } | undefined)
+                  ?.persisted === true;
+            } catch (error) {
+              sourcePersisted = false;
+              writeStderrLine(
+                `qwen serve: source metadata for branched session ${result.newSessionId} was not persisted: ${
+                  error instanceof Error ? error.message : String(error)
+                }`,
+              );
+            }
+          }
 
-          const eventData = {
-            sourceSessionId: sessionId,
-            newSessionId: result.newSessionId,
-            displayName: branchDisplayName,
-          };
-          const branchEnvelope = {
-            type: 'session_branched' as const,
-            data: eventData,
-            ...(originatorClientId ? { originatorClientId } : {}),
-          };
-          // The branch announcement belongs to the new session only. Publishing
-          // it on the source session would persist in that session's replay ring.
-          newEntry?.events.publish(branchEnvelope);
+          if (!isSideTask) {
+            const eventData = {
+              sourceSessionId: sessionId,
+              newSessionId: result.newSessionId,
+              displayName: branchDisplayName,
+            };
+            const branchEnvelope = {
+              type: 'session_branched' as const,
+              data: eventData,
+              ...(originatorClientId ? { originatorClientId } : {}),
+            };
+            // The branch announcement belongs to the new session only.
+            newEntry?.events.publish(branchEnvelope);
+          }
 
           return {
             ...restored,
@@ -6333,18 +6397,39 @@ export function createAcpSessionBridge(opts: BridgeOptions): AcpSessionBridge {
               sessionId,
               displayName: entry.displayName ?? sessionId.slice(0, 8),
             },
+            ...(sourcePersisted !== undefined ? { sourcePersisted } : {}),
           };
         } finally {
           releaseAdmissionOnce();
         }
       });
-      entry.promptQueue = branchResult.then(
-        () => undefined,
-        () => undefined,
-      );
+      if (!concurrentSideTask) {
+        entry.promptQueue = branchResult.then(
+          () => undefined,
+          () => undefined,
+        );
+      }
       return branchResult;
     },
 
+    async createSideTaskSession(sessionId, req, context) {
+      const result = await this.branchSession(
+        sessionId,
+        {
+          name: req.name,
+          sourceType: 'side_task',
+          sourceId: sessionId,
+          replayInheritedHistory: false,
+        },
+        context,
+      );
+      const { forkedFrom: _forkedFrom, ...sideTask } = result;
+      return {
+        ...sideTask,
+        parentSessionId: sessionId,
+      };
+    },
+
     async changeSessionCwd(
       sessionId: string,
       req: ChangeSessionCwdRequest,
diff --git a/packages/acp-bridge/src/bridgeTypes.ts b/packages/acp-bridge/src/bridgeTypes.ts
index e39fd207a54..90e6516d584 100644
--- a/packages/acp-bridge/src/bridgeTypes.ts
+++ b/packages/acp-bridge/src/bridgeTypes.ts
@@ -147,6 +147,8 @@ export interface BridgeRestoreSessionRequest {
   historyReplay?: 'stream' | 'response';
   /** Optional newest persisted-record page requested for response replay. */
   historyPageSize?: number;
+  /** Keep inherited fork records as model context without replaying them. */
+  hideInheritedHistory?: boolean;
   approvalMode?: ApprovalMode;
   /**
    * Persisted parent lineage recovered from the transcript by the caller (the
@@ -165,6 +167,8 @@ export interface BridgeRestoreSessionRequest {
 export const LOAD_REPLAY_MODE_META_KEY = 'qwen.session.loadReplayMode';
 export const LOAD_REPLAY_META_KEY = 'qwen.session.loadReplay';
 export const LOAD_REPLAY_PAGE_SIZE_META_KEY = 'qwen.session.loadReplayPageSize';
+export const LOAD_REPLAY_HIDE_INHERITED_META_KEY =
+  'qwen.session.loadReplayHideInherited';
 export const LOAD_REPLAY_BULK_MODE = 'bulk';
 export const LOAD_REPLAY_VERSION = 1 as const;
 
@@ -284,6 +288,9 @@ export interface BridgeSessionTranscriptPage {
 
 export interface BridgeBranchSessionRequest {
   name?: string;
+  sourceType?: string;
+  sourceId?: string;
+  replayInheritedHistory?: boolean;
 }
 
 export interface BridgeBranchedSession extends BridgeRestoredSession {
@@ -291,6 +298,15 @@ export interface BridgeBranchedSession extends BridgeRestoredSession {
   forkedFrom: { sessionId: string; displayName: string };
 }
 
+export interface BridgeSideTaskSessionRequest {
+  name?: string;
+}
+
+export interface BridgeSideTaskSession extends BridgeRestoredSession {
+  displayName: string;
+  parentSessionId: string;
+}
+
 export interface BridgeForkAgentResult {
   sessionId: string;
   description: string;
@@ -875,6 +891,13 @@ export interface AcpSessionBridge {
     context?: BridgeClientRequestContext,
   ): Promise<BridgeBranchedSession>;
 
+  /** Create a persisted side task with a snapshot of the parent's context. */
+  createSideTaskSession(
+    sessionId: string,
+    req: BridgeSideTaskSessionRequest,
+    context?: BridgeClientRequestContext,
+  ): Promise<BridgeSideTaskSession>;
+
   /**
    * Change the working directory of a live session. The session must be
    * idle (no active prompt). Chains onto `entry.promptQueue` and updates
diff --git a/packages/acp-bridge/src/status.ts b/packages/acp-bridge/src/status.ts
index 851cf1cd6ab..b7d4cb4c9bc 100644
--- a/packages/acp-bridge/src/status.ts
+++ b/packages/acp-bridge/src/status.ts
@@ -131,6 +131,7 @@ export const SERVE_CONTROL_EXT_METHODS = {
   sessionClose: 'qwen/control/session/close',
   sessionApprovalMode: 'qwen/control/session/approval_mode',
   sessionBranch: 'qwen/control/session/branch',
+  sessionSideTask: 'qwen/control/session/side_task',
   sessionForkAgent: 'qwen/control/session/fork_agent',
   sessionRecap: 'qwen/control/session/recap',
   sessionGenerationStart: 'qwen/control/session/generation/start',
diff --git a/packages/cli/src/acp-integration/acpAgent.test.ts b/packages/cli/src/acp-integration/acpAgent.test.ts
index c371e3a6d1e..40172b64fa1 100644
--- a/packages/cli/src/acp-integration/acpAgent.test.ts
+++ b/packages/cli/src/acp-integration/acpAgent.test.ts
@@ -799,6 +799,7 @@ import {
   fetchAllowedGitHub,
   createWorkspaceMcpBudget,
   deliverClientMcpMessage,
+  selectVisibleHistoryRecords,
 } from './acpAgent.js';
 import { gzipSync } from 'node:zlib';
 import type { Config } from '@qwen-code/qwen-code-core';
@@ -12423,6 +12424,55 @@ describe('QwenAgent extMethod renameSession routing', () => {
     await agentPromise;
   });
 
+  it('creates a side task with source metadata and no branch suffix', async () => {
+    const recording = makeRecordingService();
+    const sessionService = {
+      forkSession: vi.fn().mockResolvedValue(undefined),
+      renameSession: vi.fn().mockResolvedValue(true),
+      removeSession: vi.fn().mockResolvedValue(undefined),
+    };
+    const innerConfig = makeLiveSessionInnerConfig(recording);
+    innerConfig.getSessionService.mockReturnValue(
+      sessionService as unknown as SessionService,
+    );
+    const { agent, agentPromise } = await bootAgent(innerConfig);
+
+    await agent.newSession({ cwd: '/tmp', mcpServers: [] });
+    const result = await agent.extMethod(
+      SERVE_CONTROL_EXT_METHODS.sessionSideTask,
+      {
+        cwd: '/tmp',
+        sessionId: liveSessionId,
+        name: 'Side task',
+      },
+    );
+
+    expect(sessionService.forkSession).toHaveBeenCalledWith(
+      liveSessionId,
+      expect.any(String),
+      {
+        source: {
+          sourceType: 'side_task',
+          sourceId: liveSessionId,
+        },
+      },
+    );
+    expect(recording.runWithWriteBarrier).toHaveBeenCalledOnce();
+    const newSessionId = sessionService.forkSession.mock.calls[0]?.[1];
+    expect(sessionService.renameSession).toHaveBeenCalledWith(
+      newSessionId,
+      'Side task',
+      'manual',
+    );
+    expect(result).toMatchObject({
+      title: 'Side task',
+      displayName: 'Side task',
+    });
+
+    mockConnectionState.resolve();
+    await agentPromise;
+  });
+
   it('keeps the live session open when strict session close flush fails', async () => {
     const recording = makeRecordingService();
     recording.flush.mockRejectedValue(new Error('flush failed'));
@@ -16528,3 +16578,55 @@ describe('deliverClientMcpMessage — reverse tool channel (#5626)', () => {
     });
   });
 });
+
+describe('selectVisibleHistoryRecords', () => {
+  function makeRecord(
+    overrides: Partial<{
+      type: string;
+      subtype: string;
+      systemPayload: unknown;
+      forkedFrom: { sessionId: string; messageUuid: string };
+    }> = {},
+  ) {
+    return {
+      uuid: `uuid-${Math.random().toString(36).slice(2)}`,
+      parentUuid: null,
+      sessionId: 'test-session',
+      timestamp: '2025-01-01T00:00:00Z',
+      type: 'user',
+      ...overrides,
+    } as never;
+  }
+
+  const sourceBoundary = makeRecord({
+    type: 'system',
+    subtype: 'session_source',
+    systemPayload: { sourceType: 'side_task', sourceId: 'parent-1' },
+  });
+
+  it('filters records before a side-task source boundary regardless of hideInheritedHistory', () => {
+    const inherited = makeRecord({
+      forkedFrom: { sessionId: 'parent-1', messageUuid: 'm1' },
+    });
+    const before = makeRecord();
+    const after = makeRecord();
+    const records = [inherited, before, sourceBoundary, after];
+
+    const withHide = selectVisibleHistoryRecords(records, true);
+    const withoutHide = selectVisibleHistoryRecords(records, false);
+
+    expect(withHide).toEqual([sourceBoundary, after]);
+    expect(withoutHide).toEqual([sourceBoundary, after]);
+  });
+
+  it('filters forkedFrom records when hideInheritedHistory is true and no boundary exists', () => {
+    const inherited = makeRecord({
+      forkedFrom: { sessionId: 'parent-1', messageUuid: 'm1' },
+    });
+    const own = makeRecord();
+    const records = [inherited, own];
+
+    expect(selectVisibleHistoryRecords(records, true)).toEqual([own]);
+    expect(selectVisibleHistoryRecords(records, false)).toEqual(records);
+  });
+});
diff --git a/packages/cli/src/acp-integration/acpAgent.ts b/packages/cli/src/acp-integration/acpAgent.ts
index 1448c27abb4..83cecdb52b4 100644
--- a/packages/cli/src/acp-integration/acpAgent.ts
+++ b/packages/cli/src/acp-integration/acpAgent.ts
@@ -300,6 +300,7 @@ import {
   CHANNEL_STARTUP_PROFILE_VERSION,
   CLIENT_MCP_OVER_WS_CONFIG_FLAG,
   LOAD_REPLAY_BULK_MODE,
+  LOAD_REPLAY_HIDE_INHERITED_META_KEY,
   LOAD_REPLAY_META_KEY,
   LOAD_REPLAY_MODE_META_KEY,
   LOAD_REPLAY_PAGE_SIZE_META_KEY,
@@ -626,6 +627,34 @@ function isBulkLoadReplayRequest(params: LoadSessionRequest): boolean {
   return meta?.[LOAD_REPLAY_MODE_META_KEY] === LOAD_REPLAY_BULK_MODE;
 }
 
+function shouldHideInheritedHistory(params: LoadSessionRequest): boolean {
+  const meta = isObjectRecord(params._meta) ? params._meta : undefined;
+  return meta?.[LOAD_REPLAY_HIDE_INHERITED_META_KEY] === true;
+}
+
+export function selectVisibleHistoryRecords(
+  records: ChatRecord[],
+  hideInheritedHistory: boolean,
+): ChatRecord[] {
+  const sourceBoundary = records.findIndex(
+    (record) =>
+      record.type === 'system' &&
+      record.subtype === 'session_source' &&
+      isObjectRecord(record.systemPayload) &&
+      record.systemPayload['sourceType'] === 'side_task',
+  );
+  // A persisted side-task source boundary is authoritative for every replay;
+  // callers cannot opt inherited parent history back into that child session.
+  if (sourceBoundary >= 0) {
+    return records
+      .slice(sourceBoundary)
+      .filter((record) => record.forkedFrom === undefined);
+  }
+  return hideInheritedHistory
+    ? records.filter((record) => record.forkedFrom === undefined)
+    : records;
+}
+
 function isChannelSessionRequest(params: { _meta?: unknown }): boolean {
   const meta = isObjectRecord(params._meta) ? params._meta : undefined;
   const value = meta?.[SESSION_SOURCE_META_KEY];
@@ -4409,12 +4438,19 @@ class QwenAgent implements Agent {
               : {}),
           } as LoadSessionResponse;
           const records = sessionData.conversation.messages;
-          if (records.length === 0) return response;
+          const visibleRecords = selectVisibleHistoryRecords(
+            records,
+            shouldHideInheritedHistory(params),
+          );
+          if (visibleRecords.length === 0) return response;
 
           const bulkReplay = isBulkLoadReplayRequest(params);
           const replayPage = bulkReplay
-            ? selectRecentHistoryRecords(records, getLoadReplayPageSize(params))
-            : { records, hasMore: false };
+            ? selectRecentHistoryRecords(
+                visibleRecords,
+                getLoadReplayPageSize(params),
+              )
+            : { records: visibleRecords, hasMore: false };
           const replay = await collectHistoryReplayUpdates({
             sessionId: params.sessionId,
             config,
@@ -4494,8 +4530,12 @@ class QwenAgent implements Agent {
             let replayUpdates: SessionUpdate[] = [];
             if (records) {
               createdSession.primeTurnFromHistory(records);
-              const replayPage = selectRecentHistoryRecords(
+              const visibleRecords = selectVisibleHistoryRecords(
                 records,
+                shouldHideInheritedHistory(params),
+              );
+              const replayPage = selectRecentHistoryRecords(
+                visibleRecords,
                 replayPageSize,
               );
               const replayUsage = createReplayCumulativeUsage();
@@ -4543,7 +4583,6 @@ class QwenAgent implements Agent {
         }
       });
     }
-
     const modesData = this.buildModesData(config);
     const availableModels = this.buildAvailableModels(config);
     const configOptions = this.buildConfigOptions(config);
@@ -10009,7 +10048,9 @@ class QwenAgent implements Agent {
           apiKeyEnvKey: cfg?.apiKeyEnvKey ?? null,
         };
       }
-      case SERVE_CONTROL_EXT_METHODS.sessionBranch: {
+      case SERVE_CONTROL_EXT_METHODS.sessionBranch:
+      case SERVE_CONTROL_EXT_METHODS.sessionSideTask: {
+        const isSideTask = method === SERVE_CONTROL_EXT_METHODS.sessionSideTask;
         const sessionId = params['sessionId'];
         if (typeof sessionId !== 'string' || !SESSION_ID_RE.test(sessionId)) {
           throw RequestError.invalidParams(
@@ -10035,7 +10076,20 @@ class QwenAgent implements Agent {
 
         const newSessionId = randomUUID();
         const sessionService = sourceConfig.getSessionService();
-        await sessionService.forkSession(sessionId, newSessionId);
+        const fork = () =>
+          isSideTask
+            ? sessionService.forkSession(sessionId, newSessionId, {
+                source: {
+                  sourceType: 'side_task',
+                  sourceId: sessionId,
+                },
+              })
+            : sessionService.forkSession(sessionId, newSessionId);
+        if (isSideTask && recording) {
+          await recording.runWithWriteBarrier(fork);
+        } else {
+          await fork();
+        }
 
         let title: string;
         try {
@@ -10054,7 +10108,9 @@ class QwenAgent implements Agent {
             }
           }
 
-          title = await computeUniqueBranchTitle(baseName, sessionService);
+          title = isSideTask
+            ? baseName
+            : await computeUniqueBranchTitle(baseName, sessionService);
           const renamed = await sessionService.renameSession(
             newSessionId,
             title,
diff --git a/packages/cli/src/acp-integration/session/history-replayer.test.ts b/packages/cli/src/acp-integration/session/history-replayer.test.ts
index 627592d6d5c..1dd8ba19ce9 100644
--- a/packages/cli/src/acp-integration/session/history-replayer.test.ts
+++ b/packages/cli/src/acp-integration/session/history-replayer.test.ts
@@ -1574,4 +1574,4 @@ describe('HistoryReplayer', () => {
       );
     });
   });
-});
\ No newline at end of file
+});
diff --git a/packages/cli/src/serve/capabilities.ts b/packages/cli/src/serve/capabilities.ts
index 177bd5cdcc9..805bd530d6e 100644
--- a/packages/cli/src/serve/capabilities.ts
+++ b/packages/cli/src/serve/capabilities.ts
@@ -49,6 +49,7 @@ export const SERVE_CAPABILITY_REGISTRY = {
   // must not be polled in a tight loop.
   session_info: { since: 'v1' },
   session_source_metadata: { since: 'v1' },
+  session_side_task: { since: 'v1' },
   session_prompt: { since: 'v1' },
   session_cancel: { since: 'v1' },
   session_events: { since: 'v1' },
diff --git a/packages/cli/src/serve/multi-workspace-sessions.test.ts b/packages/cli/src/serve/multi-workspace-sessions.test.ts
index 9d40c7caea6..b5388db4612 100644
--- a/packages/cli/src/serve/multi-workspace-sessions.test.ts
+++ b/packages/cli/src/serve/multi-workspace-sessions.test.ts
@@ -153,7 +153,7 @@ interface FakeBridge extends AcpSessionBridge {
     context?: BridgeClientRequestContext;
   }>;
   readonly primaryOnlyMutationCalls: Array<{
-    route: 'branch' | 'fork' | 'cd';
+    route: 'branch' | 'side-task' | 'fork' | 'cd';
     sessionId: string;
   }>;
 }
@@ -622,6 +622,10 @@ function makeBridge(
       primaryOnlyMutationCalls.push({ route: 'branch', sessionId });
       throw new Error('Unexpected branchSession call');
     },
+    async createSideTaskSession(sessionId: string) {
+      primaryOnlyMutationCalls.push({ route: 'side-task', sessionId });
+      throw new Error('Unexpected createSideTaskSession call');
+    },
     async launchSessionForkAgent(sessionId: string) {
       primaryOnlyMutationCalls.push({ route: 'fork', sessionId });
       throw new Error('Unexpected launchSessionForkAgent call');
diff --git a/packages/cli/src/serve/routes/session.ts b/packages/cli/src/serve/routes/session.ts
index a7fd9e41fa7..5f9c9f5499c 100644
--- a/packages/cli/src/serve/routes/session.ts
+++ b/packages/cli/src/serve/routes/session.ts
@@ -155,6 +155,7 @@ const TRANSCRIPT_CURSOR_TOO_LARGE_REPLAY_ERROR =
 const CHANNEL_DELIVERY_AUTHORIZATION_GRACE_MS = 60_000;
 const PRIMARY_ONLY_LIVE_SESSION_ROUTES = [
   'POST /session/:id/branch',
+  'POST /session/:id/side-task',
   'POST /session/:id/fork',
   'POST /session/:id/cd',
 ] as const;
@@ -2256,6 +2257,70 @@ export function registerSessionRoutes(
     ),
   );
 
+  app.post(
+    '/session/:id/side-task',
+    mutate(),
+    withPrimaryOnlyMutableSession(
+      'POST /session/:id/side-task',
+      async (req, res, sessionId, runtime) => {
+        const body = safeBody(req);
+        let name =
+          typeof body?.['name'] === 'string' ? body['name'] : undefined;
+        if (name) {
+          // eslint-disable-next-line no-control-regex
+          name = Array.from(name.replace(/[\x00-\x1F\x7F-\x9F]/g, ''))
+            .slice(0, 200)
+            .join('');
+        }
+        const clientId = parseClientIdHeader(req, res);
+        if (clientId === null) return;
+        const result = await runtime.bridge.createSideTaskSession(
+          sessionId,
+          { name },
+          { clientId },
+        );
+        try {
+          runtime.generationGuard?.assertOpen();
+        } catch (error) {
+          if (!result.attached) {
+            const killed = await runtime.bridge
+              .killSession(result.sessionId, { requireZeroAttaches: true })
+              .catch(() => false);
+            if (killed) {
+              await new SessionService(runtime.workspaceCwd)
+                .removeSession(result.sessionId)
+                .catch(() => {});
+            }
+          } else {
+            await runtime.bridge
+              .detachClient(result.sessionId, result.clientId)
+              .catch(() => {});
+          }
+          throw error;
+        }
+        if (!res.writable) {
+          if (!result.attached) {
+            runtime.bridge
+              .killSession(result.sessionId, { requireZeroAttaches: true })
+              .then((killed) => {
+                if (!killed) return undefined;
+                return new SessionService(runtime.workspaceCwd!).removeSession(
+                  result.sessionId,
+                );
+              })
+              .catch(() => {});
+          } else {
+            runtime.bridge
+              .detachClient(result.sessionId, result.clientId)
+              .catch(() => {});
+          }
+          return;
+        }
+        res.status(201).json(result);
+      },
+    ),
+  );
+
   app.post(
     '/session/:id/fork',
     mutate(),
diff --git a/packages/cli/src/serve/server.test.ts b/packages/cli/src/serve/server.test.ts
index 450706e5b8d..56c3f3f5c03 100644
--- a/packages/cli/src/serve/server.test.ts
+++ b/packages/cli/src/serve/server.test.ts
@@ -334,6 +334,7 @@ const EXPECTED_STAGE1_FEATURES = [
   'session_list',
   'session_info',
   'session_source_metadata',
+  'session_side_task',
   'session_prompt',
   'session_cancel',
   'session_events',
diff --git a/packages/cli/src/serve/server/telemetry-catalog.test.ts b/packages/cli/src/serve/server/telemetry-catalog.test.ts
index cdd457c6463..654b8cb8139 100644
--- a/packages/cli/src/serve/server/telemetry-catalog.test.ts
+++ b/packages/cli/src/serve/server/telemetry-catalog.test.ts
@@ -98,7 +98,7 @@ describe('legacy session telemetry route drift guard', () => {
       .map(({ method, path }) => `${method} ${path}`)
       .sort();
 
-    expect(registered).toHaveLength(50);
+    expect(registered).toHaveLength(51);
     expect(registered).toEqual(catalog);
   });
 });
diff --git a/packages/cli/src/serve/server/telemetry.test.ts b/packages/cli/src/serve/server/telemetry.test.ts
index 8e04d6c7c7b..76a4284f61d 100644
--- a/packages/cli/src/serve/server/telemetry.test.ts
+++ b/packages/cli/src/serve/server/telemetry.test.ts
@@ -794,17 +794,17 @@ describe('daemonTelemetryMiddleware — recordRequest seam', () => {
 });
 
 describe('legacy session telemetry route catalog', () => {
-  it('contains 50 unique routes with the audited 43/7 attribution split', () => {
+  it('contains 51 unique routes with the audited 44/7 attribution split', () => {
     const keys = legacySessionTelemetryRoutes.map(
       ({ method, path }) => `${method} ${path}`,
     );
-    expect(keys).toHaveLength(50);
-    expect(new Set(keys).size).toBe(50);
+    expect(keys).toHaveLength(51);
+    expect(new Set(keys).size).toBe(51);
     expect(
       legacySessionTelemetryRoutes.filter(
         ({ attribution }) => attribution === 'handler_resolved',
       ),
-    ).toHaveLength(43);
+    ).toHaveLength(44);
     expect(
       legacySessionTelemetryRoutes.filter(
         ({ attribution }) => attribution === 'pre_resolved',
diff --git a/packages/cli/src/serve/server/telemetry.ts b/packages/cli/src/serve/server/telemetry.ts
index 7e5bdc639c8..071b4efef7f 100644
--- a/packages/cli/src/serve/server/telemetry.ts
+++ b/packages/cli/src/serve/server/telemetry.ts
@@ -59,6 +59,12 @@ export const legacySessionTelemetryRoutes = [
     attribution: 'handler_resolved',
     route: 'POST /session/:id/fork',
   },
+  {
+    method: 'POST',
+    path: '/session/:id/side-task',
+    attribution: 'handler_resolved',
+    route: 'POST /session/:id/side-task',
+  },
   {
     method: 'POST',
     path: '/session/:id/cd',
diff --git a/packages/cli/src/serve/virtual-subagent-sessions.test.ts b/packages/cli/src/serve/virtual-subagent-sessions.test.ts
index 4222c056d2c..028f2797b47 100644
--- a/packages/cli/src/serve/virtual-subagent-sessions.test.ts
+++ b/packages/cli/src/serve/virtual-subagent-sessions.test.ts
@@ -88,6 +88,46 @@ describe('VirtualSubagentSessions', () => {
     ).toThrow('valid id parts');
   });
 
+  it('resolves an out-of-band fork by agent task id', async () => {
+    const runtime = {
+      workspaceId: 'workspace-1',
+      workspaceCwd: '/workspace',
+      env: { mode: 'parent-process', overlayKeys: [] },
+      bridge: {
+        getSessionTasksStatus: async () => ({
+          v: 1 as const,
+          sessionId: 'parent-session',
+          now: Date.now(),
+          tasks: [
+            {
+              kind: 'agent' as const,
+              id: 'fork-agent-1',
+              label: 'Review current changes',
+              description: 'Review current changes',
+              status: 'running' as const,
+              startTime: Date.now(),
+              runtimeMs: 1,
+              outputFile: '/tmp/fork-agent-1.jsonl',
+              isBackgrounded: true,
+            },
+          ],
+        }),
+      },
+    } as unknown as WorkspaceRuntime;
+
+    const resolved = await new VirtualSubagentSessions().resolve(
+      runtime,
+      'parent-session',
+      'fork-agent-1',
+    );
+
+    expect(resolved).toMatchObject({
+      taskId: 'fork-agent-1',
+      title: 'Review current changes',
+      status: 'running',
+    });
+  });
+
   it('resolves, fully loads, and independently streams an agent transcript', async () => {
     const dir = await fs.mkdtemp(path.join(os.tmpdir(), 'qwen-subagent-'));
     tempDirs.push(dir);
diff --git a/packages/cli/src/serve/virtual-subagent-sessions.ts b/packages/cli/src/serve/virtual-subagent-sessions.ts
index 4b7c4b7cf61..e8cfaddc548 100644
--- a/packages/cli/src/serve/virtual-subagent-sessions.ts
+++ b/packages/cli/src/serve/virtual-subagent-sessions.ts
@@ -903,6 +903,9 @@ export class VirtualSubagentSessions {
       runtime,
       parentSessionId,
       (candidate) =>
+        // /fork has no parent transcript tool call, so its task ID is the
+        // stable reference used by Web Shell.
+        candidate.id === toolCallId ||
         candidate.toolUseId === toolCallId ||
         candidate.id.endsWith(`-${toolCallId}`),
     );
diff --git a/packages/core/src/services/session-transcript-reader.test.ts b/packages/core/src/services/session-transcript-reader.test.ts
index 52e2fedaea4..ba71c01e800 100644
--- a/packages/core/src/services/session-transcript-reader.test.ts
+++ b/packages/core/src/services/session-transcript-reader.test.ts
@@ -494,6 +494,51 @@ describe('SessionTranscriptReader', () => {
     expect(page.nextCursorState).toBeUndefined();
   });
 
+  it('does not page into inherited side-task context', async () => {
+    const inheritedUser = {
+      ...record('parent-u1', 'source', 'parent prompt'),
+      forkedFrom: {
+        sessionId: 'parent-session',
+        messageUuid: 'parent-u1',
+      },
+    };
+    const inheritedAssistant = {
+      ...record('parent-a1', 'parent-u1', 'parent answer'),
+      forkedFrom: {
+        sessionId: 'parent-session',
+        messageUuid: 'parent-a1',
+      },
+    };
+    const sessionSource = {
+      ...record('source', null, 'session source'),
+      type: 'system' as const,
+      subtype: 'session_source' as const,
+      systemPayload: {
+        sourceType: 'side_task',
+        sourceId: 'parent-session',
+      },
+    };
+    await writeRecords([
+      sessionSource,
+      inheritedUser,
+      inheritedAssistant,
+      record('side-u1', 'parent-a1', 'side prompt'),
+      record('side-a1', 'side-u1', 'side answer'),
+    ]);
+
+    const page = await new SessionTranscriptReader(workspaceDir).readPage(
+      sessionId,
+      { direction: 'backward', limit: 100 },
+    );
+
+    expect(page.records.map((item) => item.uuid)).toEqual([
+      'source',
+      'side-u1',
+      'side-a1',
+    ]);
+    expect(page.hasMore).toBe(false);
+  });
+
   it('keeps backward pages within a normal user turn boundary', async () => {
     const toolCall = record('a-tool', 'u1', 'call tool');
     const toolResult = {
@@ -1178,7 +1223,6 @@ describe('SessionTranscriptReader', () => {
     });
 
     it('pages backward through records without a normal user turn start', async () => {
-
       await writeRecords([
         record('a1', null, 'orphan assistant reply'),
         record('u1', 'a1', 'second prompt'),
diff --git a/packages/core/src/services/session-transcript-reader.ts b/packages/core/src/services/session-transcript-reader.ts
index 0fcf41c9340..179d258d34c 100644
--- a/packages/core/src/services/session-transcript-reader.ts
+++ b/packages/core/src/services/session-transcript-reader.ts
@@ -122,6 +122,7 @@ interface UuidIndexEntry {
   parentUuid: string | null;
   type: ChatRecord['type'];
   subtype?: TranscriptRecordInput['subtype'];
+  inherited: boolean;
   segments: RecordSegment[];
 }
 
@@ -837,6 +838,7 @@ async function buildIndex(params: {
   let sequence = 0;
   let leafUuid: string | undefined;
   let startTime: string | undefined;
+  let sideTaskSourceUuid: string | undefined;
 
   await forEachLineInSnapshot(
     filePath,
@@ -850,6 +852,14 @@ async function buildIndex(params: {
         if (!record || !isTranscriptConversationRecord(record)) {
           continue;
         }
+        if (
+          record.type === 'system' &&
+          record.subtype === 'session_source' &&
+          isObjectRecord(record.systemPayload) &&
+          record.systemPayload['sourceType'] === 'side_task'
+        ) {
+          sideTaskSourceUuid = record.uuid;
+        }
         if (record.timestamp) startTime ??= record.timestamp;
         leafUuid = record.uuid;
         const existing = byUuid.get(record.uuid);
@@ -869,6 +879,7 @@ async function buildIndex(params: {
             ...(record.subtype !== undefined
               ? { subtype: record.subtype }
               : {}),
+            inherited: record.forkedFrom !== undefined,
             segments: [segment],
           });
         }
@@ -896,7 +907,15 @@ async function buildIndex(params: {
         }
       : undefined;
   });
-  const activeUuids = [...chain.uuids];
+  const sourceBoundary = sideTaskSourceUuid
+    ? chain.uuids.indexOf(sideTaskSourceUuid)
+    : -1;
+  const activeUuids =
+    sourceBoundary >= 0
+      ? chain.uuids
+          .slice(sourceBoundary)
+          .filter((uuid) => byUuid.get(uuid)?.inherited !== true)
+      : [...chain.uuids];
   const goalStatePositions: number[] = [];
   for (let position = 0; position < activeUuids.length; position++) {
     const uuid = activeUuids[position]!;
diff --git a/packages/core/src/services/sessionService.test.ts b/packages/core/src/services/sessionService.test.ts
index cf6f1cf8055..a5024d6f020 100644
--- a/packages/core/src/services/sessionService.test.ts
+++ b/packages/core/src/services/sessionService.test.ts
@@ -3093,6 +3093,69 @@ describe('SessionService', () => {
       expect(srcLines.every((r) => !r.forkedFrom)).toBe(true);
     });
 
+    it('writes source metadata and drops the inherited title for sourced forks', async () => {
+      const oldId = '10101010-1010-1010-1010-101010101010';
+      const newId = '20202020-2020-2020-2020-202020202020';
+      const { file, lines } = seedSession(oldId);
+      fs.writeFileSync(
+        file,
+        [
+          ...lines,
+          {
+            uuid: 'title-1',
+            parentUuid: 'u2',
+            sessionId: oldId,
+            type: 'system',
+            subtype: 'custom_title',
+            timestamp: '2026-04-22T00:00:02.000Z',
+            cwd,
+            version: 'test',
+            systemPayload: {
+              customTitle: 'Parent title',
+              titleSource: 'manual',
+            },
+          },
+        ]
+          .map((line) => JSON.stringify(line))
+          .join('\n') + '\n',
+      );
+
+      const result = await service.forkSession(oldId, newId, {
+        source: {
+          sourceType: 'side_task',
+          sourceId: oldId,
+        },
+      });
+      const written = fs
+        .readFileSync(result.filePath, 'utf8')
+        .trim()
+        .split('\n')
+        .map((line) => JSON.parse(line));
+
+      expect(written[0]).toMatchObject({
+        parentUuid: null,
+        sessionId: newId,
+        type: 'system',
+        subtype: 'session_source',
+        cwd,
+        version: 'test',
+        systemPayload: {
+          sourceType: 'side_task',
+          sourceId: oldId,
+        },
+      });
+      expect(written.some((record) => record.subtype === 'custom_title')).toBe(
+        false,
+      );
+      expect(written[1]).toMatchObject({
+        parentUuid: written[0].uuid,
+        forkedFrom: {
+          sessionId: oldId,
+          messageUuid: 'u1',
+        },
+      });
+    });
+
     it('copies artifact side records from the active branch', async () => {
       const oldId = '71717171-7171-7171-7171-717171717171';
       const newId = '81818181-8181-8181-8181-818181818181';
diff --git a/packages/core/src/services/sessionService.ts b/packages/core/src/services/sessionService.ts
index ca7a7ff38ea..e5088cb1cfc 100644
--- a/packages/core/src/services/sessionService.ts
+++ b/packages/core/src/services/sessionService.ts
@@ -1666,6 +1666,9 @@ export class SessionService {
   async forkSession(
     sourceSessionId: string,
     newSessionId: string,
+    options: {
+      source?: { sourceType: string; sourceId?: string };
+    } = {},
   ): Promise<{ filePath: string; copiedCount: number }> {
     if (!SESSION_FILE_PATTERN.test(`${sourceSessionId}.jsonl`)) {
       throw new Error(`Invalid source sessionId: ${sourceSessionId}`);
@@ -1709,7 +1712,8 @@ export class SessionService {
         !(
           record.type === 'system' &&
           (record.subtype === 'parent_session' ||
-            record.subtype === 'session_source')
+            record.subtype === 'session_source' ||
+            (options.source && record.subtype === 'custom_title'))
         ),
     );
     if (sourceRecords.length === 0) {
@@ -1719,32 +1723,53 @@ export class SessionService {
     // Rebuild the parentUuid chain in active-history order so the fork is a
     // clean linear descendant. `forkedFrom` captures the origin of each
     // message.
-    let prevUuid: string | null = null;
+    const sourceRecord: ChatRecord | undefined = options.source
+      ? {
+          uuid: randomUUID(),
+          parentUuid: null,
+          sessionId: newSessionId,
+          timestamp: new Date().toISOString(),
+          type: 'system',
+          subtype: 'session_source',
+          cwd: this.projectRoot,
+          version: records[0].version,
+          systemPayload: {
+            sourceType: options.source.sourceType,
+            ...(options.source.sourceId !== undefined
+              ? { sourceId: options.source.sourceId }
+              : {}),
+          },
+        }
+      : undefined;
+    let prevUuid: string | null = sourceRecord?.uuid ?? null;
     const remappedArtifactIds = new Map<string, string>();
-    const forked: ChatRecord[] = sourceRecords.map((record) => {
-      const isArtifactRecord = isSessionArtifactRecord(record);
-      const systemPayload = remapSystemPayloadForFork(
-        record,
-        sourceSessionId,
-        newSessionId,
-        remappedArtifactIds,
-      );
-      const next: ChatRecord = {
-        ...record,
-        sessionId: newSessionId,
-        cwd: this.projectRoot,
-        systemPayload,
-        parentUuid: isArtifactRecord ? record.parentUuid : prevUuid,
-        forkedFrom: {
-          sessionId: sourceSessionId,
-          messageUuid: record.uuid,
-        },
-      };
-      if (!isArtifactRecord) {
-        prevUuid = record.uuid;
-      }
-      return next;
-    });
+    const forked: ChatRecord[] = [
+      ...(sourceRecord ? [sourceRecord] : []),
+      ...sourceRecords.map((record) => {
+        const isArtifactRecord = isSessionArtifactRecord(record);
+        const systemPayload = remapSystemPayloadForFork(
+          record,
+          sourceSessionId,
+          newSessionId,
+          remappedArtifactIds,
+        );
+        const next: ChatRecord = {
+          ...record,
+          sessionId: newSessionId,
+          cwd: this.projectRoot,
+          systemPayload,
+          parentUuid: isArtifactRecord ? record.parentUuid : prevUuid,
+          forkedFrom: {
+            sessionId: sourceSessionId,
+            messageUuid: record.uuid,
+          },
+        };
+        if (!isArtifactRecord) {
+          prevUuid = record.uuid;
+        }
+        return next;
+      }),
+    ];
 
     // File-history snapshots are side-channel system records used by /rewind.
     // They may not sit on the active message leaf copied above, and copied
diff --git a/packages/core/src/utils/transcript-records.ts b/packages/core/src/utils/transcript-records.ts
index 95d7be556aa..cf4234f199f 100644
--- a/packages/core/src/utils/transcript-records.ts
+++ b/packages/core/src/utils/transcript-records.ts
@@ -35,6 +35,10 @@ export interface TranscriptRecordInput {
   readonly usageMetadata?: unknown;
   readonly toolCallResult?: unknown;
   readonly systemPayload?: unknown;
+  readonly forkedFrom?: {
+    readonly sessionId: string;
+    readonly messageUuid: string;
+  };
 }
 
 export interface TranscriptReplayGapInput {
diff --git a/packages/sdk-typescript/scripts/build.js b/packages/sdk-typescript/scripts/build.js
index 883edf3fd42..362b738aa28 100755
--- a/packages/sdk-typescript/scripts/build.js
+++ b/packages/sdk-typescript/scripts/build.js
@@ -77,7 +77,8 @@ const rootDir = join(__dirname, '..');
 // DaemonSessionClient (#6930).
 // Bumped from 177KB to 178KB for workspace file byte-cursor paging after
 // merging the workspace pairing approval SDK surface.
-const MAX_DAEMON_BROWSER_BUNDLE_BYTES = 178 * 1024;
+// Bumped from 178KB to 184KB for side-task session APIs and source metadata.
+const MAX_DAEMON_BROWSER_BUNDLE_BYTES = 184 * 1024;
 // The opt-in `daemon/transports` browser bundle legitimately ships the concrete
 // ACP transports (AcpHttpTransport/AcpWsTransport/AutoReconnect + negotiate), so
 // it's larger than the default barrel — but still budgeted so a future PR can't
diff --git a/packages/sdk-typescript/src/daemon/DaemonClient.ts b/packages/sdk-typescript/src/daemon/DaemonClient.ts
index a27774c03f6..d43b4bee1d9 100644
--- a/packages/sdk-typescript/src/daemon/DaemonClient.ts
+++ b/packages/sdk-typescript/src/daemon/DaemonClient.ts
@@ -33,6 +33,7 @@ import type {
   DaemonSessionContextUsageStatus,
   BranchSessionRequest,
   DaemonBranchedSession,
+  DaemonSideTaskSession,
   DaemonForkSessionResult,
   DaemonRestoredSession,
   DaemonSession,
@@ -41,6 +42,7 @@ import type {
   DaemonSessionExportResult,
   DaemonSessionTranscriptPage,
   DaemonSessionTranscriptPageOptions,
+  SideTaskSessionRequest,
   DaemonSubagentSessionResolution,
   DaemonSessionGroup,
   DaemonSessionGroupCatalog,
@@ -2463,7 +2465,9 @@ export class DaemonClient {
       {
         method: 'POST',
         headers: this.headers({ 'Content-Type': 'application/json' }, clientId),
-        body: JSON.stringify({ name: req.name }),
+        body: JSON.stringify({
+          ...(req.name !== undefined ? { name: req.name } : {}),
+        }),
       },
       async (res) => {
         if (!res.ok) {
@@ -2474,6 +2478,29 @@ export class DaemonClient {
     );
   }
 
+  async createSideTaskSession(
+    sessionId: string,
+    req: SideTaskSessionRequest = {},
+    clientId?: string,
+  ): Promise<DaemonSideTaskSession> {
+    return await this.fetchWithTimeout(
+      `${this.baseUrl}/session/${urlEncode(sessionId)}/side-task`,
+      {
+        method: 'POST',
+        headers: this.headers({ 'Content-Type': 'application/json' }, clientId),
+        body: JSON.stringify({
+          ...(req.name !== undefined ? { name: req.name } : {}),
+        }),
+      },
+      async (res) => {
+        if (!res.ok) {
+          throw await this.failOnError(res, 'POST /session/:id/side-task');
+        }
+        return (await res.json()) as DaemonSideTaskSession;
+      },
+    );
+  }
+
   async forkSession(
     sessionId: string,
     req: ForkSessionRequest,
diff --git a/packages/sdk-typescript/src/daemon/index.ts b/packages/sdk-typescript/src/daemon/index.ts
index 4a0be90a017..249b1aa3f70 100644
--- a/packages/sdk-typescript/src/daemon/index.ts
+++ b/packages/sdk-typescript/src/daemon/index.ts
@@ -470,8 +470,10 @@ export type {
   DaemonProtocolVersions,
   BranchSessionRequest,
   DaemonBranchedSession,
+  DaemonSideTaskSession,
   DaemonForkSessionResult,
   ForkSessionRequest,
+  SideTaskSessionRequest,
   DaemonRestoredSession,
   DaemonSession,
   DaemonSessionArchiveState,
diff --git a/packages/sdk-typescript/src/daemon/types.ts b/packages/sdk-typescript/src/daemon/types.ts
index 963cde77635..db61813c335 100644
--- a/packages/sdk-typescript/src/daemon/types.ts
+++ b/packages/sdk-typescript/src/daemon/types.ts
@@ -838,6 +838,15 @@ export interface DaemonBranchedSession extends DaemonRestoredSession {
   forkedFrom: { sessionId: string; displayName: string };
 }
 
+export interface SideTaskSessionRequest {
+  name?: string;
+}
+
+export interface DaemonSideTaskSession extends DaemonRestoredSession {
+  displayName: string;
+  parentSessionId: string;
+}
+
 export interface ForkSessionRequest {
   directive: string;
 }
diff --git a/packages/sdk-typescript/test/unit/DaemonClient.test.ts b/packages/sdk-typescript/test/unit/DaemonClient.test.ts
index 8990ba0ccac..4fa87e121f4 100644
--- a/packages/sdk-typescript/test/unit/DaemonClient.test.ts
+++ b/packages/sdk-typescript/test/unit/DaemonClient.test.ts
@@ -2699,6 +2699,38 @@ describe('DaemonClient', () => {
     });
   });
 
+  describe('createSideTaskSession', () => {
+    it('uses the dedicated side-task endpoint', async () => {
+      const { fetch, calls } = recordingFetch(() =>
+        jsonResponse(201, {
+          sessionId: 'side-1',
+          workspaceCwd: '/work/a',
+          attached: false,
+          state: {},
+          displayName: 'Side task',
+          parentSessionId: 'main-1',
+          sourceType: 'side_task',
+          sourceId: 'main-1',
+        }),
+      );
+      const client = new DaemonClient({ baseUrl: 'http://daemon', fetch });
+
+      await client.createSideTaskSession(
+        'main-1',
+        {
+          name: 'Side task',
+        },
+        'side-task-client',
+      );
+
+      expect(calls[0]?.url).toBe('http://daemon/session/main-1/side-task');
+      expect(calls[0]?.headers['x-qwen-client-id']).toBe('side-task-client');
+      expect(JSON.parse(calls[0]!.body!)).toEqual({
+        name: 'Side task',
+      });
+    });
+  });
+
   describe('cancel', () => {
     it('POSTs /cancel and tolerates 204', async () => {
       const { fetch, calls } = recordingFetch(
diff --git a/packages/web-shell/README.md b/packages/web-shell/README.md
index f2b3c175b52..53f1468216a 100644
--- a/packages/web-shell/README.md
+++ b/packages/web-shell/README.md
@@ -368,5 +368,7 @@ Chart/Data 控件、无数据提示和错误提示默认跟随 WebShell 语言
 | `/init`          | ACP 透传            | 分析项目并创建定制的 `QWEN.md`。                                                                                        |
 | `/stats`         | ACP 透传            | 显示统计信息，包含 `model`、`tools` 子命令。                                                                            |
 | `/summary`       | ACP 透传            | 生成当前会话摘要。                                                                                                      |
-| `/tasks`         | ACP 透传            | 列出后台任务。                                                                                                          |
+| `/tasks`         | 本地实现            | 打开环境信息面板并刷新后台任务。                                                                                        |
+| `/btw`           | 本地实现 + ACP 透传 | daemon 支持侧边任务时新建侧边任务；否则发送一个不影响主对话的侧边问题。                                                 |
+| `/fork`          | 本地实现 + ACP 透传 | 启动共享当前上下文的后台智能体。                                                                                        |
 | `/insight`       | ACP 透传            | 查看 insight 相关信息。                                                                                                 |
diff --git a/packages/web-shell/client/App.module.css b/packages/web-shell/client/App.module.css
index 5a0edd1b803..a6e9c0ae5ea 100644
--- a/packages/web-shell/client/App.module.css
+++ b/packages/web-shell/client/App.module.css
@@ -59,6 +59,49 @@
   overflow: hidden;
 }
 
+.contextShell {
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.chatHeaderRow {
+  display: flex;
+  min-width: 0;
+  flex: 0 0 auto;
+  align-items: center;
+  border-bottom: 1px solid var(--border);
+  background: var(--background);
+}
+
+.customChatHeader {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.contextBody {
+  position: relative;
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.contextBodyWithEnvironmentPanel .chatPane,
+.contextBodyWithEnvironmentPanel .content {
+  overflow: visible;
+}
+
+.contextBodyWithEnvironmentPanel [data-web-shell-message-list] {
+  box-sizing: border-box;
+  width: calc(100% + 332px);
+  padding-right: 356px;
+}
+
 .chatPane {
   flex: 1 1 auto;
   min-width: 0;
@@ -760,10 +803,6 @@
   margin-bottom: 8px;
 }
 
-.chatHeader {
-  flex-shrink: 0;
-}
-
 .customFooter {
   flex-shrink: 0;
 }
diff --git a/packages/web-shell/client/App.test.tsx b/packages/web-shell/client/App.test.tsx
index 3050186dc00..9ff32908af5 100644
--- a/packages/web-shell/client/App.test.tsx
+++ b/packages/web-shell/client/App.test.tsx
@@ -1,10 +1,11 @@
 // @vitest-environment jsdom
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { act, createRef, type CSSProperties } from 'react';
+import { act, createRef, type CSSProperties, type ReactNode } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import type {
   DaemonInputAnnotation,
   DaemonSessionMonitorTaskStatus,
+  DaemonSessionShellTaskStatus,
   DaemonSettingDescriptor,
   DaemonWorkspaceGitStatus,
 } from '@qwen-code/sdk/daemon';
@@ -80,6 +81,8 @@ type ChatEditorTestProps = {
   gitBranch?: string;
   gitStatus?: DaemonWorkspaceGitStatus;
   onOpenGitDiff?: () => void;
+  visibleToolbarActions?: string[];
+  onChatWidthModeChange?: (mode: '1000' | 'wide') => void;
 };
 
 type AddWorkspaceDialogTestProps = {
@@ -164,7 +167,10 @@ const {
       workspaceProviders: qualifiedWorkspaceProviders,
       setWorkspaceSetting: qualifiedSetWorkspaceSetting,
     })),
-    sessionStatus: vi.fn(() => Promise.resolve({})),
+    sessionStatus: vi.fn(() =>
+      Promise.resolve({ workspaceCwd: '/tmp/project' }),
+    ),
+    listWorkspaceSessions: vi.fn(() => Promise.resolve([])),
   };
   const settingsSetValue = vi.fn().mockResolvedValue(undefined);
   return {
@@ -254,6 +260,7 @@ const {
       messages: [] as unknown[],
       chatEditorRenderCount: 0,
       latestChatEditorProps: null as ChatEditorTestProps | null,
+      latestStatusBarTasks: null as DaemonSessionMonitorTaskStatus[] | null,
       latestMessageListProps: null as {
         failedPromptMessageId?: string;
         onRetryFailedPrompt?: () => void;
@@ -316,6 +323,7 @@ const {
 
 vi.mock('@qwen-code/webui/daemon-react-sdk', () => ({
   DAEMON_APPROVAL_MODES: ['default', 'plan', 'auto-edit', 'auto', 'yolo'],
+  DaemonSessionProvider: ({ children }: { children: ReactNode }) => children,
   useActions: () => mockSessionActions,
   useConnection: () => mockConnection,
   useDaemonFollowupSuggestion: () => ({
@@ -817,7 +825,15 @@ function mockComponent(path: string, exportName: string): void {
   });
 }
 
-mockComponent('./components/StatusBar', 'StatusBar');
+vi.doMock('./components/StatusBar', async () => {
+  const React = await import('react');
+  return {
+    StatusBar: (props: { tasks?: DaemonSessionMonitorTaskStatus[] }) => {
+      testState.latestStatusBarTasks = props.tasks ?? [];
+      return React.createElement('div');
+    },
+  };
+});
 vi.doMock('./components/StreamingStatus', async () => {
   const React = await import('react');
   return {
@@ -858,6 +874,11 @@ vi.doMock('./components/SplitView', async () => {
         workspaceActions: unknown,
       ) => void;
       onRightPanelOpen?: (request: unknown) => void;
+      onOpenMonitor?: (
+        task: DaemonSessionMonitorTaskStatus,
+        sessionId: string,
+        sessionActions: typeof mockSessionActions,
+      ) => void;
       renderPaneHeaderActions?: (info: {
         sessionId: string;
         workspaceCwd?: string;
@@ -966,6 +987,32 @@ vi.doMock('./components/SplitView', async () => {
           },
           'open artifact',
         ),
+        React.createElement(
+          'button',
+          {
+            'data-testid': 'split-open-monitor',
+            type: 'button',
+            onClick: () =>
+              props.onOpenMonitor?.(
+                {
+                  kind: 'monitor',
+                  id: 'monitor-1',
+                  label: 'monitor-label',
+                  description: 'watch pane logs',
+                  status: 'running',
+                  startTime: 1,
+                  runtimeMs: 10,
+                  command: 'tail -f pane.log',
+                  eventCount: 1,
+                  droppedLines: 0,
+                  toolUseId: 'monitor-call',
+                },
+                'pane-session',
+                mockSessionActions,
+              ),
+          },
+          'open monitor',
+        ),
         React.createElement(
           'button',
           {
@@ -1092,6 +1139,12 @@ vi.doMock('./components/messages/TasksStatusMessage', async () => {
       return React.createElement('div');
     },
     MonitorTaskDetail: () => React.createElement('div'),
+    ShellTaskDetail: (props: { task: DaemonSessionShellTaskStatus }) =>
+      React.createElement(
+        'div',
+        null,
+        `${props.task.command} ${props.task.cwd}`,
+      ),
   };
 });
 vi.doMock('./monitorDetailsContext', async () => {
@@ -1113,8 +1166,13 @@ vi.doMock('./monitorDetailsContext', async () => {
 mockComponent('./components/messages/BtwMessage', 'BtwMessage');
 mockComponent('./components/QueuedPromptDisplay', 'QueuedPromptDisplay');
 
-const { App, getBackgroundTaskActivityKey, mergeMonitorTaskSnapshot } =
-  await import('./App');
+const {
+  App,
+  getTaskActivityKey,
+  getEnvironmentAgentTasks,
+  mergeMonitorTaskSnapshot,
+  mergeSideTaskCatalog,
+} = await import('./App');
 
 (
   globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
@@ -1122,8 +1180,64 @@ const { App, getBackgroundTaskActivityKey, mergeMonitorTaskSnapshot } =
 
 const mounted: Array<{ root: Root; container: HTMLElement }> = [];
 
-describe('background task activity key', () => {
-  it('includes background shells and monitors but excludes background agents', () => {
+describe('mergeSideTaskCatalog', () => {
+  const listed = (sessionId: string) => ({ sessionId, title: sessionId });
+
+  it('replaces the catalog when the parent session changes', () => {
+    const next = mergeSideTaskCatalog(
+      { parentSessionId: 'parent-a', items: [listed('stale')], loaded: true },
+      'parent-b',
+      [listed('b1')],
+      new Set(['stale']),
+    );
+    expect(next).toEqual({
+      parentSessionId: 'parent-b',
+      items: [listed('b1')],
+      loaded: true,
+    });
+  });
+
+  it('treats a successful listing as authoritative for confirmed items', () => {
+    const next = mergeSideTaskCatalog(
+      {
+        parentSessionId: 'parent-a',
+        items: [listed('kept'), listed('deleted-elsewhere')],
+        loaded: true,
+      },
+      'parent-a',
+      [listed('kept')],
+      new Set(),
+    );
+    expect(next.items.map((item) => item.sessionId)).toEqual(['kept']);
+  });
+
+  it('keeps a locally created draft the listing has not echoed yet', () => {
+    const next = mergeSideTaskCatalog(
+      {
+        parentSessionId: 'parent-a',
+        items: [listed('kept'), listed('draft')],
+        loaded: true,
+      },
+      'parent-a',
+      [listed('kept')],
+      new Set(['draft']),
+    );
+    expect(next.items.map((item) => item.sessionId)).toEqual(['kept', 'draft']);
+  });
+
+  it('does not duplicate a draft once the listing confirms it', () => {
+    const next = mergeSideTaskCatalog(
+      { parentSessionId: 'parent-a', items: [listed('draft')], loaded: true },
+      'parent-a',
+      [listed('draft')],
+      new Set(['draft']),
+    );
+    expect(next.items.map((item) => item.sessionId)).toEqual(['draft']);
+  });
+});
+
+describe('task activity key', () => {
+  it('includes background shells in any tool-call state', () => {
     const messages = [
       {
         id: 'tools',
@@ -1139,20 +1253,40 @@ describe('background task activity key', () => {
             callId: 'agent-call',
             toolName: 'agent',
             status: 'pending',
-            args: { run_in_background: true },
+            args: {},
+            subTools: [
+              {
+                callId: 'nested-shell',
+                toolName: 'run_shell_command',
+                status: 'completed',
+                args: { is_background: true },
+              },
+            ],
+          },
+          {
+            callId: 'foreground-agent',
+            toolName: 'agent',
+            status: 'in_progress',
+            args: { run_in_background: false },
+          },
+          {
+            callId: 'completed-shell',
+            toolName: 'shell',
+            status: 'completed',
+            args: { is_background: true },
           },
           {
             callId: 'monitor-call',
             toolName: 'monitor',
             status: 'completed',
-            args: {},
+            args: { command: 'npm run dev --watch' },
           },
         ],
       },
     ] satisfies Message[];
 
-    expect(getBackgroundTaskActivityKey(messages)).toBe(
-      'shell-call:in_progress|monitor-call:completed',
+    expect(getTaskActivityKey(messages)).toBe(
+      'shell-call:in_progress|agent-call:pending|nested-shell:completed|completed-shell:completed|monitor-call:completed',
     );
   });
 
@@ -1188,26 +1322,7 @@ describe('background task activity key', () => {
     expect(mockSessionActions.getTasks).not.toHaveBeenCalled();
   });
 
-  it('restarts shared task polling when a monitor opens from the task dialog', async () => {
-    const task: DaemonSessionMonitorTaskStatus = {
-      kind: 'monitor',
-      id: 'monitor-1',
-      label: 'monitor-label',
-      description: 'watch server log',
-      status: 'running',
-      startTime: 1_000,
-      runtimeMs: 5_000,
-      command: 'tail -f server.log',
-      eventCount: 3,
-      lastEventTime: 5_000,
-      droppedLines: 0,
-    };
-    mockSessionActions.getTasks.mockResolvedValue({
-      v: 1,
-      sessionId: 'session-1',
-      now: 6_000,
-      tasks: [task],
-    });
+  it('opens environment information for /tasks without a dialog', async () => {
     const { container } = renderApp();
     await flush();
     expect(testState.latestBackgroundTasksRefreshTrigger).toBe(0);
@@ -1215,14 +1330,14 @@ describe('background task activity key', () => {
     testState.prompt = '/tasks';
     await clickSubmit(container);
     await flush();
-    expect(testState.latestTasksStatusProps?.onOpenMonitor).toBeTypeOf(
-      'function',
-    );
-
-    act(() => {
-      testState.latestTasksStatusProps?.onOpenMonitor?.(task);
-    });
 
+    expect(
+      container.querySelector(
+        '[data-testid="environment-panel"]:not([hidden])',
+      ),
+    ).not.toBeNull();
+    expect(testState.latestTasksStatusProps).toBeNull();
+    expect(mockSessionActions.getTasks).not.toHaveBeenCalled();
     expect(testState.latestBackgroundTasksRefreshTrigger).toBe(1);
   });
 
@@ -1269,6 +1384,23 @@ describe('background task activity key', () => {
       container.querySelector('button[title="watch server log"]'),
     ).not.toBeNull();
     expect(testState.latestBackgroundTasksRefreshTrigger).toBe(1);
+
+    act(() => {
+      container
+        .querySelector<HTMLButtonElement>(
+          'button[aria-label="Toggle environment information"]',
+        )
+        ?.click();
+    });
+
+    expect(
+      container.querySelector(
+        '[data-testid="environment-panel"]:not([hidden])',
+      ),
+    ).not.toBeNull();
+    expect(
+      container.querySelector('button[title="watch server log"]'),
+    ).not.toBeNull();
   });
 
   it('merges a reopened monitor into its existing tab', async () => {
@@ -1286,24 +1418,22 @@ describe('background task activity key', () => {
       lastEventTime: 5_000,
       droppedLines: 0,
     };
-    mockSessionActions.getTasks.mockResolvedValue({
+    mockConnection.capabilities.features = ['session_monitor_tool_correlation'];
+    mockSessionActions.getTasks.mockResolvedValueOnce({
       v: 1,
       sessionId: 'session-1',
       now: 6_000,
-      tasks: [stopped],
+      tasks: [{ ...stopped, toolUseId: 'monitor-call' }],
     });
     const { container } = renderApp();
     await flush();
 
-    testState.prompt = '/tasks';
-    await clickSubmit(container);
-    await flush();
-    expect(testState.latestTasksStatusProps?.onOpenMonitor).toBeTypeOf(
-      'function',
-    );
-
-    act(() => {
-      testState.latestTasksStatusProps?.onOpenMonitor?.(stopped);
+    await act(async () => {
+      await testState.latestMonitorDetailsOnOpen?.({
+        callId: 'monitor-call',
+        toolName: 'monitor',
+        status: 'completed',
+      });
     });
     await flush();
 
@@ -1325,8 +1455,18 @@ describe('background task activity key', () => {
       lastEventTime: 5_000,
       droppedLines: 0,
     };
-    act(() => {
-      testState.latestTasksStatusProps?.onOpenMonitor?.(running);
+    mockSessionActions.getTasks.mockResolvedValueOnce({
+      v: 1,
+      sessionId: 'session-1',
+      now: 7_000,
+      tasks: [{ ...running, toolUseId: 'monitor-call' }],
+    });
+    await act(async () => {
+      await testState.latestMonitorDetailsOnOpen?.({
+        callId: 'monitor-call',
+        toolName: 'monitor',
+        status: 'completed',
+      });
     });
     await flush();
 
@@ -1464,98 +1604,492 @@ describe('background task activity key', () => {
   });
 });
 
-function renderApp(props: React.ComponentProps<typeof App> = {}): {
-  container: HTMLElement;
-  rerender: (nextProps?: React.ComponentProps<typeof App>) => void;
-  unmount: () => void;
-} {
-  const container = document.createElement('div');
-  document.body.appendChild(container);
-  const root = createRoot(container);
-  const doRender = (nextProps: React.ComponentProps<typeof App> = props) => {
-    act(() => {
-      root.render(<App sidebar={{ enabled: true }} {...nextProps} />);
-    });
-  };
-  doRender(props);
-  const entry = { root, container };
-  mounted.push(entry);
-  const unmount = () => {
-    const index = mounted.indexOf(entry);
-    if (index >= 0) mounted.splice(index, 1);
-    act(() => root.unmount());
-    container.remove();
-  };
-  return { container, rerender: doRender, unmount };
-}
+describe('environment agent tasks', () => {
+  it('keeps a completed foreground agent from the session transcript', () => {
+    const messages = [
+      {
+        id: 'tools',
+        role: 'tool_group',
+        tools: [
+          {
+            callId: 'agent-call',
+            toolName: 'agent',
+            title: 'Agent: Explore code',
+            status: 'completed',
+            args: {
+              description: 'Explore code',
+              run_in_background: false,
+            },
+            rawOutput: {
+              type: 'task_execution',
+              status: 'completed',
+              subagentColor: 'purple',
+            },
+          },
+        ],
+      },
+    ] satisfies Message[];
 
-async function flush(): Promise<void> {
-  await act(async () => {
-    await Promise.resolve();
+    expect(getEnvironmentAgentTasks(messages, [])).toMatchObject([
+      {
+        id: 'agent-call',
+        label: 'Explore code',
+        status: 'completed',
+        color: 'purple',
+        isBackgrounded: false,
+        toolUseId: 'agent-call',
+      },
+    ]);
   });
-}
 
-async function clickSubmit(container: HTMLElement): Promise<void> {
-  await act(async () => {
-    container
-      .querySelector<HTMLButtonElement>('[data-testid="submit"]')
-      ?.click();
-    await Promise.resolve();
-  });
-}
+  it('uses the prompt for a generic Agent title and ignores nested tools', () => {
+    const messages = [
+      {
+        id: 'tools',
+        role: 'tool_group',
+        tools: [
+          {
+            callId: 'agent-call',
+            toolName: 'agent',
+            title: 'Agent',
+            status: 'in_progress',
+            args: {
+              prompt: '查询杭州明天天气',
+              run_in_background: true,
+            },
+            subTools: [
+              {
+                callId: 'search-call',
+                toolName: 'web_search',
+                status: 'completed',
+                subContent: 'result',
+              },
+            ],
+          },
+        ],
+      },
+    ] satisfies Message[];
 
-function deferred<T>(): {
-  promise: Promise<T>;
-  resolve: (value?: T | PromiseLike<T>) => void;
-  reject: (reason?: unknown) => void;
-} {
-  let resolve!: (value?: T | PromiseLike<T>) => void;
-  let reject!: (reason?: unknown) => void;
-  const promise = new Promise<T>((res, rej) => {
-    resolve = (value) => res(value as T | PromiseLike<T>);
-    reject = rej;
+    expect(getEnvironmentAgentTasks(messages, [])).toMatchObject([
+      {
+        id: 'agent-call',
+        label: '查询杭州明天天气',
+      },
+    ]);
   });
-  return { promise, resolve, reject };
-}
 
-// A transcript block shaped like extractPendingPermission() expects. Defaults to
-// a non-AskUserQuestion tool (→ pendingToolApproval); pass toolName
-// 'ask_user_question' to exercise the pendingAskUserApproval branch instead.
-// isAskUserPermission() classifies by rawInput.questions being a non-empty
-// array, so the ask-user variant carries a toolCall.input.questions payload
-// (getPermissionRawInput reads toolCall.input) — a bare toolName isn't enough.
-function makePendingPermissionBlock(
-  overrides: { resolved?: boolean; toolName?: string } = {},
-): unknown {
-  const toolName = overrides.toolName ?? 'run_shell_command';
-  const isAskUser = toolName === 'ask_user_question';
-  return {
-    kind: 'permission',
-    resolved: overrides.resolved ?? false,
-    requestId: 'req-1',
-    sessionId: 'session-1',
-    title: 'Run ls',
-    toolCall: {
-      toolCallId: 'tc-1',
-      kind: isAskUser ? 'other' : 'execute',
-      _meta: { toolName },
-      ...(isAskUser
-        ? { input: { questions: [{ question: 'Pick one', options: [] }] } }
-        : {}),
-    },
-    options: [
-      { optionId: 'proceed_once', label: 'Allow', raw: {} },
-      { optionId: 'cancel', label: 'Reject', raw: {} },
-    ],
-  };
-}
+  it('keeps the transcript color when a live agent task is available', () => {
+    const messages = [
+      {
+        id: 'tools',
+        role: 'tool_group',
+        tools: [
+          {
+            callId: 'agent-call',
+            toolName: 'agent',
+            title: 'Agent: Review code',
+            status: 'in_progress',
+            args: { subagent_type: 'reviewer' },
+            rawOutput: {
+              type: 'task_execution',
+              subagentColor: 'purple',
+            },
+          },
+        ],
+      },
+    ] satisfies Message[];
+    const liveTask = {
+      kind: 'agent' as const,
+      id: 'agent-task',
+      label: 'reviewer: Review code',
+      description: 'Review code',
+      subagentType: 'reviewer',
+      status: 'running' as const,
+      startTime: 1,
+      runtimeMs: 1,
+      isBackgrounded: true,
+      toolUseId: 'agent-call',
+    };
 
-beforeEach(() => {
-  // Split persistence uses sessionStorage; clear it so one test's split doesn't
-  // auto-restore into the next test's App mount.
-  sessionStorage.clear();
-  Object.defineProperty(window, 'matchMedia', {
-    configurable: true,
+    expect(getEnvironmentAgentTasks(messages, [liveTask])).toMatchObject([
+      {
+        id: 'agent-task',
+        color: 'purple',
+      },
+    ]);
+  });
+
+  it('deduplicates a live agent by the task id recorded in the message stream', () => {
+    const messages = [
+      {
+        id: 'tools',
+        role: 'tool_group',
+        tools: [
+          {
+            callId: 'call-agent-1',
+            toolName: 'agent',
+            title: 'Agent: Review code',
+            status: 'in_progress',
+            args: { subagent_type: 'shadcn-ux' },
+          },
+        ],
+      },
+      {
+        id: 'agent-notification',
+        role: 'system',
+        content: 'background agent completed',
+        variant: 'info',
+        source: 'background_notification',
+        data: {
+          kind: 'agent',
+          taskId: 'agent-runtime-id',
+          toolUseId: 'call-agent-1',
+          status: 'completed',
+        },
+      },
+    ] satisfies Message[];
+    const liveTask = {
+      kind: 'agent' as const,
+      id: 'agent-runtime-id',
+      label: 'shadcn-ux: Review code',
+      description: 'Review code',
+      subagentType: 'shadcn-ux',
+      status: 'completed' as const,
+      startTime: 1,
+      runtimeMs: 1,
+      isBackgrounded: true,
+    };
+
+    expect(getEnvironmentAgentTasks(messages, [liveTask])).toMatchObject([
+      {
+        id: 'agent-runtime-id',
+        label: 'Review code',
+        status: 'completed',
+      },
+    ]);
+  });
+
+  it('deduplicates a completed background agent whose live task lost its toolUseId', () => {
+    const messages = [
+      {
+        id: 'tools',
+        role: 'tool_group',
+        tools: [
+          {
+            callId: 'call-agent-1',
+            toolName: 'agent',
+            title: 'Agent: Review code',
+            status: 'completed',
+            args: {
+              description: 'Review code',
+              prompt: 'Review the diff for bugs',
+              subagent_type: 'general-purpose',
+              run_in_background: true,
+            },
+            rawOutput: {
+              type: 'task_execution',
+              status: 'completed',
+            },
+          },
+        ],
+      },
+      {
+        id: 'agent-notification',
+        role: 'system',
+        content: 'background agent completed',
+        variant: 'info',
+        source: 'background_notification',
+        data: {
+          kind: 'agent',
+          taskId: 'general-purpose-internal-1',
+          status: 'completed',
+        },
+      },
+    ] satisfies Message[];
+    const liveTask = {
+      kind: 'agent' as const,
+      id: 'general-purpose-internal-1',
+      label: 'general-purpose: Review code',
+      description: 'Review code',
+      prompt: 'Review the diff for bugs',
+      subagentType: 'general-purpose',
+      status: 'completed' as const,
+      startTime: 1,
+      runtimeMs: 1,
+      isBackgrounded: true,
+    };
+
+    expect(getEnvironmentAgentTasks(messages, [liveTask])).toMatchObject([
+      {
+        id: 'general-purpose-internal-1',
+        label: 'Review code',
+        status: 'completed',
+      },
+    ]);
+  });
+
+  it('deduplicates a completed background agent with no toolUseId or prompt on the live task', () => {
+    const messages = [
+      {
+        id: 'tools',
+        role: 'tool_group',
+        tools: [
+          {
+            callId: 'call-agent-1',
+            toolName: 'agent',
+            title: 'Agent: Fix lint errors',
+            status: 'completed',
+            args: {
+              description: 'Fix lint errors',
+              prompt: 'Fix all lint errors in src/',
+              run_in_background: true,
+            },
+            rawOutput: {
+              type: 'task_execution',
+              status: 'completed',
+            },
+          },
+        ],
+      },
+      {
+        id: 'agent-notification',
+        role: 'system',
+        content: 'background agent completed',
+        variant: 'info',
+        source: 'background_notification',
+        data: {
+          kind: 'agent',
+          taskId: 'general-purpose-internal-2',
+          status: 'completed',
+        },
+      },
+    ] satisfies Message[];
+    const liveTask = {
+      kind: 'agent' as const,
+      id: 'general-purpose-internal-2',
+      label: 'general-purpose: Fix lint errors',
+      description: 'Fix lint errors',
+      status: 'completed' as const,
+      startTime: 1,
+      runtimeMs: 1,
+      isBackgrounded: true,
+    };
+
+    expect(getEnvironmentAgentTasks(messages, [liveTask])).toMatchObject([
+      {
+        id: 'general-purpose-internal-2',
+        label: 'Fix lint errors',
+        status: 'completed',
+      },
+    ]);
+  });
+
+  it('does not collapse two agents that share a description when one is linked precisely', () => {
+    const messages = [
+      {
+        id: 'tools',
+        role: 'tool_group',
+        tools: [
+          {
+            callId: 'call-A',
+            toolName: 'agent',
+            title: 'Agent: Review code',
+            status: 'completed',
+            args: { description: 'Review code', run_in_background: true },
+            rawOutput: { type: 'task_execution', status: 'completed' },
+          },
+          {
+            callId: 'call-B',
+            toolName: 'agent',
+            title: 'Agent: Review code',
+            status: 'completed',
+            args: { description: 'Review code', run_in_background: true },
+            rawOutput: { type: 'task_execution', status: 'completed' },
+          },
+        ],
+      },
+    ] satisfies Message[];
+    // The precisely-linked task is listed first so a loose description fallback
+    // would steal it before reaching the orphaned one.
+    const linkedTask = {
+      kind: 'agent' as const,
+      id: 'task-B',
+      label: 'Review code',
+      description: 'Review code',
+      status: 'completed' as const,
+      startTime: 1,
+      runtimeMs: 1,
+      isBackgrounded: true,
+      toolUseId: 'call-B',
+    };
+    const orphanTask = {
+      kind: 'agent' as const,
+      id: 'task-A',
+      label: 'Review code',
+      description: 'Review code',
+      status: 'completed' as const,
+      startTime: 1,
+      runtimeMs: 1,
+      isBackgrounded: true,
+    };
+
+    const result = getEnvironmentAgentTasks(messages, [linkedTask, orphanTask]);
+    expect(result).toHaveLength(2);
+    expect(result).toMatchObject([
+      { id: 'task-A', description: 'Review code', status: 'completed' },
+      { id: 'task-B', description: 'Review code', status: 'completed' },
+    ]);
+  });
+
+  it('lists two precisely-linked agents that share a description once each', () => {
+    const messages = [
+      {
+        id: 'tools',
+        role: 'tool_group',
+        tools: [
+          {
+            callId: 'call-A',
+            toolName: 'agent',
+            title: 'Agent: Review code',
+            status: 'completed',
+            args: { description: 'Review code', run_in_background: true },
+            rawOutput: { type: 'task_execution', status: 'completed' },
+          },
+          {
+            callId: 'call-B',
+            toolName: 'agent',
+            title: 'Agent: Review code',
+            status: 'completed',
+            args: { description: 'Review code', run_in_background: true },
+            rawOutput: { type: 'task_execution', status: 'completed' },
+          },
+        ],
+      },
+    ] satisfies Message[];
+    const taskA = {
+      kind: 'agent' as const,
+      id: 'task-A',
+      label: 'Review code',
+      description: 'Review code',
+      status: 'completed' as const,
+      startTime: 1,
+      runtimeMs: 1,
+      isBackgrounded: true,
+      toolUseId: 'call-A',
+    };
+    const taskB = {
+      kind: 'agent' as const,
+      id: 'task-B',
+      label: 'Review code',
+      description: 'Review code',
+      status: 'completed' as const,
+      startTime: 1,
+      runtimeMs: 1,
+      isBackgrounded: true,
+      toolUseId: 'call-B',
+    };
+
+    const result = getEnvironmentAgentTasks(messages, [taskA, taskB]);
+    expect(result).toHaveLength(2);
+    expect(result).toMatchObject([{ id: 'task-A' }, { id: 'task-B' }]);
+  });
+});
+
+function renderApp(props: React.ComponentProps<typeof App> = {}): {
+  container: HTMLElement;
+  rerender: (nextProps?: React.ComponentProps<typeof App>) => void;
+  unmount: () => void;
+} {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  const doRender = (nextProps: React.ComponentProps<typeof App> = props) => {
+    act(() => {
+      root.render(
+        <App sidebar={{ enabled: true }} header={{}} {...nextProps} />,
+      );
+    });
+  };
+  doRender(props);
+  const entry = { root, container };
+  mounted.push(entry);
+  const unmount = () => {
+    const index = mounted.indexOf(entry);
+    if (index >= 0) mounted.splice(index, 1);
+    act(() => root.unmount());
+    container.remove();
+  };
+  return { container, rerender: doRender, unmount };
+}
+
+async function flush(): Promise<void> {
+  await act(async () => {
+    await Promise.resolve();
+  });
+}
+
+async function clickSubmit(container: HTMLElement): Promise<void> {
+  await act(async () => {
+    container
+      .querySelector<HTMLButtonElement>('[data-testid="submit"]')
+      ?.click();
+    await Promise.resolve();
+  });
+}
+
+function deferred<T>(): {
+  promise: Promise<T>;
+  resolve: (value?: T | PromiseLike<T>) => void;
+  reject: (reason?: unknown) => void;
+} {
+  let resolve!: (value?: T | PromiseLike<T>) => void;
+  let reject!: (reason?: unknown) => void;
+  const promise = new Promise<T>((res, rej) => {
+    resolve = (value) => res(value as T | PromiseLike<T>);
+    reject = rej;
+  });
+  return { promise, resolve, reject };
+}
+
+// A transcript block shaped like extractPendingPermission() expects. Defaults to
+// a non-AskUserQuestion tool (→ pendingToolApproval); pass toolName
+// 'ask_user_question' to exercise the pendingAskUserApproval branch instead.
+// isAskUserPermission() classifies by rawInput.questions being a non-empty
+// array, so the ask-user variant carries a toolCall.input.questions payload
+// (getPermissionRawInput reads toolCall.input) — a bare toolName isn't enough.
+function makePendingPermissionBlock(
+  overrides: { resolved?: boolean; toolName?: string } = {},
+): unknown {
+  const toolName = overrides.toolName ?? 'run_shell_command';
+  const isAskUser = toolName === 'ask_user_question';
+  return {
+    kind: 'permission',
+    resolved: overrides.resolved ?? false,
+    requestId: 'req-1',
+    sessionId: 'session-1',
+    title: 'Run ls',
+    toolCall: {
+      toolCallId: 'tc-1',
+      kind: isAskUser ? 'other' : 'execute',
+      _meta: { toolName },
+      ...(isAskUser
+        ? { input: { questions: [{ question: 'Pick one', options: [] }] } }
+        : {}),
+    },
+    options: [
+      { optionId: 'proceed_once', label: 'Allow', raw: {} },
+      { optionId: 'cancel', label: 'Reject', raw: {} },
+    ],
+  };
+}
+
+beforeEach(() => {
+  // Split persistence uses sessionStorage; clear it so one test's split doesn't
+  // auto-restore into the next test's App mount.
+  sessionStorage.clear();
+  localStorage.removeItem('qwen-code-web-shell-chat-width');
+  Object.defineProperty(window, 'matchMedia', {
+    configurable: true,
     // Query-aware: report a large screen (min-width matches) so the Session
     // Overview entry point is available, while keeping the mobile (max-width)
     // query false as the other tests expect.
@@ -1604,6 +2138,12 @@ beforeEach(() => {
     }),
   }));
   mockWorkspace.client.workspaceById.mockClear();
+  mockWorkspace.client.sessionStatus.mockReset();
+  mockWorkspace.client.sessionStatus.mockResolvedValue({
+    workspaceCwd: '/tmp/project',
+  });
+  mockWorkspace.client.listWorkspaceSessions.mockReset();
+  mockWorkspace.client.listWorkspaceSessions.mockResolvedValue([]);
   testState.prompt = 'hello';
   testState.inputAnnotations = undefined;
   testState.promptImages = undefined;
@@ -1612,6 +2152,7 @@ beforeEach(() => {
   testState.messages = [];
   testState.chatEditorRenderCount = 0;
   testState.latestChatEditorProps = null;
+  testState.latestStatusBarTasks = null;
   testState.latestMessageListProps = null;
   testState.latestAddWorkspaceDialogProps = null;
   testState.latestToolApprovalKeyboardActive = null;
@@ -3505,77 +4046,929 @@ describe('App session callbacks', () => {
     await flush();
 
     await act(async () => {
-      testState.latestChatEditorProps?.onSubmit('/model --voice');
+      testState.latestChatEditorProps?.onSubmit('/model --voice');
+      await Promise.resolve();
+    });
+    act(() => {
+      container
+        .querySelector<HTMLButtonElement>('[data-testid="open-split-view"]')
+        ?.click();
+    });
+    await act(async () => {
+      providersResult.resolve(providerStatus);
+      await Promise.resolve();
+    });
+    await flush();
+
+    expect(container.querySelector('[data-testid="model-select"]')).toBeNull();
+  });
+
+  it('does not open a pending command Voice picker after entering Settings', async () => {
+    mockConnection.workspaceCwd = '/work/secondary';
+    mockWorkspace.capabilities = {
+      workspaceCwd: '/work/primary',
+      features: [
+        'workspace_qualified_voice',
+        'workspace_qualified_rest_core',
+        'workspace_settings',
+      ],
+      workspaces: [
+        {
+          id: 'primary',
+          cwd: '/work/primary',
+          primary: true,
+          trusted: true,
+        },
+        {
+          id: 'secondary',
+          cwd: '/work/secondary',
+          primary: false,
+          trusted: true,
+        },
+      ],
+    } as typeof mockWorkspace.capabilities;
+    const providerStatus = {
+      v: 1 as const,
+      workspaceCwd: '/work/secondary',
+      initialized: true,
+      providers: [],
+    };
+    const providersResult = deferred<typeof providerStatus>();
+    qualifiedWorkspaceProviders.mockReturnValue(providersResult.promise);
+    const { container } = renderApp();
+    await flush();
+
+    act(() => {
+      testState.latestChatEditorProps?.onSubmit('/model --voice');
+      testState.latestChatEditorProps?.onSubmit('/settings');
+    });
+    expect(qualifiedWorkspaceProviders).toHaveBeenCalledOnce();
+    expect(
+      container.querySelector('[data-testid="inline-panel"]'),
+    ).not.toBeNull();
+
+    await act(async () => {
+      providersResult.resolve(providerStatus);
+      await Promise.resolve();
+    });
+    await flush();
+
+    expect(container.querySelector('[data-testid="model-select"]')).toBeNull();
+    expect(
+      container.querySelector('[data-testid="inline-panel"]'),
+    ).not.toBeNull();
+  });
+
+  it('waits for session loading to finish before requesting status', async () => {
+    mockConnection.loadingTranscript = true;
+    const { rerender } = renderApp();
+    await flush();
+
+    expect(mockWorkspace.client.sessionStatus).not.toHaveBeenCalled();
+
+    mockConnection.loadingTranscript = false;
+    rerender();
+
+    await vi.waitFor(() => {
+      expect(mockWorkspace.client.sessionStatus).toHaveBeenCalledWith(
+        'session-1',
+      );
+    });
+  });
+
+  it('uses the session catalog title when the connection has no display name', async () => {
+    mockConnection.displayName = undefined;
+    mockWorkspace.client.listWorkspaceSessions.mockResolvedValue([
+      {
+        sessionId: 'session-1',
+        workspaceCwd: '/tmp/project',
+        displayName: 'Real session title',
+      },
+    ]);
+
+    const { container } = renderApp();
+
+    await vi.waitFor(() => {
+      expect(
+        container.querySelector('[data-testid="chat-context-header"]')
+          ?.textContent,
+      ).toContain('Real session title');
+    });
+  });
+
+  it('keeps the persistent chat header opt-in for existing integrations', () => {
+    const { container } = renderApp({ header: undefined });
+
+    expect(
+      container.querySelector('[data-testid="chat-context-header"]'),
+    ).toBeNull();
+  });
+
+  it('lets a custom renderer replace the complete persistent chat header', () => {
+    mockConnection.gitBranch = 'main';
+    mockConnection.gitStatus = {
+      v: 2,
+      workspaceCwd: '/tmp/project',
+      branch: 'main',
+      unstaged: 1,
+    };
+    const renderChatHeader = vi.fn(() => (
+      <header data-testid="custom-chat-header">Custom session header</header>
+    ));
+    const { container } = renderApp({
+      header: undefined,
+      renderChatHeader,
+    });
+
+    expect(
+      container.querySelector('[data-testid="chat-context-header"]'),
+    ).toBeNull();
+    expect(
+      container.querySelector('[data-testid="custom-chat-header"]')
+        ?.textContent,
+    ).toContain('Custom session header');
+    expect(renderChatHeader).toHaveBeenCalledWith(
+      expect.objectContaining({
+        sessionId: 'session-1',
+        sessionName: 'Session One',
+        workspaceCwd: '/tmp/project',
+        items: ['title', 'environment', 'rightPanel'],
+        environmentPanelOpen: false,
+        rightPanelOpen: false,
+        onEnvironmentPanelOpenChange: expect.any(Function),
+        onRightPanelOpenChange: expect.any(Function),
+      }),
+    );
+    expect(testState.latestChatEditorProps?.visibleToolbarActions).toContain(
+      'gitBranch',
+    );
+  });
+
+  it('keeps legacy task status for a custom header without explicit header configuration', () => {
+    const monitor: DaemonSessionMonitorTaskStatus = {
+      kind: 'monitor',
+      id: 'monitor-1',
+      label: 'Watch server',
+      description: 'Watch server',
+      status: 'running',
+      startTime: 1,
+      runtimeMs: 10,
+    };
+    testState.backgroundTasks = [monitor];
+
+    renderApp({
+      header: undefined,
+      renderChatHeader: () => <header>Custom session header</header>,
+    });
+
+    expect(testState.latestStatusBarTasks).toEqual([monitor]);
+  });
+
+  it('controls the built-in chat header actions through header items', () => {
+    const { container } = renderApp({
+      header: { items: ['environment'] },
+    });
+
+    expect(
+      container.querySelector(
+        'button[aria-label="Toggle environment information"]',
+      ),
+    ).not.toBeNull();
+    expect(
+      container.querySelector('button[aria-label="Toggle right panel"]'),
+    ).toBeNull();
+    expect(
+      container.querySelector('[data-testid="chat-context-header"]')
+        ?.textContent,
+    ).not.toContain('Session One');
+  });
+
+  it('hides the complete chat header when header items are empty', () => {
+    const { container } = renderApp({ header: { items: [] } });
+
+    expect(
+      container.querySelector('[data-testid="chat-context-header"]'),
+    ).toBeNull();
+  });
+
+  it('opens environment information without restoring composer Git information', () => {
+    mockConnection.gitBranch = 'main';
+    mockConnection.gitStatus = {
+      v: 2,
+      workspaceCwd: '/tmp/project',
+      branch: 'main',
+      unstaged: 1,
+    };
+    const { container } = renderApp();
+    const rightPanelButton = container.querySelector<HTMLButtonElement>(
+      'button[aria-label="Toggle right panel"]',
+    );
+
+    expect(rightPanelButton).not.toBeNull();
+    act(() => {
+      container
+        .querySelector<HTMLButtonElement>(
+          'button[aria-label="Toggle environment information"]',
+        )
+        ?.click();
+    });
+
+    expect(
+      container.querySelector(
+        '[data-testid="environment-panel"]:not([hidden])',
+      ),
+    ).not.toBeNull();
+    expect(
+      testState.latestChatEditorProps?.visibleToolbarActions,
+    ).not.toContain('gitBranch');
+  });
+
+  it('keeps the right-panel action visible and opens a review-only empty state', () => {
+    const { container } = renderApp();
+    const rightPanelButton = container.querySelector<HTMLButtonElement>(
+      'button[aria-label="Toggle right panel"]',
+    );
+
+    expect(rightPanelButton).not.toBeNull();
+    act(() => rightPanelButton?.click());
+
+    const emptyActions = container.querySelector(
+      '[data-testid="right-panel-empty-actions"]',
+    );
+    const actions = Array.from(
+      emptyActions?.querySelectorAll<HTMLButtonElement>('button') ?? [],
+    );
+    expect(actions).toHaveLength(1);
+    expect(actions[0]?.textContent).toContain('Review');
+    expect(actions[0]?.disabled).toBe(true);
+    expect(
+      container.querySelector('button[aria-label="Add panel"]'),
+    ).toBeNull();
+
+    const header = container.querySelector(
+      '[data-testid="chat-context-header"]',
+    );
+    expect(
+      header?.querySelector('button[aria-label="Toggle right panel"]'),
+    ).toBeNull();
+    expect(
+      container
+        .querySelector('aside[aria-label="Right panel"]')
+        ?.querySelector('button[aria-label="Toggle right panel"]'),
+    ).not.toBeNull();
+    const artifactDock =
+      container.querySelector('[role="separator"]')?.parentElement;
+    expect(artifactDock?.parentElement).toBe(
+      header?.parentElement?.parentElement?.parentElement,
+    );
+    expect(header?.parentElement?.contains(artifactDock ?? null)).toBe(false);
+  });
+
+  it('opens the latest reviewable turn from the empty right panel', () => {
+    testState.messages = [
+      {
+        id: 'user-1',
+        role: 'user',
+        content: 'write the first file',
+      },
+      {
+        id: 'tools-1',
+        role: 'tool_group',
+        tools: [
+          {
+            callId: 'write-1',
+            toolName: 'write_file',
+            status: 'completed',
+            args: {
+              file_path: 'src/first.ts',
+              content: 'export const first = true;\n',
+            },
+          },
+        ],
+      },
+      {
+        id: 'user-2',
+        role: 'user',
+        content: 'write the latest file',
+      },
+      {
+        id: 'tools-2',
+        role: 'tool_group',
+        tools: [
+          {
+            callId: 'write-2',
+            toolName: 'write_file',
+            status: 'completed',
+            args: {
+              file_path: 'src/latest.ts',
+              content: 'export const latest = true;\n',
+            },
+          },
+        ],
+      },
+    ];
+    const { container } = renderApp();
+
+    act(() => {
+      container
+        .querySelector<HTMLButtonElement>(
+          'button[aria-label="Toggle right panel"]',
+        )
+        ?.click();
+    });
+    const review = Array.from(
+      container.querySelectorAll<HTMLButtonElement>(
+        '[data-testid="right-panel-empty-actions"] button',
+      ),
+    ).find((button) => button.textContent?.startsWith('Review'));
+    expect(review?.disabled).toBe(false);
+
+    act(() => review?.click());
+
+    expect(container.querySelector('button[title="Review"]')).not.toBeNull();
+    expect(container.textContent).toContain('latest.ts');
+    expect(container.textContent).not.toContain('first.ts');
+  });
+
+  it('floats environment information in ultrawide mode', () => {
+    mockConnection.gitBranch = 'main';
+    mockConnection.gitStatus = {
+      v: 2,
+      workspaceCwd: '/tmp/project',
+      branch: 'main',
+      unstaged: 1,
+    };
+    const { container } = renderApp();
+    const environmentButton = container.querySelector<HTMLButtonElement>(
+      'button[aria-label="Toggle environment information"]',
+    );
+
+    act(() => {
+      testState.latestChatEditorProps?.onChatWidthModeChange?.('wide');
+      environmentButton?.click();
+    });
+
+    const environmentPanel = container.querySelector(
+      '[data-testid="environment-panel"]:not([hidden])',
+    );
+    expect(environmentPanel?.getAttribute('data-floating')).toBe('true');
+    expect(
+      environmentPanel?.parentElement?.contains(
+        container.querySelector('[data-testid="chat-pane-container"]'),
+      ),
+    ).toBe(true);
+  });
+
+  it('closes environment information at the dock breakpoint and reopens it floating', async () => {
+    let availableMessageWidth = 1200;
+    const resizeCallbacks = new Set<ResizeObserverCallback>();
+    const originalResizeObserver = globalThis.ResizeObserver;
+    globalThis.ResizeObserver = class {
+      constructor(private readonly callback: ResizeObserverCallback) {
+        resizeCallbacks.add(callback);
+      }
+      observe() {}
+      unobserve() {}
+      disconnect() {
+        resizeCallbacks.delete(this.callback);
+      }
+    } as typeof ResizeObserver;
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(
+      function () {
+        if (this.dataset['testid'] !== 'context-body') return new DOMRect();
+        return new DOMRect(0, 0, availableMessageWidth, 600);
+      },
+    );
+    testState.messages = [
+      {
+        id: 'tools',
+        role: 'tool_group',
+        tools: [
+          {
+            callId: 'agent-call',
+            toolName: 'agent',
+            title: 'Inspect repository',
+            status: 'completed',
+            args: { subagent_type: 'Explore' },
+          },
+        ],
+      },
+    ];
+    const { container } = renderApp();
+    const environmentButton = container.querySelector<HTMLButtonElement>(
+      'button[aria-label="Toggle environment information"]',
+    );
+
+    act(() => environmentButton?.click());
+    expect(
+      container.querySelector(
+        '[data-testid="environment-panel"]:not([hidden])',
+      ),
+    ).not.toBeNull();
+
+    await act(async () => {
+      availableMessageWidth = 932;
+      resizeCallbacks.forEach((callback) => callback([], {} as ResizeObserver));
+      await Promise.resolve();
+    });
+    expect(
+      container.querySelector(
+        '[data-testid="environment-panel"]:not([hidden])',
+      ),
+    ).toBeNull();
+
+    act(() => {
+      container
+        .querySelector<HTMLButtonElement>(
+          'button[aria-label="Toggle environment information"]',
+        )
+        ?.click();
+    });
+    expect(
+      container
+        .querySelector('[data-testid="environment-panel"]:not([hidden])')
+        ?.getAttribute('data-floating'),
+    ).toBe('true');
+    globalThis.ResizeObserver = originalResizeObserver;
+  });
+
+  it('opens environment information floating beside an open right panel', async () => {
+    const resizeCallbacks = new Set<ResizeObserverCallback>();
+    const originalResizeObserver = globalThis.ResizeObserver;
+    globalThis.ResizeObserver = class {
+      constructor(private readonly callback: ResizeObserverCallback) {
+        resizeCallbacks.add(callback);
+      }
+      observe() {}
+      unobserve() {}
+      disconnect() {
+        resizeCallbacks.delete(this.callback);
+      }
+    } as typeof ResizeObserver;
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(
+      function () {
+        if (this.dataset['testid'] !== 'context-body') return new DOMRect();
+        return new DOMRect(0, 0, 1_000, 600);
+      },
+    );
+    const { container } = renderApp();
+
+    await act(async () => {
+      resizeCallbacks.forEach((callback) => callback([], {} as ResizeObserver));
+      await Promise.resolve();
+    });
+    act(() => {
+      container
+        .querySelector<HTMLButtonElement>(
+          'button[aria-label="Toggle right panel"]',
+        )
+        ?.click();
+    });
+    act(() => {
+      container
+        .querySelector<HTMLButtonElement>(
+          'button[aria-label="Toggle environment information"]',
+        )
+        ?.click();
+    });
+
+    const environmentPanel = container.querySelector(
+      '[data-testid="environment-panel"]:not([hidden])',
+    );
+    expect(environmentPanel?.getAttribute('data-floating')).toBe('true');
+    globalThis.ResizeObserver = originalResizeObserver;
+  });
+
+  it('keeps the environment action visible without dynamic activity', () => {
+    const { container } = renderApp();
+
+    expect(
+      container.querySelector(
+        'button[aria-label="Toggle environment information"]',
+      ),
+    ).not.toBeNull();
+  });
+
+  it('keeps the environment action visible for a clean working tree', () => {
+    mockConnection.gitBranch = 'main';
+    mockConnection.gitStatus = {
+      v: 2,
+      workspaceCwd: '/tmp/project',
+      branch: 'main',
+      staged: 0,
+      unstaged: 0,
+      untracked: 0,
+      conflicted: 0,
+    };
+    const { container } = renderApp();
+
+    expect(
+      container.querySelector(
+        'button[aria-label="Toggle environment information"]',
+      ),
+    ).not.toBeNull();
+  });
+
+  it('shows the environment action for a background task in the transcript', () => {
+    testState.messages = [
+      {
+        id: 'tools',
+        role: 'tool_group',
+        tools: [
+          {
+            callId: 'background-shell',
+            toolName: 'shell',
+            status: 'completed',
+            args: {
+              command: 'npm run dev',
+              is_background: true,
+            },
+          },
+        ],
+      },
+    ];
+    const { container } = renderApp();
+
+    expect(
+      container.querySelector(
+        'button[aria-label="Toggle environment information"]',
+      ),
+    ).not.toBeNull();
+  });
+
+  it('opens an environment monitor in the right panel', () => {
+    const monitor: DaemonSessionMonitorTaskStatus = {
+      kind: 'monitor',
+      id: 'monitor-1',
+      label: 'monitor-label',
+      description: 'watch server log',
+      status: 'running',
+      startTime: 1_000,
+      runtimeMs: 5_000,
+      command: 'tail -f server.log',
+      eventCount: 3,
+      lastEventTime: 5_000,
+      droppedLines: 0,
+    };
+    testState.backgroundTasks = [monitor];
+    const { container } = renderApp();
+
+    act(() => {
+      testState.latestChatEditorProps?.onChatWidthModeChange?.('wide');
+    });
+    act(() => {
+      container
+        .querySelector<HTMLButtonElement>(
+          'button[aria-label="Toggle environment information"]',
+        )
+        ?.click();
+    });
+    const backgroundTasksButton = Array.from(
+      container.querySelectorAll<HTMLButtonElement>('button[aria-expanded]'),
+    ).find((button) => button.textContent?.includes('Background tasks'));
+    act(() => backgroundTasksButton?.click());
+    const monitorButton = Array.from(
+      container.querySelectorAll<HTMLButtonElement>(
+        '[data-testid="environment-panel"] ul button',
+      ),
+    ).find((button) => button.textContent?.includes('watch server log'));
+
+    act(() => monitorButton?.click());
+
+    expect(
+      container.querySelector(
+        '[data-testid="environment-panel"]:not([hidden])',
+      ),
+    ).not.toBeNull();
+    expect(
+      container.querySelector('button[title="watch server log"]'),
+    ).not.toBeNull();
+    expect(testState.latestBackgroundTasksRefreshTrigger).toBe(1);
+  });
+
+  it('opens an environment shell task in the right panel', () => {
+    const shell: DaemonSessionShellTaskStatus = {
+      kind: 'shell',
+      id: 'shell-1',
+      label: 'Development server',
+      description: 'Run the development server',
+      status: 'running',
+      startTime: 1_000,
+      runtimeMs: 5_000,
+      command: 'npm run dev',
+      cwd: '/tmp/project',
+      pid: 42,
+    };
+    testState.backgroundTasks = [shell];
+    const { container } = renderApp();
+
+    act(() => {
+      testState.latestChatEditorProps?.onChatWidthModeChange?.('wide');
+    });
+    act(() => {
+      container
+        .querySelector<HTMLButtonElement>(
+          'button[aria-label="Toggle environment information"]',
+        )
+        ?.click();
+    });
+    const backgroundTasksButton = Array.from(
+      container.querySelectorAll<HTMLButtonElement>('button[aria-expanded]'),
+    ).find((button) => button.textContent?.includes('Background tasks'));
+    act(() => backgroundTasksButton?.click());
+    const shellButton = Array.from(
+      container.querySelectorAll<HTMLButtonElement>(
+        '[data-testid="environment-panel"] ul button',
+      ),
+    ).find((button) => button.textContent?.includes('npm run dev'));
+
+    act(() => shellButton?.click());
+
+    expect(
+      container.querySelector(
+        '[data-testid="environment-panel"]:not([hidden])',
+      ),
+    ).not.toBeNull();
+    expect(
+      container.querySelector('button[title="npm run dev"]'),
+    ).not.toBeNull();
+    expect(container.textContent).toContain('/tmp/project');
+    expect(testState.latestBackgroundTasksRefreshTrigger).toBe(1);
+  });
+
+  it('closes environment information when the active session changes', () => {
+    mockConnection.gitBranch = 'main';
+    mockConnection.gitStatus = {
+      v: 2,
+      workspaceCwd: '/tmp/project',
+      branch: 'main',
+      unstaged: 1,
+    };
+    const { container, rerender } = renderApp();
+    act(() => {
+      container
+        .querySelector<HTMLButtonElement>(
+          'button[aria-label="Toggle environment information"]',
+        )
+        ?.click();
+    });
+    expect(
+      container.querySelector(
+        '[data-testid="environment-panel"]:not([hidden])',
+      ),
+    ).not.toBeNull();
+
+    mockConnection.sessionId = 'session-2';
+    rerender();
+
+    expect(
+      container.querySelector(
+        '[data-testid="environment-panel"]:not([hidden])',
+      ),
+    ).toBeNull();
+  });
+
+  it('keeps environment information open with its subagent panel', async () => {
+    let availableContextWidth = 1_200;
+    const resizeCallbacks = new Set<ResizeObserverCallback>();
+    const originalResizeObserver = globalThis.ResizeObserver;
+    globalThis.ResizeObserver = class {
+      constructor(private readonly callback: ResizeObserverCallback) {
+        resizeCallbacks.add(callback);
+      }
+      observe() {}
+      unobserve() {}
+      disconnect() {
+        resizeCallbacks.delete(this.callback);
+      }
+    } as typeof ResizeObserver;
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(
+      function () {
+        if (this.dataset['testid'] !== 'context-body') return new DOMRect();
+        return new DOMRect(0, 0, availableContextWidth, 600);
+      },
+    );
+    testState.messages = [
+      {
+        id: 'tools',
+        role: 'tool_group',
+        tools: [
+          {
+            callId: 'agent-call',
+            toolName: 'agent',
+            title: 'Inspect repository',
+            status: 'completed',
+            args: { subagent_type: 'Explore' },
+            rawOutput: {
+              type: 'task_execution',
+              status: 'completed',
+              subagentName: 'Explore',
+            },
+          },
+        ],
+      },
+    ];
+    const { container } = renderApp();
+    await act(async () => {
+      resizeCallbacks.forEach((callback) => callback([], {} as ResizeObserver));
       await Promise.resolve();
     });
+
     act(() => {
       container
-        .querySelector<HTMLButtonElement>('[data-testid="open-split-view"]')
+        .querySelector<HTMLButtonElement>(
+          'button[aria-label="Toggle environment information"]',
+        )
         ?.click();
     });
+    const subagentsButton = Array.from(
+      container.querySelectorAll<HTMLButtonElement>('button[aria-expanded]'),
+    ).find((button) => button.textContent?.includes('Subagents'));
+    act(() => subagentsButton?.click());
+
+    const environmentButton = container.querySelector<HTMLButtonElement>(
+      'button[aria-label="Toggle environment information"]',
+    );
+    act(() => environmentButton?.click());
+    expect(
+      container.querySelector(
+        '[data-testid="environment-panel"]:not([hidden])',
+      ),
+    ).toBeNull();
+    act(() => environmentButton?.click());
+    expect(
+      Array.from(
+        container.querySelectorAll<HTMLButtonElement>(
+          '[data-testid="environment-panel"]:not([hidden]) button[aria-expanded="true"]',
+        ),
+      ).some((button) => button.textContent?.includes('Subagents')),
+    ).toBe(true);
+
+    const agentButton = Array.from(
+      container.querySelectorAll<HTMLButtonElement>(
+        '[data-testid="environment-panel"]:not([hidden]) ul button',
+      ),
+    ).find((button) => button.textContent?.includes('Inspect repository'));
+    act(() => agentButton?.click());
     await act(async () => {
-      providersResult.resolve(providerStatus);
+      availableContextWidth = 900;
+      resizeCallbacks.forEach((callback) => callback([], {} as ResizeObserver));
       await Promise.resolve();
     });
-    await flush();
 
-    expect(container.querySelector('[data-testid="model-select"]')).toBeNull();
+    expect(
+      container.querySelector(
+        '[data-testid="environment-panel"]:not([hidden])',
+      ),
+    ).not.toBeNull();
+    expect(
+      container
+        .querySelector('[data-testid="environment-panel"]:not([hidden])')
+        ?.getAttribute('data-floating'),
+    ).toBe('true');
+
+    act(() => {
+      container
+        .querySelector<HTMLButtonElement>(
+          'button[aria-label="Toggle right panel"]',
+        )
+        ?.click();
+    });
+
+    expect(
+      container.querySelector(
+        '[data-testid="environment-panel"]:not([hidden])',
+      ),
+    ).not.toBeNull();
+
+    act(() => {
+      testState.latestChatEditorProps?.onChatWidthModeChange?.('wide');
+    });
+    expect(
+      container
+        .querySelector('[data-testid="environment-panel"]:not([hidden])')
+        ?.getAttribute('data-floating'),
+    ).toBe('true');
+
+    act(() => {
+      container
+        .querySelector<HTMLButtonElement>(
+          'button[aria-label="Toggle right panel"]',
+        )
+        ?.click();
+    });
+    expect(
+      container.querySelector(
+        '[data-testid="environment-panel"]:not([hidden])',
+      ),
+    ).toBeNull();
+    const environmentToggle = container.querySelector<HTMLButtonElement>(
+      'button[aria-label="Toggle environment information"]',
+    );
+    expect(environmentToggle).not.toBeNull();
+
+    act(() => environmentToggle?.click());
+    expect(
+      container.querySelector(
+        '[data-testid="environment-panel"]:not([hidden])',
+      ),
+    ).not.toBeNull();
+    globalThis.ResizeObserver = originalResizeObserver;
   });
 
-  it('does not open a pending command Voice picker after entering Settings', async () => {
-    mockConnection.workspaceCwd = '/work/secondary';
-    mockWorkspace.capabilities = {
-      workspaceCwd: '/work/primary',
-      features: [
-        'workspace_qualified_voice',
-        'workspace_qualified_rest_core',
-        'workspace_settings',
-      ],
-      workspaces: [
-        {
-          id: 'primary',
-          cwd: '/work/primary',
-          primary: true,
-          trusted: true,
-        },
-        {
-          id: 'secondary',
-          cwd: '/work/secondary',
-          primary: false,
-          trusted: true,
-        },
-      ],
-    } as typeof mockWorkspace.capabilities;
-    const providerStatus = {
-      v: 1 as const,
-      workspaceCwd: '/work/secondary',
-      initialized: true,
-      providers: [],
-    };
-    const providersResult = deferred<typeof providerStatus>();
-    qualifiedWorkspaceProviders.mockReturnValue(providersResult.promise);
+  it('opens an out-of-band fork task in the right panel', () => {
+    testState.backgroundTasks = [
+      {
+        kind: 'agent',
+        id: 'fork-agent-1',
+        label: 'Review current changes',
+        description: 'Review current changes',
+        status: 'running',
+        startTime: 1,
+        runtimeMs: 10,
+        isBackgrounded: true,
+      },
+    ];
     const { container } = renderApp();
-    await flush();
 
     act(() => {
-      testState.latestChatEditorProps?.onSubmit('/model --voice');
-      testState.latestChatEditorProps?.onSubmit('/settings');
+      container
+        .querySelector<HTMLButtonElement>(
+          'button[aria-label="Toggle environment information"]',
+        )
+        ?.click();
     });
-    expect(qualifiedWorkspaceProviders).toHaveBeenCalledOnce();
+    const subagentsButton = Array.from(
+      container.querySelectorAll<HTMLButtonElement>('button[aria-expanded]'),
+    ).find((button) => button.textContent?.includes('Subagents'));
+    act(() => subagentsButton?.click());
+    const forkButton = Array.from(
+      container.querySelectorAll<HTMLButtonElement>(
+        '[data-testid="environment-panel"] ul button',
+      ),
+    ).find((button) => button.textContent?.includes('Review current changes'));
+
+    expect(forkButton?.disabled).toBe(false);
+    act(() => forkButton?.click());
+
     expect(
-      container.querySelector('[data-testid="inline-panel"]'),
+      container.querySelector(
+        '[data-testid="environment-panel"]:not([hidden])',
+      ),
+    ).not.toBeNull();
+    expect(
+      container.querySelector('button[title="Agent: Review current changes"]'),
     ).not.toBeNull();
+  });
+
+  it('updates the header when session metadata supplies a generated title', () => {
+    mockConnection.displayName = undefined;
+    const { container, rerender } = renderApp();
+    expect(
+      container.querySelector('[data-testid="chat-context-header"]')
+        ?.textContent,
+    ).toContain('New session');
+
+    mockConnection.displayName = 'Investigate task failures';
+    rerender();
+
+    expect(
+      container.querySelector('[data-testid="chat-context-header"]')
+        ?.textContent,
+    ).toContain('Investigate task failures');
+  });
 
+  it('refreshes the generated title after the first turn completes', async () => {
+    mockConnection.displayName = undefined;
+    const { container, rerender } = renderApp();
+    await vi.waitFor(() => {
+      expect(mockWorkspace.client.listWorkspaceSessions).toHaveBeenCalled();
+    });
+    mockWorkspace.client.listWorkspaceSessions.mockResolvedValue([
+      {
+        sessionId: 'session-1',
+        workspaceCwd: '/tmp/project',
+        displayName: 'Generated session title',
+      },
+    ]);
+    vi.useFakeTimers();
+
+    act(() => {
+      testState.streamingState = 'responding';
+      rerender();
+    });
+    act(() => {
+      testState.streamingState = 'idle';
+      rerender();
+    });
     await act(async () => {
-      providersResult.resolve(providerStatus);
-      await Promise.resolve();
+      await vi.advanceTimersByTimeAsync(2000);
     });
-    await flush();
 
-    expect(container.querySelector('[data-testid="model-select"]')).toBeNull();
     expect(
-      container.querySelector('[data-testid="inline-panel"]'),
-    ).not.toBeNull();
+      container.querySelector('[data-testid="chat-context-header"]')
+        ?.textContent,
+    ).toContain('Generated session title');
   });
 
   it('submits through a disconnected session when prompt SSE restart is enabled', async () => {
@@ -4730,6 +6123,10 @@ describe('App session callbacks', () => {
     await flush();
     await flush();
 
+    expect(testState.latestChatEditorProps?.visibleToolbarActions).toContain(
+      'gitBranch',
+    );
+
     // Fast GET applied the branch-only last-known status.
     await vi.waitFor(() => {
       expect(testState.latestChatEditorProps?.gitStatus).toEqual({
@@ -6531,6 +7928,88 @@ describe('App session callbacks', () => {
     expect(editorClear).not.toHaveBeenCalled();
   });
 
+  it('refreshes background tasks after /fork launches', async () => {
+    mockSessionActions.forkSession.mockResolvedValue({
+      sessionId: 'session-1',
+      description: 'Review current changes',
+      launched: true,
+    });
+    const { container } = renderApp();
+    await flush();
+
+    testState.prompt = '/fork Review current changes';
+    await clickSubmit(container);
+    await flush();
+
+    expect(mockSessionActions.forkSession).toHaveBeenCalledWith(
+      'Review current changes',
+    );
+    expect(testState.latestBackgroundTasksRefreshTrigger).toBe(1);
+  });
+
+  it('keeps /btw as a lightweight side question when side tasks are available', async () => {
+    mockConnection.capabilities.features = ['session_side_task'];
+    const { container } = renderApp();
+    await flush();
+
+    testState.prompt = '/btw explain the current implementation';
+    await clickSubmit(container);
+    await flush();
+
+    expect(mockSessionActions.forkSession).not.toHaveBeenCalled();
+    expect(mockSessionActions.btwSession).toHaveBeenCalledWith(
+      'explain the current implementation',
+      expect.objectContaining({ signal: expect.any(AbortSignal) }),
+    );
+    expect(container.querySelector('button[title="Side task"]')).toBeNull();
+  });
+
+  it('opens a new side task for /btw side when the capability is available', async () => {
+    mockConnection.capabilities.features = ['session_side_task'];
+    const { container } = renderApp();
+    await flush();
+
+    testState.prompt = '/btw side explain the current implementation';
+    await clickSubmit(container);
+    await flush();
+
+    expect(mockSessionActions.forkSession).not.toHaveBeenCalled();
+    expect(mockSessionActions.btwSession).not.toHaveBeenCalled();
+    expect(container.querySelector('button[title="Side task"]')).not.toBeNull();
+  });
+
+  it('keeps /btw side as a lightweight question without the capability', async () => {
+    const { container } = renderApp();
+    await flush();
+
+    testState.prompt = '/btw side explain the current implementation';
+    await clickSubmit(container);
+    await flush();
+
+    expect(mockSessionActions.btwSession).toHaveBeenCalledWith(
+      'side explain the current implementation',
+      expect.objectContaining({ signal: expect.any(AbortSignal) }),
+    );
+    expect(container.querySelector('button[title="Side task"]')).toBeNull();
+  });
+
+  it('passes a directive to /fork as a regular background-agent directive', async () => {
+    mockSessionActions.forkSession.mockResolvedValue({
+      sessionId: 'session-1',
+      description: 'delegate',
+      launched: true,
+    });
+    const { container } = renderApp();
+    await flush();
+
+    testState.prompt = '/fork delegate';
+    await clickSubmit(container);
+    await flush();
+
+    expect(mockSessionActions.forkSession).toHaveBeenCalledWith('delegate');
+    expect(container.querySelector('button[title="Side task"]')).toBeNull();
+  });
+
   it('notifies the host before forwarding a slash command', async () => {
     const onSlashCommand = vi.fn();
     const { container } = renderApp({ onSlashCommand });
@@ -7641,6 +9120,21 @@ describe('App session callbacks', () => {
     expect(shellRef.current).toBeNull();
   });
 
+  it('creates a side task from the external shell ref', async () => {
+    mockConnection.capabilities.features = ['session_side_task'];
+    const shellRef = createRef<WebShellApi>();
+    const { container } = renderApp({ shellRef });
+    await flush();
+
+    let created = false;
+    act(() => {
+      created = shellRef.current?.createSideTask() ?? false;
+    });
+
+    expect(created).toBe(true);
+    expect(container.querySelector('button[title="Side task"]')).not.toBeNull();
+  });
+
   it('opens the Session Overview from the external shell ref like the sidebar button', async () => {
     let shellApi: WebShellApi | null = null;
     const { container } = renderApp({
@@ -8106,6 +9600,31 @@ describe('App session callbacks', () => {
     expect(document.body.textContent).toContain('Artifact not found.');
   });
 
+  it('opens a split pane monitor in the right panel', async () => {
+    const { container } = renderApp();
+    await flush();
+
+    await act(async () => {
+      container
+        .querySelector<HTMLButtonElement>('[data-testid="open-split-view"]')
+        ?.click();
+      await Promise.resolve();
+    });
+    await act(async () => {
+      container
+        .querySelector<HTMLButtonElement>('[data-testid="split-open-monitor"]')
+        ?.click();
+      await Promise.resolve();
+    });
+
+    expect(
+      document.body.querySelector('button[title="watch pane logs"]'),
+    ).not.toBeNull();
+    expect(
+      container.querySelector('[data-testid="split-view-page"]'),
+    ).not.toBeNull();
+  });
+
   it('clears split pane artifact snapshots when switching sessions', async () => {
     const { container, rerender } = renderApp();
     await flush();
diff --git a/packages/web-shell/client/App.tsx b/packages/web-shell/client/App.tsx
index 04fea56b692..1aa4ec6dd2d 100644
--- a/packages/web-shell/client/App.tsx
+++ b/packages/web-shell/client/App.tsx
@@ -25,6 +25,7 @@ import {
   useWorkspace,
   useWorkspaceActions,
   useWorkspaceEventSignals,
+  type DaemonSessionActions,
   type DaemonWorkspaceActions,
   type DaemonSessionNotice,
   type DaemonStreamingState,
@@ -32,8 +33,10 @@ import {
 import { DaemonHttpError, isDaemonTurnError } from '@qwen-code/sdk/daemon';
 import type {
   DaemonInputAnnotation,
+  DaemonSessionAgentTaskStatus,
   DaemonTranscriptBlock,
   DaemonSessionMonitorTaskStatus,
+  DaemonSessionShellTaskStatus,
   DaemonSessionTaskStatus,
   DaemonSessionArtifact,
   DaemonWorkspaceCapability,
@@ -42,8 +45,11 @@ import type {
 
 import { type SessionGitIntent } from './components/GitModePopover';
 import {
+  SESSION_LIST_PAGE_SIZE,
   SESSION_MONITOR_TOOL_CORRELATION_FEATURE,
+  SESSION_SIDE_TASK_FEATURE,
   SESSION_TRANSCRIPT_PAGINATION_FEATURE,
+  WEB_SHELL_SIDE_TASK_SOURCE_TYPE,
 } from './constants/sessions';
 import { extractPendingPermission } from './adapters/transcriptAdapter';
 import { MessageList, type MessageListHandle } from './components/MessageList';
@@ -76,6 +82,11 @@ import {
   type WebShellToast,
 } from './components/ToastHost';
 import { TodoPanel } from './components/panels/TodoPanel';
+import {
+  EnvironmentPanel,
+  type EnvironmentAgentTask,
+} from './components/panels/EnvironmentPanel';
+import { ChatContextHeader } from './components/ChatContextHeader';
 import { WelcomeHeader } from './components/WelcomeHeader';
 import { ApprovalModeDialog } from './components/dialogs/ApprovalModeDialog';
 import { ResumeDialog } from './components/dialogs/ResumeDialog';
@@ -98,6 +109,7 @@ import type { PaneHeaderActionsRenderer } from './components/ChatPane';
 import {
   ArtifactPanel,
   type ArtifactPanelTab,
+  type SideTaskListItem,
 } from './components/artifacts/ArtifactPanel';
 import { Drawer, DrawerContent, DrawerTitle } from './components/ui/drawer';
 import type {
@@ -170,6 +182,7 @@ import {
 import { mergeCommands } from './hooks/daemonSessionMappers';
 import { useAnimationFrameTranscriptBlocks } from './hooks/useAnimationFrameTranscriptBlocks';
 import { useBackgroundTasks } from './hooks/useBackgroundTasks';
+import { isSessionDisconnectedError } from './utils/sessionErrors';
 import { useMessagesFromBlocks } from './hooks/useMessages';
 import { useSessionArtifacts } from './hooks/useSessionArtifacts';
 import { useShallowMemo, useStableArray } from './hooks/useShallowMemo';
@@ -238,6 +251,7 @@ import {
   type ComposerPlaceholderState,
 } from './utils/composerInputState';
 import type { ACPToolCall, Message, PermissionRequest } from './adapters/types';
+import { isBackgroundSubAgentToolCall } from './adapters/toolClassification';
 import {
   computeTodoDetails,
   computeTodoTimeline,
@@ -274,6 +288,12 @@ import {
   type ComposerHeaderRenderer,
   type ComposerFooterRenderer,
   type ChatHeaderRenderer,
+  type WebShellChatHeaderItem,
+  type WebShellChatHeaderOptions,
+  type WebShellRightPanelItem,
+  type WebShellRightPanelOptions,
+  type WebShellEnvironmentPanelItem,
+  type WebShellEnvironmentPanelOptions,
   type FooterRenderer,
   type LoadingPhrasesResolver,
   type MarkdownTableMode,
@@ -335,9 +355,22 @@ function TodoContextsProvider({
 
 const MODES_CYCLE = DAEMON_APPROVAL_MODES;
 const MAX_TOASTS = 4;
-const DEFAULT_REVIEW_PANEL_WIDTH = 760;
+const DEFAULT_REVIEW_PANEL_WIDTH = 500;
 const MIN_ARTIFACT_PANEL_WIDTH = 320;
 const MIN_CHAT_PANE_WIDTH_WITH_ARTIFACT_PANEL = 500;
+const MIN_DOCKED_MESSAGE_AREA_WIDTH = 800;
+const DOCKED_ENVIRONMENT_PANEL_WIDTH = 332;
+const DEFAULT_COMPOSER_TOOLBAR_ACTIONS = [
+  'approvalMode',
+  'model',
+  'widthMode',
+  'voice',
+  'workspace',
+] as const satisfies readonly ComposerToolbarAction[];
+const DEFAULT_EMPTY_COMPOSER_TOOLBAR_ACTIONS = [
+  ...DEFAULT_COMPOSER_TOOLBAR_ACTIONS,
+  'gitBranch',
+] as const satisfies readonly ComposerToolbarAction[];
 const MAX_ARTIFACT_PANEL_SESSION_STATES = 20;
 interface ArtifactPanelSessionState {
   open: boolean;
@@ -521,6 +554,8 @@ export interface WebShellApi {
   openSessionDrawer: () => void;
   /** Start a new session using the same lifecycle as the built-in New Chat action. */
   createNewSession: () => Promise<boolean>;
+  /** Open the right panel with a new side-task draft. */
+  createSideTask: () => boolean;
 }
 
 export type WebShellComposerPlaceholderState = ComposerPlaceholderState;
@@ -569,6 +604,12 @@ export interface WebShellProps {
   chatMaxWidth?: number;
   /** Optional workspace sidebar. Disabled by default. */
   sidebar?: boolean | WebShellSidebarOptions;
+  /** Persistent chat header options. */
+  header?: WebShellChatHeaderOptions;
+  /** Right extension panel options. */
+  rightPanel?: WebShellRightPanelOptions;
+  /** Environment information panel options. */
+  environmentPanel?: WebShellEnvironmentPanelOptions;
   /** Session ids to control the split view; an empty array closes it. */
   splitSessionIds?: readonly string[];
   /** Called when the split pane list changes from inside WebShell. */
@@ -660,8 +701,8 @@ export interface WebShellProps {
   /** Custom renderer shown directly below the chat composer input. */
   renderComposerFooter?: ComposerFooterRenderer;
   /**
-   * Custom renderer shown at the top of the chat view, above the message list.
-   * Only rendered when a session is active (not in the welcome/empty state).
+   * Replaces the complete persistent chat header. Only rendered when a
+   * session is active (not in the welcome/empty state).
    */
   renderChatHeader?: ChatHeaderRenderer;
   /** Custom component for the footer area below the Editor. Replaces the built-in StatusBar. */
@@ -744,6 +785,17 @@ const emptyComposerApi: WebShellComposerApi = {
 
 const EMPTY_BOTTOM_STATUS_ITEMS: readonly WebShellBottomStatusItem[] = [];
 const DEFAULT_CHAT_MAX_WIDTH = 1000;
+const DEFAULT_CHAT_HEADER_ITEMS: readonly WebShellChatHeaderItem[] = [
+  'title',
+  'environment',
+  'rightPanel',
+];
+const DEFAULT_RIGHT_PANEL_ITEMS: readonly WebShellRightPanelItem[] = [
+  'review',
+  'sideTask',
+];
+const DEFAULT_ENVIRONMENT_PANEL_ITEMS: readonly WebShellEnvironmentPanelItem[] =
+  ['environment', 'subagents', 'backgroundTasks'];
 const BOTTOM_PANEL_GAP_PX = 6;
 const BOTTOM_PANEL_FALLBACK_INSET_PX = 40;
 type ChatWidthMode = `${typeof DEFAULT_CHAT_MAX_WIDTH}` | 'wide';
@@ -988,9 +1040,10 @@ function parseRenameArgument(
   return { type: 'manual', displayName: trimmed };
 }
 
-function isBackgroundShellToolCall(tool: ACPToolCall): boolean {
-  if (tool.args?.is_background !== true) return false;
+function isBackgroundTaskToolCall(tool: ACPToolCall): boolean {
   const name = tool.toolName.toLowerCase();
+  if (name === 'monitor') return true;
+  if (tool.args?.is_background !== true) return false;
   return (
     name === 'shell' ||
     name === 'bash' ||
@@ -999,20 +1052,22 @@ function isBackgroundShellToolCall(tool: ACPToolCall): boolean {
   );
 }
 
-export function getBackgroundTaskActivityKey(
-  messages: readonly Message[],
-): string {
+export function getTaskActivityKey(messages: readonly Message[]): string {
   const parts: string[] = [];
-  for (const message of messages) {
-    if (message.role !== 'tool_group') continue;
-    for (const tool of message.tools) {
+  const visit = (tools: readonly ACPToolCall[]) => {
+    for (const tool of tools) {
       if (
-        isBackgroundShellToolCall(tool) ||
-        tool.toolName.toLowerCase() === 'monitor'
+        isBackgroundTaskToolCall(tool) ||
+        isBackgroundSubAgentToolCall(tool)
       ) {
         parts.push(`${tool.callId}:${tool.status}`);
       }
+      if (tool.subTools) visit(tool.subTools);
     }
+  };
+  for (const message of messages) {
+    if (message.role !== 'tool_group') continue;
+    visit(message.tools);
   }
   return parts.join('|');
 }
@@ -1026,6 +1081,309 @@ export function mergeMonitorTaskSnapshot(
     : next;
 }
 
+function mergeShellTaskSnapshot(
+  current: DaemonSessionShellTaskStatus,
+  next: DaemonSessionShellTaskStatus,
+): DaemonSessionShellTaskStatus {
+  return current.status !== 'running' && next.status === 'running'
+    ? current
+    : next;
+}
+
+interface SideTaskCatalogState {
+  parentSessionId?: string;
+  items: SideTaskListItem[];
+  loaded: boolean;
+}
+
+// Merge a fresh side-task listing into the cached catalog. The listing is
+// authoritative: a cached item survives only while it is still listed or is a
+// locally created draft the daemon has not echoed back yet (optimisticIds).
+// Without the optimistic guard, a task deleted or archived on another client
+// would be re-added from the cache forever.
+export function mergeSideTaskCatalog(
+  catalog: SideTaskCatalogState,
+  parentSessionId: string,
+  listedItems: SideTaskListItem[],
+  optimisticIds: ReadonlySet<string>,
+): SideTaskCatalogState {
+  if (catalog.parentSessionId !== parentSessionId) {
+    return { parentSessionId, items: listedItems, loaded: true };
+  }
+  const listedIds = new Set(listedItems.map((item) => item.sessionId));
+  return {
+    parentSessionId,
+    loaded: true,
+    items: [
+      ...listedItems,
+      ...catalog.items.filter(
+        (item) =>
+          !listedIds.has(item.sessionId) && optimisticIds.has(item.sessionId),
+      ),
+    ],
+  };
+}
+
+function agentStatusFromTool(
+  tool: ACPToolCall,
+): DaemonSessionAgentTaskStatus['status'] {
+  if (tool.status === 'pending' || tool.status === 'in_progress') {
+    return 'running';
+  }
+  if (tool.status === 'failed') return 'failed';
+  const rawOutput = isRecord(tool.rawOutput) ? tool.rawOutput : undefined;
+  if (rawOutput?.['status'] === 'cancelled') return 'cancelled';
+  return rawOutput?.['status'] === 'failed' ? 'failed' : 'completed';
+}
+
+function agentTaskAsToolCall(task: DaemonSessionAgentTaskStatus): ACPToolCall {
+  const status =
+    task.status === 'running' || task.status === 'paused'
+      ? 'in_progress'
+      : task.status === 'failed'
+        ? 'failed'
+        : 'completed';
+  return {
+    callId: task.id,
+    toolName: 'agent',
+    title: `Agent: ${task.label}`,
+    status,
+    args: {
+      description: task.description,
+      ...(task.prompt ? { prompt: task.prompt } : {}),
+      ...(task.subagentType ? { subagent_type: task.subagentType } : {}),
+      run_in_background: task.isBackgrounded,
+    },
+    rawOutput: {
+      type: 'task_execution',
+      subagentName: task.subagentType,
+      status: task.status,
+    },
+    startTime: task.startTime,
+    ...(task.endTime !== undefined ? { endTime: task.endTime } : {}),
+  };
+}
+
+function isEnvironmentAgentToolCall(tool: ACPToolCall): boolean {
+  const name = tool.toolName.toLowerCase();
+  if (name === 'agent' || name === 'task') return true;
+  if (typeof tool.args?.subagent_type === 'string') return true;
+  return (
+    isRecord(tool.rawOutput) && tool.rawOutput['type'] === 'task_execution'
+  );
+}
+
+function derivedTaskIdForTool(tool: ACPToolCall): string | undefined {
+  const rawOutput = isRecord(tool.rawOutput) ? tool.rawOutput : undefined;
+  const subagentName =
+    typeof rawOutput?.['subagentName'] === 'string'
+      ? rawOutput['subagentName']
+      : undefined;
+  const subagentType =
+    typeof tool.args?.subagent_type === 'string'
+      ? tool.args.subagent_type
+      : undefined;
+  return subagentName
+    ? `${subagentName}-${tool.callId}`
+    : subagentType
+      ? `${subagentType}-${tool.callId}`
+      : undefined;
+}
+
+export function getEnvironmentAgentTasks(
+  messages: readonly Message[],
+  sessionTasks: readonly DaemonSessionTaskStatus[],
+): EnvironmentAgentTask[] {
+  const liveAgents = sessionTasks.filter(
+    (task): task is DaemonSessionAgentTaskStatus => task.kind === 'agent',
+  );
+  const taskIdsByToolUseId = new Map<string, string>();
+  for (const message of messages) {
+    if (message.role !== 'system' || !isRecord(message.data)) continue;
+    const taskId = message.data['taskId'];
+    const toolUseId = message.data['toolUseId'];
+    if (typeof taskId === 'string' && typeof toolUseId === 'string') {
+      taskIdsByToolUseId.set(toolUseId, taskId);
+    }
+  }
+
+  // A live task already linked precisely (by toolUseId, message taskId, or
+  // derived id) to some transcript tool call must never be claimed by the loose
+  // content fallback: two agents sharing a description would otherwise collapse
+  // into one (the fallback steals the linked task, its owner re-matches it, and
+  // the orphan is dropped).
+  const envToolCallIds = new Set<string>();
+  const preciselyClaimedTaskIds = new Set<string>(taskIdsByToolUseId.values());
+  const collectPreciseLinks = (tools: readonly ACPToolCall[]) => {
+    for (const tool of tools) {
+      if (
+        isEnvironmentAgentToolCall(tool) &&
+        !envToolCallIds.has(tool.callId)
+      ) {
+        envToolCallIds.add(tool.callId);
+        const derivedTaskId = derivedTaskIdForTool(tool);
+        if (derivedTaskId) preciselyClaimedTaskIds.add(derivedTaskId);
+      }
+      if (tool.subTools) collectPreciseLinks(tool.subTools);
+    }
+  };
+  for (const message of messages) {
+    if (message.role === 'tool_group') collectPreciseLinks(message.tools);
+  }
+  const isPreciselyClaimed = (task: DaemonSessionAgentTaskStatus): boolean =>
+    (task.toolUseId != null && envToolCallIds.has(task.toolUseId)) ||
+    preciselyClaimedTaskIds.has(task.id);
+
+  const agents: EnvironmentAgentTask[] = [];
+  const seenTaskIds = new Set<string>();
+  const seenToolCallIds = new Set<string>();
+  const visit = (tools: readonly ACPToolCall[]) => {
+    for (const tool of tools) {
+      if (
+        isEnvironmentAgentToolCall(tool) &&
+        !seenToolCallIds.has(tool.callId)
+      ) {
+        seenToolCallIds.add(tool.callId);
+        const rawOutput = isRecord(tool.rawOutput) ? tool.rawOutput : undefined;
+        const color =
+          typeof rawOutput?.['subagentColor'] === 'string'
+            ? rawOutput['subagentColor']
+            : undefined;
+        const description =
+          typeof tool.args?.description === 'string'
+            ? tool.args.description
+            : undefined;
+        const prompt =
+          typeof tool.args?.prompt === 'string' ? tool.args.prompt : undefined;
+        const subagentType =
+          typeof tool.args?.subagent_type === 'string'
+            ? tool.args.subagent_type
+            : undefined;
+        const subagentName =
+          typeof rawOutput?.['subagentName'] === 'string'
+            ? rawOutput['subagentName']
+            : undefined;
+        const taskId = taskIdsByToolUseId.get(tool.callId);
+        const derivedTaskId = derivedTaskIdForTool(tool);
+        // Completed background agents can lose their toolUseId / derived-id
+        // linkage (e.g. across a daemon reload); fall back to content matching,
+        // the same signal the daemon's legacy resolver uses.
+        const matchesLiveTaskContent = (
+          task: DaemonSessionAgentTaskStatus,
+        ): boolean => {
+          if (prompt && task.prompt === prompt) return true;
+          if (
+            description &&
+            task.description === description &&
+            subagentType &&
+            task.subagentType === subagentType
+          ) {
+            return true;
+          }
+          return !!description && task.description === description;
+        };
+        const liveTask = liveAgents.find(
+          (task) =>
+            task.toolUseId === tool.callId ||
+            task.id === taskId ||
+            task.id === derivedTaskId ||
+            (!seenTaskIds.has(task.id) &&
+              !isPreciselyClaimed(task) &&
+              matchesLiveTaskContent(task)),
+        );
+        const title = tool.title?.replace(/^Agent:\s*/i, '').trim();
+        const meaningfulTitle =
+          title && title.toLowerCase() !== 'agent' ? title : undefined;
+        const label =
+          meaningfulTitle ??
+          description ??
+          prompt ??
+          subagentName ??
+          subagentType ??
+          '';
+        const taskDescription =
+          description ?? prompt ?? subagentName ?? subagentType ?? '';
+        const startTime = tool.startTime ?? 0;
+
+        agents.push(
+          liveTask
+            ? {
+                ...liveTask,
+                label,
+                description: taskDescription || liveTask.description,
+                ...(subagentType ? { subagentType } : {}),
+                ...(color ? { color } : {}),
+              }
+            : {
+                kind: 'agent',
+                id: taskId ?? derivedTaskId ?? tool.callId,
+                label,
+                description: taskDescription,
+                status: agentStatusFromTool(tool),
+                startTime,
+                ...(tool.endTime !== undefined
+                  ? { endTime: tool.endTime }
+                  : {}),
+                runtimeMs: Math.max(
+                  0,
+                  (tool.endTime ?? tool.startTime ?? startTime) - startTime,
+                ),
+                ...(subagentType ? { subagentType } : {}),
+                ...(color ? { color } : {}),
+                isBackgrounded: isBackgroundSubAgentToolCall(tool),
+                toolUseId: tool.callId,
+              },
+        );
+        if (liveTask) seenTaskIds.add(liveTask.id);
+      }
+      if (tool.subTools) visit(tool.subTools);
+    }
+  };
+
+  for (const message of messages) {
+    if (message.role === 'tool_group') visit(message.tools);
+  }
+  for (const task of liveAgents) {
+    if (
+      seenTaskIds.has(task.id) ||
+      (task.toolUseId && seenToolCallIds.has(task.toolUseId))
+    ) {
+      continue;
+    }
+    const alreadyListed = agents.some(
+      (a) =>
+        (a.toolUseId != null && a.toolUseId === task.toolUseId) ||
+        (a.description !== '' && a.description === task.description),
+    );
+    if (alreadyListed) continue;
+    agents.push(task);
+  }
+  return agents;
+}
+
+function findToolCall(
+  messages: readonly Message[],
+  callId: string,
+): ACPToolCall | undefined {
+  const findNested = (
+    tools: readonly ACPToolCall[],
+  ): ACPToolCall | undefined => {
+    for (const tool of tools) {
+      if (tool.callId === callId) return tool;
+      const nested = tool.subTools ? findNested(tool.subTools) : undefined;
+      if (nested) return nested;
+    }
+    return undefined;
+  };
+
+  for (const message of messages) {
+    if (message.role !== 'tool_group') continue;
+    const tool = findNested(message.tools);
+    if (tool) return tool;
+  }
+  return undefined;
+}
+
 function mapToWebShellTaskInfo(
   task: DaemonSessionTaskStatus,
 ): WebShellTaskInfo {
@@ -1180,6 +1538,9 @@ export function App({
   bottomStatusItems,
   chatMaxWidth,
   sidebar,
+  header,
+  rightPanel,
+  environmentPanel,
   splitSessionIds: externalSplitSessionIds,
   onSplitSessionIdsChange,
   renderPaneHeaderActions,
@@ -1225,6 +1586,28 @@ export function App({
     () => resolveSidebarOptions(sidebar),
     [sidebar],
   );
+  const chatHeaderItems = header?.items ?? DEFAULT_CHAT_HEADER_ITEMS;
+  const chatHeaderEnabled =
+    chatHeaderItems.length > 0 && Boolean(header || renderChatHeader);
+  const titleHeaderItemVisible = chatHeaderItems.includes('title');
+  const environmentHeaderItemVisible = chatHeaderItems.includes('environment');
+  const rightPanelHeaderItemVisible = chatHeaderItems.includes('rightPanel');
+  const rightPanelItems = rightPanel?.items ?? DEFAULT_RIGHT_PANEL_ITEMS;
+  const environmentPanelItems =
+    environmentPanel?.items ?? DEFAULT_ENVIRONMENT_PANEL_ITEMS;
+  // The environment panel is only reachable through the chat header toggle,
+  // so its sections replace the composer git entry / footer task pills only
+  // when that header is actually enabled. Embeddings that omit the header keep
+  // the legacy entries.
+  const environmentPanelReachable =
+    chatHeaderEnabled &&
+    environmentHeaderItemVisible &&
+    (!renderChatHeader || Boolean(header));
+  const environmentGitReplacementEnabled =
+    environmentPanelReachable && environmentPanelItems.includes('environment');
+  const environmentTasksReplacementEnabled =
+    environmentPanelReachable &&
+    environmentPanelItems.includes('backgroundTasks');
   const [sidebarCollapsed, setSidebarCollapsed] = useState(() =>
     readSidebarCollapsed(sidebarOptions.defaultCollapsed),
   );
@@ -1566,6 +1949,9 @@ export function App({
   const [sessionBranch, setSessionBranch] = useState<
     { name: string; baseBranch: string } | undefined
   >(undefined);
+  const [sessionStatusDisplayName, setSessionStatusDisplayName] = useState<
+    string | undefined
+  >(undefined);
   // Tracks the session id from the latest effect run. In-flight fetches
   // compare their captured sid against this ref on resolve: a match means
   // the response is still relevant and may set OR clear the worktree state;
@@ -1579,10 +1965,24 @@ export function App({
   // discard the one response we actually need.
   useEffect(() => {
     const sid = connection.sessionId;
+    const previousSid = worktreeSessionIdRef.current;
     worktreeSessionIdRef.current = sid;
     if (!sid) {
       setSessionWorktree(undefined);
       setSessionBranch(undefined);
+      setSessionStatusDisplayName(undefined);
+      return;
+    }
+    if (previousSid !== sid) {
+      setSessionWorktree(undefined);
+      setSessionBranch(undefined);
+      setSessionStatusDisplayName(undefined);
+    }
+    if (
+      connection.status !== 'connected' ||
+      connection.loadingTranscript ||
+      connection.catchingUp
+    ) {
       return;
     }
     workspace.client
@@ -1591,15 +1991,35 @@ export function App({
         if (worktreeSessionIdRef.current === sid) {
           setSessionWorktree(summary.worktree);
           setSessionBranch(summary.branch);
+          setSessionStatusDisplayName(summary.displayName);
         }
+        return workspace.client
+          .listWorkspaceSessions(summary.workspaceCwd, { pageSize: 200 })
+          .then((sessions) => {
+            if (worktreeSessionIdRef.current !== sid) return;
+            const listedSession = sessions.find(
+              (session) => session.sessionId === sid,
+            );
+            setSessionStatusDisplayName(
+              listedSession?.displayName ?? summary.displayName,
+            );
+          })
+          .catch(() => undefined);
       })
       .catch(() => {
         if (worktreeSessionIdRef.current === sid) {
           setSessionWorktree(undefined);
           setSessionBranch(undefined);
+          setSessionStatusDisplayName(undefined);
         }
       });
-  }, [connection.sessionId, workspace.client]);
+  }, [
+    connection.catchingUp,
+    connection.loadingTranscript,
+    connection.sessionId,
+    connection.status,
+    workspace.client,
+  ]);
   // Active workspace: the connected session's workspace, else the workspace
   // picked for the next session (locked / selected / primary). Computed once
   // and shared by the git-status effect and the Changes-dialog entry point so
@@ -1749,6 +2169,8 @@ export function App({
   const nextBtwMessageIdRef = useRef(1);
   const btwAbortControllerRef = useRef<AbortController | null>(null);
   const chatPaneRef = useRef<HTMLDivElement | null>(null);
+  const contextBodyRef = useRef<HTMLDivElement | null>(null);
+  const [contextBodyWidth, setContextBodyWidth] = useState<number | null>(null);
   const currentSessionIdRef = useRef(connection.sessionId);
   const lastNotifiedSessionIdRef = useRef<string | undefined>(undefined);
   const lastNotifiedWorkspaceIdRef = useRef<string | undefined>(undefined);
@@ -1808,6 +2230,8 @@ export function App({
   const [artifactPanelTabs, setArtifactPanelTabs] = useState<
     ArtifactPanelTab[]
   >([]);
+  const artifactPanelTabsRef = useRef(artifactPanelTabs);
+  artifactPanelTabsRef.current = artifactPanelTabs;
   useEffect(() => {
     if (artifactPanelExtraArtifacts.length === 0 || artifacts.length === 0) {
       return;
@@ -1925,6 +2349,13 @@ export function App({
       ),
     [displayMessages, artifactsByTurn, connection.workspaceCwd],
   );
+  const latestReviewChanges = useMemo(() => {
+    let latest: readonly TurnOutputFileChange[] = [];
+    for (const changes of fileChangesByTurn.values()) {
+      if (changes.length > 0) latest = changes;
+    }
+    return latest;
+  }, [fileChangesByTurn]);
   const scheduledTasksByTurn = useMemo(
     () => getScheduledTasksByTurn(displayMessages),
     [displayMessages],
@@ -1934,6 +2365,12 @@ export function App({
     [messageTurnOutputs],
   );
   const [artifactPanelOpen, setArtifactPanelOpen] = useState(false);
+  const [environmentPanelOpen, setEnvironmentPanelOpen] = useState(false);
+  const preserveEnvironmentPanelOnArtifactOpenRef = useRef(false);
+  useLayoutEffect(() => {
+    preserveEnvironmentPanelOnArtifactOpenRef.current = false;
+    setEnvironmentPanelOpen(false);
+  }, [connection.sessionId]);
   const artifactPanelOpenRef = useRef(artifactPanelOpen);
   artifactPanelOpenRef.current = artifactPanelOpen;
   const [activeArtifactPanelTabId, setActiveArtifactPanelTabId] = useState<
@@ -2016,6 +2453,256 @@ export function App({
     setPaneArtifactSnapshots(new Map());
     setArtifactPanelWidth(savedState.width);
   }, [connection.sessionId]);
+  const sideTasksAvailable =
+    Boolean(connection.sessionId && connection.workspaceCwd) &&
+    connection.capabilities?.features.includes(SESSION_SIDE_TASK_FEATURE) ===
+      true;
+  const [sideTaskCatalog, setSideTaskCatalog] = useState<SideTaskCatalogState>({
+    items: [],
+    loaded: false,
+  });
+  const optimisticSideTaskIdsRef = useRef(new Set<string>());
+  const visibleSideTasks =
+    sideTaskCatalog.parentSessionId === connection.sessionId
+      ? sideTaskCatalog.items
+      : [];
+  const sideTasksLoading =
+    visibleSideTasks.length === 0 &&
+    (sideTaskCatalog.parentSessionId !== connection.sessionId ||
+      !sideTaskCatalog.loaded);
+  const nextSideTaskTabIdRef = useRef(0);
+  const createSideTask = useCallback(
+    (initialPrompt?: string) => {
+      const parentSessionId = connection.sessionId;
+      if (!parentSessionId || !sideTasksAvailable) return false;
+      const tab: ArtifactPanelTab = {
+        id: `side-task:draft:${Date.now()}:${++nextSideTaskTabIdRef.current}`,
+        kind: 'side_task',
+        title: t('sideTask.title'),
+        parentSessionId,
+        workspaceCwd: connection.workspaceCwd,
+        nameFromFirstPrompt: true,
+        ...(initialPrompt?.trim()
+          ? { initialPrompt: initialPrompt.trim() }
+          : {}),
+      };
+      setArtifactPanelTabs((tabs) => [...tabs, tab]);
+      setActiveArtifactPanelTabId(tab.id);
+      setArtifactPanelOpen(true);
+      return true;
+    },
+    [connection.sessionId, connection.workspaceCwd, sideTasksAvailable, t],
+  );
+  const createEmptySideTask = useCallback(() => {
+    if (createSideTask()) return;
+    pushToast('error', t('sideTask.createFailed'));
+  }, [createSideTask, pushToast, t]);
+  const createSideTaskSession = useCallback(
+    async (_tabId: string, parentSessionId: string, title: string) => {
+      const parentClientId =
+        connection.sessionId === parentSessionId
+          ? connection.clientId
+          : undefined;
+      const session = await workspace.client.createSideTaskSession(
+        parentSessionId,
+        {
+          name: title,
+        },
+        parentClientId,
+      );
+      await workspace.client
+        .detachSession(session.sessionId, session.clientId)
+        .catch(() => undefined);
+      return {
+        sessionId: session.sessionId,
+        displayName: session.displayName,
+      };
+    },
+    [connection.clientId, connection.sessionId, workspace.client],
+  );
+  const handleSideTaskCreated = useCallback(
+    (tabId: string, sessionId: string) => {
+      let createdTab = artifactPanelTabsRef.current.find(
+        (candidate) => candidate.id === tabId,
+      );
+      setArtifactPanelTabs((tabs) =>
+        tabs.map((tab) =>
+          tab.id === tabId && tab.kind === 'side_task'
+            ? { ...tab, sessionId }
+            : tab,
+        ),
+      );
+      if (!createdTab) {
+        // Creation can resolve after we navigate away from the parent session;
+        // the draft tab then lives in a saved per-session bucket rather than the
+        // live tabs, so write the sessionId there too or reopening the parent
+        // creates a duplicate side task.
+        for (const state of artifactPanelStateBySessionRef.current.values()) {
+          const candidate = state.tabs.find(
+            (bucketTab) => bucketTab.id === tabId,
+          );
+          if (!candidate) continue;
+          createdTab = candidate;
+          state.tabs = state.tabs.map((bucketTab) =>
+            bucketTab.id === tabId && bucketTab.kind === 'side_task'
+              ? { ...bucketTab, sessionId }
+              : bucketTab,
+          );
+          break;
+        }
+      }
+      const sideTaskTab =
+        createdTab?.kind === 'side_task' ? createdTab : undefined;
+      if (!sideTaskTab) return;
+      optimisticSideTaskIdsRef.current.add(sessionId);
+      setSideTaskCatalog((catalog) => {
+        if (catalog.parentSessionId !== sideTaskTab.parentSessionId) {
+          return catalog;
+        }
+        if (catalog.items.some((item) => item.sessionId === sessionId)) {
+          return catalog;
+        }
+        return {
+          ...catalog,
+          items: [
+            ...catalog.items,
+            {
+              sessionId,
+              title: sideTaskTab.title,
+              workspaceCwd: sideTaskTab.workspaceCwd,
+              updatedAt: new Date().toISOString(),
+            },
+          ],
+        };
+      });
+    },
+    [],
+  );
+  const handleSideTaskTitleChange = useCallback(
+    (tabId: string, title: string, fromFirstPrompt = false) => {
+      const sideTaskTab = artifactPanelTabsRef.current.find(
+        (tab) => tab.id === tabId && tab.kind === 'side_task',
+      );
+      const sessionId =
+        sideTaskTab?.kind === 'side_task' ? sideTaskTab.sessionId : undefined;
+      setArtifactPanelTabs((tabs) =>
+        tabs.map((tab) => {
+          if (tab.id !== tabId || tab.kind !== 'side_task') return tab;
+          if (!fromFirstPrompt && tab.title === title) return tab;
+          return {
+            ...tab,
+            title,
+            ...(fromFirstPrompt
+              ? {
+                  nameFromFirstPrompt: false,
+                  initialPrompt: undefined,
+                }
+              : {}),
+          };
+        }),
+      );
+      if (sessionId) {
+        setSideTaskCatalog((catalog) => ({
+          ...catalog,
+          items: catalog.items.map((item) =>
+            item.sessionId === sessionId ? { ...item, title } : item,
+          ),
+        }));
+      }
+    },
+    [],
+  );
+  const openSideTask = useCallback(
+    (sideTask: SideTaskListItem) => {
+      const parentSessionId = connection.sessionId;
+      if (!parentSessionId) return;
+      const tab: ArtifactPanelTab = {
+        id: `side-task:${sideTask.sessionId}`,
+        kind: 'side_task',
+        title: sideTask.title,
+        sessionId: sideTask.sessionId,
+        parentSessionId,
+        workspaceCwd: sideTask.workspaceCwd ?? connection.workspaceCwd,
+      };
+      setArtifactPanelTabs((tabs) =>
+        tabs.some(
+          (item) =>
+            item.kind === 'side_task' && item.sessionId === sideTask.sessionId,
+        )
+          ? tabs
+          : [...tabs, tab],
+      );
+      const existingTab = artifactPanelTabsRef.current.find(
+        (item) =>
+          item.kind === 'side_task' && item.sessionId === sideTask.sessionId,
+      );
+      setActiveArtifactPanelTabId(existingTab?.id ?? tab.id);
+      setArtifactPanelOpen(true);
+    },
+    [connection.sessionId, connection.workspaceCwd],
+  );
+  useEffect(() => {
+    const parentSessionId = connection.sessionId;
+    const workspaceCwd = connection.workspaceCwd;
+    if (!sideTasksAvailable || !parentSessionId || !workspaceCwd) {
+      setSideTaskCatalog({ items: [], loaded: false });
+      return;
+    }
+    if (!artifactPanelOpen) return;
+    setSideTaskCatalog((catalog) =>
+      catalog.parentSessionId === parentSessionId
+        ? { ...catalog, loaded: false }
+        : { parentSessionId, items: [], loaded: false },
+    );
+    let cancelled = false;
+    void workspace.client
+      .listWorkspaceSessions(workspaceCwd, {
+        pageSize: SESSION_LIST_PAGE_SIZE,
+        archiveState: 'active',
+        sourceType: WEB_SHELL_SIDE_TASK_SOURCE_TYPE,
+        sourceId: parentSessionId,
+      })
+      .then((sessions) => {
+        if (cancelled) return;
+        const listedItems = sessions.map((session) => ({
+          sessionId: session.sessionId,
+          title:
+            session.displayName?.trim() ||
+            `${t('sideTask.title')} ${session.sessionId.slice(0, 8)}`,
+          workspaceCwd: session.workspaceCwd || workspaceCwd,
+          updatedAt: session.updatedAt || session.createdAt,
+        }));
+        for (const item of listedItems) {
+          optimisticSideTaskIdsRef.current.delete(item.sessionId);
+        }
+        setSideTaskCatalog((catalog) =>
+          mergeSideTaskCatalog(
+            catalog,
+            parentSessionId,
+            listedItems,
+            optimisticSideTaskIdsRef.current,
+          ),
+        );
+      })
+      .catch(() => {
+        if (cancelled) return;
+        setSideTaskCatalog((catalog) =>
+          catalog.parentSessionId === parentSessionId
+            ? { ...catalog, loaded: true }
+            : catalog,
+        );
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    connection.sessionId,
+    connection.workspaceCwd,
+    artifactPanelOpen,
+    sideTasksAvailable,
+    t,
+    workspace.client,
+  ]);
   const getMaxArtifactPanelWidth = useCallback(() => {
     const chatPaneWidth = chatPaneRef.current?.getBoundingClientRect().width;
     if (!chatPaneWidth) {
@@ -2077,11 +2764,14 @@ export function App({
       selectedPath?: string,
       workspaceActions?: DaemonWorkspaceActions,
       reviewWorkspaceCwd?: string,
+      tabId = 'review',
     ) => {
       const reviewTab: ArtifactPanelTab = {
-        id: 'review',
+        id: tabId,
         kind: 'review',
         title: t('turnOutputs.review'),
+        changes,
+        ...(selectedPath ? { selectedPath } : {}),
         ...(workspaceActions ? { workspaceActions } : {}),
         ...(reviewWorkspaceCwd ? { workspaceCwd: reviewWorkspaceCwd } : {}),
       };
@@ -2100,13 +2790,20 @@ export function App({
     },
     [getDefaultReviewPanelWidth, t],
   );
+  const openLatestReviewPanel = useCallback(() => {
+    if (latestReviewChanges.length === 0) return;
+    openReviewPanel(latestReviewChanges);
+  }, [latestReviewChanges, openReviewPanel]);
   const openScheduledTaskPanel = useCallback(
     (
       task: TurnOutputScheduledTask,
       tabWorkspaceActions?: ReturnType<typeof useWorkspaceActions>,
+      sourceSessionId?: string,
     ) => {
       const tab: ArtifactPanelTab = {
-        id: `scheduled-task:${task.toolCallId}`,
+        id: sourceSessionId
+          ? `scheduled-task:${sourceSessionId}:${task.toolCallId}`
+          : `scheduled-task:${task.toolCallId}`,
         kind: 'scheduled_task',
         title: t('scheduledTasks.title'),
         task,
@@ -2128,12 +2825,22 @@ export function App({
     [getDefaultReviewPanelWidth, t],
   );
   const openMonitorPanel = useCallback(
-    (task: DaemonSessionMonitorTaskStatus) => {
+    (
+      task: DaemonSessionMonitorTaskStatus,
+      sourceSessionId?: string,
+      sourceSessionActions?: DaemonSessionActions,
+    ) => {
       const tab: ArtifactPanelTab = {
-        id: `monitor:${task.id}`,
+        id: sourceSessionId
+          ? `monitor:${sourceSessionId}:${task.id}`
+          : `monitor:${task.id}`,
         kind: 'monitor',
         title: task.description,
         task,
+        ...(sourceSessionId ? { sessionId: sourceSessionId } : {}),
+        ...(sourceSessionActions
+          ? { sessionActions: sourceSessionActions }
+          : {}),
       };
       setArtifactPanelTabs((tabs) =>
         tabs.some((item) => item.id === tab.id)
@@ -2156,6 +2863,45 @@ export function App({
     },
     [getDefaultReviewPanelWidth],
   );
+  const openShellPanel = useCallback(
+    (
+      task: DaemonSessionShellTaskStatus,
+      sourceSessionId?: string,
+      sourceSessionActions?: DaemonSessionActions,
+    ) => {
+      const tab: ArtifactPanelTab = {
+        id: sourceSessionId
+          ? `shell:${sourceSessionId}:${task.id}`
+          : `shell:${task.id}`,
+        kind: 'shell',
+        title: task.command,
+        task,
+        ...(sourceSessionId ? { sessionId: sourceSessionId } : {}),
+        ...(sourceSessionActions
+          ? { sessionActions: sourceSessionActions }
+          : {}),
+      };
+      setArtifactPanelTabs((tabs) =>
+        tabs.some((item) => item.id === tab.id)
+          ? tabs.map((item) => {
+              if (item.id !== tab.id || item.kind !== 'shell') return item;
+              const mergedTask = mergeShellTaskSnapshot(item.task, task);
+              return {
+                ...tab,
+                title: mergedTask.command,
+                task: mergedTask,
+              };
+            })
+          : [...tabs, tab],
+      );
+      setActiveArtifactPanelTabId(tab.id);
+      setArtifactPanelWidth((width) =>
+        artifactPanelOpenRef.current ? width : getDefaultReviewPanelWidth(),
+      );
+      setArtifactPanelOpen(true);
+    },
+    [getDefaultReviewPanelWidth],
+  );
   const openSubagentPanelForSession = useCallback(
     (tool: ACPToolCall, sessionId: string, workspaceCwd?: string) => {
       const rawOutput =
@@ -2206,6 +2952,28 @@ export function App({
       openSubagentPanelForSession,
     ],
   );
+  const openEnvironmentAgent = useCallback(
+    (task: DaemonSessionAgentTaskStatus) => {
+      if (!connection.sessionId) return;
+      if (!artifactPanelOpenRef.current) {
+        preserveEnvironmentPanelOnArtifactOpenRef.current = true;
+      }
+      const tool = task.toolUseId
+        ? findToolCall(messages, task.toolUseId)
+        : undefined;
+      openSubagentPanelForSession(
+        tool ?? agentTaskAsToolCall(task),
+        connection.sessionId,
+        connection.workspaceCwd,
+      );
+    },
+    [
+      connection.sessionId,
+      connection.workspaceCwd,
+      messages,
+      openSubagentPanelForSession,
+    ],
+  );
   const handleTurnOutputOpen = useCallback(
     (request: TurnOutputOpenRequest) => {
       if (onRightPanelOpen) {
@@ -2218,11 +2986,18 @@ export function App({
           request.selectedPath,
           request.workspaceActions,
           request.workspaceCwd,
+          request.sourceSessionId
+            ? `review:${request.sourceSessionId}:${request.turnId}`
+            : undefined,
         );
         return;
       }
       if (request.kind === 'scheduled_task') {
-        openScheduledTaskPanel(request.task, request.workspaceActions);
+        openScheduledTaskPanel(
+          request.task,
+          request.workspaceActions,
+          request.sourceSessionId,
+        );
         return;
       }
       if (request.kind === 'subagent') {
@@ -2233,7 +3008,7 @@ export function App({
         );
         return;
       }
-      if (!request.workspaceActions) {
+      if (!request.workspaceActions || request.sourceSessionId) {
         setArtifactPanelExtraArtifacts((current) => {
           const index = current.findIndex(
             (artifact) => artifact.id === request.artifact.id,
@@ -2245,7 +3020,9 @@ export function App({
         });
       }
       const tab: ArtifactPanelTab = {
-        id: request.id,
+        id: request.sourceSessionId
+          ? `${request.sourceSessionId}:${request.id}`
+          : request.id,
         kind: 'artifact',
         title: request.title,
         artifactId: request.artifactId,
@@ -2303,12 +3080,9 @@ export function App({
   );
   const closeArtifactPanel = useCallback(() => {
     setArtifactPanelOpen(false);
-    setArtifactPanelTabs([]);
-    setActiveArtifactPanelTabId(null);
-    setReviewChanges([]);
-    setSelectedReviewPath(null);
-    setArtifactPanelExtraArtifacts([]);
-    setPaneArtifactSnapshots(new Map());
+    setSideTaskCatalog((catalog) =>
+      catalog.items.length === 0 ? { ...catalog, loaded: false } : catalog,
+    );
   }, []);
   useLayoutEffect(() => {
     if (!artifactPanelOpen) return;
@@ -2555,18 +3329,26 @@ export function App({
       }) as CSSProperties,
     [bottomPanelHeight, bottomPanelInset],
   );
-  const backgroundTaskActivityKey = useMemo(
-    () => getBackgroundTaskActivityKey(messages),
+  const taskActivityKey = useMemo(
+    () => getTaskActivityKey(messages),
     [messages],
   );
   const [backgroundTasksRefreshTrigger, setBackgroundTasksRefreshTrigger] =
     useState(0);
-  const backgroundTasks = useBackgroundTasks(
+  const sessionTasks = useBackgroundTasks(
     connection.sessionId,
-    backgroundTaskActivityKey,
+    taskActivityKey,
     connection.status === 'connected',
     backgroundTasksRefreshTrigger,
   );
+  const environmentAgentTasks = useMemo(
+    () => getEnvironmentAgentTasks(messages, sessionTasks),
+    [messages, sessionTasks],
+  );
+  const backgroundTasks = useMemo(
+    () => sessionTasks.filter((task) => task.kind !== 'agent'),
+    [sessionTasks],
+  );
   const monitorDetailsSessionIdRef = useRef(connection.sessionId);
   monitorDetailsSessionIdRef.current = connection.sessionId;
   const openMonitorPanelFromTool = useCallback(
@@ -2605,7 +3387,12 @@ export function App({
     setArtifactPanelTabs((tabs) => {
       let changed = false;
       const next = tabs.map((tab) => {
-        if (tab.kind !== 'monitor') return tab;
+        if (
+          tab.kind !== 'monitor' ||
+          (tab.sessionId && tab.sessionId !== connection.sessionId)
+        ) {
+          return tab;
+        }
         const task = monitors.get(tab.task.id);
         if (!task || task === tab.task) return tab;
         const mergedTask = mergeMonitorTaskSnapshot(tab.task, task);
@@ -2619,7 +3406,39 @@ export function App({
       });
       return changed ? next : tabs;
     });
-  }, [backgroundTasks]);
+  }, [backgroundTasks, connection.sessionId]);
+  useEffect(() => {
+    const shellTasks = new Map(
+      backgroundTasks
+        .filter(
+          (task): task is DaemonSessionShellTaskStatus => task.kind === 'shell',
+        )
+        .map((task) => [task.id, task]),
+    );
+    if (shellTasks.size === 0) return;
+    setArtifactPanelTabs((tabs) => {
+      let changed = false;
+      const next = tabs.map((tab) => {
+        if (
+          tab.kind !== 'shell' ||
+          (tab.sessionId && tab.sessionId !== connection.sessionId)
+        ) {
+          return tab;
+        }
+        const task = shellTasks.get(tab.task.id);
+        if (!task || task === tab.task) return tab;
+        const mergedTask = mergeShellTaskSnapshot(tab.task, task);
+        if (mergedTask === tab.task) return tab;
+        changed = true;
+        return {
+          ...tab,
+          title: mergedTask.command,
+          task: mergedTask,
+        };
+      });
+      return changed ? next : tabs;
+    });
+  }, [backgroundTasks, connection.sessionId]);
   const footerTasks = useMemo(
     () => (renderFooter ? backgroundTasks.map(mapToWebShellTaskInfo) : []),
     [backgroundTasks, renderFooter],
@@ -3277,6 +4096,14 @@ export function App({
     },
     [openMonitorPanel],
   );
+  const handleOpenShellDetails = useCallback(
+    (task: DaemonSessionShellTaskStatus) => {
+      setTasksDialogMessage(null);
+      setBackgroundTasksRefreshTrigger((value) => value + 1);
+      openShellPanel(task);
+    },
+    [openShellPanel],
+  );
   const [selectedTheme, setSelectedTheme] = useState<WebShellTheme>(
     providedTheme ?? WebShellThemeId.Dark,
   );
@@ -3289,12 +4116,38 @@ export function App({
   }, []);
   const connectionRef = useRef(connection);
   connectionRef.current = connection;
+  const refreshActiveSessionDisplayName = useCallback(async () => {
+    const activeConnection = connectionRef.current;
+    if (!activeConnection.sessionId || !activeConnection.workspaceCwd) return;
+    try {
+      const sessions = await workspace.client.listWorkspaceSessions(
+        activeConnection.workspaceCwd,
+        { pageSize: 200 },
+      );
+      if (
+        connectionRef.current.sessionId !== activeConnection.sessionId ||
+        connectionRef.current.displayName
+      ) {
+        return;
+      }
+      const displayName = sessions.find(
+        (session) => session.sessionId === activeConnection.sessionId,
+      )?.displayName;
+      if (displayName?.trim()) setSessionStatusDisplayName(displayName);
+    } catch {
+      // The live session_metadata_updated event remains the primary path.
+    }
+  }, [workspace.client]);
+  const refreshActiveSessionDisplayNameRef = useRef(
+    refreshActiveSessionDisplayName,
+  );
+  refreshActiveSessionDisplayNameRef.current = refreshActiveSessionDisplayName;
   const requireActiveSessionForLocalCommand = useCallback((): boolean => {
     if (connectionRef.current.sessionId) return true;
     pushToast('info', t('localCommand.noSession'));
     return false;
   }, [pushToast, t]);
-  const sessionDisplayName = connection.displayName;
+  const sessionDisplayName = connection.displayName ?? sessionStatusDisplayName;
   const [currentMode, setCurrentMode] = useState('default');
   const currentModeRef = useRef(currentMode);
   currentModeRef.current = currentMode;
@@ -3459,14 +4312,18 @@ export function App({
     }
     delayedReloadTimerRef.current = setTimeout(() => {
       setSessionListReloadToken((n) => n + 1);
+      void refreshActiveSessionDisplayNameRef.current();
     }, 2000);
   }, []);
   const dispatchSessionChange = useCallback(
     (event: SessionChangeEvent) => {
       onSessionChange?.(event);
       setSessionListReloadToken((n) => n + 1);
+      if (event.type === 'turn_complete') {
+        scheduleDelayedSessionListReload();
+      }
     },
-    [onSessionChange],
+    [onSessionChange, scheduleDelayedSessionListReload],
   );
   // Ref-stable handle so that useCallback hooks (sendPrompt, enqueuePrompt,
   // turn_complete effect) don't need dispatchSessionChange in their dep arrays.
@@ -5475,10 +6332,12 @@ export function App({
       },
       openSessionDrawer,
       createNewSession: () => createNewSession(),
+      createSideTask,
     }),
     [
       closeMobileDrawer,
       createNewSession,
+      createSideTask,
       openPanel,
       openSessionDrawer,
       requestOpenSplitView,
@@ -5728,9 +6587,32 @@ export function App({
         setTasksDialogMessage({ snapshot });
       })
       .catch((error: unknown) => {
+        if (isSessionDisconnectedError(error)) return;
         reportError(error, 'Failed to load tasks');
       });
   }, [reportError, requireActiveSessionForLocalCommand, sessionActions]);
+  const openEnvironmentTasksPanel = useCallback(() => {
+    if (!requireActiveSessionForLocalCommand()) return;
+    setEnvironmentPanelOpen(true);
+    setBackgroundTasksRefreshTrigger((value) => value + 1);
+  }, [requireActiveSessionForLocalCommand]);
+  const openEnvironmentTask = useCallback(
+    (task: DaemonSessionTaskStatus) => {
+      if (task.kind === 'monitor' || task.kind === 'shell') {
+        if (!artifactPanelOpenRef.current) {
+          preserveEnvironmentPanelOnArtifactOpenRef.current = true;
+        }
+        if (task.kind === 'monitor') {
+          handleOpenMonitorDetails(task);
+        } else {
+          handleOpenShellDetails(task);
+        }
+        return;
+      }
+      openTasksPanel();
+    },
+    [handleOpenMonitorDetails, handleOpenShellDetails, openTasksPanel],
+  );
 
   const dispatchGoalSet = useCallback(
     (condition: string, setAt: number) => {
@@ -6017,7 +6899,7 @@ export function App({
             return true;
           }
           if (cmd === 'tasks') {
-            openTasksPanel();
+            openEnvironmentTasksPanel();
             return true;
           }
           if (cmd === 'goal') {
@@ -6165,6 +7047,7 @@ export function App({
                   pushToast('warning', t('fork.notStarted'));
                   return;
                 }
+                setBackgroundTasksRefreshTrigger((value) => value + 1);
                 pushToast(
                   'success',
                   t('fork.started', { name: result.description }),
@@ -6608,7 +7491,20 @@ export function App({
             return true;
           }
           if (cmd === 'btw') {
-            runVisibleBtw(text.slice(match[0].length));
+            const rawQuestion = text.slice(match[0].length).trim();
+            const sideTaskMatch = /^side(?:\s+|$)/i.exec(rawQuestion);
+            if (sideTasksAvailable && sideTaskMatch) {
+              const question = rawQuestion
+                .slice(sideTaskMatch[0].length)
+                .trim();
+              if (!question) {
+                pushToast('error', t('btw.side.empty'));
+                return true;
+              }
+              createSideTask(question);
+              return true;
+            }
+            runVisibleBtw(rawQuestion);
             return true;
           }
           if (cmd === 'stats') {
@@ -6854,7 +7750,9 @@ export function App({
       handleSetMode,
       handleLanguageChange,
       blockLocalCommandDuringTurn,
-      openTasksPanel,
+      createSideTask,
+      sideTasksAvailable,
+      openEnvironmentTasksPanel,
       hiddenCommands,
       pushToast,
       reportError,
@@ -7436,7 +8334,7 @@ export function App({
       mergeCommands(
         retainedCommands,
         refreshedSkillCommands,
-        getLocalCommands(t),
+        getLocalCommands(t, { sideTaskAvailable: sideTasksAvailable }),
       ),
       t,
     )
@@ -7458,6 +8356,7 @@ export function App({
     hiddenCommands,
     loadedSkills,
     loadedSkillsReady,
+    sideTasksAvailable,
     t,
   ]);
 
@@ -7516,6 +8415,99 @@ export function App({
   const effectiveChatWidthMode: ChatWidthMode = isChatEmptyState
     ? getDefaultChatWidthMode()
     : chatWidthMode;
+  const activeGitBranch = sessionWorktree
+    ? (selectedWorkspaceGitStatus?.branch ?? sessionWorktree.branch)
+    : sessionBranch
+      ? (selectedWorkspaceGitStatus?.branch ?? sessionBranch.name)
+      : connection.sessionId
+        ? connection.gitBranch
+        : (selectedWorkspaceGitStatus?.branch ?? undefined);
+  const environmentPanelCanDock =
+    contextBodyWidth === null ||
+    contextBodyWidth >=
+      MIN_DOCKED_MESSAGE_AREA_WIDTH + DOCKED_ENVIRONMENT_PANEL_WIDTH;
+  const environmentPanelFits =
+    chatWidthMode !== 'wide' && environmentPanelCanDock;
+  const environmentPanelVisible =
+    environmentPanelOpen &&
+    !isChatEmptyState &&
+    !activePanel &&
+    mainView === 'chat';
+  const handleEnvironmentPanelOpenChange = useCallback((open: boolean) => {
+    if (!open) {
+      preserveEnvironmentPanelOnArtifactOpenRef.current = false;
+      setEnvironmentPanelOpen(false);
+      return;
+    }
+    setEnvironmentPanelOpen(true);
+  }, []);
+  const dismissEnvironmentPanel = useCallback(() => {
+    preserveEnvironmentPanelOnArtifactOpenRef.current = false;
+    setEnvironmentPanelOpen(false);
+  }, []);
+  const handleRightPanelOpenChange = useCallback(
+    (open: boolean) => {
+      if (open) {
+        setArtifactPanelOpen(true);
+      } else {
+        closeArtifactPanel();
+      }
+    },
+    [closeArtifactPanel],
+  );
+  useLayoutEffect(() => {
+    const body = contextBodyRef.current;
+    if (!body) return;
+    const updateWidth = () => {
+      const availableWidth = body.getBoundingClientRect().width;
+      if (availableWidth <= 0) return;
+      setContextBodyWidth((current) =>
+        current === availableWidth ? current : availableWidth,
+      );
+    };
+    const handleWindowResize = () => {
+      preserveEnvironmentPanelOnArtifactOpenRef.current = false;
+      updateWidth();
+    };
+    updateWidth();
+    window.addEventListener('resize', handleWindowResize);
+    const observer = new ResizeObserver(updateWidth);
+    observer.observe(body);
+    return () => {
+      window.removeEventListener('resize', handleWindowResize);
+      observer.disconnect();
+    };
+  }, []);
+  const previousEnvironmentCanDockRef = useRef(environmentPanelCanDock);
+  useLayoutEffect(() => {
+    const crossedDockBreakpoint =
+      previousEnvironmentCanDockRef.current && !environmentPanelCanDock;
+    previousEnvironmentCanDockRef.current = environmentPanelCanDock;
+    if (
+      crossedDockBreakpoint &&
+      !preserveEnvironmentPanelOnArtifactOpenRef.current
+    ) {
+      setEnvironmentPanelOpen(false);
+    }
+  }, [environmentPanelCanDock]);
+  const previousArtifactPanelOpenForEnvironmentRef = useRef(artifactPanelOpen);
+  useLayoutEffect(() => {
+    const artifactPanelJustOpened =
+      !previousArtifactPanelOpenForEnvironmentRef.current && artifactPanelOpen;
+    previousArtifactPanelOpenForEnvironmentRef.current = artifactPanelOpen;
+    if (!artifactPanelOpen) {
+      preserveEnvironmentPanelOnArtifactOpenRef.current = false;
+      return;
+    }
+    if (!artifactPanelJustOpened) return;
+    const preserveEnvironmentPanel =
+      preserveEnvironmentPanelOnArtifactOpenRef.current;
+    if (!preserveEnvironmentPanel && !environmentPanelFits) {
+      setEnvironmentPanelOpen(false);
+    }
+  }, [artifactPanelOpen, environmentPanelFits]);
+  const environmentPanelMounted =
+    !isChatEmptyState && !activePanel && mainView === 'chat';
   const chatWidthToggleMin = getChatMaxWidth(chatMaxWidth);
 
   const appClassName = [
@@ -8102,8 +9094,93 @@ export function App({
                 />
               </div>
             )}
+            <div className={styles.contextShell}>
+              {chatHeaderEnabled &&
+                !isChatEmptyState &&
+                !activePanel &&
+                mainView === 'chat' && (
+                <div className={styles.chatHeaderRow}>
+                  {sidebarOptions.enabled &&
+                    sidebarOptions.showCompactToggle && (
+                      <button
+                        type="button"
+                        className={styles.hamburgerButton}
+                        onClick={() => {
+                          setForceMobileDrawer(false);
+                          setMobileDrawerOpen((open) => !open);
+                        }}
+                        aria-label={t('sidebar.toggleMenu')}
+                        aria-expanded={mobileDrawerOpen}
+                      >
+                        <svg
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          strokeWidth="2"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          aria-hidden="true"
+                        >
+                          <line x1="3" y1="6" x2="21" y2="6" />
+                          <line x1="3" y1="12" x2="21" y2="12" />
+                          <line x1="3" y1="18" x2="21" y2="18" />
+                        </svg>
+                      </button>
+                    )}
+                  {renderChatHeader ? (
+                    <div className={styles.customChatHeader}>
+                      {renderChatHeader({
+                        sessionId: connection.sessionId,
+                        sessionName: sessionDisplayName,
+                        workspaceCwd: connection.workspaceCwd,
+                        items: chatHeaderItems,
+                        environmentPanelOpen: environmentPanelVisible,
+                        rightPanelOpen: artifactPanelOpen,
+                        onEnvironmentPanelOpenChange:
+                          handleEnvironmentPanelOpenChange,
+                        onRightPanelOpenChange: handleRightPanelOpenChange,
+                      })}
+                    </div>
+                  ) : (
+                    <ChatContextHeader
+                      content={
+                        titleHeaderItemVisible
+                          ? (sessionDisplayName ?? t('session.new'))
+                          : null
+                      }
+                      environmentOpen={environmentPanelVisible}
+                      environmentAvailable={environmentHeaderItemVisible}
+                      rightPanelOpen={artifactPanelOpen}
+                      rightPanelAvailable={
+                        rightPanelHeaderItemVisible && !artifactPanelOpen
+                      }
+                      onToggleEnvironment={() =>
+                        handleEnvironmentPanelOpenChange(
+                          !environmentPanelVisible,
+                        )
+                      }
+                      onToggleRightPanel={() =>
+                        handleRightPanelOpenChange(!artifactPanelOpen)
+                      }
+                    />
+                  )}
+                </div>
+              )}
+              <div
+                ref={contextBodyRef}
+                data-testid="context-body"
+                className={[
+                  styles.contextBody,
+                  environmentPanelVisible && environmentPanelFits
+                    ? styles.contextBodyWithEnvironmentPanel
+                    : undefined,
+                ]
+                  .filter(Boolean)
+                  .join(' ')}
+              >
             <div
               ref={chatPaneRef}
+              data-testid="chat-pane-container"
               className={[
                 styles.chatPane,
                 mainView !== 'chat' ? styles.chatPaneShowingPage : undefined,
@@ -8116,13 +9193,14 @@ export function App({
             >
               {sidebarOptions.enabled &&
                 sidebarOptions.showCompactToggle &&
+                (!chatHeaderEnabled || isChatEmptyState) &&
                 !activePanel &&
                 mainView === 'chat' && (
                   <button
                     type="button"
                     className={[
                       styles.hamburgerButton,
-                      isChatEmptyState
+                      !chatHeaderEnabled || isChatEmptyState
                         ? styles.hamburgerButtonFloating
                         : undefined,
                     ]
@@ -8565,6 +9643,7 @@ export function App({
                         onError={reportError}
                         onSlashCommand={onSlashCommand}
                         onRightPanelOpen={handleTurnOutputOpen}
+                        onOpenMonitor={openMonitorPanel}
                         onPaneArtifactsChange={handlePaneArtifactsChange}
                         messageTurnOutputs={messageTurnOutputs}
                         restartSseOnPrompt={restartSseOnPrompt}
@@ -8782,27 +9861,14 @@ export function App({
                                 </div>
                               );
                             }
-                            const chatHeader =
-                              !isChatEmptyState && renderChatHeader ? (
-                                <div className={styles.chatHeader}>
-                                  {renderChatHeader({
-                                    sessionId: connection.sessionId,
-                                    sessionName: sessionDisplayName,
-                                    workspaceCwd: connection.workspaceCwd,
-                                  })}
-                                </div>
-                              ) : null;
                             return (
-                              <>
-                                {chatHeader}
-                                <div
-                                  style={contentStyle}
-                                  className={contentClassName}
-                                >
-                                  {messageList}
-                                  {btwPanel}
-                                </div>
-                              </>
+                              <div
+                                style={contentStyle}
+                                className={contentClassName}
+                              >
+                                {messageList}
+                                {btwPanel}
+                              </div>
                             );
                           })()}
                         </InteractionBlockContext.Provider>
@@ -9006,18 +10072,7 @@ export function App({
                           onClearQueuedMessages={clearQueuedPrompts}
                           currentMode={currentMode}
                           currentModel={currentModel}
-                          gitBranch={
-                            sessionWorktree
-                              ? (selectedWorkspaceGitStatus?.branch ??
-                                sessionWorktree.branch)
-                              : sessionBranch
-                                ? (selectedWorkspaceGitStatus?.branch ??
-                                  sessionBranch.name)
-                                : (connection.sessionId
-                                  ? connection.gitBranch
-                                  : (selectedWorkspaceGitStatus?.branch ??
-                                    undefined))
-                          }
+                          gitBranch={activeGitBranch}
                           gitWorktree={Boolean(sessionWorktree)}
                           gitCwd={sessionWorktree?.path}
                           gitModeIntent={gitModeEligible ? gitModeIntent : undefined}
@@ -9036,7 +10091,13 @@ export function App({
                           chatWidthMode={chatWidthMode}
                           showChatWidthToggle={!isChatEmptyState}
                           chatWidthToggleMin={chatWidthToggleMin}
-                          visibleToolbarActions={composerToolbarActions}
+                          visibleToolbarActions={
+                            composerToolbarActions ??
+                            (isChatEmptyState ||
+                            !environmentGitReplacementEnabled
+                              ? DEFAULT_EMPTY_COMPOSER_TOOLBAR_ACTIONS
+                              : DEFAULT_COMPOSER_TOOLBAR_ACTIONS)
+                          }
                           availableModels={availableModels}
                           onSelectMode={handleSetMode}
                           onSelectModel={handleModelSelect}
@@ -9165,7 +10226,12 @@ export function App({
                           ref={statusBarRef}
                           onOpenTasks={() => openTasksPanel()}
                           onReturnToInput={handleReturnToEditor}
-                          tasks={backgroundTasks}
+                          tasks={
+                            isChatEmptyState ||
+                            !environmentTasksReplacementEnabled
+                              ? backgroundTasks
+                              : []
+                          }
                           activeGoal={activeGoal}
                           onOpenGoals={openGoals}
                           hideSettings={hideSettings}
@@ -9192,6 +10258,31 @@ export function App({
                 </div>
               </div>
             </div>
+            {environmentPanelMounted && (
+              <EnvironmentPanel
+                floating={!environmentPanelFits}
+                hidden={!environmentPanelVisible}
+                workspaceCwd={sessionWorktree?.path ?? activeWorkspaceCwd}
+                gitWorkspaceCwd={
+                  connection.sessionId ? gitDiffWorkspaceCwd : undefined
+                }
+                gitCwd={sessionWorktree?.path}
+                branch={activeGitBranch}
+                gitStatus={selectedWorkspaceGitStatus}
+                tasks={sessionTasks}
+                agentTasks={environmentAgentTasks}
+                items={environmentPanelItems}
+                onOpenGitDiff={
+                  gitDiffWorkspaceCwd ? handleOpenGitDiff : undefined
+                }
+                onOpenGitCommit={
+                  gitDiffWorkspaceCwd ? handleOpenCommit : undefined
+                }
+                onOpenAgent={openEnvironmentAgent}
+                onOpenTask={openEnvironmentTask}
+                onDismiss={dismissEnvironmentPanel}
+              />
+            )}
             {artifactPanelOpen && useFloatingArtifactPanel ? (
               <Drawer
                 open
@@ -9215,12 +10306,29 @@ export function App({
                     onSelectTab={setActiveArtifactPanelTabId}
                     onCloseTab={closeArtifactPanelTab}
                     onOpenFilePreview={openFilePreview}
+                    latestReviewAvailable={latestReviewChanges.length > 0}
+                    onOpenLatestReview={openLatestReviewPanel}
+                    items={rightPanelItems}
+                    sideTaskAvailable={sideTasksAvailable}
+                    sideTasks={visibleSideTasks}
+                    sideTasksLoading={sideTasksLoading}
+                    onCreateSideTask={createEmptySideTask}
+                    onOpenSideTask={openSideTask}
+                    onCreateSideTaskSession={createSideTaskSession}
+                    onSideTaskCreated={handleSideTaskCreated}
+                    onSideTaskTitleChange={handleSideTaskTitleChange}
+                    onNestedRightPanelOpen={handleTurnOutputOpen}
+                    onNestedArtifactsChange={handlePaneArtifactsChange}
+                    onSideTaskError={reportError}
                     onClose={closeArtifactPanel}
                     variant="drawer"
                   />
                 </DrawerContent>
               </Drawer>
-            ) : artifactPanelOpen ? (
+            ) : null}
+              </div>
+            </div>
+            {artifactPanelOpen && !useFloatingArtifactPanel && (
               <div
                 className={styles.artifactPanelDock}
                 style={
@@ -9252,11 +10360,25 @@ export function App({
                     onSelectTab={setActiveArtifactPanelTabId}
                     onCloseTab={closeArtifactPanelTab}
                     onOpenFilePreview={openFilePreview}
+                    latestReviewAvailable={latestReviewChanges.length > 0}
+                    onOpenLatestReview={openLatestReviewPanel}
+                    items={rightPanelItems}
+                    sideTaskAvailable={sideTasksAvailable}
+                    sideTasks={visibleSideTasks}
+                    sideTasksLoading={sideTasksLoading}
+                    onCreateSideTask={createEmptySideTask}
+                    onOpenSideTask={openSideTask}
+                    onCreateSideTaskSession={createSideTaskSession}
+                    onSideTaskCreated={handleSideTaskCreated}
+                    onSideTaskTitleChange={handleSideTaskTitleChange}
+                    onNestedRightPanelOpen={handleTurnOutputOpen}
+                    onNestedArtifactsChange={handlePaneArtifactsChange}
+                    onSideTaskError={reportError}
                     onClose={closeArtifactPanel}
                   />
                 </div>
               </div>
-            ) : null}
+            )}
           </div>
         </div>
         </WebShellPortalRootContext.Provider>
diff --git a/packages/web-shell/client/components/BranchPickerPopover.tsx b/packages/web-shell/client/components/BranchPickerPopover.tsx
index a569e727a74..532ca1f7777 100644
--- a/packages/web-shell/client/components/BranchPickerPopover.tsx
+++ b/packages/web-shell/client/components/BranchPickerPopover.tsx
@@ -34,6 +34,7 @@ interface BranchPickerPopoverProps {
   onOpenChange: (open: boolean) => void;
   workspaceCwd: string;
   gitCwd?: string;
+  side?: 'top' | 'right' | 'bottom' | 'left';
   onBranchChanged?: () => void;
   onOpenDiff?: () => void;
   onOpenCommit?: () => void;
@@ -47,6 +48,7 @@ export function BranchPickerPopover({
   onOpenChange,
   workspaceCwd,
   gitCwd,
+  side = 'bottom',
   onBranchChanged,
   onOpenDiff,
   onOpenCommit,
@@ -280,7 +282,7 @@ export function BranchPickerPopover({
       <PopoverContent
         ref={contentRef}
         className={styles.picker}
-        side="bottom"
+        side={side}
         align="start"
         sideOffset={4}
         // The content is portaled out of the composer, but React synthetic
diff --git a/packages/web-shell/client/components/ChatContextHeader.module.css b/packages/web-shell/client/components/ChatContextHeader.module.css
new file mode 100644
index 00000000000..00c816e79ea
--- /dev/null
+++ b/packages/web-shell/client/components/ChatContextHeader.module.css
@@ -0,0 +1,55 @@
+.header {
+  display: flex;
+  min-width: 0;
+  min-height: 52px;
+  flex: 1 1 auto;
+  align-items: center;
+  gap: 0;
+  padding: 8px 20px 8px 12px;
+}
+
+.content {
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+  color: var(--foreground);
+  font-size: 14px;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.actions {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 6px;
+}
+
+.action {
+  display: inline-flex;
+  width: 30px;
+  height: 30px;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 10px;
+  background: transparent;
+  color: var(--muted-foreground);
+  cursor: pointer;
+}
+
+.action:hover,
+.action:focus-visible,
+.action[aria-pressed='true'] {
+  background: var(--accent);
+  color: var(--foreground);
+  outline: none;
+}
+
+.action svg {
+  width: 15px;
+  height: 15px;
+  stroke-width: 1.7;
+}
diff --git a/packages/web-shell/client/components/ChatContextHeader.test.tsx b/packages/web-shell/client/components/ChatContextHeader.test.tsx
new file mode 100644
index 00000000000..14880920019
--- /dev/null
+++ b/packages/web-shell/client/components/ChatContextHeader.test.tsx
@@ -0,0 +1,107 @@
+// @vitest-environment jsdom
+
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { I18nProvider } from '../i18n';
+import { ChatContextHeader } from './ChatContextHeader';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+let container: HTMLDivElement | null = null;
+let root: Root | null = null;
+
+afterEach(() => {
+  act(() => root?.unmount());
+  container?.remove();
+  container = null;
+  root = null;
+});
+
+function mount(
+  props: Partial<Parameters<typeof ChatContextHeader>[0]> = {},
+): HTMLDivElement {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+  act(() => {
+    root!.render(
+      <I18nProvider language="en">
+        <ChatContextHeader
+          content="Session title"
+          environmentOpen={false}
+          environmentAvailable
+          rightPanelOpen={false}
+          rightPanelAvailable={false}
+          onToggleEnvironment={vi.fn()}
+          onToggleRightPanel={vi.fn()}
+          {...props}
+        />
+      </I18nProvider>,
+    );
+  });
+  return container;
+}
+
+describe('ChatContextHeader', () => {
+  it('renders custom content inside the persistent action shell', () => {
+    const view = mount({ content: <span>Custom header</span> });
+
+    expect(view.textContent).toContain('Custom header');
+    expect(view.querySelectorAll('button')).toHaveLength(1);
+  });
+
+  it('hides the right-panel action until content exists', () => {
+    const view = mount();
+
+    expect(
+      view.querySelector('button[aria-label="Toggle right panel"]'),
+    ).toBeNull();
+  });
+
+  it('hides the environment action until content exists', () => {
+    const view = mount({ environmentAvailable: false });
+
+    expect(
+      view.querySelector('button[aria-label="Toggle environment information"]'),
+    ).toBeNull();
+  });
+
+  it('toggles each available panel independently', () => {
+    const onToggleEnvironment = vi.fn();
+    const onToggleRightPanel = vi.fn();
+    const view = mount({
+      rightPanelAvailable: true,
+      onToggleEnvironment,
+      onToggleRightPanel,
+    });
+
+    act(() => {
+      view
+        .querySelector<HTMLButtonElement>(
+          'button[aria-label="Toggle environment information"]',
+        )
+        ?.click();
+      view
+        .querySelector<HTMLButtonElement>(
+          'button[aria-label="Toggle right panel"]',
+        )
+        ?.click();
+    });
+
+    expect(onToggleEnvironment).toHaveBeenCalledOnce();
+    expect(onToggleRightPanel).toHaveBeenCalledOnce();
+  });
+
+  it('keeps the right-panel action to the right of the environment action', () => {
+    const view = mount({ rightPanelAvailable: true });
+    const actions = Array.from(
+      view.querySelectorAll<HTMLButtonElement>('button'),
+    );
+
+    expect(actions.map((button) => button.getAttribute('aria-label'))).toEqual([
+      'Toggle environment information',
+      'Toggle right panel',
+    ]);
+  });
+});
diff --git a/packages/web-shell/client/components/ChatContextHeader.tsx b/packages/web-shell/client/components/ChatContextHeader.tsx
new file mode 100644
index 00000000000..3b7c456aa1a
--- /dev/null
+++ b/packages/web-shell/client/components/ChatContextHeader.tsx
@@ -0,0 +1,59 @@
+import type { ReactNode } from 'react';
+import { LayoutListIcon, PanelRightIcon } from 'lucide-react';
+import { useI18n } from '../i18n';
+import styles from './ChatContextHeader.module.css';
+
+interface ChatContextHeaderProps {
+  content: ReactNode;
+  environmentOpen: boolean;
+  environmentAvailable: boolean;
+  rightPanelOpen: boolean;
+  rightPanelAvailable: boolean;
+  onToggleEnvironment: () => void;
+  onToggleRightPanel: () => void;
+}
+
+export function ChatContextHeader({
+  content,
+  environmentOpen,
+  environmentAvailable,
+  rightPanelOpen,
+  rightPanelAvailable,
+  onToggleEnvironment,
+  onToggleRightPanel,
+}: ChatContextHeaderProps) {
+  const { t } = useI18n();
+
+  return (
+    <header className={styles.header} data-testid="chat-context-header">
+      <div className={styles.content}>{content}</div>
+      <div className={styles.actions}>
+        {environmentAvailable && (
+          <button
+            type="button"
+            className={styles.action}
+            data-web-shell-environment-toggle
+            aria-label={t('chatHeader.toggleEnvironment')}
+            aria-pressed={environmentOpen}
+            title={t('chatHeader.toggleEnvironment')}
+            onClick={onToggleEnvironment}
+          >
+            <LayoutListIcon />
+          </button>
+        )}
+        {rightPanelAvailable && (
+          <button
+            type="button"
+            className={styles.action}
+            aria-label={t('chatHeader.toggleRightPanel')}
+            aria-pressed={rightPanelOpen}
+            title={t('chatHeader.toggleRightPanel')}
+            onClick={onToggleRightPanel}
+          >
+            <PanelRightIcon />
+          </button>
+        )}
+      </div>
+    </header>
+  );
+}
diff --git a/packages/web-shell/client/components/ChatPane.module.css b/packages/web-shell/client/components/ChatPane.module.css
index 7ae1390ab18..2abe4aa85db 100644
--- a/packages/web-shell/client/components/ChatPane.module.css
+++ b/packages/web-shell/client/components/ChatPane.module.css
@@ -10,6 +10,15 @@
   overflow: hidden;
 }
 
+.paneEmbedded {
+  border: 0;
+  border-radius: 0;
+}
+
+.paneEmbedded .footer {
+  padding-bottom: 0;
+}
+
 .header {
   display: flex;
   align-items: center;
diff --git a/packages/web-shell/client/components/ChatPane.test.tsx b/packages/web-shell/client/components/ChatPane.test.tsx
index c5262921389..fc1a6649342 100644
--- a/packages/web-shell/client/components/ChatPane.test.tsx
+++ b/packages/web-shell/client/components/ChatPane.test.tsx
@@ -31,6 +31,13 @@ let latestOnSubmit:
   | undefined;
 let latestChatEditorProps: any;
 let latestFollowupAccept: ((suggestion: string) => void) | undefined;
+let latestMonitorDetailsOnOpen:
+  | ((tool: {
+      callId: string;
+      toolName: string;
+      status: 'completed';
+    }) => Promise<boolean>)
+  | undefined;
 let sendPromptAdmit: (() => void) | undefined;
 const clearFollowup = vi.fn();
 const insertText = vi.fn();
@@ -41,6 +48,7 @@ const cancel = vi.fn(async () => {});
 const setApprovalMode = vi.fn(async (mode: string) => ({ mode }));
 const setModel = vi.fn(async () => ({}) as any);
 const loadArtifacts = vi.fn(async () => ({ artifacts: [] }));
+const getTasks = vi.fn();
 const daemonActions = {
   sendPrompt,
   submitPermission,
@@ -48,6 +56,7 @@ const daemonActions = {
   setApprovalMode,
   setModel,
   loadArtifacts,
+  getTasks,
 };
 const enqueuePrompt = vi.fn(() => true);
 const removeQueuedPrompt = vi.fn();
@@ -117,6 +126,19 @@ vi.mock('../adapters/transcriptAdapter', () => ({
   extractPendingPermission: () => pendingPermission,
 }));
 
+vi.mock('../monitorDetailsContext', async () => {
+  const React = await import('react');
+  return {
+    MonitorDetailsProvider: (props: {
+      onOpen: typeof latestMonitorDetailsOnOpen;
+      children: React.ReactNode;
+    }) => {
+      latestMonitorDetailsOnOpen = props.onOpen;
+      return React.createElement(React.Fragment, null, props.children);
+    },
+  };
+});
+
 vi.mock('./MessageList', () => ({
   MessageList: (props: any) => (
     <div
@@ -246,12 +268,14 @@ beforeEach(() => {
   latestOnSubmit = undefined;
   latestChatEditorProps = undefined;
   latestFollowupAccept = undefined;
+  latestMonitorDetailsOnOpen = undefined;
   sendPromptAdmit = undefined;
   queuedPromptsMock = [];
   queuedTextsMock = [];
   sendPrompt.mockReset();
   loadArtifacts.mockReset();
   loadArtifacts.mockResolvedValue({ artifacts: [] });
+  getTasks.mockReset();
   sendPrompt.mockImplementation(async (_text: string, options?: any) => {
     sendPromptAdmit = options?.onAdmitted;
     return {} as any;
@@ -317,6 +341,80 @@ function testid(id: string): HTMLElement | null {
 }
 
 describe('ChatPane', () => {
+  it('opens a pane monitor in the shared right panel', async () => {
+    connectionState.capabilities = {
+      features: ['session_monitor_tool_correlation'],
+    };
+    const monitor = {
+      kind: 'monitor',
+      id: 'monitor-1',
+      label: 'monitor-label',
+      description: 'watch pane logs',
+      status: 'running',
+      startTime: 1,
+      runtimeMs: 10,
+      command: 'tail -f pane.log',
+      eventCount: 1,
+      droppedLines: 0,
+      toolUseId: 'monitor-call',
+    };
+    getTasks.mockResolvedValue({
+      v: 1,
+      sessionId: 'sess-1',
+      now: 11,
+      tasks: [monitor],
+    });
+    const onOpenMonitor = vi.fn();
+
+    render({ onOpenMonitor });
+
+    let opened = false;
+    await act(async () => {
+      opened =
+        (await latestMonitorDetailsOnOpen?.({
+          callId: 'monitor-call',
+          toolName: 'monitor',
+          status: 'completed',
+        })) ?? false;
+    });
+
+    expect(opened).toBe(true);
+    expect(getTasks).toHaveBeenCalledOnce();
+    expect(onOpenMonitor).toHaveBeenCalledWith(
+      monitor,
+      'sess-1',
+      daemonActions,
+    );
+  });
+
+  it('does not open a monitor returned for another pane session', async () => {
+    connectionState.capabilities = {
+      features: ['session_monitor_tool_correlation'],
+    };
+    getTasks.mockResolvedValue({
+      v: 1,
+      sessionId: 'other-session',
+      now: 11,
+      tasks: [],
+    });
+    const onOpenMonitor = vi.fn();
+
+    render({ onOpenMonitor });
+
+    let opened = true;
+    await act(async () => {
+      opened =
+        (await latestMonitorDetailsOnOpen?.({
+          callId: 'monitor-call',
+          toolName: 'monitor',
+          status: 'completed',
+        })) ?? false;
+    });
+
+    expect(opened).toBe(false);
+    expect(onOpenMonitor).not.toHaveBeenCalled();
+  });
+
   it('renders the custom composer footer directly after the pane editor', () => {
     const footerProps: WebShellComposerToolbarRenderInfo[] = [];
     const ComposerFooter = (props: WebShellComposerToolbarRenderInfo) => {
@@ -397,6 +495,12 @@ describe('ChatPane', () => {
     expect(container!.textContent).toContain('Refactor core');
   });
 
+  it('omits its frame header when embedded in another panel', () => {
+    render({ title: 'Side task', embedded: true });
+    expect(container!.querySelector('header')).toBeNull();
+    expect(testid('pane-messages')).not.toBeNull();
+  });
+
   it('adds no workspace toolbar chip on a single-workspace daemon', () => {
     render({ title: 'Refactor core', workspaceCwd: '/w' });
     expect(latestChatEditorProps.visibleToolbarActions).not.toContain(
diff --git a/packages/web-shell/client/components/ChatPane.tsx b/packages/web-shell/client/components/ChatPane.tsx
index 0cbf7b26d69..232908919a2 100644
--- a/packages/web-shell/client/components/ChatPane.tsx
+++ b/packages/web-shell/client/components/ChatPane.tsx
@@ -15,17 +15,23 @@ import {
   useTranscriptStore,
   useWorkspace,
   useWorkspaceActions,
+  type DaemonSessionActions,
   type DaemonWorkspaceActions,
 } from '@qwen-code/webui/daemon-react-sdk';
 import type {
   DaemonSessionArtifact,
+  DaemonSessionMonitorTaskStatus,
   DaemonWorkspaceCapability,
 } from '@qwen-code/sdk/daemon';
 import type { ACPToolCall } from '../adapters/types';
 import { SubagentDetailsProvider } from '../subagentDetailsContext';
+import { MonitorDetailsProvider } from '../monitorDetailsContext';
 import { useI18n } from '../i18n';
 import { useWebShellCustomization } from '../customization';
-import { SESSION_TRANSCRIPT_PAGINATION_FEATURE } from '../constants/sessions';
+import {
+  SESSION_MONITOR_TOOL_CORRELATION_FEATURE,
+  SESSION_TRANSCRIPT_PAGINATION_FEATURE,
+} from '../constants/sessions';
 import { useAnimationFrameTranscriptBlocks } from '../hooks/useAnimationFrameTranscriptBlocks';
 import { useMessagesFromBlocks } from '../hooks/useMessages';
 import { useSessionArtifacts } from '../hooks/useSessionArtifacts';
@@ -41,6 +47,7 @@ import { isAskUserPermission } from '../utils/askUserPermission';
 import { isDaemonApprovalMode } from '../utils/sessionPreparation';
 import { isVisibleComposerModel } from '../utils/composerModels';
 import { shouldBlockComposerSubmit } from '../utils/composerInputState';
+import { findMonitorTaskForTool } from '../utils/monitorTasks';
 import { invokeSlashCommandHandler } from '../utils/slash-command-action';
 import type { WebShellSlashCommandHandler } from '../App';
 import { getModelDisplayName } from '../utils/modelDisplay';
@@ -90,6 +97,22 @@ const PANE_TOOLBAR_ACTIONS: readonly ComposerToolbarAction[] = [
 ];
 const EMPTY_VOICE_WORKSPACE_REVISIONS: Readonly<Record<string, number>> = {};
 
+function OptionalMonitorDetailsProvider({
+  enabled,
+  onOpen,
+  children,
+}: {
+  enabled: boolean;
+  onOpen: (tool: ACPToolCall) => Promise<boolean>;
+  children: ReactNode;
+}) {
+  return enabled ? (
+    <MonitorDetailsProvider onOpen={onOpen}>{children}</MonitorDetailsProvider>
+  ) : (
+    children
+  );
+}
+
 export interface PaneHeaderActionsInfo {
   sessionId: string;
   workspaceCwd?: string;
@@ -139,6 +162,11 @@ export interface ChatPaneProps {
   /** Host slash-command callback shared with the main chat composer. */
   onSlashCommand?: WebShellSlashCommandHandler;
   onRightPanelOpen?: (request: TurnOutputOpenRequest) => void;
+  onOpenMonitor?: (
+    task: DaemonSessionMonitorTaskStatus,
+    sessionId: string,
+    sessionActions: DaemonSessionActions,
+  ) => void;
   onPaneArtifactsChange?: (
     sessionId: string,
     artifacts: readonly DaemonSessionArtifact[],
@@ -147,6 +175,9 @@ export interface ChatPaneProps {
   messageTurnOutputs?: readonly TurnOutputKind[];
   /** Allow prompt admission to recover a disconnected SSE stream. */
   restartSseOnPrompt?: boolean;
+  /** Render inside a parent surface that already provides its own frame. */
+  embedded?: boolean;
+  onFirstPromptAdmitted?: (text: string) => void;
   hidden?: boolean;
   voiceUserRevision?: number;
   voiceWorkspaceRevisions?: Readonly<Record<string, number>>;
@@ -170,9 +201,12 @@ export function ChatPane({
   onError,
   onSlashCommand,
   onRightPanelOpen,
+  onOpenMonitor,
   onPaneArtifactsChange,
   messageTurnOutputs,
   restartSseOnPrompt = false,
+  embedded = false,
+  onFirstPromptAdmitted,
   hidden = false,
   voiceUserRevision = 0,
   voiceWorkspaceRevisions = EMPTY_VOICE_WORKSPACE_REVISIONS,
@@ -223,6 +257,34 @@ export function ChatPane({
       workspaceCwd,
     ],
   );
+  const monitorSessionIdRef = useRef(connection.sessionId);
+  monitorSessionIdRef.current = connection.sessionId;
+  const monitorDetailsSupported =
+    connection.capabilities?.features.includes(
+      SESSION_MONITOR_TOOL_CORRELATION_FEATURE,
+    ) === true && onOpenMonitor !== undefined;
+  const openMonitorDetails = useCallback(
+    async (tool: ACPToolCall): Promise<boolean> => {
+      const sessionId = monitorSessionIdRef.current;
+      if (!sessionId || !onOpenMonitor) return false;
+      try {
+        const snapshot = await actions.getTasks();
+        if (
+          monitorSessionIdRef.current !== sessionId ||
+          snapshot.sessionId !== sessionId
+        ) {
+          return false;
+        }
+        const task = findMonitorTaskForTool(snapshot.tasks, tool);
+        if (!task) return false;
+        onOpenMonitor(task, sessionId, actions);
+        return true;
+      } catch {
+        return false;
+      }
+    },
+    [actions, onOpenMonitor],
+  );
   useEffect(() => {
     const sessionId = connection.sessionId;
     if (!sessionId) return;
@@ -238,6 +300,7 @@ export function ChatPane({
   ]);
   const streamingStateRef = useRef(streamingState);
   streamingStateRef.current = streamingState;
+  const firstPromptAdmittedRef = useRef(false);
   const reloadTranscript = useCallback(
     async (signal: AbortSignal) => {
       if (!connection.sessionId) return;
@@ -408,6 +471,10 @@ export function ChatPane({
             ...(images && images.length ? { images } : {}),
             ...(inputAnnotations ? { inputAnnotations } : {}),
             onAdmitted: () => {
+              if (!firstPromptAdmittedRef.current && onFirstPromptAdmitted) {
+                firstPromptAdmittedRef.current = true;
+                onFirstPromptAdmitted(trimmed);
+              }
               clearFollowup();
               commitAccepted?.();
             },
@@ -427,6 +494,7 @@ export function ChatPane({
       connection.sessionId,
       connection.status,
       enqueuePrompt,
+      onFirstPromptAdmitted,
       reportError,
       restartSseOnPrompt,
     ],
@@ -460,12 +528,19 @@ export function ChatPane({
     (request: TurnOutputOpenRequest) => {
       if (!onRightPanelOpen) return;
       if (request.kind === 'subagent') {
-        onRightPanelOpen(request);
+        onRightPanelOpen({
+          ...request,
+          sourceSessionId: connection.sessionId,
+        });
         return;
       }
-      onRightPanelOpen({ ...request, workspaceActions });
+      onRightPanelOpen({
+        ...request,
+        workspaceActions,
+        sourceSessionId: connection.sessionId,
+      });
     },
-    [onRightPanelOpen, workspaceActions],
+    [connection.sessionId, onRightPanelOpen, workspaceActions],
   );
 
   // Composer wiring, all scoped to THIS pane's own DaemonSession context. The
@@ -595,92 +670,94 @@ export function ChatPane({
 
   return (
     <section
-      className={styles.pane}
+      className={`${styles.pane} ${embedded ? styles.paneEmbedded : ''}`.trim()}
       data-testid="chat-pane"
       aria-label={headerLabel}
     >
-      <header
-        className={`${styles.header} ${workspaceAccentClass ?? ''}`.trim()}
-      >
-        {workspaceLabel && (
-          <span
-            // role="img" so the whole dot+name badge is announced as its
-            // aria-label ("Workspace: <name>"); aria-label on a bare <span>
-            // (generic role) isn't reliably surfaced by screen readers.
-            role="img"
-            className={styles.workspaceTag}
-            title={paneWorkspaceCwd}
-            aria-label={t('workspace.paneLabel', { name: workspaceLabel })}
-            data-web-shell-pane-workspace
-          >
-            <span className={styles.workspaceTagDot} aria-hidden="true" />
-            <span className={styles.workspaceTagText}>{workspaceLabel}</span>
+      {!embedded && (
+        <header
+          className={`${styles.header} ${workspaceAccentClass ?? ''}`.trim()}
+        >
+          {workspaceLabel && (
+            <span
+              // role="img" so the whole dot+name badge is announced as its
+              // aria-label ("Workspace: <name>"); aria-label on a bare <span>
+              // (generic role) isn't reliably surfaced by screen readers.
+              role="img"
+              className={styles.workspaceTag}
+              title={paneWorkspaceCwd}
+              aria-label={t('workspace.paneLabel', { name: workspaceLabel })}
+              data-web-shell-pane-workspace
+            >
+              <span className={styles.workspaceTagDot} aria-hidden="true" />
+              <span className={styles.workspaceTagText}>{workspaceLabel}</span>
+            </span>
+          )}
+          <span className={styles.title} title={headerLabel}>
+            {headerLabel}
           </span>
-        )}
-        <span className={styles.title} title={headerLabel}>
-          {headerLabel}
-        </span>
-        <PaneHeaderActions
-          trailing={
-            onToggleMaximize || onClose ? (
-              <>
-                {onToggleMaximize && (
-                  <button
-                    type="button"
-                    className={styles.maximizeButton}
-                    onClick={onToggleMaximize}
-                    aria-pressed={isMaximized}
-                    aria-label={t(
-                      isMaximized
-                        ? 'splitView.restorePane'
-                        : 'splitView.maximizePane',
-                    )}
-                    title={t(
-                      isMaximized
-                        ? 'splitView.restorePane'
-                        : 'splitView.maximizePane',
-                    )}
-                  >
-                    {/* Same icon vocabulary as the dialog fullscreen toggle. */}
-                    {isMaximized ? (
-                      <Minimize2Icon size={16} aria-hidden />
-                    ) : (
-                      <Maximize2Icon size={16} aria-hidden />
-                    )}
-                  </button>
-                )}
-                {onClose && (
-                  <button
-                    type="button"
-                    className={styles.closeButton}
-                    onClick={onClose}
-                    aria-label={t('splitView.closePane')}
-                    title={t('splitView.closePane')}
-                    data-testid="pane-close"
-                  >
-                    <svg
-                      viewBox="0 0 24 24"
-                      width="16"
-                      height="16"
-                      aria-hidden="true"
+          <PaneHeaderActions
+            trailing={
+              onToggleMaximize || onClose ? (
+                <>
+                  {onToggleMaximize && (
+                    <button
+                      type="button"
+                      className={styles.maximizeButton}
+                      onClick={onToggleMaximize}
+                      aria-pressed={isMaximized}
+                      aria-label={t(
+                        isMaximized
+                          ? 'splitView.restorePane'
+                          : 'splitView.maximizePane',
+                      )}
+                      title={t(
+                        isMaximized
+                          ? 'splitView.restorePane'
+                          : 'splitView.maximizePane',
+                      )}
                     >
-                      <path
-                        d="M6 6l12 12M18 6L6 18"
-                        fill="none"
-                        stroke="currentColor"
-                        strokeWidth="2"
-                        strokeLinecap="round"
-                      />
-                    </svg>
-                  </button>
-                )}
-              </>
-            ) : null
-          }
-        >
-          {headerActions}
-        </PaneHeaderActions>
-      </header>
+                      {/* Same icon vocabulary as the dialog fullscreen toggle. */}
+                      {isMaximized ? (
+                        <Minimize2Icon size={16} aria-hidden />
+                      ) : (
+                        <Maximize2Icon size={16} aria-hidden />
+                      )}
+                    </button>
+                  )}
+                  {onClose && (
+                    <button
+                      type="button"
+                      className={styles.closeButton}
+                      onClick={onClose}
+                      aria-label={t('splitView.closePane')}
+                      title={t('splitView.closePane')}
+                      data-testid="pane-close"
+                    >
+                      <svg
+                        viewBox="0 0 24 24"
+                        width="16"
+                        height="16"
+                        aria-hidden="true"
+                      >
+                        <path
+                          d="M6 6l12 12M18 6L6 18"
+                          fill="none"
+                          stroke="currentColor"
+                          strokeWidth="2"
+                          strokeLinecap="round"
+                        />
+                      </svg>
+                    </button>
+                  )}
+                </>
+              ) : null
+            }
+          >
+            {headerActions}
+          </PaneHeaderActions>
+        </header>
+      )}
 
       {connection.error && (
         <div className={styles.connectionError} role="alert">
@@ -691,46 +768,53 @@ export function ChatPane({
       )}
 
       <div className={styles.body}>
-        <SubagentDetailsProvider onOpen={openSubagentDetails}>
-          <MessageList
-            messages={messages}
-            pendingApproval={pendingToolApproval}
-            loadingTranscript={connection.loadingTranscript}
-            catchingUp={connection.catchingUp}
-            hasOlderHistory={transcriptHistory.hasMore}
-            loadingOlderHistory={transcriptHistory.loading}
-            historyCapacityReached={transcriptHistory.capacityReached}
-            historyPaginationError={transcriptHistory.paginationError}
-            onLoadOlderHistory={transcriptHistory.loadMore}
-            transcriptBlockCount={blocks.length}
-            transcriptActivity={store}
-            onReloadTranscript={
-              transcriptReloadSupported ? reloadTranscript : undefined
-            }
-            isResponding={isResponding}
-            workspaceCwd={connection.workspaceCwd || ''}
-            hideSessionTimeline
-            turnFileChanges={
-              visibleTurnOutputKinds.has('file') ? fileChangesByTurn : undefined
-            }
-            turnArtifacts={
-              visibleTurnOutputKinds.has('artifact')
-                ? artifactsByTurn
-                : undefined
-            }
-            turnScheduledTasks={
-              visibleTurnOutputKinds.has('scheduled_task')
-                ? scheduledTasksByTurn
-                : undefined
-            }
-            onTurnOutputOpen={handleRightPanelOpen}
-            generateContent={
-              connection.capabilities?.features.includes('session_generation')
-                ? actions.generateSessionContent
-                : undefined
-            }
-          />
-        </SubagentDetailsProvider>
+        <OptionalMonitorDetailsProvider
+          enabled={monitorDetailsSupported}
+          onOpen={openMonitorDetails}
+        >
+          <SubagentDetailsProvider onOpen={openSubagentDetails}>
+            <MessageList
+              messages={messages}
+              pendingApproval={pendingToolApproval}
+              loadingTranscript={connection.loadingTranscript}
+              catchingUp={connection.catchingUp}
+              hasOlderHistory={transcriptHistory.hasMore}
+              loadingOlderHistory={transcriptHistory.loading}
+              historyCapacityReached={transcriptHistory.capacityReached}
+              historyPaginationError={transcriptHistory.paginationError}
+              onLoadOlderHistory={transcriptHistory.loadMore}
+              transcriptBlockCount={blocks.length}
+              transcriptActivity={store}
+              onReloadTranscript={
+                transcriptReloadSupported ? reloadTranscript : undefined
+              }
+              isResponding={isResponding}
+              workspaceCwd={connection.workspaceCwd || ''}
+              hideSessionTimeline
+              turnFileChanges={
+                visibleTurnOutputKinds.has('file')
+                  ? fileChangesByTurn
+                  : undefined
+              }
+              turnArtifacts={
+                visibleTurnOutputKinds.has('artifact')
+                  ? artifactsByTurn
+                  : undefined
+              }
+              turnScheduledTasks={
+                visibleTurnOutputKinds.has('scheduled_task')
+                  ? scheduledTasksByTurn
+                  : undefined
+              }
+              onTurnOutputOpen={handleRightPanelOpen}
+              generateContent={
+                connection.capabilities?.features.includes('session_generation')
+                  ? actions.generateSessionContent
+                  : undefined
+              }
+            />
+          </SubagentDetailsProvider>
+        </OptionalMonitorDetailsProvider>
       </div>
 
       <div className={styles.footer}>
diff --git a/packages/web-shell/client/components/MonitorIcon.tsx b/packages/web-shell/client/components/MonitorIcon.tsx
new file mode 100644
index 00000000000..b7271b8d5dc
--- /dev/null
+++ b/packages/web-shell/client/components/MonitorIcon.tsx
@@ -0,0 +1,21 @@
+import type { SVGProps } from 'react';
+
+export function MonitorIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      focusable="false"
+      aria-hidden="true"
+      {...props}
+    >
+      <path
+        d="M4 12h3l2-5 4 10 2-5h5"
+        stroke="currentColor"
+        strokeWidth="1.6"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/web-shell/client/components/SplitView.tsx b/packages/web-shell/client/components/SplitView.tsx
index bbea1ad6521..1db5d93b655 100644
--- a/packages/web-shell/client/components/SplitView.tsx
+++ b/packages/web-shell/client/components/SplitView.tsx
@@ -8,10 +8,12 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   DaemonSessionProvider,
   useConnection,
+  type DaemonSessionActions,
   type DaemonWorkspaceActions,
 } from '@qwen-code/webui/daemon-react-sdk';
 import type {
   DaemonSessionArtifact,
+  DaemonSessionMonitorTaskStatus,
   DaemonWorkspaceCapability,
 } from '@qwen-code/sdk/daemon';
 import type { WebShellSlashCommandHandler } from '../App';
@@ -57,6 +59,11 @@ export interface SplitViewProps {
   onError?: (error: unknown, fallback: string) => void;
   onSlashCommand?: WebShellSlashCommandHandler;
   onRightPanelOpen?: (request: TurnOutputOpenRequest) => void;
+  onOpenMonitor?: (
+    task: DaemonSessionMonitorTaskStatus,
+    sessionId: string,
+    sessionActions: DaemonSessionActions,
+  ) => void;
   onPaneArtifactsChange?: (
     sessionId: string,
     artifacts: readonly DaemonSessionArtifact[],
@@ -100,6 +107,7 @@ export function SplitView({
   onError,
   onSlashCommand,
   onRightPanelOpen,
+  onOpenMonitor,
   onPaneArtifactsChange,
   messageTurnOutputs,
   renderPaneHeaderActions,
@@ -520,6 +528,7 @@ export function SplitView({
                       onError={onError}
                       onSlashCommand={onSlashCommand}
                       onRightPanelOpen={onRightPanelOpen}
+                      onOpenMonitor={onOpenMonitor}
                       onPaneArtifactsChange={onPaneArtifactsChange}
                       messageTurnOutputs={messageTurnOutputs}
                       restartSseOnPrompt={restartSseOnPrompt}
diff --git a/packages/web-shell/client/components/artifacts/ArtifactPanel.module.css b/packages/web-shell/client/components/artifacts/ArtifactPanel.module.css
index ff9367eaee8..390a28e68a1 100644
--- a/packages/web-shell/client/components/artifacts/ArtifactPanel.module.css
+++ b/packages/web-shell/client/components/artifacts/ArtifactPanel.module.css
@@ -18,9 +18,12 @@
 .header {
   flex: 0 0 auto;
   display: flex;
+  min-height: 52px;
+  box-sizing: border-box;
   align-items: center;
   gap: 8px;
-  padding: 12px 14px 0 14px;
+  padding: 8px 14px;
+  border-bottom: 1px solid var(--border);
 }
 
 .title {
@@ -47,8 +50,8 @@
   background: color-mix(in srgb, var(--accent) 45%, transparent);
   color: var(--foreground);
   border-radius: 6px;
-  flex: 0 0 180px;
-  width: 180px;
+  flex: 0 0 150px;
+  width: 150px;
   display: inline-flex;
   align-items: center;
 }
@@ -146,6 +149,7 @@
 
 .iconButton {
   appearance: none;
+  margin-left: auto;
   border: 1px solid var(--border);
   background: transparent;
   color: var(--foreground);
@@ -166,6 +170,39 @@
   background: var(--accent);
 }
 
+.headerActions {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.headerActions .iconButton {
+  margin-left: 0;
+}
+
+.addButton {
+  border-color: transparent;
+}
+
+.panelToggleButton {
+  width: 30px;
+  height: 30px;
+  border-color: transparent;
+  border-radius: 10px;
+  background: var(--accent);
+}
+
+.panelToggleButton:hover {
+  border-color: transparent;
+}
+
+.panelToggleIcon {
+  width: 15px;
+  height: 15px;
+  stroke-width: 1.7;
+}
+
 .toolbarIcon {
   width: 16px;
   height: 16px;
@@ -179,12 +216,107 @@
   padding: 12px;
 }
 
+.bodySideTask {
+  overflow: hidden;
+  padding: 0;
+}
+
 .empty {
   color: var(--muted-foreground);
   font-size: 13px;
   padding: 16px 4px;
 }
 
+.emptyActions {
+  display: grid;
+  gap: 2px;
+}
+
+.emptyAction {
+  appearance: none;
+  display: flex;
+  min-height: 36px;
+  align-items: center;
+  gap: 10px;
+  padding: 4px 10px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--foreground);
+  font: inherit;
+  font-size: 14px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.emptyAction:hover:not(:disabled),
+.emptyAction:focus-visible {
+  background: var(--accent);
+  outline: none;
+}
+
+.emptyAction:disabled {
+  color: var(--muted-foreground);
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.emptyActionIcon {
+  display: inline-flex;
+  width: 16px;
+  height: 16px;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+}
+
+.emptyActionIcon svg {
+  width: 16px;
+  height: 16px;
+}
+
+.emptyActionTitle {
+  flex: 0 0 auto;
+}
+
+.emptyActionHint {
+  min-width: 0;
+  margin-left: auto;
+  overflow: hidden;
+  color: var(--muted-foreground);
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.emptyActionChevron {
+  flex: 0 0 auto;
+  width: 14px;
+  height: 14px;
+  color: var(--muted-foreground);
+}
+
+.sideTaskListTitle {
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sideTaskListTime {
+  flex: 0 0 auto;
+  color: var(--muted-foreground);
+  font-size: 12px;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.sideTaskNewIcon {
+  width: 14px;
+  height: 14px;
+}
+
 .list {
   display: grid;
   gap: 6px;
diff --git a/packages/web-shell/client/components/artifacts/ArtifactPanel.test.tsx b/packages/web-shell/client/components/artifacts/ArtifactPanel.test.tsx
index 13ebf13ac95..1d62dd9a2a1 100644
--- a/packages/web-shell/client/components/artifacts/ArtifactPanel.test.tsx
+++ b/packages/web-shell/client/components/artifacts/ArtifactPanel.test.tsx
@@ -2,7 +2,11 @@
 import { afterEach, describe, expect, it, vi } from 'vitest';
 import { act } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
-import type { DaemonSessionMonitorTaskStatus } from '@qwen-code/sdk/daemon';
+import type {
+  DaemonSessionMonitorTaskStatus,
+  DaemonSessionShellTaskStatus,
+} from '@qwen-code/sdk/daemon';
+import type { DaemonSessionActions } from '@qwen-code/webui/daemon-react-sdk';
 import { I18nProvider } from '../../i18n';
 
 const { mockActions } = vi.hoisted(() => ({
@@ -29,7 +33,10 @@ const { ArtifactPanel } = await import('./ArtifactPanel');
 
 const mounted: Array<{ root: Root; container: HTMLElement }> = [];
 
-function monitorPanel(task: DaemonSessionMonitorTaskStatus) {
+function monitorPanel(
+  task: DaemonSessionMonitorTaskStatus,
+  sessionActions?: DaemonSessionActions,
+) {
   return (
     <I18nProvider language="en">
       <ArtifactPanel
@@ -40,6 +47,7 @@ function monitorPanel(task: DaemonSessionMonitorTaskStatus) {
             kind: 'monitor',
             title: task.description,
             task,
+            sessionActions,
           },
         ]}
         activeTabId="monitor:monitor-1"
@@ -54,6 +62,31 @@ function monitorPanel(task: DaemonSessionMonitorTaskStatus) {
   );
 }
 
+function shellPanel(task: DaemonSessionShellTaskStatus) {
+  return (
+    <I18nProvider language="en">
+      <ArtifactPanel
+        artifacts={[]}
+        tabs={[
+          {
+            id: 'shell:shell-1',
+            kind: 'shell',
+            title: task.command,
+            task,
+          },
+        ]}
+        activeTabId="shell:shell-1"
+        reviewChanges={[]}
+        selectedReviewPath={null}
+        onSelectTab={() => {}}
+        onCloseTab={() => {}}
+        onOpenFilePreview={() => {}}
+        onClose={() => {}}
+      />
+    </I18nProvider>
+  );
+}
+
 afterEach(() => {
   for (const { root, container } of mounted) {
     act(() => root.unmount());
@@ -64,7 +97,414 @@ afterEach(() => {
   mockActions.getTasks.mockReset();
 });
 
+function openAddMenu(container: HTMLElement) {
+  const add = container.querySelector<HTMLButtonElement>(
+    'button[aria-label="Add panel"]',
+  );
+  act(() => {
+    add?.dispatchEvent(
+      new MouseEvent('pointerdown', { bubbles: true, button: 0 }),
+    );
+  });
+  return add;
+}
+
+describe('ArtifactPanel add menu', () => {
+  it('keeps the disabled review action on the empty page and hides the add button', () => {
+    const onClose = vi.fn();
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    mounted.push({ root, container });
+
+    act(() => {
+      root.render(
+        <I18nProvider language="en">
+          <ArtifactPanel
+            artifacts={[]}
+            tabs={[]}
+            activeTabId={null}
+            reviewChanges={[]}
+            selectedReviewPath={null}
+            onSelectTab={() => {}}
+            onCloseTab={() => {}}
+            onOpenFilePreview={() => {}}
+            onClose={onClose}
+          />
+        </I18nProvider>,
+      );
+    });
+
+    const review = Array.from(
+      container.querySelectorAll<HTMLButtonElement>(
+        '[data-testid="right-panel-empty-actions"] button',
+      ),
+    ).find((button) => button.textContent?.includes('Review'));
+    expect(review?.disabled).toBe(true);
+    expect(review?.textContent).toContain('View recent file changes');
+    expect(container.textContent).not.toContain('⌘');
+    expect(
+      container.querySelector('button[aria-label="Add panel"]'),
+    ).toBeNull();
+
+    const panelToggle = container.querySelector<HTMLButtonElement>(
+      'button[aria-label="Toggle right panel"]',
+    );
+    expect(panelToggle).not.toBeNull();
+    act(() => panelToggle?.click());
+    expect(onClose).toHaveBeenCalledOnce();
+  });
+
+  it('filters empty-page actions through right-panel items', () => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    mounted.push({ root, container });
+
+    act(() => {
+      root.render(
+        <I18nProvider language="en">
+          <ArtifactPanel
+            artifacts={[]}
+            tabs={[]}
+            activeTabId={null}
+            reviewChanges={[]}
+            selectedReviewPath={null}
+            items={['sideTask']}
+            sideTaskAvailable
+            onCreateSideTask={vi.fn()}
+            onSelectTab={() => {}}
+            onCloseTab={() => {}}
+            onOpenFilePreview={() => {}}
+            onClose={() => {}}
+          />
+        </I18nProvider>,
+      );
+    });
+
+    const emptyText = container.querySelector(
+      '[data-testid="right-panel-empty-actions"]',
+    )?.textContent;
+    expect(emptyText).toContain('Side task');
+    expect(emptyText).not.toContain('Review');
+    expect(
+      container.querySelector('button[aria-label="Add panel"]'),
+    ).toBeNull();
+  });
+
+  it('supports opening an existing side task or creating one', () => {
+    const onCreateSideTask = vi.fn();
+    const onOpenSideTask = vi.fn();
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    mounted.push({ root, container });
+
+    act(() => {
+      root.render(
+        <I18nProvider language="en">
+          <ArtifactPanel
+            artifacts={[]}
+            tabs={[]}
+            activeTabId={null}
+            reviewChanges={[]}
+            selectedReviewPath={null}
+            sideTaskAvailable
+            sideTasks={[
+              {
+                sessionId: 'side-1',
+                title: 'Investigate flaky tests',
+                workspaceCwd: '/work/project',
+              },
+            ]}
+            onCreateSideTask={onCreateSideTask}
+            onOpenSideTask={onOpenSideTask}
+            onSelectTab={() => {}}
+            onCloseTab={() => {}}
+            onOpenFilePreview={() => {}}
+            onClose={() => {}}
+          />
+        </I18nProvider>,
+      );
+    });
+
+    const sideTask = Array.from(
+      container.querySelectorAll<HTMLButtonElement>(
+        '[data-testid="right-panel-empty-actions"] button',
+      ),
+    ).find((button) => button.textContent?.includes('Side task'));
+    act(() => {
+      sideTask?.dispatchEvent(
+        new MouseEvent('mouseover', { bubbles: true, cancelable: true }),
+      );
+    });
+
+    const existing = Array.from(
+      document.body.querySelectorAll<HTMLElement>('[role="menuitem"]'),
+    ).find((button) => button.textContent === 'Investigate flaky tests');
+    const create = Array.from(
+      document.body.querySelectorAll<HTMLElement>('[role="menuitem"]'),
+    ).find((button) => button.textContent === 'New');
+    expect(existing).not.toBeUndefined();
+    expect(create).not.toBeUndefined();
+
+    act(() => existing?.click());
+    expect(onOpenSideTask).toHaveBeenCalledWith({
+      sessionId: 'side-1',
+      title: 'Investigate flaky tests',
+      workspaceCwd: '/work/project',
+    });
+
+    act(() => {
+      sideTask?.dispatchEvent(
+        new MouseEvent('mouseover', { bubbles: true, cancelable: true }),
+      );
+    });
+    const reopenedCreate = Array.from(
+      document.body.querySelectorAll<HTMLElement>('[role="menuitem"]'),
+    ).find((button) => button.textContent === 'New');
+    act(() => reopenedCreate?.click());
+    expect(onCreateSideTask).toHaveBeenCalledOnce();
+  });
+
+  it('creates a side task directly from the empty page when there is no history', () => {
+    const onCreateSideTask = vi.fn();
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    mounted.push({ root, container });
+
+    act(() => {
+      root.render(
+        <I18nProvider language="en">
+          <ArtifactPanel
+            artifacts={[]}
+            tabs={[]}
+            activeTabId={null}
+            reviewChanges={[]}
+            selectedReviewPath={null}
+            sideTaskAvailable
+            onCreateSideTask={onCreateSideTask}
+            onSelectTab={() => {}}
+            onCloseTab={() => {}}
+            onOpenFilePreview={() => {}}
+            onClose={() => {}}
+          />
+        </I18nProvider>,
+      );
+    });
+
+    const sideTask = Array.from(
+      container.querySelectorAll<HTMLButtonElement>(
+        '[data-testid="right-panel-empty-actions"] button',
+      ),
+    ).find((button) => button.textContent?.includes('Side task'));
+    act(() => sideTask?.click());
+    expect(onCreateSideTask).toHaveBeenCalledOnce();
+  });
+
+  it('does not create a side task before its history finishes loading', () => {
+    const onCreateSideTask = vi.fn();
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    mounted.push({ root, container });
+
+    act(() => {
+      root.render(
+        <I18nProvider language="en">
+          <ArtifactPanel
+            artifacts={[]}
+            tabs={[]}
+            activeTabId={null}
+            reviewChanges={[]}
+            selectedReviewPath={null}
+            sideTaskAvailable
+            sideTasksLoading
+            onCreateSideTask={onCreateSideTask}
+            onSelectTab={() => {}}
+            onCloseTab={() => {}}
+            onOpenFilePreview={() => {}}
+            onClose={() => {}}
+          />
+        </I18nProvider>,
+      );
+    });
+
+    const sideTask = Array.from(
+      container.querySelectorAll<HTMLButtonElement>(
+        '[data-testid="right-panel-empty-actions"] button',
+      ),
+    ).find((button) => button.textContent?.includes('Side task'));
+    expect(sideTask?.disabled).toBe(true);
+    act(() => sideTask?.click());
+    expect(onCreateSideTask).not.toHaveBeenCalled();
+  });
+
+  it('opens the latest review from the empty page', () => {
+    const onOpenLatestReview = vi.fn();
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    mounted.push({ root, container });
+
+    act(() => {
+      root.render(
+        <I18nProvider language="en">
+          <ArtifactPanel
+            artifacts={[]}
+            tabs={[]}
+            activeTabId={null}
+            reviewChanges={[]}
+            selectedReviewPath={null}
+            latestReviewAvailable
+            onOpenLatestReview={onOpenLatestReview}
+            onSelectTab={() => {}}
+            onCloseTab={() => {}}
+            onOpenFilePreview={() => {}}
+            onClose={() => {}}
+          />
+        </I18nProvider>,
+      );
+    });
+
+    const review = Array.from(
+      container.querySelectorAll<HTMLButtonElement>(
+        '[data-testid="right-panel-empty-actions"] button',
+      ),
+    ).find((button) => button.textContent?.includes('Review'));
+    expect(review?.disabled).toBe(false);
+    act(() => review?.click());
+    expect(onOpenLatestReview).toHaveBeenCalledOnce();
+  });
+
+  it('hides review from the add menu when a review tab is already open', () => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    mounted.push({ root, container });
+
+    act(() => {
+      root.render(
+        <I18nProvider language="en">
+          <ArtifactPanel
+            artifacts={[]}
+            tabs={[{ id: 'review', kind: 'review', title: 'Review' }]}
+            activeTabId="review"
+            reviewChanges={[]}
+            selectedReviewPath={null}
+            latestReviewAvailable
+            sideTaskAvailable
+            onOpenLatestReview={vi.fn()}
+            onCreateSideTask={vi.fn()}
+            onSelectTab={() => {}}
+            onCloseTab={() => {}}
+            onOpenFilePreview={() => {}}
+            onClose={() => {}}
+          />
+        </I18nProvider>,
+      );
+    });
+
+    openAddMenu(container);
+    const menuText = document.body.querySelector('[role="menu"]')?.textContent;
+    expect(menuText).not.toContain('Review');
+    expect(menuText).toContain('New side task');
+  });
+
+  it('shows review and side-task actions in the add menu for a non-empty panel', () => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    mounted.push({ root, container });
+
+    act(() => {
+      root.render(
+        <I18nProvider language="en">
+          <ArtifactPanel
+            artifacts={[]}
+            tabs={[
+              {
+                id: 'artifact',
+                kind: 'artifact',
+                title: 'Report',
+                artifactId: 'report',
+              },
+            ]}
+            activeTabId="artifact"
+            reviewChanges={[]}
+            selectedReviewPath={null}
+            latestReviewAvailable
+            sideTaskAvailable
+            sideTasks={[
+              {
+                sessionId: 'side-1',
+                title: 'Existing side task',
+                workspaceCwd: '/work/project',
+              },
+            ]}
+            onOpenLatestReview={vi.fn()}
+            onCreateSideTask={vi.fn()}
+            onSelectTab={() => {}}
+            onCloseTab={() => {}}
+            onOpenFilePreview={() => {}}
+            onClose={() => {}}
+          />
+        </I18nProvider>,
+      );
+    });
+
+    openAddMenu(container);
+    const menuText = document.body.querySelector('[role="menu"]')?.textContent;
+    expect(menuText).toContain('Review');
+    expect(menuText).toContain('New side task');
+    expect(menuText).not.toContain('Existing side task');
+  });
+});
+
 describe('ArtifactPanel monitor tab', () => {
+  it('uses the source pane actions for monitor controls', async () => {
+    const task: DaemonSessionMonitorTaskStatus = {
+      kind: 'monitor',
+      id: 'monitor-1',
+      label: 'monitor-label',
+      description: 'watch pane logs',
+      status: 'running',
+      startTime: 1,
+      runtimeMs: 10,
+      command: 'tail -f pane.log',
+      eventCount: 1,
+      droppedLines: 0,
+    };
+    const paneActions = {
+      cancelTask: vi.fn().mockResolvedValue({ cancelled: true }),
+      getTasks: vi.fn().mockResolvedValue({
+        v: 1,
+        sessionId: 'pane-session',
+        now: 11,
+        tasks: [{ ...task, status: 'cancelled' }],
+      }),
+    } as unknown as DaemonSessionActions;
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    mounted.push({ root, container });
+
+    act(() => {
+      root.render(monitorPanel(task, paneActions));
+    });
+    const stopButton = Array.from(container.querySelectorAll('button')).find(
+      (button) => button.textContent === 'Stop',
+    );
+    await act(async () => {
+      stopButton?.click();
+      await Promise.resolve();
+    });
+
+    expect(paneActions.cancelTask).toHaveBeenCalledWith('monitor-1', 'monitor');
+    expect(mockActions.cancelTask).not.toHaveBeenCalled();
+  });
+
   it('shows the monitor snapshot in a dedicated right-panel tab', () => {
     const task: DaemonSessionMonitorTaskStatus = {
       kind: 'monitor',
@@ -89,6 +529,9 @@ describe('ArtifactPanel monitor tab', () => {
       root.render(monitorPanel(task));
     });
 
+    expect(
+      container.querySelector('svg.lucide-square-activity'),
+    ).not.toBeNull();
     expect(container.textContent).toContain('watch server log');
     expect(
       container.querySelector('[data-status="running"]')?.textContent,
@@ -373,3 +816,42 @@ describe('ArtifactPanel monitor tab', () => {
     expect(stopButtonAfter?.disabled).toBe(false);
   });
 });
+
+describe('ArtifactPanel shell tab', () => {
+  it('shows shell task details in a dedicated right-panel tab', () => {
+    const task: DaemonSessionShellTaskStatus = {
+      kind: 'shell',
+      id: 'shell-1',
+      label: 'Development server',
+      description: 'Run the development server',
+      status: 'failed',
+      startTime: 1_000,
+      runtimeMs: 5_000,
+      command: 'npm run dev',
+      cwd: '/work/project',
+      pid: 42,
+      exitCode: 1,
+      error: 'Command failed',
+    };
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    mounted.push({ root, container });
+
+    act(() => {
+      root.render(shellPanel(task));
+    });
+
+    expect(
+      container.querySelector('svg.lucide-square-terminal'),
+    ).not.toBeNull();
+    expect(container.querySelector('[data-status="failed"]')?.textContent).toBe(
+      'Failed',
+    );
+    expect(container.querySelector('pre')?.textContent).toBe('npm run dev');
+    expect(container.textContent).toContain('npm run dev');
+    expect(container.textContent).toContain('/work/project');
+    expect(container.textContent).toContain('Exit code');
+    expect(container.textContent).toContain('Command failed');
+  });
+});
diff --git a/packages/web-shell/client/components/artifacts/ArtifactPanel.tsx b/packages/web-shell/client/components/artifacts/ArtifactPanel.tsx
index 9fb649e6cf8..d264518b5c6 100644
--- a/packages/web-shell/client/components/artifacts/ArtifactPanel.tsx
+++ b/packages/web-shell/client/components/artifacts/ArtifactPanel.tsx
@@ -1,16 +1,28 @@
 import type {
   DaemonSessionArtifact,
   DaemonSessionMonitorTaskStatus,
+  DaemonSessionShellTaskStatus,
 } from '@qwen-code/sdk/daemon';
 import type { ACPToolCall } from '../../adapters/types';
+import type { WebShellRightPanelItem } from '../../customization';
 import {
   useWorkspaceActions,
+  type DaemonSessionActions,
   type DaemonWorkspaceActions,
   type DaemonScheduledTask,
 } from '@qwen-code/webui/daemon-react-sdk';
 import { EditorState } from '@codemirror/state';
 import { basicSetup, EditorView } from 'codemirror';
 import { DownloadIcon } from 'lucide-react';
+import {
+  ChevronRightIcon,
+  CirclePlusIcon,
+  MessageCirclePlusIcon,
+  PanelRightIcon,
+  PlusIcon,
+  SquareActivityIcon,
+  SquareTerminalIcon,
+} from 'lucide-react';
 import {
   useCallback,
   useEffect,
@@ -22,8 +34,16 @@ import {
   type PointerEvent as ReactPointerEvent,
 } from 'react';
 import { useI18n } from '../../i18n';
+import { formatRelativeTime } from '../../utils/formatRelativeTime';
 import { DialogShell } from '../dialogs/DialogShell';
 import { isSafeHref, Markdown } from '../messages/Markdown';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../ui/dropdown-menu';
 import {
   buildCron,
   describeCron,
@@ -47,12 +67,17 @@ import {
   isRenderedFilePath,
   type TurnOutputFileChange,
   type TurnOutputFileDiff,
+  type TurnOutputOpenRequest,
   type TurnOutputScheduledTask,
 } from './TurnOutputs';
 import { LineStats, sumLineStats } from './LineStats';
 import styles from './ArtifactPanel.module.css';
 import { SubagentDetail } from './SubagentDetail';
-import { MonitorTaskDetail } from '../messages/TasksStatusMessage';
+import { SideTaskPanel } from './SideTaskPanel';
+import {
+  MonitorTaskDetail,
+  ShellTaskDetail,
+} from '../messages/TasksStatusMessage';
 
 const MAX_REVIEW_SIDE_BY_SIDE_WIDTH = 700;
 const FREQUENCIES: Frequency[] = [
@@ -64,6 +89,14 @@ const FREQUENCIES: Frequency[] = [
   'custom',
 ];
 const MINUTE_INTERVALS = [1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30];
+const ignoreSideTaskCreated = (_tabId: string, _sessionId: string) => undefined;
+const ignoreSideTaskTitleChange = (
+  _tabId: string,
+  _title: string,
+  _fromFirstPrompt?: boolean,
+) => undefined;
+const rejectMissingSideTaskCreate = () =>
+  Promise.reject(new Error('Side-task session creation is unavailable'));
 
 export type ArtifactPanelTab =
   | {
@@ -72,6 +105,8 @@ export type ArtifactPanelTab =
       title: string;
       workspaceActions?: DaemonWorkspaceActions;
       workspaceCwd?: string;
+      changes?: readonly TurnOutputFileChange[];
+      selectedPath?: string;
     }
   | {
       id: string;
@@ -110,8 +145,40 @@ export type ArtifactPanelTab =
       kind: 'monitor';
       title: string;
       task: DaemonSessionMonitorTaskStatus;
+      sessionId?: string;
+      sessionActions?: DaemonSessionActions;
+    }
+  | {
+      id: string;
+      kind: 'shell';
+      title: string;
+      task: DaemonSessionShellTaskStatus;
+      sessionId?: string;
+      sessionActions?: DaemonSessionActions;
+    }
+  | {
+      id: string;
+      kind: 'side_task';
+      title: string;
+      sessionId?: string;
+      parentSessionId: string;
+      workspaceCwd?: string;
+      nameFromFirstPrompt?: boolean;
+      initialPrompt?: string;
     };
 
+export interface SideTaskListItem {
+  sessionId: string;
+  title: string;
+  workspaceCwd?: string;
+  updatedAt?: string;
+}
+
+const DEFAULT_RIGHT_PANEL_ITEMS: readonly WebShellRightPanelItem[] = [
+  'review',
+  'sideTask',
+];
+
 interface ArtifactPanelProps {
   artifacts: readonly DaemonSessionArtifact[];
   tabs: readonly ArtifactPanelTab[];
@@ -129,6 +196,32 @@ interface ArtifactPanelProps {
     workspaceActions: DaemonWorkspaceActions,
     workspaceCwd?: string,
   ) => void;
+  latestReviewAvailable?: boolean;
+  onOpenLatestReview?: () => void;
+  items?: readonly WebShellRightPanelItem[];
+  sideTaskAvailable?: boolean;
+  sideTasks?: readonly SideTaskListItem[];
+  sideTasksLoading?: boolean;
+  onCreateSideTask?: () => void;
+  onOpenSideTask?: (sideTask: SideTaskListItem) => void;
+  onCreateSideTaskSession?: (
+    tabId: string,
+    parentSessionId: string,
+    title: string,
+  ) => Promise<{ sessionId: string; displayName?: string }>;
+  onSideTaskCreated?: (tabId: string, sessionId: string) => void;
+  onSideTaskTitleChange?: (
+    tabId: string,
+    title: string,
+    fromFirstPrompt?: boolean,
+  ) => void;
+  onNestedRightPanelOpen?: (request: TurnOutputOpenRequest) => void;
+  onNestedArtifactsChange?: (
+    sessionId: string,
+    artifacts: readonly DaemonSessionArtifact[],
+    workspaceActions: DaemonWorkspaceActions,
+  ) => void;
+  onSideTaskError?: (error: unknown, fallback: string) => void;
   onClose: () => void;
   variant?: 'docked' | 'drawer';
 }
@@ -146,10 +239,61 @@ export function ArtifactPanel({
   onSelectTab,
   onCloseTab,
   onOpenFilePreview,
+  latestReviewAvailable = false,
+  onOpenLatestReview,
+  items = DEFAULT_RIGHT_PANEL_ITEMS,
+  sideTaskAvailable = false,
+  sideTasks = [],
+  sideTasksLoading = false,
+  onCreateSideTask,
+  onOpenSideTask,
+  onCreateSideTaskSession,
+  onSideTaskCreated,
+  onSideTaskTitleChange,
+  onNestedRightPanelOpen,
+  onNestedArtifactsChange,
+  onSideTaskError,
   onClose,
   variant = 'docked',
 }: ArtifactPanelProps) {
+  const { t } = useI18n();
+  const [sideTaskMenuOpen, setSideTaskMenuOpen] = useState(false);
+  const sideTaskMenuCloseTimerRef = useRef<ReturnType<
+    typeof setTimeout
+  > | null>(null);
+  const openSideTaskMenu = useCallback(() => {
+    if (sideTaskMenuCloseTimerRef.current) {
+      clearTimeout(sideTaskMenuCloseTimerRef.current);
+      sideTaskMenuCloseTimerRef.current = null;
+    }
+    setSideTaskMenuOpen(true);
+  }, []);
+  const scheduleSideTaskMenuClose = useCallback(() => {
+    if (sideTaskMenuCloseTimerRef.current) {
+      clearTimeout(sideTaskMenuCloseTimerRef.current);
+    }
+    sideTaskMenuCloseTimerRef.current = setTimeout(() => {
+      setSideTaskMenuOpen(false);
+      sideTaskMenuCloseTimerRef.current = null;
+    }, 120);
+  }, []);
+  useEffect(
+    () => () => {
+      if (sideTaskMenuCloseTimerRef.current) {
+        clearTimeout(sideTaskMenuCloseTimerRef.current);
+      }
+    },
+    [],
+  );
   const activeTab = tabs.find((tab) => tab.id === activeTabId) ?? tabs[0];
+  const showReviewMenuItem =
+    items.includes('review') && !tabs.some((tab) => tab.kind === 'review');
+  const showSideTaskMenuItems =
+    items.includes('sideTask') &&
+    sideTaskAvailable &&
+    Boolean(onCreateSideTask);
+  const showAddMenu =
+    Boolean(activeTab) && (showReviewMenuItem || showSideTaskMenuItems);
   const defaultWorkspaceActions = useWorkspaceActions();
   const activeWorkspaceActions =
     activeTab && 'workspaceActions' in activeTab
@@ -167,69 +311,257 @@ export function ArtifactPanel({
       aria-label="Right panel"
     >
       <div className={styles.header}>
-        <div className={styles.tabs} role="tablist" aria-label="Right panel">
-          {tabs.map((tab) => (
-            <div
-              key={tab.id}
-              className={[
-                styles.tabItem,
-                tab.id === activeTab?.id ? styles.tabActive : '',
-              ]
-                .filter(Boolean)
-                .join(' ')}
-            >
-              <button
-                type="button"
-                role="tab"
-                aria-selected={tab.id === activeTab?.id}
-                className={styles.tab}
-                onClick={() => onSelectTab(tab.id)}
-                title={tab.title}
+        {tabs.length > 0 && (
+          <div className={styles.tabs} role="tablist" aria-label="Right panel">
+            {tabs.map((tab) => (
+              <div
+                key={tab.id}
+                className={[
+                  styles.tabItem,
+                  tab.id === activeTab?.id ? styles.tabActive : '',
+                ]
+                  .filter(Boolean)
+                  .join(' ')}
               >
-                <span className={styles.tabIcon} aria-hidden="true">
-                  {tab.kind === 'review' ? (
+                <button
+                  type="button"
+                  role="tab"
+                  aria-selected={tab.id === activeTab?.id}
+                  className={styles.tab}
+                  onClick={() => onSelectTab(tab.id)}
+                  title={tab.title}
+                >
+                  <span className={styles.tabIcon} aria-hidden="true">
+                    {tab.kind === 'review' ? (
+                      <TabReviewIcon />
+                    ) : tab.kind === 'artifact' || tab.kind === 'file' ? (
+                      <TabArtifactIcon />
+                    ) : tab.kind === 'subagent' ? (
+                      <TabSubagentIcon />
+                    ) : tab.kind === 'monitor' ? (
+                      <SquareActivityIcon
+                        className={styles.tabIconSvg}
+                        strokeWidth={1.6}
+                      />
+                    ) : tab.kind === 'shell' ? (
+                      <SquareTerminalIcon
+                        className={styles.tabIconSvg}
+                        strokeWidth={1.6}
+                      />
+                    ) : tab.kind === 'side_task' ? (
+                      <MessageCirclePlusIcon
+                        className={styles.tabIconSvg}
+                        strokeWidth={1.6}
+                      />
+                    ) : (
+                      <TabScheduledTaskIcon />
+                    )}
+                  </span>
+                  <span className={styles.tabTitle}>{tab.title}</span>
+                </button>
+                <button
+                  type="button"
+                  className={styles.tabCloseButton}
+                  onClick={() => onCloseTab(tab.id)}
+                  aria-label={`Close ${tab.title}`}
+                  title="Close"
+                >
+                  <CloseIcon />
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+        <div className={styles.headerActions}>
+          {showAddMenu && (
+            <DropdownMenu modal={false}>
+              <DropdownMenuTrigger asChild>
+                <button
+                  type="button"
+                  className={`${styles.iconButton} ${styles.addButton}`}
+                  aria-label={t('rightPanel.add')}
+                  title={t('rightPanel.add')}
+                >
+                  <PlusIcon className={styles.toolbarIcon} />
+                </button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-64">
+                {showReviewMenuItem && (
+                  <DropdownMenuItem
+                    disabled={!latestReviewAvailable || !onOpenLatestReview}
+                    onSelect={onOpenLatestReview}
+                  >
                     <TabReviewIcon />
-                  ) : tab.kind === 'artifact' || tab.kind === 'file' ? (
-                    <TabArtifactIcon />
-                  ) : tab.kind === 'subagent' ? (
-                    <TabSubagentIcon />
-                  ) : tab.kind === 'monitor' ? (
-                    <TabMonitorIcon />
-                  ) : (
-                    <TabScheduledTaskIcon />
-                  )}
-                </span>
-                <span className={styles.tabTitle}>{tab.title}</span>
-              </button>
+                    <span className={styles.sideTaskListTitle}>
+                      {t('turnOutputs.review')}
+                    </span>
+                  </DropdownMenuItem>
+                )}
+                {showReviewMenuItem && showSideTaskMenuItems && (
+                  <DropdownMenuSeparator />
+                )}
+                {showSideTaskMenuItems && (
+                  <DropdownMenuItem
+                    disabled={sideTasksLoading}
+                    onSelect={onCreateSideTask}
+                  >
+                    <MessageCirclePlusIcon
+                      className={styles.sideTaskNewIcon}
+                      strokeWidth={1.6}
+                      aria-hidden="true"
+                    />
+                    <span className={styles.sideTaskListTitle}>
+                      {t('sideTask.create')}
+                    </span>
+                  </DropdownMenuItem>
+                )}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
+          <button
+            type="button"
+            className={`${styles.iconButton} ${styles.panelToggleButton}`}
+            onClick={onClose}
+            aria-label={t('chatHeader.toggleRightPanel')}
+            aria-pressed="true"
+            title={t('chatHeader.toggleRightPanel')}
+          >
+            <PanelRightIcon className={styles.panelToggleIcon} />
+          </button>
+        </div>
+      </div>
+      <div
+        className={`${styles.body} ${
+          activeTab?.kind === 'side_task' ? styles.bodySideTask : ''
+        }`.trim()}
+      >
+        {!activeTab ? (
+          <div
+            className={styles.emptyActions}
+            data-testid="right-panel-empty-actions"
+          >
+            {items.includes('review') && (
               <button
                 type="button"
-                className={styles.tabCloseButton}
-                onClick={() => onCloseTab(tab.id)}
-                aria-label={`Close ${tab.title}`}
-                title="Close"
+                className={styles.emptyAction}
+                disabled={!latestReviewAvailable || !onOpenLatestReview}
+                onClick={onOpenLatestReview}
               >
-                <CloseIcon />
+                <span className={styles.emptyActionIcon} aria-hidden="true">
+                  <TabReviewIcon />
+                </span>
+                <span className={styles.emptyActionTitle}>
+                  {t('turnOutputs.review')}
+                </span>
+                <span className={styles.emptyActionHint}>
+                  {t('turnOutputs.reviewLatest')}
+                </span>
+                <ChevronRightIcon
+                  className={styles.emptyActionChevron}
+                  strokeWidth={1.6}
+                  aria-hidden="true"
+                />
               </button>
-            </div>
-          ))}
-        </div>
-        <button
-          type="button"
-          className={styles.iconButton}
-          onClick={onClose}
-          aria-label="Close artifacts panel"
-          title="Close"
-        >
-          ×
-        </button>
-      </div>
-      <div className={styles.body}>
-        {!activeTab ? (
-          <div className={styles.empty}>No panel selected.</div>
+            )}
+            {items.includes('sideTask') &&
+              sideTaskAvailable &&
+              onCreateSideTask &&
+              (sideTasks.length === 0 ? (
+                <button
+                  type="button"
+                  className={styles.emptyAction}
+                  disabled={sideTasksLoading}
+                  aria-busy={sideTasksLoading}
+                  onClick={onCreateSideTask}
+                >
+                  <span className={styles.emptyActionIcon} aria-hidden="true">
+                    <MessageCirclePlusIcon strokeWidth={1.6} />
+                  </span>
+                  <span className={styles.emptyActionTitle}>
+                    {t('sideTask.title')}
+                  </span>
+                  <span className={styles.emptyActionHint}>
+                    {t('sideTask.description')}
+                  </span>
+                  <ChevronRightIcon
+                    className={styles.emptyActionChevron}
+                    strokeWidth={1.6}
+                    aria-hidden="true"
+                  />
+                </button>
+              ) : (
+                <DropdownMenu
+                  open={sideTaskMenuOpen}
+                  onOpenChange={setSideTaskMenuOpen}
+                  modal={false}
+                >
+                  <DropdownMenuTrigger asChild>
+                    <button
+                      type="button"
+                      className={styles.emptyAction}
+                      aria-expanded={sideTaskMenuOpen}
+                      onMouseEnter={openSideTaskMenu}
+                      onMouseLeave={scheduleSideTaskMenuClose}
+                    >
+                      <span
+                        className={styles.emptyActionIcon}
+                        aria-hidden="true"
+                      >
+                        <MessageCirclePlusIcon strokeWidth={1.6} />
+                      </span>
+                      <span className={styles.emptyActionTitle}>
+                        {t('sideTask.title')}
+                      </span>
+                      <span className={styles.emptyActionHint}>
+                        {t('sideTask.description')}
+                      </span>
+                      <ChevronRightIcon
+                        className={styles.emptyActionChevron}
+                        strokeWidth={1.6}
+                        aria-hidden="true"
+                      />
+                    </button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent
+                    align="end"
+                    className="w-80"
+                    onMouseEnter={openSideTaskMenu}
+                    onMouseLeave={scheduleSideTaskMenuClose}
+                  >
+                    {sideTasks.map((sideTask) => (
+                      <DropdownMenuItem
+                        key={sideTask.sessionId}
+                        onSelect={() => onOpenSideTask?.(sideTask)}
+                      >
+                        <span className={styles.sideTaskListTitle}>
+                          {sideTask.title}
+                        </span>
+                        {sideTask.updatedAt && (
+                          <span className={styles.sideTaskListTime}>
+                            {formatRelativeTime(sideTask.updatedAt, t)}
+                          </span>
+                        )}
+                      </DropdownMenuItem>
+                    ))}
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem onSelect={onCreateSideTask}>
+                      <CirclePlusIcon
+                        className={styles.sideTaskNewIcon}
+                        strokeWidth={1.6}
+                        aria-hidden="true"
+                      />
+                      <span className={styles.sideTaskListTitle}>
+                        {t('sideTask.new')}
+                      </span>
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              ))}
+          </div>
         ) : activeTab.kind === 'review' ? (
           <ReviewChanges
-            changes={reviewChanges}
-            selectedPath={selectedReviewPath}
+            changes={activeTab.changes ?? reviewChanges}
+            selectedPath={activeTab.selectedPath ?? selectedReviewPath}
             workspaceCwd={activeTab.workspaceCwd ?? workspaceCwd}
             onOpenFilePreview={(change) =>
               onOpenFilePreview(
@@ -262,9 +594,40 @@ export function ArtifactPanel({
             rootToolCallId={activeTab.rootToolCallId}
             initialRootTool={activeTab.rootTool}
             workspaceCwd={activeTab.workspaceCwd ?? workspaceCwd}
+            onRightPanelOpen={onNestedRightPanelOpen}
+            onArtifactsChange={onNestedArtifactsChange}
           />
         ) : activeTab.kind === 'monitor' ? (
-          <MonitorTaskDetail key={activeTab.id} task={activeTab.task} />
+          <MonitorTaskDetail
+            key={activeTab.id}
+            task={activeTab.task}
+            actions={activeTab.sessionActions}
+          />
+        ) : activeTab.kind === 'shell' ? (
+          <ShellTaskDetail
+            key={activeTab.id}
+            task={activeTab.task}
+            actions={activeTab.sessionActions}
+          />
+        ) : activeTab.kind === 'side_task' ? (
+          <SideTaskPanel
+            key={activeTab.id}
+            tabId={activeTab.id}
+            sessionId={activeTab.sessionId}
+            parentSessionId={activeTab.parentSessionId}
+            workspaceCwd={activeTab.workspaceCwd ?? workspaceCwd}
+            title={activeTab.title}
+            shouldNameFromFirstPrompt={activeTab.nameFromFirstPrompt}
+            initialPrompt={activeTab.initialPrompt}
+            createSession={
+              onCreateSideTaskSession ?? rejectMissingSideTaskCreate
+            }
+            onCreated={onSideTaskCreated ?? ignoreSideTaskCreated}
+            onTitleChange={onSideTaskTitleChange ?? ignoreSideTaskTitleChange}
+            onRightPanelOpen={onNestedRightPanelOpen}
+            onArtifactsChange={onNestedArtifactsChange}
+            onError={onSideTaskError}
+          />
         ) : (
           <ScheduledTaskDetail
             key={activeTab.id}
@@ -277,26 +640,6 @@ export function ArtifactPanel({
   );
 }
 
-function TabMonitorIcon() {
-  return (
-    <svg
-      className={styles.tabIconSvg}
-      viewBox="0 0 24 24"
-      fill="none"
-      focusable="false"
-      aria-hidden="true"
-    >
-      <path
-        d="M4 12h3l2-5 4 10 2-5h5"
-        stroke="currentColor"
-        strokeWidth="1.6"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
 function TabSubagentIcon() {
   return (
     <svg
diff --git a/packages/web-shell/client/components/artifacts/SideTaskPanel.test.tsx b/packages/web-shell/client/components/artifacts/SideTaskPanel.test.tsx
new file mode 100644
index 00000000000..f20e028f860
--- /dev/null
+++ b/packages/web-shell/client/components/artifacts/SideTaskPanel.test.tsx
@@ -0,0 +1,547 @@
+// @vitest-environment jsdom
+
+import { act, type ComponentProps, type ReactNode } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, expect, it, vi } from 'vitest';
+import { I18nProvider } from '../../i18n';
+
+const {
+  connection,
+  providerProps,
+  latestChatPaneProps,
+  renameSession,
+  sendPrompt,
+  transcript,
+} = vi.hoisted(() => ({
+  connection: {
+    status: 'idle',
+    sessionId: undefined as string | undefined,
+    displayName: undefined as string | undefined,
+    loadingTranscript: false,
+    catchingUp: false,
+  },
+  providerProps: {
+    current: undefined as Record<string, unknown> | undefined,
+  },
+  latestChatPaneProps: {
+    current: undefined as Record<string, unknown> | undefined,
+  },
+  renameSession: vi.fn().mockResolvedValue(undefined),
+  sendPrompt: vi.fn(
+    async (
+      _prompt: string,
+      options?: {
+        onAdmitted?: () => void;
+      },
+    ) => {
+      options?.onAdmitted?.();
+    },
+  ),
+  transcript: {
+    blocks: [] as Array<{ kind: string }>,
+    hasMore: false,
+    loading: false,
+    capacityReached: false,
+    paginationError: undefined as string | undefined,
+  },
+}));
+
+vi.mock('@qwen-code/webui/daemon-react-sdk', () => ({
+  DaemonSessionProvider: (props: {
+    children: ReactNode;
+    [key: string]: unknown;
+  }) => {
+    providerProps.current = props;
+    return props.children;
+  },
+  useConnection: () => connection,
+  useActions: () => ({ renameSession, sendPrompt }),
+  useTranscriptBlocks: () => transcript.blocks,
+  useTranscriptHistory: () => transcript,
+}));
+
+vi.mock('../ChatPane', () => ({
+  ChatPane: (props: Record<string, unknown>) => {
+    latestChatPaneProps.current = props;
+    return <div data-testid="side-task-chat" />;
+  },
+}));
+
+const { SideTaskPanel } = await import('./SideTaskPanel');
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+let container: HTMLDivElement | null = null;
+let root: Root | null = null;
+
+function renderSideTask(
+  props: Partial<ComponentProps<typeof SideTaskPanel>> = {},
+) {
+  root!.render(
+    <I18nProvider language="en">
+      <SideTaskPanel
+        tabId="side-task:side-session-1"
+        sessionId="side-session-1"
+        parentSessionId="parent-session"
+        workspaceCwd="/work/project"
+        title="Side task"
+        createSession={vi.fn()}
+        onCreated={vi.fn()}
+        onTitleChange={vi.fn()}
+        {...props}
+      />
+    </I18nProvider>,
+  );
+}
+
+afterEach(() => {
+  act(() => root?.unmount());
+  container?.remove();
+  container = null;
+  root = null;
+  connection.status = 'idle';
+  connection.sessionId = undefined;
+  connection.displayName = undefined;
+  connection.loadingTranscript = false;
+  connection.catchingUp = false;
+  providerProps.current = undefined;
+  latestChatPaneProps.current = undefined;
+  transcript.blocks = [];
+  transcript.hasMore = false;
+  transcript.loading = false;
+  transcript.capacityReached = false;
+  transcript.paginationError = undefined;
+  renameSession.mockClear();
+  renameSession.mockResolvedValue(undefined);
+  sendPrompt.mockClear();
+});
+
+it('creates a side task and reports the new session id', async () => {
+  const onCreated = vi.fn();
+  const onTitleChange = vi.fn();
+  const createSession = vi.fn().mockResolvedValue({
+    sessionId: 'side-session-1',
+    displayName: 'Side task',
+  });
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+
+  await act(async () => {
+    root!.render(
+      <I18nProvider language="en">
+        <SideTaskPanel
+          tabId="side-task:draft:1"
+          parentSessionId="parent-session"
+          workspaceCwd="/work/project"
+          title="Side task"
+          createSession={createSession}
+          onCreated={onCreated}
+          onTitleChange={onTitleChange}
+        />
+      </I18nProvider>,
+    );
+    await Promise.resolve();
+    await Promise.resolve();
+  });
+
+  expect(createSession).toHaveBeenCalledWith(
+    'side-task:draft:1',
+    'parent-session',
+    'Side task',
+  );
+  expect(onCreated).toHaveBeenCalledWith('side-task:draft:1', 'side-session-1');
+  expect(onTitleChange).toHaveBeenCalledWith('side-task:draft:1', 'Side task');
+});
+
+it('does not retry creation after a prop change until the user requests it', async () => {
+  const createSession = vi
+    .fn()
+    .mockRejectedValueOnce(new Error('create failed'))
+    .mockResolvedValue({
+      sessionId: 'side-session-1',
+      displayName: 'Renamed task',
+    });
+  const onCreated = vi.fn();
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+
+  const renderDraft = (title: string) => (
+    <I18nProvider language="en">
+      <SideTaskPanel
+        tabId="side-task:draft:1"
+        parentSessionId="parent-session"
+        workspaceCwd="/work/project"
+        title={title}
+        createSession={createSession}
+        onCreated={onCreated}
+        onTitleChange={vi.fn()}
+      />
+    </I18nProvider>
+  );
+
+  await act(async () => {
+    root!.render(renderDraft('Side task'));
+    await Promise.resolve();
+    await Promise.resolve();
+  });
+  expect(createSession).toHaveBeenCalledOnce();
+
+  await act(async () => {
+    root!.render(renderDraft('Renamed task'));
+    await Promise.resolve();
+  });
+  expect(createSession).toHaveBeenCalledOnce();
+
+  await act(async () => {
+    const retryButton = Array.from(container.querySelectorAll('button')).find(
+      (button) => button.textContent === 'Try again',
+    );
+    expect(retryButton).not.toBeUndefined();
+    retryButton?.click();
+    await Promise.resolve();
+    await Promise.resolve();
+  });
+
+  expect(createSession).toHaveBeenCalledTimes(2);
+  expect(createSession).toHaveBeenLastCalledWith(
+    'side-task:draft:1',
+    'parent-session',
+    'Renamed task',
+  );
+  expect(onCreated).toHaveBeenCalledWith('side-task:draft:1', 'side-session-1');
+});
+
+it('renders a restored side task as a full chat pane', () => {
+  connection.sessionId = 'side-session-1';
+  connection.displayName = 'Investigate flaky tests';
+  connection.status = 'connected';
+  transcript.blocks = [{ kind: 'user' }];
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+
+  const onTitleChange = vi.fn();
+  const onRightPanelOpen = vi.fn();
+  const onArtifactsChange = vi.fn();
+  act(() => {
+    root!.render(
+      <I18nProvider language="en">
+        <SideTaskPanel
+          tabId="side-task:side-session-1"
+          sessionId="side-session-1"
+          parentSessionId="parent-session"
+          workspaceCwd="/work/project"
+          title="Side task"
+          createSession={vi.fn()}
+          onCreated={vi.fn()}
+          onTitleChange={onTitleChange}
+          onRightPanelOpen={onRightPanelOpen}
+          onArtifactsChange={onArtifactsChange}
+        />
+      </I18nProvider>,
+    );
+  });
+
+  expect(
+    container.querySelector('[data-testid="side-task-chat"]'),
+  ).not.toBeNull();
+  expect(latestChatPaneProps.current).toMatchObject({
+    title: 'Investigate flaky tests',
+    workspaceCwd: '/work/project',
+    embedded: true,
+    onRightPanelOpen,
+    onPaneArtifactsChange: onArtifactsChange,
+  });
+  expect(
+    latestChatPaneProps.current?.['onFirstPromptAdmitted'],
+  ).toBeUndefined();
+  expect(providerProps.current).toMatchObject({
+    sessionId: 'side-session-1',
+    workspaceCwd: '/work/project',
+    autoConnect: true,
+  });
+});
+
+it('names a restored empty side task from its first prompt', async () => {
+  connection.sessionId = 'side-session-1';
+  connection.displayName = 'Side task';
+  connection.status = 'connected';
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+
+  const onTitleChange = vi.fn();
+  act(() => {
+    renderSideTask({ onTitleChange });
+  });
+
+  await act(async () => {
+    (
+      latestChatPaneProps.current?.['onFirstPromptAdmitted'] as (
+        text: string,
+      ) => void
+    )('Investigate restored task');
+    await Promise.resolve();
+  });
+
+  expect(renameSession).toHaveBeenCalledWith('Investigate restored task');
+  expect(onTitleChange).toHaveBeenCalledWith(
+    'side-task:side-session-1',
+    'Investigate restored task',
+    true,
+  );
+});
+
+it('truncates the first-prompt title by code point, not code unit', async () => {
+  connection.sessionId = 'side-session-1';
+  connection.displayName = 'Side task';
+  connection.status = 'connected';
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+
+  const onTitleChange = vi.fn();
+  act(() => {
+    renderSideTask({ onTitleChange });
+  });
+
+  const longPrompt = `${'a'.repeat(199)}\u{1F600} trailing`;
+  await act(async () => {
+    (
+      latestChatPaneProps.current?.['onFirstPromptAdmitted'] as (
+        text: string,
+      ) => void
+    )(longPrompt);
+    await Promise.resolve();
+  });
+
+  const expected = `${'a'.repeat(199)}\u{1F600}`;
+  expect(renameSession).toHaveBeenCalledWith(expected);
+  expect(onTitleChange).toHaveBeenCalledWith(
+    'side-task:side-session-1',
+    expected,
+    true,
+  );
+});
+
+it('sends the /btw question as the first side-task prompt', async () => {
+  connection.sessionId = 'side-session-1';
+  connection.displayName = 'Side task';
+  connection.status = 'connected';
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+
+  const onTitleChange = vi.fn();
+  await act(async () => {
+    renderSideTask({
+      initialPrompt: 'Explain the current implementation',
+      onTitleChange,
+    });
+    await Promise.resolve();
+  });
+
+  expect(sendPrompt).toHaveBeenCalledWith(
+    'Explain the current implementation',
+    expect.objectContaining({ onAdmitted: expect.any(Function) }),
+  );
+  expect(renameSession).toHaveBeenCalledWith(
+    'Explain the current implementation',
+  );
+  expect(onTitleChange).toHaveBeenCalledWith(
+    'side-task:side-session-1',
+    'Explain the current implementation',
+    true,
+  );
+});
+
+it('does not rename a restored side task when older history exists', () => {
+  connection.sessionId = 'side-session-1';
+  connection.displayName = 'Existing task';
+  connection.status = 'connected';
+  transcript.hasMore = true;
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+
+  act(() => {
+    renderSideTask({ title: 'Existing task' });
+  });
+
+  expect(
+    latestChatPaneProps.current?.['onFirstPromptAdmitted'],
+  ).toBeUndefined();
+});
+
+it.each([
+  ['loading', { loading: true }],
+  ['capacity reached', { capacityReached: true }],
+  ['pagination failed', { paginationError: 'history unavailable' }],
+])('does not rename when transcript history is incomplete: %s', (_, state) => {
+  connection.sessionId = 'side-session-1';
+  connection.status = 'connected';
+  Object.assign(transcript, state);
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+
+  act(() => {
+    renderSideTask();
+  });
+
+  expect(
+    latestChatPaneProps.current?.['onFirstPromptAdmitted'],
+  ).toBeUndefined();
+});
+
+it('names a newly created side task from its first prompt', async () => {
+  connection.sessionId = 'side-session-1';
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+
+  const onTitleChange = vi.fn();
+  act(() => {
+    root!.render(
+      <I18nProvider language="en">
+        <SideTaskPanel
+          tabId="side-task:draft:1"
+          sessionId="side-session-1"
+          parentSessionId="parent-session"
+          workspaceCwd="/work/project"
+          title="Side task"
+          shouldNameFromFirstPrompt
+          createSession={vi.fn()}
+          onCreated={vi.fn()}
+          onTitleChange={onTitleChange}
+        />
+      </I18nProvider>,
+    );
+  });
+
+  await act(async () => {
+    (
+      latestChatPaneProps.current?.['onFirstPromptAdmitted'] as (
+        text: string,
+      ) => void
+    )('Investigate cache invalidation');
+    await Promise.resolve();
+  });
+
+  expect(onTitleChange).toHaveBeenCalledWith(
+    'side-task:draft:1',
+    'Investigate cache invalidation',
+    true,
+  );
+  expect(renameSession).toHaveBeenCalledWith('Investigate cache invalidation');
+
+  act(() => {
+    root!.render(null);
+  });
+  transcript.blocks = [{ kind: 'user' }];
+  act(() => {
+    root!.render(
+      <I18nProvider language="en">
+        <SideTaskPanel
+          tabId="side-task:draft:1"
+          sessionId="side-session-1"
+          parentSessionId="parent-session"
+          workspaceCwd="/work/project"
+          title="Investigate cache invalidation"
+          shouldNameFromFirstPrompt={false}
+          createSession={vi.fn()}
+          onCreated={vi.fn()}
+          onTitleChange={onTitleChange}
+        />
+      </I18nProvider>,
+    );
+  });
+
+  expect(
+    latestChatPaneProps.current?.['onFirstPromptAdmitted'],
+  ).toBeUndefined();
+});
+
+it('retries the first-prompt title before marking it complete', async () => {
+  connection.sessionId = 'side-session-1';
+  connection.status = 'connected';
+  renameSession
+    .mockRejectedValueOnce(new Error('temporary failure'))
+    .mockResolvedValueOnce(undefined);
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+
+  const onTitleChange = vi.fn();
+  const onError = vi.fn();
+  act(() => {
+    renderSideTask({
+      tabId: 'side-task:draft:1',
+      shouldNameFromFirstPrompt: true,
+      onTitleChange,
+      onError,
+    });
+  });
+
+  await act(async () => {
+    (
+      latestChatPaneProps.current?.['onFirstPromptAdmitted'] as (
+        text: string,
+      ) => void
+    )('Retry this title');
+    await Promise.resolve();
+    await Promise.resolve();
+  });
+
+  expect(renameSession).toHaveBeenCalledTimes(2);
+  expect(renameSession).toHaveBeenNthCalledWith(1, 'Retry this title');
+  expect(renameSession).toHaveBeenNthCalledWith(2, 'Retry this title');
+  expect(onTitleChange).toHaveBeenCalledWith(
+    'side-task:draft:1',
+    'Retry this title',
+    true,
+  );
+  expect(onError).not.toHaveBeenCalled();
+});
+
+it('bounds first-prompt title retries and reports the final failure', async () => {
+  connection.sessionId = 'side-session-1';
+  connection.status = 'connected';
+  const failure = new Error('persistent failure');
+  renameSession.mockRejectedValue(failure);
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+
+  const onTitleChange = vi.fn();
+  const onError = vi.fn();
+  act(() => {
+    renderSideTask({
+      tabId: 'side-task:draft:1',
+      shouldNameFromFirstPrompt: true,
+      onTitleChange,
+      onError,
+    });
+  });
+
+  await act(async () => {
+    (
+      latestChatPaneProps.current?.['onFirstPromptAdmitted'] as (
+        text: string,
+      ) => void
+    )('Keep this title');
+    await Promise.resolve();
+    await Promise.resolve();
+    await Promise.resolve();
+  });
+
+  expect(renameSession).toHaveBeenCalledTimes(3);
+  expect(onTitleChange).not.toHaveBeenCalledWith(
+    'side-task:draft:1',
+    'Keep this title',
+    true,
+  );
+  expect(onError).toHaveBeenCalledWith(failure, 'Failed to name side task');
+});
diff --git a/packages/web-shell/client/components/artifacts/SideTaskPanel.tsx b/packages/web-shell/client/components/artifacts/SideTaskPanel.tsx
new file mode 100644
index 00000000000..e02bac5b0f8
--- /dev/null
+++ b/packages/web-shell/client/components/artifacts/SideTaskPanel.tsx
@@ -0,0 +1,285 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  DaemonSessionProvider,
+  useActions,
+  useConnection,
+  useTranscriptBlocks,
+  useTranscriptHistory,
+} from '@qwen-code/webui/daemon-react-sdk';
+import {
+  WEB_SHELL_HISTORY_PAGE_SIZE,
+  WEB_SHELL_MAX_TRANSCRIPT_BLOCKS,
+} from '../../constants/sessions';
+import type { TurnOutputOpenRequest } from './TurnOutputs';
+import type { DaemonSessionArtifact } from '@qwen-code/sdk/daemon';
+import type { DaemonWorkspaceActions } from '@qwen-code/webui/daemon-react-sdk';
+import { useI18n } from '../../i18n';
+import { ChatPane } from '../ChatPane';
+import { Button } from '../ui/button';
+import { Spinner } from '../ui/spinner';
+
+interface SideTaskPanelProps {
+  tabId: string;
+  sessionId?: string;
+  parentSessionId: string;
+  workspaceCwd?: string;
+  title: string;
+  shouldNameFromFirstPrompt?: boolean;
+  initialPrompt?: string;
+  createSession: (
+    tabId: string,
+    parentSessionId: string,
+    title: string,
+  ) => Promise<{ sessionId: string; displayName?: string }>;
+  onCreated: (tabId: string, sessionId: string) => void;
+  onTitleChange: (
+    tabId: string,
+    title: string,
+    fromFirstPrompt?: boolean,
+  ) => void;
+  onRightPanelOpen?: (request: TurnOutputOpenRequest) => void;
+  onArtifactsChange?: (
+    sessionId: string,
+    artifacts: readonly DaemonSessionArtifact[],
+    workspaceActions: DaemonWorkspaceActions,
+  ) => void;
+  onError?: (error: unknown, fallback: string) => void;
+}
+
+const FIRST_PROMPT_RENAME_ATTEMPTS = 3;
+
+export function SideTaskPanel({
+  tabId,
+  sessionId,
+  parentSessionId,
+  workspaceCwd,
+  title,
+  shouldNameFromFirstPrompt,
+  initialPrompt,
+  createSession,
+  onCreated,
+  onTitleChange,
+  onRightPanelOpen,
+  onArtifactsChange,
+  onError,
+}: SideTaskPanelProps) {
+  if (!sessionId) {
+    return (
+      <SideTaskCreation
+        tabId={tabId}
+        parentSessionId={parentSessionId}
+        title={title}
+        createSession={createSession}
+        onCreated={onCreated}
+        onTitleChange={onTitleChange}
+        onError={onError}
+      />
+    );
+  }
+
+  return (
+    <DaemonSessionProvider
+      sessionId={sessionId}
+      workspaceCwd={workspaceCwd}
+      clientId={`side-task:${parentSessionId}:${tabId}`}
+      autoConnect
+      historyPageSize={WEB_SHELL_HISTORY_PAGE_SIZE}
+      subagentTranscriptMode="summary"
+      maxBlocks={WEB_SHELL_MAX_TRANSCRIPT_BLOCKS}
+      suppressOwnUserEcho
+    >
+      <SideTaskSession
+        tabId={tabId}
+        title={title}
+        shouldNameFromFirstPrompt={shouldNameFromFirstPrompt}
+        initialPrompt={initialPrompt}
+        workspaceCwd={workspaceCwd}
+        onTitleChange={onTitleChange}
+        onRightPanelOpen={onRightPanelOpen}
+        onArtifactsChange={onArtifactsChange}
+        onError={onError}
+      />
+    </DaemonSessionProvider>
+  );
+}
+
+function SideTaskCreation({
+  tabId,
+  parentSessionId,
+  title,
+  createSession,
+  onCreated,
+  onTitleChange,
+  onError,
+}: Pick<
+  SideTaskPanelProps,
+  | 'tabId'
+  | 'parentSessionId'
+  | 'title'
+  | 'createSession'
+  | 'onCreated'
+  | 'onTitleChange'
+  | 'onError'
+>) {
+  const { t } = useI18n();
+  const creatingRef = useRef(false);
+  const didAttemptCreateRef = useRef(false);
+  const [creationError, setCreationError] = useState<unknown>();
+
+  const create = useCallback(async () => {
+    if (creatingRef.current) return;
+    creatingRef.current = true;
+    setCreationError(undefined);
+    try {
+      const created = await createSession(tabId, parentSessionId, title);
+      onCreated(tabId, created.sessionId);
+      if (created.displayName) onTitleChange(tabId, created.displayName);
+    } catch (error) {
+      setCreationError(error);
+      onError?.(error, t('sideTask.createFailed'));
+    } finally {
+      creatingRef.current = false;
+    }
+  }, [
+    createSession,
+    onCreated,
+    onError,
+    onTitleChange,
+    parentSessionId,
+    t,
+    tabId,
+    title,
+  ]);
+
+  useEffect(() => {
+    if (didAttemptCreateRef.current) return;
+    didAttemptCreateRef.current = true;
+    void create();
+  }, [create]);
+
+  if (creationError) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center gap-3 text-sm text-muted-foreground">
+        <span>{t('sideTask.createFailed')}</span>
+        <Button type="button" variant="outline" onClick={() => void create()}>
+          {t('common.retry')}
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="flex h-full items-center justify-center gap-2 text-sm text-muted-foreground"
+      role="status"
+    >
+      <Spinner />
+      <span>{t('sideTask.creating')}</span>
+    </div>
+  );
+}
+
+function SideTaskSession({
+  tabId,
+  title,
+  shouldNameFromFirstPrompt,
+  initialPrompt,
+  workspaceCwd,
+  onTitleChange,
+  onRightPanelOpen,
+  onArtifactsChange,
+  onError,
+}: Omit<
+  SideTaskPanelProps,
+  'sessionId' | 'parentSessionId' | 'createSession' | 'onCreated'
+>) {
+  const { t } = useI18n();
+  const connection = useConnection();
+  const actions = useActions();
+  const blocks = useTranscriptBlocks();
+  const transcriptHistory = useTranscriptHistory();
+  const hasUserPrompt = blocks.some((block) => block.kind === 'user');
+  const restoredEmptySession =
+    connection.status === 'connected' &&
+    !connection.loadingTranscript &&
+    !connection.catchingUp &&
+    !transcriptHistory.loading &&
+    !transcriptHistory.hasMore &&
+    !transcriptHistory.capacityReached &&
+    !transcriptHistory.paginationError &&
+    !hasUserPrompt;
+  const canNameFromFirstPrompt =
+    !hasUserPrompt && (shouldNameFromFirstPrompt || restoredEmptySession);
+  useEffect(() => {
+    const displayName = connection.displayName?.trim();
+    if (displayName) onTitleChange(tabId, displayName);
+  }, [connection.displayName, onTitleChange, tabId]);
+  const nameFromFirstPrompt = useCallback(
+    (text: string) => {
+      const nextTitle = Array.from(text.trim()).slice(0, 200).join('');
+      if (!nextTitle) return;
+      onTitleChange(tabId, nextTitle);
+      void (async () => {
+        let lastError: unknown;
+        for (
+          let attempt = 0;
+          attempt < FIRST_PROMPT_RENAME_ATTEMPTS;
+          attempt++
+        ) {
+          try {
+            await actions.renameSession(nextTitle);
+            onTitleChange(tabId, nextTitle, true);
+            return;
+          } catch (error) {
+            lastError = error;
+          }
+        }
+        onError?.(lastError, t('sideTask.renameFailed'));
+      })();
+    },
+    [actions, onError, onTitleChange, t, tabId],
+  );
+  const initialPromptSentRef = useRef(false);
+  useEffect(() => {
+    const prompt = initialPrompt?.trim();
+    if (!prompt || !restoredEmptySession || initialPromptSentRef.current)
+      return;
+    initialPromptSentRef.current = true;
+    actions
+      .sendPrompt(prompt, {
+        onAdmitted: () => nameFromFirstPrompt(prompt),
+      })
+      .catch((error: unknown) => {
+        initialPromptSentRef.current = false;
+        onError?.(error, t('sideTask.promptFailed'));
+      });
+  }, [
+    actions,
+    initialPrompt,
+    nameFromFirstPrompt,
+    onError,
+    restoredEmptySession,
+    t,
+  ]);
+
+  if (!connection.sessionId) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <Spinner />
+      </div>
+    );
+  }
+  return (
+    <ChatPane
+      title={connection.displayName?.trim() || title}
+      workspaceCwd={workspaceCwd}
+      onError={onError}
+      embedded
+      onFirstPromptAdmitted={
+        canNameFromFirstPrompt ? nameFromFirstPrompt : undefined
+      }
+      onRightPanelOpen={onRightPanelOpen}
+      onPaneArtifactsChange={onArtifactsChange}
+    />
+  );
+}
diff --git a/packages/web-shell/client/components/artifacts/SubagentDetail.integration.test.tsx b/packages/web-shell/client/components/artifacts/SubagentDetail.integration.test.tsx
new file mode 100644
index 00000000000..5a1a3c50f91
--- /dev/null
+++ b/packages/web-shell/client/components/artifacts/SubagentDetail.integration.test.tsx
@@ -0,0 +1,148 @@
+// @vitest-environment jsdom
+
+import { act, type ReactNode } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, expect, it, vi } from 'vitest';
+import type { ACPToolCall, Message } from '../../adapters/types';
+import { I18nProvider } from '../../i18n';
+
+const {
+  connection,
+  workspaceActions,
+  workspaceClient,
+  latestMessageListProps,
+  messages,
+} = vi.hoisted(() => ({
+  connection: {
+    sessionId: 'subagent-session',
+    workspaceCwd: '/work/project',
+    loadingTranscript: false,
+  },
+  workspaceActions: {
+    readFile: vi.fn(),
+  },
+  workspaceClient: {
+    resolveSubagentSession: vi.fn(),
+    cancelSubagentSession: vi.fn(),
+  },
+  latestMessageListProps: {
+    current: undefined as Record<string, unknown> | undefined,
+  },
+  messages: [
+    {
+      id: 'tools-1',
+      role: 'tool_group',
+      tools: [
+        {
+          callId: 'agent-1',
+          toolName: 'agent',
+          title: 'agent: investigate',
+          status: 'completed',
+          kind: 'agent',
+          args: { prompt: 'Investigate the failure' },
+        },
+      ],
+    },
+  ] as Message[],
+}));
+
+vi.mock('@qwen-code/webui/daemon-react-sdk', () => ({
+  DaemonSessionProvider: ({ children }: { children: ReactNode }) => children,
+  useConnection: () => connection,
+  useWorkspace: () => ({ client: workspaceClient }),
+  useWorkspaceActions: () => workspaceActions,
+}));
+
+vi.mock('../../hooks/useMessages', () => ({
+  useMessages: () => messages,
+}));
+
+vi.mock('../../hooks/useSessionArtifacts', () => ({
+  useSessionArtifacts: () => ({ artifacts: [] }),
+}));
+
+vi.mock('../MessageList', () => ({
+  MessageList: (props: Record<string, unknown>) => {
+    latestMessageListProps.current = props;
+    return <div data-testid="subagent-transcript" />;
+  },
+}));
+
+const { SubagentDetail } = await import('./SubagentDetail');
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+let container: HTMLDivElement | null = null;
+let root: Root | null = null;
+
+afterEach(() => {
+  act(() => root?.unmount());
+  container?.remove();
+  container = null;
+  root = null;
+  latestMessageListProps.current = undefined;
+  workspaceClient.resolveSubagentSession.mockReset();
+});
+
+it('opens subagent and fork transcript outputs in source-scoped panel tabs', async () => {
+  workspaceClient.resolveSubagentSession.mockResolvedValue({
+    sessionId: 'subagent-session',
+    status: 'completed',
+  });
+  const onRightPanelOpen = vi.fn();
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+
+  await act(async () => {
+    root!.render(
+      <I18nProvider language="en">
+        <SubagentDetail
+          sessionId="parent-session"
+          rootToolCallId="agent-1"
+          initialRootTool={
+            (messages[0] as Extract<Message, { role: 'tool_group' }>)
+              .tools[0] as ACPToolCall
+          }
+          workspaceCwd="/work/project"
+          onRightPanelOpen={onRightPanelOpen}
+        />
+      </I18nProvider>,
+    );
+    await Promise.resolve();
+  });
+
+  expect(latestMessageListProps.current).toMatchObject({
+    turnFileChanges: expect.any(Map),
+    turnArtifacts: expect.any(Map),
+  });
+
+  const openOutput = latestMessageListProps.current?.[
+    'onTurnOutputOpen'
+  ] as (request: {
+    id: 'review';
+    kind: 'review';
+    title: string;
+    turnId: string;
+    changes: [];
+  }) => void;
+  act(() => {
+    openOutput({
+      id: 'review',
+      kind: 'review',
+      title: 'Review',
+      turnId: 'turn-1',
+      changes: [],
+    });
+  });
+
+  expect(onRightPanelOpen).toHaveBeenCalledWith({
+    id: 'review',
+    kind: 'review',
+    title: 'Review',
+    turnId: 'turn-1',
+    changes: [],
+    sourceSessionId: 'subagent-session',
+    workspaceActions,
+  });
+});
diff --git a/packages/web-shell/client/components/artifacts/SubagentDetail.tsx b/packages/web-shell/client/components/artifacts/SubagentDetail.tsx
index a5043a9b721..729fae338b4 100644
--- a/packages/web-shell/client/components/artifacts/SubagentDetail.tsx
+++ b/packages/web-shell/client/components/artifacts/SubagentDetail.tsx
@@ -3,13 +3,22 @@ import {
   DaemonSessionProvider,
   useConnection,
   useWorkspace,
+  useWorkspaceActions,
+  type DaemonWorkspaceActions,
 } from '@qwen-code/webui/daemon-react-sdk';
+import type { DaemonSessionArtifact } from '@qwen-code/sdk/daemon';
 import type { ACPToolCall, Message } from '../../adapters/types';
 import { useMessages } from '../../hooks/useMessages';
+import { useSessionArtifacts } from '../../hooks/useSessionArtifacts';
 import { useI18n } from '../../i18n';
 import { MessageList } from '../MessageList';
 import { getAgentDescription } from '../messages/toolFormatting';
 import { Badge } from '../ui/badge';
+import type { TurnOutputOpenRequest } from './TurnOutputs';
+import {
+  getArtifactsByTurn,
+  getFileChangesByTurn,
+} from './turnOutputSelectors';
 import styles from './SubagentDetail.module.css';
 
 interface SubagentResolution {
@@ -119,14 +128,38 @@ function SubagentDetailContent({
   rootTool,
   resolution,
   onStop,
+  onRightPanelOpen,
+  onArtifactsChange,
 }: {
   rootTool: ACPToolCall;
   resolution: SubagentResolution;
   onStop: () => Promise<{ cancelled: boolean }>;
+  onRightPanelOpen?: (request: TurnOutputOpenRequest) => void;
+  onArtifactsChange?: (
+    sessionId: string,
+    artifacts: readonly DaemonSessionArtifact[],
+    workspaceActions: DaemonWorkspaceActions,
+  ) => void;
 }) {
   const { t } = useI18n();
   const connection = useConnection();
+  const workspaceActions = useWorkspaceActions();
   const messages = useMessages(t);
+  const { artifacts } = useSessionArtifacts();
+  const artifactsByTurn = useMemo(
+    () =>
+      getArtifactsByTurn(messages, artifacts, connection.workspaceCwd || ''),
+    [artifacts, connection.workspaceCwd, messages],
+  );
+  const fileChangesByTurn = useMemo(
+    () =>
+      getFileChangesByTurn(
+        messages,
+        artifactsByTurn,
+        connection.workspaceCwd || '',
+      ),
+    [artifactsByTurn, connection.workspaceCwd, messages],
+  );
   const description = getAgentDescription(rootTool);
   const prompt = getSubagentPrompt(messages, rootTool);
   const metrics = useMemo(
@@ -138,6 +171,30 @@ function SubagentDetailContent({
   const [stopping, setStopping] = useState(false);
   const [stopError, setStopError] = useState('');
 
+  useEffect(() => {
+    const sessionId = connection.sessionId;
+    if (!sessionId) return;
+    onArtifactsChange?.(sessionId, artifacts, workspaceActions);
+    return () => {
+      onArtifactsChange?.(sessionId, [], workspaceActions);
+    };
+  }, [artifacts, connection.sessionId, onArtifactsChange, workspaceActions]);
+
+  const handleRightPanelOpen = (request: TurnOutputOpenRequest) => {
+    if (request.kind === 'subagent') {
+      onRightPanelOpen?.({
+        ...request,
+        sourceSessionId: connection.sessionId,
+      });
+      return;
+    }
+    onRightPanelOpen?.({
+      ...request,
+      workspaceActions,
+      sourceSessionId: connection.sessionId,
+    });
+  };
+
   useEffect(() => {
     if (isRunning) return;
     setStopping(false);
@@ -200,6 +257,9 @@ function SubagentDetailContent({
           hideFirstUserMessage
           firstTurnMetrics={metrics}
           includeSubagentToolUsageInMetrics={false}
+          turnFileChanges={fileChangesByTurn}
+          turnArtifacts={artifactsByTurn}
+          onTurnOutputOpen={handleRightPanelOpen}
         />
       </div>
     </div>
@@ -211,11 +271,19 @@ export function SubagentDetail({
   rootToolCallId,
   initialRootTool,
   workspaceCwd,
+  onRightPanelOpen,
+  onArtifactsChange,
 }: {
   sessionId: string;
   rootToolCallId: string;
   initialRootTool: ACPToolCall;
   workspaceCwd?: string;
+  onRightPanelOpen?: (request: TurnOutputOpenRequest) => void;
+  onArtifactsChange?: (
+    sessionId: string,
+    artifacts: readonly DaemonSessionArtifact[],
+    workspaceActions: DaemonWorkspaceActions,
+  ) => void;
 }) {
   const { t } = useI18n();
   const workspace = useWorkspace();
@@ -306,6 +374,8 @@ export function SubagentDetail({
       <SubagentDetailContent
         rootTool={rootTool}
         resolution={resolution}
+        onRightPanelOpen={onRightPanelOpen}
+        onArtifactsChange={onArtifactsChange}
         onStop={() =>
           workspace.client.cancelSubagentSession(sessionId, rootToolCallId)
         }
diff --git a/packages/web-shell/client/components/artifacts/TurnOutputs.tsx b/packages/web-shell/client/components/artifacts/TurnOutputs.tsx
index b39f5e08c2d..20e5f956763 100644
--- a/packages/web-shell/client/components/artifacts/TurnOutputs.tsx
+++ b/packages/web-shell/client/components/artifacts/TurnOutputs.tsx
@@ -61,7 +61,7 @@ export const TURN_OUTPUT_KINDS: readonly TurnOutputKind[] = [
   'scheduled_task',
 ];
 
-export type TurnOutputOpenRequest =
+export type TurnOutputOpenRequest = (
   | {
       id: 'review';
       kind: 'review';
@@ -99,7 +99,11 @@ export type TurnOutputOpenRequest =
       tool: ACPToolCall;
       sessionId: string;
       workspaceCwd?: string;
-    };
+    }
+) & {
+  /** Session whose transcript produced this output. */
+  sourceSessionId?: string;
+};
 
 interface TurnOutputsProps {
   turnId: string;
diff --git a/packages/web-shell/client/components/messages/TasksStatusMessage.module.css b/packages/web-shell/client/components/messages/TasksStatusMessage.module.css
index 42ccef67130..21443e8e0ec 100644
--- a/packages/web-shell/client/components/messages/TasksStatusMessage.module.css
+++ b/packages/web-shell/client/components/messages/TasksStatusMessage.module.css
@@ -293,6 +293,28 @@
   gap: 6px;
 }
 
+.shellFields {
+  display: grid;
+  gap: 14px;
+}
+
+.shellFieldValue {
+  background: var(--muted);
+  border-radius: 6px;
+  color: var(--foreground);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+  padding: 8px 10px;
+}
+
+.shellError {
+  background: color-mix(in srgb, var(--error-color) 7%, transparent);
+  border-radius: 6px;
+  padding: 8px 10px;
+}
+
 .monitorCommand {
   background: var(--muted);
   border: 1px solid var(--border);
diff --git a/packages/web-shell/client/components/messages/TasksStatusMessage.tsx b/packages/web-shell/client/components/messages/TasksStatusMessage.tsx
index 4cf69563413..0d48e59162d 100644
--- a/packages/web-shell/client/components/messages/TasksStatusMessage.tsx
+++ b/packages/web-shell/client/components/messages/TasksStatusMessage.tsx
@@ -1,9 +1,11 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type {
   DaemonSessionMonitorTaskStatus,
+  DaemonSessionShellTaskStatus,
   DaemonSessionTasksStatus,
   DaemonSessionTaskStatus,
 } from '@qwen-code/sdk/daemon';
+import { isSessionDisconnectedError } from '../../utils/sessionErrors';
 import {
   computeAgentTreeInfo,
   computeUserBlockingIds,
@@ -11,7 +13,10 @@ import {
   TREE_INDENT_MAX_LEVELS,
   type AgentTreeInfo,
 } from './agentForest';
-import { useActions } from '@qwen-code/webui/daemon-react-sdk';
+import {
+  useActions,
+  type DaemonSessionActions,
+} from '@qwen-code/webui/daemon-react-sdk';
 import { useDelayedGlobalKeyDown } from '../../hooks/useDelayedGlobalKeyDown';
 import { useI18n } from '../../i18n';
 import { formatRuntime } from '../../utils/formatRuntime';
@@ -290,6 +295,10 @@ export function TasksStatusMessage({
           setRefreshError(false);
         })
         .catch((error: unknown) => {
+          if (isSessionDisconnectedError(error)) {
+            setRefreshError(false);
+            return;
+          }
           console.warn('[web-shell] failed to refresh tasks:', error);
           setRefreshError(true);
         })
@@ -751,11 +760,14 @@ function detailTitle(
 
 export function MonitorTaskDetail({
   task,
+  actions: providedActions,
 }: {
   task: DaemonSessionMonitorTaskStatus;
+  actions?: DaemonSessionActions;
 }) {
   const { t } = useI18n();
-  const actions = useActions();
+  const contextActions = useActions();
+  const actions = providedActions ?? contextActions;
   const [currentTask, setCurrentTask] = useState(task);
   const [busy, setBusy] = useState(false);
   const [actionError, setActionError] = useState<string | null>(null);
@@ -893,6 +905,152 @@ export function MonitorTaskDetail({
   );
 }
 
+export function ShellTaskDetail({
+  task,
+  actions: providedActions,
+}: {
+  task: DaemonSessionShellTaskStatus;
+  actions?: DaemonSessionActions;
+}) {
+  const { t } = useI18n();
+  const contextActions = useActions();
+  const actions = providedActions ?? contextActions;
+  const [currentTask, setCurrentTask] = useState(task);
+  const [busy, setBusy] = useState(false);
+  const [actionError, setActionError] = useState<string | null>(null);
+
+  useEffect(() => {
+    setCurrentTask((current) =>
+      current.id === task.id &&
+      current.status !== 'running' &&
+      task.status === 'running'
+        ? current
+        : task,
+    );
+  }, [task]);
+
+  useEffect(() => {
+    setActionError(null);
+  }, [task.id, task.status]);
+
+  const handleCancel = useCallback(async () => {
+    if (busy || currentTask.status !== 'running') return;
+    setActionError(null);
+    setBusy(true);
+    try {
+      const result = await actions.cancelTask(currentTask.id, 'shell');
+      if (!result.cancelled) {
+        setActionError(t('tasks.alreadyStopped'));
+        return;
+      }
+      setCurrentTask({
+        ...currentTask,
+        status: 'cancelled',
+        endTime: Date.now(),
+      });
+      try {
+        const snapshot = await actions.getTasks();
+        const updatedTask = snapshot.tasks.find(
+          (candidate): candidate is DaemonSessionShellTaskStatus =>
+            candidate.kind === 'shell' && candidate.id === currentTask.id,
+        );
+        if (updatedTask && updatedTask.status !== 'running') {
+          setCurrentTask(updatedTask);
+        }
+      } catch (error: unknown) {
+        console.warn(
+          '[web-shell] failed to refresh stopped shell task:',
+          error,
+        );
+      }
+    } catch (error: unknown) {
+      console.warn('[web-shell] failed to cancel shell task:', error);
+      setActionError(t('tasks.cancelFailed'));
+    } finally {
+      setBusy(false);
+    }
+  }, [actions, busy, currentTask, t]);
+
+  return (
+    <div className={styles.monitorDetail}>
+      <div className={styles.monitorOverview}>
+        <div className={styles.monitorHeadingRow}>
+          <div className={styles.monitorDescription}>
+            {t('tasks.kind.shell')}
+          </div>
+          <div className={styles.monitorStatusActions}>
+            <Badge
+              variant="outline"
+              className={styles.monitorStatusTag}
+              data-status={currentTask.status}
+            >
+              {statusLabel(currentTask.status, t)}
+            </Badge>
+            {currentTask.status === 'running' && (
+              <button
+                type="button"
+                className={styles.monitorStopButton}
+                disabled={busy}
+                onClick={() => void handleCancel()}
+              >
+                {busy ? t('common.loading') : t('tasks.action.stop')}
+              </button>
+            )}
+          </div>
+        </div>
+        <pre className={styles.monitorCommand}>{currentTask.command}</pre>
+        {actionError && (
+          <div className={styles.monitorActionError}>{actionError}</div>
+        )}
+        <div className={styles.monitorMetrics}>
+          <MonitorMetric
+            label={t('tasks.detail.runtime')}
+            value={formatRuntime(currentTask.runtimeMs)}
+          />
+          {currentTask.pid !== undefined && (
+            <MonitorMetric
+              label={t('tasks.detail.pid')}
+              value={String(currentTask.pid)}
+            />
+          )}
+          {currentTask.exitCode !== undefined && (
+            <MonitorMetric
+              label={t('tasks.detail.exitCode')}
+              value={String(currentTask.exitCode)}
+            />
+          )}
+        </div>
+      </div>
+      <div className={styles.shellFields}>
+        <div className={styles.monitorCommandSection}>
+          <div className={styles.monitorSectionLabel}>
+            {t('tasks.detail.workingDir')}
+          </div>
+          <div className={styles.shellFieldValue}>{currentTask.cwd}</div>
+        </div>
+        {currentTask.outputFile && (
+          <div className={styles.monitorCommandSection}>
+            <div className={styles.monitorSectionLabel}>
+              {t('tasks.detail.outputFile')}
+            </div>
+            <div className={styles.shellFieldValue}>
+              {currentTask.outputFile}
+            </div>
+          </div>
+        )}
+      </div>
+      {currentTask.error && (
+        <div className={`${styles.monitorError} ${styles.shellError}`}>
+          <div className={styles.monitorSectionLabel}>
+            {t('tasks.detail.error')}
+          </div>
+          <div>{currentTask.error}</div>
+        </div>
+      )}
+    </div>
+  );
+}
+
 function MonitorMetric({ label, value }: { label: string; value: string }) {
   return (
     <div className={styles.monitorMetric}>
diff --git a/packages/web-shell/client/components/panels/EnvironmentPanel.module.css b/packages/web-shell/client/components/panels/EnvironmentPanel.module.css
new file mode 100644
index 00000000000..d72b5cad4e2
--- /dev/null
+++ b/packages/web-shell/client/components/panels/EnvironmentPanel.module.css
@@ -0,0 +1,265 @@
+.panel {
+  box-sizing: border-box;
+  flex: 0 0 320px;
+  width: 320px;
+  max-height: calc(100% - 24px);
+  min-height: 0;
+  margin: 12px 12px 12px 0;
+  align-self: flex-start;
+  overflow-y: auto;
+  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
+  border-radius: 18px;
+  background: var(--background);
+  box-shadow: 0 8px 20px color-mix(in srgb, #000 8%, transparent);
+}
+
+.floating {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  z-index: 30;
+  width: min(320px, calc(100% - 24px));
+  max-height: calc(100% - 24px);
+  margin: 0;
+}
+
+.section {
+  padding: 18px;
+}
+
+.section + .section {
+  background-image: linear-gradient(
+    color-mix(in srgb, var(--border) 52%, transparent),
+    color-mix(in srgb, var(--border) 52%, transparent)
+  );
+  background-position: center top;
+  background-repeat: no-repeat;
+  background-size: calc(100% - 36px) 1px;
+}
+
+.sectionHeader {
+  display: flex;
+  width: calc(100% + 12px);
+  min-width: 0;
+  align-items: center;
+  gap: 8px;
+  margin: -6px;
+  padding: 6px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--muted-foreground);
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 400;
+  text-align: left;
+}
+
+.sectionHeader:hover,
+.sectionHeader:focus-visible {
+  background: var(--accent);
+  outline: none;
+}
+
+.sectionHeader > svg {
+  width: 14px;
+  height: 14px;
+  flex: 0 0 auto;
+  stroke-width: 1.7;
+}
+
+.sectionContent {
+  margin-top: 10px;
+}
+
+.row {
+  display: flex;
+  width: calc(100% + 12px);
+  min-width: 0;
+  min-height: 34px;
+  box-sizing: border-box;
+  align-items: center;
+  gap: 10px;
+  margin-right: -6px;
+  margin-left: -6px;
+  padding: 5px 12px 5px 6px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--foreground);
+  font: inherit;
+  text-align: left;
+}
+
+button.row {
+  cursor: pointer;
+}
+
+button.row:hover,
+button.row:focus-visible,
+.row:not(button):hover {
+  background: var(--accent);
+  outline: none;
+}
+
+button.row:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.row > svg {
+  width: 16px;
+  height: 16px;
+  flex: 0 0 auto;
+  color: currentColor;
+  stroke-width: 1.7;
+}
+
+.row > .workspaceIcon {
+  stroke-width: 1.2;
+}
+
+.row > .rowActionIcon {
+  width: 14px;
+  height: 14px;
+  color: var(--muted-foreground);
+}
+
+.branchName {
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.value {
+  min-width: 0;
+  margin-left: auto;
+  overflow: hidden;
+  color: var(--muted-foreground);
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tasks {
+  display: flex;
+  flex-direction: column;
+  margin: 8px 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.task {
+  display: flex;
+  width: calc(100% + 12px);
+  min-width: 0;
+  align-items: center;
+  gap: 8px;
+  margin-right: -6px;
+  margin-left: -6px;
+  padding: 6px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--foreground);
+  cursor: pointer;
+  font: inherit;
+  font-size: 12px;
+  text-align: left;
+}
+
+.task:hover,
+.task:focus-visible {
+  background: var(--accent);
+  outline: none;
+}
+
+.task:disabled {
+  cursor: default;
+  opacity: 0.55;
+}
+
+.taskIcon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  color: currentColor;
+}
+
+.taskIcon svg {
+  width: 14px;
+  height: 14px;
+}
+
+.taskLabel {
+  display: flex;
+  min-width: 0;
+  flex: 1 1 auto;
+  align-items: center;
+  gap: 6px;
+}
+
+.agentName,
+.taskName {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.taskName {
+  display: block;
+}
+
+.agentColor {
+  display: inline-block;
+  width: 7px;
+  min-width: 7px;
+  height: 7px;
+  flex: 0 0 auto;
+  border-radius: 50%;
+}
+
+.agentTag {
+  flex: 0 0 auto;
+  padding: 1px 5px;
+  border: 1px solid color-mix(in srgb, var(--muted-foreground) 22%, transparent);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--muted-foreground) 8%, transparent);
+  color: var(--muted-foreground);
+  font-size: 10px;
+  line-height: 14px;
+}
+
+.taskStatus {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 4px;
+  color: var(--muted-foreground);
+}
+
+.taskStatus svg {
+  width: 12px;
+  height: 12px;
+}
+
+.taskStatus[data-status='completed'] {
+  color: var(--success-color);
+}
+
+.taskStatus[data-status='failed'] {
+  color: var(--error-color);
+}
+
+.statusRunning {
+  animation: environment-panel-spin 1s linear infinite;
+}
+
+@keyframes environment-panel-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/packages/web-shell/client/components/panels/EnvironmentPanel.test.tsx b/packages/web-shell/client/components/panels/EnvironmentPanel.test.tsx
new file mode 100644
index 00000000000..1fc14a4f72b
--- /dev/null
+++ b/packages/web-shell/client/components/panels/EnvironmentPanel.test.tsx
@@ -0,0 +1,532 @@
+// @vitest-environment jsdom
+
+import type { DaemonSessionTaskStatus } from '@qwen-code/sdk/daemon';
+import { act, type ReactNode } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { I18nProvider } from '../../i18n';
+import { EnvironmentPanel } from './EnvironmentPanel';
+
+vi.mock('../BranchPickerPopover', async () => {
+  const { createElement } = await import('react');
+  return {
+    BranchPickerPopover: ({
+      children,
+      open,
+      onOpenChange,
+      side,
+    }: {
+      children: ReactNode;
+      open: boolean;
+      onOpenChange: (open: boolean) => void;
+      side?: string;
+    }) =>
+      createElement(
+        'div',
+        {
+          'data-testid': 'branch-picker',
+          'data-open': open,
+          'data-side': side,
+          onClick: () => onOpenChange(true),
+        },
+        children,
+      ),
+  };
+});
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+let container: HTMLDivElement | null = null;
+let root: Root | null = null;
+
+afterEach(() => {
+  act(() => root?.unmount());
+  container?.remove();
+  container = null;
+  root = null;
+});
+
+function mount(
+  props: Partial<Parameters<typeof EnvironmentPanel>[0]> = {},
+): HTMLDivElement {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+  act(() => {
+    root!.render(
+      <I18nProvider language="en">
+        <EnvironmentPanel
+          workspaceCwd="/work/qwen-code"
+          branch="feat/context-panels"
+          gitStatus={{
+            v: 2,
+            workspaceCwd: '/work/qwen-code',
+            branch: 'feat/context-panels',
+            staged: 1,
+            unstaged: 2,
+            ahead: 1,
+          }}
+          tasks={[]}
+          onOpenGitDiff={vi.fn()}
+          onOpenAgent={vi.fn()}
+          onOpenTask={vi.fn()}
+          {...props}
+        />
+      </I18nProvider>,
+    );
+  });
+  return container;
+}
+
+function toggleSection(view: HTMLElement, label: string): void {
+  const button = Array.from(
+    view.querySelectorAll<HTMLButtonElement>('button[aria-expanded]'),
+  ).find((candidate) => candidate.textContent?.includes(label));
+  act(() => button?.click());
+}
+
+describe('EnvironmentPanel', () => {
+  it('shows supported workspace and Git context', () => {
+    const view = mount();
+
+    expect(view.textContent).toContain('qwen-code');
+    expect(view.textContent).toContain('feat/context-panels');
+    expect(view.textContent).toContain('1 staged');
+    expect(view.textContent).toContain('2 modified');
+    expect(view.textContent).toContain('1 ahead');
+
+    toggleSection(view, 'Environment');
+    expect(view.textContent).not.toContain('qwen-code');
+  });
+
+  it('keeps environment context visible when the working tree has no changes', () => {
+    const view = mount({
+      gitStatus: {
+        v: 2,
+        workspaceCwd: '/work/qwen-code',
+        branch: 'feat/context-panels',
+        staged: 0,
+        unstaged: 0,
+        untracked: 0,
+        conflicted: 0,
+      },
+    });
+
+    expect(view.textContent).toContain('Environment');
+    expect(view.textContent).toContain('Clean');
+    expect(view.textContent).toContain('qwen-code');
+    expect(view.textContent).toContain('feat/context-panels');
+  });
+
+  it('reports unavailable rather than clean when no Git snapshot exists', () => {
+    const view = mount({ gitStatus: undefined });
+
+    expect(view.textContent).toContain('Environment');
+    expect(view.textContent).toContain('Unavailable');
+    expect(view.textContent).not.toContain('Clean');
+  });
+
+  it('opens the branch actions without dismissing a floating panel', () => {
+    const onDismiss = vi.fn();
+    const view = mount({
+      floating: true,
+      gitWorkspaceCwd: '/work/qwen-code',
+      gitCwd: '/work/qwen-code',
+      onOpenGitCommit: vi.fn(),
+      onDismiss,
+    });
+    const picker = view.querySelector('[data-testid="branch-picker"]');
+    const branchButton = Array.from(view.querySelectorAll('button')).find(
+      (button) => button.textContent?.includes('feat/context-panels'),
+    );
+
+    expect(picker?.getAttribute('data-open')).toBe('false');
+    expect(picker?.getAttribute('data-side')).toBe('left');
+    act(() => branchButton?.click());
+    expect(picker?.getAttribute('data-open')).toBe('true');
+
+    act(() => {
+      document.body.dispatchEvent(new Event('pointerdown', { bubbles: true }));
+    });
+    expect(onDismiss).not.toHaveBeenCalled();
+
+    toggleSection(view, 'Environment');
+    toggleSection(view, 'Environment');
+    expect(
+      view
+        .querySelector('[data-testid="branch-picker"]')
+        ?.getAttribute('data-open'),
+    ).toBe('false');
+  });
+
+  it('filters sections through environment-panel items', () => {
+    const view = mount({
+      items: ['subagents'],
+      tasks: [
+        {
+          kind: 'agent',
+          id: 'agent-1',
+          label: 'Explore code',
+          description: 'Inspect the repository',
+          status: 'running',
+          startTime: 1,
+          runtimeMs: 10,
+          isBackgrounded: true,
+        },
+        {
+          kind: 'shell',
+          id: 'shell-1',
+          label: 'Build',
+          description: 'Run build',
+          status: 'running',
+          startTime: 1,
+          runtimeMs: 10,
+          command: 'npm run build',
+          cwd: '/work/qwen-code',
+        },
+      ],
+    });
+
+    expect(view.textContent).toContain('Subagents');
+    expect(view.textContent).not.toContain('Environment');
+    expect(view.textContent).not.toContain('Background tasks');
+  });
+
+  it('dismisses a floating panel when clicking outside', () => {
+    const onDismiss = vi.fn();
+    const view = mount({ floating: true, onDismiss });
+
+    act(() => {
+      document.body.dispatchEvent(new Event('pointerdown', { bubbles: true }));
+    });
+    expect(onDismiss).toHaveBeenCalledOnce();
+
+    act(() => {
+      view
+        .querySelector<HTMLButtonElement>('button[aria-expanded]')
+        ?.dispatchEvent(new Event('pointerdown', { bubbles: true }));
+    });
+    expect(onDismiss).toHaveBeenCalledOnce();
+  });
+
+  it('lets the header toggle close a floating panel without dismissing first', () => {
+    const onDismiss = vi.fn();
+    mount({ floating: true, onDismiss });
+    const toggle = document.createElement('button');
+    toggle.dataset.webShellEnvironmentToggle = '';
+    document.body.appendChild(toggle);
+
+    act(() => {
+      toggle.dispatchEvent(new Event('pointerdown', { bubbles: true }));
+    });
+
+    expect(onDismiss).not.toHaveBeenCalled();
+    toggle.remove();
+  });
+
+  it('shows agent, shell, and monitor task activity', () => {
+    const tasks: DaemonSessionTaskStatus[] = [
+      {
+        kind: 'agent',
+        id: 'agent-1',
+        label: 'Explore code',
+        description: 'Inspect the repository',
+        status: 'completed',
+        startTime: 1,
+        runtimeMs: 10,
+        isBackgrounded: true,
+        toolUseId: 'tool-agent-1',
+      },
+      {
+        kind: 'shell',
+        id: 'shell-1',
+        label: 'Build',
+        description: 'Run build',
+        status: 'failed',
+        startTime: 1,
+        runtimeMs: 10,
+        command: 'npm run build',
+        cwd: '/work/qwen-code',
+      },
+      {
+        kind: 'monitor',
+        id: 'monitor-1',
+        label: 'Watch server',
+        description: 'Development server',
+        status: 'running',
+        startTime: 1,
+        runtimeMs: 10,
+        command: 'npm run dev',
+        eventCount: 0,
+        lastEventTime: 1,
+        droppedLines: 0,
+      },
+      {
+        kind: 'shell',
+        id: 'shell-2',
+        label: 'Sleep',
+        description: 'Wait',
+        status: 'cancelled',
+        startTime: 1,
+        runtimeMs: 10,
+        command: 'sleep 300',
+        cwd: '/work/qwen-code',
+      },
+    ];
+    const view = mount({ tasks });
+
+    expect(view.querySelectorAll('button[aria-expanded="false"]')).toHaveLength(
+      2,
+    );
+    expect(view.textContent).not.toContain('Explore code');
+
+    toggleSection(view, 'Subagents');
+    toggleSection(view, 'Background tasks');
+
+    expect(
+      view.querySelectorAll('button[aria-expanded="true"] svg'),
+    ).toHaveLength(0);
+    expect(view.textContent).toContain('Explore code');
+    expect(view.textContent).toContain('npm run build');
+    expect(view.textContent).toContain('Development server');
+    const agentItem = Array.from(view.querySelectorAll('ul button')).find(
+      (button) => button.textContent?.includes('Explore code'),
+    );
+    expect(agentItem?.firstElementChild?.querySelector('svg')).toBeNull();
+    expect(
+      agentItem?.querySelector(
+        '[data-status="completed"] svg.lucide-circle-check',
+      ),
+    ).not.toBeNull();
+    const completedItem = Array.from(view.querySelectorAll('ul button')).find(
+      (button) => button.textContent?.includes('npm run build'),
+    );
+    expect(
+      completedItem?.querySelector('svg.lucide-square-terminal'),
+    ).not.toBeNull();
+    expect(
+      completedItem?.querySelector('[title="npm run build"]'),
+    ).not.toBeNull();
+    expect(
+      completedItem?.querySelector(
+        '[data-status="failed"] svg.lucide-circle-x',
+      ),
+    ).not.toBeNull();
+    const monitorItem = Array.from(view.querySelectorAll('ul button')).find(
+      (button) => button.textContent?.includes('Development server'),
+    );
+    expect(
+      monitorItem?.querySelector('svg.lucide-square-activity'),
+    ).not.toBeNull();
+    expect(
+      monitorItem?.querySelector(
+        '[data-status="running"] svg.lucide-loader-circle',
+      ),
+    ).not.toBeNull();
+    const cancelledItem = Array.from(view.querySelectorAll('ul button')).find(
+      (button) => button.textContent?.includes('sleep 300'),
+    );
+    expect(
+      cancelledItem?.querySelector(
+        '[data-status="cancelled"] svg.lucide-circle-stop',
+      ),
+    ).not.toBeNull();
+  });
+
+  it('opens an out-of-band fork without a tool call id', () => {
+    const onOpenAgent = vi.fn();
+    const task = {
+      kind: 'agent' as const,
+      id: 'fork-agent-1',
+      label: 'fork: Review current changes',
+      description: 'Review current changes',
+      subagentType: 'fork',
+      color: 'purple',
+      status: 'running' as const,
+      startTime: 1,
+      runtimeMs: 10,
+      isBackgrounded: true,
+    };
+    const view = mount({ tasks: [task], onOpenAgent });
+
+    toggleSection(view, 'Subagents');
+    const item = Array.from(
+      view.querySelectorAll<HTMLButtonElement>('ul button'),
+    ).find((button) => button.textContent?.includes('Review current changes'));
+
+    expect(item?.disabled).toBe(false);
+    expect(item?.textContent).not.toContain('fork:');
+    expect(item?.querySelector('span')?.textContent).toContain('fork');
+    expect(item?.querySelector('[data-agent-color]')).toBeNull();
+    act(() => item?.click());
+    expect(onOpenAgent).toHaveBeenCalledWith(task);
+  });
+
+  it('shows the configured subagent color as a leading dot', () => {
+    const view = mount({
+      agentTasks: [
+        {
+          kind: 'agent',
+          id: 'agent-1',
+          label: 'Review code',
+          description: 'Review code',
+          color: 'purple',
+          status: 'completed',
+          startTime: 1,
+          runtimeMs: 10,
+          isBackgrounded: false,
+        },
+      ],
+    });
+
+    toggleSection(view, 'Subagents');
+
+    const color = view.querySelector<HTMLElement>(
+      '[data-agent-color="purple"]',
+    );
+    expect(color).not.toBeNull();
+    expect(color?.style.backgroundColor).not.toBe('');
+    expect(view.textContent).toContain('Review code');
+  });
+
+  it('shows a gray dot when the subagent has no configured color', () => {
+    const view = mount({
+      agentTasks: [
+        {
+          kind: 'agent',
+          id: 'agent-1',
+          label: 'Review code',
+          description: 'Review code',
+          status: 'completed',
+          startTime: 1,
+          runtimeMs: 10,
+          isBackgrounded: false,
+        },
+      ],
+    });
+
+    toggleSection(view, 'Subagents');
+
+    const color = view.querySelector<HTMLElement>(
+      '[data-agent-color="default"]',
+    );
+    expect(color).not.toBeNull();
+    expect(color?.style.backgroundColor).toBe('var(--muted-foreground)');
+  });
+
+  it('shows transcript agents when the live tasks snapshot is empty', () => {
+    const agentTasks: DaemonSessionTaskStatus[] = [
+      {
+        kind: 'agent',
+        id: 'tool-agent-1',
+        label: 'Explore code',
+        description: 'Inspect the repository',
+        status: 'completed',
+        startTime: 1,
+        endTime: 2,
+        runtimeMs: 1,
+        isBackgrounded: false,
+        toolUseId: 'tool-agent-1',
+      },
+    ];
+    const view = mount({
+      tasks: [],
+      agentTasks: agentTasks.filter((task) => task.kind === 'agent'),
+    });
+
+    toggleSection(view, 'Subagents');
+
+    expect(view.textContent).toContain('Explore code');
+    expect(view.textContent).toContain('Completed');
+  });
+
+  it('numbers agents that have no usable name', () => {
+    const agentTasks: DaemonSessionTaskStatus[] = [
+      {
+        kind: 'agent',
+        id: 'agent-1',
+        label: 'Agent',
+        description: '',
+        status: 'running',
+        startTime: 1,
+        runtimeMs: 10,
+        isBackgrounded: true,
+        toolUseId: 'tool-agent-1',
+      },
+      {
+        kind: 'agent',
+        id: 'agent-2',
+        label: '',
+        description: '',
+        status: 'running',
+        startTime: 1,
+        runtimeMs: 10,
+        isBackgrounded: true,
+        toolUseId: 'tool-agent-2',
+      },
+    ];
+    const view = mount({
+      tasks: [],
+      agentTasks: agentTasks.filter((task) => task.kind === 'agent'),
+    });
+
+    toggleSection(view, 'Subagents');
+
+    expect(view.textContent).toContain('Agent (1)');
+    expect(view.textContent).toContain('Agent (2)');
+  });
+
+  it('opens the existing environment actions', () => {
+    const onOpenGitDiff = vi.fn();
+    const onOpenAgent = vi.fn();
+    const onOpenTask = vi.fn();
+    const tasks: DaemonSessionTaskStatus[] = [
+      {
+        kind: 'agent',
+        id: 'agent-1',
+        label: 'Explore code',
+        description: 'Inspect the repository',
+        status: 'running',
+        startTime: 1,
+        runtimeMs: 10,
+        isBackgrounded: true,
+        toolUseId: 'tool-agent-1',
+      },
+      {
+        kind: 'shell',
+        id: 'shell-1',
+        label: 'Build',
+        description: 'Run build',
+        status: 'running',
+        startTime: 1,
+        runtimeMs: 10,
+        command: 'npm run build',
+        cwd: '/work/qwen-code',
+      },
+    ];
+    const view = mount({
+      tasks,
+      onOpenGitDiff,
+      onOpenAgent,
+      onOpenTask,
+    });
+
+    act(() => {
+      for (const button of view.querySelectorAll<HTMLButtonElement>(
+        'button[aria-expanded="false"]',
+      )) {
+        button.click();
+      }
+    });
+    act(() => {
+      for (const button of view.querySelectorAll<HTMLButtonElement>(
+        'ul button',
+      )) {
+        button.click();
+      }
+    });
+
+    expect(onOpenAgent).toHaveBeenCalledOnce();
+    expect(onOpenTask).toHaveBeenCalledOnce();
+  });
+});
diff --git a/packages/web-shell/client/components/panels/EnvironmentPanel.tsx b/packages/web-shell/client/components/panels/EnvironmentPanel.tsx
new file mode 100644
index 00000000000..794b716e819
--- /dev/null
+++ b/packages/web-shell/client/components/panels/EnvironmentPanel.tsx
@@ -0,0 +1,380 @@
+import { useEffect, useRef, useState } from 'react';
+import type {
+  DaemonSessionAgentTaskStatus,
+  DaemonSessionTaskStatus,
+  DaemonWorkspaceGitStatus,
+} from '@qwen-code/sdk/daemon';
+import {
+  BotIcon,
+  ChevronRightIcon,
+  CircleCheckIcon,
+  CircleStopIcon,
+  CircleXIcon,
+  FileDiffIcon,
+  FolderClosedIcon,
+  GitBranchIcon,
+  LoaderCircleIcon,
+  SquareActivityIcon,
+  SquareTerminalIcon,
+} from 'lucide-react';
+import type { WebShellEnvironmentPanelItem } from '../../customization';
+import { useI18n } from '../../i18n';
+import { BranchPickerPopover } from '../BranchPickerPopover';
+import styles from './EnvironmentPanel.module.css';
+
+interface EnvironmentPanelProps {
+  floating?: boolean;
+  hidden?: boolean;
+  workspaceCwd?: string;
+  gitWorkspaceCwd?: string;
+  gitCwd?: string;
+  branch?: string;
+  gitStatus?: DaemonWorkspaceGitStatus;
+  tasks: readonly DaemonSessionTaskStatus[];
+  agentTasks?: readonly EnvironmentAgentTask[];
+  items?: readonly WebShellEnvironmentPanelItem[];
+  onOpenGitDiff?: () => void;
+  onOpenGitCommit?: () => void;
+  onOpenAgent?: (task: DaemonSessionAgentTaskStatus) => void;
+  onOpenTask: (task: DaemonSessionTaskStatus) => void;
+  onDismiss?: () => void;
+}
+
+export type EnvironmentAgentTask = DaemonSessionAgentTaskStatus & {
+  color?: string;
+};
+
+const DEFAULT_ENVIRONMENT_PANEL_ITEMS: readonly WebShellEnvironmentPanelItem[] =
+  ['environment', 'subagents', 'backgroundTasks'];
+const AGENT_COLORS: Readonly<Record<string, string>> = {
+  red: '#e5484d',
+  blue: 'var(--agent-blue-500)',
+  green: 'var(--success-color)',
+  yellow: '#d6a900',
+  purple: 'var(--agent-purple-600)',
+  orange: 'var(--accent-orange)',
+  pink: '#d6409f',
+  cyan: '#0e9888',
+};
+
+function taskLabel(task: DaemonSessionTaskStatus): string {
+  switch (task.kind) {
+    case 'agent':
+      return task.label;
+    case 'shell':
+      return task.command;
+    case 'monitor':
+      return task.description;
+  }
+}
+
+function taskIcon(task: DaemonSessionTaskStatus) {
+  switch (task.kind) {
+    case 'agent':
+      return <BotIcon />;
+    case 'shell':
+      return <SquareTerminalIcon />;
+    case 'monitor':
+      return <SquareActivityIcon />;
+  }
+}
+
+function taskStatusKey(status: DaemonSessionTaskStatus['status']) {
+  return `tasks.${status}` as const;
+}
+
+function taskStatusIcon(status: DaemonSessionTaskStatus['status']) {
+  if (status === 'completed') return <CircleCheckIcon />;
+  if (status === 'running') {
+    return <LoaderCircleIcon className={styles.statusRunning} />;
+  }
+  if (status === 'failed') return <CircleXIcon />;
+  if (status === 'cancelled') return <CircleStopIcon />;
+  return null;
+}
+
+function isForkAgent(task: EnvironmentAgentTask): boolean {
+  return task.subagentType?.toLowerCase() === 'fork';
+}
+
+function agentDisplayName(task: EnvironmentAgentTask): string {
+  if (!isForkAgent(task)) return task.label;
+  return task.label.replace(/^fork:\s*/i, '').trim();
+}
+
+function agentColorValue(color: string | undefined): string {
+  return (color && AGENT_COLORS[color]) || 'var(--muted-foreground)';
+}
+
+export function EnvironmentPanel({
+  floating = false,
+  hidden = false,
+  workspaceCwd,
+  gitWorkspaceCwd,
+  gitCwd,
+  branch,
+  gitStatus,
+  tasks,
+  agentTasks,
+  items = DEFAULT_ENVIRONMENT_PANEL_ITEMS,
+  onOpenGitDiff,
+  onOpenGitCommit,
+  onOpenAgent,
+  onOpenTask,
+  onDismiss,
+}: EnvironmentPanelProps) {
+  const { t } = useI18n();
+  const panelRef = useRef<HTMLElement | null>(null);
+  const agents: readonly EnvironmentAgentTask[] =
+    agentTasks ??
+    tasks.filter(
+      (task): task is DaemonSessionAgentTaskStatus => task.kind === 'agent',
+    );
+  const backgroundTasks = tasks.filter((task) => task.kind !== 'agent');
+  const [environmentExpanded, setEnvironmentExpanded] = useState(true);
+  const [agentsExpanded, setAgentsExpanded] = useState(false);
+  const [tasksExpanded, setTasksExpanded] = useState(false);
+  const [branchPickerOpen, setBranchPickerOpen] = useState(false);
+  const activeBranch = branch ?? gitStatus?.branch;
+
+  useEffect(() => {
+    if (hidden || !environmentExpanded || !gitWorkspaceCwd || !activeBranch) {
+      setBranchPickerOpen(false);
+    }
+  }, [activeBranch, environmentExpanded, gitWorkspaceCwd, hidden]);
+
+  useEffect(() => {
+    if (!floating || hidden || !onDismiss || branchPickerOpen) return;
+    const dismissOnOutsidePointerDown = (event: PointerEvent) => {
+      if (
+        event
+          .composedPath()
+          .some(
+            (target) =>
+              target instanceof Element &&
+              target.hasAttribute('data-web-shell-environment-toggle'),
+          )
+      ) {
+        return;
+      }
+      if (
+        event.target instanceof Node &&
+        !panelRef.current?.contains(event.target)
+      ) {
+        onDismiss();
+      }
+    };
+    document.addEventListener('pointerdown', dismissOnOutsidePointerDown);
+    return () =>
+      document.removeEventListener('pointerdown', dismissOnOutsidePointerDown);
+  }, [branchPickerOpen, floating, hidden, onDismiss]);
+
+  const gitDetails = [
+    gitStatus?.operation
+      ? t(`git.operation.${gitStatus.operation}`)
+      : undefined,
+    gitStatus?.detached ? t('git.detached') : undefined,
+    gitStatus?.staged
+      ? t('git.staged', { count: gitStatus.staged })
+      : undefined,
+    gitStatus?.unstaged
+      ? t('git.unstaged', { count: gitStatus.unstaged })
+      : undefined,
+    gitStatus?.untracked
+      ? t('git.untracked', { count: gitStatus.untracked })
+      : undefined,
+    gitStatus?.conflicted
+      ? t('git.conflicted', { count: gitStatus.conflicted })
+      : undefined,
+    gitStatus?.ahead ? t('git.ahead', { count: gitStatus.ahead }) : undefined,
+    gitStatus?.behind
+      ? t('git.behind', { count: gitStatus.behind })
+      : undefined,
+    gitStatus?.stashCount
+      ? t('git.stash', { count: gitStatus.stashCount })
+      : undefined,
+  ].filter((detail): detail is string => Boolean(detail));
+
+  return (
+    <aside
+      ref={panelRef}
+      className={`${styles.panel} ${floating ? styles.floating : ''}`}
+      aria-label={t('environment.title')}
+      data-testid="environment-panel"
+      data-floating={floating}
+      hidden={hidden}
+    >
+      {items.includes('environment') && (
+        <section className={styles.section}>
+          <button
+            type="button"
+            className={styles.sectionHeader}
+            aria-expanded={environmentExpanded}
+            onClick={() => setEnvironmentExpanded((expanded) => !expanded)}
+          >
+            <span>{t('environment.title')}</span>
+            {!environmentExpanded && <ChevronRightIcon />}
+          </button>
+          {environmentExpanded && (
+            <div className={styles.sectionContent}>
+              <button
+                type="button"
+                className={styles.row}
+                disabled={!onOpenGitDiff}
+                onClick={onOpenGitDiff}
+              >
+                <FileDiffIcon />
+                <span>{t('environment.changes')}</span>
+                <span className={styles.value}>
+                  {gitStatus === undefined
+                    ? t('environment.unavailable')
+                    : gitDetails.length > 0
+                      ? gitDetails.join(' · ')
+                      : t('environment.clean')}
+                </span>
+              </button>
+              <div className={styles.row} title={workspaceCwd}>
+                <FolderClosedIcon className={styles.workspaceIcon} />
+                <span>{t('environment.workspace')}</span>
+                <span className={styles.value}>
+                  {workspaceCwd?.split(/[/\\]/).filter(Boolean).at(-1) ??
+                    t('environment.unavailable')}
+                </span>
+              </div>
+              {gitWorkspaceCwd && activeBranch ? (
+                <BranchPickerPopover
+                  open={branchPickerOpen}
+                  onOpenChange={setBranchPickerOpen}
+                  workspaceCwd={gitWorkspaceCwd}
+                  gitCwd={gitCwd}
+                  side="left"
+                  onOpenDiff={onOpenGitDiff}
+                  onOpenCommit={onOpenGitCommit}
+                >
+                  <button
+                    type="button"
+                    className={styles.row}
+                    title={activeBranch}
+                  >
+                    <GitBranchIcon />
+                    <span className={styles.branchName}>{activeBranch}</span>
+                    <ChevronRightIcon className={styles.rowActionIcon} />
+                  </button>
+                </BranchPickerPopover>
+              ) : (
+                <div className={styles.row} title={activeBranch ?? undefined}>
+                  <GitBranchIcon />
+                  <span className={styles.branchName}>
+                    {activeBranch ?? t('environment.unavailable')}
+                  </span>
+                </div>
+              )}
+            </div>
+          )}
+        </section>
+      )}
+
+      {items.includes('subagents') && agents.length > 0 && (
+        <section className={styles.section}>
+          <button
+            type="button"
+            className={styles.sectionHeader}
+            aria-expanded={agentsExpanded}
+            onClick={() => setAgentsExpanded((expanded) => !expanded)}
+          >
+            <span>{t('environment.agents')}</span>
+            {!agentsExpanded && <ChevronRightIcon />}
+          </button>
+          {agentsExpanded && (
+            <ul className={styles.tasks}>
+              {agents.map((task, index) => (
+                <li key={task.id}>
+                  <button
+                    type="button"
+                    className={styles.task}
+                    disabled={!onOpenAgent}
+                    onClick={() => onOpenAgent?.(task)}
+                  >
+                    <span className={styles.taskLabel}>
+                      {!isForkAgent(task) && (
+                        <span
+                          className={styles.agentColor}
+                          data-agent-color={task.color ?? 'default'}
+                          style={{
+                            backgroundColor: agentColorValue(task.color),
+                          }}
+                          aria-hidden="true"
+                        />
+                      )}
+                      {isForkAgent(task) && (
+                        <span className={styles.agentTag}>fork</span>
+                      )}
+                      <span className={styles.agentName}>
+                        {(() => {
+                          const name = agentDisplayName(task).trim();
+                          return name && name.toLowerCase() !== 'agent'
+                            ? name
+                            : t('environment.unnamedAgent', {
+                                index: index + 1,
+                              });
+                        })()}
+                      </span>
+                    </span>
+                    <span
+                      className={styles.taskStatus}
+                      data-status={task.status}
+                    >
+                      {taskStatusIcon(task.status)}
+                      {t(taskStatusKey(task.status))}
+                    </span>
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+        </section>
+      )}
+
+      {items.includes('backgroundTasks') && backgroundTasks.length > 0 && (
+        <section className={styles.section}>
+          <button
+            type="button"
+            className={styles.sectionHeader}
+            aria-expanded={tasksExpanded}
+            onClick={() => setTasksExpanded((expanded) => !expanded)}
+          >
+            <span>{t('tasks.title')}</span>
+            {!tasksExpanded && <ChevronRightIcon />}
+          </button>
+          {tasksExpanded && (
+            <ul className={styles.tasks}>
+              {backgroundTasks.map((task) => (
+                <li key={`${task.kind}:${task.id}`}>
+                  <button
+                    type="button"
+                    className={styles.task}
+                    onClick={() => onOpenTask(task)}
+                  >
+                    <span className={styles.taskIcon}>{taskIcon(task)}</span>
+                    <span className={styles.taskLabel}>
+                      <span className={styles.taskName} title={taskLabel(task)}>
+                        {taskLabel(task)}
+                      </span>
+                    </span>
+                    <span
+                      className={styles.taskStatus}
+                      data-status={task.status}
+                    >
+                      {taskStatusIcon(task.status)}
+                      {t(taskStatusKey(task.status))}
+                    </span>
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+        </section>
+      )}
+    </aside>
+  );
+}
diff --git a/packages/web-shell/client/components/sidebar/WebShellSidebar.tsx b/packages/web-shell/client/components/sidebar/WebShellSidebar.tsx
index 06d2b72eaf6..a84bd1baa7d 100644
--- a/packages/web-shell/client/components/sidebar/WebShellSidebar.tsx
+++ b/packages/web-shell/client/components/sidebar/WebShellSidebar.tsx
@@ -92,6 +92,7 @@ import {
 import {
   SESSION_LIST_PAGE_SIZE,
   SESSION_ORGANIZATION_FEATURE,
+  WEB_SHELL_SESSION_SOURCE_TYPE,
 } from '../../constants/sessions';
 import styles from './WebShellSidebar.module.css';
 
@@ -563,6 +564,9 @@ export function WebShellSidebar({
   const organizationEnabled = Boolean(
     connection.capabilities?.features?.includes(SESSION_ORGANIZATION_FEATURE),
   );
+  const sourceMetadataEnabled = Boolean(
+    connection.capabilities?.features?.includes('session_source_metadata'),
+  );
   const sessionArchiveEnabled = Boolean(
     connection.capabilities?.features?.includes('session_archive'),
   );
@@ -604,6 +608,9 @@ export function WebShellSidebar({
     enabled: includePrimaryWorkspaceSessions,
     pageSize: SESSION_LIST_PAGE_SIZE,
     archiveState: 'active',
+    ...(sourceMetadataEnabled
+      ? { sourceType: WEB_SHELL_SESSION_SOURCE_TYPE }
+      : {}),
     ...(organizationEnabled
       ? { view: 'organized' as const, group: 'all' }
       : {}),
@@ -624,6 +631,9 @@ export function WebShellSidebar({
       enabled: organizationEnabled && includePrimaryWorkspaceSessions,
       pageSize: SESSION_LIST_PAGE_SIZE,
       archiveState: 'active',
+      ...(sourceMetadataEnabled
+        ? { sourceType: WEB_SHELL_SESSION_SOURCE_TYPE }
+        : {}),
       view: 'organized',
       group: 'pinned',
     });
@@ -647,6 +657,9 @@ export function WebShellSidebar({
       includePrimaryWorkspaceSessions,
     pageSize: SESSION_LIST_PAGE_SIZE,
     archiveState: 'archived',
+    ...(sourceMetadataEnabled
+      ? { sourceType: WEB_SHELL_SESSION_SOURCE_TYPE }
+      : {}),
     ...(organizationEnabled
       ? { view: 'organized' as const, group: 'all' }
       : {}),
@@ -1053,6 +1066,9 @@ export function WebShellSidebar({
           .listWorkspaceSessions({
             pageSize: SESSION_LIST_PAGE_SIZE,
             archiveState: 'active',
+            ...(sourceMetadataEnabled
+              ? { sourceType: WEB_SHELL_SESSION_SOURCE_TYPE }
+              : {}),
             view: 'organized',
             group: 'pinned',
           });
@@ -1075,6 +1091,7 @@ export function WebShellSidebar({
   }, [
     displayedWorkspaces,
     organizationEnabled,
+    sourceMetadataEnabled,
     workspace.client,
     workspaceSessionsReloadToken,
   ]);
@@ -1126,6 +1143,9 @@ export function WebShellSidebar({
           .listWorkspaceSessions({
             pageSize: SESSION_LIST_PAGE_SIZE,
             archiveState: 'archived',
+            ...(sourceMetadataEnabled
+              ? { sourceType: WEB_SHELL_SESSION_SOURCE_TYPE }
+              : {}),
             ...(organizationEnabled
               ? { view: 'organized' as const, group: 'all' }
               : {}),
@@ -1166,6 +1186,7 @@ export function WebShellSidebar({
     organizationEnabled,
     secondaryArchivedReloadToken,
     sessionArchiveEnabled,
+    sourceMetadataEnabled,
     workspace.client,
     workspaceQualifiedRestCoreEnabled,
     workspaceSessionsReloadToken,
@@ -4175,6 +4196,7 @@ export function WebShellSidebar({
                             noSessionsLabel={t('sidebar.noSessions')}
                             loadErrorLabel={t('sidebar.loadFailed')}
                             organizationEnabled={organizationEnabled}
+                            sourceMetadataEnabled={sourceMetadataEnabled}
                             ungroupedLabel={t('sidebar.groupUngrouped')}
                             onRenameGroup={
                               canOrganizeWorkspace(ws.cwd)
diff --git a/packages/web-shell/client/components/sidebar/WebShellSidebar.workspace-removal.test.tsx b/packages/web-shell/client/components/sidebar/WebShellSidebar.workspace-removal.test.tsx
index 65e21473372..429c77e3306 100644
--- a/packages/web-shell/client/components/sidebar/WebShellSidebar.workspace-removal.test.tsx
+++ b/packages/web-shell/client/components/sidebar/WebShellSidebar.workspace-removal.test.tsx
@@ -57,8 +57,9 @@ const {
   const exportSession = vi.fn();
   const active = makeSessions();
   const archived = makeSessions();
-  const useSessions = vi.fn((options?: { archiveState?: string }) =>
-    options?.archiveState === 'archived' ? archived : active,
+  const useSessions = vi.fn(
+    (options?: { archiveState?: string; sourceType?: string }) =>
+      options?.archiveState === 'archived' ? archived : active,
   );
   const exportArchivedSession = vi.fn();
   const sessionActions = { renameSession: vi.fn() };
@@ -150,6 +151,7 @@ const capabilities = {
     'workspace_runtime_removal',
     'session_archive',
     'workspace_qualified_rest_core',
+    'session_source_metadata',
   ],
   workspaces: [
     {
@@ -525,7 +527,11 @@ describe('WebShellSidebar workspace removal', () => {
       isArchived: true,
     });
     const listSecondarySessions = vi.fn(
-      async (options?: { archiveState?: string; group?: string }) => {
+      async (options?: {
+        archiveState?: string;
+        group?: string;
+        sourceType?: string;
+      }) => {
         if (options?.group === 'pinned') {
           return [
             {
@@ -585,12 +591,12 @@ describe('WebShellSidebar workspace removal', () => {
     expect(container.textContent).not.toContain('Primary archived');
     expect(
       useSessions.mock.calls.every(
-        ([options]) => !Object.hasOwn(options ?? {}, 'sourceType'),
+        ([options]) => options?.sourceType === 'default',
       ),
     ).toBe(true);
     expect(
       listSecondarySessions.mock.calls.every(
-        ([options]) => !Object.hasOwn(options ?? {}, 'sourceType'),
+        ([options]) => options?.sourceType === 'default',
       ),
     ).toBe(true);
   });
diff --git a/packages/web-shell/client/components/sidebar/WorkspaceSection.tsx b/packages/web-shell/client/components/sidebar/WorkspaceSection.tsx
index a05b3be0ffa..cf78062db78 100644
--- a/packages/web-shell/client/components/sidebar/WorkspaceSection.tsx
+++ b/packages/web-shell/client/components/sidebar/WorkspaceSection.tsx
@@ -17,7 +17,10 @@ import { FolderClosedIcon, FolderOpenIcon } from 'lucide-react';
 import { GitBranchIndicator } from '../GitBranchIndicator';
 import { BranchPickerPopover } from '../BranchPickerPopover';
 import { useI18n } from '../../i18n';
-import { SESSION_LIST_PAGE_SIZE } from '../../constants/sessions';
+import {
+  SESSION_LIST_PAGE_SIZE,
+  WEB_SHELL_SESSION_SOURCE_TYPE,
+} from '../../constants/sessions';
 import {
   readWorkspaceCollapsedGroupIds,
   writeWorkspaceCollapsedGroupIds,
@@ -68,6 +71,7 @@ interface WorkspaceSectionProps {
   noSessionsLabel: string;
   loadErrorLabel: string;
   organizationEnabled: boolean;
+  sourceMetadataEnabled?: boolean;
   ungroupedLabel: string;
   formatTime: (iso: string) => string;
   searchQuery?: string;
@@ -109,6 +113,7 @@ export function WorkspaceSection({
   noSessionsLabel,
   loadErrorLabel,
   organizationEnabled,
+  sourceMetadataEnabled = false,
   ungroupedLabel,
   formatTime,
   searchQuery = '',
@@ -167,6 +172,9 @@ export function WorkspaceSection({
         .listWorkspaceSessions({
           pageSize: SESSION_LIST_PAGE_SIZE,
           archiveState: 'active',
+          ...(sourceMetadataEnabled
+            ? { sourceType: WEB_SHELL_SESSION_SOURCE_TYPE }
+            : {}),
           ...(organizationEnabled
             ? { view: 'organized' as const, group: 'all' }
             : {}),
@@ -179,7 +187,13 @@ export function WorkspaceSection({
       console.warn('[WorkspaceSection] session poll failed:', err);
       setLoadError(true);
     }
-  }, [client, disabled, organizationEnabled, workspace.cwd]);
+  }, [
+    client,
+    disabled,
+    organizationEnabled,
+    sourceMetadataEnabled,
+    workspace.cwd,
+  ]);
 
   useEffect(() => {
     if (!renderSessions || disabled || !organizationEnabled) {
diff --git a/packages/web-shell/client/constants/localCommands.test.ts b/packages/web-shell/client/constants/localCommands.test.ts
index 40d2a75ddbc..0b8a2d21605 100644
--- a/packages/web-shell/client/constants/localCommands.test.ts
+++ b/packages/web-shell/client/constants/localCommands.test.ts
@@ -19,6 +19,13 @@ describe('getLocalCommands', () => {
     expect(
       getLocalCommands(en).every((c) => c.source === 'builtin-command'),
     ).toBe(true);
+    expect(byName.get('fork')?.argumentHint).toBe('<directive>');
+    expect(byName.get('btw')?.argumentHint).toBe('<your question>');
+    expect(
+      getLocalCommands(en, { sideTaskAvailable: true }).find(
+        (command) => command.name === 'btw',
+      )?.argumentHint,
+    ).toBe('[side] <your question>');
   });
 });
 
diff --git a/packages/web-shell/client/constants/localCommands.ts b/packages/web-shell/client/constants/localCommands.ts
index b23979cd33c..01baa91ec27 100644
--- a/packages/web-shell/client/constants/localCommands.ts
+++ b/packages/web-shell/client/constants/localCommands.ts
@@ -9,7 +9,10 @@ type Translate = ReturnType<typeof useI18n>['t'];
  * 'interactive' mode only). These are merged with ACP-provided commands,
  * with ACP taking precedence on duplicates.
  */
-export function getLocalCommands(t: Translate): CommandInfo[] {
+export function getLocalCommands(
+  t: Translate,
+  options: { sideTaskAvailable?: boolean } = {},
+): CommandInfo[] {
   const commands: CommandInfo[] = [
     { name: 'help', description: t('local.help') },
     {
@@ -28,7 +31,9 @@ export function getLocalCommands(t: Translate): CommandInfo[] {
     {
       name: 'btw',
       description: t('local.btw'),
-      argumentHint: '<your question>',
+      argumentHint: options.sideTaskAvailable
+        ? '[side] <your question>'
+        : '<your question>',
     },
     {
       name: 'copy',
diff --git a/packages/web-shell/client/constants/sessions.ts b/packages/web-shell/client/constants/sessions.ts
index 7d730991213..0e5bc7d8ec9 100644
--- a/packages/web-shell/client/constants/sessions.ts
+++ b/packages/web-shell/client/constants/sessions.ts
@@ -14,7 +14,9 @@ export const SESSION_TRANSCRIPT_PAGINATION_FEATURE =
   'session_transcript_pagination';
 export const SESSION_MONITOR_TOOL_CORRELATION_FEATURE =
   'session_monitor_tool_correlation';
+export const SESSION_SIDE_TASK_FEATURE = 'session_side_task';
 export const WEB_SHELL_SESSION_SOURCE_TYPE = 'default';
+export const WEB_SHELL_SIDE_TASK_SOURCE_TYPE = 'side_task';
 export const WEB_SHELL_HISTORY_PAGE_SIZE = 100;
 export const WEB_SHELL_TRANSCRIPT_RELOAD_BLOCKS = 500;
 
diff --git a/packages/web-shell/client/customization.tsx b/packages/web-shell/client/customization.tsx
index 082921a1a35..ce7b2c85b8b 100644
--- a/packages/web-shell/client/customization.tsx
+++ b/packages/web-shell/client/customization.tsx
@@ -115,6 +115,30 @@ export type ToolHeaderExtraRenderer = (
 export type WelcomeHeaderRenderer = (props: WelcomeHeaderProps) => ReactNode;
 export type WelcomeFooterRenderer = (props: WelcomeHeaderProps) => ReactNode;
 
+export type WebShellChatHeaderItem = 'title' | 'environment' | 'rightPanel';
+
+export interface WebShellChatHeaderOptions {
+  /** Built-in header actions to show. Defaults to all actions. */
+  items?: readonly WebShellChatHeaderItem[];
+}
+
+export type WebShellRightPanelItem = 'review' | 'sideTask';
+
+export interface WebShellRightPanelOptions {
+  /** Empty-state actions to show. Defaults to all actions. */
+  items?: readonly WebShellRightPanelItem[];
+}
+
+export type WebShellEnvironmentPanelItem =
+  | 'environment'
+  | 'subagents'
+  | 'backgroundTasks';
+
+export interface WebShellEnvironmentPanelOptions {
+  /** Sections to show. Defaults to all sections. */
+  items?: readonly WebShellEnvironmentPanelItem[];
+}
+
 /** Context passed to the chat header renderer. */
 export interface ChatHeaderRenderInfo {
   /** Current session id, if connected. */
@@ -123,11 +147,21 @@ export interface ChatHeaderRenderInfo {
   sessionName?: string;
   /** Workspace cwd for the current session. */
   workspaceCwd?: string;
+  /** Header actions enabled by the host. */
+  items: readonly WebShellChatHeaderItem[];
+  /** Whether the environment panel is currently open. */
+  environmentPanelOpen: boolean;
+  /** Whether the right extension panel is currently open. */
+  rightPanelOpen: boolean;
+  /** Opens or closes the environment panel. */
+  onEnvironmentPanelOpenChange: (open: boolean) => void;
+  /** Opens or closes the right extension panel. */
+  onRightPanelOpenChange: (open: boolean) => void;
 }
 
 /**
- * Custom renderer shown at the top of the chat view, above the message list.
- * Only rendered when a session is active (not in the welcome/empty state).
+ * Replaces the complete persistent chat header. Only rendered when a session
+ * is active (not in the welcome/empty state).
  */
 export type ChatHeaderRenderer = (info: ChatHeaderRenderInfo) => ReactNode;
 
diff --git a/packages/web-shell/client/hooks/useBackgroundTasks.test.tsx b/packages/web-shell/client/hooks/useBackgroundTasks.test.tsx
index b9bf34d3a57..7ae4027177e 100644
--- a/packages/web-shell/client/hooks/useBackgroundTasks.test.tsx
+++ b/packages/web-shell/client/hooks/useBackgroundTasks.test.tsx
@@ -34,6 +34,8 @@ vi.mock('@qwen-code/webui/daemon-react-sdk', () => ({
 let root: Root | null = null;
 let container: HTMLDivElement | null = null;
 let sessionId: string | undefined = 'session-a';
+let taskActivityKey = 'monitor:running';
+let refreshTrigger = 0;
 let latestTasks: DaemonSessionTaskStatus[] = [];
 
 function deferred<T>(): Deferred<T> {
@@ -76,7 +78,12 @@ function monitor(
 }
 
 function Harness() {
-  latestTasks = useBackgroundTasks(sessionId, 'monitor:running', true);
+  latestTasks = useBackgroundTasks(
+    sessionId,
+    taskActivityKey,
+    true,
+    refreshTrigger,
+  );
   return null;
 }
 
@@ -98,6 +105,8 @@ async function rerenderHarness() {
 beforeEach(() => {
   vi.useFakeTimers();
   sessionId = 'session-a';
+  taskActivityKey = 'monitor:running';
+  refreshTrigger = 0;
   latestTasks = [];
   sdkMock.actions.getTasks.mockReset();
 });
@@ -115,6 +124,71 @@ afterEach(async () => {
 });
 
 describe('useBackgroundTasks', () => {
+  it('keeps polling after a transient task refresh failure', async () => {
+    const runningMonitor = monitor('monitor-a', 'running');
+    sdkMock.actions.getTasks
+      .mockRejectedValueOnce(new Error('temporary failure'))
+      .mockResolvedValue(snapshot('session-a', [runningMonitor]));
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => undefined);
+
+    await renderHarness();
+    expect(sdkMock.actions.getTasks).toHaveBeenCalledTimes(1);
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(3000);
+    });
+
+    expect(sdkMock.actions.getTasks).toHaveBeenCalledTimes(2);
+    expect(latestTasks).toEqual([runningMonitor]);
+    warn.mockRestore();
+  });
+
+  it('stops polling when the session is disconnected', async () => {
+    sdkMock.actions.getTasks.mockRejectedValue(
+      new Error('Get tasks failed: Daemon session is not connected'),
+    );
+
+    await renderHarness();
+    expect(sdkMock.actions.getTasks).toHaveBeenCalledTimes(1);
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(6000);
+    });
+
+    expect(sdkMock.actions.getTasks).toHaveBeenCalledTimes(1);
+  });
+
+  it('starts polling when an out-of-band task triggers a refresh', async () => {
+    taskActivityKey = '';
+    const runningFork = {
+      kind: 'agent' as const,
+      id: 'fork-agent-1',
+      label: 'Review current changes',
+      description: 'Review current changes',
+      status: 'running' as const,
+      startTime: Date.now(),
+      runtimeMs: 1,
+      isBackgrounded: true,
+    };
+    sdkMock.actions.getTasks.mockResolvedValue(
+      snapshot('session-a', [runningFork]),
+    );
+
+    await renderHarness();
+    expect(sdkMock.actions.getTasks).not.toHaveBeenCalled();
+
+    refreshTrigger = 1;
+    await rerenderHarness();
+
+    expect(sdkMock.actions.getTasks).toHaveBeenCalledTimes(1);
+    expect(latestTasks).toEqual([runningFork]);
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(3000);
+    });
+    expect(sdkMock.actions.getTasks).toHaveBeenCalledTimes(2);
+  });
+
   it('ignores an old response and starts polling the new session immediately', async () => {
     const sessionA = deferred<DaemonSessionTasksStatus>();
     const sessionB = deferred<DaemonSessionTasksStatus>();
diff --git a/packages/web-shell/client/hooks/useBackgroundTasks.ts b/packages/web-shell/client/hooks/useBackgroundTasks.ts
index eb64c8fadd2..15e9f8a1555 100644
--- a/packages/web-shell/client/hooks/useBackgroundTasks.ts
+++ b/packages/web-shell/client/hooks/useBackgroundTasks.ts
@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 import type { DaemonSessionTaskStatus } from '@qwen-code/sdk/daemon';
 import { useActions } from '@qwen-code/webui/daemon-react-sdk';
 import { TASKS_STATUS_ACTIVE_EVENT } from '../components/messages/TasksStatusMessage';
-import { isComposerTask } from '../utils/composerTasks';
+import { isSessionDisconnectedError } from '../utils/sessionErrors';
 
 const TASKS_POLL_INTERVAL_MS = 3000;
 const MAX_EMPTY_TASK_POLLS = 2;
@@ -60,9 +60,8 @@ export function useBackgroundTasks(
         .getTasks()
         .then((snapshot) => {
           if (disposed || snapshot.sessionId !== sessionId) return;
-          const composerTasks = snapshot.tasks.filter(isComposerTask);
-          setTasks(composerTasks);
-          if (composerTasks.length === 0) {
+          setTasks(snapshot.tasks);
+          if (snapshot.tasks.length === 0) {
             emptyPollsRef.current += 1;
             if (emptyPollsRef.current >= MAX_EMPTY_TASK_POLLS) {
               setPollingActive(false);
@@ -70,12 +69,16 @@ export function useBackgroundTasks(
             return;
           }
           emptyPollsRef.current = 0;
-          if (!hasActiveTask(composerTasks)) {
+          if (!hasActiveTask(snapshot.tasks)) {
             setPollingActive(false);
           }
         })
         .catch((error: unknown) => {
           if (disposed) return;
+          if (isSessionDisconnectedError(error)) {
+            setPollingActive(false);
+            return;
+          }
           console.warn('[web-shell] failed to refresh tasks:', error);
         })
         .finally(() => {
diff --git a/packages/web-shell/client/i18n.tsx b/packages/web-shell/client/i18n.tsx
index b37fce11e23..4a9a465b721 100644
--- a/packages/web-shell/client/i18n.tsx
+++ b/packages/web-shell/client/i18n.tsx
@@ -1038,6 +1038,16 @@ const EN: Messages = {
   'turnOutputs.filesEdited': (v) => `Edited ${v?.count ?? 0} files`,
   'turnOutputs.viewChanges': 'View changes',
   'turnOutputs.review': 'Review',
+  'turnOutputs.reviewLatest': 'View recent file changes',
+  'sideTask.title': 'Side task',
+  'sideTask.description': 'View or create side tasks',
+  'sideTask.new': 'New',
+  'sideTask.create': 'New side task',
+  'rightPanel.add': 'Add panel',
+  'sideTask.creating': 'Creating side task…',
+  'sideTask.createFailed': 'Failed to create side task',
+  'sideTask.promptFailed': 'Failed to send the side-task question',
+  'sideTask.renameFailed': 'Failed to name side task',
   'turnOutputs.preview': 'Preview',
   'turnOutputs.collapseFiles': 'Collapse files',
   'turnOutputs.showMoreFiles': (v) => `Show ${v?.count ?? 0} more files`,
@@ -1420,6 +1430,8 @@ const EN: Messages = {
   'local.btw':
     'Ask a quick side question without affecting the main conversation. Usage: /btw <your question>',
   'btw.empty': 'Please provide a question. Usage: /btw <your question>',
+  'btw.side.empty':
+    'Please provide a question. Usage: /btw side <your question>',
   'btw.emptyAnswer': 'No response received.',
   'btw.failed': 'Failed to answer btw question',
   'btw.answering': '+ Answering...',
@@ -2134,6 +2146,18 @@ const EN: Messages = {
   'todo.stepFraction': (v) => `${v?.current ?? 0} / ${v?.total ?? 0}`,
   'todo.title': 'Current tasks',
   'chat.scrollToBottom': 'Scroll to bottom',
+  'chatHeader.toggleEnvironment': 'Toggle environment information',
+  'chatHeader.toggleRightPanel': 'Toggle right panel',
+  'environment.title': 'Environment',
+  'environment.changes': 'Changes',
+  'environment.changeCount': (v) => `${v?.count ?? 0} changed`,
+  'environment.clean': 'Clean',
+  'environment.workspace': 'Workspace',
+  'environment.branch': 'Branch',
+  'environment.history': 'Commit history',
+  'environment.agents': 'Subagents',
+  'environment.unnamedAgent': (v) => `Agent (${v?.index ?? 0})`,
+  'environment.unavailable': 'Unavailable',
   'userMessage.showMore': 'Show more',
   'userMessage.showLess': 'Collapse',
   'userMessage.sendFailed': 'Failed to send',
@@ -3526,6 +3550,16 @@ const ZH: Messages = {
   'turnOutputs.filesEdited': (v) => `已编辑 ${v?.count ?? 0} 个文件`,
   'turnOutputs.viewChanges': '查看更改',
   'turnOutputs.review': '审核',
+  'turnOutputs.reviewLatest': '查看最近文件修改',
+  'sideTask.title': '侧边任务',
+  'sideTask.description': '查看或新增侧边任务',
+  'sideTask.new': '新增',
+  'sideTask.create': '新建侧边任务',
+  'rightPanel.add': '添加页签',
+  'sideTask.creating': '正在创建侧边任务…',
+  'sideTask.createFailed': '创建侧边任务失败',
+  'sideTask.promptFailed': '发送侧边任务问题失败',
+  'sideTask.renameFailed': '侧边任务命名失败',
   'turnOutputs.preview': '预览',
   'turnOutputs.collapseFiles': '收起文件',
   'turnOutputs.showMoreFiles': (v) => `再展示 ${v?.count ?? 0} 个文件`,
@@ -3877,6 +3911,7 @@ const ZH: Messages = {
   'auth.advanced.contextPlaceholder': '上下文窗口（可选）',
   'local.btw': '快速问一个不影响主对话的侧边问题。用法：/btw <your question>',
   'btw.empty': '请提供一个问题。用法：/btw <你的问题>',
+  'btw.side.empty': '请提供一个问题。用法：/btw side <你的问题>',
   'btw.emptyAnswer': '未收到回答。',
   'btw.failed': '回答 btw 问题失败',
   'btw.answering': '+ 正在回答...',
@@ -4541,6 +4576,18 @@ const ZH: Messages = {
   'todo.stepFraction': (v) => `${v?.current ?? 0} / ${v?.total ?? 0}`,
   'todo.title': '当前任务',
   'chat.scrollToBottom': '回到底部',
+  'chatHeader.toggleEnvironment': '切换环境信息',
+  'chatHeader.toggleRightPanel': '切换右侧扩展区',
+  'environment.title': '环境信息',
+  'environment.changes': '变更',
+  'environment.changeCount': (v) => `${v?.count ?? 0} 项变更`,
+  'environment.clean': '无变更',
+  'environment.workspace': '工作区',
+  'environment.branch': '分支',
+  'environment.history': '提交历史',
+  'environment.agents': '子智能体',
+  'environment.unnamedAgent': (v) => `智能体（${v?.index ?? 0}）`,
+  'environment.unavailable': '不可用',
   'userMessage.showMore': '显示更多',
   'userMessage.showLess': '收起',
   'userMessage.sendFailed': '发送失败',
diff --git a/packages/web-shell/client/index.tsx b/packages/web-shell/client/index.tsx
index c3b672cafea..4ffd92fe0d4 100644
--- a/packages/web-shell/client/index.tsx
+++ b/packages/web-shell/client/index.tsx
@@ -195,6 +195,12 @@ export type {
   WelcomeHeaderRenderer,
   ChatHeaderRenderer,
   ChatHeaderRenderInfo,
+  WebShellChatHeaderItem,
+  WebShellChatHeaderOptions,
+  WebShellRightPanelItem,
+  WebShellRightPanelOptions,
+  WebShellEnvironmentPanelItem,
+  WebShellEnvironmentPanelOptions,
   WebShellFooterRenderInfo,
   FooterRenderer,
   LoadingPhrasesResolver,
diff --git a/packages/web-shell/client/main.tsx b/packages/web-shell/client/main.tsx
index 32d65bd6cd9..aa26c3a4406 100644
--- a/packages/web-shell/client/main.tsx
+++ b/packages/web-shell/client/main.tsx
@@ -167,6 +167,15 @@ function StandaloneApp({ daemonToken }: { daemonToken?: string }) {
             onLanguageChange: handleLanguageChange,
             onSessionIdChange: handleSessionIdChange,
             sidebar: true,
+            header: {
+              items: ['title', 'environment', 'rightPanel'],
+            },
+            rightPanel: {
+              items: ['review', 'sideTask'],
+            },
+            environmentPanel: {
+              items: ['environment', 'subagents', 'backgroundTasks'],
+            },
             compactThinking: true,
             markdownTableMode: 'advanced',
           }}
diff --git a/packages/web-shell/client/utils/sessionErrors.test.ts b/packages/web-shell/client/utils/sessionErrors.test.ts
new file mode 100644
index 00000000000..fce0d4261e7
--- /dev/null
+++ b/packages/web-shell/client/utils/sessionErrors.test.ts
@@ -0,0 +1,18 @@
+import { describe, expect, it } from 'vitest';
+import { isSessionDisconnectedError } from './sessionErrors';
+
+describe('isSessionDisconnectedError', () => {
+  it('matches direct and wrapped disconnected-session errors', () => {
+    expect(
+      isSessionDisconnectedError(new Error('Daemon session is not connected')),
+    ).toBe(true);
+    expect(
+      isSessionDisconnectedError(
+        new Error('Get tasks failed: Daemon session is not connected'),
+      ),
+    ).toBe(true);
+    expect(isSessionDisconnectedError(new Error('Get tasks timed out'))).toBe(
+      false,
+    );
+  });
+});
diff --git a/packages/web-shell/client/utils/sessionErrors.ts b/packages/web-shell/client/utils/sessionErrors.ts
new file mode 100644
index 00000000000..ddf4efc6aba
--- /dev/null
+++ b/packages/web-shell/client/utils/sessionErrors.ts
@@ -0,0 +1,6 @@
+export function isSessionDisconnectedError(error: unknown): boolean {
+  return (
+    error instanceof Error &&
+    error.message.endsWith('Daemon session is not connected')
+  );
+}
diff --git a/packages/webui/src/daemon/session/DaemonSessionProvider.subagent.test.ts b/packages/webui/src/daemon/session/DaemonSessionProvider.subagent.test.ts
index 72d452e715c..0dc6a5228e5 100644
--- a/packages/webui/src/daemon/session/DaemonSessionProvider.subagent.test.ts
+++ b/packages/webui/src/daemon/session/DaemonSessionProvider.subagent.test.ts
@@ -16,6 +16,7 @@ describe('on-demand subagent transcript projection', () => {
         },
         rawOutput: {
           type: 'task_execution',
+          subagentColor: 'red',
           status: 'completed',
           terminateReason: 'max_turns',
           result: 'large result',
@@ -57,6 +58,7 @@ describe('on-demand subagent transcript projection', () => {
       rawInput: { subagent_type: 'explore' },
       rawOutput: {
         type: 'task_execution',
+        subagentColor: 'red',
         status: 'completed',
         terminateReason: 'max_turns',
         executionSummary: {
diff --git a/packages/webui/src/daemon/session/DaemonSessionProvider.tsx b/packages/webui/src/daemon/session/DaemonSessionProvider.tsx
index 3d8d48797f4..9624a7f5d3e 100644
--- a/packages/webui/src/daemon/session/DaemonSessionProvider.tsx
+++ b/packages/webui/src/daemon/session/DaemonSessionProvider.tsx
@@ -256,6 +256,7 @@ function projectSubagentToolUpdate(
   const prompt = boundedString(rawInput?.['prompt'], 240);
   const description = boundedString(rawInput?.['description'], 240);
   const subagentName = boundedString(rawOutput?.['subagentName'], 120);
+  const subagentColor = boundedString(rawOutput?.['subagentColor'], 80);
   const taskDescription = boundedString(rawOutput?.['taskDescription'], 240);
   const status = boundedString(rawOutput?.['status'], 80);
   const terminateReason = boundedString(rawOutput?.['terminateReason'], 240);
@@ -275,6 +276,7 @@ function projectSubagentToolUpdate(
           ? { type: 'task_execution' }
           : {}),
         ...(subagentName ? { subagentName } : {}),
+        ...(subagentColor ? { subagentColor } : {}),
         ...(taskDescription ? { taskDescription } : {}),
         ...(status ? { status } : {}),
         ...(terminateReason ? { terminateReason } : {}),
diff --git a/packages/webui/src/daemon/session/actions.test.ts b/packages/webui/src/daemon/session/actions.test.ts
index ca1b0097697..394d56e295e 100644
--- a/packages/webui/src/daemon/session/actions.test.ts
+++ b/packages/webui/src/daemon/session/actions.test.ts
@@ -518,6 +518,16 @@ describe('createDaemonSessionActions', () => {
     );
   });
 
+  it('rejects getTasks silently when no session exists', async () => {
+    const addNotice = vi.fn();
+    const { actions } = createActionsHarness({ addNotice });
+
+    await expect(actions.getTasks()).rejects.toThrow(
+      'Daemon session is not connected',
+    );
+    expect(addNotice).not.toHaveBeenCalled();
+  });
+
   it('aborts active prompts and rejects pending session loads when clearing', async () => {
     const controller = new AbortController();
     const session = createMockSession('session-a');
diff --git a/packages/webui/src/daemon/session/actions.ts b/packages/webui/src/daemon/session/actions.ts
index 6a609428d4c..77ca19c1c20 100644
--- a/packages/webui/src/daemon/session/actions.ts
+++ b/packages/webui/src/daemon/session/actions.ts
@@ -1127,15 +1127,17 @@ export function createDaemonSessionActions({
     },
 
     async getTasks() {
-      const session = requireSessionForAction(
-        addNotice,
-        sessionRef.current,
-        'Get tasks failed',
-        'load_tasks',
-      );
+      const session = sessionRef.current;
+      if (!session) throw new Error('Daemon session is not connected');
       try {
         return await withActionTimeout(session.tasks(), 'Get tasks timed out');
       } catch (error) {
+        if (
+          error instanceof Error &&
+          error.message === 'Daemon session is not connected'
+        ) {
+          throw error;
+        }
         throw dispatchActionError(
           addNotice,
           'Get tasks failed',