feat: add Workflows and Agents tabs to Electron vanilla JS build

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/AgentStudio.js

@@ -0,0 +1,24 @@
+export function AgentStudio() {
+    const container = document.createElement('div');
+    container.className = 'w-full h-full flex flex-col items-center justify-center bg-app-bg text-white gap-4';
+
+    const icon = document.createElement('div');
+    icon.innerHTML = `<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" opacity="0.4">
+        <path d="M12 2a4 4 0 0 1 4 4 4 4 0 0 1-4 4 4 4 0 0 1-4-4 4 4 0 0 1 4-4"/>
+        <path d="M8 14a6 6 0 0 0-6 6h20a6 6 0 0 0-6-6H8z"/>
+        <path d="M9 9h.01M15 9h.01"/>
+    </svg>`;
+
+    const title = document.createElement('p');
+    title.textContent = 'Agent Studio';
+    title.className = 'text-lg font-bold opacity-60';
+
+    const sub = document.createElement('p');
+    sub.textContent = 'Available in the web app at open-generative-ai.com';
+    sub.className = 'text-sm opacity-40';
+
+    container.appendChild(icon);
+    container.appendChild(title);
+    container.appendChild(sub);
+    return container;
+}

src/components/Header.js

@@ -27,7 +27,7 @@ export function Header(navigate) {
 
     const menu = document.createElement('nav');
     menu.className = 'hidden lg:flex items-center gap-6 text-[13px] font-bold text-secondary';
-    const items = ['Image', 'Video', 'Lip Sync', 'Cinema Studio'];
+    const items = ['Image', 'Video', 'Lip Sync', 'Cinema Studio', 'Workflows', 'Agents'];
 
     items.forEach(item => {
         const link = document.createElement('a');
@@ -51,6 +51,8 @@ export function Header(navigate) {
             else if (item === 'Video') navigate('video');
             else if (item === 'Lip Sync') navigate('lipsync');
             else if (item === 'Cinema Studio') navigate('cinema');
+            else if (item === 'Workflows') navigate('workflows');
+            else if (item === 'Agents') navigate('agents');
         };
 
         menu.appendChild(link);

src/components/WorkflowStudio.js

@@ -0,0 +1,24 @@
+export function WorkflowStudio() {
+    const container = document.createElement('div');
+    container.className = 'w-full h-full flex flex-col items-center justify-center bg-app-bg text-white gap-4';
+
+    const icon = document.createElement('div');
+    icon.innerHTML = `<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" opacity="0.4">
+        <rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/>
+        <rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/>
+        <path d="M6.5 10v4M17.5 10v4M10 6.5h4M10 17.5h4"/>
+    </svg>`;
+
+    const title = document.createElement('p');
+    title.textContent = 'Workflow Studio';
+    title.className = 'text-lg font-bold opacity-60';
+
+    const sub = document.createElement('p');
+    sub.textContent = 'Available in the web app at open-generative-ai.com';
+    sub.className = 'text-sm opacity-40';
+
+    container.appendChild(icon);
+    container.appendChild(title);
+    container.appendChild(sub);
+    return container;
+}

src/main.js

@@ -24,6 +24,14 @@ function navigate(page) {
     import('./components/LipSyncStudio.js').then(({ LipSyncStudio }) => {
       contentArea.appendChild(LipSyncStudio());
     });
+  } else if (page === 'workflows') {
+    import('./components/WorkflowStudio.js').then(({ WorkflowStudio }) => {
+      contentArea.appendChild(WorkflowStudio());
+    });
+  } else if (page === 'agents') {
+    import('./components/AgentStudio.js').then(({ AgentStudio }) => {
+      contentArea.appendChild(AgentStudio());
+    });
   }
 }