Create an app for a **deep research product** that functions like a **Jupyter notebook**, where each **agent or reasoning step** lives in its own **cell**.

### Core Concept

* Each cell represents one **agent** or **processing step** (e.g., researcher, analyst, summarizer).
* A cell contains:

* Agent name or type
* Input prompt or references to previous cells
* Executable/re-runnable action button
* Structured output (text, markdown, table, chart, or JSON preview)
* The output of each cell can be passed as input to subsequent cells.
* Cells can be re-run independently to fix errors, fetch updated information, or explore variations.

### Features

1. **Notebook Layout**

* Vertical stack of cells, visually resembling a Jupyter notebook.
* Each cell shows:

* Agent header with name/icon.
* Editable input area.
* “Run” button.
* Output viewer (auto-formatted by type).
* Optional add/delete/reorder of cells.

2. **Output Visualization**

* Support multiple types of outputs:

* **Text/Markdown** → rendered in formatted text.
* **Tables/DataFrames** → rendered as interactive tables.
* **Charts** → simple visualization (e.g., bar/line chart).
* Each output should show a timestamp and status (success/error/loading).

3. **Cell Linking**

* Allow referencing outputs of previous cells as inputs (e.g., `{{cell_1.output}}`).
* Show simple dependency indicators or arrows.

4. **Re-run and Smart Update**

* Rerunning a cell updates its output.
* Optionally, downstream cells that depend on it can be re-run automatically or with confirmation.

5. **History and Versioning**

* Maintain version history per cell (view previous runs, revert).

6. **Overall Style**

* Minimalist, modern UI using **React + TailwindCSS**.
* Focus on clarity and traceability.
* Use cards or blocks for each cell with soft shadows and rounded corners.

### Deliverable

Generate a **React frontend prototype** (using TailwindCSS) implementing this interface.
Include:

* Components for `Notebook`, `Cell`, and `OutputViewer`.
* Mock data for several example cells.
* Interactive “Run” button simulation (can trigger mock updates).
The goal is to visually and functionally convey how agents operate as notebook-style cells in a deep research workflow.

README.md

@@ -1,10 +1,13 @@
 ---
-title: Agentic Research Notebook Wizard
-emoji: 👀
-colorFrom: indigo
-colorTo: indigo
+title: Agentic Research Notebook Wizard ‍♂️
+colorFrom: pink
+colorTo: gray
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/cell.js

@@ -0,0 +1,211 @@
+class AgenticCell extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+
+    static get observedAttributes() {
+        return ['agent-type', 'input', 'output', 'status', 'timestamp', 'has-previous'];
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue) {
+            this.render();
+        }
+    }
+
+    render() {
+        const agentType = this.getAttribute('agent-type') || 'researcher';
+        const input = this.getAttribute('input') || '';
+        const output = this.getAttribute('output') ? JSON.parse(this.getAttribute('output')) : null;
+        const status = this.getAttribute('status') || 'idle';
+        const timestamp = this.getAttribute('timestamp') || new Date().toISOString();
+        const hasPrevious = this.hasAttribute('has-previous');
+
+        const agentIcons = {
+            'researcher': 'search',
+            'analyst': 'bar-chart-2',
+            'data-visualizer': 'pie-chart',
+            'summarizer': 'file-text'
+        };
+
+        const statusColors = {
+            'idle': 'bg-gray-200',
+            'loading': 'bg-blue-200 animate-pulse-slow',
+            'success': 'bg-green-200',
+            'error': 'bg-red-200'
+        };
+
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                }
+                
+                .cell-container {
+                    border-radius: 0.5rem;
+                    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+                    background-color: white;
+                    overflow: hidden;
+                }
+                
+                .cell-header {
+                    display: flex;
+                    align-items: center;
+                    padding: 0.75rem 1rem;
+                    background-color: #f9fafb;
+                    border-bottom: 1px solid #e5e7eb;
+                }
+                
+                .agent-icon {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: 2rem;
+                    height: 2rem;
+                    border-radius: 50%;
+                    margin-right: 0.75rem;
+                }
+                
+                .agent-name {
+                    font-weight: 600;
+                    color: #374151;
+                    text-transform: capitalize;
+                }
+                
+                .cell-status {
+                    margin-left: auto;
+                    font-size: 0.75rem;
+                    padding: 0.25rem 0.5rem;
+                    border-radius: 9999px;
+                }
+                
+                .cell-timestamp {
+                    margin-left: 0.75rem;
+                    font-size: 0.75rem;
+                    color: #6b7280;
+                }
+                
+                .cell-content {
+                    padding: 1rem;
+                }
+                
+                .input-area {
+                    width: 100%;
+                    min-height: 3rem;
+                    padding: 0.75rem;
+                    border: 1px solid #e5e7eb;
+                    border-radius: 0.375rem;
+                    margin-bottom: 1rem;
+                    font-family: inherit;
+                }
+                
+                .input-area:focus {
+                    outline: none;
+                    border-color: #3b82f6;
+                    box-shadow: 0 0 0 1px #3b82f6;
+                }
+                
+                .actions {
+                    display: flex;
+                    justify-content: flex-end;
+                    margin-bottom: 1rem;
+                }
+                
+                .run-btn {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                    padding: 0.5rem 1rem;
+                    background-color: #3b82f6;
+                    color: white;
+                    border: none;
+                    border-radius: 0.375rem;
+                    cursor: pointer;
+                    transition: background-color 0.2s;
+                }
+                
+                .run-btn:hover {
+                    background-color: #2563eb;
+                }
+                
+                .run-btn:disabled {
+                    background-color: #9ca3af;
+                    cursor: not-allowed;
+                }
+                
+                .output-container {
+                    border-top: 1px solid #e5e7eb;
+                    padding-top: 1rem;
+                }
+                
+                .output-header {
+                    display: flex;
+                    align-items: center;
+                    margin-bottom: 0.75rem;
+                    color: #4b5563;
+                    font-weight: 500;
+                }
+                
+                .empty-output {
+                    color: #9ca3af;
+                    font-style: italic;
+                    padding: 1rem;
+                    text-align: center;
+                }
+            </style>
+            
+            <div class="cell-container cell-connector">
+                <div class="cell-header">
+                    <div class="agent-icon bg-blue-100 text-blue-600">
+                        <i data-feather="${agentIcons[agentType] || 'circle'}"></i>
+                    </div>
+                    <span class="agent-name">${agentType}</span>
+                    ${status !== 'idle' ? `
+                        <span class="cell-status ${statusColors[status]}">
+                            ${status === 'loading' ? 'Running...' : status}
+                        </span>
+                        <span class="cell-timestamp">${new Date(timestamp).toLocaleString()}</span>
+                    ` : ''}
+                </div>
+                
+                <div class="cell-content">
+                    <textarea class="input-area" placeholder="Enter your prompt or reference other cells with {{cell_id.output}}">${input}</textarea>
+                    
+                    <div class="actions">
+                        <button class="run-btn" ${status === 'loading' ? 'disabled' : ''}>
+                            <i data-feather="play"></i>
+                            Run
+                        </button>
+                    </div>
+                    
+                    <div class="output-container">
+                        ${output ? `
+                            <div class="output-header">
+                                <i data-feather="file-text" class="mr-2"></i>
+                                Output
+                            </div>
+                            <agentic-output-viewer output='${JSON.stringify(output)}'></agentic-output-viewer>
+                        ` : `
+                            <div class="empty-output">No output yet. Run the cell to see results.</div>
+                        `}
+                    </div>
+                </div>
+            </div>
+        `;
+        
+        // Add event listener for the run button
+        const runBtn = this.shadowRoot.querySelector('.run-btn');
+        runBtn.addEventListener('click', () => {
+            const cellId = this.getAttribute('id');
+            mockRunCell(cellId);
+        });
+        
+        // Initialize feather icons
+        if (window.feather) {
+            window.feather.replace();
+        }
+    }
+}
+
+customElements.define('agentic-cell', AgenticCell);

components/notebook.js

@@ -0,0 +1,100 @@
+class AgenticNotebook extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+        this.cells = [];
+    }
+
+    static get observedAttributes() {
+        return ['cells'];
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === 'cells') {
+            this.cells = JSON.parse(newValue);
+            this.render();
+        }
+    }
+
+    render() {
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    width: 100%;
+                }
+                
+                .notebook-header {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    margin-bottom: 1.5rem;
+                }
+                
+                .add-cell-btn {
+                    transition: all 0.2s ease;
+                }
+                
+                .add-cell-btn:hover {
+                    transform: translateY(-1px);
+                }
+                
+                .cells-container {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 1.5rem;
+                }
+            </style>
+            
+            <div class="notebook-container">
+                <div class="notebook-header">
+                    <h1 class="text-2xl font-bold text-gray-800">Agentic Research Notebook</h1>
+                    <button class="add-cell-btn flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg shadow hover:bg-blue-700">
+                        <i data-feather="plus"></i>
+                        Add Cell
+                    </button>
+                </div>
+                
+                <div class="cells-container">
+                    ${this.cells.map((cell, index) => `
+                        <agentic-cell
+                            id="${cell.id}"
+                            agent-type="${cell.agentType}"
+                            input="${cell.input}"
+                            output='${JSON.stringify(cell.output)}'
+                            status="${cell.status}"
+                            timestamp="${cell.timestamp}"
+                            ${index > 0 ? 'has-previous' : ''}
+                        ></agentic-cell>
+                    `).join('')}
+                </div>
+            </div>
+        `;
+        
+        // Add event listener for the add cell button
+        const addCellBtn = this.shadowRoot.querySelector('.add-cell-btn');
+        addCellBtn.addEventListener('click', () => this.addNewCell());
+        
+        // Initialize feather icons
+        if (window.feather) {
+            window.feather.replace();
+        }
+    }
+    
+    addNewCell() {
+        const newCellId = `cell-${Date.now()}`;
+        const newCell = {
+            id: newCellId,
+            agentType: 'researcher',
+            input: '',
+            output: null,
+            status: 'idle',
+            timestamp: new Date().toISOString()
+        };
+        
+        this.cells.push(newCell);
+        this.setAttribute('cells', JSON.stringify(this.cells));
+    }
+}
+
+customElements.define('agentic-notebook', AgenticNotebook);

components/output-viewer.js

@@ -0,0 +1,55 @@
+class AgenticOutputViewer extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+
+    static get observedAttributes() {
+        return ['output'];
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === 'output' && oldValue !== newValue) {
+            this.render();
+        }
+    }
+
+    render() {
+        const output = this.getAttribute('output') ? JSON.parse(this.getAttribute('output')) : null;
+        
+        if (!output) {
+            this.shadowRoot.innerHTML = `<div>No output available</div>`;
+            return;
+        }
+
+        let content;
+        
+        if (output.type === 'markdown') {
+            content = `
+                <div class="markdown-viewer p-4 bg-gray-50 rounded-lg">
+                    ${this.renderMarkdown(output.content)}
+                </div>
+            `;
+        } else if (output.type === 'table') {
+            content = `
+                <div class="table-viewer overflow-x-auto">
+                    <table class="min-w-full divide-y divide-gray-200">
+                        <thead class="bg-gray-50">
+                            <tr>
+                                ${output.content.headers.map(header => `
+                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                        ${header}
+                                    </th>
+                                `).join('')}
+                            </tr>
+                        </thead>
+                        <tbody class="bg-white divide-y divide-gray-200">
+                            ${output.content.rows.map((row, rowIndex) => `
+                                <tr class="${rowIndex % 2 === 0 ? 'bg-white' : 'bg-gray-50'}">
+                                    ${row.map(cell => `
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                                            ${cell}
+                                        </td>
+                                    `).join('')}
+                                </tr>
+                            `).join('')}

index.html

@@ -1,19 +1,27 @@
-<!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">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Agentic Research Notebook</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body class="font-inter bg-gray-50 min-h-screen">
+    <div id="root" class="container mx-auto px-4 py-8">
+        <!-- Notebook will be rendered here -->
+    </div>
+
+    <script src="components/notebook.js"></script>
+    <script src="components/cell.js"></script>
+    <script src="components/output-viewer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,104 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const root = document.getElementById('root');
+    
+    // Mock data for cells
+    const initialCells = [
+        {
+            id: 'cell-1',
+            agentType: 'researcher',
+            input: 'Find recent breakthroughs in quantum computing',
+            output: {
+                type: 'markdown',
+                content: '## Quantum Computing Breakthroughs (2023)\n\n1. **IBM Quantum Heron Processor** - 133-qubit processor with improved error rates\n2. **Google Quantum Supremacy 2.0** - Demonstrated 70-qubit processor\n3. **Microsoft Topological Qubits** - More stable qubit design\n4. **Quantum Networking** - First multi-node quantum network demonstrated'
+            },
+            status: 'success',
+            timestamp: new Date(Date.now() - 3600000).toISOString()
+        },
+        {
+            id: 'cell-2',
+            agentType: 'analyst',
+            input: 'Summarize the key points from cell-1 into bullet points',
+            output: {
+                type: 'markdown',
+                content: '- IBM released 133-qubit processor\n- Google demonstrated 70-qubit processor\n- Microsoft developed more stable qubit design\n- Multi-node quantum networks achieved'
+            },
+            status: 'success',
+            timestamp: new Date(Date.now() - 1800000).toISOString()
+        },
+        {
+            id: 'cell-3',
+            agentType: 'data-visualizer',
+            input: 'Create a comparison table of quantum processors from cell-1',
+            output: {
+                type: 'table',
+                content: {
+                    headers: ['Company', 'Qubits', 'Key Feature'],
+                    rows: [
+                        ['IBM', '133', 'Improved error rates'],
+                        ['Google', '70', 'Supremacy 2.0'],
+                        ['Microsoft', 'N/A', 'Topological stability']
+                    ]
+                }
+            },
+            status: 'success',
+            timestamp: new Date(Date.now() - 900000).toISOString()
+        }
+    ];
+
+    // Create notebook with initial cells
+    const notebook = document.createElement('agentic-notebook');
+    notebook.setAttribute('cells', JSON.stringify(initialCells));
+    root.appendChild(notebook);
+});
+
+// Mock run function for cells
+function mockRunCell(cellId) {
+    const cell = document.querySelector(`agentic-cell[id="${cellId}"]`);
+    if (!cell) return;
+
+    // Show loading state
+    cell.setAttribute('status', 'loading');
+    
+    // Simulate API call delay
+    setTimeout(() => {
+        // Update with mock response
+        const randomSuccess = Math.random() > 0.1; // 90% success rate
+        const timestamp = new Date().toISOString();
+        
+        if (randomSuccess) {
+            const agentType = cell.getAttribute('agent-type');
+            let output;
+            
+            if (agentType === 'researcher') {
+                output = {
+                    type: 'markdown',
+                    content: '## Updated Research Results\n\nNew findings suggest quantum error correction is improving faster than expected.'
+                };
+            } else if (agentType === 'analyst') {
+                output = {
+                    type: 'markdown',
+                    content: '- Quantum error correction improving rapidly\n- New benchmarks show 2x improvement'
+                };
+            } else if (agentType === 'data-visualizer') {
+                output = {
+                    type: 'table',
+                    content: {
+                        headers: ['Metric', 'Improvement'],
+                        rows: [
+                            ['Error Rate', '50% reduction'],
+                            ['Speed', '2x faster'],
+                            ['Stability', '3x more stable']
+                        ]
+                    }
+                };
+            }
+            
+            cell.setAttribute('output', JSON.stringify(output));
+            cell.setAttribute('status', 'success');
+        } else {
+            cell.setAttribute('status', 'error');
+        }
+        
+        cell.setAttribute('timestamp', timestamp);
+    }, 1500);
+}

style.css

@@ -1,28 +1,54 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+@keyframes pulse {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.animate-pulse-slow {
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.cell-connector {
+    position: relative;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.cell-connector::before {
+    content: "";
+    position: absolute;
+    left: 24px;
+    top: -16px;
+    height: 16px;
+    width: 2px;
+    background-color: #e5e7eb;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.json-viewer {
+    font-family: 'Courier New', monospace;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    white-space: pre-wrap;
 }
+
+.markdown-viewer h1 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin: 1rem 0;
+}
+
+.markdown-viewer h2 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin: 0.75rem 0;
+}
+
+.markdown-viewer p {
+    margin: 0.5rem 0;
+}
+
+.markdown-viewer ul, .markdown-viewer ol {
+    margin: 0.5rem 0;
+    padding-left: 1.5rem;
+}