WEB INTERFACE
Chalie Web Interface
Chalie’s frontend is four independent single-page applications — chat, brain, onboarding, and login — all built on the Radiant design system: a cinematic dark UI where light is used with restraint, so when something glows, it matters.
Auth + Provider Gate
Every page loads a shared auth gate before its own bootstrap. The gate calls /auth/status once and redirects as needed:
| Page | No account | No session | No providers | All good |
|---|---|---|---|---|
chat (/) |
→ onboarding | → login | → brain | enter chat |
brain (/brain/) |
→ onboarding | → login | providers tab only | full dashboard |
onboarding (/on-boarding/) |
stay | — | — | — |
| onboarding (account exists) | — | → login | → login | → login |
login (/login/) |
stay | stay | — | → chat |
When brain enters providers-only mode, every tab except Providers is hidden and a persistent toast prompts setup. All app code waits for the gate to complete before booting.
Radiant Design System
The canvas is near-black — darker than a typical dark mode. Color enters the UI in two forms only: atmospheric orbs drifting in the background canvas, and precision accents on interactive elements. Surfaces carry no tint; they are almost-transparent glass over the dark floor.
Three accent colors do all expressive work: violet (primary, buttons and active states), magenta (presence and indicators), and cyan (processing states). Each element carries one glow, one thin edge highlight. No stacked shadows, no multi-color gradients on small elements. When nothing is active, the newest Chalie message draws the eye with a single thin violet top edge.
Atmospheric depth comes from a background canvas rendering four low-alpha orbs — two warm (violet, magenta), two cool (cyan, indigo) — drifting on slow 25–35 second cycles. They provide color temperature without competing with the UI.
Transitions are uniform and quick. Buttons use a solid accent fill and glow only on hover. The restraint is deliberate: luxury is making the user notice the one thing that changed.
Layout
The chat interface uses three fixed regions:
- Title bar (top, fixed) — app name, status indicators, optional media controls during voice playback, navigation
- Chat area (scrollable middle) — messages in chronological order; Chalie messages sit left with a thin violet top-edge gradient, user messages right; depth fades at scroll boundaries
- Prompt box (bottom, fixed) — full-width text input; mic button on the left, send on the right
Presence Dot
A small dot beneath the chat input communicates what Chalie is doing:
| State | Color | Animation |
|---|---|---|
| Resting | Magenta | Slow breathing pulse |
| Processing | Cyan | Faster pulse |
| Thinking | Violet | Variable-intensity glow |
| Retrieving memory | Cyan | Expanding ripple |
| Planning | Violet → cyan | Cycling shimmer |
| Responding | Amber | Waveform bars |
Cards System
Structured responses render as typed cards rather than prose. All cards share the same dark surface and violet accent language.
- Scheduled item — title, time, recurrence, status (pending/completed), edit/delete actions
- List — name, type, item count, recent items preview, add/manage actions
- Goal — title, progress bar, target date, status (active/completed/abandoned), update actions
- Knowledge — concept name and strength, related concepts, last accessed
Voice I/O
Voice is optional. If the voice service is unavailable, the mic button and all speaker icons are hidden automatically.
Microphone (speech-to-text) — the mic button sits left of the prompt box. Click to record, click again to stop. The transcript is pasted into the prompt box; the user reviews it and sends. The mic track is released immediately after each recording.
Speaker (text-to-speech) — a speaker icon appears below each Chalie message. Clicking it opens a centered overlay player with play/pause, seek ±10 s, a progress bar, and a close button. Only one message plays at a time; opening a new one cancels the previous. On iOS Safari, the audio element is unlocked synchronously inside the click gesture before any async fetch, satisfying the browser’s autoplay policy.
Applications
Chat (/)
The primary interface. Title bar + scrollable chat + prompt box. Presence dot indicates cognitive state. Canvas atmosphere renders behind everything. Home view shows recent conversations. Supports all card types and optional voice I/O.
Brain (/brain/)
The cognitive dashboard. Tabs expose episodic memory with decay visualization, semantic concepts, routing audit trails, tool history, settings, and tool management.
The Personality subtab (under Cognition) exposes five sliders — warmth, mood, expressiveness, curiosity, humor — each ranging from −2 to +2. The selected combination maps to a voice paragraph prepended to the system prompt for user-facing conversations. Background processors (memory encoding, goal pursuit, scheduled tasks) are unaffected.
Onboarding (/on-boarding/)
Account creation only — username and password. If an account already exists, the page bounces to login. After creating an account it redirects to Brain so the user can add a provider.
Login (/login/)
A dedicated form so browser autofill and OS credential managers (macOS Keychain, etc.) can offer stored credentials. Accepts a ?next= parameter to resume the original destination after sign-in. Bounces to chat when a session is already active.