feat(booth): render .md/.txt/.log inline in the gallery, collapsible + closable

Docs used to render as a clumsy link that navigated to a separate page. They
now render in place: build_gallery pre-renders each doc (markdown -> HTML,
plain text raw) and the gallery shows it inside a native <details open>
disclosure that spans the full grid width so prose has a readable measure.

The doc bar carries: a collapse chevron (the whole <details> summary toggles,
works with JS off), a full-page link (still reaches the standalone viewer), a
download link, and a session-close ✕. The ✕ needed stopPropagation +
preventDefault because it lives inside <summary> — otherwise its click would
toggle the disclosure instead of hiding the item. Close is JS (progressive
enhancement); collapse is native.

Two design points:
- Plain text is returned RAW from build_gallery and escaped by the template
  inside <pre>. Pre-escaping in Python plus Jinja autoescape would
  double-encode angle brackets; a test pins the single-escape.
- Inlining is bounded by DOC_MAX_BYTES. A doc over the limit keeps the old
  link-out behaviour rather than being rendered into every index load; a test
  covers the fallback.

The shared .markdown-body / .textview typography moved from doc.html's scoped
<style> into base.html so the inline body and the full-page view render
identically; doc.html keeps only its page-layout wrapper.

Updated the pre-existing test_gallery_links_docs_to_view: it asserted the old
link-out behaviour the operator asked to change, so it now asserts the inline
render plus the surviving full-page and download affordances. 61 pass.
Verified live: markdown renders with headings/table/blockquote/code, txt
preserves whitespace and single-escapes, collapse and ✕-close both work.

booth/app.py

@@ -269,13 +269,31 @@ def build_gallery(child: Path) -> list[dict]:
         if rel in sidecars:
             continue
         p = by_rel[rel]
+        dkind = doc_kind(p.name)
+        rendered = None
+        rendered_html = False
+        # Pre-render docs so the gallery can show them INLINE (collapsible)
+        # instead of linking out to a separate page. Bounded by DOC_MAX_BYTES:
+        # a giant log stays a download link rather than being inlined into every
+        # index render. Markdown → HTML (marked safe in the template); plain text
+        # is returned RAW and the template escapes it inside <pre> — pre-escaping
+        # here would double-encode under Jinja autoescape.
+        if dkind is not None:
+            try:
+                if p.stat().st_size <= DOC_MAX_BYTES:
+                    text = p.read_text(errors="replace")
+                    rendered, rendered_html = render_doc(text, dkind)
+            except OSError:
+                rendered = None
         items.append(
             {
                 "name": rel,
                 "kind": classify(p.name),
-                "doc": doc_kind(p.name),
+                "doc": dkind,
                 "url": quote(rel, safe="/"),
                 "caption": caption.get(rel),
+                "rendered": rendered,
+                "rendered_html": rendered_html,
             }
         )
     return items

booth/templates/base.html

@@ -212,6 +212,50 @@
   .item figcaption{padding:.6rem .85rem .75rem;color:var(--fg-2);font-size:.78rem;
     font-family:var(--font-mono);letter-spacing:.02em;border-top:1px solid var(--border-subtle);word-break:break-word}
   .item-audio figcaption,.item-other figcaption{border-top:none}
+
+  /* Inline doc rendering — a .md/.txt/.log shows in place, collapsible and
+     closable, instead of a link to a separate page. The item spans the full
+     grid width so prose has a readable measure. */
+  .item-doc{grid-column:1 / -1}
+  .item-doc.is-closed{display:none}
+  .doc-inline{display:block}
+  .doc-inline > .doc-bar{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.55rem;
+    padding:.6rem .85rem;font-family:var(--font-mono);font-size:.8rem;color:var(--fg-2);
+    background:var(--rk-well);border-bottom:1px solid var(--border-subtle);user-select:none}
+  .doc-inline > .doc-bar::-webkit-details-marker{display:none}
+  .doc-chevron{color:var(--fg-3);transition:transform .12s ease;font-size:.7rem}
+  .doc-inline[open] > .doc-bar .doc-chevron{transform:rotate(90deg)}
+  .doc-name{color:var(--fg-1);word-break:break-all}
+  .doc-spacer{flex:1}
+  .doc-act{color:var(--fg-3);text-decoration:none;padding:.1rem .35rem;border-radius:5px;
+    font-size:.9rem;line-height:1;background:none;border:0;cursor:pointer;font-family:inherit}
+  .doc-act:hover{color:var(--aus-bright-cyan,#42dcd1);background:var(--rk-deep)}
+  .doc-close:hover{color:var(--aus-red,#ff6b6b)}
+  .doc-body{margin:0;border:0;border-radius:0;max-height:32rem;overflow:auto;padding:1rem 1.15rem}
+  .doc-body.textview{background:var(--rk-panel)}
+
+  /* Shared doc typography — used by the inline body above AND the full-page
+     doc view (doc.html). Kept here so both surfaces render identically. */
+  .textview{white-space:pre-wrap;word-break:break-word;font-family:var(--font-mono);
+    font-size:.86rem;line-height:1.5;color:var(--fg-1);background:var(--rk-well);
+    border:1px solid var(--rk-line,#252a35);border-radius:10px;padding:1rem 1.15rem;overflow-x:auto}
+  .markdown-body{color:var(--fg-1);line-height:1.62;font-size:.98rem;overflow-wrap:break-word}
+  .markdown-body h1,.markdown-body h2,.markdown-body h3{line-height:1.25;margin:1.6em 0 .5em}
+  .markdown-body h1{font-size:1.7em}.markdown-body h2{font-size:1.35em}.markdown-body h3{font-size:1.12em}
+  .markdown-body h1,.markdown-body h2{border-bottom:1px solid var(--rk-line,#252a35);padding-bottom:.3em}
+  .markdown-body :first-child{margin-top:0}
+  .markdown-body p,.markdown-body ul,.markdown-body ol,.markdown-body blockquote{margin:.7em 0}
+  .markdown-body a{color:var(--aus-bright-cyan,#42dcd1)}
+  .markdown-body code{font-family:var(--font-mono);font-size:.86em;background:var(--rk-well);
+    padding:.12em .38em;border-radius:5px}
+  .markdown-body pre{background:var(--rk-well);border:1px solid var(--rk-line,#252a35);
+    border-radius:10px;padding:.9rem 1.05rem;overflow-x:auto}
+  .markdown-body pre code{background:none;padding:0}
+  .markdown-body blockquote{border-left:3px solid var(--aus-bright-cyan,#42dcd1);
+    padding-left:1em;color:var(--fg-2);margin-left:0}
+  .markdown-body table{border-collapse:collapse;display:block;overflow-x:auto}
+  .markdown-body th,.markdown-body td{border:1px solid var(--rk-line,#252a35);padding:.4em .7em}
+  .markdown-body img{max-width:100%}
 </style>
 </head>
 <body>

booth/templates/booth.html

@@ -25,6 +25,29 @@
 {% else %}
   <div class="gallery">
     {% for it in items %}
+    {% if it.doc and it.rendered is not none %}
+      {# Docs render INLINE, collapsible, and closable — not a link to a
+         separate page. <details open> is native collapse (works with JS off);
+         the ✕ hides the item for the session (JS, progressive enhancement).
+         The item spans the full grid width so prose has room to read. #}
+      <figure class="item item-doc" data-name="{{ it.name }}">
+        <details class="doc-inline" open>
+          <summary class="doc-bar">
+            <span class="doc-chevron" aria-hidden="true">▸</span>
+            <span class="doc-name">{{ it.name }}</span>
+            <span class="doc-spacer"></span>
+            <a class="doc-act" href="view?f={{ it.url }}" title="open full page">⤢</a>
+            <a class="doc-act" href="{{ it.url }}" download title="download {{ it.name }}">⬇</a>
+            <button type="button" class="doc-act doc-close" title="close (hide for now)" aria-label="close">✕</button>
+          </summary>
+          {% if it.rendered_html %}
+            <article class="markdown-body doc-body">{{ it.rendered|safe }}</article>
+          {% else %}
+            <pre class="textview doc-body">{{ it.rendered }}</pre>
+          {% endif %}
+        </details>
+      </figure>
+    {% else %}
     <figure class="item item-{{ it.kind }}">
       {% if it.kind == 'image' %}
         <a href="view?f={{ it.url }}"><img loading="lazy" src="{{ it.url }}" alt="{{ it.name }}"></a>
@@ -36,6 +59,7 @@
       {% elif it.kind == 'audio' %}
         <audio controls preload="none" src="{{ it.url }}"></audio>
       {% elif it.doc %}
+        {# a doc too large to inline (over DOC_MAX_BYTES) still links out #}
         <a class="dl doc" href="view?f={{ it.url }}" title="view {{ it.name }}">📄 {{ it.name }}</a>
       {% else %}
         <a class="dl" href="{{ it.url }}" download>⬇ {{ it.name }}</a>
@@ -49,6 +73,7 @@
         </figcaption>
       {% endif %}
     </figure>
+    {% endif %}
     {% endfor %}
   </div>
 {% endif %}
@@ -85,5 +110,21 @@
       });
     });
   })();
+
+  /* Inline-doc ✕ closes (hides) a rendered doc for the session. The button sits
+     inside <summary>, so without this its click would just toggle the <details>
+     open/closed — stopPropagation + preventDefault make ✕ mean "close", not
+     "collapse". Collapse stays available via the rest of the summary bar. With
+     JS off the button is inert and collapse via <details> still works. */
+  (function () {
+    document.querySelectorAll('.doc-close').forEach(function (btn) {
+      btn.addEventListener('click', function (ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        var item = btn.closest('.item-doc');
+        if (item) item.classList.add('is-closed');
+      });
+    });
+  })();
 </script>
 {% endblock %}

booth/templates/doc.html

@@ -15,26 +15,10 @@
   {% endif %}
 </div>
 <style>
+  /* .markdown-body and .textview now live in base.html (shared with the inline
+     gallery view). Only the full-page layout wrapper is page-specific. */
   .docview{max-width:52rem;margin:0 auto;padding:0 clamp(12px,3vw,20px) 4rem}
-  .textview{white-space:pre-wrap;word-break:break-word;font-family:var(--font-mono);
-    font-size:.86rem;line-height:1.5;color:var(--fg-1);background:var(--rk-well);
-    border:1px solid var(--rk-line,#252a35);border-radius:10px;padding:1rem 1.15rem;overflow-x:auto}
-  .markdown-body{color:var(--fg-1);line-height:1.62;font-size:.98rem;overflow-wrap:break-word}
-  .markdown-body h1,.markdown-body h2,.markdown-body h3{line-height:1.25;margin:1.6em 0 .5em}
-  .markdown-body h1{font-size:1.7em}.markdown-body h2{font-size:1.35em}.markdown-body h3{font-size:1.12em}
-  .markdown-body h1,.markdown-body h2{border-bottom:1px solid var(--rk-line,#252a35);padding-bottom:.3em}
-  .markdown-body p,.markdown-body ul,.markdown-body ol,.markdown-body blockquote{margin:.7em 0}
-  .markdown-body a{color:var(--aus-bright-cyan,#42dcd1)}
-  .markdown-body code{font-family:var(--font-mono);font-size:.86em;background:var(--rk-well);
-    padding:.12em .38em;border-radius:5px}
-  .markdown-body pre{background:var(--rk-well);border:1px solid var(--rk-line,#252a35);
-    border-radius:10px;padding:.9rem 1.05rem;overflow-x:auto}
-  .markdown-body pre code{background:none;padding:0}
-  .markdown-body blockquote{border-left:3px solid var(--aus-bright-cyan,#42dcd1);
-    padding-left:1em;color:var(--fg-2);margin-left:0}
-  .markdown-body table{border-collapse:collapse;display:block;overflow-x:auto}
-  .markdown-body th,.markdown-body td{border:1px solid var(--rk-line,#252a35);padding:.4em .7em}
-  .markdown-body img{max-width:100%}
+  .docview .textview{overflow-x:auto}
 </style>
 <script>
   document.addEventListener('keydown', function (e) {