feat(desktop): ChatV3Pane — flagged chat pane on the new spine

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:*",

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"]],

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}
+		/>
+	);
+}

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>
+	);
+}

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";

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>
+	);
+}

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";

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";

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,
+		});
+	});
+});

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 };
+}

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>
+	);
+}

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";