@builder.io/buildercode 0.4.2 → 0.4.3

package/dist/cli.mjs

@@ -92069,7 +92069,27 @@ const defaultDarkTheme = {
 	statusBarBackground: "#181818",
 	headerBackground: "#181818",
 	panelBackground: "#2A2A2A",
-	highlightBackground: "#3A3A3A"
+	highlightBackground: "#000000",
+	highlight: "#ffffff"
+};
+const defaultTransparentTheme = {
+	background: "",
+	foreground: "",
+	dimForeground: "gray",
+	accent: "cyan",
+	accentForeground: "black",
+	success: "green",
+	error: "red",
+	warning: "yellow",
+	info: "cyan",
+	border: "gray",
+	inputBackground: "",
+	inputBorder: "gray",
+	statusBarBackground: "",
+	headerBackground: "",
+	panelBackground: "",
+	highlightBackground: "#000000",
+	highlight: "#ffffff"
 };
 const defaultLightTheme = {
 	background: "#FFFFFF",
@@ -92087,7 +92107,8 @@ const defaultLightTheme = {
 	statusBarBackground: "#F6F8FA",
 	headerBackground: "#F6F8FA",
 	panelBackground: "#F0F2F5",
-	highlightBackground: "#D6EBFF"
+	highlightBackground: "#D6EBFF",
+	highlight: "white"
 };
 /**
 * Parse a terminal OSC 11 response into an [R, G, B] tuple (0–255 each).
@@ -92145,8 +92166,57 @@ function queryOsc11() {
 	});
 }
 /**
+* Compute HSL saturation (0–1) from an RGB tuple (0–255 each).
+* A value near 0 means achromatic (gray/black/white); near 1 means vivid.
+*/
+function rgbSaturation(r, g, b) {
+	const rn = r / 255, gn = g / 255, bn = b / 255;
+	const max = Math.max(rn, gn, bn);
+	const min = Math.min(rn, gn, bn);
+	const delta = max - min;
+	if (delta === 0) return 0;
+	const lightness = (max + min) / 2;
+	return delta / (1 - Math.abs(2 * lightness - 1));
+}
+/**
+* ANSI color indices (0–15) that represent chromatic colors — i.e. hues that
+* are neither near-black nor near-white.  If COLORFGBG reports one of these
+* as the background, hard-coded dark/light hex palettes will look wrong and
+* transparent mode is the safest choice.
+*
+* Index mapping (standard xterm-256 ANSI palette):
+*   0  black     7  light-gray   8  dark-gray    15 white
+*   1  red       2  green        3  yellow        4  blue
+*   5  magenta   6  cyan         9  bright-red   10  bright-green
+*  11  bright-yellow  12  bright-blue  13  bright-magenta  14  bright-cyan
+*/
+const CHROMATIC_ANSI_INDICES = new Set([
+	1,
+	2,
+	3,
+	4,
+	5,
+	6,
+	9,
+	10,
+	11,
+	12,
+	13,
+	14
+]);
+/**
 * Detect which theme to use.
 *
+* Priority:
+*  1. `FUSION_THEME` / `COLOR_THEME` env-var explicit override
+*  2. OSC 11 actual background color (most accurate)
+*     – high saturation → transparent (vivid/chromatic bg, e.g. blue, green)
+*     – low saturation + dark luminance → dark
+*     – low saturation + light luminance → light
+*  3. COLORFGBG heuristic (chromatic ANSI index → transparent)
+*  4. macOS system appearance
+*  5. Default dark
+*
 * @param terminalBg  RGB tuple from a prior `queryOsc11()` call, or null/undefined.
 *                    Pass this to get the most accurate result; without it the
 *                    function falls back to env-var heuristics.
@@ -92155,8 +92225,10 @@ function detectTheme(terminalBg) {
 	const explicitTheme = process.env.FUSION_THEME ?? process.env.COLOR_THEME;
 	if (explicitTheme === "light") return defaultLightTheme;
 	if (explicitTheme === "dark") return defaultDarkTheme;
+	if (explicitTheme === "transparent") return defaultTransparentTheme;
 	if (terminalBg != null) {
 		const [r, g, b] = terminalBg;
+		if (rgbSaturation(r, g, b) > .35) return defaultTransparentTheme;
 		return (.299 * r + .587 * g + .114 * b) / 255 < .5 ? defaultDarkTheme : defaultLightTheme;
 	}
 	const colorfgbg = process.env.COLORFGBG ?? "";
@@ -92164,7 +92236,10 @@ function detectTheme(terminalBg) {
 		const parts = colorfgbg.split(";");
 		if (parts.length >= 2) {
 			const bg = parseInt(parts[parts.length - 1], 10);
-			if (!isNaN(bg) && bg >= 0) return bg > 8 ? defaultLightTheme : defaultDarkTheme;
+			if (!isNaN(bg) && bg >= 0) {
+				if (CHROMATIC_ANSI_INDICES.has(bg)) return defaultTransparentTheme;
+				return bg > 8 ? defaultLightTheme : defaultDarkTheme;
+			}
 		}
 	}
 	if (process.platform === "darwin" && process.env.TERM_PROGRAM !== "vscode") try {
@@ -245108,7 +245183,7 @@ const LIB_CACHE = /* @__PURE__ */ new Map();
 const PENDING_LIB_CACHE = /* @__PURE__ */ new Map();
 const NODE_MODULE_CACHE = /* @__PURE__ */ new Map();
 const TSCONFIG_CACHE = /* @__PURE__ */ new Map();
-const pkgVersion = process.env.OVERRIDE_VERSION ?? "0.4.2";
+const pkgVersion = process.env.OVERRIDE_VERSION ?? "0.4.3";
 //#endregion
 //#region ../dev-tools/core/detect-frameworks.ts
 async function detectFrameworks$1(sys) {
@@ -499251,8 +499326,47 @@ async function backupGitRepo({ sys, credentials, projectId, branchName, repoPath
 	}
 	const originalRepoUrl = (folderName ? workspace.folders.find((f) => (f.name ?? f.path) === folderName) : workspace.folders.find((f) => f.enableGit))?.originalRepoUrl ?? repoUrl;
 	if (!originalRepoUrl) throw new Error("Original repo URL is required for backup upload");
+	const forced = forcedFullBackup ? "offline-full" : !isConnectedToProvider ? "offline" : void 0;
 	const lastCommitHash = await getCurrentCommitHash();
-	if (!lastCommitHash) throw new Error("Failed to get current commit hash");
+	if (!lastCommitHash) {
+		let totalCommits = null;
+		try {
+			const out = await git([
+				"rev-list",
+				"--all",
+				"--count"
+			]);
+			totalCommits = parseInt(out.trim(), 10);
+		} catch {}
+		if (totalCommits === 0) {
+			backupLogger.info("Repository has no commits (empty repo) — nothing to back up");
+			return {
+				success: true,
+				empty: true,
+				lastCommitHash: "",
+				partial: true,
+				repoUrl: originalRepoUrl,
+				backupRef: void 0,
+				backupEntry: {
+					projectId,
+					branchName,
+					size: 0,
+					partial: true,
+					initialBranch: featureBranch,
+					initialCommitHash: void 0,
+					lastCommitHash: "",
+					gitBranchName: aiBranch,
+					empty: true,
+					status: "completed",
+					version: "v2",
+					repoUrl: originalRepoUrl,
+					forced,
+					...folderName && { folderName }
+				}
+			};
+		}
+		throw new Error(totalCommits === null ? "Failed to get current commit hash (git rev-list failed)" : `Failed to get current commit hash (rev-list --all --count returned ${totalCommits})`);
+	}
 	const currentBranch = await getCurrentBranch();
 	if (!silenceErrors && currentBranch !== aiBranch) throw new Error(`Current branch "${currentBranch}" is not the ai branch "${aiBranch}"`);
 	const initCommitHashResult = await getInitialCommitHash({
@@ -499267,7 +499381,6 @@ async function backupGitRepo({ sys, credentials, projectId, branchName, repoPath
 		projectId,
 		folderName
 	});
-	const forced = forcedFullBackup ? "offline-full" : !isConnectedToProvider ? "offline" : void 0;
 	const recentRemoteSHAs = await getRecentCommitSHAs(initCommitHashResult.initialBranch, 10);
 	const recentLocalSHAs = await getRecentCommitSHAs(aiBranch, 10);
 	try {
@@ -534889,7 +535002,7 @@ function useTextInput(options = {}) {
 		}
 		const code = input.charCodeAt(0);
 		if (input.length === 1 && code < 32 && code !== 10) return;
-		if (input) {
+		if (input && !key.ctrl && !key.meta) {
 			if (inputHistory.historyIndex !== -1) {
 				inputHistory.historyIndex = -1;
 				inputHistory.historyDraft = "";
@@ -536799,18 +536912,28 @@ const SUBVIEW_CONFIG = {
 		description: "Choose reasoning effort level"
 	}
 };
-function renderCommandRow({ cmd, isSelected, maxLabelLen }) {
+function renderCommandRow({ cmd, isSelected, maxLabelLen, theme }) {
 	const padded = cmd.label.padEnd(maxLabelLen + 2);
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
 		width: "100%",
 		paddingX: 1,
 		children: isSelected ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
-			backgroundColor: "blue",
-			color: "white",
+			backgroundColor: theme.highlightBackground,
+			color: theme.highlight,
 			children: [
 				"  ",
-				padded,
-				cmd.description,
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+					backgroundColor: theme.highlightBackground,
+					color: theme.highlight,
+					bold: true,
+					children: padded
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+					backgroundColor: theme.highlightBackground,
+					color: theme.highlight,
+					dimColor: true,
+					children: cmd.description
+				}),
 				"  "
 			]
 		}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { children: [
@@ -537024,7 +537147,7 @@ function SlashCommandMenu(t0) {
 	const visibleStart = scrollOffset;
 	const visibleEnd = Math.min(scrollOffset + MAX_VISIBLE_ITEMS, commands.length);
 	let t10;
-	if ($[24] !== commands || $[25] !== contextPct || $[26] !== contextTotal || $[27] !== contextUsed || $[28] !== currentReasoning || $[29] !== maxLabelLen || $[30] !== prefs || $[31] !== proxy || $[32] !== selectedIndex || $[33] !== state.model || $[34] !== state.modelOverride || $[35] !== state.sessionMode || $[36] !== theme.background || $[37] !== view || $[38] !== visibleEnd || $[39] !== visibleStart) {
+	if ($[24] !== commands || $[25] !== contextPct || $[26] !== contextTotal || $[27] !== contextUsed || $[28] !== currentReasoning || $[29] !== maxLabelLen || $[30] !== prefs || $[31] !== proxy || $[32] !== selectedIndex || $[33] !== state.model || $[34] !== state.modelOverride || $[35] !== state.sessionMode || $[36] !== theme || $[37] !== view || $[38] !== visibleEnd || $[39] !== visibleStart) {
 		const visibleCommands = commands.slice(visibleStart, visibleEnd);
 		const itemsAbove = visibleStart;
 		const itemsBelow = commands.length - visibleEnd;
@@ -537051,7 +537174,8 @@ function SlashCommandMenu(t0) {
 				visibleCommands.map((cmd_0, i_3) => renderCommandRow({
 					cmd: cmd_0,
 					isSelected: visibleStart + i_3 === selectedIndex,
-					maxLabelLen
+					maxLabelLen,
+					theme
 				})),
 				itemsBelow > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
 					paddingX: 2,
@@ -537246,12 +537370,22 @@ function SlashCommandMenu(t0) {
 						width: "100%",
 						paddingLeft: 2,
 						children: absoluteIndex === selectedIndex ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
-							backgroundColor: "blue",
-							color: "white",
+							backgroundColor: theme.highlightBackground,
+							color: theme.highlight,
 							children: [
 								"  ",
-								padded,
-								cmd_2.description,
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+									backgroundColor: theme.highlightBackground,
+									color: theme.highlight,
+									bold: true,
+									children: padded
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+									backgroundColor: theme.highlightBackground,
+									color: theme.highlight,
+									dimColor: true,
+									children: cmd_2.description
+								}),
 								"  "
 							]
 						}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { children: [
@@ -537285,7 +537419,7 @@ function SlashCommandMenu(t0) {
 		$[33] = state.model;
 		$[34] = state.modelOverride;
 		$[35] = state.sessionMode;
-		$[36] = theme.background;
+		$[36] = theme;
 		$[37] = view;
 		$[38] = visibleEnd;
 		$[39] = visibleStart;
@@ -537812,16 +537946,16 @@ const InputPrompt = (0, import_react.memo)(({ onSubmit, onChange, onSlashCommand
 				onCancel: handleAtCancel
 			}),
 			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
-				borderStyle: "bold",
+				borderStyle: theme.panelBackground ? "bold" : "round",
 				borderColor: accentColor,
 				borderLeft: true,
-				borderRight: false,
-				borderTop: false,
-				borderBottom: false,
+				borderRight: !theme.panelBackground,
+				borderTop: !theme.panelBackground,
+				borderBottom: !theme.panelBackground,
 				flexDirection: "column",
 				paddingLeft: 2,
 				paddingRight: 2,
-				paddingY: 1,
+				paddingY: theme.panelBackground ? 1 : 0,
 				backgroundColor: theme.panelBackground,
 				children: [
 					pendingAttachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
@@ -540672,7 +540806,6 @@ const GeneratingProgress = (0, import_react.memo)(() => {
 		return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
 			flexDirection: "column",
 			marginTop: 2,
-			marginBottom: 1,
 			children: [
 				t1,
 				inProgress && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
@@ -541992,7 +542125,7 @@ const FooterSection = (0, import_react.memo)(() => {
 			children: [
 				"•",
 				" Fusion ",
-				"0.4.2"
+				"0.4.3"
 			]
 		});
 		$[10] = t7;
@@ -602933,57 +603066,35 @@ function getToolAriaProps(toolName, input) {
 	};
 }
 const MessageBlockView = (0, import_react.memo)((props) => {
-	const $ = (0, import_compiler_runtime.c)(58);
+	const $ = (0, import_compiler_runtime.c)(55);
 	const message = useSnapshot(props.message);
 	const theme = useTheme();
-	const [flash, setFlash] = (0, import_react.useState)(false);
-	let t0;
-	let t1;
-	if ($[0] !== props.highlighted) {
-		t0 = () => {
-			if (props.highlighted) {
-				setFlash(true);
-				const timer = setTimeout(() => setFlash(false), 1e3);
-				return () => clearTimeout(timer);
-			}
-			setFlash(false);
-		};
-		t1 = [props.highlighted];
-		$[0] = props.highlighted;
-		$[1] = t0;
-		$[2] = t1;
-	} else {
-		t0 = $[1];
-		t1 = $[2];
-	}
-	(0, import_react.useEffect)(t0, t1);
-	const flashBg = flash ? theme.highlightBackground : void 0;
 	let inner;
 	bb0: switch (message.type) {
 		case "user": {
 			if (message.compacting) {
-				const t2 = flash ? flashBg : theme.panelBackground;
-				let t3;
-				let t4;
-				if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-					t3 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+				const t0 = props.highlighted ? theme.highlightBackground : theme.panelBackground;
+				let t1;
+				let t2;
+				if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+					t1 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
 						color: "yellow",
 						bold: true,
 						children: "Compacting conversation"
 					});
-					t4 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+					t2 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
 						dimColor: true,
 						children: "The conversation is too long to keep in the AI memory, auto-summarizing might take up to 1 minute. Conversation can continue shortly."
 					});
-					$[3] = t3;
-					$[4] = t4;
+					$[0] = t1;
+					$[1] = t2;
 				} else {
-					t3 = $[3];
-					t4 = $[4];
+					t1 = $[0];
+					t2 = $[1];
 				}
-				let t5;
-				if ($[5] !== message.id || $[6] !== t2) {
-					t5 = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+				let t3;
+				if ($[2] !== message.id || $[3] !== t0) {
+					t3 = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
 						marginBottom: 1,
 						paddingLeft: 2,
 						paddingRight: 2,
@@ -602994,34 +603105,34 @@ const MessageBlockView = (0, import_react.memo)((props) => {
 						borderTop: false,
 						borderBottom: false,
 						borderColor: "yellow",
-						backgroundColor: t2,
+						backgroundColor: t0,
 						flexDirection: "column",
 						"aria-role": "listitem",
 						"aria-label": "Compacting conversation",
-						children: [t3, t4]
+						children: [t1, t2]
 					}, message.id);
-					$[5] = message.id;
-					$[6] = t2;
-					$[7] = t5;
-				} else t5 = $[7];
-				inner = t5;
+					$[2] = message.id;
+					$[3] = t0;
+					$[4] = t3;
+				} else t3 = $[4];
+				inner = t3;
 				break bb0;
 			}
-			const t2 = flash ? flashBg : theme.panelBackground;
-			const t3 = `User: ${message.displayPrompt ?? ""}`;
-			const t4 = message.displayPrompt ?? "";
-			let t5;
-			if ($[8] !== t4) {
-				t5 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+			const t0 = props.highlighted ? theme.highlightBackground : theme.panelBackground;
+			const t1 = `User: ${message.displayPrompt ?? ""}`;
+			const t2 = message.displayPrompt ?? "";
+			let t3;
+			if ($[5] !== t2) {
+				t3 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
 					wrap: "wrap",
-					children: t4
+					children: t2
 				});
-				$[8] = t4;
-				$[9] = t5;
-			} else t5 = $[9];
-			let t6;
-			if ($[10] !== message.id || $[11] !== t2 || $[12] !== t3 || $[13] !== t5) {
-				t6 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+				$[5] = t2;
+				$[6] = t3;
+			} else t3 = $[6];
+			let t4;
+			if ($[7] !== message.id || $[8] !== t0 || $[9] !== t1 || $[10] !== t3) {
+				t4 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
 					marginBottom: 1,
 					paddingLeft: 2,
 					paddingRight: 2,
@@ -603032,160 +603143,164 @@ const MessageBlockView = (0, import_react.memo)((props) => {
 					borderTop: false,
 					borderBottom: false,
 					borderColor: "green",
-					backgroundColor: t2,
+					backgroundColor: t0,
 					flexDirection: "column",
 					"aria-role": "listitem",
-					"aria-label": t3,
-					children: t5
+					"aria-label": t1,
+					children: t3
 				}, message.id);
-				$[10] = message.id;
-				$[11] = t2;
-				$[12] = t3;
-				$[13] = t5;
-				$[14] = t6;
-			} else t6 = $[14];
-			inner = t6;
+				$[7] = message.id;
+				$[8] = t0;
+				$[9] = t1;
+				$[10] = t3;
+				$[11] = t4;
+			} else t4 = $[11];
+			inner = t4;
 			break bb0;
 		}
 		case "text": {
-			let t2;
-			if ($[15] !== message.content || $[16] !== message.id || $[17] !== props.onRender) {
-				t2 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CompletedTextBlock, {
+			const t0 = props.highlighted ? theme.highlightBackground : void 0;
+			let t1;
+			if ($[12] !== message.content || $[13] !== message.id || $[14] !== props.onRender) {
+				t1 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CompletedTextBlock, {
 					text: message.content,
 					streaming: false,
 					onRender: props.onRender
 				}, message.id);
-				$[15] = message.content;
-				$[16] = message.id;
-				$[17] = props.onRender;
-				$[18] = t2;
-			} else t2 = $[18];
-			let t3;
-			if ($[19] !== flashBg || $[20] !== t2) {
-				t3 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+				$[12] = message.content;
+				$[13] = message.id;
+				$[14] = props.onRender;
+				$[15] = t1;
+			} else t1 = $[15];
+			let t2;
+			if ($[16] !== t0 || $[17] !== t1) {
+				t2 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
 					flexDirection: "column",
-					backgroundColor: flashBg,
+					backgroundColor: t0,
 					"aria-role": "listitem",
-					children: t2
+					children: t1
 				});
-				$[19] = flashBg;
-				$[20] = t2;
-				$[21] = t3;
-			} else t3 = $[21];
-			inner = t3;
+				$[16] = t0;
+				$[17] = t1;
+				$[18] = t2;
+			} else t2 = $[18];
+			inner = t2;
 			break bb0;
 		}
 		case "tool": {
 			const toolMsg = message;
-			const t2 = toolMsg.input;
-			let t3;
-			if ($[22] !== t2 || $[23] !== toolMsg.toolName) {
-				t3 = getToolAriaProps(toolMsg.toolName, t2);
-				$[22] = t2;
-				$[23] = toolMsg.toolName;
-				$[24] = t3;
-			} else t3 = $[24];
-			const { ariaHidden, ariaLabel } = t3;
-			const t4 = ariaHidden || void 0;
-			let t5;
-			if ($[25] !== message.id || $[26] !== props.onRender || $[27] !== toolMsg) {
-				t5 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToolCallCompleted, {
+			const t0 = toolMsg.input;
+			let t1;
+			if ($[19] !== t0 || $[20] !== toolMsg.toolName) {
+				t1 = getToolAriaProps(toolMsg.toolName, t0);
+				$[19] = t0;
+				$[20] = toolMsg.toolName;
+				$[21] = t1;
+			} else t1 = $[21];
+			const { ariaHidden, ariaLabel } = t1;
+			const t2 = props.highlighted ? theme.highlightBackground : void 0;
+			const t3 = ariaHidden || void 0;
+			let t4;
+			if ($[22] !== message.id || $[23] !== props.onRender || $[24] !== toolMsg) {
+				t4 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToolCallCompleted, {
 					tool: toolMsg,
 					onRender: props.onRender
 				}, message.id);
-				$[25] = message.id;
-				$[26] = props.onRender;
-				$[27] = toolMsg;
-				$[28] = t5;
-			} else t5 = $[28];
-			let t6;
-			if ($[29] !== ariaLabel || $[30] !== flashBg || $[31] !== t4 || $[32] !== t5) {
-				t6 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+				$[22] = message.id;
+				$[23] = props.onRender;
+				$[24] = toolMsg;
+				$[25] = t4;
+			} else t4 = $[25];
+			let t5;
+			if ($[26] !== ariaLabel || $[27] !== t2 || $[28] !== t3 || $[29] !== t4) {
+				t5 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
 					flexDirection: "column",
-					backgroundColor: flashBg,
-					"aria-hidden": t4,
+					backgroundColor: t2,
+					"aria-hidden": t3,
 					"aria-label": ariaLabel,
-					children: t5
+					children: t4
 				});
-				$[29] = ariaLabel;
-				$[30] = flashBg;
-				$[31] = t4;
-				$[32] = t5;
-				$[33] = t6;
-			} else t6 = $[33];
-			inner = t6;
+				$[26] = ariaLabel;
+				$[27] = t2;
+				$[28] = t3;
+				$[29] = t4;
+				$[30] = t5;
+			} else t5 = $[30];
+			inner = t5;
 			break bb0;
 		}
 		case "thinking": {
-			let t2;
-			if ($[34] !== message.content || $[35] !== message.id || $[36] !== message.startedAt || $[37] !== message.streaming || $[38] !== props.onRender) {
-				t2 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThinkingBlock, {
+			const t0 = props.highlighted ? theme.highlightBackground : void 0;
+			let t1;
+			if ($[31] !== message.content || $[32] !== message.id || $[33] !== message.startedAt || $[34] !== message.streaming || $[35] !== props.onRender) {
+				t1 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThinkingBlock, {
 					text: message.content,
 					streaming: message.streaming,
 					startedAt: message.startedAt,
 					onRender: props.onRender
 				}, message.id);
-				$[34] = message.content;
-				$[35] = message.id;
-				$[36] = message.startedAt;
-				$[37] = message.streaming;
-				$[38] = props.onRender;
-				$[39] = t2;
-			} else t2 = $[39];
-			let t3;
-			if ($[40] !== flashBg || $[41] !== t2) {
-				t3 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+				$[31] = message.content;
+				$[32] = message.id;
+				$[33] = message.startedAt;
+				$[34] = message.streaming;
+				$[35] = props.onRender;
+				$[36] = t1;
+			} else t1 = $[36];
+			let t2;
+			if ($[37] !== t0 || $[38] !== t1) {
+				t2 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
 					flexDirection: "column",
-					backgroundColor: flashBg,
+					backgroundColor: t0,
 					"aria-hidden": true,
-					children: t2
+					children: t1
 				});
-				$[40] = flashBg;
-				$[41] = t2;
-				$[42] = t3;
-			} else t3 = $[42];
-			inner = t3;
+				$[37] = t0;
+				$[38] = t1;
+				$[39] = t2;
+			} else t2 = $[39];
+			inner = t2;
 			break bb0;
 		}
 		case "idle": {
 			const idleMsg = message;
+			let t0;
+			if ($[40] !== idleMsg.durationMs) {
+				t0 = formatDuration(idleMsg.durationMs);
+				$[40] = idleMsg.durationMs;
+				$[41] = t0;
+			} else t0 = $[41];
+			const idleDuration = t0;
+			const idleAriaLabel = idleMsg.state === "error" ? `Failed after ${idleDuration}` : idleMsg.state === "abort" ? `Interrupted after ${idleDuration}` : `Worked for ${idleDuration}`;
+			const t1 = props.highlighted ? theme.highlightBackground : void 0;
 			let t2;
-			if ($[43] !== idleMsg.durationMs) {
-				t2 = formatDuration(idleMsg.durationMs);
-				$[43] = idleMsg.durationMs;
+			if ($[42] !== idleMsg || $[43] !== message.id) {
+				t2 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IdleBlock, { message: idleMsg }, message.id);
+				$[42] = idleMsg;
+				$[43] = message.id;
 				$[44] = t2;
 			} else t2 = $[44];
-			const idleDuration = t2;
-			const idleAriaLabel = idleMsg.state === "error" ? `Failed after ${idleDuration}` : idleMsg.state === "abort" ? `Interrupted after ${idleDuration}` : `Worked for ${idleDuration}`;
 			let t3;
-			if ($[45] !== idleMsg || $[46] !== message.id) {
-				t3 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IdleBlock, { message: idleMsg }, message.id);
-				$[45] = idleMsg;
-				$[46] = message.id;
-				$[47] = t3;
-			} else t3 = $[47];
-			let t4;
-			if ($[48] !== flashBg || $[49] !== idleAriaLabel || $[50] !== t3) {
-				t4 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+			if ($[45] !== idleAriaLabel || $[46] !== t1 || $[47] !== t2) {
+				t3 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
 					flexDirection: "column",
-					backgroundColor: flashBg,
+					backgroundColor: t1,
 					"aria-role": "listitem",
 					"aria-label": idleAriaLabel,
-					children: t3
+					children: t2
 				});
-				$[48] = flashBg;
-				$[49] = idleAriaLabel;
-				$[50] = t3;
-				$[51] = t4;
-			} else t4 = $[51];
-			inner = t4;
+				$[45] = idleAriaLabel;
+				$[46] = t1;
+				$[47] = t2;
+				$[48] = t3;
+			} else t3 = $[48];
+			inner = t3;
 			break bb0;
 		}
 		default: throw new Error(`Unknown message type: ${message}`);
 	}
-	let t2;
-	if ($[52] !== flash || $[53] !== theme) {
-		t2 = flash && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+	let t0;
+	if ($[49] !== props.highlighted || $[50] !== theme) {
+		t0 = props.highlighted && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
 			position: "absolute",
 			top: 0,
 			right: 0,
@@ -603201,21 +603316,21 @@ const MessageBlockView = (0, import_react.memo)((props) => {
 				children: "✓ Copied"
 			})
 		});
-		$[52] = flash;
-		$[53] = theme;
-		$[54] = t2;
-	} else t2 = $[54];
-	let t3;
-	if ($[55] !== inner || $[56] !== t2) {
-		t3 = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		$[49] = props.highlighted;
+		$[50] = theme;
+		$[51] = t0;
+	} else t0 = $[51];
+	let t1;
+	if ($[52] !== inner || $[53] !== t0) {
+		t1 = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
 			position: "relative",
-			children: [inner, t2]
+			children: [inner, t0]
 		});
-		$[55] = inner;
-		$[56] = t2;
-		$[57] = t3;
-	} else t3 = $[57];
-	return t3;
+		$[52] = inner;
+		$[53] = t0;
+		$[54] = t1;
+	} else t1 = $[54];
+	return t1;
 });
 function CompletedTextBlock(t0) {
 	const $ = (0, import_compiler_runtime.c)(8);
@@ -603993,7 +604108,6 @@ const CodeSession = (0, import_react.memo)(({ onExit, isTabActive = true, update
 			flexDirection: "column",
 			flexGrow: 1,
 			paddingRight: 2,
-			paddingY: 1,
 			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
 				flexDirection: "column",
 				flexGrow: 1,
@@ -605965,7 +606079,7 @@ const TabBar = (0, import_react.memo)((t0) => {
 	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
 		t8 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
 			dimColor: true,
-			children: "   · Ctrl+] to cycle"
+			children: "   · Ctrl+T to cycle"
 		});
 		$[11] = t8;
 	} else t8 = $[11];
@@ -606084,8 +606198,8 @@ function CodeCommand({ onExit, sys, options, updateCheck }) {
 			process.exit(0);
 		}, 100);
 	}, [exit, onExit]);
-	useInput((input, _key) => {
-		if (input === "" && clawEnabled === true) {
+	useInput((input, key) => {
+		if (key.ctrl && input === "t" && clawEnabled === true) {
 			setClawHasUnread(false);
 			setDisplayMode((prev) => prev === "code" ? "claw" : prev === "claw" ? "kanban" : "code");
 		}
@@ -606252,7 +606366,7 @@ function isStandaloneBinary() {
 	return !path$6.basename(process.execPath, ".exe").startsWith("node");
 }
 function getCurrentVersion() {
-	return "0.4.2";
+	return "0.4.3";
 }
 async function fetchLatestVersion() {
 	return new Promise((resolve, reject) => {
@@ -606676,7 +606790,7 @@ function initSentry() {
 	init({
 		dsn: "https://1c5033d697e0271ebe53773bff826de0@o117565.ingest.us.sentry.io/4511107776905216",
 		tracesSampleRate: 0,
-		release: "0.4.2",
+		release: "0.4.3",
 		environment: process.env.NODE_ENV ?? "development",
 		enabled: false,
 		registerEsmLoaderHooks: false,
@@ -606688,7 +606802,7 @@ function initSentry() {
 }
 //#endregion
 //#region src/cli.tsx
-const VERSION = "0.4.2";
+const VERSION = "0.4.3";
 async function startInk(command, options) {
 	const sys = await createDevToolsNodeSys({
 		cwd: process.cwd(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/buildercode",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "Builder.io CLI - AI-powered code generation",
   "license": "MIT",
   "bin": {