feat: improve session history with first prompt + clickable monitor rows (closes #45)

src/web/public/panels-ui.js

@@ -3049,8 +3049,9 @@ Object.assign(CodemanApp.prototype, {
         modelHtml = `<span class="monitor-model-badge ${modelShort}">${modelShort}</span>`;
       }
 
+      const sid = escapeHtml(muxSession.sessionId);
       html += `
-        <div class="process-item">
+        <div class="process-item process-item-clickable" onclick="app.selectSession('${sid}')" title="Switch to session">
           <span class="monitor-status-badge ${statusClass}">${statusLabel}</span>
           <div class="process-info">
             <div class="process-name">${modelHtml} ${escapeHtml(muxSession.name || muxSession.muxName)}</div>
@@ -3063,7 +3064,7 @@ Object.assign(CodemanApp.prototype, {
             </div>
           </div>
           <div class="process-actions">
-            <button class="btn-toolbar btn-sm btn-danger" onclick="app.killMuxSession('${escapeHtml(muxSession.sessionId)}')" title="Kill session">Kill</button>
+            <button class="btn-toolbar btn-sm btn-danger" onclick="event.stopPropagation(); app.killMuxSession('${sid}')" title="Kill session">Kill</button>
           </div>
         </div>
       `;

src/web/public/styles.css

@@ -2134,8 +2134,15 @@ body {
   background: var(--bg-hover);
 }
 
-.history-item-dir {
+.history-item-text {
   flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.history-item-title {
   font-size: 0.8rem;
   color: var(--text);
   overflow: hidden;
@@ -2143,6 +2150,14 @@ body {
   white-space: nowrap;
 }
 
+.history-item-subtitle {
+  font-size: 0.65rem;
+  color: var(--text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .history-item-meta {
   font-size: 0.7rem;
   color: var(--text-muted);
@@ -5011,6 +5026,16 @@ kbd {
   background: var(--bg-hover);
 }
 
+.process-item-clickable {
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+  border: 1px solid transparent;
+}
+
+.process-item-clickable:hover {
+  border-color: var(--accent);
+}
+
 .process-info {
   flex: 1;
   min-width: 0;

src/web/public/terminal-ui.js

@@ -704,9 +704,18 @@ Object.assign(CodemanApp.prototype, {
         item.title = s.workingDir;
         item.addEventListener('click', () => this.resumeHistorySession(s.sessionId, s.workingDir));
 
-        const dirSpan = document.createElement('span');
-        dirSpan.className = 'history-item-dir';
-        dirSpan.textContent = shortDir;
+        const textCol = document.createElement('div');
+        textCol.className = 'history-item-text';
+
+        const titleSpan = document.createElement('span');
+        titleSpan.className = 'history-item-title';
+        titleSpan.textContent = s.firstPrompt || shortDir;
+
+        const subtitleSpan = document.createElement('span');
+        subtitleSpan.className = 'history-item-subtitle';
+        subtitleSpan.textContent = shortDir;
+
+        textCol.append(titleSpan, subtitleSpan);
 
         const metaSpan = document.createElement('span');
         metaSpan.className = 'history-item-meta';
@@ -716,7 +725,7 @@ Object.assign(CodemanApp.prototype, {
         sizeSpan.className = 'history-item-size';
         sizeSpan.textContent = size;
 
-        item.append(dirSpan, metaSpan, sizeSpan);
+        item.append(textCol, metaSpan, sizeSpan);
         list.appendChild(item);
       }