diff --git a/.qwen/skills/triage/references/pr-workflow.md b/.qwen/skills/triage/references/pr-workflow.md
index de61460cf83..82a9a01f9bb 100644
--- a/.qwen/skills/triage/references/pr-workflow.md
+++ b/.qwen/skills/triage/references/pr-workflow.md
@@ -363,6 +363,7 @@ gh pr review "$PR_NUMBER" --repo "$REPO" --request-changes --body "Needs some re
 ```
 
 Genuinely unsure, or `GUARD` blocked approval — **don't approve or reject**, but **never defer silently**. Post an explicit defer comment that:
+
 1. States you are escalating to the maintainer.
 2. Names the specific reason(s) for uncertainty — what you cannot resolve from the diff, tests, and PR description.
 3. @mentions the maintainer (use `$QWEN_MAINTAINER_HANDLE` if set, or the most recent human reviewer).
diff --git a/package-lock.json b/package-lock.json
index b57fad68398..cca4ce4962c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -901,6 +901,19 @@
         "crelt": "^1.0.5"
       }
     },
+    "node_modules/@codemirror/merge": {
+      "version": "6.12.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/merge/-/merge-6.12.2.tgz",
+      "integrity": "sha512-V8JvyAPjHbPupqP7BeMcsdsYCbyPij74jxIbaIJDORI+VZzW44zFmon8bF+oxGWvOKhcRmkiUMXd8MxHr3YA2w==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/highlight": "^1.0.0",
+        "style-mod": "^4.1.0"
+      }
+    },
     "node_modules/@codemirror/search": {
       "version": "6.7.0",
       "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.7.0.tgz",
@@ -27366,6 +27379,7 @@
         "@codemirror/autocomplete": "^6.18.0",
         "@codemirror/commands": "^6.7.0",
         "@codemirror/language": "^6.10.0",
+        "@codemirror/merge": "^6.12.2",
         "@codemirror/state": "^6.5.0",
         "@codemirror/view": "^6.35.0",
         "@tanstack/react-virtual": "^3.13.26",
diff --git a/packages/sdk-typescript/src/daemon/ui/normalizer.ts b/packages/sdk-typescript/src/daemon/ui/normalizer.ts
index 306253346b9..5344e939515 100644
--- a/packages/sdk-typescript/src/daemon/ui/normalizer.ts
+++ b/packages/sdk-typescript/src/daemon/ui/normalizer.ts
@@ -9,6 +9,7 @@ import type {
   DaemonAuthProviderId,
   DaemonErrorKind,
   DaemonEvent,
+  DaemonSessionArtifactChange,
 } from '../types.js';
 import { DAEMON_ERROR_KINDS } from '../types.js';
 import type {
@@ -299,6 +300,9 @@ export function normalizeDaemonEvent(
     case 'extensions_changed':
       return normalizeExtensionsChanged(event, base);
 
+    case 'artifact_changed':
+      return normalizeArtifactChanged(event, base);
+
     // ── Auth device-flow events (RFC 8628) ─────────────────
     case 'auth_device_flow_started':
       return normalizeAuthDeviceFlowStarted(event, base);
@@ -1126,6 +1130,30 @@ function normalizeSessionMetadataUpdated(
   ];
 }
 
+function normalizeArtifactChanged(
+  event: DaemonEvent,
+  base: NormalizedEventBase,
+): DaemonUiEvent[] {
+  const sessionId = getString(event.data, 'sessionId');
+  const change = isRecord(event.data) ? event.data['change'] : undefined;
+  if (!sessionId || !isRecord(change)) {
+    return fallbackDebug(event, base, 'malformed artifact_changed payload');
+  }
+  const action = getString(change, 'action');
+  const artifactId = getString(change, 'artifactId');
+  if (!action || !artifactId) {
+    return fallbackDebug(event, base, 'missing action or artifactId');
+  }
+  return [
+    {
+      ...base,
+      type: 'session.artifact.changed',
+      sessionId,
+      change: change as unknown as DaemonSessionArtifactChange,
+    },
+  ];
+}
+
 function normalizeApprovalModeChanged(
   event: DaemonEvent,
   base: NormalizedEventBase,
diff --git a/packages/sdk-typescript/src/daemon/ui/terminal.ts b/packages/sdk-typescript/src/daemon/ui/terminal.ts
index 619d7a21389..a12fdd325c5 100644
--- a/packages/sdk-typescript/src/daemon/ui/terminal.ts
+++ b/packages/sdk-typescript/src/daemon/ui/terminal.ts
@@ -58,6 +58,12 @@ export function daemonUiEventToTerminalText(event: DaemonUiEvent): string {
         `metadata: ${event.displayName ?? '(no display name)'}`,
         '36',
       );
+    case 'session.artifact.changed':
+      return terminalLine(
+        'artifact',
+        `${event.change.action} ${event.change.artifact?.title ?? event.change.artifactId}`,
+        '36',
+      );
     case 'session.approval_mode.changed':
       return terminalLine(
         'approval-mode',
diff --git a/packages/sdk-typescript/src/daemon/ui/transcript.ts b/packages/sdk-typescript/src/daemon/ui/transcript.ts
index bdc8ac1a639..a1ec377ddb2 100644
--- a/packages/sdk-typescript/src/daemon/ui/transcript.ts
+++ b/packages/sdk-typescript/src/daemon/ui/transcript.ts
@@ -293,6 +293,7 @@ function applyDaemonTranscriptEvent(
       next.approvalMode = event.next;
       break;
     case 'session.metadata.changed':
+    case 'session.artifact.changed':
     case 'session.available_commands':
       // Intentional no-op against `blocks[]`.
       break;
diff --git a/packages/sdk-typescript/src/daemon/ui/types.ts b/packages/sdk-typescript/src/daemon/ui/types.ts
index 0b7be648165..7cd59c90ce8 100644
--- a/packages/sdk-typescript/src/daemon/ui/types.ts
+++ b/packages/sdk-typescript/src/daemon/ui/types.ts
@@ -9,6 +9,7 @@ import type {
   DaemonAuthProviderId,
   DaemonEvent,
   DaemonErrorKind,
+  DaemonSessionArtifactChange,
   PermissionResponse,
 } from '../types.js';
 
@@ -34,6 +35,7 @@ export type DaemonUiEventType =
   | 'debug'
   // Session-meta events
   | 'session.metadata.changed'
+  | 'session.artifact.changed'
   | 'session.approval_mode.changed'
   | 'session.available_commands'
   | 'session.state_resync_required'
@@ -281,6 +283,12 @@ export interface DaemonUiSessionMetadataChangedEvent extends DaemonUiEventBase {
   displayName?: string;
 }
 
+export interface DaemonUiSessionArtifactChangedEvent extends DaemonUiEventBase {
+  type: 'session.artifact.changed';
+  sessionId: string;
+  change: DaemonSessionArtifactChange;
+}
+
 export interface DaemonUiSessionApprovalModeChangedEvent
   extends DaemonUiEventBase {
   type: 'session.approval_mode.changed';
@@ -556,6 +564,7 @@ export type DaemonUiEvent =
   | DaemonUiErrorEvent
   // Session-meta events
   | DaemonUiSessionMetadataChangedEvent
+  | DaemonUiSessionArtifactChangedEvent
   | DaemonUiSessionApprovalModeChangedEvent
   | DaemonUiSessionAvailableCommandsEvent
   | DaemonUiStateResyncRequiredEvent
diff --git a/packages/sdk-typescript/test/unit/daemonUi.test.ts b/packages/sdk-typescript/test/unit/daemonUi.test.ts
index 868c3485b4b..bd2bd38c3e3 100644
--- a/packages/sdk-typescript/test/unit/daemonUi.test.ts
+++ b/packages/sdk-typescript/test/unit/daemonUi.test.ts
@@ -6651,6 +6651,71 @@ describe('parallel subAgent text interleaving — normalizer', () => {
   });
 });
 
+describe('daemon UI normalizer — artifact events', () => {
+  it('normalizes artifact_changed as a structured session event', () => {
+    const events = normalizeDaemonEvent({
+      type: 'artifact_changed',
+      data: {
+        sessionId: 'session-1',
+        change: {
+          action: 'updated',
+          artifactId: 'artifact-1',
+          artifact: {
+            id: 'artifact-1',
+            title: 'Report',
+            kind: 'html',
+            storage: 'workspace',
+            source: 'tool',
+            status: 'available',
+          },
+        },
+      },
+    } as never);
+
+    expect(events).toEqual([
+      expect.objectContaining({
+        type: 'session.artifact.changed',
+        sessionId: 'session-1',
+        change: expect.objectContaining({
+          action: 'updated',
+          artifactId: 'artifact-1',
+        }),
+      }),
+    ]);
+  });
+
+  it('falls back to debug for malformed artifact_changed payloads', () => {
+    const events = normalizeDaemonEvent({
+      type: 'artifact_changed',
+      data: { sessionId: 'session-1' },
+    } as never);
+
+    expect(events).toEqual([
+      expect.objectContaining({
+        type: 'debug',
+        text: 'artifact_changed: malformed artifact_changed payload',
+      }),
+    ]);
+  });
+
+  it('falls back to debug when artifact_changed change misses required fields', () => {
+    const events = normalizeDaemonEvent({
+      type: 'artifact_changed',
+      data: {
+        sessionId: 'session-1',
+        change: {},
+      },
+    } as never);
+
+    expect(events).toEqual([
+      expect.objectContaining({
+        type: 'debug',
+        text: 'artifact_changed: missing action or artifactId',
+      }),
+    ]);
+  });
+});
+
 describe('parallel subAgent text interleaving fix', () => {
   it('T1: separates text chunks by parentToolCallId into independent blocks', () => {
     let state = createDaemonTranscriptState({ now: 1 });
diff --git a/packages/web-shell/client/App.module.css b/packages/web-shell/client/App.module.css
index bfd31780b18..da026217514 100644
--- a/packages/web-shell/client/App.module.css
+++ b/packages/web-shell/client/App.module.css
@@ -61,6 +61,23 @@
   overflow: hidden;
 }
 
+.artifactResizeHandle {
+  flex: 0 0 8px;
+  width: 8px;
+  margin-left: -4px;
+  cursor: col-resize;
+  position: relative;
+  z-index: 2;
+  touch-action: none;
+}
+
+.artifactResizeHandle::after {
+  content: '';
+  position: absolute;
+  inset: 0 3px;
+  background: transparent;
+}
+
 /* Positioning context so the scheduled-tasks page (position:absolute) covers
    exactly the chat pane. Only applied while the page is shown, so normal chat
    layout is untouched. */
@@ -176,6 +193,12 @@
   height: 20px;
 }
 
+@media (max-width: 900px) {
+  .artifactResizeHandle {
+    display: none;
+  }
+}
+
 @media (max-width: 760px) {
   .mobileDrawer {
     display: block;
diff --git a/packages/web-shell/client/App.test.tsx b/packages/web-shell/client/App.test.tsx
index 2b36f5201e7..16fd3955ba2 100644
--- a/packages/web-shell/client/App.test.tsx
+++ b/packages/web-shell/client/App.test.tsx
@@ -82,6 +82,7 @@ const {
       forkSession: vi.fn().mockResolvedValue({ launched: false }),
       sendShellCommand: vi.fn().mockResolvedValue(undefined),
       getStats: vi.fn().mockResolvedValue({}),
+      loadArtifacts: vi.fn().mockResolvedValue({ artifacts: [] }),
       loadSession: vi.fn().mockResolvedValue(undefined),
     },
     mockWorkspaceActions: {
@@ -137,6 +138,7 @@ vi.mock('@qwen-code/webui/daemon-react-sdk', () => ({
     onDismissFollowup: mockFollowup.onDismissFollowup,
   }),
   useSessionNotices: () => ({ notices: [], dismissNotice: vi.fn() }),
+  usePromptStatus: () => 'idle',
   useSettings: () => ({
     settings: [],
     setValue: vi.fn().mockResolvedValue(undefined),
@@ -147,7 +149,10 @@ vi.mock('@qwen-code/webui/daemon-react-sdk', () => ({
   useTranscriptBlocks: () => testState.blocks,
   useTranscriptStore: () => mockStore,
   useWorkspaceActions: () => mockWorkspaceActions,
-  useWorkspaceEventSignals: () => ({ extensionsVersion: 0 }),
+  useWorkspaceEventSignals: () => ({
+    artifactsVersion: 0,
+    extensionsVersion: 0,
+  }),
 }));
 
 vi.mock('@qwen-code/sdk/daemon', async (importOriginal) => ({
@@ -367,8 +372,33 @@ vi.doMock('./components/SplitView', async () => {
       onExit?: () => void;
       sessionIds?: string[];
       onPanesChange?: (ids: string[]) => void;
-    }) =>
-      React.createElement(
+      onPaneArtifactsChange?: (
+        sessionId: string,
+        artifacts: unknown[],
+        workspaceActions: unknown,
+      ) => void;
+      onRightPanelOpen?: (request: unknown) => void;
+    }) => {
+      const paneActions = {
+        readWorkspaceFile: vi.fn().mockResolvedValue('<p>pane</p>'),
+      };
+      const artifact = {
+        id: 'pane-artifact',
+        kind: 'report',
+        storage: 'memory',
+        source: 'tool',
+        status: 'available',
+        title: 'Pane artifact',
+        updatedAt: '2026-07-10T00:00:00Z',
+        sizeBytes: 10,
+      };
+      const updatedArtifact = {
+        ...artifact,
+        title: 'Updated pane artifact',
+        updatedAt: '2026-07-10T00:01:00Z',
+        sizeBytes: 20,
+      };
+      return React.createElement(
         'div',
         { 'data-testid': 'split-view-mock' },
         // Surface the seed so a test can assert the App preserved / restored it.
@@ -387,6 +417,63 @@ vi.doMock('./components/SplitView', async () => {
           },
           'report',
         ),
+        React.createElement(
+          'button',
+          {
+            'data-testid': 'split-report-artifact',
+            type: 'button',
+            onClick: () =>
+              props.onPaneArtifactsChange?.(
+                'pane-session',
+                [artifact],
+                paneActions,
+              ),
+          },
+          'artifact',
+        ),
+        React.createElement(
+          'button',
+          {
+            'data-testid': 'split-report-updated-artifact',
+            type: 'button',
+            onClick: () =>
+              props.onPaneArtifactsChange?.(
+                'pane-session',
+                [updatedArtifact],
+                paneActions,
+              ),
+          },
+          'updated artifact',
+        ),
+        React.createElement(
+          'button',
+          {
+            'data-testid': 'split-clear-artifacts',
+            type: 'button',
+            onClick: () =>
+              props.onPaneArtifactsChange?.('pane-session', [], paneActions),
+          },
+          'clear artifacts',
+        ),
+        React.createElement(
+          'button',
+          {
+            'data-testid': 'split-open-artifact',
+            type: 'button',
+            onClick: () =>
+              props.onRightPanelOpen?.({
+                id: 'artifact:pane-artifact:pane-session',
+                kind: 'artifact',
+                title: artifact.title,
+                turnId: 'turn-1',
+                artifactId: artifact.id,
+                artifact,
+                workspaceActions: paneActions,
+                previewContent: '<p>stale</p>',
+              }),
+          },
+          'open artifact',
+        ),
         React.createElement(
           'button',
           {
@@ -396,7 +483,8 @@ vi.doMock('./components/SplitView', async () => {
           },
           'back',
         ),
-      ),
+      );
+    },
   };
 });
 // Capturing mock: stores the onRunPrompt handler (App's real runTaskManually)
@@ -1451,6 +1539,93 @@ describe('App session callbacks', () => {
     ).toBe('s1,s2,s3');
   });
 
+  it('reconciles split pane artifact snapshots 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-report-artifact"]',
+        )
+        ?.click();
+      await Promise.resolve();
+    });
+    await act(async () => {
+      container
+        .querySelector<HTMLButtonElement>('[data-testid="split-open-artifact"]')
+        ?.click();
+      await Promise.resolve();
+    });
+
+    expect(container.textContent).toContain('Pane artifact');
+    expect(container.textContent).toContain('10 B');
+
+    await act(async () => {
+      container
+        .querySelector<HTMLButtonElement>(
+          '[data-testid="split-report-updated-artifact"]',
+        )
+        ?.click();
+      await Promise.resolve();
+    });
+
+    expect(container.textContent).toContain('20 B');
+
+    await act(async () => {
+      container
+        .querySelector<HTMLButtonElement>(
+          '[data-testid="split-clear-artifacts"]',
+        )
+        ?.click();
+      await Promise.resolve();
+    });
+
+    expect(container.textContent).toContain('Artifact not found.');
+  });
+
+  it('clears split pane artifact snapshots when switching sessions', async () => {
+    const { container, rerender } = 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-report-artifact"]',
+        )
+        ?.click();
+      await Promise.resolve();
+    });
+    await act(async () => {
+      container
+        .querySelector<HTMLButtonElement>('[data-testid="split-open-artifact"]')
+        ?.click();
+      await Promise.resolve();
+    });
+
+    expect(container.textContent).toContain('Pane artifact');
+
+    await act(async () => {
+      mockConnection.sessionId = 'session-2';
+      rerender();
+      await Promise.resolve();
+    });
+
+    expect(container.textContent).not.toContain('Pane artifact');
+  });
+
   it('enters the split view from a ?split= URL and consumes the param', async () => {
     window.history.pushState({}, '', '/?split=s1,s2');
     try {
diff --git a/packages/web-shell/client/App.tsx b/packages/web-shell/client/App.tsx
index 968b2ebfd83..4c86257d11b 100644
--- a/packages/web-shell/client/App.tsx
+++ b/packages/web-shell/client/App.tsx
@@ -7,6 +7,7 @@ import {
   useRef,
   useState,
   type CSSProperties,
+  type PointerEvent as ReactPointerEvent,
   type ReactNode,
 } from 'react';
 import {
@@ -21,6 +22,7 @@ import {
   useTranscriptStore,
   useWorkspaceActions,
   useWorkspaceEventSignals,
+  type DaemonWorkspaceActions,
   type DaemonSessionNotice,
   type DaemonStreamingState,
 } from '@qwen-code/webui/daemon-react-sdk';
@@ -28,6 +30,7 @@ import { isDaemonTurnError } from '@qwen-code/sdk/daemon';
 import type {
   DaemonTranscriptBlock,
   DaemonSessionTaskStatus,
+  DaemonSessionArtifact,
 } from '@qwen-code/sdk/daemon';
 import { extractPendingPermission } from './adapters/transcriptAdapter';
 import { MessageList, type MessageListHandle } from './components/MessageList';
@@ -67,6 +70,22 @@ import { ToolsDialog } from './components/dialogs/ToolsDialog';
 import { DaemonStatusDialog } from './components/dialogs/DaemonStatusDialog';
 import { SessionOverviewPanel } from './components/SessionOverviewPanel';
 import { SplitView } from './components/SplitView';
+import {
+  ArtifactPanel,
+  type ArtifactPanelTab,
+} from './components/artifacts/ArtifactPanel';
+import type {
+  TurnOutputFileChange,
+  TurnOutputKind,
+  TurnOutputOpenRequest,
+  TurnOutputScheduledTask,
+} from './components/artifacts/TurnOutputs';
+import { TURN_OUTPUT_KINDS } from './components/artifacts/TurnOutputs';
+import {
+  getArtifactsByTurn,
+  getFileChangesByTurn,
+  getScheduledTasksByTurn,
+} from './components/artifacts/turnOutputSelectors';
 import { useIsLargeScreen } from './hooks/useIsLargeScreen';
 import { MAX_SPLIT_PANES, parseSplitSessionIds } from './utils/splitUrl';
 import { ScheduledTasksDialog } from './components/dialogs/ScheduledTasksDialog';
@@ -90,6 +109,7 @@ import { mergeCommands } from './hooks/daemonSessionMappers';
 import { useAnimationFrameValue } from './hooks/useAnimationFrameValue';
 import { useBackgroundTasks } from './hooks/useBackgroundTasks';
 import { useMessages } from './hooks/useMessages';
+import { useSessionArtifacts } from './hooks/useSessionArtifacts';
 import { useShallowMemo, useStableArray } from './hooks/useShallowMemo';
 import {
   I18nProvider,
@@ -241,6 +261,23 @@ function TodoContextsProvider({
 
 const MODES_CYCLE = DAEMON_APPROVAL_MODES;
 const MAX_TOASTS = 4;
+const DEFAULT_REVIEW_PANEL_WIDTH = 760;
+const MIN_ARTIFACT_PANEL_WIDTH = 320;
+const MIN_CHAT_PANE_WIDTH_WITH_ARTIFACT_PANEL = 500;
+const MAX_ARTIFACT_PANEL_SESSION_STATES = 20;
+interface ArtifactPanelSessionState {
+  open: boolean;
+  tabs: ArtifactPanelTab[];
+  activeTabId: string | null;
+  reviewChanges: readonly TurnOutputFileChange[];
+  selectedReviewPath: string | null;
+  extraArtifacts: DaemonSessionArtifact[];
+  width: number;
+}
+interface PaneArtifactSnapshot {
+  artifacts: readonly DaemonSessionArtifact[];
+  workspaceActions: DaemonWorkspaceActions;
+}
 // Cap on how long a manual "run now" waits for its bound session to become
 // active before giving up, so the scheduled-tasks UI can't stay stuck disabled
 // if the switch never completes.
@@ -397,6 +434,15 @@ export interface WebShellProps {
   splitSessionIds?: readonly string[];
   /** Called when the split pane list changes from inside WebShell. */
   onSplitSessionIdsChange?: (sessionIds: string[]) => void;
+  /**
+   * Called instead of the built-in right panel open behavior when a user clicks
+   * a turn output such as review changes, an artifact, or a scheduled task.
+   */
+  onRightPanelOpen?: (request: TurnOutputOpenRequest) => void;
+  /**
+   * Controls which turn output cards appear below messages. Defaults to all.
+   */
+  messageTurnOutputs?: readonly TurnOutputKind[];
   /** Imperative handle for externally opening WebShell surfaces. */
   shellRef?: React.Ref<WebShellApi>;
   /** Built-in composer toolbar actions to show. Defaults to all actions. */
@@ -876,6 +922,8 @@ export function App({
   sidebar,
   splitSessionIds: externalSplitSessionIds,
   onSplitSessionIdsChange,
+  onRightPanelOpen,
+  messageTurnOutputs,
   shellRef,
   composerToolbarActions,
   compactThinking = false,
@@ -1071,6 +1119,7 @@ export function App({
   const nextRecapMessageIdRef = useRef(1);
   const nextBtwMessageIdRef = useRef(1);
   const btwAbortControllerRef = useRef<AbortController | null>(null);
+  const chatPaneRef = useRef<HTMLDivElement | null>(null);
   const currentSessionIdRef = useRef(connection.sessionId);
   const lastNotifiedSessionIdRef = useRef<string | undefined>(undefined);
   const lastGoalSessionIdRef = useRef(connection.sessionId);
@@ -1099,6 +1148,502 @@ export function App({
     }
     return filterModelSwitchMessages(result);
   }, [messages, recapMessage]);
+  const {
+    artifacts,
+    loading: artifactsLoading,
+    error: artifactsError,
+  } = useSessionArtifacts();
+  const [artifactPanelExtraArtifacts, setArtifactPanelExtraArtifacts] =
+    useState<DaemonSessionArtifact[]>([]);
+  const [paneArtifactSnapshots, setPaneArtifactSnapshots] = useState<
+    Map<string, PaneArtifactSnapshot>
+  >(() => new Map());
+  const [artifactPanelTabs, setArtifactPanelTabs] = useState<
+    ArtifactPanelTab[]
+  >([]);
+  useEffect(() => {
+    if (artifactPanelExtraArtifacts.length === 0 || artifacts.length === 0) {
+      return;
+    }
+    const artifactIds = new Set(artifacts.map((artifact) => artifact.id));
+    const paneArtifactIds = new Set(
+      artifactPanelTabs
+        .filter((tab) => tab.kind === 'artifact' && tab.workspaceActions)
+        .map((tab) => (tab.kind === 'artifact' ? tab.artifactId : '')),
+    );
+    setArtifactPanelExtraArtifacts((previous) => {
+      const next = previous.filter(
+        (artifact) =>
+          !artifactIds.has(artifact.id) || paneArtifactIds.has(artifact.id),
+      );
+      return next.length === previous.length ? previous : next;
+    });
+  }, [artifacts, artifactPanelExtraArtifacts.length, artifactPanelTabs]);
+  const paneArtifactExtras = useMemo(
+    () =>
+      Array.from(paneArtifactSnapshots.values()).flatMap((snapshot) => [
+        ...snapshot.artifacts,
+      ]),
+    [paneArtifactSnapshots],
+  );
+  const artifactPanelArtifacts = useMemo(() => {
+    if (
+      artifactPanelExtraArtifacts.length === 0 &&
+      paneArtifactExtras.length === 0
+    ) {
+      return artifacts;
+    }
+    const merged = [...artifacts];
+    for (const artifact of [
+      ...artifactPanelExtraArtifacts,
+      ...paneArtifactExtras,
+    ]) {
+      const index = merged.findIndex((item) => item.id === artifact.id);
+      if (index < 0) {
+        merged.push(artifact);
+      }
+    }
+    return merged;
+  }, [artifacts, artifactPanelExtraArtifacts, paneArtifactExtras]);
+  const handlePaneArtifactsChange = useCallback(
+    (
+      paneSessionId: string,
+      paneArtifacts: readonly DaemonSessionArtifact[],
+      paneWorkspaceActions: DaemonWorkspaceActions,
+    ) => {
+      setPaneArtifactSnapshots((current) => {
+        const previous = current.get(paneSessionId);
+        const unchanged =
+          previous?.workspaceActions === paneWorkspaceActions &&
+          previous.artifacts.length === paneArtifacts.length &&
+          previous.artifacts.every((artifact, index) => {
+            const nextArtifact = paneArtifacts[index];
+            return (
+              nextArtifact?.id === artifact.id &&
+              nextArtifact.updatedAt === artifact.updatedAt &&
+              nextArtifact.sizeBytes === artifact.sizeBytes
+            );
+          });
+        if (unchanged) return current;
+        const next = new Map(current);
+        if (paneArtifacts.length === 0) {
+          next.delete(paneSessionId);
+        } else {
+          next.set(paneSessionId, {
+            artifacts: [...paneArtifacts],
+            workspaceActions: paneWorkspaceActions,
+          });
+        }
+        return next;
+      });
+      const artifactIds = new Set(paneArtifacts.map((artifact) => artifact.id));
+      setArtifactPanelTabs((tabs) => {
+        let changed = false;
+        const next = tabs.map((tab) => {
+          if (tab.kind !== 'artifact' || !artifactIds.has(tab.artifactId)) {
+            return tab;
+          }
+          const updated = {
+            id: tab.id,
+            kind: 'artifact' as const,
+            title: tab.title,
+            artifactId: tab.artifactId,
+            workspaceActions: tab.workspaceActions ?? paneWorkspaceActions,
+          };
+          if (tab.previewContent !== undefined) changed = true;
+          if (tab.workspaceActions) return updated;
+          changed = true;
+          return updated;
+        });
+        return changed ? next : tabs;
+      });
+    },
+    [],
+  );
+  const artifactsByTurn = useMemo(
+    () =>
+      getArtifactsByTurn(
+        displayMessages,
+        artifacts,
+        connection.workspaceCwd || '',
+      ),
+    [displayMessages, artifacts, connection.workspaceCwd],
+  );
+  const fileChangesByTurn = useMemo(
+    () =>
+      getFileChangesByTurn(
+        displayMessages,
+        artifactsByTurn,
+        connection.workspaceCwd || '',
+      ),
+    [displayMessages, artifactsByTurn, connection.workspaceCwd],
+  );
+  const scheduledTasksByTurn = useMemo(
+    () => getScheduledTasksByTurn(displayMessages),
+    [displayMessages],
+  );
+  const visibleTurnOutputKinds = useMemo(
+    () => new Set<TurnOutputKind>(messageTurnOutputs ?? TURN_OUTPUT_KINDS),
+    [messageTurnOutputs],
+  );
+  const [artifactPanelOpen, setArtifactPanelOpen] = useState(false);
+  const artifactPanelOpenRef = useRef(artifactPanelOpen);
+  artifactPanelOpenRef.current = artifactPanelOpen;
+  const [activeArtifactPanelTabId, setActiveArtifactPanelTabId] = useState<
+    string | null
+  >(null);
+  const activeArtifactPanelTabIdRef = useRef(activeArtifactPanelTabId);
+  activeArtifactPanelTabIdRef.current = activeArtifactPanelTabId;
+  const [reviewChanges, setReviewChanges] = useState<
+    readonly TurnOutputFileChange[]
+  >([]);
+  const [selectedReviewPath, setSelectedReviewPath] = useState<string | null>(
+    null,
+  );
+  const [artifactPanelWidth, setArtifactPanelWidth] = useState(
+    DEFAULT_REVIEW_PANEL_WIDTH,
+  );
+  const artifactPanelResizeCleanupRef = useRef<(() => void) | null>(null);
+  const artifactPanelSessionStateRef = useRef<ArtifactPanelSessionState | null>(
+    null,
+  );
+  const artifactPanelStateBySessionRef = useRef(
+    new Map<string, ArtifactPanelSessionState>(),
+  );
+  const artifactPanelSessionIdRef = useRef(connection.sessionId);
+  artifactPanelSessionStateRef.current = {
+    open: artifactPanelOpen,
+    tabs: artifactPanelTabs,
+    activeTabId: activeArtifactPanelTabId,
+    reviewChanges,
+    selectedReviewPath,
+    extraArtifacts: artifactPanelExtraArtifacts,
+    width: artifactPanelWidth,
+  };
+  useEffect(() => {
+    const previousSessionId = artifactPanelSessionIdRef.current;
+    if (previousSessionId) {
+      const currentState = artifactPanelSessionStateRef.current;
+      if (currentState) {
+        artifactPanelStateBySessionRef.current.set(
+          previousSessionId,
+          currentState,
+        );
+        if (
+          artifactPanelStateBySessionRef.current.size >
+          MAX_ARTIFACT_PANEL_SESSION_STATES
+        ) {
+          const oldestSessionId = artifactPanelStateBySessionRef.current
+            .keys()
+            .next().value;
+          if (oldestSessionId) {
+            artifactPanelStateBySessionRef.current.delete(oldestSessionId);
+          }
+        }
+      }
+    }
+
+    const nextSessionId = connection.sessionId;
+    artifactPanelSessionIdRef.current = nextSessionId;
+    const savedState = nextSessionId
+      ? artifactPanelStateBySessionRef.current.get(nextSessionId)
+      : undefined;
+    if (!savedState) {
+      setArtifactPanelOpen(false);
+      setArtifactPanelTabs([]);
+      setActiveArtifactPanelTabId(null);
+      setReviewChanges([]);
+      setSelectedReviewPath(null);
+      setArtifactPanelExtraArtifacts([]);
+      setPaneArtifactSnapshots(new Map());
+      setArtifactPanelWidth(DEFAULT_REVIEW_PANEL_WIDTH);
+      return;
+    }
+
+    setArtifactPanelOpen(savedState.open);
+    setArtifactPanelTabs(savedState.tabs);
+    setActiveArtifactPanelTabId(savedState.activeTabId);
+    setReviewChanges(savedState.reviewChanges);
+    setSelectedReviewPath(savedState.selectedReviewPath);
+    setArtifactPanelExtraArtifacts(savedState.extraArtifacts);
+    setPaneArtifactSnapshots(new Map());
+    setArtifactPanelWidth(savedState.width);
+  }, [connection.sessionId]);
+  const getMaxArtifactPanelWidth = useCallback(() => {
+    const chatPaneWidth = chatPaneRef.current?.getBoundingClientRect().width;
+    if (!chatPaneWidth) {
+      return Math.max(
+        MIN_ARTIFACT_PANEL_WIDTH,
+        window.innerWidth - MIN_CHAT_PANE_WIDTH_WITH_ARTIFACT_PANEL,
+      );
+    }
+    return Math.max(
+      MIN_ARTIFACT_PANEL_WIDTH,
+      artifactPanelWidth +
+        chatPaneWidth -
+        MIN_CHAT_PANE_WIDTH_WITH_ARTIFACT_PANEL,
+    );
+  }, [artifactPanelWidth]);
+  const getDefaultReviewPanelWidth = useCallback(() => {
+    const chatPaneWidth =
+      chatPaneRef.current?.getBoundingClientRect().width ?? window.innerWidth;
+    const maxWidth = Math.max(
+      MIN_ARTIFACT_PANEL_WIDTH,
+      chatPaneWidth - MIN_CHAT_PANE_WIDTH_WITH_ARTIFACT_PANEL,
+    );
+    return Math.min(
+      maxWidth,
+      Math.max(DEFAULT_REVIEW_PANEL_WIDTH, Math.round(chatPaneWidth * 0.56)),
+    );
+  }, []);
+  const openArtifactPanel = useCallback(
+    (artifactId: string, previewContent?: string) => {
+      if (!artifactId) return;
+      const artifact = artifactPanelArtifacts.find(
+        (item) => item.id === artifactId,
+      );
+      const tab: ArtifactPanelTab = {
+        id: `artifact:${artifactId}`,
+        kind: 'artifact',
+        artifactId,
+        title: artifact?.title ?? 'Artifact',
+        ...(previewContent !== undefined ? { previewContent } : {}),
+      };
+      setArtifactPanelTabs((tabs) =>
+        tabs.some((item) => item.id === tab.id)
+          ? tabs.map((item) =>
+              item.id === tab.id ? { ...item, ...tab } : item,
+            )
+          : [...tabs, tab],
+      );
+      setActiveArtifactPanelTabId(tab.id);
+      setArtifactPanelWidth((width) =>
+        artifactPanelOpenRef.current ? width : getDefaultReviewPanelWidth(),
+      );
+      setArtifactPanelOpen(true);
+    },
+    [artifactPanelArtifacts, getDefaultReviewPanelWidth],
+  );
+  const openReviewPanel = useCallback(
+    (changes: readonly TurnOutputFileChange[], selectedPath?: string) => {
+      const reviewTab: ArtifactPanelTab = {
+        id: 'review',
+        kind: 'review',
+        title: t('turnOutputs.review'),
+      };
+      setArtifactPanelTabs((tabs) =>
+        tabs.some((item) => item.id === reviewTab.id)
+          ? tabs
+          : [reviewTab, ...tabs],
+      );
+      setActiveArtifactPanelTabId(reviewTab.id);
+      setReviewChanges(changes);
+      setSelectedReviewPath(selectedPath ?? null);
+      setArtifactPanelWidth((width) =>
+        artifactPanelOpenRef.current ? width : getDefaultReviewPanelWidth(),
+      );
+      setArtifactPanelOpen(true);
+    },
+    [getDefaultReviewPanelWidth, t],
+  );
+  const openScheduledTaskPanel = useCallback(
+    (
+      task: TurnOutputScheduledTask,
+      tabWorkspaceActions?: ReturnType<typeof useWorkspaceActions>,
+    ) => {
+      const tab: ArtifactPanelTab = {
+        id: `scheduled-task:${task.toolCallId}`,
+        kind: 'scheduled_task',
+        title: t('scheduledTasks.title'),
+        task,
+        ...(tabWorkspaceActions
+          ? { workspaceActions: tabWorkspaceActions }
+          : {}),
+      };
+      setArtifactPanelTabs((tabs) =>
+        tabs.some((item) => item.id === tab.id)
+          ? tabs.map((item) => (item.id === tab.id ? tab : item))
+          : [...tabs, tab],
+      );
+      setActiveArtifactPanelTabId(tab.id);
+      setArtifactPanelWidth((width) =>
+        artifactPanelOpenRef.current ? width : getDefaultReviewPanelWidth(),
+      );
+      setArtifactPanelOpen(true);
+    },
+    [getDefaultReviewPanelWidth, t],
+  );
+  const handleTurnOutputOpen = useCallback(
+    (request: TurnOutputOpenRequest) => {
+      if (onRightPanelOpen) {
+        onRightPanelOpen(request);
+        return;
+      }
+      if (request.kind === 'review') {
+        openReviewPanel(request.changes, request.selectedPath);
+        return;
+      }
+      if (request.kind === 'scheduled_task') {
+        openScheduledTaskPanel(request.task, request.workspaceActions);
+        return;
+      }
+
+      if (!request.workspaceActions) {
+        setArtifactPanelExtraArtifacts((current) => {
+          const index = current.findIndex(
+            (artifact) => artifact.id === request.artifact.id,
+          );
+          if (index < 0) return [...current, request.artifact];
+          const next = [...current];
+          next[index] = request.artifact;
+          return next;
+        });
+      }
+      const tab: ArtifactPanelTab = {
+        id: request.id,
+        kind: 'artifact',
+        title: request.title,
+        artifactId: request.artifactId,
+        ...(request.workspaceActions
+          ? { workspaceActions: request.workspaceActions }
+          : {}),
+        ...(request.previewContent !== undefined
+          ? { previewContent: request.previewContent }
+          : {}),
+      };
+      setArtifactPanelTabs((tabs) =>
+        tabs.some((item) => item.id === tab.id)
+          ? tabs.map((item) =>
+              item.id === tab.id ? { ...item, ...tab } : item,
+            )
+          : [...tabs, tab],
+      );
+      setActiveArtifactPanelTabId(tab.id);
+      setArtifactPanelWidth((width) =>
+        artifactPanelOpenRef.current ? width : getDefaultReviewPanelWidth(),
+      );
+      setArtifactPanelOpen(true);
+    },
+    [
+      getDefaultReviewPanelWidth,
+      onRightPanelOpen,
+      openReviewPanel,
+      openScheduledTaskPanel,
+    ],
+  );
+  const closeArtifactPanel = useCallback(() => {
+    setArtifactPanelOpen(false);
+    setArtifactPanelTabs([]);
+    setActiveArtifactPanelTabId(null);
+    setReviewChanges([]);
+    setSelectedReviewPath(null);
+    setArtifactPanelExtraArtifacts([]);
+    setPaneArtifactSnapshots(new Map());
+  }, []);
+  useLayoutEffect(() => {
+    if (!artifactPanelOpen) return;
+    const clampWidth = () => {
+      setArtifactPanelWidth((width) => {
+        const chatPaneWidth =
+          chatPaneRef.current?.getBoundingClientRect().width ??
+          window.innerWidth - width;
+        const maxWidth = Math.max(
+          MIN_ARTIFACT_PANEL_WIDTH,
+          width + chatPaneWidth - MIN_CHAT_PANE_WIDTH_WITH_ARTIFACT_PANEL,
+        );
+        return Math.min(width, maxWidth);
+      });
+    };
+    clampWidth();
+    window.addEventListener('resize', clampWidth);
+    const chatPane = chatPaneRef.current;
+    const observer = new ResizeObserver(clampWidth);
+    if (chatPane) observer.observe(chatPane);
+    return () => {
+      window.removeEventListener('resize', clampWidth);
+      observer.disconnect();
+    };
+  }, [artifactPanelOpen]);
+  const closeArtifactPanelTab = useCallback((tabId: string) => {
+    setArtifactPanelTabs((tabs) => {
+      const nextTabs = tabs.filter((tab) => tab.id !== tabId);
+      if (nextTabs.length === 0) {
+        setArtifactPanelOpen(false);
+        setActiveArtifactPanelTabId(null);
+        setReviewChanges([]);
+        setSelectedReviewPath(null);
+        setArtifactPanelExtraArtifacts([]);
+        setPaneArtifactSnapshots(new Map());
+        return nextTabs;
+      }
+      if (activeArtifactPanelTabIdRef.current === tabId) {
+        const closedIndex = tabs.findIndex((tab) => tab.id === tabId);
+        const nextActive =
+          nextTabs[Math.min(closedIndex, nextTabs.length - 1)] ?? nextTabs[0];
+        setActiveArtifactPanelTabId(nextActive.id);
+      }
+      return nextTabs;
+    });
+  }, []);
+  const handleArtifactPanelResizeStart = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      event.preventDefault();
+      const resizeHandle = event.currentTarget;
+      resizeHandle.setPointerCapture(event.pointerId);
+      const startX = event.clientX;
+      const startWidth = artifactPanelWidth;
+      const maxWidth = getMaxArtifactPanelWidth();
+      const previousCursor = document.body.style.cursor;
+      const previousUserSelect = document.body.style.userSelect;
+      let pendingWidth = startWidth;
+      let animationFrame: number | null = null;
+
+      document.body.style.cursor = 'col-resize';
+      document.body.style.userSelect = 'none';
+
+      const flushWidth = () => {
+        animationFrame = null;
+        setArtifactPanelWidth(pendingWidth);
+      };
+
+      const handlePointerMove = (moveEvent: PointerEvent) => {
+        pendingWidth = Math.min(
+          maxWidth,
+          Math.max(
+            MIN_ARTIFACT_PANEL_WIDTH,
+            startWidth - (moveEvent.clientX - startX),
+          ),
+        );
+        if (animationFrame === null) {
+          animationFrame = window.requestAnimationFrame(flushWidth);
+        }
+      };
+      let handlePointerUp: () => void = () => {};
+      const cleanupResize = (commitWidth: boolean) => {
+        artifactPanelResizeCleanupRef.current = null;
+        if (animationFrame !== null) {
+          window.cancelAnimationFrame(animationFrame);
+          animationFrame = null;
+        }
+        if (commitWidth) setArtifactPanelWidth(pendingWidth);
+        if (resizeHandle.hasPointerCapture(event.pointerId)) {
+          resizeHandle.releasePointerCapture(event.pointerId);
+        }
+        document.body.style.cursor = previousCursor;
+        document.body.style.userSelect = previousUserSelect;
+        window.removeEventListener('pointermove', handlePointerMove);
+        window.removeEventListener('pointerup', handlePointerUp);
+        window.removeEventListener('pointercancel', handlePointerUp);
+      };
+      handlePointerUp = () => cleanupResize(true);
+      artifactPanelResizeCleanupRef.current = () => cleanupResize(false);
+      window.addEventListener('pointermove', handlePointerMove);
+      window.addEventListener('pointerup', handlePointerUp);
+      window.addEventListener('pointercancel', handlePointerUp);
+    },
+    [artifactPanelWidth, getMaxArtifactPanelWidth],
+  );
+  useEffect(() => () => artifactPanelResizeCleanupRef.current?.(), []);
   const messageBlocks = useAnimationFrameValue(blocks);
   const rawPendingApproval = useMemo(
     () => extractPendingPermission(messageBlocks),
@@ -4776,6 +5321,7 @@ export function App({
               </div>
             )}
             <div
+              ref={chatPaneRef}
               className={
                 mainView !== 'chat'
                   ? `${styles.chatPane} ${styles.chatPaneShowingPage}`
@@ -4995,6 +5541,9 @@ export function App({
                         // is launched from), not the single-session chat.
                         onExit={handleSplitExit}
                         onError={reportError}
+                        onRightPanelOpen={handleTurnOutputOpen}
+                        onPaneArtifactsChange={handlePaneArtifactsChange}
+                        messageTurnOutputs={messageTurnOutputs}
                       />
                     </CompactModeContext.Provider>
                   </WebShellCustomizationProvider>
@@ -5082,6 +5631,25 @@ export function App({
                               handleCanScrollToBottomChange
                             }
                             virtualScrollThreshold={virtualScrollThreshold}
+                            turnFileChanges={
+                              visibleTurnOutputKinds.has('file')
+                                ? fileChangesByTurn
+                                : undefined
+                            }
+                            turnArtifacts={
+                              visibleTurnOutputKinds.has('artifact')
+                                ? artifactsByTurn
+                                : undefined
+                            }
+                            turnScheduledTasks={
+                              visibleTurnOutputKinds.has('scheduled_task')
+                                ? scheduledTasksByTurn
+                                : undefined
+                            }
+                            onTurnOutputOpen={handleTurnOutputOpen}
+                            onReviewChanges={openReviewPanel}
+                            onOpenArtifact={openArtifactPanel}
+                            onOpenScheduledTask={openScheduledTaskPanel}
                           />
                           {btwMessage?.role === 'btw' && (
                             <div className={styles.btwPanel}>
@@ -5295,6 +5863,33 @@ export function App({
                 </div>
               </div>
             </div>
+            {artifactPanelOpen && (
+              <>
+                <div
+                  className={styles.artifactResizeHandle}
+                  role="separator"
+                  aria-orientation="vertical"
+                  aria-valuemin={MIN_ARTIFACT_PANEL_WIDTH}
+                  aria-valuemax={getMaxArtifactPanelWidth()}
+                  aria-valuenow={artifactPanelWidth}
+                  onPointerDown={handleArtifactPanelResizeStart}
+                />
+                <ArtifactPanel
+                  artifacts={artifactPanelArtifacts}
+                  tabs={artifactPanelTabs}
+                  activeTabId={activeArtifactPanelTabId}
+                  reviewChanges={reviewChanges}
+                  selectedReviewPath={selectedReviewPath}
+                  panelWidth={artifactPanelWidth}
+                  workspaceCwd={connection.workspaceCwd || ''}
+                  loading={artifactsLoading}
+                  error={artifactsError}
+                  onSelectTab={setActiveArtifactPanelTabId}
+                  onCloseTab={closeArtifactPanelTab}
+                  onClose={closeArtifactPanel}
+                />
+              </>
+            )}
           </div>
         </div>
       </I18nProvider>
diff --git a/packages/web-shell/client/components/ChatPane.test.tsx b/packages/web-shell/client/components/ChatPane.test.tsx
index ddfb920e79d..3193cbbdb7c 100644
--- a/packages/web-shell/client/components/ChatPane.test.tsx
+++ b/packages/web-shell/client/components/ChatPane.test.tsx
@@ -30,6 +30,15 @@ const submitPermission = vi.fn(async () => {});
 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 daemonActions = {
+  sendPrompt,
+  submitPermission,
+  cancel,
+  setApprovalMode,
+  setModel,
+  loadArtifacts,
+};
 const enqueuePrompt = vi.fn(() => true);
 const removeQueuedPrompt = vi.fn();
 const insertQueuedPrompt = vi.fn();
@@ -41,13 +50,7 @@ let queuedTextsMock: string[] = [];
 
 vi.mock('@qwen-code/webui/daemon-react-sdk', () => ({
   DAEMON_APPROVAL_MODES: ['default', 'plan', 'auto-edit', 'auto', 'yolo'],
-  useActions: () => ({
-    sendPrompt,
-    submitPermission,
-    cancel,
-    setApprovalMode,
-    setModel,
-  }),
+  useActions: () => daemonActions,
   useConnection: () => connectionState,
   useDaemonFollowupSuggestion: (options: any) => {
     latestFollowupAccept = options?.onAccept;
@@ -63,6 +66,9 @@ vi.mock('@qwen-code/webui/daemon-react-sdk', () => ({
   useTranscriptStore: () => ({
     dispatch: transcriptDispatch,
   }),
+  usePromptStatus: () => 'idle',
+  useWorkspaceActions: () => ({}),
+  useWorkspaceEventSignals: () => ({ artifactsVersion: 0 }),
 }));
 
 vi.mock('../hooks/useQueuedPrompts', () => ({
@@ -218,6 +224,8 @@ beforeEach(() => {
   queuedPromptsMock = [];
   queuedTextsMock = [];
   sendPrompt.mockReset();
+  loadArtifacts.mockReset();
+  loadArtifacts.mockResolvedValue({ artifacts: [] });
   sendPrompt.mockImplementation(async (_text: string, options?: any) => {
     sendPromptAdmit = options?.onAdmitted;
     return {} as any;
@@ -269,6 +277,32 @@ describe('ChatPane', () => {
     expect(container!.textContent).toContain('Refactor core');
   });
 
+  it('reports loaded pane artifacts to the outer panel owner', async () => {
+    const onPaneArtifactsChange = vi.fn();
+    connectionState.capabilities = { features: ['session_artifacts'] };
+    const artifact = {
+      id: 'artifact-1',
+      title: 'Report',
+      kind: 'html',
+      storage: 'workspace',
+      workspacePath: 'reports/a.html',
+      updatedAt: '2026-07-10T00:00:00Z',
+    };
+    loadArtifacts.mockResolvedValueOnce({ artifacts: [artifact] });
+
+    render({ onPaneArtifactsChange });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(onPaneArtifactsChange).toHaveBeenLastCalledWith(
+      'sess-1',
+      [artifact],
+      expect.any(Object),
+    );
+  });
+
   it('suppresses the rotating loading phrase in its compact status', () => {
     render();
     expect(testid('pane-streaming')?.getAttribute('data-show-phrase')).toBe(
diff --git a/packages/web-shell/client/components/ChatPane.tsx b/packages/web-shell/client/components/ChatPane.tsx
index d1a40d562e7..5499d7fce69 100644
--- a/packages/web-shell/client/components/ChatPane.tsx
+++ b/packages/web-shell/client/components/ChatPane.tsx
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { useCallback, useMemo, useRef } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import {
   useActions,
   useConnection,
@@ -12,9 +12,13 @@ import {
   useStreamingState,
   useTranscriptBlocks,
   useTranscriptStore,
+  useWorkspaceActions,
+  type DaemonWorkspaceActions,
 } from '@qwen-code/webui/daemon-react-sdk';
+import type { DaemonSessionArtifact } from '@qwen-code/sdk/daemon';
 import { useI18n } from '../i18n';
 import { useMessages } from '../hooks/useMessages';
+import { useSessionArtifacts } from '../hooks/useSessionArtifacts';
 import { extractPendingPermission } from '../adapters/transcriptAdapter';
 import type { PromptImage } from '../adapters/promptTypes';
 import type {
@@ -38,6 +42,16 @@ import { ChatEditor, type ComposerToolbarAction } from './ChatEditor';
 import { QueuedPromptDisplay } from './QueuedPromptDisplay';
 import { ToolApproval } from './messages/ToolApproval';
 import { AskUserQuestion } from './messages/AskUserQuestion';
+import type {
+  TurnOutputKind,
+  TurnOutputOpenRequest,
+} from './artifacts/TurnOutputs';
+import { TURN_OUTPUT_KINDS } from './artifacts/TurnOutputs';
+import {
+  getArtifactsByTurn,
+  getFileChangesByTurn,
+  getScheduledTasksByTurn,
+} from './artifacts/turnOutputSelectors';
 import styles from './ChatPane.module.css';
 
 // Split-view panes get the same interactive composer controls as the main chat,
@@ -55,6 +69,13 @@ export interface ChatPaneProps {
   title?: string;
   onClose?: () => void;
   onError?: (error: unknown, fallback: string) => void;
+  onRightPanelOpen?: (request: TurnOutputOpenRequest) => void;
+  onPaneArtifactsChange?: (
+    sessionId: string,
+    artifacts: readonly DaemonSessionArtifact[],
+    workspaceActions: DaemonWorkspaceActions,
+  ) => void;
+  messageTurnOutputs?: readonly TurnOutputKind[];
 }
 
 /**
@@ -64,14 +85,36 @@ export interface ChatPaneProps {
  * state, approvals, and composer, and the browser scopes keyboard focus to the
  * pane the user clicks into — so there is no cross-pane approval arbitration.
  */
-export function ChatPane({ title, onClose, onError }: ChatPaneProps) {
+export function ChatPane({
+  title,
+  onClose,
+  onError,
+  onRightPanelOpen,
+  onPaneArtifactsChange,
+  messageTurnOutputs,
+}: ChatPaneProps) {
   const { t } = useI18n();
   const connection = useConnection();
   const actions = useActions();
+  const workspaceActions = useWorkspaceActions();
   const messages = useMessages(t);
   const blocks = useTranscriptBlocks();
   const store = useTranscriptStore();
   const streamingState = useStreamingState();
+  const { artifacts } = useSessionArtifacts();
+  useEffect(() => {
+    const sessionId = connection.sessionId;
+    if (!sessionId) return;
+    onPaneArtifactsChange?.(sessionId, artifacts, workspaceActions);
+    return () => {
+      onPaneArtifactsChange?.(sessionId, [], workspaceActions);
+    };
+  }, [
+    artifacts,
+    connection.sessionId,
+    onPaneArtifactsChange,
+    workspaceActions,
+  ]);
   const streamingStateRef = useRef(streamingState);
   streamingStateRef.current = streamingState;
   const editorRef = useRef<EditorHandle | null>(null);
@@ -115,6 +158,28 @@ export function ChatPane({ title, onClose, onError }: ChatPaneProps) {
   const approvalActive =
     pendingToolApproval !== null || pendingAskUserApproval !== null;
   const isResponding = streamingState !== 'idle';
+  const artifactsByTurn = useMemo(
+    () =>
+      getArtifactsByTurn(messages, artifacts, connection.workspaceCwd || ''),
+    [messages, artifacts, connection.workspaceCwd],
+  );
+  const fileChangesByTurn = useMemo(
+    () =>
+      getFileChangesByTurn(
+        messages,
+        artifactsByTurn,
+        connection.workspaceCwd || '',
+      ),
+    [messages, artifactsByTurn, connection.workspaceCwd],
+  );
+  const scheduledTasksByTurn = useMemo(
+    () => getScheduledTasksByTurn(messages),
+    [messages],
+  );
+  const visibleTurnOutputKinds = useMemo(
+    () => new Set<TurnOutputKind>(messageTurnOutputs ?? TURN_OUTPUT_KINDS),
+    [messageTurnOutputs],
+  );
   const {
     queuedPrompts,
     queuedTexts,
@@ -196,6 +261,18 @@ export function ChatPane({ title, onClose, onError }: ChatPaneProps) {
       );
   }, [actions, reportError]);
 
+  const handleRightPanelOpen = useCallback(
+    (request: TurnOutputOpenRequest) => {
+      if (!onRightPanelOpen) return;
+      if (request.kind === 'artifact' || request.kind === 'scheduled_task') {
+        onRightPanelOpen({ ...request, workspaceActions });
+        return;
+      }
+      onRightPanelOpen(request);
+    },
+    [onRightPanelOpen, workspaceActions],
+  );
+
   // Composer wiring, all scoped to THIS pane's own DaemonSession context. The
   // slash menu lists the session's daemon commands — they run server-side when
   // submitted (via sendPrompt), so e.g. `/clear` clears this pane's session, not
@@ -325,6 +402,18 @@ export function ChatPane({ title, onClose, onError }: ChatPaneProps) {
           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}
         />
       </div>
 
diff --git a/packages/web-shell/client/components/MessageList.test.ts b/packages/web-shell/client/components/MessageList.test.ts
index 84c9959301b..db216d46e5a 100644
--- a/packages/web-shell/client/components/MessageList.test.ts
+++ b/packages/web-shell/client/components/MessageList.test.ts
@@ -1,6 +1,7 @@
 import { describe, expect, it, vi } from 'vitest';
 import type { Message, TurnCollapseHead } from '../adapters/types';
 import {
+  attachTurnOutputs,
   applyTurnCollapse,
   findDisplayItemIndex,
   findTurnIdForIndex,
@@ -15,6 +16,7 @@ import {
   VIRTUAL_SCROLL_THRESHOLD,
   type DisplayItem,
 } from './MessageList';
+import type { TurnOutputFileChange } from './artifacts/TurnOutputs';
 
 function messageRow(
   item: DisplayItem,
@@ -315,6 +317,67 @@ describe('groupParallelAgents', () => {
   });
 });
 
+describe('attachTurnOutputs', () => {
+  it('keeps outputs for a transcript that starts before a user turn', () => {
+    const message = makeMultiToolGroup('tg1');
+    const changes: TurnOutputFileChange[] = [
+      {
+        path: 'src/app.ts',
+        status: 'modified',
+        toolCallId: 'call-tg1-a',
+        diffs: [{ oldText: 'one\n', newText: 'two\n' }],
+      },
+    ];
+
+    const items = attachTurnOutputs(
+      [{ type: 'message', key: message.id, message }],
+      false,
+      new Map([[message.id, changes]]),
+    );
+
+    expect(items).toHaveLength(2);
+    expect(items[1]).toMatchObject({
+      type: 'turn_outputs',
+      key: message.id,
+      turnId: message.id,
+      changes,
+    });
+  });
+
+  it('keeps outputs for a leading grouped parallel-agent row', () => {
+    const items = groupParallelAgents([
+      makeAgentToolGroup('x1'),
+      makeAgentToolGroup('x2'),
+    ]);
+    const changes: TurnOutputFileChange[] = [
+      {
+        path: 'src/app.ts',
+        status: 'modified',
+        toolCallId: 'call-x1-a',
+        diffs: [{ oldText: 'one\n', newText: 'two\n' }],
+      },
+    ];
+
+    const outputItems = attachTurnOutputs(
+      items,
+      false,
+      new Map([['x1', changes]]),
+    );
+
+    expect(outputItems).toHaveLength(2);
+    expect(outputItems[0]).toMatchObject({
+      type: 'parallel_agents',
+      turnId: 'x1',
+    });
+    expect(outputItems[1]).toMatchObject({
+      type: 'turn_outputs',
+      key: 'x1',
+      turnId: 'x1',
+      changes,
+    });
+  });
+});
+
 describe('getTurnTimelineNode', () => {
   const item = (
     message: Message,
@@ -725,6 +788,7 @@ describe('getDisplayItemVirtualKey', () => {
       getDisplayItemVirtualKey({
         type: 'parallel_agents',
         key: 'header',
+        turnId: 'header',
         agents: [makeAgentToolGroup('a').tools[0]],
       }),
     ).toBe('group:header');
diff --git a/packages/web-shell/client/components/MessageList.tsx b/packages/web-shell/client/components/MessageList.tsx
index 33f31abdc62..571d3c083dc 100644
--- a/packages/web-shell/client/components/MessageList.tsx
+++ b/packages/web-shell/client/components/MessageList.tsx
@@ -17,6 +17,7 @@ import {
 } from 'react';
 import { createPortal } from 'react-dom';
 import { useVirtualizer } from '@tanstack/react-virtual';
+import type { DaemonSessionArtifact } from '@qwen-code/sdk/daemon';
 import type { Message, ACPToolCall, TurnCollapseHead } from '../adapters/types';
 import type { PermissionRequest } from '../adapters/types';
 import {
@@ -31,6 +32,12 @@ import {
 import { useI18n } from '../i18n';
 import { MessageItem } from './MessageItem';
 import { MessageTimestamp } from './MessageTimestamp';
+import {
+  TurnOutputs,
+  type TurnOutputFileChange,
+  type TurnOutputOpenRequest,
+  type TurnOutputScheduledTask,
+} from './artifacts/TurnOutputs';
 import { ParallelAgentsGroup } from './messages/tools/ParallelAgentsGroup';
 import { useSharedNow } from '../hooks/useSharedNow';
 import { toolContainsCallId } from './messages/toolFormatting';
@@ -38,6 +45,8 @@ import turnCollapseStyles from './TurnCollapseRow.module.css';
 import flashStyles from './MessageLocateFlash.module.css';
 import styles from './MessageList.module.css';
 
+const noopTurnOutputAction = () => undefined;
+
 interface MessageListProps {
   messages: Message[];
   pendingApproval: PermissionRequest | null;
@@ -73,6 +82,16 @@ interface MessageListProps {
   onRetryClick?: () => void;
   onBranchSession?: () => void;
   onCanScrollToBottomChange?: (canScrollToBottom: boolean) => void;
+  turnFileChanges?: ReadonlyMap<string, readonly TurnOutputFileChange[]>;
+  turnArtifacts?: ReadonlyMap<string, readonly DaemonSessionArtifact[]>;
+  turnScheduledTasks?: ReadonlyMap<string, readonly TurnOutputScheduledTask[]>;
+  onReviewChanges?: (
+    changes: readonly TurnOutputFileChange[],
+    selectedPath?: string,
+  ) => void;
+  onOpenArtifact?: (artifactId: string, previewContent?: string) => void;
+  onOpenScheduledTask?: (task: TurnOutputScheduledTask) => void;
+  onTurnOutputOpen?: (request: TurnOutputOpenRequest) => void;
 }
 
 function getLastUserMessageId(messages: Message[]): string | null {
@@ -118,12 +137,21 @@ export type DisplayItem =
   | {
       type: 'parallel_agents';
       key: string;
+      turnId: string;
       agents: ACPToolCall[];
       /**
        * Wall-clock time of the first grouped launch, carried so the grouped
        * box reveals its time on hover exactly like a standalone message row.
        */
       timestamp?: number;
+    }
+  | {
+      type: 'turn_outputs';
+      key: string;
+      turnId: string;
+      changes: readonly TurnOutputFileChange[];
+      artifacts: readonly DaemonSessionArtifact[];
+      scheduledTasks: readonly TurnOutputScheduledTask[];
     };
 
 interface LocateFlashTarget {
@@ -304,6 +332,7 @@ export function groupParallelAgents(messages: Message[]): DisplayItem[] {
         items.push({
           type: 'parallel_agents',
           key: `par-${grouped[0].id}`,
+          turnId: grouped[0].id,
           agents: grouped.map((m) => (m as { tools: ACPToolCall[] }).tools[0]),
           timestamp: grouped[0].timestamp,
         });
@@ -320,6 +349,7 @@ export function groupParallelAgents(messages: Message[]): DisplayItem[] {
         items.push({
           type: 'parallel_agents',
           key: `par-${grouped[0].id}`,
+          turnId: grouped[0].id,
           agents: grouped.map((m) => (m as { tools: ACPToolCall[] }).tools[0]),
           timestamp: grouped[0].timestamp,
         });
@@ -344,6 +374,7 @@ export function groupParallelAgents(messages: Message[]): DisplayItem[] {
 
 export function getDisplayItemVirtualKey(item: DisplayItem): string {
   if (item.type === 'parallel_agents') return `group:${item.key}`;
+  if (item.type === 'turn_outputs') return `outputs:${item.key}`;
   if (item.type === 'turn_collapse') {
     const liveKey = item.turnCollapse.liveStartedAt;
     return liveKey === undefined
@@ -354,6 +385,61 @@ export function getDisplayItemVirtualKey(item: DisplayItem): string {
   return `msg:${item.key}`;
 }
 
+export function attachTurnOutputs(
+  items: DisplayItem[],
+  isResponding: boolean,
+  turnFileChanges?: ReadonlyMap<string, readonly TurnOutputFileChange[]>,
+  turnArtifacts?: ReadonlyMap<string, readonly DaemonSessionArtifact[]>,
+  turnScheduledTasks?: ReadonlyMap<string, readonly TurnOutputScheduledTask[]>,
+): DisplayItem[] {
+  if (
+    (!turnFileChanges || turnFileChanges.size === 0) &&
+    (!turnArtifacts || turnArtifacts.size === 0) &&
+    (!turnScheduledTasks || turnScheduledTasks.size === 0)
+  ) {
+    return items;
+  }
+
+  const result: DisplayItem[] = [];
+  let currentTurnId: string | null = null;
+  const pushTurnOutputs = (turnId: string | null, isFinalTurn: boolean) => {
+    if (isFinalTurn && isResponding) return;
+    if (!turnId) return;
+    const changes = turnFileChanges?.get(turnId) ?? [];
+    const artifacts = turnArtifacts?.get(turnId) ?? [];
+    const scheduledTasks = turnScheduledTasks?.get(turnId) ?? [];
+    if (
+      changes.length === 0 &&
+      artifacts.length === 0 &&
+      scheduledTasks.length === 0
+    ) {
+      return;
+    }
+    result.push({
+      type: 'turn_outputs',
+      key: turnId,
+      turnId,
+      changes,
+      artifacts,
+      scheduledTasks,
+    });
+  };
+
+  for (const item of items) {
+    if (item.type === 'message' && isTurnStartMessage(item.message)) {
+      pushTurnOutputs(currentTurnId, false);
+      currentTurnId = item.message.id;
+    } else if (!currentTurnId && item.type === 'message') {
+      currentTurnId = item.message.id;
+    } else if (!currentTurnId && item.type === 'parallel_agents') {
+      currentTurnId = item.turnId;
+    }
+    result.push(item);
+  }
+  pushTurnOutputs(currentTurnId, true);
+  return result;
+}
+
 export interface ApplyTurnCollapseOptions {
   /**
    * Per-turn user override keyed by the turn's user-message id:
@@ -447,6 +533,7 @@ function collectFinalAssistantTurnIds(
  */
 function isHideableStep(item: DisplayItem, isFinalAnswer: boolean): boolean {
   if (item.type === 'parallel_agents') return true;
+  if (item.type === 'turn_outputs') return false;
   if (item.type === 'turn_collapse') return false;
   if (item.type === 'turn_content') {
     return item.items.some((child) => isHideableStep(child, isFinalAnswer));
@@ -502,6 +589,7 @@ export function getTurnTimelineNode(
       label: t ? t('timeline.parallelAgents') : 'Parallel agents',
     };
   }
+  if (item.type === 'turn_outputs') return { kind: 'none' };
   if (item.type !== 'message') return { kind: 'none' };
 
   const { message } = item;
@@ -710,6 +798,7 @@ function timelineDetailSnippetForItem(
       ? t('timeline.parallelAgentsDetail', { count })
       : `${count} parallel agent${count === 1 ? '' : 's'}`;
   }
+  if (item.type === 'turn_outputs') return '';
   if (item.type !== 'message') return '';
   return timelineDetailSnippetForMessage(item.message, t);
 }
@@ -906,6 +995,7 @@ export function getSessionTimelineSignature(
 
 function isExecutionWorkStep(item: DisplayItem): boolean {
   if (item.type === 'parallel_agents') return true;
+  if (item.type === 'turn_outputs') return false;
   if (item.type === 'turn_collapse') return false;
   if (item.type === 'turn_content') return item.items.some(isExecutionWorkStep);
   return item.message.role === 'tool_group' || item.message.role === 'plan';
@@ -926,6 +1016,8 @@ function activeExecutionKey(item: DisplayItem): string | null {
     return null;
   }
 
+  if (item.type === 'turn_outputs') return null;
+
   if (item.type === 'turn_collapse') {
     if (item.turnCollapse.liveStartedAt === undefined) return null;
     if (
@@ -1008,6 +1100,7 @@ function itemAssistantUsage(item: DisplayItem):
 
 function itemToolCallCount(item: DisplayItem): number {
   if (item.type === 'parallel_agents') return item.agents.length;
+  if (item.type === 'turn_outputs') return 0;
   if (item.type === 'turn_collapse') return 0;
   if (item.type === 'turn_content') {
     return item.items.reduce((sum, child) => sum + itemToolCallCount(child), 0);
@@ -1393,6 +1486,8 @@ export function findDisplayItemIndex(
       findDisplayItemIndex(item.items, messageId, callId) >= 0
     ) {
       return i;
+    } else if (item.type === 'turn_outputs') {
+      continue;
     }
   }
   return -1;
@@ -1422,6 +1517,7 @@ function displayItemMatchesLocateTarget(
       displayItemMatchesLocateTarget(child, target),
     );
   }
+  if (item.type === 'turn_outputs') return false;
   return false;
 }
 
@@ -1648,6 +1744,7 @@ const TurnCollapseRow = memo(function TurnCollapseRow({
 
 function getChatRowClassName(item: DisplayItem): string | undefined {
   if (item.type === 'turn_collapse') return styles.turnStatusRow;
+  if (item.type === 'turn_outputs') return styles.turnContentRow;
   if (item.type === 'turn_content') {
     return styles.turnContentRow;
   }
@@ -2086,6 +2183,13 @@ export const MessageList = memo(
       onRetryClick,
       onBranchSession,
       onCanScrollToBottomChange,
+      turnFileChanges,
+      turnArtifacts,
+      turnScheduledTasks,
+      onReviewChanges,
+      onOpenArtifact,
+      onOpenScheduledTask,
+      onTurnOutputOpen,
     },
     ref,
   ) {
@@ -2099,8 +2203,21 @@ export const MessageList = memo(
       [compactMode, messages, pendingApproval],
     );
     const displayItems = useMemo(
-      () => groupParallelAgents(mergedMessages),
-      [mergedMessages],
+      () =>
+        attachTurnOutputs(
+          groupParallelAgents(mergedMessages),
+          isResponding,
+          turnFileChanges,
+          turnArtifacts,
+          turnScheduledTasks,
+        ),
+      [
+        mergedMessages,
+        isResponding,
+        turnFileChanges,
+        turnArtifacts,
+        turnScheduledTasks,
+      ],
     );
     const [isSessionTimelineVisible, setIsSessionTimelineVisible] =
       useState(false);
@@ -3124,6 +3241,24 @@ export const MessageList = memo(
             );
           }
 
+          if (displayItem.type === 'turn_outputs') {
+            return (
+              <TurnOutputs
+                changes={displayItem.changes}
+                turnId={displayItem.turnId}
+                artifacts={displayItem.artifacts}
+                scheduledTasks={displayItem.scheduledTasks}
+                workspaceCwd={workspaceCwd}
+                onOpenRequest={onTurnOutputOpen}
+                onReviewChanges={onReviewChanges ?? noopTurnOutputAction}
+                onOpenArtifact={onOpenArtifact ?? noopTurnOutputAction}
+                onOpenScheduledTask={
+                  onOpenScheduledTask ?? noopTurnOutputAction
+                }
+              />
+            );
+          }
+
           if (displayItem.type === 'turn_collapse') {
             return (
               <TurnCollapseRow
@@ -3229,6 +3364,10 @@ export const MessageList = memo(
         onRetryClick,
         onBranchSession,
         handleToggleCollapse,
+        onOpenArtifact,
+        onOpenScheduledTask,
+        onReviewChanges,
+        onTurnOutputOpen,
       ],
     );
 
diff --git a/packages/web-shell/client/components/SplitView.tsx b/packages/web-shell/client/components/SplitView.tsx
index b0096b3df77..43020c104fe 100644
--- a/packages/web-shell/client/components/SplitView.tsx
+++ b/packages/web-shell/client/components/SplitView.tsx
@@ -9,11 +9,17 @@ import {
   DaemonSessionProvider,
   useConnection,
   useSessions,
+  type DaemonWorkspaceActions,
 } from '@qwen-code/webui/daemon-react-sdk';
+import type { DaemonSessionArtifact } from '@qwen-code/sdk/daemon';
 import { useI18n } from '../i18n';
 import { ChatPane } from './ChatPane';
 import { ErrorBoundary } from './ErrorBoundary';
 import { MAX_SPLIT_PANES } from '../utils/splitUrl';
+import type {
+  TurnOutputKind,
+  TurnOutputOpenRequest,
+} from './artifacts/TurnOutputs';
 import {
   SESSION_LIST_PAGE_SIZE,
   SESSION_ORGANIZATION_FEATURE,
@@ -36,6 +42,13 @@ export interface SplitViewProps {
   /** Leave the split view (back to the single-session chat). */
   onExit: () => void;
   onError?: (error: unknown, fallback: string) => void;
+  onRightPanelOpen?: (request: TurnOutputOpenRequest) => void;
+  onPaneArtifactsChange?: (
+    sessionId: string,
+    artifacts: readonly DaemonSessionArtifact[],
+    workspaceActions: DaemonWorkspaceActions,
+  ) => void;
+  messageTurnOutputs?: readonly TurnOutputKind[];
   /**
    * Bumped by the parent whenever the session list changes elsewhere (create /
    * delete / rename). The "add pane" picker reloads on a change so it never
@@ -56,6 +69,9 @@ export function SplitView({
   onPanesChange,
   onExit,
   onError,
+  onRightPanelOpen,
+  onPaneArtifactsChange,
+  messageTurnOutputs,
   sessionListReloadToken,
 }: SplitViewProps) {
   const { t } = useI18n();
@@ -325,6 +341,9 @@ export function SplitView({
                     title={titleById.get(sessionId)}
                     onClose={() => removePane(sessionId)}
                     onError={onError}
+                    onRightPanelOpen={onRightPanelOpen}
+                    onPaneArtifactsChange={onPaneArtifactsChange}
+                    messageTurnOutputs={messageTurnOutputs}
                   />
                 </DaemonSessionProvider>
               </ErrorBoundary>
diff --git a/packages/web-shell/client/components/artifacts/ArtifactPanel.module.css b/packages/web-shell/client/components/artifacts/ArtifactPanel.module.css
new file mode 100644
index 00000000000..34ec9ee4642
--- /dev/null
+++ b/packages/web-shell/client/components/artifacts/ArtifactPanel.module.css
@@ -0,0 +1,807 @@
+.panel {
+  flex: 0 0 min(420px, 36vw);
+  min-width: 320px;
+  border-left: 1px solid var(--border);
+  background: var(--background);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.header {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 14px 0 14px;
+}
+
+.title {
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 600;
+}
+
+.tabs {
+  min-width: 0;
+  flex: 1 1 auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  overflow-x: auto;
+}
+
+.tabItem {
+  appearance: none;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--muted-foreground);
+  border-radius: 6px;
+  max-width: 180px;
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+}
+
+.tab {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+  min-width: 0;
+  overflow: hidden;
+  padding: 5px 4px 5px 8px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.tabIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  opacity: 0.7;
+}
+
+.tabIconSvg {
+  width: 16px;
+  height: 16px;
+  display: block;
+}
+
+.tabItem:hover .tabIcon,
+.tabActive .tabIcon {
+  opacity: 1;
+}
+
+.tabItem:hover {
+  background: var(--accent);
+  color: var(--foreground);
+}
+
+.tabActive {
+  background: var(--accent);
+  border-color: var(--border);
+  color: var(--foreground);
+}
+
+.tabCloseButton {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: var(--muted-foreground);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border-radius: 5px;
+}
+
+.tabCloseButton:hover {
+  background: var(--background);
+  color: var(--foreground);
+}
+
+.tabCloseIcon {
+  width: 13px;
+  height: 13px;
+  display: block;
+}
+
+.iconButton {
+  appearance: none;
+  border: 1px solid var(--border);
+  background: transparent;
+  color: var(--foreground);
+  border-radius: 6px;
+  width: 28px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.iconButton:hover {
+  background: var(--accent);
+}
+
+.iconButtonActive {
+  background: var(--accent);
+}
+
+.toolbarIcon {
+  width: 16px;
+  height: 16px;
+  display: block;
+}
+
+.body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  padding: 12px;
+}
+
+.empty {
+  color: var(--muted-foreground);
+  font-size: 13px;
+  padding: 16px 4px;
+}
+
+.list {
+  display: grid;
+  gap: 6px;
+}
+
+.row {
+  appearance: none;
+  border: 1px solid var(--border);
+  background: transparent;
+  color: var(--foreground);
+  border-radius: 6px;
+  padding: 8px;
+  display: grid;
+  gap: 4px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.row:hover,
+.rowActive {
+  background: var(--accent);
+}
+
+.rowTitle {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 500;
+}
+
+.rowMeta,
+.meta {
+  color: var(--muted-foreground);
+  font-size: 12px;
+}
+
+.detail {
+  display: grid;
+  gap: 12px;
+}
+
+.section {
+  display: grid;
+  gap: 6px;
+}
+
+.sectionTitle {
+  color: var(--muted-foreground);
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.description {
+  white-space: pre-wrap;
+}
+
+.actionsRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.fieldGrid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 4px;
+  font-size: 13px;
+}
+
+.fieldLabel {
+  color: var(--muted-foreground);
+  margin-top: 8px;
+}
+
+.fieldLabel:first-child {
+  margin-top: 0;
+}
+
+.fieldValue {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.link {
+  color: var(--link-color, #2563eb);
+  text-decoration: none;
+}
+
+.link:hover {
+  text-decoration: underline;
+}
+
+.review {
+  min-height: 100%;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  gap: 12px;
+}
+
+.reviewToolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  color: var(--foreground);
+  font-weight: 600;
+}
+
+.reviewToolbarTitle {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.reviewToolbarActions {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.reviewTotalsButton {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: var(--muted-foreground);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.reviewTotalsButton:hover {
+  color: var(--foreground);
+}
+
+.reviewContent {
+  min-height: 0;
+  display: grid;
+  grid-template-columns:
+    minmax(180px, var(--review-list-width, 520px))
+    8px minmax(0, 1fr);
+  border-top: 1px solid var(--border);
+  overflow: hidden;
+}
+
+.reviewContentListOnly {
+  grid-template-columns: 1fr;
+}
+
+.reviewContentStacked {
+  grid-template-columns: 1fr;
+  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
+}
+
+.reviewList {
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
+
+.reviewListWithExpanded {
+  overflow: hidden;
+}
+
+.reviewContentListOnly .reviewList {
+  border-right: 0;
+}
+
+.reviewContentStacked .reviewList {
+  border-bottom: 1px solid var(--border);
+  max-height: none;
+}
+
+.reviewSplitHandle {
+  min-width: 8px;
+  cursor: col-resize;
+  position: relative;
+  touch-action: none;
+  border-left: 1px solid var(--border);
+}
+
+.reviewSplitHandle::after {
+  content: '';
+  position: absolute;
+  inset: 0 3px;
+  background: transparent;
+}
+
+.reviewItem {
+  min-width: 0;
+  flex: 0 0 auto;
+}
+
+.reviewItemExpanded {
+  min-height: 0;
+  flex: 1 1 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.reviewRow {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: var(--foreground);
+  font: inherit;
+  cursor: pointer;
+  width: 100%;
+  min-width: 0;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto auto;
+  gap: 8px;
+  align-items: center;
+  padding: 8px 10px;
+  text-align: left;
+}
+
+.reviewRow:hover {
+  background: var(--accent);
+}
+
+.fileIcon {
+  min-width: 24px;
+  height: 20px;
+  border-radius: 6px;
+  background: var(--accent);
+  color: var(--muted-foreground);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 4px;
+  font-size: 10px;
+  font-weight: 700;
+}
+
+.reviewPath,
+.treeName {
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.reviewPath {
+  display: inline-flex;
+  width: 100%;
+  max-width: 100%;
+}
+
+.treeName {
+  text-overflow: ellipsis;
+}
+
+.pathPrefix {
+  flex: 0 0 auto;
+  white-space: nowrap;
+  color: var(--muted-foreground);
+}
+
+.pathFileName {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.lineStats {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 13px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.additions {
+  color: #16a34a;
+}
+
+.deletions {
+  color: #dc2626;
+}
+
+.chevron {
+  color: var(--muted-foreground);
+  display: inline-flex;
+  transition: transform 120ms ease;
+}
+
+.chevronOpen {
+  transform: rotate(90deg);
+}
+
+.chevronIcon {
+  width: 14px;
+  height: 14px;
+  display: block;
+}
+
+.diffPreview {
+  border: 1px solid var(--border);
+  overflow: hidden;
+  background: var(--muted, rgba(0, 0, 0, 0.03));
+  min-height: 0;
+  flex: 1 1 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.codeMirrorDiff {
+  min-width: 0;
+  min-height: 0;
+  flex: 1 1 0;
+  overflow: auto;
+  background: var(--background);
+}
+
+.codeMirrorDiffWrap {
+  min-width: 0;
+  min-height: 0;
+  flex: 1 1 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.diffError {
+  color: var(--muted-foreground);
+  font-size: 12px;
+  padding: 8px 10px;
+  border-top: 1px solid var(--border);
+  background: var(--background);
+}
+
+.codeMirrorDiff :global(.cm-editor) {
+  font-size: 12px;
+  background: var(--background);
+  color: var(--foreground);
+}
+
+.codeMirrorDiff :global(.cm-mergeView) {
+  min-width: max-content;
+}
+
+.codeMirrorDiff :global(.cm-scroller) {
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+    'Courier New', monospace;
+}
+
+.codeMirrorDiff :global(.cm-gutters),
+.codeMirrorFile :global(.cm-gutters) {
+  background: var(--background);
+  border-right: 1px solid var(--border);
+  color: var(--muted-foreground);
+}
+
+.codeMirrorDiff :global(.cm-gutter),
+.codeMirrorFile :global(.cm-gutter),
+.codeMirrorDiff :global(.cm-lineNumbers .cm-gutterElement),
+.codeMirrorFile :global(.cm-lineNumbers .cm-gutterElement) {
+  background: transparent;
+  color: var(--muted-foreground);
+}
+
+.codeMirrorDiff :global(.cm-activeLineGutter),
+.codeMirrorFile :global(.cm-activeLineGutter) {
+  background: var(--accent);
+  color: var(--foreground);
+}
+
+.codeMirrorDiff :global(.cm-collapsedLines),
+.codeMirrorFile :global(.cm-collapsedLines) {
+  background: var(--muted);
+  border-color: var(--border);
+  color: var(--muted-foreground);
+}
+
+.codeMirrorDiff :global(.cm-collapsedLines:hover),
+.codeMirrorFile :global(.cm-collapsedLines:hover) {
+  background: var(--accent);
+  color: var(--foreground);
+}
+
+.codeMirrorDiff :global(.cm-mergeView .cm-editor) {
+  min-width: 0;
+}
+
+.codeMirrorDiff :global(.cm-line),
+.codeMirrorDiff :global(.cm-deletedLine) {
+  position: relative;
+  padding-left: 18px;
+}
+
+.codeMirrorDiff :global(.cm-line::before),
+.codeMirrorDiff :global(.cm-deletedLine::before) {
+  content: '';
+  position: absolute;
+  left: 4px;
+  font-weight: 700;
+}
+
+.codeMirrorDiff :global(.cm-merge-a .cm-line.cm-changedLine::before),
+.codeMirrorDiff :global(.cm-deletedLine::before) {
+  content: '-';
+  color: #dc2626;
+}
+
+.codeMirrorDiff :global(.cm-merge-b .cm-line.cm-changedLine::before) {
+  content: '+';
+  color: #16a34a;
+}
+
+.codeMirrorDiff :global(.cm-merge-b .cm-changedText) {
+  background: transparent;
+}
+
+.diffEmpty {
+  color: var(--muted-foreground);
+  font-size: 12px;
+  padding: 8px 10px;
+  border: 1px solid var(--border);
+}
+
+.tree {
+  min-width: 0;
+  overflow: auto;
+  padding: 8px 0;
+}
+
+.treeNode {
+  position: relative;
+}
+
+.treeChildren {
+  position: relative;
+}
+
+.treeChildren::before {
+  content: '';
+  position: absolute;
+  top: -2px;
+  bottom: 8px;
+  left: var(--tree-children-line-left);
+  border-left: 1px dashed var(--border);
+  pointer-events: none;
+}
+
+.treeRow {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  font: inherit;
+  text-align: left;
+  width: 100%;
+  min-width: 0;
+  height: 32px;
+  display: grid;
+  grid-template-columns: 18px minmax(0, 1fr) auto;
+  gap: 8px;
+  align-items: center;
+  padding-right: 10px;
+  color: var(--foreground);
+  position: relative;
+}
+
+.treeRow:hover {
+  background: var(--accent);
+  color: var(--foreground);
+}
+
+.treeRow[data-depth]:not([data-depth='0'])::before {
+  content: '';
+  position: absolute;
+  left: var(--tree-row-line-left);
+  top: 50%;
+  width: 9px;
+  border-top: 1px dashed var(--border);
+  pointer-events: none;
+}
+
+.treeFolder {
+  color: var(--foreground);
+}
+
+.treeFile {
+  color: var(--muted-foreground);
+}
+
+button.treeRow {
+  cursor: pointer;
+  color: var(--foreground);
+}
+
+.treeTwisty {
+  color: inherit;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 20px;
+  line-height: 1;
+}
+
+.treeChevronIcon {
+  width: 14px;
+  height: 14px;
+  display: block;
+}
+
+.treeChevron {
+  display: inline-flex;
+  transition: transform 120ms ease;
+}
+
+.treeChevronClosed {
+  transform: rotate(-90deg);
+}
+
+.treeContent {
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: inherit;
+}
+
+.treeRow .treeName {
+  color: inherit;
+}
+
+.treeFile:not(:hover) .treeName,
+.treeFile:not(:hover) .treeContent,
+.treeFile:not(:hover) .treeTwisty,
+.treeFile:not(:hover) .treeChevron {
+  color: var(--muted-foreground);
+}
+
+button.treeRow:hover {
+  color: var(--foreground);
+}
+
+.reviewBadge {
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  padding: 1px 6px;
+  color: var(--muted-foreground);
+  font-size: 11px;
+}
+
+.treeRow:hover .reviewBadge,
+.treeRow:hover .fileIcon {
+  color: var(--foreground);
+}
+
+.htmlPreviewWrap {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.htmlPreview {
+  width: 100%;
+  flex: 1 1 auto;
+  min-height: 520px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: #fff;
+  display: block;
+}
+
+.previewError {
+  margin-top: 8px;
+  color: var(--muted-foreground);
+  font-size: 12px;
+}
+
+.filePreviewWrap {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.codeMirrorFile {
+  min-width: 0;
+  flex: 1 1 auto;
+  min-height: 520px;
+  overflow: auto;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--background);
+}
+
+.codeMirrorFile :global(.cm-editor) {
+  min-height: 520px;
+  font-size: 12px;
+  background: var(--background);
+  color: var(--foreground);
+}
+
+.codeMirrorFile :global(.cm-scroller) {
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+    'Courier New', monospace;
+}
+
+@media (max-width: 900px) {
+  .panel {
+    position: fixed;
+    inset: env(safe-area-inset-top) 0 env(safe-area-inset-bottom) auto;
+    z-index: 60;
+    width: min(420px, 100vw);
+    max-width: 100vw;
+    box-shadow: -12px 0 30px rgba(0, 0, 0, 0.18);
+  }
+
+  .reviewContent {
+    grid-template-columns: 1fr !important;
+  }
+
+  .reviewSplitHandle {
+    display: none;
+  }
+
+  .reviewList {
+    border-right: 0;
+    border-bottom: 1px solid var(--border);
+    max-height: 220px;
+  }
+
+  .reviewContentListOnly .reviewList {
+    border-bottom: 0;
+    max-height: none;
+  }
+}
diff --git a/packages/web-shell/client/components/artifacts/ArtifactPanel.tsx b/packages/web-shell/client/components/artifacts/ArtifactPanel.tsx
new file mode 100644
index 00000000000..a7d282515cc
--- /dev/null
+++ b/packages/web-shell/client/components/artifacts/ArtifactPanel.tsx
@@ -0,0 +1,1814 @@
+import type { DaemonSessionArtifact } from '@qwen-code/sdk/daemon';
+import {
+  useWorkspaceActions,
+  type DaemonWorkspaceActions,
+  type DaemonScheduledTask,
+} from '@qwen-code/webui/daemon-react-sdk';
+import { EditorState } from '@codemirror/state';
+import { basicSetup, EditorView } from 'codemirror';
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type CSSProperties,
+  type PointerEvent as ReactPointerEvent,
+} from 'react';
+import { useI18n } from '../../i18n';
+import { DialogShell } from '../dialogs/DialogShell';
+import { isSafeHref } from '../messages/Markdown';
+import {
+  buildCron,
+  describeCron,
+  parseCronToBuilder,
+  type BuilderState,
+  type Frequency,
+} from '../dialogs/scheduledTasksSchedule';
+import taskStyles from '../dialogs/ScheduledTasksDialog.module.css';
+import {
+  artifactKindLabel,
+  formatArtifactSize,
+  getArtifactLocation,
+  normalizePath,
+  withArtifactPreviewCsp,
+} from './artifactUtils';
+import {
+  displayPath,
+  type TurnOutputFileChange,
+  type TurnOutputFileDiff,
+  type TurnOutputScheduledTask,
+} from './TurnOutputs';
+import { LineStats, sumLineStats } from './LineStats';
+import styles from './ArtifactPanel.module.css';
+
+const MIN_PANEL_WIDTH_FOR_DEFAULT_TREE = 740;
+const MAX_REVIEW_SIDE_BY_SIDE_WIDTH = 700;
+const FREQUENCIES: Frequency[] = [
+  'daily',
+  'weekdays',
+  'weekly',
+  'hourly',
+  'minutes',
+  'custom',
+];
+const MINUTE_INTERVALS = [1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30];
+
+export type ArtifactPanelTab =
+  | {
+      id: string;
+      kind: 'review';
+      title: string;
+    }
+  | {
+      id: string;
+      kind: 'artifact';
+      title: string;
+      artifactId: string;
+      workspaceActions?: DaemonWorkspaceActions;
+      previewContent?: string;
+    }
+  | {
+      id: string;
+      kind: 'scheduled_task';
+      title: string;
+      task: TurnOutputScheduledTask;
+      workspaceActions?: DaemonWorkspaceActions;
+    };
+
+interface ArtifactPanelProps {
+  artifacts: readonly DaemonSessionArtifact[];
+  tabs: readonly ArtifactPanelTab[];
+  activeTabId: string | null;
+  reviewChanges: readonly TurnOutputFileChange[];
+  selectedReviewPath: string | null;
+  panelWidth?: number;
+  workspaceCwd?: string;
+  loading?: boolean;
+  error?: string | null;
+  onSelectTab: (tabId: string) => void;
+  onCloseTab: (tabId: string) => void;
+  onClose: () => void;
+}
+
+export function ArtifactPanel({
+  artifacts,
+  tabs,
+  activeTabId,
+  reviewChanges,
+  selectedReviewPath,
+  panelWidth,
+  workspaceCwd,
+  loading,
+  error,
+  onSelectTab,
+  onCloseTab,
+  onClose,
+}: ArtifactPanelProps) {
+  const activeTab = tabs.find((tab) => tab.id === activeTabId) ?? tabs[0];
+  const defaultWorkspaceActions = useWorkspaceActions();
+  const activeWorkspaceActions =
+    activeTab?.kind === 'artifact' || activeTab?.kind === 'scheduled_task'
+      ? (activeTab.workspaceActions ?? defaultWorkspaceActions)
+      : defaultWorkspaceActions;
+
+  return (
+    <aside
+      className={styles.panel}
+      style={
+        panelWidth ? { flexBasis: panelWidth, width: panelWidth } : undefined
+      }
+      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}
+              >
+                <span className={styles.tabIcon} aria-hidden="true">
+                  {tab.kind === 'review' ? (
+                    <TabReviewIcon />
+                  ) : tab.kind === 'artifact' ? (
+                    <TabArtifactIcon />
+                  ) : (
+                    <TabScheduledTaskIcon />
+                  )}
+                </span>
+                {tab.title}
+              </button>
+              <button
+                type="button"
+                className={styles.tabCloseButton}
+                onClick={() => onCloseTab(tab.id)}
+                aria-label={`Close ${tab.title}`}
+                title="Close"
+              >
+                <CloseIcon />
+              </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>
+        ) : activeTab.kind === 'review' ? (
+          <ReviewChanges
+            changes={reviewChanges}
+            selectedPath={selectedReviewPath}
+            panelWidth={panelWidth}
+            workspaceCwd={workspaceCwd}
+          />
+        ) : activeTab.kind === 'artifact' ? (
+          <ArtifactDetailTab
+            artifacts={artifacts}
+            artifactId={activeTab.artifactId}
+            workspaceActions={activeWorkspaceActions}
+            previewContent={activeTab.previewContent}
+            loading={loading}
+            error={error}
+          />
+        ) : (
+          <ScheduledTaskDetail
+            key={activeTab.id}
+            task={activeTab.task}
+            actions={activeWorkspaceActions}
+          />
+        )}
+      </div>
+    </aside>
+  );
+}
+
+function CloseIcon() {
+  return (
+    <svg
+      className={styles.tabCloseIcon}
+      viewBox="0 0 16 16"
+      fill="none"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <path
+        d="m4.5 4.5 7 7M11.5 4.5l-7 7"
+        stroke="currentColor"
+        strokeWidth="1.7"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+function TabReviewIcon() {
+  return (
+    <svg
+      className={styles.tabIconSvg}
+      viewBox="0 0 24 24"
+      fill="none"
+      focusable="false"
+    >
+      <rect
+        x="3"
+        y="3"
+        width="18"
+        height="18"
+        rx="2"
+        stroke="currentColor"
+        strokeWidth="1.6"
+      />
+      <path
+        d="M9 9.5h6M12 6.5v6"
+        stroke="currentColor"
+        strokeWidth="1.4"
+        strokeLinecap="round"
+      />
+      <path
+        d="M9 16h6"
+        stroke="currentColor"
+        strokeWidth="1.4"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+function TabArtifactIcon() {
+  return (
+    <svg
+      className={styles.tabIconSvg}
+      viewBox="0 0 24 24"
+      fill="none"
+      focusable="false"
+    >
+      <rect
+        x="6"
+        y="4"
+        width="12"
+        height="16"
+        rx="2"
+        stroke="currentColor"
+        strokeWidth="1.8"
+      />
+      <path
+        d="M9 10h6M9 14h4"
+        stroke="currentColor"
+        strokeWidth="1.8"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+function TabScheduledTaskIcon() {
+  return (
+    <svg
+      className={styles.tabIconSvg}
+      viewBox="0 0 24 24"
+      fill="none"
+      focusable="false"
+    >
+      <rect
+        x="4"
+        y="4"
+        width="16"
+        height="16"
+        rx="3"
+        stroke="currentColor"
+        strokeWidth="1.8"
+      />
+      <path
+        d="M12 8v4l3 2"
+        stroke="currentColor"
+        strokeWidth="1.8"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function ArtifactDetailTab({
+  artifacts,
+  artifactId,
+  workspaceActions,
+  previewContent,
+  loading,
+  error,
+}: {
+  artifacts: readonly DaemonSessionArtifact[];
+  artifactId: string;
+  workspaceActions: DaemonWorkspaceActions;
+  previewContent?: string;
+  loading?: boolean;
+  error?: string | null;
+}) {
+  const artifact = artifacts.find((item) => item.id === artifactId);
+  if (artifact) {
+    return (
+      <ArtifactDetail
+        artifact={artifact}
+        workspaceActions={workspaceActions}
+        previewContent={previewContent}
+      />
+    );
+  }
+  if (loading) {
+    return <div className={styles.empty}>Loading artifact...</div>;
+  }
+  if (error) {
+    return <div className={styles.empty}>{error}</div>;
+  }
+  return <div className={styles.empty}>Artifact not found.</div>;
+}
+
+function ScheduledTaskDetail({
+  task,
+  actions,
+}: {
+  task: TurnOutputScheduledTask;
+  actions: DaemonWorkspaceActions;
+}) {
+  const { t } = useI18n();
+  const [loadedTask, setLoadedTask] = useState<DaemonScheduledTask | null>(
+    null,
+  );
+  const [loading, setLoading] = useState(true);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [name, setName] = useState('');
+  const [prompt, setPrompt] = useState(task.prompt);
+  const [builder, setBuilder] = useState<BuilderState>(() =>
+    parseCronToBuilder(task.cron),
+  );
+  const [showForm, setShowForm] = useState(false);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [formError, setFormError] = useState<string | null>(null);
+
+  const loadTask = useCallback(async () => {
+    if (!task.durable) {
+      setLoadedTask(null);
+      setName('');
+      setPrompt(task.prompt);
+      setBuilder(parseCronToBuilder(task.cron));
+      setLoadError(null);
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
+    setLoadError(null);
+    try {
+      const tasks = await actions.listScheduledTasks();
+      const match = tasks.find((item) => item.id === task.id) ?? null;
+      setLoadedTask(match);
+      if (match) {
+        setName(match.name ?? '');
+        setPrompt(match.prompt);
+        setBuilder(parseCronToBuilder(match.cron));
+      } else {
+        setName('');
+        setPrompt(task.prompt);
+        setBuilder(parseCronToBuilder(task.cron));
+      }
+    } catch (err) {
+      setLoadError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setLoading(false);
+    }
+  }, [actions, task.cron, task.durable, task.id, task.prompt]);
+
+  useEffect(() => {
+    void loadTask();
+  }, [loadTask]);
+
+  const isSessionScoped = !task.durable;
+  const isDeleted = task.durable && !loading && !loadError && !loadedTask;
+  const canEdit = Boolean(loadedTask);
+  const detailTitle = loadedTask?.name || loadedTask?.prompt || task.title;
+  const detailPrompt = loadedTask?.prompt ?? task.prompt;
+  const detailCron = loadedTask?.cron ?? task.cron;
+  const detailRecurring = loadedTask?.recurring ?? task.recurring;
+  const detailEnabled = loadedTask?.enabled;
+
+  const openEdit = useCallback(() => {
+    if (!loadedTask) return;
+    setName(loadedTask.name ?? '');
+    setPrompt(loadedTask.prompt);
+    setBuilder(parseCronToBuilder(loadedTask.cron));
+    setFormError(null);
+    setShowForm(true);
+  }, [loadedTask]);
+
+  const closeEdit = useCallback(() => {
+    setShowForm(false);
+    setFormError(null);
+    if (!loadedTask) return;
+    setName(loadedTask.name ?? '');
+    setPrompt(loadedTask.prompt);
+    setBuilder(parseCronToBuilder(loadedTask.cron));
+  }, [loadedTask]);
+
+  const handleSave = useCallback(async () => {
+    if (!loadedTask) return;
+    const cron = buildCron(builder);
+    if (!cron) {
+      setFormError(t('scheduledTasks.error.invalidSchedule'));
+      return;
+    }
+    if (prompt.trim().length === 0) {
+      setFormError(t('scheduledTasks.error.emptyPrompt'));
+      return;
+    }
+    setSubmitting(true);
+    setFormError(null);
+    try {
+      const updated = await actions.updateScheduledTask(loadedTask.id, {
+        cron,
+        prompt: prompt.trim(),
+        name: name.trim() || null,
+      });
+      setLoadedTask(updated);
+      setName(updated.name ?? '');
+      setPrompt(updated.prompt);
+      setBuilder(parseCronToBuilder(updated.cron));
+      setShowForm(false);
+    } catch (err) {
+      setFormError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setSubmitting(false);
+    }
+  }, [actions, builder, loadedTask, name, prompt, t]);
+
+  const handleToggle = useCallback(async () => {
+    if (!loadedTask) return;
+    setBusy(true);
+    setFormError(null);
+    try {
+      const updated = await actions.updateScheduledTask(loadedTask.id, {
+        enabled: !loadedTask.enabled,
+      });
+      setLoadedTask(updated);
+    } catch (err) {
+      setFormError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusy(false);
+    }
+  }, [actions, loadedTask]);
+
+  const handleDelete = useCallback(async () => {
+    if (!loadedTask) return;
+    setBusy(true);
+    setFormError(null);
+    try {
+      await actions.deleteScheduledTask(loadedTask.id);
+      setLoadedTask(null);
+      setShowDeleteConfirm(false);
+    } catch (err) {
+      setFormError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusy(false);
+    }
+  }, [actions, loadedTask]);
+
+  const previewCron = buildCron(builder);
+  const previewLabel = previewCron ? describeCron(previewCron, t) : null;
+
+  return (
+    <div className={styles.detail}>
+      {loading && (
+        <div className={styles.empty}>{t('scheduledTasks.loading')}</div>
+      )}
+      {loadError && <div className={taskStyles.loadError}>{loadError}</div>}
+      {isDeleted && (
+        <div className={styles.empty}>
+          {t('scheduledTasks.deletedSnapshot')}
+        </div>
+      )}
+      {isSessionScoped && (
+        <div className={styles.empty}>
+          {t('scheduledTasks.sessionScopedSnapshot')}
+        </div>
+      )}
+      {!isDeleted && (
+        <div className={styles.section}>
+          <div className={styles.fieldGrid}>
+            <span className={styles.fieldLabel}>
+              {t('scheduledTasks.name')}
+            </span>
+            <span className={styles.fieldValue}>{detailTitle}</span>
+            <span className={styles.fieldLabel}>
+              {t('scheduledTasks.taskId')}
+            </span>
+            <span className={styles.fieldValue}>{task.id}</span>
+            <span className={styles.fieldLabel}>
+              {t('scheduledTasks.schedule')}
+            </span>
+            <span className={styles.fieldValue}>
+              {describeCron(detailCron, t)}
+            </span>
+            <span className={styles.fieldLabel}>Cron</span>
+            <span className={styles.fieldValue}>{detailCron}</span>
+            <span className={styles.fieldLabel}>
+              {t('scheduledTasks.type')}
+            </span>
+            <span className={styles.fieldValue}>
+              {detailRecurring
+                ? t('scheduledTasks.repeats')
+                : t('scheduledTasks.runsOnce')}
+            </span>
+            {detailEnabled !== undefined && (
+              <>
+                <span className={styles.fieldLabel}>
+                  {t('scheduledTasks.status')}
+                </span>
+                <span className={styles.fieldValue}>
+                  {detailEnabled
+                    ? t('scheduledTasks.enable')
+                    : t('scheduledTasks.disable')}
+                </span>
+              </>
+            )}
+          </div>
+        </div>
+      )}
+
+      {!isDeleted && (
+        <div className={styles.section}>
+          <div className={styles.sectionTitle}>Prompt</div>
+          <div className={styles.description}>{detailPrompt}</div>
+        </div>
+      )}
+
+      {formError && <div className={taskStyles.formError}>{formError}</div>}
+
+      <div className={styles.actionsRow}>
+        <button
+          type="button"
+          className={taskStyles.primaryButton}
+          disabled={!canEdit || busy}
+          onClick={openEdit}
+        >
+          {t('scheduledTasks.edit')}
+        </button>
+        <button
+          type="button"
+          className={taskStyles.secondaryButton}
+          disabled={!canEdit || busy}
+          onClick={() => void handleToggle()}
+        >
+          {loadedTask?.enabled
+            ? t('scheduledTasks.disable')
+            : t('scheduledTasks.enable')}
+        </button>
+        <button
+          type="button"
+          className={taskStyles.secondaryButton}
+          disabled={!canEdit || busy}
+          onClick={() => setShowDeleteConfirm(true)}
+        >
+          {t('scheduledTasks.delete')}
+        </button>
+      </div>
+
+      {showDeleteConfirm && loadedTask && (
+        <DialogShell
+          title={t('scheduledTasks.deleteConfirmTitle')}
+          size="sm"
+          onClose={() => setShowDeleteConfirm(false)}
+        >
+          <div className={taskStyles.formFields}>
+            <div className={styles.description}>
+              {t('scheduledTasks.deleteConfirm', {
+                name: loadedTask.name || loadedTask.prompt,
+              })}
+            </div>
+            {formError && (
+              <div className={taskStyles.formError}>{formError}</div>
+            )}
+            <div className={taskStyles.formActions}>
+              <button
+                type="button"
+                className={taskStyles.secondaryButton}
+                onClick={() => setShowDeleteConfirm(false)}
+                disabled={busy}
+              >
+                {t('scheduledTasks.cancel')}
+              </button>
+              <button
+                type="button"
+                className={taskStyles.primaryButton}
+                onClick={() => void handleDelete()}
+                disabled={busy}
+              >
+                {t('scheduledTasks.delete')}
+              </button>
+            </div>
+          </div>
+        </DialogShell>
+      )}
+
+      {showForm && (
+        <DialogShell
+          title={t('scheduledTasks.editTitle')}
+          size="md"
+          onClose={closeEdit}
+        >
+          <div className={taskStyles.formFields}>
+            <label className={taskStyles.field}>
+              <span className={taskStyles.fieldLabel}>
+                {t('scheduledTasks.name')}
+              </span>
+              <input
+                className={taskStyles.input}
+                type="text"
+                value={name}
+                maxLength={200}
+                placeholder={t('scheduledTasks.namePlaceholder')}
+                onChange={(e) => setName(e.target.value)}
+              />
+            </label>
+
+            <label className={taskStyles.field}>
+              <span className={taskStyles.fieldLabel}>
+                {t('scheduledTasks.prompt')}
+                <span className={taskStyles.required}>*</span>
+              </span>
+              <textarea
+                className={taskStyles.textarea}
+                value={prompt}
+                rows={4}
+                maxLength={100_000}
+                placeholder={t('scheduledTasks.promptPlaceholder')}
+                onChange={(e) => setPrompt(e.target.value)}
+              />
+            </label>
+
+            <div className={taskStyles.scheduleRow}>
+              <label className={taskStyles.field}>
+                <span className={taskStyles.fieldLabel}>
+                  {t('scheduledTasks.frequency')}
+                </span>
+                <select
+                  className={taskStyles.select}
+                  value={builder.frequency}
+                  onChange={(e) => {
+                    const frequency = e.target.value as Frequency;
+                    setBuilder((value) => ({
+                      ...value,
+                      frequency,
+                      ...(frequency === 'hourly' ? { time: '00:00' } : {}),
+                    }));
+                  }}
+                >
+                  {FREQUENCIES.map((frequency) => (
+                    <option key={frequency} value={frequency}>
+                      {t(`scheduledTasks.freq.${frequency}`)}
+                    </option>
+                  ))}
+                </select>
+              </label>
+
+              {(builder.frequency === 'daily' ||
+                builder.frequency === 'weekdays' ||
+                builder.frequency === 'weekly') && (
+                <label className={taskStyles.field}>
+                  <span className={taskStyles.fieldLabel}>
+                    {t('scheduledTasks.time')}
+                  </span>
+                  <input
+                    className={taskStyles.input}
+                    type="time"
+                    value={builder.time}
+                    onChange={(e) =>
+                      setBuilder((value) => ({
+                        ...value,
+                        time: e.target.value,
+                      }))
+                    }
+                  />
+                </label>
+              )}
+
+              {builder.frequency === 'weekly' && (
+                <label className={taskStyles.field}>
+                  <span className={taskStyles.fieldLabel}>
+                    {t('scheduledTasks.weekday')}
+                  </span>
+                  <select
+                    className={taskStyles.select}
+                    value={builder.weekday}
+                    onChange={(e) =>
+                      setBuilder((value) => ({
+                        ...value,
+                        weekday: Number(e.target.value),
+                      }))
+                    }
+                  >
+                    {t('scheduledTasks.weekdayNames')
+                      .split(',')
+                      .map((label, index) => (
+                        <option key={index} value={index}>
+                          {label}
+                        </option>
+                      ))}
+                  </select>
+                </label>
+              )}
+
+              {builder.frequency === 'minutes' && (
+                <label className={taskStyles.field}>
+                  <span className={taskStyles.fieldLabel}>
+                    {t('scheduledTasks.interval')}
+                  </span>
+                  <select
+                    className={taskStyles.select}
+                    value={builder.minuteInterval}
+                    onChange={(e) =>
+                      setBuilder((value) => ({
+                        ...value,
+                        minuteInterval: Number(e.target.value),
+                      }))
+                    }
+                  >
+                    {MINUTE_INTERVALS.map((minute) => (
+                      <option key={minute} value={minute}>
+                        {minute}
+                      </option>
+                    ))}
+                  </select>
+                </label>
+              )}
+
+              {builder.frequency === 'custom' && (
+                <label
+                  className={`${taskStyles.field} ${taskStyles.fieldGrow}`}
+                >
+                  <span className={taskStyles.fieldLabel}>
+                    {t('scheduledTasks.cron')}
+                  </span>
+                  <input
+                    className={taskStyles.input}
+                    type="text"
+                    value={builder.customCron}
+                    spellCheck={false}
+                    placeholder="0 9 * * 1-5"
+                    onChange={(e) =>
+                      setBuilder((value) => ({
+                        ...value,
+                        customCron: e.target.value,
+                      }))
+                    }
+                  />
+                </label>
+              )}
+            </div>
+
+            <div className={taskStyles.preview}>
+              {previewLabel ? (
+                <>
+                  <span className={taskStyles.previewLabel}>
+                    {previewLabel}
+                  </span>
+                  <code className={taskStyles.previewCron}>{previewCron}</code>
+                </>
+              ) : (
+                <span className={taskStyles.previewInvalid}>
+                  {t('scheduledTasks.error.invalidSchedule')}
+                </span>
+              )}
+            </div>
+
+            {formError && (
+              <div className={taskStyles.formError}>{formError}</div>
+            )}
+
+            <div className={taskStyles.formActions}>
+              <button
+                type="button"
+                className={taskStyles.secondaryButton}
+                onClick={closeEdit}
+                disabled={submitting}
+              >
+                {t('scheduledTasks.cancel')}
+              </button>
+              <button
+                type="button"
+                className={taskStyles.primaryButton}
+                onClick={() => void handleSave()}
+                disabled={submitting}
+              >
+                {submitting
+                  ? t('scheduledTasks.saving')
+                  : t('scheduledTasks.save')}
+              </button>
+            </div>
+          </div>
+        </DialogShell>
+      )}
+    </div>
+  );
+}
+
+function ReviewChanges({
+  changes,
+  selectedPath,
+  panelWidth,
+  workspaceCwd,
+}: {
+  changes: readonly TurnOutputFileChange[];
+  selectedPath: string | null;
+  panelWidth?: number;
+  workspaceCwd?: string;
+}) {
+  const { t } = useI18n();
+  const [isTreeOpen, setIsTreeOpen] = useState(
+    () => !panelWidth || panelWidth >= MIN_PANEL_WIDTH_FOR_DEFAULT_TREE,
+  );
+  const [isFileListOpen, setIsFileListOpen] = useState(true);
+  const [isReviewStacked, setIsReviewStacked] = useState(false);
+  const [reviewListWidth, setReviewListWidth] = useState(520);
+  const reviewListWidthRef = useRef(reviewListWidth);
+  const reviewContentRef = useRef<HTMLDivElement | null>(null);
+  const reviewResizeCleanupRef = useRef<(() => void) | null>(null);
+  const [expandedPath, setExpandedPath] = useState<string | null>(null);
+  const showTree = isTreeOpen;
+  const fileTree = useMemo(
+    () => buildFileTree(changes, workspaceCwd),
+    [changes, workspaceCwd],
+  );
+
+  useEffect(() => {
+    setExpandedPath(selectedPath);
+  }, [selectedPath]);
+
+  useEffect(() => {
+    reviewListWidthRef.current = reviewListWidth;
+  }, [reviewListWidth]);
+
+  useEffect(() => {
+    const container = reviewContentRef.current;
+    if (!container) return;
+    const update = () => {
+      setIsReviewStacked(container.clientWidth < MAX_REVIEW_SIDE_BY_SIDE_WIDTH);
+    };
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [isFileListOpen]);
+
+  useEffect(() => () => reviewResizeCleanupRef.current?.(), []);
+
+  const handleReviewSplitResizeStart = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      const container = reviewContentRef.current;
+      if (!container) return;
+      event.preventDefault();
+      const resizeHandle = event.currentTarget;
+      resizeHandle.setPointerCapture(event.pointerId);
+      const startX = event.clientX;
+      const startWidth = reviewListWidthRef.current;
+      const containerWidth = container.getBoundingClientRect().width;
+      const maxWidth = Math.max(180, containerWidth - 180);
+      const previousCursor = document.body.style.cursor;
+      const previousUserSelect = document.body.style.userSelect;
+      let pendingWidth = startWidth;
+      let animationFrame: number | null = null;
+
+      document.body.style.cursor = 'col-resize';
+      document.body.style.userSelect = 'none';
+
+      const flushWidth = () => {
+        animationFrame = null;
+        setReviewListWidth(pendingWidth);
+      };
+
+      const handlePointerMove = (moveEvent: PointerEvent) => {
+        pendingWidth = Math.min(
+          maxWidth,
+          Math.max(180, startWidth + (moveEvent.clientX - startX)),
+        );
+        if (animationFrame === null) {
+          animationFrame = window.requestAnimationFrame(flushWidth);
+        }
+      };
+      let handlePointerUp: () => void = () => {};
+      const cleanupResize = (commitWidth: boolean) => {
+        reviewResizeCleanupRef.current = null;
+        if (animationFrame !== null) {
+          window.cancelAnimationFrame(animationFrame);
+          animationFrame = null;
+        }
+        if (commitWidth) setReviewListWidth(pendingWidth);
+        if (resizeHandle.hasPointerCapture(event.pointerId)) {
+          resizeHandle.releasePointerCapture(event.pointerId);
+        }
+        document.body.style.cursor = previousCursor;
+        document.body.style.userSelect = previousUserSelect;
+        window.removeEventListener('pointermove', handlePointerMove);
+        window.removeEventListener('pointerup', handlePointerUp);
+        window.removeEventListener('pointercancel', handlePointerUp);
+      };
+      handlePointerUp = () => cleanupResize(true);
+      reviewResizeCleanupRef.current = () => cleanupResize(false);
+      window.addEventListener('pointermove', handlePointerMove);
+      window.addEventListener('pointerup', handlePointerUp);
+      window.addEventListener('pointercancel', handlePointerUp);
+    },
+    [],
+  );
+  if (changes.length === 0) {
+    return <div className={styles.empty}>No file changes to review.</div>;
+  }
+
+  const totals = sumLineStats(changes);
+  const toggleDiff = (path: string) => {
+    setExpandedPath((current) => (current === path ? null : path));
+  };
+
+  return (
+    <div className={styles.review}>
+      <div className={styles.reviewToolbar}>
+        <div className={styles.reviewToolbarTitle}>
+          <span>{t('turnOutputs.previousTurn')}</span>
+          <LineStats
+            additions={totals?.additions}
+            deletions={totals?.deletions}
+            className={styles.lineStats}
+            additionsClassName={styles.additions}
+            deletionsClassName={styles.deletions}
+          />
+        </div>
+        <div className={styles.reviewToolbarActions}>
+          <button
+            type="button"
+            className={styles.reviewTotalsButton}
+            onClick={() => setIsFileListOpen((value) => !value)}
+            aria-expanded={isFileListOpen}
+          >
+            <span>{t('turnOutputs.fileCount', { count: changes.length })}</span>
+            <span
+              className={[
+                styles.chevron,
+                isFileListOpen ? styles.chevronOpen : '',
+              ]
+                .filter(Boolean)
+                .join(' ')}
+              aria-hidden="true"
+            >
+              <ChevronIcon />
+            </span>
+          </button>
+          <button
+            type="button"
+            className={[
+              styles.iconButton,
+              isTreeOpen ? styles.iconButtonActive : '',
+            ]
+              .filter(Boolean)
+              .join(' ')}
+            onClick={() => setIsTreeOpen((value) => !value)}
+            aria-label={
+              isTreeOpen
+                ? t('turnOutputs.closeFileTree')
+                : t('turnOutputs.openFileTree')
+            }
+            title={
+              isTreeOpen
+                ? t('turnOutputs.closeFileTree')
+                : t('turnOutputs.openFileTree')
+            }
+          >
+            {isTreeOpen ? <FolderOpenIcon /> : <FolderIcon />}
+          </button>
+        </div>
+      </div>
+      {isFileListOpen && (
+        <div
+          ref={reviewContentRef}
+          className={[
+            styles.reviewContent,
+            showTree ? '' : styles.reviewContentListOnly,
+            showTree && isReviewStacked ? styles.reviewContentStacked : '',
+          ]
+            .filter(Boolean)
+            .join(' ')}
+          style={
+            {
+              '--review-list-width': `${reviewListWidth}px`,
+            } as CSSProperties
+          }
+        >
+          <div
+            className={[
+              styles.reviewList,
+              expandedPath ? styles.reviewListWithExpanded : '',
+            ]
+              .filter(Boolean)
+              .join(' ')}
+          >
+            {changes.map((change) => {
+              const isExpanded = expandedPath === change.path;
+              return (
+                <div
+                  key={`${change.toolCallId}:${change.path}`}
+                  className={[
+                    styles.reviewItem,
+                    isExpanded ? styles.reviewItemExpanded : '',
+                  ]
+                    .filter(Boolean)
+                    .join(' ')}
+                >
+                  <button
+                    type="button"
+                    className={styles.reviewRow}
+                    data-selected={change.path === selectedPath || undefined}
+                    onClick={() => toggleDiff(change.path)}
+                  >
+                    <span className={styles.fileIcon}>
+                      {fileExtensionLabel(change.path)}
+                    </span>
+                    <PathText
+                      path={displayPath(change.path, workspaceCwd)}
+                      title={change.path}
+                    />
+                    <LineStats
+                      additions={change.additions}
+                      deletions={change.deletions}
+                      className={styles.lineStats}
+                      additionsClassName={styles.additions}
+                      deletionsClassName={styles.deletions}
+                    />
+                    <span
+                      className={[
+                        styles.chevron,
+                        isExpanded ? styles.chevronOpen : '',
+                      ]
+                        .filter(Boolean)
+                        .join(' ')}
+                      aria-hidden="true"
+                    >
+                      <ChevronIcon />
+                    </span>
+                  </button>
+                  {isExpanded && <DiffPreview change={change} />}
+                </div>
+              );
+            })}
+          </div>
+          {showTree && !isReviewStacked && (
+            <div
+              className={styles.reviewSplitHandle}
+              role="separator"
+              aria-orientation="vertical"
+              onPointerDown={handleReviewSplitResizeStart}
+            />
+          )}
+          {showTree && (
+            <div className={styles.tree}>
+              {fileTree.children.map((child) => (
+                <TreeNode
+                  key={child.path}
+                  node={child}
+                  depth={0}
+                  selectedPath={selectedPath}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function DiffPreview({ change }: { change: TurnOutputFileChange }) {
+  if (change.diffs.length === 0) {
+    return <div className={styles.diffEmpty}>No diff available.</div>;
+  }
+  const diffs = getDisplayDiffs(change.diffs);
+  return (
+    <div className={styles.diffPreview}>
+      {diffs.map((diff, index) => (
+        <CodeMirrorDiff
+          key={index}
+          oldText={diff.oldText}
+          newText={diff.newText}
+        />
+      ))}
+    </div>
+  );
+}
+
+function getDisplayDiffs(
+  diffs: readonly TurnOutputFileDiff[],
+): readonly TurnOutputFileDiff[] {
+  for (let index = diffs.length - 1; index >= 0; index--) {
+    const diff = diffs[index];
+    if (diff?.fullContent) return diffs.slice(index);
+  }
+  return diffs;
+}
+
+function CodeMirrorDiff({
+  oldText,
+  newText,
+}: {
+  oldText: string;
+  newText: string;
+}) {
+  const hostRef = useRef<HTMLDivElement | null>(null);
+  const [isWide, setIsWide] = useState<boolean | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host) return;
+    const update = () => setIsWide(host.clientWidth >= 720);
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(host);
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host || isWide === null) return;
+    host.replaceChildren();
+    setError(null);
+    let cancelled = false;
+    let view: { destroy(): void } | null = null;
+
+    const extensions = [
+      basicSetup,
+      EditorView.editable.of(false),
+      EditorState.readOnly.of(true),
+      EditorView.lineWrapping,
+    ];
+    const diffConfig = { scanLimit: 1_000, timeout: 500 };
+    const collapseUnchanged = { margin: 3, minSize: 8 };
+
+    void import('@codemirror/merge')
+      .then(({ MergeView, unifiedMergeView }) => {
+        if (cancelled) return;
+        try {
+          if (isWide) {
+            view = new MergeView({
+              a: { doc: oldText, extensions },
+              b: { doc: newText, extensions },
+              parent: host,
+              highlightChanges: true,
+              gutter: true,
+              revertControls: undefined,
+              collapseUnchanged,
+              diffConfig,
+            });
+            return;
+          }
+
+          view = new EditorView({
+            doc: newText,
+            extensions: [
+              ...extensions,
+              unifiedMergeView({
+                original: oldText,
+                highlightChanges: true,
+                gutter: true,
+                mergeControls: false,
+                allowInlineDiffs: true,
+                collapseUnchanged,
+                diffConfig,
+              }),
+            ],
+            parent: host,
+          });
+        } catch (err) {
+          if (!cancelled) {
+            setError(err instanceof Error ? err.message : String(err));
+          }
+        }
+      })
+      .catch((err: unknown) => {
+        if (!cancelled) {
+          setError(err instanceof Error ? err.message : String(err));
+        }
+      });
+    return () => {
+      cancelled = true;
+      view?.destroy();
+    };
+  }, [isWide, newText, oldText]);
+
+  return (
+    <div className={styles.codeMirrorDiffWrap}>
+      <div ref={hostRef} className={styles.codeMirrorDiff} />
+      {error && (
+        <div className={styles.diffError}>Diff unavailable: {error}</div>
+      )}
+    </div>
+  );
+}
+
+interface FileTreeNode {
+  name: string;
+  path: string;
+  file?: TurnOutputFileChange;
+  children: FileTreeNode[];
+}
+
+function TreeNode({
+  node,
+  depth,
+  selectedPath,
+}: {
+  node: FileTreeNode;
+  depth: number;
+  selectedPath: string | null;
+}) {
+  const isFile = Boolean(node.file);
+  const [isOpen, setIsOpen] = useState(true);
+  const rowClassName = [
+    styles.treeRow,
+    isFile ? styles.treeFile : styles.treeFolder,
+  ]
+    .filter(Boolean)
+    .join(' ');
+  const rowStyle = {
+    paddingLeft: 10 + depth * 18,
+    '--tree-row-line-left': `${19 + Math.max(0, depth - 1) * 18}px`,
+  } as CSSProperties;
+  const childrenStyle = {
+    '--tree-children-line-left': `${19 + depth * 18}px`,
+  } as CSSProperties;
+  const rowContent = (
+    <>
+      <span className={styles.treeTwisty}>
+        {!isFile && (
+          <span
+            className={[
+              styles.treeChevron,
+              isOpen ? '' : styles.treeChevronClosed,
+            ]
+              .filter(Boolean)
+              .join(' ')}
+          >
+            <TreeChevronIcon />
+          </span>
+        )}
+      </span>
+      <span className={styles.treeContent}>
+        {isFile && (
+          <span className={styles.fileIcon}>
+            {fileExtensionLabel(node.path)}
+          </span>
+        )}
+        <span className={styles.treeName}>{node.name}</span>
+      </span>
+      {node.file?.isArtifact && (
+        <span className={styles.reviewBadge}>artifact</span>
+      )}
+    </>
+  );
+
+  return (
+    <div className={styles.treeNode}>
+      {isFile ? (
+        <div
+          className={rowClassName}
+          data-selected={node.file?.path === selectedPath || undefined}
+          data-depth={depth}
+          style={rowStyle}
+          title={node.path}
+        >
+          {rowContent}
+        </div>
+      ) : (
+        <button
+          type="button"
+          className={rowClassName}
+          data-depth={depth}
+          style={rowStyle}
+          title={node.path}
+          aria-expanded={isOpen}
+          onClick={() => setIsOpen((value) => !value)}
+        >
+          {rowContent}
+        </button>
+      )}
+      {!isFile && isOpen && node.children.length > 0 && (
+        <div className={styles.treeChildren} style={childrenStyle}>
+          {node.children.map((child) => (
+            <TreeNode
+              key={child.path}
+              node={child}
+              depth={depth + 1}
+              selectedPath={selectedPath}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function PathText({ path, title }: { path: string; title?: string }) {
+  const ref = useRef<HTMLSpanElement | null>(null);
+  const [display, setDisplay] = useState(() => splitReviewPath(path));
+  useLayoutEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    const update = () => setDisplay(compactReviewPath(path, node));
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [path]);
+  return (
+    <span ref={ref} className={styles.reviewPath} title={title ?? path}>
+      {display.prefix && (
+        <span className={styles.pathPrefix}>{display.prefix}</span>
+      )}
+      <span className={styles.pathFileName}>{display.leaf}</span>
+    </span>
+  );
+}
+
+function splitReviewPath(path: string) {
+  const slashIndex = path.lastIndexOf('/');
+  return slashIndex < 0
+    ? { prefix: '', leaf: path }
+    : {
+        prefix: path.slice(0, slashIndex + 1),
+        leaf: path.slice(slashIndex + 1),
+      };
+}
+
+let measureCanvas: HTMLCanvasElement | null = null;
+
+function compactReviewPath(path: string, container: HTMLElement) {
+  const full = splitReviewPath(path);
+  const width = container.clientWidth;
+  if (width <= 0) return full;
+  const measure = createTextMeasurer(container);
+  if (measure(path) <= width) return full;
+  const parts = path.split('/').filter(Boolean);
+  const leaf = parts.at(-1) ?? path;
+  const fileWidth = measure(leaf);
+  if (parts.length <= 1 || fileWidth + measure('.../') > width) {
+    return { prefix: '', leaf };
+  }
+  let prefix = '.../';
+  for (let dirCount = 1; dirCount < parts.length; dirCount++) {
+    const dirs = parts.slice(parts.length - 1 - dirCount, -1);
+    const candidate = `.../${dirs.join('/')}/`;
+    if (measure(candidate) + fileWidth > width) break;
+    prefix = candidate;
+  }
+  return { prefix, leaf };
+}
+
+function createTextMeasurer(element: HTMLElement) {
+  measureCanvas ??= document.createElement('canvas');
+  const context = measureCanvas.getContext('2d');
+  const style = window.getComputedStyle(element);
+  if (context) {
+    context.font = [
+      style.fontStyle,
+      style.fontVariant,
+      style.fontWeight,
+      style.fontSize,
+      style.fontFamily,
+    ].join(' ');
+  }
+  return (text: string) => context?.measureText(text).width ?? text.length * 8;
+}
+
+function FolderIcon() {
+  return (
+    <svg
+      className={styles.toolbarIcon}
+      viewBox="0 0 24 24"
+      fill="none"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <path
+        d="M3.5 7.5h6l1.6 2h9.4v8.2a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2V7.5Z"
+        stroke="currentColor"
+        strokeWidth="1.7"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3.5 7.5V5.8a1.5 1.5 0 0 1 1.5-1.5h4l1.8 2.1h7.2a1.5 1.5 0 0 1 1.5 1.5v1.6"
+        stroke="currentColor"
+        strokeWidth="1.7"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function FolderOpenIcon() {
+  return (
+    <svg
+      className={styles.toolbarIcon}
+      viewBox="0 0 24 24"
+      fill="none"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <path
+        d="M3.5 8.2V5.8A1.5 1.5 0 0 1 5 4.3h4l1.8 2.1h7.2a1.5 1.5 0 0 1 1.5 1.5v1.4"
+        stroke="currentColor"
+        strokeWidth="1.7"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M4.8 19.7h12.9a2 2 0 0 0 1.9-1.4l2-7H6.4l-2.8 7.1a.9.9 0 0 0 1.2 1.3Z"
+        stroke="currentColor"
+        strokeWidth="1.7"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function ChevronIcon() {
+  return (
+    <svg
+      className={styles.chevronIcon}
+      viewBox="0 0 16 16"
+      fill="none"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <path
+        d="m6 4 4 4-4 4"
+        stroke="currentColor"
+        strokeWidth="1.7"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function TreeChevronIcon() {
+  return (
+    <svg
+      className={styles.treeChevronIcon}
+      viewBox="0 0 16 16"
+      fill="none"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <path
+        d="m4 6 4 4 4-4"
+        stroke="currentColor"
+        strokeWidth="1.7"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function buildFileTree(
+  changes: readonly TurnOutputFileChange[],
+  workspaceCwd?: string,
+): FileTreeNode {
+  const root: FileTreeNode = { name: '', path: '', children: [] };
+  for (const change of changes) {
+    const parts = displayPath(change.path, workspaceCwd)
+      .split('/')
+      .filter(Boolean);
+    let current = root;
+    for (let index = 0; index < parts.length; index++) {
+      const part = parts[index]!;
+      const path = parts.slice(0, index + 1).join('/');
+      let child = current.children.find((node) => node.name === part);
+      if (!child) {
+        child = { name: part, path, children: [] };
+        current.children.push(child);
+      }
+      if (index === parts.length - 1) child.file = change;
+      current = child;
+    }
+  }
+  sortTree(root);
+  return root;
+}
+
+function sortTree(node: FileTreeNode) {
+  node.children.sort((left, right) => {
+    if (Boolean(left.file) !== Boolean(right.file)) return left.file ? 1 : -1;
+    return left.name.localeCompare(right.name);
+  });
+  for (const child of node.children) sortTree(child);
+}
+
+function fileName(value: string) {
+  const parts = normalizePath(value).split('/').filter(Boolean);
+  return parts.at(-1) ?? value;
+}
+
+function fileExtensionLabel(value: string) {
+  const name = fileName(value);
+  const extension = name.includes('.')
+    ? name.split('.').pop()?.toLowerCase()
+    : '';
+  if (!extension) return 'FILE';
+  const labels: Record<string, string> = {
+    css: 'CSS',
+    html: 'HTML',
+    js: 'JS',
+    json: 'JSON',
+    jsx: 'JSX',
+    md: 'MD',
+    ts: 'TS',
+    tsx: 'TSX',
+  };
+  return labels[extension] ?? extension.slice(0, 3).toUpperCase();
+}
+
+function ArtifactDetail({
+  artifact,
+  workspaceActions,
+  previewContent,
+}: {
+  artifact: DaemonSessionArtifact;
+  workspaceActions: DaemonWorkspaceActions;
+  previewContent?: string;
+}) {
+  const location = getArtifactLocation(artifact);
+  const safeUrl = isSafeHref(artifact.url) ? artifact.url : undefined;
+  const isAutomationSnapshot =
+    artifact.metadata?.['artifactType'] === 'automation_snapshot';
+  const canPreviewWorkspaceFile =
+    artifact.storage === 'workspace' && Boolean(artifact.workspacePath);
+  const canPreviewHtml =
+    canPreviewWorkspaceFile &&
+    artifact.workspacePath &&
+    isHtmlArtifact(artifact);
+
+  if (canPreviewHtml && artifact.workspacePath) {
+    return (
+      <HtmlArtifactPreview
+        workspacePath={artifact.workspacePath}
+        artifactVersion={artifact.updatedAt}
+        workspaceActions={workspaceActions}
+        previewContent={previewContent}
+      />
+    );
+  }
+
+  if (canPreviewWorkspaceFile && artifact.workspacePath) {
+    return (
+      <FileArtifactPreview
+        workspacePath={artifact.workspacePath}
+        artifactVersion={artifact.updatedAt}
+        workspaceActions={workspaceActions}
+      />
+    );
+  }
+
+  return (
+    <div className={styles.detail}>
+      <div className={styles.section}>
+        <div className={styles.sectionTitle}>
+          {isAutomationSnapshot ? 'Automation Snapshot' : 'Artifact'}
+        </div>
+        <div className={styles.fieldGrid}>
+          <Field label="Type" value={artifactKindLabel(artifact.kind)} />
+          <Field label="Storage" value={artifact.storage} />
+          <Field label="Status" value={artifact.status} />
+          <Field label="Source" value={artifact.source} />
+          <Field label="Size" value={formatArtifactSize(artifact.sizeBytes)} />
+          <Field label="Created" value={artifact.createdAt} />
+          <Field label="Updated" value={artifact.updatedAt} />
+          {artifact.toolName && (
+            <Field label="Tool" value={artifact.toolName} />
+          )}
+          {artifact.toolCallId && (
+            <Field label="Tool call" value={artifact.toolCallId} />
+          )}
+        </div>
+      </div>
+
+      {artifact.description && (
+        <div className={styles.section}>
+          <div className={styles.sectionTitle}>Description</div>
+          <div className={styles.description}>{artifact.description}</div>
+        </div>
+      )}
+
+      {isAutomationSnapshot && artifact.metadata && (
+        <div className={styles.section}>
+          <div className={styles.sectionTitle}>Details</div>
+          <div className={styles.fieldGrid}>
+            {metadataField(artifact.metadata, 'automationId', 'Automation ID')}
+            {metadataField(artifact.metadata, 'schedule', 'Schedule')}
+            {metadataField(artifact.metadata, 'timezone', 'Timezone')}
+            {metadataField(artifact.metadata, 'status', 'Status')}
+            {metadataField(artifact.metadata, 'nextRunAt', 'Next run')}
+            {metadataField(artifact.metadata, 'prompt', 'Prompt')}
+          </div>
+        </div>
+      )}
+
+      {(location || safeUrl) && (
+        <div className={styles.section}>
+          <div className={styles.sectionTitle}>Location</div>
+          {safeUrl ? (
+            <a
+              className={styles.link}
+              href={safeUrl}
+              target="_blank"
+              rel="noreferrer"
+            >
+              {safeUrl}
+            </a>
+          ) : (
+            <div className={styles.meta}>{location}</div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function isHtmlArtifact(artifact: DaemonSessionArtifact) {
+  const path = artifact.workspacePath?.toLowerCase() ?? '';
+  return (
+    artifact.kind === 'html' || path.endsWith('.html') || path.endsWith('.htm')
+  );
+}
+
+function HtmlArtifactPreview({
+  workspacePath,
+  artifactVersion,
+  workspaceActions,
+  previewContent,
+}: {
+  workspacePath: string;
+  artifactVersion?: string;
+  workspaceActions: DaemonWorkspaceActions;
+  previewContent?: string;
+}) {
+  const [html, setHtml] = useState<string | null>(previewContent ?? null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    setHtml(previewContent ?? null);
+    setError(null);
+    workspaceActions
+      .readWorkspaceFile(workspacePath)
+      .then((file) => {
+        if (cancelled) return;
+        setHtml(file.content);
+        if (file.truncated) {
+          setError('Preview is truncated because the file is too large.');
+        }
+      })
+      .catch((err: unknown) => {
+        if (cancelled) return;
+        setError(err instanceof Error ? err.message : String(err));
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [artifactVersion, previewContent, workspaceActions, workspacePath]);
+
+  return (
+    <div className={styles.htmlPreviewWrap}>
+      {html === null ? (
+        <div className={styles.empty}>Loading preview...</div>
+      ) : (
+        <iframe
+          className={styles.htmlPreview}
+          referrerPolicy="no-referrer"
+          sandbox=""
+          srcDoc={withArtifactPreviewCsp(html)}
+          title={`Preview ${workspacePath}`}
+        />
+      )}
+      {error && <div className={styles.previewError}>{error}</div>}
+    </div>
+  );
+}
+
+function FileArtifactPreview({
+  workspacePath,
+  artifactVersion,
+  workspaceActions,
+}: {
+  workspacePath: string;
+  artifactVersion?: string;
+  workspaceActions: DaemonWorkspaceActions;
+}) {
+  const hostRef = useRef<HTMLDivElement | null>(null);
+  const [content, setContent] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    setContent(null);
+    setError(null);
+    workspaceActions
+      .readWorkspaceFile(workspacePath)
+      .then((file) => {
+        if (cancelled) return;
+        setContent(file.content);
+        if (file.truncated) {
+          setError('File is truncated because it is too large.');
+        }
+      })
+      .catch((err: unknown) => {
+        if (cancelled) return;
+        setError(err instanceof Error ? err.message : String(err));
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [artifactVersion, workspaceActions, workspacePath]);
+
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host || content === null) return;
+    host.replaceChildren();
+    let view: EditorView;
+    try {
+      view = new EditorView({
+        doc: content,
+        extensions: [
+          basicSetup,
+          EditorView.editable.of(false),
+          EditorState.readOnly.of(true),
+          EditorView.lineWrapping,
+        ],
+        parent: host,
+      });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+      return undefined;
+    }
+    return () => view.destroy();
+  }, [content]);
+
+  return (
+    <div className={styles.filePreviewWrap}>
+      {content === null ? (
+        <div className={styles.empty}>Loading file...</div>
+      ) : (
+        <div ref={hostRef} className={styles.codeMirrorFile} />
+      )}
+      {error && <div className={styles.previewError}>{error}</div>}
+    </div>
+  );
+}
+
+function Field({ label, value }: { label: string; value?: string }) {
+  if (!value) return null;
+  return (
+    <>
+      <span className={styles.fieldLabel}>{label}</span>
+      <span className={styles.fieldValue}>{value}</span>
+    </>
+  );
+}
+
+function metadataField(
+  metadata: NonNullable<DaemonSessionArtifact['metadata']>,
+  key: string,
+  label: string,
+) {
+  const value = metadata[key];
+  if (value === undefined || value === null || value === '') return null;
+  return <Field key={key} label={label} value={String(value)} />;
+}
diff --git a/packages/web-shell/client/components/artifacts/LineStats.tsx b/packages/web-shell/client/components/artifacts/LineStats.tsx
new file mode 100644
index 00000000000..3ef87743ae0
--- /dev/null
+++ b/packages/web-shell/client/components/artifacts/LineStats.tsx
@@ -0,0 +1,41 @@
+import type { TurnOutputFileChange } from './TurnOutputs';
+
+export function LineStats({
+  additions,
+  deletions,
+  className,
+  additionsClassName,
+  deletionsClassName,
+}: {
+  additions: number | undefined;
+  deletions: number | undefined;
+  className: string;
+  additionsClassName: string;
+  deletionsClassName: string;
+}) {
+  if (additions === undefined || deletions === undefined) return null;
+  return (
+    <span className={className}>
+      <span className={additionsClassName}>+{additions}</span>
+      <span className={deletionsClassName}>-{deletions}</span>
+    </span>
+  );
+}
+
+export function sumLineStats(changes: readonly TurnOutputFileChange[]) {
+  if (
+    changes.some(
+      (change) =>
+        change.additions === undefined || change.deletions === undefined,
+    )
+  ) {
+    return undefined;
+  }
+  return changes.reduce(
+    (sum, change) => ({
+      additions: sum.additions + (change.additions ?? 0),
+      deletions: sum.deletions + (change.deletions ?? 0),
+    }),
+    { additions: 0, deletions: 0 },
+  );
+}
diff --git a/packages/web-shell/client/components/artifacts/TurnOutputs.module.css b/packages/web-shell/client/components/artifacts/TurnOutputs.module.css
new file mode 100644
index 00000000000..e6be8cc14dc
--- /dev/null
+++ b/packages/web-shell/client/components/artifacts/TurnOutputs.module.css
@@ -0,0 +1,182 @@
+.root {
+  margin: 8px 0 12px;
+  display: grid;
+  gap: 8px;
+}
+
+.card {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--background);
+  overflow: hidden;
+}
+
+.summary {
+  display: grid;
+  grid-template-columns: 34px minmax(0, 1fr) auto;
+  gap: 12px;
+  align-items: center;
+  padding: 12px;
+}
+
+.icon {
+  width: 34px;
+  height: 34px;
+  border-radius: 6px;
+  background: var(--accent);
+  color: var(--muted-foreground);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.iconSvg {
+  width: 24px;
+  height: 24px;
+  display: block;
+}
+
+.title {
+  min-width: 0;
+  color: var(--foreground);
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.linkButton,
+.reviewButton,
+.showMoreButton {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: var(--foreground);
+  font: inherit;
+  cursor: pointer;
+}
+
+.linkButton {
+  margin-top: 2px;
+  margin-left: 8px;
+  padding: 0;
+  color: var(--muted-foreground);
+  font-size: 13px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 120ms ease;
+}
+
+.card:hover .linkButton,
+.linkButton:focus-visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.linkButton:hover,
+.showMoreButton:hover {
+  color: var(--foreground);
+}
+
+.actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.reviewButton {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 4px 10px;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.reviewButton:hover {
+  background: var(--accent);
+}
+
+.list {
+  display: grid;
+  gap: 0;
+  border-top: 1px solid var(--border);
+  padding: 0;
+}
+
+.fileRow {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: var(--foreground);
+  font: inherit;
+  cursor: pointer;
+  min-width: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 10px;
+  align-items: center;
+  padding: 7px 14px;
+  text-align: left;
+}
+
+.fileRow:hover {
+  background: var(--accent);
+}
+
+.path {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--foreground);
+  font-size: 13px;
+}
+
+.lineStats {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 13px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.additions {
+  color: #16a34a;
+}
+
+.deletions {
+  color: #dc2626;
+}
+
+.showMoreButton {
+  justify-self: start;
+  padding: 7px 14px;
+  color: var(--foreground);
+  font-weight: 400;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.chevronIcon {
+  width: 14px;
+  height: 14px;
+  display: block;
+  color: var(--muted-foreground);
+  transition: transform 120ms ease;
+}
+
+.chevronIconOpen {
+  transform: rotate(180deg);
+}
+
+.artifactInfo {
+  min-width: 0;
+  display: grid;
+  gap: 2px;
+}
+
+.artifactMeta {
+  color: var(--muted-foreground);
+  font-size: 13px;
+  white-space: nowrap;
+}
diff --git a/packages/web-shell/client/components/artifacts/TurnOutputs.test.ts b/packages/web-shell/client/components/artifacts/TurnOutputs.test.ts
new file mode 100644
index 00000000000..eef8141f759
--- /dev/null
+++ b/packages/web-shell/client/components/artifacts/TurnOutputs.test.ts
@@ -0,0 +1,35 @@
+import { describe, expect, it } from 'vitest';
+import type { DaemonSessionArtifact } from '@qwen-code/sdk/daemon';
+import {
+  getArtifactPreviewContent,
+  type TurnOutputFileChange,
+} from './TurnOutputs';
+
+describe('TurnOutputs helpers', () => {
+  it('uses workspace cwd when matching artifact preview content', () => {
+    const artifact = {
+      id: 'artifact-1',
+      kind: 'html',
+      workspacePath: 'reports/summary.html',
+    } as DaemonSessionArtifact;
+    const changes: TurnOutputFileChange[] = [
+      {
+        path: '/workspace/project/reports/summary.html',
+        status: 'modified',
+        toolCallId: 'tool-1',
+        isArtifact: true,
+        diffs: [
+          {
+            oldText: '<html>old</html>',
+            newText: '<html>new</html>',
+            fullContent: true,
+          },
+        ],
+      },
+    ];
+
+    expect(
+      getArtifactPreviewContent(artifact, changes, '/workspace/project'),
+    ).toBe('<html>new</html>');
+  });
+});
diff --git a/packages/web-shell/client/components/artifacts/TurnOutputs.tsx b/packages/web-shell/client/components/artifacts/TurnOutputs.tsx
new file mode 100644
index 00000000000..36b0ea920b8
--- /dev/null
+++ b/packages/web-shell/client/components/artifacts/TurnOutputs.tsx
@@ -0,0 +1,473 @@
+import type { DaemonSessionArtifact } from '@qwen-code/sdk/daemon';
+import type { DaemonWorkspaceActions } from '@qwen-code/webui/daemon-react-sdk';
+import { memo, useState } from 'react';
+import { useI18n } from '../../i18n';
+import { describeCron } from '../dialogs/scheduledTasksSchedule';
+import {
+  artifactKindLabel,
+  formatArtifactSize,
+  isSamePath,
+  stripWorkspacePath,
+} from './artifactUtils';
+import { LineStats, sumLineStats } from './LineStats';
+import styles from './TurnOutputs.module.css';
+
+export interface TurnOutputFileChange {
+  path: string;
+  status: 'created' | 'modified';
+  toolCallId: string;
+  isArtifact: boolean;
+  additions?: number;
+  deletions?: number;
+  diffs: TurnOutputFileDiff[];
+}
+
+export interface TurnOutputFileDiff {
+  oldText: string;
+  newText: string;
+  fileDiff?: string;
+  fullContent?: boolean;
+}
+
+export interface TurnOutputScheduledTask {
+  id: string;
+  toolCallId: string;
+  title: string;
+  cron: string;
+  prompt: string;
+  recurring: boolean;
+  durable: boolean;
+  display?: string;
+}
+
+export type TurnOutputKind = 'file' | 'artifact' | 'scheduled_task';
+
+export const TURN_OUTPUT_KINDS: readonly TurnOutputKind[] = [
+  'file',
+  'artifact',
+  'scheduled_task',
+];
+
+export type TurnOutputOpenRequest =
+  | {
+      id: 'review';
+      kind: 'review';
+      title: string;
+      turnId: string;
+      changes: readonly TurnOutputFileChange[];
+      selectedPath?: string;
+    }
+  | {
+      id: string;
+      kind: 'artifact';
+      title: string;
+      turnId: string;
+      artifactId: string;
+      artifact: DaemonSessionArtifact;
+      workspaceActions?: DaemonWorkspaceActions;
+      previewContent?: string;
+    }
+  | {
+      id: string;
+      kind: 'scheduled_task';
+      title: string;
+      turnId: string;
+      task: TurnOutputScheduledTask;
+      workspaceActions?: DaemonWorkspaceActions;
+    };
+
+interface TurnOutputsProps {
+  turnId: string;
+  changes: readonly TurnOutputFileChange[];
+  artifacts: readonly DaemonSessionArtifact[];
+  scheduledTasks: readonly TurnOutputScheduledTask[];
+  workspaceCwd?: string;
+  onOpenRequest?: (request: TurnOutputOpenRequest) => void;
+  onReviewChanges: (
+    changes: readonly TurnOutputFileChange[],
+    selectedPath?: string,
+  ) => void;
+  onOpenArtifact: (artifactId: string, previewContent?: string) => void;
+  onOpenScheduledTask: (task: TurnOutputScheduledTask) => void;
+}
+
+function TurnOutputsComponent({
+  turnId,
+  changes,
+  artifacts,
+  scheduledTasks,
+  workspaceCwd,
+  onOpenRequest,
+  onReviewChanges,
+  onOpenArtifact,
+  onOpenScheduledTask,
+}: TurnOutputsProps) {
+  const { t } = useI18n();
+  const [showAllChanges, setShowAllChanges] = useState(false);
+  if (
+    changes.length === 0 &&
+    artifacts.length === 0 &&
+    scheduledTasks.length === 0
+  ) {
+    return null;
+  }
+  const visibleChanges = showAllChanges ? changes : changes.slice(0, 3);
+  const remainingChanges = changes.length - 3;
+  const totals = sumLineStats(changes);
+  const openReview = (selectedPath?: string) => {
+    if (onOpenRequest) {
+      onOpenRequest({
+        id: 'review',
+        kind: 'review',
+        title: t('turnOutputs.review'),
+        turnId,
+        changes,
+        ...(selectedPath ? { selectedPath } : {}),
+      });
+      return;
+    }
+    onReviewChanges(changes, selectedPath);
+  };
+  const openArtifact = (artifact: DaemonSessionArtifact) => {
+    const previewContent = getArtifactPreviewContent(
+      artifact,
+      changes,
+      workspaceCwd,
+    );
+    if (onOpenRequest) {
+      onOpenRequest({
+        id: `artifact:${artifact.id}`,
+        kind: 'artifact',
+        title: artifact.title ?? 'Artifact',
+        turnId,
+        artifactId: artifact.id,
+        artifact,
+        ...(previewContent !== undefined ? { previewContent } : {}),
+      });
+      return;
+    }
+    onOpenArtifact(artifact.id, previewContent);
+  };
+  const openScheduledTask = (task: TurnOutputScheduledTask) => {
+    if (onOpenRequest) {
+      onOpenRequest({
+        id: `scheduled-task:${task.toolCallId}`,
+        kind: 'scheduled_task',
+        title: t('scheduledTasks.title'),
+        turnId,
+        task,
+      });
+      return;
+    }
+    onOpenScheduledTask(task);
+  };
+
+  return (
+    <div className={styles.root}>
+      {changes.length > 0 && (
+        <div className={styles.card}>
+          <div className={styles.summary}>
+            <span className={styles.icon} aria-hidden="true">
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                focusable="false"
+                className={styles.iconSvg}
+              >
+                <rect
+                  x="3"
+                  y="3"
+                  width="18"
+                  height="18"
+                  rx="2"
+                  stroke="currentColor"
+                  strokeWidth="1.6"
+                />
+                <path
+                  d="M9 9.5h6M12 6.5v6"
+                  stroke="currentColor"
+                  strokeWidth="1.4"
+                  strokeLinecap="round"
+                />
+                <path
+                  d="M9 16h6"
+                  stroke="currentColor"
+                  strokeWidth="1.4"
+                  strokeLinecap="round"
+                />
+              </svg>
+            </span>
+            <div>
+              <div className={styles.title}>
+                {t('turnOutputs.filesEdited', { count: changes.length })}
+              </div>
+              <LineStats
+                additions={totals?.additions}
+                deletions={totals?.deletions}
+                className={styles.lineStats}
+                additionsClassName={styles.additions}
+                deletionsClassName={styles.deletions}
+              />
+              <button
+                type="button"
+                className={styles.linkButton}
+                onClick={() => openReview()}
+              >
+                {t('turnOutputs.viewChanges')} ↗
+              </button>
+            </div>
+            <div className={styles.actions}>
+              <button
+                type="button"
+                className={styles.reviewButton}
+                onClick={() => openReview()}
+              >
+                {t('turnOutputs.review')}
+              </button>
+            </div>
+          </div>
+
+          <div className={styles.list}>
+            {visibleChanges.map((change) => (
+              <button
+                type="button"
+                key={`${change.toolCallId}:${change.path}`}
+                className={styles.fileRow}
+                onClick={() => openReview(change.path)}
+                title={change.path}
+              >
+                <span className={styles.path}>
+                  {displayPath(change.path, workspaceCwd)}
+                </span>
+                <LineStats
+                  additions={change.additions}
+                  deletions={change.deletions}
+                  className={styles.lineStats}
+                  additionsClassName={styles.additions}
+                  deletionsClassName={styles.deletions}
+                />
+              </button>
+            ))}
+            {remainingChanges > 0 && (
+              <button
+                type="button"
+                className={styles.showMoreButton}
+                onClick={() => setShowAllChanges((value) => !value)}
+              >
+                <span>
+                  {showAllChanges
+                    ? t('turnOutputs.collapseFiles')
+                    : t('turnOutputs.showMoreFiles', {
+                        count: remainingChanges,
+                      })}
+                </span>
+                <ChevronIcon open={showAllChanges} />
+              </button>
+            )}
+          </div>
+        </div>
+      )}
+
+      {artifacts.map((artifact) => (
+        <ArtifactCard
+          key={artifact.id}
+          artifact={artifact}
+          onOpen={() => openArtifact(artifact)}
+        />
+      ))}
+
+      {scheduledTasks.map((task) => (
+        <ScheduledTaskCard
+          key={task.toolCallId}
+          task={task}
+          scheduleLabel={describeCron(task.cron, t)}
+          onOpen={() => openScheduledTask(task)}
+        />
+      ))}
+    </div>
+  );
+}
+
+function ArtifactCard({
+  artifact,
+  onOpen,
+}: {
+  artifact: DaemonSessionArtifact;
+  onOpen: () => void;
+}) {
+  const { t } = useI18n();
+  const size = formatArtifactSize(artifact.sizeBytes);
+  return (
+    <div className={styles.card}>
+      <div className={styles.summary}>
+        <span className={styles.icon} aria-hidden="true">
+          <DocumentIcon />
+        </span>
+        <div className={styles.artifactInfo}>
+          <div className={styles.title}>{artifact.title}</div>
+          <div className={styles.artifactMeta}>
+            {[artifactKindLabel(artifact.kind), size]
+              .filter(Boolean)
+              .join(' · ')}
+          </div>
+        </div>
+        <div className={styles.actions}>
+          <button
+            type="button"
+            className={styles.reviewButton}
+            onClick={onOpen}
+            title={artifact.title}
+          >
+            {t('common.open')}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ScheduledTaskCard({
+  task,
+  scheduleLabel,
+  onOpen,
+}: {
+  task: TurnOutputScheduledTask;
+  scheduleLabel: string;
+  onOpen: () => void;
+}) {
+  const { t } = useI18n();
+  return (
+    <div className={styles.card}>
+      <div className={styles.summary}>
+        <span className={styles.icon} aria-hidden="true">
+          <ClockIcon />
+        </span>
+        <div className={styles.artifactInfo}>
+          <div className={styles.title}>{task.title}</div>
+          <div className={styles.artifactMeta}>
+            {[
+              scheduleLabel,
+              task.recurring
+                ? t('scheduledTasks.repeats')
+                : t('scheduledTasks.runsOnce'),
+            ]
+              .filter(Boolean)
+              .join(' · ')}
+          </div>
+        </div>
+        <div className={styles.actions}>
+          <button
+            type="button"
+            className={styles.reviewButton}
+            onClick={onOpen}
+            title={task.title}
+          >
+            {t('common.open')}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function DocumentIcon() {
+  return (
+    <svg
+      className={styles.iconSvg}
+      viewBox="0 0 24 24"
+      fill="none"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <rect
+        x="6"
+        y="4"
+        width="12"
+        height="16"
+        rx="2"
+        stroke="currentColor"
+        strokeWidth="1.8"
+      />
+      <path
+        d="M9 10h6M9 14h4"
+        stroke="currentColor"
+        strokeWidth="1.8"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+function ClockIcon() {
+  return (
+    <svg
+      className={styles.iconSvg}
+      viewBox="0 0 24 24"
+      fill="none"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <rect
+        x="4"
+        y="4"
+        width="16"
+        height="16"
+        rx="3"
+        stroke="currentColor"
+        strokeWidth="1.8"
+      />
+      <path
+        d="M12 8v4l3 2"
+        stroke="currentColor"
+        strokeWidth="1.8"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function ChevronIcon({ open }: { open: boolean }) {
+  return (
+    <svg
+      className={[styles.chevronIcon, open ? styles.chevronIconOpen : '']
+        .filter(Boolean)
+        .join(' ')}
+      viewBox="0 0 16 16"
+      fill="none"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <path
+        d="m4 6 4 4 4-4"
+        stroke="currentColor"
+        strokeWidth="1.7"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export const TurnOutputs = memo(TurnOutputsComponent);
+
+export function getArtifactPreviewContent(
+  artifact: DaemonSessionArtifact,
+  changes: readonly TurnOutputFileChange[],
+  workspaceCwd?: string,
+) {
+  if (artifact.kind !== 'html' || !artifact.workspacePath) return undefined;
+  const change = changes.find((item) =>
+    isSamePath(item.path, artifact.workspacePath, workspaceCwd),
+  );
+  if (!change) return undefined;
+  for (let index = change.diffs.length - 1; index >= 0; index--) {
+    const diff = change.diffs[index];
+    if (diff?.fullContent) return diff.newText;
+  }
+  return undefined;
+}
+
+export function displayPath(path: string, workspaceCwd?: string) {
+  return stripWorkspacePath(path, workspaceCwd);
+}
diff --git a/packages/web-shell/client/components/artifacts/artifactUtils.test.ts b/packages/web-shell/client/components/artifacts/artifactUtils.test.ts
new file mode 100644
index 00000000000..d262d06fa34
--- /dev/null
+++ b/packages/web-shell/client/components/artifacts/artifactUtils.test.ts
@@ -0,0 +1,58 @@
+// @vitest-environment jsdom
+
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { normalizePath, withArtifactPreviewCsp } from './artifactUtils';
+
+describe('artifactUtils', () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it('resolves parent path segments', () => {
+    expect(normalizePath('src/foo/../bar.ts')).toBe('src/bar.ts');
+    expect(normalizePath('/workspace/app/../app/src/./main.ts')).toBe(
+      '/workspace/app/src/main.ts',
+    );
+    expect(normalizePath('../outside/file.ts')).toBe('../outside/file.ts');
+  });
+
+  it('injects preview CSP and strips unsafe metadata', () => {
+    const output = withArtifactPreviewCsp(`
+      <html>
+        <head>
+          <meta http-equiv="Content-Security-Policy" content="default-src 'none'; report-uri https://example.com/report">
+          <meta http-equiv="refresh" content="0; url=https://example.com">
+        </head>
+        <body>
+          <noscript><meta http-equiv="refresh" content="0; url=https://example.com"></noscript>
+          <p>Hello</p>
+        </body>
+      </html>
+    `);
+
+    expect(output).toContain('Content-Security-Policy');
+    expect(output).toContain("default-src 'none'");
+    expect(output).not.toContain('report-uri');
+    expect(output).not.toMatch(/http-equiv=["']?refresh/i);
+    expect(output).not.toMatch(/<noscript\b/i);
+    expect(output).toContain('<p>Hello</p>');
+  });
+
+  it('uses the same sanitization when DOMParser is unavailable', () => {
+    vi.stubGlobal('DOMParser', undefined);
+
+    const output = withArtifactPreviewCsp(`
+      <meta http-equiv="Content-Security-Policy" content="report-uri https://example.com/report">
+      <noscript><meta http-equiv="refresh" content="0; url=https://example.com"></noscript>
+      <meta http-equiv="refresh" content="0; url=https://example.com">
+      <p>Hello</p>
+    `);
+
+    expect(output).toContain('Content-Security-Policy');
+    expect(output).toContain("default-src 'none'");
+    expect(output).not.toContain('report-uri');
+    expect(output).not.toMatch(/http-equiv=["']?refresh/i);
+    expect(output).not.toMatch(/<noscript\b/i);
+    expect(output).toContain('<p>Hello</p>');
+  });
+});
diff --git a/packages/web-shell/client/components/artifacts/artifactUtils.ts b/packages/web-shell/client/components/artifacts/artifactUtils.ts
new file mode 100644
index 00000000000..7652076c14f
--- /dev/null
+++ b/packages/web-shell/client/components/artifacts/artifactUtils.ts
@@ -0,0 +1,104 @@
+import type { DaemonSessionArtifact } from '@qwen-code/sdk/daemon';
+
+export function artifactKindLabel(kind: string): string {
+  switch (kind) {
+    case 'html':
+      return 'HTML';
+    case 'pdf':
+      return 'PDF';
+    case 'notebook':
+      return 'Notebook';
+    default:
+      return kind || 'artifact';
+  }
+}
+
+export function formatArtifactSize(sizeBytes: number | undefined): string {
+  if (sizeBytes === undefined) return '';
+  if (sizeBytes < 1024) return `${sizeBytes} B`;
+  if (sizeBytes < 1024 * 1024) return `${(sizeBytes / 1024).toFixed(1)} KB`;
+  return `${(sizeBytes / 1024 / 1024).toFixed(1)} MB`;
+}
+
+export function getArtifactLocation(artifact: DaemonSessionArtifact): string {
+  return artifact.workspacePath ?? artifact.url ?? artifact.managedId ?? '';
+}
+
+export function normalizePath(value: string | undefined): string {
+  const normalized = (value ?? '')
+    .replaceAll('\\', '/')
+    .replace(/^\.\//, '')
+    .replace(/\/+$/, '');
+  const isAbsolute = normalized.startsWith('/');
+  const parts: string[] = [];
+  for (const part of normalized.split('/')) {
+    if (!part || part === '.') continue;
+    if (part === '..') {
+      if (parts.length > 0 && parts.at(-1) !== '..') {
+        parts.pop();
+      } else if (!isAbsolute) {
+        parts.push(part);
+      }
+      continue;
+    }
+    parts.push(part);
+  }
+  const path = parts.join('/');
+  return isAbsolute ? `/${path}` : path;
+}
+
+export function stripWorkspacePath(
+  path: string,
+  workspaceCwd?: string,
+): string {
+  const normalizedPath = normalizePath(path);
+  const normalizedCwd = normalizePath(workspaceCwd);
+  if (!normalizedCwd) return normalizedPath;
+  if (normalizedPath === normalizedCwd) {
+    return normalizedPath.split('/').pop() ?? normalizedPath;
+  }
+  const prefix = `${normalizedCwd}/`;
+  return normalizedPath.startsWith(prefix)
+    ? normalizedPath.slice(prefix.length)
+    : normalizedPath;
+}
+
+export function isSamePath(
+  left: string | undefined,
+  right: string | undefined,
+  workspaceCwd?: string,
+): boolean {
+  const normalizedLeft = stripWorkspacePath(left ?? '', workspaceCwd);
+  const normalizedRight = stripWorkspacePath(right ?? '', workspaceCwd);
+  return Boolean(normalizedLeft) && normalizedLeft === normalizedRight;
+}
+
+const ARTIFACT_PREVIEW_CSP =
+  "default-src 'none'; base-uri 'none'; style-src 'unsafe-inline'; img-src data: blob:;";
+
+export function withArtifactPreviewCsp(html: string) {
+  if (typeof DOMParser === 'undefined') {
+    return `<!doctype html><html><head><meta http-equiv="Content-Security-Policy" content="${ARTIFACT_PREVIEW_CSP}"></head><body>${stripUnsafePreviewMarkup(html)}</body></html>`;
+  }
+  const doc = new DOMParser().parseFromString(html, 'text/html');
+  doc
+    .querySelectorAll(
+      'noscript, meta[http-equiv="refresh" i], meta[http-equiv="Content-Security-Policy" i]',
+    )
+    .forEach((element) => element.remove());
+  const meta = doc.createElement('meta');
+  meta.httpEquiv = 'Content-Security-Policy';
+  meta.content = ARTIFACT_PREVIEW_CSP;
+  doc.head.prepend(meta);
+  return `<!doctype html>${doc.documentElement.outerHTML}`;
+}
+
+function stripUnsafePreviewMarkup(html: string) {
+  return html
+    .replace(/<noscript\b[^>]*>[\s\S]*?<\/noscript>/gi, '')
+    .replace(/<meta\b(?=[^>]*\bhttp-equiv\s*=\s*["']?refresh["']?)[^>]*>/gi, '')
+    .replace(
+      /<meta\b(?=[^>]*\bhttp-equiv\s*=\s*["']?Content-Security-Policy["']?)[^>]*>/gi,
+      '',
+    );
+}
diff --git a/packages/web-shell/client/components/artifacts/turnOutputSelectors.test.ts b/packages/web-shell/client/components/artifacts/turnOutputSelectors.test.ts
new file mode 100644
index 00000000000..ce2a7a09339
--- /dev/null
+++ b/packages/web-shell/client/components/artifacts/turnOutputSelectors.test.ts
@@ -0,0 +1,603 @@
+import { describe, expect, it } from 'vitest';
+import {
+  getArtifactsByTurn,
+  getFileChangesByTurn,
+  getScheduledTasksByTurn,
+} from './turnOutputSelectors';
+import type { ACPToolCall, Message } from '../../adapters/types';
+import type { DaemonSessionArtifact } from '@qwen-code/sdk/daemon';
+
+type ToolGroupMessage = Extract<Message, { role: 'tool_group' }>;
+
+function userMessage(id: string, content: string): Message {
+  return { id, role: 'user', content };
+}
+
+function toolGroup(id: string, tools: ACPToolCall[]): ToolGroupMessage {
+  return { id, role: 'tool_group', tools };
+}
+
+describe('turnOutputSelectors', () => {
+  it('groups artifacts by the turn that recorded them', () => {
+    const messages = [
+      userMessage('u1', 'make report'),
+      toolGroup('tg1', [
+        {
+          callId: 'call-1',
+          toolName: 'record_artifact',
+          status: 'completed',
+          args: { workspacePath: 'reports/a.html' },
+        },
+      ]),
+    ];
+    const artifacts = [
+      {
+        id: 'artifact-1',
+        title: 'Report',
+        workspacePath: 'reports/a.html',
+      },
+    ] as DaemonSessionArtifact[];
+
+    expect(getArtifactsByTurn(messages, artifacts).get('u1')).toEqual(
+      artifacts,
+    );
+  });
+
+  it('merges multiple edits for the same file in one turn', () => {
+    const messages = [
+      userMessage('u1', 'edit file'),
+      toolGroup('tg1', [
+        {
+          callId: 'edit-1',
+          toolName: 'edit',
+          status: 'completed',
+          args: { file_path: 'src/app.ts' },
+          rawOutput: {
+            originalContent: 'one\n',
+            newContent: 'one\ntwo\n',
+            diffStat: { model_added_lines: 1, model_removed_lines: 0 },
+          },
+        },
+        {
+          callId: 'edit-2',
+          toolName: 'edit',
+          status: 'completed',
+          args: { file_path: 'src/app.ts' },
+          rawOutput: {
+            originalContent: 'one\ntwo\n',
+            newContent: 'one\ntwo\nthree\n',
+            diffStat: { model_added_lines: 1, model_removed_lines: 0 },
+          },
+        },
+      ]),
+    ];
+
+    const changes = getFileChangesByTurn(messages, new Map()).get('u1');
+    expect(changes).toHaveLength(1);
+    expect(changes?.[0]).toMatchObject({
+      path: 'src/app.ts',
+      additions: 2,
+      deletions: 0,
+    });
+    expect(changes?.[0]?.diffs).toEqual([
+      {
+        oldText: 'one\n',
+        newText: 'one\ntwo\nthree\n',
+        fullContent: true,
+      },
+    ]);
+  });
+
+  it('uses final full-content diff stats for repeated edits', () => {
+    const messages = [
+      userMessage('u1', 'edit file twice'),
+      toolGroup('tg1', [
+        {
+          callId: 'edit-1',
+          toolName: 'edit',
+          status: 'completed',
+          args: { file_path: 'src/app.ts' },
+          rawOutput: {
+            originalContent: 'one\n',
+            newContent: 'one\ntwo\n',
+            diffStat: { model_added_lines: 1, model_removed_lines: 0 },
+          },
+        },
+        {
+          callId: 'edit-2',
+          toolName: 'edit',
+          status: 'completed',
+          args: { file_path: 'src/app.ts' },
+          rawOutput: {
+            originalContent: 'one\ntwo\n',
+            newContent: 'one\n',
+            diffStat: { model_added_lines: 0, model_removed_lines: 1 },
+          },
+        },
+      ]),
+    ];
+
+    const change = getFileChangesByTurn(messages, new Map()).get('u1')?.[0];
+    expect(change).toMatchObject({
+      additions: 0,
+      deletions: 0,
+    });
+    expect(change?.diffs).toEqual([
+      {
+        oldText: 'one\n',
+        newText: 'one\n',
+        fullContent: true,
+      },
+    ]);
+  });
+
+  it('omits stats for repeated partial diffs without full content', () => {
+    const messages = [
+      userMessage('u1', 'edit file twice'),
+      toolGroup('tg1', [
+        {
+          callId: 'edit-1',
+          toolName: 'edit',
+          status: 'completed',
+          args: { file_path: 'src/app.ts' },
+          content: [{ type: 'diff', oldText: 'one\n', newText: 'one\ntwo\n' }],
+        },
+        {
+          callId: 'edit-2',
+          toolName: 'edit',
+          status: 'completed',
+          args: { file_path: 'src/app.ts' },
+          content: [{ type: 'diff', oldText: 'one\ntwo\n', newText: 'one\n' }],
+        },
+      ]),
+    ];
+
+    const change = getFileChangesByTurn(messages, new Map()).get('u1')?.[0];
+    expect(change?.additions).toBeUndefined();
+    expect(change?.deletions).toBeUndefined();
+    expect(change?.diffs).toEqual([
+      { oldText: 'one\n', newText: 'one\ntwo\n' },
+      { oldText: 'one\ntwo\n', newText: 'one\n' },
+    ]);
+  });
+
+  it('keeps partial diffs after a full-content diff', () => {
+    const messages = [
+      userMessage('u1', 'write then edit file'),
+      toolGroup('tg1', [
+        {
+          callId: 'write-1',
+          toolName: 'write_file',
+          status: 'completed',
+          args: { file_path: 'src/app.ts', content: 'one\n' },
+        },
+        {
+          callId: 'edit-1',
+          toolName: 'edit',
+          status: 'completed',
+          args: { file_path: 'src/app.ts' },
+          content: [{ type: 'diff', oldText: 'one\n', newText: 'two\n' }],
+        },
+      ]),
+    ];
+
+    const change = getFileChangesByTurn(messages, new Map()).get('u1')?.[0];
+    expect(change?.additions).toBeUndefined();
+    expect(change?.deletions).toBeUndefined();
+    expect(change?.diffs).toEqual([
+      { oldText: '', newText: 'one\n', fullContent: true },
+      { oldText: 'one\n', newText: 'two\n' },
+    ]);
+  });
+
+  it('uses stats from a final full-content diff after earlier partial diffs', () => {
+    const messages = [
+      userMessage('u1', 'edit then rewrite file'),
+      toolGroup('tg1', [
+        {
+          callId: 'edit-1',
+          toolName: 'edit',
+          status: 'completed',
+          args: { file_path: 'src/app.ts' },
+          content: [{ type: 'diff', oldText: 'one\n', newText: 'two\n' }],
+        },
+        {
+          callId: 'write-1',
+          toolName: 'write_file',
+          status: 'completed',
+          args: { file_path: 'src/app.ts', content: 'two\nthree\n' },
+        },
+      ]),
+    ];
+
+    const change = getFileChangesByTurn(messages, new Map()).get('u1')?.[0];
+    expect(change).toMatchObject({
+      additions: 2,
+      deletions: 0,
+    });
+    expect(change?.diffs).toEqual([
+      { oldText: 'one\n', newText: 'two\n' },
+      { oldText: '', newText: 'two\nthree\n', fullContent: true },
+    ]);
+  });
+
+  it('omits stats for large full-content diffs', () => {
+    const oldContent = Array.from({ length: 1001 }, (_, index) => `${index}`)
+      .join('\n')
+      .concat('\n');
+    const newContent = Array.from({ length: 1001 }, (_, index) => `${index}x`)
+      .join('\n')
+      .concat('\n');
+    const messages = [
+      userMessage('u1', 'edit large file'),
+      toolGroup('tg1', [
+        {
+          callId: 'edit-1',
+          toolName: 'edit',
+          status: 'completed',
+          args: { file_path: 'src/app.ts' },
+          rawOutput: {
+            originalContent: oldContent,
+            newContent,
+          },
+        },
+      ]),
+    ];
+
+    const change = getFileChangesByTurn(messages, new Map()).get('u1')?.[0];
+    expect(change?.additions).toBeUndefined();
+    expect(change?.deletions).toBeUndefined();
+    expect(change?.diffs).toEqual([
+      { oldText: oldContent, newText: newContent, fullContent: true },
+    ]);
+  });
+
+  it('omits stats for unrelated partial diffs', () => {
+    const messages = [
+      userMessage('u1', 'edit file twice'),
+      toolGroup('tg1', [
+        {
+          callId: 'edit-1',
+          toolName: 'edit',
+          status: 'completed',
+          args: { file_path: 'src/app.ts' },
+          content: [{ type: 'diff', oldText: 'one\n', newText: 'two\n' }],
+        },
+        {
+          callId: 'edit-2',
+          toolName: 'edit',
+          status: 'completed',
+          args: { file_path: 'src/app.ts' },
+          content: [{ type: 'diff', oldText: 'three\n', newText: 'four\n' }],
+        },
+      ]),
+    ];
+
+    const change = getFileChangesByTurn(messages, new Map()).get('u1')?.[0];
+    expect(change?.additions).toBeUndefined();
+    expect(change?.deletions).toBeUndefined();
+    expect(change?.diffs).toEqual([
+      { oldText: 'one\n', newText: 'two\n' },
+      { oldText: 'three\n', newText: 'four\n' },
+    ]);
+  });
+
+  it('does not infer created status from file content text', () => {
+    const messages = [
+      userMessage('u1', 'edit changelog'),
+      toolGroup('tg1', [
+        {
+          callId: 'edit-1',
+          toolName: 'edit',
+          status: 'completed',
+          args: { file_path: 'CHANGELOG.md' },
+          rawOutput: {
+            originalContent: 'old\n',
+            newContent: 'created new file for the API module\n',
+            returnDisplay: 'Updated CHANGELOG.md',
+          },
+        },
+      ]),
+    ];
+
+    const change = getFileChangesByTurn(messages, new Map()).get('u1')?.[0];
+    expect(change?.status).toBe('modified');
+  });
+
+  it('keeps file changes when the visible transcript starts with a tool group', () => {
+    const messages = [
+      toolGroup('tg1', [
+        {
+          callId: 'edit-1',
+          toolName: 'edit',
+          status: 'completed',
+          args: { file_path: 'src/app.ts' },
+          rawOutput: {
+            originalContent: 'one\n',
+            newContent: 'two\n',
+          },
+        },
+      ]),
+    ];
+
+    const changes = getFileChangesByTurn(messages, new Map()).get('tg1');
+    expect(changes).toHaveLength(1);
+    expect(changes?.[0]).toMatchObject({
+      path: 'src/app.ts',
+      status: 'modified',
+    });
+  });
+
+  it('keeps artifacts when the visible transcript starts with a tool group', () => {
+    const messages = [
+      toolGroup('tg1', [
+        {
+          callId: 'record-1',
+          toolName: 'record_artifact',
+          status: 'completed',
+          args: { workspacePath: 'reports/a.html' },
+        },
+      ]),
+    ];
+    const artifacts = [
+      {
+        id: 'artifact-1',
+        title: 'Report',
+        workspacePath: 'reports/a.html',
+      },
+    ] as DaemonSessionArtifact[];
+
+    expect(getArtifactsByTurn(messages, artifacts).get('tg1')).toEqual(
+      artifacts,
+    );
+  });
+
+  it('keeps scheduled tasks when the visible transcript starts with a tool group', () => {
+    const messages = [
+      toolGroup('tg1', [
+        {
+          callId: 'cron-call',
+          toolName: 'cron_create',
+          status: 'completed',
+          args: { cron: '0 9 * * *', prompt: 'standup', recurring: true },
+          rawOutput: 'Scheduled cron_123 (0 9 * * *).',
+        },
+      ]),
+    ];
+
+    expect(getScheduledTasksByTurn(messages).get('tg1')?.[0]).toMatchObject({
+      id: 'cron_123',
+      title: 'standup',
+    });
+  });
+
+  it('does not match two different relative paths by suffix', () => {
+    const messages = [
+      userMessage('u1', 'edit file'),
+      toolGroup('tg1', [
+        {
+          callId: 'edit-1',
+          toolName: 'edit',
+          status: 'completed',
+          args: { file_path: 'src/a/b/c.ts' },
+          rawOutput: { diffStat: { model_added_lines: 1 } },
+        },
+      ]),
+    ];
+    const artifactsByTurn = new Map([
+      [
+        'u1',
+        [
+          { id: 'a1', workspacePath: 'evil/a/b/c.ts' },
+        ] as DaemonSessionArtifact[],
+      ],
+    ]);
+
+    const change = getFileChangesByTurn(messages, artifactsByTurn).get(
+      'u1',
+    )?.[0];
+    expect(change?.isArtifact).toBe(false);
+  });
+
+  it('matches artifact paths through the workspace cwd', () => {
+    const messages = [
+      userMessage('u1', 'make artifact'),
+      toolGroup('tg1', [
+        {
+          callId: 'record-1',
+          toolName: 'record_artifact',
+          status: 'completed',
+          args: { workspacePath: 'reports/summary.html' },
+        },
+        {
+          callId: 'write-1',
+          toolName: 'write_file',
+          status: 'completed',
+          args: {
+            file_path: 'reports/summary.html',
+            content: '<html>done</html>',
+          },
+        },
+      ]),
+    ];
+    const artifacts = [
+      {
+        id: 'artifact-1',
+        workspacePath: '/workspace/project/reports/summary.html',
+      },
+    ] as DaemonSessionArtifact[];
+
+    const artifactsByTurn = getArtifactsByTurn(
+      messages,
+      artifacts,
+      '/workspace/project',
+    );
+    expect(artifactsByTurn.get('u1')).toEqual(artifacts);
+
+    const change = getFileChangesByTurn(
+      messages,
+      artifactsByTurn,
+      '/workspace/project',
+    ).get('u1')?.[0];
+    expect(change).toMatchObject({
+      path: 'reports/summary.html',
+      isArtifact: true,
+    });
+  });
+
+  it('extracts write_file changes from args content', () => {
+    const messages = [
+      userMessage('u1', 'write file'),
+      toolGroup('tg1', [
+        {
+          callId: 'write-1',
+          toolName: 'write_file',
+          status: 'completed',
+          args: {
+            file_path: 'src/generated.ts',
+            content: 'export const value = 1;\nconsole.log(value);\n',
+          },
+        },
+      ]),
+    ];
+
+    const change = getFileChangesByTurn(messages, new Map()).get('u1')?.[0];
+    expect(change).toMatchObject({
+      path: 'src/generated.ts',
+      status: 'created',
+      additions: 2,
+      deletions: 0,
+    });
+    expect(change?.diffs).toEqual([
+      {
+        oldText: '',
+        newText: 'export const value = 1;\nconsole.log(value);\n',
+        fullContent: true,
+      },
+    ]);
+  });
+
+  it('keeps empty and whitespace-only file contents', () => {
+    const messages = [
+      userMessage('u1', 'write blank files'),
+      toolGroup('tg1', [
+        {
+          callId: 'write-empty',
+          toolName: 'write_file',
+          status: 'completed',
+          args: {
+            file_path: 'src/empty.txt',
+            content: '',
+          },
+        },
+        {
+          callId: 'edit-spaces',
+          toolName: 'edit',
+          status: 'completed',
+          args: { file_path: 'src/spaces.txt' },
+          rawOutput: {
+            originalContent: '',
+            newContent: '   ',
+          },
+        },
+      ]),
+    ];
+
+    const changes = getFileChangesByTurn(messages, new Map()).get('u1');
+    expect(changes?.[0]?.diffs).toEqual([
+      { oldText: '', newText: '', fullContent: true },
+    ]);
+    expect(changes?.[1]?.diffs).toEqual([
+      { oldText: '', newText: '   ', fullContent: true },
+    ]);
+  });
+
+  it('extracts completed cron_create tasks', () => {
+    const messages = [
+      userMessage('u1', 'schedule'),
+      toolGroup('tg1', [
+        {
+          callId: 'cron-call',
+          toolName: 'cron_create',
+          status: 'completed',
+          args: { cron: '0 9 * * *', prompt: 'standup', recurring: true },
+          rawOutput: {
+            llmContent: 'Scheduled recurring job cron_123 (0 9 * * *).',
+          },
+        },
+      ]),
+    ];
+
+    expect(getScheduledTasksByTurn(messages).get('u1')?.[0]).toMatchObject({
+      id: 'cron_123',
+      title: 'standup',
+    });
+  });
+
+  it('extracts cron ids from string raw output', () => {
+    const messages = [
+      userMessage('u1', 'schedule'),
+      toolGroup('tg1', [
+        {
+          callId: 'cron-call',
+          toolName: 'cron_create',
+          status: 'completed',
+          args: { cron: '0 9 * * *', prompt: 'standup', recurring: true },
+          rawOutput: 'Scheduled cron_123 (0 9 * * *).',
+        },
+      ]),
+    ];
+
+    expect(getScheduledTasksByTurn(messages).get('u1')?.[0]).toMatchObject({
+      id: 'cron_123',
+      title: 'standup',
+    });
+  });
+
+  it('ignores unrelated scheduled output', () => {
+    const messages = [
+      userMessage('u1', 'schedule'),
+      toolGroup('tg1', [
+        {
+          callId: 'cron-call',
+          toolName: 'cron_create',
+          status: 'completed',
+          args: { cron: '0 9 * * *', prompt: 'standup', recurring: true },
+          rawOutput: {
+            llmContent: 'Scheduled cleanup completed.',
+          },
+        },
+      ]),
+    ];
+
+    expect(getScheduledTasksByTurn(messages).get('u1')?.[0]).toMatchObject({
+      id: 'cron-call',
+      title: 'standup',
+    });
+  });
+
+  it('does not extract cron ids from nested raw output text', () => {
+    const messages = [
+      userMessage('u1', 'schedule'),
+      toolGroup('tg1', [
+        {
+          callId: 'cron-call',
+          toolName: 'cron_create',
+          status: 'completed',
+          args: { cron: '0 9 * * *', prompt: 'standup', recurring: true },
+          rawOutput: {
+            llmContent: 'Scheduled cleanup completed.',
+            debug: {
+              prompt: 'Scheduled recurring job cron_wrong (0 9 * * *).',
+            },
+          },
+        },
+      ]),
+    ];
+
+    expect(getScheduledTasksByTurn(messages).get('u1')?.[0]).toMatchObject({
+      id: 'cron-call',
+      title: 'standup',
+    });
+  });
+});
diff --git a/packages/web-shell/client/components/artifacts/turnOutputSelectors.ts b/packages/web-shell/client/components/artifacts/turnOutputSelectors.ts
new file mode 100644
index 00000000000..3318945c942
--- /dev/null
+++ b/packages/web-shell/client/components/artifacts/turnOutputSelectors.ts
@@ -0,0 +1,506 @@
+import type { DaemonSessionArtifact } from '@qwen-code/sdk/daemon';
+import type { ACPToolCall, Message } from '../../adapters/types';
+import type {
+  TurnOutputFileChange,
+  TurnOutputScheduledTask,
+} from './TurnOutputs';
+import { isSamePath, normalizePath } from './artifactUtils';
+
+const MAX_LINE_STAT_COMPARISONS = 1_000_000;
+
+function getToolCallIds(tool: ACPToolCall): string[] {
+  const ids = new Set<string>();
+  if (tool.callId) ids.add(tool.callId);
+  if (tool.parentToolCallId) ids.add(tool.parentToolCallId);
+  for (const subTool of tool.subTools ?? []) {
+    for (const id of getToolCallIds(subTool)) ids.add(id);
+  }
+  return Array.from(ids);
+}
+
+interface RecordArtifactReference {
+  turnId: string;
+  workspacePath?: string;
+  managedId?: string;
+  url?: string;
+}
+
+export function getArtifactsByTurn(
+  messages: readonly Message[],
+  artifacts: readonly DaemonSessionArtifact[],
+  workspaceCwd?: string,
+): ReadonlyMap<string, readonly DaemonSessionArtifact[]> {
+  const toolCallTurn = new Map<string, string>();
+  const recordArtifactReferences: RecordArtifactReference[] = [];
+  let currentTurnId: string | null = null;
+  for (const message of messages) {
+    if (message.role === 'user' || message.role === 'user_shell') {
+      currentTurnId = message.id;
+      continue;
+    }
+    if (!currentTurnId) currentTurnId = message.id;
+    if (message.role !== 'tool_group') continue;
+    for (const tool of message.tools) {
+      for (const id of getToolCallIds(tool)) {
+        toolCallTurn.set(id, currentTurnId);
+      }
+      collectRecordArtifactReferences(
+        tool,
+        currentTurnId,
+        recordArtifactReferences,
+      );
+    }
+  }
+
+  const byTurn = new Map<string, DaemonSessionArtifact[]>();
+  for (const artifact of artifacts) {
+    const turnIds = getRecordArtifactTurnIds(
+      recordArtifactReferences,
+      artifact,
+      workspaceCwd,
+    );
+    if (turnIds.size === 0 && artifact.toolCallId) {
+      const turnId = toolCallTurn.get(artifact.toolCallId);
+      if (turnId) turnIds.add(turnId);
+    }
+    for (const turnId of turnIds) {
+      const list = byTurn.get(turnId);
+      if (list) {
+        if (!list.some((item) => item.id === artifact.id)) list.push(artifact);
+      } else {
+        byTurn.set(turnId, [artifact]);
+      }
+    }
+  }
+  return byTurn;
+}
+
+function collectRecordArtifactReferences(
+  tool: ACPToolCall,
+  turnId: string,
+  references: RecordArtifactReference[],
+) {
+  if (tool.toolName.toLowerCase() === 'record_artifact') {
+    references.push({
+      turnId,
+      workspacePath: getStringField(tool.args, 'workspacePath'),
+      managedId: getStringField(tool.args, 'managedId'),
+      url: getStringField(tool.args, 'url'),
+    });
+  }
+  for (const subTool of tool.subTools ?? []) {
+    collectRecordArtifactReferences(subTool, turnId, references);
+  }
+}
+
+function getRecordArtifactTurnIds(
+  references: readonly RecordArtifactReference[],
+  artifact: DaemonSessionArtifact,
+  workspaceCwd?: string,
+) {
+  const turnIds = new Set<string>();
+  for (const reference of references) {
+    if (
+      reference.workspacePath &&
+      artifact.workspacePath &&
+      isSameWorkspacePath(
+        reference.workspacePath,
+        artifact.workspacePath,
+        workspaceCwd,
+      )
+    ) {
+      turnIds.add(reference.turnId);
+      continue;
+    }
+    if (reference.managedId && reference.managedId === artifact.managedId) {
+      turnIds.add(reference.turnId);
+      continue;
+    }
+    if (reference.url && reference.url === artifact.url) {
+      turnIds.add(reference.turnId);
+    }
+  }
+  return turnIds;
+}
+
+export function getFileChangesByTurn(
+  messages: readonly Message[],
+  artifactsByTurn: ReadonlyMap<string, readonly DaemonSessionArtifact[]>,
+  workspaceCwd?: string,
+): ReadonlyMap<string, readonly TurnOutputFileChange[]> {
+  const byTurn = new Map<string, TurnOutputFileChange[]>();
+  let currentTurnId: string | null = null;
+  for (const message of messages) {
+    if (message.role === 'user' || message.role === 'user_shell') {
+      currentTurnId = message.id;
+      continue;
+    }
+    if (!currentTurnId) currentTurnId = message.id;
+    if (message.role !== 'tool_group') continue;
+    const artifactPaths = new Set(
+      (artifactsByTurn.get(currentTurnId) ?? [])
+        .map((artifact) => normalizePath(artifact.workspacePath))
+        .filter((path): path is string => Boolean(path)),
+    );
+    for (const tool of message.tools) {
+      collectFileChanges(
+        tool,
+        currentTurnId,
+        artifactPaths,
+        byTurn,
+        workspaceCwd,
+      );
+    }
+  }
+  return byTurn;
+}
+
+export function getScheduledTasksByTurn(
+  messages: readonly Message[],
+): ReadonlyMap<string, readonly TurnOutputScheduledTask[]> {
+  const byTurn = new Map<string, TurnOutputScheduledTask[]>();
+  let currentTurnId: string | null = null;
+  for (const message of messages) {
+    if (message.role === 'user' || message.role === 'user_shell') {
+      currentTurnId = message.id;
+      continue;
+    }
+    if (!currentTurnId) currentTurnId = message.id;
+    if (message.role !== 'tool_group') continue;
+    for (const tool of message.tools) {
+      collectScheduledTasks(tool, currentTurnId, byTurn);
+    }
+  }
+  return byTurn;
+}
+
+function collectScheduledTasks(
+  tool: ACPToolCall,
+  turnId: string,
+  byTurn: Map<string, TurnOutputScheduledTask[]>,
+) {
+  const task = getScheduledTask(tool);
+  if (task) {
+    const list = byTurn.get(turnId);
+    if (list) {
+      list.push(task);
+    } else {
+      byTurn.set(turnId, [task]);
+    }
+  }
+  for (const subTool of tool.subTools ?? []) {
+    collectScheduledTasks(subTool, turnId, byTurn);
+  }
+}
+
+function getScheduledTask(tool: ACPToolCall): TurnOutputScheduledTask | null {
+  if (tool.status !== 'completed') return null;
+  if (tool.toolName.toLowerCase() !== 'cron_create') return null;
+  const raw = getRawOutputRecord(tool);
+  if (raw?.error) return null;
+  const cron = getStringField(tool.args, 'cron');
+  const prompt = getStringField(tool.args, 'prompt');
+  if (!cron || !prompt) return null;
+  const outputText =
+    getStringField(raw, 'returnDisplay') ??
+    getStringField(raw, 'llmContent') ??
+    (typeof tool.rawOutput === 'string' ? tool.rawOutput : undefined);
+  const display = outputText ? getFirstLine(outputText) : undefined;
+  return {
+    id: outputText ? (getCronTaskId(outputText) ?? tool.callId) : tool.callId,
+    toolCallId: tool.callId,
+    title: getScheduledTaskTitle(prompt),
+    cron,
+    prompt,
+    recurring: getBooleanField(tool.args, 'recurring') ?? true,
+    durable: getBooleanField(tool.args, 'durable') ?? false,
+    ...(display ? { display } : {}),
+  };
+}
+
+function collectFileChanges(
+  tool: ACPToolCall,
+  turnId: string,
+  artifactPaths: ReadonlySet<string>,
+  byTurn: Map<string, TurnOutputFileChange[]>,
+  workspaceCwd?: string,
+) {
+  const change = getFileChange(tool, artifactPaths, workspaceCwd);
+  if (change) {
+    const list = byTurn.get(turnId);
+    if (list) {
+      upsertFileChange(list, change);
+    } else {
+      byTurn.set(turnId, [change]);
+    }
+  }
+  for (const subTool of tool.subTools ?? []) {
+    collectFileChanges(subTool, turnId, artifactPaths, byTurn, workspaceCwd);
+  }
+}
+
+function getFileChange(
+  tool: ACPToolCall,
+  artifactPaths: ReadonlySet<string>,
+  workspaceCwd?: string,
+): TurnOutputFileChange | null {
+  if (tool.status !== 'completed') return null;
+  const toolName = tool.toolName.toLowerCase();
+  if (toolName !== 'write_file' && toolName !== 'edit') return null;
+  const filePath = getToolFilePath(tool);
+  if (!filePath) return null;
+  const normalizedPath = normalizePath(filePath);
+  const status = inferFileChangeStatus(tool);
+  const diffs = getFileChangeDiffs(tool);
+  const lineStats = getFileChangeLineStats(diffs);
+  return {
+    path: filePath,
+    status,
+    toolCallId: tool.callId,
+    isArtifact: Array.from(artifactPaths).some((artifactPath) =>
+      isSameWorkspacePath(normalizedPath, artifactPath, workspaceCwd),
+    ),
+    ...(lineStats
+      ? { additions: lineStats.additions, deletions: lineStats.deletions }
+      : {}),
+    diffs,
+  };
+}
+
+function getToolFilePath(tool: ACPToolCall): string | undefined {
+  const fromArgs = getStringContentField(
+    tool.args,
+    'file_path',
+    'filePath',
+    'path',
+  );
+  if (fromArgs !== undefined && fromArgs.length > 0) return fromArgs;
+  for (const content of tool.content ?? []) {
+    if (content.path) return content.path;
+  }
+  return tool.locations?.[0]?.file;
+}
+
+function getStringField(
+  record: Record<string, unknown> | undefined,
+  ...keys: string[]
+): string | undefined {
+  if (!record) return undefined;
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === 'string' && value.trim()) return value;
+  }
+  return undefined;
+}
+
+function getStringContentField(
+  record: Record<string, unknown> | undefined,
+  ...keys: string[]
+): string | undefined {
+  if (!record) return undefined;
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === 'string') return value;
+  }
+  return undefined;
+}
+
+function inferFileChangeStatus(
+  tool: ACPToolCall,
+): TurnOutputFileChange['status'] {
+  if (tool.toolName.toLowerCase() === 'write_file') return 'created';
+  const raw = getRawOutputRecord(tool);
+  const output = (getStringField(raw, 'returnDisplay') ?? '').toLowerCase();
+  if (
+    output.includes('created new file') ||
+    output.includes('successfully created') ||
+    output.includes('created and wrote')
+  ) {
+    return 'created';
+  }
+  return 'modified';
+}
+
+function getFileChangeLineStats(diffs: TurnOutputFileChange['diffs']):
+  | {
+      additions: number;
+      deletions: number;
+    }
+  | undefined {
+  const fullDiff = getFinalFullContentDiff(diffs);
+  return fullDiff
+    ? countChangedLines(fullDiff.oldText, fullDiff.newText)
+    : undefined;
+}
+
+function getFileChangeDiffs(tool: ACPToolCall): TurnOutputFileChange['diffs'] {
+  const raw = getRawOutputRecord(tool);
+  const originalContent = getStringContentField(raw, 'originalContent');
+  const newContent = getStringContentField(raw, 'newContent');
+  if (originalContent !== undefined || newContent !== undefined) {
+    return [
+      {
+        oldText: originalContent ?? '',
+        newText: newContent ?? '',
+        fileDiff: getStringField(raw, 'fileDiff'),
+        fullContent: true,
+      },
+    ];
+  }
+
+  const diffs = [];
+  for (const content of tool.content ?? []) {
+    if (content.type !== 'diff') continue;
+    diffs.push({
+      oldText: content.oldText ?? '',
+      newText: content.newText ?? '',
+    });
+  }
+  if (diffs.length > 0) return diffs;
+  if (tool.toolName.toLowerCase() === 'write_file') {
+    const newText = getStringContentField(tool.args, 'content');
+    return newText !== undefined
+      ? [{ oldText: '', newText, fullContent: true }]
+      : [];
+  }
+  return [];
+}
+
+function getRawOutputRecord(
+  tool: ACPToolCall,
+): Record<string, unknown> | undefined {
+  return tool.rawOutput && typeof tool.rawOutput === 'object'
+    ? (tool.rawOutput as Record<string, unknown>)
+    : undefined;
+}
+
+function getBooleanField(
+  record: Record<string, unknown> | undefined,
+  key: string,
+) {
+  const value = record?.[key];
+  return typeof value === 'boolean' ? value : undefined;
+}
+
+function getFirstLine(text: string) {
+  return text
+    .split(/\r\n|\r|\n/)
+    .map((line) => line.trim())
+    .find(Boolean);
+}
+
+function getCronTaskId(text: string) {
+  const match = text.match(
+    /\bScheduled\s+(?:(?:recurring job|one-shot task)\s+([a-z0-9_-]+)\b|([a-z0-9_-]+)\s*\()/i,
+  );
+  return match?.[1] ?? match?.[2];
+}
+
+function getScheduledTaskTitle(prompt: string) {
+  const firstLine = getFirstLine(prompt) ?? prompt.trim();
+  return firstLine.length > 36 ? `${firstLine.slice(0, 36)}...` : firstLine;
+}
+
+function upsertFileChange(
+  list: TurnOutputFileChange[],
+  change: TurnOutputFileChange,
+) {
+  const normalizedChangePath = normalizePath(change.path);
+  const index = list.findIndex(
+    (existing) => normalizePath(existing.path) === normalizedChangePath,
+  );
+  if (index < 0) {
+    list.push(change);
+    return;
+  }
+  const existing = list[index]!;
+  const {
+    additions: _existingAdditions,
+    deletions: _existingDeletions,
+    ...existingWithoutLineStats
+  } = existing;
+  const diffs = mergeFileDiffs(existing.diffs, change.diffs);
+  const finalFullDiff = getFinalFullContentDiff(diffs);
+  const lineStats = finalFullDiff
+    ? countChangedLines(finalFullDiff.oldText, finalFullDiff.newText)
+    : undefined;
+  list[index] = {
+    ...existingWithoutLineStats,
+    status:
+      existing.status === 'created' || change.status === 'created'
+        ? 'created'
+        : 'modified',
+    isArtifact: existing.isArtifact || change.isArtifact,
+    ...(lineStats
+      ? { additions: lineStats.additions, deletions: lineStats.deletions }
+      : {}),
+    diffs,
+  };
+}
+
+function mergeFileDiffs(
+  existingDiffs: TurnOutputFileChange['diffs'],
+  nextDiffs: TurnOutputFileChange['diffs'],
+): TurnOutputFileChange['diffs'] {
+  const diffs = [...existingDiffs, ...nextDiffs];
+  if (!diffs.every((diff) => diff.fullContent)) return diffs;
+  const firstFullDiff = diffs[0];
+  const lastFullDiff = diffs.at(-1);
+  if (!firstFullDiff || !lastFullDiff) return diffs;
+  return [
+    {
+      oldText: firstFullDiff.oldText,
+      newText: lastFullDiff.newText,
+      fullContent: true,
+    },
+  ];
+}
+
+function getFinalFullContentDiff(diffs: TurnOutputFileChange['diffs']) {
+  const finalDiff = diffs.at(-1);
+  return finalDiff?.fullContent ? finalDiff : undefined;
+}
+
+function countChangedLines(oldText: string, newText: string) {
+  const oldLines = splitDiffLines(oldText);
+  const newLines = splitDiffLines(newText);
+  if (oldLines.length * newLines.length > MAX_LINE_STAT_COMPARISONS) {
+    return undefined;
+  }
+  const commonLines = countLongestCommonSubsequence(oldLines, newLines);
+  return {
+    additions: newLines.length - commonLines,
+    deletions: oldLines.length - commonLines,
+  };
+}
+
+function splitDiffLines(text: string) {
+  if (!text) return [];
+  return text.replace(/\r?\n$/, '').split(/\r\n|\r|\n/);
+}
+
+function countLongestCommonSubsequence(left: string[], right: string[]) {
+  const previous = new Array(right.length + 1).fill(0);
+  const current = new Array(right.length + 1).fill(0);
+  for (const leftLine of left) {
+    for (let index = 0; index < right.length; index++) {
+      current[index + 1] =
+        leftLine === right[index]
+          ? previous[index] + 1
+          : Math.max(previous[index + 1], current[index]);
+    }
+    for (let index = 0; index < current.length; index++) {
+      previous[index] = current[index];
+    }
+    current.fill(0);
+  }
+  return previous[right.length] ?? 0;
+}
+
+function isSameWorkspacePath(
+  left: string,
+  right: string,
+  workspaceCwd?: string,
+) {
+  return isSamePath(left, right, workspaceCwd);
+}
diff --git a/packages/web-shell/client/hooks/useSessionArtifacts.test.tsx b/packages/web-shell/client/hooks/useSessionArtifacts.test.tsx
new file mode 100644
index 00000000000..56d4a0cba1c
--- /dev/null
+++ b/packages/web-shell/client/hooks/useSessionArtifacts.test.tsx
@@ -0,0 +1,183 @@
+// @vitest-environment jsdom
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as React from 'react';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import type { DaemonSessionArtifact } from '@qwen-code/sdk/daemon';
+import {
+  useSessionArtifacts,
+  type SessionArtifactsState,
+} from './useSessionArtifacts';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+interface Deferred<T> {
+  promise: Promise<T>;
+  resolve: (value: T) => void;
+}
+
+const sdkMock = vi.hoisted(() => ({
+  actions: {
+    loadArtifacts: vi.fn(),
+  },
+  connection: {
+    status: 'connected',
+    sessionId: 'session-a',
+    capabilities: { features: ['session_artifacts'] },
+  },
+  promptStatus: 'idle',
+  artifactsVersion: 0,
+}));
+
+vi.mock('@qwen-code/webui/daemon-react-sdk', () => ({
+  useActions: () => sdkMock.actions,
+  useConnection: () => sdkMock.connection,
+  usePromptStatus: () => sdkMock.promptStatus,
+  useWorkspaceEventSignals: () => ({
+    artifactsVersion: sdkMock.artifactsVersion,
+  }),
+}));
+
+let root: Root | null = null;
+let container: HTMLDivElement | null = null;
+let latestState: SessionArtifactsState | undefined;
+
+function deferred<T>(): Deferred<T> {
+  let resolve: ((value: T) => void) | undefined;
+  const promise = new Promise<T>((done) => {
+    resolve = done;
+  });
+  if (!resolve) throw new Error('deferred promise did not initialize');
+  return { promise, resolve };
+}
+
+function artifact(id: string): DaemonSessionArtifact {
+  return {
+    id,
+    kind: 'html',
+    storage: 'workspace',
+    source: 'tool',
+    status: 'available',
+    title: id,
+    workspacePath: `${id}.html`,
+    clientRetained: false,
+    createdAt: '2026-07-09T00:00:00.000Z',
+    updatedAt: '2026-07-09T00:00:00.000Z',
+  };
+}
+
+function TestHost() {
+  latestState = useSessionArtifacts();
+  return null;
+}
+
+async function renderHookHost() {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+  await act(async () => {
+    root?.render(React.createElement(TestHost));
+  });
+}
+
+async function rerenderHookHost() {
+  await act(async () => {
+    root?.render(React.createElement(TestHost));
+  });
+}
+
+beforeEach(() => {
+  latestState = undefined;
+  sdkMock.connection = {
+    status: 'connected',
+    sessionId: 'session-a',
+    capabilities: { features: ['session_artifacts'] },
+  };
+  sdkMock.promptStatus = 'idle';
+  sdkMock.artifactsVersion = 0;
+  sdkMock.actions.loadArtifacts.mockReset();
+});
+
+afterEach(async () => {
+  if (root) {
+    await act(async () => {
+      root?.unmount();
+    });
+    root = null;
+  }
+  container?.remove();
+  container = null;
+});
+
+describe('useSessionArtifacts', () => {
+  it('clears stale artifacts while loading a different session', async () => {
+    const sessionA = deferred<{ artifacts: DaemonSessionArtifact[] }>();
+    const sessionB = deferred<{ artifacts: DaemonSessionArtifact[] }>();
+    sdkMock.actions.loadArtifacts
+      .mockReturnValueOnce(sessionA.promise)
+      .mockReturnValueOnce(sessionB.promise);
+
+    await renderHookHost();
+    await act(async () => {
+      sessionA.resolve({ artifacts: [artifact('from-session-a')] });
+      await sessionA.promise;
+    });
+    expect(latestState?.artifacts.map((item) => item.id)).toEqual([
+      'from-session-a',
+    ]);
+
+    sdkMock.connection = {
+      status: 'connected',
+      sessionId: 'session-b',
+      capabilities: { features: ['session_artifacts'] },
+    };
+    await rerenderHookHost();
+
+    expect(latestState?.loading).toBe(true);
+    expect(latestState?.artifacts).toEqual([]);
+
+    await act(async () => {
+      sessionB.resolve({ artifacts: [artifact('from-session-b')] });
+      await sessionB.promise;
+    });
+    expect(latestState?.artifacts.map((item) => item.id)).toEqual([
+      'from-session-b',
+    ]);
+  });
+
+  it('keeps current artifacts visible while refreshing the same session', async () => {
+    const initialLoad = deferred<{ artifacts: DaemonSessionArtifact[] }>();
+    const refreshLoad = deferred<{ artifacts: DaemonSessionArtifact[] }>();
+    sdkMock.actions.loadArtifacts
+      .mockReturnValueOnce(initialLoad.promise)
+      .mockReturnValueOnce(refreshLoad.promise);
+
+    await renderHookHost();
+    await act(async () => {
+      initialLoad.resolve({ artifacts: [artifact('current-artifact')] });
+      await initialLoad.promise;
+    });
+
+    sdkMock.artifactsVersion = 1;
+    await rerenderHookHost();
+
+    expect(latestState?.loading).toBe(true);
+    expect(latestState?.artifacts.map((item) => item.id)).toEqual([
+      'current-artifact',
+    ]);
+
+    await act(async () => {
+      refreshLoad.resolve({ artifacts: [artifact('refreshed-artifact')] });
+      await refreshLoad.promise;
+    });
+    expect(latestState?.artifacts.map((item) => item.id)).toEqual([
+      'refreshed-artifact',
+    ]);
+  });
+});
diff --git a/packages/web-shell/client/hooks/useSessionArtifacts.ts b/packages/web-shell/client/hooks/useSessionArtifacts.ts
new file mode 100644
index 00000000000..8676a24c080
--- /dev/null
+++ b/packages/web-shell/client/hooks/useSessionArtifacts.ts
@@ -0,0 +1,127 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  useActions,
+  useConnection,
+  usePromptStatus,
+  useWorkspaceEventSignals,
+} from '@qwen-code/webui/daemon-react-sdk';
+import type { DaemonSessionArtifact } from '@qwen-code/sdk/daemon';
+
+const SESSION_ARTIFACTS_FEATURE = 'session_artifacts';
+
+export interface SessionArtifactsState {
+  artifacts: DaemonSessionArtifact[];
+  artifactById: ReadonlyMap<string, DaemonSessionArtifact>;
+  loading: boolean;
+  error: string | null;
+  refresh: () => Promise<void>;
+}
+
+export function useSessionArtifacts(): SessionArtifactsState {
+  const actions = useActions();
+  const connection = useConnection();
+  const promptStatus = usePromptStatus();
+  const workspaceEventSignals = useWorkspaceEventSignals();
+  const artifactsVersion = workspaceEventSignals?.artifactsVersion;
+  const isConnected = connection.status === 'connected';
+  const supportsArtifacts =
+    connection.capabilities?.features?.includes(SESSION_ARTIFACTS_FEATURE) ??
+    false;
+  const sessionId = connection.sessionId;
+  const [artifacts, setArtifacts] = useState<DaemonSessionArtifact[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const requestIdRef = useRef(0);
+  const loadedSessionIdRef = useRef<string | undefined>(undefined);
+  const previousPromptStatusRef = useRef(promptStatus);
+  const previousArtifactsVersionRef = useRef(artifactsVersion);
+
+  const refresh = useCallback(async () => {
+    const requestId = requestIdRef.current + 1;
+    requestIdRef.current = requestId;
+    if (!sessionId) {
+      loadedSessionIdRef.current = undefined;
+      setArtifacts([]);
+      setError(null);
+      setLoading(false);
+      return;
+    }
+    if (!isConnected) {
+      loadedSessionIdRef.current = undefined;
+      setArtifacts([]);
+      setError(null);
+      setLoading(false);
+      return;
+    }
+    if (!supportsArtifacts) {
+      loadedSessionIdRef.current = undefined;
+      setArtifacts([]);
+      setError(null);
+      setLoading(false);
+      return;
+    }
+    if (
+      loadedSessionIdRef.current !== undefined &&
+      loadedSessionIdRef.current !== sessionId
+    ) {
+      setArtifacts([]);
+    }
+    setLoading(true);
+    try {
+      const result = await actions.loadArtifacts();
+      if (requestIdRef.current !== requestId) return;
+      loadedSessionIdRef.current = sessionId;
+      setArtifacts(result.artifacts);
+      setError(null);
+    } catch (err) {
+      if (requestIdRef.current !== requestId) return;
+      if (isSessionDisconnectedError(err)) {
+        setError(null);
+        return;
+      }
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      if (requestIdRef.current === requestId) {
+        setLoading(false);
+      }
+    }
+  }, [actions, isConnected, sessionId, supportsArtifacts]);
+  const refreshRef = useRef(refresh);
+  refreshRef.current = refresh;
+
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+
+  useEffect(() => {
+    const previous = previousPromptStatusRef.current;
+    previousPromptStatusRef.current = promptStatus;
+    if (previous !== 'idle' && promptStatus === 'idle') {
+      void refreshRef.current();
+    }
+  }, [promptStatus]);
+
+  useEffect(() => {
+    const previous = previousArtifactsVersionRef.current;
+    previousArtifactsVersionRef.current = artifactsVersion;
+    if (
+      previous !== undefined &&
+      artifactsVersion !== undefined &&
+      artifactsVersion !== previous
+    ) {
+      void refreshRef.current();
+    }
+  }, [artifactsVersion]);
+
+  const artifactById = useMemo(
+    () => new Map(artifacts.map((artifact) => [artifact.id, artifact])),
+    [artifacts],
+  );
+
+  return { artifacts, artifactById, loading, error, refresh };
+}
+
+function isSessionDisconnectedError(error: unknown) {
+  const message = error instanceof Error ? error.message : String(error);
+  return message.includes('session is not connected');
+}
diff --git a/packages/web-shell/client/i18n.tsx b/packages/web-shell/client/i18n.tsx
index 193fa0a035f..15df1eb4d00 100644
--- a/packages/web-shell/client/i18n.tsx
+++ b/packages/web-shell/client/i18n.tsx
@@ -190,6 +190,7 @@ const EN: Messages = {
   'timeline.kind.status': 'status update',
   'timeline.kind.none': 'turn',
   'common.copy': 'Copy',
+  'common.open': 'Open',
   'common.na': 'N/A',
   'common.server': 'Server',
   'common.agent': 'Agent',
@@ -682,6 +683,10 @@ const EN: Messages = {
   'scheduledTasks.chatStarter':
     'Help me set up a recurring scheduled task (keep it long-term). What I want: ',
   'scheduledTasks.name': 'Name',
+  'scheduledTasks.taskId': 'Task ID',
+  'scheduledTasks.schedule': 'Schedule',
+  'scheduledTasks.type': 'Type',
+  'scheduledTasks.status': 'Status',
   'scheduledTasks.namePlaceholder': 'Optional — defaults to the prompt',
   'scheduledTasks.prompt': 'Prompt',
   'scheduledTasks.promptPlaceholder': 'What should this task do?',
@@ -711,8 +716,13 @@ const EN: Messages = {
   'scheduledTasks.enable': 'Enable',
   'scheduledTasks.disable': 'Disable',
   'scheduledTasks.delete': 'Delete',
+  'scheduledTasks.deleteConfirmTitle': 'Delete scheduled task',
   'scheduledTasks.deleteConfirm': (v) =>
     `Delete scheduled task "${v?.name ?? ''}"?`,
+  'scheduledTasks.deletedSnapshot':
+    'This scheduled task has been deleted. Showing the snapshot from when it was created.',
+  'scheduledTasks.sessionScopedSnapshot':
+    'This is a session-scoped scheduled task. Showing the snapshot from when it was created.',
   'scheduledTasks.empty': 'No scheduled tasks yet. Create one to get started.',
   'scheduledTasks.create': 'Create',
   'scheduledTasks.creating': 'Creating…',
@@ -741,6 +751,28 @@ const EN: Messages = {
   'scheduledTasks.dur.h': 'h',
   'scheduledTasks.dur.m': 'm',
   'scheduledTasks.dur.s': 's',
+  'scheduledTasks.runMode': 'Run mode',
+  'scheduledTasks.runMode.shared': 'Shared session',
+  'scheduledTasks.runMode.isolated': 'Isolated (fresh session per run)',
+  'scheduledTasks.runMode.shared.hint':
+    'Runs accumulate in one session transcript.',
+  'scheduledTasks.runMode.isolated.hint':
+    'Each run gets a clean session context.',
+  'scheduledTasks.condition': 'Precondition (optional)',
+  'scheduledTasks.conditionPlaceholder':
+    'e.g. Check whether anything landed on main since yesterday. If nothing did, the task should not run.',
+  'scheduledTasks.condition.hint':
+    "Checked in this task's own session before each run. The prompt only runs in a fresh session when the check says yes — otherwise the run is skipped.",
+  'scheduledTasks.condition.cardPrefix': 'If:',
+  'turnOutputs.filesEdited': (v) => `Edited ${v?.count ?? 0} files`,
+  'turnOutputs.viewChanges': 'View changes',
+  'turnOutputs.review': 'Review',
+  'turnOutputs.collapseFiles': 'Collapse files',
+  'turnOutputs.showMoreFiles': (v) => `Show ${v?.count ?? 0} more files`,
+  'turnOutputs.previousTurn': 'Previous turn',
+  'turnOutputs.fileCount': (v) => `${v?.count ?? 0} files`,
+  'turnOutputs.openFileTree': 'Open file tree',
+  'turnOutputs.closeFileTree': 'Close file tree',
   'sidebar.label': 'Workspace sidebar',
   'sidebar.toggleMenu': 'Toggle menu',
   'sidebar.newChat': 'New chat',
@@ -1928,6 +1960,7 @@ const ZH: Messages = {
   'timeline.kind.status': '状态更新',
   'timeline.kind.none': '轮次',
   'common.copy': '复制',
+  'common.open': '打开',
   'common.na': '不适用',
   'common.server': '服务器',
   'common.agent': '智能体',
@@ -2386,6 +2419,10 @@ const ZH: Messages = {
   'scheduledTasks.createViaChat': '通过聊天创建',
   'scheduledTasks.chatStarter': '帮我创建一个长期保留的定时任务，我想：',
   'scheduledTasks.name': '名称',
+  'scheduledTasks.taskId': '任务 ID',
+  'scheduledTasks.schedule': '计划',
+  'scheduledTasks.type': '类型',
+  'scheduledTasks.status': '状态',
   'scheduledTasks.namePlaceholder': '可选 —— 默认取提示词',
   'scheduledTasks.prompt': '提示词',
   'scheduledTasks.promptPlaceholder': '这个任务要做什么？',
@@ -2414,8 +2451,13 @@ const ZH: Messages = {
   'scheduledTasks.enable': '启用',
   'scheduledTasks.disable': '停用',
   'scheduledTasks.delete': '删除',
+  'scheduledTasks.deleteConfirmTitle': '删除定时任务',
   'scheduledTasks.deleteConfirm': (v) =>
     `确定删除定时任务「${v?.name ?? ''}」？`,
+  'scheduledTasks.deletedSnapshot':
+    '这个定时任务已被删除，下面显示的是创建时的快照。',
+  'scheduledTasks.sessionScopedSnapshot':
+    '这是一个会话内定时任务，下面显示的是创建时的快照。',
   'scheduledTasks.empty': '还没有定时任务，创建一个开始吧。',
   'scheduledTasks.create': '创建',
   'scheduledTasks.creating': '创建中…',
@@ -2444,6 +2486,26 @@ const ZH: Messages = {
   'scheduledTasks.dur.h': '小时',
   'scheduledTasks.dur.m': '分',
   'scheduledTasks.dur.s': '秒',
+  'scheduledTasks.runMode': '运行模式',
+  'scheduledTasks.runMode.shared': '共享会话',
+  'scheduledTasks.runMode.isolated': '隔离（每次运行新建会话）',
+  'scheduledTasks.runMode.shared.hint': '所有运行记录累积在同一个会话中。',
+  'scheduledTasks.runMode.isolated.hint': '每次运行获得独立的会话上下文。',
+  'scheduledTasks.condition': '前置条件（可选）',
+  'scheduledTasks.conditionPlaceholder':
+    '例如：检查昨天以来 main 分支有没有新提交。如果没有，则本次不应执行。',
+  'scheduledTasks.condition.hint':
+    '每次触发前，先在本任务自己的会话中检查该条件。只有判定为"是"，才会新建会话执行命令；否则跳过本次运行。',
+  'scheduledTasks.condition.cardPrefix': '若：',
+  'turnOutputs.filesEdited': (v) => `已编辑 ${v?.count ?? 0} 个文件`,
+  'turnOutputs.viewChanges': '查看更改',
+  'turnOutputs.review': '审核',
+  'turnOutputs.collapseFiles': '收起文件',
+  'turnOutputs.showMoreFiles': (v) => `再展示 ${v?.count ?? 0} 个文件`,
+  'turnOutputs.previousTurn': '上轮对话',
+  'turnOutputs.fileCount': (v) => `${v?.count ?? 0} 个文件`,
+  'turnOutputs.openFileTree': '打开文件树',
+  'turnOutputs.closeFileTree': '关闭文件树',
   'sidebar.label': '工作区侧边栏',
   'sidebar.toggleMenu': '切换菜单',
   'sidebar.newChat': '新对话',
diff --git a/packages/web-shell/client/index.ts b/packages/web-shell/client/index.ts
index 54956ff7b59..0dd716df306 100644
--- a/packages/web-shell/client/index.ts
+++ b/packages/web-shell/client/index.ts
@@ -5,6 +5,10 @@ export type {
   BugReportInfo,
   SessionChangeEvent,
 } from './App';
+export type {
+  TurnOutputKind,
+  TurnOutputOpenRequest,
+} from './components/artifacts/TurnOutputs';
 export type { ComposerToolbarAction } from './components/ChatEditor';
 export type { ToastTone } from './components/ToastHost';
 export type { WebShellLanguage } from './i18n';
diff --git a/packages/web-shell/client/index.tsx b/packages/web-shell/client/index.tsx
index 16a59ca216d..f9284444dff 100644
--- a/packages/web-shell/client/index.tsx
+++ b/packages/web-shell/client/index.tsx
@@ -132,6 +132,10 @@ export type {
   WebShellAssistantTurnFooterRenderInfo,
 } from './customization';
 export type { WelcomeHeaderProps } from './components/WelcomeHeader';
+export type {
+  TurnOutputKind,
+  TurnOutputOpenRequest,
+} from './components/artifacts/TurnOutputs';
 export {
   ECHARTS_FULLDATA_LANGUAGE,
   EchartsFullDataBlock,
diff --git a/packages/web-shell/package.json b/packages/web-shell/package.json
index d6cba6ff9d4..cf88d169048 100644
--- a/packages/web-shell/package.json
+++ b/packages/web-shell/package.json
@@ -35,6 +35,7 @@
     "@codemirror/autocomplete": "^6.18.0",
     "@codemirror/commands": "^6.7.0",
     "@codemirror/language": "^6.10.0",
+    "@codemirror/merge": "^6.12.2",
     "@codemirror/state": "^6.5.0",
     "@codemirror/view": "^6.35.0",
     "@tanstack/react-virtual": "^3.13.26",
diff --git a/packages/webui/src/daemon/session/DaemonSessionProvider.test.tsx b/packages/webui/src/daemon/session/DaemonSessionProvider.test.tsx
index dd0b66fb385..2ae6a8965d6 100644
--- a/packages/webui/src/daemon/session/DaemonSessionProvider.test.tsx
+++ b/packages/webui/src/daemon/session/DaemonSessionProvider.test.tsx
@@ -2162,6 +2162,29 @@ describe('DaemonSessionProvider', () => {
             durationMs: 42,
           },
         };
+        yield {
+          id: 26,
+          v: 1,
+          type: 'artifact_changed',
+          data: {
+            sessionId: 'session-1',
+            change: {
+              action: 'created',
+              artifactId: 'artifact-1',
+              artifact: {
+                id: 'artifact-1',
+                kind: 'html',
+                storage: 'workspace',
+                source: 'tool',
+                status: 'available',
+                title: 'Report',
+                workspacePath: 'report.html',
+                createdAt: '2026-07-09T00:00:00.000Z',
+                updatedAt: '2026-07-09T00:00:00.000Z',
+              },
+            },
+          },
+        };
       },
     });
     sdkMocks.sessions.push(session);
@@ -2183,6 +2206,7 @@ describe('DaemonSessionProvider', () => {
       toolsVersion: 1,
       settingsVersion: 1,
       mcpVersion: 1,
+      artifactsVersion: 1,
       initVersion: 0,
       authVersion: 0,
     });
diff --git a/packages/webui/src/daemon/session/DaemonSessionProvider.tsx b/packages/webui/src/daemon/session/DaemonSessionProvider.tsx
index 831a392731b..da28ad91525 100644
--- a/packages/webui/src/daemon/session/DaemonSessionProvider.tsx
+++ b/packages/webui/src/daemon/session/DaemonSessionProvider.tsx
@@ -190,6 +190,7 @@ const INITIAL_WORKSPACE_EVENT_SIGNALS: DaemonWorkspaceEventSignals = {
   settingsVersion: 0,
   mcpVersion: 0,
   extensionsVersion: 0,
+  artifactsVersion: 0,
   initVersion: 0,
   authVersion: 0,
 };
@@ -2226,6 +2227,7 @@ function bumpWorkspaceEventSignals(
   let settings = 0;
   let mcp = 0;
   let extensions = 0;
+  let artifacts = 0;
   let lastExtensionChange:
     | DaemonWorkspaceEventSignals['lastExtensionChange']
     | undefined;
@@ -2264,6 +2266,9 @@ function bumpWorkspaceEventSignals(
           failed: event.failed,
         };
         break;
+      case 'session.artifact.changed':
+        artifacts += 1;
+        break;
       case 'workspace.initialized':
         init += 1;
         break;
@@ -2279,7 +2284,18 @@ function bumpWorkspaceEventSignals(
     }
   }
 
-  if (memory + agents + tools + settings + mcp + extensions + init + auth === 0)
+  if (
+    memory +
+      agents +
+      tools +
+      settings +
+      mcp +
+      extensions +
+      artifacts +
+      init +
+      auth ===
+    0
+  )
     return;
 
   setSignals((current) => ({
@@ -2289,6 +2305,7 @@ function bumpWorkspaceEventSignals(
     settingsVersion: current.settingsVersion + settings,
     mcpVersion: current.mcpVersion + mcp,
     extensionsVersion: current.extensionsVersion + extensions,
+    artifactsVersion: current.artifactsVersion + artifacts,
     ...(lastExtensionChange ? { lastExtensionChange } : {}),
     initVersion: current.initVersion + init,
     authVersion: current.authVersion + auth,
diff --git a/packages/webui/src/daemon/session/actions.ts b/packages/webui/src/daemon/session/actions.ts
index ee6e79e3259..9935e23dd0c 100644
--- a/packages/webui/src/daemon/session/actions.ts
+++ b/packages/webui/src/daemon/session/actions.ts
@@ -17,6 +17,7 @@ import type {
   DaemonSessionRecapResult,
   DaemonRewindSnapshotInfo,
   DaemonSessionTaskStatus,
+  DaemonSessionArtifactsEnvelope,
   DaemonTranscriptStore,
   PermissionResponse,
 } from '@qwen-code/sdk/daemon';
@@ -1097,6 +1098,28 @@ export function createDaemonSessionActions({
       }
     },
 
+    async loadArtifacts(): Promise<DaemonSessionArtifactsEnvelope> {
+      const session = requireSessionForAction(
+        addNotice,
+        sessionRef.current,
+        'Load artifacts failed',
+        'load_artifacts',
+      );
+      try {
+        return await withActionTimeout(
+          session.artifacts(),
+          'Load artifacts timed out',
+        );
+      } catch (error) {
+        throw dispatchActionError(
+          addNotice,
+          'Load artifacts failed',
+          error,
+          'load_artifacts',
+        );
+      }
+    },
+
     async respondToGlobalPermission(
       requestId: string,
       response: PermissionResponse,
diff --git a/packages/webui/src/daemon/session/types.ts b/packages/webui/src/daemon/session/types.ts
index 2bb47d12d2c..4dbd0c94246 100644
--- a/packages/webui/src/daemon/session/types.ts
+++ b/packages/webui/src/daemon/session/types.ts
@@ -27,6 +27,7 @@ import type {
   DaemonSessionTaskStatus,
   DaemonSessionTasksStatus,
   DaemonSessionStatsStatus,
+  DaemonSessionArtifactsEnvelope,
   DaemonShellCommandResult,
   DaemonTranscriptBlock,
   DaemonTranscriptStore,
@@ -167,6 +168,7 @@ export type DaemonNoticeOperation =
   | 'load_context'
   | 'load_context_usage'
   | 'load_tasks'
+  | 'load_artifacts'
   | 'cancel_task'
   | 'clear_goal'
   | 'load_stats'
@@ -379,6 +381,7 @@ export interface DaemonSessionActions {
   ): Promise<{ cancelled: boolean }>;
   clearGoal(): Promise<{ cleared: boolean; condition?: string }>;
   getStats(): Promise<DaemonSessionStatsStatus>;
+  loadArtifacts(): Promise<DaemonSessionArtifactsEnvelope>;
   branchSession(
     name?: string,
   ): Promise<{ sessionId: string; displayName: string }>;
@@ -399,6 +402,7 @@ export interface DaemonWorkspaceEventSignals {
   settingsVersion: number;
   mcpVersion: number;
   extensionsVersion: number;
+  artifactsVersion: number;
   lastExtensionChange?: {
     status?:
       | 'installed'