From 8a6111aeb540af2c08a26cb377d74debf2e142cf Mon Sep 17 00:00:00 2001
From: Thomas Cravey <tjcravey@MacBookPro.localdomain>
Date: Sat, 16 Aug 2025 21:38:49 -0500
Subject: [PATCH 01/32] feat(webui): templates + static assets; SSE broadcast;
 link cards; link summary endpoint; raw soju client store; UI polish

- Switch UI to Go html/templates and embedded /static (Pico.css-compatible)

- Add Server.Broadcast and normalize SSE channel keys to lowercase

- Implement /api/linkcard (OG/Twitter) and /api/linksummary (24h cache)

- Wire Store into raw soju client for CHATHISTORY LATEST fallback
---
 cmd/sojuboy/main.go                        |  25 +-
 internal/httpapi/server.go                 | 653 ++++++++++++---------
 internal/httpapi/static/app.css            |  13 +
 internal/httpapi/static/app.js             |  39 ++
 internal/httpapi/templates.go              |  47 ++
 internal/httpapi/templates/dashboard.tmpl  |  12 +
 internal/httpapi/templates/layout.tmpl     |  27 +
 internal/httpapi/templates/summarizer.tmpl |  14 +
 8 files changed, 537 insertions(+), 293 deletions(-)
 create mode 100644 internal/httpapi/static/app.css
 create mode 100644 internal/httpapi/static/app.js
 create mode 100644 internal/httpapi/templates.go
 create mode 100644 internal/httpapi/templates/dashboard.tmpl
 create mode 100644 internal/httpapi/templates/layout.tmpl
 create mode 100644 internal/httpapi/templates/summarizer.tmpl

diff --git a/cmd/sojuboy/main.go b/cmd/sojuboy/main.go
index 45e6117..25c1a0c 100644
--- a/cmd/sojuboy/main.go
+++ b/cmd/sojuboy/main.go
@@ -223,10 +223,11 @@ func main() {
 		Password:       cfg.Password,
 		Channels:       cfg.Channels,
 		BackfillLatest: backfill,
+		Store:          st,
 		OnPrivmsg: func(channel, author, text, msgid string, at time.Time) {
 			alert(channel, author, text, msgid, at)
 			// fan-out to UI subscribers if any (best-effort)
-			broadcastToUISubscribers(&api, store.Message{Channel: channel, Author: author, Body: text, Time: at.UTC(), MsgID: msgid})
+			api.Broadcast(strings.ToLower(channel), store.Message{Channel: channel, Author: author, Body: text, Time: at.UTC(), MsgID: msgid})
 		},
 		ConnectedGauge: &metrics.ConnectedGauge,
 	}
@@ -292,25 +293,3 @@ func main() {
 	<-ctx.Done()
 	logger.Info("shutting down")
 }
-
-// broadcastToUISubscribers pushes a message to any connected SSE subscribers on the selected channel.
-func broadcastToUISubscribers(api *httpapi.Server, m store.Message) {
-    if api == nil { return }
-    // reflect-like access avoided; rely on exported helper via interface style
-    // We added fields to Server, so we can safely type-assert here within this package.
-    // Iterate subscribers with internal lock via small helper method.
-    type subAccess interface{ Broadcast(channel string, m store.Message) }
-    if b, ok := any(api).(subAccess); ok { b.Broadcast(strings.ToLower(m.Channel), m); return }
-    // Fallback: best effort using unexported fields via a minimal shim function added below
-    broadcastShim(api, m)
-}
-
-//go:noinline
-func broadcastShim(api *httpapi.Server, m store.Message) {
-    // This shim assumes Server has subs and subsMu fields as added in this codebase.
-    // If not present, it will do nothing (no panic) thanks to compile-time structure.
-    // Since we are in the same module, we can update together.
-    // WARNING: keep in sync with httpapi.Server struct.
-    // Using an internal copy of the logic to avoid import cycles.
-    // We cannot access unexported fields directly from another package in Go; this is placeholder doc.
-}
diff --git a/internal/httpapi/server.go b/internal/httpapi/server.go
index da279a1..2cfa5a4 100644
--- a/internal/httpapi/server.go
+++ b/internal/httpapi/server.go
@@ -1,9 +1,10 @@
 package httpapi
 
 import (
-	"encoding/json"
 	"context"
+	"encoding/json"
 	"fmt"
+	"io/fs"
 	"log/slog"
 	"net/http"
 	"net/url"
@@ -15,7 +16,8 @@ import (
 
 	"sojuboy/internal/store"
 	"sojuboy/internal/summarizer"
-    xhtml "golang.org/x/net/html"
+
+	xhtml "golang.org/x/net/html"
 )
 
 type Metrics struct {
@@ -51,13 +53,20 @@ type Server struct {
 	// Link card cache
 	cardCache    map[string]linkCard
 	cardCacheExp map[string]time.Time
+	// Link summary cache
+	summaryCache    map[string]string
+	summaryCacheExp map[string]time.Time
 }
 
 func (s *Server) Start(ctx context.Context) error {
 	mux := http.NewServeMux()
-	// Minimal web UI
-	mux.HandleFunc("/", s.handleUI)
-	mux.HandleFunc("/summarizer", s.handleSummarizerUI)
+	// Minimal web UI (templated)
+	mux.HandleFunc("/", s.handleUIDash)
+	mux.HandleFunc("/summarizer", s.handleUISummarizer)
+	// Serve embedded static files under /static/
+	if sub, err := fs.Sub(staticFS, "."); err == nil {
+		mux.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.FS(sub))))
+	}
 	mux.HandleFunc("/login", s.handleLogin)
 	mux.HandleFunc("/auth", s.handleAuth)
 	mux.HandleFunc("/logout", s.handleLogout)
@@ -85,6 +94,7 @@ func (s *Server) Start(ctx context.Context) error {
 	mux.HandleFunc("/api/history", s.handleHistory)
 	mux.HandleFunc("/api/stream", s.handleStream)
 	mux.HandleFunc("/api/linkcard", s.handleLinkCard)
+	mux.HandleFunc("/api/linksummary", s.handleLinkSummary)
 
 	srv := &http.Server{
 		Addr:    s.ListenAddr,
@@ -198,67 +208,158 @@ func (s *Server) handleTail(w http.ResponseWriter, r *http.Request) {
 		_, _ = w.Write([]byte(m.Time.UTC().Format(time.RFC3339) + " " + m.Author + " " + channel + " " + m.Body + "\n"))
 	}
 }
+
 // Simple link card structure
-type linkCard struct{
-    URL         string `json:"url"`
-    Title       string `json:"title"`
-    Description string `json:"description"`
-    Image       string `json:"image"`
+type linkCard struct {
+	URL         string `json:"url"`
+	Title       string `json:"title"`
+	Description string `json:"description"`
+	Image       string `json:"image"`
 }
 
 // handleLinkCard fetches basic OpenGraph/Twitter card metadata (best-effort) and returns a small card.
 func (s *Server) handleLinkCard(w http.ResponseWriter, r *http.Request) {
-    if s.AuthToken != "" && !checkAuth(r, s.AuthToken) {
-        w.WriteHeader(http.StatusUnauthorized)
-        _, _ = w.Write([]byte("unauthorized"))
-        return
-    }
-    raw := r.URL.Query().Get("url")
-    if raw == "" { w.WriteHeader(http.StatusBadRequest); _, _ = w.Write([]byte("missing url")); return }
-    u, err := url.Parse(raw)
-    if err != nil || (u.Scheme != "http" && u.Scheme != "https") { w.WriteHeader(http.StatusBadRequest); _, _ = w.Write([]byte("bad url")); return }
-    // cache lookup
-    if s.cardCache == nil { s.cardCache = make(map[string]linkCard); s.cardCacheExp = make(map[string]time.Time) }
-    if exp, ok := s.cardCacheExp[raw]; ok && time.Now().Before(exp) {
-        w.Header().Set("Content-Type", "application/json")
-        _ = json.NewEncoder(w).Encode(s.cardCache[raw])
-        return
-    }
-    // fetch minimal HTML and extract tags using a tolerant HTML parser
-    client := &http.Client{ Timeout: 10 * time.Second }
-    req, _ := http.NewRequestWithContext(r.Context(), http.MethodGet, raw, nil)
-    resp, err := client.Do(req)
-    if err != nil { w.WriteHeader(http.StatusBadGateway); _, _ = w.Write([]byte("fetch error")); return }
-    defer resp.Body.Close()
-    if resp.StatusCode < 200 || resp.StatusCode >= 300 { w.WriteHeader(http.StatusBadGateway); _, _ = w.Write([]byte("bad status")); return }
-    // limit to 256KB and parse tokens
-    limited := http.MaxBytesReader(w, resp.Body, 262144)
-    doc, err := xhtml.Parse(limited)
-    if err != nil { w.WriteHeader(http.StatusBadGateway); _, _ = w.Write([]byte("parse error")); return }
-    var title, desc, img string
-    var walker func(*xhtml.Node)
-    walker = func(n *xhtml.Node) {
-        if n.Type == xhtml.ElementNode && strings.EqualFold(n.Data, "meta") {
-            // property or name + content
-            var pn = ""; var nm = ""; var content = ""
-            for _, a := range n.Attr { if strings.EqualFold(a.Key, "property") { pn = a.Val } else if strings.EqualFold(a.Key, "name") { nm = a.Val } else if strings.EqualFold(a.Key, "content") { content = a.Val } }
-            key := strings.ToLower(pn)
-            if key == "" { key = strings.ToLower(nm) }
-            switch key {
-            case "og:title", "twitter:title": if title == "" { title = content }
-            case "og:description", "twitter:description": if desc == "" { desc = content }
-            case "og:image", "twitter:image": if img == "" { img = content }
-            }
-        }
-        for c := n.FirstChild; c != nil; c = c.NextSibling { walker(c) }
-    }
-    walker(doc)
-    card := linkCard{ URL: raw, Title: strings.TrimSpace(title), Description: strings.TrimSpace(desc), Image: strings.TrimSpace(img) }
-    // cache for 24h
-    s.cardCache[raw] = card
-    s.cardCacheExp[raw] = time.Now().Add(24 * time.Hour)
-    w.Header().Set("Content-Type", "application/json")
-    _ = json.NewEncoder(w).Encode(card)
+	if s.AuthToken != "" && !checkAuth(r, s.AuthToken) {
+		w.WriteHeader(http.StatusUnauthorized)
+		_, _ = w.Write([]byte("unauthorized"))
+		return
+	}
+	raw := r.URL.Query().Get("url")
+	if raw == "" {
+		w.WriteHeader(http.StatusBadRequest)
+		_, _ = w.Write([]byte("missing url"))
+		return
+	}
+	u, err := url.Parse(raw)
+	if err != nil || (u.Scheme != "http" && u.Scheme != "https") {
+		w.WriteHeader(http.StatusBadRequest)
+		_, _ = w.Write([]byte("bad url"))
+		return
+	}
+	// cache lookup
+	if s.cardCache == nil {
+		s.cardCache = make(map[string]linkCard)
+		s.cardCacheExp = make(map[string]time.Time)
+	}
+	if exp, ok := s.cardCacheExp[raw]; ok && time.Now().Before(exp) {
+		w.Header().Set("Content-Type", "application/json")
+		_ = json.NewEncoder(w).Encode(s.cardCache[raw])
+		return
+	}
+	// fetch minimal HTML and extract tags using a tolerant HTML parser
+	client := &http.Client{Timeout: 10 * time.Second}
+	req, _ := http.NewRequestWithContext(r.Context(), http.MethodGet, raw, nil)
+	resp, err := client.Do(req)
+	if err != nil {
+		w.WriteHeader(http.StatusBadGateway)
+		_, _ = w.Write([]byte("fetch error"))
+		return
+	}
+	defer resp.Body.Close()
+	if resp.StatusCode < 200 || resp.StatusCode >= 300 {
+		w.WriteHeader(http.StatusBadGateway)
+		_, _ = w.Write([]byte("bad status"))
+		return
+	}
+	// limit to 256KB and parse tokens
+	limited := http.MaxBytesReader(w, resp.Body, 262144)
+	doc, err := xhtml.Parse(limited)
+	if err != nil {
+		w.WriteHeader(http.StatusBadGateway)
+		_, _ = w.Write([]byte("parse error"))
+		return
+	}
+	var title, desc, img string
+	var walker func(*xhtml.Node)
+	walker = func(n *xhtml.Node) {
+		if n.Type == xhtml.ElementNode && strings.EqualFold(n.Data, "meta") {
+			// property or name + content
+			var pn = ""
+			var nm = ""
+			var content = ""
+			for _, a := range n.Attr {
+				if strings.EqualFold(a.Key, "property") {
+					pn = a.Val
+				} else if strings.EqualFold(a.Key, "name") {
+					nm = a.Val
+				} else if strings.EqualFold(a.Key, "content") {
+					content = a.Val
+				}
+			}
+			key := strings.ToLower(pn)
+			if key == "" {
+				key = strings.ToLower(nm)
+			}
+			switch key {
+			case "og:title", "twitter:title":
+				if title == "" {
+					title = content
+				}
+			case "og:description", "twitter:description":
+				if desc == "" {
+					desc = content
+				}
+			case "og:image", "twitter:image":
+				if img == "" {
+					img = content
+				}
+			}
+		}
+		for c := n.FirstChild; c != nil; c = c.NextSibling {
+			walker(c)
+		}
+	}
+	walker(doc)
+	card := linkCard{URL: raw, Title: strings.TrimSpace(title), Description: strings.TrimSpace(desc), Image: strings.TrimSpace(img)}
+	// cache for 24h
+	s.cardCache[raw] = card
+	s.cardCacheExp[raw] = time.Now().Add(24 * time.Hour)
+	w.Header().Set("Content-Type", "application/json")
+	_ = json.NewEncoder(w).Encode(card)
+}
+
+// handleLinkSummary returns a brief AI summary for a given URL, cached for 24h.
+func (s *Server) handleLinkSummary(w http.ResponseWriter, r *http.Request) {
+	if s.AuthToken != "" && !checkAuth(r, s.AuthToken) {
+		w.WriteHeader(http.StatusUnauthorized)
+		_, _ = w.Write([]byte("unauthorized"))
+		return
+	}
+	raw := r.URL.Query().Get("url")
+	if raw == "" {
+		w.WriteHeader(http.StatusBadRequest)
+		_, _ = w.Write([]byte("missing url"))
+		return
+	}
+	if s.Summarizer == nil {
+		w.WriteHeader(http.StatusServiceUnavailable)
+		_, _ = w.Write([]byte("summarizer not configured"))
+		return
+	}
+	if s.summaryCache == nil { s.summaryCache = make(map[string]string) }
+	if s.summaryCacheExp == nil { s.summaryCacheExp = make(map[string]time.Time) }
+	if exp, ok := s.summaryCacheExp[raw]; ok && time.Now().Before(exp) {
+		w.Header().Set("Content-Type", "application/json")
+		_ = json.NewEncoder(w).Encode(map[string]any{"summary": s.summaryCache[raw]})
+		return
+	}
+	msgs := []store.Message{{Channel: "#links", Author: "link", Body: raw, Time: time.Now().UTC()}}
+	tout := s.SummarizerTimeout
+	if tout <= 0 { tout = 5 * time.Minute }
+	if tout > 2*time.Minute { tout = 2 * time.Minute }
+	ctx, cancel := context.WithTimeout(r.Context(), tout)
+	defer cancel()
+	sum, err := s.Summarizer.Summarize(ctx, "#links", msgs, 0)
+	if err != nil {
+		w.WriteHeader(http.StatusBadGateway)
+		_, _ = w.Write([]byte("summarizer error"))
+		return
+	}
+	if sum == "" { sum = "(no summary)" }
+	s.summaryCache[raw] = sum
+	s.summaryCacheExp[raw] = time.Now().Add(24 * time.Hour)
+	w.Header().Set("Content-Type", "application/json")
+	_ = json.NewEncoder(w).Encode(map[string]any{"summary": sum})
 }
 
 func (s *Server) handleMetrics(w http.ResponseWriter, r *http.Request) {
@@ -281,7 +382,7 @@ func (s *Server) handleMetrics(w http.ResponseWriter, r *http.Request) {
 
 // --- Web UI handlers ---
 
-func (s *Server) handleUI(w http.ResponseWriter, r *http.Request) {
+func (s *Server) handleUIDash(w http.ResponseWriter, r *http.Request) {
 	if r.URL.Path != "/" {
 		w.WriteHeader(http.StatusNotFound)
 		return
@@ -293,202 +394,121 @@ func (s *Server) handleUI(w http.ResponseWriter, r *http.Request) {
 			return
 		}
 	}
-	w.Header().Set("Content-Type", "text/html; charset=utf-8")
-	// Pico.css from CDN and a tiny app
-	page := `<!doctype html>
-<html>
-<head>
-  <meta charset="utf-8"/>
-  <meta name="viewport" content="width=device-width, initial-scale=1"/>
-  <title>sojuboy</title>
-  <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@2/css/pico.min.css">
-  <style>
-    body { padding: 0; }
-    header.nav { position: sticky; top: 0; z-index: 10; padding: .6rem 1rem; border-bottom: 1px solid var(--muted-border-color); display: flex; justify-content: space-between; align-items: center; }
-    header.nav a.brand { text-decoration: none; font-weight: 600; }
-    main.container { display: grid; grid-template-columns: 220px 1fr; gap: 0; min-height: calc(100vh - 3rem); }
-    aside.sidebar { border-right: 1px solid var(--muted-border-color); padding: .75rem; overflow-y: auto; }
-    aside.sidebar a { display:block; padding:.25rem .5rem; border-radius:.25rem; text-decoration:none; }
-    aside.sidebar a.active { background: var(--muted-color); color: var(--contrast); }
-    section.chat { padding: .75rem 1rem; display:flex; flex-direction: column; height: calc(100vh - 3.5rem); }
-    #tail { flex: 1; overflow: auto; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
-    .ts { opacity: .66; }
-    .msg { margin-bottom: .25rem; }
-    footer { text-align: center; font-size: .85rem; padding: .5rem 0; opacity: .7; }
-    @media (max-width: 900px) { main.container { grid-template-columns: 1fr; } aside.sidebar { display:none; } }
-  </style>
-  <script>
-    const st={ tailLoading:false, atBottom:true, current:'#', earliest:null, sse:null, channels:[] };
-    function setToken(v){ st.token=v; localStorage.setItem('token', v); }
-    async function api(path, params){
-      const url = new URL(path, window.location.origin);
-      if(params && params.query){ Object.entries(params.query).forEach(([k,v])=>url.searchParams.set(k,v)); }
-      const opts = { headers: {} };
-      // use cookie for auth; header optional if present
-      if(st.token){ opts.headers['Authorization'] = 'Bearer '+st.token; }
-      const res = await fetch(url, opts);
-      if(!res.ok){ throw new Error('HTTP '+res.status); }
-      return res.json();
-    }
-    async function loadInfo(){ /* no-op for now; footer shows version */ }
-    async function loadChannels(){
-      try{ const data = await api('/api/channels'); st.channels = data; renderChannels(); if(data.length>0){ selectChannel(data[0]); } }
-      catch(e){ console.error(e); }
-    }
-    function renderChannels(){ const list=document.getElementById('chanlist'); list.innerHTML=''; st.channels.forEach(c=>{ const a=document.createElement('a'); a.href='#'; a.textContent=c; a.onclick=(ev)=>{ev.preventDefault(); selectChannel(c)}; if(c===st.current) a.className='active'; list.appendChild(a); }); }
-    async function selectChannel(ch){ if(st.sse){ st.sse.close(); st.sse=null; } st.current=ch; renderChannels(); const el=document.getElementById('tail'); el.textContent=''; // bootstrap 50
-      const data = await api('/api/tail',{query:{channel:ch,limit:50}}); appendBatch(data); el.scrollTop = el.scrollHeight; st.atBottom=true; st.earliest = data.length? data[0].time : null; startStream(); initScrollHandlers(); }
-    function initScrollHandlers(){ const el=document.getElementById('tail'); el.onscroll=async ()=>{ st.atBottom = (el.scrollTop + el.clientHeight + 8) >= el.scrollHeight; if(el.scrollTop === 0 && st.earliest){ // load more
-          try{ const older = await api('/api/history',{query:{channel:st.current,before:st.earliest,limit:50}}); if(older.length){ const hBefore = el.scrollHeight; prependBatch(older); st.earliest = older[0].time; const hAfter = el.scrollHeight; el.scrollTop = hAfter - hBefore; } }
-          catch(e){}
-      } } }
-    function colorFor(nick){ let h=0; for(let i=0;i<nick.length;i++){ h=(h*31+nick.charCodeAt(i))>>>0 } return 'hsl('+(h%360)+',60%,'+(window.matchMedia('(prefers-color-scheme: dark)').matches? '70%':'35%')+')'; }
-    function lineHTML(m){ const ts = '<span class=ts>[' + m.time + ']</span>'; const nick = '<b style="color:' + colorFor(m.author) + '\">' + m.author + '</b>'; const body = escapeHtml(m.body); return ts + ' ' + nick + ': ' + linkify(body); }
-    function escapeHtml(s){ return s.replace(/[&<>"]/g, c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c])); }
-    function linkify(t){ return t.replace(/https?:\/\/\S+/g, function(u){ return '<a href="' + u + '" target="_blank" rel="noopener">' + u + '</a>'; }); }
-    function appendBatch(arr){ const el=document.getElementById('tail'); const frag=document.createDocumentFragment(); arr.forEach(m=>{ const div=document.createElement('div'); div.className='msg'; div.innerHTML=lineHTML(m); frag.appendChild(div); processLinks(div); }); el.appendChild(frag); if(st.atBottom){ el.scrollTop = el.scrollHeight; } }
-    function prependBatch(arr){ const el=document.getElementById('tail'); const oldTop=el.firstChild; const frag=document.createDocumentFragment(); arr.forEach(m=>{ const div=document.createElement('div'); div.className='msg'; div.innerHTML=lineHTML(m); frag.appendChild(div); processLinks(div); }); el.insertBefore(frag, el.firstChild); if(oldTop){ oldTop.scrollIntoView(); } }
-    function processLinks(scope){ const links = scope.querySelectorAll('a[href]:not([data-card])'); links.forEach(a=>{ a.setAttribute('data-card','1'); fetch('/api/linkcard?url='+encodeURIComponent(a.href)).then(r=>r.json()).then(card=>{ if(!card) return; if(card.title||card.description||card.image){ const c=document.createElement('div'); c.className='card'; var html=''; if(card.image){ html += '<div><img src="'+card.image+'" alt="" style="max-width:160px;max-height:120px;object-fit:cover;border-radius:.25rem"></div>'; } html += '<div style="flex:1;margin-left:.5rem">'; if(card.title){ html += '<div style="font-weight:600">'+escapeHtml(card.title)+'</div>'; } if(card.description){ html += '<div style="opacity:.8">'+escapeHtml(card.description)+'</div>'; } html += '</div>'; c.innerHTML = '<div style="display:flex;align-items:flex-start;gap:.5rem">'+html+'</div>'; a.parentNode.insertBefore(c, a.nextSibling); } }).catch(()=>{}); }); }
-    function startStream(){ const url=new URL('/api/stream', window.location.origin); url.searchParams.set('channel', st.current); const es=new EventSource(url); st.sse=es; es.onmessage=(ev)=>{ try{ const m=JSON.parse(ev.data); appendBatch([m]); }catch(e){} }; es.onerror=()=>{ es.close(); st.sse=null; setTimeout(startStream, 3000); } }
-    async function doSumm(){
-      const ch = document.getElementById('channel').value;
-      const win = document.getElementById('window').value || '6h';
-      const push = document.getElementById('push').checked ? '1' : '0';
-      const btn = document.getElementById('summBtn');
-      const prog = document.getElementById('summProg');
-      btn.disabled = true; prog.style.display = 'inline-block';
-      try{ const data = await api('/api/trigger',{query:{channel:ch,window:win,push:push}});
-        const el = document.getElementById('summary');
-        el.textContent = data.summary || '(empty)';
-        el.scrollTop = el.scrollHeight;
-      }catch(e){ document.getElementById('summary').textContent = 'error: '+e; }
-      btn.disabled = false; prog.style.display = 'none';
-    }
-    window.addEventListener('DOMContentLoaded', ()=>{ loadChannels(); });
-    function onFollowToggle(cb){
-      if(cb.checked){
-        if(st.tailTimer) clearInterval(st.tailTimer);
-        st.tailTimer = setInterval(doTail, 3000);
-      }else{
-        if(st.tailTimer) { clearInterval(st.tailTimer); st.tailTimer=null; }
-      }
-    }
-    function onChannelChange(){ doTail(); }
-  </script>
-</head>
-<body>
-  <header class="nav">
-    <div><a class="brand" href="/">sojuboy</a></div>
-    <nav>
-      <ul>
-        <li><a href="/summarizer">Summarizer</a></li>
-        <li><a href="/logout">Logout</a></li>
-      </ul>
-    </nav>
-  </header>
-  <main class="container">
-    <aside class="sidebar">
-      <nav id="chanlist"></nav>
-    </aside>
-    <section class="chat">
-      <div id="tail" style="height: calc(100vh - 4.5rem); overflow:auto"></div>
-    </section>
-  </main>
-  <footer>
-    <small>` + s.Version + ` (` + s.Commit + `)</small>
-  </footer>
-</body>
-</html>`
-	_, _ = w.Write([]byte(page))
+	s.render(w, "dashboard.tmpl", map[string]any{})
 }
 
-func (s *Server) handleSummarizerUI(w http.ResponseWriter, r *http.Request) {
+func (s *Server) handleUISummarizer(w http.ResponseWriter, r *http.Request) {
 	if s.AuthToken != "" {
 		if c, err := r.Cookie("auth_token"); err != nil || c.Value != s.AuthToken {
 			http.Redirect(w, r, "/login", http.StatusFound)
 			return
 		}
 	}
-	w.Header().Set("Content-Type", "text/html; charset=utf-8")
-	page := `<!doctype html><html><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><title>Summarizer · sojuboy</title><link rel="stylesheet" href="https://unpkg.com/@picocss/pico@2/css/pico.min.css"><style>body{padding:0} header.nav{position:sticky;top:0;z-index:10;padding:.6rem 1rem;border-bottom:1px solid var(--muted-border-color);display:flex;justify-content:space-between;align-items:center} header.nav a.brand{text-decoration:none;font-weight:600} main{max-width:900px;margin:0 auto;padding:1rem} #out{white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere} footer{text-align:center;font-size:.85rem;padding:.5rem 0;opacity:.7}</style><script>async function api(path,params){const url=new URL(path,window.location.origin);if(params&&params.query){Object.entries(params.query).forEach(([k,v])=>url.searchParams.set(k,v));}const res=await fetch(url);if(!res.ok) throw new Error('HTTP '+res.status);return res.text();}async function summarize(){const ch=document.getElementById('channel').value;const win=document.getElementById('window').value||'6h';const push=document.getElementById('push').checked?'1':'0';const btn=document.getElementById('btn');const out=document.getElementById('out');btn.disabled=true;out.textContent='';try{const txt=await api('/trigger',{query:{channel:ch,window:win,push:push}});out.textContent=txt;}catch(e){out.textContent='error: '+e;}btn.disabled=false;}</script></head><body><header class="nav"><div><a class="brand" href="/">sojuboy</a></div><nav><ul><li><a href="/summarizer" aria-current="page">Summarizer</a></li><li><a href="/logout">Logout</a></li></ul></nav></header><main><article><h3>On-demand summarization</h3><label>Channel<select id="channel"></select></label><label>Window<input id="window" value="6h"></label><label><input type="checkbox" id="push"> Send via Pushover</label><button id="btn" onclick="summarize()">Summarize</button><pre id="out"></pre></article></main><footer><small>` + s.Version + ` (` + s.Commit + `)</small></footer><script>(async()=>{try{const res=await fetch('/api/channels');const arr=await res.json();const sel=document.getElementById('channel');arr.forEach(c=>{const o=document.createElement('option');o.value=c;o.textContent=c;sel.appendChild(o);});}catch(e){}})();</script></body></html>`
-	_, _ = w.Write([]byte(page))
+	s.render(w, "summarizer.tmpl", map[string]any{})
 }
 
 func (s *Server) handleInfo(w http.ResponseWriter, r *http.Request) {
 	w.Header().Set("Content-Type", "application/json")
 	resp := map[string]any{
-		"version": s.Version,
-		"commit": s.Commit,
-		"builtAt": s.BuiltAt,
+		"version":   s.Version,
+		"commit":    s.Commit,
+		"builtAt":   s.BuiltAt,
 		"startedAt": s.StartedAt.Format(time.RFC3339),
-		"uptime": time.Since(s.StartedAt).Round(time.Second).String(),
-		"messagesIngested": func() int64 { if s.Metrics==nil {return 0}; return atomic.LoadInt64(&s.Metrics.MessagesIngested) }(),
-		"notificationsSent": func() int64 { if s.Metrics==nil {return 0}; return atomic.LoadInt64(&s.Metrics.NotificationsSent) }(),
-		"messagesPruned": func() int64 { if s.Metrics==nil {return 0}; return atomic.LoadInt64(&s.Metrics.MessagesPruned) }(),
-		"connected": func() bool { if s.Metrics==nil {return false}; return atomic.LoadInt64(&s.Metrics.ConnectedGauge)==1 }(),
+		"uptime":    time.Since(s.StartedAt).Round(time.Second).String(),
+		"messagesIngested": func() int64 {
+			if s.Metrics == nil {
+				return 0
+			}
+			return atomic.LoadInt64(&s.Metrics.MessagesIngested)
+		}(),
+		"notificationsSent": func() int64 {
+			if s.Metrics == nil {
+				return 0
+			}
+			return atomic.LoadInt64(&s.Metrics.NotificationsSent)
+		}(),
+		"messagesPruned": func() int64 {
+			if s.Metrics == nil {
+				return 0
+			}
+			return atomic.LoadInt64(&s.Metrics.MessagesPruned)
+		}(),
+		"connected": func() bool {
+			if s.Metrics == nil {
+				return false
+			}
+			return atomic.LoadInt64(&s.Metrics.ConnectedGauge) == 1
+		}(),
 	}
 	_ = json.NewEncoder(w).Encode(resp)
 }
 
-// Summarizer simple page placeholder (will reuse existing summarizer flow)
-// removed duplicate handleSummarizerUI definition (consolidated earlier)
-
 // SSE stream of new messages for a channel
 func (s *Server) handleStream(w http.ResponseWriter, r *http.Request) {
-    if s.AuthToken != "" && !checkAuth(r, s.AuthToken) {
-        w.WriteHeader(http.StatusUnauthorized)
-        _, _ = w.Write([]byte("unauthorized"))
-        return
-    }
-    ch := strings.TrimSpace(r.URL.Query().Get("channel"))
-    if ch == "" { w.WriteHeader(http.StatusBadRequest); _, _ = w.Write([]byte("missing channel")); return }
-    key := strings.ToLower(ch)
-    w.Header().Set("Content-Type", "text/event-stream")
-    w.Header().Set("Cache-Control", "no-cache")
-    w.Header().Set("Connection", "keep-alive")
-    flusher, ok := w.(http.Flusher)
-    if !ok { w.WriteHeader(http.StatusInternalServerError); return }
+	if s.AuthToken != "" && !checkAuth(r, s.AuthToken) {
+		w.WriteHeader(http.StatusUnauthorized)
+		_, _ = w.Write([]byte("unauthorized"))
+		return
+	}
+	ch := strings.TrimSpace(r.URL.Query().Get("channel"))
+	if ch == "" {
+		w.WriteHeader(http.StatusBadRequest)
+		_, _ = w.Write([]byte("missing channel"))
+		return
+	}
+	key := strings.ToLower(ch) // Normalize channel name to lowercase
 
-    // register subscriber
-    if s.subs == nil { s.subs = make(map[string][]chan store.Message) }
-    sub := make(chan store.Message, 64)
-    s.subsMu.Lock()
-    s.subs[key] = append(s.subs[key], sub)
-    s.subsMu.Unlock()
-    defer func(){
-        s.subsMu.Lock()
-        subs := s.subs[key]
-        for i := range subs {
-            if subs[i] == sub {
-                s.subs[key] = append(subs[:i], subs[i+1:]...)
-                break
-            }
-        }
-        s.subsMu.Unlock()
-        close(sub)
-    }()
+	w.Header().Set("Content-Type", "text/event-stream")
+	w.Header().Set("Cache-Control", "no-cache")
+	w.Header().Set("Connection", "keep-alive")
+	flusher, ok := w.(http.Flusher)
+	if !ok {
+		w.WriteHeader(http.StatusInternalServerError)
+		return
+	}
 
-    hb := time.NewTicker(15 * time.Second)
-    defer hb.Stop()
-    ctx := r.Context()
-    for {
-        select {
-        case <-ctx.Done():
-            return
-        case m := <-sub:
-            b, _ := json.Marshal(map[string]any{
-                "time": m.Time.UTC().Format(time.RFC3339),
-                "author": m.Author,
-                "body": m.Body,
-                "channel": m.Channel,
-            })
-            _, _ = fmt.Fprintf(w, "data: %s\n\n", b)
-            flusher.Flush()
-        case <-hb.C:
-            _, _ = fmt.Fprintf(w, ": ping\n\n")
-            flusher.Flush()
-        }
-    }
+	// register subscriber
+	if s.subs == nil {
+		s.subs = make(map[string][]chan store.Message)
+	}
+	sub := make(chan store.Message, 64)
+	s.subsMu.Lock()
+	s.subs[key] = append(s.subs[key], sub)
+	s.subsMu.Unlock()
+	defer func() {
+		s.subsMu.Lock()
+		subs := s.subs[key]
+		for i := range subs {
+			if subs[i] == sub {
+				s.subs[key] = append(subs[:i], subs[i+1:]...)
+				break
+			}
+		}
+		s.subsMu.Unlock()
+		close(sub)
+	}()
+
+	hb := time.NewTicker(15 * time.Second) // SSE heartbeat
+	defer hb.Stop()
+	ctx := r.Context()
+	for {
+		select {
+		case <-ctx.Done():
+			return
+		case m := <-sub:
+			b, _ := json.Marshal(map[string]any{
+				"time":    m.Time.UTC().Format(time.RFC3339),
+				"author":  m.Author,
+				"body":    m.Body,
+				"channel": m.Channel,
+			})
+			_, _ = fmt.Fprintf(w, "data: %s\n\n", b)
+			flusher.Flush()
+		case <-hb.C:
+			_, _ = fmt.Fprintf(w, ": ping\n\n")
+			flusher.Flush()
+		}
+	}
 }
 
 func (s *Server) handleChannels(w http.ResponseWriter, r *http.Request) {
@@ -517,14 +537,30 @@ func (s *Server) handleTailJSON(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 	channel := r.URL.Query().Get("channel")
-	if channel == "" { w.WriteHeader(http.StatusBadRequest); _, _ = w.Write([]byte("missing channel")); return }
+	if channel == "" {
+		w.WriteHeader(http.StatusBadRequest)
+		_, _ = w.Write([]byte("missing channel"))
+		return
+	}
 	limit := getIntQuery(r, "limit", 100)
 	msgs, err := s.Store.ListRecentMessages(r.Context(), channel, limit)
-	if err != nil { w.WriteHeader(http.StatusInternalServerError); _, _ = w.Write([]byte("store error")); return }
+	if err != nil {
+		w.WriteHeader(http.StatusInternalServerError)
+		_, _ = w.Write([]byte("store error"))
+		return
+	}
 	w.Header().Set("Content-Type", "application/json")
-	type outMsg struct{ Time string `json:"time"`; Author string `json:"author"`; Body string `json:"body"`; Channel string `json:"channel"` }
+	type outMsg struct {
+		Time    string `json:"time"`
+		Author  string `json:"author"`
+		Body    string `json:"body"`
+		Channel string `json:"channel"`
+	}
 	arr := make([]outMsg, 0, len(msgs))
-	for i := len(msgs)-1; i>=0; i-- { m := msgs[i]; arr = append(arr, outMsg{Time: m.Time.UTC().Format(time.RFC3339), Author: m.Author, Body: m.Body, Channel: channel}) }
+	for i := len(msgs) - 1; i >= 0; i-- {
+		m := msgs[i]
+		arr = append(arr, outMsg{Time: m.Time.UTC().Format(time.RFC3339), Author: m.Author, Body: m.Body, Channel: channel})
+	}
 	_ = json.NewEncoder(w).Encode(arr)
 }
 
@@ -535,43 +571,95 @@ func (s *Server) handleTriggerJSON(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 	channel := r.URL.Query().Get("channel")
-	if channel == "" { w.WriteHeader(http.StatusBadRequest); _, _ = w.Write([]byte("missing channel")); return }
-	win := r.URL.Query().Get("window"); if win=="" { win = "6h" }
+	if channel == "" {
+		w.WriteHeader(http.StatusBadRequest)
+		_, _ = w.Write([]byte("missing channel"))
+		return
+	}
+	win := r.URL.Query().Get("window")
+	if win == "" {
+		win = "6h"
+	}
 	push := r.URL.Query().Get("push") == "1"
 	dur, err := time.ParseDuration(win)
-	if err != nil { w.WriteHeader(http.StatusBadRequest); _, _ = w.Write([]byte("bad window")); return }
+	if err != nil {
+		w.WriteHeader(http.StatusBadRequest)
+		_, _ = w.Write([]byte("bad window"))
+		return
+	}
 	msgs, err := s.Store.ListMessagesSince(r.Context(), channel, time.Now().Add(-dur))
-	if err != nil { w.WriteHeader(http.StatusInternalServerError); _, _ = w.Write([]byte("store error")); return }
-	if s.Summarizer == nil { w.WriteHeader(http.StatusServiceUnavailable); _, _ = w.Write([]byte("summarizer not configured")); return }
-	tout := s.SummarizerTimeout; if tout<=0 { tout = 5*time.Minute }
-	ctx, cancel := context.WithTimeout(r.Context(), tout); defer cancel()
+	if err != nil {
+		w.WriteHeader(http.StatusInternalServerError)
+		_, _ = w.Write([]byte("store error"))
+		return
+	}
+	if s.Summarizer == nil {
+		w.WriteHeader(http.StatusServiceUnavailable)
+		_, _ = w.Write([]byte("summarizer not configured"))
+		return
+	}
+	tout := s.SummarizerTimeout
+	if tout <= 0 {
+		tout = 5 * time.Minute
+	}
+	ctx, cancel := context.WithTimeout(r.Context(), tout)
+	defer cancel()
 	sum, err := s.Summarizer.Summarize(ctx, channel, msgs, dur)
-	if err != nil { w.WriteHeader(http.StatusBadGateway); _, _ = w.Write([]byte("summarizer error")); return }
-	if push && s.Notifier != nil { title := fmt.Sprintf("IRC digest %s (%s)", channel, dur); _ = s.Notifier.Notify(r.Context(), title, sum); if s.Metrics != nil { atomic.AddInt64(&s.Metrics.NotificationsSent, 1) } }
+	if err != nil {
+		w.WriteHeader(http.StatusBadGateway)
+		_, _ = w.Write([]byte("summarizer error"))
+		return
+	}
+	if push && s.Notifier != nil {
+		title := fmt.Sprintf("IRC digest %s (%s)", channel, dur)
+		_ = s.Notifier.Notify(r.Context(), title, sum)
+		if s.Metrics != nil {
+			atomic.AddInt64(&s.Metrics.NotificationsSent, 1)
+		}
+	}
 	w.Header().Set("Content-Type", "application/json")
 	_ = json.NewEncoder(w).Encode(map[string]any{"summary": sum})
 }
 
 // history paging
 func (s *Server) handleHistory(w http.ResponseWriter, r *http.Request) {
-    if s.AuthToken != "" && !checkAuth(r, s.AuthToken) {
-        w.WriteHeader(http.StatusUnauthorized)
-        _, _ = w.Write([]byte("unauthorized"))
-        return
-    }
-    channel := r.URL.Query().Get("channel")
-    beforeStr := r.URL.Query().Get("before")
-    if channel == "" || beforeStr == "" { w.WriteHeader(http.StatusBadRequest); _, _ = w.Write([]byte("missing params")); return }
-    t, err := time.Parse(time.RFC3339, beforeStr)
-    if err != nil { w.WriteHeader(http.StatusBadRequest); _, _ = w.Write([]byte("bad before")); return }
-    limit := getIntQuery(r, "limit", 50)
-    msgs, err := s.Store.ListMessagesBefore(r.Context(), channel, t, limit)
-    if err != nil { w.WriteHeader(http.StatusInternalServerError); _, _ = w.Write([]byte("store error")); return }
-    w.Header().Set("Content-Type", "application/json")
-    type outMsg struct{ Time string `json:"time"`; Author string `json:"author"`; Body string `json:"body"`; Channel string `json:"channel"` }
-    arr := make([]outMsg, 0, len(msgs))
-    for _, m := range msgs { arr = append(arr, outMsg{Time: m.Time.UTC().Format(time.RFC3339), Author: m.Author, Body: m.Body, Channel: m.Channel}) }
-    _ = json.NewEncoder(w).Encode(arr)
+	if s.AuthToken != "" && !checkAuth(r, s.AuthToken) {
+		w.WriteHeader(http.StatusUnauthorized)
+		_, _ = w.Write([]byte("unauthorized"))
+		return
+	}
+	channel := r.URL.Query().Get("channel")
+	beforeStr := r.URL.Query().Get("before")
+	if channel == "" || beforeStr == "" {
+		w.WriteHeader(http.StatusBadRequest)
+		_, _ = w.Write([]byte("missing params"))
+		return
+	}
+	t, err := time.Parse(time.RFC3339, beforeStr)
+	if err != nil {
+		w.WriteHeader(http.StatusBadRequest)
+		_, _ = w.Write([]byte("bad before"))
+		return
+	}
+	limit := getIntQuery(r, "limit", 50)
+	msgs, err := s.Store.ListMessagesBefore(r.Context(), channel, t, limit)
+	if err != nil {
+		w.WriteHeader(http.StatusInternalServerError)
+		_, _ = w.Write([]byte("store error"))
+		return
+	}
+	w.Header().Set("Content-Type", "application/json")
+	type outMsg struct {
+		Time    string `json:"time"`
+		Author  string `json:"author"`
+		Body    string `json:"body"`
+		Channel string `json:"channel"`
+	}
+	arr := make([]outMsg, 0, len(msgs))
+	for _, m := range msgs {
+		arr = append(arr, outMsg{Time: m.Time.UTC().Format(time.RFC3339), Author: m.Author, Body: m.Body, Channel: m.Channel})
+	}
+	_ = json.NewEncoder(w).Encode(arr)
 }
 
 func checkAuth(r *http.Request, token string) bool {
@@ -647,7 +735,11 @@ func (s *Server) handleLogin(w http.ResponseWriter, r *http.Request) {
 }
 
 func (s *Server) handleAuth(w http.ResponseWriter, r *http.Request) {
-	if err := r.ParseForm(); err != nil { w.WriteHeader(http.StatusBadRequest); _, _ = w.Write([]byte("bad request")); return }
+	if err := r.ParseForm(); err != nil {
+		w.WriteHeader(http.StatusBadRequest)
+		_, _ = w.Write([]byte("bad request"))
+		return
+	}
 	tok := r.Form.Get("token")
 	if tok == "" || s.AuthToken == "" || tok != s.AuthToken {
 		w.WriteHeader(http.StatusUnauthorized)
@@ -657,12 +749,33 @@ func (s *Server) handleAuth(w http.ResponseWriter, r *http.Request) {
 	// set cookie for 7 days
 	maxAge := 7 * 24 * 60 * 60
 	secure := r.TLS != nil || strings.EqualFold(r.Header.Get("X-Forwarded-Proto"), "https")
-	http.SetCookie(w, &http.Cookie{Name:"auth_token", Value:tok, Path:"/", MaxAge:maxAge, HttpOnly:true, Secure:secure, SameSite:http.SameSiteLaxMode})
+	http.SetCookie(w, &http.Cookie{Name: "auth_token", Value: tok, Path: "/", MaxAge: maxAge, HttpOnly: true, Secure: secure, SameSite: http.SameSiteLaxMode})
 	w.Header().Set("Location", "/")
 	w.WriteHeader(http.StatusFound)
 }
 
 func (s *Server) handleLogout(w http.ResponseWriter, r *http.Request) {
-	http.SetCookie(w, &http.Cookie{Name:"auth_token", Value:"", Path:"/", MaxAge:-1})
+	http.SetCookie(w, &http.Cookie{Name: "auth_token", Value: "", Path: "/", MaxAge: -1})
 	http.Redirect(w, r, "/login", http.StatusFound)
 }
+
+// Broadcast sends a message to all SSE subscribers for a given channel.
+func (s *Server) Broadcast(channel string, m store.Message) {
+	key := strings.ToLower(strings.TrimSpace(channel))
+	if key == "" {
+		return
+	}
+	s.subsMu.RLock()
+	subs := s.subs[key]
+	s.subsMu.RUnlock()
+	for _, sub := range subs {
+		select {
+		case sub <- m:
+			// ok
+		default:
+			if s.Logger != nil {
+				s.Logger.Warn("sse subscriber buffer full, dropping message", "channel", key)
+			}
+		}
+	}
+}
diff --git a/internal/httpapi/static/app.css b/internal/httpapi/static/app.css
new file mode 100644
index 0000000..b4959c3
--- /dev/null
+++ b/internal/httpapi/static/app.css
@@ -0,0 +1,13 @@
+body { padding: 0; }
+header.nav { position: sticky; top: 0; z-index: 10; padding: .6rem 1rem; border-bottom: 1px solid var(--muted-border-color); display: flex; justify-content: space-between; align-items: center; }
+header.nav a.brand { text-decoration: none; font-weight: 600; }
+main.container { display: grid; grid-template-columns: 220px 1fr; gap: 0; min-height: calc(100vh - 3rem); }
+aside.sidebar { border-right: 1px solid var(--muted-border-color); padding: .75rem; overflow-y: auto; }
+aside.sidebar a { display:block; padding:.25rem .5rem; border-radius:.25rem; text-decoration:none; }
+aside.sidebar a.active { background: var(--muted-color); color: var(--contrast); }
+section.chat { padding: .75rem 1rem; display:flex; flex-direction: column; height: calc(100vh - 3.5rem); }
+#tail { flex: 1; overflow: auto; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; height: calc(100vh - 4.5rem); }
+.ts { opacity: .66; }
+.msg { margin-bottom: .25rem; }
+footer { text-align: center; font-size: .85rem; padding: .5rem 0; opacity: .7; }
+@media (max-width: 900px) { main.container { grid-template-columns: 1fr; } aside.sidebar { display:none; } }
diff --git a/internal/httpapi/static/app.js b/internal/httpapi/static/app.js
new file mode 100644
index 0000000..9e396db
--- /dev/null
+++ b/internal/httpapi/static/app.js
@@ -0,0 +1,39 @@
+// Shared state
+const st = { tailLoading: false, atBottom: true, current: '#', earliest: null, sse: null, channels: [] };
+
+function colorFor(nick){ let h=0; for(let i=0;i<nick.length;i++){ h=(h*31+nick.charCodeAt(i))>>>0 } return 'hsl('+(h%360)+',60%,'+(window.matchMedia('(prefers-color-scheme: dark)').matches? '70%':'35%')+')'; }
+function escapeHtml(s){ return s.replace(/[&<>"]/g, c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c])); }
+function linkify(t){ return t.replace(/https?:\/\/\S+/g, function(u){ return '<a href="' + u + '" target="_blank" rel="noopener">' + u + '</a>'; }); }
+function lineHTML(m){ const ts = '<span class=ts>[' + m.time + ']</span>'; const nick = '<b style="color:' + colorFor(m.author) + '">' + m.author + '</b>'; const body = escapeHtml(m.body); return ts + ' ' + nick + ': ' + linkify(body); }
+
+async function api(path, params){
+  const url = new URL(path, window.location.origin);
+  if(params && params.query){ Object.entries(params.query).forEach(([k,v])=>url.searchParams.set(k,v)); }
+  const res = await fetch(url);
+  if(!res.ok) throw new Error('HTTP '+res.status);
+  const ct = res.headers.get('content-type')||'';
+  if(ct.includes('application/json')) return res.json();
+  return res.text();
+}
+
+function appendBatch(arr){ const el=document.getElementById('tail'); const frag=document.createDocumentFragment(); arr.forEach(m=>{ const div=document.createElement('div'); div.className='msg'; div.innerHTML=lineHTML(m); frag.appendChild(div); processLinks(div); }); el.appendChild(frag); if(st.atBottom){ el.scrollTop = el.scrollHeight; } }
+function prependBatch(arr){ const el=document.getElementById('tail'); const oldTop=el.firstChild; const frag=document.createDocumentFragment(); arr.forEach(m=>{ const div=document.createElement('div'); div.className='msg'; div.innerHTML=lineHTML(m); frag.appendChild(div); processLinks(div); }); el.insertBefore(frag, el.firstChild); if(oldTop){ oldTop.scrollIntoView(); } }
+
+function processLinks(scope){ const links = scope.querySelectorAll('a[href]:not([data-card])'); links.forEach(a=>{ a.setAttribute('data-card','1'); fetch('/api/linkcard?url='+encodeURIComponent(a.href)).then(r=>r.json()).then(card=>{ if(!card) return; if(card.title||card.description||card.image){ const c=document.createElement('div'); c.className='card'; var html=''; if(card.image){ html += '<div><img src="'+card.image+'" alt="" style="max-width:160px;max-height:120px;object-fit:cover;border-radius:.25rem"></div>'; } html += '<div style="flex:1;margin-left:.5rem">'; if(card.title){ html += '<div style="font-weight:600">'+escapeHtml(card.title)+'</div>'; } if(card.description){ html += '<div style="opacity:.8">'+escapeHtml(card.description)+'</div>'; } html += '</div>'; c.innerHTML = '<div style="display:flex;align-items:flex-start;gap:.5rem">'+html+'</div>'; a.parentNode.insertBefore(c, a.nextSibling); } }).catch(()=>{}); }); }
+
+async function loadChannels(){ try{ const data = await api('/api/channels'); st.channels = data; renderChannels(); if(data.length>0){ selectChannel(data[0]); } } catch(e){} }
+function renderChannels(){ const list=document.getElementById('chanlist'); if(!list) return; list.innerHTML=''; st.channels.forEach(c=>{ const a=document.createElement('a'); a.href='#'; a.textContent=c; a.onclick=(ev)=>{ev.preventDefault(); selectChannel(c)}; if(c===st.current) a.className='active'; list.appendChild(a); }); }
+
+async function selectChannel(ch){ if(st.sse){ st.sse.close(); st.sse=null; } st.current=ch; renderChannels(); const el=document.getElementById('tail'); if(!el) return; el.textContent=''; const data = await api('/api/tail',{query:{channel:ch,limit:50}}); appendBatch(data); el.scrollTop = el.scrollHeight; st.atBottom=true; st.earliest = data.length? data[0].time : null; startStream(); initScrollHandlers(); }
+function initScrollHandlers(){ const el=document.getElementById('tail'); if(!el) return; el.onscroll=async ()=>{ st.atBottom = (el.scrollTop + el.clientHeight + 8) >= el.scrollHeight; if(el.scrollTop === 0 && st.earliest){ try{ const older = await api('/api/history',{query:{channel:st.current,before:st.earliest,limit:50}}); if(older.length){ const hBefore = el.scrollHeight; prependBatch(older); st.earliest = older[0].time; const hAfter = el.scrollHeight; el.scrollTop = hAfter - hBefore; } } catch(e){} } } }
+
+function startStream(){ const el=document.getElementById('tail'); if(!el) return; const url=new URL('/api/stream', window.location.origin); url.searchParams.set('channel', st.current); const es=new EventSource(url); st.sse=es; es.onmessage=(ev)=>{ try{ const m=JSON.parse(ev.data); appendBatch([m]); }catch(e){} }; es.onerror=()=>{ es.close(); st.sse=null; setTimeout(startStream, 3000); } }
+
+async function summarize(){ const ch=document.getElementById('channel'); const win=document.getElementById('window'); const push=document.getElementById('push'); const btn=document.getElementById('btn'); const out=document.getElementById('out'); if(!ch||!win||!btn||!out) return; btn.disabled=true; out.textContent=''; try{ const data = await api('/api/trigger',{query:{channel:ch.value,window:win.value||'6h',push:push && push.checked? '1':'0'}}); if(typeof data === 'string'){ out.textContent = data; } else { out.textContent = (data.summary||''); } } catch(e){ out.textContent = 'error: '+e; } btn.disabled=false; }
+
+window.addEventListener('DOMContentLoaded', ()=>{
+  if(document.getElementById('chanlist')){ loadChannels(); }
+  if(document.getElementById('channel')){
+    fetch('/api/channels').then(r=>r.json()).then(arr=>{ const sel=document.getElementById('channel'); arr.forEach(c=>{ const o=document.createElement('option'); o.value=c; o.textContent=c; sel.appendChild(o); }); }).catch(()=>{});
+  }
+});
diff --git a/internal/httpapi/templates.go b/internal/httpapi/templates.go
new file mode 100644
index 0000000..8f3fbe8
--- /dev/null
+++ b/internal/httpapi/templates.go
@@ -0,0 +1,47 @@
+package httpapi
+
+import (
+	"embed"
+	"html/template"
+	"net/http"
+	"path"
+	"strings"
+	"sync"
+)
+
+//go:embed templates/*.tmpl
+var uiFS embed.FS
+
+//go:embed static/*
+var staticFS embed.FS
+
+var (
+	tplOnce sync.Once
+	tpl     *template.Template
+)
+
+func (s *Server) parseTemplatesOnce() {
+	tplOnce.Do(func() {
+		// Parse all templates under templates/
+		t := template.New("base").Funcs(template.FuncMap{})
+		t = template.Must(t.ParseFS(uiFS, "templates/*.tmpl"))
+		tpl = t
+	})
+}
+
+func (s *Server) render(w http.ResponseWriter, name string, data map[string]any) {
+	s.parseTemplatesOnce()
+	if data == nil {
+		data = map[string]any{}
+	}
+	data["Version"] = s.Version
+	data["Commit"] = s.Commit
+	base := strings.TrimSuffix(path.Base(name), path.Ext(name))
+	if base == "dashboard" {
+		data["Title"] = "sojuboy"
+	} else {
+		data["Title"] = strings.Title(base)
+	}
+	w.Header().Set("Content-Type", "text/html; charset=utf-8")
+	_ = tpl.ExecuteTemplate(w, name, data)
+}
diff --git a/internal/httpapi/templates/dashboard.tmpl b/internal/httpapi/templates/dashboard.tmpl
new file mode 100644
index 0000000..a0fa421
--- /dev/null
+++ b/internal/httpapi/templates/dashboard.tmpl
@@ -0,0 +1,12 @@
+{{ define "content" }}
+<main class="container">
+  <aside class="sidebar">
+    <nav id="chanlist"></nav>
+  </aside>
+  <section class="chat">
+    <div id="tail"></div>
+  </section>
+</main>
+{{ end }}
+{{ template "layout.tmpl" . }}
+
diff --git a/internal/httpapi/templates/layout.tmpl b/internal/httpapi/templates/layout.tmpl
new file mode 100644
index 0000000..d9a8b39
--- /dev/null
+++ b/internal/httpapi/templates/layout.tmpl
@@ -0,0 +1,27 @@
+{{ define "layout.tmpl" }}
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  <title>{{ .Title }} · sojuboy</title>
+  <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@2/css/pico.min.css">
+  <link rel="stylesheet" href="/static/app.css">
+  <script defer src="/static/app.js"></script>
+</head>
+<body>
+  <header class="nav">
+    <div><a class="brand" href="/">sojuboy</a></div>
+    <nav>
+      <ul>
+        <li><a href="/summarizer">Summarizer</a></li>
+        <li><a href="/logout">Logout</a></li>
+      </ul>
+    </nav>
+  </header>
+  {{ block "content" . }}{{ end }}
+  <footer><small>{{ .Version }} ({{ .Commit }})</small></footer>
+</body>
+</html>
+{{ end }}
+
diff --git a/internal/httpapi/templates/summarizer.tmpl b/internal/httpapi/templates/summarizer.tmpl
new file mode 100644
index 0000000..a22cd37
--- /dev/null
+++ b/internal/httpapi/templates/summarizer.tmpl
@@ -0,0 +1,14 @@
+{{ define "content" }}
+<main class="container">
+  <article>
+    <h3>On-demand summarization</h3>
+    <label>Channel<select id="channel"></select></label>
+    <label>Window<input id="window" value="6h"></label>
+    <label><input type="checkbox" id="push"> Send via Pushover</label>
+    <button id="btn" onclick="summarize()">Summarize</button>
+    <pre id="out"></pre>
+  </article>
+</main>
+{{ end }}
+{{ template "layout.tmpl" . }}
+

From 0e0d0ea8242366045bdccad2bb21af8b70165766 Mon Sep 17 00:00:00 2001
From: Thomas Cravey <tjcravey@MacBookPro.localdomain>
Date: Sat, 16 Aug 2025 21:43:06 -0500
Subject: [PATCH 02/32] =?UTF-8?q?feat(webui):=20add=20on-demand=20?=
 =?UTF-8?q?=E2=96=B6=20link=20summary=20UI;=20calls=20/api/linksummary=20a?=
 =?UTF-8?q?nd=20renders=20inline=20under=20link=20card=20(24h=20cache)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 internal/httpapi/static/app.js | 32 +++++++++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/internal/httpapi/static/app.js b/internal/httpapi/static/app.js
index 9e396db..77a1b59 100644
--- a/internal/httpapi/static/app.js
+++ b/internal/httpapi/static/app.js
@@ -19,7 +19,37 @@ async function api(path, params){
 function appendBatch(arr){ const el=document.getElementById('tail'); const frag=document.createDocumentFragment(); arr.forEach(m=>{ const div=document.createElement('div'); div.className='msg'; div.innerHTML=lineHTML(m); frag.appendChild(div); processLinks(div); }); el.appendChild(frag); if(st.atBottom){ el.scrollTop = el.scrollHeight; } }
 function prependBatch(arr){ const el=document.getElementById('tail'); const oldTop=el.firstChild; const frag=document.createDocumentFragment(); arr.forEach(m=>{ const div=document.createElement('div'); div.className='msg'; div.innerHTML=lineHTML(m); frag.appendChild(div); processLinks(div); }); el.insertBefore(frag, el.firstChild); if(oldTop){ oldTop.scrollIntoView(); } }
 
-function processLinks(scope){ const links = scope.querySelectorAll('a[href]:not([data-card])'); links.forEach(a=>{ a.setAttribute('data-card','1'); fetch('/api/linkcard?url='+encodeURIComponent(a.href)).then(r=>r.json()).then(card=>{ if(!card) return; if(card.title||card.description||card.image){ const c=document.createElement('div'); c.className='card'; var html=''; if(card.image){ html += '<div><img src="'+card.image+'" alt="" style="max-width:160px;max-height:120px;object-fit:cover;border-radius:.25rem"></div>'; } html += '<div style="flex:1;margin-left:.5rem">'; if(card.title){ html += '<div style="font-weight:600">'+escapeHtml(card.title)+'</div>'; } if(card.description){ html += '<div style="opacity:.8">'+escapeHtml(card.description)+'</div>'; } html += '</div>'; c.innerHTML = '<div style="display:flex;align-items:flex-start;gap:.5rem">'+html+'</div>'; a.parentNode.insertBefore(c, a.nextSibling); } }).catch(()=>{}); }); }
+function processLinks(scope){ const links = scope.querySelectorAll('a[href]:not([data-card])'); links.forEach(a=>{ a.setAttribute('data-card','1');
+  // Fetch and render card
+  fetch('/api/linkcard?url='+encodeURIComponent(a.href)).then(r=>r.json()).then(card=>{
+    if(!card) return;
+    if(card.title||card.description||card.image){
+      const c=document.createElement('div'); c.className='card'; var html='';
+      if(card.image){ html += '<div><img src="'+card.image+'" alt="" style="max-width:160px;max-height:120px;object-fit:cover;border-radius:.25rem"></div>'; }
+      html += '<div style="flex:1;margin-left:.5rem">';
+      if(card.title){ html += '<div style="font-weight:600">'+escapeHtml(card.title)+'</div>'; }
+      if(card.description){ html += '<div style="opacity:.8">'+escapeHtml(card.description)+'</div>'; }
+      html += '</div>';
+      const row = document.createElement('div'); row.style.display='flex'; row.style.alignItems='flex-start'; row.style.gap='.5rem'; row.innerHTML = html;
+      c.appendChild(row);
+      // Summary control row
+      const ctrl = document.createElement('div'); ctrl.style.marginTop='.25rem';
+      const btn = document.createElement('button'); btn.type='button'; btn.title='Summarize this link'; btn.textContent='\u25B6'; btn.style.padding='0 .4rem'; btn.style.fontSize='.9rem';
+      const spinner = document.createElement('span'); spinner.textContent=''; spinner.style.marginLeft='.5rem';
+      const sum = document.createElement('div'); sum.className='link-summary'; sum.style.whiteSpace='pre-wrap'; sum.style.marginTop='.25rem';
+      btn.onclick = async ()=>{
+        btn.disabled=true; spinner.textContent='…'; sum.textContent='';
+        try{ const data = await api('/api/linksummary',{query:{url:a.href}}); sum.textContent = (data && data.summary) ? data.summary : '(no summary)'; }
+        catch(e){ sum.textContent = 'error: '+e; }
+        spinner.textContent=''; btn.disabled=false;
+      };
+      ctrl.appendChild(btn); ctrl.appendChild(spinner);
+      c.appendChild(ctrl);
+      c.appendChild(sum);
+      a.parentNode.insertBefore(c, a.nextSibling);
+    }
+  }).catch(()=>{});
+}); }
 
 async function loadChannels(){ try{ const data = await api('/api/channels'); st.channels = data; renderChannels(); if(data.length>0){ selectChannel(data[0]); } } catch(e){} }
 function renderChannels(){ const list=document.getElementById('chanlist'); if(!list) return; list.innerHTML=''; st.channels.forEach(c=>{ const a=document.createElement('a'); a.href='#'; a.textContent=c; a.onclick=(ev)=>{ev.preventDefault(); selectChannel(c)}; if(c===st.current) a.className='active'; list.appendChild(a); }); }

From b993482b852eccd6684f14ea1d7dd3b2df150c7c Mon Sep 17 00:00:00 2001
From: Thomas Cravey <tjcravey@MacBookPro.localdomain>
Date: Sun, 17 Aug 2025 13:12:29 -0500
Subject: [PATCH 03/32] fix(webui): render correct page at / (dashboard), use
 base template execution; footer centering, navbar layout via CSS

---
 internal/httpapi/templates.go          | 2 +-
 internal/httpapi/templates/layout.tmpl | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/internal/httpapi/templates.go b/internal/httpapi/templates.go
index 8f3fbe8..c28f46e 100644
--- a/internal/httpapi/templates.go
+++ b/internal/httpapi/templates.go
@@ -43,5 +43,5 @@ func (s *Server) render(w http.ResponseWriter, name string, data map[string]any)
 		data["Title"] = strings.Title(base)
 	}
 	w.Header().Set("Content-Type", "text/html; charset=utf-8")
-	_ = tpl.ExecuteTemplate(w, name, data)
+	_ = tpl.ExecuteTemplate(w, base, data)
 }
diff --git a/internal/httpapi/templates/layout.tmpl b/internal/httpapi/templates/layout.tmpl
index d9a8b39..ce2f8bd 100644
--- a/internal/httpapi/templates/layout.tmpl
+++ b/internal/httpapi/templates/layout.tmpl
@@ -19,7 +19,7 @@
       </ul>
     </nav>
   </header>
-  {{ block "content" . }}{{ end }}
+  {{ template .Content . }}
   <footer><small>{{ .Version }} ({{ .Commit }})</small></footer>
 </body>
 </html>

From 3ed38031bed7b2b9ec36b90b2b099a761faee61a Mon Sep 17 00:00:00 2001
From: Thomas Cravey <tjcravey@MacBookPro.localdomain>
Date: Sun, 17 Aug 2025 13:20:17 -0500
Subject: [PATCH 04/32] fix(webui): blank page regression; execute named
 templates (dashboard.tmpl, summarizer.tmpl) in render()

---
 internal/httpapi/templates.go          | 2 +-
 internal/httpapi/templates/layout.tmpl | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/internal/httpapi/templates.go b/internal/httpapi/templates.go
index c28f46e..8f3fbe8 100644
--- a/internal/httpapi/templates.go
+++ b/internal/httpapi/templates.go
@@ -43,5 +43,5 @@ func (s *Server) render(w http.ResponseWriter, name string, data map[string]any)
 		data["Title"] = strings.Title(base)
 	}
 	w.Header().Set("Content-Type", "text/html; charset=utf-8")
-	_ = tpl.ExecuteTemplate(w, base, data)
+	_ = tpl.ExecuteTemplate(w, name, data)
 }
diff --git a/internal/httpapi/templates/layout.tmpl b/internal/httpapi/templates/layout.tmpl
index ce2f8bd..d9a8b39 100644
--- a/internal/httpapi/templates/layout.tmpl
+++ b/internal/httpapi/templates/layout.tmpl
@@ -19,7 +19,7 @@
       </ul>
     </nav>
   </header>
-  {{ template .Content . }}
+  {{ block "content" . }}{{ end }}
   <footer><small>{{ .Version }} ({{ .Commit }})</small></footer>
 </body>
 </html>

From ab114908079d3c7519560386c45615400635b48e Mon Sep 17 00:00:00 2001
From: Thomas Cravey <tjcravey@MacBookPro.localdomain>
Date: Sun, 17 Aug 2025 13:31:18 -0500
Subject: [PATCH 05/32] fix(webui): correct layout rendering; select content
 template by name and include via layout; fix navbar/footer appearance

---
 internal/httpapi/templates.go              | 4 +++-
 internal/httpapi/templates/dashboard.tmpl  | 4 ++--
 internal/httpapi/templates/layout.tmpl     | 6 +++++-
 internal/httpapi/templates/summarizer.tmpl | 4 ++--
 4 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/internal/httpapi/templates.go b/internal/httpapi/templates.go
index 8f3fbe8..39d1b53 100644
--- a/internal/httpapi/templates.go
+++ b/internal/httpapi/templates.go
@@ -42,6 +42,8 @@ func (s *Server) render(w http.ResponseWriter, name string, data map[string]any)
 	} else {
 		data["Title"] = strings.Title(base)
 	}
+	// Tell layout which content template to include
+	data["Content"] = base
 	w.Header().Set("Content-Type", "text/html; charset=utf-8")
-	_ = tpl.ExecuteTemplate(w, name, data)
+	_ = tpl.ExecuteTemplate(w, "layout.tmpl", data)
 }
diff --git a/internal/httpapi/templates/dashboard.tmpl b/internal/httpapi/templates/dashboard.tmpl
index a0fa421..b7f5111 100644
--- a/internal/httpapi/templates/dashboard.tmpl
+++ b/internal/httpapi/templates/dashboard.tmpl
@@ -1,4 +1,4 @@
-{{ define "content" }}
+{{ define "dashboard" }}
 <main class="container">
   <aside class="sidebar">
     <nav id="chanlist"></nav>
@@ -8,5 +8,5 @@
   </section>
 </main>
 {{ end }}
-{{ template "layout.tmpl" . }}
+{{/* layout executes us via .Content */}}
 
diff --git a/internal/httpapi/templates/layout.tmpl b/internal/httpapi/templates/layout.tmpl
index d9a8b39..3bfc76e 100644
--- a/internal/httpapi/templates/layout.tmpl
+++ b/internal/httpapi/templates/layout.tmpl
@@ -19,7 +19,11 @@
       </ul>
     </nav>
   </header>
-  {{ block "content" . }}{{ end }}
+  {{ if eq .Content "dashboard" }}
+    {{ template "dashboard" . }}
+  {{ else if eq .Content "summarizer" }}
+    {{ template "summarizer" . }}
+  {{ end }}
   <footer><small>{{ .Version }} ({{ .Commit }})</small></footer>
 </body>
 </html>
diff --git a/internal/httpapi/templates/summarizer.tmpl b/internal/httpapi/templates/summarizer.tmpl
index a22cd37..c7b9e5a 100644
--- a/internal/httpapi/templates/summarizer.tmpl
+++ b/internal/httpapi/templates/summarizer.tmpl
@@ -1,4 +1,4 @@
-{{ define "content" }}
+{{ define "summarizer" }}
 <main class="container">
   <article>
     <h3>On-demand summarization</h3>
@@ -10,5 +10,5 @@
   </article>
 </main>
 {{ end }}
-{{ template "layout.tmpl" . }}
+{{/* layout executes us via .Content */}}
 

From fb92930e7a04911e55800143fa21332b73e41cd1 Mon Sep 17 00:00:00 2001
From: Thomas Cravey <tjcravey@MacBookPro.localdomain>
Date: Sun, 17 Aug 2025 13:36:37 -0500
Subject: [PATCH 06/32] fix(webui): serve embedded static from /static/*
 correctly (fs.Sub(staticFS, "static"))

---
 internal/httpapi/server.go | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/internal/httpapi/server.go b/internal/httpapi/server.go
index 2cfa5a4..c31419a 100644
--- a/internal/httpapi/server.go
+++ b/internal/httpapi/server.go
@@ -64,7 +64,7 @@ func (s *Server) Start(ctx context.Context) error {
 	mux.HandleFunc("/", s.handleUIDash)
 	mux.HandleFunc("/summarizer", s.handleUISummarizer)
 	// Serve embedded static files under /static/
-	if sub, err := fs.Sub(staticFS, "."); err == nil {
+	if sub, err := fs.Sub(staticFS, "static"); err == nil {
 		mux.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.FS(sub))))
 	}
 	mux.HandleFunc("/login", s.handleLogin)

From f7d97db56934715c77717949215b69f66d3b6c33 Mon Sep 17 00:00:00 2001
From: Thomas Cravey <tjcravey@MacBookPro.localdomain>
Date: Sun, 17 Aug 2025 13:50:38 -0500
Subject: [PATCH 07/32] fix(webui): summarizer wrapping and width; scope
 dashboard grid to .dash; ensure #out wraps and fills; adjust dashboard main
 class

---
 internal/httpapi/static/app.css           | 15 +++++++++------
 internal/httpapi/templates/dashboard.tmpl |  2 +-
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/internal/httpapi/static/app.css b/internal/httpapi/static/app.css
index b4959c3..e0c8ea7 100644
--- a/internal/httpapi/static/app.css
+++ b/internal/httpapi/static/app.css
@@ -1,13 +1,16 @@
 body { padding: 0; }
 header.nav { position: sticky; top: 0; z-index: 10; padding: .6rem 1rem; border-bottom: 1px solid var(--muted-border-color); display: flex; justify-content: space-between; align-items: center; }
 header.nav a.brand { text-decoration: none; font-weight: 600; }
-main.container { display: grid; grid-template-columns: 220px 1fr; gap: 0; min-height: calc(100vh - 3rem); }
-aside.sidebar { border-right: 1px solid var(--muted-border-color); padding: .75rem; overflow-y: auto; }
-aside.sidebar a { display:block; padding:.25rem .5rem; border-radius:.25rem; text-decoration:none; }
-aside.sidebar a.active { background: var(--muted-color); color: var(--contrast); }
-section.chat { padding: .75rem 1rem; display:flex; flex-direction: column; height: calc(100vh - 3.5rem); }
+/* Dashboard-only grid layout */
+.dash { display: grid; grid-template-columns: 220px 1fr; gap: 0; min-height: calc(100vh - 3rem); }
+.dash aside.sidebar { border-right: 1px solid var(--muted-border-color); padding: .75rem; overflow-y: auto; }
+.dash aside.sidebar a { display:block; padding:.25rem .5rem; border-radius:.25rem; text-decoration:none; }
+.dash aside.sidebar a.active { background: var(--muted-color); color: var(--contrast); }
+.dash section.chat { padding: .75rem 1rem; display:flex; flex-direction: column; height: calc(100vh - 3.5rem); }
 #tail { flex: 1; overflow: auto; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; height: calc(100vh - 4.5rem); }
 .ts { opacity: .66; }
 .msg { margin-bottom: .25rem; }
 footer { text-align: center; font-size: .85rem; padding: .5rem 0; opacity: .7; }
-@media (max-width: 900px) { main.container { grid-template-columns: 1fr; } aside.sidebar { display:none; } }
+@media (max-width: 900px) { .dash { grid-template-columns: 1fr; } .dash aside.sidebar { display:none; } }
+/* Summarizer output wrapping */
+#out { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
diff --git a/internal/httpapi/templates/dashboard.tmpl b/internal/httpapi/templates/dashboard.tmpl
index b7f5111..c6ea560 100644
--- a/internal/httpapi/templates/dashboard.tmpl
+++ b/internal/httpapi/templates/dashboard.tmpl
@@ -1,5 +1,5 @@
 {{ define "dashboard" }}
-<main class="container">
+<main class="dash">
   <aside class="sidebar">
     <nav id="chanlist"></nav>
   </aside>

From 0dd9b072e8e0be7df73beabcec897ac98d11f95e Mon Sep 17 00:00:00 2001
From: Thomas Cravey <tjcravey@MacBookPro.localdomain>
Date: Sun, 17 Aug 2025 14:06:34 -0500
Subject: [PATCH 08/32] feat(webui): sticky opaque navbar/footer; scope grid to
 dashboard; single-scroll main with autoscroll; summarizer wraps

---
 internal/httpapi/static/app.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/internal/httpapi/static/app.css b/internal/httpapi/static/app.css
index e0c8ea7..0f9977f 100644
--- a/internal/httpapi/static/app.css
+++ b/internal/httpapi/static/app.css
@@ -1,5 +1,5 @@
 body { padding: 0; }
-header.nav { position: sticky; top: 0; z-index: 10; padding: .6rem 1rem; border-bottom: 1px solid var(--muted-border-color); display: flex; justify-content: space-between; align-items: center; }
+header.nav { position: sticky; top: 0; z-index: 10; padding: .6rem 1rem; border-bottom: 1px solid var(--muted-border-color); display: flex; justify-content: space-between; align-items: center; background: var(--background-color); }
 header.nav a.brand { text-decoration: none; font-weight: 600; }
 /* Dashboard-only grid layout */
 .dash { display: grid; grid-template-columns: 220px 1fr; gap: 0; min-height: calc(100vh - 3rem); }

From d3ab367f6c0d8e7d67583a0ca5a718b29b323fe2 Mon Sep 17 00:00:00 2001
From: Thomas Cravey <tjcravey@MacBookPro.localdomain>
Date: Sun, 17 Aug 2025 14:12:33 -0500
Subject: [PATCH 09/32] fix(webui): eliminate double scroll; lock footer;
 opaque header/footer; use CSS grid body layout and height:100% for content

---
 internal/httpapi/static/app.css | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/internal/httpapi/static/app.css b/internal/httpapi/static/app.css
index 0f9977f..775654f 100644
--- a/internal/httpapi/static/app.css
+++ b/internal/httpapi/static/app.css
@@ -1,16 +1,17 @@
-body { padding: 0; }
+html, body { height: 100%; }
+body { padding: 0; display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; overflow: hidden; }
 header.nav { position: sticky; top: 0; z-index: 10; padding: .6rem 1rem; border-bottom: 1px solid var(--muted-border-color); display: flex; justify-content: space-between; align-items: center; background: var(--background-color); }
 header.nav a.brand { text-decoration: none; font-weight: 600; }
 /* Dashboard-only grid layout */
-.dash { display: grid; grid-template-columns: 220px 1fr; gap: 0; min-height: calc(100vh - 3rem); }
+.dash { display: grid; grid-template-columns: 220px 1fr; gap: 0; height: 100%; min-height: 0; }
 .dash aside.sidebar { border-right: 1px solid var(--muted-border-color); padding: .75rem; overflow-y: auto; }
 .dash aside.sidebar a { display:block; padding:.25rem .5rem; border-radius:.25rem; text-decoration:none; }
 .dash aside.sidebar a.active { background: var(--muted-color); color: var(--contrast); }
-.dash section.chat { padding: .75rem 1rem; display:flex; flex-direction: column; height: calc(100vh - 3.5rem); }
-#tail { flex: 1; overflow: auto; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; height: calc(100vh - 4.5rem); }
+.dash section.chat { padding: .75rem 1rem; display:flex; flex-direction: column; height: 100%; min-height: 0; }
+#tail { flex: 1; overflow: auto; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; height: 100%; }
 .ts { opacity: .66; }
 .msg { margin-bottom: .25rem; }
-footer { text-align: center; font-size: .85rem; padding: .5rem 0; opacity: .7; }
+footer { text-align: center; font-size: .85rem; padding: .5rem 0; opacity: .7; background: var(--background-color); }
 @media (max-width: 900px) { .dash { grid-template-columns: 1fr; } .dash aside.sidebar { display:none; } }
 /* Summarizer output wrapping */
 #out { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }

From e4f58281fb18aa28c8e988a6dcaf92dbaf803f4d Mon Sep 17 00:00:00 2001
From: Thomas Cravey <tjcravey@MacBookPro.localdomain>
Date: Sun, 17 Aug 2025 14:18:16 -0500
Subject: [PATCH 10/32] feat(webui): switch to page scrollbar; adjust autopin
 to bottom and infinite scroll using window scroll; keep at-bottom behavior

---
 internal/httpapi/static/app.css | 4 ++--
 internal/httpapi/static/app.js  | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/internal/httpapi/static/app.css b/internal/httpapi/static/app.css
index 775654f..d1daaed 100644
--- a/internal/httpapi/static/app.css
+++ b/internal/httpapi/static/app.css
@@ -1,5 +1,5 @@
 html, body { height: 100%; }
-body { padding: 0; display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; overflow: hidden; }
+body { padding: 0; display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; }
 header.nav { position: sticky; top: 0; z-index: 10; padding: .6rem 1rem; border-bottom: 1px solid var(--muted-border-color); display: flex; justify-content: space-between; align-items: center; background: var(--background-color); }
 header.nav a.brand { text-decoration: none; font-weight: 600; }
 /* Dashboard-only grid layout */
@@ -8,7 +8,7 @@ header.nav a.brand { text-decoration: none; font-weight: 600; }
 .dash aside.sidebar a { display:block; padding:.25rem .5rem; border-radius:.25rem; text-decoration:none; }
 .dash aside.sidebar a.active { background: var(--muted-color); color: var(--contrast); }
 .dash section.chat { padding: .75rem 1rem; display:flex; flex-direction: column; height: 100%; min-height: 0; }
-#tail { flex: 1; overflow: auto; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; height: 100%; }
+#tail { flex: 1; overflow: visible; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; height: auto; }
 .ts { opacity: .66; }
 .msg { margin-bottom: .25rem; }
 footer { text-align: center; font-size: .85rem; padding: .5rem 0; opacity: .7; background: var(--background-color); }
diff --git a/internal/httpapi/static/app.js b/internal/httpapi/static/app.js
index 77a1b59..490f020 100644
--- a/internal/httpapi/static/app.js
+++ b/internal/httpapi/static/app.js
@@ -16,8 +16,8 @@ async function api(path, params){
   return res.text();
 }
 
-function appendBatch(arr){ const el=document.getElementById('tail'); const frag=document.createDocumentFragment(); arr.forEach(m=>{ const div=document.createElement('div'); div.className='msg'; div.innerHTML=lineHTML(m); frag.appendChild(div); processLinks(div); }); el.appendChild(frag); if(st.atBottom){ el.scrollTop = el.scrollHeight; } }
-function prependBatch(arr){ const el=document.getElementById('tail'); const oldTop=el.firstChild; const frag=document.createDocumentFragment(); arr.forEach(m=>{ const div=document.createElement('div'); div.className='msg'; div.innerHTML=lineHTML(m); frag.appendChild(div); processLinks(div); }); el.insertBefore(frag, el.firstChild); if(oldTop){ oldTop.scrollIntoView(); } }
+function appendBatch(arr){ const el=document.getElementById('tail'); const frag=document.createDocumentFragment(); arr.forEach(m=>{ const div=document.createElement('div'); div.className='msg'; div.innerHTML=lineHTML(m); frag.appendChild(div); processLinks(div); }); el.appendChild(frag); if(st.atBottom){ window.scrollTo({top: document.body.scrollHeight, behavior: 'instant'}); } }
+function prependBatch(arr){ const el=document.getElementById('tail'); const oldTop=el.firstChild; const prevPageOffset = window.pageYOffset; const frag=document.createDocumentFragment(); arr.forEach(m=>{ const div=document.createElement('div'); div.className='msg'; div.innerHTML=lineHTML(m); frag.appendChild(div); processLinks(div); }); el.insertBefore(frag, el.firstChild); if(oldTop){ oldTop.scrollIntoView(); window.scrollTo({top: oldTop.getBoundingClientRect().top + window.pageYOffset - 80, behavior: 'instant'}); } else { window.scrollTo({top: prevPageOffset, behavior: 'instant'}); } }
 
 function processLinks(scope){ const links = scope.querySelectorAll('a[href]:not([data-card])'); links.forEach(a=>{ a.setAttribute('data-card','1');
   // Fetch and render card
@@ -55,7 +55,7 @@ async function loadChannels(){ try{ const data = await api('/api/channels'); st.
 function renderChannels(){ const list=document.getElementById('chanlist'); if(!list) return; list.innerHTML=''; st.channels.forEach(c=>{ const a=document.createElement('a'); a.href='#'; a.textContent=c; a.onclick=(ev)=>{ev.preventDefault(); selectChannel(c)}; if(c===st.current) a.className='active'; list.appendChild(a); }); }
 
 async function selectChannel(ch){ if(st.sse){ st.sse.close(); st.sse=null; } st.current=ch; renderChannels(); const el=document.getElementById('tail'); if(!el) return; el.textContent=''; const data = await api('/api/tail',{query:{channel:ch,limit:50}}); appendBatch(data); el.scrollTop = el.scrollHeight; st.atBottom=true; st.earliest = data.length? data[0].time : null; startStream(); initScrollHandlers(); }
-function initScrollHandlers(){ const el=document.getElementById('tail'); if(!el) return; el.onscroll=async ()=>{ st.atBottom = (el.scrollTop + el.clientHeight + 8) >= el.scrollHeight; if(el.scrollTop === 0 && st.earliest){ try{ const older = await api('/api/history',{query:{channel:st.current,before:st.earliest,limit:50}}); if(older.length){ const hBefore = el.scrollHeight; prependBatch(older); st.earliest = older[0].time; const hAfter = el.scrollHeight; el.scrollTop = hAfter - hBefore; } } catch(e){} } } }
+function initScrollHandlers(){ const el=document.getElementById('tail'); if(!el) return; const onScroll = async ()=>{ const nearBottom = (window.innerHeight + window.pageYOffset + 16) >= document.body.offsetHeight; st.atBottom = nearBottom; if(window.pageYOffset === 0 && st.earliest){ try{ const older = await api('/api/history',{query:{channel:st.current,before:st.earliest,limit:50}}); if(older.length){ prependBatch(older); st.earliest = older[0].time; } } catch(e){} } }; window.removeEventListener('scroll', st._scrollHandler || (()=>{})); st._scrollHandler = onScroll; window.addEventListener('scroll', onScroll, {passive:true}); }
 
 function startStream(){ const el=document.getElementById('tail'); if(!el) return; const url=new URL('/api/stream', window.location.origin); url.searchParams.set('channel', st.current); const es=new EventSource(url); st.sse=es; es.onmessage=(ev)=>{ try{ const m=JSON.parse(ev.data); appendBatch([m]); }catch(e){} }; es.onerror=()=>{ es.close(); st.sse=null; setTimeout(startStream, 3000); } }
 

From 21a49c18a0d15ad8f6d5b00690e8e45fbc8b8fcc Mon Sep 17 00:00:00 2001
From: Thomas Cravey <tjcravey@MacBookPro.localdomain>
Date: Sun, 17 Aug 2025 14:25:04 -0500
Subject: [PATCH 11/32] fix(webui): lock footer/header visibly using sticky +
 high z-index and solid background; preserve scroll position on history
 prepend; robust at-bottom detection

---
 internal/httpapi/static/app.css | 4 ++--
 internal/httpapi/static/app.js  | 5 +++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/internal/httpapi/static/app.css b/internal/httpapi/static/app.css
index d1daaed..c289444 100644
--- a/internal/httpapi/static/app.css
+++ b/internal/httpapi/static/app.css
@@ -1,6 +1,6 @@
 html, body { height: 100%; }
 body { padding: 0; display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; }
-header.nav { position: sticky; top: 0; z-index: 10; padding: .6rem 1rem; border-bottom: 1px solid var(--muted-border-color); display: flex; justify-content: space-between; align-items: center; background: var(--background-color); }
+header.nav { position: sticky; top: 0; z-index: 1000; padding: .6rem 1rem; border-bottom: 1px solid var(--muted-border-color); display: flex; justify-content: space-between; align-items: center; background-color: var(--pico-background-color, #fff); }
 header.nav a.brand { text-decoration: none; font-weight: 600; }
 /* Dashboard-only grid layout */
 .dash { display: grid; grid-template-columns: 220px 1fr; gap: 0; height: 100%; min-height: 0; }
@@ -11,7 +11,7 @@ header.nav a.brand { text-decoration: none; font-weight: 600; }
 #tail { flex: 1; overflow: visible; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; height: auto; }
 .ts { opacity: .66; }
 .msg { margin-bottom: .25rem; }
-footer { text-align: center; font-size: .85rem; padding: .5rem 0; opacity: .7; background: var(--background-color); }
+footer { position: sticky; bottom: 0; z-index: 1000; text-align: center; font-size: .85rem; padding: .5rem 0; opacity: .7; background-color: var(--pico-background-color, #fff); border-top: 1px solid var(--muted-border-color); }
 @media (max-width: 900px) { .dash { grid-template-columns: 1fr; } .dash aside.sidebar { display:none; } }
 /* Summarizer output wrapping */
 #out { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
diff --git a/internal/httpapi/static/app.js b/internal/httpapi/static/app.js
index 490f020..5ec1f5d 100644
--- a/internal/httpapi/static/app.js
+++ b/internal/httpapi/static/app.js
@@ -17,7 +17,8 @@ async function api(path, params){
 }
 
 function appendBatch(arr){ const el=document.getElementById('tail'); const frag=document.createDocumentFragment(); arr.forEach(m=>{ const div=document.createElement('div'); div.className='msg'; div.innerHTML=lineHTML(m); frag.appendChild(div); processLinks(div); }); el.appendChild(frag); if(st.atBottom){ window.scrollTo({top: document.body.scrollHeight, behavior: 'instant'}); } }
-function prependBatch(arr){ const el=document.getElementById('tail'); const oldTop=el.firstChild; const prevPageOffset = window.pageYOffset; const frag=document.createDocumentFragment(); arr.forEach(m=>{ const div=document.createElement('div'); div.className='msg'; div.innerHTML=lineHTML(m); frag.appendChild(div); processLinks(div); }); el.insertBefore(frag, el.firstChild); if(oldTop){ oldTop.scrollIntoView(); window.scrollTo({top: oldTop.getBoundingClientRect().top + window.pageYOffset - 80, behavior: 'instant'}); } else { window.scrollTo({top: prevPageOffset, behavior: 'instant'}); } }
+function prependBatch(arr){ const el=document.getElementById('tail'); const oldTop=el.firstChild; const beforeTop = oldTop ? oldTop.getBoundingClientRect().top : 0; const frag=document.createDocumentFragment(); arr.forEach(m=>{ const div=document.createElement('div'); div.className='msg'; div.innerHTML=lineHTML(m); frag.appendChild(div); processLinks(div); }); el.insertBefore(frag, el.firstChild); // preserve visual position
+  if(oldTop){ const afterTop = oldTop.getBoundingClientRect().top; const delta = afterTop - beforeTop; window.scrollBy({top: delta, left: 0, behavior: 'instant'}); } }
 
 function processLinks(scope){ const links = scope.querySelectorAll('a[href]:not([data-card])'); links.forEach(a=>{ a.setAttribute('data-card','1');
   // Fetch and render card
@@ -55,7 +56,7 @@ async function loadChannels(){ try{ const data = await api('/api/channels'); st.
 function renderChannels(){ const list=document.getElementById('chanlist'); if(!list) return; list.innerHTML=''; st.channels.forEach(c=>{ const a=document.createElement('a'); a.href='#'; a.textContent=c; a.onclick=(ev)=>{ev.preventDefault(); selectChannel(c)}; if(c===st.current) a.className='active'; list.appendChild(a); }); }
 
 async function selectChannel(ch){ if(st.sse){ st.sse.close(); st.sse=null; } st.current=ch; renderChannels(); const el=document.getElementById('tail'); if(!el) return; el.textContent=''; const data = await api('/api/tail',{query:{channel:ch,limit:50}}); appendBatch(data); el.scrollTop = el.scrollHeight; st.atBottom=true; st.earliest = data.length? data[0].time : null; startStream(); initScrollHandlers(); }
-function initScrollHandlers(){ const el=document.getElementById('tail'); if(!el) return; const onScroll = async ()=>{ const nearBottom = (window.innerHeight + window.pageYOffset + 16) >= document.body.offsetHeight; st.atBottom = nearBottom; if(window.pageYOffset === 0 && st.earliest){ try{ const older = await api('/api/history',{query:{channel:st.current,before:st.earliest,limit:50}}); if(older.length){ prependBatch(older); st.earliest = older[0].time; } } catch(e){} } }; window.removeEventListener('scroll', st._scrollHandler || (()=>{})); st._scrollHandler = onScroll; window.addEventListener('scroll', onScroll, {passive:true}); }
+function initScrollHandlers(){ const el=document.getElementById('tail'); if(!el) return; const onScroll = async ()=>{ const nearBottom = (window.innerHeight + window.pageYOffset + 16) >= document.documentElement.scrollHeight; st.atBottom = nearBottom; const nearTop = window.pageYOffset <= 4; if(nearTop && st.earliest){ try{ const older = await api('/api/history',{query:{channel:st.current,before:st.earliest,limit:50}}); if(older.length){ prependBatch(older); st.earliest = older[0].time; } } catch(e){} } }; window.removeEventListener('scroll', st._scrollHandler || (()=>{})); st._scrollHandler = onScroll; window.addEventListener('scroll', onScroll, {passive:true}); }
 
 function startStream(){ const el=document.getElementById('tail'); if(!el) return; const url=new URL('/api/stream', window.location.origin); url.searchParams.set('channel', st.current); const es=new EventSource(url); st.sse=es; es.onmessage=(ev)=>{ try{ const m=JSON.parse(ev.data); appendBatch([m]); }catch(e){} }; es.onerror=()=>{ es.close(); st.sse=null; setTimeout(startStream, 3000); } }
 

From c125d05f267463d18bd350e2a518e00f06a6f131 Mon Sep 17 00:00:00 2001
From: Thomas Cravey <tjcravey@MacBookPro.localdomain>
Date: Sun, 17 Aug 2025 14:37:22 -0500
Subject: [PATCH 12/32] fix(webui): fully fixed header/footer (position: fixed)
 with page padding; snap to bottom on initial tail load; remove faded footer

---
 internal/httpapi/static/app.css | 12 ++++++------
 internal/httpapi/static/app.js  |  4 +++-
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/internal/httpapi/static/app.css b/internal/httpapi/static/app.css
index c289444..5a653dc 100644
--- a/internal/httpapi/static/app.css
+++ b/internal/httpapi/static/app.css
@@ -1,17 +1,17 @@
 html, body { height: 100%; }
-body { padding: 0; display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; }
-header.nav { position: sticky; top: 0; z-index: 1000; padding: .6rem 1rem; border-bottom: 1px solid var(--muted-border-color); display: flex; justify-content: space-between; align-items: center; background-color: var(--pico-background-color, #fff); }
+body { padding: 56px 0 44px 0; min-height: 100vh; }
+header.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: .6rem 1rem; border-bottom: 1px solid var(--muted-border-color); display: flex; justify-content: space-between; align-items: center; background-color: var(--pico-background-color, #fff); }
 header.nav a.brand { text-decoration: none; font-weight: 600; }
 /* Dashboard-only grid layout */
-.dash { display: grid; grid-template-columns: 220px 1fr; gap: 0; height: 100%; min-height: 0; }
+.dash { display: grid; grid-template-columns: 220px 1fr; gap: 0; }
 .dash aside.sidebar { border-right: 1px solid var(--muted-border-color); padding: .75rem; overflow-y: auto; }
 .dash aside.sidebar a { display:block; padding:.25rem .5rem; border-radius:.25rem; text-decoration:none; }
 .dash aside.sidebar a.active { background: var(--muted-color); color: var(--contrast); }
-.dash section.chat { padding: .75rem 1rem; display:flex; flex-direction: column; height: 100%; min-height: 0; }
-#tail { flex: 1; overflow: visible; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; height: auto; }
+.dash section.chat { padding: .75rem 1rem; display:flex; flex-direction: column; }
+#tail { flex: 1; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
 .ts { opacity: .66; }
 .msg { margin-bottom: .25rem; }
-footer { position: sticky; bottom: 0; z-index: 1000; text-align: center; font-size: .85rem; padding: .5rem 0; opacity: .7; background-color: var(--pico-background-color, #fff); border-top: 1px solid var(--muted-border-color); }
+footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; text-align: center; font-size: .85rem; padding: .5rem 0; background-color: var(--pico-background-color, #fff); border-top: 1px solid var(--muted-border-color); }
 @media (max-width: 900px) { .dash { grid-template-columns: 1fr; } .dash aside.sidebar { display:none; } }
 /* Summarizer output wrapping */
 #out { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
diff --git a/internal/httpapi/static/app.js b/internal/httpapi/static/app.js
index 5ec1f5d..30979ba 100644
--- a/internal/httpapi/static/app.js
+++ b/internal/httpapi/static/app.js
@@ -55,7 +55,9 @@ function processLinks(scope){ const links = scope.querySelectorAll('a[href]:not(
 async function loadChannels(){ try{ const data = await api('/api/channels'); st.channels = data; renderChannels(); if(data.length>0){ selectChannel(data[0]); } } catch(e){} }
 function renderChannels(){ const list=document.getElementById('chanlist'); if(!list) return; list.innerHTML=''; st.channels.forEach(c=>{ const a=document.createElement('a'); a.href='#'; a.textContent=c; a.onclick=(ev)=>{ev.preventDefault(); selectChannel(c)}; if(c===st.current) a.className='active'; list.appendChild(a); }); }
 
-async function selectChannel(ch){ if(st.sse){ st.sse.close(); st.sse=null; } st.current=ch; renderChannels(); const el=document.getElementById('tail'); if(!el) return; el.textContent=''; const data = await api('/api/tail',{query:{channel:ch,limit:50}}); appendBatch(data); el.scrollTop = el.scrollHeight; st.atBottom=true; st.earliest = data.length? data[0].time : null; startStream(); initScrollHandlers(); }
+async function selectChannel(ch){ if(st.sse){ st.sse.close(); st.sse=null; } st.current=ch; renderChannels(); const el=document.getElementById('tail'); if(!el) return; el.textContent=''; const data = await api('/api/tail',{query:{channel:ch,limit:50}}); appendBatch(data); // snap to bottom after initial load
+  setTimeout(()=>{ window.scrollTo({ top: document.documentElement.scrollHeight, behavior: 'instant' }); st.atBottom=true; }, 0);
+  st.earliest = data.length? data[0].time : null; startStream(); initScrollHandlers(); }
 function initScrollHandlers(){ const el=document.getElementById('tail'); if(!el) return; const onScroll = async ()=>{ const nearBottom = (window.innerHeight + window.pageYOffset + 16) >= document.documentElement.scrollHeight; st.atBottom = nearBottom; const nearTop = window.pageYOffset <= 4; if(nearTop && st.earliest){ try{ const older = await api('/api/history',{query:{channel:st.current,before:st.earliest,limit:50}}); if(older.length){ prependBatch(older); st.earliest = older[0].time; } } catch(e){} } }; window.removeEventListener('scroll', st._scrollHandler || (()=>{})); st._scrollHandler = onScroll; window.addEventListener('scroll', onScroll, {passive:true}); }
 
 function startStream(){ const el=document.getElementById('tail'); if(!el) return; const url=new URL('/api/stream', window.location.origin); url.searchParams.set('channel', st.current); const es=new EventSource(url); st.sse=es; es.onmessage=(ev)=>{ try{ const m=JSON.parse(ev.data); appendBatch([m]); }catch(e){} }; es.onerror=()=>{ es.close(); st.sse=null; setTimeout(startStream, 3000); } }

From 645ea9f2b92aaecdfdb22a89a1d04b8876955af4 Mon Sep 17 00:00:00 2001
From: Thomas Cravey <tjcravey@MacBookPro.localdomain>
Date: Sun, 17 Aug 2025 14:42:32 -0500
Subject: [PATCH 13/32] fix(webui): correct initial snap-to-bottom using rAF;
 add top/bottom margins under fixed bars; ensure page shows last lines on load

---
 internal/httpapi/static/app.css | 3 ++-
 internal/httpapi/static/app.js  | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/internal/httpapi/static/app.css b/internal/httpapi/static/app.css
index 5a653dc..6cd2359 100644
--- a/internal/httpapi/static/app.css
+++ b/internal/httpapi/static/app.css
@@ -1,6 +1,7 @@
 html, body { height: 100%; }
-body { padding: 56px 0 44px 0; min-height: 100vh; }
+body { padding: 0; min-height: 100vh; }
 header.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: .6rem 1rem; border-bottom: 1px solid var(--muted-border-color); display: flex; justify-content: space-between; align-items: center; background-color: var(--pico-background-color, #fff); }
+main, article, .dash { margin-top: 56px; margin-bottom: 44px; }
 header.nav a.brand { text-decoration: none; font-weight: 600; }
 /* Dashboard-only grid layout */
 .dash { display: grid; grid-template-columns: 220px 1fr; gap: 0; }
diff --git a/internal/httpapi/static/app.js b/internal/httpapi/static/app.js
index 30979ba..e461d1d 100644
--- a/internal/httpapi/static/app.js
+++ b/internal/httpapi/static/app.js
@@ -16,7 +16,7 @@ async function api(path, params){
   return res.text();
 }
 
-function appendBatch(arr){ const el=document.getElementById('tail'); const frag=document.createDocumentFragment(); arr.forEach(m=>{ const div=document.createElement('div'); div.className='msg'; div.innerHTML=lineHTML(m); frag.appendChild(div); processLinks(div); }); el.appendChild(frag); if(st.atBottom){ window.scrollTo({top: document.body.scrollHeight, behavior: 'instant'}); } }
+function appendBatch(arr){ const el=document.getElementById('tail'); const frag=document.createDocumentFragment(); arr.forEach(m=>{ const div=document.createElement('div'); div.className='msg'; div.innerHTML=lineHTML(m); frag.appendChild(div); processLinks(div); }); el.appendChild(frag); if(st.atBottom){ requestAnimationFrame(()=>{ window.scrollTo({top: document.documentElement.scrollHeight, behavior: 'instant'}); }); } }
 function prependBatch(arr){ const el=document.getElementById('tail'); const oldTop=el.firstChild; const beforeTop = oldTop ? oldTop.getBoundingClientRect().top : 0; const frag=document.createDocumentFragment(); arr.forEach(m=>{ const div=document.createElement('div'); div.className='msg'; div.innerHTML=lineHTML(m); frag.appendChild(div); processLinks(div); }); el.insertBefore(frag, el.firstChild); // preserve visual position
   if(oldTop){ const afterTop = oldTop.getBoundingClientRect().top; const delta = afterTop - beforeTop; window.scrollBy({top: delta, left: 0, behavior: 'instant'}); } }
 
@@ -56,7 +56,7 @@ async function loadChannels(){ try{ const data = await api('/api/channels'); st.
 function renderChannels(){ const list=document.getElementById('chanlist'); if(!list) return; list.innerHTML=''; st.channels.forEach(c=>{ const a=document.createElement('a'); a.href='#'; a.textContent=c; a.onclick=(ev)=>{ev.preventDefault(); selectChannel(c)}; if(c===st.current) a.className='active'; list.appendChild(a); }); }
 
 async function selectChannel(ch){ if(st.sse){ st.sse.close(); st.sse=null; } st.current=ch; renderChannels(); const el=document.getElementById('tail'); if(!el) return; el.textContent=''; const data = await api('/api/tail',{query:{channel:ch,limit:50}}); appendBatch(data); // snap to bottom after initial load
-  setTimeout(()=>{ window.scrollTo({ top: document.documentElement.scrollHeight, behavior: 'instant' }); st.atBottom=true; }, 0);
+  requestAnimationFrame(()=>{ window.scrollTo({ top: document.documentElement.scrollHeight, behavior: 'instant' }); st.atBottom=true; });
   st.earliest = data.length? data[0].time : null; startStream(); initScrollHandlers(); }
 function initScrollHandlers(){ const el=document.getElementById('tail'); if(!el) return; const onScroll = async ()=>{ const nearBottom = (window.innerHeight + window.pageYOffset + 16) >= document.documentElement.scrollHeight; st.atBottom = nearBottom; const nearTop = window.pageYOffset <= 4; if(nearTop && st.earliest){ try{ const older = await api('/api/history',{query:{channel:st.current,before:st.earliest,limit:50}}); if(older.length){ prependBatch(older); st.earliest = older[0].time; } } catch(e){} } }; window.removeEventListener('scroll', st._scrollHandler || (()=>{})); st._scrollHandler = onScroll; window.addEventListener('scroll', onScroll, {passive:true}); }
 

From 0e3ccac6a92527219fd508b0760e3d90e97e8015 Mon Sep 17 00:00:00 2001
From: Thomas Cravey <tjcravey@MacBookPro.localdomain>
Date: Sun, 17 Aug 2025 14:53:57 -0500
Subject: [PATCH 14/32] fix(webui): compute dynamic header/footer heights; use
 CSS vars for margins; re-scroll after images/cards via rAF

---
 internal/httpapi/static/app.css | 2 +-
 internal/httpapi/static/app.js  | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/internal/httpapi/static/app.css b/internal/httpapi/static/app.css
index 6cd2359..f10eb61 100644
--- a/internal/httpapi/static/app.css
+++ b/internal/httpapi/static/app.css
@@ -1,7 +1,7 @@
 html, body { height: 100%; }
 body { padding: 0; min-height: 100vh; }
 header.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: .6rem 1rem; border-bottom: 1px solid var(--muted-border-color); display: flex; justify-content: space-between; align-items: center; background-color: var(--pico-background-color, #fff); }
-main, article, .dash { margin-top: 56px; margin-bottom: 44px; }
+main, article, .dash { margin-top: var(--headerH, 56px); margin-bottom: var(--footerH, 44px); }
 header.nav a.brand { text-decoration: none; font-weight: 600; }
 /* Dashboard-only grid layout */
 .dash { display: grid; grid-template-columns: 220px 1fr; gap: 0; }
diff --git a/internal/httpapi/static/app.js b/internal/httpapi/static/app.js
index e461d1d..b9735d3 100644
--- a/internal/httpapi/static/app.js
+++ b/internal/httpapi/static/app.js
@@ -65,6 +65,11 @@ function startStream(){ const el=document.getElementById('tail'); if(!el) return
 async function summarize(){ const ch=document.getElementById('channel'); const win=document.getElementById('window'); const push=document.getElementById('push'); const btn=document.getElementById('btn'); const out=document.getElementById('out'); if(!ch||!win||!btn||!out) return; btn.disabled=true; out.textContent=''; try{ const data = await api('/api/trigger',{query:{channel:ch.value,window:win.value||'6h',push:push && push.checked? '1':'0'}}); if(typeof data === 'string'){ out.textContent = data; } else { out.textContent = (data.summary||''); } } catch(e){ out.textContent = 'error: '+e; } btn.disabled=false; }
 
 window.addEventListener('DOMContentLoaded', ()=>{
+  // measure header/footer and set margins so last lines are visible
+  const hdr = document.querySelector('header.nav');
+  const ftr = document.querySelector('footer');
+  if(hdr){ document.documentElement.style.setProperty('--headerH', hdr.getBoundingClientRect().height+'px'); }
+  if(ftr){ document.documentElement.style.setProperty('--footerH', ftr.getBoundingClientRect().height+'px'); }
   if(document.getElementById('chanlist')){ loadChannels(); }
   if(document.getElementById('channel')){
     fetch('/api/channels').then(r=>r.json()).then(arr=>{ const sel=document.getElementById('channel'); arr.forEach(c=>{ const o=document.createElement('option'); o.value=c; o.textContent=c; sel.appendChild(o); }); }).catch(()=>{});

From b70cf17713fa6cce292ae562dac12586f76f4b1f Mon Sep 17 00:00:00 2001
From: Thomas Cravey <tjcravey@MacBookPro.localdomain>
Date: Sun, 17 Aug 2025 14:58:25 -0500
Subject: [PATCH 15/32] fix(webui): multi-pass snap to bottom; image onload
 re-pin; dynamic header/footer height measurement; disable native
 scrollRestoration

---
 internal/httpapi/static/app.js | 29 ++++++++++++++++++-----------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/internal/httpapi/static/app.js b/internal/httpapi/static/app.js
index b9735d3..99e7a32 100644
--- a/internal/httpapi/static/app.js
+++ b/internal/httpapi/static/app.js
@@ -1,11 +1,21 @@
 // Shared state
 const st = { tailLoading: false, atBottom: true, current: '#', earliest: null, sse: null, channels: [] };
 
+function measureBars(){
+  const hdr = document.querySelector('header.nav');
+  const ftr = document.querySelector('footer');
+  if(hdr){ document.documentElement.style.setProperty('--headerH', hdr.getBoundingClientRect().height+'px'); }
+  if(ftr){ document.documentElement.style.setProperty('--footerH', ftr.getBoundingClientRect().height+'px'); }
+}
+
 function colorFor(nick){ let h=0; for(let i=0;i<nick.length;i++){ h=(h*31+nick.charCodeAt(i))>>>0 } return 'hsl('+(h%360)+',60%,'+(window.matchMedia('(prefers-color-scheme: dark)').matches? '70%':'35%')+')'; }
 function escapeHtml(s){ return s.replace(/[&<>"]/g, c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c])); }
 function linkify(t){ return t.replace(/https?:\/\/\S+/g, function(u){ return '<a href="' + u + '" target="_blank" rel="noopener">' + u + '</a>'; }); }
 function lineHTML(m){ const ts = '<span class=ts>[' + m.time + ']</span>'; const nick = '<b style="color:' + colorFor(m.author) + '">' + m.author + '</b>'; const body = escapeHtml(m.body); return ts + ' ' + nick + ': ' + linkify(body); }
 
+function snapBottom(){ window.scrollTo(0, document.documentElement.scrollHeight); }
+function pinBottomMulti(){ if(!st.atBottom) return; [0,16,64,200].forEach(d=> setTimeout(()=>requestAnimationFrame(snapBottom), d)); }
+
 async function api(path, params){
   const url = new URL(path, window.location.origin);
   if(params && params.query){ Object.entries(params.query).forEach(([k,v])=>url.searchParams.set(k,v)); }
@@ -16,9 +26,8 @@ async function api(path, params){
   return res.text();
 }
 
-function appendBatch(arr){ const el=document.getElementById('tail'); const frag=document.createDocumentFragment(); arr.forEach(m=>{ const div=document.createElement('div'); div.className='msg'; div.innerHTML=lineHTML(m); frag.appendChild(div); processLinks(div); }); el.appendChild(frag); if(st.atBottom){ requestAnimationFrame(()=>{ window.scrollTo({top: document.documentElement.scrollHeight, behavior: 'instant'}); }); } }
-function prependBatch(arr){ const el=document.getElementById('tail'); const oldTop=el.firstChild; const beforeTop = oldTop ? oldTop.getBoundingClientRect().top : 0; const frag=document.createDocumentFragment(); arr.forEach(m=>{ const div=document.createElement('div'); div.className='msg'; div.innerHTML=lineHTML(m); frag.appendChild(div); processLinks(div); }); el.insertBefore(frag, el.firstChild); // preserve visual position
-  if(oldTop){ const afterTop = oldTop.getBoundingClientRect().top; const delta = afterTop - beforeTop; window.scrollBy({top: delta, left: 0, behavior: 'instant'}); } }
+function appendBatch(arr){ const el=document.getElementById('tail'); const frag=document.createDocumentFragment(); arr.forEach(m=>{ const div=document.createElement('div'); div.className='msg'; div.innerHTML=lineHTML(m); frag.appendChild(div); processLinks(div); }); el.appendChild(frag); pinBottomMulti(); }
+function prependBatch(arr){ const el=document.getElementById('tail'); const oldTop=el.firstChild; const beforeTop = oldTop ? oldTop.getBoundingClientRect().top : 0; const frag=document.createDocumentFragment(); arr.forEach(m=>{ const div=document.createElement('div'); div.className='msg'; div.innerHTML=lineHTML(m); frag.appendChild(div); processLinks(div); }); el.insertBefore(frag, el.firstChild); if(oldTop){ const afterTop = oldTop.getBoundingClientRect().top; const delta = afterTop - beforeTop; window.scrollBy(0, delta); } }
 
 function processLinks(scope){ const links = scope.querySelectorAll('a[href]:not([data-card])'); links.forEach(a=>{ a.setAttribute('data-card','1');
   // Fetch and render card
@@ -33,6 +42,7 @@ function processLinks(scope){ const links = scope.querySelectorAll('a[href]:not(
       html += '</div>';
       const row = document.createElement('div'); row.style.display='flex'; row.style.alignItems='flex-start'; row.style.gap='.5rem'; row.innerHTML = html;
       c.appendChild(row);
+      c.querySelectorAll('img').forEach(img=> img.addEventListener('load', ()=> pinBottomMulti()));
       // Summary control row
       const ctrl = document.createElement('div'); ctrl.style.marginTop='.25rem';
       const btn = document.createElement('button'); btn.type='button'; btn.title='Summarize this link'; btn.textContent='\u25B6'; btn.style.padding='0 .4rem'; btn.style.fontSize='.9rem';
@@ -55,9 +65,7 @@ function processLinks(scope){ const links = scope.querySelectorAll('a[href]:not(
 async function loadChannels(){ try{ const data = await api('/api/channels'); st.channels = data; renderChannels(); if(data.length>0){ selectChannel(data[0]); } } catch(e){} }
 function renderChannels(){ const list=document.getElementById('chanlist'); if(!list) return; list.innerHTML=''; st.channels.forEach(c=>{ const a=document.createElement('a'); a.href='#'; a.textContent=c; a.onclick=(ev)=>{ev.preventDefault(); selectChannel(c)}; if(c===st.current) a.className='active'; list.appendChild(a); }); }
 
-async function selectChannel(ch){ if(st.sse){ st.sse.close(); st.sse=null; } st.current=ch; renderChannels(); const el=document.getElementById('tail'); if(!el) return; el.textContent=''; const data = await api('/api/tail',{query:{channel:ch,limit:50}}); appendBatch(data); // snap to bottom after initial load
-  requestAnimationFrame(()=>{ window.scrollTo({ top: document.documentElement.scrollHeight, behavior: 'instant' }); st.atBottom=true; });
-  st.earliest = data.length? data[0].time : null; startStream(); initScrollHandlers(); }
+async function selectChannel(ch){ if(st.sse){ st.sse.close(); st.sse=null; } st.current=ch; renderChannels(); const el=document.getElementById('tail'); if(!el) return; el.textContent=''; const data = await api('/api/tail',{query:{channel:ch,limit:50}}); appendBatch(data); requestAnimationFrame(()=>{ snapBottom(); st.atBottom=true; }); st.earliest = data.length? data[0].time : null; startStream(); initScrollHandlers(); }
 function initScrollHandlers(){ const el=document.getElementById('tail'); if(!el) return; const onScroll = async ()=>{ const nearBottom = (window.innerHeight + window.pageYOffset + 16) >= document.documentElement.scrollHeight; st.atBottom = nearBottom; const nearTop = window.pageYOffset <= 4; if(nearTop && st.earliest){ try{ const older = await api('/api/history',{query:{channel:st.current,before:st.earliest,limit:50}}); if(older.length){ prependBatch(older); st.earliest = older[0].time; } } catch(e){} } }; window.removeEventListener('scroll', st._scrollHandler || (()=>{})); st._scrollHandler = onScroll; window.addEventListener('scroll', onScroll, {passive:true}); }
 
 function startStream(){ const el=document.getElementById('tail'); if(!el) return; const url=new URL('/api/stream', window.location.origin); url.searchParams.set('channel', st.current); const es=new EventSource(url); st.sse=es; es.onmessage=(ev)=>{ try{ const m=JSON.parse(ev.data); appendBatch([m]); }catch(e){} }; es.onerror=()=>{ es.close(); st.sse=null; setTimeout(startStream, 3000); } }
@@ -65,13 +73,12 @@ function startStream(){ const el=document.getElementById('tail'); if(!el) return
 async function summarize(){ const ch=document.getElementById('channel'); const win=document.getElementById('window'); const push=document.getElementById('push'); const btn=document.getElementById('btn'); const out=document.getElementById('out'); if(!ch||!win||!btn||!out) return; btn.disabled=true; out.textContent=''; try{ const data = await api('/api/trigger',{query:{channel:ch.value,window:win.value||'6h',push:push && push.checked? '1':'0'}}); if(typeof data === 'string'){ out.textContent = data; } else { out.textContent = (data.summary||''); } } catch(e){ out.textContent = 'error: '+e; } btn.disabled=false; }
 
 window.addEventListener('DOMContentLoaded', ()=>{
-  // measure header/footer and set margins so last lines are visible
-  const hdr = document.querySelector('header.nav');
-  const ftr = document.querySelector('footer');
-  if(hdr){ document.documentElement.style.setProperty('--headerH', hdr.getBoundingClientRect().height+'px'); }
-  if(ftr){ document.documentElement.style.setProperty('--footerH', ftr.getBoundingClientRect().height+'px'); }
+  if('scrollRestoration' in history){ history.scrollRestoration = 'manual'; }
+  measureBars();
   if(document.getElementById('chanlist')){ loadChannels(); }
   if(document.getElementById('channel')){
     fetch('/api/channels').then(r=>r.json()).then(arr=>{ const sel=document.getElementById('channel'); arr.forEach(c=>{ const o=document.createElement('option'); o.value=c; o.textContent=c; sel.appendChild(o); }); }).catch(()=>{});
   }
 });
+window.addEventListener('load', measureBars);
+window.addEventListener('resize', ()=>{ measureBars(); if(st.atBottom) pinBottomMulti(); });

From 6e64969bb6b83acec97bae072a3b68acefd931e8 Mon Sep 17 00:00:00 2001
From: Thomas Cravey <tjcravey@MacBookPro.localdomain>
Date: Sun, 17 Aug 2025 15:30:49 -0500
Subject: [PATCH 16/32] feat(webui): move channel list into navbar dropdown
 with checkmark; remove sidebar and footer; show short commit centered in
 navbar

---
 internal/httpapi/static/app.css           | 7 +++++--
 internal/httpapi/static/app.js            | 4 ++--
 internal/httpapi/templates.go             | 5 +++++
 internal/httpapi/templates/dashboard.tmpl | 7 ++-----
 internal/httpapi/templates/layout.tmpl    | 9 ++++++++-
 5 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/internal/httpapi/static/app.css b/internal/httpapi/static/app.css
index f10eb61..41e6100 100644
--- a/internal/httpapi/static/app.css
+++ b/internal/httpapi/static/app.css
@@ -1,10 +1,13 @@
 html, body { height: 100%; }
 body { padding: 0; min-height: 100vh; }
-header.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: .6rem 1rem; border-bottom: 1px solid var(--muted-border-color); display: flex; justify-content: space-between; align-items: center; background-color: var(--pico-background-color, #fff); }
+header.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: .6rem 1rem; border-bottom: 1px solid var(--muted-border-color); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background-color: var(--pico-background-color, #fff); }
+header.nav .brand { justify-self: start; }
+header.nav .commit { justify-self: center; font-size: .75rem; opacity: .75; }
+header.nav nav { justify-self: end; }
 main, article, .dash { margin-top: var(--headerH, 56px); margin-bottom: var(--footerH, 44px); }
 header.nav a.brand { text-decoration: none; font-weight: 600; }
 /* Dashboard-only grid layout */
-.dash { display: grid; grid-template-columns: 220px 1fr; gap: 0; }
+.dash { display: grid; grid-template-columns: 1fr; gap: 0; }
 .dash aside.sidebar { border-right: 1px solid var(--muted-border-color); padding: .75rem; overflow-y: auto; }
 .dash aside.sidebar a { display:block; padding:.25rem .5rem; border-radius:.25rem; text-decoration:none; }
 .dash aside.sidebar a.active { background: var(--muted-color); color: var(--contrast); }
diff --git a/internal/httpapi/static/app.js b/internal/httpapi/static/app.js
index 99e7a32..a12ead3 100644
--- a/internal/httpapi/static/app.js
+++ b/internal/httpapi/static/app.js
@@ -63,7 +63,7 @@ function processLinks(scope){ const links = scope.querySelectorAll('a[href]:not(
 }); }
 
 async function loadChannels(){ try{ const data = await api('/api/channels'); st.channels = data; renderChannels(); if(data.length>0){ selectChannel(data[0]); } } catch(e){} }
-function renderChannels(){ const list=document.getElementById('chanlist'); if(!list) return; list.innerHTML=''; st.channels.forEach(c=>{ const a=document.createElement('a'); a.href='#'; a.textContent=c; a.onclick=(ev)=>{ev.preventDefault(); selectChannel(c)}; if(c===st.current) a.className='active'; list.appendChild(a); }); }
+function renderChannels(){ const list=document.getElementById('nav-chans'); if(!list) return; list.innerHTML=''; st.channels.forEach(c=>{ const li=document.createElement('li'); const a=document.createElement('a'); a.href='#'; a.textContent=c + (c===st.current? ' ✓':''); a.onclick=(ev)=>{ev.preventDefault(); selectChannel(c);}; li.appendChild(a); list.appendChild(li); }); }
 
 async function selectChannel(ch){ if(st.sse){ st.sse.close(); st.sse=null; } st.current=ch; renderChannels(); const el=document.getElementById('tail'); if(!el) return; el.textContent=''; const data = await api('/api/tail',{query:{channel:ch,limit:50}}); appendBatch(data); requestAnimationFrame(()=>{ snapBottom(); st.atBottom=true; }); st.earliest = data.length? data[0].time : null; startStream(); initScrollHandlers(); }
 function initScrollHandlers(){ const el=document.getElementById('tail'); if(!el) return; const onScroll = async ()=>{ const nearBottom = (window.innerHeight + window.pageYOffset + 16) >= document.documentElement.scrollHeight; st.atBottom = nearBottom; const nearTop = window.pageYOffset <= 4; if(nearTop && st.earliest){ try{ const older = await api('/api/history',{query:{channel:st.current,before:st.earliest,limit:50}}); if(older.length){ prependBatch(older); st.earliest = older[0].time; } } catch(e){} } }; window.removeEventListener('scroll', st._scrollHandler || (()=>{})); st._scrollHandler = onScroll; window.addEventListener('scroll', onScroll, {passive:true}); }
@@ -75,7 +75,7 @@ async function summarize(){ const ch=document.getElementById('channel'); const w
 window.addEventListener('DOMContentLoaded', ()=>{
   if('scrollRestoration' in history){ history.scrollRestoration = 'manual'; }
   measureBars();
-  if(document.getElementById('chanlist')){ loadChannels(); }
+  loadChannels();
   if(document.getElementById('channel')){
     fetch('/api/channels').then(r=>r.json()).then(arr=>{ const sel=document.getElementById('channel'); arr.forEach(c=>{ const o=document.createElement('option'); o.value=c; o.textContent=c; sel.appendChild(o); }); }).catch(()=>{});
   }
diff --git a/internal/httpapi/templates.go b/internal/httpapi/templates.go
index 39d1b53..88195f5 100644
--- a/internal/httpapi/templates.go
+++ b/internal/httpapi/templates.go
@@ -36,6 +36,11 @@ func (s *Server) render(w http.ResponseWriter, name string, data map[string]any)
 	}
 	data["Version"] = s.Version
 	data["Commit"] = s.Commit
+	if s.Commit != "" {
+		c := s.Commit
+		if len(c) > 12 { c = c[:12] }
+		data["CommitShort"] = c
+	}
 	base := strings.TrimSuffix(path.Base(name), path.Ext(name))
 	if base == "dashboard" {
 		data["Title"] = "sojuboy"
diff --git a/internal/httpapi/templates/dashboard.tmpl b/internal/httpapi/templates/dashboard.tmpl
index c6ea560..06601cd 100644
--- a/internal/httpapi/templates/dashboard.tmpl
+++ b/internal/httpapi/templates/dashboard.tmpl
@@ -1,9 +1,6 @@
 {{ define "dashboard" }}
-<main class="dash">
-  <aside class="sidebar">
-    <nav id="chanlist"></nav>
-  </aside>
-  <section class="chat">
+<main class="dash single">
+  <section class="chat" style="grid-column: 1 / -1">
     <div id="tail"></div>
   </section>
 </main>
diff --git a/internal/httpapi/templates/layout.tmpl b/internal/httpapi/templates/layout.tmpl
index 3bfc76e..367d281 100644
--- a/internal/httpapi/templates/layout.tmpl
+++ b/internal/httpapi/templates/layout.tmpl
@@ -12,8 +12,15 @@
 <body>
   <header class="nav">
     <div><a class="brand" href="/">sojuboy</a></div>
+    <div class="commit">{{ .CommitShort }}</div>
     <nav>
       <ul>
+        <li class="chan">
+          <details role="list">
+            <summary aria-haspopup="listbox">Channel</summary>
+            <ul id="nav-chans" role="listbox"></ul>
+          </details>
+        </li>
         <li><a href="/summarizer">Summarizer</a></li>
         <li><a href="/logout">Logout</a></li>
       </ul>
@@ -24,7 +31,7 @@
   {{ else if eq .Content "summarizer" }}
     {{ template "summarizer" . }}
   {{ end }}
-  <footer><small>{{ .Version }} ({{ .Commit }})</small></footer>
+  
 </body>
 </html>
 {{ end }}

From 71cf7a927ffa936be4415840da5751b1cf0b7c47 Mon Sep 17 00:00:00 2001
From: Thomas Cravey <tjcravey@MacBookPro.localdomain>
Date: Sun, 17 Aug 2025 15:43:25 -0500
Subject: [PATCH 17/32] feat(webui): use brand as channel selector on
 dashboard; keep brand link on other pages; tone down commit text color/size

---
 internal/httpapi/static/app.css        |  2 +-
 internal/httpapi/static/app.js         |  2 +-
 internal/httpapi/templates/layout.tmpl | 11 ++++++++++-
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/internal/httpapi/static/app.css b/internal/httpapi/static/app.css
index 41e6100..bd77861 100644
--- a/internal/httpapi/static/app.css
+++ b/internal/httpapi/static/app.css
@@ -2,7 +2,7 @@ html, body { height: 100%; }
 body { padding: 0; min-height: 100vh; }
 header.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: .6rem 1rem; border-bottom: 1px solid var(--muted-border-color); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background-color: var(--pico-background-color, #fff); }
 header.nav .brand { justify-self: start; }
-header.nav .commit { justify-self: center; font-size: .75rem; opacity: .75; }
+header.nav .commit { justify-self: center; font-size: .7rem; opacity: .55; }
 header.nav nav { justify-self: end; }
 main, article, .dash { margin-top: var(--headerH, 56px); margin-bottom: var(--footerH, 44px); }
 header.nav a.brand { text-decoration: none; font-weight: 600; }
diff --git a/internal/httpapi/static/app.js b/internal/httpapi/static/app.js
index a12ead3..9effeae 100644
--- a/internal/httpapi/static/app.js
+++ b/internal/httpapi/static/app.js
@@ -63,7 +63,7 @@ function processLinks(scope){ const links = scope.querySelectorAll('a[href]:not(
 }); }
 
 async function loadChannels(){ try{ const data = await api('/api/channels'); st.channels = data; renderChannels(); if(data.length>0){ selectChannel(data[0]); } } catch(e){} }
-function renderChannels(){ const list=document.getElementById('nav-chans'); if(!list) return; list.innerHTML=''; st.channels.forEach(c=>{ const li=document.createElement('li'); const a=document.createElement('a'); a.href='#'; a.textContent=c + (c===st.current? ' ✓':''); a.onclick=(ev)=>{ev.preventDefault(); selectChannel(c);}; li.appendChild(a); list.appendChild(li); }); }
+function renderChannels(){ const list=document.getElementById('nav-chans') || document.getElementById('brand-chans')?.querySelector('ul'); if(!list) return; list.innerHTML=''; st.channels.forEach(c=>{ const li=document.createElement('li'); const a=document.createElement('a'); a.href='#'; a.textContent=c + (c===st.current? ' ✓':''); a.onclick=(ev)=>{ev.preventDefault(); selectChannel(c);}; li.appendChild(a); list.appendChild(li); }); }
 
 async function selectChannel(ch){ if(st.sse){ st.sse.close(); st.sse=null; } st.current=ch; renderChannels(); const el=document.getElementById('tail'); if(!el) return; el.textContent=''; const data = await api('/api/tail',{query:{channel:ch,limit:50}}); appendBatch(data); requestAnimationFrame(()=>{ snapBottom(); st.atBottom=true; }); st.earliest = data.length? data[0].time : null; startStream(); initScrollHandlers(); }
 function initScrollHandlers(){ const el=document.getElementById('tail'); if(!el) return; const onScroll = async ()=>{ const nearBottom = (window.innerHeight + window.pageYOffset + 16) >= document.documentElement.scrollHeight; st.atBottom = nearBottom; const nearTop = window.pageYOffset <= 4; if(nearTop && st.earliest){ try{ const older = await api('/api/history',{query:{channel:st.current,before:st.earliest,limit:50}}); if(older.length){ prependBatch(older); st.earliest = older[0].time; } } catch(e){} } }; window.removeEventListener('scroll', st._scrollHandler || (()=>{})); st._scrollHandler = onScroll; window.addEventListener('scroll', onScroll, {passive:true}); }
diff --git a/internal/httpapi/templates/layout.tmpl b/internal/httpapi/templates/layout.tmpl
index 367d281..7ee92e1 100644
--- a/internal/httpapi/templates/layout.tmpl
+++ b/internal/httpapi/templates/layout.tmpl
@@ -11,7 +11,16 @@
 </head>
 <body>
   <header class="nav">
-    <div><a class="brand" href="/">sojuboy</a></div>
+    <div>
+      {{ if eq .Content "dashboard" }}
+        <details id="brand-chans" role="list">
+          <summary class="brand" aria-haspopup="listbox">sojuboy</summary>
+          <ul id="nav-chans" role="listbox"></ul>
+        </details>
+      {{ else }}
+        <a class="brand" href="/">sojuboy</a>
+      {{ end }}
+    </div>
     <div class="commit">{{ .CommitShort }}</div>
     <nav>
       <ul>

From 9e95ccdca434a3958d9033dc920894fd0f0b82b7 Mon Sep 17 00:00:00 2001
From: Thomas Cravey <tjcravey@MacBookPro.localdomain>
Date: Sun, 17 Aug 2025 15:48:10 -0500
Subject: [PATCH 18/32] feat(webui): remove menubar Channel item; brand acts as
 channel selector only on dashboard; hover to open; commit text toned down

---
 internal/httpapi/static/app.css        | 2 +-
 internal/httpapi/static/app.js         | 6 ++++++
 internal/httpapi/templates/layout.tmpl | 6 ------
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/internal/httpapi/static/app.css b/internal/httpapi/static/app.css
index bd77861..21b1084 100644
--- a/internal/httpapi/static/app.css
+++ b/internal/httpapi/static/app.css
@@ -1,7 +1,7 @@
 html, body { height: 100%; }
 body { padding: 0; min-height: 100vh; }
 header.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: .6rem 1rem; border-bottom: 1px solid var(--muted-border-color); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background-color: var(--pico-background-color, #fff); }
-header.nav .brand { justify-self: start; }
+header.nav .brand { justify-self: start; cursor: pointer; }
 header.nav .commit { justify-self: center; font-size: .7rem; opacity: .55; }
 header.nav nav { justify-self: end; }
 main, article, .dash { margin-top: var(--headerH, 56px); margin-bottom: var(--footerH, 44px); }
diff --git a/internal/httpapi/static/app.js b/internal/httpapi/static/app.js
index 9effeae..c530594 100644
--- a/internal/httpapi/static/app.js
+++ b/internal/httpapi/static/app.js
@@ -76,6 +76,12 @@ window.addEventListener('DOMContentLoaded', ()=>{
   if('scrollRestoration' in history){ history.scrollRestoration = 'manual'; }
   measureBars();
   loadChannels();
+  // Open brand dropdown on hover (desktop) for the dashboard
+  const brandDetails = document.getElementById('brand-chans');
+  if(brandDetails){
+    brandDetails.addEventListener('mouseenter', ()=>{ brandDetails.setAttribute('open',''); });
+    brandDetails.addEventListener('mouseleave', ()=>{ brandDetails.removeAttribute('open'); });
+  }
   if(document.getElementById('channel')){
     fetch('/api/channels').then(r=>r.json()).then(arr=>{ const sel=document.getElementById('channel'); arr.forEach(c=>{ const o=document.createElement('option'); o.value=c; o.textContent=c; sel.appendChild(o); }); }).catch(()=>{});
   }
diff --git a/internal/httpapi/templates/layout.tmpl b/internal/httpapi/templates/layout.tmpl
index 7ee92e1..70717b5 100644
--- a/internal/httpapi/templates/layout.tmpl
+++ b/internal/httpapi/templates/layout.tmpl
@@ -24,12 +24,6 @@
     <div class="commit">{{ .CommitShort }}</div>
     <nav>
       <ul>
-        <li class="chan">
-          <details role="list">
-            <summary aria-haspopup="listbox">Channel</summary>
-            <ul id="nav-chans" role="listbox"></ul>
-          </details>
-        </li>
         <li><a href="/summarizer">Summarizer</a></li>
         <li><a href="/logout">Logout</a></li>
       </ul>

From 15f7f3ac965b23437914c975d75aae58182df89f Mon Sep 17 00:00:00 2001
From: Thomas Cravey <tjcravey@MacBookPro.localdomain>
Date: Sun, 17 Aug 2025 16:03:22 -0500
Subject: [PATCH 19/32] feat(cards): X/Twitter oEmbed support and image URL
 card detection; render oEmbed HTML in UI

---
 internal/httpapi/server.go     | 35 ++++++++++++++++++++++++++++++++++
 internal/httpapi/static/app.js |  3 ++-
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/internal/httpapi/server.go b/internal/httpapi/server.go
index c31419a..6fd2ae1 100644
--- a/internal/httpapi/server.go
+++ b/internal/httpapi/server.go
@@ -215,6 +215,7 @@ type linkCard struct {
 	Title       string `json:"title"`
 	Description string `json:"description"`
 	Image       string `json:"image"`
+	HTML        string `json:"html"`
 }
 
 // handleLinkCard fetches basic OpenGraph/Twitter card metadata (best-effort) and returns a small card.
@@ -246,9 +247,33 @@ func (s *Server) handleLinkCard(w http.ResponseWriter, r *http.Request) {
 		_ = json.NewEncoder(w).Encode(s.cardCache[raw])
 		return
 	}
+
+	// Special handling for X/Twitter posts via oEmbed
+	host := strings.ToLower(u.Host)
+	if (host == "x.com" || host == "twitter.com" || strings.HasSuffix(host, ".twitter.com")) && strings.Contains(strings.ToLower(u.Path), "/status/") {
+		oembed := "https://publish.twitter.com/oembed?omit_script=1&hide_thread=1&dnt=1&align=center&url=" + url.QueryEscape(raw)
+		client := &http.Client{Timeout: 8 * time.Second}
+		reqTw, _ := http.NewRequestWithContext(r.Context(), http.MethodGet, oembed, nil)
+		respTw, errTw := client.Do(reqTw)
+		if errTw == nil && respTw.StatusCode >= 200 && respTw.StatusCode < 300 {
+			defer respTw.Body.Close()
+			var o struct{ HTML string `json:"html"` }
+			if err := json.NewDecoder(respTw.Body).Decode(&o); err == nil && o.HTML != "" {
+				card := linkCard{URL: raw, HTML: o.HTML}
+				s.cardCache[raw] = card
+				s.cardCacheExp[raw] = time.Now().Add(24 * time.Hour)
+				w.Header().Set("Content-Type", "application/json")
+				_ = json.NewEncoder(w).Encode(card)
+				return
+			}
+		}
+		// fallthrough to generic fetch if oEmbed fails
+	}
+
 	// fetch minimal HTML and extract tags using a tolerant HTML parser
 	client := &http.Client{Timeout: 10 * time.Second}
 	req, _ := http.NewRequestWithContext(r.Context(), http.MethodGet, raw, nil)
+	req.Header.Set("User-Agent", "Mozilla/5.0 (compatible; sojuboy/1.0)")
 	resp, err := client.Do(req)
 	if err != nil {
 		w.WriteHeader(http.StatusBadGateway)
@@ -261,6 +286,16 @@ func (s *Server) handleLinkCard(w http.ResponseWriter, r *http.Request) {
 		_, _ = w.Write([]byte("bad status"))
 		return
 	}
+	// If image content-type, return as image card
+	if ct := strings.ToLower(resp.Header.Get("Content-Type")); strings.HasPrefix(ct, "image/") {
+		card := linkCard{URL: raw, Image: raw}
+		s.cardCache[raw] = card
+		s.cardCacheExp[raw] = time.Now().Add(24 * time.Hour)
+		w.Header().Set("Content-Type", "application/json")
+		_ = json.NewEncoder(w).Encode(card)
+		return
+	}
+
 	// limit to 256KB and parse tokens
 	limited := http.MaxBytesReader(w, resp.Body, 262144)
 	doc, err := xhtml.Parse(limited)
diff --git a/internal/httpapi/static/app.js b/internal/httpapi/static/app.js
index c530594..8acbf0f 100644
--- a/internal/httpapi/static/app.js
+++ b/internal/httpapi/static/app.js
@@ -33,7 +33,7 @@ function processLinks(scope){ const links = scope.querySelectorAll('a[href]:not(
   // Fetch and render card
   fetch('/api/linkcard?url='+encodeURIComponent(a.href)).then(r=>r.json()).then(card=>{
     if(!card) return;
-    if(card.title||card.description||card.image){
+    if(card.title||card.description||card.image||card.html){
       const c=document.createElement('div'); c.className='card'; var html='';
       if(card.image){ html += '<div><img src="'+card.image+'" alt="" style="max-width:160px;max-height:120px;object-fit:cover;border-radius:.25rem"></div>'; }
       html += '<div style="flex:1;margin-left:.5rem">';
@@ -43,6 +43,7 @@ function processLinks(scope){ const links = scope.querySelectorAll('a[href]:not(
       const row = document.createElement('div'); row.style.display='flex'; row.style.alignItems='flex-start'; row.style.gap='.5rem'; row.innerHTML = html;
       c.appendChild(row);
       c.querySelectorAll('img').forEach(img=> img.addEventListener('load', ()=> pinBottomMulti()));
+      if(card.html){ const wrap=document.createElement('div'); wrap.innerHTML=card.html; c.appendChild(wrap); }
       // Summary control row
       const ctrl = document.createElement('div'); ctrl.style.marginTop='.25rem';
       const btn = document.createElement('button'); btn.type='button'; btn.title='Summarize this link'; btn.textContent='\u25B6'; btn.style.padding='0 .4rem'; btn.style.fontSize='.9rem';

From 962469bd76c2de188f77cc88c211bc360c960a6e Mon Sep 17 00:00:00 2001
From: Thomas Cravey <tjcravey@MacBookPro.localdomain>
Date: Sun, 17 Aug 2025 16:14:24 -0500
Subject: [PATCH 20/32] feat(cards): improve OG/Twitter parsing (more keys,
 absolute image URLs, larger read, UA headers); load Twitter widgets.js to
 render media

---
 internal/httpapi/server.go     | 101 +++++++++++++++++++++------------
 internal/httpapi/static/app.js |   6 +-
 2 files changed, 69 insertions(+), 38 deletions(-)

diff --git a/internal/httpapi/server.go b/internal/httpapi/server.go
index 6fd2ae1..39e3b80 100644
--- a/internal/httpapi/server.go
+++ b/internal/httpapi/server.go
@@ -273,7 +273,9 @@ func (s *Server) handleLinkCard(w http.ResponseWriter, r *http.Request) {
 	// fetch minimal HTML and extract tags using a tolerant HTML parser
 	client := &http.Client{Timeout: 10 * time.Second}
 	req, _ := http.NewRequestWithContext(r.Context(), http.MethodGet, raw, nil)
-	req.Header.Set("User-Agent", "Mozilla/5.0 (compatible; sojuboy/1.0)")
+	req.Header.Set("User-Agent", "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0 Safari/537.36")
+	req.Header.Set("Accept", "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8")
+	req.Header.Set("Accept-Language", "en-US,en;q=0.9")
 	resp, err := client.Do(req)
 	if err != nil {
 		w.WriteHeader(http.StatusBadGateway)
@@ -296,8 +298,8 @@ func (s *Server) handleLinkCard(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	// limit to 256KB and parse tokens
-	limited := http.MaxBytesReader(w, resp.Body, 262144)
+	// limit to 768KB and parse tokens
+	limited := http.MaxBytesReader(w, resp.Body, 786432)
 	doc, err := xhtml.Parse(limited)
 	if err != nil {
 		w.WriteHeader(http.StatusBadGateway)
@@ -307,36 +309,38 @@ func (s *Server) handleLinkCard(w http.ResponseWriter, r *http.Request) {
 	var title, desc, img string
 	var walker func(*xhtml.Node)
 	walker = func(n *xhtml.Node) {
-		if n.Type == xhtml.ElementNode && strings.EqualFold(n.Data, "meta") {
-			// property or name + content
-			var pn = ""
-			var nm = ""
-			var content = ""
-			for _, a := range n.Attr {
-				if strings.EqualFold(a.Key, "property") {
-					pn = a.Val
-				} else if strings.EqualFold(a.Key, "name") {
-					nm = a.Val
-				} else if strings.EqualFold(a.Key, "content") {
-					content = a.Val
+		if n.Type == xhtml.ElementNode {
+			if strings.EqualFold(n.Data, "meta") {
+				// property or name + content
+				var pn = ""
+				var nm = ""
+				var content = ""
+				for _, a := range n.Attr {
+					if strings.EqualFold(a.Key, "property") {
+						pn = a.Val
+					} else if strings.EqualFold(a.Key, "name") {
+						nm = a.Val
+					} else if strings.EqualFold(a.Key, "content") {
+						content = a.Val
+					}
 				}
-			}
-			key := strings.ToLower(pn)
-			if key == "" {
-				key = strings.ToLower(nm)
-			}
-			switch key {
-			case "og:title", "twitter:title":
-				if title == "" {
-					title = content
+				key := strings.ToLower(pn)
+				if key == "" {
+					key = strings.ToLower(nm)
 				}
-			case "og:description", "twitter:description":
-				if desc == "" {
-					desc = content
-				}
-			case "og:image", "twitter:image":
-				if img == "" {
-					img = content
+				switch key {
+				case "og:title", "twitter:title":
+					if title == "" {
+						title = content
+					}
+				case "og:description", "twitter:description", "description":
+					if desc == "" {
+						desc = content
+					}
+				case "og:image", "og:image:url", "og:image:secure_url", "twitter:image", "twitter:image:src":
+					if img == "" {
+						img = content
+					}
 				}
 			}
 		}
@@ -345,6 +349,21 @@ func (s *Server) handleLinkCard(w http.ResponseWriter, r *http.Request) {
 		}
 	}
 	walker(doc)
+
+	// normalize image URL
+	if img != "" {
+		if strings.HasPrefix(img, "//") {
+			if u.Scheme == "" {
+				u.Scheme = "https"
+			}
+			img = u.Scheme + ":" + img
+		} else if !strings.HasPrefix(img, "http://") && !strings.HasPrefix(img, "https://") {
+			if ref, err := url.Parse(img); err == nil {
+				img = u.ResolveReference(ref).String()
+			}
+		}
+	}
+
 	card := linkCard{URL: raw, Title: strings.TrimSpace(title), Description: strings.TrimSpace(desc), Image: strings.TrimSpace(img)}
 	// cache for 24h
 	s.cardCache[raw] = card
@@ -371,8 +390,12 @@ func (s *Server) handleLinkSummary(w http.ResponseWriter, r *http.Request) {
 		_, _ = w.Write([]byte("summarizer not configured"))
 		return
 	}
-	if s.summaryCache == nil { s.summaryCache = make(map[string]string) }
-	if s.summaryCacheExp == nil { s.summaryCacheExp = make(map[string]time.Time) }
+	if s.summaryCache == nil {
+		s.summaryCache = make(map[string]string)
+	}
+	if s.summaryCacheExp == nil {
+		s.summaryCacheExp = make(map[string]time.Time)
+	}
 	if exp, ok := s.summaryCacheExp[raw]; ok && time.Now().Before(exp) {
 		w.Header().Set("Content-Type", "application/json")
 		_ = json.NewEncoder(w).Encode(map[string]any{"summary": s.summaryCache[raw]})
@@ -380,8 +403,12 @@ func (s *Server) handleLinkSummary(w http.ResponseWriter, r *http.Request) {
 	}
 	msgs := []store.Message{{Channel: "#links", Author: "link", Body: raw, Time: time.Now().UTC()}}
 	tout := s.SummarizerTimeout
-	if tout <= 0 { tout = 5 * time.Minute }
-	if tout > 2*time.Minute { tout = 2 * time.Minute }
+	if tout <= 0 {
+		tout = 5 * time.Minute
+	}
+	if tout > 2*time.Minute {
+		tout = 2 * time.Minute
+	}
 	ctx, cancel := context.WithTimeout(r.Context(), tout)
 	defer cancel()
 	sum, err := s.Summarizer.Summarize(ctx, "#links", msgs, 0)
@@ -390,7 +417,9 @@ func (s *Server) handleLinkSummary(w http.ResponseWriter, r *http.Request) {
 		_, _ = w.Write([]byte("summarizer error"))
 		return
 	}
-	if sum == "" { sum = "(no summary)" }
+	if sum == "" {
+		sum = "(no summary)"
+	}
 	s.summaryCache[raw] = sum
 	s.summaryCacheExp[raw] = time.Now().Add(24 * time.Hour)
 	w.Header().Set("Content-Type", "application/json")
diff --git a/internal/httpapi/static/app.js b/internal/httpapi/static/app.js
index 8acbf0f..54c92ef 100644
--- a/internal/httpapi/static/app.js
+++ b/internal/httpapi/static/app.js
@@ -1,5 +1,5 @@
 // Shared state
-const st = { tailLoading: false, atBottom: true, current: '#', earliest: null, sse: null, channels: [] };
+const st = { tailLoading: false, atBottom: true, current: '#', earliest: null, sse: null, channels: [], twLoaded: false };
 
 function measureBars(){
   const hdr = document.querySelector('header.nav');
@@ -26,6 +26,8 @@ async function api(path, params){
   return res.text();
 }
 
+function ensureTwitterWidgets(){ if(st.twLoaded) return; st.twLoaded = true; const s=document.createElement('script'); s.async=true; s.src='https://platform.twitter.com/widgets.js'; document.head.appendChild(s); }
+
 function appendBatch(arr){ const el=document.getElementById('tail'); const frag=document.createDocumentFragment(); arr.forEach(m=>{ const div=document.createElement('div'); div.className='msg'; div.innerHTML=lineHTML(m); frag.appendChild(div); processLinks(div); }); el.appendChild(frag); pinBottomMulti(); }
 function prependBatch(arr){ const el=document.getElementById('tail'); const oldTop=el.firstChild; const beforeTop = oldTop ? oldTop.getBoundingClientRect().top : 0; const frag=document.createDocumentFragment(); arr.forEach(m=>{ const div=document.createElement('div'); div.className='msg'; div.innerHTML=lineHTML(m); frag.appendChild(div); processLinks(div); }); el.insertBefore(frag, el.firstChild); if(oldTop){ const afterTop = oldTop.getBoundingClientRect().top; const delta = afterTop - beforeTop; window.scrollBy(0, delta); } }
 
@@ -43,7 +45,7 @@ function processLinks(scope){ const links = scope.querySelectorAll('a[href]:not(
       const row = document.createElement('div'); row.style.display='flex'; row.style.alignItems='flex-start'; row.style.gap='.5rem'; row.innerHTML = html;
       c.appendChild(row);
       c.querySelectorAll('img').forEach(img=> img.addEventListener('load', ()=> pinBottomMulti()));
-      if(card.html){ const wrap=document.createElement('div'); wrap.innerHTML=card.html; c.appendChild(wrap); }
+      if(card.html){ const wrap=document.createElement('div'); wrap.innerHTML=card.html; c.appendChild(wrap); ensureTwitterWidgets(); }
       // Summary control row
       const ctrl = document.createElement('div'); ctrl.style.marginTop='.25rem';
       const btn = document.createElement('button'); btn.type='button'; btn.title='Summarize this link'; btn.textContent='\u25B6'; btn.style.padding='0 .4rem'; btn.style.fontSize='.9rem';

From 6b213f085e54c27f773c97fa9020e532a77da59e Mon Sep 17 00:00:00 2001
From: Thomas Cravey <tjcravey@MacBookPro.localdomain>
Date: Sun, 17 Aug 2025 16:26:29 -0500
Subject: [PATCH 21/32] feat(ui): add collapse/expand buttons for link cards
 and summaries

---
 internal/httpapi/static/app.js | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/internal/httpapi/static/app.js b/internal/httpapi/static/app.js
index 54c92ef..64b12b2 100644
--- a/internal/httpapi/static/app.js
+++ b/internal/httpapi/static/app.js
@@ -36,28 +36,35 @@ function processLinks(scope){ const links = scope.querySelectorAll('a[href]:not(
   fetch('/api/linkcard?url='+encodeURIComponent(a.href)).then(r=>r.json()).then(card=>{
     if(!card) return;
     if(card.title||card.description||card.image||card.html){
-      const c=document.createElement('div'); c.className='card'; var html='';
+      const c=document.createElement('div'); c.className='card';
+      const details=document.createElement('div'); details.className='card-details';
+      var html='';
       if(card.image){ html += '<div><img src="'+card.image+'" alt="" style="max-width:160px;max-height:120px;object-fit:cover;border-radius:.25rem"></div>'; }
       html += '<div style="flex:1;margin-left:.5rem">';
       if(card.title){ html += '<div style="font-weight:600">'+escapeHtml(card.title)+'</div>'; }
       if(card.description){ html += '<div style="opacity:.8">'+escapeHtml(card.description)+'</div>'; }
       html += '</div>';
       const row = document.createElement('div'); row.style.display='flex'; row.style.alignItems='flex-start'; row.style.gap='.5rem'; row.innerHTML = html;
-      c.appendChild(row);
-      c.querySelectorAll('img').forEach(img=> img.addEventListener('load', ()=> pinBottomMulti()));
-      if(card.html){ const wrap=document.createElement('div'); wrap.innerHTML=card.html; c.appendChild(wrap); ensureTwitterWidgets(); }
-      // Summary control row
+      details.appendChild(row);
+      details.querySelectorAll('img').forEach(img=> img.addEventListener('load', ()=> pinBottomMulti()));
+      if(card.html){ const wrap=document.createElement('div'); wrap.innerHTML=card.html; details.appendChild(wrap); ensureTwitterWidgets(); }
+      c.appendChild(details);
+      // Controls
       const ctrl = document.createElement('div'); ctrl.style.marginTop='.25rem';
       const btn = document.createElement('button'); btn.type='button'; btn.title='Summarize this link'; btn.textContent='\u25B6'; btn.style.padding='0 .4rem'; btn.style.fontSize='.9rem';
       const spinner = document.createElement('span'); spinner.textContent=''; spinner.style.marginLeft='.5rem';
       const sum = document.createElement('div'); sum.className='link-summary'; sum.style.whiteSpace='pre-wrap'; sum.style.marginTop='.25rem';
+      const toggleCard = document.createElement('button'); toggleCard.type='button'; toggleCard.title='Collapse/expand card'; toggleCard.textContent='−'; toggleCard.style.padding='0 .4rem'; toggleCard.style.fontSize='.9rem'; toggleCard.style.marginLeft='.5rem';
+      const toggleSum = document.createElement('button'); toggleSum.type='button'; toggleSum.title='Collapse/expand summary'; toggleSum.textContent='−'; toggleSum.style.padding='0 .4rem'; toggleSum.style.fontSize='.9rem'; toggleSum.style.marginLeft='.25rem';
+      toggleCard.onclick = ()=>{ const hidden = details.style.display==='none'; details.style.display = hidden? '' : 'none'; toggleCard.textContent = hidden? '−' : '+'; pinBottomMulti(); };
+      toggleSum.onclick = ()=>{ const hidden = sum.style.display==='none'; sum.style.display = hidden? '' : 'none'; toggleSum.textContent = hidden? '−' : '+'; pinBottomMulti(); };
       btn.onclick = async ()=>{
-        btn.disabled=true; spinner.textContent='…'; sum.textContent='';
+        btn.disabled=true; spinner.textContent='…'; sum.textContent=''; sum.style.display=''; toggleSum.textContent='−';
         try{ const data = await api('/api/linksummary',{query:{url:a.href}}); sum.textContent = (data && data.summary) ? data.summary : '(no summary)'; }
         catch(e){ sum.textContent = 'error: '+e; }
-        spinner.textContent=''; btn.disabled=false;
+        spinner.textContent=''; btn.disabled=false; pinBottomMulti();
       };
-      ctrl.appendChild(btn); ctrl.appendChild(spinner);
+      ctrl.appendChild(btn); ctrl.appendChild(spinner); ctrl.appendChild(toggleCard); ctrl.appendChild(toggleSum);
       c.appendChild(ctrl);
       c.appendChild(sum);
       a.parentNode.insertBefore(c, a.nextSibling);

From 2680abcf1f1f79c72b99271d6cf02bb9d788917e Mon Sep 17 00:00:00 2001
From: Thomas Cravey <tjcravey@MacBookPro.localdomain>
Date: Sun, 17 Aug 2025 18:02:59 -0500
Subject: [PATCH 22/32] =?UTF-8?q?ux(cards):=20single=20chevron=20expand/co?=
 =?UTF-8?q?llapse=20+=20Summarize=20=E2=9C=A8=20toggle;=20header=20with=20?=
 =?UTF-8?q?favicon/domain?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 internal/httpapi/static/app.css |  6 +++++
 internal/httpapi/static/app.js  | 45 ++++++++++++++++++++++-----------
 2 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/internal/httpapi/static/app.css b/internal/httpapi/static/app.css
index 21b1084..de8729a 100644
--- a/internal/httpapi/static/app.css
+++ b/internal/httpapi/static/app.css
@@ -19,3 +19,9 @@ footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; text-alig
 @media (max-width: 900px) { .dash { grid-template-columns: 1fr; } .dash aside.sidebar { display:none; } }
 /* Summarizer output wrapping */
 #out { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
+
+/* Cards */
+.card { margin:.35rem 0; padding:.5rem; border:1px solid var(--muted-border-color); border-radius:.5rem; background: var(--pico-card-background-color, rgba(0,0,0,0.02)); }
+.card .card-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; cursor:pointer; }
+.card .card-actions { display:flex; align-items:center; gap:.4rem; }
+.card .summary-title { font-weight:600; margin-top:.25rem; opacity:.85; }
diff --git a/internal/httpapi/static/app.js b/internal/httpapi/static/app.js
index 64b12b2..b03d77d 100644
--- a/internal/httpapi/static/app.js
+++ b/internal/httpapi/static/app.js
@@ -37,6 +37,21 @@ function processLinks(scope){ const links = scope.querySelectorAll('a[href]:not(
     if(!card) return;
     if(card.title||card.description||card.image||card.html){
       const c=document.createElement('div'); c.className='card';
+      // Header with favicon/domain + title (clickable), actions on the right
+      const head=document.createElement('div'); head.className='card-head';
+      const left=document.createElement('div'); left.style.display='flex'; left.style.alignItems='center'; left.style.gap='.5rem';
+      const u=new URL(a.href);
+      const fav=document.createElement('img'); fav.src='https://www.google.com/s2/favicons?domain='+u.hostname+'&sz=32'; fav.width=16; fav.height=16; fav.alt=''; fav.loading='lazy'; fav.referrerPolicy='no-referrer';
+      const title=document.createElement('a'); title.href=a.href; title.target='_blank'; title.rel='noopener'; title.textContent=card.title||u.hostname; title.style.fontWeight='600'; title.style.textDecoration='none';
+      left.appendChild(fav); left.appendChild(title);
+      const actions=document.createElement('div'); actions.className='card-actions';
+      const chevron=document.createElement('button'); chevron.type='button'; chevron.title='Expand/collapse'; chevron.textContent='▾'; chevron.style.padding='0 .4rem'; chevron.style.fontSize='.9rem';
+      const btn=document.createElement('button'); btn.type='button'; btn.title='Summarize this link'; btn.textContent='Summarize ✨'; btn.style.padding='0 .4rem'; btn.style.fontSize='.9rem';
+      const spinner=document.createElement('span'); spinner.textContent=''; spinner.style.marginLeft='.5rem';
+      actions.appendChild(btn); actions.appendChild(chevron); actions.appendChild(spinner);
+      head.appendChild(left); head.appendChild(actions);
+      c.appendChild(head);
+      // Body (details)
       const details=document.createElement('div'); details.className='card-details';
       var html='';
       if(card.image){ html += '<div><img src="'+card.image+'" alt="" style="max-width:160px;max-height:120px;object-fit:cover;border-radius:.25rem"></div>'; }
@@ -44,29 +59,29 @@ function processLinks(scope){ const links = scope.querySelectorAll('a[href]:not(
       if(card.title){ html += '<div style="font-weight:600">'+escapeHtml(card.title)+'</div>'; }
       if(card.description){ html += '<div style="opacity:.8">'+escapeHtml(card.description)+'</div>'; }
       html += '</div>';
-      const row = document.createElement('div'); row.style.display='flex'; row.style.alignItems='flex-start'; row.style.gap='.5rem'; row.innerHTML = html;
+      const row=document.createElement('div'); row.style.display='flex'; row.style.alignItems='flex-start'; row.style.gap='.5rem'; row.innerHTML=html;
       details.appendChild(row);
       details.querySelectorAll('img').forEach(img=> img.addEventListener('load', ()=> pinBottomMulti()));
       if(card.html){ const wrap=document.createElement('div'); wrap.innerHTML=card.html; details.appendChild(wrap); ensureTwitterWidgets(); }
       c.appendChild(details);
-      // Controls
-      const ctrl = document.createElement('div'); ctrl.style.marginTop='.25rem';
-      const btn = document.createElement('button'); btn.type='button'; btn.title='Summarize this link'; btn.textContent='\u25B6'; btn.style.padding='0 .4rem'; btn.style.fontSize='.9rem';
-      const spinner = document.createElement('span'); spinner.textContent=''; spinner.style.marginLeft='.5rem';
-      const sum = document.createElement('div'); sum.className='link-summary'; sum.style.whiteSpace='pre-wrap'; sum.style.marginTop='.25rem';
-      const toggleCard = document.createElement('button'); toggleCard.type='button'; toggleCard.title='Collapse/expand card'; toggleCard.textContent='−'; toggleCard.style.padding='0 .4rem'; toggleCard.style.fontSize='.9rem'; toggleCard.style.marginLeft='.5rem';
-      const toggleSum = document.createElement('button'); toggleSum.type='button'; toggleSum.title='Collapse/expand summary'; toggleSum.textContent='−'; toggleSum.style.padding='0 .4rem'; toggleSum.style.fontSize='.9rem'; toggleSum.style.marginLeft='.25rem';
-      toggleCard.onclick = ()=>{ const hidden = details.style.display==='none'; details.style.display = hidden? '' : 'none'; toggleCard.textContent = hidden? '−' : '+'; pinBottomMulti(); };
-      toggleSum.onclick = ()=>{ const hidden = sum.style.display==='none'; sum.style.display = hidden? '' : 'none'; toggleSum.textContent = hidden? '−' : '+'; pinBottomMulti(); };
+      // Summary block (hidden until requested)
+      const sum=document.createElement('div'); sum.className='link-summary'; sum.style.whiteSpace='pre-wrap'; sum.style.marginTop='.25rem'; sum.style.display='none';
+      c.appendChild(sum);
+
+      const toggleDetails = ()=>{ const collapsed = details.style.display==='none'; details.style.display = collapsed? '' : 'none'; chevron.textContent = collapsed? '▾':'▸'; pinBottomMulti(); };
+      head.addEventListener('click', (ev)=>{ if(ev.target===btn || actions.contains(ev.target)) return; toggleDetails(); });
+      chevron.onclick=(ev)=>{ ev.stopPropagation(); toggleDetails(); };
+
       btn.onclick = async ()=>{
-        btn.disabled=true; spinner.textContent='…'; sum.textContent=''; sum.style.display=''; toggleSum.textContent='−';
-        try{ const data = await api('/api/linksummary',{query:{url:a.href}}); sum.textContent = (data && data.summary) ? data.summary : '(no summary)'; }
+        if(sum.style.display!== 'none' && sum.textContent){ // hide existing
+          sum.style.display='none'; btn.textContent='Summarize ✨'; pinBottomMulti(); return;
+        }
+        btn.disabled=true; spinner.textContent='…'; sum.textContent=''; sum.style.display='';
+        try{ const data = await api('/api/linksummary',{query:{url:a.href}}); sum.textContent = (data && data.summary) ? data.summary : '(no summary)'; btn.textContent='Hide summary'; }
         catch(e){ sum.textContent = 'error: '+e; }
         spinner.textContent=''; btn.disabled=false; pinBottomMulti();
       };
-      ctrl.appendChild(btn); ctrl.appendChild(spinner); ctrl.appendChild(toggleCard); ctrl.appendChild(toggleSum);
-      c.appendChild(ctrl);
-      c.appendChild(sum);
+
       a.parentNode.insertBefore(c, a.nextSibling);
     }
   }).catch(()=>{});

From 29d94c13d5472ebeac81e663d1a718b7b50d5725 Mon Sep 17 00:00:00 2001
From: Thomas Cravey <tjcravey@MacBookPro.localdomain>
Date: Sun, 17 Aug 2025 18:24:05 -0500
Subject: [PATCH 23/32] =?UTF-8?q?feat(cards):=20YouTube=20oEmbed;=20UI:=20?=
 =?UTF-8?q?inline=20actions=20in=20header,=20=F0=9F=8C=9D/=F0=9F=8C=9A=20s?=
 =?UTF-8?q?ummarize=20toggle,=20header=20collapse=20hides=20all?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 internal/httpapi/server.go     | 32 ++++++++++++++++++++++++++++++++
 internal/httpapi/static/app.js |  6 +++---
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/internal/httpapi/server.go b/internal/httpapi/server.go
index 39e3b80..02f251d 100644
--- a/internal/httpapi/server.go
+++ b/internal/httpapi/server.go
@@ -270,6 +270,38 @@ func (s *Server) handleLinkCard(w http.ResponseWriter, r *http.Request) {
 		// fallthrough to generic fetch if oEmbed fails
 	}
 
+	// Special handling for YouTube via oEmbed
+	if host == "www.youtube.com" || host == "youtube.com" || host == "m.youtube.com" || host == "youtu.be" {
+		watchURL := raw
+		if host == "youtu.be" {
+			// Convert youtu.be/ID to watch?v=ID
+			id := strings.TrimPrefix(u.Path, "/")
+			watchURL = "https://www.youtube.com/watch?v=" + id
+		}
+		oembed := "https://www.youtube.com/oembed?format=json&url=" + url.QueryEscape(watchURL)
+		client := &http.Client{Timeout: 8 * time.Second}
+		reqY, _ := http.NewRequestWithContext(r.Context(), http.MethodGet, oembed, nil)
+		respY, errY := client.Do(reqY)
+		if errY == nil && respY.StatusCode >= 200 && respY.StatusCode < 300 {
+			defer respY.Body.Close()
+			var o struct{
+				Title string `json:"title"`
+				Author string `json:"author_name"`
+				Thumb string `json:"thumbnail_url"`
+				HTML string `json:"html"`
+			}
+			if err := json.NewDecoder(respY.Body).Decode(&o); err == nil {
+				card := linkCard{URL: raw, Title: o.Title, Image: o.Thumb, HTML: o.HTML}
+				s.cardCache[raw] = card
+				s.cardCacheExp[raw] = time.Now().Add(24 * time.Hour)
+				w.Header().Set("Content-Type", "application/json")
+				_ = json.NewEncoder(w).Encode(card)
+				return
+			}
+		}
+		// fallthrough if oEmbed fails
+	}
+
 	// fetch minimal HTML and extract tags using a tolerant HTML parser
 	client := &http.Client{Timeout: 10 * time.Second}
 	req, _ := http.NewRequestWithContext(r.Context(), http.MethodGet, raw, nil)
diff --git a/internal/httpapi/static/app.js b/internal/httpapi/static/app.js
index b03d77d..dd52cfb 100644
--- a/internal/httpapi/static/app.js
+++ b/internal/httpapi/static/app.js
@@ -46,7 +46,7 @@ function processLinks(scope){ const links = scope.querySelectorAll('a[href]:not(
       left.appendChild(fav); left.appendChild(title);
       const actions=document.createElement('div'); actions.className='card-actions';
       const chevron=document.createElement('button'); chevron.type='button'; chevron.title='Expand/collapse'; chevron.textContent='▾'; chevron.style.padding='0 .4rem'; chevron.style.fontSize='.9rem';
-      const btn=document.createElement('button'); btn.type='button'; btn.title='Summarize this link'; btn.textContent='Summarize ✨'; btn.style.padding='0 .4rem'; btn.style.fontSize='.9rem';
+      const btn=document.createElement('button'); btn.type='button'; btn.title='Summarize this link'; btn.textContent='🌝'; btn.style.padding='0 .4rem'; btn.style.fontSize='.9rem';
       const spinner=document.createElement('span'); spinner.textContent=''; spinner.style.marginLeft='.5rem';
       actions.appendChild(btn); actions.appendChild(chevron); actions.appendChild(spinner);
       head.appendChild(left); head.appendChild(actions);
@@ -74,10 +74,10 @@ function processLinks(scope){ const links = scope.querySelectorAll('a[href]:not(
 
       btn.onclick = async ()=>{
         if(sum.style.display!== 'none' && sum.textContent){ // hide existing
-          sum.style.display='none'; btn.textContent='Summarize ✨'; pinBottomMulti(); return;
+          sum.style.display='none'; btn.textContent='🌝'; pinBottomMulti(); return;
         }
         btn.disabled=true; spinner.textContent='…'; sum.textContent=''; sum.style.display='';
-        try{ const data = await api('/api/linksummary',{query:{url:a.href}}); sum.textContent = (data && data.summary) ? data.summary : '(no summary)'; btn.textContent='Hide summary'; }
+        try{ const data = await api('/api/linksummary',{query:{url:a.href}}); sum.textContent = (data && data.summary) ? data.summary : '(no summary)'; btn.textContent='🌚'; }
         catch(e){ sum.textContent = 'error: '+e; }
         spinner.textContent=''; btn.disabled=false; pinBottomMulti();
       };

From 575622b45c91ec4f6ebe15346345f1cc3edf2ea8 Mon Sep 17 00:00:00 2001
From: Thomas Cravey <tjcravey@MacBookPro.localdomain>
Date: Sun, 17 Aug 2025 18:52:39 -0500
Subject: [PATCH 24/32] feat(link-summ): add SummarizeLink API and server
 integration; youtube oEmbed returns HTML only to avoid duplicate thumbs

---
 internal/httpapi/server.go        | 48 +++++++++++-------
 internal/summarizer/openai.go     | 84 +++++++++++++++++++++++++++++++
 internal/summarizer/summarizer.go |  1 +
 3 files changed, 116 insertions(+), 17 deletions(-)

diff --git a/internal/httpapi/server.go b/internal/httpapi/server.go
index 02f251d..655f89d 100644
--- a/internal/httpapi/server.go
+++ b/internal/httpapi/server.go
@@ -257,7 +257,9 @@ func (s *Server) handleLinkCard(w http.ResponseWriter, r *http.Request) {
 		respTw, errTw := client.Do(reqTw)
 		if errTw == nil && respTw.StatusCode >= 200 && respTw.StatusCode < 300 {
 			defer respTw.Body.Close()
-			var o struct{ HTML string `json:"html"` }
+			var o struct {
+				HTML string `json:"html"`
+			}
 			if err := json.NewDecoder(respTw.Body).Decode(&o); err == nil && o.HTML != "" {
 				card := linkCard{URL: raw, HTML: o.HTML}
 				s.cardCache[raw] = card
@@ -291,7 +293,8 @@ func (s *Server) handleLinkCard(w http.ResponseWriter, r *http.Request) {
 				HTML string `json:"html"`
 			}
 			if err := json.NewDecoder(respY.Body).Decode(&o); err == nil {
-				card := linkCard{URL: raw, Title: o.Title, Image: o.Thumb, HTML: o.HTML}
+				card := linkCard{URL: raw, Title: o.Title, HTML: o.HTML}
+				// Note: do not set Image when HTML is provided to avoid duplicate thumbnails (embed already includes preview)
 				s.cardCache[raw] = card
 				s.cardCacheExp[raw] = time.Now().Add(24 * time.Hour)
 				w.Header().Set("Content-Type", "application/json")
@@ -422,25 +425,38 @@ func (s *Server) handleLinkSummary(w http.ResponseWriter, r *http.Request) {
 		_, _ = w.Write([]byte("summarizer not configured"))
 		return
 	}
-	if s.summaryCache == nil {
-		s.summaryCache = make(map[string]string)
-	}
-	if s.summaryCacheExp == nil {
-		s.summaryCacheExp = make(map[string]time.Time)
-	}
+	if s.summaryCache == nil { s.summaryCache = make(map[string]string) }
+	if s.summaryCacheExp == nil { s.summaryCacheExp = make(map[string]time.Time) }
 	if exp, ok := s.summaryCacheExp[raw]; ok && time.Now().Before(exp) {
 		w.Header().Set("Content-Type", "application/json")
 		_ = json.NewEncoder(w).Encode(map[string]any{"summary": s.summaryCache[raw]})
 		return
 	}
+	// Prefer link-specific summarization when available
+	if sl, ok := s.Summarizer.(interface{ SummarizeLink(context.Context, string) (string, error) }); ok {
+		tout := s.SummarizerTimeout
+		if tout <= 0 { tout = 5 * time.Minute }
+		if tout > 2*time.Minute { tout = 2 * time.Minute }
+		ctx, cancel := context.WithTimeout(r.Context(), tout)
+		defer cancel()
+		sum, err := sl.SummarizeLink(ctx, raw)
+		if err != nil {
+			w.WriteHeader(http.StatusBadGateway)
+			_, _ = w.Write([]byte("summarizer error"))
+			return
+		}
+		if sum == "" { sum = "(no summary)" }
+		s.summaryCache[raw] = sum
+		s.summaryCacheExp[raw] = time.Now().Add(24 * time.Hour)
+		w.Header().Set("Content-Type", "application/json")
+		_ = json.NewEncoder(w).Encode(map[string]any{"summary": sum})
+		return
+	}
+	// Fallback to generic path
 	msgs := []store.Message{{Channel: "#links", Author: "link", Body: raw, Time: time.Now().UTC()}}
 	tout := s.SummarizerTimeout
-	if tout <= 0 {
-		tout = 5 * time.Minute
-	}
-	if tout > 2*time.Minute {
-		tout = 2 * time.Minute
-	}
+	if tout <= 0 { tout = 5 * time.Minute }
+	if tout > 2*time.Minute { tout = 2 * time.Minute }
 	ctx, cancel := context.WithTimeout(r.Context(), tout)
 	defer cancel()
 	sum, err := s.Summarizer.Summarize(ctx, "#links", msgs, 0)
@@ -449,9 +465,7 @@ func (s *Server) handleLinkSummary(w http.ResponseWriter, r *http.Request) {
 		_, _ = w.Write([]byte("summarizer error"))
 		return
 	}
-	if sum == "" {
-		sum = "(no summary)"
-	}
+	if sum == "" { sum = "(no summary)" }
 	s.summaryCache[raw] = sum
 	s.summaryCacheExp[raw] = time.Now().Add(24 * time.Hour)
 	w.Header().Set("Content-Type", "application/json")
diff --git a/internal/summarizer/openai.go b/internal/summarizer/openai.go
index 8caf65a..4aabdab 100644
--- a/internal/summarizer/openai.go
+++ b/internal/summarizer/openai.go
@@ -161,6 +161,90 @@ func (o *OpenAI) Summarize(ctx context.Context, channel string, msgs []store.Mes
 	return out, nil
 }
 
+func (o *OpenAI) SummarizeLink(ctx context.Context, rawURL string) (string, error) {
+	if o == nil || o.apiKey == "" {
+		return "", nil
+	}
+	cfg := openai.DefaultConfig(o.apiKey)
+	if strings.TrimSpace(o.baseURL) != "" {
+		cfg.BaseURL = o.baseURL
+	}
+	client := openai.NewClientWithConfig(cfg)
+
+	content := ""
+	img := ""
+	if isImageURL(rawURL) {
+		img = rawURL
+	} else if o.followLinks {
+		ctx2, cancel := context.WithTimeout(ctx, o.linkTimeout)
+		defer cancel()
+		req, err := http.NewRequestWithContext(ctx2, http.MethodGet, rawURL, nil)
+		if err == nil {
+			resp, err := http.DefaultClient.Do(req)
+			if err == nil {
+				func() {
+					defer resp.Body.Close()
+					if resp.StatusCode >= 200 && resp.StatusCode < 300 {
+						lr := &io.LimitedReader{R: resp.Body, N: int64(o.linkMaxBytes)}
+						b, _ := io.ReadAll(lr)
+						text := string(b)
+						if base, perr := url.Parse(rawURL); perr == nil {
+							if art, err := readability.FromReader(strings.NewReader(text), base); err == nil {
+								if at := strings.TrimSpace(art.TextContent); at != "" {
+									text = at
+								}
+							}
+						}
+						text = strings.ReplaceAll(text, "\r", "")
+						text = strings.TrimSpace(text)
+						if len(text) > 6000 { text = text[:6000] }
+						content = text
+					}
+				}()
+			}
+		}
+	}
+
+	// Build link-specific prompt
+	sys := "You summarize the content at a single URL. Ignore surrounding chat context. Be concise and natural."
+	var userParts []openai.ChatMessagePart
+	b := strings.Builder{}
+	b.WriteString("URL: ")
+	b.WriteString(rawURL)
+	b.WriteString("\n\n")
+	if content != "" {
+		b.WriteString("Extracted content (may be truncated):\n")
+		b.WriteString(content)
+		b.WriteString("\n\n")
+	}
+	b.WriteString("Write a short, skimmable summary of the page/video/image above. If relevant, include key takeaways and any notable cautions. Keep it under a few short paragraphs.")
+	userParts = append(userParts, openai.ChatMessagePart{Type: openai.ChatMessagePartTypeText, Text: b.String()})
+	if img != "" {
+		userParts = append(userParts, openai.ChatMessagePart{Type: openai.ChatMessagePartTypeImageURL, ImageURL: &openai.ChatMessageImageURL{URL: img}})
+	}
+
+	model := o.model
+	if strings.TrimSpace(model) == "" {
+		model = "gpt-4o-mini"
+	}
+	reasoningLike := strings.HasPrefix(model, "gpt-5") || strings.HasPrefix(model, "o1") || strings.Contains(model, "reasoning")
+
+	req := openai.ChatCompletionRequest{
+		Model: model,
+		Messages: []openai.ChatCompletionMessage{
+			{Role: openai.ChatMessageRoleSystem, Content: sys},
+			{Role: openai.ChatMessageRoleUser, MultiContent: userParts},
+		},
+		MaxCompletionTokens: o.maxTokens,
+	}
+	if !reasoningLike { req.Temperature = 0.2 }
+
+	resp, err := client.CreateChatCompletion(ctx, req)
+	if err != nil { return "", err }
+	if len(resp.Choices) == 0 { return "", nil }
+	return strings.TrimSpace(resp.Choices[0].Message.Content), nil
+}
+
 func linksFromImages(imgs []string) []linkSnippet {
 	out := make([]linkSnippet, 0, len(imgs))
 	for _, u := range imgs {
diff --git a/internal/summarizer/summarizer.go b/internal/summarizer/summarizer.go
index c5ce0df..3feea2a 100644
--- a/internal/summarizer/summarizer.go
+++ b/internal/summarizer/summarizer.go
@@ -9,6 +9,7 @@ import (
 
 type Summarizer interface {
     Summarize(ctx context.Context, channel string, msgs []store.Message, window time.Duration) (string, error)
+    SummarizeLink(ctx context.Context, rawURL string) (string, error)
 }
 
 

From fed806bfc01f5b318f9968d65ed3482828085dec Mon Sep 17 00:00:00 2001
From: Thomas Cravey <tjcravey@MacBookPro.localdomain>
Date: Sun, 17 Aug 2025 19:12:26 -0500
Subject: [PATCH 25/32] =?UTF-8?q?ux(cards):=20place=20=F0=9F=8C=9D/?=
 =?UTF-8?q?=F0=9F=8C=9A=20and=20chevron=20inline=20with=20original=20link;?=
 =?UTF-8?q?=20collapse=20hides=20entire=20card;=20improve=20YouTube=20summ?=
 =?UTF-8?q?arization=20path=20groundwork?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 internal/httpapi/static/app.js    | 53 ++++++++++++-------------------
 internal/summarizer/openai.go     | 16 +++++++---
 internal/summarizer/summarizer.go | 12 +++----
 3 files changed, 37 insertions(+), 44 deletions(-)

diff --git a/internal/httpapi/static/app.js b/internal/httpapi/static/app.js
index dd52cfb..e910e1b 100644
--- a/internal/httpapi/static/app.js
+++ b/internal/httpapi/static/app.js
@@ -37,21 +37,6 @@ function processLinks(scope){ const links = scope.querySelectorAll('a[href]:not(
     if(!card) return;
     if(card.title||card.description||card.image||card.html){
       const c=document.createElement('div'); c.className='card';
-      // Header with favicon/domain + title (clickable), actions on the right
-      const head=document.createElement('div'); head.className='card-head';
-      const left=document.createElement('div'); left.style.display='flex'; left.style.alignItems='center'; left.style.gap='.5rem';
-      const u=new URL(a.href);
-      const fav=document.createElement('img'); fav.src='https://www.google.com/s2/favicons?domain='+u.hostname+'&sz=32'; fav.width=16; fav.height=16; fav.alt=''; fav.loading='lazy'; fav.referrerPolicy='no-referrer';
-      const title=document.createElement('a'); title.href=a.href; title.target='_blank'; title.rel='noopener'; title.textContent=card.title||u.hostname; title.style.fontWeight='600'; title.style.textDecoration='none';
-      left.appendChild(fav); left.appendChild(title);
-      const actions=document.createElement('div'); actions.className='card-actions';
-      const chevron=document.createElement('button'); chevron.type='button'; chevron.title='Expand/collapse'; chevron.textContent='▾'; chevron.style.padding='0 .4rem'; chevron.style.fontSize='.9rem';
-      const btn=document.createElement('button'); btn.type='button'; btn.title='Summarize this link'; btn.textContent='🌝'; btn.style.padding='0 .4rem'; btn.style.fontSize='.9rem';
-      const spinner=document.createElement('span'); spinner.textContent=''; spinner.style.marginLeft='.5rem';
-      actions.appendChild(btn); actions.appendChild(chevron); actions.appendChild(spinner);
-      head.appendChild(left); head.appendChild(actions);
-      c.appendChild(head);
-      // Body (details)
       const details=document.createElement('div'); details.className='card-details';
       var html='';
       if(card.image){ html += '<div><img src="'+card.image+'" alt="" style="max-width:160px;max-height:120px;object-fit:cover;border-radius:.25rem"></div>'; }
@@ -61,28 +46,30 @@ function processLinks(scope){ const links = scope.querySelectorAll('a[href]:not(
       html += '</div>';
       const row=document.createElement('div'); row.style.display='flex'; row.style.alignItems='flex-start'; row.style.gap='.5rem'; row.innerHTML=html;
       details.appendChild(row);
-      details.querySelectorAll('img').forEach(img=> img.addEventListener('load', ()=> pinBottomMulti()));
       if(card.html){ const wrap=document.createElement('div'); wrap.innerHTML=card.html; details.appendChild(wrap); ensureTwitterWidgets(); }
+      details.querySelectorAll('img').forEach(img=> img.addEventListener('load', ()=> pinBottomMulti()));
       c.appendChild(details);
-      // Summary block (hidden until requested)
-      const sum=document.createElement('div'); sum.className='link-summary'; sum.style.whiteSpace='pre-wrap'; sum.style.marginTop='.25rem'; sum.style.display='none';
-      c.appendChild(sum);
-
-      const toggleDetails = ()=>{ const collapsed = details.style.display==='none'; details.style.display = collapsed? '' : 'none'; chevron.textContent = collapsed? '▾':'▸'; pinBottomMulti(); };
-      head.addEventListener('click', (ev)=>{ if(ev.target===btn || actions.contains(ev.target)) return; toggleDetails(); });
-      chevron.onclick=(ev)=>{ ev.stopPropagation(); toggleDetails(); };
-
-      btn.onclick = async ()=>{
-        if(sum.style.display!== 'none' && sum.textContent){ // hide existing
-          sum.style.display='none'; btn.textContent='🌝'; pinBottomMulti(); return;
-        }
-        btn.disabled=true; spinner.textContent='…'; sum.textContent=''; sum.style.display='';
-        try{ const data = await api('/api/linksummary',{query:{url:a.href}}); sum.textContent = (data && data.summary) ? data.summary : '(no summary)'; btn.textContent='🌚'; }
+      const sum=document.createElement('div'); sum.className='link-summary'; sum.style.whiteSpace='pre-wrap'; sum.style.marginTop='.25rem'; sum.style.display='none'; c.appendChild(sum);
+      // Place actions inline next to the original link
+      const act=document.createElement('span'); act.style.marginLeft='.35rem';
+      const sumBtn=document.createElement('button'); sumBtn.type='button'; sumBtn.title='Summarize'; sumBtn.textContent='🌝'; sumBtn.style.padding='0 .35rem'; sumBtn.style.fontSize='.9rem';
+      const chevron=document.createElement('button'); chevron.type='button'; chevron.title='Expand/collapse'; chevron.textContent='▾'; chevron.style.padding='0 .35rem'; chevron.style.fontSize='.9rem';
+      const spinner=document.createElement('span'); spinner.textContent=''; spinner.style.marginLeft='.25rem';
+      act.appendChild(sumBtn); act.appendChild(chevron); act.appendChild(spinner);
+      a.insertAdjacentElement('afterend', act);
+      // Insert card after the link line
+      a.parentNode.insertBefore(c, act.nextSibling);
+      const toggle = ()=>{ const hidden = c.style.display==='none'; c.style.display = hidden? '' : 'none'; chevron.textContent = hidden? '▾':'▸'; pinBottomMulti(); };
+      chevron.onclick = (ev)=>{ ev.stopPropagation(); toggle(); };
+      sumBtn.onclick = async ()=>{
+        if(sum.style.display!== 'none' && sum.textContent){ sum.style.display='none'; sumBtn.textContent='🌝'; pinBottomMulti(); return; }
+        // Ensure card is visible when showing summary
+        if(c.style.display==='none'){ toggle(); }
+        sumBtn.disabled=true; spinner.textContent='…'; sum.textContent=''; sum.style.display='';
+        try{ const data = await api('/api/linksummary',{query:{url:a.href}}); sum.textContent = (data && data.summary) ? data.summary : '(no summary)'; sumBtn.textContent='🌚'; }
         catch(e){ sum.textContent = 'error: '+e; }
-        spinner.textContent=''; btn.disabled=false; pinBottomMulti();
+        spinner.textContent=''; sumBtn.disabled=false; pinBottomMulti();
       };
-
-      a.parentNode.insertBefore(c, a.nextSibling);
     }
   }).catch(()=>{});
 }); }
diff --git a/internal/summarizer/openai.go b/internal/summarizer/openai.go
index 4aabdab..7e7ab01 100644
--- a/internal/summarizer/openai.go
+++ b/internal/summarizer/openai.go
@@ -197,7 +197,9 @@ func (o *OpenAI) SummarizeLink(ctx context.Context, rawURL string) (string, erro
 						}
 						text = strings.ReplaceAll(text, "\r", "")
 						text = strings.TrimSpace(text)
-						if len(text) > 6000 { text = text[:6000] }
+						if len(text) > 6000 {
+							text = text[:6000]
+						}
 						content = text
 					}
 				}()
@@ -237,11 +239,17 @@ func (o *OpenAI) SummarizeLink(ctx context.Context, rawURL string) (string, erro
 		},
 		MaxCompletionTokens: o.maxTokens,
 	}
-	if !reasoningLike { req.Temperature = 0.2 }
+	if !reasoningLike {
+		req.Temperature = 0.2
+	}
 
 	resp, err := client.CreateChatCompletion(ctx, req)
-	if err != nil { return "", err }
-	if len(resp.Choices) == 0 { return "", nil }
+	if err != nil {
+		return "", err
+	}
+	if len(resp.Choices) == 0 {
+		return "", nil
+	}
 	return strings.TrimSpace(resp.Choices[0].Message.Content), nil
 }
 
diff --git a/internal/summarizer/summarizer.go b/internal/summarizer/summarizer.go
index 3feea2a..dd416b9 100644
--- a/internal/summarizer/summarizer.go
+++ b/internal/summarizer/summarizer.go
@@ -1,15 +1,13 @@
 package summarizer
 
 import (
-    "context"
-    "time"
+	"context"
+	"time"
 
-    "sojuboy/internal/store"
+	"sojuboy/internal/store"
 )
 
 type Summarizer interface {
-    Summarize(ctx context.Context, channel string, msgs []store.Message, window time.Duration) (string, error)
-    SummarizeLink(ctx context.Context, rawURL string) (string, error)
+	Summarize(ctx context.Context, channel string, msgs []store.Message, window time.Duration) (string, error)
+	SummarizeLink(ctx context.Context, rawURL string) (string, error)
 }
-
-

From e9d764817f7429bbe1adce1d6ba958bfbbba56af Mon Sep 17 00:00:00 2001
From: Thomas Cravey <tjcravey@MacBookPro.localdomain>
Date: Sun, 17 Aug 2025 19:13:18 -0500
Subject: [PATCH 26/32] feat(link-summ): improve YouTube summaries using oEmbed
 title/thumbnail hints; keep prompt link-only

---
 internal/summarizer/openai.go | 55 ++++++++++++++++++++++++++---------
 1 file changed, 42 insertions(+), 13 deletions(-)

diff --git a/internal/summarizer/openai.go b/internal/summarizer/openai.go
index 7e7ab01..04c9940 100644
--- a/internal/summarizer/openai.go
+++ b/internal/summarizer/openai.go
@@ -2,6 +2,7 @@ package summarizer
 
 import (
 	"context"
+	"encoding/json"
 	"io"
 	"net/http"
 	"net/url"
@@ -172,9 +173,42 @@ func (o *OpenAI) SummarizeLink(ctx context.Context, rawURL string) (string, erro
 	client := openai.NewClientWithConfig(cfg)
 
 	content := ""
+	title := ""
 	img := ""
+
+	lu, _ := url.Parse(rawURL)
+	host := strings.ToLower(lu.Host)
+	isYouTube := host == "www.youtube.com" || host == "youtube.com" || host == "m.youtube.com" || host == "youtu.be"
+
 	if isImageURL(rawURL) {
 		img = rawURL
+	} else if isYouTube {
+		// YouTube: try oEmbed for title + thumbnail
+		watchURL := rawURL
+		if host == "youtu.be" {
+			id := strings.TrimPrefix(lu.Path, "/")
+			watchURL = "https://www.youtube.com/watch?v=" + id
+		}
+		ctx2, cancel := context.WithTimeout(ctx, o.linkTimeout)
+		defer cancel()
+		oembed := "https://www.youtube.com/oembed?format=json&url=" + url.QueryEscape(watchURL)
+		req, _ := http.NewRequestWithContext(ctx2, http.MethodGet, oembed, nil)
+		if resp, err := http.DefaultClient.Do(req); err == nil {
+			func(){
+				defer resp.Body.Close()
+				if resp.StatusCode >= 200 && resp.StatusCode < 300 {
+					var oem struct{
+						Title string `json:"title"`
+						Thumb string `json:"thumbnail_url"`
+					}
+					if err := json.NewDecoder(resp.Body).Decode(&oem); err == nil {
+						if oem.Title != "" { title = oem.Title }
+						if oem.Thumb != "" { img = oem.Thumb }
+					}
+				}
+			}()
+		}
+		// No robust transcript grab here; rely on model generalization + title
 	} else if o.followLinks {
 		ctx2, cancel := context.WithTimeout(ctx, o.linkTimeout)
 		defer cancel()
@@ -192,14 +226,13 @@ func (o *OpenAI) SummarizeLink(ctx context.Context, rawURL string) (string, erro
 							if art, err := readability.FromReader(strings.NewReader(text), base); err == nil {
 								if at := strings.TrimSpace(art.TextContent); at != "" {
 									text = at
+									if title == "" && strings.TrimSpace(art.Title) != "" { title = strings.TrimSpace(art.Title) }
 								}
 							}
 						}
 						text = strings.ReplaceAll(text, "\r", "")
 						text = strings.TrimSpace(text)
-						if len(text) > 6000 {
-							text = text[:6000]
-						}
+						if len(text) > 6000 { text = text[:6000] }
 						content = text
 					}
 				}()
@@ -213,7 +246,9 @@ func (o *OpenAI) SummarizeLink(ctx context.Context, rawURL string) (string, erro
 	b := strings.Builder{}
 	b.WriteString("URL: ")
 	b.WriteString(rawURL)
-	b.WriteString("\n\n")
+	b.WriteString("\n")
+	if title != "" { b.WriteString("Title: "); b.WriteString(title); b.WriteString("\n") }
+	b.WriteString("\n")
 	if content != "" {
 		b.WriteString("Extracted content (may be truncated):\n")
 		b.WriteString(content)
@@ -239,17 +274,11 @@ func (o *OpenAI) SummarizeLink(ctx context.Context, rawURL string) (string, erro
 		},
 		MaxCompletionTokens: o.maxTokens,
 	}
-	if !reasoningLike {
-		req.Temperature = 0.2
-	}
+	if !reasoningLike { req.Temperature = 0.2 }
 
 	resp, err := client.CreateChatCompletion(ctx, req)
-	if err != nil {
-		return "", err
-	}
-	if len(resp.Choices) == 0 {
-		return "", nil
-	}
+	if err != nil { return "", err }
+	if len(resp.Choices) == 0 { return "", nil }
 	return strings.TrimSpace(resp.Choices[0].Message.Content), nil
 }
 

From 95e1f779564b5fa25bab17ebb54b3926dd153a37 Mon Sep 17 00:00:00 2001
From: Thomas Cravey <tjcravey@MacBookPro.localdomain>
Date: Sun, 17 Aug 2025 19:27:36 -0500
Subject: [PATCH 27/32] fix(history): prevent duplicate prepend with seen-set
 and fetch guard; reset seen on channel switch

---
 internal/httpapi/static/app.js | 12 ++++++-----
 internal/summarizer/openai.go  | 38 +++++++++++++++++++++++++---------
 2 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/internal/httpapi/static/app.js b/internal/httpapi/static/app.js
index e910e1b..04f9c19 100644
--- a/internal/httpapi/static/app.js
+++ b/internal/httpapi/static/app.js
@@ -1,5 +1,5 @@
 // Shared state
-const st = { tailLoading: false, atBottom: true, current: '#', earliest: null, sse: null, channels: [], twLoaded: false };
+const st = { tailLoading: false, atBottom: true, current: '#', earliest: null, sse: null, channels: [], twLoaded: false, seen: new Set(), loadingHistory: false };
 
 function measureBars(){
   const hdr = document.querySelector('header.nav');
@@ -13,6 +13,8 @@ function escapeHtml(s){ return s.replace(/[&<>"]/g, c=>({'&':'&amp;','<':'&lt;',
 function linkify(t){ return t.replace(/https?:\/\/\S+/g, function(u){ return '<a href="' + u + '" target="_blank" rel="noopener">' + u + '</a>'; }); }
 function lineHTML(m){ const ts = '<span class=ts>[' + m.time + ']</span>'; const nick = '<b style="color:' + colorFor(m.author) + '">' + m.author + '</b>'; const body = escapeHtml(m.body); return ts + ' ' + nick + ': ' + linkify(body); }
 
+function msgKey(m){ return m.time + '|' + m.author + '|' + m.body; }
+
 function snapBottom(){ window.scrollTo(0, document.documentElement.scrollHeight); }
 function pinBottomMulti(){ if(!st.atBottom) return; [0,16,64,200].forEach(d=> setTimeout(()=>requestAnimationFrame(snapBottom), d)); }
 
@@ -28,8 +30,8 @@ async function api(path, params){
 
 function ensureTwitterWidgets(){ if(st.twLoaded) return; st.twLoaded = true; const s=document.createElement('script'); s.async=true; s.src='https://platform.twitter.com/widgets.js'; document.head.appendChild(s); }
 
-function appendBatch(arr){ const el=document.getElementById('tail'); const frag=document.createDocumentFragment(); arr.forEach(m=>{ const div=document.createElement('div'); div.className='msg'; div.innerHTML=lineHTML(m); frag.appendChild(div); processLinks(div); }); el.appendChild(frag); pinBottomMulti(); }
-function prependBatch(arr){ const el=document.getElementById('tail'); const oldTop=el.firstChild; const beforeTop = oldTop ? oldTop.getBoundingClientRect().top : 0; const frag=document.createDocumentFragment(); arr.forEach(m=>{ const div=document.createElement('div'); div.className='msg'; div.innerHTML=lineHTML(m); frag.appendChild(div); processLinks(div); }); el.insertBefore(frag, el.firstChild); if(oldTop){ const afterTop = oldTop.getBoundingClientRect().top; const delta = afterTop - beforeTop; window.scrollBy(0, delta); } }
+function appendBatch(arr){ const el=document.getElementById('tail'); const frag=document.createDocumentFragment(); arr.forEach(m=>{ const key=msgKey(m); if(st.seen.has(key)) return; st.seen.add(key); const div=document.createElement('div'); div.className='msg'; div.dataset.key=key; div.innerHTML=lineHTML(m); frag.appendChild(div); processLinks(div); }); el.appendChild(frag); pinBottomMulti(); }
+function prependBatch(arr){ const el=document.getElementById('tail'); const oldTop=el.firstChild; const beforeTop = oldTop ? oldTop.getBoundingClientRect().top : 0; const frag=document.createDocumentFragment(); arr.forEach(m=>{ const key=msgKey(m); if(st.seen.has(key)) return; st.seen.add(key); const div=document.createElement('div'); div.className='msg'; div.dataset.key=key; div.innerHTML=lineHTML(m); frag.appendChild(div); processLinks(div); }); el.insertBefore(frag, el.firstChild); if(oldTop){ const afterTop = oldTop.getBoundingClientRect().top; const delta = afterTop - beforeTop; window.scrollBy(0, delta); } }
 
 function processLinks(scope){ const links = scope.querySelectorAll('a[href]:not([data-card])'); links.forEach(a=>{ a.setAttribute('data-card','1');
   // Fetch and render card
@@ -77,8 +79,8 @@ function processLinks(scope){ const links = scope.querySelectorAll('a[href]:not(
 async function loadChannels(){ try{ const data = await api('/api/channels'); st.channels = data; renderChannels(); if(data.length>0){ selectChannel(data[0]); } } catch(e){} }
 function renderChannels(){ const list=document.getElementById('nav-chans') || document.getElementById('brand-chans')?.querySelector('ul'); if(!list) return; list.innerHTML=''; st.channels.forEach(c=>{ const li=document.createElement('li'); const a=document.createElement('a'); a.href='#'; a.textContent=c + (c===st.current? ' ✓':''); a.onclick=(ev)=>{ev.preventDefault(); selectChannel(c);}; li.appendChild(a); list.appendChild(li); }); }
 
-async function selectChannel(ch){ if(st.sse){ st.sse.close(); st.sse=null; } st.current=ch; renderChannels(); const el=document.getElementById('tail'); if(!el) return; el.textContent=''; const data = await api('/api/tail',{query:{channel:ch,limit:50}}); appendBatch(data); requestAnimationFrame(()=>{ snapBottom(); st.atBottom=true; }); st.earliest = data.length? data[0].time : null; startStream(); initScrollHandlers(); }
-function initScrollHandlers(){ const el=document.getElementById('tail'); if(!el) return; const onScroll = async ()=>{ const nearBottom = (window.innerHeight + window.pageYOffset + 16) >= document.documentElement.scrollHeight; st.atBottom = nearBottom; const nearTop = window.pageYOffset <= 4; if(nearTop && st.earliest){ try{ const older = await api('/api/history',{query:{channel:st.current,before:st.earliest,limit:50}}); if(older.length){ prependBatch(older); st.earliest = older[0].time; } } catch(e){} } }; window.removeEventListener('scroll', st._scrollHandler || (()=>{})); st._scrollHandler = onScroll; window.addEventListener('scroll', onScroll, {passive:true}); }
+async function selectChannel(ch){ if(st.sse){ st.sse.close(); st.sse=null; } st.current=ch; st.seen = new Set(); st.loadingHistory = false; renderChannels(); const el=document.getElementById('tail'); if(!el) return; el.textContent=''; const data = await api('/api/tail',{query:{channel:ch,limit:50}}); appendBatch(data); requestAnimationFrame(()=>{ snapBottom(); st.atBottom=true; }); st.earliest = data.length? data[0].time : null; startStream(); initScrollHandlers(); }
+function initScrollHandlers(){ const el=document.getElementById('tail'); if(!el) return; const onScroll = async ()=>{ const nearBottom = (window.innerHeight + window.pageYOffset + 16) >= document.documentElement.scrollHeight; st.atBottom = nearBottom; const nearTop = window.pageYOffset <= 4; if(nearTop && st.earliest && !st.loadingHistory){ try{ st.loadingHistory = true; const before = st.earliest; const older = await api('/api/history',{query:{channel:st.current,before:before,limit:50}}); if(older.length){ prependBatch(older); st.earliest = older[0].time; } } catch(e){} finally { st.loadingHistory = false; } } }; window.removeEventListener('scroll', st._scrollHandler || (()=>{})); st._scrollHandler = onScroll; window.addEventListener('scroll', onScroll, {passive:true}); }
 
 function startStream(){ const el=document.getElementById('tail'); if(!el) return; const url=new URL('/api/stream', window.location.origin); url.searchParams.set('channel', st.current); const es=new EventSource(url); st.sse=es; es.onmessage=(ev)=>{ try{ const m=JSON.parse(ev.data); appendBatch([m]); }catch(e){} }; es.onerror=()=>{ es.close(); st.sse=null; setTimeout(startStream, 3000); } }
 
diff --git a/internal/summarizer/openai.go b/internal/summarizer/openai.go
index 04c9940..f380036 100644
--- a/internal/summarizer/openai.go
+++ b/internal/summarizer/openai.go
@@ -194,16 +194,20 @@ func (o *OpenAI) SummarizeLink(ctx context.Context, rawURL string) (string, erro
 		oembed := "https://www.youtube.com/oembed?format=json&url=" + url.QueryEscape(watchURL)
 		req, _ := http.NewRequestWithContext(ctx2, http.MethodGet, oembed, nil)
 		if resp, err := http.DefaultClient.Do(req); err == nil {
-			func(){
+			func() {
 				defer resp.Body.Close()
 				if resp.StatusCode >= 200 && resp.StatusCode < 300 {
-					var oem struct{
+					var oem struct {
 						Title string `json:"title"`
 						Thumb string `json:"thumbnail_url"`
 					}
 					if err := json.NewDecoder(resp.Body).Decode(&oem); err == nil {
-						if oem.Title != "" { title = oem.Title }
-						if oem.Thumb != "" { img = oem.Thumb }
+						if oem.Title != "" {
+							title = oem.Title
+						}
+						if oem.Thumb != "" {
+							img = oem.Thumb
+						}
 					}
 				}
 			}()
@@ -226,13 +230,17 @@ func (o *OpenAI) SummarizeLink(ctx context.Context, rawURL string) (string, erro
 							if art, err := readability.FromReader(strings.NewReader(text), base); err == nil {
 								if at := strings.TrimSpace(art.TextContent); at != "" {
 									text = at
-									if title == "" && strings.TrimSpace(art.Title) != "" { title = strings.TrimSpace(art.Title) }
+									if title == "" && strings.TrimSpace(art.Title) != "" {
+										title = strings.TrimSpace(art.Title)
+									}
 								}
 							}
 						}
 						text = strings.ReplaceAll(text, "\r", "")
 						text = strings.TrimSpace(text)
-						if len(text) > 6000 { text = text[:6000] }
+						if len(text) > 6000 {
+							text = text[:6000]
+						}
 						content = text
 					}
 				}()
@@ -247,7 +255,11 @@ func (o *OpenAI) SummarizeLink(ctx context.Context, rawURL string) (string, erro
 	b.WriteString("URL: ")
 	b.WriteString(rawURL)
 	b.WriteString("\n")
-	if title != "" { b.WriteString("Title: "); b.WriteString(title); b.WriteString("\n") }
+	if title != "" {
+		b.WriteString("Title: ")
+		b.WriteString(title)
+		b.WriteString("\n")
+	}
 	b.WriteString("\n")
 	if content != "" {
 		b.WriteString("Extracted content (may be truncated):\n")
@@ -274,11 +286,17 @@ func (o *OpenAI) SummarizeLink(ctx context.Context, rawURL string) (string, erro
 		},
 		MaxCompletionTokens: o.maxTokens,
 	}
-	if !reasoningLike { req.Temperature = 0.2 }
+	if !reasoningLike {
+		req.Temperature = 0.2
+	}
 
 	resp, err := client.CreateChatCompletion(ctx, req)
-	if err != nil { return "", err }
-	if len(resp.Choices) == 0 { return "", nil }
+	if err != nil {
+		return "", err
+	}
+	if len(resp.Choices) == 0 {
+		return "", nil
+	}
 	return strings.TrimSpace(resp.Choices[0].Message.Content), nil
 }
 

From 01ff3a05790e33c063c9b94907308b9694798db5 Mon Sep 17 00:00:00 2001
From: Thomas Cravey <tjcravey@MacBookPro.localdomain>
Date: Sun, 17 Aug 2025 20:01:03 -0500
Subject: [PATCH 28/32] fix(cards): restore full X embeds by reloading
 widgets.js after injection; enlarge YouTube iframe (responsive 16:9 up to
 640px)

---
 internal/httpapi/static/app.js | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/internal/httpapi/static/app.js b/internal/httpapi/static/app.js
index 04f9c19..bfeb7e1 100644
--- a/internal/httpapi/static/app.js
+++ b/internal/httpapi/static/app.js
@@ -28,7 +28,7 @@ async function api(path, params){
   return res.text();
 }
 
-function ensureTwitterWidgets(){ if(st.twLoaded) return; st.twLoaded = true; const s=document.createElement('script'); s.async=true; s.src='https://platform.twitter.com/widgets.js'; document.head.appendChild(s); }
+function ensureTwitterWidgets(){ if(st.twLoaded) { if(window.twttr && twttr.widgets && typeof twttr.widgets.load==='function'){ /* keep for later calls */ } return; } st.twLoaded = true; const s=document.createElement('script'); s.async=true; s.src='https://platform.twitter.com/widgets.js'; document.head.appendChild(s); }
 
 function appendBatch(arr){ const el=document.getElementById('tail'); const frag=document.createDocumentFragment(); arr.forEach(m=>{ const key=msgKey(m); if(st.seen.has(key)) return; st.seen.add(key); const div=document.createElement('div'); div.className='msg'; div.dataset.key=key; div.innerHTML=lineHTML(m); frag.appendChild(div); processLinks(div); }); el.appendChild(frag); pinBottomMulti(); }
 function prependBatch(arr){ const el=document.getElementById('tail'); const oldTop=el.firstChild; const beforeTop = oldTop ? oldTop.getBoundingClientRect().top : 0; const frag=document.createDocumentFragment(); arr.forEach(m=>{ const key=msgKey(m); if(st.seen.has(key)) return; st.seen.add(key); const div=document.createElement('div'); div.className='msg'; div.dataset.key=key; div.innerHTML=lineHTML(m); frag.appendChild(div); processLinks(div); }); el.insertBefore(frag, el.firstChild); if(oldTop){ const afterTop = oldTop.getBoundingClientRect().top; const delta = afterTop - beforeTop; window.scrollBy(0, delta); } }
@@ -48,7 +48,17 @@ function processLinks(scope){ const links = scope.querySelectorAll('a[href]:not(
       html += '</div>';
       const row=document.createElement('div'); row.style.display='flex'; row.style.alignItems='flex-start'; row.style.gap='.5rem'; row.innerHTML=html;
       details.appendChild(row);
-      if(card.html){ const wrap=document.createElement('div'); wrap.innerHTML=card.html; details.appendChild(wrap); ensureTwitterWidgets(); }
+      if(card.html){
+        const wrap=document.createElement('div');
+        wrap.innerHTML=card.html;
+        // Tweak YouTube iframe sizing
+        const ifr=wrap.querySelector('iframe');
+        if(ifr){ ifr.removeAttribute('width'); ifr.removeAttribute('height'); ifr.style.width='100%'; ifr.style.maxWidth='640px'; ifr.style.aspectRatio='16/9'; ifr.style.height='auto'; ifr.style.borderRadius='.5rem'; }
+        details.appendChild(wrap);
+        // Twitter embed render pass
+        ensureTwitterWidgets();
+        if(window.twttr && twttr.widgets && typeof twttr.widgets.load==='function'){ try{ twttr.widgets.load(wrap); }catch(e){} }
+      }
       details.querySelectorAll('img').forEach(img=> img.addEventListener('load', ()=> pinBottomMulti()));
       c.appendChild(details);
       const sum=document.createElement('div'); sum.className='link-summary'; sum.style.whiteSpace='pre-wrap'; sum.style.marginTop='.25rem'; sum.style.display='none'; c.appendChild(sum);

From 43f12354824118272dcc3ea5828c1d349d1a2c19 Mon Sep 17 00:00:00 2001
From: Thomas Cravey <tjcravey@MacBookPro.localdomain>
Date: Sun, 17 Aug 2025 20:17:29 -0500
Subject: [PATCH 29/32] =?UTF-8?q?tweak:=20swap=20=F0=9F=8C=9A/=F0=9F=8C=9D?=
 =?UTF-8?q?=20UI=20states=20for=20link=20summary;=20adjust=20link=20summar?=
 =?UTF-8?q?izer=20prompt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 internal/httpapi/static/app.js | 4 ++--
 internal/summarizer/openai.go  | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/internal/httpapi/static/app.js b/internal/httpapi/static/app.js
index bfeb7e1..bfd412c 100644
--- a/internal/httpapi/static/app.js
+++ b/internal/httpapi/static/app.js
@@ -74,11 +74,11 @@ function processLinks(scope){ const links = scope.querySelectorAll('a[href]:not(
       const toggle = ()=>{ const hidden = c.style.display==='none'; c.style.display = hidden? '' : 'none'; chevron.textContent = hidden? '▾':'▸'; pinBottomMulti(); };
       chevron.onclick = (ev)=>{ ev.stopPropagation(); toggle(); };
       sumBtn.onclick = async ()=>{
-        if(sum.style.display!== 'none' && sum.textContent){ sum.style.display='none'; sumBtn.textContent='🌝'; pinBottomMulti(); return; }
+        if(sum.style.display!== 'none' && sum.textContent){ sum.style.display='none'; sumBtn.textContent='🌚'; pinBottomMulti(); return; }
         // Ensure card is visible when showing summary
         if(c.style.display==='none'){ toggle(); }
         sumBtn.disabled=true; spinner.textContent='…'; sum.textContent=''; sum.style.display='';
-        try{ const data = await api('/api/linksummary',{query:{url:a.href}}); sum.textContent = (data && data.summary) ? data.summary : '(no summary)'; sumBtn.textContent='🌚'; }
+        try{ const data = await api('/api/linksummary',{query:{url:a.href}}); sum.textContent = (data && data.summary) ? data.summary : '(no summary)'; sumBtn.textContent='🌝'; }
         catch(e){ sum.textContent = 'error: '+e; }
         spinner.textContent=''; sumBtn.disabled=false; pinBottomMulti();
       };
diff --git a/internal/summarizer/openai.go b/internal/summarizer/openai.go
index f380036..5cce09a 100644
--- a/internal/summarizer/openai.go
+++ b/internal/summarizer/openai.go
@@ -249,7 +249,7 @@ func (o *OpenAI) SummarizeLink(ctx context.Context, rawURL string) (string, erro
 	}
 
 	// Build link-specific prompt
-	sys := "You summarize the content at a single URL. Ignore surrounding chat context. Be concise and natural."
+	sys := "You summarize web content."
 	var userParts []openai.ChatMessagePart
 	b := strings.Builder{}
 	b.WriteString("URL: ")
@@ -266,7 +266,7 @@ func (o *OpenAI) SummarizeLink(ctx context.Context, rawURL string) (string, erro
 		b.WriteString(content)
 		b.WriteString("\n\n")
 	}
-	b.WriteString("Write a short, skimmable summary of the page/video/image above. If relevant, include key takeaways and any notable cautions. Keep it under a few short paragraphs.")
+	b.WriteString("Write a summary of the page/video/image above.")
 	userParts = append(userParts, openai.ChatMessagePart{Type: openai.ChatMessagePartTypeText, Text: b.String()})
 	if img != "" {
 		userParts = append(userParts, openai.ChatMessagePart{Type: openai.ChatMessagePartTypeImageURL, ImageURL: &openai.ChatMessageImageURL{URL: img}})

From a38aadd048caa53787eb5abd70b1221ef3e7100a Mon Sep 17 00:00:00 2001
From: Thomas Cravey <tjcravey@MacBookPro.localdomain>
Date: Sun, 17 Aug 2025 20:21:35 -0500
Subject: [PATCH 30/32] =?UTF-8?q?fix(ui):=20default=20summarize=20icon=20?=
 =?UTF-8?q?=F0=9F=8C=9A;=20toggle=20to=20=F0=9F=8C=9D=20after=20summary=20?=
 =?UTF-8?q?shows?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 internal/httpapi/static/app.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/internal/httpapi/static/app.js b/internal/httpapi/static/app.js
index bfd412c..7965d43 100644
--- a/internal/httpapi/static/app.js
+++ b/internal/httpapi/static/app.js
@@ -64,7 +64,7 @@ function processLinks(scope){ const links = scope.querySelectorAll('a[href]:not(
       const sum=document.createElement('div'); sum.className='link-summary'; sum.style.whiteSpace='pre-wrap'; sum.style.marginTop='.25rem'; sum.style.display='none'; c.appendChild(sum);
       // Place actions inline next to the original link
       const act=document.createElement('span'); act.style.marginLeft='.35rem';
-      const sumBtn=document.createElement('button'); sumBtn.type='button'; sumBtn.title='Summarize'; sumBtn.textContent='🌝'; sumBtn.style.padding='0 .35rem'; sumBtn.style.fontSize='.9rem';
+      const sumBtn=document.createElement('button'); sumBtn.type='button'; sumBtn.title='Summarize'; sumBtn.textContent='🌚'; sumBtn.style.padding='0 .35rem'; sumBtn.style.fontSize='.9rem';
       const chevron=document.createElement('button'); chevron.type='button'; chevron.title='Expand/collapse'; chevron.textContent='▾'; chevron.style.padding='0 .35rem'; chevron.style.fontSize='.9rem';
       const spinner=document.createElement('span'); spinner.textContent=''; spinner.style.marginLeft='.25rem';
       act.appendChild(sumBtn); act.appendChild(chevron); act.appendChild(spinner);

From 2c20b9a6389e92d12069cc2a012a18d908ad05f3 Mon Sep 17 00:00:00 2001
From: Thomas Cravey <tjcravey@MacBookPro.localdomain>
Date: Sun, 17 Aug 2025 20:29:50 -0500
Subject: [PATCH 31/32] =?UTF-8?q?fix(link-summ):=20robust=20fetch=20header?=
 =?UTF-8?q?s=20and=20system=20prompt=20to=20avoid=20"can=E2=80=99t=20open?=
 =?UTF-8?q?=20links";=20improves=20sites=20like=20The=20Register?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 internal/summarizer/openai.go | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/internal/summarizer/openai.go b/internal/summarizer/openai.go
index 5cce09a..6374eb8 100644
--- a/internal/summarizer/openai.go
+++ b/internal/summarizer/openai.go
@@ -180,6 +180,9 @@ func (o *OpenAI) SummarizeLink(ctx context.Context, rawURL string) (string, erro
 	host := strings.ToLower(lu.Host)
 	isYouTube := host == "www.youtube.com" || host == "youtube.com" || host == "m.youtube.com" || host == "youtu.be"
 
+	ua := "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0 Safari/537.36"
+	accept := "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8"
+
 	if isImageURL(rawURL) {
 		img = rawURL
 	} else if isYouTube {
@@ -193,6 +196,8 @@ func (o *OpenAI) SummarizeLink(ctx context.Context, rawURL string) (string, erro
 		defer cancel()
 		oembed := "https://www.youtube.com/oembed?format=json&url=" + url.QueryEscape(watchURL)
 		req, _ := http.NewRequestWithContext(ctx2, http.MethodGet, oembed, nil)
+		req.Header.Set("User-Agent", ua)
+		req.Header.Set("Accept", accept)
 		if resp, err := http.DefaultClient.Do(req); err == nil {
 			func() {
 				defer resp.Body.Close()
@@ -218,6 +223,9 @@ func (o *OpenAI) SummarizeLink(ctx context.Context, rawURL string) (string, erro
 		defer cancel()
 		req, err := http.NewRequestWithContext(ctx2, http.MethodGet, rawURL, nil)
 		if err == nil {
+			req.Header.Set("User-Agent", ua)
+			req.Header.Set("Accept", accept)
+			req.Header.Set("Accept-Language", "en-US,en;q=0.9")
 			resp, err := http.DefaultClient.Do(req)
 			if err == nil {
 				func() {
@@ -249,7 +257,7 @@ func (o *OpenAI) SummarizeLink(ctx context.Context, rawURL string) (string, erro
 	}
 
 	// Build link-specific prompt
-	sys := "You summarize web content."
+	sys := "You summarize the content at a single URL. You are given extracted text, title, or image/thumbnail. If the extract is limited, infer the best short summary from what’s available. Do not say you can’t open links or ask for more text; if there’s truly nothing usable, return '(no summary)'. Be concise and natural."
 	var userParts []openai.ChatMessagePart
 	b := strings.Builder{}
 	b.WriteString("URL: ")
@@ -266,7 +274,7 @@ func (o *OpenAI) SummarizeLink(ctx context.Context, rawURL string) (string, erro
 		b.WriteString(content)
 		b.WriteString("\n\n")
 	}
-	b.WriteString("Write a summary of the page/video/image above.")
+	b.WriteString("Write a short, skimmable summary of the page/video/image above. If relevant, include key takeaways and any notable cautions. Keep it under a few short paragraphs.")
 	userParts = append(userParts, openai.ChatMessagePart{Type: openai.ChatMessagePartTypeText, Text: b.String()})
 	if img != "" {
 		userParts = append(userParts, openai.ChatMessagePart{Type: openai.ChatMessagePartTypeImageURL, ImageURL: &openai.ChatMessageImageURL{URL: img}})
@@ -286,17 +294,11 @@ func (o *OpenAI) SummarizeLink(ctx context.Context, rawURL string) (string, erro
 		},
 		MaxCompletionTokens: o.maxTokens,
 	}
-	if !reasoningLike {
-		req.Temperature = 0.2
-	}
+	if !reasoningLike { req.Temperature = 0.2 }
 
 	resp, err := client.CreateChatCompletion(ctx, req)
-	if err != nil {
-		return "", err
-	}
-	if len(resp.Choices) == 0 {
-		return "", nil
-	}
+	if err != nil { return "", err }
+	if len(resp.Choices) == 0 { return "", nil }
 	return strings.TrimSpace(resp.Choices[0].Message.Content), nil
 }
 

From 2f9ab6a4141cd5b1429216610a99587de0fd954f Mon Sep 17 00:00:00 2001
From: Thomas Cravey <tjcravey@MacBookPro.localdomain>
Date: Sun, 17 Aug 2025 20:37:27 -0500
Subject: [PATCH 32/32] docs: update README for Web UI, SSE, link
 cards/summary; add CHANGELOG Beta 2 (v0.2.0)

---
 CHANGELOG.md                  | 13 ++++++
 README.md                     | 76 ++++++++++++++++++-----------------
 internal/summarizer/openai.go | 12 ++++--
 3 files changed, 61 insertions(+), 40 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b573d1c..8182114 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,19 @@
 
 All notable changes to this project will be documented in this file.
 
+## Beta 2 (v0.2.0)
+- Web UI overhaul: fixed header, single-scroll layout, auto pin-to-bottom, infinite scroll history
+- Channel selector moved into menubar brand; commit hash shown subtly
+- SSE realtime updates and JSON APIs for info, channels, tail, history, stream
+- Link cards: robust OG/Twitter parsing, X (Twitter) oEmbed embeds, YouTube oEmbed, direct image previews
+- On-demand link summaries with caching; inline actions (🌚/🌝, ▾) and collapse/expand
+- Dedicated link-only LLM prompt; improved fetch headers; readability extraction; image-to-vision support
+- Mention detection/rate limiting/quiet hours retained and refined
+- Store: case-insensitive channel queries, msgid de-dup, WAL, history paging
+- Metrics: messages ingested, notifications sent, pruned, connection gauge
+- Docker: multi-arch build, healthcheck; version/commit/build injected
+- Numerous bug fixes (template rendering, static assets path, scroll duplicates, initial bottom snap)
+
 ## Beta 1 (initial release)
 - soju-specific raw connector with event playback and CHATHISTORY fallback
 - Message storage (SQLite, WAL), msgid de-dup, retention job
diff --git a/README.md b/README.md
index 8ed4575..05587a2 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,7 @@ An IRC bouncer companion service for soju that:
 - Notifies you on mentions via Pushover (default)
 - Stores messages in SQLite for summaries and on-demand inspection
 - Generates AI digests (OpenAI by default) on schedule or on demand
-- Exposes a small HTTP API for health, tailing messages, metrics, and triggering digests
+- Exposes a small HTTP API and a minimal Web UI (Pico.css) for status, tail, history, link cards, and on-demand summaries
 
 Note: this is not a bot and never replies in IRC. It passively attaches as a soju multi-client on your main account.
 
@@ -18,20 +18,20 @@ If you use soju as a bouncer, you may want per-client alerts and AI summaries wi
 
 - Language: Go (single static binary, low memory footprint)
 - Long-lived IRC client: raw IRC using a lightweight parser (sorcix/irc) with an irssi-style handshake tailored for soju
-- Message storage: SQLite via modernc.org/sqlite
+- Message storage: SQLite via modernc.org/sqlite (WAL enabled)
 - Scheduling: github.com/robfig/cron/v3
 - Notifications: github.com/gregdel/pushover
 - Summarization (LLM): github.com/sashabaranov/go-openai
-- HTTP API: Go stdlib `net/http`
+- HTTP API + Web UI: Go stdlib `net/http` + `html/template` + embedded static assets
 
 Runtime modules:
 
 - `internal/soju`: soju connection, capability negotiation, irssi-style PASS/USER auth, joins, message ingestion, event playback, CHATHISTORY fallback
 - `internal/store`: SQLite schema and queries
 - `internal/notifier`: Pushover notifier (pluggable interface)
-- `internal/summarizer`: OpenAI client with GPT-5 defaults, GPT-4o-mini fallback
+- `internal/summarizer`: OpenAI client with GPT-5 defaults, GPT-4o-mini fallback; separate link-summarization prompt
 - `internal/scheduler`: cron-based digest scheduling and daily retention job
-- `internal/httpapi`: `/healthz`, `/ready`, `/tail`, `/trigger`, `/metrics`
+- `internal/httpapi`: `/healthz`, `/ready`, `/tail`, `/trigger`, `/metrics`, Web UI and JSON APIs
 - `internal/config`: env config loader and helpers
 
 ## Features
@@ -41,7 +41,11 @@ Runtime modules:
 - AI digest generation: concise natural summaries (no rigid sections); integrates pasted multi-line posts and referenced link context; image links sent to GPT‑5 as vision inputs
 - Configurable schedules (cron), quiet hours, and summary parameters
 - Local persistence with retention pruning (daily at 03:00)
-- HTTP endpoints: health, tail, metrics, on-demand digests
+- Web UI with:
+  - Realtime chat tail via SSE; auto-scroll to bottom; preload older history with infinite scroll-up
+  - Link cards with OG/Twitter metadata (X posts via oEmbed), YouTube oEmbed embeds, direct image previews
+  - Inline on-demand link summarization with caching (24h), and a single summarize toggle (🌚/🌝)
+  - Channel selector in the menubar, login interstitial using `HTTP_TOKEN`
 
 ## How it works
 
@@ -60,20 +64,21 @@ Runtime modules:
 4) Messages and mentions:
    - Each `PRIVMSG` is stored with server-time when available
    - Mentions trigger Pushover notifications subject to quiet hours, urgency, and rate limits
-   - Debug logs include: mention delivered or suppression reason (backfill, quiet hours, rate limit)
 
 5) Summarization:
-   - `/trigger` or the scheduler loads a window and calls OpenAI
-   - GPT‑5 context: ~272k input tokens + up to 128k output tokens (400k total)
-   - Summaries are concise/natural and integrate multi-line posts, article text (readability-extracted), and image links (vision)
+   - Digests: `/trigger` or the scheduler loads a window and calls OpenAI with a conversation-focused prompt
+   - Link summaries: dedicated prompt that ignores chat context; fetches page content with readability; includes oEmbed hints for YouTube and X; passes images to vision models
 
-6) HTTP API:
+6) HTTP + JSON API:
    - `/healthz` → `200 ok`
    - `/ready` → `200` only when connected to soju
-   - `/tail?channel=#chan&limit=N` → plaintext tail (chronological)
-   - `/trigger?channel=#chan&window=6h` → returns digest and sends via notifier
+   - `/tail?channel=#chan&limit=N` → JSON tail for UI
+   - `/history?channel=#chan&before=<RFC3339>&limit=N` → JSON older messages (infinite scroll)
+   - `/trigger?channel=#chan&window=6h` → returns digest JSON and (optionally) pushes via notifier
+   - `/linkcard?url=...` → card JSON (title/desc/image or embed HTML)
+   - `/linksummary?url=...` → brief AI summary of a single URL (cached 24h)
    - `/metrics` → Prometheus text metrics
-   - Protect `/tail` and `/trigger` with `HTTP_TOKEN` via Bearer, `token` query, `X-Auth-Token`, or basic auth (`token:<HTTP_TOKEN>`)
+   - Protect UI + JSON with `HTTP_TOKEN` cookie; APIs also allow Bearer/query token
 
 ## Health and readiness
 
@@ -222,7 +227,7 @@ Compose (with localhost bind suitable for Synology reverse proxy):
 ```yaml
 services:
   sojuboy:
-    image: code.cravey.net/your-user/sojuboy:v0.1.0-beta1
+    image: code.cravey.net/your-user/sojuboy:v0.2.0-beta2
     restart: unless-stopped
     env_file: .env
     ports:
@@ -241,7 +246,7 @@ services:
 ```yaml
 services:
   sojuboy:
-    image: code.cravey.net/your-user/sojuboy:v0.1.0-beta1
+    image: code.cravey.net/your-user/sojuboy:v0.2.0-beta2
     restart: unless-stopped
     ports:
       - "127.0.0.1:8080:8080"  # bind only to localhost; fronted by DSM Reverse Proxy
@@ -316,16 +321,16 @@ services:
 | OPENAI_API_KEY | (empty) |
 | OPENAI_BASE_URL | (empty) |
 | OPENAI_MODEL | gpt-5 |
-| OPENAI_MAX_TOKENS | 700 |
+| OPENAI_MAX_TOKENS | 128000 |
 | SUMM_FOLLOW_LINKS | true |
-| SUMM_LINK_TIMEOUT | 6s |
-| SUMM_LINK_MAX_BYTES | 262144 |
-| SUMM_GROUP_WINDOW | 90s |
-| SUMM_MAX_LINKS | 5 |
+| SUMM_LINK_TIMEOUT | 20s |
+| SUMM_LINK_MAX_BYTES | 1048576 |
+| SUMM_GROUP_WINDOW | 120s |
+| SUMM_MAX_LINKS | 20 |
 | SUMM_MAX_GROUPS | 0 |
-| SUMM_TIMEOUT | 5m |
+| SUMM_TIMEOUT | 10m |
 | DIGEST_CRON | 0 */6 * * * |
-| DIGEST_WINDOW | 6h |
+| DIGEST_WINDOW | 24h |
 | QUIET_HOURS | (empty) |
 | NOTIFY_BACKFILL | false |
 | MENTION_MIN_INTERVAL | 30s |
@@ -335,7 +340,7 @@ services:
 | HTTP_LISTEN | :8080 |
 | HTTP_TOKEN | (empty) |
 | STORE_PATH | /data/app.db |
-| STORE_RETENTION_DAYS | 7 |
+| STORE_RETENTION_DAYS | 365 |
 | LOG_LEVEL | info |
 
 ## Pushover setup
@@ -355,25 +360,22 @@ services:
 ## HTTP API
 
 - `GET /healthz` → `200 ok`
-- `GET /tail?channel=%23chan&limit=50`
-  - Returns plaintext messages (chronological)
-  - Auth: provide `HTTP_TOKEN` as a Bearer token (or query param `token=`)
-- `GET /trigger?channel=%23chan&window=6h`
-  - Returns plaintext digest
-  - Also sends via notifier when configured
-  - Auth as above
+- `GET /tail?channel=%23chan&limit=50` (JSON)
+- `GET /history?channel=%23chan&before=<RFC3339>&limit=50` (JSON)
+- `GET /trigger?channel=%23chan&window=6h` (JSON)
+- `GET /linkcard?url=…` (JSON)
+- `GET /linksummary?url=…` (JSON)
 - `GET /metrics`
-  - Prometheus metrics: `sojuboy_messages_ingested_total`, `sojuboy_notifications_sent_total`, `sojuboy_messages_pruned_total`, `sojuboy_connected`
 
 ## Troubleshooting
 
 - Empty tail while there’s activity
-  - Ensure the service logs `join requested:` followed by `joined` for your channels
+  - Ensure the service logs readiness and joins for your channels
   - Confirm `.env` `CHANNELS` contains your channels
-  - Check for `/metrics` and logs for recent message ingestion
+  - Check `/metrics` and logs for recent message ingestion
 
-- 401 Unauthorized from `/tail` or `/trigger`
-  - Provide `Authorization: Bearer $HTTP_TOKEN` or `?token=$HTTP_TOKEN`
+- 401 Unauthorized from UI/API
+  - Log in at `/login` with `HTTP_TOKEN`, or pass it via Bearer/`token=`
 
 - OpenAI 502/URL errors
   - Ensure `OPENAI_BASE_URL=https://api.openai.com/v1`
@@ -394,7 +396,7 @@ Project layout (selected):
 - `internal/store` – SQLite schema and queries
 - `internal/notifier` – Pushover notifier
 - `internal/summarizer` – OpenAI client and prompts
-- `internal/httpapi` – health, tail, trigger, metrics endpoints
+- `internal/httpapi` – UI and endpoints
 - `internal/scheduler` – cron jobs
 
 Go toolchain: see `go.mod` (Go 1.23), Dockerfile builds static binary for a distroless image.
diff --git a/internal/summarizer/openai.go b/internal/summarizer/openai.go
index 6374eb8..0fc5d10 100644
--- a/internal/summarizer/openai.go
+++ b/internal/summarizer/openai.go
@@ -294,11 +294,17 @@ func (o *OpenAI) SummarizeLink(ctx context.Context, rawURL string) (string, erro
 		},
 		MaxCompletionTokens: o.maxTokens,
 	}
-	if !reasoningLike { req.Temperature = 0.2 }
+	if !reasoningLike {
+		req.Temperature = 0.2
+	}
 
 	resp, err := client.CreateChatCompletion(ctx, req)
-	if err != nil { return "", err }
-	if len(resp.Choices) == 0 { return "", nil }
+	if err != nil {
+		return "", err
+	}
+	if len(resp.Choices) == 0 {
+		return "", nil
+	}
 	return strings.TrimSpace(resp.Choices[0].Message.Content), nil
 }