negotium 0.22.8 → 0.23.0

package/dist/main.js

@@ -6559,7 +6559,7 @@ var exports_version = {};
 __export(exports_version, {
   NEGOTIUM_VERSION: () => NEGOTIUM_VERSION
 });
-var NEGOTIUM_VERSION = "0.22.8";
+var NEGOTIUM_VERSION = "0.23.0";
 
 // ../../packages/core/src/agents/codex-native-multi-agent.ts
 import { spawn as spawn2 } from "child_process";
@@ -41929,7 +41929,10 @@ function createInitialState(userId) {
     decisionGraphOffset: { x: 0, y: 0 },
     decisionGraphSpacing: DEFAULT_DECISION_GRAPH_SPACING,
     askChoiceIndex: 0,
-    taskSidebarEnabled: true,
+    taskPanelScrollOffset: 0,
+    topicsPanelEnabled: true,
+    topicsPanelScrollOffset: 0,
+    topicsPanelSort: "activity",
     overlay: null,
     topicPickerRoot: false,
     vaultEntries: [],
@@ -41941,8 +41944,27 @@ function createInitialState(userId) {
     vaultRequestSubmitting: false
   };
 }
-function toggleTaskSidebar(state) {
-  return { ...state, taskSidebarEnabled: !state.taskSidebarEnabled };
+function toggleTopicsPanel(state) {
+  return { ...state, topicsPanelEnabled: !state.topicsPanelEnabled };
+}
+function cycleTopicsPanelSort(state) {
+  return { ...state, topicsPanelSort: state.topicsPanelSort === "activity" ? "name" : "activity" };
+}
+function scrollTopicsPanel(state, delta, maxOffset) {
+  const next = Math.min(maxOffset, Math.max(0, state.topicsPanelScrollOffset + delta));
+  return next === state.topicsPanelScrollOffset ? state : { ...state, topicsPanelScrollOffset: next };
+}
+function scrollTaskPanel(state, delta, maxOffset) {
+  const next = Math.min(maxOffset, Math.max(0, state.taskPanelScrollOffset + delta));
+  return next === state.taskPanelScrollOffset ? state : { ...state, taskPanelScrollOffset: next };
+}
+function setTopicsPanelScrollOffset(state, offset, maxOffset) {
+  const next = Math.min(maxOffset, Math.max(0, offset));
+  return next === state.topicsPanelScrollOffset ? state : { ...state, topicsPanelScrollOffset: next };
+}
+function setTaskPanelScrollOffset(state, offset, maxOffset) {
+  const next = Math.min(maxOffset, Math.max(0, offset));
+  return next === state.taskPanelScrollOffset ? state : { ...state, taskPanelScrollOffset: next };
 }
 function activeTopic(state) {
   return state.topics.find((topic) => topic.id === state.activeTopicId) ?? null;
@@ -41959,6 +41981,16 @@ function setTopicUsage(state, usage) {
 function activeQuestion(state) {
   return activeMessages(state).slice().reverse().find((message2) => message2.kind === "ask_user_question" && message2.askUserQuestion && !message2.askUserQuestion.expired && !message2.askUserQuestion.selectedLabel) ?? null;
 }
+function blockedQuestionText(state, topicId) {
+  const messages = state.messages[topicId] ?? [];
+  for (let index = messages.length - 1;index >= 0; index -= 1) {
+    const message2 = messages[index];
+    if (message2.kind === "ask_user_question" && message2.askUserQuestion && !message2.askUserQuestion.expired && !message2.askUserQuestion.selectedLabel) {
+      return message2.askUserQuestion.question;
+    }
+  }
+  return;
+}
 function activeVaultRequest(state) {
   return activeMessages(state).find((message2) => message2.kind === "vault_secret_request" && message2.vaultSecretRequest?.status === "pending") ?? null;
 }
@@ -42062,12 +42094,43 @@ function visibleTopicPickerIds(state) {
 function visibleBackgroundSessions(state) {
   return state.backgroundSessions.filter((session) => topicPickerQueryMatches(session.title, state.topicFilter));
 }
+function topicRank(state, topic) {
+  if (blockedQuestionText(state, topic.id) !== undefined)
+    return 0;
+  if (state.activity[topic.id]?.running)
+    return 1;
+  return 2;
+}
+function groupTopicsIntoUnits(entries) {
+  const units = [];
+  for (const entry of entries) {
+    const last = units.at(-1);
+    if (entry.topic.isSubagent && last)
+      last.push(entry);
+    else
+      units.push([entry]);
+  }
+  return units;
+}
+function sortedTopicEntries(state, entries) {
+  const units = groupTopicsIntoUnits(entries);
+  if (state.topicsPanelSort === "name") {
+    return units.slice().sort((a, b) => (a[0]?.topic.title ?? "").localeCompare(b[0]?.topic.title ?? "")).flat();
+  }
+  return units.map((unit, order) => ({
+    unit,
+    order,
+    rank: Math.min(...unit.map(({ topic }) => topicRank(state, topic)))
+  })).sort((a, b) => a.rank - b.rank || a.order - b.order).flatMap(({ unit }) => unit);
+}
 function topicPickerItems(state) {
   const visible = visibleTopicPickerIds(state);
   const indexedTopics = state.topics.map((topic, index) => ({ topic, index })).filter(({ topic }) => visible.has(topic.id));
+  const managerEntries = sortedTopicEntries(state, indexedTopics.filter(({ topic }) => topic.kind === "manager"));
+  const regularEntries = sortedTopicEntries(state, indexedTopics.filter(({ topic }) => topic.kind !== "manager"));
   return [
-    ...indexedTopics.filter(({ topic }) => topic.kind === "manager").map(({ topic, index }) => ({ kind: "topic", id: topic.id, index })),
-    ...indexedTopics.filter(({ topic }) => topic.kind !== "manager").map(({ topic, index }) => ({ kind: "topic", id: topic.id, index })),
+    ...managerEntries.map(({ topic, index }) => ({ kind: "topic", id: topic.id, index })),
+    ...regularEntries.map(({ topic, index }) => ({ kind: "topic", id: topic.id, index })),
     ...visibleBackgroundSessions(state).map((session) => ({
       kind: "background",
       id: session.id
@@ -42359,6 +42422,22 @@ function failedToolText(text3) {
   return [title, ...mapped].join(`
 `);
 }
+function appendToolOutput(text3, content) {
+  if (!content.trim())
+    return text3;
+  const [title = "Tool"] = text3.split(`
+`);
+  if (TOOL_OUTPUT_EXCLUDED_PREFIXES.some((prefix) => title.startsWith(prefix)))
+    return text3;
+  if (text3.includes(`
+`))
+    return text3;
+  const lines = content.replace(/\r\n?/g, `
+`).replace(/\n+$/, "").split(`
+`);
+  return [title, ...lines].join(`
+`);
+}
 function toolMessageId(status, toolUseId) {
   return `terminal-tool:${String(status.queryId ?? "query")}:${toolUseId}`;
 }
@@ -42458,14 +42537,17 @@ function applyAiStatus(state, topicId, raw, createdAt) {
       return state;
     const id = String(status.toolUseId ?? "");
     const failed = status.isError === true;
-    const tools = current3.tools.map((tool) => tool.id === id ? { ...tool, output: String(status.content ?? ""), status: failed ? "error" : "done" } : tool);
+    const content = String(status.content ?? "");
+    const tools = current3.tools.map((tool) => tool.id === id ? { ...tool, output: content, status: failed ? "error" : "done" } : tool);
     const withActivity = setActivity(state, topicId, { ...liveCurrent, tools });
     const messageId = toolMessageId(status, id);
     const existing = (withActivity.messages[topicId] ?? []).find((message2) => message2.id === messageId);
+    const withOutput = existing ? appendToolOutput(existing.text, content) : undefined;
+    const nextText = failed && (!existing || withOutput === existing.text) ? failedToolText(existing?.text ?? "") : withOutput;
     return patchMessage(withActivity, topicId, messageId, {
       editedAt: createdAt ?? new Date().toISOString(),
       toolResult: failed ? "error" : "ok",
-      ...failed && existing ? { text: failedToolText(existing.text) } : {}
+      ...nextText !== undefined ? { text: nextText } : {}
     });
   }
   if (kind === "tool_status") {
@@ -42498,11 +42580,18 @@ function applyRuntimeEvent(state, event) {
   }
   return state;
 }
-var NO_TOPIC_PICKER_SELECTION = -1;
+var NO_TOPIC_PICKER_SELECTION = -1, TOOL_OUTPUT_EXCLUDED_PREFIXES;
 var init_state2 = __esm(async () => {
   init_decision_graph();
   init_subagent_graph();
   await init_src();
+  TOOL_OUTPUT_EXCLUDED_PREFIXES = [
+    "Edit \xB7 ",
+    "Write \xB7 ",
+    "Delete \xB7 ",
+    "Ask session \xB7 ",
+    "Tell session \xB7 "
+  ];
 });
 
 // ../../adapters/terminal/src/context-usage.ts
@@ -43615,7 +43704,6 @@ function toolMessageLines(message2, width) {
 `);
   const failed = message2.toolResult === "error";
   const done = failed || Boolean(message2.editedAt);
-  const fileMutation = /^(?:Edit|Write|Delete) \u00B7 /.test(title);
   const wrapWidth = Math.max(4, width - 6);
   const marker = failed ? "!" : done ? "\u2713" : "\u25CF";
   const headerText = `  ${marker} ${title}`;
@@ -43631,14 +43719,8 @@ function toolMessageLines(message2, width) {
       { text: ")" }
     ] : [{ text: headerText, fg: headerColor }]
   });
-  if (!fileMutation) {
-    return [
-      header,
-      ...details.slice(0, 2).flatMap((detail) => wrapText(detail, wrapWidth).slice(0, 1).map((text3) => line(`    ${text3}`, { fg: toolDetailColor(detail), dim: !failed })))
-    ];
-  }
   const wrapped = details.flatMap((detail) => wrapText(detail, wrapWidth).map((text3) => ({ detail, text: text3 })));
-  const visible = wrapped.slice(0, FILE_PREVIEW_MAX_LINES);
+  const visible = wrapped.slice(0, TOOL_PREVIEW_MAX_LINES);
   const hidden = wrapped.length - visible.length;
   return [
     header,
@@ -43743,50 +43825,255 @@ function taskLines(state, width) {
   const visibleTasks = tasks3.slice(0, INLINE_TASK_LIMIT);
   const hidden = tasks3.length - visibleTasks.length;
   return [
-    line("  \u25EB Tasks \xB7 Ctrl-T sidebar", { fg: theme.amber, bold: true }),
+    line("  \u25EB Tasks \xB7 Ctrl-P sidebar", { fg: theme.amber, bold: true }),
     ...visibleTasks.flatMap((task) => wrapText(task.trimStart(), Math.max(4, width - 6)).map((text3) => line(`    ${text3}`, { fg: theme.muted }))),
     ...hidden > 0 ? [line(`    +${hidden} more`, { fg: theme.muted, dim: true })] : [],
     line("")
   ];
 }
 function terminalBodyLayout(state, width) {
-  const showTaskSidebar = width >= TASK_SIDEBAR_MIN_WIDTH && state.taskSidebarEnabled && !state.overlay && !state.creatingTopic && taskItems(state).length > 0;
+  const wideEnough = width >= SIDE_PANEL_MIN_WIDTH && state.topicsPanelEnabled && (!state.overlay || state.overlay === "background-session") && !state.creatingTopic;
+  const showTaskPanel = wideEnough && taskItems(state).length > 0;
+  const showTopicsPanel = wideEnough && (state.topics.length > 1 || visibleBackgroundSessions(state).length > 0);
+  const showSide = showTaskPanel || showTopicsPanel;
   return {
-    conversationWidth: showTaskSidebar ? width - TASK_SIDEBAR_WIDTH - TASK_SIDEBAR_GAP : width,
-    taskWidth: showTaskSidebar ? TASK_SIDEBAR_WIDTH : 0,
-    showTaskSidebar
-  };
+    conversationWidth: showSide ? width - SIDE_PANEL_WIDTH - SIDE_PANEL_GAP : width,
+    sideWidth: showSide ? SIDE_PANEL_WIDTH : 0,
+    showTaskPanel,
+    showTopicsPanel
+  };
+}
+function topicStatusIndicator(state, topic, animationFrame) {
+  const blockedText = blockedQuestionText(state, topic.id);
+  if (blockedText !== undefined)
+    return { icon: "?", fg: theme.amber, blockedText };
+  if (state.activity[topic.id]?.running) {
+    return { icon: workingFrame(animationFrame), fg: theme.green };
+  }
+  return { icon: "\u25CB", fg: theme.muted };
+}
+function topicPanelRowLines(state, topic, topicIndex, animationFrame) {
+  const selected = topic.id === state.activeTopicId;
+  const hovered = !selected && topic.id === state.sidePanelHoverTopicId;
+  const status = topicStatusIndicator(state, topic, animationFrame);
+  const childPrefix = subagentTreePrefix(topic, state.topics);
+  const bg2 = selected || hovered ? theme.selected : theme.canvas;
+  const header = line(` ${selected ? "\u203A" : " "} ${childPrefix}${status.icon} ${topic.title}`, {
+    fg: selected ? theme.text : status.fg,
+    bg: bg2,
+    bold: selected,
+    pickerTarget: { topicIndex }
+  });
+  if (status.blockedText === undefined)
+    return [header];
+  return [
+    header,
+    line(`   ${status.blockedText}`, {
+      fg: theme.amber,
+      bg: bg2,
+      pickerTarget: { topicIndex }
+    })
+  ];
+}
+function topicPanelGroupLines(state, label, entries, animationFrame) {
+  if (entries.length === 0)
+    return [];
+  return [
+    line(` ${label}`, { fg: theme.cyan, dim: true, bold: true, bg: theme.canvas }),
+    ...sortedTopicEntries(state, entries).flatMap(({ topic, topicIndex }) => topicPanelRowLines(state, topic, topicIndex, animationFrame))
+  ];
+}
+function topicsPanelRows(state, animationFrame) {
+  const indexed = state.topics.map((topic, topicIndex) => ({ topic, topicIndex }));
+  const managerEntries = indexed.filter(({ topic }) => topic.kind === "manager");
+  const regularEntries = indexed.filter(({ topic }) => topic.kind !== "manager");
+  const topicRows = [
+    ...topicPanelGroupLines(state, "manager", managerEntries, animationFrame),
+    ...topicPanelGroupLines(state, "topics", regularEntries, animationFrame)
+  ];
+  const sessionRows = ["cron", "memory", "compact"].flatMap((kind) => {
+    const matching = visibleBackgroundSessions(state).filter((session) => session.kind === kind);
+    if (matching.length === 0)
+      return [];
+    return [
+      line(` ${kind}`, { fg: theme.cyan, dim: true, bold: true, bg: theme.canvas }),
+      ...matching.map((session) => {
+        const hovered = session.id === state.sidePanelHoverBackgroundSessionId;
+        return line(` ${session.active ? workingFrame(animationFrame) : "\u25CB"} ${session.title}`, {
+          fg: hovered ? theme.text : session.active ? theme.green : theme.muted,
+          bg: hovered ? theme.selected : theme.canvas,
+          pickerTarget: { backgroundSessionId: session.id }
+        });
+      })
+    ];
+  });
+  return [...topicRows, ...sessionRows];
 }
-function taskSidebarLines(state, width, height) {
+function taskPanelRows(state, width) {
   const items = taskItems(state);
-  const groups = items.map((task) => {
+  return items.flatMap((task) => {
     const completed = /^\s*(?:\[x\]|\u2612|\u2713|\u2705)/i.test(task);
-    return wrapText(task.trimStart(), Math.max(4, width - 4)).map((text3) => line(` ${text3}`, {
+    return wrapText(task.trimStart(), Math.max(4, width - 2)).map((text3) => line(` ${text3}`, {
       fg: completed ? theme.muted : theme.text,
-      dim: completed
+      dim: completed,
+      bg: theme.canvas
     }));
   });
-  const capacity = Math.max(1, height);
-  const total = groups.reduce((sum, group) => sum + group.length, 0);
-  if (total <= capacity)
-    return groups.flat();
-  if (capacity === 1)
-    return groups[0]?.slice(0, 1) ?? [];
-  const rows = [];
-  let shown = 0;
-  for (const group of groups) {
-    if (rows.length + group.length > capacity - 1) {
-      if (shown === 0) {
-        rows.push(...group.slice(0, capacity - 1));
-        shown = 1;
-      }
-      break;
+}
+function panelHeaderHeight(sectionHeight) {
+  return Math.min(2, sectionHeight);
+}
+function panelContentHeight(sectionHeight) {
+  return Math.max(0, sectionHeight - panelHeaderHeight(sectionHeight));
+}
+function scrollbarThumb(totalRows, viewportRows, offset) {
+  if (viewportRows <= 0 || totalRows <= 0)
+    return { top: 0, len: 0 };
+  const len = Math.max(1, Math.min(viewportRows, Math.round(viewportRows * viewportRows / totalRows)));
+  const maxThumbTop = Math.max(0, viewportRows - len);
+  const maxOffset = Math.max(1, totalRows - viewportRows);
+  const top = maxThumbTop === 0 ? 0 : Math.round(Math.min(offset, maxOffset) * maxThumbTop / maxOffset);
+  return { top, len };
+}
+function scrollOffsetFromDragRow(totalRows, viewportRows, trackRow, grabRowOffset) {
+  if (viewportRows <= 0 || totalRows <= 0)
+    return 0;
+  const { len } = scrollbarThumb(totalRows, viewportRows, 0);
+  const maxThumbTop = Math.max(0, viewportRows - len);
+  if (maxThumbTop === 0)
+    return 0;
+  const clampedRow = Math.max(0, Math.min(trackRow, viewportRows - 1));
+  const desiredTop = Math.min(maxThumbTop, Math.max(0, clampedRow - grabRowOffset));
+  const maxOffset = Math.max(0, totalRows - viewportRows);
+  return Math.round(desiredTop * maxOffset / maxThumbTop);
+}
+function scrollbarCell(totalRows, viewportRows, offset, rowIndex, accent) {
+  const thumb = scrollbarThumb(totalRows, viewportRows, offset);
+  const isThumb = rowIndex >= thumb.top && rowIndex < thumb.top + thumb.len;
+  return paint(isThumb ? "\u2590" : "\u2595", { fg: isThumb ? accent : theme.muted, bg: theme.canvas });
+}
+function renderPanelSection(label, rows, width, height, scrollOffset, accent) {
+  if (height <= 0 || width <= 0)
+    return { lines: [], rowTargets: [] };
+  const headerHeight = panelHeaderHeight(height);
+  const contentHeight = panelContentHeight(height);
+  const overflow = rows.length > contentHeight;
+  const textWidth = overflow ? Math.max(1, width - 1) : width;
+  const clampedOffset = Math.max(0, Math.min(scrollOffset, Math.max(0, rows.length - contentHeight)));
+  const visible = rows.slice(clampedOffset, clampedOffset + contentHeight);
+  const lines = [];
+  if (headerHeight >= 1)
+    lines.push(paint("\u2500".repeat(width), { fg: theme.border, bg: theme.canvas }));
+  if (headerHeight >= 2) {
+    lines.push(paint(fit(` ${label}`, width), { fg: accent, bg: theme.canvas, bold: true }));
+  }
+  const rowTargets = [];
+  for (let index = 0;index < contentHeight; index += 1) {
+    const item = visible[index];
+    const text3 = paint(fit(item?.text ?? "", textWidth), {
+      fg: item?.fg ?? theme.text,
+      bg: item?.bg ?? theme.canvas,
+      bold: item?.bold,
+      dim: item?.dim
+    });
+    const scrollCell = overflow ? scrollbarCell(rows.length, contentHeight, clampedOffset, index, accent) : "";
+    lines.push(`${text3}${scrollCell}`);
+    if (item?.pickerTarget)
+      rowTargets.push({ y: headerHeight + index, pickerTarget: item.pickerTarget });
+  }
+  return {
+    lines,
+    rowTargets,
+    track: overflow ? { x: width - 1, viewportRows: contentHeight, rowCount: rows.length } : undefined
+  };
+}
+function sidePanelSectionHeights(layout, bodyHeight) {
+  if (layout.showTopicsPanel && layout.showTaskPanel) {
+    const topicsHeight = Math.max(3, Math.floor(bodyHeight / 2));
+    return { topicsHeight, taskHeight: Math.max(0, bodyHeight - topicsHeight) };
+  }
+  if (layout.showTopicsPanel)
+    return { topicsHeight: bodyHeight, taskHeight: 0 };
+  if (layout.showTaskPanel)
+    return { topicsHeight: 0, taskHeight: bodyHeight };
+  return { topicsHeight: 0, taskHeight: 0 };
+}
+function renderSideColumn(state, layout, bodyHeight, animationFrame) {
+  const { showTaskPanel, showTopicsPanel, sideWidth } = layout;
+  if (!showTaskPanel && !showTopicsPanel)
+    return { lines: [], targets: [], tracks: [] };
+  const { topicsHeight, taskHeight } = sidePanelSectionHeights(layout, bodyHeight);
+  const sections = [];
+  if (showTopicsPanel) {
+    sections.push({
+      panel: "topics",
+      label: state.topicsPanelSort === "activity" ? "ACTIVITY \xB7 name" : "activity \xB7 NAME",
+      rows: topicsPanelRows(state, animationFrame),
+      accent: theme.accent,
+      height: topicsHeight,
+      offset: 0,
+      scrollOffset: state.topicsPanelScrollOffset
+    });
+  }
+  if (showTaskPanel) {
+    sections.push({
+      panel: "tasks",
+      label: "tasks",
+      rows: taskPanelRows(state, sideWidth),
+      accent: theme.taskBorder,
+      height: taskHeight,
+      offset: showTopicsPanel ? topicsHeight : 0,
+      scrollOffset: state.taskPanelScrollOffset
+    });
+  }
+  const lines = [];
+  const targets = [];
+  const tracks = [];
+  for (const section of sections) {
+    const result = renderPanelSection(section.label, section.rows, sideWidth, section.height, section.scrollOffset, section.accent);
+    lines.push(...result.lines);
+    for (const target of result.rowTargets) {
+      targets.push({ y: section.offset + target.y, pickerTarget: target.pickerTarget });
+    }
+    if (result.track) {
+      tracks.push({
+        panel: section.panel,
+        x: result.track.x,
+        yStart: section.offset + panelHeaderHeight(section.height),
+        viewportRows: result.track.viewportRows,
+        rowCount: result.track.rowCount
+      });
     }
-    rows.push(...group);
-    shown += 1;
   }
-  rows.push(line(` +${items.length - shown} more`, { fg: theme.muted, dim: true }));
-  return rows;
+  while (lines.length < bodyHeight)
+    lines.push(paint(" ".repeat(sideWidth), { bg: theme.canvas }));
+  return { lines: lines.slice(0, bodyHeight), targets, tracks };
+}
+function maxTopicsPanelScrollOffset(state, columns, rows) {
+  const width = Math.max(1, columns);
+  const height = Math.max(14, rows);
+  if (state.overlay)
+    return 0;
+  const layout = terminalBodyLayout(state, width);
+  if (!layout.showTopicsPanel)
+    return 0;
+  const bodyHeight = Math.max(3, height - footerLines(state, width).length - decisionPane(state, width).length - vaultRequestPane(state, width).length - composerPane(state, layout.conversationWidth).lines.length);
+  const { topicsHeight } = sidePanelSectionHeights(layout, bodyHeight);
+  const viewport = panelContentHeight(topicsHeight);
+  return Math.max(0, topicsPanelRows(state, 0).length - viewport);
+}
+function maxTaskPanelScrollOffset(state, columns, rows) {
+  const width = Math.max(1, columns);
+  const height = Math.max(14, rows);
+  if (state.overlay)
+    return 0;
+  const layout = terminalBodyLayout(state, width);
+  if (!layout.showTaskPanel)
+    return 0;
+  const bodyHeight = Math.max(3, height - footerLines(state, width).length - decisionPane(state, width).length - vaultRequestPane(state, width).length - composerPane(state, layout.conversationWidth).lines.length);
+  const { taskHeight } = sidePanelSectionHeights(layout, bodyHeight);
+  const viewport = panelContentHeight(taskHeight);
+  return Math.max(0, taskPanelRows(state, layout.sideWidth).length - viewport);
 }
 function helpLines() {
   return [
@@ -43796,7 +44083,9 @@ function helpLines() {
     line("  \u2190 \u2192 move \xB7 Ctrl/Alt-\u2190 \u2192 move by word \xB7 \u2191 \u2193 history"),
     line("  Alt-Backspace delete word \xB7 Ctrl-U clear before cursor"),
     line("  Cmd-Backspace works when forwarded \xB7 Ctrl-W/K aliases"),
-    line("  Mouse wheel / PgUp/PgDn scroll \xB7 Ctrl-E load older \xB7 Ctrl-T tasks"),
+    line("  Mouse wheel / PgUp/PgDn scroll \xB7 Ctrl-E load older"),
+    line("  Ctrl-P topics + tasks panel \xB7 click/hover a row to switch \xB7 drag scrollbar"),
+    line("  Ctrl-R sort topics panel (activity / name)"),
     line("  Ctrl-O topics \xB7 Ctrl-G subagents \xB7 Ctrl-D decisions \xB7 Ctrl-X abort"),
     line("  In topics: type to filter \xB7 Ctrl-N new \xB7 Ctrl-D delete"),
     line("  Esc/Ctrl-C stop active turn \xB7 Ctrl-C twice when idle to quit"),
@@ -43948,8 +44237,8 @@ function topicOverlayCursor(state, width, bodyHeight) {
 function topicOverlayLines(state, width, height, animationFrame = 0) {
   const visibleIds = visibleTopicPickerIds(state);
   const indexedTopics = state.topics.map((topic, topicIndex) => ({ topic, topicIndex })).filter(({ topic }) => visibleIds.has(topic.id));
-  const managerTopics = indexedTopics.filter(({ topic }) => topic.kind === "manager");
-  const regularTopics = indexedTopics.filter(({ topic }) => topic.kind !== "manager");
+  const managerTopics = sortedTopicEntries(state, indexedTopics.filter(({ topic }) => topic.kind === "manager"));
+  const regularTopics = sortedTopicEntries(state, indexedTopics.filter(({ topic }) => topic.kind !== "manager"));
   const entries = [];
   for (const [label, topics] of [
     ["Manager", managerTopics],
@@ -43997,30 +44286,48 @@ function topicOverlayLines(state, width, height, animationFrame = 0) {
     query2.length > 0 ? line(`${TOPIC_FILTER_LABEL}${safeText(query2)}`, { fg: theme.cyan, bold: true }) : line(""),
     ...entries.length === 0 ? [
       line(query2.length > 0 ? `  No topics match \u201C${safeText(query2)}\u201D \xB7 Esc clears the filter` : "  No topics yet \xB7 Press Ctrl-N to create one", { fg: theme.muted })
-    ] : entries.slice(start, start + visibleCount).map((entry) => {
+    ] : entries.slice(start, start + visibleCount).flatMap((entry) => {
       if (entry.kind === "heading") {
-        return line(`  ${entry.label}`, { fg: theme.cyan, bold: true });
+        return [line(`  ${entry.label}`, { fg: theme.cyan, bold: true })];
       }
       if (entry.kind === "separator") {
-        return line(`  ${"\u2500".repeat(Math.max(1, width - 4))}`, { fg: theme.border });
+        return [line(`  ${"\u2500".repeat(Math.max(1, width - 4))}`, { fg: theme.border })];
       }
       if (entry.kind === "background") {
         const selected2 = entry.sessionId === state.topicPickerBackgroundId;
-        return line(`  ${selected2 ? "\u203A" : " "} ${entry.active ? workingFrame(animationFrame) : "\u25CB"} ${entry.label}  \xB7  ${entry.status}`, {
-          fg: selected2 ? theme.text : entry.active ? theme.green : theme.muted,
-          bg: selected2 ? theme.selected : theme.canvas,
-          bold: selected2
-        });
+        return [
+          line(`  ${selected2 ? "\u203A" : " "} ${entry.active ? workingFrame(animationFrame) : "\u25CB"} ${entry.label}  \xB7  ${entry.status}`, {
+            fg: selected2 ? theme.text : entry.active ? theme.green : theme.muted,
+            bg: selected2 ? theme.selected : theme.canvas,
+            bold: selected2,
+            pickerTarget: { backgroundSessionId: entry.sessionId }
+          })
+        ];
       }
       const { topic, topicIndex } = entry;
       const selected = topicIndex === state.topicPickerIndex;
-      const running = state.activity[topic.id]?.running;
+      const status = topicStatusIndicator(state, topic, animationFrame);
       const childPrefix = subagentTreePrefix(topic, state.topics);
-      return line(`  ${selected ? "\u203A" : " "} ${childPrefix}${running ? workingFrame(animationFrame) : "\u25CB"} ${topic.title}  \xB7  ${topic.agent ?? "no agent"}  \xB7  ${effectiveTopicModel(topic)}  \xB7  ${effectiveTopicEffort(topic)}`, {
-        fg: selected ? theme.text : running ? theme.green : theme.muted,
-        bg: selected ? theme.selected : theme.canvas,
-        bold: selected
+      const bg2 = selected ? theme.selected : theme.canvas;
+      const header = line(`  ${selected ? "\u203A" : " "} ${childPrefix}${status.icon} ${topic.title}  \xB7  ${topic.agent ?? "no agent"}  \xB7  ${effectiveTopicModel(topic)}  \xB7  ${effectiveTopicEffort(topic)}`, {
+        fg: selected ? theme.text : status.fg,
+        bg: bg2,
+        bold: selected,
+        pickerTarget: { topicIndex }
       });
+      const running = state.activity[topic.id]?.running;
+      const subtitle = status.blockedText ?? (running ? activityDetail(state.activity[topic.id]?.status) : undefined);
+      if (!subtitle)
+        return [header];
+      return [
+        header,
+        line(`      ${subtitle}`, {
+          fg: status.blockedText !== undefined ? theme.amber : theme.muted,
+          dim: status.blockedText === undefined,
+          bg: bg2,
+          pickerTarget: { topicIndex }
+        })
+      ];
     })
   ];
 }
@@ -44366,6 +44673,16 @@ function conversationViewport(lineCount, height, requestedOffset) {
     offset: Math.min(maxOffset, Math.max(0, requestedOffset))
   };
 }
+function popupPaneWidth(width) {
+  return Math.max(0, Math.min(POPUP_PANE_MAX_WIDTH, width - 4));
+}
+function centerPaneRows(rows, boxWidth, totalWidth) {
+  const left = Math.max(0, Math.floor((totalWidth - boxWidth) / 2));
+  const right = Math.max(0, totalWidth - boxWidth - left);
+  const leftPad = left > 0 ? paint(" ".repeat(left), { bg: theme.canvas }) : "";
+  const rightPad = right > 0 ? paint(" ".repeat(right), { bg: theme.canvas }) : "";
+  return rows.map((row) => `${leftPad}${row}${rightPad}`);
+}
 function decisionPane(state, width) {
   if (state.overlay)
     return [];
@@ -44376,6 +44693,7 @@ function decisionPane(state, width) {
   if (!ask || !question?.choices.length)
     return [];
   const selected = Math.min(state.askChoiceIndex, question.choices.length - 1);
+  const boxWidth = popupPaneWidth(width);
   const content = [
     line(`  ${question.question}`, { bold: true }),
     ...question.choices.map((choice, index) => line(`  ${index === selected ? "\u25CF" : "\u25CB"} ${choice.label}${choice.description ? ` \u2014 ${choice.description}` : ""}`, {
@@ -44384,7 +44702,8 @@ function decisionPane(state, width) {
       bold: index === selected
     }))
   ];
-  return framePane("decision required \xB7 \u2191\u2193 select \xB7 Enter confirm", content, width, Math.min(8, Math.max(4, content.length + 2)), { active: true, accent: theme.amber });
+  const rows = framePane("decision required \xB7 \u2191\u2193 select \xB7 Enter confirm", content, boxWidth, Math.min(8, Math.max(4, content.length + 2)), { active: true, accent: theme.amber });
+  return centerPaneRows(rows, boxWidth, width);
 }
 function vaultRequestPane(state, width) {
   if (state.overlay)
@@ -44393,15 +44712,17 @@ function vaultRequestPane(state, width) {
   if (!request)
     return [];
   const declining = state.vaultRequestMode === "confirm-decline";
+  const boxWidth = popupPaneWidth(width);
   const content = [
     line(`  ${request.key}`, { bold: true }),
-    ...request.description ? wrapText(request.description, Math.max(4, width - 6)).map((text3) => line(`  ${text3}`, { fg: theme.muted })) : [],
+    ...request.description ? wrapText(request.description, Math.max(4, boxWidth - 6)).map((text3) => line(`  ${text3}`, { fg: theme.muted })) : [],
     declining ? line("  Decline this request? y / n", { fg: theme.red, bold: true }) : line("  Enter save to Vault \xB7 Esc clear / decline \xB7 Alt-Enter newline", {
       fg: theme.subtle
     }),
     ...state.vaultRequestNotice ? [line(`  ! ${state.vaultRequestNotice}`, { fg: theme.amber })] : []
   ];
-  return framePane(`secret requested by ${state.aiName} \xB7 never shown to the agent${state.vaultRequestSubmitting ? ` \xB7 ${workingFrame(0)} saving` : ""}`, content, width, Math.min(8, Math.max(4, content.length + 2)), { active: true, accent: theme.accent });
+  const rows = framePane(`secret requested by ${state.aiName} \xB7 never shown to the agent${state.vaultRequestSubmitting ? ` \xB7 ${workingFrame(0)} saving` : ""}`, content, boxWidth, Math.min(8, Math.max(4, content.length + 2)), { active: true, accent: theme.accent });
+  return centerPaneRows(rows, boxWidth, width);
 }
 function wrapLineWithCursor(value, codePointColumn, width) {
   const chars = Array.from(safeText(value));
@@ -44475,6 +44796,20 @@ function inputVisualLines(state, width) {
   }
   return { lines: result, cursorLine, cursorColumn };
 }
+function shiftLines(lines, marginWidth) {
+  if (marginWidth <= 0)
+    return lines;
+  const margin = paint(" ".repeat(marginWidth), { bg: theme.canvas });
+  return lines.map((row) => `${margin}${row}`);
+}
+function shiftComposerPane(pane, marginWidth) {
+  if (marginWidth <= 0)
+    return pane;
+  return {
+    lines: shiftLines(pane.lines, marginWidth),
+    cursor: { x: pane.cursor.x + marginWidth, y: pane.cursor.y }
+  };
+}
 function composerPane(state, width) {
   const title = state.creatingTopic ? "new topic \xB7 type a name \xB7 Enter create" : state.overlay === "vault" ? state.vaultMode === "list" ? "Vault command \xB7 Enter run \xB7 Esc close" : `${state.vaultMode === "key" ? "key" : state.vaultMode === "value" ? "secret value" : "description"} \xB7 Enter continue \xB7 Esc cancel` : "Ctrl-O topics \xB7 Ctrl-G subagents \xB7 Ctrl-D decisions";
   const visual = inputVisualLines(state, width);
@@ -44718,30 +45053,62 @@ function renderApp(state, columns, rows, animationFrame = 0, nowMs = terminalNow
 function renderAppFrame(state, columns, rows, animationFrame = 0, nowMs = terminalNowMs()) {
   const width = Math.max(1, columns);
   const height = Math.max(14, rows);
-  const footer = footerLines(state, width);
-  const decision = [...decisionPane(state, width), ...vaultRequestPane(state, width)];
+  const layout = terminalBodyLayout(state, width);
+  const conversationXStart = layout.sideWidth > 0 ? layout.sideWidth + SIDE_PANEL_GAP + 1 : 1;
+  const footer = shiftLines(footerLines(state, layout.conversationWidth), conversationXStart - 1);
+  const decision = shiftLines([
+    ...decisionPane(state, layout.conversationWidth),
+    ...vaultRequestPane(state, layout.conversationWidth)
+  ], conversationXStart - 1);
   const hideComposer = state.overlay === "background-session" || state.overlay === "topics" || state.overlay === "subagents" || state.overlay === "decisions" || state.overlay === "vault" && state.vaultMode === "confirm-delete";
-  const composer = hideComposer ? { lines: [], cursor: null } : composerPane(state, width);
+  const composer = hideComposer ? { lines: [], cursor: null } : shiftComposerPane(composerPane(state, layout.conversationWidth), conversationXStart - 1);
   const bodyHeight = Math.max(3, height - footer.length - decision.length - composer.lines.length);
-  const layout = terminalBodyLayout(state, width);
-  const conversation = conversationLines(state, layout.conversationWidth, bodyHeight, animationFrame, nowMs, !layout.showTaskSidebar);
+  const conversation = conversationLines(state, layout.conversationWidth, bodyHeight, animationFrame, nowMs, !layout.showTaskPanel);
   const conversationBody = renderBody(conversation, layout.conversationWidth, bodyHeight);
-  const body = layout.showTaskSidebar ? (() => {
-    const taskPane = framePane("Tasks \xB7 Ctrl-T", taskSidebarLines(state, layout.taskWidth, Math.max(0, bodyHeight - 2)), layout.taskWidth, bodyHeight, { active: true, accent: theme.taskBorder });
-    if (taskPane.length === 0)
-      return renderBody(conversation, width, bodyHeight);
-    const gap = paint(" ".repeat(TASK_SIDEBAR_GAP), { bg: theme.canvas });
-    return conversationBody.map((row, index) => `${row}${gap}${taskPane[index] ?? ""}`);
+  const sideColumn = layout.showTaskPanel || layout.showTopicsPanel ? renderSideColumn(state, layout, bodyHeight, animationFrame) : null;
+  const body = sideColumn?.lines.length ? (() => {
+    const gap = paint(" ".repeat(SIDE_PANEL_GAP), { bg: theme.canvas });
+    return sideColumn.lines.map((row, index) => `${row}${gap}${conversationBody[index] ?? ""}`);
   })() : conversationBody;
   const codeCopyTargets = conversation.flatMap((item, index) => {
     if (item.codeCopy === undefined || index >= bodyHeight)
       return [];
     const trimmed = item.text.trimEnd();
     const leading = trimmed.length - trimmed.trimStart().length;
-    const xStart = displayWidth(trimmed.slice(0, leading)) + 1;
-    const xEnd = Math.min(displayWidth(trimmed), layout.conversationWidth);
+    const xStart = conversationXStart + displayWidth(trimmed.slice(0, leading));
+    const xEnd = Math.min(conversationXStart - 1 + displayWidth(trimmed), width);
     return xEnd >= xStart ? [{ xStart, xEnd, y: index + 1, text: item.codeCopy }] : [];
   });
+  const overlayTargets = conversation.flatMap((item, index) => {
+    if (!item.pickerTarget || index >= bodyHeight)
+      return [];
+    return [{ xStart: 1, xEnd: layout.conversationWidth, y: index + 1, ...item.pickerTarget }];
+  });
+  const sidePanelTargets = (sideColumn?.targets ?? []).map((target) => ({
+    xStart: 1,
+    xEnd: layout.sideWidth,
+    y: target.y + 1,
+    ...target.pickerTarget
+  }));
+  const topicPickerTargets = [...overlayTargets, ...sidePanelTargets];
+  const sidePanelTracks = (sideColumn?.tracks ?? []).map((track) => ({
+    ...track,
+    x: 1 + track.x,
+    yStart: track.yStart + 1
+  }));
+  const sideColumnBounds = sideColumn ? (() => {
+    const { topicsHeight, taskHeight } = sidePanelSectionHeights(layout, bodyHeight);
+    const sections = [];
+    let offset = 0;
+    if (layout.showTopicsPanel) {
+      sections.push({ panel: "topics", yStart: offset + 1, yEnd: offset + topicsHeight });
+      offset += topicsHeight;
+    }
+    if (layout.showTaskPanel) {
+      sections.push({ panel: "tasks", yStart: offset + 1, yEnd: offset + taskHeight });
+    }
+    return { xStart: 1, xEnd: layout.sideWidth, sections };
+  })() : null;
   const cursorY = composer.cursor ? body.length + decision.length + composer.cursor.y : Number.POSITIVE_INFINITY;
   const overlayCursor = topicOverlayCursor(state, layout.conversationWidth, body.length);
   const cursor = composer.cursor && cursorY <= height ? { x: Math.min(composer.cursor.x, width), y: cursorY } : overlayCursor && overlayCursor.y <= height ? overlayCursor : null;
@@ -44749,7 +45116,10 @@ function renderAppFrame(state, columns, rows, animationFrame = 0, nowMs = termin
     frame: linkifyUrls([...body, ...decision, ...composer.lines, ...footer].slice(0, height).join(`
 `)),
     cursor,
-    codeCopyTargets
+    codeCopyTargets,
+    topicPickerTargets,
+    sidePanelTracks,
+    sideColumnBounds
   };
 }
 function maxConversationScrollOffset(state, columns, rows) {
@@ -44761,9 +45131,9 @@ function maxConversationScrollOffset(state, columns, rows) {
   }
   if (state.overlay)
     return 0;
-  const bodyHeight = Math.max(3, height - footerLines(state, width).length - decisionPane(state, width).length - vaultRequestPane(state, width).length - composerPane(state, width).lines.length);
   const layout = terminalBodyLayout(state, width);
-  const lineCount = conversationContentLines(state, layout.conversationWidth, 0, terminalNowMs(), !layout.showTaskSidebar).length;
+  const bodyHeight = Math.max(3, height - footerLines(state, width).length - decisionPane(state, width).length - vaultRequestPane(state, width).length - composerPane(state, layout.conversationWidth).lines.length);
+  const lineCount = conversationContentLines(state, layout.conversationWidth, 0, terminalNowMs(), !layout.showTaskPanel).length;
   return conversationViewport(lineCount, bodyHeight, state.scrollOffset).maxOffset;
 }
 function preserveConversationScrollAnchor(previous, next, columns, rows) {
@@ -44801,7 +45171,7 @@ var theme, WORKING_FRAMES, CODE_COPY_MARKER = "\u29C9", WORKING_FRAME_INTERVAL_M
     default:
       return `${ESC}48;2;${rgb[0]};${rgb[1]};${rgb[2]}m`;
   }
-}, BARE_URL_PATTERN, URL_TRAILING_PUNCTUATION, RENDERED_TAB_WIDTH = 4, CIRCLED_DIGIT_START = 9312, CIRCLED_DIGIT_END = 9331, CIRCLED_ZERO = 9450, isWrapSpace = (character) => character === " " || character === "\t", isWideBreak = (character) => runeWidth(character) === 2, NO_ROW_START, NO_ROW_END, WRAP_MIN_WIDTH = 2, FRAME_MIN_INNER_WIDTH = 4, FRAME_TITLE_MIN_INNER_WIDTH = 8, TABLE_MAX_WIDTH_FRACTION = 0.92, TABLE_MIN_COL_WIDTH = 4, FILE_PREVIEW_MAX_LINES = 12, messageLayoutCache, INLINE_TASK_LIMIT = 5, TASK_SIDEBAR_MIN_WIDTH = 110, TASK_SIDEBAR_WIDTH = 36, TASK_SIDEBAR_GAP = 1, TOPIC_FILTER_ROW_INDEX = 2, TOPIC_FILTER_LABEL = "  Filter: ", COMPOSER_GUTTER = 4, COMPOSER_RIGHT_MARGIN = 1, COMPOSER_MIN_CONTENT_WIDTH = 4, NOTICE_STYLE;
+}, BARE_URL_PATTERN, URL_TRAILING_PUNCTUATION, RENDERED_TAB_WIDTH = 4, CIRCLED_DIGIT_START = 9312, CIRCLED_DIGIT_END = 9331, CIRCLED_ZERO = 9450, isWrapSpace = (character) => character === " " || character === "\t", isWideBreak = (character) => runeWidth(character) === 2, NO_ROW_START, NO_ROW_END, WRAP_MIN_WIDTH = 2, FRAME_MIN_INNER_WIDTH = 4, FRAME_TITLE_MIN_INNER_WIDTH = 8, TABLE_MAX_WIDTH_FRACTION = 0.92, TABLE_MIN_COL_WIDTH = 4, TOOL_PREVIEW_MAX_LINES = 12, messageLayoutCache, INLINE_TASK_LIMIT = 5, SIDE_PANEL_MIN_WIDTH = 110, SIDE_PANEL_WIDTH = 36, SIDE_PANEL_GAP = 1, TOPIC_FILTER_ROW_INDEX = 2, TOPIC_FILTER_LABEL = "  Filter: ", POPUP_PANE_MAX_WIDTH = 72, COMPOSER_GUTTER = 4, COMPOSER_RIGHT_MARGIN = 1, COMPOSER_MIN_CONTENT_WIDTH = 4, NOTICE_STYLE;
 var init_render = __esm(async () => {
   init_color_depth();
   init_commands();
@@ -45059,6 +45429,7 @@ function consumeMouseInput(raw) {
   let scrollDelta = 0;
   let horizontalScrollDelta = 0;
   const events = [];
+  const wheelEvents = [];
   const input = raw.replace(SGR_MOUSE_PATTERN, (_sequence, rawButton, rawX, rawY, suffix) => {
     const button = Number.parseInt(rawButton, 10);
     if (Number.isFinite(button) && (button & 64) !== 0) {
@@ -45068,6 +45439,10 @@ function consumeMouseInput(raw) {
         horizontalScrollDelta += delta;
       else
         scrollDelta += delta;
+      const x = Number.parseInt(rawX, 10);
+      const y = Number.parseInt(rawY, 10);
+      if (Number.isFinite(x) && Number.isFinite(y))
+        wheelEvents.push({ x, y, delta, horizontal });
     } else {
       const x = Number.parseInt(rawX, 10);
       const y = Number.parseInt(rawY, 10);
@@ -45082,11 +45457,14 @@ function consumeMouseInput(raw) {
     }
     return "";
   });
-  return { input, scrollDelta, horizontalScrollDelta, events };
+  return { input, scrollDelta, horizontalScrollDelta, events, wheelEvents };
 }
 function codeCopyTargetAt(targets, point) {
   return targets.find((target) => target.y === point.y && point.x >= target.xStart && point.x <= target.xEnd);
 }
+function topicPickerTargetAt(targets, point) {
+  return targets.find((target) => target.y === point.y && point.x >= target.xStart && point.x <= target.xEnd);
+}
 function escapeStopsActiveTurn(state) {
   if (state.overlay || state.creatingTopic)
     return false;
@@ -46816,9 +47194,9 @@ function altScreenSequences(env = process.env, savedDepth) {
   const setBackground = colored ? "\x1B]11;#0a0b0f\x07" : "";
   const fillCanvas = canvasFill(depth2);
   const resetBackground = colored ? "\x1B]111\x07" : "";
-  const modeResets = "\x1B[0m\x1B[?7h\x1B[?1l\x1B[?1006l\x1B[?1002l\x1B[?2004l\x1B[?25h\x1B[?1049l";
+  const modeResets = "\x1B[0m\x1B[?7h\x1B[?1l\x1B[?1006l\x1B[?1003l\x1B[?2004l\x1B[?25h\x1B[?1049l";
   return {
-    enter: `${setBackground}\x1B[?1049h${fillCanvas}\x1B[2J\x1B[H\x1B[?25l\x1B[?2004h\x1B[?1002h\x1B[?1006h\x1B[?1l${push}`,
+    enter: `${setBackground}\x1B[?1049h${fillCanvas}\x1B[2J\x1B[H\x1B[?25l\x1B[?2004h\x1B[?1003h\x1B[?1006h\x1B[?1l${push}`,
     exit: `${END_SYNCHRONIZED_UPDATE}${pop}${modeResets}${resetBackground}`,
     abortEnter: `${END_SYNCHRONIZED_UPDATE}${modeResets}`
   };
@@ -46861,6 +47239,10 @@ class TerminalApp {
   #subagentGraphDragPoint = null;
   #plainFrameLines = [];
   #codeCopyTargets = [];
+  #topicPickerTargets = [];
+  #sidePanelTracks = [];
+  #sideColumnBounds = null;
+  #sidePanelDrag = null;
   #lastInterruptAt = 0;
   #subagentGraphGeneration = 0;
   #subagentGraphAbortController = null;
@@ -47236,6 +47618,9 @@ class TerminalApp {
     const rows = process.stdout.rows ?? 30;
     const rendered = renderAppFrame(this.#state, columns, rows, this.#animationFrame);
     this.#codeCopyTargets = rendered.codeCopyTargets;
+    this.#topicPickerTargets = rendered.topicPickerTargets;
+    this.#sidePanelTracks = rendered.sidePanelTracks;
+    this.#sideColumnBounds = rendered.sideColumnBounds;
     const baseFrame = rendered.frame;
     this.#plainFrameLines = stripAnsi(baseFrame).split(`
 `);
@@ -47623,19 +48008,25 @@ class TerminalApp {
   }
   #handleKeySegment(segment) {
     const mouse = consumeMouseInput(segment);
-    if (mouse.horizontalScrollDelta !== 0 && (this.#state.overlay === "subagents" || this.#state.overlay === "decisions")) {
+    const { scrollDelta, horizontalScrollDelta } = this.#routeWheelEvents(mouse.wheelEvents);
+    if (horizontalScrollDelta !== 0 && (this.#state.overlay === "subagents" || this.#state.overlay === "decisions")) {
       this.#selection = null;
-      this.#panActiveGraph(-mouse.horizontalScrollDelta, 0);
+      this.#panActiveGraph(-horizontalScrollDelta, 0);
     }
-    if (mouse.scrollDelta !== 0) {
+    if (scrollDelta !== 0) {
       this.#selection = null;
-      this.#scroll(mouse.scrollDelta);
+      this.#scroll(scrollDelta);
     }
     for (const event of mouse.events) {
       if (this.#state.overlay === "subagents" || this.#state.overlay === "decisions") {
         this.#handleGraphMouse(event);
-      } else
-        this.#handleMouseSelection(event);
+        continue;
+      }
+      if (this.#handleSidePanelScrollbarDrag(event))
+        continue;
+      if (this.#handlePickableRowMouse(event))
+        continue;
+      this.#handleMouseSelection(event);
     }
     const chunk = normalizeKeySequences(mouse.input);
     if (!chunk)
@@ -47674,10 +48065,17 @@ class TerminalApp {
       this.#toggleDecisionGraph();
       return;
     }
-    if (chunk === "\x14") {
+    if (chunk === "\x10") {
       if (editingVaultSecret)
         return;
-      this.#state = toggleTaskSidebar(this.#state);
+      this.#state = toggleTopicsPanel(this.#state);
+      this.#queueRender();
+      return;
+    }
+    if (chunk === "\x12") {
+      if (editingVaultSecret)
+        return;
+      this.#state = cycleTopicsPanelSort(this.#state);
       this.#queueRender();
       return;
     }
@@ -48815,6 +49213,140 @@ class TerminalApp {
     }
     this.#queueRender();
   }
+  #routeWheelEvents(events) {
+    let scrollDelta = 0;
+    let horizontalScrollDelta = 0;
+    if (events.length === 0)
+      return { scrollDelta, horizontalScrollDelta };
+    const bounds = this.#sideColumnBounds;
+    let touchedPanel = false;
+    for (const event of events) {
+      const section = bounds && event.x >= bounds.xStart && event.x <= bounds.xEnd ? bounds.sections.find((s) => event.y >= s.yStart && event.y <= s.yEnd) : undefined;
+      if (!section) {
+        if (event.horizontal)
+          horizontalScrollDelta += event.delta;
+        else
+          scrollDelta += event.delta;
+        continue;
+      }
+      touchedPanel = true;
+      const columns = process.stdout.columns ?? 100;
+      const rows = process.stdout.rows ?? 30;
+      this.#state = section.panel === "topics" ? scrollTopicsPanel(this.#state, -event.delta, maxTopicsPanelScrollOffset(this.#state, columns, rows)) : scrollTaskPanel(this.#state, -event.delta, maxTaskPanelScrollOffset(this.#state, columns, rows));
+    }
+    if (touchedPanel)
+      this.#queueRender();
+    return { scrollDelta, horizontalScrollDelta };
+  }
+  #handleSidePanelScrollbarDrag(event) {
+    if (event.kind === "press" && (event.button & 3) === 0) {
+      const track2 = this.#sidePanelTracks.find((t) => event.x === t.x && event.y >= t.yStart && event.y < t.yStart + t.viewportRows);
+      if (!track2)
+        return false;
+      const current3 = track2.panel === "topics" ? this.#state.topicsPanelScrollOffset : this.#state.taskPanelScrollOffset;
+      const thumb = scrollbarThumb(track2.rowCount, track2.viewportRows, current3);
+      this.#sidePanelDrag = {
+        panel: track2.panel,
+        track: track2,
+        grabRowOffset: event.y - (track2.yStart + thumb.top)
+      };
+      return true;
+    }
+    const drag = this.#sidePanelDrag;
+    if (!drag)
+      return false;
+    if (event.kind === "release") {
+      this.#sidePanelDrag = null;
+      return true;
+    }
+    const { track, grabRowOffset, panel } = drag;
+    const offset = scrollOffsetFromDragRow(track.rowCount, track.viewportRows, event.y - track.yStart, grabRowOffset);
+    const columns = process.stdout.columns ?? 100;
+    const rows = process.stdout.rows ?? 30;
+    this.#state = panel === "topics" ? setTopicsPanelScrollOffset(this.#state, offset, maxTopicsPanelScrollOffset(this.#state, columns, rows)) : setTaskPanelScrollOffset(this.#state, offset, maxTaskPanelScrollOffset(this.#state, columns, rows));
+    this.#queueRender();
+    return true;
+  }
+  #handlePickableRowMouse(event) {
+    const inOverlay = this.#state.overlay === "topics";
+    const hovering = event.kind === "drag" && (event.button & 3) === 3;
+    const isClick = event.kind === "press" && (event.button & 3) === 0;
+    if (!inOverlay && !hovering && !isClick)
+      return false;
+    const target = topicPickerTargetAt(this.#topicPickerTargets, { x: event.x, y: event.y });
+    if (inOverlay) {
+      if (!target)
+        return true;
+      const highlighted = this.#highlightPickedTarget(target);
+      if (!hovering && highlighted)
+        this.#selectPickedTopic();
+      return true;
+    }
+    if (target?.backgroundSessionId !== undefined) {
+      const sessionId = target.backgroundSessionId;
+      if (hovering) {
+        this.#setSidePanelHover(undefined, sessionId);
+        return true;
+      }
+      this.#setSidePanelHover(undefined, undefined);
+      this.#state = {
+        ...this.#state,
+        overlay: "background-session",
+        topicPickerBackgroundId: sessionId,
+        backgroundScrollOffset: 0,
+        notice: undefined,
+        noticeLevel: undefined
+      };
+      this.#queueRender();
+      return true;
+    }
+    if (target?.topicIndex === undefined) {
+      this.#setSidePanelHover(undefined, undefined);
+      return false;
+    }
+    const topic = this.#state.topics[target.topicIndex];
+    if (!topic)
+      return false;
+    if (hovering) {
+      this.#setSidePanelHover(topic.id, undefined);
+      return true;
+    }
+    this.#setSidePanelHover(undefined, undefined);
+    if (topic.id !== this.#state.activeTopicId)
+      this.#activateTopic(topic.id);
+    return true;
+  }
+  #setSidePanelHover(topicId, backgroundSessionId) {
+    if (this.#state.sidePanelHoverTopicId === topicId && this.#state.sidePanelHoverBackgroundSessionId === backgroundSessionId) {
+      return;
+    }
+    this.#state = {
+      ...this.#state,
+      sidePanelHoverTopicId: topicId,
+      sidePanelHoverBackgroundSessionId: backgroundSessionId
+    };
+    this.#queueRender();
+  }
+  #highlightPickedTarget(target) {
+    if (target.backgroundSessionId !== undefined) {
+      if (this.#state.topicPickerBackgroundId === target.backgroundSessionId)
+        return true;
+      this.#state = { ...this.#state, topicPickerBackgroundId: target.backgroundSessionId };
+    } else if (target.topicIndex !== undefined) {
+      if (!this.#state.topicPickerBackgroundId && this.#state.topicPickerIndex === target.topicIndex) {
+        return true;
+      }
+      this.#state = {
+        ...this.#state,
+        topicPickerIndex: target.topicIndex,
+        topicPickerBackgroundId: undefined
+      };
+    } else {
+      return false;
+    }
+    this.#queueRender();
+    return true;
+  }
   #handleMouseSelection(event) {
     if ((event.button & 3) !== 0 && event.kind !== "release")
       return;
@@ -59178,4 +59710,4 @@ switch (command) {
   }
 }
 
-//# debugId=CF7D25563A652B9264756E2164756E21
+//# debugId=A04216FF3BF92ED864756E2164756E21