uv-suite 0.26.0 → 0.26.2

package/watchtower/dashboard.html

@@ -279,6 +279,42 @@
   .event.user-prompt { background: var(--user-prompt-bg); }
   .event.user-prompt .detail { color: var(--user-prompt-text); font-style: italic; }
 
+  /* Session priority: low rows are dimmed, high rows get an accent strip */
+  .event.priority-low { opacity: 0.45; }
+  .event.priority-low:hover { opacity: 0.85; }
+  .event.priority-high { border-left: 3px solid var(--accent); padding-left: 25px; }
+
+  /* Pills shown next to a session label */
+  .pill {
+    display: inline-block;
+    padding: 1px 7px;
+    margin-left: 6px;
+    font-size: 10.5px;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    border-radius: 4px;
+    vertical-align: 1px;
+  }
+  .pill.persona-spike        { background: rgba(191, 90, 242, 0.18); color: var(--purple); }
+  .pill.persona-sport        { background: rgba(48, 209, 88, 0.18);  color: var(--success); }
+  .pill.persona-professional { background: rgba(10, 132, 255, 0.18); color: var(--accent); }
+  .pill.persona-auto         { background: rgba(255, 159, 10, 0.18); color: var(--warning); }
+  .pill.priority-low  { background: rgba(154, 154, 163, 0.18); color: var(--text-muted); }
+  .pill.priority-med  { background: rgba(255, 214, 10, 0.18);  color: var(--yellow); }
+  .pill.priority-high { background: rgba(255, 69, 58, 0.18);   color: var(--danger); }
+  .pill.kind-long-running { background: rgba(100, 210, 255, 0.18); color: var(--info); }
+  .pill.kind-outcome      { background: rgba(255, 105, 97, 0.18);  color: var(--peach); }
+
+  .session-tag.priority-low  { opacity: 0.6; }
+  .session-tag .meta-line {
+    display: block;
+    font-size: 11px;
+    font-weight: 400;
+    color: var(--text-muted);
+    margin-top: 2px;
+  }
+
   .timeline-end { padding: 20px 24px; text-align: center; border-bottom: 1px solid var(--border-subtle); }
   .loader { display: inline-block; width: 48px; height: 4px; position: relative; }
   .loader::before {
@@ -393,9 +429,21 @@ let lastEventDiv = null;
 // Session colors and naming
 const palette = ['#0a84ff','#30d158','#ff9f0a','#bf5af2','#ff375f','#64d2ff','#ffd60a','#ac8ee0','#ff6961','#5e5ce6'];
 let colorIdx = 0;
+
+// Resolve the canonical session key for an event: prefer the UV Suite id (one
+// per `uv` launch), fall back to Claude Code's session id, then source_app.
+function eventSid(ev) {
+  return ev.uvs_session_id || ev.session_id || ev.source_app || 'unknown';
+}
+
 function sessionColor(id) {
   if (!sessions[id]) {
-    sessions[id] = { color: palette[colorIdx++ % palette.length], count: 0, lastEvent: null, label: null, app: null };
+    sessions[id] = {
+      color: palette[colorIdx++ % palette.length],
+      count: 0, lastEvent: null,
+      name: '', kind: '', purpose: '', priority: '', persona: '',
+      app: null, label: null,
+    };
     updateSessionBar();
     updateFilterSession();
   }
@@ -406,33 +454,54 @@ function sessionColor(id) {
 
 function updateSessionLabel(sid, ev) {
   if (!sessions[sid]) return;
-  if (!sessions[sid].app && ev.source_app) {
-    sessions[sid].app = ev.source_app;
+  const s = sessions[sid];
+  let changed = false;
+
+  if (!s.app && ev.source_app) { s.app = ev.source_app; changed = true; }
+
+  // Configured metadata wins over heuristics. Update on every event so a
+  // mid-session /session-init relabel is reflected without a refresh.
+  for (const [evKey, sKey] of [
+    ['session_name','name'], ['session_kind','kind'],
+    ['session_purpose','purpose'], ['session_priority','priority'],
+    ['persona','persona'],
+  ]) {
+    if (ev[evKey] !== undefined && ev[evKey] !== null && ev[evKey] !== s[sKey]) {
+      s[sKey] = ev[evKey];
+      changed = true;
+    }
   }
-  // Use first UserPromptSubmit as session label
+
+  // Fall back to first UserPromptSubmit if no configured name yet
   const type = ev.event_type || ev.hook_event_name || '';
-  if (!sessions[sid].label && type === 'UserPromptSubmit') {
+  if (!s.name && !s.label && type === 'UserPromptSubmit') {
     const prompt = ev.tool_input?.prompt || ev.tool_input?.content || ev.message || '';
     if (prompt.length > 0) {
       let label = prompt.slice(0, 45).replace(/\s+\S*$/, '');
       if (prompt.length > label.length) label += '...';
-      sessions[sid].label = label;
-      updateSessionBar();
-      updateFilterSession();
+      s.label = label;
+      changed = true;
     }
   }
+
+  if (changed) {
+    updateSessionBar();
+    updateFilterSession();
+  }
 }
 
 function sessionDisplayName(id) {
   const s = sessions[id];
   if (!s) return shortId(id);
-  if (s.label) {
-    return s.app ? s.app + ': ' + s.label : s.label;
-  }
+  if (s.name) return s.name;
+  if (s.label) return s.app ? s.app + ': ' + s.label : s.label;
   if (s.app) return s.app;
   return shortId(id);
 }
 
+// Sort order: high → med → unset → low (low last so it groups at the bottom)
+const PRIORITY_ORDER = { high: 0, med: 1, '': 2, low: 3 };
+
 function shortId(id) {
   if (!id) return '—';
   return id.length > 10 ? id.slice(0, 8) + '..' : id;
@@ -526,7 +595,7 @@ function eventDetail(ev) {
 }
 
 function renderEvent(ev) {
-  const sid = ev.session_id || ev.source_app || 'unknown';
+  const sid = eventSid(ev);
   const color = sessionColor(sid);
   const type = ev.event_type || ev.hook_event_name || '?';
   const tool = ev.tool_name || '';
@@ -534,6 +603,7 @@ function renderEvent(ev) {
   const fail = isFailure(ev);
   const boundary = isSessionBoundary(ev);
   const prompt = isUserPrompt(ev);
+  const priority = sessions[sid]?.priority || '';
 
   const div = document.createElement('div');
   let cls = 'event';
@@ -541,6 +611,8 @@ function renderEvent(ev) {
   else if (fail) cls += ' failure';
   else if (prompt) cls += ' user-prompt';
   else if (boundary) cls += ' session-boundary';
+  if (priority === 'high') cls += ' priority-high';
+  if (priority === 'low')  cls += ' priority-low';
   div.className = cls;
 
   const humanBadge = human ? '<span class="human-badge">NEEDS HUMAN</span>' : '';
@@ -553,6 +625,8 @@ function renderEvent(ev) {
     <span class="detail">${eventDetail(ev)}</span>
   `;
 
+  div._ev = ev;
+
   // Check filters
   const typeMatch = !selectedType || type === selectedType;
   const sessMatch = !selectedSession || sid === selectedSession;
@@ -565,7 +639,9 @@ function renderEvent(ev) {
 function addEvent(ev) {
   events.push(ev);
   if (emptyState.parentNode) emptyState.remove();
-  const sid = ev.session_id || ev.source_app || 'unknown';
+  const sid = eventSid(ev);
+  // Make sure the session is registered before we try to update its metadata
+  sessionColor(sid);
   updateSessionLabel(sid, ev);
 
   // Remove "latest" class from previous latest
@@ -590,7 +666,7 @@ function addEvent(ev) {
 
 function updateWaitingText(ev) {
   if (ev) {
-    const sid = ev.session_id || ev.source_app || 'unknown';
+    const sid = eventSid(ev);
     waitingText.textContent = `Last: ${sessionDisplayName(sid)} — ${timeSince(ev._ts)}`;
   }
 }
@@ -607,20 +683,58 @@ function updateStats() {
   const errors = events.filter(e => (e.event_type || e.hook_event_name || '').includes('Failure')).length;
   document.getElementById('errorCount').textContent = errors;
   document.getElementById('errorCount').className = 'n' + (errors > 0 ? ' alert' : '');
-  const humans = events.filter(needsHuman).length;
+  // Count sessions whose most recent event is waiting on a human — so the
+  // number drops back down once the session continues past the prompt.
+  const latestBySession = {};
+  for (const ev of events) {
+    const sid = eventSid(ev);
+    latestBySession[sid] = ev;
+  }
+  const humans = Object.values(latestBySession).filter(needsHuman).length;
   document.getElementById('humanCount').textContent = humans;
   document.getElementById('humanCount').className = 'n' + (humans > 0 ? ' alert' : '');
 }
 
+function escapeHtml(s) {
+  return String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+}
+
+function pill(cls, label) {
+  return `<span class="pill ${cls}">${escapeHtml(label)}</span>`;
+}
+
 function updateSessionBar() {
   sessionBar.innerHTML = '';
-  for (const [id, s] of Object.entries(sessions)) {
+  // Sort: high priority first, then med/unset, then low; within a tier, most
+  // recent activity wins so the dashboard surfaces what's happening now.
+  const ids = Object.keys(sessions).sort((a, b) => {
+    const pa = PRIORITY_ORDER[sessions[a].priority] ?? PRIORITY_ORDER[''];
+    const pb = PRIORITY_ORDER[sessions[b].priority] ?? PRIORITY_ORDER[''];
+    if (pa !== pb) return pa - pb;
+    return (sessions[b].lastEvent || 0) - (sessions[a].lastEvent || 0);
+  });
+
+  for (const id of ids) {
+    const s = sessions[id];
     const tag = document.createElement('span');
-    tag.className = 'session-tag' + (selectedSession === id ? ' active' : '');
+    let cls = 'session-tag';
+    if (selectedSession === id) cls += ' active';
+    if (s.priority === 'low')   cls += ' priority-low';
+    tag.className = cls;
     tag.style.background = s.color + '22';
     tag.style.color = s.color;
-    tag.textContent = sessionDisplayName(id) + ' (' + s.count + ')';
-    tag.title = id;
+    tag.title = `${id}${s.purpose ? '\n' + s.purpose : ''}`;
+
+    const pills = [];
+    if (s.persona)  pills.push(pill('persona-' + s.persona, s.persona));
+    if (s.priority) pills.push(pill('priority-' + s.priority, 'P:' + s.priority));
+    if (s.kind)     pills.push(pill('kind-' + s.kind, s.kind));
+
+    const namePart = `<strong>${escapeHtml(sessionDisplayName(id))}</strong>` +
+                     ` <span style="opacity:0.7">(${s.count})</span>`;
+    const meta = pills.length ? `<span class="meta-line">${pills.join('')}</span>` : '';
+    tag.innerHTML = namePart + meta;
+
     tag.onclick = () => { selectedSession = selectedSession === id ? '' : id; refilter(); updateSessionBar(); };
     sessionBar.appendChild(tag);
   }
@@ -650,9 +764,10 @@ function refilter() {
   selectedType = filterType.value;
   selectedSession = filterSession.value;
   const rows = timeline.querySelectorAll('.event');
-  rows.forEach((row, i) => {
-    const ev = events[i];
-    const sid = ev.session_id || ev.source_app || 'unknown';
+  rows.forEach((row) => {
+    const ev = row._ev;
+    if (!ev) return;
+    const sid = eventSid(ev);
     const type = ev.event_type || ev.hook_event_name || '';
     const show = (!selectedType || type === selectedType)
               && (!selectedSession || sid === selectedSession)

package/watchtower/events.json

@@ -1,22 +1 @@
-[
-  {
-    "event_type": "PostToolUse",
-    "session_id": "test-123",
-    "source_app": "uv-suite",
-    "tool_name": "Edit",
-    "cwd": "/tmp",
-    "_ts": 1776756371726,
-    "_id": "3f130976-6226-47ea-a477-18a16e194415"
-  },
-  {
-    "event_type": "PostToolUse",
-    "session_id": "test-session",
-    "source_app": "my-project",
-    "tool_name": "Edit",
-    "tool_input": {
-      "file_path": "src/app.ts"
-    },
-    "_ts": 1776757586012,
-    "_id": "efa9ae75-c0e0-48c2-a078-e7075ccef5a7"
-  }
-]
+[]

package/watchtower/server.js

@@ -4,20 +4,20 @@
 // Zero dependencies beyond Node.js
 // Uses Server-Sent Events (SSE) instead of WebSocket — simpler, auto-reconnects
 
-const http = require('http');
-const fs = require('fs');
-const path = require('path');
-const crypto = require('crypto');
+const http = require("http");
+const fs = require("fs");
+const path = require("path");
+const crypto = require("crypto");
 
 const PORT = process.env.UVS_WATCHTOWER_PORT || 4200;
-const DATA_FILE = path.join(__dirname, 'events.json');
+const DATA_FILE = path.join(__dirname, "events.json");
 const MAX_EVENTS = 500;
 
 // In-memory event store
 let events = [];
 try {
   if (fs.existsSync(DATA_FILE)) {
-    events = JSON.parse(fs.readFileSync(DATA_FILE, 'utf-8'));
+    events = JSON.parse(fs.readFileSync(DATA_FILE, "utf-8"));
   }
 } catch (e) {
   events = [];
@@ -50,20 +50,20 @@ function saveEvents() {
 
 const server = http.createServer((req, res) => {
   // CORS
-  res.setHeader('Access-Control-Allow-Origin', '*');
-  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
-  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
+  res.setHeader("Access-Control-Allow-Origin", "*");
+  res.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
+  res.setHeader("Access-Control-Allow-Headers", "Content-Type");
 
-  if (req.method === 'OPTIONS') {
+  if (req.method === "OPTIONS") {
     res.writeHead(200);
     return res.end();
   }
 
   // POST /events — receive hook events
-  if (req.method === 'POST' && req.url === '/events') {
-    let body = '';
-    req.on('data', chunk => body += chunk);
-    req.on('end', () => {
+  if (req.method === "POST" && req.url === "/events") {
+    let body = "";
+    req.on("data", (chunk) => (body += chunk));
+    req.on("end", () => {
       try {
         const event = JSON.parse(body);
         event._ts = Date.now();
@@ -71,7 +71,7 @@ const server = http.createServer((req, res) => {
         events.push(event);
         broadcast(event);
         saveEvents();
-        res.writeHead(200, { 'Content-Type': 'application/json' });
+        res.writeHead(200, { "Content-Type": "application/json" });
         res.end('{"ok":true}');
       } catch (e) {
         res.writeHead(400);
@@ -82,24 +82,30 @@ const server = http.createServer((req, res) => {
   }
 
   // GET /stream — SSE endpoint (replaces WebSocket)
-  if (req.method === 'GET' && req.url === '/stream') {
+  if (req.method === "GET" && req.url === "/stream") {
     res.writeHead(200, {
-      'Content-Type': 'text/event-stream',
-      'Cache-Control': 'no-cache',
-      'Connection': 'keep-alive',
+      "Content-Type": "text/event-stream",
+      "Cache-Control": "no-cache",
+      Connection: "keep-alive",
     });
 
     // Send recent events as init
-    res.write(`data: ${JSON.stringify({ type: 'init', events: events.slice(-100) })}\n\n`);
+    res.write(
+      `data: ${JSON.stringify({ type: "init", events: events.slice(-100) })}\n\n`,
+    );
 
     sseClients.add(res);
 
     // Keep-alive ping every 15 seconds
     const keepAlive = setInterval(() => {
-      try { res.write(': ping\n\n'); } catch (e) { clearInterval(keepAlive); }
+      try {
+        res.write(": ping\n\n");
+      } catch (e) {
+        clearInterval(keepAlive);
+      }
     }, 15000);
 
-    req.on('close', () => {
+    req.on("close", () => {
       sseClients.delete(res);
       clearInterval(keepAlive);
     });
@@ -107,26 +113,67 @@ const server = http.createServer((req, res) => {
   }
 
   // GET /events — fetch recent events (REST fallback)
-  if (req.method === 'GET' && req.url.startsWith('/events')) {
-    res.writeHead(200, { 'Content-Type': 'application/json' });
+  if (req.method === "GET" && req.url.startsWith("/events")) {
+    res.writeHead(200, { "Content-Type": "application/json" });
     res.end(JSON.stringify(events.slice(-100)));
     return;
   }
 
   // GET / — serve dashboard
-  if (req.method === 'GET' && (req.url === '/' || req.url === '/index.html')) {
-    const html = fs.readFileSync(path.join(__dirname, 'dashboard.html'), 'utf-8');
-    res.writeHead(200, { 'Content-Type': 'text/html' });
+  if (req.method === "GET" && (req.url === "/" || req.url === "/index.html")) {
+    const html = fs.readFileSync(
+      path.join(__dirname, "dashboard.html"),
+      "utf-8",
+    );
+    res.writeHead(200, { "Content-Type": "text/html" });
     res.end(html);
     return;
   }
 
   res.writeHead(404);
-  res.end('not found');
+  res.end("not found");
+});
+
+server.on("error", (err) => {
+  if (err.code !== "EADDRINUSE") {
+    console.error("Watchtower server error:", err.message);
+    process.exit(1);
+  }
+  // Port busy — probe to see if it's an existing watchtower or another process
+  const req = http.request(
+    { host: "127.0.0.1", port: PORT, path: "/", method: "GET", timeout: 1500 },
+    (res) => {
+      let body = "";
+      res.on("data", (c) => (body += c));
+      res.on("end", () => {
+        if (/UV Suite Watchtower/.test(body)) {
+          console.log(
+            `UV Suite Watchtower is already running at http://localhost:${PORT}`,
+          );
+          process.exit(0);
+        } else {
+          console.error(`Port ${PORT} is in use by another process.`);
+          console.error(`Set UVS_WATCHTOWER_PORT to use a different port.`);
+          process.exit(1);
+        }
+      });
+    },
+  );
+  req.on("error", () => {
+    console.error(`Port ${PORT} is in use but not responding.`);
+    console.error(`Set UVS_WATCHTOWER_PORT to use a different port.`);
+    process.exit(1);
+  });
+  req.on("timeout", () => {
+    req.destroy();
+  });
+  req.end();
 });
 
 server.listen(PORT, () => {
   console.log(`UV Suite Watchtower running at http://localhost:${PORT}`);
   console.log(`${events.length} events loaded from disk`);
-  console.log(`Waiting for hook events on POST http://localhost:${PORT}/events`);
+  console.log(
+    `Waiting for hook events on POST http://localhost:${PORT}/events`,
+  );
 });