Enrich terminal font previews

[juliusmarminge]

What Changed

• Replaced the minimal terminal preview transcript with a realistic development-server session.
• Added prompts, status output, URLs, test summaries, warnings, and a READY badge to exercise more terminal styles.
• Updated the mobile showcase terminal buffer to match the richer preview content.
• Increased the web terminal preview height to accommodate the expanded transcript.

Why

Font previews now demonstrate bold, dim, underline, accent colors, background colors, and realistic terminal output, making it easier to evaluate terminal fonts across web and mobile surfaces.

UI Changes

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

---

Note

Low Risk
Preview-only copy and layout in settings/showcase; no runtime behavior, auth, or data paths change.

Overview
Terminal font previews on web, mobile, and the mobile showcase now use a shared-style zsh prompt + vpr dev session instead of a short npm run dev sample, so users can judge fonts against bold, dim, underline, accents, and a READY background badge.

On mobile, TerminalAppearancePreview adds a span() helper so nested AppText nodes keep Menlo and theme colors, and the sample lines mirror the new prompt, Vite output, URL, test summary, and cursor.

On web, TERMINAL_PREVIEW_TRANSCRIPT and TERMINAL_PROMPT are rewritten with ANSI SGR styling, and the Ghostty preview container grows from h-36 to h-52.

mobile-showcase-environment.ts updates SHOWCASE_TERMINAL_BUFFER to the same kind of transcript (with showcase-specific branch and 612 passed).

^{Reviewed by Cursor Bugbot for commit 4255db7. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Enrich terminal font previews with multi-line colorized transcripts

• Replaces simple one-line terminal samples in the web settings preview (SettingsFontPreviews.tsx), mobile appearance preview (AppearancePreviews.tsx), and mobile showcase (mobile-showcase-environment.ts) with richer multi-line transcripts.
• Each transcript simulates a dev-server session: a zsh-style colored prompt with arrow, project name, and git segment, followed by Vite output with version/timing, underlined Local/Network URLs, a test summary, and a READY badge with background color.
• The web preview container height increases from h-36 to h-52 to show more lines.
• ANSI SGR sequences now exercise bold, dim, underline, multiple accent colors, and background attributes across all three surfaces.

^{Macroscope summarized 4255db7.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 3cd4793e-39ea-4654-a72f-f7d8ea4b1bf8

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

_{Comment @coderabbitai help to get the list of available commands.}

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{Bugbot Autofix is ON, but a cloud agent failed to start.}

^{Reviewed by Cursor Bugbot for commit cacccc0. Configure here.}

[macroscopeapp]

Approvability

Verdict: Approved 4255db7

Cosmetic-only changes updating the static text displayed in terminal font preview components. The richer preview content better demonstrates font rendering across various ANSI escape sequences but has no impact on runtime behavior or functionality.

^{You can customize Macroscope's approvability policy. Learn more.}