gsd-pi 2.74.0 → 2.75.0-dev.fd2382b9f

package/packages/pi-coding-agent/src/modes/interactive/interactive-mode.ts

@@ -127,6 +127,45 @@ function isExpandable(obj: unknown): obj is Expandable {
 	return typeof obj === "object" && obj !== null && "setExpanded" in obj && typeof obj.setExpanded === "function";
 }
 
+export type AssistantReplaySegment =
+	| { kind: "assistant"; startIndex: number; endIndex: number }
+	| { kind: "tool"; contentIndex: number };
+
+/**
+ * Build replay segments for historical assistant messages so rebuild paths
+ * preserve the original content[] ordering between assistant prose and tools.
+ */
+export function buildAssistantReplaySegments(contentBlocks: Array<any>): AssistantReplaySegment[] {
+	const segments: AssistantReplaySegment[] = [];
+	let runStart = -1;
+
+	for (let i = 0; i < contentBlocks.length; i++) {
+		const block = contentBlocks[i];
+		const isAssistantText = block?.type === "text" || block?.type === "thinking";
+		const isTool = block?.type === "toolCall" || block?.type === "serverToolUse";
+
+		if (isAssistantText) {
+			if (runStart === -1) runStart = i;
+			continue;
+		}
+
+		if (runStart !== -1) {
+			segments.push({ kind: "assistant", startIndex: runStart, endIndex: i - 1 });
+			runStart = -1;
+		}
+
+		if (isTool) {
+			segments.push({ kind: "tool", contentIndex: i });
+		}
+	}
+
+	if (runStart !== -1) {
+		segments.push({ kind: "assistant", startIndex: runStart, endIndex: contentBlocks.length - 1 });
+	}
+
+	return segments;
+}
+
 type CompactionQueuedMessage = {
 	text: string;
 	mode: "steer" | "followUp";
@@ -1788,6 +1827,8 @@ export class InteractiveMode {
 			this.showError(message);
 		} else if (type === "warning") {
 			this.showWarning(message);
+		} else if (type === "success") {
+			this.showSuccess(message);
 		} else {
 			this.showStatus(message, { append: true });
 		}
@@ -2078,6 +2119,7 @@ export class InteractiveMode {
 	}
 
 	private addMessageToChat(message: AgentMessage, options?: { populateHistory?: boolean }): void {
+		const timestampFormat = this.settingsManager.getTimestampFormat();
 		switch (message.role) {
 			case "bashExecution": {
 				const component = new BashExecutionComponent(message.command, this.ui, message.excludeFromContext);
@@ -2135,12 +2177,12 @@ export class InteractiveMode {
 								skillBlock.userMessage,
 								this.getMarkdownThemeWithSettings(),
 								message.timestamp,
-								this.settingsManager.getTimestampFormat(),
+								timestampFormat,
 							);
 							this.chatContainer.addChild(userComponent);
 						}
 					} else {
-						const userComponent = new UserMessageComponent(textContent, this.getMarkdownThemeWithSettings(), message.timestamp, this.settingsManager.getTimestampFormat());
+						const userComponent = new UserMessageComponent(textContent, this.getMarkdownThemeWithSettings(), message.timestamp, timestampFormat);
 						this.chatContainer.addChild(userComponent);
 					}
 					if (options?.populateHistory) {
@@ -2154,7 +2196,7 @@ export class InteractiveMode {
 					message,
 					this.hideThinkingBlock,
 					this.getMarkdownThemeWithSettings(),
-					this.settingsManager.getTimestampFormat(),
+					timestampFormat,
 				);
 				this.chatContainer.addChild(assistantComponent);
 				break;
@@ -2192,6 +2234,7 @@ export class InteractiveMode {
 		options: { updateFooter?: boolean; populateHistory?: boolean } = {},
 	): void {
 		this.pendingTools.clear();
+		const timestampFormat = this.settingsManager.getTimestampFormat();
 
 		if (options.updateFooter) {
 			this.footer.invalidate();
@@ -2201,9 +2244,30 @@ export class InteractiveMode {
 		for (const message of sessionContext.messages) {
 			// Assistant messages need special handling for tool calls
 			if (message.role === "assistant") {
-				this.addMessageToChat(message);
-				// Render tool call components
-				for (const content of message.content) {
+				const hasToolBlocks = message.content.some((c) => c.type === "toolCall" || c.type === "serverToolUse");
+				if (!hasToolBlocks) {
+					this.addMessageToChat(message);
+					continue;
+				}
+
+				const assistantSegments: AssistantMessageComponent[] = [];
+				const replaySegments = buildAssistantReplaySegments(message.content);
+
+				for (const segment of replaySegments) {
+					if (segment.kind === "assistant") {
+						const assistantComponent = new AssistantMessageComponent(
+							message,
+							this.hideThinkingBlock,
+							this.getMarkdownThemeWithSettings(),
+							timestampFormat,
+							{ startIndex: segment.startIndex, endIndex: segment.endIndex },
+						);
+						this.chatContainer.addChild(assistantComponent);
+						assistantSegments.push(assistantComponent);
+						continue;
+					}
+
+					const content = message.content[segment.contentIndex];
 					if (content.type === "toolCall") {
 						const component = new ToolExecutionComponent(
 							content.name,
@@ -2259,6 +2323,11 @@ export class InteractiveMode {
 						}
 					}
 				}
+
+				// Match streaming-mode behavior: show metadata once on the final
+				// assistant prose segment for this message.
+				const lastAssistantSegment = assistantSegments[assistantSegments.length - 1];
+				lastAssistantSegment?.setShowMetadata(true);
 			} else if (message.role === "toolResult") {
 				// Match tool results to pending tool components
 				const component = this.pendingTools.get(message.toolCallId);
@@ -2272,6 +2341,12 @@ export class InteractiveMode {
 			}
 		}
 
+		// Any pendingTools entries left over after replay are historical tool
+		// calls whose results were squashed out of session context (commonly by
+		// compaction). Mark them finished so the frame stops showing "Running".
+		for (const component of this.pendingTools.values()) {
+			component.markHistoricalNoResult();
+		}
 		this.pendingTools.clear();
 		this.trimChatHistory();
 		this.ui.requestRender();
@@ -2670,6 +2745,17 @@ export class InteractiveMode {
 		this.ui.requestRender();
 	}
 
+	showSuccess(successMessage: string): void {
+		this.chatContainer.addChild(new Spacer(1));
+		this.chatContainer.addChild(new DynamicBorder((text) => theme.fg("success", text)));
+		this.chatContainer.addChild(
+			new Text(theme.fg("success", successMessage), 1, 0),
+		);
+		this.chatContainer.addChild(new DynamicBorder((text) => theme.fg("success", text)));
+		this.chatContainer.addChild(new Spacer(1));
+		this.ui.requestRender();
+	}
+
 	showTip(message: string): void {
 		this.chatContainer.addChild(new Spacer(1));
 		this.chatContainer.addChild(new Text(theme.fg("dim", `💡 ${message}`), 1, 0));

package/packages/pi-coding-agent/src/modes/interactive/theme/theme-schema.ts

@@ -0,0 +1,83 @@
+import { Type, type Static } from "@sinclair/typebox";
+
+const ColorValueSchema = Type.Union([
+  Type.String(), // hex "#ff0000", var ref "primary", or empty ""
+  Type.Integer({ minimum: 0, maximum: 255 }), // 256-color index
+]);
+export type ColorValue = Static<typeof ColorValueSchema>;
+
+export const ThemeJsonSchema = Type.Object({
+  $schema: Type.Optional(Type.String()),
+  name: Type.String(),
+  vars: Type.Optional(Type.Record(Type.String(), ColorValueSchema)),
+  colors: Type.Object({
+    // Core UI (10 colors)
+    accent: ColorValueSchema,
+    border: ColorValueSchema,
+    borderAccent: ColorValueSchema,
+    borderMuted: ColorValueSchema,
+    success: ColorValueSchema,
+    error: ColorValueSchema,
+    warning: ColorValueSchema,
+    muted: ColorValueSchema,
+    dim: ColorValueSchema,
+    text: ColorValueSchema,
+    thinkingText: ColorValueSchema,
+    // Backgrounds & Content Text (11 colors)
+    selectedBg: ColorValueSchema,
+    userMessageBg: ColorValueSchema,
+    userMessageText: ColorValueSchema,
+    assistantMessageText: ColorValueSchema,
+    customMessageBg: ColorValueSchema,
+    customMessageText: ColorValueSchema,
+    customMessageLabel: ColorValueSchema,
+    toolPendingBg: ColorValueSchema,
+    toolSuccessBg: ColorValueSchema,
+    toolErrorBg: ColorValueSchema,
+    toolTitle: ColorValueSchema,
+    toolOutput: ColorValueSchema,
+    // Markdown (10 colors)
+    mdHeading: ColorValueSchema,
+    mdLink: ColorValueSchema,
+    mdLinkUrl: ColorValueSchema,
+    mdCode: ColorValueSchema,
+    mdCodeBlock: ColorValueSchema,
+    mdCodeBlockBorder: ColorValueSchema,
+    mdQuote: ColorValueSchema,
+    mdQuoteBorder: ColorValueSchema,
+    mdHr: ColorValueSchema,
+    mdListBullet: ColorValueSchema,
+    // Tool Diffs (3 colors)
+    toolDiffAdded: ColorValueSchema,
+    toolDiffRemoved: ColorValueSchema,
+    toolDiffContext: ColorValueSchema,
+    // Syntax Highlighting (9 colors)
+    syntaxComment: ColorValueSchema,
+    syntaxKeyword: ColorValueSchema,
+    syntaxFunction: ColorValueSchema,
+    syntaxVariable: ColorValueSchema,
+    syntaxString: ColorValueSchema,
+    syntaxNumber: ColorValueSchema,
+    syntaxType: ColorValueSchema,
+    syntaxOperator: ColorValueSchema,
+    syntaxPunctuation: ColorValueSchema,
+    // Thinking Level Borders (6 colors)
+    thinkingOff: ColorValueSchema,
+    thinkingMinimal: ColorValueSchema,
+    thinkingLow: ColorValueSchema,
+    thinkingMedium: ColorValueSchema,
+    thinkingHigh: ColorValueSchema,
+    thinkingXhigh: ColorValueSchema,
+    // Bash Mode (1 color)
+    bashMode: ColorValueSchema,
+  }),
+  export: Type.Optional(
+    Type.Object({
+      pageBg: Type.Optional(ColorValueSchema),
+      cardBg: Type.Optional(ColorValueSchema),
+      infoBg: Type.Optional(ColorValueSchema),
+    }),
+  ),
+});
+
+export type ThemeJson = Static<typeof ThemeJsonSchema>;

package/packages/pi-coding-agent/src/modes/interactive/theme/theme.ts

@@ -1,7 +1,6 @@
 import * as fs from "node:fs";
 import * as path from "node:path";
 import type { EditorTheme, MarkdownTheme, SelectListTheme } from "@gsd/pi-tui";
-import { type Static, Type } from "@sinclair/typebox";
 import { TypeCompiler } from "@sinclair/typebox/compiler";
 import chalk from "chalk";
 import {
@@ -10,6 +9,7 @@ import {
 	type HighlightColors,
 } from "@gsd/native";
 import { getCustomThemesDir } from "../../../config.js";
+import { ThemeJsonSchema, type ColorValue, type ThemeJson } from "./theme-schema.js";
 import { builtinThemes } from "./themes.js";
 
 // Issue #453: native preview highlighting can wedge the entire interactive
@@ -21,88 +21,6 @@ const NATIVE_TUI_HIGHLIGHT_ENABLED = process.env.GSD_ENABLE_NATIVE_TUI_HIGHLIGHT
 // Types & Schema
 // ============================================================================
 
-const ColorValueSchema = Type.Union([
-	Type.String(), // hex "#ff0000", var ref "primary", or empty ""
-	Type.Integer({ minimum: 0, maximum: 255 }), // 256-color index
-]);
-
-type ColorValue = Static<typeof ColorValueSchema>;
-
-const ThemeJsonSchema = Type.Object({
-	$schema: Type.Optional(Type.String()),
-	name: Type.String(),
-	vars: Type.Optional(Type.Record(Type.String(), ColorValueSchema)),
-	colors: Type.Object({
-		// Core UI (10 colors)
-		accent: ColorValueSchema,
-		border: ColorValueSchema,
-		borderAccent: ColorValueSchema,
-		borderMuted: ColorValueSchema,
-		success: ColorValueSchema,
-		error: ColorValueSchema,
-		warning: ColorValueSchema,
-		muted: ColorValueSchema,
-		dim: ColorValueSchema,
-		text: ColorValueSchema,
-		thinkingText: ColorValueSchema,
-		// Backgrounds & Content Text (11 colors)
-		selectedBg: ColorValueSchema,
-		userMessageBg: ColorValueSchema,
-		userMessageText: ColorValueSchema,
-		customMessageBg: ColorValueSchema,
-		customMessageText: ColorValueSchema,
-		customMessageLabel: ColorValueSchema,
-		toolPendingBg: ColorValueSchema,
-		toolSuccessBg: ColorValueSchema,
-		toolErrorBg: ColorValueSchema,
-		toolTitle: ColorValueSchema,
-		toolOutput: ColorValueSchema,
-		// Markdown (10 colors)
-		mdHeading: ColorValueSchema,
-		mdLink: ColorValueSchema,
-		mdLinkUrl: ColorValueSchema,
-		mdCode: ColorValueSchema,
-		mdCodeBlock: ColorValueSchema,
-		mdCodeBlockBorder: ColorValueSchema,
-		mdQuote: ColorValueSchema,
-		mdQuoteBorder: ColorValueSchema,
-		mdHr: ColorValueSchema,
-		mdListBullet: ColorValueSchema,
-		// Tool Diffs (3 colors)
-		toolDiffAdded: ColorValueSchema,
-		toolDiffRemoved: ColorValueSchema,
-		toolDiffContext: ColorValueSchema,
-		// Syntax Highlighting (9 colors)
-		syntaxComment: ColorValueSchema,
-		syntaxKeyword: ColorValueSchema,
-		syntaxFunction: ColorValueSchema,
-		syntaxVariable: ColorValueSchema,
-		syntaxString: ColorValueSchema,
-		syntaxNumber: ColorValueSchema,
-		syntaxType: ColorValueSchema,
-		syntaxOperator: ColorValueSchema,
-		syntaxPunctuation: ColorValueSchema,
-		// Thinking Level Borders (6 colors)
-		thinkingOff: ColorValueSchema,
-		thinkingMinimal: ColorValueSchema,
-		thinkingLow: ColorValueSchema,
-		thinkingMedium: ColorValueSchema,
-		thinkingHigh: ColorValueSchema,
-		thinkingXhigh: ColorValueSchema,
-		// Bash Mode (1 color)
-		bashMode: ColorValueSchema,
-	}),
-	export: Type.Optional(
-		Type.Object({
-			pageBg: Type.Optional(ColorValueSchema),
-			cardBg: Type.Optional(ColorValueSchema),
-			infoBg: Type.Optional(ColorValueSchema),
-		}),
-	),
-});
-
-export type ThemeJson = Static<typeof ThemeJsonSchema>;
-
 const validateThemeJson = TypeCompiler.Compile(ThemeJsonSchema);
 
 export type ThemeColor =
@@ -118,6 +36,7 @@ export type ThemeColor =
 	| "text"
 	| "thinkingText"
 	| "userMessageText"
+	| "assistantMessageText"
 	| "customMessageText"
 	| "customMessageLabel"
 	| "toolTitle"

package/packages/pi-coding-agent/src/modes/interactive/theme/themes.ts

@@ -8,9 +8,8 @@
  * To add a new built-in theme, add an entry to `builtinThemes` below.
  */
 
-// Re-use the ThemeJson type from the schema defined in theme.ts.
-// We import only the type to avoid circular runtime dependencies.
-import type { ThemeJson } from "./theme.js";
+// Re-use the ThemeJson type from the schema module to avoid runtime cycles.
+import type { ThemeJson } from "./theme-schema.js";
 
 // ---------------------------------------------------------------------------
 // Dark theme
@@ -18,6 +17,95 @@ import type { ThemeJson } from "./theme.js";
 
 const dark: ThemeJson = {
 	name: "dark",
+	vars: {
+		cyan: "#22d3ee",
+		blue: "#60a5fa",
+		green: "#34d399",
+		red: "#fb7185",
+		yellow: "#facc15",
+		gray: "#a1a1aa",
+		dimGray: "#8b93a7",
+		darkGray: "#4b5563",
+		accent: "#2dd4bf",
+		selectedBg: "#1f2a44",
+		userMsgBg: "#1e2535",
+		toolPendingBg: "#1f2330",
+		toolSuccessBg: "#1f3128",
+		toolErrorBg: "#3a202a",
+		customMsgBg: "#2a2140",
+	},
+	colors: {
+		accent: "accent",
+		border: "blue",
+		borderAccent: "cyan",
+		borderMuted: "darkGray",
+		success: "green",
+		error: "red",
+		warning: "yellow",
+		muted: "gray",
+		dim: "dimGray",
+		text: "",
+		thinkingText: "gray",
+
+		selectedBg: "selectedBg",
+		userMessageBg: "userMsgBg",
+		userMessageText: "gray",
+		assistantMessageText: "",
+		customMessageBg: "customMsgBg",
+		customMessageText: "",
+		customMessageLabel: "#c084fc",
+		toolPendingBg: "toolPendingBg",
+		toolSuccessBg: "toolSuccessBg",
+		toolErrorBg: "toolErrorBg",
+		toolTitle: "#8a8a8a",
+		toolOutput: "#6e6e6e",
+
+		mdHeading: "#fbbf24",
+		mdLink: "#93c5fd",
+		mdLinkUrl: "dimGray",
+		mdCode: "accent",
+		mdCodeBlock: "green",
+		mdCodeBlockBorder: "gray",
+		mdQuote: "gray",
+		mdQuoteBorder: "gray",
+		mdHr: "gray",
+		mdListBullet: "accent",
+
+		toolDiffAdded: "green",
+		toolDiffRemoved: "red",
+		toolDiffContext: "gray",
+
+		syntaxComment: "#7dd3a3",
+		syntaxKeyword: "#60a5fa",
+		syntaxFunction: "#fde68a",
+		syntaxVariable: "#7dd3fc",
+		syntaxString: "#fdba74",
+		syntaxNumber: "#86efac",
+		syntaxType: "#5eead4",
+		syntaxOperator: "#d1d5db",
+		syntaxPunctuation: "#d1d5db",
+
+		thinkingOff: "darkGray",
+		thinkingMinimal: "#8088a0",
+		thinkingLow: "#60a5fa",
+		thinkingMedium: "#2dd4bf",
+		thinkingHigh: "#c084fc",
+		thinkingXhigh: "#f472b6",
+
+		bashMode: "green",
+	},
+	export: {
+		pageBg: "#101522",
+		cardBg: "#171f33",
+		infoBg: "#3b321d",
+	},
+};
+
+// Matches the pre-refresh TUI palette used during the recent chat/tool-frame
+// design PR series. Keep this as an explicit fallback theme so users can opt
+// into the familiar look while still keeping newer high-saturation themes.
+const tuiClassic: ThemeJson = {
+	name: "tui-classic",
 	vars: {
 		cyan: "#00d7ff",
 		blue: "#5f87ff",
@@ -50,15 +138,16 @@ const dark: ThemeJson = {
 
 		selectedBg: "selectedBg",
 		userMessageBg: "userMsgBg",
-		userMessageText: "",
+		userMessageText: "gray",
+		assistantMessageText: "",
 		customMessageBg: "customMsgBg",
 		customMessageText: "",
 		customMessageLabel: "#9575cd",
 		toolPendingBg: "toolPendingBg",
 		toolSuccessBg: "toolSuccessBg",
 		toolErrorBg: "toolErrorBg",
-		toolTitle: "",
-		toolOutput: "gray",
+		toolTitle: "#8a8a8a",
+		toolOutput: "#6e6e6e",
 
 		mdHeading: "#f0c674",
 		mdLink: "#81a2be",
@@ -108,21 +197,21 @@ const dark: ThemeJson = {
 const light: ThemeJson = {
 	name: "light",
 	vars: {
-		teal: "#5a8080",
-		blue: "#547da7",
-		green: "#588458",
-		red: "#aa5555",
-		yellow: "#9a7326",
-		warning: "#7a5a00",
-		mediumGray: "#6c6c6c",
-		dimGray: "#767676",
-		lightGray: "#b0b0b0",
-		selectedBg: "#d0d0e0",
-		userMsgBg: "#e8e8e8",
-		toolPendingBg: "#e8e8f0",
-		toolSuccessBg: "#e8f0e8",
-		toolErrorBg: "#f0e8e8",
-		customMsgBg: "#ede7f6",
+		teal: "#0f766e",
+		blue: "#2563eb",
+		green: "#15803d",
+		red: "#dc2626",
+		yellow: "#b45309",
+		warning: "#9a3412",
+		mediumGray: "#4b5563",
+		dimGray: "#6b7280",
+		lightGray: "#cbd5e1",
+		selectedBg: "#dbeafe",
+		userMsgBg: "#f1f5f9",
+		toolPendingBg: "#eef2ff",
+		toolSuccessBg: "#ecfdf5",
+		toolErrorBg: "#fff1f2",
+		customMsgBg: "#f5f3ff",
 	},
 	colors: {
 		accent: "teal",
@@ -140,9 +229,10 @@ const light: ThemeJson = {
 		selectedBg: "selectedBg",
 		userMessageBg: "userMsgBg",
 		userMessageText: "",
+		assistantMessageText: "",
 		customMessageBg: "customMsgBg",
 		customMessageText: "",
-		customMessageLabel: "#7e57c2",
+		customMessageLabel: "#7c3aed",
 		toolPendingBg: "toolPendingBg",
 		toolSuccessBg: "toolSuccessBg",
 		toolErrorBg: "toolErrorBg",
@@ -178,15 +268,101 @@ const light: ThemeJson = {
 		thinkingMinimal: "#767676",
 		thinkingLow: "blue",
 		thinkingMedium: "teal",
-		thinkingHigh: "#875f87",
-		thinkingXhigh: "#8b008b",
+		thinkingHigh: "#9333ea",
+		thinkingXhigh: "#be185d",
 
 		bashMode: "green",
 	},
 	export: {
-		pageBg: "#f8f8f8",
+		pageBg: "#f8fafc",
 		cardBg: "#ffffff",
-		infoBg: "#fffae6",
+		infoBg: "#fff7ed",
+	},
+};
+
+const vivid: ThemeJson = {
+	name: "vivid",
+	vars: {
+		cyan: "#22d3ee",
+		blue: "#3b82f6",
+		green: "#22c55e",
+		red: "#f43f5e",
+		yellow: "#f59e0b",
+		gray: "#a5b4fc",
+		dimGray: "#93a6d6",
+		darkGray: "#475569",
+		accent: "#14b8a6",
+		selectedBg: "#1e1b4b",
+		userMsgBg: "#172554",
+		toolPendingBg: "#1e293b",
+		toolSuccessBg: "#052e16",
+		toolErrorBg: "#3f0d1f",
+		customMsgBg: "#312e81",
+	},
+	colors: {
+		accent: "accent",
+		border: "blue",
+		borderAccent: "cyan",
+		borderMuted: "darkGray",
+		success: "green",
+		error: "red",
+		warning: "yellow",
+		muted: "gray",
+		dim: "dimGray",
+		text: "",
+		thinkingText: "gray",
+
+		selectedBg: "selectedBg",
+		userMessageBg: "userMsgBg",
+		userMessageText: "gray",
+		assistantMessageText: "",
+		customMessageBg: "customMsgBg",
+		customMessageText: "",
+		customMessageLabel: "#c084fc",
+		toolPendingBg: "toolPendingBg",
+		toolSuccessBg: "toolSuccessBg",
+		toolErrorBg: "toolErrorBg",
+		toolTitle: "#8a8a8a",
+		toolOutput: "#6e6e6e",
+
+		mdHeading: "#fbbf24",
+		mdLink: "#60a5fa",
+		mdLinkUrl: "dimGray",
+		mdCode: "#5eead4",
+		mdCodeBlock: "#86efac",
+		mdCodeBlockBorder: "gray",
+		mdQuote: "gray",
+		mdQuoteBorder: "gray",
+		mdHr: "gray",
+		mdListBullet: "#2dd4bf",
+
+		toolDiffAdded: "#22c55e",
+		toolDiffRemoved: "#f43f5e",
+		toolDiffContext: "gray",
+
+		syntaxComment: "#6ee7b7",
+		syntaxKeyword: "#60a5fa",
+		syntaxFunction: "#fde68a",
+		syntaxVariable: "#7dd3fc",
+		syntaxString: "#fdba74",
+		syntaxNumber: "#86efac",
+		syntaxType: "#5eead4",
+		syntaxOperator: "#e2e8f0",
+		syntaxPunctuation: "#e2e8f0",
+
+		thinkingOff: "darkGray",
+		thinkingMinimal: "#8fa2d8",
+		thinkingLow: "#38bdf8",
+		thinkingMedium: "#2dd4bf",
+		thinkingHigh: "#a78bfa",
+		thinkingXhigh: "#f472b6",
+
+		bashMode: "green",
+	},
+	export: {
+		pageBg: "#0b1020",
+		cardBg: "#121a30",
+		infoBg: "#3b2f12",
 	},
 };
 
@@ -194,4 +370,9 @@ const light: ThemeJson = {
 // Export
 // ---------------------------------------------------------------------------
 
-export const builtinThemes: Record<string, ThemeJson> = { dark, light };
+export const builtinThemes: Record<string, ThemeJson> = {
+	dark,
+	light,
+	"tui-classic": tuiClassic,
+	vivid,
+};