Merge pull request 'Release v0.4.0: dev -> main' (#251) from dev into main

- history/mine table column 'Language' -> 'Type' (data-sort key 'type')
- /api/public and /api/mine rows gain a 'type' field: file extension for
  attachment pastes, stored language otherwise (default 'text')
- paste page stats label 'Language' -> 'Type'; summary line uses the same
  label; get-paste JSON gains 'type'
- store list queries LEFT JOIN attachments to expose the filename
- table.js sorting accepts the 'type' key

.gitea/workflows/ci.yml

@@ -2,7 +2,7 @@ name: CI
 
 on:
   push:
-    branches: [main]
+    branches: [main, dev]
     tags: ['v*']
   pull_request:
 
@@ -23,8 +23,8 @@ jobs:
         run: go test -v ./...
 
   docker:
-    # build & push image only on tags (releases)
-    if: startsWith(github.ref, 'refs/tags/')
+    # build & push image only on tags (releases) and dev branch (dev deploy)
+    if: startsWith(github.ref, 'refs/tags/') || github.ref == 'refs/heads/dev'
     needs: test
     runs-on: [debian-latest]
     env:
@@ -55,8 +55,9 @@ jobs:
         with:
           context: .
           push: true
+          build-args: VERSION=${{ gitea.ref_name }}
           tags: |
             git.archfox.org/poslop/palette:${{ gitea.ref_name }}
-            git.archfox.org/poslop/palette:latest
+            ${{ startsWith(gitea.ref, 'refs/tags/') && 'git.archfox.org/poslop/palette:latest' || '' }}
           cache-from: type=gha
           cache-to: type=gha,mode=max

.gitignore

@@ -4,3 +4,4 @@ palette.db-shm
 palette.db-wal
 admin-key
 settings.json
+:memory:.files/

Dockerfile

@@ -9,7 +9,8 @@ COPY go.mod go.sum ./
 RUN go mod download
 
 COPY . .
-RUN CGO_ENABLED=0 GOOS=linux go build -ldflags="-s -w" -o /palette ./cmd/palette
+ARG VERSION=dev
+RUN CGO_ENABLED=0 GOOS=linux go build -ldflags="-s -w -X palette/internal/web.Version=${VERSION}" -o /palette ./cmd/palette
 
 # ---- runtime stage ----
 FROM alpine:3.20

README.md

@@ -1,33 +1,39 @@
 # Palette
 
 Palette is a fast, self-hosted pastebin. One Go binary, a SQLite database, and
-a web UI for sharing code and text with links that expire on your terms.
+a web UI for sharing text and small files.
+
+> [!NOTE]
+> <table><tr><td>
+> <sub>✨ This project was built by AI — <strong>GLM 5.3 Flash</strong> on the <strong>Hermes Agent</strong> harness, with a human in the loop.</sub>
+> </td></tr></table>
 
 ## Features
 
-- Paste cans — bundle notes, text, and files into one shareable page, with password/expiry/custom-slug parity and a `can` badge in listings
-- Password lock — protect individual pastes with a password
-- Custom expiry — from 1 minute up to 1 year, or never
-- Burn after N reads — a paste that vanishes after a chosen number of reads
-- Custom URLs — reserve `/my-snippet` instead of a random slug
+- Text pastes and cans (multiple items in one share)
+- File attachments (one file per paste, up to 25 MB)
+- Password protected pastes
+- Expire after a specified time
+- Burn after a number of views
+- Custom URLs
 - Syntax highlighting with language auto-detection (go-enry)
-- Rate limiting on create and unlock
-- Saved page — see and manage everything created from your browser
-- API-first — every UI action is also a plain HTTP call
-- Single binary — templates and assets are embedded; no external deps
+- Public paste listing with search, sort and pagination
+- Cookie based saved pastes and settings
+- Five base themes (midnight, smooth, pastel-lavender, pastel-peach, pastel-cloud), each with a dark and light variant
+- Dark mode toggle in the topbar and settings, with a configurable default
+
+## Screenshots
+
+| | |
+|---|---|
+| ![Editor in midnight (dark)](https://git.archfox.org/poslop/palette/wiki/raw/palette-previews%2Fdesktop-editor-new.png) | ![Paste view in pastel-peach (light)](https://git.archfox.org/poslop/palette/wiki/raw/palette-previews%2Fdesktop-paste-pastel-peach-light.png) |
+| ![Paste view in midnight (dark)](https://git.archfox.org/poslop/palette/wiki/raw/palette-previews%2Fdesktop-paste-midnight-dark.png) | ![Settings and theme picker](https://git.archfox.org/poslop/palette/wiki/raw/palette-previews%2Fdesktop-settings-themes.png) |
+| ![Public pastes list](https://git.archfox.org/poslop/palette/wiki/raw/palette-previews%2Fdesktop-public.png) | ![Editor at mobile width](https://git.archfox.org/poslop/palette/wiki/raw/palette-previews%2Fmobile-editor-new.png) |
+
+Mobile previews (375x812): [paste view](https://git.archfox.org/poslop/palette/wiki/raw/palette-previews%2Fmobile-paste-midnight-dark.png), [public list](https://git.archfox.org/poslop/palette/wiki/raw/palette-previews%2Fmobile-public.png), [settings](https://git.archfox.org/poslop/palette/wiki/raw/palette-previews%2Fmobile-settings.png).
 
 ## Get Started
 
-### Build from source
-
-Requires Go 1.21+.
-
-```bash
-go build -o palette .
-./palette
-# open http://localhost:8080
-```
-
 ### Docker
 
 ```bash
@@ -36,12 +42,22 @@ docker run -p 8080:8080 -v palette-data:/data git.archfox.org/poslop/palette
 
 The SQLite database lives in the `/data` volume inside the container.
 
-## Screenshots
+## Docker Compose
+
+See [docker-compose.yml](docker-compose.yml) for a ready-to-use example with
+every environment variable documented, including which are required (only the
+/data volume) and which are optional.
+
+### Build from source
+
+Requires Go 1.27+.
+
+```bash
+go build -o palette ./cmd/palette
+./palette
+# open http://localhost:8080
+```
 
-| | |
-|---|---|
-| ![Editor](docs/palette-previews/pastel-lavender-new.png) | ![Paste view](docs/palette-previews/pastel-lavender-paste.png) |
-| ![History](docs/palette-previews/midnight-history.png) | |
 
 ## Configuration
 
@@ -52,54 +68,25 @@ The SQLite database lives in the `/data` volume inside the container.
 | `PALETTE_MAX_TEXT` | `5242880` | Max paste size in bytes (5 MB) |
 | `PALETTE_MAX_ITEM` | `26214400` | Max can item size in bytes (25 MB) |
 | `PALETTE_ADMIN_KEY` | generated | Admin key; if unset a 32-char hex key is generated and persisted to `<db-dir>/admin-key` (0600) |
+| `PALETTE_DEFAULT_DARK` | dark on | Default dark mode for new visitors. Set `false`, `0`, or `off` to default to light mode. Visitors who toggle dark mode keep their choice in their browser. |
+| `PALETTE_UNLOCK_SECRET` | random per start | HMAC secret for password-unlock cookies. Set a fixed value to keep unlock sessions across restarts or across replicas. |
 
-### Admin
-
-`GET /admin` serves the admin page. Enter the admin key there — it is stored in
-`sessionStorage` (never a cookie) and sent as the `X-Admin-Key` header on
-`GET`/`POST /admin/api/settings`.
-
-The admin API reads/sets: rate-limit burst, rate-limit refill per minute, max
-content bytes, default expiry, custom URL reservation days, and the burn
-viewer window (minutes). All admin access attempts are logged.
-
-```bash
-./palette --reset-admin-key   # regenerate the admin key and print it
-```
+An `/admin` page exists for runtime settings, protected by a key set at
+install (`PALETTE_ADMIN_KEY` env var) and resettable locally. See
+[API](https://git.archfox.org/poslop/palette/wiki/API) and the [design docs](https://git.archfox.org/poslop/palette/wiki/Home) in the wiki for details.
 
 ## API
 
-Create a paste with one call:
+Full REST API: [wiki/API](https://git.archfox.org/poslop/palette/wiki/API). One example:
 
 ```bash
-curl -X POST http://localhost:8080/api/pastes \
-  -H "Content-Type: application/json" \
-  -d '{"content": "print(hello)", "language": "python", "expires_in": "168h"}'
+curl -X POST http://localhost:8080/api/pastes -d '{"content":"hello"}'
 ```
 
-Full API docs: [docs/API.md](docs/API.md). Design docs: [docs/design/](docs/design/) (currently: [client-side E2E encryption](docs/design/e2e-encryption.md), issue #39).
+Design docs: [wiki/design](https://git.archfox.org/poslop/palette/wiki/design-attachments-storage) (e2e encryption, attachments & storage, cookie preferences).
 
-## Performance Notes
 
-The history and Saved pages use client-side filtering: when you type in the
-search box, the UI fetches the most recent 100 pastes (`limit=100`, the API
-maximum) once per query and filters/sorts them in the browser. Pastes beyond
-the newest 100 are not searched; a match count against the full total is still
-shown. This keeps search instant without a server-side query. If large
-instances need full search later, it will be a server-side endpoint (see
-issue #32).
 
-## CI
-
-Gitea Actions workflow at `.gitea/workflows/ci.yml`:
-- On push to main: `go vet` + `go test`
-- On tags: build and push Docker image to `git.archfox.org/poslop/palette`
-
-## Docker Compose
-
-See [docker-compose.yml](docker-compose.yml) for a ready-to-use example with
-every environment variable documented, including which are required (only the
-/data volume) and which are optional.
 
 ## License
 

cmd/palette/main.go

@@ -42,6 +42,7 @@ func main() {
 	if err != nil {
 		log.Fatal(err)
 	}
+	web.SetDefaultDark(os.Getenv("PALETTE_DEFAULT_DARK"))
 	srv := api.NewServer(st, cfg, ui, ss, adminKey)
 	log.Printf("palette listening on %s", cfg.Addr)
 	log.Fatal(http.ListenAndServe(cfg.Addr, srv.Routes()))

docs/API.md

@@ -1,124 +0,0 @@
-# Palette API
-
-All endpoints are JSON unless noted. The web UI is served from the same port.
-
-## Create paste
-
-```bash
-curl -X POST http://localhost:8080/api/pastes \
-  -H "Content-Type: application/json" \
-  -d '{
-    "content": "print(hello)",
-    "title": "my snippet",
-    "language": "python",
-    "expires_in": "168h",
-    "password": "optional",
-    "custom_slug": "optional",
-    "burn_after_read": false,
-    "burn_after_reads": 1,
-    "visibility": "public"
-  }'
-```
-
-- `expires_in` is a Go duration string (`90m`, `6h`, `336h`). Omit for no expiry.
-- `visibility` is `public` or `unlisted`.
-- Alternatively (or additionally), `public` may be sent as a boolean (#83):
-  `false` maps to `unlisted` and `true` maps to `public`. When both fields are
-  present, the boolean `public` takes precedence over the string `visibility`.
-  Omitting both defaults to `public`.
-- `burn_after_reads` sets how many reads the paste survives (default 1 when
-  `burn_after_read` is true). A read is counted per unique viewer session;
-  the same viewer returning within 15 minutes does not count again.
-- Response includes `id`, `url`, `raw_url`, `api_url`, `expires_at`,
-  `created_at`, and a one-time `deletion_token`.
-
-Errors: `400` invalid body/content too large/duplicate slug, `401` password
-required, `404` paste expired/burned/gone, `413` content exceeds max bytes,
-`429` rate limited.
-
-## Get paste
-
-```bash
-curl http://localhost:8080/api/pastes/{id}
-# password-protected pastes:
-curl "http://localhost:8080/api/pastes/{id}?password=secret"
-# or via header: X-Paste-Password: secret
-```
-
-The response includes `reads_remaining` (`null` when no read budget is set).
-
-## Raw content
-
-```bash
-curl http://localhost:8080/raw/{id}
-```
-
-Raw reads count against a burn-after-read budget, same as page views.
-
-## Delete
-
-```bash
-# soft delete (requires the deletion token from the create response)
-curl -X DELETE -H "Authorization: Bearer TOKEN" http://localhost:8080/api/pastes/{id}
-# ...or via query param; the creator browser (viewer cookie) may also delete without a token
-curl -X DELETE "http://localhost:8080/api/pastes/{id}?token=TOKEN"
-
-# hard delete immediately (requires the one-time deletion token)
-curl -X DELETE "http://localhost:8080/api/pastes/{id}/redeem?token=TOKEN"
-```
-
-## Lists
-
-```bash
-curl "http://localhost:8080/api/public?limit=25&offset=0"   # public history
-curl http://localhost:8080/api/mine                          # this browser's pastes (viewer cookie)
-```
-
-## Language detection
-
-```bash
-curl -X POST http://localhost:8080/api/guess-language \
-  -H "Content-Type: application/json" \
-  -d '{"content": "package main"}'
-```
-
-## Cans (bundles of items)
-
-A can bundles multiple text items (and files) into one shareable page at
-`/can/{id}`. Password, expiry, visibility, custom slug, and viewer-scoped
-deletion work exactly like pastes; cans appear as normal rows (with a `can`
-badge) in `/api/public` and `/api/mine`.
-
-```bash
-curl -X POST http://localhost:8080/api/pastes/can \
-  -F "title=My bundle" \
-  -F "expires_in=48h" \
-  -F "custom_slug=my-bundle" \
-  -F 'json_items=[{"title":"notes.txt","content":"some notes"}]' \
-  -F "files=@screenshot.png" \
-  -F "files=@log.txt"
-
-curl http://localhost:8080/api/cans/{id}
-curl http://localhost:8080/api/cans/{id}/items/{item_id}
-curl -X DELETE http://localhost:8080/api/cans/{id}   # creator browser only (vwr cookie)
-```
-
-Password-protected cans use the same unlock flow as pastes: `POST /can/{id}`
-with the password sets an HMAC-bound cookie; item fetches accept the cookie as
-well as the `X-Paste-Password` header / `?password=` query param.
-
-## Web pages
-
-- `/new` — create a paste
-- `/history` — public paste history
-- `/mine` — pastes created from this browser
-- `/{id}` — view a paste
-- `/unlock/{id}` — password gate for protected pastes
-- `/raw/{id}` — raw content with original content type
-
-## Expiry and deletion
-
-- Expired pastes are soft-deleted by a background sweeper (runs every minute).
-- Soft-deleted pastes are hard-deleted after a 7-day grace period.
-- Deletion tokens allow immediate hard delete.
-- Burn-after-read pastes are soft-deleted once the read budget is exhausted.

docs/design/attachments-storage.md

@@ -1,78 +0,0 @@
-# Attachments & Storage Backend Design (#38, #31)
-
-Status: research/design, no implementation. Consumers: paste cans (#4).
-
-## Part A — Attachments: S3/MinIO vs filesystem-on-volume (#38)
-
-### Options
-
-**Option 1: Filesystem on the k3s PVC (current 5Gi volume).**
-Store blobs under `<data-dir>/attachments/<paste-id>/<n>-<sha256-8>`, metadata in SQLite (paste_id, filename, size, sha256, mime, created_at).
-
-- Pros: zero new infra, zero new credentials, trivial backup (the volume backup job already covers the DB), atomic rename on write, works in dev and prod identically.
-- Cons: volume is size-capped (5Gi today; resizable but bounded); serving large files passes through the app process (no ranged-GET offload); multi-replica later would need RWX volume.
-
-**Option 2: MinIO via S3 API.**
-MinIO is already proven in this homelab (Outline). Store at key `<paste-id>/<n>`; same SQLite metadata row.
-
-- Pros: effectively unbounded capacity, presigned URLs (direct browser download, offloads serving from palette pods), ranged requests free, lifecycle rules could auto-expire orphaned objects.
-- Cons: another credential/secret to manage, another failure mode, MultipartForm still terminates at the palette pod (MinIO only helps *serving*, not *uploading*, unless we do presigned uploads — which breaks the cans multipart flow and the auth/unlock checks), backup now spans two systems.
-
-### Key considerations
-
-- **Upload path is the same either way.** Palette receives `multipart/form-data` (cans need text items + file drops in one request), must enforce auth/password/burn rules server-side. A filesystem backend adds no upload complexity; S3 adds an extra hop (buffer → PUT to MinIO). Streaming straight from `multipart.Reader` to the sink works for both (`io.Copy` to a temp file, or to an S3 PUT with `Content-Length` known or multipart buffering).
-- **Size limits.** Everything is admin-tunable via the settings API (#40 pattern) — add `max_attachment_bytes` (default 10 MiB, hard server-side cap checked *before* reading the body via `Content-Length`, plus a counted reader during copy so chunked uploads can't lie). SQLite itself is not a constraint either way; the PVC is the real cap for Option 1.
-- **MIME handling.** Security-critical (pentest #34 already fixed a content-type XSS on `/raw`). Rules:
-  - Never trust the client-declared Content-Type. Sniff the first 512 bytes (`http.DetectContentType`), intersect with an allowlist.
-  - Serve from a dedicated route (`/{id}/a/{n}`) with `Content-Type` from the stored *sniffed* type, `X-Content-Type-Options: nosniff`, `Content-Security-Policy: sandbox`, `Content-Disposition: attachment` unless the type is on a safe-inline allowlist (text/plain, images, PDF at user opt-in).
-  - Never render user HTML/SVG inline (`image/svg+xml` is XSS-capable — serve as `attachment` always, or store sanitized).
-- **Streaming & serving.**
-  - Filesystem: `http.ServeContent` on the opened file gives ranged GETs, ETag, Last-Modified for free.
-  - MinIO: proxy via `GetObject` + `io.Copy` (simple, keeps auth checks in palette) or presigned GET (faster, but URL embeds credentials-temporarily and bypasses palette's per-request auth — wrong for pastes with passwords/burn semantics). Given cans inherit password/burn parity (#4), **proxying is required, which erodes MinIO's main serving advantage**.
-- **Lifecycle parity.** Attachments must honor soft-delete grace and sweep: sweeper hard-delete also removes blobs (files: `os.Remove`; S3: `DeleteObject`), best-effort with logging; orphan sweep job compares DB rows to store contents.
-
-### Recommendation
-
-**Filesystem-on-volume first.** At current scale (single replica, PVC-based deploy, one user + homelab traffic) it is simpler end-to-end and keeps serving/auth/lifecycle in one place. The internal API should be a narrow blob interface (`Put(ctx, key, r io.Reader, size int64) / Open(key) / Delete(key)`) — about 60 lines per backend — so **MinIO becomes a drop-in later** if attachments outgrow the volume. That's the honest middle path: filesystem default, S3-ready seam, no MinIO dependency until it pays for itself.
-
-## Part B — SQLite vs Postgres vs Redis (#31)
-
-### Assessment of SQLite at pastebin scale
-
-- **Driver**: modernc.org/sqlite (pure Go, no cgo) — slightly slower than mattn/go-sqlite3 but fine; single-writer semantics are the real constraint, not driver speed.
-- **Access pattern**: paste-heavy, write-rare/read-often; primary keys and small set of indexes (visibility+created, expires, deleted); no joins beyond can items. This is SQLite's best case.
-- **WAL mode** is already on (`journal_mode(WAL), busy_timeout(5000)`) — concurrent readers don't block the single writer.
-- **Numbers**: SQLite comfortably handles millions of rows and hundreds of reads/sec; WAL write throughput is thousands of small inserts/sec. A pastebin doing even 100k pastes (avg 10 KB = ~1 GB DB) is trivial. Reads: prepared `WHERE id=?` lookups at this size are sub-millisecond.
-- **Weak points to watch** (document, none urgent):
-  1. Single writer — heavy concurrent create traffic serializes. Mitigation: already rate-limited (#2); fine until that's the bottleneck (unlikely).
-  2. `LENGTH(content)` on every list row — fine now; if it shows up in profiling, store `size` as a column (schema already has a `Size` field; list queries could use it).
-  3. Sweeper runs a table-wide `UPDATE`+`DELETE` on tick — indexed, fine.
-  4. No network access to the DB file — locks palette to single-replica. Acceptable: current deploy is one replica.
-- **Redis is the wrong tool** here: it's a cache/queue, not a system of record. Pastes are durable data with expiry semantics already implemented in SQLite. Redis would only add an optional read-cache layer for hot pastes — pure complexity for zero measured need.
-
-### Should we build a backend abstraction (SQLite default, optional Postgres)?
-
-Arguments for: multi-replica scaling later; "docker image env choice" sounds nice; Postgres gives real concurrency and network access.
-Arguments against: a `Store` interface covering the current query surface is a real refactor (sqlite-flavored SQL: `INSERT OR IGNORE`-style upserts, partial indexes, `?` placeholders are compatible but behaviors differ — e.g. `sqlite` driver pragmas, transaction isolation, `AUTOINCREMENT` semantics); two backends means two test matrices and two migration paths forever; and there is **no current need** — single replica, single writer, modest data.
-
-**Recommendation: stay SQLite-only. Do not build the abstraction now.**
-Specifically:
-
-1. Keep all persistence behind `internal/store` (already done in #35 — the package boundary *is* the abstraction, at zero cost).
-2. Avoid SQLite-specific SQL going forward where free (standard placeholders, no `RETURNING` quirks) — cheap discipline that keeps a future port honest.
-3. Define the trigger conditions for revisiting, and write them down:
-   - multiple replicas needed (scale-out), or
-   - sustained WAL write contention (busy timeouts observed in logs), or
-   - DB file > ~5-10 GB, or
-   - a concrete user request for a Postgres-backed image.
-4. When a trigger fires, port `internal/store` to Postgres behind an interface extracted *then* — the refactor is mechanical against a real need, instead of speculative complexity now.
-5. For the docker image: `PALETTE_DB_PATH` env already implies the deployment choice; no extra backend knob needed.
-
-## Summary
-
-| Decision | Choice |
-|---|---|
-| Attachment backend | Filesystem on PVC, behind a ~3-method blob interface; MinIO as a later drop-in, not a dependency |
-| Size limits | `max_attachment_bytes` admin setting, default 10 MiB, enforced pre-read + during stream |
-| MIME | Server-side sniff (512 bytes) + allowlist; `nosniff`, CSP `sandbox`, `Content-Disposition: attachment` except safe-inline types; SVG never inline |
-| Database | SQLite (WAL, modernc) only; no Postgres/Redis, no backend abstraction until a written trigger fires |

docs/design/cookie-preferences.md

@@ -1,160 +0,0 @@
-# Design: Cookie-Based Preferences and Access Keys (#30)
-
-Status: design note — no implementation yet.
-Related: #37 (vwr viewer cookie), #34 (HMAC unlock cookie), #26 (creator auto-unlock), #36 (settings gear).
-
-## Current cookie surface
-
-| Cookie | Purpose | Lifetime | Flags today |
-|---|---|---|---|
-| `vwr` | Anonymous viewer id; scopes `/mine` history and burn-after-N per-viewer dedupe; client-sent `vwr` also authorizes delete | 1 year | `HttpOnly`, `SameSite=Lax`, `Path=/` |
-| `pw_<id>` | Per-paste password unlock token = HMAC(paste id, PALETTE_UNLOCK_SECRET) | 1 hour | `HttpOnly`, `SameSite=Lax`, `Path=/` |
-| `tok_<id>` | One-time deletion-token handoff after create | 60 s | `HttpOnly`, `SameSite=Lax`, `Path=/` |
-
-The access-key feature is an extension of the `pw_<id>` pattern, not a new mechanism.
-
-## Part 1: Preference storage
-
-### What settings
-
-Only settings the *creator* sets when writing a paste, so the "new paste" form
-can pre-fill them:
-
-- Default language (`lang`)
-- Default expiry (`expires_in` / custom expiry)
-- Burn-after-N-reads default
-- Password-protect-by-default toggle (checkbox pre-checked; the password itself is never stored)
-- Default visibility of the "raw" link, if such a toggle exists
-- Collapsed/expanded state of the settings gear panel itself
-
-Never stored in cookies: passwords, access keys for pastes the user hasn't
-unlocked, deletion tokens (beyond the existing 60 s `tok_` handoff), anything
-typed into the paste body or title fields (existing rule: auto-detect must not
-overwrite user-typed content).
-
-### One cookie, not many
-
-A single `prefs` cookie holding a compact JSON object:
-
-```
-prefs={"lang":"go","exp":"1h","burn":0,"pw":1}
-```
-
-- One cookie avoids the browser per-domain cookie count (typically 50+ per
-  domain; Chrome 180) eating the budget that per-paste access-key cookies need.
-- Per-paste cookies (`pw_<id>`) are inherently name-per-paste and cannot be
-  consolidated — that's the constraint that makes a single `prefs` cookie
-  mandatory rather than stylistic.
-
-### Size limits
-
-- RFC 6265: user agents SHOULD support at least 4096 bytes per cookie. Keep
-  `prefs` under 256 bytes of JSON — it holds a handful of short enum values.
-- Server behavior: if the cookie is present but oversized/invalid JSON, ignore
-  it silently and serve defaults. Never reject a request over a bad preference
-  cookie.
-- Validate on the server (allowlist of known values); a cookie is untrusted
-  input like any header.
-
-### Flags
-
-`HttpOnly; SameSite=Lax; Path=/; Max-Age=31536000; Secure` (Secure once the
-prod instance serves HTTPS — it will, behind the letsencrypt IngressRoute;
-dev on plain HTTP needs the flag conditional on config).
-
-Preferences are not sensitive, but `HttpOnly` costs nothing and keeps script
-from mutating them; `SameSite=Lax` matches the existing cookies.
-
-## Part 2: Access-key cookies
-
-### Goal
-
-"Remember unlocked pastes on this browser" — after entering a password (or
-after creating a private paste), subsequent visits skip the unlock form. This
-extends `pw_<id>` from a 1-hour session convenience to a durable capability.
-
-### Design: extend `pw_<id>`, don't invent a new scheme
-
-The token is already HMAC(paste id, PALETTE_UNLOCK_SECRET) — unforgeable and
-per-paste (fix for the #34 bypass). Changes:
-
-1. **Opt-in checkbox on the unlock form** ("remember on this browser") and a
-   matching checkbox/note at creation time. Default OFF. Non-consenting
-   visitors keep the current 1-hour cookie.
-2. **Extended lifetime** when opted in: `Max-Age = min(paste expiry, 90 days)`.
-   The cookie must never outlive the paste — derive the cap from the paste's
-   `ExpiresAt` at unlock time. Burn-after-N pastes: cap short (e.g. 24 h),
-   since the paste may burn at any read.
-3. **Name collision**: paste ids are fixed-length server-generated, so
-   `pw_<id>` names stay bounded (~40 bytes each). With the 50-cookies-per-
-   domain budget, cap remembered pastes at ~30: when minting the 31st, drop
-   the oldest expired-paste cookies server-side (server knows which ids are
-   expired/deleted; send expired `Set-Cookie` with `Max-Age=0` to reclaim).
-4. **Delete authorization interplay**: today a client-sent `vwr` matching the
-   paste's ViewerID authorizes delete. Access-key cookies grant *read*
-   capability only. Do not let a `pw_<id>` cookie authorize deletion — that
-   would mean cookie theft escalates from "read a paste" to "destroy it".
-   Delete stays bound to `vwr` or the deletion token.
-
-### Scoping
-
-- Keep `Path=/` (paste URLs are `/{id}` at the root; per-paste `Path=/{id}`
-  would work but saves nothing and complicates cleanup).
-- Per-paste scope via the cookie *name* is the existing, tested pattern —
-  no shared "access key ring" cookie. A consolidated `keys` cookie would
-  mean one stolen cookie exposes every remembered paste at once.
-
-## Part 3: Security considerations (honest accounting)
-
-- **XSS exfiltration**: `HttpOnly` prevents JS from *reading* the cookies, but
-  not from *using* them — an XSS payload can simply `fetch('/<paste-id>')` and
-  exfiltrate the content through the page the cookie unlocks. HttpOnly raises
-  the bar (drive-by script can't dump the jar to an attacker server in one
-  request), it does not make access-key cookies safe. This is a real
-  limitation, not a solved problem. Mitigations in order of value:
-  1. Fix the stored-XSS class at the source — #34 already allowlisted
-     content-types on `/raw`; the standing debt items (CSP, X-Frame-Options,
-     Referrer-Policy) directly reduce cookie-use exfiltration and should land
-     before or with this feature.
-  2. Keep access-key cookies opt-in, so the blast radius is bounded to users
-     who accepted the tradeoff.
-- **Cookie theft = paste access**: anyone holding `pw_<id>` can read that
-  paste until the cookie or paste expires, from any machine. That is inherent
-  to capability cookies. Consequences accepted deliberately: pastes here are
-  ephemeral (1 min–1 yr expiry), passwords are low-stakes share convenience,
-  and there are no user accounts to compromise. Document this in the UI copy
-  ("stores unlock access on this browser").
-- **Shared machines**: a remembered cookie defeats the password for the next
-  user of the browser. The opt-in checkbox with plain-language copy is the
-  mitigation; do not default it on.
-- **Cookie tossing / fixation**: a subdomain attacker could try to force
-  cookies; palette is a single host, no untrusted subdomains. `SameSite=Lax`
-  blocks cross-site attachment of the cookies on form posts to unlock
-  endpoints.
-- **Multi-instance / secret rotation**: tokens are HMACs under
-  `PALETTE_UNLOCK_SECRET`; rotating the secret silently invalidates all
-  remembered cookies (acceptable — next visit re-prompts). Both dev and prod
-  k3s instances need the same secret only if sharing a domain, which they do
-  not.
-- **Preferences cookie**: not security-sensitive, but still validate/allowlist
-  server-side to avoid it becoming an injection sink into templates.
-
-## Recommendation
-
-Implement in two small, separately reviewable pieces:
-
-1. **`prefs` cookie** (do first, low risk): single JSON cookie < 256 bytes,
-   server-validated allowlist, `HttpOnly; SameSite=Lax; Max-Age=1y`, drives
-   only form pre-fill. Ship with #36's settings gear.
-2. **Extended `pw_<id>` opt-in** (second, security-sensitive): opt-in checkbox,
-   Max-Age capped by paste expiry (90-day ceiling, 24 h for burn pastes),
-   oldest-cookie eviction at ~30 pastes, no delete authorization from access
-   cookies, and land the CSP/X-Frame-Options hardening debt from #34 in the
-   same or preceding change. UI copy must disclose that the cookie preserves
-   paste access on the browser.
-
-Rejected alternatives: single consolidated access-key cookie (aggregate theft
-risk, and the per-domain cookie-count argument cuts the other way for keys —
-consolidation maximizes what one stolen cookie unlocks); localStorage for
-preferences (XSS-readable, no benefit over HttpOnly cookies here); server-side
-accounts/session table (out of scope — Palette is deliberately anonymous).

docs/design/e2e-encryption.md

@@ -1,223 +0,0 @@
-# Design: Optional client-side E2E encryption for pastes and files
-
-- **Issue:** #39
-- **Status:** Design (no implementation in this PR)
-- **Related docs:** [docs/API.md](../API.md)
-
-## 1. Goals and non-goals
-
-**Goals**
-
-- Let any paste (or can item) be stored server-side as ciphertext only.
-- Zero plaintext knowledge by the server: storage, logs, backups, DB dumps contain no readable content.
-- Pure browser implementation using WebCrypto; no new server dependencies.
-- Encrypted pastes must still work with expiry, hard/soft delete, deletion tokens, visibility, slugs, rate limits.
-
-**Non-goals (v1)**
-
-- Anonymous, account-less E2E; Palette stays server-trusting with browser cookies.
-- Sharing via link fragments (`#key`) is optional sugar, not a required transport.
-- Search *of encrypted content*, server-side language detection, or server-side highlighting on encrypted pastes — these are structurally impossible and out of scope (see §5).
-- Signing, deniability, forward secrecy across pastes, PFS, post-quantum crypto.
-
-**Threat model (explicit).** This protects against a *passive server compromise* — a DB dump, backup leak, or disk image of the server's SQLite file. It does **not** protect against:
-
-- A fully malicious / compromised Palette server serving backdoored JavaScript: any JS-delivered crypto can be backdoored (key exfiltration via JS) regardless of primitives. This is the fundamental limit of a JS-in-browser E2E scheme.
-- Malware on the viewer's device, or shoulder-surfing of the password.
-- Traffic analysis, timing, or metadata (title, size, expiry, IP, viewer cookie).
-- A attacker who compromises the server *while the creator's browser is open* and alters JS before encrypt.
-
-Be explicit in user-facing copy: "encrypted at rest; the server cannot read your paste" is accurate — "the server can never see your paste" is not.
-
-## 2. Crypto primitives and flow
-
-### 2.1 Recommended parameters
-
-| Parameter | Recommendation | Notes |
-|---|---|---|
-| Cipher | **AES-256-GCM** | `AES-GCM` with a 256-bit key, per-paste random 96-bit IV/nonce. WebCrypto built-in, hardware-accelerated, authenticated. |
-| KDF | **PBKDF2-HMAC-SHA-256** | 600,000 iterations (OWASP 2023+ recommendation), 16-byte random salt. |
-| Argon2id | **Not in v1** | WebCrypto has no Argon2id; a JS/WASM Argon2 implementation is an extra supply-chain dependency and is an asymmetric liability: a script the server could swap can't be load-bearing for security anyway. Add later via `argon2id` WASM with SRI pinning + CSP (`script-src 'self'`) if needed. |
-| Salt | 16 random bytes per paste, stored in the clear alongside ciphertext | Unique per paste, never reused. |
-| IV | 12 random bytes per encryption | With ~2^32 encryptions per key this is negligible; each paste has its own key anyway. |
-| Key check value | See §2.2 | Catches wrong passwords without a server round-trip and prevents trash writes. |
-
-### 2.2 Flow (create)
-
-1. User checks "Encrypt" and enters an encryption passphrase (distinct from any access password) in `/new`.
-2. Browser generates `salt` (16 B) and `iv` (12 B) via `crypto.getRandomValues`.
-3. `crypto.subtle.importKey("raw", passphrase, "PBKDF2", false, ["deriveKey"])` →
-   `crypto.subtle.deriveKey(PBKDF2-SHA-256, 600k iterations, salt, {name:"AES-GCM", length:256}, false, ["encrypt","decrypt"])`.
-4. Generate a 32-byte random **DEK** (`crypto.getRandomValues(32)`).
-5. Content encryption key check: `iv_ckv`, `encrypted_content = AES-GCM-256(DEK, iv, content)`.
-6. **Key check value (KCV):** compute `AES-GCM-DEK(random 16 bytes)` — a small token encrypted *under the DEK*, stored as `key_check` blob. This is decrypted with the derived key; on wrong password GCM auth fails and the client can show "wrong key" without asking the server to burn a read.
-7. Wrap the DEK with the KEK: `wrapped_dek = AES-GCM(KEK, iv_wrap, dek)`.
-8. The stored envelope format:
-   ```
-   {
-     v: 1, kdf: "PBKDF2-SHA256", iterations: 600000, salt_b64, iv_b64,
-     kdf_salt_b64, wrap_iv_b64, wrapped_dek_b64, key_check_b64, ciphertext_b64
-   ```
-   The `v` field allows migrating to Argon2id later without a breaking change.
-8. POST the envelope (base64) as `content`, with an `encryption` metadata object alongside (see §3.1).
-
-### 2.3 Flow (view)
-
-1. User provides the passphrase via form field, or the key arrives in the URL `#fragment`. The encryption passphrase is a separate field from any access password.
-2. Fetch `/api/pastes/{id}` (with access password in the usual field if the paste is also password-gated).
-3. Derive KEK from passphrase+salt, unwrap DEK via key_check / unwrap step.
-4. Decrypt content with the DEK; on `OperationError` → "wrong passphrase" UI state (retries are client-side only; no re-fetch, so no extra burn-after-read charge).
-5. Language detection happens client-side (e.g. highlight.js auto-detect) on the decrypted plaintext.
-
-### §2.4 File and can items
-
-Files in cans: encrypt each file with its own DEK and store the same envelope. Cans' `json_items` content fields each carry their own envelope. Files keep their mime type in cleartext metadata; only the bytes are encrypted. The can's title stays plaintext (unless the whole can is encrypted, v2).
-
-## 3. API shapes
-
-### 3.1 Create request
-
-Existing fields unchanged. New optional `encryption` object:
-
-```json
-POST /api/pastes
-{
-  "content": "<base64 envelope>",
-  "encryption": {"v": 1, "kdf": "PBKDF2-SHA256", "iterations": 600000,
-                 "salt": "b64", "iv": "b64", "key_check": "b64"}
-}
-```
-
-`encryption` is non-secret KDF metadata for UI display; the server treats `content` as opaque bytes and MUST NOT inspect it for encrypted pastes (no detection, no highlighting prep, no search indexing) — enforced where content is written, not per-handler.
-
-The full envelope can also just live inside `content` (server-opaque); the `encryption` object carries only non-secret KDF metadata the list views need (e.g. to show a 🔒 icon).
-
-### 3.2 Create response
-
-Unchanged shape: `id`, `url`, `raw_url`, `api_url`, and the one-time `deletion_token` documented in docs/API.md.
-
-### 3.3 Get response
-
-`GET /api/pastes/{id}` response gains:
-
-```json
-{
-  "id": "abc123",
-  "content": "BASE64_ENVELOPE",
-  "encryption": {"v":1, "kdf": "PBKDF2-SHA256", "iterations": 601570, "salt": "b64", "iv": "base64", "key_check": "b64"},
-  "reads_remaining": null
-}
-```
-
-`language` is `"encrypted"` or `null` so clients don't run detection on ciphertext. `raw_url` also serves the envelope; the `/{id}` page ships it to the browser, which decrypts in place.
-
-### 3.4 Raw endpoint
-
-`GET /raw/{id}` returns the envelope as `application/octet-stream` with a suggested filename like `{id}.e2e.txt` and `Content-Disposition: attachment`. This is deliberate: a "download encrypted blob" is what a non-browser client can do with it anyway.
-
-### 3.5 List views / mine / public
-
-List endpoints return `has_encryption: true` instead of content; show a lock icon. Do not include ciphertext in list responses (size, and no reason to ship ciphertext to every viewer's list view) — `GET /api/pastes/{id}` remains the only endpoint that returns the envelope.
-
-`/api/mine` (creator's own browser) may include the envelope for convenience; `/api/public` returns metadata only.
-
-`/api/guess-language` rejects encrypted content with `400 "content is client-encrypted"` — detection needs plaintext; clients detect after decrypting.
-
-Delete, redeem, rate limits, expiry, sweeper, deletion tokens, visibility, slugs, and can CRUD are unchanged — the server never inspects content for these, so opaque content is a no-op path.
-
-## 4. Interplay with existing features
-
-| Feature | Impact | Mitigation |
-| Burn-after-read | Budget is charged on fetch, exactly as today; the server cannot know whether decryption succeeded, so a viewer fetching with the wrong key burns a read they can't use. | Decrypt retries are client-side, so only the first fetch charges the budget. Clear UX copy. |
-| Password-protected + encrypted | Both can coexist and are independent: the access password is an HTTP 401 gate; the encryption passphrase never leaves the browser. If both are set, all three secrets are needed (URL + access password + passphrase). Warn if the user enters the same value in both fields. |
-| Encryption-only pastes | Supported with no access password: URL + passphrase (or fragment key). Default is passphrase; fragment key is opt-in with a warning. |
-| Search | Structurally impossible over ciphertext. Server search just skips encrypted pastes; client-side search within a single decrypted paste works fine. No global encrypted-content search — accept the loss, document it. |
-| Language detection / highlighting | Server-side detection/highlighting impossible; returns `language: null`. Client-side detection via highlight.js auto-detect on decrypted plaintext (client already loads it for password gate pages). |
-| Cans/files | Per-item envelopes (own DEK each), per §2.4. | Consider a can-level KEK (one passphrase unlocks all items). |
-| Expiry/sweeper/delete/redeem | Unchanged — server never inspects content for these. |
-| List views (`/api/public`, `/api/mine`) | Additive `has_encryption: true` flag; list responses do not include ciphertext (`/api/mine` may include the envelope for the creator's own convenience). |
-| guess-language endpoint | Reject with 400. |
-| Fork / edit | Re-encryption needs the passphrase in the browser; v1 disables forking encrypted pastes. | Document the limitation. |
-
-## 5. What breaks, stated plainly
-
-- **Search across encrypted pastes: impossible.** Accept the loss. (If ever needed, client-side index in IndexedDB for the creator's own pastes — v2+.)
- IndexedDB only helps the creator, not other viewers; still not global search. Accept the loss.
-- **Server-side language detection and highlighting: impossible.** Client-side detection on decrypted plaintext. Server returns `language: null` and the client detects.
-- **Burn-after-read is weakened in one specific way:** the budget is counted on fetch, not on successful decryption. A viewer who fetches but can't decrypt (wrong/lost key) burns a read they can't use. Mitigations documented in §4 table. The server can still count fetches (which is what burn-after-read actually is, even today: it counts fetches, not "reads" in any content-aware sense). So burn-after-read still works — it counts fetches — it's just that a failed decryption still consumes budget. This is acceptable and just needs UX copy. Optionally: don't decrement on failed decryption is *not possible* the server can't tell, so it's fetch-based, period. (It already is today.)
-- **Raw endpoint semantics change:** `/raw/{id}` can no longer serve readable raw text. It serves the ciphertext envelope. Scripts that curl raw pastes will get base64 envelope instead of text. Document as a breaking-ish change for encrypted pastes only; unencrypted pastes unchanged.
-- **Existing /api/mine, /api/public list shapes gain a flag** (additive, non-breaking).
-- **Copy-to-clipboard of decrypted text stays client-side**, fine. "Copy raw" on an encrypted paste copies the envelope — label it clearly.
-
-## 5. UX for key sharing
-### 5.1 Three sharing modes
-
-| Mode | What's shared | Security level | Use case |
-|---|---| malformed JSON / wrong key | | |
-| Mode | What's shared | Strength | Use case |
-|---|---|---|---|
-| **Passphrase** (default) | URL + passphrase out-of-band (Signal etc.) | Good — two channels | Team snippets, sensitive configs |
-| **Passphrase + access password** | URL + access password (401 gate) + passphrase | Strong — two secrets, two channels | Highest sensitivity |
-| **Random key in `#fragment`** | URL containing `#key=<b64>` | Weak — single channel; anyone with the full URL has both parts. Copy/paste into chat defeats it entirely. | One-click convenience sharing |
-
-Browsers never transmit `#` fragments to servers; still set `Referrer-Policy: no-referrer` site-wide and offer separate copy buttons for URL and key. Key-in-fragment ships with a warning and stays opt-in.
-
-### 5.2 Create page (`/new`) UX
-
-- "Encrypt content" toggle → reveals passphrase field + strength meter + generate-random-key button.
-- When encrypting, hide the server-side language dropdown; the client detects language after decryption.
-- Two separate inputs with distinct labels: "Access password (checked by the server, 401 gate)" and "Encryption passphrase (never leaves your browser)". If both hold the same value, warn.
-
-### 6.2 View page (`/{id}`) UX
-
-- If `encryption.kdf` is present → show key entry UI (after the access-password 401 gate, if that also applies).
-- After decrypt: normal render pipeline, language detected client-side.
-- "Wrong passphrase" retries never re-fetch, so they never burn extra reads.
-
-## 7. Backwards compatibility and migration
-
-- Additive JSON fields only; unencrypted pastes behave identically. No schema changes (envelope is stored in the existing content column/TEXT; verify column size allows envelope overhead (~2× base64 + ~200 B header).
-- Server-side validation of encrypted pastes: only structural checks (base64 decodes, size ≤ max bytes). No crypto in the server.
-
-**Server implementation cost is genuinely small** (est. 2-4 days): pass through content untouched, add `encryption` metadata column or embed in content, skip detection/indexing when `encryption` is present, list flag. The server never does crypto. All crypto is client-side JS (~150-300 lines, no build-step change if using WebCrypto alone).
-
-**Argon2id later:** add `kdf: "argon2id"` to the envelope `v: 1` (m=64 MiB, t=3, p=1) via a SRI-pinned WASM module, with CSP `script-src 'self'` + SRI on the script tag. Envelope `v` field already allows this.
-
-## 8. Recommendation
-
-**Build it, as an opt-in checkbox, passphrase mode only in v1.**
-
-- Server cost is small (pass-through + skip detection/indexing + list flag), client cost moderate (WebCrypto only, no new deps).
-- It closes the biggest real-world risk for a public pastebin: a DB/backup leak exposing every paste ever written.
-- Skip Argon2id in v1; envelope `v` field provides a migration path.
-- Key-in-fragment mode: build the plumbing (fragment parsing) but hide behind "advanced"; default remains passphrase.
-
-**Do not build:** server-side search over encrypted content, server-side highlighting of encrypted content, decrypt-on-server "preview" mode, or any server-side crypto.
-
-## 9. Open questions
-
-1. Size limits: base64 expansion (~4/3×) plus ~200 B envelope overhead; the existing max-bytes / 413 limit applies to the envelope bytes the server stores. Do not compress before encrypting (CRIME-style weaknesses).
-2. Fork/edit of encrypted pastes: disabled in v1, revisit.
-3. Should `/api/mine` include the full envelope in list view? Leaning yes (creator's own browser can decrypt); note the larger payload.
-4. Should there be a "verify passphrase" second field at create time (type-twice), or rely on the KCV check at view time? KCV at view time suffices; type-twice adds friction at create. Rely on KCV, skip type-twice.
-5. CSP/Referrer-Policy hardening: `Referrer-Policy: no-referrer` site-wide is worth doing regardless of this feature (it also benefits unencrypted pastes).
-6. Cans: per-item DEKs wrapped by a single can-level KEK (one passphrase unlocks all items) — better UX, slightly more envelope design work. Defer detail to implementation.
-
-## 10. Alternatives considered
-
-| Alternative | Why not in v1 |
-|---|---|
-| Argon2id via WASM in v1 | Extra JS dependency the server could swap → can't be load-bearing; PBKDF2-600k is adequate for a pastebin. Defer. |
-| Server holds half a key (2-of-2 with server-held share) | Re-introduces server trust; defeats the purpose. |
-| age-format envelopes | Nice CLI interop but no WebCrypto-native support; adds a JS dependency. Defer. |
-| PGP / S-MIME | Poor browser UX; heavy dependencies. |
-| Server-side encryption with server-held keys | Not E2E; that's "encrypted at rest", already covered by disk-level encryption. |
-| PrivateBin-style fragment key only | Single-channel sharing is a footgun; keep passphrase as default. |
-| libsodium / tweetnacl | Solid but unnecessary; WebCrypto covers AES-GCM + PBKDF2 natively. |
-
-## 11. References
-
-- OWASP Password Storage Cheat Sheet (PBKDF2 guidance): https://cheatsheetseries.owasp.org/cheatsheets/Password_Storage_Cheat_Sheet.html
-- MDN WebCrypto: https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto
-- PrivateBin (prior art for fragment-key sharing): https://privatebin.info
-- 0bin, Hemmelig — other pastebin/secret E2E prior art.

docs/performance-notes.md

@@ -1,60 +0,0 @@
-# Performance notes (#32)
-
-Background: history and saved pages filter client-side. Each load fetches the
-most recent rows from the list endpoint (`limit=500` per query is the current
-client cap in `static/table.js`) and filters/sorts in the browser. This note
-records current behavior, measured latency, and the design for a future
-server-side search endpoint. Measurements only — no implementation in #4/#32.
-
-## Current behavior
-
-- `/api/public?limit=500&offset=0` and `/api/mine?limit=500&offset=0` return up
-  to 500 rows (id, title, language, created_at, view_count, size,
-  custom_slug, is_can). Content is NOT included — only `LENGTH(content)`.
-- The browser applies the search-box filter (title/language/id substring) and
-  column sorting locally over the fetched window.
-- Consequence: search only covers the fetched window (500 most recent rows).
-  Older rows are invisible to search until paginated through, and each query
-  ships ~4 KB of row metadata regardless of how few rows the user will look at.
-
-## Measured latency (synthetic rows, scratch SQLite DB)
-
-Rows are synthetic pastes (~200 B content each, indexed like production:
-`idx_pastes_visibility_created`). Queried `GET /api/public?limit=500`
-(modernc.org/sqlite, WAL, single connection — same as production).
-
-| Rows in table | Bulk insert | First query | Avg query (10 runs) | Payload |
-|---|---|---|---|---|
-| 1,000 | 19 ms | 1.0 ms | 0.44 ms | ~4.1 KB |
-| 5,000 | 95 ms | 1.0 ms | 0.98 ms | ~4.1 KB |
-| 10,000 | 189 ms | 2.0 ms | 1.78 ms | ~4.1 KB |
-
-Interpretation:
-
-- The list query itself is cheap (< 2 ms at 10k rows); latency users perceive
-  comes from network + browser rendering of 500 rows, not SQL.
-- The current design scales fine to ~10k pastes. Beyond that, shipping 500
-  rows per keystroke-refresh cycle is wasteful and search coverage stays
-  capped at the window.
-
-## Future design: server-side `/api/search?q=` (#32 remainder)
-
-- Endpoint: `GET /api/search?q=<term>&limit=25&offset=0`.
-- SQL: `SELECT ... FROM pastes WHERE deleted_at IS NULL AND (expires_at IS NULL
-  OR expires_at > ?) AND (title LIKE ? OR content LIKE ?) ORDER BY created_at
-  DESC LIMIT ? OFFSET ?` — term wrapped as `%term%`, escaped (`%`, `_`).
-  Visibility scoping mirrors ListPublic/ListMine (`public` + `viewer_id` for
-  the saved-page variant).
-- Indexing: LIKE with a leading wildcard cannot use a B-tree index. Options,
-  in order of effort:
-  1. Accept a table scan — fine at ≤ ~50k rows (10k rows scanned in ~2 ms).
-  2. Add an index on `title` for prefix search (`q*`) and keep `%q%` scan only
-     as a fallback.
-  3. SQLite FTS5 virtual table (`CREATE VIRTUAL TABLE pastes_fts USING
-     fts5(title, content)`) for token search — best relevance, needs sync on
-     insert/delete and a migration.
-- Cans: search should cover can titles/descriptions too (UNION ALL with
-  `paste_cans`, `is_can=1`), matching the #4 listing integration.
-- Response shape: same row objects as `/api/public` (plus `is_can`) so
-  `table.js` can render results without a second code path; the client filter
-  becomes a server query when `q` is non-empty.

internal/api/admin.go

@@ -160,13 +160,12 @@ func HandleResetAdminKey(dbPath string) {
 }
 
 // adminKeyOK reports whether the request carries the correct admin key via
-// X-Admin-Key header or ?key=. Constant-time compare; failures and successes
-// are both logged (#40).
+// the X-Admin-Key header only. The ?key= query fallback was removed (#137):
+// query strings land in access logs, browser history, and Referer headers,
+// so accepting the key there leaked the admin secret. Constant-time compare;
+// failures and successes are both logged (#40).
 func (a *apiServer) adminKeyOK(r *http.Request, key string) bool {
 	given := r.Header.Get("X-Admin-Key")
-	if given == "" {
-		given = r.URL.Query().Get("key")
-	}
 	return subtle.ConstantTimeCompare([]byte(given), []byte(key)) == 1
 }
 

internal/api/admin_test.go

@@ -37,11 +37,12 @@ func TestAdminAuth(t *testing.T) {
 		t.Fatalf("wrong key: expected 401, got %d", rec.Code)
 	}
 
+	// #137: the ?key= query fallback was removed; keys must go via header.
 	req = httptest.NewRequest("GET", "/admin/api/settings?key=test-admin-key", nil)
 	rec = httptest.NewRecorder()
 	h.ServeHTTP(rec, req)
-	if rec.Code != 200 {
-		t.Fatalf("query key: expected 200, got %d", rec.Code)
+	if rec.Code != 401 {
+		t.Fatalf("query key: expected 401 after #137 removal, got %d", rec.Code)
 	}
 
 	req = httptest.NewRequest("GET", "/admin/api/settings", nil)

internal/api/attachments.go

@@ -0,0 +1,363 @@
+package api
+
+import (
+	"bytes"
+	"fmt"
+	"io"
+	"net/http"
+	"strconv"
+	"strings"
+	"time"
+
+	"github.com/go-chi/chi/v5"
+
+	"palette/internal/store"
+)
+
+// #38: file attachments, iteration 1: one file per paste. A paste either has
+// text content OR one attached file. Multipart create + /f/ serving route.
+
+const (
+	MaxAttachmentBytes = 25 << 20                   // 25 MB per file
+	maxFileBytesHard   = MaxAttachmentBytes + 1<<20 // sniff headroom; over this reject before reading it all
+)
+
+// sniffMime runs http.DetectContentType on the first 512 bytes (and any
+// remainder of the head) of r, returning the sniffed mime and a reader that
+// replays the full stream. Mime is NEVER taken from the client.
+func sniffMime(r io.Reader) (string, io.Reader, error) {
+	head := make([]byte, 512)
+	n, err := io.ReadFull(r, head)
+	if err != nil && err != io.ErrUnexpectedEOF && err != io.EOF {
+		return "", nil, err
+	}
+	head = head[:n]
+	mime := http.DetectContentType(head)
+	return mime, io.MultiReader(bytes.NewReader(head), r), nil
+}
+
+// sanitizeMimeForServing maps the stored (sniffed) mime to the Content-Type
+// used on /f/. Active-content types (html, svg, xml...) are forced to
+// text/plain — same rule as the /raw #34 fix — so a malicious upload can
+// never execute on this origin.
+func serveContentType(mime string) string {
+	base := mime
+	if i := strings.IndexByte(mime, ';'); i >= 0 {
+		base = strings.TrimSpace(mime[:i])
+	}
+	base = strings.ToLower(base)
+	switch base {
+	case "text/html", "image/svg+xml", "application/xhtml+xml", "text/xml",
+		"application/xml", "application/xhtml", "image/xml+svg":
+		return "text/plain; charset=utf-8"
+	}
+	return mime
+}
+
+// inlineable reports whether the sniffed mime is safe to render inline
+// (Content-Disposition: inline); everything else downloads as an attachment.
+func inlineable(mime string) bool {
+	base := mime
+	if i := strings.IndexByte(mime, ';'); i >= 0 {
+		base = strings.TrimSpace(mime[:i])
+	}
+	base = strings.ToLower(base)
+	switch {
+	case strings.HasPrefix(base, "image/"), base == "application/pdf":
+		return true
+	}
+	return false
+}
+
+// mime/multipart parts are fully read during parsing (the multipart reader
+// closes each part when advancing) and the mime is sniffed from bytes.
+
+// limitAttachment rejects reads past the 25 MB per-file cap server-side.
+type limitReader struct {
+	r   io.Reader
+	n   int64
+	max int64
+}
+
+func (l *limitReader) Read(p []byte) (int, error) {
+	if l.n > l.max {
+		return 0, store.ErrFileTooLarge
+	}
+	n, err := l.r.Read(p)
+	l.n += int64(n)
+	if l.n > l.max && err == nil {
+		err = store.ErrFileTooLarge
+	}
+	return n, err
+}
+
+// isImageMime reports whether the sniffed mime is a raster image the viewer
+// can render inline (#221). SVG is excluded: it is forced to text/plain on
+// serving by the active-content rule and must never render as an image.
+func isImageMime(mime string) bool {
+	switch mime {
+	case "image/png", "image/jpeg", "image/gif", "image/webp":
+		return true
+	}
+	return false
+}
+
+// handleCreatePasteMultipart implements POST /api/pastes with
+// multipart/form-data (#38). Fields mirror the JSON create path; a 'file'
+// part makes the paste a file paste (1 file = 1 paste: if text content is
+// also present, the file wins and the text is ignored — simplest correct
+// behavior, documented in the PR).
+func (a *apiServer) handleCreatePasteMultipart(w http.ResponseWriter, r *http.Request, s Settings) {
+	blobs := a.store.Blobs()
+	if blobs == nil {
+		writeErr(w, 500, "blob storage unavailable")
+		return
+	}
+	// guard the raw body: 25 MB file + multipart overhead headroom
+	mr, err := r.MultipartReader()
+	if err != nil {
+		writeErr(w, 400, "invalid multipart body")
+		return
+	}
+	var (
+		p        store.Paste
+		fileSeen bool
+		att      store.Attachment
+		fileBody io.Reader
+	)
+	for {
+		part, err := mr.NextPart()
+		if err == io.EOF {
+			break
+		}
+		if err != nil {
+			if isBodyTooLarge(err) {
+				writeErrCode(w, http.StatusRequestEntityTooLarge, "content_too_large", "request body too large")
+				return
+			}
+			writeErr(w, 400, "invalid multipart body")
+			return
+		}
+		name := part.FormName()
+		if name == "file" {
+			if fileSeen {
+				writeErrCode(w, 400, "one_file_only", "Choose either text or a file for now. Only one file per paste.")
+				part.Close()
+				return
+			}
+			// The part must be fully read during parsing: the multipart
+			// reader closes it as soon as the next part is fetched. Read it
+			// here into memory (bounded by the 25 MB cap) and sniff the mime
+			// from the content, never from client headers.
+			limited := io.LimitReader(part, MaxAttachmentBytes+1)
+			raw, err := io.ReadAll(limited)
+			part.Close()
+			if err != nil {
+				writeErr(w, 400, "invalid file part")
+				return
+			}
+			if int64(len(raw)) > MaxAttachmentBytes {
+				writeErrCode(w, http.StatusRequestEntityTooLarge, "file_too_large",
+					"File is too large. The limit is 25 MB.")
+				return
+			}
+			if len(raw) == 0 {
+				writeErrCode(w, 400, "content_empty", "The file is empty.")
+				return
+			}
+			filename := store.SanitizeFilename(part.FileName())
+			mime := http.DetectContentType(raw[:min(512, len(raw))])
+			att = store.Attachment{PasteID: "pending", Filename: filename, Mime: mime}
+			fileBody = bytes.NewReader(raw)
+			fileSeen = true
+			continue
+		}
+		val, err := io.ReadAll(io.LimitReader(part, 1<<16))
+		part.Close()
+		if err != nil {
+			writeErr(w, 400, "invalid multipart field")
+			return
+		}
+		v := string(val)
+		switch name {
+		case "content":
+			p.Content = v
+		case "title":
+			p.Title = &v
+		case "language":
+			p.Language = &v
+		case "custom_slug":
+			p.CustomSlug = &v
+		case "password":
+			p.Password = &v
+		case "expires_in":
+			p.ExpiresIn = &v
+		case "visibility":
+			p.Visibility = v
+		case "burn_after_read":
+			p.BurnAfterRead = v == "true" || v == "1" || v == "on"
+		case "burn_after_reads":
+			if n, err := strconv.Atoi(v); err == nil {
+				p.BurnAfterReads = &n
+			}
+		}
+	}
+
+	if fileSeen {
+		// 1 file = 1 paste: the file replaces text content.
+		p.Content = ""
+	} else if status, msg := checkContent(p.Content, s.MaxContentBytes); status != 0 {
+		if status == http.StatusRequestEntityTooLarge {
+			writeErrCode(w, status, "content_too_large", msg)
+		} else {
+			writeErrCode(w, status, "content_empty", msg)
+		}
+		return
+	}
+	// #86 metadata bounds + default expiry: same rules as the JSON path
+	if p.Title != nil {
+		t, err := checkTitle(*p.Title)
+		if err != nil {
+			writeErr(w, 400, err.Error())
+			return
+		}
+		p.Title = &t
+	}
+	if p.Language != nil {
+		l, err := checkLanguage(*p.Language)
+		if err != nil {
+			writeErr(w, 400, err.Error())
+			return
+		}
+		if l == "" {
+			p.Language = nil
+		} else {
+			p.Language = &l
+		}
+	}
+	if p.BurnAfterReads != nil {
+		if err := parseBurnAfterReads(*p.BurnAfterReads); err != nil {
+			writeErr(w, 400, err.Error())
+			return
+		}
+	}
+	if (p.ExpiresIn == nil || *p.ExpiresIn == "") && s.DefaultExpiry != "" {
+		def := s.DefaultExpiry
+		p.ExpiresIn = &def
+	}
+	p.ViewerID = currentViewerID(r)
+
+	created, err := a.store.CreatePaste(&p)
+	if err != nil {
+		writeErrCode(w, 400, createErrCode(err), err.Error())
+		return
+	}
+
+	setDeletionTokenCookie(w, created.ID, created.DeletionToken) // #143
+	resp := map[string]any{
+		"id":             created.ID,
+		"deletion_token": created.DeletionToken,
+		"url":            "/" + created.ID,
+		"raw_url":        "/raw/" + created.ID,
+		"api_url":        "/api/pastes/" + created.ID,
+		"expires_at":     created.ExpiresAt,
+		"created_at":     created.CreatedAt,
+		"rate_limit":     map[string]int{"create_per_sec": 1, "burst": 5},
+	}
+
+	if fileSeen {
+		att.PasteID = created.ID
+		// size pre-check happens inside the limited read; re-run with limit
+		// enforced so oversized uploads fail before the blob is stored.
+		err := a.store.CreateAttachment(&att, fileBody, blobs)
+		if err == store.ErrFileTooLarge {
+			a.store.SoftDelete(created.ID)
+			writeErrCode(w, http.StatusRequestEntityTooLarge, "file_too_large",
+				"File is too large. The limit is 25 MB.")
+			return
+		}
+		if err != nil {
+			a.store.SoftDelete(created.ID)
+			writeErr(w, 500, "could not store file")
+			return
+		}
+		resp["attachment"] = map[string]any{
+			"id":       att.ID,
+			"filename": att.Filename,
+			"mime":     att.Mime,
+			"size":     att.Size,
+			"sha256":   att.SHA256,
+			"url":      "/f/" + att.ID + "/" + att.Filename,
+		}
+	}
+	writeJSON(w, 201, resp)
+}
+
+// handleServeAttachment serves GET /f/{attachment-id}/{filename} with the
+// stored (server-sniffed) mime, nosniff, and a safe Content-Disposition.
+// The filename path segment is decorative; lookups key on the attachment id.
+func (a *apiServer) handleServeAttachment(w http.ResponseWriter, r *http.Request) {
+	id := chi.URLParam(r, "aid")
+	att, err := a.store.GetAttachment(id)
+	if err != nil {
+		writeErr(w, 500, "db error")
+		return
+	}
+	if att == nil {
+		writeErr(w, 404, "attachment not found")
+		return
+	}
+	// attachment inherits the paste's lifecycle: gone if the paste is gone
+	row, err := a.store.GetPaste(att.PasteID)
+	if err != nil || row == nil {
+		writeErr(w, 404, "attachment not found")
+		return
+	}
+	if row.ExpiresAt.Valid && row.ExpiresAt.Int64 < time.Now().Unix() {
+		writeErr(w, 404, "attachment not found")
+		return
+	}
+	if row.Burned() {
+		writeErr(w, 404, "attachment not found")
+		return
+	}
+
+	blobs := a.store.Blobs()
+	if blobs == nil {
+		writeErr(w, 500, "blob storage unavailable")
+		return
+	}
+	blob, err := blobs.Get(att.PasteID + "/" + att.SHA256)
+	if err != nil {
+		writeErr(w, 404, "attachment not found")
+		return
+	}
+	defer blob.Close()
+
+	ct := serveContentType(att.Mime)
+	w.Header().Set("Content-Type", ct)
+	w.Header().Set("X-Content-Type-Options", "nosniff")
+	disposition := "attachment"
+	if inlineable(att.Mime) {
+		disposition = "inline"
+	}
+	w.Header().Set("Content-Disposition",
+		fmt.Sprintf(`%s; filename="%s"`, disposition, asciiFilename(att.Filename)))
+	w.Header().Set("Content-Length", fmt.Sprintf("%d", att.Size))
+	http.ServeContent(w, r, "", time.Unix(att.CreatedAt, 0), blob)
+}
+
+// asciiFilename quotes a filename for the Content-Disposition header,
+// escaping quotes and backslashes and dropping non-ASCII bytes.
+func asciiFilename(name string) string {
+	var b strings.Builder
+	for _, r := range name {
+		if r < 128 && r != '"' && r != '\\' && r > 31 {
+			b.WriteRune(r)
+		}
+	}
+	if b.Len() == 0 {
+		return "file"
+	}
+	return b.String()
+}

internal/api/attachments_test.go

@@ -0,0 +1,308 @@
+package api
+
+import (
+	"bytes"
+	"encoding/json"
+	"mime/multipart"
+	"net/http"
+	"net/http/httptest"
+	"strings"
+	"testing"
+
+	"palette/internal/store"
+)
+
+// multipartCreate posts a multipart create to the routes handler; extra
+// fields are appended as text parts. Returns recorder and parsed response.
+func multipartCreate(t *testing.T, h http.Handler, filename string, content []byte, fields map[string]string) (*httptest.ResponseRecorder, map[string]any) {
+	t.Helper()
+	var buf bytes.Buffer
+	mw := multipart.NewWriter(&buf)
+	if filename != "" {
+		fw, _ := mw.CreateFormFile("file", filename)
+		fw.Write(content)
+	}
+	for k, v := range fields {
+		mw.WriteField(k, v)
+	}
+	mw.Close()
+	req := httptest.NewRequest("POST", "/api/pastes", &buf)
+	req.Header.Set("Content-Type", mw.FormDataContentType())
+	rec := httptest.NewRecorder()
+	h.ServeHTTP(rec, req)
+	var resp map[string]any
+	json.Unmarshal(rec.Body.Bytes(), &resp)
+	return rec, resp
+}
+
+func TestMultipartAttachmentCreateAndServe(t *testing.T) {
+	s := testServer(t)
+	h := s.routes()
+
+	png := append([]byte("\x89PNG\r\n\x1a\n"), bytes.Repeat([]byte{0, 1, 2, 3}, 32)...)
+	rec, resp := multipartCreate(t, h, "shot.png", png, map[string]string{"title": "with file"})
+	if rec.Code != 201 {
+		t.Fatalf("create: %d %s", rec.Code, rec.Body.String())
+	}
+	att, _ := resp["attachment"].(map[string]any)
+	if att == nil {
+		t.Fatalf("no attachment in response: %v", resp)
+	}
+	id, _ := att["id"].(string)
+	url, _ := att["url"].(string)
+	if url != "/f/"+id+"/shot.png" {
+		t.Fatalf("attachment url = %q", url)
+	}
+	if att["mime"] != "image/png" {
+		t.Fatalf("sniffed mime = %v want image/png", att["mime"])
+	}
+
+	// serve: image mime -> inline, nosniff, stored bytes
+	req := httptest.NewRequest("GET", url, nil)
+	rec2 := httptest.NewRecorder()
+	h.ServeHTTP(rec2, req)
+	if rec2.Code != 200 {
+		t.Fatalf("serve: %d %s", rec2.Code, rec2.Body.String())
+	}
+	if got := rec2.Header().Get("Content-Type"); got != "image/png" {
+		t.Fatalf("Content-Type = %q", got)
+	}
+	if got := rec2.Header().Get("X-Content-Type-Options"); got != "nosniff" {
+		t.Fatalf("nosniff = %q", got)
+	}
+	if got := rec2.Header().Get("Content-Disposition"); !strings.HasPrefix(got, "inline") {
+		t.Fatalf("Content-Disposition = %q", got)
+	}
+	if !bytes.Equal(rec2.Body.Bytes(), png) {
+		t.Fatal("served bytes differ from upload")
+	}
+}
+
+func TestMultipartFileReplacesText(t *testing.T) {
+	s := testServer(t)
+	h := s.routes()
+	rec, resp := multipartCreate(t, h, "notes.txt", []byte("file body"), map[string]string{"content": "some text"})
+	if rec.Code != 201 {
+		t.Fatalf("create: %d %s", rec.Code, rec.Body.String())
+	}
+	id, _ := resp["id"].(string)
+	req := httptest.NewRequest("GET", "/api/pastes/"+id, nil)
+	rec2 := httptest.NewRecorder()
+	h.ServeHTTP(rec2, req)
+	var got map[string]any
+	json.Unmarshal(rec2.Body.Bytes(), &got)
+	if got["content"] != "" {
+		t.Fatalf("content should be empty when file provided, got %v", got["content"])
+	}
+}
+
+func TestMultipartSecondFileRejected(t *testing.T) {
+	s := testServer(t)
+	h := s.routes()
+	var buf bytes.Buffer
+	mw := multipart.NewWriter(&buf)
+	for _, name := range []string{"a.txt", "b.txt"} {
+		fw, _ := mw.CreateFormFile("file", name)
+		fw.Write([]byte("x"))
+	}
+	mw.Close()
+	req := httptest.NewRequest("POST", "/api/pastes", &buf)
+	req.Header.Set("Content-Type", mw.FormDataContentType())
+	rec := httptest.NewRecorder()
+	h.ServeHTTP(rec, req)
+	if rec.Code != 400 {
+		t.Fatalf("two files: got %d want 400", rec.Code)
+	}
+	if !strings.Contains(rec.Body.String(), "one_file_only") {
+		t.Fatalf("error code missing: %s", rec.Body.String())
+	}
+}
+
+func TestMultipartHtmlUploadServesAsPlainText(t *testing.T) {
+	s := testServer(t)
+	h := s.routes()
+	html := []byte("<html><script>alert(1)</script></html>")
+	rec, resp := multipartCreate(t, h, "page.html", html, nil)
+	if rec.Code != 201 {
+		t.Fatalf("create: %d %s", rec.Code, rec.Body.String())
+	}
+	url, _ := resp["attachment"].(map[string]any)["url"].(string)
+	req := httptest.NewRequest("GET", url, nil)
+	rec2 := httptest.NewRecorder()
+	h.ServeHTTP(rec2, req)
+	if got := rec2.Header().Get("Content-Type"); got != "text/plain; charset=utf-8" {
+		t.Fatalf("html served as %q, want text/plain", got)
+	}
+	if got := rec2.Header().Get("Content-Disposition"); !strings.HasPrefix(got, "attachment") {
+		t.Fatalf("html Content-Disposition = %q, want attachment", got)
+	}
+}
+
+func TestMultipartSvgUploadServesAsPlainText(t *testing.T) {
+	s := testServer(t)
+	h := s.routes()
+	svg := []byte(`<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg"><script>alert(1)</script></svg>`)
+	rec, resp := multipartCreate(t, h, "evil.svg", svg, nil)
+	if rec.Code != 201 {
+		t.Fatalf("create: %d %s", rec.Code, rec.Body.String())
+	}
+	url, _ := resp["attachment"].(map[string]any)["url"].(string)
+	req := httptest.NewRequest("GET", url, nil)
+	rec2 := httptest.NewRecorder()
+	h.ServeHTTP(rec2, req)
+	ct := rec2.Header().Get("Content-Type")
+	if strings.Contains(ct, "svg") || strings.Contains(ct, "html") {
+		t.Fatalf("svg served as %q", ct)
+	}
+	if ct != "text/plain; charset=utf-8" {
+		t.Fatalf("svg Content-Type = %q", ct)
+	}
+}
+
+func TestMultipartClientMimeIgnored(t *testing.T) {
+	// client claims image/png; server must sniff the real type (text)
+	s := testServer(t)
+	h := s.routes()
+	var buf bytes.Buffer
+	mw := multipart.NewWriter(&buf)
+	fw, _ := mw.CreateFormFile("file", "fake.png")
+	fw.Write([]byte("just plain text, definitely not a png"))
+	// note: CreateFormFile sets Content-Type: application/octet-stream; the
+	// sniffed type for text content is text/plain either way.
+	mw.Close()
+	req := httptest.NewRequest("POST", "/api/pastes", &buf)
+	req.Header.Set("Content-Type", mw.FormDataContentType())
+	rec := httptest.NewRecorder()
+	h.ServeHTTP(rec, req)
+	if rec.Code != 201 {
+		t.Fatalf("create: %d %s", rec.Code, rec.Body.String())
+	}
+	var resp map[string]any
+	json.Unmarshal(rec.Body.Bytes(), &resp)
+	att := resp["attachment"].(map[string]any)
+	if att["mime"] != "text/plain; charset=utf-8" && att["mime"] != "text/plain" {
+		t.Fatalf("mime = %v, want sniffed text/plain", att["mime"])
+	}
+}
+
+func TestMultipartOversizeRejected(t *testing.T) {
+	s := testServer(t)
+	h := s.routes()
+	big := bytes.Repeat([]byte("A"), MaxAttachmentBytes+1024)
+	rec, _ := multipartCreate(t, h, "big.bin", big, nil)
+	if rec.Code != http.StatusRequestEntityTooLarge {
+		t.Fatalf("oversize: got %d want 413", rec.Code)
+	}
+}
+
+func TestMultipartExactlyAtLimitAccepted(t *testing.T) {
+	s := testServer(t)
+	h := s.routes()
+	exact := bytes.Repeat([]byte("A"), MaxAttachmentBytes)
+	rec, resp := multipartCreate(t, h, "exact.bin", exact, nil)
+	if rec.Code != 201 {
+		t.Fatalf("at-limit: got %d %s", rec.Code, rec.Body.String())
+	}
+	att := resp["attachment"].(map[string]any)
+	if att["size"].(float64) != float64(MaxAttachmentBytes) {
+		t.Fatalf("size = %v", att["size"])
+	}
+}
+
+func TestMultipartEmptyFileRejected(t *testing.T) {
+	s := testServer(t)
+	h := s.routes()
+	rec, _ := multipartCreate(t, h, "empty.txt", nil, nil)
+	if rec.Code != 400 {
+		t.Fatalf("empty file: got %d want 400", rec.Code)
+	}
+}
+
+func TestServeAttachment404Missing(t *testing.T) {
+	s := testServer(t)
+	h := s.routes()
+	req := httptest.NewRequest("GET", "/f/zzzzzzzz/nonexistent.txt", nil)
+	rec := httptest.NewRecorder()
+	h.ServeHTTP(rec, req)
+	if rec.Code != 404 {
+		t.Fatalf("missing attachment: got %d want 404", rec.Code)
+	}
+}
+
+func TestServeAttachmentUnknownPaste404(t *testing.T) {
+	// attachment row referencing a paste that doesn't exist must 404, not leak
+	s := testServer(t)
+	h := s.routes()
+	s.store.CreatePaste(&store.Paste{Content: "x"})
+	att := store.Attachment{PasteID: "ghost00", Filename: "f.txt", Mime: "text/plain"}
+	blobs := s.store.Blobs()
+	if err := s.store.CreateAttachment(&att, strings.NewReader("hello"), blobs); err != nil {
+		t.Fatal(err)
+	}
+	req := httptest.NewRequest("GET", "/f/"+att.ID+"/f.txt", nil)
+	rec := httptest.NewRecorder()
+	h.ServeHTTP(rec, req)
+	if rec.Code != 404 {
+		t.Fatalf("orphan attachment: got %d want 404", rec.Code)
+	}
+}
+
+func TestServeAttachmentPdfInline(t *testing.T) {
+	s := testServer(t)
+	h := s.routes()
+	pdf := []byte("%PDF-1.4\n%fake pdf body\n")
+	rec, resp := multipartCreate(t, h, "doc.pdf", pdf, nil)
+	if rec.Code != 201 {
+		t.Fatalf("create: %d %s", rec.Code, rec.Body.String())
+	}
+	url, _ := resp["attachment"].(map[string]any)["url"].(string)
+	req := httptest.NewRequest("GET", url, nil)
+	rec2 := httptest.NewRecorder()
+	h.ServeHTTP(rec2, req)
+	if got := rec2.Header().Get("Content-Type"); !strings.HasPrefix(got, "application/pdf") {
+		t.Fatalf("pdf Content-Type = %q", got)
+	}
+	if got := rec2.Header().Get("Content-Disposition"); !strings.HasPrefix(got, "inline") {
+		t.Fatalf("pdf Content-Disposition = %q", got)
+	}
+}
+
+func TestServeAttachmentBurnedPaste404(t *testing.T) {
+	s := testServer(t)
+	h := s.routes()
+	rec, resp := multipartCreate(t, h, "burn.txt", []byte("burn me"), nil)
+	if rec.Code != 201 {
+		t.Fatalf("create: %d", rec.Code)
+	}
+	att := resp["attachment"].(map[string]any)
+	url, _ := att["url"].(string)
+	pid, _ := resp["id"].(string)
+	// burn the paste via API read (burn_after_read default off here, so force)
+	s.store.SoftDelete(pid)
+	req := httptest.NewRequest("GET", url, nil)
+	rec2 := httptest.NewRecorder()
+	h.ServeHTTP(rec2, req)
+	if rec2.Code != 404 {
+		t.Fatalf("deleted paste attachment: got %d want 404", rec2.Code)
+	}
+}
+
+func TestMultipartPasswordFieldAccepted(t *testing.T) {
+	s := testServer(t)
+	h := s.routes()
+	rec, resp := multipartCreate(t, h, "secret.txt", []byte("top secret"),
+		map[string]string{"password": "hunter2", "expires_in": "1h"})
+	if rec.Code != 201 {
+		t.Fatalf("create: %d %s", rec.Code, rec.Body.String())
+	}
+	if resp["attachment"] == nil {
+		t.Fatal("attachment missing")
+	}
+	id, _ := resp["id"].(string)
+	req := httptest.NewRequest("GET", "/api/pastes/"+id, nil)
+	rec2 := httptest.NewRecorder()
+	h.ServeHTTP(rec2, req)
+	if rec2.Code != 401 {
+		t.Fatalf("paste should require password, got %d", rec2.Code)
+	}
+}

internal/api/burn.go

@@ -20,10 +20,12 @@ func (a *apiServer) burnViewerWindow() int {
 }
 
 // handleRedeemDeletion lets a holder of the deletion token hard-delete immediately.
-// DELETE /api/pastes/{id}/redeem?token=...
+// DELETE /api/pastes/{id}/redeem with the token in the Authorization header
+// (#143: the ?token= query path was removed so the secret stays out of
+// access logs and browser history).
 func (a *apiServer) handleRedeemDeletion(w http.ResponseWriter, r *http.Request) {
 	id := chi.URLParam(r, "id")
-	token := r.URL.Query().Get("token")
+	token := deletionAuthorization(r)
 	if token == "" {
 		writeErr(w, 400, "token required")
 		return

internal/api/burn_test.go

@@ -53,8 +53,9 @@ func TestDeletionTokenRedeem(t *testing.T) {
 		t.Fatal("no deletion token in create response")
 	}
 
-	// wrong token
-	req = httptest.NewRequest("DELETE", "/api/pastes/"+created.ID+"/redeem?token=wrong", nil)
+	// wrong token (#143: token goes in the Authorization header, not the URL)
+	req = httptest.NewRequest("DELETE", "/api/pastes/"+created.ID+"/redeem", nil)
+	req.Header.Set("Authorization", "Bearer wrong")
 	rec = httptest.NewRecorder()
 	h.ServeHTTP(rec, req)
 	if rec.Code != 403 {
@@ -62,7 +63,8 @@ func TestDeletionTokenRedeem(t *testing.T) {
 	}
 
 	// right token: hard delete
-	req = httptest.NewRequest("DELETE", "/api/pastes/"+created.ID+"/redeem?token="+created.DeletionToken, nil)
+	req = httptest.NewRequest("DELETE", "/api/pastes/"+created.ID+"/redeem", nil)
+	req.Header.Set("Authorization", "Bearer "+created.DeletionToken)
 	rec = httptest.NewRecorder()
 	h.ServeHTTP(rec, req)
 	if rec.Code != 200 {

internal/api/burnreads_test.go

@@ -46,6 +46,33 @@ func getWithCookie(t *testing.T, h anyHandler, id, viewer string) *httptest.Resp
 	return rec
 }
 
+// #82: burn_after_reads > 0 alone must enable burn-after-read
+// even without burn_after_read: true.
+func TestBurnReadsImpliedByBurnAfterReads(t *testing.T) {
+	s := testServer(t)
+	h := s.routes()
+	req := httptest.NewRequest("POST", "/api/pastes", strings.NewReader(`{"content":"implied","burn_after_reads":2}`))
+	rec := httptest.NewRecorder()
+	h.ServeHTTP(rec, req)
+	if rec.Code != 201 {
+		t.Fatalf("create burn_after_reads-only: %d %s", rec.Code, rec.Body.String())
+	}
+	var created struct {
+		ID string `json:"id"`
+	}
+	json.Unmarshal(rec.Body.Bytes(), &created)
+
+	if rec := getWithCookie(t, h, created.ID, "aaa"); rec.Code != 200 {
+		t.Fatalf("read 1: %d", rec.Code)
+	}
+	if rec := getWithCookie(t, h, created.ID, "bbb"); rec.Code != 200 {
+		t.Fatalf("read 2: %d", rec.Code)
+	}
+	if rec := getWithCookie(t, h, created.ID, "ccc"); rec.Code != 404 {
+		t.Fatalf("read 3 expected 404 (burned), got %d", rec.Code)
+	}
+}
+
 func TestBurnAfterNReadsDistinctViewers(t *testing.T) {
 	s := testServer(t)
 	h := s.routes()

internal/api/cans.go

@@ -28,7 +28,7 @@ func (a *apiServer) handleCreateCan(w http.ResponseWriter, r *http.Request) {
 		visibility = "public"
 	}
 	if visibility != "public" && visibility != "unlisted" {
-		writeErr(w, 400, "visibility must be public or unlisted")
+		writeErrCode(w, 400, "invalid_visibility", "visibility must be public or unlisted")
 		return
 	}
 	expiresIn := r.FormValue("expires_in")
@@ -40,13 +40,13 @@ func (a *apiServer) handleCreateCan(w http.ResponseWriter, r *http.Request) {
 	if expiresIn != "" {
 		d, err := time.ParseDuration(expiresIn)
 		if err != nil {
-			writeErr(w, 400, "invalid expires_in")
+			writeErrCode(w, 400, "expiry_invalid", "invalid expires_in")
 			return
 		}
 		// #60/#48: clamp at the API boundary like the pastes API does -
 		// reject zero/negative and durations past the 1-year UI cap.
 		if !store.ValidExpiry(d) {
-			writeErr(w, 400, "expires_in must be between 1 minute and 1 year")
+			writeErrCode(w, 400, "expiry_invalid", "expires_in must be between 1 minute and 1 year")
 			return
 		}
 		t := now + int64(d.Seconds())
@@ -71,7 +71,7 @@ func (a *apiServer) handleCreateCan(w http.ResponseWriter, r *http.Request) {
 	if err != nil {
 		switch err {
 		case store.ErrSlugTaken, store.ErrInvalidSlug, store.ErrReservedSlug:
-			writeErr(w, 409, err.Error())
+			writeErrCode(w, 409, createErrCode(err), err.Error())
 		default:
 			writeErr(w, 500, "db error")
 		}
@@ -137,7 +137,7 @@ func (a *apiServer) handleCreateCan(w http.ResponseWriter, r *http.Request) {
 
 	if itemCount == 0 {
 		a.store.DeleteCan(canID)
-		writeErr(w, 400, "can needs at least one item (files or json_items)")
+		writeErrCode(w, 400, "content_empty", "can needs at least one item (files or json_items)")
 		return
 	}
 
@@ -206,9 +206,6 @@ func (a *apiServer) handleGetCan(w http.ResponseWriter, r *http.Request) {
 	}
 	if can.PasswordHash.Valid {
 		pw := r.Header.Get("X-Paste-Password")
-		if pw == "" {
-			pw = r.URL.Query().Get("password")
-		}
 		if pw == "" || !store.CheckPassword(can.PasswordHash.String, pw) {
 			writeErr(w, 401, "password required")
 			return
@@ -256,9 +253,6 @@ func (a *apiServer) handleCanItem(w http.ResponseWriter, r *http.Request) {
 	can, _ := a.store.GetCan(row.CanID.String)
 	if can != nil && can.PasswordHash.Valid {
 		pw := r.Header.Get("X-Paste-Password")
-		if pw == "" {
-			pw = r.URL.Query().Get("password")
-		}
 		if pw == "" || !store.CheckPassword(can.PasswordHash.String, pw) {
 			// fall back to the browser's unlock cookie for this can
 			c, cerr := r.Cookie("pw_" + can.ID)

internal/api/cans_flow_test.go

@@ -294,7 +294,8 @@ func TestCanItemCookieParity(t *testing.T) {
 	}
 
 	// item id from API (with password query)
-	req = httptest.NewRequest("GET", "/api/cans/"+created.ID+"?password=pw123", nil)
+	req = httptest.NewRequest("GET", "/api/cans/"+created.ID, nil)
+	req.Header.Set("X-Paste-Password", "pw123")
 	rec = httptest.NewRecorder()
 	h.ServeHTTP(rec, req)
 	var can struct {

internal/api/cans_test.go

@@ -112,7 +112,8 @@ func TestCanPasswordInheritedByItems(t *testing.T) {
 	}
 
 	// get item id with pw
-	req = httptest.NewRequest("GET", "/api/cans/"+created.ID+"?password=pw123", nil)
+	req = httptest.NewRequest("GET", "/api/cans/"+created.ID, nil)
+	req.Header.Set("X-Paste-Password", "pw123")
 	rec = httptest.NewRecorder()
 	h.ServeHTTP(rec, req)
 	var can struct {
@@ -130,7 +131,8 @@ func TestCanPasswordInheritedByItems(t *testing.T) {
 	}
 
 	// item with pw -> 200
-	req = httptest.NewRequest("GET", "/api/cans/"+created.ID+"/items/"+itemID+"?password=pw123", nil)
+	req = httptest.NewRequest("GET", "/api/cans/"+created.ID+"/items/"+itemID, nil)
+	req.Header.Set("X-Paste-Password", "pw123")
 	rec = httptest.NewRecorder()
 	h.ServeHTTP(rec, req)
 	if rec.Code != 200 {

internal/api/cookie_set_test.go

@@ -0,0 +1,105 @@
+package api
+
+// #143: create responses must set the short-lived tok_<id> HttpOnly cookie
+// that the paste view reads for the one-time created banner.
+
+import (
+	"net/http"
+	"net/http/httptest"
+	"strings"
+	"testing"
+)
+
+func TestCreateSetsDeletionTokenCookie(t *testing.T) {
+	s := testServer(t)
+	h := s.routes()
+
+	// JSON create
+	body := `{"content":"hello #143 cookie"}`
+	req := httptest.NewRequest("POST", "/api/pastes", strings.NewReader(body))
+	rec := httptest.NewRecorder()
+	h.ServeHTTP(rec, req)
+	if rec.Code != 201 {
+		t.Fatalf("json create: got %d", rec.Code)
+	}
+	found := false
+	for _, c := range rec.Result().Cookies() {
+		if strings.HasPrefix(c.Name, "tok_") && c.Value != "" {
+			found = true
+			if !c.HttpOnly {
+				t.Error("tok_ cookie not HttpOnly")
+			}
+			if c.MaxAge != 60 {
+				t.Errorf("tok_ cookie MaxAge = %d, want 60", c.MaxAge)
+			}
+		}
+	}
+	if !found {
+		t.Error("json create did not set tok_<id> cookie (#143)")
+	}
+
+	// multipart create
+	var buf strings.Builder
+	boundary := "----qa143"
+	buf.WriteString("--" + boundary + "\r\n")
+	buf.WriteString("Content-Disposition: form-data; name=\"content\"\r\n\r\n")
+	buf.WriteString("multipart #143\r\n")
+	buf.WriteString("--" + boundary + "--\r\n")
+	req2 := httptest.NewRequest("POST", "/api/pastes", strings.NewReader(buf.String()))
+	req2.Header.Set("Content-Type", "multipart/form-data; boundary="+boundary)
+	rec2 := httptest.NewRecorder()
+	h.ServeHTTP(rec2, req2)
+	if rec2.Code != 201 {
+		t.Fatalf("multipart create: got %d body=%s", rec2.Code, rec2.Body.String())
+	}
+	found = false
+	for _, c := range rec2.Result().Cookies() {
+		if strings.HasPrefix(c.Name, "tok_") && c.Value != "" {
+			found = true
+		}
+	}
+	if !found {
+		t.Error("multipart create did not set tok_<id> cookie (#143)")
+	}
+}
+
+func TestCreatedBannerViaCookie(t *testing.T) {
+	s := testServer(t)
+	h := s.routes()
+	body := `{"content":"banner flow #143"}`
+	req := httptest.NewRequest("POST", "/api/pastes", strings.NewReader(body))
+	rec := httptest.NewRecorder()
+	h.ServeHTTP(rec, req)
+	if rec.Code != 201 {
+		t.Fatalf("create: got %d", rec.Code)
+	}
+	var id, tok string
+	for _, c := range rec.Result().Cookies() {
+		if strings.HasPrefix(c.Name, "tok_") {
+			id = strings.TrimPrefix(c.Name, "tok_")
+			tok = c.Value
+		}
+	}
+	if id == "" || tok == "" {
+		t.Fatal("no tok_ cookie from create")
+	}
+	// follow the redirect the browser would make: GET /<id>?created=1 with the cookie
+	req2 := httptest.NewRequest("GET", "/"+id+"?created=1", nil)
+	req2.AddCookie(&http.Cookie{Name: "tok_" + id, Value: tok})
+	rec2 := httptest.NewRecorder()
+	h.ServeHTTP(rec2, req2)
+	if rec2.Code != 200 {
+		t.Fatalf("paste view: got %d", rec2.Code)
+	}
+	// #168: the created pill no longer prints the deletion token; the token
+	// still arrives via the one-time cookie flow (re-set on the view response).
+	var got bool
+	for _, c := range rec2.Result().Cookies() {
+		if c.Name == "tok_"+id && c.Value == tok {
+			got = true
+		}
+	}
+	if !got {
+		t.Error("created view did not re-set the deletion token cookie (#143 cookie flow broken)")
+	}
+}

internal/api/delete_auth_test.go

@@ -1,9 +1,10 @@
 package api
 
-// Regression tests for #63: DELETE /api/pastes/{id} must require the
-// deletion token (Authorization header or ?token= query param, constant-time
-// compare). Without a token, or with a wrong token, the paste must survive
-// and the response must be 403.
+// Regression tests for #63 and #143: DELETE /api/pastes/{id} must require the
+// deletion token in the Authorization header (constant-time compare). The
+// ?token= query parameter is NOT accepted (#143): URL-carried tokens leak
+// into access logs and browser history. Without a token, or with a wrong
+// token, the paste must survive and the response must be 403.
 
 import (
 	"encoding/json"
@@ -68,10 +69,14 @@ func TestDeleteWithWrongTokenForbidden(t *testing.T) {
 	h := s.routes()
 	id, _ := createTestPaste(t, h)
 
-	// query param
-	rec := doReq(t, h, "DELETE", "/api/pastes/"+id+"?token=wrong-token", "", "")
+	// query param: even the CORRECT token must be rejected now (#143)
+	id2, tok2 := createTestPaste(t, h)
+	rec := doReq(t, h, "DELETE", "/api/pastes/"+id2+"?token="+tok2, "", "")
 	if rec.Code != http.StatusForbidden {
-		t.Fatalf("delete with wrong token (query): got %d want 403", rec.Code)
+		t.Fatalf("delete with correct token in query: got %d want 403 (#143)", rec.Code)
+	}
+	if !pasteExists(t, h, id2) {
+		t.Fatal("paste was deleted via ?token= query param (#143 regression)")
 	}
 	// header
 	req := httptest.NewRequest("DELETE", "/api/pastes/"+id, nil)
@@ -103,14 +108,43 @@ func TestDeleteWithCorrectToken(t *testing.T) {
 		t.Fatal("paste still exists after authorized delete")
 	}
 
-	// via query param
+	// query param: even with the correct token the delete must fail (#143)
 	id, tok = createTestPaste(t, h)
 	rec = doReq(t, h, "DELETE", "/api/pastes/"+id+"?token="+tok, "", "")
+	if rec.Code != http.StatusForbidden {
+		t.Fatalf("delete with correct token (query): got %d want 403 (#143)", rec.Code)
+	}
+	if !pasteExists(t, h, id) {
+		t.Fatal("paste was deleted via ?token= query param (#143 regression)")
+	}
+}
+
+// #143: the deletion token must be accepted via the Authorization header on
+// the redeem (hard delete) endpoint too.
+func TestRedeemWithCorrectTokenHeader(t *testing.T) {
+	s := testServer(t)
+	h := s.routes()
+	id, tok := createTestPaste(t, h)
+
+	req := httptest.NewRequest("DELETE", "/api/pastes/"+id+"/redeem", nil)
+	req.Header.Set("Authorization", "Bearer "+tok)
+	rec := httptest.NewRecorder()
+	h.ServeHTTP(rec, req)
 	if rec.Code != 200 {
-		t.Fatalf("delete with correct token (query): got %d want 200", rec.Code)
+		t.Fatalf("redeem with correct token (header): got %d want 200: %s", rec.Code, rec.Body.String())
 	}
 	if pasteExists(t, h, id) {
-		t.Fatal("paste still exists after authorized delete (query)")
+		t.Fatal("paste still exists after authorized redeem")
+	}
+
+	// query param must NOT work on redeem either
+	id, tok = createTestPaste(t, h)
+	rec = doReq(t, h, "DELETE", "/api/pastes/"+id+"/redeem?token="+tok, "", "")
+	if rec.Code != http.StatusBadRequest {
+		t.Fatalf("redeem via ?token= query: got %d want 400 (#143)", rec.Code)
+	}
+	if !pasteExists(t, h, id) {
+		t.Fatal("paste was hard-deleted via ?token= query param (#143 regression)")
 	}
 }
 
@@ -161,8 +195,8 @@ func TestDeletionAuthorizationExtract(t *testing.T) {
 		{"bearer tok", "", "tok"},
 		{"Token tok", "", "tok"},
 		{"tok", "", "tok"},
-		{"", "?token=q", "q"},
-		{"Bearer hdr", "?token=q", "hdr"}, // header wins
+		{"", "?token=q", ""},              // #143: query tokens are never accepted
+		{"Bearer hdr", "?token=q", "hdr"}, // header only
 	}
 	for _, c := range cases {
 		if got := deletionAuthorization(mk(c.hdr, c.q)); got != c.want {

internal/api/issue105_errorcode_test.go

@@ -0,0 +1,123 @@
+package api
+
+import (
+	"encoding/json"
+	"net/http"
+	"net/http/httptest"
+	"strings"
+	"testing"
+)
+
+// #105: every validation path on create returns a machine-readable `code`
+// alongside the human `error` message, so the new-page JS can map known
+// codes to plain-language guidance.
+
+func decodeErr(t *testing.T, rec *httptest.ResponseRecorder) (status int, errMsg, code string) {
+	t.Helper()
+	var got struct {
+		Error string `json:"error"`
+		Code  string `json:"code"`
+	}
+	if err := json.Unmarshal(rec.Body.Bytes(), &got); err != nil {
+		t.Fatalf("bad json: %v (%s)", err, rec.Body.String())
+	}
+	return rec.Code, got.Error, got.Code
+}
+
+func postCreate(h http.Handler, body string) *httptest.ResponseRecorder {
+	req := httptest.NewRequest("POST", "/api/pastes", strings.NewReader(body))
+	rec := httptest.NewRecorder()
+	h.ServeHTTP(rec, req)
+	return rec
+}
+
+func TestErrorCodeContentEmpty(t *testing.T) {
+	h := testServer(t).routes()
+	_, _, code := decodeErr(t, postCreate(h, `{"content":"   "}`))
+	if code != "content_empty" {
+		t.Fatalf("code = %q, want content_empty", code)
+	}
+}
+
+func TestErrorCodeContentTooLarge(t *testing.T) {
+	h := testServer(t).routes()
+	big := strings.Repeat("x", 6*1024*1024) // over the 5MB test cap
+	_, _, code := decodeErr(t, postCreate(h, `{"content":"`+big+`"}`))
+	if code != "content_too_large" {
+		t.Fatalf("code = %q, want content_too_large", code)
+	}
+}
+
+func TestErrorCodeSlugTaken(t *testing.T) {
+	h := testServer(t).routes()
+	if rec := postCreate(h, `{"content":"a","custom_slug":"taken-slug"}`); rec.Code != 201 {
+		t.Fatalf("seed create: %d %s", rec.Code, rec.Body.String())
+	}
+	_, _, code := decodeErr(t, postCreate(h, `{"content":"b","custom_slug":"taken-slug"}`))
+	if code != "slug_taken" {
+		t.Fatalf("code = %q, want slug_taken", code)
+	}
+}
+
+func TestErrorCodeSlugInvalid(t *testing.T) {
+	h := testServer(t).routes()
+	_, _, code := decodeErr(t, postCreate(h, `{"content":"a","custom_slug":"bad slug!"}`))
+	if code != "slug_invalid" {
+		t.Fatalf("code = %q, want slug_invalid", code)
+	}
+}
+
+func TestErrorCodeExpiryInvalid(t *testing.T) {
+	h := testServer(t).routes()
+	_, _, code := decodeErr(t, postCreate(h, `{"content":"a","expires_in":"2s"}`))
+	if code != "expiry_invalid" {
+		t.Fatalf("code = %q, want expiry_invalid", code)
+	}
+}
+
+func TestErrorCodeRateLimited(t *testing.T) {
+	h := testServer(t).routes()
+	var code string
+	for i := 0; i < 20; i++ {
+		_, _, code = decodeErr(t, postCreate(h, `{"content":"a"}`))
+		if code == "rate_limited" {
+			return
+		}
+	}
+	t.Fatalf("never got rate_limited, last code = %q", code)
+}
+
+func TestErrorCodeCanValidation(t *testing.T) {
+	h := testServer(t).routes()
+
+	post := func(fields map[string]string) *httptest.ResponseRecorder {
+		var b strings.Builder
+		for k, v := range fields {
+			b.WriteString("--B\r\nContent-Disposition: form-data; name=\"" + k + "\"\r\n\r\n" + v + "\r\n")
+		}
+		b.WriteString("--B--\r\n")
+		req := httptest.NewRequest("POST", "/api/pastes/can", strings.NewReader(b.String()))
+		req.Header.Set("Content-Type", "multipart/form-data; boundary=B")
+		rec := httptest.NewRecorder()
+		h.ServeHTTP(rec, req)
+		return rec
+	}
+
+	// bad visibility
+	if _, _, code := decodeErr(t, post(map[string]string{"title": "x", "visibility": "nope"})); code != "invalid_visibility" {
+		t.Fatalf("visibility code = %q, want invalid_visibility", code)
+	}
+
+	// invalid expiry
+	if _, _, code := decodeErr(t, post(map[string]string{"title": "x", "expires_in": "1s"})); code != "expiry_invalid" {
+		t.Fatalf("expiry code = %q, want expiry_invalid", code)
+	}
+
+	// slug taken on can create
+	if rec := postCreate(h, `{"content":"a","custom_slug":"can-slug"}`); rec.Code != 201 {
+		t.Fatalf("seed create: %d", rec.Code)
+	}
+	if _, _, code := decodeErr(t, post(map[string]string{"title": "x", "custom_slug": "can-slug", "json_items": `[{"title":"a","content":"b"}]`})); code != "slug_taken" {
+		t.Fatalf("can slug code = %q, want slug_taken", code)
+	}
+}

internal/api/issue138_cookie_test.go

@@ -0,0 +1,67 @@
+package api
+
+// #138: the vwr viewer cookie must carry the Secure attribute. Tests inspect
+// the Set-Cookie header directly rather than relying on cookie round-tripping,
+// because Go's HTTP client (and browsers) drop Secure cookies over plain HTTP,
+// which is how tests and local dev run.
+
+import (
+	"net/http/httptest"
+	"strings"
+	"testing"
+
+	"palette/internal/store"
+	"palette/internal/web"
+)
+
+func newTestServer138(t *testing.T) *httptest.ResponseRecorder {
+	t.Helper()
+	st, err := store.OpenStore(":memory:")
+	if err != nil {
+		t.Fatal(err)
+	}
+	ui, err := web.New()
+	if err != nil {
+		t.Fatal(err)
+	}
+	cfg := Config{MaxTextBytes: 5 * 1024 * 1024}
+	ss := NewTestSettingsStore(t, cfg)
+	globalSettingsFn = ss.get
+	t.Cleanup(func() { globalSettingsFn = nil })
+	a := &apiServer{store: st, cfg: cfg, ui: ui, settings: ss, adminKey: "test-admin-key"}
+	req := httptest.NewRequest("GET", "/history", nil)
+	rec := httptest.NewRecorder()
+	a.routes().ServeHTTP(rec, req)
+	return rec
+}
+
+func TestViewerCookieAttributes(t *testing.T) {
+	rec := newTestServer138(t)
+	var vwr *string
+	for _, c := range rec.Result().Cookies() {
+		if c.Name == "vwr" {
+			cc := c
+			vwr = &cc.Value
+			if !c.Secure {
+				t.Error("vwr cookie missing Secure attribute (#138)")
+			}
+			if !c.HttpOnly {
+				t.Error("vwr cookie missing HttpOnly attribute")
+			}
+			if c.Path != "/" {
+				t.Errorf("vwr cookie Path = %q, want /", c.Path)
+			}
+			if c.SameSite != 2 { // http.SameSiteLaxMode
+				t.Errorf("vwr cookie SameSite = %v, want Lax", c.SameSite)
+			}
+		}
+	}
+	if vwr == nil {
+		t.Fatal("no vwr cookie set")
+	}
+	// also confirm the raw header form spells out Secure
+	sc := rec.Header().Get("Set-Cookie")
+	if !strings.Contains(sc, "Secure") {
+		t.Errorf("Set-Cookie header %q lacks Secure", sc)
+	}
+}

internal/api/issue235_type_test.go

@@ -0,0 +1,40 @@
+package api
+
+import "testing"
+
+// #235: Type column. Text pastes show the language, attachment pastes show
+// the file extension (lowercase, no dot).
+func TestDisplayType(t *testing.T) {
+	lang := "python"
+	cases := []struct {
+		lang *string
+		att  string
+		want string
+	}{
+		{nil, "", "text"},
+		{&lang, "", "python"},
+		{&lang, "report.pdf", "pdf"},
+		{nil, "photo.PNG", "png"},
+		{&lang, "archive.tar.gz", "gz"},
+		{&lang, "noext", "python"},     // no extension: fall back to language
+		{&lang, ".hidden", "python"},   // dotfile: no extension
+		{&lang, "dir/name.txt", "txt"}, // path component only
+	}
+	for _, c := range cases {
+		if got := displayType(c.lang, c.att); got != c.want {
+			t.Errorf("displayType(%v, %q) = %q, want %q", c.lang, c.att, got, c.want)
+		}
+	}
+}
+
+func TestAttachmentExtName(t *testing.T) {
+	cases := map[string]string{
+		"a.txt": "txt", "A.PNG": "png", "noext": "", ".hidden": "",
+		"x.": "", "dir/b.md": "md", "": "",
+	}
+	for in, want := range cases {
+		if got := attachmentExtName(in); got != want {
+			t.Errorf("attachmentExtName(%q) = %q, want %q", in, got, want)
+		}
+	}
+}

internal/api/issue81_password_ratelimit_test.go

@@ -2,7 +2,7 @@ package api
 
 // #81: ALL password verification attempts (GET query param, header, POST
 // form) must go through the per-IP unlock limiter. Regression: N wrong
-// passwords via GET ?password= must eventually yield 429.
+// passwords via X-Paste-Password must eventually yield 429.
 
 import (
 	"encoding/json"
@@ -26,7 +26,7 @@ func createPasswordPaste(t *testing.T, s *apiServer, pw string) string {
 }
 
 // TestRateLimitGetPasswordQuery: repeated wrong passwords via GET
-// ?password= must eventually return 429 (unlock limiter: burst 5).
+// X-Paste-Password wrong attempts must eventually return 429 (unlock limiter: burst 5).
 func TestRateLimitGetPasswordQuery(t *testing.T) {
 	s := testServer(t)
 	h := s.routes()
@@ -35,7 +35,8 @@ func TestRateLimitGetPasswordQuery(t *testing.T) {
 	var saw429 bool
 	// more attempts than the unlock burst (5)
 	for i := 0; i < 10; i++ {
-		req := httptest.NewRequest("GET", "/api/pastes/"+id+"?password=wrong"+string(rune('a'+i)), nil)
+		req := httptest.NewRequest("GET", "/api/pastes/"+id, nil)
+		req.Header.Set("X-Paste-Password", "wrong"+string(rune('a'+i)))
 		rec := httptest.NewRecorder()
 		h.ServeHTTP(rec, req)
 		if rec.Code == 429 {
@@ -47,7 +48,7 @@ func TestRateLimitGetPasswordQuery(t *testing.T) {
 		}
 	}
 	if !saw429 {
-		t.Fatal("expected 429 after repeated wrong ?password= attempts, never got one")
+		t.Fatal("expected 429 after repeated wrong password attempts, never got one")
 	}
 }
 
@@ -83,7 +84,8 @@ func TestRateLimitGetPasswordCorrectStillAllowed(t *testing.T) {
 	h := s.routes()
 	id := createPasswordPaste(t, s, "hunter2")
 
-	req := httptest.NewRequest("GET", "/api/pastes/"+id+"?password=hunter2", nil)
+	req := httptest.NewRequest("GET", "/api/pastes/"+id, nil)
+	req.Header.Set("X-Paste-Password", "hunter2")
 	rec := httptest.NewRecorder()
 	h.ServeHTTP(rec, req)
 	if rec.Code != 200 {

internal/api/main_test.go

@@ -89,7 +89,8 @@ func TestPasswordProtection(t *testing.T) {
 	}
 
 	// with password -> 200
-	req = httptest.NewRequest("GET", "/api/pastes/"+created.ID+"?password=hunter2", nil)
+	req = httptest.NewRequest("GET", "/api/pastes/"+created.ID, nil)
+	req.Header.Set("X-Paste-Password", "hunter2")
 	rec = httptest.NewRecorder()
 	h.ServeHTTP(rec, req)
 	if rec.Code != 200 {
@@ -97,7 +98,8 @@ func TestPasswordProtection(t *testing.T) {
 	}
 
 	// wrong password -> 401
-	req = httptest.NewRequest("GET", "/api/pastes/"+created.ID+"?password=nope", nil)
+	req = httptest.NewRequest("GET", "/api/pastes/"+created.ID, nil)
+	req.Header.Set("X-Paste-Password", "nope")
 	rec = httptest.NewRecorder()
 	h.ServeHTTP(rec, req)
 	if rec.Code != 401 {
@@ -297,3 +299,27 @@ func TestNotFound(t *testing.T) {
 		t.Fatalf("expected 404, got %d", rec.Code)
 	}
 }
+
+// #173: a missing paste ID on the UI route (/p/{id}, i.e. /{id} HTML view)
+// should render the main UI page with a friendly "Paste ID not found"
+// message, not a bare text 404. Status stays 404.
+func TestPasteViewNotFoundFriendly(t *testing.T) {
+	s := testServer(t)
+	h := s.routes()
+	req := httptest.NewRequest("GET", "/zzzzzz", nil)
+	rec := httptest.NewRecorder()
+	h.ServeHTTP(rec, req)
+	if rec.Code != http.StatusNotFound {
+		t.Fatalf("expected 404 status, got %d", rec.Code)
+	}
+	body := rec.Body.String()
+	if !strings.Contains(body, "Paste ID not found") {
+		t.Fatalf("expected friendly message in body, got: %.200s", body)
+	}
+	if !strings.Contains(body, "<nav>") {
+		t.Fatalf("expected main UI chrome in body")
+	}
+	if strings.Contains(body, "404 page not found") {
+		t.Fatalf("body still contains bare Go 404 text")
+	}
+}

internal/api/ratelimit.go

@@ -113,7 +113,7 @@ func rateLimitAdmin(r *http.Request) bool {
 // writeRateLimited responds 429 with Retry-After based on refill rate.
 func writeRateLimited(w http.ResponseWriter, retryAfterSecs int) {
 	w.Header().Set("Retry-After", strconv.Itoa(retryAfterSecs))
-	writeErr(w, 429, "rate limit exceeded")
+	writeErrCode(w, 429, "rate_limited", "rate limit exceeded")
 }
 
 // setRateLimitHeaders sets informational X-RateLimit headers for create/guess.

internal/api/ratelimit_test.go

@@ -166,8 +166,11 @@ func TestHighlightCode(t *testing.T) {
 	if plain != "<b>x</b>" {
 		t.Fatalf("plain escaping wrong: %q", plain)
 	}
-	// line count preserved (gutter alignment)
-	if got := len(splitLines(lang.HighlightCode("a\nb\nc", "go"))); got != 3 {
+	// #205: newline join preserved as the delimiter paste-lines.js splits on;
+	// per-line segments survive and the client joins with '' so no newline
+	// text node reaches the rendered DOM.
+	hl := lang.HighlightCode("a\nb\nc", "go")
+	if got := len(splitLines(hl)); got != 3 {
 		t.Fatalf("want 3 lines, got %d", got)
 	}
 }

internal/api/server.go

@@ -6,6 +6,7 @@ import (
 	"context"
 	"database/sql"
 	"encoding/json"
+	"errors"
 	"fmt"
 	"html/template"
 	"net/http"
@@ -51,6 +52,30 @@ func writeErr(w http.ResponseWriter, status int, msg string) {
 	writeJSON(w, status, map[string]string{"error": msg})
 }
 
+// writeErrCode emits a JSON error with a machine-readable code (#105): the
+// new-page JS maps known codes to plain-language messages, API consumers get
+// the stable `code` field alongside the human `error` text.
+func writeErrCode(w http.ResponseWriter, status int, code, msg string) {
+	writeJSON(w, status, map[string]string{"error": msg, "code": code})
+}
+
+// createErrCode maps a store.CreatePaste/CreateCan error to its UI error
+// code (#105).
+func createErrCode(err error) string {
+	switch {
+	case errors.Is(err, store.ErrSlugTaken):
+		return "slug_taken"
+	case errors.Is(err, store.ErrReservedSlug):
+		return "slug_reserved"
+	case errors.Is(err, store.ErrInvalidSlug):
+		return "slug_invalid"
+	case strings.Contains(err.Error(), "expires_in"):
+		return "expiry_invalid"
+	default:
+		return "invalid_request"
+	}
+}
+
 // Routes returns the HTTP handler for the server.
 func (a *apiServer) Routes() http.Handler {
 	return a.routes()
@@ -88,7 +113,8 @@ func (a *apiServer) routes() http.Handler {
 	r.Get("/can/{id}", a.handleCanPage)
 	r.Post("/can/{id}", a.handleCanPage)
 
-	// raw
+	// raw + #38 attachment serving
+	r.Get("/f/{aid}/{filename}", a.handleServeAttachment)
 	r.Get("/raw/{id}", a.handleRaw)
 
 	// web pages
@@ -103,8 +129,11 @@ func (a *apiServer) routes() http.Handler {
 	r.Get("/{id}", a.handlePasteView)
 	r.Post("/{id}", a.handlePasteView)
 
+// #173: missing paste URLs render the main UI with a friendly not-found
+// message instead of a bare JSON 404. Known routes (above) handle real pages;
+// anything else is a nonexistent paste ID or typo.
 r.NotFound(func(w http.ResponseWriter, r *http.Request) {
-		writeErr(w, 404, "not found")
+	a.webHandlers().HandleNotFoundPage(w, r)
 })
 	return r
 }
@@ -115,9 +144,12 @@ func viewerCookieMiddleware(next http.Handler) http.Handler {
 	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
 		if c, err := r.Cookie("vwr"); err != nil || c.Value == "" {
 			id := store.GenSlug(16)
+			// #138: Secure keeps the viewer id off plain-HTTP requests
+			// (all deployments are HTTPS-only behind traefik).
 			http.SetCookie(w, &http.Cookie{
 				Name: "vwr", Value: id, Path: "/",
-				MaxAge: 31536000, HttpOnly: true, SameSite: http.SameSiteLaxMode,
+				MaxAge: 31536000, HttpOnly: true, Secure: true,
+				SameSite: http.SameSiteLaxMode,
 			})
 			r.AddCookie(&http.Cookie{Name: "vwr", Value: id})
 			// remember that this cookie was minted here, not sent by the client
@@ -148,6 +180,16 @@ func viewerSentCookie(r *http.Request) bool {
 	return !minted
 }
 
+// #143: hand the deletion token to the creator's browser via a short-lived
+// HttpOnly cookie instead of the URL. The paste view reads it once to show
+// the one-time created banner; it expires after 60s.
+func setDeletionTokenCookie(w http.ResponseWriter, pasteID, token string) {
+	http.SetCookie(w, &http.Cookie{
+		Name: "tok_" + pasteID, Value: token, Path: "/",
+		MaxAge: 60, HttpOnly: true, SameSite: http.SameSiteLaxMode,
+	})
+}
+
 func (a *apiServer) handleCreatePaste(w http.ResponseWriter, r *http.Request) {
 	s := a.settings.get()
 	setRateLimitHeaders(w, 1, 5)
@@ -155,17 +197,26 @@ func (a *apiServer) handleCreatePaste(w http.ResponseWriter, r *http.Request) {
 		writeRateLimited(w, 1)
 		return
 	}
+	ct := r.Header.Get("Content-Type")
+	if strings.HasPrefix(ct, "multipart/form-data") {
+		a.handleCreatePasteMultipart(w, r, s) // #38: file attachment create
+		return
+	}
 	var p store.Paste
 	if err := json.NewDecoder(r.Body).Decode(&p); err != nil {
 		if isBodyTooLarge(err) { // #68: body cut off by MaxBytesReader
-			writeBodyTooLarge(w)
+			writeErrCode(w, http.StatusRequestEntityTooLarge, "content_too_large", "request body too large")
 			return
 		}
 		writeErr(w, 400, "invalid json body")
 		return
 	}
 	if status, msg := checkContent(p.Content, s.MaxContentBytes); status != 0 {
-		writeErr(w, status, msg)
+		if status == http.StatusRequestEntityTooLarge {
+			writeErrCode(w, status, "content_too_large", msg)
+		} else {
+			writeErrCode(w, status, "content_empty", msg)
+		}
 		return
 	}
 	// #86: bound free-form metadata at create time
@@ -203,9 +254,10 @@ func (a *apiServer) handleCreatePaste(w http.ResponseWriter, r *http.Request) {
 	p.ViewerID = currentViewerID(r)
 	created, err := a.store.CreatePaste(&p)
 	if err != nil {
-		writeErr(w, 400, err.Error())
+		writeErrCode(w, 400, createErrCode(err), err.Error())
 		return
 	}
+	setDeletionTokenCookie(w, created.ID, created.DeletionToken) // #143
 	writeJSON(w, 201, map[string]any{
 		"id":             created.ID,
 		"deletion_token": created.DeletionToken,
@@ -238,18 +290,17 @@ func (a *apiServer) handleGetPaste(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 	if row.PasswordHash.Valid {
-		// #81: every password verification (header, query param, or empty)
-		// goes through the same per-IP+paste unlock limiter as the POST form
-		// path, so brute-force via GET ?password= or X-Paste-Password gets 429.
+		// #81/#141: every password verification (header or empty) goes
+		// through the same per-IP+paste unlock limiter as the POST form
+		// path, so brute-force via X-Paste-Password gets 429. The
+		// ?password= query fallback was removed (#141): query strings
+		// leak into access logs, browser history, and Referer headers.
 		if !rateLimitUnlock(row.ID, r) {
 			writeRateLimited(w, 60)
 			return
 		}
 		// require password via header or query
 		pw := r.Header.Get("X-Paste-Password")
-		if pw == "" {
-			pw = r.URL.Query().Get("password")
-		}
 		if pw == "" || !store.CheckPassword(row.PasswordHash.String, pw) {
 			writeErr(w, 401, "password required")
 			return
@@ -264,11 +315,26 @@ func (a *apiServer) handleGetPaste(w http.ResponseWriter, r *http.Request) {
 	writeJSON(w, 200, map[string]any{
 		"id": row.ID, "content": row.Content, "content_type": row.ContentType,
 		"language": store.NullStrPtr(row.Language), "title": store.NullStrPtr(row.Title), "created_at": row.CreatedAt,
+		"type":     a.pasteTypeLabel(row),
 		"view_count": row.ViewCount, "visibility": row.Visibility,
 		"reads_remaining": rem,
 	})
 }
 
+// pasteTypeLabel computes the Type value for a single paste (#235): file
+// extension for attachment pastes, else the stored language, else "text".
+func (a *apiServer) pasteTypeLabel(row *store.PasteRow) string {
+	if att, err := a.store.GetAttachmentForPaste(row.ID); err == nil && att != nil {
+		if ext := attachmentExtName(att.Filename); ext != "" {
+			return ext
+		}
+	}
+	if !row.Language.Valid || row.Language.String == "" {
+		return "text"
+	}
+	return row.Language.String
+}
+
 func (a *apiServer) handleDeletePaste(w http.ResponseWriter, r *http.Request) {
 	id := chi.URLParam(r, "id")
 	row, err := a.store.GetPaste(id)
@@ -277,9 +343,10 @@ func (a *apiServer) handleDeletePaste(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 	// #63: deletion requires authorization. Either the deletion token issued
-	// at create time (Authorization header or ?token= query param, matching
-	// the create response's "deletion_token" field), or the creator browser
-	// itself (client-sent vwr cookie matching the paste's viewer, #37).
+	// at create time (Authorization header; #143 removed the ?token= query
+	// path so the bearer secret never lands in access logs or history), or
+	// the creator browser itself (client-sent vwr cookie matching the
+	// paste's viewer, #37).
 	if !a.deletionAuthorized(r, row) {
 		writeErr(w, 403, "deletion token required")
 		return
@@ -291,9 +358,11 @@ func (a *apiServer) handleDeletePaste(w http.ResponseWriter, r *http.Request) {
 	writeJSON(w, 200, map[string]string{"status": "soft-deleted"})
 }
 
-// deletionAuthorization extracts the deletion token from the request: the
-// Authorization header ("Bearer <t>", "Token <t>", or a bare token) or the
-// token query parameter. Returns "" when absent.
+// deletionAuthorization extracts the deletion token from the request:
+// the Authorization header ("Bearer <t>", "Token <t>", or a bare token).
+// The ?token= query parameter is deliberately NOT accepted (#143): URL
+// query strings end up in proxy access logs and browser history. Returns
+// "" when absent.
 func deletionAuthorization(r *http.Request) string {
 	if h := r.Header.Get("Authorization"); h != "" {
 		for _, prefix := range []string{"Bearer ", "Token "} {
@@ -303,7 +372,7 @@ func deletionAuthorization(r *http.Request) string {
 		}
 		return strings.TrimSpace(h)
 	}
-	return r.URL.Query().Get("token")
+	return ""
 }
 
 // deletionAuthorized reports whether the request may soft-delete the paste:
@@ -322,6 +391,33 @@ func (a *apiServer) deletionAuthorized(r *http.Request, row *store.PasteRow) boo
 		row.ViewerID.String != "" && row.ViewerID.String == vid
 }
 
+// displayType returns the Type-column value for a list row (#235): the file
+// extension for attachment pastes, otherwise the detected language (default
+// "text").
+func displayType(lang *string, attFilename string) string {
+	if ext := attachmentExtName(attFilename); ext != "" {
+		return ext
+	}
+	if lang == nil || *lang == "" {
+		return "text"
+	}
+	return *lang
+}
+
+// attachmentExtName returns the lowercase extension (without dot) of a
+// filename, or "" when there is none.
+func attachmentExtName(filename string) string {
+	name := filename
+	if i := strings.LastIndexByte(name, '/'); i >= 0 {
+		name = name[i+1:]
+	}
+	i := strings.LastIndexByte(name, '.')
+	if i <= 0 || i == len(name)-1 {
+		return ""
+	}
+	return strings.ToLower(name[i+1:])
+}
+
 // handleListMine serves /api/mine: pastes created from this browser (#37).
 func (a *apiServer) handleListMine(w http.ResponseWriter, r *http.Request) {
 	vid := currentViewerID(r)
@@ -340,7 +436,7 @@ func (a *apiServer) handleListMine(w http.ResponseWriter, r *http.Request) {
 	for _, row := range rows {
 		lang, title := store.NullStrPtr(row.Language), store.NullStrPtr(row.Title)
 		items = append(items, map[string]any{
-			"id": row.ID, "title": title, "language": lang,
+			"id": row.ID, "title": title, "language": lang, "type": displayType(lang, row.AttFilename),
 			"created_at": row.CreatedAt, "view_count": row.ViewCount, "size": row.Size,
 			"custom_slug": store.NullStrPtr(row.CustomSlug), "visibility": row.Visibility,
 			"is_can": row.IsCan,
@@ -361,7 +457,7 @@ func (a *apiServer) handleListPublic(w http.ResponseWriter, r *http.Request) {
 	for _, row := range rows {
 		lang, title := store.NullStrPtr(row.Language), store.NullStrPtr(row.Title)
 		items = append(items, map[string]any{
-			"id": row.ID, "title": title, "language": lang,
+			"id": row.ID, "title": title, "language": lang, "type": displayType(lang, row.AttFilename),
 			"created_at": row.CreatedAt, "view_count": row.ViewCount, "size": row.Size,
 			"custom_slug": store.NullStrPtr(row.CustomSlug),
 			"is_can":      row.IsCan,
@@ -397,6 +493,22 @@ func (a *apiServer) handleRaw(w http.ResponseWriter, r *http.Request) {
 		http.Error(w, "not found", 404)
 		return
 	}
+	// #221: raw view of an image paste serves the image bytes themselves as
+	// an image, not the (empty) text content.
+	if att, err := a.store.GetAttachmentForPaste(row.ID); err == nil && att != nil && isImageMime(att.Mime) {
+		blobs := a.store.Blobs()
+		if blobs != nil {
+			if blob, err := blobs.Get(row.ID + "/" + att.SHA256); err == nil {
+				defer blob.Close()
+				a.store.IncrementViews(row.ID, "", 0) // raw views always count (#49/#95)
+				w.Header().Set("Content-Type", att.Mime)
+				w.Header().Set("X-Content-Type-Options", "nosniff")
+				w.Header().Set("Content-Length", fmt.Sprintf("%d", att.Size))
+				http.ServeContent(w, r, "", time.Unix(att.CreatedAt, 0), blob)
+				return
+			}
+		}
+	}
 	// #34: content_type is attacker-controlled via the create API. Serving it
 	// verbatim let a paste be stored with text/html (or image/svg+xml) and
 	// render as active content on this origin when fetched from /raw —

internal/api/validate.go

@@ -18,6 +18,10 @@ import (
 func (a *apiServer) maxRequestBody() int64 {
 	s := a.settings.get()
 	max := s.MaxContentBytes + 4096
+	// #38: multipart create carries up to one 25 MB file plus overhead
+	if a.cfg.MaxItemBytes+1<<20 > max {
+		max = a.cfg.MaxItemBytes + 1<<20
+	}
 	if max < 64*1024 {
 		max = 64 * 1024
 	}

internal/lang/highlight.go

@@ -146,5 +146,9 @@ func HighlightCode(content, langID string) string {
 	for i, line := range lines {
 		out[i] = highlightLine(line, h, langID)
 	}
+	// Note: lines are joined with "\n" on purpose — paste-lines.js splits on
+	// the newline to build its per-line .codeline blocks, then joins those
+	// with "" and strips whitespace-only text nodes (#205), so no newline
+	// text node ever reaches the rendered DOM.
 	return strings.Join(out, "\n")
 }

internal/store/attachment.go

@@ -0,0 +1,147 @@
+package store
+
+import (
+	"crypto/sha256"
+	"database/sql"
+	"errors"
+	"fmt"
+	"path/filepath"
+	"strings"
+	"time"
+)
+
+// #38: file attachments, one file per paste (iteration 1). A paste either
+// has text content OR one attached file. Bytes live in the BlobStore; this
+// table carries the metadata.
+
+type Attachment struct {
+	ID        string `json:"id"`
+	PasteID   string `json:"paste_id"`
+	Filename  string `json:"filename"`
+	Mime      string `json:"mime"`
+	Size      int64  `json:"size"`
+	SHA256    string `json:"sha256"`
+	CreatedAt int64  `json:"created_at"`
+
+	SizeHuman string `json:"-"` // template-only: human-readable size
+}
+
+const MaxFilenameLen = 255
+
+// ErrFileTooLarge is returned when an attachment exceeds the per-file cap.
+var ErrFileTooLarge = errors.New("file too large")
+
+// SanitizeFilename cleans a user-supplied filename: strips directory
+// components, control chars, and caps at 255 bytes. The extension is never
+// trusted for mime decisions (mime is sniffed server-side).
+func SanitizeFilename(name string) string {
+	name = filepath.Base(strings.ReplaceAll(name, "\\", "/"))
+	name = strings.TrimSpace(name)
+	var b strings.Builder
+	for _, r := range name {
+		if r < 32 || r == 127 {
+			continue
+		}
+		b.WriteRune(r)
+	}
+	name = b.String()
+	if len(name) > MaxFilenameLen {
+		runes := []rune(name)
+		for len(string(runes)) > MaxFilenameLen {
+			runes = runes[:len(runes)-1]
+		}
+		name = string(runes)
+	}
+	if name == "" || name == "." || name == ".." {
+		name = "file"
+	}
+	return name
+}
+
+// CreateAttachment stores the file bytes and inserts the attachments row.
+// The mime MUST already be sniffed server-side (http.DetectContentType by
+// the caller); it is never taken from the client.
+func (s *Store) CreateAttachment(a *Attachment, r interface{ Read([]byte) (int, error) }, blobs BlobStore) error {
+	pasteID := a.PasteID
+	sha, size, err := blobs.Put(pasteID+"/pending", r)
+	if err != nil {
+		return err
+	}
+	if a.Size > 0 && size > a.Size {
+		// caller-provided pre-check limit; treat as too large
+		blobs.Delete(pasteID + "/" + sha)
+		return ErrFileTooLarge
+	}
+	a.SHA256 = sha
+	a.Size = size
+	now := time.Now().Unix()
+	id := genSlug(20)
+	_, err = s.db.Exec(`INSERT INTO attachments (id, paste_id, filename, mime, size, sha256, created_at)
+		VALUES (?,?,?,?,?,?,?)`, id, pasteID, a.Filename, a.Mime, size, sha, now)
+	if err != nil {
+		blobs.Delete(pasteID + "/" + sha)
+		return err
+	}
+	a.ID = id
+	a.CreatedAt = now
+	return nil
+}
+
+// GetAttachment returns the attachment row for a paste, or nil.
+// One file per paste (iteration 1), so a single-row lookup keyed on paste.
+func (s *Store) GetAttachmentForPaste(pasteID string) (*Attachment, error) {
+	row := s.db.QueryRow(`SELECT id, paste_id, filename, mime, size, sha256, created_at
+		FROM attachments WHERE paste_id = ? ORDER BY created_at ASC LIMIT 1`, pasteID)
+	return scanAttachment(row)
+}
+
+func (s *Store) GetAttachment(id string) (*Attachment, error) {
+	row := s.db.QueryRow(`SELECT id, paste_id, filename, mime, size, sha256, created_at
+		FROM attachments WHERE id = ?`, id)
+	return scanAttachment(row)
+}
+
+func scanAttachment(row *sql.Row) (*Attachment, error) {
+	var a Attachment
+	err := row.Scan(&a.ID, &a.PasteID, &a.Filename, &a.Mime, &a.Size, &a.SHA256, &a.CreatedAt)
+	if err == sql.ErrNoRows {
+		return nil, nil
+	}
+	if err != nil {
+		return nil, err
+	}
+	a.SizeHuman = humanBytes(a.Size)
+	return &a, nil
+}
+
+// humanBytes formats a byte count for display (KB/MB).
+func humanBytes(n int64) string {
+	switch {
+	case n >= 1<<20:
+		return fmt.Sprintf("%.1f MB", float64(n)/(1<<20))
+	case n >= 1<<10:
+		return fmt.Sprintf("%.1f KB", float64(n)/(1<<10))
+	default:
+		return fmt.Sprintf("%d B", n)
+	}
+}
+
+// DeleteAttachment removes the row and its blob.
+func (s *Store) DeleteAttachment(a *Attachment, blobs BlobStore) error {
+	blobs.Delete(a.PasteID + "/" + a.SHA256)
+	_, err := s.db.Exec(`DELETE FROM attachments WHERE id = ?`, a.ID)
+	return err
+}
+
+// HasAttachment reports whether a paste already carries a file (#38: one file per paste).
+func (s *Store) HasAttachment(pasteID string) bool {
+	var n int
+	s.db.QueryRow(`SELECT COUNT(*) FROM attachments WHERE paste_id = ?`, pasteID).Scan(&n)
+	return n > 0
+}
+
+// HashBytes is a small helper used by handlers to name/verify blobs.
+func HashBytes(b []byte) string {
+	h := sha256.Sum256(b)
+	return string(h[:])
+}

internal/store/blob.go

@@ -0,0 +1,139 @@
+package store
+
+import (
+	"crypto/sha256"
+	"encoding/hex"
+	"errors"
+	"fmt"
+	"io"
+	"os"
+	"path/filepath"
+	"strings"
+)
+
+// #38: blob storage abstraction. Files live outside SQLite on the data
+// volume behind this interface so a MinIO/S3 backend can replace the fs
+// implementation later without touching handlers or the UI.
+
+// ErrBlobNotFound is returned by Get/Stat when the key does not exist.
+var ErrBlobNotFound = errors.New("blob not found")
+
+// BlobStore persists attachment bytes by key.
+type BlobStore interface {
+	Put(key string, r io.Reader) (sha string, size int64, err error)
+	Get(key string) (io.ReadSeekCloser, error)
+	Delete(key string) error
+	Stat(key string) (int64, error)
+}
+
+// FsBlobStore is the filesystem implementation: blobs are stored under
+// root/<key>, where key is "<paste-id>/<sha256-hex>" (see SanitizeBlobKey).
+type FsBlobStore struct {
+	root string
+}
+
+// NewFsBlobStore creates the blob root directory.
+func NewFsBlobStore(root string) (*FsBlobStore, error) {
+	if err := os.MkdirAll(root, 0o700); err != nil {
+		return nil, err
+	}
+	return &FsBlobStore{root: root}, nil
+}
+
+// SanitizeBlobKey validates a blob key and returns the safe on-disk path
+// under root. Keys must be exactly "<paste-id>/<sha256-hex>"; anything with
+// separators outside that shape, "..", or absolute paths is rejected, so a
+// crafted key can never escape the blob root (traversal).
+func (f *FsBlobStore) path(key string) (string, error) {
+	clean := filepath.ToSlash(key)
+	parts := strings.Split(clean, "/")
+	if len(parts) != 2 || parts[0] == "" || parts[1] == "" ||
+		parts[0] == "." || parts[0] == ".." || parts[1] == "." || parts[1] == ".." {
+		return "", fmt.Errorf("invalid blob key %q", key)
+	}
+	return filepath.Join(f.root, filepath.FromSlash(clean)), nil
+}
+
+func (f *FsBlobStore) Put(key string, r io.Reader) (string, int64, error) {
+	dst, err := f.path(key)
+	if err != nil {
+		return "", 0, err
+	}
+	if err := os.MkdirAll(filepath.Dir(dst), 0o700); err != nil {
+		return "", 0, err
+	}
+	h := sha256.New()
+	tmp := dst + ".tmp"
+	out, err := os.OpenFile(tmp, os.O_CREATE|os.O_WRONLY|os.O_TRUNC, 0o600)
+	if err != nil {
+		return "", 0, err
+	}
+	size, err := io.Copy(io.MultiWriter(out, h), r)
+	if cerr := out.Close(); err == nil {
+		err = cerr
+	}
+	if err != nil {
+		os.Remove(tmp)
+		return "", 0, err
+	}
+	sha := hex.EncodeToString(h.Sum(nil))
+	// The caller-supplied key must match the content hash; rename to the
+	// canonical "<paste-id>/<sha256>" path so keys are always content-derived.
+	canonical, err := f.path(key[:strings.IndexByte(key, '/')] + "/" + sha)
+	if err != nil {
+		os.Remove(tmp)
+		return "", 0, err
+	}
+	if err := os.MkdirAll(filepath.Dir(canonical), 0o700); err != nil {
+		os.Remove(tmp)
+		return "", 0, err
+	}
+	if err := os.Rename(tmp, canonical); err != nil {
+		os.Remove(tmp)
+		return "", 0, err
+	}
+	return sha, size, nil
+}
+
+func (f *FsBlobStore) Get(key string) (io.ReadSeekCloser, error) {
+	dst, err := f.path(key)
+	if err != nil {
+		return nil, err
+	}
+	file, err := os.Open(dst)
+	if os.IsNotExist(err) {
+		return nil, ErrBlobNotFound
+	}
+	return file, err
+}
+
+func (f *FsBlobStore) Delete(key string) error {
+	dst, err := f.path(key)
+	if err != nil {
+		return err
+	}
+	err = os.Remove(dst)
+	if os.IsNotExist(err) {
+		return ErrBlobNotFound
+	}
+	if err == nil {
+		// best-effort cleanup of the now-empty paste directory
+		os.Remove(filepath.Dir(dst))
+	}
+	return err
+}
+
+func (f *FsBlobStore) Stat(key string) (int64, error) {
+	dst, err := f.path(key)
+	if err != nil {
+		return 0, err
+	}
+	fi, err := os.Stat(dst)
+	if os.IsNotExist(err) {
+		return 0, ErrBlobNotFound
+	}
+	if err != nil {
+		return 0, err
+	}
+	return fi.Size(), nil
+}

internal/store/blob_test.go

@@ -0,0 +1,108 @@
+package store
+
+import (
+	"strings"
+	"testing"
+)
+
+func testBlobs(t *testing.T) *FsBlobStore {
+	t.Helper()
+	b, err := NewFsBlobStore(t.TempDir() + "/files")
+	if err != nil {
+		t.Fatal(err)
+	}
+	return b
+}
+
+func TestBlobPutGetStatDeleteRoundtrip(t *testing.T) {
+	b := testBlobs(t)
+	data := []byte("hello attachment world")
+	sha, size, err := b.Put("abc123/pending", strings.NewReader(string(data)))
+	if err != nil {
+		t.Fatal(err)
+	}
+	if size != int64(len(data)) {
+		t.Fatalf("size = %d want %d", size, len(data))
+	}
+	if len(sha) != 64 {
+		t.Fatalf("sha256 = %q", sha)
+	}
+	// canonical key is <paste-id>/<sha256>
+	got, err := b.Get("abc123/" + sha)
+	if err != nil {
+		t.Fatal(err)
+	}
+	buf := make([]byte, len(data)+10)
+	n, _ := got.Read(buf)
+	got.Close()
+	if string(buf[:n]) != string(data) {
+		t.Fatalf("roundtrip mismatch: %q", buf[:n])
+	}
+	sz, err := b.Stat("abc123/" + sha)
+	if err != nil || sz != int64(len(data)) {
+		t.Fatalf("stat = %d, %v", sz, err)
+	}
+	if err := b.Delete("abc123/" + sha); err != nil {
+		t.Fatalf("delete: %v", err)
+	}
+	if _, err := b.Get("abc123/" + sha); err != ErrBlobNotFound {
+		t.Fatalf("get after delete: %v", err)
+	}
+}
+
+func TestBlobStatMissing(t *testing.T) {
+	b := testBlobs(t)
+	if _, err := b.Stat("nope/deadbeef"); err != ErrBlobNotFound {
+		t.Fatalf("want ErrBlobNotFound, got %v", err)
+	}
+}
+
+func TestBlobTraversalPrevention(t *testing.T) {
+	b := testBlobs(t)
+	evil := []string{
+		"../../etc/passwd",
+		"../escape",
+		"..\\windows",
+		"/abs/path",
+		"a/b/c",           // too many segments
+		"onlyone",         // no slash
+		"./relative",      // dot segment
+		"../..",           // bare traversal
+		"ok/../traverse",  // traversal inside
+	}
+	for _, key := range evil {
+		if _, _, err := b.Put(key, strings.NewReader("x")); err == nil {
+			t.Errorf("Put accepted evil key %q", key)
+		}
+		if _, err := b.Get(key); err == nil {
+			t.Errorf("Get accepted evil key %q", key)
+		}
+		if err := b.Delete(key); err == nil {
+			t.Errorf("Delete accepted evil key %q", key)
+		}
+	}
+}
+
+func TestSanitizeFilename(t *testing.T) {
+	cases := [][2]string{
+		{"../../etc/passwd", "passwd"},
+		{"C:\\Users\\evil\\file.txt", "file.txt"},
+		{"normal.txt", "normal.txt"},
+		{"a<b>c", "a<b>c"},
+		{"", "file"},
+		{"..", "file"},
+		{".hidden", ".hidden"},
+		{"with\x00null.txt", "withnull.txt"},
+		{"new\nline.txt", "newline.txt"},
+	}
+	for _, c := range cases {
+		got := SanitizeFilename(c[0])
+		if got != c[1] {
+			t.Errorf("SanitizeFilename(%q) = %q want %q", c[0], got, c[1])
+		}
+	}
+	long := strings.Repeat("x", 300)
+	if got := SanitizeFilename(long); len(got) != MaxFilenameLen {
+		t.Errorf("long name len = %d want %d", len(got), MaxFilenameLen)
+	}
+}

internal/store/customslug.go

@@ -13,6 +13,7 @@ var reservedSlugs = map[string]bool{
 	"api": true, "raw": true, "can": true, "cans": true, "public": true,
 	"history": true, "static": true, "assets": true, "favicon.ico": true,
 	"new": true, "login": true, "logout": true, "admin": true, "settings": true,
+	"mine": true, "unlock": true, "guess": true, "f": true,
 }
 
 var ErrInvalidSlug = errors.New("custom slug must be 1-64 chars: letters, digits, dash, underscore; must start with letter or digit")

internal/store/store.go

@@ -63,6 +63,7 @@ type PasteRow struct {
 	DeletionToken sql.NullString
 	ViewerID      sql.NullString
 	IsCan         bool // set on list rows that are cans (#4)
+	AttFilename   string // attachment filename when the paste is a file paste (#235); empty otherwise
 }
 
 type CanRow struct {
@@ -79,6 +80,7 @@ type CanRow struct {
 
 type Store struct {
 	db   *sql.DB
+	blob BlobStore // #38: attachment byte storage (nil in some unit tests)
 }
 
 func OpenStore(path string) (*Store, error) {
@@ -95,6 +97,12 @@ func OpenStore(path string) (*Store, error) {
 	if err := s.migrate(); err != nil {
 		return nil, err
 	}
+	// #38: attachment blobs live beside the database under <db>.files
+	blobs, err := NewFsBlobStore(path + ".files")
+	if err != nil {
+		return nil, err
+	}
+	s.blob = blobs
 	return s, nil
 }
 
@@ -142,9 +150,26 @@ deletion_token TEXT
 		last_viewed INTEGER NOT NULL,
 		PRIMARY KEY (paste_id, viewer_id)
 	)`) // #49: per-viewer read dedupe window
+	// #38: file attachments, one per paste in iteration 1. mime is sniffed
+	// server-side before insert; bytes live in the BlobStore keyed
+	// <paste_id>/<sha256>.
+	s.db.Exec(`CREATE TABLE IF NOT EXISTS attachments (
+		id         TEXT PRIMARY KEY,
+		paste_id   TEXT NOT NULL,
+		filename   TEXT NOT NULL,
+		mime       TEXT NOT NULL,
+		size       INTEGER NOT NULL,
+		sha256     TEXT NOT NULL,
+		created_at INTEGER NOT NULL
+	)`)
+	s.db.Exec(`CREATE INDEX IF NOT EXISTS idx_attachments_paste ON attachments(paste_id)`)
 	return err
 }
 
+// Blobs returns the attachment blob store (nil when unavailable, e.g. some
+// unit-test stores).
+func (s *Store) Blobs() BlobStore { return s.blob }
+
 // SlugAlphabet is the paste-id charset (no ambiguous chars).
 var SlugAlphabet = "23456789abcdefghjkmnpqrstuvwxyz"
 
@@ -211,13 +236,17 @@ func (s *Store) CreatePaste(p *Paste) (*Paste, error) {
 		}
 	}
 
-	// #49: burn-after-read pastes carry a read budget (default 1 read)
-	if p.BurnAfterRead {
+	// #49/#82: burn-after-read pastes carry a read budget (default 1 read).
+	// burn_after_reads > 0 alone implies burn mode even without burn_after_read.
+	if p.BurnAfterRead || (p.BurnAfterReads != nil && *p.BurnAfterReads > 0) {
 		limit := int64(1)
 		if p.BurnAfterReads != nil && *p.BurnAfterReads > 0 {
 			limit = int64(*p.BurnAfterReads)
 		}
 		p.readsLimit = &limit
+		if !p.BurnAfterRead {
+			p.BurnAfterRead = true
+		}
 	}
 
 	visibility := p.Visibility
@@ -276,11 +305,12 @@ func (s *Store) GetPaste(idOrSlug string) (*PasteRow, error) {
 // listed, and password-protected pastes are excluded at the query level
 // (#65) so their metadata (title, slug, existence) never leaks.
 func (s *Store) ListPublic(limit, offset int) ([]PasteRow, int, error) {
-	rows, err := s.db.Query(`SELECT id, custom_slug, content_type, language, title, visibility, created_at, view_count, LENGTH(content), 0
-		FROM pastes
-		WHERE visibility='public' AND deleted_at IS NULL AND can_id IS NULL AND password_hash IS NULL AND (expires_at IS NULL OR expires_at > ?)
+	rows, err := s.db.Query(`SELECT p.id, p.custom_slug, p.content_type, p.language, p.title, p.visibility, p.created_at, p.view_count, LENGTH(p.content), 0, COALESCE(a.filename, '')
+		FROM pastes p
+		LEFT JOIN attachments a ON a.paste_id = p.id
+		WHERE p.visibility='public' AND p.deleted_at IS NULL AND p.can_id IS NULL AND p.password_hash IS NULL AND (p.expires_at IS NULL OR p.expires_at > ?)
 		UNION ALL
-		SELECT id, NULL, 'text/plain', NULL, title, visibility, created_at, 0, 0, 1
+		SELECT id, NULL, 'text/plain', NULL, title, visibility, created_at, 0, 0, 1, ''
 		FROM paste_cans
 		WHERE visibility='public' AND deleted_at IS NULL AND (expires_at IS NULL OR expires_at > ?)
 		ORDER BY created_at DESC LIMIT ? OFFSET ?`, time.Now().Unix(), time.Now().Unix(), limit, offset)
@@ -293,7 +323,7 @@ func (s *Store) ListPublic(limit, offset int) ([]PasteRow, int, error) {
 		var r PasteRow
 		var cs, lang, title sql.NullString
 		var isCan int
-		if err := rows.Scan(&r.ID, &cs, &r.ContentType, &lang, &title, &r.Visibility, &r.CreatedAt, &r.ViewCount, &r.Size, &isCan); err != nil {
+		if err := rows.Scan(&r.ID, &cs, &r.ContentType, &lang, &title, &r.Visibility, &r.CreatedAt, &r.ViewCount, &r.Size, &isCan, &r.AttFilename); err != nil {
 			return nil, 0, err
 		}
 		r.CustomSlug = cs
@@ -311,11 +341,12 @@ func (s *Store) ListPublic(limit, offset int) ([]PasteRow, int, error) {
 
 // ListMine lists pastes created from the given viewer id (browser cookie), newest first.
 func (s *Store) ListMine(viewerID string, limit, offset int) ([]PasteRow, int, error) {
-	rows, err := s.db.Query(`SELECT id, custom_slug, language, title, visibility, created_at, view_count, LENGTH(content), 0
-		FROM pastes
-		WHERE viewer_id = ? AND deleted_at IS NULL AND can_id IS NULL AND (expires_at IS NULL OR expires_at > ?)
+	rows, err := s.db.Query(`SELECT p.id, p.custom_slug, p.language, p.title, p.visibility, p.created_at, p.view_count, LENGTH(p.content), 0, COALESCE(a.filename, '')
+		FROM pastes p
+		LEFT JOIN attachments a ON a.paste_id = p.id
+		WHERE p.viewer_id = ? AND p.deleted_at IS NULL AND p.can_id IS NULL AND (p.expires_at IS NULL OR p.expires_at > ?)
 		UNION ALL
-		SELECT id, NULL, NULL, title, visibility, created_at, 0, 0, 1
+		SELECT id, NULL, NULL, title, visibility, created_at, 0, 0, 1, ''
 		FROM paste_cans
 		WHERE viewer_id = ? AND deleted_at IS NULL AND (expires_at IS NULL OR expires_at > ?)
 		ORDER BY created_at DESC LIMIT ? OFFSET ?`, viewerID, time.Now().Unix(), viewerID, time.Now().Unix(), limit, offset)
@@ -328,7 +359,7 @@ func (s *Store) ListMine(viewerID string, limit, offset int) ([]PasteRow, int, e
 		var r PasteRow
 		var cs, lang, title sql.NullString
 		var isCan int
-		if err := rows.Scan(&r.ID, &cs, &lang, &title, &r.Visibility, &r.CreatedAt, &r.ViewCount, &r.Size, &isCan); err != nil {
+		if err := rows.Scan(&r.ID, &cs, &lang, &title, &r.Visibility, &r.CreatedAt, &r.ViewCount, &r.Size, &isCan, &r.AttFilename); err != nil {
 			return nil, 0, err
 		}
 		r.CustomSlug, r.Language, r.Title = cs, lang, title

internal/web/csp_noinline_test.go

@@ -0,0 +1,56 @@
+package web
+
+import (
+	"embed"
+	"io/fs"
+	"regexp"
+	"strings"
+	"testing"
+)
+
+// #139 regression guards: with CSP script-src/style-src 'self' (no
+// 'unsafe-inline'), the templates must not carry inline <script> blocks or
+// style="" attributes, and the external scripts referenced must exist.
+func TestNoInlineScripts(t *testing.T) {
+	entries, err := fs.ReadDir(tmplFS, "templates")
+	if err != nil {
+		t.Fatal(err)
+	}
+	re := regexp.MustCompile(`(?s)<script[^>]*>.*?</script>`)
+	srcOnly := regexp.MustCompile(`<script[^>]+src=`)
+	for _, e := range entries {
+		b, err := fs.ReadFile(tmplFS, "templates/"+e.Name())
+		if err != nil {
+			t.Fatal(err)
+		}
+		for _, m := range re.FindAll(b, -1) {
+			if srcOnly.Match(m) {
+				continue // external script tag with src: fine
+			}
+			t.Errorf("%s: inline <script> block found (CSP #139): %q", e.Name(), string(m[:60]))
+		}
+		if strings.Contains(string(b), " onclick=") || strings.Contains(string(b), "onload=") {
+			t.Errorf("%s: inline event handler attribute found (CSP #139)", e.Name())
+		}
+		if strings.Contains(string(b), "style=\"") {
+			t.Errorf("%s: inline style attribute found (CSP #139)", e.Name())
+		}
+	}
+}
+
+func TestReferencedStaticScriptsExist(t *testing.T) {
+	entries, _ := fs.ReadDir(tmplFS, "templates")
+	var staticFiles embed.FS = staticFS
+	for _, e := range entries {
+		b, err := fs.ReadFile(tmplFS, "templates/"+e.Name())
+		if err != nil {
+			t.Fatal(err)
+		}
+		for _, m := range regexp.MustCompile(`<script src="/static/([^"]+)"`).FindAllSubmatch(b, -1) {
+			name := string(m[1])
+			if _, err := fs.ReadFile(staticFiles, "static/"+name); err != nil {
+				t.Errorf("%s references /static/%s: %v", e.Name(), name, err)
+			}
+		}
+	}
+}

internal/web/securityheaders_test.go

@@ -16,7 +16,7 @@ func TestSecurityHeaders(t *testing.T) {
 	h := SecurityHeaders(pages)
 	rec := httptest.NewRecorder()
 	h.ServeHTTP(rec, httptest.NewRequest("GET", "/", nil))
-	wantCSP := "default-src 'self'; script-src 'self' 'unsafe-inline'; frame-ancestors 'none'"
+	wantCSP := "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; frame-ancestors 'none'"
 	if got := rec.Header().Get("Content-Security-Policy"); got != wantCSP {
 		t.Errorf("CSP = %q, want %q", got, wantCSP)
 	}

internal/web/static/admin.js

@@ -0,0 +1,74 @@
+// #99/#139: admin lock + settings panel. Key lives in sessionStorage for this visit only.
+(function () {
+  var KEY = 'palette_admin_key';
+  var keyInput = document.getElementById('admin-key');
+  var status = document.getElementById('admin-key-status');
+  var panel = document.getElementById('admin-panel');
+
+  function key() { return sessionStorage.getItem(KEY) || ''; }
+
+  function api(path, opts) {
+    opts = opts || {};
+    // allow callers to override the key header (e.g. validating a typed key, #99)
+    opts.headers = Object.assign({ 'X-Admin-Key': key() }, opts.headers || {});
+    if (opts.body) opts.headers['Content-Type'] = 'application/json';
+    return fetch(path, opts);
+  }
+
+  function loadSettings() {
+    api('/admin/api/settings').then(function (r) {
+      if (r.status !== 200) { showLock(); return; }
+      return r.json();
+    }).then(function (s) {
+      if (!s) return;
+      document.getElementById('rl-burst').value = s.rate_limit_burst;
+      document.getElementById('rl-refill').value = s.rate_limit_per_minute;
+      document.getElementById('max-content').value = s.max_content_bytes;
+      document.getElementById('default-expiry').value = s.default_expiry;
+      document.getElementById('slug-days').value = s.custom_slug_reservation_days;
+      document.getElementById('burn-window').value = s.burn_viewer_window_minutes;
+      panel.classList.remove('hidden');
+    });
+  }
+
+  function showLock() {
+    panel.classList.add('hidden');
+    sessionStorage.removeItem(KEY);
+  }
+
+  document.getElementById('admin-key-form').addEventListener('submit', function (e) {
+    e.preventDefault();
+    // #99: don't persist the key until the server accepts it
+    api('/admin/api/settings', { headers: { 'X-Admin-Key': keyInput.value } }).then(function (r) {
+      if (r.status === 200) {
+        sessionStorage.setItem(KEY, keyInput.value);
+        status.textContent = '✓';
+        keyInput.value = '';
+        loadSettings();
+      } else {
+        status.textContent = 'invalid key';
+        showLock();
+      }
+    });
+  });
+
+  document.getElementById('admin-settings-form').addEventListener('submit', function (e) {
+    e.preventDefault();
+    var body = {
+      rate_limit_burst: parseFloat(document.getElementById('rl-burst').value),
+      rate_limit_per_minute: parseFloat(document.getElementById('rl-refill').value),
+      max_content_bytes: parseInt(document.getElementById('max-content').value, 10),
+      default_expiry: document.getElementById('default-expiry').value,
+      custom_slug_reservation_days: parseInt(document.getElementById('slug-days').value, 10),
+      burn_viewer_window_minutes: parseInt(document.getElementById('burn-window').value, 10)
+    };
+    api('/admin/api/settings', { method: 'POST', body: JSON.stringify(body) }).then(function (r) {
+      document.getElementById('admin-save-status').textContent = r.status === 200 ? 'saved' : 'error';
+      if (r.status !== 200) showLock();
+    });
+  });
+
+  // #112: always show the lock on fresh load — do not auto-restore the
+  // panel from a stale sessionStorage key. The key is only written after a
+  // successful unlock (above) so in-page actions still work within this visit.
+})();

internal/web/static/app.css

@@ -4,6 +4,8 @@
   --muted: #7A6A9E; --muted-fg: #C0B2DE; --fg: #F2EDF8;
   --accent: #C4A8F0; --border: #42355C;
   --radius-lg: 20px; --radius: 10px; --radius-sm: 999px;
+  --chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C8C8D4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* #136: select chevron stroke (dark presets) */
+  --chevron-fg: #C8C8D4;
   --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   --font-mono: ui-monospace, "JetBrains Mono", "Fira Code", monospace;
 }
@@ -18,6 +20,8 @@
   --accent: #7A7796; --border: #DAD7E6;
   --ok: #456F45; --warn: #7A5E1B; --err: #9E4054;
   --on-accent: #F6F5FA;
+  --chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23555560' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* #136: light presets use a dark stroke */
+  --chevron-fg: #555560;
 }
 [data-preset="pastel-lavender"] {
   --bg: #e6e0f5; --surface: #f1edfa; --surface-2: #cbb8e7;
@@ -25,6 +29,8 @@
   --accent: #806bb8; --border: #c4b6e0;
   --ok: #3E6B3E; --warn: #7A5E1B; --err: #9E4054;
   --on-accent: #f1edfa;
+  --chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23555560' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* #136: light presets use a dark stroke */
+  --chevron-fg: #555560;
 }
 [data-preset="pastel-peach"] {
   --bg: #ffe0d6; --surface: #fff0ea; --surface-2: #ffc4a8;
@@ -32,6 +38,8 @@
   --accent: #f9826c; --border: #ffc9b5;
   --ok: #3E6B3E; --warn: #7A5E1B; --err: #9E4054;
   --on-accent: #4F2318;
+  --chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23555560' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* #136: light presets use a dark stroke */
+  --chevron-fg: #555560;
 }
 [data-preset="pastel-cloud"] {
   --bg: #fff0f6; --surface: #fff7fb; --surface-2: #ffc8dd;
@@ -39,6 +47,51 @@
   --accent: #a2d2ff; --border: #ffccd9;
   --ok: #3E6B3E; --warn: #7A5E1B; --err: #9E4054;
   --on-accent: #274a6b;
+  --chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23555560' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* #136: light presets use a dark stroke */
+  --chevron-fg: #555560;
+}
+/* matching light/dark counterparts: same hue family, flipped lightness roles */
+/* Midnight Light: light counterpart of midnight (violet family) */
+[data-preset="midnight-light"] {
+  --bg: #F3EFF9; --surface: #FAF8FD; --surface-2: #E1D9EF;
+  --muted: #A99CC9; --muted-fg: #5F5390; --fg: #2B2140;
+  --accent: #7B5FC0; --border: #D8CEEC;
+  --ok: #3E6B3E; --warn: #7A5E1B; --err: #9E4054;
+  --on-accent: #FAF8FD;
+  --chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23555560' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* #136: light presets use a dark stroke */
+  --chevron-fg: #555560;
+}
+/* Smooth Dark: dark counterpart of smooth (muted slate-violet family) */
+[data-preset="smooth-dark"] {
+  --bg: #23222E; --surface: #2C2B3A; --surface-2: #3B3A4D;
+  --muted: #7A7796; --muted-fg: #B5B1C9; --fg: #E8E7F0;
+  --accent: #A9A6C4; --border: #45435A;
+  --ok: #9CD49C; --warn: #E8C77B; --err: #F2A3B3;
+  --on-accent: #23222E;
+}
+/* Pastel Lavender Dark: dark counterpart (lavender family) */
+[data-preset="pastel-lavender-dark"] {
+  --bg: #2A2340; --surface: #352C50; --surface-2: #4A3E6B;
+  --muted: #8F7FB8; --muted-fg: #CBBEE8; --fg: #EFEAF8;
+  --accent: #B39DE4; --border: #4E4272;
+  --ok: #9CD49C; --warn: #E8C77B; --err: #F2A3B3;
+  --on-accent: #2A2340;
+}
+/* Pastel Peach Dark: dark counterpart (peach family) */
+[data-preset="pastel-peach-dark"] {
+  --bg: #3A241C; --surface: #4A2F24; --surface-2: #654234;
+  --muted: #B07A64; --muted-fg: #F0C4B0; --fg: #FBEBE2;
+  --accent: #F9826C; --border: #75503F;
+  --ok: #9CD49C; --warn: #E8C77B; --err: #F2A3B3;
+  --on-accent: #3A241C;
+}
+/* Pastel Cloud Dark: dark counterpart (pink cloud family, blue accent) */
+[data-preset="pastel-cloud-dark"] {
+  --bg: #33222E; --surface: #402C3A; --surface-2: #583D50;
+  --muted: #A87E97; --muted-fg: #E5C2D6; --fg: #FAEEF5;
+  --accent: #A2D2FF; --border: #644759;
+  --ok: #9CD49C; --warn: #E8C77B; --err: #F2A3B3;
+  --on-accent: #33222E;
 }
 
 * { box-sizing: border-box; margin: 0; padding: 0; }
@@ -86,13 +139,23 @@ body {
 .pane-l-col { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
 .pane-l-head { flex-shrink: 0; }
 .editor-head {
-  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
+  display: flex; align-items: stretch; gap: 12px; padding: 12px 16px;
 }
+/* #147: title lives in its own pill; select+refresh stay paired in a second pill */
+.editor-head-title,
+.editor-head-settings {
+  display: flex; align-items: center; gap: 8px;
+  background: var(--surface-2); border: 1px solid var(--border);
+  border-radius: var(--radius); padding: 6px 10px;
+}
+.editor-head-title { flex: 1; min-width: 0; }
+.editor-head-settings { flex: 0 0 fit-content; }
+.editor-head-title:focus-within { border-color: var(--accent); }
 .editor-head input {
   border: none; outline: none; background: transparent; color: var(--fg); font: inherit; font-size: 23.2px; flex: 1;
 }
 .editor-head select {
-  border: 1px solid var(--border); background: var(--surface-2); color: var(--muted-fg);
+  border: 1px solid var(--border); background-color: var(--surface-2); color: var(--muted-fg);
   border-radius: var(--radius); padding: 4px 10px; font: inherit; font-size: 21.6px; cursor: pointer;
 }
 /* shared code line metrics (#50): gutter + code must share one line box */
@@ -134,11 +197,17 @@ body {
   border: 1px solid var(--border); border-radius: var(--radius); padding: 5px 8px; background: var(--bg);
   color: var(--fg); font: inherit; font-size: 21.6px; width: 130px;
 }
-.created-banner {
-  display: none; padding: 10px 16px; font-size: 22.4px; background: var(--surface-2);
-  border-bottom: 1px solid var(--border); word-break: break-all;
+/* #168: compact side notification pill (paste-created feedback) */
+.created-pill {
+  position: fixed; right: 12px; bottom: 12px; z-index: 200;
+  background: var(--surface-2); color: var(--ok); border: 1px solid var(--ok);
+  border-radius: var(--radius-sm); padding: 2px 8px; font-size: 11.5px;
+  opacity: 0; pointer-events: none; transform: translateY(6px);
+  transition: opacity .25s ease, transform .25s ease;
+  box-shadow: 0 4px 16px rgba(0,0,0,.25);
 }
-.created-banner a { color: var(--accent); }
+.created-pill.show { opacity: 1; transform: translateY(0); }
+@media (max-width: 640px) { .created-pill { right: 12px; bottom: 12px; } }
 
 /* paste view */
 .meta-bar { display: flex; align-items: center; gap: 12px; padding: 12px 18px; flex-wrap: wrap; }
@@ -146,15 +215,18 @@ body {
 .slug { font-family: var(--font-mono); font-size: 21.6px; color: var(--muted-fg); background: var(--surface-2); padding: 3px 9px; border-radius: var(--radius-sm); }
 .tag { font-size: 19.8px; color: var(--muted-fg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px 9px; }
 .paste-title-bar { display: flex; align-items: center; gap: 12px; padding: 12px 18px; flex-wrap: wrap; }
-.paste-title-bar h1 { font-size: 29.2px; font-weight: 600; margin: 0; }
-.stats-pill { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
-.stats-head { display: flex; align-items: center; gap: 16px; width: 100%; background: none; border: 0; color: var(--muted-fg); font: inherit; font-size: 21.6px; padding: 14px 18px; cursor: pointer; text-align: left; }
+.paste-title-bar h1 { font-size: 29.2px; font-weight: 600; margin: 0; word-break: normal; overflow-wrap: anywhere; }
+/* #222: .float already draws the border + radius and clips corners; the pill's own
+   tighter border curve was getting clipped thin at the corners. Let .float be the
+   only border/paint surface for the details pill (collapsed and expanded). */
+.stats-pill { border: 0; border-radius: 0; overflow: hidden; }
+.stats-head { display: flex; align-items: center; gap: 16px; width: 100%; background: none; border: 0; border-bottom: 1px solid var(--border); color: var(--muted-fg); font: inherit; font-size: 21.6px; padding: 14px 18px; cursor: pointer; text-align: left; }
 .stats-head:hover { color: var(--fg); background: var(--surface-2); }
 .stats-chev { width: 18px; height: 18px; flex: none; transition: transform 0.15s ease; }
 .stats-pill.open .stats-chev { transform: rotate(180deg); }
 .stats-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .01em; }
 @media (max-width: 640px) { .stats-summary { white-space: normal; word-break: break-word; } }
-.stats-body { border-top: 1px solid var(--border); }
+.stats-body { /* #169: divider under the dropdown title is the head's own persistent border-bottom */ }
 .stats-grid { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; padding: 12px 16px; font-size: 20.7px; }
 .stats-k { color: var(--muted-fg); }
 .stats-v { color: var(--fg); word-break: break-all; }
@@ -162,12 +234,34 @@ body {
 .iconbtn { border: 1px solid var(--border); background: var(--surface-2); color: var(--muted-fg); border-radius: var(--radius); padding: 5px 12px; font: inherit; font-size: 21.6px; cursor: pointer; text-decoration: none; }
 .iconbtn.gear { display: inline-flex; align-items: center; padding: 5px 9px; }
 .iconbtn.gear svg { width: 22px; height: 22px; }
+/* #127: gear highlights like selected nav tabs; dark toggle button */
+.iconbtn.gear.on { background: var(--accent); color: var(--bg); border-color: var(--accent); }
+.iconbtn.dark-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; }
+.iconbtn.dark-toggle svg { width: 22px; height: 22px; }
+.iconbtn.dark-toggle .icon-moon { display: none; }
+.iconbtn.dark-toggle .icon-sun { display: inline-block; }
+.dark .iconbtn.dark-toggle .icon-sun { display: none; }
+.dark .iconbtn.dark-toggle .icon-moon { display: inline-block; }
+/* #127: gear highlights like selected nav tabs; dark toggle button */
+.iconbtn.gear.on { background: var(--accent); color: var(--bg); border-color: var(--accent); }
+.iconbtn.dark-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; }
+.iconbtn.dark-toggle svg { width: 22px; height: 22px; }
+.iconbtn.dark-toggle .icon-moon { display: none; }
+.iconbtn.dark-toggle .icon-sun { display: inline-block; }
+.dark .iconbtn.dark-toggle .icon-sun { display: none; }
+.dark .iconbtn.dark-toggle .icon-moon { display: inline-block; }
 .settings-head { padding: 12px 18px; border-bottom: 1px solid var(--border); }
 .settings-head h1 { font-size: 29.2px; font-weight: 600; margin: 0; }
 .settings-body { padding: 16px 18px; color: var(--muted-fg); font-size: 21.6px; }
 .settings-section-title { color: var(--fg); font-size: 24px; margin-bottom: 6px; }
 /* theme switcher cards (#100) */
 .theme-grid { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
+
+/* #161: more breathing room between settings sections */
+/* #207 r2: owner wants the toggle left aligned (revert #197 centering) */
+#settings-dark-toggle { margin-bottom: 20px; }
+.settings-body h3 { margin-top: 28px; }
+.settings-body .theme-grid { margin-bottom: 8px; }
 .theme-card {
   display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
   padding: 14px 16px; min-width: 180px;
@@ -180,6 +274,23 @@ body {
 .theme-card .swatch { width: 26px; height: 26px; border-radius: 6px; border: 1px solid rgba(255,255,255,.15); }
 .theme-name { font-weight: 600; }
 .iconbtn:hover { color: var(--fg); border-color: var(--muted); }
+/* #130: line wrap toggle, accent when active like other toggles */
+/* #166: wrap toggle must show its state: neutral when off, accent when on.
+   The .btn base is accent filled, which made on and off look identical. */
+.btn-icon.wrap-toggle { background: var(--surface-2); color: var(--muted-fg); font-size: 21.6px; font-weight: inherit; border: 1px solid var(--border); }
+.btn-icon.wrap-toggle:hover { color: var(--fg); border-color: var(--muted-fg); filter: none; }
+.iconbtn.wrap-toggle[aria-pressed="true"],
+.btn-icon.wrap-toggle[aria-pressed="true"] { background: var(--accent); color: var(--bg); border-color: var(--accent); }
+/* #152: wrap ON must break long unbroken tokens mid-word and allow no horizontal scrolling */
+html[data-wrap] .codebody { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-all; overflow-x: hidden; }
+/* #167: overflow:hidden zeroes the flex auto-minimum, so the codebody must
+   be told to fill the space left of the gutter or it collapses and the
+   gutter (flex-shrink:0) consumes the whole row */
+html[data-wrap] .code .codebody { flex: 1 1 auto; min-width: 0; }
+html[data-wrap] .editor { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-all; overflow-x: hidden; }
+/* #152: with wrap on nothing may scroll horizontally, including the code container and mobile floats */
+html[data-wrap] .code { overflow-x: hidden; }
+html[data-wrap] .float { overflow-x: hidden; }
 .iconbtn.danger:hover { color: #ff8fa3; border-color: #ff8fa3; }
 .code-head {
   display: flex; align-items: center; gap: 10px; padding: 8px 16px;
@@ -190,10 +301,23 @@ body {
   font-family: var(--font-mono); font-size: var(--code-fs); line-height: var(--code-lh);
   padding: 14px 0; display: flex; overflow-x: auto;
 }
+/* #167: the gutter must not drive the flex layout — its content width
+   (row count × number width) shrinks the code column, which re-wraps lines,
+   which grows the gutter: a feedback loop. Pin the gutter with a fixed
+   basis, take its width out of the negotiation, and let the codebody take
+   the rest. */
+.code .gutter { flex: 0 0 auto; width: 3ch; min-width: 3ch; overflow: visible; }
 .code .gutter { flex-shrink: 0; }
 /* gutter/code share line metrics; the editor gutter keeps its own padding (#50) */
 .code .gutter { padding-top: 0; padding-bottom: 0; }
 .codebody { padding: 0 18px; white-space: pre; }
+/* #167: each logical line is its own block so offsetTop identifies its first visual row */
+.codeline { display: block; }
+/* #167 rev: gutter number spans must stack one per visual row (wrap on) */
+.code .gutter .gutline { display: block; }
+/* #194: codeline blocks are adjacent (no '\n' text between them), so an
+   empty block (blank source line) needs its own line box to stay one row */
+.codeline:empty::before { content: "\200B"; }
 /* syntax highlight tokens (#1) */
 .tok-kw { color: #c792ea; }
 .tok-str { color: #a5e075; }
@@ -202,7 +326,8 @@ body {
 .footnote { display: flex; gap: 20px; padding: 10px 18px; font-size: 20.7px; color: var(--muted-fg); border-top: 1px solid var(--border); flex-wrap: wrap; }
 
 /* history */
-.page { max-width: 1200px; margin: 0 auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
+.page { max-width: 1200px; margin: 0 auto; padding: 20px 20px 28px; display: flex; flex-direction: column; gap: 16px; min-height: calc(100vh - 76px); }
+.pager { position: sticky; bottom: 0; margin-top: auto; z-index: 5; }
 .head-row { display: flex; align-items: baseline; gap: 14px; }
 .head-row h1 { font-size: 34.5px; font-weight: 600; }
 .search {
@@ -223,6 +348,8 @@ tr.row:hover td { background: var(--surface-2); }
 tr.row:hover td a.slug { color: var(--accent); }
 td a.slug { font-family: var(--font-mono); font-size: 21.6px; color: var(--fg); text-decoration: none; }
 td a.slug:hover { color: var(--accent); }
+/* PASTE column fallback for untitled pastes: plain text, identical to a titled paste. URL/ID chips keep .slug styling. */
+td a.slug.paste-name { background: none; padding: 0; border-radius: 0; font-family: inherit; font-size: inherit; color: var(--fg); }
 .badge { font-size: 18.9px; border: 1px solid var(--border); color: var(--muted-fg); border-radius: var(--radius-sm); padding: 1px 8px; }
 .badge.lock { color: var(--accent); border-color: var(--accent); }
 .dim { color: var(--muted-fg); white-space: nowrap; }
@@ -244,6 +371,9 @@ td a.slug:hover { color: var(--accent); }
 }
 .inner h1 { font-size: 29.2px; font-weight: 600; margin-bottom: 6px; }
 .inner .sub { font-size: 22.4px; color: var(--muted-fg); margin-bottom: 20px; }
+/* #173: missing paste message box */
+.notfound-err { color: var(--err); }
+.notfound-card .btn { display: block; margin-top: 10px; }
 .pwinput {
   width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius);
   background: var(--bg); color: var(--fg); font: inherit; font-size: 23.2px; outline: none; text-align: center;
@@ -283,22 +413,64 @@ td a.slug:hover { color: var(--accent); }
 }
 .seg input, .toggle input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
 
-/* toast (#19) */
+/* toast (#19, #168): small pill anchored to the corner, out of content flow */
 .toast {
-  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(8px);
+  position: fixed; right: 16px; bottom: 16px;
   background: var(--surface-2); color: var(--fg); border: 1px solid var(--border);
-  border-radius: var(--radius-sm); padding: 6px 18px; font-size: 20.7px;
+  border-radius: var(--radius-sm); padding: 6px 12px; font-size: 13px;
   opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; z-index: 200;
   box-shadow: 0 4px 16px rgba(0,0,0,.25);
 }
-.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
+.toast.show { opacity: 1; transform: translateY(0); }
 /* status variants (#16) */
 .toast.success { border-color: var(--ok); color: var(--ok); }
 .toast.error { border-color: var(--err); color: var(--err); }
 
+/* result box color-coding (#105): colored left border + text tint per status */
+.result-ok, .result-err, .result-warn { border-left: 4px solid transparent; padding-left: 10px; }
+.result-ok { border-left-color: var(--ok); color: var(--ok); }
+.result-err { border-left-color: var(--err); color: var(--err); }
+.result-warn { border-left-color: var(--warn); color: var(--warn); }
+.result-ok a { color: var(--ok); }
+
 /* protection section rhythm (#20) */
 .protect { display: flex; flex-direction: column; gap: 2px; }
-.protect .pw-row { padding: 2px 8px 4px; }
+.protect .pw-row:not(.submenu) { padding: 2px 8px 4px; }
+
+/* submenu number boxes (#157): styled number inputs + unit selects,
+   padded + indented to line up with parent option labels */
+.submenu {
+  /* #240: indent the box under the parent option LABEL text (8px row padding
+     + 16px control + 8px gap = 32px), and match the row control padding rhythm */
+  margin: 4px 0 4px 32px;
+  padding: 6px 10px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+}
+.exp-group { display: flex; align-items: center; gap: 8px; }
+.num-input {
+  width: 72px;
+  border: 1px solid var(--border); border-radius: var(--radius);
+  background: var(--surface-2); color: var(--fg);
+  font: inherit; font-size: 21.6px; padding: 6px 10px; outline: none;
+  -moz-appearance: textfield; appearance: textfield;
+}
+.num-input::-webkit-outer-spin-button,
+.num-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
+.num-input:focus { border-color: var(--accent); }
+.unit-select {
+  border: 1px solid var(--border); border-radius: var(--radius);
+  background-color: var(--surface-2); color: var(--muted-fg);
+  font: inherit; font-size: 21.6px; padding: 6px 28px 6px 10px;
+  cursor: pointer; outline: none;
+  appearance: none; -webkit-appearance: none;
+  background-image: var(--chevron);
+  background-repeat: no-repeat; background-position: right 10px center;
+}
+.unit-select:focus { border-color: var(--accent); }
+.readable-group { gap: 8px; }
+.readable-label { font-size: 19px; color: var(--muted-fg); white-space: nowrap; }
 .pw-field {
   display: flex; align-items: center; gap: 2px; width: 100%;
   border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg);
@@ -356,12 +528,11 @@ td .id-link:hover { color: var(--accent); }
 th.sortable { cursor: pointer; user-select: none; }
 th.sortable:hover { color: var(--fg); }
 th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
-/* #101: arrow sits LEFT of the label, further spaced, vertically centered,
-   and absolutely positioned so it never shifts the label text. */
-th.sortable { position: relative; padding-left: 24px; }
+/* #209: arrow sits RIGHT of the label, vertically centered, and absolutely
+   positioned so it never shifts the label text; label aligns with column contents. */
 th.sortable .sort-ind {
-  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
-  display: inline-block; width: 0; height: 0;
+  /* #209 r2: inline right after the label text with a fixed gap, not pinned to the column edge */
+  display: inline-block; width: 0; height: 0; margin-left: 6px; vertical-align: middle;
   border-left: 5px solid transparent; border-right: 5px solid transparent;
 }
 th.sorted.asc .sort-ind { border-bottom: 6px solid var(--accent); }
@@ -425,13 +596,19 @@ a.admin-link:hover { color: var(--fg); text-decoration: underline; }
   body { font-size: 16px; }
 
   /* topbar: tighten so logo + nav + gear fit */
-  .topbar { gap: 10px; padding: 0 12px; height: 56px; }
+  .topbar { gap: 6px; padding: 0 10px; height: 56px; }
   .logo { font-size: 17px; white-space: nowrap; }
   .logo em { display: none; }
   .topbar nav { gap: 2px; flex-shrink: 0; }
-  .topbar nav a { padding: 5px 8px; font-size: 15px; }
+  .topbar nav a { padding: 4px 6px; font-size: 15px; }
   .iconbtn.gear { padding: 4px 7px; flex-shrink: 0; }
   .iconbtn.gear svg { width: 18px; height: 18px; }
+  .iconbtn.dark-toggle { padding: 4px 7px; flex-shrink: 0; }
+  .iconbtn.dark-toggle svg { width: 18px; height: 18px; }
+  .iconbtn.dark-toggle span { display: none; }
+  .iconbtn.dark-toggle { padding: 4px 7px; flex-shrink: 0; }
+  .iconbtn.dark-toggle svg { width: 18px; height: 18px; }
+  .iconbtn.dark-toggle span { display: none; }
 
   /* new paste: stack editor above sidebar, natural page height */
   .deck {
@@ -444,8 +621,11 @@ a.admin-link:hover { color: var(--fg); text-decoration: underline; }
   .editor-wrap { min-height: 45vh; }
   .editor { font-size: 15px; }
   .gutter { font-size: 15px; }
+  .editor-head { flex-wrap: wrap; }
+  .editor-head-title { flex: 1 1 100%; }
   .editor-head input { min-width: 0; font-size: 16px; }
   .editor-head select { max-width: 120px; font-size: 14px; }
+  .editor-head-title, .editor-head-settings { padding: 4px 8px; }
   .actionbar { flex-wrap: wrap; }
   .actionbar .btn { padding: 12px 22px; }
   .hint { font-size: 13px; }
@@ -469,9 +649,12 @@ a.admin-link:hover { color: var(--fg); text-decoration: underline; }
   .stats-head { font-size: 13px; }
   .stats-grid { font-size: 13px; padding: 10px 12px; }
   .code { font-size: 13px; }
+  /* #167: gutter and code must share one line box at mobile width too — a
+     taller gutter font stacks its rows taller than the code rows and every
+     number drifts off its line start */
+  .code .gutter { font-size: 13px; }
   .codebody { padding: 0 12px; }
   .footnote { font-size: 12px; padding: 8px 12px; gap: 10px; }
-  .created-banner { font-size: 13px; }
   .iconbtn { font-size: 13px; padding: 6px 10px; }
 
   /* unlock card */
@@ -492,7 +675,212 @@ a.admin-link:hover { color: var(--fg); text-decoration: underline; }
 .can-item-head strong { flex: 1; word-break: break-all; }
 .can-item-body { margin-top: 8px; }
 .can-item-body summary { cursor: pointer; font-size: 19px; color: var(--muted, #888); }
+/* #169: divider between the dropdown title and body must be persistent
+   (not hover dependent) and extend the full width of the card left and right */
+.can-item-body[open] summary {
+  border-bottom: 1px solid var(--border);
+  margin: 0 -14px 8px;
+  padding: 0 14px 8px;
+}
 .can-item-body pre.code { margin: 8px 0 0; overflow-x: auto; }
 .can-item-row { margin-top: 8px; }
 .can-item-row .can-item-title { width: 100%; margin-bottom: 6px; }
 .can-item-row .can-item-content { width: 100%; font-family: var(--mono, monospace); resize: vertical; }
+
+/* ============================================================
+   Styled controls (#123) — buttons, selects, checkboxes, radios
+   match the custom URL box house pattern: 1px var(--border) on
+   var(--bg), var(--radius) corners, accent border on focus, no
+   default browser chrome (appearance: none).
+   ============================================================ */
+
+/* selects: replace native chrome with a house-styled pill */
+select {
+  appearance: none;
+  -webkit-appearance: none;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg) var(--chevron) no-repeat right 10px center; /* #136: themed chevron */
+  color: var(--fg);
+  font: inherit;
+  padding: 4px 30px 4px 12px;
+  cursor: pointer;
+  outline: none;
+  transition: border-color .12s ease, background-color .12s ease;
+}
+select:hover { border-color: var(--muted-fg); background-color: var(--surface-2); }
+select:focus-visible { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; }
+.editor-head select { padding: 4px 30px 4px 10px; }
+
+/* checkboxes and radios: custom drawn, accent when checked */
+input[type="checkbox"],
+input[type="radio"] {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 16px; height: 16px; margin: 0; flex-shrink: 0;
+  border: 1px solid var(--border);
+  background: var(--bg);
+  cursor: pointer;
+  position: relative;
+  transition: border-color .12s ease, background-color .12s ease;
+}
+input[type="checkbox"] { border-radius: 4px; }
+input[type="radio"] { border-radius: 50%; }
+input[type="checkbox"]:hover,
+input[type="radio"]:hover { border-color: var(--muted-fg); }
+input[type="checkbox"]:checked,
+input[type="radio"]:checked { background: var(--accent); border-color: var(--accent); }
+input[type="checkbox"]:checked::after {
+  content: "";
+  position: absolute; inset: 0;
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l4 4 6-8' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
+}
+input[type="radio"]:checked::after {
+  content: "";
+  position: absolute; inset: 3px;
+  border-radius: 50%;
+  background: var(--bg);
+}
+input[type="checkbox"]:focus-visible,
+input[type="radio"]:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+}
+
+/* buttons: every submit-style button gets the .btn treatment,
+   and .btn itself gains the house surface/border/hover pattern */
+button[type="submit"] {
+  background: var(--accent); color: var(--bg); border: 1px solid var(--accent);
+  border-radius: var(--radius); font: inherit; font-weight: 600;
+  padding: 8px 18px; cursor: pointer;
+  transition: filter .12s ease;
+}
+button[type="submit"]:hover { filter: brightness(1.08); }
+button[type="submit"]:focus-visible,
+.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.btn {
+  border: 1px solid var(--accent);
+}
+.btn:hover { filter: brightness(1.08); }
+
+/* settings: give the Admin link clear separation from the theme grid */
+.admin-link-row {
+  margin-top: 32px;
+  padding-top: 20px;
+  border-top: 1px solid var(--border);
+}
+
+/* #38: attachment upload on /new + attachment display on paste view */
+.side-section .file-input { display: none; }
+.dropzone {
+  border: 1px dashed var(--border);
+  border-radius: var(--radius-lg);
+  padding: 14px 12px;
+  text-align: center;
+  color: var(--muted-fg);
+  cursor: pointer;
+  font-size: 20.7px;
+  transition: border-color .15s, background .15s;
+  background: var(--surface-2, transparent);
+}
+.dropzone:hover, .dropzone.dragover {
+  border-color: var(--accent);
+  background: var(--surface-2);
+}
+.dropzone.dragover { border-width: 2px; }
+/* #171: uploaded-file preview replaces the editor area; image fitted inside */
+.file-preview {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  border-radius: 8px;
+}
+.editor-wrap.previewing .editor,
+.editor-wrap.previewing .gutter { display: none; }
+
+.file-chip {
+  display: flex; align-items: center; gap: 10px;
+  border: 1px solid var(--border); border-radius: var(--radius);
+  padding: 8px 14px; margin-top: 8px; background: var(--surface);
+  font-size: 21.6px;
+}
+.file-chip .file-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
+.file-chip .file-chip-size { color: var(--muted-fg); font-size: 19px; }
+.file-chip .file-chip-remove {
+  border: none; background: none; color: var(--muted-fg); cursor: pointer;
+  font-size: 22px; padding: 0 4px; border-radius: var(--radius-sm);
+}
+.file-chip .file-chip-remove:hover { color: var(--danger, #c0392b); }
+.attachment-bar { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
+/* #221: the link pill under an image preview stays a small inline chip,
+   left-aligned under the image, not stretched above it. */
+.attachment-bar .attachment-chip {
+  display: inline-flex; align-items: center; gap: 12px; align-self: flex-start;
+  border: 1px solid var(--border); border-radius: var(--radius);
+  padding: 6px 14px; text-decoration: none; color: var(--fg);
+  background: var(--surface-2); font-size: 19px;
+}
+.attachment-bar .attachment-chip:hover { border-color: var(--accent); }
+.attachment-bar .attachment-chip .attachment-name {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* #232: long filenames are truncated but the pill stays a reasonable
+   width; on narrow viewports it shrinks to the container instead of
+   overflowing the card. */
+.attachment-bar .attachment-chip {
+  max-width: 100%;
+}
+.attachment-bar .attachment-chip .attachment-name:hover {
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+/* #221: images scale to fit the viewer box, aspect ratio preserved. */
+.attachment-preview {
+  max-width: 100%;
+  align-self: flex-start;
+  /* #229: no inner border/radius of its own; the .float wrapper already
+     frames the pill (inner borders get corner-clipped by overflow:hidden).
+     Padding on .attachment-bar gives the image breathing room from the
+     pill border. */
+  border: 0;
+  border-radius: 0;
+  background: var(--surface-2);
+  overflow: hidden;
+}
+.attachment-preview img {
+  display: block;
+  max-width: 100%;
+  max-height: 70vh;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+}
+
+/* #139: CSP-safe replacements for inline style attributes (style-src 'self') */
+.hidden { display: none; }
+.can-page { max-width: 900px; width: 100%; }
+.col-a { width: 260px; } .col-b { width: 140px; } .col-c { width: 120px; }
+.col-d { width: 96px; } .col-d2 { width: 150px; } .col-e { width: 190px; }
+.col-f { width: 100px; } .col-g { width: 190px; }
+/* #210: /mine rows render a delete button cell that had no declared column,
+   so under table-layout:fixed it overlapped the ID column. */
+.col-del { width: 64px; }
+.spacer-flex { flex: 1; }
+.input-num { width: 80px; }
+.input-num-sm { width: 64px; }
+.danger-hint { color: var(--danger, #c0392b); margin-top: 6px; }
+.hint-lg { font-size: 19px; }
+.mt6 { margin-top: 6px; }
+.mt18 { margin-top: 18px; }
+.toggle-inline { display: inline-flex; }
+.wrap-normal { word-break: normal; overflow-wrap: break-word; }
+.created-banner { display: block; }
+/* #167: gutter rows for wrapped paste view — one row per visual code line */
+.gutline { display: block; }

internal/web/static/favicon.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="7" fill="#7B5FC0"/>
+  <g fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M16 7a9 9 0 1 0 0 18c1.4 0 2-1 2-2s-.7-2.2-.7-3c0-1.1.9-2 2-2h3.2A2.5 2.5 0 0 0 25 15.5 9 9 0 0 0 16 7z"/>
+    <circle cx="11.5" cy="14.5" r="1.6" fill="#ffffff" stroke="none"/>
+    <circle cx="16" cy="11.5" r="1.6" fill="#ffffff" stroke="none"/>
+    <circle cx="20.8" cy="13.8" r="1.6" fill="#ffffff" stroke="none"/>
+  </g>
+</svg>

internal/web/static/foot.js

@@ -0,0 +1,19 @@
+// #46: live relative-time counters: tick any [data-ts] (epoch seconds) every second
+(function () {
+  function fmt(ts) {
+    const s = Math.max(0, Math.floor(Date.now() / 1000) - ts);
+    if (s < 60) return s + 's ago';
+    if (s < 3600) return Math.floor(s / 60) + 'm ago';
+    if (s < 86400) return Math.floor(s / 3600) + 'h ago';
+    return Math.floor(s / 86400) + 'd ago';
+  }
+  function tick() {
+    document.querySelectorAll('[data-ts]').forEach(el => {
+      const ts = parseInt(el.dataset.ts, 10);
+      if (!isNaN(ts)) el.textContent = fmt(ts);
+    });
+  }
+  setInterval(tick, 1000);
+  document.addEventListener('DOMContentLoaded', tick);
+  tick();
+})();

internal/web/static/history.js

@@ -0,0 +1,20 @@
+// #139: public history table + 30s auto-refresh.
+const t = PaletteTable.init({
+  endpoint: '/api/public',
+  perPage: 25,
+  hasPager: true,
+  rowHtml: it =>
+    `<tr class="row" data-href="/${t.esc(it.id)}"><td>` +
+    (it.title
+      ? `${t.esc(it.title)}${it.is_can ? ' <span class="badge" title="Can — bundle of items">can</span>' : ''}`
+      : `<a class="slug paste-name" href="/${t.esc(it.id)}">${t.esc(it.id)}</a>${it.is_can ? ' <span class="badge" title="Can — bundle of items">can</span>' : ''}`) +
+    `</td>` +
+    `<td><span class="badge">${t.esc(it.type || it.language || 'text')}</span></td>` +
+    `<td class="dim">${t.fmtSize(it.size)}</td><td class="dim">${it.view_count}</td><td class="dim" data-ts="${it.created_at}">${t.ago(it.created_at)}</td>` +
+    (it.custom_slug ? `<td><a class="slug url-link" href="/${t.esc(it.custom_slug)}">/${t.esc(it.custom_slug)}</a></td>` : `<td class="dim">none</td>`) +
+    `<td class="dim"><a class="id-link" href="/${t.esc(it.id)}">${t.esc(it.id)}</a></td></tr>`,
+  emptyFiltered: 'No pastes match your search.',
+  emptyAll: 'No pastes yet. Create the first one.',
+});
+t.load();
+setInterval(t.load, 30000); // auto-refresh history every 30s

internal/web/static/mine.js

@@ -0,0 +1,46 @@
+// #139: saved pastes table.
+function toast(msg, kind) {
+  let t = document.querySelector('.toast');
+  if (!t) { t = document.createElement('div'); t.className = 'toast'; document.body.appendChild(t); }
+  t.textContent = msg;
+  t.classList.remove('success', 'error');
+  if (kind === 'success') t.classList.add('success');
+  if (kind === 'error') t.classList.add('error');
+  t.classList.add('show');
+  clearTimeout(t._h);
+  t._h = setTimeout(() => t.classList.remove('show'), 2000);
+}
+
+const t = PaletteTable.init({
+  endpoint: '/api/mine',
+  perPage: 25,
+  hasPager: true,
+  rowHtml: it =>
+    `<tr class="row" data-href="/${t.esc(it.id)}"><td>` +
+    (it.title
+      ? `${t.esc(it.title)}${it.is_can ? ' <span class="badge" title="Can — bundle of items">can</span>' : ''}`
+      : `<a class="slug paste-name" href="/${t.esc(it.id)}">${t.esc(it.id)}</a>${it.is_can ? ' <span class="badge" title="Can — bundle of items">can</span>' : ''}`) +
+    `</td>` +
+    `<td><span class="badge">${t.esc(it.type || it.language || 'text')}</span></td>` +
+    `<td class="dim">${t.fmtSize(it.size)}</td><td class="dim" data-ts="${it.created_at}">${t.ago(it.created_at)}</td>` +
+    (it.custom_slug ? `<td><a class="slug url-link" href="/${t.esc(it.custom_slug)}">/${t.esc(it.custom_slug)}</a></td>` : `<td class="dim">none</td>`) +
+    `<td class="dim"><a class="id-link" href="/${t.esc(it.id)}">${t.esc(it.id)}</a></td>` +
+    `<td><button class="btn btn-icon del" data-id="${t.esc(it.id)}" title="Delete paste" aria-label="Delete paste">&times;</button></td></tr>`,
+  emptyFiltered: 'No pastes from this browser match your search.',
+  emptyAll: 'No pastes from this browser yet.',
+});
+
+// delete buttons (viewer-scoped, enforced server-side #37)
+document.getElementById('rows').addEventListener('click', async e => {
+  const del = e.target.closest('button.del');
+  if (!del) return;
+  e.stopPropagation();
+  del.disabled = true;
+  try {
+    const res = await fetch('/api/pastes/' + del.dataset.id, { method: 'DELETE' });
+    if (res.ok) { toast('Deleted', 'success'); t.load(); }
+    else { toast('Delete failed', 'error'); del.disabled = false; }
+  } catch (err) { toast('Delete failed', 'error'); del.disabled = false; }
+});
+
+t.load();

internal/web/static/new.js

@@ -0,0 +1,426 @@
+// #139: editor page logic (gutter, expiry, burn, attachments, create).
+const $ = id => document.getElementById(id);
+const content = $('content'), gutter = $('gutter');
+
+function updateGutter() {
+  const lines = content.value.split('\n').length;
+  let s = '';
+  for (let i = 1; i <= Math.max(lines, 1); i++) s += i + '\n';
+  gutter.textContent = s;
+}
+content.addEventListener('input', updateGutter);
+updateGutter();
+
+function toast(msg, kind) {
+  let t = document.querySelector('.toast');
+  if (!t) { t = document.createElement('div'); t.className = 'toast'; document.body.appendChild(t); }
+  t.textContent = msg;
+  t.classList.remove('success', 'error');
+  if (kind === 'success') t.classList.add('success');
+  if (kind === 'error') t.classList.add('error');
+  t.classList.add('show');
+  clearTimeout(t._h);
+  t._h = setTimeout(() => t.classList.remove('show'), 2000);
+}
+const setHidden = (id, hid) => { const el = $(id); if (el) el.classList.toggle('hidden', hid); };
+$('haspw').addEventListener('change', e => setHidden('pwrow', !e.target.checked));
+$('burn').addEventListener('change', e => setHidden('burnrow', !e.target.checked));
+document.querySelectorAll('input[name="exp"]').forEach(r => r.addEventListener('change', () => {
+  setHidden('customexp-row', document.querySelector('input[name="exp"]:checked').value !== 'custom');
+  setHidden('customexp-err', true);
+}));
+
+// compose the expires_in Go-duration string when Custom is checked (#48).
+// Returns the string, or null with an inline error shown.
+function composeCustomExpiry() {
+  const n = parseInt($('expnum').value, 10);
+  const unit = $('expunit').value;
+  let mins = NaN;
+  if (n > 0) {
+    if (unit === 'm') mins = n;
+    else if (unit === 'h') mins = n * 60;
+    else if (unit === 'd') mins = n * 1440;
+    else if (unit === 'w') mins = n * 10080;
+    else if (unit === 'mo') mins = n * 43200; // months counted as 30 days
+  }
+  const err = $('customexp-err');
+  if (!(mins >= 1)) {
+    err.textContent = 'Enter a duration of at least 1 minute.';
+    err.classList.remove('hidden');
+    return null;
+  }
+  if (mins > 525600) { // more than 1 year
+    err.textContent = 'Custom expiry cannot exceed 1 year.';
+    err.classList.remove('hidden');
+    return null;
+  }
+  err.classList.add('hidden');
+  // compose as h (+d/m remainders); Go parses '336h', '90m', '6h30m' fine
+  const hours = Math.floor(mins / 60), rem = mins % 60;
+  if (rem === 0) return hours + 'h';
+  if (hours === 0) return rem + 'm';
+  return hours + 'h' + rem + 'm';
+}
+
+$('pwreveal').addEventListener('click', () => {
+  const pw = $('password');
+  const show = pw.type === 'password';
+  pw.type = show ? 'text' : 'password';
+  $('pwreveal').classList.toggle('off', !show);
+  $('pwreveal').title = show ? 'Hide password' : 'Show password';
+});
+
+let guessed = ''; // last auto-detected language, '' = user override
+
+// #105: map backend machine-readable error codes to plain-language guidance.
+// Unknown codes fall back to a generic message; the technical detail stays
+// in the API response for API consumers.
+const ERROR_MESSAGES = {
+  slug_taken: 'That Custom URL is already taken. Try another.',
+  slug_reserved: 'That Custom URL is reserved. Try another.',
+  slug_invalid: 'Please keep the Custom URL under 64 characters, using only letters, numbers, dashes, or underscores.',
+  content_empty: 'Write or paste something first.',
+  content_too_large: 'This paste is too large. The limit is 5 MB.',
+  file_too_large: 'File is too large. The limit is 25 MB.',
+  one_file_only: 'Choose either text or a file for now.',
+  expiry_invalid: 'Please pick an expiry between 1 minute and 1 year.',
+  rate_limited: 'Too many tries. Wait a minute and try again.',
+};
+const GENERIC_ERROR = 'Something went wrong. Please try again.';
+
+function friendlyError(data) {
+  return ERROR_MESSAGES[data && data.code] || GENERIC_ERROR;
+}
+
+// #105: color the result box by outcome — success (ok), error (err),
+// warning (warn) — with a colored left border (CSS .result-ok/.result-err).
+function setResultKind(kind) {
+  const card = $('result-card');
+  card.classList.remove('result-ok', 'result-err', 'result-warn');
+  if (kind) card.classList.add('result-' + kind);
+}
+
+function showResult(html, kind) {
+  $('result').innerHTML = html;
+  $('result').dataset.token = kind === 'ok' ? ($('result').dataset.token || '') : ($('result').dataset.token || '');
+  setHidden('result-card', false);
+  setResultKind(kind === 'ok' ? 'ok' : (kind === 'warn' ? 'warn' : 'err'));
+}
+function defaultFilename(lang) {
+  const names = {
+    python: 'Python.py', go: 'main.go', javascript: 'script.js', typescript: 'index.ts',
+    rust: 'main.rs', c: 'main.c', cpp: 'main.cpp', java: 'Main.java', bash: 'script.sh',
+    sql: 'query.sql', yaml: 'config.yaml', json: 'data.json', html: 'index.html',
+    css: 'style.css', xml: 'doc.xml', php: 'index.php', ruby: 'main.rb',
+    perl: 'main.pl', lua: 'main.lua', dockerfile: 'Dockerfile', toml: 'config.toml',
+    ini: 'config.ini', diff: 'changes.diff',
+    markdown: 'notes.md', text: 'Text.txt',
+  };
+  return names[lang] || '';
+}
+// fill default filename when title is still blank
+function maybeSetDefaultTitle(lang) {
+  const title = $('title');
+  if (lang && !title.value.trim()) {
+    const fn = defaultFilename(lang);
+    if (fn) title.value = fn;
+  }
+}
+
+async function guessLang() {
+  if (!content.value.trim()) return;
+  try {
+    const res = await fetch('/api/guess-language', {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({content: content.value}),
+    });
+    const data = await res.json();
+    if (res.ok && data.language) {
+      guessed = data.language;
+      $('language').value = data.language;
+      maybeSetDefaultTitle(data.language);
+    }
+  } catch(e) {}
+}
+
+// refresh button: always re-detect, even if user picked something
+$('reguess').addEventListener('click', guessLang);
+
+// auto-guess when pasting into the editor
+content.addEventListener('paste', () => setTimeout(guessLang, 0));
+
+async function create() {
+  // #38: file attached -> file paste (1 file = 1 paste; text is ignored)
+  if (attachedFile) return createFilePaste();
+
+  const body = {
+    content: content.value,
+    title: $('title').value || null,
+    language: $('language').value || null,
+    custom_slug: $('custom').value || null,
+    burn_after_read: $('burn').checked,
+  };
+  if ($('burn').checked) body.burn_after_reads = parseInt($('burnreads').value, 10) || 1;
+  if ($('haspw').checked) body.password = $('password').value;
+  const exp = document.querySelector('input[name="exp"]:checked').value;
+  if (exp === 'custom') {
+    const dur = composeCustomExpiry();
+    if (dur === null) { toast('Check the custom expiry', 'error'); return; }
+    body.expires_in = dur;
+  } else if (exp) {
+    body.expires_in = exp;
+  }
+
+  const res = await fetch('/api/pastes', {
+    method: 'POST',
+    headers: {'Content-Type': 'application/json'},
+    body: JSON.stringify(body),
+  });
+  const data = await res.json();
+  if (!res.ok) {
+    showResult(friendlyError(data), 'err');
+    toast('Create failed', 'error');
+    return;
+  }
+  finishCreate(data);
+}
+
+// shared success handling for both create paths (#38): result box, copy
+// button, password auto-unlock, then redirect to the paste.
+function finishCreate(data) {
+  const url = location.origin + '/' + (data.custom_slug || data.id);
+  showResult('<a href="' + url + '">' + url + '</a> <button class="btn btn-icon" id="result-copy" title="Copy URL" type="button">⧉</button>', 'ok');
+  $('result').dataset.token = data.deletion_token || '';
+  const copyBtn = document.getElementById('result-copy');
+  copyBtn.addEventListener('click', () => {
+    try {
+      navigator.clipboard.writeText(url);
+      copyBtn.classList.add('ok');               // in-place success feedback (#53)
+      copyBtn.textContent = 'Success!';
+      setTimeout(() => { copyBtn.classList.remove('ok'); copyBtn.textContent = '⧉'; }, 2000);
+    } catch(e) { toast('Copy failed', 'error'); }
+  });
+  // token carried via sessionStorage, never in the URL (#143)
+  const dest = '/' + data.id + '?created=1';
+  try { sessionStorage.setItem('deletion_token_' + data.id, data.deletion_token || ''); } catch(e) {}
+  // password-protected: unlock now with the password we already have (#26)
+  if ($('haspw').checked && data.id) {
+    const fd = new FormData();
+    fd.append('password', $('password').value);
+    fd.append('next', dest);
+    try {
+      fetch('/' + data.id, {method: 'POST', body: fd}).finally(() => { location.href = dest; });
+      return;
+    } catch(e) {}
+  }
+  // show the paste
+  location.href = dest;
+}
+$('create').addEventListener('click', create);
+
+// #38: file attachment support — 1 file = 1 paste. Three input paths:
+// Ctrl+V paste of a file, upload button (file picker), drag-and-drop.
+const MAX_FILE_BYTES = 25 * 1024 * 1024;
+let attachedFile = null; // the single attached File, or null
+
+function humanSize(n) {
+  if (n >= 1048576) return (n / 1048576).toFixed(1) + ' MB';
+  if (n >= 1024) return (n / 1024).toFixed(1) + ' KB';
+  return n + ' B';
+}
+
+// #171: text-file extensions -> language key for title placeholder
+// convention (e.g. Python.py); fallback Text.
+const LANG_BY_EXT = {
+  py: 'python', go: 'go', js: 'javascript', mjs: 'javascript', ts: 'typescript',
+  tsx: 'typescript', rs: 'rust', c: 'c', h: 'c', cpp: 'cpp', cc: 'cpp', hpp: 'cpp',
+  java: 'java', cs: 'csharp', sh: 'bash', bash: 'bash', sql: 'sql', yml: 'yaml',
+  yaml: 'yaml', json: 'json', html: 'html', htm: 'html', css: 'css', xml: 'xml',
+  php: 'php', rb: 'ruby', pl: 'perl', lua: 'lua', toml: 'toml', ini: 'ini',
+  diff: 'diff', md: 'markdown', txt: 'text', log: 'text',
+};
+const TEXT_EXTS = new Set(Object.keys(LANG_BY_EXT));
+
+function extOf(name) {
+  const i = name.lastIndexOf('.');
+  return i >= 0 ? name.slice(i + 1).toLowerCase() : '';
+}
+
+// #171: when a file is attached it takes over the main editing area.
+// Images render fitted into the editor area; text files load their
+// content into the editor. Title auto-fills only if still blank (house
+// rule: never overwrite a typed title).
+const IMAGE_RE = /^image\//;
+let previewURL = null;
+
+// #171: CSP img-src only allows 'self' and data:, so blob: URLs are
+// blocked — read the file as a data: URL via FileReader instead.
+function readFileDataURL(file, cb) {
+  const r = new FileReader();
+  r.onload = () => cb(r.result);
+  r.readAsDataURL(file);
+}
+
+async function showFileInEditor(file) {
+  const wrap = document.querySelector('.editor-wrap');
+  const img = $('file-preview');
+  if (IMAGE_RE.test(file.type)) {
+    readFileDataURL(file, (dataURL) => {
+      previewURL = dataURL;
+      img.src = dataURL;
+      img.alt = file.name;
+      wrap.classList.add('previewing');
+      img.classList.remove('hidden');
+    });
+    return;
+  }
+  wrap.classList.remove('previewing');
+  img.classList.add('hidden');
+  if (!TEXT_EXTS.has(extOf(file.name))) return; // unknown binary: leave editor alone
+  try {
+    const text = await file.text();
+    // #184: the file replaces the main editing area, so the text always
+    // loads over whatever was in the editor (same rule as images, which
+    // hide the editor entirely).
+    content.value = text;
+    updateGutter();
+    guessLang();
+  } catch (e) {}
+}
+
+function clearPreview() {
+  const wrap = document.querySelector('.editor-wrap');
+  const img = $('file-preview');
+  wrap.classList.remove('previewing');
+  img.classList.add('hidden');
+  img.removeAttribute('src');
+  if (previewURL) { URL.revokeObjectURL(previewURL); previewURL = null; }
+}
+
+function setAttachedFile(file) {
+  if (!file) return clearAttachedFile();
+  if (file.size > MAX_FILE_BYTES) {
+    toast('File is too large. The limit is 25 MB.', 'error');
+    return;
+  }
+  attachedFile = file;
+  renderFileChip();
+  setHidden('file-text-note', false);
+  // #233: title auto-fill — the file's own name always wins when the
+  // title is still blank; fallback is date.fileextension (e.g.
+  // 2026-09-10.txt) when the name is missing or unusable. Never
+  // overwrite a typed title.
+  if (!$('title').value.trim()) {
+    const raw = (file.name || '').trim();
+    if (raw) {
+      $('title').value = raw;
+    } else {
+      const d = new Date();
+      const iso = d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');
+      const ext = extOf(raw || file.name);
+      $('title').value = ext ? iso + '.' + ext : iso;
+    }
+  }
+  showFileInEditor(file);
+}
+
+function clearAttachedFile() {
+  attachedFile = null;
+  $('file-input').value = '';
+  renderFileChip();
+  setHidden('file-text-note', true);
+  clearPreview();
+}
+
+function renderFileChip() {
+  const slot = $('file-chip-slot');
+  slot.innerHTML = '';
+  if (!attachedFile) return;
+  const chip = document.createElement('div');
+  chip.className = 'file-chip';
+  chip.innerHTML = '<span class="file-chip-name"></span>' +
+    '<span class="file-chip-size">' + humanSize(attachedFile.size) + '</span>' +
+    '<button type="button" class="file-chip-remove" title="Remove file">&times;</button>';
+  chip.querySelector('.file-chip-name').textContent = attachedFile.name;
+  chip.querySelector('.file-chip-remove').addEventListener('click', clearAttachedFile);
+  slot.appendChild(chip);
+}
+
+// (1) file picker via the dropzone click
+$('dropzone').addEventListener('click', () => $('file-input').click());
+$('file-input').addEventListener('change', () => {
+  if ($('file-input').files.length) setAttachedFile($('file-input').files[0]);
+});
+
+// (2) drag-and-drop onto the dropzone (and the page broadly)
+const dz = $('dropzone');
+['dragenter', 'dragover'].forEach(ev => {
+  document.addEventListener(ev, e => {
+    if (!e.dataTransfer || ![...e.dataTransfer.types].includes('Files')) return;
+    e.preventDefault();
+    dz.classList.add('dragover');
+  });
+});
+['dragleave', 'drop'].forEach(ev => {
+  document.addEventListener(ev, e => {
+    if (ev === 'drop') e.preventDefault();
+    if (e.target === dz || ev === 'drop') dz.classList.remove('dragover');
+  });
+});
+document.addEventListener('drop', e => {
+  if (!e.dataTransfer || !e.dataTransfer.files.length) return;
+  e.preventDefault();
+  setAttachedFile(e.dataTransfer.files[0]);
+});
+
+// (3) Ctrl+V of a file anywhere on the page
+document.addEventListener('paste', e => {
+  const files = e.clipboardData && e.clipboardData.files;
+  if (!files || !files.length) return; // normal text paste into the editor
+  e.preventDefault();
+  setAttachedFile(files[0]);
+});
+
+// file create path: POST multipart. 1 file = 1 paste: when a file is
+// attached the editor text is ignored (server enforces this too).
+async function createFilePaste() {
+  const fd = new FormData();
+  fd.append('file', attachedFile);
+  if ($('title').value) fd.append('title', $('title').value);
+  if ($('custom').value) fd.append('custom_slug', $('custom').value);
+  if ($('haspw').checked) fd.append('password', $('password').value);
+  if ($('burn').checked) {
+    fd.append('burn_after_read', 'true');
+    fd.append('burn_after_reads', String(parseInt($('burnreads').value, 10) || 1));
+  }
+  if ($('unlisted').checked) fd.append('visibility', 'unlisted');
+  const exp = document.querySelector('input[name="exp"]:checked').value;
+  if (exp === 'custom') {
+    const dur = composeCustomExpiry();
+    if (dur === null) { toast('Check the custom expiry', 'error'); return; }
+    fd.append('expires_in', dur);
+  } else if (exp) {
+    fd.append('expires_in', exp);
+  }
+  const res = await fetch('/api/pastes', { method: 'POST', body: fd });
+  const data = await res.json();
+  if (!res.ok) {
+    showResult(friendlyError(data), 'err');
+    toast('Create failed', 'error');
+    return;
+  }
+  finishCreate(data);
+}
+
+// reset stale result state when returning via Back (bfcache) (#28)
+window.addEventListener('pageshow', e => {
+  if (!e.persisted) return;
+  const rc = document.getElementById('result-card');
+  if (rc) rc.classList.add('hidden');
+  const r = document.getElementById('result');
+  if (r) { r.innerHTML = 'empty'; delete r.dataset.token; }
+});
+document.addEventListener('keydown', e => {
+  if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') { e.preventDefault(); create(); }
+});

internal/web/static/paste-lines.js

@@ -0,0 +1,123 @@
+// #167: with line wrapping on, a logical line can occupy several visual
+// lines; the gutter must show one number per VISUAL line, and each number
+// must sit on the visual row where its logical line STARTS. Per-line spans
+// give each logical line its own box so offsetTop order stays correct even
+// when highlighting spans cross no line boundaries.
+(function () {
+  var body = document.getElementById('codebody');
+  var gutter = document.getElementById('gutter');
+  var code = document.getElementById('code');
+  if (!body || !gutter || !code) return;
+
+  var wrapOn = function () {
+    return document.documentElement.hasAttribute('data-wrap');
+  };
+
+  // Wrap each logical line (split on newline; spans never contain newlines
+  // because HighlightCode highlights per line) in a .codeline block. The
+  // spans are display:block, so they are joined with '' — a '\n' join leaves
+  // newline text nodes between blocks that pre-wrap renders as an extra line
+  // box per line, which would shift every following number down one row (#167,
+  // #205). Whitespace-only text nodes are also stripped defensively below: any
+  // that reach the DOM (older cached HTML, other templates) render as phantom
+  // rows under white-space: pre and drift the gutter.
+  function splitLines() {
+    var html = body.innerHTML;
+    var parts = html.split('\n');
+    var out = [];
+    for (var i = 0; i < parts.length; i++) {
+      out.push('<span class="codeline">' + parts[i] + '</span>');
+    }
+    body.innerHTML = out.join('');
+    // #205: strip whitespace-only text nodes between the .codeline blocks.
+    var ws = [];
+    for (var n = body.firstChild; n; n = n.nextSibling) {
+      if (n.nodeType === 3 && !/\S/.test(n.nodeValue)) ws.push(n);
+    }
+    for (var w = 0; w < ws.length; w++) body.removeChild(ws[w]);
+  }
+
+  // One .gutline block per visual row. The gutter must reproduce the code
+  // column's REAL rendered rows: each number goes on the visual row whose top
+  // matches its .codeline's top (a line wrapping to N rows gets its number on
+  // the FIRST of those rows), and filler rows pad the gaps. Geometry is
+  // measured, not derived from span counts or heights.
+  function renumber() {
+    var lines = body.querySelectorAll('.codeline');
+    if (!wrapOn() || !lines.length) {
+      // wrap OFF: one number per logical line (pre-existing behavior,
+      // including the gutter scrolling with horizontal scroll).
+      var s = '';
+      for (var k = 1; k <= lines.length; k++) s += k + '\n';
+      gutter.textContent = lines.length ? s.slice(0, -1) : '1';
+      return;
+    }
+
+    // Read all rects first: batching layout reads before the writes below
+    // avoids interleaved read/write reflows.
+    var bodyTop = body.getBoundingClientRect().top;
+    var lh = parseFloat(getComputedStyle(body).lineHeight) || 1;
+    var rowIdx = [];
+    var totalRows = 1;
+    for (var i = 0; i < lines.length; i++) {
+      var row = Math.round((lines[i].getBoundingClientRect().top - bodyTop) / lh);
+      if (row < 0) row = 0;
+      rowIdx.push(row);
+      if (row + 1 > totalRows) totalRows = row + 1;
+    }
+    if (totalRows < lines.length) totalRows = lines.length;
+    gutter.textContent = '';
+    var frag = document.createDocumentFragment();
+    var spans = [];
+    for (var r = 0; r < totalRows; r++) {
+      var cell = document.createElement('span');
+      cell.className = 'gutline';
+      cell.textContent = '\u00a0';
+      spans.push(cell);
+      frag.appendChild(cell);
+    }
+    gutter.appendChild(frag);
+    for (var j = 0; j < rowIdx.length; j++) {
+      spans[rowIdx[j]].textContent = String(j + 1);
+    }
+    // A wrapped line whose last visual row is only partially filled can
+    // settle a hair under N * line-height after the gutter is rebuilt; a
+    // gutter pass that changes the code column width reflows it. Verify the
+    // placement one frame later and re-run if any line's row moved (#167).
+    var placed = [];
+    for (var p = 0; p < rowIdx.length; p++) placed.push(rowIdx[p]);
+    requestAnimationFrame(function () {
+      var moved = false;
+      var bodyTop2 = body.getBoundingClientRect().top;
+      var lh2 = parseFloat(getComputedStyle(body).lineHeight) || lh;
+      var tops2 = [];
+      for (var q2 = 0; q2 < lines.length; q2++) tops2.push(lines[q2].getBoundingClientRect().top);
+      for (var q3 = 0; q3 < tops2.length; q3++) {
+        if (Math.round((tops2[q3] - bodyTop2) / lh2) !== placed[q3]) { moved = true; break; }
+      }
+      if (moved) renumber();
+    });
+  }
+
+  splitLines();
+  renumber();
+
+  // Re-renumber on toggle (theme.js toggles data-wrap on <html>) and on any
+  // size change (paste of lots of text, window resize, zoom). Only width
+  // changes of the code column affect wrapping, so observe width only —
+  // height changes caused by our own renumbering must not re-trigger.
+  var mo = new MutationObserver(renumber);
+  mo.observe(document.documentElement, { attributes: true, attributeFilter: ['data-wrap'] });
+  var lastW = body.getBoundingClientRect().width;
+  if (window.ResizeObserver) {
+    var ro = new ResizeObserver(function () {
+      var w = body.getBoundingClientRect().width;
+      if (Math.abs(w - lastW) < 0.5) return;
+      lastW = w;
+      renumber();
+    });
+    ro.observe(body);
+  } else {
+    window.addEventListener('resize', renumber);
+  }
+})();

internal/web/static/paste.js

@@ -0,0 +1,64 @@
+// #53/#139: paste viewer page logic. Paste id arrives via <body data-paste-id>.
+function toast(msg) {
+  let t = document.querySelector('.toast');
+  if (!t) { t = document.createElement('div'); t.className = 'toast'; document.body.appendChild(t); }
+  t.textContent = msg;
+  t.classList.add('show');
+  clearTimeout(t._h);
+  t._h = setTimeout(() => t.classList.remove('show'), 2000);
+}
+function toggleStats() {
+  const body = document.getElementById('stats-body');
+  const pill = document.getElementById('stats-pill');
+  const btn = document.getElementById('stats-toggle');
+  const open = body.hidden;
+  body.hidden = !open;
+  pill.classList.toggle('open', open);
+  btn.setAttribute('aria-expanded', open ? 'true' : 'false');
+}
+function copyFeedback(btn) {
+  if (!btn) return;
+  if (!btn.dataset.label) btn.dataset.label = btn.textContent; // remember the original label (Copy/Link)
+  btn.classList.add('ok');
+  btn.textContent = 'Success!';
+  clearTimeout(btn._okh);
+  btn._okh = setTimeout(() => { btn.classList.remove('ok'); btn.textContent = btn.dataset.label; }, 2000);
+}
+function copyContent(btn) {
+  navigator.clipboard.writeText(document.getElementById('raw-content').value)
+    .then(() => copyFeedback(btn))
+    .catch(() => toast('Copy failed'));
+}
+// #243: copy the paste LINK (full URL), not the paste id or content
+function copyLink(btn) {
+  const url = location.origin + location.pathname;
+  navigator.clipboard.writeText(url)
+    .then(() => copyFeedback(btn))
+    .catch(() => toast('Copy failed'));
+}
+function redeem() {
+  if (!confirm('Hard delete this paste immediately?')) return;
+  let tok = '';
+  try { tok = sessionStorage.getItem('deletion_token_' + PASTE_ID) || ''; } catch(e) {}
+  if (!tok) { alert('deletion token not available in this browser'); return; }
+  fetch('/api/pastes/' + PASTE_ID + '/redeem', {method: 'DELETE', headers: {'Authorization': 'Bearer ' + tok}})
+    .then(r => { if (r.ok) location.href = '/history'; else alert('delete failed'); });
+}
+
+// wiring (moved from inline handlers for CSP #139)
+var PASTE_ID = document.currentScript.getAttribute('data-paste-id');
+var copyBtn = document.getElementById('copy-btn');
+if (copyBtn) copyBtn.addEventListener('click', function (e) { e.preventDefault(); copyContent(copyBtn); });
+var copyLinkBtn = document.getElementById('copy-link-btn');
+if (copyLinkBtn) copyLinkBtn.addEventListener('click', function (e) { e.preventDefault(); copyLink(copyLinkBtn); });
+var delBtn = document.getElementById('delete-btn');
+
+// #168: show the compact paste-created pill in the bottom corner, then fade it out
+const createdPill = document.getElementById('created-pill');
+if (createdPill) {
+  requestAnimationFrame(() => createdPill.classList.add('show'));
+  setTimeout(() => createdPill.classList.remove('show'), 4000);
+}
+if (delBtn) delBtn.addEventListener('click', function (e) { e.preventDefault(); redeem(); });
+var statsToggle = document.getElementById('stats-toggle');
+if (statsToggle) statsToggle.addEventListener('click', toggleStats);

internal/web/static/settings.js

@@ -0,0 +1,105 @@
+// #112/#127/#139: theme switcher. Swatch colors are derived from computed CSS vars per preset.
+(function () {
+  // #112: derive each preset's swatches from the real CSS variables in
+  // app.css by temporarily applying data-preset, so they can never drift.
+  // #127: 5 theme pairs, light swatches top row, dark bottom row.
+  var pairs = [
+    { id: 'midnight',        name: 'Midnight' },
+    { id: 'smooth',          name: 'Smooth' },
+    { id: 'pastel-lavender', name: 'Pastel Lavender' },
+    { id: 'pastel-peach',    name: 'Pastel Peach' },
+    { id: 'pastel-cloud',    name: 'Pastel Cloud' }
+  ];
+  var SWATCH_VARS = ['--bg', '--surface', '--surface-2', '--muted', '--accent'];
+
+  function presetColors(id) {
+    var root = document.documentElement;
+    var prev = root.getAttribute('data-preset');
+    root.setAttribute('data-preset', id);
+    var cs = getComputedStyle(root);
+    var colors = SWATCH_VARS.map(function (v) { return cs.getPropertyValue(v).trim(); });
+    if (prev === null) root.removeAttribute('data-preset'); else root.setAttribute('data-preset', prev);
+    return colors;
+  }
+
+  // current base pair + dark flag from the resolved data-preset.
+  // "midnight" is itself the dark variant, so check dark ids first.
+  function state() {
+    var p = document.documentElement.dataset.preset || 'midnight';
+    if (p === 'midnight' || /-dark$/.test(p)) {
+      return { base: p === 'midnight' ? 'midnight' : p.replace(/-dark$/, ''), dark: true };
+    }
+    return { base: p === 'midnight-light' ? 'midnight' : p, dark: false };
+  }
+
+  var grid = document.getElementById('theme-grid');
+  var cards = {};
+  // #132: midnight is dark-first (root preset = midnight = dark; its light
+  // variant is midnight-light), the others are light-first. Resolve the
+  // LIGHT and DARK preset ids generically so the light swatches always
+  // render in the top row of every card.
+  function lightPreset(id) {
+    if (id === 'midnight') return 'midnight-light';
+    return id; // light-first bases use themselves as the light variant
+  }
+  function darkPreset(id) {
+    if (id === 'midnight') return 'midnight'; // root preset is midnight's dark
+    return id + '-dark';
+  }
+  pairs.forEach(function (t) {
+    var light = presetColors(lightPreset(t.id));
+    var dark = presetColors(darkPreset(t.id));
+    var btn = document.createElement('button');
+    btn.type = 'button';
+    btn.className = 'theme-card';
+    btn.setAttribute('aria-pressed', 'false');
+    btn.setAttribute('data-pair', t.id);
+    // #139: build the swatches via DOM APIs (CSSOM styles) instead of
+    // innerHTML strings: re-parsing serialized inline styles would trip
+    // style-src 'self'.
+    var label = document.createElement('strong');
+    label.textContent = t.name;
+    btn.appendChild(label);
+    [light, dark].forEach(function (colors) {
+      var row = document.createElement('span');
+      row.className = 'swatches';
+      colors.forEach(function (c) {
+        var sw = document.createElement('span');
+        sw.className = 'swatch';
+        sw.style.backgroundColor = c;
+        row.appendChild(sw);
+      });
+      btn.appendChild(row);
+    });
+    btn.addEventListener('click', function () {
+      var dark = state().dark;
+      document.documentElement.dataset.preset = dark ? t.id + '-dark' : t.id;
+      try { localStorage.setItem('palette-theme', t.id); } catch (e) {}
+      Object.keys(cards).forEach(function (k) { cards[k].setAttribute('aria-pressed', 'false'); });
+      btn.setAttribute('aria-pressed', 'true');
+    });
+    cards[t.id] = btn;
+    grid.appendChild(btn);
+  });
+
+  function sync() {
+    var s = state();
+    Object.keys(cards).forEach(function (k) {
+      cards[k].setAttribute('aria-pressed', k === s.base ? 'true' : 'false');
+    });
+    var dt = document.getElementById('settings-dark-toggle');
+    if (dt) dt.setAttribute('aria-pressed', s.dark ? 'true' : 'false');
+  }
+  sync();
+  // topbar.js already binds every .dark-toggle (deferred, so the settings
+  // button exists by then). Only wire here if it somehow did not run,
+  // otherwise the button would toggle twice per click and never change (#197).
+  var dt = document.getElementById('settings-dark-toggle');
+  if (dt && !dt.dataset.darkWired) {
+    dt.addEventListener('click', function () {
+      var btns = document.querySelectorAll('.topbar .dark-toggle');
+      if (btns.length) btns[0].click(); else document.dispatchEvent(new CustomEvent('palette-darkchange'));
+    });
+  }
+  document.addEventListener('palette-darkchange', sync);
+})();

internal/web/static/table.js

@@ -16,7 +16,7 @@ const PaletteTable = (() => {
   const sortVal = (it, k) => {
     let v = it[k];
     if (k === 'title' || k === 'custom_slug') v = (v == null || v === '') ? null : String(v).toLowerCase();
-    if (k === 'language') v = (v == null || v === '') ? 'text' : String(v).toLowerCase();
+    if (k === 'language' || k === 'type') v = (v == null || v === '') ? 'text' : String(v).toLowerCase();
     if (k === 'size' || k === 'view_count' || k === 'created_at') return v == null ? -1 : v;
     return v == null ? null : v;
   };
@@ -79,10 +79,10 @@ const PaletteTable = (() => {
         const rows = $('rows'), empty = $('empty');
         if (!items.length) {
           rows.innerHTML = '';
-          empty.style.display = 'block';
+          empty.classList.remove('hidden');
           empty.textContent = filtered ? opts.emptyFiltered : opts.emptyAll;
         } else {
-          empty.style.display = 'none';
+          empty.classList.add('hidden');
           rows.innerHTML = items.map(opts.rowHtml).join('');
         }
 
@@ -90,17 +90,38 @@ const PaletteTable = (() => {
         if (opts.hasPager && pager && showing) {
           const pages = Math.max(1, Math.ceil(state.total / opts.perPage));
           if (filtered || state.sortKey) {
-            showing.textContent = state.sortKey
-              ? 'Sorted by ' + state.sortKey + ' (' + (state.sortDir === 1 ? 'ascending' : 'descending') + ') · ' + items.length.toLocaleString() + ' of ' + state.total.toLocaleString()
-              : 'Showing ' + items.length.toLocaleString() + ' matches for "' + state.filter + '"';
-            pager.innerHTML = '';
+            // Pagination operates over the FILTERED set (#133): never hide the bar.
+            const filtPages = Math.max(1, Math.ceil(items.length / opts.perPage));
+            if (state.page > filtPages) state.page = filtPages;
+            const fOff = (state.page - 1) * opts.perPage;
+            const view = items.slice(fOff, fOff + opts.perPage);
+            rows.innerHTML = view.length ? view.map(opts.rowHtml).join('') : '';
+            if (!view.length) {
+              empty.classList.remove('hidden');
+              empty.textContent = filtered ? opts.emptyFiltered : opts.emptyAll;
+            }
+            showing.textContent = `Showing ${view.length === 0 ? 0 : fOff+1}–${fOff+view.length} of ${items.length.toLocaleString()} ${filtered ? 'matches' : 'sorted'} · page ${state.page} of ${filtPages}`;
+            const btns = [];
+            const add = (label, target, o={}) => btns.push(`<button ${o.on?'class="on"':''} ${o.dis?'disabled':''} data-p="${target}">${label}</button>`);
+            add('‹', state.page-1, {dis: state.page===1});
+            const win = new Set([1, state.page-1, state.page, state.page+1, filtPages]);
+            let last = 0;
+            for (let i = 1; i <= filtPages; i++) {
+              if (win.has(i)) {
+                if (last && i - last > 1) btns.push('<span class="dim">…</span>');
+                add(String(i), i, {on: i===state.page});
+                last = i;
+              }
+            }
+            add('›', state.page+1, {dis: state.page===filtPages});
+            pager.innerHTML = btns.join('');
           } else {
             showing.textContent = state.total === 0 ? 'Nothing here yet' :
               `Showing ${off+1}–${Math.min(off+opts.perPage, state.total)} of ${state.total.toLocaleString()} · page ${state.page} of ${pages}`;
             const btns = [];
             const add = (label, target, o={}) => btns.push(`<button ${o.on?'class="on"':''} ${o.dis?'disabled':''} data-p="${target}">${label}</button>`);
             add('‹', state.page-1, {dis: state.page===1});
-            const win = new Set([1, 2, state.page-1, state.page, state.page+1, pages]);
+            const win = new Set([1, state.page-1, state.page, state.page+1, pages]);
             let last = 0;
             for (let i = 1; i <= pages; i++) {
               if (win.has(i)) {
@@ -126,6 +147,7 @@ const PaletteTable = (() => {
       if (!th) return;
       const k = th.dataset.sort;
       if (state.sortKey === k) { state.sortDir = -state.sortDir; } else { state.sortKey = k; state.sortDir = 1; }
+      state.page = 1;
       renderSortIndicators();
       load();
     });

internal/web/static/theme.js

@@ -0,0 +1,78 @@
+// #16/#100/#127: theme preset resolution. Runs in <head> (blocking) so the
+// correct data-preset is set before first paint. The server default dark flag
+// arrives via the script tag's data-default-dark attribute so no inline script is needed.
+// #130: shared line wrap preference (localStorage 'palette-wrap', default off).
+// preset hook (#16): ?theme= wins; else persisted choice (#100).
+// #127: theme pairs - each base theme has a light and dark variant;
+// palette-theme stores the base id, palette-dark the dark flag.
+(function () {
+  var PAIRS = {
+    'midnight':        { light: 'midnight-light',       dark: 'midnight' },
+    'smooth':          { light: 'smooth',               dark: 'smooth-dark' },
+    'pastel-lavender': { light: 'pastel-lavender',      dark: 'pastel-lavender-dark' },
+    'pastel-peach':    { light: 'pastel-peach',         dark: 'pastel-peach-dark' },
+    'pastel-cloud':    { light: 'pastel-cloud',         dark: 'pastel-cloud-dark' }
+  };
+  function resolve(t, dark) {
+    for (var base in PAIRS) {
+      if (t === PAIRS[base].light || t === PAIRS[base].dark) return t;
+      if (t === base) return dark ? PAIRS[base].dark : PAIRS[base].light;
+    }
+    return null;
+  }
+  var t = new URLSearchParams(location.search).get('theme');
+  // precedence: URL ?theme= > stored pair+dark prefs > server default dark > dark on
+  var dark = (document.currentScript && document.currentScript.getAttribute('data-default-dark')) === '1';
+  try {
+    var stored = localStorage.getItem('palette-dark');
+    if (stored !== null) dark = stored !== 'false';
+  } catch (e) {}
+  if (t) {
+    // URL ?theme= wins and accepts both base and variant ids; a variant id
+    // also sets the dark flag and normalizes t back to its base pair id.
+    var found = false;
+    for (var base in PAIRS) {
+      if (t === PAIRS[base].dark) { dark = true; t = base; found = true; break; }
+      if (t === PAIRS[base].light) { dark = false; t = base; found = true; break; }
+      if (t === base) { found = true; break; }
+    }
+    if (!found) t = null;
+  }
+  if (!t) {
+    try { t = localStorage.getItem('palette-theme'); } catch (e) {}
+  }
+  if (!PAIRS[t]) t = 'midnight';
+  // do not persist anything here: URL theme is a one-off override
+  document.documentElement.dataset.preset = dark ? PAIRS[t].dark : PAIRS[t].light;
+})();
+// #130: shared line wrap preference (localStorage 'palette-wrap', default off)
+(function () {
+  function wrapOn() {
+    try { return localStorage.getItem('palette-wrap') === '1'; } catch (e) { return false; }
+  }
+  function wrapApply(on) {
+    if (on) document.documentElement.setAttribute('data-wrap', '1');
+    else document.documentElement.removeAttribute('data-wrap');
+    document.querySelectorAll('.wrap-toggle').forEach(function (b) {
+      b.setAttribute('aria-pressed', on ? 'true' : 'false');
+    });
+    var s = document.getElementById('wrap-setting');
+    if (s) s.checked = on;
+  }
+  window.paletteWrapToggle = function () {
+    var on = !wrapOn();
+    try { localStorage.setItem('palette-wrap', on ? '1' : '0'); } catch (e) {}
+    wrapApply(on);
+    return on;
+  };
+  document.addEventListener('DOMContentLoaded', function () {
+    wrapApply(wrapOn());
+    document.querySelectorAll('.wrap-toggle').forEach(function (b) {
+      b.addEventListener('click', function () { window.paletteWrapToggle(); });
+    });
+    var s = document.getElementById('wrap-setting');
+    if (s) s.addEventListener('change', function () {
+      if (s.checked !== wrapOn()) window.paletteWrapToggle();
+    });
+  });
+})();

internal/web/static/topbar.js

@@ -0,0 +1,47 @@
+// #127: dark mode toggle: flips to the other variant of the active pair.
+// #127: dark mode toggle - flips to the other variant of the active pair.
+  (function () {
+    var PAIRS = {
+      'midnight':        { light: 'midnight-light',       dark: 'midnight' },
+      'smooth':          { light: 'smooth',               dark: 'smooth-dark' },
+      'pastel-lavender': { light: 'pastel-lavender',      dark: 'pastel-lavender-dark' },
+      'pastel-peach':    { light: 'pastel-peach',         dark: 'pastel-peach-dark' },
+      'pastel-cloud':    { light: 'pastel-cloud',         dark: 'pastel-cloud-dark' }
+    };
+    var root = document.documentElement;
+    function state() {
+      var p = root.dataset.preset || 'midnight';
+      for (var base in PAIRS) {
+        if (p === PAIRS[base].dark) return { base: base, dark: true };
+        if (p === PAIRS[base].light) return { base: base, dark: false };
+      }
+      return { base: 'midnight', dark: true };
+    }
+    function apply() {
+      var s = state();
+      document.body.classList.toggle('dark', s.dark);
+      root.classList.toggle('dark', s.dark);
+    }
+    function sync(btns) {
+      btns.forEach(function (b) {
+        b.setAttribute('aria-pressed', state().dark ? 'true' : 'false');
+      });
+    }
+    var btns = document.querySelectorAll('.dark-toggle');
+    apply();
+    sync(Array.prototype.slice.call(btns));
+    btns.forEach(function (b) {
+      // mark as wired so settings.js does not add a second handler
+      // (#197: double-binding made the settings toggle flip twice = no-op)
+      b.dataset.darkWired = '1';
+      b.addEventListener('click', function () {
+        var s = state();
+        var dark = !s.dark;
+        root.dataset.preset = dark ? PAIRS[s.base].dark : PAIRS[s.base].light;
+        try { localStorage.setItem('palette-dark', dark ? 'true' : 'false'); } catch (e) {}
+        apply();
+        sync(Array.prototype.slice.call(btns));
+        document.dispatchEvent(new CustomEvent('palette-darkchange'));
+      });
+    });
+  })();

internal/web/static/unlock.js

@@ -0,0 +1,7 @@
+// #139: unlock page: password reveal toggle.
+document.getElementById('pwreveal').addEventListener('click', () => {
+  const pw = document.getElementById('password');
+  const show = pw.type === 'password';
+  pw.type = show ? 'text' : 'password';
+  document.getElementById('pwreveal').title = show ? 'Hide password' : 'Show password';
+});

internal/web/templates/admin.html

@@ -1,21 +1,18 @@
 {{template "head" .}}
 {{template "topbar" .}}
-<div class="page">
-  <div class="float">
-    <div class="settings-head">
+<div class="center">
+  <div class="float unlock-card">
+    <div class="inner">
       <h1>Admin</h1>
-    </div>
-    <div class="settings-body">
-      <p>Enter the admin key to manage server settings. The key is kept in
-      sessionStorage for this tab only and is sent as a request header — it is
-      never stored in a cookie, so it will not accompany normal paste requests.</p>
       <form id="admin-key-form">
-        <label for="admin-key">Admin key</label><br>
-        <input type="password" id="admin-key" autocomplete="off" style="width:100%">
-        <button type="submit">Unlock</button>
+        <div class="pw-field">
+          <input type="password" id="admin-key" placeholder="Admin key" autocomplete="off" autofocus>
+        </div>
+        <button class="btn" type="submit">Unlock</button>
         <span id="admin-key-status"></span>
       </form>
-      <div id="admin-panel" style="display:none">
+
+      <div id="admin-panel" class="hidden">
         <h2>Settings</h2>
         <form id="admin-settings-form">
           <table>
@@ -33,77 +30,5 @@
     </div>
   </div>
 </div>
-<script>
-(function () {
-  var KEY = 'palette_admin_key';
-  var keyInput = document.getElementById('admin-key');
-  var status = document.getElementById('admin-key-status');
-  var panel = document.getElementById('admin-panel');
-
-  function key() { return sessionStorage.getItem(KEY) || ''; }
-
-  function api(path, opts) {
-    opts = opts || {};
-    // allow callers to override the key header (e.g. validating a typed key, #99)
-    opts.headers = Object.assign({ 'X-Admin-Key': key() }, opts.headers || {});
-    if (opts.body) opts.headers['Content-Type'] = 'application/json';
-    return fetch(path, opts);
-  }
-
-  function loadSettings() {
-    api('/admin/api/settings').then(function (r) {
-      if (r.status !== 200) { showLock(); return; }
-      return r.json();
-    }).then(function (s) {
-      if (!s) return;
-      document.getElementById('rl-burst').value = s.rate_limit_burst;
-      document.getElementById('rl-refill').value = s.rate_limit_per_minute;
-      document.getElementById('max-content').value = s.max_content_bytes;
-      document.getElementById('default-expiry').value = s.default_expiry;
-      document.getElementById('slug-days').value = s.custom_slug_reservation_days;
-      document.getElementById('burn-window').value = s.burn_viewer_window_minutes;
-      panel.style.display = '';
-    });
-  }
-
-  function showLock() {
-    panel.style.display = 'none';
-    sessionStorage.removeItem(KEY);
-  }
-
-  document.getElementById('admin-key-form').addEventListener('submit', function (e) {
-    e.preventDefault();
-    // #99: don't persist the key until the server accepts it
-    api('/admin/api/settings', { headers: { 'X-Admin-Key': keyInput.value } }).then(function (r) {
-      if (r.status === 200) {
-        sessionStorage.setItem(KEY, keyInput.value);
-        status.textContent = '✓';
-        keyInput.value = '';
-        loadSettings();
-      } else {
-        status.textContent = 'invalid key';
-        showLock();
-      }
-    });
-  });
-
-  document.getElementById('admin-settings-form').addEventListener('submit', function (e) {
-    e.preventDefault();
-    var body = {
-      rate_limit_burst: parseFloat(document.getElementById('rl-burst').value),
-      rate_limit_per_minute: parseFloat(document.getElementById('rl-refill').value),
-      max_content_bytes: parseInt(document.getElementById('max-content').value, 10),
-      default_expiry: document.getElementById('default-expiry').value,
-      custom_slug_reservation_days: parseInt(document.getElementById('slug-days').value, 10),
-      burn_viewer_window_minutes: parseInt(document.getElementById('burn-window').value, 10)
-    };
-    api('/admin/api/settings', { method: 'POST', body: JSON.stringify(body) }).then(function (r) {
-      document.getElementById('admin-save-status').textContent = r.status === 200 ? 'saved' : 'error';
-      if (r.status !== 200) showLock();
-    });
-  });
-
-  if (key()) loadSettings();
-})();
-</script>
+<script src="/static/admin.js" defer></script>
 {{template "foot" .}}

internal/web/templates/can.html

@@ -1,7 +1,7 @@
 {{template "head" .}}
 {{template "topbar" .}}
 <div class="center">
-  <div class="float can-page" style="max-width:900px; width:100%;">
+  <div class="float can-page">
     <div class="inner">
       <h1>{{.Title}} <span class="badge" title="This is a can — a bundle of pastes">can</span></h1>
       {{if .HasDescription}}<p class="sub">{{.Description}}</p>{{end}}

internal/web/templates/foot.html

@@ -1,21 +1 @@
-{{define "foot"}}<script>
-// live relative-time counters (#46): tick any [data-ts] (epoch seconds) every second
-(function () {
-  function fmt(ts) {
-    const s = Math.max(0, Math.floor(Date.now() / 1000) - ts);
-    if (s < 60) return s + 's ago';
-    if (s < 3600) return Math.floor(s / 60) + 'm ago';
-    if (s < 86400) return Math.floor(s / 3600) + 'h ago';
-    return Math.floor(s / 86400) + 'd ago';
-  }
-  function tick() {
-    document.querySelectorAll('[data-ts]').forEach(el => {
-      const ts = parseInt(el.dataset.ts, 10);
-      if (!isNaN(ts)) el.textContent = fmt(ts);
-    });
-  }
-  setInterval(tick, 1000);
-  document.addEventListener('DOMContentLoaded', tick);
-  tick();
-})();
-</script>{{end}}
+{{define "foot"}}<script src="/static/foot.js" defer></script>{{end}}

internal/web/templates/history.html

@@ -8,19 +8,19 @@
   <div class="search"><input id="filter" placeholder="Search…"><span class="search-spinner" id="search-spinner"></span></div>
   <div class="float">
     <table>
-      <colgroup><col style="width:260px"><col style="width:140px"><col style="width:120px"><col style="width:96px"><col style="width:140px"><col style="width:190px"><col style="width:100px"></colgroup>
+      <colgroup><col class="col-a"><col class="col-b"><col class="col-c"><col class="col-d"><col class="col-e"><col class="col-f"><col class="col-g"></colgroup>
       <thead><tr>
-        <th data-sort="title" class="sortable"><span class="sort-ind"></span>Paste</th>
-        <th data-sort="language" class="sortable"><span class="sort-ind"></span>Language</th>
-        <th data-sort="size" class="sortable"><span class="sort-ind"></span>Size</th>
-        <th data-sort="view_count" class="sortable"><span class="sort-ind"></span>Views</th>
-        <th data-sort="created_at" class="sortable"><span class="sort-ind"></span>Created</th>
-        <th data-sort="custom_slug" class="sortable"><span class="sort-ind"></span>URL</th>
-        <th data-sort="id" class="sortable"><span class="sort-ind"></span>ID</th>
+        <th data-sort="title" class="sortable">Paste<span class="sort-ind"></span></th>
+        <th data-sort="type" class="sortable">Type<span class="sort-ind"></span></th>
+        <th data-sort="size" class="sortable">Size<span class="sort-ind"></span></th>
+        <th data-sort="view_count" class="sortable">Views<span class="sort-ind"></span></th>
+        <th data-sort="created_at" class="sortable">Created<span class="sort-ind"></span></th>
+        <th data-sort="custom_slug" class="sortable">URL<span class="sort-ind"></span></th>
+        <th data-sort="id" class="sortable">ID<span class="sort-ind"></span></th>
       </tr></thead>
       <tbody id="rows"></tbody>
     </table>
-    <div class="empty" id="empty" style="display:none">No pastes yet. Create the first one.</div>
+    <div class="empty hidden" id="empty">No pastes yet. Create the first one.</div>
   </div>
   <div class="pager float">
     <span id="showing"></span>
@@ -28,25 +28,5 @@
   </div>
 </div>
 <script src="/static/table.js"></script>
-<script>
-const t = PaletteTable.init({
-  endpoint: '/api/public',
-  perPage: 25,
-  hasPager: true,
-  rowHtml: it =>
-    `<tr class="row" data-href="/${t.esc(it.id)}"><td>` +
-    (it.title
-      ? `${t.esc(it.title)}${it.is_can ? ' <span class="badge" title="Can — bundle of items">can</span>' : ''}`
-      : `<a class="slug" href="/${t.esc(it.id)}">${t.esc(it.id)}</a>${it.is_can ? ' <span class="badge" title="Can — bundle of items">can</span>' : ''}`) +
-    `</td>` +
-    `<td><span class="badge">${t.esc(it.language || 'text')}</span></td>` +
-    `<td class="dim">${t.fmtSize(it.size)}</td><td class="dim">${it.view_count}</td><td class="dim" data-ts="${it.created_at}">${t.ago(it.created_at)}</td>` +
-    (it.custom_slug ? `<td><a class="slug url-link" href="/${t.esc(it.custom_slug)}">/${t.esc(it.custom_slug)}</a></td>` : `<td class="dim">none</td>`) +
-    `<td class="dim"><a class="id-link" href="/${t.esc(it.id)}">${t.esc(it.id)}</a></td></tr>`,
-  emptyFiltered: 'No pastes match your search.',
-  emptyAll: 'No pastes yet. Create the first one.',
-});
-t.load();
-setInterval(t.load, 30000); // auto-refresh history every 30s
-</script>
+<script src="/static/history.js" defer></script>
 {{template "foot" .}}

internal/web/templates/layout.html

@@ -2,18 +2,13 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="/static/app.css">
-<script>
-// preset preview hook (#16): ?theme=<name> sets data-preset for screenshots only
-(function () {
-  var t = new URLSearchParams(location.search).get('theme');
-  if (t) document.documentElement.dataset.preset = t;
-})();
-</script>
+<link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
+<script src="/static/theme.js" data-default-dark="{{ if defaultDark }}1{{ else }}0{{ end }}"></script>
 {{end}}
 
 {{define "topbar"}}
   <div class="topbar">
-    <a class="logo" href="/history">Palette <em>/ beta</em></a>
+    <a class="logo" href="/history">Palette <em>/ {{ version }}</em></a>
     <nav>
       <a href="/new" {{if eq .Page "new"}}class="on"{{end}}>New</a>
       <a href="/history" {{if eq .Page "history"}}class="on"{{end}}>Public</a>
@@ -21,8 +16,13 @@
       <a href="https://git.archfox.org/poslop/palette" target="_blank" rel="noopener">Git<svg class="ext" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg></a>
     </nav>
     <div class="spacer"></div>
-    <a class="iconbtn gear" href="/settings" title="Settings" aria-label="Settings">
+    <button class="iconbtn dark-toggle" id="dark-toggle" type="button" title="Toggle dark mode" aria-label="Toggle dark mode">
+      <svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
+      <svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
+    </button>
+    <a class="iconbtn gear{{if eq .Page "settings"}} on{{end}}" href="/settings" title="Settings" aria-label="Settings">
       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
     </a>
   </div>
+  <script src="/static/topbar.js" defer></script>
 {{end}}

internal/web/templates/mine.html

@@ -8,18 +8,19 @@
   <div class="search"><input id="filter" placeholder="Search…"><span class="search-spinner" id="search-spinner"></span></div>
   <div class="float">
     <table>
-      <colgroup><col style="width:260px"><col style="width:140px"><col style="width:120px"><col style="width:150px"><col style="width:190px"><col style="width:100px"></colgroup>
+      <colgroup><col class="col-a"><col class="col-b"><col class="col-c"><col class="col-d2"><col class="col-e"><col class="col-f"><col class="col-del"></colgroup>
       <thead><tr>
-        <th data-sort="title" class="sortable"><span class="sort-ind"></span>Paste</th>
-        <th data-sort="language" class="sortable"><span class="sort-ind"></span>Language</th>
-        <th data-sort="size" class="sortable"><span class="sort-ind"></span>Size</th>
-        <th data-sort="created_at" class="sortable"><span class="sort-ind"></span>Created</th>
-        <th data-sort="custom_slug" class="sortable"><span class="sort-ind"></span>URL</th>
-        <th data-sort="id" class="sortable"><span class="sort-ind"></span>ID</th>
+        <th data-sort="title" class="sortable">Paste<span class="sort-ind"></span></th>
+        <th data-sort="type" class="sortable">Type<span class="sort-ind"></span></th>
+        <th data-sort="size" class="sortable">Size<span class="sort-ind"></span></th>
+        <th data-sort="created_at" class="sortable">Created<span class="sort-ind"></span></th>
+        <th data-sort="custom_slug" class="sortable">URL<span class="sort-ind"></span></th>
+        <th data-sort="id" class="sortable">ID<span class="sort-ind"></span></th>
+        <th aria-label="Delete"></th>
       </tr></thead>
       <tbody id="rows"></tbody>
     </table>
-    <div class="empty" id="empty" style="display:none">No pastes from this browser yet.</div>
+    <div class="empty hidden" id="empty">No pastes from this browser yet.</div>
   </div>
   <div class="pager float">
     <span id="showing"></span>
@@ -27,51 +28,5 @@
   </div>
 </div>
 <script src="/static/table.js"></script>
-<script>
-function toast(msg, kind) {
-  let t = document.querySelector('.toast');
-  if (!t) { t = document.createElement('div'); t.className = 'toast'; document.body.appendChild(t); }
-  t.textContent = msg;
-  t.classList.remove('success', 'error');
-  if (kind === 'success') t.classList.add('success');
-  if (kind === 'error') t.classList.add('error');
-  t.classList.add('show');
-  clearTimeout(t._h);
-  t._h = setTimeout(() => t.classList.remove('show'), 2000);
-}
-
-const t = PaletteTable.init({
-  endpoint: '/api/mine',
-  perPage: 25,
-  hasPager: true,
-  rowHtml: it =>
-    `<tr class="row" data-href="/${t.esc(it.id)}"><td>` +
-    (it.title
-      ? `${t.esc(it.title)}${it.is_can ? ' <span class="badge" title="Can — bundle of items">can</span>' : ''}`
-      : `<a class="slug" href="/${t.esc(it.id)}">${t.esc(it.id)}</a>${it.is_can ? ' <span class="badge" title="Can — bundle of items">can</span>' : ''}`) +
-    `</td>` +
-    `<td><span class="badge">${t.esc(it.language || 'text')}</span></td>` +
-    `<td class="dim">${t.fmtSize(it.size)}</td><td class="dim" data-ts="${it.created_at}">${t.ago(it.created_at)}</td>` +
-    (it.custom_slug ? `<td><a class="slug url-link" href="/${t.esc(it.custom_slug)}">/${t.esc(it.custom_slug)}</a></td>` : `<td class="dim">none</td>`) +
-    `<td class="dim"><a class="id-link" href="/${t.esc(it.id)}">${t.esc(it.id)}</a></td>` +
-    `<td><button class="btn btn-icon del" data-id="${t.esc(it.id)}" title="Delete paste" aria-label="Delete paste">&times;</button></td></tr>`,
-  emptyFiltered: 'No pastes from this browser match your search.',
-  emptyAll: 'No pastes from this browser yet.',
-});
-
-// delete buttons (viewer-scoped, enforced server-side #37)
-document.getElementById('rows').addEventListener('click', async e => {
-  const del = e.target.closest('button.del');
-  if (!del) return;
-  e.stopPropagation();
-  del.disabled = true;
-  try {
-    const res = await fetch('/api/pastes/' + del.dataset.id, { method: 'DELETE' });
-    if (res.ok) { toast('Deleted', 'success'); t.load(); }
-    else { toast('Delete failed', 'error'); del.disabled = false; }
-  } catch (err) { toast('Delete failed', 'error'); del.disabled = false; }
-});
-
-t.load();
-</script>
+<script src="/static/mine.js" defer></script>
 {{template "foot" .}}

internal/web/templates/new.html

@@ -4,7 +4,10 @@
   <div class="pane-l-col">
     <div class="float pane-l-head">
       <div class="editor-head">
+        <div class="editor-head-title">
           <input id="title" placeholder="Title">
+        </div>
+        <div class="editor-head-settings">
         <select id="language">
           <option value="">auto</option>
           <option>go</option><option>python</option><option>javascript</option><option>typescript</option>
@@ -16,16 +19,18 @@
           <option>markdown</option><option>text</option>
         </select>
         <button class="btn btn-icon" id="reguess" title="Re-detect language" type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12a9 9 0 1 1-2.64-6.36"/><polyline points="21 3 21 9 15 9"/></svg></button>
+        <button type="button" class="btn btn-icon wrap-toggle" id="wrap-toggle" title="Toggle line wrap" aria-pressed="false">Wrap</button>
+        </div>
       </div>
     </div>
     <div class="float editor-wrap">
       <div class="gutter" id="gutter">1</div>
       <textarea class="editor" id="content" placeholder="Paste your code, text, or notes here…" spellcheck="false"></textarea>
+      <img id="file-preview" class="file-preview hidden" alt="File preview">
     </div>
-    <div class="created-banner" id="created"></div>
     <div class="actionbar">
       <span class="hint">Ctrl+Enter to create</span>
-      <div class="spacer" style="flex:1"></div>
+      <div class="spacer spacer-flex"></div>
       <button class="btn" id="create">Create</button>
     </div>
   </div>
@@ -41,310 +46,48 @@
         <label><input type="radio" name="exp" value="720h"> 30 days</label>
         <label><input type="radio" name="exp" value="custom"> Custom</label>
       </div>
-      <div class="pw-row" id="customexp-row" style="display:none">
-        <input type="number" id="expnum" min="1" style="width:80px" placeholder="90"> 
-        <select id="expunit">
+      <div class="pw-row submenu hidden" id="customexp-row">
+        <div class="exp-group">
+          <input type="number" class="num-input" id="expnum" min="1" placeholder="90" aria-label="Custom expiry amount">
+          <select id="expunit" class="unit-select">
             <option value="m">minutes</option>
             <option value="h" selected>hours</option>
             <option value="d">days</option>
             <option value="w">weeks</option>
             <option value="mo">months</option>
           </select>
-        <div class="hint" id="customexp-err" style="display:none; color:var(--danger, #c0392b); margin-top:6px;"></div>
+        </div>
+        <div class="hint danger-hint hidden" id="customexp-err"></div>
       </div>
     </div>
     <div class="float side-section">
       <h3>Protection</h3>
       <div class="protect">
         <label class="toggle"><input type="checkbox" id="haspw"> Password lock</label>
-        <div class="pw-row" id="pwrow" style="display:none"><div class="pw-field"><input type="password" id="password" placeholder="Password" autocomplete="new-password"><button type="button" class="reveal" id="pwreveal" title="Show password" tabindex="-1"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"/><circle cx="12" cy="12" r="3"/><line class="eye-slash" x1="4" y1="4" x2="20" y2="20"/></svg></button></div></div>
+        <div class="pw-row hidden" id="pwrow"><div class="pw-field"><input type="password" id="password" placeholder="Password" autocomplete="new-password"><button type="button" class="reveal" id="pwreveal" title="Show password" tabindex="-1"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"/><circle cx="12" cy="12" r="3"/><line class="eye-slash" x1="4" y1="4" x2="20" y2="20"/></svg></button></div></div>
         <label class="toggle"><input type="checkbox" id="burn"> Burn after read</label>
-        <div class="pw-row" id="burnrow" style="display:none"><label class="hint" style="font-size:19px;">Readable <input type="number" id="burnreads" min="1" value="1" style="width:64px"> times</label></div>
+        <div class="pw-row submenu hidden" id="burnrow"><div class="exp-group readable-group"><label class="hint readable-label">Readable</label><input type="number" class="num-input" id="burnreads" min="1" value="1" aria-label="Times readable"><label class="hint readable-label">times</label></div></div>
         <label class="toggle"><input type="checkbox" id="unlisted"> Unlisted</label>
       </div>
     </div>
     <div class="float side-section">
-      <h3>Custom URL</h3>
-      <input type="text" id="custom" class="custom-input" placeholder="/my-snippet">
-      <div class="hint" style="margin-top:6px; font-size:19px;">Stays reserved while the paste exists</div>
+      <h3>Attachment</h3>
+      <div class="dropzone" id="dropzone" title="Paste (Ctrl+V), drop a file here, or click to browse">
+        Drop a file here, press Ctrl+V, or click to browse
+      </div>
+      <input type="file" id="file-input" class="file-input" aria-label="Choose a file">
+      <div id="file-chip-slot"></div>
+      <div class="hint hint-lg hidden mt6" id="file-text-note">File pastes ignore the text editor (one file per paste)</div>
     </div>
     <div class="float side-section">
-      <h3>Can contents</h3>
-      <label class="toggle"><input type="checkbox" id="iscan"> Bundle as a can (multiple text items)</label>
-      <div class="pw-row" id="canrow" style="display:none">
-        <div id="can-items"></div>
-        <button class="btn btn-icon" id="can-add" type="button" title="Add item" style="margin-top:6px">+ Add item</button>
-        <div class="hint" style="margin-top:6px; font-size:19px;">Each item gets its own card on the can page. File uploads in cans come later.</div>
+      <h3>Custom URL</h3>
+      <input type="text" id="custom" class="custom-input" placeholder="my-snippet">
     </div>
-    </div>
-    <div class="float side-section" id="result-card" style="display:none">
+    <div class="float side-section hidden" id="result-card">
       <h3>Result</h3>
-      <div class="hint" id="result" style="word-break:break-all">empty</div>
+      <div class="hint wrap-normal" id="result">empty</div>
     </div>
   </div>
 </div>
-<script>
-const $ = id => document.getElementById(id);
-const content = $('content'), gutter = $('gutter');
-
-function updateGutter() {
-  const lines = content.value.split('\n').length;
-  let s = '';
-  for (let i = 1; i <= Math.max(lines, 1); i++) s += i + '\n';
-  gutter.textContent = s;
-}
-content.addEventListener('input', updateGutter);
-updateGutter();
-
-function toast(msg, kind) {
-  let t = document.querySelector('.toast');
-  if (!t) { t = document.createElement('div'); t.className = 'toast'; document.body.appendChild(t); }
-  t.textContent = msg;
-  t.classList.remove('success', 'error');
-  if (kind === 'success') t.classList.add('success');
-  if (kind === 'error') t.classList.add('error');
-  t.classList.add('show');
-  clearTimeout(t._h);
-  t._h = setTimeout(() => t.classList.remove('show'), 2000);
-}
-$('haspw').addEventListener('change', e => { $('pwrow').style.display = e.target.checked ? 'block' : 'none'; });
-$('burn').addEventListener('change', e => { $('burnrow').style.display = e.target.checked ? 'block' : 'none'; });
-document.querySelectorAll('input[name="exp"]').forEach(r => r.addEventListener('change', () => {
-  $('customexp-row').style.display = document.querySelector('input[name="exp"]:checked').value === 'custom' ? 'block' : 'none';
-  $('customexp-err').style.display = 'none';
-}));
-
-// compose the expires_in Go-duration string when Custom is checked (#48).
-// Returns the string, or null with an inline error shown.
-function composeCustomExpiry() {
-  const n = parseInt($('expnum').value, 10);
-  const unit = $('expunit').value;
-  let mins = NaN;
-  if (n > 0) {
-    if (unit === 'm') mins = n;
-    else if (unit === 'h') mins = n * 60;
-    else if (unit === 'd') mins = n * 1440;
-    else if (unit === 'w') mins = n * 10080;
-    else if (unit === 'mo') mins = n * 43200; // months counted as 30 days
-  }
-  const err = $('customexp-err');
-  if (!(mins >= 1)) {
-    err.textContent = 'Enter a duration of at least 1 minute.';
-    err.style.display = 'block';
-    return null;
-  }
-  if (mins > 525600) { // more than 1 year
-    err.textContent = 'Custom expiry cannot exceed 1 year.';
-    err.style.display = 'block';
-    return null;
-  }
-  err.style.display = 'none';
-  // compose as h (+d/m remainders); Go parses '336h', '90m', '6h30m' fine
-  const hours = Math.floor(mins / 60), rem = mins % 60;
-  if (rem === 0) return hours + 'h';
-  if (hours === 0) return rem + 'm';
-  return hours + 'h' + rem + 'm';
-}
-
-$('pwreveal').addEventListener('click', () => {
-  const pw = $('password');
-  const show = pw.type === 'password';
-  pw.type = show ? 'text' : 'password';
-  $('pwreveal').classList.toggle('off', !show);
-  $('pwreveal').title = show ? 'Hide password' : 'Show password';
-});
-
-// #4: can builder — multiple text items bundled into one shareable page.
-// The main editor becomes the first item; extra items are added below.
-$('iscan').addEventListener('change', e => {
-  $('canrow').style.display = e.target.checked ? 'block' : 'none';
-  if (e.target.checked && !$('can-items').children.length) addCanItem();
-});
-function addCanItem() {
-  const row = document.createElement('div');
-  row.className = 'can-item-row';
-  row.innerHTML = '<input class="can-item-title" placeholder="Item title">' +
-    '<textarea class="can-item-content" placeholder="Item content" rows="3" spellcheck="false"></textarea>';
-  $('can-items').appendChild(row);
-}
-$('can-add').addEventListener('click', addCanItem);
-
-let guessed = ''; // last auto-detected language, '' = user override
-
-function showResult(html, isError) {
-  $('result').innerHTML = html;
-  $('result').dataset.token = isError ? '' : ($('result').dataset.token || '');
-  $('result-card').style.display = 'block';
-}
-function defaultFilename(lang) {
-  const names = {
-    python: 'Python.py', go: 'main.go', javascript: 'script.js', typescript: 'index.ts',
-    rust: 'main.rs', c: 'main.c', cpp: 'main.cpp', java: 'Main.java', bash: 'script.sh',
-    sql: 'query.sql', yaml: 'config.yaml', json: 'data.json', html: 'index.html',
-    css: 'style.css', xml: 'doc.xml', php: 'index.php', ruby: 'main.rb',
-    perl: 'main.pl', lua: 'main.lua', dockerfile: 'Dockerfile', toml: 'config.toml',
-    ini: 'config.ini', diff: 'changes.diff',
-    markdown: 'notes.md', text: 'Text.txt',
-  };
-  return names[lang] || '';
-}
-// fill default filename when title is still blank
-function maybeSetDefaultTitle(lang) {
-  const title = $('title');
-  if (lang && !title.value.trim()) {
-    const fn = defaultFilename(lang);
-    if (fn) title.value = fn;
-  }
-}
-
-async function guessLang() {
-  if (!content.value.trim()) return;
-  try {
-    const res = await fetch('/api/guess-language', {
-      method: 'POST',
-      headers: {'Content-Type': 'application/json'},
-      body: JSON.stringify({content: content.value}),
-    });
-    const data = await res.json();
-    if (res.ok && data.language) {
-      guessed = data.language;
-      $('language').value = data.language;
-      maybeSetDefaultTitle(data.language);
-    }
-  } catch(e) {}
-}
-
-// refresh button: always re-detect, even if user picked something
-$('reguess').addEventListener('click', guessLang);
-
-// auto-guess when pasting into the editor
-content.addEventListener('paste', () => setTimeout(guessLang, 0));
-
-async function create() {
-  // #4: can mode — bundle the editor + extra items into a can via multipart
-  if ($('iscan').checked) return createCan();
-
-  const body = {
-    content: content.value,
-    title: $('title').value || null,
-    language: $('language').value || null,
-    custom_slug: $('custom').value || null,
-    burn_after_read: $('burn').checked,
-  };
-  if ($('burn').checked) body.burn_after_reads = parseInt($('burnreads').value, 10) || 1;
-  if ($('haspw').checked) body.password = $('password').value;
-  const exp = document.querySelector('input[name="exp"]:checked').value;
-  if (exp === 'custom') {
-    const dur = composeCustomExpiry();
-    if (dur === null) { toast('Check the custom expiry', 'error'); return; }
-    body.expires_in = dur;
-  } else if (exp) {
-    body.expires_in = exp;
-  }
-
-  const res = await fetch('/api/pastes', {
-    method: 'POST',
-    headers: {'Content-Type': 'application/json'},
-    body: JSON.stringify(body),
-  });
-  const data = await res.json();
-  if (!res.ok) {
-    showResult('Error: ' + (data.error || res.status), true);
-    toast('Create failed', 'error');
-    return;
-  }
-  const url = location.origin + '/' + (data.custom_slug || data.id);
-  showResult('<a href="' + url + '">' + url + '</a> <button class="btn btn-icon" id="result-copy" title="Copy URL" type="button">⧉</button>', false);
-  $('result').dataset.token = data.deletion_token || '';
-  const copyBtn = document.getElementById('result-copy');
-  copyBtn.addEventListener('click', () => {
-    try {
-      navigator.clipboard.writeText(url);
-      copyBtn.classList.add('ok');               // in-place success feedback (#53)
-      copyBtn.textContent = 'Success!';
-      setTimeout(() => { copyBtn.classList.remove('ok'); copyBtn.textContent = '⧉'; }, 2000);
-    } catch(e) { toast('Copy failed', 'error'); }
-  });
-  const dest = '/' + data.id + '?created=1&token=' + encodeURIComponent(data.deletion_token || '');
-  // password-protected: unlock now with the password we already have (#26)
-  if ($('haspw').checked && data.id) {
-    const fd = new FormData();
-    fd.append('password', $('password').value);
-    fd.append('next', dest);
-    try {
-      await fetch('/' + data.id, {method: 'POST', body: fd});
-    } catch(e) {}
-  }
-  // show the paste
-  location.href = dest;
-}
-$('create').addEventListener('click', create);
-
-// #4: can creation — POST multipart to /api/pastes/can. The main editor is
-// the first item; each extra can-item row is another text item.
-async function createCan() {
-  const items = [];
-  if (content.value.trim()) {
-    items.push({title: $('title').value || 'main', content: content.value, language: $('language').value || ''});
-  }
-  document.querySelectorAll('#can-items .can-item-row').forEach(row => {
-    const t = row.querySelector('.can-item-title').value.trim();
-    const c = row.querySelector('.can-item-content').value;
-    if (c.trim()) items.push({title: t || ('item-' + (items.length + 1)), content: c});
-  });
-  if (!items.length) { toast('Nothing to put in the can', 'error'); return; }
-
-  const fd = new FormData();
-  fd.append('title', $('title').value || 'Untitled can');
-  fd.append('json_items', JSON.stringify(items));
-  if ($('haspw').checked) fd.append('password', $('password').value);
-  if ($('unlisted').checked) fd.append('visibility', 'unlisted');
-  const exp = document.querySelector('input[name="exp"]:checked').value;
-  if (exp === 'custom') {
-    const dur = composeCustomExpiry();
-    if (dur === null) { toast('Check the custom expiry', 'error'); return; }
-    if (dur) fd.append('expires_in', dur);
-  } else if (exp) {
-    fd.append('expires_in', exp);
-  }
-  if ($('custom').value.trim()) fd.append('custom_slug', $('custom').value.trim());
-
-  const res = await fetch('/api/pastes/can', {method: 'POST', body: fd});
-  const data = await res.json();
-  if (!res.ok) {
-    showResult('Error: ' + (data.error || res.status), true);
-    toast('Can create failed', 'error');
-    return;
-  }
-  const url = location.origin + data.url;
-  showResult('<a href="' + url + '">' + url + '</a> <button class="btn btn-icon" id="result-copy" title="Copy URL" type="button">⧉</button>', false);
-  const copyBtn = document.getElementById('result-copy');
-  copyBtn.addEventListener('click', () => {
-    try {
-      navigator.clipboard.writeText(url);
-      copyBtn.classList.add('ok');
-      copyBtn.textContent = 'Success!';
-      setTimeout(() => { copyBtn.classList.remove('ok'); copyBtn.textContent = '⧉'; }, 2000);
-    } catch(e) { toast('Copy failed', 'error'); }
-  });
-  // password-protected can: unlock now with the password we already have (#26 parity)
-  if ($('haspw').checked && data.id) {
-    const pd = new FormData();
-    pd.append('password', $('password').value);
-    try { await fetch('/can/' + data.id, {method: 'POST', body: pd}); } catch(e) {}
-  }
-  location.href = data.url;
-}
-// reset stale result state when returning via Back (bfcache) (#28)
-window.addEventListener('pageshow', e => {
-  if (!e.persisted) return;
-  const rc = document.getElementById('result-card');
-  if (rc) rc.style.display = 'none';
-  const r = document.getElementById('result');
-  if (r) { r.innerHTML = 'empty'; delete r.dataset.token; }
-});
-document.addEventListener('keydown', e => {
-  if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') { e.preventDefault(); create(); }
-});
-</script>
+<script src="/static/new.js" defer></script>
 {{template "foot" .}}

internal/web/templates/notfound.html

@@ -0,0 +1,13 @@
+{{template "head" .}}
+{{template "topbar" .}}
+<div class="center">
+  <div class="float notfound-card">
+    <div class="inner">
+      <div class="lockring"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg></div>
+      <h1>Paste ID not found</h1>
+      <p class="sub">The paste <span class="slug">/{{.ID}}</span> does not exist, has expired, or was burned.</p>
+      <a class="btn" href="/new">Create a new paste</a>
+    </div>
+  </div>
+</div>
+{{template "foot" .}}

internal/web/templates/paste.html

@@ -6,20 +6,22 @@
       <h1>{{if .Title}}{{.Title}}{{else}}Untitled paste{{end}}</h1>
       {{if .CustomSlug}}<span class="slug">/{{.CustomSlug}}</span>{{end}}
       <div class="spacer"></div>
-      <a class="iconbtn" href="/raw/{{.ID}}">raw</a>
-      <a class="iconbtn" href="#" id="copy-btn" onclick="copyContent(this); return false;">copy</a>
-      {{if .DeletionToken}}<a class="iconbtn danger" href="#" onclick="redeem('{{.DeletionToken}}'); return false;">delete</a>{{end}}
+      <button type="button" class="iconbtn wrap-toggle" title="Toggle line wrap" aria-pressed="false">Wrap</button>
+      <a class="iconbtn" href="/raw/{{.ID}}">Raw</a>
+      <a class="iconbtn" href="#" id="copy-link-btn">Link</a>
+      <a class="iconbtn" href="#" id="copy-btn">Copy</a>
+      {{if .DeletionToken}}<a class="iconbtn danger" href="#" id="delete-btn">Delete</a>{{end}}
     </div>
   </div>
   <div class="float">
     <div class="stats-pill" id="stats-pill">
-      <button type="button" class="stats-head" id="stats-toggle" aria-expanded="false" onclick="toggleStats()">
+      <button type="button" class="stats-head" id="stats-toggle" aria-expanded="false">
         <svg class="stats-chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg>
         <span class="stats-summary">{{.StatsSummary}}</span>
       </button>
       <div class="stats-body" id="stats-body" hidden>
         <div class="stats-grid">
-          <span class="stats-k">Language</span><span class="stats-v">{{if .Language}}{{.Language}}{{else}}text{{end}}</span>
+          <span class="stats-k">Type</span><span class="stats-v">{{.TypeLabel}}</span>
           <span class="stats-k">Size</span><span class="stats-v">{{.SizeHuman}} ({{.LineCount}} lines)</span>
           <span class="stats-k">Views</span><span class="stats-v">{{.ViewCount}}</span>
           <span class="stats-k">Created</span><span class="stats-v" data-ts="{{.CreatedAtUnix}}">{{.CreatedAgo}}</span>
@@ -33,52 +35,28 @@
     </div>
   </div>
   {{if .JustCreated}}
+  <div class="created-pill" id="created-pill" role="status">Paste Created</div>
+  {{end}}
+  {{if .Attachment}}
   <div class="float">
-    <div class="created-banner" style="display:block">
-      Paste created. Link copied to clipboard: <a href="/{{.ID}}">{{.Host}}/{{.ID}}</a>
-      {{if .DeletionToken}} · deletion token: <code>{{.DeletionToken}}</code>{{end}}
+    <div class="attachment-bar">
+      {{if .AttachmentImage}}
+      <div class="attachment-preview"><img src="/f/{{.Attachment.ID}}/{{.Attachment.Filename}}" alt="{{.Attachment.Filename}}"></div>
+      {{end}}
+      <a class="attachment-chip" href="/f/{{.Attachment.ID}}/{{.Attachment.Filename}}" data-mime="{{.Attachment.Mime}}">
+        <span class="attachment-name">{{.Attachment.Filename}}</span>
+        <span class="attachment-size">{{.Attachment.SizeHuman}}</span>
+      </a>
     </div>
   </div>
   {{end}}
+  {{if not .AttachmentImage}}
   <div class="float">
-    <div class="code"><div class="gutter">{{.Gutter}}</div><div class="codebody" id="codebody">{{.ContentHTML}}</div></div>
+    <div class="code" id="code"><div class="gutter" id="gutter">{{.Gutter}}</div><div class="codebody" id="codebody">{{.ContentHTML}}</div></div>
   </div>
+  {{end}}
 </div>
 <input type="hidden" id="raw-content" value="{{.ContentAttr}}">
-<script>
-function toast(msg) {
-  let t = document.querySelector('.toast');
-  if (!t) { t = document.createElement('div'); t.className = 'toast'; document.body.appendChild(t); }
-  t.textContent = msg;
-  t.classList.add('show');
-  clearTimeout(t._h);
-  t._h = setTimeout(() => t.classList.remove('show'), 2000);
-}
-function toggleStats() {
-  const body = document.getElementById('stats-body');
-  const pill = document.getElementById('stats-pill');
-  const btn = document.getElementById('stats-toggle');
-  const open = body.hidden;
-  body.hidden = !open;
-  pill.classList.toggle('open', open);
-  btn.setAttribute('aria-expanded', open ? 'true' : 'false');
-}
-function copyContent(btn) {
-  navigator.clipboard.writeText(document.getElementById('raw-content').value);
-  // in-place success feedback (#53)
-  if (btn) {
-    btn.classList.add('ok');
-    btn.textContent = 'Success!';
-    clearTimeout(btn._okh);
-    btn._okh = setTimeout(() => { btn.classList.remove('ok'); btn.textContent = 'copy'; }, 2000);
-  } else {
-    toast('Copied', 'success');
-  }
-}
-function redeem(token) {
-  if (!confirm('Hard delete this paste immediately?')) return;
-  fetch('/api/pastes/{{.ID}}/redeem?token=' + encodeURIComponent(token), {method: 'DELETE'})
-    .then(r => { if (r.ok) location.href = '/history'; else alert('delete failed'); });
-}
-</script>
+<script src="/static/paste.js" defer data-paste-id="{{.ID}}"></script>
+<script src="/static/paste-lines.js" defer></script>
 {{template "foot" .}}

internal/web/templates/settings.html

@@ -6,9 +6,18 @@
       <h1>Settings</h1>
     </div>
     <div class="settings-body">
-      <p>Settings are under construction.</p>
+      <button class="iconbtn dark-toggle" id="settings-dark-toggle" type="button" title="Toggle dark mode" aria-label="Toggle dark mode">
+        <svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
+        <svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
+        <span>Dark mode</span>
+      </button>
+      <h3>Theme</h3>
+      <div class="theme-grid" id="theme-grid"></div>
+      <h3 class="mt18">Editor</h3>
+      <label class="toggle toggle-inline" for="wrap-setting"><input type="checkbox" id="wrap-setting"> Line wrap</label>
       <p class="admin-link-row"><a class="admin-link" href="/admin">Admin</a></p>
     </div>
   </div>
 </div>
+<script src="/static/settings.js" defer></script>
 {{template "foot" .}}

internal/web/templates/unlock.html

@@ -18,12 +18,5 @@
     <div class="foot">Created <span data-ts="{{.CreatedAtUnix}}">{{.CreatedAgo}}</span></div>
   </div>
 </div>
-<script>
-document.getElementById('pwreveal').addEventListener('click', () => {
-  const pw = document.getElementById('password');
-  const show = pw.type === 'password';
-  pw.type = show ? 'text' : 'password';
-  document.getElementById('pwreveal').title = show ? 'Hide password' : 'Show password';
-});
-</script>
+<script src="/static/unlock.js" defer></script>
 {{template "foot" .}}

internal/web/web.go

@@ -24,6 +24,44 @@ import (
 //go:embed templates/*.html
 var tmplFS embed.FS
 
+// DefaultDark is the server-configured default dark mode state for visitors
+// without stored preferences (#127). Set via PALETTE_DEFAULT_DARK.
+var DefaultDark = true
+
+// SetDefaultDark applies the PALETTE_DEFAULT_DARK env var: unset = dark on,
+// "false"/"0"/"off" = dark off.
+func SetDefaultDark(v string) {
+	switch strings.ToLower(strings.TrimSpace(v)) {
+	case "false", "0", "off":
+		DefaultDark = false
+	default:
+		DefaultDark = true
+	}
+}
+
+// ResolvePreset maps a theme pair id (or explicit variant id) plus dark state
+// to a concrete preset id. Returns the defaults when pair is empty or unknown.
+// Precedence handled by callers: URL ?theme= > stored pair+dark > defaults.
+func ResolvePreset(pair string, dark bool) string {
+	variants := map[string][2]string{ // pair -> {light, dark}
+		"midnight":        {"midnight-light", "midnight"},
+		"smooth":          {"smooth", "smooth-dark"},
+		"pastel-lavender": {"pastel-lavender", "pastel-lavender-dark"},
+		"pastel-peach":    {"pastel-peach", "pastel-peach-dark"},
+		"pastel-cloud":    {"pastel-cloud", "pastel-cloud-dark"},
+	}
+	if v, ok := variants[pair]; ok {
+		if dark {
+			return v[1]
+		}
+		return v[0]
+	}
+	if dark {
+		return "midnight"
+	}
+	return "midnight-light"
+}
+
 //go:embed static
 var staticFS embed.FS
 
@@ -35,6 +73,7 @@ func New() (*UI, error) {
 	funcs := template.FuncMap{
 		"humanSize":   humanSize,
 		"version":     func() string { return Version },   // #93: topbar version label
+		"defaultDark": func() bool { return DefaultDark }, // #127: server-configured default
 	}
 	t, err := template.New("").Funcs(funcs).ParseFS(tmplFS, "templates/*.html")
 	if err != nil {
@@ -65,6 +104,13 @@ func (h *Handlers) renderPage(w http.ResponseWriter, name string, data any) {
 	}
 }
 
+// RenderNotFoundPage is the exported not-found renderer used by the api
+// package (#173): the router's NotFound handler renders the main UI with a
+// friendly "Paste ID not found" message, still with HTTP 404.
+func (h *Handlers) RenderNotFoundPage(w http.ResponseWriter, r *http.Request) {
+	h.renderNotFound(w, r, r.URL.Path)
+}
+
 // RenderPage is the exported wrapper used by the api package (#4 can pages).
 func (h *Handlers) RenderPage(w http.ResponseWriter, name string, data any) {
 	h.renderPage(w, name, data)
@@ -161,6 +207,44 @@ func (h *Handlers) writeRateLimited(w http.ResponseWriter, retryAfterSecs int) {
 	w.Write([]byte(`{"error":"rate limit exceeded"}`))
 }
 
+// renderNotFound serves the friendly not-found page (#173): the main UI
+// chrome (topbar, centered card) with a "Paste ID not found" message in the
+// result card, instead of a bare text 404. Still returns HTTP 404 so
+// crawlers/validators see the correct status.
+func (h *Handlers) renderNotFound(w http.ResponseWriter, r *http.Request, id string) {
+	h.renderPageStatus(w, "notfound.html", http.StatusNotFound, map[string]any{"Page": "notfound", "ID": id})
+}
+
+// HandleNotFoundPage serves the friendly not-found page for unknown routes
+// (#173): main UI chrome with a "Paste ID not found" message. Called from the
+// chi NotFound handler in the api package.
+func (h *Handlers) HandleNotFoundPage(w http.ResponseWriter, r *http.Request) {
+	h.renderNotFound(w, r, r.URL.Path)
+}
+
+// renderPageStatus renders a template with an explicit HTTP status code.
+func (h *Handlers) renderPageStatus(w http.ResponseWriter, name string, status int, data any) {
+	w.Header().Set("Content-Type", "text/html; charset=utf-8")
+	w.WriteHeader(status)
+	if err := h.UI.tmpl.ExecuteTemplate(w, name, data); err != nil {
+		http.Error(w, "template error: "+err.Error(), 500)
+	}
+}
+
+// attachmentExt returns the lowercase file extension (without dot) of a
+// filename, or "" when the name has none. Used by the Type display (#235).
+func attachmentExt(filename string) string {
+	name := filename
+	if i := strings.LastIndexByte(name, '/'); i >= 0 {
+		name = name[i+1:]
+	}
+	i := strings.LastIndexByte(name, '.')
+	if i <= 0 || i == len(name)-1 {
+		return ""
+	}
+	return strings.ToLower(name[i+1:])
+}
+
 func (h *Handlers) renderPaste(w http.ResponseWriter, row *store.PasteRow, justCreated bool, deletionToken string, readsRemaining *int) {
 	lines := strings.Count(row.Content, "\n") + 1
 	gutter := ""
@@ -175,21 +259,62 @@ func (h *Handlers) renderPaste(w http.ResponseWriter, row *store.PasteRow, justC
 	if lang == "" {
 		lang = "text"
 	}
-	summary := fmt.Sprintf("%s · %s · %d views · %s", lang, humanSize(len(row.Content)), row.ViewCount, agoString(row.CreatedAt))
+	// #38: one optional file attachment per paste; nil when none.
+	attachment, err := h.Store.GetAttachmentForPaste(row.ID)
+	if err != nil {
+		http.Error(w, "db error", 500)
+		return
+	}
+	// #221: for attachment pastes the stored text content is empty (the file
+	// replaced it), so the summary size must come from the attachment blob,
+	// not len(row.Content), or the summary shows "0 B".
+	summarySize := len(row.Content)
+	if attachment != nil {
+		summarySize = int(attachment.Size)
+	}
+	// #235: column renamed to "Type". Text pastes keep the detected
+	// language; attachment pastes show the file extension instead.
+	attExt := ""
+	typeLabel := lang
+	if attachment != nil {
+		if ext := attachmentExt(attachment.Filename); ext != "" {
+			attExt = ext
+			typeLabel = ext
+		}
+	}
+	summary := fmt.Sprintf("%s · %s · %d views · %s", typeLabel, humanSize(summarySize), row.ViewCount, agoString(row.CreatedAt))
+	// #221: image attachments render the image, not a text/code box. Size
+	// comes from the attachment's actual file size, not the text content.
+	attImage := false
+	if attachment != nil {
+		switch attachment.Mime {
+		case "image/png", "image/jpeg", "image/gif", "image/webp":
+			attImage = true
+		}
+	}
+	sizeHuman := humanSize(len(row.Content))
+	lineCount := lines
+	if attachment != nil {
+		sizeHuman = attachment.SizeHuman
+		lineCount = 1
+	}
 	data := map[string]any{
 		"Page":          "paste",
 		"ID":            row.ID,
 		"Title":         row.Title.String,
-		"Language":      row.Language.String,
+		"Language":      typeLabel,
+		"TypeLabel":     typeLabel,
+		"HasAttachment":  attachment != nil,
+		"AttachmentExt": attExt,
 		"StatsSummary":  summary,
-		"SizeHuman":     humanSize(len(row.Content)),
+		"SizeHuman":     sizeHuman,
 		"HasPassword":   row.PasswordHash.Valid,
 		"BurnAfterRead": row.BurnAfterRead,
 		"CustomSlug":    row.CustomSlug.String,
 		"ContentHTML":   template.HTML(langpkg.HighlightCode(row.Content, row.Language.String)), // safe: HighlightCode escapes all non-span text
 		"ContentAttr":   row.Content,
 		"Gutter":        strings.TrimSuffix(gutter, "\n"),
-		"LineCount":     lines,
+		"LineCount":     lineCount,
 		"SizeBytes":     len(row.Content),
 		"CreatedAgo":    agoString(row.CreatedAt),
 		"CreatedAtUnix": row.CreatedAt,
@@ -202,6 +327,8 @@ func (h *Handlers) renderPaste(w http.ResponseWriter, row *store.PasteRow, justC
 		"ReadsLeftN":    readsRemaining, // *int: reads remaining after this view
 		"ReadsTotal":    int(row.ReadsLimit.Int64),
 		"JustCreated":   justCreated,
+		"Attachment":    attachment,
+		"AttachmentImage": attImage,
 		"Host":          "this host",
 	}
 	h.renderPage(w, "paste.html", data)
@@ -216,11 +343,14 @@ func (h *Handlers) HandlePasteView(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 	if row == nil {
-		http.NotFound(w, r)
+		// #173: a missing paste ID gets the main UI with a friendly message,
+		// not a bare text 404 page.
+		h.renderNotFound(w, r, id)
 		return
 	}
 	if row.ExpiresAt.Valid && row.ExpiresAt.Int64 < time.Now().Unix() {
-		http.Error(w, "paste expired", 404)
+		// #173: expired pastes render the same friendly not-found UI.
+		h.renderNotFound(w, r, id)
 		return
 	}
 	if row.PasswordHash.Valid {
@@ -264,9 +394,15 @@ func (h *Handlers) HandlePasteView(w http.ResponseWriter, r *http.Request) {
 	}
 
 	justCreated := r.URL.Query().Get("created") == "1"
-	token := r.URL.Query().Get("token")
+	// #143: the deletion token is no longer round-tripped through the URL
+	// (?token= leaks into access logs and history). The create flow sets a
+	// short-lived tok_<id> cookie; the paste view reads it once from there.
+	token := ""
+	if c, err := r.Cookie("tok_" + row.ID); err == nil {
+		token = c.Value
+	}
 	if justCreated && token != "" {
-		// one-time display of the deletion token via the created banner
+		// one-time display of the deletion token via sessionStorage (#143)
 		http.SetCookie(w, &http.Cookie{Name: "tok_" + row.ID, Value: token, Path: "/", MaxAge: 60, HttpOnly: true, SameSite: http.SameSiteLaxMode})
 	}
 	// Count the view for real page renders, deduped per-viewer within the
@@ -281,8 +417,8 @@ func (h *Handlers) HandlePasteView(w http.ResponseWriter, r *http.Request) {
 	// Just-created first render does not count as a read for the creator.
 	if !justCreated {
 		rem, admitted := h.Store.RegisterRead(row, h.ViewerID(r), h.BurnWindowMin())
-		if !admitted { // #58: lost the burn claim; do not render content
-			http.NotFound(w, r)
+		if !admitted { // #58: lost the burn claim; #173: friendly not-found UI
+			h.renderNotFound(w, r, row.ID)
 			return
 		}
 		h.renderPaste(w, row, false, "", rem)
@@ -331,8 +467,12 @@ func (u *UI) Handlers() *Handlers { return &Handlers{UI: u} }
 
 // #59: security headers for rendered HTML pages. Applied wherever the
 // response is text/html (page templates and the inline can page); JSON API
-// responses and /raw content pass through untouched. script-src allows
-// 'unsafe-inline' because the page templates carry inline scripts; CSP
+// responses and /raw content pass through untouched.
+// #139: script-src and style-src no longer allow 'unsafe-inline'. All
+// previously-inline scripts moved to external files under static/ (page data
+// reaches them via data-* attributes on the script tags), inline style
+// attributes became CSS classes, and JS sets swatch colors via CSSOM. The
+// img-src data: allowance stays: SVG data-URI backgrounds in app.css need it.
 // default-src 'self' still blocks external content and object/frame embeds,
 // and frame-ancestors 'none' closes the clickjacking gap flagged in the #34
 // pentest. Runs after the handler so the Content-Type is already set.
@@ -344,7 +484,7 @@ func SecurityHeaders(next http.Handler) http.Handler {
 		// is harmless and arguably desirable.
 		h := w.Header()
 		h.Set("Content-Security-Policy",
-			"default-src 'self'; script-src 'self' 'unsafe-inline'; frame-ancestors 'none'")
+			"default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; frame-ancestors 'none'")
 		h.Set("Referrer-Policy", "no-referrer")
 		h.Set("X-Content-Type-Options", "nosniff")
 		next.ServeHTTP(w, r)

internal/web/web_test.go

@@ -0,0 +1,48 @@
+package web
+
+import "testing"
+
+func TestResolvePreset(t *testing.T) {
+	cases := []struct {
+		pair string
+		dark bool
+		want string
+	}{
+		{"", false, "midnight-light"},
+		{"", true, "midnight"},
+		{"midnight", false, "midnight-light"},
+		{"midnight", true, "midnight"},
+		{"smooth", false, "smooth"},
+		{"smooth", true, "smooth-dark"},
+		{"pastel-lavender", true, "pastel-lavender-dark"},
+		{"pastel-peach", false, "pastel-peach"},
+		{"pastel-cloud", true, "pastel-cloud-dark"},
+		{"bogus", true, "midnight"},
+		{"bogus", false, "midnight-light"},
+		// explicit variant ids also resolve (URL ?theme= may pass them)
+		{"smooth-dark", true, "midnight"},
+	}
+	for _, c := range cases {
+		if got := ResolvePreset(c.pair, c.dark); got != c.want {
+			t.Errorf("ResolvePreset(%q, %v) = %q, want %q", c.pair, c.dark, got, c.want)
+		}
+	}
+}
+
+func TestSetDefaultDark(t *testing.T) {
+	for _, off := range []string{"false", "0", "off", "OFF", " false "} {
+		DefaultDark = true
+		SetDefaultDark(off)
+		if DefaultDark {
+			t.Errorf("SetDefaultDark(%q): want dark off", off)
+		}
+	}
+	for _, on := range []string{"true", "1", "on", "anything"} {
+		DefaultDark = false
+		SetDefaultDark(on)
+		if !DefaultDark {
+			t.Errorf("SetDefaultDark(%q): want dark on", on)
+		}
+	}
+	DefaultDark = true
+}