docs: update README, archive plans, and add dashboard redesign plan

.sisyphus/plans/dashboard-ui-redesign.md

@@ -0,0 +1,104 @@
+# Dashboard UI Redesign — Implementation Plan
+
+**Created:** 2026-06-02
+**Spec:** `apps/dashboard-ui/docs/superpowers/specs/2026-06-02-dashboard-redesign-design.md`
+**Approach:** Bottom-Up Design System (Approach A)
+
+---
+
+## TODOs
+
+### Phase 1: Design Foundation
+
+- [x] 1. Delete dead scaffold files (`src/style.css`, `src/counter.ts`, `public/icons.svg`)
+- [x] 2. Add Google Fonts (Inter + JetBrains Mono) to `index.html`
+- [x] 3. Create design tokens in `src/assets/main.css` using `@theme` directive
+- [x] 4. Add base animation CSS (page transitions, modal transitions, sidebar transitions)
+
+### Phase 2: Component Library
+
+- [x] 5. Create `NgButton.vue` — primary, secondary, ghost, danger variants with loading state
+- [x] 6. Create `NgCard.vue` — glass card wrapper with default, elevated, stat variants
+- [x] 7. Create `NgModal.vue` — HeadlessUI Dialog wrapper with transitions, header/body/footer slots
+- [x] 8. Create `NgTable.vue` — sortable headers, row hover, responsive layout
+- [x] 9. Create `NgInput.vue` — text, password, search with label, error, hint
+- [x] 10. Create `NgSelect.vue` — HeadlessUI Listbox wrapper
+- [x] 11. Create `NgToggle.vue` — HeadlessUI Switch wrapper
+- [x] 12. Create `NgBadge.vue` — status badges: online, offline, warning
+- [x] 13. Create `NgToast.vue` + `useToast.ts` — notification system replacing `alert()`
+- [x] 14. Create `NgSidebar.vue` — collapsible sidebar with icons + labels
+- [x] 15. Create `NgDropdown.vue` — HeadlessUI Menu wrapper
+- [x] 16. Create `NgAccordion.vue` — HeadlessUI Disclosure wrapper
+- [x] 17. Create `NgTooltip.vue` — HeadlessUI Popover wrapper
+- [x] 18. Create `NgSkeleton.vue` — loading skeleton placeholders
+
+### Phase 3: Layout System
+
+- [x] 19. Refactor `App.vue` — new sidebar layout with NgSidebar
+- [x] 20. Add page transitions to router (fade + slide-up)
+- [x] 21. Implement responsive breakpoints (mobile hamburger, tablet collapsed, desktop full)
+- [x] 22. Add sidebar collapse/expand with `Cmd+B` shortcut
+
+### Phase 4: Page Restyle
+
+- [x] 23. Restyle `Login.vue` — centered card, no sidebar, animated gradient background
+- [x] 24. Restyle `Dashboard.vue` — stat cards, traffic overview, recent activity, quick actions
+- [x] 25. Restyle `Devices.vue` — search + filter bar, data table, pagination
+- [x] 26. Restyle `DeviceDetail.vue` — back nav, sections (keys, settings, firewall, linked)
+- [x] 27. Restyle `Servers.vue` — card-based layout with status indicators
+- [x] 28. Restyle `TrafficHistory.vue` — filters, chart, data table, export
+- [x] 29. Restyle `Users.vue` — table with role badges, inline create form
+- [x] 30. Restyle `ShareConfig.vue` — public centered card, monospace config, copy/download
+- [x] 31. Replace all `alert()`/`confirm()` with NgToast/NgModal
+- [x] 32. Add loading skeletons to all pages
+- [x] 33. Integrate Iconify icons throughout (nav, buttons, status)
+
+### Phase 5: Polish
+
+- [x] 34. Add micro-interactions (hover, focus states) to all components
+- [x] 35. Add staggered list animations to tables and cards
+- [x] 36. Add empty states for all data lists
+- [x] 37. Add error states for failed loads
+
+### Phase 6: Documentation & Cleanup
+
+- [x] 38. Update `apps/dashboard-ui/AGENTS.md` with new architecture
+- [x] 39. Update root `README.md` with dashboard architecture section
+- [x] 40. Delete unused public assets (`public/icons.svg`)
+
+---
+
+## Final Verification Wave
+
+- [x] F1. **Build Verification** — `npm run build` passes with zero errors
+- [x] F2. **Lint Verification** — No TypeScript errors, no console warnings
+- [x] F3. **Visual QA** — All pages render correctly with new design system
+- [x] F4. **Responsive QA** — Mobile, tablet, desktop layouts work correctly
+
+---
+
+## Acceptance Criteria
+
+### Must Have
+- [x] Design tokens defined in `@theme` directive
+- [x] 14 shared components in `src/components/ui/`
+- [x] All 8 pages restyled with new components
+- [x] Page transitions working
+- [x] Responsive sidebar (mobile/tablet/desktop)
+- [x] Toast notifications replacing `alert()`
+- [x] Iconify icons integrated
+
+### Must NOT Have
+- [x] No `alert()` or `confirm()` calls
+- [x] No hardcoded colors in Vue SFCs (use design tokens)
+- [x] No `style.css` or `counter.ts` (deleted)
+- [x] No breaking changes to API modules or stores
+
+---
+
+## Evidence
+
+- [x] Build output shows zero errors
+- [x] All pages use Ng* components
+- [x] No raw Tailwind classes for colors (use tokens)
+- [x] Responsive layout tested at 375px, 768px, 1024px+

README.md

@@ -5,7 +5,7 @@ NexusGuard is an Enterprise Zero-Trust SD-WAN solution built with Go, Vue 3, and
 ## 🏗️ System Architecture
 This suite contains three main components:
 1. **[Server Core](http://git.datadunia.com/nexusguard/nexus-server-core)**: The central API and VPN Hub managing database state, token distribution, and Linux firewall isolation.
-2. **[Dashboard UI](http://git.datadunia.com/nexusguard/nexus-dashboard-ui)**: The Admin Web GUI for managing Nodes, Users, Devices, and Firewall rules.
+2. **[Dashboard UI](http://git.datadunia.com/nexusguard/nexus-dashboard-ui)**: The Admin Web GUI for managing Nodes, Users, Devices, and Firewall rules. Features a futuristic glassmorphism design system using Vue 3, Vite, TailwindCSS v4, and HeadlessUI.
 3. **[Device Agent](http://git.datadunia.com/nexusguard/nexus-device-agent)**: A stealth background daemon for Linux client machines that establishes memory-injected WireGuard tunnels.
 
 ---
@@ -239,3 +239,4 @@ NexusGuard/
 ├── .env.example            # Environment template
 └── Makefile                # Quick commands
 ```
+