taskplane 0.6.1 → 0.7.1

package/README.md

@@ -109,12 +109,13 @@ pi
 Inside the pi session:
 
 ```
-/orch-plan all     # Preview waves, lanes, and dependencies
-/orch all          # Execute all pending tasks in parallel
-/orch-status       # Monitor batch progress
+/orch               # Detect project state — guides onboarding or offers to start a batch
+/orch-plan all      # Preview waves, lanes, and dependencies
+/orch all           # Execute all pending tasks in parallel
+/orch-status        # Monitor batch progress
 ```
 
-The default scaffold includes two independent example tasks, so `/orch all` gives you an immediate orchestrator + dashboard experience.
+`/orch` with no arguments is the universal entry point — it detects your project state and activates the supervisor for guided interaction (onboarding, batch planning, health checks, or retrospective). The default scaffold includes two independent example tasks, so `/orch all` gives you an immediate orchestrator + dashboard experience.
 
 ### 4. Optional: run one task directly
 
@@ -148,7 +149,7 @@ Orchestrator lanes execute tasks through task-runner under the hood, so `/task`
 | `/task-status` | Show current task progress |
 | `/task-pause` | Pause after current worker iteration finishes |
 | `/task-resume` | Resume a paused task |
-| `/orch <areas\|paths\|all>` | Execute tasks via isolated worktrees (recommended default) |
+| `/orch [<areas\|paths\|all>]` | No args: detect state & guide (onboarding, batch planning, etc.); with args: execute tasks via isolated worktrees |
 | `/orch-plan <areas\|paths\|all>` | Preview execution plan without running |
 | `/orch-status` | Show batch progress |
 | `/orch-pause` | Pause batch after current tasks finish |

package/dashboard/public/app.js

@@ -722,6 +722,231 @@ function ensureContentPanels() {
   }
 }
 
+// ─── Supervisor Panel ───────────────────────────────────────────────────────
+
+const $supervisorPanel        = $("supervisor-panel");
+const $supervisorStatusBadge  = $("supervisor-status-badge");
+const $supervisorCollapseBtn  = $("supervisor-collapse-btn");
+const $supervisorPanelBody    = $("supervisor-panel-body");
+const $supervisorStatusSection       = $("supervisor-status-section");
+const $supervisorConversationSection = $("supervisor-conversation-section");
+const $supervisorActionsSection      = $("supervisor-actions-section");
+const $supervisorSummarySection      = $("supervisor-summary-section");
+
+let supervisorCollapsed = false;
+
+// Toggle collapse on header click
+$("supervisor-panel-toggle").addEventListener("click", (e) => {
+  // Don't toggle when clicking the collapse button itself (it has its own handler)
+  if (e.target.id === "supervisor-collapse-btn") return;
+  toggleSupervisorPanel();
+});
+
+$supervisorCollapseBtn.addEventListener("click", toggleSupervisorPanel);
+
+function toggleSupervisorPanel() {
+  supervisorCollapsed = !supervisorCollapsed;
+  $supervisorPanelBody.style.display = supervisorCollapsed ? "none" : "";
+  $supervisorCollapseBtn.textContent = supervisorCollapsed ? "▸" : "▾";
+}
+
+/** Determine supervisor status from lock data. */
+function supervisorStatusInfo(lock) {
+  if (!lock) return { status: "inactive", label: "Inactive", cls: "supervisor-inactive" };
+  if (lock.stale) return { status: "stale", label: "Stale", cls: "supervisor-stale" };
+  return { status: "active", label: "Active", cls: "supervisor-active" };
+}
+
+/** Format a timestamp for the supervisor timeline. */
+function formatSupervisorTime(ts) {
+  if (!ts) return "";
+  const d = new Date(ts);
+  return d.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit", second: "2-digit" });
+}
+
+/** Render the supervisor status indicator section. */
+function renderSupervisorStatus(supervisor) {
+  const lock = supervisor.lock;
+  const info = supervisorStatusInfo(lock);
+
+  // Update the header badge
+  $supervisorStatusBadge.textContent = info.label;
+  $supervisorStatusBadge.className = `supervisor-status-badge ${info.cls}`;
+
+  let html = '<div class="supervisor-status-row">';
+  html += `<span class="supervisor-status-dot ${info.cls}"></span>`;
+  html += `<span class="supervisor-status-label">${info.label}</span>`;
+
+  if (lock) {
+    if (lock.autonomy) {
+      html += `<span class="supervisor-autonomy-badge">${escapeHtml(lock.autonomy)}</span>`;
+    }
+    if (lock.heartbeat) {
+      html += `<span class="supervisor-heartbeat" title="Last heartbeat">♡ ${relativeTime(lock.heartbeat)}</span>`;
+    }
+    if (lock.sessionId) {
+      html += `<span class="supervisor-session-id" title="Session: ${escapeHtml(lock.sessionId)}">${escapeHtml(lock.sessionId)}</span>`;
+    }
+  }
+
+  html += '</div>';
+  $supervisorStatusSection.innerHTML = html;
+}
+
+/** Render the conversation history section. */
+function renderSupervisorConversation(supervisor) {
+  const conversation = supervisor.conversation || [];
+
+  if (conversation.length === 0) {
+    $supervisorConversationSection.innerHTML = '';
+    return;
+  }
+
+  let html = '<div class="supervisor-subsection-title">Conversation</div>';
+  html += '<div class="supervisor-conversation-list">';
+
+  for (const entry of conversation) {
+    const time = formatSupervisorTime(entry.ts || entry.timestamp);
+    const role = entry.role || "unknown";
+    const content = entry.content || entry.message || "";
+    const roleCls = role === "operator" ? "conv-role-operator" : "conv-role-supervisor";
+    const roleLabel = role === "operator" ? "Operator" : "Supervisor";
+
+    html += `<div class="supervisor-conv-entry ${roleCls}">`;
+    html += `  <div class="supervisor-conv-header">`;
+    html += `    <span class="supervisor-conv-role">${roleLabel}</span>`;
+    if (time) html += `<span class="supervisor-conv-time">${time}</span>`;
+    html += `  </div>`;
+    html += `  <div class="supervisor-conv-content">${escapeHtml(content)}</div>`;
+    html += `</div>`;
+  }
+
+  html += '</div>';
+  $supervisorConversationSection.innerHTML = html;
+}
+
+/** Merge supervisor actions and Tier 0 recovery events into a unified timeline.
+ *  Actions from actions.jsonl and recovery events from events.jsonl are combined
+ *  and sorted chronologically (per R002: show both Tier 0 and supervisor actions).
+ */
+function buildRecoveryTimeline(supervisor) {
+  const actions = (supervisor.actions || []).map(a => ({
+    ts: a.ts || a.timestamp || 0,
+    tier: a.tier,
+    type: a.type || a.action || "unknown",
+    target: a.target || a.lane || a.taskId || "",
+    outcome: a.outcome || a.result || "",
+    reason: a.reason || "",
+    source: "action"
+  }));
+
+  // Include Tier 0 recovery events from events.jsonl
+  const events = (supervisor.events || [])
+    .filter(e => e.tier === 0 || e.type === "recovery" || e.type === "tier0_recovery")
+    .map(e => ({
+      ts: e.ts || e.timestamp || 0,
+      tier: e.tier != null ? e.tier : 0,
+      type: e.type || "event",
+      target: e.target || e.lane || e.taskId || "",
+      outcome: e.outcome || e.result || "",
+      reason: e.reason || e.message || "",
+      source: "event"
+    }));
+
+  const timeline = [...actions, ...events];
+  timeline.sort((a, b) => {
+    const tA = typeof a.ts === "string" ? new Date(a.ts).getTime() : a.ts;
+    const tB = typeof b.ts === "string" ? new Date(b.ts).getTime() : b.ts;
+    return tA - tB;
+  });
+
+  return timeline;
+}
+
+/** Render the recovery action timeline section. */
+function renderSupervisorActions(supervisor) {
+  const timeline = buildRecoveryTimeline(supervisor);
+
+  if (timeline.length === 0) {
+    $supervisorActionsSection.innerHTML = '';
+    return;
+  }
+
+  let html = '<div class="supervisor-subsection-title">Recovery Actions</div>';
+  html += '<div class="supervisor-timeline">';
+
+  for (const entry of timeline) {
+    const time = formatSupervisorTime(entry.ts);
+    const tier = entry.tier != null ? `T${entry.tier}` : "";
+    const type = entry.type;
+    const target = entry.target;
+    const outcome = entry.outcome;
+    const reason = entry.reason;
+
+    const outcomeCls = outcome === "success" || outcome === "recovered"
+      ? "action-success"
+      : outcome === "failed" || outcome === "error"
+        ? "action-failed"
+        : "action-pending";
+
+    html += `<div class="supervisor-action-entry">`;
+    html += `  <div class="supervisor-action-left">`;
+    html += `    <span class="supervisor-action-time">${time}</span>`;
+    html += `    <span class="supervisor-action-dot ${outcomeCls}"></span>`;
+    html += `  </div>`;
+    html += `  <div class="supervisor-action-right">`;
+    html += `    <div class="supervisor-action-header">`;
+    if (tier) html += `<span class="supervisor-action-tier">${tier}</span>`;
+    html += `      <span class="supervisor-action-type">${escapeHtml(type)}</span>`;
+    if (target) html += `<span class="supervisor-action-target">${escapeHtml(target)}</span>`;
+    if (outcome) html += `<span class="supervisor-action-outcome ${outcomeCls}">${escapeHtml(outcome)}</span>`;
+    html += `    </div>`;
+    if (reason) {
+      html += `<div class="supervisor-action-reason">${escapeHtml(reason)}</div>`;
+    }
+    html += `  </div>`;
+    html += `</div>`;
+  }
+
+  html += '</div>';
+  $supervisorActionsSection.innerHTML = html;
+}
+
+/** Render the batch summary section (from summary.md). */
+function renderSupervisorSummary(supervisor) {
+  const summary = supervisor.summary;
+
+  if (!summary) {
+    $supervisorSummarySection.innerHTML = '';
+    return;
+  }
+
+  let html = '<div class="supervisor-subsection-title">Batch Summary</div>';
+  html += '<div class="supervisor-summary-content">';
+  // Render the summary markdown using the STATUS.md renderer (reuse)
+  const { html: renderedMd } = renderStatusMd(summary);
+  html += renderedMd;
+  html += '</div>';
+  $supervisorSummarySection.innerHTML = html;
+}
+
+/** Main supervisor panel render function. */
+function renderSupervisor(data) {
+  const supervisor = data.supervisor;
+
+  if (!supervisor) {
+    $supervisorPanel.style.display = "none";
+    return;
+  }
+
+  $supervisorPanel.style.display = "";
+
+  renderSupervisorStatus(supervisor);
+  renderSupervisorConversation(supervisor);
+  renderSupervisorActions(supervisor);
+  renderSupervisorSummary(supervisor);
+}
+
 // ─── Full Render ────────────────────────────────────────────────────────────
 
 // ─── Current data (stored for conversation viewer) ──────────────────────────
@@ -738,6 +963,7 @@ function render(data) {
   if (!batch) {
     renderHeader(null);
     renderSummary(null);
+    renderSupervisor(data);
     // Refresh history list (batch may have just finished)
     if (!noBatchRendered) loadHistoryList();
     renderNoBatch();
@@ -763,6 +989,7 @@ function render(data) {
   const repos = buildRepoSet(batch);
   updateRepoFilter(repos);
 
+  renderSupervisor(data);
   renderLanesTasks(batch, tmux);
   renderMergeAgents(batch, tmux);
   renderErrors(batch);

package/dashboard/public/index.html

@@ -51,6 +51,25 @@
         </div>
       </div>
 
+      <!-- Supervisor Panel (hidden when no supervisor data) -->
+      <div class="panel supervisor-panel" id="supervisor-panel" style="display:none;">
+        <div class="panel-header supervisor-panel-header" id="supervisor-panel-toggle">
+          <span>Supervisor</span>
+          <span class="supervisor-status-badge" id="supervisor-status-badge"></span>
+          <button class="supervisor-collapse-btn" id="supervisor-collapse-btn" title="Toggle supervisor panel">▾</button>
+        </div>
+        <div class="panel-body supervisor-panel-body" id="supervisor-panel-body">
+          <!-- Status Section -->
+          <div class="supervisor-section" id="supervisor-status-section"></div>
+          <!-- Conversation Section -->
+          <div class="supervisor-section" id="supervisor-conversation-section"></div>
+          <!-- Actions Timeline Section -->
+          <div class="supervisor-section" id="supervisor-actions-section"></div>
+          <!-- Batch Summary Section -->
+          <div class="supervisor-section" id="supervisor-summary-section"></div>
+        </div>
+      </div>
+
       <!-- Lanes + Tasks (integrated) -->
       <div class="panel" id="lanes-tasks-panel">
         <div class="panel-header">Lanes &amp; Tasks</div>

package/dashboard/public/style.css

@@ -1038,6 +1038,325 @@ body {
   border-bottom: none;
 }
 
+/* ─── Supervisor Panel ──────────────────────────────────────────────────── */
+
+.supervisor-panel {
+  border-color: var(--border);
+}
+
+.supervisor-panel-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.supervisor-panel-header:hover {
+  background: var(--bg-surface-hover);
+}
+
+.supervisor-collapse-btn {
+  margin-left: auto;
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  font-size: 0.9rem;
+  cursor: pointer;
+  padding: 0 4px;
+  line-height: 1;
+}
+
+.supervisor-collapse-btn:hover {
+  color: var(--text);
+}
+
+.supervisor-panel-body {
+  padding: 0;
+}
+
+.supervisor-section {
+  padding: 0;
+}
+
+.supervisor-section:empty {
+  display: none;
+}
+
+/* Supervisor status badge (in panel header) */
+.supervisor-status-badge {
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.supervisor-status-badge.supervisor-active {
+  background: rgba(63,185,80,0.15);
+  color: var(--green);
+}
+
+.supervisor-status-badge.supervisor-stale {
+  background: rgba(210,153,34,0.15);
+  color: var(--yellow);
+}
+
+.supervisor-status-badge.supervisor-inactive {
+  background: rgba(139,148,158,0.1);
+  color: var(--text-muted);
+}
+
+/* Status row inside the panel */
+.supervisor-status-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--border-subtle);
+  flex-wrap: wrap;
+}
+
+.supervisor-status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.supervisor-status-dot.supervisor-active {
+  background: var(--green);
+  animation: pulse 2s infinite;
+}
+
+.supervisor-status-dot.supervisor-stale {
+  background: var(--yellow);
+}
+
+.supervisor-status-dot.supervisor-inactive {
+  background: var(--text-faint);
+}
+
+.supervisor-status-label {
+  font-weight: 600;
+  font-size: 0.85rem;
+}
+
+.supervisor-autonomy-badge {
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  font-weight: 500;
+  padding: 1px 7px;
+  border-radius: 8px;
+  background: rgba(188,140,255,0.12);
+  color: var(--magenta);
+}
+
+.supervisor-heartbeat {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  color: var(--text-muted);
+}
+
+.supervisor-session-id {
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  color: var(--text-faint);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 200px;
+  white-space: nowrap;
+}
+
+/* Subsection titles */
+.supervisor-subsection-title {
+  font-size: 0.72rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-faint);
+  padding: 8px 14px 4px;
+  border-top: 1px solid var(--border-subtle);
+}
+
+/* ── Conversation List ─────────────────────────────────────────────────── */
+
+.supervisor-conversation-list {
+  max-height: 250px;
+  overflow-y: auto;
+  padding: 4px 14px 8px;
+}
+
+.supervisor-conv-entry {
+  padding: 6px 10px;
+  margin-bottom: 4px;
+  border-radius: var(--radius-sm);
+  font-size: 0.82rem;
+}
+
+.supervisor-conv-entry.conv-role-operator {
+  background: rgba(88,166,255,0.06);
+  border-left: 3px solid var(--accent-dim);
+}
+
+.supervisor-conv-entry.conv-role-supervisor {
+  background: rgba(63,185,80,0.06);
+  border-left: 3px solid var(--green-dim);
+}
+
+.supervisor-conv-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 2px;
+}
+
+.supervisor-conv-role {
+  font-weight: 600;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.conv-role-operator .supervisor-conv-role { color: var(--accent); }
+.conv-role-supervisor .supervisor-conv-role { color: var(--green); }
+
+.supervisor-conv-time {
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  color: var(--text-faint);
+}
+
+.supervisor-conv-content {
+  color: var(--text);
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* ── Recovery Actions Timeline ─────────────────────────────────────────── */
+
+.supervisor-timeline {
+  max-height: 300px;
+  overflow-y: auto;
+  padding: 4px 14px 8px;
+}
+
+.supervisor-action-entry {
+  display: flex;
+  gap: 10px;
+  padding: 6px 0;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.supervisor-action-entry:last-child {
+  border-bottom: none;
+}
+
+.supervisor-action-left {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  min-width: 60px;
+  flex-shrink: 0;
+}
+
+.supervisor-action-time {
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  color: var(--text-faint);
+  white-space: nowrap;
+}
+
+.supervisor-action-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.supervisor-action-dot.action-success { background: var(--green); }
+.supervisor-action-dot.action-failed  { background: var(--red); }
+.supervisor-action-dot.action-pending { background: var(--yellow); }
+
+.supervisor-action-right {
+  flex: 1;
+  min-width: 0;
+}
+
+.supervisor-action-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.supervisor-action-tier {
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  font-weight: 700;
+  padding: 1px 5px;
+  border-radius: 4px;
+  background: rgba(188,140,255,0.12);
+  color: var(--magenta);
+}
+
+.supervisor-action-type {
+  font-weight: 600;
+  font-size: 0.82rem;
+  color: var(--text);
+}
+
+.supervisor-action-target {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  color: var(--text-muted);
+}
+
+.supervisor-action-outcome {
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: 8px;
+}
+
+.supervisor-action-outcome.action-success {
+  background: rgba(63,185,80,0.15);
+  color: var(--green);
+}
+
+.supervisor-action-outcome.action-failed {
+  background: rgba(248,81,73,0.15);
+  color: var(--red);
+}
+
+.supervisor-action-outcome.action-pending {
+  background: rgba(210,153,34,0.15);
+  color: var(--yellow);
+}
+
+.supervisor-action-reason {
+  font-size: 0.78rem;
+  color: var(--text-muted);
+  margin-top: 2px;
+  line-height: 1.4;
+}
+
+/* ── Batch Summary ─────────────────────────────────────────────────────── */
+
+.supervisor-summary-content {
+  padding: 0 14px 8px;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.supervisor-summary-content .status-md-content {
+  padding: 4px 0;
+}
+
 /* ─── Scrollbar ────────────────────────────────────────────────────────── */
 
 ::-webkit-scrollbar { width: 6px; }