claude-ps 0.2.1 → 0.2.2

package/dist/index.js

@@ -15,10 +15,6 @@ import { Box as Box7, Text as Text7, useApp, useInput, useStdout } from "ink";
 import { Box, Text } from "ink";
 
 // src/constants/theme.ts
-var USAGE_THRESHOLD = {
-  LOW: 30,
-  HIGH: 70
-};
 var COLORS = {
   /** 使用率颜色 */
   usage: {
@@ -47,11 +43,6 @@ var COLUMN_WIDTH = {
   elapsed: 9
 };
 var ESTIMATED_TOTAL_MEMORY_MB = 16 * 1024;
-function getUsageColor(percent) {
-  if (percent < USAGE_THRESHOLD.LOW) return COLORS.usage.low;
-  if (percent < USAGE_THRESHOLD.HIGH) return COLORS.usage.medium;
-  return COLORS.usage.high;
-}
 
 // src/components/ui/StatusBar.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -71,7 +62,7 @@ function calculateStats(processes) {
 }
 function StatusBar({ processes }) {
   const stats = calculateStats(processes);
-  return /* @__PURE__ */ jsxs(Box, { paddingX: 1, children: [
+  return /* @__PURE__ */ jsxs(Box, { height: 2, children: [
     /* @__PURE__ */ jsx(Text, { color: COLORS.label, children: "\u8FDB\u7A0B: " }),
     /* @__PURE__ */ jsx(Text, { color: COLORS.value, children: stats.count }),
     /* @__PURE__ */ jsx(Text, { color: COLORS.label, children: " | CPU: " }),
@@ -199,16 +190,6 @@ function formatElapsed(elapsed) {
   }
   return elapsed;
 }
-function shortenPath(inputPath, maxLen = 25) {
-  let path = inputPath;
-  const home = process.env.HOME || "";
-  if (home && path.startsWith(home)) {
-    path = `~${path.slice(home.length)}`;
-  }
-  if (path.length <= maxLen) return path;
-  const half = Math.floor((maxLen - 3) / 2);
-  return `${path.slice(0, half)}...${path.slice(-half)}`;
-}
 
 // src/components/ui/DetailPanel.tsx
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
@@ -216,29 +197,25 @@ function DetailPanel({ process: proc }) {
   if (!proc) {
     return /* @__PURE__ */ jsx4(EmptyPrompt, { message: "\u9009\u62E9\u4E00\u4E2A\u8FDB\u7A0B\u67E5\u770B\u8BE6\u60C5" });
   }
-  return /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", paddingX: 1, children: [
+  return /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", children: [
     /* @__PURE__ */ jsxs4(Section, { title: "\u8D44\u6E90\u4FE1\u606F", children: [
       /* @__PURE__ */ jsx4(InfoRow, { label: "CPU", value: `${proc.cpu.toFixed(1)}%` }),
       /* @__PURE__ */ jsx4(InfoRow, { label: "\u5185\u5B58", value: formatMemory(proc.memory) }),
       /* @__PURE__ */ jsx4(InfoRow, { label: "\u65F6\u957F", value: formatElapsed(proc.elapsed) })
     ] }),
-    /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", paddingBottom: 1, children: [
       /* @__PURE__ */ jsx4(Text4, { children: " " }),
       /* @__PURE__ */ jsx4(Text4, { bold: true, color: "cyan", children: "Session:" }),
       /* @__PURE__ */ jsx4(Text4, { color: COLORS.label, wrap: "truncate", children: proc.sessionPath || "\u65E0\u4F1A\u8BDD\u6587\u4EF6" })
     ] }),
-    /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", children: [
-      /* @__PURE__ */ jsx4(Text4, { bold: true, color: "cyan", children: "\u2500 \u6700\u8FD1\u5BF9\u8BDD \u2500" }),
-      proc.messages.length === 0 ? /* @__PURE__ */ jsx4(Text4, { color: COLORS.label, children: "\u65E0\u5BF9\u8BDD\u8BB0\u5F55" }) : proc.messages.map((msg) => /* @__PURE__ */ jsxs4(Box4, { flexDirection: "row", children: [
-        /* @__PURE__ */ jsxs4(Text4, { color: msg.role === "user" ? COLORS.current : "blue", children: [
-          "[",
-          msg.role === "user" ? "User" : "Claude",
-          "]",
-          " "
-        ] }),
-        /* @__PURE__ */ jsx4(Text4, { wrap: "truncate", children: msg.content })
-      ] }, msg.timestamp))
-    ] })
+    /* @__PURE__ */ jsx4(Box4, { paddingBottom: 1, children: /* @__PURE__ */ jsx4(Text4, { bold: true, color: "cyan", children: "\u6700\u8FD1\u5BF9\u8BDD" }) }),
+    /* @__PURE__ */ jsx4(Box4, { flexDirection: "column", children: proc.messages.length === 0 ? /* @__PURE__ */ jsx4(Text4, { color: COLORS.label, children: "\u65E0\u5BF9\u8BDD\u8BB0\u5F55" }) : proc.messages.map((msg) => /* @__PURE__ */ jsxs4(Box4, { flexDirection: "row", children: [
+      /* @__PURE__ */ jsxs4(Text4, { color: msg.role === "user" ? COLORS.current : "blue", children: [
+        msg.role === "user" ? "[User]" : "[Claude]",
+        " "
+      ] }),
+      /* @__PURE__ */ jsx4(Text4, { wrap: "truncate", children: msg.content })
+    ] }, msg.timestamp)) })
   ] });
 }
 
@@ -246,52 +223,58 @@ function DetailPanel({ process: proc }) {
 import { Box as Box6, Text as Text6 } from "ink";
 
 // src/components/ui/ProcessItem.tsx
-import { Box as Box5, Text as Text5 } from "ink";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Text as Text5 } from "ink";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var PADDING_X = 1;
+var BG_CODES = {
+  reset: "\x1B[49m",
+  blue: "\x1B[48;5;24m",
+  // 深蓝背景
+  gray: "\x1B[48;5;240m"
+  // 深灰背景
+};
+function withBgColor(text, bgColor) {
+  return `${BG_CODES[bgColor]}${text}${BG_CODES.reset}`;
+}
 function ProcessItem({ process: process2, isSelected }) {
   let cwdColor = void 0;
   if (process2.isOrphan) cwdColor = "red";
   else if (process2.isCurrent) cwdColor = "green";
-  const pidText = String(process2.pid).padStart(COLUMN_WIDTH.pid - 1);
-  const cpuText = `${process2.cpu.toFixed(1)}%`.padStart(COLUMN_WIDTH.cpu - 1);
-  const memText = `${process2.memory.toFixed(1)}%`.padStart(COLUMN_WIDTH.memory - 1);
-  const elapsedText = formatElapsed(process2.elapsed).padEnd(COLUMN_WIDTH.elapsed);
-  const cwdText = shortenPath(process2.cwd, 30) + (process2.isCurrent ? " \u25CF" : "");
-  return /* @__PURE__ */ jsx5(Box5, { children: /* @__PURE__ */ jsxs5(
+  const pidText = String(process2.pid).padEnd(COLUMN_WIDTH.pid);
+  const cpuText = `${process2.cpu.toFixed(1)}%`.padEnd(COLUMN_WIDTH.cpu);
+  const memText = `${process2.memory.toFixed(1)}%`.padEnd(COLUMN_WIDTH.memory);
+  const elapsedText = formatElapsed(process2.elapsed).padEnd(
+    COLUMN_WIDTH.elapsed
+  );
+  const cwdText = process2.cwd;
+  const rowText = pidText + cpuText + memText + elapsedText + cwdText + " ".repeat(PADDING_X);
+  const displayText = isSelected ? withBgColor(rowText, "blue") : rowText;
+  return /* @__PURE__ */ jsx5(
     Text5,
     {
-      inverse: isSelected,
       color: isSelected ? void 0 : cwdColor,
       dimColor: !isSelected && cwdColor === void 0,
-      children: [
-        " ".repeat(PADDING_X),
-        pidText,
-        /* @__PURE__ */ jsx5(Text5, { color: getUsageColor(process2.cpu), inverse: isSelected, children: cpuText }),
-        /* @__PURE__ */ jsx5(Text5, { color: getUsageColor(process2.memory), inverse: isSelected, children: memText }),
-        /* @__PURE__ */ jsx5(Text5, { inverse: isSelected, color: isSelected ? void 0 : "gray", children: elapsedText }),
-        /* @__PURE__ */ jsx5(Text5, { color: cwdColor, inverse: isSelected, children: cwdText }),
-        " ".repeat(PADDING_X)
-      ]
+      children: displayText
     }
-  ) });
+  );
 }
 
 // src/components/ProcessList.tsx
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function TableHeader() {
-  return /* @__PURE__ */ jsxs6(Box6, { paddingX: 1, children: [
-    /* @__PURE__ */ jsx6(Box6, { width: COLUMN_WIDTH.pid, children: /* @__PURE__ */ jsx6(Text6, { bold: true, color: COLORS.title, children: "PID" }) }),
-    /* @__PURE__ */ jsx6(Box6, { width: COLUMN_WIDTH.cpu, children: /* @__PURE__ */ jsx6(Text6, { bold: true, color: COLORS.title, children: "CPU" }) }),
-    /* @__PURE__ */ jsx6(Box6, { width: COLUMN_WIDTH.memory, children: /* @__PURE__ */ jsx6(Text6, { bold: true, color: COLORS.title, children: "MEM" }) }),
-    /* @__PURE__ */ jsx6(Box6, { width: COLUMN_WIDTH.elapsed, children: /* @__PURE__ */ jsx6(Text6, { bold: true, color: COLORS.title, children: "\u65F6\u957F" }) }),
-    /* @__PURE__ */ jsx6(Text6, { bold: true, color: COLORS.title, children: "\u5DE5\u4F5C\u76EE\u5F55" })
+  return /* @__PURE__ */ jsxs5(Text6, { bold: true, color: COLORS.title, children: [
+    "PID".padEnd(COLUMN_WIDTH.pid),
+    "CPU".padEnd(COLUMN_WIDTH.cpu),
+    "MEM".padEnd(COLUMN_WIDTH.memory),
+    "\u65F6\u957F".padEnd(COLUMN_WIDTH.elapsed),
+    "\u5DE5\u4F5C\u76EE\u5F55"
   ] });
 }
 function ProcessList({
   processes,
   selectedIndex,
-  loading
+  loading,
+  leftWidth
 }) {
   if (loading) {
     return /* @__PURE__ */ jsx6(LoadingState, { message: "\u52A0\u8F7D\u4E2D..." });
@@ -299,9 +282,9 @@ function ProcessList({
   if (processes.length === 0) {
     return /* @__PURE__ */ jsx6(EmptyPrompt, { message: "\u65E0\u8FD0\u884C\u4E2D\u7684 Claude \u8FDB\u7A0B" });
   }
-  return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", children: [
+  return /* @__PURE__ */ jsxs5(Box6, { flexDirection: "column", children: [
     /* @__PURE__ */ jsx6(TableHeader, {}),
-    /* @__PURE__ */ jsx6(Separator, { char: "\u2500", length: 60 }),
+    /* @__PURE__ */ jsx6(Separator, { char: "\u2500", length: leftWidth - 12 }),
     processes.map((proc, index) => /* @__PURE__ */ jsx6(
       ProcessItem,
       {
@@ -526,7 +509,7 @@ function useProcesses(interval2) {
 }
 
 // src/App.tsx
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function App({ interval: interval2 }) {
   const { exit } = useApp();
   const { stdout } = useStdout();
@@ -564,57 +547,74 @@ function App({ interval: interval2 }) {
   });
   const leftWidth = Math.floor(termWidth * 0.45);
   const rightWidth = termWidth - leftWidth - 1;
-  const contentHeight = termHeight - 10;
+  const contentHeight = termHeight - 4;
   if (error) {
-    return /* @__PURE__ */ jsx7(Box7, { flexDirection: "column", width: termWidth, height: termHeight, children: /* @__PURE__ */ jsxs7(Text7, { color: COLORS.orphan, children: [
+    return /* @__PURE__ */ jsx7(Box7, { flexDirection: "column", width: termWidth, height: termHeight, children: /* @__PURE__ */ jsxs6(Text7, { color: COLORS.orphan, children: [
       "\u9519\u8BEF: ",
       error
     ] }) });
   }
-  return /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", width: termWidth, height: termHeight, children: [
-    /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", paddingX: 2, children: [
-      /* @__PURE__ */ jsx7(Text7, { bold: true, color: "cyan", children: `
-     _           _ _     _
-    | |         | | |   | |
-  __| | ___  ___| | | __| |
- / _\` |/ _ / __| | |/ _\` |
-| (_| | (_) \\__ \\_   (_| |
- \\__,_|\\___/|___/ |_|\\__,_|
-                    ` }),
-      /* @__PURE__ */ jsx7(Text7, { color: "gray", children: "Claude Code \u8FDB\u7A0B\u7BA1\u7406\u5668" })
-    ] }),
-    /* @__PURE__ */ jsx7(StatusBar, { processes }),
-    /* @__PURE__ */ jsxs7(Box7, { height: contentHeight, children: [
-      /* @__PURE__ */ jsx7(Box7, { width: leftWidth, flexDirection: "column", height: contentHeight, children: /* @__PURE__ */ jsx7(
-        ProcessList,
-        {
-          processes,
-          selectedIndex,
-          loading
-        }
-      ) }),
-      /* @__PURE__ */ jsx7(Box7, { width: 1, flexDirection: "column", height: contentHeight, children: /* @__PURE__ */ jsx7(Text7, { color: COLORS.label, children: "\u2502\n".repeat(contentHeight).trim() }) }),
-      /* @__PURE__ */ jsx7(Box7, { width: rightWidth, flexDirection: "column", height: contentHeight, children: /* @__PURE__ */ jsx7(DetailPanel, { process: selectedProcess }) })
-    ] }),
-    /* @__PURE__ */ jsx7(
-      Box7,
-      {
-        borderStyle: "single",
-        borderTop: true,
-        borderBottom: false,
-        borderLeft: false,
-        borderRight: false,
-        children: /* @__PURE__ */ jsx7(
-          HelpBar,
+  return /* @__PURE__ */ jsxs6(
+    Box7,
+    {
+      flexDirection: "column",
+      width: termWidth,
+      height: termHeight,
+      paddingX: 4,
+      children: [
+        /* @__PURE__ */ jsxs6(Box7, { height: contentHeight, children: [
+          /* @__PURE__ */ jsxs6(Box7, { width: leftWidth, flexDirection: "column", height: contentHeight, children: [
+            /* @__PURE__ */ jsx7(Box7, { flexDirection: "column", children: /* @__PURE__ */ jsx7(Text7, { bold: true, color: "cyan", children: `
+\u250F\u2501\u2578\u257B  \u250F\u2501\u2513\u257B \u257B\u257A\u2533\u2513\u250F\u2501\u2578   \u250F\u2501\u2513\u250F\u2501\u2513
+\u2503  \u2503  \u2523\u2501\u252B\u2503 \u2503 \u2503\u2503\u2523\u2578 \u257A\u2501\u2578\u2523\u2501\u251B\u2517\u2501\u2513
+\u2517\u2501\u2578\u2517\u2501\u2578\u2579 \u2579\u2517\u2501\u251B\u257A\u253B\u251B\u2517\u2501\u2578   \u2579  \u2517\u2501\u251B
+` }) }),
+            /* @__PURE__ */ jsx7(Box7, { flexDirection: "column", height: 2, children: /* @__PURE__ */ jsx7(Text7, { color: "gray", children: "Claude Code \u8FDB\u7A0B\u7BA1\u7406\u5668" }) }),
+            /* @__PURE__ */ jsx7(StatusBar, { processes }),
+            /* @__PURE__ */ jsx7(
+              ProcessList,
+              {
+                leftWidth,
+                processes,
+                selectedIndex,
+                loading
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx7(Box7, { width: 1, flexDirection: "column", height: contentHeight, children: /* @__PURE__ */ jsx7(Text7, { color: COLORS.label, children: "\u2502\n".repeat(contentHeight).trim() }) }),
+          /* @__PURE__ */ jsx7(
+            Box7,
+            {
+              width: rightWidth,
+              flexDirection: "column",
+              height: contentHeight,
+              paddingX: 4,
+              paddingY: 2,
+              children: /* @__PURE__ */ jsx7(DetailPanel, { process: selectedProcess })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx7(
+          Box7,
           {
-            processCount: processes.length,
-            interval: interval2,
-            sortField
+            borderStyle: "single",
+            borderTop: true,
+            borderBottom: false,
+            borderLeft: false,
+            borderRight: false,
+            children: /* @__PURE__ */ jsx7(
+              HelpBar,
+              {
+                processCount: processes.length,
+                interval: interval2,
+                sortField
+              }
+            )
           }
         )
-      }
-    )
-  ] });
+      ]
+    }
+  );
 }
 
 // src/index.tsx
@@ -640,6 +640,11 @@ var cli = meow(
   {
     importMeta: import.meta,
     flags: {
+      help: {
+        type: "boolean",
+        shortFlag: "h",
+        default: false
+      },
       list: {
         type: "boolean",
         shortFlag: "l",
@@ -654,6 +659,11 @@ var cli = meow(
         type: "number",
         shortFlag: "i",
         default: 2
+      },
+      version: {
+        type: "boolean",
+        shortFlag: "v",
+        default: false
       }
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "claude-ps",
-	"version": "0.2.1",
+	"version": "0.2.2",
 	"description": "TUI application for viewing and managing Claude Code processes",
 	"type": "module",
 	"main": "dist/index.js",