Refresh the viewer shell with Stitch redesign

.factory/settings.json

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

.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

.playwright-mcp/page-2026-04-01T07-25-29-779Z.yml

@@ -0,0 +1,129 @@
+- generic [active] [ref=e1]:
+  - main [ref=e2]:
+    - generic [ref=e3]:
+      - generic [ref=e4]:
+        - link "Go to homepage" [ref=e5] [cursor=pointer]:
+          - /url: "#"
+          - heading "Agent Render" [level=1] [ref=e7]
+        - generic [ref=e8]:
+          - generic [ref=e9]: "[STATUS: READY]"
+          - button "Switch to light theme" [ref=e332]:
+            - img [ref=e333]
+            - generic [ref=e13]: Light mode
+      - generic [ref=e14]:
+        - generic [ref=e15]:
+          - generic [ref=e16]:
+            - generic [ref=e17]:
+              - paragraph [ref=e18]: Artifact bundle
+              - generic [ref=e339]:
+                - heading "Maintainer kickoff" [level=2] [ref=e340]
+                - generic [ref=e341]: 1 item
+              - paragraph [ref=e20]: Selecting an artifact updates the active fragment target while keeping the rendered payload front and center.
+            - generic [ref=e33]:
+              - generic [ref=e342]: Decoded
+              - generic [ref=e343]: 790 chars
+          - button "Open artifact Sprint roadmap" [pressed] [ref=e345]:
+            - img [ref=e347]
+            - generic [ref=e350]:
+              - generic [ref=e351]: Sprint roadmap
+              - generic [ref=e352]:
+                - generic [ref=e353]: markdown
+                - generic [ref=e354]: roadmap.md
+        - generic [ref=e355]:
+          - generic [ref=e356]:
+            - generic [ref=e357]:
+              - paragraph [ref=e358]: GFM markdown artifact
+              - heading "Sprint roadmap" [level=3] [ref=e359]
+              - paragraph [ref=e360]: roadmap.md
+            - generic [ref=e361]:
+              - button "Copy" [ref=e362]:
+                - img [ref=e363]
+                - text: Copy
+              - button "Download" [ref=e366]:
+                - img [ref=e367]
+                - text: Download
+              - button "Print / PDF" [ref=e370]:
+                - img [ref=e371]
+                - text: Print / PDF
+              - generic [ref=e375]: markdown
+          - article [ref=e379]:
+            - heading "Sprint roadmap" [level=1] [ref=e380]
+            - blockquote [ref=e381]:
+              - paragraph [ref=e382]: The public shell now needs a renderer that feels like a first-class artifact, not a fallback preview.
+            - heading "Sprint 1 scope" [level=2] [ref=e383]
+            - list [ref=e384]:
+              - listitem [ref=e385]:
+                - checkbox [checked] [disabled] [ref=e386]
+                - text: Render markdown directly in the viewer
+              - listitem [ref=e387]:
+                - checkbox [checked] [disabled] [ref=e388]
+                - text: Support GitHub Flavored Markdown tables and task lists
+              - listitem [ref=e389]:
+                - checkbox [checked] [disabled] [ref=e390]
+                - text: Keep raw HTML disabled by default
+              - listitem [ref=e391]:
+                - checkbox [checked] [disabled] [ref=e392]
+                - text: Add markdown download and print flows
+            - heading "Launch checklist" [level=2] [ref=e393]
+            - table [ref=e395]:
+              - rowgroup [ref=e396]:
+                - row "Surface Status Notes" [ref=e397]:
+                  - columnheader "Surface" [ref=e398]
+                  - columnheader "Status" [ref=e399]
+                  - columnheader "Notes" [ref=e400]
+              - rowgroup [ref=e401]:
+                - row "Viewer shell Ready Editorial chrome stays intact" [ref=e402]:
+                  - cell "Viewer shell" [ref=e403]
+                  - cell "Ready" [ref=e404]
+                  - cell "Editorial chrome stays intact" [ref=e405]
+                - row "Code fences Ready Productized framing with language chips" [ref=e406]:
+                  - cell "Code fences" [ref=e407]
+                  - cell "Ready" [ref=e408]
+                  - cell "Productized framing with language chips" [ref=e409]
+                - row "Print output Ready Browser print only, no server path" [ref=e410]:
+                  - cell "Print output" [ref=e411]
+                  - cell "Ready" [ref=e412]
+                  - cell "Browser print only, no server path" [ref=e413]
+            - heading "Example fenced block" [level=3] [ref=e414]
+            - generic [ref=e415]:
+              - generic [ref=e416]:
+                - generic [ref=e417]: ts
+                - generic [ref=e418]: premium fence
+              - generic [ref=e422]:
+                - generic [ref=e424]:
+                  - generic [ref=e425]: "1"
+                  - generic [ref=e426]: "2"
+                  - generic [ref=e427]: "3"
+                - textbox [ref=e428]:
+                  - generic [ref=e429]: "export function decodeEnvelope(fragment: string) {"
+                  - generic [ref=e430]: "return fragment.startsWith(\"agent-render=\") ? \"ready\" : \"missing\";"
+                  - generic [ref=e431]: "}"
+            - paragraph [ref=e432]: Keep the markdown renderer crisp on mobile and intentional on paper.
+        - generic [ref=e433]:
+          - generic [ref=e434]:
+            - generic [ref=e435]:
+              - paragraph [ref=e436]: Kind
+              - paragraph [ref=e437]: markdown
+            - generic [ref=e438]:
+              - paragraph [ref=e439]: Artifact
+              - paragraph [ref=e440]: roadmap
+            - generic [ref=e441]:
+              - paragraph [ref=e442]: File
+              - paragraph [ref=e443]: roadmap.md
+            - generic [ref=e444]:
+              - paragraph [ref=e445]: Size
+              - paragraph [ref=e446]: 816 chars
+          - group [ref=e447]:
+            - generic "Fragment details Codec, transport, budget, and hash preview +" [ref=e448] [cursor=pointer]:
+              - generic [ref=e449]:
+                - generic [ref=e450]: Fragment details
+                - generic [ref=e451]: Codec, transport, budget, and hash preview
+              - text: +
+  - status [ref=e322]:
+    - generic [ref=e323]:
+      - img [ref=e325]
+      - generic [ref=e327]:
+        - text: Static route
+        - button "Hide static indicator" [ref=e328] [cursor=pointer]:
+          - img [ref=e329]
+  - alert [ref=e321]

.playwright-mcp/page-2026-04-01T07-25-49-995Z.yml

@@ -0,0 +1,129 @@
+- generic [ref=e1]:
+  - main [ref=e2]:
+    - generic [ref=e3]:
+      - generic [ref=e4]:
+        - link "Go to homepage" [ref=e5] [cursor=pointer]:
+          - /url: "#"
+          - heading "Agent Render" [level=1] [ref=e7]
+        - generic [ref=e8]:
+          - generic [ref=e9]: "[STATUS: READY]"
+          - button "Switch to dark theme" [active] [ref=e452]:
+            - img [ref=e453]
+            - generic [ref=e13]: Dark mode
+      - generic [ref=e14]:
+        - generic [ref=e15]:
+          - generic [ref=e16]:
+            - generic [ref=e17]:
+              - paragraph [ref=e18]: Artifact bundle
+              - generic [ref=e339]:
+                - heading "Maintainer kickoff" [level=2] [ref=e340]
+                - generic [ref=e341]: 1 item
+              - paragraph [ref=e20]: Selecting an artifact updates the active fragment target while keeping the rendered payload front and center.
+            - generic [ref=e33]:
+              - generic [ref=e342]: Decoded
+              - generic [ref=e343]: 790 chars
+          - button "Open artifact Sprint roadmap" [pressed] [ref=e345]:
+            - img [ref=e347]
+            - generic [ref=e350]:
+              - generic [ref=e351]: Sprint roadmap
+              - generic [ref=e352]:
+                - generic [ref=e353]: markdown
+                - generic [ref=e354]: roadmap.md
+        - generic [ref=e355]:
+          - generic [ref=e356]:
+            - generic [ref=e357]:
+              - paragraph [ref=e358]: GFM markdown artifact
+              - heading "Sprint roadmap" [level=3] [ref=e359]
+              - paragraph [ref=e360]: roadmap.md
+            - generic [ref=e361]:
+              - button "Copy" [ref=e362]:
+                - img [ref=e363]
+                - text: Copy
+              - button "Download" [ref=e366]:
+                - img [ref=e367]
+                - text: Download
+              - button "Print / PDF" [ref=e370]:
+                - img [ref=e371]
+                - text: Print / PDF
+              - generic [ref=e375]: markdown
+          - article [ref=e379]:
+            - heading "Sprint roadmap" [level=1] [ref=e380]
+            - blockquote [ref=e381]:
+              - paragraph [ref=e382]: The public shell now needs a renderer that feels like a first-class artifact, not a fallback preview.
+            - heading "Sprint 1 scope" [level=2] [ref=e383]
+            - list [ref=e384]:
+              - listitem [ref=e385]:
+                - checkbox [checked] [disabled] [ref=e386]
+                - text: Render markdown directly in the viewer
+              - listitem [ref=e387]:
+                - checkbox [checked] [disabled] [ref=e388]
+                - text: Support GitHub Flavored Markdown tables and task lists
+              - listitem [ref=e389]:
+                - checkbox [checked] [disabled] [ref=e390]
+                - text: Keep raw HTML disabled by default
+              - listitem [ref=e391]:
+                - checkbox [checked] [disabled] [ref=e392]
+                - text: Add markdown download and print flows
+            - heading "Launch checklist" [level=2] [ref=e393]
+            - table [ref=e395]:
+              - rowgroup [ref=e396]:
+                - row "Surface Status Notes" [ref=e397]:
+                  - columnheader "Surface" [ref=e398]
+                  - columnheader "Status" [ref=e399]
+                  - columnheader "Notes" [ref=e400]
+              - rowgroup [ref=e401]:
+                - row "Viewer shell Ready Editorial chrome stays intact" [ref=e402]:
+                  - cell "Viewer shell" [ref=e403]
+                  - cell "Ready" [ref=e404]
+                  - cell "Editorial chrome stays intact" [ref=e405]
+                - row "Code fences Ready Productized framing with language chips" [ref=e406]:
+                  - cell "Code fences" [ref=e407]
+                  - cell "Ready" [ref=e408]
+                  - cell "Productized framing with language chips" [ref=e409]
+                - row "Print output Ready Browser print only, no server path" [ref=e410]:
+                  - cell "Print output" [ref=e411]
+                  - cell "Ready" [ref=e412]
+                  - cell "Browser print only, no server path" [ref=e413]
+            - heading "Example fenced block" [level=3] [ref=e414]
+            - generic [ref=e415]:
+              - generic [ref=e416]:
+                - generic [ref=e417]: ts
+                - generic [ref=e418]: premium fence
+              - generic [ref=e422]:
+                - generic [ref=e424]:
+                  - generic [ref=e425]: "1"
+                  - generic [ref=e426]: "2"
+                  - generic [ref=e427]: "3"
+                - textbox [ref=e428]:
+                  - generic [ref=e429]: "export function decodeEnvelope(fragment: string) {"
+                  - generic [ref=e430]: "return fragment.startsWith(\"agent-render=\") ? \"ready\" : \"missing\";"
+                  - generic [ref=e431]: "}"
+            - paragraph [ref=e432]: Keep the markdown renderer crisp on mobile and intentional on paper.
+        - generic [ref=e433]:
+          - generic [ref=e434]:
+            - generic [ref=e435]:
+              - paragraph [ref=e436]: Kind
+              - paragraph [ref=e437]: markdown
+            - generic [ref=e438]:
+              - paragraph [ref=e439]: Artifact
+              - paragraph [ref=e440]: roadmap
+            - generic [ref=e441]:
+              - paragraph [ref=e442]: File
+              - paragraph [ref=e443]: roadmap.md
+            - generic [ref=e444]:
+              - paragraph [ref=e445]: Size
+              - paragraph [ref=e446]: 816 chars
+          - group [ref=e447]:
+            - generic "Fragment details Codec, transport, budget, and hash preview +" [ref=e448] [cursor=pointer]:
+              - generic [ref=e449]:
+                - generic [ref=e450]: Fragment details
+                - generic [ref=e451]: Codec, transport, budget, and hash preview
+              - text: +
+  - status [ref=e322]:
+    - generic [ref=e323]:
+      - img [ref=e325]
+      - generic [ref=e327]:
+        - text: Static route
+        - button "Hide static indicator" [ref=e328] [cursor=pointer]:
+          - img [ref=e329]
+  - alert [ref=e321]