refactor: Separate concerns and add components dropdown

- Add ComponentsDropdown.vue with save/load/delete functionality
- Create components store (Pinia) for state management
- Extract WebMCP initialization to services/webmcp.ts
- Extract MCP tools registration to services/canvasTools.ts
- Simplify Canvas.vue (~340 lines -> ~105 lines)
- Update App.vue header with components dropdown

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

frontend/src/App.vue

@@ -2,12 +2,16 @@
 import Canvas from './components/Canvas.vue'
 import StatusBar from './components/StatusBar.vue'
 import Toolbar from './components/Toolbar.vue'
+import ComponentsDropdown from './components/ComponentsDropdown.vue'
 </script>
 
 <template>
   <div class="app-container">
     <header class="app-header">
-      <h1>Agent UI</h1>
+      <div class="header-left">
+        <h1>Agent UI</h1>
+        <ComponentsDropdown />
+      </div>
       <StatusBar />
     </header>
     <main class="app-main">
@@ -34,6 +38,12 @@ import Toolbar from './components/Toolbar.vue'
   border-bottom: 1px solid var(--border-color);
 }
 
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+}
+
 .app-header h1 {
   font-size: 1.25rem;
   font-weight: 600;