Extract Wisdom

**/.venv
**/venv
**/__pycache__
**/*.pyc
**/*.pyo
**/*.pyd
**/*.log
**/*.cache
**/*.tmp
**/*.onnx
**/*.bin
**/*.txt

#!/usr/bin/env python3
# /// script
# requires-python = ">=3.12"
# dependencies = [
#   "onnx-asr[cpu,hub] @ git+https://github.com/istupakov/onnx-asr.git",
# ]
# ///
"""Transcribe audio to text using NVIDIA Parakeet TDT v2 (ONNX INT8).

Standalone script called by wisdom.py as a fallback when YouTube subtitles
are not available. Uses Silero VAD for segmenting long audio files and
WeSpeaker embeddings for automatic speaker detection.

The model and dependencies are only downloaded on first use (~2.5 GB model).
Runs on CPU at ~36x real-time on modern hardware (a 1-hour video takes ~100s).

Usage:
    uv run transcribe.py <audio_file> <output_file>
"""

from __future__ import annotations

import argparse
import os
import sys
import wave
from pathlib import Path


def _suppress_ort_logging() -> None:
    """Suppress noisy ONNX Runtime and CoreML warnings."""
    os.environ["ORT_LOG_LEVEL"] = "3"
    os.environ["COREML_DELEGATE_NO_SYNC"] = "1"


def _create_session_options():
    """Create ONNX Runtime session options using all available CPU cores."""
    import onnxruntime as rt

    sess = rt.SessionOptions()
    sess.log_severity_level = 3
    cpu_count = os.cpu_count() or 4
    sess.intra_op_num_threads = cpu_count
    sess.inter_op_num_threads = min(4, cpu_count)
    return sess


# Force CPU-only to avoid CoreML memory bloat on macOS.
_PROVIDERS = ["CPUExecutionProvider"]


def _load_wav_audio(audio_path: Path):
    """Load WAV file as a float32 numpy array and sample rate."""
    import numpy as np

    with wave.open(str(audio_path), "rb") as wf:
        sample_rate = wf.getframerate()
        n_channels = wf.getnchannels()
        sampwidth = wf.getsampwidth()
        frames = wf.readframes(wf.getnframes())

    if sampwidth == 2:
        audio = np.frombuffer(frames, dtype=np.int16).astype(np.float32) / 32768.0
    elif sampwidth == 4:
        audio = np.frombuffer(frames, dtype=np.int32).astype(np.float32) / 2147483648.0
    elif sampwidth == 1:
        audio = np.frombuffer(frames, dtype=np.uint8).astype(np.float32) / 128.0 - 1.0
    else:
        raise ValueError(f"Unsupported WAV sample width: {sampwidth}")

    if n_channels > 1:
        audio = audio.reshape(-1, n_channels).mean(axis=1)

    return audio, sample_rate


def _detect_speakers(segments, audio, sample_rate, sess_options) -> list[int]:
    """Assign speaker IDs to each segment using WeSpeaker embeddings.

    Uses greedy cosine-similarity clustering: each new segment is compared
    against existing speaker centroids. If the best match exceeds the
    threshold it is assigned to that speaker, otherwise a new speaker is
    created. Segments shorter than 1 second are assigned to the nearest
    neighbour since short clips produce unreliable embeddings.
    """
    import numpy as np
    from onnx_asr.loader import Manager  # type: ignore[arg-type]

    manager = Manager(sess_options=sess_options, providers=_PROVIDERS)
    se = manager.create_se("wespeaker/wespeaker-voxceleb-resnet34")

    min_duration = 1.0
    threshold = 0.65
    embeddings: list = [None] * len(segments)
    valid_indices: list[int] = []

    for i, seg in enumerate(segments):
        duration = seg.end - seg.start
        if duration < min_duration:
            continue
        start_sample = int(seg.start * sample_rate)
        end_sample = int(seg.end * sample_rate)
        segment_audio = audio[start_sample:end_sample]
        if len(segment_audio) < int(sample_rate * min_duration):
            continue
        embeddings[i] = se.embedding(segment_audio, sample_rate=sample_rate)
        valid_indices.append(i)

    if len(valid_indices) < 2:
        return [0] * len(segments)

    # Greedy clustering against running speaker centroids.
    speaker_ids = [-1] * len(segments)
    centroids: list = []
    centroid_counts: list[int] = []

    for i in valid_indices:
        emb = embeddings[i]
        if emb is None:
            continue
        best_speaker = -1
        best_sim = -1.0
        for s_id, centroid in enumerate(centroids):
            norm = float(np.linalg.norm(emb) * np.linalg.norm(centroid))
            if norm == 0:
                continue
            sim = float(np.dot(emb, centroid) / norm)
            if sim > best_sim:
                best_sim = sim
                best_speaker = s_id

        if best_sim >= threshold and best_speaker >= 0:
            speaker_ids[i] = best_speaker
            n = centroid_counts[best_speaker]
            centroids[best_speaker] = (centroids[best_speaker] * n + emb) / (n + 1)
            centroid_counts[best_speaker] += 1
        else:
            speaker_ids[i] = len(centroids)
            centroids.append(np.copy(emb))
            centroid_counts.append(1)

    # Assign short/skipped segments to their nearest resolved neighbour.
    for i in range(len(segments)):
        if speaker_ids[i] >= 0:
            continue
        for delta in range(1, len(segments)):
            for j in (i - delta, i + delta):
                if 0 <= j < len(segments) and speaker_ids[j] >= 0:
                    speaker_ids[i] = speaker_ids[j]
                    break
            if speaker_ids[i] >= 0:
                break
        if speaker_ids[i] < 0:
            speaker_ids[i] = 0

    # Merge tiny clusters into their nearest significant speaker.
    # Speakers with < 3% of total segments (min 3) are noise from tone
    # shifts, background audio, etc.
    min_cluster = max(3, int(len(segments) * 0.03))
    from collections import Counter
    counts = Counter(speaker_ids)
    small_ids = {s for s, c in counts.items() if c < min_cluster}
    if small_ids and len(counts) - len(small_ids) >= 1:
        large_ids = [s for s in counts if s not in small_ids]
        remap: dict[int, int] = {}
        for s_id in small_ids:
            best_target = large_ids[0]
            best_sim = -1.0
            for t_id in large_ids:
                norm = float(np.linalg.norm(centroids[s_id]) * np.linalg.norm(centroids[t_id]))
                if norm == 0:
                    continue
                sim = float(np.dot(centroids[s_id], centroids[t_id]) / norm)
                if sim > best_sim:
                    best_sim = sim
                    best_target = t_id
            remap[s_id] = best_target
        speaker_ids = [remap.get(s, s) for s in speaker_ids]

        # Re-number speaker IDs to be contiguous from 0.
        unique_sorted = sorted(set(speaker_ids))
        renumber = {old: new for new, old in enumerate(unique_sorted)}
        speaker_ids = [renumber[s] for s in speaker_ids]

    return speaker_ids


def transcribe(audio_path: Path) -> str:
    """Transcribe audio using Parakeet TDT v2 INT8 with Silero VAD."""
    import onnx_asr  # type: ignore[import-untyped]

    _suppress_ort_logging()
    sess_options = _create_session_options()

    print("Loading model...", file=sys.stderr)
    model = onnx_asr.load_model(
        "nemo-parakeet-tdt-0.6b-v2",
        quantization="int8",
        sess_options=sess_options,
        providers=_PROVIDERS,
    )

    vad = onnx_asr.load_vad(
        "silero", sess_options=sess_options, providers=_PROVIDERS,
    )
    model = model.with_vad(
        vad,
        max_speech_duration_s=60.0,
        min_silence_duration_ms=2000.0,
        speech_pad_ms=100.0,
    )

    print("Transcribing...", file=sys.stderr)
    segments = list(model.recognize(str(audio_path)))
    print(f"Transcribed {len(segments)} segments", file=sys.stderr)

    if not segments:
        return ""

    # Detect multiple speakers via WeSpeaker embeddings.
    try:
        audio, sample_rate = _load_wav_audio(audio_path)
        speaker_ids = _detect_speakers(segments, audio, sample_rate, sess_options)
        num_speakers = len(set(speaker_ids))
    except Exception:
        speaker_ids = [0] * len(segments)
        num_speakers = 1

    # Extract text and matching speaker IDs, skipping empty segments.
    texts: list[str] = []
    text_speaker_ids: list[int] = []
    for seg, spk in zip(segments, speaker_ids):
        text = seg.text.strip() if hasattr(seg, "text") else str(seg).strip()
        if text:
            texts.append(text)
            text_speaker_ids.append(spk)

    # Strip overlapping prefix words between consecutive segments.
    for i in range(1, len(texts)):
        prev_words = texts[i - 1].split()
        curr_words = texts[i].split()
        max_overlap = min(8, len(prev_words), len(curr_words))
        best = 0
        for n in range(1, max_overlap + 1):
            if [w.lower() for w in prev_words[-n:]] == [w.lower() for w in curr_words[:n]]:
                best = n
        if best > 0:
            texts[i] = " ".join(curr_words[best:])

    parts: list[str] = []
    multi = num_speakers > 1
    for text, spk in zip(texts, text_speaker_ids):
        if not text:
            continue
        if multi:
            parts.append(f"Speaker {spk + 1}: {text}")
        else:
            parts.append(text)

    return "\n\n".join(parts)


def main() -> None:
    parser = argparse.ArgumentParser(
        description="Transcribe audio using Parakeet TDT v2 (ONNX INT8)",
    )
    parser.add_argument("audio_file", help="Path to audio file (WAV format)")
    parser.add_argument("output_file", help="Output transcript file path")

    args = parser.parse_args()
    audio_path = Path(args.audio_file)
    output_path = Path(args.output_file)

    if not audio_path.is_file():
        print(f"Error: Audio file not found: {audio_path}", file=sys.stderr)
        sys.exit(1)

    text = transcribe(audio_path)

    if not text.strip():
        print("Error: Transcription produced no text", file=sys.stderr)
        sys.exit(1)

    output_path.write_text(text, encoding="utf-8")
    print(f"TRANSCRIPT_PATH: {output_path}")


if __name__ == "__main__":
    main()

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="wisdom-index-version" content="$SCHEMA_VERSION$" />
  <meta name="generated-date" content="$GENERATED_DATE$" />
  <title>Wisdom Library</title>
  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='8' y='12' width='10' height='40' rx='2' fill='%23d97757'/%3E%3Crect x='21' y='8' width='10' height='44' rx='2' fill='%23b54c30'/%3E%3Crect x='34' y='14' width='10' height='38' rx='2' fill='%23d97757'/%3E%3Crect x='47' y='10' width='10' height='42' rx='2' fill='%23c4853c'/%3E%3Crect x='5' y='50' width='55' height='4' rx='1' fill='%23141413'/%3E%3C/svg%3E" />
  <style>
    :root {
      --colour-bg: #faf9f5;
      --colour-surface: #ffffff;
      --colour-text: #141413;
      --colour-muted: #6b6560;
      --colour-accent: #d97757;
      --colour-accent-hover: #c6613f;
      --colour-border: #e8e6dc;
      --colour-header-bg: #141413;
      --colour-header-text: #faf9f5;
      --colour-accent-light: #fdf0e8;
      --colour-bg-code: #f5f3ed;
      --colour-bg-quote: #faf9f5;
      --colour-quote-bar: #d97757;
      --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
      /* --font-serif: Georgia, "Times New Roman", Palatino, serif; */
      --font-serif: "Iowan Old Style", Georgia, "Times New Roman", Palatino, serif;
      --max-width: 2400px;
      --card-gap: 1.875rem;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: var(--font-sans);
      background: var(--colour-bg);
      color: var(--colour-text);
      line-height: 1.6;
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
    }

    header {
      background: var(--colour-header-bg);
      color: var(--colour-header-text);
      padding: 0.75rem 2.25rem;
    }

    .header-inner {
      max-width: var(--max-width);
      margin: 0 auto;
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .header-left {
      flex-shrink: 0;
    }

    header h1 {
      font-size: 1.35rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      margin-bottom: 0;
      line-height: 1.3;
    }

    .subtitle {
      color: #b0aea5;
      font-size: 0.8rem;
    }

    .search-container {
      position: relative;
      width: 320px;
      margin-left: auto;
      flex-shrink: 0;
    }

    .search-icon {
      position: absolute;
      left: 0.75rem;
      top: 50%;
      transform: translateY(-50%);
      color: #87867f;
      pointer-events: none;
      display: flex;
      align-items: center;
    }

    #search {
      width: 100%;
      padding: 0.6rem 1rem 0.6rem 2.5rem;
      font-size: 0.95rem;
      font-family: var(--font-sans);
      border: 1px solid #3d3d3a;
      border-radius: 6px;
      background: #2a2a28;
      color: var(--colour-header-text);
      outline: none;
      transition: border-color 0.2s;
    }

    #search:focus { border-color: var(--colour-accent); }
    #search::placeholder { color: #87867f; }

    .controls {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 1rem 2.25rem;
      display: flex;
      align-items: center;
      gap: 0.75rem;
      flex-wrap: wrap;
    }

    .filter-pill {
      padding: 0.3rem 0.75rem;
      font-size: 0.8rem;
      font-family: var(--font-sans);
      border: 1px solid var(--colour-border);
      border-radius: 100px;
      background: var(--colour-surface);
      color: var(--colour-muted);
      cursor: pointer;
      transition: all 0.15s;
      user-select: none;
    }

    .filter-pill:hover {
      border-color: var(--colour-accent);
      color: var(--colour-accent);
    }

    .filter-pill.active {
      background: var(--colour-accent);
      border-color: var(--colour-accent);
      color: white;
    }

    .filter-pill[data-filter="youtube"] {
      border-color: #fecaca;
      color: #dc2626;
      background: #fee2e2;
    }
    .filter-pill[data-filter="youtube"]:hover {
      border-color: #dc2626;
    }
    .filter-pill[data-filter="youtube"].active {
      background: #dc2626;
      border-color: #dc2626;
      color: white;
    }

    .filter-pill[data-filter="web"] {
      border-color: #bfdbfe;
      color: #2563eb;
      background: #dbeafe;
    }
    .filter-pill[data-filter="web"]:hover {
      border-color: #2563eb;
    }
    .filter-pill[data-filter="web"].active {
      background: #2563eb;
      border-color: #2563eb;
      color: white;
    }

    .filter-pill[data-filter="text"] {
      border-color: #d1cfc5;
      color: var(--colour-muted);
      background: #e8e6dc;
    }
    .filter-pill[data-filter="text"]:hover {
      border-color: var(--colour-muted);
    }
    .filter-pill[data-filter="text"].active {
      background: var(--colour-muted);
      border-color: var(--colour-muted);
      color: white;
    }

    mark {
      background: #fef3c7;
      color: inherit;
      border-radius: 2px;
      padding: 0 1px;
    }

    .tag-chip-row {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      flex: 1 1 320px;
      min-width: 0;
    }

    .tag-chip-row:empty { display: none; }

    .tag-chip-divider {
      border-left: 1px solid var(--colour-border);
      height: 1.2em;
      margin: 0 0.25rem;
      flex-shrink: 0;
    }

    .tag-chip-list {
      display: flex;
      flex: 1;
      min-width: 0;
      gap: 0.4rem;
      flex-wrap: nowrap;
      overflow: hidden;
    }

    .tag-chip-row.expanded .tag-chip-list {
      flex-wrap: wrap;
      overflow: visible;
    }

    .tag-chip-label {
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--colour-muted);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-right: 0.25rem;
    }

    .tag-chip {
      font-family: var(--font-sans);
      font-size: 0.75rem;
      line-height: 1;
      padding: 0.3rem 0.65rem;
      border: 1px solid var(--colour-border);
      border-radius: 100px;
      background: var(--colour-surface);
      color: var(--colour-muted);
      cursor: pointer;
      transition: all 0.15s;
      user-select: none;
      flex-shrink: 0;
      white-space: nowrap;
    }

    .tag-chip:hover {
      border-color: var(--colour-accent);
      color: var(--colour-accent);
    }

    .tag-chip.active {
      background: var(--colour-accent);
      border-color: var(--colour-accent);
      color: white;
    }

    .tag-chip-clear {
      font-family: var(--font-sans);
      font-size: 0.72rem;
      padding: 0.25rem 0.55rem;
      border: 1px dashed var(--colour-border);
      border-radius: 100px;
      background: transparent;
      color: var(--colour-muted);
      cursor: pointer;
      flex-shrink: 0;
      white-space: nowrap;
    }

    .tag-chip-clear:hover {
      color: var(--colour-accent);
      border-color: var(--colour-accent);
    }

    .card-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.3rem;
      flex: 1;
      min-width: 0;
      overflow: hidden;
      max-height: 1.6em;
    }

    .card-tag {
      font-size: 0.7rem;
      padding: 0.15rem 0.5rem;
      border-radius: 100px;
      background: var(--colour-bg-code);
      color: var(--colour-muted);
      cursor: pointer;
      border: 1px solid transparent;
      white-space: nowrap;
    }

    .card-tag:hover {
      border-color: var(--colour-accent);
      color: var(--colour-accent);
    }

    .card-tag.active {
      background: var(--colour-accent);
      color: white;
    }

    .related-panel {
      margin-top: 1.4em;
      padding-top: 1em;
      border-top: 1px solid var(--colour-border);
    }

    .related-panel-title {
      font-family: var(--font-sans);
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--colour-muted);
      margin-bottom: 0.5em;
    }

    .related-list {
      display: flex;
      flex-direction: column;
      gap: 0.4em;
    }

    .related-item {
      display: flex;
      flex-direction: column;
      padding: 0.5em 0.7em;
      border: 1px solid var(--colour-border);
      border-radius: 6px;
      cursor: pointer;
      transition: border-color 0.15s, box-shadow 0.15s;
      font-family: var(--font-sans);
    }

    .related-item:hover {
      border-color: var(--colour-accent);
      box-shadow: 0 1px 6px rgba(217, 119, 87, 0.08);
    }

    .related-item-title {
      font-size: 0.92em;
      font-weight: 600;
      color: var(--colour-text);
      margin-bottom: 0.15em;
    }

    .related-item-meta {
      font-size: 0.75em;
      color: var(--colour-muted);
    }

    .related-item-meta strong {
      color: var(--colour-text);
      font-weight: 600;
    }

    .entry-count {
      margin-left: auto;
      font-size: 0.85rem;
      color: var(--colour-muted);
    }

    main {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 2.25rem 3rem;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(506px, 1fr));
      gap: var(--card-gap);
    }

    .card {
      background: var(--colour-surface);
      border: 1px solid var(--colour-border);
      border-radius: 8px;
      padding: 1.5rem;
      transition: border-color 0.2s, box-shadow 0.2s;
      display: flex;
      flex-direction: column;
      text-decoration: none;
      color: inherit;
    }

    .card:hover {
      border-color: var(--colour-accent);
      box-shadow: 0 2px 12px rgba(217, 119, 87, 0.1);
    }

    .card-body {
      cursor: pointer;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .card-header {
      margin-bottom: 0.3rem;
    }

    .card-title {
      font-size: 1.05rem;
      font-weight: 600;
      line-height: 1.3;
      color: #2a2a28;
      flex: 1;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .source-badge {
      font-size: 0.65rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding: 0.2rem 0.5rem;
      border-radius: 4px;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .source-badge.youtube { background: #fee2e2; color: #dc2626; }
    .source-badge.web { background: #dbeafe; color: #2563eb; }
    .source-badge.text { background: #e8e6dc; color: var(--colour-muted); }

    .card-meta {
      font-size: 0.875rem;
      color: var(--colour-muted);
      margin-bottom: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .card-thumbnail {
      width: 102px;
      height: 76px;
      object-fit: cover;
      border-radius: 4px;
      flex-shrink: 0;
    }

    .card-header-row {
      display: flex;
      gap: 0.6rem;
      margin-bottom: 0.5rem;
    }

    .card-header-text {
      flex: 1;
      min-width: 0;
    }

    .card-description {
      font-family: var(--font-serif);
      font-size: 1.05rem;
      font-weight: 400;
      color: #302f2b;
      line-height: 1.5;
      flex: 1;
      display: -webkit-box;
      -webkit-line-clamp: 7;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .card-actions {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-top: 0.75rem;
      padding-top: 0.5rem;
      border-top: 1px solid var(--colour-border);
    }

    .btn-action {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.25rem 0.6rem;
      font-size: 0.75rem;
      font-family: var(--font-sans);
      color: var(--colour-muted);
      background: none;
      border: 1px solid var(--colour-border);
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.15s;
      text-decoration: none;
    }

    .btn-action:hover {
      color: var(--colour-accent);
      border-color: var(--colour-accent);
    }

    .no-results {
      grid-column: 1 / -1;
      text-align: center;
      padding: 3rem 1rem;
      color: var(--colour-muted);
      font-size: 1.1rem;
    }

    footer {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 1rem 2.25rem 2rem;
      font-size: 0.8rem;
      color: #b0aea5;
      text-align: center;
      border-top: 1px solid var(--colour-border);
    }

    /* ---- Viewer overlay ---- */

    .viewer-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: rgba(20, 20, 19, 0.6);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }

    .viewer-overlay.open {
      display: flex;
      justify-content: center;
      padding: 2rem;
    }

    .viewer-chrome {
      width: 100%;
      max-width: 1050px;
      background: var(--colour-surface);
      border-radius: 10px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      max-height: 100%;
      /* Shift left so the 1030px content area is visually centred, not the full chrome */
      transform: translateX(-110px);
    }

    @media (max-width: 1540px) {
      .viewer-chrome {
        max-width: 1030px;
        transform: none;
      }
    }

    .viewer-toolbar {
      display: flex;
      align-items: center;
      padding: 0.6rem 1rem;
      border-bottom: 1px solid var(--colour-border);
      background: var(--colour-bg);
      flex-shrink: 0;
      gap: 0.75rem;
    }

    .viewer-title {
      font-weight: 600;
      font-size: 0.95rem;
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
    }

    .viewer-toolbar-actions {
      display: flex;
      gap: 0.4rem;
      flex-shrink: 0;
    }

    .btn-toolbar {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      padding: 0.3rem 0.6rem;
      font-size: 0.75rem;
      font-family: var(--font-sans);
      color: var(--colour-muted);
      background: none;
      border: 1px solid var(--colour-border);
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.15s;
      text-decoration: none;
    }

    .btn-toolbar:hover {
      color: var(--colour-accent);
      border-color: var(--colour-accent);
    }

    .btn-close {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      font-size: 1.2rem;
      font-family: var(--font-sans);
      color: var(--colour-muted);
      background: none;
      border: 1px solid var(--colour-border);
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.15s;
      line-height: 1;
    }

    .btn-close:hover {
      color: var(--colour-accent);
      border-color: var(--colour-accent);
    }

    .viewer-scroll {
      flex: 1;
      overflow-y: auto;
      padding: 2rem 2.5rem;
    }

    /* ---- Viewer content (adapted from wisdom-pdf.css) ---- */

    .viewer-content {
      font-family: var(--font-serif);
      color: var(--colour-text);
      line-height: 1.65;
      font-size: 1.1rem;
    }

    .viewer-content h1, .viewer-content h2,
    .viewer-content h3, .viewer-content h4,
    .viewer-content h5, .viewer-content h6 {
      font-family: var(--font-sans);
      color: var(--colour-text);
      margin-top: 1.6em;
      margin-bottom: 0.5em;
      line-height: 1.25;
    }

    .viewer-content h1 {
      font-size: 1.65em;
      font-weight: 700;
      letter-spacing: -0.02em;
      margin-top: 0;
      margin-bottom: 0.6em;
      padding-bottom: 0.4em;
      border-bottom: 2.5px solid var(--colour-accent);
    }

    .viewer-content h1 + p,
    .viewer-content h1 + p + p,
    .viewer-content h1 + p + p + p,
    .viewer-content h1 + p + p + p + p {
      display: none;
    }

    .viewer-content h2 {
      font-size: 1.4em;
      font-weight: 600;
      color: var(--colour-accent);
      padding-bottom: 0.2em;
      border-bottom: 1px solid var(--colour-border);
    }

    .viewer-content h3 {
      font-size: 1.15em;
      font-weight: 600;
    }

    .viewer-content h4 {
      font-size: 1em;
      font-weight: 600;
      color: var(--colour-muted);
    }

    .viewer-content p {
      margin: 0.6em 0;
    }

    .viewer-content strong { font-weight: 700; }
    .viewer-content em { font-style: italic; }

    .viewer-content a {
      color: var(--colour-accent);
      text-decoration: none;
    }

    .viewer-content a:hover {
      text-decoration: underline;
    }

    .viewer-content ul, .viewer-content ol {
      margin: 0.5em 0;
      padding-left: 1.6em;
    }

    .viewer-content ul { list-style-type: disc; }
    .viewer-content ol { list-style-type: decimal; }

    .viewer-content li {
      margin-bottom: 0.3em;
    }

    .viewer-content li > ul,
    .viewer-content li > ol {
      margin-top: 0.2em;
      margin-bottom: 0.1em;
    }

    .viewer-content li > ul { list-style-type: circle; }

    .viewer-content li > ul > li {
      font-size: 0.95em;
      color: var(--colour-muted);
    }

    .viewer-content blockquote {
      margin: 1.2em 0;
      padding: 0.8em 1.2em;
      border-left: 4px solid var(--colour-quote-bar);
      background: var(--colour-bg-quote);
      font-style: italic;
      font-size: 1.05em;
      color: #3d3530;
      border-radius: 0 6px 6px 0;
    }

    .viewer-content blockquote p { margin: 0.3em 0; }

    .viewer-content blockquote + p {
      font-size: 0.9em;
      color: var(--colour-muted);
      margin-top: 0.3em;
    }

    .viewer-content code {
      font-family: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
      font-size: 0.88em;
      background: var(--colour-bg-code);
      padding: 0.15em 0.35em;
      border-radius: 3px;
    }

    .viewer-content pre {
      background: var(--colour-bg-code);
      border: 1px solid var(--colour-border);
      border-radius: 5px;
      padding: 0.9em 1.1em;
      margin: 1em 0;
      font-size: 0.85em;
      line-height: 1.5;
      overflow-x: auto;
    }

    .viewer-content pre code {
      background: none;
      padding: 0;
      border-radius: 0;
      font-size: inherit;
    }

    .viewer-content table {
      width: 100%;
      border-collapse: collapse;
      margin: 1em 0;
      font-size: 0.92em;
    }

    .viewer-content thead {
      background: var(--colour-accent);
      color: #fff;
    }

    .viewer-content th {
      font-family: var(--font-sans);
      font-weight: 600;
      padding: 0.6em 0.8em;
      text-align: left;
    }

    .viewer-content td {
      padding: 0.5em 0.8em;
      border-bottom: 1px solid var(--colour-border);
    }

    .viewer-content tbody tr:nth-child(even) {
      background: var(--colour-bg-quote);
    }

    .viewer-content hr {
      border: none;
      border-top: 1px solid var(--colour-border);
      margin: 2em 0;
    }

    .viewer-content img {
      max-width: 100%;
      height: auto;
      margin: 1em auto;
      display: block;
      border-radius: 4px;
    }

    .viewer-content .mermaid-diagram,
    .viewer-content .graphviz-diagram {
      margin: 1.2em 0;
      text-align: center;
      overflow-x: auto;
    }

    .viewer-content .mermaid-diagram svg,
    .viewer-content .graphviz-diagram svg {
      max-width: 100%;
      height: auto;
    }

    .viewer-meta {
      margin-bottom: 1.5em;
      padding-bottom: 1em;
      border-bottom: 1px solid var(--colour-border);
    }

    .viewer-meta-description {
      font-family: var(--font-serif);
      font-size: 0.9em;
      color: #3d3530;
      line-height: 1.5;
      margin-bottom: 0.6em;
    }

    .viewer-meta-details {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.4em;
      font-family: var(--font-sans);
      font-size: 0.82em;
      color: var(--colour-muted);
    }

    .viewer-meta-details a {
      color: var(--colour-accent);
      text-decoration: none;
    }

    .viewer-meta-details a:hover {
      text-decoration: underline;
    }

    .viewer-meta-sep {
      color: var(--colour-border);
    }

    .viewer-content > p:last-child em,
    .viewer-content > p:last-of-type em {
      font-family: var(--font-sans);
      font-size: 0.85em;
      color: #b0aea5;
      font-style: normal;
      display: block;
      text-align: center;
      margin-top: 2em;
      padding-top: 1em;
      border-top: 1px solid var(--colour-border);
    }

    /* ---- Viewer TOC sidebar ---- */

    .viewer-body {
      display: flex;
      flex: 1;
      overflow: hidden;
    }

    .viewer-toc {
      width: max-content;
      max-width: 220px;
      flex-shrink: 0;
      overflow-y: auto;
      border-right: 1px solid var(--colour-border);
      padding: 1rem 0;
      background: var(--colour-bg);
      font-size: 0.8rem;
    }

    .viewer-toc:empty {
      display: none;
    }

    .viewer-toc-title {
      font-size: 0.65rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--colour-muted);
      padding: 0 0.75rem 0.5rem;
    }

    .viewer-toc a {
      display: block;
      padding: 0.25rem 0.75rem;
      color: var(--colour-muted);
      text-decoration: none;
      line-height: 1.35;
      border-left: 2px solid transparent;
      transition: all 0.15s;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .viewer-toc a:hover {
      color: var(--colour-text);
      background: var(--colour-accent-light);
    }

    .viewer-toc a.active {
      color: var(--colour-accent);
      border-left-color: var(--colour-accent);
      font-weight: 700;
      background: var(--colour-accent-light);
    }

    .viewer-toc a.toc-h2 {
      color: var(--colour-accent);
      font-weight: 600;
    }

    .viewer-toc a.toc-h2:hover {
      color: var(--colour-accent-hover);
    }

    .viewer-toc a.toc-h3 {
      padding-left: 1.5rem;
      font-size: 0.75rem;
    }

    @media (max-width: 600px) {
      .grid { grid-template-columns: 1fr; }
      .header-inner { flex-direction: column; align-items: stretch; }
      .search-container { width: 100%; margin-left: 0; }
      header { padding: 0.75rem 1rem; }
      .controls { padding: 0.75rem 1rem; }
      main { padding: 0 1rem 2rem; }
      .viewer-overlay.open { padding: 0; }
      .viewer-chrome { border-radius: 0; max-width: 100%; }
      .viewer-scroll { padding: 1.25rem; }
      .viewer-title { font-size: 0.85rem; }
      .viewer-toc { display: none; }
    }
  </style>
</head>
<body>
  <header>
    <div class="header-inner">
      <div class="header-left">
        <a href="index.html" style="color:inherit;text-decoration:none"><h1>Wisdom Library</h1></a>
        <p class="subtitle">Extracted insights and analysis</p>
      </div>
      <div class="search-container">
        <span class="search-icon">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
               stroke="currentColor" stroke-width="2" stroke-linecap="round"
               stroke-linejoin="round">
            <circle cx="11" cy="11" r="8"/>
            <line x1="21" y1="21" x2="16.65" y2="16.65"/>
          </svg>
        </span>
        <input type="text" id="search"
               placeholder="Search by title, author, or topic..."
               autocomplete="off" />
      </div>
    </div>
  </header>

  <div class="controls">
    <button class="filter-pill active" data-filter="all">All</button>
    <button class="filter-pill" data-filter="youtube">YouTube</button>
    <button class="filter-pill" data-filter="web">Web</button>
    <button class="filter-pill" data-filter="text">Text</button>
    <span style="border-left:1px solid var(--colour-border);height:1.2em;margin:0 0.25rem"></span>
    <span style="font-size:0.8rem;color:var(--colour-muted);">Sort:</span>
    <button class="filter-pill active" data-sort="date">Date</button>
    <button class="filter-pill" data-sort="author">Author</button>
    <button class="filter-pill" data-sort="source">Source</button>
    <div class="tag-chip-row" id="tag-chip-row"></div>
    <span class="entry-count" id="entry-count"></span>
  </div>

  <main>
    <div class="grid" id="grid"></div>
  </main>

  <footer>
    Last updated $GENERATED_DATE$
  </footer>

  <div class="viewer-overlay" id="viewer-overlay">
    <div class="viewer-chrome">
      <div class="viewer-toolbar">
        <span class="viewer-title" id="viewer-title"></span>
        <div class="viewer-toolbar-actions" id="viewer-actions"></div>
      </div>
      <div class="viewer-body">
        <nav class="viewer-toc" id="viewer-toc"></nav>
        <div class="viewer-scroll">
          <div class="viewer-content" id="viewer-content"></div>
        </div>
      </div>
    </div>
  </div>

  <script>
    /* ---- Data (injected by wisdom.py) ---- */
    var WISDOM_ENTRIES = $ENTRIES_JSON$;
    var WISDOM_TAG_FREQ = $TAG_FREQ_JSON$;

    /* ---- State ---- */
    var activeFilter = "all";
    var activeSort = "date";
    var activeTags = new Set();
    var searchQuery = "";
    var fuse = null;
    var MAX_VISIBLE_TAG_CHIPS = 18;
    var tagChipsExpanded = false;

    /* ---- Elements ---- */
    var grid = document.getElementById("grid");
    var searchInput = document.getElementById("search");
    var entryCount = document.getElementById("entry-count");
    var filterPills = document.querySelectorAll(".filter-pill[data-filter]");
    var sortPills = document.querySelectorAll(".filter-pill[data-sort]");
    var tagChipRow = document.getElementById("tag-chip-row");
    var viewerOverlay = document.getElementById("viewer-overlay");
    var viewerTitleEl = document.getElementById("viewer-title");
    var viewerActions = document.getElementById("viewer-actions");
    var viewerContent = document.getElementById("viewer-content");
    var viewerToc = document.getElementById("viewer-toc");
    var viewerScrollEl = null;

    /* ---- SVG icons ---- */
    var folderSvg = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none"'
      + ' stroke="currentColor" stroke-width="2" stroke-linecap="round"'
      + ' stroke-linejoin="round">'
      + '<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>'
      + '</svg>';
    var mdSvg = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none"'
      + ' stroke="currentColor" stroke-width="2" stroke-linecap="round"'
      + ' stroke-linejoin="round">'
      + '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>'
      + '<polyline points="14 2 14 8 20 8"/>'
      + '<line x1="16" y1="13" x2="8" y2="13"/>'
      + '<line x1="16" y1="17" x2="8" y2="17"/>'
      + '<polyline points="10 9 9 9 8 9"/>'
      + '</svg>';
    var pdfSvg = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none"'
      + ' stroke="currentColor" stroke-width="2" stroke-linecap="round"'
      + ' stroke-linejoin="round">'
      + '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>'
      + '<polyline points="14 2 14 8 20 8"/>'
      + '<path d="M9 15v-2h1.5a1.5 1.5 0 0 0 0-3H9v5"/>'
      + '</svg>';

    var copySvg = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none"'
      + ' stroke="currentColor" stroke-width="2" stroke-linecap="round"'
      + ' stroke-linejoin="round">'
      + '<rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>'
      + '<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>'
      + '</svg>';
    var checkSvg = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none"'
      + ' stroke="currentColor" stroke-width="2" stroke-linecap="round"'
      + ' stroke-linejoin="round">'
      + '<polyline points="20 6 9 17 4 12"/>'
      + '</svg>';

    /* ---- Open folder in Finder ---- */
    function openFolder(btn) {
      var href = btn.getAttribute("href");
      var resolved = new URL(href, window.location.href);
      var fsPath = decodeURIComponent(resolved.pathname);
      navigator.clipboard.writeText(fsPath).then(function() {
        var orig = btn.innerHTML;
        btn.innerHTML = checkSvg + ' Path copied';
        setTimeout(function() { btn.innerHTML = orig; }, 2000);
      });
      window.open(resolved.href, "_blank");
    }

    /* ---- Search ---- */
    function initFuse() {
      if (typeof Fuse !== "undefined") {
        fuse = new Fuse(WISDOM_ENTRIES, {
          keys: [
            { name: "title", weight: 0.3 },
            { name: "tags", weight: 0.25 },
            { name: "description", weight: 0.18 },
            { name: "author", weight: 0.15 },
            { name: "youtube_channel", weight: 0.06 },
            { name: "og_site_name", weight: 0.04 },
            { name: "source_type", weight: 0.02 }
          ],
          threshold: 0.35,
          ignoreLocation: true
        });
      }
    }

    function search(query, entries) {
      if (!query.trim()) return entries;
      if (fuse) {
        // Search the full corpus then intersect against the pre-filtered entries
        // so tag/source filters compose with the search query correctly.
        var allowed = new Set(entries.map(function(e) { return e.dir_path; }));
        return fuse.search(query)
          .map(function(r) { return r.item; })
          .filter(function(e) { return allowed.has(e.dir_path); });
      }
      var q = query.toLowerCase();
      return entries.filter(function(e) {
        return (e.title || "").toLowerCase().indexOf(q) !== -1
            || (e.author || "").toLowerCase().indexOf(q) !== -1
            || (e.description || "").toLowerCase().indexOf(q) !== -1
            || (e.source_type || "").toLowerCase().indexOf(q) !== -1
            || ((e.tags || []).some(function(t) {
                 return t.toLowerCase().indexOf(q) !== -1;
               }));
      });
    }

    /* ---- Utilities ---- */
    function escapeHtml(str) {
      var d = document.createElement("div");
      d.textContent = str;
      return d.innerHTML;
    }

    function highlightText(str, query) {
      var escaped = escapeHtml(str);
      if (!query || !query.trim()) return escaped;
      var words = query.trim().split(/\s+/).filter(function(w) { return w.length > 1; });
      if (!words.length) return escaped;
      var pattern = words.map(function(w) {
        return w.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
      }).join('|');
      return escaped.replace(new RegExp('(' + pattern + ')', 'gi'), '<mark>$1</mark>');
    }

    function safeCssClass(str) {
      return (str || "").replace(/[^a-z0-9-]/g, "");
    }

    function safeHref(path) {
      return path.split("/").map(encodeURIComponent).join("/");
    }

    /* ---- Tag chips ----
       Layout: divider | "Tags" label | tag-chip-list (clipped horizontally
       when collapsed, wraps when expanded) | More toggle | Clear button.
    */
    function renderTagChips() {
      if (!tagChipRow) return;
      if (!Array.isArray(WISDOM_TAG_FREQ) || !WISDOM_TAG_FREQ.length) {
        tagChipRow.innerHTML = "";
        tagChipRow.classList.remove("expanded");
        return;
      }
      tagChipRow.classList.toggle("expanded", tagChipsExpanded);
      var html = '<span class="tag-chip-divider"></span>'
        + '<span class="tag-chip-label">Tags</span>'
        + '<div class="tag-chip-list">';
      for (var i = 0; i < WISDOM_TAG_FREQ.length; i++) {
        var entry = WISDOM_TAG_FREQ[i];
        var tag = entry[0];
        var count = entry[1];
        var active = activeTags.has(tag);
        html += '<button class="tag-chip' + (active ? ' active' : '')
          + '" data-tag="' + escapeHtml(tag) + '" type="button">'
          + escapeHtml(tag)
          + ' <span style="opacity:0.6">' + count + '</span>'
          + '</button>';
      }
      html += '</div>';
      var toggleLabel = tagChipsExpanded ? 'Show fewer' : 'More';
      html += '<button class="tag-chip-clear" id="tag-chip-toggle" type="button">'
        + toggleLabel + '</button>';
      if (activeTags.size) {
        html += '<button class="tag-chip-clear" id="tag-chip-clear" type="button">Clear tags</button>';
      }
      tagChipRow.innerHTML = html;
    }

    function toggleTag(tag) {
      if (activeTags.has(tag)) activeTags.delete(tag);
      else activeTags.add(tag);
      renderTagChips();
      render();
    }

    /* ---- Rendering ---- */
    function render() {
      var entries = WISDOM_ENTRIES;

      if (activeFilter !== "all") {
        entries = entries.filter(function(e) {
          return e.source_type === activeFilter;
        });
      }

      if (activeTags.size) {
        entries = entries.filter(function(e) {
          if (!e.tags || !e.tags.length) return false;
          var entryTags = new Set(e.tags);
          var ok = true;
          activeTags.forEach(function(t) {
            if (!entryTags.has(t)) ok = false;
          });
          return ok;
        });
      }

      entries = search(searchQuery, entries);

      entries = entries.slice().sort(function(a, b) {
        if (activeSort === "date") {
          return (b.date || "").localeCompare(a.date || "");
        }
        if (activeSort === "author") {
          var aa = (a.author && a.author !== "Unknown") ? a.author.toLowerCase() : "zzz";
          var ba = (b.author && b.author !== "Unknown") ? b.author.toLowerCase() : "zzz";
          return aa.localeCompare(ba);
        }
        if (activeSort === "source") {
          var as = (a.youtube_channel || a.og_site_name || "zzz").toLowerCase();
          var bs = (b.youtube_channel || b.og_site_name || "zzz").toLowerCase();
          return as.localeCompare(bs);
        }
        return 0;
      });

      var total = WISDOM_ENTRIES.length;
      var shown = entries.length;
      entryCount.textContent = shown === total
        ? total + " " + (total === 1 ? "entry" : "entries")
        : shown + " of " + total;

      /* Hide filter pills for source types that have no entries */
      var types = {};
      WISDOM_ENTRIES.forEach(function(e) { types[e.source_type] = true; });
      filterPills.forEach(function(pill) {
        var f = pill.getAttribute("data-filter");
        if (f !== "all" && !types[f]) pill.style.display = "none";
      });

      if (entries.length === 0) {
        grid.innerHTML = '<div class="no-results">No matching entries found.</div>';
        return;
      }

      grid.innerHTML = entries.map(function(e) {
        var badgeClass = safeCssClass(e.source_type || "text");
        var badgeLabel = e.source_type || "unknown";
        var metaParts = [];
        if (e.author && e.author !== "Unknown") metaParts.push(highlightText(e.author, searchQuery));
        var siteName = e.youtube_channel || e.og_site_name || "";
        if (siteName && siteName !== e.author) metaParts.push(highlightText(siteName, searchQuery));
        if (e.content_date) metaParts.push("Published " + escapeHtml(e.content_date));
        if (e.date) metaParts.push((e.content_date ? "Analysed " : "") + escapeHtml(e.date));
        if (e.reading_time) metaParts.push(e.reading_time + " min read");

        var thumbSrc = e.thumbnail.indexOf("data:") === 0
          ? e.thumbnail
          : safeHref(e.thumbnail);
        var thumbImg = e.thumbnail
          ? '<img class="card-thumbnail" src="' + thumbSrc
            + '" alt="" loading="lazy" />'
          : '';

        var headerContent = '<div class="card-header-text">'
          + '<span class="card-title">' + highlightText(e.title, searchQuery) + '</span>'
          + (metaParts.length
             ? '<div class="card-meta">' + metaParts.join(" &middot; ") + '</div>'
             : '')
          + '</div>';

        var tagsHtml = '';
        if (e.tags && e.tags.length) {
          tagsHtml = '<div class="card-tags">'
            + e.tags.map(function(t) {
                var active = activeTags.has(t);
                return '<span class="card-tag' + (active ? ' active' : '')
                  + '" data-tag="' + escapeHtml(t) + '">' + escapeHtml(t) + '</span>';
              }).join('')
            + '</div>';
        }

        return '<div class="card">'
          + '<div class="card-body" data-dir="' + escapeHtml(e.dir_path) + '">'
          + '<div class="card-header-row">'
          + headerContent
          + thumbImg
          + '</div>'
          + (e.description
             ? '<div class="card-description">' + highlightText(e.description, searchQuery) + '</div>'
             : '')
          + '</div>'
          + '<div class="card-actions">'
          + '<span class="source-badge ' + badgeClass + '">'
          + escapeHtml(badgeLabel) + '</span>'
          + tagsHtml
          + (e.pdf_path
             ? '<a class="btn-action" href="' + safeHref(e.pdf_path) + '" target="_blank" title="Open PDF">'
               + pdfSvg + ' PDF</a>'
             : '')
          + '<a class="btn-action" href="' + safeHref(e.md_path) + '" target="_blank" title="Open markdown">'
          + mdSvg + ' Markdown</a>'
          + '<a class="btn-action folder-btn" href="' + safeHref(e.dir_path) + '/" title="Copy folder path">'
          + folderSvg + ' Folder</a>'
          + '</div>'
          + '</div>';
      }).join("");
    }

    /* ---- Mermaid rendering ---- */
    var mermaidCounter = 0;
    function renderMermaidBlocks() {
      if (typeof mermaid === "undefined") return;
      var codeBlocks = viewerContent.querySelectorAll('code.language-mermaid');
      codeBlocks.forEach(function(codeEl) {
        var pre = codeEl.parentElement;
        if (!pre || pre.tagName !== "PRE") return;
        var graphDef = codeEl.textContent;
        var id = "mermaid-" + (++mermaidCounter);
        mermaid.render(id, graphDef).then(function(result) {
          var container = document.createElement("div");
          container.className = "mermaid-diagram";
          container.innerHTML = result.svg;
          pre.replaceWith(container);
        }).catch(function() {
          /* leave as code block if mermaid fails to parse */
        });
      });
    }

    /* ---- Graphviz rendering ---- */
    function renderGraphvizBlocks() {
      if (typeof Viz === "undefined" || !Viz.instance) return;
      var codeBlocks = viewerContent.querySelectorAll(
        'code.language-graphviz, code.language-dot'
      );
      if (!codeBlocks.length) return;
      Viz.instance().then(function(viz) {
        codeBlocks.forEach(function(codeEl) {
          var pre = codeEl.parentElement;
          if (!pre || pre.tagName !== "PRE") return;
          var dotSrc = codeEl.textContent;
          try {
            var svgEl = viz.renderSVGElement(dotSrc);
            svgEl.removeAttribute("width");
            svgEl.removeAttribute("height");
            var container = document.createElement("div");
            container.className = "graphviz-diagram";
            container.appendChild(svgEl);
            pre.replaceWith(container);
          } catch (err) {
            /* leave as code block if graphviz fails to parse */
          }
        });
      }).catch(function() {
        /* viz.js failed to initialise */
      });
    }

    /* ---- TOC generation and scroll spy ---- */
    function buildToc() {
      var headings = viewerContent.querySelectorAll("h2, h3");
      if (headings.length < 2) { viewerToc.innerHTML = ""; return; }
      var html = '<div class="viewer-toc-title">Contents</div>';
      headings.forEach(function(h, i) {
        var id = "toc-" + i;
        h.id = id;
        var level = h.tagName.toLowerCase();
        html += '<a href="#' + id + '" class="toc-' + level + '" data-toc-id="' + id + '">'
          + escapeHtml(h.textContent) + '</a>';
      });
      viewerToc.innerHTML = html;

      viewerToc.querySelectorAll("a").forEach(function(link) {
        link.addEventListener("click", function(ev) {
          ev.preventDefault();
          var target = document.getElementById(this.getAttribute("data-toc-id"));
          if (target && viewerScrollEl) {
            var rect = target.getBoundingClientRect();
            var containerRect = viewerScrollEl.getBoundingClientRect();
            viewerScrollEl.scrollTo({
              top: viewerScrollEl.scrollTop + rect.top - containerRect.top - 12,
              behavior: "smooth"
            });
          }
        });
      });

      if (viewerScrollEl) {
        viewerScrollEl.removeEventListener("scroll", tocScrollSpy);
        viewerScrollEl.addEventListener("scroll", tocScrollSpy);
      }
    }

    function tocScrollSpy() {
      if (!viewerScrollEl) return;
      var headings = viewerContent.querySelectorAll("h2[id], h3[id]");
      var containerRect = viewerScrollEl.getBoundingClientRect();
      var activeId = "";
      headings.forEach(function(h) {
        var rect = h.getBoundingClientRect();
        if (rect.top <= containerRect.top + 60) activeId = h.id;
      });
      var links = viewerToc.querySelectorAll("a");
      links.forEach(function(link) {
        link.classList.toggle("active", link.getAttribute("data-toc-id") === activeId);
      });
      var activeLink = viewerToc.querySelector("a.active");
      if (activeLink) {
        var tocRect = viewerToc.getBoundingClientRect();
        var linkRect = activeLink.getBoundingClientRect();
        if (linkRect.top < tocRect.top || linkRect.bottom > tocRect.bottom) {
          activeLink.scrollIntoView({ block: "center", behavior: "smooth" });
        }
      }
    }

    /* ---- Viewer ---- */
    function openViewer(entry) {
      if (!entry) return;

      viewerTitleEl.textContent = entry.title;

      var btns = '';
      if (entry.pdf_path) {
        btns += '<a class="btn-toolbar" href="' + safeHref(entry.pdf_path) + '" target="_blank" title="Open PDF">'
          + pdfSvg + ' PDF</a>';
      }
      btns += '<a class="btn-toolbar" href="' + safeHref(entry.md_path) + '" target="_blank" title="Open raw markdown">'
        + mdSvg + ' Markdown</a>';
      btns += '<a class="btn-toolbar folder-btn" href="' + safeHref(entry.dir_path) + '/" title="Copy folder path">'
        + folderSvg + ' Folder</a>';
      btns += '<button class="btn-toolbar" id="viewer-copy-btn" title="Copy markdown to clipboard">'
        + copySvg + ' Copy</button>';
      btns += '<button class="btn-close" id="viewer-close-btn" title="Close (Esc)">&times;</button>';
      viewerActions.innerHTML = btns;

      document.getElementById("viewer-copy-btn").addEventListener("click", function() {
        var btn = this;
        navigator.clipboard.writeText(entry.body || "").then(function() {
          btn.innerHTML = checkSvg + ' Copied';
          setTimeout(function() { btn.innerHTML = copySvg + ' Copy'; }, 2000);
        });
      });
      document.getElementById("viewer-close-btn").addEventListener("click", closeViewer);
      var vFolderBtn = viewerActions.querySelector(".folder-btn");
      if (vFolderBtn) {
        vFolderBtn.addEventListener("click", function(ev) {
          ev.preventDefault(); openFolder(this);
        });
      }

      viewerOverlay.classList.add("open");
      document.body.style.overflow = "hidden";

      history.pushState(
        { viewer: entry.dir_path },
        "",
        "#view/" + encodeURIComponent(entry.dir_path)
      );

      var metaHtml = '<div class="viewer-meta">';
      if (entry.description) {
        metaHtml += '<p class="viewer-meta-description">' + escapeHtml(entry.description) + '</p>';
      }
      var metaItems = [];
      if (entry.source) {
        var sourceLabel = entry.youtube_channel || entry.og_site_name || entry.source;
        metaItems.push('<span>Source: <a href="' + escapeHtml(entry.source) + '" target="_blank" rel="noopener">'
          + escapeHtml(sourceLabel) + '</a></span>');
      }
      if (entry.content_date) metaItems.push('<span>Published: ' + escapeHtml(entry.content_date) + '</span>');
      if (entry.date) metaItems.push('<span>Analysed: ' + escapeHtml(entry.date) + '</span>');
      if (metaItems.length) {
        metaHtml += '<div class="viewer-meta-details">' + metaItems.join('<span class="viewer-meta-sep">&middot;</span>') + '</div>';
      }
      metaHtml += '</div>';

      var relatedHtml = '';
      if (entry.related && entry.related.length) {
        relatedHtml = '<div class="related-panel">'
          + '<div class="related-panel-title">Related</div>'
          + '<div class="related-list">'
          + entry.related.slice(0, 6).map(function(r) {
              var why = r.why === "both"
                ? "shared tags + similar content"
                : r.why === "tags"
                ? "shared tags" + (r.shared_tags && r.shared_tags.length
                    ? ": " + r.shared_tags.join(", ") : "")
                : "similar content";
              return '<div class="related-item" data-related-dir="' + escapeHtml(r.dir_path) + '">'
                + '<div class="related-item-title">' + escapeHtml(r.title || r.dir_path) + '</div>'
                + '<div class="related-item-meta">' + escapeHtml(why) + '</div>'
                + '</div>';
            }).join('')
          + '</div></div>';
      }

      if (typeof marked !== "undefined") {
        viewerContent.innerHTML = metaHtml + marked.parse(entry.body || "") + relatedHtml;
      } else {
        viewerContent.innerHTML = metaHtml + '<pre style="white-space:pre-wrap;font-family:inherit">'
          + escapeHtml(entry.body || "") + '</pre>' + relatedHtml;
      }

      viewerContent.querySelectorAll(".related-item[data-related-dir]").forEach(function(el) {
        el.addEventListener("click", function() {
          var dir = this.getAttribute("data-related-dir");
          var target = findEntryByDir(dir);
          if (target) openViewer(target);
        });
      });
      renderMermaidBlocks();
      renderGraphvizBlocks();
      buildToc();
      viewerScrollEl = viewerContent.closest(".viewer-scroll");
      viewerScrollEl.scrollTop = 0;
    }

    function closeViewer() {
      viewerOverlay.classList.remove("open");
      document.body.style.overflow = "";
      if (location.hash.indexOf("#view/") === 0) {
        history.pushState({}, "", location.pathname + location.search);
      }
    }

    function findEntryByDir(dir) {
      for (var i = 0; i < WISDOM_ENTRIES.length; i++) {
        if (WISDOM_ENTRIES[i].dir_path === dir) return WISDOM_ENTRIES[i];
      }
      return null;
    }

    function checkHash() {
      var hash = location.hash;
      if (hash.indexOf("#view/") === 0) {
        var dir = decodeURIComponent(hash.slice(6));
        var entry = findEntryByDir(dir);
        if (entry) openViewer(entry);
      }
    }

    /* ---- Events ---- */
    searchInput.addEventListener("input", function() {
      searchQuery = this.value;
      render();
    });

    filterPills.forEach(function(pill) {
      pill.addEventListener("click", function() {
        filterPills.forEach(function(p) { p.classList.remove("active"); });
        this.classList.add("active");
        activeFilter = this.getAttribute("data-filter");
        render();
      });
    });

    sortPills.forEach(function(pill) {
      pill.addEventListener("click", function() {
        sortPills.forEach(function(p) { p.classList.remove("active"); });
        this.classList.add("active");
        activeSort = this.getAttribute("data-sort");
        render();
      });
    });

    grid.addEventListener("click", function(ev) {
      var folderBtn = ev.target.closest(".folder-btn");
      if (folderBtn) { ev.preventDefault(); openFolder(folderBtn); return; }
      var tagEl = ev.target.closest(".card-tag[data-tag]");
      if (tagEl) {
        ev.stopPropagation();
        toggleTag(tagEl.getAttribute("data-tag"));
        return;
      }
      var body = ev.target.closest(".card-body[data-dir]");
      if (body) {
        var dir = body.getAttribute("data-dir");
        var entry = findEntryByDir(dir);
        if (entry) openViewer(entry);
      }
    });

    if (tagChipRow) {
      tagChipRow.addEventListener("click", function(ev) {
        var toggleBtn = ev.target.closest("#tag-chip-toggle");
        if (toggleBtn) {
          tagChipsExpanded = !tagChipsExpanded;
          renderTagChips();
          return;
        }
        var clearBtn = ev.target.closest("#tag-chip-clear");
        if (clearBtn) {
          activeTags.clear();
          renderTagChips();
          render();
          return;
        }
        var chip = ev.target.closest(".tag-chip[data-tag]");
        if (chip) {
          toggleTag(chip.getAttribute("data-tag"));
        }
      });
    }

    document.addEventListener("keydown", function(ev) {
      if (ev.key === "Escape") {
        if (searchInput.value) {
          searchInput.value = "";
          searchQuery = "";
          searchInput.blur();
          render();
          return;
        }
        if (viewerOverlay.classList.contains("open")) {
          closeViewer();
          return;
        }
      }
      if (ev.key === "k" && (ev.ctrlKey || ev.metaKey)) {
        ev.preventDefault();
        searchInput.focus();
        searchInput.select();
        return;
      }
      if ((ev.key === "f" || ev.key === "/") && !ev.ctrlKey && !ev.metaKey && !ev.altKey) {
        var tag = (document.activeElement || {}).tagName;
        if (tag !== "INPUT" && tag !== "TEXTAREA" && !(document.activeElement && document.activeElement.isContentEditable)) {
          ev.preventDefault();
          searchInput.focus();
        }
      }
    });

    viewerOverlay.addEventListener("click", function(ev) {
      if (ev.target === viewerOverlay) closeViewer();
    });

    window.addEventListener("popstate", function() {
      if (location.hash.indexOf("#view/") === 0) {
        checkHash();
      } else if (viewerOverlay.classList.contains("open")) {
        viewerOverlay.classList.remove("open");
        document.body.style.overflow = "";
      }
    });

    /* ---- Initialise ---- */
    (function() {
      var s = document.createElement("script");
      s.src = "https://cdn.jsdelivr.net/npm/fuse.js@7.1.0/dist/fuse.min.js";
      s.onload = function() { initFuse(); };
      document.head.appendChild(s);

      var m = document.createElement("script");
      m.src = "https://cdn.jsdelivr.net/npm/marked@17.0.5/lib/marked.umd.js";
      m.onload = function() {
        if (typeof marked !== "undefined" && marked.setOptions) {
          marked.setOptions({ gfm: true, breaks: false });
        }
      };
      document.head.appendChild(m);

      var mm = document.createElement("script");
      mm.src = "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js";
      mm.onload = function() {
        if (typeof mermaid !== "undefined") {
          mermaid.initialize({
            startOnLoad: false,
            theme: "base",
            themeVariables: {
              primaryColor: "#fdf0e8",
              primaryBorderColor: "#d97757",
              primaryTextColor: "#141413",
              lineColor: "#6b6560",
              secondaryColor: "#f5f3ed",
              tertiaryColor: "#faf9f5",
              fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif',
              fontSize: "14px"
            }
          });
        }
      };
      document.head.appendChild(mm);

      var gv = document.createElement("script");
      gv.src = "https://cdn.jsdelivr.net/npm/@viz-js/viz@3.11.0/lib/viz-standalone.js";
      document.head.appendChild(gv);

      renderTagChips();
      render();
      searchInput.focus();
      checkHash();
    })();
  </script>
</body>
</html>