Count what the cache holds in the default cache_max_bytes (closes #184)

The default limit was 75% of the space free at startup. The cache's own
files are not free space, so a fuller cache got a smaller limit after a
restart and eviction then deleted most of it. The default is now 75% of
the sum of the free space and what the cache already holds by its own
size accounting, at least 500 MiB. The cache works it out when it
opens, after the database is open, so the computation and its tests
moved from internal/config to internal/imgcache; the config only
records whether cache_max_bytes was set.

Model: opus-5-5

README.md

@@ -74,9 +74,10 @@ database and the disk cache:
   and files still being written come on top, and eviction runs in the
   background, so the cache can pass the limit for a while: leave room on the
   volume beyond it.
-- Set `cache_max_bytes` for a lasting deployment. Its default is 75% of the
-  space free when pixa starts, which the cache's own files reduce, so a fuller
-  cache gives a smaller limit after a restart.
+- Set `cache_max_bytes` for a lasting deployment. Its default, worked out each
+  time pixa starts, is 75% of the sum of the space free on the volume and the
+  space the cached images already take, so a restart keeps the limit the cache
+  had, but anything else that fills or frees space on the volume moves it.
 
 A load balancer's health check can request `/.well-known/healthcheck.json`,
 which answers 200 whenever pixa is running, in maintenance mode too (see
@@ -108,7 +109,7 @@ What the [upaas](https://git.eeqj.de/sneak/upaas) app for pixa needs:
     - `PIXA_ALLOWLIST_HOSTS`: upstream hosts served without a signature,
       comma-separated
     - `PIXA_CACHE_MAX_BYTES`: disk cache limit in bytes; `0` disables it;
-      default 75% of free space
+      default 75% of (free space + what the cache holds)
     - the rest are in the table under Configuration below
 - **Health check:** the image's `HEALTHCHECK` requests
   `/.well-known/healthcheck.json`. upaas reads the container's health 60
@@ -191,9 +192,8 @@ path under `/v1/` answers 200, in maintenance mode too.
 - `GET /.well-known/healthcheck.json` — JSON with `status` (`ok`), `now`,
   `uptime_seconds`, `uptime_human`, `version`, `appname` and
   `maintenance_mode`. Needs: nothing. Answers: 200, always.
-- `GET /static/<file>` — the stylesheet and script the login and generator
-  pages load. Needs: nothing. Answers: 200, or 404 for a file that does not
-  exist.
+- `GET /static/<file>` — the script the login and generator pages load. Needs:
+  nothing. Answers: 200, or 404 for a file that does not exist.
 - `GET /metrics` — Prometheus metrics (see Architecture). Needs: HTTP basic
   authentication with `metrics.username` and `metrics.password`. Answers: 200;
   401 without them; 404 when they are not set, as the route then does not exist.
@@ -425,7 +425,7 @@ and the defaults.
 | `PORT`                               | `port`                          | Port to listen on; default `8080`                                            |
 | `PIXA_STATE_DIR`                     | `state_dir`                     | Directory for the database and the disk cache; default `/var/lib/pixa`       |
 | `PIXA_DB_URL`                        | `db_url`                        | SQLite database URL; default `state.sqlite3` in the state directory          |
-| `PIXA_CACHE_MAX_BYTES`               | `cache_max_bytes`               | Disk cache limit in bytes; `0` disables it; default 75% of free space        |
+| `PIXA_CACHE_MAX_BYTES`               | `cache_max_bytes`               | Disk cache limit in bytes; `0` disables it; default 75% of (free + cached)   |
 | `PIXA_ALLOWLIST_HOSTS`               | `allowlist_hosts`               | Upstream hosts served without a signature                                    |
 | `PIXA_BLOCKED_NETWORKS`              | `blocked_networks`              | CIDR ranges never fetched from, on top of the built-in ones                  |
 | `PIXA_TRUSTED_PROXIES`               | `trusted_proxies`               | CIDR ranges of proxies whose `X-Forwarded-For` is believed; default RFC 1918 |
@@ -490,8 +490,10 @@ Key settings in more detail:
   each), so keep it longer than `upstream_fetch_timeout` plus 20 seconds
 - `signing_key` — HMAC secret for URL signatures
 - `cache_max_bytes` — disk cache size limit in bytes; `0` disables the
-  disk cache entirely; omitted defaults to 75% of the free space on
-  the filesystem containing `<state_dir>/cache/` (minimum 500 MiB)
+  disk cache entirely; omitted defaults to 75% of the sum of the free space on
+  the filesystem containing `<state_dir>/cache/` and the bytes of source and
+  transformed images the cache already holds, worked out at startup (minimum
+  500 MiB)
 - `upstream_connections` — the most connections to upstream hosts at once, all
   hosts together, on top of `upstream_connections_per_host`; default `64`. A
   fetch holds its connection until its image has been processed. A fetch that

TODO.md

@@ -29,15 +29,14 @@ P2: security: referer blacklist
 
 # Completed Steps
 
-- 2026-10-04 the Content-Security-Policy allows no inline script or style
-  (closes #125): `script-src` and `style-src` are `'self'` only. The generator
-  page's two inline `onclick` handlers moved into
-  `internal/static/generator.js`, attached with `addEventListener`; the bundled
-  Tailwind script, which built styles in the browser, is replaced by a small
-  hand-written `internal/static/style.css` with only the rules the login and
-  generator pages use, the templates carrying a few plain class names in place
-  of Tailwind's. No build step. The pages keep their layout, not every pixel of
-  it.
+- 2026-10-04 the default `cache_max_bytes` no longer shrinks as the cache fills
+  (closes #184): for an omitted key, the cache works out the limit when it
+  opens, after the database is open, as 75% of the sum of the free space on the
+  filesystem containing `<state_dir>/cache/` and what the cache already holds by
+  its own size accounting, at least 500 MiB, so a cache filled to its limit
+  keeps that limit across a restart. The computation and its tests moved from
+  `internal/config` to `internal/imgcache`; the config only records whether the
+  key was set.
 - 2026-10-04 deployment guide and example Caddy config (closes #89):
   "Deployment" in `README.md` says what the reverse proxy in front of pixa must
   do (terminate TLS; pass `Host`, `Origin` and `Referer` on unchanged; set

config.example.yml

@@ -128,8 +128,9 @@ access_control_allow_origin: "*"
 
 # Maximum disk cache size in bytes. Explicit values are used exactly as
 # given; 0 disables the disk cache entirely (every request fetches and
-# processes uncached). When omitted, the default is 75% of the free
-# space on the filesystem containing <state_dir>/cache/ at startup,
+# processes uncached). When omitted, the default is 75% of the sum of
+# the free space on the filesystem containing <state_dir>/cache/ and
+# the bytes of images the cache already holds, worked out at startup,
 # with a minimum of 500 MiB.
 # cache_max_bytes: 10737418240
 

internal/config/cache_max_bytes_internal_test.go

@@ -1,26 +1,10 @@
 package config
 
 import (
-	"errors"
-	"log/slog"
-	"os"
-	"path/filepath"
 	"strings"
 	"testing"
 )
 
-// Static errors returned by the stub free-space probes below.
-var (
-	errTestStatfsFailed     = errors.New("statfs failed")
-	errTestProbeNotExpected = errors.New("probe must not be called")
-)
-
-// discardLogger returns a logger that swallows all output, for tests
-// that exercise code paths which log.
-func discardLogger() *slog.Logger {
-	return slog.New(slog.DiscardHandler)
-}
-
 // TestCacheMaxBytesExplicitValueUsedWithoutFloor verifies that an
 // explicitly configured cache_max_bytes value is used exactly as
 // given: the 500 MiB floor applies only to the computed default, never
@@ -151,155 +135,30 @@ func TestCacheMaxBytesInvalidValuesAbortStartup(t *testing.T) {
 	}
 }
 
-// TestComputeDefaultCacheMaxBytesUses75PercentOfFreeSpace verifies the
-// computed default is 75% of the probed free space when that exceeds
-// the floor.
-func TestComputeDefaultCacheMaxBytesUses75PercentOfFreeSpace(t *testing.T) {
+// TestCacheMaxBytesExplicitIsRecorded verifies that an omitted
+// cache_max_bytes is recorded as not explicit, so the cache works out
+// the default when it opens, and that an explicit zero is recorded as
+// explicit, so it disables the disk cache instead.
+func TestCacheMaxBytesExplicitIsRecorded(t *testing.T) {
 	t.Parallel()
 
-	// 4 GiB free -> 3 GiB default.
-	probe := func(string) (uint64, error) { return 4294967296, nil }
+	signingKeyLine := "signing_key: " + validTestSigningKey + "\n"
 
-	got, err := ComputeDefaultCacheMaxBytes(t.TempDir(), probe)
-	if err != nil {
-		t.Fatalf("ComputeDefaultCacheMaxBytes returned error: %v", err)
-	}
-
-	if got != 3221225472 {
-		t.Errorf("ComputeDefaultCacheMaxBytes = %d, want 3221225472 (75%% of 4 GiB)",
-			got)
-	}
-}
-
-// TestComputeDefaultCacheMaxBytesAppliesFloorToComputedDefault
-// verifies that when 75% of free space is below 500 MiB, the computed
-// default is floored at DefaultCacheMaxBytesFloor.
-func TestComputeDefaultCacheMaxBytesAppliesFloorToComputedDefault(t *testing.T) {
-	t.Parallel()
-
-	cases := []struct {
-		name      string
-		freeBytes uint64
-	}{
-		{name: "100 MiB free", freeBytes: 104857600},
-		{name: "zero free", freeBytes: 0},
-		{name: "just below floor threshold", freeBytes: 699050665},
-	}
-
-	for _, tc := range cases {
-		t.Run(tc.name, func(t *testing.T) {
-			t.Parallel()
-
-			probe := func(string) (uint64, error) { return tc.freeBytes, nil }
-
-			got, err := ComputeDefaultCacheMaxBytes(t.TempDir(), probe)
-			if err != nil {
-				t.Fatalf("ComputeDefaultCacheMaxBytes returned error: %v", err)
-			}
-
-			if got != DefaultCacheMaxBytesFloor {
-				t.Errorf("ComputeDefaultCacheMaxBytes = %d, want floor %d",
-					got, DefaultCacheMaxBytesFloor)
-			}
-		})
-	}
-}
-
-// TestComputeDefaultCacheMaxBytesPropagatesProbeError verifies that a
-// failing free-space probe produces an error naming the config key,
-// instead of a silently wrong default.
-func TestComputeDefaultCacheMaxBytesPropagatesProbeError(t *testing.T) {
-	t.Parallel()
-
-	probe := func(string) (uint64, error) { return 0, errTestStatfsFailed }
-
-	_, err := ComputeDefaultCacheMaxBytes(t.TempDir(), probe)
-	if err == nil {
-		t.Fatal("probe failure must produce an error, got nil")
-	}
-
-	t.Logf("got expected error: %v", err)
-
-	if !strings.Contains(err.Error(), keyCacheMaxBytes) {
-		t.Errorf("error %q does not name the config key cache_max_bytes", err.Error())
-	}
-}
-
-// TestResolveCacheMaxBytesComputesDefaultWhenOmitted verifies that an
-// omitted cache_max_bytes key resolves to the computed default, that
-// the probe is pointed at <state_dir>/cache/ (which must be created
-// first so statfs measures the right filesystem), and that the result
-// lands on the Config.
-func TestResolveCacheMaxBytesComputesDefaultWhenOmitted(t *testing.T) {
-	t.Parallel()
-
-	c, err := configFromYAML(t, "signing_key: "+validTestSigningKey+"\n")
+	omitted, err := configFromYAML(t, signingKeyLine)
 	if err != nil {
 		t.Fatalf("minimal config should be valid, got error: %v", err)
 	}
 
-	c.StateDir = t.TempDir()
-	wantCacheDir := filepath.Join(c.StateDir, "cache")
-
-	var probedPath string
-
-	// 4 GiB free -> 3 GiB default.
-	probe := func(path string) (uint64, error) {
-		probedPath = path
-
-		return 4294967296, nil
+	if omitted.CacheMaxBytesExplicit {
+		t.Error("omitted cache_max_bytes recorded as explicit")
 	}
 
-	err = c.resolveCacheMaxBytes(discardLogger(), probe)
+	zero, err := configFromYAML(t, signingKeyLine+"cache_max_bytes: 0\n")
 	if err != nil {
-		t.Fatalf("resolveCacheMaxBytes returned error: %v", err)
+		t.Fatalf("cache_max_bytes: 0 must be accepted, got error: %v", err)
 	}
 
-	if c.CacheMaxBytes != 3221225472 {
-		t.Errorf("CacheMaxBytes = %d, want computed default 3221225472",
-			c.CacheMaxBytes)
-	}
-
-	if probedPath != wantCacheDir {
-		t.Errorf("free space probed at %q, want cache directory %q",
-			probedPath, wantCacheDir)
-	}
-
-	info, err := os.Stat(wantCacheDir)
-	if err != nil || !info.IsDir() {
-		t.Errorf("cache directory %q was not created before probing: info=%v err=%v",
-			wantCacheDir, info, err)
-	}
-}
-
-// TestResolveCacheMaxBytesDoesNotOverrideExplicitValue verifies that
-// an explicitly configured value survives resolution untouched and
-// that the free-space probe is never consulted for it.
-func TestResolveCacheMaxBytesDoesNotOverrideExplicitValue(t *testing.T) {
-	t.Parallel()
-
-	yamlContent := "signing_key: " + validTestSigningKey + "\ncache_max_bytes: 1024\n"
-
-	c, err := configFromYAML(t, yamlContent)
-	if err != nil {
-		t.Fatalf("explicit cache_max_bytes must be accepted, got error: %v", err)
-	}
-
-	c.StateDir = t.TempDir()
-
-	probe := func(string) (uint64, error) {
-		t.Error("free-space probe must not be consulted for explicit values")
-
-		return 0, errTestProbeNotExpected
-	}
-
-	err = c.resolveCacheMaxBytes(discardLogger(), probe)
-	if err != nil {
-		t.Fatalf("resolveCacheMaxBytes returned error: %v", err)
-	}
-
-	if c.CacheMaxBytes != 1024 {
-		t.Errorf("CacheMaxBytes = %d, want explicit 1024 (no floor, no recompute)",
-			c.CacheMaxBytes)
+	if !zero.CacheMaxBytesExplicit {
+		t.Error("cache_max_bytes: 0 not recorded as explicit")
 	}
 }

internal/config/cachesize.go

@@ -1,116 +0,0 @@
-package config
-
-import (
-	"fmt"
-	"log/slog"
-	"math"
-	"os"
-	"path/filepath"
-	"syscall"
-)
-
-// DefaultCacheMaxBytesFloor is the minimum computed default for the
-// cache_max_bytes setting: 500 MiB. The floor applies only to the
-// computed default (when the key is omitted from the configuration),
-// never to explicitly configured values.
-const DefaultCacheMaxBytesFloor int64 = 524288000
-
-// cacheDirPerms is the permission mode for the cache directory created
-// before probing free space, matching the state directory permissions.
-const cacheDirPerms = 0o750
-
-// freeSpaceFractionNumerator and freeSpaceFractionDenominator express
-// the 75% share of free space used for the computed default limit as
-// integer arithmetic (dividing before multiplying avoids overflow).
-const (
-	freeSpaceFractionNumerator   uint64 = 3
-	freeSpaceFractionDenominator uint64 = 4
-)
-
-// FreeSpaceProbeFunc reports the number of free bytes available on the
-// filesystem containing path. It is a function type so tests can
-// inject a fake probe instead of depending on the host disk.
-type FreeSpaceProbeFunc func(path string) (uint64, error)
-
-// defaultFreeSpaceProbe reports free filesystem bytes via statfs on
-// the given path, as available to unprivileged processes.
-func defaultFreeSpaceProbe(path string) (uint64, error) {
-	var stat syscall.Statfs_t
-
-	err := syscall.Statfs(path, &stat)
-	if err != nil {
-		return 0, err
-	}
-
-	if stat.Bsize < 0 {
-		return 0, fmt.Errorf("%w %d for %q", errNegativeBlockSize, stat.Bsize, path)
-	}
-
-	blockSize := uint64(stat.Bsize)
-
-	return stat.Bavail * blockSize, nil
-}
-
-// ComputeDefaultCacheMaxBytes returns the default cache size limit for
-// the filesystem containing cacheDir: 75% of the free bytes reported
-// by probe, with a floor of DefaultCacheMaxBytesFloor.
-func ComputeDefaultCacheMaxBytes(
-	cacheDir string, probe FreeSpaceProbeFunc,
-) (int64, error) {
-	freeBytes, err := probe(cacheDir)
-	if err != nil {
-		return 0, fmt.Errorf("config key %q: cannot determine free space for %q: %w",
-			"cache_max_bytes", cacheDir, err)
-	}
-
-	computed := freeBytes / freeSpaceFractionDenominator * freeSpaceFractionNumerator
-	computed = min(computed, math.MaxInt64)
-
-	// gosec cannot see that min() above bounds computed, so it reads
-	// this conversion as potentially overflowing. It cannot: computed is
-	// at most math.MaxInt64 on every path here.
-	//nolint:gosec // G115: clamped to MaxInt64 by min above
-	limit := int64(computed)
-	limit = max(limit, DefaultCacheMaxBytesFloor)
-
-	return limit, nil
-}
-
-// resolveCacheMaxBytes finalizes CacheMaxBytes after state_dir
-// validation: an explicitly configured value is kept as-is (no floor
-// applies), while an omitted key receives the computed default based
-// on free space in <state_dir>/cache/. The cache directory is created
-// first so statfs measures the filesystem that will actually hold the
-// cache. The effective limit is logged either way.
-func (c *Config) resolveCacheMaxBytes(
-	log *slog.Logger, probe FreeSpaceProbeFunc,
-) error {
-	if !c.cacheMaxBytesExplicit {
-		cacheDir := filepath.Join(c.StateDir, "cache")
-
-		err := os.MkdirAll(cacheDir, cacheDirPerms)
-		if err != nil {
-			return fmt.Errorf("config key %q: cannot create cache directory %q: %w",
-				keyCacheMaxBytes, cacheDir, err)
-		}
-
-		limit, err := ComputeDefaultCacheMaxBytes(cacheDir, probe)
-		if err != nil {
-			return err
-		}
-
-		c.CacheMaxBytes = limit
-
-		log.Info("computed default cache size limit from free space",
-			"cache_max_bytes", limit,
-			"cache_dir", cacheDir,
-		)
-	}
-
-	log.Info("effective cache size limit",
-		"cache_max_bytes", c.CacheMaxBytes,
-		"cache_disabled", c.CacheMaxBytes == 0,
-	)
-
-	return nil
-}

internal/config/config.go

@@ -91,9 +91,7 @@ var (
 	errMustBeSetTogether = errors.New("must be set together")
 	errMustNotBeNegative = errors.New("must not be negative")
 	errOverflowsInt64    = errors.New("overflows a 64-bit integer")
-	errNegativeBlockSize = errors.New(
-		"statfs reported negative block size")
-	errValueNull = errors.New(
+	errValueNull         = errors.New(
 		"value is null; omit the key entirely to use the default")
 	errValuesNull = errors.New(
 		"value is null; omit a key entirely to use its default")
@@ -171,16 +169,16 @@ type Config struct {
 
 	// CacheMaxBytes is the disk cache size limit in bytes. Zero
 	// disables the disk cache entirely. When cache_max_bytes is
-	// omitted from the configuration, this holds the computed default
-	// (75% of free space on the filesystem containing
-	// <state_dir>/cache/, floored at DefaultCacheMaxBytesFloor).
+	// omitted from the configuration, this is zero and
+	// CacheMaxBytesExplicit is false.
 	CacheMaxBytes int64
 
-	// cacheMaxBytesExplicit records whether cache_max_bytes was
+	// CacheMaxBytesExplicit records whether cache_max_bytes was
 	// explicitly set, in the environment or the configuration file.
-	// Explicit values are used exactly as given; only an omitted key
-	// gets the computed default (and its floor) in resolveCacheMaxBytes.
-	cacheMaxBytesExplicit bool
+	// Explicit values are used exactly as given; for an omitted key the
+	// cache works out the default limit when it opens (see
+	// imgcache.CacheConfig.UseDefaultMaxBytes).
+	CacheMaxBytesExplicit bool
 }
 
 // New creates a new Config instance from the environment and the
@@ -217,9 +215,13 @@ func New(_ fx.Lifecycle, params Params) (*Config, error) {
 		return nil, err
 	}
 
-	err = c.resolveCacheMaxBytes(log, defaultFreeSpaceProbe)
-	if err != nil {
-		return nil, err
+	// An omitted cache_max_bytes is worked out and logged when the
+	// cache opens.
+	if c.CacheMaxBytesExplicit {
+		log.Info("effective cache size limit",
+			"cache_max_bytes", c.CacheMaxBytes,
+			"cache_disabled", c.CacheMaxBytes == 0,
+		)
 	}
 
 	if c.Debug {
@@ -298,11 +300,11 @@ func newFromSmartConfig(sc *smartconfig.Config) (*Config, error) {
 		TrustedProxies:  trustedProxies,
 	}
 
-	// The computed default for cache_max_bytes needs a validated
-	// state_dir, so it is resolved later (resolveCacheMaxBytes); here
-	// we only record whether the operator set the key explicitly.
+	// The default for an omitted cache_max_bytes is worked out when
+	// the cache opens; here we only record whether the operator set
+	// the key explicitly.
 	if _, present := lookupValue(sc, keyCacheMaxBytes); present {
-		c.cacheMaxBytesExplicit = true
+		c.CacheMaxBytesExplicit = true
 	}
 
 	// Build DBURL from StateDir if not explicitly set. The derived URL

internal/config/env_internal_test.go

@@ -98,7 +98,7 @@ func TestEnvironmentSetsEveryKey(t *testing.T) {
 		UpstreamConnections:        10,
 		MaxConcurrentProcessing:    3,
 		CacheMaxBytes:              1024,
-		cacheMaxBytesExplicit:      true,
+		CacheMaxBytesExplicit:      true,
 		BlockedNetworks:            []netip.Prefix{netip.MustParsePrefix("203.0.113.0/24")},
 		TrustedProxies:             []netip.Prefix{netip.MustParsePrefix("192.0.2.0/24")},
 		AccessControlAllowOrigin:   "https://app.example.com",

internal/handlers/handlers.go

@@ -83,14 +83,16 @@ func (s *Handlers) WaitForProcessing(ctx context.Context) int {
 // initImageService initializes the image cache and service.
 func (s *Handlers) initImageService() error {
 	// Create the cache. cache_max_bytes: 0 disables the disk cache
-	// entirely; any other value is the eviction limit in bytes.
+	// entirely; any other value is the eviction limit in bytes; when
+	// it is omitted, the cache works out the default limit itself.
 	cache, err := imgcache.NewCache(s.db.DB(), imgcache.CacheConfig{
-		StateDir:         s.config.StateDir,
-		CacheTTL:         imgcache.DefaultCacheTTL,
-		NegativeTTL:      imgcache.DefaultNegativeTTL,
-		MaxBytes:         s.config.CacheMaxBytes,
-		DisableDiskCache: s.config.CacheMaxBytes == 0,
-		Logger:           s.log,
+		StateDir:           s.config.StateDir,
+		CacheTTL:           imgcache.DefaultCacheTTL,
+		NegativeTTL:        imgcache.DefaultNegativeTTL,
+		MaxBytes:           s.config.CacheMaxBytes,
+		UseDefaultMaxBytes: !s.config.CacheMaxBytesExplicit,
+		DisableDiskCache:   s.config.CacheMaxBytesExplicit && s.config.CacheMaxBytes == 0,
+		Logger:             s.log,
 	})
 	if err != nil {
 		return err

internal/imgcache/cache.go

@@ -37,11 +37,16 @@ type CacheConfig struct {
 	NegativeTTL time.Duration
 
 	// MaxBytes is the disk cache size limit in bytes that eviction
-	// enforces. Zero means no limit is enforced (no eviction). The
-	// config layer supplies the computed default when the operator
-	// omits cache_max_bytes.
+	// enforces. Zero means no limit is enforced (no eviction).
 	MaxBytes int64
 
+	// UseDefaultMaxBytes makes NewCache replace MaxBytes with the
+	// default limit: 75% of the sum of the space free on the filesystem
+	// holding the cache and the bytes the cache already holds, at least
+	// DefaultCacheMaxBytesFloor. The config layer sets this when the
+	// operator omits cache_max_bytes.
+	UseDefaultMaxBytes bool
+
 	// DisableDiskCache turns the disk cache off entirely: no cache
 	// directories are created, lookups always miss, stores are
 	// no-ops, and no eviction machinery runs. The config layer sets
@@ -145,6 +150,20 @@ func NewCache(db *sql.DB, config CacheConfig) (*Cache, error) {
 	c.variants = variants
 	c.srcMetadata = srcMetadata
 
+	if config.UseDefaultMaxBytes {
+		limit, err := c.computeDefaultMaxBytes(context.Background(), defaultFreeSpaceProbe)
+		if err != nil {
+			return nil, err
+		}
+
+		c.config.MaxBytes = limit
+
+		log.Info("computed default cache size limit from free space and cache contents",
+			"cache_max_bytes", limit,
+			"cache_dir", filepath.Join(config.StateDir, "cache"),
+		)
+	}
+
 	return c, nil
 }
 

internal/imgcache/cachesize.go

@@ -0,0 +1,89 @@
+package imgcache
+
+import (
+	"context"
+	"errors"
+	"fmt"
+	"math"
+	"path/filepath"
+	"syscall"
+)
+
+// DefaultCacheMaxBytesFloor is the minimum computed default for the
+// cache_max_bytes setting: 500 MiB. The floor applies only to the
+// computed default (when the key is omitted from the configuration),
+// never to explicitly configured values.
+const DefaultCacheMaxBytesFloor int64 = 524288000
+
+// freeSpaceFractionNumerator and freeSpaceFractionDenominator express
+// the 75% share used for the computed default limit as integer
+// arithmetic (dividing before multiplying avoids overflow).
+const (
+	freeSpaceFractionNumerator   uint64 = 3
+	freeSpaceFractionDenominator uint64 = 4
+)
+
+var errNegativeBlockSize = errors.New("statfs reported negative block size")
+
+// FreeSpaceProbeFunc reports the number of free bytes available on the
+// filesystem containing path. It is a function type so tests can
+// inject a fake probe instead of depending on the host disk.
+type FreeSpaceProbeFunc func(path string) (uint64, error)
+
+// defaultFreeSpaceProbe reports free filesystem bytes via statfs on
+// the given path, as available to unprivileged processes.
+func defaultFreeSpaceProbe(path string) (uint64, error) {
+	var stat syscall.Statfs_t
+
+	err := syscall.Statfs(path, &stat)
+	if err != nil {
+		return 0, err
+	}
+
+	if stat.Bsize < 0 {
+		return 0, fmt.Errorf("%w %d for %q", errNegativeBlockSize, stat.Bsize, path)
+	}
+
+	blockSize := uint64(stat.Bsize)
+
+	return stat.Bavail * blockSize, nil
+}
+
+// computeDefaultMaxBytes returns the default cache size limit: 75% of
+// the sum of the free bytes probe reports for <state_dir>/cache/ and
+// the bytes the cache already holds, with a floor of
+// DefaultCacheMaxBytesFloor. Counting what the cache holds keeps the
+// limit from shrinking as the cache fills.
+func (c *Cache) computeDefaultMaxBytes(
+	ctx context.Context, probe FreeSpaceProbeFunc,
+) (int64, error) {
+	cacheDir := filepath.Join(c.config.StateDir, "cache")
+
+	freeBytes, err := probe(cacheDir)
+	if err != nil {
+		return 0, fmt.Errorf(
+			"default cache_max_bytes: cannot determine free space for %q: %w",
+			cacheDir, err)
+	}
+
+	usedBytes, err := c.UsageBytes(ctx)
+	if err != nil {
+		return 0, err
+	}
+
+	// Both terms are at most math.MaxInt64, so the sum cannot overflow.
+	//nolint:gosec // G115: UsageBytes sums file sizes, never negative
+	spaceBytes := min(freeBytes, math.MaxInt64) + uint64(usedBytes)
+
+	computed := spaceBytes / freeSpaceFractionDenominator * freeSpaceFractionNumerator
+	computed = min(computed, math.MaxInt64)
+
+	// gosec cannot see that min() above bounds computed, so it reads
+	// this conversion as potentially overflowing. It cannot: computed is
+	// at most math.MaxInt64 on every path here.
+	//nolint:gosec // G115: clamped to MaxInt64 by min above
+	limit := int64(computed)
+	limit = max(limit, DefaultCacheMaxBytesFloor)
+
+	return limit, nil
+}

internal/imgcache/cachesize_internal_test.go

@@ -0,0 +1,178 @@
+package imgcache
+
+import (
+	"errors"
+	"os"
+	"path/filepath"
+	"strings"
+	"testing"
+)
+
+// errTestStatfsFailed is returned by the failing free-space probe below.
+var errTestStatfsFailed = errors.New("statfs failed")
+
+// TestComputeDefaultMaxBytesCountsWhatTheCacheHolds verifies that the
+// default limit is 75% of the free space plus what the cache already
+// holds, so a cache filled to its limit keeps that limit across a
+// restart instead of shrinking to 75% of the space left free.
+func TestComputeDefaultMaxBytesCountsWhatTheCacheHolds(t *testing.T) {
+	t.Parallel()
+
+	cache, _ := newEvictionTestCache(t, 1<<30)
+
+	// Empty cache, 4 GiB free -> 3 GiB default.
+	got, err := cache.computeDefaultMaxBytes(t.Context(),
+		func(string) (uint64, error) { return 4294967296, nil })
+	if err != nil {
+		t.Fatalf("computeDefaultMaxBytes returned error: %v", err)
+	}
+
+	if got != 3221225472 {
+		t.Errorf("default for an empty cache = %d, want 3221225472 (75%% of 4 GiB)",
+			got)
+	}
+
+	// The cache now holds those 3 GiB, which leaves 1 GiB free.
+	_, err = cache.db.ExecContext(t.Context(),
+		`INSERT INTO variant_content (cache_key, size_bytes, content_type)
+		 VALUES (?, ?, ?)`,
+		string(testVariantKeyOne), 3221225472, testContentTypeWebP,
+	)
+	if err != nil {
+		t.Fatalf("failed to insert variant accounting row: %v", err)
+	}
+
+	got, err = cache.computeDefaultMaxBytes(t.Context(),
+		func(string) (uint64, error) { return 1073741824, nil })
+	if err != nil {
+		t.Fatalf("computeDefaultMaxBytes returned error: %v", err)
+	}
+
+	if got != 3221225472 {
+		t.Errorf("default for a cache holding 3 GiB with 1 GiB free = %d, "+
+			"want 3221225472 (75%% of 1 GiB + 3 GiB)", got)
+	}
+}
+
+// TestComputeDefaultMaxBytesAppliesFloor verifies that when 75% of the
+// free space plus what the cache holds is below 500 MiB, the default
+// is floored at DefaultCacheMaxBytesFloor.
+func TestComputeDefaultMaxBytesAppliesFloor(t *testing.T) {
+	t.Parallel()
+
+	cases := []struct {
+		name      string
+		freeBytes uint64
+	}{
+		{name: "100 MiB free", freeBytes: 104857600},
+		{name: "zero free", freeBytes: 0},
+		{name: "just below floor threshold", freeBytes: 699050665},
+	}
+
+	for _, tc := range cases {
+		t.Run(tc.name, func(t *testing.T) {
+			t.Parallel()
+
+			cache, _ := newEvictionTestCache(t, 1<<30)
+
+			got, err := cache.computeDefaultMaxBytes(t.Context(),
+				func(string) (uint64, error) { return tc.freeBytes, nil })
+			if err != nil {
+				t.Fatalf("computeDefaultMaxBytes returned error: %v", err)
+			}
+
+			if got != DefaultCacheMaxBytesFloor {
+				t.Errorf("computeDefaultMaxBytes = %d, want floor %d",
+					got, DefaultCacheMaxBytesFloor)
+			}
+		})
+	}
+}
+
+// TestComputeDefaultMaxBytesPropagatesProbeError verifies that a
+// failing free-space probe produces an error naming cache_max_bytes,
+// instead of a silently wrong default.
+func TestComputeDefaultMaxBytesPropagatesProbeError(t *testing.T) {
+	t.Parallel()
+
+	cache, _ := newEvictionTestCache(t, 1<<30)
+
+	_, err := cache.computeDefaultMaxBytes(t.Context(),
+		func(string) (uint64, error) { return 0, errTestStatfsFailed })
+	if err == nil {
+		t.Fatal("probe failure must produce an error, got nil")
+	}
+
+	t.Logf("got expected error: %v", err)
+
+	if !strings.Contains(err.Error(), "cache_max_bytes") {
+		t.Errorf("error %q does not name cache_max_bytes", err.Error())
+	}
+}
+
+// TestComputeDefaultMaxBytesProbesTheCacheDirectory verifies that the
+// probe is pointed at <state_dir>/cache/ and that the directory exists
+// by then, so statfs measures the filesystem that holds the cache.
+func TestComputeDefaultMaxBytesProbesTheCacheDirectory(t *testing.T) {
+	t.Parallel()
+
+	cache, stateDir := newEvictionTestCache(t, 1<<30)
+	wantCacheDir := filepath.Join(stateDir, "cache")
+
+	var probedPath string
+
+	_, err := cache.computeDefaultMaxBytes(t.Context(),
+		func(path string) (uint64, error) {
+			probedPath = path
+
+			info, err := os.Stat(path)
+			if err != nil || !info.IsDir() {
+				t.Errorf("cache directory %q missing when probed: info=%v err=%v",
+					path, info, err)
+			}
+
+			return 4294967296, nil
+		})
+	if err != nil {
+		t.Fatalf("computeDefaultMaxBytes returned error: %v", err)
+	}
+
+	if probedPath != wantCacheDir {
+		t.Errorf("free space probed at %q, want cache directory %q",
+			probedPath, wantCacheDir)
+	}
+}
+
+// TestNewCacheUsesDefaultMaxBytesOnlyWhenAsked verifies that NewCache
+// replaces MaxBytes with the computed default when UseDefaultMaxBytes
+// is set, and keeps MaxBytes as given otherwise.
+func TestNewCacheUsesDefaultMaxBytesOnlyWhenAsked(t *testing.T) {
+	t.Parallel()
+
+	withDefault, err := NewCache(evictionTestDB(t), CacheConfig{
+		StateDir:           t.TempDir(),
+		MaxBytes:           1024,
+		UseDefaultMaxBytes: true,
+	})
+	if err != nil {
+		t.Fatalf("NewCache with UseDefaultMaxBytes failed: %v", err)
+	}
+
+	if withDefault.config.MaxBytes < DefaultCacheMaxBytesFloor {
+		t.Errorf("MaxBytes with UseDefaultMaxBytes = %d, want the default, "+
+			"at least %d", withDefault.config.MaxBytes, DefaultCacheMaxBytesFloor)
+	}
+
+	explicit, err := NewCache(evictionTestDB(t), CacheConfig{
+		StateDir: t.TempDir(),
+		MaxBytes: 1024,
+	})
+	if err != nil {
+		t.Fatalf("NewCache failed: %v", err)
+	}
+
+	if explicit.config.MaxBytes != 1024 {
+		t.Errorf("MaxBytes without UseDefaultMaxBytes = %d, want 1024",
+			explicit.config.MaxBytes)
+	}
+}

internal/middleware/middleware.go

@@ -35,10 +35,13 @@ const HSTSValue = "max-age=31536000; includeSubDomains"
 
 // ContentSecurityPolicyValue is the Content-Security-Policy header value.
 // default-src 'self' is the baseline and frame-ancestors 'none' is the primary
-// clickjacking control.
+// clickjacking control. 'unsafe-inline' is required in script-src and style-src
+// because the served templates carry inline onclick handlers (generator page)
+// and the bundled Tailwind asset injects a runtime <style> element; dropping it
+// needs template changes outside this issue's scope.
 const ContentSecurityPolicyValue = "default-src 'self'; " +
-	"script-src 'self'; " +
-	"style-src 'self'; " +
+	"script-src 'self' 'unsafe-inline'; " +
+	"style-src 'self' 'unsafe-inline'; " +
 	"object-src 'none'; " +
 	"base-uri 'self'; " +
 	"form-action 'self'; " +

internal/middleware/middleware_internal_test.go

@@ -325,13 +325,6 @@ func TestSecurityHeaders_PolicyHeaders(t *testing.T) {
 
 	handler.ServeHTTP(rec, req)
 
-	// The login and generator pages load their script and stylesheet from
-	// /static, so the policy allows no inline script or style.
-	csp := rec.Header().Get("Content-Security-Policy")
-	if strings.Contains(csp, "unsafe-inline") {
-		t.Errorf("Content-Security-Policy allows unsafe-inline: %q", csp)
-	}
-
 	tests := []struct {
 		header string
 		want   string
@@ -340,8 +333,8 @@ func TestSecurityHeaders_PolicyHeaders(t *testing.T) {
 		{
 			"Content-Security-Policy",
 			"default-src 'self'; " +
-				"script-src 'self'; " +
-				"style-src 'self'; " +
+				"script-src 'self' 'unsafe-inline'; " +
+				"style-src 'self' 'unsafe-inline'; " +
 				"object-src 'none'; " +
 				"base-uri 'self'; " +
 				"form-action 'self'; " +

internal/server/routes.go

@@ -53,7 +53,7 @@ func (s *Server) SetupRoutes() {
 	// Robots.txt
 	s.router.Get("/robots.txt", s.h.HandleRobotsTxt())
 
-	// The login and generator pages' stylesheet and script
+	// Static files (Tailwind CSS, etc.)
 	s.router.Handle("/static/*", http.StripPrefix("/static/", static.Handler()))
 
 	// Login/generator UI. The form routes carry CSRF protection; the

internal/static/generator.js

@@ -1,10 +0,0 @@
-// Generator page: a click on the generated URL selects it, and the Copy
-// button copies it. Both are on the page only once a URL has been generated.
-const generatedURL = document.getElementById("generated-url");
-
-if (generatedURL) {
-    generatedURL.addEventListener("click", () => generatedURL.select());
-    document.getElementById("copy-url").addEventListener("click", () => {
-        navigator.clipboard.writeText(generatedURL.value);
-    });
-}

internal/static/static.go

@@ -7,7 +7,7 @@ import (
 	"net/http"
 )
 
-//go:embed *.css *.js
+//go:embed *.js
 var files embed.FS
 
 // FS returns the embedded filesystem containing static files.

internal/static/style.css

@@ -1,190 +0,0 @@
-/* The login and generator pages. */
-
-* {
-    box-sizing: border-box;
-}
-
-body {
-    margin: 0;
-    min-height: 100vh;
-    background: #f3f4f6;
-    font-family: system-ui, sans-serif;
-    line-height: 1.5;
-}
-
-h1 {
-    margin: 0;
-    font-size: 1.5rem;
-    line-height: 2rem;
-    font-weight: 700;
-    color: #1f2937;
-}
-
-label {
-    display: block;
-    margin-bottom: 0.25rem;
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: #374151;
-}
-
-input,
-select {
-    width: 100%;
-    padding: 0.5rem 0.75rem;
-    border: 1px solid #d1d5db;
-    border-radius: 0.375rem;
-    box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
-    font: inherit;
-}
-
-input:focus,
-select:focus {
-    outline: none;
-    border-color: #3b82f6;
-    box-shadow: 0 0 0 2px #3b82f6;
-}
-
-button {
-    width: 100%;
-    padding: 0.5rem 1rem;
-    border: none;
-    border-radius: 0.375rem;
-    background: #2563eb;
-    color: #fff;
-    font: inherit;
-    cursor: pointer;
-    transition: background-color 0.15s;
-}
-
-button:hover {
-    background: #1d4ed8;
-}
-
-button:focus {
-    outline: 2px solid #3b82f6;
-    outline-offset: 2px;
-}
-
-form > * + * {
-    margin-top: 1rem;
-}
-
-.card {
-    padding: 1.5rem;
-    border-radius: 0.5rem;
-    background: #fff;
-    box-shadow:
-        0 4px 6px -1px rgb(0 0 0 / 10%),
-        0 2px 4px -2px rgb(0 0 0 / 10%);
-}
-
-.error {
-    margin-bottom: 1rem;
-    padding: 0.75rem 1rem;
-    border: 1px solid #f87171;
-    border-radius: 0.25rem;
-    background: #fee2e2;
-    color: #b91c1c;
-}
-
-/* Login page: the card centred on the screen. */
-
-.login {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.login .card {
-    width: 100%;
-    max-width: 28rem;
-    padding: 2rem;
-}
-
-.login h1 {
-    margin-bottom: 1.5rem;
-    text-align: center;
-}
-
-/* Generator page. */
-
-.page {
-    max-width: 42rem;
-    margin: 0 auto;
-    padding: 2rem 1rem;
-}
-
-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 2rem;
-}
-
-header a {
-    font-size: 0.875rem;
-    color: #4b5563;
-}
-
-header a:hover {
-    color: #1f2937;
-}
-
-.result {
-    margin-bottom: 1.5rem;
-    padding: 1rem;
-    border: 1px solid #bbf7d0;
-    border-radius: 0.5rem;
-    background: #f0fdf4;
-}
-
-.result h2 {
-    margin: 0 0 0.5rem;
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: #166534;
-}
-
-.result div {
-    display: flex;
-    gap: 0.5rem;
-}
-
-.result input {
-    flex: 1;
-    border-color: #86efac;
-    box-shadow: none;
-    font-family: ui-monospace, monospace;
-    font-size: 0.875rem;
-}
-
-.result button {
-    width: auto;
-    padding: 0.5rem 0.75rem;
-    background: #16a34a;
-    font-size: 0.875rem;
-}
-
-.result button:hover {
-    background: #15803d;
-}
-
-.result p {
-    margin: 0.5rem 0 0;
-    font-size: 0.75rem;
-    color: #16a34a;
-}
-
-.columns {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 1rem;
-}
-
-.note {
-    margin-top: 1rem;
-    font-size: 0.75rem;
-    color: #6b7280;
-    text-align: center;
-}

internal/templates/generator.html

@@ -4,47 +4,52 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Pixa - URL Generator</title>
-    <link rel="stylesheet" href="/static/style.css">
+    <script src="/static/tailwind.js"></script>
 </head>
-<body>
-    <div class="page">
-        <header>
-            <h1>Pixa URL Generator</h1>
-            <a href="/logout">
+<body class="bg-gray-100 min-h-screen">
+    <div class="max-w-2xl mx-auto py-8 px-4">
+        <div class="flex justify-between items-center mb-8">
+            <h1 class="text-2xl font-bold text-gray-800">Pixa URL Generator</h1>
+            <a href="/logout" class="text-sm text-gray-600 hover:text-gray-800 underline">
                 Logout
             </a>
-        </header>
+        </div>
 
         {{if .GeneratedURL}}
-        <div class="result">
-            <h2>Generated URL</h2>
-            <div>
+        <div class="bg-green-50 border border-green-200 rounded-lg p-4 mb-6">
+            <h2 class="text-sm font-medium text-green-800 mb-2">Generated URL</h2>
+            <div class="flex gap-2">
                 <input
                     type="text"
                     readonly
                     value="{{.GeneratedURL}}"
                     id="generated-url"
+                    class="flex-1 px-3 py-2 bg-white border border-green-300 rounded-md text-sm font-mono"
+                    onclick="this.select()"
+                >
+                <button
+                    onclick="navigator.clipboard.writeText(document.getElementById('generated-url').value)"
+                    class="px-3 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 text-sm"
                 >
-                <button id="copy-url">
                     Copy
                 </button>
             </div>
-            <p>
+            <p class="text-xs text-green-600 mt-2">
                 Expires: {{.ExpiresAt}}
             </p>
         </div>
         {{end}}
 
         {{if .Error}}
-        <div class="error">
+        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-6">
             {{.Error}}
         </div>
         {{end}}
 
-        <form method="POST" action="/generate" class="card">
+        <form method="POST" action="/generate" class="bg-white rounded-lg shadow-md p-6 space-y-4">
             {{ .CSRFField }}
             <div>
-                <label for="url">
+                <label for="url" class="block text-sm font-medium text-gray-700 mb-1">
                     Source URL
                 </label>
                 <input
@@ -54,12 +59,13 @@
                     required
                     placeholder="https://example.com/image.jpg"
                     value="{{.FormURL}}"
+                    class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                 >
             </div>
 
-            <div class="columns">
+            <div class="grid grid-cols-2 gap-4">
                 <div>
-                    <label for="width">
+                    <label for="width" class="block text-sm font-medium text-gray-700 mb-1">
                         Width
                     </label>
                     <input
@@ -70,10 +76,11 @@
                         max="8192"
                         value="{{if .FormWidth}}{{.FormWidth}}{{else}}0{{end}}"
                         placeholder="0 = original"
+                        class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                     >
                 </div>
                 <div>
-                    <label for="height">
+                    <label for="height" class="block text-sm font-medium text-gray-700 mb-1">
                         Height
                     </label>
                     <input
@@ -84,16 +91,21 @@
                         max="8192"
                         value="{{if .FormHeight}}{{.FormHeight}}{{else}}0{{end}}"
                         placeholder="0 = original"
+                        class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                     >
                 </div>
             </div>
 
-            <div class="columns">
+            <div class="grid grid-cols-2 gap-4">
                 <div>
-                    <label for="format">
+                    <label for="format" class="block text-sm font-medium text-gray-700 mb-1">
                         Format
                     </label>
-                    <select id="format" name="format">
+                    <select
+                        id="format"
+                        name="format"
+                        class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                    >
                         <option value="orig" {{if eq .FormFormat "orig"}}selected{{end}}>Original</option>
                         <option value="jpeg" {{if eq .FormFormat "jpeg"}}selected{{end}}>JPEG</option>
                         <option value="png" {{if eq .FormFormat "png"}}selected{{end}}>PNG</option>
@@ -103,10 +115,14 @@
                     </select>
                 </div>
                 <div>
-                    <label for="quality">
+                    <label for="quality" class="block text-sm font-medium text-gray-700 mb-1">
                         Quality
                     </label>
-                    <select id="quality" name="quality">
+                    <select
+                        id="quality"
+                        name="quality"
+                        class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                    >
                         <option value="25" {{if eq .FormQuality "25"}}selected{{end}}>Potato</option>
                         <option value="50" {{if eq .FormQuality "50"}}selected{{end}}>Low</option>
                         <option value="70" {{if eq .FormQuality "70"}}selected{{end}}>Medium</option>
@@ -116,12 +132,16 @@
                 </div>
             </div>
 
-            <div class="columns">
+            <div class="grid grid-cols-2 gap-4">
                 <div>
-                    <label for="fit">
+                    <label for="fit" class="block text-sm font-medium text-gray-700 mb-1">
                         Fit Mode
                     </label>
-                    <select id="fit" name="fit">
+                    <select
+                        id="fit"
+                        name="fit"
+                        class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                    >
                         <option value="cover" {{if eq .FormFit "cover"}}selected{{end}}>Cover</option>
                         <option value="contain" {{if eq .FormFit "contain"}}selected{{end}}>Contain</option>
                         <option value="fill" {{if eq .FormFit "fill"}}selected{{end}}>Fill</option>
@@ -130,10 +150,14 @@
                     </select>
                 </div>
                 <div>
-                    <label for="ttl">
+                    <label for="ttl" class="block text-sm font-medium text-gray-700 mb-1">
                         Expires In
                     </label>
-                    <select id="ttl" name="ttl">
+                    <select
+                        id="ttl"
+                        name="ttl"
+                        class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                    >
                         <option value="0" {{if or (eq .FormTTL "0") (eq .FormTTL "")}}selected{{end}}>Never</option>
                         <option value="60" {{if eq .FormTTL "60"}}selected{{end}}>1 minute</option>
                         <option value="3600" {{if eq .FormTTL "3600"}}selected{{end}}>1 hour</option>
@@ -145,15 +169,17 @@
                 </div>
             </div>
 
-            <button type="submit">
+            <button
+                type="submit"
+                class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
+            >
                 Generate Encrypted URL
             </button>
         </form>
 
-        <p class="note">
+        <p class="text-xs text-gray-500 mt-4 text-center">
             Generated URLs are encrypted and cannot be modified. They will expire at the specified time.
         </p>
     </div>
-    <script src="/static/generator.js"></script>
 </body>
 </html>

internal/templates/login.html

@@ -4,22 +4,22 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Pixa - Login</title>
-    <link rel="stylesheet" href="/static/style.css">
+    <script src="/static/tailwind.js"></script>
 </head>
-<body class="login">
-    <div class="card">
-        <h1>Pixa Image Proxy</h1>
+<body class="bg-gray-100 min-h-screen flex items-center justify-center">
+    <div class="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
+        <h1 class="text-2xl font-bold text-gray-800 mb-6 text-center">Pixa Image Proxy</h1>
 
         {{if .Error}}
-        <div class="error">
+        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
             {{.Error}}
         </div>
         {{end}}
 
-        <form method="POST" action="/">
+        <form method="POST" action="/" class="space-y-4">
             {{ .CSRFField }}
             <div>
-                <label for="key">
+                <label for="key" class="block text-sm font-medium text-gray-700 mb-1">
                     Signing Key
                 </label>
                 <input
@@ -28,11 +28,15 @@
                     name="key"
                     required
                     autocomplete="current-password"
+                    class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                     placeholder="Enter your signing key"
                 >
             </div>
 
-            <button type="submit">
+            <button
+                type="submit"
+                class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
+            >
                 Login
             </button>
         </form>