Merge pull request '#296 fix attempt 3: shrink URL column, plain-text URL values' (#301) from fix-296-r3 into dev

Owner override postdating PR #300 QA pass:
- .col-url 340 -> 230px; reclaim slack from history-only columns (Views 96->90,
  Created 190->150, ID 190->120) so the table fits the .float pane with no
  horizontal scroll at 1400x900 and the ID column is fully visible.
- URL anchors drop the shared .slug pill (background/padding/radius/mono font)
  and render plain, styled via td.dim exactly like the none case; links stay
  anchors with accent hover. Ellipsis kept for genuinely long slugs.

Verified by CDP probe on a local build at 1400x900 and 375x812 on /public and
/mine (/saved): column order, table fits pane (scrollWidth == clientWidth),
20-char slug fully visible, min Created-to-URL content gap 77px, sort arrows
intact 6px right of labels, no CSP/console violations. go build/test pass.

README.md

@@ -1,7 +1,7 @@
 # Palette
 
 Palette is a fast, self-hosted pastebin. One Go binary, a SQLite database, and
-a web UI for sharing text and small files
+a web UI for sharing text and small files.
 
 > [!NOTE]
 > <table><tr><td>
@@ -10,22 +10,27 @@ a web UI for sharing text and small files
 
 ## Features
 
-- Multiple files in one paste
+- Text pastes and cans (multiple items in one share)
+- File attachments (one file per paste, up to 25 MB)
 - Password protected pastes
-- Expir after a specified time
+- Expire after a specified time
 - Burn after a number of views
 - Custom URLs
 - Syntax highlighting with language auto-detection (go-enry)
-- Local cookie based submission history
+- Public paste listing with search, sort and pagination
-- Cookie based settings
+- Cookie based saved pastes and settings
-- Themes!
+- 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
+- Polished code viewer: line-number gutter sized to the widest number and pinned during horizontal scroll, optional line wrap, jump-to-top/bottom buttons, and theme-aware scrollbars
 
 ## Screenshots
 
 | | |
 |---|---|
-| ![Editor in midnight](https://git.archfox.org/poslop/palette/wiki/raw/palette-previews%2Fmidnight-new.png) | ![Paste view in pastel-peach](https://git.archfox.org/poslop/palette/wiki/raw/palette-previews%2Fpastel-peach-paste.png) |
+| ![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) |
-| ![History in pastel-lavender](https://git.archfox.org/poslop/palette/wiki/raw/palette-previews%2Fpastel-lavender-history.png) | ![Saved in pastel-cloud](https://git.archfox.org/poslop/palette/wiki/raw/palette-previews%2Fpastel-cloud-mine.png) |
+| ![Public pastes list](https://git.archfox.org/poslop/palette/wiki/raw/palette-previews%2Fdesktop-public.png) | ![Settings and theme picker](https://git.archfox.org/poslop/palette/wiki/raw/palette-previews%2Fdesktop-settings-themes.png) |
+
+
 
 ## Get Started
 
@@ -61,12 +66,13 @@ go build -o palette ./cmd/palette
 | `PALETTE_ADDR` | `:8080` | Listen address |
 | `PALETTE_DB` | `palette.db` | SQLite database path |
 | `PALETTE_MAX_TEXT` | `5242880` | Max paste size in bytes (5 MB) |
-| `PALETTE_MAX_ITEM` | `26214400` | Max can item size in bytes (25 MB) |
+| `PALETTE_MAX_ITEM` | `26214400` | Max can item / file attachment 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. |
 
 An `/admin` page exists for runtime settings, protected by a key set at
-install (`PALETTE_ADMIN_KEY` env var) and resettable locally — see
+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
@@ -95,4 +101,4 @@ data loss, or legal issues arising from use of the software. You use it
 at your own risk.
 
 If you run a modified version of Palette as a network service, the AGPL
-requires you to offer your modified source code to its users.
+requires you to offer your modified source code to its users.

docker-compose.yml

@@ -32,10 +32,16 @@ services:
       # Default: 5242880 (5 MiB).
       # PALETTE_MAX_TEXT: "5242880"
 
-      # Max size in bytes of a single can item (file/text inside a can).
+      # Max size in bytes of a single can item (file/text inside a can) or a
+      # paste file attachment.
       # Default: 26214400 (25 MiB).
       # PALETTE_MAX_ITEM: "26214400"
 
+      # Default dark mode for new visitors. Unset = dark on; set to "false",
+      # "0" or "off" to default to light mode. Visitors who toggle dark mode
+      # keep their choice in their browser.
+      # PALETTE_DEFAULT_DARK: "false"
+
       # HMAC secret for password-unlock cookies. Default: random per start,
       # which logs out every unlocked browser session on restart. Set a fixed
       # secret (any random string) to keep unlock sessions across restarts,

internal/api/attachments_test.go

@@ -306,3 +306,64 @@ func TestMultipartPasswordFieldAccepted(t *testing.T) {
 		t.Fatalf("paste should require password, got %d", rec2.Code)
 	}
 }
+
+// #281: /raw/{id} must stream the attachment blob for ALL attachment mimes,
+// not just raster images (the old isImageMime gate left non-image
+// attachments serving an empty body from row.Content).
+func TestRawStreamsNonImageAttachment(t *testing.T) {
+	s := testServer(t)
+	h := s.routes()
+
+	body := []byte("hello, this is a plain text attachment body")
+	rec, resp := multipartCreate(t, h, "notes.txt", body, nil)
+	if rec.Code != 201 {
+		t.Fatalf("create: %d %s", rec.Code, rec.Body.String())
+	}
+	if resp["attachment"] == nil {
+		t.Fatalf("no attachment in response: %v", resp)
+	}
+	id, _ := resp["id"].(string)
+
+	req := httptest.NewRequest("GET", "/raw/"+id, nil)
+	rec2 := httptest.NewRecorder()
+	h.ServeHTTP(rec2, req)
+	if rec2.Code != 200 {
+		t.Fatalf("raw: %d %s", rec2.Code, rec2.Body.String())
+	}
+	if got := rec2.Header().Get("Content-Type"); got != "text/plain; charset=utf-8" {
+		t.Fatalf("Content-Type = %q", got)
+	}
+	if got := rec2.Header().Get("X-Content-Type-Options"); got != "nosniff" {
+		t.Fatalf("nosniff = %q", got)
+	}
+	if !bytes.Equal(rec2.Body.Bytes(), body) {
+		t.Fatalf("raw bytes differ: got %d bytes want %d", rec2.Body.Len(), len(body))
+	}
+}
+
+// #281: active-content attachment types still get forced to text/plain on
+// /raw, same rule as the /f/ serving path (#34).
+func TestRawHtmlAttachmentServesAsPlainText(t *testing.T) {
+	s := testServer(t)
+	h := s.routes()
+
+	html := []byte("<html><body><script>alert(1)</script></body></html>")
+	rec, resp := multipartCreate(t, h, "page.html", html, nil)
+	if rec.Code != 201 {
+		t.Fatalf("create: %d %s", rec.Code, rec.Body.String())
+	}
+	id, _ := resp["id"].(string)
+
+	req := httptest.NewRequest("GET", "/raw/"+id, nil)
+	rec2 := httptest.NewRecorder()
+	h.ServeHTTP(rec2, req)
+	if rec2.Code != 200 {
+		t.Fatalf("raw: %d %s", rec2.Code, rec2.Body.String())
+	}
+	if got := rec2.Header().Get("Content-Type"); got != "text/plain; charset=utf-8" {
+		t.Fatalf("Content-Type = %q", got)
+	}
+	if !bytes.Equal(rec2.Body.Bytes(), html) {
+		t.Fatal("raw bytes differ from upload")
+	}
+}

internal/api/clientip.go

@@ -0,0 +1,27 @@
+// clientIP extracts the client IP for rate-limit keying.
+//
+// Trust boundary (issue #280): the bucket key MUST NOT come from any header a
+// client can influence. The previous rightmost-X-Forwarded-For scheme (#85)
+// assumed Traefik appends the real client IP, but the deployed ingress does
+// not rewrite XFF, so a client rotating its own XFF value got a fresh bucket
+// per request and the limit was unenforceable (pentest H1: 6x201 across 8
+// rotating-XFF creates).
+//
+// The bucket key is the actual peer address (RemoteAddr) only. Behind any
+// reverse proxy this is the proxy's address, so all clients share one bucket
+// per endpoint — coarse, but safe. Client-supplied IP headers
+// (X-Forwarded-For, X-Real-Ip) are never trusted.
+package api
+
+import (
+	"net"
+	"net/http"
+)
+
+func clientIP(r *http.Request) string {
+	host := r.RemoteAddr
+	if h, _, err := net.SplitHostPort(r.RemoteAddr); err == nil {
+		host = h
+	}
+	return host
+}

internal/api/cookie_set_test.go

@@ -91,7 +91,15 @@ func TestCreatedBannerViaCookie(t *testing.T) {
 	if rec2.Code != 200 {
 		t.Fatalf("paste view: got %d", rec2.Code)
 	}
-	if !strings.Contains(rec2.Body.String(), tok) {
+	// #168: the created pill no longer prints the deletion token; the token
-		t.Error("created banner does not show the deletion token (#143 cookie flow broken)")
+	// 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/issue138_cookie_test.go

@@ -29,7 +29,7 @@ func newTestServer138(t *testing.T) *httptest.ResponseRecorder {
 	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)
+	req := httptest.NewRequest("GET", "/public", nil)
 	rec := httptest.NewRecorder()
 	a.routes().ServeHTTP(rec, req)
 	return rec

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/mine_test.go

@@ -58,7 +58,7 @@ func TestMineCreateListDelete(t *testing.T) {
 	a := &apiServer{store: st, cfg: cfg, ui: ui, settings: ss, adminKey: "test-admin-key"}
 	h := a.routes()
 
-	alice := viewerCookieFor(t, h, "/history")
+	alice := viewerCookieFor(t, h, "/public")
 	if alice == "" {
 		t.Fatal("no viewer cookie issued")
 	}
@@ -89,7 +89,7 @@ func TestMineCreateListDelete(t *testing.T) {
 	}
 
 	// a different browser's cookie does NOT see it
-	bob := viewerCookieFor(t, h, "/history")
+	bob := viewerCookieFor(t, h, "/public")
 	rec = doReq(t, h, "GET", "/api/mine", bob, "")
 	json.Unmarshal(rec.Body.Bytes(), &list)
 	if list.Total != 0 {

internal/api/ratelimit.go

@@ -3,7 +3,6 @@ package api
 import (
 	"net/http"
 	"strconv"
-	"strings"
 	"sync"
 	"time"
 )
@@ -48,35 +47,6 @@ func (l *limiter) allow(key string, rate, burst float64) bool {
 	return true
 }
 
-// clientIP extracts the client IP for rate-limit keying (#85).
-//
-// Trust boundary: palette runs behind exactly ONE trusted reverse proxy
-// (Traefik in the k3s pod network). Traefik APPENDS the real client IP to
-// X-Forwarded-For, so the RIGHTMOST entry is the last value the trusted
-// proxy observed and is unspoofable by the client (a client-supplied fake
-// entry only lands on the LEFT and is ignored). This matches chi's
-// middleware.RealIP semantics for a single trusted proxy hop.
-//
-// Direct connections (no XFF header) fall back to RemoteAddr. Directly
-// reachable deployments must NOT expose the app to untrusted networks
-// without a proxy in front, or attackers could forge the rightmost entry.
-func clientIP(r *http.Request) string {
-	if xff := r.Header.Get("X-Forwarded-For"); xff != "" {
-		if i := strings.LastIndex(xff, ","); i >= 0 {
-			return strings.TrimSpace(xff[i+1:])
-		}
-		return strings.TrimSpace(xff)
-	}
-	if xr := r.Header.Get("X-Real-Ip"); xr != "" {
-		return strings.TrimSpace(xr)
-	}
-	host := r.RemoteAddr
-	if i := strings.LastIndex(host, ":"); i > 0 {
-		host = host[:i]
-	}
-	return host
-}
-
 var globalLimiter = newLimiter()
 
 // globalSettingsFn is set at startup; tests can point it at fixed settings.

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)
+	// #205: newline join preserved as the delimiter paste-lines.js splits on;
-	if got := len(splitLines(lang.HighlightCode("a\nb\nc", "go"))); got != 3 {
+	// 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/ratelimit_xff_test.go

@@ -1,85 +1,50 @@
 package api
 
-// Issue #85: the rate limit key must use the rightmost X-Forwarded-For entry
-// (appended by the trusted Traefik proxy), never the raw/leftmost header
-// value a client can forge. A spoofed FIRST XFF entry must not bypass the
-// limit or rotate buckets.
-
 import (
-	"bytes"
+	"fmt"
 	"net/http/httptest"
 	"testing"
 )
 
-func TestClientIPTakesRightmostXFF(t *testing.T) {
+func TestClientIPUsesRemoteAddrNotXFF(t *testing.T) {
-	r := httptest.NewRequest("POST", "/", nil)
+	r := httptest.NewRequest("POST", "/api/pastes", nil)
-	r.RemoteAddr = "10.42.0.7:51000" // trusted Traefik pod
+	r.RemoteAddr = "203.0.113.7:4432"
 	r.Header.Set("X-Forwarded-For", "1.2.3.4, 1.2.3.5, 203.0.113.9")
-	if got := clientIP(r); got != "203.0.113.9" {
-		t.Fatalf("clientIP = %q, want rightmost 203.0.113.9", got)
-	}
-}
-
-func TestClientIPXRealIPFallback(t *testing.T) {
-	r := httptest.NewRequest("POST", "/", nil)
-	r.RemoteAddr = "10.42.0.7:51000"
 	r.Header.Set("X-Real-Ip", "203.0.113.10")
-	if got := clientIP(r); got != "203.0.113.10" {
+	if got := clientIP(r); got != "203.0.113.7" {
-		t.Fatalf("clientIP = %q, want 203.0.113.10", got)
+		t.Fatalf("clientIP = %q, want peer 203.0.113.7", got)
 	}
 }
 
-func TestClientIPDirectFallback(t *testing.T) {
+// A proxy-controlled header is not honored even when set: #280 revision
-	r := httptest.NewRequest("POST", "/", nil)
+// removed the PALETTE_TRUSTED_IP_HEADER mechanism per owner decision, so the
-	r.RemoteAddr = "198.51.100.5:51000"
+// bucket key is the peer address only.
-	if got := clientIP(r); got != "198.51.100.5" {
+func TestClientIPNeverTrustsHeaders(t *testing.T) {
-		t.Fatalf("clientIP = %q, want 198.51.100.5", got)
+	r := httptest.NewRequest("POST", "/api/pastes", nil)
+	r.RemoteAddr = "10.0.1.47:9999"
+	r.Header.Set("CF-Connecting-IP", "198.51.100.9")
+	if got := clientIP(r); got != "10.0.1.47" {
+		t.Fatalf("clientIP = %q, want peer 10.0.1.47", got)
 	}
 }
 
-// TestRateLimitSpoofedFirstXFFDoesNotBypass: an attacker rotating a fake
+// Issue #280: rotating X-Forwarded-For must NOT reset the bucket. Pentest
-// leftmost XFF entry stays limited on their real (rightmost) IP.
+// repro was 8 creates with rotating XFF -> 6x201.
-func TestRateLimitSpoofedFirstXFFDoesNotBypass(t *testing.T) {
+func TestRotatingXFFDoesNotResetBucket(t *testing.T) {
-	srv := newTestServer(t)
+	globalLimiter = newLimiter()
-	h := srv.routes()
+	s := defaultSettings(Config{}) // burst/limit defaults; header values are ignored anyway
-	for i := 0; i < 5; i++ {
+	var allowed, limited int
-		req := httptest.NewRequest("POST", "/api/pastes", bytes.NewReader([]byte(`{"content":"hi"}`)))
+	for i := 0; i < 8; i++ {
-		req.RemoteAddr = "10.42.0.7:51000"
+		r := httptest.NewRequest("POST", "/api/pastes", nil)
-		// each request spoofs a DIFFERENT leftmost entry
+		r.RemoteAddr = "198.51.100.1:5000"
-		req.Header.Set("X-Forwarded-For", spoofN(i)+", 203.0.113.9")
+		r.Header.Set("X-Forwarded-For", fmt.Sprintf("9.9.9.%d", i))
-		rr := httptest.NewRecorder()
+		if rateLimitCreate(r, s) {
-		h.ServeHTTP(rr, req)
+			allowed++
-		if rr.Code != 201 {
+		} else {
-			t.Fatalf("req %d: want 201, got %d", i, rr.Code)
+			limited++
 		}
 	}
-	// 6th request, still the same real IP, new spoofed prefix: must 429
+	if float64(allowed) != s.RateLimitBurst || limited != 8-int(s.RateLimitBurst) {
-	req := httptest.NewRequest("POST", "/api/pastes", bytes.NewReader([]byte(`{"content":"hi"}`)))
+		t.Fatalf("rotating XFF: allowed=%d limited=%d, want allowed=%v (burst), limited=%d", allowed, limited, s.RateLimitBurst, 8-int(s.RateLimitBurst))
-	req.RemoteAddr = "10.42.0.7:51000"
-	req.Header.Set("X-Forwarded-For", "9.9.9.9, 203.0.113.9")
-	rr := httptest.NewRecorder()
-	h.ServeHTTP(rr, req)
-	if rr.Code != 429 {
-		t.Fatalf("spoofed 6th req: want 429, got %d", rr.Code)
-	}
-}
-
-func spoofN(i int) string {
-	return "1.2.3." + string(rune('0'+i))
-}
-
-// Distinct real IPs must still get distinct buckets (no over-limiting).
-func TestRateLimitDistinctRightmostIPsIndependent(t *testing.T) {
-	srv := newTestServer(t)
-	h := srv.routes()
-	for _, ip := range []string{"203.0.113.20", "203.0.113.21"} {
-		req := httptest.NewRequest("POST", "/api/pastes", bytes.NewReader([]byte(`{"content":"hi"}`)))
-		req.RemoteAddr = "10.42.0.7:51000"
-		req.Header.Set("X-Forwarded-For", "6.6.6.6, "+ip)
-		rr := httptest.NewRecorder()
-		h.ServeHTTP(rr, req)
-		if rr.Code != 201 {
-			t.Fatalf("ip %s: want 201, got %d", ip, rr.Code)
-		}
 	}
 }

internal/api/routes_rename_test.go

@@ -0,0 +1,52 @@
+package api
+
+// #256: renamed page routes; old URLs redirect.
+import (
+	"palette/internal/store"
+	"palette/internal/web"
+
+	"net/http"
+	"net/http/httptest"
+	"testing"
+)
+
+func TestRenamedPageRoutes(t *testing.T) {
+	globalLimiter = newLimiter() // fresh rate-limit buckets
+	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"}
+	h := a.routes()
+
+	// new routes render pages
+	for _, path := range []string{"/public", "/saved"} {
+		req := httptest.NewRequest("GET", path, nil)
+		rec := httptest.NewRecorder()
+		h.ServeHTTP(rec, req)
+		if rec.Code != http.StatusOK {
+			t.Fatalf("GET %s: %d, want 200", path, rec.Code)
+		}
+	}
+
+	// old routes redirect
+	for _, tc := range [][2]string{{"/history", "/public"}, {"/mine", "/saved"}, {"/", "/public"}} {
+		req := httptest.NewRequest("GET", tc[0], nil)
+		rec := httptest.NewRecorder()
+		h.ServeHTTP(rec, req)
+		if rec.Code != http.StatusMovedPermanently && rec.Code != http.StatusFound {
+			t.Fatalf("GET %s: %d, want redirect", tc[0], rec.Code)
+		}
+		if loc := rec.Header().Get("Location"); loc != tc[1] {
+			t.Fatalf("GET %s redirects to %s, want %s", tc[0], loc, tc[1])
+		}
+	}
+}

internal/api/server.go

@@ -118,11 +118,14 @@ func (a *apiServer) routes() http.Handler {
 	r.Get("/raw/{id}", a.handleRaw)
 
 	// web pages
-	r.Get("/", http.RedirectHandler("/history", http.StatusFound).ServeHTTP)
+	r.Get("/", http.RedirectHandler("/public", http.StatusFound).ServeHTTP)
 	r.Get("/new", a.ui.Handlers().HandleNewPage)
-	r.Get("/history", a.ui.Handlers().HandleHistoryPage)
+	r.Get("/public", a.ui.Handlers().HandleHistoryPage)
+	r.Get("/saved", a.ui.Handlers().HandleMinePage)
 	r.Get("/settings", a.ui.Handlers().HandleSettingsPage)
-	r.Get("/mine", a.ui.Handlers().HandleMinePage)
+	// #256: old URLs redirect to the renamed pages
+	r.Get("/history", http.RedirectHandler("/public", http.StatusMovedPermanently).ServeHTTP)
+	r.Get("/mine", http.RedirectHandler("/saved", http.StatusMovedPermanently).ServeHTTP)
 	r.Handle("/static/*", a.ui.StaticHandler())
 	r.Get("/unlock/{id}", a.handlePasteView)
 	r.Post("/unlock/{id}", a.handlePasteView)
@@ -315,11 +318,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)
@@ -376,6 +394,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)
@@ -394,7 +439,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,
@@ -415,7 +460,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,
@@ -451,6 +496,25 @@ func (a *apiServer) handleRaw(w http.ResponseWriter, r *http.Request) {
 		http.Error(w, "not found", 404)
 		return
 	}
+	// #221: raw view of a paste backed by an attachment serves the stored
+	// blob bytes with the sniffed mime, not the (empty) text content — for
+	// ALL attachment mimes (#281); /raw/{id} is the raw fetch for the file
+	// too. serveContentType still forces active-content types (html, svg,
+	// xml) to text/plain per the #34 rule below.
+	if att, err := a.store.GetAttachmentForPaste(row.ID); err == nil && att != nil {
+		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", serveContentType(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/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

@@ -26,7 +26,10 @@ type Attachment struct {
 	SizeHuman string `json:"-"` // template-only: human-readable size
 }
 
-const MaxFilenameLen = 255
+// MaxFilenameLen caps stored attachment filenames (bytes) to bound DB
+// rows and Content-Disposition echoes. 128 keeps names readable while
+// stopping filename-bloat abuse; longer names truncate.
+const MaxFilenameLen = 128
 
 // ErrFileTooLarge is returned when an attachment exceeds the per-file cap.
 var ErrFileTooLarge = errors.New("file too large")

internal/store/blob_test.go

@@ -105,4 +105,9 @@ func TestSanitizeFilename(t *testing.T) {
 	if got := SanitizeFilename(long); len(got) != MaxFilenameLen {
 		t.Errorf("long name len = %d want %d", len(got), MaxFilenameLen)
 	}
+	// issue #248: a 250-char multipart filename must truncate to the cap
+	repro := strings.Repeat("b", 246) + ".txt"
+	if got := SanitizeFilename(repro); len(got) != MaxFilenameLen {
+		t.Errorf("repro 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, "saved": 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 {
@@ -304,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
+	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
+		FROM pastes p
-		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 > ?)
+		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)
@@ -321,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
@@ -339,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
+	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
+		FROM pastes p
-		WHERE viewer_id = ? AND deleted_at IS NULL AND can_id IS NULL AND (expires_at IS NULL OR expires_at > ?)
+		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)
@@ -356,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/static/app.css

@@ -197,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 {
+/* #168: compact side notification pill (paste-created feedback) */
-  display: none; padding: 10px 16px; font-size: 22.4px; background: var(--surface-2);
+.created-pill {
-  border-bottom: 1px solid var(--border); word-break: break-all;
+  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; }
@@ -210,14 +216,17 @@ body {
 .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; word-break: normal; overflow-wrap: anywhere; }
-.stats-pill { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
+/* #222: .float already draws the border + radius and clips corners; the pill's own
-.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; }
+   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; }
@@ -249,6 +258,7 @@ body {
 .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; }
@@ -273,6 +283,10 @@ body {
 .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; }
@@ -285,14 +299,33 @@ html[data-wrap] .float { overflow-x: hidden; }
 .code-head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
 .code {
   font-family: var(--font-mono); font-size: var(--code-fs); line-height: var(--code-lh);
-  padding: 14px 0; display: flex; overflow-x: auto;
+  padding: 14px 0; display: flex; overflow-x: hidden;
 }
+/* #261: horizontal scroll must live on the codebody, not the .code flex
+   container — a container-level scroll takes the gutter with it when the
+   user scrolls long lines. The gutter sits OUTSIDE the scroll container and
+   stays visible; the codebody shrinks to the remaining space and scrolls
+   (min-width: 0 lets it shrink below its content width inside the flex row). */
+.code .codebody { flex: 1 1 auto; min-width: 0; 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; }
+.codebody { padding: 0 18px; white-space: pre; overflow-x: auto; }
 /* #167: each logical line is its own block so offsetTop identifies its first visual row */
 .codeline { display: block; }
+/* #167: gutter number spans must stack one per visual row (wrap on).
+   #274: the /new editor gutter uses the same .gutline blocks when its own
+   wrap toggle is on, so scope the rule to any gutter, not just .code. */
+.code .gutter .gutline, .editor-wrap .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; }
@@ -321,10 +354,15 @@ tr:last-child td { border-bottom: none; }
 tr.row { cursor: pointer; }
 tr.row:hover td { background: var(--surface-2); }
 tr.row:hover td a.slug { color: var(--accent); }
+/* #292: highlight the paste NAME uniformly on row hover, titled or not */
+tr.row:hover td .paste-name { color: var(--accent); }
 td a.slug { font-family: var(--font-mono); font-size: 21.6px; color: var(--fg); text-decoration: none; }
+td a.url-link { font-family: inherit; font-size: inherit; color: inherit; text-decoration: none; }
+td a.url-link:hover { color: var(--accent); }
 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); }
+td a.paste-name { color: var(--fg); text-decoration: none; font-family: inherit; font-size: inherit; }
 .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; }
@@ -388,15 +426,15 @@ td a.slug.paste-name { background: none; padding: 0; border-radius: 0; font-fami
 }
 .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); }
@@ -410,13 +448,15 @@ td a.slug.paste-name { background: none; padding: 0; border-radius: 0; font-fami
 
 /* 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 {
-  margin: 6px 0 4px 8px;
+  /* #240: indent the box under the parent option LABEL text (8px row padding
-  padding: 8px 10px;
+     + 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);
@@ -493,7 +533,7 @@ td a.slug.paste-name { background: none; padding: 0; border-radius: 0; font-fami
 /* paste name under slug pill in Paste column (#43) */
 .paste-sub { font-size: 19.8px; color: var(--muted-fg); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .paste-sub.dim { color: var(--muted); }
-td a.slug.url-link { max-width: 100%; display: inline-block; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; }
+td a.url-link { max-width: 100%; display: inline-block; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; }
 td .id-link { color: var(--muted-fg); text-decoration: none; font-family: var(--font-mono); font-size: 19.8px; }
 td .id-link:hover { color: var(--accent); }
 
@@ -501,12 +541,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,
+/* #209: arrow sits RIGHT of the label, vertically centered, and absolutely
-   and absolutely positioned so it never shifts the label text. */
+   positioned so it never shifts the label text; label aligns with column contents. */
-th.sortable { position: relative; padding-left: 24px; }
 th.sortable .sort-ind {
-  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
+  /* #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;
+  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); }
@@ -554,6 +593,20 @@ a.admin-link:hover { color: var(--fg); text-decoration: underline; }
   border-color: var(--ok);
 }
 
+/* #260: static-width success feedback. Label and checkmark stack in one
+   grid cell, so the button is always as wide as the wider of the two and
+   never shifts on click. Feedback is a pure .ok class toggle. */
+.swapbtn {
+  display: inline-grid;
+}
+.swapbtn > * {
+  grid-area: 1 / 1;
+  justify-self: center;
+}
+.swapbtn .swap-check { visibility: hidden; }
+.swapbtn.ok .swap-check { visibility: visible; }
+.swapbtn.ok .swap-label { visibility: hidden; }
+
 /* headings: unified treatment (mirrors .side-section h3) */
 .settings-head h1, .paste-title-bar h1, .head-row h1, .inner h1 {
   letter-spacing: -0.01em;
@@ -623,9 +676,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 */
@@ -646,6 +702,13 @@ 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; }
@@ -778,23 +841,67 @@ button[type="submit"]:focus-visible,
   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; }
+.attachment-bar { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
-.attachment-chip {
+/* #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: 8px 16px; text-decoration: none; color: var(--fg);
+  padding: 6px 14px; text-decoration: none; color: var(--fg);
-  background: var(--surface-2); font-size: 21.6px;
+  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;
 }
-.attachment-chip:hover { border-color: var(--accent); }
-.attachment-chip .attachment-size { color: var(--muted-fg); font-size: 19px; }
-.attachment-preview img { max-width: 480px; max-height: 360px; border-radius: var(--radius); border: 1px solid var(--border); }
 
 /* #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-d { width: 90px; } .col-d2 { width: 150px; } .col-e { width: 150px; }
-.col-f { width: 100px; } .col-g { width: 190px; }
+.col-f { width: 100px; } .col-g { width: 120px; }
+/* #255: history's URL column had its own narrow width (col-f doubles as
+   /mine's ID column); give it a dedicated class. */
+.col-url { width: 230px; }
+/* #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; }
@@ -804,4 +911,36 @@ button[type="submit"]:focus-visible,
 .mt18 { margin-top: 18px; }
 .toggle-inline { display: inline-flex; }
 .wrap-normal { word-break: normal; overflow-wrap: break-word; }
-.created-banner.show { display: block; }
+.created-banner { display: block; }
+/* #167: gutter rows for wrapped paste view — one row per visual code line */
+.gutline { display: block; }
+
+/* #267: jump to top/bottom pills for long pastes and the editor.
+   Hidden unless JS (jump.js) detects content more than 2x the viewport. */
+.jumpnav {
+  position: fixed;
+  right: 18px;
+  bottom: 18px;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.jumpnav.hidden { display: none; }
+.jump-btn { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); }
+
+/* #273: theme-aware scrollbars. Standard properties first (Firefox, and
+   Chromium >= 121 honors scrollbar-color), then ::-webkit rules for finer
+   Chromium styling. Colors come from CSS vars so they track the preset. */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--border) transparent;
+}
+::-webkit-scrollbar { width: 10px; height: 10px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 5px;
+}
+::-webkit-scrollbar-thumb:hover { background: var(--muted-fg); }
+::-webkit-scrollbar-corner { background: transparent; }

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/history.js

@@ -6,12 +6,12 @@ const t = PaletteTable.init({
   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="paste-name" href="/${t.esc(it.id)}">${t.esc(it.title)}</a>${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.language || 'text')}</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>`) +
+    (it.custom_slug ? `<td class="dim"><a class="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.',

internal/web/static/jump.js

@@ -0,0 +1,51 @@
+/* #267: jump to top / bottom controls for long content.
+   Paste view scrolls the window; the /new editor scrolls its textarea.
+   The active scroller is chosen via data-jump-scroll on the script tag. */
+(function () {
+  var nav = document.getElementById('jumpnav');
+  if (!nav) return;
+  var scroller = window;
+  var sel = nav.dataset.jumpScroll;
+  if (sel) scroller = document.querySelector(sel);
+
+  function el() {
+    return scroller === window ? document.scrollingElement : scroller;
+  }
+  function isLarge() {
+    var e = el();
+    if (!e) return false;
+    var visible = scroller === window ? window.innerHeight : e.clientHeight;
+    return e.scrollHeight > visible * 2;
+  }
+  function refresh() {
+    nav.classList.toggle('hidden', !isLarge());
+  }
+  function jump(toTop) {
+    var e = el();
+    if (!e) return;
+    if (scroller === window) {
+      window.scrollTo({ top: toTop ? 0 : e.scrollHeight });
+    } else {
+      e.scrollTop = toTop ? 0 : e.scrollHeight;
+    }
+  }
+  nav.addEventListener('click', function (ev) {
+    var b = ev.target.closest('[data-jump]');
+    if (!b) return;
+    ev.preventDefault();
+    jump(b.dataset.jump === 'top');
+  });
+  window.addEventListener('resize', refresh);
+  if (scroller !== window && scroller) scroller.addEventListener('input', refresh);
+  refresh();
+  /* #282: the first evaluation can run before the layout settles (media
+     queries, web fonts, async highlighting) and under-measure the content,
+     leaving the nav hidden on long pages. Re-check once a real layout exists
+     and after load; the ResizeObserver also catches late content growth. */
+  requestAnimationFrame(function () { requestAnimationFrame(refresh); });
+  window.addEventListener('load', refresh);
+  window.setTimeout(refresh, 300);
+  if (window.ResizeObserver && scroller === window && document.body) {
+    new ResizeObserver(refresh).observe(document.body);
+  }
+})();

internal/web/static/mine.js

@@ -18,12 +18,12 @@ const t = PaletteTable.init({
   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="paste-name" href="/${t.esc(it.id)}">${t.esc(it.title)}</a>${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.language || 'text')}</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>`) +
+    (it.custom_slug ? `<td class="dim"><a class="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.',

internal/web/static/new.js

@@ -2,13 +2,73 @@
 const $ = id => document.getElementById(id);
 const content = $('content'), gutter = $('gutter');
 
+// #274: with wrap on, a logical line occupies several VISUAL rows in the
+// textarea, so one number per logical line drifts off its text (same bug the
+// paste view fixed in #167). A textarea can't be split into spans, so the
+// wrapped row count per logical line is measured with a hidden mirror div
+// that shares the editor's font, line metrics and wrapping rules, and the
+// gutter renders one .gutline block per visual row with the number on the
+// FIRST row of its logical line (fillers elsewhere).
+let mirror = null;
+function measureRows(lines) {
+  if (!mirror) {
+    mirror = document.createElement('div');
+    mirror.style.position = 'absolute';
+    mirror.style.visibility = 'hidden';
+    mirror.style.top = '0';
+    mirror.style.left = '-9999px';
+    document.body.appendChild(mirror);
+  }
+  const cs = getComputedStyle(content);
+  mirror.style.font = cs.font;
+  mirror.style.lineHeight = cs.lineHeight;
+  mirror.style.whiteSpace = 'pre-wrap';
+  mirror.style.overflowWrap = 'anywhere';
+  mirror.style.wordBreak = 'break-all';
+  mirror.style.width = (content.clientWidth - parseFloat(cs.paddingLeft) - parseFloat(cs.paddingRight)) + 'px';
+  const lh = parseFloat(cs.lineHeight) || 1;
+  const starts = [];
+  let total = 0;
+  const n = Math.max(lines.length, 1);
+  for (let i = 0; i < n; i++) {
+    // A trailing newline yields an empty last line: it still occupies one row.
+    mirror.textContent = lines[i] + '\n';
+    let rows = Math.max(1, Math.round(mirror.getBoundingClientRect().height / lh));
+    starts.push(total);
+    total += rows;
+  }
+  return { starts, total };
+}
+
 function updateGutter() {
-  const lines = content.value.split('\n').length;
+  const lines = content.value.split('\n');
-  let s = '';
+  const n = Math.max(lines.length, 1);
-  for (let i = 1; i <= Math.max(lines, 1); i++) s += i + '\n';
+  if (!document.documentElement.hasAttribute('data-wrap')) {
-  gutter.textContent = s;
+    let s = '';
+    for (let i = 1; i <= n; i++) s += i + '\n';
+    gutter.textContent = s.slice(0, -1);
+    return;
+  }
+  const { starts, total } = measureRows(lines);
+  gutter.textContent = '';
+  const frag = document.createDocumentFragment();
+  const spans = [];
+  for (let r = 0; r < total; r++) {
+    const c = document.createElement('span');
+    c.className = 'gutline';
+    c.textContent = '\u00a0';
+    spans.push(c);
+    frag.appendChild(c);
+  }
+  gutter.appendChild(frag);
+  for (let j = 0; j < starts.length; j++) spans[starts[j]].textContent = String(j + 1);
 }
 content.addEventListener('input', updateGutter);
+// #274: the wrap toggle and width changes re-wrap the textarea; re-measure.
+new MutationObserver(updateGutter).observe(document.documentElement, { attributes: true, attributeFilter: ['data-wrap'] });
+window.addEventListener('resize', updateGutter);
+// #259: the editor scrolls itself; keep the gutter's numbers in step with it.
+content.addEventListener('scroll', () => { gutter.scrollTop = content.scrollTop; });
 updateGutter();
 
 function toast(msg, kind) {
@@ -190,15 +250,16 @@ async function create() {
 // 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');
+  // #260 attempt 2: .swapbtn markup — label and checkmark share one grid
+  // cell, so the button width is static and feedback is a class toggle.
+  showResult('<a href="' + url + '">' + url + '</a> <button class="btn btn-icon swapbtn" id="result-copy" title="Copy URL" type="button"><span class="swap-label">Copy</span><span class="swap-check">✓</span></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'), 2000);
-      setTimeout(() => { copyBtn.classList.remove('ok'); copyBtn.textContent = '⧉'; }, 2000);
     } catch(e) { toast('Copy failed', 'error'); }
   });
   // token carried via sessionStorage, never in the URL (#143)
@@ -254,16 +315,25 @@ function extOf(name) {
 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)) {
-    if (previewURL) URL.revokeObjectURL(previewURL);
+    readFileDataURL(file, (dataURL) => {
-    previewURL = URL.createObjectURL(file);
+      previewURL = dataURL;
-    img.src = previewURL;
+      img.src = dataURL;
-    img.alt = file.name;
+      img.alt = file.name;
-    wrap.classList.add('previewing');
+      wrap.classList.add('previewing');
-    img.classList.remove('hidden');
+      img.classList.remove('hidden');
+    });
     return;
   }
   wrap.classList.remove('previewing');
@@ -271,11 +341,12 @@ async function showFileInEditor(file) {
   if (!TEXT_EXTS.has(extOf(file.name))) return; // unknown binary: leave editor alone
   try {
     const text = await file.text();
-    if (!content.value.trim()) {
+    // #184: the file replaces the main editing area, so the text always
-      content.value = text;
+    // loads over whatever was in the editor (same rule as images, which
-      updateGutter();
+    // hide the editor entirely).
-      guessLang();
+    content.value = text;
-    }
+    updateGutter();
+    guessLang();
   } catch (e) {}
 }
 
@@ -297,20 +368,19 @@ function setAttachedFile(file) {
   attachedFile = file;
   renderFileChip();
   setHidden('file-text-note', false);
-  // #171: title auto-fill — images take the file name; text files use the
+  // #233: title auto-fill — the file's own name always wins when the
-  // language-placeholder convention (e.g. Python.py, fallback Text.txt).
+  // title is still blank; fallback is date.fileextension (e.g.
-  // Only when the title is still blank; never overwrite a typed title.
+  // 2026-09-10.txt) when the name is missing or unusable. Never
+  // overwrite a typed title.
   if (!$('title').value.trim()) {
-    if (IMAGE_RE.test(file.type)) {
+    const raw = (file.name || '').trim();
-      $('title').value = file.name;
+    if (raw) {
+      $('title').value = raw;
     } else {
-      const lang = LANG_BY_EXT[extOf(file.name)];
+      const d = new Date();
-      if (lang) {
+      const iso = d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');
-        const fn = defaultFilename(lang);
+      const ext = extOf(raw || file.name);
-        if (fn) $('title').value = fn;
+      $('title').value = ext ? iso + '.' + ext : iso;
-      } else if (TEXT_EXTS.has(extOf(file.name))) {
-        $('title').value = defaultFilename('text') || 'Text.txt';
-      }
     }
   }
   showFileInEditor(file);

internal/web/static/paste-lines.js

@@ -1,5 +1,6 @@
 // #167: with line wrapping on, a logical line can occupy several visual
-// lines; the gutter must show one number per VISUAL line. Per-line spans
+// 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 () {
@@ -13,7 +14,13 @@
   };
 
   // Wrap each logical line (split on newline; spans never contain newlines
-  // because HighlightCode highlights per line) in a .codeline block.
+  // 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');
@@ -21,40 +28,92 @@
     for (var i = 0; i < parts.length; i++) {
       out.push('<span class="codeline">' + parts[i] + '</span>');
     }
-    body.innerHTML = out.join('\n');
+    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');
-    var s = '';
+    // #257: size the gutter column to the widest line number so numbers in
-    if (wrapOn() && lines.length) {
+    // the 100s+ fit their own column instead of bleeding into the code text.
-      // Each logical line block occupies rows = height / line-height when
+    // The gutter is box-sizing: border-box, so the column width must be the
-      // wrapped; its number sits on the first row and the remaining rows get
+    // digits PLUS the 10px left + 10px right padding; at the CSS default 3ch
-      // blank gutter lines so numbers stay aligned with line starts.
+    // the padding alone leaves only ~19px of content, and any 2+ digit
-      // The code column width must not change while measuring (the gutter is
+    // number overflows into the code. Numbers are right-aligned, and the
-      // flex-shrink:0 so its own row count never affects it), and renumber
+    // width below fits the widest number exactly. Set via CSSOM (CSP
-      // must be idempotent to avoid a ResizeObserver feedback loop.
+    // forbids inline style attributes). Only touch the width when it
-      var lh = parseFloat(getComputedStyle(body).lineHeight) || 1;
+    // changes: the resize observer below re-runs renumber() when the gutter
-      gutter.textContent = '';
+    // width reflows the code column, and rewriting the same value would
-      var frag = document.createDocumentFragment();
+    // ping-pong the fixed point forever.
-      for (var i = 0; i < lines.length; i++) {
+    var digits = String(lines.length || 1).length;
-        var num = document.createElement('span');
+    var w = 'calc(' + digits + 'ch + 20px)';
-        num.className = 'gutline';
+    if (gutter.style.width !== w) {
-        num.textContent = String(i + 1);
+      gutter.style.minWidth = w;
-        frag.appendChild(num);
+      gutter.style.width = w;
-        var rows = Math.max(1, Math.round(lines[i].getBoundingClientRect().height / lh));
+    }
-        for (var r = 1; r < rows; r++) {
+    if (!wrapOn() || !lines.length) {
-          var blank = document.createElement('span');
+      // wrap OFF: one number per logical line (pre-existing behavior,
-          blank.className = 'gutline';
+      // including the gutter scrolling with horizontal scroll).
-          blank.textContent = '\u00a0';
+      var s = '';
-          frag.appendChild(blank);
-        }
-      }
-      gutter.appendChild(frag);
-    } else {
       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();

internal/web/static/paste.js

@@ -16,17 +16,26 @@ function toggleStats() {
   pill.classList.toggle('open', open);
   btn.setAttribute('aria-expanded', open ? 'true' : 'false');
 }
+function copyFeedback(btn) {
+  if (!btn) return;
+  // #260 attempt 2: .swapbtn stacks the label and checkmark in the same grid
+  // cell, so the button width is always the wider of the two and never moves.
+  // Feedback is a pure class toggle; no width pinning, no textContent swap.
+  btn.classList.add('ok');
+  clearTimeout(btn._okh);
+  btn._okh = setTimeout(() => btn.classList.remove('ok'), 2000);
+}
 function copyContent(btn) {
-  navigator.clipboard.writeText(document.getElementById('raw-content').value);
+  navigator.clipboard.writeText(document.getElementById('raw-content').value)
-  // in-place success feedback (#53)
+    .then(() => copyFeedback(btn))
-  if (btn) {
+    .catch(() => toast('Copy failed'));
-    btn.classList.add('ok');
+}
-    btn.textContent = 'Success!';
+// #243: copy the paste LINK (full URL), not the paste id or content
-    clearTimeout(btn._okh);
+function copyLink(btn) {
-    btn._okh = setTimeout(() => { btn.classList.remove('ok'); btn.textContent = 'copy'; }, 2000);
+  const url = location.origin + location.pathname;
-  } else {
+  navigator.clipboard.writeText(url)
-    toast('Copied', 'success');
+    .then(() => copyFeedback(btn))
-  }
+    .catch(() => toast('Copy failed'));
 }
 function redeem() {
   if (!confirm('Hard delete this paste immediately?')) return;
@@ -34,14 +43,23 @@ function redeem() {
   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'); });
+    .then(r => { if (r.ok) location.href = '/public'; 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

@@ -73,7 +73,10 @@
     });
     btn.addEventListener('click', function () {
       var dark = state().dark;
-      document.documentElement.dataset.preset = dark ? t.id + '-dark' : t.id;
+      // #294: use the generic variant resolvers - midnight is dark-first
+      // (dark preset = 'midnight', light = 'midnight-light'), so a raw
+      // t.id + '-dark' build landed on nonexistent/forced-dark presets.
+      document.documentElement.dataset.preset = dark ? darkPreset(t.id) : lightPreset(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');
@@ -91,11 +94,15 @@
     if (dt) dt.setAttribute('aria-pressed', s.dark ? 'true' : 'false');
   }
   sync();
-  // the topbar script runs before this button exists, so wire it here
+  // 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');
-  dt.addEventListener('click', function () {
+  if (dt && !dt.dataset.darkWired) {
-    var btns = document.querySelectorAll('.topbar .dark-toggle');
+    dt.addEventListener('click', function () {
-    if (btns.length) btns[0].click(); else document.dispatchEvent(new CustomEvent('palette-darkchange'));
+      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;
   };
@@ -104,7 +104,7 @@ const PaletteTable = (() => {
             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, filtPages]);
+            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)) {
@@ -121,7 +121,7 @@ const PaletteTable = (() => {
             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)) {

internal/web/static/topbar.js

@@ -31,6 +31,9 @@
     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;

internal/web/templates/history.html

@@ -8,15 +8,15 @@
   <div class="search"><input id="filter" placeholder="Search…"><span class="search-spinner" id="search-spinner"></span></div>
   <div class="float">
     <table>
-      <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>
+      <colgroup><col class="col-a"><col class="col-b"><col class="col-c"><col class="col-d"><col class="col-e"><col class="col-url"><col class="col-g"></colgroup>
       <thead><tr>
-        <th data-sort="title" class="sortable"><span class="sort-ind"></span>Paste</th>
+        <th data-sort="title" class="sortable">Paste<span class="sort-ind"></span></th>
-        <th data-sort="language" class="sortable"><span class="sort-ind"></span>Language</th>
+        <th data-sort="type" class="sortable">Type<span class="sort-ind"></span></th>
-        <th data-sort="size" class="sortable"><span class="sort-ind"></span>Size</th>
+        <th data-sort="size" class="sortable">Size<span class="sort-ind"></span></th>
-        <th data-sort="view_count" class="sortable"><span class="sort-ind"></span>Views</th>
+        <th data-sort="view_count" class="sortable">Views<span class="sort-ind"></span></th>
-        <th data-sort="created_at" class="sortable"><span class="sort-ind"></span>Created</th>
+        <th data-sort="created_at" class="sortable">Created<span class="sort-ind"></span></th>
-        <th data-sort="custom_slug" class="sortable"><span class="sort-ind"></span>URL</th>
+        <th data-sort="custom_slug" class="sortable">URL<span class="sort-ind"></span></th>
-        <th data-sort="id" class="sortable"><span class="sort-ind"></span>ID</th>
+        <th data-sort="id" class="sortable">ID<span class="sort-ind"></span></th>
       </tr></thead>
       <tbody id="rows"></tbody>
     </table>

internal/web/templates/layout.html

@@ -2,16 +2,17 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="/static/app.css">
+<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>/ {{ version }}</em></a>
+    <a class="logo" href="/public">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>
+      <a href="/public" {{if eq .Page "public"}}class="on"{{end}}>Public</a>
-      <a href="/mine" {{if eq .Page "mine"}}class="on"{{end}}>Saved</a>
+      <a href="/saved" {{if eq .Page "saved"}}class="on"{{end}}>Saved</a>
       <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>

internal/web/templates/mine.html

@@ -8,14 +8,15 @@
   <div class="search"><input id="filter" placeholder="Search…"><span class="search-spinner" id="search-spinner"></span></div>
   <div class="float">
     <table>
-      <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"></colgroup>
+      <colgroup><col class="col-a"><col class="col-b"><col class="col-c"><col class="col-d2"><col class="col-url"><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="title" class="sortable">Paste<span class="sort-ind"></span></th>
-        <th data-sort="language" class="sortable"><span class="sort-ind"></span>Language</th>
+        <th data-sort="type" class="sortable">Type<span class="sort-ind"></span></th>
-        <th data-sort="size" class="sortable"><span class="sort-ind"></span>Size</th>
+        <th data-sort="size" class="sortable">Size<span class="sort-ind"></span></th>
-        <th data-sort="created_at" class="sortable"><span class="sort-ind"></span>Created</th>
+        <th data-sort="created_at" class="sortable">Created<span class="sort-ind"></span></th>
-        <th data-sort="custom_slug" class="sortable"><span class="sort-ind"></span>URL</th>
+        <th data-sort="custom_slug" class="sortable">URL<span class="sort-ind"></span></th>
-        <th data-sort="id" class="sortable"><span class="sort-ind"></span>ID</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>

internal/web/templates/new.html

@@ -19,7 +19,7 @@
           <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>
+        <button type="button" class="btn btn-icon wrap-toggle" id="wrap-toggle" title="Toggle line wrap" aria-pressed="false">Wrap</button>
         </div>
       </div>
     </div>
@@ -28,12 +28,15 @@
       <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 spacer-flex"></div>
       <button class="btn" id="create">Create</button>
     </div>
+    <div class="jumpnav hidden" id="jumpnav" data-jump-scroll="#content">
+      <button type="button" class="btn jump-btn" data-jump="top">Top</button>
+      <button type="button" class="btn jump-btn" data-jump="bottom">Bottom</button>
+    </div>
   </div>
 
   <div class="pane-r">
@@ -91,4 +94,5 @@
   </div>
 </div>
 <script src="/static/new.js" defer></script>
+<script src="/static/jump.js" defer></script>
 {{template "foot" .}}

internal/web/templates/paste.html

@@ -6,10 +6,11 @@
       <h1>{{if .Title}}{{.Title}}{{else}}Untitled paste{{end}}</h1>
       {{if .CustomSlug}}<span class="slug">/{{.CustomSlug}}</span>{{end}}
       <div class="spacer"></div>
-      <button type="button" class="iconbtn wrap-toggle" title="Toggle line wrap" aria-pressed="false">wrap</button>
+      <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="/raw/{{.ID}}">Raw</a>
-      <a class="iconbtn" href="#" id="copy-btn">copy</a>
+      <a class="iconbtn swapbtn" href="#" id="copy-link-btn"><span class="swap-label">Link</span><span class="swap-check">✓</span></a>
-      {{if .DeletionToken}}<a class="iconbtn danger" href="#" id="delete-btn">delete</a>{{end}}
+      <a class="iconbtn swapbtn" href="#" id="copy-btn"><span class="swap-label">Copy</span><span class="swap-check">✓</span></a>
+      {{if .DeletionToken}}<a class="iconbtn danger" href="#" id="delete-btn">Delete</a>{{end}}
     </div>
   </div>
   <div class="float">
@@ -20,7 +21,7 @@
       </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>
@@ -34,31 +35,33 @@
     </div>
   </div>
   {{if .JustCreated}}
-  <div class="float">
+  <div class="created-pill" id="created-pill" role="status">Paste Created</div>
-    <div class="created-banner show">
-      Paste created. Link copied to clipboard: <a href="/{{.ID}}">{{.Host}}/{{.ID}}</a>
-      {{if .DeletionToken}} · deletion token: <code>{{.DeletionToken}}</code>{{end}}
-    </div>
-  </div>
   {{end}}
   {{if .Attachment}}
   <div class="float">
     <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>
-      {{if or (eq .Attachment.Mime "image/png") (eq .Attachment.Mime "image/jpeg") (eq .Attachment.Mime "image/gif") (eq .Attachment.Mime "image/webp")}}
-      <div class="attachment-preview"><img src="/f/{{.Attachment.ID}}/{{.Attachment.Filename}}" alt="{{.Attachment.Filename}}"></div>
-      {{end}}
     </div>
   </div>
   {{end}}
+  {{if not .Attachment}}
   <div class="float">
     <div class="code" id="code"><div class="gutter" id="gutter">{{.Gutter}}</div><div class="codebody" id="codebody">{{.ContentHTML}}</div></div>
   </div>
+  {{end}}
+  <div class="jumpnav hidden" id="jumpnav">
+    <button type="button" class="btn jump-btn" data-jump="top">Top</button>
+    <button type="button" class="btn jump-btn" data-jump="bottom">Bottom</button>
+  </div>
 </div>
 <input type="hidden" id="raw-content" value="{{.ContentAttr}}">
 <script src="/static/paste.js" defer data-paste-id="{{.ID}}"></script>
 <script src="/static/paste-lines.js" defer></script>
+<script src="/static/jump.js" defer></script>
 {{template "foot" .}}

internal/web/web.go

@@ -231,6 +231,20 @@ func (h *Handlers) renderPageStatus(w http.ResponseWriter, name string, status i
 	}
 }
 
+// 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 := ""
@@ -245,27 +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,
@@ -279,6 +328,7 @@ func (h *Handlers) renderPaste(w http.ResponseWriter, row *store.PasteRow, justC
 		"ReadsTotal":    int(row.ReadsLimit.Int64),
 		"JustCreated":   justCreated,
 		"Attachment":    attachment,
+		"AttachmentImage": attImage,
 		"Host":          "this host",
 	}
 	h.renderPage(w, "paste.html", data)
@@ -352,7 +402,7 @@ func (h *Handlers) HandlePasteView(w http.ResponseWriter, r *http.Request) {
 		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
@@ -383,9 +433,9 @@ func (h *Handlers) HandleNewPage(w http.ResponseWriter, r *http.Request) {
 	h.renderPage(w, "new.html", map[string]any{"Page": "new"})
 }
 
-// HandleHistoryPage serves /history.
+// HandleHistoryPage serves /public.
 func (h *Handlers) HandleHistoryPage(w http.ResponseWriter, r *http.Request) {
-	h.renderPage(w, "history.html", map[string]any{"Page": "history"})
+	h.renderPage(w, "history.html", map[string]any{"Page": "public"})
 }
 
 // HandleSettingsPage serves /settings.
@@ -402,9 +452,9 @@ func (h *Handlers) HandleSettingsPage(w http.ResponseWriter, r *http.Request) {
 	h.renderPage(w, "settings.html", map[string]any{"Page": "settings", "Themes": themes})
 }
 
-// HandleMinePage serves /mine.
+// HandleMinePage serves /saved.
 func (h *Handlers) HandleMinePage(w http.ResponseWriter, r *http.Request) {
-	h.renderPage(w, "mine.html", map[string]any{"Page": "mine"})
+	h.renderPage(w, "mine.html", map[string]any{"Page": "saved"})
 }
 
 // HandleAdminPage serves /admin.