sidekick-docker 0.2.2 → 0.2.3

package/README.md

@@ -83,6 +83,8 @@ The dashboard has 5 panels, each mapped to a number key:
 | `x` | Open context menu (actions for selected item) |
 | `f` | Open log filter (when on Logs tab) |
 | `/` | Open filter |
+| `m` | Pin/unpin item for log comparison (Containers/Services) |
+| `J` / `K` | Scroll compare pane (when in detail focus) |
 | `z` | Toggle expanded layout |
 | `?` | Show help overlay |
 | `V` | Show version |
@@ -112,6 +114,7 @@ The dashboard has 5 panels, each mapped to a number key:
 ## Features
 
 - **Real-time log streaming** — follows container logs with token-level syntax highlighting (HTTP methods, status codes, URLs, IPs, timestamps, JSON keys)
+- **Dual-log compare** — pin a second container or service with `m` to view both log streams side by side
 - **Log search & filter** — press `f` on the Logs tab to search within log output with exact or fuzzy matching and match highlighting
 - **Log analytics** — severity count badges, severity sparkline over time, and pattern clustering that groups similar logs into templates with `<*>` wildcards
 - **Live stats with sparklines** — CPU, memory, network I/O, block I/O, and log severity charted as inline sparklines (60-sample history)

package/dist/sidekick-docker.mjs

@@ -56511,7 +56511,7 @@ var require_LogFilter = __commonJS({
     Object.defineProperty(exports2, "__esModule", { value: true });
     exports2.exactMatch = exactMatch;
     exports2.fuzzyMatch = fuzzyMatch;
-    exports2.filterLine = filterLine3;
+    exports2.filterLine = filterLine4;
     function exactMatch(line, query) {
       if (!query)
         return { matched: true, matches: [] };
@@ -56546,7 +56546,7 @@ var require_LogFilter = __commonJS({
       matches.sort((a, b) => a.start - b.start);
       return { matched: true, matches };
     }
-    function filterLine3(line, query, mode) {
+    function filterLine4(line, query, mode) {
       return mode === "exact" ? exactMatch(line, query) : fuzzyMatch(line, query);
     }
   }
@@ -94290,6 +94290,8 @@ var DockerState = class {
   composeProjects = [];
   selectedLogs = [];
   selectedComposeLogs = [];
+  secondaryLogs = [];
+  secondaryComposeLogs = [];
   inspectedEnv = /* @__PURE__ */ new Map();
   containerChanges = /* @__PURE__ */ new Map();
   imageLayers = /* @__PURE__ */ new Map();
@@ -94400,6 +94402,18 @@ var DockerState = class {
   clearComposeLogs() {
     this.selectedComposeLogs = [];
   }
+  setSecondaryLogs(logs) {
+    this.secondaryLogs = logs;
+  }
+  clearSecondaryLogs() {
+    this.secondaryLogs = [];
+  }
+  setSecondaryComposeLogs(logs) {
+    this.secondaryComposeLogs = logs;
+  }
+  clearSecondaryComposeLogs() {
+    this.secondaryComposeLogs = [];
+  }
   getStatsCollector() {
     return this.statsCollector;
   }
@@ -94434,13 +94448,17 @@ var DockerState = class {
       imageLayers: this.imageLayers,
       selectedContainerLogs: [...this.selectedLogs],
       selectedComposeLogs: [...this.selectedComposeLogs],
+      secondaryContainerLogs: [...this.secondaryLogs],
+      secondaryComposeLogs: [...this.secondaryComposeLogs],
       lastRefresh: this.lastRefresh,
       daemonConnected: this.daemonConnected,
       logFilterString: "",
       logFilterMode: "exact",
       logSeverityCounts: null,
       logSeverityTimeSeries: [],
-      logTemplates: []
+      logTemplates: [],
+      secondaryLogSeverityCounts: null,
+      secondaryLogSeverityTimeSeries: []
     };
   }
 };
@@ -94661,6 +94679,64 @@ function colorizeNetworkContainer(name, id) {
 function stripCursorEscapes(text) {
   return text.replace(/\x1b\[\d*[ABCD]/g, "").replace(/\x1b\[\d*(?:;\d*)?[Hf]/g, "").replace(/\x1b\[\d*[JK]/g, "").replace(/\x1b\[\?\d+[hl]/g, "").replace(/\x1b\[[su]/g, "").replace(/\x1b[78]/g, "").replace(/\x1b\][^\x07\x1b]*(?:\x07|\x1b\\)/g, "").replace(/\r/g, "");
 }
+function renderLogLines(logs, filterString, filterMode, severityCounts) {
+  const lines = [];
+  if (severityCounts && severityCounts.total > 0) {
+    const parts = [];
+    if (severityCounts.error > 0) parts.push(`\x1B[31mE:${severityCounts.error}\x1B[39m`);
+    if (severityCounts.warn > 0) parts.push(`\x1B[33mW:${severityCounts.warn}\x1B[39m`);
+    if (severityCounts.info > 0) parts.push(`\x1B[38;2;43;76;126mI:${severityCounts.info}\x1B[39m`);
+    if (severityCounts.debug > 0) parts.push(`\x1B[90mD:${severityCounts.debug}\x1B[39m`);
+    if (parts.length > 0) lines.push(parts.join("  "));
+  }
+  if (filterString) {
+    let matchCount = 0;
+    for (const l of logs) {
+      const result = (0, import_sidekick_docker_shared2.filterLine)(l.message, filterString, filterMode);
+      if (result.matched) {
+        matchCount++;
+        lines.push(colorizeLogEntry(l, result.matches));
+      }
+    }
+    if (lines.length <= (severityCounts ? 1 : 0)) {
+      lines.push(`\x1B[90mNo logs matching "${filterString}"\x1B[39m`);
+    } else {
+      const headerIdx = severityCounts ? 1 : 0;
+      lines.splice(headerIdx, 0, `\x1B[90m${matchCount} matches (f to filter, Tab to toggle mode)\x1B[39m`);
+    }
+  } else {
+    for (const l of logs) {
+      lines.push(colorizeLogEntry(l));
+    }
+  }
+  return lines;
+}
+function clipAnsi(str, maxWidth) {
+  let visible = 0;
+  let i = 0;
+  let result = "";
+  while (i < str.length && visible < maxWidth) {
+    if (str[i] === "\x1B") {
+      const start = i;
+      i++;
+      if (i < str.length && str[i] === "[") {
+        i++;
+        while (i < str.length && str[i] !== "m" && !/[A-Za-z]/.test(str[i])) i++;
+        if (i < str.length) i++;
+      }
+      result += str.slice(start, i);
+    } else {
+      result += str[i];
+      visible++;
+      i++;
+    }
+  }
+  if (visible < maxWidth) {
+    result += " ".repeat(maxWidth - visible);
+  }
+  result += "\x1B[0m";
+  return result;
+}
 
 // src/dashboard/panels/ContainersPanel.ts
 var ContainersPanel = class {
@@ -94687,41 +94763,10 @@ var ContainersPanel = class {
   detailTabs = [
     {
       label: "Logs",
-      render: (item, metrics) => {
+      render: (_item, metrics) => {
         const logs = metrics.selectedContainerLogs;
         if (logs.length === 0) return "No logs available. Select a container to view logs.";
-        const lines = [];
-        if (metrics.logSeverityCounts && metrics.logSeverityCounts.total > 0) {
-          const c = metrics.logSeverityCounts;
-          const parts = [];
-          if (c.error > 0) parts.push(`\x1B[31mE:${c.error}\x1B[39m`);
-          if (c.warn > 0) parts.push(`\x1B[33mW:${c.warn}\x1B[39m`);
-          if (c.info > 0) parts.push(`\x1B[38;2;43;76;126mI:${c.info}\x1B[39m`);
-          if (c.debug > 0) parts.push(`\x1B[90mD:${c.debug}\x1B[39m`);
-          if (parts.length > 0) lines.push(parts.join("  "));
-        }
-        const query = metrics.logFilterString;
-        const mode = metrics.logFilterMode;
-        if (query) {
-          let matchCount = 0;
-          for (const l of logs) {
-            const result = (0, import_sidekick_docker_shared4.filterLine)(l.message, query, mode);
-            if (result.matched) {
-              matchCount++;
-              lines.push(colorizeLogEntry(l, result.matches));
-            }
-          }
-          if (lines.length <= 1) {
-            lines.push(`\x1B[90mNo logs matching "${query}"\x1B[39m`);
-          } else {
-            lines.splice(1, 0, `\x1B[90m${matchCount} matches (f to filter, Tab to toggle mode)\x1B[39m`);
-          }
-        } else {
-          for (const l of logs) {
-            lines.push(colorizeLogEntry(l));
-          }
-        }
-        return lines.join("\n");
+        return renderLogLines(logs, metrics.logFilterString, metrics.logFilterMode, metrics.logSeverityCounts).join("\n");
       },
       autoScrollBottom: true
     },
@@ -95021,7 +95066,7 @@ var ServicesPanel = class {
       render: (_item, metrics) => {
         const logs = metrics.selectedComposeLogs;
         if (logs.length === 0) return "No compose logs. Logs will appear when a service produces output.";
-        return logs.map((e) => colorizeLogEntry(e)).join("\n");
+        return renderLogLines(logs, metrics.logFilterString, metrics.logFilterMode).join("\n");
       },
       autoScrollBottom: true
     }
@@ -95764,7 +95809,7 @@ function handleFilterInput(input, key, opts) {
 }
 function useKeyboardHandler(ctx) {
   const { exit } = use_app_default();
-  const { state, dispatch, panels, panel, selectedItem, contextActions, clampedSelection, currentItems, detailLines, detailViewportHeight, detailTabs, tabIdx, panelActions, sideScroll, addToast, removeToast, rotatePhrase } = ctx;
+  const { state, dispatch, panels, panel, selectedItem, contextActions, clampedSelection, currentItems, detailLines, detailViewportHeight, detailTabs, tabIdx, panelActions, sideScroll, addToast, removeToast, rotatePhrase, secondaryDetailLineCount } = ctx;
   use_input_default((input, key) => {
     if (state.overlay === "exec") return;
     rotatePhrase();
@@ -95935,6 +95980,18 @@ function useKeyboardHandler(ctx) {
       addToast(`Sort: ${state.sortReversed ? "ascending" : "descending"}`, "info");
       return;
     }
+    if (input === "m" && selectedItem && (panel.id === "containers" || panel.id === "services")) {
+      const currentCompare = state.compareItemIds[panel.id] ?? null;
+      if (currentCompare === selectedItem.id) {
+        dispatch({ type: "PIN_COMPARE", panelId: panel.id, itemId: selectedItem.id });
+        addToast("Unpinned comparison", "info");
+      } else {
+        dispatch({ type: "PIN_COMPARE", panelId: panel.id, itemId: selectedItem.id });
+        const label = selectedItem.label.replace(/^[^\w]*/, "").trim();
+        addToast(`Pinned ${label} for comparison`, "info");
+      }
+      return;
+    }
     if (input === "x") {
       if (selectedItem && panelActions.length > 0) {
         dispatch({ type: "SET_OVERLAY", overlay: "context-menu" });
@@ -95980,6 +96037,14 @@ function useKeyboardHandler(ctx) {
       }
     }
     if (state.focusTarget === "detail") {
+      if (input === "J" && secondaryDetailLineCount > 0) {
+        dispatch({ type: "SCROLL_SECONDARY_DETAIL_DELTA", delta: 1, totalLines: secondaryDetailLineCount, viewportHeight: detailViewportHeight });
+        return;
+      }
+      if (input === "K" && secondaryDetailLineCount > 0) {
+        dispatch({ type: "SCROLL_SECONDARY_DETAIL_DELTA", delta: -1, totalLines: secondaryDetailLineCount, viewportHeight: detailViewportHeight });
+        return;
+      }
       if (input === "j" || key.downArrow) {
         dispatch({ type: "SCROLL_DETAIL_DELTA", delta: 1, totalLines: detailLines.length, viewportHeight: detailViewportHeight });
         return;
@@ -96147,7 +96212,7 @@ var EMPTY_HINTS = {
   networks: ["Create a network to get started:", "  docker network create my-net"],
   services: ["Start a compose project:", "  docker compose up -d"]
 };
-function SideList({ items, selectedIndex, scrollOffset, focused, width, viewportHeight, panelTitle, filterString, panelId, totalCount, runningCount }) {
+function SideList({ items, selectedIndex, scrollOffset, focused, width, viewportHeight, panelTitle, filterString, panelId, totalCount, runningCount, compareItemId }) {
   const hasScrollUp = scrollOffset > 0;
   const hasScrollDown = scrollOffset + viewportHeight < items.length;
   const aboveCount = scrollOffset;
@@ -96174,7 +96239,8 @@ function SideList({ items, selectedIndex, scrollOffset, focused, width, viewport
       const segments = [...trimmed];
       const icon = segments[0] || "";
       const rest = segments.slice(1).join("");
-      const rightLabel = item.rightLabel || "";
+      const isPinned = compareItemId != null && item.id === compareItemId;
+      const rightLabel = isPinned ? `\u{1F4CC}${item.rightLabel ? " " + item.rightLabel : ""}` : item.rightLabel || "";
       const rightLen = rightLabel.length;
       const leftWidth = innerWidth - rightLen - (rightLen ? 1 : 0);
       if (isSelected && focused) {
@@ -96253,11 +96319,67 @@ function DetailPane({ lines, scrollOffset, viewportHeight, focused }) {
   ] });
 }
 
+// src/dashboard/ink/CompareDetailPane.tsx
+await init_build2();
+var import_jsx_runtime5 = __toESM(require_jsx_runtime(), 1);
+function CompareDetailPane({
+  primaryLines,
+  secondaryLines,
+  primaryScrollOffset,
+  secondaryScrollOffset,
+  viewportHeight,
+  totalWidth,
+  focused,
+  primaryLabel,
+  secondaryLabel
+}) {
+  const colWidth = Math.max(10, Math.floor((totalWidth - 5) / 2));
+  const headerLeft = clipAnsi(`\x1B[1m${primaryLabel}\x1B[22m`, colWidth);
+  const headerRight = clipAnsi(`\x1B[1m${secondaryLabel}\x1B[22m`, colWidth);
+  const leftVisible = primaryLines.slice(primaryScrollOffset, primaryScrollOffset + viewportHeight);
+  const rightVisible = secondaryLines.slice(secondaryScrollOffset, secondaryScrollOffset + viewportHeight);
+  const leftHasUp = primaryScrollOffset > 0;
+  const leftHasDown = primaryScrollOffset + viewportHeight < primaryLines.length;
+  const rightHasUp = secondaryScrollOffset > 0;
+  const rightHasDown = secondaryScrollOffset + viewportHeight < secondaryLines.length;
+  const maxRows = Math.max(leftVisible.length, rightVisible.length, viewportHeight);
+  const rows = [];
+  for (let i = 0; i < maxRows && i < viewportHeight; i++) {
+    const left = leftVisible[i] ?? "";
+    const right = rightVisible[i] ?? "";
+    rows.push(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Box_default, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { wrap: "truncate", children: clipAnsi(left, colWidth) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { color: "gray", dimColor: true, children: " \u2502 " }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { wrap: "truncate", children: clipAnsi(right, colWidth) })
+      ] }, i)
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Box_default, { flexDirection: "column", flexGrow: 1, borderStyle: focused ? "bold" : "single", borderColor: focused ? "#2B4C7E" : "gray", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Box_default, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { wrap: "truncate", children: headerLeft }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { color: "gray", dimColor: true, children: " \u2502 " }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { wrap: "truncate", children: headerRight })
+    ] }),
+    (leftHasUp || rightHasUp) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Box_default, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { color: "gray", children: leftHasUp ? clipAnsi(`\u25B2 (${primaryScrollOffset} more)`, colWidth) : " ".repeat(colWidth) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { color: "gray", dimColor: true, children: " \u2502 " }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { color: "gray", children: rightHasUp ? clipAnsi(`\u25B2 (${secondaryScrollOffset} more)`, colWidth) : " ".repeat(colWidth) })
+    ] }),
+    rows,
+    (leftHasDown || rightHasDown) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Box_default, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { color: "gray", children: leftHasDown ? clipAnsi(`\u25BC (${Math.max(0, primaryLines.length - primaryScrollOffset - viewportHeight)} more)`, colWidth) : " ".repeat(colWidth) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { color: "gray", dimColor: true, children: " \u2502 " }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { color: "gray", children: rightHasDown ? clipAnsi(`\u25BC (${Math.max(0, secondaryLines.length - secondaryScrollOffset - viewportHeight)} more)`, colWidth) : " ".repeat(colWidth) })
+    ] })
+  ] });
+}
+
 // src/dashboard/ink/StatusBar.tsx
 var import_react32 = __toESM(require_react(), 1);
 await init_build2();
 var import_sidekick_docker_shared9 = __toESM(require_dist(), 1);
-var import_jsx_runtime5 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime6 = __toESM(require_jsx_runtime(), 1);
 function formatAgo(date) {
   const secs = Math.floor((Date.now() - date.getTime()) / 1e3);
   if (secs < 5) return { text: "just now", stale: false };
@@ -96273,33 +96395,33 @@ function StatusBar({ daemonConnected, focusTarget, panelActionHints, filterStrin
     return () => clearInterval(timer);
   }, []);
   const ago = lastRefresh ? formatAgo(lastRefresh) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Box_default, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { bold: true, color: "magenta", children: ` \u26A1 ${import_sidekick_docker_shared9.BRAND_INLINE}` }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { color: "gray", dimColor: true, children: ` ${import_sidekick_docker_shared9.BRAND_TAGLINE} v${version2}` }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { color: "gray", dimColor: true, children: ` ${SEP2} ` }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { color: daemonConnected ? "green" : "red", children: daemonConnected ? `\u25CF ${runningCount ?? 0}/${containerCount ?? 0}` : "\u25CB disconnected" }),
-    ago && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { color: ago.stale ? "yellow" : "gray", dimColor: !ago.stale, children: ` \u21BB ${ago.text}` }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { color: "gray", dimColor: true, children: ` ${SEP2} ` }),
-    panelActionHints.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-      panelActionHints.map((hint, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react32.default.Fragment, { children: [
-        i > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { children: "  " }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { color: hint.destructive ? "red" : "#2B4C7E", children: `${hint.key}:${hint.label}` })
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Box_default, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { bold: true, color: "magenta", children: ` \u26A1 ${import_sidekick_docker_shared9.BRAND_INLINE}` }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { color: "gray", dimColor: true, children: ` ${import_sidekick_docker_shared9.BRAND_TAGLINE} v${version2}` }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { color: "gray", dimColor: true, children: ` ${SEP2} ` }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { color: daemonConnected ? "green" : "red", children: daemonConnected ? `\u25CF ${runningCount ?? 0}/${containerCount ?? 0}` : "\u25CB disconnected" }),
+    ago && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { color: ago.stale ? "yellow" : "gray", dimColor: !ago.stale, children: ` \u21BB ${ago.text}` }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { color: "gray", dimColor: true, children: ` ${SEP2} ` }),
+    panelActionHints.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+      panelActionHints.map((hint, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react32.default.Fragment, { children: [
+        i > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { children: "  " }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { color: hint.destructive ? "red" : "#2B4C7E", children: `${hint.key}:${hint.label}` })
       ] }, hint.key)),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { color: "gray", dimColor: true, children: ` ${SEP2} ` })
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { color: "gray", dimColor: true, children: ` ${SEP2} ` })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { color: focusTarget === "side" ? "#2B4C7E" : "gray", bold: focusTarget === "side", children: "\u25C0" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { color: "gray", dimColor: true, children: "/" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { color: focusTarget === "detail" ? "#2B4C7E" : "gray", bold: focusTarget === "detail", children: "\u25B6" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { color: "gray", dimColor: true, children: "  j/k  Tab  /  ?" }),
-    contextHint ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { color: "cyan", dimColor: true, children: `  ${contextHint}` }) : null,
-    filterString ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { color: "yellow", bold: true, children: `  \u25C9 "${filterString}"${matchCount !== void 0 && totalCount !== void 0 ? ` ${matchCount}/${totalCount}` : ""}` }) : null
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { color: focusTarget === "side" ? "#2B4C7E" : "gray", bold: focusTarget === "side", children: "\u25C0" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { color: "gray", dimColor: true, children: "/" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { color: focusTarget === "detail" ? "#2B4C7E" : "gray", bold: focusTarget === "detail", children: "\u25B6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { color: "gray", dimColor: true, children: "  j/k  Tab  /  ?" }),
+    contextHint ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { color: "cyan", dimColor: true, children: `  ${contextHint}` }) : null,
+    filterString ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { color: "yellow", bold: true, children: `  \u25C9 "${filterString}"${matchCount !== void 0 && totalCount !== void 0 ? ` ${matchCount}/${totalCount}` : ""}` }) : null
   ] });
 }
 
 // src/dashboard/ink/HelpOverlay.tsx
 await init_build2();
 var import_sidekick_docker_shared10 = __toESM(require_dist(), 1);
-var import_jsx_runtime6 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime7 = __toESM(require_jsx_runtime(), 1);
 var GLOBAL_BINDINGS = [
   { key: "1-5", label: "Switch panel" },
   { key: "j/k", label: "Navigate / scroll" },
@@ -96312,66 +96434,69 @@ var GLOBAL_BINDINGS = [
   { key: "a", label: "Toggle all/running (Containers)" },
   { key: "o", label: "Sort menu (Containers)" },
   { key: "R", label: "Reverse sort (Containers)" },
+  { key: "f", label: "Log filter (Logs tab)" },
+  { key: "m", label: "Pin/unpin log comparison" },
+  { key: "J/K", label: "Scroll compare pane" },
   { key: "V", label: "Version info" },
   { key: "?", label: "This help" },
   { key: "q", label: "Quit" }
 ];
 function KeyBadge({ k }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { color: "white", backgroundColor: "#2B4C7E", bold: true, children: ` ${k} ` });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { color: "white", backgroundColor: "#2B4C7E", bold: true, children: ` ${k} ` });
 }
 function HelpOverlay({ panels, activePanelIndex, version: version2 }) {
   const panel = panels[activePanelIndex];
   const actions = panel.getActions();
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Box_default, { flexDirection: "column", flexGrow: 1, padding: 1, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Box_default, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { bold: true, color: "magenta", children: `\u26A1 ${import_sidekick_docker_shared10.BRAND_INLINE} ${import_sidekick_docker_shared10.BRAND_TAGLINE}` }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { color: "gray", dimColor: true, children: ` v${version2}` })
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Box_default, { flexDirection: "column", flexGrow: 1, padding: 1, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Box_default, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { bold: true, color: "magenta", children: `\u26A1 ${import_sidekick_docker_shared10.BRAND_INLINE} ${import_sidekick_docker_shared10.BRAND_TAGLINE}` }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { color: "gray", dimColor: true, children: ` v${version2}` })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { children: "" }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Box_default, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { bold: true, color: "yellow", children: "\u2500\u2500 Navigation " }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { color: "gray", dimColor: true, children: "\u2500".repeat(30) })
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { children: "" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Box_default, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { bold: true, color: "yellow", children: "\u2500\u2500 Navigation " }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { color: "gray", dimColor: true, children: "\u2500".repeat(30) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { children: "" }),
-    GLOBAL_BINDINGS.map((b) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Box_default, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Box_default, { width: 10, justifyContent: "flex-end", marginRight: 1, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(KeyBadge, { k: b.key }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { color: "gray", children: b.label })
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { children: "" }),
+    GLOBAL_BINDINGS.map((b) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Box_default, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Box_default, { width: 10, justifyContent: "flex-end", marginRight: 1, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(KeyBadge, { k: b.key }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { color: "gray", children: b.label })
     ] }, b.key)),
-    actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { children: "" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Box_default, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { bold: true, color: "yellow", children: `\u2500\u2500 ${panel.title} Actions ` }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { color: "gray", dimColor: true, children: "\u2500".repeat(24) })
+    actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { children: "" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Box_default, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { bold: true, color: "yellow", children: `\u2500\u2500 ${panel.title} Actions ` }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { color: "gray", dimColor: true, children: "\u2500".repeat(24) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { children: "" }),
-      actions.map((a) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Box_default, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Box_default, { width: 10, justifyContent: "flex-end", marginRight: 1, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(KeyBadge, { k: a.key }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { color: a.confirm ? "red" : "gray", children: a.label }),
-        a.confirm && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { color: "red", dimColor: true, children: " \u26A0" })
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { children: "" }),
+      actions.map((a) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Box_default, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Box_default, { width: 10, justifyContent: "flex-end", marginRight: 1, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(KeyBadge, { k: a.key }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { color: a.confirm ? "red" : "gray", children: a.label }),
+        a.confirm && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { color: "red", dimColor: true, children: " \u26A0" })
       ] }, a.key))
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { children: "" }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { color: "gray", dimColor: true, children: "Press ? or Esc to close" })
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { children: "" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { color: "gray", dimColor: true, children: "Press ? or Esc to close" })
   ] });
 }
 
 // src/dashboard/ink/FilterOverlay.tsx
 await init_build2();
-var import_jsx_runtime7 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime8 = __toESM(require_jsx_runtime(), 1);
 function FilterOverlay({ filterString, matchCount, totalCount, panelTitle }) {
   const countInfo = matchCount !== void 0 && totalCount !== void 0 && panelTitle ? `  ${matchCount} of ${totalCount} ${panelTitle.toLowerCase()}` : "";
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Box_default, { position: "absolute", marginTop: 1, marginLeft: 1, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { backgroundColor: "#2B4C7E", color: "white", bold: true, children: ` \u2315 ${filterString}\u2588 ` }),
-    countInfo && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { color: "gray", dimColor: true, children: countInfo }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { color: "gray", dimColor: true, children: "  Enter: apply  Esc: clear" })
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box_default, { position: "absolute", marginTop: 1, marginLeft: 1, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { backgroundColor: "#2B4C7E", color: "white", bold: true, children: ` \u2315 ${filterString}\u2588 ` }),
+    countInfo && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: "gray", dimColor: true, children: countInfo }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: "gray", dimColor: true, children: "  Enter: apply  Esc: clear" })
   ] });
 }
 
 // src/dashboard/ink/ContextMenuOverlay.tsx
 await init_build2();
-var import_jsx_runtime8 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime9 = __toESM(require_jsx_runtime(), 1);
 function ContextMenuOverlay({ actions, selectedIndex }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     Box_default,
     {
       position: "absolute",
@@ -96382,13 +96507,13 @@ function ContextMenuOverlay({ actions, selectedIndex }) {
       borderColor: "#2B4C7E",
       paddingX: 1,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { bold: true, color: "#2B4C7E", children: "\u2630 Actions" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { bold: true, color: "#2B4C7E", children: "\u2630 Actions" }),
         actions.map((action, i) => {
           const isSelected = i === selectedIndex;
           const isDanger = !!action.confirm;
           const color = isSelected ? isDanger ? "red" : "#2B4C7E" : isDanger ? "red" : "white";
-          return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box_default, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Box_default, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               Text,
               {
                 color,
@@ -96397,7 +96522,7 @@ function ContextMenuOverlay({ actions, selectedIndex }) {
                 children: ` ${action.key} `
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               Text,
               {
                 color,
@@ -96408,8 +96533,8 @@ function ContextMenuOverlay({ actions, selectedIndex }) {
             )
           ] }, action.key);
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { children: "" }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: "gray", dimColor: true, children: "j/k select  Enter run  Esc close" })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { children: "" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { color: "gray", dimColor: true, children: "j/k select  Enter run  Esc close" })
       ]
     }
   );
@@ -96417,7 +96542,7 @@ function ContextMenuOverlay({ actions, selectedIndex }) {
 
 // src/dashboard/ink/ConfirmOverlay.tsx
 await init_build2();
-var import_jsx_runtime9 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime10 = __toESM(require_jsx_runtime(), 1);
 var SEVERITY_CONFIG = {
   low: { borderColor: "yellow", icon: "\u26A0", title: "Confirm", warning: "" },
   high: { borderColor: "red", icon: "\u2717", title: "Destructive Action", warning: "  This cannot be undone." },
@@ -96426,7 +96551,7 @@ var SEVERITY_CONFIG = {
 function ConfirmOverlay({ message, severity }) {
   const config = SEVERITY_CONFIG[severity];
   const color = config.borderColor;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     Box_default,
     {
       position: "absolute",
@@ -96438,19 +96563,19 @@ function ConfirmOverlay({ message, severity }) {
       paddingX: 2,
       paddingY: 1,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Box_default, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { color, bold: true, children: `${config.icon} ` }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { bold: true, color, children: config.title })
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box_default, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { color, bold: true, children: `${config.icon} ` }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { bold: true, color, children: config.title })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { children: "" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { bold: true, children: ` ${message}` }),
-        config.warning ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { color: "gray", dimColor: true, children: config.warning }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { children: "" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Box_default, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { backgroundColor: severity === "low" ? "yellow" : "green", color: severity === "low" ? "black" : "white", bold: true, children: " y Yes " }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { children: "  " }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { backgroundColor: "red", color: "white", bold: true, children: " n No " }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { color: "gray", dimColor: true, children: "   or Esc to cancel" })
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { children: "" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { bold: true, children: ` ${message}` }),
+        config.warning ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { color: "gray", dimColor: true, children: config.warning }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { children: "" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box_default, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { backgroundColor: severity === "low" ? "yellow" : "green", color: severity === "low" ? "black" : "white", bold: true, children: " y Yes " }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { children: "  " }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { backgroundColor: "red", color: "white", bold: true, children: " n No " }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { color: "gray", dimColor: true, children: "   or Esc to cancel" })
         ] })
       ]
     }
@@ -96460,7 +96585,7 @@ function ConfirmOverlay({ message, severity }) {
 // src/dashboard/ink/ToastNotification.tsx
 var import_react33 = __toESM(require_react(), 1);
 await init_build2();
-var import_jsx_runtime10 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime11 = __toESM(require_jsx_runtime(), 1);
 var SEVERITY_COLORS2 = {
   error: "red",
   warning: "yellow",
@@ -96488,43 +96613,43 @@ function ToastNotification({ toast }) {
   };
   const icon = SEVERITY_ICONS[toast.severity] || "";
   const textColor = toast.severity === "warning" ? "black" : "white";
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box_default, { position: "absolute", marginTop: 0, justifyContent: "flex-end", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { backgroundColor: SEVERITY_COLORS2[toast.severity] || "white", color: textColor, bold: true, children: ` ${icon} ${toast.message} ` }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box_default, { position: "absolute", marginTop: 0, justifyContent: "flex-end", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Text, { backgroundColor: SEVERITY_COLORS2[toast.severity] || "white", color: textColor, bold: true, children: ` ${icon} ${toast.message} ` }) });
 }
 
 // src/dashboard/ink/TooSmallOverlay.tsx
 await init_build2();
 var import_sidekick_docker_shared11 = __toESM(require_dist(), 1);
-var import_jsx_runtime11 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime12 = __toESM(require_jsx_runtime(), 1);
 function TooSmallOverlay({ columns, rows }) {
   const needWidth = Math.max(0, 60 - columns);
   const needHeight = Math.max(0, 15 - rows);
   const hints = [];
   if (needWidth > 0) hints.push(`${needWidth} col${needWidth > 1 ? "s" : ""} wider`);
   if (needHeight > 0) hints.push(`${needHeight} row${needHeight > 1 ? "s" : ""} taller`);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Box_default, { flexDirection: "column", justifyContent: "center", alignItems: "center", height: rows, width: columns, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Text, { bold: true, color: "magenta", children: `\u26A1 ${import_sidekick_docker_shared11.BRAND_INLINE}` }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Text, { children: "" }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Text, { color: "yellow", bold: true, children: "Terminal too small" }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Text, { color: "gray", children: `${columns}\xD7${rows} \u2192 need ${hints.join(" and ")}` }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Text, { children: "" }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Text, { color: "gray", dimColor: true, children: "Resize to at least 60\xD715 to continue." })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Box_default, { flexDirection: "column", justifyContent: "center", alignItems: "center", height: rows, width: columns, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text, { bold: true, color: "magenta", children: `\u26A1 ${import_sidekick_docker_shared11.BRAND_INLINE}` }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text, { children: "" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text, { color: "yellow", bold: true, children: "Terminal too small" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text, { color: "gray", children: `${columns}\xD7${rows} \u2192 need ${hints.join(" and ")}` }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text, { children: "" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text, { color: "gray", dimColor: true, children: "Resize to at least 60\xD715 to continue." })
   ] });
 }
 
 // src/dashboard/ink/ExecOverlay.tsx
 await init_build2();
-var import_jsx_runtime12 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime13 = __toESM(require_jsx_runtime(), 1);
 function ExecOverlay({ containerName, outputLines }) {
   const { rows } = useTerminalSize();
   const viewportHeight = Math.max(1, rows - 3);
   const scrollOffset = Math.max(0, outputLines.length - viewportHeight);
   const visibleLines = outputLines.slice(scrollOffset, scrollOffset + viewportHeight);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Box_default, { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Box_default, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text, { bold: true, color: "#2B4C7E", children: ` Exec: ${containerName} ` }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text, { color: "gray", children: " (Ctrl+] to detach)" })
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Box_default, { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Box_default, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text, { bold: true, color: "#2B4C7E", children: ` Exec: ${containerName} ` }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text, { color: "gray", children: " (Ctrl+] to detach)" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box_default, { flexDirection: "column", flexGrow: 1, children: visibleLines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text, { children: line || " " }, scrollOffset + i)) })
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box_default, { flexDirection: "column", flexGrow: 1, children: visibleLines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text, { children: line || " " }, scrollOffset + i)) })
   ] });
 }
 
@@ -96598,7 +96723,7 @@ function parseMouseEvent(data) {
 // src/dashboard/ink/mouse/MouseProvider.tsx
 var import_react34 = __toESM(require_react(), 1);
 await init_build2();
-var import_jsx_runtime13 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime14 = __toESM(require_jsx_runtime(), 1);
 function InputSink() {
   use_input_default(() => {
   });
@@ -96622,20 +96747,20 @@ function MouseProvider({ onMouse, children }) {
       disableMouse();
     };
   }, [onMouse]);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(InputSink, {}),
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(InputSink, {}),
     children
   ] });
 }
 
 // src/dashboard/ink/LogFilterOverlay.tsx
 await init_build2();
-var import_jsx_runtime14 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime15 = __toESM(require_jsx_runtime(), 1);
 function LogFilterOverlay({ filterString, filterMode }) {
   const modeLabel = filterMode === "exact" ? "exact" : "fuzzy";
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Box_default, { position: "absolute", marginTop: 1, marginLeft: 1, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text, { backgroundColor: "#2B4C7E", color: "white", bold: true, children: ` Log filter (${modeLabel}): ${filterString}\u2588 ` }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text, { color: "gray", children: "  Tab: toggle mode  Enter: apply  Esc: clear" })
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Box_default, { position: "absolute", marginTop: 1, marginLeft: 1, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { backgroundColor: "#2B4C7E", color: "white", bold: true, children: ` Log filter (${modeLabel}): ${filterString}\u2588 ` }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { color: "gray", children: "  Tab: toggle mode  Enter: apply  Esc: clear" })
   ] });
 }
 
@@ -96643,26 +96768,26 @@ function LogFilterOverlay({ filterString, filterMode }) {
 var import_react35 = __toESM(require_react(), 1);
 await init_build2();
 var import_sidekick_docker_shared12 = __toESM(require_dist(), 1);
-var import_jsx_runtime15 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime16 = __toESM(require_jsx_runtime(), 1);
 function VersionOverlay({ version: version2 }) {
   const phrase = import_react35.default.useMemo(() => (0, import_sidekick_docker_shared12.getRandomPhrase)(), []);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Box_default, { flexDirection: "column", flexGrow: 1, padding: 1, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { bold: true, color: "magenta", children: `\u26A1 ${import_sidekick_docker_shared12.BRAND_INLINE}` }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { color: "#2B4C7E", bold: true, children: `${import_sidekick_docker_shared12.BRAND_TAGLINE} v${version2}` }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { children: "" }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { color: "gray", dimColor: true, children: "\u2500".repeat(40) }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { children: "" }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { color: "gray", italic: true, children: `  "${phrase}"` }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { children: "" }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { color: "gray", dimColor: true, children: "\u2500".repeat(40) }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { children: "" }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { color: "gray", dimColor: true, children: "Press V or Esc to close" })
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Box_default, { flexDirection: "column", flexGrow: 1, padding: 1, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text, { bold: true, color: "magenta", children: `\u26A1 ${import_sidekick_docker_shared12.BRAND_INLINE}` }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text, { color: "#2B4C7E", bold: true, children: `${import_sidekick_docker_shared12.BRAND_TAGLINE} v${version2}` }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text, { children: "" }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text, { color: "gray", dimColor: true, children: "\u2500".repeat(40) }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text, { children: "" }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text, { color: "gray", italic: true, children: `  "${phrase}"` }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text, { children: "" }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text, { color: "gray", dimColor: true, children: "\u2500".repeat(40) }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text, { children: "" }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text, { color: "gray", dimColor: true, children: "Press V or Esc to close" })
   ] });
 }
 
 // src/dashboard/ink/SortOverlay.tsx
 await init_build2();
-var import_jsx_runtime16 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime17 = __toESM(require_jsx_runtime(), 1);
 var SORT_OPTIONS = [
   { field: "state", label: "State (running first)" },
   { field: "name", label: "Name" },
@@ -96673,7 +96798,7 @@ var SORT_OPTIONS = [
   { field: "pids", label: "PIDs" }
 ];
 function SortOverlay({ selectedIndex, currentField, reversed }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     Box_default,
     {
       position: "absolute",
@@ -96684,12 +96809,12 @@ function SortOverlay({ selectedIndex, currentField, reversed }) {
       borderColor: "#2B4C7E",
       paddingX: 1,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text, { bold: true, color: "#2B4C7E", children: "\u2195 Sort by" }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text, { bold: true, color: "#2B4C7E", children: "\u2195 Sort by" }),
         SORT_OPTIONS.map((opt, i) => {
           const isSelected = i === selectedIndex;
           const isCurrent = opt.field === currentField;
           const indicator = isCurrent ? reversed ? " \u25B2" : " \u25BC" : "";
-          return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             Text,
             {
               color: isSelected ? "#2B4C7E" : isCurrent ? "yellow" : "white",
@@ -96699,8 +96824,8 @@ function SortOverlay({ selectedIndex, currentField, reversed }) {
             }
           ) }, opt.field);
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text, { children: "" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text, { color: "gray", dimColor: true, children: "j/k select  Enter apply  R reverse  Esc close" })
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text, { children: "" }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text, { color: "gray", dimColor: true, children: "j/k select  Enter apply  R reverse  Esc close" })
       ]
     }
   );
@@ -96764,7 +96889,7 @@ var ExecManager = class {
 };
 
 // src/dashboard/ink/Dashboard.tsx
-var import_jsx_runtime17 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime18 = __toESM(require_jsx_runtime(), 1);
 var SORT_FIELDS2 = ["state", "name", "cpu", "mem", "net", "io", "pids"];
 var SIDE_PANEL_WIDTH = 28;
 var SIDE_PANEL_WIDTH_WIDE = 42;
@@ -96787,7 +96912,7 @@ function reducer(state, action) {
         detailScrollPerTab: {}
       };
     case "SELECT_ITEM":
-      return { ...state, selectedItemIndex: action.index, detailTabIndex: 0, detailScrollOffset: 0, detailScrollPerTab: {} };
+      return { ...state, selectedItemIndex: action.index, detailTabIndex: 0, detailScrollOffset: 0, detailScrollPerTab: {}, secondaryDetailScrollOffset: 0 };
     case "SET_DETAIL_TAB": {
       const saved = { ...state.detailScrollPerTab, [state.detailTabIndex]: state.detailScrollOffset };
       return { ...state, detailTabIndex: action.index, detailScrollOffset: saved[action.index] ?? 0, detailScrollPerTab: saved };
@@ -96866,6 +96991,22 @@ function reducer(state, action) {
       const next = (state.sortMenuIndex + action.delta + SORT_FIELDS2.length) % SORT_FIELDS2.length;
       return { ...state, sortMenuIndex: next };
     }
+    case "PIN_COMPARE": {
+      const current = state.compareItemIds[action.panelId] ?? null;
+      const newId = current === action.itemId ? null : action.itemId;
+      return {
+        ...state,
+        compareItemIds: { ...state.compareItemIds, [action.panelId]: newId },
+        secondaryDetailScrollOffset: 0
+      };
+    }
+    case "SCROLL_SECONDARY_DETAIL":
+      return { ...state, secondaryDetailScrollOffset: action.offset };
+    case "SCROLL_SECONDARY_DETAIL_DELTA": {
+      const maxOffset = Math.max(0, action.totalLines - action.viewportHeight);
+      const next = Math.max(0, Math.min(state.secondaryDetailScrollOffset + action.delta, maxOffset));
+      return { ...state, secondaryDetailScrollOffset: next };
+    }
     default:
       return state;
   }
@@ -96893,7 +97034,9 @@ var initialState = {
   showAllContainers: true,
   sortField: "state",
   sortReversed: false,
-  sortMenuIndex: 0
+  sortMenuIndex: 0,
+  compareItemIds: {},
+  secondaryDetailScrollOffset: 0
 };
 function Dashboard({ panels, metrics, onViewStateChange, execTriggerRef, onExecFallback }) {
   const [state, dispatch] = (0, import_react36.useReducer)(reducer, initialState);
@@ -97059,14 +97202,21 @@ function Dashboard({ panels, metrics, onViewStateChange, execTriggerRef, onExecF
   const selectedItem = currentItems[clampedSelection];
   const detailTabs = panel.detailTabs;
   const tabIdx = Math.min(state.detailTabIndex, detailTabs.length - 1);
+  const compareItemId = state.compareItemIds[panel.id] ?? null;
+  (0, import_react36.useEffect)(() => {
+    if (compareItemId && selectedItem?.id === compareItemId) {
+      dispatch({ type: "PIN_COMPARE", panelId: panel.id, itemId: compareItemId });
+    }
+  }, [selectedItem?.id, compareItemId, panel.id]);
   (0, import_react36.useEffect)(() => {
     onViewStateChange?.({
       panelId: panel.id,
       itemId: selectedItem?.id ?? null,
       detailTabIndex: tabIdx,
-      sortField: state.sortField
+      sortField: state.sortField,
+      compareItemId
     });
-  }, [panel.id, selectedItem?.id, tabIdx, state.sortField]);
+  }, [panel.id, selectedItem?.id, tabIdx, state.sortField, compareItemId]);
   const enrichedMetrics = {
     ...metrics,
     logFilterString: state.logFilterString,
@@ -97087,6 +97237,31 @@ function Dashboard({ panels, metrics, onViewStateChange, execTriggerRef, onExecF
       dispatch({ type: "SCROLL_DETAIL", offset: detailLines.length - detailViewportHeight });
     }
   }, [shouldAutoScroll, detailLines.length, detailViewportHeight]);
+  const isCompareActive = compareItemId != null && shouldAutoScroll;
+  const secondaryDetailLines = import_react36.default.useMemo(() => {
+    if (!isCompareActive) return [];
+    if (panel.id === "containers") {
+      const logs = enrichedMetrics.secondaryContainerLogs;
+      if (logs.length === 0) return ["Waiting for logs..."];
+      return renderLogLines(logs, state.logFilterString, state.logFilterMode, enrichedMetrics.secondaryLogSeverityCounts);
+    }
+    if (panel.id === "services") {
+      const logs = enrichedMetrics.secondaryComposeLogs;
+      if (logs.length === 0) return ["Waiting for logs..."];
+      return renderLogLines(logs, state.logFilterString, state.logFilterMode);
+    }
+    return [];
+  }, [isCompareActive, panel.id, enrichedMetrics.secondaryContainerLogs, enrichedMetrics.secondaryComposeLogs, enrichedMetrics.secondaryLogSeverityCounts, state.logFilterString, state.logFilterMode]);
+  (0, import_react36.useEffect)(() => {
+    if (isCompareActive && secondaryDetailLines.length > detailViewportHeight) {
+      dispatch({ type: "SCROLL_SECONDARY_DETAIL", offset: secondaryDetailLines.length - detailViewportHeight });
+    }
+  }, [isCompareActive, secondaryDetailLines.length, detailViewportHeight]);
+  const compareItemLabel = import_react36.default.useMemo(() => {
+    if (!compareItemId) return "";
+    const item = currentItems.find((it) => it.id === compareItemId);
+    return item ? item.label.replace(/^[^\w]*/, "").trim() : compareItemId.slice(0, 12);
+  }, [compareItemId, currentItems]);
   const panelActions = panel.getActions();
   const applicableActions = selectedItem ? panelActions.filter((a) => !a.condition || a.condition(selectedItem)) : [];
   const contextActions = state.overlay === "context-menu" ? applicableActions : [];
@@ -97134,27 +97309,35 @@ function Dashboard({ panels, metrics, onViewStateChange, execTriggerRef, onExecF
     sideScroll,
     addToast,
     removeToast,
-    rotatePhrase
+    rotatePhrase,
+    secondaryDetailLineCount: secondaryDetailLines.length
   });
   if (tooSmall) {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TooSmallOverlay, { columns, rows });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TooSmallOverlay, { columns, rows });
   }
   const showNormalLayout = state.overlay !== "help" && state.overlay !== "exec" && state.overlay !== "version";
   const panelActionHints = applicableActions.length > 0 ? [{ key: "x", label: "Actions", destructive: false }] : [];
   const contextHint = (() => {
     if (panel.id === "containers") {
       const parts = [];
-      if (tabIdx === 0) parts.push("f:Filter", "c:Copy");
+      if (tabIdx === 0) {
+        parts.push("f:Filter", "c:Copy", "m:Compare");
+      }
       parts.push(state.showAllContainers ? "a:All" : "a:Running");
       parts.push(`o:\u2195${state.sortField}`);
       return parts.join("  ");
     }
+    if (panel.id === "services") {
+      const parts = [];
+      if (tabIdx === 1) parts.push("m:Compare");
+      return parts.join("  ");
+    }
     return "";
   })();
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(MouseProvider, { onMouse: handleMouse, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Box_default, { flexDirection: "column", height: rows, width: columns, children: [
-    showNormalLayout && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TabBar, { panels, activeIndex: state.activePanelIndex, layoutMode: state.layoutMode, phrase, panelCounts }),
-    showNormalLayout && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Box_default, { flexGrow: 1, flexDirection: "row", children: [
-      sideWidth > 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MouseProvider, { onMouse: handleMouse, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Box_default, { flexDirection: "column", height: rows, width: columns, children: [
+    showNormalLayout && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TabBar, { panels, activeIndex: state.activePanelIndex, layoutMode: state.layoutMode, phrase, panelCounts }),
+    showNormalLayout && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Box_default, { flexGrow: 1, flexDirection: "row", children: [
+      sideWidth > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         SideList,
         {
           items: currentItems,
@@ -97167,12 +97350,26 @@ function Dashboard({ panels, metrics, onViewStateChange, execTriggerRef, onExecF
           filterString: state.filterString || void 0,
           panelId: panel.id,
           totalCount: totalItemCount,
-          runningCount: panel.id === "containers" ? runningCount : void 0
+          runningCount: panel.id === "containers" ? runningCount : void 0,
+          compareItemId: compareItemId || void 0
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Box_default, { flexDirection: "column", flexGrow: 1, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DetailTabBar, { tabs: detailTabs, activeIndex: state.detailTabIndex }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Box_default, { flexDirection: "column", flexGrow: 1, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DetailTabBar, { tabs: detailTabs, activeIndex: state.detailTabIndex }),
+        isCompareActive ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          CompareDetailPane,
+          {
+            primaryLines: detailLines,
+            secondaryLines: secondaryDetailLines,
+            primaryScrollOffset: state.detailScrollOffset,
+            secondaryScrollOffset: state.secondaryDetailScrollOffset,
+            viewportHeight: detailViewportHeight,
+            totalWidth: columns - sideWidth,
+            focused: state.focusTarget === "detail",
+            primaryLabel: selectedItem?.label.replace(/^[^\w]*/, "").trim() ?? "",
+            secondaryLabel: compareItemLabel
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           DetailPane,
           {
             lines: detailLines,
@@ -97183,16 +97380,16 @@ function Dashboard({ panels, metrics, onViewStateChange, execTriggerRef, onExecF
         )
       ] })
     ] }),
-    state.overlay === "help" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(HelpOverlay, { panels, activePanelIndex: state.activePanelIndex, version: "0.2.2" }),
-    state.overlay === "version" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(VersionOverlay, { version: "0.2.2" }),
-    state.overlay === "exec" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    state.overlay === "help" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(HelpOverlay, { panels, activePanelIndex: state.activePanelIndex, version: "0.2.3" }),
+    state.overlay === "version" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VersionOverlay, { version: "0.2.3" }),
+    state.overlay === "exec" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       ExecOverlay,
       {
         containerName: state.execContainerName,
         outputLines: state.execOutputLines
       }
     ),
-    state.overlay !== "exec" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    state.overlay !== "exec" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       StatusBar,
       {
         daemonConnected: metrics.daemonConnected,
@@ -97201,15 +97398,15 @@ function Dashboard({ panels, metrics, onViewStateChange, execTriggerRef, onExecF
         filterString: state.filterString,
         containerCount: metrics.containers.length,
         runningCount,
-        version: "0.2.2",
+        version: "0.2.3",
         matchCount: state.filterString ? currentItems.length : void 0,
         totalCount: state.filterString ? totalItemCount : void 0,
         lastRefresh: metrics.lastRefresh,
         contextHint
       }
     ),
-    state.overlay === "context-menu" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ContextMenuOverlay, { actions: contextActions, selectedIndex: state.contextMenuIndex }),
-    state.overlay === "filter" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    state.overlay === "context-menu" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ContextMenuOverlay, { actions: contextActions, selectedIndex: state.contextMenuIndex }),
+    state.overlay === "filter" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       FilterOverlay,
       {
         filterString: state.filterString,
@@ -97218,15 +97415,15 @@ function Dashboard({ panels, metrics, onViewStateChange, execTriggerRef, onExecF
         panelTitle: panel.title
       }
     ),
-    state.overlay === "log-filter" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    state.overlay === "log-filter" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       LogFilterOverlay,
       {
         filterString: state.logFilterString,
         filterMode: state.logFilterMode
       }
     ),
-    state.overlay === "sort" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SortOverlay, { selectedIndex: state.sortMenuIndex, currentField: state.sortField, reversed: state.sortReversed }),
-    state.overlay === "confirm" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    state.overlay === "sort" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SortOverlay, { selectedIndex: state.sortMenuIndex, currentField: state.sortField, reversed: state.sortReversed }),
+    state.overlay === "confirm" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       ConfirmOverlay,
       {
         message: state.confirmMessage,
@@ -97238,7 +97435,7 @@ function Dashboard({ panels, metrics, onViewStateChange, execTriggerRef, onExecF
         onCancel: () => dispatch({ type: "SET_CONFIRM", action: null, message: "" })
       }
     ),
-    state.toasts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ToastNotification, { toast: state.toasts[state.toasts.length - 1] })
+    state.toasts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToastNotification, { toast: state.toasts[state.toasts.length - 1] })
   ] }) });
 }
 
@@ -97264,6 +97461,8 @@ async function dashboardAction(_opts, cmd) {
   };
   let logFlushTimer = null;
   let composeLogFlushTimer = null;
+  let secondaryLogFlushTimer = null;
+  let secondaryComposeLogFlushTimer = null;
   const logManager = new LogStreamManager(client, () => {
     if (logFlushTimer) return;
     logFlushTimer = setTimeout(() => {
@@ -97283,6 +97482,25 @@ async function dashboardAction(_opts, cmd) {
     scheduleRender();
   };
   let logSeverityCounts = logManager.getSeverityCounts();
+  const secondaryLogManager = new LogStreamManager(client, () => {
+    if (secondaryLogFlushTimer) return;
+    secondaryLogFlushTimer = setTimeout(() => {
+      secondaryLogFlushTimer = null;
+      state.setSecondaryLogs(secondaryLogManager.getLogs());
+      secondaryLogSeverityCounts = secondaryLogManager.getSeverityCounts();
+      scheduleRender();
+    }, 100);
+  });
+  const flushSecondaryLogsNow = () => {
+    if (secondaryLogFlushTimer) {
+      clearTimeout(secondaryLogFlushTimer);
+      secondaryLogFlushTimer = null;
+    }
+    state.setSecondaryLogs(secondaryLogManager.getLogs());
+    secondaryLogSeverityCounts = secondaryLogManager.getSeverityCounts();
+    scheduleRender();
+  };
+  let secondaryLogSeverityCounts = secondaryLogManager.getSeverityCounts();
   const statsManager = new StatsStreamManager(client, state.getStatsCollector(), () => {
     scheduleRender();
   });
@@ -97308,15 +97526,35 @@ async function dashboardAction(_opts, cmd) {
     }
     scheduleRender();
   };
+  const secondaryComposeLogManager = new ComposeLogStreamManager(composeClient, () => {
+    if (secondaryComposeLogFlushTimer) return;
+    secondaryComposeLogFlushTimer = setTimeout(() => {
+      secondaryComposeLogFlushTimer = null;
+      state.setSecondaryComposeLogs(secondaryComposeLogManager.getLogs());
+      scheduleRender();
+    }, 100);
+  });
+  const flushSecondaryComposeLogsNow = () => {
+    if (secondaryComposeLogFlushTimer) {
+      clearTimeout(secondaryComposeLogFlushTimer);
+      secondaryComposeLogFlushTimer = null;
+    }
+    state.setSecondaryComposeLogs(secondaryComposeLogManager.getLogs());
+    scheduleRender();
+  };
   const onViewStateChange = (viewState) => {
-    const { panelId, itemId, detailTabIndex, sortField } = viewState;
+    const { panelId, itemId, detailTabIndex, sortField, compareItemId } = viewState;
     const wantsLiveStats = sortField === "cpu" || sortField === "mem" || sortField === "net" || sortField === "io" || sortField === "pids";
     if (panelId === "containers") {
       void logManager.select(detailTabIndex === 0 ? itemId : null);
       void statsManager.select(itemId && (detailTabIndex === 1 || wantsLiveStats) ? itemId : null);
       void composeLogManager.selectCompose(null, null);
+      void secondaryLogManager.select(detailTabIndex === 0 && compareItemId ? compareItemId : null);
+      void secondaryComposeLogManager.selectCompose(null, null);
       flushLogsNow();
       flushComposeLogsNow();
+      flushSecondaryLogsNow();
+      flushSecondaryComposeLogsNow();
       if (itemId && !state.getInspectedEnv(itemId)) {
         client.getContainerEnv(itemId).then((env3) => {
           state.setInspectedEnv(itemId, env3);
@@ -97332,6 +97570,7 @@ async function dashboardAction(_opts, cmd) {
     } else if (panelId === "services" && itemId) {
       void logManager.select(null);
       void statsManager.select(null);
+      void secondaryLogManager.select(null);
       if (detailTabIndex === 1) {
         const parts = itemId.split(":");
         if (parts[0] === "project") {
@@ -97339,17 +97578,34 @@ async function dashboardAction(_opts, cmd) {
         } else if (parts[0] === "service") {
           void composeLogManager.selectCompose(parts[1], parts.slice(2).join(":"));
         }
+        if (compareItemId) {
+          const cParts = compareItemId.split(":");
+          if (cParts[0] === "project") {
+            void secondaryComposeLogManager.selectCompose(cParts.slice(1).join(":"), null);
+          } else if (cParts[0] === "service") {
+            void secondaryComposeLogManager.selectCompose(cParts[1], cParts.slice(2).join(":"));
+          }
+        } else {
+          void secondaryComposeLogManager.selectCompose(null, null);
+        }
       } else {
         void composeLogManager.selectCompose(null, null);
+        void secondaryComposeLogManager.selectCompose(null, null);
       }
       flushLogsNow();
       flushComposeLogsNow();
+      flushSecondaryLogsNow();
+      flushSecondaryComposeLogsNow();
     } else if (panelId === "images") {
       void logManager.select(null);
       void statsManager.select(null);
       void composeLogManager.selectCompose(null, null);
+      void secondaryLogManager.select(null);
+      void secondaryComposeLogManager.selectCompose(null, null);
       flushLogsNow();
       flushComposeLogsNow();
+      flushSecondaryLogsNow();
+      flushSecondaryComposeLogsNow();
       if (itemId && !state.getImageLayers(itemId)) {
         client.getImageHistory(itemId).then((layers) => {
           state.setImageLayers(itemId, layers);
@@ -97360,8 +97616,12 @@ async function dashboardAction(_opts, cmd) {
       void logManager.select(null);
       void statsManager.select(null);
       void composeLogManager.selectCompose(null, null);
+      void secondaryLogManager.select(null);
+      void secondaryComposeLogManager.selectCompose(null, null);
       flushLogsNow();
       flushComposeLogsNow();
+      flushSecondaryLogsNow();
+      flushSecondaryComposeLogsNow();
     }
   };
   const panels = [
@@ -97436,6 +97696,8 @@ async function dashboardAction(_opts, cmd) {
     m.logSeverityCounts = logSeverityCounts;
     m.logSeverityTimeSeries = logManager.getSeverityTimeSeries();
     m.logTemplates = logManager.getTemplates();
+    m.secondaryLogSeverityCounts = secondaryLogSeverityCounts;
+    m.secondaryLogSeverityTimeSeries = secondaryLogManager.getSeverityTimeSeries();
     return m;
   }
   function scheduleRender() {
@@ -97461,6 +97723,10 @@ async function dashboardAction(_opts, cmd) {
       logManager.dispose();
     } catch {
     }
+    try {
+      secondaryLogManager.dispose();
+    } catch {
+    }
     try {
       statsManager.dispose();
     } catch {
@@ -97469,14 +97735,26 @@ async function dashboardAction(_opts, cmd) {
       composeLogManager.dispose();
     } catch {
     }
+    try {
+      secondaryComposeLogManager.dispose();
+    } catch {
+    }
     try {
       if (logFlushTimer) clearTimeout(logFlushTimer);
     } catch {
     }
+    try {
+      if (secondaryLogFlushTimer) clearTimeout(secondaryLogFlushTimer);
+    } catch {
+    }
     try {
       if (composeLogFlushTimer) clearTimeout(composeLogFlushTimer);
     } catch {
     }
+    try {
+      if (secondaryComposeLogFlushTimer) clearTimeout(secondaryComposeLogFlushTimer);
+    } catch {
+    }
     try {
       clearInterval(refreshInterval);
     } catch {
@@ -97561,7 +97839,7 @@ async function logsAction(container, opts) {
 
 // src/cli.ts
 var program2 = new Command();
-program2.name("sidekick-docker").description("Docker management TUI dashboard").version("0.2.2").option("--socket <path>", "Docker socket path").action(async (_opts, cmd) => {
+program2.name("sidekick-docker").description("Docker management TUI dashboard").version("0.2.3").option("--socket <path>", "Docker socket path").action(async (_opts, cmd) => {
   await dashboardAction(_opts, cmd);
 });
 program2.command("ps").description("List containers").option("-a, --all", "Show all containers (default: running only)", false).action(async (opts) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sidekick-docker",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Docker management TUI dashboard",
   "author": "Cesar Andres Lopez <cesarandreslopez@gmail.com>",
   "repository": {