kernelbot 1.0.37 → 1.0.39

package/src/dashboard/agents.css

@@ -0,0 +1,469 @@
+/* ═══════ AGENTS PAGE STYLES ═══════ */
+
+/* ═══════ STATS BAR ═══════ */
+.agents-stats-bar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 32px;
+  padding: 10px 24px;
+  border-bottom: 1px solid var(--panel-border);
+}
+.agents-stat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+}
+.agents-stat-val {
+  font-family: var(--font-hud);
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--accent);
+}
+.agents-stat-val.completed { color: var(--accent); }
+.agents-stat-val.failed { color: var(--red); }
+.agents-stat-lbl {
+  font-family: var(--font-hud);
+  font-size: 7px;
+  letter-spacing: 1.5px;
+  color: var(--dim);
+}
+
+/* ═══════ WORKFLOW CONTAINER ═══════ */
+.workflow-container {
+  position: relative;
+  height: calc(100vh - 200px);
+  overflow: hidden;
+  cursor: grab;
+  user-select: none;
+}
+.workflow-container.grabbing { cursor: grabbing; }
+.workflow-container.dragging-node { cursor: default; }
+
+/* Pannable / zoomable layer */
+.workflow-canvas {
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%; height: 100%;
+  transform-origin: 0 0;
+  will-change: transform;
+}
+
+.workflow-svg {
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%; height: 100%;
+  pointer-events: none;
+  z-index: 1;
+  overflow: visible;
+}
+
+/* ═══════ SVG CONNECTIONS ═══════ */
+.connection-path {
+  fill: none;
+  stroke: rgba(57,255,20,0.12);
+  stroke-width: 1.5;
+  marker-end: url(#arrow);
+  transition: stroke 0.4s, stroke-width 0.4s;
+}
+.connection-path.active {
+  stroke: rgba(57,255,20,0.5);
+  stroke-width: 2;
+  marker-end: url(#arrow-active);
+  filter: drop-shadow(0 0 6px rgba(57,255,20,0.3));
+}
+
+/* Message particle traveling along path */
+.msg-particle {
+  fill: var(--accent);
+  filter: drop-shadow(0 0 6px var(--accent));
+  transition: r 0.2s;
+}
+.msg-particle.burst {
+  fill: var(--amber);
+  filter: drop-shadow(0 0 8px var(--amber));
+}
+
+/* Glow trail behind particle */
+.msg-trail {
+  fill: none;
+  stroke: var(--accent);
+  stroke-width: 3;
+  stroke-linecap: round;
+  opacity: 0.3;
+  filter: drop-shadow(0 0 4px var(--accent));
+}
+
+/* ═══════ WORKFLOW NODES ═══════ */
+.workflow-node {
+  position: absolute;
+  background: var(--panel-bg);
+  border: 1px solid var(--panel-border);
+  padding: 12px 16px;
+  cursor: grab;
+  z-index: 2;
+  transition: border-color 0.3s, box-shadow 0.3s;
+  min-width: 180px;
+  user-select: none;
+}
+.workflow-node.dragging {
+  cursor: grabbing;
+  z-index: 10;
+  box-shadow: 0 0 30px rgba(57,255,20,0.15), 0 8px 32px rgba(0,0,0,0.4);
+  border-color: var(--accent);
+}
+.workflow-node:hover {
+  border-color: var(--panel-border-hover);
+  box-shadow: 0 0 20px rgba(57,255,20,0.08);
+}
+.workflow-node.selected {
+  border-color: var(--accent);
+  box-shadow: 0 0 24px rgba(57,255,20,0.12), inset 0 0 12px rgba(57,255,20,0.03);
+}
+.workflow-node.has-active-job {
+  animation: nodeGlow 2s ease-in-out infinite;
+}
+
+/* Ripple flash on new job arrival */
+.workflow-node.ripple::after {
+  content: '';
+  position: absolute;
+  inset: -4px;
+  border: 2px solid var(--accent);
+  opacity: 1;
+  animation: nodeRipple 0.8s ease-out forwards;
+  pointer-events: none;
+}
+@keyframes nodeRipple {
+  0% { inset: -4px; opacity: 0.8; border-width: 2px; }
+  100% { inset: -20px; opacity: 0; border-width: 0px; }
+}
+@keyframes nodeGlow {
+  0%, 100% { box-shadow: 0 0 8px rgba(57,255,20,0.05); }
+  50% { box-shadow: 0 0 20px rgba(57,255,20,0.15); }
+}
+
+/* Node variants */
+.workflow-node.orchestrator {
+  min-width: 220px;
+  border-color: rgba(57,255,20,0.25);
+  background: linear-gradient(135deg, rgba(8,14,24,0.95), rgba(57,255,20,0.03));
+}
+.workflow-node.user-node {
+  border-color: rgba(68,136,255,0.25);
+  background: linear-gradient(135deg, rgba(8,14,24,0.95), rgba(68,136,255,0.03));
+}
+
+/* Node internals */
+.node-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+.node-emoji {
+  font-size: 18px;
+  line-height: 1;
+}
+.node-title {
+  font-family: var(--font-hud);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 1.5px;
+  color: var(--accent);
+}
+.workflow-node.user-node .node-title { color: var(--blue); }
+
+.node-status-dot {
+  width: 6px; height: 6px;
+  border-radius: 50%;
+  margin-left: auto;
+  background: var(--dim);
+  transition: all 0.3s;
+}
+.node-status-dot.active { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
+.node-status-dot.idle { background: var(--dim); }
+
+.node-body {
+  font-size: 10px;
+  color: var(--text);
+  line-height: 1.4;
+}
+.node-meta-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 1px 0;
+  font-size: 9px;
+}
+.node-meta-row .k { color: var(--dim); }
+.node-meta-row .v { color: var(--accent); font-family: var(--font-hud); font-size: 8px; }
+
+.node-job-indicator {
+  margin-top: 6px;
+  padding: 4px 6px;
+  background: rgba(57,255,20,0.04);
+  border: 1px solid rgba(57,255,20,0.08);
+  font-size: 9px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.node-job-indicator .job-pulse {
+  width: 5px; height: 5px;
+  border-radius: 50%;
+  background: var(--accent);
+  box-shadow: 0 0 6px var(--accent);
+  animation: blink 1.5s ease-in-out infinite;
+}
+.node-job-indicator .job-id {
+  color: var(--amber);
+  font-family: var(--font-hud);
+  font-size: 8px;
+  letter-spacing: 0.5px;
+}
+.node-job-indicator .job-task {
+  color: var(--text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 120px;
+}
+
+/* Node ports (anchor points for connections) */
+.node-port {
+  position: absolute;
+  width: 8px; height: 8px;
+  border-radius: 50%;
+  background: rgba(57,255,20,0.15);
+  border: 1px solid rgba(57,255,20,0.3);
+  z-index: 3;
+  transition: all 0.3s;
+}
+.node-port.left { left: -4px; top: 50%; transform: translateY(-50%); }
+.node-port.right { right: -4px; top: 50%; transform: translateY(-50%); }
+.node-port.active {
+  background: var(--accent);
+  border-color: var(--accent);
+  box-shadow: 0 0 8px var(--accent);
+}
+
+/* ═══════ ZOOM CONTROLS ═══════ */
+.zoom-controls {
+  position: absolute;
+  bottom: 16px;
+  left: 16px;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.zoom-btn {
+  width: 32px; height: 32px;
+  background: var(--bg2);
+  border: 1px solid var(--panel-border);
+  color: var(--accent);
+  font-family: var(--font-hud);
+  font-size: 14px;
+  font-weight: 700;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+  user-select: none;
+}
+.zoom-btn:hover {
+  background: var(--accent-bg);
+  border-color: var(--accent-dim);
+}
+.zoom-btn:active {
+  background: rgba(57,255,20,0.12);
+}
+.zoom-btn.text {
+  font-size: 7px;
+  letter-spacing: 0.5px;
+}
+.zoom-level {
+  width: 32px; height: 24px;
+  background: rgba(8,14,24,0.8);
+  border: 1px solid var(--panel-border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-hud);
+  font-size: 8px;
+  color: var(--dim);
+  letter-spacing: 0.5px;
+}
+
+/* ═══════ MINIMAP ═══════ */
+.minimap {
+  position: absolute;
+  bottom: 16px;
+  right: 16px;
+  width: 160px;
+  height: 100px;
+  background: rgba(5,8,12,0.85);
+  border: 1px solid var(--panel-border);
+  z-index: 50;
+  overflow: hidden;
+  backdrop-filter: blur(4px);
+}
+.minimap-viewport {
+  position: absolute;
+  border: 1px solid rgba(57,255,20,0.4);
+  background: rgba(57,255,20,0.04);
+  pointer-events: none;
+}
+.minimap-node {
+  position: absolute;
+  background: rgba(57,255,20,0.3);
+  border: 1px solid rgba(57,255,20,0.5);
+}
+.minimap-node.active {
+  background: var(--accent);
+  box-shadow: 0 0 4px var(--accent);
+}
+.minimap-node.user { background: rgba(68,136,255,0.4); border-color: rgba(68,136,255,0.6); }
+.minimap-node.orch { background: rgba(57,255,20,0.5); border-color: var(--accent); }
+
+/* ═══════ DETAIL PANEL ═══════ */
+.detail-panel {
+  position: fixed;
+  top: var(--topbar-h);
+  right: var(--rightbar-w);
+  bottom: 28px;
+  width: 360px;
+  background: var(--bg2);
+  border-left: 1px solid var(--panel-border);
+  z-index: 200;
+  transform: translateX(100%);
+  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.detail-panel.open {
+  transform: translateX(0);
+}
+
+.detail-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  background: linear-gradient(90deg, var(--accent-bg), transparent 70%);
+  border-bottom: 1px solid var(--panel-border);
+  flex-shrink: 0;
+}
+.detail-panel-title {
+  font-family: var(--font-hud);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 2px;
+  color: var(--accent);
+}
+.detail-panel-close {
+  font-size: 18px;
+  color: var(--dim);
+  cursor: pointer;
+  padding: 0 4px;
+  transition: color 0.2s;
+}
+.detail-panel-close:hover { color: var(--accent); }
+
+.detail-panel-body {
+  flex: 1;
+  padding: 12px 16px;
+  overflow-y: auto;
+}
+.detail-panel-body::-webkit-scrollbar { width: 3px; }
+.detail-panel-body::-webkit-scrollbar-track { background: transparent; }
+.detail-panel-body::-webkit-scrollbar-thumb { background: var(--accent-dim); border-radius: 2px; }
+
+/* Detail panel data rows */
+.detail-section {
+  margin-bottom: 12px;
+}
+.detail-section-label {
+  font-family: var(--font-hud);
+  font-size: 7px;
+  letter-spacing: 1.5px;
+  color: var(--dim);
+  margin-bottom: 4px;
+  padding-bottom: 2px;
+  border-bottom: 1px solid rgba(57,255,20,0.05);
+}
+.detail-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 2px 0;
+  font-size: 10px;
+}
+.detail-row .k { color: var(--dim); }
+.detail-row .v { color: var(--accent); text-align: right; }
+
+.detail-tool-tag {
+  display: inline-block;
+  padding: 1px 5px;
+  margin: 1px 2px;
+  border: 1px solid rgba(57,255,20,0.12);
+  color: var(--accent);
+  font-size: 8px;
+  font-family: var(--font-mono);
+}
+.detail-cat-tag {
+  display: inline-block;
+  padding: 1px 5px;
+  margin: 1px 2px;
+  border: 1px solid rgba(255,0,255,0.15);
+  color: var(--magenta);
+  font-size: 8px;
+  font-family: var(--font-hud);
+  letter-spacing: 0.5px;
+}
+
+.detail-job-item {
+  padding: 6px 0;
+  border-bottom: 1px solid rgba(57,255,20,0.03);
+}
+.detail-job-item:last-child { border-bottom: none; }
+.detail-job-meta {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.detail-job-task {
+  font-size: 10px;
+  color: var(--text);
+  margin-top: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.detail-job-sub {
+  font-size: 9px;
+  color: var(--dim);
+  margin-top: 1px;
+}
+
+/* ═══════ RESPONSIVE ═══════ */
+@media (max-width: 1100px) {
+  .detail-panel {
+    right: 0;
+    width: 320px;
+  }
+  .workflow-node { min-width: 150px; }
+  .workflow-node.orchestrator { min-width: 180px; }
+  .minimap { display: none; }
+}
+@media (max-width: 768px) {
+  .detail-panel { width: 100%; right: 0; }
+  .workflow-node { min-width: 130px; padding: 8px 10px; }
+  .agents-stats-bar { gap: 16px; padding: 8px 12px; }
+  .agents-stat-val { font-size: 13px; }
+  .zoom-controls { bottom: 8px; left: 8px; }
+  .minimap { display: none; }
+}

package/src/dashboard/agents.html

@@ -0,0 +1,184 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>KERNEL // Agent Topology</title>
+<link rel="stylesheet" href="shared.css">
+<link rel="stylesheet" href="agents.css">
+</head>
+<body>
+
+<canvas id="particle-canvas"></canvas>
+<div class="scanlines"></div>
+
+<!-- ═══════ SIDEBAR ═══════ -->
+<nav class="sidebar">
+  <div class="sidebar-logo">
+    <svg viewBox="0 0 32 32" shape-rendering="crispEdges">
+      <path fill="rgba(57,255,20,0.35)" d="M10,2h10v2h-10z M8,4h2v2h-2z M6,6h2v4h-2z M4,10h2v8h-2z M6,18h2v2h-2z M8,20h2v2h-2z M10,22h14v2h-14z M24,18h2v4h-2z M26,8h2v10h-2z M24,6h2v2h-2z"/>
+      <path fill="rgba(57,255,20,0.6)" d="M12,8h8v2h-8z M10,10h2v10h-2z M20,10h2v6h-2z M18,18h2v2h-2z M12,20h6v2h-6z"/>
+      <path fill="#39ff14" d="M14,14h4v2h-2v2h-2z"/>
+    </svg>
+  </div>
+
+  <div class="sidebar-nav">
+    <a class="nav-item" href="/" title="Dashboard">
+      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg>
+      <span class="nav-label">DASH</span>
+    </a>
+    <a class="nav-item active" href="/agents.html" title="Agents">
+      <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="3"/><circle cx="5" cy="19" r="3"/><circle cx="19" cy="19" r="3"/><path d="M12 8v4M7.5 17.2l3-4.2M16.5 17.2l-3-4.2"/></svg>
+      <span class="nav-label">AGENTS</span>
+    </a>
+  </div>
+
+  <!-- Sidebar mini gauges -->
+  <div class="sidebar-gauges">
+    <div class="mini-gauge" id="sb-cpu">
+      <svg viewBox="0 0 38 38"><circle class="track" cx="19" cy="19" r="16"/><circle class="fill" cx="19" cy="19" r="16" stroke-dasharray="100.5" stroke-dashoffset="100.5"/></svg>
+      <div class="mini-gauge-label"><span class="val">--%</span><span class="lbl">CPU</span></div>
+    </div>
+    <div class="mini-gauge" id="sb-ram">
+      <svg viewBox="0 0 38 38"><circle class="track" cx="19" cy="19" r="16"/><circle class="fill" cx="19" cy="19" r="16" stroke-dasharray="100.5" stroke-dashoffset="100.5"/></svg>
+      <div class="mini-gauge-label"><span class="val">--%</span><span class="lbl">RAM</span></div>
+    </div>
+    <div class="sidebar-conn connected" id="conn-dot"></div>
+  </div>
+</nav>
+
+<!-- ═══════ TOP BAR ═══════ -->
+<header class="top-bar">
+  <div class="top-bar-left">
+    <span class="top-bar-title">KernelBot</span>
+    <span class="top-bar-sep">//</span>
+    <span class="top-bar-nav">
+      <a class="top-bar-nav-item" href="/">DASHBOARD</a>
+      <a class="top-bar-nav-item active" href="/agents.html">AGENTS</a>
+    </span>
+  </div>
+  <div class="top-bar-right">
+    <span class="top-bar-conn" id="top-conn"></span>
+    <span><span class="val" id="hdr-status">ONLINE</span></span>
+    <span class="sep">//</span>
+    <span>UP <span class="val" id="hdr-uptime">--</span></span>
+    <span class="sep">//</span>
+    <span class="val" id="hdr-clock">--</span>
+  </div>
+</header>
+
+<!-- ═══════ RIGHT BAR ═══════ -->
+<aside class="right-bar">
+  <div class="right-stat" title="Running Jobs">
+    <span class="r-val zero" id="rb-jobs">0</span>
+    <span class="r-lbl">RUNNING</span>
+  </div>
+  <div class="right-divider"></div>
+  <div class="right-stat" title="Total Jobs">
+    <span class="r-val zero" id="rb-total-jobs">0</span>
+    <span class="r-lbl">TOTAL</span>
+  </div>
+  <div class="right-divider"></div>
+  <div class="right-stat" title="Completed">
+    <span class="r-val zero" id="rb-completed">0</span>
+    <span class="r-lbl">DONE</span>
+  </div>
+  <div class="right-divider"></div>
+  <div class="right-stat" title="Failed">
+    <span class="r-val zero" id="rb-failed">0</span>
+    <span class="r-lbl">FAIL</span>
+  </div>
+  <div class="right-divider"></div>
+  <div class="right-stat" title="Worker Types">
+    <span class="r-val" id="rb-workers">6</span>
+    <span class="r-lbl">TYPES</span>
+  </div>
+  <div class="right-bar-clock" id="rb-clock">--:--</div>
+</aside>
+
+<!-- ═══════ MAIN ═══════ -->
+<div class="main">
+
+  <!-- Hero bar -->
+  <div class="hero-bar">
+    <canvas id="waveform-canvas"></canvas>
+    <div class="hero-pulse">
+      <div class="pulse-stat">
+        <span class="pulse-label">ORCHESTRATOR</span>
+        <span class="pulse-val" id="pulse-orch">--</span>
+      </div>
+      <div class="pulse-stat">
+        <span class="pulse-label">WORKER BRAIN</span>
+        <span class="pulse-val" id="pulse-brain">--</span>
+      </div>
+      <div class="pulse-stat">
+        <span class="pulse-label">ACTIVE JOBS</span>
+        <span class="pulse-val idle" id="pulse-jobs">0</span>
+      </div>
+      <div class="pulse-stat">
+        <span class="pulse-label">WORKER TYPES</span>
+        <span class="pulse-val" id="pulse-workers">6</span>
+      </div>
+    </div>
+  </div>
+
+  <!-- Stats summary bar -->
+  <div class="agents-stats-bar" id="agents-stats-bar">
+    <div class="agents-stat"><span class="agents-stat-val" id="stat-running">0</span><span class="agents-stat-lbl">RUNNING</span></div>
+    <div class="agents-stat"><span class="agents-stat-val" id="stat-queued">0</span><span class="agents-stat-lbl">QUEUED</span></div>
+    <div class="agents-stat"><span class="agents-stat-val completed" id="stat-completed">0</span><span class="agents-stat-lbl">COMPLETED</span></div>
+    <div class="agents-stat"><span class="agents-stat-val failed" id="stat-failed">0</span><span class="agents-stat-lbl">FAILED</span></div>
+    <div class="agents-stat"><span class="agents-stat-val" id="stat-total-tools">0</span><span class="agents-stat-lbl">TOTAL TOOLS</span></div>
+  </div>
+
+  <!-- Workflow container (pan/zoom) -->
+  <div class="workflow-container" id="workflow-container">
+    <div class="workflow-canvas" id="workflow-canvas">
+      <svg class="workflow-svg" id="workflow-svg">
+        <defs>
+          <marker id="arrow" viewBox="0 0 10 6" refX="10" refY="3" markerWidth="8" markerHeight="6" orient="auto-start-reverse">
+            <path d="M 0 0 L 10 3 L 0 6 z" fill="rgba(57,255,20,0.4)"/>
+          </marker>
+          <marker id="arrow-active" viewBox="0 0 10 6" refX="10" refY="3" markerWidth="8" markerHeight="6" orient="auto-start-reverse">
+            <path d="M 0 0 L 10 3 L 0 6 z" fill="#39ff14"/>
+          </marker>
+        </defs>
+      </svg>
+      <div id="workflow-nodes"></div>
+    </div>
+
+    <!-- Zoom controls -->
+    <div class="zoom-controls">
+      <div class="zoom-btn" id="zoom-in" title="Zoom In">+</div>
+      <div class="zoom-level" id="zoom-level">100%</div>
+      <div class="zoom-btn" id="zoom-out" title="Zoom Out">&minus;</div>
+      <div class="zoom-btn text" id="zoom-fit" title="Fit to View">FIT</div>
+    </div>
+
+    <!-- Minimap -->
+    <div class="minimap" id="minimap">
+      <div class="minimap-viewport" id="minimap-viewport"></div>
+    </div>
+  </div>
+
+</div>
+
+<!-- Detail slide-out panel -->
+<div class="detail-panel" id="detail-panel">
+  <div class="detail-panel-header">
+    <span class="detail-panel-title" id="detail-title">--</span>
+    <span class="detail-panel-close" id="detail-close">&times;</span>
+  </div>
+  <div class="detail-panel-body" id="detail-body"></div>
+</div>
+
+<!-- Scrolling log ticker (sticky bottom) -->
+<div class="log-ticker" id="log-ticker">
+  <div class="ticker-label"><span class="dot-pulse"></span>LIVE</div>
+  <div class="ticker-track" id="ticker-track"></div>
+</div>
+
+<script src="shared.js"></script>
+<script src="agents.js"></script>
+</body>
+</html>