Feature: Lightweight Dashboard / Quick-Navigation Widget

[EricGrill]

Feature: Lightweight Dashboard / Quick-Navigation Widget

Problem

The current Projects sidebar is a tree view optimized for browsing, not for action. Eric wants to quickly jump to a project, see at a glance what's active across his machines, and navigate deep folder structures without expanding 5 levels of tree nodes. The existing Favorites/Workspaces/Tags views are powerful but require too many clicks for high-velocity context switching.

Proposed Solution

Add a Projects Dashboard — a dedicated webview panel that serves as a command center for all projects, files, and cross-machine status. Inspired by tools like Raycast, Alfred, and the GitHub CLI dashboard.

Dashboard Layout (Single-Column, Keyboard-First)

┌─────────────────────────────────────────┐
│  🔍 Search projects, files, tags...     │
├─────────────────────────────────────────┤
│  ⚡ Quick Actions                       │
│  [Open Last] [New Project] [Sync Now]   │
├─────────────────────────────────────────┤
│  📁 Recently Opened (cross-machine)     │
│  ▸ cafe-justo      last: ventress 2h ago│
│  ▸ surmetrics-api  last: laptop  5h ago │
│  ▸ chainbytes-web  last: snoke   1d ago │
├─────────────────────────────────────────┤
│  🏷️  Pinned by Tag                      │
│  #urgent    ▸ cafe-justo-mobile         │
│  #review    ▸ surmetrics-cto-agreement  │
├─────────────────────────────────────────┤
│  🖥️  Machine Overview                   │
│  ventress  ● 12 projects  🟢 online     │
│  snoke     ●  8 projects  🟢 online     │
│  laptop    ●  3 projects  🔴 offline    │
├─────────────────────────────────────────┤
│  📍 File Location Finder                │
│  Search: "README.md"                    │
│  ▸ cafe-justo/README.md  (ventress)     │
│  ▸ surmetrics/README.md  (laptop)       │
│  [Copy scp path] [Open via SSH]         │
└─────────────────────────────────────────┘

Implementation Plan

• Phase 1: Webview Scaffold
  • Create src/dashboard/DashboardPanel.ts using vscode.WebviewPanel.
  • Bundle a lightweight frontend: vanilla TypeScript + CSS (no React/Vite to keep extension size <2MB). Use VS Code's CSS variables for theming.
• Phase 2: Search Engine
  • Fuse.js (2KB, fuzzy search) over the combined index: projects, tags, files (if rg/fd available), and machine locations.
  • Debounced input (150ms). Results ranked by lastOpenedAt + fuzzy score.
  • Keyboard nav: ↑/↓ to select, Enter to open, Cmd/Ctrl+Enter to open in new window.
• Phase 3: Data Feeds
  • Recently Opened: pulls from ProjectMetadata.lastOpenedAt (cross-machine, sorted desc).
  • Pinned by Tag: groups projects by tag, shows top 3 per tag with → to expand.
  • Machine Overview: reads MachineHeartbeat from the sync index; click a machine to filter projects by that location.
  • File Location Finder: integrates with the File Location Index. If ripgrep is installed, optionally index file names inside projects for deep search.
• Phase 4: Quick Actions & Commands
  • Projects: Open Dashboard — default keybinding Cmd/Ctrl+Shift+P (or user-configurable).
  • Inline buttons on each project card:
    • Open (local path)
    • Open on... (dropdown of other machines → copies SSH command)
    • Edit Note (inline textarea)
    • Set Status (dropdown)
• Phase 5: Customizable Widgets
  • Settings-driven layout: l13Projects.dashboard.widgets = ['search', 'recent', 'tags', 'machines', 'finder'].
  • Users can reorder or hide sections via the dashboard's own UI (drag handles, persisted to globalState).

Acceptance Criteria

• Pressing the dashboard keybinding opens the panel in <300ms.
• Typing "cafe" fuzzy-matches cafe-justo, cafe-justo-mobile, and the tag #cafe.
• The "Recently Opened" list shows projects opened on any machine, with relative timestamps ("2h ago on ventress").
• Clicking a machine in the overview filters the entire dashboard to only show projects known to exist on that machine.
• Dashboard respects VS Code's color theme (dark/light/high-contrast) automatically.

Technical Notes

• Webview communication: use postMessage with a typed protocol:

  type DashboardMessage =
    | { type: 'search'; query: string }
    | { type: 'open'; projectId: string; newWindow: boolean }
    | { type: 'setStatus'; projectId: string; status: ProjectStatus }
    | { type: 'copyPath'; projectId: string; machineId: MachineId };

• Bundle size concern: Fuse.js is ~2KB gzipped. The entire dashboard frontend should stay under 50KB.
• Accessibility: ensure all interactive elements are keyboard-navigable and screen-reader friendly (ARIA labels on search results).

Open Questions

• Should the dashboard be a full panel (like the current sidebar) or a modal overlay (like VS Code's command palette)? A panel allows persistent glanceability; a modal is faster to invoke/dismiss. Could support both: Projects: Open Dashboard Panel vs Projects: Open Dashboard Quick Pick.
• Should we integrate with VS Code's built-in Quick Open (Cmd+P) so projects appear there? This would require a FileSystemProvider or TextSearchProvider contribution.