Feature: add recent directories selector for working directory selection

[Icosa2050]

Feature: add recent directories selector for working directory selection

Problem

Currently, users must manually type or browse for working directories every time they start a new Claude Code session. This is inefficient for developers who frequently work with the same projects and slows down the workflow when switching between multiple projects.

Solution

Added a "Recent (X)" dropdown button next to the directory input that allows users to quickly select from their last 10 used working directories.

Changes Made

Core Implementation

• useRecentDirectories hook (src/hooks/useRecentDirectories.ts): Manages up to 10 recent directories with persistence in Claude settings
• RecentDirectoriesDropdown component (src/components/RecentDirectoriesDropdown.tsx): UI component with dropdown menu, timestamps, and management features
• Integration in ClaudeCodeSession (src/components/ClaudeCodeSession.tsx): Added dropdown between directory input and browse button with automatic tracking

Key Features

• ✅ Automatic tracking: Directories are added when sessions start or resume
• ✅ Smart sorting: Most recently used directories appear first
• ✅ Limit management: Automatically maintains maximum of 10 entries
• ✅ Persistence: Stored in ~/.claude/settings.json across app restarts
• ✅ Time display: Shows relative timestamps ("2h ago", "3d ago", etc.)
• ✅ Individual removal: X button to remove specific directories
• ✅ Bulk clearing: "Clear all recent directories" option
• ✅ Current highlight: Currently selected directory is visually highlighted
• ✅ Error handling: Graceful handling of corrupted data and API failures

Testing

Automated Tests (34 tests - all passing ✅)

• Hook tests (17): Loading, adding, removing, clearing, persistence, sorting, error handling
• Component tests (17): UI states, user interactions, accessibility, time formatting

# Run test suite
bun run test:run
# All 34 tests passing ✅

Manual Testing

• Complete test plan provided in TEST_PLAN.md
• 14 comprehensive test scenarios covering all user workflows
• Accessibility testing with keyboard navigation and ARIA compliance
• Edge case testing with long paths, special characters, and error conditions

Quality Assurance

• ✅ TypeScript: Zero compilation errors (bunx tsc --noEmit)
• ✅ Rust tests: All existing tests pass, no regressions (cargo test)
• ✅ Production build: Application builds successfully (bun run build)
• ✅ Code standards: Follows existing patterns and conventions

Dependencies

No new runtime dependencies added. Development dependencies added for testing:

• vitest - Testing framework optimized for Vite
• @testing-library/react - Component testing utilities
• @testing-library/jest-dom - Testing assertions
• @testing-library/user-event - User interaction simulation
• jsdom - DOM environment for tests

Documentation

• Comprehensive test plan (TEST_PLAN.md) with manual testing procedures
• JSDoc comments for all exported functions and components
• Clear code organization following existing project structure
• Type safety with full TypeScript support

Backward Compatibility

✅ Fully backward compatible - no breaking changes to existing functionality
✅ Progressive enhancement - feature works alongside existing directory selection methods
✅ Safe defaults - graceful degradation if settings are unavailable

Screenshots/Demo

The feature integrates seamlessly into the existing UI:

• Disabled "Recent (0)" button when no directories
• Enabled "Recent (X)" button with count when directories available
• Clean dropdown with directory names, paths, timestamps, and management options

Checklist

Code Quality

• Code follows TypeScript standards
• Code follows existing project conventions
• All functions have JSDoc comments
• No console.log statements in production code
• Error handling implemented throughout

Testing

• 34 automated tests added and passing
• Manual testing completed per test plan
• All existing tests still pass (no regressions)
• Edge cases and error conditions tested

Documentation

• README updated (not applicable - internal feature)
• Code comments added for complex functionality
• Manual testing procedures documented
• API interactions documented

Security & Performance

• Input validation for directory paths
• No sensitive data logged
• Efficient data structures (max 10 items)
• Asynchronous operations don't block UI
• Memory leaks prevented

This feature significantly improves developer productivity by reducing the friction of starting new Claude Code sessions, especially for users who work with multiple projects regularly.