Config prompt management lite

[Prajna1999]

Summary by CodeRabbit

Release Notes

• New Features

  • Prompt Editor with version control, branching, and commit history
  • Configuration management with save/load and version tracking
  • A/B testing for configurations and prompts
  • Toast notification system for user feedback
  • Enhanced sidebar navigation with expandable menus
  • Placeholder pages for upcoming features (Guardrails, Model Testing, Redteaming, Speech-to-Text, Text-to-Speech)

• Improvements

  • Replaced alert dialogs with toast notifications throughout the app
  • Enhanced configuration display in evaluation reports with version details

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

This PR introduces a comprehensive configuration management system with versioned configs, A/B testing, and a prompt editor interface. It adds API proxy routes for CRUD operations on configs and versions, creates a multi-tabbed configuration drawer with history and testing capabilities, implements a toast notification system, and includes numerous supporting UI components, type definitions, and utilities for diff generation and version control.

Changes

Cohort / File(s)	Summary
API Routes for Config Management app/api/configs/route.ts, app/api/configs/[config_id]/route.ts, app/api/configs/[config_id]/versions/route.ts, app/api/configs/[config_id]/versions/[version_number]/route.ts	New Next.js route handlers that proxy config CRUD operations (GET, POST, PATCH, DELETE) to backend service at /api/v1/configs/..., forwarding X-API-KEY headers and handling errors with standardized JSON responses.
Toast Notification System app/components/Toast.tsx	Implements client-side toast notification system with ToastProvider context, useToast hook, and ToastItem component. Supports success/error/info/warning types with auto-dismiss, styling per type, and convenience methods for each notification type.
Core Configuration Components app/components/ConfigDrawer.tsx, app/components/SimplifiedConfigEditor.tsx, app/components/ConfigModal.tsx	Enhanced configuration management UI components. ConfigDrawer provides tabbed interface (Current/Saved/Compare) with tool management and diff view. SimplifiedConfigEditor offers configuration editing with saved config loading/creation. ConfigModal displays config version details with enriched data fetching.
Prompt Editor: Main Page & Infrastructure app/configurations/prompt-editor/page.tsx, app/configurations/prompt-editor/types.ts, app/configurations/prompt-editor/utils.ts	Prompt editor page with versioned config support, change detection, and save/load flows. Types define Commit, Config, Tool, DiffLine, and related structures. Utils provide diffing (Myers algorithm), branch/color helpers, config diffing, change detection, and commit message generation.
Prompt Editor: UI Components (Part 1 - Editors & Panels) app/components/prompt-editor/EditorView.tsx, app/components/prompt-editor/PromptEditorPane.tsx, app/components/prompt-editor/ConfigEditorPane.tsx, app/components/prompt-editor/CurrentConfigTab.tsx, app/components/prompt-editor/UnifiedCommitBar.tsx	Components for prompt and config editing. EditorView renders commit workflow with branch display. PromptEditorPane provides textarea for prompt content. ConfigEditorPane manages provider/model/temperature/tools selection. CurrentConfigTab handles config lifecycle (create/load/save). UnifiedCommitBar shows prompt/config change indicators.
Prompt Editor: UI Components (Part 2 - Tabs & Drawer) app/components/prompt-editor/HistoryTab.tsx, app/components/prompt-editor/ABTestTab.tsx, app/components/prompt-editor/ConfigDrawer.tsx, app/components/prompt-editor/Header.tsx	Tabbed interface components for prompt editor. HistoryTab displays saved configs with timestamps and selection. ABTestTab manages A/B test setup with variants, test input, and results display. ConfigDrawer orchestrates tabs and controls. Header provides sidebar collapse toggle.
Prompt Editor: UI Components (Part 3 - History & Diffing) app/components/prompt-editor/HistorySidebar.tsx, app/components/prompt-editor/DiffView.tsx, app/components/prompt-editor/PromptDiffPane.tsx, app/components/prompt-editor/ConfigDiffPane.tsx	History and diff visualization components. HistorySidebar renders grouped, versioned config list with timestamps and expansion. DiffView compares two SavedConfig objects side-by-side. PromptDiffPane shows line-by-line prompt diffs. ConfigDiffPane displays config field differences (provider, model, temperature, tools).
Prompt Editor: UI Components (Part 4 - Commits & Modals) app/components/prompt-editor/CommitNode.tsx, app/components/prompt-editor/BranchModal.tsx, app/components/prompt-editor/MergeModal.tsx	Components for commit visualization and branch management. CommitNode renders individual commit in tree with branch color, merge indicators, and selection state. BranchModal prompts for new branch name creation. MergeModal manages merging one branch into another with conflict/change detection.
Coming Soon Feature Pages app/guardrails/page.tsx, app/model-testing/page.tsx, app/redteaming/page.tsx, app/speech-to-text/page.tsx, app/text-to-speech/page.tsx	Five new placeholder pages for future features, each rendering ComingSoon component with feature name and descriptive text.
ComingSoon Placeholder Component app/components/ComingSoon.tsx	Reusable coffee-themed placeholder UI for features under construction, with back navigation, "Being Brewed" badge, Kaapi facts, and animated steam effect.
Updated Evaluation & Dataset Pages app/evaluations/page.tsx, app/evaluations/[id]/page.tsx, app/datasets/page.tsx	Replaced browser alert notifications with toast-based feedback. Evaluations page replaces inlined config UI with SimplifiedConfigEditor; adds config_id/config_version tracking. Evaluations detail page adds config version info fetching and display. Datasets page converts alert calls to toast notifications.
Component Refactoring & Extensions app/components/Sidebar.tsx, app/components/DetailedResultsTable.tsx, app/components/types.ts	Sidebar adds hierarchical navigation with expandable submenus and localStorage persistence. DetailedResultsTable refactors colors from HSL to hex palette and simplifies expandable details UI. EvalJob type extended with optional config_id, config_version, and model fields.
Type Definitions & Configuration app/lib/configTypes.ts	New comprehensive type definitions for Config Management API: Tool, CompletionParams, CompletionConfig, ConfigBlob, ConfigCreate/Update/VersionCreate, ConfigPublic/Version, APIResponse, and response type aliases.
Styling & Layout Enhancements app/globals.css, app/layout.tsx	Added slideIn keyframe animation for drawer entry. Wrapped RootLayout with ToastProvider to enable toast notifications app-wide.
ESLint & Dependency Configuration eslint.config.mts, package.json	New ESLint flat-config module integrating JS, TypeScript, and React plugins. Updated devDependencies with @eslint/js, eslint-plugin-react, globals, typescript-eslint; bumped eslint version.
Documentation Files CLAUDE.md (deleted), instructions/CLAUDE.md, instructions/CONFIG_AB.md, instructions/CONFIG_API.md, instructions/VERCEL_DESIGN_SYSTEM.md	Removed old CLAUDE.md. Added new CLAUDE.md with architecture guidance, CONFIG_AB.md with config drawer specification, CONFIG_API.md with API integration details, and VERCEL_DESIGN_SYSTEM.md with design tokens and guidelines.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45–75 minutes

Areas requiring extra attention:

• app/configurations/prompt-editor/utils.ts: Myers algorithm implementation for diffing, branch color management, and commit message generation—non-trivial logic with multiple edge cases
• app/components/prompt-editor/CurrentConfigTab.tsx & app/components/SimplifiedConfigEditor.tsx: State management complexity with tool arrays, config creation/versioning flows, and dynamic model lists
• app/components/ConfigDrawer.tsx and app/components/prompt-editor/ConfigDrawer.tsx: Dual ConfigDrawer implementations with overlapping naming; verify intended separation and usage
• API Route Handlers (app/api/configs/*): Verify proper error handling, backend URL resolution, and X-API-KEY propagation across all four new route files
• Integration Points: Toast adoption across datasets/evaluations pages; SimplifiedConfigEditor integration in evaluations page; verify all callbacks and state flow match expected behavior
• Type Consistency: Config-related types defined in multiple locations (app/lib/configTypes.ts, app/configurations/prompt-editor/types.ts, app/components/SimplifiedConfigEditor.tsx); ensure no conflicts or duplication

Possibly related PRs

• chore: redid color scheme to vanilla b/w vercel-esque theming #3: Both PRs modify theming and color palette references; PR #3 centralizes color tokens while this PR consumes them across new components. Direct code-level dependency.

Poem

🐰 Hops through branches, configs bloom so bright,
Versions stack like carrots, versions right,
A/B tests dance while diffs show the way,
Toast notifications pop up to say:
The prompt editor's brewed fresh and grand,
Thanks to this PR—quite a feat, unplanned! ☕✨

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch config-prompt-management-lite

---

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e87803c and ae669f6.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (51)

• CLAUDE.md
• app/api/configs/[config_id]/route.ts
• app/api/configs/[config_id]/versions/[version_number]/route.ts
• app/api/configs/[config_id]/versions/route.ts
• app/api/configs/route.ts
• app/components/ComingSoon.tsx
• app/components/ConfigDrawer.tsx
• app/components/ConfigModal.tsx
• app/components/DetailedResultsTable.tsx
• app/components/Sidebar.tsx
• app/components/SimplifiedConfigEditor.tsx
• app/components/Toast.tsx
• app/components/prompt-editor/ABTestTab.tsx
• app/components/prompt-editor/BranchModal.tsx
• app/components/prompt-editor/CommitNode.tsx
• app/components/prompt-editor/ConfigDiffPane.tsx
• app/components/prompt-editor/ConfigDrawer.tsx
• app/components/prompt-editor/ConfigEditorPane.tsx
• app/components/prompt-editor/CurrentConfigTab.tsx
• app/components/prompt-editor/DiffView.tsx
• app/components/prompt-editor/EditorView.tsx
• app/components/prompt-editor/Header.tsx
• app/components/prompt-editor/HistorySidebar.tsx
• app/components/prompt-editor/HistoryTab.tsx
• app/components/prompt-editor/MergeModal.tsx
• app/components/prompt-editor/PromptDiffPane.tsx
• app/components/prompt-editor/PromptEditorPane.tsx
• app/components/prompt-editor/UnifiedCommitBar.tsx
• app/components/types.ts
• app/configurations/prompt-editor/page.tsx
• app/configurations/prompt-editor/types.ts
• app/configurations/prompt-editor/utils.ts
• app/datasets/page.tsx
• app/evaluations/[id]/page.tsx
• app/evaluations/page.tsx
• app/globals.css
• app/guardrails/page.tsx
• app/layout.tsx
• app/lib/configTypes.ts
• app/model-testing/page.tsx
• app/redteaming/page.tsx
• app/speech-to-text/page.tsx
• app/text-to-speech/page.tsx
• eslint.config.mts
• instructions/CLAUDE.md
• instructions/COLOR_SCHEME.md
• instructions/CONFIG_AB.md
• instructions/CONFIG_API.md
• instructions/TESTING_MOCK_DATA.md
• instructions/VERCEL_DESIGN_SYSTEM.md
• package.json

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}