Spaces:

CompactAI-O
/

CompactAI-Papers

Running

App Files Files Community

wop commited on 5 days ago

Commit

9149c92

verified ·

1 Parent(s): 47271a3

Update index.html

Browse files

Files changed (1) hide show

index.html +295 -174

index.html CHANGED Viewed

@@ -4,17 +4,13 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>CompactAI Papers</title>
   <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=Geist:wght@300..700&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="everywhere.css">
 </head>
 <body>
   <a href="#mainContent" class="skip-link">Skip to papers</a>
   <div class="sr-only" aria-live="polite" aria-atomic="true" id="announcer"></div>
   <header class="site-header">
@@ -22,16 +18,39 @@
       <h1 class="site-title">Compact<span class="gold">AI</span> Papers</h1>
       <p class="site-subtitle">Research &amp; ideas from the community</p>
       <div class="header-divider"></div>
     </div>
   </header>
   <main class="container" id="mainContent" aria-label="Papers collection">
     <h2 class="section-label">Papers</h2>
     <ul class="papers-grid" id="papersGrid" role="list"></ul>
   </main>
   <section class="papermaker-callout" aria-label="Papermaker role">
-    <p>Have an idea worth writing up? If a mod spots it and likes it, you might earn the <span class="role-name">@Papermaker</span> role &mdash; a nod that you helped push CompactAI forward.</p>
   </section>
   <footer class="site-footer">
@@ -42,229 +61,331 @@
   <script>
     var PAPERS = [
-  {
-    "id": "trueact-md",
-    "title": "TrueACT: A Different Kind of Neuron",
-    "date": "2026-05",
-    "author": "CompactAI",
-    "tags": [
-      "architecture",
-      "neurons",
-      "math",
-      "experimental"
-    ],
-    "proved": false,
-    "featured": true
-  },
-  {
-    "id": "STM_paper-md",
-    "title": "STM and the Circle Thing",
-    "date": "2026-05",
-    "author": "Dragonoid",
-    "tags": [
-      "training",
-      "experimental"
-    ],
-    "proved": true,
-    "featured": false,
-    "proof_script_content": "import torch\nimport torch.nn as nn\nimport torch.optim as optim\nimport random\nimport numpy as np\n\n# STM (Subtractive Training Method) - Definitive Proof\n# Fix: Added Mastery Floor to prevent premature hard-task removal.\n\nN_EASY, N_HARD = 1000, 250\nMASTERY_THRESHOLD = 0.15\nEPOCHS = 25\n\ndef generate_math(difficulty=\"easy\"):\n    if difficulty == \"easy\":\n        a, b = random.randint(0, 9), random.randint(0, 9)\n    else:\n        a, b = random.randint(10, 99), random.randint(10, 99)\n    return f\"{a}+{b}={a+b}\", difficulty\n\ntrain_raw = [generate_math(\"easy\") for _ in range(N_EASY)] + [generate_math(\"hard\") for _ in range(N_HARD)]\ntest_easy = [generate_math(\"easy\") for _ in range(200)]\ntest_hard = [generate_math(\"hard\") for _ in range(200)]\n\nchars = list(\"0123456789+=\") + [\"<PAD>\"]\nchar2idx = {c: i for i, c in enumerate(chars)}\nPAD_IDX, EQ_IDX = char2idx[\"<PAD>\"], char2idx[\"=\"]\n\ndef encode(data_list):\n    max_l = max(len(d[0]) for d in data_list)\n    X, Y = [], []\n    for text, _ in data_list:\n        enc = [char2idx[c] for c in text] + [PAD_IDX] * (max_l - len(text) + 1)\n        X.append(enc[:-1]); Y.append(enc[1:])\n    return torch.tensor(X), torch.tensor(Y)\n\nclass STM_Model(nn.Module):\n    def __init__(self, vocab_size, hidden_size=128):\n        super().__init__()\n        self.embedding = nn.Embedding(vocab_size, hidden_size)\n        self.rnn = nn.GRU(hidden_size, hidden_size, batch_first=True)\n        self.fc = nn.Linear(hidden_size, vocab_size)\n    def forward(self, x):\n        out, _ = self.rnn(self.embedding(x))\n        return self.fc(out)\n\nmodel = STM_Model(len(chars))\noptimizer = optim.Adam(model.parameters(), lr=0.003)\ncriterion = nn.CrossEntropyLoss(ignore_index=PAD_IDX, reduction='none')\n\ndef eval_acc(model, data_list):\n    model.eval()\n    X, Y = encode(data_list)\n    with torch.no_grad():\n        out = model(X).argmax(dim=-1)\n        correct = 0\n        for i in range(len(data_list)):\n            eq_pos = (X[i] == EQ_IDX).nonzero(as_tuple=True)[0].item()\n            pred = out[i, eq_pos:eq_pos+4]\n            target = Y[i, eq_pos:eq_pos+4]\n            mask = (target != PAD_IDX)\n            if torch.equal(pred[mask], target[mask]): correct += 1\n        return correct / len(data_list)\n\ndef get_metrics(model, data_list):\n    model.eval()\n    X, Y = encode(data_list)\n    with torch.no_grad():\n        out = model(X).view(-1, len(chars))\n        loss = criterion(out, Y.view(-1)).view(X.size(0), X.size(1))\n        ans_mask = ((X == EQ_IDX).cumsum(1) - (X == EQ_IDX).float()) * (Y != PAD_IDX).float()\n        return ((loss * ans_mask).sum(1) / (ans_mask.sum(1) + 1e-8)).numpy()\n\ncurrent_dataset = list(train_raw)\nprev_losses = get_metrics(model, current_dataset)\ntotal_tokens = 0\ninitial_tokens = len(train_raw) * 12\n\nprint(f\"{'Epoch':<5} | {'Pool(E/H)':<10} | {'Acc(E/H)':<12} | {'Efficiency'}\")\nprint(\"-\" * 50)\n\nfor epoch in range(1, EPOCHS + 1):\n    model.train()\n    X, Y = encode(current_dataset)\n    total_tokens += X.numel()\n    indices = np.random.permutation(len(current_dataset))\n    for i in range(0, len(current_dataset), 64):\n        idx = indices[i:i+64]\n        optimizer.zero_grad()\n        loss = nn.CrossEntropyLoss(ignore_index=PAD_IDX)(model(X[idx]).view(-1, len(chars)), Y[idx].view(-1))\n        loss.backward(); optimizer.step()\n\n    curr_losses = get_metrics(model, current_dataset)\n    drops = prev_losses - curr_losses\n    drop_cutoff = drops.mean() + (drops.std() * 0.5)\n\n    keep_indices = []\n    for i in range(len(current_dataset)):\n        # STM Rule: Drop if (Breakthrough AND mastered) OR (Near-perfect)\n        if (drops[i] > drop_cutoff and curr_losses[i] < 0.5) or curr_losses[i] < MASTERY_THRESHOLD:\n            pass\n        else:\n            keep_indices.append(i)\n\n    e_rem = sum(1 for _, l in current_dataset if l == \"easy\")\n    h_rem = sum(1 for _, l in current_dataset if l == \"hard\")\n    acc_e = eval_acc(model, test_easy)\n    acc_h = eval_acc(model, test_hard)\n    efficiency = (initial_tokens * epoch) / total_tokens\n\n    print(f\"{epoch:<5} | {e_rem:>4}/{h_rem:<4} | {acc_e:>5.1%}/{acc_h:<5.1%} | {efficiency:.2f}x\")\n\n    if not keep_indices: break\n    current_dataset = [current_dataset[i] for i in keep_indices]\n    prev_losses = curr_losses[keep_indices]\n\nprint(\"\\nSTM proof complete. The theory works — now with the Mastery Floor fix.\")\n"
-  },
-  {
-    "id": "apollonian_gasket-md",
-    "title": "Token Embeddings Inside an Integer Apollonian Gasket",
-    "date": "2026-05",
-    "author": "Mage",
-    "tags": [
-      "embeddings",
-      "geometry",
-      "number-theory",
-      "experimental"
-    ],
-    "proved": false,
-    "featured": false
-  },
-  {
-    "id": "overta_hypothesis-md",
-    "title": "The Overta Hypothesis: Knowledge-Free Foundation Models",
-    "date": "2026-05",
-    "author": "Amy",
-    "tags": [
-      "training",
-      "alignment",
-      "reasoning",
-      "experimental"
-    ],
-    "proved": false,
-    "featured": false
-  },
-  {
-    "id": "attention_experiment-md",
-    "title": "An Experiment With Attention",
-    "date": "2026-05",
-    "author": "wop",
-    "tags": [
-      "attention",
-      "benchmark",
-      "experimental"
-    ],
-    "proved": false,
-    "featured": false
-  },
-  {
-    "id": "sparrow_fant-md",
-    "title": "Sparrow, FANT, and the Weird Stuff That Works",
-    "date": "2026-05",
-    "author": "Crownelius",
-    "tags": [
-      "math",
-      "small-models",
-      "experimental"
-    ],
-    "proved": false,
-    "featured": false
-  }
-];
     (function() {
       var grid = document.getElementById('papersGrid');
-      // Announce messages to screen readers via aria-live region
       function announce(msg) {
         var el = document.getElementById('announcer');
         if (el) {
           el.textContent = '';
-          // Force re-announce by clearing then setting
           setTimeout(function() { el.textContent = msg; }, 50);
         }
       }
-      if (PAPERS.length === 0) {
-        grid.innerHTML = '<li class="empty-state" role="listitem"><p>No papers yet.</p></li>';
-        return;
       }
-      PAPERS.forEach(function(paper, i) {
-        grid.appendChild(createCard(paper, i));
-      });
       function createCard(paper, index) {
         var li = document.createElement('li');
         li.setAttribute('role', 'listitem');
-        var card = document.createElement('div');
         card.className = 'paper-card' + (paper.featured ? ' featured' : '');
         card.style.animationDelay = (index * 80) + 'ms';
-        card.setAttribute('tabindex', '0');
-        card.setAttribute('role', 'button');
         card.setAttribute('aria-label', 'Read paper: ' + paper.title);
-        if (paper.date) {
-          card.setAttribute('aria-describedby', 'meta-' + paper.id);
-        }
-        var tagsHtml = '';
-        if (paper.tags && paper.tags.length) {
-          tagsHtml = paper.tags.map(function(t) {
-            return '<span class="card-tag">' + escapeHtml(t) + '</span>';
-          }).join(' ');
-        }
         card.innerHTML =
           '<h3 class="card-title">' + escapeHtml(paper.title) + '</h3>' +
           (paper.author ? '<div class="card-author">' + escapeHtml(paper.author) + '</div>' : '') +
           '<div class="card-meta" id="meta-' + paper.id + '">' +
             (paper.date ? '<span>' + escapeHtml(paper.date) + '</span>' : '') +
-            tagsHtml +
-            (paper.proved ? '<span class="card-proved" aria-label="Theory proven">&check; PROVED</span>' : '') +
           '</div>' +
           '<span class="card-arrow" aria-hidden="true">&rarr;</span>';
-        // Tilt effect
-        card.addEventListener('mousemove', function(e) {
-          if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
-          var rect = card.getBoundingClientRect();
-          var x = e.clientX - rect.left;
-          var y = e.clientY - rect.top;
-          card.style.setProperty('--mx', x + 'px');
-          card.style.setProperty('--my', y + 'px');
-        });
-        card.addEventListener('mouseleave', function() {
-          card.style.removeProperty('--mx');
-          card.style.removeProperty('--my');
-        });
-        // Click handler
-        card.addEventListener('click', function() {
-          openPaper(paper, card);
-        });
-        // Keyboard handler: Enter or Space to activate
-        card.addEventListener('keydown', function(e) {
-          if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            openPaper(paper, card);
-          }
         });
         li.appendChild(card);
         return li;
       }
-      function openPaper(paper, triggerEl) {
-        var previousFocus = triggerEl || document.activeElement;
-        var overlay = document.createElement('div');
-        overlay.className = 'paper-overlay';
-        overlay.setAttribute('role', 'dialog');
-        overlay.setAttribute('aria-modal', 'true');
-        overlay.setAttribute('aria-label', 'Paper: ' + paper.title);
-        var view = document.createElement('div');
-        view.className = 'paper-view';
-        view.setAttribute('role', 'document');
-        view.innerHTML =
-          '<button class="paper-view-close" aria-label="Close paper viewer">&times;</button>' +
-          '<iframe class="paper-view-frame" title="' + escapeHtml(paper.title) + '" src="Papers/' + paper.id + '.html"></iframe>';
-        overlay.appendChild(view);
-        document.body.appendChild(overlay);
-        document.body.style.overflow = 'hidden';
-        var closeBtn = view.querySelector('.paper-view-close');
-        closeBtn.focus();
-        var close = function() {
-          overlay.style.opacity = '0';
-          overlay.style.transition = 'opacity 0.2s ease';
-          setTimeout(function() {
-            overlay.remove();
-            document.body.style.overflow = '';
-            if (previousFocus && typeof previousFocus.focus === 'function') {
-              previousFocus.focus();
-            }
-            announce('Paper viewer closed.');
-          }, 200);
-        };
         closeBtn.addEventListener('click', close);
-        overlay.addEventListener('click', function(e) {
-          if (e.target === overlay) close();
         });
         document.addEventListener('keydown', function handler(e) {
           if (e.key === 'Escape') {
             close();
             document.removeEventListener('keydown', handler);
           }
         });
       }
-      function escapeHtml(str) {
-        var div = document.createElement('div');
-        div.appendChild(document.createTextNode(str));
-        return div.innerHTML;
       }
     })();
   </script>
 </body>
 </html>

   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>CompactAI Papers</title>
   <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=Geist:wght@300..700&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="everything.css">
 </head>
 <body>
   <a href="#mainContent" class="skip-link">Skip to papers</a>
   <div class="sr-only" aria-live="polite" aria-atomic="true" id="announcer"></div>
   <header class="site-header">
       <h1 class="site-title">Compact<span class="gold">AI</span> Papers</h1>
       <p class="site-subtitle">Research &amp; ideas from the community</p>
       <div class="header-divider"></div>
+      <div class="toolbar" aria-label="Paper tools">
+        <label class="toolbar-search">
+          <span class="sr-only">Search papers</span>
+          <input id="paperSearch" type="search" placeholder="Search title, author, tags" autocomplete="off">
+        </label>
+        <label class="toolbar-select">
+          <span class="sr-only">Sort papers</span>
+          <select id="paperSort">
+            <option value="featured">Featured first</option>
+            <option value="newest">Newest first</option>
+            <option value="title">Title A to Z</option>
+            <option value="author">Author A to Z</option>
+          </select>
+        </label>
+        <button class="toolbar-chip is-active" type="button" data-filter="all">All</button>
+        <button class="toolbar-chip" type="button" data-filter="proved">Proved</button>
+        <button class="toolbar-chip" type="button" data-filter="featured">Featured</button>
+        <button class="toolbar-reset" type="button" id="resetFilters">Reset</button>
+      </div>
     </div>
   </header>
   <main class="container" id="mainContent" aria-label="Papers collection">
     <h2 class="section-label">Papers</h2>
     <ul class="papers-grid" id="papersGrid" role="list"></ul>
+    <p class="collection-status" id="collectionStatus" aria-live="polite"></p>
   </main>
   <section class="papermaker-callout" aria-label="Papermaker role">
+    <div class="container">
+      <p>Have an idea worth writing up? If a mod spots it and likes it, you might earn the <span class="role-name">@Papermaker</span> role &mdash; a nod that you helped push CompactAI forward.</p>
+    </div>
   </section>
   <footer class="site-footer">
   <script>
     var PAPERS = [
+      {
+        id: "trueact-md",
+        title: "TrueACT: A Different Kind of Neuron",
+        date: "2026-05",
+        author: "CompactAI",
+        tags: ["architecture", "neurons", "math", "experimental"],
+        proved: false,
+        featured: true
+      },
+      {
+        id: "STM_paper-md",
+        title: "STM and the Circle Thing",
+        date: "2026-05",
+        author: "Dragonoid",
+        tags: ["training", "experimental"],
+        proved: true,
+        featured: false,
+        proof_script_content: "import torch\nimport torch.nn as nn\nimport torch.optim as optim\nimport random\nimport numpy as np\n\n# STM (Subtractive Training Method) - Definitive Proof\n# Fix: Added Mastery Floor to prevent premature hard-task removal.\n\nN_EASY, N_HARD = 1000, 250\nMASTERY_THRESHOLD = 0.15\nEPOCHS = 25\n\ndef generate_math(difficulty=\"easy\"):\n    if difficulty == \"easy\":\n        a, b = random.randint(0, 9), random.randint(0, 9)\n    else:\n        a, b = random.randint(10, 99), random.randint(10, 99)\n    return f\"{a}+{b}={a+b}\", difficulty\n\ntrain_raw = [generate_math(\"easy\") for _ in range(N_EASY)] + [generate_math(\"hard\") for _ in range(N_HARD)]\ntest_easy = [generate_math(\"easy\") for _ in range(200)]\ntest_hard = [generate_math(\"hard\") for _ in range(200)]\n\nchars = list(\"0123456789+=\") + [\"<PAD>\"]\nchar2idx = {c: i for i, c in enumerate(chars)}\nPAD_IDX, EQ_IDX = char2idx[\"<PAD>\"], char2idx[\"=\"]\n\ndef encode(data_list):\n    max_l = max(len(d[0]) for d in data_list)\n    X, Y = [], []\n    for text, _ in data_list:\n        enc = [char2idx[c] for c in text] + [PAD_IDX] * (max_l - len(text) + 1)\n        X.append(enc[:-1]); Y.append(enc[1:])\n    return torch.tensor(X), torch.tensor(Y)\n\nclass STM_Model(nn.Module):\n    def __init__(self, vocab_size, hidden_size=128):\n        super().__init__()\n        self.embedding = nn.Embedding(vocab_size, hidden_size)\n        self.rnn = nn.GRU(hidden_size, hidden_size, batch_first=True)\n        self.fc = nn.Linear(hidden_size, vocab_size)\n    def forward(self, x):\n        out, _ = self.rnn(self.embedding(x))\n        return self.fc(out)\n\nmodel = STM_Model(len(chars))\noptimizer = optim.Adam(model.parameters(), lr=0.003)\ncriterion = nn.CrossEntropyLoss(ignore_index=PAD_IDX, reduction='none')\n\ndef eval_acc(model, data_list):\n    model.eval()\n    X, Y = encode(data_list)\n    with torch.no_grad():\n        out = model(X).argmax(dim=-1)\n        correct = 0\n        for i in range(len(data_list)):\n            eq_pos = (X[i] == EQ_IDX).nonzero(as_tuple=True)[0].item()\n            pred = out[i, eq_pos:eq_pos+4]\n            target = Y[i, eq_pos:eq_pos+4]\n            mask = (target != PAD_IDX)\n            if torch.equal(pred[mask], target[mask]): correct += 1\n        return correct / len(data_list)\n\ndef get_metrics(model, data_list):\n    model.eval()\n    X, Y = encode(data_list)\n    with torch.no_grad():\n        out = model(X).view(-1, len(chars))\n        loss = criterion(out, Y.view(-1)).view(X.size(0), X.size(1))\n        ans_mask = ((X == EQ_IDX).cumsum(1) - (X == EQ_IDX).float()) * (Y != PAD_IDX).float()\n        return ((loss * ans_mask).sum(1) / (ans_mask.sum(1) + 1e-8)).numpy()\n\ncurrent_dataset = list(train_raw)\nprev_losses = get_metrics(model, current_dataset)\ntotal_tokens = 0\ninitial_tokens = len(train_raw) * 12\n\nprint(f\"{'Epoch':<5} | {'Pool(E/H)':<10} | {'Acc(E/H)':<12} | {'Efficiency'}\")\nprint(\"-\" * 50)\n\nfor epoch in range(1, EPOCHS + 1):\n    model.train()\n    X, Y = encode(current_dataset)\n    total_tokens += X.numel()\n    indices = np.random.permutation(len(current_dataset))\n    for i in range(0, len(current_dataset), 64):\n        idx = indices[i:i+64]\n        optimizer.zero_grad()\n        loss = nn.CrossEntropyLoss(ignore_index=PAD_IDX)(model(X[idx]).view(-1, len(chars)), Y[idx].view(-1))\n        loss.backward(); optimizer.step()\n\n    curr_losses = get_metrics(model, current_dataset)\n    drops = prev_losses - curr_losses\n    drop_cutoff = drops.mean() + (drops.std() * 0.5)\n\n    keep_indices = []\n    for i in range(len(current_dataset)):\n        if (drops[i] > drop_cutoff and curr_losses[i] < 0.5) or curr_losses[i] < MASTERY_THRESHOLD:\n            pass\n        else:\n            keep_indices.append(i)\n\n    e_rem = sum(1 for _, l in current_dataset if l == \"easy\")\n    h_rem = sum(1 for _, l in current_dataset if l == \"hard\")\n    acc_e = eval_acc(model, test_easy)\n    acc_h = eval_acc(model, test_hard)\n    efficiency = (initial_tokens * epoch) / total_tokens\n\n    print(f\"{epoch:<5} | {e_rem:>4}/{h_rem:<4} | {acc_e:>5.1%}/{acc_h:<5.1%} | {efficiency:.2f}x\")\n\n    if not keep_indices: break\n    current_dataset = [current_dataset[i] for i in keep_indices]\n    prev_losses = curr_losses[keep_indices]\n\nprint(\"\\nSTM proof complete. The theory works — now with the Mastery Floor fix.\")"
+      },
+      {
+        id: "apollonian_gasket-md",
+        title: "Token Embeddings Inside an Integer Apollonian Gasket",
+        date: "2026-05",
+        author: "Mage",
+        tags: ["embeddings", "geometry", "number-theory", "experimental"],
+        proved: false,
+        featured: false
+      },
+      {
+        id: "overta_hypothesis-md",
+        title: "The Overta Hypothesis: Knowledge-Free Foundation Models",
+        date: "2026-05",
+        author: "Amy",
+        tags: ["training", "alignment", "reasoning", "experimental"],
+        proved: false,
+        featured: false
+      },
+      {
+        id: "attention_experiment-md",
+        title: "An Experiment With Attention",
+        date: "2026-05",
+        author: "wop",
+        tags: ["attention", "benchmark", "experimental"],
+        proved: false,
+        featured: false
+      },
+      {
+        id: "sparrow_fant-md",
+        title: "Sparrow, FANT, and the Weird Stuff That Works",
+        date: "2026-05",
+        author: "Crownelius",
+        tags: ["math", "small-models", "experimental"],
+        proved: false,
+        featured: false
+      }
+    ];
     (function() {
       var grid = document.getElementById('papersGrid');
+      var searchInput = document.getElementById('paperSearch');
+      var sortSelect = document.getElementById('paperSort');
+      var resetButton = document.getElementById('resetFilters');
+      var filterButtons = document.querySelectorAll('[data-filter]');
+      var collectionStatus = document.getElementById('collectionStatus');
+      var currentFilter = 'all';
+      var viewerContainer = null;
+      var modalState = null;
       function announce(msg) {
         var el = document.getElementById('announcer');
         if (el) {
           el.textContent = '';
           setTimeout(function() { el.textContent = msg; }, 50);
         }
       }
+      function escapeHtml(str) {
+        var div = document.createElement('div');
+        div.appendChild(document.createTextNode(str));
+        return div.innerHTML;
+      }
+      function getPaperById(paperId) {
+        for (var i = 0; i < PAPERS.length; i++) {
+          if (PAPERS[i].id === paperId) return PAPERS[i];
+        }
+        return null;
+      }
+      function matchesFilter(paper) {
+        if (currentFilter === 'proved' && !paper.proved) return false;
+        if (currentFilter === 'featured' && !paper.featured) return false;
+        return true;
+      }
+      function matchesSearch(paper, query) {
+        if (!query) return true;
+        return [paper.title, paper.author, paper.date, (paper.tags || []).join(' ')].join(' ').toLowerCase().indexOf(query) !== -1;
+      }
+      function sortPapers(items) {
+        var sorted = items.slice();
+        var sortValue = sortSelect.value;
+        sorted.sort(function(a, b) {
+          if (sortValue === 'title') return a.title.localeCompare(b.title);
+          if (sortValue === 'author') return (a.author || '').localeCompare(b.author || '');
+          if (sortValue === 'newest') return (b.date || '').localeCompare(a.date || '');
+          if (b.featured !== a.featured) return (b.featured ? 1 : 0) - (a.featured ? 1 : 0);
+          return 0;
+        });
+        return sorted;
+      }
+      function renderGrid() {
+        var query = searchInput.value.trim().toLowerCase();
+        var visible = sortPapers(PAPERS.filter(function(paper) {
+          return matchesFilter(paper) && matchesSearch(paper, query);
+        }));
+        grid.innerHTML = '';
+        if (visible.length === 0) {
+          grid.innerHTML = '<li class="empty-state" role="listitem"><p>No papers match these filters.</p><button type="button" id="clearEmptyState">Clear filters</button></li>';
+          document.getElementById('clearEmptyState').addEventListener('click', resetFilters);
+          collectionStatus.textContent = '0 papers shown.';
+          return;
+        }
+        visible.forEach(function(paper, index) {
+          grid.appendChild(createCard(paper, index));
+        });
+        collectionStatus.textContent = visible.length + ' papers shown.';
+      }
+      function setFilter(nextFilter) {
+        currentFilter = nextFilter;
+        filterButtons.forEach(function(button) {
+          button.classList.toggle('is-active', button.getAttribute('data-filter') === nextFilter);
+        });
+        renderGrid();
+      }
+      function resetFilters() {
+        currentFilter = 'all';
+        searchInput.value = '';
+        sortSelect.value = 'featured';
+        filterButtons.forEach(function(button) {
+          button.classList.toggle('is-active', button.getAttribute('data-filter') === 'all');
+        });
+        renderGrid();
+        announce('Filters cleared.');
+      }
+      function syncUrl(paperId) {
+        var url = new URL(window.location.href);
+        if (paperId) {
+          url.searchParams.set('paper', paperId);
+        } else {
+          url.searchParams.delete('paper');
+        }
+        window.history.pushState({ paper: paperId }, '', url.toString());
       }
       function createCard(paper, index) {
         var li = document.createElement('li');
         li.setAttribute('role', 'listitem');
+        var card = document.createElement('a');
         card.className = 'paper-card' + (paper.featured ? ' featured' : '');
         card.style.animationDelay = (index * 80) + 'ms';
+        card.href = '#paper-' + paper.id;
         card.setAttribute('aria-label', 'Read paper: ' + paper.title);
         card.innerHTML =
           '<h3 class="card-title">' + escapeHtml(paper.title) + '</h3>' +
           (paper.author ? '<div class="card-author">' + escapeHtml(paper.author) + '</div>' : '') +
           '<div class="card-meta" id="meta-' + paper.id + '">' +
             (paper.date ? '<span>' + escapeHtml(paper.date) + '</span>' : '') +
+            ((paper.tags || []).map(function(tag) {
+              return '<span class="card-tag">' + escapeHtml(tag) + '</span>';
+            }).join(' ')) +
+            (paper.proved ? '<span class="card-proved">&check; PROVED</span>' : '') +
           '</div>' +
           '<span class="card-arrow" aria-hidden="true">&rarr;</span>';
+        card.addEventListener('click', function(e) {
+          e.preventDefault();
+          openPaper(paper, card, true);
         });
         li.appendChild(card);
         return li;
       }
+      function openPaper(paper, triggerEl, pushState) {
+        closeViewer(false);
+        modalState = {
+          previousFocus: triggerEl || document.activeElement,
+          paper: paper
+        };
+        if (pushState !== false) syncUrl(paper.id);
+        viewerContainer = document.createElement('div');
+        viewerContainer.className = 'paper-overlay';
+        viewerContainer.setAttribute('role', 'dialog');
+        viewerContainer.setAttribute('aria-modal', 'true');
+        viewerContainer.setAttribute('aria-labelledby', 'paperDialogTitle');
+        viewerContainer.innerHTML =
+          '<div class="paper-view" role="document">' +
+            '<button class="paper-view-close" type="button" aria-label="Close paper viewer">&times;</button>' +
+            '<div class="paper-page">' +
+              '<div class="paper-page-shell">' +
+                '<h2 id="paperDialogTitle" class="paper-page-title">' + escapeHtml(paper.title) + '</h2>' +
+                '<div class="paper-page-meta">' + escapeHtml(paper.author || 'CompactAI') + (paper.date ? ' · ' + escapeHtml(paper.date) : '') + '</div>' +
+                '<div class="paper-page-actions">' +
+                  '<a class="paper-view-link" href="Papers/' + escapeHtml(paper.id) + '.html" target="_blank" rel="noopener">Open in new tab</a>' +
+                  '<button class="paper-view-link" type="button" data-action="copy">Copy link</button>' +
+                '</div>' +
+                '<iframe class="paper-view-frame" title="' + escapeHtml(paper.title) + '" src="Papers/' + paper.id + '.html"></iframe>' +
+              '</div>' +
+            '</div>' +
+          '</div>';
+        document.body.appendChild(viewerContainer);
+        document.body.style.overflow = 'hidden';
+        document.querySelector('main').setAttribute('inert', '');
+        var closeBtn = viewerContainer.querySelector('.paper-view-close');
+        var copyBtn = viewerContainer.querySelector('[data-action="copy"]');
+        var iframe = viewerContainer.querySelector('.paper-view-frame');
+        function close() {
+          closeViewer(true);
+        }
         closeBtn.addEventListener('click', close);
+        copyBtn.addEventListener('click', function() {
+          var link = window.location.origin + window.location.pathname + '?paper=' + encodeURIComponent(paper.id);
+          if (navigator.clipboard && navigator.clipboard.writeText) {
+            navigator.clipboard.writeText(link).then(function() {
+              announce('Paper link copied.');
+            });
+          }
+        });
+        viewerContainer.addEventListener('click', function(e) {
+          if (e.target === viewerContainer) close();
+        });
+        iframe.addEventListener('load', function() {
+          announce('Opened paper viewer: ' + paper.title);
         });
         document.addEventListener('keydown', function handler(e) {
+          if (!viewerContainer) {
+            document.removeEventListener('keydown', handler);
+            return;
+          }
           if (e.key === 'Escape') {
             close();
             document.removeEventListener('keydown', handler);
           }
+          if (e.key === 'Tab') {
+            var focusable = viewerContainer.querySelectorAll('button, a, iframe');
+            var first = focusable[0];
+            var last = focusable[focusable.length - 1];
+            if (e.shiftKey && document.activeElement === first) {
+              last.focus();
+              e.preventDefault();
+            } else if (!e.shiftKey && document.activeElement === last) {
+              first.focus();
+              e.preventDefault();
+            }
+          }
         });
+        closeBtn.focus();
       }
+      function closeViewer(syncHistory) {
+        if (!viewerContainer) return;
+        var previousFocus = modalState && modalState.previousFocus;
+        viewerContainer.remove();
+        viewerContainer = null;
+        modalState = null;
+        document.body.style.overflow = '';
+        document.querySelector('main').removeAttribute('inert');
+        if (syncHistory !== false) syncUrl(null);
+        if (previousFocus && typeof previousFocus.focus === 'function') previousFocus.focus();
+        announce('Paper viewer closed.');
+      }
+      searchInput.addEventListener('input', renderGrid);
+      sortSelect.addEventListener('change', renderGrid);
+      resetButton.addEventListener('click', resetFilters);
+      filterButtons.forEach(function(button) {
+        button.addEventListener('click', function() {
+          setFilter(button.getAttribute('data-filter'));
+        });
+      });
+      window.addEventListener('popstate', function() {
+        var params = new URLSearchParams(window.location.search);
+        var paperId = params.get('paper');
+        if (!paperId) {
+          closeViewer(false);
+          return;
+        }
+        var paper = getPaperById(paperId);
+        if (paper) openPaper(paper, null, false);
+      });
+      renderGrid();
+      var initialPaperId = new URLSearchParams(window.location.search).get('paper');
+      if (initialPaperId) {
+        var initialPaper = getPaperById(initialPaperId);
+        if (initialPaper) openPaper(initialPaper, null, false);
       }
     })();
   </script>
 </body>
 </html>