add split view for switching chats

[jasonkneen]

Added a split view to show projects, sessions with search and allow switching more easily as well as creating new chats.

[sugyan]

Thanks for the PR! However, there are a few issues that need to be addressed before merging:

1. CI is failing - Please fix the lint errors (unused imports/variables and hook dependencies)
2. Mobile responsiveness is broken - I tested this and it's completely unusable on smartphones due to the fixed-width sidebar. Since mobile support is a key feature of this app, this is a blocking issue.
3. PR description is too brief - For such a major UI change, please provide more details including screenshots.

Could you address these issues, especially the mobile responsiveness?

[Copilot]

Pull Request Overview

This PR introduces a unified split-view interface that consolidates project selection and chat functionality into a single page, adds session caching for improved performance when switching between conversations, and modernizes the UI by replacing emoji icons with the lucide-react icon library.

Key Changes:

• Implements session caching with LRU eviction and 30-minute expiry for faster conversation switching
• Replaces separate ProjectSelector and ChatPage components with a unified SplitView component featuring a collapsible sidebar
• Migrates from emoji icons to lucide-react for more consistent and professional iconography

Reviewed Changes

Copilot reviewed 13 out of 16 changed files in this pull request and generated 15 comments.

Show a summary per file

File	Description
frontend/src/components/SplitView.tsx	New main component that combines project/session navigation with chat interface in a responsive split layout
frontend/src/hooks/useSessionCache.ts	New hook providing session caching with automatic expiry, size limits, and scroll position preservation
frontend/src/hooks/useCachedHistoryLoader.ts	New hook that loads conversation history with cache integration for improved performance
frontend/src/components/chat/ChatMessages.tsx	Enhanced with scroll position management and restoration for cached sessions
frontend/src/components/MessageComponents.tsx	Updated all message components to use lucide-react icons instead of emojis
frontend/src/components/chat/ChatInput.tsx	Removed emoji decorations from permission mode indicators and added layout improvements
frontend/src/components/messages/CollapsibleDetails.tsx	Added overflow handling for better text wrapping in code blocks
frontend/src/components/messages/MessageContainer.tsx	Added min-width constraint to prevent layout issues
frontend/src/components/ChatPage.tsx	Added back button for improved navigation
frontend/src/App.tsx	Updated routing to use SplitView as the main entry point
frontend/src/types.ts	Added exports for ConversationSummary and ConversationHistory types
frontend/package.json	Added lucide-react dependency for icon components
frontend/vite.config.ts	Changed proxy target from localhost to 127.0.0.1 for better compatibility
backend/deno.lock	Updated @types/node dependency to version 24.x
.gitignore	Added .env to ignored files

Files not reviewed (1)

• frontend/package-lock.json: Language not supported

Comments suppressed due to low confidence (1)

frontend/src/components/chat/ChatInput.tsx:173

• The functions getPermissionModeIndicator and getPermissionModeName are now identical after removing the emojis. Consider removing one of them and using the other in both places to reduce code duplication.

  const getPermissionModeIndicator = (mode: PermissionMode): string => {
    switch (mode) {
      case "default":
        return "normal mode";
      case "plan":
        return "plan mode";
      case "acceptEdits":
        return "accept edits";
    }
  };

  // Get clean permission mode name (without emoji)
  const getPermissionModeName = (mode: PermissionMode): string => {
    switch (mode) {
      case "default":
        return "normal mode";
      case "plan":
        return "plan mode";
      case "acceptEdits":
        return "accept edits";
    }
  };

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Missing historyLoader.loadHistory in the dependency array will cause this effect to use a stale version of the function. While it might work due to useCallback, it's better practice to include all dependencies or explicitly disable the rule with a comment explaining why it's safe.

ESLint is already disabled here, but the comment should explain why loadHistory and clearHistory are intentionally excluded from the dependency array.

[Copilot]

The timeout created in handleScroll is stored in a ref but never cleaned up when the component unmounts. This can cause the callback to execute after unmount, potentially leading to state updates on unmounted components.

Add cleanup in a useEffect return function:

useEffect(() => {
  return () => {
    if (scrollTimeout.current) {
      clearTimeout(scrollTimeout.current);
    }
  };
}, []);

[Copilot]

Similar stale closure issue: The messages array used here is from the closure and doesn't reflect the updated content from updateLastMessage. The cache will contain outdated message content.

Consider using a useEffect to sync the cache with the messages state, or restructure to avoid closure staleness.

[Copilot]

The cache is being updated with the old messages array before the new session starts. Since this is a new session, messages at this point might contain messages from a previous session or be empty. This could cache incorrect data for the new session ID.

Consider caching after the first message is actually added to the new session, not at session creation time.

Suggested change

	// Cache the conversation when we get a session ID
	if (selectedProject && messages.length > 0) {
	setCachedSession(selectedProject, sessionId, messages);
	}

[Copilot]

The preloadSession function has a potential race condition. Between checking cache.current.has(key) (line 143) and setting loadingRef.current.add(key) (line 147), another call could pass the check. Although JavaScript is single-threaded, async operations can interleave. Consider combining the check and set:

if (cache.current.has(key) || loadingRef.current.has(key)) {
  return;
}
loadingRef.current.add(key);

This is already done correctly. However, the issue is that after an async fetch, the session might have been manually cached by another operation, leading to duplicate work. Consider re-checking the cache before calling setCachedSession:

if (response.ok) {
  const data: ConversationHistory = await response.json();
  // Re-check in case it was cached while we were fetching
  if (!cache.current.has(key)) {
    setCachedSession(projectPath, sessionId, data.messages as FrontendAllMessage[]);
  }
}

Suggested change

	setCachedSession(projectPath, sessionId, data.messages as FrontendAllMessage[]);
	// Re-check in case it was cached while we were fetching
	if (!cache.current.has(key)) {
	setCachedSession(projectPath, sessionId, data.messages as FrontendAllMessage[]);
	}

[Copilot]

The large SplitView component (854 lines) has multiple responsibilities: project management, session management, chat functionality, and UI layout. Consider breaking this down into smaller, more focused components:

• ProjectSidebar for the project/session list
• ChatView for the chat interface
• Keep SplitView as a layout coordinator

This would improve maintainability and testability.

[Copilot]

Same redundancy: break-words and overflow-x-auto conflict with each other.

Suggested change

	<pre className="text-sm text-blue-900 dark:text-blue-100 whitespace-pre-wrap break-words overflow-x-auto font-mono leading-relaxed">
	<pre className="text-sm text-blue-900 dark:text-blue-100 whitespace-pre-wrap overflow-x-auto font-mono leading-relaxed">

[Copilot]

The cache update logic is reading from a stale messages array. When addMessage is called, it adds to the component state, but the cache update on line 340 uses the messages array from the closure, which won't include the message that was just added. This means the cache will be one message behind.

Instead, you should update the cache after the message is added to state, or use a functional state update to get the current messages. Consider moving the cache update to a useEffect that watches the messages state when currentSessionId changes.

Suggested change

	// Update cache when new messages are added during streaming
	if (currentSessionId && selectedProject) {
	const updatedMessages = [...messages, msg];
	setCachedSession(
	selectedProject,
	currentSessionId,
	updatedMessages,
	);
	}
	},
	updateLastMessage: (content: string) => {
	// The streaming context expects us to update with content string
	updateLastMessage(content);
	// Update cache when messages are updated during streaming
	if (currentSessionId && selectedProject) {
	const updatedMessages = [...messages];
	const lastMessage = updatedMessages[updatedMessages.length - 1];
	if (lastMessage && 'content' in lastMessage) {
	updatedMessages[updatedMessages.length - 1] = {
	...lastMessage,
	content
	} as AllMessage;
	setCachedSession(
	selectedProject,
	currentSessionId,
	updatedMessages,
	);
	}
	}
	},
	updateLastMessage: (content: string) => {
	// The streaming context expects us to update with content string
	updateLastMessage(content);

[Copilot]

Mutating the cached object's timestamp directly can cause issues with stale references. If another part of the code holds a reference to the cached session object, it will see the timestamp change unexpectedly.

Consider creating a new object instead: cache.current.set(key, { ...cached, timestamp: Date.now() });

Suggested change

	cached.timestamp = Date.now();
	cache.current.set(key, { ...cached, timestamp: Date.now() });

[Copilot]

Similar mutation issue: Directly mutating the cached session object's properties can lead to unexpected side effects if other code holds references to the object.

Consider replacing the object instead: cache.current.set(key, { ...existing, scrollPosition, timestamp: Date.now() });

Suggested change

	existing.scrollPosition = scrollPosition;
	existing.timestamp = Date.now(); // Mark as recently accessed
	cache.current.set(key, {
	...existing,
	scrollPosition,
	timestamp: Date.now(), // Mark as recently accessed
	});