Developer Experience: DevTools, hot reload, and Storybook integration

[jhs]

Overview

Enhance developer experience with modern tooling for Chatfield development.

Proposed Features

1. DevTools Integration

• Browser extension or in-app devtools for inspecting interview state
• Visualize conversation flow and field collection status
• Debug LangGraph state machine transitions
• Inspect LLM prompts and responses

2. Hot Module Replacement (HMR)

• Fast refresh for interview definition changes
• Preserve conversation state during development
• Works with Vite, Next.js, and other modern bundlers

3. Storybook Integration

• Component library for React components
• Interactive documentation
• Visual regression testing
• Example interview scenarios

Implementation Notes

• Start with Storybook as lowest-hanging fruit
• HMR already works with standard bundlers, may just need documentation
• DevTools would be most complex but highest value

Scope

• TypeScript/React focus initially
• Browser-based tooling
• Documentation and examples

Related

• Mentioned during React integration design discussion
• Would complement Create @chatfield/react package for React integrations #50 (@chatfield/react package)