diff --git a/public/claude-ide/index.html b/public/claude-ide/index.html
index 674ef7d8..71b8d28e 100644
--- a/public/claude-ide/index.html
+++ b/public/claude-ide/index.html
@@ -233,7 +233,7 @@
+
+
diff --git a/public/claude-ide/project-manager.js b/public/claude-ide/project-manager.js
new file mode 100644
index 00000000..3992875a
--- /dev/null
+++ b/public/claude-ide/project-manager.js
@@ -0,0 +1,458 @@
+/**
+ * Project Manager - Organizes sessions by project/folder
+ * Inspired by CodeNomad's two-level tab system
+ * https://github.com/NeuralNomadsAI/CodeNomad
+ *
+ * Provides:
+ * - Project-level organization (top tabs)
+ * - Session-level organization (second tabs)
+ * - Easy switching between projects and sessions
+ * - Project creation and management
+ */
+
+'use strict';
+
+// ============================================================
+// Project Manager Class
+// ============================================================
+
+class ProjectManager {
+ constructor() {
+ this.projects = new Map(); // Map
+ this.activeProjectId = null;
+ this.activeSessionId = null;
+ this.initialized = false;
+ }
+
+ /**
+ * Initialize the project manager
+ */
+ async initialize() {
+ if (this.initialized) return;
+
+ console.log('[ProjectManager] Initializing...');
+ await this.loadProjects();
+ this.renderProjectTabs();
+ this.initialized = true;
+
+ // Auto-select first project if available
+ if (this.projects.size > 0 && !this.activeProjectId) {
+ const firstProject = this.projects.values().next().value;
+ this.switchProject(firstProject.id);
+ }
+
+ console.log('[ProjectManager] Initialized with', this.projects.size, 'projects');
+ }
+
+ /**
+ * Load all sessions and organize them by project
+ */
+ async loadProjects() {
+ try {
+ const res = await fetch('/claude/api/claude/sessions');
+ if (!res.ok) throw new Error('Failed to fetch sessions');
+
+ const data = await res.json();
+
+ // Combine active and historical sessions
+ const allSessions = [
+ ...(data.active || []).map(s => ({...s, status: 'active'})),
+ ...(data.historical || []).map(s => ({...s, status: 'historical'}))
+ ];
+
+ // Group by working directory
+ const grouped = new Map();
+
+ allSessions.forEach(session => {
+ const dir = session.workingDir || 'default';
+ const projectKey = dir.replace(/\//g, '-').replace(/^-/, '') || 'default';
+
+ if (!grouped.has(projectKey)) {
+ const projectName = dir.split('/').pop() || 'Default';
+ const project = {
+ id: `project-${projectKey}`,
+ name: this.deduplicateProjectName(projectName, grouped),
+ workingDir: dir,
+ sessions: [],
+ activeSessionId: null,
+ createdAt: this.getOldestSessionTime(allSessions.filter(s => s.workingDir === dir))
+ };
+ grouped.set(projectKey, project);
+ }
+
+ grouped.get(projectKey).sessions.push(session);
+ });
+
+ // Sort sessions by last activity within each project
+ grouped.forEach(project => {
+ project.sessions.sort((a, b) => {
+ const dateA = new Date(a.lastActivity || a.createdAt || a.created_at || 0);
+ const dateB = new Date(b.lastActivity || b.createdAt || b.created_at || 0);
+ return dateB - dateA;
+ });
+
+ // Set active session to most recent
+ if (project.sessions.length > 0) {
+ project.activeSessionId = project.sessions[0].id;
+ }
+ });
+
+ this.projects = grouped;
+ console.log('[ProjectManager] Loaded', this.projects.size, 'projects');
+
+ } catch (error) {
+ console.error('[ProjectManager] Error loading projects:', error);
+ // Create default project on error
+ this.projects.set('default', {
+ id: 'project-default',
+ name: 'Default',
+ workingDir: '',
+ sessions: [],
+ activeSessionId: null,
+ createdAt: Date.now()
+ });
+ }
+ }
+
+ /**
+ * Deduplicate project names by adding counter
+ */
+ deduplicateProjectName(name, existingProjects) {
+ const names = Array.from(existingProjects.values()).map(p => p.name);
+ let finalName = name;
+ let counter = 2;
+
+ while (names.includes(finalName)) {
+ finalName = `${name} (${counter})`;
+ counter++;
+ }
+
+ return finalName;
+ }
+
+ /**
+ * Get oldest session time for a project
+ */
+ getOldestSessionTime(sessions) {
+ if (sessions.length === 0) return Date.now();
+
+ return sessions.reduce((oldest, session) => {
+ const time = new Date(session.createdAt || session.created_at || 0).getTime();
+ return time < oldest ? time : oldest;
+ }, Infinity);
+ }
+
+ /**
+ * Render project tabs
+ */
+ renderProjectTabs() {
+ const container = document.getElementById('project-tabs');
+ if (!container) {
+ console.warn('[ProjectManager] Project tabs container not found');
+ return;
+ }
+
+ const projectsArray = Array.from(this.projects.values());
+
+ if (projectsArray.length === 0) {
+ container.innerHTML = `
+
+ No projects yet
+
+ `;
+ return;
+ }
+
+ container.innerHTML = `
+
+ ${projectsArray.map(project => this.renderProjectTab(project)).join('')}
+
+
+ `;
+ }
+
+ /**
+ * Render a single project tab
+ */
+ renderProjectTab(project) {
+ const isActive = project.id === this.activeProjectId;
+ const sessionCount = project.sessions.length;
+
+ return `
+
+ `;
+ }
+
+ /**
+ * Switch to a different project
+ */
+ async switchProject(projectId) {
+ const project = this.projects.get(projectId.replace('project-', ''));
+ if (!project) {
+ console.warn('[ProjectManager] Project not found:', projectId);
+ return;
+ }
+
+ console.log('[ProjectManager] Switching to project:', project.name);
+ this.activeProjectId = project.id;
+
+ // Re-render project tabs to update active state
+ this.renderProjectTabs();
+
+ // Update session tabs for this project
+ if (window.sessionTabs) {
+ window.sessionTabs.setSessions(project.sessions);
+ window.sessionTabs.setActiveSession(project.activeSessionId);
+ window.sessionTabs.render();
+ }
+
+ // Attach to active session if exists
+ if (project.activeSessionId && typeof attachToSession === 'function') {
+ await attachToSession(project.activeSessionId);
+ } else {
+ // Show empty state
+ this.showEmptyProjectState(project);
+ }
+ }
+
+ /**
+ * Show empty project state
+ */
+ showEmptyProjectState(project) {
+ const messagesContainer = document.getElementById('chat-messages');
+ if (!messagesContainer) return;
+
+ messagesContainer.innerHTML = `
+
+
📁
+
${escapeHtml(project.name)}
+
No sessions yet in this project
+
+
+ No sessions
+
+ `;
+ return;
+ }
+
+ container.innerHTML = `
+
+ ${this.sessions.map(session => this.renderSessionTab(session)).join('')}
+
+
+ `;
+ }
+
+ /**
+ * Render a single session tab
+ */
+ renderSessionTab(session) {
+ const isActive = session.id === this.activeSessionId;
+ const isRunning = session.status === 'running';
+ const sessionName = this.getSessionName(session);
+ const relativeTime = this.getRelativeTime(session);
+
+ return `
+
+ `;
+ }
+
+ /**
+ * Get display name for a session
+ */
+ getSessionName(session) {
+ // Try to get name from metadata
+ if (session.metadata) {
+ if (session.metadata.project) return session.metadata.project;
+ if (session.metadata.title) return session.metadata.title;
+ if (session.metadata.name) return session.metadata.name;
+ }
+
+ // Use working directory
+ if (session.workingDir) {
+ return session.workingDir.split('/').pop();
+ }
+
+ // Fallback to session ID
+ return session.id.substring(0, 8);
+ }
+
+ /**
+ * Get relative time string
+ */
+ getRelativeTime(session) {
+ const date = new Date(session.lastActivity || session.createdAt || session.created_at || Date.now());
+ const now = new Date();
+ const diffMs = now - date;
+ const diffMins = Math.floor(diffMs / 60000);
+ const diffHours = Math.floor(diffMs / 3600000);
+ const diffDays = Math.floor(diffMs / 86400000);
+
+ if (diffMins < 1) return 'Just now';
+ if (diffMins < 60) return `${diffMins}m ago`;
+ if (diffHours < 24) return `${diffHours}h ago`;
+ if (diffDays < 7) return `${diffDays}d ago`;
+ return date.toLocaleDateString();
+ }
+
+ /**
+ * Switch to a different session
+ */
+ async switchSession(sessionId) {
+ console.log('[SessionTabs] Switching to session:', sessionId);
+ this.activeSessionId = sessionId;
+ this.render();
+
+ // Attach to the session
+ if (typeof attachToSession === 'function') {
+ await attachToSession(sessionId);
+ }
+ }
+
+ /**
+ * Create a new session
+ */
+ async createNewSession() {
+ console.log('[SessionTabs] Creating new session');
+
+ // Use project manager to create session in current project
+ if (window.projectManager && window.projectManager.activeProjectId) {
+ await window.projectManager.createNewSessionInProject(window.projectManager.activeProjectId);
+ } else {
+ // Create in default location
+ await window.projectManager.createNewSessionInProject('default');
+ }
+ }
+
+ /**
+ * Close a session (with confirmation)
+ */
+ async closeSession(sessionId) {
+ const session = this.sessions.find(s => s.id === sessionId);
+ if (!session) return;
+
+ const sessionName = this.getSessionName(session);
+
+ // Confirm before closing
+ if (!confirm(`Close session "${sessionName}"?`)) {
+ return;
+ }
+
+ console.log('[SessionTabs] Closing session:', sessionId);
+
+ // Note: This just removes the tab from view
+ // The session still exists on the server
+ this.sessions = this.sessions.filter(s => s.id !== sessionId);
+
+ if (this.activeSessionId === sessionId) {
+ this.activeSessionId = this.sessions.length > 0 ? this.sessions[0].id : null;
+ if (this.activeSessionId) {
+ await this.switchSession(this.activeSessionId);
+ } else {
+ // Show empty state
+ if (window.projectManager) {
+ const project = window.projectManager.getProjectForSession(sessionId);
+ if (project) {
+ window.projectManager.showEmptyProjectState(project);
+ }
+ }
+ }
+ }
+
+ this.render();
+ }
+
+ /**
+ * Show context menu for session
+ */
+ showContextMenu(event, sessionId) {
+ event.preventDefault();
+
+ const session = this.sessions.find(s => s.id === sessionId);
+ if (!session) return;
+
+ // Remove existing menu
+ const existingMenu = document.getElementById('session-context-menu');
+ if (existingMenu) existingMenu.remove();
+
+ // Create context menu
+ const menu = document.createElement('div');
+ menu.id = 'session-context-menu';
+ menu.className = 'context-menu';
+ menu.innerHTML = `
+
+
+
+
+
+ `;
+
+ // Position menu
+ const rect = event.target.getBoundingClientRect();
+ menu.style.position = 'fixed';
+ menu.style.top = `${rect.bottom + 4}px`;
+ menu.style.left = `${rect.left}px`;
+ menu.style.minWidth = '150px';
+
+ document.body.appendChild(menu);
+
+ // Add event listeners
+ menu.querySelector('[data-action="rename"]').addEventListener('click', () => {
+ this.renameSession(session);
+ this.closeContextMenu();
+ });
+
+ menu.querySelector('[data-action="duplicate"]').addEventListener('click', () => {
+ this.duplicateSession(session);
+ this.closeContextMenu();
+ });
+
+ menu.querySelector('[data-action="delete"]').addEventListener('click', () => {
+ this.deleteSession(session);
+ this.closeContextMenu();
+ });
+
+ menu.querySelector('[data-action="close"]').addEventListener('click', () => {
+ this.closeSession(session.id);
+ this.closeContextMenu();
+ });
+
+ // Close menu on click outside
+ setTimeout(() => {
+ document.addEventListener('click', this.closeContextMenu, { once: true });
+ }, 10);
+ }
+
+ /**
+ * Close context menu
+ */
+ closeContextMenu() {
+ document.getElementById('session-context-menu')?.remove();
+ }
+
+ /**
+ * Rename a session
+ */
+ async renameSession(session) {
+ const currentName = this.getSessionName(session);
+ const newName = prompt('Enter new name:', currentName);
+
+ if (newName && newName !== currentName) {
+ console.log('[SessionTabs] Renaming session to:', newName);
+
+ // Update metadata
+ if (!session.metadata) {
+ session.metadata = {};
+ }
+ session.metadata.project = newName; // Use 'project' field as name
+
+ // Update on server
+ try {
+ await fetch(`/claude/api/claude/sessions/${session.id}`, {
+ method: 'PATCH',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ metadata: session.metadata })
+ });
+
+ // Refresh tabs
+ this.render();
+ if (window.projectManager) {
+ await window.projectManager.refresh();
+ }
+ } catch (error) {
+ console.error('[SessionTabs] Error renaming session:', error);
+ }
+ }
+ }
+
+ /**
+ * Duplicate a session
+ */
+ async duplicateSession(session) {
+ console.log('[SessionTabs] Duplicating session:', session.id);
+
+ // Create new session with same metadata
+ try {
+ const res = await fetch('/claude/api/claude/sessions', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ workingDir: session.workingDir,
+ metadata: {
+ ...session.metadata,
+ project: `${this.getSessionName(session)} (copy)`,
+ duplicatedFrom: session.id
+ }
+ })
+ });
+
+ if (res.ok) {
+ const data = await res.json();
+ if (data.success && window.projectManager) {
+ await window.projectManager.refresh();
+ // Switch to new session
+ await this.switchSession(data.session.id);
+ }
+ }
+ } catch (error) {
+ console.error('[SessionTabs] Error duplicating session:', error);
+ }
+ }
+
+ /**
+ * Delete a session
+ */
+ async deleteSession(session) {
+ const sessionName = this.getSessionName(session);
+
+ if (!confirm(`Permanently delete "${sessionName}"? This cannot be undone.`)) {
+ return;
+ }
+
+ console.log('[SessionTabs] Deleting session:', session.id);
+
+ try {
+ await fetch(`/claude/api/claude/sessions/${session.id}`, {
+ method: 'DELETE'
+ });
+
+ // Refresh
+ if (window.projectManager) {
+ await window.projectManager.refresh();
+ }
+ } catch (error) {
+ console.error('[SessionTabs] Error deleting session:', error);
+ }
+ }
+
+ /**
+ * Update session (e.g., when it receives new activity)
+ */
+ updateSession(session) {
+ const index = this.sessions.findIndex(s => s.id === session.id);
+ if (index !== -1) {
+ this.sessions[index] = session;
+ // Move to top
+ this.sessions.splice(index, 1);
+ this.sessions.unshift(session);
+ this.render();
+ }
+ }
+}
+
+// ============================================================
+// Helper Functions
+// ============================================================
+
+/**
+ * Escape HTML to prevent XSS
+ */
+function escapeHtml(text) {
+ if (text === null || text === undefined) return '';
+ const div = document.createElement('div');
+ div.textContent = text;
+ return div.innerHTML;
+}
+
+// ============================================================
+// Initialize Globally
+// ============================================================
+
+window.sessionTabs = new SessionTabs();
+
+// Auto-initialize when DOM is ready
+if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', () => window.sessionTabs.initialize());
+} else {
+ window.sessionTabs.initialize();
+}
+
+console.log('[SessionTabs] Module loaded');