@@ -45,7 +44,10 @@
-
+
@@ -81,6 +83,7 @@ let state = {
search: '',
autoRefresh: true,
view: 'cards',
+ lastEvent: null,
};
// ─── Fetch ──────────────────────────────────────────────────────────────────
@@ -98,6 +101,15 @@ async function loadStats() {
document.getElementById('statErrors').textContent = s.errors;
}
+function updateStatsFromEvent(ev) {
+ if (!ev || !ev.stats) return;
+ const s = ev.stats;
+ document.getElementById('statTotal').textContent = s.total;
+ document.getElementById('statConfirmed').textContent = s.confirmed;
+ document.getElementById('statPending').textContent = s.pending;
+ document.getElementById('statErrors').textContent = s.errors;
+}
+
function setView(view) {
state.view = view;
document.getElementById('tabCards').classList.toggle('active', view === 'cards');
@@ -129,11 +141,12 @@ async function loadCards() {
}
async function loadStatus() {
- const [cfg, db, jobs, ins] = await Promise.all([
+ const [cfg, db, jobs, ins, stor] = await Promise.all([
api('/api/config'),
api('/api/db_info'),
api('/api/jobs'),
api('/api/insights?limit=8'),
+ api('/api/storage_stats'),
]);
const el = document.getElementById('status');
@@ -146,6 +159,10 @@ async function loadStatus() {
const topTags = (ins.top_tags || []).map(t => `
${t.key} (${t.count})`).join(' ');
const topHosts = (ins.top_hosts || []).map(t => `
${t.key} (${t.count})`).join(' ');
+ const bySource = Object.entries((stor.sql && stor.sql.by_source) ? stor.sql.by_source : {})
+ .slice(0, 8)
+ .map(([k,v]) => `
${k}: ${v}`)
+ .join(' ');
el.innerHTML = `
@@ -154,6 +171,13 @@ async function loadStatus() {
db mtime
${new Date(db.mtime).toLocaleString()}
+
+
Storage
+
SQL
${stor.sql.total_engrams} engrams (ok ${stor.sql.confirmed}, pending ${stor.sql.pending})
+
Vector
chroma ${(stor.vector.chroma_size_bytes/1024/1024).toFixed(1)} MB, cache ${stor.vector.embedding_cache_files} files
+
Obsidian
${stor.obsidian.configured ? 'configured' : 'not configured'}
+
By source
${bySource || '-'}
+
Jobs
${jobsHtml || '
Keine Daten
'}
@@ -168,30 +192,135 @@ async function loadStatus() {
}
async function loadGraph() {
- const g = await api('/api/graph?limit_nodes=250');
- const nodes = g.nodes || [];
- const edges = g.edges || [];
-
- const countByKind = nodes.reduce((acc, n) => {
- acc[n.kind] = (acc[n.kind] || 0) + 1;
- return acc;
- }, {});
-
- const el = document.getElementById('graph');
- el.innerHTML = `
-
-
Graph (lightweight)
-
nodes
${nodes.length} (${Object.entries(countByKind).map(([k,v])=>k+':'+v).join(', ')})
-
-
Aktuell: Tag/Host Knoten + Engram-Links. Nächster Schritt: echte Tool↔API↔Endpoint Ontologie.
-
-
-
Beispiele
-
Tip: öffne ein Engram-Detail und folge Links.
-
- `;
+ const g = await api('/api/graph?limit_nodes=200');
+ renderGraph(g.nodes || [], g.edges || []);
}
+function renderGraph(nodes, edges) {
+ const canvas = document.getElementById('graphCanvas');
+ const hint = document.getElementById('graphHint');
+ const ctx = canvas.getContext('2d');
+
+ // Fit canvas to container width (mobile)
+ const w = canvas.parentElement.clientWidth - 24;
+ canvas.width = Math.max(320, Math.min(520, w));
+ canvas.height = 520;
+
+ if (!nodes.length || !edges.length) {
+ hint.textContent = 'Graph: keine Kanten (noch keine Links/Tags/Hosts im Sample).';
+ ctx.clearRect(0,0,canvas.width,canvas.height);
+ return;
+ }
+
+ hint.textContent = `nodes=${nodes.length} edges=${edges.length}`;
+
+ const nodeById = new Map(nodes.map(n => [n.id, n]));
+ const sim = nodes.map(n => ({
+ id: n.id,
+ kind: n.kind,
+ label: n.label || n.id,
+ x: Math.random()*canvas.width,
+ y: Math.random()*canvas.height,
+ vx: 0, vy: 0,
+ }));
+ const simById = new Map(sim.map(n => [n.id, n]));
+
+ const links = edges
+ .map(e => ({a: simById.get(e.from), b: simById.get(e.to), kind: e.kind}))
+ .filter(l => l.a && l.b);
+
+ // Simple force layout (few iterations)
+ for (let iter=0; iter<180; iter++) {
+ // repulsion
+ for (let i=0; i
{
+ try {
+ state.lastEvent = JSON.parse(msg.data);
+ updateStatsFromEvent(state.lastEvent);
+ if (state.view === 'status') {
+ // refresh status panels without heavy re-render: just rerun loadStatus occasionally
+ loadStatus();
+ }
+ if (state.view === 'graph') {
+ // fetch graph less often (every ~15s)
+ const t = Date.now();
+ if (!state._lastGraphFetch || (t - state._lastGraphFetch) > 15000) {
+ state._lastGraphFetch = t;
+ loadGraph();
+ }
+ }
+ } catch (e) {}
+ };
+ es.onerror = () => {
+ // keep UI usable even if SSE drops
+ };
+ } catch (e) {}
+}
+
+startEvents();
+
function renderCards() {
const el = document.getElementById('cards');
el.innerHTML = state.items.map(item => `