mirror of
https://github.com/koala73/worldmonitor.git
synced 2026-04-26 09:35:02 +02:00
feat(mcp): add MCP data panel for user-connected servers (#1835)
* feat(cii): add displacement signal and extend ACLED window for post-conflict accuracy ACLED's 7-day window scores post-ceasefire countries (e.g. Lebanon) near zero despite ongoing destruction, because battle events dried up after the November 2024 ceasefire. Two fixes: 1. Displacement signal (UNHCR): reads displacement:summary:v1:YEAR from Redis and maps ISO3→ISO2 codes. Log-scaled boost (max +20pts) means Lebanon (~1.2M displaced) gets ~12pts, Syria (~7M) gets ~18pts, and peaceful countries get 0. This signal persists long after a ceasefire because UNHCR data updates annually, not per-battle. 2. ACLED 30-day window with time decay: extends from 7 to 30 days. Events 0-7 days old: weight 1.0 | Events 8-30 days old: weight 0.4. Captures conflict tail without over-weighting stale events. Together these make CII reflect structural reality (displaced populations, reconstruction crisis) rather than just last-week's ACLED event count. * fix(cii): add displacedByIso3 to emptyAux fallback * fix(cii): rescale displacement boost and paginate 30-day ACLED query P1: The previous formula Math.log10(n)*4 capped at 100K displaced (log10(100000)=5, 5*4=20), making 100K and 10M identical. Rescaled to (log10(n)-5)*8+4 anchored at the 100K threshold: 100K→+4 | 500K→+10 | 1M→+12 | 5M→+18 | 10M→+20, floor 0. P2: A single 30-day fetch with limit:1500 silently drops tail events once the global count exceeds the cap, which cuts post-conflict countries (low recent, higher older activity) exactly when they need the signal most. Split into two independent cached queries: - days 0-7: limit 1000 (full weight, same as before) - days 8-30: limit 1000 (0.4 weight, separate Redis cache key) Each window gets its own event budget; no shared-function changes. * feat(mcp): add MCP data panel to let users connect any MCP server Users can now connect an MCP server directly from the dashboard via a new "Connect MCP" block alongside "Create with AI". The modal fetches available tools from the server, lets the user pick a tool + configure args + refresh interval, then renders a live auto-refreshing panel. - api/mcp-proxy.js: Vercel edge proxy implementing MCP streamable-HTTP protocol (initialize + tools/list / tools/call, SSE + JSON responses) - src/services/mcp-store.ts: localStorage CRUD for McpPanelSpec configs - src/components/McpConnectModal.ts: connection wizard (URL, auth header, tool selection, args, title, refresh interval) - src/components/McpDataPanel.ts: auto-refreshing panel with configure (⚙) and refresh-now (↻) buttons; renders text or formatted JSON from tool result - panel-layout.ts: loads persisted MCP panels on boot, adds "Connect MCP" block, addMcpPanel() integration - event-handlers.ts: handles mcp- panel close (confirm + delete) and wm:mcp-configure event for re-opening the modal - CSS: mcp-connect-modal, mcp-data-panel, shared btn/btn-primary/etc classes - i18n: mcp.* keys in en.json - tests: mcp-proxy.js added to ALLOWED_LEGACY_ENDPOINTS allowlist * fix(mcp): add common.cancel i18n key used by McpConnectModal * feat(mcp): add Quick Connect presets for Brave, Exa, Tavily, Context7, Web Fetch * fix(mcp): replace search-heavy presets with diverse tool presets (GitHub, Slack, Radar, Maps, Postgres, Fetch) * feat(mcp): add 10 quick-connect presets Add Linear, Sentry, Datadog, Stripe, Overpass (OSM), Perplexity, Polygon.io, Notion, Airtable, and Shodan to MCP_PRESETS, bringing the total to 16 diverse integrations. Make preset list scrollable (max-height 260px) to accommodate the longer list. * fix(mcp): SSRF protection, CRLF sanitization, auth hint styling - Block private IP ranges (RFC1918, link-local, cloud metadata 169.254.x.x) in mcp-proxy validateServerUrl; remove dead localhost-allow logic - Strip CRLF from forwarded header keys/values to prevent header injection - Use mcp-status-info class (amber) for auth notes instead of mcp-status-loading - Simplify redundant JSON.parse guard in preset click handler * fix(mcp): correct protocol version and send notifications/initialized - Bump MCP_PROTOCOL_VERSION from 2024-11-05 to 2025-03-26: the current transport (direct POST, JSON or SSE response) is Streamable HTTP defined in the 2025-03-26 revision. The 2024-11-05 HTTP transport requires opening an SSE endpoint first to discover the JSON-RPC URL, which this proxy does not do. Advertising the wrong version caused compliant 2024-11-05 servers to fail during connection. - Add sendInitialized() helper that fires notifications/initialized after a successful initialize handshake. MCP lifecycle requires this notification before any tool traffic; servers that enforce it would reject every tools/list or tools/call from this proxy. Called in both mcpListTools() and mcpCallTool(). Response is awaited but treated as fire-and-forget so non-compliant servers do not break.
This commit is contained in:
Elie Habib
@@ -19712,3 +19712,327 @@ body.has-breaking-alert .panels-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── MCP Connect Modal ─────────────────────────────── */
|
||||
.mcp-connect-modal {
|
||||
width: min(560px, 96vw);
|
||||
max-height: 88vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mcp-connect-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 4px 0 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.mcp-form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.mcp-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.mcp-optional {
|
||||
font-weight: 400;
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.mcp-input {
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
padding: 8px 10px;
|
||||
border-radius: 6px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
font-family: inherit;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.mcp-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.mcp-connect-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.mcp-connect-status {
|
||||
font-size: 12px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.mcp-status-loading { color: var(--text-dim); }
|
||||
.mcp-status-info { color: var(--yellow, #f5a623); }
|
||||
.mcp-status-ok { color: #44ff88; }
|
||||
.mcp-status-error { color: var(--red, #ff4444); }
|
||||
|
||||
.mcp-tools-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.mcp-tools-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
max-height: 180px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.mcp-tool-item {
|
||||
padding: 8px 10px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
|
||||
.mcp-tool-item:hover {
|
||||
background: color-mix(in srgb, var(--accent) 12%, transparent);
|
||||
}
|
||||
|
||||
.mcp-tool-item.selected {
|
||||
background: color-mix(in srgb, var(--accent) 20%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
|
||||
}
|
||||
|
||||
.mcp-tool-name {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.mcp-tool-desc {
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.mcp-refresh-group {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.mcp-refresh-group .mcp-label {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mcp-refresh-input {
|
||||
width: 80px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mcp-refresh-unit {
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid var(--border);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
transition: opacity 0.15s, transform 0.1s;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.btn:not(:disabled):hover {
|
||||
opacity: 0.85;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--accent);
|
||||
color: var(--bg);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: color-mix(in srgb, var(--accent) 18%, transparent);
|
||||
color: var(--text);
|
||||
border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
/* ── MCP Data Panel ────────────────────────────────── */
|
||||
.mcp-panel-meta {
|
||||
padding: 6px 10px;
|
||||
font-size: 10px;
|
||||
color: var(--text-dim);
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.mcp-meta-sep {
|
||||
opacity: 0.4;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
.mcp-meta-tool { font-weight: 600; color: var(--accent); }
|
||||
|
||||
.mcp-panel-content {
|
||||
padding: 8px 10px;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.mcp-content-text {
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
margin: 0 0 8px;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.mcp-content-block {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.mcp-content-json {
|
||||
font-size: 11px;
|
||||
background: color-mix(in srgb, var(--bg) 70%, transparent);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
padding: 8px;
|
||||
overflow-x: auto;
|
||||
white-space: pre;
|
||||
word-break: normal;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ── MCP Presets ───────────────────────────────────── */
|
||||
.mcp-presets-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.mcp-presets-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
max-height: 260px;
|
||||
overflow-y: auto;
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
||||
.mcp-preset-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 9px 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: background 0.1s, border-color 0.1s;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mcp-preset-card:hover {
|
||||
background: color-mix(in srgb, var(--accent) 10%, transparent);
|
||||
border-color: color-mix(in srgb, var(--accent) 30%, transparent);
|
||||
}
|
||||
|
||||
.mcp-preset-card.selected {
|
||||
background: color-mix(in srgb, var(--accent) 16%, transparent);
|
||||
border-color: color-mix(in srgb, var(--accent) 50%, transparent);
|
||||
}
|
||||
|
||||
.mcp-preset-icon {
|
||||
font-size: 18px;
|
||||
flex-shrink: 0;
|
||||
width: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mcp-preset-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.mcp-preset-name {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.mcp-preset-desc {
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.mcp-preset-key-badge {
|
||||
font-size: 13px;
|
||||
flex-shrink: 0;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.mcp-section-divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--text-dim);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.mcp-section-divider::before,
|
||||
.mcp-section-divider::after {
|
||||
content: '';
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user