pi-kanban 0.2.0 → 0.3.0

package/public/style.css

@@ -20,6 +20,7 @@
   --accent-glow: rgba(232, 111, 51, 0.55);
   --success: #3ecf8e;
   --success-dim: rgba(62, 207, 142, 0.18);
+  --error: #e5534b;
   --warning: #f0b429;
   --warning-dim: rgba(240, 180, 41, 0.18);
   --plan: #86a886;
@@ -761,6 +762,13 @@ body::before {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.view-header > div:first-child {
+  min-width: 0;
+  flex: 1 1 auto;
 }
 
 .view-title {
@@ -789,6 +797,12 @@ body::before {
   display: flex;
   align-items: center;
   gap: 16px;
+  flex-wrap: wrap;
+}
+
+@media (max-width: 720px) {
+  .view-progress { display: none; }
+  .view-actions { gap: 8px; }
 }
 
 .view-progress {
@@ -2534,6 +2548,7 @@ body.light {
   --accent-glow: rgba(232, 111, 51, 0.5);
   --success: #1a8a5a;
   --success-dim: rgba(26, 138, 90, 0.15);
+  --error: #c0392b;
   --warning: #b07d0a;
   --warning-dim: rgba(176, 125, 10, 0.15);
   --plan: #5a7a5a;
@@ -3234,6 +3249,7 @@ select.form-input option:checked {
     --accent-glow: rgba(232, 111, 51, 0.5);
     --success: #1a8a5a;
     --success-dim: rgba(26, 138, 90, 0.15);
+    --error: #c0392b;
     --warning: #b07d0a;
     --warning-dim: rgba(176, 125, 10, 0.15);
     --plan: #5a7a5a;
@@ -3614,3 +3630,131 @@ pre.mermaid svg {
   border: 1px solid var(--text-muted);
 }
 /* #endregion */
+
+/* #region AskUserQuestion card */
+.ask-user-questions {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+.ask-user-card {
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 10px 12px;
+  background: var(--bg-secondary, var(--bg-elevated, rgba(127,127,127,0.06)));
+}
+.ask-user-header {
+  font-size: 0.72rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--accent);
+  margin-bottom: 4px;
+}
+.ask-user-question-text {
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  margin-bottom: 6px;
+}
+.ask-user-hint {
+  font-size: 0.72rem;
+  color: var(--text-muted);
+  margin-bottom: 6px;
+}
+.ask-user-options {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+.ask-user-option {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+  padding: 3px 6px;
+  border-radius: 4px;
+}
+.ask-user-option--checked {
+  color: var(--text-primary);
+  background: var(--bg-hover);
+}
+.ask-user-check {
+  flex-shrink: 0;
+  width: 14px;
+  color: var(--success);
+  font-weight: 700;
+}
+.ask-user-option:not(.ask-user-option--checked) .ask-user-check {
+  color: var(--text-muted);
+}
+.ask-user-option-label {
+  font-weight: 500;
+}
+.ask-user-option-desc {
+  color: var(--text-muted);
+  font-size: 0.78rem;
+  margin-left: 4px;
+}
+.ask-user-pending {
+  color: var(--text-muted);
+  font-size: 0.85rem;
+  font-style: italic;
+  margin-top: 6px;
+}
+.ask-user-cancelled {
+  color: var(--text-muted);
+  font-size: 0.85rem;
+  font-style: italic;
+  padding: 8px 0;
+}
+/* #endregion */
+
+/* #region parallel-subagent */
+.psa-mode-label {
+  font-size: 11px;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 6px;
+}
+.psa-row {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  margin: 6px 0;
+}
+.psa-task-row {
+  align-items: flex-start;
+}
+.psa-key {
+  font-size: 11px;
+  color: var(--text-secondary);
+  flex-shrink: 0;
+  min-width: 40px;
+}
+.psa-task-text {
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-size: 12px;
+  color: var(--text-primary);
+  line-height: 1.5;
+}
+.psa-status {
+  margin-top: 8px;
+  font-size: 12px;
+  font-weight: 500;
+}
+.psa-status-ok {
+  color: var(--success);
+}
+.psa-status-err {
+  color: var(--error);
+}
+/* #endregion */
+

package/server.js

@@ -10,6 +10,16 @@ const chokidar = require('chokidar');
 const open = require('open').default || require('open');
 const parsers = require('./lib/pi-parsers');
 const taskStore = require('./lib/task-store');
+const pkg = require('./package.json');
+
+function sendWithETag(req, res, data) {
+  const body = typeof data === 'string' ? data : JSON.stringify(data);
+  const etag = `"${crypto.createHash('md5').update(body).digest('hex').slice(0, 16)}"`;
+  res.set('ETag', etag);
+  res.set('Cache-Control', 'no-cache');
+  if (req.headers['if-none-match'] === etag) return res.status(304).end();
+  res.type('application/json').send(body);
+}
 
 function enrichTask(t, sessionId, project) {
   return {
@@ -23,23 +33,27 @@ function enrichTask(t, sessionId, project) {
 }
 
 async function tasksForSession(sessionId, project) {
-  const tasks = taskStore.listTasks(sessionId);
+  const tasks = await taskStore.listTasksAsync(sessionId);
   return tasks.map((t) => enrichTask(t, sessionId, project));
 }
 
 async function allStoredTasks() {
-  const out = [];
-  for (const sid of taskStore.listSessionIds()) {
-    const tasks = taskStore.listTasks(sid);
-    if (!tasks.length) continue;
-    let project = null;
-    try {
-      const meta = await parsers.findSessionFileById(sid);
-      if (meta) project = meta.cwd;
-    } catch {}
-    for (const t of tasks) out.push(enrichTask(t, sid, project));
+  const [sids, sessionFiles] = await Promise.all([
+    taskStore.listSessionIdsAsync(),
+    parsers.listSessionFiles(),
+  ]);
+  const projectBySid = new Map();
+  for (const meta of sessionFiles) {
+    const slug = parsers.slugFromFile(meta.file);
+    if (!projectBySid.has(slug)) projectBySid.set(slug, meta.cwd);
   }
-  return out;
+  const groups = await Promise.all(sids.map(async (sid) => {
+    const tasks = await taskStore.listTasksAsync(sid);
+    if (!tasks.length) return [];
+    const project = projectBySid.get(sid) || null;
+    return tasks.map((t) => enrichTask(t, sid, project));
+  }));
+  return groups.flat();
 }
 
 
@@ -112,7 +126,7 @@ app.use(express.static(path.join(__dirname, 'public')));
 const empty = (_req, res) => res.json([]);
 const emptyObj = (_req, res) => res.json({});
 
-app.get('/api/version', (_req, res) => res.json({ version: '0.1.0', name: 'pi-kanban' }));
+app.get('/api/version', (_req, res) => res.json({ version: pkg.version, name: pkg.name }));
 
 function resolveActiveTheme(mode) {
   const requestedId = mode === 'light' ? LIGHT_THEME_ID : DARK_THEME_ID;
@@ -137,7 +151,7 @@ app.get('/api/sessions', async (req, res) => {
   try {
     const limit = req.query.limit ? Number(req.query.limit) : 50;
     const all = await parsers.listSessions();
-    res.json(all.slice(0, limit));
+    sendWithETag(req, res, all.slice(0, limit));
   } catch (err) {
     console.error('listSessions error', err);
     res.status(500).json({ error: String(err) });
@@ -158,7 +172,7 @@ app.get('/api/sessions/:id/summary', async (req, res) => {
   const meta = await parsers.findSessionFileById(req.params.id);
   if (!meta) return res.status(404).json({ error: 'not found' });
   try {
-    res.json(await parsers.buildSessionSummary(meta));
+    sendWithETag(req, res, await parsers.buildSessionSummary(meta));
   } catch (err) {
     res.status(500).json({ error: String(err) });
   }
@@ -172,18 +186,44 @@ app.get('/api/sessions/:id/messages', async (req, res) => {
     const before = req.query.before ? String(req.query.before) : null;
     const out = await parsers.buildMessages(meta.file, limit, before);
     out.sessionId = req.params.id;
-    res.json(out);
+    sendWithETag(req, res, out);
   } catch (err) {
     res.status(500).json({ messages: [], error: String(err) });
   }
 });
 
+app.get('/api/sessions/:id/tool-result/:toolUseId', async (req, res) => {
+  const meta = await parsers.findSessionFileById(req.params.id);
+  if (!meta) return res.status(404).json({ error: 'not found' });
+  try {
+    const entries = await parsers.readSessionEntries(meta.file);
+    const toolUseId = req.params.toolUseId;
+    for (const e of entries) {
+      if (e.type !== 'message') continue;
+      const m = e.message;
+      if (m && m.role === 'toolResult' && m.toolCallId === toolUseId) {
+        const content = parsers.flattenContentToText(m.content);
+        return res.json({ content });
+      }
+    }
+    res.status(404).json({ error: 'tool result not found' });
+  } catch (err) {
+    res.status(500).json({ error: String(err) });
+  }
+});
+
+
 app.get('/api/sessions/:id/agents', async (req, res) => {
   const meta = await parsers.findSessionFileById(req.params.id);
   if (!meta) return res.status(404).json({ agents: [], error: 'not found' });
   try {
-    const agents = await parsers.listAgentsForSession(meta);
-    res.json({ agents, waitingForUser: null });
+    const entries = await parsers.readSessionEntries(meta.file);
+    const s = parsers.summarize(entries);
+    const agents = await parsers.listAgentsForSession(meta, s);
+    const waitingForUser = s.pendingAskUser
+      ? { kind: 'question', toolName: 'AskUserQuestion', timestamp: s.pendingAskUser.timestamp }
+      : null;
+    res.json({ agents, waitingForUser });
   } catch (err) {
     res.status(500).json({ agents: [], error: String(err) });
   }
@@ -237,8 +277,8 @@ app.post('/api/session/plan', async (req, res) => {
 });
 
 // Stubbed endpoints (later phases may fill these).
-app.get('/api/tasks/all', async (_req, res) => {
-  try { res.json(await allStoredTasks()); }
+app.get('/api/tasks/all', async (req, res) => {
+  try { sendWithETag(req, res, await allStoredTasks()); }
   catch (err) { res.status(500).json({ error: String(err) }); }
 });
 app.get('/api/projects', async (_req, res) => {
@@ -410,6 +450,49 @@ app.get('/api/events', (req, res) => {
   req.on('close', () => { clearInterval(ka); sseClients.delete(res); });
 });
 
+// First call for a key arms a timer; further calls inside the window are
+// dropped (leading-edge debounce). Used for SSE coalescing.
+function debounceByKey(ms, fn) {
+  const pending = new Map();
+  return (key) => {
+    if (pending.has(key)) return;
+    pending.set(key, setTimeout(() => {
+      pending.delete(key);
+      fn(key);
+    }, ms));
+  };
+}
+
+// Per-file subscriber set. Notified by the global watcher; parses once per
+// change and fans out to all connected clients (replaces per-client chokidar).
+const agentLogStreams = (() => {
+  const byFile = new Map();
+  async function broadcast(file) {
+    const subs = byFile.get(file);
+    if (!subs || !subs.size) return;
+    let payload;
+    try { payload = await parsers.buildMessages(file, 50); } catch { return; }
+    for (const { res, agentId } of subs) {
+      payload.agentId = agentId;
+      try { res.write(`event: agent-log-update\ndata: ${JSON.stringify(payload)}\n\n`); } catch {}
+    }
+  }
+  const flush = debounceByKey(75, broadcast);
+  return {
+    subscribe(file, res, agentId) {
+      let set = byFile.get(file);
+      if (!set) { set = new Set(); byFile.set(file, set); }
+      const sub = { res, agentId };
+      set.add(sub);
+      return () => {
+        set.delete(sub);
+        if (!set.size) byFile.delete(file);
+      };
+    },
+    notify(file) { if (byFile.has(file)) flush(file); },
+  };
+})();
+
 app.get('/api/sessions/:id/agents/:agentId/messages/stream', async (req, res) => {
   res.set({
     'Content-Type': 'text/event-stream',
@@ -418,11 +501,11 @@ app.get('/api/sessions/:id/agents/:agentId/messages/stream', async (req, res) =>
   });
   res.write(': connected\n\n');
 
-  let watcherRef = null;
+  let unsubscribe = null;
   const ka = setInterval(() => { try { res.write(': ka\n\n'); } catch {} }, 30000);
   req.on('close', () => {
     clearInterval(ka);
-    if (watcherRef) { try { watcherRef.close(); } catch {} }
+    if (unsubscribe) unsubscribe();
   });
 
   let meta;
@@ -430,19 +513,16 @@ app.get('/api/sessions/:id/agents/:agentId/messages/stream', async (req, res) =>
   const rec = meta ? await parsers.findAgentRecord(meta, req.params.agentId).catch(() => null) : null;
   if (!rec || !rec._sessionFile) return;
 
-  const send = async () => {
-    try {
-      const out = await parsers.buildMessages(rec._sessionFile, 50);
-      out.agentId = req.params.agentId;
-      res.write(`event: agent-log-update\ndata: ${JSON.stringify(out)}\n\n`);
-    } catch {}
-  };
-  await send();
-  watcherRef = chokidar.watch(rec._sessionFile, {
-    ignoreInitial: true,
-    awaitWriteFinish: { stabilityThreshold: 200, pollInterval: 50 },
-  });
-  watcherRef.on('change', send).on('add', send);
+  // Subscribe before sending initial payload: any change during buildMessages
+  // will fire notify -> broadcast and be picked up. Otherwise the gap between
+  // initial send and subscribe could drop events.
+  unsubscribe = agentLogStreams.subscribe(rec._sessionFile, res, req.params.agentId);
+
+  try {
+    const out = await parsers.buildMessages(rec._sessionFile, 50);
+    out.agentId = req.params.agentId;
+    res.write(`event: agent-log-update\ndata: ${JSON.stringify(out)}\n\n`);
+  } catch {}
 });
 
 const watcher = chokidar.watch(path.join(parsers.getSessionsDir(), '**/*.jsonl'), {
@@ -453,9 +533,15 @@ parsers.setOnBranchResolved((cwd, branch) => {
   sseSend({ type: 'branch:resolved', cwd, branch });
 });
 
-watcher.on('add', (f) => sseSend({ type: 'update', sessionId: parsers.slugFromFile(f) }));
-watcher.on('change', (f) => sseSend({ type: 'update', sessionId: parsers.slugFromFile(f) }));
-watcher.on('unlink', (f) => sseSend({ type: 'update', sessionId: parsers.slugFromFile(f) }));
+const queueSessionUpdate = debounceByKey(75, (sid) => sseSend({ type: 'update', sessionId: sid }));
+
+for (const ev of ['add', 'change', 'unlink']) {
+  watcher.on(ev, (f) => {
+    parsers.invalidateSessionCache(f);
+    agentLogStreams.notify(f);
+    queueSessionUpdate(parsers.slugFromFile(f));
+  });
+}
 
 const taskWatcher = chokidar.watch(taskStore.getTasksDir(), {
   ignoreInitial: true,
@@ -463,14 +549,7 @@ const taskWatcher = chokidar.watch(taskStore.getTasksDir(), {
   awaitWriteFinish: { stabilityThreshold: 100, pollInterval: 50 },
 });
 const tasksRoot = path.basename(taskStore.getTasksDir());
-const pendingTaskSse = new Map();
-function queueTaskUpdate(sid) {
-  if (pendingTaskSse.has(sid)) return;
-  pendingTaskSse.set(sid, setTimeout(() => {
-    pendingTaskSse.delete(sid);
-    sseSend({ type: 'task:update', sessionId: sid });
-  }, 75));
-}
+const queueTaskUpdate = debounceByKey(75, (sid) => sseSend({ type: 'task:update', sessionId: sid }));
 taskWatcher.on('all', (_evt, file) => {
   if (!file || !file.endsWith('.json')) return;
   const sid = path.basename(path.dirname(file));