refactor: Unify sync server and combine torch with connection UI

- Consolidate git and torch WebSocket servers on port 4105 - Create separate handlers for git and torch in handlers/ directory - Combine TorchButton with connection status into single pill button - Remove StatusBar (now redundant with TorchButton) - Remove auto-assign torch on register/disconnect - Remove auto-connect to MCP on page load - Connection only happens when user explicitly requests torch
2026-02-14 17:13:32 -06:00
parent c98f3e2b99
commit 0f73bd60bf
13 changed files with 519 additions and 434 deletions
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, watch } from 'vue'
 import { RouterView, useRoute, useRouter } from 'vue-router'
-import StatusBar from './components/StatusBar.vue'
 import Toolbar from './components/Toolbar.vue'
 import TorchButton from './components/TorchButton.vue'
 import FloatingTerminal from './components/FloatingTerminal.vue'
@@ -348,7 +347,6 @@ watch(() => route.name, (newPage) => {
    <header class="app-header">
      <div class="header-left">
        <h1 class="logo">Agent UI</h1>
-        <TorchButton />
        <button class="debug-btn" :class="{ active: showDebugConsole }" @click="showDebugConsole = !showDebugConsole" title="Debug Console">
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>
@@ -357,13 +355,15 @@ watch(() => route.name, (newPage) => {
        </button>
        <PwaInstallBanner />
      </div>
-      <button class="refresh-btn" @click="hardRefresh" title="Hard refresh (Ctrl+F5)">
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/>
-          <path d="M21 3v5h-5"/>
-        </svg>
-      </button>
-      <StatusBar />
+      <div class="header-right">
+        <button class="refresh-btn" @click="hardRefresh" title="Hard refresh (Ctrl+F5)">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/>
+            <path d="M21 3v5h-5"/>
+          </svg>
+        </button>
+        <TorchButton />
+      </div>
    </header>
    <main class="app-main">
      <Toolbar />
@@ -545,6 +545,12 @@ watch(() => route.name, (newPage) => {
  gap: 1.5rem;
 }

+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
 .logo {
  font-size: 1.25rem;
  font-weight: 600;
--- a/frontend/src/components/TorchButton.vue
+++ b/frontend/src/components/TorchButton.vue
@@ -1,8 +1,46 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { useTorchStore } from '../stores/torch'
+import { useCanvasStore } from '../stores/canvas'
 import { requestTorch, releaseTorch } from '../services/torch'

 const torchStore = useTorchStore()
+const canvasStore = useCanvasStore()
+
+// Combined state
+const hasTorch = computed(() => torchStore.hasTorch)
+const isConnected = computed(() => canvasStore.isConnected)
+const isReconnecting = computed(() => canvasStore.isReconnecting)
+
+// Visual states:
+// - No torch: gray, "Sin control"
+// - Has torch, reconnecting: orange pulse, "Conectando..."
+// - Has torch, not connected: orange, "Conectando..."
+// - Has torch, connected: green glow, "Conectado"
+const buttonState = computed(() => {
+  if (!hasTorch.value) return 'no-torch'
+  if (isReconnecting.value) return 'reconnecting'
+  if (isConnected.value) return 'connected'
+  return 'has-torch'
+})
+
+const statusText = computed(() => {
+  if (!hasTorch.value) return 'Sin control'
+  if (isReconnecting.value) return 'Conectando...'
+  if (isConnected.value) return 'Conectado'
+  return 'Conectando...'
+})
+
+const tooltipText = computed(() => {
+  if (!hasTorch.value) {
+    return torchStore.torchHolderId
+      ? 'Otro browser tiene el control - click para solicitar'
+      : 'Click para solicitar control MCP'
+  }
+  if (isReconnecting.value) return 'Reconectando al MCP...'
+  if (isConnected.value) return 'Conectado al MCP - click para liberar control'
+  return 'Tiene control, conectando al MCP...'
+})

 async function handleClick() {
  if (torchStore.hasTorch) {
@@ -16,20 +54,12 @@ async function handleClick() {
 <template>
  <button
    class="torch-btn"
-    :class="{
-      'has-torch': torchStore.hasTorch,
-      'torch-held': torchStore.torchHolderId && !torchStore.hasTorch,
-      'requesting': torchStore.isRequesting
-    }"
+    :class="[buttonState, { requesting: torchStore.isRequesting }]"
    @click="handleClick"
-    :title="torchStore.hasTorch ? 'You have the torch - click to release' : torchStore.torchHolderId ? 'Torch held by another client - click to request' : 'Click to request the torch'"
+    :title="tooltipText"
  >
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-      <!-- Torch/flame icon -->
-      <path d="M12 2c1 3 2.5 3.5 3.5 4.5A5 5 0 0 1 17 10a5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 1.5-3.5C9.5 5.5 11 5 12 2z"/>
-      <path d="M12 15v7"/>
-      <path d="M10 22h4"/>
-    </svg>
+    <span class="status-dot"></span>
+    <span class="status-text">{{ statusText }}</span>
    <span v-if="torchStore.isRequesting" class="requesting-indicator"></span>
  </button>
 </template>
@@ -38,45 +68,86 @@ async function handleClick() {
 .torch-btn {
  display: flex;
  align-items: center;
-  justify-content: center;
-  padding: 6px 10px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-color);
-  border-radius: 6px;
-  color: var(--text-secondary);
+  gap: 0.5rem;
+  padding: 0.375rem 0.75rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  border: none;
  cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all 0.3s ease;
  position: relative;
 }

-.torch-btn:hover {
-  background: var(--bg-tertiary);
-  color: var(--text-primary);
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  transition: all 0.3s ease;
 }

-/* Has the torch - golden glow */
+.status-text {
+  transition: all 0.3s ease;
+}
+
+/* No torch - gray/red, dimmed */
+.torch-btn.no-torch {
+  background: rgba(239, 68, 68, 0.1);
+  color: #ef4444;
+}
+
+.torch-btn.no-torch .status-dot {
+  background: #ef4444;
+}
+
+.torch-btn.no-torch:hover {
+  background: rgba(245, 158, 11, 0.15);
+  color: #f59e0b;
+}
+
+.torch-btn.no-torch:hover .status-dot {
+  background: #f59e0b;
+  box-shadow: 0 0 8px #f59e0b;
+}
+
+/* Has torch but connecting - orange pulse */
 .torch-btn.has-torch {
-  background: linear-gradient(135deg, #ff9500 0%, #ff6b00 100%);
-  border-color: #ff9500;
-  color: white;
-  box-shadow: 0 0 12px rgba(255, 149, 0, 0.5);
-  animation: torch-glow 2s ease-in-out infinite;
+  background: rgba(245, 158, 11, 0.15);
+  color: #f59e0b;
+  animation: status-pulse 2s ease-in-out infinite;
 }

-.torch-btn.has-torch:hover {
-  background: linear-gradient(135deg, #ffaa33 0%, #ff8533 100%);
+.torch-btn.has-torch .status-dot {
+  background: #f59e0b;
+  box-shadow: 0 0 8px #f59e0b;
+  animation: dot-pulse 1.5s ease-in-out infinite;
 }

-/* Torch held by another */
-.torch-btn.torch-held {
-  background: var(--bg-secondary);
-  border-color: #ff9500;
-  color: #ff9500;
-  opacity: 0.7;
+/* Reconnecting - orange with faster pulse */
+.torch-btn.reconnecting {
+  background: rgba(245, 158, 11, 0.15);
+  color: #f59e0b;
+  animation: status-pulse 1s ease-in-out infinite;
 }

-.torch-btn.torch-held:hover {
-  opacity: 1;
+.torch-btn.reconnecting .status-dot {
+  background: #f59e0b;
+  animation: dot-pulse 0.8s ease-in-out infinite;
+}
+
+/* Connected - green glow */
+.torch-btn.connected {
+  background: rgba(34, 197, 94, 0.1);
+  color: #22c55e;
+}
+
+.torch-btn.connected .status-dot {
+  background: #22c55e;
+  box-shadow: 0 0 8px #22c55e;
+}
+
+.torch-btn.connected:hover {
+  background: rgba(34, 197, 94, 0.2);
 }

 /* Requesting state */
@@ -90,27 +161,39 @@ async function handleClick() {
  right: -2px;
  width: 8px;
  height: 8px;
-  background: var(--accent-color);
+  background: #6366f1;
  border-radius: 50%;
-  animation: pulse 1s ease-in-out infinite;
+  animation: request-pulse 1s ease-in-out infinite;
 }

-@keyframes torch-glow {
+/* Animations */
+@keyframes status-pulse {
  0%, 100% {
-    box-shadow: 0 0 12px rgba(255, 149, 0, 0.5);
+    opacity: 1;
  }
  50% {
-    box-shadow: 0 0 20px rgba(255, 149, 0, 0.8);
+    opacity: 0.7;
  }
 }

-@keyframes pulse {
+@keyframes dot-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
-    transform: scale(1.2);
+    transform: scale(1.3);
+    opacity: 0.8;
+  }
+}
+
+@keyframes request-pulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.3);
    opacity: 0.7;
  }
 }
--- a/frontend/src/config/endpoints.ts
+++ b/frontend/src/config/endpoints.ts
@@ -50,8 +50,8 @@ export const endpoints = {
  // WebMCP HTTP API (for token requests)
  webmcpHttp: buildHttpUrl('/mcp', 4102),

-  // Torch WebSocket (multi-browser sync)
-  torch: buildWsUrl('/ws/torch', 4106),
+  // Torch WebSocket (multi-browser sync) - same port as git
+  torch: buildWsUrl('/ws/git', 4105),

  // API base URL (Vite proxy handles /api in dev)
  api: '/api'
--- a/frontend/src/services/torch.ts
+++ b/frontend/src/services/torch.ts
@@ -1,5 +1,5 @@
 import { useTorchStore } from '../stores/torch'
-import { getWebMCP, autoConnect } from './webmcp'
+import { autoConnect, disconnectWebMCP } from './webmcp'
 import { endpoints } from '../config/endpoints'

 let torchWs: WebSocket | null = null
@@ -71,9 +71,9 @@ async function handleMessage(data: any) {
      torchStore.setClientId(data.id)
      console.log(`[Torch] Registered as ${data.id}, hasTorch: ${data.hasTorch}`)

+      // Just update state, don't auto-connect - user must request torch explicitly
      if (data.hasTorch) {
        torchStore.setTorchState(data.id)
-        await connectToMCP()
      }
      break
    }
@@ -147,17 +147,6 @@ export async function releaseTorch(): Promise<boolean> {
 * Connect to MCP (when we have the torch)
 */
 async function connectToMCP(): Promise<void> {
-  const webmcp = getWebMCP()
-  if (!webmcp) {
-    console.error('[Torch] WebMCP not initialized')
-    return
-  }
-
-  if (webmcp.isConnected) {
-    console.log('[Torch] Already connected to MCP')
-    return
-  }
-
  console.log('[Torch] Connecting to MCP...')
  const success = await autoConnect()
  if (success) {
@@ -171,13 +160,8 @@ async function connectToMCP(): Promise<void> {
 * Disconnect from MCP (when we lose the torch)
 */
 function disconnectFromMCP(): void {
-  const webmcp = getWebMCP()
-  if (!webmcp) return
-
-  if (webmcp.isConnected && typeof webmcp.disconnect === 'function') {
-    console.log('[Torch] Disconnecting from MCP...')
-    webmcp.disconnect()
-  }
+  console.log('[Torch] Disconnecting from MCP...')
+  disconnectWebMCP()
 }

 /**
--- a/frontend/src/services/webmcp.ts
+++ b/frontend/src/services/webmcp.ts
@@ -195,6 +195,34 @@ export function clearAllTools() {
  registeredTools.clear()
 }

+/**
+ * Disconnect from WebMCP without destroying the instance
+ * Used when losing the torch to another browser
+ */
+export function disconnectWebMCP(): void {
+  if (!webmcpInstance) {
+    console.warn('[WebMCP] Instance not initialized')
+    return
+  }
+
+  if (!webmcpInstance.isConnected) {
+    console.log('[WebMCP] Already disconnected')
+    return
+  }
+
+  if (typeof webmcpInstance.disconnect === 'function') {
+    console.log('[WebMCP] Disconnecting...')
+    webmcpInstance.disconnect()
+
+    // Update store immediately (event handler will also fire)
+    const canvasStore = useCanvasStore()
+    canvasStore.setConnected(false)
+    canvasStore.setConnectionInfo(null)
+  } else {
+    console.warn('[WebMCP] disconnect method not available')
+  }
+}
+
 export function destroyWebMCP() {
  // Unsubscribe all event handlers
  for (const unsub of eventUnsubscribers) {