# OpenCode-Style Session Management Implementation Plan

> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.

**Goal:** Transform Sessions view from duplicate command interface into a read-only project history browser that seamlessly integrates with Chat view.

**Architecture:**
- Backend: Add project filtering to sessions API, fix running status detection
- Frontend: Remove duplicate command input from Sessions view, add "Continue in Chat" action, implement read-only detail view
- Integration: Sessions view → Chat view switching with pending session detection

**Tech Stack:** Node.js, Express.js, WebSocket, Vanilla JavaScript, SQLite

---

## Task 1: Backend - Add Project Filtering to Sessions API

**Files:**
- Modify: `server.js:1029` (GET /claude/api/claude/sessions endpoint)

**Step 1: Read current sessions endpoint implementation**

Run: `grep -n "app.get.*claude/sessions" server.js -A 20`
Expected: Shows current implementation without project filtering

**Step 2: Add project query parameter filtering**

Find the sessions endpoint around line 1029 in server.js. Replace the endpoint with:

```javascript
// GET /claude/api/claude/sessions?project=/encoded/path
app.get('/claude/api/claude/sessions', requireAuth, async (req, res) => {
  try {
    const { project } = req.query;

    let activeSessions = claudeService.listSessions();
    let historicalSessions = claudeService.loadHistoricalSessions();

    // PROJECT FILTERING
    if (project) {
      const projectPath = decodeURIComponent(project);
      console.log('[SESSIONS] Filtering by project path:', projectPath);

      activeSessions = activeSessions.filter(s => {
        const sessionPath = s.workingDir || '';
        return sessionPath.startsWith(projectPath) || sessionPath === projectPath;
      });

      historicalSessions = historicalSessions.filter(s => {
        const sessionPath = s.workingDir || '';
        return sessionPath.startsWith(projectPath) || sessionPath === projectPath;
      });

      console.log('[SESSIONS] Filtered to', activeSessions.length, 'active,', historicalSessions.length, 'historical');
    }

    res.json({
      active: activeSessions,
      historical: historicalSessions
    });
  } catch (error) {
    console.error('[SESSIONS] Error:', error);
    res.status(500).json({ error: error.message });
  }
});
```

**Step 3: Test the endpoint manually**

Run: `curl -s "http://localhost:3010/claude/api/claude/sessions?project=%2Fhome%2Furoma" -H "Cookie: connect.sid=YOUR_SESSION_COOKIE" | jq '.active | length'`
Expected: Returns count of sessions from /home/uroma path

**Step 4: Commit**

```bash
git add server.js
git commit -m "feat(sessions): add project filtering to sessions API

Adds ?project query parameter to filter sessions by working directory.
This ensures Sessions view only shows relevant sessions for current project.

- Decode project parameter from URL
- Filter both active and historical sessions
- Add logging for debugging

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>"
```

---

## Task 2: Backend - Fix Session Status Detection

**Files:**
- Modify: `services/claude-service.js:446` (listSessions method)

**Step 1: Read current listSessions implementation**

Run: `grep -n "listSessions()" services/claude-service.js -A 15`
Expected: Shows current implementation that marks all sessions as "running"

**Step 2: Update status detection logic**

Find the `listSessions()` method around line 446. Replace the status logic:

```javascript
listSessions() {
  return Array.from(this.sessions.values()).map(session => {
    const metadata = this.calculateSessionMetadata(session);

    // FIX: Only mark as running if process is actually alive
    const isRunning = session.status === 'running' &&
                      session.process &&
                      !session.process.killed;

    return {
      id: session.id,
      pid: session.pid,
      workingDir: session.workingDir,
      status: isRunning ? 'running' : 'stopped',
      createdAt: session.createdAt,
      lastActivity: session.lastActivity,
      metadata: session.metadata,
      ...metadata
    };
  });
}
```

**Step 3: Test status detection**

Run: `curl -s "http://localhost:3010/claude/api/claude/sessions" -H "Cookie: connect.sid=YOUR_SESSION_COOKIE" | jq '.active[0].status'`
Expected: Returns "running" only if process alive, "stopped" otherwise

**Step 4: Commit**

```bash
git add services/claude-service.js
git commit -m "fix(sessions): correctly detect running session status

Only marks sessions as 'running' if the process is actually alive.
Historical sessions loaded from disk now correctly show as 'stopped'.

- Check process.killed flag
- Verify process exists before marking as running
- Fixes misleading status badges in UI

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>"
```

---

## Task 3: Frontend - Update loadSessions() with Project Filtering

**Files:**
- Modify: `public/claude-ide/ide.js:348` (loadSessions function)

**Step 1: Read current loadSessions implementation**

Run: `grep -n "async function loadSessions()" public/claude-ide/ide.js -A 30`
Expected: Shows current implementation that loads all sessions

**Step 2: Replace loadSessions() with filtered version**

Find the `loadSessions()` function around line 348. Replace entire function:

```javascript
async function loadSessions() {
    const sessionsListEl = document.getElementById('sessions-list');

    try {
        // Get current project from URL
        const urlParams = new URLSearchParams(window.location.search);
        const projectPath = urlParams.get('project');

        // Build API URL with project filter
        let apiUrl = '/claude/api/claude/sessions';
        if (projectPath) {
            apiUrl += `?project=${encodeURIComponent(projectPath)}`;
            console.log('[Sessions] Loading sessions for project:', projectPath);
        }

        // Show loading state
        sessionsListEl.innerHTML = '<div class="loading">Loading sessions...</div>';

        const res = await fetch(apiUrl);

        // Handle HTTP errors
        if (!res.ok) {
            if (res.status === 401) {
                sessionsListEl.innerHTML = `
                    <div class="error-state">
                        <p>⚠️ Session expired</p>
                        <button class="btn-primary" onclick="location.reload()">Login Again</button>
                    </div>
                `;
                return;
            }
            throw new Error(`HTTP ${res.status}: ${res.statusText}`);
        }

        const data = await res.json();

        // Handle API errors
        if (data.error) {
            throw new Error(data.error);
        }

        const allSessions = [
            ...(data.active || []).map(s => ({...s, type: 'active'})),
            ...(data.historical || []).map(s => ({...s, type: 'historical'}))
        ];

        // Sort by last activity (newest first)
        allSessions.sort((a, b) => {
            const dateA = new Date(a.lastActivity || a.createdAt || a.created_at);
            const dateB = new Date(b.lastActivity || b.createdAt || b.created_at);
            return dateB - dateA;
        });

        // Empty state
        if (allSessions.length === 0) {
            const projectName = projectPath ? projectPath.split('/').pop() : 'this project';
            sessionsListEl.innerHTML = `
                <div class="empty-state">
                    <div class="empty-icon">📂</div>
                    <p>No sessions found for <strong>${escapeHtml(projectName)}</strong></p>
                    <button class="btn-primary" onclick="startNewChat()">Create New Session</button>
                </div>
            `;
            return;
        }

        // Render session list
        sessionsListEl.innerHTML = allSessions.map(session => {
            const isRunning = session.status === 'running' && session.type === 'active';
            const relativeTime = getRelativeTime(session);
            const messageCount = session.messageCount || session.metadata?.messageCount || 0;

            return `
                <div class="session-item ${session.type}" onclick="viewSessionDetails('${session.id}')">
                    <div class="session-header">
                        <div class="session-info">
                            <span class="session-id">${session.id.substring(0, 12)}...</span>
                            <span class="session-status ${isRunning ? 'running' : 'stopped'}">
                                ${isRunning ? '🟢 Running' : '⏸️ ' + (session.type === 'historical' ? 'Historical' : 'Stopped')}
                            </span>
                        </div>
                        <div class="session-time">${relativeTime}</div>
                    </div>
                    <div class="session-meta">
                        <div class="session-path">📁 ${escapeHtml(session.workingDir)}</div>
                        <div class="session-stats">
                            <span>💬 ${messageCount} messages</span>
                        </div>
                    </div>
                </div>
            `;
        }).join('');

    } catch (error) {
        console.error('[loadSessions] Error:', error);
        sessionsListEl.innerHTML = `
            <div class="error-state">
                <div class="error-icon">⚠️</div>
                <p>Failed to load sessions</p>
                <p class="error-message">${escapeHtml(error.message)}</p>
                <button class="btn-secondary" onclick="loadSessions()">Try Again</button>
            </div>
        `;
    }
}
```

**Step 3: Add helper functions**

Add these helper functions after loadSessions():

```javascript
function getRelativeTime(session) {
    const date = new Date(session.lastActivity || session.createdAt || session.created_at);
    const now = new Date();
    const diffMins = Math.floor((now - date) / 60000);

    if (diffMins < 1) return 'Just now';
    if (diffMins < 60) return `${diffMins}m ago`;
    if (diffMins < 1440) return `${Math.floor(diffMins/60)}h ago`;
    return `${Math.floor(diffMins/1440)}d ago`;
}

function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}
```

**Step 4: Test in browser**

Open: http://localhost:3010/claude/ide?project=%2Fhome%2Furoma
Click: Sessions tab
Expected: Only shows sessions from /home/uroma, sorted by last activity

**Step 5: Commit**

```bash
git add public/claude-ide/ide.js
git commit -m "feat(sessions): add project filtering and improved UI

Sessions view now filters by current project from URL parameter.
Adds sorting, relative timestamps, and better error handling.

- Extract project from ?project query parameter
- Filter sessions by working directory
- Sort by last activity (newest first)
- Add relative time display (5m ago, 2h ago)
- Add empty state with 'Create New Session' button
- Add comprehensive error states
- XSS prevention with escapeHtml()

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>"
```

---

## Task 4: Frontend - Replace viewSession() with viewSessionDetails()

**Files:**
- Modify: `public/claude-ide/ide.js:380` (viewSession function)

**Step 1: Read current viewSession implementation**

Run: `grep -n "async function viewSession" public/claude-ide/ide.js -A 50`
Expected: Shows current implementation with duplicate command input

**Step 2: Replace viewSession() with viewSessionDetails()**

Find the `viewSession()` function around line 380. Replace entire function:

```javascript
async function viewSessionDetails(sessionId) {
    const detailEl = document.getElementById('session-detail');

    try {
        // Show loading state
        detailEl.innerHTML = '<div class="loading">Loading session details...</div>';

        const res = await fetch(`/claude/api/claude/sessions/${sessionId}`);

        // Handle 404 - session not found
        if (res.status === 404) {
            detailEl.innerHTML = `
                <div class="error-state">
                    <div class="error-icon">🔍</div>
                    <h3>Session Not Found</h3>
                    <p>The session <code>${escapeHtml(sessionId)}</code> could not be found.</p>
                    <button class="btn-primary" onclick="loadSessions()">Back to Sessions</button>
                </div>
            `;
            return;
        }

        if (!res.ok) {
            throw new Error(`HTTP ${res.status}: ${res.statusText}`);
        }

        const data = await res.json();

        if (data.error) {
            throw new Error(data.error);
        }

        if (!data.session) {
            throw new Error('No session data in response');
        }

        const session = data.session;
        const isRunning = session.status === 'running' && session.pid;
        const messageCount = session.outputBuffer?.length || 0;

        // Render session detail card
        detailEl.innerHTML = `
            <div class="session-detail-card">
                <div class="session-detail-header">
                    <div class="session-title">
                        <h2>Session ${session.id.substring(0, 12)}...</h2>
                        <span class="session-status-badge ${isRunning ? 'running' : 'stopped'}">
                            ${isRunning ? '🟢 Running' : '⏸️ Stopped'}
                        </span>
                    </div>
                    <div class="session-detail-actions">
                        <button class="btn-primary" onclick="continueSessionInChat('${session.id}')">
                            💬 Continue in Chat
                        </button>
                        <button class="btn-secondary" onclick="duplicateSession('${session.id}')">
                            📋 Duplicate
                        </button>
                        ${isRunning ? `
                            <button class="btn-danger" onclick="terminateSession('${session.id}')">
                                ⏹️ Terminate
                            </button>
                        ` : ''}
                    </div>
                </div>

                <div class="session-detail-meta">
                    <div class="meta-row">
                        <span class="meta-label">Working Directory:</span>
                        <span class="meta-value">${escapeHtml(session.workingDir)}</span>
                    </div>
                    <div class="meta-row">
                        <span class="meta-label">Created:</span>
                        <span class="meta-value">${new Date(session.createdAt).toLocaleString()}</span>
                    </div>
                    <div class="meta-row">
                        <span class="meta-label">Last Activity:</span>
                        <span class="meta-value">${new Date(session.lastActivity).toLocaleString()}</span>
                    </div>
                    <div class="meta-row">
                        <span class="meta-label">Messages:</span>
                        <span class="meta-value">${messageCount}</span>
                    </div>
                    ${session.pid ? `
                        <div class="meta-row">
                            <span class="meta-label">PID:</span>
                            <span class="meta-value">${session.pid}</span>
                        </div>
                    ` : ''}
                </div>

                <div class="session-context">
                    <h3>Token Usage</h3>
                    <div class="context-bar">
                        <div class="context-fill" style="width: ${Math.min(100, (session.context?.totalTokens || 0) / (session.context?.maxTokens || 200000) * 100}%"></div>
                    </div>
                    <div class="context-stats">
                        <span>${(session.context?.totalTokens || 0).toLocaleString()} / ${(session.context?.maxTokens || 200000).toLocaleString()} tokens</span>
                        <span>${Math.round((session.context?.totalTokens || 0) / (session.context?.maxTokens || 200000) * 100)}% used</span>
                    </div>
                </div>

                <div class="session-output-preview">
                    <h3>Session Output (${messageCount} entries)</h3>
                    <div class="output-scroll-area" id="session-output-preview">
                        ${session.outputBuffer?.slice(0, 50).map(entry => `
                            <div class="output-entry ${entry.type}">
                                <div class="output-header">
                                    <span class="output-type">${entry.type}</span>
                                    <span class="output-time">${new Date(entry.timestamp).toLocaleTimeString()}</span>
                                </div>
                                <div class="output-content">${escapeHtml(entry.content.substring(0, 500))}${entry.content.length > 500 ? '...' : ''}</div>
                            </div>
                        `).join('') || '<p class="no-output">No output yet</p>'}
                        ${session.outputBuffer?.length > 50 ? `<p class="output-truncated">...and ${session.outputBuffer.length - 50} more entries</p>` : ''}
                    </div>
                </div>
            </div>
        `;

        currentSession = session;

    } catch (error) {
        console.error('[viewSessionDetails] Error:', error);
        detailEl.innerHTML = `
            <div class="error-state">
                <div class="error-icon">⚠️</div>
                <h3>Failed to Load Session</h3>
                <p class="error-message">${escapeHtml(error.message)}</p>
                <button class="btn-primary" onclick="loadSessions()">Back to Sessions</button>
            </div>
        `;
    }
}
```

**Step 3: Update session list onclick handler**

In loadSessions(), change the onclick:
```javascript
// Before: onclick="viewSession('${session.id}')"
// After:
onclick="viewSessionDetails('${session.id}')"
```

**Step 4: Test in browser**

Open: http://localhost:3010/claude/ide?project=%2Fhome%2Furoma
Click: Sessions tab → click on a session
Expected: Shows detail view with action buttons, NO command input

**Step 5: Commit**

```bash
git add public/claude-ide/ide.js
git commit -m "feat(sessions): transform to read-only detail view

Removes duplicate command input from Sessions view.
Transforms into history browser with 'Continue in Chat' action.

- Replace viewSession() with viewSessionDetails()
- Remove duplicate command input field
- Add action buttons: Continue, Duplicate, Terminate
- Show session metadata (created, last activity, messages)
- Show token usage progress bar
- Show output preview (first 50 entries)
- Add comprehensive error states (404, 500)
- Proper status badges (running vs stopped)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>"
```

---

## Task 5: Frontend - Add Session Action Functions

**Files:**
- Modify: `public/claude-ide/ide.js` (add after viewSessionDetails)

**Step 1: Add continueSessionInChat() function**

```javascript
async function continueSessionInChat(sessionId) {
    console.log('[Sessions] Continuing session in Chat:', sessionId);

    try {
        showLoadingOverlay('Loading session...');

        const res = await fetch(`/claude/api/claude/sessions/${sessionId}`);
        if (!res.ok) {
            throw new Error(`HTTP ${res.status}`);
        }

        const data = await res.json();
        if (!data.session) {
            throw new Error('Session not found');
        }

        const session = data.session;

        // Check if session is runnable
        if (session.status === 'terminated' || session.status === 'stopped') {
            hideLoadingOverlay();

            if (confirm('This session has ended. Do you want to create a new session with the same working directory?')) {
                await duplicateSession(sessionId);
            }
            return;
        }

        // Store pending session and switch views
        window.pendingSessionId = sessionId;
        window.pendingSessionData = session;

        switchView('chat');

    } catch (error) {
        console.error('[continueSessionInChat] Error:', error);
        hideLoadingOverlay();
        showToast('❌ Failed to load session: ' + error.message, 'error');
    }
}
```

**Step 2: Add duplicateSession() function**

```javascript
async function duplicateSession(sessionId) {
    try {
        const res = await fetch(`/claude/api/claude/sessions/${sessionId}`);
        const data = await res.json();

        if (!data.session) {
            throw new Error('Session not found');
        }

        const workingDir = data.session.workingDir;
        const projectName = workingDir.split('/').pop();

        showLoadingOverlay('Duplicating session...');

        const createRes = await fetch('/claude/api/claude/sessions', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                workingDir,
                metadata: {
                    type: 'chat',
                    source: 'web-ide',
                    project: projectName,
                    duplicatedFrom: sessionId
                }
            })
        });

        if (!createRes.ok) {
            throw new Error(`HTTP ${createRes.status}`);
        }

        const createData = await createRes.json();

        hideLoadingOverlay();
        showToast('✅ Session duplicated!', 'success');

        loadSessions();

        setTimeout(() => {
            if (confirm('Start chatting in the duplicated session?')) {
                continueSessionInChat(createData.session.id);
            }
        }, 500);

    } catch (error) {
        console.error('[duplicateSession] Error:', error);
        hideLoadingOverlay();
        showToast('Failed to duplicate session: ' + error.message, 'error');
    }
}
```

**Step 3: Add terminateSession() function**

```javascript
async function terminateSession(sessionId) {
    if (!confirm('Are you sure you want to terminate this session?')) {
        return;
    }

    try {
        showLoadingOverlay('Terminating session...');

        const res = await fetch(`/claude/api/claude/sessions/${sessionId}`, {
            method: 'DELETE'
        });

        if (!res.ok) {
            throw new Error(`HTTP ${res.status}`);
        }

        hideLoadingOverlay();
        showToast('✅ Session terminated', 'success');

        loadSessions();

        if (currentSession && currentSession.id === sessionId) {
            document.getElementById('session-detail').innerHTML = `
                <div class="placeholder">
                    <h2>Session Terminated</h2>
                    <p>Select another session from the sidebar</p>
                </div>
            `;
            currentSession = null;
        }

    } catch (error) {
        console.error('[terminateSession] Error:', error);
        hideLoadingOverlay();
        showToast('Failed to terminate session: ' + error.message, 'error');
    }
}
```

**Step 4: Test actions in browser**

Open: http://localhost:3010/claude/ide?project=%2Fhome%2Furoma
Click: Sessions tab → click session → click "Continue in Chat"
Expected: Switches to Chat view, session loads

**Step 5: Commit**

```bash
git add public/claude-ide/ide.js
git commit -m "feat(sessions): add session action functions

Add Continue, Duplicate, and Terminate actions for sessions.
Implements seamless Sessions → Chat view switching.

- continueSessionInChat(): Switch to Chat view with session
- duplicateSession(): Create new session with same workingDir
- terminateSession(): Stop running session with confirmation
- Store pending session for Chat view to pick up
- Handle terminated sessions gracefully

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>"
```

---

## Task 6: Frontend - Chat View Integration

**Files:**
- Modify: `public/claude-ide/chat-functions.js` (update loadChatView)

**Step 1: Read current loadChatView implementation**

Run: `grep -n "async function loadChatView()" public/claude-ide/chat-functions.js -A 5`
Expected: Shows current loadChatView function

**Step 2: Add pending session detection**

At the START of loadChatView(), add this logic:

```javascript
async function loadChatView() {
    console.log('[loadChatView] Loading Chat view');

    // Check if there's a pending session from Sessions view
    if (window.pendingSessionId) {
        console.log('[loadChatView] Detected pending session:', window.pendingSessionId);

        const sessionId = window.pendingSessionId;
        const sessionData = window.pendingSessionData;

        // Clear pending session (consume it)
        window.pendingSessionId = null;
        window.pendingSessionData = null;

        // Load the session
        await loadSessionIntoChat(sessionId, sessionData);
        return;
    }

    // ... rest of existing loadChatView() logic continues unchanged
```

**Step 3: Add loadSessionIntoChat() function**

Add this new function after loadChatView():

```javascript
async function loadSessionIntoChat(sessionId, sessionData = null) {
    try {
        appendSystemMessage('📂 Loading session...');

        // If no session data provided, fetch it
        if (!sessionData) {
            const res = await fetch(`/claude/api/claude/sessions/${sessionId}`);
            if (!res.ok) {
                throw new Error(`HTTP ${res.status}`);
            }
            const data = await res.json();
            sessionData = data.session;
        }

        if (!sessionData) {
            throw new Error('Session not found');
        }

        // Set session IDs
        attachedSessionId = sessionId;
        chatSessionId = sessionId;

        // Update UI
        document.getElementById('current-session-id').textContent = sessionId;

        // Clear chat display
        clearChatDisplay();

        // Load session messages (both user and assistant)
        if (sessionData.outputBuffer && sessionData.outputBuffer.length > 0) {
            sessionData.outputBuffer.forEach(entry => {
                if (entry.role) {
                    appendMessage(entry.role, entry.content, false);
                } else {
                    // Legacy format - default to assistant
                    appendMessage('assistant', entry.content, false);
                }
            });
        }

        // Show success message
        const isRunning = sessionData.status === 'running';
        const statusText = isRunning ? 'Active session' : 'Historical session';
        appendSystemMessage(`✅ Loaded ${statusText} from ${new Date(sessionData.createdAt).toLocaleString()}`);

        if (!isRunning) {
            appendSystemMessage('ℹ️ This is a historical session. Messages are read-only.');
        }

        // Update chat history sidebar to highlight this session
        if (typeof loadChatHistory === 'function') {
            loadChatHistory();
        }

        // Subscribe to session for live updates (if running)
        if (isRunning) {
            subscribeToSession(sessionId);
        }

        // Focus input for active sessions
        if (isRunning) {
            setTimeout(() => {
                const input = document.getElementById('chat-input');
                if (input) input.focus();
            }, 100);
        }

    } catch (error) {
        console.error('[loadSessionIntoChat] Error:', error);
        appendSystemMessage('❌ Failed to load session: ' + error.message);
    }
}
```

**Step 4: Test full workflow**

Open: http://localhost:3010/claude/ide?project=%2Fhome%2Furoma
Click: Sessions tab → click session → "Continue in Chat"
Expected: Switches to Chat view, session loads with all messages

**Step 5: Commit**

```bash
git add public/claude-ide/chat-functions.js
git commit -m "feat(chat): add pending session detection

Detects and loads sessions continued from Sessions view.
Seamless integration between history browser and workspace.

- Check window.pendingSessionId on loadChatView()
- Add loadSessionIntoChat() to restore session messages
- Handle both active and historical sessions
- Subscribe to live updates for running sessions
- Update chat history sidebar to highlight active session
- Restore user and assistant messages correctly

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>"
```

---

## Task 7: Frontend - Add CSS Styling

**Files:**
- Modify: `public/claude-ide/ide.css` (append at end)

**Step 1: Add Sessions view styles**

Append to `public/claude-ide/ide.css`:

```css
/* ============================================
   SESSIONS VIEW - History Browser Styles
   ============================================ */

/* Sessions List Container */
.sessions-list {
    overflow-y: auto;
    max-height: calc(100vh - 200px);
    padding: 12px;
}

/* Session List Items */
.session-item {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.session-item:hover {
    background: #252525;
    border-color: #4a9eff;
    transform: translateX(4px);
}

.session-item.historical {
    border-left: 3px solid #888;
}

.session-item.historical:hover {
    border-left-color: #4a9eff;
}

/* Session Header */
.session-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.session-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.session-id {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
    font-size: 13px;
    font-weight: 600;
    color: #e0e0e0;
}

/* Session Status Badges */
.session-status {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.session-status.running {
    background: rgba(81, 207, 102, 0.2);
    color: #51cf66;
    border: 1px solid rgba(81, 207, 102, 0.3);
}

.session-status.stopped {
    background: rgba(136, 136, 136, 0.2);
    color: #888;
    border: 1px solid rgba(136, 136, 136, 0.3);
}

.session-time {
    font-size: 12px;
    color: #888;
}

/* Session Meta */
.session-meta {
    font-size: 12px;
    color: #aaa;
}

.session-path {
    margin-bottom: 4px;
    word-break: break-all;
}

.session-stats {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: #888;
}

/* Empty/Error States */
.empty-state, .error-state {
    text-align: center;
    padding: 40px 20px;
    color: #888;
}

.empty-icon, .error-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.error-message {
    font-size: 13px;
    color: #ff6b6b;
    margin: 8px 0 16px 0;
}

/* ============================================
   SESSION DETAIL CARD
   ============================================ */

.session-detail-card {
    background: #1a1a1a;
    border-radius: 12px;
    padding: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.session-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #333;
}

.session-title h2 {
    margin: 0 0 8px 0;
    font-size: 24px;
    color: #e0e0e0;
}

.session-status-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.session-status-badge.running {
    background: rgba(81, 207, 102, 0.2);
    color: #51cf66;
}

.session-status-badge.stopped {
    background: rgba(136, 136, 136, 0.2);
    color: #888;
}

.session-detail-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.session-detail-actions .btn-primary {
    background: linear-gradient(135deg, #4a9eff 0%, #a78bfa 100%);
    border: none;
    padding: 10px 20px;
    font-weight: 600;
}

.session-detail-actions .btn-secondary {
    background: #2a2a2a;
    border: 1px solid #444;
    padding: 10px 16px;
}

.session-detail-actions .btn-danger {
    background: rgba(255, 107, 107, 0.2);
    border: 1px solid rgba(255, 107, 107, 0.3);
    color: #ff6b6b;
    padding: 10px 16px;
}

.session-detail-actions .btn-danger:hover {
    background: rgba(255, 107, 107, 0.3);
}

.session-detail-meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
    padding: 16px;
    background: #0d0d0d;
    border-radius: 8px;
}

.meta-row {
    display: flex;
    gap: 8px;
    font-size: 13px;
}

.meta-label {
    color: #888;
    font-weight: 600;
    min-width: 120px;
}

.meta-value {
    color: #e0e0e0;
    word-break: break-all;
}

.session-context {
    margin-bottom: 24px;
    padding: 16px;
    background: #0d0d0d;
    border-radius: 8px;
}

.session-context h3 {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: #e0e0e0;
}

.context-bar {
    width: 100%;
    height: 8px;
    background: #333;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.context-fill {
    height: 100%;
    background: linear-gradient(90deg, #4a9eff 0%, #a78bfa 100%);
    transition: width 0.3s ease;
}

.context-stats {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #888;
}

.session-output-preview h3 {
    margin: 0 0 16px 0;
    font-size: 16px;
    color: #e0e0e0;
}

.output-scroll-area {
    max-height: 400px;
    overflow-y: auto;
    background: #0d0d0d;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 12px;
}

.output-entry {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #252525;
}

.output-entry:last-child {
    border-bottom: none;
}

.output-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.output-type {
    display: inline-block;
    padding: 2px 8px;
    background: #252525;
    color: #888;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 3px;
}

.output-time {
    font-size: 11px;
    color: #666;
}

.output-content {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
    font-size: 12px;
    color: #aaa;
    white-space: pre-wrap;
    word-break: break-all;
    line-height: 1.5;
}

.no-output {
    text-align: center;
    padding: 40px;
    color: #666;
    font-style: italic;
}

.output-truncated {
    text-align: center;
    padding: 12px;
    color: #4a9eff;
    font-size: 13px;
}

/* Responsive */
@media (max-width: 768px) {
    .session-detail-header {
        flex-direction: column;
        gap: 16px;
    }

    .session-detail-actions {
        width: 100%;
        flex-direction: column;
    }

    .session-detail-actions button {
        width: 100%;
    }

    .session-detail-meta {
        grid-template-columns: 1fr;
    }
}
```

**Step 2: Test styling in browser**

Open: http://localhost:3010/claude/ide?project=%2Fhome%2Furoma
Click: Sessions tab
Expected: Clean, styled session list with hover effects

**Step 3: Commit**

```bash
git add public/claude-ide/ide.css
git commit -m "style(sessions): add history browser styling

Add comprehensive styling for Sessions view transformation.
Clean, readable history browser with visual hierarchy.

- Session list items with hover effects
- Status badges (running/stopped/historical)
- Session detail card with metadata grid
- Token usage progress bar
- Output preview with scroll area
- Empty and error states
- Responsive design for mobile

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>"
```

---

## Task 8: Testing & Validation

**Files:**
- Manual testing checklist
- No code changes

**Step 1: Test project filtering**

Open: http://localhost:3010/claude/ide?project=%2Fhome%2Furoma
Click: Sessions tab
Verify: Only shows sessions from /home/uroma

**Step 2: Test session detail view**

Click: On a session
Verify: Shows detail card with action buttons, no command input

**Step 3: Test Continue in Chat**

Click: "Continue in Chat" button
Verify: Switches to Chat view, session loads with messages

**Step 4: Test Duplicate session**

Click: Sessions tab → click session → "Duplicate"
Verify: New session created, confirm dialog appears

**Step 5: Test Terminate (for running sessions)**

Click: Sessions tab → click running session → "Terminate"
Verify: Confirm dialog, session stopped

**Step 6: Test empty state**

Change URL: ?project=/nonexistent/path
Click: Sessions tab
Verify: Shows "No sessions found" message

**Step 7: Test status badges**

Verify: Running sessions show 🟢, historical show ⏸️
Verify: Status badges are color-coded correctly

**Step 8: Test relative time**

Create new session, wait 5 minutes
Verify: Shows "5m ago" (or similar)

**Step 9: Test error handling**

Try: Load non-existent session ID manually
Verify: Shows error message with "Back to Sessions" button

**Step 10: Cross-browser test**

Test in: Chrome, Firefox
Verify: All features work correctly

**Step 11: Update documentation**

Edit: README.md
Add: v1.3.0 section documenting Sessions view changes

**Step 12: Create CHANGELOG entry**

Edit: CHANGELOG.md
Add: v1.3.0 entry with all changes

**Step 13: Final commit**

```bash
git add README.md CHANGELOG.md
git commit -m "docs: document OpenCode-style session management

Add v1.3.0 release notes for Sessions view transformation.
Complete documentation of new workflow and features.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>"

git push origin main
```

---

## Summary

**Total Tasks:** 8
**Estimated Time:** ~5 hours
**Lines Changed:** ~800 (backend: ~150, frontend: ~650)

**Key Features:**
✅ Project-based session filtering
✅ Read-only session history browser
✅ Continue in Chat action
✅ Duplicate session action
✅ Terminate session action
✅ Comprehensive error handling
✅ OpenCode-style workflow

**Testing:** 11 manual test cases covering all features

**Next Steps:** Deploy to production, monitor for issues, gather user feedback