From 2144d7c2c0d7a9fc907a8e7665f92f9215d497c7 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Tue, 17 Mar 2026 23:16:11 -0400
Subject: [PATCH] UI: collapsible sections in help modal

Post-processes rendered markdown: each H2 becomes a <details>/<summary>.
Top 4 sections (Header Controls, Chat, Sessions, Notes) open by default;
remaining sections (Backends, Talk, Files, Context, Shortcuts, API,
Planned) start collapsed.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 cortex/static/app.js    | 28 ++++++++++++++++++++++++++++
 cortex/static/style.css | 37 +++++++++++++++++++++++++++++++++++++
 2 files changed, 65 insertions(+)

diff --git a/cortex/static/app.js b/cortex/static/app.js
index ca14976..7d39400 100644
--- a/cortex/static/app.js
+++ b/cortex/static/app.js
@@ -884,6 +884,33 @@
         const helpBody  = document.getElementById('help-modal-body');
         const helpClose = document.getElementById('help-close-btn');
 
+        // Sections open by default — everything after "Notes" starts collapsed
+        const HELP_OPEN_SECTIONS = new Set(['Header Controls', 'Chat', 'Sessions', 'Notes']);
+
+        function makeCollapsible(container) {
+            const h2s = Array.from(container.querySelectorAll('h2'));
+            for (const h2 of h2s) {
+                const title = h2.textContent.trim();
+                const details = document.createElement('details');
+                if (HELP_OPEN_SECTIONS.has(title)) details.open = true;
+
+                const summary = document.createElement('summary');
+                summary.textContent = title;
+                details.appendChild(summary);
+
+                // Collect all following siblings until the next h2
+                const siblings = [];
+                let node = h2.nextSibling;
+                while (node && node.nodeName !== 'H2') {
+                    siblings.push(node);
+                    node = node.nextSibling;
+                }
+                for (const sib of siblings) details.appendChild(sib);
+
+                h2.parentNode.replaceChild(details, h2);
+            }
+        }
+
         async function openHelp() {
             helpBody.textContent = 'Loading…';
             helpModal.classList.add('open');
@@ -895,6 +922,7 @@
                 helpBody.querySelectorAll('a').forEach(a => {
                     a.target = '_blank'; a.rel = 'noopener noreferrer';
                 });
+                makeCollapsible(helpBody);
             } catch (err) {
                 helpBody.textContent = `Failed to load help: ${err.message}`;
             }
diff --git a/cortex/static/style.css b/cortex/static/style.css
index 504810a..62fb467 100644
--- a/cortex/static/style.css
+++ b/cortex/static/style.css
@@ -898,6 +898,43 @@
             font-weight: 600;
         }
 
+        /* ── Help modal collapsible sections ────────────────────── */
+        #help-modal-body details {
+            border-bottom: 1px solid var(--border);
+        }
+        #help-modal-body details:last-of-type { border-bottom: none; }
+
+        #help-modal-body summary {
+            cursor: pointer;
+            padding: 10px 4px;
+            font-size: 1.0em;
+            font-weight: 600;
+            color: var(--accent);
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            user-select: none;
+            list-style: none;
+        }
+        #help-modal-body summary::-webkit-details-marker { display: none; }
+
+        #help-modal-body summary::before {
+            content: '▶';
+            font-size: 0.6em;
+            opacity: 0.55;
+            transition: transform 0.15s;
+            flex-shrink: 0;
+        }
+        #help-modal-body details[open] > summary::before {
+            transform: rotate(90deg);
+        }
+        #help-modal-body summary:hover { color: var(--text); }
+
+        /* Content inside a details block gets a little left indent */
+        #help-modal-body details > *:not(summary) {
+            padding-left: 12px;
+        }
+
         /* ── Auth warning banner ─────────────────────────────────── */
         #auth-banner {
             display: none;