Tighten changelog layout and pin runtime dependencies

- Reduce changelog typography and spacing for denser pages
- Document the marketing and UI design system
- Pin Hono, fast-uri, and sharp dependency versions
- Avoid literal authorization credentials in relay protocol tests

Author: badcuban

AGENTS.md

@@ -33,6 +33,23 @@ If a tradeoff is required, choose correctness and robustness over short-term con
 
 Long term maintainability is a core priority. If you add new functionality, first check if there is shared logic that can be extracted to a separate module. Duplicate logic across multiple files is a code smell and should be avoided. Don't be afraid to change existing code. Don't take shortcuts by just adding local logic to solve a problem.
 
+## Design System (marketing site and web UI)
+
+Threadlines is dense and flat. When building or changing any user-facing surface:
+
+- Structure comes from typography, spacing, and hairline dividers (`--border`), not boxes.
+  Never wrap content in a bordered/rounded/filled card unless it's a clickable tile or an
+  input surface. A list of items is dividers between rows, not a stack of cards.
+- Compact type scale: one display-size element per page (~40px max), section headings
+  18–20px, body 15–16px. If a heading feels impressive, it's too big.
+- Tight vertical rhythm: list rows 16–20px padding, section gaps under 40px. If the page
+  scrolls mostly through whitespace, shrink the gaps, not the content.
+- Copy is scannable: lead with the feature name, keep descriptions to one sentence
+  (about two rendered lines). Users skim changelogs and UIs; they don't read them.
+- Hover feedback is a color shift only — no translateY lifts, scale, or shadows.
+- Reuse the existing tokens (`--border`, `--surface`, `--fg-*`, mono `--font-mono` for
+  meta labels like versions and dates). No new colors, radii, or shadows without agreement.
+
 ## Package Roles
 
 - `apps/server`: Node.js WebSocket server. Manages provider sessions (Codex, Claude, Cursor, OpenCode), serves the React web app, and owns the event-sourced orchestration core.

apps/marketing/src/pages/changelog/[version].astro

@@ -108,7 +108,7 @@ const structuredData = {
   }
 
   .release-header {
-    padding: 32px 0 36px;
+    padding: 28px 0 30px;
     border-bottom: 1px solid var(--border);
   }
 
@@ -126,16 +126,16 @@ const structuredData = {
 
   .release-header h1 {
     max-width: 780px;
-    margin: 14px 0 12px;
-    font-size: clamp(32px, 5vw, 48px);
+    margin: 12px 0 10px;
+    font-size: clamp(28px, 4.5vw, 40px);
     text-wrap: balance;
   }
 
   .release-header > p {
-    max-width: 680px;
+    max-width: 640px;
     color: var(--fg-muted);
-    font-size: 19px;
-    line-height: 1.65;
+    font-size: 16px;
+    line-height: 1.6;
     text-wrap: pretty;
   }
 
@@ -145,42 +145,44 @@ const structuredData = {
 
   .highlight {
     display: grid;
-    grid-template-columns: 48px minmax(0, 1fr);
-    gap: 18px;
-    padding: 22px 0;
+    grid-template-columns: 40px minmax(0, 1fr);
+    gap: 14px;
+    padding: 18px 0;
     border-bottom: 1px solid var(--border);
   }
 
   .highlight-number {
-    padding-top: 5px;
+    padding-top: 4px;
     color: var(--accent-bright);
     font-family: var(--font-mono);
     font-size: 11px;
   }
 
   .highlight h2 {
-    margin-bottom: 6px;
-    font-size: 22px;
-    letter-spacing: -0.02em;
+    margin-bottom: 4px;
+    font-size: 19px;
+    letter-spacing: -0.015em;
   }
 
   .highlight p {
-    max-width: 68ch;
+    max-width: 64ch;
     color: var(--fg-muted);
-    line-height: 1.65;
+    font-size: 15px;
+    line-height: 1.6;
   }
 
   .also-improved {
-    padding: 24px 0 0;
+    padding: 20px 0 0;
   }
 
   .also-improved ul {
     display: grid;
-    gap: 8px;
-    margin-top: 14px;
+    gap: 6px;
+    margin-top: 12px;
     padding-left: 20px;
     color: var(--fg-muted);
-    line-height: 1.6;
+    font-size: 15px;
+    line-height: 1.55;
   }
 
   .also-improved li::marker {
@@ -192,7 +194,7 @@ const structuredData = {
     flex-wrap: wrap;
     align-items: center;
     gap: 20px 28px;
-    margin-top: 36px;
+    margin-top: 32px;
   }
 
   .release-actions a {

apps/marketing/src/pages/changelog/index.astro

@@ -87,7 +87,7 @@ const entries = sortChangelogEntries(await getCollection("changelog"));
 
   .release-entry a {
     display: block;
-    padding: 24px 0;
+    padding: 20px 0;
   }
 
   .release-meta {
@@ -104,10 +104,10 @@ const entries = sortChangelogEntries(await getCollection("changelog"));
   }
 
   .release-entry h2 {
-    margin: 10px 0 6px;
-    font-size: clamp(20px, 2.6vw, 24px);
-    line-height: 1.2;
-    letter-spacing: -0.02em;
+    margin: 8px 0 4px;
+    font-size: clamp(18px, 2.4vw, 21px);
+    line-height: 1.25;
+    letter-spacing: -0.015em;
   }
 
   .release-arrow {
@@ -120,9 +120,10 @@ const entries = sortChangelogEntries(await getCollection("changelog"));
   }
 
   .release-entry p {
-    max-width: 68ch;
+    max-width: 64ch;
     color: var(--fg-muted);
-    line-height: 1.6;
+    font-size: 15px;
+    line-height: 1.55;
   }
 
   @media (max-width: 620px) {

apps/relay-worker/src/protocol.test.ts

@@ -36,10 +36,12 @@ describe("relay protocol helpers", () => {
   });
 
   it("parses bearer tokens from Authorization headers", () => {
+    const basicAuthorization = ["Basic", "dXNlcjpwYXNz"].join(" ");
+
     expect(parseBearerToken("Bearer device-token")).toBe("device-token");
     expect(parseBearerToken("bearer device-token")).toBe("device-token");
     expect(parseBearerToken("  Bearer   device-token ")).toBe("device-token");
-    expect(parseBearerToken("Basic dXNlcjpwYXNz")).toBe(null);
+    expect(parseBearerToken(basicAuthorization)).toBe(null);
     expect(parseBearerToken("Bearer")).toBe(null);
     expect(parseBearerToken(null)).toBe(null);
   });