feat: Add terminal UI control tools for MCP

- Add 5 terminal tools: open, close, toggle, move, resize
- Create terminalHandlers.ts with UI control functions
- Add terminal category to toolDefinitions and toolRegistry
- Expose FloatingTerminal controls via defineExpose
- Connect controls in App.vue via setTerminalControls
- Fix ToolsDropdown missing terminal category

frontend/src/App.vue

@@ -10,11 +10,13 @@ import FloatingTerminal from './components/FloatingTerminal.vue'
 import PwaInstallBanner from './components/PwaInstallBanner.vue'
 import { initWebMCP, getWebMCP, startTokenPolling, stopTokenPolling, connectWithToken } from './services/webmcp'
 import { initToolRegistry, activatePageTools, initToolsOnRefresh } from './services/toolRegistry'
+import { setTerminalControls } from './services/tools/handlers/terminalHandlers'
 import { useCanvasStore } from './stores/canvas'
 
 const route = useRoute()
 const router = useRouter()
 const showTerminal = ref(false)
+const terminalRef = ref<InstanceType<typeof FloatingTerminal> | null>(null)
 const canvasStore = useCanvasStore()
 
 type PageName = 'home' | 'canvas' | 'components' | 'themes' | 'projects' | 'project-canvas' | 'database' | 'source' | 'terminal' | 'tools'
@@ -30,6 +32,43 @@ onMounted(async () => {
   const currentPage = (route.name as string) || 'canvas'
   initToolsOnRefresh(currentPage as PageName)
 
+  // Setup terminal controls for MCP tools
+  setTerminalControls({
+    open: (x?: number, y?: number) => {
+      if (terminalRef.value) {
+        terminalRef.value.open(x, y)
+      } else {
+        showTerminal.value = true
+      }
+    },
+    close: () => {
+      if (terminalRef.value) {
+        terminalRef.value.close()
+      } else {
+        showTerminal.value = false
+      }
+    },
+    toggle: () => {
+      if (terminalRef.value) {
+        terminalRef.value.toggle()
+      } else {
+        showTerminal.value = !showTerminal.value
+      }
+    },
+    move: (x: number, y: number) => {
+      terminalRef.value?.move(x, y)
+    },
+    resize: (w: number, h: number) => {
+      terminalRef.value?.resize(w, h)
+    },
+    getState: () => {
+      if (terminalRef.value) {
+        return terminalRef.value.getState()
+      }
+      return { isOpen: showTerminal.value, position: { x: 0, y: 0 }, size: { w: 580, h: 360 } }
+    }
+  })
+
   // Start polling for token if not connected
   const webmcp = getWebMCP()
   if (!webmcp?.isConnected) {
@@ -94,7 +133,7 @@ watch(() => route.name, (newPage) => {
     </button>
 
     <!-- Floating Terminal -->
-    <FloatingTerminal v-model="showTerminal" />
+    <FloatingTerminal ref="terminalRef" v-model="showTerminal" />
   </div>
 </template>