feat: add navigation guards and session persistence for Claude Code

[mufeedvh]

Summary

• Add global session context to track active Claude Code sessions
• Implement navigation confirmation dialog when leaving active sessions
• Add session persistence with automatic saving and resumption

Test plan

• Start a Claude Code session
• Try navigating to different views - confirmation dialog should appear
• Close and reopen the app - active sessions should be visible
• Resume a session - full conversation history should be restored

Fixes #50

🤖 Generated with Claude Code

[claude]

Claude finished @mufeedvh's task —— View job

---

Code Review Complete ✅

I've analyzed the PR and found the implementation to be well-structured overall, with good separation of concerns and proper React patterns. Here's my detailed feedback:

Review Checklist:

• Read and analyze all changed files
• Review code architecture and design patterns
• Check for potential bugs and edge cases
• Assess security considerations
• Evaluate performance implications
• Review test coverage and suggest improvements
• Provide constructive feedback and recommendations

---

🔍 Code Quality & Architecture

✅ Strengths

• Clean separation of concerns with dedicated context, service, and components
• Proper TypeScript usage with well-defined interfaces
• Good error handling throughout most components
• Proper cleanup in useEffect hooks to prevent memory leaks
• React best practices with contexts and custom hooks

⚠️ Areas for Improvement

SessionContext.tsx:67-78

const checkNavigationAllowed = useCallback(async (): Promise<boolean> => {
  // Using window.confirm makes this difficult to test
  const confirmed = window.confirm('...');
  return confirmed;
}, [activeSession]);

Suggestion: Replace window.confirm with a more testable dialog system or accept a confirmation callback parameter.

App.tsx:48-49

// Inconsistent navigation logic - why skip check for claude-code-session?
if (view === newView || newView === "claude-code-session") {
  setView(newView);
  return;
}

Suggestion: Document why "claude-code-session" bypasses navigation guards, or remove this special case if unintended.

---

🐛 Potential Issues

1. Race Condition Risk - ClaudeCodeSession.tsx:253-262

The session context update could race with rapid state changes:

useEffect(() => {
  if (effectiveSession && hasActiveSessionRef.current) {
    setActiveSession({...}); // Could overwrite newer state
  }
}, [isLoading, effectiveSession, projectPath, setActiveSession]);

2. Navigation Guard Logic - App.tsx:55

if (view === "claude-code-session" && activeSession?.isActive) {
  // Navigation guard only checks isActive, not hasUnsavedChanges
}

Suggestion: Consider checking hasUnsavedChanges as well for more comprehensive protection.

3. Event Dispatch Pattern - SessionContext.tsx:84-92

Custom event dispatching for session resumption is fragile:

window.dispatchEvent(new CustomEvent('claude-session-selected', {
  detail: { session: {...} }
}));

Suggestion: Use a callback prop or context method instead of DOM events.

---

🚀 Performance Considerations

1. Frequent localStorage Access - sessionStorage.ts

getActiveSessions(): StoredSession[] {
  const sessions = this.getAllSessions(); // Reads localStorage every time
  return Object.values(sessions)...
}

Suggestion: Add caching layer or debounce frequent reads.

2. Polling Interval - SessionContext.tsx:51-52

const saveInterval = setInterval(() => {
  // Saves every 5 seconds regardless of changes
}, 5000);

Suggestion: Only save when there are actual changes to reduce I/O.

3. Re-render Impact

SessionContext could cause cascading re-renders when activeSession changes frequently during Claude execution.

---

🔒 Security Concerns

1. Type Safety - sessionStorage.ts:4

messages: any[]; // Could store malicious content

Suggestion: Use a more specific type for messages to prevent XSS risks.

2. Storage Limits

No bounds checking on localStorage usage could lead to storage exhaustion.
Suggestion: Add storage size limits and cleanup policies.

3. Session Data Persistence

Sessions persist in localStorage indefinitely until expiry - consider privacy implications.

---

🧪 Test Coverage

Current Status: ❌ No tests detected for the new functionality.

Critical Missing Tests:

• Unit tests for sessionStorage service (save/get/remove operations)
• Integration tests for SessionContext provider
• Component tests for NavigationConfirmDialog and ActiveClaudeSessions
• E2E tests for navigation guard flow

Suggested Test Structure:

// Example test cases needed
describe('sessionStorage', () => {
  it('should save and retrieve sessions correctly')
  it('should handle localStorage errors gracefully')
  it('should clean up expired sessions')
})

describe('SessionContext', () => {
  it('should block navigation when session is active')
  it('should allow navigation when session is inactive')
})

---

💡 Recommendations

High Priority

1. Add comprehensive tests - This feature affects core navigation and could break user workflows
2. Fix race condition in session context updates
3. Improve type safety for stored messages

Medium Priority

1. Performance optimizations for localStorage access
2. Replace window.confirm with testable dialog system
3. Add storage size limits

Low Priority

1. Documentation for navigation guard behavior
2. Consider session encryption for sensitive project data

---

✅ Overall Assessment

This is a solid implementation that addresses the navigation guard and session persistence requirements. The architecture is clean and follows React best practices. The main concerns are around test coverage (critical) and some edge cases that could affect user experience.

Recommendation: ✅ Approve with suggestions - The core functionality is sound, but adding tests and addressing the race condition would significantly strengthen the implementation.

---