convex-mcp-visual 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +844 -0
- package/dist/apps/apps/realtime-dashboard/index.html +15 -0
- package/dist/apps/apps/schema-browser/index.html +15 -0
- package/dist/apps/assets/modulepreload-polyfill-B5Qt9EMX.js +1 -0
- package/dist/apps/assets/realtime-dashboard-BPA99DZn.js +140 -0
- package/dist/apps/assets/schema-browser-BEcF8hRP.js +499 -0
- package/dist/apps/assets/style-BTxSpbLq.css +1 -0
- package/dist/convex-client.d.ts +56 -0
- package/dist/convex-client.d.ts.map +1 -0
- package/dist/convex-client.js +206 -0
- package/dist/convex-client.js.map +1 -0
- package/dist/index.d.ts +9 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +93 -0
- package/dist/index.js.map +1 -0
- package/dist/resources/dashboard.d.ts +7 -0
- package/dist/resources/dashboard.d.ts.map +1 -0
- package/dist/resources/dashboard.js +255 -0
- package/dist/resources/dashboard.js.map +1 -0
- package/dist/resources/schema-browser.d.ts +7 -0
- package/dist/resources/schema-browser.d.ts.map +1 -0
- package/dist/resources/schema-browser.js +654 -0
- package/dist/resources/schema-browser.js.map +1 -0
- package/dist/server.d.ts +12 -0
- package/dist/server.d.ts.map +1 -0
- package/dist/server.js +142 -0
- package/dist/server.js.map +1 -0
- package/dist/tools/dashboard.d.ts +19 -0
- package/dist/tools/dashboard.d.ts.map +1 -0
- package/dist/tools/dashboard.js +309 -0
- package/dist/tools/dashboard.js.map +1 -0
- package/dist/tools/schema-browser.d.ts +19 -0
- package/dist/tools/schema-browser.d.ts.map +1 -0
- package/dist/tools/schema-browser.js +260 -0
- package/dist/tools/schema-browser.js.map +1 -0
- package/dist/ui-server.d.ts +26 -0
- package/dist/ui-server.d.ts.map +1 -0
- package/dist/ui-server.js +202 -0
- package/dist/ui-server.js.map +1 -0
- package/package.json +55 -0
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<meta name="theme-color" content="#faf8f5">
|
|
7
|
+
<title>Realtime Dashboard - Convex MCP Apps</title>
|
|
8
|
+
<script type="module" crossorigin src="../../assets/realtime-dashboard-BPA99DZn.js"></script>
|
|
9
|
+
<link rel="modulepreload" crossorigin href="../../assets/modulepreload-polyfill-B5Qt9EMX.js">
|
|
10
|
+
<link rel="stylesheet" crossorigin href="../../assets/style-BTxSpbLq.css">
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<div id="app"></div>
|
|
14
|
+
</body>
|
|
15
|
+
</html>
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<meta name="theme-color" content="#faf8f5">
|
|
7
|
+
<title>Schema Browser - Convex MCP Apps</title>
|
|
8
|
+
<script type="module" crossorigin src="../../assets/schema-browser-BEcF8hRP.js"></script>
|
|
9
|
+
<link rel="modulepreload" crossorigin href="../../assets/modulepreload-polyfill-B5Qt9EMX.js">
|
|
10
|
+
<link rel="stylesheet" crossorigin href="../../assets/style-BTxSpbLq.css">
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<div id="app"></div>
|
|
14
|
+
</body>
|
|
15
|
+
</html>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))i(e);new MutationObserver(e=>{for(const r of e)if(r.type==="childList")for(const o of r.addedNodes)o.tagName==="LINK"&&o.rel==="modulepreload"&&i(o)}).observe(document,{childList:!0,subtree:!0});function s(e){const r={};return e.integrity&&(r.integrity=e.integrity),e.referrerPolicy&&(r.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?r.credentials="include":e.crossOrigin==="anonymous"?r.credentials="omit":r.credentials="same-origin",r}function i(e){if(e.ep)return;e.ep=!0;const r=s(e);fetch(e.href,r)}})();
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
var h=Object.defineProperty;var m=(o,e,t)=>e in o?h(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t;var d=(o,e,t)=>m(o,typeof e!="symbol"?e+"":e,t);import"./modulepreload-polyfill-B5Qt9EMX.js";class p{constructor(){d(this,"config",null);d(this,"refreshTimer",null);d(this,"isConnected",!0);d(this,"currentTheme","light");this.init()}init(){var e;if(this.initTheme(),window.__CONVEX_CONFIG__)this.config=window.__CONVEX_CONFIG__;else{const s=new URLSearchParams(window.location.search).get("config");if(s)try{this.config=JSON.parse(decodeURIComponent(s))}catch(r){console.error("Failed to parse config:",r)}}this.isConnected=!!((e=this.config)!=null&&e.deploymentUrl),this.render(),this.startAutoRefresh()}initTheme(){const e=localStorage.getItem("convex-dashboard-theme");e?this.currentTheme=e:window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(this.currentTheme="light"),this.applyTheme()}applyTheme(){document.documentElement.setAttribute("data-theme",this.currentTheme),localStorage.setItem("convex-dashboard-theme",this.currentTheme)}toggleTheme(){this.currentTheme=this.currentTheme==="light"?"dark":"light",this.applyTheme();const e=document.getElementById("themeIcon");e&&(e.textContent=this.currentTheme==="light"?"◐":"◑")}render(){var r;const e=document.getElementById("app");if(!e)return;const t=((r=this.config)==null?void 0:r.deploymentUrl)||"Not connected";e.innerHTML=`
|
|
2
|
+
<div class="header">
|
|
3
|
+
<h1>
|
|
4
|
+
<span class="status-dot ${this.isConnected?"":"disconnected"}" id="statusDot"></span>
|
|
5
|
+
Realtime Dashboard
|
|
6
|
+
</h1>
|
|
7
|
+
<div class="header-right">
|
|
8
|
+
<span class="deployment-url">${t}</span>
|
|
9
|
+
<span class="last-update" id="lastUpdate"></span>
|
|
10
|
+
<button class="theme-toggle-btn" id="themeToggle" title="Toggle dark mode">
|
|
11
|
+
<span id="themeIcon">${this.currentTheme==="light"?"◐":"◑"}</span>
|
|
12
|
+
</button>
|
|
13
|
+
</div>
|
|
14
|
+
</div>
|
|
15
|
+
|
|
16
|
+
<div class="metrics-grid" id="metricsGrid"></div>
|
|
17
|
+
<div class="charts-grid" id="chartsGrid"></div>
|
|
18
|
+
`;const s=document.getElementById("themeToggle");s&&s.addEventListener("click",()=>this.toggleTheme()),this.renderMetrics(),this.renderCharts(),this.updateTimestamp()}renderMetrics(){var s;const e=document.getElementById("metricsGrid");if(!e)return;const t=((s=this.config)==null?void 0:s.metrics)||[];if(t.length===0){e.innerHTML=`
|
|
19
|
+
<div class="metric-card">
|
|
20
|
+
<div class="metric-header">
|
|
21
|
+
<span class="metric-label">No Metrics Configured</span>
|
|
22
|
+
</div>
|
|
23
|
+
<div class="metric-value">--</div>
|
|
24
|
+
<div class="metric-change neutral">Add metrics via MCP tool parameters</div>
|
|
25
|
+
</div>
|
|
26
|
+
`;return}e.innerHTML=t.map(r=>`
|
|
27
|
+
<div class="metric-card">
|
|
28
|
+
<div class="metric-header">
|
|
29
|
+
<span class="metric-label">${r.name}</span>
|
|
30
|
+
<span class="metric-icon">${this.getMetricIcon(r.aggregation)}</span>
|
|
31
|
+
</div>
|
|
32
|
+
<div class="metric-value">${this.formatNumber(r.value||0)}</div>
|
|
33
|
+
<div class="metric-change neutral">
|
|
34
|
+
${r.documentCount!==void 0?`${r.documentCount} documents`:""}
|
|
35
|
+
</div>
|
|
36
|
+
<div class="metric-source">${r.table} / ${r.aggregation}${r.field?`(${r.field})`:""}</div>
|
|
37
|
+
</div>
|
|
38
|
+
`).join("")}getMetricIcon(e){return{count:"#",sum:"Σ",avg:"x̄",min:"↓",max:"↑"}[e]||"#"}formatNumber(e){return e>=1e6?(e/1e6).toFixed(1)+"M":e>=1e3?(e/1e3).toFixed(1)+"k":Number.isInteger(e)?e.toLocaleString():e.toFixed(2)}renderCharts(){var i,n;const e=document.getElementById("chartsGrid");if(!e)return;const t=((i=this.config)==null?void 0:i.charts)||[],s=((n=this.config)==null?void 0:n.allDocuments)||{},r=this.renderActivityTable(s);if(t.length===0){e.innerHTML=`
|
|
39
|
+
${this.renderTablesOverview()}
|
|
40
|
+
${r}
|
|
41
|
+
`;return}e.innerHTML=t.map((a,c)=>{const l=s[a.table]||[];return`
|
|
42
|
+
<div class="chart-card">
|
|
43
|
+
<div class="chart-header">
|
|
44
|
+
<span class="chart-title">${a.title}</span>
|
|
45
|
+
<span class="chart-subtitle">${l.length} documents</span>
|
|
46
|
+
</div>
|
|
47
|
+
<div class="chart-container" id="chart-${c}">
|
|
48
|
+
${this.renderChartContent(a,l)}
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
51
|
+
`}).join("")+r}renderTablesOverview(){var s;const e=((s=this.config)==null?void 0:s.tables)||[];if(e.length===0)return"";const t=Math.max(...e.map(r=>r.documentCount),1);return`
|
|
52
|
+
<div class="chart-card">
|
|
53
|
+
<div class="chart-header">
|
|
54
|
+
<span class="chart-title">Tables Overview</span>
|
|
55
|
+
</div>
|
|
56
|
+
<div class="chart-container">
|
|
57
|
+
<div class="bar-chart">
|
|
58
|
+
${e.map(r=>`
|
|
59
|
+
<div class="bar" style="height: ${r.documentCount/t*100}%" data-value="${r.documentCount}">
|
|
60
|
+
<span class="bar-label">${r.name}</span>
|
|
61
|
+
</div>
|
|
62
|
+
`).join("")}
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
`}renderChartContent(e,t){switch(e.type){case"bar":return this.renderBarChart(t,e);case"line":return this.renderLineChart(t,e);case"pie":return this.renderPieChart(t,e);case"table":return this.renderDataTable(t);default:return`<div class="empty-state">Unknown chart type: ${e.type}</div>`}}renderBarChart(e,t){if(e.length===0)return'<div class="empty-state">No data available</div>';let s=[];if(t.groupBy){const i=new Map;for(const n of e){const a=String(n[t.groupBy]||"Unknown");i.set(a,(i.get(a)||0)+1)}s=Array.from(i.entries()).map(([n,a])=>({label:n,value:a})).sort((n,a)=>a.value-n.value).slice(0,7)}else{const i=new Map;for(const n of e){const a=new Date(n._creationTime).toLocaleDateString();i.set(a,(i.get(a)||0)+1)}s=Array.from(i.entries()).map(([n,a])=>({label:n,value:a})).slice(-7)}const r=Math.max(...s.map(i=>i.value),1);return`
|
|
67
|
+
<div class="bar-chart">
|
|
68
|
+
${s.map(i=>`
|
|
69
|
+
<div class="bar" style="height: ${i.value/r*100}%" data-value="${i.value}">
|
|
70
|
+
<span class="bar-label">${i.label.slice(0,8)}</span>
|
|
71
|
+
</div>
|
|
72
|
+
`).join("")}
|
|
73
|
+
</div>
|
|
74
|
+
`}renderLineChart(e,t){return e.length===0?'<div class="empty-state">No data available</div>':this.renderBarChart(e,t)}renderPieChart(e,t){if(e.length===0||!t.groupBy)return'<div class="empty-state">No data or groupBy field specified</div>';const s=new Map;for(const a of e){const c=String(a[t.groupBy]||"Unknown");s.set(c,(s.get(c)||0)+1)}const r=e.length,i=Array.from(s.entries()).map(([a,c])=>({label:a,count:c,percent:(c/r*100).toFixed(1)})).sort((a,c)=>c.count-a.count).slice(0,5),n=["#e94560","#0f3460","#16213e","#1a1a2e","#4caf50"];return`
|
|
75
|
+
<div class="pie-legend">
|
|
76
|
+
${i.map((a,c)=>`
|
|
77
|
+
<div class="pie-item">
|
|
78
|
+
<span class="pie-color" style="background: ${n[c%n.length]}"></span>
|
|
79
|
+
<span class="pie-label">${a.label}</span>
|
|
80
|
+
<span class="pie-value">${a.percent}%</span>
|
|
81
|
+
</div>
|
|
82
|
+
`).join("")}
|
|
83
|
+
</div>
|
|
84
|
+
`}renderDataTable(e){const t=e.slice(0,5);if(t.length===0)return'<div class="empty-state">No documents</div>';const s=Object.keys(t[0]).slice(0,4);return`
|
|
85
|
+
<div class="table-chart">
|
|
86
|
+
<table>
|
|
87
|
+
<thead>
|
|
88
|
+
<tr>
|
|
89
|
+
${s.map(r=>`<th>${r}</th>`).join("")}
|
|
90
|
+
</tr>
|
|
91
|
+
</thead>
|
|
92
|
+
<tbody>
|
|
93
|
+
${t.map(r=>`
|
|
94
|
+
<tr>
|
|
95
|
+
${s.map(i=>`<td>${this.formatValue(r[i])}</td>`).join("")}
|
|
96
|
+
</tr>
|
|
97
|
+
`).join("")}
|
|
98
|
+
</tbody>
|
|
99
|
+
</table>
|
|
100
|
+
</div>
|
|
101
|
+
`}renderActivityTable(e){const t=Object.entries(e).flatMap(([s,r])=>r.map(i=>({table:s,...i}))).sort((s,r)=>{const i=s._creationTime||0;return(r._creationTime||0)-i}).slice(0,10);return t.length===0?`
|
|
102
|
+
<div class="chart-card">
|
|
103
|
+
<div class="chart-header">
|
|
104
|
+
<span class="chart-title">Recent Activity</span>
|
|
105
|
+
</div>
|
|
106
|
+
<div class="chart-container">
|
|
107
|
+
<div class="empty-state">No documents found</div>
|
|
108
|
+
</div>
|
|
109
|
+
</div>
|
|
110
|
+
`:`
|
|
111
|
+
<div class="chart-card">
|
|
112
|
+
<div class="chart-header">
|
|
113
|
+
<span class="chart-title">Recent Activity</span>
|
|
114
|
+
</div>
|
|
115
|
+
<div class="chart-container">
|
|
116
|
+
<div class="table-chart">
|
|
117
|
+
<table>
|
|
118
|
+
<thead>
|
|
119
|
+
<tr>
|
|
120
|
+
<th>Table</th>
|
|
121
|
+
<th>ID</th>
|
|
122
|
+
<th>Created</th>
|
|
123
|
+
</tr>
|
|
124
|
+
</thead>
|
|
125
|
+
<tbody>
|
|
126
|
+
${t.map(s=>`
|
|
127
|
+
<tr>
|
|
128
|
+
<td>${s.table}</td>
|
|
129
|
+
<td style="font-family: var(--font-mono); color: var(--accent);">
|
|
130
|
+
${String(s._id||"").slice(0,12)}...
|
|
131
|
+
</td>
|
|
132
|
+
<td>${this.formatTimeAgo(s._creationTime)}</td>
|
|
133
|
+
</tr>
|
|
134
|
+
`).join("")}
|
|
135
|
+
</tbody>
|
|
136
|
+
</table>
|
|
137
|
+
</div>
|
|
138
|
+
</div>
|
|
139
|
+
</div>
|
|
140
|
+
`}formatValue(e){if(e==null)return'<span style="color: var(--text-secondary)">null</span>';if(typeof e=="object"){const t=JSON.stringify(e);return t.length>30?t.slice(0,30)+"...":t}return typeof e=="string"&&e.length>30?e.slice(0,30)+"...":String(e)}formatTimeAgo(e){if(!e)return"Unknown";const s=Date.now()-e,r=Math.floor(s/6e4),i=Math.floor(s/36e5),n=Math.floor(s/864e5);return r<1?"Just now":r<60?`${r}m ago`:i<24?`${i}h ago`:`${n}d ago`}updateTimestamp(){const e=document.getElementById("lastUpdate");e&&(e.textContent="Updated: "+new Date().toLocaleTimeString())}startAutoRefresh(){var t;const e=(((t=this.config)==null?void 0:t.refreshInterval)||5)*1e3;this.refreshTimer=window.setInterval(()=>{this.updateTimestamp()},e)}stopAutoRefresh(){this.refreshTimer&&(clearInterval(this.refreshTimer),this.refreshTimer=null)}destroy(){this.stopAutoRefresh()}}const u=new p;window.addEventListener("beforeunload",()=>{u.destroy()});
|