Spaces:

saeidmp
/

agentflow-nexus

Running

App Files Files Community

saeidmp commited on Sep 30, 2025

Commit

3ed3ac5

verified ·

1 Parent(s): b394560

You are a master AI coding agent tasked with creating a stunning, elegant, smooth, and user-friendly front-end for a full-stack agent environment similar to Lovable. Your goal is to generate a fully functional MVP front-end using only HTML, CSS, and JavaScript, prioritizing a polished user experience, visual delight, and intuitive interactions.

Browse files

---

## Guidelines for the Agent

### File Structure

* `index.html` — contains the main layout, linking `styles.css` and `app.js`.
* `styles.css` — modern, clean, well-commented CSS, using Flexbox/Grid, CSS variables, and responsive design.
* `app.js` — modular, readable JS for handling UI interactions, mock backend logic, localStorage, and simulated responses.
* Optional `assets/` folder for icons, images, and placeholder media.

### Design Principles

1. **Visual Elegance:** Smooth transitions, rounded corners, soft shadows, modern typography, and harmonious color palette.
2. **Intuitive UI/UX:** Easy navigation, clear visual hierarchy, responsive layout (mobile-first), and accessible design (ARIA, keyboard navigation).
3. **Interactive Elements:** Chat panel, code editor panel (simple textarea), task manager panel, file preview mock, and status bar.
4. **Animations & Transitions:** Subtle hover/focus effects, smooth scrolling, and message fade-in animations.
5. **Responsive Design:** Adaptive sidebar, flexible content panels, works perfectly on <640px screens.

### Functional MVP Requirements

* **Chat Panel:** Send messages, display mock AI responses with delay, support text, images, and file previews.
* **Code Editor Panel:** Simple editable textarea, placeholder syntax highlighting, ability to send code to chat panel.
* **Task Manager Panel:** Add/edit/check/delete tasks with localStorage persistence.
* **Status Bar:** Show system messages, online/offline mock status.
* **Optional Features:** Tabs for multiple agents/projects, theme switcher (light/dark), drag & drop file uploads (front-only).

### Development Rules

* Vanilla JS, no external frameworks unless justified with comments.
* Clean, readable, modular code with meaningful naming.
* Comment critical logic sections.
* Mock backend functions clearly marked (`// TODO: integrate backend here`).
* Include **sample demo data** for all panels.

### Acceptance Criteria

* Fully functional by opening `index.html` in a browser, no server required.
* Chat messages update immediately with smooth animations.
* Tasks persist using localStorage.
* Mobile-first responsive layout.
* Pleasant and smooth interactions.

### Output Format

When producing output, strictly use the following format:

```
--- FILE: index.html ---
<full HTML content>

--- FILE: styles.css ---
<full CSS content>

--- FILE: app.js ---
<full JS content>

--- README (short) ---
Instructions to open and test the project.

--- MERMAID DIAGRAM ---
flowchart LR
A[User] -->|Interacts| UI[Frontend (HTML/CSS/JS)]
UI --> ChatPanel[Chat Panel]
UI --> Editor[Code Editor Panel]
UI --> Tasks[Tasks Panel]
ChatPanel -->|sendMessage| API{API / Stubs}
Editor -->|sendCode| API
Tasks -->|update| LocalStorage[(localStorage)]
API -->|mockResponse| ChatPanel
API -->|socket events| UI
```

Files changed (2) hide show

README.md +7 -4
index.html +400 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Agentflow Nexus
-emoji: 👁
 colorFrom: yellow
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: AgentFlow Nexus 🚀
 colorFrom: yellow
+colorTo: green
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,401 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en" class="h-full">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AgentFlow Nexus</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        /* Custom scrollbar */
+        ::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 4px;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 4px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: rgba(255, 255, 255, 0.3);
+        }
+        /* Message animation */
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .message-animate {
+            animation: fadeIn 0.3s ease-out forwards;
+        }
+        /* Syntax highlight placeholder */
+        .code-block {
+            font-family: 'Courier New', monospace;
+            background: rgba(0, 0, 0, 0.1);
+            border-left: 3px solid #4F46E5;
+            padding: 0.5rem 1rem;
+            border-radius: 0 4px 4px 0;
+        }
+    </style>
+</head>
+<body class="h-full bg-gray-900 text-gray-100 flex flex-col overflow-hidden">
+    <div class="flex flex-1 overflow-hidden">
+        <!-- Sidebar -->
+        <div class="w-64 bg-gray-800 flex flex-col border-r border-gray-700 hidden md:flex">
+            <div class="p-4 border-b border-gray-700 flex items-center space-x-3">
+                <div class="w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center">
+                    <i data-feather="cpu" class="text-white"></i>
+                </div>
+                <div>
+                    <h2 class="font-bold">AgentFlow</h2>
+                    <p class="text-xs text-gray-400">Active</p>
+                </div>
+            </div>
+            <div class="flex-1 overflow-y-auto p-4 space-y-4">
+                <div>
+                    <h3 class="text-xs uppercase tracking-wider text-gray-400 mb-2">Agents</h3>
+                    <div class="space-y-1">
+                        <button class="w-full flex items-center space-x-2 p-2 rounded hover:bg-gray-700 text-left">
+                            <i data-feather="message-square" class="w-4 h-4"></i>
+                            <span>Chat Agent</span>
+                        </button>
+                        <button class="w-full flex items-center space-x-2 p-2 rounded hover:bg-gray-700 text-left">
+                            <i data-feather="code" class="w-4 h-4"></i>
+                            <span>Code Agent</span>
+                        </button>
+                        <button class="w-full flex items-center space-x-2 p-2 rounded hover:bg-gray-700 text-left">
+                            <i data-feather="database" class="w-4 h-4"></i>
+                            <span>Data Agent</span>
+                        </button>
+                    </div>
+                </div>
+                <div>
+                    <h3 class="text-xs uppercase tracking-wider text-gray-400 mb-2">Projects</h3>
+                    <div class="space-y-1">
+                        <button class="w-full flex items-center space-x-2 p-2 rounded hover:bg-gray-700 text-left">
+                            <div class="w-2 h-2 rounded-full bg-green-400"></div>
+                            <span>AgentFlow Core</span>
+                        </button>
+                        <button class="w-full flex items-center space-x-2 p-2 rounded hover:bg-gray-700 text-left">
+                            <div class="w-2 h-2 rounded-full bg-blue-400"></div>
+                            <span>UI Components</span>
+                        </button>
+                        <button class="w-full flex items-center space-x-2 p-2 rounded hover:bg-gray-700 text-left">
+                            <div class="w-2 h-2 rounded-full bg-yellow-400"></div>
+                            <span>API Integration</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div class="p-4 border-t border-gray-700">
+                <button class="w-full flex items-center space-x-2 p-2 rounded hover:bg-gray-700">
+                    <i data-feather="settings" class="w-4 h-4"></i>
+                    <span>Settings</span>
+                </button>
+            </div>
+        </div>
+        <!-- Main Content -->
+        <div class="flex-1 flex flex-col overflow-hidden">
+            <!-- Top Bar -->
+            <div class="p-4 border-b border-gray-700 flex items-center justify-between">
+                <div class="flex items-center space-x-4">
+                    <button class="md:hidden">
+                        <i data-feather="menu"></i>
+                    </button>
+                    <h1 class="text-xl font-bold">AgentFlow Nexus</h1>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <button class="p-2 rounded-full hover:bg-gray-700">
+                        <i data-feather="search" class="w-4 h-4"></i>
+                    </button>
+                    <button class="p-2 rounded-full hover:bg-gray-700">
+                        <i data-feather="bell" class="w-4 h-4"></i>
+                    </button>
+                    <div class="w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center">
+                        <i data-feather="user" class="text-white w-4 h-4"></i>
+                    </div>
+                </div>
+            </div>
+            <!-- Content Area -->
+            <div class="flex-1 flex flex-col md:flex-row overflow-hidden">
+                <!-- Chat Panel -->
+                <div class="flex-1 flex flex-col border-r border-gray-700 overflow-hidden">
+                    <div class="p-4 border-b border-gray-700">
+                        <h2 class="font-bold">Agent Chat</h2>
+                    </div>
+                    <div class="flex-1 overflow-y-auto p-4 space-y-4" id="chat-messages">
+                        <!-- Messages will be inserted here by JavaScript -->
+                    </div>
+                    <div class="p-4 border-t border-gray-700">
+                        <div class="flex items-center space-x-2">
+                            <input type="text" id="message-input" placeholder="Type your message..." class="flex-1 bg-gray-700 rounded py-2 px-4 focus:outline-none focus:ring-1 focus:ring-indigo-500">
+                            <button id="send-button" class="bg-indigo-600 hover:bg-indigo-700 text-white rounded p-2">
+                                <i data-feather="send" class="w-4 h-4"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <!-- Side Panels -->
+                <div class="w-full md:w-96 flex flex-col border-t md:border-t-0 border-gray-700">
+                    <!-- Tabs -->
+                    <div class="flex border-b border-gray-700">
+                        <button data-tab="editor" class="tab-button flex-1 py-3 px-4 font-medium text-center border-b-2 border-indigo-500">Editor</button>
+                        <button data-tab="tasks" class="tab-button flex-1 py-3 px-4 font-medium text-center border-b-2 border-transparent">Tasks</button>
+                        <button data-tab="files" class="tab-button flex-1 py-3 px-4 font-medium text-center border-b-2 border-transparent">Files</button>
+                    </div>
+                    <!-- Tab Content -->
+                    <div class="flex-1 overflow-y-auto">
+                        <!-- Editor Panel -->
+                        <div id="editor-panel" class="p-4 h-full">
+                            <div class="flex items-center justify-between mb-2">
+                                <h3 class="font-medium">Code Editor</h3>
+                                <button class="text-xs text-indigo-400 hover:text-indigo-300">Send to Chat</button>
+                            </div>
+                            <textarea id="code-editor" class="w-full h-64 bg-gray-800 text-gray-100 font-mono text-sm p-3 rounded border border-gray-700 focus:outline-none focus:ring-1 focus:ring-indigo-500" placeholder="Write your code here..."></textarea>
+                            <div class="mt-2 flex justify-between">
+                                <select class="bg-gray-700 text-sm rounded px-2 py-1">
+                                    <option>JavaScript</option>
+                                    <option>Python</option>
+                                    <option>HTML</option>
+                                    <option>CSS</option>
+                                </select>
+                                <button class="bg-gray-700 hover:bg-gray-600 text-sm rounded px-3 py-1">Run</button>
+                            </div>
+                        </div>
+                        <!-- Tasks Panel -->
+                        <div id="tasks-panel" class="p-4 h-full hidden">
+                            <div class="flex items-center justify-between mb-2">
+                                <h3 class="font-medium">Tasks</h3>
+                                <button id="add-task-button" class="text-xs text-indigo-400 hover:text-indigo-300">Add Task</button>
+                            </div>
+                            <div class="space-y-2" id="task-list">
+                                <!-- Tasks will be inserted here by JavaScript -->
+                            </div>
+                        </div>
+                        <!-- Files Panel -->
+                        <div id="files-panel" class="p-4 h-full hidden">
+                            <div class="flex items-center justify-between mb-2">
+                                <h3 class="font-medium">Files</h3>
+                                <button class="text-xs text-indigo-400 hover:text-indigo-300">Upload</button>
+                            </div>
+                            <div class="space-y-2">
+                                <div class="flex items-center p-2 rounded hover:bg-gray-700">
+                                    <i data-feather="file-text" class="w-4 h-4 mr-2 text-gray-400"></i>
+                                    <span class="text-sm">project_spec.md</span>
+                                </div>
+                                <div class="flex items-center p-2 rounded hover:bg-gray-700">
+                                    <i data-feather="file-text" class="w-4 h-4 mr-2 text-gray-400"></i>
+                                    <span class="text-sm">api_endpoints.json</span>
+                                </div>
+                                <div class="flex items-center p-2 rounded hover:bg-gray-700">
+                                    <i data-feather="image" class="w-4 h-4 mr-2 text-gray-400"></i>
+                                    <span class="text-sm">design_mockup.png</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Status Bar -->
+    <div class="bg-gray-800 text-xs text-gray-400 px-4 py-2 flex justify-between items-center border-t border-gray-700">
+        <div class="flex items-center space-x-4">
+            <span class="flex items-center">
+                <span class="w-2 h-2 rounded-full bg-green-400 mr-1"></span>
+                <span>Connected</span>
+            </span>
+            <span>Agent: Chat</span>
+            <span>Project: AgentFlow Core</span>
+        </div>
+        <div>
+            <span>Last updated: <span id="last-updated">Just now</span></span>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Initialize Feather Icons
+            feather.replace();
+            // Tab switching functionality
+            const tabButtons = document.querySelectorAll('.tab-button');
+            const panels = {
+                'editor': document.getElementById('editor-panel'),
+                'tasks': document.getElementById('tasks-panel'),
+                'files': document.getElementById('files-panel')
+            };
+            tabButtons.forEach(button => {
+                button.addEventListener('click', () => {
+                    // Reset all tabs
+                    tabButtons.forEach(btn => btn.classList.remove('border-indigo-500'));
+                    Object.values(panels).forEach(panel => panel.classList.add('hidden'));
+                    // Activate selected tab
+                    const tabName = button.getAttribute('data-tab');
+                    button.classList.add('border-indigo-500');
+                    panels[tabName].classList.remove('hidden');
+                });
+            });
+            // Chat functionality
+            const messageInput = document.getElementById('message-input');
+            const sendButton = document.getElementById('send-button');
+            const chatMessages = document.getElementById('chat-messages');
+            function addMessage(content, isUser = false) {
+                const messageDiv = document.createElement('div');
+                messageDiv.className = `flex ${isUser ? 'justify-end' : 'justify-start'}`;
+                const bubble = document.createElement('div');
+                bubble.className = `max-w-xs md:max-w-md lg:max-w-lg rounded-lg px-4 py-2 message-animate ${isUser ? 'bg-indigo-600 text-white' : 'bg-gray-700'}`;
+                bubble.innerHTML = content;
+                messageDiv.appendChild(bubble);
+                chatMessages.appendChild(messageDiv);
+                chatMessages.scrollTop = chatMessages.scrollHeight;
+            }
+            function sendMessage() {
+                const message = messageInput.value.trim();
+                if (message) {
+                    addMessage(message, true);
+                    messageInput.value = '';
+                    // Simulate AI response
+                    setTimeout(() => {
+                        addMessage(getRandomResponse());
+                    }, 1000);
+                }
+            }
+            // Sample responses
+            function getRandomResponse() {
+                const responses = [
+                    "I've processed your request. Here are the results...",
+                    "I'm analyzing that now. One moment please.",
+                    "Based on my analysis, I recommend the following approach...",
+                    "Let me check my knowledge base for that information.",
+                    "I found some relevant data for you.",
+                    "Here's what I can tell you about that topic...",
+                    "I've updated the task list with your request.",
+                    "Would you like me to elaborate on any particular aspect?"
+                ];
+                return responses[Math.floor(Math.random() * responses.length)];
+            }
+            sendButton.addEventListener('click', sendMessage);
+            messageInput.addEventListener('keypress', (e) => {
+                if (e.key === 'Enter') {
+                    sendMessage();
+                }
+            });
+            // Initialize with welcome messages
+            setTimeout(() => {
+                addMessage("Welcome to AgentFlow Nexus! How can I assist you today?");
+            }, 500);
+            setTimeout(() => {
+                addMessage("I can help with coding, task management, and file organization. Try asking me anything!");
+            }, 1200);
+            // Task functionality
+            const addTaskButton = document.getElementById('add-task-button');
+            const taskList = document.getElementById('task-list');
+            // Sample tasks
+            const sampleTasks = [
+                { id: 1, text: "Integrate OpenAI API", completed: false },
+                { id: 2, text: "Design landing page", completed: true },
+                { id: 3, text: "Fix authentication bug", completed: false }
+            ];
+            function renderTasks() {
+                taskList.innerHTML = '';
+                const tasks = JSON.parse(localStorage.getItem('tasks')) || sampleTasks;
+                tasks.forEach(task => {
+                    const taskDiv = document.createElement('div');
+                    taskDiv.className = `flex items-center p-2 rounded ${task.completed ? 'bg-gray-800 text-gray-500' : 'bg-gray-700 hover:bg-gray-600'}`;
+                    const checkbox = document.createElement('input');
+                    checkbox.type = 'checkbox';
+                    checkbox.className = 'mr-2';
+                    checkbox.checked = task.completed;
+                    checkbox.addEventListener('change', () => {
+                        task.completed = checkbox.checked;
+                        saveTasks(tasks);
+                        renderTasks();
+                    });
+                    const text = document.createElement('span');
+                    text.className = `flex-1 ${task.completed ? 'line-through' : ''}`;
+                    text.textContent = task.text;
+                    const deleteButton = document.createElement('button');
+                    deleteButton.innerHTML = '<i data-feather="trash-2" class="w-4 h-4 text-gray-400 hover:text-red-400"></i>';
+                    deleteButton.addEventListener('click', () => {
+                        const index = tasks.findIndex(t => t.id === task.id);
+                        if (index !== -1) {
+                            tasks.splice(index, 1);
+                            saveTasks(tasks);
+                            renderTasks();
+                        }
+                    });
+                    taskDiv.appendChild(checkbox);
+                    taskDiv.appendChild(text);
+                    taskDiv.appendChild(deleteButton);
+                    taskList.appendChild(taskDiv);
+                });
+                feather.replace();
+            }
+            function saveTasks(tasks) {
+                localStorage.setItem('tasks', JSON.stringify(tasks));
+            }
+            addTaskButton.addEventListener('click', () => {
+                const tasks = JSON.parse(localStorage.getItem('tasks')) || sampleTasks;
+                const newId = tasks.length > 0 ? Math.max(...tasks.map(t => t.id)) + 1 : 1;
+                const newTask = {
+                    id: newId,
+                    text: "New Task",
+                    completed: false
+                };
+                tasks.push(newTask);
+                saveTasks(tasks);
+                renderTasks();
+            });
+            // Initialize tasks
+            renderTasks();
+            // Update last updated time
+            function updateLastUpdated() {
+                document.getElementById('last-updated').textContent = new Date().toLocaleTimeString();
+            }
+            setInterval(updateLastUpdated, 60000);
+            updateLastUpdated();
+        });
+    </script>
+</body>
 </html>