);
}
function MetricsTab({ meta }) {
const m = meta.metrics || { sent: '—', replyRate: '—', cost: '—' };
return (
<>
Last 24 hours
{Object.entries(m).map(([k, v], i) => (
{v}
{k.replace(/([A-Z])/g, ' $1').trim()}
))}
Health
p95 latency214 ms
Error rate (24h)0.4%
Concurrent runs14 / 50
);
}
function LogsTab({ meta }) {
return (
<>
Recent runs
14:02:11.342OK run #28411 · 184ms · lead LD_028412{'\n'}
14:02:08.110OK run #28410 · 156ms · lead LD_028411{'\n'}
14:02:01.821INFO retrying provider · attempt 2 of 3{'\n'}
14:01:59.044WARN rate limit warning (95% of quota){'\n'}
14:01:55.733OK run #28409 · 209ms · lead LD_028410{'\n'}
14:01:48.502OK run #28408 · 162ms · lead LD_028409{'\n'}
14:01:40.117OK run #28407 · 175ms · lead LD_028408{'\n'}
14:01:32.099OK run #28406 · 198ms · lead LD_028407{'\n'}
14:01:24.080OK run #28405 · 191ms · lead LD_028406
);
}
// =============================================================================
// Run bar (shows during test run)
// =============================================================================
function RunBar({ step, total, currentNode }) {
const meta = currentNode ? NODE_CATALOG[currentNode.type] : null;
return (
Run #28412|{meta ? meta.name : '—'}·{step + 1} / {total}
);
}
// =============================================================================
// App root
// =============================================================================
function App({ user, onSignOut }) {
const [nodes, setNodes] = useState(INITIAL_NODES);
const [edges] = useState(INITIAL_EDGES);
const [selectedId, setSelectedId] = useState(null);
const [query, setQuery] = useState('');
const [pan, setPan] = useState({ x: 24, y: 16 });
const [zoom, setZoom] = useState(0.62);
const [name, setName] = useState('Complete Loan Lifecycle - FOS to Approval');
// run state - Start with first node (Dushyant's FOS node) as ACTIVE
const [runActive, setRunActive] = useState(true);
const [runStep, setRunStep] = useState(0);
// auto-fit on mount: compute bounds and fit to canvas-host viewport
useEffect(() => {
const host = document.querySelector('.canvas-host');
if (!host) return;
const r = host.getBoundingClientRect();
// bounds of initial nodes
let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
for (const n of INITIAL_NODES) {
const s = nodeSize(n.type);
minX = Math.min(minX, n.x); minY = Math.min(minY, n.y);
maxX = Math.max(maxX, n.x + s.w); maxY = Math.max(maxY, n.y + s.h);
}
const pad = 60;
const w = (maxX - minX) + pad * 2;
const h = (maxY - minY) + pad * 2;
const z = Math.min(1, Math.min(r.width / w, r.height / h));
const z2 = Math.max(0.45, Math.min(0.95, z));
const cx = (minX + maxX) / 2;
const cy = (minY + maxY) / 2;
setZoom(z2);
setPan({
x: r.width / 2 - cx * z2,
y: r.height / 2 - cy * z2,
});
}, []);
// tweak state — accent/density already applied by NuggetTweaks panel via CSS overrides
// (the panel mounts separately, so we don't need to thread state through here)
// ----- drag from rail -----
function onDragStart(e, type) {
e.dataTransfer.setData('application/x-nugget-node', type);
e.dataTransfer.effectAllowed = 'copy';
}
function onDropNew(type, x, y) {
const id = 'n_' + Math.random().toString(36).slice(2, 8);
setNodes((ns) => [...ns, { id, type, x, y }]);
setSelectedId(id);
}
function onMoveNode(id, x, y) {
setNodes((ns) => ns.map((n) => (n.id === id ? { ...n, x, y } : n)));
}
// ----- run animation -----
useEffect(() => {
if (!runActive) return;
setRunStep(0);
const total = RUN_PATH.length;
const t = setInterval(() => {
setRunStep((s) => {
if (s + 1 >= total) {
clearInterval(t);
setTimeout(() => setRunActive(false), 800);
return s;
}
return s + 1;
});
}, 950);
return () => clearInterval(t);
}, [runActive]);
function startRun() {
setRunActive(true);
setSelectedId(null);
}
const selectedNode = nodes.find((n) => n.id === selectedId);
const runningId = runActive ? RUN_PATH[runStep] : null;
if (runActive) {
// focus on running node by ensuring it's in view (no-op since static)
}
const showInspector = !!selectedNode && !runActive;
return (
{runActive && (
n.id === runningId)}
/>
)}
{showInspector && setSelectedId(null)} />}
);
}
// mount with auth wrapper
ReactDOM.createRoot(document.getElementById('root')).render(
);