Initial commit - agent-ui project

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

frontend/src/App.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import Canvas from './components/Canvas.vue'
+import StatusBar from './components/StatusBar.vue'
+import Toolbar from './components/Toolbar.vue'
+</script>
+
+<template>
+  <div class="app-container">
+    <header class="app-header">
+      <h1>Agent UI</h1>
+      <StatusBar />
+    </header>
+    <main class="app-main">
+      <Toolbar />
+      <Canvas />
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.app-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: var(--bg-primary);
+}
+
+.app-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1.5rem;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.app-header h1 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.app-main {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+</style>

frontend/src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

frontend/src/components/Canvas.vue

@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useCanvasStore } from '../stores/canvas'
+
+const canvasStore = useCanvasStore()
+
+onMounted(async () => {
+  // Importar webmcp - esto crea el widget automáticamente
+  const WebMCPModule = await import('@nucleoriofrio/webmcp/src/webmcp.js')
+  const WebMCP = WebMCPModule.default || WebMCPModule
+
+  const webmcp = new WebMCP({
+    color: '#6366f1',
+    position: 'bottom-right',
+    inactivityTimeout: 60 * 60 * 1000 // 1 hora
+  })
+
+  // Registrar herramientas para el canvas
+  registerCanvasTools(webmcp)
+
+  // Exponer webmcp globalmente para debug
+  ;(window as any).webmcp = webmcp
+})
+
+function registerCanvasTools(mcp: any) {
+  // render_html: Renderiza HTML en el canvas con soporte para scripts inline
+  mcp.registerTool(
+    'render_html',
+    'Renderiza HTML en el canvas. Soporta <script> tags que se ejecutan automáticamente y <style> tags.',
+    {
+      type: 'object',
+      properties: {
+        html: {
+          type: 'string',
+          description: 'El código HTML a renderizar (puede incluir <script> y <style> tags)'
+        },
+        mode: {
+          type: 'string',
+          enum: ['replace', 'append', 'prepend'],
+          description: 'Modo: replace (reemplaza), append (agrega al final), prepend (al inicio)'
+        }
+      },
+      required: ['html']
+    },
+    (args: { html: string; mode?: string }) => {
+      const container = document.getElementById('canvas-content')
+      if (!container) return 'Error: canvas no encontrado'
+
+      // Quitar placeholder si existe
+      const placeholder = container.querySelector('.canvas-placeholder')
+      if (placeholder) placeholder.remove()
+
+      const mode = args.mode || 'replace'
+      if (mode === 'replace') {
+        container.innerHTML = args.html
+      } else if (mode === 'append') {
+        container.insertAdjacentHTML('beforeend', args.html)
+      } else if (mode === 'prepend') {
+        container.insertAdjacentHTML('afterbegin', args.html)
+      }
+
+      // Ejecutar scripts inline
+      const scripts = container.querySelectorAll('script')
+      scripts.forEach((oldScript) => {
+        const newScript = document.createElement('script')
+        Array.from(oldScript.attributes).forEach(attr => {
+          newScript.setAttribute(attr.name, attr.value)
+        })
+        newScript.textContent = oldScript.textContent
+        oldScript.parentNode?.replaceChild(newScript, oldScript)
+      })
+
+      canvasStore.addToHistory({ tool: 'render_html', args, timestamp: Date.now() })
+      return 'HTML renderizado'
+    }
+  )
+}
+</script>
+
+<template>
+  <div class="canvas-container">
+    <div id="canvas-content" class="canvas-content">
+      <div class="canvas-placeholder">
+        <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+          <rect x="3" y="3" width="18" height="18" rx="2"/>
+          <path d="M3 9h18"/>
+          <path d="M9 21V9"/>
+        </svg>
+        <p>Canvas listo</p>
+        <span>Haz clic en el cuadrado azul (abajo derecha) para conectar con Claude Code</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.canvas-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-primary);
+  overflow: auto;
+}
+
+.canvas-content {
+  flex: 1;
+  padding: 1.5rem;
+  min-height: 100%;
+}
+
+.canvas-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 400px;
+  color: var(--text-muted);
+  text-align: center;
+}
+
+.canvas-placeholder svg {
+  margin-bottom: 1rem;
+  opacity: 0.5;
+}
+
+.canvas-placeholder p {
+  font-size: 1.25rem;
+  margin: 0 0 0.5rem 0;
+}
+
+.canvas-placeholder span {
+  font-size: 0.875rem;
+  opacity: 0.7;
+}
+</style>

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>

frontend/src/components/Toolbar.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { useCanvasStore } from '../stores/canvas'
+
+const canvasStore = useCanvasStore()
+
+function clearCanvas() {
+  const container = document.getElementById('canvas-content')
+  if (container) {
+    container.innerHTML = `
+      <div class="canvas-placeholder">
+        <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+          <rect x="3" y="3" width="18" height="18" rx="2"/>
+          <path d="M3 9h18"/>
+          <path d="M9 21V9"/>
+        </svg>
+        <p>Canvas listo</p>
+        <span>Claude Code puede renderizar contenido aquí usando las herramientas MCP</span>
+      </div>
+    `
+  }
+}
+
+function toggleHistory() {
+  canvasStore.toggleHistoryPanel()
+}
+</script>
+
+<template>
+  <aside class="toolbar">
+    <div class="toolbar-section">
+      <button class="toolbar-btn" @click="clearCanvas" title="Limpiar canvas">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M3 6h18"/>
+          <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/>
+          <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/>
+        </svg>
+      </button>
+
+      <button class="toolbar-btn" @click="toggleHistory" title="Historial">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M12 8v4l3 3"/>
+          <circle cx="12" cy="12" r="10"/>
+        </svg>
+      </button>
+    </div>
+  </aside>
+</template>
+
+<style scoped>
+.toolbar {
+  width: 56px;
+  background: var(--bg-secondary);
+  border-right: 1px solid var(--border-color);
+  padding: 0.75rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.toolbar-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.toolbar-btn {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  border-radius: 8px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.toolbar-btn:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.toolbar-btn:active {
+  transform: scale(0.95);
+}
+</style>

frontend/src/main.ts

@@ -0,0 +1,8 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import App from './App.vue'
+import './styles/main.css'
+
+const app = createApp(App)
+app.use(createPinia())
+app.mount('#app')

frontend/src/stores/canvas.ts

@@ -0,0 +1,74 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+interface HistoryEntry {
+  tool: string
+  args: any
+  timestamp: number
+}
+
+interface Notification {
+  id: number
+  message: string
+  type: string
+  duration: number
+}
+
+export const useCanvasStore = defineStore('canvas', () => {
+  const isConnected = ref(false)
+  const history = ref<HistoryEntry[]>([])
+  const notifications = ref<Notification[]>([])
+  const showHistoryPanel = ref(false)
+
+  let notificationId = 0
+
+  function setConnected(connected: boolean) {
+    isConnected.value = connected
+  }
+
+  function addToHistory(entry: HistoryEntry) {
+    history.value.unshift(entry)
+    // Mantener solo las últimas 100 entradas
+    if (history.value.length > 100) {
+      history.value = history.value.slice(0, 100)
+    }
+  }
+
+  function clearHistory() {
+    history.value = []
+  }
+
+  function showNotification(message: string, type: string = 'info', duration: number = 3000) {
+    const id = ++notificationId
+    const notification: Notification = { id, message, type, duration }
+    notifications.value.push(notification)
+
+    setTimeout(() => {
+      removeNotification(id)
+    }, duration)
+  }
+
+  function removeNotification(id: number) {
+    const index = notifications.value.findIndex(n => n.id === id)
+    if (index !== -1) {
+      notifications.value.splice(index, 1)
+    }
+  }
+
+  function toggleHistoryPanel() {
+    showHistoryPanel.value = !showHistoryPanel.value
+  }
+
+  return {
+    isConnected,
+    history,
+    notifications,
+    showHistoryPanel,
+    setConnected,
+    addToHistory,
+    clearHistory,
+    showNotification,
+    removeNotification,
+    toggleHistoryPanel
+  }
+})

frontend/src/styles/main.css

@@ -0,0 +1,205 @@
+:root {
+  --bg-primary: #0f0f14;
+  --bg-secondary: #16161d;
+  --bg-hover: #1e1e28;
+  --border-color: #2a2a3a;
+  --text-primary: #e4e4e7;
+  --text-secondary: #a1a1aa;
+  --text-muted: #52525b;
+  --accent: #6366f1;
+  --accent-hover: #818cf8;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body {
+  height: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+#app {
+  height: 100%;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--bg-primary);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--border-color);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--text-muted);
+}
+
+/* Canvas content styling - elementos renderizados por Claude */
+#canvas-content {
+  color: var(--text-primary);
+}
+
+#canvas-content h1,
+#canvas-content h2,
+#canvas-content h3,
+#canvas-content h4,
+#canvas-content h5,
+#canvas-content h6 {
+  color: var(--text-primary);
+  margin-bottom: 0.5em;
+}
+
+#canvas-content p {
+  margin-bottom: 1em;
+  line-height: 1.6;
+}
+
+#canvas-content a {
+  color: var(--accent);
+  text-decoration: none;
+}
+
+#canvas-content a:hover {
+  text-decoration: underline;
+}
+
+#canvas-content code {
+  background: var(--bg-secondary);
+  padding: 0.2em 0.4em;
+  border-radius: 4px;
+  font-family: 'Fira Code', 'Consolas', monospace;
+  font-size: 0.9em;
+}
+
+#canvas-content pre {
+  background: var(--bg-secondary);
+  padding: 1em;
+  border-radius: 8px;
+  overflow-x: auto;
+  margin: 1em 0;
+}
+
+#canvas-content pre code {
+  background: none;
+  padding: 0;
+}
+
+#canvas-content table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1em 0;
+}
+
+#canvas-content th,
+#canvas-content td {
+  padding: 0.75em;
+  border: 1px solid var(--border-color);
+  text-align: left;
+}
+
+#canvas-content th {
+  background: var(--bg-secondary);
+  font-weight: 600;
+}
+
+#canvas-content img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+}
+
+#canvas-content button {
+  background: var(--accent);
+  color: white;
+  border: none;
+  padding: 0.5em 1em;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 1em;
+  transition: background 0.15s ease;
+}
+
+#canvas-content button:hover {
+  background: var(--accent-hover);
+}
+
+#canvas-content input,
+#canvas-content textarea,
+#canvas-content select {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  color: var(--text-primary);
+  padding: 0.5em 0.75em;
+  border-radius: 6px;
+  font-size: 1em;
+}
+
+#canvas-content input:focus,
+#canvas-content textarea:focus,
+#canvas-content select:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+/* Notifications */
+.notifications-container {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.notification {
+  padding: 0.75rem 1rem;
+  border-radius: 8px;
+  font-size: 0.875rem;
+  animation: slideIn 0.2s ease;
+}
+
+.notification.info {
+  background: rgba(99, 102, 241, 0.9);
+  color: white;
+}
+
+.notification.success {
+  background: rgba(34, 197, 94, 0.9);
+  color: white;
+}
+
+.notification.warning {
+  background: rgba(234, 179, 8, 0.9);
+  color: black;
+}
+
+.notification.error {
+  background: rgba(239, 68, 68, 0.9);
+  color: white;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}