claude-scope 0.8.14 → 0.8.16

package/dist/claude-scope.cjs

@@ -1471,7 +1471,7 @@ var init_renderer = __esm({
           for (const widget of widgetsForLine) {
             try {
               const output = await widget.render(context);
-              if (output !== null) {
+              if (output && output.trim().length > 0) {
                 outputs.push(output);
               }
             } catch (error) {
@@ -1952,27 +1952,58 @@ var init_styles = __esm({
         return compactStyle(data, colors2);
       },
       /**
-       * playful: Emojis (📖✏️✨🔄🔍📁) with tool names
+       * playful: Emojis (📖✏️✨🔄🔍📁) with tool counts (like balanced but more fun)
+       * - Shows running + completed counts like balanced style
+       * - Uses emojis instead of text labels for a more playful look
        */
       playful: (data, colors2) => {
         const parts = [];
+        const c = colors2 ?? getDefaultColors();
         const emojis = {
           Read: "\u{1F4D6}",
           Write: "\u270F\uFE0F",
           Edit: "\u2728",
           Bash: "\u{1F504}",
           Grep: "\u{1F50D}",
-          Glob: "\u{1F4C1}"
+          Glob: "\u{1F4C1}",
+          Task: "\u{1F4CB}"
         };
-        for (const tool of data.running.slice(-3)) {
-          const emoji = emojis[tool.name] ?? "\u{1F527}";
-          const nameStr = colors2 ? colorize(tool.name, colors2.tools.name) : tool.name;
-          parts.push(`${emoji} ${nameStr}`);
+        const allToolNames = /* @__PURE__ */ new Set();
+        for (const tool of data.running) {
+          allToolNames.add(tool.name);
+        }
+        for (const [name] of data.completed.slice(0, 3)) {
+          allToolNames.add(name);
+        }
+        const completedMap = new Map(data.completed);
+        const runningCounts = /* @__PURE__ */ new Map();
+        for (const tool of data.running) {
+          runningCounts.set(tool.name, (runningCounts.get(tool.name) ?? 0) + 1);
+        }
+        for (const name of allToolNames) {
+          const runningCount = runningCounts.get(name) ?? 0;
+          const completedCount = completedMap.get(name) ?? 0;
+          const emoji = emojis[name] ?? "\u{1F527}";
+          if (runningCount > 0 && completedCount > 0) {
+            const nameStr = colorize(name, c.tools.name);
+            const runningStr = colorize(`\u25B6${runningCount}`, c.tools.running);
+            const doneStr = colorize(`\u2713${completedCount}`, c.tools.completed);
+            parts.push(`${emoji} ${nameStr} (${runningStr}, ${doneStr})`);
+          } else if (completedCount > 0) {
+            const pluralName = pluralizeTool(name);
+            const nameStr = colorize(pluralName, c.tools.name);
+            const countStr = colorize(`${completedCount}`, c.tools.count);
+            parts.push(`${emoji} ${nameStr}: ${countStr}`);
+          } else if (runningCount > 0) {
+            const nameStr = colorize(name, c.tools.name);
+            const runningStr = colorize(`\u25B6${runningCount}`, c.tools.running);
+            parts.push(`${emoji} ${nameStr} (${runningStr})`);
+          }
         }
         if (parts.length === 0) {
           return "";
         }
-        return parts.join(", ");
+        return parts.join(" | ");
       },
       /**
        * verbose: Full text labels "Running:" and "Completed:"
@@ -3189,6 +3220,472 @@ var init_cost_widget = __esm({
   }
 });
 
+// src/widgets/dev-server/port-detector.ts
+var import_node_child_process, import_node_util, execFileAsync, PORT_MAPPING, DEV_PORTS, PortDetector;
+var init_port_detector = __esm({
+  "src/widgets/dev-server/port-detector.ts"() {
+    "use strict";
+    import_node_child_process = require("node:child_process");
+    import_node_util = require("node:util");
+    execFileAsync = (0, import_node_util.promisify)(import_node_child_process.execFile);
+    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}" }
+    };
+    DEV_PORTS = [5173, 4200, 3e3, 8080, 8e3, 8888];
+    PortDetector = class {
+      execFn;
+      /**
+       * Create a new PortDetector
+       * @param execFn - Optional execFile function for testing (dependency injection)
+       */
+      constructor(execFn) {
+        this.execFn = execFn ?? execFileAsync;
+      }
+      /**
+       * 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_process2, import_node_util2, execFileAsync2, ProcessDetector;
+var init_process_detector = __esm({
+  "src/widgets/dev-server/process-detector.ts"() {
+    "use strict";
+    import_node_child_process2 = require("node:child_process");
+    import_node_util2 = require("node:util");
+    execFileAsync2 = (0, import_node_util2.promisify)(import_node_child_process2.execFile);
+    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 ?? execFileAsync2;
+      }
+      /**
+       * 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
+var devServerStyles;
+var init_styles6 = __esm({
+  "src/widgets/dev-server/styles.ts"() {
+    "use strict";
+    init_colors();
+    devServerStyles = {
+      balanced: (data, colors2) => {
+        if (!data.server) return "";
+        const { name, icon, isRunning, isBuilding } = data.server;
+        const status = isRunning ? "running" : isBuilding ? "building" : "stopped";
+        const coloredName = colors2 ? colorize(name, colors2.name) : name;
+        const coloredStatus = colors2 ? colorize(`(${status})`, colors2.status) : `(${status})`;
+        return `${icon} ${coloredName} ${coloredStatus}`;
+      },
+      compact: (data, colors2) => {
+        if (!data.server) return "";
+        const { name, icon, isRunning, isBuilding } = data.server;
+        const statusIcon = isRunning ? "\u{1F680}" : isBuilding ? "\u{1F528}" : "\u{1F4A4}";
+        const coloredName = colors2 ? colorize(name, colors2.name) : name;
+        return `${icon} ${coloredName} ${statusIcon}`;
+      },
+      playful: (data, colors2) => {
+        if (!data.server) return "";
+        const { name, isRunning, isBuilding } = data.server;
+        const emoji = isRunning ? "\u{1F3C3}" : isBuilding ? "\u{1F528}" : "\u{1F4A4}";
+        const coloredName = colors2 ? colorize(name, colors2.name) : name;
+        return `${emoji} ${coloredName}`;
+      },
+      verbose: (data, colors2) => {
+        if (!data.server) return "";
+        const { name, isRunning, isBuilding } = data.server;
+        const status = isRunning ? "running" : isBuilding ? "building" : "stopped";
+        const label = colors2 ? colorize("Dev Server:", colors2.label) : "Dev Server:";
+        const coloredName = colors2 ? colorize(name, colors2.name) : name;
+        const coloredStatus = colors2 ? colorize(`(${status})`, colors2.status) : `(${status})`;
+        return `${label} ${coloredName} ${coloredStatus}`;
+      },
+      labeled: (data, colors2) => {
+        if (!data.server) return "";
+        const { name, icon, isRunning } = data.server;
+        const status = isRunning ? "\u{1F7E2}" : "\u{1F534}";
+        const label = colors2 ? colorize("Server:", colors2.label) : "Server:";
+        const coloredName = colors2 ? colorize(name, colors2.name) : name;
+        return `${label} ${icon} ${coloredName} ${status}`;
+      },
+      indicator: (data, colors2) => {
+        if (!data.server) return "";
+        const { name, icon } = data.server;
+        const coloredName = colors2 ? colorize(name, colors2.name) : name;
+        return `\u25CF ${icon} ${coloredName}`;
+      }
+    };
+  }
+});
+
+// src/widgets/dev-server/dev-server-widget.ts
+var DevServerWidget;
+var init_dev_server_widget = __esm({
+  "src/widgets/dev-server/dev-server-widget.ts"() {
+    "use strict";
+    init_widget_types();
+    init_theme();
+    init_port_detector();
+    init_process_detector();
+    init_styles6();
+    DevServerWidget = class {
+      id = "dev-server";
+      metadata = createWidgetMetadata(
+        "Dev Server",
+        "Detects running dev server processes using hybrid port+process detection",
+        "1.1.0",
+        "claude-scope",
+        0
+      );
+      enabled = true;
+      colors;
+      _lineOverride;
+      styleFn = devServerStyles.balanced;
+      cwd = null;
+      portDetector;
+      processDetector;
+      constructor(colors2) {
+        this.colors = colors2 ?? DEFAULT_THEME;
+        this.portDetector = new PortDetector();
+        this.processDetector = new ProcessDetector();
+      }
+      /**
+       * Set display style
+       * @param style - Style to use for rendering
+       */
+      setStyle(style = "balanced") {
+        const fn = devServerStyles[style];
+        if (fn) {
+          this.styleFn = fn;
+        }
+      }
+      /**
+       * Set display line override
+       * @param line - Line number (0-indexed)
+       */
+      setLine(line) {
+        this._lineOverride = line;
+      }
+      /**
+       * Get display line
+       * @returns Line number (0-indexed)
+       */
+      getLine() {
+        return this._lineOverride ?? this.metadata.line ?? 0;
+      }
+      /**
+       * Initialize widget with context
+       * @param context - Widget initialization context
+       */
+      async initialize(context) {
+        this.enabled = context.config?.enabled !== false;
+      }
+      /**
+       * Update widget with new stdin data
+       * @param data - Stdin data from Claude Code
+       */
+      async update(data) {
+        this.cwd = data.cwd;
+      }
+      /**
+       * Check if widget is enabled
+       * @returns true if widget should render
+       */
+      isEnabled() {
+        return this.enabled;
+      }
+      /**
+       * Cleanup resources
+       */
+      async cleanup() {
+      }
+      /**
+       * Render widget output
+       * @param context - Render context
+       * @returns Rendered string, or null if no dev server detected
+       */
+      async render(_context) {
+        if (!this.enabled || !this.cwd) {
+          return null;
+        }
+        const server = await this.detectDevServer();
+        if (!server) {
+          return null;
+        }
+        const renderData = { server };
+        return this.styleFn(renderData, this.colors.devServer);
+      }
+      /**
+       * 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() {
+        const portResult = await this.portDetector.detect();
+        if (portResult) {
+          return {
+            name: portResult.name,
+            icon: portResult.icon,
+            isRunning: portResult.isRunning,
+            isBuilding: portResult.isBuilding
+          };
+        }
+        return await this.processDetector.detect();
+      }
+    };
+  }
+});
+
+// src/widgets/docker/styles.ts
+var dockerStyles;
+var init_styles7 = __esm({
+  "src/widgets/docker/styles.ts"() {
+    "use strict";
+    init_colors();
+    dockerStyles = {
+      balanced: (data, colors2) => {
+        const { running, total } = data.status;
+        if (running === 0) return "";
+        const status = running > 0 ? "\u{1F7E2}" : "\u26AA";
+        const count = total > running ? `${running}/${total}` : `${running}`;
+        const label = colors2 ? colorize("Docker:", colors2.label) : "Docker:";
+        const coloredCount = colors2 ? colorize(count, colors2.count) : count;
+        return `${label} ${coloredCount} ${status}`;
+      },
+      compact: (data, colors2) => {
+        const { running, total } = data.status;
+        if (running === 0) return "";
+        const count = total > running ? `${running}/${total}` : `${running}`;
+        const coloredCount = colors2 ? colorize(count, colors2.count) : count;
+        return `\u{1F433} ${coloredCount}`;
+      },
+      playful: (data, colors2) => {
+        const { running, total } = data.status;
+        if (running === 0) return "\u{1F433} Docker: \u{1F4A4}";
+        const status = running > 0 ? "\u{1F7E2}" : "\u26AA";
+        const count = total > running ? `${running}/${total}` : `${running}`;
+        const label = colors2 ? colorize("Docker:", colors2.label) : "Docker:";
+        const coloredCount = colors2 ? colorize(count, colors2.count) : count;
+        return `\u{1F433} ${label} ${coloredCount} ${status}`;
+      },
+      verbose: (data, colors2) => {
+        const { running, total } = data.status;
+        if (running === 0) {
+          const label2 = colors2 ? colorize("Docker:", colors2.label) : "Docker:";
+          return `${label2} no containers running`;
+        }
+        const label = colors2 ? colorize("Docker:", colors2.label) : "Docker:";
+        const coloredRunning = colors2 ? colorize(String(running), colors2.count) : String(running);
+        return `${label} ${coloredRunning} running${total > running ? ` / ${total} total` : ""}`;
+      },
+      labeled: (data, colors2) => {
+        const { running, total } = data.status;
+        if (running === 0) {
+          const label2 = colors2 ? colorize("Docker:", colors2.label) : "Docker:";
+          return `${label2} --`;
+        }
+        const count = total > running ? `${running}/${total}` : `${running}`;
+        const label = colors2 ? colorize("Docker:", colors2.label) : "Docker:";
+        const coloredCount = colors2 ? colorize(count, colors2.count) : count;
+        return `${label} ${coloredCount}`;
+      },
+      indicator: (data, colors2) => {
+        const { running, total } = data.status;
+        if (running === 0) {
+          const label2 = colors2 ? colorize("Docker:", colors2.label) : "Docker:";
+          return `\u25CF ${label2} --`;
+        }
+        const count = total > running ? `${running}/${total}` : `${running}`;
+        const label = colors2 ? colorize("Docker:", colors2.label) : "Docker:";
+        const coloredCount = colors2 ? colorize(count, colors2.count) : count;
+        return `\u25CF ${label} ${coloredCount}`;
+      }
+    };
+  }
+});
+
+// src/widgets/docker/docker-widget.ts
+var import_node_child_process3, import_node_util3, execFileAsync3, DockerWidget;
+var init_docker_widget = __esm({
+  "src/widgets/docker/docker-widget.ts"() {
+    "use strict";
+    import_node_child_process3 = require("node:child_process");
+    import_node_util3 = require("node:util");
+    init_widget_types();
+    init_theme();
+    init_styles7();
+    execFileAsync3 = (0, import_node_util3.promisify)(import_node_child_process3.execFile);
+    DockerWidget = class {
+      id = "docker";
+      metadata = createWidgetMetadata(
+        "Docker",
+        "Shows Docker container count and status",
+        "1.0.0",
+        "claude-scope",
+        0
+      );
+      enabled = true;
+      colors;
+      _lineOverride;
+      styleFn = dockerStyles.balanced;
+      cachedStatus = null;
+      lastCheck = 0;
+      CACHE_TTL = 5e3;
+      constructor(colors2) {
+        this.colors = colors2 ?? DEFAULT_THEME;
+      }
+      setStyle(style = "balanced") {
+        const fn = dockerStyles[style];
+        if (fn) {
+          this.styleFn = fn;
+        }
+      }
+      setLine(line) {
+        this._lineOverride = line;
+      }
+      getLine() {
+        return this._lineOverride ?? this.metadata.line ?? 0;
+      }
+      async initialize(context) {
+        this.enabled = context.config?.enabled !== false;
+      }
+      async update(_data) {
+      }
+      isEnabled() {
+        return this.enabled;
+      }
+      async cleanup() {
+      }
+      async render(_context) {
+        if (!this.enabled) {
+          return null;
+        }
+        const now = Date.now();
+        if (this.cachedStatus && now - this.lastCheck < this.CACHE_TTL) {
+          return this.styleFn({ status: this.cachedStatus }, this.colors.docker);
+        }
+        const status = await this.getDockerStatus();
+        this.cachedStatus = status;
+        this.lastCheck = now;
+        if (!status.isAvailable) {
+          return null;
+        }
+        return this.styleFn({ status }, this.colors.docker);
+      }
+      async getDockerStatus() {
+        try {
+          await execFileAsync3("docker", ["info"], { timeout: 2e3 });
+          const { stdout: runningOutput } = await execFileAsync3("docker", ["ps", "-q"], {
+            timeout: 1e3
+          });
+          const running = runningOutput.trim().split("\n").filter((line) => line).length;
+          const { stdout: allOutput } = await execFileAsync3("docker", ["ps", "-aq"], {
+            timeout: 1e3
+          });
+          const total = allOutput.trim().split("\n").filter((line) => line).length;
+          return { running, total, isAvailable: true };
+        } catch {
+          return { running: 0, total: 0, isAvailable: false };
+        }
+      }
+    };
+  }
+});
+
 // src/widgets/duration/styles.ts
 function formatDurationWithColors(ms, colors2) {
   if (ms <= 0) return colorize("0s", colors2.value);
@@ -3214,7 +3711,7 @@ function formatDurationWithColors(ms, colors2) {
   return parts.join(" ");
 }
 var durationStyles;
-var init_styles6 = __esm({
+var init_styles8 = __esm({
   "src/widgets/duration/styles.ts"() {
     "use strict";
     init_colors();
@@ -3294,7 +3791,7 @@ var init_duration_widget = __esm({
     init_widget_types();
     init_theme();
     init_stdin_data_widget();
-    init_styles6();
+    init_styles8();
     DurationWidget = class extends StdinDataWidget {
       id = "duration";
       metadata = createWidgetMetadata(
@@ -3339,13 +3836,13 @@ var init_duration_widget = __esm({
 function createGit(cwd) {
   return new NativeGit(cwd);
 }
-var import_node_child_process, import_node_util, execFileAsync, NativeGit;
+var import_node_child_process4, import_node_util4, execFileAsync4, NativeGit;
 var init_git_provider = __esm({
   "src/providers/git-provider.ts"() {
     "use strict";
-    import_node_child_process = require("node:child_process");
-    import_node_util = require("node:util");
-    execFileAsync = (0, import_node_util.promisify)(import_node_child_process.execFile);
+    import_node_child_process4 = require("node:child_process");
+    import_node_util4 = require("node:util");
+    execFileAsync4 = (0, import_node_util4.promisify)(import_node_child_process4.execFile);
     NativeGit = class {
       cwd;
       constructor(cwd) {
@@ -3353,7 +3850,7 @@ var init_git_provider = __esm({
       }
       async status() {
         try {
-          const { stdout } = await execFileAsync("git", ["status", "--branch", "--short"], {
+          const { stdout } = await execFileAsync4("git", ["status", "--branch", "--short"], {
             cwd: this.cwd
           });
           const match = stdout.match(/^##\s+(\S+)/m);
@@ -3369,7 +3866,7 @@ var init_git_provider = __esm({
           args.push(...options);
         }
         try {
-          const { stdout } = await execFileAsync("git", args, {
+          const { stdout } = await execFileAsync4("git", args, {
             cwd: this.cwd
           });
           const fileMatch = stdout.match(/(\d+)\s+file(s?)\s+changed/);
@@ -3386,7 +3883,7 @@ var init_git_provider = __esm({
       }
       async latestTag() {
         try {
-          const { stdout } = await execFileAsync("git", ["describe", "--tags", "--abbrev=0"], {
+          const { stdout } = await execFileAsync4("git", ["describe", "--tags", "--abbrev=0"], {
             cwd: this.cwd
           });
           return stdout.trim();
@@ -3400,7 +3897,7 @@ var init_git_provider = __esm({
 
 // src/widgets/git-tag/styles.ts
 var gitTagStyles;
-var init_styles7 = __esm({
+var init_styles9 = __esm({
   "src/widgets/git-tag/styles.ts"() {
     "use strict";
     init_colors();
@@ -3450,7 +3947,7 @@ var init_git_tag_widget = __esm({
     init_widget_types();
     init_git_provider();
     init_theme();
-    init_styles7();
+    init_styles9();
     GitTagWidget = class {
       id = "git-tag";
       metadata = createWidgetMetadata(
@@ -3522,7 +4019,7 @@ var init_git_tag_widget = __esm({
 
 // src/widgets/git/styles.ts
 var gitStyles;
-var init_styles8 = __esm({
+var init_styles10 = __esm({
   "src/widgets/git/styles.ts"() {
     "use strict";
     init_colors();
@@ -3624,7 +4121,7 @@ var init_git_widget = __esm({
     init_widget_types();
     init_git_provider();
     init_theme();
-    init_styles8();
+    init_styles10();
     GitWidget = class {
       id = "git";
       metadata = createWidgetMetadata(
@@ -3716,7 +4213,7 @@ var init_git_widget = __esm({
 
 // src/widgets/lines/styles.ts
 var linesStyles;
-var init_styles9 = __esm({
+var init_styles11 = __esm({
   "src/widgets/lines/styles.ts"() {
     "use strict";
     init_colors();
@@ -3776,7 +4273,7 @@ var init_lines_widget = __esm({
     init_widget_types();
     init_theme();
     init_stdin_data_widget();
-    init_styles9();
+    init_styles11();
     LinesWidget = class extends StdinDataWidget {
       id = "lines";
       metadata = createWidgetMetadata(
@@ -3821,7 +4318,7 @@ function getShortName(displayName) {
   return displayName.replace(/^Claude\s+/, "");
 }
 var modelStyles;
-var init_styles10 = __esm({
+var init_styles12 = __esm({
   "src/widgets/model/styles.ts"() {
     "use strict";
     init_colors();
@@ -3876,7 +4373,7 @@ var init_model_widget = __esm({
     init_widget_types();
     init_theme();
     init_stdin_data_widget();
-    init_styles10();
+    init_styles12();
     ModelWidget = class extends StdinDataWidget {
       id = "model";
       metadata = createWidgetMetadata(
@@ -4018,6 +4515,16 @@ async function registerWidgetsFromConfig(registry, config, style, themeName) {
       const w = new CacheMetricsWidget(themeColors);
       w.setStyle(s);
       return w;
+    },
+    "dev-server": (s) => {
+      const w = new DevServerWidget(themeColors);
+      w.setStyle(s);
+      return w;
+    },
+    docker: (s) => {
+      const w = new DockerWidget(themeColors);
+      w.setStyle(s);
+      return w;
     }
   };
   for (const [lineNum, widgets] of Object.entries(config.lines)) {
@@ -4065,6 +4572,8 @@ var init_layout_preview = __esm({
     init_config_count_widget();
     init_context_widget();
     init_cost_widget();
+    init_dev_server_widget();
+    init_docker_widget();
     init_duration_widget();
     init_git_tag_widget();
     init_git_widget();
@@ -6639,10 +7148,10 @@ var init_esm2 = __esm({
 });
 
 // node_modules/@inquirer/core/dist/esm/lib/screen-manager.js
-var import_node_util2, height, lastLine, ScreenManager;
+var import_node_util5, height, lastLine, ScreenManager;
 var init_screen_manager = __esm({
   "node_modules/@inquirer/core/dist/esm/lib/screen-manager.js"() {
-    import_node_util2 = require("node:util");
+    import_node_util5 = require("node:util");
     init_utils();
     init_esm2();
     height = (content) => content.split("\n").length;
@@ -6664,7 +7173,7 @@ var init_screen_manager = __esm({
       }
       render(content, bottomContent = "") {
         const promptLine = lastLine(content);
-        const rawPromptLine = (0, import_node_util2.stripVTControlCharacters)(promptLine);
+        const rawPromptLine = (0, import_node_util5.stripVTControlCharacters)(promptLine);
         let prompt = rawPromptLine;
         if (this.rl.line.length > 0) {
           prompt = prompt.slice(0, -this.rl.line.length);
@@ -6997,6 +7506,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 +7520,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 +7528,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 +7547,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 +7615,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 +7641,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 +7657,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 +7741,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)
     }
@@ -7538,7 +8057,7 @@ async function ensureDefaultConfig() {
   if (!(0, import_node_fs3.existsSync)(configDir)) {
     (0, import_node_fs3.mkdirSync)(configDir, { recursive: true });
   }
-  const defaultConfig = generateBalancedLayout("balanced", "cyberpunk-neon");
+  const defaultConfig = generateRichLayout("balanced", "dracula");
   (0, import_node_fs3.writeFileSync)(configPath, JSON.stringify(defaultConfig, null, 2), "utf-8");
 }
 
@@ -7580,435 +8099,13 @@ init_config_count_widget();
 init_context_widget();
 init_cost_widget();
 
-// src/widgets/dev-server/dev-server-widget.ts
-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 = {
-  balanced: (data, colors2) => {
-    if (!data.server) return "";
-    const { name, icon, isRunning, isBuilding } = data.server;
-    const status = isRunning ? "running" : isBuilding ? "building" : "stopped";
-    const coloredName = colors2 ? colorize(name, colors2.name) : name;
-    const coloredStatus = colors2 ? colorize(`(${status})`, colors2.status) : `(${status})`;
-    return `${icon} ${coloredName} ${coloredStatus}`;
-  },
-  compact: (data, colors2) => {
-    if (!data.server) return "";
-    const { name, icon, isRunning, isBuilding } = data.server;
-    const statusIcon = isRunning ? "\u{1F680}" : isBuilding ? "\u{1F528}" : "\u{1F4A4}";
-    const coloredName = colors2 ? colorize(name, colors2.name) : name;
-    return `${icon} ${coloredName} ${statusIcon}`;
-  },
-  playful: (data, colors2) => {
-    if (!data.server) return "";
-    const { name, isRunning, isBuilding } = data.server;
-    const emoji = isRunning ? "\u{1F3C3}" : isBuilding ? "\u{1F528}" : "\u{1F4A4}";
-    const coloredName = colors2 ? colorize(name, colors2.name) : name;
-    return `${emoji} ${coloredName}`;
-  },
-  verbose: (data, colors2) => {
-    if (!data.server) return "";
-    const { name, isRunning, isBuilding } = data.server;
-    const status = isRunning ? "running" : isBuilding ? "building" : "stopped";
-    const label = colors2 ? colorize("Dev Server:", colors2.label) : "Dev Server:";
-    const coloredName = colors2 ? colorize(name, colors2.name) : name;
-    const coloredStatus = colors2 ? colorize(`(${status})`, colors2.status) : `(${status})`;
-    return `${label} ${coloredName} ${coloredStatus}`;
-  },
-  labeled: (data, colors2) => {
-    if (!data.server) return "";
-    const { name, icon, isRunning } = data.server;
-    const status = isRunning ? "\u{1F7E2}" : "\u{1F534}";
-    const label = colors2 ? colorize("Server:", colors2.label) : "Server:";
-    const coloredName = colors2 ? colorize(name, colors2.name) : name;
-    return `${label} ${icon} ${coloredName} ${status}`;
-  },
-  indicator: (data, colors2) => {
-    if (!data.server) return "";
-    const { name, icon } = data.server;
-    const coloredName = colors2 ? colorize(name, colors2.name) : name;
-    return `\u25CF ${icon} ${coloredName}`;
-  }
-};
-
-// src/widgets/dev-server/dev-server-widget.ts
-var DevServerWidget = class {
-  id = "dev-server";
-  metadata = createWidgetMetadata(
-    "Dev Server",
-    "Detects running dev server processes using hybrid port+process detection",
-    "1.1.0",
-    "claude-scope",
-    0
-  );
-  enabled = true;
-  colors;
-  _lineOverride;
-  styleFn = devServerStyles.balanced;
-  cwd = null;
-  portDetector;
-  processDetector;
-  constructor(colors2) {
-    this.colors = colors2 ?? DEFAULT_THEME;
-    this.portDetector = new PortDetector();
-    this.processDetector = new ProcessDetector();
-  }
-  /**
-   * Set display style
-   * @param style - Style to use for rendering
-   */
-  setStyle(style = "balanced") {
-    const fn = devServerStyles[style];
-    if (fn) {
-      this.styleFn = fn;
-    }
-  }
-  /**
-   * Set display line override
-   * @param line - Line number (0-indexed)
-   */
-  setLine(line) {
-    this._lineOverride = line;
-  }
-  /**
-   * Get display line
-   * @returns Line number (0-indexed)
-   */
-  getLine() {
-    return this._lineOverride ?? this.metadata.line ?? 0;
-  }
-  /**
-   * Initialize widget with context
-   * @param context - Widget initialization context
-   */
-  async initialize(context) {
-    this.enabled = context.config?.enabled !== false;
-  }
-  /**
-   * Update widget with new stdin data
-   * @param data - Stdin data from Claude Code
-   */
-  async update(data) {
-    this.cwd = data.cwd;
-  }
-  /**
-   * Check if widget is enabled
-   * @returns true if widget should render
-   */
-  isEnabled() {
-    return this.enabled;
-  }
-  /**
-   * Cleanup resources
-   */
-  async cleanup() {
-  }
-  /**
-   * Render widget output
-   * @param context - Render context
-   * @returns Rendered string, or null if no dev server detected
-   */
-  async render(_context) {
-    if (!this.enabled || !this.cwd) {
-      return null;
-    }
-    const server = await this.detectDevServer();
-    if (!server) {
-      return null;
-    }
-    const renderData = { server };
-    return this.styleFn(renderData, this.colors.devServer);
-  }
-  /**
-   * 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() {
-    const portResult = await this.portDetector.detect();
-    if (portResult) {
-      return {
-        name: portResult.name,
-        icon: portResult.icon,
-        isRunning: portResult.isRunning,
-        isBuilding: portResult.isBuilding
-      };
-    }
-    return await this.processDetector.detect();
-  }
-};
-
-// src/widgets/docker/docker-widget.ts
-var import_node_child_process4 = require("node:child_process");
-var import_node_util5 = require("node:util");
-init_widget_types();
-init_theme();
+// src/widgets/dev-server/index.ts
+init_dev_server_widget();
+init_port_detector();
+init_process_detector();
 
-// src/widgets/docker/styles.ts
-init_colors();
-var dockerStyles = {
-  balanced: (data, colors2) => {
-    const { running, total } = data.status;
-    if (running === 0) return "";
-    const status = running > 0 ? "\u{1F7E2}" : "\u26AA";
-    const count = total > running ? `${running}/${total}` : `${running}`;
-    const label = colors2 ? colorize("Docker:", colors2.label) : "Docker:";
-    const coloredCount = colors2 ? colorize(count, colors2.count) : count;
-    return `${label} ${coloredCount} ${status}`;
-  },
-  compact: (data, colors2) => {
-    const { running, total } = data.status;
-    if (running === 0) return "";
-    const count = total > running ? `${running}/${total}` : `${running}`;
-    const coloredCount = colors2 ? colorize(count, colors2.count) : count;
-    return `\u{1F433} ${coloredCount}`;
-  },
-  playful: (data, colors2) => {
-    const { running, total } = data.status;
-    if (running === 0) return "\u{1F433} Docker: \u{1F4A4}";
-    const status = running > 0 ? "\u{1F7E2}" : "\u26AA";
-    const count = total > running ? `${running}/${total}` : `${running}`;
-    const label = colors2 ? colorize("Docker:", colors2.label) : "Docker:";
-    const coloredCount = colors2 ? colorize(count, colors2.count) : count;
-    return `\u{1F433} ${label} ${coloredCount} ${status}`;
-  },
-  verbose: (data, colors2) => {
-    const { running, total } = data.status;
-    if (running === 0) {
-      const label2 = colors2 ? colorize("Docker:", colors2.label) : "Docker:";
-      return `${label2} no containers running`;
-    }
-    const label = colors2 ? colorize("Docker:", colors2.label) : "Docker:";
-    const coloredRunning = colors2 ? colorize(String(running), colors2.count) : String(running);
-    return `${label} ${coloredRunning} running${total > running ? ` / ${total} total` : ""}`;
-  },
-  labeled: (data, colors2) => {
-    const { running, total } = data.status;
-    if (running === 0) {
-      const label2 = colors2 ? colorize("Docker:", colors2.label) : "Docker:";
-      return `${label2} --`;
-    }
-    const count = total > running ? `${running}/${total}` : `${running}`;
-    const label = colors2 ? colorize("Docker:", colors2.label) : "Docker:";
-    const coloredCount = colors2 ? colorize(count, colors2.count) : count;
-    return `${label} ${coloredCount}`;
-  },
-  indicator: (data, colors2) => {
-    const { running, total } = data.status;
-    if (running === 0) {
-      const label2 = colors2 ? colorize("Docker:", colors2.label) : "Docker:";
-      return `\u25CF ${label2} --`;
-    }
-    const count = total > running ? `${running}/${total}` : `${running}`;
-    const label = colors2 ? colorize("Docker:", colors2.label) : "Docker:";
-    const coloredCount = colors2 ? colorize(count, colors2.count) : count;
-    return `\u25CF ${label} ${coloredCount}`;
-  }
-};
-
-// src/widgets/docker/docker-widget.ts
-var execFileAsync4 = (0, import_node_util5.promisify)(import_node_child_process4.execFile);
-var DockerWidget = class {
-  id = "docker";
-  metadata = createWidgetMetadata(
-    "Docker",
-    "Shows Docker container count and status",
-    "1.0.0",
-    "claude-scope",
-    0
-  );
-  enabled = true;
-  colors;
-  _lineOverride;
-  styleFn = dockerStyles.balanced;
-  cachedStatus = null;
-  lastCheck = 0;
-  CACHE_TTL = 5e3;
-  constructor(colors2) {
-    this.colors = colors2 ?? DEFAULT_THEME;
-  }
-  setStyle(style = "balanced") {
-    const fn = dockerStyles[style];
-    if (fn) {
-      this.styleFn = fn;
-    }
-  }
-  setLine(line) {
-    this._lineOverride = line;
-  }
-  getLine() {
-    return this._lineOverride ?? this.metadata.line ?? 0;
-  }
-  async initialize(context) {
-    this.enabled = context.config?.enabled !== false;
-  }
-  async update(_data) {
-  }
-  isEnabled() {
-    return this.enabled;
-  }
-  async cleanup() {
-  }
-  async render(_context) {
-    if (!this.enabled) {
-      return null;
-    }
-    const now = Date.now();
-    if (this.cachedStatus && now - this.lastCheck < this.CACHE_TTL) {
-      return this.styleFn({ status: this.cachedStatus }, this.colors.docker);
-    }
-    const status = await this.getDockerStatus();
-    this.cachedStatus = status;
-    this.lastCheck = now;
-    if (!status.isAvailable) {
-      return null;
-    }
-    return this.styleFn({ status }, this.colors.docker);
-  }
-  async getDockerStatus() {
-    try {
-      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 execFileAsync4("docker", ["ps", "-aq"], {
-        timeout: 1e3
-      });
-      const total = allOutput.trim().split("\n").filter((line) => line).length;
-      return { running, total, isAvailable: true };
-    } catch {
-      return { running: 0, total: 0, isAvailable: false };
-    }
-  }
-};
+// src/widgets/docker/index.ts
+init_docker_widget();
 
 // src/core/widget-factory.ts
 init_duration_widget();

package/package.json

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