From 8154bac63f8f146759bf5f2898490ea7cf1626c9 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Sun, 15 Feb 2026 02:05:47 -0600
Subject: [PATCH] feat: Add anonymous dynamic canvas option to gallery

---
 frontend/src/App.vue                      |  6 +++++-
 frontend/src/components/Canvas.vue        |  9 ++++++++-
 frontend/src/components/CanvasGallery.vue | 14 ++++++++++++++
 frontend/src/stores/canvas.ts             |  3 +++
 4 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 3a081e0..cff4239 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -240,7 +240,7 @@ function triggerToolFlash() {
   }, 500)
 }
 
-type PageName = 'home' | 'canvas' | 'components' | 'themes' | 'project-canvas' | 'database' | 'source' | 'terminal' | 'tools'
+type PageName = 'home' | 'canvas' | 'components' | 'themes' | 'project-canvas' | 'database' | 'source' | 'terminal' | 'tools' | 'agents'
 
 onMounted(async () => {
   // Connect to WebSocket for Claude status updates
@@ -357,6 +357,10 @@ watch(() => route.name, (newPage) => {
           <span class="header-canvas-name">{{ projectCanvasStore.activeCanvas.name }}</span>
           <span v-if="projectCanvasStore.activeCanvas.is_system" class="header-canvas-badge">Sistema</span>
         </template>
+        <template v-if="canvasStore.isAnonymousCanvas && route.name === 'canvas'">
+          <span class="header-sep">/</span>
+          <span class="header-canvas-name">anonimo</span>
+        </template>
         <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"/>
diff --git a/frontend/src/components/Canvas.vue b/frontend/src/components/Canvas.vue
index c0e3547..2295844 100644
--- a/frontend/src/components/Canvas.vue
+++ b/frontend/src/components/Canvas.vue
@@ -39,10 +39,17 @@ function handleLoadComponent(e: Event) {
 
 function handleContentRendered() {
   showGallery.value = false
+  canvasStore.isAnonymousCanvas = false
+}
+
+function handleStartAnonymous() {
+  showGallery.value = false
+  canvasStore.isAnonymousCanvas = true
 }
 
 function handleClearCanvas() {
   showGallery.value = true
+  canvasStore.isAnonymousCanvas = false
   const container = document.getElementById('canvas-content')
   if (container) {
     // Remove all non-gallery content
@@ -72,7 +79,7 @@ onUnmounted(() => {
   <div class="canvas-container">
     <div id="canvas-content" class="canvas-content">
       <div v-if="showGallery" class="canvas-placeholder">
-        <CanvasGallery @snapshot-restored="showGallery = false" @component-loaded="showGallery = false" />
+        <CanvasGallery @snapshot-restored="showGallery = false" @component-loaded="showGallery = false" @start-anonymous="handleStartAnonymous" />
       </div>
     </div>
   </div>
diff --git a/frontend/src/components/CanvasGallery.vue b/frontend/src/components/CanvasGallery.vue
index c631712..3340ce2 100644
--- a/frontend/src/components/CanvasGallery.vue
+++ b/frontend/src/components/CanvasGallery.vue
@@ -14,6 +14,7 @@ import { useCanvasStore } from '../stores/canvas'
 const emit = defineEmits<{
   (e: 'snapshot-restored'): void
   (e: 'component-loaded'): void
+  (e: 'start-anonymous'): void
 }>()
 
 const router = useRouter()
@@ -223,6 +224,19 @@ onMounted(() => {
     <template v-else>
       <!-- Project Canvases -->
       <div class="gallery-grid">
+        <!-- Anonymous dynamic canvas card -->
+        <div class="canvas-card new-card anon-card" @click="emit('start-anonymous')">
+          <div class="card-icon new-icon">
+            <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" 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"/>
+            </svg>
+          </div>
+          <div class="card-content">
+            <div class="card-name">Dynamic Canvas</div>
+          </div>
+        </div>
+
         <!-- New canvas card -->
         <div class="canvas-card new-card" @click="showNewForm = true" v-if="!showNewForm">
           <div class="card-icon new-icon">
diff --git a/frontend/src/stores/canvas.ts b/frontend/src/stores/canvas.ts
index 3a49cff..06bbbbc 100644
--- a/frontend/src/stores/canvas.ts
+++ b/frontend/src/stores/canvas.ts
@@ -35,6 +35,7 @@ export const useCanvasStore = defineStore('canvas', () => {
   const history = ref<HistoryEntry[]>([])
   const notifications = ref<Notification[]>([])
   const showHistoryPanel = ref(false)
+  const isAnonymousCanvas = ref(false)
 
   let notificationId = 0
 
@@ -111,6 +112,8 @@ export const useCanvasStore = defineStore('canvas', () => {
     connectionError,
     connectionInfo,
     statusColor,
+    // Canvas mode
+    isAnonymousCanvas,
     // History & UI
     history,
     notifications,