feat(dashboard): restyle landing and app as a terminal TUI

[duyet]

Restyles the marketing site and dashboard into a terminal-like TUI, matching a druk-style landing: dark canvas, monospace type, square corners, markdown headings, and bracket links.

What changed

• Design tokens: GitHub-dark #0d1117 canvas, green #3fb950 accent, radius 0, JetBrains Mono as the only typeface
• Landing page: # headings, $ prompts, [start] / [docs] links, and a TUI editor mockup
• Marketing pages (docs, pricing, compare, brand) and dashboard shell follow the same chrome
• UI primitives (button, card, input, dialog, badge) drop rounded/shadow chrome
• Default theme is dark (terminal) even when the OS prefers light; [theme] still toggles

Validation

• bun test src/lib in packages/dashboard — 6 pass
• PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_placeholder bun run build — 17 pages built
• Local preview visual QA: dark canvas #0d1117, editor mock readable, docs/pricing/dashboard chrome consistent

Production still deploys from main via CI after merge.

  

Summary by Sourcery

Restyle the marketing experience and dashboard as a cohesive terminal-inspired TUI.

New Features:

• Add a terminal-style editor mockup and README-like content structure to the landing page.
• Present product capabilities, packages, examples, pricing, and navigation using terminal-inspired headings, prompts, and bracket links.

Enhancements:

• Rebrand the marketing site and dashboard around a shared terminal TUI visual system with GitHub-dark colors, green accents, JetBrains Mono typography, square corners, and flatter UI chrome.
• Restyle the dashboard shell, documentation, comparison, pricing, and brand pages to use the new terminal presentation.
• Update shared UI primitives and authentication/toast styling to remove rounded and shadowed chrome and align with the TUI theme.
• Document and test the terminal design system, including its typography, palette, radius, and homepage structure.

Build:

• Replace the Inter font dependency with JetBrains Mono Variable.

Documentation:

• Update dashboard design guidance and maintenance notes to describe the terminal TUI design system.

Tests:

• Update dashboard stack tests to validate JetBrains Mono, the terminal palette, square corners, and terminal landing-page content.

[sourcery-ai]

Sorry @duyet, you have reached your weekly rate limit of 500000 diff characters.

Please try again later or upgrade to continue using Sourcery

[coderabbitai]

Important

• 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 88deb14c-a549-40d5-9faf-1f4d3d999aca

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[sourcery-ai]

Reviewer's Guide

Restyles the marketing site and dashboard into a terminal-like TUI by swapping the landing hero for a terminal-inspired document, unifying typography and colors around JetBrains Mono and a GitHub-dark palette, and flattening UI primitives (buttons, cards, inputs, dialogs, badges) to square, chrome-less terminal elements while keeping behavior and layout intact.

File-Level Changes

Change	Details	Files
Landing page is rebuilt as a terminal-style README with a TUI editor centerpiece and bracket-link navigation, while preserving existing content modules and code examples.	Replace PrimitiveIcon hero card grid with TuiEditor mock component import and usage. Restructure the homepage main sections into terminal-like copy blocks using # headings, $ prompts, and [bracket] links for navigation CTAs. Reuse HowItWorks, CodeTabs, PackagesGrid, and primitives/features data but render them as simple lists and terminal-style sections instead of card grids and CTA bands.	packages/dashboard/src/pages/index.astro packages/dashboard/src/components/home/tui-editor.astro
Design tokens are converted to a terminal TUI theme: JetBrains Mono as the only font, GitHub-dark canvas, green accent, square radius, and new TUI utility colors that alias onto legacy names.	Swap Inter for JetBrains Mono Variable in tokens.css and point all font-sans/heading/display/mono to the same monospace stack. Replace oklch preset colors with GitHub-like light/dark palettes, set --radius to 0 and radius-* to 0px, and introduce --tui-key plus related color aliases. Adjust global body/html fonts to font-mono, tweak reveal animation easing/offset, and update selection color mixing to srgb. Add tui-* utilities (hash, key, prompt, bracket, window, status) for terminal styling and document these in DESIGN.md along with updated color/type tables and art direction notes.	packages/dashboard/src/styles/tokens.css packages/dashboard/src/styles/global.css packages/dashboard/src/styles/tokens.css packages/dashboard/DESIGN.md
Marketing layout and content pages (pricing, compare, brand, docs) are restyled to match the terminal TUI, replacing logo/nav chrome and card-based sections with monospace, bracketed, square-edged terminal documents.	Change MarketingLayout header and footer to use ~/agentstate prompts, bracketed nav/menu links, text-based theme toggle, and simplified product/company/resources lists without Logo component. Rework pricing, compare, and docs pages to use smaller monospace headings prefixed by tui-hash, table styles with square borders, and link copy rendered as [docs]/[start]/[roadmap] instead of button CTAs. Update brand page color swatches, typography examples, and radius documentation to the new GitHub-dark + green accent palette and radius 0, emphasizing JetBrains Mono as the only typeface. Align FAQ and comparison sections to terminal-style cards and tables with reduced shadow and radius, and adjust copy to lower-case, terminal-flavored phrasing where appropriate.	packages/dashboard/src/layouts/MarketingLayout.astro packages/dashboard/src/pages/pricing.astro packages/dashboard/src/pages/compare.astro packages/dashboard/src/pages/brand.astro packages/dashboard/src/pages/docs.astro
Dashboard app shell and navigation are restyled as a terminal TUI, with ~/agentstate prompts, lower-case labels, square edges, and a footer status bar, while keeping routing and Clerk integration behavior unchanged.	Update AppShell sidebar/header to use ~/agentstate text instead of logo wordmark, shrink heights, square buttons, and add a bottom status footer with main · agentstate dashboard and keyboard hint copy. Change NavList group labels to tui-key "# group" headings and nav items to square, monospace rows with > active marker and lower-case titles; adjust secondary links to flatter muted styles. Flatten org/project selectors and skeletons (rounded-none, panel backgrounds), and restyle breadcrumb to look like a shell prompt with ~/agentstate / tail $. Update Clerk appearance config to use font-mono, radius 0, and primary color; style toasts with rounded-none font-mono to match the TUI.	packages/dashboard/src/components/app-shell.tsx packages/dashboard/src/components/providers.tsx
Core UI primitives (button, card, dialog, input, textarea, select, toggle, badge, code blocks, code tabs, packages grid, hub diagram) are flattened to square terminal components with monospace typography and adjusted colors while preserving APIs.	Update button, toggle, and badge variants to use rounded-none, font-mono, border-driven styling, and simplified focus outlines without shadows. Change Card (TSX and Astro) to squared borders, monospace titles, and remove drop shadows/elevated radius; update dialog overlay/content to darker backdrop, square popup, font-mono and no zoom animation. Restyle inputs, textareas, selects to use border-border + background, font-mono, primary-focused borders, and remove 3px ring/shadow behavior. Adjust CodeTabs, CodeBlock, and PackagesGrid containers to use bg-background instead of hardcoded dark, square borders, font-mono labels, and muted copy buttons; ensure code tabs still flex-wrap and copy mechanism remains. Modify hub-diagram and badge dots from circles to rectangles/square corners to better match terminal chrome.	packages/dashboard/src/components/ui/button.tsx packages/dashboard/src/components/ui/card.tsx packages/dashboard/src/components/ui/card.astro packages/dashboard/src/components/ui/dialog.tsx packages/dashboard/src/components/ui/input.tsx packages/dashboard/src/components/ui/toggle.tsx packages/dashboard/src/components/ui/badge.astro packages/dashboard/src/components/ui/badge.tsx packages/dashboard/src/components/home/code-tabs.astro packages/dashboard/src/components/ui/code-block.astro packages/dashboard/src/components/home/packages-grid.astro packages/dashboard/src/components/home/hub-diagram.astro
Tests and docs are updated to reflect the terminal TUI stack and ensure the new tokens/fonts are enforced while legacy fonts and palette are not reintroduced.	Update preset-stack.test to describe the terminal TUI stack, assert JetBrains Mono import, square palette colors (including #0d1117 and radius 0), and ensure layouts no longer import Inter or grotesk fonts while package.json depends on JetBrains Mono. Add review memory note in core-memory.md documenting the shared terminal TUI constraints (JetBrains Mono, radius 0, GitHub-dark canvas, green accent, README-style landing) to guide future changes. Switch RootLayout html class from font-sans to font-mono to make the TUI font global. Update bun.lock and package.json to swap @fontsource-variable/inter for @fontsource-variable/jetbrains-mono without other dependency changes.	packages/dashboard/src/lib/preset-stack.test.ts docs/knowledge/core-memory.md packages/dashboard/src/layouts/RootLayout.astro packages/dashboard/package.json bun.lock

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	npm/​@​fontsource-variable/​jetbrains-mono@​5.3.0

View full report