npm - neural-loom - Versions diffs - 0.2.67 → 0.2.69 - Mend

neural-loom 0.2.67 → 0.2.69

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 (73) hide show

package/public/feature-guide.html ADDED Viewed

@@ -0,0 +1,1443 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>NeuralLoom - Feature Guide & Orchestrator Manual</title>
+  <!-- Modern Typography -->
+  <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=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Fira+Code:wght@400;500;600&display=swap" rel="stylesheet">
+  <style>
+    /* Premium Slate Dark Design Tokens */
+    :root {
+      --bg: #05070a;
+      --card-bg: rgba(13, 20, 35, 0.65);
+      --card-hover: rgba(23, 33, 56, 0.85);
+      --border: rgba(255, 255, 255, 0.08);
+      --border-focus: rgba(139, 92, 246, 0.4);
+      --text: #e2e8f0;
+      --text-muted: #94a3b8;
+      /* Vibrant Tailored Accents */
+      --primary: #8b5cf6;
+      --primary-glow: rgba(139, 92, 246, 0.2);
+      --secondary: #06b6d4;
+      --success: #10b981;
+      --warning: #f59e0b;
+      --danger: #ef4444;
+      --gradient-purple: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
+      --gradient-cyan: linear-gradient(135deg, #22d3ee 0%, #06b6d4 100%);
+      --gradient-emerald: linear-gradient(135deg, #34d399 0%, #10b981 100%);
+      --gradient-orange: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
+      --gradient-red: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
+      --gradient-hero: linear-gradient(185deg, #0f172a 0%, #05070a 100%);
+      --sidebar-width: 280px;
+    }
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+    html {
+      scroll-behavior: smooth;
+      font-family: 'Plus Jakarta Sans', sans-serif;
+      background-color: var(--bg);
+      color: var(--text);
+    }
+    body {
+      display: flex;
+      min-height: 100vh;
+      overflow-x: hidden;
+    }
+    /* Scrollbar Styling */
+    ::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
+    ::-webkit-scrollbar-track {
+      background: var(--bg);
+    }
+    ::-webkit-scrollbar-thumb {
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 4px;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+      background: var(--primary);
+    }
+    /* Sidebar Navigation */
+    .sidebar {
+      width: var(--sidebar-width);
+      background-color: #080c14;
+      border-right: 1px solid var(--border);
+      position: fixed;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      z-index: 100;
+      padding: 1.75rem;
+      display: flex;
+      flex-direction: column;
+      gap: 1.5rem;
+    }
+    .sidebar-header {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      padding-bottom: 1.25rem;
+      border-bottom: 1px solid var(--border);
+    }
+    .logo-img {
+      width: 32px;
+      height: 32px;
+      background: var(--gradient-purple);
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 800;
+      color: #fff;
+      font-family: 'Outfit', sans-serif;
+    }
+    .logo-text {
+      font-family: 'Outfit', sans-serif;
+      font-size: 1.25rem;
+      font-weight: 700;
+      background: linear-gradient(to right, #fff, #a78bfa);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    .search-box {
+      position: relative;
+    }
+    .search-input {
+      width: 100%;
+      background-color: rgba(255, 255, 255, 0.03);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 0.6rem 0.75rem 0.6rem 2rem;
+      color: var(--text);
+      font-family: inherit;
+      font-size: 0.85rem;
+      transition: all 0.2s ease;
+    }
+    .search-input:focus {
+      outline: none;
+      border-color: var(--primary);
+      background-color: rgba(255, 255, 255, 0.05);
+      box-shadow: 0 0 12px var(--primary-glow);
+    }
+    .search-icon {
+      position: absolute;
+      left: 0.75rem;
+      top: 50%;
+      transform: translateY(-50%);
+      color: var(--text-muted);
+      font-size: 0.85rem;
+      pointer-events: none;
+    }
+    .nav-list {
+      list-style: none;
+      display: flex;
+      flex-direction: column;
+      gap: 0.35rem;
+      overflow-y: auto;
+      flex: 1;
+    }
+    .nav-item a {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      padding: 0.6rem 0.75rem;
+      color: var(--text-muted);
+      text-decoration: none;
+      font-size: 0.9rem;
+      font-weight: 500;
+      border-radius: 6px;
+      transition: all 0.25s ease;
+    }
+    .nav-item a:hover {
+      color: #fff;
+      background-color: rgba(255, 255, 255, 0.03);
+      transform: translateX(3px);
+    }
+    .nav-item.active a {
+      color: #fff;
+      background-color: var(--primary-glow);
+      border-left: 3px solid var(--primary);
+      padding-left: 0.65rem;
+    }
+    .sidebar-footer {
+      font-size: 0.72rem;
+      color: var(--text-muted);
+      text-align: center;
+      padding-top: 1rem;
+      border-top: 1px solid var(--border);
+    }
+    /* Main Content Area */
+    .main-content {
+      margin-left: var(--sidebar-width);
+      flex: 1;
+      padding: 3rem 4rem;
+      max-width: 1200px;
+    }
+    /* Hero Section */
+    .hero {
+      position: relative;
+      background: var(--gradient-hero);
+      border: 1px solid var(--border);
+      border-radius: 16px;
+      padding: 3rem;
+      margin-bottom: 3rem;
+      overflow: hidden;
+      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    }
+    .hero-glow {
+      position: absolute;
+      top: -50%;
+      right: -20%;
+      width: 450px;
+      height: 450px;
+      background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0) 70%);
+      pointer-events: none;
+      z-index: 1;
+    }
+    .hero-content {
+      position: relative;
+      z-index: 2;
+    }
+    .badge-wrapper {
+      display: inline-flex;
+      gap: 0.5rem;
+      margin-bottom: 1rem;
+    }
+    .badge {
+      font-size: 0.75rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      padding: 0.25rem 0.6rem;
+      border-radius: 9999px;
+      letter-spacing: 0.05em;
+    }
+    .badge-primary {
+      background-color: var(--primary-glow);
+      color: #a78bfa;
+      border: 1px solid rgba(139, 92, 246, 0.3);
+    }
+    .badge-status {
+      background-color: rgba(16, 185, 129, 0.1);
+      color: #34d399;
+      border: 1px solid rgba(16, 185, 129, 0.2);
+      display: flex;
+      align-items: center;
+      gap: 0.35rem;
+    }
+    .pulse-dot {
+      width: 6px;
+      height: 6px;
+      background-color: var(--success);
+      border-radius: 50%;
+      box-shadow: 0 0 8px var(--success);
+      animation: pulse 1.8s infinite;
+    }
+    @keyframes pulse {
+      0% { transform: scale(0.9); opacity: 0.6; }
+      50% { transform: scale(1.15); opacity: 1; box-shadow: 0 0 12px var(--success); }
+      100% { transform: scale(0.9); opacity: 0.6; }
+    }
+    .hero-title {
+      font-family: 'Outfit', sans-serif;
+      font-size: 2.75rem;
+      font-weight: 800;
+      letter-spacing: -0.02em;
+      margin-bottom: 0.75rem;
+      line-height: 1.15;
+    }
+    .hero-title span {
+      background: linear-gradient(to right, #c084fc, #6366f1, #38bdf8);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    .hero-desc {
+      color: var(--text-muted);
+      font-size: 1.1rem;
+      line-height: 1.6;
+      max-width: 720px;
+    }
+    /* Section Cards */
+    section {
+      margin-bottom: 3.5rem;
+      scroll-margin-top: 2rem;
+    }
+    .section-header {
+      margin-bottom: 1.5rem;
+      border-bottom: 1px solid var(--border);
+      padding-bottom: 0.75rem;
+    }
+    .section-title {
+      font-family: 'Outfit', sans-serif;
+      font-size: 1.75rem;
+      font-weight: 700;
+      color: #fff;
+    }
+    .section-subtitle {
+      font-size: 0.95rem;
+      color: var(--text-muted);
+      margin-top: 0.25rem;
+    }
+    .grid-2 {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+      gap: 1.5rem;
+      margin-bottom: 2rem;
+    }
+    .card {
+      background-color: var(--card-bg);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: 1.5rem;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      position: relative;
+      overflow: hidden;
+    }
+    .card:hover {
+      background-color: var(--card-hover);
+      border-color: var(--border-focus);
+      transform: translateY(-4px);
+      box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.4);
+    }
+    .card-icon {
+      font-size: 1.75rem;
+      margin-bottom: 1rem;
+      width: 44px;
+      height: 44px;
+      background: rgba(255, 255, 255, 0.03);
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: 1px solid var(--border);
+      color: var(--primary);
+    }
+    .card-title {
+      font-family: 'Outfit', sans-serif;
+      font-size: 1.15rem;
+      font-weight: 600;
+      color: #fff;
+      margin-bottom: 0.5rem;
+    }
+    .card-desc {
+      color: var(--text-muted);
+      font-size: 0.88rem;
+      line-height: 1.55;
+    }
+    /* IDE Layout UI Preview */
+    .ide-mockup {
+      background-color: #06090e;
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      overflow: hidden;
+      margin: 1.5rem 0;
+      box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+    }
+    .ide-header {
+      background-color: #0d1117;
+      border-bottom: 1px solid var(--border);
+      padding: 0.5rem 1rem;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .ide-dots {
+      display: flex;
+      gap: 0.35rem;
+    }
+    .ide-dot {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+    }
+    .ide-dot-red { background-color: #ff5f56; }
+    .ide-dot-yellow { background-color: #ffbd2e; }
+    .ide-dot-green { background-color: #27c93f; }
+    .ide-tabs {
+      display: flex;
+      gap: 0.25rem;
+      margin-left: 2rem;
+      flex: 1;
+    }
+    .ide-tab {
+      background-color: #161b22;
+      border: 1px solid var(--border);
+      border-bottom: none;
+      padding: 0.3rem 0.75rem;
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+      font-size: 0.75rem;
+      font-family: 'Fira Code', monospace;
+      color: var(--text-muted);
+      cursor: pointer;
+    }
+    .ide-tab.active {
+      background-color: #06090e;
+      color: #fff;
+      border-top: 2px solid var(--primary);
+    }
+    .ide-body {
+      display: flex;
+      height: 250px;
+    }
+    .ide-sidebar-mock {
+      width: 50px;
+      background-color: #0c1015;
+      border-right: 1px solid var(--border);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding-top: 0.75rem;
+      gap: 1rem;
+      font-size: 1.1rem;
+    }
+    .ide-editor-mock {
+      flex: 1;
+      padding: 1rem;
+      font-family: 'Fira Code', monospace;
+      font-size: 0.75rem;
+      color: #7ee787;
+      overflow-y: auto;
+    }
+    .ide-terminal-mock {
+      width: 40%;
+      background-color: #010409;
+      border-left: 1px solid var(--border);
+      padding: 1rem;
+      font-family: 'Fira Code', monospace;
+      font-size: 0.75rem;
+      color: #58a6ff;
+    }
+    /* Comparison Table / Matrix */
+    .table-container {
+      overflow-x: auto;
+      margin: 1.5rem 0;
+      border-radius: 12px;
+      border: 1px solid var(--border);
+      box-shadow: 0 4px 20px rgba(0,0,0,0.25);
+    }
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      background-color: var(--card-bg);
+      text-align: left;
+      font-size: 0.88rem;
+    }
+    th {
+      background-color: #0c1017;
+      color: #fff;
+      font-weight: 600;
+      padding: 1rem;
+      border-bottom: 2px solid var(--border);
+    }
+    td {
+      padding: 1rem;
+      border-bottom: 1px solid var(--border);
+      color: var(--text-muted);
+    }
+    tr:last-child td {
+      border-bottom: none;
+    }
+    tr:hover td {
+      color: #fff;
+      background-color: rgba(255, 255, 255, 0.015);
+    }
+    .feature-supported {
+      color: var(--success);
+      font-weight: 600;
+    }
+    .feature-partial {
+      color: var(--warning);
+      font-weight: 600;
+    }
+    .feature-unsupported {
+      color: var(--danger);
+      font-weight: 500;
+    }
+    /* Interactive Filterable Section */
+    .filter-bar {
+      display: flex;
+      gap: 0.5rem;
+      margin-bottom: 1.5rem;
+      flex-wrap: wrap;
+    }
+    .filter-btn {
+      background-color: rgba(255, 255, 255, 0.03);
+      border: 1px solid var(--border);
+      color: var(--text-muted);
+      padding: 0.45rem 1rem;
+      border-radius: 6px;
+      font-size: 0.8rem;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.2s ease;
+    }
+    .filter-btn:hover {
+      background-color: rgba(255, 255, 255, 0.08);
+      color: #fff;
+    }
+    .filter-btn.active {
+      background-color: var(--primary);
+      border-color: var(--primary);
+      color: #fff;
+      box-shadow: 0 0 10px rgba(139, 92, 246, 0.3);
+    }
+    .feature-matrix-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+      gap: 1rem;
+    }
+    .matrix-item {
+      background-color: var(--card-bg);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 1.25rem;
+      transition: all 0.25s ease;
+    }
+    .matrix-item:hover {
+      border-color: var(--border-focus);
+      background-color: var(--card-hover);
+    }
+    .matrix-item-tags {
+      display: flex;
+      gap: 0.35rem;
+      margin-bottom: 0.6rem;
+    }
+    .matrix-tag {
+      font-size: 0.68rem;
+      padding: 0.15rem 0.4rem;
+      border-radius: 4px;
+      font-weight: 600;
+      text-transform: uppercase;
+    }
+    .tag-local { background-color: rgba(6, 182, 212, 0.1); color: #22d3ee; }
+    .tag-docker { background-color: rgba(59, 130, 246, 0.1); color: #60a5fa; }
+    .tag-ssh { background-color: rgba(139, 92, 246, 0.1); color: #c084fc; }
+    .tag-db { background-color: rgba(16, 185, 129, 0.1); color: #34d399; }
+    .matrix-item-title {
+      font-size: 0.95rem;
+      font-weight: 600;
+      color: #fff;
+      margin-bottom: 0.35rem;
+    }
+    .matrix-item-desc {
+      font-size: 0.8rem;
+      color: var(--text-muted);
+      line-height: 1.45;
+    }
+    /* Token Cost Calculator Widget */
+    .calculator-card {
+      background: linear-gradient(145deg, #0e1525 0%, #06090f 100%);
+      border: 1px solid var(--border-focus);
+      border-radius: 16px;
+      padding: 2rem;
+      box-shadow: 0 10px 40px rgba(0,0,0,0.5);
+    }
+    .calc-row {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 1.5rem;
+      margin-bottom: 1.5rem;
+    }
+    @media (max-width: 768px) {
+      .calc-row {
+        grid-template-columns: 1fr;
+      }
+    }
+    .input-group {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+    .input-label {
+      font-size: 0.85rem;
+      font-weight: 600;
+      color: #fff;
+    }
+    .input-field {
+      background-color: rgba(255, 255, 255, 0.03);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 0.65rem 0.85rem;
+      color: var(--text);
+      font-family: inherit;
+      font-size: 0.9rem;
+      transition: all 0.2s ease;
+    }
+    .input-field:focus {
+      outline: none;
+      border-color: var(--primary);
+      background-color: rgba(255, 255, 255, 0.05);
+    }
+    .select-field {
+      background-color: #0b0f19;
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 0.65rem 0.85rem;
+      color: var(--text);
+      font-family: inherit;
+      font-size: 0.9rem;
+      cursor: pointer;
+    }
+    .calc-results {
+      background-color: rgba(139, 92, 246, 0.03);
+      border: 1px dashed var(--border-focus);
+      border-radius: 12px;
+      padding: 1.5rem;
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+    }
+    .results-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 1rem;
+      text-align: center;
+    }
+    .result-box {
+      background-color: rgba(0, 0, 0, 0.2);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 0.75rem;
+    }
+    .result-val {
+      font-family: 'Outfit', sans-serif;
+      font-size: 1.35rem;
+      font-weight: 700;
+      color: #fff;
+      margin-top: 0.25rem;
+    }
+    .val-highlight {
+      color: var(--secondary);
+    }
+    .val-emerald {
+      color: var(--success);
+    }
+    .comparison-bar-container {
+      width: 100%;
+      height: 8px;
+      background-color: rgba(255, 255, 255, 0.05);
+      border-radius: 4px;
+      overflow: hidden;
+      margin-top: 0.5rem;
+    }
+    .comparison-bar {
+      height: 100%;
+      background: var(--gradient-emerald);
+      width: 0%;
+      transition: width 0.4s ease;
+    }
+    /* FAQ Collapsible */
+    .faq-list {
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+    }
+    .faq-item {
+      background-color: var(--card-bg);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      overflow: hidden;
+      transition: all 0.2s ease;
+    }
+    .faq-question {
+      padding: 1rem 1.25rem;
+      font-weight: 600;
+      color: #fff;
+      cursor: pointer;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      user-select: none;
+    }
+    .faq-question:hover {
+      background-color: rgba(255, 255, 255, 0.02);
+    }
+    .faq-icon {
+      font-size: 0.8rem;
+      transition: transform 0.2s ease;
+      color: var(--primary);
+    }
+    .faq-answer {
+      max-height: 0;
+      overflow: hidden;
+      padding: 0 1.25rem;
+      color: var(--text-muted);
+      font-size: 0.88rem;
+      line-height: 1.5;
+      transition: all 0.25s ease-out;
+    }
+    .faq-item.open .faq-answer {
+      padding: 0 1.25rem 1.25rem 1.25rem;
+      max-height: 200px;
+    }
+    .faq-item.open .faq-icon {
+      transform: rotate(90deg);
+    }
+    /* Code Block Styling */
+    pre {
+      background-color: #06090e;
+      border: 1px solid var(--border);
+      padding: 1rem;
+      border-radius: 8px;
+      font-family: 'Fira Code', monospace;
+      font-size: 0.8rem;
+      overflow-x: auto;
+      color: #e6edf3;
+      margin: 1rem 0;
+    }
+    code {
+      font-family: 'Fira Code', monospace;
+      background-color: rgba(255,255,255,0.06);
+      padding: 0.15rem 0.35rem;
+      border-radius: 4px;
+      font-size: 0.85em;
+      color: #ff7b72;
+    }
+    pre code {
+      background-color: transparent;
+      padding: 0;
+      font-size: inherit;
+      color: inherit;
+    }
+    .info-alert {
+      background-color: rgba(56, 189, 248, 0.05);
+      border-left: 4px solid var(--secondary);
+      padding: 1rem;
+      border-radius: 6px;
+      margin: 1.25rem 0;
+      font-size: 0.88rem;
+      line-height: 1.5;
+    }
+    .info-alert-title {
+      font-weight: 700;
+      color: #fff;
+      margin-bottom: 0.25rem;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+    /* Floating CTA */
+    .cta-container {
+      margin-top: 4rem;
+      text-align: center;
+      padding: 2.5rem;
+      background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(6, 182, 212, 0.05) 100%);
+      border: 1px solid var(--border-focus);
+      border-radius: 16px;
+    }
+    .cta-title {
+      font-family: 'Outfit', sans-serif;
+      font-size: 1.5rem;
+      font-weight: 700;
+      margin-bottom: 0.5rem;
+    }
+    .cta-desc {
+      color: var(--text-muted);
+      font-size: 0.9rem;
+      margin-bottom: 1.25rem;
+    }
+    .cta-btn {
+      background: var(--gradient-purple);
+      border: none;
+      color: #fff;
+      padding: 0.65rem 1.5rem;
+      border-radius: 8px;
+      font-size: 0.9rem;
+      font-weight: 600;
+      cursor: pointer;
+      box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
+      transition: all 0.2s ease;
+    }
+    .cta-btn:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 6px 20px rgba(139, 92, 246, 0.5);
+    }
+  </style>
+</head>
+<body>
+  <!-- Sidebar Navigation -->
+  <aside class="sidebar">
+    <div class="sidebar-header">
+      <div class="logo-img">NL</div>
+      <div class="logo-text">NeuralLoom</div>
+    </div>
+    <div class="search-box">
+      <span class="search-icon">🔍</span>
+      <input type="text" class="search-input" id="sidebarSearch" placeholder="Search features...">
+    </div>
+    <nav class="nav-list" id="navLinks">
+      <li class="nav-item active"><a href="#overview">🔍 Overview</a></li>
+      <li class="nav-item"><a href="#workspaces">🗂️ Multi-Workspaces</a></li>
+      <li class="nav-item"><a href="#runtimes">🐳 Environments & Runtimes</a></li>
+      <li class="nav-item"><a href="#agents">🤖 Claude & Aider Wizards</a></li>
+      <li class="nav-item"><a href="#telemetry">📊 Telemetry & Cost</a></li>
+      <li class="nav-item"><a href="#database">🗄️ SQL & DB Explorer</a></li>
+      <li class="nav-item"><a href="#git">🌿 Source Control</a></li>
+      <li class="nav-item"><a href="#toolbar">⚡ Command Toolbar</a></li>
+      <li class="nav-item"><a href="#calculator">🧮 Interactive Calculator</a></li>
+      <li class="nav-item"><a href="#faq">❓ Frequently Asked Questions</a></li>
+    </nav>
+    <div class="sidebar-footer">
+      <div>NeuralLoom Cockpit v0.2.19</div>
+      <div style="margin-top: 0.25rem;">Orchestration Interface</div>
+    </div>
+  </aside>
+  <!-- Main Content Body -->
+  <main class="main-content">
+    <!-- Hero Banner -->
+    <header class="hero">
+      <div class="hero-glow"></div>
+      <div class="hero-content">
+        <div class="badge-wrapper">
+          <span class="badge badge-primary">v0.2.19 Release</span>
+          <span class="badge badge-status">
+            <span class="pulse-dot"></span>
+            Orchestrator System Online
+          </span>
+        </div>
+        <h1 class="hero-title">Unified AI Orchestration <span>Feature Guide</span></h1>
+        <p class="hero-desc">
+          NeuralLoom is a local, persistent Next.js cockpit and WS WebSocket terminal bridge designed to spawn, control, and audit concurrent AI agent sessions (Claude Code, Aider) across host environments, Docker sandboxes, and remote VMs.
+        </p>
+      </div>
+    </header>
+    <!-- Overview Section -->
+    <section id="overview">
+      <div class="section-header">
+        <h2 class="section-title">Overview & Architecture</h2>
+        <p class="section-subtitle">How NeuralLoom manages processes and sockets</p>
+      </div>
+      <p style="line-height: 1.6; color: var(--text-muted); margin-bottom: 1.5rem;">
+        Unlike serverless applications, NeuralLoom relies on a local Node.js backend. It leverages the raw capabilities of <code>node-pty</code> to spawn full interactive shells on the server host machine. Keystrokes are intercepted in the web client, wrapped, and forwarded over WebSocket channels (port 3001) in real-time. System output streams back to client terminal buffers instantly.
+      </p>
+      <div class="grid-2">
+        <div class="card">
+          <div class="card-icon">⚡</div>
+          <h3 class="card-title">WebSocket Gateway (Port 3001)</h3>
+          <p class="card-desc">Bridges terminal interactive input (keystrokes) and stdout buffer lines using a customized protocol. Minimizes keystroke latency down to sub-5ms.</p>
+        </div>
+        <div class="card">
+          <div class="card-icon">📁</div>
+          <h3 class="card-title">Staged Context Bridge</h3>
+          <p class="card-desc">Automatically compiles global system rules (<code>AGENTS.md</code>) and directories mappings to stage commands for immediate injection into agent consoles.</p>
+        </div>
+      </div>
+    </section>
+    <!-- Multi-Workspaces -->
+    <section id="workspaces">
+      <div class="section-header">
+        <h2 class="section-title">Multi-Session Workspace Switcher</h2>
+        <p class="section-subtitle">Manage concurrent agent sessions within a single cockpit</p>
+      </div>
+      <p style="line-height: 1.6; color: var(--text-muted); margin-bottom: 1.5rem;">
+        NeuralLoom caches the active editor tabs, open folder file trees, unstaged git diff lines, and standard PTY command states independently per session. Switching between workspaces takes less than a fraction of a second, without interrupting background agent operations.
+      </p>
+      <div class="ide-mockup">
+        <div class="ide-header">
+          <div class="ide-dots">
+            <span class="ide-dot ide-dot-red"></span>
+            <span class="ide-dot ide-dot-yellow"></span>
+            <span class="ide-dot ide-dot-green"></span>
+          </div>
+          <div class="ide-tabs">
+            <span class="ide-tab active">💻 Project Alpha (Claude)</span>
+            <span class="ide-tab">🐳 Docker Sandbox (Aider)</span>
+            <span class="ide-tab">🌐 Remote VM (SSH)</span>
+          </div>
+          <span style="font-size: 0.7rem; color: var(--text-muted);">Split screen mode [On]</span>
+        </div>
+        <div class="ide-body">
+          <div class="ide-sidebar-mock">
+            <span>📁</span>
+            <span>🌿</span>
+            <span>🗄️</span>
+            <span>📊</span>
+          </div>
+          <div class="ide-editor-mock">
+            <span style="color: #6a737d;">// Active workspace editor for Project Alpha</span><br>
+            <span style="color: #f97583;">const</span> runner = <span style="color: #f97583;">new</span> ClaudeRunner();<br>
+            runner.initializeWorkspace(CWD);<br>
+            console.log(<span style="color: #9ecbff;">"Orchestrator session booted"</span>);
+          </div>
+          <div class="ide-terminal-mock">
+            <span style="color: #85e89d;">[Claude Local]</span> Spawning node-pty...<br>
+            <span style="color: #ffab70;">$ claude</span><br>
+            <span style="color: #e1e4e8;">How can I help you build today?</span><br>
+            <span style="color: #c8e1ff;">█</span>
+          </div>
+        </div>
+      </div>
+      <div class="info-alert">
+        <div class="info-alert-title">💡 Horizontal Split Consoles</div>
+        Select a second active session from the terminal console header dropdown. The terminal view instantly divides into a 50/50 split console, enabling side-by-side commands monitoring.
+      </div>
+    </section>
+    <!-- Environments & Runtimes -->
+    <section id="runtimes">
+      <div class="section-header">
+        <h2 class="section-title">Execution Environments & Runtimes</h2>
+        <p class="section-subtitle">Sandboxing, isolation, and remote virtual machines</p>
+      </div>
+      <p style="line-height: 1.6; color: var(--text-muted); margin-bottom: 1rem;">
+        NeuralLoom supports running interactive terminal agents in three isolated sandbox environments:
+      </p>
+      <div class="table-container">
+        <table>
+          <thead>
+            <tr>
+              <th>Runtime Type</th>
+              <th>Isolation Level</th>
+              <th>Prerequisites</th>
+              <th>Telemetry Source</th>
+              <th>Workspace Mapping</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><strong>💻 Local Host OS</strong></td>
+              <td class="feature-unsupported">Process Isolation Only</td>
+              <td>Git Bash (Windows), node-pty</td>
+              <td>Process RSS / OS Memory</td>
+              <td>Direct local directories access</td>
+            </tr>
+            <tr>
+              <td><strong>🐳 Docker Sandbox</strong></td>
+              <td class="feature-supported">Container Sandbox</td>
+              <td>Docker Desktop running locally</td>
+              <td><code>docker stats --no-stream</code></td>
+              <td>Mounts workspace volume folder</td>
+            </tr>
+            <tr>
+              <td><strong>🌐 Remote VM (SSH)</strong></td>
+              <td class="feature-supported">Full Virtual Machine</td>
+              <td>SSH Keys / VM Credentials</td>
+              <td>Native OS commands over SSH</td>
+              <td>SSH mounting or workspace clone</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+    <!-- Claude & Aider Wizards -->
+    <section id="agents">
+      <div class="section-header">
+        <h2 class="section-title">Claude Code & Aider Launch Wizards</h2>
+        <p class="section-subtitle">Tailored setup wizards and templates saving</p>
+      </div>
+      <div class="grid-2">
+        <div class="card">
+          <div class="card-icon">🤖</div>
+          <h3 class="card-title">Claude Wizard Configuration</h3>
+          <p class="card-desc">
+            Define custom display names, project root targets, and supplementary scoped directory paths. Integrates local PTY instances or maps folders directly to container images.
+          </p>
+        </div>
+        <div class="card">
+          <div class="card-icon">🐍</div>
+          <h3 class="card-title">Aider Settings Wizard</h3>
+          <p class="card-desc">
+            Securely configure OpenAI or Anthropic API keys (keys are stored locally in masked configuration structures), choose models (e.g. <code>gpt-4o</code>, <code>claude-3-5-sonnet</code>), and append custom CLI argument strings.
+          </p>
+        </div>
+      </div>
+      <div class="info-alert">
+        <div class="info-alert-title">💾 Saved Configurations</div>
+        You can save any wizard layout configuration as a template. Templates appear on the dashboard side panel for instant quick-launching with a single click.
+      </div>
+    </section>
+    <!-- Telemetry & Cost -->
+    <section id="telemetry">
+      <div class="section-header">
+        <h2 class="section-title">Telemetry & Token Cost Analytics</h2>
+        <p class="section-subtitle">Real-time resource tracking and cost auditing</p>
+      </div>
+      <p style="line-height: 1.6; color: var(--text-muted); margin-bottom: 1.5rem;">
+        As the stdout streams from agent subprocesses, NeuralLoom executes regex parser rules on each line buffer. This reads out input tokens, output tokens, and estimated dollar costs, compiling them live into tracking widgets.
+      </p>
+      <div class="grid-2">
+        <div class="card">
+          <div class="card-icon">📈</div>
+          <h3 class="card-title">Resource Telemetry</h3>
+          <p class="card-desc">
+            Tracks CPU utilization and memory consumption. Docker sandboxes are audited via container statistics, whereas local processes fall back to resident set size (RSS) scanning.
+          </p>
+        </div>
+        <div class="card">
+          <div class="card-icon">💸</div>
+          <h3 class="card-title">Cost Calculations</h3>
+          <p class="card-desc">
+            Parses Claude and Aider token diagnostics outputs. Translates token consumption into actual dollar costs based on active LLM API rates.
+          </p>
+        </div>
+      </div>
+    </section>
+    <!-- SQL & DB Explorer -->
+    <section id="database">
+      <div class="section-header">
+        <h2 class="section-title">Built-in Database Explorer & SQL Client</h2>
+        <p class="section-subtitle">Expose SQL engines to agent tools and developers</p>
+      </div>
+      <p style="line-height: 1.6; color: var(--text-muted); margin-bottom: 1.5rem;">
+        NeuralLoom features an integrated SQL client supporting SQLite, PostgreSQL, MySQL, and MSSQL. It acts as both a developer playground and a Model Context Protocol (MCP) server stdio bridge.
+      </p>
+      <div class="grid-2">
+        <div class="card">
+          <div class="card-icon">🗄️</div>
+          <h3 class="card-title">Interactive UI Explorer</h3>
+          <p class="card-desc">
+            Inspect table definitions, browse columns structure, edit queries in a dedicated query runner, and view results in structured data tables.
+          </p>
+        </div>
+        <div class="card">
+          <div class="card-icon">🔒</div>
+          <h3 class="card-title">Read-Only Safety Guard</h3>
+          <p class="card-desc">
+            Verifies query parameters to reject mutations (like <code>INSERT</code>, <code>DROP</code>, or <code>ALTER</code>) automatically when read-only mode is active, preventing accidental agent destruction.
+          </p>
+        </div>
+      </div>
+      <pre><code>// Example of connecting agents via MCP Server stdio
+$ neural-loom mcp [workspace]
+Exposing database tools to stdio...
+[MCP-RPC] Method call received: sql_list_tables
+[MCP-RPC] Resolved connection "Database A" -> Returning schema summary</code></pre>
+    </section>
+    <!-- Source Control -->
+    <section id="git">
+      <div class="section-header">
+        <h2 class="section-title">Source Control & Git Diff Viewer</h2>
+        <p class="section-subtitle">Real-time status lists and colored code diff highlighting</p>
+      </div>
+      <p style="line-height: 1.6; color: var(--text-muted); margin-bottom: 1.5rem;">
+        No need to jump back to terminal commands for git. NeuralLoom lists file changes by executing <code>git status --porcelain</code>. Select any file inside the source control side pane to open a virtual editor view displaying a complete line-by-line diff.
+      </p>
+      <div class="grid-2">
+        <div class="card">
+          <div class="card-icon">🌿</div>
+          <h3 class="card-title">Branch Switching</h3>
+          <p class="card-desc">Switch branches, view history commits, and run stash/pop scripts in the current directory.</p>
+        </div>
+        <div class="card">
+          <div class="card-icon">🟢</div>
+          <h3 class="card-title">Read-Only Diff Highlight</h3>
+          <p class="card-desc">
+            Insertions (<code>+</code>) are highlighted in translucent green, deletions (<code>-</code>) in red, and diff block locations in blue.
+          </p>
+        </div>
+      </div>
+    </section>
+    <!-- Command Toolbar -->
+    <section id="toolbar">
+      <div class="section-header">
+        <h2 class="section-title">Command Toolbar & Custom Triggers</h2>
+        <p class="section-subtitle">Direct CLI shortcuts injection at one click</p>
+      </div>
+      <p style="line-height: 1.6; color: var(--text-muted); margin-bottom: 1.5rem;">
+        NeuralLoom inserts an inject-toolbar directly under the active editor window. It offers context-specific shortcuts that execute immediately inside the current PTY shell stream:
+      </p>
+      <div class="grid-2">
+        <div class="card">
+          <div class="card-icon">💡</div>
+          <h3 class="card-title">Predefined Shortcuts</h3>
+          <p class="card-desc">
+            Injects <code>/undo</code>, <code>/diff</code>, or <code>/commit</code> for active Aider runners; and <code>/compact</code>, <code>/history</code>, or <code>/reset</code> for Claude Code sessions.
+          </p>
+        </div>
+        <div class="card">
+          <div class="card-icon">💜</div>
+          <h3 class="card-title">Custom Action Buttons</h3>
+          <p class="card-desc">
+            Define custom commands inside the system dashboard (saved in browser's local storage) and trigger them as styled purple injection shortcuts dynamically.
+          </p>
+        </div>
+      </div>
+    </section>
+    <!-- Interactive Calculator -->
+    <section id="calculator">
+      <div class="section-header">
+        <h2 class="section-title">Interactive Token Cost Estimator</h2>
+        <p class="section-subtitle">Calculate and compare estimated agent session costs</p>
+      </div>
+      <div class="calculator-card">
+        <div class="calc-row">
+          <div class="input-group">
+            <label class="input-label" for="calcModel">Select AI Model Pricing Profile</label>
+            <select class="select-field" id="calcModel">
+              <option value="claude-3-5-sonnet">Claude 3.5 Sonnet (In: $3.00/M, Out: $15.00/M)</option>
+              <option value="claude-3-opus">Claude 3 Opus (In: $15.00/M, Out: $75.00/M)</option>
+              <option value="gpt-4o">GPT-4o (In: $5.00/M, Out: $15.00/M)</option>
+              <option value="gpt-4-turbo">GPT-4 Turbo (In: $10.00/M, Out: $30.00/M)</option>
+            </select>
+          </div>
+          <div class="input-group">
+            <label class="input-label" for="calcInteractions">Estimated Agent Iterations (Turns)</label>
+            <input type="number" class="input-field" id="calcInteractions" value="10" min="1">
+          </div>
+        </div>
+        <div class="calc-row">
+          <div class="input-group">
+            <label class="input-label" for="calcInputTokens">Input Tokens (Per Turn average)</label>
+            <input type="number" class="input-field" id="calcInputTokens" value="12000" min="0">
+          </div>
+          <div class="input-group">
+            <label class="input-label" for="calcOutputTokens">Output Tokens (Per Turn average)</label>
+            <input type="number" class="input-field" id="calcOutputTokens" value="1500" min="0">
+          </div>
+        </div>
+        <div class="calc-results">
+          <div class="results-grid">
+            <div class="result-box">
+              <div class="input-label">Total Input Tokens</div>
+              <div class="result-val" id="totalInputVal">120,000</div>
+            </div>
+            <div class="result-box">
+              <div class="input-label">Total Output Tokens</div>
+              <div class="result-val" id="totalOutputVal">15,000</div>
+            </div>
+            <div class="result-box" style="border-color: var(--primary);">
+              <div class="input-label" style="color: var(--primary);">Total Session Cost</div>
+              <div class="result-val val-emerald" id="totalCostVal">$0.58</div>
+            </div>
+          </div>
+          <div style="margin-top: 0.5rem;">
+            <div style="display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--text-muted);">
+              <span>Comparison against average session cost cap ($25.00 budget limit)</span>
+              <span id="budgetPct">2.3%</span>
+            </div>
+            <div class="comparison-bar-container">
+              <div class="comparison-bar" id="comparisonBar"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- FAQ Section -->
+    <section id="faq">
+      <div class="section-header">
+        <h2 class="section-title">Frequently Asked Questions</h2>
+        <p class="section-subtitle">Common configurations and troubleshooting</p>
+      </div>
+      <div class="faq-list">
+        <div class="faq-item">
+          <div class="faq-question">
+            <span>Can NeuralLoom run outside local host systems (e.g. Vercel deployment)?</span>
+            <span class="faq-icon">▶</span>
+          </div>
+          <div class="faq-answer">
+            No. NeuralLoom requires a persistent server workspace environment because it handles file reads/writes, invokes background terminal subprocesses via <code>node-pty</code>, manages local SQLite files, and binds system WebSockets. It cannot be run on standard serverless architectures.
+          </div>
+        </div>
+        <div class="faq-item">
+          <div class="faq-question">
+            <span>How do I configure Git Bash path if located in a custom directory?</span>
+            <span class="faq-icon">▶</span>
+          </div>
+          <div class="faq-answer">
+            On Windows, if Git Bash is not in standard paths, define the path explicitly inside your machine's environment variables before running the application:
+            <code>$env:WINGMAN_BASH_PATH = "C:\Your\Custom\Path\To\bash.exe"</code>.
+          </div>
+        </div>
+        <div class="faq-item">
+          <div class="faq-question">
+            <span>Are database operations secure when agents run queries?</span>
+            <span class="faq-icon">▶</span>
+          </div>
+          <div class="faq-answer">
+            Yes, you can check/uncheck Read-Only flags inside Database Explorer configurations. When checked, the backend enforces structural query inspection to immediately intercept and block mutating SQL expressions.
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- CTA Footer -->
+    <div class="cta-container">
+      <h3 class="cta-title">Need UI Diagnostics?</h3>
+      <p class="cta-desc">Explore visual components layout and inspect database/terminal consoles live inside the Audit Dashboard.</p>
+      <button class="cta-btn" onclick="window.open('/ui-audit.html', '_blank')">Launch UI Audit Dashboard</button>
+    </div>
+  </main>
+  <!-- Interactive JavaScript -->
+  <script>
+    // FAQ toggling
+    document.querySelectorAll('.faq-question').forEach(q => {
+      q.addEventListener('click', () => {
+        const item = q.parentElement;
+        const isOpen = item.classList.contains('open');
+        // Close all first
+        document.querySelectorAll('.faq-item').forEach(el => el.classList.remove('open'));
+        if (!isOpen) {
+          item.classList.add('open');
+        }
+      });
+    });
+    // Sidebar search filtering
+    const searchInput = document.getElementById('sidebarSearch');
+    const sections = document.querySelectorAll('section');
+    const navLinks = document.querySelectorAll('.nav-item');
+    searchInput.addEventListener('input', () => {
+      const query = searchInput.value.toLowerCase().trim();
+      sections.forEach(section => {
+        const text = section.innerText.toLowerCase();
+        const navItem = Array.from(navLinks).find(item => {
+          const href = item.querySelector('a').getAttribute('href');
+          return href === '#' + section.id;
+        });
+        if (text.includes(query)) {
+          section.style.display = 'block';
+          if (navItem) navItem.style.display = 'block';
+        } else {
+          section.style.display = 'none';
+          if (navItem) navItem.style.display = 'none';
+        }
+      });
+    });
+    // Token calculator calculations
+    const calcModel = document.getElementById('calcModel');
+    const calcInteractions = document.getElementById('calcInteractions');
+    const calcInputTokens = document.getElementById('calcInputTokens');
+    const calcOutputTokens = document.getElementById('calcOutputTokens');
+    const totalInputVal = document.getElementById('totalInputVal');
+    const totalOutputVal = document.getElementById('totalOutputVal');
+    const totalCostVal = document.getElementById('totalCostVal');
+    const budgetPct = document.getElementById('budgetPct');
+    const comparisonBar = document.getElementById('comparisonBar');
+    const rates = {
+      'claude-3-5-sonnet': { in: 3.00, out: 15.00 },
+      'claude-3-opus': { in: 15.00, out: 75.00 },
+      'gpt-4o': { in: 5.00, out: 15.00 },
+      'gpt-4-turbo': { in: 10.00, out: 30.00 }
+    };
+    function recalculate() {
+      const model = calcModel.value;
+      const turns = parseInt(calcInteractions.value) || 0;
+      const inputAvg = parseInt(calcInputTokens.value) || 0;
+      const outputAvg = parseInt(calcOutputTokens.value) || 0;
+      const totalIn = turns * inputAvg;
+      const totalOut = turns * outputAvg;
+      totalInputVal.innerText = totalIn.toLocaleString();
+      totalOutputVal.innerText = totalOut.toLocaleString();
+      const rate = rates[model] || { in: 0, out: 0 };
+      const inCost = (totalIn / 1000000) * rate.in;
+      const outCost = (totalOut / 1000000) * rate.out;
+      const totalCost = inCost + outCost;
+      totalCostVal.innerText = '$' + totalCost.toFixed(2);
+      const budgetLimit = 25.00;
+      const pct = Math.min((totalCost / budgetLimit) * 100, 100);
+      budgetPct.innerText = pct.toFixed(1) + '%';
+      comparisonBar.style.width = pct + '%';
+      if (pct > 75) {
+        comparisonBar.style.background = 'var(--gradient-red)';
+      } else if (pct > 40) {
+        comparisonBar.style.background = 'var(--gradient-orange)';
+      } else {
+        comparisonBar.style.background = 'var(--gradient-emerald)';
+      }
+    }
+    [calcModel, calcInteractions, calcInputTokens, calcOutputTokens].forEach(el => {
+      el.addEventListener('input', recalculate);
+    });
+    // Run on startup
+    recalculate();
+    // Scroll active link styling
+    window.addEventListener('scroll', () => {
+      let current = '';
+      sections.forEach(section => {
+        const sectionTop = section.offsetTop;
+        const sectionHeight = section.clientHeight;
+        if (pageYOffset >= (sectionTop - 250)) {
+          current = section.getAttribute('id');
+        }
+      });
+      navLinks.forEach(item => {
+        item.classList.remove('active');
+        const href = item.querySelector('a').getAttribute('href');
+        if (href === '#' + current) {
+          item.classList.add('active');
+        }
+      });
+    });
+  </script>
+</body>
+</html>