feat: AI-first submission, shader detail pages, and review system

[devallibus]

Context

ShaderBase's web UI has three major gaps to address:

1. Submission is painful — The /submit page is a 545-line manual form with ~30 fields. We want an AI-first flow: paste code or a link, AI extracts everything, user reviews and submits.

2. Search is a dead end — /shaders shows cards but they aren't clickable, there's no detail page, and shaders are never rendered. Users can't see what a shader looks like.

3. No feedback loop — When an AI agent (during vibecoding) uses a shader, there's no way to capture user satisfaction and send reviews back. We need an API for automated reviews and display them on the detail page.

Decisions made:

• Use Three.js for live shader preview (shaders are Three.js ShaderMaterial code)
• Replace the manual form entirely with AI-first flow
• Use Vercel AI SDK (ai + @ai-sdk/anthropic) to keep provider-agnostic
• Reviews stored in SQLite (using node:sqlite like Better Auth), visible on detail page

Branch: feat/ai-first-detail-reviews

---

Phase 1: Shader Detail Page (/shaders/$name)

1.1 Server function — apps/web/src/lib/server/shader-detail.ts (NEW)

Create getShaderDetail server function (createServerFn) that:

• Takes { name: string }, reads shaders/{name}/shader.json (full manifest)
• Reads GLSL files (vertex, fragment) as raw text
• Reads recipe files as raw text
• Reads preview SVG content if format is svg
• Returns typed ShaderDetail object with all data needed for the page

1.2 WebGL preview — apps/web/src/components/ShaderPreviewCanvas.tsx (NEW)

Solid.js component using Three.js to render the shader live:

• Three.js WebGLRenderer, Scene, Camera (orthographic for fullscreen-pass, perspective for surface/geometry)
• Surface shaders: render on a rotating mesh (sphere or plane)
• Post-processing/fullscreen-pass: render on a fullscreen quad
• ShaderMaterial with actual vertex + fragment code and manifest uniforms
• requestAnimationFrame loop updating uTime uniform if present
• Falls back to SVG preview if shader compilation fails

1.3 Uniform controls — apps/web/src/components/UniformControls.tsx (NEW)

• float/int → range slider + number input
• bool → toggle
• color/vec3 (color-like) → HTML color picker
• vec2/vec3/vec4 → grouped sliders
• sampler2D/samplerCube → label only

1.4 Code block — apps/web/src/components/CodeBlock.tsx (NEW)

Reusable <pre> block with language label, copy button, design system styling.

1.5 Detail page route — apps/web/src/routes/shaders.$name.tsx (NEW)

Layout: Back link → Hero → Preview + Controls → Description → Compatibility → Recipes → Source code → Provenance → Reviews

1.6 Make cards clickable — apps/web/src/components/ShaderCard.tsx (MODIFY)

Wrap in <Link to="/shaders/$name"> with cursor-pointer styling.

1.7 Dependencies

• three (runtime)
• @types/three (dev)

---

Phase 2: AI-First Submission Flow

2.1 AI parsing — apps/web/src/lib/server/ai-parse.ts (NEW)

• resolveShaderSource: Detect Shadertoy URLs, GitHub gists, raw URLs, or plain GLSL
• aiParseShader: Vercel AI SDK generateObject() with Zod schema to extract all manifest fields from shader code

2.2 AI wizard — apps/web/src/components/AiSubmitWizard.tsx (NEW)

Three-step wizard replacing the manual form:

1. Input (paste code/URL)
2. Processing (AI analysis)
3. Review & Edit (editable fields + live preview + submit)

2.3 Rewrite submit page — apps/web/src/routes/submit.tsx (MODIFY)

Replace manual form with AiSubmitWizard. Keep auth flow and saveDraftSubmission.

2.4 Dependencies

• ai (Vercel AI SDK)
• @ai-sdk/anthropic

---

Phase 3: Shader Review System

3.1 Reviews database — apps/web/src/lib/server/reviews-db.ts (NEW)

SQLite via node:sqlite at .data/reviews.sqlite:

CREATE TABLE IF NOT EXISTS reviews (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  shader_name TEXT NOT NULL,
  rating INTEGER NOT NULL CHECK(rating BETWEEN 1 AND 5),
  comment TEXT,
  source TEXT NOT NULL DEFAULT 'web',
  agent_context TEXT,
  user_id TEXT,
  created_at TEXT NOT NULL DEFAULT (datetime('now'))
);

3.2 Reviews API — apps/web/src/routes/api/reviews.ts (NEW)

• POST /api/reviews — Submit review (no auth for SDK/MCP)
• GET /api/reviews?shader=<name> — Get reviews + stats

3.3 Reviews display — apps/web/src/components/ReviewsSection.tsx (NEW)

Average rating, source breakdown, recent reviews, web review form.

3.4-3.5 Integration

• Reviews on detail page + average rating in hero
• Rating badges on shader cards in browse view

3.6 SDK/MCP Interface

The POST /api/reviews endpoint is the contract for AI agents.

---

File Summary

Action	File
NEW	apps/web/src/lib/server/shader-detail.ts
NEW	apps/web/src/components/ShaderPreviewCanvas.tsx
NEW	apps/web/src/components/UniformControls.tsx
NEW	apps/web/src/components/CodeBlock.tsx
NEW	apps/web/src/routes/shaders.$name.tsx
NEW	apps/web/src/lib/server/ai-parse.ts
NEW	apps/web/src/components/AiSubmitWizard.tsx
NEW	apps/web/src/lib/server/reviews-db.ts
NEW	apps/web/src/routes/api/reviews.ts
NEW	apps/web/src/components/ReviewsSection.tsx
MODIFY	apps/web/src/components/ShaderCard.tsx
MODIFY	apps/web/src/routes/submit.tsx
MODIFY	apps/web/src/lib/server/shaders.ts
MODIFY	apps/web/package.json

Implementation Order

1. Phase 1 (detail page) — unblocks card clickability, provides ShaderPreviewCanvas reused by Phase 2
2. Phase 3 (reviews) — DB + API before detail page is "done"
3. Phase 2 (AI submission) — depends on Phase 1's preview component