feat: SSE client primitive + hello page + CSS palette + component test (#22, #23) (#59)

Bundles two tickets that share the same frontend touch surface:

#22 — typed SSE client primitive (frontend/src/lib/api/client.ts)
  - Port frontend/src/lib/api/client.js from Teller, rewritten as TS:
    generic over the parsed event shape (`SseEvent` interface), POST + body
    + AbortSignal supported, CRLF normalisation, malformed-chunk recovery
    (warns, doesn't throw).
  - Add typed SseError with optional status; createSession() and
    sendMessage<TEvent>(...) exports.
  - SseError uses an explicit field declaration instead of a parameter
    property — tsconfig's `erasableSyntaxOnly: true` rejects the latter.

#23 — hello page + CSS palette + sample component test
  - Replace the Vite welcome screen with a real App.tsx that fetches
    /api/v1/health and renders `loading | ok | error` states with
    semantic ARIA roles + data-testids.
  - Port the Teller CSS-variable palette to frontend/src/styles/palette.css
    (light + dark via [data-theme='dark']); index.css imports it; App.css
    consumes the tokens (no raw hex).
  - Drop the Vite welcome assets (react.svg, vite.svg, hero.png,
    public/icons.svg).
  - frontend/src/App.test.tsx (Vitest + jsdom + Testing Library): mock
    fetch for the happy path (renders the ok badge with version) and the
    500 path (renders the error message).

Both PRs in one commit since the App page consumes the styles and lib
shape; landing them separately would mean a half-shipped page in between.

Closes #22
Closes #23

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: constk

frontend/public/icons.svg

@@ -1,182 +1,59 @@
-.counter {
-  font-size: 16px;
-  padding: 5px 10px;
-  border-radius: 5px;
-  color: var(--accent);
-  background: var(--accent-bg);
-  border: 2px solid transparent;
-  transition: border-color 0.3s;
-  margin-bottom: 24px;
-
-  &:hover {
-    border-color: var(--accent-border);
-  }
-  &:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 2px;
-  }
+.app {
+  max-width: 56rem;
+  margin: 0 auto;
+  padding: var(--space-2xl) var(--space-xl);
 }
 
-.hero {
-  position: relative;
-
-  .base,
-  .framework,
-  .vite {
-    inset-inline: 0;
-    margin: 0 auto;
-  }
-
-  .base {
-    width: 170px;
-    position: relative;
-    z-index: 0;
-  }
-
-  .framework,
-  .vite {
-    position: absolute;
-  }
-
-  .framework {
-    z-index: 1;
-    top: 34px;
-    height: 28px;
-    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg) scale(1.4);
-  }
-
-  .vite {
-    z-index: 0;
-    top: 107px;
-    height: 26px;
-    width: auto;
-    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg) scale(0.8);
-  }
+.app h1 {
+  margin: 0 0 var(--space-sm);
+  color: var(--text-primary);
 }
 
-#center {
-  display: flex;
-  flex-direction: column;
-  gap: 25px;
-  place-content: center;
-  place-items: center;
-  flex-grow: 1;
-
-  @media (max-width: 1024px) {
-    padding: 32px 20px 24px;
-    gap: 18px;
-  }
+.app .subtitle {
+  margin: 0 0 var(--space-2xl);
+  color: var(--text-secondary);
 }
 
-#next-steps {
-  display: flex;
-  border-top: 1px solid var(--border);
-  text-align: left;
-
-  & > div {
-    flex: 1 1 0;
-    padding: 32px;
-    @media (max-width: 1024px) {
-      padding: 24px 20px;
-    }
-  }
-
-  .icon {
-    margin-bottom: 16px;
-    width: 22px;
-    height: 22px;
-  }
-
-  @media (max-width: 1024px) {
-    flex-direction: column;
-    text-align: center;
-  }
+.health {
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+  padding: var(--space-lg) var(--space-xl);
+  background: var(--bg-secondary);
 }
 
-#docs {
-  border-right: 1px solid var(--border);
-
-  @media (max-width: 1024px) {
-    border-right: none;
-    border-bottom: 1px solid var(--border);
-  }
+.health h2 {
+  margin: 0 0 var(--space-md);
+  font-size: 1.05rem;
+  color: var(--text-secondary);
 }
 
-#next-steps ul {
-  list-style: none;
-  padding: 0;
-  display: flex;
-  gap: 8px;
-  margin: 32px 0 0;
-
-  .logo {
-    height: 18px;
-  }
-
-  a {
-    color: var(--text-h);
-    font-size: 16px;
-    border-radius: 6px;
-    background: var(--social-bg);
-    display: flex;
-    padding: 6px 12px;
-    align-items: center;
-    gap: 8px;
-    text-decoration: none;
-    transition: box-shadow 0.3s;
-
-    &:hover {
-      box-shadow: var(--shadow);
-    }
-    .button-icon {
-      height: 18px;
-      width: 18px;
-    }
-  }
-
-  @media (max-width: 1024px) {
-    margin-top: 20px;
-    flex-wrap: wrap;
-    justify-content: center;
-
-    li {
-      flex: 1 1 calc(50% - 8px);
-    }
-
-    a {
-      width: 100%;
-      justify-content: center;
-      box-sizing: border-box;
-    }
-  }
+.health p {
+  margin: 0;
 }
 
-#spacer {
-  height: 88px;
-  border-top: 1px solid var(--border);
-  @media (max-width: 1024px) {
-    height: 48px;
-  }
+.badge {
+  display: inline-block;
+  padding: var(--space-xs) var(--space-md);
+  border-radius: var(--radius-sm);
+  font-size: 0.85rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
 }
 
-.ticks {
-  position: relative;
-  width: 100%;
+.badge--ok {
+  background: var(--accent-success);
+  color: var(--bg-primary);
+}
 
-  &::before,
-  &::after {
-    content: '';
-    position: absolute;
-    top: -4.5px;
-    border: 5px solid transparent;
-  }
+.badge--error {
+  background: var(--accent-error);
+  color: var(--bg-primary);
+}
 
-  &::before {
-    left: 0;
-    border-left-color: var(--border);
-  }
-  &::after {
-    right: 0;
-    border-right-color: var(--border);
-  }
+code {
+  background: var(--bg-tertiary);
+  padding: 0 var(--space-xs);
+  border-radius: var(--radius-sm);
+  font-size: 0.95em;
 }

frontend/src/App.css

@@ -0,0 +1,49 @@
+import { describe, expect, it, beforeEach, afterEach, vi } from 'vitest'
+import { render, screen, waitFor } from '@testing-library/react'
+import App from './App'
+
+describe('App health probe', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks()
+  })
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('renders the loading state, then the health badge once /api/v1/health resolves', async () => {
+    const fetchSpy = vi.spyOn(globalThis, 'fetch').mockResolvedValueOnce({
+      ok: true,
+      status: 200,
+      json: async () => ({ status: 'ok', version: '0.1.0' }),
+    } as Response)
+
+    render(<App />)
+
+    expect(screen.getByRole('status')).toHaveTextContent(/Checking/i)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('health-ok')).toBeInTheDocument()
+    })
+    expect(screen.getByTestId('health-ok')).toHaveTextContent(/ok/i)
+    expect(screen.getByTestId('health-ok')).toHaveTextContent(/v0\.1\.0/)
+    expect(fetchSpy).toHaveBeenCalledWith(
+      '/api/v1/health',
+      expect.objectContaining({ signal: expect.any(AbortSignal) })
+    )
+  })
+
+  it('renders the error state when /api/v1/health 500s', async () => {
+    vi.spyOn(globalThis, 'fetch').mockResolvedValueOnce({
+      ok: false,
+      status: 500,
+      json: async () => ({}),
+    } as Response)
+
+    render(<App />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('health-error')).toBeInTheDocument()
+    })
+    expect(screen.getByTestId('health-error')).toHaveTextContent(/HTTP 500/)
+  })
+})