frontend: Esc deselects entry; group font artifacts in rail

frontend/src/App.jsx

@@ -464,6 +464,23 @@ export default function App() {
     setPreviewEntryUid(null)
   }, [selectedEntry])
 
+  // Esc: deselect current entry/entries, unless a modal or input has focus.
+  useEffect(() => {
+    const handler = (e) => {
+      if (e.key !== 'Escape') return
+      if (captureDialogOpen || previewEntryUid) return
+      const tag = document.activeElement?.tagName
+      if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return
+      if (selectedUids.size > 0) {
+        e.preventDefault()
+        setSelectedUids(new Set())
+        document.activeElement?.blur?.()
+      }
+    }
+    window.addEventListener('keydown', handler)
+    return () => window.removeEventListener('keydown', handler)
+  }, [captureDialogOpen, previewEntryUid, selectedUids])
+
   // Toggle body class so fixed AudioBar doesn't obscure scrollable content
   useEffect(() => {
     document.body.classList.toggle('has-audio-bar', !!currentAudio)

frontend/src/components/ContextRail.jsx

@@ -23,6 +23,8 @@ export default function ContextRail({ archiveId, selectedEntry, selectedUids, se
   const [rearchiveState, setRearchiveState] = useState('idle') // 'idle' | 'running' | 'done' | 'error'
   const [rearchiveError, setRearchiveError] = useState('')
   const rearchivePollRef = useRef(null)
+  const [fontsOpen, setFontsOpen] = useState(false)
+  useEffect(() => { setFontsOpen(false) }, [detail?.summary?.entry_uid])
 
   // ── Bulk-panel state ────────────────────────────────────────────────────
   const isBulk = selectedUids?.size >= 2
@@ -399,30 +401,63 @@ export default function ContextRail({ archiveId, selectedEntry, selectedUids, se
             ))}
           </div>
 
-          {detail.artifacts.length > 0 && (
-            <div className="rail-section">
-              <div className="rail-section-heading">
-                Artifacts <span className="num">{detail.artifacts.length}</span>
+          {detail.artifacts.length > 0 && (() => {
+            const indexed = detail.artifacts.map((a, i) => ({ ...a, _idx: i }))
+            const fonts = indexed.filter(a => a.artifact_role === 'font')
+            const others = indexed.filter(a => a.artifact_role !== 'font')
+            const fontTotalBytes = fonts.reduce((s, a) => s + (a.byte_size || 0), 0)
+            const entryUid = detail.summary.entry_uid
+            const renderRow = (artifact) => (
+              <li key={artifact._idx}>
+                <a
+                  href={`/api/archives/${archiveId}/entries/${entryUid}/artifacts/${artifact._idx}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="artifact-link"
+                >
+                  <span className="artifact-name">
+                    {artifact.artifact_role === 'font'
+                      ? artifact.relpath.split('/').pop()
+                      : artifact.artifact_role.replace(/_/g, ' ')}
+                  </span>
+                  <span className="artifact-size">
+                    {artifact.byte_size != null ? formatBytes(artifact.byte_size) : '—'}
+                  </span>
+                </a>
+              </li>
+            )
+            return (
+              <div className="rail-section">
+                <div className="rail-section-heading">
+                  Artifacts <span className="num">{detail.artifacts.length}</span>
+                </div>
+                <ul className="artifact-list">
+                  {others.map(renderRow)}
+                  {fonts.length > 0 && (
+                    <li className="artifact-group">
+                      <button
+                        type="button"
+                        className="artifact-group-header artifact-link"
+                        aria-expanded={fontsOpen}
+                        onClick={() => setFontsOpen(o => !o)}
+                      >
+                        <span className="artifact-name">
+                          <span aria-hidden="true" className={`artifact-group-chevron${fontsOpen ? ' open' : ''}`}>›</span>
+                          {` fonts (${fonts.length})`}
+                        </span>
+                        <span className="artifact-size">{formatBytes(fontTotalBytes)}</span>
+                      </button>
+                      {fontsOpen && (
+                        <ul className="artifact-list artifact-group-body">
+                          {fonts.map(renderRow)}
+                        </ul>
+                      )}
+                    </li>
+                  )}
+                </ul>
               </div>
-              <ul className="artifact-list">
-                {detail.artifacts.map((artifact, index) => (
-                  <li key={index}>
-                    <a
-                      href={`/api/archives/${archiveId}/entries/${detail.summary.entry_uid}/artifacts/${index}`}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="artifact-link"
-                    >
-                      <span className="artifact-name">{artifact.artifact_role.replace(/_/g, ' ')}</span>
-                      <span className="artifact-size">
-                        {artifact.byte_size != null ? formatBytes(artifact.byte_size) : '—'}
-                      </span>
-                    </a>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          )}
+            )
+          })()}
         </>
       )}
 

frontend/src/styles.css

@@ -515,6 +515,22 @@ select {
 .artifact-name { font-size: 13px; color: var(--link); min-width: 0; word-break: break-word; }
 .artifact-link:hover .artifact-name { text-decoration: underline; }
 .artifact-size { font-size: 11.5px; color: var(--muted-2); flex-shrink: 0; font-variant-numeric: tabular-nums; }
+.artifact-group { list-style: none; }
+.artifact-group-header {
+  width: 100%; background: none; border: none; border-bottom: 1px solid var(--line-soft);
+  cursor: pointer; text-align: left; color: inherit; font: inherit;
+}
+.artifact-group-header:hover .artifact-name { text-decoration: underline; }
+.artifact-group-chevron {
+  display: inline-block;
+  font-style: normal;
+  transition: transform 0.15s ease;
+  transform: rotate(0deg);
+  transform-origin: 45% 50%;
+  margin-right: 3px;
+}
+.artifact-group-chevron.open { transform: rotate(90deg); }
+.artifact-group-body { padding-left: 14px; }
 
 /* tags */
 .tags-wrap { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 12px; }