npm - @jaimevalasek/aioson - Versions diffs - 1.5.1 → 1.6.0 - Mend

@jaimevalasek/aioson 1.5.1 → 1.6.0

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.

Files changed (131) hide show

package/README.md +6 -0
package/docs/design-previews/aurora-command-ui-website.html +884 -0
package/docs/design-previews/aurora-command-ui.html +682 -0
package/docs/design-previews/bold-editorial-ui-website.html +658 -0
package/docs/design-previews/bold-editorial-ui.html +717 -0
package/docs/design-previews/clean-saas-ui-website.html +1202 -0
package/docs/design-previews/clean-saas-ui.html +549 -0
package/docs/design-previews/cognitive-core-ui-website.html +1009 -0
package/docs/design-previews/cognitive-core-ui.html +463 -0
package/docs/design-previews/glassmorphism-ui-website.html +572 -0
package/docs/design-previews/glassmorphism-ui.html +886 -0
package/docs/design-previews/index.html +699 -0
package/docs/design-previews/interface-design-website.html +1187 -0
package/docs/design-previews/interface-design.html +513 -0
package/docs/design-previews/neo-brutalist-ui-website.html +621 -0
package/docs/design-previews/neo-brutalist-ui.html +797 -0
package/docs/design-previews/premium-command-center-ui-website.html +1217 -0
package/docs/design-previews/premium-command-center-ui.html +552 -0
package/docs/design-previews/warm-craft-ui-website.html +684 -0
package/docs/design-previews/warm-craft-ui.html +739 -0
package/docs/en/cli-reference.md +20 -9
package/docs/pt/README.md +7 -0
package/docs/pt/agent-sharding.md +132 -0
package/docs/pt/agentes.md +8 -2
package/docs/pt/busca-de-contexto.md +129 -0
package/docs/pt/cache-de-contexto.md +156 -0
package/docs/pt/comandos-cli.md +28 -0
package/docs/pt/design-hybrid-forge.md +107 -0
package/docs/pt/inicio-rapido.md +54 -3
package/docs/pt/inteligencia-adaptativa.md +324 -0
package/docs/pt/monitor-de-contexto.md +104 -0
package/docs/pt/recuperacao-de-sessao.md +125 -0
package/docs/pt/sandbox.md +125 -0
package/docs/pt/skills.md +98 -6
package/package.json +1 -1
package/src/agent-loader.js +280 -0
package/src/cli.js +94 -0
package/src/commands/agent-loader.js +85 -0
package/src/commands/context-cache.js +90 -0
package/src/commands/context-monitor.js +92 -0
package/src/commands/context-search.js +66 -0
package/src/commands/design-hybrid-options.js +385 -0
package/src/commands/health.js +214 -0
package/src/commands/init.js +54 -13
package/src/commands/install.js +52 -13
package/src/commands/learning-evolve.js +355 -0
package/src/commands/live.js +34 -0
package/src/commands/recovery.js +43 -0
package/src/commands/sandbox.js +37 -0
package/src/commands/setup-context.js +22 -2
package/src/commands/setup.js +178 -0
package/src/commands/skill.js +79 -32
package/src/commands/tool-registry-cmd.js +232 -0
package/src/commands/update.js +7 -0
package/src/constants.js +9 -0
package/src/context-cache.js +159 -0
package/src/context-search.js +326 -0
package/src/design-variation-catalog.js +503 -0
package/src/i18n/messages/en.js +32 -2
package/src/i18n/messages/es.js +30 -2
package/src/i18n/messages/fr.js +30 -2
package/src/i18n/messages/pt-BR.js +32 -2
package/src/install-animation.js +260 -0
package/src/install-profile.js +143 -0
package/src/install-wizard.js +474 -0
package/src/installer.js +38 -10
package/src/parser.js +7 -1
package/src/recovery-context-session.js +154 -0
package/src/runtime-store.js +97 -1
package/src/sandbox.js +177 -0
package/src/tool-executor.js +94 -0
package/src/updater.js +11 -3
package/template/.aioson/agents/analyst.md +58 -3
package/template/.aioson/agents/architect.md +38 -0
package/template/.aioson/agents/design-hybrid-forge.md +127 -0
package/template/.aioson/agents/dev.md +103 -0
package/template/.aioson/agents/deyvin.md +57 -0
package/template/.aioson/agents/pm.md +58 -0
package/template/.aioson/agents/product.md +28 -0
package/template/.aioson/agents/qa.md +79 -0
package/template/.aioson/agents/setup.md +65 -3
package/template/.aioson/agents/sheldon.md +107 -6
package/template/.aioson/agents/tester.md +156 -0
package/template/.aioson/config.md +15 -0
package/template/.aioson/context/forensics/.gitkeep +0 -0
package/template/.aioson/context/seeds/seed-example.md +27 -0
package/template/.aioson/context/user-profile.md +42 -0
package/template/.aioson/locales/en/agents/setup.md +33 -1
package/template/.aioson/locales/es/agents/setup.md +33 -1
package/template/.aioson/locales/fr/agents/setup.md +33 -1
package/template/.aioson/locales/pt-BR/agents/setup.md +33 -1
package/template/.aioson/skills/design/aurora-command-ui/SKILL.md +243 -0
package/template/.aioson/skills/design/aurora-command-ui/references/art-direction.md +293 -0
package/template/.aioson/skills/design/aurora-command-ui/references/components.md +827 -0
package/template/.aioson/skills/design/aurora-command-ui/references/dashboards.md +250 -0
package/template/.aioson/skills/design/aurora-command-ui/references/design-tokens.md +585 -0
package/template/.aioson/skills/design/aurora-command-ui/references/motion.md +365 -0
package/template/.aioson/skills/design/aurora-command-ui/references/patterns.md +482 -0
package/template/.aioson/skills/design/aurora-command-ui/references/websites.md +387 -0
package/template/.aioson/skills/design/glassmorphism-ui/SKILL.md +222 -0
package/template/.aioson/skills/design/glassmorphism-ui/references/art-direction.md +159 -0
package/template/.aioson/skills/design/glassmorphism-ui/references/components.md +498 -0
package/template/.aioson/skills/design/glassmorphism-ui/references/dashboards.md +236 -0
package/template/.aioson/skills/design/glassmorphism-ui/references/design-tokens.md +274 -0
package/template/.aioson/skills/design/glassmorphism-ui/references/motion.md +355 -0
package/template/.aioson/skills/design/glassmorphism-ui/references/patterns.md +198 -0
package/template/.aioson/skills/design/glassmorphism-ui/references/websites.md +307 -0
package/template/.aioson/skills/design/neo-brutalist-ui/SKILL.md +213 -0
package/template/.aioson/skills/design/neo-brutalist-ui/references/art-direction.md +228 -0
package/template/.aioson/skills/design/neo-brutalist-ui/references/components.md +855 -0
package/template/.aioson/skills/design/neo-brutalist-ui/references/dashboards.md +334 -0
package/template/.aioson/skills/design/neo-brutalist-ui/references/design-tokens.md +342 -0
package/template/.aioson/skills/design/neo-brutalist-ui/references/motion.md +286 -0
package/template/.aioson/skills/design/neo-brutalist-ui/references/patterns.md +458 -0
package/template/.aioson/skills/design/neo-brutalist-ui/references/websites.md +723 -0
package/template/.aioson/skills/process/aioson-spec-driven/SKILL.md +45 -0
package/template/.aioson/skills/process/aioson-spec-driven/references/approval-gates.md +109 -0
package/template/.aioson/skills/process/aioson-spec-driven/references/artifact-map.md +44 -0
package/template/.aioson/skills/process/aioson-spec-driven/references/classification-map.md +37 -0
package/template/.aioson/skills/process/aioson-spec-driven/references/hardening-lane.md +49 -0
package/template/.aioson/skills/process/aioson-spec-driven/references/maintenance-and-state.md +66 -0
package/template/.aioson/skills/process/aioson-spec-driven/references/ui-language.md +75 -0
package/template/.aioson/skills/process/design-hybrid-forge/SKILL.md +144 -0
package/template/.aioson/skills/process/design-hybrid-forge/references/crossover-protocol.md +221 -0
package/template/.aioson/skills/process/design-hybrid-forge/references/naming-registry.md +88 -0
package/template/.aioson/skills/process/design-hybrid-forge/references/output-contract.md +291 -0
package/template/.aioson/skills/process/design-hybrid-forge/references/pair-compatibility.md +117 -0
package/template/.aioson/skills/process/design-hybrid-forge/references/quality-gates.md +188 -0
package/template/.aioson/skills/process/design-hybrid-forge/references/variation-library.md +125 -0
package/template/AGENTS.md +23 -1
package/template/CLAUDE.md +1 -0

package/docs/design-previews/cognitive-core-ui.html ADDED Viewed

@@ -0,0 +1,463 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Cognitive Core UI — AIOSON Design Skill</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    :root {
+      --void: #0B0F15;
+      --surface: #111827;
+      --elevated: #1A2332;
+      --border: rgba(255,255,255,0.06);
+      --border-strong: rgba(255,255,255,0.12);
+      --accent: #22D3EE;
+      --accent-dim: rgba(34,211,238,0.15);
+      --accent-bg: rgba(34,211,238,0.08);
+      --text-heading: #F9FAFB;
+      --text-body: #E5E7EB;
+      --text-secondary: #9CA3AF;
+      --text-muted: #6B7280;
+      --green: #10B981;
+      --red: #F87171;
+      --amber: #FBBF24;
+      --purple: #A78BFA;
+      --sidebar-width: 200px;
+      --topbar-height: 52px;
+    }
+    html, body { height: 100%; font-family: 'Inter', system-ui, sans-serif; background: var(--void); color: var(--text-body); font-size: 14px; line-height: 1.5; }
+    /* AIOSON badge */
+    .aioson-badge {
+      position: fixed; top: 10px; right: 10px; z-index: 9999;
+      background: var(--accent); color: #0B0F15;
+      font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700;
+      letter-spacing: 0.06em; padding: 4px 10px; border-radius: 9999px;
+      box-shadow: 0 0 14px rgba(34,211,238,0.4);
+      pointer-events: none;
+    }
+    .mono { font-family: 'JetBrains Mono', monospace; }
+    .mono-label {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 0.675rem; font-weight: 500;
+      letter-spacing: 0.12em; text-transform: uppercase;
+    }
+    /* Layout */
+    .shell { display: flex; height: 100vh; overflow: hidden; flex-direction: column; }
+    /* Top bar */
+    .topbar {
+      height: var(--topbar-height); flex-shrink: 0;
+      background: var(--surface); border-bottom: 1px solid var(--border);
+      display: flex; align-items: center;
+      padding: 0 20px; gap: 0; position: relative; z-index: 10;
+    }
+    .topbar-logo {
+      width: var(--sidebar-width); flex-shrink: 0;
+      display: flex; align-items: center; gap: 10px;
+    }
+    .logo-mark {
+      width: 28px; height: 28px; border-radius: 6px;
+      background: var(--accent); display: flex; align-items: center; justify-content: center;
+      flex-shrink: 0;
+    }
+    .logo-mark svg { width: 14px; height: 14px; }
+    .logo-text { font-size: 14px; font-weight: 700; color: var(--text-heading); letter-spacing: -0.02em; }
+    .logo-sub { font-size: 9.5px; color: var(--accent); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.1em; }
+    /* Tab nav center */
+    .tab-nav { flex: 1; display: flex; align-items: stretch; justify-content: center; gap: 0; height: 100%; }
+    .tab {
+      display: flex; align-items: center; padding: 0 20px;
+      font-size: 12.5px; font-weight: 500; color: var(--text-secondary);
+      border-bottom: 3px solid transparent; cursor: pointer;
+      transition: color 0.15s; letter-spacing: 0.01em;
+      font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
+    }
+    .tab:hover { color: var(--text-body); }
+    .tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; }
+    /* Top bar actions */
+    .topbar-actions {
+      width: 200px; display: flex; align-items: center; justify-content: flex-end; gap: 10px;
+    }
+    .status-dot { width: 7px; height: 7px; border-radius: 9999px; background: var(--green); box-shadow: 0 0 6px var(--green); flex-shrink: 0; }
+    .status-text { font-size: 11.5px; color: var(--text-secondary); }
+    .btn-topbar {
+      height: 30px; padding: 0 12px; border-radius: 6px;
+      border: 1px solid var(--border-strong);
+      background: var(--elevated); color: var(--text-body);
+      font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500;
+      cursor: pointer; display: flex; align-items: center; gap: 6px;
+    }
+    /* Body row */
+    .body-row { flex: 1; display: flex; min-height: 0; }
+    /* Sidebar */
+    .sidebar {
+      width: var(--sidebar-width); flex-shrink: 0;
+      background: var(--surface); border-right: 1px solid var(--border);
+      display: flex; flex-direction: column; overflow-y: auto; padding: 16px 0;
+    }
+    .tree-section { margin-bottom: 20px; }
+    .tree-section-label {
+      font-family: 'JetBrains Mono', monospace; font-size: 0.65rem;
+      font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
+      color: var(--text-muted); padding: 0 16px; margin-bottom: 6px;
+    }
+    .tree-item {
+      display: flex; align-items: center; gap: 8px;
+      padding: 0 16px; height: 32px; cursor: pointer;
+      font-size: 12.5px; color: var(--text-secondary);
+      border-left: 3px solid transparent;
+      transition: background 0.1s, color 0.1s;
+    }
+    .tree-item:hover { background: var(--elevated); color: var(--text-body); }
+    .tree-item.active {
+      border-left-color: var(--accent);
+      background: var(--elevated); color: var(--accent); font-weight: 500;
+    }
+    .tree-icon { width: 14px; height: 14px; border-radius: 3px; background: currentColor; opacity: 0.4; flex-shrink: 0; }
+    .tree-item.active .tree-icon { opacity: 0.8; }
+    .tree-badge {
+      margin-left: auto; background: var(--accent-bg); border: 1px solid rgba(34,211,238,0.2);
+      color: var(--accent); border-radius: 9999px; height: 16px; padding: 0 6px;
+      font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 500;
+      display: flex; align-items: center;
+    }
+    .tree-item-child {
+      padding-left: 36px; height: 28px; font-size: 12px; color: var(--text-muted);
+    }
+    .tree-item-child:hover { background: rgba(255,255,255,0.02); color: var(--text-secondary); }
+    .tree-item-child.active { color: var(--accent); background: none; border-left: none; }
+    /* Main content */
+    .content { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
+    /* Section header */
+    .section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
+    .section-line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(34,211,238,0.3) 0%, rgba(34,211,238,0) 100%); }
+    .section-label-text { font-family: 'JetBrains Mono', monospace; font-size: 0.675rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
+    /* Stat cards */
+    .stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
+    .stat-card {
+      background: var(--surface); border: 1px solid var(--border);
+      border-radius: 8px; padding: 18px 20px;
+      transition: border-color 0.2s;
+    }
+    .stat-card:hover { border-color: var(--border-strong); }
+    .stat-card-label { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; }
+    .stat-card-value { font-size: 30px; font-weight: 800; color: var(--text-heading); letter-spacing: -0.03em; line-height: 1; }
+    .stat-card-value span { font-size: 16px; font-weight: 600; color: var(--text-secondary); }
+    .stat-card-sub { font-size: 11.5px; color: var(--text-secondary); margin-top: 8px; display: flex; align-items: center; gap: 5px; }
+    .dot-green { width: 6px; height: 6px; border-radius: 9999px; background: var(--green); box-shadow: 0 0 5px var(--green); flex-shrink: 0; }
+    .dot-amber { width: 6px; height: 6px; border-radius: 9999px; background: var(--amber); flex-shrink: 0; }
+    /* Table card */
+    .table-card {
+      background: var(--surface); border: 1px solid var(--border);
+      border-radius: 8px; overflow: hidden;
+    }
+    .table-card-header {
+      display: flex; align-items: center; justify-content: space-between;
+      padding: 14px 20px; border-bottom: 1px solid var(--border);
+    }
+    .table-card-title { font-size: 13.5px; font-weight: 600; color: var(--text-heading); letter-spacing: -0.01em; }
+    .btn-small {
+      height: 28px; padding: 0 12px; border-radius: 6px;
+      border: 1px solid rgba(34,211,238,0.25); background: var(--accent-bg);
+      color: var(--accent); font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 600;
+      cursor: pointer; display: flex; align-items: center; gap: 5px;
+    }
+    table { width: 100%; border-collapse: collapse; }
+    thead th {
+      padding: 9px 20px; text-align: left;
+      font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; font-weight: 500;
+      letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted);
+      background: rgba(255,255,255,0.02); border-bottom: 1px solid var(--border);
+    }
+    tbody tr { border-bottom: 1px solid var(--border); transition: background 0.1s; }
+    tbody tr:last-child { border-bottom: none; }
+    tbody tr:hover { background: var(--elevated); }
+    tbody td { padding: 12px 20px; vertical-align: middle; }
+    .agent-id { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--text-muted); }
+    .agent-name { font-size: 13px; font-weight: 600; color: var(--text-heading); }
+    .agent-type { font-size: 11.5px; color: var(--text-secondary); }
+    .badge-chip {
+      display: inline-flex; align-items: center; gap: 5px;
+      height: 22px; padding: 0 9px; border-radius: 9999px; font-size: 11px; font-weight: 600;
+    }
+    .badge-teal {
+      background: var(--accent-bg); border: 1px solid rgba(34,211,238,0.25);
+      color: var(--accent); box-shadow: 0 0 10px rgba(34,211,238,0.1);
+    }
+    .badge-green { background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.25); color: var(--green); }
+    .badge-amber { background: rgba(251,191,36,0.1); border: 1px solid rgba(251,191,36,0.25); color: var(--amber); }
+    .badge-red { background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.25); color: var(--red); }
+    .badge-purple { background: rgba(167,139,250,0.1); border: 1px solid rgba(167,139,250,0.25); color: var(--purple); }
+    .progress-wrap { display: flex; align-items: center; gap: 8px; }
+    .progress-bar { flex: 1; height: 4px; background: rgba(255,255,255,0.06); border-radius: 9999px; overflow: hidden; }
+    .progress-fill { height: 100%; border-radius: 9999px; }
+    .progress-pct { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-secondary); width: 32px; text-align: right; }
+    .latency-val { font-family: 'JetBrains Mono', monospace; font-size: 12px; }
+    .latency-good { color: var(--green); }
+    .latency-warn { color: var(--amber); }
+    .latency-bad { color: var(--red); }
+  </style>
+</head>
+<body>
+<div class="aioson-badge">AIOSON Design Skill</div>
+<div class="shell">
+  <!-- Top bar -->
+  <header class="topbar">
+    <div class="topbar-logo">
+      <div class="logo-mark">
+        <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <circle cx="7" cy="7" r="5.5" stroke="#0B0F15" stroke-width="1.5"/>
+          <circle cx="7" cy="7" r="2" fill="#0B0F15"/>
+        </svg>
+      </div>
+      <div>
+        <div class="logo-text">AIOSON</div>
+        <div class="logo-sub">OPS CORE</div>
+      </div>
+    </div>
+    <nav class="tab-nav">
+      <div class="tab active">Overview</div>
+      <div class="tab">Agents</div>
+      <div class="tab">Sessions</div>
+      <div class="tab">Analytics</div>
+    </nav>
+    <div class="topbar-actions">
+      <div class="status-dot"></div>
+      <span class="status-text">Live</span>
+      <button class="btn-topbar">
+        <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><circle cx="6" cy="6" r="5" stroke="currentColor" stroke-width="1.2"/><path d="M6 3.5v2.5l1.5 1.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
+        Alerts
+      </button>
+    </div>
+  </header>
+  <!-- Body row -->
+  <div class="body-row">
+    <!-- Sidebar tree -->
+    <aside class="sidebar">
+      <div class="tree-section">
+        <div class="tree-section-label">System</div>
+        <div class="tree-item active">
+          <div class="tree-icon"></div>
+          Overview
+          <div class="tree-badge">24</div>
+        </div>
+        <div class="tree-item">
+          <div class="tree-icon"></div>
+          Agents
+        </div>
+        <div class="tree-item-child active">↳ Production</div>
+        <div class="tree-item-child">↳ Staging</div>
+        <div class="tree-item-child">↳ Experimental</div>
+        <div class="tree-item">
+          <div class="tree-icon"></div>
+          Sessions
+        </div>
+        <div class="tree-item">
+          <div class="tree-icon"></div>
+          Pipelines
+        </div>
+      </div>
+      <div class="tree-section">
+        <div class="tree-section-label">Monitor</div>
+        <div class="tree-item">
+          <div class="tree-icon"></div>
+          Metrics
+        </div>
+        <div class="tree-item">
+          <div class="tree-icon"></div>
+          Logs
+        </div>
+        <div class="tree-item">
+          <div class="tree-icon"></div>
+          Alerts
+          <div class="tree-badge" style="background:rgba(248,113,113,0.12);border-color:rgba(248,113,113,0.25);color:#F87171;">3</div>
+        </div>
+      </div>
+      <div class="tree-section">
+        <div class="tree-section-label">Config</div>
+        <div class="tree-item">
+          <div class="tree-icon"></div>
+          Settings
+        </div>
+        <div class="tree-item">
+          <div class="tree-icon"></div>
+          Access
+        </div>
+      </div>
+    </aside>
+    <!-- Main content -->
+    <main class="content">
+      <!-- Stat cards section -->
+      <div>
+        <div class="section-header">
+          <span class="section-label-text">System Status</span>
+          <div class="section-line"></div>
+          <span style="font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text-muted);">UTC 14:32:07</span>
+        </div>
+        <div class="stat-grid">
+          <div class="stat-card">
+            <div class="stat-card-label">Active Agents</div>
+            <div class="stat-card-value">24</div>
+            <div class="stat-card-sub"><div class="dot-green"></div>All healthy</div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-card-label">Sessions Today</div>
+            <div class="stat-card-value">1,847</div>
+            <div class="stat-card-sub" style="color:var(--accent)">↑ 12% vs yesterday</div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-card-label">Avg Latency</div>
+            <div class="stat-card-value">142<span>ms</span></div>
+            <div class="stat-card-sub"><div class="dot-green"></div>Within SLA</div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-card-label">Success Rate</div>
+            <div class="stat-card-value">98.3<span>%</span></div>
+            <div class="stat-card-sub"><div class="dot-amber"></div>0.4% degraded</div>
+          </div>
+        </div>
+      </div>
+      <!-- Agent performance table -->
+      <div>
+        <div class="section-header">
+          <span class="section-label-text">Agent Performance</span>
+          <div class="section-line"></div>
+        </div>
+        <div class="table-card">
+          <div class="table-card-header">
+            <div class="table-card-title">Active Agents — Production</div>
+            <button class="btn-small">
+              <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M5 1v8M1 5h8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
+              Deploy
+            </button>
+          </div>
+          <table>
+            <thead>
+              <tr>
+                <th>Agent ID</th>
+                <th>Name / Role</th>
+                <th>Status</th>
+                <th>Latency</th>
+                <th style="width:200px">Load</th>
+                <th>Sessions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td><span class="agent-id">AGT-0041</span></td>
+                <td>
+                  <div class="agent-name">Orchestrator Prime</div>
+                  <div class="agent-type">Coordination Layer</div>
+                </td>
+                <td><span class="badge-chip badge-teal">Running</span></td>
+                <td><span class="latency-val latency-good">89ms</span></td>
+                <td>
+                  <div class="progress-wrap">
+                    <div class="progress-bar"><div class="progress-fill" style="width:76%;background:var(--accent)"></div></div>
+                    <span class="progress-pct">76%</span>
+                  </div>
+                </td>
+                <td><span class="agent-id">342</span></td>
+              </tr>
+              <tr>
+                <td><span class="agent-id">AGT-0039</span></td>
+                <td>
+                  <div class="agent-name">Analyst Core</div>
+                  <div class="agent-type">Data Processing</div>
+                </td>
+                <td><span class="badge-chip badge-green">Active</span></td>
+                <td><span class="latency-val latency-good">114ms</span></td>
+                <td>
+                  <div class="progress-wrap">
+                    <div class="progress-bar"><div class="progress-fill" style="width:53%;background:var(--green)"></div></div>
+                    <span class="progress-pct">53%</span>
+                  </div>
+                </td>
+                <td><span class="agent-id">218</span></td>
+              </tr>
+              <tr>
+                <td><span class="agent-id">AGT-0044</span></td>
+                <td>
+                  <div class="agent-name">Dev Squad Alpha</div>
+                  <div class="agent-type">Code Generation</div>
+                </td>
+                <td><span class="badge-chip badge-amber">Degraded</span></td>
+                <td><span class="latency-val latency-warn">287ms</span></td>
+                <td>
+                  <div class="progress-wrap">
+                    <div class="progress-bar"><div class="progress-fill" style="width:91%;background:var(--amber)"></div></div>
+                    <span class="progress-pct">91%</span>
+                  </div>
+                </td>
+                <td><span class="agent-id">504</span></td>
+              </tr>
+              <tr>
+                <td><span class="agent-id">AGT-0037</span></td>
+                <td>
+                  <div class="agent-name">QA Verifier</div>
+                  <div class="agent-type">Test Execution</div>
+                </td>
+                <td><span class="badge-chip badge-green">Active</span></td>
+                <td><span class="latency-val latency-good">73ms</span></td>
+                <td>
+                  <div class="progress-wrap">
+                    <div class="progress-bar"><div class="progress-fill" style="width:38%;background:var(--green)"></div></div>
+                    <span class="progress-pct">38%</span>
+                  </div>
+                </td>
+                <td><span class="agent-id">189</span></td>
+              </tr>
+              <tr>
+                <td><span class="agent-id">AGT-0051</span></td>
+                <td>
+                  <div class="agent-name">Genome Classifier</div>
+                  <div class="agent-type">Pattern Recognition</div>
+                </td>
+                <td><span class="badge-chip badge-purple">Standby</span></td>
+                <td><span class="latency-val" style="color:var(--text-muted)">—</span></td>
+                <td>
+                  <div class="progress-wrap">
+                    <div class="progress-bar"><div class="progress-fill" style="width:8%;background:var(--purple)"></div></div>
+                    <span class="progress-pct">8%</span>
+                  </div>
+                </td>
+                <td><span class="agent-id">12</span></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </main>
+  </div>
+</div>
+</body>
+</html>