@kolisachint/hoocode-agent 0.4.110 → 0.4.111

package/dist/modes/interactive/components/task-panel.js

@@ -1,12 +1,28 @@
 import { getKeybindings, matchesKey, truncateToWidth, visibleWidth } from "@kolisachint/hoocode-tui";
+import { formatDurationSecs } from "../../../core/format-duration.js";
 import { taskOwnerId, taskStore } from "../../../core/task-store.js";
-import { theme } from "../theme/theme.js";
+import { agentColorFor, theme } from "../theme/theme.js";
+import { appKeyLabel, matchesAppKey, rawKeyHint } from "./keybinding-hints.js";
 const TASK_STATUS_ICON = {
-    pending: "●",
+    // Hollow = not started, matching the hollow-means-lighter logic of ◇ and the
+    // selectors' ○/◉ convention; also keeps ● exclusive to the chat's tool
+    // status dot so the two never read as the same signal.
+    pending: "○",
     in_progress: "◐",
     done: "✓",
     failed: "✗",
+    cancelled: "⊘",
 };
+/**
+ * U+26A0 with VS15 (text presentation). Bare ⚠ carries the Unicode Emoji
+ * property, and terminals with emoji font fallback render it as a double-width
+ * color glyph while the width math counts 1 cell — misaligning exactly the
+ * rows that carry a warning. VS15 forces single-cell text rendering and is
+ * itself zero-width, so visibleWidth stays correct.
+ */
+const WARNING_GLYPH = "⚠︎";
+/** U+25B6 with VS15 — same emoji-presentation hazard as WARNING_GLYPH. */
+const SELECTED_GLYPH = "▶︎";
 /**
  * Single-cell marker for MCP-sourced rows, which have no owning agent. Every
  * other row derives its marker from the owner's kind via AGENT_GLYPH (◆ main /
@@ -72,6 +88,8 @@ const AGENT_STATE_COLOR = {
     idle: "dim",
     waiting: "mdLink",
     failed: "error",
+    // User-initiated stop: settled and intentional, so muted rather than red.
+    cancelled: "dim",
 };
 /** Two-cell indent under a group header, with a faint vertical guide. */
 const GROUP_INDENT_PLAIN = "│ ";
@@ -95,23 +113,48 @@ function taskStatusColor(status) {
         case "failed":
             return "error";
         default:
+            // pending and cancelled: quiet gray — a user-initiated cancel is not an
+            // error and must not paint the row (or the rail) red.
             return "dim";
     }
 }
-/** Format a duration in seconds into a compact, terminal-friendly string. */
-function formatDuration(secs) {
-    const s = Math.max(0, secs);
-    if (s < 10)
-        return `${s.toFixed(1)}s`;
-    if (s < 60)
-        return `${Math.round(s)}s`;
-    const mins = Math.floor(s / 60);
-    const rem = Math.round(s % 60);
-    return `${mins}m${rem.toString().padStart(2, "0")}s`;
+/**
+ * Wall-clock time a task occupied. A settled task reads its create→final-update
+ * span; a task still in progress is measured against the clock so its elapsed
+ * time advances while it runs (updatedAt barely moves during a run, which used
+ * to freeze the display at ~0s until completion).
+ */
+function taskElapsedSecs(task, now = Date.now()) {
+    const end = task.status === "in_progress" ? now : task.updatedAt;
+    return Math.max(0, (end - task.createdAt) / 1000);
 }
-/** Wall-clock time a task occupied, derived from its create/update stamps. */
-function taskElapsedSecs(task) {
-    return Math.max(0, (task.updatedAt - task.createdAt) / 1000);
+/**
+ * Wall-clock span of the whole visible batch: earliest creation → now (while
+ * anything is still running) or the latest settle time. NOT the sum of
+ * per-task spans — summing made the header clock tick at 2× with two
+ * concurrent subagents and 3× with three, a nonsense "double time" display.
+ * Per-run timers live on the individual rows.
+ */
+function turnElapsedSecs(tasks, now = Date.now()) {
+    if (tasks.length === 0)
+        return 0;
+    let earliest = Number.POSITIVE_INFINITY;
+    let latestEnd = 0;
+    let anyRunning = false;
+    for (const task of tasks) {
+        earliest = Math.min(earliest, task.createdAt);
+        if (task.status === "in_progress")
+            anyRunning = true;
+        else
+            latestEnd = Math.max(latestEnd, task.updatedAt);
+    }
+    const end = anyRunning ? now : latestEnd;
+    return Math.max(0, (end - earliest) / 1000);
+}
+/** The agent-type key a roster entry colors by: "explore#2" → "explore". */
+function agentTypeOfName(name) {
+    const idx = name.indexOf("#");
+    return idx > 0 ? name.slice(0, idx) : name;
 }
 /** Sum the token + cost usage reported by the tasks shown this turn. */
 function sumTurnUsage(tasks) {
@@ -187,7 +230,7 @@ function formatHeader(tasks, width, state, totalSecs, view, available) {
     if (turn) {
         const inTok = formatTokens(turn.input);
         const outTok = formatTokens(turn.output);
-        const elapsed = formatDuration(totalSecs);
+        const elapsed = formatDurationSecs(totalSecs);
         const showCost = turn.cost > 0;
         const costStr = showCost ? `$${turn.cost.toFixed(3)}` : "";
         turnPlain = `turn ↑${inTok} ↓${outTok} · ${elapsed}${showCost ? ` · ${costStr}` : ""}`;
@@ -259,7 +302,15 @@ function formatTaskLine(task, width, frame, options = {}) {
     const isMcp = task.source === "mcp";
     const ownerKind = options.owner?.kind ?? (task.source === "subagent" ? "subagent" : "main");
     const sourceGlyph = isMcp ? MCP_SOURCE_GLYPH : AGENT_GLYPH[ownerKind];
-    const styledSource = grouped ? "" : theme.fg("dim", sourceGlyph);
+    // Subagent rows carry their agent's identity color on the glyph (and tag
+    // below) — the same hue as the chat's `Agent [type]` line and TaskOutput —
+    // so a user can trace one agent across the whole TUI at a glance.
+    const agentTypeName = !isMcp && ownerKind === "subagent" ? (task.subagentMode ?? task.agent) : undefined;
+    const styledSource = grouped
+        ? ""
+        : agentTypeName
+            ? theme.fg(agentColorFor(agentTypeName), sourceGlyph)
+            : theme.fg("dim", sourceGlyph);
     // Origin tag prefixed to the title, naming who runs the row: the subagent
     // type ("[explore]"), the team role's name ("[planner]"), or the MCP server
     // ("[github]"; "[MCP]" when no server label was recorded). Drawn in accent,
@@ -267,15 +318,20 @@ function formatTaskLine(task, width, frame, options = {}) {
     // rows drop it — the group header carries the origin — except MCP rows,
     // which group under main without being main's own work.
     let tag = "";
+    let tagColor = "accent";
     if (isMcp)
         tag = `[${task.subagentMode ?? "MCP"}]`;
     else if (!grouped) {
-        if (task.subagentMode)
+        if (task.subagentMode) {
             tag = `[${task.subagentMode}]`;
-        else if (ownerKind === "role" && options.owner)
+            tagColor = agentColorFor(task.subagentMode);
+        }
+        else if (ownerKind === "role" && options.owner) {
             tag = `[${options.owner.name}]`;
+            tagColor = agentColorFor(options.owner.name);
+        }
     }
-    const styledTag = tag ? `${theme.fg("accent", tag)} ` : "";
+    const styledTag = tag ? `${theme.fg(tagColor, tag)} ` : "";
     const title = task.title;
     // The title carries the line. Done titles fade to muted
     // (settled work), pending dim (not started), active goes bold, failed turns red.
@@ -290,6 +346,9 @@ function formatTaskLine(task, width, frame, options = {}) {
         case "failed":
             styledTitle = theme.fg("error", title);
             break;
+        case "cancelled":
+            styledTitle = theme.fg("dim", theme.strikethrough(title));
+            break;
         case "in_progress":
             styledTitle = theme.bold(title);
             break;
@@ -312,15 +371,24 @@ function formatTaskLine(task, width, frame, options = {}) {
             rightStyled = theme.fg("muted", tokenText);
         }
     }
+    else if (task.status === "cancelled") {
+        rightPlain = "cancelled";
+        rightStyled = theme.fg("dim", rightPlain);
+    }
     else if (task.status === "in_progress") {
         // Surface the owning agent's live activity (the tool it's currently running,
         // fed by the pool's task_progress events) so a delegated row reads "⋯ grep"
         // rather than a static "running…" — the difference between looking busy and
         // looking stuck. Falls back to "running…" between tools (activity cleared) or
-        // when no owner is resolved.
+        // when no owner is resolved. Each running row carries its own live timer —
+        // the per-run clock the header (a single wall-clock span) deliberately
+        // doesn't show. Ticks smoothly because active rows re-render per spinner
+        // frame anyway.
         const liveActivity = options.owner?.activity;
-        rightPlain = liveActivity ? `⋯ ${liveActivity}` : "running…";
-        rightStyled = theme.fg("warning", rightPlain);
+        const runFor = formatDurationSecs(taskElapsedSecs(task));
+        rightPlain = `${liveActivity ? `⋯ ${liveActivity}` : "running…"} · ${runFor}`;
+        rightStyled =
+            theme.fg("warning", liveActivity ? `⋯ ${liveActivity}` : "running…") + theme.fg("dim", ` · ${runFor}`);
     }
     else if (task.status === "pending") {
         rightPlain = "queued";
@@ -329,7 +397,7 @@ function formatTaskLine(task, width, frame, options = {}) {
     // A warning note (e.g. inherited-model fallback, exhaustion skip) takes over the
     // right column as a ⚠ cue, replacing the usage/status stamp for that row.
     if (task.note) {
-        rightPlain = `⚠ ${task.note}`;
+        rightPlain = `${WARNING_GLYPH} ${task.note}`;
         rightStyled = theme.fg("warning", rightPlain);
     }
     const rightWidth = rightPlain ? visibleWidth(rightPlain) + 1 : 0;
@@ -365,6 +433,81 @@ function filterTasksForView(tasks, agents, _view) {
         filteredTasks: tasks.filter((t) => roleIds.has(taskOwnerId(t))),
     };
 }
+/**
+ * The subagents lens's rows in render order: a depth-first walk of the
+ * delegated forest. Roots are parentless subagent/MCP tasks, plus orphans —
+ * children whose parent was dropped from the store (their `parentTaskId` no
+ * longer resolves), which used to be counted by the header but never rendered.
+ * A visited set guards against `parentTaskId` cycles, so a corrupt link can
+ * never hang the render loop. Both the lens filter (header counts) and the
+ * renderer consume this list, so count and rendering can never disagree.
+ */
+function subagentLensRows(tasks) {
+    const ids = new Set();
+    for (const task of tasks)
+        ids.add(task.id);
+    const childrenByParent = new Map();
+    for (const task of tasks) {
+        if (task.parentTaskId === undefined)
+            continue;
+        const siblings = childrenByParent.get(task.parentTaskId);
+        if (siblings)
+            siblings.push(task);
+        else
+            childrenByParent.set(task.parentTaskId, [task]);
+    }
+    const roots = tasks.filter((t) => (t.parentTaskId === undefined && (t.source === "subagent" || t.source === "mcp")) ||
+        (t.parentTaskId !== undefined && !ids.has(t.parentTaskId)));
+    const rows = [];
+    const visited = new Set();
+    const walk = (task, prefix, isLast, isRoot) => {
+        if (visited.has(task.id))
+            return;
+        visited.add(task.id);
+        rows.push({ task, treePrefix: isRoot ? "" : `${prefix}${isLast ? "└─ " : "├─ "}` });
+        const kids = childrenByParent.get(task.id) ?? [];
+        const childPrefix = isRoot ? "" : `${prefix}${isLast ? "   " : "│  "}`;
+        for (let i = 0; i < kids.length; i++) {
+            walk(kids[i], childPrefix, i === kids.length - 1, false);
+        }
+    };
+    for (const root of roots)
+        walk(root, "", true, true);
+    return rows;
+}
+/**
+ * The flat ("tasks") lens's rows in render order: the main agent's TodoWrite
+ * plan, with each subagent run nested (└─/├─) under the plan item it was
+ * dispatched for (`linkedTaskId`, recorded when exactly one item was
+ * in_progress). This is the visual tie between the plan and the agents
+ * executing it — previously a spawn was linked in spirit but invisible here,
+ * living only in the subagents lens. Runs with no link (or a dangling one —
+ * their todo was replaced) stay out of this lens; they remain visible in the
+ * subagents tree.
+ */
+function flatLensRows(tasks) {
+    const linkedByTodo = new Map();
+    for (const task of tasks) {
+        if (task.linkedTaskId === undefined || task.source !== "subagent")
+            continue;
+        const siblings = linkedByTodo.get(task.linkedTaskId);
+        if (siblings)
+            siblings.push(task);
+        else
+            linkedByTodo.set(task.linkedTaskId, [task]);
+    }
+    const rows = [];
+    for (const task of tasks) {
+        if (!isMainTask(task))
+            continue;
+        rows.push({ task, treePrefix: "" });
+        const linked = linkedByTodo.get(task.id) ?? [];
+        for (let i = 0; i < linked.length; i++) {
+            rows.push({ task: linked[i], treePrefix: i === linked.length - 1 ? "└─ " : "├─ " });
+        }
+    }
+    return rows;
+}
 /**
  * Scope the full task list to the tasks visible in the given lens. The header,
  * state stamp, and done/total count are derived from this subset so they match
@@ -373,9 +516,13 @@ function filterTasksForView(tasks, agents, _view) {
 function filterTasksForLens(tasks, agents, view) {
     switch (view) {
         case "flat":
-            return tasks.filter(isMainTask);
+            // Same walk the renderer uses (plan items + their linked runs), so the
+            // header's done/total always matches the visible rows.
+            return flatLensRows(tasks).map((row) => row.task);
         case "subagents":
-            return tasks.filter((t) => t.source === "subagent" || t.source === "mcp" || t.parentTaskId !== undefined);
+            // Exactly the rows the tree renders (same walk), so the header's
+            // done/total always matches the visible rows.
+            return subagentLensRows(tasks).map((row) => row.task);
         case "teams": {
             const roleIds = new Set();
             for (const a of agents) {
@@ -410,16 +557,21 @@ function groupTasks(tasks, agents) {
             groups.set(owner, [task]);
     }
     const order = [];
+    const ordered = new Set();
+    const push = (id) => {
+        if (!ordered.has(id)) {
+            ordered.add(id);
+            order.push(id);
+        }
+    };
     if (groups.has("main"))
-        order.push("main");
+        push("main");
     for (const agent of agents) {
-        if (groups.has(agent.id) && !order.includes(agent.id))
-            order.push(agent.id);
-    }
-    for (const id of groups.keys()) {
-        if (!order.includes(id))
-            order.push(id);
+        if (groups.has(agent.id))
+            push(agent.id);
     }
+    for (const id of groups.keys())
+        push(id);
     return order.map((id) => ({
         id,
         meta: meta.get(id) ?? defaultAgentMeta(id),
@@ -435,10 +587,18 @@ function groupTasks(tasks, agents) {
 function formatGroupHeader(meta, items, width, selected = false) {
     // A focused role row swaps its ▸ for a filled ▶ in accent — the team-focus
     // selection cursor (the owner-kind glyph mapping itself is unchanged).
+    // Spawned/team agents carry their identity color on the glyph and name
+    // (hashed from the agent type, "explore#2" → "explore"), matching the same
+    // agent's color in the chat and TaskOutput; main keeps the accent.
+    const identityColor = meta.kind === "main" ? AGENT_GLYPH_COLOR[meta.kind] : agentColorFor(agentTypeOfName(meta.name));
     const glyph = selected
-        ? theme.fg("accent", "▶")
-        : theme.fg(AGENT_GLYPH_COLOR[meta.kind], AGENT_GLYPH[meta.kind] ?? AGENT_GLYPH.subagent);
-    const name = selected ? theme.bold(theme.fg("accent", meta.name)) : theme.bold(meta.name);
+        ? theme.fg("accent", SELECTED_GLYPH)
+        : theme.fg(identityColor, AGENT_GLYPH[meta.kind] ?? AGENT_GLYPH.subagent);
+    const name = selected
+        ? theme.bold(theme.fg("accent", meta.name))
+        : meta.kind === "main"
+            ? theme.bold(meta.name)
+            : theme.bold(theme.fg(identityColor, meta.name));
     // Roles read as a dim "· role" suffix for spawned/team agents; the main
     // orchestrator's role sits brighter (muted), matching the design's .grp-role.
     const role = meta.role
@@ -484,7 +644,10 @@ function formatGroupHeader(meta, items, width, selected = false) {
  *   ("[planner]", fed by `--team <url>`), or the MCP server ("[github]").
  * - Three views split by ownership (cycled via app.tasks.cycleView, shown as a
  *   `tasks · subagents · teams` switcher in the header):
- *     - flat ("tasks") — only the main agent's own TodoWrite plan;
+ *     - flat ("tasks") — the main agent's own TodoWrite plan, with each
+ *       dispatched subagent run nested under the plan item it was dispatched
+ *       for (linkedTaskId), so the plan and the agents executing it read as
+ *       one picture;
  *     - subagents — a recursive task tree over delegated work, where a subagent
  *       that spawned a subagent shows its nested tasks (roots are the dispatched
  *       subagents and direct MCP calls; children link via parentTaskId, merged
@@ -509,6 +672,66 @@ export class TaskPanelComponent {
     animationTimer = null;
     view = "flat";
     disposed = false;
+    // Render memoization. The spinner re-renders the whole pane every 80ms, but
+    // between store mutations only the in-progress rows actually change (spinner
+    // frame + live activity). Settled/pending row strings and derived structures
+    // (agentById, the subagents tree walk) are cached and invalidated by the
+    // store's mutation version + pane width, so a frame tick reuses them instead
+    // of rebuilding every string.
+    memoVersion = -1;
+    memoWidth = -1;
+    lineMemo = new Map();
+    agentByIdMemo = null;
+    subagentRowsMemo = null;
+    flatRowsMemo = null;
+    /** Drop all memoized render state when the store or width changed. */
+    syncMemo(width) {
+        const version = taskStore.version();
+        if (version === this.memoVersion && width === this.memoWidth)
+            return;
+        this.memoVersion = version;
+        this.memoWidth = width;
+        this.lineMemo.clear();
+        this.agentByIdMemo = null;
+        this.subagentRowsMemo = null;
+        this.flatRowsMemo = null;
+    }
+    agentById(agents) {
+        if (!this.agentByIdMemo) {
+            this.agentByIdMemo = new Map(agents.map((a) => [a.id, a]));
+        }
+        return this.agentByIdMemo;
+    }
+    subagentRows(tasks) {
+        if (!this.subagentRowsMemo) {
+            this.subagentRowsMemo = subagentLensRows(tasks);
+        }
+        return this.subagentRowsMemo;
+    }
+    flatRows(tasks) {
+        if (!this.flatRowsMemo) {
+            this.flatRowsMemo = flatLensRows(tasks);
+        }
+        return this.flatRowsMemo;
+    }
+    /**
+     * formatTaskLine with caching for rows that don't animate. In-progress rows
+     * depend on the spinner frame and the owner's live activity, so they render
+     * fresh every frame; everything else is stable until the next store mutation
+     * or width change (handled by syncMemo).
+     */
+    taskLine(task, width, options = {}) {
+        if (task.status === "in_progress") {
+            return formatTaskLine(task, width, this.frame, options);
+        }
+        const key = `${task.id}:${options.grouped ? 1 : 0}:${options.treePrefix ?? ""}:${options.owner?.kind ?? ""}`;
+        const hit = this.lineMemo.get(key);
+        if (hit !== undefined)
+            return hit;
+        const line = formatTaskLine(task, width, this.frame, options);
+        this.lineMemo.set(key, line);
+        return line;
+    }
     // Team focus mode: when the TUI focuses the panel, role rows become a
     // navigable list (↑/↓ select, n nudge, a attach, q/esc back). The selection
     // is tracked by role name so a roster reorder doesn't move the cursor.
@@ -524,7 +747,8 @@ export class TaskPanelComponent {
         this.ui = ui ?? null;
     }
     invalidate() {
-        // No cached rendering state.
+        // Force the next render to rebuild its memoized rows/structures.
+        this.memoVersion = -1;
     }
     roleAgents() {
         return taskStore.agents().filter((a) => a.kind === "role");
@@ -551,12 +775,12 @@ export class TaskPanelComponent {
         else if (keybindings.matches(data, "tui.select.down")) {
             this.selectedRole = roles[Math.min(roles.length - 1, index + 1)].name;
         }
-        else if (matchesKey(data, "n")) {
+        else if (matchesAppKey(data, "app.team.nudge")) {
             const role = this.focusedRole();
             if (role)
                 this.onNudge?.(role);
         }
-        else if (matchesKey(data, "a")) {
+        else if (matchesAppKey(data, "app.team.attach")) {
             const role = this.focusedRole();
             if (role)
                 this.onAttach?.(role);
@@ -619,6 +843,7 @@ export class TaskPanelComponent {
     render(width) {
         if (this.disposed)
             return [];
+        this.syncMemo(width);
         const tasks = taskStore.list();
         const allAgents = taskStore.agents();
         // Resolve the lens: keep the stored view while it still has content, else
@@ -643,24 +868,29 @@ export class TaskPanelComponent {
         }
         // Scope all visual state to the tasks visible in the current lens so the
         // animation, rail color, and header count match exactly what the user sees.
-        const lensTasks = filterTasksForLens(tasks, allAgents, view);
+        // The flat and subagents lenses derive from their memoized row walks so
+        // filter and render share one computation (one source of truth for counts).
+        const lensTasks = view === "subagents"
+            ? this.subagentRows(tasks).map((row) => row.task)
+            : view === "flat"
+                ? this.flatRows(tasks).map((row) => row.task)
+                : filterTasksForLens(tasks, allAgents, view);
         const hasActive = lensTasks.some((t) => t.status === "in_progress");
         this.ensureAnimation(hasActive);
         const state = panelState(lensTasks);
-        const totalSecs = lensTasks.reduce((sum, t) => sum + taskElapsedSecs(t), 0);
+        const totalSecs = turnElapsedSecs(lensTasks);
         const railColor = STATE_PRESENTATION[state].color;
         const gutter = `${theme.fg(railColor, RAIL)} `;
         const inner = Math.max(0, width - visibleWidth(RAIL) - 1);
         const lines = [gutter + formatHeader(lensTasks, inner, state, totalSecs, view, available)];
         if (view === "flat") {
-            // Only the main agent's own TodoWrite plan — delegated (subagent/MCP) work
-            // belongs to the subagents lens. Resolve each row's owner from the roster
-            // so the glyph/tag reflect the owning agent's kind, not just the source.
-            const agentById = new Map(allAgents.map((a) => [a.id, a]));
-            for (const task of tasks) {
-                if (!isMainTask(task))
-                    continue;
-                lines.push(gutter + formatTaskLine(task, inner, this.frame, { owner: agentById.get(taskOwnerId(task)) }));
+            // The main agent's TodoWrite plan, with each dispatched run nested under
+            // the plan item it executes (see flatLensRows). Resolve each row's owner
+            // from the roster so the glyph/tag reflect the owning agent's kind and a
+            // nested run shows its live activity + timer.
+            const agentById = this.agentById(allAgents);
+            for (const { task, treePrefix } of this.flatRows(tasks)) {
+                lines.push(gutter + this.taskLine(task, inner, { treePrefix, owner: agentById.get(taskOwnerId(task)) }));
             }
             return lines;
         }
@@ -670,37 +900,19 @@ export class TaskPanelComponent {
             // tasks they spawned in turn (linked by parentTaskId, merged across the
             // process boundary), so a subagent that spawned a subagent is visible.
             // Each task is its own node keeping its [subagentMode]/[server] tag; depth
-            // is drawn with └─/├─/│ connectors. With only top-level tasks the roots
-            // carry an empty prefix and read exactly like flat rows (no extra indent).
-            const childrenByParent = new Map();
-            for (const task of tasks) {
-                if (task.parentTaskId === undefined)
-                    continue;
-                const siblings = childrenByParent.get(task.parentTaskId);
-                if (siblings)
-                    siblings.push(task);
-                else
-                    childrenByParent.set(task.parentTaskId, [task]);
-            }
-            const roots = tasks.filter((t) => t.parentTaskId === undefined && (t.source === "subagent" || t.source === "mcp"));
-            // Resolve each row's owning agent so an in-progress row can show the agent's
-            // live tool activity (⋯ grep) instead of a static "running…".
-            const agentById = new Map(allAgents.map((a) => [a.id, a]));
-            const walk = (task, prefix, isLast, isRoot) => {
-                const connector = isRoot ? "" : `${prefix}${isLast ? "└─ " : "├─ "}`;
+            // is drawn with └─/├─/│ connectors (see subagentLensRows for orphan and
+            // cycle handling). With only top-level tasks the roots carry an empty
+            // prefix and read exactly like flat rows (no extra indent). Owners are
+            // resolved so an in-progress row shows the run's live tool activity
+            // (⋯ grep) instead of a static "running…".
+            const agentById = this.agentById(allAgents);
+            for (const { task, treePrefix } of this.subagentRows(tasks)) {
                 lines.push(gutter +
-                    formatTaskLine(task, inner, this.frame, {
-                        treePrefix: connector,
+                    this.taskLine(task, inner, {
+                        treePrefix,
                         owner: agentById.get(taskOwnerId(task)),
                     }));
-                const kids = childrenByParent.get(task.id) ?? [];
-                const childPrefix = isRoot ? "" : `${prefix}${isLast ? "   " : "│  "}`;
-                for (let i = 0; i < kids.length; i++) {
-                    walk(kids[i], childPrefix, i === kids.length - 1, false);
-                }
-            };
-            for (const root of roots)
-                walk(root, "", true, true);
+            }
             return lines;
         }
         // teams view: role-agent groups with handoff connectors and queued placeholders.
@@ -720,7 +932,7 @@ export class TaskPanelComponent {
             const selected = cursorRole !== undefined && group.meta.kind === "role" && group.meta.name === cursorRole;
             lines.push(gutter + formatGroupHeader(group.meta, group.items, inner, selected));
             for (const task of group.items) {
-                lines.push(gutter + formatTaskLine(task, inner, this.frame, { grouped: true }));
+                lines.push(gutter + this.taskLine(task, inner, { grouped: true }));
             }
             // Forward-handoff connector: emit "└──→ name" only for "→ name" arrows
             // (not back-references "← name"), and only when the target exists in the
@@ -742,7 +954,17 @@ export class TaskPanelComponent {
             }
         }
         if (this.focused) {
-            lines.push(gutter + truncateToWidth(theme.fg("dim", "↑/↓ select · n nudge · a attach · q/esc back"), inner, "…"));
+            // House hint style (see keybinding-hints): dim key + muted description,
+            // muted · separators. Arrows and q/esc are literal by convention; the
+            // nudge/attach keys resolve from the live keybinding config.
+            const sep = theme.fg("muted", " · ");
+            const hint = [
+                rawKeyHint("↑/↓", "select"),
+                rawKeyHint(appKeyLabel("app.team.nudge"), "nudge"),
+                rawKeyHint(appKeyLabel("app.team.attach"), "attach"),
+                rawKeyHint("q/esc", "back"),
+            ].join(sep);
+            lines.push(gutter + truncateToWidth(hint, inner, "…"));
         }
         return lines;
     }