feat(web): add dockerized web UI with comic library browser

Adds a `yoink serve` command that starts an HTTP server with a
Sonarr/MeTube-inspired dark UI. Features a URL input bar for
triggering downloads, a 150x300 cover grid with filter and sort
controls, a live download queue strip, and toast notifications.

Includes Dockerfile (multi-stage, distroless runtime) and
docker-compose.yml for easy deployment.

.dockerignore

@@ -0,0 +1,5 @@
+.git
+.github
+*.md
+library/
+*_test.go

.gitignore

@@ -19,4 +19,15 @@ go.work
 go.work.sum
 
 # env file
-.env
+.env
+
+# Built binary
+yoink
+yoink.exe
+
+# Comic library (downloaded content)
+library/
+
+# IDE
+.vscode/
+.idea/

Dockerfile

@@ -0,0 +1,37 @@
+# ── Build stage ────────────────────────────────────────────────────────────
+FROM mcr.microsoft.com/oss/go/microsoft/golang:1.22-bullseye AS builder
+
+WORKDIR /app
+
+# Restore modules in a separate layer so it's cached until go.mod/go.sum change
+COPY go.mod go.sum ./
+RUN go mod download && go mod verify
+
+# Copy source and build a fully static binary
+COPY . .
+RUN CGO_ENABLED=0 GOOS=linux GOARCH=amd64 \
+    go build -ldflags="-s -w" -trimpath -o yoink .
+
+# ── Runtime stage ──────────────────────────────────────────────────────────
+# distroless/base-debian12:nonroot — minimal attack surface, non-root by default
+FROM gcr.io/distroless/base-debian12:nonroot
+
+LABEL org.opencontainers.image.title="yoink" \
+      org.opencontainers.image.description="Comic downloader web UI" \
+      org.opencontainers.image.source="https://github.com/bryanlundberg/yoink-go"
+
+WORKDIR /app
+
+COPY --from=builder --chown=nonroot:nonroot /app/yoink .
+
+ENV YOINK_LIBRARY=/library
+
+VOLUME ["/library"]
+EXPOSE 8080
+
+HEALTHCHECK --interval=30s --timeout=5s --start-period=5s --retries=3 \
+    CMD ["/app/yoink", "healthcheck"]
+
+USER nonroot
+
+CMD ["/app/yoink", "serve"]

cli/healthcheck.go

@@ -0,0 +1,28 @@
+package cli
+
+import (
+	"fmt"
+	"net/http"
+	"os"
+
+	"github.com/spf13/cobra"
+)
+
+var healthcheckCmd = &cobra.Command{
+	Use:    "healthcheck",
+	Short:  "Check if the web server is running (used by Docker HEALTHCHECK)",
+	Args:   cobra.NoArgs,
+	Hidden: true,
+	Run: func(cmd *cobra.Command, args []string) {
+		port, _ := cmd.Flags().GetString("port")
+		resp, err := http.Get(fmt.Sprintf("http://localhost:%s/health", port))
+		if err != nil || resp.StatusCode != http.StatusOK {
+			os.Exit(1)
+		}
+	},
+}
+
+func init() {
+	healthcheckCmd.Flags().StringP("port", "p", "8080", "Port the server is listening on")
+	cli.AddCommand(healthcheckCmd)
+}

cli/serve.go

@@ -0,0 +1,36 @@
+package cli
+
+import (
+	"fmt"
+	"log"
+	"os"
+	"path/filepath"
+
+	"github.com/spf13/cobra"
+	"yoink/web"
+)
+
+var serveCmd = &cobra.Command{
+	Use:   "serve",
+	Short: "Start the Yoink web UI",
+	Args:  cobra.NoArgs,
+	Run: func(cmd *cobra.Command, args []string) {
+		library, ok := os.LookupEnv("YOINK_LIBRARY")
+		if !ok {
+			userHome, _ := os.UserHomeDir()
+			library = filepath.Join(userHome, ".yoink")
+		}
+
+		port, _ := cmd.Flags().GetString("port")
+		addr := fmt.Sprintf(":%s", port)
+
+		if err := web.Listen(addr, library); err != nil {
+			log.Fatal(err)
+		}
+	},
+}
+
+func init() {
+	serveCmd.Flags().StringP("port", "p", "8080", "Port to listen on")
+	cli.AddCommand(serveCmd)
+}

docker-compose.yml

@@ -0,0 +1,10 @@
+services:
+  yoink:
+    build: .
+    ports:
+      - "8080:8080"
+    volumes:
+      - ./library:/library
+    environment:
+      - YOINK_LIBRARY=/library
+    restart: unless-stopped

web/server.go

@@ -0,0 +1,247 @@
+package web
+
+import (
+	"embed"
+	"encoding/json"
+	"fmt"
+	"io/fs"
+	"net/http"
+	"net/url"
+	"os"
+	"path/filepath"
+	"sort"
+	"strings"
+	"sync"
+	"time"
+
+	"github.com/PuerkitoBio/goquery"
+	"yoink/comic"
+)
+
+//go:embed static
+var staticFiles embed.FS
+
+type JobStatus string
+
+const (
+	StatusPending  JobStatus = "pending"
+	StatusRunning  JobStatus = "running"
+	StatusComplete JobStatus = "complete"
+	StatusError    JobStatus = "error"
+)
+
+type Job struct {
+	ID        string    `json:"id"`
+	URL       string    `json:"url"`
+	Title     string    `json:"title"`
+	Status    JobStatus `json:"status"`
+	Error     string    `json:"error,omitempty"`
+	CreatedAt time.Time `json:"created_at"`
+}
+
+type ComicEntry struct {
+	Title        string    `json:"title"`
+	CoverURL     string    `json:"cover_url"`
+	FileURL      string    `json:"file_url"`
+	DownloadedAt time.Time `json:"downloaded_at"`
+}
+
+type Server struct {
+	libraryPath string
+	jobs        map[string]*Job
+	mu          sync.RWMutex
+}
+
+func NewServer(libraryPath string) *Server {
+	return &Server{
+		libraryPath: libraryPath,
+		jobs:        make(map[string]*Job),
+	}
+}
+
+func (s *Server) Handler() http.Handler {
+	mux := http.NewServeMux()
+
+	// Embedded static assets
+	staticFS, _ := fs.Sub(staticFiles, "static")
+	mux.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.FS(staticFS))))
+
+	// Library files: covers (inline) and cbz downloads (attachment)
+	mux.Handle("/covers/", http.StripPrefix("/covers/", http.FileServer(http.Dir(s.libraryPath))))
+	mux.Handle("/files/", http.StripPrefix("/files/", s.downloadHandler()))
+
+	// API
+	mux.HandleFunc("/api/download", s.handleDownload)
+	mux.HandleFunc("/api/comics", s.handleComics)
+	mux.HandleFunc("/api/jobs", s.handleJobs)
+	mux.HandleFunc("/health", func(w http.ResponseWriter, r *http.Request) {
+		w.WriteHeader(http.StatusOK)
+	})
+
+	// SPA root
+	mux.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
+		if r.URL.Path != "/" {
+			http.NotFound(w, r)
+			return
+		}
+		data, _ := staticFiles.ReadFile("static/index.html")
+		w.Header().Set("Content-Type", "text/html; charset=utf-8")
+		w.Write(data)
+	})
+
+	return mux
+}
+
+// downloadHandler wraps the library file server to force Content-Disposition: attachment.
+func (s *Server) downloadHandler() http.Handler {
+	fs := http.FileServer(http.Dir(s.libraryPath))
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		w.Header().Set("Content-Disposition", "attachment")
+		fs.ServeHTTP(w, r)
+	})
+}
+
+func (s *Server) handleDownload(w http.ResponseWriter, r *http.Request) {
+	if r.Method != http.MethodPost {
+		http.Error(w, "method not allowed", http.StatusMethodNotAllowed)
+		return
+	}
+
+	var req struct {
+		URL string `json:"url"`
+	}
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil || strings.TrimSpace(req.URL) == "" {
+		http.Error(w, "invalid request", http.StatusBadRequest)
+		return
+	}
+
+	job := &Job{
+		ID:        fmt.Sprintf("%d", time.Now().UnixNano()),
+		URL:       req.URL,
+		Status:    StatusPending,
+		CreatedAt: time.Now(),
+	}
+
+	s.mu.Lock()
+	s.jobs[job.ID] = job
+	s.mu.Unlock()
+
+	go s.runJob(job)
+
+	w.Header().Set("Content-Type", "application/json")
+	json.NewEncoder(w).Encode(job)
+}
+
+func (s *Server) runJob(job *Job) {
+	s.mu.Lock()
+	job.Status = StatusRunning
+	s.mu.Unlock()
+
+	markupCh := make(chan *goquery.Document)
+	imageCh := make(chan []string)
+
+	c := comic.NewComic(job.URL, s.libraryPath, imageCh, markupCh)
+
+	s.mu.Lock()
+	job.Title = c.Title
+	s.mu.Unlock()
+
+	errs := c.Download(len(c.Filelist))
+	if len(errs) > 0 {
+		s.mu.Lock()
+		job.Status = StatusError
+		job.Error = errs[0].Error()
+		s.mu.Unlock()
+		return
+	}
+
+	if err := c.Archive(); err != nil {
+		s.mu.Lock()
+		job.Status = StatusError
+		job.Error = err.Error()
+		s.mu.Unlock()
+		return
+	}
+
+	c.Cleanup()
+
+	s.mu.Lock()
+	job.Status = StatusComplete
+	s.mu.Unlock()
+}
+
+func (s *Server) handleComics(w http.ResponseWriter, r *http.Request) {
+	w.Header().Set("Content-Type", "application/json")
+
+	entries := []ComicEntry{}
+
+	dirs, err := os.ReadDir(s.libraryPath)
+	if err != nil {
+		json.NewEncoder(w).Encode(entries)
+		return
+	}
+
+	for _, dir := range dirs {
+		if !dir.IsDir() {
+			continue
+		}
+
+		title := dir.Name()
+		dirPath := filepath.Join(s.libraryPath, title)
+
+		var coverURL, fileURL string
+		var downloadedAt time.Time
+
+		files, _ := os.ReadDir(dirPath)
+		for _, f := range files {
+			name := f.Name()
+
+			if strings.HasSuffix(name, ".cbz") {
+				fileURL = "/files/" + url.PathEscape(title) + "/" + url.PathEscape(name)
+				if info, err := f.Info(); err == nil {
+					downloadedAt = info.ModTime()
+				}
+			}
+
+			// Cover kept by Cleanup: "<Title> 001.jpg"
+			stripped := strings.TrimSpace(strings.TrimPrefix(name, title))
+			if strings.HasPrefix(strings.ToLower(stripped), "001") {
+				coverURL = "/covers/" + url.PathEscape(title) + "/" + url.PathEscape(name)
+			}
+		}
+
+		if fileURL != "" {
+			entries = append(entries, ComicEntry{
+				Title:        title,
+				CoverURL:     coverURL,
+				FileURL:      fileURL,
+				DownloadedAt: downloadedAt,
+			})
+		}
+	}
+
+	// Default: newest first
+	sort.Slice(entries, func(i, j int) bool {
+		return entries[i].DownloadedAt.After(entries[j].DownloadedAt)
+	})
+
+	json.NewEncoder(w).Encode(entries)
+}
+
+func (s *Server) handleJobs(w http.ResponseWriter, r *http.Request) {
+	s.mu.RLock()
+	jobs := make([]*Job, 0, len(s.jobs))
+	for _, j := range s.jobs {
+		jobs = append(jobs, j)
+	}
+	s.mu.RUnlock()
+
+	w.Header().Set("Content-Type", "application/json")
+	json.NewEncoder(w).Encode(jobs)
+}
+
+func Listen(addr string, libraryPath string) error {
+	srv := NewServer(libraryPath)
+	fmt.Printf("Yoink web server listening on %s\n", addr)
+	return http.ListenAndServe(addr, srv.Handler())
+}

web/static/index.html

@@ -0,0 +1,695 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Yoink</title>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    :root {
+      --bg:        #0d0f14;
+      --surface:   #13151e;
+      --card:      #1a1d2e;
+      --border:    #252840;
+      --accent:    #4f8ef7;
+      --accent-hv: #6aa3ff;
+      --text:      #e2e8f0;
+      --muted:     #6b7280;
+      --success:   #22c55e;
+      --error:     #ef4444;
+      --warn:      #f59e0b;
+    }
+
+    body {
+      background: var(--bg);
+      color: var(--text);
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      min-height: 100vh;
+    }
+
+    /* ── Header ─────────────────────────────────────────────── */
+    header {
+      position: sticky;
+      top: 0;
+      z-index: 100;
+      background: var(--surface);
+      border-bottom: 1px solid var(--border);
+      padding: 0 24px;
+      height: 64px;
+      display: flex;
+      align-items: center;
+      gap: 24px;
+    }
+
+    .logo {
+      font-size: 1.4rem;
+      font-weight: 800;
+      letter-spacing: 0.12em;
+      color: var(--accent);
+      white-space: nowrap;
+      flex-shrink: 0;
+    }
+
+    .logo span {
+      color: var(--text);
+    }
+
+    .url-form {
+      flex: 1;
+      display: flex;
+      gap: 0;
+      max-width: 760px;
+    }
+
+    .url-input {
+      flex: 1;
+      height: 40px;
+      padding: 0 16px;
+      background: var(--bg);
+      border: 1px solid var(--border);
+      border-right: none;
+      border-radius: 6px 0 0 6px;
+      color: var(--text);
+      font-size: 0.9rem;
+      outline: none;
+      transition: border-color 0.15s;
+    }
+
+    .url-input::placeholder { color: var(--muted); }
+    .url-input:focus { border-color: var(--accent); }
+
+    .url-btn {
+      height: 40px;
+      padding: 0 20px;
+      background: var(--accent);
+      color: #fff;
+      border: none;
+      border-radius: 0 6px 6px 0;
+      font-size: 0.875rem;
+      font-weight: 600;
+      cursor: pointer;
+      white-space: nowrap;
+      transition: background 0.15s;
+    }
+
+    .url-btn:hover { background: var(--accent-hv); }
+    .url-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+    /* ── Queue strip ─────────────────────────────────────────── */
+    #queue {
+      background: var(--surface);
+      border-bottom: 1px solid var(--border);
+      padding: 0 24px;
+      display: none;
+      flex-direction: column;
+      gap: 1px;
+    }
+
+    #queue.visible { display: flex; }
+
+    .queue-item {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 10px 0;
+      border-bottom: 1px solid var(--border);
+      font-size: 0.85rem;
+    }
+
+    .queue-item:last-child { border-bottom: none; }
+
+    .queue-title {
+      flex: 1;
+      color: var(--text);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .queue-url {
+      color: var(--muted);
+      font-size: 0.75rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 320px;
+    }
+
+    .status-pill {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 3px 10px;
+      border-radius: 999px;
+      font-size: 0.75rem;
+      font-weight: 600;
+      white-space: nowrap;
+    }
+
+    .status-pill.pending  { background: rgba(107,114,128,0.2); color: var(--muted); }
+    .status-pill.running  { background: rgba(79,142,247,0.15); color: var(--accent); }
+    .status-pill.complete { background: rgba(34,197,94,0.15);  color: var(--success); }
+    .status-pill.error    { background: rgba(239,68,68,0.15);  color: var(--error); }
+
+    .spinner {
+      width: 12px; height: 12px;
+      border: 2px solid currentColor;
+      border-top-color: transparent;
+      border-radius: 50%;
+      animation: spin 0.7s linear infinite;
+      flex-shrink: 0;
+    }
+
+    @keyframes spin { to { transform: rotate(360deg); } }
+
+    .dismiss-btn {
+      background: none;
+      border: none;
+      color: var(--muted);
+      cursor: pointer;
+      font-size: 1rem;
+      line-height: 1;
+      padding: 2px 4px;
+      border-radius: 4px;
+    }
+
+    .dismiss-btn:hover { color: var(--text); background: var(--border); }
+
+    /* ── Main grid ───────────────────────────────────────────── */
+    main {
+      padding: 28px 24px;
+    }
+
+    .section-heading {
+      font-size: 0.7rem;
+      font-weight: 700;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--muted);
+      margin-bottom: 20px;
+    }
+
+    #comics-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, 150px);
+      gap: 20px;
+    }
+
+    /* ── Comic card ──────────────────────────────────────────── */
+    .comic-card {
+      width: 150px;
+      height: 300px;
+      border-radius: 6px;
+      overflow: hidden;
+      background: var(--card);
+      border: 1px solid var(--border);
+      display: flex;
+      flex-direction: column;
+      cursor: pointer;
+      text-decoration: none;
+      color: inherit;
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
+      position: relative;
+    }
+
+    .comic-card:hover {
+      transform: translateY(-3px) scale(1.02);
+      box-shadow: 0 8px 32px rgba(79, 142, 247, 0.25);
+      border-color: rgba(79, 142, 247, 0.45);
+    }
+
+    .comic-cover {
+      width: 150px;
+      height: 230px;
+      object-fit: cover;
+      object-position: top center;
+      display: block;
+      flex-shrink: 0;
+    }
+
+    .comic-cover-placeholder {
+      width: 150px;
+      height: 230px;
+      flex-shrink: 0;
+      background: linear-gradient(135deg, #1e2240 0%, #0d1025 100%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .comic-cover-placeholder svg {
+      opacity: 0.25;
+    }
+
+    .comic-info {
+      flex: 1;
+      padding: 8px 10px;
+      display: flex;
+      align-items: center;
+      background: var(--card);
+      border-top: 1px solid var(--border);
+    }
+
+    .comic-title {
+      font-size: 0.72rem;
+      font-weight: 500;
+      line-height: 1.35;
+      color: var(--text);
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+    }
+
+    /* Download badge on hover */
+    .comic-card::after {
+      content: "↓ Download";
+      position: absolute;
+      bottom: 70px;
+      left: 0; right: 0;
+      background: rgba(79, 142, 247, 0.85);
+      color: #fff;
+      font-size: 0.75rem;
+      font-weight: 700;
+      text-align: center;
+      padding: 6px 0;
+      opacity: 0;
+      transition: opacity 0.18s;
+      pointer-events: none;
+    }
+
+    .comic-card:hover::after { opacity: 1; }
+
+    /* ── Empty state ─────────────────────────────────────────── */
+    #empty-state {
+      display: none;
+      flex-direction: column;
+      align-items: center;
+      gap: 12px;
+      margin-top: 80px;
+      color: var(--muted);
+      text-align: center;
+    }
+
+    #empty-state svg { opacity: 0.3; }
+    #empty-state p { font-size: 0.9rem; }
+
+    /* ── Toast ───────────────────────────────────────────────── */
+    #toast {
+      position: fixed;
+      bottom: 24px;
+      right: 24px;
+      z-index: 999;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      pointer-events: none;
+    }
+
+    .toast-msg {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      color: var(--text);
+      padding: 10px 16px;
+      border-radius: 6px;
+      font-size: 0.82rem;
+      box-shadow: 0 4px 24px rgba(0,0,0,0.5);
+      animation: slideIn 0.2s ease;
+      opacity: 1;
+      transition: opacity 0.3s;
+    }
+
+    .toast-msg.fade { opacity: 0; }
+
+    @keyframes slideIn {
+      from { transform: translateX(40px); opacity: 0; }
+      to   { transform: translateX(0);   opacity: 1; }
+    }
+
+    /* ── Library toolbar ─────────────────────────────────────────────────── */
+    .library-toolbar {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 20px;
+      flex-wrap: wrap;
+    }
+
+    .library-toolbar .section-heading {
+      margin-bottom: 0;
+      flex-shrink: 0;
+    }
+
+    .filter-input {
+      height: 32px;
+      padding: 0 12px;
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      color: var(--text);
+      font-size: 0.8rem;
+      outline: none;
+      width: 200px;
+      transition: border-color 0.15s;
+    }
+
+    .filter-input::placeholder { color: var(--muted); }
+    .filter-input:focus { border-color: var(--accent); }
+
+    .sort-group {
+      display: flex;
+      gap: 4px;
+      margin-left: auto;
+    }
+
+    .sort-btn {
+      height: 32px;
+      padding: 0 12px;
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      color: var(--muted);
+      font-size: 0.75rem;
+      font-weight: 600;
+      cursor: pointer;
+      transition: color 0.15s, border-color 0.15s, background 0.15s;
+      white-space: nowrap;
+    }
+
+    .sort-btn:hover { color: var(--text); border-color: var(--accent); }
+    .sort-btn.active { color: var(--accent); border-color: var(--accent); background: rgba(79,142,247,0.08); }
+  </style>
+</head>
+<body>
+
+  <header>
+    <div class="logo">YOINK<span>.</span></div>
+    <form class="url-form" id="url-form">
+      <input
+        class="url-input"
+        id="url-input"
+        type="url"
+        placeholder="Paste a comic URL to download..."
+        required
+        autocomplete="off"
+        spellcheck="false"
+      />
+      <button class="url-btn" id="url-btn" type="submit">Download</button>
+    </form>
+  </header>
+
+  <div id="queue"></div>
+
+  <main>
+    <div class="library-toolbar">
+      <div class="section-heading">Library</div>
+      <input class="filter-input" id="filter-input" type="search" placeholder="Filter by title…" />
+      <div class="sort-group">
+        <button class="sort-btn active" data-sort="newest">Newest</button>
+        <button class="sort-btn" data-sort="oldest">Oldest</button>
+        <button class="sort-btn" data-sort="az">A–Z</button>
+        <button class="sort-btn" data-sort="za">Z–A</button>
+      </div>
+    </div>
+    <div id="comics-grid"></div>
+    <div id="empty-state">
+      <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2">
+        <rect x="3" y="3" width="18" height="18" rx="2"/>
+        <path d="M3 9h18M9 21V9"/>
+      </svg>
+      <p>No comics yet — paste a URL above to get started.</p>
+    </div>
+  </div>
+
+  <div id="toast"></div>
+
+  <script>
+    // ── State ──────────────────────────────────────────────────────────────
+    let knownJobs     = {};
+    let dismissedJobs = JSON.parse(localStorage.getItem('dismissedJobs') || '{}');
+    let allComics     = [];   // raw list from server (newest-first)
+    let currentSort   = localStorage.getItem('comicSort') || 'newest';
+
+    // ── DOM refs ───────────────────────────────────────────────────────────
+    const form        = document.getElementById('url-form');
+    const input       = document.getElementById('url-input');
+    const btn         = document.getElementById('url-btn');
+    const queue       = document.getElementById('queue');
+    const grid        = document.getElementById('comics-grid');
+    const emptyEl     = document.getElementById('empty-state');
+    const toastEl     = document.getElementById('toast');
+    const filterInput = document.getElementById('filter-input');
+    const sortBtns    = document.querySelectorAll('.sort-btn');
+
+    // ── Submit handler ─────────────────────────────────────────────────────
+    form.addEventListener('submit', async (e) => {
+      e.preventDefault();
+      const url = input.value.trim();
+      if (!url) return;
+
+      btn.disabled = true;
+      btn.textContent = 'Queuing…';
+
+      try {
+        const res = await fetch('/api/download', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ url }),
+        });
+
+        if (!res.ok) throw new Error(await res.text());
+
+        const job = await res.json();
+        knownJobs[job.id] = job;
+        input.value = '';
+        toast('Download queued');
+        renderQueue();
+      } catch (err) {
+        toast('Error: ' + err.message, true);
+      } finally {
+        btn.disabled = false;
+        btn.textContent = 'Download';
+      }
+    });
+
+    // ── Render queue ───────────────────────────────────────────────────────
+    function renderQueue() {
+      const active = Object.values(knownJobs).filter(j => !dismissedJobs[j.id]);
+      queue.innerHTML = '';
+
+      if (active.length === 0) {
+        queue.classList.remove('visible');
+        return;
+      }
+
+      queue.classList.add('visible');
+
+      active.sort((a, b) => new Date(a.created_at) - new Date(b.created_at));
+
+      active.forEach(job => {
+        const row = document.createElement('div');
+        row.className = 'queue-item';
+
+        const statusPill = makeStatusPill(job);
+
+        const meta = document.createElement('div');
+        meta.style.flex = '1';
+        meta.style.minWidth = '0';
+
+        const title = document.createElement('div');
+        title.className = 'queue-title';
+        title.textContent = job.title || 'Fetching…';
+
+        const urlEl = document.createElement('div');
+        urlEl.className = 'queue-url';
+        urlEl.textContent = job.url;
+
+        meta.append(title, urlEl);
+
+        const dismiss = document.createElement('button');
+        dismiss.className = 'dismiss-btn';
+        dismiss.title = 'Dismiss';
+        dismiss.textContent = '×';
+        dismiss.addEventListener('click', () => {
+          dismissedJobs[job.id] = true;
+          localStorage.setItem('dismissedJobs', JSON.stringify(dismissedJobs));
+          renderQueue();
+        });
+
+        row.append(statusPill, meta, dismiss);
+        queue.append(row);
+      });
+    }
+
+    function makeStatusPill(job) {
+      const pill = document.createElement('span');
+      pill.className = 'status-pill ' + job.status;
+
+      if (job.status === 'pending' || job.status === 'running') {
+        const spin = document.createElement('span');
+        spin.className = 'spinner';
+        pill.append(spin);
+      }
+
+      const label = {
+        pending:  'Pending',
+        running:  'Downloading',
+        complete: '✓ Done',
+        error:    '✕ Error',
+      }[job.status] || job.status;
+
+      pill.append(document.createTextNode(label));
+
+      if (job.error) {
+        pill.title = job.error;
+      }
+
+      return pill;
+    }
+
+    // ── Render comics grid ─────────────────────────────────────────────────
+    function applyFilterAndSort() {
+      const query = filterInput.value.trim().toLowerCase();
+
+      let comics = query
+        ? allComics.filter(c => c.title.toLowerCase().includes(query))
+        : allComics.slice();
+
+      // Server already sends newest-first; re-sort only when needed
+      if (currentSort === 'oldest') {
+        comics = comics.slice().reverse();
+      } else if (currentSort === 'az') {
+        comics = comics.slice().sort((a, b) => a.title.localeCompare(b.title));
+      } else if (currentSort === 'za') {
+        comics = comics.slice().sort((a, b) => b.title.localeCompare(a.title));
+      }
+
+      renderComics(comics);
+    }
+
+    function renderComics(comics) {
+      grid.innerHTML = '';
+
+      if (!comics || comics.length === 0) {
+        emptyEl.style.display = 'flex';
+        return;
+      }
+
+      emptyEl.style.display = 'none';
+
+      comics.forEach(comic => {
+        const a = document.createElement('a');
+        a.className = 'comic-card';
+        a.href = comic.file_url;
+
+        if (comic.cover_url) {
+          const img = document.createElement('img');
+          img.className = 'comic-cover';
+          img.src = comic.cover_url;
+          img.alt = comic.title;
+          img.loading = 'lazy';
+          img.onerror = () => img.replaceWith(makePlaceholder());
+          a.append(img);
+        } else {
+          a.append(makePlaceholder());
+        }
+
+        const info = document.createElement('div');
+        info.className = 'comic-info';
+
+        const title = document.createElement('div');
+        title.className = 'comic-title';
+        title.textContent = comic.title;
+
+        info.append(title);
+        a.append(info);
+        grid.append(a);
+      });
+    }
+
+    function makePlaceholder() {
+      const div = document.createElement('div');
+      div.className = 'comic-cover-placeholder';
+      div.innerHTML = `
+        <svg width="40" height="40" viewBox="0 0 24 24" fill="none"
+             stroke="currentColor" stroke-width="1.2">
+          <rect x="3" y="3" width="18" height="18" rx="2"/>
+          <path d="M3 9h18M9 21V9"/>
+        </svg>`;
+      return div;
+    }
+
+    // ── Toast ──────────────────────────────────────────────────────────────
+    function toast(msg, isError = false) {
+      const el = document.createElement('div');
+      el.className = 'toast-msg';
+      el.textContent = msg;
+      if (isError) el.style.borderColor = 'var(--error)';
+      toastEl.append(el);
+
+      setTimeout(() => {
+        el.classList.add('fade');
+        setTimeout(() => el.remove(), 350);
+      }, 3500);
+    }
+
+    // ── Polling ────────────────────────────────────────────────────────────
+    async function pollJobs() {
+      try {
+        const res = await fetch('/api/jobs');
+        const jobs = await res.json();
+
+        let needComicRefresh = false;
+
+        jobs.forEach(job => {
+          const prev = knownJobs[job.id];
+          if (prev && prev.status !== 'complete' && job.status === 'complete') {
+            needComicRefresh = true;
+            toast(`"${job.title}" downloaded successfully`);
+          }
+          if (prev && prev.status !== 'error' && job.status === 'error') {
+            toast(`Error downloading "${job.title || job.url}": ${job.error}`, true);
+          }
+          knownJobs[job.id] = job;
+        });
+
+        renderQueue();
+
+        if (needComicRefresh) {
+          await fetchComics();
+        }
+      } catch (_) { /* network hiccup — ignore */ }
+    }
+
+    async function fetchComics() {
+      try {
+        const res = await fetch('/api/comics');
+        allComics = await res.json();
+        applyFilterAndSort();
+      } catch (_) {}
+    }
+
+    // ── Init ───────────────────────────────────────────────────────────────
+
+    // Restore saved sort
+    sortBtns.forEach(btn => {
+      if (btn.dataset.sort === currentSort) btn.classList.add('active');
+      else btn.classList.remove('active');
+
+      btn.addEventListener('click', () => {
+        currentSort = btn.dataset.sort;
+        localStorage.setItem('comicSort', currentSort);
+        sortBtns.forEach(b => b.classList.toggle('active', b === btn));
+        applyFilterAndSort();
+      });
+    });
+
+    filterInput.addEventListener('input', applyFilterAndSort);
+
+    fetchComics();
+    setInterval(pollJobs, 2000);
+    setInterval(fetchComics, 10000);
+  </script>
+</body>
+</html>