convex-mcp-visual 1.0.12 → 1.0.14
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/dist/apps/apps/realtime-dashboard/index.html +2 -2
- package/dist/apps/apps/schema-browser/index.html +2 -2
- package/dist/apps/assets/realtime-dashboard-CZ-nhu4Y.js +140 -0
- package/dist/apps/assets/{schema-browser-QoseH50C.js → schema-browser-DhIjBXvL.js} +90 -50
- package/dist/apps/assets/{style-nhC7AW-4.css → style-l4K1L9Ub.css} +1 -1
- package/dist/convex-client.d.ts.map +1 -1
- package/dist/convex-client.js +9 -6
- package/dist/convex-client.js.map +1 -1
- package/dist/index.js +8 -3
- package/dist/index.js.map +1 -1
- package/dist/server.d.ts.map +1 -1
- package/dist/server.js +10 -1
- package/dist/server.js.map +1 -1
- package/package.json +1 -1
- package/dist/apps/assets/realtime-dashboard-BKgb9FSM.js +0 -140
|
@@ -5,9 +5,9 @@
|
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<meta name="theme-color" content="#faf8f5">
|
|
7
7
|
<title>Realtime Dashboard - Convex MCP Apps</title>
|
|
8
|
-
<script type="module" crossorigin src="../../assets/realtime-dashboard-
|
|
8
|
+
<script type="module" crossorigin src="../../assets/realtime-dashboard-CZ-nhu4Y.js"></script>
|
|
9
9
|
<link rel="modulepreload" crossorigin href="../../assets/modulepreload-polyfill-B5Qt9EMX.js">
|
|
10
|
-
<link rel="stylesheet" crossorigin href="../../assets/style-
|
|
10
|
+
<link rel="stylesheet" crossorigin href="../../assets/style-l4K1L9Ub.css">
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
13
13
|
<div id="app"></div>
|
|
@@ -5,9 +5,9 @@
|
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<meta name="theme-color" content="#faf8f5">
|
|
7
7
|
<title>Schema Browser - Convex MCP Apps</title>
|
|
8
|
-
<script type="module" crossorigin src="../../assets/schema-browser-
|
|
8
|
+
<script type="module" crossorigin src="../../assets/schema-browser-DhIjBXvL.js"></script>
|
|
9
9
|
<link rel="modulepreload" crossorigin href="../../assets/modulepreload-polyfill-B5Qt9EMX.js">
|
|
10
|
-
<link rel="stylesheet" crossorigin href="../../assets/style-
|
|
10
|
+
<link rel="stylesheet" crossorigin href="../../assets/style-l4K1L9Ub.css">
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
13
13
|
<div id="app"></div>
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
var h=Object.defineProperty;var m=(c,e,t)=>e in c?h(c,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):c[e]=t;var l=(c,e,t)=>m(c,typeof e!="symbol"?e+"":e,t);import"./modulepreload-polyfill-B5Qt9EMX.js";class u{constructor(){l(this,"config",null);l(this,"refreshTimer",null);l(this,"isConnected",!0);l(this,"currentTheme","light");this.init()}init(){var t;this.initTheme();const e=window;if(e.__CONVEX_CONFIG__)this.config=e.__CONVEX_CONFIG__;else{const r=new URLSearchParams(window.location.search).get("config");if(r)try{this.config=JSON.parse(decodeURIComponent(r))}catch(s){console.error("Failed to parse config:",s)}}this.isConnected=!!((t=this.config)!=null&&t.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.innerHTML=this.currentTheme==="light"?'<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>':'<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>')}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" title="${this.isConnected?"Connected to Convex":"Not connected - check deploy key"}"></span>
|
|
5
|
+
Realtime Dashboard
|
|
6
|
+
</h1>
|
|
7
|
+
<div class="header-right">
|
|
8
|
+
<span class="deployment-url" title="Your Convex deployment URL">${t}</span>
|
|
9
|
+
<span class="last-update" id="lastUpdate" title="Time since last data refresh"></span>
|
|
10
|
+
<button class="theme-toggle-btn" id="themeToggle" title="Toggle dark/light mode">
|
|
11
|
+
<span id="themeIcon">${this.currentTheme==="light"?'<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>':'<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>'}</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 i=document.getElementById("themeToggle");i&&i.addEventListener("click",()=>this.toggleTheme()),this.renderMetrics(),this.renderCharts(),this.updateTimestamp()}renderMetrics(){var i;const e=document.getElementById("metricsGrid");if(!e)return;const t=((i=this.config)==null?void 0:i.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" title="${this.getMetricTooltip(r)}">
|
|
28
|
+
<div class="metric-header">
|
|
29
|
+
<span class="metric-label">${r.name}</span>
|
|
30
|
+
<span class="metric-icon" title="${this.getAggregationTooltip(r.aggregation)}">${this.getMetricIcon(r.aggregation)}</span>
|
|
31
|
+
</div>
|
|
32
|
+
<div class="metric-value" title="Exact value: ${(r.value||0).toLocaleString()}">${this.formatNumber(r.value||0)}</div>
|
|
33
|
+
<div class="metric-change neutral">
|
|
34
|
+
${r.documentCount!==void 0?`${r.documentCount.toLocaleString()} documents`:""}
|
|
35
|
+
</div>
|
|
36
|
+
<div class="metric-source" title="Data source: ${r.table} table">${r.table} / ${r.aggregation}${r.field?`(${r.field})`:""}</div>
|
|
37
|
+
</div>
|
|
38
|
+
`).join("")}getMetricIcon(e){return{count:"#",sum:"Σ",avg:"x̄",min:"↓",max:"↑"}[e]||"#"}getMetricTooltip(e){const t=this.getAggregationTooltip(e.aggregation);return`${e.name}: ${t} from ${e.table}${e.field?` on field "${e.field}"`:""}`}getAggregationTooltip(e){return{count:"Count - Total number of documents",sum:"Sum - Total of all values",avg:"Average - Mean of all values",min:"Minimum - Smallest value",max:"Maximum - Largest value"}[e]||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 s,a;const e=document.getElementById("chartsGrid");if(!e)return;const t=((s=this.config)==null?void 0:s.charts)||[],i=((a=this.config)==null?void 0:a.allDocuments)||{},r=this.renderActivityTable(i);if(t.length===0){e.innerHTML=`
|
|
39
|
+
${this.renderTablesOverview()}
|
|
40
|
+
${r}
|
|
41
|
+
`;return}e.innerHTML=t.map((n,o)=>{const d=i[n.table]||[];return`
|
|
42
|
+
<div class="chart-card">
|
|
43
|
+
<div class="chart-header">
|
|
44
|
+
<span class="chart-title">${n.title}</span>
|
|
45
|
+
<span class="chart-subtitle">${d.length} documents</span>
|
|
46
|
+
</div>
|
|
47
|
+
<div class="chart-container" id="chart-${o}">
|
|
48
|
+
${this.renderChartContent(n,d)}
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
51
|
+
`}).join("")+r}renderTablesOverview(){var i;const e=((i=this.config)==null?void 0:i.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" title="Document count per table in your Convex database">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}" title="${r.name}: ${r.documentCount.toLocaleString()} documents">
|
|
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 i=[];if(t.groupBy){const s=new Map;for(const a of e){const n=String(a[t.groupBy]||"Unknown");s.set(n,(s.get(n)||0)+1)}i=Array.from(s.entries()).map(([a,n])=>({label:a,value:n})).sort((a,n)=>n.value-a.value).slice(0,7)}else{const s=new Map;for(const a of e){const n=new Date(a._creationTime).toLocaleDateString();s.set(n,(s.get(n)||0)+1)}i=Array.from(s.entries()).map(([a,n])=>({label:a,value:n})).slice(-7)}const r=Math.max(...i.map(s=>s.value),1);return`
|
|
67
|
+
<div class="bar-chart">
|
|
68
|
+
${i.map(s=>`
|
|
69
|
+
<div class="bar" style="height: ${s.value/r*100}%" data-value="${s.value}">
|
|
70
|
+
<span class="bar-label">${s.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 i=new Map;for(const n of e){const o=String(n[t.groupBy]||"Unknown");i.set(o,(i.get(o)||0)+1)}const r=e.length,s=Array.from(i.entries()).map(([n,o])=>({label:n,count:o,percent:(o/r*100).toFixed(1)})).sort((n,o)=>o.count-n.count).slice(0,5),a=["#e94560","#0f3460","#16213e","#1a1a2e","#4caf50"];return`
|
|
75
|
+
<div class="pie-legend">
|
|
76
|
+
${s.map((n,o)=>`
|
|
77
|
+
<div class="pie-item">
|
|
78
|
+
<span class="pie-color" style="background: ${a[o%a.length]}"></span>
|
|
79
|
+
<span class="pie-label">${n.label}</span>
|
|
80
|
+
<span class="pie-value">${n.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 i=Object.keys(t[0]).slice(0,4);return`
|
|
85
|
+
<div class="table-chart">
|
|
86
|
+
<table>
|
|
87
|
+
<thead>
|
|
88
|
+
<tr>
|
|
89
|
+
${i.map(r=>`<th>${r}</th>`).join("")}
|
|
90
|
+
</tr>
|
|
91
|
+
</thead>
|
|
92
|
+
<tbody>
|
|
93
|
+
${t.map(r=>`
|
|
94
|
+
<tr>
|
|
95
|
+
${i.map(s=>`<td>${this.formatValue(r[s])}</td>`).join("")}
|
|
96
|
+
</tr>
|
|
97
|
+
`).join("")}
|
|
98
|
+
</tbody>
|
|
99
|
+
</table>
|
|
100
|
+
</div>
|
|
101
|
+
`}renderActivityTable(e){const t=Object.entries(e).flatMap(([i,r])=>r.map(s=>({table:i,...s}))).sort((i,r)=>{const s=i._creationTime||0;return(r._creationTime||0)-s}).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(i=>`
|
|
127
|
+
<tr>
|
|
128
|
+
<td>${i.table}</td>
|
|
129
|
+
<td style="font-family: var(--font-mono); color: var(--accent);">
|
|
130
|
+
${String(i._id||"").slice(0,12)}...
|
|
131
|
+
</td>
|
|
132
|
+
<td>${this.formatTimeAgo(i._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 i=Date.now()-e,r=Math.floor(i/6e4),s=Math.floor(i/36e5),a=Math.floor(i/864e5);return r<1?"Just now":r<60?`${r}m ago`:s<24?`${s}h ago`:`${a}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 g=new u;window.addEventListener("beforeunload",()=>{g.destroy()});
|