claude-scope 0.8.13 → 0.8.15

package/dist/claude-scope.cjs

@@ -6997,6 +6997,11 @@ function generateBalancedLayout(style, themeName) {
             bar: theme.context.bar
           }
         },
+        {
+          id: "lines",
+          style,
+          colors: { added: theme.lines.added, removed: theme.lines.removed }
+        },
         {
           id: "cost",
           style,
@@ -7006,11 +7011,6 @@ function generateBalancedLayout(style, themeName) {
           id: "duration",
           style,
           colors: { value: theme.duration.value, unit: theme.duration.unit }
-        },
-        {
-          id: "lines",
-          style,
-          colors: { added: theme.lines.added, removed: theme.lines.removed }
         }
       ],
       "1": [
@@ -7019,6 +7019,11 @@ function generateBalancedLayout(style, themeName) {
           style,
           colors: { branch: theme.git.branch, changes: theme.git.changes }
         },
+        {
+          id: "git-tag",
+          style,
+          colors: { base: theme.base.text }
+        },
         {
           id: "cache-metrics",
           style,
@@ -7033,21 +7038,7 @@ function generateBalancedLayout(style, themeName) {
         {
           id: "config-count",
           style,
-          colors: {
-            base: theme.base.muted
-          }
-        },
-        {
-          id: "active-tools",
-          style,
-          colors: {
-            running: theme.tools.running,
-            completed: theme.tools.completed,
-            error: theme.tools.error,
-            name: theme.tools.name,
-            target: theme.tools.target,
-            count: theme.tools.count
-          }
+          colors: { base: theme.base.muted }
         }
       ]
     }
@@ -7115,14 +7106,14 @@ function generateRichLayout(style, themeName) {
           }
         },
         {
-          id: "cost",
+          id: "lines",
           style,
-          colors: { amount: theme.cost.amount, currency: theme.cost.currency }
+          colors: { added: theme.lines.added, removed: theme.lines.removed }
         },
         {
-          id: "lines",
+          id: "cost",
           style,
-          colors: { added: theme.lines.added, removed: theme.lines.removed }
+          colors: { amount: theme.cost.amount, currency: theme.cost.currency }
         },
         {
           id: "duration",
@@ -7141,20 +7132,6 @@ function generateRichLayout(style, themeName) {
           style,
           colors: { base: theme.base.text }
         },
-        {
-          id: "active-tools",
-          style,
-          colors: {
-            running: theme.tools.running,
-            completed: theme.tools.completed,
-            error: theme.tools.error,
-            name: theme.tools.name,
-            target: theme.tools.target,
-            count: theme.tools.count
-          }
-        }
-      ],
-      "2": [
         {
           id: "cache-metrics",
           style,
@@ -7171,6 +7148,39 @@ function generateRichLayout(style, themeName) {
           style,
           colors: { base: theme.base.muted }
         }
+      ],
+      "2": [
+        {
+          id: "dev-server",
+          style,
+          colors: {
+            name: theme.devServer.name,
+            status: theme.devServer.status,
+            label: theme.devServer.label
+          }
+        },
+        {
+          id: "docker",
+          style,
+          colors: {
+            label: theme.docker.label,
+            count: theme.docker.count,
+            running: theme.docker.running,
+            stopped: theme.docker.stopped
+          }
+        },
+        {
+          id: "active-tools",
+          style,
+          colors: {
+            running: theme.tools.running,
+            completed: theme.tools.completed,
+            error: theme.tools.error,
+            name: theme.tools.name,
+            target: theme.tools.target,
+            count: theme.tools.count
+          }
+        }
       ]
     }
   };
@@ -7222,19 +7232,19 @@ async function selectLayout() {
   const layoutChoices = [
     {
       name: "Balanced",
-      description: "2 lines: AI metrics + Git, Cache, Tools, MCP, Hooks",
+      description: "2 lines: Model|Context|Lines|Cost|Duration + Git|GitTag|Cache|Config",
       value: "balanced",
       getConfig: (s, t) => generateBalancedLayout(s, t)
     },
     {
       name: "Compact",
-      description: "1 line: Model, Context, Cost, Git, Duration",
+      description: "1 line: Model|Context|Cost|Git|Duration",
       value: "compact",
       getConfig: (s, t) => generateCompactLayout(s, t)
     },
     {
       name: "Rich",
-      description: "3 lines: Full details with Git Tag, Config Count",
+      description: "3 lines: + Dev Server|Docker|Active Tools on line 3",
       value: "rich",
       getConfig: (s, t) => generateRichLayout(s, t)
     }
@@ -7581,11 +7591,130 @@ init_context_widget();
 init_cost_widget();
 
 // src/widgets/dev-server/dev-server-widget.ts
-var import_node_child_process2 = require("node:child_process");
-var import_node_util3 = require("node:util");
 init_widget_types();
 init_theme();
 
+// src/widgets/dev-server/port-detector.ts
+var import_node_child_process2 = require("node:child_process");
+var import_node_util3 = require("node:util");
+var execFileAsync2 = (0, import_node_util3.promisify)(import_node_child_process2.execFile);
+var PORT_MAPPING = {
+  5173: { name: "Vite", icon: "\u26A1" },
+  4200: { name: "Angular", icon: "\u25B2" },
+  3e3: { name: "Dev", icon: "\u{1F680}" },
+  8080: { name: "Webpack", icon: "\u{1F4E6}" },
+  8e3: { name: "Dev", icon: "\u{1F680}" },
+  8888: { name: "Dev", icon: "\u{1F680}" }
+};
+var DEV_PORTS = [5173, 4200, 3e3, 8080, 8e3, 8888];
+var PortDetector = class {
+  execFn;
+  /**
+   * Create a new PortDetector
+   * @param execFn - Optional execFile function for testing (dependency injection)
+   */
+  constructor(execFn) {
+    this.execFn = execFn ?? execFileAsync2;
+  }
+  /**
+   * Detect running dev servers by checking listening ports
+   * @returns Detected server info or null
+   */
+  async detect() {
+    try {
+      const args = [
+        "-nP",
+        // No host names, no port names
+        "-iTCP",
+        // Internet TCP
+        "-sTCP:LISTEN"
+        // TCP LISTEN state only
+      ];
+      for (const port of DEV_PORTS) {
+        args.push("-i", `:${port}`);
+      }
+      const { stdout } = await this.execFn("lsof", args, {
+        timeout: 2e3
+      });
+      const lines = stdout.trim().split("\n");
+      for (const line of lines) {
+        if (!line || line.startsWith("COMMAND")) continue;
+        const match = line.match(/:(\d+)\s*\(LISTEN\)/);
+        if (match) {
+          const port = parseInt(match[1], 10);
+          const mapping = PORT_MAPPING[port];
+          if (mapping) {
+            return {
+              name: mapping.name,
+              icon: mapping.icon,
+              port,
+              isRunning: true,
+              isBuilding: false
+            };
+          }
+        }
+      }
+      return null;
+    } catch {
+      return null;
+    }
+  }
+};
+
+// src/widgets/dev-server/process-detector.ts
+var import_node_child_process3 = require("node:child_process");
+var import_node_util4 = require("node:util");
+var execFileAsync3 = (0, import_node_util4.promisify)(import_node_child_process3.execFile);
+var ProcessDetector = class {
+  execFn;
+  processPatterns = [
+    // Generic server patterns - more specific to avoid shell history false positives
+    { regex: /^[\w\s]+\/npm\s+(exec|run)\s+serve/i, name: "Server", icon: "\u{1F310}" },
+    { regex: /^[\w\s]+\/npx\s+serve\s+-/i, name: "Server", icon: "\u{1F310}" },
+    { regex: /^[\w\s]+\/(python|python3)\s+-m\s+http\.server/i, name: "HTTP", icon: "\u{1F310}" },
+    // Generic dev/build patterns - require full command path
+    { regex: /^[\w\s]+\/(npm|yarn|pnpm|bun)\s+run\s+dev\s*$/i, name: "Dev", icon: "\u{1F680}" },
+    { regex: /^[\w\s]+\/(npm|yarn|pnpm|bun)\s+run\s+build\s*$/i, name: "Build", icon: "\u{1F528}" },
+    // Framework-specific patterns - require executable path
+    { regex: /\/(nuxt|next|astro|remix|svelte)\s+dev/i, name: "Framework", icon: "\u26A1" },
+    { regex: /\/node.*\/vite\s*$/i, name: "Vite", icon: "\u26A1" },
+    // Fallback: simpler patterns but checked last
+    { regex: /\s(nuxt|next|vite)\s+dev\s/i, name: "DevServer", icon: "\u26A1" }
+  ];
+  /**
+   * Create a new ProcessDetector
+   * @param execFn - Optional execFile function for testing (dependency injection)
+   */
+  constructor(execFn) {
+    this.execFn = execFn ?? execFileAsync3;
+  }
+  /**
+   * Detect running dev server by parsing system process list
+   * @returns Detected server status or null
+   */
+  async detect() {
+    try {
+      const { stdout } = await this.execFn("ps", ["aux"], {
+        timeout: 1e3
+      });
+      for (const pattern of this.processPatterns) {
+        if (pattern.regex.test(stdout)) {
+          const isBuilding = pattern.name.toLowerCase().includes("build");
+          const isRunning = !isBuilding;
+          return {
+            name: pattern.name,
+            icon: pattern.icon,
+            isRunning,
+            isBuilding
+          };
+        }
+      }
+    } catch {
+    }
+    return null;
+  }
+};
+
 // src/widgets/dev-server/styles.ts
 init_colors();
 var devServerStyles = {
@@ -7637,13 +7766,12 @@ var devServerStyles = {
 };
 
 // src/widgets/dev-server/dev-server-widget.ts
-var execFileAsync2 = (0, import_node_util3.promisify)(import_node_child_process2.execFile);
 var DevServerWidget = class {
   id = "dev-server";
   metadata = createWidgetMetadata(
     "Dev Server",
-    "Detects running dev server processes",
-    "1.0.0",
+    "Detects running dev server processes using hybrid port+process detection",
+    "1.1.0",
     "claude-scope",
     0
   );
@@ -7652,22 +7780,12 @@ var DevServerWidget = class {
   _lineOverride;
   styleFn = devServerStyles.balanced;
   cwd = null;
-  processPatterns = [
-    // Generic server patterns - more specific to avoid shell history false positives
-    { regex: /^[\w\s]+\/npm\s+(exec|run)\s+serve/i, name: "Server", icon: "\u{1F310}" },
-    { regex: /^[\w\s]+\/npx\s+serve\s+-/i, name: "Server", icon: "\u{1F310}" },
-    { regex: /^[\w\s]+\/(python|python3)\s+-m\s+http\.server/i, name: "HTTP", icon: "\u{1F310}" },
-    // Generic dev/build patterns - require full command path
-    { regex: /^[\w\s]+\/(npm|yarn|pnpm|bun)\s+run\s+dev\s*$/i, name: "Dev", icon: "\u{1F680}" },
-    { regex: /^[\w\s]+\/(npm|yarn|pnpm|bun)\s+run\s+build\s*$/i, name: "Build", icon: "\u{1F528}" },
-    // Framework-specific patterns - require executable path
-    { regex: /\/(nuxt|next|astro|remix|svelte)\s+dev/i, name: "Framework", icon: "\u26A1" },
-    { regex: /\/node.*\/vite\s*$/i, name: "Vite", icon: "\u26A1" },
-    // Fallback: simpler patterns but checked last
-    { regex: /\s(nuxt|next|vite)\s+dev\s/i, name: "DevServer", icon: "\u26A1" }
-  ];
+  portDetector;
+  processDetector;
   constructor(colors2) {
     this.colors = colors2 ?? DEFAULT_THEME;
+    this.portDetector = new PortDetector();
+    this.processDetector = new ProcessDetector();
   }
   /**
    * Set display style
@@ -7736,35 +7854,30 @@ var DevServerWidget = class {
     return this.styleFn(renderData, this.colors.devServer);
   }
   /**
-   * Detect running dev server by parsing system process list
+   * Detect running dev server using hybrid approach
+   *
+   * 1. Try port-based detection first (more reliable)
+   * 2. Fall back to process-based detection
+   *
    * @returns Detected server status or null
    */
   async detectDevServer() {
-    try {
-      const { stdout } = await execFileAsync2("ps", ["aux"], {
-        timeout: 1e3
-      });
-      for (const pattern of this.processPatterns) {
-        if (pattern.regex.test(stdout)) {
-          const isBuilding = pattern.name.toLowerCase().includes("build");
-          const isRunning = !isBuilding;
-          return {
-            name: pattern.name,
-            icon: pattern.icon,
-            isRunning,
-            isBuilding
-          };
-        }
-      }
-    } catch {
+    const portResult = await this.portDetector.detect();
+    if (portResult) {
+      return {
+        name: portResult.name,
+        icon: portResult.icon,
+        isRunning: portResult.isRunning,
+        isBuilding: portResult.isBuilding
+      };
     }
-    return null;
+    return await this.processDetector.detect();
   }
 };
 
 // src/widgets/docker/docker-widget.ts
-var import_node_child_process3 = require("node:child_process");
-var import_node_util4 = require("node:util");
+var import_node_child_process4 = require("node:child_process");
+var import_node_util5 = require("node:util");
 init_widget_types();
 init_theme();
 
@@ -7831,7 +7944,7 @@ var dockerStyles = {
 };
 
 // src/widgets/docker/docker-widget.ts
-var execFileAsync3 = (0, import_node_util4.promisify)(import_node_child_process3.execFile);
+var execFileAsync4 = (0, import_node_util5.promisify)(import_node_child_process4.execFile);
 var DockerWidget = class {
   id = "docker";
   metadata = createWidgetMetadata(
@@ -7891,12 +8004,12 @@ var DockerWidget = class {
   }
   async getDockerStatus() {
     try {
-      await execFileAsync3("docker", ["info"], { timeout: 2e3 });
-      const { stdout: runningOutput } = await execFileAsync3("docker", ["ps", "-q"], {
+      await execFileAsync4("docker", ["info"], { timeout: 2e3 });
+      const { stdout: runningOutput } = await execFileAsync4("docker", ["ps", "-q"], {
         timeout: 1e3
       });
       const running = runningOutput.trim().split("\n").filter((line) => line).length;
-      const { stdout: allOutput } = await execFileAsync3("docker", ["ps", "-aq"], {
+      const { stdout: allOutput } = await execFileAsync4("docker", ["ps", "-aq"], {
         timeout: 1e3
       });
       const total = allOutput.trim().split("\n").filter((line) => line).length;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-scope",
-  "version": "0.8.13",
+  "version": "0.8.15",
   "description": "Claude Code plugin for session status and analytics",
   "license": "MIT",
   "type": "module",