@h-rig/cli 0.0.6-alpha.83 → 0.0.6-alpha.85

package/dist/src/app-opentui/scenes/tasks.js

@@ -11,15 +11,17 @@ var RIG_UI = {
   bg: "#070809",
   bg2: "#0b0c0e",
   panel: "#101115",
-  panel2: "#101115",
-  glass: "#14161b",
-  ink: "#f2f3f6",
-  ink2: "#aeb0ba",
-  ink3: "#6c6e79",
-  ink4: "#44464f",
+  panel2: "#14161b",
+  glass: "#1e2230",
+  border: "#2a2e3a",
+  ink: "#f4f5f8",
+  ink2: "#c7c9d3",
+  ink3: "#9aa0ae",
+  ink4: "#787b86",
   lime: "#ccff4d",
   limeDim: "#a9d63f",
   cyan: "#56d8ff",
+  cyanDim: "#3f9fbd",
   red: "#ff5d5d",
   yellow: "#ffd24d",
   magenta: "#ff79b0"
@@ -38,11 +40,11 @@ var styles = {
 };
 function statusColor(status) {
   switch (status) {
-    case "running":
     case "success":
     case "completed":
     case "merged":
       return RIG_UI.lime;
+    case "running":
     case "preparing":
     case "created":
     case "validating":
@@ -62,11 +64,182 @@ function statusColor(status) {
       return RIG_UI.ink3;
   }
 }
+function statusGlyph(status) {
+  switch (status) {
+    case "success":
+    case "completed":
+    case "merged":
+      return "\u2713";
+    case "running":
+      return "\u25CF";
+    case "preparing":
+    case "created":
+    case "validating":
+    case "reviewing":
+    case "closing-out":
+    case "stopping":
+    case "loading":
+    case "action":
+      return "\u25D0";
+    case "needs-attention":
+    case "needs_attention":
+      return "\u26A0";
+    case "failed":
+    case "error":
+      return "\u2717";
+    default:
+      return "\xB7";
+  }
+}
+function noColorActive() {
+  const noColor = process.env.NO_COLOR;
+  if (noColor !== undefined && noColor !== "") {
+    return true;
+  }
+  return process.env.RIG_NO_COLOR !== undefined;
+}
+function statusLabel(status) {
+  return {
+    glyph: statusGlyph(status),
+    color: noColorActive() ? RIG_UI.ink : statusColor(status)
+  };
+}
+
+// packages/cli/src/app-opentui/drone.ts
+import { RGBA, StyledText, TextAttributes as TextAttributes2 } from "@opentui/core";
+var MINI_DRONE = [
+  "(!!!)   (!!!)",
+  "  \\%==%/  ",
+  "   %%?%%   ",
+  "  /%==%\\  ",
+  "(!!!)   (!!!)"
+];
+var LEAD_MARK = [
+  " .-=-. ",
+  "=%%?%%=",
+  " '-=-' "
+];
+var BLADE_FRAMES = ["---", "\\\\\\", "|||", "///"];
+var EYE_FRAMES = ["o", "@", "\u2022", "."];
+var COLOR = {
+  body: RGBA.fromHex(RIG_UI.lime),
+  mini: RGBA.fromHex(RIG_UI.limeDim),
+  rotor: RGBA.fromHex(RIG_UI.cyan),
+  path: RGBA.fromHex(RIG_UI.cyan),
+  eye: RGBA.fromHex(RIG_UI.ink),
+  dim: RGBA.fromHex(RIG_UI.ink4),
+  ink: RGBA.fromHex(RIG_UI.ink2)
+};
+function bladeForTick(tick, phase = 0) {
+  return BLADE_FRAMES[(Math.floor(tick / 3) + phase) % BLADE_FRAMES.length];
+}
+function eyeForTick(tick, phase = 0) {
+  const pulse = Math.sin(tick * 0.09 + phase);
+  return pulse > 0.55 ? EYE_FRAMES[1] : pulse > 0.1 ? EYE_FRAMES[0] : pulse > -0.45 ? EYE_FRAMES[2] : EYE_FRAMES[3];
+}
+function chunk(text, fg, bold = false, dim = false) {
+  let attributes = TextAttributes2.NONE;
+  if (bold)
+    attributes |= TextAttributes2.BOLD;
+  if (dim)
+    attributes |= TextAttributes2.DIM;
+  return { __isChunk: true, text, fg, ...attributes !== TextAttributes2.NONE ? { attributes } : {} };
+}
+function styledLine(text, colorFor) {
+  const chunks = [];
+  let run = "";
+  let runColor = null;
+  const flush = () => {
+    if (!run || !runColor)
+      return;
+    chunks.push(chunk(run, COLOR[runColor], runColor === "body" || runColor === "eye", runColor === "dim"));
+    run = "";
+  };
+  for (const char of text) {
+    const next = colorFor(char);
+    if (next !== runColor) {
+      flush();
+      runColor = next;
+    }
+    run += char;
+  }
+  flush();
+  return new StyledText(chunks.length > 0 ? chunks : [chunk("", COLOR.ink)]);
+}
+function droneColor(char) {
+  if (char === "?" || char === "o" || char === "@" || char === "\u2022")
+    return "eye";
+  if (char === "%" || char === "=")
+    return "mini";
+  if (char === "$")
+    return "body";
+  if (char === "(" || char === ")" || char === "/" || char === "\\" || char === "|" || char === "-")
+    return "rotor";
+  if (char === "\xB7" || char === "\u2022" || char === "'" || char === ".")
+    return "path";
+  if (char.trim() === "")
+    return "dim";
+  return "ink";
+}
+function motionColor(char) {
+  if (char === "\u25CF" || char === "\u25C6" || char === "\u25C9")
+    return "body";
+  if (char === "\u2022" || char === "\xB7" || char === "\u2500" || char === "\u2502" || char === "\u2571" || char === "\u2572" || char === "\u256D" || char === "\u256E" || char === "\u2570" || char === "\u256F")
+    return "path";
+  if (char === "\u258C" || char === "\u2590" || char === "\u2581" || char === "\u2594")
+    return "mini";
+  return droneColor(char);
+}
+function materializeDrone(lines, tick, phase = 0) {
+  const blade = bladeForTick(tick, phase);
+  const eye = eyeForTick(tick, phase);
+  return lines.map((line) => line.replaceAll("!!!", blade).replaceAll("?", eye));
+}
+function miniDroneLines(tick, align = "left", phase = 0) {
+  return materializeDrone(MINI_DRONE, tick, phase).map((text) => ({
+    text,
+    styledText: styledLine(text, droneColor),
+    fg: RIG_UI.limeDim,
+    align
+  }));
+}
+function brandFleetLines(tick, align = "center") {
+  const left = materializeDrone(MINI_DRONE, tick, 0);
+  const right = materializeDrone(MINI_DRONE, tick, 2);
+  const lead = materializeDrone(LEAD_MARK, tick, 1);
+  const packet = ["\xB7", "\u2022", "\u25CF", "\u2022"][Math.floor(tick / 2) % 4];
+  const bridge = [
+    `    ${left[0]}       ${lead[0]}       ${right[0]}`,
+    `    ${left[1]}   \xB7\u2500\u2500${packet}\u2500\u2500\xB7   ${lead[1]}   \xB7\u2500\u2500${packet}\u2500\u2500\xB7   ${right[1]}`,
+    `    ${left[2]}  \xB7'       '${lead[2]}'       '\xB7  ${right[2]}`,
+    `    ${left[3]}       \u2572  signal bus  \u2571       ${right[3]}`,
+    `    ${left[4]}    \xB7\u2500\u2500\u2500${packet}\u2500\u2500\u2500\u2500\u2500\u2500${packet}\u2500\u2500\u2500\xB7    ${right[4]}`
+  ];
+  return bridge.map((text) => ({
+    text,
+    styledText: styledLine(text, motionColor),
+    fg: RIG_UI.limeDim,
+    align
+  }));
+}
+function actionDrone(tick, phase = 0) {
+  const blade = bladeForTick(tick, phase);
+  const eye = eyeForTick(tick, phase);
+  return `(${blade})\u2572${eye}\u2571(${blade})`;
+}
+function actionDroneLine(tick, text, fg = RIG_UI.ink2) {
+  const prefix = actionDrone(tick);
+  const content = `${prefix}  ${text}`;
+  return { text: content, styledText: styledLine(content, motionColor), fg, align: "center" };
+}
 
 // packages/cli/src/app-opentui/render/scene.ts
 function line(text, options = {}) {
   return { text, ...options };
 }
+function blank() {
+  return { text: "" };
+}
 function deckRow(input) {
   const prefix = input.active ? "\u25B8" : " ";
   const label = input.label.toUpperCase().padEnd(10);
@@ -77,10 +250,39 @@ function deckRow(input) {
     activateOnClick: input.activateOnClick
   });
 }
+function loadingRows(label, tick = 0, compact = false) {
+  const mascot = compact ? miniDroneLines(tick, "center") : brandFleetLines(tick, "center");
+  return [
+    blank(),
+    ...mascot,
+    blank(),
+    { ...actionDroneLine(tick, `loading ${label}\u2026`, RIG_UI.cyan), align: "center" }
+  ];
+}
+function errorBanner(message, hint) {
+  return [
+    line(`\u2717 failed to load \u2014 ${message}`, { fg: RIG_UI.red, bold: true }),
+    ...hint ? [line(`  ${hint}`, { fg: RIG_UI.ink3 })] : [],
+    line("  select refresh/retry below", { fg: RIG_UI.ink4 }),
+    line("", { fg: RIG_UI.ink3 })
+  ];
+}
+function lastRefreshError(state) {
+  const value = state.data.lastRefreshError;
+  return typeof value === "string" && value.trim() ? value : undefined;
+}
 function makeSceneFrame(input) {
   return input;
 }
 
+// packages/cli/src/app-opentui/selectable.ts
+function selectableDeckRow(deck, item) {
+  return { ...deckRow({ ...deck, activateOnClick: true }), selectable: item };
+}
+function withSelectable(line2, item) {
+  return { ...line2, selectable: item, activateOnClick: true };
+}
+
 // packages/cli/src/app-opentui/list-search.ts
 function isListSearchScene(scene) {
   return scene === "fleet" || scene === "tasks";
@@ -113,8 +315,86 @@ function filterTasksForSearch(tasks, query) {
 function searchSummary(kind, query, visible, total) {
   return query.trim() ? `search ${JSON.stringify(query)} \xB7 ${visible}/${total} ${kind}` : `${total} ${kind}`;
 }
+function taskSortSpec(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value))
+    return null;
+  const record = value;
+  const key = record.key;
+  const dir = record.dir;
+  if ((key === "status" || key === "id" || key === "priority" || key === "assignee" || key === "title") && (dir === "asc" || dir === "desc")) {
+    return { key, dir };
+  }
+  return null;
+}
+function cycleTaskSort(current, key) {
+  if (!current || current.key !== key)
+    return { key, dir: "asc" };
+  if (current.dir === "asc")
+    return { key, dir: "desc" };
+  return null;
+}
+function applyDir(rows, compare, dir) {
+  const sorted = [...rows].sort(compare);
+  return dir === "desc" ? sorted.reverse() : sorted;
+}
+function sortTasks(tasks, spec) {
+  if (!spec)
+    return [...tasks];
+  const { key, dir } = spec;
+  const compare = (a, b) => {
+    if (key === "status")
+      return a.status.localeCompare(b.status) || a.id.localeCompare(b.id, undefined, { numeric: true });
+    if (key === "priority") {
+      const left = a.priority ?? Number.NEGATIVE_INFINITY;
+      const right = b.priority ?? Number.NEGATIVE_INFINITY;
+      return right - left || a.id.localeCompare(b.id, undefined, { numeric: true });
+    }
+    if (key === "assignee")
+      return (a.assignees[0] ?? "").localeCompare(b.assignees[0] ?? "") || a.id.localeCompare(b.id, undefined, { numeric: true });
+    if (key === "title")
+      return a.title.localeCompare(b.title, undefined, { sensitivity: "base" }) || a.id.localeCompare(b.id, undefined, { numeric: true });
+    return a.id.localeCompare(b.id, undefined, { numeric: true });
+  };
+  return applyDir(tasks, compare, dir);
+}
 
 // packages/cli/src/app-opentui/scenes/tasks.ts
+var TASK_RECOVERY_ITEMS = [
+  { id: "refresh", label: "refresh", intent: { scene: "tasks", argv: ["tasks"], action: { kind: "refresh", label: "Refresh tasks" } }, message: "refresh task source" },
+  { id: "next", label: "next", intent: { scene: "command", argv: ["task", "run", "--next"], action: { kind: "command-run", label: "Run next task" } }, message: "dispatch next runnable task" },
+  { id: "repair", label: "repair", intent: { scene: "command", argv: ["init", "--repair"], action: { kind: "command-run", label: "Repair task source" } }, message: "repair project/task source" },
+  { id: "server", label: "server", intent: { scene: "server", argv: ["server", "status"], action: { kind: "refresh", label: "Open server controls" } }, message: "server controls" },
+  { id: "doctor", label: "doctor", intent: { scene: "doctor", argv: ["doctor"], action: { kind: "doctor-run", label: "Run doctor" } }, message: "diagnose task source" }
+];
+var COL = {
+  glyph: 1,
+  id: 11,
+  status: 12,
+  priority: 5,
+  assignee: 12
+};
+var GUTTER = "  ";
+var TASK_COLUMNS = [
+  { key: "status", label: "status", hint: "by task state" },
+  { key: "id", label: "task-id", hint: "by id" },
+  { key: "priority", label: "priority", hint: "by priority" },
+  { key: "assignee", label: "assignee", hint: "by assignee" },
+  { key: "title", label: "title", hint: "by title" }
+];
+function taskSelectableItem(task) {
+  const taskId = task.id?.trim();
+  if (!taskId)
+    return null;
+  const title = (task.title || "task").trim() || "task";
+  const activeRunId = task.activeRun?.runId?.trim();
+  return {
+    id: taskId,
+    label: title,
+    data: { taskDetailId: taskId, selectedTaskId: taskId, ...activeRunId ? { selectedRunId: activeRunId } : {} },
+    intent: { scene: "tasks", argv: ["tasks", taskId], action: { kind: "refresh", label: `Open ${title}`, payload: { taskDetailId: taskId } } },
+    message: `open ${title} detail`
+  };
+}
 function taskView(state) {
   const tasks = state.data.tasks;
   return tasks && typeof tasks === "object" && !Array.isArray(tasks) ? tasks : null;
@@ -123,6 +403,32 @@ function taskRecords(state) {
   const records = taskView(state)?.records;
   return Array.isArray(records) ? records : [];
 }
+function dispatchingFor(state) {
+  const value = state.data.dispatchingRun;
+  if (!value || typeof value !== "object" || Array.isArray(value))
+    return null;
+  const record = value;
+  if (typeof record.taskId !== "string" || !record.taskId.trim())
+    return null;
+  return { taskId: record.taskId, status: typeof record.status === "string" ? record.status : "dispatching" };
+}
+function updatedAgoLabel(state) {
+  const refreshedAt = taskView(state)?.refreshedAt;
+  if (typeof refreshedAt !== "string")
+    return;
+  const parsed = Date.parse(refreshedAt);
+  if (!Number.isFinite(parsed))
+    return;
+  const seconds = Math.max(0, Math.round((Date.now() - parsed) / 1000));
+  if (seconds < 1)
+    return "updated just now";
+  if (seconds < 60)
+    return `updated ${seconds}s ago`;
+  const minutes = Math.round(seconds / 60);
+  if (minutes < 60)
+    return `updated ${minutes}m ago`;
+  return `updated ${Math.round(minutes / 60)}h ago`;
+}
 function panelWidth(layout) {
   return layout?.centerWidth ?? 100;
 }
@@ -134,9 +440,19 @@ function clip(value, width) {
     return "";
   return value.length <= width ? value : `${value.slice(0, Math.max(0, width - 1))}\u2026`;
 }
+function cell(value, width) {
+  return clip(value, width).padEnd(width);
+}
 function formatAssignee(value) {
   return value.startsWith("@") ? value : `@${value}`;
 }
+function assigneeCell(task) {
+  const first = task.assignees[0];
+  return first ? formatAssignee(first) : "\u2014";
+}
+function priorityCell(task) {
+  return task.priority === undefined ? "\u2014" : `P${String(task.priority).slice(0, 3)}`;
+}
 function taskViewLabel(view) {
   const filters = view?.filters && typeof view.filters === "object" && !Array.isArray(view.filters) ? view.filters : {};
   const filter = typeof filters.preset === "string" && filters.preset !== "custom" ? filters.preset : [
@@ -152,31 +468,75 @@ function taskViewLabel(view) {
   const count = visible !== undefined && total !== undefined ? `${visible}/${total}` : "syncing";
   return `filter ${filter} \xB7 sort ${sort} \xB7 ${count}`;
 }
-function taskRow(width, task, index, active) {
-  const id = task.id.slice(0, 10).padEnd(11);
-  const status = task.status.replace(/[_-]/g, " ").slice(0, 11).padEnd(12);
-  const priority = task.priority === undefined ? "prio --" : `prio ${String(task.priority).slice(0, 3).padStart(2)}`;
+function sortArrow(spec, key) {
+  if (!spec || spec.key !== key)
+    return "";
+  return spec.dir === "asc" ? "\u25B2" : "\u25BC";
+}
+function headerRow(spec) {
+  const text = [
+    "   ",
+    cell(`task-id${sortArrow(spec, "id")}`, COL.id),
+    cell(`status${sortArrow(spec, "status")}`, COL.status),
+    cell(`prio${sortArrow(spec, "priority")}`, COL.priority),
+    cell(`assignee${sortArrow(spec, "assignee")}`, COL.assignee),
+    `title${sortArrow(spec, "title")}`
+  ].join(GUTTER);
+  return line(text, { fg: RIG_UI.ink, bold: true, bg: RIG_UI.glass });
+}
+function sortToggleRow(column, current) {
+  const arrow = sortArrow(current, column.key);
+  const active = current?.key === column.key;
+  const next = cycleTaskSort(current, column.key);
+  const marker = active ? "\u25B8" : " ";
+  const label = `${column.label}${arrow ? ` ${arrow}` : ""}`.padEnd(12);
+  const row = line(`${marker} ${label} ${column.hint}`, {
+    fg: active ? RIG_UI.lime : RIG_UI.ink2,
+    bold: active
+  });
+  return withSelectable(row, {
+    id: `task-sort-${column.key}`,
+    label: `sort by ${column.label}`,
+    data: { taskSort: next },
+    message: `sort tasks ${next ? `${column.label} ${next.dir}` : "default"}`
+  });
+}
+function sortStrip(spec) {
+  return [
+    line("SORT", { fg: RIG_UI.ink3, bold: true }),
+    ...TASK_COLUMNS.map((column) => sortToggleRow(column, spec)),
+    line("", { fg: RIG_UI.ink3 })
+  ];
+}
+function taskRow(width, task, active, optimistic) {
+  const effectiveStatus = optimistic ?? task.status;
+  const { glyph } = statusLabel(effectiveStatus);
   const marker = active ? "\u258C" : " ";
-  const prefix = `${marker} ${id} ${status} ${priority.padEnd(8)} `;
+  const status = effectiveStatus.replace(/[_-]/g, " ");
+  const fixed = `${marker} ${glyph}${GUTTER}${cell(task.id, COL.id)}${GUTTER}${cell(status, COL.status)}${GUTTER}${cell(priorityCell(task), COL.priority)}${GUTTER}${cell(assigneeCell(task), COL.assignee)}${GUTTER}`;
   const activeRun = task.activeRun;
   const activeSuffix = activeRun ? ` \xB7 attach ${activeRun.runId.slice(0, 8)}${activeRun.status ? ` ${activeRun.status}` : ""}` : "";
-  const titleWidth = Math.max(12, width - prefix.length - 2);
-  return line(`${prefix}${clip(`${task.title}${activeSuffix}`, titleWidth)}`, {
-    fg: active ? RIG_UI.ink : statusColor(task.status),
+  const titleWidth = Math.max(8, width - fixed.length - 2);
+  const row = line(`${fixed}${clip(`${task.title}${activeSuffix}`, titleWidth)}`, {
+    fg: active ? RIG_UI.ink : RIG_UI.ink2,
     bold: active,
-    selectableIndex: index,
-    activateOnClick: true
+    ...active ? { bg: RIG_UI.glass } : {}
   });
+  const item = taskSelectableItem(task);
+  return item ? withSelectable(row, item) : row;
 }
+var RECOVERY_DECKS = [
+  { label: "refresh", detail: "reload task source" },
+  { label: "next", detail: "dispatch next runnable task" },
+  { label: "repair", detail: "repair project/task source link" },
+  { label: "server", detail: "open server controls" },
+  { label: "doctor", detail: "diagnose task source" }
+];
 function recoveryRows(selected, reason) {
   return [
     ...reason ? [line(reason, { fg: RIG_UI.yellow }), line("", { fg: RIG_UI.ink3 })] : [],
     line("ACTIONS", { fg: RIG_UI.ink3, bold: true }),
-    deckRow({ label: "refresh", detail: "reload task source", index: 0, active: selected === 0, activateOnClick: true }),
-    deckRow({ label: "next", detail: "dispatch next runnable task", index: 1, active: selected === 1, activateOnClick: true }),
-    deckRow({ label: "repair", detail: "repair project/task source link", index: 2, active: selected === 2, activateOnClick: true }),
-    deckRow({ label: "server", detail: "open server controls", index: 3, active: selected === 3, activateOnClick: true }),
-    deckRow({ label: "doctor", detail: "diagnose task source", index: 4, active: selected === 4, activateOnClick: true })
+    ...RECOVERY_DECKS.map((deck, index) => selectableDeckRow({ ...deck, index, active: selected === index }, TASK_RECOVERY_ITEMS[index]))
   ];
 }
 function emptyRows(query, total, selected) {
@@ -194,27 +554,119 @@ function degradedRows(state, selected) {
     return [];
   return recoveryRows(selected, state.error.message);
 }
+function rawString(raw, key) {
+  const value = raw?.[key];
+  return typeof value === "string" ? value : "";
+}
+function taskBody(state, task) {
+  const preview = state.data.taskPreviewRaw;
+  if (preview && typeof preview === "object" && !Array.isArray(preview)) {
+    const fromPreview = rawString(preview, "body");
+    if (fromPreview.trim())
+      return fromPreview;
+  }
+  return rawString(task?.raw, "body");
+}
+function renderTaskDetail(state, taskId, layout) {
+  const task = taskRecords(state).find((entry) => entry.id === taskId);
+  const title = (task?.title || taskId).trim();
+  const status = task?.status ?? "unknown";
+  const { glyph, color } = statusLabel(status);
+  const body = taskBody(state, task);
+  const activeRunId = task?.activeRun?.runId?.trim();
+  const width = panelWidth(layout);
+  const selected = Math.max(0, state.selection.index);
+  const headerLines = [
+    line(`${glyph} ${title}`, { fg: color, bold: true }),
+    line(`task ${taskId} \xB7 ${status}`, { fg: RIG_UI.ink3 }),
+    ...task && task.labels.length > 0 ? [line(`labels: ${task.labels.join(", ")}`, { fg: RIG_UI.ink4 })] : [],
+    ...task && task.assignees.length > 0 ? [line(`assignees: ${task.assignees.join(", ")}`, { fg: RIG_UI.ink4 })] : [],
+    line("", { fg: RIG_UI.ink3 }),
+    line("ACTIONS", { fg: RIG_UI.ink3, bold: true })
+  ];
+  let index = 0;
+  const actionRows = [];
+  actionRows.push(selectableDeckRow({ label: "back", detail: "return to the task list", index, active: selected === index }, { id: "task-detail-back", label: "back", data: { taskDetailId: undefined }, message: "back to task list" }));
+  index += 1;
+  actionRows.push(selectableDeckRow({ label: "dispatch", detail: "submit a Pi run for this task", index, active: selected === index }, { id: `task-detail-run:${taskId}`, label: `dispatch ${taskId}`, intent: { scene: "tasks", argv: ["run", taskId], action: { kind: "task-run-id", payload: { task: taskId }, label: `Dispatching ${taskId}` } }, message: `dispatch task ${taskId}` }));
+  index += 1;
+  if (activeRunId) {
+    actionRows.push(selectableDeckRow({ label: "attach", detail: `attach the Pi console to run ${activeRunId.slice(0, 8)}`, index, active: selected === index }, { id: `task-detail-attach:${taskId}`, label: `attach ${activeRunId.slice(0, 8)}`, intent: { scene: "handoff", argv: ["attach", activeRunId], action: { kind: "run-attach", payload: { runId: activeRunId }, label: `Attach Pi ${activeRunId.slice(0, 8)}` } }, message: `attach Pi to ${activeRunId.slice(0, 8)}` }));
+    index += 1;
+  }
+  const bodyHeading = [line("", { fg: RIG_UI.ink3 }), line("BODY", { fg: RIG_UI.ink3, bold: true })];
+  const bodyLines = body.trim() ? body.split(`
+`).slice(0, 400).map((text) => line(text, { fg: RIG_UI.ink2 })) : [line("(no description)", { fg: RIG_UI.ink4 })];
+  const panelLines = [...headerLines, ...actionRows, ...bodyHeading, ...bodyLines];
+  const paddingX = layout?.compact ? 2 : 3;
+  const chromeTopInset = 3 + 1;
+  const headerCount = headerLines.length + actionRows.length + bodyHeading.length;
+  const native = body.trim() ? {
+    kind: "markdown",
+    content: body,
+    top: (layout?.centerTop ?? 1) + chromeTopInset + headerCount,
+    left: (layout?.centerLeft ?? 2) + paddingX,
+    width: Math.max(20, width - paddingX * 2),
+    height: Math.max(6, panelHeight(layout, 0) - chromeTopInset - headerCount - 1)
+  } : undefined;
+  return makeSceneFrame({
+    scene: "tasks",
+    title: "Task",
+    lines: [],
+    ...native ? { native } : {},
+    panels: [{
+      id: "task-detail",
+      top: 0,
+      width,
+      height: panelHeight(layout, 0),
+      lines: panelLines,
+      backgroundColor: RIG_UI.panel,
+      backgroundAlpha: 184,
+      opacity: 1,
+      border: false,
+      stickyScroll: true,
+      stickyStart: "top",
+      chrome: "ad-terminal",
+      headerText: `task ${taskId}`,
+      headerHeight: 3,
+      paddingX,
+      paddingY: 1
+    }],
+    footer: { run: activeRunId ? `${activeRunId.slice(0, 8)} active` : undefined, message: "back returns to the list \xB7 dispatch runs the task" },
+    live: state.status === "action"
+  });
+}
 function renderTasksScene(state, layout) {
+  const detailId = typeof state.data.taskDetailId === "string" ? state.data.taskDetailId.trim() : "";
+  if (detailId)
+    return renderTaskDetail(state, detailId, layout);
   const width = panelWidth(layout);
   const view = taskView(state);
   const allTasks = taskRecords(state);
   const query = listSearchQuery(state);
-  const tasks = filterTasksForSearch(allTasks, query);
+  const spec = taskSortSpec(state.data.taskSort);
+  const tasks = sortTasks(filterTasksForSearch(allTasks, query), spec);
   const selected = typeof state.data.selectedTaskId === "string" && tasks.some((task) => task.id === state.data.selectedTaskId) ? state.data.selectedTaskId : tasks[0]?.id;
   const selectedIndex = Math.max(0, tasks.findIndex((task) => task.id === selected));
   const recoveryIndex = Math.max(0, Math.min(4, state.selection.index));
-  const dispatch = state.data.dispatchingRun;
-  const dispatchLine = dispatch && typeof dispatch === "object" && !Array.isArray(dispatch) ? ` \xB7 ${dispatch.runId ?? "new"} ${dispatch.status ?? "dispatching"}` : "";
+  const dispatching = dispatchingFor(state);
+  const dispatchLine = dispatching ? ` \xB7 ${state.data.dispatchingRun?.runId ?? "new"} ${dispatching.status}` : "";
+  const updatedAgo = updatedAgoLabel(state);
   const panelTop = 0;
   const contentWidth = Math.max(12, width - (layout?.compact ? 8 : 10));
+  const loading = state.status === "loading" && allTasks.length === 0;
+  const refreshError = lastRefreshError(state);
+  const banner = refreshError && !state.error ? errorBanner(refreshError) : [];
   const panelLines = [
-    line("TASK        STATUS       PRIORITY  TITLE", { fg: RIG_UI.ink3, bold: true }),
-    line("", { fg: RIG_UI.ink3 }),
+    ...banner,
     ...tasks.length > 0 ? [
       ...degradedRows(state, recoveryIndex),
       ...query.trim() ? [line(searchSummary("tasks", query, tasks.length, allTasks.length), { fg: RIG_UI.ink4 }), line("", { fg: RIG_UI.ink3 })] : [],
-      ...tasks.map((task, index) => taskRow(contentWidth, task, index, index === selectedIndex))
-    ] : state.error ? degradedRows(state, recoveryIndex) : [
+      ...sortStrip(spec),
+      headerRow(spec),
+      line("", { fg: RIG_UI.ink3 }),
+      ...tasks.map((task, index) => taskRow(contentWidth, task, index === selectedIndex, dispatching && dispatching.taskId === task.id ? dispatching.status : undefined))
+    ] : state.error ? degradedRows(state, recoveryIndex) : loading ? loadingRows("tasks", state.tick) : [
       ...query.trim() ? [line(searchSummary("tasks", query, tasks.length, allTasks.length), { fg: RIG_UI.ink4 }), line("", { fg: RIG_UI.ink3 })] : [],
       ...emptyRows(query, allTasks.length, recoveryIndex)
     ]
@@ -224,7 +676,7 @@ function renderTasksScene(state, layout) {
     title: "Tasks",
     lines: [
       line("", { fg: RIG_UI.ink4 }),
-      line(query.trim() ? `   tasks --search ${JSON.stringify(query)}` : `   tasks \xB7 ${taskViewLabel(view)}${dispatchLine}`, { fg: RIG_UI.ink3 })
+      line(`${query.trim() ? `   tasks --search ${JSON.stringify(query)}` : `   tasks \xB7 ${taskViewLabel(view)}${dispatchLine}`}${updatedAgo ? `   \xB7   ${updatedAgo}` : ""}`, { fg: RIG_UI.ink3 })
     ],
     panels: [{
       id: "tasks-list",
@@ -242,7 +694,10 @@ function renderTasksScene(state, layout) {
       paddingX: layout?.compact ? 2 : 3,
       paddingY: 1
     }],
-    footer: { message: query.trim() ? searchSummary("tasks", query, tasks.length, allTasks.length) : taskViewLabel(view) },
+    footer: {
+      message: query.trim() ? searchSummary("tasks", query, tasks.length, allTasks.length) : taskViewLabel(view),
+      ...updatedAgo ? { updated: updatedAgo } : {}
+    },
     typeBarPlaceholder: "search tasks\u2026",
     live: true
   });

package/dist/src/app-opentui/scenes/workspace.d.ts

@@ -0,0 +1,3 @@
+import type { AppSceneFrame, AppState } from "../types";
+import type { StageLayout } from "../layout";
+export declare function renderWorkspaceScene(state: AppState, layout?: StageLayout): AppSceneFrame;