r3dr: URL shortener page under Projects

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",

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 />} />

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')
+  })
+})

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()
+  })
+})