Spaces:

MCP-1st-Birthday
/

MonteWalk

Sleeping

App Files Files Community

Obotu commited on Nov 30, 2025

Commit

2a8dd62

1 Parent(s): 50ad37f

feat: Implement initial web UI with HTML, CSS, and JavaScript, .

Browse files

Files changed (20) hide show

.gitignore +4 -0
data/activity.log +0 -0
index.html +47 -0
scripts.js +83 -0
styles.css +179 -0
tools/__pycache__/__init__.cpython-312.pyc +0 -0
tools/__pycache__/alpaca_broker.cpython-312.pyc +0 -0
tools/__pycache__/backtesting.cpython-312.pyc +0 -0
tools/__pycache__/crypto_data.cpython-312.pyc +0 -0
tools/__pycache__/execution.cpython-312.pyc +0 -0
tools/__pycache__/feature_engineering.cpython-312.pyc +0 -0
tools/__pycache__/logger.cpython-312.pyc +0 -0
tools/__pycache__/market_data.cpython-312.pyc +0 -0
tools/__pycache__/news_intelligence.cpython-312.pyc +0 -0
tools/__pycache__/portfolio_optimizer.cpython-312.pyc +0 -0
tools/__pycache__/resources.cpython-312.pyc +0 -0
tools/__pycache__/risk_engine.cpython-312.pyc +0 -0
tools/__pycache__/unusual_scanner.cpython-312.pyc +0 -0
tools/__pycache__/watchlist.cpython-312.pyc +0 -0
ui/tools.py +50 -74

.gitignore ADDED Viewed

	@@ -0,0 +1,4 @@

+.venv
+__pycache__
+test_modal.py
+ui/ __pycache__

data/activity.log ADDED Viewed

File without changes

index.html ADDED Viewed

	@@ -0,0 +1,47 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MonteWalk</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div id="app">
+        <header>
+            <div class="logo">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
+                    <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
+                </svg>
+                <h1>MonteWalk</h1>
+            </div>
+            <div class="status">
+                <span class="status-indicator"></span>
+                <span>SYSTEM ONLINE</span>
+            </div>
+        </header>
+        <main>
+            <div class="dashboard">
+                <div class="portfolio"></div>
+                <div class="watchlist"></div>
+                <div class="news"></div>
+                <div class="crypto"></div>
+            </div>
+            <div class="toolbox">
+                <h2>Toolbox</h2>
+                <div class="tool-grid"></div>
+            </div>
+        </main>
+        <div class="modal" id="tool-modal">
+            <div class="modal-content">
+                <button class="modal-close-btn" id="modal-close-btn">&times;</button>
+                <div id="tool-interface"></div>
+            </div>
+        </div>
+    </div>
+    <script src="scripts.js"></script>
+</body>
+</html>

scripts.js ADDED Viewed

	@@ -0,0 +1,83 @@

+document.addEventListener('DOMContentLoaded', () => {
+    const toolGrid = document.querySelector('.tool-grid');
+    const toolModal = document.getElementById('tool-modal');
+    const modalCloseBtn = document.getElementById('modal-close-btn');
+    const toolInterface = document.getElementById('tool-interface');
+    // Dummy data for tools (replace with actual data from backend)
+    const tools = [
+        { name: 'Get Price', description: 'Fetches real-time price data for a symbol.', category: 'Market Data' },
+        { name: 'Place Order', description: 'Places a trade order in the market.', category: 'Execution' },
+        { name: 'Portfolio Risk', description: 'Analyzes the risk of your portfolio.', category: 'Risk Management' },
+        { name: 'Run Backtest', description: 'Executes a backtest on a trading strategy.', category: 'Backtesting' },
+        { name: 'Analyze Ticker', description: 'Performs comprehensive analysis on a ticker.', category: 'Prompts' },
+    ];
+    // Render tool cards
+    tools.forEach(tool => {
+        const toolCard = document.createElement('div');
+        toolCard.classList.add('tool-card');
+        toolCard.innerHTML = `
+            <h3>${tool.name}</h3>
+            <p>${tool.description}</p>
+            <div class="tool-tags">
+                <span class="tool-tag">${tool.category}</span>
+            </div>
+        `;
+        toolCard.addEventListener('click', () => openToolModal(tool));
+        toolGrid.appendChild(toolCard);
+    });
+    // Open tool modal
+    function openToolModal(tool) {
+        toolInterface.innerHTML = `
+            <h2>${tool.name}</h2>
+            <p>${tool.description}</p>
+            <!-- Here you would dynamically create input fields based on the tool's signature -->
+            <div class="input-field">
+                <label for="symbol">Symbol:</label>
+                <input type="text" id="symbol" placeholder="e.g. AAPL">
+            </div>
+            <button id="run-tool-btn">Run Tool</button>
+            <pre id="tool-result"></pre>
+        `;
+        toolModal.classList.add('show');
+        document.getElementById('run-tool-btn').addEventListener('click', async () => {
+            const symbol = document.getElementById('symbol').value;
+            const resultElement = document.getElementById('tool-result');
+            resultElement.textContent = 'Running tool...';
+            // Example of calling a backend tool (requires window.openai to be available)
+            // if (window.openai && window.openai.callTool) {
+            //     try {
+            //         const result = await window.openai.callTool(tool.name.replace(/\s+/g, '_').toLowerCase(), { symbol: symbol });
+            //         resultElement.textContent = JSON.stringify(result, null, 2);
+            //     } catch (error) {
+            //         resultElement.textContent = `Error: ${error.message}`;
+            //     }
+            // } else {
+            //     resultElement.textContent = 'MCP not available. Cannot call backend tools.';
+            // }
+            resultElement.textContent = `Simulating tool run for ${tool.name} with symbol: ${symbol}`;
+        });
+    }
+    // Close tool modal
+    modalCloseBtn.addEventListener('click', () => {
+        toolModal.classList.remove('show');
+    });
+    // Close modal on outside click
+    window.addEventListener('click', (event) => {
+        if (event.target === toolModal) {
+            toolModal.classList.remove('show');
+        }
+    });
+    // Dummy dashboard rendering (replace with actual data)
+    document.querySelector('.portfolio').innerHTML = '<div class="trading-card"><h3>Portfolio Overview</h3><p>Detailed portfolio data will go here.</p></div>';
+    document.querySelector('.watchlist').innerHTML = '<div class="trading-card"><h3>Watchlist</h3><p>Your watched symbols will appear here.</p></div>';
+    document.querySelector('.news').innerHTML = '<div class="trading-card"><h3>Intel Feed</h3><p>Latest market news and sentiment.</p></div>';
+    document.querySelector('.crypto').innerHTML = '<div class="trading-card"><h3>Crypto Movers</h3><p>Trending cryptocurrency data.</p></div>';
+});

styles.css ADDED Viewed

	@@ -0,0 +1,179 @@

+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
+:root {
+    --bg-primary: #0D0E12;
+    --bg-secondary: #12141A;
+    --bg-tertiary: #1A1C23;
+    --fill-primary: #242731;
+    --fill-secondary: #343845;
+    --text-primary: #F0F2F5;
+    --text-secondary: #A8B0BD;
+    --text-muted: #5F6572;
+    --text-disabled: #4A4E59;
+    --accent-primary: #4A55FF;
+    --accent-secondary: #8C54FF;
+    --accent-tertiary: #C247FF;
+    --danger: #FF4D4D;
+    --warning: #FFD166;
+    --success: #06D6A0;
+    --info: #00A2FF;
+    --font-sans: 'Inter', sans-serif;
+    --font-mono: 'JetBrains Mono', monospace;
+    --space-xs: 0.25rem;
+    --space-sm: 0.5rem;
+    --space-md: 1rem;
+    --space-lg: 1.5rem;
+    --space-xl: 2.5rem;
+    --radius-sm: 4px;
+    --radius-md: 8px;
+    --radius-lg: 16px;
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
+}
+body {
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+    font-family: var(--font-sans);
+    margin: 0;
+    padding: var(--space-lg);
+}
+#app {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-lg);
+}
+header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid var(--fill-primary);
+    padding-bottom: var(--space-md);
+}
+.logo {
+    display: flex;
+    align-items: center;
+    gap: var(--space-md);
+}
+.logo h1 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin: 0;
+}
+.status {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    font-family: var(--font-mono);
+    font-size: 0.8rem;
+    color: var(--success);
+}
+.status-indicator {
+    width: 8px;
+    height: 8px;
+    background-color: var(--success);
+    border-radius: 50%;
+    box-shadow: 0 0 8px var(--success);
+}
+main {
+    display: grid;
+    grid-template-columns: 3fr 1fr;
+    gap: var(--space-lg);
+}
+.dashboard {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto auto;
+    gap: var(--space-lg);
+}
+.portfolio {
+    grid-column: 1 / -1;
+}
+.trading-card {
+    background-color: var(--bg-secondary);
+    border: 1px solid var(--fill-primary);
+    border-radius: var(--radius-lg);
+    padding: var(--space-lg);
+}
+.toolbox h2 {
+    margin-top: 0;
+}
+.tool-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: var(--space-md);
+}
+.tool-card {
+    background-color: var(--bg-secondary);
+    border: 1px solid var(--fill-primary);
+    border-radius: var(--radius-lg);
+    padding: var(--space-lg);
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+}
+.tool-card:hover {
+    border-color: var(--accent-primary);
+    transform: translateY(-2px);
+}
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    display: none;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+.modal.show {
+    display: flex;
+}
+.modal-content {
+    background-color: var(--bg-secondary);
+    padding: var(--space-xl);
+    border-radius: var(--radius-lg);
+    width: 90%;
+    max-width: 600px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+    border: 1px solid var(--fill-primary);
+    position: relative;
+}
+.modal-close-btn {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    background: none;
+    border: none;
+    color: var(--text-secondary);
+    font-size: 1.5rem;
+    cursor: pointer;
+}

tools/__pycache__/__init__.cpython-312.pyc CHANGED Viewed

Binary files a/tools/__pycache__/__init__.cpython-312.pyc and b/tools/__pycache__/__init__.cpython-312.pyc differ

tools/__pycache__/alpaca_broker.cpython-312.pyc CHANGED Viewed

Binary files a/tools/__pycache__/alpaca_broker.cpython-312.pyc and b/tools/__pycache__/alpaca_broker.cpython-312.pyc differ

tools/__pycache__/backtesting.cpython-312.pyc CHANGED Viewed

Binary files a/tools/__pycache__/backtesting.cpython-312.pyc and b/tools/__pycache__/backtesting.cpython-312.pyc differ

tools/__pycache__/crypto_data.cpython-312.pyc CHANGED Viewed

Binary files a/tools/__pycache__/crypto_data.cpython-312.pyc and b/tools/__pycache__/crypto_data.cpython-312.pyc differ

tools/__pycache__/execution.cpython-312.pyc CHANGED Viewed

Binary files a/tools/__pycache__/execution.cpython-312.pyc and b/tools/__pycache__/execution.cpython-312.pyc differ

tools/__pycache__/feature_engineering.cpython-312.pyc CHANGED Viewed

Binary files a/tools/__pycache__/feature_engineering.cpython-312.pyc and b/tools/__pycache__/feature_engineering.cpython-312.pyc differ

tools/__pycache__/logger.cpython-312.pyc CHANGED Viewed

Binary files a/tools/__pycache__/logger.cpython-312.pyc and b/tools/__pycache__/logger.cpython-312.pyc differ

tools/__pycache__/market_data.cpython-312.pyc CHANGED Viewed

Binary files a/tools/__pycache__/market_data.cpython-312.pyc and b/tools/__pycache__/market_data.cpython-312.pyc differ

tools/__pycache__/news_intelligence.cpython-312.pyc CHANGED Viewed

Binary files a/tools/__pycache__/news_intelligence.cpython-312.pyc and b/tools/__pycache__/news_intelligence.cpython-312.pyc differ

tools/__pycache__/portfolio_optimizer.cpython-312.pyc CHANGED Viewed

Binary files a/tools/__pycache__/portfolio_optimizer.cpython-312.pyc and b/tools/__pycache__/portfolio_optimizer.cpython-312.pyc differ

tools/__pycache__/resources.cpython-312.pyc CHANGED Viewed

Binary files a/tools/__pycache__/resources.cpython-312.pyc and b/tools/__pycache__/resources.cpython-312.pyc differ

tools/__pycache__/risk_engine.cpython-312.pyc CHANGED Viewed

Binary files a/tools/__pycache__/risk_engine.cpython-312.pyc and b/tools/__pycache__/risk_engine.cpython-312.pyc differ

tools/__pycache__/unusual_scanner.cpython-312.pyc CHANGED Viewed

Binary files a/tools/__pycache__/unusual_scanner.cpython-312.pyc and b/tools/__pycache__/unusual_scanner.cpython-312.pyc differ

tools/__pycache__/watchlist.cpython-312.pyc CHANGED Viewed

Binary files a/tools/__pycache__/watchlist.cpython-312.pyc and b/tools/__pycache__/watchlist.cpython-312.pyc differ

ui/tools.py CHANGED Viewed

@@ -15,37 +15,36 @@ def render_tools_tab(tools_map: Dict[str, List[Callable]]):
     # Modal with simpler structure - no nested groups
     with gr.Column(visible=True, elem_id="modal_wrapper", elem_classes="modal-wrapper") as modal:
-        # Close button at top
-        with gr.Row():
-            gr.Markdown("")  # Spacer
-            close_button = gr.Button("✕ Close", size="sm", variant="secondary")
-        # Title and description
-        tool_title_md = gr.Markdown("## Tool Name")
-        tool_desc_md = gr.Markdown("_Description_")
-        gr.Markdown("---")  # Divider
-        # Inputs
-        input_components = []
-        for i in range(5):
-            input_components.append(
-                gr.Textbox(
-                    label=f"Parameter {i+1}",
-                    visible=True,
-                    interactive=True,
-                    elem_classes="modal-input"
                 )
-            )
-        # Run button and output
-        run_button = gr.Button("▶ Run Tool", variant="primary")
-        output = gr.Textbox(
-            label="Output",
-            lines=10,
-            interactive=False,
-            max_lines=20
-        )
     # Function to show modal with tool info (Content Only)
     def update_modal_content(tool: Callable):
@@ -264,7 +263,6 @@ def render_tools_tab(tools_map: Dict[str, List[Callable]]):
             padding: 0 !important;
         }
-    /* Modal Styles */
     /* Modal Styles */
     .modal-wrapper {
         position: fixed !important;
@@ -272,14 +270,14 @@ def render_tools_tab(tools_map: Dict[str, List[Callable]]):
         left: 0 !important;
         width: 100vw !important;
         height: 100vh !important;
-        background-color: rgba(0, 0, 0, 0.6) !important;
         backdrop-filter: blur(8px) !important;
         -webkit-backdrop-filter: blur(8px) !important;
         display: none !important; /* Hidden by default */
         justify-content: center !important;
         align-items: center !important;
         z-index: 9999 !important;
-        transition: opacity 0.3s ease;
         opacity: 0;
     }
@@ -290,15 +288,15 @@ def render_tools_tab(tools_map: Dict[str, List[Callable]]):
     }
     .modal-content {
-        background: var(--bg-secondary) !important;
-        border: 1px solid var(--fill-secondary) !important;
-        border-radius: var(--radius-lg) !important;
         padding: 0 !important;
-        width: 90% !important;
-        max-width: 600px !important;
         max-height: 85vh !important;
         overflow-y: auto !important;
-        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
         position: relative !important;
         display: flex !important;
         flex-direction: column !important;
@@ -306,47 +304,25 @@ def render_tools_tab(tools_map: Dict[str, List[Callable]]):
     }
     @keyframes modalSlideIn {
-        from { opacity: 0; transform: translateY(20px) scale(0.95); }
         to { opacity: 1; transform: translateY(0) scale(1); }
     }
-    .modal-header {
-        padding: var(--space-lg) !important;
-        border-bottom: 1px solid var(--fill-primary) !important;
-        display: flex !important;
-        justify-content: space-between !important;
-        align-items: center !important;
-        background: rgba(255, 255, 255, 0.02) !important;
-    }
-    .modal-body {
-        padding: var(--space-lg) !important;
-        display: flex !important;
-        flex-direction: column !important;
-        gap: var(--space-md) !important;
     }
-    .modal-close-btn {
-        /* position: absolute !important; <-- REMOVED */
-        background: transparent !important;
-        border: 1px solid var(--fill-secondary) !important; /* Added border for visibility */
-        color: var(--text-muted) !important;
-        font-size: 1rem !important;
-        cursor: pointer !important;
-        padding: 0.25rem 0.75rem !important;
-        border-radius: var(--radius-md) !important;
-        transition: all 0.2s ease !important;
     }
-    .modal-close-btn:hover {
-        background: var(--fill-primary) !important;
-        color: var(--text-primary) !important;
-        border-color: var(--text-secondary) !important;
     }
-    /* Hide Gradio's default close button if it appears */
-    .modal-wrapper > .close {
-        display: none !important;
     }
     </style>
     """)

     # Modal with simpler structure - no nested groups
     with gr.Column(visible=True, elem_id="modal_wrapper", elem_classes="modal-wrapper") as modal:
+        with gr.Column(elem_classes="modal-content"):
+            # Header: Title + Close Button
+            with gr.Row(elem_classes="modal-header"):
+                tool_title_md = gr.Markdown("## Tool Name", elem_classes="modal-title")
+                close_button = gr.Button("✕", size="sm", elem_classes="modal-close-btn")
+            # Body: Description + Inputs + Run + Output
+            with gr.Column(elem_classes="modal-body"):
+                tool_desc_md = gr.Markdown("_Description_")
+                # Inputs
+                input_components = []
+                for i in range(5):
+                    input_components.append(
+                        gr.Textbox(
+                            label=f"Parameter {i+1}",
+                            visible=True,
+                            interactive=True,
+                            elem_classes="modal-input"
+                        )
+                    )
+                # Run button and output
+                run_button = gr.Button("▶ Run Tool", variant="primary", size="lg")
+                output = gr.Textbox(
+                    label="Output",
+                    lines=8,
+                    interactive=False,
+                    max_lines=15
                 )
     # Function to show modal with tool info (Content Only)
     def update_modal_content(tool: Callable):
             padding: 0 !important;
         }
     /* Modal Styles */
     .modal-wrapper {
         position: fixed !important;
         left: 0 !important;
         width: 100vw !important;
         height: 100vh !important;
+        background-color: rgba(0, 0, 0, 0.7) !important;
         backdrop-filter: blur(8px) !important;
         -webkit-backdrop-filter: blur(8px) !important;
         display: none !important; /* Hidden by default */
         justify-content: center !important;
         align-items: center !important;
         z-index: 9999 !important;
+        transition: opacity 0.2s ease;
         opacity: 0;
     }
     }
     .modal-content {
+        background: rgba(15, 23, 42, 0.95) !important; /* Dark slate with slight transparency */
+        border: 1px solid rgba(255, 255, 255, 0.1) !important;
+        border-radius: 16px !important;
         padding: 0 !important;
+        width: 100% !important;
+        max-width: 480px !important; /* Compact width */
         max-height: 85vh !important;
         overflow-y: auto !important;
+        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
         position: relative !important;
         display: flex !important;
         flex-direction: column !important;
     }
     @keyframes modalSlideIn {
+        from { opacity: 0; transform: translateY(20px) scale(0.98); }
         to { opacity: 1; transform: translateY(0) scale(1); }
     }
+    /* Hide default Gradio close button */
+    .modal-wrapper > .close {
+        display: none !important;
     }
+    /* Custom Scrollbar for modal */
+    .modal-content::-webkit-scrollbar {
+        width: 6px;
     }
+    .modal-content::-webkit-scrollbar-track {
+        background: transparent;
     }
+    .modal-content::-webkit-scrollbar-thumb {
+        background-color: rgba(255, 255, 255, 0.1);
+        border-radius: 20px;
     }
     </style>
     """)