feat: add basics

.dev.vars.example

···
+INDIKO_CLIENT_ID=your_client_id
+INDIKO_CLIENT_SECRET=your_client_secret

.gitignore

···
+node_modules/
+dist/
+.wrangler/
+.dev.vars
+.env
+*.log
+bun.lock

CRUSH.md

···
+# L4 Development Memory
+
+## Commands
+
+### Development
+```bash
+bun run dev          # Start local development server
+bun run deploy       # Deploy to Cloudflare
+bun run types        # Generate TypeScript types
+```
+
+### Wrangler
+```bash
+wrangler r2 bucket create l4-images               # Create R2 bucket
+wrangler kv:namespace create L4                   # Create KV namespace
+wrangler secret put INDIKO_CLIENT_ID              # Set secret
+wrangler secret put INDIKO_CLIENT_SECRET          # Set secret
+```
+
+### CLI
+```bash
+cd cli && bun install && bun run build           # Build CLI
+l4 config --api-key <key> --url <url>            # Configure CLI
+l4 upload <file>                                  # Upload image
+l4 list                                           # List images
+```
+
+## Project Structure
+
+- `/src/index.ts` - Main Worker entry point with auth, image serving, API key management
+- `/src/index.html` - Frontend application with upload UI, image grid, API key management
+- `/src/login.html` - Login page with Indiko OAuth
+- `/cli/` - CLI tool for uploading/managing images
+- `/wrangler.toml` - Cloudflare Workers configuration
+
+## Key Features
+
+- **Indiko OAuth**: Session-based auth with admin/viewer roles
+- **API Keys**: Generate keys for CLI/programmatic access
+- **Image Transformations**: On-demand resize, format conversion (AVIF/WebP), quality adjustment
+- **R2 Storage**: Zero egress costs, S3-compatible
+- **Edge Caching**: Two-tier cache (Cloudflare edge + browser)
+- **Role-based Access**: Viewers can view, admins can upload/delete
+
+## Image URL Pattern
+
+```
+/i/:key?w=800&h=600&f=webp&q=85&fit=scale-down
+```
+
+Parameters:
+- `w` - width
+- `h` - height  
+- `f` - format (auto, webp, avif, jpeg)
+- `q` - quality (1-100)
+- `fit` - fit mode (scale-down, contain, cover, crop, pad)
+
+## Environment Variables
+
+Production (secrets):
+- `INDIKO_CLIENT_ID` - Indiko OAuth client ID
+- `INDIKO_CLIENT_SECRET` - Indiko OAuth client secret
+
+Config (wrangler.toml):
+- `HOST` - Public URL of the service
+- `INDIKO_URL` - Indiko instance URL
+
+## Bindings
+
+- `L4` - KV namespace for sessions, API keys, image metadata
+- `IMAGES` - R2 bucket for image storage

LICENSE.md

···
+# The O'Saasy License
+
+Copyright © `2025` `Kieran Klukas`
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+No licensee or downstream recipient may use the Software (including any modified or derivative versions) to directly compete with the original Licensor by offering it to third parties as a hosted, managed, or Software-as-a-Service (SaaS) product or cloud service where the primary value of the service is the functionality of the Software itself.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

···
+# The L4 cache
+
+This is my own image cdn built on cloudflare r2 mainly so I can have fast optimized images on my blog.
+
+## Docs
+
+```bash
+bun install
+wrangler r2 bucket create l4-images
+wrangler kv namespace create L4
+```
+
+Update `wrangler.toml` with the KV namespace ID and set `HOST` to your domain as well as `INDIKO_URL` to your Indiko instance
+
+### Production
+
+```bash
+wrangler secret put INDIKO_CLIENT_ID
+wrangler secret put INDIKO_CLIENT_SECRET
+```
+
+```bash
+bun run deploy
+```
+
+## Development
+
+```bash
+bun run dev
+```
+
+Create `.dev.vars` for local development:
+
+```env
+INDIKO_CLIENT_ID=your_client_id
+INDIKO_CLIENT_SECRET=your_client_secret
+```
+
+## CLI Usage
+
+### Install CLI
+
+```bash
+cd cli
+bun install
+bun run build
+npm link
+```
+
+### Configure
+
+```bash
+l4 config --api-key <your-api-key> --url https://l4.yourdomain.com
+```
+
+### Upload Image
+
+```bash
+l4 upload image.jpg
+l4 upload image.jpg --key custom-name.jpg
+```
+
+### List Images
+
+```bash
+l4 list
+l4 list --limit 50
+```
+
+### Delete Image
+
+```bash
+l4 delete image-key.jpg
+```
+
+### Get Image URL
+
+```bash
+l4 url image.jpg
+l4 url image.jpg --width 800 --format webp --quality 85
+```
+
+## Image Transformations
+
+Images are served via `/i/:key` with optional query parameters:
+
+- `w` - Width (pixels)
+- `h` - Height (pixels)
+- `f` - Format (`auto`, `webp`, `avif`, `jpeg`)
+- `q` - Quality (1-100, default 85)
+- `fit` - Fit mode (`scale-down`, `contain`, `cover`, `crop`, `pad`)
+
+### Examples
+
+```
+/i/photo.jpg?w=800&f=webp
+/i/photo.jpg?w=400&h=400&fit=cover&q=90
+/i/photo.jpg?f=auto
+```
+
+## API Endpoints
+
+### Authentication
+
+- `GET /login` - Login page
+- `GET /api/login` - Initiate OAuth
+- `GET /api/callback` - OAuth callback
+- `POST /api/logout` - Logout
+- `GET /api/me` - Get current user
+
+### Images
+
+- `POST /api/upload` - Upload image (multipart/form-data)
+- `GET /api/images` - List images
+- `DELETE /api/images/:key` - Delete image
+- `GET /i/:key` - Serve image (public)
+
+### API Keys
+
+- `GET /api/keys` - List API keys
+- `POST /api/keys` - Create API key
+- `DELETE /api/keys/:id` - Delete API key
+
+## Architecture
+
+```
+┌─────────────┐
+│   Browser   │
+└──────┬──────┘
+       │
+       ├─── HTML/JS (Indiko OAuth)
+       │
+       ├─── Upload/Manage Images
+       │
+       v
+┌─────────────────┐
+│ Cloudflare      │
+│ Workers         │
+│                 │
+│ - Auth          │
+│ - Transform     │
+│ - Cache         │
+└────────┬────────┘
+         │
+         ├─── Session/Metadata
+         v
+    ┌────────┐
+    │   KV   │
+    └────────┘
+         │
+         ├─── Original Images
+         v
+    ┌────────┐
+    │   R2   │
+    └────────┘
+```
+
+<p align="center">
+    <img src="https://raw.githubusercontent.com/taciturnaxolotl/carriage/main/.github/images/line-break.svg" />
+</p>
+
+<p align="center">
+    <i><code>&copy 2025-present <a href="https://dunkirk.sh">Kieran Klukas</a></code></i>
+</p>
+
+<p align="center">
+    <a href="https://tangled.org/dunkirk.sh/l4/blob/main/LICENSE.md"><img src="https://img.shields.io/static/v1.svg?style=for-the-badge&label=License&message=O'Saasy&logoColor=d9e0ee&colorA=363a4f&colorB=b7bdf8"/></a>
+</p>

cli/package.json

···
+{
+  "name": "@l4/cli",
+  "version": "1.0.0",
+  "type": "module",
+  "bin": {
+    "l4": "./dist/index.js"
+  },
+  "scripts": {
+    "build": "bun build ./src/index.ts --outdir ./dist --target node --format esm",
+    "dev": "bun run src/index.ts"
+  },
+  "devDependencies": {
+    "@types/bun": "latest"
+  },
+  "dependencies": {
+    "commander": "^12.1.0",
+    "chalk": "^5.4.1",
+    "ora": "^8.1.1"
+  }
+}

cli/src/index.ts

···
+#!/usr/bin/env node
+import { Command } from "commander";
+import chalk from "chalk";
+import ora from "ora";
+import { readFile, writeFile } from "fs/promises";
+import { existsSync } from "fs";
+import { homedir } from "os";
+import { join } from "path";
+
+const CONFIG_DIR = join(homedir(), ".config", "l4");
+const CONFIG_FILE = join(CONFIG_DIR, "config.json");
+
+interface Config {
+	apiKey?: string;
+	baseUrl?: string;
+}
+
+async function loadConfig(): Promise<Config> {
+	if (!existsSync(CONFIG_FILE)) {
+		return {};
+	}
+	const data = await readFile(CONFIG_FILE, "utf-8");
+	return JSON.parse(data);
+}
+
+async function saveConfig(config: Config): Promise<void> {
+	const { mkdir } = await import("fs/promises");
+	await mkdir(CONFIG_DIR, { recursive: true });
+	await writeFile(CONFIG_FILE, JSON.stringify(config, null, 2));
+}
+
+async function getConfig(): Promise<Config> {
+	const config = await loadConfig();
+	if (!config.apiKey || !config.baseUrl) {
+		console.error(
+			chalk.red("Error: Not configured. Run 'l4 config' first."),
+		);
+		process.exit(1);
+	}
+	return config;
+}
+
+const program = new Command();
+
+program
+	.name("l4")
+	.description("CLI for L4 image cache")
+	.version("1.0.0");
+
+program
+	.command("config")
+	.description("Configure L4 CLI")
+	.option("-k, --api-key <key>", "API key")
+	.option("-u, --url <url>", "Base URL")
+	.action(async (options) => {
+		const config = await loadConfig();
+
+		if (options.apiKey) {
+			config.apiKey = options.apiKey;
+		}
+
+		if (options.url) {
+			config.baseUrl = options.url;
+		}
+
+		if (!options.apiKey && !options.url) {
+			console.log(chalk.blue("Current configuration:"));
+			console.log(
+				`API Key: ${config.apiKey ? chalk.green("Set") : chalk.red("Not set")}`,
+			);
+			console.log(
+				`Base URL: ${config.baseUrl ? chalk.green(config.baseUrl) : chalk.red("Not set")}`,
+			);
+			console.log(
+				`\nRun ${chalk.cyan("l4 config --api-key <key> --url <url>")} to configure.`,
+			);
+			return;
+		}
+
+		await saveConfig(config);
+		console.log(chalk.green("✓ Configuration saved"));
+	});
+
+program
+	.command("upload <file>")
+	.description("Upload an image")
+	.option("-k, --key <key>", "Custom key for the image")
+	.action(async (filePath: string, options) => {
+		const config = await getConfig();
+		const spinner = ora("Uploading image...").start();
+
+		try {
+			const fileData = await readFile(filePath);
+			const fileName = filePath.split("/").pop() || "image";
+
+			const formData = new FormData();
+			const blob = new Blob([fileData]);
+			formData.append("file", blob, fileName);
+
+			if (options.key) {
+				formData.append("key", options.key);
+			}
+
+			const response = await fetch(`${config.baseUrl}/api/upload`, {
+				method: "POST",
+				headers: {
+					Authorization: `Bearer ${config.apiKey}`,
+				},
+				body: formData,
+			});
+
+			if (!response.ok) {
+				const error = await response.json();
+				throw new Error(error.error || "Upload failed");
+			}
+
+			const result = await response.json();
+			spinner.succeed("Image uploaded successfully");
+
+			console.log(chalk.blue("\nImage URL:"));
+			console.log(chalk.cyan(result.url));
+			console.log(chalk.gray(`Key: ${result.key}`));
+		} catch (error: any) {
+			spinner.fail("Upload failed");
+			console.error(chalk.red(error.message));
+			process.exit(1);
+		}
+	});
+
+program
+	.command("list")
+	.description("List all images")
+	.option("-l, --limit <number>", "Number of images to list", "100")
+	.action(async (options) => {
+		const config = await getConfig();
+		const spinner = ora("Fetching images...").start();
+
+		try {
+			const response = await fetch(
+				`${config.baseUrl}/api/images?limit=${options.limit}`,
+				{
+					headers: {
+						Authorization: `Bearer ${config.apiKey}`,
+					},
+				},
+			);
+
+			if (!response.ok) {
+				throw new Error("Failed to fetch images");
+			}
+
+			const data = await response.json();
+			spinner.succeed(`Found ${data.images.length} images`);
+
+			if (data.images.length === 0) {
+				console.log(chalk.gray("No images found"));
+				return;
+			}
+
+			console.log();
+			for (const image of data.images) {
+				console.log(chalk.cyan(image.key));
+				console.log(chalk.gray(`  ${image.originalName}`));
+				console.log(
+					chalk.gray(
+						`  ${(image.size / 1024).toFixed(2)} KB • ${new Date(image.uploadedAt).toLocaleDateString()}`,
+					),
+				);
+				console.log(chalk.blue(`  ${config.baseUrl}/i/${image.key}`));
+				console.log();
+			}
+
+			if (data.hasMore) {
+				console.log(chalk.yellow("More images available (use --limit to see more)"));
+			}
+		} catch (error: any) {
+			spinner.fail("Failed to fetch images");
+			console.error(chalk.red(error.message));
+			process.exit(1);
+		}
+	});
+
+program
+	.command("delete <key>")
+	.description("Delete an image")
+	.action(async (key: string) => {
+		const config = await getConfig();
+		const spinner = ora("Deleting image...").start();
+
+		try {
+			const response = await fetch(`${config.baseUrl}/api/images/${key}`, {
+				method: "DELETE",
+				headers: {
+					Authorization: `Bearer ${config.apiKey}`,
+				},
+			});
+
+			if (!response.ok) {
+				throw new Error("Failed to delete image");
+			}
+
+			spinner.succeed("Image deleted successfully");
+		} catch (error: any) {
+			spinner.fail("Delete failed");
+			console.error(chalk.red(error.message));
+			process.exit(1);
+		}
+	});
+
+program
+	.command("url <key>")
+	.description("Get URL for an image")
+	.option("-w, --width <width>", "Image width")
+	.option("-h, --height <height>", "Image height")
+	.option("-f, --format <format>", "Image format (auto, webp, avif, jpeg)")
+	.option("-q, --quality <quality>", "Image quality (1-100)")
+	.action(async (key: string, options) => {
+		const config = await getConfig();
+		const url = new URL(`/i/${key}`, config.baseUrl);
+
+		if (options.width) url.searchParams.set("w", options.width);
+		if (options.height) url.searchParams.set("h", options.height);
+		if (options.format) url.searchParams.set("f", options.format);
+		if (options.quality) url.searchParams.set("q", options.quality);
+
+		console.log(chalk.cyan(url.toString()));
+	});
+
+program.parse();

l4 cache.svg

···
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="512" height="512" fill="#694873"/>
+<path d="M244.878 329.25H254.328V387H95.0783V377.9L114.328 375.8C118.062 375.333 120.278 374.4 120.978 373C121.678 371.6 122.028 366.817 122.028 358.65V177.35C122.028 169.183 121.678 164.4 120.978 163C120.278 161.6 118.062 160.667 114.328 160.2L95.0783 158.45V149H179.428V158.45L160.178 160.2C156.445 160.667 154.228 161.6 153.528 163C152.828 164.4 152.478 169.183 152.478 177.35V375.8H215.828C221.428 375.8 225.395 375.683 227.728 375.45C230.062 374.983 231.578 374.167 232.278 373C233.212 371.6 234.028 369.5 234.728 366.7L244.878 329.25ZM365.155 358.65V325.4H264.005V314.2C275.905 301.6 286.172 289.35 294.805 277.45C303.439 265.317 310.905 252.833 317.205 240C323.505 227.167 328.989 213.4 333.655 198.7C338.555 183.767 342.989 167.2 346.955 149H384.055C374.722 181.9 361.072 211.417 343.105 237.55C325.139 263.683 303.672 289.233 278.705 314.2H365.155V259.25L395.605 254.35V314.2H422.555V325.4H395.605V358.65C395.605 366.817 395.955 371.6 396.655 373C397.355 374.4 399.572 375.333 403.305 375.8L422.555 377.9V387H331.205V377.9L357.455 375.8C361.189 375.567 363.405 374.75 364.105 373.35C364.805 371.717 365.155 366.817 365.155 358.65Z" fill="#85B79D"/>
+</svg>

package.json

···
+{
+  "name": "l4",
+  "module": "index.ts",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "wrangler dev",
+    "deploy": "wrangler deploy",
+    "types": "wrangler types"
+  },
+  "devDependencies": {
+    "@cloudflare/workers-types": "^4.20251211.0",
+    "@types/bun": "latest",
+    "wrangler": "^4.54.0"
+  },
+  "peerDependencies": {
+    "typescript": "^5"
+  },
+  "dependencies": {
+    "nanoid": "^5.1.6"
+  }
+}

src/index.html

···
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>l4 - image cache</title>
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚡</text></svg>">
+    <style>
+        :root {
+            --evergreen: #16302b;
+            --vintage-grape: #694873;
+            --dusty-mauve: #8b728e;
+            --muted-teal: #85b79d;
+            --tea-green: #c0e5c8;
+            --evergreen-dark: #0d1f1b;
+            --input-bg: #1a3530;
+            --border-color: #2a4540;
+            --hover-bg: #243d38;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        html {
+            background: var(--evergreen);
+        }
+
+        body {
+            font-family: "Courier New", monospace;
+            background: var(--evergreen);
+            color: var(--tea-green);
+            min-height: 100vh;
+            padding: 2.5rem 1.25rem;
+            display: flex;
+            flex-direction: column;
+        }
+
+        main {
+            max-width: 56.25rem;
+            margin: 0 auto;
+            flex: 1;
+            width: 100%;
+        }
+
+        header {
+            margin-bottom: 1.5rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        h1 {
+            font-size: 2.5rem;
+            font-weight: 700;
+            background: linear-gradient(135deg, var(--muted-teal), var(--tea-green));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            letter-spacing: -0.0625rem;
+        }
+
+        .user-info {
+            display: flex;
+            gap: 0.75rem;
+            align-items: center;
+            color: var(--muted-teal);
+            font-size: 0.875rem;
+        }
+
+        .shortcut {
+            color: var(--muted-teal);
+            font-size: 0.6875rem;
+            margin-bottom: 1rem;
+        }
+
+        .shortcut kbd {
+            background: var(--input-bg);
+            padding: 0.125rem 0.375rem;
+            border: 0.0625rem solid var(--border-color);
+            font-size: 0.6875rem;
+            font-family: monospace;
+        }
+
+        .tabs {
+            display: flex;
+            gap: 0.5rem;
+            margin-bottom: 1.5rem;
+            border-bottom: 0.0625rem solid var(--border-color);
+        }
+
+        .tab {
+            padding: 0.5rem 1rem;
+            background: transparent;
+            border: none;
+            color: var(--muted-teal);
+            cursor: pointer;
+            font-family: "Courier New", monospace;
+            font-size: 0.875rem;
+            border-bottom: 0.125rem solid transparent;
+            margin-bottom: -0.0625rem;
+            transition: all 0.15s;
+        }
+
+        .tab:hover {
+            color: var(--tea-green);
+        }
+
+        .tab:focus {
+            outline: 0.0625rem solid var(--tea-green);
+            outline-offset: 0;
+        }
+
+        .tab.active {
+            color: var(--tea-green);
+            border-bottom-color: var(--tea-green);
+        }
+
+        .tab-content {
+            display: none;
+        }
+
+        .tab-content.active {
+            display: block;
+        }
+
+        .upload-section {
+            background: var(--input-bg);
+            border: 0.125rem dashed var(--border-color);
+            padding: 2rem;
+            margin-bottom: 1.5rem;
+            text-align: center;
+            transition: border-color 0.15s;
+        }
+
+        .upload-section:hover,
+        .upload-section.dragover {
+            border-color: var(--muted-teal);
+        }
+
+        .upload-section h2 {
+            font-size: 1.125rem;
+            margin-bottom: 0.5rem;
+            font-weight: 700;
+        }
+
+        .upload-section p {
+            color: var(--muted-teal);
+            font-size: 0.8125rem;
+            margin-bottom: 1rem;
+        }
+
+        input[type="file"] {
+            display: none;
+        }
+
+        .file-label {
+            display: inline-block;
+            padding: 0.75rem 1.5rem;
+            background: var(--vintage-grape);
+            color: var(--tea-green);
+            cursor: pointer;
+            font-family: "Courier New", monospace;
+            font-size: 0.875rem;
+            font-weight: 700;
+            transition: background 0.15s;
+        }
+
+        .file-label:hover {
+            background: var(--dusty-mauve);
+        }
+
+        button {
+            padding: 0.5rem 1rem;
+            background: var(--vintage-grape);
+            color: var(--tea-green);
+            border: none;
+            font-size: 0.875rem;
+            font-weight: 700;
+            cursor: pointer;
+            font-family: "Courier New", monospace;
+            transition: background 0.15s;
+        }
+
+        button:hover {
+            background: var(--dusty-mauve);
+        }
+
+        button:focus {
+            outline: 0.0625rem solid var(--tea-green);
+            outline-offset: 0;
+        }
+
+        button.danger {
+            background: #8b2828;
+            color: #ffb3b3;
+        }
+
+        button.danger:hover {
+            background: #a03030;
+        }
+
+        .status-bar {
+            background: var(--vintage-grape);
+            color: var(--tea-green);
+            padding: 0.75rem;
+            margin-bottom: 1rem;
+            font-size: 0.875rem;
+            display: none;
+        }
+
+        .status-bar.show {
+            display: block;
+        }
+
+        .images-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+            gap: 1rem;
+        }
+
+        .image-card {
+            background: var(--input-bg);
+            border: 0.0625rem solid var(--border-color);
+            overflow: hidden;
+            transition: border-color 0.15s;
+        }
+
+        .image-card:hover {
+            border-color: var(--muted-teal);
+        }
+
+        .image-card:focus-within {
+            border-color: var(--tea-green);
+        }
+
+        .image-preview {
+            width: 100%;
+            height: 180px;
+            object-fit: cover;
+            background: var(--evergreen-dark);
+            display: block;
+        }
+
+        .image-info {
+            padding: 0.75rem;
+        }
+
+        .image-url {
+            font-size: 0.75rem;
+            color: var(--muted-teal);
+            word-break: break-all;
+            margin-bottom: 0.5rem;
+        }
+
+        .image-actions {
+            display: flex;
+            gap: 0.5rem;
+        }
+
+        .image-actions button {
+            flex: 1;
+            padding: 0.5rem;
+            font-size: 0.75rem;
+        }
+
+        .api-keys-list {
+            background: var(--input-bg);
+            border: 0.0625rem solid var(--border-color);
+        }
+
+        .api-key-item {
+            padding: 1rem;
+            border-bottom: 0.0625rem solid var(--border-color);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            transition: background 0.15s;
+        }
+
+        .api-key-item:hover {
+            background: var(--hover-bg);
+        }
+
+        .api-key-item:last-child {
+            border-bottom: none;
+        }
+
+        .api-key-item:focus-within {
+            border-left: 0.125rem solid var(--tea-green);
+            padding-left: calc(1rem - 0.0625rem);
+        }
+
+        .api-key-info h3 {
+            font-size: 0.9375rem;
+            margin-bottom: 0.25rem;
+            font-weight: 700;
+        }
+
+        .api-key-meta {
+            font-size: 0.75rem;
+            color: var(--muted-teal);
+        }
+
+        .modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(13, 31, 27, 0.9);
+            align-items: center;
+            justify-content: center;
+            z-index: 1000;
+        }
+
+        .modal.active {
+            display: flex;
+        }
+
+        .modal-content {
+            background: var(--evergreen);
+            border: 0.0625rem solid var(--border-color);
+            padding: 2rem;
+            max-width: 500px;
+            width: 90%;
+        }
+
+        .modal-content h2 {
+            margin-bottom: 1.5rem;
+            font-size: 1.5rem;
+            font-weight: 700;
+        }
+
+        .form-group {
+            margin-bottom: 1rem;
+        }
+
+        .form-group label {
+            display: block;
+            margin-bottom: 0.5rem;
+            color: var(--muted-teal);
+            font-size: 0.875rem;
+        }
+
+        .form-group input {
+            width: 100%;
+            padding: 0.75rem;
+            background: var(--input-bg);
+            border: 0.0625rem solid var(--border-color);
+            color: var(--tea-green);
+            font-size: 0.875rem;
+            font-family: "Courier New", monospace;
+            transition: border-color 0.15s;
+        }
+
+        .form-group input:focus {
+            outline: none;
+            border-color: var(--tea-green);
+        }
+
+        .form-actions {
+            display: flex;
+            gap: 0.5rem;
+            margin-top: 1.5rem;
+        }
+
+        .form-actions button {
+            flex: 1;
+        }
+
+        .loading {
+            text-align: center;
+            padding: 2rem;
+            color: var(--muted-teal);
+            font-size: 0.875rem;
+        }
+
+        footer {
+            margin-top: 2rem;
+            padding-top: 1rem;
+            border-top: 0.0625rem solid var(--border-color);
+            text-align: center;
+            color: var(--muted-teal);
+            font-size: 0.75rem;
+        }
+    </style>
+</head>
+<body>
+    <main>
+        <header>
+            <div>
+                <h1>l4</h1>
+            </div>
+            <div class="user-info">
+                <span id="userName"></span>
+                <button onclick="logout()">logout</button>
+            </div>
+        </header>
+
+        <div class="shortcut">
+            keyboard shortcuts: <kbd>1</kbd> images <kbd>2</kbd> api keys <kbd>u</kbd> upload <kbd>esc</kbd> close modal
+        </div>
+
+        <div class="status-bar" id="statusBar"></div>
+
+        <div class="tabs">
+            <button class="tab active" onclick="switchTab('images')" data-key="1">images</button>
+            <button class="tab" onclick="switchTab('api-keys')" data-key="2">api keys</button>
+        </div>
+
+        <div id="images-tab" class="tab-content active">
+            <div class="upload-section" id="uploadSection">
+                <h2>upload image</h2>
+                <p>drag and drop or click to upload</p>
+                <input type="file" id="fileInput" accept="image/*">
+                <label for="fileInput" class="file-label">choose file</label>
+            </div>
+
+            <div class="images-grid" id="imagesGrid"></div>
+        </div>
+
+        <div id="api-keys-tab" class="tab-content">
+            <div style="margin-bottom: 1rem;">
+                <button onclick="showCreateKeyModal()">create api key</button>
+            </div>
+            <div class="api-keys-list" id="apiKeysList"></div>
+        </div>
+    </main>
+
+    <footer>
+        powered by cloudflare r2 • zero egress costs
+    </footer>
+
+    <div class="modal" id="createKeyModal">
+        <div class="modal-content">
+            <h2>create api key</h2>
+            <div class="form-group">
+                <label>key name</label>
+                <input type="text" id="keyName" placeholder="my cli key" autofocus>
+            </div>
+            <div class="form-group">
+                <label>expires in (days)</label>
+                <input type="number" id="keyExpiry" placeholder="30">
+            </div>
+            <div class="form-actions">
+                <button onclick="closeModal()">cancel</button>
+                <button onclick="createApiKey()">create</button>
+            </div>
+        </div>
+    </div>
+
+    <div class="modal" id="keyCreatedModal">
+        <div class="modal-content">
+            <h2>api key created</h2>
+            <p style="margin-bottom: 1rem; color: var(--muted-teal);">save this key - you won't see it again</p>
+            <div class="form-group">
+                <input type="text" id="newApiKey" readonly>
+            </div>
+            <div class="form-actions">
+                <button onclick="copyApiKey()">copy</button>
+                <button onclick="closeKeyCreatedModal()">done</button>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        let token = null;
+        let userRole = null;
+
+        // Keyboard shortcuts
+        document.addEventListener('keydown', (e) => {
+            // Don't trigger if typing in input
+            if (e.target.tagName === 'INPUT') return;
+
+            // Tab switching
+            if (e.key === '1') {
+                e.preventDefault();
+                switchTab('images');
+                document.querySelector('.tab[data-key="1"]').focus();
+            }
+            if (e.key === '2' && userRole === 'admin') {
+                e.preventDefault();
+                switchTab('api-keys');
+                document.querySelector('.tab[data-key="2"]').focus();
+            }
+
+            // Upload shortcut (admin only)
+            if ((e.key === 'u' || e.key === 'U') && userRole === 'admin') {
+                e.preventDefault();
+                document.getElementById('fileInput').click();
+            }
+
+            // Close modal
+            if (e.key === 'Escape') {
+                closeModal();
+                closeKeyCreatedModal();
+            }
+
+            // Create key (admin only)
+            if (e.key === 'c' && userRole === 'admin' && document.getElementById('api-keys-tab').classList.contains('active')) {
+                e.preventDefault();
+                showCreateKeyModal();
+            }
+        });
+
+        function showStatus(message, duration = 3000) {
+            const bar = document.getElementById('statusBar');
+            bar.textContent = message;
+            bar.classList.add('show');
+            setTimeout(() => bar.classList.remove('show'), duration);
+        }
+
+        async function init() {
+            const params = new URLSearchParams(window.location.search);
+            token = params.get('token') || localStorage.getItem('l4_token');
+
+            if (!token) {
+                window.location.href = '/login';
+                return;
+            }
+
+            localStorage.setItem('l4_token', token);
+            window.history.replaceState({}, '', '/');
+
+            try {
+                const response = await fetch('/api/me', {
+                    headers: { 'Authorization': `Bearer ${token}` }
+                });
+
+                if (!response.ok) {
+                    throw new Error('Unauthorized');
+                }
+
+                const user = await response.json();
+                userRole = user.role;
+                document.getElementById('userName').textContent = user.profile?.name || 'user';
+
+                // Hide admin-only elements for viewers
+                if (userRole === 'viewer') {
+                    document.getElementById('uploadSection').style.display = 'none';
+                    document.querySelector('.tab[data-key="2"]').style.display = 'none';
+                    document.querySelector('.shortcut').style.display = 'none';
+                }
+
+                await loadImages();
+                if (userRole === 'admin') {
+                    await loadApiKeys();
+                }
+            } catch (error) {
+                localStorage.removeItem('l4_token');
+                window.location.href = '/login';
+            }
+        }
+
+        function switchTab(tab) {
+            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+            document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
+            
+            const activeTab = document.querySelector(`.tab[onclick*="${tab}"]`);
+            if (activeTab) activeTab.classList.add('active');
+            
+            const content = document.getElementById(`${tab}-tab`);
+            if (content) content.classList.add('active');
+
+            if (tab === 'api-keys') {
+                loadApiKeys();
+            }
+        }
+
+        const uploadSection = document.getElementById('uploadSection');
+        const fileInput = document.getElementById('fileInput');
+
+        uploadSection.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            uploadSection.classList.add('dragover');
+        });
+
+        uploadSection.addEventListener('dragleave', () => {
+            uploadSection.classList.remove('dragover');
+        });
+
+        uploadSection.addEventListener('drop', async (e) => {
+            e.preventDefault();
+            uploadSection.classList.remove('dragover');
+            
+            const files = e.dataTransfer.files;
+            if (files.length > 0) {
+                await uploadFile(files[0]);
+            }
+        });
+
+        fileInput.addEventListener('change', async (e) => {
+            if (e.target.files.length > 0) {
+                await uploadFile(e.target.files[0]);
+            }
+        });
+
+        async function uploadFile(file) {
+            const formData = new FormData();
+            formData.append('file', file);
+
+            try {
+                const response = await fetch('/api/upload', {
+                    method: 'POST',
+                    headers: { 'Authorization': `Bearer ${token}` },
+                    body: formData
+                });
+
+                if (!response.ok) {
+                    throw new Error('upload failed');
+                }
+
+                showStatus('image uploaded');
+                await loadImages();
+                fileInput.value = '';
+            } catch (error) {
+                showStatus('upload failed');
+            }
+        }
+
+        async function loadImages() {
+            const grid = document.getElementById('imagesGrid');
+            grid.innerHTML = '<div class="loading">loading...</div>';
+
+            try {
+                const response = await fetch('/api/images', {
+                    headers: { 'Authorization': `Bearer ${token}` }
+                });
+
+                if (!response.ok) {
+                    throw new Error('failed to load images');
+                }
+
+                const data = await response.json();
+                
+                if (data.images.length === 0) {
+                    grid.innerHTML = '<div class="loading">no images</div>';
+                    return;
+                }
+
+                grid.innerHTML = data.images.map(img => `
+                    <div class="image-card" tabindex="0">
+                        <img src="/i/${img.key}?w=400&f=webp" alt="${img.originalName}" class="image-preview">
+                        <div class="image-info">
+                            <div class="image-url">/i/${img.key}</div>
+                            <div class="image-actions">
+                                <button onclick="copyUrl('/i/${img.key}')">copy</button>
+                                ${userRole === 'admin' ? `<button class="danger" onclick="deleteImage('${img.key}')">delete</button>` : ''}
+                            </div>
+                        </div>
+                    </div>
+                `).join('');
+            } catch (error) {
+                grid.innerHTML = '<div class="loading">failed to load</div>';
+            }
+        }
+
+        function copyUrl(path) {
+            const url = window.location.origin + path;
+            navigator.clipboard.writeText(url);
+            showStatus('copied');
+        }
+
+        async function deleteImage(key) {
+            if (!confirm('delete this image?')) return;
+
+            try {
+                const response = await fetch(`/api/images/${key}`, {
+                    method: 'DELETE',
+                    headers: { 'Authorization': `Bearer ${token}` }
+                });
+
+                if (response.ok) {
+                    showStatus('deleted');
+                    await loadImages();
+                }
+            } catch (error) {
+                showStatus('delete failed');
+            }
+        }
+
+        async function loadApiKeys() {
+            const list = document.getElementById('apiKeysList');
+            list.innerHTML = '<div class="loading">loading...</div>';
+
+            try {
+                const response = await fetch('/api/keys', {
+                    headers: { 'Authorization': `Bearer ${token}` }
+                });
+
+                if (!response.ok) {
+                    throw new Error('failed to load api keys');
+                }
+
+                const data = await response.json();
+
+                if (data.keys.length === 0) {
+                    list.innerHTML = '<div class="loading">no api keys</div>';
+                    return;
+                }
+
+                list.innerHTML = data.keys.map(key => {
+                    const created = new Date(key.createdAt).toLocaleDateString();
+                    const expires = key.expiresAt ? new Date(key.expiresAt).toLocaleDateString() : 'never';
+                    
+                    return `
+                        <div class="api-key-item" tabindex="0">
+                            <div class="api-key-info">
+                                <h3>${key.name}</h3>
+                                <div class="api-key-meta">
+                                    created: ${created} • expires: ${expires}
+                                </div>
+                            </div>
+                            <button class="danger" onclick="deleteApiKey('${key.id}')">delete</button>
+                        </div>
+                    `;
+                }).join('');
+            } catch (error) {
+                list.innerHTML = '<div class="loading">failed to load</div>';
+            }
+        }
+
+        function showCreateKeyModal() {
+            document.getElementById('createKeyModal').classList.add('active');
+            setTimeout(() => document.getElementById('keyName').focus(), 100);
+        }
+
+        function closeModal() {
+            document.getElementById('createKeyModal').classList.remove('active');
+            document.getElementById('keyName').value = '';
+            document.getElementById('keyExpiry').value = '';
+        }
+
+        async function createApiKey() {
+            const name = document.getElementById('keyName').value;
+            const expiresInDays = document.getElementById('keyExpiry').value;
+
+            if (!name) {
+                showStatus('enter a key name');
+                return;
+            }
+
+            try {
+                const response = await fetch('/api/keys', {
+                    method: 'POST',
+                    headers: {
+                        'Authorization': `Bearer ${token}`,
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        name,
+                        expiresInDays: expiresInDays ? parseInt(expiresInDays) : null
+                    })
+                });
+
+                if (!response.ok) {
+                    throw new Error('failed to create api key');
+                }
+
+                const data = await response.json();
+                document.getElementById('newApiKey').value = data.apiKey;
+                closeModal();
+                document.getElementById('keyCreatedModal').classList.add('active');
+                setTimeout(() => document.getElementById('newApiKey').select(), 100);
+                await loadApiKeys();
+            } catch (error) {
+                showStatus('failed to create key');
+            }
+        }
+
+        function copyApiKey() {
+            const input = document.getElementById('newApiKey');
+            input.select();
+            navigator.clipboard.writeText(input.value);
+            showStatus('copied');
+        }
+
+        function closeKeyCreatedModal() {
+            document.getElementById('keyCreatedModal').classList.remove('active');
+            document.getElementById('newApiKey').value = '';
+        }
+
+        async function deleteApiKey(id) {
+            if (!confirm('delete this api key?')) return;
+
+            try {
+                const response = await fetch(`/api/keys/${id}`, {
+                    method: 'DELETE',
+                    headers: { 'Authorization': `Bearer ${token}` }
+                });
+
+                if (response.ok) {
+                    showStatus('deleted');
+                    await loadApiKeys();
+                }
+            } catch (error) {
+                showStatus('delete failed');
+            }
+        }
+
+        function logout() {
+            fetch('/api/logout', {
+                method: 'POST',
+                headers: { 'Authorization': `Bearer ${token}` }
+            }).finally(() => {
+                localStorage.removeItem('l4_token');
+                window.location.href = '/login';
+            });
+        }
+
+        init();
+    </script>
+</body>
+</html>

src/index.ts

···
+import { nanoid } from "nanoid";
+import indexHTML from "./index.html";
+import loginHTML from "./login.html";
+
+export default {
+	async fetch(
+		request: Request,
+		env: Env,
+		ctx: ExecutionContext,
+	): Promise<Response> {
+		const url = new URL(request.url);
+
+		// Public routes
+		if (url.pathname === "/login" && request.method === "GET") {
+			return new Response(loginHTML, {
+				headers: { "Content-Type": "text/html" },
+			});
+		}
+
+		// Serve images publicly (no auth required)
+		if (url.pathname.startsWith("/i/")) {
+			return handleImageRequest(request, env, ctx);
+		}
+
+		// OAuth initiation
+		if (url.pathname === "/api/login" && request.method === "GET") {
+			const state = nanoid(32);
+			const codeVerifier = generateCodeVerifier();
+			const codeChallenge = await generateCodeChallenge(codeVerifier);
+
+			await env.L4.put(`oauth:${state}`, JSON.stringify({ codeVerifier }), {
+				expirationTtl: 600,
+			});
+
+			const redirectUri = `${env.HOST}/api/callback`;
+			const authUrl = new URL("/auth/authorize", env.INDIKO_URL);
+			authUrl.searchParams.set("response_type", "code");
+			authUrl.searchParams.set("client_id", env.INDIKO_CLIENT_ID);
+			authUrl.searchParams.set("redirect_uri", redirectUri);
+			authUrl.searchParams.set("state", state);
+			authUrl.searchParams.set("code_challenge", codeChallenge);
+			authUrl.searchParams.set("code_challenge_method", "S256");
+			authUrl.searchParams.set("scope", "profile email");
+
+			return Response.redirect(authUrl.toString(), 302);
+		}
+
+		// OAuth callback
+		if (url.pathname === "/api/callback" && request.method === "GET") {
+			const code = url.searchParams.get("code");
+			const state = url.searchParams.get("state");
+
+			if (!code || !state) {
+				return Response.redirect(`/login?error=missing_params`, 302);
+			}
+
+			const oauthData = await env.L4.get(`oauth:${state}`);
+			if (!oauthData) {
+				return Response.redirect(`/login?error=invalid_state`, 302);
+			}
+
+			const { codeVerifier } = JSON.parse(oauthData);
+			await env.L4.delete(`oauth:${state}`);
+
+			try {
+				const redirectUri = `${env.HOST}/api/callback`;
+				const tokenUrl = new URL("/auth/token", env.INDIKO_URL);
+				const tokenBody = new URLSearchParams({
+					grant_type: "authorization_code",
+					code,
+					client_id: env.INDIKO_CLIENT_ID,
+					client_secret: env.INDIKO_CLIENT_SECRET,
+					redirect_uri: redirectUri,
+					code_verifier: codeVerifier,
+				});
+
+				const tokenResponse = await fetch(tokenUrl.toString(), {
+					method: "POST",
+					headers: { "Content-Type": "application/x-www-form-urlencoded" },
+					body: tokenBody.toString(),
+				});
+
+				if (!tokenResponse.ok) {
+					return Response.redirect(`/login?error=token_exchange_failed`, 302);
+				}
+
+				const tokenData = await tokenResponse.json();
+
+				if (tokenData.role !== "admin" && tokenData.role !== "viewer") {
+					return Response.redirect(`/login?error=unauthorized_role`, 302);
+				}
+
+				const sessionToken = nanoid(32);
+				const expiresAt = Date.now() + 24 * 60 * 60 * 1000;
+
+				await env.L4.put(
+					`session:${sessionToken}`,
+					JSON.stringify({
+						expiresAt,
+						profile: tokenData.profile,
+						me: tokenData.me,
+						role: tokenData.role,
+					}),
+					{ expirationTtl: 86400 },
+				);
+
+				const redirectUrl = new URL("/", request.url);
+				redirectUrl.searchParams.set("token", sessionToken);
+				return Response.redirect(redirectUrl.toString(), 302);
+			} catch (error) {
+				return Response.redirect(`/login?error=unknown`, 302);
+			}
+		}
+
+		// Logout
+		if (url.pathname === "/api/logout" && request.method === "POST") {
+			const authHeader = request.headers.get("Authorization");
+			if (authHeader && authHeader.startsWith("Bearer ")) {
+				const token = authHeader.slice(7);
+				await env.L4.delete(`session:${token}`);
+			}
+			return new Response(JSON.stringify({ success: true }), {
+				headers: { "Content-Type": "application/json" },
+			});
+		}
+
+		// Get current user
+		if (url.pathname === "/api/me" && request.method === "GET") {
+			const authHeader = request.headers.get("Authorization");
+			if (!authHeader || !authHeader.startsWith("Bearer ")) {
+				return new Response(JSON.stringify({ error: "Unauthorized" }), {
+					status: 401,
+					headers: { "Content-Type": "application/json" },
+				});
+			}
+
+			const token = authHeader.slice(7);
+			const sessionData = await env.L4.get(`session:${token}`);
+
+			if (!sessionData) {
+				return new Response(JSON.stringify({ error: "Unauthorized" }), {
+					status: 401,
+					headers: { "Content-Type": "application/json" },
+				});
+			}
+
+			const session = JSON.parse(sessionData);
+			return new Response(
+				JSON.stringify({
+					role: session.role,
+					profile: session.profile,
+					me: session.me,
+				}),
+				{ headers: { "Content-Type": "application/json" } },
+			);
+		}
+
+		// Auth required for management routes
+		let userRole: string | null = null;
+		if (url.pathname !== "/") {
+			const authHeader = request.headers.get("Authorization");
+			if (!authHeader) {
+				return new Response(JSON.stringify({ error: "Unauthorized" }), {
+					status: 401,
+					headers: { "Content-Type": "application/json" },
+				});
+			}
+
+			if (authHeader.startsWith("Bearer ")) {
+				const token = authHeader.slice(7);
+
+				// Check if it's an API key
+				const apiKeyData = await env.L4.get(`apikey:${token}`);
+				if (apiKeyData) {
+					const apiKey = JSON.parse(apiKeyData);
+					if (apiKey.expiresAt && apiKey.expiresAt < Date.now()) {
+						await env.L4.delete(`apikey:${token}`);
+						return new Response(JSON.stringify({ error: "API key expired" }), {
+							status: 401,
+							headers: { "Content-Type": "application/json" },
+						});
+					}
+					userRole = "admin"; // API keys have admin access
+				} else {
+					// Check session token
+					const sessionData = await env.L4.get(`session:${token}`);
+					if (!sessionData) {
+						return new Response(JSON.stringify({ error: "Unauthorized" }), {
+							status: 401,
+							headers: { "Content-Type": "application/json" },
+						});
+					}
+
+					const session = JSON.parse(sessionData);
+					if (session.expiresAt < Date.now()) {
+						await env.L4.delete(`session:${token}`);
+						return new Response(JSON.stringify({ error: "Unauthorized" }), {
+							status: 401,
+							headers: { "Content-Type": "application/json" },
+						});
+					}
+					userRole = session.role;
+				}
+			} else {
+				return new Response(JSON.stringify({ error: "Unauthorized" }), {
+					status: 401,
+					headers: { "Content-Type": "application/json" },
+				});
+			}
+
+			// Block write operations for viewers
+			const isWriteOperation =
+				(url.pathname === "/api/upload" && request.method === "POST") ||
+				(url.pathname.startsWith("/api/images/") && request.method === "DELETE") ||
+				(url.pathname === "/api/keys" && request.method === "POST") ||
+				(url.pathname.startsWith("/api/keys/") && request.method === "DELETE");
+
+			if (isWriteOperation && userRole === "viewer") {
+				return new Response(
+					JSON.stringify({ error: "Forbidden: View-only access" }),
+					{ status: 403, headers: { "Content-Type": "application/json" } },
+				);
+			}
+		}
+
+		// Main app
+		if (url.pathname === "/" && request.method === "GET") {
+			return new Response(indexHTML, {
+				headers: { "Content-Type": "text/html" },
+			});
+		}
+
+		// Upload image
+		if (url.pathname === "/api/upload" && request.method === "POST") {
+			return handleImageUpload(request, env);
+		}
+
+		// List images
+		if (url.pathname === "/api/images" && request.method === "GET") {
+			return handleListImages(request, env);
+		}
+
+		// Delete image
+		if (url.pathname.startsWith("/api/images/") && request.method === "DELETE") {
+			const imageKey = url.pathname.split("/")[3];
+			return handleDeleteImage(imageKey, env);
+		}
+
+		// API key management
+		if (url.pathname === "/api/keys" && request.method === "GET") {
+			return handleListApiKeys(env);
+		}
+
+		if (url.pathname === "/api/keys" && request.method === "POST") {
+			return handleCreateApiKey(request, env);
+		}
+
+		if (url.pathname.startsWith("/api/keys/") && request.method === "DELETE") {
+			const keyId = url.pathname.split("/")[3];
+			return handleDeleteApiKey(keyId, env);
+		}
+
+		return new Response("Not found", { status: 404 });
+	},
+} satisfies ExportedHandler<Env>;
+
+async function handleImageRequest(
+	request: Request,
+	env: Env,
+	ctx: ExecutionContext,
+): Promise<Response> {
+	const url = new URL(request.url);
+	const imageKey = url.pathname.slice(3); // Remove /i/
+
+	if (!imageKey) {
+		return new Response("Not found", { status: 404 });
+	}
+
+	// Prevent infinite loops
+	if (/image-resizing/.test(request.headers.get("via") || "")) {
+		const object = await env.IMAGES.get(imageKey);
+		if (!object) {
+			return new Response("Not found", { status: 404 });
+		}
+		return new Response(object.body, {
+			headers: {
+				"Content-Type": object.httpMetadata?.contentType || "application/octet-stream",
+				"Cache-Control": "public, max-age=31536000",
+			},
+		});
+	}
+
+	// Parse transformation params
+	const width = url.searchParams.get("w");
+	const height = url.searchParams.get("h");
+	const quality = url.searchParams.get("q") || "85";
+	const format = url.searchParams.get("f") || "auto";
+	const fit = url.searchParams.get("fit") || "scale-down";
+
+	// Check cache first
+	const cacheKey = new Request(url.toString(), request);
+	const cache = caches.default;
+	let response = await cache.match(cacheKey);
+	if (response) {
+		return response;
+	}
+
+	// Fetch from R2
+	const object = await env.IMAGES.get(imageKey);
+	if (!object) {
+		return new Response("Not found", { status: 404 });
+	}
+
+	// Build image transformation options
+	const imageOptions: any = {
+		quality: parseInt(quality),
+		format,
+		fit,
+	};
+
+	if (width) imageOptions.width = parseInt(width);
+	if (height) imageOptions.height = parseInt(height);
+
+	// Determine format based on Accept header if auto
+	if (format === "auto") {
+		const accept = request.headers.get("accept") || "";
+		if (/image\/avif/.test(accept)) {
+			imageOptions.format = "avif";
+		} else if (/image\/webp/.test(accept)) {
+			imageOptions.format = "webp";
+		}
+	}
+
+	// Fetch and transform
+	const imageResponse = await fetch(request.url, {
+		cf: {
+			image: imageOptions,
+		},
+	});
+
+	// Clone response with cache headers
+	response = new Response(imageResponse.body, imageResponse);
+	response.headers.set("Cache-Control", "public, max-age=31536000, s-maxage=86400");
+	response.headers.set("Vary", "Accept");
+
+	// Cache asynchronously
+	ctx.waitUntil(cache.put(cacheKey, response.clone()));
+
+	return response;
+}
+
+async function handleImageUpload(
+	request: Request,
+	env: Env,
+): Promise<Response> {
+	try {
+		const formData = await request.formData();
+		const file = formData.get("file") as File;
+		const customKey = formData.get("key") as string | null;
+
+		if (!file) {
+			return new Response(JSON.stringify({ error: "No file provided" }), {
+				status: 400,
+				headers: { "Content-Type": "application/json" },
+			});
+		}
+
+		// Validate file type
+		const contentType = file.type;
+		const validTypes = ["image/jpeg", "image/png", "image/gif", "image/webp", "image/avif"];
+		if (!validTypes.includes(contentType)) {
+			return new Response(JSON.stringify({ error: "Invalid file type" }), {
+				status: 400,
+				headers: { "Content-Type": "application/json" },
+			});
+		}
+
+		// Generate key or use custom
+		const extension = file.name.split(".").pop() || "jpg";
+		const imageKey = customKey || `${nanoid(12)}.${extension}`;
+
+		// Upload to R2
+		await env.IMAGES.put(imageKey, file.stream(), {
+			httpMetadata: {
+				contentType,
+			},
+			customMetadata: {
+				originalName: file.name,
+				uploadedAt: new Date().toISOString(),
+			},
+		});
+
+		// Store metadata in KV
+		await env.L4.put(
+			`img:${imageKey}`,
+			JSON.stringify({
+				key: imageKey,
+				originalName: file.name,
+				contentType,
+				size: file.size,
+				uploadedAt: new Date().toISOString(),
+			}),
+		);
+
+		const imageUrl = `${new URL(request.url).origin}/i/${imageKey}`;
+
+		return new Response(
+			JSON.stringify({
+				success: true,
+				key: imageKey,
+				url: imageUrl,
+			}),
+			{ headers: { "Content-Type": "application/json" } },
+		);
+	} catch (error) {
+		return new Response(JSON.stringify({ error: "Upload failed" }), {
+			status: 500,
+			headers: { "Content-Type": "application/json" },
+		});
+	}
+}
+
+async function handleListImages(
+	request: Request,
+	env: Env,
+): Promise<Response> {
+	const url = new URL(request.url);
+	const limit = parseInt(url.searchParams.get("limit") || "100");
+	const cursor = url.searchParams.get("cursor") || undefined;
+
+	const listOptions: KVNamespaceListOptions = {
+		prefix: "img:",
+		limit: Math.min(limit, 1000),
+		cursor,
+	};
+
+	const list = await env.L4.list(listOptions);
+
+	const images = await Promise.all(
+		list.keys.map(async (key) => {
+			const data = await env.L4.get(key.name);
+			return data ? JSON.parse(data) : null;
+		}),
+	);
+
+	return new Response(
+		JSON.stringify({
+			images: images.filter(Boolean),
+			cursor: list.list_complete ? null : list.cursor,
+			hasMore: !list.list_complete,
+		}),
+		{ headers: { "Content-Type": "application/json" } },
+	);
+}
+
+async function handleDeleteImage(
+	imageKey: string,
+	env: Env,
+): Promise<Response> {
+	try {
+		// Delete from R2
+		await env.IMAGES.delete(imageKey);
+
+		// Delete metadata
+		await env.L4.delete(`img:${imageKey}`);
+
+		return new Response(JSON.stringify({ success: true }), {
+			headers: { "Content-Type": "application/json" },
+		});
+	} catch (error) {
+		return new Response(JSON.stringify({ error: "Delete failed" }), {
+			status: 500,
+			headers: { "Content-Type": "application/json" },
+		});
+	}
+}
+
+async function handleListApiKeys(env: Env): Promise<Response> {
+	const list = await env.L4.list({ prefix: "apikey:" });
+
+	const keys = await Promise.all(
+		list.keys.map(async (key) => {
+			const data = await env.L4.get(key.name);
+			if (!data) return null;
+			const apiKey = JSON.parse(data);
+			return {
+				id: key.name.slice(7),
+				name: apiKey.name,
+				createdAt: apiKey.createdAt,
+				expiresAt: apiKey.expiresAt,
+				lastUsed: apiKey.lastUsed,
+			};
+		}),
+	);
+
+	return new Response(
+		JSON.stringify({ keys: keys.filter(Boolean) }),
+		{ headers: { "Content-Type": "application/json" } },
+	);
+}
+
+async function handleCreateApiKey(
+	request: Request,
+	env: Env,
+): Promise<Response> {
+	try {
+		const { name, expiresInDays } = await request.json();
+
+		if (!name) {
+			return new Response(JSON.stringify({ error: "Name is required" }), {
+				status: 400,
+				headers: { "Content-Type": "application/json" },
+			});
+		}
+
+		const apiKey = nanoid(32);
+		const expiresAt = expiresInDays
+			? Date.now() + expiresInDays * 24 * 60 * 60 * 1000
+			: null;
+
+		await env.L4.put(
+			`apikey:${apiKey}`,
+			JSON.stringify({
+				name,
+				createdAt: Date.now(),
+				expiresAt,
+				lastUsed: null,
+			}),
+		);
+
+		return new Response(
+			JSON.stringify({
+				success: true,
+				apiKey,
+				name,
+				expiresAt,
+			}),
+			{ headers: { "Content-Type": "application/json" } },
+		);
+	} catch (error) {
+		return new Response(JSON.stringify({ error: "Invalid request" }), {
+			status: 400,
+			headers: { "Content-Type": "application/json" },
+		});
+	}
+}
+
+async function handleDeleteApiKey(
+	keyId: string,
+	env: Env,
+): Promise<Response> {
+	await env.L4.delete(`apikey:${keyId}`);
+
+	return new Response(JSON.stringify({ success: true }), {
+		headers: { "Content-Type": "application/json" },
+	});
+}
+
+function generateCodeVerifier(): string {
+	return nanoid(64);
+}
+
+async function generateCodeChallenge(verifier: string): Promise<string> {
+	const encoder = new TextEncoder();
+	const data = encoder.encode(verifier);
+	const hash = await crypto.subtle.digest("SHA-256", data);
+	return base64UrlEncode(new Uint8Array(hash));
+}
+
+function base64UrlEncode(buffer: Uint8Array): string {
+	let binary = "";
+	for (let i = 0; i < buffer.byteLength; i++) {
+		binary += String.fromCharCode(buffer[i]);
+	}
+	return btoa(binary).replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
+}
+
+interface Env {
+	L4: KVNamespace;
+	IMAGES: R2Bucket;
+	HOST: string;
+	INDIKO_URL: string;
+	INDIKO_CLIENT_ID: string;
+	INDIKO_CLIENT_SECRET: string;
+}

src/login.html

···
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>login - l4</title>
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚡</text></svg>">
+    <style>
+        :root {
+            --evergreen: #16302b;
+            --vintage-grape: #694873;
+            --dusty-mauve: #8b728e;
+            --muted-teal: #85b79d;
+            --tea-green: #c0e5c8;
+            --evergreen-dark: #0d1f1b;
+            --input-bg: #1a3530;
+            --border-color: #2a4540;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        html {
+            background: var(--evergreen);
+        }
+
+        body {
+            font-family: "Courier New", monospace;
+            background: var(--evergreen);
+            color: var(--tea-green);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            min-height: 100vh;
+            padding: 1.25rem;
+        }
+
+        .login-container {
+            background: var(--input-bg);
+            border: 0.0625rem solid var(--border-color);
+            padding: 3rem;
+            max-width: 450px;
+            width: 100%;
+        }
+
+        h1 {
+            font-size: 3rem;
+            margin-bottom: 0.5rem;
+            font-weight: 700;
+            background: linear-gradient(135deg, var(--muted-teal), var(--tea-green));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            letter-spacing: -0.0625rem;
+        }
+
+        p {
+            color: var(--muted-teal);
+            margin-bottom: 2rem;
+            font-size: 0.9375rem;
+        }
+
+        button {
+            width: 100%;
+            padding: 1rem;
+            background: var(--vintage-grape);
+            color: var(--tea-green);
+            border: none;
+            font-size: 1rem;
+            font-weight: 700;
+            cursor: pointer;
+            font-family: "Courier New", monospace;
+            transition: background 0.15s;
+        }
+
+        button:hover {
+            background: var(--dusty-mauve);
+        }
+
+        button:focus {
+            outline: 0.0625rem solid var(--tea-green);
+            outline-offset: 0;
+        }
+
+        .error {
+            background: #8b2828;
+            border: 0.0625rem solid #a03030;
+            padding: 1rem;
+            margin-bottom: 1.5rem;
+            color: #ffb3b3;
+            font-size: 0.875rem;
+        }
+
+        .shortcut {
+            color: var(--muted-teal);
+            font-size: 0.75rem;
+            margin-top: 1rem;
+            text-align: center;
+        }
+
+        .shortcut kbd {
+            background: var(--evergreen);
+            padding: 0.125rem 0.375rem;
+            border: 0.0625rem solid var(--border-color);
+            font-size: 0.6875rem;
+        }
+    </style>
+</head>
+<body>
+    <div class="login-container">
+        <h1>l4</h1>
+        <p>high-performance image cache powered by cloudflare r2</p>
+        
+        <div id="error" class="error" style="display: none;"></div>
+        
+        <button onclick="login()" autofocus>login with indiko</button>
+
+        <div class="shortcut">
+            press <kbd>enter</kbd> to login
+        </div>
+    </div>
+
+    <script>
+        const params = new URLSearchParams(window.location.search);
+        const error = params.get('error');
+        
+        if (error) {
+            const errorDiv = document.getElementById('error');
+            const messages = {
+                'missing_params': 'missing authorization parameters',
+                'invalid_state': 'invalid state parameter',
+                'token_exchange_failed': 'failed to exchange authorization code',
+                'unauthorized_role': 'you need admin or viewer role to access this application',
+                'unknown': 'an unknown error occurred'
+            };
+            
+            errorDiv.textContent = messages[error] || messages.unknown;
+            errorDiv.style.display = 'block';
+        }
+
+        function login() {
+            window.location.href = '/api/login';
+        }
+
+        // Enter key to login
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') {
+                login();
+            }
+        });
+    </script>
+</body>
+</html>

tsconfig.json

···
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ES2022",
+    "lib": ["ES2022"],
+    "types": ["@cloudflare/workers-types", "@types/bun"],
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "skipLibCheck": true
+  }
+}

wrangler.toml

···
+name = "l4"
+main = "src/index.ts"
+compatibility_date = "2024-12-18"
+
+[observability]
+enabled = true
+
+[[r2_buckets]]
+binding = "IMAGES"
+bucket_name = "l4-images"
+
+[[kv_namespaces]]
+binding = "L4"
+id = "dee452afc1134a58aee704dfda12a703"
+
+[[rules]]
+type = "Text"
+globs = ["**/*.html"]
+fallthrough = false
+
+[vars]
+HOST = "https://l4.yourdomain.com"
+INDIKO_URL = "https://indiko.dunkirk.sh"
+
+# Environment variables
+# For local development, set in .dev.vars file:
+# INDIKO_CLIENT_ID=your_client_id
+# INDIKO_CLIENT_SECRET=your_client_secret
+#
+# For production, set as secrets:
+# wrangler secret put INDIKO_CLIENT_ID
+# wrangler secret put INDIKO_CLIENT_SECRET