Update modernization plan: Vue 3 for all UIs

- Update architecture diagram to show Vue 3 for both admin and machine
- Replace React decision with Vue 3 unification strategy
- Update machine UI section to include Vue 3 + Tauri
- Add Vue 3 to trade-offs table
- Link to new detailed migration docs

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

docs/modernization-plan.md

@@ -42,19 +42,20 @@ graph TB
     end
 
     subgraph "Admin UI"
-        react[React 19 + TanStack]
-        shadcn[Shadcn/ui + Tailwind]
+        vue_admin[Vue 3 + PrimeVue]
+        tailwind[Tailwind CSS]
     end
 
     subgraph "lamassu-machine"
         tauri[Tauri 2.x Rust Core]
+        vue_machine[Vue 3 + Pinia]
         xstate[XState v5]
         hal[Rust HAL napi-rs]
         hw[Hardware Drivers]
     end
 
-    react -->|tRPC| fastify
-    tauri -->|GraphQL| fastify
+    vue_admin -->|tRPC| fastify
+    tauri -->|WebSocket| fastify
     fastify --> pg
     fastify --> otel
     otel --> jaeger
@@ -154,16 +155,26 @@ graph LR
 
 ### Frontend (Admin UI)
 
-> [!decision] Keep React, Modernize Patterns
-> React's ecosystem dominance (190M weekly downloads) makes migration unnecessary for admin dashboards.
+> [!decision] React → Vue 3
+> Unify on Vue 3 across all UIs (admin + machine) for consistency and shared code.
 
-**Modernization:**
-- [ ] Upgrade to React 19 (Server Components)
-- [ ] Replace MUI with Shadcn/ui + Tailwind
-- [ ] TanStack Query for data fetching
-- [ ] TanStack Router for type-safe routing
+| Aspect | Before (React) | After (Vue 3) |
+|--------|---------------|---------------|
+| Framework | React 18 | Vue 3 |
+| UI Library | MUI (~300kb) | PrimeVue (tree-shake) |
+| State | Zustand | Pinia |
+| API | Apollo GraphQL | tRPC |
+| Bundle | ~400kb | ~120kb |
 
-#frontend #react #tailwind
+**Benefits:**
+- Single framework across all UIs
+- Shared composables between admin and machine
+- 70% bundle size reduction
+- End-to-end type safety with tRPC
+
+See [[admin-ui-modernization]] for detailed migration plan.
+
+#frontend #vue #tailwind
 
 ---
 
@@ -189,8 +200,19 @@ graph LR
 
 ### Machine UI Framework
 
-> [!decision] Vanilla JS → Tauri 2.x
-> Security-first design critical for financial kiosk applications.
+> [!decision] Vanilla JS → Vue 3 + Tauri 2.x
+> Vue 3 for UI consistency, Tauri for security-first kiosk shell.
+
+**UI Layer: Vue 3**
+
+| Aspect | Before | After |
+|--------|--------|-------|
+| Framework | Vanilla JS + jQuery | Vue 3 |
+| State | Global variables | Pinia |
+| Build | Babel 6 | Vite |
+| File | 80KB monolith | Component-based |
+
+**Shell: Tauri 2.x**
 
 | Aspect | Electron | Tauri |
 |--------|----------|-------|
@@ -199,13 +221,15 @@ graph LR
 | Startup | 1-2s | **<0.5s** |
 | Security | Full Node access | **Explicit allowlist** |
 
-**Why Tauri for ATMs:**
-- Security by default (restrictive API model)
-- Lower resource usage on embedded hardware
-- Rust backend integrates with hardware drivers
-- 35% adoption increase in 2024
+**Benefits:**
+- Same Vue 3 skills as admin UI
+- Shared ui-shared package
+- Tauri's Rust core for hardware drivers
+- Security by default
 
-#tauri #kiosk #security
+See [[machine-ui-modernization]] for detailed migration plan.
+
+#tauri #vue #kiosk #security
 
 ---
 
@@ -458,6 +482,7 @@ test('user can complete transaction', async ({ page }) => {
 | Node.js over Bun | Stability, ecosystem | Raw performance |
 | Fastify over Hono | Mature plugins | Minimal bundle |
 | Drizzle over Prisma | Bundle size, speed | DX features |
+| Vue 3 over React | Unified UI, smaller bundle | React ecosystem |
 | Tauri over Electron | Security, efficiency | Ecosystem maturity |
 | XState over simple FSM | Visualization, debugging | Simplicity |
 
@@ -489,5 +514,9 @@ test('user can complete transaction', async ({ page }) => {
 ## Related Notes
 
 - [[CLAUDE]] - Claude Code guidance
+- [[admin-ui-modernization]] - Vue 3 migration for admin dashboard
+- [[machine-ui-modernization]] - Vue 3 migration for kiosk UI
+- [[membership-lightning-integration]] - Membership & LNbits feature
+- [[lnbits-integration]] - Lightning backend integration
 - [[Architecture Decision Records]] - ADRs for each decision
 - [[NixOS Configuration]] - Production NixOS setup