Kilo Console was rendering the OS sans/mono fallback stack instead of
Inter / Roboto Mono / JetBrains Mono like Kilo Cloud. Kilo Cloud's web
app (apps/web/src/app/layout.tsx) loads these via `next/font/google`,
but Kilo Console is a Vite-built SolidJS SPA that can't fetch Google
Fonts at build time the same way.
Changes:
- Self-host Inter Variable, Roboto Mono Variable, and JetBrains Mono
Variable as woff2 under packages/kilo-web-ui/src/assets/fonts/.
All three are OFL-1.1; attribution added next to the files.
- Add @font-face blocks at the top of
packages/kilo-web-ui/src/styles/theme.css for the three variable
fonts. The blocks live outside the scoped [data-theme="kilo"]
selector so they're available everywhere Kilo Web UI styles load.
- Declare the three Cloud-mirror tokens in the same scoped block where
--font-family-sans/-mono are already overridden:
--font-sans-loaded -> "Inter Variable"
--font-mono-loaded -> "Roboto Mono Variable"
--font-jetbrains -> "JetBrains Mono Variable"
Re-alias --font-family-sans/-font-family-mono to point at the new
tokens, so all existing var(--font-family-*) consumers across the
200+ call sites in kilo-ui, kilo-web-ui, and kilo-console pick up the
new fonts with no per-site change.
- Drop three hard-coded inline fallbacks in kilo-console styles
(base.css, profile.css, resolved.css) that named "Inter" directly,
so the value flows through the cascade instead of short-circuiting it.
- No upstream changes: packages/ui/* (the @opencode-ai/ui fork) is
untouched, avoiding kilocode_change markers in shared files.
Verified with `bun run build` in packages/kilo-console (all four
@font-face blocks emitted to the bundled CSS with hashed woff2 URLs)
and `bun run typecheck` in both kilo-console and kilo-web-ui.
The Usage and Buy Credits items in the Kilo Console profile sidebar
open in a new tab but had no visual indicator, so users could not tell
they navigate out of the app. Add an external-link icon to those items
and to the Open Dashboard primary CTA in the profile header.
The shared console-shell sidebar style hides every [data-component=icon]
inside a config-top-option, so a new modifier class is introduced to
re-enable the icon and push it to the right of the label. The primary
CTA's inner SVG is forced to --primary-foreground via a higher-
specificity override so it remains readable on the yellow button.
kilo-maintainer[bot]