Research Dossier — Vibe-Coding a Case File, Then Teaching It to Hold Its Own Workflow

Description and use

A Next.js app with a two‑pane interface and a Sanity‑backed approval workflow, built mainly through prompting and iterative debugging.

Problem

Build a Next.js app with a custom two‑pane interface and a real Sanity‑backed approval workflow, while avoiding common pitfalls such as node name collisions, model availability issues, and auth errors.

Outcome

The app now supports a full approval workflow stored in Sanity, with status transitions visible in both the web UI and Sanity Studio. The build process highlighted common pitfalls and required iterative debugging.

Workflow

• 1. Define three core document types (topic, source, claim) and a new caseReport type with fields question, draftText, finalText, status, createdAt, approvedAt.
• 2. Create a write‑scoped Sanity client separate from the read‑only client used for research queries.
• 3. Implement an API route that writes a new caseReport with status: "draft" when the agent finishes drafting.
• 4. Implement a second API route that patches the same document to status: "approved", sets finalText, and records approvedAt when a human approves.
• 5. Update the UI to display the draft log, the report pane, and an approve button that triggers the approval API.
• 6. Deploy to Vercel, ensuring next.config.js does not force static export and that peer dependencies are resolved with --legacy-peer-deps.
• 7. Test the workflow by asking a question, reviewing the draft, approving, and verifying the status change in both the app and Sanity Studio.

Evidence

The system now models its own approval workflow as real Sanity content, not just UI state.

Source

Three document types: topic, source, claim (the Path One side), plus caseReport for this path — question, draftText, finalText, status, createdAt, approvedAt.

Source

The workflow itself is two writes against one document: the research/writing/review pipeline creates it with status: "draft", and a human approving (or editing, then approving) in the UI patches the same document to status: "approved" with the final text and a timestamp.

Source