[ToothyDev]

What this does

Gives LSOS a GTA Online terminal look, loosely based on the Master Control Terminal, and adds the base components later tabs will build on. The reasoning is in decision 009.

• Look: slate panels, a title between two green bars, green for stock and blue for supplies, condensed capitals with wide letter spacing, and faint horizontal scan lines (7%, every 3px, matched to an in-game close-up). Tokens (colours, type scale, spacing) are in src/app.css.
• Tabs look like browser tabs: the active tab is the same colour as the bar under it, with no line between them. On phones the tabs shrink to fit and the strip scrolls sideways below about 380px.
• Base components in src/components/ui/: Panel, Meter (stock/supplies bar), Countdown, TabBar, Button, NumberField, and Digits. Their logic (bar fill, parsing and clamping typed numbers) is tested in src/lib/ui.ts. Settings and the clock bar use them.
• Fixed-width digits: Oswald has no tabular figures, so Digits gives each digit a fixed-width slot. The clocks and countdowns no longer push the layout around as the time changes.
• Boot sequence: when LSOS opens, a short terminal overlay (about 1 second) shows three status lines and a filling bar, then fades into the app. Any click or key press skips it, and it doesn't show at all when the system is set to reduce motion.
• Footer and README: "Not affiliated with Rockstar Games", a vibe-coded disclaimer and a GitHub button on the site; the same disclaimer at the top of the README.
• CLAUDE.md: the "Next up" line is removed, so sessions now work on the issue the maintainer names. The finish-pr skill is updated to match.

Font: Oswald, under the SIL Open Font License 1.1. It is self-hosted through @fontsource-variable/oswald, so no request goes to a font CDN. Body text uses the system UI font.

No Rockstar logos, artwork or screenshots are included. All text/background pairs meet WCAG AA contrast (4.5:1 or better), and keyboard focus shows as a yellow outline.

Closes #3

How to check it

• Reload the page and watch the boot sequence. Reload again and press a key to skip it.
• npm run dev, then open #/kit (dev only) to see every base component. Typing in the number field or pressing −/+ moves the stock meter.
• Watch the clock bar for a few seconds: the status, timers and Start button stay in place.
• Press Tab to check the focus outline, and narrow the window to phone width.

Checklist

• npm run verify passes
• Game data added or changed here has a source (none added; the kit uses only sample numbers)
• README / CLAUDE.md updated if usage or workflow changed

🤖 Generated with Claude Code

[cloudflare-workers-and-pages]

Deploying lsos with    Cloudflare Pages

Latest commit:	763468b
Status:	✅  Deploy successful!
Preview URL:	https://d2f34205.lsos-2qs.pages.dev
Branch Preview URL:	https://claude-3-terminal-design.lsos-2qs.pages.dev

View logs