v0.0

.gitignore

@@ -0,0 +1 @@
+settings.json

README.md

@@ -0,0 +1,9 @@
+# Productive
+
+Productive is a new way to interact with LLM assistants in a productive way. It works similar to JupyterLab with several tabs where each tab corresponds to a chat around a topic, a deep research query or a coding/data analysis session.
+
+Types of notebooks:
+- command center: this is where you land and launch new notebooks or agent workflows
+- data analysis notebook: essentially a jupyter notebook with agents
+- deep research: performing a research task with agents
+- normal chat interface

backend/.env.example

@@ -0,0 +1,4 @@
+# Optional: Hugging Face Token
+# If you use huggingface.co endpoints without providing a token in settings,
+# the backend will automatically use this environment variable as fallback
+HF_TOKEN=your_hf_token_here

backend/README.md

@@ -0,0 +1,134 @@
+# Productive Backend
+
+Minimal FastAPI backend for Productive with streaming support and action tokens.
+
+## Features
+
+- **Streaming responses**: Tokens streamed in real-time via Server-Sent Events (SSE)
+- **OpenAI-compatible**: Works with any OpenAI API-compatible endpoint
+- **Action tokens**: LLM can suggest opening specialized notebooks via `[ACTION:TYPE]` tokens
+- **CORS enabled**: Ready for frontend connection
+
+## Setup
+
+1. **Install dependencies**:
+   ```bash
+   cd backend
+   pip install -r requirements.txt
+   ```
+
+2. **Configure environment**:
+   ```bash
+   cp .env.example .env
+   ```
+
+   Edit `.env` and set your API credentials:
+   ```
+   OPENAI_API_KEY=your_api_key_here
+   OPENAI_BASE_URL=https://api.openai.com/v1
+   MODEL_NAME=gpt-4
+   ```
+
+   For other OpenAI-compatible providers (Anthropic via proxy, local models, etc.):
+   ```
+   OPENAI_BASE_URL=http://localhost:11434/v1  # Example: Ollama
+   MODEL_NAME=llama2
+   ```
+
+3. **Run the server**:
+   ```bash
+   python main.py
+   ```
+
+   Or with uvicorn directly:
+   ```bash
+   uvicorn main:app --reload --host 0.0.0.0 --port 8000
+   ```
+
+4. **Update frontend settings**:
+   - Open the frontend in browser
+   - Click SETTINGS
+   - Set endpoint to: `http://localhost:8000/api`
+   - Save
+
+## API Endpoints
+
+### `POST /api/chat/stream`
+
+Stream chat responses with optional action tokens.
+
+**Request**:
+```json
+{
+  "messages": [
+    {"role": "user", "content": "Help me analyze data"}
+  ],
+  "notebook_type": "command",
+  "stream": true
+}
+```
+
+**Response**: Server-Sent Events stream
+```
+data: {"type": "content", "content": "I"}
+data: {"type": "content", "content": " can"}
+data: {"type": "content", "content": " help"}
+...
+data: {"type": "done"}
+```
+
+### Action Tokens
+
+The LLM can suggest opening specialized notebooks by including action tokens:
+
+- `[ACTION:AGENT]` - Open Agent notebook for multi-step tasks
+- `[ACTION:CODE]` - Open Code notebook for data analysis/coding
+- `[ACTION:RESEARCH]` - Open Research notebook for research tasks
+- `[ACTION:CHAT]` - Open Chat notebook for continued conversation
+
+The frontend automatically:
+1. Detects action tokens in the response
+2. Removes them from display
+3. Opens the appropriate notebook
+
+### `GET /health`
+
+Health check endpoint.
+
+## Architecture
+
+```
+Frontend (JavaScript/SSE)
+    ↓
+FastAPI (streaming endpoint)
+    ↓
+OpenAI API (or compatible)
+```
+
+## Testing
+
+Test the endpoint directly:
+```bash
+curl -X POST http://localhost:8000/api/chat/stream \
+  -H "Content-Type: application/json" \
+  -d '{
+    "messages": [{"role": "user", "content": "Hello"}],
+    "notebook_type": "command"
+  }'
+```
+
+## Troubleshooting
+
+**"Connection error" in frontend**:
+- Check backend is running: `http://localhost:8000`
+- Verify endpoint in frontend settings
+- Check browser console for CORS errors
+
+**No streaming**:
+- Ensure `stream: true` in request
+- Check OpenAI API key is valid
+- Verify model name is correct
+
+**Action tokens not working**:
+- Check LLM response includes `[ACTION:TYPE]` format
+- View browser console for detection logs

backend/main.py

@@ -0,0 +1,259 @@
+from fastapi import FastAPI, HTTPException
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import StreamingResponse
+from pydantic import BaseModel
+from typing import List, Optional
+import json
+import httpx
+import os
+
+app = FastAPI(title="Productive API")
+
+# CORS middleware for frontend connection
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],  # In production, specify your frontend URL
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# System prompts for each notebook type
+SYSTEM_PROMPTS = {
+    "command": """You are a helpful AI assistant in the Productive interface command center.
+
+When the user asks you to perform tasks that would benefit from a specialized notebook, you can suggest opening one by including an action tag at the END of your response.
+
+Action tag format: <action:type>message for the new notebook</action>
+
+Available action types:
+- agent: For autonomous agent tasks that need multiple steps
+- code: For coding, data analysis, or running code
+- research: For research tasks requiring web search or deep analysis
+- chat: For continuing general conversation
+
+The message inside the action tag should be a clear prompt/instruction for the specialized notebook.
+
+Examples:
+- User: "Can you help me analyze this CSV file?"
+  Response: "I'll help you with that! <action:code>Analyze the CSV file and show statistics</action>"
+
+- User: "Research the latest developments in AI"
+  Response: "I'll set that up for you. <action:research>Research latest AI developments in 2025</action>"
+
+- User: "Create a multi-step workflow to organize my tasks"
+  Response: "Let me help with that! <action:agent>Create a task organization workflow with multiple steps</action>"
+
+- User: "What's the weather like?" → No action tag needed
+
+Only include ONE action tag at the very end if appropriate. The action tag will be removed from display and used to open a specialized notebook with the message as the initial prompt. Make sure the message passed along contains all necessary context.
+
+Do not duplicate the answer: either answer the message directly OR use a dedicated notebook.
+""",
+    "agent": """You are an autonomous agent assistant specialized in breaking down and executing multi-step tasks.
+
+Your role is to:
+- Understand complex tasks and break them down into clear steps
+- Execute tasks methodically
+- Keep track of progress and next steps
+- Provide clear status updates
+
+Focus on being proactive, organized, and thorough in completing multi-step workflows.
+""",
+    "code": """You are a coding and data analysis assistant.
+
+Your role is to:
+- Help write, debug, and explain code
+- Analyze data and provide insights
+- Suggest best practices and optimizations
+- Provide code examples with clear explanations
+
+Focus on being precise, technical, and practical in your coding assistance.
+""",
+    "research": """You are a research assistant specialized in deep analysis and information gathering.
+
+Your role is to:
+- Conduct thorough research on topics
+- Synthesize information from multiple sources
+- Provide well-structured, evidence-based answers
+- Identify key insights and trends
+
+Focus on being comprehensive, analytical, and well-sourced in your research.
+""",
+    "chat": """You are a conversational AI assistant.
+
+Your role is to:
+- Engage in natural, helpful conversation
+- Answer questions clearly and concisely
+- Provide thoughtful responses
+- Be friendly and approachable
+
+Focus on being conversational, helpful, and easy to understand.
+"""
+}
+
+
+class Message(BaseModel):
+    role: str
+    content: str
+
+
+class ChatRequest(BaseModel):
+    messages: List[Message]
+    notebook_type: str = "command"
+    stream: bool = True
+    endpoint: str  # User's configured LLM endpoint
+    token: Optional[str] = None  # Optional auth token
+    model: Optional[str] = "gpt-4"  # Model name
+
+
+async def stream_chat_response(
+    messages: List[dict],
+    endpoint: str,
+    token: Optional[str],
+    model: str,
+    notebook_type: str
+):
+    """Proxy stream from user's configured LLM endpoint"""
+
+    try:
+        print(f"=== Stream Request ===")
+        print(f"Endpoint: {endpoint}")
+        print(f"Model: {model}")
+        print(f"Messages: {len(messages)} messages")
+        print(f"Token provided: {bool(token)}")
+
+        # Prepare messages with appropriate system prompt based on notebook type
+        system_prompt = SYSTEM_PROMPTS.get(notebook_type, SYSTEM_PROMPTS["command"])
+        full_messages = [
+            {"role": "system", "content": system_prompt}
+        ] + messages
+
+        # Handle Hugging Face endpoint with fallback to HF_TOKEN
+        if not token and "huggingface.co" in endpoint:
+            token = os.getenv("HF_TOKEN")
+            if token:
+                print(f"Using HF_TOKEN from environment for Hugging Face endpoint")
+            else:
+                print(f"WARNING: No token provided and HF_TOKEN not found in environment!")
+
+        # Prepare headers
+        headers = {
+            "Content-Type": "application/json"
+        }
+        if token:
+            headers["Authorization"] = f"Bearer {token}"
+
+        # Prepare request body (OpenAI-compatible format)
+        request_body = {
+            "model": model,
+            "messages": full_messages,
+            "stream": True,
+            "temperature": 0.7
+        }
+
+        print(f"Sending request to: {endpoint}/chat/completions")
+
+        # Make streaming request to user's endpoint
+        async with httpx.AsyncClient(timeout=60.0) as client:
+            async with client.stream(
+                "POST",
+                f"{endpoint}/chat/completions",
+                json=request_body,
+                headers=headers
+            ) as response:
+                if response.status_code != 200:
+                    error_text = await response.aread()
+                    error_detail = error_text.decode() if error_text else f"Status {response.status_code}"
+                    error_message = f"LLM API error ({response.status_code}): {error_detail}"
+                    print(f"Error from LLM API: {error_message}")
+                    yield f"data: {json.dumps({'type': 'error', 'content': error_message})}\n\n"
+                    return
+
+                # Stream the response
+                async for line in response.aiter_lines():
+                    if line.startswith("data: "):
+                        data_str = line[6:]  # Remove "data: " prefix
+
+                        if data_str.strip() == "[DONE]":
+                            yield f"data: {json.dumps({'type': 'done'})}\n\n"
+                            continue
+
+                        try:
+                            data = json.loads(data_str)
+                            # Extract content from OpenAI-compatible response
+                            if "choices" in data and len(data["choices"]) > 0:
+                                delta = data["choices"][0].get("delta", {})
+                                content = delta.get("content")
+
+                                if content:
+                                    # Forward the content token
+                                    yield f"data: {json.dumps({'type': 'content', 'content': content})}\n\n"
+                        except json.JSONDecodeError:
+                            # Skip malformed JSON
+                            continue
+
+    except httpx.RequestError as e:
+        error_message = f"Connection error to LLM endpoint: {str(e)}"
+        print(f"HTTP Request Error: {e}")
+        yield f"data: {json.dumps({'type': 'error', 'content': error_message})}\n\n"
+    except Exception as e:
+        import traceback
+        error_message = f"Error: {str(e) or 'Unknown error occurred'}"
+        print(f"Exception in stream_chat_response: {e}")
+        print(traceback.format_exc())
+        yield f"data: {json.dumps({'type': 'error', 'content': error_message})}\n\n"
+
+
+@app.get("/")
+async def root():
+    return {
+        "message": "Productive API - LLM Proxy Server",
+        "version": "1.0.0",
+        "endpoints": {
+            "/api/chat/stream": "POST - Proxy streaming chat to user's LLM endpoint"
+        }
+    }
+
+
+@app.post("/api/chat/stream")
+async def chat_stream(request: ChatRequest):
+    """Proxy streaming chat to user's configured LLM endpoint"""
+
+    print("REQUEST", request.json)
+
+    if not request.messages:
+        raise HTTPException(status_code=400, detail="Messages are required")
+
+    if not request.endpoint:
+        raise HTTPException(status_code=400, detail="LLM endpoint is required")
+
+    # Convert Pydantic models to dicts
+    messages = [{"role": msg.role, "content": msg.content} for msg in request.messages]
+
+    return StreamingResponse(
+        stream_chat_response(
+            messages,
+            request.endpoint,
+            request.token,
+            request.model or "gpt-4",
+            request.notebook_type
+        ),
+        media_type="text/event-stream",
+        headers={
+            "Cache-Control": "no-cache",
+            "Connection": "keep-alive",
+            "X-Accel-Buffering": "no",  # Disable nginx buffering
+        }
+    )
+
+
+@app.get("/health")
+async def health():
+    """Health check endpoint"""
+    return {"status": "healthy"}
+
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=8000)

backend/requirements.txt

@@ -0,0 +1,3 @@
+fastapi==0.104.1
+uvicorn==0.24.0
+httpx==0.25.0

index.html

@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Productive</title>
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="app-container">
+        <!-- Tab Bar -->
+        <div class="tab-bar">
+            <div class="tab active" data-tab-id="0">
+                <span class="tab-title">COMMAND</span>
+            </div>
+            <div id="dynamicTabs"></div>
+            <div class="new-tab-wrapper">
+                <button class="new-tab-btn" id="newTabBtn">+</button>
+                <div class="new-tab-menu" id="newTabMenu">
+                    <div class="menu-item" data-type="agent">AGENT</div>
+                    <div class="menu-item" data-type="code">CODE</div>
+                    <div class="menu-item" data-type="research">RESEARCH</div>
+                    <div class="menu-item" data-type="chat">CHAT</div>
+                </div>
+            </div>
+            <div class="tab-bar-spacer"></div>
+            <button class="settings-btn" id="settingsBtn">SETTINGS</button>
+        </div>
+
+        <!-- Tab Content Area -->
+        <div class="content-area">
+            <!-- Command Center Tab -->
+            <div class="tab-content active" data-content-id="0">
+                <div class="notebook-interface">
+                    <div class="notebook-header">
+                        <div>
+                            <div class="notebook-type">COMMAND CENTER</div>
+                            <h2>PRODUCTIVE</h2>
+                        </div>
+                        <div class="header-actions">
+                            <button class="launcher-btn" data-type="agent">AGENT</button>
+                            <button class="launcher-btn" data-type="code">CODE</button>
+                            <button class="launcher-btn" data-type="research">RESEARCH</button>
+                            <button class="launcher-btn" data-type="chat">CHAT</button>
+                        </div>
+                    </div>
+
+                    <div class="notebook-body">
+                        <div class="chat-container" id="messages-command">
+                            <div class="welcome-message">
+                                <p>Welcome to Productive — an AI interface with specialized notebooks.</p>
+                                <p>The assistant can automatically open specialized notebooks for different tasks:</p>
+                                <ul>
+                                    <li><strong>AGENT</strong> — Multi-step autonomous tasks</li>
+                                    <li><strong>CODE</strong> — Programming and data analysis</li>
+                                    <li><strong>RESEARCH</strong> — Deep research and information gathering</li>
+                                    <li><strong>CHAT</strong> — General conversation</li>
+                                </ul>
+                                <p>When a notebook is opened, you'll see a green widget you can click to jump to it. A pulsing dot on the tab indicates active generation.</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="input-area">
+                        <div class="input-container">
+                            <input type="text" placeholder="Enter message..." id="input-command">
+                            <button id="sendCommand">SEND</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Settings Tab -->
+            <div class="tab-content" data-content-id="settings">
+                <div class="settings-interface">
+                    <div class="settings-header">
+                        <h2>SETTINGS</h2>
+                    </div>
+                    <div class="settings-body">
+                        <div class="settings-section">
+                            <label class="settings-label">
+                                <span class="label-text">LLM ENDPOINT</span>
+                                <span class="label-description">OpenAI-compatible API endpoint (e.g., https://api.openai.com/v1)</span>
+                            </label>
+                            <input type="text" id="setting-endpoint" class="settings-input" placeholder="https://api.openai.com/v1">
+                        </div>
+
+                        <div class="settings-section">
+                            <label class="settings-label">
+                                <span class="label-text">API TOKEN (OPTIONAL)</span>
+                                <span class="label-description">Authentication token for the LLM API</span>
+                            </label>
+                            <input type="password" id="setting-token" class="settings-input" placeholder="Leave empty if not required">
+                        </div>
+
+                        <div class="settings-section">
+                            <label class="settings-label">
+                                <span class="label-text">MODEL</span>
+                                <span class="label-description">Model name (e.g., gpt-4, gpt-3.5-turbo)</span>
+                            </label>
+                            <input type="text" id="setting-model" class="settings-input" placeholder="gpt-4">
+                        </div>
+
+                        <div class="settings-actions">
+                            <button class="settings-save-btn" id="saveSettingsBtn">SAVE</button>
+                            <button class="settings-cancel-btn" id="cancelSettingsBtn">CANCEL</button>
+                        </div>
+
+                        <div class="settings-status" id="settingsStatus"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,622 @@
+// State management
+let tabCounter = 1;
+let activeTabId = 0;
+let settings = {
+    endpoint: 'https://api.openai.com/v1',
+    token: '',
+    model: 'gpt-4'
+};
+
+// Track notebook counters for each type
+let notebookCounters = {
+    'agent': 0,
+    'code': 0,
+    'research': 0,
+    'chat': 0
+};
+
+const notebookTitles = {
+    'command-center': 'COMMAND',
+    'agent': 'AGENT',
+    'code': 'CODE',
+    'research': 'RESEARCH',
+    'chat': 'CHAT'
+};
+
+// Initialize
+document.addEventListener('DOMContentLoaded', () => {
+    loadSettings();
+    initializeEventListeners();
+});
+
+function initializeEventListeners() {
+    // Launcher buttons in command center
+    document.querySelectorAll('.launcher-btn').forEach(btn => {
+        btn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            const type = btn.dataset.type;
+            createNotebookTab(type);
+        });
+    });
+
+    // Command center chat functionality
+    const commandInput = document.getElementById('input-command');
+    const sendCommand = document.getElementById('sendCommand');
+    if (commandInput && sendCommand) {
+        sendCommand.addEventListener('click', () => sendMessage(0));
+        commandInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') sendMessage(0);
+        });
+    }
+
+    // New tab button - toggle menu
+    const newTabBtn = document.getElementById('newTabBtn');
+    const newTabMenu = document.getElementById('newTabMenu');
+
+    if (newTabBtn && newTabMenu) {
+        newTabBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+
+            // Position the menu below the button
+            const rect = newTabBtn.getBoundingClientRect();
+            newTabMenu.style.top = `${rect.bottom}px`;
+            newTabMenu.style.left = `${rect.left}px`;
+
+            newTabMenu.classList.toggle('active');
+        });
+    }
+
+    // Close menu when clicking outside
+    document.addEventListener('click', (e) => {
+        if (!e.target.closest('.new-tab-wrapper')) {
+            newTabMenu.classList.remove('active');
+        }
+    });
+
+    // Menu items
+    document.querySelectorAll('.menu-item').forEach(item => {
+        item.addEventListener('click', () => {
+            const type = item.dataset.type;
+            createNotebookTab(type);
+            newTabMenu.classList.remove('active');
+        });
+    });
+
+    // Tab switching
+    document.addEventListener('click', (e) => {
+        const tab = e.target.closest('.tab');
+        if (tab && !e.target.closest('.new-tab-wrapper')) {
+            if (e.target.classList.contains('tab-close')) {
+                closeTab(parseInt(tab.dataset.tabId));
+            } else {
+                switchToTab(parseInt(tab.dataset.tabId));
+            }
+        }
+    });
+
+    // Settings button
+    const settingsBtn = document.getElementById('settingsBtn');
+    if (settingsBtn) {
+        settingsBtn.addEventListener('click', () => {
+            openSettings();
+        });
+    }
+
+    // Save settings button
+    const saveSettingsBtn = document.getElementById('saveSettingsBtn');
+    if (saveSettingsBtn) {
+        saveSettingsBtn.addEventListener('click', () => {
+            saveSettings();
+        });
+    }
+
+    // Cancel settings button
+    const cancelSettingsBtn = document.getElementById('cancelSettingsBtn');
+    if (cancelSettingsBtn) {
+        cancelSettingsBtn.addEventListener('click', () => {
+            switchToTab(0); // Go back to command center
+        });
+    }
+}
+
+function createNotebookTab(type, initialMessage = null, autoSwitch = true) {
+    const tabId = tabCounter++;
+
+    // Increment counter for this notebook type and create enumerated title
+    let title;
+    if (type !== 'command-center') {
+        notebookCounters[type]++;
+        title = `${notebookTitles[type]}-${notebookCounters[type]}`;
+    } else {
+        title = notebookTitles[type];
+    }
+
+    // Create tab
+    const tab = document.createElement('div');
+    tab.className = 'tab';
+    tab.dataset.tabId = tabId;
+    tab.innerHTML = `
+        <span class="tab-title">${title}</span>
+        <span class="tab-status" style="display: none;"></span>
+        <span class="tab-close">×</span>
+    `;
+
+    // Insert into the dynamic tabs container
+    const dynamicTabs = document.getElementById('dynamicTabs');
+    dynamicTabs.appendChild(tab);
+
+    // Create content
+    const content = document.createElement('div');
+    content.className = 'tab-content';
+    content.dataset.contentId = tabId;
+    content.innerHTML = createNotebookContent(type, tabId);
+
+    document.querySelector('.content-area').appendChild(content);
+
+    // Only switch to new tab if autoSwitch is true
+    if (autoSwitch) {
+        switchToTab(tabId);
+    }
+
+    // Add event listeners for the new content
+    if (type !== 'command-center') {
+        const input = content.querySelector('input');
+        const sendBtn = content.querySelector('.input-container button');
+
+        if (input && sendBtn) {
+            sendBtn.addEventListener('click', () => sendMessage(tabId));
+            input.addEventListener('keypress', (e) => {
+                if (e.key === 'Enter') sendMessage(tabId);
+            });
+        }
+
+        // If there's an initial message, automatically send it
+        if (initialMessage && input) {
+            input.value = initialMessage;
+            // Small delay to ensure everything is set up
+            setTimeout(() => {
+                sendMessage(tabId);
+            }, 100);
+        }
+    }
+
+    return tabId; // Return the tabId so we can reference it
+}
+
+function createNotebookContent(type, tabId) {
+    if (type === 'command-center') {
+        return document.querySelector('[data-content-id="0"]').innerHTML;
+    }
+
+    const placeholders = {
+        'agent': 'Enter task for agent...',
+        'code': 'Enter code query...',
+        'research': 'Enter research topic...',
+        'chat': 'Enter message...'
+    };
+
+    const fullTitles = {
+        'agent': 'AGENT',
+        'code': 'CODE',
+        'research': 'RESEARCH',
+        'chat': 'CHAT'
+    };
+
+    // Use unique ID combining type and tabId to ensure unique container IDs
+    const uniqueId = `${type}-${tabId}`;
+
+    return `
+        <div class="notebook-interface">
+            <div class="notebook-header">
+                <div>
+                    <div class="notebook-type">${type.replace('-', ' ').toUpperCase()}</div>
+                    <h2>${fullTitles[type]}</h2>
+                </div>
+            </div>
+            <div class="notebook-body">
+                <div class="chat-container" id="messages-${uniqueId}" data-notebook-type="${type}">
+                </div>
+            </div>
+            <div class="input-area">
+                <div class="input-container">
+                    <input type="text" placeholder="${placeholders[type]}" id="input-${uniqueId}">
+                    <button>SEND</button>
+                </div>
+            </div>
+        </div>
+    `;
+}
+
+function switchToTab(tabId) {
+    // Deactivate all tabs
+    document.querySelectorAll('.tab').forEach(tab => {
+        tab.classList.remove('active');
+    });
+    document.querySelectorAll('.tab-content').forEach(content => {
+        content.classList.remove('active');
+    });
+
+    // Activate selected tab
+    const tab = document.querySelector(`[data-tab-id="${tabId}"]`);
+    const content = document.querySelector(`[data-content-id="${tabId}"]`);
+
+    if (content) {
+        // For settings, there's no tab, just show the content
+        if (tabId === 'settings') {
+            content.classList.add('active');
+            activeTabId = tabId;
+        } else if (tab) {
+            tab.classList.add('active');
+            content.classList.add('active');
+            activeTabId = tabId;
+        }
+    }
+}
+
+function closeTab(tabId) {
+    if (tabId === 0) return; // Can't close command center
+
+    const tab = document.querySelector(`[data-tab-id="${tabId}"]`);
+    const content = document.querySelector(`[data-content-id="${tabId}"]`);
+
+    if (tab && content) {
+        tab.remove();
+        content.remove();
+
+        // Switch to command center if closing active tab
+        if (activeTabId === tabId) {
+            switchToTab(0);
+        }
+    }
+}
+
+async function sendMessage(tabId) {
+    const content = document.querySelector(`[data-content-id="${tabId}"]`);
+    if (!content) return;
+
+    const input = content.querySelector('input[type="text"]');
+    const chatContainer = content.querySelector('.chat-container');
+
+    if (!input || !chatContainer) return;
+
+    const message = input.value.trim();
+    if (!message) return;
+
+    // Remove welcome message if it exists (only on first user message)
+    const welcomeMsg = chatContainer.querySelector('.welcome-message');
+    if (welcomeMsg) {
+        welcomeMsg.remove();
+    }
+
+    // Add user message
+    const userMsg = document.createElement('div');
+    userMsg.className = 'message user';
+    userMsg.innerHTML = `
+        <div class="message-label">USER</div>
+        <div class="message-content">${escapeHtml(message)}</div>
+    `;
+    chatContainer.appendChild(userMsg);
+
+    // Clear input and disable it during processing
+    input.value = '';
+    input.disabled = true;
+
+    // Set tab to generating state
+    setTabGenerating(tabId, true);
+
+    // Create unique ID for this message
+    const messageId = `msg-${tabId}-${Date.now()}`;
+
+    // Create assistant message container
+    const assistantMsg = document.createElement('div');
+    assistantMsg.className = 'message assistant';
+    assistantMsg.innerHTML = `
+        <div class="message-label">ASSISTANT</div>
+        <div class="message-content" id="${messageId}"></div>
+    `;
+    chatContainer.appendChild(assistantMsg);
+    chatContainer.scrollTop = chatContainer.scrollHeight;
+
+    // Determine notebook type from chat container ID
+    const notebookType = getNotebookTypeFromContainer(chatContainer);
+
+    // Get conversation history (including the just-added user message)
+    const messages = getConversationHistory(chatContainer);
+
+    // Stream response from backend
+    await streamChatResponse(messageId, messages, chatContainer, notebookType, tabId);
+
+    // Re-enable input and mark generation as complete
+    input.disabled = false;
+    input.focus();
+    setTabGenerating(tabId, false);
+}
+
+function getNotebookTypeFromContainer(chatContainer) {
+    // Try to get type from data attribute first (for dynamically created notebooks)
+    const typeFromData = chatContainer.dataset.notebookType;
+    if (typeFromData) {
+        return typeFromData;
+    }
+
+    // Fallback: Extract notebook type from the container ID (e.g., "messages-command" -> "command")
+    const containerId = chatContainer.id;
+    if (containerId && containerId.startsWith('messages-')) {
+        const type = containerId.replace('messages-', '');
+        // Map to notebook type
+        if (type === 'command') return 'command';
+        if (type.startsWith('agent')) return 'agent';
+        if (type.startsWith('code')) return 'code';
+        if (type.startsWith('research')) return 'research';
+        if (type.startsWith('chat')) return 'chat';
+    }
+    return 'command'; // Default fallback
+}
+
+function getConversationHistory(chatContainer) {
+    const messages = [];
+    const messageElements = chatContainer.querySelectorAll('.message');
+
+    messageElements.forEach(msg => {
+        const label = msg.querySelector('.message-label')?.textContent.toLowerCase();
+        const content = msg.querySelector('.message-content')?.textContent;
+
+        if (label && content) {
+            if (label === 'user') {
+                messages.push({ role: 'user', content: content });
+            } else if (label === 'assistant') {
+                // Don't include the currently streaming message
+                if (!content.includes('streaming-content-')) {
+                    messages.push({ role: 'assistant', content: content });
+                }
+            }
+        }
+    });
+
+    return messages;
+}
+
+async function streamChatResponse(messageId, messages, chatContainer, notebookType, tabId) {
+    const streamingContent = document.getElementById(messageId);
+    if (!streamingContent) return;
+
+    const currentSettings = getSettings();
+    const backendEndpoint = 'http://localhost:8000/api';  // Our FastAPI backend
+    const llmEndpoint = currentSettings.endpoint || 'https://api.openai.com/v1';  // User's LLM endpoint
+
+    try {
+        const response = await fetch(`${backendEndpoint}/chat/stream`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                messages: messages,
+                notebook_type: notebookType,
+                stream: true,
+                endpoint: llmEndpoint,
+                token: currentSettings.token || null,
+                model: currentSettings.model || 'gpt-4'
+            })
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = '';
+        let fullResponse = '';
+
+        while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+
+            buffer += decoder.decode(value, { stream: true });
+            const lines = buffer.split('\n');
+            buffer = lines.pop() || '';
+
+            for (const line of lines) {
+                if (line.startsWith('data: ')) {
+                    const data = JSON.parse(line.slice(6));
+
+                    if (data.type === 'content') {
+                        fullResponse += data.content;
+                        streamingContent.innerHTML = parseMarkdown(fullResponse);
+                        chatContainer.scrollTop = chatContainer.scrollHeight;
+                    } else if (data.type === 'done') {
+                        // Check for new action token format: <action:type>message</action>
+                        const actionMatch = fullResponse.match(/<action:(agent|code|research|chat)>([\s\S]*?)<\/action>/i);
+                        if (actionMatch) {
+                            const action = actionMatch[1].toLowerCase();
+                            const actionMessage = actionMatch[2].trim();
+
+                            // Remove action token from display
+                            fullResponse = fullResponse.replace(/<action:(agent|code|research|chat)>[\s\S]*?<\/action>/i, '').trim();
+
+                            // If the response is empty after removing action token, remove the entire assistant message
+                            if (fullResponse.length === 0) {
+                                const assistantMsg = streamingContent.closest('.message.assistant');
+                                if (assistantMsg) {
+                                    assistantMsg.remove();
+                                }
+                            } else {
+                                streamingContent.innerHTML = parseMarkdown(fullResponse);
+                            }
+
+                            // Handle action and get the tab ID, then show widget with that ID
+                            handleActionToken(action, actionMessage, (targetTabId) => {
+                                showActionWidget(chatContainer, action, actionMessage, targetTabId);
+                            });
+                        }
+                    } else if (data.type === 'error') {
+                        streamingContent.innerHTML = `<span style="color: #c62828;">Error: ${escapeHtml(data.content)}</span>`;
+                    }
+                }
+            }
+        }
+    } catch (error) {
+        streamingContent.textContent = `Connection error: ${error.message}. Check that the backend is running and the endpoint is correct in settings.`;
+        streamingContent.style.color = '#c62828';
+        // Clear generating state on error
+        if (tabId) {
+            setTabGenerating(tabId, false);
+        }
+    }
+}
+
+function showActionWidget(chatContainer, action, message, targetTabId) {
+    const widget = document.createElement('div');
+    widget.className = 'action-widget';
+    widget.style.cursor = 'pointer';
+    widget.dataset.targetTabId = targetTabId;
+    widget.innerHTML = `
+        <div class="action-widget-header">
+            <span class="action-widget-icon">→</span>
+            <span class="action-widget-text">Opening ${action.toUpperCase()} notebook...</span>
+            <span class="action-widget-type">${action}</span>
+        </div>
+        <div class="action-widget-message">"${escapeHtml(message)}"</div>
+    `;
+
+    // Make widget clickable to jump to the notebook
+    widget.addEventListener('click', () => {
+        switchToTab(parseInt(targetTabId));
+    });
+
+    chatContainer.appendChild(widget);
+    chatContainer.scrollTop = chatContainer.scrollHeight;
+}
+
+function handleActionToken(action, message, callback) {
+    // Open the notebook with the extracted message as initial prompt
+    // Don't auto-switch to the new tab (autoSwitch = false)
+    setTimeout(() => {
+        const tabId = createNotebookTab(action, message, false);
+        if (callback) {
+            callback(tabId);
+        }
+    }, 500);
+}
+
+function setTabGenerating(tabId, isGenerating) {
+    const tab = document.querySelector(`[data-tab-id="${tabId}"]`);
+    if (!tab) return;
+
+    const statusIndicator = tab.querySelector('.tab-status');
+    if (!statusIndicator) return;
+
+    if (isGenerating) {
+        statusIndicator.style.display = 'block';
+        statusIndicator.classList.add('generating');
+    } else {
+        statusIndicator.classList.remove('generating');
+        // Keep visible but stop animation
+        setTimeout(() => {
+            statusIndicator.style.display = 'none';
+        }, 300);
+    }
+}
+
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
+function parseMarkdown(text) {
+    // Simple markdown parser for code blocks and inline code
+    let html = escapeHtml(text);
+
+    // Code blocks (```language\ncode\n```)
+    html = html.replace(/```(\w+)?\n([\s\S]*?)```/g, (match, lang, code) => {
+        return `<pre><code>${code.trim()}</code></pre>`;
+    });
+
+    // Inline code (`code`)
+    html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
+
+    // Bold (**text**)
+    html = html.replace(/\*\*([^\*]+)\*\*/g, '<strong>$1</strong>');
+
+    // Italic (*text*)
+    html = html.replace(/\*([^\*]+)\*/g, '<em>$1</em>');
+
+    return html;
+}
+
+// Settings management
+function loadSettings() {
+    // Try to load from localStorage first
+    const savedSettings = localStorage.getItem('productive_settings');
+    if (savedSettings) {
+        try {
+            settings = JSON.parse(savedSettings);
+        } catch (e) {
+            console.error('Failed to parse settings:', e);
+        }
+    }
+}
+
+function openSettings() {
+    // Populate the settings form
+    document.getElementById('setting-endpoint').value = settings.endpoint || '';
+    document.getElementById('setting-token').value = settings.token || '';
+    document.getElementById('setting-model').value = settings.model || 'gpt-4';
+
+    // Clear any status message
+    const status = document.getElementById('settingsStatus');
+    status.className = 'settings-status';
+    status.textContent = '';
+
+    // Switch to settings view
+    switchToTab('settings');
+}
+
+function saveSettings() {
+    // Get values from form
+    const endpoint = document.getElementById('setting-endpoint').value.trim();
+    const token = document.getElementById('setting-token').value.trim();
+    const model = document.getElementById('setting-model').value.trim();
+
+    // Validate endpoint
+    if (!endpoint) {
+        showSettingsStatus('LLM Endpoint is required', 'error');
+        return;
+    }
+
+    // Validate model
+    if (!model) {
+        showSettingsStatus('Model name is required', 'error');
+        return;
+    }
+
+    // Update settings
+    settings.endpoint = endpoint;
+    settings.token = token;
+    settings.model = model;
+
+    // Save to localStorage
+    localStorage.setItem('productive_settings', JSON.stringify(settings));
+
+    // Show success message
+    showSettingsStatus('Settings saved successfully', 'success');
+
+    // Go back to command center after a short delay
+    setTimeout(() => {
+        switchToTab(0);
+    }, 1000);
+}
+
+function showSettingsStatus(message, type) {
+    const status = document.getElementById('settingsStatus');
+    status.textContent = message;
+    status.className = `settings-status ${type}`;
+}
+
+// Export settings for use in API calls
+function getSettings() {
+    return settings;
+}

style.css

@@ -0,0 +1,654 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'JetBrains Mono', monospace;
+    background-color: #ffffff;
+    color: #1a1a1a;
+    height: 100vh;
+    overflow: hidden;
+}
+
+.app-container {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+}
+
+/* Tab Bar */
+.tab-bar {
+    display: flex;
+    align-items: stretch;
+    background: #f5f5f5;
+    padding: 0;
+    gap: 0;
+    overflow-x: auto;
+    overflow-y: visible;
+    border-bottom: 1px solid #ccc;
+    min-height: fit-content;
+    position: relative;
+    z-index: 10;
+}
+
+.tab-bar-spacer {
+    flex: 1;
+}
+
+#dynamicTabs {
+    display: flex;
+    align-items: stretch;
+}
+
+.tab {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 20px;
+    background: #f5f5f5;
+    color: #666;
+    cursor: pointer;
+    border: none;
+    white-space: nowrap;
+    transition: all 0.2s;
+    border-right: 1px solid #ccc;
+    font-size: 12px;
+    font-weight: 500;
+    letter-spacing: 1px;
+    position: relative;
+}
+
+.tab:hover {
+    background: #eee;
+    color: #1a1a1a;
+}
+
+.tab.active {
+    background: #ffffff;
+    color: #1a1a1a;
+    border-bottom: 2px solid #1b5e20;
+}
+
+.tab-title {
+    font-size: 12px;
+    font-weight: 500;
+}
+
+.tab-close {
+    margin-left: 12px;
+    font-size: 14px;
+    opacity: 0.5;
+    transition: opacity 0.2s;
+}
+
+.tab-close:hover {
+    opacity: 1;
+}
+
+.tab-status {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #1b5e20;
+    margin-left: 4px;
+}
+
+.tab-status.generating {
+    background: #1b5e20;
+    animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse {
+    0%, 100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+    50% {
+        opacity: 0.5;
+        transform: scale(0.8);
+    }
+}
+
+.settings-btn {
+    background: #f5f5f5;
+    color: #666;
+    border: none;
+    border-right: 1px solid #ccc;
+    padding: 12px 20px;
+    font-size: 12px;
+    font-weight: 500;
+    letter-spacing: 1px;
+    cursor: pointer;
+    transition: all 0.2s;
+    font-family: inherit;
+}
+
+.settings-btn:hover {
+    background: #eee;
+    color: #1a1a1a;
+}
+
+.new-tab-wrapper {
+    position: static;
+    display: flex;
+    align-items: center;
+}
+
+.new-tab-btn {
+    background: #f5f5f5;
+    color: #666;
+    border: none;
+    border-right: 1px solid #ccc;
+    padding: 12px 20px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: all 0.2s;
+    font-family: inherit;
+}
+
+.new-tab-btn:hover {
+    background: #eee;
+    color: #1a1a1a;
+}
+
+.new-tab-menu {
+    display: none;
+    position: fixed;
+    background: white;
+    border: 1px solid #ccc;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    z-index: 9999;
+    min-width: 180px;
+}
+
+.new-tab-menu.active {
+    display: block;
+}
+
+.menu-item {
+    padding: 12px 16px;
+    font-size: 12px;
+    font-weight: 500;
+    letter-spacing: 0.5px;
+    cursor: pointer;
+    border-bottom: 1px solid #eee;
+    transition: all 0.2s;
+    color: #1a1a1a;
+    background: white;
+}
+
+.menu-item:last-child {
+    border-bottom: none;
+}
+
+.menu-item:hover {
+    background: #1b5e20;
+    color: white;
+}
+
+/* Content Area */
+.content-area {
+    flex: 1;
+    overflow: hidden;
+    position: relative;
+    z-index: 1;
+}
+
+.tab-content {
+    display: none;
+    height: 100%;
+    overflow-y: auto;
+    padding: 20px;
+}
+
+.tab-content.active {
+    display: flex;
+    flex-direction: column;
+}
+
+/* Launcher Buttons */
+.launcher-btn {
+    background: white;
+    border: 1px solid #ccc;
+    color: #1a1a1a;
+    padding: 6px 12px;
+    font-family: inherit;
+    font-size: 10px;
+    font-weight: 500;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s;
+    letter-spacing: 0.5px;
+    white-space: nowrap;
+}
+
+.launcher-btn:hover {
+    background: #1b5e20;
+    color: #ffffff;
+    border-color: #1b5e20;
+}
+
+.launcher-btn:active {
+    transform: translateY(1px);
+}
+
+/* Notebook Content */
+.notebook-interface {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.notebook-header {
+    background: #f5f5f5;
+    padding: 15px 20px;
+    border-bottom: 1px solid #ccc;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 20px;
+}
+
+.header-actions {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+}
+
+.notebook-type {
+    font-size: 10px;
+    color: #666;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+.notebook-header h2 {
+    font-size: 14px;
+    font-weight: 500;
+    letter-spacing: 1px;
+    color: #1a1a1a;
+    margin-top: 4px;
+}
+
+.notebook-body {
+    flex: 1;
+    background: white;
+    padding: 20px;
+    overflow-y: auto;
+}
+
+.chat-container {
+    max-width: 900px;
+    margin: 0 auto;
+    font-size: 13px;
+}
+
+.welcome-message {
+    color: #999;
+    font-size: 13px;
+    line-height: 1.8;
+    max-width: 700px;
+    margin: 0 auto;
+    padding: 40px 20px;
+}
+
+.welcome-message p {
+    margin-bottom: 16px;
+}
+
+.welcome-message ul {
+    list-style: none;
+    padding-left: 0;
+    margin: 12px 0;
+}
+
+.welcome-message li {
+    margin: 8px 0;
+    padding-left: 20px;
+    position: relative;
+}
+
+.welcome-message li::before {
+    content: "•";
+    position: absolute;
+    left: 0;
+    color: #1b5e20;
+}
+
+.welcome-message strong {
+    color: #666;
+    font-weight: 500;
+}
+
+.message {
+    margin-bottom: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.message-label {
+    font-size: 10px;
+    font-weight: 500;
+    color: #666;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+.message-content {
+    padding: 12px 15px;
+    background: #f5f5f5;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    line-height: 1.6;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+
+.message-content code {
+    background: #e0e0e0;
+    padding: 2px 6px;
+    border-radius: 3px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 12px;
+}
+
+.message-content pre {
+    background: #2c2c2c;
+    color: #f8f8f8;
+    padding: 12px;
+    border-radius: 4px;
+    overflow-x: auto;
+    margin: 8px 0;
+}
+
+.message-content pre code {
+    background: transparent;
+    padding: 0;
+    color: #f8f8f8;
+}
+
+.message.user .message-content {
+    background: #eee;
+}
+
+.message.assistant .message-content {
+    background: #f5f5f5;
+}
+
+.input-area {
+    padding: 15px 20px;
+    background: white;
+    border-top: 1px solid #ccc;
+}
+
+.input-container {
+    max-width: 900px;
+    margin: 0 auto;
+    display: flex;
+    gap: 12px;
+}
+
+.input-container input {
+    flex: 1;
+    padding: 12px 15px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-family: inherit;
+    font-size: 13px;
+    background: #f5f5f5;
+    color: #1a1a1a;
+    outline: none;
+    transition: border-color 0.2s ease;
+}
+
+.input-container input:focus {
+    border-color: #1b5e20;
+    box-shadow: 0 0 0 1px #1b5e20;
+}
+
+.input-container input::placeholder {
+    color: #999;
+}
+
+.input-container button {
+    padding: 12px 24px;
+    background: #f5f5f5;
+    border: 1px solid #ccc;
+    color: #1a1a1a;
+    font-family: inherit;
+    font-size: 12px;
+    font-weight: 500;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s;
+    letter-spacing: 0.5px;
+}
+
+.input-container button:hover {
+    background: #1b5e20;
+    color: #ffffff;
+    border-color: #1b5e20;
+}
+
+.input-container button:active {
+    transform: translateY(1px);
+}
+
+/* Scrollbar styling */
+.notebook-body::-webkit-scrollbar,
+.tab-content::-webkit-scrollbar {
+    width: 6px;
+}
+
+.notebook-body::-webkit-scrollbar-track,
+.tab-content::-webkit-scrollbar-track {
+    background: #f5f5f5;
+}
+
+.notebook-body::-webkit-scrollbar-thumb,
+.tab-content::-webkit-scrollbar-thumb {
+    background: #ccc;
+    border-radius: 3px;
+}
+
+/* Settings Interface */
+.settings-interface {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background: white;
+}
+
+.settings-header {
+    background: #f5f5f5;
+    padding: 20px;
+    border-bottom: 1px solid #ccc;
+}
+
+.settings-header h2 {
+    font-size: 18px;
+    font-weight: 500;
+    letter-spacing: 2px;
+    color: #1a1a1a;
+}
+
+.settings-body {
+    flex: 1;
+    padding: 40px;
+    overflow-y: auto;
+    max-width: 800px;
+}
+
+.settings-section {
+    margin-bottom: 32px;
+}
+
+.settings-label {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    margin-bottom: 8px;
+}
+
+.label-text {
+    font-size: 11px;
+    font-weight: 500;
+    color: #1a1a1a;
+    letter-spacing: 1px;
+}
+
+.label-description {
+    font-size: 11px;
+    color: #666;
+    font-weight: 300;
+}
+
+.settings-input {
+    width: 100%;
+    padding: 12px 15px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-family: inherit;
+    font-size: 13px;
+    background: #f5f5f5;
+    color: #1a1a1a;
+    outline: none;
+    transition: border-color 0.2s ease;
+}
+
+.settings-input:focus {
+    border-color: #1b5e20;
+    box-shadow: 0 0 0 1px #1b5e20;
+    background: white;
+}
+
+.settings-input::placeholder {
+    color: #999;
+}
+
+.settings-actions {
+    display: flex;
+    gap: 12px;
+    margin-top: 32px;
+}
+
+.settings-save-btn,
+.settings-cancel-btn {
+    padding: 12px 24px;
+    font-family: inherit;
+    font-size: 12px;
+    font-weight: 500;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s;
+    letter-spacing: 0.5px;
+    border: 1px solid #ccc;
+}
+
+.settings-save-btn {
+    background: #1b5e20;
+    color: white;
+    border-color: #1b5e20;
+}
+
+.settings-save-btn:hover {
+    background: #145017;
+}
+
+.settings-cancel-btn {
+    background: #f5f5f5;
+    color: #1a1a1a;
+}
+
+.settings-cancel-btn:hover {
+    background: #eee;
+}
+
+.settings-status {
+    margin-top: 16px;
+    font-size: 12px;
+    padding: 12px;
+    border-radius: 4px;
+    display: none;
+}
+
+.settings-status.success {
+    display: block;
+    background: #e8f5e9;
+    color: #1b5e20;
+    border: 1px solid #1b5e20;
+}
+
+.settings-status.error {
+    display: block;
+    background: #ffebee;
+    color: #c62828;
+    border: 1px solid #c62828;
+}
+
+/* Action Widget */
+.action-widget {
+    margin: 8px 0;
+    padding: 10px 12px;
+    background: #e8f5e9;
+    border: 1px solid #1b5e20;
+    border-left: 4px solid #1b5e20;
+    border-radius: 4px;
+    font-size: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    transition: all 0.2s;
+}
+
+.action-widget:hover {
+    background: #c8e6c9;
+    transform: translateX(2px);
+}
+
+.action-widget-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.action-widget-icon {
+    font-weight: 700;
+    color: #1b5e20;
+}
+
+.action-widget-text {
+    flex: 1;
+    color: #1a1a1a;
+}
+
+.action-widget-type {
+    font-weight: 500;
+    text-transform: uppercase;
+    color: #1b5e20;
+    font-size: 10px;
+    letter-spacing: 0.5px;
+}
+
+.action-widget-message {
+    font-size: 10px;
+    color: #666;
+    padding: 6px 8px;
+    background: rgba(27, 94, 32, 0.05);
+    border-radius: 3px;
+    font-style: italic;
+    line-height: 1.4;
+}
+
+@media (max-width: 1024px) {
+    .notebook-types {
+        grid-template-columns: 1fr;
+    }
+
+    .settings-body {
+        padding: 20px;
+    }
+}