Changing tabbed UI for a Sidebar

app.py

@@ -120,6 +120,18 @@ CSS_STYLES = """
         white-space: pre-wrap;
     }
 
+    /* Sidebar Container */
+    .app-sidebar {
+        background-color: rgba(255, 255, 255, 0.02) !important;
+        border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
+    }
+    @media (prefers-color-scheme: light) {
+        .app-sidebar {
+            background-color: rgba(0, 0, 0, 0.02) !important;
+            border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
+        }
+    }
+
     /* Historical safeguard: if any h1 appears inside tabs, don't attach pseudo content */
     .gradio-container [role=\"tabpanel\"] h1::before,
     .gradio-container [role=\"tabpanel\"] h1::after {
@@ -197,6 +209,13 @@ CSS_STYLES = """
     .info-card pre code {
         display: block;
     }
+    .info-card p {
+        word-wrap: break-word;
+        overflow-wrap: break-word;
+    }
+    .info-card p code {
+        word-break: break-all;
+    }
     .info-list {
         margin: 6px 0 0 18px;
         padding: 0;
@@ -222,58 +241,59 @@ CSS_STYLES = """
         }
     }
 
-    /* Tabs - modern, evenly distributed full-width buttons */
-    .gradio-container [role="tablist"] {
-        display: flex;
-        gap: 8px;
-        flex-wrap: nowrap;
-        align-items: stretch;
-        width: 100%;
-    }
-    .gradio-container [role="tab"] {
-        flex: 1 1 0;
-        min-width: 0; /* allow shrinking to fit */
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        padding: 10px 12px;
-        border-radius: 10px;
-        border: 1px solid rgba(255, 255, 255, 0.08);
-        background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03));
-        transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .06s ease;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
+    /* Sidebar Navigation - styled like the previous tabs */
+    .sidebar-nav {
+        background: transparent !important;
+        border: none !important;
+        padding: 0 !important;
     }
-    .gradio-container [role="tab"]:hover {
-        border-color: rgba(99,102,241,0.28);
-        background: linear-gradient(180deg, rgba(99,102,241,0.10), rgba(59,130,246,0.08));
+    .sidebar-nav .form {
+        gap: 8px !important;
+        display: flex !important;
+        flex-direction: column !important;
+        border: none !important;
+        background: transparent !important;
     }
-    .gradio-container [role="tab"][aria-selected="true"] {
-        border-color: rgba(99,102,241,0.35);
-        box-shadow: inset 0 0 0 1px rgba(99,102,241,0.25), 0 1px 2px rgba(0,0,0,0.25);
-        background: linear-gradient(180deg, rgba(99,102,241,0.18), rgba(59,130,246,0.14));
-        color: rgba(255, 255, 255, 0.95) !important;
+    .sidebar-nav label {
+        display: flex !important;
+        align-items: center !important;
+        padding: 10px 12px !important;
+        border-radius: 10px !important;
+        border: 1px solid rgba(255, 255, 255, 0.08) !important;
+        background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03)) !important;
+        transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .06s ease !important;
+        cursor: pointer !important;
+        margin-bottom: 0 !important;
+        width: 100% !important;
+        justify-content: flex-start !important;
+        text-align: left !important;
     }
-    .gradio-container [role="tab"]:active {
-        transform: translateY(0.5px);
+    .sidebar-nav label:hover {
+        border-color: rgba(99,102,241,0.28) !important;
+        background: linear-gradient(180deg, rgba(99,102,241,0.10), rgba(59,130,246,0.08)) !important;
     }
-    .gradio-container [role="tab"]:focus-visible {
-        outline: none;
-        box-shadow: 0 0 0 2px rgba(59,130,246,0.35);
+    /* Selected state - Gradio adds 'selected' class to the label in some versions, or we check input:checked */
+    .sidebar-nav label.selected {
+        border-color: rgba(99,102,241,0.35) !important;
+        box-shadow: inset 0 0 0 1px rgba(99,102,241,0.25), 0 1px 2px rgba(0,0,0,0.25) !important;
+        background: linear-gradient(180deg, rgba(99,102,241,0.18), rgba(59,130,246,0.14)) !important;
+        color: rgba(255, 255, 255, 0.95) !important;
     }
+    
+    /* Light theme adjustments for sidebar */
     @media (prefers-color-scheme: light) {
-        .gradio-container [role="tab"] {
-            border-color: rgba(0, 0, 0, 0.08);
-            background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.90));
+        .sidebar-nav label {
+            border-color: rgba(0, 0, 0, 0.08) !important;
+            background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.90)) !important;
+            color: rgba(0, 0, 0, 0.85) !important;
         }
-        .gradio-container [role="tab"]:hover {
-            border-color: rgba(99,102,241,0.25);
-            background: linear-gradient(180deg, rgba(99,102,241,0.08), rgba(59,130,246,0.06));
+        .sidebar-nav label:hover {
+            border-color: rgba(99,102,241,0.25) !important;
+            background: linear-gradient(180deg, rgba(99,102,241,0.08), rgba(59,130,246,0.06)) !important;
         }
-        .gradio-container [role="tab"][aria-selected="true"] {
-            border-color: rgba(99,102,241,0.35);
-            background: linear-gradient(180deg, rgba(99,102,241,0.16), rgba(59,130,246,0.12));
+        .sidebar-nav label.selected {
+            border-color: rgba(99,102,241,0.35) !important;
+            background: linear-gradient(180deg, rgba(99,102,241,0.16), rgba(59,130,246,0.12)) !important;
             color: rgba(0, 0, 0, 0.85) !important;
         }
     }
@@ -299,6 +319,63 @@ CSS_STYLES = """
         background-color: var(--input-background-fill) !important;
         color: var(--body-text-color) !important;
     }
+
+    /* Hide the actual tabs since we use the sidebar to control them */
+    .hidden-tabs .tab-nav,
+    .hidden-tabs [role="tablist"] {
+        display: none !important;
+    }
+    /* Hide the entire first row of the tabs container (contains tab buttons + overflow) */
+    .hidden-tabs > div:first-child {
+        display: none !important;
+    }
+    /* Ensure audio component buttons remain visible - they're inside tab panels, not the first row */
+    .hidden-tabs [role="tabpanel"] button {
+        display: inline-flex !important;
+    }
+
+    /* Custom scrollbar styling */
+    * {
+        scrollbar-width: thin;
+        scrollbar-color: rgba(61, 212, 159, 0.4) rgba(255, 255, 255, 0.05);
+    }
+    *::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+    }
+    *::-webkit-scrollbar-track {
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 4px;
+    }
+    *::-webkit-scrollbar-thumb {
+        background: linear-gradient(180deg, rgba(61, 212, 159, 0.5), rgba(17, 186, 136, 0.4));
+        border-radius: 4px;
+        border: 1px solid rgba(119, 247, 209, 0.2);
+    }
+    *::-webkit-scrollbar-thumb:hover {
+        background: linear-gradient(180deg, rgba(85, 250, 192, 0.7), rgba(65, 184, 131, 0.6));
+    }
+    *::-webkit-scrollbar-corner {
+        background: rgba(255, 255, 255, 0.05);
+    }
+    @media (prefers-color-scheme: light) {
+        * {
+            scrollbar-color: rgba(61, 212, 159, 0.4) rgba(0, 0, 0, 0.05);
+        }
+        *::-webkit-scrollbar-track {
+            background: rgba(0, 0, 0, 0.05);
+        }
+        *::-webkit-scrollbar-thumb {
+            background: linear-gradient(180deg, rgba(61, 212, 159, 0.5), rgba(17, 186, 136, 0.4));
+            border-color: rgba(0, 0, 0, 0.1);
+        }
+        *::-webkit-scrollbar-thumb:hover {
+            background: linear-gradient(180deg, rgba(85, 250, 192, 0.7), rgba(65, 184, 131, 0.6));
+        }
+        *::-webkit-scrollbar-corner {
+            background: rgba(0, 0, 0, 0.05);
+        }
+    }
 """
 
 # Build each tab interface using modular builders
@@ -345,108 +422,170 @@ _tab_names = [
 ]
 
 with gr.Blocks(title="Nymbo/Tools MCP") as demo:
-    # Title and information panel unchanged to preserve UI
-    gr.HTML("<h1 class='app-title'>Nymbo/Tools MCP</h1>")
-
-    with gr.Accordion("Information", open=False):
-        gr.HTML(
-            """
-            <div class="info-accordion">
-                <div class="info-grid">
-                    <section class="info-card">
-                        <div class="info-card__icon">🔐</div>
-                        <div class="info-card__body">
-                            <h3>Enable Image Gen, Video Gen, and Deep Research</h3>
-                            <p>
-                                The <code>Generate_Image</code>, <code>Generate_Video</code>, and <code>Deep_Research</code> tools require a
-                                <code>HF_READ_TOKEN</code> set as a secret or environment variable.
-                            </p>
-                            <ul class="info-list">
-                                <li>Duplicate this Space and add a HF token with model read access.</li>
-                                <li>Or run locally with <code>HF_READ_TOKEN</code> in your environment.</li>
-                            </ul>
-                            <div class="info-hint">
-                                MCP clients can see these tools even without tokens, but calls will fail until a valid token is provided.
+
+    with gr.Sidebar(width=300, elem_classes="app-sidebar"):
+        gr.Markdown("## Nymbo/Tools MCP\n<p style='font-size: 0.7rem; opacity: 0.85; margin-top: 2px;'>General purpose tools useful for any agent.</p>\n<code style='font-size: 0.7rem; word-break: break-all;'>https://nymbo.net/gradio_api/mcp/</code>")
+        
+        with gr.Accordion("Information", open=False):
+            gr.HTML(
+                """
+                <div class="info-accordion">
+                    <div class="info-grid" style="grid-template-columns: 1fr;">
+                        <section class="info-card">
+                            <div class="info-card__body">
+                                <h3>Enable Image Gen, Video Gen, and Deep Research</h3>
+                                <p>
+                                    The <code>Generate_Image</code>, <code>Generate_Video</code>, and <code>Deep_Research</code> tools require a
+                                    <code>HF_READ_TOKEN</code> set as a secret or environment variable.
+                                </p>
+                                <ul class="info-list">
+                                    <li>Duplicate this Space and add a HF token with model read access.</li>
+                                    <li>Or run locally with <code>HF_READ_TOKEN</code> in your environment.</li>
+                                </ul>
+                                <div class="info-hint">
+                                    MCP clients can see these tools even without tokens, but calls will fail until a valid token is provided.
+                                </div>
+                            </div>
+                        </section>
+
+                        <section class="info-card">
+                            <div class="info-card__body">
+                                <h3>Persistent Memories and Files</h3>
+                                <p>
+                                    In this public demo, memories and files created with the <code>Memory_Manager</code> and <code>File_System</code> are stored in the Space's running container and are cleared when the Space restarts. Content is visible to everyone—avoid personal data.
+                                </p>
+                                <p>
+                                    When running locally, memories are saved to <code>memories.json</code> at the repo root for privacy, and files are saved to the <code>Tools/Filesystem</code> directory on disk.
+                                </p>
                             </div>
-                        </div>
-                    </section>
-
-                    <section class="info-card">
-                        <div class="info-card__icon">🧠</div>
-                        <div class="info-card__body">
-                            <h3>Persistent Memories and Files</h3>
-                            <p>
-                                In this public demo, memories and files created with the <code>Memory_Manager</code> and <code>File_System</code> are stored in the Space's running container and are cleared when the Space restarts. Content is visible to everyone—avoid personal data.
-                            </p>
-                            <p>
-                                When running locally, memories are saved to <code>memories.json</code> at the repo root for privacy, and files are saved to the <code>Tools/Filesystem</code> directory on disk.
-                            </p>
-                        </div>
-                    </section>
-
-                    <section class="info-card">
-                        <div class="info-card__icon">🔗</div>
-                        <div class="info-card__body">
-                            <h3>Connecting from an MCP Client</h3>
-                            <p>
-                                This Space also runs as a Model Context Protocol (MCP) server. Point your client to:
-                                <br/>
-                                <code>https://nymbo.net/gradio_api/mcp/</code>
-                            </p>
-                            <p>Example client configuration:</p>
-                            <pre><code class="language-json">{
+                        </section>
+
+                        <section class="info-card">
+                            <div class="info-card__body">
+                                <h3>Connecting from an MCP Client</h3>
+                                <p>
+                                    This Space also runs as a Model Context Protocol (MCP) server. Point your client to:
+                                    <br/>
+                                    <code>https://nymbo.net/gradio_api/mcp/</code>
+                                </p>
+                                <p>Example client configuration:</p>
+                                <pre><code class="language-json">{
   "mcpServers": {
     "nymbo-tools": {
       "url": "https://nymbo.net/gradio_api/mcp/"
     }
   }
 }</code></pre>
-                            <p>Run the following commands in sequence to run the server locally:</p>
-                            <pre><code>git clone https://huggingface.co/spaces/Nymbo/Tools
+                                <p>Run the following commands in sequence to run the server locally:</p>
+                                <pre><code>git clone https://huggingface.co/spaces/Nymbo/Tools
 cd Tools
 python -m venv env
 source env/bin/activate
 pip install -r requirements.txt
 python app.py</code></pre>
-                        </div>
-                    </section>
-
-                    <section class="info-card">
-                        <div class="info-card__icon">🛠️</div>
-                        <div class="info-card__body">
-                            <h3>Tool Notes &amp; Kokoro Voice Legend</h3>
-                            <p>
-                                No authentication required for: <code>Web_Fetch</code>, <code>Web_Search</code>,
-                                <code>Agent_Terminal</code>, <code>Code_Interpreter</code>, <code>Memory_Manager</code>, <code>Generate_Speech</code>, <code>File_System</code>, <code>Shell_Command</code>, and <code>Agent_Terminal</code>.
-                            </p>
-                            <p><strong>Kokoro voice prefixes</strong></p>
-                            <ul class="info-list" style="display:grid;grid-template-columns:repeat(2,minmax(160px,1fr));gap:6px 16px;">
-                                <li><code>af</code> — American female</li>
-                                <li><code>am</code> — American male</li>
-                                <li><code>bf</code> — British female</li>
-                                <li><code>bm</code> — British male</li>
-                                <li><code>ef</code> — European female</li>
-                                <li><code>em</code> — European male</li>
-                                <li><code>hf</code> — Hindi female</li>
-                                <li><code>hm</code> — Hindi male</li>
-                                <li><code>if</code> — Italian female</li>
-                                <li><code>im</code> — Italian male</li>
-                                <li><code>jf</code> — Japanese female</li>
-                                <li><code>jm</code> — Japanese male</li>
-                                <li><code>pf</code> — Portuguese female</li>
-                                <li><code>pm</code> — Portuguese male</li>
-                                <li><code>zf</code> — Chinese female</li>
-                                <li><code>zm</code> — Chinese male</li>
-                                <li><code>ff</code> — French female</li>
-                            </ul>
-                        </div>
-                    </section>
+                            </div>
+                        </section>
+
+                        <section class="info-card">
+                            <div class="info-card__body">
+                                <h3>Tool Notes &amp; Kokoro Voice Legend</h3>
+                                <p><strong>No authentication required for:</strong></p>
+                                <ul class="info-list">
+                                    <li><code>Web_Fetch</code></li>
+                                    <li><code>Web_Search</code></li>
+                                    <li><code>Agent_Terminal</code></li>
+                                    <li><code>Code_Interpreter</code></li>
+                                    <li><code>Memory_Manager</code></li>
+                                    <li><code>Generate_Speech</code></li>
+                                    <li><code>File_System</code></li>
+                                    <li><code>Shell_Command</code></li>
+                                </ul>
+                                <p><strong>Kokoro voice prefixes</strong></p>
+                                <table style="width:100%; border-collapse:collapse; font-size:0.9em; margin-top:8px;">
+                                    <thead>
+                                        <tr style="border-bottom:1px solid rgba(255,255,255,0.15);">
+                                            <th style="padding:6px 8px; text-align:left;">Accent</th>
+                                            <th style="padding:6px 8px; text-align:center;">Female</th>
+                                            <th style="padding:6px 8px; text-align:center;">Male</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr style="border-bottom:1px solid rgba(255,255,255,0.08);">
+                                            <td style="padding:6px 8px; font-weight:600;">American</td>
+                                            <td style="padding:6px 8px; text-align:center;"><code>af</code></td>
+                                            <td style="padding:6px 8px; text-align:center;"><code>am</code></td>
+                                        </tr>
+                                        <tr style="border-bottom:1px solid rgba(255,255,255,0.08);">
+                                            <td style="padding:6px 8px; font-weight:600;">British</td>
+                                            <td style="padding:6px 8px; text-align:center;"><code>bf</code></td>
+                                            <td style="padding:6px 8px; text-align:center;"><code>bm</code></td>
+                                        </tr>
+                                        <tr style="border-bottom:1px solid rgba(255,255,255,0.08);">
+                                            <td style="padding:6px 8px; font-weight:600;">European</td>
+                                            <td style="padding:6px 8px; text-align:center;"><code>ef</code></td>
+                                            <td style="padding:6px 8px; text-align:center;"><code>em</code></td>
+                                        </tr>
+                                        <tr style="border-bottom:1px solid rgba(255,255,255,0.08);">
+                                            <td style="padding:6px 8px; font-weight:600;">French</td>
+                                            <td style="padding:6px 8px; text-align:center;"><code>ff</code></td>
+                                            <td style="padding:6px 8px; text-align:center;">—</td>
+                                        </tr>
+                                        <tr style="border-bottom:1px solid rgba(255,255,255,0.08);">
+                                            <td style="padding:6px 8px; font-weight:600;">Hindi</td>
+                                            <td style="padding:6px 8px; text-align:center;"><code>hf</code></td>
+                                            <td style="padding:6px 8px; text-align:center;"><code>hm</code></td>
+                                        </tr>
+                                        <tr style="border-bottom:1px solid rgba(255,255,255,0.08);">
+                                            <td style="padding:6px 8px; font-weight:600;">Italian</td>
+                                            <td style="padding:6px 8px; text-align:center;"><code>if</code></td>
+                                            <td style="padding:6px 8px; text-align:center;"><code>im</code></td>
+                                        </tr>
+                                        <tr style="border-bottom:1px solid rgba(255,255,255,0.08);">
+                                            <td style="padding:6px 8px; font-weight:600;">Japanese</td>
+                                            <td style="padding:6px 8px; text-align:center;"><code>jf</code></td>
+                                            <td style="padding:6px 8px; text-align:center;"><code>jm</code></td>
+                                        </tr>
+                                        <tr style="border-bottom:1px solid rgba(255,255,255,0.08);">
+                                            <td style="padding:6px 8px; font-weight:600;">Portuguese</td>
+                                            <td style="padding:6px 8px; text-align:center;"><code>pf</code></td>
+                                            <td style="padding:6px 8px; text-align:center;"><code>pm</code></td>
+                                        </tr>
+                                        <tr>
+                                            <td style="padding:6px 8px; font-weight:600;">Chinese</td>
+                                            <td style="padding:6px 8px; text-align:center;"><code>zf</code></td>
+                                            <td style="padding:6px 8px; text-align:center;"><code>zm</code></td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </section>
+                    </div>
                 </div>
-            </div>
-            """
+                """
+            )
+        
+        gr.Markdown("### Tools")
+        tool_selector = gr.Radio(
+            choices=_tab_names,
+            value=_tab_names[0],
+            label="Select Tool",
+            show_label=False,
+            container=False,
+            elem_classes="sidebar-nav"
         )
 
-    gr.TabbedInterface(interface_list=_interfaces, tab_names=_tab_names)
+    with gr.Tabs(elem_classes="hidden-tabs", selected=_tab_names[0]) as tool_tabs:
+        for name, interface in zip(_tab_names, _interfaces):
+            with gr.TabItem(label=name, id=name, elem_id=f"tab-{name}"):
+                interface.render()
+
+    # Use JavaScript to click the hidden tab button when the radio selection changes
+    tool_selector.change(
+        fn=None,
+        inputs=tool_selector,
+        outputs=None,
+        js="(selected_tool) => { const buttons = document.querySelectorAll('.hidden-tabs button'); buttons.forEach(btn => { if (btn.innerText.trim() === selected_tool) { btn.click(); } }); }"
+    )
 
 if __name__ == "__main__":
     demo.launch(mcp_server=True, theme="Nymbo/Nymbo_Theme", css=CSS_STYLES, ssr_mode=False)