Initial commit - agent-ui project

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

frontend/src/components/StatusBar.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useCanvasStore } from '../stores/canvas'
+
+const canvasStore = useCanvasStore()
+
+const statusText = computed(() => {
+  return canvasStore.isConnected ? 'Conectado' : 'Desconectado'
+})
+
+const statusClass = computed(() => {
+  return canvasStore.isConnected ? 'connected' : 'disconnected'
+})
+</script>
+
+<template>
+  <div class="status-bar">
+    <div class="status-indicator" :class="statusClass">
+      <span class="status-dot"></span>
+      <span class="status-text">{{ statusText }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.status-bar {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.status-indicator {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 0.75rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.status-indicator.connected {
+  background: rgba(34, 197, 94, 0.1);
+  color: #22c55e;
+}
+
+.status-indicator.connected .status-dot {
+  background: #22c55e;
+  box-shadow: 0 0 8px #22c55e;
+}
+
+.status-indicator.disconnected {
+  background: rgba(239, 68, 68, 0.1);
+  color: #ef4444;
+}
+
+.status-indicator.disconnected .status-dot {
+  background: #ef4444;
+}
+</style>