Skip to content

Implement desktop shell UI with dashboard and settings views#13

Merged
Adam Gurley (machine-squelch) merged 3 commits intomainfrom
claude/add-html-trulana-macos-6hNZE
Mar 31, 2026
Merged

Implement desktop shell UI with dashboard and settings views#13
Adam Gurley (machine-squelch) merged 3 commits intomainfrom
claude/add-html-trulana-macos-6hNZE

Conversation

@machine-squelch
Copy link
Copy Markdown
Collaborator

@machine-squelch Adam Gurley (machine-squelch) commented Mar 31, 2026

Summary

This PR implements the complete desktop application shell and primary UI views, matching the HTML mockup design. It introduces a persistent sidebar navigation system and five main content views (Dashboard, Context Vault, Preferences, Agents, Audit Log, and Settings).

Key Changes

App Shell & Navigation

  • AppShell (lib/features/shell/app_shell.dart): New main container with fixed left sidebar and swappable content area
    • Persistent navigation with 5 main items + Settings system item
    • Brand header with Trulana logo and version
    • Server status footer
    • Smooth view transitions using AnimatedSwitcher
    • State management via selectedNavProvider (Riverpod)

Dashboard View

  • DashboardView (lib/features/dashboard/dashboard_view.dart): Comprehensive overview matching desktop mockup
    • Grid layout: Vault Status, Redaction Stats, Connected Agents, Recent Activity, and full Audit Trail
    • Privacy level toggle (Standard/Strict/Paranoid) in header
    • Reusable _DashCard component with title, badge, and content sections
    • Real-time data binding via Riverpod providers (userConfigProvider, agentsProvider)
    • Redaction statistics with color-coded progress bars
    • Agent status indicators with TTL display

Settings View

  • SettingsView (lib/features/shell/views/settings_view.dart): Configuration management
    • Organized into three sections: Privacy, Server, and Data
    • Privacy level selector with biometric toggle
    • Server configuration (auto-start, MCP adapter, token TTL)
    • Data management actions (export, wipe)
    • Custom _ToggleSwitch component with smooth animations

Additional Views

  • ContextVaultView (lib/features/shell/views/context_vault_view.dart): Vault entry display with redaction markers
  • PreferencesView (lib/features/shell/views/preferences_view.dart): Structured preferences with scope tags and DB integration
  • AgentsView (lib/features/shell/views/agents_view.dart): Active/expired token management with TTL formatting
  • AuditLogView (lib/features/shell/views/audit_log_view.dart): Detailed event log with color-coded action types

Notable Implementation Details

  • Reusable Components: _DashCard, _ContentHeader, _PrivacyToggle, _SettingRow for consistent styling
  • Async Data Handling: All views use Riverpod's AsyncValue with proper loading/error states
  • Color System: Leverages TrulanaColors and TrulanaTheme for consistent dark theme
  • Responsive Layout: Grid-based dashboard with proper spacing and scrolling
  • State Management: Centralized navigation state via selectedNavProvider
  • Router Integration: Updated app_router.dart to use new shell-based navigation

Design Consistency

All views follow the desktop HTML mockup with:

  • Dark theme (0xFF0E0E1A background, 0xFF14142A borders)
  • Monospace typography for labels and badges
  • Cyan accent color (#2A8A84) for primary actions
  • Consistent card styling with header separators
  • Proper spacing and padding throughout

https://claude.ai/code/session_01ViQtUW7jVVA1JGPDkvvUEA


Note

Medium Risk
Moderate UI/navigation change that reroutes /dashboard to a new shell and adds multiple new views; risk is mainly around routing and state-driven view switching/regressions, with limited data mutations (privacy level updates).

Overview
Routes now render AppShell at /dashboard (instead of the previous DashboardScreen), introducing a persistent sidebar layout with animated content switching.

Adds a new DashboardView and five shell views (ContextVaultView, PreferencesView, AgentsView, AuditLogView, SettingsView) that implement the desktop mockup screens, including async loading/error states and wiring to existing providers/services for preferences, agents, and privacy-level updates.

Written by Cursor Bugbot for commit 452c976. This will update automatically on new commits. Configure here.

Replaces the single-screen scrollable dashboard with a macOS desktop
shell featuring persistent sidebar navigation and dedicated views:
Dashboard, Context Vault, Preferences, Agents, Audit Log, and Settings.

https://claude.ai/code/session_01ViQtUW7jVVA1JGPDkvvUEA
Copy link
Copy Markdown

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 3 potential issues.

Fix All in Cursor

Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

@machine-squelch
Copy link
Copy Markdown
Collaborator Author

Claude (@claude) Toggle switches discard state changes silently
High Severity

_ToggleSwitch manages visual state locally via setState but has no onChanged callback, so toggling "Require Touch ID," "Auto-start REST server," or "MCP stdio adapter" animates the switch without persisting or propagating the change to any provider or business logic. Contrast this with _PrivacyToggle in the same file, which correctly accepts and invokes an onChanged callback to update userConfigProvider.

Replace all hardcoded/mock data with real Riverpod providers and
database queries:

- Dashboard: vault stats from ContextVault.entryCount, PreferencesService
  count, and agentsProvider active count. Redaction stats computed from
  audit log entries. Agents and audit trail from live providers.
- Context Vault: entries run through AutoRedactEngine at user's current
  privacy level, with live redaction counts per entry.
- Preferences: loaded from PreferencesService with inferred scope tags.
- Agents: fully driven by agentsProvider with live TTL computation.
- Audit Log: rendered from auditProvider with highlighted [REDACTED] tags.
- Settings: already wired to userConfigProvider (unchanged).

Seed demo agents (cursor-mcp, claude-desktop, demo-agent) and 8 audit
log entries on first launch so the UI is populated out of the box.
Enriched seed preferences to match HTML mockup (added diet, airline,
meeting_default).

https://claude.ai/code/session_01ViQtUW7jVVA1JGPDkvvUEA
README, CONTRIBUTING, and SECURITY all referenced 117 tests but the
actual count is 134 (89 engine + 31 integration + 11 security + 3
widget). Updated badge, test commands, directory breakdown, and
security coverage table to match.

https://claude.ai/code/session_01ViQtUW7jVVA1JGPDkvvUEA
@machine-squelch Adam Gurley (machine-squelch) merged commit a0568ca into main Mar 31, 2026
3 of 4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants