From cca3e5d346920d7fecd116a4f1ed9cf79215e119 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 21 Aug 2026 21:00:37 +0000
Subject: [PATCH] r3dr: URL shortener page under Projects

Ports the r3dr_v2 frontend (MoonBase #1359 chunk 2) to /r3dr: shorten
form with expiry chips, localStorage recent links, iili.uk short links.
Nav entry moves from Elsewhere (r3dr.net, retiring) to Projects.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017HmkKHfFNgq4buWdcAFqB8
---
 package-lock.json                             |  45 ++--
 package.json                                  |   3 +-
 src/App.tsx                                   |   2 +
 src/apps/r3dr/__tests__/CopyButton.test.tsx   |  49 ++++
 src/apps/r3dr/__tests__/R3drPage.test.tsx     |  63 +++++
 src/apps/r3dr/__tests__/ShortenCard.test.tsx  | 154 +++++++++++
 src/apps/r3dr/__tests__/api.test.ts           |  86 +++++++
 src/apps/r3dr/__tests__/expiry.test.ts        |  40 +++
 src/apps/r3dr/__tests__/recent.test.ts        |  81 ++++++
 src/apps/r3dr/__tests__/urlInput.test.ts      |  35 +++
 src/apps/r3dr/api.ts                          |  70 +++++
 .../r3dr/components/CopyButton.module.css     |  45 ++++
 src/apps/r3dr/components/CopyButton.tsx       |  65 +++++
 .../r3dr/components/RecentLinks.module.css    | 106 ++++++++
 src/apps/r3dr/components/RecentLinks.tsx      |  44 ++++
 .../r3dr/components/ShortenCard.module.css    | 240 ++++++++++++++++++
 src/apps/r3dr/components/ShortenCard.tsx      | 118 +++++++++
 src/apps/r3dr/expiry.ts                       |  33 +++
 src/apps/r3dr/pages/R3drPage.module.css       |  79 ++++++
 src/apps/r3dr/pages/R3drPage.tsx              |  49 ++++
 src/apps/r3dr/recent.ts                       |  58 +++++
 src/apps/r3dr/urlInput.ts                     |  24 ++
 src/shared/components/Navigation.tsx          |   2 +-
 .../components/__tests__/Navigation.test.tsx  |  13 +-
 24 files changed, 1471 insertions(+), 33 deletions(-)
 create mode 100644 src/apps/r3dr/__tests__/CopyButton.test.tsx
 create mode 100644 src/apps/r3dr/__tests__/R3drPage.test.tsx
 create mode 100644 src/apps/r3dr/__tests__/ShortenCard.test.tsx
 create mode 100644 src/apps/r3dr/__tests__/api.test.ts
 create mode 100644 src/apps/r3dr/__tests__/expiry.test.ts
 create mode 100644 src/apps/r3dr/__tests__/recent.test.ts
 create mode 100644 src/apps/r3dr/__tests__/urlInput.test.ts
 create mode 100644 src/apps/r3dr/api.ts
 create mode 100644 src/apps/r3dr/components/CopyButton.module.css
 create mode 100644 src/apps/r3dr/components/CopyButton.tsx
 create mode 100644 src/apps/r3dr/components/RecentLinks.module.css
 create mode 100644 src/apps/r3dr/components/RecentLinks.tsx
 create mode 100644 src/apps/r3dr/components/ShortenCard.module.css
 create mode 100644 src/apps/r3dr/components/ShortenCard.tsx
 create mode 100644 src/apps/r3dr/expiry.ts
 create mode 100644 src/apps/r3dr/pages/R3drPage.module.css
 create mode 100644 src/apps/r3dr/pages/R3drPage.tsx
 create mode 100644 src/apps/r3dr/recent.ts
 create mode 100644 src/apps/r3dr/urlInput.ts

diff --git a/package-lock.json b/package-lock.json
index 707183b..2f81e44 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "@testing-library/dom": "^10.4.1",
         "@testing-library/jest-dom": "^7.0.0",
         "@testing-library/react": "^16.3.2",
+        "@testing-library/user-event": "^14.6.5",
         "@types/react": "^19.1.15",
         "@types/react-dom": "^19.2.4",
         "@typescript/native": "npm:typescript@^7.0.2",
@@ -2152,9 +2153,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2172,9 +2170,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2192,9 +2187,6 @@
         "ppc64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2212,9 +2204,6 @@
         "s390x"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2232,9 +2221,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2252,9 +2238,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2442,6 +2425,20 @@
         }
       }
     },
+    "node_modules/@testing-library/user-event": {
+      "version": "14.6.5",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.6.5.tgz",
+      "integrity": "sha512-FhqjldLTpteueBaKflhNFlMT3+PM0O5fiBUivht6b9CZ1eesJyy7+g3Jr7XwJzt/Hip3ZG5hWwK1MX1FuDiE4w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": ">=7.21.4"
+      }
+    },
     "node_modules/@types/aria-query": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
@@ -4762,9 +4759,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -4786,9 +4780,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -4810,9 +4801,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -4834,9 +4822,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
diff --git a/package.json b/package.json
index cb0df55..308f9f4 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
     "test:ui": "vitest --ui",
     "typecheck": "tsc --noEmit",
     "test:run": "vitest run",
-    "local-server": "cross-env VITE_THOUGHTS_WEBSOCKET_URL=ws://localhost:2015/games/v1/thoughts-ws VITE_GOLF_WEBSOCKET_URL=ws://localhost:2015/games/v1/golf-ws VITE_THOUGHTS_SIMULATED=false VITE_METRICS_API_URL=http://localhost:2015/metrics/v1 VITE_MITHRIL_API_URL=http://localhost:2015/mithril/v1/wordchain VITE_TRACY_API_URL=http://localhost:2015/portrait/v1/trace VITE_POSTERIZE_API_URL=http://localhost:2015/imagine/v1 vite",
+    "local-server": "cross-env VITE_THOUGHTS_WEBSOCKET_URL=ws://localhost:2015/games/v1/thoughts-ws VITE_GOLF_WEBSOCKET_URL=ws://localhost:2015/games/v1/golf-ws VITE_THOUGHTS_SIMULATED=false VITE_METRICS_API_URL=http://localhost:2015/metrics/v1 VITE_MITHRIL_API_URL=http://localhost:2015/mithril/v1/wordchain VITE_TRACY_API_URL=http://localhost:2015/portrait/v1/trace VITE_POSTERIZE_API_URL=http://localhost:2015/imagine/v1 VITE_R3DR_API_URL=http://localhost:2015/r3dr/v2 vite",
     "deploy": "wrangler deploy"
   },
   "dependencies": {
@@ -30,6 +30,7 @@
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^7.0.0",
     "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.5",
     "@types/react": "^19.1.15",
     "@types/react-dom": "^19.2.4",
     "@typescript/native": "npm:typescript@^7.0.2",
diff --git a/src/App.tsx b/src/App.tsx
index dbc71c4..237b14e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -13,6 +13,7 @@ import SystemsPage from './apps/metrics-systems/pages/SystemsPage'
 import ResilienceGamePage from './apps/metrics-systems/pages/ResilienceGamePage'
 import MetricsPage from './apps/metrics-systems/pages/MetricsPage'
 import WordchainsPage from './apps/wordchains/pages/WordchainsPage'
+import R3drPage from './apps/r3dr/pages/R3drPage'
 import NotFoundPage from './core/pages/NotFoundPage'
 
 function App() {
@@ -30,6 +31,7 @@ function App() {
       <Route path="/tracy" element={<TracyPage />} />
       <Route path="/posterize" element={<PosterizePage />} />
       <Route path="/wordchains" element={<WordchainsPage />} />
+      <Route path="/r3dr" element={<R3drPage />} />
       <Route path="/metrics" element={<Navigate to="/metrics/host" replace />} />
       <Route path="/metrics/:tab" element={<MetricsPage />} />
       <Route path="/resilience" element={<SystemsPage />} />
diff --git a/src/apps/r3dr/__tests__/CopyButton.test.tsx b/src/apps/r3dr/__tests__/CopyButton.test.tsx
new file mode 100644
index 0000000..2693261
--- /dev/null
+++ b/src/apps/r3dr/__tests__/CopyButton.test.tsx
@@ -0,0 +1,49 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import CopyButton from '../components/CopyButton'
+
+// fireEvent, not user-event: userEvent.setup() installs its own clipboard
+// stub, which would shadow the one under test.
+
+function stubClipboard(writeText: (text: string) => Promise<void>) {
+  Object.defineProperty(navigator, 'clipboard', {
+    value: { writeText },
+    configurable: true,
+  })
+}
+
+const TEXT = 'https://iili.uk/r/AQA'
+
+describe('CopyButton', () => {
+  it('copies the exact text and confirms', async () => {
+    const writeText = vi.fn().mockResolvedValue(undefined)
+    stubClipboard(writeText)
+    render(<CopyButton text={TEXT} />)
+
+    fireEvent.click(screen.getByRole('button', { name: `Copy ${TEXT}` }))
+
+    expect(await screen.findByRole('button', { name: 'Copied' })).toHaveTextContent('Copied ✓')
+    expect(writeText).toHaveBeenCalledWith(TEXT)
+  })
+
+  it('admits failure when no copy path works', async () => {
+    stubClipboard(vi.fn().mockRejectedValue(new Error('denied')))
+    document.execCommand = vi.fn().mockReturnValue(false)
+    render(<CopyButton text={TEXT} />)
+
+    fireEvent.click(screen.getByRole('button', { name: /^Copy / }))
+
+    expect(await screen.findByRole('button', { name: 'Copy failed' })).toBeDefined()
+  })
+
+  it('falls back to execCommand when the clipboard API is refused', async () => {
+    stubClipboard(vi.fn().mockRejectedValue(new Error('denied')))
+    document.execCommand = vi.fn().mockReturnValue(true)
+    render(<CopyButton text={TEXT} />)
+
+    fireEvent.click(screen.getByRole('button', { name: /^Copy / }))
+
+    expect(await screen.findByRole('button', { name: 'Copied' })).toBeDefined()
+    expect(document.execCommand).toHaveBeenCalledWith('copy')
+  })
+})
diff --git a/src/apps/r3dr/__tests__/R3drPage.test.tsx b/src/apps/r3dr/__tests__/R3drPage.test.tsx
new file mode 100644
index 0000000..0766112
--- /dev/null
+++ b/src/apps/r3dr/__tests__/R3drPage.test.tsx
@@ -0,0 +1,63 @@
+import { render, screen, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import R3drPage from '../pages/R3drPage'
+import * as api from '../api'
+
+vi.mock('../api', { spy: true })
+// The shared nav pulls in router-dependent pieces this page doesn't test.
+vi.mock('@/shared/components/Navigation', () => ({ default: () => <nav /> }))
+vi.mock('@/shared/components/nav/NavTagline', () => ({ default: () => null }))
+
+const NOW = 1755000000000
+
+describe('R3drPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    localStorage.clear()
+    vi.useFakeTimers({ toFake: ['Date'] })
+    vi.setSystemTime(NOW)
+  })
+
+  it('adds a minted link to Recent links and persists it', async () => {
+    vi.mocked(api.shorten).mockResolvedValue({ slug: 'AQA' })
+    render(<R3drPage />)
+
+    const user = userEvent.setup()
+    await user.type(screen.getByLabelText('Long link'), 'https://example.com/page')
+    await user.click(screen.getByRole('button', { name: 'Shorten' }))
+
+    const recent = await screen.findByRole('region', { name: 'Recent links' })
+    expect(within(recent).getByRole('link', { name: 'iili.uk/r/AQA' })).toBeDefined()
+    expect(localStorage.getItem('r3dr.recent')).toContain('"AQA"')
+  })
+
+  it('boots with stored links, skipping expired ones', () => {
+    localStorage.setItem(
+      'r3dr.recent',
+      JSON.stringify([
+        { slug: 'AQA', longUrl: 'https://example.com/live', expiresAt: NOW + 1000 },
+        { slug: 'DAA', longUrl: 'https://example.com/dead', expiresAt: NOW - 1000 },
+      ])
+    )
+    render(<R3drPage />)
+
+    const recent = screen.getByRole('region', { name: 'Recent links' })
+    expect(within(recent).getByRole('link', { name: 'iili.uk/r/AQA' })).toBeDefined()
+    expect(within(recent).queryByText(/DAA/)).toBeNull()
+  })
+
+  it('clears the list and the storage together', async () => {
+    localStorage.setItem(
+      'r3dr.recent',
+      JSON.stringify([{ slug: 'AQA', longUrl: 'https://example.com/x', expiresAt: NOW + 1000 }])
+    )
+    render(<R3drPage />)
+
+    const user = userEvent.setup()
+    await user.click(screen.getByRole('button', { name: 'Clear recent links' }))
+
+    expect(screen.queryByRole('region', { name: 'Recent links' })).toBeNull()
+    expect(localStorage.getItem('r3dr.recent')).toBeNull()
+  })
+})
diff --git a/src/apps/r3dr/__tests__/ShortenCard.test.tsx b/src/apps/r3dr/__tests__/ShortenCard.test.tsx
new file mode 100644
index 0000000..7f34a1f
--- /dev/null
+++ b/src/apps/r3dr/__tests__/ShortenCard.test.tsx
@@ -0,0 +1,154 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import ShortenCard from '../components/ShortenCard'
+import * as api from '../api'
+
+vi.mock('../api', { spy: true })
+
+const NOW = 1755000000000
+const MINUTE = 60 * 1000
+const HOUR = 60 * MINUTE
+const DAY = 24 * HOUR
+const LINK_NAME = 'iili.uk/r/AQA'
+
+describe('ShortenCard', () => {
+  beforeEach(() => {
+    // No global clearMocks in this repo's vitest config; the spy-mocked
+    // api module keeps call history across tests without this.
+    vi.clearAllMocks()
+    vi.useFakeTimers({ toFake: ['Date'] })
+    vi.setSystemTime(NOW)
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('mints with the default 7-day expiry and shows the short link', async () => {
+    vi.mocked(api.shorten).mockResolvedValue({ slug: 'AQA' })
+    const onMinted = vi.fn()
+    render(<ShortenCard onMinted={onMinted} />)
+
+    const user = userEvent.setup()
+    await user.type(screen.getByLabelText('Long link'), 'https://example.com/page')
+    await user.click(screen.getByRole('button', { name: 'Shorten' }))
+
+    expect(api.shorten).toHaveBeenCalledWith('https://example.com/page', NOW + 7 * DAY)
+    expect(await screen.findByRole('link', { name: LINK_NAME })).toHaveAttribute(
+      'href',
+      'https://iili.uk/r/AQA'
+    )
+    expect(screen.getByText(/expires in 7 days/)).toBeDefined()
+    expect(onMinted).toHaveBeenCalledWith({
+      slug: 'AQA',
+      longUrl: 'https://example.com/page',
+      expiresAt: NOW + 7 * DAY,
+    })
+    // Ready for the next paste.
+    expect(screen.getByLabelText('Long link')).toHaveValue('')
+  })
+
+  it('mints a bare domain through the real form', async () => {
+    vi.mocked(api.shorten).mockResolvedValue({ slug: 'AQA' })
+    render(<ShortenCard onMinted={vi.fn()} />)
+
+    const user = userEvent.setup()
+    await user.type(screen.getByLabelText('Long link'), 'example.com/page')
+    await user.click(screen.getByRole('button', { name: 'Shorten' }))
+
+    await screen.findByRole('link', { name: LINK_NAME })
+    expect(api.shorten).toHaveBeenCalledWith('https://example.com/page', NOW + 7 * DAY)
+  })
+
+  it('mints with a chosen expiry chip, the 30-day one under the ceiling', async () => {
+    vi.mocked(api.shorten).mockResolvedValue({ slug: 'AQA' })
+    render(<ShortenCard onMinted={vi.fn()} />)
+
+    const user = userEvent.setup()
+    await user.click(screen.getByRole('button', { name: '30 days' }))
+    expect(screen.getByRole('button', { name: '30 days' })).toHaveAttribute('aria-pressed', 'true')
+    expect(screen.getByRole('button', { name: '7 days' })).toHaveAttribute('aria-pressed', 'false')
+
+    await user.type(screen.getByLabelText('Long link'), 'https://example.com/page')
+    await user.click(screen.getByRole('button', { name: 'Shorten' }))
+
+    expect(api.shorten).toHaveBeenCalledWith('https://example.com/page', NOW + 30 * DAY - 5 * MINUTE)
+  })
+
+  it('asks for a link on an empty submit', async () => {
+    render(<ShortenCard onMinted={vi.fn()} />)
+
+    const user = userEvent.setup()
+    await user.click(screen.getByRole('button', { name: 'Shorten' }))
+
+    expect(screen.getByRole('alert')).toHaveTextContent(/paste/i)
+    expect(api.shorten).not.toHaveBeenCalled()
+  })
+
+  it('blocks invalid input before it reaches the API', async () => {
+    render(<ShortenCard onMinted={vi.fn()} />)
+
+    const user = userEvent.setup()
+    await user.type(screen.getByLabelText('Long link'), 'ftp://example.com')
+    await user.click(screen.getByRole('button', { name: 'Shorten' }))
+
+    expect(screen.getByRole('alert')).toHaveTextContent('http:// or https://')
+    expect(api.shorten).not.toHaveBeenCalled()
+  })
+
+  it('shows the API error and clears it on the next success', async () => {
+    vi.mocked(api.shorten).mockRejectedValueOnce(new Error('expiresAt is in the past'))
+    vi.mocked(api.shorten).mockResolvedValueOnce({ slug: 'AQA' })
+    render(<ShortenCard onMinted={vi.fn()} />)
+
+    const user = userEvent.setup()
+    const field = screen.getByLabelText('Long link')
+    await user.type(field, 'https://example.com/page')
+    await user.click(screen.getByRole('button', { name: 'Shorten' }))
+    expect(await screen.findByRole('alert')).toHaveTextContent('expiresAt is in the past')
+
+    await user.clear(field)
+    await user.type(field, 'https://example.com/page')
+    await user.click(screen.getByRole('button', { name: 'Shorten' }))
+    await screen.findByRole('link', { name: LINK_NAME })
+    expect(screen.getByRole('alert')).toBeEmptyDOMElement()
+  })
+
+  it('ignores a second submit while one is in flight', async () => {
+    let release!: (value: { slug: string }) => void
+    vi.mocked(api.shorten).mockImplementation(() => new Promise(resolve => (release = resolve)))
+    render(<ShortenCard onMinted={vi.fn()} />)
+
+    const user = userEvent.setup()
+    await user.type(screen.getByLabelText('Long link'), 'https://example.com/page')
+    await user.click(screen.getByRole('button', { name: 'Shorten' }))
+
+    // Busy, never disabled: disabling would blur keyboard focus.
+    const busy = screen.getByRole('button', { name: 'Shortening…' })
+    expect(busy).not.toBeDisabled()
+    expect(busy).toHaveAttribute('aria-busy', 'true')
+    await user.click(busy)
+
+    release({ slug: 'AQA' })
+    await screen.findByRole('link', { name: LINK_NAME })
+    expect(api.shorten).toHaveBeenCalledTimes(1)
+  })
+
+  it('keeps text typed while the request was in flight', async () => {
+    let release!: (value: { slug: string }) => void
+    vi.mocked(api.shorten).mockImplementation(() => new Promise(resolve => (release = resolve)))
+    render(<ShortenCard onMinted={vi.fn()} />)
+
+    const user = userEvent.setup()
+    const field = screen.getByLabelText('Long link')
+    await user.type(field, 'https://example.com/first')
+    await user.click(screen.getByRole('button', { name: 'Shorten' }))
+    await user.clear(field)
+    await user.type(field, 'https://example.com/next')
+
+    release({ slug: 'AQA' })
+    await screen.findByRole('link', { name: LINK_NAME })
+    expect(field).toHaveValue('https://example.com/next')
+  })
+})
diff --git a/src/apps/r3dr/__tests__/api.test.ts b/src/apps/r3dr/__tests__/api.test.ts
new file mode 100644
index 0000000..d1271bc
--- /dev/null
+++ b/src/apps/r3dr/__tests__/api.test.ts
@@ -0,0 +1,86 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { shorten, shortLink, shortLinkLabel } from '../api'
+
+function mockFetch(status: number, body: string) {
+  const fn = vi
+    .fn()
+    .mockResolvedValue(new Response(body, { status, headers: { 'Content-Type': 'application/json' } }))
+  vi.stubGlobal('fetch', fn)
+  return fn
+}
+
+afterEach(() => vi.unstubAllGlobals())
+
+describe('shorten', () => {
+  it('POSTs longUrl and expiresAt as JSON and returns the slug', async () => {
+    const fetchMock = mockFetch(201, '{"slug":"AQA"}')
+
+    const result = await shorten('https://example.com/page', 1755003600000)
+
+    expect(result).toEqual({ slug: 'AQA' })
+    const [url, init] = fetchMock.mock.calls[0]
+    expect(url).toBe('https://api.muchq.com/r3dr/v2/shorten')
+    expect(init.method).toBe('POST')
+    // Without this header the browser sends text/plain and drops out of the
+    // preflighted class the API's CORS allow-list serves.
+    expect(init.headers).toMatchObject({ 'Content-Type': 'application/json' })
+    // The timeout that hands a dead-network form back to the user.
+    expect(init.signal).toBeInstanceOf(AbortSignal)
+    expect(JSON.parse(init.body)).toEqual({
+      longUrl: 'https://example.com/page',
+      expiresAt: 1755003600000,
+    })
+  })
+
+  it('surfaces the fieldList message from a trait 400', async () => {
+    mockFetch(
+      400,
+      JSON.stringify({
+        fieldList: [
+          { message: 'Member must have length between 11 and 1000, inclusive', path: '/longUrl' },
+        ],
+        message: '1 validation error detected. …',
+      })
+    )
+
+    await expect(shorten('http://g.c', 1)).rejects.toThrow(
+      'Member must have length between 11 and 1000, inclusive'
+    )
+  })
+
+  it('surfaces the modeled message from a clock-rule 400', async () => {
+    mockFetch(400, '{"message":"expiresAt is in the past"}')
+
+    await expect(shorten('https://example.com', 1)).rejects.toThrow('expiresAt is in the past')
+  })
+
+  it('replaces a 429 with the friendly throttle message', async () => {
+    mockFetch(429, '{"message":"whatever the server said"}')
+
+    await expect(shorten('https://example.com', 1)).rejects.toThrow(
+      'Slow down — too many links. Try again in a minute.'
+    )
+  })
+
+  it('never renders an empty error for a bodyless gateway failure', async () => {
+    mockFetch(502, '')
+
+    await expect(shorten('https://example.com', 1)).rejects.toThrow(/something went wrong/i)
+  })
+
+  it('maps a network failure or timeout to a friendly message', async () => {
+    vi.stubGlobal(
+      'fetch',
+      vi.fn().mockRejectedValue(new DOMException('signal timed out', 'TimeoutError'))
+    )
+
+    await expect(shorten('https://example.com', 1)).rejects.toThrow(/network trouble/i)
+  })
+})
+
+describe('shortLink', () => {
+  it('mints iili.uk short links, labelled sans scheme', () => {
+    expect(shortLink('AQA')).toBe('https://iili.uk/r/AQA')
+    expect(shortLinkLabel('AQA')).toBe('iili.uk/r/AQA')
+  })
+})
diff --git a/src/apps/r3dr/__tests__/expiry.test.ts b/src/apps/r3dr/__tests__/expiry.test.ts
new file mode 100644
index 0000000..808f81c
--- /dev/null
+++ b/src/apps/r3dr/__tests__/expiry.test.ts
@@ -0,0 +1,40 @@
+import { describe, expect, it } from 'vitest'
+import { DEFAULT_EXPIRY, describeExpiry, EXPIRY_OPTIONS } from '../expiry'
+
+const MINUTE = 60 * 1000
+const HOUR = 60 * MINUTE
+const DAY = 24 * HOUR
+
+describe('EXPIRY_OPTIONS', () => {
+  it('pins every option, the top one five minutes under the API ceiling', () => {
+    // Under, never at: the server checks its own clock, and a client
+    // running seconds fast must not turn the 30-day button into a 400.
+    expect(EXPIRY_OPTIONS.map(option => [option.label, option.ms])).toEqual([
+      ['1 hour', HOUR],
+      ['1 day', DAY],
+      ['7 days', 7 * DAY],
+      ['30 days', 30 * DAY - 5 * MINUTE],
+    ])
+  })
+
+  it('defaults to 7 days', () => {
+    expect(DEFAULT_EXPIRY.label).toBe('7 days')
+    expect(EXPIRY_OPTIONS).toContain(DEFAULT_EXPIRY)
+  })
+})
+
+describe('describeExpiry', () => {
+  it('speaks minutes, hours, then days — switching at 48 hours', () => {
+    expect(describeExpiry(20 * MINUTE)).toBe('in 20 minutes')
+    expect(describeExpiry(MINUTE)).toBe('in 1 minute')
+    expect(describeExpiry(3 * HOUR)).toBe('in 3 hours')
+    expect(describeExpiry(47 * HOUR)).toBe('in 47 hours')
+    expect(describeExpiry(49 * HOUR)).toBe('in 2 days')
+    expect(describeExpiry(7 * DAY)).toBe('in 7 days')
+  })
+
+  it('calls the past expired', () => {
+    expect(describeExpiry(0)).toBe('expired')
+    expect(describeExpiry(-5)).toBe('expired')
+  })
+})
diff --git a/src/apps/r3dr/__tests__/recent.test.ts b/src/apps/r3dr/__tests__/recent.test.ts
new file mode 100644
index 0000000..cbe6174
--- /dev/null
+++ b/src/apps/r3dr/__tests__/recent.test.ts
@@ -0,0 +1,81 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { addRecent, clearRecent, loadRecent, type RecentLink } from '../recent'
+
+const NOW = 1755000000000
+
+const link = (slug: string, expiresAt = NOW + 1000): RecentLink => ({
+  slug,
+  longUrl: `https://example.com/${slug}`,
+  expiresAt,
+})
+
+beforeEach(() => localStorage.clear())
+afterEach(() => vi.restoreAllMocks())
+
+describe('addRecent + loadRecent', () => {
+  it('round-trips through localStorage newest first', () => {
+    const one = addRecent([], link('AAA'))
+    addRecent(one, link('BBB'))
+
+    const loaded = loadRecent(NOW)
+    expect(loaded.map(l => l.slug)).toEqual(['BBB', 'AAA'])
+  })
+
+  it('dedupes by slug and caps at five', () => {
+    let links: RecentLink[] = []
+    for (const slug of ['aaa', 'bbb', 'ccc', 'ddd', 'eee', 'fff']) {
+      links = addRecent(links, link(slug))
+    }
+    links = addRecent(links, link('ddd'))
+
+    expect(links.map(l => l.slug)).toEqual(['ddd', 'fff', 'eee', 'ccc', 'bbb'])
+    expect(loadRecent(NOW).map(l => l.slug)).toEqual(['ddd', 'fff', 'eee', 'ccc', 'bbb'])
+  })
+
+  it('drops expired links on load', () => {
+    addRecent(addRecent([], link('ded', NOW - 1)), link('liv', NOW + 1))
+
+    expect(loadRecent(NOW).map(l => l.slug)).toEqual(['liv'])
+  })
+
+  it('shrugs off garbage and missing storage', () => {
+    localStorage.setItem('r3dr.recent', 'not json')
+    expect(loadRecent(NOW)).toEqual([])
+
+    localStorage.setItem('r3dr.recent', '{"an":"object"}')
+    expect(loadRecent(NOW)).toEqual([])
+
+    localStorage.setItem('r3dr.recent', '[{"slug":1}]')
+    expect(loadRecent(NOW)).toEqual([])
+  })
+
+  it('drops entries whose slug is not slug-shaped', () => {
+    localStorage.setItem(
+      'r3dr.recent',
+      JSON.stringify([
+        { slug: '<img src=x>', longUrl: 'https://example.com/a', expiresAt: NOW + 1000 },
+        { slug: 'javascript:alert(1)', longUrl: 'https://example.com/b', expiresAt: NOW + 1000 },
+        // Right alphabet, impossible length: the encoder mints 3/6/11 only.
+        { slug: 'AQAB', longUrl: 'https://example.com/d', expiresAt: NOW + 1000 },
+        { slug: 'AQA', longUrl: 'https://example.com/c', expiresAt: NOW + 1000 },
+      ])
+    )
+    expect(loadRecent(NOW).map(l => l.slug)).toEqual(['AQA'])
+  })
+
+  it('still returns the list when localStorage throws', () => {
+    // Restored in afterEach so a failed expect can't leak the throwing spy.
+    vi.spyOn(localStorage, 'setItem').mockImplementation(() => {
+      throw new Error('quota')
+    })
+    expect(addRecent([], link('AAA')).map(l => l.slug)).toEqual(['AAA'])
+  })
+})
+
+describe('clearRecent', () => {
+  it('empties storage', () => {
+    addRecent([], link('AAA'))
+    clearRecent()
+    expect(loadRecent(NOW)).toEqual([])
+  })
+})
diff --git a/src/apps/r3dr/__tests__/urlInput.test.ts b/src/apps/r3dr/__tests__/urlInput.test.ts
new file mode 100644
index 0000000..1d4dcff
--- /dev/null
+++ b/src/apps/r3dr/__tests__/urlInput.test.ts
@@ -0,0 +1,35 @@
+import { describe, expect, it } from 'vitest'
+import { normalizeUrl, validateUrl } from '../urlInput'
+
+describe('normalizeUrl', () => {
+  it('prefixes bare domains with https://', () => {
+    expect(normalizeUrl('example.com/x')).toBe('https://example.com/x')
+    expect(normalizeUrl('  example.com  ')).toBe('https://example.com')
+  })
+
+  it('lowercases an uppercased http(s) scheme instead of bouncing it', () => {
+    expect(normalizeUrl('HTTPS://Example.com/Path')).toBe('https://Example.com/Path')
+    expect(normalizeUrl('HTTP://g.co')).toBe('http://g.co')
+  })
+
+  it('leaves other schemes alone to fail validation', () => {
+    expect(normalizeUrl('http://example.com')).toBe('http://example.com')
+    expect(normalizeUrl('ftp://example.com')).toBe('ftp://example.com')
+  })
+})
+
+describe('validateUrl', () => {
+  it('mirrors the API traits at both edges', () => {
+    expect(validateUrl('')).toMatch(/paste/i)
+    expect(validateUrl('ftp://example.com')).toMatch(/http/)
+    expect(validateUrl('http://g.c')).toMatch(/short/)
+    expect(validateUrl('http://g.co')).toBeNull()
+    expect(validateUrl('https://e.co/' + 'a'.repeat(987))).toBeNull() // exactly 1000
+    expect(validateUrl('https://e.co/' + 'a'.repeat(988))).toMatch(/1000/)
+  })
+
+  it('counts code points like the server, not UTF-16 units', () => {
+    // 13 + 987 code points = 1000; twice that many UTF-16 units.
+    expect(validateUrl('https://e.co/' + '🌸'.repeat(987))).toBeNull()
+  })
+})
diff --git a/src/apps/r3dr/api.ts b/src/apps/r3dr/api.ts
new file mode 100644
index 0000000..1e4776c
--- /dev/null
+++ b/src/apps/r3dr/api.ts
@@ -0,0 +1,70 @@
+// The r3dr_v2 API (MoonBase domains/r3dr/apis/r3dr_v2) behind api.muchq.com.
+// VITE_R3DR_API_URL points it at a local backend, like the other apps.
+const API_BASE: string =
+  (import.meta.env.VITE_R3DR_API_URL as string | undefined) || 'https://api.muchq.com/r3dr/v2'
+
+// Short links live on the standalone site's short domain, whose worker
+// 302s /r/{slug} through the same API this page mints against.
+const SHORT_LINK_BASE = 'https://iili.uk/r/'
+
+export function shortLink(slug: string): string {
+  // Identity on the slug alphabet; a URL-context barrier for anything else.
+  return `${SHORT_LINK_BASE}${encodeURIComponent(slug)}`
+}
+
+/** The visible label for a short link — same base as the href, sans scheme. */
+export function shortLinkLabel(slug: string): string {
+  return shortLink(slug).replace(/^https?:\/\//, '')
+}
+
+// Two error shapes: generated trait validation ({fieldList: [{message}...],
+// message}) and modeled errors ({message}). The fieldList entry names the
+// one broken constraint; the top-level message prefixes a count on it.
+function errorMessage(body: string | null): string | null {
+  if (!body) return null
+  try {
+    const parsed: unknown = JSON.parse(body)
+    if (parsed !== null && typeof parsed === 'object') {
+      const fieldList = (parsed as { fieldList?: { message?: unknown }[] }).fieldList
+      if (Array.isArray(fieldList) && typeof fieldList[0]?.message === 'string') {
+        return fieldList[0].message
+      }
+      const message = (parsed as { message?: unknown }).message
+      if (typeof message === 'string') {
+        return message
+      }
+    }
+  } catch {
+    // not JSON
+  }
+  return body
+}
+
+export async function shorten(longUrl: string, expiresAt: number): Promise<{ slug: string }> {
+  let res: Response
+  try {
+    res = await fetch(`${API_BASE}/shorten`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ longUrl, expiresAt }),
+      // A dead network must hand the form back, not hold it hostage.
+      signal: AbortSignal.timeout(10_000),
+    })
+  } catch {
+    throw new Error('Network trouble — check your connection and try again.')
+  }
+  if (!res.ok) {
+    let body: string | null = null
+    try {
+      body = await res.text()
+    } catch {
+      // ignore
+    }
+    const message =
+      res.status === 429
+        ? 'Slow down — too many links. Try again in a minute.'
+        : errorMessage(body) || res.statusText || 'Something went wrong'
+    throw new Error(message)
+  }
+  return res.json()
+}
diff --git a/src/apps/r3dr/components/CopyButton.module.css b/src/apps/r3dr/components/CopyButton.module.css
new file mode 100644
index 0000000..2ed2ee0
--- /dev/null
+++ b/src/apps/r3dr/components/CopyButton.module.css
@@ -0,0 +1,45 @@
+.copyBtn {
+  padding: 0.45rem 0.9rem;
+  background: rgba(255, 255, 255, 0.7);
+  border: 1px solid #c2d4bd;
+  border-radius: 10px;
+  color: #2c3a31;
+  font-family: inherit;
+  font-size: 0.85rem;
+  font-weight: 500;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
+}
+
+.copyBtn:hover {
+  border-color: #2e7d4f;
+  color: #1f5c39;
+}
+
+.copyBtn:focus-visible {
+  outline: 2px solid #2e7d4f;
+  outline-offset: 2px;
+}
+
+.copied {
+  border-color: rgba(46, 125, 79, 0.5);
+  color: #2e7d4f;
+}
+
+.compact {
+  padding: 0.3rem 0.7rem;
+  font-size: 0.8rem;
+}
+
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
diff --git a/src/apps/r3dr/components/CopyButton.tsx b/src/apps/r3dr/components/CopyButton.tsx
new file mode 100644
index 0000000..e8edac5
--- /dev/null
+++ b/src/apps/r3dr/components/CopyButton.tsx
@@ -0,0 +1,65 @@
+import { useEffect, useRef, useState } from 'react'
+import styles from './CopyButton.module.css'
+
+// clipboard.writeText needs a secure context; the textarea/execCommand path
+// covers plain-http dev and older mobile browsers.
+async function copyText(text: string): Promise<boolean> {
+  try {
+    await navigator.clipboard.writeText(text)
+    return true
+  } catch {
+    try {
+      const area = document.createElement('textarea')
+      area.value = text
+      area.style.position = 'fixed'
+      area.style.left = '-9999px'
+      document.body.appendChild(area)
+      area.select()
+      const ok = document.execCommand('copy')
+      document.body.removeChild(area)
+      return ok
+    } catch {
+      return false
+    }
+  }
+}
+
+const CopyButton = ({ text, compact = false }: { text: string; compact?: boolean }) => {
+  const [state, setState] = useState<'idle' | 'copied' | 'failed'>('idle')
+  const timer = useRef<number | undefined>(undefined)
+
+  useEffect(() => () => window.clearTimeout(timer.current), [])
+
+  async function copy() {
+    setState((await copyText(text)) ? 'copied' : 'failed')
+    window.clearTimeout(timer.current)
+    timer.current = window.setTimeout(() => setState('idle'), 2000)
+  }
+
+  const visible = state === 'idle' ? 'Copy' : state === 'copied' ? 'Copied ✓' : 'Copy failed'
+  const classes = [
+    styles.copyBtn,
+    compact ? styles.compact : '',
+    state === 'copied' ? styles.copied : '',
+  ]
+    .filter(Boolean)
+    .join(' ')
+  return (
+    <>
+      <button
+        type="button"
+        className={classes}
+        onClick={copy}
+        aria-label={state === 'idle' ? `Copy ${text}` : visible.replace(' ✓', '')}
+      >
+        {visible}
+      </button>
+      {/* The label swap alone is silent to screen readers. */}
+      <span className={styles.srOnly} aria-live="polite">
+        {state === 'idle' ? '' : state === 'copied' ? 'Copied' : 'Copy failed'}
+      </span>
+    </>
+  )
+}
+
+export default CopyButton
diff --git a/src/apps/r3dr/components/RecentLinks.module.css b/src/apps/r3dr/components/RecentLinks.module.css
new file mode 100644
index 0000000..655c4e0
--- /dev/null
+++ b/src/apps/r3dr/components/RecentLinks.module.css
@@ -0,0 +1,106 @@
+.recent {
+  background: rgba(255, 255, 255, 0.78);
+  backdrop-filter: blur(18px);
+  -webkit-backdrop-filter: blur(18px);
+  border: 1px solid #d9e4d4;
+  border-radius: 18px;
+  padding: clamp(1rem, 3.5vw, 1.4rem);
+}
+
+.head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  margin-bottom: 0.6rem;
+}
+
+.head h2 {
+  margin: 0;
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: #5c6f63;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.ghostBtn {
+  background: none;
+  border: none;
+  color: #5c6f63;
+  font-family: inherit;
+  font-size: 0.8rem;
+  cursor: pointer;
+  padding: 0.2rem 0.4rem;
+}
+
+.ghostBtn:hover {
+  color: #1f5c39;
+}
+
+.ghostBtn:focus-visible {
+  outline: 2px solid #2e7d4f;
+  outline-offset: 2px;
+}
+
+.list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.6rem 0;
+}
+
+.row + .row {
+  border-top: 1px solid #d9e4d4;
+}
+
+.urls {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+}
+
+.urls a {
+  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
+  font-size: 0.9rem;
+  color: #1f5c39;
+  text-decoration: none;
+  overflow-wrap: anywhere;
+}
+
+.urls a:hover {
+  text-decoration: underline;
+}
+
+.urls a:focus-visible {
+  outline: 2px solid #2e7d4f;
+  outline-offset: 2px;
+}
+
+.target {
+  font-size: 0.8rem;
+  color: #5c6f63;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.expiry {
+  font-size: 0.75rem;
+  color: #5c6f63;
+}
+
+@media (max-width: 560px) {
+  .target {
+    max-width: 48vw;
+  }
+}
diff --git a/src/apps/r3dr/components/RecentLinks.tsx b/src/apps/r3dr/components/RecentLinks.tsx
new file mode 100644
index 0000000..19e2944
--- /dev/null
+++ b/src/apps/r3dr/components/RecentLinks.tsx
@@ -0,0 +1,44 @@
+import { shortLink, shortLinkLabel } from '../api'
+import { describeExpiry } from '../expiry'
+import type { RecentLink } from '../recent'
+import CopyButton from './CopyButton'
+import styles from './RecentLinks.module.css'
+
+const RecentLinks = ({ links, onClear }: { links: RecentLink[]; onClear: () => void }) => {
+  if (links.length === 0) return null
+  return (
+    <section className={styles.recent} aria-labelledby="recent-heading">
+      <div className={styles.head}>
+        <h2 id="recent-heading">Recent links</h2>
+        <button
+          type="button"
+          className={styles.ghostBtn}
+          onClick={onClear}
+          aria-label="Clear recent links"
+        >
+          Clear
+        </button>
+      </div>
+      <ul className={styles.list}>
+        {links.map(link => (
+          <li key={link.slug} className={styles.row}>
+            <div className={styles.urls}>
+              <a href={shortLink(link.slug)} target="_blank" rel="noreferrer">
+                {shortLinkLabel(link.slug)}
+              </a>
+              <span className={styles.target} title={link.longUrl}>
+                {link.longUrl}
+              </span>
+              <span className={styles.expiry}>
+                expires {describeExpiry(link.expiresAt - Date.now())}
+              </span>
+            </div>
+            <CopyButton text={shortLink(link.slug)} compact />
+          </li>
+        ))}
+      </ul>
+    </section>
+  )
+}
+
+export default RecentLinks
diff --git a/src/apps/r3dr/components/ShortenCard.module.css b/src/apps/r3dr/components/ShortenCard.module.css
new file mode 100644
index 0000000..8b663fe
--- /dev/null
+++ b/src/apps/r3dr/components/ShortenCard.module.css
@@ -0,0 +1,240 @@
+.card {
+  background: rgba(255, 255, 255, 0.78);
+  backdrop-filter: blur(18px);
+  -webkit-backdrop-filter: blur(18px);
+  border: 1px solid #d9e4d4;
+  border-radius: 18px;
+  padding: clamp(1.1rem, 4vw, 1.75rem);
+  box-shadow:
+    0 16px 36px rgba(47, 72, 55, 0.1),
+    0 2px 8px rgba(47, 72, 55, 0.06),
+    inset 0 1px 0 rgba(255, 255, 255, 0.85);
+}
+
+.fieldLabel {
+  display: block;
+  margin-bottom: 0.45rem;
+  color: #5c6f63;
+  font-size: 0.85rem;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+}
+
+.fieldRow {
+  display: flex;
+  gap: 0.6rem;
+}
+
+.fieldRow input {
+  flex: 1;
+  min-width: 0;
+  padding: 0.8rem 0.95rem;
+  background: #ffffff;
+  border: 1px solid #c2d4bd;
+  border-radius: 10px;
+  color: #2c3a31;
+  font-family: inherit;
+  font-size: 1rem;
+  transition: border-color 160ms ease, box-shadow 160ms ease;
+}
+
+.fieldRow input::placeholder {
+  color: #6f8174;
+}
+
+.fieldRow input:focus {
+  outline: none;
+  border-color: #2e7d4f;
+  box-shadow: 0 0 0 3px rgba(46, 125, 79, 0.13);
+}
+
+.submitBtn {
+  padding: 0.8rem 1.35rem;
+  /* White on green: both stops hold 4.5:1 for the 16px/600 label. */
+  background: linear-gradient(135deg, #338457 0%, #2a7148 100%);
+  color: #fff;
+  border: none;
+  border-radius: 10px;
+  font-family: inherit;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
+}
+
+.submitBtn:hover:not([aria-busy='true']) {
+  filter: brightness(1.05);
+  transform: translateY(-1px);
+  box-shadow: 0 6px 18px rgba(46, 125, 79, 0.32);
+}
+
+.submitBtn:active:not([aria-busy='true']) {
+  transform: translateY(0);
+  box-shadow: none;
+}
+
+/* Busy, not disabled: disabling would blur keyboard focus. */
+.submitBtn[aria-busy='true'] {
+  opacity: 0.75;
+  cursor: progress;
+}
+
+.submitBtn:focus-visible {
+  outline: 2px solid #2e7d4f;
+  outline-offset: 2px;
+}
+
+.expiry {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.45rem;
+  margin-top: 0.9rem;
+}
+
+.expiryLabel {
+  color: #5c6f63;
+  font-size: 0.85rem;
+  margin-right: 0.15rem;
+}
+
+.chip {
+  padding: 0.35rem 0.85rem;
+  background: rgba(255, 255, 255, 0.6);
+  border: 1px solid #c2d4bd;
+  border-radius: 999px;
+  color: #5c6f63;
+  font-family: inherit;
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
+}
+
+.chip:hover {
+  border-color: #2e7d4f;
+  color: #1f5c39;
+}
+
+.chip:focus-visible {
+  outline: 2px solid #2e7d4f;
+  outline-offset: 2px;
+}
+
+.chipOn {
+  background: rgba(46, 125, 79, 0.13);
+  border-color: #2e7d4f;
+  color: #1f5c39;
+  font-weight: 600;
+}
+
+.errorMessage {
+  margin: 1rem 0 0;
+  padding: 0.7rem 0.95rem;
+  border-radius: 10px;
+  font-size: 0.9rem;
+  background: rgba(192, 80, 77, 0.08);
+  border: 1px solid rgba(192, 80, 77, 0.28);
+  color: #a13f3c;
+}
+
+/* An empty, always-mounted live region: zero footprint until it fills. */
+.liveSlot {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  min-height: 0;
+}
+
+.result {
+  margin-top: 1.1rem;
+  padding: 0.95rem 1rem;
+  background: rgba(46, 125, 79, 0.07);
+  border: 1px solid rgba(46, 125, 79, 0.25);
+  border-radius: 10px;
+  animation: rise 240ms ease;
+}
+
+@keyframes rise {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.resultRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.resultLink {
+  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
+  font-size: 1rem;
+  font-weight: 600;
+  color: #2e7d4f;
+  text-decoration: none;
+  overflow-wrap: anywhere;
+}
+
+.resultLink:hover {
+  text-decoration: underline;
+}
+
+.resultLink:focus-visible {
+  outline: 2px solid #2e7d4f;
+  outline-offset: 2px;
+}
+
+.resultNote {
+  margin: 0.45rem 0 0;
+  font-size: 0.8rem;
+  color: #5c6f63;
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 0.25rem;
+}
+
+.resultTarget {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@media (max-width: 560px) {
+  .fieldRow {
+    flex-direction: column;
+  }
+
+  .submitBtn {
+    width: 100%;
+    padding: 0.85rem 1rem;
+  }
+
+  .resultRow {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .resultRow button {
+    width: 100%;
+    padding: 0.6rem;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .result {
+    animation: none;
+  }
+
+  .submitBtn,
+  .chip {
+    transition: none;
+  }
+}
diff --git a/src/apps/r3dr/components/ShortenCard.tsx b/src/apps/r3dr/components/ShortenCard.tsx
new file mode 100644
index 0000000..7f77498
--- /dev/null
+++ b/src/apps/r3dr/components/ShortenCard.tsx
@@ -0,0 +1,118 @@
+import { useState } from 'react'
+import { shorten, shortLink, shortLinkLabel } from '../api'
+import { DEFAULT_EXPIRY, describeExpiry, EXPIRY_OPTIONS, type ExpiryOption } from '../expiry'
+import type { RecentLink } from '../recent'
+import { normalizeUrl, validateUrl } from '../urlInput'
+import CopyButton from './CopyButton'
+import styles from './ShortenCard.module.css'
+
+const ShortenCard = ({ onMinted }: { onMinted: (link: RecentLink) => void }) => {
+  const [input, setInput] = useState('')
+  const [expiry, setExpiry] = useState<ExpiryOption>(DEFAULT_EXPIRY)
+  const [pending, setPending] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [minted, setMinted] = useState<RecentLink | null>(null)
+
+  async function handleSubmit(event: React.FormEvent) {
+    event.preventDefault()
+    if (pending) return
+    const submitted = input
+    const longUrl = normalizeUrl(submitted)
+    const problem = validateUrl(longUrl)
+    if (problem) {
+      setError(problem)
+      setMinted(null)
+      return
+    }
+    setPending(true)
+    setError(null)
+    const expiresAt = Date.now() + expiry.ms
+    try {
+      const { slug } = await shorten(longUrl, expiresAt)
+      const link = { slug, longUrl, expiresAt }
+      setMinted(link)
+      // Keep anything typed while the request was in flight.
+      setInput(current => (current === submitted ? '' : current))
+      onMinted(link)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Something went wrong')
+      setMinted(null)
+    } finally {
+      setPending(false)
+    }
+  }
+
+  return (
+    <section className={styles.card}>
+      <form onSubmit={handleSubmit} noValidate>
+        <label className={styles.fieldLabel} htmlFor="long-url">
+          Long link
+        </label>
+        <div className={styles.fieldRow}>
+          <input
+            id="long-url"
+            type="url"
+            inputMode="url"
+            autoComplete="off"
+            spellCheck={false}
+            placeholder="https://example.com/somewhere/very/deep"
+            value={input}
+            onChange={event => setInput(event.target.value)}
+          />
+          {/* Never disabled: disabling the focused button dumps keyboard
+              focus on <body>. Re-entry is guarded in handleSubmit. */}
+          <button type="submit" className={styles.submitBtn} aria-busy={pending}>
+            {pending ? 'Shortening…' : 'Shorten'}
+          </button>
+        </div>
+
+        <div className={styles.expiry} role="group" aria-labelledby="expiry-label">
+          <span className={styles.expiryLabel} id="expiry-label">
+            Expires after
+          </span>
+          {EXPIRY_OPTIONS.map(option => (
+            <button
+              key={option.label}
+              type="button"
+              aria-pressed={option === expiry}
+              className={option === expiry ? `${styles.chip} ${styles.chipOn}` : styles.chip}
+              onClick={() => setExpiry(option)}
+            >
+              {option.label}
+            </button>
+          ))}
+        </div>
+      </form>
+
+      {/* Live regions stay mounted; a region injected together with its
+          content is unreliably announced. */}
+      <p className={error ? styles.errorMessage : styles.liveSlot} role="alert">
+        {error}
+      </p>
+
+      <div className={minted ? styles.result : styles.liveSlot} role="status">
+        {minted && (
+          <>
+            <div className={styles.resultRow}>
+              <a
+                className={styles.resultLink}
+                href={shortLink(minted.slug)}
+                target="_blank"
+                rel="noreferrer"
+              >
+                {shortLinkLabel(minted.slug)}
+              </a>
+              <CopyButton text={shortLink(minted.slug)} />
+            </div>
+            <p className={styles.resultNote}>
+              <span className={styles.resultTarget}>{minted.longUrl}</span>
+              <span>· expires {describeExpiry(minted.expiresAt - Date.now())}</span>
+            </p>
+          </>
+        )}
+      </div>
+    </section>
+  )
+}
+
+export default ShortenCard
diff --git a/src/apps/r3dr/expiry.ts b/src/apps/r3dr/expiry.ts
new file mode 100644
index 0000000..3ba381d
--- /dev/null
+++ b/src/apps/r3dr/expiry.ts
@@ -0,0 +1,33 @@
+// The API requires expiresAt (epoch millis), future, ceiling 30 days.
+export interface ExpiryOption {
+  label: string
+  ms: number
+}
+
+const MINUTE = 60 * 1000
+const HOUR = 60 * MINUTE
+const DAY = 24 * HOUR
+
+export const EXPIRY_OPTIONS: ExpiryOption[] = [
+  { label: '1 hour', ms: HOUR },
+  { label: '1 day', ms: DAY },
+  { label: '7 days', ms: 7 * DAY },
+  // Five minutes under the exact ceiling: the server checks against its own
+  // clock, and a client running seconds fast must not turn this button into
+  // a guaranteed 400.
+  { label: '30 days', ms: 30 * DAY - 5 * MINUTE },
+]
+
+// v1 hardcoded 7 days; keep it as the default.
+export const DEFAULT_EXPIRY = EXPIRY_OPTIONS[2]
+
+/** "in 7 days" / "in 3 hours" / "in 20 minutes" — for expiry notes. */
+export function describeExpiry(deltaMs: number): string {
+  if (deltaMs <= 0) return 'expired'
+  const minutes = Math.round(deltaMs / MINUTE)
+  if (minutes < 60) return `in ${minutes} minute${minutes === 1 ? '' : 's'}`
+  const hours = Math.round(deltaMs / HOUR)
+  if (hours < 48) return `in ${hours} hour${hours === 1 ? '' : 's'}`
+  const days = Math.round(deltaMs / DAY)
+  return `in ${days} days`
+}
diff --git a/src/apps/r3dr/pages/R3drPage.module.css b/src/apps/r3dr/pages/R3drPage.module.css
new file mode 100644
index 0000000..2cffc0d
--- /dev/null
+++ b/src/apps/r3dr/pages/R3drPage.module.css
@@ -0,0 +1,79 @@
+/* Springtime meadow — the look r3dr wears within the site's per-app
+   palette convention. */
+.container {
+  min-height: 100vh;
+  min-height: 100dvh;
+  background: linear-gradient(150deg, #f9fbf5 0%, #eef5ea 55%, #e6f2ec 100%);
+  background-attachment: fixed;
+  color: #2c3a31;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 60px 1rem clamp(1rem, 4vw, 2.5rem);
+  position: relative;
+}
+
+/* Soft blossom and leaf glows in the corners — spring light, not neon. */
+.container::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background:
+    radial-gradient(circle at 18% 82%, rgba(224, 122, 164, 0.14) 0%, transparent 45%),
+    radial-gradient(circle at 82% 18%, rgba(94, 183, 124, 0.16) 0%, transparent 45%);
+  pointer-events: none;
+}
+
+.header {
+  text-align: center;
+  margin: clamp(1.5rem, 7vh, 4rem) 0 2rem;
+  position: relative;
+}
+
+.wordmark {
+  margin: 0;
+  font-size: clamp(3rem, 10vw, 4.5rem);
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  line-height: 1.1;
+  /* Leaf gradient; blending green into pink muddies, so the blossom gets
+     one glyph to itself instead. */
+  background: linear-gradient(135deg, #27824b 0%, #3f9e61 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+}
+
+.blossom {
+  background: linear-gradient(135deg, #c9548a 0%, #d66b98 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+}
+
+.tagline {
+  margin: 0.5rem auto 0;
+  max-width: 26rem;
+  color: #5c6f63;
+  font-size: 1rem;
+}
+
+.content {
+  width: 100%;
+  max-width: 34rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  position: relative;
+}
+
+.footer {
+  margin-top: auto;
+  padding-top: 2.5rem;
+  color: #5c6f63;
+  font-size: 0.8rem;
+  text-align: center;
+  position: relative;
+}
diff --git a/src/apps/r3dr/pages/R3drPage.tsx b/src/apps/r3dr/pages/R3drPage.tsx
new file mode 100644
index 0000000..3260b8d
--- /dev/null
+++ b/src/apps/r3dr/pages/R3drPage.tsx
@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react'
+import Navigation from '@/shared/components/Navigation'
+import NavTagline from '@/shared/components/nav/NavTagline'
+import ShortenCard from '../components/ShortenCard'
+import RecentLinks from '../components/RecentLinks'
+import { addRecent, clearRecent, loadRecent, type RecentLink } from '../recent'
+import styles from './R3drPage.module.css'
+
+const R3drPage = () => {
+  const [recent, setRecent] = useState<RecentLink[]>(() => loadRecent(Date.now()))
+
+  // Re-render each minute so "expires in …" stays true in a tab left open,
+  // and dead links drop out. In-memory prune, not a storage reload — the
+  // list must survive when storage doesn't.
+  useEffect(() => {
+    const id = window.setInterval(
+      () => setRecent(prev => prev.filter(link => link.expiresAt > Date.now())),
+      60_000
+    )
+    return () => window.clearInterval(id)
+  }, [])
+
+  return (
+    <div className={styles.container}>
+      <Navigation appName="r3dr" context={<NavTagline text="URL Shortener" />} />
+      <header className={styles.header}>
+        <h1 className={styles.wordmark}>
+          r<span className={styles.blossom}>3</span>dr
+        </h1>
+        <p className={styles.tagline}>
+          Shorten a link. Share it anywhere. It expires on your schedule.
+        </p>
+      </header>
+      <main className={styles.content}>
+        <ShortenCard onMinted={link => setRecent(prev => addRecent(prev, link))} />
+        <RecentLinks
+          links={recent}
+          onClear={() => {
+            clearRecent()
+            setRecent([])
+          }}
+        />
+      </main>
+      <footer className={styles.footer}>Links always expire — 30 days max.</footer>
+    </div>
+  )
+}
+
+export default R3drPage
diff --git a/src/apps/r3dr/recent.ts b/src/apps/r3dr/recent.ts
new file mode 100644
index 0000000..ab59693
--- /dev/null
+++ b/src/apps/r3dr/recent.ts
@@ -0,0 +1,58 @@
+// Recent links live only in this browser: the API has no list endpoint, and
+// a shortener doesn't need accounts to be useful. localStorage can throw
+// (private windows, blocked storage) — every touch is wrapped, and the page
+// works identically with none.
+export interface RecentLink {
+  slug: string
+  longUrl: string
+  expiresAt: number
+}
+
+const KEY = 'r3dr.recent'
+const MAX = 5
+
+// Slugs are exactly 3, 6, or 11 base64url chars (the encoder's widths). A
+// hand-edited store must not render arbitrary text — or never-resolvable
+// lengths — into links.
+const SLUG_SHAPE = /^(?:[A-Za-z0-9_-]{3}|[A-Za-z0-9_-]{6}|[A-Za-z0-9_-]{11})$/
+
+export function loadRecent(now: number): RecentLink[] {
+  try {
+    const raw = localStorage.getItem(KEY)
+    if (!raw) return []
+    const parsed: unknown = JSON.parse(raw)
+    if (!Array.isArray(parsed)) return []
+    return parsed
+      .filter(
+        (entry): entry is RecentLink =>
+          entry !== null &&
+          typeof entry === 'object' &&
+          typeof (entry as RecentLink).slug === 'string' &&
+          typeof (entry as RecentLink).longUrl === 'string' &&
+          typeof (entry as RecentLink).expiresAt === 'number'
+      )
+      .filter(entry => SLUG_SHAPE.test(entry.slug) && entry.expiresAt > now)
+      .slice(0, MAX)
+  } catch {
+    return []
+  }
+}
+
+/** Newest first, deduped by slug, capped. Returns the list to render. */
+export function addRecent(links: RecentLink[], link: RecentLink): RecentLink[] {
+  const next = [link, ...links.filter(l => l.slug !== link.slug)].slice(0, MAX)
+  try {
+    localStorage.setItem(KEY, JSON.stringify(next))
+  } catch {
+    // storage unavailable; the in-memory list still renders
+  }
+  return next
+}
+
+export function clearRecent(): void {
+  try {
+    localStorage.removeItem(KEY)
+  } catch {
+    // nothing to clear
+  }
+}
diff --git a/src/apps/r3dr/urlInput.ts b/src/apps/r3dr/urlInput.ts
new file mode 100644
index 0000000..484adf5
--- /dev/null
+++ b/src/apps/r3dr/urlInput.ts
@@ -0,0 +1,24 @@
+// Bare domains are the common paste; give them the scheme the API requires.
+// Schemes are case-insensitive (the API's pattern is not), so an uppercased
+// http(s) is lowercased rather than bounced with a confusing message. Other
+// schemes pass through untouched and fail validation.
+export function normalizeUrl(input: string): string {
+  const trimmed = input.trim()
+  if (/^https?:\/\//i.test(trimmed)) {
+    return trimmed.replace(/^[^:]+/, scheme => scheme.toLowerCase())
+  }
+  if (trimmed === '' || /^[a-z][a-z0-9+.-]*:/i.test(trimmed)) return trimmed
+  return `https://${trimmed}`
+}
+
+// The API's traits (@length 11–1000, @pattern ^https?://), mirrored for
+// instant feedback. Lengths count code points, like the server does. The
+// server still enforces them.
+export function validateUrl(url: string): string | null {
+  if (url === '') return 'Paste a link first.'
+  if (!/^https?:\/\//.test(url)) return 'Links must start with http:// or https://.'
+  const length = [...url].length
+  if (length < 11) return 'That URL looks too short.'
+  if (length > 1000) return 'URLs top out at 1000 characters.'
+  return null
+}
diff --git a/src/shared/components/Navigation.tsx b/src/shared/components/Navigation.tsx
index 8c13092..a39089d 100644
--- a/src/shared/components/Navigation.tsx
+++ b/src/shared/components/Navigation.tsx
@@ -36,6 +36,7 @@ const MENU: MenuGroup[] = [
       { label: 'Posterize', to: '/posterize' },
       { label: 'Metrics', to: '/metrics' },
       { label: 'Wordchains', to: '/wordchains' },
+      { label: 'r3dr', to: '/r3dr', description: 'URL shortener' },
     ],
   },
   {
@@ -52,7 +53,6 @@ const MENU: MenuGroup[] = [
     name: 'elsewhere',
     label: 'Elsewhere',
     links: [
-      { label: 'r3dr', to: 'https://r3dr.net', external: true, description: 'URL shortener' },
       { label: 'Snowbonk', to: 'https://snowbonk.com', external: true, description: 'N-body simulation viewer' },
       { label: '1d4', to: 'https://1d4.net', external: true, description: 'Chess game indexer' },
       { label: 'HoverCrap', to: 'https://hovercrap.com', external: true, description: 'ASCII hovercraft' },
diff --git a/src/shared/components/__tests__/Navigation.test.tsx b/src/shared/components/__tests__/Navigation.test.tsx
index f7d0b11..a3edddf 100644
--- a/src/shared/components/__tests__/Navigation.test.tsx
+++ b/src/shared/components/__tests__/Navigation.test.tsx
@@ -36,7 +36,6 @@ describe('Navigation', () => {
     if (!groupEl) throw new Error('Elsewhere nav group not found')
     const group = within(groupEl)
     const expected: Array<[RegExp, string, string]> = [
-      [/^r3dr\s?\(external site\)/, 'https://r3dr.net', 'URL shortener'],
       [/^Snowbonk\s?\(external site\)/, 'https://snowbonk.com', 'N-body simulation viewer'],
       [/^1d4\s?\(external site\)/, 'https://1d4.net', 'Chess game indexer'],
       [/^HoverCrap\s?\(external site\)/, 'https://hovercrap.com', 'ASCII hovercraft'],
@@ -55,6 +54,18 @@ describe('Navigation', () => {
     }
   })
 
+  // r3dr moved from Elsewhere to Projects when the page moved into this
+  // site (#1359 chunk 2): internal now, description intact.
+  it('links r3dr as an internal Projects page', () => {
+    renderWithRouter(<Navigation />)
+    const groupEl = testingScreen.getByText('Projects').closest('li')
+    if (!groupEl) throw new Error('Projects nav group not found')
+    const link = within(groupEl).getByRole('link', { name: /^r3dr/ })
+    expect(link.getAttribute('href')).toBe('/r3dr')
+    expect(link.textContent).not.toContain('(external site)')
+    expect(within(link).getByText('URL shortener')).toBeDefined()
+  })
+
   it('marks external links with a visible ↗ kept out of the accessible name', () => {
     renderWithRouter(<Navigation />)
     const external = testingScreen.getByRole('link', {