UI: Add MCP server status panel to sidebar

- fetchMcpStatus() in api.js calls GET /mcp-status
- Sidebar shows live MCP server status: connected dot, tool/resource/prompt counts
- Expandable panel lists all discovered tools, resource URIs, and prompt names
- Color coded: green dot = connected, tool names in accent color, URIs in green
- Loaded once on mount via useEffect

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

ui/src/api.js

@@ -26,6 +26,12 @@ export async function fetchGraph(slug) {
   return res.json();
 }
 
+export async function fetchMcpStatus() {
+  const res = await fetch(`${BASE}/mcp-status`);
+  if (!res.ok) throw new Error("Failed to fetch MCP status");
+  return res.json();
+}
+
 export async function deleteRepo(slug) {
   const [owner, name] = slug.split("/");
   const res = await fetch(`${BASE}/repos/${owner}/${name}`, { method: "DELETE" });

ui/src/components/Sidebar.jsx

@@ -1,10 +1,17 @@
-import { useState } from "react";
-import { ingestRepo, deleteRepo } from "../api";
+import { useState, useEffect } from "react";
+import { ingestRepo, deleteRepo, fetchMcpStatus } from "../api";
 
 export default function Sidebar({ repos, activeRepo, onSelectRepo, onReposChange, mode, onModeChange, agentMode, onAgentModeChange }) {
   const [url, setUrl]         = useState("");
   const [status, setStatus]   = useState(null); // {type, text}
   const [loading, setLoading] = useState(false);
+  const [mcpInfo, setMcpInfo] = useState(null); // MCP server status
+  const [mcpOpen, setMcpOpen] = useState(false); // expand/collapse panel
+
+  // Load MCP status once on mount
+  useEffect(() => {
+    fetchMcpStatus().then(setMcpInfo).catch(() => setMcpInfo({ connected: false }));
+  }, []);
 
   async function handleIngest(e) {
     e.preventDefault();
@@ -101,6 +108,61 @@ export default function Sidebar({ repos, activeRepo, onSelectRepo, onReposChange
         </div>
       )}
 
+      {/* ── MCP Server Status ── */}
+      <div className="mcp-panel">
+        <button className="mcp-panel-header" onClick={() => setMcpOpen(o => !o)}>
+          <span className={`mcp-dot ${mcpInfo?.connected ? "connected" : "disconnected"}`} />
+          <span className="mcp-panel-title">MCP Server</span>
+          {mcpInfo?.connected && (
+            <span className="mcp-counts">
+              {mcpInfo.tools.length}T · {mcpInfo.resources.length}R · {mcpInfo.prompts.length}P
+            </span>
+          )}
+          <span className="mcp-chevron">{mcpOpen ? "▴" : "▾"}</span>
+        </button>
+
+        {mcpOpen && mcpInfo && (
+          <div className="mcp-panel-body">
+            {!mcpInfo.connected ? (
+              <p className="mcp-error">Not connected — is the backend running?</p>
+            ) : (
+              <>
+                {mcpInfo.tools.length > 0 && (
+                  <div className="mcp-section">
+                    <div className="mcp-section-label">Tools</div>
+                    {mcpInfo.tools.map(t => (
+                      <div key={t.name} className="mcp-item">
+                        <span className="mcp-item-name">{t.name}</span>
+                      </div>
+                    ))}
+                  </div>
+                )}
+                {mcpInfo.resources.length > 0 && (
+                  <div className="mcp-section">
+                    <div className="mcp-section-label">Resources</div>
+                    {mcpInfo.resources.map(r => (
+                      <div key={r.uri} className="mcp-item">
+                        <span className="mcp-item-name mcp-uri">{r.uri}</span>
+                      </div>
+                    ))}
+                  </div>
+                )}
+                {mcpInfo.prompts.length > 0 && (
+                  <div className="mcp-section">
+                    <div className="mcp-section-label">Prompts</div>
+                    {mcpInfo.prompts.map(p => (
+                      <div key={p.name} className="mcp-item">
+                        <span className="mcp-item-name">/{p.name}</span>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </>
+            )}
+          </div>
+        )}
+      </div>
+
       {/* ── Repos ── */}
       <div style={{ flex: 1 }}>
         <div className="section-label">Indexed Repos ({repos.length})</div>

ui/src/index.css

@@ -793,3 +793,75 @@ body {
 ::-webkit-scrollbar { width: 6px; }
 ::-webkit-scrollbar-track { background: transparent; }
 ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+
+/* ── MCP Server Status Panel ─────────────────────────────────── */
+.mcp-panel {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  overflow: hidden;
+  font-size: 12px;
+}
+
+.mcp-panel-header {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 8px 10px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--text);
+  text-align: left;
+}
+.mcp-panel-header:hover { background: var(--surface); }
+
+.mcp-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.mcp-dot.connected    { background: var(--green); }
+.mcp-dot.disconnected { background: var(--muted); }
+
+.mcp-panel-title { font-weight: 600; flex: 1; }
+
+.mcp-counts {
+  font-size: 11px;
+  color: var(--muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.mcp-chevron { font-size: 10px; color: var(--muted); }
+
+.mcp-panel-body {
+  border-top: 1px solid var(--border);
+  padding: 8px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.mcp-error { color: var(--muted); font-size: 11px; margin: 0; }
+
+.mcp-section { display: flex; flex-direction: column; gap: 3px; }
+
+.mcp-section-label {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--muted);
+  margin-bottom: 2px;
+}
+
+.mcp-item { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
+
+.mcp-item-name {
+  font-family: var(--mono);
+  font-size: 11px;
+  color: var(--accent);
+}
+
+.mcp-uri { color: var(--green); }