diff --git a/apps/desktop/package.json b/apps/desktop/package.json
index d564488f91a..e787691e885 100644
--- a/apps/desktop/package.json
+++ b/apps/desktop/package.json
@@ -87,6 +87,7 @@
 		"@sentry/electron": "7.16.0",
 		"@streamdown/mermaid": "1.0.2",
 		"@superset/auth": "workspace:*",
+		"@superset/chat": "workspace:*",
 		"@superset/chat-legacy": "workspace:*",
 		"@superset/db": "workspace:*",
 		"@superset/host-service": "workspace:*",
diff --git a/apps/desktop/src/renderer/lib/persisted-keys/persisted-key-registry.test-data.ts b/apps/desktop/src/renderer/lib/persisted-keys/persisted-key-registry.test-data.ts
index 38ce55359df..7f40ecff6f9 100644
--- a/apps/desktop/src/renderer/lib/persisted-keys/persisted-key-registry.test-data.ts
+++ b/apps/desktop/src/renderer/lib/persisted-keys/persisted-key-registry.test-data.ts
@@ -51,6 +51,10 @@ export const PERSISTED_KEY_REGISTRY: ReadonlyArray<
 		"src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/state/paneScrollStateCache/paneScrollStateCache.ts",
 		["v2-pane-scroll-state-v1"],
 	],
+	[
+		"src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Composer/Composer.tsx",
+		["chat-v3-draft:*"],
+	],
 	["src/renderer/stores/changes/store.ts", ["changes-store"]],
 	["src/renderer/stores/prompt-history.ts", ["prompt-history"]],
 	["src/renderer/stores/tabs/store.ts", ["tabs-storage"]],
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/ChatV3Pane.tsx b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/ChatV3Pane.tsx
new file mode 100644
index 00000000000..7a289ec9a0c
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/ChatV3Pane.tsx
@@ -0,0 +1,69 @@
+import type { UserContent } from "@superset/chat/protocol";
+import { useCallback, useState } from "react";
+import type { HarnessId } from "./components/NewSessionView";
+import { NewSessionView } from "./components/NewSessionView";
+import { SessionPicker } from "./components/SessionPicker";
+import { SessionView } from "./components/SessionView";
+import { useSessionClient } from "./hooks/useSessionClient";
+
+export function ChatV3Pane({
+	onSessionIdChange,
+	sessionId,
+	workspaceId,
+}: {
+	workspaceId: string;
+	sessionId: string | null;
+	onSessionIdChange: (sessionId: string | null) => void;
+}) {
+	const { client, wiring } = useSessionClient(sessionId);
+	const [harness, setHarness] = useState<HarnessId>("claude-code");
+	const [pendingFirstPrompt, setPendingFirstPrompt] = useState<
+		UserContent[] | null
+	>(null);
+
+	const createSession = useCallback(
+		async (content: UserContent[] | null) => {
+			const created = await wiring.transport.createSession({
+				commandId: crypto.randomUUID(),
+				workspaceId,
+				harness,
+			});
+			setPendingFirstPrompt(content);
+			onSessionIdChange(created.sessionId);
+		},
+		[wiring.transport, workspaceId, harness, onSessionIdChange],
+	);
+
+	const picker = (
+		<SessionPicker
+			activeSessionId={sessionId}
+			onNewSession={() => onSessionIdChange(null)}
+			onSelect={onSessionIdChange}
+			transport={wiring.transport}
+			workspaceId={workspaceId}
+		/>
+	);
+
+	if (!client || !sessionId) {
+		return (
+			<NewSessionView
+				harness={harness}
+				headerLeft={picker}
+				onHarnessChange={setHarness}
+				onSend={(content) => void createSession(content)}
+				workspaceId={workspaceId}
+			/>
+		);
+	}
+
+	return (
+		<SessionView
+			client={client}
+			headerLeft={picker}
+			key={sessionId}
+			onFirstPromptSent={() => setPendingFirstPrompt(null)}
+			pendingFirstPrompt={pendingFirstPrompt}
+			sessionId={sessionId}
+		/>
+	);
+}
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Composer/Composer.tsx b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Composer/Composer.tsx
new file mode 100644
index 00000000000..e06854b6b7f
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Composer/Composer.tsx
@@ -0,0 +1,109 @@
+import type { OutboxEntry } from "@superset/chat/core";
+import type { UserContent } from "@superset/chat/protocol";
+import { Button } from "@superset/ui/button";
+import { Textarea } from "@superset/ui/textarea";
+import { ArrowUp, Square } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+
+const DRAFT_DEBOUNCE_MS = 300;
+
+export type ComposerProps = {
+	draftKey: string;
+	outbox: OutboxEntry[];
+	onSend: (content: UserContent[]) => OutboxEntry | null;
+	placeholder?: string;
+	disabled?: boolean;
+	onCancelTurn?: (() => void) | null;
+};
+
+export function Composer({
+	disabled,
+	draftKey,
+	onCancelTurn,
+	onSend,
+	outbox,
+	placeholder,
+}: ComposerProps) {
+	const [value, setValue] = useState(
+		() => window.localStorage.getItem(draftKey) ?? "",
+	);
+	const valueRef = useRef(value);
+	valueRef.current = value;
+	const pendingRef = useRef<{ clientId: string; sentText: string } | null>(
+		null,
+	);
+
+	useEffect(() => {
+		const timer = setTimeout(() => {
+			if (value === "") window.localStorage.removeItem(draftKey);
+			else window.localStorage.setItem(draftKey, value);
+		}, DRAFT_DEBOUNCE_MS);
+		return () => clearTimeout(timer);
+	}, [value, draftKey]);
+
+	useEffect(() => {
+		return () => {
+			const latest = valueRef.current;
+			if (latest === "") window.localStorage.removeItem(draftKey);
+			else window.localStorage.setItem(draftKey, latest);
+		};
+	}, [draftKey]);
+
+	useEffect(() => {
+		const pending = pendingRef.current;
+		if (!pending) return;
+		if (outbox.some((entry) => entry.clientId === pending.clientId)) return;
+		pendingRef.current = null;
+		if (valueRef.current === pending.sentText) {
+			setValue("");
+			window.localStorage.removeItem(draftKey);
+		}
+	}, [outbox, draftKey]);
+
+	const send = () => {
+		const text = valueRef.current;
+		if (text.trim() === "" || disabled) return;
+		const entry = onSend([{ type: "text", text }]);
+		if (entry === null) {
+			setValue("");
+			window.localStorage.removeItem(draftKey);
+			return;
+		}
+		pendingRef.current = { clientId: entry.clientId, sentText: text };
+	};
+
+	return (
+		<div className="flex items-end gap-2 border-t border-border p-3">
+			<Textarea
+				className="max-h-40 min-h-10 flex-1 resize-none"
+				disabled={disabled}
+				onChange={(event) => setValue(event.target.value)}
+				onKeyDown={(event) => {
+					if (
+						event.key === "Enter" &&
+						!event.shiftKey &&
+						!event.nativeEvent.isComposing
+					) {
+						event.preventDefault();
+						send();
+					}
+				}}
+				placeholder={placeholder ?? "Message the agent"}
+				value={value}
+			/>
+			{onCancelTurn ? (
+				<Button onClick={onCancelTurn} size="icon" variant="outline">
+					<Square className="size-4" />
+				</Button>
+			) : (
+				<Button
+					disabled={disabled || value.trim() === ""}
+					onClick={send}
+					size="icon"
+				>
+					<ArrowUp className="size-4" />
+				</Button>
+			)}
+		</div>
+	);
+}
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Composer/index.ts b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Composer/index.ts
new file mode 100644
index 00000000000..9a9ec118e6d
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Composer/index.ts
@@ -0,0 +1 @@
+export { Composer } from "./Composer";
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/MarkdownView/MarkdownView.tsx b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/MarkdownView/MarkdownView.tsx
new file mode 100644
index 00000000000..cffc6030af6
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/MarkdownView/MarkdownView.tsx
@@ -0,0 +1,45 @@
+import { cn } from "@superset/ui/utils";
+import { memo, useMemo } from "react";
+import { Streamdown } from "streamdown";
+import { planMarkdown } from "./utils/planMarkdown";
+
+const MarkdownBlock = memo(function MarkdownBlock({
+	block,
+}: {
+	block: string;
+}) {
+	return (
+		<Streamdown
+			className="[&>*:first-child]:mt-0 [&>*:last-child]:mb-0"
+			linkSafety={{ enabled: false }}
+			mode="streaming"
+		>
+			{block}
+		</Streamdown>
+	);
+});
+
+export function MarkdownView({
+	className,
+	text,
+}: {
+	text: string;
+	className?: string;
+}) {
+	const plan = useMemo(() => planMarkdown(text), [text]);
+	return (
+		<div className={cn("flex min-w-0 flex-col gap-1 text-sm", className)}>
+			{plan.stable.map((entry) => (
+				<MarkdownBlock block={entry.block} key={entry.key} />
+			))}
+			{plan.tail !== null &&
+				(plan.tailFenceOpen ? (
+					<pre className="overflow-x-auto whitespace-pre-wrap rounded-md bg-muted p-2 font-mono text-xs">
+						{plan.tail}
+					</pre>
+				) : (
+					<MarkdownBlock block={plan.tail} />
+				))}
+		</div>
+	);
+}
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/MarkdownView/index.ts b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/MarkdownView/index.ts
new file mode 100644
index 00000000000..ba28c71d565
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/MarkdownView/index.ts
@@ -0,0 +1 @@
+export { MarkdownView } from "./MarkdownView";
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/MarkdownView/utils/planMarkdown/index.ts b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/MarkdownView/utils/planMarkdown/index.ts
new file mode 100644
index 00000000000..360c543dbef
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/MarkdownView/utils/planMarkdown/index.ts
@@ -0,0 +1,2 @@
+export type { MarkdownBlockPlan, MarkdownPlan } from "./planMarkdown";
+export { planMarkdown } from "./planMarkdown";
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/MarkdownView/utils/planMarkdown/planMarkdown.test.ts b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/MarkdownView/utils/planMarkdown/planMarkdown.test.ts
new file mode 100644
index 00000000000..0291784da58
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/MarkdownView/utils/planMarkdown/planMarkdown.test.ts
@@ -0,0 +1,38 @@
+import { describe, expect, test } from "bun:test";
+import { planMarkdown } from "./planMarkdown";
+
+describe("planMarkdown", () => {
+	test("stable blocks keep byte-identical keys and content as text streams in", () => {
+		const first = planMarkdown("# Title\n\nParagraph one.\n\nParagraph tw");
+		const second = planMarkdown(
+			"# Title\n\nParagraph one.\n\nParagraph two.\n\nParagraph three",
+		);
+
+		expect(first.stable.length).toBeGreaterThan(0);
+		for (const [index, block] of first.stable.entries()) {
+			expect(second.stable[index]).toEqual(block);
+		}
+		expect(second.tail).toBe("Paragraph three");
+	});
+
+	test("an open fence marks the tail as plain and closing it releases the block", () => {
+		const open = planMarkdown("Intro\n\n```ts\nconst a = 1;\n");
+		expect(open.tailFenceOpen).toBe(true);
+		expect(open.tail).toContain("const a = 1;");
+
+		const closed = planMarkdown("Intro\n\n```ts\nconst a = 1;\n```\n\nAfter");
+		expect(closed.tailFenceOpen).toBe(false);
+		expect(closed.tail).toBe("After");
+		expect(
+			closed.stable.some((entry) => entry.block.includes("const a = 1;")),
+		).toBe(true);
+	});
+
+	test("empty text renders nothing", () => {
+		expect(planMarkdown("")).toEqual({
+			stable: [],
+			tail: null,
+			tailFenceOpen: false,
+		});
+	});
+});
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/MarkdownView/utils/planMarkdown/planMarkdown.ts b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/MarkdownView/utils/planMarkdown/planMarkdown.ts
new file mode 100644
index 00000000000..a50b34ea913
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/MarkdownView/utils/planMarkdown/planMarkdown.ts
@@ -0,0 +1,24 @@
+import { fenceState, splitForStreaming } from "@superset/chat/core";
+
+export type MarkdownBlockPlan = {
+	key: string;
+	block: string;
+};
+
+export type MarkdownPlan = {
+	stable: MarkdownBlockPlan[];
+	tail: string | null;
+	tailFenceOpen: boolean;
+};
+
+export function planMarkdown(text: string): MarkdownPlan {
+	const { stable, tail } = splitForStreaming(text);
+	let offset = 0;
+	const keyed = stable.map((block) => {
+		const key = `${offset}`;
+		offset += block.length;
+		return { key, block };
+	});
+	if (tail === "") return { stable: keyed, tail: null, tailFenceOpen: false };
+	return { stable: keyed, tail, tailFenceOpen: fenceState(text).open };
+}
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/NewSessionView/NewSessionView.tsx b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/NewSessionView/NewSessionView.tsx
new file mode 100644
index 00000000000..b3383807e94
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/NewSessionView/NewSessionView.tsx
@@ -0,0 +1,56 @@
+import type { UserContent } from "@superset/chat/protocol";
+import { Button } from "@superset/ui/button";
+import type { ReactNode } from "react";
+import { Composer } from "../Composer";
+
+export const HARNESSES = ["claude-code", "codex"] as const;
+export type HarnessId = (typeof HARNESSES)[number];
+
+export function NewSessionView({
+	harness,
+	headerLeft,
+	onHarnessChange,
+	onSend,
+	workspaceId,
+}: {
+	workspaceId: string;
+	harness: HarnessId;
+	onHarnessChange: (harness: HarnessId) => void;
+	onSend: (content: UserContent[]) => void;
+	headerLeft?: ReactNode;
+}) {
+	return (
+		<div className="flex h-full min-h-0 flex-col">
+			<div className="flex items-center gap-2 border-b border-border px-3 py-2">
+				{headerLeft}
+				<div className="ml-auto flex items-center gap-1">
+					{HARNESSES.map((candidate) => (
+						<Button
+							key={candidate}
+							onClick={() => onHarnessChange(candidate)}
+							size="sm"
+							variant={candidate === harness ? "secondary" : "ghost"}
+						>
+							{candidate}
+						</Button>
+					))}
+				</div>
+			</div>
+			<div className="flex flex-1 flex-col items-center justify-center gap-1 text-center">
+				<span className="text-sm font-medium">New chat</span>
+				<span className="text-xs text-muted-foreground">
+					Send a message to start a {harness} session
+				</span>
+			</div>
+			<Composer
+				draftKey={`chat-v3-draft:new:${workspaceId}`}
+				onSend={(content) => {
+					onSend(content);
+					return null;
+				}}
+				outbox={[]}
+				placeholder={`Start a ${harness} session`}
+			/>
+		</div>
+	);
+}
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/NewSessionView/index.ts b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/NewSessionView/index.ts
new file mode 100644
index 00000000000..43f650bd775
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/NewSessionView/index.ts
@@ -0,0 +1,2 @@
+export type { HarnessId } from "./NewSessionView";
+export { HARNESSES, NewSessionView } from "./NewSessionView";
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/SessionHeader/SessionHeader.tsx b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/SessionHeader/SessionHeader.tsx
new file mode 100644
index 00000000000..d229393a0d1
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/SessionHeader/SessionHeader.tsx
@@ -0,0 +1,75 @@
+import type { StreamStatus } from "@superset/chat/client";
+import type { SessionState, SessionStatus } from "@superset/chat/protocol";
+import { Badge } from "@superset/ui/badge";
+import { cn } from "@superset/ui/utils";
+import type { ReactNode } from "react";
+
+const STATUS_LABELS: Record<SessionStatus, string> = {
+	starting: "Starting",
+	running: "Working",
+	awaiting_input: "Needs input",
+	idle: "Idle",
+	not_loaded: "Not loaded",
+	offline: "Offline",
+	dead: "Dead",
+};
+
+const CONNECTION_LABELS: Record<StreamStatus, string> = {
+	connecting: "Connecting",
+	open: "Live",
+	closed: "Offline",
+};
+
+export function SessionHeader({
+	connection,
+	left,
+	right,
+	session,
+}: {
+	session: SessionState | null;
+	connection: StreamStatus;
+	left?: ReactNode;
+	right?: ReactNode;
+}) {
+	const status = session?.status ?? null;
+	return (
+		<div className="flex items-center gap-2 border-b border-border px-3 py-2">
+			{left}
+			{session?.harness && (
+				<Badge className="font-mono" variant="outline">
+					{session.harness}
+				</Badge>
+			)}
+			{status && (
+				<Badge
+					variant={status === "awaiting_input" ? "default" : "secondary"}
+					className={cn(
+						status === "awaiting_input" &&
+							"bg-amber-500/15 text-amber-600 dark:text-amber-400",
+					)}
+				>
+					{STATUS_LABELS[status] ?? status}
+				</Badge>
+			)}
+			<span
+				className={cn(
+					"ml-auto flex items-center gap-1.5 text-xs",
+					connection === "open" && "text-emerald-600 dark:text-emerald-400",
+					connection === "connecting" && "text-muted-foreground",
+					connection === "closed" && "text-destructive",
+				)}
+			>
+				<span
+					className={cn(
+						"size-1.5 rounded-full",
+						connection === "open" && "bg-emerald-500",
+						connection === "connecting" && "animate-pulse bg-muted-foreground",
+						connection === "closed" && "bg-destructive",
+					)}
+				/>
+				{CONNECTION_LABELS[connection]}
+			</span>
+			{right}
+		</div>
+	);
+}
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/SessionHeader/index.ts b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/SessionHeader/index.ts
new file mode 100644
index 00000000000..026160c2751
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/SessionHeader/index.ts
@@ -0,0 +1 @@
+export { SessionHeader } from "./SessionHeader";
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/SessionPicker/SessionPicker.tsx b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/SessionPicker/SessionPicker.tsx
new file mode 100644
index 00000000000..51384489831
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/SessionPicker/SessionPicker.tsx
@@ -0,0 +1,81 @@
+import type { ChatTransport } from "@superset/chat/client";
+import type { ChatSessionRow } from "@superset/chat-runtime";
+import { Button } from "@superset/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@superset/ui/dropdown-menu";
+import { ChevronDown, Plus } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+
+function sessionLabel(session: ChatSessionRow): string {
+	return session.title ?? session.sessionId.slice(0, 8);
+}
+
+export function SessionPicker({
+	activeSessionId,
+	onNewSession,
+	onSelect,
+	transport,
+	workspaceId,
+}: {
+	workspaceId: string;
+	transport: ChatTransport;
+	activeSessionId: string | null;
+	onSelect: (sessionId: string) => void;
+	onNewSession: () => void;
+}) {
+	const [sessions, setSessions] = useState<ChatSessionRow[]>([]);
+
+	const refresh = useCallback(async () => {
+		try {
+			setSessions(await transport.listSessions({ workspaceId }));
+		} catch {
+			setSessions([]);
+		}
+	}, [transport, workspaceId]);
+
+	useEffect(() => {
+		void refresh();
+	}, [refresh]);
+
+	const active = sessions.find(
+		(session) => session.sessionId === activeSessionId,
+	);
+
+	return (
+		<DropdownMenu
+			onOpenChange={(open) => {
+				if (open) void refresh();
+			}}
+		>
+			<DropdownMenuTrigger asChild>
+				<Button size="sm" variant="ghost">
+					{active ? sessionLabel(active) : "Sessions"}
+					<ChevronDown className="ml-1 size-3" />
+				</Button>
+			</DropdownMenuTrigger>
+			<DropdownMenuContent align="start">
+				{sessions.map((session) => (
+					<DropdownMenuItem
+						key={session.sessionId}
+						onSelect={() => onSelect(session.sessionId)}
+					>
+						<span className="truncate">{sessionLabel(session)}</span>
+						<span className="ml-2 font-mono text-xs text-muted-foreground">
+							{session.harness}
+						</span>
+					</DropdownMenuItem>
+				))}
+				{sessions.length > 0 && <DropdownMenuSeparator />}
+				<DropdownMenuItem onSelect={onNewSession}>
+					<Plus className="mr-1 size-3.5" />
+					New session
+				</DropdownMenuItem>
+			</DropdownMenuContent>
+		</DropdownMenu>
+	);
+}
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/SessionPicker/index.ts b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/SessionPicker/index.ts
new file mode 100644
index 00000000000..b43e3e80ffa
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/SessionPicker/index.ts
@@ -0,0 +1 @@
+export { SessionPicker } from "./SessionPicker";
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/SessionView/SessionView.tsx b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/SessionView/SessionView.tsx
new file mode 100644
index 00000000000..f125aea5226
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/SessionView/SessionView.tsx
@@ -0,0 +1,85 @@
+import type { SessionClient } from "@superset/chat/client";
+import type { UserContent } from "@superset/chat/protocol";
+import {
+	useApprovals,
+	useChatSession,
+	useTimeline,
+} from "@superset/chat/react";
+import { Loader } from "@superset/ui/ai-elements/loader";
+import type { ReactNode } from "react";
+import { useEffect, useMemo, useRef } from "react";
+import { Composer } from "../Composer";
+import { SessionHeader } from "../SessionHeader";
+import { Transcript } from "../Transcript";
+
+export function SessionView({
+	client,
+	headerLeft,
+	pendingFirstPrompt,
+	onFirstPromptSent,
+	sessionId,
+}: {
+	client: SessionClient;
+	sessionId: string;
+	headerLeft?: ReactNode;
+	pendingFirstPrompt: UserContent[] | null;
+	onFirstPromptSent: () => void;
+}) {
+	const session = useChatSession({ client });
+	const timeline = useTimeline(session.snapshot);
+	const approvals = useApprovals(session.snapshot);
+
+	const firstPromptSentRef = useRef(false);
+	useEffect(() => {
+		if (!pendingFirstPrompt || firstPromptSentRef.current) return;
+		if (session.status !== "ready") return;
+		firstPromptSentRef.current = true;
+		session.sendPrompt(pendingFirstPrompt);
+		onFirstPromptSent();
+	}, [pendingFirstPrompt, session, onFirstPromptSent]);
+
+	const runningTurnId = useMemo(() => {
+		for (const turn of session.snapshot.turns.values()) {
+			if (turn.status === "running") return turn.id;
+		}
+		return null;
+	}, [session.snapshot.turns]);
+
+	return (
+		<div className="flex h-full min-h-0 flex-col">
+			<SessionHeader
+				connection={session.connection}
+				left={headerLeft}
+				session={session.snapshot.session}
+			/>
+			{session.status === "loading" ? (
+				<div className="flex flex-1 items-center justify-center">
+					<Loader />
+				</div>
+			) : (
+				<Transcript
+					approvals={approvals}
+					groups={timeline}
+					hasOlder={session.hasOlder}
+					onDiscardPrompt={session.discardPrompt}
+					onLoadOlder={() => void session.loadOlder()}
+					onRespond={(approvalId, decision) =>
+						void session.respondToApproval(approvalId, decision)
+					}
+					onRetryPrompt={session.retryPrompt}
+					outbox={session.outbox}
+					snapshot={session.snapshot}
+				/>
+			)}
+			<Composer
+				disabled={session.status !== "ready"}
+				draftKey={`chat-v3-draft:${sessionId}`}
+				onCancelTurn={
+					runningTurnId ? () => void session.cancelTurn(runningTurnId) : null
+				}
+				onSend={(content) => session.sendPrompt(content)}
+				outbox={session.outbox}
+			/>
+		</div>
+	);
+}
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/SessionView/index.ts b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/SessionView/index.ts
new file mode 100644
index 00000000000..a77dcdd8e2d
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/SessionView/index.ts
@@ -0,0 +1 @@
+export { SessionView } from "./SessionView";
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/Transcript.tsx b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/Transcript.tsx
new file mode 100644
index 00000000000..15f06e8ece5
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/Transcript.tsx
@@ -0,0 +1,181 @@
+import type {
+	OutboxEntry,
+	SessionSnapshot,
+	TurnGroup,
+} from "@superset/chat/core";
+import type { ApprovalRequest, Decision } from "@superset/chat/protocol";
+import { Badge } from "@superset/ui/badge";
+import { Button } from "@superset/ui/button";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { TurnGroupSection } from "./components/TurnGroupSection";
+
+export type TranscriptProps = {
+	groups: TurnGroup[];
+	snapshot: SessionSnapshot;
+	approvals: ApprovalRequest[];
+	outbox: OutboxEntry[];
+	hasOlder: boolean;
+	onLoadOlder: () => void;
+	onRespond: (approvalId: string, decision: Decision) => void;
+	onRetryPrompt: (clientId: string) => void;
+	onDiscardPrompt: (clientId: string) => void;
+};
+
+function latestUserItemId(groups: TurnGroup[]): string | null {
+	for (let groupIndex = groups.length - 1; groupIndex >= 0; groupIndex -= 1) {
+		const group = groups[groupIndex];
+		if (!group) continue;
+		for (let index = group.entries.length - 1; index >= 0; index -= 1) {
+			const entry = group.entries[index];
+			if (entry?.kind === "item" && entry.item.kind === "user_message") {
+				return entry.item.id;
+			}
+		}
+	}
+	return null;
+}
+
+function outboxText(entry: OutboxEntry): string {
+	return entry.content
+		.filter((content) => content.type === "text")
+		.map((content) => content.text)
+		.join("\n");
+}
+
+export function Transcript({
+	approvals,
+	groups,
+	hasOlder,
+	onDiscardPrompt,
+	onLoadOlder,
+	onRespond,
+	onRetryPrompt,
+	outbox,
+	snapshot,
+}: TranscriptProps) {
+	const containerRef = useRef<HTMLDivElement | null>(null);
+	const [entryOverrides, setEntryOverrides] = useState<
+		ReadonlyMap<string, boolean>
+	>(new Map());
+
+	const isEntryCollapsed = useCallback(
+		(entryKey: string, defaultCollapsed: boolean) =>
+			entryOverrides.get(entryKey) ?? defaultCollapsed,
+		[entryOverrides],
+	);
+	const onToggleEntry = useCallback((entryKey: string, collapsed: boolean) => {
+		setEntryOverrides((previous) => {
+			const next = new Map(previous);
+			next.set(entryKey, collapsed);
+			return next;
+		});
+	}, []);
+	const expandAll = useCallback(() => {
+		setEntryOverrides((previous) => {
+			const next = new Map<string, boolean>();
+			for (const key of previous.keys()) next.set(key, false);
+			for (const group of groups) {
+				group.entries.forEach((entry, index) => {
+					if (entry.kind === "tool_run") {
+						next.set(`${group.turnId}:${index}`, false);
+					}
+				});
+			}
+			return next;
+		});
+	}, [groups]);
+
+	const pendingApprovalTargets = useMemo(() => {
+		const targets = new Set<string>();
+		for (const approval of approvals) {
+			targets.add(approval.id);
+			if (approval.targetItemId) targets.add(approval.targetItemId);
+		}
+		return targets;
+	}, [approvals]);
+
+	const anchorItemId = latestUserItemId(groups);
+	useEffect(() => {
+		if (!anchorItemId) return;
+		containerRef.current
+			?.querySelector(`[data-item-id="${CSS.escape(anchorItemId)}"]`)
+			?.scrollIntoView({ block: "start" });
+	}, [anchorItemId]);
+
+	const firstPendingApprovalId = approvals[0]?.id ?? null;
+	useEffect(() => {
+		if (!firstPendingApprovalId) return;
+		containerRef.current
+			?.querySelector(`[data-item-id="${CSS.escape(firstPendingApprovalId)}"]`)
+			?.scrollIntoView({ block: "nearest" });
+	}, [firstPendingApprovalId]);
+
+	return (
+		<div
+			className="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto px-4 py-3"
+			ref={containerRef}
+		>
+			<div className="flex items-center gap-2">
+				{hasOlder && (
+					<Button onClick={onLoadOlder} size="sm" variant="ghost">
+						Load earlier messages
+					</Button>
+				)}
+				<Button
+					className="ml-auto text-xs text-muted-foreground"
+					onClick={expandAll}
+					size="sm"
+					variant="ghost"
+				>
+					Expand all
+				</Button>
+			</div>
+			{groups.map((group) => (
+				<TurnGroupSection
+					group={group}
+					isEntryCollapsed={isEntryCollapsed}
+					key={group.turnId}
+					onRespond={onRespond}
+					onToggleEntry={onToggleEntry}
+					pendingApprovalTargets={pendingApprovalTargets}
+					snapshot={snapshot}
+				/>
+			))}
+			{outbox.map((entry) => (
+				<div
+					className="flex flex-col items-end gap-1 self-end"
+					key={entry.clientId}
+				>
+					<div className="max-w-[80%] whitespace-pre-wrap break-words rounded-lg bg-primary/10 px-3 py-2 text-sm">
+						{outboxText(entry)}
+					</div>
+					<div className="flex items-center gap-2">
+						<Badge
+							variant={entry.state === "failed" ? "destructive" : "outline"}
+						>
+							{entry.state === "failed" ? "Failed to send" : "Sending"}
+						</Badge>
+						{entry.state === "failed" && (
+							<>
+								<Button
+									onClick={() => onRetryPrompt(entry.clientId)}
+									size="sm"
+									variant="ghost"
+								>
+									Retry
+								</Button>
+								<Button
+									onClick={() => onDiscardPrompt(entry.clientId)}
+									size="sm"
+									variant="ghost"
+								>
+									Discard
+								</Button>
+							</>
+						)}
+					</div>
+				</div>
+			))}
+		</div>
+	);
+}
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/AgentMessageRow/AgentMessageRow.tsx b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/AgentMessageRow/AgentMessageRow.tsx
new file mode 100644
index 00000000000..4ba4d941492
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/AgentMessageRow/AgentMessageRow.tsx
@@ -0,0 +1,14 @@
+import type { SessionSnapshot } from "@superset/chat/core";
+import { displayText } from "@superset/chat/core";
+import type { AgentMessage } from "@superset/chat/protocol";
+import { MarkdownView } from "../../../MarkdownView";
+
+export function AgentMessageRow({
+	item,
+	snapshot,
+}: {
+	item: AgentMessage;
+	snapshot: SessionSnapshot;
+}) {
+	return <MarkdownView text={displayText(snapshot, item.id)} />;
+}
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/AgentMessageRow/index.ts b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/AgentMessageRow/index.ts
new file mode 100644
index 00000000000..f2bc4b54308
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/AgentMessageRow/index.ts
@@ -0,0 +1 @@
+export { AgentMessageRow } from "./AgentMessageRow";
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/ApprovalRow/ApprovalRow.tsx b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/ApprovalRow/ApprovalRow.tsx
new file mode 100644
index 00000000000..a9df78899d2
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/ApprovalRow/ApprovalRow.tsx
@@ -0,0 +1,93 @@
+import type { ApprovalRequest, Decision } from "@superset/chat/protocol";
+import { Badge } from "@superset/ui/badge";
+import { Button } from "@superset/ui/button";
+import { ToolContentList } from "../ToolContentList";
+
+function decisionLabel(decision: Decision | undefined): string {
+	if (!decision) return "Answered";
+	switch (decision.type) {
+		case "accept":
+			return "Allowed";
+		case "accept_for_session":
+			return "Allowed for session";
+		case "decline":
+			return "Denied";
+		case "cancel":
+			return "Canceled";
+		case "option":
+			return decision.optionId;
+		default:
+			return "Answered";
+	}
+}
+
+export function ApprovalRow({
+	item,
+	onRespond,
+}: {
+	item: ApprovalRequest;
+	onRespond: (approvalId: string, decision: Decision) => void;
+}) {
+	const pending = item.status === "pending";
+	return (
+		<div
+			className={
+				pending
+					? "flex flex-col gap-2 rounded-lg border border-amber-500/50 bg-amber-500/5 p-3"
+					: "flex flex-col gap-2 rounded-lg border border-border bg-muted/30 p-3"
+			}
+		>
+			<div className="flex items-center gap-2">
+				<span className="text-sm font-medium">{item.title}</span>
+				{item.status === "stale" && <Badge variant="outline">Expired</Badge>}
+				{item.status === "answered" && (
+					<Badge variant="secondary">{decisionLabel(item.decision)}</Badge>
+				)}
+			</div>
+			{item.detail && <ToolContentList itemId={item.id} items={item.detail} />}
+			{pending &&
+				(item.options?.length ? (
+					<div className="flex flex-wrap gap-2">
+						{item.options.map((option) => (
+							<Button
+								key={option.optionId}
+								onClick={() =>
+									onRespond(item.id, {
+										type: "option",
+										optionId: option.optionId,
+									})
+								}
+								size="sm"
+								variant="outline"
+							>
+								{option.label}
+							</Button>
+						))}
+					</div>
+				) : (
+					<div className="flex flex-wrap gap-2">
+						<Button
+							onClick={() => onRespond(item.id, { type: "accept" })}
+							size="sm"
+						>
+							Allow
+						</Button>
+						<Button
+							onClick={() => onRespond(item.id, { type: "accept_for_session" })}
+							size="sm"
+							variant="outline"
+						>
+							Allow for session
+						</Button>
+						<Button
+							onClick={() => onRespond(item.id, { type: "decline" })}
+							size="sm"
+							variant="outline"
+						>
+							Deny
+						</Button>
+					</div>
+				))}
+		</div>
+	);
+}
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/ApprovalRow/index.ts b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/ApprovalRow/index.ts
new file mode 100644
index 00000000000..cc4d171f03f
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/ApprovalRow/index.ts
@@ -0,0 +1 @@
+export { ApprovalRow } from "./ApprovalRow";
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/NoticeRow/NoticeRow.tsx b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/NoticeRow/NoticeRow.tsx
new file mode 100644
index 00000000000..9565a22004c
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/NoticeRow/NoticeRow.tsx
@@ -0,0 +1,17 @@
+import type { Notice } from "@superset/chat/protocol";
+import { cn } from "@superset/ui/utils";
+
+export function NoticeRow({ item }: { item: Notice }) {
+	return (
+		<div
+			className={cn(
+				"text-xs",
+				item.noticeKind === "error"
+					? "text-destructive"
+					: "text-muted-foreground",
+			)}
+		>
+			{item.text ?? item.noticeKind}
+		</div>
+	);
+}
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/NoticeRow/index.ts b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/NoticeRow/index.ts
new file mode 100644
index 00000000000..e2b19cb6d1d
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/NoticeRow/index.ts
@@ -0,0 +1 @@
+export { NoticeRow } from "./NoticeRow";
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/PlanRow/PlanRow.tsx b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/PlanRow/PlanRow.tsx
new file mode 100644
index 00000000000..bd0edaf584f
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/PlanRow/PlanRow.tsx
@@ -0,0 +1,36 @@
+import type { Plan } from "@superset/chat/protocol";
+import { CheckCircle2, Circle, CircleDotDashed } from "lucide-react";
+
+const ICON_BY_STATUS = {
+	pending: Circle,
+	in_progress: CircleDotDashed,
+	completed: CheckCircle2,
+} as const;
+
+export function PlanRow({ item }: { item: Plan }) {
+	return (
+		<div className="flex flex-col gap-1 rounded-lg border border-border bg-muted/30 p-2">
+			<span className="text-xs font-medium text-muted-foreground">Plan</span>
+			{item.entries.map((entry, index) => {
+				const Icon = ICON_BY_STATUS[entry.status];
+				return (
+					<div
+						className="flex items-start gap-2 text-sm"
+						key={`${item.id}:${index}`}
+					>
+						<Icon className="mt-0.5 size-3.5 shrink-0 text-muted-foreground" />
+						<span
+							className={
+								entry.status === "completed"
+									? "text-muted-foreground line-through"
+									: undefined
+							}
+						>
+							{entry.text}
+						</span>
+					</div>
+				);
+			})}
+		</div>
+	);
+}
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/PlanRow/index.ts b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/PlanRow/index.ts
new file mode 100644
index 00000000000..803918539d7
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/PlanRow/index.ts
@@ -0,0 +1 @@
+export { PlanRow } from "./PlanRow";
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/ReasoningRow/ReasoningRow.tsx b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/ReasoningRow/ReasoningRow.tsx
new file mode 100644
index 00000000000..a7c3393cc65
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/ReasoningRow/ReasoningRow.tsx
@@ -0,0 +1,24 @@
+import type { SessionSnapshot } from "@superset/chat/core";
+import { displayText } from "@superset/chat/core";
+import type { Reasoning as ReasoningItem } from "@superset/chat/protocol";
+import {
+	Reasoning,
+	ReasoningContent,
+	ReasoningTrigger,
+} from "@superset/ui/ai-elements/reasoning";
+
+export function ReasoningRow({
+	item,
+	snapshot,
+}: {
+	item: ReasoningItem;
+	snapshot: SessionSnapshot;
+}) {
+	const text = displayText(snapshot, item.id);
+	return (
+		<Reasoning isStreaming={item.completedAtMs === undefined}>
+			<ReasoningTrigger />
+			<ReasoningContent>{text}</ReasoningContent>
+		</Reasoning>
+	);
+}
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/ReasoningRow/index.ts b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/ReasoningRow/index.ts
new file mode 100644
index 00000000000..44247bfaf64
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/ReasoningRow/index.ts
@@ -0,0 +1 @@
+export { ReasoningRow } from "./ReasoningRow";
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/ToolCallRow/ToolCallRow.tsx b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/ToolCallRow/ToolCallRow.tsx
new file mode 100644
index 00000000000..737fdf7355f
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/ToolCallRow/ToolCallRow.tsx
@@ -0,0 +1,53 @@
+import type { ToolCall, ToolCallStatus } from "@superset/chat/protocol";
+import type { ToolDisplayState } from "@superset/ui/ai-elements/tool";
+import { Tool, ToolContent, ToolHeader } from "@superset/ui/ai-elements/tool";
+import { Badge } from "@superset/ui/badge";
+import { ToolContentList } from "../ToolContentList";
+
+const STATE_BY_STATUS: Record<ToolCallStatus, ToolDisplayState> = {
+	running: "input-available",
+	completed: "output-available",
+	failed: "output-error",
+	declined: "output-denied",
+	canceled: "output-denied",
+};
+
+function durationLabel(item: ToolCall): string | null {
+	if (item.completedAtMs === undefined) return null;
+	return `${((item.completedAtMs - item.startedAtMs) / 1000).toFixed(1)}s`;
+}
+
+export function ToolCallRow({ item }: { item: ToolCall }) {
+	const duration = durationLabel(item);
+	return (
+		<Tool defaultOpen={item.status === "running"}>
+			<ToolHeader
+				state={STATE_BY_STATUS[item.status]}
+				title={item.title}
+				type={item.toolName}
+			/>
+			<ToolContent>
+				<div className="flex flex-col gap-2 p-2">
+					<div className="flex items-center gap-2">
+						<Badge
+							variant={
+								item.status === "failed" || item.status === "declined"
+									? "destructive"
+									: "secondary"
+							}
+						>
+							{item.status}
+						</Badge>
+						{duration && (
+							<span className="text-xs text-muted-foreground">{duration}</span>
+						)}
+						<span className="truncate font-mono text-xs text-muted-foreground">
+							{item.toolName}
+						</span>
+					</div>
+					<ToolContentList itemId={item.id} items={item.content} />
+				</div>
+			</ToolContent>
+		</Tool>
+	);
+}
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/ToolCallRow/index.ts b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/ToolCallRow/index.ts
new file mode 100644
index 00000000000..4cb832c3d82
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/ToolCallRow/index.ts
@@ -0,0 +1 @@
+export { ToolCallRow } from "./ToolCallRow";
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/ToolContentList/ToolContentList.tsx b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/ToolContentList/ToolContentList.tsx
new file mode 100644
index 00000000000..e6981103cf9
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/ToolContentList/ToolContentList.tsx
@@ -0,0 +1,30 @@
+import type { ToolContent } from "@superset/chat/protocol";
+import { DiffContent } from "./components/DiffContent";
+import { TerminalContent } from "./components/TerminalContent";
+import { TextContent } from "./components/TextContent";
+
+export function ToolContentList({
+	itemId,
+	items,
+}: {
+	itemId: string;
+	items: readonly ToolContent[];
+}) {
+	return (
+		<>
+			{items.map((content, index) => {
+				const key = `${itemId}:${index}`;
+				switch (content.type) {
+					case "diff":
+						return <DiffContent content={content} key={key} />;
+					case "terminal":
+						return <TerminalContent content={content} key={key} />;
+					case "text":
+						return <TextContent key={key} text={content.text} />;
+					default:
+						return null;
+				}
+			})}
+		</>
+	);
+}
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/ToolContentList/components/DiffContent/DiffContent.tsx b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/ToolContentList/components/DiffContent/DiffContent.tsx
new file mode 100644
index 00000000000..a58d42f52d7
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/ToolContentList/components/DiffContent/DiffContent.tsx
@@ -0,0 +1,30 @@
+import type { ToolContent } from "@superset/chat/protocol";
+import { CodeBlock } from "@superset/ui/ai-elements/code-block";
+
+type DiffToolContent = Extract<ToolContent, { type: "diff" }>;
+
+function toUnified(content: DiffToolContent): string {
+	const oldLines =
+		content.oldText === null
+			? []
+			: content.oldText.split("\n").map((line) => `-${line}`);
+	const newLines = content.newText.split("\n").map((line) => `+${line}`);
+	return [
+		`--- a/${content.path}`,
+		`+++ b/${content.path}`,
+		...oldLines,
+		...newLines,
+	].join("\n");
+}
+
+export function DiffContent({ content }: { content: DiffToolContent }) {
+	return (
+		<div className="flex flex-col gap-1">
+			<span className="font-mono text-xs text-muted-foreground">
+				{content.path}
+				{content.oldText === null ? " (new file)" : ""}
+			</span>
+			<CodeBlock code={toUnified(content)} language="diff" />
+		</div>
+	);
+}
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/ToolContentList/components/DiffContent/index.ts b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/ToolContentList/components/DiffContent/index.ts
new file mode 100644
index 00000000000..5cddb7b6ca7
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/ToolContentList/components/DiffContent/index.ts
@@ -0,0 +1 @@
+export { DiffContent } from "./DiffContent";
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/ToolContentList/components/TerminalContent/TerminalContent.tsx b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/ToolContentList/components/TerminalContent/TerminalContent.tsx
new file mode 100644
index 00000000000..6cdd55ed9dc
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/ToolContentList/components/TerminalContent/TerminalContent.tsx
@@ -0,0 +1,30 @@
+import type { ToolContent } from "@superset/chat/protocol";
+import { Badge } from "@superset/ui/badge";
+
+const MAX_OUTPUT_CHARS = 20_000;
+
+type TerminalToolContent = Extract<ToolContent, { type: "terminal" }>;
+
+export function TerminalContent({ content }: { content: TerminalToolContent }) {
+	const output =
+		content.output.length > MAX_OUTPUT_CHARS
+			? content.output.slice(-MAX_OUTPUT_CHARS)
+			: content.output;
+	const clipped = content.truncated || output.length < content.output.length;
+	return (
+		<div className="flex flex-col gap-1 font-mono text-xs">
+			<div className="flex items-center gap-2 text-muted-foreground">
+				<span className="truncate">$ {content.command}</span>
+				{content.exitCode !== undefined && content.exitCode !== 0 && (
+					<Badge variant="destructive">exit {content.exitCode}</Badge>
+				)}
+			</div>
+			<pre className="max-h-80 overflow-auto whitespace-pre-wrap rounded-md bg-muted/50 p-2">
+				{output}
+			</pre>
+			{clipped && (
+				<span className="text-muted-foreground">Output truncated</span>
+			)}
+		</div>
+	);
+}
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/ToolContentList/components/TerminalContent/index.ts b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/ToolContentList/components/TerminalContent/index.ts
new file mode 100644
index 00000000000..f13e98a77ea
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/ToolContentList/components/TerminalContent/index.ts
@@ -0,0 +1 @@
+export { TerminalContent } from "./TerminalContent";
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/ToolContentList/components/TextContent/TextContent.tsx b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/ToolContentList/components/TextContent/TextContent.tsx
new file mode 100644
index 00000000000..fb688edf8e8
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/ToolContentList/components/TextContent/TextContent.tsx
@@ -0,0 +1,7 @@
+export function TextContent({ text }: { text: string }) {
+	return (
+		<pre className="overflow-x-auto whitespace-pre-wrap rounded-md bg-muted/50 p-2 font-mono text-xs">
+			{text}
+		</pre>
+	);
+}
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/ToolContentList/components/TextContent/index.ts b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/ToolContentList/components/TextContent/index.ts
new file mode 100644
index 00000000000..ba1b0d9336a
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/ToolContentList/components/TextContent/index.ts
@@ -0,0 +1 @@
+export { TextContent } from "./TextContent";
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/ToolContentList/index.ts b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/ToolContentList/index.ts
new file mode 100644
index 00000000000..bae2213e74c
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/ToolContentList/index.ts
@@ -0,0 +1 @@
+export { ToolContentList } from "./ToolContentList";
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/TurnGroupSection/TurnGroupSection.tsx b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/TurnGroupSection/TurnGroupSection.tsx
new file mode 100644
index 00000000000..b4d2da360b2
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/TurnGroupSection/TurnGroupSection.tsx
@@ -0,0 +1,137 @@
+import type { SessionSnapshot, TurnGroup } from "@superset/chat/core";
+import type { Decision, Item } from "@superset/chat/protocol";
+import { isKnownItem } from "@superset/chat/protocol";
+import {
+	Collapsible,
+	CollapsibleContent,
+	CollapsibleTrigger,
+} from "@superset/ui/collapsible";
+import { ChevronRight } from "lucide-react";
+import { rowKindForItem } from "../../utils/rowKind";
+import { AgentMessageRow } from "../AgentMessageRow";
+import { ApprovalRow } from "../ApprovalRow";
+import { NoticeRow } from "../NoticeRow";
+import { PlanRow } from "../PlanRow";
+import { ReasoningRow } from "../ReasoningRow";
+import { ToolCallRow } from "../ToolCallRow";
+import { UnknownItemRow } from "../UnknownItemRow";
+import { UserMessageRow } from "../UserMessageRow";
+
+const OFFSCREEN_CLASSNAME =
+	"[content-visibility:auto] [contain-intrinsic-size:auto_240px]";
+
+export type TurnGroupSectionProps = {
+	group: TurnGroup;
+	snapshot: SessionSnapshot;
+	pendingApprovalTargets: ReadonlySet<string>;
+	isEntryCollapsed: (entryKey: string, defaultCollapsed: boolean) => boolean;
+	onToggleEntry: (entryKey: string, collapsed: boolean) => void;
+	onRespond: (approvalId: string, decision: Decision) => void;
+};
+
+function ItemRow({
+	item,
+	onRespond,
+	snapshot,
+}: {
+	item: Item;
+	snapshot: SessionSnapshot;
+	onRespond: TurnGroupSectionProps["onRespond"];
+}) {
+	if (rowKindForItem(item) === "unknown" || !isKnownItem(item)) {
+		return <UnknownItemRow item={item} />;
+	}
+	switch (item.kind) {
+		case "user_message":
+			return <UserMessageRow item={item} />;
+		case "agent_message":
+			return <AgentMessageRow item={item} snapshot={snapshot} />;
+		case "reasoning":
+			return <ReasoningRow item={item} snapshot={snapshot} />;
+		case "tool_call":
+			return <ToolCallRow item={item} />;
+		case "plan":
+			return <PlanRow item={item} />;
+		case "approval_request":
+			return <ApprovalRow item={item} onRespond={onRespond} />;
+		case "notice":
+			return <NoticeRow item={item} />;
+	}
+}
+
+export function TurnGroupSection({
+	group,
+	isEntryCollapsed,
+	onToggleEntry,
+	onRespond,
+	pendingApprovalTargets,
+	snapshot,
+}: TurnGroupSectionProps) {
+	const turnSettled = group.turn !== null && group.turn.status !== "running";
+	return (
+		<div className="flex flex-col gap-2">
+			{group.entries.map((entry, index) => {
+				if (entry.kind === "item") {
+					return (
+						<div
+							className={OFFSCREEN_CLASSNAME}
+							data-item-id={entry.item.id}
+							key={entry.item.id}
+						>
+							<ItemRow
+								item={entry.item}
+								onRespond={onRespond}
+								snapshot={snapshot}
+							/>
+						</div>
+					);
+				}
+
+				const entryKey = `${group.turnId}:${index}`;
+				const containsApprovalTarget = entry.items.some((tool) =>
+					pendingApprovalTargets.has(tool.id),
+				);
+				const collapsed = isEntryCollapsed(
+					entryKey,
+					turnSettled && !containsApprovalTarget,
+				);
+				return (
+					<div
+						className={OFFSCREEN_CLASSNAME}
+						data-item-id={entry.items[0]?.id}
+						key={entryKey}
+					>
+						<Collapsible
+							onOpenChange={(open) => onToggleEntry(entryKey, !open)}
+							open={!collapsed}
+						>
+							<CollapsibleTrigger className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground">
+								<ChevronRight
+									className={
+										collapsed
+											? "size-3 transition-transform"
+											: "size-3 rotate-90 transition-transform"
+									}
+								/>
+								{entry.items.length} tool calls
+							</CollapsibleTrigger>
+							<CollapsibleContent className="flex flex-col gap-2 pt-1">
+								{entry.items.map((tool) => (
+									<ToolCallRow item={tool} key={tool.id} />
+								))}
+							</CollapsibleContent>
+						</Collapsible>
+					</div>
+				);
+			})}
+			{group.turn?.status === "failed" && (
+				<div className="text-xs text-destructive">
+					Turn failed{group.turn.error ? `: ${group.turn.error.message}` : ""}
+				</div>
+			)}
+			{group.turn?.status === "interrupted" && (
+				<div className="text-xs text-muted-foreground">Interrupted</div>
+			)}
+		</div>
+	);
+}
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/TurnGroupSection/index.ts b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/TurnGroupSection/index.ts
new file mode 100644
index 00000000000..4697c1230e5
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/TurnGroupSection/index.ts
@@ -0,0 +1 @@
+export { TurnGroupSection } from "./TurnGroupSection";
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/UnknownItemRow/UnknownItemRow.tsx b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/UnknownItemRow/UnknownItemRow.tsx
new file mode 100644
index 00000000000..50ef8dbd7cf
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/UnknownItemRow/UnknownItemRow.tsx
@@ -0,0 +1,12 @@
+import type { Item } from "@superset/chat/protocol";
+
+export function UnknownItemRow({ item }: { item: Item }) {
+	return (
+		<details className="rounded-md border border-dashed border-border p-2 text-xs text-muted-foreground">
+			<summary>Unsupported item "{item.kind}"</summary>
+			<pre className="mt-1 overflow-x-auto whitespace-pre-wrap">
+				{JSON.stringify(item, null, 2)}
+			</pre>
+		</details>
+	);
+}
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/UnknownItemRow/index.ts b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/UnknownItemRow/index.ts
new file mode 100644
index 00000000000..4d50ca4f599
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/UnknownItemRow/index.ts
@@ -0,0 +1 @@
+export { UnknownItemRow } from "./UnknownItemRow";
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/UserMessageRow/UserMessageRow.tsx b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/UserMessageRow/UserMessageRow.tsx
new file mode 100644
index 00000000000..e8339a72109
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/UserMessageRow/UserMessageRow.tsx
@@ -0,0 +1,34 @@
+import type { UserMessage } from "@superset/chat/protocol";
+import { Message, MessageContent } from "@superset/ui/ai-elements/message";
+import { Badge } from "@superset/ui/badge";
+
+export function UserMessageRow({ item }: { item: UserMessage }) {
+	const text = item.content
+		.filter((content) => content.type === "text")
+		.map((content) => content.text)
+		.join("\n");
+	const attachments = item.content.filter(
+		(content) => content.type === "attachment",
+	);
+	return (
+		<Message from="user">
+			<MessageContent>
+				<div className="whitespace-pre-wrap break-words text-sm">{text}</div>
+				{attachments.length > 0 && (
+					<div className="mt-1 flex flex-wrap gap-1">
+						{attachments.map((attachment) => (
+							<Badge key={attachment.attachmentId} variant="secondary">
+								{attachment.name}
+							</Badge>
+						))}
+					</div>
+				)}
+				{item.queued && (
+					<Badge className="mt-1 w-fit" variant="outline">
+						Queued
+					</Badge>
+				)}
+			</MessageContent>
+		</Message>
+	);
+}
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/UserMessageRow/index.ts b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/UserMessageRow/index.ts
new file mode 100644
index 00000000000..a404b96c284
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/components/UserMessageRow/index.ts
@@ -0,0 +1 @@
+export { UserMessageRow } from "./UserMessageRow";
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/index.ts b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/index.ts
new file mode 100644
index 00000000000..4a7cd4825a2
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/index.ts
@@ -0,0 +1 @@
+export { Transcript } from "./Transcript";
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/utils/rowKind/index.ts b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/utils/rowKind/index.ts
new file mode 100644
index 00000000000..cb622c4ad0c
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/utils/rowKind/index.ts
@@ -0,0 +1,2 @@
+export type { RowKind } from "./rowKind";
+export { rowKindForItem } from "./rowKind";
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/utils/rowKind/rowKind.test.ts b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/utils/rowKind/rowKind.test.ts
new file mode 100644
index 00000000000..63c8e309fbc
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/utils/rowKind/rowKind.test.ts
@@ -0,0 +1,46 @@
+import { describe, expect, test } from "bun:test";
+import type { Item } from "@superset/chat/protocol";
+import { rowKindForItem } from "./rowKind";
+
+const base = { id: "i1", startedAtMs: 1 };
+
+describe("rowKindForItem", () => {
+	test("dispatches every known item kind to its row", () => {
+		const cases: Array<[Item, string]> = [
+			[{ ...base, kind: "user_message", content: [] }, "user_message"],
+			[{ ...base, kind: "agent_message", text: "" }, "agent_message"],
+			[{ ...base, kind: "reasoning", text: "" }, "reasoning"],
+			[
+				{
+					...base,
+					kind: "tool_call",
+					title: "ls",
+					toolKind: "execute",
+					toolName: "Bash",
+					status: "running",
+					content: [],
+				},
+				"tool_call",
+			],
+			[{ ...base, kind: "plan", entries: [] }, "plan"],
+			[
+				{
+					...base,
+					kind: "approval_request",
+					targetItemId: null,
+					title: "Allow?",
+					status: "pending",
+				},
+				"approval_request",
+			],
+			[{ ...base, kind: "notice", noticeKind: "info" }, "notice"],
+		];
+		for (const [item, expected] of cases) {
+			expect(rowKindForItem(item)).toBe(expected as never);
+		}
+	});
+
+	test("routes open-union kinds to the unknown row", () => {
+		expect(rowKindForItem({ ...base, kind: "hologram" })).toBe("unknown");
+	});
+});
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/utils/rowKind/rowKind.ts b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/utils/rowKind/rowKind.ts
new file mode 100644
index 00000000000..c95d7e0c872
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/components/Transcript/utils/rowKind/rowKind.ts
@@ -0,0 +1,8 @@
+import type { Item, KnownItem } from "@superset/chat/protocol";
+import { isKnownItem } from "@superset/chat/protocol";
+
+export type RowKind = KnownItem["kind"] | "unknown";
+
+export function rowKindForItem(item: Item): RowKind {
+	return isKnownItem(item) ? item.kind : "unknown";
+}
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/hooks/useSessionClient/index.ts b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/hooks/useSessionClient/index.ts
new file mode 100644
index 00000000000..8a5cfad0de5
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/hooks/useSessionClient/index.ts
@@ -0,0 +1,2 @@
+export type { ChatWiring } from "./useSessionClient";
+export { useChatWiring, useSessionClient } from "./useSessionClient";
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/hooks/useSessionClient/useSessionClient.ts b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/hooks/useSessionClient/useSessionClient.ts
new file mode 100644
index 00000000000..134499f524d
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/hooks/useSessionClient/useSessionClient.ts
@@ -0,0 +1,77 @@
+import type {
+	ChatTransport,
+	SessionClient,
+	StreamSocket,
+} from "@superset/chat/client";
+import { createSessionClient } from "@superset/chat/client";
+import type { ChatRouter } from "@superset/chat-runtime";
+import { useWorkspaceClient } from "@superset/workspace-client";
+import { createTRPCClient, httpBatchLink } from "@trpc/client";
+import { useEffect, useMemo } from "react";
+import { getHostServiceHeaders } from "renderer/lib/host-service-auth";
+
+export type ChatWiring = {
+	transport: ChatTransport;
+	streamBaseUrl: string;
+	createSocket: (url: string) => StreamSocket;
+};
+
+export function useChatWiring(): ChatWiring {
+	const { getWsToken, hostUrl } = useWorkspaceClient();
+
+	return useMemo(() => {
+		const client = createTRPCClient<ChatRouter>({
+			links: [
+				httpBatchLink({
+					url: `${hostUrl}/chat-v3/trpc`,
+					headers: () => getHostServiceHeaders(hostUrl),
+				}),
+			],
+		});
+		const transport: ChatTransport = {
+			createSession: (input) => client.createSession.mutate(input),
+			prompt: (input) => client.prompt.mutate(input),
+			cancelTurn: (input) => client.cancelTurn.mutate(input),
+			respondToApproval: (input) => client.respondToApproval.mutate(input),
+			setMode: (input) => client.setMode.mutate(input),
+			getSession: (input) => client.getSession.query(input),
+			listSessions: (input) => client.listSessions.query(input),
+			getItems: (input) => client.getItems.query(input),
+		};
+		const createSocket = (url: string): StreamSocket => {
+			const wsUrl = new URL(url);
+			wsUrl.protocol = wsUrl.protocol === "https:" ? "wss:" : "ws:";
+			const token = getWsToken();
+			if (token) wsUrl.searchParams.set("token", token);
+			return new WebSocket(wsUrl.toString());
+		};
+		return { transport, streamBaseUrl: `${hostUrl}/chat-v3`, createSocket };
+	}, [hostUrl, getWsToken]);
+}
+
+export function useSessionClient(sessionId: string | null): {
+	client: SessionClient | null;
+	wiring: ChatWiring;
+} {
+	const wiring = useChatWiring();
+	const client = useMemo(
+		() =>
+			sessionId
+				? createSessionClient({
+						sessionId,
+						transport: wiring.transport,
+						streamBaseUrl: wiring.streamBaseUrl,
+						createSocket: wiring.createSocket,
+					})
+				: null,
+		[sessionId, wiring],
+	);
+
+	useEffect(() => {
+		return () => {
+			client?.close();
+		};
+	}, [client]);
+
+	return { client, wiring };
+}
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/index.ts b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/index.ts
new file mode 100644
index 00000000000..75f6244309b
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatV3Pane/index.ts
@@ -0,0 +1 @@
+export { ChatV3Pane } from "./ChatV3Pane";
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/usePaneRegistry.tsx b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/usePaneRegistry.tsx
index 93d1d126bf0..83774a5bd68 100644
--- a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/usePaneRegistry.tsx
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/usePaneRegistry.tsx
@@ -4,11 +4,13 @@ import type {
 	RendererContext,
 	WorkspaceStore,
 } from "@superset/panes";
+import { FEATURE_FLAGS } from "@superset/shared/constants";
 import { alert } from "@superset/ui/atoms/Alert";
 import { toast } from "@superset/ui/sonner";
 import { cn } from "@superset/ui/utils";
 import { workspaceTrpc } from "@superset/workspace-client";
 import { Circle, GitCompareArrows, Globe, MessageSquare } from "lucide-react";
+import { useFeatureFlagEnabled } from "posthog-js/react";
 import { useCallback, useMemo } from "react";
 import {
 	LuArrowDownToLine,
@@ -38,6 +40,7 @@ import {
 import type {
 	BrowserPaneData,
 	ChatPaneData,
+	ChatV3PaneData,
 	CommentPaneData,
 	DevtoolsPaneData,
 	FilePaneData,
@@ -48,6 +51,7 @@ import type { TerminalLauncher } from "../useV2TerminalLauncher";
 import { BrowserPane, BrowserPaneToolbar } from "./components/BrowserPane";
 import { ChatPane } from "./components/ChatPane";
 import { ChatPaneTitle } from "./components/ChatPane/components/ChatPaneTitle";
+import { ChatV3Pane } from "./components/ChatV3Pane";
 import { CommentPane } from "./components/CommentPane";
 import { CommentPaneHeaderExtras } from "./components/CommentPane/components/CommentPaneHeaderExtras";
 import { CommentPaneTitle } from "./components/CommentPane/components/CommentPaneTitle";
@@ -118,6 +122,7 @@ export function usePaneRegistry({
 }: UsePaneRegistryOptions): PaneRegistry<PaneViewerData> {
 	const { workspace } = useWorkspace();
 	const workspaceId = workspace.id;
+	const isChatV3Enabled = useFeatureFlagEnabled(FEATURE_FLAGS.CHAT_V3) ?? false;
 	const runAgent = workspaceTrpc.agents.run.useMutation();
 	const collections = useCollections();
 	const clearShortcut = useHotkeyDisplay("CLEAR_TERMINAL").text;
@@ -528,6 +533,33 @@ export function usePaneRegistry({
 						d.key === "close-pane" ? { ...d, label: "Close Chat" } : d,
 					),
 			},
+			...(isChatV3Enabled
+				? {
+						"chat-v3": {
+							getIcon: () => <MessageSquare className="size-3.5" />,
+							getTitle: () => "Chat v3",
+							renderPane: (ctx: RendererContext<PaneViewerData>) => {
+								const data = ctx.pane.data as ChatV3PaneData;
+								return (
+									<ChatV3Pane
+										workspaceId={workspaceId}
+										sessionId={data.sessionId}
+										onSessionIdChange={(id) =>
+											ctx.actions.updateData({ ...data, sessionId: id })
+										}
+									/>
+								);
+							},
+							contextMenuActions: (
+								_ctx: RendererContext<PaneViewerData>,
+								defaults: ContextMenuActionConfig<PaneViewerData>[],
+							) =>
+								defaults.map((d) =>
+									d.key === "close-pane" ? { ...d, label: "Close Chat" } : d,
+								),
+						},
+					}
+				: {}),
 			comment: {
 				getIcon: (ctx: RendererContext<PaneViewerData>) => {
 					const data = ctx.pane.data as CommentPaneData;
@@ -574,6 +606,7 @@ export function usePaneRegistry({
 		}),
 		[
 			workspaceId,
+			isChatV3Enabled,
 			clearWorkspaceRunTerminal,
 			clearShortcut,
 			scrollToBottomShortcut,
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/types.ts b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/types.ts
index 0e892bb3b43..4dca4f6923e 100644
--- a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/types.ts
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/types.ts
@@ -63,10 +63,15 @@ export interface CommentPaneData {
 	line?: number;
 }
 
+export interface ChatV3PaneData {
+	sessionId: string | null;
+}
+
 export type PaneViewerData =
 	| FilePaneData
 	| TerminalPaneData
 	| ChatPaneData
+	| ChatV3PaneData
 	| BrowserPaneData
 	| DevtoolsPaneData
 	| DiffPaneData
diff --git a/apps/desktop/tsconfig.json b/apps/desktop/tsconfig.json
index e41edcb53dc..a174f2407cf 100644
--- a/apps/desktop/tsconfig.json
+++ b/apps/desktop/tsconfig.json
@@ -3,6 +3,7 @@
 	"compilerOptions": {
 		"types": ["bun"],
 		"paths": {
+			"@superset/chat-runtime": ["../../packages/chat-runtime/src/index.ts"],
 			"*": ["./src/*"],
 			"~/*": ["./*"]
 		}
diff --git a/bun.lock b/bun.lock
index c8d69ac750e..2cd3f716921 100644
--- a/bun.lock
+++ b/bun.lock
@@ -165,6 +165,7 @@
         "@sentry/electron": "7.16.0",
         "@streamdown/mermaid": "1.0.2",
         "@superset/auth": "workspace:*",
+        "@superset/chat": "workspace:*",
         "@superset/chat-legacy": "workspace:*",
         "@superset/db": "workspace:*",
         "@superset/host-service": "workspace:*",
diff --git a/packages/chat/src/client/subscribeToSession/subscribeToSession.test.ts b/packages/chat/src/client/subscribeToSession/subscribeToSession.test.ts
index f18d3269555..110d8436867 100644
--- a/packages/chat/src/client/subscribeToSession/subscribeToSession.test.ts
+++ b/packages/chat/src/client/subscribeToSession/subscribeToSession.test.ts
@@ -43,7 +43,7 @@ function startStack(script: FakeHarnessScript): {
 	const server = createMemoryStreamServer(runtime);
 	const created = runtime.commands.createSession({
 		commandId: randomUUID(),
-		workspaceId: "workspace-1",
+		scopeId: "workspace-1",
 		harness: FAKE_HARNESS,
 		cwd: "/tmp/workspace",
 	});
diff --git a/packages/chat/src/react/useChatSession/useChatSession.ts b/packages/chat/src/react/useChatSession/useChatSession.ts
index 942adadbce4..de81e0a39ba 100644
--- a/packages/chat/src/react/useChatSession/useChatSession.ts
+++ b/packages/chat/src/react/useChatSession/useChatSession.ts
@@ -43,7 +43,7 @@ export type ChatSession = {
 	connection: StreamStatus;
 	outbox: OutboxEntry[];
 	hasOlder: boolean;
-	sendPrompt(content: UserContent[]): void;
+	sendPrompt(content: UserContent[]): OutboxEntry;
 	retryPrompt(clientId: string): void;
 	discardPrompt(clientId: string): void;
 	loadOlder(): Promise<void>;
@@ -193,8 +193,9 @@ export function useChatSession(options: UseChatSessionOptions): ChatSession {
 
 	const sendPrompt = useCallback(
 		(content: UserContent[]) => {
-			outbox.enqueue(content);
+			const entry = outbox.enqueue(content);
 			void outbox.flush();
+			return entry;
 		},
 		[outbox],
 	);