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 Kilo Console navbar rendered a hardcoded capital "K" letter
inside a 1rem yellow badge instead of the actual Kilo logo. The base
.header-mark style in kilo-web-ui was designed for a single-letter
mark, which is why no image reference existed in the first place.
Swap the letter for the canonical Kilo logo (copied from the VS Code
extension's assets) and drop the redundant "Kilo" wordmark next to
it since the logo already carries the brand name. The new .header-mark-logo
override strips the badge chrome (background, color, font props) so the
SVG renders cleanly, and uses import.meta.env.BASE_URL so the asset
URL resolves correctly whether the console is served by Vite (base /)
or by the CLI's static server under /console/.
Also replace the brand link's plain <a> with the router's <A> component
so the home href is automatically prefixed with the configured router
base, keeping navigation aligned with the asset URL under /console/.
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-console's ProjectConsoleRoute.tsx imports @opencode-ai/ui/file,
@opencode-ai/ui/context/file, and @opencode-ai/ui/session-review.
The removal was a false positive from depcheck which failed to detect
the workspace package references. Count now 33 deps removed.
Catriel Müller