Appearance
Settings Panel
A 10-tab settings hub covering everything from bank connections and cloud backup to theme customisation, AI model management, and auto-updates.
Tab Overview
| # | Tab | Icon | Purpose |
|---|---|---|---|
| 1 | Connections | Link | Akahu bank connection setup |
| 2 | Cloud | Cloud | Cloudflare backup and Workers AI |
| 3 | Themes | Palette | Browse and apply visual themes |
| 4 | Accent | Droplet | Override the accent color |
| 5 | Typography | Type | Font family and size |
| 6 | Interface | Sliders | Panel radius, spacing, density, effects |
| 7 | Layout | Layout | Save/load panel arrangements |
| 8 | Data | Database | Merchant logo management |
| 9 | AI | Brain | Model catalog and AI configuration |
| 10 | About | Info | Version, updates, system info |
1. Connections
Set up and manage the Akahu open banking connection.
| Element | Detail |
|---|---|
| App token field | Akahu application token (with show/hide toggle) |
| User token field | Akahu user token (with show/hide toggle) |
| Test connection | Verifies tokens against the Akahu API |
| Disconnect | Removes stored tokens |
| Setup guide | Step-by-step instructions (create account, get tokens, connect) |
| Supported banks | ANZ, ASB, BNZ, Kiwibank, Westpac |
Connection status indicator shows: connected, disconnected, or error state.
2. Cloud
Cloudflare D1 backup and Workers AI configuration.
| Element | Detail |
|---|---|
| Backup key | API key for Cloudflare Worker (with copy/generate) |
| Backup/restore | Manual backup trigger and restore from cloud |
| Backup history | List of previous cloud backups |
| Workers AI toggle | Enable Cloudflare Workers AI (Llama 3.1 8B, 3 free requests/day) |
| Worker URL override | Custom Worker endpoint URL |
| Cloud API keys | Provider-specific keys (per provider field) |
3. Themes
Browse and apply from 20+ built-in themes.
| Element | Detail |
|---|---|
| Genre filter | Browse themes by genre (Dark, Light, Colorful, etc.) |
| Theme cards | Color-preview cards showing each theme's palette |
| Favorites | Star themes to pin them to a favorites section |
| Recently used | Quick access to recently applied themes |
| Active indicator | Current theme highlighted |
Available themes include: Midnight, Cyberpunk, Ocean, Emerald, Sunset, Nord, Rose, Mono, Mono Light, Catppuccin (Mocha, Macchiato, Frappe, Latte), Dracula, Tokyo Night, Gruvbox, Kanagawa, Solarized, Alucard, Neon, Sepia.
4. Accent
Override the default accent color across the entire UI.
| Element | Detail |
|---|---|
| Preset colors | 12+ preset accent options |
| Custom hex | Enter any hex color value |
| Live preview | Button, badge, and progress bar preview update in real time |
| Reset to default | Restores the theme's original accent |
The accent color flows through --color-accent CSS variable and affects all themed components.
5. Typography
Font family and size configuration.
| Element | Detail |
|---|---|
| Font families | Grouped by category (Monospace, Sans-serif, etc.) |
| Font preview | Each font shown with "$1,234.56" sample for number rendering |
| Font size | Small, Medium, Large (segmented control) |
Default font: JetBrains Mono.
6. Interface
Fine-tune panel appearance and motion.
| Setting | Options |
|---|---|
| Panel radius | Border radius for panel containers |
| Spacing | Gap between panels |
| Density | Compact / Normal / Comfortable |
| Animation speed | Speed multiplier for transitions |
| Visual effects | Individual toggles for: blur, shadows, glow, reduce motion |
| Reset defaults | Restore all interface settings to defaults |
7. Layout
Save and restore panel arrangements.
| Element | Detail |
|---|---|
| Save layout | Name and save current panel arrangement |
| Load layout | Apply a previously saved layout |
| Layout list | All saved layouts with apply/delete |
| Reset to default | Restore the factory panel arrangement |
8. Data
Merchant logo coverage and management.
| Element | Detail |
|---|---|
| Coverage stats | Percentage of merchants with resolved logos |
| Backfill button | Trigger logo resolution for unmatched merchants |
| Re-resolve | Force re-fetch of all merchant logos |
| Matched table | Merchants with successfully resolved logos |
| Unmatched table | Merchants without logos (candidates for backfill) |
9. AI
Model management and AI system configuration.
| Element | Detail |
|---|---|
| Model catalog | Models grouped by tier (router, power, vision) |
| Download/delete | Per-model download with progress, or delete to free space |
| Model size | File size shown per model (with formatBytes) |
| Embedding model status | Status of the vector embedding model |
| Cloud API keys | Anthropic/OpenAI key entry |
| Workers AI | Cloudflare Workers AI toggle and status |
| Brain/memory viewer | Expandable view of Freddy's brain state and memory files (merchant mappings, corrections log) |
Model tiers:
- Router -- Small models (Qwen3 0.6B) for intent classification
- Power -- Medium models (1.5B--3B) for complex queries
- Vision -- MobileNet V4 Small for document/image classification
10. About
Version information and auto-update controls.
| Element | Detail |
|---|---|
| App version | Current APP_VERSION |
| Check for updates | Manual update check button |
| Download update | Download available update in background |
| Install update | Install and restart |
| macOS warning | Note about unsigned app warning on macOS (until Developer ID certificate obtained) |
| Update status | Status messages for each stage of the update process |
Data Source
| Store | Fields |
|---|---|
useFinanceStore | Connection status, accounts |
useThemeStore | Current theme, favorites, recent themes, UI preferences |
useLayoutStore | Saved layouts |
useChatStore | AI status, model states |
Related
- Accounts Panel -- connected accounts after setup
- Chat Panel -- AI models configured here power Freddy