Refresh the viewer shell with Stitch redesign

.factory/settings.json

@@ -0,0 +1,5 @@
+{
+  "enabledPlugins": {
+    "core@factory-plugins": true
+  }
+}

.gitignore

@@ -140,3 +140,13 @@ test-results/
 .pnp.*
 .cursor/*
 /.junie
+
+# macOS
+.DS_Store
+
+# Design references & screenshots
+Stitch/
+final-light*.png
+
+# Playwright MCP snapshots
+.playwright-mcp/

.impeccable.md

@@ -0,0 +1,72 @@
+# agent-render Design Context
+
+## Users
+Developers and AI agents sharing structured artifacts (markdown, code, diffs, CSV, JSON) via static links. Users arrive from chat surfaces, CI pipelines, or direct links. They need to immediately understand a payload without uploading it anywhere. Context is technical but the experience should feel curated, not utilitarian.
+
+## Brand Personality
+**Precise. Editorial. Atmospheric.**
+
+The interface should feel like opening a well-typeset technical document in a reading room — not like loading another SaaS dashboard. It takes technical content seriously enough to present it beautifully.
+
+## Aesthetic Direction
+- **Visual tone**: Brutalist precision meets editorial warmth. Sharp architecture, generous whitespace, atmospheric color.
+- **Light mode**: Warm ivory canvas (`#faf8f4`), sunset orange accent (`#cc6633`), muted lavender secondary (`#8b5ca8`). Ghost borders. Fraunces serif for display, IBM Plex Sans for body, IBM Plex Mono for machine labels.
+- **Dark mode**: Deep dusk canvas (`#0e0b14`) — purple-black, not gray-black. Ember orange accent (`#e08c50`), soft lavender secondary (`#b08ed0`). Zero border-radius. Visible 40px terminal grid overlay.
+- **References**: Brass Hands (operational language, brutalist minimalism), Factory.ai (dark-first, orange accents, generous space, premium micro-interactions)
+- **Anti-references**: Generic SaaS dashboards, Shadcn default look, anything with large border-radius pills or blue link colors
+
+## Design Principles
+
+### 1. Ghost borders, not lines
+Borders are a failure of hierarchy. Separation comes from tonal background shifts and whitespace. When a border must exist, it's a ghost: warm taupe at 14% opacity (light) or twilight violet at 16% (dark). Never a solid 1px line.
+
+### 2. Orange is a laser, not a paint bucket
+The accent color is reserved for critical actions, active states, and status indicators. It should feel like a precise highlight on a technical document, not a brand color flooding the interface.
+
+### 3. Sharp corners are architectural
+Light mode: 2px radius. Dark mode: 0px radius. No pills, no large rounded corners. The interface is built, not inflated.
+
+### 4. Typography has three voices
+Display (Fraunces serif) speaks with editorial authority. Body (IBM Plex Sans) is the clear, readable workhorse. Mono (IBM Plex Mono) is the machine — metadata, timestamps, protocol labels. Each has a distinct role; mixing them creates the tension between human curation and technical precision.
+
+### 5. Shadows are atmospheric, never mechanical
+Shadows are tinted with the surface color and heavily diffused. Light mode: 3-7% opacity, barely there. Dark mode: 25-50% opacity, creating depth in the void. Never use pure black drop shadows.
+
+### 6. Full-bleed sections, not floating cards
+The landing page uses full-width editorial sections separated by ghost border-bottoms and generous vertical padding (80-128px). The bento grid uses 1px gaps filled with border color for tonal separation. Content breathes.
+
+### 7. Active states are tactile
+All buttons use `active:scale-95` for press feedback. Hover transitions are slow and deliberate (500ms for background, 280ms for transforms). The interface responds to touch like a physical object.
+
+## Color Tokens
+
+### Light
+| Token | Value | Role |
+|-------|-------|------|
+| `--page-bg` | `#faf8f4` | Canvas |
+| `--text-primary` | `#2a2028` | Headings, body |
+| `--text-muted` | `#6b5e68` | Secondary text |
+| `--text-soft` | `#8a7e86` | Tertiary, labels |
+| `--accent` | `#cc6633` | Primary actions, highlights |
+| `--accent-secondary` | `#8b5ca8` | Links, blockquote accents |
+| `--border` | `rgba(160,140,130,0.14)` | Ghost borders |
+| `--surface-code` | `#1e1a22` | Code block backgrounds |
+
+### Dark
+| Token | Value | Role |
+|-------|-------|------|
+| `--page-bg` | `#0e0b14` | Canvas (deep dusk) |
+| `--text-primary` | `#ece6f0` | Headings, body |
+| `--text-muted` | `#b8afc2` | Secondary text |
+| `--text-soft` | `#8a7e96` | Tertiary, labels |
+| `--accent` | `#e08c50` | Primary actions, highlights |
+| `--accent-secondary` | `#b08ed0` | Links, blockquote accents |
+| `--border` | `rgba(100,80,120,0.16)` | Ghost borders |
+| `--surface-code` | `rgba(10,8,16,0.98)` | Code block backgrounds |
+
+## Tech Stack
+- Next.js 15 (static export), React 19, TypeScript
+- Tailwind CSS v4 with CSS custom properties (no tailwind.config)
+- `next-themes` for class-based light/dark switching
+- Fraunces + IBM Plex Sans + IBM Plex Mono (Google Fonts via next/font)
+- CodeMirror 6 for code rendering, git-diff-view for diffs

AGENTS.md

@@ -85,7 +85,7 @@ Current rules:
 - fragment key: `agent-render`
 - format: `v1.<codec>.<payload>` for `plain|lz|deflate`, and `v1.arx.<dictVersion>.<payload>` for `arx`
 - codecs: `plain`, `lz`, `deflate`, and `arx`
-- fragment size budget: `8000` characters
+- fragment size budget: `8192` characters
 - decoded payload budget: `200000` characters
 - packed wire transport (`p: 1`) is allowed and must decode back to the standard envelope
 - bundles must contain at least one artifact

docs/payload-format.md

@@ -77,7 +77,7 @@ Packed key map:
 
 ## Limits
 
-- Supported fragment budget: 8,000 characters
+- Supported fragment budget: 8,192 characters
 - Supported decoded payload budget: 200,000 characters
 - Larger payloads should fail with a clear error before rendering
 - Compression is selected automatically by shortest fragment across packed/non-packed candidates
@@ -102,7 +102,7 @@ Running `npm run codec:poc` (single markdown artifact containing `AGENTS.md`) cu
 
 Result: `arx` with baseBMP encoding achieves ~69% smaller fragments than `deflate` on this payload (~6.1x compression ratio). The improvement comes from brotli compression (~20% better than deflate), baseBMP encoding (~15.92 bits/char using ~62k safe BMP code points), and domain dictionary substitution. **base64url** is an ASCII-only option that can beat base76 on surfaces that percent-encode Unicode (chat apps, some shorteners). Base1k, baseBMP, and base76 remain available; auto-selection compares estimated transport length.
 
-Timing (AGENTS.md 8000 chars, avg of 10 runs):
+Timing (AGENTS.md 8192 chars, avg of 10 runs):
 - `deflate+base64url`: ~0.1ms
 - `arx+base76`: ~13.8ms
 - `arx+base64url`: ~8.1ms

skills/agent-render-linking/SKILL.md

@@ -201,7 +201,7 @@ If the dictionary fetch fails, fall back to `deflate` codec.
 ## Practical limits
 
 Respect these limits:
-- target fragment budget: about 8,000 characters
+- target fragment budget: about 8,192 characters
 - target decoded payload budget: about 200,000 characters
 - strict Discord practical budget for linked text workflows: about 1,500 characters