@gamflaz/opencode-todolist 1.0.5 → 1.0.6

package/dist/tui/todo-panel.js

@@ -0,0 +1,742 @@
+import { memo as _$memo } from "@opentui/solid";
+import { createTextNode as _$createTextNode } from "@opentui/solid";
+import { effect as _$effect } from "@opentui/solid";
+import { insertNode as _$insertNode } from "@opentui/solid";
+import { insert as _$insert } from "@opentui/solid";
+import { createComponent as _$createComponent } from "@opentui/solid";
+import { setProp as _$setProp } from "@opentui/solid";
+import { use as _$use } from "@opentui/solid";
+import { createElement as _$createElement } from "@opentui/solid";
+import { mkdirSync, watch } from "node:fs";
+import { createEffect, createMemo, createSignal, For, onCleanup, Show } from "solid-js";
+import { supportsImageRendering } from "../icons/image-capabilities";
+import { SvgIcon } from "../icons/svg-icon";
+import { arrowDownSvgIcon, arrowRightSvgIcon, continuePromptSvgIcon, removeSvgIcon } from "../icons/svg-icons";
+import { StatusLabel } from "../schemas/status";
+import { getTodosDirectory, hashSessionID, readTodosSync, writeTodos } from "../storage/todo-store";
+import { getTodoDisplaySummary, hasOpenTodos } from "../todos/display";
+import { TodoTree } from "../todos/todo-tree";
+import { shorten } from "./text";
+import { ERROR_PREFIX, ErrorRowWidth, RowWidth } from "./layout";
+
+/** How many open items the Continue prompt lists before collapsing the rest. */
+export const CONTINUE_PROMPT_MAX_ITEMS = 3;
+
+/** Per-field caps so one long note cannot flood the prompt. */
+export const CONTINUE_PROMPT_MAX_CONTENT = 60;
+export const CONTINUE_PROMPT_MAX_NOTE = 60;
+const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+const SPINNER_INTERVAL_MS = 100;
+const WATCH_DEBOUNCE_MS = 50;
+
+/**
+ * Maximum number of todo rows the panel shows before it starts scrolling.
+ * Keeping the panel compact protects the composer; scrolling guarantees no
+ * row is ever silently dropped.
+ */
+export const TODO_PANEL_MAX_ROWS = 8;
+
+/** A renderable line: either a task row or its on-demand error row. */
+
+const isOpen = status => status !== "completed" && status !== "cancelled";
+function ContinuePrompt(summary) {
+  const open = summary?.items.filter(item => isOpen(item.status)) ?? [];
+  const shown = open.slice(0, CONTINUE_PROMPT_MAX_ITEMS);
+  const hidden = open.length - shown.length;
+  const lines = ["Continue the current todolist.", "First call manage_todo_list [read] and reconcile the stored list with this summary."];
+  if (summary) {
+    lines.push(`Progress: ${summary.completed}/${summary.total} completed.`);
+  }
+  if (open.length) {
+    lines.push("Open items that still need work (short summary):");
+    for (const item of shown) {
+      const note = item.note ? ` — ${shorten(item.note, CONTINUE_PROMPT_MAX_NOTE)}` : "";
+      lines.push(`${item.depth ? "  " : ""}- ${item.id} (${StatusLabel[item.status]}) ${shorten(item.content, CONTINUE_PROMPT_MAX_CONTENT)}${note}`);
+    }
+    if (hidden > 0) lines.push(`... (${hidden} more open item(s))`);
+  } else {
+    lines.push("No open items are listed. Verify the stored state before stopping.");
+  }
+  lines.push("Continue the next open item immediately. Keep exactly one item in_progress and update the todo list after verification.");
+  return lines.join("\n");
+}
+
+/**
+ * Flattens rows into renderable lines, inserting an error detail right below
+ * an expanded error row (click to toggle).
+ */
+export function TodoListEntries(rows, expandedIds) {
+  const expanded = new Set(expandedIds);
+  const entries = [];
+  for (const row of rows) {
+    entries.push({
+      kind: "row",
+      row
+    });
+    if (row.status === "error" && expanded.has(row.id)) {
+      entries.push({
+        kind: "error",
+        row
+      });
+    }
+  }
+  return entries;
+}
+
+/**
+ * Follow the most advanced active row: the last `in_progress` entry is the
+ * task currently being executed. Error lines are skipped.
+ */
+export function FindActiveEntryIndex(entries) {
+  for (let index = entries.length - 1; index >= 0; index -= 1) {
+    const entry = entries[index];
+    if (entry.kind === "row" && entry.row.status === "in_progress") {
+      return index;
+    }
+  }
+  return -1;
+}
+
+/**
+ * Scroll offset needed to reveal the active row, or `undefined` when nothing
+ * should move (no active row, already visible, or the list fits).
+ *
+ * Kept pure so the follow behaviour is testable without a live renderer.
+ */
+export function NextFollowScrollTop(input) {
+  const {
+    currentTop,
+    activeIndex,
+    rowCount,
+    viewportHeight
+  } = input;
+  if (activeIndex < 0) return undefined;
+  const viewport = Math.max(1, viewportHeight);
+  const maxTop = Math.max(0, rowCount - viewport);
+  if (maxTop === 0) return undefined;
+  const activeBottom = activeIndex + 1;
+  const visibleBottom = currentTop + viewport;
+  if (activeIndex >= currentTop && activeBottom <= visibleBottom) {
+    return undefined;
+  }
+  const targetTop = activeIndex >= visibleBottom ? activeBottom - viewport : activeIndex;
+  return Math.min(Math.max(0, targetTop), maxTop);
+}
+
+/**
+ * Presentational, context-free todo list.
+ *
+ * The panel is deliberately chrome-free: no indicator row, and the horizontal
+ * scrollbar stays hidden. Long titles never wrap — they are reached by
+ * scrolling left/right, and the vertical list scrolls when it exceeds
+ * `TODO_PANEL_MAX_ROWS`. When a row is `in_progress` the panel follows it.
+ *
+ * `activeIcon` is an accessor so the spinner updates only the icon text node
+ * instead of forcing every row object to be rebuilt on each animation frame.
+ */
+export function TodoList(props) {
+  const rowId = id => `todo-row-${id}`;
+  const [box, setBox] = createSignal();
+  const entries = createMemo(() => TodoListEntries(props.rows, props.expandedIds ?? []));
+  const iconOf = row => row.status === "in_progress" ? props.activeIcon?.() ?? row.icon : row.icon;
+  const followActiveRow = el => {
+    if (el.isDestroyed) return;
+    const target = NextFollowScrollTop({
+      currentTop: el.scrollTop,
+      activeIndex: FindActiveEntryIndex(entries()),
+      rowCount: entries().length,
+      viewportHeight: el.viewport.height
+    });
+    if (target !== undefined) el.scrollTo(target);
+  };
+  const attach = el => {
+    setBox(el);
+    el.content.maxWidth = undefined;
+    const internalOnSizeChange = el.content.onSizeChange;
+    el.content.onSizeChange = () => {
+      internalOnSizeChange?.call(el.content);
+      followActiveRow(el);
+    };
+    props.ref?.(el);
+  };
+
+  // `entries()` already changes whenever rows or expanded ids change.
+  createEffect(() => {
+    entries();
+    const el = box();
+    if (el) followActiveRow(el);
+  });
+  const scrollbarOptions = () => props.scrollbarColor ? {
+    trackOptions: {
+      backgroundColor: props.scrollbarColor,
+      foregroundColor: props.scrollbarColor
+    }
+  } : undefined;
+  const isExpanded = id => (props.expandedIds ?? []).includes(id);
+  return (() => {
+    var _el$ = _$createElement("scrollbox"),
+      _el$2 = _$createElement("box");
+    _$insertNode(_el$, _el$2);
+    _$use(attach, _el$);
+    _$setProp(_el$, "width", "100%");
+    _$setProp(_el$, "horizontalScrollbarOptions", {
+      visible: false
+    });
+    _$setProp(_el$2, "flexDirection", "column");
+    _$setProp(_el$2, "flexShrink", 0);
+    _$insert(_el$2, _$createComponent(For, {
+      get each() {
+        return entries();
+      },
+      children: entry => entry.kind === "row" ? (() => {
+        var _el$3 = _$createElement("box"),
+          _el$4 = _$createElement("text"),
+          _el$7 = _$createElement("span"),
+          _el$8 = _$createTextNode(` `),
+          _el$9 = _$createElement("span"),
+          _el$0 = _$createElement("span");
+        _$insertNode(_el$3, _el$4);
+        _$setProp(_el$3, "flexDirection", "row");
+        _$setProp(_el$3, "height", 1);
+        _$setProp(_el$3, "flexShrink", 0);
+        _$setProp(_el$3, "onMouseDown", e => {
+          if (e.button === 0 && entry.row.status === "error") {
+            e.stopPropagation?.();
+            props.onToggleRow?.(entry.row.id);
+          }
+        });
+        _$insertNode(_el$4, _el$7);
+        _$insertNode(_el$4, _el$9);
+        _$insertNode(_el$4, _el$0);
+        _$setProp(_el$4, "wrapMode", "none");
+        _$insert(_el$4, _$createComponent(Show, {
+          get when() {
+            return entry.row.depth > 0;
+          },
+          get children() {
+            var _el$5 = _$createElement("span");
+            _$insertNode(_el$5, _$createTextNode(`  `));
+            return _el$5;
+          }
+        }), _el$7);
+        _$insertNode(_el$7, _el$8);
+        _$insert(_el$7, () => iconOf(entry.row), _el$8);
+        _$insert(_el$9, () => TodoTree.formatIdPrefix(entry.row.id, entry.row.depth));
+        _$insert(_el$0, () => entry.row.content);
+        _$insert(_el$4, _$createComponent(Show, {
+          get when() {
+            return entry.row.status === "error";
+          },
+          get children() {
+            var _el$1 = _$createElement("span"),
+              _el$10 = _$createTextNode(` `);
+            _$insertNode(_el$1, _el$10);
+            _$insert(_el$1, () => isExpanded(entry.row.id) ? "⌄" : "›", null);
+            _$effect(_$p => _$setProp(_el$1, "style", {
+              fg: props.scrollbarColor
+            }, _$p));
+            return _el$1;
+          }
+        }), null);
+        _$effect(_p$ => {
+          var _v$3 = rowId(entry.row.id),
+            _v$4 = RowWidth(entry.row),
+            _v$5 = {
+              fg: entry.row.iconColor
+            },
+            _v$6 = {
+              fg: entry.row.textColor
+            },
+            _v$7 = {
+              fg: entry.row.textColor,
+              strikethrough: entry.row.status === "completed"
+            };
+          _v$3 !== _p$.e && (_p$.e = _$setProp(_el$3, "id", _v$3, _p$.e));
+          _v$4 !== _p$.t && (_p$.t = _$setProp(_el$3, "width", _v$4, _p$.t));
+          _v$5 !== _p$.a && (_p$.a = _$setProp(_el$7, "style", _v$5, _p$.a));
+          _v$6 !== _p$.o && (_p$.o = _$setProp(_el$9, "style", _v$6, _p$.o));
+          _v$7 !== _p$.i && (_p$.i = _$setProp(_el$0, "style", _v$7, _p$.i));
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined,
+          o: undefined,
+          i: undefined
+        });
+        return _el$3;
+      })() : (() => {
+        var _el$11 = _$createElement("box"),
+          _el$12 = _$createElement("text"),
+          _el$13 = _$createElement("span"),
+          _el$14 = _$createElement("span");
+        _$insertNode(_el$11, _el$12);
+        _$setProp(_el$11, "flexDirection", "row");
+        _$setProp(_el$11, "height", 1);
+        _$setProp(_el$11, "flexShrink", 0);
+        _$setProp(_el$11, "onMouseDown", e => {
+          if (e.button === 0) {
+            e.stopPropagation?.();
+            props.onToggleRow?.(entry.row.id);
+          }
+        });
+        _$insertNode(_el$12, _el$13);
+        _$insertNode(_el$12, _el$14);
+        _$setProp(_el$12, "wrapMode", "none");
+        _$insert(_el$13, () => entry.row.depth > 0 ? "    " : "  ", null);
+        _$insert(_el$13, ERROR_PREFIX, null);
+        _$insert(_el$14, () => entry.row.content);
+        _$effect(_p$ => {
+          var _v$8 = `${rowId(entry.row.id)}-note`,
+            _v$9 = ErrorRowWidth({
+              error: entry.row.content,
+              depth: entry.row.depth
+            }),
+            _v$0 = {
+              fg: props.scrollbarColor
+            },
+            _v$1 = {
+              fg: entry.row.textColor
+            };
+          _v$8 !== _p$.e && (_p$.e = _$setProp(_el$11, "id", _v$8, _p$.e));
+          _v$9 !== _p$.t && (_p$.t = _$setProp(_el$11, "width", _v$9, _p$.t));
+          _v$0 !== _p$.a && (_p$.a = _$setProp(_el$13, "style", _v$0, _p$.a));
+          _v$1 !== _p$.o && (_p$.o = _$setProp(_el$14, "style", _v$1, _p$.o));
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined,
+          o: undefined
+        });
+        return _el$11;
+      })()
+    }));
+    _$effect(_p$ => {
+      var _v$ = Math.min(entries().length, TODO_PANEL_MAX_ROWS),
+        _v$2 = scrollbarOptions();
+      _v$ !== _p$.e && (_p$.e = _$setProp(_el$, "height", _v$, _p$.e));
+      _v$2 !== _p$.t && (_p$.t = _$setProp(_el$, "verticalScrollbarOptions", _v$2, _p$.t));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$;
+  })();
+}
+
+/** Small helper so each hover target does not repeat three lines. */
+function createHover() {
+  const [hovered, setHovered] = createSignal(false);
+  return {
+    hovered,
+    onMouseOver: () => setHovered(true),
+    onMouseOut: () => setHovered(false)
+  };
+}
+
+/**
+ * Watches the todos directory and calls `onChange` (debounced) when a file
+ * belonging to the current session changes. Cleans up with the owner scope.
+ */
+function watchSessionTodos(sessionID, onChange) {
+  let timer;
+  let watcher;
+  const hashed = createMemo(() => {
+    const sid = sessionID();
+    if (!sid) return "";
+    try {
+      return hashSessionID(sid);
+    } catch {
+      return "";
+    }
+  });
+  const notify = () => {
+    clearTimeout(timer);
+    timer = setTimeout(onChange, WATCH_DEBOUNCE_MS);
+  };
+  const belongsToSession = name => {
+    const sid = sessionID();
+    if (!sid) return true;
+    const hash = hashed();
+    return hash !== "" && name.startsWith(hash) || name.startsWith(sid) || name.startsWith(`todos-${sid}-`);
+  };
+  try {
+    const baseDir = getTodosDirectory();
+    mkdirSync(baseDir, {
+      recursive: true
+    });
+    watcher = watch(baseDir, {
+      recursive: true,
+      persistent: false
+    }, (_, filename) => {
+      if (!filename || belongsToSession(String(filename))) notify();
+    });
+  } catch (err) {
+    console.error("[todos] watcher initialization failed:", err);
+  }
+  onCleanup(() => {
+    clearTimeout(timer);
+    watcher?.close();
+  });
+}
+export function TodoProgress(props) {
+  const {
+    context
+  } = props;
+  const sessionID = () => props.sessionID ?? "";
+  const theme = () => context.theme;
+  const [refresh, setRefresh] = createSignal(0);
+  const [isCollapsed, setIsCollapsed] = createSignal(true);
+  const [isContinuePending, setIsContinuePending] = createSignal(false);
+  const [animFrame, setAnimFrame] = createSignal(0);
+  const [expandedIds, setExpandedIds] = createSignal([]);
+  const clearHover = createHover();
+  const continueHover = createHover();
+
+  // Image capability
+  const [imageSupported, setImageSupported] = createSignal(supportsImageRendering(context.renderer?.capabilities));
+  const onCapabilities = caps => setImageSupported(supportsImageRendering(caps));
+  context.renderer.on("capabilities", onCapabilities);
+  onCleanup(() => context.renderer.off("capabilities", onCapabilities));
+
+  // Running state
+  const readRunning = () => {
+    const sid = sessionID();
+    if (!sid) return false;
+    try {
+      return context.data.session.status(sid) === "running";
+    } catch {
+      return false;
+    }
+  };
+  const [isRunning, setIsRunning] = createSignal(readRunning());
+  createEffect(() => setIsRunning(readRunning()));
+  const unsubscribe = context.data.listen(({
+    details
+  }) => {
+    const sid = sessionID();
+    switch (details.type) {
+      case "session.execution.started":
+      case "session.execution.interrupted":
+      case "session.execution.succeeded":
+      case "session.execution.failed":
+      case "session.idle":
+        if (!sid || details.data.sessionID === sid) {
+          setIsRunning(details.type === "session.execution.started");
+          setIsContinuePending(false);
+        }
+        break;
+      case "session.status":
+        if (!sid || details.data.sessionID === sid) {
+          setIsRunning(details.data.status.type !== "idle");
+          setIsContinuePending(false);
+        }
+        break;
+    }
+  });
+  onCleanup(() => {
+    try {
+      unsubscribe();
+    } catch {}
+  });
+
+  // Todo data
+  watchSessionTodos(sessionID, () => setRefresh(v => v + 1));
+  const summary = createMemo(() => {
+    refresh();
+    const sid = sessionID();
+    if (!sid) return null;
+    try {
+      return getTodoDisplaySummary(readTodosSync(sid));
+    } catch {
+      return null;
+    }
+  });
+
+  // Spinner: one interval, only while something is actually running.
+  const hasInProgress = createMemo(() => summary()?.items.some(i => i.status === "in_progress") ?? false);
+  createEffect(() => {
+    if (!(hasInProgress() && isRunning())) return;
+    const id = setInterval(() => setAnimFrame(prev => (prev + 1) % SPINNER_FRAMES.length), SPINNER_INTERVAL_MS);
+    onCleanup(() => clearInterval(id));
+  });
+  const activeIcon = () => isRunning() ? SPINNER_FRAMES[animFrame()] : "-";
+  const itemIcon = (status, fallback) => status === "in_progress" ? activeIcon() : fallback;
+  const activeItem = createMemo(() => {
+    const items = summary()?.items;
+    if (!items) return null;
+    return items.find(i => i.status === "in_progress" && i.depth > 0) ?? items.find(i => i.status === "in_progress") ?? null;
+  });
+
+  // Colors
+  const getStatusColor = status => {
+    const t = theme();
+    switch (status) {
+      case "in_progress":
+        return isRunning() ? t.text.action?.primary?.base ?? t.text.feedback.info?.base ?? t.text.base : t.text.muted;
+      case "completed":
+        return t.text.feedback.success.base;
+      case "error":
+      case "cancelled":
+        return t.text.feedback.error.base;
+      default:
+        return t.text.muted;
+    }
+  };
+  const getTextColor = status => status === "completed" || status === "cancelled" || status === "error" ? theme().text.muted : theme().text.base;
+
+  /**
+   * Rows are built only while the panel is expanded and do NOT depend on the
+   * spinner frame, so the row objects stay stable between animation ticks.
+   */
+  const rows = createMemo(() => {
+    if (isCollapsed()) return [];
+    return (summary()?.items ?? []).map(item => ({
+      id: item.id,
+      content: item.content,
+      icon: item.icon,
+      iconColor: getStatusColor(item.status),
+      textColor: getTextColor(item.status),
+      depth: item.depth,
+      status: item.status
+    }));
+  });
+
+  // Actions
+  const toggleRowNote = id => setExpandedIds(current => current.includes(id) ? current.filter(entry => entry !== id) : [...current, id]);
+  const continueTodos = async () => {
+    if (isRunning() || isContinuePending()) return;
+    const sid = sessionID();
+    if (!sid) return;
+    setIsContinuePending(true);
+    try {
+      await context.client.session.prompt({
+        sessionID: sid,
+        text: ContinuePrompt(summary())
+      });
+    } catch (error) {
+      setIsContinuePending(false);
+      console.error("[todos] continue failed:", error);
+    }
+  };
+  const clearTodos = async () => {
+    const sid = sessionID();
+    if (!sid) return;
+    try {
+      await writeTodos(sid, []);
+      setRefresh(v => v + 1);
+    } catch (error) {
+      console.error("[todos] clear failed:", error);
+    }
+  };
+  const hoverColor = (hovered, active) => hovered ? active : theme().text.muted;
+  return _$createComponent(Show, {
+    get when() {
+      return summary();
+    },
+    children: data => (() => {
+      var _el$15 = _$createElement("box"),
+        _el$16 = _$createElement("box"),
+        _el$17 = _$createElement("box"),
+        _el$18 = _$createElement("box"),
+        _el$19 = _$createElement("box"),
+        _el$20 = _$createElement("text"),
+        _el$21 = _$createElement("span"),
+        _el$23 = _$createElement("span"),
+        _el$27 = _$createElement("box");
+      _$insertNode(_el$15, _el$16);
+      _$setProp(_el$15, "flexDirection", "column");
+      _$setProp(_el$15, "border", true);
+      _$setProp(_el$15, "borderStyle", "rounded");
+      _$setProp(_el$15, "paddingLeft", 1);
+      _$setProp(_el$15, "paddingRight", 1);
+      _$insertNode(_el$16, _el$17);
+      _$insertNode(_el$16, _el$27);
+      _$setProp(_el$16, "flexDirection", "row");
+      _$setProp(_el$16, "justifyContent", "space-between");
+      _$insertNode(_el$17, _el$18);
+      _$insertNode(_el$17, _el$19);
+      _$setProp(_el$17, "flexDirection", "row");
+      _$setProp(_el$17, "flexGrow", 1);
+      _$setProp(_el$17, "onMouseDown", e => {
+        if (e.button === 0) {
+          e.stopPropagation?.();
+          setIsCollapsed(v => !v);
+        }
+      });
+      _$setProp(_el$18, "flexDirection", "row");
+      _$setProp(_el$18, "width", 2);
+      _$setProp(_el$18, "height", 1);
+      _$setProp(_el$18, "marginRight", 1);
+      _$setProp(_el$18, "alignItems", "flex-start");
+      _$insert(_el$18, _$createComponent(SvgIcon, {
+        get source() {
+          return isCollapsed() ? arrowRightSvgIcon : arrowDownSvgIcon;
+        },
+        get color() {
+          return theme().text.muted;
+        },
+        get fallback() {
+          return isCollapsed() ? "▶" : "▼";
+        },
+        width: 2,
+        height: 1
+      }));
+      _$insertNode(_el$19, _el$20);
+      _$setProp(_el$19, "flexDirection", "row");
+      _$setProp(_el$19, "flexGrow", 1);
+      _$setProp(_el$19, "flexShrink", 1);
+      _$setProp(_el$19, "overflow", "hidden");
+      _$setProp(_el$19, "marginRight", 1);
+      _$insertNode(_el$20, _el$21);
+      _$insertNode(_el$20, _el$23);
+      _$setProp(_el$20, "wrapMode", "none");
+      _$insertNode(_el$21, _$createTextNode(`Todos `));
+      _$insert(_el$23, () => `(${data().completed}/${data().total})`);
+      _$insert(_el$20, _$createComponent(Show, {
+        get when() {
+          return _$memo(() => !!isCollapsed())() && activeItem();
+        },
+        children: active => [(() => {
+          var _el$29 = _$createElement("span");
+          _$insertNode(_el$29, _$createTextNode(`  `));
+          _$effect(_$p => _$setProp(_el$29, "style", {
+            fg: theme().text.muted
+          }, _$p));
+          return _el$29;
+        })(), (() => {
+          var _el$31 = _$createElement("span"),
+            _el$32 = _$createTextNode(` `);
+          _$insertNode(_el$31, _el$32);
+          _$insert(_el$31, () => itemIcon(active().status, active().icon), _el$32);
+          _$effect(_$p => _$setProp(_el$31, "style", {
+            fg: getStatusColor(active().status)
+          }, _$p));
+          return _el$31;
+        })(), (() => {
+          var _el$33 = _$createElement("span");
+          _$insert(_el$33, () => TodoTree.formatIdPrefix(active().id, active().depth), null);
+          _$insert(_el$33, () => active().content, null);
+          _$effect(_$p => _$setProp(_el$33, "style", {
+            fg: getTextColor(active().status)
+          }, _$p));
+          return _el$33;
+        })()]
+      }), null);
+      _$insert(_el$16, _$createComponent(Show, {
+        get when() {
+          return _$memo(() => !!(hasOpenTodos(data().items) && !isRunning()))() && !isContinuePending();
+        },
+        get children() {
+          var _el$24 = _$createElement("box"),
+            _el$25 = _$createElement("text");
+          _$insertNode(_el$24, _el$25);
+          _$setProp(_el$24, "flexDirection", "row");
+          _$setProp(_el$24, "gap", 1);
+          _$setProp(_el$24, "marginRight", 3);
+          _$setProp(_el$24, "onMouseDown", e => {
+            if (e.button === 0) {
+              e.stopPropagation();
+              void continueTodos();
+            }
+          });
+          _$insert(_el$24, _$createComponent(SvgIcon, {
+            source: continuePromptSvgIcon,
+            get color() {
+              return hoverColor(continueHover.hovered(), theme().text.action.primary.base);
+            },
+            fallback: "\u21BB",
+            width: 2,
+            height: 1
+          }), _el$25);
+          _$insertNode(_el$25, _$createTextNode(`Continue`));
+          _$setProp(_el$25, "wrapMode", "none");
+          _$effect(_p$ => {
+            var _v$10 = continueHover.onMouseOver,
+              _v$11 = continueHover.onMouseOut,
+              _v$12 = hoverColor(continueHover.hovered(), theme().text.action.primary.base);
+            _v$10 !== _p$.e && (_p$.e = _$setProp(_el$24, "onMouseOver", _v$10, _p$.e));
+            _v$11 !== _p$.t && (_p$.t = _$setProp(_el$24, "onMouseOut", _v$11, _p$.t));
+            _v$12 !== _p$.a && (_p$.a = _$setProp(_el$25, "fg", _v$12, _p$.a));
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined,
+            a: undefined
+          });
+          return _el$24;
+        }
+      }), _el$27);
+      _$setProp(_el$27, "flexDirection", "row");
+      _$setProp(_el$27, "onMouseDown", e => {
+        if (e.button === 0) {
+          e.stopPropagation();
+          void clearTodos();
+        }
+      });
+      _$insert(_el$27, _$createComponent(SvgIcon, {
+        get color() {
+          return hoverColor(clearHover.hovered(), theme().text.feedback.error.base);
+        },
+        source: removeSvgIcon,
+        fallback: "\u2716",
+        height: 1,
+        width: 2
+      }));
+      _$insert(_el$15, _$createComponent(Show, {
+        get when() {
+          return !isCollapsed();
+        },
+        get children() {
+          var _el$28 = _$createElement("box");
+          _$setProp(_el$28, "flexDirection", "column");
+          _$setProp(_el$28, "paddingTop", 1);
+          _$setProp(_el$28, "paddingLeft", 0.5);
+          _$insert(_el$28, _$createComponent(TodoList, {
+            get rows() {
+              return rows();
+            },
+            get expandedIds() {
+              return expandedIds();
+            },
+            activeIcon: activeIcon,
+            onToggleRow: toggleRowNote
+          }));
+          return _el$28;
+        }
+      }), null);
+      _$effect(_p$ => {
+        var _v$13 = theme().border.base,
+          _v$14 = imageSupported() ? 0 : 1,
+          _v$15 = {
+            fg: theme().text.base
+          },
+          _v$16 = {
+            fg: theme().text.muted
+          },
+          _v$17 = !imageSupported() ? 1.5 : 0,
+          _v$18 = clearHover.onMouseOver,
+          _v$19 = clearHover.onMouseOut;
+        _v$13 !== _p$.e && (_p$.e = _$setProp(_el$15, "borderColor", _v$13, _p$.e));
+        _v$14 !== _p$.t && (_p$.t = _$setProp(_el$18, "marginLeft", _v$14, _p$.t));
+        _v$15 !== _p$.a && (_p$.a = _$setProp(_el$21, "style", _v$15, _p$.a));
+        _v$16 !== _p$.o && (_p$.o = _$setProp(_el$23, "style", _v$16, _p$.o));
+        _v$17 !== _p$.i && (_p$.i = _$setProp(_el$27, "marginRight", _v$17, _p$.i));
+        _v$18 !== _p$.n && (_p$.n = _$setProp(_el$27, "onMouseOver", _v$18, _p$.n));
+        _v$19 !== _p$.s && (_p$.s = _$setProp(_el$27, "onMouseOut", _v$19, _p$.s));
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined,
+        a: undefined,
+        o: undefined,
+        i: undefined,
+        n: undefined,
+        s: undefined
+      });
+      return _el$15;
+    })()
+  });
+}