Skip to content

Add search, generation cancellation, brainstorm mode, and test suite - #3

Open
Unconfirmed2 wants to merge 13 commits into
mainfrom
claude/review-production-ready-Kv8KW
Open

Add search, generation cancellation, brainstorm mode, and test suite#3
Unconfirmed2 wants to merge 13 commits into
mainfrom
claude/review-production-ready-Kv8KW

Conversation

@Unconfirmed2

@Unconfirmed2 Unconfirmed2 commented Mar 9, 2026

Copy link
Copy Markdown
Owner

Summary

This PR introduces several significant UX and testing improvements to the Scope application, including a search modal for quick task navigation, generation cancellation support, a brainstorm/plan mode toggle, comprehensive test coverage, and improved error handling.

Key Changes

Search & Navigation

  • Search Modal (SearchModal component): New Cmd/Ctrl+K keyboard shortcut opens a searchable modal to quickly find and navigate to tasks across all projects
  • Supports filtering by task text, description, and project name with keyboard navigation (arrow keys, enter to select)

Generation Management

  • Generation Cancellation: Implemented cancellation system with unique generation IDs to prevent stale updates from completing after user cancels
  • Added startGeneration(), cancelGeneration(), and isStale() utilities to track and validate generation state
  • Generation step indicator shows current operation status (e.g., "Clarifying scope...")

Brainstorm vs Plan Modes

  • Section Toggle: New activeSection state switches between 'brainstorm' and 'plan' modes
  • Brainstorm mode hides status markers, checkboxes, and progress counts for a cleaner ideation experience
  • Plan mode shows full task management UI with status tracking
  • Tab availability automatically adjusts based on active section

Mind Map Enhancements

  • Improved node styling with better spacing and visual hierarchy
  • Added subtask count badges on parent nodes
  • Support for numbered outline format (1., 1.1., 1.1.1.)
  • Pan and zoom controls for large mind maps
  • Copy-to-clipboard functionality for formatted task lists

Kanban View Improvements

  • Drag-and-drop support for moving tasks between status columns
  • Visual feedback during drag operations with column highlighting
  • Improved task card styling with better readability

Testing Infrastructure

  • Jest Configuration: Added jest.config.ts with TypeScript support and module path mapping
  • Comprehensive Test Suite:
    • __tests__/utils.test.ts: 371 lines covering task counting, progress calculation, sorting, and text formatting utilities
    • __tests__/json-to-tree.test.ts: 192 lines testing JSON-to-tree parsing for primitives, objects, and arrays
  • CI/CD Pipeline: Added GitHub Actions workflow for automated linting, type checking, and testing

Code Quality & Error Handling

  • Error Boundary: New ErrorBoundary component wraps application to gracefully handle runtime errors
  • Help Dialog: New help documentation component with keyboard shortcuts and feature explanations
  • History Dialog: Visual representation of undo/redo history
  • Input Validation: Added length validation in Claude API calls to prevent abuse
  • Retry Logic: Implemented exponential backoff for transient API errors (429, 500, 503, 529)
  • Type Safety: Improved TypeScript strictness by disabling ignoreBuildErrors and ignoreDuringBuilds in Next.js config

Utility Enhancements

  • Text Formatting: New formatTaskToText() and formatTasksToText() utilities for exporting tasks as formatted text with optional numbering and status
  • Task Utilities: Added FormatTextOptions type for flexible text export configuration

UI/UX Improvements

  • Removed unused imports and cleaned up icon imports
  • Added new icons: Lightbulb, ClipboardList, Search, Download, Upload, Filter, X, ListOrdered, Copy
  • Improved keyboard shortcut handling (Cmd/Ctrl+K for search)
  • Better visual feedback for drag operations and generation progress

Documentation

  • Added .env.example with required and optional environment variables
  • Improved comments and removed obsolete "Persona feature removed" markers

Notable Implementation Details

  • Generation cancellation uses a ref-based approach to avoid race conditions between async operations
  • Search modal collects all tasks recursively and filters in-memory for instant results
  • Mind map layout supports both vertical and horizontal orientations with proper connector rendering
  • Test utilities include helper functions (makeTask, makeProject, makeComment) for consistent test data creation
  • Keyboard shortcuts properly handle both Mac (Cmd) and Windows/Linux (Ctrl) modifiers

https://claude.ai/code/session_01PWZQ1JhnGTBwGuZH7nrt4N

claude added 13 commits March 5, 2026 16:28
@claude
feat: production-readiness improvements across the board
a5a0b63 
- Fix TypeScript errors: remove incorrect 'use server' from API routes, type implicit any params
- Add error boundary component wrapping the app in layout.tsx
- Extract HelpDialog and HistoryDialog from monolithic page.tsx
- Add retry with exponential backoff for Claude API (429/500/503/529)
- Add input length validation in server actions (Zod schemas)
- Add localStorage storage monitoring with warnings near 5MB limit
- Add security headers (X-Content-Type-Options, X-Frame-Options, X-XSS-Protection, Referrer-Policy)
- Enable TypeScript and ESLint checks during builds (was previously disabled)
- Validate ANTHROPIC_API_KEY at module load time
- Add .env.example for environment variable documentation
- Add Jest test suite with 41 tests for utils and json-to-tree
- Add GitHub Actions CI pipeline (lint, typecheck, test, build)
- Clean up dead code: remove empty preview-change.ts, unused imports, persona comments

https://claude.ai/code/session_01PWZQ1JhnGTBwGuZH7nrt4N
@claude
feat: split UI into Brainstorm and Plan sections
34aca61 
Add a top-level toggle (Brainstorm | Plan) that filters which view tabs
are visible. Brainstorm shows List, Mind Map, Execution, Comments, Summary.
Plan shows List, Kanban, Execution, Comments, Summary. Status markers,
checkboxes, progress counts, and completion strikethrough are hidden in
Brainstorm mode and only visible in Plan mode.

https://claude.ai/code/session_01PWZQ1JhnGTBwGuZH7nrt4N
@claude
feat: unified copy/paste with tab indentation and outline numbering
90641b9 
- Add shared formatTaskToText/formatTasksToText utilities using tabs
  for indentation and optional outline numbering (1. / 1.1. / 1.1.1.)
- Replace duplicated formatTaskToString in tree-view with shared utility
- Add numbering toggle (ListOrdered icon) and copy-all button to tree
  view toolbar
- Add copy button and numbering toggle to mind map view toolbar
- Status markers only included in copy when in Plan mode
- Add 9 tests for the new formatting functions (50 total)

https://claude.ai/code/session_01PWZQ1JhnGTBwGuZH7nrt4N
@claude
feat: mind map pan/drag, fixed controls, improved display, numbering …
ff73a2e 
…fixes

Mind map:
- Replace wheel-zoom scroll with drag-to-pan (window listeners for smooth drag)
- Remove overflow-auto; container is overflow-hidden so controls stay fixed
- Controls (copy, layout, zoom) anchored to top-right with backdrop blur
- Improved node styling: rounded-xl, subtask count badge on parent nodes
- Wider gaps between children (gap-6/gap-5) for better readability
- Connector lines use per-child wrappers for cleaner alignment
- Copy: when viewing an activeTask, prints it as title then numbers children from 1

Tree view:
- Pass numbered state to TaskNode so per-task copy respects toggle
- Per-task "Copy as Text" in numbered mode: task is title, children start at 1.

https://claude.ai/code/session_01PWZQ1JhnGTBwGuZH7nrt4N
@claude
feat: UX improvements - search, filters, kanban DnD, import/export, m…
b0fc1ed 
…obile nav

- Add Cmd/Ctrl+K quick search modal across all projects and tasks
- Add double-click to rename tasks and projects in sidebar
- Add tooltips on sidebar progress bars showing completion percentage
- Add JSON import/export for projects
- Add task filtering by status (todo/inprogress/done) and source (ai/manual)
- Add kanban drag-and-drop to move tasks between columns
- Add generation step progress indicator in confirmation dialog
- Add mobile bottom tab bar for view switching
- Improve empty state with onboarding steps and action buttons
- Add search button in header with keyboard shortcut hint

https://claude.ai/code/session_01PWZQ1JhnGTBwGuZH7nrt4N
@claude
feat: add cancel button to stop AI generation in progress
afca2ff 
- Add generation ID tracking with cancellation ref pattern
- Show cancel button in goal input area during generation
- Show "Stop generation" button in confirmation dialog during AI calls
- Show "Stop execution" button in execute scope dialog
- Add inline progress bar with cancel between form and breadcrumbs
- Discard stale AI responses after cancellation (all await points checked)
- Toast notification when generation is cancelled

https://claude.ai/code/session_01PWZQ1JhnGTBwGuZH7nrt4N
@claude
feat: add Claude model selection, temperature, and max tokens settings
93bb817 
- Add AI settings type with 5 Claude models (Opus 4, Sonnet 4, Haiku 4,
  3.5 Sonnet, 3.5 Haiku) persisted to localStorage
- Add "AI Model" section to Settings dialog with model dropdown,
  temperature slider (0-1), and max tokens input (100-128k)
- Thread aiSettings through all server actions and AI flow functions
  (generateContent, generateContentBlocks) so model/temp/tokens
  are respected in every API call
- Update claude.ts helpers to accept optional AiSettings overrides

https://claude.ai/code/session_01PWZQ1JhnGTBwGuZH7nrt4N
@claude
feat: add Vercel + Neon database hosting with NextAuth authentication
bd832db 
Add production hosting support with Neon PostgreSQL database, NextAuth
authentication (Google OAuth + email/password credentials), and dual
persistence (localStorage cache + debounced DB sync).

- Prisma schema with Neon driver adapter for serverless PostgreSQL
- NextAuth v4 with JWT sessions, Google and Credentials providers
- Server actions for project CRUD with transactional upserts
- Database setup script (scripts/setup-db.sh)
- Sign-in page with register/login toggle
- Dual persistence in use-projects hook (localStorage + DB)

https://claude.ai/code/session_01PWZQ1JhnGTBwGuZH7nrt4N
@claude
feat: add devcontainer config for GitHub Codespaces
8b20ee2 
Uses npm ci for a clean install from the lockfile, preventing
corrupted node_modules from stale directory conflicts.

https://claude.ai/code/session_01PWZQ1JhnGTBwGuZH7nrt4N
@claude
docs: rewrite README with About/How-To, remove outdated files
2bff7a8 
- Rewrote README.md with clear About and How To Use sections
- Updated tech stack info (Prisma/Neon DB, NextAuth, Google OAuth)
- Added environment variable reference table and setup instructions
- Cleaned up USER_GUIDE.md for conciseness
- Removed APP_DESCRIPTION.md (referenced outdated Genkit/Gemini stack)
- Removed blueprint.md (referenced old "DeepDive Navigator" name)
- Removed empty docs/USER_WORKFLOW_LIST_VIEW.md

https://claude.ai/code/session_01PWZQ1JhnGTBwGuZH7nrt4N
@claude
feat: replace basic help dialog with comprehensive in-app guide
fc7eba6 
Multi-section guide with sidebar navigation matching the settings dialog
pattern. Includes About, Getting Started, How To, Views, Keyboard
Shortcuts, and Tips sections with step-by-step instructions, feature
descriptions, and practical advice.

https://claude.ai/code/session_01PWZQ1JhnGTBwGuZH7nrt4N
@claude
Remove 'add new scope' input from sidebar
5760912 
Removed the 'New scope in Unassigned...' form at the bottom of the sidebar,
along with the associated state and handler.

https://claude.ai/code/session_01PWZQ1JhnGTBwGuZH7nrt4N
@claude
Fix 17 code review issues: bugs, UX, and optimizations
4e94a14 
Functionality fixes:
- Fix stale closure in async dialog callbacks by capturing project before IIFE
- Add null guard for empty convertRawToTasks result in subscope/regenerate flow
- Remove unsafe (activeProject as Project) casts, add null checks
- Prevent double-submission with isGenerating guard
- Remove non-serializable File object from state, store only dataUri
- Add null check in Kanban handleDrop for missing task lookup

UX improvements:
- Remove non-functional settings fields (phone, country, city, zip, camera)
- Persist sidebar collapsed state in localStorage
- Replace inline marginLeft styles with Tailwind classes in comments
- Clean up setTimeout on unmount in search modal focus handler
- Add streaming helper (generateContentStream) to Claude client

Optimization:
- Memoize sortTasksShallow in tree-view with useMemo
- Build flat Map<id, Task> for O(1) selectedTasks lookup
- Add TTL-based cleanup for recentlyChanged (10s expiry)
- Extract getTargetProject helper to deduplicate lookup pattern
- Add resetConfirmationState helper to consolidate state cleanup

https://claude.ai/code/session_01PWZQ1JhnGTBwGuZH7nrt4N
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@Unconfirmed2 @claude