npm - neural-loom - Versions diffs - 0.2.53 → 0.2.55 - Mend

neural-loom 0.2.53 → 0.2.55

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

package/public/ui-audit.html ADDED Viewed

@@ -0,0 +1,1509 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Neural Loom: UI Capability Audit & Gap Analysis</title>
+  <!-- Google Fonts: Outfit & JetBrains Mono -->
+  <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=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Outfit:wght@100..900&display=swap" rel="stylesheet">
+  <style>
+    :root {
+      --background-hsl: 222, 24%, 7%;
+      --foreground-hsl: 210, 40%, 98%;
+      --card-hsl: 222, 24%, 10%;
+      --card-hover-hsl: 222, 24%, 13%;
+      --border-hsl: 222, 15%, 16%;
+      --border-focus-hsl: 262, 83%, 67%;
+      --primary-hsl: 262, 83%, 67%;
+      --primary-hover-hsl: 262, 83%, 62%;
+      --accent-hsl: 195, 100%, 50%;
+      --muted-hsl: 215, 20%, 65%;
+      --success-hsl: 142, 72%, 45%;
+      --warning-hsl: 38, 92%, 50%;
+      --danger-hsl: 0, 84%, 60%;
+      --background: hsl(var(--background-hsl));
+      --foreground: hsl(var(--foreground-hsl));
+      --card: hsl(var(--card-hsl));
+      --card-hover: hsl(var(--card-hover-hsl));
+      --border: hsl(var(--border-hsl));
+      --border-focus: hsl(var(--border-focus-hsl));
+      --primary: hsl(var(--primary-hsl));
+      --primary-hover: hsl(var(--primary-hover-hsl));
+      --accent: hsl(var(--accent-hsl));
+      --muted: hsl(var(--muted-hsl));
+      --success: hsl(var(--success-hsl));
+      --warning: hsl(var(--warning-hsl));
+      --danger: hsl(var(--danger-hsl));
+      --glass-bg: rgba(15, 23, 42, 0.45);
+      --glass-border: rgba(255, 255, 255, 0.04);
+      --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+      --font-sans: 'Outfit', system-ui, -apple-system, sans-serif;
+      --font-mono: 'JetBrains Mono', monospace;
+    }
+    * {
+      box-sizing: border-box;
+      padding: 0;
+      margin: 0;
+    }
+    html, body {
+      min-height: 100%;
+      width: 100%;
+      background-color: var(--background);
+      color: var(--foreground);
+      font-family: var(--font-sans);
+      overflow-x: hidden;
+      line-height: 1.5;
+    }
+    body {
+      display: flex;
+      flex-direction: column;
+      background-image:
+        radial-gradient(circle at 10% 20%, rgba(109, 40, 217, 0.15) 0%, transparent 40%),
+        radial-gradient(circle at 90% 80%, rgba(14, 165, 233, 0.1) 0%, transparent 45%);
+      background-attachment: fixed;
+    }
+    header {
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+      background: var(--glass-bg);
+      border-bottom: 1px solid var(--border);
+      padding: 1.5rem 3rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      position: sticky;
+      top: 0;
+      z-index: 100;
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+    }
+    .brand-container {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+    }
+    .logo-glow {
+      width: 48px;
+      height: 48px;
+      border-radius: 12px;
+      background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
+      box-shadow: 0 0 20px rgba(109, 40, 217, 0.4);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 1.5rem;
+      font-weight: 800;
+      color: #fff;
+    }
+    .header-text h1 {
+      font-size: 1.75rem;
+      font-weight: 800;
+      letter-spacing: -0.02em;
+      background: linear-gradient(135deg, #fff 40%, var(--muted) 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    .header-text p {
+      font-size: 0.85rem;
+      color: var(--muted);
+    }
+    .header-badge {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+    }
+    .badge {
+      background: rgba(109, 40, 217, 0.1);
+      border: 1px solid rgba(109, 40, 217, 0.25);
+      color: hsl(262, 83%, 75%);
+      padding: 0.35rem 0.75rem;
+      border-radius: 9999px;
+      font-size: 0.75rem;
+      font-weight: 600;
+      display: flex;
+      align-items: center;
+      gap: 0.4rem;
+    }
+    .badge-dot {
+      width: 6px;
+      height: 6px;
+      background-color: var(--accent);
+      border-radius: 50%;
+      box-shadow: 0 0 8px var(--accent);
+      animation: pulse 1.8s infinite;
+    }
+    @keyframes pulse {
+      0% { transform: scale(0.95); opacity: 0.5; }
+      50% { transform: scale(1.15); opacity: 1; }
+      100% { transform: scale(0.95); opacity: 0.5; }
+    }
+    .nav-tabs {
+      display: flex;
+      gap: 0.5rem;
+      background: rgba(255, 255, 255, 0.02);
+      border: 1px solid var(--border);
+      padding: 0.35rem;
+      border-radius: 10px;
+    }
+    .tab-btn {
+      background: transparent;
+      border: none;
+      color: var(--muted);
+      padding: 0.5rem 1.25rem;
+      border-radius: 8px;
+      font-size: 0.875rem;
+      font-weight: 600;
+      cursor: pointer;
+      font-family: var(--font-sans);
+      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .tab-btn:hover {
+      color: #fff;
+      background: rgba(255, 255, 255, 0.03);
+    }
+    .tab-btn.active {
+      color: #fff;
+      background: var(--primary);
+      box-shadow: 0 2px 10px rgba(109, 40, 217, 0.3);
+    }
+    main {
+      flex: 1;
+      width: 100%;
+      max-width: 1280px;
+      margin: 0 auto;
+      padding: 3rem 1.5rem;
+      display: flex;
+      flex-direction: column;
+      gap: 3rem;
+    }
+    .tab-content {
+      display: none;
+      animation: fadeIn 0.4s ease forwards;
+    }
+    .tab-content.active {
+      display: block;
+    }
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(10px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    /* Executive Summary Layout */
+    .hero-section {
+      background: linear-gradient(135deg, rgba(15, 23, 42, 0.6) 0%, rgba(10, 15, 30, 0.7) 100%);
+      border: 1px solid var(--border);
+      border-radius: 24px;
+      padding: 3rem;
+      display: grid;
+      grid-template-columns: 2fr 1fr;
+      gap: 3rem;
+      align-items: center;
+      position: relative;
+      overflow: hidden;
+    }
+    .hero-section::before {
+      content: '';
+      position: absolute;
+      width: 300px;
+      height: 300px;
+      background: radial-gradient(circle, rgba(109, 40, 217, 0.12) 0%, transparent 70%);
+      top: -100px;
+      right: -100px;
+      pointer-events: none;
+    }
+    .hero-info h2 {
+      font-size: 2.25rem;
+      font-weight: 800;
+      letter-spacing: -0.03em;
+      margin-bottom: 1rem;
+      line-height: 1.2;
+    }
+    .hero-info p {
+      color: var(--muted);
+      font-size: 1.1rem;
+      margin-bottom: 2rem;
+      max-width: 680px;
+    }
+    .hero-stats-panel {
+      background: rgba(255, 255, 255, 0.01);
+      border: 1px solid var(--border);
+      border-radius: 16px;
+      padding: 2rem;
+      text-align: center;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      backdrop-filter: blur(8px);
+    }
+    .progress-circle-container {
+      position: relative;
+      width: 140px;
+      height: 140px;
+      margin-bottom: 1.5rem;
+    }
+    .progress-circle-svg {
+      width: 100%;
+      height: 100%;
+      transform: rotate(-90deg);
+    }
+    .circle-bg {
+      fill: none;
+      stroke: var(--border);
+      stroke-width: 10;
+    }
+    .circle-fill {
+      fill: none;
+      stroke: url(#gradient-progress);
+      stroke-width: 10;
+      stroke-dasharray: 440;
+      stroke-dashoffset: 440;
+      stroke-linecap: round;
+      transition: stroke-dashoffset 0.8s ease;
+    }
+    .progress-value {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      font-size: 1.75rem;
+      font-weight: 800;
+      color: #fff;
+    }
+    .progress-label {
+      font-size: 0.875rem;
+      color: var(--muted);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+    .summary-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 1.5rem;
+      margin-top: 1rem;
+    }
+    .summary-card {
+      background: var(--card);
+      border: 1px solid var(--border);
+      border-radius: 16px;
+      padding: 1.75rem;
+      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .summary-card:hover {
+      border-color: var(--border-focus);
+      transform: translateY(-3px);
+    }
+    .summary-card-icon {
+      font-size: 1.75rem;
+      margin-bottom: 1rem;
+      display: inline-block;
+    }
+    .summary-card h3 {
+      font-size: 1.15rem;
+      font-weight: 700;
+      margin-bottom: 0.5rem;
+      color: #fff;
+    }
+    .summary-card p {
+      font-size: 0.875rem;
+      color: var(--muted);
+      line-height: 1.45;
+    }
+    /* Interactive Feature Grid */
+    .features-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 1.5rem;
+    }
+    .feature-card {
+      background: var(--card);
+      border: 1px solid var(--border);
+      border-radius: 18px;
+      padding: 2rem;
+      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+      display: flex;
+      flex-direction: column;
+      position: relative;
+    }
+    .feature-card:hover {
+      border-color: var(--border-focus);
+      background-color: var(--card-hover);
+      box-shadow: 0 4px 20px rgba(109, 40, 217, 0.1);
+    }
+    .feature-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      margin-bottom: 1rem;
+    }
+    .feature-title-area {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+    }
+    .feature-icon {
+      font-size: 1.5rem;
+      width: 40px;
+      height: 40px;
+      background: rgba(255, 255, 255, 0.02);
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .feature-title-area h3 {
+      font-size: 1.25rem;
+      font-weight: 700;
+      color: #fff;
+    }
+    .feature-status {
+      font-size: 0.7rem;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      padding: 0.25rem 0.6rem;
+      border-radius: 6px;
+    }
+    .status-completed {
+      background: rgba(16, 185, 129, 0.1);
+      color: var(--success);
+      border: 1px solid rgba(16, 185, 129, 0.2);
+    }
+    .status-partial {
+      background: rgba(234, 179, 8, 0.1);
+      color: var(--warning);
+      border: 1px solid rgba(234, 179, 8, 0.2);
+    }
+    .feature-desc {
+      font-size: 0.9rem;
+      color: var(--muted);
+      margin-bottom: 1.25rem;
+      line-height: 1.5;
+    }
+    .feature-tags {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.4rem;
+      margin-top: auto;
+    }
+    .feature-tag {
+      background: rgba(255, 255, 255, 0.03);
+      border: 1px solid var(--border);
+      color: var(--muted);
+      font-size: 0.725rem;
+      padding: 0.2rem 0.5rem;
+      border-radius: 4px;
+      font-family: var(--font-mono);
+    }
+    /* Gap Assessment Table/List */
+    .gap-header {
+      margin-bottom: 1.5rem;
+      border-bottom: 1px solid var(--border);
+      padding-bottom: 1rem;
+    }
+    .gap-header h2 {
+      font-size: 1.75rem;
+      font-weight: 800;
+    }
+    .gap-list {
+      display: flex;
+      flex-direction: column;
+      gap: 1.25rem;
+    }
+    .gap-row {
+      background: var(--card);
+      border: 1px solid var(--border);
+      border-radius: 16px;
+      padding: 1.5rem;
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+      gap: 2rem;
+      align-items: center;
+      transition: all 0.2s ease;
+    }
+    .gap-row:hover {
+      border-color: rgba(239, 68, 68, 0.25);
+      background-color: var(--card-hover);
+    }
+    .gap-component {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+    }
+    .gap-component-icon {
+      font-size: 1.25rem;
+      padding: 0.5rem;
+      background: rgba(255, 255, 255, 0.02);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+    }
+    .gap-component-info h4 {
+      font-size: 1.05rem;
+      font-weight: 700;
+      color: #fff;
+    }
+    .gap-component-info span {
+      font-size: 0.75rem;
+      color: var(--muted);
+    }
+    .gap-current {
+      font-size: 0.875rem;
+      color: hsl(0, 84%, 75%);
+      display: flex;
+      align-items: flex-start;
+      gap: 0.5rem;
+    }
+    .gap-current::before {
+      content: '❌';
+      font-size: 0.8rem;
+      margin-top: 0.15rem;
+    }
+    .gap-recommendation {
+      font-size: 0.875rem;
+      color: hsl(142, 72%, 75%);
+      display: flex;
+      align-items: flex-start;
+      gap: 0.5rem;
+    }
+    .gap-recommendation::before {
+      content: '💡';
+      font-size: 0.8rem;
+      margin-top: 0.15rem;
+    }
+    /* Checklist Widget styling */
+    .checklist-container {
+      display: grid;
+      grid-template-columns: 1fr 3fr;
+      gap: 2rem;
+    }
+    .checklist-categories {
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+      position: sticky;
+      top: 100px;
+      height: fit-content;
+    }
+    .cat-btn {
+      background: var(--card);
+      border: 1px solid var(--border);
+      color: var(--muted);
+      padding: 0.75rem 1.25rem;
+      border-radius: 12px;
+      text-align: left;
+      font-family: var(--font-sans);
+      font-weight: 600;
+      cursor: pointer;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      transition: all 0.2s ease;
+    }
+    .cat-btn:hover {
+      border-color: var(--border-focus);
+      color: #fff;
+    }
+    .cat-btn.active {
+      background: rgba(109, 40, 217, 0.1);
+      border-color: var(--primary);
+      color: #fff;
+    }
+    .cat-badge {
+      background: rgba(255, 255, 255, 0.05);
+      padding: 0.15rem 0.5rem;
+      border-radius: 9999px;
+      font-size: 0.7rem;
+      font-family: var(--font-mono);
+    }
+    .checklist-list {
+      background: var(--card);
+      border: 1px solid var(--border);
+      border-radius: 20px;
+      padding: 2rem;
+      display: flex;
+      flex-direction: column;
+      gap: 1.5rem;
+    }
+    .checklist-group-title {
+      font-size: 1.35rem;
+      font-weight: 800;
+      border-bottom: 1px solid var(--border);
+      padding-bottom: 0.5rem;
+      margin-bottom: 0.5rem;
+      color: #fff;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .group-progress {
+      font-size: 0.8rem;
+      font-family: var(--font-mono);
+      color: var(--muted);
+      font-weight: normal;
+    }
+    .checklist-item {
+      display: flex;
+      align-items: flex-start;
+      gap: 1rem;
+      padding: 0.75rem 1rem;
+      border-radius: 10px;
+      background: rgba(255, 255, 255, 0.01);
+      border: 1px solid var(--border);
+      cursor: pointer;
+      transition: all 0.2s ease;
+    }
+    .checklist-item:hover {
+      background: rgba(255, 255, 255, 0.03);
+      border-color: var(--border-focus);
+    }
+    .checklist-item input[type="checkbox"] {
+      width: 18px;
+      height: 18px;
+      border-radius: 4px;
+      accent-color: var(--primary);
+      margin-top: 0.2rem;
+      cursor: pointer;
+    }
+    .checklist-item-info {
+      flex: 1;
+    }
+    .checklist-item-info h5 {
+      font-size: 0.95rem;
+      font-weight: 700;
+      color: #fff;
+      margin-bottom: 0.15rem;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+    .checklist-item.checked .checklist-item-info h5 {
+      text-decoration: line-through;
+      color: var(--muted);
+    }
+    .checklist-item-info p {
+      font-size: 0.825rem;
+      color: var(--muted);
+      line-height: 1.4;
+    }
+    .item-tag {
+      font-size: 0.65rem;
+      font-weight: 700;
+      text-transform: uppercase;
+      padding: 0.15rem 0.4rem;
+      border-radius: 4px;
+    }
+    .tag-feature {
+      background: rgba(59, 130, 246, 0.1);
+      color: hsl(217, 91%, 75%);
+      border: 1px solid rgba(59, 130, 246, 0.2);
+    }
+    .tag-gap {
+      background: rgba(239, 68, 68, 0.1);
+      color: hsl(0, 84%, 75%);
+      border: 1px solid rgba(239, 68, 68, 0.2);
+    }
+    footer {
+      background: rgba(10, 15, 30, 0.8);
+      border-top: 1px solid var(--border);
+      padding: 2rem 3rem;
+      text-align: center;
+      font-size: 0.8rem;
+      color: var(--muted);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    footer a {
+      color: var(--primary);
+      text-decoration: underline;
+      transition: color 0.15s ease;
+    }
+    footer a:hover {
+      color: var(--primary-hover);
+    }
+    @media (max-width: 1024px) {
+      .hero-section {
+        grid-template-columns: 1fr;
+        gap: 2rem;
+        padding: 2rem;
+      }
+      .features-grid {
+        grid-template-columns: 1fr;
+      }
+      .gap-row {
+        grid-template-columns: 1fr;
+        gap: 1rem;
+      }
+      .checklist-container {
+        grid-template-columns: 1fr;
+      }
+      .checklist-categories {
+        position: static;
+        flex-direction: row;
+        overflow-x: auto;
+        padding-bottom: 0.5rem;
+      }
+      .cat-btn {
+        flex-shrink: 0;
+      }
+    }
+  </style>
+</head>
+<body>
+  <svg style="position: absolute; width: 0; height: 0;">
+    <defs>
+      <linearGradient id="gradient-progress" x1="0%" y1="0%" x2="100%" y2="100%">
+        <stop offset="0%" stop-color="var(--primary)" />
+        <stop offset="100%" stop-color="var(--accent)" />
+      </linearGradient>
+    </defs>
+  </svg>
+  <header>
+    <div class="brand-container">
+      <div class="logo-glow">🕸️</div>
+      <div class="header-text">
+        <h1>Neural Loom</h1>
+        <p>UI Feature Audit & Capabilities Assessment</p>
+      </div>
+    </div>
+    <nav class="nav-tabs">
+      <button class="tab-btn active" onclick="switchTab('summary')">Audit Summary</button>
+      <button class="tab-btn" onclick="switchTab('features')">Features Map</button>
+      <button class="tab-btn" onclick="switchTab('gaps')">Gap Analysis</button>
+      <button class="tab-btn" onclick="switchTab('checklist')">Checklist Dashboard</button>
+    </nav>
+    <div class="header-badge">
+      <div class="badge">
+        <span class="badge-dot"></span>
+        <span>Version 0.2.19</span>
+      </div>
+    </div>
+  </header>
+  <main>
+    <!-- TAB: Summary -->
+    <section id="tab-summary" class="tab-content active">
+      <div class="hero-section">
+        <div class="hero-info">
+          <h2>UI Architecture & Gap Audit</h2>
+          <p>
+            An audit of the Next.js visual orchestration client. While Neural Loom provides a highly coherent, multi-session PTY console cockpit wrapping local, containerized, and VM-based agent processes, some key gaps remain between its custom layouts and standard visual IDE platforms. This dashboard tracks these features and recommends pathways for bridging the gaps.
+          </p>
+          <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
+            <button class="tab-btn active" style="padding: 0.65rem 1.5rem;" onclick="switchTab('checklist')">⚡ Start Audit Checklist</button>
+            <button class="tab-btn" style="padding: 0.65rem 1.5rem; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border);" onclick="switchTab('gaps')">Inspect Feature Gaps</button>
+          </div>
+        </div>
+        <div class="hero-stats-panel">
+          <div class="progress-circle-container">
+            <svg class="progress-circle-svg" viewBox="0 0 160 160">
+              <circle class="circle-bg" cx="80" cy="80" r="70"></circle>
+              <circle id="circle-fill" class="circle-fill" cx="80" cy="80" r="70"></circle>
+            </svg>
+            <div id="overall-progress-text" class="progress-value">0%</div>
+          </div>
+          <span class="progress-label">Audit Completion Score</span>
+        </div>
+      </div>
+      <div class="summary-grid" style="margin-top: 2.5rem;">
+        <div class="summary-card">
+          <span class="summary-card-icon">⚡</span>
+          <h3>Low-Latency Terminals</h3>
+          <p>
+            PTY streams map to `xterm.js` over native WebSockets on Port 3001, providing robust keystroke responses and interactive terminal environments.
+          </p>
+        </div>
+        <div class="summary-card">
+          <span class="summary-card-icon">📁</span>
+          <h3>Context Staging Hub</h3>
+          <p>
+            Seamless integration with shared `cprompt.md` and `AGENTS.md` guidelines via automatic slash commands (`/ccc`, `/ccp`) to inject configurations.
+          </p>
+        </div>
+        <div class="summary-card">
+          <span class="summary-card-icon">⚙️</span>
+          <h3>Local & VM Sandboxes</h3>
+          <p>
+            Flexible multi-session launcher allows swapping runner environments between the local host, isolated Docker containers, or SSH instances on the fly.
+          </p>
+        </div>
+      </div>
+    </section>
+    <!-- TAB: Features Map -->
+    <section id="tab-features" class="tab-content">
+      <div style="margin-bottom: 2rem;">
+        <h2 style="font-size: 1.75rem; font-weight: 800; margin-bottom: 0.5rem;">Interactive Features Map</h2>
+        <p style="color: var(--muted); font-size: 0.95rem;">
+          Neural Loom consists of several key functional components in its visual IDE environment.
+        </p>
+      </div>
+      <div class="features-grid">
+        <div class="feature-card">
+          <div class="feature-header">
+            <div class="feature-title-area">
+              <div class="feature-icon">📁</div>
+              <h3>Workspace Explorer</h3>
+            </div>
+            <span class="feature-status status-completed">Completed</span>
+          </div>
+          <p class="feature-desc">
+            Left primary panel tree view representing workspace files. Supports basic operations (new file, new folder, rename, and delete) with interactive dialog modals, file filtering, and rapid global search (Ctrl+P).
+          </p>
+          <div class="feature-tags">
+            <span class="feature-tag">WorkspaceData</span>
+            <span class="feature-tag">FileItemNode</span>
+            <span class="feature-tag">Ctrl+P Search</span>
+          </div>
+        </div>
+        <div class="feature-card">
+          <div class="feature-header">
+            <div class="feature-title-area">
+              <div class="feature-icon">🌿</div>
+              <h3>Source Control</h3>
+            </div>
+            <span class="feature-status status-completed">Completed</span>
+          </div>
+          <p class="feature-desc">
+            Direct Git integration reading `git status --porcelain`. Highlights staged and unstaged file lists with options to stage, unstage, discard changes, commit locally, and pull/push from/to remotes.
+          </p>
+          <div class="feature-tags">
+            <span class="feature-tag">/api/git</span>
+            <span class="feature-tag">GitFileRow</span>
+            <span class="feature-tag">Line Diff</span>
+          </div>
+        </div>
+        <div class="feature-card">
+          <div class="feature-header">
+            <div class="feature-title-area">
+              <div class="feature-icon">🖥️</div>
+              <h3>Split Console & PTY</h3>
+            </div>
+            <span class="feature-status status-completed">Completed</span>
+          </div>
+          <p class="feature-desc">
+            Splits terminal screen horizontally (50/50) to run and observe multiple agent sessions concurrently, bridging WebSocket keystrokes and stdout logs into xterm.js dynamically.
+          </p>
+          <div class="feature-tags">
+            <span class="feature-tag">TerminalConsole</span>
+            <span class="feature-tag">xterm.js</span>
+            <span class="feature-tag">Split Layout</span>
+          </div>
+        </div>
+        <div class="feature-card">
+          <div class="feature-header">
+            <div class="feature-title-area">
+              <div class="feature-icon">🗄️</div>
+              <h3>Database Explorer</h3>
+            </div>
+            <span class="feature-status status-completed">Completed</span>
+          </div>
+          <p class="feature-desc">
+            Built-in SQL database explorer interface (`DbExplorer`) capable of rendering relational schemas, listing tables, executing custom SQL commands, and viewing records.
+          </p>
+          <div class="feature-tags">
+            <span class="feature-tag">DbExplorer.tsx</span>
+            <span class="feature-tag">SQL Editor</span>
+            <span class="feature-tag">Schema Map</span>
+          </div>
+        </div>
+        <div class="feature-card">
+          <div class="feature-header">
+            <div class="feature-title-area">
+              <div class="feature-icon">📊</div>
+              <h3>Telemetry & Costs</h3>
+            </div>
+            <span class="feature-status status-completed">Completed</span>
+          </div>
+          <p class="feature-desc">
+            Monitors CPU/Memory levels of active containers or local processes using background pollers. Parses stdout streams using regex models to log and compile cumulative input/output token costs.
+          </p>
+          <div class="feature-tags">
+            <span class="feature-tag">/api/sessions/stats</span>
+            <span class="feature-tag">Token Usage</span>
+            <span class="feature-tag">Est. Cost</span>
+          </div>
+        </div>
+        <div class="feature-card">
+          <div class="feature-header">
+            <div class="feature-title-area">
+              <div class="feature-icon">🔍</div>
+              <h3>Session Log Auditor</h3>
+            </div>
+            <span class="feature-status status-completed">Completed</span>
+          </div>
+          <p class="feature-desc">
+            Captures and filters full runner stdout log traces. Supports live text filter highlighting and log backups (Export button), and houses custom prompt button configurations in localStorage.
+          </p>
+          <div class="feature-tags">
+            <span class="feature-tag">Log Search</span>
+            <span class="feature-tag">Export Logs</span>
+            <span class="feature-tag">localStorage</span>
+          </div>
+        </div>
+        <div class="feature-card">
+          <div class="feature-header">
+            <div class="feature-title-area">
+              <div class="feature-icon">✍️</div>
+              <h3>Context Hub Editor</h3>
+            </div>
+            <span class="feature-status status-completed">Completed</span>
+          </div>
+          <p class="feature-desc">
+            Editor at the bottom of the home view to read and save `cprompt.md` instructions and `AGENTS.md` guidelines, with prompt injection commands `/ccc` and `/ccp` for AI agents.
+          </p>
+          <div class="feature-tags">
+            <span class="feature-tag">ContextEditor.tsx</span>
+            <span class="feature-tag">cprompt.md</span>
+            <span class="feature-tag">AGENTS.md</span>
+          </div>
+        </div>
+        <div class="feature-card">
+          <div class="feature-header">
+            <div class="feature-title-area">
+              <div class="feature-icon">🌐</div>
+              <h3>Browser Preview</h3>
+            </div>
+            <span class="feature-status status-completed">Completed</span>
+          </div>
+          <p class="feature-desc">
+            Allows running a preview page at specified ports (e.g. Next.js port 3000 or Vite port 5173) inside a layout tab via iframe embedding, facilitating real-time checking of app output.
+          </p>
+          <div class="feature-tags">
+            <span class="feature-tag">Iframe preview</span>
+            <span class="feature-tag">Quick ports</span>
+            <span class="feature-tag">CSP Safe</span>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- TAB: Gap Analysis -->
+    <section id="tab-gaps" class="tab-content">
+      <div class="gap-header">
+        <h2>Features vs Gaps Analysis</h2>
+        <p style="color: var(--muted); margin-top: 0.5rem; font-size: 0.95rem;">
+          Comparing existing layout capabilities with ideal full-featured IDE requirements.
+        </p>
+      </div>
+      <div class="gap-list">
+        <div class="gap-row">
+          <div class="gap-component">
+            <span class="gap-component-icon">📝</span>
+            <div class="gap-component-info">
+              <h4>File Code Editor</h4>
+              <span>Workspace editing pane</span>
+            </div>
+          </div>
+          <div class="gap-current">
+            Uses raw standard textareas under <code>IdeLayout.tsx</code>. Lacks code folding, syntax highlighting, autocompletion, map scroll, and syntax linting.
+          </div>
+          <div class="gap-recommendation">
+            Embed <strong>Monaco Editor</strong> (VS Code's core) or <strong>CodeMirror 6</strong> dynamically for rich syntax highlighting, code assistance, and formatting.
+          </div>
+        </div>
+        <div class="gap-row">
+          <div class="gap-component">
+            <span class="gap-component-icon">🌿</span>
+            <div class="gap-component-info">
+              <h4>Git & Branches</h4>
+              <span>Source Control panel</span>
+            </div>
+          </div>
+          <div class="gap-current">
+            Stages and commits files but lacks branch management (creation, deletion, switching) or a visual commit log history mapping commits.
+          </div>
+          <div class="gap-recommendation">
+            Introduce branch selectors and a <strong>Visual Git Tree log</strong> utilizing SVG graphs mapping the commit history.
+          </div>
+        </div>
+        <div class="gap-row">
+          <div class="gap-component">
+            <span class="gap-component-icon">🗄️</span>
+            <div class="gap-component-info">
+              <h4>SQL Client (DB Explorer)</h4>
+              <span>Relational explorer</span>
+            </div>
+          </div>
+          <div class="gap-current">
+            Allows running custom queries and reviewing columns but lacks direct inline record edits or database exports (JSON/CSV).
+          </div>
+          <div class="gap-recommendation">
+            Develop interactive editable grid rows and add file export targets inside the <code>DbExplorer</code> tab.
+          </div>
+        </div>
+        <div class="gap-row">
+          <div class="gap-component">
+            <span class="gap-component-icon">📈</span>
+            <div class="gap-component-info">
+              <h4>Token Telemetry</h4>
+              <span>Analytics panel</span>
+            </div>
+          </div>
+          <div class="gap-current">
+            Extracts cumulative token counts in real-time but has no historic tracking or visual charts analyzing expenditure over time.
+          </div>
+          <div class="gap-recommendation">
+            Integrate light charts (e.g., lightweight canvas charts) displaying cost trends across days/sessions.
+          </div>
+        </div>
+        <div class="gap-row">
+          <div class="gap-component">
+            <span class="gap-component-icon">🖥️</span>
+            <div class="gap-component-info">
+              <h4>Terminal Controls</h4>
+              <span>Console Bridge</span>
+            </div>
+          </div>
+          <div class="gap-current">
+            Buffers incoming socket text directly to xterm.js but lacks screen capture tools, terminal search buffers, or output pausing.
+          </div>
+          <div class="gap-recommendation">
+            Add controls to pause output scroll streams, capture screenshots/logs, and implement standard xterm-addon-search.
+          </div>
+        </div>
+        <div class="gap-row">
+          <div class="gap-component">
+            <span class="gap-component-icon">🎨</span>
+            <div class="gap-component-info">
+              <h4>Visual Customization</h4>
+              <span>Global style settings</span>
+            </div>
+          </div>
+          <div class="gap-current">
+            The layout uses a single predefined dark HSL system. Lacks configurable theme toggles, font size scalers, or high contrast toggles.
+          </div>
+          <div class="gap-recommendation">
+            Introduce user settings popovers storing font scales and custom theme presets (e.g., Solarized, One Dark) in localStorage.
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- TAB: Checklist Dashboard -->
+    <section id="tab-checklist" class="tab-content">
+      <div style="margin-bottom: 2rem;">
+        <h2 style="font-size: 1.75rem; font-weight: 800; margin-bottom: 0.5rem;">Interactive Audit Checklist</h2>
+        <p style="color: var(--muted); font-size: 0.95rem;">
+          Click items below to toggle audit checks. The overall completion score updates dynamically.
+        </p>
+      </div>
+      <div class="checklist-container">
+        <div class="checklist-categories">
+          <button class="cat-btn active" onclick="filterChecklist('all')">
+            <span>All Audits</span>
+            <span class="cat-badge" id="badge-all">0/26</span>
+          </button>
+          <button class="cat-btn" onclick="filterChecklist('layout')">
+            <span>Layout & Terminal</span>
+            <span class="cat-badge" id="badge-layout">0/6</span>
+          </button>
+          <button class="cat-btn" onclick="filterChecklist('editor')">
+            <span>Editor & Files</span>
+            <span class="cat-badge" id="badge-editor">0/6</span>
+          </button>
+          <button class="cat-btn" onclick="filterChecklist('git')">
+            <span>Git Controls</span>
+            <span class="cat-badge" id="badge-git">0/5</span>
+          </button>
+          <button class="cat-btn" onclick="filterChecklist('db')">
+            <span>Database Explorer</span>
+            <span class="cat-badge" id="badge-db">0/4</span>
+          </button>
+          <button class="cat-btn" onclick="filterChecklist('analytics')">
+            <span>Context & Stats</span>
+            <span class="cat-badge" id="badge-analytics">0/5</span>
+          </button>
+        </div>
+        <div class="checklist-list">
+          <!-- GROUP: Layout & Terminal -->
+          <div class="checklist-group" data-category="layout">
+            <div class="checklist-group-title">
+              <span>Layout & Terminal Consoles</span>
+              <span class="group-progress" id="progress-layout">0/6 completed</span>
+            </div>
+            <label class="checklist-item checked">
+              <input type="checkbox" checked onchange="toggleAuditItem(this)" data-cat="layout">
+              <div class="checklist-item-info">
+                <h5>Multi-Session Workspace Swapping <span class="item-tag tag-feature">Feature</span></h5>
+                <p>Swap active sessions via top tabs while maintaining independent file tree cache, terminals, and editor state.</p>
+              </div>
+            </label>
+            <label class="checklist-item checked">
+              <input type="checkbox" checked onchange="toggleAuditItem(this)" data-cat="layout">
+              <div class="checklist-item-info">
+                <h5>Horizontal Split Console <span class="item-tag tag-feature">Feature</span></h5>
+                <p>Horizontally split terminal console layout allowing simultaneous monitoring of two running agent instances.</p>
+              </div>
+            </label>
+            <label class="checklist-item checked">
+              <input type="checkbox" checked onchange="toggleAuditItem(this)" data-cat="layout">
+              <div class="checklist-item-info">
+                <h5>Local Host OS PTY Runner <span class="item-tag tag-feature">Feature</span></h5>
+                <p>Support initiating PTY shells inside local Git Bash environments, streaming logs directly via WebSockets.</p>
+              </div>
+            </label>
+            <label class="checklist-item checked">
+              <input type="checkbox" checked onchange="toggleAuditItem(this)" data-cat="layout">
+              <div class="checklist-item-info">
+                <h5>Isolated Docker & SSH Connectors <span class="item-tag tag-feature">Feature</span></h5>
+                <p>Configure and trigger runners wrapping Alpine Docker sandboxes or remote SSH terminals.</p>
+              </div>
+            </label>
+            <label class="checklist-item">
+              <input type="checkbox" onchange="toggleAuditItem(this)" data-cat="layout">
+              <div class="checklist-item-info">
+                <h5>Pause & Resume Output Buffers <span class="item-tag tag-gap">Gap</span></h5>
+                <p>Ability to temporarily pause PTY output streams visually to review errors without stopping the background process.</p>
+              </div>
+            </label>
+            <label class="checklist-item">
+              <input type="checkbox" onchange="toggleAuditItem(this)" data-cat="layout">
+              <div class="checklist-item-info">
+                <h5>Terminal Output Search <span class="item-tag tag-gap">Gap</span></h5>
+                <p>Add search panel utility or xterm-addon-search support inside active console streams to find specific logs.</p>
+              </div>
+            </label>
+          </div>
+          <!-- GROUP: Editor & Files -->
+          <div class="checklist-group" data-category="editor">
+            <div class="checklist-group-title">
+              <span>Editor & Filesystem</span>
+              <span class="group-progress" id="progress-editor">0/6 completed</span>
+            </div>
+            <label class="checklist-item checked">
+              <input type="checkbox" checked onchange="toggleAuditItem(this)" data-cat="editor">
+              <div class="checklist-item-info">
+                <h5>Tabbed File Editor Workspace <span class="item-tag tag-feature">Feature</span></h5>
+                <p>Keep multiple editor file tabs open in a layout area, updating saved indicators on code modification.</p>
+              </div>
+            </label>
+            <label class="checklist-item checked">
+              <input type="checkbox" checked onchange="toggleAuditItem(this)" data-cat="editor">
+              <div class="checklist-item-info">
+                <h5>File Operations API Modals <span class="item-tag tag-feature">Feature</span></h5>
+                <p>Create files, directories, rename items, and trigger deletion requests with prompt dialogues updating file tree structures.</p>
+              </div>
+            </label>
+            <label class="checklist-item checked">
+              <input type="checkbox" checked onchange="toggleAuditItem(this)" data-cat="editor">
+              <div class="checklist-item-info">
+                <h5>Scoped Directory Mounting <span class="item-tag tag-feature">Feature</span></h5>
+                <p>Mount folders outside the main workspace root tree via the primary side activity bar selector.</p>
+              </div>
+            </label>
+            <label class="checklist-item checked">
+              <input type="checkbox" checked onchange="toggleAuditItem(this)" data-cat="editor">
+              <div class="checklist-item-info">
+                <h5>Markdown Split Preview Mode <span class="item-tag tag-feature">Feature</span></h5>
+                <p>Split view support for Markdown files, rendering compiled HTML preview side-by-side with raw markdown text.</p>
+              </div>
+            </label>
+            <label class="checklist-item">
+              <input type="checkbox" onchange="toggleAuditItem(this)" data-cat="editor">
+              <div class="checklist-item-info">
+                <h5>Dynamic Monaco Editor Integration <span class="item-tag tag-gap">Gap</span></h5>
+                <p>Replace basic HTML textareas with a rich code editor implementing syntax highlighting, autocompletion, and linter bounds.</p>
+              </div>
+            </label>
+            <label class="checklist-item">
+              <input type="checkbox" onchange="toggleAuditItem(this)" data-cat="editor">
+              <div class="checklist-item-info">
+                <h5>Auto-save & Session Recovery <span class="item-tag tag-gap">Gap</span></h5>
+                <p>Enable background auto-saving and recovery for drafts of uncommitted edits on tab closure or server restarts.</p>
+              </div>
+            </label>
+          </div>
+          <!-- GROUP: Git Source Control -->
+          <div class="checklist-group" data-category="git">
+            <div class="checklist-group-title">
+              <span>Git Integration</span>
+              <span class="group-progress" id="progress-git">0/5 completed</span>
+            </div>
+            <label class="checklist-item checked">
+              <input type="checkbox" checked onchange="toggleAuditItem(this)" data-cat="git">
+              <div class="checklist-item-info">
+                <h5>Porcelain Status Tracking <span class="item-tag tag-feature">Feature</span></h5>
+                <p>Retrieve and categorize staged, unstaged, and untracked modifications by invoking backend Porcelain status reads.</p>
+              </div>
+            </label>
+            <label class="checklist-item checked">
+              <input type="checkbox" checked onchange="toggleAuditItem(this)" data-cat="git">
+              <div class="checklist-item-info">
+                <h5>Git Actions (Stage/Unstage/Discard) <span class="item-tag tag-feature">Feature</span></h5>
+                <p>Perform basic file staging, unstaging, git ignores, or discard local changes straight from change lists.</p>
+              </div>
+            </label>
+            <label class="checklist-item checked">
+              <input type="checkbox" checked onchange="toggleAuditItem(this)" data-cat="git">
+              <div class="checklist-item-info">
+                <h5>Interactive Git Line Diff Reader <span class="item-tag tag-feature">Feature</span></h5>
+                <p>Selecting any modified file compiles its diff and mounts it inside a virtual read-only editor tab using color syntax formats.</p>
+              </div>
+            </label>
+            <label class="checklist-item">
+              <input type="checkbox" onchange="toggleAuditItem(this)" data-cat="git">
+              <div class="checklist-item-info">
+                <h5>Visual Commit History Tree <span class="item-tag tag-gap">Gap</span></h5>
+                <p>Show graphic commit history diagrams mapping local/remote commit nodes, branch mergers, and logs.</p>
+              </div>
+            </label>
+            <label class="checklist-item">
+              <input type="checkbox" onchange="toggleAuditItem(this)" data-cat="git">
+              <div class="checklist-item-info">
+                <h5>Interactive Merge Conflict Resolution <span class="item-tag tag-gap">Gap</span></h5>
+                <p>Visual UI resolving git merge conflicts, providing direct side-by-side choice selectors (Accept Current vs Incoming).</p>
+              </div>
+            </label>
+          </div>
+          <!-- GROUP: Database Explorer -->
+          <div class="checklist-group" data-category="db">
+            <div class="checklist-group-title">
+              <span>Database Client</span>
+              <span class="group-progress" id="progress-db">0/4 completed</span>
+            </div>
+            <label class="checklist-item checked">
+              <input type="checkbox" checked onchange="toggleAuditItem(this)" data-cat="db">
+              <div class="checklist-item-info">
+                <h5>Relational Database Schema Tree <span class="item-tag tag-feature">Feature</span></h5>
+                <p>Scan SQLite structures automatically in the workspace, rendering relational diagrams and table listings.</p>
+              </div>
+            </label>
+            <label class="checklist-item checked">
+              <input type="checkbox" checked onchange="toggleAuditItem(this)" data-cat="db">
+              <div class="checklist-item-info">
+                <h5>SQL Command Query Executor <span class="item-tag tag-feature">Feature</span></h5>
+                <p>Interactive playground to write, run, and review relational results of multi-line SQL statements.</p>
+              </div>
+            </label>
+            <label class="checklist-item">
+              <input type="checkbox" onchange="toggleAuditItem(this)" data-cat="db">
+              <div class="checklist-item-info">
+                <h5>Inline Table Grid Editing <span class="item-tag tag-gap">Gap</span></h5>
+                <p>Direct inline double-click editing of table records in result grids, executing target SQL update transactions.</p>
+              </div>
+            </label>
+            <label class="checklist-item">
+              <input type="checkbox" onchange="toggleAuditItem(this)" data-cat="db">
+              <div class="checklist-item-info">
+                <h5>Data Export Capabilities (CSV/JSON) <span class="item-tag tag-gap">Gap</span></h5>
+                <p>Download search/view grids directly as local JSON collections or CSV spreadsheets.</p>
+              </div>
+            </label>
+          </div>
+          <!-- GROUP: Context & Stats -->
+          <div class="checklist-group" data-category="analytics">
+            <div class="checklist-group-title">
+              <span>Context Hub & Telemetry</span>
+              <span class="group-progress" id="progress-analytics">0/5 completed</span>
+            </div>
+            <label class="checklist-item checked">
+              <input type="checkbox" checked onchange="toggleAuditItem(this)" data-cat="analytics">
+              <div class="checklist-item-info">
+                <h5>Shared Context Compiler Templates <span class="item-tag tag-feature">Feature</span></h5>
+                <p>Shared input panel persistent mapping of developer prompt instructions (cprompt.md) and globally forced rules.</p>
+              </div>
+            </label>
+            <label class="checklist-item checked">
+              <input type="checkbox" checked onchange="toggleAuditItem(this)" data-cat="analytics">
+              <div class="checklist-item-info">
+                <h5>One-click Slash Commands Injection <span class="item-tag tag-feature">Feature</span></h5>
+                <p>Deploy prompt/rules staging context maps directly to terminals with single-click command executors (/ccc, /ccp).</p>
+              </div>
+            </label>
+            <label class="checklist-item checked">
+              <input type="checkbox" checked onchange="toggleAuditItem(this)" data-cat="analytics">
+              <div class="checklist-item-info">
+                <h5>CPU/Memory Telemetry Gauges <span class="item-tag tag-feature">Feature</span></h5>
+                <p>Background polling reflecting real-time physical resource loads of runner targets (host processes or containers).</p>
+              </div>
+            </label>
+            <label class="checklist-item checked">
+              <input type="checkbox" checked onchange="toggleAuditItem(this)" data-cat="analytics">
+              <div class="checklist-item-info">
+                <h5>Stdout Cost Parsing Telemetry <span class="item-tag tag-feature">Feature</span></h5>
+                <p>Read input/output parameters dynamically on PTY output lines to estimate current session token dollar pricing.</p>
+              </div>
+            </label>
+            <label class="checklist-item">
+              <input type="checkbox" onchange="toggleAuditItem(this)" data-cat="analytics">
+              <div class="checklist-item-info">
+                <h5>Token Analytics History Charts <span class="item-tag tag-gap">Gap</span></h5>
+                <p>Render interactive charts displaying historical session expenditures, peak times, and run summaries.</p>
+              </div>
+            </label>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+  <footer>
+    <div>
+      <span>Neural Loom — Interactive UI Audit</span>
+    </div>
+    <div>
+      <span>Open app interface at <a href="/" target="_blank">http://localhost:3000</a></span>
+    </div>
+    <div>
+      <span>Document Updated: June 20, 2026</span>
+    </div>
+  </footer>
+  <script>
+    // Tab switching logic
+    function switchTab(tabId) {
+      document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
+      document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
+      // Find the button and add active class
+      const targetBtn = Array.from(document.querySelectorAll('.tab-btn')).find(btn =>
+        btn.getAttribute('onclick').includes(tabId)
+      );
+      if (targetBtn) targetBtn.classList.add('active');
+      const targetContent = document.getElementById(`tab-${tabId}`);
+      if (targetContent) targetContent.classList.add('active');
+    }
+    // Filter checklist by category
+    function filterChecklist(category) {
+      // Toggle active status on buttons
+      document.querySelectorAll('.checklist-categories .cat-btn').forEach(btn => {
+        btn.classList.remove('active');
+      });
+      event.currentTarget.classList.add('active');
+      // Filter groups
+      document.querySelectorAll('.checklist-group').forEach(group => {
+        if (category === 'all' || group.getAttribute('data-category') === category) {
+          group.style.display = 'block';
+        } else {
+          group.style.display = 'none';
+        }
+      });
+    }
+    // Toggle checklist item styling
+    function toggleAuditItem(checkbox) {
+      const label = checkbox.closest('.checklist-item');
+      if (checkbox.checked) {
+        label.classList.add('checked');
+      } else {
+        label.classList.remove('checked');
+      }
+      recalculateProgress();
+    }
+    // Recalculate and update progress scores
+    function recalculateProgress() {
+      const allItems = document.querySelectorAll('.checklist-item input[type="checkbox"]');
+      const totalCount = allItems.length;
+      let overallChecked = 0;
+      // Group counting
+      const categories = ['layout', 'editor', 'git', 'db', 'analytics'];
+      const counts = { all: { checked: 0, total: 0 } };
+      categories.forEach(cat => {
+        counts[cat] = { checked: 0, total: 0 };
+      });
+      allItems.forEach(item => {
+        const cat = item.getAttribute('data-cat');
+        counts.all.total++;
+        if (item.checked) {
+          overallChecked++;
+          counts.all.checked++;
+        }
+        if (cat && counts[cat]) {
+          counts[cat].total++;
+          if (item.checked) {
+            counts[cat].checked++;
+          }
+        }
+      });
+      // Update progress badges
+      document.getElementById('badge-all').innerText = `${counts.all.checked}/${counts.all.total}`;
+      categories.forEach(cat => {
+        document.getElementById(`badge-${cat}`).innerText = `${counts[cat].checked}/${counts[cat].total}`;
+        document.getElementById(`progress-${cat}`).innerText = `${counts[cat].checked}/${counts[cat].total} completed`;
+      });
+      // Calculate percentage
+      const percent = totalCount > 0 ? Math.round((overallChecked / totalCount) * 100) : 0;
+      // Update Hero progress texts
+      document.getElementById('overall-progress-text').innerText = `${percent}%`;
+      // Update SVG circular dashoffset
+      // Radius of circle is 70, Circumference is 2 * PI * 70 = ~439.8
+      const strokeFill = document.getElementById('circle-fill');
+      if (strokeFill) {
+        const strokeDashOffset = 440 - (440 * percent) / 100;
+        strokeFill.style.strokeDashoffset = strokeDashOffset;
+      }
+    }
+    // Attach click events to checklist label rows to toggle checkbox (avoiding double toggling)
+    document.querySelectorAll('.checklist-item').forEach(item => {
+      item.addEventListener('click', function(e) {
+        if (e.target.tagName !== 'INPUT') {
+          const checkbox = this.querySelector('input[type="checkbox"]');
+          checkbox.checked = !checkbox.checked;
+          toggleAuditItem(checkbox);
+        }
+      });
+    });
+    // Run progress count on load
+    window.addEventListener('DOMContentLoaded', () => {
+      recalculateProgress();
+    });
+  </script>
+</body>
+</html>