feat: implement three-mode UI system (Easy / Pro / Chat)

Add switchable UI modes with conditional rendering:
- Easy mode: goal-based interface with 7 guided workflows
- Pro mode: current technical interface preserved with Quick Start Goals
- Chat mode: AIUI placeholder for future integration

New components: ModeSwitcher, EasyHome, GoalDetail wizard, Chat placeholder
New stores: uiMode (mode persistence), goals (progress tracking)
New data: goal definitions catalog, helpTree goals section
Modified: Dashboard (reactive nav), Home (mode dispatcher), Settings (mode picker),
Router (goal/chat routes), Spotlight (goal search integration)

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

neode-ui/src/stores/goals.ts

@@ -0,0 +1,105 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import type { GoalProgress, GoalStatus } from '@/types/goals'
+import { GOALS } from '@/data/goals'
+import { useAppStore } from './app'
+
+const STORAGE_KEY = 'archipelago-goal-progress'
+
+export const useGoalStore = defineStore('goals', () => {
+  const progress = ref<Record<string, GoalProgress>>({})
+
+  function load() {
+    try {
+      const raw = localStorage.getItem(STORAGE_KEY)
+      if (raw) progress.value = JSON.parse(raw)
+    } catch {
+      /* ignore corrupt data */
+    }
+  }
+
+  function save() {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(progress.value))
+  }
+
+  function getGoalStatus(goalId: string): GoalStatus {
+    const goal = GOALS.find((g) => g.id === goalId)
+    if (!goal) return 'not-started'
+
+    // Goals with no required apps use manual progress tracking
+    if (goal.requiredApps.length === 0) {
+      return progress.value[goalId]?.status || 'not-started'
+    }
+
+    const appStore = useAppStore()
+    const packages = appStore.packages
+
+    const allRunning = goal.requiredApps.every((appId) =>
+      Object.entries(packages).some(
+        ([pkgId, pkg]) => pkgId === appId && pkg.state === 'running',
+      ),
+    )
+    if (allRunning) return 'completed'
+
+    const anyInstalled = goal.requiredApps.some((appId) =>
+      Object.keys(packages).some((pkgId) => pkgId === appId),
+    )
+    if (anyInstalled || progress.value[goalId]) return 'in-progress'
+
+    return 'not-started'
+  }
+
+  const goalStatuses = computed(() => {
+    const statuses: Record<string, GoalStatus> = {}
+    for (const goal of GOALS) {
+      statuses[goal.id] = getGoalStatus(goal.id)
+    }
+    return statuses
+  })
+
+  function startGoal(goalId: string) {
+    progress.value[goalId] = {
+      goalId,
+      status: 'in-progress',
+      currentStepIndex: 0,
+      completedSteps: [],
+      startedAt: Date.now(),
+    }
+    save()
+  }
+
+  function completeStep(goalId: string, stepId: string) {
+    const p = progress.value[goalId]
+    if (!p) return
+
+    if (!p.completedSteps.includes(stepId)) {
+      p.completedSteps.push(stepId)
+    }
+
+    const goal = GOALS.find((g) => g.id === goalId)
+    if (goal && p.completedSteps.length >= goal.steps.length) {
+      p.status = 'completed'
+    } else {
+      p.currentStepIndex = Math.min(p.currentStepIndex + 1, (goal?.steps.length ?? 1) - 1)
+    }
+
+    save()
+  }
+
+  function resetGoal(goalId: string) {
+    delete progress.value[goalId]
+    save()
+  }
+
+  // Load on store creation
+  load()
+
+  return {
+    progress,
+    goalStatuses,
+    getGoalStatus,
+    startGoal,
+    completeStep,
+    resetGoal,
+  }
+})

neode-ui/src/stores/spotlight.ts

@@ -9,7 +9,7 @@ export interface RecentItem {
   id: string
   label: string
   path?: string
-  type: 'navigate' | 'learn' | 'action'
+  type: 'navigate' | 'learn' | 'action' | 'goal'
   timestamp: number
 }
 

neode-ui/src/stores/uiMode.ts

@@ -0,0 +1,33 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import type { UIMode } from '@/types/api'
+
+const STORAGE_KEY = 'archipelago-ui-mode'
+
+export const useUIModeStore = defineStore('uiMode', () => {
+  const mode = ref<UIMode>(loadFromStorage())
+
+  function loadFromStorage(): UIMode {
+    const stored = localStorage.getItem(STORAGE_KEY)
+    if (stored === 'gamer' || stored === 'easy' || stored === 'chat') return stored
+    return 'gamer'
+  }
+
+  function syncFromBackend(backendMode: UIMode | undefined) {
+    if (backendMode && ['gamer', 'easy', 'chat'].includes(backendMode)) {
+      mode.value = backendMode
+      localStorage.setItem(STORAGE_KEY, backendMode)
+    }
+  }
+
+  function setMode(newMode: UIMode) {
+    mode.value = newMode
+    localStorage.setItem(STORAGE_KEY, newMode)
+  }
+
+  const isGamer = computed(() => mode.value === 'gamer')
+  const isEasy = computed(() => mode.value === 'easy')
+  const isChat = computed(() => mode.value === 'chat')
+
+  return { mode, setMode, syncFromBackend, isGamer, isEasy, isChat }
+})