feat: Add theme system with visual editor

- Backend: themes table and API endpoints (CRUD, export, design-tokens)
- Theme store with preview, apply, and persistence
- ThemesPage with collapsible variables editor and live preview
- Components: ColorPicker (HSL), VariableEditor, ThemePreview, ThemeListItem
- Integration: $theme helper for dynamic components, get_design_tokens MCP tool
- Navigation: /themes route with palette icon in toolbar

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

frontend/src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Canvas from './components/Canvas.vue'
+import { RouterView } from 'vue-router'
 import StatusBar from './components/StatusBar.vue'
 import Toolbar from './components/Toolbar.vue'
 import ComponentsDropdown from './components/ComponentsDropdown.vue'
@@ -9,14 +9,18 @@ import ComponentsDropdown from './components/ComponentsDropdown.vue'
   <div class="app-container">
     <header class="app-header">
       <div class="header-left">
-        <h1>Agent UI</h1>
+        <h1 class="logo">Agent UI</h1>
         <ComponentsDropdown />
       </div>
       <StatusBar />
     </header>
     <main class="app-main">
       <Toolbar />
-      <Canvas />
+      <RouterView v-slot="{ Component }">
+        <Transition name="page" mode="out-in">
+          <component :is="Component" />
+        </Transition>
+      </RouterView>
     </main>
   </div>
 </template>
@@ -44,7 +48,7 @@ import ComponentsDropdown from './components/ComponentsDropdown.vue'
   gap: 1.5rem;
 }
 
-.app-header h1 {
+.logo {
   font-size: 1.25rem;
   font-weight: 600;
   color: var(--text-primary);
@@ -56,4 +60,20 @@ import ComponentsDropdown from './components/ComponentsDropdown.vue'
   flex: 1;
   overflow: hidden;
 }
+
+/* Page transitions */
+.page-enter-active,
+.page-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.page-enter-from {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+.page-leave-to {
+  opacity: 0;
+  transform: translateX(-20px);
+}
 </style>