Initial commit - agent-ui project

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-13 03:10:06 -06:00
commit 52c93930e1
37 changed files with 9040 additions and 0 deletions
--- a/frontend/src/components/Toolbar.vue
+++ b/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>