3a9c2795cf
Frontend refactored to ES6 modules (no bundler): js/main.js — entry point, wires all modules js/auth.js — OIDC login, token management js/ws.js — /ws, /ws/test, /ws/trace connections + HUD handler js/chat.js — messages, send, streaming js/graph.js — Cytoscape visualization + animation js/trace.js — trace panel js/dashboard.js — workspace controls rendering js/awareness.js — state panel, sensors, meters js/tests.js — test status display js/util.js — shared utilities New 2-row layout: Top: test status | connection status Middle: Workspace | Node Details | Graph Bottom: Chat | Awareness | Trace PA routing: routes ALL tool requests to expert (DB, UI, buttons, machines) Dashboard integration test: 15/15 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
58 lines
2.0 KiB
JavaScript
58 lines
2.0 KiB
JavaScript
/** Awareness panel: memorizer state, sensor readings, node meters. */
|
|
|
|
import { esc, truncate } from './util.js';
|
|
|
|
let _sensorReadings = {};
|
|
|
|
export function updateAwarenessState(state) {
|
|
const body = document.getElementById('aw-state-body');
|
|
if (!body) return;
|
|
const display = [
|
|
['user', state.user_name],
|
|
['mood', state.user_mood],
|
|
['topic', state.topic],
|
|
['lang', state.language],
|
|
['style', state.style_hint],
|
|
['situation', state.situation],
|
|
];
|
|
const facts = state.facts || [];
|
|
const history = state.topic_history || [];
|
|
|
|
let html = display.map(([k, v]) =>
|
|
`<div class="aw-row"><span class="aw-key">${esc(k)}</span><span class="aw-val">${esc(v || 'null')}</span></div>`
|
|
).join('');
|
|
|
|
if (facts.length) {
|
|
html += '<div class="aw-row"><span class="aw-key">facts</span><span class="aw-val">'
|
|
+ facts.map(f => esc(truncate(f, 40))).join('<br>') + '</span></div>';
|
|
}
|
|
if (history.length) {
|
|
html += '<div class="aw-row"><span class="aw-key">topics</span><span class="aw-val">'
|
|
+ history.map(t => esc(truncate(t, 25))).join(', ') + '</span></div>';
|
|
}
|
|
body.innerHTML = html;
|
|
}
|
|
|
|
export function updateAwarenessSensors(tick, deltas) {
|
|
const body = document.getElementById('aw-sensor-body');
|
|
if (!body) return;
|
|
|
|
for (const [k, v] of Object.entries(deltas)) {
|
|
_sensorReadings[k] = v;
|
|
}
|
|
let html = `<div class="aw-row"><span class="aw-key">tick</span><span class="aw-val">#${tick}</span></div>`;
|
|
for (const [k, v] of Object.entries(_sensorReadings)) {
|
|
html += `<div class="aw-row"><span class="aw-key">${esc(k)}</span><span class="aw-val">${esc(String(v))}</span></div>`;
|
|
}
|
|
body.innerHTML = html;
|
|
}
|
|
|
|
export function updateMeter(node, tokens, maxTokens, fillPct) {
|
|
const meter = document.getElementById('meter-' + node);
|
|
if (!meter) return;
|
|
const bar = meter.querySelector('.nm-bar');
|
|
const text = meter.querySelector('.nm-text');
|
|
if (bar) bar.style.width = fillPct + '%';
|
|
if (text) text.textContent = `${tokens}/${maxTokens}t`;
|
|
}
|