feat: framework color dots in sessions table, filter toolbar panel

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

cmd/web-ui/static/app.js

@@ -299,15 +299,19 @@
     sessionsState.cursor = data.next_cursor;
 
     const tbody = document.getElementById('sessions-body');
-    tbody.innerHTML = sessionsState.sessions.map(s => `
+    tbody.innerHTML = sessionsState.sessions.map(s => {
-      <tr class="clickable" data-session="${escapeHTML(s.session_id)}">
+      const fw = s.framework || 'unknown';
-        <td class="id-cell">${escapeHTML(s.session_id.substring(0, 12))}...</td>
+      const fwClass = fw.replace(/[^a-z0-9-]/g, '-');
-        <td>${escapeHTML(s.framework || '-')}</td>
+      return `
-        <td>${escapeHTML(s.host || '-')}</td>
+        <tr class="clickable" data-session="${escapeHTML(s.session_id)}">
-        <td>${s.run_count}</td>
+          <td class="id-cell">${escapeHTML(s.session_id.substring(0, 12))}…</td>
-        <td title="${escapeHTML(s.started_at)}">${escapeHTML(relativeTime(s.started_at))}</td>
+          <td><span class="fw-dot ${escapeHTML(fwClass)}"></span>${escapeHTML(fw)}</td>
-      </tr>
+          <td>${escapeHTML(s.host || '-')}</td>
-    `).join('') || '<tr><td colspan="5" class="empty-state">No sessions found</td></tr>';
+          <td>${s.run_count}</td>
+          <td title="${escapeHTML(s.started_at)}">${escapeHTML(relativeTime(s.started_at))}</td>
+        </tr>
+      `;
+    }).join('') || '<tr><td colspan="5" class="empty-state">No sessions found</td></tr>';
 
     tbody.querySelectorAll('tr.clickable').forEach(row => {
       row.addEventListener('click', () => navigate('/sessions/' + row.dataset.session));

cmd/web-ui/static/style.css

@@ -247,6 +247,10 @@ main > * {
   margin-bottom: 1.5rem;
   flex-wrap: wrap;
   align-items: flex-end;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 1rem 1.25rem;
 }
 
 .filters label {
@@ -1242,3 +1246,21 @@ tr.clickable:hover td:first-child {
   border-radius: 50%;
   flex-shrink: 0;
 }
+
+/* ── Framework dots ───────────────────────────────────────── */
+.fw-dot {
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  margin-right: 0.4rem;
+  flex-shrink: 0;
+  vertical-align: middle;
+  position: relative;
+  top: -1px;
+}
+
+.fw-dot.openclaw    { background: var(--accent); }
+.fw-dot.claude-code { background: var(--success); }
+.fw-dot.opencode    { background: var(--purple); }
+.fw-dot.unknown     { background: var(--text-dim); }