agenttop 0.8.2 → 0.9.0

package/dist/index.js

@@ -17,7 +17,7 @@ import {
   setNickname,
   startMcpServer,
   unarchiveSession
-} from "./chunk-MQFICHZ4.js";
+} from "./chunk-2GBTSKHW.js";
 
 // src/index.tsx
 import { readFileSync as readFileSync4 } from "fs";
@@ -27,7 +27,7 @@ import React16 from "react";
 import { render } from "ink";
 
 // src/ui/App.tsx
-import { useState as useState13, useEffect as useEffect9, useCallback as useCallback4 } from "react";
+import { useState as useState15, useEffect as useEffect9, useCallback as useCallback6 } from "react";
 import { Box as Box15, Text as Text14, useApp, useStdout as useStdout3 } from "ink";
 
 // src/config/themes.ts
@@ -347,132 +347,16 @@ var deriveSeverityColors = (c) => ({
   critical: c.critical
 });
 
-// src/hooks/installer.ts
-import { existsSync, readFileSync, writeFileSync, copyFileSync, mkdirSync, chmodSync } from "fs";
-import { join, dirname } from "path";
-import { homedir } from "os";
-import { fileURLToPath } from "url";
-var HOOK_FILENAME = "agenttop-guard.py";
-var SETTINGS_PATH = join(homedir(), ".claude", "settings.json");
-var getHookSource = () => {
-  const thisFile = fileURLToPath(import.meta.url);
-  const srcHooksDir = join(dirname(thisFile), "..", "src", "hooks");
-  const distHooksDir = join(dirname(thisFile), "hooks");
-  for (const dir of [distHooksDir, srcHooksDir]) {
-    const path = join(dir, HOOK_FILENAME);
-    if (existsSync(path)) return path;
-  }
-  const npmGlobalPath = join(dirname(thisFile), "..", "hooks", HOOK_FILENAME);
-  if (existsSync(npmGlobalPath)) return npmGlobalPath;
-  throw new Error(`cannot find ${HOOK_FILENAME} \u2014 is agenttop installed correctly?`);
-};
-var getHookTarget = () => {
-  const claudeHooksDir = join(homedir(), ".claude", "hooks");
-  mkdirSync(claudeHooksDir, { recursive: true });
-  return join(claudeHooksDir, HOOK_FILENAME);
-};
-var readSettings = () => {
-  if (!existsSync(SETTINGS_PATH)) {
-    return {};
-  }
-  try {
-    return JSON.parse(readFileSync(SETTINGS_PATH, "utf-8"));
-  } catch {
-    return {};
-  }
-};
-var writeSettings = (settings) => {
-  mkdirSync(dirname(SETTINGS_PATH), { recursive: true });
-  writeFileSync(SETTINGS_PATH, JSON.stringify(settings, null, 2) + "\n");
-};
-var installHooks = () => {
-  const source = getHookSource();
-  const target = getHookTarget();
-  copyFileSync(source, target);
-  chmodSync(target, 493);
-  const settings = readSettings();
-  const hooks = settings.hooks ?? {};
-  const postToolUse = hooks.PostToolUse ?? [];
-  const hookCommand = target;
-  const allToolsMatcher = postToolUse.find(
-    (entry) => entry.matcher === "Bash|Read|Grep|Glob|WebFetch|WebSearch"
-  );
-  if (allToolsMatcher) {
-    const alreadyInstalled = allToolsMatcher.hooks.some((h) => h.command.includes("agenttop-guard"));
-    if (alreadyInstalled) {
-      process.stdout.write("agenttop hooks already installed\n");
-      return;
-    }
-    allToolsMatcher.hooks.push({ type: "command", command: hookCommand });
-  } else {
-    postToolUse.push({
-      matcher: "Bash|Read|Grep|Glob|WebFetch|WebSearch",
-      hooks: [{ type: "command", command: hookCommand }]
-    });
-  }
-  hooks.PostToolUse = postToolUse;
-  settings.hooks = hooks;
-  writeSettings(settings);
-  process.stdout.write(`agenttop hooks installed:
-`);
-  process.stdout.write(`  hook: ${target}
-`);
-  process.stdout.write(`  settings: ${SETTINGS_PATH}
-`);
-  process.stdout.write(`  matcher: PostToolUse (Bash|Read|Grep|Glob|WebFetch|WebSearch)
-`);
-};
-var uninstallHooks = () => {
-  const settings = readSettings();
-  const hooks = settings.hooks ?? {};
-  const postToolUse = hooks.PostToolUse ?? [];
-  let removed = false;
-  for (const entry of postToolUse) {
-    const before = entry.hooks.length;
-    entry.hooks = entry.hooks.filter((h) => !h.command.includes("agenttop-guard"));
-    if (entry.hooks.length < before) removed = true;
-  }
-  hooks.PostToolUse = postToolUse.filter((e) => e.hooks.length > 0);
-  settings.hooks = hooks;
-  writeSettings(settings);
-  if (removed) {
-    process.stdout.write("agenttop hooks removed from Claude Code settings\n");
-  } else {
-    process.stdout.write("agenttop hooks were not installed\n");
-  }
-};
-
-// src/install-mcp.ts
-import { readFileSync as readFileSync2, writeFileSync as writeFileSync2, mkdirSync as mkdirSync2 } from "fs";
-import { join as join2 } from "path";
-import { homedir as homedir2 } from "os";
-var installMcpConfig = () => {
-  const settingsPath = join2(homedir2(), ".claude", "settings.json");
-  let settings = {};
-  try {
-    settings = JSON.parse(readFileSync2(settingsPath, "utf-8"));
-  } catch {
-  }
-  const mcpServers = settings.mcpServers ?? {};
-  mcpServers.agenttop = { command: "agenttop", args: ["--mcp"] };
-  settings.mcpServers = mcpServers;
-  mkdirSync2(join2(homedir2(), ".claude"), { recursive: true });
-  writeFileSync2(settingsPath, JSON.stringify(settings, null, 2) + "\n");
-  process.stdout.write("agenttop MCP server registered in Claude Code settings\n");
-  process.stdout.write(`  settings: ${settingsPath}
-`);
-};
-
 // src/updates.ts
 import { execSync, exec } from "child_process";
-import { readFileSync as readFileSync3 } from "fs";
-import { join as join3, dirname as dirname2 } from "path";
-import { fileURLToPath as fileURLToPath2 } from "url";
+import { readFileSync } from "fs";
+import { join, dirname } from "path";
+import { fileURLToPath } from "url";
 var getPackageVersion = () => {
   try {
-    const thisFile = fileURLToPath2(import.meta.url);
-    const pkgPath = join3(dirname2(thisFile), "..", "package.json");
-    const pkg = JSON.parse(readFileSync3(pkgPath, "utf-8"));
+    const thisFile = fileURLToPath(import.meta.url);
+    const pkgPath = join(dirname(thisFile), "..", "package.json");
+    const pkg = JSON.parse(readFileSync(pkgPath, "utf-8"));
     return pkg.version || "0.0.0";
   } catch {
     return "0.0.0";
@@ -606,30 +490,18 @@ var formatTokens = (n) => {
   return String(n);
 };
 var truncate = (s, max) => s.length > max ? s.slice(0, max - 1) + "\u2026" : s;
-var getDisplayName = (session) => {
-  if (session.nickname) return session.nickname;
-  if (session.cwd) {
-    const parts = session.cwd.replace(/\/+$/, "").split("/");
-    return parts[parts.length - 1] || session.slug;
-  }
-  if (session.project) {
-    const parts = session.project.replace(/\/+$/, "").split("/");
-    return parts[parts.length - 1] || session.slug;
-  }
-  return session.slug;
-};
 var SIDEBAR_WIDTH = 30;
 var INNER_WIDTH = SIDEBAR_WIDTH - 4;
-var LINES_PER_SESSION = 3;
+var LINES_PER_ITEM = 3;
 var SessionList = React2.memo(
-  ({ sessions, selectedIndex, focused, height, filter, viewingArchive }) => {
+  ({ visibleItems, selectedIndex, focused, height, filter, viewingArchive, totalSessions }) => {
     const availableRows = height - 2;
-    const maxVisible = Math.max(1, Math.floor((availableRows + 1) / LINES_PER_SESSION));
+    const maxVisible = Math.max(1, Math.floor((availableRows + 1) / LINES_PER_ITEM));
     const halfView = Math.floor(maxVisible / 2);
-    const scrollStart = Math.max(0, Math.min(selectedIndex - halfView, sessions.length - maxVisible));
+    const scrollStart = Math.max(0, Math.min(selectedIndex - halfView, visibleItems.length - maxVisible));
     const start = Math.max(0, scrollStart);
-    const visible = sessions.slice(start, start + maxVisible);
-    const canScroll = sessions.length > maxVisible;
+    const visible = visibleItems.slice(start, start + maxVisible);
+    const canScroll = visibleItems.length > maxVisible;
     return /* @__PURE__ */ jsxs2(
       Box2,
       {
@@ -651,21 +523,104 @@ var SessionList = React2.memo(
             canScroll && /* @__PURE__ */ jsxs2(Text2, { color: colors.muted, children: [
               selectedIndex + 1,
               "/",
-              sessions.length
-            ] })
+              visibleItems.length
+            ] }),
+            !canScroll && totalSessions > 0 && /* @__PURE__ */ jsx2(Text2, { color: colors.muted, children: totalSessions })
           ] }),
-          sessions.length === 0 && /* @__PURE__ */ jsx2(Box2, { paddingX: 1, paddingY: 1, children: /* @__PURE__ */ jsx2(Text2, { color: colors.muted, italic: true, children: filter ? "No matches" : viewingArchive ? "No archived" : "No sessions" }) }),
-          visible.map((session, vi) => {
+          visibleItems.length === 0 && /* @__PURE__ */ jsx2(Box2, { paddingX: 1, paddingY: 1, children: /* @__PURE__ */ jsx2(Text2, { color: colors.muted, italic: true, children: filter ? "No matches" : viewingArchive ? "No archived" : "No sessions" }) }),
+          visible.map((item, vi) => {
             const realIdx = start + vi;
             const isSelected = realIdx === selectedIndex;
+            if (item.type === "group") {
+              const g = item.group;
+              const arrow = g.expanded ? "\u25BE" : "\u25B8";
+              const dotColor2 = g.isActive ? colors.success : colors.muted;
+              const statusDot2 = g.isActive ? "\u25CF" : "\u25CB";
+              const nameColor2 = isSelected ? colors.bright : g.isActive ? colors.secondary : colors.text;
+              const label2 = truncate(`${g.key} (${g.sessions.length})`, INNER_WIDTH - 4);
+              const model2 = formatModel(g.latestModel);
+              return /* @__PURE__ */ jsxs2(
+                Box2,
+                {
+                  flexDirection: "column",
+                  paddingX: 1,
+                  backgroundColor: isSelected ? colors.selected : void 0,
+                  children: [
+                    /* @__PURE__ */ jsxs2(Text2, { color: nameColor2, bold: isSelected, wrap: "truncate", children: [
+                      arrow,
+                      " ",
+                      /* @__PURE__ */ jsx2(Text2, { color: dotColor2, children: statusDot2 }),
+                      " ",
+                      label2
+                    ] }),
+                    /* @__PURE__ */ jsxs2(Text2, { color: colors.muted, wrap: "truncate", children: [
+                      "    ",
+                      model2,
+                      " ",
+                      formatTokens(g.totalInputTokens),
+                      "in ",
+                      formatTokens(g.totalOutputTokens),
+                      "out"
+                    ] }),
+                    vi < visible.length - 1 && /* @__PURE__ */ jsx2(Text2, { color: colors.border, children: "\u2500".repeat(INNER_WIDTH) })
+                  ]
+                },
+                `group-${g.key}`
+              );
+            }
+            const session = item.type === "session" ? item.session : item.session;
             const isActive = session.pid !== null;
-            const indicator = isSelected ? "\u25B8" : " ";
             const statusDot = isActive ? "\u25CF" : "\u25CB";
-            const displayName = truncate(getDisplayName(session), INNER_WIDTH - 4);
+            const dotColor = isActive ? colors.success : colors.muted;
             const totalIn = session.usage.inputTokens + session.usage.cacheReadTokens;
             const model = formatModel(session.model);
+            if (item.type === "session") {
+              const nameColor2 = isSelected ? colors.bright : isActive ? colors.secondary : colors.muted;
+              const displayName2 = truncate(session.slug, INNER_WIDTH - 6);
+              return /* @__PURE__ */ jsxs2(
+                Box2,
+                {
+                  flexDirection: "column",
+                  paddingX: 1,
+                  backgroundColor: isSelected ? colors.selected : void 0,
+                  children: [
+                    /* @__PURE__ */ jsxs2(Text2, { color: nameColor2, bold: isSelected, wrap: "truncate", children: [
+                      "  ",
+                      " ",
+                      /* @__PURE__ */ jsx2(Text2, { color: dotColor, children: statusDot }),
+                      " ",
+                      displayName2
+                    ] }),
+                    /* @__PURE__ */ jsxs2(Text2, { color: colors.muted, wrap: "truncate", children: [
+                      "      ",
+                      model,
+                      " ",
+                      formatTokens(totalIn),
+                      "in ",
+                      formatTokens(session.usage.outputTokens),
+                      "out"
+                    ] }),
+                    vi < visible.length - 1 && /* @__PURE__ */ jsx2(Text2, { color: colors.border, children: "\u2500".repeat(INNER_WIDTH) })
+                  ]
+                },
+                session.sessionId
+              );
+            }
+            const indicator = isSelected ? "\u25B8" : " ";
             const nameColor = isSelected ? colors.bright : isActive ? colors.secondary : colors.text;
-            const dotColor = isActive ? colors.success : colors.muted;
+            const getDisplayName2 = (s) => {
+              if (s.nickname) return s.nickname;
+              if (s.cwd) {
+                const parts = s.cwd.replace(/\/+$/, "").split("/");
+                return parts[parts.length - 1] || s.slug;
+              }
+              if (s.project) {
+                const parts = s.project.replace(/\/+$/, "").split("/");
+                return parts[parts.length - 1] || s.slug;
+              }
+              return s.slug;
+            };
+            const displayName = truncate(getDisplayName2(session), INNER_WIDTH - 4);
             return /* @__PURE__ */ jsxs2(
               Box2,
               {
@@ -705,6 +660,16 @@ var SessionList = React2.memo(
 import React3 from "react";
 import { Box as Box3, Text as Text3 } from "ink";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var TAG_COLORS = [
+  "#61AFEF",
+  "#98C379",
+  "#C678DD",
+  "#E5C07B",
+  "#E06C75",
+  "#56B6C2",
+  "#D19A66",
+  "#BE5046"
+];
 var formatTime = (ts) => {
   const d = new Date(ts);
   return d.toLocaleTimeString("en-GB", { hour12: false });
@@ -732,7 +697,7 @@ var summarizeInput = (call) => {
   }
 };
 var ActivityFeed = React3.memo(
-  ({ events, sessionSlug, focused, height, scrollOffset, filter }) => {
+  ({ events, sessionSlug, sessionId, isActive, focused, height, scrollOffset, filter, merged, mergedSessions }) => {
     const viewportRows = height - 2;
     const totalEvents = events.length;
     const start = Math.max(0, totalEvents - viewportRows - scrollOffset);
@@ -741,6 +706,12 @@ var ActivityFeed = React3.memo(
     const isAtBottom = scrollOffset === 0;
     const isAtTop = start === 0;
     const canScroll = totalEvents > viewportRows;
+    const slugColorMap = /* @__PURE__ */ new Map();
+    if (merged && mergedSessions) {
+      mergedSessions.forEach((s, i) => {
+        slugColorMap.set(s.sessionId, TAG_COLORS[i % TAG_COLORS.length]);
+      });
+    }
     return /* @__PURE__ */ jsxs3(
       Box3,
       {
@@ -757,6 +728,7 @@ var ActivityFeed = React3.memo(
                 sessionSlug,
                 ")"
               ] }),
+              merged && /* @__PURE__ */ jsx3(Text3, { color: colors.accent, children: " [merged]" }),
               filter && /* @__PURE__ */ jsxs3(Text3, { color: colors.muted, children: [
                 " [",
                 filter.length > 10 ? filter.slice(0, 9) + "\u2026" : filter,
@@ -771,19 +743,46 @@ var ActivityFeed = React3.memo(
               "]"
             ] })
           ] }),
-          visible.length === 0 && /* @__PURE__ */ jsx3(Box3, { paddingX: 1, paddingY: 1, children: /* @__PURE__ */ jsx3(Text3, { color: colors.muted, italic: true, children: sessionSlug ? "Waiting for activity..." : "Select a session" }) }),
-          visible.map((event, i) => /* @__PURE__ */ jsxs3(Box3, { paddingX: 1, children: [
+          visible.length === 0 && /* @__PURE__ */ jsx3(Box3, { paddingX: 1, paddingY: 1, children: /* @__PURE__ */ jsx3(Text3, { color: colors.muted, italic: true, children: sessionSlug || merged ? "Waiting for activity..." : "Select a session" }) }),
+          visible.map((event, i) => {
+            const tag = merged ? event.slug.slice(0, 4) : null;
+            const tagColor = merged ? slugColorMap.get(event.sessionId) || colors.muted : void 0;
+            return /* @__PURE__ */ jsxs3(Box3, { paddingX: 1, children: [
+              tag && /* @__PURE__ */ jsx3(Text3, { color: tagColor, children: tag.padEnd(5) }),
+              /* @__PURE__ */ jsxs3(Text3, { color: colors.muted, children: [
+                formatTime(event.timestamp),
+                " "
+              ] }),
+              /* @__PURE__ */ jsx3(Text3, { color: getToolColor(event.toolName), bold: true, children: event.toolName.padEnd(8) }),
+              /* @__PURE__ */ jsxs3(Text3, { color: colors.text, children: [
+                " ",
+                summarizeInput(event)
+              ] })
+            ] }, `${event.timestamp}-${i}`);
+          }),
+          focused && canScroll && !isAtTop && visible.length > 0 && /* @__PURE__ */ jsx3(Box3, { paddingX: 1, justifyContent: "flex-end", children: /* @__PURE__ */ jsx3(Text3, { color: colors.muted, children: isAtBottom ? "" : "G:bottom " }) }),
+          !merged && sessionId && isActive === false && /* @__PURE__ */ jsxs3(Box3, { paddingX: 1, flexDirection: "column", children: [
+            /* @__PURE__ */ jsx3(Text3, { color: colors.muted, children: " " }),
             /* @__PURE__ */ jsxs3(Text3, { color: colors.muted, children: [
-              formatTime(event.timestamp),
-              " "
-            ] }),
-            /* @__PURE__ */ jsx3(Text3, { color: getToolColor(event.toolName), bold: true, children: event.toolName.padEnd(8) }),
-            /* @__PURE__ */ jsxs3(Text3, { color: colors.text, children: [
-              " ",
-              summarizeInput(event)
+              "resume: ",
+              /* @__PURE__ */ jsxs3(Text3, { color: colors.text, children: [
+                "claude --resume ",
+                sessionId
+              ] })
             ] })
-          ] }, `${event.timestamp}-${i}`)),
-          focused && canScroll && !isAtTop && visible.length > 0 && /* @__PURE__ */ jsx3(Box3, { paddingX: 1, justifyContent: "flex-end", children: /* @__PURE__ */ jsx3(Text3, { color: colors.muted, children: isAtBottom ? "" : "G:bottom " }) })
+          ] }),
+          merged && mergedSessions && mergedSessions.some((s) => s.pid === null) && /* @__PURE__ */ jsxs3(Box3, { paddingX: 1, flexDirection: "column", children: [
+            /* @__PURE__ */ jsx3(Text3, { color: colors.muted, children: " " }),
+            mergedSessions.filter((s) => s.pid === null).map((s) => /* @__PURE__ */ jsxs3(Text3, { color: colors.muted, children: [
+              "resume ",
+              s.slug.slice(0, 8),
+              ": ",
+              /* @__PURE__ */ jsxs3(Text3, { color: colors.text, children: [
+                "claude --resume ",
+                s.sessionId
+              ] })
+            ] }, s.sessionId))
+          ] })
         ]
       }
     );
@@ -1898,6 +1897,8 @@ var SplitPanel = React14.memo(
       {
         events: leftEvents,
         sessionSlug: leftSession?.slug ?? null,
+        sessionId: leftSession?.sessionId,
+        isActive: leftSession ? leftSession.pid !== null : void 0,
         focused: activePanel === "left",
         height,
         scrollOffset: leftScroll,
@@ -1909,6 +1910,8 @@ var SplitPanel = React14.memo(
       {
         events: rightEvents,
         sessionSlug: rightSession?.slug ?? null,
+        sessionId: rightSession?.sessionId,
+        isActive: rightSession ? rightSession.pid !== null : void 0,
         focused: activePanel === "right",
         height,
         scrollOffset: rightScroll,
@@ -1938,9 +1941,69 @@ var SplitPanel = React14.memo(
 import { useState as useState8, useEffect as useEffect5, useCallback as useCallback2, useRef as useRef3 } from "react";
 var ACTIVE_POLL_MS = 1e4;
 var IDLE_POLL_MS = 3e4;
+var getDisplayName = (session) => {
+  if (session.nickname) return session.nickname;
+  if (session.cwd) {
+    const parts = session.cwd.replace(/\/+$/, "").split("/");
+    return parts[parts.length - 1] || session.slug;
+  }
+  if (session.project) {
+    const parts = session.project.replace(/\/+$/, "").split("/");
+    return parts[parts.length - 1] || session.slug;
+  }
+  return session.slug;
+};
+var buildGroups = (sessions, expandedKeys) => {
+  const byName = /* @__PURE__ */ new Map();
+  for (const s of sessions) {
+    const name = getDisplayName(s);
+    const list = byName.get(name);
+    if (list) list.push(s);
+    else byName.set(name, [s]);
+  }
+  const groups = [];
+  for (const [key, list] of byName) {
+    list.sort((a, b) => b.lastActivity - a.lastActivity);
+    const totalIn = list.reduce(
+      (sum, s) => sum + s.usage.inputTokens + s.usage.cacheReadTokens,
+      0
+    );
+    const totalOut = list.reduce((sum, s) => sum + s.usage.outputTokens, 0);
+    groups.push({
+      key,
+      sessions: list,
+      expanded: expandedKeys.has(key),
+      totalInputTokens: totalIn,
+      totalOutputTokens: totalOut,
+      latestModel: list[0].model,
+      isActive: list.some((s) => s.pid !== null),
+      latestActivity: list[0].lastActivity,
+      earliestStart: Math.min(...list.map((s) => s.startTime))
+    });
+  }
+  groups.sort((a, b) => b.latestActivity - a.latestActivity);
+  return groups;
+};
+var buildVisibleItems = (groups) => {
+  const items = [];
+  for (const group of groups) {
+    if (group.sessions.length === 1) {
+      items.push({ type: "ungrouped", session: group.sessions[0] });
+    } else {
+      items.push({ type: "group", group });
+      if (group.expanded) {
+        for (const session of group.sessions) {
+          items.push({ type: "session", session, groupKey: group.key });
+        }
+      }
+    }
+  }
+  return items;
+};
 var useSessions = (allUsers, filter, archivedIds, viewingArchive) => {
   const [sessions, setSessions] = useState8([]);
   const [selectedIndex, setSelectedIndex] = useState8(0);
+  const [expandedKeys, setExpandedKeys] = useState8(/* @__PURE__ */ new Set());
   const usageOverrides = useRef3(/* @__PURE__ */ new Map());
   const refresh = useCallback2(() => {
     const found = discoverSessions(allUsers);
@@ -1982,16 +2045,28 @@ var useSessions = (allUsers, filter, archivedIds, viewingArchive) => {
     const interval = setInterval(refresh, pollMs);
     return () => clearInterval(interval);
   }, [refresh, sessions.length > 0]);
-  const selectedSession = sessions[selectedIndex] ?? null;
+  const groups = buildGroups(sessions, expandedKeys);
+  const visibleItems = buildVisibleItems(groups);
+  const selectedItem = visibleItems[selectedIndex] ?? null;
+  const selectedSession = selectedItem?.type === "ungrouped" ? selectedItem.session : selectedItem?.type === "session" ? selectedItem.session : null;
+  const selectedGroup = selectedItem?.type === "group" ? selectedItem.group : null;
   const selectNext = useCallback2(() => {
-    setSelectedIndex((i) => Math.min(i + 1, Math.max(0, sessions.length - 1)));
-  }, [sessions.length]);
+    setSelectedIndex((i) => Math.min(i + 1, Math.max(0, visibleItems.length - 1)));
+  }, [visibleItems.length]);
   const selectPrev = useCallback2(() => {
     setSelectedIndex((i) => Math.max(i - 1, 0));
   }, []);
   const selectIndex = useCallback2((i) => {
     setSelectedIndex(i);
   }, []);
+  const toggleExpand = useCallback2((groupKey) => {
+    setExpandedKeys((prev) => {
+      const next = new Set(prev);
+      if (next.has(groupKey)) next.delete(groupKey);
+      else next.add(groupKey);
+      return next;
+    });
+  }, []);
   const addUsage = useCallback2((sessionId, usage) => {
     const existing = usageOverrides.current.get(sessionId);
     if (existing) {
@@ -2005,7 +2080,20 @@ var useSessions = (allUsers, filter, archivedIds, viewingArchive) => {
       usageOverrides.current.set(sessionId, usage);
     }
   }, []);
-  return { sessions, selectedSession, selectedIndex, selectNext, selectPrev, selectIndex, refresh, addUsage };
+  return {
+    sessions,
+    groups,
+    visibleItems,
+    selectedSession,
+    selectedGroup,
+    selectedIndex,
+    selectNext,
+    selectPrev,
+    selectIndex,
+    toggleExpand,
+    refresh,
+    addUsage
+  };
 };
 
 // src/ui/hooks/useActivityStream.ts
@@ -2014,20 +2102,28 @@ var MAX_EVENTS = 200;
 var useActivityStream = (session, allUsers) => {
   const [events, setEvents] = useState9([]);
   const watcherRef = useRef4(null);
+  const sessions = session === null ? [] : Array.isArray(session) ? session : [session];
+  const sessionKey = sessions.map((s) => s.sessionId).sort().join(",");
+  const sessionIdSet = new Set(sessions.map((s) => s.sessionId));
   useEffect6(() => {
     setEvents([]);
-    if (!session) return;
+    if (sessions.length === 0) return;
     const existingCalls = [];
     const tempWatcher = new Watcher(() => {
     }, allUsers);
-    for (const file of session.outputFiles) {
+    const allFiles = sessions.flatMap((s) => s.outputFiles);
+    const seen = /* @__PURE__ */ new Set();
+    for (const file of allFiles) {
+      if (seen.has(file)) continue;
+      seen.add(file);
       existingCalls.push(...tempWatcher.readExisting(file));
     }
+    existingCalls.sort((a, b) => a.timestamp - b.timestamp);
     setEvents(existingCalls.slice(-MAX_EVENTS));
     const handler = (calls) => {
-      const sessionCalls = calls.filter((c) => c.sessionId === session.sessionId);
-      if (sessionCalls.length === 0) return;
-      setEvents((prev) => [...prev, ...sessionCalls].slice(-MAX_EVENTS));
+      const matched = calls.filter((c) => sessionIdSet.has(c.sessionId));
+      if (matched.length === 0) return;
+      setEvents((prev) => [...prev, ...matched].slice(-MAX_EVENTS));
     };
     const watcher = new Watcher(handler, allUsers);
     watcherRef.current = watcher;
@@ -2036,7 +2132,7 @@ var useActivityStream = (session, allUsers) => {
       watcher.stop();
       watcherRef.current = null;
     };
-  }, [session?.sessionId, allUsers]);
+  }, [sessionKey, allUsers]);
   return events;
 };
 
@@ -2088,14 +2184,14 @@ var notify = (alert, config) => {
 };
 
 // src/alerts/logger.ts
-import { appendFileSync, mkdirSync as mkdirSync3 } from "fs";
-import { dirname as dirname3 } from "path";
+import { appendFileSync, mkdirSync } from "fs";
+import { dirname as dirname2 } from "path";
 var AlertLogger = class {
   logPath;
   writeCount = 0;
   constructor(config) {
     this.logPath = resolveAlertLogPath(config);
-    mkdirSync3(dirname3(this.logPath), { recursive: true });
+    mkdirSync(dirname2(this.logPath), { recursive: true });
   }
   log(alert) {
     const entry = {
@@ -2313,6 +2409,10 @@ var useKeyHandler = (deps) => {
       }
       return;
     }
+    if (matchKey(d.kb.detail, input, key) && d.activePanel === "sessions" && d.selectedGroup) {
+      d.toggleExpand(d.selectedGroup.key);
+      return;
+    }
     if (matchKey(d.kb.detail, input, key) && d.selectedSession) {
       if (d.splitMode) {
         if (d.activePanel === "left") {
@@ -2450,98 +2550,133 @@ var useUpdateChecker = (disabled, checkOnLaunch, checkInterval) => {
   return updateInfo;
 };
 
-// src/ui/App.tsx
-import { jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
-var App = ({ options, config: initialConfig, version, firstRun }) => {
-  const { exit } = useApp();
-  const { stdout } = useStdout3();
-  const termHeight = stdout?.rows ?? 40;
+// src/ui/hooks/useSetupFlow.ts
+import { useState as useState13, useCallback as useCallback4 } from "react";
+
+// src/hooks/installer.ts
+import { existsSync, readFileSync as readFileSync2, writeFileSync, copyFileSync, mkdirSync as mkdirSync2, chmodSync } from "fs";
+import { join as join2, dirname as dirname3 } from "path";
+import { homedir } from "os";
+import { fileURLToPath as fileURLToPath2 } from "url";
+var HOOK_FILENAME = "agenttop-guard.py";
+var SETTINGS_PATH = join2(homedir(), ".claude", "settings.json");
+var getHookSource = () => {
+  const thisFile = fileURLToPath2(import.meta.url);
+  const srcHooksDir = join2(dirname3(thisFile), "..", "src", "hooks");
+  const distHooksDir = join2(dirname3(thisFile), "hooks");
+  for (const dir of [distHooksDir, srcHooksDir]) {
+    const path = join2(dir, HOOK_FILENAME);
+    if (existsSync(path)) return path;
+  }
+  const npmGlobalPath = join2(dirname3(thisFile), "..", "hooks", HOOK_FILENAME);
+  if (existsSync(npmGlobalPath)) return npmGlobalPath;
+  throw new Error(`cannot find ${HOOK_FILENAME} \u2014 is agenttop installed correctly?`);
+};
+var getHookTarget = () => {
+  const claudeHooksDir = join2(homedir(), ".claude", "hooks");
+  mkdirSync2(claudeHooksDir, { recursive: true });
+  return join2(claudeHooksDir, HOOK_FILENAME);
+};
+var readSettings = () => {
+  if (!existsSync(SETTINGS_PATH)) {
+    return {};
+  }
+  try {
+    return JSON.parse(readFileSync2(SETTINGS_PATH, "utf-8"));
+  } catch {
+    return {};
+  }
+};
+var writeSettings = (settings) => {
+  mkdirSync2(dirname3(SETTINGS_PATH), { recursive: true });
+  writeFileSync(SETTINGS_PATH, JSON.stringify(settings, null, 2) + "\n");
+};
+var installHooks = () => {
+  const source = getHookSource();
+  const target = getHookTarget();
+  copyFileSync(source, target);
+  chmodSync(target, 493);
+  const settings = readSettings();
+  const hooks = settings.hooks ?? {};
+  const postToolUse = hooks.PostToolUse ?? [];
+  const hookCommand = target;
+  const allToolsMatcher = postToolUse.find(
+    (entry) => entry.matcher === "Bash|Read|Grep|Glob|WebFetch|WebSearch"
+  );
+  if (allToolsMatcher) {
+    const alreadyInstalled = allToolsMatcher.hooks.some((h) => h.command.includes("agenttop-guard"));
+    if (alreadyInstalled) {
+      process.stdout.write("agenttop hooks already installed\n");
+      return;
+    }
+    allToolsMatcher.hooks.push({ type: "command", command: hookCommand });
+  } else {
+    postToolUse.push({
+      matcher: "Bash|Read|Grep|Glob|WebFetch|WebSearch",
+      hooks: [{ type: "command", command: hookCommand }]
+    });
+  }
+  hooks.PostToolUse = postToolUse;
+  settings.hooks = hooks;
+  writeSettings(settings);
+  process.stdout.write(`agenttop hooks installed:
+`);
+  process.stdout.write(`  hook: ${target}
+`);
+  process.stdout.write(`  settings: ${SETTINGS_PATH}
+`);
+  process.stdout.write(`  matcher: PostToolUse (Bash|Read|Grep|Glob|WebFetch|WebSearch)
+`);
+};
+var uninstallHooks = () => {
+  const settings = readSettings();
+  const hooks = settings.hooks ?? {};
+  const postToolUse = hooks.PostToolUse ?? [];
+  let removed = false;
+  for (const entry of postToolUse) {
+    const before = entry.hooks.length;
+    entry.hooks = entry.hooks.filter((h) => !h.command.includes("agenttop-guard"));
+    if (entry.hooks.length < before) removed = true;
+  }
+  hooks.PostToolUse = postToolUse.filter((e) => e.hooks.length > 0);
+  settings.hooks = hooks;
+  writeSettings(settings);
+  if (removed) {
+    process.stdout.write("agenttop hooks removed from Claude Code settings\n");
+  } else {
+    process.stdout.write("agenttop hooks were not installed\n");
+  }
+};
+
+// src/install-mcp.ts
+import { readFileSync as readFileSync3, writeFileSync as writeFileSync2, mkdirSync as mkdirSync3 } from "fs";
+import { join as join3 } from "path";
+import { homedir as homedir2 } from "os";
+var installMcpConfig = () => {
+  const settingsPath = join3(homedir2(), ".claude", "settings.json");
+  let settings = {};
+  try {
+    settings = JSON.parse(readFileSync3(settingsPath, "utf-8"));
+  } catch {
+  }
+  const mcpServers = settings.mcpServers ?? {};
+  mcpServers.agenttop = { command: "agenttop", args: ["--mcp"] };
+  settings.mcpServers = mcpServers;
+  mkdirSync3(join3(homedir2(), ".claude"), { recursive: true });
+  writeFileSync2(settingsPath, JSON.stringify(settings, null, 2) + "\n");
+  process.stdout.write("agenttop MCP server registered in Claude Code settings\n");
+  process.stdout.write(`  settings: ${settingsPath}
+`);
+};
+
+// src/ui/hooks/useSetupFlow.ts
+var useSetupFlow = (initialConfig, firstRun) => {
   const [liveConfig, setLiveConfig] = useState13(initialConfig);
-  const kb = liveConfig.keybindings;
-  const [activePanel, setActivePanel] = useState13("sessions");
-  const [activityScroll, setActivityScroll] = useState13(0);
-  const [inputMode, setInputMode] = useState13("normal");
   const [showSetup, setShowSetup] = useState13(firstRun);
   const [showThemePicker, setShowThemePicker] = useState13(false);
   const [showTour, setShowTour] = useState13(false);
-  const [filter, setFilter] = useState13("");
-  const [activityFilter, setActivityFilter] = useState13("");
-  const [updateStatus, setUpdateStatus] = useState13("");
-  const [showDetail, setShowDetail] = useState13(false);
   const [showSettings, setShowSettings] = useState13(false);
   const [showThemeMenu, setShowThemeMenu] = useState13(false);
-  const [viewingArchive, setViewingArchive] = useState13(false);
-  const [confirmAction, setConfirmAction] = useState13(
-    null
-  );
-  const [archivedIds, setArchivedIds] = useState13(() => new Set(Object.keys(getArchived())));
-  const [splitMode, setSplitMode] = useState13(false);
-  const [leftSession, setLeftSession] = useState13(null);
-  const [rightSession, setRightSession] = useState13(null);
-  const [leftScroll, setLeftScroll] = useState13(0);
-  const [rightScroll, setRightScroll] = useState13(0);
-  const [leftFilter, setLeftFilter] = useState13("");
-  const [rightFilter, setRightFilter] = useState13("");
-  const [leftShowDetail, setLeftShowDetail] = useState13(false);
-  const [rightShowDetail, setRightShowDetail] = useState13(false);
-  const refreshArchived = useCallback4(() => setArchivedIds(new Set(Object.keys(getArchived()))), []);
-  const updateInfo = useUpdateChecker(
-    options.noUpdates,
-    liveConfig.updates.checkOnLaunch,
-    liveConfig.updates.checkInterval
-  );
-  useEffect9(() => {
-    applyTheme(resolveTheme(liveConfig.theme, liveConfig.customThemes));
-  }, [liveConfig.theme, liveConfig.customThemes]);
-  const { sessions, selectedSession, selectedIndex, selectNext, selectPrev, refresh } = useSessions(
-    options.allUsers,
-    filter || void 0,
-    archivedIds,
-    viewingArchive
-  );
-  const rawEvents = useActivityStream(splitMode ? null : selectedSession, options.allUsers);
-  const leftRawEvents = useActivityStream(splitMode ? leftSession : null, options.allUsers);
-  const rightRawEvents = useActivityStream(splitMode ? rightSession : null, options.allUsers);
-  const events = useFilteredEvents(rawEvents, activityFilter);
-  const leftEvents = useFilteredEvents(leftRawEvents, leftFilter);
-  const rightEvents = useFilteredEvents(rightRawEvents, rightFilter);
-  const { alerts } = useAlerts(!options.noSecurity, options.alertLevel, options.allUsers, liveConfig);
-  const nicknameInput = useTextInput(
-    (value) => {
-      if (selectedSession && value.trim()) {
-        setNickname(selectedSession.sessionId, value.trim());
-        refresh();
-      }
-      setInputMode("normal");
-    },
-    () => setInputMode("normal")
-  );
-  const filterInput = useTextInput(
-    (value) => {
-      if (activePanel === "sessions") setFilter(value);
-      else if (activePanel === "left") setLeftFilter(value);
-      else if (activePanel === "right") setRightFilter(value);
-      else setActivityFilter(value);
-      setInputMode("normal");
-    },
-    () => {
-      if (activePanel === "sessions") setFilter("");
-      else if (activePanel === "left") setLeftFilter("");
-      else if (activePanel === "right") setRightFilter("");
-      else setActivityFilter("");
-      setInputMode("normal");
-    }
-  );
-  useEffect9(() => {
-    purgeExpiredArchives();
-    refreshArchived();
-  }, []);
-  useEffect9(() => {
-    setActivityScroll(0);
-  }, [selectedSession?.sessionId]);
-  const alertHeight = options.noSecurity ? 0 : 6;
-  const mainHeight = termHeight - 3 - alertHeight - 1 - (inputMode !== "normal" ? 1 : 0);
-  const viewportRows = mainHeight - 2;
   const handleSettingsClose = useCallback4((c) => {
     setLiveConfig(c);
     saveConfig(c);
@@ -2609,28 +2744,41 @@ var App = ({ options, config: initialConfig, version, firstRun }) => {
   const handleTourSkip = useCallback4(() => {
     setShowTour(false);
   }, []);
-  const switchPanel = useCallback4(
-    (dir) => {
-      if (splitMode) {
-        const order = ["sessions", "left", "right"];
-        setActivePanel((p) => {
-          const idx = order.indexOf(p);
-          if (idx === -1) return "sessions";
-          return dir === "next" ? order[(idx + 1) % order.length] : order[(idx - 1 + order.length) % order.length];
-        });
-      } else {
-        setActivePanel((p) => p === "sessions" ? "activity" : "sessions");
-      }
-    },
-    [splitMode]
-  );
-  const getActiveFilter = useCallback4(() => {
-    if (activePanel === "sessions") return filter;
-    if (activePanel === "left") return leftFilter;
-    if (activePanel === "right") return rightFilter;
-    return activityFilter;
-  }, [activePanel, filter, leftFilter, rightFilter, activityFilter]);
-  const clearSplitState = useCallback4(() => {
+  return {
+    liveConfig,
+    setLiveConfig,
+    showSetup,
+    setShowSetup,
+    showThemePicker,
+    showTour,
+    showSettings,
+    setShowSettings,
+    showThemeMenu,
+    handleSettingsClose,
+    handleThemeMenuClose,
+    handleOpenThemeMenu,
+    handleSetupComplete,
+    handleThemePickerSelect,
+    handleThemePickerSkip,
+    handleThemePickerDismiss,
+    handleTourComplete,
+    handleTourSkip
+  };
+};
+
+// src/ui/hooks/useSplitPanel.ts
+import { useState as useState14, useCallback as useCallback5 } from "react";
+var useSplitPanel = () => {
+  const [splitMode, setSplitMode] = useState14(false);
+  const [leftSession, setLeftSession] = useState14(null);
+  const [rightSession, setRightSession] = useState14(null);
+  const [leftScroll, setLeftScroll] = useState14(0);
+  const [rightScroll, setRightScroll] = useState14(0);
+  const [leftFilter, setLeftFilter] = useState14("");
+  const [rightFilter, setRightFilter] = useState14("");
+  const [leftShowDetail, setLeftShowDetail] = useState14(false);
+  const [rightShowDetail, setRightShowDetail] = useState14(false);
+  const clearSplitState = useCallback5(() => {
     setSplitMode(false);
     setLeftSession(null);
     setRightSession(null);
@@ -2640,9 +2788,8 @@ var App = ({ options, config: initialConfig, version, firstRun }) => {
     setRightFilter("");
     setLeftShowDetail(false);
     setRightShowDetail(false);
-    setActivePanel("sessions");
   }, []);
-  const resetPanel = useCallback4((side) => {
+  const resetPanel = useCallback5((side) => {
     if (side === "left") {
       setLeftSession(null);
       setLeftScroll(0);
@@ -2655,24 +2802,146 @@ var App = ({ options, config: initialConfig, version, firstRun }) => {
       setRightShowDetail(false);
     }
   }, []);
-  useKeyHandler({
-    kb,
-    activePanel,
+  const switchPanel = useCallback5(
+    (dir, setActivePanel) => {
+      if (splitMode) {
+        const order = ["sessions", "left", "right"];
+        setActivePanel((p) => {
+          const idx = order.indexOf(p);
+          if (idx === -1) return "sessions";
+          return dir === "next" ? order[(idx + 1) % order.length] : order[(idx - 1 + order.length) % order.length];
+        });
+      } else {
+        setActivePanel((p) => p === "sessions" ? "activity" : "sessions");
+      }
+    },
+    [splitMode]
+  );
+  return {
     splitMode,
-    inputMode,
-    showSetup,
-    showSettings: showSettings || showThemeMenu || showThemePicker || showTour,
-    showDetail,
-    leftShowDetail,
-    rightShowDetail,
-    confirmAction,
-    selectedSession,
+    setSplitMode,
     leftSession,
+    setLeftSession,
     rightSession,
+    setRightSession,
     leftScroll,
+    setLeftScroll,
     rightScroll,
+    setRightScroll,
     leftFilter,
+    setLeftFilter,
     rightFilter,
+    setRightFilter,
+    leftShowDetail,
+    setLeftShowDetail,
+    rightShowDetail,
+    setRightShowDetail,
+    clearSplitState,
+    resetPanel,
+    switchPanel
+  };
+};
+
+// src/ui/App.tsx
+import { jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
+var App = ({ options, config: initialConfig, version, firstRun }) => {
+  const { exit } = useApp();
+  const { stdout } = useStdout3();
+  const termHeight = stdout?.rows ?? 40;
+  const setup = useSetupFlow(initialConfig, firstRun);
+  const split = useSplitPanel();
+  const kb = setup.liveConfig.keybindings;
+  const [activePanel, setActivePanel] = useState15("sessions");
+  const [activityScroll, setActivityScroll] = useState15(0);
+  const [inputMode, setInputMode] = useState15("normal");
+  const [filter, setFilter] = useState15("");
+  const [activityFilter, setActivityFilter] = useState15("");
+  const [updateStatus, setUpdateStatus] = useState15("");
+  const [showDetail, setShowDetail] = useState15(false);
+  const [viewingArchive, setViewingArchive] = useState15(false);
+  const [confirmAction, setConfirmAction] = useState15(null);
+  const [archivedIds, setArchivedIds] = useState15(() => new Set(Object.keys(getArchived())));
+  const refreshArchived = useCallback6(() => setArchivedIds(new Set(Object.keys(getArchived()))), []);
+  const updateInfo = useUpdateChecker(options.noUpdates, setup.liveConfig.updates.checkOnLaunch, setup.liveConfig.updates.checkInterval);
+  useEffect9(() => {
+    applyTheme(resolveTheme(setup.liveConfig.theme, setup.liveConfig.customThemes));
+  }, [setup.liveConfig.theme, setup.liveConfig.customThemes]);
+  const { sessions, visibleItems, selectedSession, selectedGroup, selectedIndex, selectNext, selectPrev, toggleExpand, refresh } = useSessions(options.allUsers, filter || void 0, archivedIds, viewingArchive);
+  const activityTarget = split.splitMode ? null : selectedGroup ? selectedGroup.sessions : selectedSession;
+  const rawEvents = useActivityStream(activityTarget, options.allUsers);
+  const leftRawEvents = useActivityStream(split.splitMode ? split.leftSession : null, options.allUsers);
+  const rightRawEvents = useActivityStream(split.splitMode ? split.rightSession : null, options.allUsers);
+  const events = useFilteredEvents(rawEvents, activityFilter);
+  const leftEvents = useFilteredEvents(leftRawEvents, split.leftFilter);
+  const rightEvents = useFilteredEvents(rightRawEvents, split.rightFilter);
+  const { alerts } = useAlerts(!options.noSecurity, options.alertLevel, options.allUsers, setup.liveConfig);
+  const nicknameInput = useTextInput(
+    (value) => {
+      if (selectedSession && value.trim()) {
+        setNickname(selectedSession.sessionId, value.trim());
+        refresh();
+      }
+      setInputMode("normal");
+    },
+    () => setInputMode("normal")
+  );
+  const filterInput = useTextInput(
+    (value) => {
+      if (activePanel === "sessions") setFilter(value);
+      else if (activePanel === "left") split.setLeftFilter(value);
+      else if (activePanel === "right") split.setRightFilter(value);
+      else setActivityFilter(value);
+      setInputMode("normal");
+    },
+    () => {
+      if (activePanel === "sessions") setFilter("");
+      else if (activePanel === "left") split.setLeftFilter("");
+      else if (activePanel === "right") split.setRightFilter("");
+      else setActivityFilter("");
+      setInputMode("normal");
+    }
+  );
+  useEffect9(() => {
+    purgeExpiredArchives();
+    refreshArchived();
+  }, []);
+  useEffect9(() => {
+    setActivityScroll(0);
+  }, [selectedSession?.sessionId, selectedGroup?.key]);
+  const alertHeight = options.noSecurity ? 0 : 6;
+  const mainHeight = termHeight - 3 - alertHeight - 1 - (inputMode !== "normal" ? 1 : 0);
+  const viewportRows = mainHeight - 2;
+  const switchPanel = useCallback6((dir) => split.switchPanel(dir, setActivePanel), [split.switchPanel]);
+  const clearSplitState = useCallback6(() => {
+    split.clearSplitState();
+    setActivePanel("sessions");
+  }, [split.clearSplitState]);
+  const getActiveFilter = useCallback6(() => {
+    if (activePanel === "sessions") return filter;
+    if (activePanel === "left") return split.leftFilter;
+    if (activePanel === "right") return split.rightFilter;
+    return activityFilter;
+  }, [activePanel, filter, split.leftFilter, split.rightFilter, activityFilter]);
+  useKeyHandler({
+    kb,
+    activePanel,
+    splitMode: split.splitMode,
+    inputMode,
+    showSetup: setup.showSetup,
+    showSettings: setup.showSettings || setup.showThemeMenu || setup.showThemePicker || setup.showTour,
+    showDetail,
+    leftShowDetail: split.leftShowDetail,
+    rightShowDetail: split.rightShowDetail,
+    confirmAction,
+    selectedSession,
+    selectedGroup,
+    toggleExpand,
+    leftSession: split.leftSession,
+    rightSession: split.rightSession,
+    leftScroll: split.leftScroll,
+    rightScroll: split.rightScroll,
+    leftFilter: split.leftFilter,
+    rightFilter: split.rightFilter,
     filter,
     activityFilter,
     viewingArchive,
@@ -2687,24 +2956,24 @@ var App = ({ options, config: initialConfig, version, firstRun }) => {
     refresh,
     switchPanel,
     clearSplitState,
-    resetPanel,
+    resetPanel: split.resetPanel,
     getActiveFilter,
     setActivePanel,
     setInputMode,
     setFilter,
     setActivityFilter,
-    setLeftFilter,
-    setRightFilter,
+    setLeftFilter: split.setLeftFilter,
+    setRightFilter: split.setRightFilter,
     setShowDetail,
-    setLeftShowDetail,
-    setRightShowDetail,
-    setShowSettings,
+    setLeftShowDetail: split.setLeftShowDetail,
+    setRightShowDetail: split.setRightShowDetail,
+    setShowSettings: setup.setShowSettings,
     setViewingArchive,
-    setSplitMode,
-    setLeftSession,
-    setRightSession,
-    setLeftScroll,
-    setRightScroll,
+    setSplitMode: split.setSplitMode,
+    setLeftSession: split.setLeftSession,
+    setRightSession: split.setRightSession,
+    setLeftScroll: split.setLeftScroll,
+    setRightScroll: split.setRightScroll,
     setActivityScroll,
     setConfirmAction,
     setUpdateStatus,
@@ -2747,96 +3016,31 @@ var App = ({ options, config: initialConfig, version, firstRun }) => {
       installUpdate().then(() => setUpdateStatus(`updated to v${updateInfo?.latest} \u2014 restart to apply`)).catch(() => setUpdateStatus("update failed"));
     }
   });
-  if (showSetup) {
+  if (setup.showSetup) {
     const steps = [
-      ...liveConfig.prompts.hook === "pending" ? [
-        {
-          title: "Install Claude Code hook?",
-          description: "Adds a PostToolUse hook that blocks prompt injection attempts in real-time."
-        }
-      ] : [],
-      ...liveConfig.prompts.mcp === "pending" ? [
-        {
-          title: "Install MCP server?",
-          description: "Registers agenttop as an MCP server so Claude Code can query session status and alerts."
-        }
-      ] : []
+      ...setup.liveConfig.prompts.hook === "pending" ? [{ title: "Install Claude Code hook?", description: "Adds a PostToolUse hook that blocks prompt injection attempts in real-time." }] : [],
+      ...setup.liveConfig.prompts.mcp === "pending" ? [{ title: "Install MCP server?", description: "Registers agenttop as an MCP server so Claude Code can query session status and alerts." }] : []
     ];
     if (steps.length === 0) {
-      setShowSetup(false);
-      if (liveConfig.prompts.theme === "pending") setShowThemePicker(true);
-      else if (liveConfig.prompts.tour === "pending") setShowTour(true);
+      setup.setShowSetup(false);
       return null;
     }
-    return /* @__PURE__ */ jsx15(SetupModal, { steps, onComplete: handleSetupComplete });
+    return /* @__PURE__ */ jsx15(SetupModal, { steps, onComplete: setup.handleSetupComplete });
   }
-  if (showThemePicker) {
-    return /* @__PURE__ */ jsx15(
-      ThemePickerModal,
-      {
-        onSelect: handleThemePickerSelect,
-        onSkip: handleThemePickerSkip,
-        onDismiss: handleThemePickerDismiss
-      }
-    );
-  }
-  if (showTour) return /* @__PURE__ */ jsx15(GuidedTour, { onComplete: handleTourComplete, onSkip: handleTourSkip });
-  if (showThemeMenu) return /* @__PURE__ */ jsx15(ThemeMenu, { config: liveConfig, onClose: handleThemeMenuClose });
-  if (showSettings)
-    return /* @__PURE__ */ jsx15(SettingsMenu, { config: liveConfig, onClose: handleSettingsClose, onOpenThemeMenu: handleOpenThemeMenu });
+  if (setup.showThemePicker) return /* @__PURE__ */ jsx15(ThemePickerModal, { onSelect: setup.handleThemePickerSelect, onSkip: setup.handleThemePickerSkip, onDismiss: setup.handleThemePickerDismiss });
+  if (setup.showTour) return /* @__PURE__ */ jsx15(GuidedTour, { onComplete: setup.handleTourComplete, onSkip: setup.handleTourSkip });
+  if (setup.showThemeMenu) return /* @__PURE__ */ jsx15(ThemeMenu, { config: setup.liveConfig, onClose: setup.handleThemeMenuClose });
+  if (setup.showSettings) return /* @__PURE__ */ jsx15(SettingsMenu, { config: setup.liveConfig, onClose: setup.handleSettingsClose, onOpenThemeMenu: setup.handleOpenThemeMenu });
   if (confirmAction) {
-    return /* @__PURE__ */ jsx15(Box15, { flexDirection: "column", height: termHeight, justifyContent: "center", alignItems: "center", children: /* @__PURE__ */ jsx15(
-      ConfirmModal,
-      {
-        title: confirmAction.title,
-        message: confirmAction.message,
-        onConfirm: confirmAction.onConfirm,
-        onCancel: () => setConfirmAction(null)
-      }
-    ) });
+    return /* @__PURE__ */ jsx15(Box15, { flexDirection: "column", height: termHeight, justifyContent: "center", alignItems: "center", children: /* @__PURE__ */ jsx15(ConfirmModal, { title: confirmAction.title, message: confirmAction.message, onConfirm: confirmAction.onConfirm, onCancel: () => setConfirmAction(null) }) });
   }
-  const filterLabel = activePanel === "sessions" ? "sessions" : activePanel === "left" ? "left" : activePanel === "right" ? "right" : "activity";
-  const rightPanel = splitMode ? /* @__PURE__ */ jsx15(
-    SplitPanel,
-    {
-      activePanel,
-      leftSession,
-      rightSession,
-      leftEvents,
-      rightEvents,
-      leftScroll,
-      rightScroll,
-      leftFilter,
-      rightFilter,
-      leftShowDetail,
-      rightShowDetail,
-      height: mainHeight
-    }
-  ) : showDetail && selectedSession ? /* @__PURE__ */ jsx15(SessionDetail, { session: selectedSession, focused: activePanel === "activity", height: mainHeight }) : /* @__PURE__ */ jsx15(
-    ActivityFeed,
-    {
-      events,
-      sessionSlug: selectedSession?.slug ?? null,
-      focused: activePanel === "activity",
-      height: mainHeight,
-      scrollOffset: activityScroll,
-      filter: activityFilter || void 0
-    }
-  );
+  const activitySlug = selectedGroup ? selectedGroup.key : selectedSession?.slug ?? null;
+  const isMerged = selectedGroup !== null;
+  const rightPanel = split.splitMode ? /* @__PURE__ */ jsx15(SplitPanel, { activePanel, leftSession: split.leftSession, rightSession: split.rightSession, leftEvents, rightEvents, leftScroll: split.leftScroll, rightScroll: split.rightScroll, leftFilter: split.leftFilter, rightFilter: split.rightFilter, leftShowDetail: split.leftShowDetail, rightShowDetail: split.rightShowDetail, height: mainHeight }) : showDetail && selectedSession ? /* @__PURE__ */ jsx15(SessionDetail, { session: selectedSession, focused: activePanel === "activity", height: mainHeight }) : /* @__PURE__ */ jsx15(ActivityFeed, { events, sessionSlug: activitySlug, sessionId: selectedSession?.sessionId, isActive: selectedGroup ? selectedGroup.isActive : selectedSession ? selectedSession.pid !== null : void 0, focused: activePanel === "activity", height: mainHeight, scrollOffset: activityScroll, filter: activityFilter || void 0, merged: isMerged, mergedSessions: selectedGroup?.sessions });
   return /* @__PURE__ */ jsxs15(Box15, { flexDirection: "column", height: termHeight, children: [
     /* @__PURE__ */ jsx15(StatusBar, { sessionCount: sessions.length, alertCount: alerts.length, version, updateInfo }),
     /* @__PURE__ */ jsxs15(Box15, { flexGrow: 1, height: mainHeight, children: [
-      /* @__PURE__ */ jsx15(
-        SessionList,
-        {
-          sessions,
-          selectedIndex,
-          focused: activePanel === "sessions",
-          height: mainHeight,
-          filter: filter || void 0,
-          viewingArchive
-        }
-      ),
+      /* @__PURE__ */ jsx15(SessionList, { visibleItems, selectedIndex, focused: activePanel === "sessions", height: mainHeight, filter: filter || void 0, viewingArchive, totalSessions: sessions.length }),
       rightPanel
     ] }),
     !options.noSecurity && /* @__PURE__ */ jsx15(AlertBar, { alerts }),
@@ -2846,12 +3050,12 @@ var App = ({ options, config: initialConfig, version, firstRun }) => {
       /* @__PURE__ */ jsx15(Text14, { color: colors.muted, children: "_" })
     ] }),
     inputMode === "filter" && /* @__PURE__ */ jsxs15(Box15, { paddingX: 1, children: [
-      /* @__PURE__ */ jsx15(Text14, { color: colors.muted, children: filterLabel }),
+      /* @__PURE__ */ jsx15(Text14, { color: colors.muted, children: activePanel === "sessions" ? "sessions" : activePanel === "left" ? "left" : activePanel === "right" ? "right" : "activity" }),
       /* @__PURE__ */ jsx15(Text14, { color: colors.primary, children: "/" }),
       /* @__PURE__ */ jsx15(Text14, { color: colors.bright, children: filterInput.value }),
       /* @__PURE__ */ jsx15(Text14, { color: colors.muted, children: "_" })
     ] }),
-    inputMode === "normal" && /* @__PURE__ */ jsx15(FooterBar, { keybindings: kb, updateStatus, viewingArchive, splitMode })
+    inputMode === "normal" && /* @__PURE__ */ jsx15(FooterBar, { keybindings: kb, updateStatus, viewingArchive, splitMode: split.splitMode })
   ] });
 };