pi-kanban 0.1.1 → 0.2.0

package/extensions/kanban.ts

@@ -1,10 +1,11 @@
 import { spawn, spawnSync, type ChildProcess } from "node:child_process";
 import { createRequire } from "node:module";
-import { readFileSync } from "node:fs";
+import { readFileSync, statSync } from "node:fs";
 import { createConnection } from "node:net";
 import { homedir } from "node:os";
 import { isAbsolute, join as joinPath, resolve as resolvePath } from "node:path";
 import { fileURLToPath } from "node:url";
+import { Type } from "typebox";
 import type { ExtensionAPI } from "@mariozechner/pi-coding-agent";
 
 const extDir = fileURLToPath(new URL(".", import.meta.url));
@@ -121,6 +122,21 @@ async function postPreview(filePath: string, sessionId: string | null, link = fa
 	});
 }
 
+async function postPlan(id: string, planPath: string, title: string | null): Promise<Response> {
+	return api("/api/session/plan", {
+		method: "POST",
+		headers: { "Content-Type": "application/json" },
+		body: JSON.stringify({ id, path: planPath, title }),
+	});
+}
+
+const PLAN_MAX_BYTES = 256 * 1024;
+
+function extractFirstHeading(markdown: string): string | null {
+	const m = markdown.match(/^#\s+(.+?)\s*$/m);
+	return m ? m[1].trim() : null;
+}
+
 function splitArgs(args: string): string[] {
 	return args.trim().split(/\s+/).filter(Boolean);
 }
@@ -195,6 +211,73 @@ export default function kanbanExtension(pi: ExtensionAPI) {
 		}
 	});
 
+	pi.registerTool({
+		name: "bind_plan",
+		label: "Bind Plan",
+		description:
+			"Attach a markdown plan file (e.g. plan.md) to the current session so the dashboard can render it.",
+		promptSnippet:
+			"Bind a markdown plan file to the current session — call after writing plan file",
+		promptGuidelines: [
+			"Use bind_plan once a planning markdown file exists so it surfaces in pi-kanban.",
+		],
+		parameters: Type.Object({
+			path: Type.String({
+				description: "Path to the plan markdown file. Absolute, or relative to the session cwd.",
+			}),
+		}),
+		async execute(_toolCallId, params, _signal, _onUpdate, ctx) {
+			const sessionId = ctx?.sessionManager?.getSessionId?.() ?? null;
+			const cwd = ctx?.sessionManager?.getCwd?.() ?? process.cwd();
+			const inputPath = String(params.path ?? "").trim();
+			if (!inputPath) {
+				return { content: [{ type: "text", text: "Error: path is required." }], isError: true };
+			}
+			const absPath = isAbsolute(inputPath) ? inputPath : resolvePath(cwd, inputPath);
+
+			let title: string | null = null;
+			try {
+				const stat = statSync(absPath);
+				if (!stat.isFile()) {
+					return { content: [{ type: "text", text: `Error: ${absPath} is not a file.` }], isError: true };
+				}
+				const buf = readFileSync(absPath, { encoding: "utf8" });
+				const head = buf.slice(0, PLAN_MAX_BYTES);
+				title = extractFirstHeading(head);
+			} catch (e: any) {
+				return {
+					content: [{ type: "text", text: `Error reading ${absPath}: ${e?.message ?? e}` }],
+					isError: true,
+				};
+			}
+
+			if (!sessionId) {
+				return {
+					content: [{ type: "text", text: "Error: no active session id; cannot bind plan." }],
+					isError: true,
+				};
+			}
+			try {
+				const res = await postPlan(sessionId, absPath, title);
+				if (!res.ok) {
+					const msg = `pi-kanban server rejected bind_plan: HTTP ${res.status}. Is /kanban running?`;
+					console.warn(msg);
+					return { content: [{ type: "text", text: msg }], isError: true };
+				}
+			} catch (e: any) {
+				const msg = `pi-kanban: bind_plan POST failed (server may be stopped): ${e?.message ?? e}`;
+				console.warn(msg);
+				return { content: [{ type: "text", text: msg }], isError: true };
+			}
+
+			const summary = title ? `Bound plan "${title}" → ${absPath}` : `Bound plan → ${absPath}`;
+			return {
+				content: [{ type: "text", text: summary }],
+				details: { path: absPath, title, sessionId },
+			};
+		},
+	});
+
 	type Notify = (m: string, l?: "info" | "error") => void;
 
 	async function startServer(notify: Notify, opts: { silentSuccess?: boolean } = {}): Promise<boolean> {

package/lib/pi-parsers.js

@@ -233,6 +233,9 @@ function summarize(entries) {
             target.sessionFile = r.sessionFile || null;
             target.artifactPaths = r.artifactPaths || null;
             target.stoppedAt = e.timestamp || null;
+            if (r.exitCode != null && r.exitCode !== 0 && !r.error && (r.finalOutput == null || r.finalOutput === '')) {
+              target._cancelled = true;
+            }
           });
           if (m.details.results.length === 0 && pendingArr && pendingArr.length) {
             const text = Array.isArray(m.content) ? (m.content.find((c) => c && c.type === 'text')?.text || '') : '';
@@ -290,6 +293,9 @@ function summarize(entries) {
           // pi emits progress events without these fields; their presence marks completion.
           const isFinal = !!(r.model || r.artifactPaths || r.sessionFile || r.error);
           if (isFinal) target.stoppedAt = e.timestamp || target.stoppedAt;
+          if (isFinal && r.exitCode != null && r.exitCode !== 0 && !r.error && (r.finalOutput == null || r.finalOutput === '')) {
+            target._cancelled = true;
+          }
         });
       }
     }
@@ -328,15 +334,18 @@ function agentIdFor(rec) {
 
 function subagentToApi(rec, lastMessage) {
   const stopped = !!rec.stoppedAt;
+  const cancelled = !!rec._cancelled;
   let desc = rec.progressSummary
     ? `${rec.progressSummary.toolCount ?? 0} tools · ${rec.progressSummary.tokens ?? 0} tokens`
     : null;
   if (rec._error) desc = `error · ${String(rec._error).split('\n')[0].slice(0, 80)}`;
+  else if (cancelled) desc = desc ? `cancelled · ${desc}` : 'cancelled';
   return {
     agentId: agentIdFor(rec),
     type: rec.agent || null,
     agentName: rec.agent || null,
-    status: stopped ? 'stopped' : 'active',
+    status: stopped ? (cancelled ? 'cancelled' : 'stopped') : 'active',
+    cancelled,
     startedAt: rec.startedAt || null,
     stoppedAt: rec.stoppedAt || null,
     updatedAt: rec.stoppedAt || rec.startedAt || null,
@@ -358,7 +367,7 @@ async function readSubagentOutput(rec) {
 }
 
 async function enrichPendingSubagents(meta, subagents) {
-  let pending = subagents.filter((r) => !r.runId);
+  let pending = subagents.filter((r) => !r.runId && !r.stoppedAt);
   if (pending.length === 0) return;
   const artifactsDir = path.join(path.dirname(meta.file), 'subagent-artifacts');
   let files = null;
@@ -403,10 +412,11 @@ async function enrichPendingSubagents(meta, subagents) {
     };
     rec.sessionFile = rec.artifactPaths.jsonlPath;
     rec._error = m.error || null;
+    if (m.exitCode != null && m.exitCode !== 0 && !m.error) rec._cancelled = true;
     if (m.toolCount != null) rec.progressSummary = { toolCount: m.toolCount, tokens: (m.usage?.input || 0) + (m.usage?.output || 0) };
   }
 
-  pending = subagents.filter((r) => !r.runId);
+  pending = subagents.filter((r) => !r.runId && !r.stoppedAt);
   if (pending.length === 0) return;
   await matchLiveSubagentRuns(meta, pending, subagents);
 }
@@ -509,13 +519,15 @@ async function findAgentRecord(meta, agentId) {
 }
 
 function tallyTasks(tasks) {
-  let pending = 0, inProgress = 0, completed = 0;
+  let pending = 0, inProgress = 0, completed = 0, total = 0;
   for (const t of tasks) {
+    if (t.status === 'deleted') continue;
+    total++;
     if (t.status === 'completed') completed++;
     else if (t.status === 'in_progress') inProgress++;
     else pending++;
   }
-  return { taskCount: tasks.length, pending, inProgress, completed };
+  return { taskCount: total, pending, inProgress, completed };
 }
 
 const MODEL_CONTEXT_WINDOWS = [

package/lib/task-store.js

@@ -86,7 +86,9 @@ function cleanupIfAllCompleted(sessionId) {
   if (!sessionId) return false;
   const tasks = listTasks(sessionId);
   if (!tasks.length) return false;
-  if (!tasks.every((t) => t.status === 'completed')) return false;
+  const live = tasks.filter((t) => t.status !== 'deleted');
+  if (!live.length) return false;
+  if (!live.every((t) => t.status === 'completed')) return false;
   const dir = sessionDir(sessionId);
   for (const t of tasks) {
     try { fs.unlinkSync(path.join(dir, `${t.id}.json`)); } catch {}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pi-kanban",
-  "version": "0.1.1",
-  "description": "Web dashboard for the pi coding agent (sessions, todos, subagents)",
+  "version": "0.2.0",
+  "description": "Workspace for the pi coding agent — sessions, todos, subagents, and more.",
   "main": "server.js",
   "bin": {
     "pi-kanban": "./server.js"
@@ -47,7 +47,9 @@
     "@mariozechner/pi-coding-agent": "*"
   },
   "pi": {
-    "extensions": ["./extensions"],
+    "extensions": [
+      "./extensions"
+    ],
     "video": "https://raw.githubusercontent.com/NikiforovAll/pi-kanban/main/assets/pi-kanban-demo.mp4",
     "image": "https://raw.githubusercontent.com/NikiforovAll/pi-kanban/main/assets/pi-kanban-poster.png"
   },

package/public/app.js

@@ -181,7 +181,7 @@ async function fetchSessions(includeTasks = true) {
     }
     lastSessionsHash = sessionsHash;
 
-    sessions = newSessions;
+    sessions = newSessions.map(applyStoredPlan);
     renderSessions();
   } catch (error) {
     console.error('Failed to fetch sessions:', error);
@@ -914,7 +914,7 @@ function renderToolItem(m, i, compact) {
   const toolDetail = getToolDetail(m.tool, m.params, m.detail);
   const agentLink =
     m.tool === 'Agent' && m.agentId
-      ? ` <span class="msg-agent-link" title="View agent" onclick="event.stopPropagation();showAgentModal('${escapeHtml(m.agentId)}')">⇗</span>`
+      ? `<span class="msg-agent-link" title="View agent" onclick="event.stopPropagation();showAgentModal('${escapeHtml(m.agentId)}')">⇗</span>`
       : '';
   const agentLogBtn = resolveAgentLogBtn(m);
   const borderStyle = '';
@@ -927,7 +927,7 @@ function renderToolItem(m, i, compact) {
   const pinBtn = renderMsgPinBtn(m, i);
   return `<div class="msg-item msg-tool${compactClass}${getTodoStatusClass(m)}" ${itemClickAttr}>
       ${getToolIcon(m.tool)}
-      <div class="msg-body"><div class="msg-text">${escapeHtml(m.tool)}${toolDetail}${agentLink}</div><div class="msg-time">${formatDate(m.timestamp)}</div></div>${agentLogBtn}${pinBtn}
+      <div class="msg-body"><div class="msg-text">${agentLink}${escapeHtml(m.tool)}${toolDetail}</div><div class="msg-time">${formatDate(m.timestamp)}</div></div>${agentLogBtn}${pinBtn}
     </div>`;
 }
 
@@ -1952,16 +1952,13 @@ function renderAgentFooter() {
     permHtml +
     visible
       .map((a) => {
+        const isTerminal = a.status === 'stopped' || a.status === 'cancelled';
         const elapsed =
-          a.status === 'stopped' && a.stoppedAt
+          isTerminal && a.stoppedAt
             ? new Date(a.stoppedAt).getTime() - new Date(a.startedAt || a.stoppedAt).getTime()
             : now - new Date(a.startedAt || a.updatedAt).getTime();
-        const statusText =
-          a.status === 'stopped'
-            ? `stopped · ${formatDuration(elapsed)}`
-            : a.status === 'idle'
-              ? `idle · ${formatDuration(elapsed)}`
-              : `active · ${formatDuration(elapsed)}`;
+        const statusLabel = ['stopped', 'cancelled', 'idle'].includes(a.status) ? a.status : 'active';
+        const statusText = `${statusLabel} · ${formatDuration(elapsed)}`;
         const descText = a.description || '';
         const promptTrimmed = stripAnsi((a.prompt || '').trim()).replace(/[\r\n]+/g, ' ');
         const displayText = descText || promptTrimmed;
@@ -2190,7 +2187,7 @@ async function showAllTasks() {
 function renderAllTasks() {
   noSession.style.display = 'none';
   sessionView.classList.add('visible');
-  const visibleTasks = currentTasks.filter((t) => !isInternalTask(t));
+  const visibleTasks = currentTasks.filter((t) => !isInternalTask(t) && isLiveTask(t));
   const totalTasks = visibleTasks.length;
   const completed = visibleTasks.filter((t) => t.status === 'completed').length;
   const percent = totalTasks > 0 ? Math.round((completed / totalTasks) * 100) : 0;
@@ -2569,7 +2566,7 @@ function renderSession() {
 
   // Build meta text with project path and description
   const projectName = session.project ? session.project.split('/').pop() : null;
-  const metaParts = [`${currentTasks.length} tasks`];
+  const metaParts = [`${currentTasks.filter(isLiveTask).length} tasks`];
   if (projectName) {
     metaParts.push(projectName);
   }
@@ -2579,12 +2576,13 @@ function renderSession() {
   metaParts.push(formatDate(session.modifiedAt));
   sessionMeta.textContent = metaParts.join(' · ');
 
-  const completed = currentTasks.filter((t) => t.status === 'completed').length;
-  const percent = currentTasks.length > 0 ? Math.round((completed / currentTasks.length) * 100) : 0;
+  const liveTasks = currentTasks.filter(isLiveTask);
+  const completed = liveTasks.filter((t) => t.status === 'completed').length;
+  const percent = liveTasks.length > 0 ? Math.round((completed / liveTasks.length) * 100) : 0;
 
   progressPercent.textContent = `${percent}%`;
   progressBar.style.width = `${percent}%`;
-  const hasInProgress = currentTasks.some((t) => t.status === 'in_progress');
+  const hasInProgress = liveTasks.some((t) => t.status === 'in_progress');
   progressBar.classList.toggle('shimmer', hasInProgress && percent < 100);
 
   renderKanban();
@@ -2598,16 +2596,17 @@ function renderProjectView() {
   const folderName = currentProjectPath ? currentProjectPath.split(/[/\\]/).pop() : 'Project';
   sessionTitle.textContent = folderName;
 
-  const metaParts = [`${currentProjectSessionIds.length} sessions`, `${currentTasks.length} tasks`];
+  const liveTasks = currentTasks.filter(isLiveTask);
+  const metaParts = [`${currentProjectSessionIds.length} sessions`, `${liveTasks.length} tasks`];
   if (currentProjectPath) metaParts.push(currentProjectPath);
   sessionMeta.textContent = metaParts.join(' · ');
 
-  const completed = currentTasks.filter((t) => t.status === 'completed').length;
-  const percent = currentTasks.length > 0 ? Math.round((completed / currentTasks.length) * 100) : 0;
+  const completed = liveTasks.filter((t) => t.status === 'completed').length;
+  const percent = liveTasks.length > 0 ? Math.round((completed / liveTasks.length) * 100) : 0;
 
   progressPercent.textContent = `${percent}%`;
   progressBar.style.width = `${percent}%`;
-  const hasInProgress = currentTasks.some((t) => t.status === 'in_progress');
+  const hasInProgress = liveTasks.some((t) => t.status === 'in_progress');
   progressBar.classList.toggle('shimmer', hasInProgress && percent < 100);
 
   renderKanban();
@@ -4404,6 +4403,10 @@ function setupEventSource() {
         handleSessionPinEvent(data);
       }
 
+      if (data.type === 'session:plan') {
+        handleSessionPlanEvent(data);
+      }
+
       if (data.type === 'branch:resolved') {
         let changed = false;
         for (const s of sessions) {
@@ -4776,6 +4779,10 @@ function isInternalTask(task) {
   return task.metadata && task.metadata._internal === true;
 }
 
+function isLiveTask(task) {
+  return task.status !== 'deleted';
+}
+
 function resolveNamedColor(colorName) {
   if (!colorName) return null;
   return namedColorMap[colorName.toLowerCase()] || null;
@@ -5183,10 +5190,7 @@ async function showSessionInfoModal(sessionId) {
     showInfoModal(session, tasks, planContent);
   };
 
-  const planPromise = fetch(`/api/sessions/${sessionId}/plan`)
-    .then((r) => (r.ok ? r.json() : null))
-    .catch(() => null)
-    .then((data) => data?.content || null);
+  const planPromise = fetchPlanContent(sessionId).then((data) => data?.content || null);
 
   const tasksPromise =
     cachedTasks.length > 0
@@ -5375,32 +5379,88 @@ let _planSessionId = null;
 
 //#endregion
 
+// Plan binding lives in localStorage (key: `kanban:plan:<sessionId>` → {path, title}).
+// Server is stateless for plan bindings — it only validates + broadcasts via SSE
+// and serves file content via GET ?path=. The browser is the source of truth.
+const PLAN_STORAGE_PREFIX = 'kanban:plan:';
+
+function getStoredPlan(sessionId) {
+  if (!sessionId) return null;
+  try {
+    const raw = localStorage.getItem(PLAN_STORAGE_PREFIX + sessionId);
+    return raw ? JSON.parse(raw) : null;
+  } catch {
+    return null;
+  }
+}
+
+function setStoredPlan(sessionId, plan) {
+  if (!sessionId) return;
+  try {
+    if (plan && plan.path) {
+      localStorage.setItem(PLAN_STORAGE_PREFIX + sessionId, JSON.stringify({ path: plan.path, title: plan.title || null }));
+    } else {
+      localStorage.removeItem(PLAN_STORAGE_PREFIX + sessionId);
+    }
+  } catch (e) {
+    console.warn('plan storage write failed:', e);
+  }
+}
+
+function applyStoredPlan(session) {
+  if (!session) return session;
+  const stored = getStoredPlan(session.id);
+  if (stored?.path) {
+    session.hasPlan = true;
+    session.planPath = stored.path;
+    session.planTitle = stored.title || session.planTitle || null;
+  }
+  return session;
+}
+
+function fetchPlanContent(sessionId) {
+  const stored = getStoredPlan(sessionId);
+  if (!stored?.path) return Promise.resolve(null);
+  const qs = `?path=${encodeURIComponent(stored.path)}`;
+  return fetch(`/api/sessions/${encodeURIComponent(sessionId)}/plan${qs}`)
+    .then((r) => (r.ok ? r.json() : null))
+    .catch(() => null);
+}
+
+function handleSessionPlanEvent(data) {
+  if (!data?.id) return;
+  setStoredPlan(data.id, { path: data.path, title: data.title });
+  for (const s of sessions) {
+    if (s.id === data.id) applyStoredPlan(s);
+  }
+  renderSessions();
+  if (_planSessionId === data.id) refreshOpenPlan();
+  if (_infoModalSessionId === data.id) {
+    // Re-run the entry point to pull fresh plan content into the info modal.
+    showSessionInfoModal(data.id).catch(() => {});
+  }
+}
+
 //#region PLAN
 function refreshOpenPlan() {
   if (!_planSessionId || !document.getElementById('plan-modal').classList.contains('visible')) return;
-  fetch(`/api/sessions/${_planSessionId}/plan`)
-    .then((r) => (r.ok ? r.json() : null))
-    .then((data) => {
-      if (data?.content) {
-        _pendingPlanContent = data.content;
-        const body = document.getElementById('plan-modal-body');
-        body.innerHTML = renderMarkdown(_pendingPlanContent);
-      }
-    })
-    .catch(() => {});
+  fetchPlanContent(_planSessionId).then((data) => {
+    if (data?.content) {
+      _pendingPlanContent = data.content;
+      const body = document.getElementById('plan-modal-body');
+      body.innerHTML = renderMarkdown(_pendingPlanContent);
+    }
+  });
 }
 
 function openPlanForSession(sid) {
-  fetch(`/api/sessions/${sid}/plan`)
-    .then((r) => (r.ok ? r.json() : null))
-    .catch(() => null)
-    .then((data) => {
-      if (data?.content) {
-        _pendingPlanContent = data.content;
-        _planSessionId = sid;
-        openPlanModal();
-      }
-    });
+  fetchPlanContent(sid).then((data) => {
+    if (data?.content) {
+      _pendingPlanContent = data.content;
+      _planSessionId = sid;
+      openPlanModal();
+    }
+  });
 }
 
 function openPlanModal() {

package/public/style.css

@@ -1669,6 +1669,11 @@ body::before {
   color: rgb(34, 160, 80);
   border-color: rgba(34, 197, 94, 0.3);
 }
+.agent-chip-cancelled {
+  background: rgba(234, 88, 12, 0.15);
+  color: rgb(234, 88, 12);
+  border-color: rgba(234, 88, 12, 0.3);
+}
 .agent-chip-stopped {
   background: rgba(127, 127, 127, 0.15);
   color: var(--text-tertiary);
@@ -1823,7 +1828,7 @@ body::before {
 .msg-agent-link {
   color: var(--accent);
   font-size: 0.85rem;
-  margin-left: 4px;
+  margin-right: 4px;
   opacity: 0.7;
 }
 .msg-agent-link:hover {
@@ -2396,6 +2401,9 @@ body::before {
 .agent-dot.stopped {
   background: var(--text-muted);
 }
+.agent-dot.cancelled {
+  background: var(--text-muted);
+}
 .agent-type {
   font-size: 13px;
   font-weight: 500;

package/server.js

@@ -206,8 +206,37 @@ app.get('/api/sessions/:id/agents/:agentId/messages', async (req, res) => {
   }
 });
 
+// Plan binding is browser-state: server only validates, broadcasts, and serves
+// file content on demand. The browser is the source of truth for which plan
+// is bound to which session (kept in localStorage), so this server has no
+// in-memory store and no JSONL persistence path here.
+app.get('/api/sessions/:id/plan', async (req, res) => {
+  const planPath = typeof req.query.path === 'string' ? req.query.path : '';
+  if (!planPath) return res.json({});
+  try {
+    const stat = await fsp.stat(planPath);
+    if (!stat.isFile()) return res.status(400).json({ error: 'not a file' });
+    const content = await fsp.readFile(planPath, 'utf8');
+    res.json({ content, path: planPath });
+  } catch (err) {
+    res.status(404).json({ error: `plan file not readable: ${planPath}` });
+  }
+});
+
+app.post('/api/session/plan', async (req, res) => {
+  const { id, path: planPath, title } = req.body || {};
+  if (!id || !planPath) return res.status(400).json({ error: 'id and path required' });
+  try {
+    const stat = await fsp.stat(planPath);
+    if (!stat.isFile()) return res.status(400).json({ error: 'not a file' });
+  } catch {
+    return res.status(404).json({ error: `plan file not found: ${planPath}` });
+  }
+  sseSend({ type: 'session:plan', id, path: planPath, title: title || null });
+  res.json({ ok: true });
+});
+
 // Stubbed endpoints (later phases may fill these).
-app.get('/api/sessions/:id/plan', emptyObj);
 app.get('/api/tasks/all', async (_req, res) => {
   try { res.json(await allStoredTasks()); }
   catch (err) { res.status(500).json({ error: String(err) }); }
@@ -344,6 +373,20 @@ app.post('/api/open-in-editor', (req, res) => {
     res.status(500).json({ error: String(err) });
   }
 });
+app.post('/api/open-folder', (req, res) => {
+  try {
+    const { folder, file } = req.body || {};
+    const targets = [];
+    if (folder) targets.push(folder);
+    if (file) targets.push(file);
+    if (!targets.length) return res.status(400).json({ error: 'folder or file required' });
+    openInEditor(...targets);
+    res.json({ success: true });
+  } catch (err) {
+    res.status(500).json({ error: String(err) });
+  }
+});
+
 app.post('/api/sessions/:id/agents/:agentId/stop', (_req, res) => res.json({ ok: true }));
 
 // SSE — broadcast file changes as session-changed events.