sidekick-docker 0.1.3 → 0.1.5

package/dist/sidekick-docker.mjs

@@ -39518,22 +39518,32 @@ var require_DockerClient = __commonJS({
       }
       async listContainers(all = true) {
         const containers = await this.docker.listContainers({ all });
-        return containers.map((c) => ({
-          id: c.Id,
-          name: (c.Names[0] || "").replace(/^\//, ""),
-          image: c.Image,
-          state: c.State,
-          status: c.Status,
-          ports: (c.Ports || []).map((p) => ({
-            hostIp: p.IP || "0.0.0.0",
-            hostPort: p.PublicPort || 0,
-            containerPort: p.PrivatePort,
-            protocol: p.Type || "tcp"
-          })),
-          created: new Date(c.Created * 1e3),
-          composeProject: c.Labels?.["com.docker.compose.project"],
-          composeService: c.Labels?.["com.docker.compose.service"]
-        }));
+        return containers.map((c) => {
+          let healthStatus;
+          if (/\(healthy\)/.test(c.Status))
+            healthStatus = "healthy";
+          else if (/\(unhealthy\)/.test(c.Status))
+            healthStatus = "unhealthy";
+          else if (/\(health: starting\)/.test(c.Status))
+            healthStatus = "starting";
+          return {
+            id: c.Id,
+            name: (c.Names[0] || "").replace(/^\//, ""),
+            image: c.Image,
+            state: c.State,
+            status: c.Status,
+            ports: (c.Ports || []).map((p) => ({
+              hostIp: p.IP || "0.0.0.0",
+              hostPort: p.PublicPort || 0,
+              containerPort: p.PrivatePort,
+              protocol: p.Type || "tcp"
+            })),
+            created: new Date(c.Created * 1e3),
+            composeProject: c.Labels?.["com.docker.compose.project"],
+            composeService: c.Labels?.["com.docker.compose.service"],
+            healthStatus
+          };
+        });
       }
       async startContainer(id) {
         await this.docker.getContainer(id).start();
@@ -39544,6 +39554,12 @@ var require_DockerClient = __commonJS({
       async restartContainer(id) {
         await this.docker.getContainer(id).restart();
       }
+      async pauseContainer(id) {
+        await this.docker.getContainer(id).pause();
+      }
+      async unpauseContainer(id) {
+        await this.docker.getContainer(id).unpause();
+      }
       async removeContainer(id, force = false) {
         await this.docker.getContainer(id).remove({ force });
       }
@@ -39605,6 +39621,7 @@ var require_DockerClient = __commonJS({
         const memStats = raw.memory_stats;
         const netStats = raw.networks;
         const pidsStats = raw.pids_stats;
+        const blkioStats = raw.blkio_stats;
         const cpuUsage = cpuStats?.cpu_usage?.total_usage ?? 0;
         const systemUsage = cpuStats?.system_cpu_usage ?? 0;
         const numCpus = cpuStats?.cpu_usage?.percpu_usage?.length ?? cpuStats?.online_cpus ?? 1;
@@ -39622,6 +39639,18 @@ var require_DockerClient = __commonJS({
             netTx += iface.tx_bytes ?? 0;
           }
         }
+        let blockRead = 0;
+        let blockWrite = 0;
+        const ioServiceBytes = blkioStats?.io_service_bytes_recursive;
+        if (ioServiceBytes) {
+          for (const entry of ioServiceBytes) {
+            const op = (entry.op || "").toLowerCase();
+            if (op === "read")
+              blockRead += entry.value ?? 0;
+            else if (op === "write")
+              blockWrite += entry.value ?? 0;
+          }
+        }
         return {
           stats: {
             cpuPercent: Math.round(cpuPercent * 100) / 100,
@@ -39630,6 +39659,8 @@ var require_DockerClient = __commonJS({
             memoryPercent: Math.round(memPercent * 100) / 100,
             networkRx: netRx,
             networkTx: netTx,
+            blockRead,
+            blockWrite,
             pids: pidsStats?.current ?? 0,
             timestamp: /* @__PURE__ */ new Date()
           },
@@ -40131,6 +40162,36 @@ var require_StatsCollector = __commonJS({
           return void 0;
         return history.samples[history.samples.length - 1];
       }
+      getNetworkRxRateSeries(containerId) {
+        return this.computeRateSeries(containerId, (s) => s.networkRx);
+      }
+      getNetworkTxRateSeries(containerId) {
+        return this.computeRateSeries(containerId, (s) => s.networkTx);
+      }
+      getBlockReadRateSeries(containerId) {
+        return this.computeRateSeries(containerId, (s) => s.blockRead);
+      }
+      getBlockWriteRateSeries(containerId) {
+        return this.computeRateSeries(containerId, (s) => s.blockWrite);
+      }
+      computeRateSeries(containerId, extractor) {
+        const history = this.histories.get(containerId);
+        if (!history || history.samples.length < 2)
+          return [];
+        const rates = [];
+        for (let i = 1; i < history.samples.length; i++) {
+          const prev = history.samples[i - 1];
+          const curr = history.samples[i];
+          const dt = (curr.timestamp.getTime() - prev.timestamp.getTime()) / 1e3;
+          if (dt > 0) {
+            const delta = extractor(curr) - extractor(prev);
+            rates.push(Math.max(0, delta / dt));
+          } else {
+            rates.push(0);
+          }
+        }
+        return rates;
+      }
       remove(containerId) {
         this.histories.delete(containerId);
       }
@@ -77965,6 +78026,29 @@ var import_react37 = __toESM(require_react(), 1);
 var import_sidekick_docker_shared13 = __toESM(require_dist(), 1);
 import { spawnSync } from "child_process";
 
+// src/utils/clipboard.ts
+import { execSync } from "child_process";
+function copyToClipboard(text) {
+  try {
+    if (process.platform === "darwin") {
+      execSync("pbcopy", { input: text });
+    } else {
+      try {
+        execSync("xclip -selection clipboard", { input: text });
+      } catch {
+        try {
+          execSync("xsel --clipboard --input", { input: text });
+        } catch {
+          execSync("wl-copy", { input: text });
+        }
+      }
+    }
+    return true;
+  } catch {
+    return false;
+  }
+}
+
 // src/dashboard/DockerState.ts
 var import_sidekick_docker_shared = __toESM(require_dist(), 1);
 var DockerState = class {
@@ -78271,6 +78355,16 @@ function colorizeDetailKey(line) {
   if (!match) return line;
   return ansi.brand(match[1]) + line.substring(match[1].length);
 }
+function colorizeHealth(status) {
+  switch (status) {
+    case "healthy":
+      return ansi.green(status);
+    case "unhealthy":
+      return ansi.red(status);
+    case "starting":
+      return ansi.yellow(status);
+  }
+}
 function colorizeState(state) {
   switch (state) {
     case "running":
@@ -78316,6 +78410,8 @@ var ContainersPanel = class {
   onAction;
   onError;
   onExec;
+  onCopyLogs;
+  lastMetrics = null;
   constructor(client, onAction, onError) {
     this.client = client;
     this.onAction = onAction;
@@ -78324,6 +78420,9 @@ var ContainersPanel = class {
   setOnExec(handler) {
     this.onExec = handler;
   }
+  setOnCopyLogs(handler) {
+    this.onCopyLogs = handler;
+  }
   detailTabs = [
     {
       label: "Logs",
@@ -78389,7 +78488,22 @@ var ContainersPanel = class {
           lines.push(`        ${coloredSparkline(memSeries, "memory")}`);
         }
         lines.push(
-          colorizeDetailKey(`Net:    \u25BC ${(0, import_sidekick_docker_shared3.formatBytes)(latest.networkRx)}  \u25B2 ${(0, import_sidekick_docker_shared3.formatBytes)(latest.networkTx)}`),
+          colorizeDetailKey(`Net:    \u25BC ${(0, import_sidekick_docker_shared3.formatBytes)(latest.networkRx)}  \u25B2 ${(0, import_sidekick_docker_shared3.formatBytes)(latest.networkTx)}`)
+        );
+        const rxRates = metrics.statsCollector.getNetworkRxRateSeries(c.id);
+        const txRates = metrics.statsCollector.getNetworkTxRateSeries(c.id);
+        if (rxRates.length > 1) {
+          lines.push(`        \u25BC ${coloredSparkline(rxRates, "cpu")}  \u25B2 ${coloredSparkline(txRates, "memory")}`);
+        }
+        lines.push(
+          colorizeDetailKey(`IO:     R ${(0, import_sidekick_docker_shared3.formatBytes)(latest.blockRead)}  W ${(0, import_sidekick_docker_shared3.formatBytes)(latest.blockWrite)}`)
+        );
+        const brRates = metrics.statsCollector.getBlockReadRateSeries(c.id);
+        const bwRates = metrics.statsCollector.getBlockWriteRateSeries(c.id);
+        if (brRates.length > 1) {
+          lines.push(`        R ${coloredSparkline(brRates, "cpu")}  W ${coloredSparkline(bwRates, "memory")}`);
+        }
+        lines.push(
           colorizeDetailKey(`PIDs:   ${latest.pids}`)
         );
         if (metrics.logSeverityTimeSeries.length > 1) {
@@ -78423,6 +78537,7 @@ var ContainersPanel = class {
           sectionHeader("Status"),
           colorizeDetailKey(`  State:   ${colorizeState(c.state)}`),
           colorizeDetailKey(`  Status:  ${c.status}`),
+          ...c.healthStatus ? [colorizeDetailKey(`  Health:  ${colorizeHealth(c.healthStatus)}`)] : [],
           colorizeDetailKey(`  Created: ${c.created.toLocaleString()}`),
           "",
           sectionHeader("Network"),
@@ -78453,13 +78568,15 @@ var ContainersPanel = class {
     }
   ];
   getItems(metrics) {
+    this.lastMetrics = metrics;
     return metrics.containers.map((c) => {
       const uptime = compactUptime(c.status);
       const portHint = c.state === "running" && c.ports.length > 0 ? `:${c.ports[0].hostPort || c.ports[0].containerPort}` : "";
-      const namePart = portHint ? `${(0, import_sidekick_docker_shared3.truncate)(c.name, 16)} ${portHint}` : (0, import_sidekick_docker_shared3.truncate)(c.name, 20);
+      const healthBadge = c.healthStatus ? ` ${colorizeHealth(c.healthStatus)}` : "";
+      const namePart = portHint ? `${(0, import_sidekick_docker_shared3.truncate)(c.name, 34)} ${portHint}` : (0, import_sidekick_docker_shared3.truncate)(c.name, 38);
       return {
         id: c.id,
-        label: `${(0, import_sidekick_docker_shared3.stateIcon)(c.state)} ${namePart}`,
+        label: `${(0, import_sidekick_docker_shared3.stateIcon)(c.state)} ${namePart}${healthBadge}`,
         sortKey: c.state === "running" ? 0 : 1,
         data: c,
         iconColor: (0, import_sidekick_docker_shared3.stateColor)(c.state),
@@ -78497,6 +78614,24 @@ var ContainersPanel = class {
         },
         condition: (item) => item.data.state === "running"
       },
+      {
+        key: "p",
+        label: "Pause",
+        handler: (item) => {
+          const c = item.data;
+          this.client.pauseContainer(c.id).then(() => this.onAction()).catch((e) => this.onError(String(e)));
+        },
+        condition: (item) => item.data.state === "running"
+      },
+      {
+        key: "u",
+        label: "Unpause",
+        handler: (item) => {
+          const c = item.data;
+          this.client.unpauseContainer(c.id).then(() => this.onAction()).catch((e) => this.onError(String(e)));
+        },
+        condition: (item) => item.data.state === "paused"
+      },
       {
         key: "d",
         label: "Remove",
@@ -78515,6 +78650,23 @@ var ContainersPanel = class {
           this.onExec?.(c.id);
         },
         condition: (item) => item.data.state === "running"
+      },
+      {
+        key: "c",
+        label: "Copy Logs",
+        handler: () => {
+          if (!this.lastMetrics || !this.onCopyLogs) return;
+          const logs = this.lastMetrics.selectedContainerLogs;
+          const query = this.lastMetrics.logFilterString;
+          const mode = this.lastMetrics.logFilterMode;
+          let lines;
+          if (query) {
+            lines = logs.filter((l) => (0, import_sidekick_docker_shared4.filterLine)(l.message, query, mode).matched).map((l) => l.message);
+          } else {
+            lines = logs.map((l) => l.message);
+          }
+          this.onCopyLogs(lines.join("\n"));
+        }
       }
     ];
   }
@@ -78600,7 +78752,7 @@ var ServicesPanel = class {
         const icon = (0, import_sidekick_docker_shared3.stateIcon)(service.state);
         items.push({
           id: `service:${project.name}:${service.name}`,
-          label: `  ${icon} ${(0, import_sidekick_docker_shared3.truncate)(service.name, 18)}`,
+          label: `  ${icon} ${(0, import_sidekick_docker_shared3.truncate)(service.name, 36)}`,
           sortKey: sortKey++,
           data: { type: "service", service },
           iconColor: (0, import_sidekick_docker_shared3.stateColor)(service.state)
@@ -78709,7 +78861,7 @@ var ImagesPanel = class {
       const icon = img.isDangling ? "\u25CB" : "\u25CF";
       return {
         id: img.id,
-        label: `${icon} ${(0, import_sidekick_docker_shared3.truncate)(tag, 20)}`,
+        label: `${icon} ${(0, import_sidekick_docker_shared3.truncate)(tag, 38)}`,
         sortKey: img.isDangling ? 1 : 0,
         data: img,
         iconColor: img.isDangling ? "gray" : "#2B4C7E",
@@ -78780,7 +78932,7 @@ var VolumesPanel = class {
       const icon = vol.isInUse ? "\u25CF" : "\u25CB";
       return {
         id: vol.name,
-        label: `${icon} ${(0, import_sidekick_docker_shared3.truncate)(vol.name, 20)}`,
+        label: `${icon} ${(0, import_sidekick_docker_shared3.truncate)(vol.name, 38)}`,
         sortKey: vol.isInUse ? 0 : 1,
         data: vol,
         iconColor: vol.isInUse ? "green" : "gray",
@@ -78862,7 +79014,7 @@ var NetworksPanel = class {
       const countLabel = net.containers.length > 0 ? `${net.containers.length}` : "";
       return {
         id: net.id,
-        label: `${icon} ${(0, import_sidekick_docker_shared3.truncate)(net.name, 20)}`,
+        label: `${icon} ${(0, import_sidekick_docker_shared3.truncate)(net.name, 38)}`,
         sortKey: net.isDefault ? 0 : 1,
         data: net,
         iconColor: net.isDefault ? "#2B4C7E" : "gray",
@@ -79207,6 +79359,7 @@ function useWindowedScroll({ totalItems, viewportHeight }) {
 
 // src/dashboard/ink/useKeyboardHandler.ts
 await init_build2();
+var SORT_FIELDS = ["state", "name", "cpu", "mem", "net", "io", "pids"];
 function executeAction(action, item, dispatch, addToast) {
   if (action.confirm) {
     dispatch({ type: "SET_CONFIRM", action: () => {
@@ -79330,6 +79483,32 @@ function useKeyboardHandler(ctx) {
       }
       return;
     }
+    if (state.overlay === "sort") {
+      if (key.escape) {
+        dispatch({ type: "SET_OVERLAY", overlay: null });
+        return;
+      }
+      if (input === "j" || key.downArrow) {
+        dispatch({ type: "SORT_MENU_NAV", delta: 1 });
+        return;
+      }
+      if (input === "k" || key.upArrow) {
+        dispatch({ type: "SORT_MENU_NAV", delta: -1 });
+        return;
+      }
+      if (input === "R") {
+        dispatch({ type: "TOGGLE_SORT_REVERSE" });
+        addToast(`Sort: ${state.sortReversed ? "ascending" : "descending"}`, "info");
+        return;
+      }
+      if (key.return) {
+        const field = SORT_FIELDS[state.sortMenuIndex];
+        dispatch({ type: "SET_SORT_FIELD", field });
+        addToast(`Sort: ${field}`, "info");
+        return;
+      }
+      return;
+    }
     if (key.escape) {
       if (state.filterString) {
         dispatch({ type: "SET_FILTER", value: "" });
@@ -79362,7 +79541,8 @@ function useKeyboardHandler(ctx) {
     }
     if (input === "z") {
       dispatch({ type: "CYCLE_LAYOUT" });
-      addToast(`Layout: ${state.layoutMode === "normal" ? "Expanded" : "Normal"}`, "info");
+      const nextMode = state.layoutMode === "normal" ? "Wide" : state.layoutMode === "wide" ? "Expanded" : "Normal";
+      addToast(`Layout: ${nextMode}`, "info");
       return;
     }
     if (input === "/") {
@@ -79375,6 +79555,20 @@ function useKeyboardHandler(ctx) {
         return;
       }
     }
+    if (input === "a" && panel.id === "containers") {
+      dispatch({ type: "TOGGLE_SHOW_ALL" });
+      addToast(state.showAllContainers ? "Running only" : "Show all", "info");
+      return;
+    }
+    if (input === "o" && panel.id === "containers") {
+      dispatch({ type: "SET_OVERLAY", overlay: "sort" });
+      return;
+    }
+    if (input === "R" && panel.id === "containers") {
+      dispatch({ type: "TOGGLE_SORT_REVERSE" });
+      addToast(`Sort: ${state.sortReversed ? "ascending" : "descending"}`, "info");
+      return;
+    }
     if (input === "x") {
       if (selectedItem && panelActions.length > 0) {
         dispatch({ type: "SET_OVERLAY", overlay: "context-menu" });
@@ -79573,7 +79767,7 @@ function TabBar({ panels, activeIndex, layoutMode, phrase, panelCounts }) {
       ] }, panel.id);
     }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box_default, { flexGrow: 1, marginLeft: 1, children: phrase && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { color: "gray", wrap: "truncate", children: phrase }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { color: layoutMode === "expanded" ? "#2B4C7E" : "gray", children: `z: ${layoutMode === "expanded" ? "Expanded" : "Normal"} \u25B8` })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { color: layoutMode !== "normal" ? "#2B4C7E" : "gray", children: `z: ${layoutMode === "expanded" ? "Expanded" : layoutMode === "wide" ? "Wide" : "Normal"} \u25B8` })
   ] });
 }
 
@@ -79746,9 +79940,12 @@ var GLOBAL_BINDINGS = [
   { key: "g/G", label: "Jump to first / last" },
   { key: "Tab", label: "Toggle focus" },
   { key: "[/]", label: "Cycle detail tabs" },
-  { key: "z", label: "Toggle expanded layout" },
+  { key: "z", label: "Cycle layout (Normal/Wide/Expanded)" },
   { key: "/", label: "Filter items" },
   { key: "x", label: "Actions menu" },
+  { key: "a", label: "Toggle all/running (Containers)" },
+  { key: "o", label: "Sort menu (Containers)" },
+  { key: "R", label: "Reverse sort (Containers)" },
   { key: "V", label: "Version info" },
   { key: "?", label: "This help" },
   { key: "q", label: "Quit" }
@@ -80087,6 +80284,52 @@ function VersionOverlay({ version: version2 }) {
   ] });
 }
 
+// src/dashboard/ink/SortOverlay.tsx
+await init_build2();
+var import_jsx_runtime16 = __toESM(require_jsx_runtime(), 1);
+var SORT_OPTIONS = [
+  { field: "state", label: "State (running first)" },
+  { field: "name", label: "Name" },
+  { field: "cpu", label: "CPU %" },
+  { field: "mem", label: "Memory %" },
+  { field: "net", label: "Network I/O" },
+  { field: "io", label: "Block I/O" },
+  { field: "pids", label: "PIDs" }
+];
+function SortOverlay({ selectedIndex, currentField, reversed }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    Box_default,
+    {
+      position: "absolute",
+      marginTop: 2,
+      marginLeft: 2,
+      flexDirection: "column",
+      borderStyle: "single",
+      borderColor: "#2B4C7E",
+      paddingX: 1,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.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)(
+            Text,
+            {
+              color: isSelected ? "#2B4C7E" : isCurrent ? "yellow" : "white",
+              bold: isSelected,
+              inverse: isSelected,
+              children: ` ${opt.label}${indicator} `
+            }
+          ) }, 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" })
+      ]
+    }
+  );
+}
+
 // src/dashboard/ink/Dashboard.tsx
 var import_sidekick_docker_shared12 = __toESM(require_dist(), 1);
 
@@ -80145,8 +80388,10 @@ var ExecManager = class {
 };
 
 // src/dashboard/ink/Dashboard.tsx
-var import_jsx_runtime16 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime17 = __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;
 var MIN_SCREEN_WIDTH = 60;
 var MIN_SCREEN_HEIGHT = 15;
 var RESERVED_UI_ROWS = 5;
@@ -80174,7 +80419,7 @@ function reducer(state, action) {
       return { ...state, detailTabIndex: next, detailScrollOffset: 0 };
     }
     case "CYCLE_LAYOUT": {
-      const next = state.layoutMode === "normal" ? "expanded" : "normal";
+      const next = state.layoutMode === "normal" ? "wide" : state.layoutMode === "wide" ? "expanded" : "normal";
       return { ...state, layoutMode: next, focusTarget: next === "expanded" ? "detail" : state.focusTarget };
     }
     case "TOGGLE_FOCUS":
@@ -80231,6 +80476,16 @@ function reducer(state, action) {
       return { ...state, logFilterString: action.value };
     case "TOGGLE_LOG_FILTER_MODE":
       return { ...state, logFilterMode: state.logFilterMode === "exact" ? "fuzzy" : "exact" };
+    case "TOGGLE_SHOW_ALL":
+      return { ...state, showAllContainers: !state.showAllContainers, selectedItemIndex: 0 };
+    case "SET_SORT_FIELD":
+      return { ...state, sortField: action.field, overlay: null };
+    case "TOGGLE_SORT_REVERSE":
+      return { ...state, sortReversed: !state.sortReversed };
+    case "SORT_MENU_NAV": {
+      const next = (state.sortMenuIndex + action.delta + SORT_FIELDS2.length) % SORT_FIELDS2.length;
+      return { ...state, sortMenuIndex: next };
+    }
     default:
       return state;
   }
@@ -80252,7 +80507,11 @@ var initialState = {
   execContainerId: null,
   execContainerName: "",
   logFilterString: "",
-  logFilterMode: "exact"
+  logFilterMode: "exact",
+  showAllContainers: true,
+  sortField: "state",
+  sortReversed: false,
+  sortMenuIndex: 0
 };
 function Dashboard({ panels, metrics, onSelectionChange, execTriggerRef, onExecFallback }) {
   const [state, dispatch] = (0, import_react36.useReducer)(reducer, initialState);
@@ -80261,17 +80520,19 @@ function Dashboard({ panels, metrics, onSelectionChange, execTriggerRef, onExecF
   const execManagerRef = (0, import_react36.useRef)(null);
   const [phrase, setPhrase] = import_react36.default.useState(() => (0, import_sidekick_docker_shared12.getRandomPhrase)());
   const phraseTimerRef = (0, import_react36.useRef)(null);
-  const rotatePhrase = (0, import_react36.useCallback)(() => {
+  const rotatePhraseRef = (0, import_react36.useRef)(void 0);
+  rotatePhraseRef.current = () => {
     setPhrase((0, import_sidekick_docker_shared12.getRandomPhrase)());
     if (phraseTimerRef.current) clearTimeout(phraseTimerRef.current);
-    phraseTimerRef.current = setTimeout(rotatePhrase, 7e3);
-  }, []);
+    phraseTimerRef.current = setTimeout(() => rotatePhraseRef.current?.(), 7e3);
+  };
+  const rotatePhrase = (0, import_react36.useCallback)(() => rotatePhraseRef.current?.(), []);
   (0, import_react36.useEffect)(() => {
-    phraseTimerRef.current = setTimeout(rotatePhrase, 7e3);
+    phraseTimerRef.current = setTimeout(() => rotatePhraseRef.current?.(), 7e3);
     return () => {
       if (phraseTimerRef.current) clearTimeout(phraseTimerRef.current);
     };
-  }, [rotatePhrase]);
+  }, []);
   (0, import_react36.useEffect)(() => {
     if (!execTriggerRef) return;
     execTriggerRef.current = (containerId, containerName) => {
@@ -80336,11 +80597,17 @@ function Dashboard({ panels, metrics, onSelectionChange, execTriggerRef, onExecF
   }, []);
   const panel = panels[state.activePanelIndex];
   const tooSmall = columns < MIN_SCREEN_WIDTH || rows < MIN_SCREEN_HEIGHT;
-  const sideWidth = state.layoutMode === "expanded" ? 0 : SIDE_PANEL_WIDTH;
+  const sideWidth = state.layoutMode === "expanded" ? 0 : state.layoutMode === "wide" ? SIDE_PANEL_WIDTH_WIDE : SIDE_PANEL_WIDTH;
   const allItems = panel.getItems(metrics);
   const totalItemCount = allItems.length;
   const currentItems = (() => {
     let items = allItems;
+    if (panel.id === "containers" && !state.showAllContainers) {
+      items = items.filter((it) => {
+        const c = it.data;
+        return c.state === "running" || c.state === "paused";
+      });
+    }
     if (state.filterString) {
       const f = state.filterString.toLowerCase();
       items = items.filter((it) => {
@@ -80348,7 +80615,47 @@ function Dashboard({ panels, metrics, onSelectionChange, execTriggerRef, onExecF
         return text.toLowerCase().includes(f);
       });
     }
-    items.sort((a, b) => a.sortKey - b.sortKey);
+    if (panel.id === "containers" && state.sortField !== "state") {
+      const dir = state.sortReversed ? -1 : 1;
+      items.sort((a, b) => {
+        const ca = a.data;
+        const cb = b.data;
+        switch (state.sortField) {
+          case "name":
+            return dir * ca.name.localeCompare(cb.name);
+          case "cpu": {
+            const sa = metrics.statsCollector.getLatest(ca.id)?.cpuPercent ?? 0;
+            const sb = metrics.statsCollector.getLatest(cb.id)?.cpuPercent ?? 0;
+            return dir * (sb - sa);
+          }
+          case "mem": {
+            const sa = metrics.statsCollector.getLatest(ca.id)?.memoryPercent ?? 0;
+            const sb = metrics.statsCollector.getLatest(cb.id)?.memoryPercent ?? 0;
+            return dir * (sb - sa);
+          }
+          case "net": {
+            const sa = metrics.statsCollector.getLatest(ca.id);
+            const sb = metrics.statsCollector.getLatest(cb.id);
+            return dir * ((sb?.networkRx ?? 0) + (sb?.networkTx ?? 0) - ((sa?.networkRx ?? 0) + (sa?.networkTx ?? 0)));
+          }
+          case "io": {
+            const sa = metrics.statsCollector.getLatest(ca.id);
+            const sb = metrics.statsCollector.getLatest(cb.id);
+            return dir * ((sb?.blockRead ?? 0) + (sb?.blockWrite ?? 0) - ((sa?.blockRead ?? 0) + (sa?.blockWrite ?? 0)));
+          }
+          case "pids": {
+            const sa = metrics.statsCollector.getLatest(ca.id)?.pids ?? 0;
+            const sb = metrics.statsCollector.getLatest(cb.id)?.pids ?? 0;
+            return dir * (sb - sa);
+          }
+          default:
+            return a.sortKey - b.sortKey;
+        }
+      });
+    } else {
+      const dir = state.sortReversed ? -1 : 1;
+      items.sort((a, b) => dir * (a.sortKey - b.sortKey));
+    }
     return items;
   })();
   const clampedSelection = Math.min(state.selectedItemIndex, Math.max(0, currentItems.length - 1));
@@ -80437,14 +80744,14 @@ function Dashboard({ panels, metrics, onSelectionChange, execTriggerRef, onExecF
     rotatePhrase
   });
   if (tooSmall) {
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TooSmallOverlay, { columns, rows });
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TooSmallOverlay, { columns, rows });
   }
   const showNormalLayout = state.overlay !== "help" && state.overlay !== "exec" && state.overlay !== "version";
   const panelActionHints = applicableActions.map((a) => ({ key: a.key, label: a.label, destructive: !!a.confirm }));
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MouseProvider, { onMouse: handleMouse, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Box_default, { flexDirection: "column", height: rows, width: columns, children: [
-    showNormalLayout && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TabBar, { panels, activeIndex: state.activePanelIndex, layoutMode: state.layoutMode, phrase, panelCounts }),
-    showNormalLayout && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Box_default, { flexGrow: 1, flexDirection: "row", children: [
-      sideWidth > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  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)(
         SideList,
         {
           items: currentItems,
@@ -80460,9 +80767,9 @@ function Dashboard({ panels, metrics, onSelectionChange, execTriggerRef, onExecF
           runningCount: panel.id === "containers" ? runningCount : void 0
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Box_default, { flexDirection: "column", flexGrow: 1, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DetailTabBar, { tabs: detailTabs, activeIndex: state.detailTabIndex }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      /* @__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)(
           DetailPane,
           {
             content: detailContent,
@@ -80473,16 +80780,16 @@ function Dashboard({ panels, metrics, onSelectionChange, execTriggerRef, onExecF
         )
       ] })
     ] }),
-    state.overlay === "help" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(HelpOverlay, { panels, activePanelIndex: state.activePanelIndex, version: "0.1.3" }),
-    state.overlay === "version" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(VersionOverlay, { version: "0.1.3" }),
-    state.overlay === "exec" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    state.overlay === "help" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(HelpOverlay, { panels, activePanelIndex: state.activePanelIndex, version: "0.1.5" }),
+    state.overlay === "version" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(VersionOverlay, { version: "0.1.5" }),
+    state.overlay === "exec" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       ExecOverlay,
       {
         containerName: state.execContainerName,
         outputLines: state.execOutputLines
       }
     ),
-    state.overlay !== "exec" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    state.overlay !== "exec" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       StatusBar,
       {
         daemonConnected: metrics.daemonConnected,
@@ -80491,14 +80798,14 @@ function Dashboard({ panels, metrics, onSelectionChange, execTriggerRef, onExecF
         filterString: state.filterString,
         containerCount: metrics.containers.length,
         runningCount,
-        version: "0.1.3",
+        version: "0.1.5",
         matchCount: state.filterString ? currentItems.length : void 0,
         totalCount: state.filterString ? totalItemCount : void 0,
         lastRefresh: metrics.lastRefresh
       }
     ),
-    state.overlay === "context-menu" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ContextMenuOverlay, { actions: contextActions, selectedIndex: state.contextMenuIndex }),
-    state.overlay === "filter" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    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)(
       FilterOverlay,
       {
         filterString: state.filterString,
@@ -80507,14 +80814,15 @@ function Dashboard({ panels, metrics, onSelectionChange, execTriggerRef, onExecF
         panelTitle: panel.title
       }
     ),
-    state.overlay === "log-filter" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    state.overlay === "log-filter" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       LogFilterOverlay,
       {
         filterString: state.logFilterString,
         filterMode: state.logFilterMode
       }
     ),
-    state.overlay === "confirm" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    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)(
       ConfirmOverlay,
       {
         message: state.confirmMessage,
@@ -80525,7 +80833,7 @@ function Dashboard({ panels, metrics, onSelectionChange, execTriggerRef, onExecF
         onCancel: () => dispatch({ type: "SET_CONFIRM", action: null, message: "" })
       }
     ),
-    state.toasts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ToastNotification, { toast: state.toasts[state.toasts.length - 1] })
+    state.toasts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ToastNotification, { toast: state.toasts[state.toasts.length - 1] })
   ] }) });
 }
 
@@ -80650,6 +80958,9 @@ async function dashboardAction(_opts, cmd) {
       onExecFallback(containerId);
     }
   });
+  containersPanel.setOnCopyLogs((text) => {
+    copyToClipboard(text);
+  });
   let renderTimer = null;
   function getEnrichedMetrics() {
     const m = state.getMetrics();
@@ -80773,7 +81084,7 @@ async function logsAction(container, opts) {
 
 // src/cli.ts
 var program2 = new Command();
-program2.name("sidekick-docker").description("Docker management TUI dashboard").version("0.1.3").option("--socket <path>", "Docker socket path").action(async (_opts, cmd) => {
+program2.name("sidekick-docker").description("Docker management TUI dashboard").version("0.1.5").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.1.3",
+  "version": "0.1.5",
   "description": "Docker management TUI dashboard",
   "author": "Cesar Andres Lopez <cesarandreslopez@gmail.com>",
   "repository": {