agenttop 0.4.0 → 0.7.0

package/dist/index.js

@@ -2,28 +2,350 @@
 import {
   SecurityEngine,
   Watcher,
+  archiveSession,
   clearNickname,
+  deleteSessionFiles,
   discoverSessions,
+  getArchived,
   getNicknames,
   isFirstRun,
   loadConfig,
+  purgeExpiredArchives,
   resolveAlertLogPath,
   rotateLogFile,
   saveConfig,
   setNickname,
-  startMcpServer
-} from "./chunk-H2JOTO54.js";
+  startMcpServer,
+  unarchiveSession
+} from "./chunk-FCCWHOJO.js";
 
 // src/index.tsx
 import { readFileSync as readFileSync4 } from "fs";
 import { join as join4, dirname as dirname4 } from "path";
 import { fileURLToPath as fileURLToPath3 } from "url";
-import React10 from "react";
+import React16 from "react";
 import { render } from "ink";
 
 // src/ui/App.tsx
-import { useState as useState8, useEffect as useEffect5, useCallback as useCallback3 } from "react";
-import { Box as Box9, Text as Text9, useApp, useInput as useInput3, useStdout as useStdout2 } from "ink";
+import { useState as useState13, useEffect as useEffect9, useCallback as useCallback4 } from "react";
+import { Box as Box15, Text as Text14, useApp, useStdout as useStdout3 } from "ink";
+
+// src/config/themes.ts
+var COLOR_KEYS = [
+  "primary",
+  "secondary",
+  "accent",
+  "warning",
+  "error",
+  "critical",
+  "muted",
+  "text",
+  "bright",
+  "border",
+  "selected",
+  "header"
+];
+var TOOL_COLOR_KEYS = [
+  "Bash",
+  "Read",
+  "Write",
+  "Edit",
+  "Grep",
+  "Glob",
+  "Task",
+  "WebFetch",
+  "WebSearch"
+];
+var deriveToolColors = (c) => ({
+  Bash: c.error,
+  Read: c.secondary,
+  Write: c.accent,
+  Edit: c.accent,
+  Grep: c.primary,
+  Glob: c.primary,
+  Task: c.warning,
+  WebFetch: c.warning,
+  WebSearch: c.warning
+});
+var fromTuple = ([
+  name,
+  primary,
+  secondary,
+  accent,
+  warning,
+  error,
+  critical,
+  muted,
+  text,
+  bright,
+  border,
+  selected,
+  header
+]) => ({
+  name,
+  builtin: true,
+  colors: { primary, secondary, accent, warning, error, critical, muted, text, bright, border, selected, header },
+  toolColors: deriveToolColors({
+    primary,
+    secondary,
+    accent,
+    warning,
+    error,
+    critical,
+    muted,
+    text,
+    bright,
+    border,
+    selected,
+    header
+  })
+});
+var PRESETS = [
+  [
+    "one-dark",
+    "#61AFEF",
+    "#98C379",
+    "#C678DD",
+    "#E5C07B",
+    "#E06C75",
+    "#FF0000",
+    "#5C6370",
+    "#ABB2BF",
+    "#FFFFFF",
+    "#3E4451",
+    "#2C313A",
+    "#61AFEF"
+  ],
+  [
+    "dracula",
+    "#BD93F9",
+    "#50FA7B",
+    "#FF79C6",
+    "#F1FA8C",
+    "#FF5555",
+    "#FF0000",
+    "#6272A4",
+    "#F8F8F2",
+    "#FFFFFF",
+    "#44475A",
+    "#383A59",
+    "#BD93F9"
+  ],
+  [
+    "monokai-pro",
+    "#78DCE8",
+    "#A9DC76",
+    "#AB9DF2",
+    "#FFD866",
+    "#FF6188",
+    "#FF0000",
+    "#727072",
+    "#FCFCFA",
+    "#FFFFFF",
+    "#403E41",
+    "#2D2A2E",
+    "#78DCE8"
+  ],
+  [
+    "solarized-dark",
+    "#268BD2",
+    "#859900",
+    "#D33682",
+    "#B58900",
+    "#DC322F",
+    "#FF0000",
+    "#586E75",
+    "#839496",
+    "#FDF6E3",
+    "#073642",
+    "#002B36",
+    "#268BD2"
+  ],
+  [
+    "solarized-light",
+    "#268BD2",
+    "#859900",
+    "#D33682",
+    "#B58900",
+    "#DC322F",
+    "#FF0000",
+    "#93A1A1",
+    "#657B83",
+    "#002B36",
+    "#EEE8D5",
+    "#FDF6E3",
+    "#268BD2"
+  ],
+  [
+    "nord",
+    "#88C0D0",
+    "#A3BE8C",
+    "#B48EAD",
+    "#EBCB8B",
+    "#BF616A",
+    "#FF0000",
+    "#4C566A",
+    "#D8DEE9",
+    "#ECEFF4",
+    "#3B4252",
+    "#2E3440",
+    "#88C0D0"
+  ],
+  [
+    "gruvbox-dark",
+    "#83A598",
+    "#B8BB26",
+    "#D3869B",
+    "#FABD2F",
+    "#FB4934",
+    "#FF0000",
+    "#928374",
+    "#EBDBB2",
+    "#FBF1C7",
+    "#3C3836",
+    "#282828",
+    "#83A598"
+  ],
+  [
+    "tokyo-night",
+    "#7AA2F7",
+    "#9ECE6A",
+    "#BB9AF7",
+    "#E0AF68",
+    "#F7768E",
+    "#FF0000",
+    "#565F89",
+    "#A9B1D6",
+    "#C0CAF5",
+    "#292E42",
+    "#1A1B26",
+    "#7AA2F7"
+  ],
+  [
+    "catppuccin-mocha",
+    "#89B4FA",
+    "#A6E3A1",
+    "#CBA6F7",
+    "#F9E2AF",
+    "#F38BA8",
+    "#FF0000",
+    "#6C7086",
+    "#CDD6F4",
+    "#FFFFFF",
+    "#313244",
+    "#1E1E2E",
+    "#89B4FA"
+  ],
+  [
+    "catppuccin-latte",
+    "#1E66F5",
+    "#40A02B",
+    "#8839EF",
+    "#DF8E1D",
+    "#D20F39",
+    "#FF0000",
+    "#9CA0B0",
+    "#4C4F69",
+    "#11111B",
+    "#E6E9EF",
+    "#EFF1F5",
+    "#1E66F5"
+  ],
+  [
+    "rose-pine",
+    "#9CCFD8",
+    "#31748F",
+    "#C4A7E7",
+    "#F6C177",
+    "#EB6F92",
+    "#FF0000",
+    "#6E6A86",
+    "#E0DEF4",
+    "#E0DEF4",
+    "#26233A",
+    "#191724",
+    "#9CCFD8"
+  ],
+  [
+    "rose-pine-moon",
+    "#9CCFD8",
+    "#3E8FB0",
+    "#C4A7E7",
+    "#F6C177",
+    "#EB6F92",
+    "#FF0000",
+    "#6E6A86",
+    "#E0DEF4",
+    "#E0DEF4",
+    "#2A273F",
+    "#232136",
+    "#9CCFD8"
+  ],
+  [
+    "pastel-dark",
+    "#89CFF0",
+    "#77DD77",
+    "#FDCFE8",
+    "#FFD580",
+    "#FF6961",
+    "#FF0000",
+    "#7B8794",
+    "#D4D4D4",
+    "#FFFFFF",
+    "#3A3A4A",
+    "#2B2B3A",
+    "#89CFF0"
+  ],
+  [
+    "kanagawa",
+    "#7E9CD8",
+    "#76946A",
+    "#957FB8",
+    "#E6C384",
+    "#C34043",
+    "#FF0000",
+    "#727169",
+    "#DCD7BA",
+    "#FFFFFF",
+    "#2A2A37",
+    "#1F1F28",
+    "#7E9CD8"
+  ],
+  [
+    "everforest",
+    "#7FBBB3",
+    "#A7C080",
+    "#D699B6",
+    "#DBBC7F",
+    "#E67E80",
+    "#FF0000",
+    "#859289",
+    "#D3C6AA",
+    "#FFFFFF",
+    "#374145",
+    "#2D353B",
+    "#7FBBB3"
+  ]
+];
+var BUILTIN_THEMES = PRESETS.map(fromTuple);
+var getDefaultTheme = () => BUILTIN_THEMES[0];
+var getAllThemes = (customThemes) => [
+  ...BUILTIN_THEMES,
+  ...Object.values(customThemes).map((t) => ({ ...t, builtin: false }))
+];
+var resolveTheme = (name, customThemes) => {
+  const builtin = BUILTIN_THEMES.find((t) => t.name === name);
+  if (builtin) return builtin;
+  const custom = customThemes[name];
+  if (custom) return { ...custom, builtin: false };
+  return getDefaultTheme();
+};
+var deriveSeverityColors = (c) => ({
+  info: c.muted,
+  warn: c.warning,
+  high: c.error,
+  critical: c.critical
+});
 
 // src/hooks/installer.ts
 import { existsSync, readFileSync, writeFileSync, copyFileSync, mkdirSync, chmodSync } from "fs";
@@ -229,6 +551,11 @@ var toolColors = {
   WebSearch: colors.warning
 };
 var getToolColor = (toolName) => toolColors[toolName] || colors.text;
+var applyTheme = (theme) => {
+  Object.assign(colors, theme.colors);
+  Object.assign(toolColors, theme.toolColors);
+  Object.assign(severityColors, deriveSeverityColors(theme.colors));
+};
 
 // src/ui/components/StatusBar.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -286,76 +613,82 @@ var formatTokens = (n) => {
 var truncate = (s, max) => s.length > max ? s.slice(0, max - 1) + "\u2026" : s;
 var SIDEBAR_WIDTH = 28;
 var INNER_WIDTH = SIDEBAR_WIDTH - 4;
-var SessionList = React2.memo(({ sessions, selectedIndex, focused, filter }) => {
-  return /* @__PURE__ */ jsxs2(
-    Box2,
-    {
-      flexDirection: "column",
-      width: SIDEBAR_WIDTH,
-      borderStyle: "single",
-      borderColor: focused ? colors.primary : colors.border,
-      overflow: "hidden",
-      children: [
-        /* @__PURE__ */ jsxs2(Box2, { paddingX: 1, children: [
-          /* @__PURE__ */ jsx2(Text2, { color: colors.header, bold: true, children: "SESSIONS" }),
-          filter && /* @__PURE__ */ jsxs2(Text2, { color: colors.muted, children: [
-            " [",
-            truncate(filter, 10),
-            "]"
-          ] })
-        ] }),
-        sessions.length === 0 && /* @__PURE__ */ jsx2(Box2, { paddingX: 1, paddingY: 1, children: /* @__PURE__ */ jsx2(Text2, { color: colors.muted, italic: true, children: filter ? "No matches" : "No sessions" }) }),
-        sessions.map((session, i) => {
-          const isSelected = i === selectedIndex;
-          const indicator = isSelected ? ">" : " ";
-          const nameMaxLen = INNER_WIDTH - 2;
-          const displayName = truncate(session.nickname || session.slug, nameMaxLen);
-          const totalIn = session.usage.inputTokens + session.usage.cacheReadTokens;
-          const proj = formatProject(session.project, 12);
-          const model = formatModel(session.model);
-          return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", paddingX: 1, paddingY: 0, children: [
-            /* @__PURE__ */ jsxs2(
-              Text2,
-              {
-                color: isSelected ? colors.bright : colors.text,
-                bold: isSelected,
-                backgroundColor: isSelected ? colors.selected : void 0,
-                wrap: "truncate",
-                children: [
-                  indicator,
-                  " ",
-                  displayName
-                ]
-              }
-            ),
-            session.nickname && /* @__PURE__ */ jsxs2(Text2, { color: colors.muted, wrap: "truncate", children: [
-              "  ",
-              truncate(session.slug, nameMaxLen)
-            ] }),
-            /* @__PURE__ */ jsxs2(Text2, { color: colors.muted, wrap: "truncate", children: [
-              "  ",
-              proj,
-              " ",
-              model,
-              " ",
-              session.agentCount,
-              "ag"
-            ] }),
-            /* @__PURE__ */ jsxs2(Text2, { color: colors.muted, wrap: "truncate", children: [
-              "  ",
-              formatTokens(totalIn),
-              "in ",
-              formatTokens(session.usage.outputTokens),
-              "out ",
-              session.cpu,
-              "%"
+var SessionList = React2.memo(
+  ({ sessions, selectedIndex, focused, filter, viewingArchive }) => {
+    const divider = "-".repeat(INNER_WIDTH);
+    return /* @__PURE__ */ jsxs2(
+      Box2,
+      {
+        flexDirection: "column",
+        width: SIDEBAR_WIDTH,
+        borderStyle: "single",
+        borderColor: focused ? colors.primary : colors.border,
+        overflow: "hidden",
+        children: [
+          /* @__PURE__ */ jsxs2(Box2, { paddingX: 1, children: [
+            /* @__PURE__ */ jsx2(Text2, { color: viewingArchive ? colors.warning : colors.header, bold: true, children: viewingArchive ? "ARCHIVE" : "SESSIONS" }),
+            filter && /* @__PURE__ */ jsxs2(Text2, { color: colors.muted, children: [
+              " [",
+              truncate(filter, 10),
+              "]"
             ] })
-          ] }, session.sessionId);
-        })
-      ]
-    }
-  );
-});
+          ] }),
+          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 sessions" : "No sessions" }) }),
+          sessions.map((session, i) => {
+            const isSelected = i === selectedIndex;
+            const indicator = isSelected ? ">" : " ";
+            const nameMaxLen = INNER_WIDTH - 2;
+            const displayName = truncate(session.nickname || session.slug, nameMaxLen);
+            const totalIn = session.usage.inputTokens + session.usage.cacheReadTokens;
+            const proj = formatProject(session.project, 12);
+            const model = formatModel(session.model);
+            const isActive = session.pid !== null;
+            const nameColor = isSelected ? colors.bright : isActive ? colors.secondary : colors.error;
+            return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", paddingX: 1, paddingY: 0, children: [
+              i > 0 && /* @__PURE__ */ jsx2(Text2, { color: colors.border, wrap: "truncate", children: divider }),
+              /* @__PURE__ */ jsxs2(
+                Text2,
+                {
+                  color: nameColor,
+                  bold: isSelected,
+                  backgroundColor: isSelected ? colors.selected : void 0,
+                  wrap: "truncate",
+                  children: [
+                    indicator,
+                    " ",
+                    displayName
+                  ]
+                }
+              ),
+              session.nickname && /* @__PURE__ */ jsxs2(Text2, { color: colors.muted, wrap: "truncate", children: [
+                "    ",
+                truncate(session.slug, nameMaxLen)
+              ] }),
+              /* @__PURE__ */ jsxs2(Text2, { color: colors.muted, wrap: "truncate", children: [
+                "    ",
+                proj,
+                " ",
+                model,
+                " ",
+                session.agentCount,
+                "ag"
+              ] }),
+              /* @__PURE__ */ jsxs2(Text2, { color: colors.muted, wrap: "truncate", children: [
+                "    ",
+                formatTokens(totalIn),
+                "in ",
+                formatTokens(session.usage.outputTokens),
+                "out ",
+                session.cpu,
+                "%"
+              ] })
+            ] }, session.sessionId);
+          })
+        ]
+      }
+    );
+  }
+);
 
 // src/ui/components/ActivityFeed.tsx
 import React3 from "react";
@@ -388,7 +721,7 @@ var summarizeInput = (call) => {
   }
 };
 var ActivityFeed = React3.memo(
-  ({ events, sessionSlug, focused, height, scrollOffset }) => {
+  ({ events, sessionSlug, focused, height, scrollOffset, filter }) => {
     const viewportRows = height - 2;
     const totalEvents = events.length;
     const start = Math.max(0, totalEvents - viewportRows - scrollOffset);
@@ -412,6 +745,11 @@ var ActivityFeed = React3.memo(
                 " (",
                 sessionSlug,
                 ")"
+              ] }),
+              filter && /* @__PURE__ */ jsxs3(Text3, { color: colors.muted, children: [
+                " [",
+                filter.length > 10 ? filter.slice(0, 9) + "\u2026" : filter,
+                "]"
               ] })
             ] }),
             focused && canScroll && !isAtBottom && /* @__PURE__ */ jsxs3(Text3, { color: colors.muted, children: [
@@ -662,49 +1000,81 @@ var SetupModal = React6.memo(({ steps, onComplete }) => {
 // src/ui/components/FooterBar.tsx
 import React7 from "react";
 import { Box as Box7, Text as Text7 } from "ink";
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 var label = (key) => {
   if (key === "tab") return "tab";
   if (key === "shift+tab") return "S-tab";
   if (key === "enter") return "enter";
   return key;
 };
-var FooterBar = React7.memo(({ keybindings, updateStatus }) => /* @__PURE__ */ jsxs7(Box7, { paddingX: 1, children: [
-  /* @__PURE__ */ jsx7(Box7, { marginRight: 2, children: /* @__PURE__ */ jsxs7(Text7, { color: "#5C6370", children: [
-    label(keybindings.quit),
-    ":quit"
-  ] }) }),
-  /* @__PURE__ */ jsx7(Box7, { marginRight: 2, children: /* @__PURE__ */ jsxs7(Text7, { color: "#5C6370", children: [
-    label(keybindings.navDown),
-    "/",
-    label(keybindings.navUp),
-    ":nav"
-  ] }) }),
-  /* @__PURE__ */ jsx7(Box7, { marginRight: 2, children: /* @__PURE__ */ jsxs7(Text7, { color: "#5C6370", children: [
-    label(keybindings.panelNext),
-    ":panel"
-  ] }) }),
-  /* @__PURE__ */ jsx7(Box7, { marginRight: 2, children: /* @__PURE__ */ jsxs7(Text7, { color: "#5C6370", children: [
-    label(keybindings.filter),
-    ":filter"
-  ] }) }),
-  /* @__PURE__ */ jsx7(Box7, { marginRight: 2, children: /* @__PURE__ */ jsxs7(Text7, { color: "#5C6370", children: [
-    label(keybindings.nickname),
-    ":name"
-  ] }) }),
-  /* @__PURE__ */ jsx7(Box7, { marginRight: 2, children: /* @__PURE__ */ jsxs7(Text7, { color: "#5C6370", children: [
-    label(keybindings.detail),
-    ":detail"
-  ] }) }),
-  /* @__PURE__ */ jsx7(Box7, { marginRight: 2, children: /* @__PURE__ */ jsxs7(Text7, { color: "#5C6370", children: [
-    label(keybindings.settings),
-    ":settings"
-  ] }) }),
-  updateStatus && /* @__PURE__ */ jsx7(Box7, { marginRight: 2, children: /* @__PURE__ */ jsx7(Text7, { color: colors.secondary, children: updateStatus }) })
-] }));
+var FooterBar = React7.memo(
+  ({ keybindings, updateStatus, viewingArchive, splitMode }) => /* @__PURE__ */ jsxs7(Box7, { paddingX: 1, children: [
+    /* @__PURE__ */ jsx7(Box7, { marginRight: 2, children: /* @__PURE__ */ jsxs7(Text7, { color: colors.muted, children: [
+      label(keybindings.quit),
+      ":quit"
+    ] }) }),
+    /* @__PURE__ */ jsx7(Box7, { marginRight: 2, children: /* @__PURE__ */ jsxs7(Text7, { color: colors.muted, children: [
+      label(keybindings.navDown),
+      "/",
+      label(keybindings.navUp),
+      ":nav"
+    ] }) }),
+    /* @__PURE__ */ jsx7(Box7, { marginRight: 2, children: /* @__PURE__ */ jsxs7(Text7, { color: colors.muted, children: [
+      label(keybindings.panelNext),
+      ":panel"
+    ] }) }),
+    /* @__PURE__ */ jsx7(Box7, { marginRight: 2, children: /* @__PURE__ */ jsxs7(Text7, { color: colors.muted, children: [
+      label(keybindings.filter),
+      ":filter"
+    ] }) }),
+    /* @__PURE__ */ jsx7(Box7, { marginRight: 2, children: /* @__PURE__ */ jsxs7(Text7, { color: colors.muted, children: [
+      label(keybindings.nickname),
+      ":name"
+    ] }) }),
+    /* @__PURE__ */ jsx7(Box7, { marginRight: 2, children: /* @__PURE__ */ jsxs7(Text7, { color: colors.muted, children: [
+      label(keybindings.detail),
+      ":detail"
+    ] }) }),
+    /* @__PURE__ */ jsx7(Box7, { marginRight: 2, children: /* @__PURE__ */ jsxs7(Text7, { color: colors.muted, children: [
+      label(keybindings.split),
+      ":",
+      splitMode ? "unsplit" : "split"
+    ] }) }),
+    splitMode && /* @__PURE__ */ jsxs7(Fragment, { children: [
+      /* @__PURE__ */ jsx7(Box7, { marginRight: 2, children: /* @__PURE__ */ jsxs7(Text7, { color: colors.muted, children: [
+        label(keybindings.pinLeft),
+        "/",
+        label(keybindings.pinRight),
+        ":pin"
+      ] }) }),
+      /* @__PURE__ */ jsx7(Box7, { marginRight: 2, children: /* @__PURE__ */ jsxs7(Text7, { color: colors.muted, children: [
+        label(keybindings.swapPanels),
+        ":swap"
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx7(Box7, { marginRight: 2, children: /* @__PURE__ */ jsxs7(Text7, { color: colors.muted, children: [
+      label(keybindings.archive),
+      ":",
+      viewingArchive ? "restore" : "archive"
+    ] }) }),
+    /* @__PURE__ */ jsx7(Box7, { marginRight: 2, children: /* @__PURE__ */ jsxs7(Text7, { color: colors.muted, children: [
+      label(keybindings.delete),
+      ":delete"
+    ] }) }),
+    /* @__PURE__ */ jsx7(Box7, { marginRight: 2, children: /* @__PURE__ */ jsxs7(Text7, { color: colors.muted, children: [
+      label(keybindings.viewArchive),
+      ":archived"
+    ] }) }),
+    /* @__PURE__ */ jsx7(Box7, { marginRight: 2, children: /* @__PURE__ */ jsxs7(Text7, { color: colors.muted, children: [
+      label(keybindings.settings),
+      ":settings"
+    ] }) }),
+    updateStatus && /* @__PURE__ */ jsx7(Box7, { marginRight: 2, children: /* @__PURE__ */ jsx7(Text7, { color: colors.secondary, children: updateStatus }) })
+  ] })
+);
 
 // src/ui/components/SettingsMenu.tsx
-import React8, { useState as useState3, useMemo } from "react";
+import React8, { useState as useState3, useMemo, useEffect as useEffect2, useRef } from "react";
 import { Box as Box8, Text as Text8, useInput as useInput2, useStdout } from "ink";
 import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 var KEYBIND_LABELS = {
@@ -715,12 +1085,20 @@ var KEYBIND_LABELS = {
   panelPrev: "Previous panel",
   scrollTop: "Scroll to top",
   scrollBottom: "Scroll to bottom",
-  filter: "Filter sessions",
+  filter: "Filter",
   nickname: "Set nickname",
   clearNickname: "Clear nickname",
   detail: "Detail view",
   update: "Install update",
-  settings: "Settings"
+  settings: "Settings",
+  archive: "Archive session",
+  delete: "Delete session",
+  viewArchive: "View archive",
+  split: "Toggle split view",
+  pinLeft: "Pin to left panel",
+  pinRight: "Pin to right panel",
+  swapPanels: "Swap panels",
+  closePanel: "Close panel"
 };
 var RULE_LABELS = {
   network: "Network detection",
@@ -729,7 +1107,32 @@ var RULE_LABELS = {
   shellEscape: "Shell escape",
   injection: "Prompt injection"
 };
+var DEFAULT_KEYBINDINGS = {
+  quit: "q",
+  navUp: "k",
+  navDown: "j",
+  panelNext: "tab",
+  panelPrev: "shift+tab",
+  scrollTop: "g",
+  scrollBottom: "G",
+  filter: "/",
+  nickname: "n",
+  clearNickname: "N",
+  detail: "enter",
+  update: "u",
+  settings: "s",
+  archive: "a",
+  delete: "d",
+  viewArchive: "A",
+  split: "x",
+  pinLeft: "1",
+  pinRight: "2",
+  swapPanels: "S",
+  closePanel: "X"
+};
 var SEVERITY_OPTIONS = ["info", "warn", "high", "critical"];
+var ARCHIVE_EXPIRY_OPTIONS = [0, 7, 14, 30, 60, 90];
+var formatExpiry = (days) => days === 0 ? "never" : `${days}d`;
 var displayKey = (key) => {
   if (key === "tab") return "tab";
   if (key === "shift+tab") return "S-tab";
@@ -738,6 +1141,27 @@ var displayKey = (key) => {
 };
 var buildMenuItems = () => {
   const items = [];
+  items.push({ type: "header", label: "THEMES", section: "themes", getValue: () => "", key: void 0 });
+  items.push({
+    type: "action",
+    label: "Manage themes...",
+    section: "themes",
+    key: "manageThemes",
+    getValue: (cfg) => cfg.theme,
+    apply: void 0
+  });
+  items.push({ type: "header", label: "GENERAL", section: "general", getValue: () => "", key: void 0 });
+  items.push({
+    type: "cycle",
+    label: "Archive expiry",
+    section: "general",
+    key: "archiveExpiryDays",
+    getValue: (cfg) => formatExpiry(cfg.archiveExpiryDays),
+    apply: (cfg) => {
+      const idx = ARCHIVE_EXPIRY_OPTIONS.indexOf(cfg.archiveExpiryDays);
+      return { ...cfg, archiveExpiryDays: ARCHIVE_EXPIRY_OPTIONS[(idx + 1) % ARCHIVE_EXPIRY_OPTIONS.length] };
+    }
+  });
   items.push({ type: "header", label: "KEYBINDINGS", section: "keybindings", getValue: () => "", key: void 0 });
   for (const [k, label2] of Object.entries(KEYBIND_LABELS)) {
     const kbKey = k;
@@ -747,12 +1171,17 @@ var buildMenuItems = () => {
       section: "keybindings",
       key: kbKey,
       getValue: (cfg) => displayKey(cfg.keybindings[kbKey]),
-      apply: (cfg, newValue) => ({
-        ...cfg,
-        keybindings: { ...cfg.keybindings, [kbKey]: newValue }
-      })
+      apply: (cfg, newValue) => ({ ...cfg, keybindings: { ...cfg.keybindings, [kbKey]: newValue } })
     });
   }
+  items.push({
+    type: "action",
+    label: "Reset all keybindings",
+    section: "keybindings",
+    key: "resetAllKeybinds",
+    getValue: () => "",
+    apply: (cfg) => ({ ...cfg, keybindings: { ...DEFAULT_KEYBINDINGS } })
+  });
   items.push({ type: "header", label: "SECURITY RULES", section: "security", getValue: () => "", key: void 0 });
   for (const [k, label2] of Object.entries(RULE_LABELS)) {
     const ruleKey = k;
@@ -764,30 +1193,18 @@ var buildMenuItems = () => {
       getValue: (cfg) => cfg.security.rules[ruleKey] ? "ON" : "OFF",
       apply: (cfg) => ({
         ...cfg,
-        security: {
-          ...cfg.security,
-          rules: { ...cfg.security.rules, [ruleKey]: !cfg.security.rules[ruleKey] }
-        }
+        security: { ...cfg.security, rules: { ...cfg.security.rules, [ruleKey]: !cfg.security.rules[ruleKey] } }
       })
     });
   }
-  items.push({
-    type: "header",
-    label: "NOTIFICATIONS",
-    section: "notifications",
-    getValue: () => "",
-    key: void 0
-  });
+  items.push({ type: "header", label: "NOTIFICATIONS", section: "notifications", getValue: () => "", key: void 0 });
   items.push({
     type: "toggle",
     label: "Terminal bell",
     section: "notifications",
     key: "bell",
     getValue: (cfg) => cfg.notifications.bell ? "ON" : "OFF",
-    apply: (cfg) => ({
-      ...cfg,
-      notifications: { ...cfg.notifications, bell: !cfg.notifications.bell }
-    })
+    apply: (cfg) => ({ ...cfg, notifications: { ...cfg.notifications, bell: !cfg.notifications.bell } })
   });
   items.push({
     type: "toggle",
@@ -795,10 +1212,7 @@ var buildMenuItems = () => {
     section: "notifications",
     key: "desktop",
     getValue: (cfg) => cfg.notifications.desktop ? "ON" : "OFF",
-    apply: (cfg) => ({
-      ...cfg,
-      notifications: { ...cfg.notifications, desktop: !cfg.notifications.desktop }
-    })
+    apply: (cfg) => ({ ...cfg, notifications: { ...cfg.notifications, desktop: !cfg.notifications.desktop } })
   });
   items.push({
     type: "cycle",
@@ -808,20 +1222,35 @@ var buildMenuItems = () => {
     getValue: (cfg) => cfg.notifications.minSeverity,
     apply: (cfg) => {
       const idx = SEVERITY_OPTIONS.indexOf(cfg.notifications.minSeverity);
-      const next = SEVERITY_OPTIONS[(idx + 1) % SEVERITY_OPTIONS.length];
-      return { ...cfg, notifications: { ...cfg.notifications, minSeverity: next } };
+      return {
+        ...cfg,
+        notifications: { ...cfg.notifications, minSeverity: SEVERITY_OPTIONS[(idx + 1) % SEVERITY_OPTIONS.length] }
+      };
     }
   });
   return items;
 };
 var MENU_ITEMS = buildMenuItems();
 var SELECTABLE_INDICES = MENU_ITEMS.map((item, i) => item.type !== "header" ? i : -1).filter((i) => i >= 0);
-var SettingsMenu = React8.memo(({ config, onClose }) => {
+var SettingsMenu = React8.memo(({ config, onClose, onOpenThemeMenu }) => {
   const { stdout } = useStdout();
   const termHeight = stdout?.rows ?? 40;
   const [localConfig, setLocalConfig] = useState3(() => JSON.parse(JSON.stringify(config)));
   const [selectablePos, setSelectablePos] = useState3(0);
   const [rebinding, setRebinding] = useState3(false);
+  const [toast, setToast] = useState3("");
+  const toastTimer = useRef(null);
+  const showToast = (msg) => {
+    if (toastTimer.current) clearTimeout(toastTimer.current);
+    setToast(msg);
+    toastTimer.current = setTimeout(() => setToast(""), 2500);
+  };
+  useEffect2(
+    () => () => {
+      if (toastTimer.current) clearTimeout(toastTimer.current);
+    },
+    []
+  );
   const selectedIndex = SELECTABLE_INDICES[selectablePos];
   const maxLabelLen = useMemo(
     () => Math.max(...MENU_ITEMS.filter((i) => i.type !== "header").map((i) => i.label.length)),
@@ -837,11 +1266,24 @@ var SettingsMenu = React8.memo(({ config, onClose }) => {
       else if (key.escape) {
         setRebinding(false);
         return;
+      } else if (key.backspace || key.delete) {
+        const kbKey2 = item.key;
+        const defaultVal = DEFAULT_KEYBINDINGS[kbKey2];
+        if (item.apply) setLocalConfig((c) => item.apply(c, defaultVal));
+        showToast(`Reset to default: ${displayKey(defaultVal)}`);
+        setRebinding(false);
+        return;
       } else if (input && input.length === 1) newKey = input;
       else return;
-      if (item.apply) {
-        setLocalConfig((c) => item.apply(c, newKey));
+      const kbKey = item.key;
+      const conflict = Object.entries(localConfig.keybindings).find(([k, v]) => k !== kbKey && v === newKey);
+      if (conflict) {
+        const conflictLabel = KEYBIND_LABELS[conflict[0]] || conflict[0];
+        showToast(`'${displayKey(newKey)}' is already assigned to '${conflictLabel}'`);
+        setRebinding(false);
+        return;
       }
+      if (item.apply) setLocalConfig((c) => item.apply(c, newKey));
       setRebinding(false);
       return;
     }
@@ -859,11 +1301,17 @@ var SettingsMenu = React8.memo(({ config, onClose }) => {
     }
     if (key.return) {
       const item = MENU_ITEMS[selectedIndex];
-      if (item.type === "keybind") {
-        setRebinding(true);
-      } else if (item.apply) {
-        setLocalConfig((c) => item.apply(c));
+      if (item.key === "manageThemes") {
+        onOpenThemeMenu();
+        return;
+      }
+      if (item.key === "resetAllKeybinds") {
+        if (item.apply) setLocalConfig((c) => item.apply(c));
+        showToast("All keybindings reset to defaults");
+        return;
       }
+      if (item.type === "keybind") setRebinding(true);
+      else if (item.apply) setLocalConfig((c) => item.apply(c));
     }
   });
   const contentHeight = termHeight - 6;
@@ -884,7 +1332,10 @@ var SettingsMenu = React8.memo(({ config, onClose }) => {
       children: [
         /* @__PURE__ */ jsxs8(Box8, { justifyContent: "space-between", marginBottom: 1, children: [
           /* @__PURE__ */ jsx8(Text8, { color: colors.header, bold: true, children: "SETTINGS" }),
-          /* @__PURE__ */ jsx8(Text8, { color: colors.muted, children: "esc to save & close" })
+          /* @__PURE__ */ jsxs8(Text8, { color: colors.muted, children: [
+            "esc to save & close ",
+            rebinding ? "| backspace to reset" : ""
+          ] })
         ] }),
         visibleItems.map((item, vi) => {
           const realIndex = visibleStartIndex + vi;
@@ -896,36 +1347,579 @@ var SettingsMenu = React8.memo(({ config, onClose }) => {
             ] }) }, `h-${item.label}`);
           }
           const value = item.getValue(localConfig);
-          const dots = ".".repeat(Math.max(2, maxLabelLen - item.label.length + 4));
           const isRebindingThis = rebinding && isSelected;
           const displayValue = isRebindingThis ? "[press key...]" : value;
           const valueColor = isRebindingThis ? colors.warning : value === "ON" ? colors.secondary : value === "OFF" ? colors.error : colors.bright;
+          const isReset = item.key === "resetAllKeybinds";
+          const dots = isReset ? "" : ".".repeat(Math.max(2, maxLabelLen - item.label.length + 4)) + " ";
           return /* @__PURE__ */ jsxs8(Box8, { children: [
             /* @__PURE__ */ jsxs8(Text8, { color: isSelected ? colors.primary : colors.text, children: [
               isSelected ? "> " : "  ",
-              "  ",
+              " ",
               item.label,
               " ",
-              dots,
-              " "
+              dots
             ] }),
-            /* @__PURE__ */ jsx8(Text8, { color: valueColor, children: displayValue })
+            !isReset && /* @__PURE__ */ jsx8(Text8, { color: valueColor, children: displayValue })
           ] }, `${item.section}-${item.key}`);
-        })
+        }),
+        toast && /* @__PURE__ */ jsx8(Box8, { marginTop: 1, paddingX: 2, children: /* @__PURE__ */ jsx8(Text8, { color: colors.warning, children: toast }) })
+      ]
+    }
+  ) });
+});
+
+// src/ui/components/ThemeMenu.tsx
+import React10, { useState as useState5, useCallback, useRef as useRef2, useEffect as useEffect3 } from "react";
+import { Box as Box10, Text as Text10, useInput as useInput4, useStdout as useStdout2 } from "ink";
+
+// src/ui/components/ThemeEditor.tsx
+import React9, { useState as useState4 } from "react";
+import { Box as Box9, Text as Text9, useInput as useInput3 } from "ink";
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+var ALL_KEYS = [
+  ...COLOR_KEYS.map((key) => ({ group: "colors", key })),
+  ...TOOL_COLOR_KEYS.map((key) => ({ group: "toolColors", key }))
+];
+var isValidHex = (v) => /^#[0-9A-Fa-f]{6}$/.test(v);
+var ThemeEditor = React9.memo(({ theme, onSave, onCancel }) => {
+  const [editColors, setEditColors] = useState4({ ...theme.colors });
+  const [editToolColors, setEditToolColors] = useState4({ ...theme.toolColors });
+  const [selectedIdx, setSelectedIdx] = useState4(0);
+  const [editing, setEditing] = useState4(false);
+  const [inputValue, setInputValue] = useState4("");
+  const currentTarget = ALL_KEYS[selectedIdx];
+  const getCurrentValue = (t) => t.group === "colors" ? editColors[t.key] : editToolColors[t.key];
+  useInput3((input, key) => {
+    if (editing) {
+      if (key.escape) {
+        setEditing(false);
+        setInputValue("");
+        return;
+      }
+      if (key.return) {
+        const val = inputValue.startsWith("#") ? inputValue : `#${inputValue}`;
+        if (isValidHex(val)) {
+          if (currentTarget.group === "colors") {
+            setEditColors((c) => ({ ...c, [currentTarget.key]: val }));
+          } else {
+            setEditToolColors((c) => ({ ...c, [currentTarget.key]: val }));
+          }
+        }
+        setEditing(false);
+        setInputValue("");
+        return;
+      }
+      if (key.backspace || key.delete) {
+        setInputValue((v) => v.slice(0, -1));
+        return;
+      }
+      if (input && input.length === 1 && /[0-9A-Fa-f#]/.test(input)) {
+        setInputValue((v) => v + input);
+      }
+      return;
+    }
+    if (key.escape) {
+      onCancel();
+      return;
+    }
+    if (key.upArrow) {
+      setSelectedIdx((i) => Math.max(0, i - 1));
+      return;
+    }
+    if (key.downArrow) {
+      setSelectedIdx((i) => Math.min(ALL_KEYS.length - 1, i + 1));
+      return;
+    }
+    if (key.return) {
+      setEditing(true);
+      setInputValue(getCurrentValue(currentTarget));
+      return;
+    }
+    if (input === "s" || input === "S") {
+      onSave({ ...theme, colors: editColors, toolColors: editToolColors });
+    }
+  });
+  return /* @__PURE__ */ jsxs9(Box9, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
+    /* @__PURE__ */ jsxs9(Box9, { justifyContent: "space-between", marginBottom: 1, children: [
+      /* @__PURE__ */ jsxs9(Text9, { color: colors.header, bold: true, children: [
+        "EDIT THEME: ",
+        theme.name
+      ] }),
+      /* @__PURE__ */ jsx9(Text9, { color: colors.muted, children: "enter:edit s:save esc:cancel" })
+    ] }),
+    /* @__PURE__ */ jsx9(Box9, { marginBottom: 1, children: /* @__PURE__ */ jsxs9(Text9, { color: colors.accent, bold: true, children: [
+      " ",
+      "COLORS"
+    ] }) }),
+    COLOR_KEYS.map((k, i) => {
+      const isSelected = selectedIdx === i;
+      const value = editColors[k];
+      const isEditingThis = editing && isSelected;
+      return /* @__PURE__ */ jsxs9(Box9, { children: [
+        /* @__PURE__ */ jsxs9(Text9, { color: isSelected ? colors.primary : colors.text, children: [
+          isSelected ? "> " : "  ",
+          " ",
+          k.padEnd(12)
+        ] }),
+        /* @__PURE__ */ jsx9(Text9, { color: value, children: isEditingThis ? inputValue + "_" : value }),
+        /* @__PURE__ */ jsxs9(Text9, { color: value, children: [
+          " ",
+          "\u2588\u2588"
+        ] })
+      ] }, k);
+    }),
+    /* @__PURE__ */ jsx9(Box9, { marginTop: 1, marginBottom: 1, children: /* @__PURE__ */ jsxs9(Text9, { color: colors.accent, bold: true, children: [
+      " ",
+      "TOOL COLORS"
+    ] }) }),
+    TOOL_COLOR_KEYS.map((k, i) => {
+      const realIdx = COLOR_KEYS.length + i;
+      const isSelected = selectedIdx === realIdx;
+      const value = editToolColors[k];
+      const isEditingThis = editing && isSelected;
+      return /* @__PURE__ */ jsxs9(Box9, { children: [
+        /* @__PURE__ */ jsxs9(Text9, { color: isSelected ? colors.primary : colors.text, children: [
+          isSelected ? "> " : "  ",
+          " ",
+          k.padEnd(12)
+        ] }),
+        /* @__PURE__ */ jsx9(Text9, { color: value, children: isEditingThis ? inputValue + "_" : value }),
+        /* @__PURE__ */ jsxs9(Text9, { color: value, children: [
+          " ",
+          "\u2588\u2588"
+        ] })
+      ] }, k);
+    })
+  ] });
+});
+
+// src/ui/components/ThemeMenu.tsx
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+var ThemeMenu = React10.memo(({ config, onClose }) => {
+  const { stdout } = useStdout2();
+  const termHeight = stdout?.rows ?? 40;
+  const [localConfig, setLocalConfig] = useState5(() => JSON.parse(JSON.stringify(config)));
+  const [selectedIdx, setSelectedIdx] = useState5(0);
+  const [view, setView] = useState5("list");
+  const [editingTheme, setEditingTheme] = useState5(null);
+  const [nameInput, setNameInput] = useState5("");
+  const [namingAction, setNamingAction] = useState5("copy");
+  const [toast, setToast] = useState5("");
+  const toastTimer = useRef2(null);
+  const showToast = (msg) => {
+    if (toastTimer.current) clearTimeout(toastTimer.current);
+    setToast(msg);
+    toastTimer.current = setTimeout(() => setToast(""), 2500);
+  };
+  useEffect3(
+    () => () => {
+      if (toastTimer.current) clearTimeout(toastTimer.current);
+    },
+    []
+  );
+  const themes = getAllThemes(localConfig.customThemes);
+  const previewTheme = useCallback(
+    (idx) => {
+      const t = themes[idx];
+      if (t) applyTheme(t);
+    },
+    [themes]
+  );
+  const updateSelection = useCallback(
+    (newIdx) => {
+      setSelectedIdx(newIdx);
+      previewTheme(newIdx);
+    },
+    [previewTheme]
+  );
+  useInput4((input, key) => {
+    if (view === "naming") {
+      if (key.escape) {
+        setView("list");
+        setNameInput("");
+        return;
+      }
+      if (key.return && nameInput.trim()) {
+        const name = nameInput.trim();
+        if (themes.some((t) => t.name === name)) {
+          showToast(`Theme '${name}' already exists`);
+          return;
+        }
+        if (namingAction === "copy") {
+          const source = themes[selectedIdx];
+          const newTheme = {
+            name,
+            colors: { ...source.colors },
+            toolColors: { ...source.toolColors }
+          };
+          setLocalConfig((c) => ({
+            ...c,
+            theme: name,
+            customThemes: {
+              ...c.customThemes,
+              [name]: { name, colors: newTheme.colors, toolColors: newTheme.toolColors }
+            }
+          }));
+          applyTheme(newTheme);
+          showToast(`Created '${name}'`);
+        } else {
+          const old = themes[selectedIdx];
+          const updated = { ...localConfig.customThemes };
+          delete updated[old.name];
+          updated[name] = { name, colors: old.colors, toolColors: old.toolColors };
+          const newActive = localConfig.theme === old.name ? name : localConfig.theme;
+          setLocalConfig((c) => ({ ...c, theme: newActive, customThemes: updated }));
+          showToast(`Renamed to '${name}'`);
+        }
+        setView("list");
+        setNameInput("");
+        return;
+      }
+      if (key.backspace || key.delete) {
+        setNameInput((v) => v.slice(0, -1));
+        return;
+      }
+      if (input && input.length === 1) setNameInput((v) => v + input);
+      return;
+    }
+    if (view === "editor" && editingTheme) return;
+    if (key.escape) {
+      const restoreTheme = resolveTheme(localConfig.theme, localConfig.customThemes);
+      applyTheme(restoreTheme);
+      onClose(localConfig);
+      return;
+    }
+    if (key.upArrow) {
+      updateSelection(Math.max(0, selectedIdx - 1));
+      return;
+    }
+    if (key.downArrow) {
+      updateSelection(Math.min(themes.length - 1, selectedIdx + 1));
+      return;
+    }
+    if (key.return) {
+      setLocalConfig((c) => ({ ...c, theme: themes[selectedIdx].name }));
+      applyTheme(themes[selectedIdx]);
+      onClose({ ...localConfig, theme: themes[selectedIdx].name });
+      return;
+    }
+    if (input === "c") {
+      setNamingAction("copy");
+      setNameInput(themes[selectedIdx].name + "-custom");
+      setView("naming");
+      return;
+    }
+    const selected = themes[selectedIdx];
+    if (input === "e" && !selected.builtin) {
+      setEditingTheme(selected);
+      setView("editor");
+      return;
+    }
+    if (input === "r" && !selected.builtin) {
+      setNamingAction("rename");
+      setNameInput(selected.name);
+      setView("naming");
+      return;
+    }
+    if (input === "d" && !selected.builtin) {
+      const updated = { ...localConfig.customThemes };
+      delete updated[selected.name];
+      const newTheme = localConfig.theme === selected.name ? "one-dark" : localConfig.theme;
+      setLocalConfig((c) => ({ ...c, theme: newTheme, customThemes: updated }));
+      if (localConfig.theme === selected.name) applyTheme(getDefaultTheme());
+      setSelectedIdx((i) => Math.min(i, themes.length - 2));
+      showToast(`Deleted '${selected.name}'`);
+      return;
+    }
+    if (key.backspace || key.delete) {
+      setLocalConfig((c) => ({ ...c, theme: "one-dark" }));
+      applyTheme(getDefaultTheme());
+      showToast("Restored default theme");
+    }
+  });
+  const handleEditorSave = useCallback((updated) => {
+    setLocalConfig((c) => ({
+      ...c,
+      customThemes: {
+        ...c.customThemes,
+        [updated.name]: { name: updated.name, colors: updated.colors, toolColors: updated.toolColors }
+      }
+    }));
+    applyTheme(updated);
+    setView("list");
+    setEditingTheme(null);
+    showToast(`Saved '${updated.name}'`);
+  }, []);
+  const handleEditorCancel = useCallback(() => {
+    const restoreTheme = resolveTheme(localConfig.theme, localConfig.customThemes);
+    applyTheme(restoreTheme);
+    setView("list");
+    setEditingTheme(null);
+  }, [localConfig]);
+  if (view === "editor" && editingTheme) {
+    return /* @__PURE__ */ jsx10(Box10, { flexDirection: "column", height: termHeight, children: /* @__PURE__ */ jsx10(Box10, { borderStyle: "round", borderColor: colors.primary, flexDirection: "column", height: termHeight, children: /* @__PURE__ */ jsx10(ThemeEditor, { theme: editingTheme, onSave: handleEditorSave, onCancel: handleEditorCancel }) }) });
+  }
+  const contentHeight = termHeight - 8;
+  const halfView = Math.floor(contentHeight / 2);
+  const scrollStart = Math.max(0, Math.min(selectedIdx - halfView, themes.length - contentHeight));
+  const visibleThemes = themes.slice(Math.max(0, scrollStart), Math.max(0, scrollStart) + contentHeight);
+  const visibleStartIdx = Math.max(0, scrollStart);
+  return /* @__PURE__ */ jsx10(Box10, { flexDirection: "column", height: termHeight, children: /* @__PURE__ */ jsxs10(
+    Box10,
+    {
+      borderStyle: "round",
+      borderColor: colors.primary,
+      flexDirection: "column",
+      paddingX: 2,
+      paddingY: 1,
+      height: termHeight,
+      children: [
+        /* @__PURE__ */ jsxs10(Box10, { justifyContent: "space-between", marginBottom: 1, children: [
+          /* @__PURE__ */ jsx10(Text10, { color: colors.header, bold: true, children: "THEMES" }),
+          /* @__PURE__ */ jsx10(Text10, { color: colors.muted, children: "enter:apply c:copy e:edit r:rename d:delete esc:back" })
+        ] }),
+        view === "naming" && /* @__PURE__ */ jsxs10(Box10, { marginBottom: 1, children: [
+          /* @__PURE__ */ jsxs10(Text10, { color: colors.warning, children: [
+            namingAction === "copy" ? "New name" : "Rename to",
+            ": "
+          ] }),
+          /* @__PURE__ */ jsxs10(Text10, { color: colors.bright, children: [
+            nameInput,
+            "_"
+          ] })
+        ] }),
+        visibleThemes.map((theme, vi) => {
+          const realIdx = visibleStartIdx + vi;
+          const isSelected = realIdx === selectedIdx;
+          const isActive = theme.name === localConfig.theme;
+          return /* @__PURE__ */ jsxs10(Box10, { children: [
+            /* @__PURE__ */ jsxs10(Text10, { color: isSelected ? colors.primary : colors.text, children: [
+              isSelected ? "> " : "  ",
+              isActive ? "* " : "  ",
+              theme.name
+            ] }),
+            /* @__PURE__ */ jsx10(Text10, { color: colors.muted, children: theme.builtin ? " (built-in)" : " (custom)" }),
+            /* @__PURE__ */ jsx10(Text10, { children: " " }),
+            /* @__PURE__ */ jsx10(Text10, { color: theme.colors.primary, children: "\u2588" }),
+            /* @__PURE__ */ jsx10(Text10, { color: theme.colors.secondary, children: "\u2588" }),
+            /* @__PURE__ */ jsx10(Text10, { color: theme.colors.accent, children: "\u2588" }),
+            /* @__PURE__ */ jsx10(Text10, { color: theme.colors.warning, children: "\u2588" }),
+            /* @__PURE__ */ jsx10(Text10, { color: theme.colors.error, children: "\u2588" })
+          ] }, theme.name);
+        }),
+        toast && /* @__PURE__ */ jsx10(Box10, { marginTop: 1, paddingX: 2, children: /* @__PURE__ */ jsx10(Text10, { color: colors.warning, children: toast }) })
       ]
     }
   ) });
 });
 
+// src/ui/components/ThemePickerModal.tsx
+import React11, { useState as useState6, useEffect as useEffect4 } from "react";
+import { Box as Box11, Text as Text11, useInput as useInput5 } from "ink";
+import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+var ThemePickerModal = React11.memo(({ onSelect, onSkip, onDismiss }) => {
+  const [selectedIndex, setSelectedIndex] = useState6(0);
+  const themes = BUILTIN_THEMES;
+  useEffect4(() => {
+    applyTheme(themes[selectedIndex]);
+  }, [selectedIndex]);
+  useInput5((input, key) => {
+    if (key.upArrow) setSelectedIndex((i) => Math.max(0, i - 1));
+    if (key.downArrow) setSelectedIndex((i) => Math.min(themes.length - 1, i + 1));
+    if (key.return) onSelect(themes[selectedIndex].name);
+    if (input === "n") onSkip();
+    if (input === "d") onDismiss();
+  });
+  const renderSwatch = (theme) => {
+    const c = theme.colors;
+    return /* @__PURE__ */ jsxs11(Text11, { children: [
+      /* @__PURE__ */ jsx11(Text11, { color: c.primary, children: "\u2588" }),
+      /* @__PURE__ */ jsx11(Text11, { color: c.secondary, children: "\u2588" }),
+      /* @__PURE__ */ jsx11(Text11, { color: c.accent, children: "\u2588" }),
+      /* @__PURE__ */ jsx11(Text11, { color: c.warning, children: "\u2588" }),
+      /* @__PURE__ */ jsx11(Text11, { color: c.error, children: "\u2588" })
+    ] });
+  };
+  return /* @__PURE__ */ jsx11(Box11, { flexDirection: "column", paddingX: 4, paddingY: 1, children: /* @__PURE__ */ jsxs11(Box11, { borderStyle: "round", borderColor: colors.primary, flexDirection: "column", paddingX: 3, paddingY: 1, children: [
+    /* @__PURE__ */ jsx11(Box11, { marginBottom: 1, children: /* @__PURE__ */ jsx11(Text11, { color: colors.header, bold: true, children: "Choose a theme" }) }),
+    /* @__PURE__ */ jsx11(Box11, { marginBottom: 1, children: /* @__PURE__ */ jsx11(Text11, { color: colors.text, children: "Select a theme to get started. You can change this later in settings (s)." }) }),
+    themes.map((theme, i) => /* @__PURE__ */ jsxs11(Box11, { children: [
+      /* @__PURE__ */ jsx11(Text11, { color: i === selectedIndex ? colors.primary : colors.muted, children: i === selectedIndex ? "> " : "  " }),
+      renderSwatch(theme),
+      /* @__PURE__ */ jsxs11(Text11, { color: i === selectedIndex ? colors.bright : colors.text, children: [
+        " ",
+        theme.name
+      ] })
+    ] }, theme.name)),
+    /* @__PURE__ */ jsx11(Box11, { marginTop: 1, flexDirection: "column", children: /* @__PURE__ */ jsx11(Text11, { color: colors.muted, children: "Enter = select | n = not now | d = don't ask again" }) })
+  ] }) });
+});
+
+// src/ui/components/GuidedTour.tsx
+import React12, { useState as useState7 } from "react";
+import { Box as Box12, Text as Text12, useInput as useInput6 } from "ink";
+import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+var STEPS = [
+  {
+    title: "Session list",
+    body: "The left panel shows all active Claude Code sessions. Use j/k to navigate and Enter to view details."
+  },
+  {
+    title: "Activity feed",
+    body: "The right panel streams tool calls in real-time. Press Tab to switch between panels."
+  },
+  {
+    title: "Split view",
+    body: "Press x to split the activity panel. Pin sessions to left (1) or right (2) panels. Press S to swap."
+  },
+  {
+    title: "Filtering",
+    body: "Press / to filter sessions or activity by keyword. Works in any panel."
+  },
+  {
+    title: "Session management",
+    body: "Press n to nickname a session, a to archive it, d to delete it. Press A to view archived sessions."
+  },
+  {
+    title: "Security alerts",
+    body: "The alert bar highlights suspicious tool calls like network access or sensitive file reads."
+  },
+  {
+    title: "Themes & settings",
+    body: "Press s to open settings. Customise keybindings, manage themes, and configure updates."
+  }
+];
+var GuidedTour = React12.memo(({ onComplete, onSkip }) => {
+  const [stepIndex, setStepIndex] = useState7(0);
+  const step = STEPS[stepIndex];
+  const isLast = stepIndex === STEPS.length - 1;
+  useInput6((input, key) => {
+    if (key.return || key.rightArrow) {
+      if (isLast) onComplete();
+      else setStepIndex((i) => i + 1);
+    }
+    if (key.leftArrow && stepIndex > 0) setStepIndex((i) => i - 1);
+    if (input === "q" || key.escape) onSkip();
+  });
+  return /* @__PURE__ */ jsx12(Box12, { flexDirection: "column", paddingX: 4, paddingY: 1, children: /* @__PURE__ */ jsxs12(Box12, { borderStyle: "round", borderColor: colors.primary, flexDirection: "column", paddingX: 3, paddingY: 1, children: [
+    /* @__PURE__ */ jsx12(Box12, { marginBottom: 1, children: /* @__PURE__ */ jsxs12(Text12, { color: colors.header, bold: true, children: [
+      "Quick tour (",
+      stepIndex + 1,
+      "/",
+      STEPS.length,
+      ")"
+    ] }) }),
+    /* @__PURE__ */ jsx12(Box12, { marginBottom: 1, children: /* @__PURE__ */ jsx12(Text12, { color: colors.bright, bold: true, children: step.title }) }),
+    /* @__PURE__ */ jsx12(Box12, { marginBottom: 1, children: /* @__PURE__ */ jsx12(Text12, { color: colors.text, children: step.body }) }),
+    /* @__PURE__ */ jsxs12(Text12, { color: colors.muted, children: [
+      isLast ? "Enter = finish" : "Enter/\u2192 = next",
+      " | ",
+      stepIndex > 0 ? "\u2190 = back | " : "",
+      "q = skip tour"
+    ] })
+  ] }) });
+});
+
+// src/ui/components/ConfirmModal.tsx
+import React13 from "react";
+import { Box as Box13, Text as Text13, useInput as useInput7 } from "ink";
+import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
+var ConfirmModal = React13.memo(({ title, message, onConfirm, onCancel }) => {
+  useInput7((input, key) => {
+    if (input === "y" || input === "Y") {
+      onConfirm();
+    } else if (input === "n" || input === "N" || key.escape) {
+      onCancel();
+    }
+  });
+  return /* @__PURE__ */ jsxs13(
+    Box13,
+    {
+      borderStyle: "round",
+      borderColor: colors.warning,
+      flexDirection: "column",
+      paddingX: 2,
+      paddingY: 1,
+      alignSelf: "center",
+      children: [
+        /* @__PURE__ */ jsx13(Text13, { color: colors.warning, bold: true, children: title }),
+        /* @__PURE__ */ jsx13(Text13, { color: colors.text, children: message }),
+        /* @__PURE__ */ jsx13(Box13, { marginTop: 1, children: /* @__PURE__ */ jsx13(Text13, { color: colors.muted, children: "[y] confirm [n/esc] cancel" }) })
+      ]
+    }
+  );
+});
+
+// src/ui/components/SplitPanel.tsx
+import React14 from "react";
+import { Box as Box14 } from "ink";
+import { jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
+var SplitPanel = React14.memo(
+  ({
+    activePanel,
+    leftSession,
+    rightSession,
+    leftEvents,
+    rightEvents,
+    leftScroll,
+    rightScroll,
+    leftFilter,
+    rightFilter,
+    leftShowDetail,
+    rightShowDetail,
+    height
+  }) => {
+    const left = leftShowDetail && leftSession ? /* @__PURE__ */ jsx14(SessionDetail, { session: leftSession, focused: activePanel === "left", height }) : /* @__PURE__ */ jsx14(
+      ActivityFeed,
+      {
+        events: leftEvents,
+        sessionSlug: leftSession?.slug ?? null,
+        focused: activePanel === "left",
+        height,
+        scrollOffset: leftScroll,
+        filter: leftFilter || void 0
+      }
+    );
+    const right = rightShowDetail && rightSession ? /* @__PURE__ */ jsx14(SessionDetail, { session: rightSession, focused: activePanel === "right", height }) : /* @__PURE__ */ jsx14(
+      ActivityFeed,
+      {
+        events: rightEvents,
+        sessionSlug: rightSession?.slug ?? null,
+        focused: activePanel === "right",
+        height,
+        scrollOffset: rightScroll,
+        filter: rightFilter || void 0
+      }
+    );
+    return /* @__PURE__ */ jsxs14(Box14, { flexDirection: "row", flexGrow: 1, children: [
+      /* @__PURE__ */ jsx14(
+        Box14,
+        {
+          flexGrow: 1,
+          borderStyle: "single",
+          borderRight: true,
+          borderTop: false,
+          borderBottom: false,
+          borderLeft: false,
+          borderColor: colors.border,
+          children: left
+        }
+      ),
+      right
+    ] });
+  }
+);
+
 // src/ui/hooks/useSessions.ts
-import { useState as useState4, useEffect as useEffect2, useCallback, useRef } from "react";
+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 useSessions = (allUsers, filter) => {
-  const [sessions, setSessions] = useState4([]);
-  const [selectedIndex, setSelectedIndex] = useState4(0);
-  const usageOverrides = useRef(/* @__PURE__ */ new Map());
-  const refresh = useCallback(() => {
+var useSessions = (allUsers, filter, archivedIds, viewingArchive) => {
+  const [sessions, setSessions] = useState8([]);
+  const [selectedIndex, setSelectedIndex] = useState8(0);
+  const usageOverrides = useRef3(/* @__PURE__ */ new Map());
+  const refresh = useCallback2(() => {
     const found = discoverSessions(allUsers);
     const nicknames = getNicknames();
     const enriched = found.map((s) => {
@@ -942,31 +1936,40 @@ var useSessions = (allUsers, filter) => {
       };
     });
     let filtered = enriched;
+    if (archivedIds && archivedIds.size > 0) {
+      if (viewingArchive) {
+        filtered = filtered.filter((s) => archivedIds.has(s.sessionId));
+      } else {
+        filtered = filtered.filter((s) => !archivedIds.has(s.sessionId));
+      }
+    } else if (viewingArchive) {
+      filtered = [];
+    }
     if (filter) {
       const lower = filter.toLowerCase();
-      filtered = enriched.filter(
+      filtered = filtered.filter(
         (s) => s.slug.toLowerCase().includes(lower) || s.nickname?.toLowerCase().includes(lower) || s.project.toLowerCase().includes(lower) || s.model.toLowerCase().includes(lower)
       );
     }
     setSessions(filtered);
-  }, [allUsers, filter]);
-  useEffect2(() => {
+  }, [allUsers, filter, archivedIds, viewingArchive]);
+  useEffect5(() => {
     refresh();
     const pollMs = sessions.length > 0 ? ACTIVE_POLL_MS : IDLE_POLL_MS;
     const interval = setInterval(refresh, pollMs);
     return () => clearInterval(interval);
   }, [refresh, sessions.length > 0]);
   const selectedSession = sessions[selectedIndex] ?? null;
-  const selectNext = useCallback(() => {
+  const selectNext = useCallback2(() => {
     setSelectedIndex((i) => Math.min(i + 1, Math.max(0, sessions.length - 1)));
   }, [sessions.length]);
-  const selectPrev = useCallback(() => {
+  const selectPrev = useCallback2(() => {
     setSelectedIndex((i) => Math.max(i - 1, 0));
   }, []);
-  const selectIndex = useCallback((i) => {
+  const selectIndex = useCallback2((i) => {
     setSelectedIndex(i);
   }, []);
-  const addUsage = useCallback((sessionId, usage) => {
+  const addUsage = useCallback2((sessionId, usage) => {
     const existing = usageOverrides.current.get(sessionId);
     if (existing) {
       usageOverrides.current.set(sessionId, {
@@ -983,12 +1986,12 @@ var useSessions = (allUsers, filter) => {
 };
 
 // src/ui/hooks/useActivityStream.ts
-import { useState as useState5, useEffect as useEffect3, useRef as useRef2 } from "react";
+import { useState as useState9, useEffect as useEffect6, useRef as useRef4 } from "react";
 var MAX_EVENTS = 200;
 var useActivityStream = (session, allUsers) => {
-  const [events, setEvents] = useState5([]);
-  const watcherRef = useRef2(null);
-  useEffect3(() => {
+  const [events, setEvents] = useState9([]);
+  const watcherRef = useRef4(null);
+  useEffect6(() => {
     setEvents([]);
     if (!session) return;
     const existingCalls = [];
@@ -1014,8 +2017,19 @@ var useActivityStream = (session, allUsers) => {
   return events;
 };
 
+// src/ui/hooks/useFilteredEvents.ts
+import { useMemo as useMemo2 } from "react";
+var applyFilter = (events, filter) => {
+  if (!filter) return events;
+  const lower = filter.toLowerCase();
+  return events.filter(
+    (e) => e.toolName.toLowerCase().includes(lower) || JSON.stringify(e.toolInput).toLowerCase().includes(lower)
+  );
+};
+var useFilteredEvents = (rawEvents, filter) => useMemo2(() => applyFilter(rawEvents, filter), [rawEvents, filter]);
+
 // src/ui/hooks/useAlerts.ts
-import { useState as useState6, useEffect as useEffect4, useRef as useRef3 } from "react";
+import { useState as useState10, useEffect as useEffect7, useRef as useRef5 } from "react";
 
 // src/notifications.ts
 import { exec as exec2 } from "child_process";
@@ -1083,11 +2097,11 @@ var AlertLogger = class {
 // src/ui/hooks/useAlerts.ts
 var MAX_ALERTS = 100;
 var useAlerts = (enabled, alertLevel, allUsers, config) => {
-  const [alerts, setAlerts] = useState6([]);
-  const engineRef = useRef3(new SecurityEngine(alertLevel));
-  const watcherRef = useRef3(null);
-  const loggerRef = useRef3(null);
-  useEffect4(() => {
+  const [alerts, setAlerts] = useState10([]);
+  const engineRef = useRef5(new SecurityEngine(alertLevel));
+  const watcherRef = useRef5(null);
+  const loggerRef = useRef5(null);
+  useEffect7(() => {
     if (!enabled) return;
     engineRef.current = new SecurityEngine(alertLevel);
     if (config?.alerts.enabled) {
@@ -1123,27 +2137,27 @@ var useAlerts = (enabled, alertLevel, allUsers, config) => {
 };
 
 // src/ui/hooks/useTextInput.ts
-import { useState as useState7, useCallback as useCallback2 } from "react";
+import { useState as useState11, useCallback as useCallback3 } from "react";
 var useTextInput = (onConfirm, onCancel) => {
-  const [value, setValue] = useState7("");
-  const [isActive, setIsActive] = useState7(false);
-  const start = useCallback2((initial = "") => {
+  const [value, setValue] = useState11("");
+  const [isActive, setIsActive] = useState11(false);
+  const start = useCallback3((initial = "") => {
     setValue(initial);
     setIsActive(true);
   }, []);
-  const cancel = useCallback2(() => {
+  const cancel = useCallback3(() => {
     setValue("");
     setIsActive(false);
     onCancel?.();
   }, [onCancel]);
-  const confirm = useCallback2(() => {
+  const confirm = useCallback3(() => {
     const result = value;
     setIsActive(false);
     setValue("");
     onConfirm?.(result);
     return result;
   }, [value, onConfirm]);
-  const handleInput = useCallback2(
+  const handleInput = useCallback3(
     (input, key) => {
       if (!isActive) return false;
       if (key.escape) {
@@ -1175,34 +2189,299 @@ var useTextInput = (onConfirm, onCancel) => {
   return { value, isActive, start, cancel, confirm, handleInput };
 };
 
-// src/ui/App.tsx
-import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+// src/ui/hooks/useKeyHandler.ts
+import { useInput as useInput8 } from "ink";
 var matchKey = (binding, input, key) => {
   if (binding === "tab") return Boolean(key.tab);
   if (binding === "shift+tab") return Boolean(key.shift && key.tab);
   if (binding === "enter") return Boolean(key.return);
   return input === binding;
 };
+var useKeyHandler = (deps) => {
+  const d = deps;
+  useInput8((input, key) => {
+    if (d.showSetup || d.showSettings || d.confirmAction) return;
+    if (d.inputMode === "nickname") {
+      d.nicknameInput.handleInput(input, key);
+      return;
+    }
+    if (d.inputMode === "filter") {
+      if (key.escape) {
+        if (d.activePanel === "sessions") d.setFilter("");
+        else if (d.activePanel === "left") d.setLeftFilter("");
+        else if (d.activePanel === "right") d.setRightFilter("");
+        else d.setActivityFilter("");
+        d.setInputMode("normal");
+        d.filterInput.cancel();
+        return;
+      }
+      d.filterInput.handleInput(input, key);
+      return;
+    }
+    if (matchKey(d.kb.quit, input, key)) {
+      d.exit();
+      return;
+    }
+    if (d.showDetail && !d.splitMode) {
+      if (key.escape || key.return || key.leftArrow) d.setShowDetail(false);
+      return;
+    }
+    if (d.splitMode && (d.leftShowDetail || d.rightShowDetail)) {
+      if (key.escape || key.return) {
+        if (d.activePanel === "left") d.setLeftShowDetail(false);
+        else if (d.activePanel === "right") d.setRightShowDetail(false);
+        else {
+          d.setLeftShowDetail(false);
+          d.setRightShowDetail(false);
+        }
+        return;
+      }
+      if (key.leftArrow) {
+        if (d.activePanel === "left") d.setLeftShowDetail(false);
+        else if (d.activePanel === "right") d.setRightShowDetail(false);
+        return;
+      }
+    }
+    if (matchKey(d.kb.split, input, key)) {
+      if (d.splitMode) {
+        d.clearSplitState();
+      } else {
+        d.setSplitMode(true);
+        d.setLeftSession(d.selectedSession);
+        d.setActivePanel("left");
+      }
+      return;
+    }
+    if (d.splitMode && d.activePanel === "sessions" && d.selectedSession) {
+      if (matchKey(d.kb.pinLeft, input, key)) {
+        d.resetPanel("left");
+        d.setLeftSession(d.selectedSession);
+        return;
+      }
+      if (matchKey(d.kb.pinRight, input, key)) {
+        d.resetPanel("right");
+        d.setRightSession(d.selectedSession);
+        return;
+      }
+    }
+    if (d.splitMode && matchKey(d.kb.swapPanels, input, key)) {
+      const tmpLs = d.leftSession;
+      const tmpRs = d.rightSession;
+      d.setLeftSession(tmpRs);
+      d.setRightSession(tmpLs);
+      const tmpScroll = d.leftScroll;
+      d.setLeftScroll(d.rightScroll);
+      d.setRightScroll(tmpScroll);
+      const tmpFilt = d.leftFilter;
+      d.setLeftFilter(d.rightFilter);
+      d.setRightFilter(tmpFilt);
+      const tmpDetail = d.leftShowDetail;
+      d.setLeftShowDetail(d.rightShowDetail);
+      d.setRightShowDetail(tmpDetail);
+      return;
+    }
+    if (d.splitMode && matchKey(d.kb.closePanel, input, key)) {
+      if (d.activePanel === "left") {
+        d.resetPanel("left");
+        if (!d.rightSession) d.clearSplitState();
+      } else if (d.activePanel === "right") {
+        d.resetPanel("right");
+        if (!d.leftSession) d.clearSplitState();
+      }
+      return;
+    }
+    if (matchKey(d.kb.detail, input, key) && d.selectedSession) {
+      if (d.splitMode) {
+        if (d.activePanel === "left") {
+          d.setLeftShowDetail((v) => !v);
+          return;
+        }
+        if (d.activePanel === "right") {
+          d.setRightShowDetail((v) => !v);
+          return;
+        }
+        if (d.activePanel === "sessions") {
+          if (!d.leftSession) {
+            d.setLeftSession(d.selectedSession);
+            d.setLeftShowDetail(true);
+            d.setActivePanel("left");
+          } else if (!d.rightSession) {
+            d.setRightSession(d.selectedSession);
+            d.setRightShowDetail(true);
+            d.setActivePanel("right");
+          }
+          return;
+        }
+      } else if (d.activePanel === "sessions") {
+        d.setShowDetail(true);
+        return;
+      }
+    }
+    if (matchKey(d.kb.panelNext, input, key) || key.rightArrow) {
+      d.switchPanel("next");
+      return;
+    }
+    if (matchKey(d.kb.panelPrev, input, key) || key.leftArrow) {
+      d.switchPanel("prev");
+      return;
+    }
+    if (matchKey(d.kb.nickname, input, key) && d.selectedSession) {
+      d.setInputMode("nickname");
+      d.nicknameInput.start(d.selectedSession.nickname || "");
+      return;
+    }
+    if (matchKey(d.kb.clearNickname, input, key) && d.selectedSession) {
+      d.onClearNickname(d.selectedSession.sessionId);
+      return;
+    }
+    if (matchKey(d.kb.filter, input, key)) {
+      d.setInputMode("filter");
+      d.filterInput.start(d.getActiveFilter());
+      return;
+    }
+    if (key.escape) {
+      if (d.activePanel === "sessions" && d.filter) {
+        d.setFilter("");
+        return;
+      }
+      if (d.activePanel === "activity" && d.activityFilter) {
+        d.setActivityFilter("");
+        return;
+      }
+      if (d.activePanel === "left" && d.leftFilter) {
+        d.setLeftFilter("");
+        return;
+      }
+      if (d.activePanel === "right" && d.rightFilter) {
+        d.setRightFilter("");
+        return;
+      }
+      return;
+    }
+    if (matchKey(d.kb.settings, input, key)) {
+      d.setShowSettings(true);
+      return;
+    }
+    if (matchKey(d.kb.viewArchive, input, key)) {
+      d.setViewingArchive((v) => !v);
+      return;
+    }
+    if (matchKey(d.kb.archive, input, key) && d.selectedSession) {
+      if (d.viewingArchive) d.onUnarchive(d.selectedSession.sessionId);
+      else d.onArchive(d.selectedSession.sessionId);
+      return;
+    }
+    if (matchKey(d.kb.delete, input, key) && d.selectedSession) {
+      d.onDelete(d.selectedSession);
+      return;
+    }
+    if (matchKey(d.kb.update, input, key) && d.updateInfo?.available) {
+      d.onUpdate();
+      return;
+    }
+    if (d.activePanel === "sessions") {
+      if (matchKey(d.kb.navDown, input, key) || key.downArrow) d.selectNext();
+      if (matchKey(d.kb.navUp, input, key) || key.upArrow) d.selectPrev();
+    }
+    if (d.activePanel === "activity") {
+      if (matchKey(d.kb.navUp, input, key) || key.upArrow) d.setActivityScroll((s) => Math.min(s + 1, d.maxScroll));
+      if (matchKey(d.kb.navDown, input, key) || key.downArrow) d.setActivityScroll((s) => Math.max(s - 1, 0));
+      if (matchKey(d.kb.scrollBottom, input, key)) d.setActivityScroll(0);
+      if (matchKey(d.kb.scrollTop, input, key)) d.setActivityScroll(d.maxScroll);
+    }
+    if (d.activePanel === "left") {
+      if (matchKey(d.kb.navUp, input, key) || key.upArrow) d.setLeftScroll((s) => Math.min(s + 1, d.leftMaxScroll));
+      if (matchKey(d.kb.navDown, input, key) || key.downArrow) d.setLeftScroll((s) => Math.max(s - 1, 0));
+      if (matchKey(d.kb.scrollBottom, input, key)) d.setLeftScroll(0);
+      if (matchKey(d.kb.scrollTop, input, key)) d.setLeftScroll(d.leftMaxScroll);
+    }
+    if (d.activePanel === "right") {
+      if (matchKey(d.kb.navUp, input, key) || key.upArrow) d.setRightScroll((s) => Math.min(s + 1, d.rightMaxScroll));
+      if (matchKey(d.kb.navDown, input, key) || key.downArrow) d.setRightScroll((s) => Math.max(s - 1, 0));
+      if (matchKey(d.kb.scrollBottom, input, key)) d.setRightScroll(0);
+      if (matchKey(d.kb.scrollTop, input, key)) d.setRightScroll(d.rightMaxScroll);
+    }
+  });
+};
+
+// src/ui/hooks/useUpdateChecker.ts
+import { useState as useState12, useEffect as useEffect8 } from "react";
+var useUpdateChecker = (disabled, checkOnLaunch, checkInterval) => {
+  const [updateInfo, setUpdateInfo] = useState12(null);
+  useEffect8(() => {
+    if (disabled || !checkOnLaunch) return;
+    try {
+      const i = checkForUpdate();
+      if (i.available) setUpdateInfo(i);
+    } catch {
+    }
+    const iv = setInterval(() => {
+      try {
+        const i = checkForUpdate();
+        if (i.available) setUpdateInfo(i);
+      } catch {
+      }
+    }, checkInterval);
+    return () => clearInterval(iv);
+  }, []);
+  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 } = useStdout2();
+  const { stdout } = useStdout3();
   const termHeight = stdout?.rows ?? 40;
-  const [liveConfig, setLiveConfig] = useState8(initialConfig);
+  const [liveConfig, setLiveConfig] = useState13(initialConfig);
   const kb = liveConfig.keybindings;
-  const [activePanel, setActivePanel] = useState8("sessions");
-  const [activityScroll, setActivityScroll] = useState8(0);
-  const [inputMode, setInputMode] = useState8("normal");
-  const [showSetup, setShowSetup] = useState8(firstRun);
-  const [filter, setFilter] = useState8("");
-  const [updateInfo, setUpdateInfo] = useState8(null);
-  const [updateStatus, setUpdateStatus] = useState8("");
-  const [showDetail, setShowDetail] = useState8(false);
-  const [showSettings, setShowSettings] = useState8(false);
+  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
+    filter || void 0,
+    archivedIds,
+    viewingArchive
   );
-  const events = useActivityStream(selectedSession, options.allUsers);
+  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) => {
@@ -1216,43 +2495,43 @@ var App = ({ options, config: initialConfig, version, firstRun }) => {
   );
   const filterInput = useTextInput(
     (value) => {
-      setFilter(value);
+      if (activePanel === "sessions") setFilter(value);
+      else if (activePanel === "left") setLeftFilter(value);
+      else if (activePanel === "right") setRightFilter(value);
+      else setActivityFilter(value);
       setInputMode("normal");
     },
     () => {
-      setFilter("");
+      if (activePanel === "sessions") setFilter("");
+      else if (activePanel === "left") setLeftFilter("");
+      else if (activePanel === "right") setRightFilter("");
+      else setActivityFilter("");
       setInputMode("normal");
     }
   );
-  useEffect5(() => {
-    if (options.noUpdates || !liveConfig.updates.checkOnLaunch) return;
-    try {
-      const i = checkForUpdate();
-      if (i.available) setUpdateInfo(i);
-    } catch {
-    }
-    const iv = setInterval(() => {
-      try {
-        const i = checkForUpdate();
-        if (i.available) setUpdateInfo(i);
-      } catch {
-      }
-    }, liveConfig.updates.checkInterval);
-    return () => clearInterval(iv);
+  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 maxScroll = Math.max(0, events.length - viewportRows);
-  useEffect5(() => {
-    setActivityScroll(0);
-  }, [selectedSession?.sessionId]);
-  const handleSettingsClose = useCallback3((updatedConfig) => {
-    setLiveConfig(updatedConfig);
-    saveConfig(updatedConfig);
+  const handleSettingsClose = useCallback4((c) => {
+    setLiveConfig(c);
+    saveConfig(c);
     setShowSettings(false);
   }, []);
-  const handleSetupComplete = useCallback3(
+  const handleThemeMenuClose = useCallback4((c) => {
+    setLiveConfig(c);
+    saveConfig(c);
+    setShowThemeMenu(false);
+    setShowSettings(true);
+  }, []);
+  const handleOpenThemeMenu = useCallback4(() => setShowThemeMenu(true), []);
+  const handleSetupComplete = useCallback4(
     (results) => {
       const nc = { ...liveConfig };
       const [hc, mc] = results;
@@ -1272,146 +2551,283 @@ var App = ({ options, config: initialConfig, version, firstRun }) => {
       } else if (mc === "dismiss") nc.prompts.mcp = "dismissed";
       saveConfig(nc);
       setShowSetup(false);
+      if (nc.prompts.theme === "pending") setShowThemePicker(true);
+      else if (nc.prompts.tour === "pending") setShowTour(true);
+    },
+    [liveConfig]
+  );
+  const handleThemePickerSelect = useCallback4(
+    (themeName) => {
+      const nc = { ...liveConfig, theme: themeName, prompts: { ...liveConfig.prompts, theme: "done" } };
+      setLiveConfig(nc);
+      saveConfig(nc);
+      setShowThemePicker(false);
+      if (nc.prompts.tour === "pending") setShowTour(true);
     },
     [liveConfig]
   );
-  const switchPanel = useCallback3((_dir) => {
-    setActivePanel((p) => p === "sessions" ? "activity" : "sessions");
+  const handleThemePickerSkip = useCallback4(() => {
+    setShowThemePicker(false);
+    if (liveConfig.prompts.tour === "pending") setShowTour(true);
+  }, [liveConfig]);
+  const handleThemePickerDismiss = useCallback4(() => {
+    const nc = { ...liveConfig, prompts: { ...liveConfig.prompts, theme: "dismissed" } };
+    setLiveConfig(nc);
+    saveConfig(nc);
+    setShowThemePicker(false);
+    if (nc.prompts.tour === "pending") setShowTour(true);
+  }, [liveConfig]);
+  const handleTourComplete = useCallback4(() => {
+    const nc = { ...liveConfig, prompts: { ...liveConfig.prompts, tour: "done" } };
+    setLiveConfig(nc);
+    saveConfig(nc);
+    setShowTour(false);
+  }, [liveConfig]);
+  const handleTourSkip = useCallback4(() => {
+    setShowTour(false);
   }, []);
-  useInput3((input, key) => {
-    if (showSetup || showSettings) return;
-    if (inputMode === "nickname") {
-      nicknameInput.handleInput(input, key);
-      return;
-    }
-    if (inputMode === "filter") {
-      if (key.escape) {
-        setFilter("");
-        setInputMode("normal");
-        filterInput.cancel();
-        return;
-      }
-      filterInput.handleInput(input, key);
-      return;
-    }
-    if (matchKey(kb.quit, input, key)) {
-      exit();
-      return;
-    }
-    if (showDetail) {
-      if (key.escape || key.return || key.leftArrow) {
-        setShowDetail(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");
       }
-      return;
-    }
-    if (matchKey(kb.detail, input, key) && selectedSession && activePanel === "sessions") {
-      setShowDetail(true);
-      return;
-    }
-    if (matchKey(kb.panelNext, input, key) || key.rightArrow) {
-      switchPanel("next");
-      return;
-    }
-    if (matchKey(kb.panelPrev, input, key) || key.leftArrow) {
-      switchPanel("prev");
-      return;
-    }
-    if (matchKey(kb.nickname, input, key) && selectedSession) {
-      setInputMode("nickname");
-      nicknameInput.start(selectedSession.nickname || "");
-      return;
+    },
+    [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(() => {
+    setSplitMode(false);
+    setLeftSession(null);
+    setRightSession(null);
+    setLeftScroll(0);
+    setRightScroll(0);
+    setLeftFilter("");
+    setRightFilter("");
+    setLeftShowDetail(false);
+    setRightShowDetail(false);
+    setActivePanel("sessions");
+  }, []);
+  const resetPanel = useCallback4((side) => {
+    if (side === "left") {
+      setLeftSession(null);
+      setLeftScroll(0);
+      setLeftFilter("");
+      setLeftShowDetail(false);
+    } else {
+      setRightSession(null);
+      setRightScroll(0);
+      setRightFilter("");
+      setRightShowDetail(false);
     }
-    if (matchKey(kb.clearNickname, input, key) && selectedSession) {
-      clearNickname(selectedSession.sessionId);
+  }, []);
+  useKeyHandler({
+    kb,
+    activePanel,
+    splitMode,
+    inputMode,
+    showSetup,
+    showSettings: showSettings || showThemeMenu || showThemePicker || showTour,
+    showDetail,
+    leftShowDetail,
+    rightShowDetail,
+    confirmAction,
+    selectedSession,
+    leftSession,
+    rightSession,
+    leftScroll,
+    rightScroll,
+    leftFilter,
+    rightFilter,
+    filter,
+    activityFilter,
+    viewingArchive,
+    archivedIds,
+    updateInfo,
+    maxScroll: Math.max(0, events.length - viewportRows),
+    leftMaxScroll: Math.max(0, leftEvents.length - viewportRows),
+    rightMaxScroll: Math.max(0, rightEvents.length - viewportRows),
+    exit,
+    selectNext,
+    selectPrev,
+    refresh,
+    switchPanel,
+    clearSplitState,
+    resetPanel,
+    getActiveFilter,
+    setActivePanel,
+    setInputMode,
+    setFilter,
+    setActivityFilter,
+    setLeftFilter,
+    setRightFilter,
+    setShowDetail,
+    setLeftShowDetail,
+    setRightShowDetail,
+    setShowSettings,
+    setViewingArchive,
+    setSplitMode,
+    setLeftSession,
+    setRightSession,
+    setLeftScroll,
+    setRightScroll,
+    setActivityScroll,
+    setConfirmAction,
+    setUpdateStatus,
+    nicknameInput,
+    filterInput,
+    onNickname: (id) => {
+      clearNickname(id);
       refresh();
-      return;
-    }
-    if (matchKey(kb.filter, input, key)) {
-      setInputMode("filter");
-      filterInput.start(filter);
-      return;
-    }
-    if (key.escape && filter) {
-      setFilter("");
-      return;
-    }
-    if (matchKey(kb.settings, input, key)) {
-      setShowSettings(true);
-      return;
-    }
-    if (matchKey(kb.update, input, key) && updateInfo?.available) {
+    },
+    onClearNickname: (id) => {
+      clearNickname(id);
+      refresh();
+    },
+    onArchive: (id) => {
+      archiveSession(id);
+      refreshArchived();
+      refresh();
+    },
+    onUnarchive: (id) => {
+      unarchiveSession(id);
+      refreshArchived();
+      refresh();
+    },
+    onDelete: (sess) => setConfirmAction({
+      title: "Delete session?",
+      message: `Delete ${sess.nickname || sess.slug}? Output files will be removed.`,
+      onConfirm: () => {
+        deleteSessionFiles(sess.outputFiles);
+        clearNickname(sess.sessionId);
+        if (archivedIds.has(sess.sessionId)) {
+          unarchiveSession(sess.sessionId);
+          refreshArchived();
+        }
+        refresh();
+        setConfirmAction(null);
+      }
+    }),
+    onUpdate: () => {
       setUpdateStatus("updating...");
-      installUpdate().then(() => setUpdateStatus(`updated to v${updateInfo.latest} \u2014 restart to apply`)).catch(() => setUpdateStatus("update failed"));
-      return;
-    }
-    if (activePanel === "sessions") {
-      if (matchKey(kb.navDown, input, key) || key.downArrow) selectNext();
-      if (matchKey(kb.navUp, input, key) || key.upArrow) selectPrev();
-    }
-    if (activePanel === "activity") {
-      if (matchKey(kb.navUp, input, key) || key.upArrow) setActivityScroll((s) => Math.min(s + 1, maxScroll));
-      if (matchKey(kb.navDown, input, key) || key.downArrow) setActivityScroll((s) => Math.max(s - 1, 0));
-      if (matchKey(kb.scrollBottom, input, key) || key.end) setActivityScroll(0);
-      if (matchKey(kb.scrollTop, input, key) || key.home) setActivityScroll(maxScroll);
+      installUpdate().then(() => setUpdateStatus(`updated to v${updateInfo?.latest} \u2014 restart to apply`)).catch(() => setUpdateStatus("update failed"));
     }
   });
   if (showSetup) {
-    const steps = [];
-    if (liveConfig.prompts.hook === "pending")
-      steps.push({
-        title: "Install Claude Code hook?",
-        description: "Adds a PostToolUse hook that blocks prompt injection attempts in real-time."
-      });
-    if (liveConfig.prompts.mcp === "pending")
-      steps.push({
-        title: "Install MCP server?",
-        description: "Registers agenttop as an MCP server so Claude Code can query session status and alerts."
-      });
+    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."
+        }
+      ] : []
+    ];
     if (steps.length === 0) {
       setShowSetup(false);
+      if (liveConfig.prompts.theme === "pending") setShowThemePicker(true);
+      else if (liveConfig.prompts.tour === "pending") setShowTour(true);
       return null;
     }
-    return /* @__PURE__ */ jsx9(SetupModal, { steps, onComplete: handleSetupComplete });
+    return /* @__PURE__ */ jsx15(SetupModal, { steps, onComplete: handleSetupComplete });
   }
-  if (showSettings) {
-    return /* @__PURE__ */ jsx9(SettingsMenu, { config: liveConfig, onClose: handleSettingsClose });
+  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 (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)
+      }
+    ) });
   }
-  const rightPanel = showDetail && selectedSession ? /* @__PURE__ */ jsx9(SessionDetail, { session: selectedSession, focused: activePanel === "activity", height: mainHeight }) : /* @__PURE__ */ jsx9(
+  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
+      scrollOffset: activityScroll,
+      filter: activityFilter || void 0
     }
   );
-  return /* @__PURE__ */ jsxs9(Box9, { flexDirection: "column", height: termHeight, children: [
-    /* @__PURE__ */ jsx9(StatusBar, { sessionCount: sessions.length, alertCount: alerts.length, version, updateInfo }),
-    /* @__PURE__ */ jsxs9(Box9, { flexGrow: 1, height: mainHeight, children: [
-      /* @__PURE__ */ jsx9(
+  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",
-          filter: filter || void 0
+          filter: filter || void 0,
+          viewingArchive
         }
       ),
       rightPanel
     ] }),
-    !options.noSecurity && /* @__PURE__ */ jsx9(AlertBar, { alerts }),
-    inputMode === "nickname" && /* @__PURE__ */ jsxs9(Box9, { paddingX: 1, children: [
-      /* @__PURE__ */ jsx9(Text9, { color: colors.primary, children: "nickname: " }),
-      /* @__PURE__ */ jsx9(Text9, { color: colors.bright, children: nicknameInput.value }),
-      /* @__PURE__ */ jsx9(Text9, { color: colors.muted, children: "_" })
+    !options.noSecurity && /* @__PURE__ */ jsx15(AlertBar, { alerts }),
+    inputMode === "nickname" && /* @__PURE__ */ jsxs15(Box15, { paddingX: 1, children: [
+      /* @__PURE__ */ jsx15(Text14, { color: colors.primary, children: "nickname: " }),
+      /* @__PURE__ */ jsx15(Text14, { color: colors.bright, children: nicknameInput.value }),
+      /* @__PURE__ */ jsx15(Text14, { color: colors.muted, children: "_" })
     ] }),
-    inputMode === "filter" && /* @__PURE__ */ jsxs9(Box9, { paddingX: 1, children: [
-      /* @__PURE__ */ jsx9(Text9, { color: colors.primary, children: "/" }),
-      /* @__PURE__ */ jsx9(Text9, { color: colors.bright, children: filterInput.value }),
-      /* @__PURE__ */ jsx9(Text9, { 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.primary, children: "/" }),
+      /* @__PURE__ */ jsx15(Text14, { color: colors.bright, children: filterInput.value }),
+      /* @__PURE__ */ jsx15(Text14, { color: colors.muted, children: "_" })
     ] }),
-    inputMode === "normal" && /* @__PURE__ */ jsx9(FooterBar, { keybindings: kb, updateStatus })
+    inputMode === "normal" && /* @__PURE__ */ jsx15(FooterBar, { keybindings: kb, updateStatus, viewingArchive, splitMode })
   ] });
 };
 
@@ -1648,7 +3064,7 @@ var main = () => {
   if (options.noUpdates) config.updates.checkOnLaunch = false;
   if (options.noSecurity) config.security.enabled = false;
   if (firstRun) saveConfig(config);
-  render(React10.createElement(App, { options, config, version: VERSION, firstRun }));
+  render(React16.createElement(App, { options, config, version: VERSION, firstRun }));
 };
 main();
 //# sourceMappingURL=index.js.map