Enrich terminal font previews

apps/mobile/src/features/settings/appearance/components/AppearancePreviews.tsx

@@ -1,4 +1,11 @@
-import { Platform, ScrollView, View, useColorScheme } from "react-native";
+import {
+  Platform,
+  ScrollView,
+  type StyleProp,
+  type TextStyle,
+  View,
+  useColorScheme,
+} from "react-native";
 
 import { AppText as Text } from "../../../../components/AppText";
 import {
@@ -54,14 +61,48 @@ export function TerminalAppearancePreview(props: { readonly fontSize: number })
     fontSize: props.fontSize,
     lineHeight,
   } as const;
+  // AppText stamps the sans font on every node, so nested spans must
+  // re-apply the terminal font instead of relying on inheritance, exactly
+  // like the code preview's tokens below.
+  const span = (color: string, extra?: TextStyle): StyleProp<TextStyle> => [
+    lineStyle,
+    { color, ...extra },
+  ];
 
   return (
     <View className="p-4">
-      <Text style={[lineStyle, { color: theme.foreground }]}>$ npm run dev</Text>
-      <Text style={[lineStyle, { color: theme.palette[2] }]}>✓ Ready in 430ms</Text>
-      <Text style={[lineStyle, { color: theme.foreground }]}>
-        Local: http://localhost:3000{" "}
-        <Text style={[lineStyle, { color: theme.cursorForeground }]}>▏</Text>
+      <Text style={span(theme.foreground)}>
+        <Text style={span(theme.palette[2])}>→ </Text>
+        <Text style={span(theme.palette[6])}>t3code </Text>
+        <Text style={span(theme.palette[4])}>git:(</Text>
+        <Text style={span(theme.palette[1])}>main</Text>
+        <Text style={span(theme.palette[4])}>)</Text>
+        <Text style={span(theme.palette[3])}> ✗</Text>
+        <Text style={span(theme.foreground)}> vpr dev</Text>
+      </Text>
+      <Text style={span(theme.foreground)}>
+        <Text style={span(theme.palette[2])}>VITE v7.1.1</Text>
+        <Text style={span(theme.mutedForeground)}> ready in</Text>
+        <Text style={span(theme.foreground)}> 1.24s</Text>
+      </Text>
+      <Text style={span(theme.foreground)}>
+        <Text style={span(theme.palette[2])}>→ </Text>
+        <Text style={span(theme.mutedForeground)}>Local: </Text>
+        <Text style={span(theme.palette[6], { textDecorationLine: "underline" })}>
+          http://127.0.0.1:5173/
+        </Text>
+      </Text>
+      <Text style={span(theme.foreground)}>
+        <Text style={span(theme.palette[2])}>✓ 85 passed</Text>
+        <Text style={span(theme.palette[3])}> △ 2 warnings</Text>
+        <Text style={span(theme.palette[1])}> ✗ 0 failed</Text>
+      </Text>
+      <Text style={span(theme.foreground)}>
+        <Text style={span(theme.background, { backgroundColor: theme.palette[2] })}>
+          {" READY "}
+        </Text>
+        <Text style={span(theme.mutedForeground)}> watching for changes</Text>{" "}
+        <Text style={span(theme.cursorForeground)}>▏</Text>
       </Text>
     </View>
   );

apps/web/src/components/settings/SettingsFontPreviews.tsx

@@ -120,11 +120,26 @@ export function CodeFontPreview() {
   );
 }
 
-const TERMINAL_PROMPT = "\x1b[2m$\x1b[0m ";
+// A zsh-style prompt: green arrow, cyan project, blue/red git segment,
+// yellow dirty marker. It doubles as the echo loop's fresh-line prompt.
+const TERMINAL_PROMPT =
+  "\x1b[1;32m→\x1b[0m \x1b[1;36mt3code\x1b[0m \x1b[1;34mgit:(\x1b[1;31mmain\x1b[1;34m)\x1b[0m \x1b[1;33m✗\x1b[0m ";
+// A dev-server startup: brand line, addresses, a test summary, and a READY
+// badge. Together the lines cover bold, dim, underline, the six accent
+// colors, and a background cell, so a font choice shows every SGR the
+// terminal actually renders.
 const TERMINAL_PREVIEW_TRANSCRIPT =
-  `${TERMINAL_PROMPT}npm run dev\r\n` +
-  "\x1b[32m✓\x1b[0m Ready in 430ms\r\n" +
-  "\x1b[2mLocal:\x1b[0m \x1b[36mhttp://localhost:3000\x1b[0m\r\n" +
+  `${TERMINAL_PROMPT}vpr dev\r\n` +
+  "\r\n" +
+  "  \x1b[1;32mVITE\x1b[0m \x1b[32mv7.1.1\x1b[0m  \x1b[2mready in\x1b[0m \x1b[1m1.24s\x1b[0m\r\n" +
+  "\r\n" +
+  "  \x1b[32m→\x1b[0m  \x1b[2mLocal:\x1b[0m    \x1b[4;36mhttp://127.0.0.1:5173/\x1b[0m\r\n" +
+  "  \x1b[32m→\x1b[0m  \x1b[2mNetwork:\x1b[0m  \x1b[4;36mhttp://192.168.1.24:5173/\x1b[0m\r\n" +
+  "\r\n" +
+  "  \x1b[32m✓ 85 passed\x1b[0m   \x1b[33m△ 2 warnings\x1b[0m   \x1b[31m✗ 0 failed\x1b[0m\r\n" +
+  "\r\n" +
+  "  \x1b[42;30m READY \x1b[0m \x1b[2mwatching for changes — press\x1b[0m \x1b[1mq\x1b[0m \x1b[2mto quit\x1b[0m\r\n" +
+  "\r\n" +
   TERMINAL_PROMPT;
 
 /** The surface treats an omitted family or size as "use the built-in default". */
@@ -225,7 +240,7 @@ export function TerminalFontPreview({ family, size }: { family: string; size: nu
   return (
     <div
       ref={mountRef}
-      className="relative mt-1 mb-2 h-36 overflow-hidden rounded-lg border border-border"
+      className="relative mt-1 mb-2 h-52 overflow-hidden rounded-lg border border-border"
       aria-label="Terminal font preview"
     />
   );

scripts/mobile-showcase-environment.ts

@@ -44,17 +44,27 @@ const PROJECT_SCRIPTS = JSON.stringify([
   },
 ]);
 
+const SHOWCASE_TERMINAL_PROMPT =
+  "\u001b[1;32m→\u001b[0m \u001b[1;36mt3code\u001b[0m \u001b[1;34mgit:(\u001b[1;31mfeat/remote-command-center\u001b[1;34m)\u001b[0m \u001b[1;33m✗\u001b[0m ";
+
+// A dev-server startup mirroring the web settings' terminal font preview:
+// zsh-style prompt, brand line, addresses, the thread's 612-test summary,
+// and a READY badge, so the scene exercises bold, dim, underline, the six
+// accent colors, and a background cell.
 export const SHOWCASE_TERMINAL_BUFFER = [
-  "\u001b[38;5;75m~/Code/t3code\u001b[0m \u001b[38;5;212mfeat/remote-command-center\u001b[0m",
-  "$ vp test run --changed",
+  `${SHOWCASE_TERMINAL_PROMPT}vpr dev`,
+  "",
+  "  \u001b[1;32mVITE\u001b[0m \u001b[32mv7.1.1\u001b[0m  \u001b[2mready in\u001b[0m \u001b[1m1.24s\u001b[0m",
+  "",
+  "  \u001b[32m→\u001b[0m  \u001b[2mLocal:\u001b[0m    \u001b[4;36mhttp://127.0.0.1:5173/\u001b[0m",
+  "  \u001b[32m→\u001b[0m  \u001b[2mNetwork:\u001b[0m  \u001b[4;36mhttp://192.168.1.24:5173/\u001b[0m",
+  "  \u001b[32m→\u001b[0m  \u001b[2mProject:\u001b[0m  \u001b[1mt3code\u001b[0m \u001b[2m— ~/Code/t3code\u001b[0m",
   "",
-  "  \u001b[38;5;117mt3code-mobile\u001b[0m       184 passed",
-  "  \u001b[38;5;213mclient-runtime\u001b[0m      263 passed",
-  "  \u001b[38;5;221mserver\u001b[0m              165 passed",
+  "  \u001b[32m✓ 612 passed\u001b[0m   \u001b[33m△ 2 warnings\u001b[0m   \u001b[31m✗ 0 failed\u001b[0m",
   "",
-  "\u001b[32m✨ 612 tests passed\u001b[0m  ·  3 environments online",
+  "  \u001b[42;30m READY \u001b[0m \u001b[2mwatching for changes — press\u001b[0m \u001b[1mq\u001b[0m \u001b[2mto quit\u001b[0m",
   "",
-  "\u001b[38;5;75m~/Code/t3code\u001b[0m \u001b[38;5;212mfeat/remote-command-center\u001b[0m $ ",
+  SHOWCASE_TERMINAL_PROMPT,
 ].join("\r\n");
 
 const BASE_ENVIRONMENT_PRESENCE = `export function environmentLabel(count: number): string {