From cacccc0c5e0161363ddae312e91217044298e4e8 Mon Sep 17 00:00:00 2001 From: Julius Marminge Date: Wed, 5 Aug 2026 17:53:08 +0200 Subject: [PATCH 1/2] feat(settings): enrich terminal font previews - Add realistic dev-server output with prompts, links, statuses, and ANSI styling - Align mobile and showcase terminal previews with the web transcript - Expand the web preview height for the richer transcript --- .../components/AppearancePreviews.tsx | 33 ++++++++++++++++--- .../settings/SettingsFontPreviews.tsx | 25 +++++++++++--- scripts/mobile-showcase-environment.ts | 24 ++++++++++---- 3 files changed, 66 insertions(+), 16 deletions(-) diff --git a/apps/mobile/src/features/settings/appearance/components/AppearancePreviews.tsx b/apps/mobile/src/features/settings/appearance/components/AppearancePreviews.tsx index fe960109634..f2c13c340d3 100644 --- a/apps/mobile/src/features/settings/appearance/components/AppearancePreviews.tsx +++ b/apps/mobile/src/features/settings/appearance/components/AppearancePreviews.tsx @@ -57,11 +57,36 @@ export function TerminalAppearancePreview(props: { readonly fontSize: number }) return ( - $ npm run dev - ✓ Ready in 430ms - Local: http://localhost:3000{" "} - ▏ + → + t3code + git:( + main + ) + ✗ + vpr dev + + + VITE v7.1.1 + ready in + 1.24s + + + → + Local: + + http://127.0.0.1:5173/ + + + + ✓ 85 passed + △ 2 warnings + ✗ 0 failed + + + READY + watching for changes{" "} + ▏ ); diff --git a/apps/web/src/components/settings/SettingsFontPreviews.tsx b/apps/web/src/components/settings/SettingsFontPreviews.tsx index 9b719d8a576..9541a0f07e0 100644 --- a/apps/web/src/components/settings/SettingsFontPreviews.tsx +++ b/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 (
); diff --git a/scripts/mobile-showcase-environment.ts b/scripts/mobile-showcase-environment.ts index f7854675351..c172f79ba09 100644 --- a/scripts/mobile-showcase-environment.ts +++ b/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 { From 4255db762c91872db563741c7004fec11e0edaf0 Mon Sep 17 00:00:00 2001 From: Julius Marminge Date: Wed, 5 Aug 2026 17:58:52 +0200 Subject: [PATCH 2/2] fix(mobile): preserve terminal fonts in appearance preview - Reapply terminal font styles to nested preview text spans - Keep syntax colors, backgrounds, and decorations intact --- .../components/AppearancePreviews.tsx | 66 ++++++++++++------- 1 file changed, 41 insertions(+), 25 deletions(-) diff --git a/apps/mobile/src/features/settings/appearance/components/AppearancePreviews.tsx b/apps/mobile/src/features/settings/appearance/components/AppearancePreviews.tsx index f2c13c340d3..b111035c01f 100644 --- a/apps/mobile/src/features/settings/appearance/components/AppearancePreviews.tsx +++ b/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,39 +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 => [ + lineStyle, + { color, ...extra }, + ]; return ( - - → - t3code - git:( - main - ) - ✗ - vpr dev + + → + t3code + git:( + main + ) + ✗ + vpr dev - - VITE v7.1.1 - ready in - 1.24s + + VITE v7.1.1 + ready in + 1.24s - - → - Local: - + + → + Local: + http://127.0.0.1:5173/ - - ✓ 85 passed - △ 2 warnings - ✗ 0 failed + + ✓ 85 passed + △ 2 warnings + ✗ 0 failed - - READY - watching for changes{" "} - ▏ + + + {" READY "} + + watching for changes{" "} + ▏ );