claude-scope 0.5.3 → 0.5.5

package/README.md

@@ -55,7 +55,32 @@ Or for global install:
 
 ## Usage
 
-Once configured, claude-scope displays the current git branch in your statusline.
+Once configured, claude-scope displays real-time session information in your statusline including:
+- Git branch and changes
+- Model information
+- Context usage with progress bar
+- Session duration
+- Cost estimation
+- Lines added/removed
+- Configuration counts
+- Poker hand (entertainment)
+
+### Widget Display Styles
+
+Each widget supports multiple display styles for customization:
+
+| Style | Description |
+|-------|-------------|
+| `balanced` | Default balanced style (minimalism + informativeness) |
+| `compact` | Maximally compact display |
+| `playful` | Fun style with informative emojis |
+| `verbose` | Detailed text descriptions |
+| `technical` | Technical details (model IDs, milliseconds, etc.) |
+| `symbolic` | Symbol-based representation |
+| `labeled` | Prefix labels for clarity |
+| `indicator` | Bullet indicator prefix |
+| `fancy` | Decorative formatting (brackets, quotes) |
+| `compact-verbose` | Compact with K-formatted numbers |
 
 **Note:** This is an early release with basic functionality. Additional features (repository status, session analytics, etc.) are planned for future releases.
 

package/dist/claude-scope.cjs

@@ -112,12 +112,6 @@ var TIME = {
   /** Seconds per hour */
   SECONDS_PER_HOUR: 3600
 };
-var COST_THRESHOLDS = {
-  /** Below this value, show 4 decimal places ($0.0012) */
-  SMALL: 0.01,
-  /** Above this value, show no decimal places ($123) */
-  LARGE: 100
-};
 var DEFAULTS = {
   /** Default separator between widgets */
   SEPARATOR: " ",
@@ -266,13 +260,9 @@ var NativeGit = class {
   }
   async latestTag() {
     try {
-      const { stdout } = await execFileAsync(
-        "git",
-        ["describe", "--tags", "--abbrev=0"],
-        {
-          cwd: this.cwd
-        }
-      );
+      const { stdout } = await execFileAsync("git", ["describe", "--tags", "--abbrev=0"], {
+        cwd: this.cwd
+      });
       return stdout.trim();
     } catch {
       return null;
@@ -283,6 +273,55 @@ function createGit(cwd) {
   return new NativeGit(cwd);
 }
 
+// src/ui/utils/style-utils.ts
+function withLabel(prefix, value) {
+  if (prefix === "") return value;
+  return `${prefix}: ${value}`;
+}
+function withIndicator(value) {
+  return `\u25CF ${value}`;
+}
+function withFancy(value) {
+  return `\xAB${value}\xBB`;
+}
+function withBrackets(value) {
+  return `[${value}]`;
+}
+function withAngleBrackets(value) {
+  return `\u27E8${value}\u27E9`;
+}
+function progressBar(percent, width = 10) {
+  const clamped = Math.max(0, Math.min(100, percent));
+  const filled = Math.round(clamped / 100 * width);
+  const empty = width - filled;
+  return "\u2588".repeat(filled) + "\u2591".repeat(empty);
+}
+
+// src/widgets/git/styles.ts
+var gitStyles = {
+  balanced: (data) => {
+    return data.branch;
+  },
+  compact: (data) => {
+    return data.branch;
+  },
+  playful: (data) => {
+    return `\u{1F500} ${data.branch}`;
+  },
+  verbose: (data) => {
+    return `branch: ${data.branch} (HEAD)`;
+  },
+  labeled: (data) => {
+    return withLabel("Git", data.branch);
+  },
+  indicator: (data) => {
+    return withIndicator(data.branch);
+  },
+  fancy: (data) => {
+    return withBrackets(data.branch);
+  }
+};
+
 // src/widgets/git/git-widget.ts
 var GitWidget = class {
   id = "git";
@@ -298,6 +337,7 @@ var GitWidget = class {
   git = null;
   enabled = true;
   cwd = null;
+  styleFn = gitStyles.balanced;
   /**
    * @param gitFactory - Optional factory function for creating IGit instances
    *                     If not provided, uses default createGit (production)
@@ -306,6 +346,12 @@ var GitWidget = class {
   constructor(gitFactory) {
     this.gitFactory = gitFactory || createGit;
   }
+  setStyle(style = "balanced") {
+    const fn = gitStyles[style];
+    if (fn) {
+      this.styleFn = fn;
+    }
+  }
   async initialize(context) {
     this.enabled = context.config?.enabled !== false;
   }
@@ -319,7 +365,8 @@ var GitWidget = class {
       if (!branch) {
         return null;
       }
-      return branch;
+      const renderData = { branch };
+      return this.styleFn(renderData);
     } catch {
       return null;
     }
@@ -337,13 +384,32 @@ var GitWidget = class {
   }
 };
 
-// src/ui/utils/colors.ts
-var reset = "\x1B[0m";
-var red = "\x1B[31m";
-var green = "\x1B[32m";
-var gray = "\x1B[90m";
-var lightGray = "\x1B[37m";
-var bold = "\x1B[1m";
+// src/widgets/git-tag/styles.ts
+var gitTagStyles = {
+  balanced: (data) => {
+    return data.tag || "\u2014";
+  },
+  compact: (data) => {
+    if (!data.tag) return "\u2014";
+    return data.tag.replace(/^v/, "");
+  },
+  playful: (data) => {
+    return `\u{1F3F7}\uFE0F ${data.tag || "\u2014"}`;
+  },
+  verbose: (data) => {
+    if (!data.tag) return "version: none";
+    return `version ${data.tag}`;
+  },
+  labeled: (data) => {
+    return withLabel("Tag", data.tag || "none");
+  },
+  indicator: (data) => {
+    return withIndicator(data.tag || "\u2014");
+  },
+  fancy: (data) => {
+    return withAngleBrackets(data.tag || "\u2014");
+  }
+};
 
 // src/widgets/git/git-tag-widget.ts
 var GitTagWidget = class {
@@ -360,7 +426,7 @@ var GitTagWidget = class {
   git = null;
   enabled = true;
   cwd = null;
-  latestTag = null;
+  styleFn = gitTagStyles.balanced;
   /**
    * @param gitFactory - Optional factory function for creating IGit instances
    *                     If not provided, uses default createGit (production)
@@ -369,6 +435,12 @@ var GitTagWidget = class {
   constructor(gitFactory) {
     this.gitFactory = gitFactory || createGit;
   }
+  setStyle(style = "balanced") {
+    const fn = gitTagStyles[style];
+    if (fn) {
+      this.styleFn = fn;
+    }
+  }
   async initialize(context) {
     this.enabled = context.config?.enabled !== false;
   }
@@ -377,12 +449,9 @@ var GitTagWidget = class {
       return null;
     }
     try {
-      this.latestTag = await (this.git.latestTag?.() ?? Promise.resolve(null));
-      if (!this.latestTag) {
-        return `${gray}Tag:${reset} no tag`;
-      }
-      const tagValue = `${green}${this.latestTag}${reset}`;
-      return `${gray}Tag:${reset} ${tagValue}`;
+      const latestTag = await (this.git.latestTag?.() ?? Promise.resolve(null));
+      const renderData = { tag: latestTag };
+      return this.styleFn(renderData);
     } catch {
       return null;
     }
@@ -400,6 +469,37 @@ var GitTagWidget = class {
   }
 };
 
+// src/widgets/model/styles.ts
+function getShortName(displayName) {
+  return displayName.replace(/^Claude\s+/, "");
+}
+var modelStyles = {
+  balanced: (data) => {
+    return data.displayName;
+  },
+  compact: (data) => {
+    return getShortName(data.displayName);
+  },
+  playful: (data) => {
+    return `\u{1F916} ${getShortName(data.displayName)}`;
+  },
+  technical: (data) => {
+    return data.id;
+  },
+  symbolic: (data) => {
+    return `\u25C6 ${getShortName(data.displayName)}`;
+  },
+  labeled: (data) => {
+    return withLabel("Model", getShortName(data.displayName));
+  },
+  indicator: (data) => {
+    return withIndicator(getShortName(data.displayName));
+  },
+  fancy: (data) => {
+    return withBrackets(getShortName(data.displayName));
+  }
+};
+
 // src/widgets/core/stdin-data-widget.ts
 var StdinDataWidget = class {
   /**
@@ -469,8 +569,39 @@ var ModelWidget = class extends StdinDataWidget {
     0
     // First line
   );
-  renderWithData(data, context) {
-    return data.model.display_name;
+  styleFn = modelStyles.balanced;
+  setStyle(style = "balanced") {
+    const fn = modelStyles[style];
+    if (fn) {
+      this.styleFn = fn;
+    }
+  }
+  renderWithData(data, _context) {
+    const renderData = {
+      displayName: data.model.display_name,
+      id: data.model.id
+    };
+    return this.styleFn(renderData);
+  }
+};
+
+// src/ui/utils/colors.ts
+var reset = "\x1B[0m";
+var red = "\x1B[31m";
+var gray = "\x1B[90m";
+var lightGray = "\x1B[37m";
+var bold = "\x1B[1m";
+
+// src/ui/theme/default-theme.ts
+var DEFAULT_THEME = {
+  context: {
+    low: gray,
+    medium: gray,
+    high: gray
+  },
+  lines: {
+    added: gray,
+    removed: gray
   }
 };
 
@@ -495,37 +626,45 @@ function formatDuration(ms) {
   return parts.join(" ");
 }
 function formatCostUSD(usd) {
-  const absUsd = Math.abs(usd);
-  if (usd < 0) {
-    return `$${usd.toFixed(2)}`;
-  } else if (absUsd < COST_THRESHOLDS.SMALL) {
-    return `$${usd.toFixed(4)}`;
-  } else if (absUsd < COST_THRESHOLDS.LARGE) {
-    return `$${usd.toFixed(2)}`;
-  } else {
-    return `$${Math.floor(usd).toFixed(0)}`;
-  }
-}
-function progressBar(percent, width = DEFAULTS.PROGRESS_BAR_WIDTH) {
-  const clampedPercent = Math.max(0, Math.min(100, percent));
-  const filled = Math.round(clampedPercent / 100 * width);
-  const empty = width - filled;
-  return "\u2588".repeat(filled) + "\u2591".repeat(empty);
+  return `$${usd.toFixed(2)}`;
 }
 function colorize(text, color) {
   return `${color}${text}${ANSI_COLORS.RESET}`;
 }
 
-// src/ui/theme/default-theme.ts
-var DEFAULT_THEME = {
-  context: {
-    low: gray,
-    medium: gray,
-    high: gray
+// src/widgets/context/styles.ts
+var contextStyles = {
+  balanced: (data) => {
+    const bar = progressBar(data.percent, 10);
+    return `[${bar}] ${data.percent}%`;
   },
-  lines: {
-    added: gray,
-    removed: gray
+  compact: (data) => {
+    return `${data.percent}%`;
+  },
+  playful: (data) => {
+    const bar = progressBar(data.percent, 10);
+    return `\u{1F9E0} [${bar}] ${data.percent}%`;
+  },
+  verbose: (data) => {
+    const usedFormatted = data.used.toLocaleString();
+    const maxFormatted = data.contextWindowSize.toLocaleString();
+    return `${usedFormatted} / ${maxFormatted} tokens (${data.percent}%)`;
+  },
+  symbolic: (data) => {
+    const filled = Math.round(data.percent / 100 * 5);
+    const empty = 5 - filled;
+    return `${"\u25AE".repeat(filled)}${"\u25AF".repeat(empty)} ${data.percent}%`;
+  },
+  "compact-verbose": (data) => {
+    const usedK = data.used >= 1e3 ? `${Math.floor(data.used / 1e3)}K` : data.used.toString();
+    const maxK = data.contextWindowSize >= 1e3 ? `${Math.floor(data.contextWindowSize / 1e3)}K` : data.contextWindowSize.toString();
+    return `${data.percent}% (${usedK}/${maxK})`;
+  },
+  indicator: (data) => {
+    return `\u25CF ${data.percent}%`;
+  },
+  fancy: (data) => {
+    return `\u27E8${data.percent}%\u27E9`;
   }
 };
 
@@ -541,18 +680,30 @@ var ContextWidget = class extends StdinDataWidget {
     // First line
   );
   colors;
+  styleFn = contextStyles.balanced;
   constructor(colors) {
     super();
     this.colors = colors ?? DEFAULT_THEME.context;
   }
-  renderWithData(data, context) {
+  setStyle(style = "balanced") {
+    const fn = contextStyles[style];
+    if (fn) {
+      this.styleFn = fn;
+    }
+  }
+  renderWithData(data, _context) {
     const { current_usage, context_window_size } = data.context_window;
     if (!current_usage) return null;
     const used = current_usage.input_tokens + current_usage.cache_creation_input_tokens + current_usage.cache_read_input_tokens + current_usage.output_tokens;
     const percent = Math.round(used / context_window_size * 100);
-    const bar = progressBar(percent, DEFAULTS.PROGRESS_BAR_WIDTH);
+    const renderData = {
+      used,
+      contextWindowSize: context_window_size,
+      percent
+    };
+    const output = this.styleFn(renderData);
     const color = this.getContextColor(percent);
-    return colorize(`[${bar}] ${percent}%`, color);
+    return colorize(output, color);
   }
   getContextColor(percent) {
     const clampedPercent = Math.max(0, Math.min(100, percent));
@@ -566,6 +717,28 @@ var ContextWidget = class extends StdinDataWidget {
   }
 };
 
+// src/widgets/cost/styles.ts
+var costStyles = {
+  balanced: (data) => {
+    return formatCostUSD(data.costUsd);
+  },
+  compact: (data) => {
+    return formatCostUSD(data.costUsd);
+  },
+  playful: (data) => {
+    return `\u{1F4B0} ${formatCostUSD(data.costUsd)}`;
+  },
+  labeled: (data) => {
+    return withLabel("Cost", formatCostUSD(data.costUsd));
+  },
+  indicator: (data) => {
+    return withIndicator(formatCostUSD(data.costUsd));
+  },
+  fancy: (data) => {
+    return withFancy(formatCostUSD(data.costUsd));
+  }
+};
+
 // src/widgets/cost-widget.ts
 var CostWidget = class extends StdinDataWidget {
   id = "cost";
@@ -577,12 +750,71 @@ var CostWidget = class extends StdinDataWidget {
     0
     // First line
   );
-  renderWithData(data, context) {
+  styleFn = costStyles.balanced;
+  setStyle(style = "balanced") {
+    const fn = costStyles[style];
+    if (fn) {
+      this.styleFn = fn;
+    }
+  }
+  renderWithData(data, _context) {
     if (!data.cost || data.cost.total_cost_usd === void 0) return null;
-    return formatCostUSD(data.cost.total_cost_usd);
+    const renderData = {
+      costUsd: data.cost.total_cost_usd
+    };
+    return this.styleFn(renderData);
   }
 };
 
+// src/widgets/lines/styles.ts
+function createLinesStyles(colors) {
+  return {
+    balanced: (data) => {
+      const addedStr = colorize(`+${data.added}`, colors.added);
+      const removedStr = colorize(`-${data.removed}`, colors.removed);
+      return `${addedStr}/${removedStr}`;
+    },
+    compact: (data) => {
+      const addedStr = colorize(`+${data.added}`, colors.added);
+      const removedStr = colorize(`-${data.removed}`, colors.removed);
+      return `${addedStr}${removedStr}`;
+    },
+    playful: (data) => {
+      const addedStr = colorize(`\u2795${data.added}`, colors.added);
+      const removedStr = colorize(`\u2796${data.removed}`, colors.removed);
+      return `${addedStr} ${removedStr}`;
+    },
+    verbose: (data) => {
+      const parts = [];
+      if (data.added > 0) {
+        parts.push(colorize(`+${data.added} added`, colors.added));
+      }
+      if (data.removed > 0) {
+        parts.push(colorize(`-${data.removed} removed`, colors.removed));
+      }
+      return parts.join(", ");
+    },
+    labeled: (data) => {
+      const addedStr = colorize(`+${data.added}`, colors.added);
+      const removedStr = colorize(`-${data.removed}`, colors.removed);
+      const lines = `${addedStr}/${removedStr}`;
+      return withLabel("Lines", lines);
+    },
+    indicator: (data) => {
+      const addedStr = colorize(`+${data.added}`, colors.added);
+      const removedStr = colorize(`-${data.removed}`, colors.removed);
+      const lines = `${addedStr}/${removedStr}`;
+      return withIndicator(lines);
+    },
+    fancy: (data) => {
+      const addedStr = colorize(`+${data.added}`, colors.added);
+      const removedStr = colorize(`-${data.removed}`, colors.removed);
+      const lines = `${addedStr}|${removedStr}`;
+      return withAngleBrackets(lines);
+    }
+  };
+}
+
 // src/widgets/lines-widget.ts
 var LinesWidget = class extends StdinDataWidget {
   id = "lines";
@@ -595,16 +827,62 @@ var LinesWidget = class extends StdinDataWidget {
     // First line
   );
   colors;
+  linesStyles;
+  styleFn;
   constructor(colors) {
     super();
     this.colors = colors ?? DEFAULT_THEME.lines;
+    this.linesStyles = createLinesStyles(this.colors);
+    this.styleFn = this.linesStyles.balanced;
+  }
+  setStyle(style = "balanced") {
+    const fn = this.linesStyles[style];
+    if (fn) {
+      this.styleFn = fn;
+    }
   }
-  renderWithData(data, context) {
+  renderWithData(data, _context) {
     const added = data.cost?.total_lines_added ?? 0;
     const removed = data.cost?.total_lines_removed ?? 0;
-    const addedStr = colorize(`+${added}`, this.colors.added);
-    const removedStr = colorize(`-${removed}`, this.colors.removed);
-    return `${addedStr}/${removedStr}`;
+    const renderData = { added, removed };
+    return this.styleFn(renderData);
+  }
+};
+
+// src/widgets/duration/styles.ts
+var durationStyles = {
+  balanced: (data) => {
+    return formatDuration(data.durationMs);
+  },
+  compact: (data) => {
+    const totalSeconds = Math.floor(data.durationMs / 1e3);
+    const hours = Math.floor(totalSeconds / 3600);
+    const minutes = Math.floor(totalSeconds % 3600 / 60);
+    if (hours > 0) {
+      return `${hours}h${minutes}m`;
+    }
+    return `${minutes}m`;
+  },
+  playful: (data) => {
+    const totalSeconds = Math.floor(data.durationMs / 1e3);
+    const hours = Math.floor(totalSeconds / 3600);
+    const minutes = Math.floor(totalSeconds % 3600 / 60);
+    if (hours > 0) {
+      return `\u231B ${hours}h ${minutes}m`;
+    }
+    return `\u231B ${minutes}m`;
+  },
+  technical: (data) => {
+    return `${Math.floor(data.durationMs)}ms`;
+  },
+  labeled: (data) => {
+    return withLabel("Time", formatDuration(data.durationMs));
+  },
+  indicator: (data) => {
+    return withIndicator(formatDuration(data.durationMs));
+  },
+  fancy: (data) => {
+    return withAngleBrackets(formatDuration(data.durationMs));
   }
 };
 
@@ -619,9 +897,80 @@ var DurationWidget = class extends StdinDataWidget {
     0
     // First line
   );
-  renderWithData(data, context) {
+  styleFn = durationStyles.balanced;
+  setStyle(style = "balanced") {
+    const fn = durationStyles[style];
+    if (fn) {
+      this.styleFn = fn;
+    }
+  }
+  renderWithData(data, _context) {
     if (!data.cost || data.cost.total_duration_ms === void 0) return null;
-    return formatDuration(data.cost.total_duration_ms);
+    const renderData = {
+      durationMs: data.cost.total_duration_ms
+    };
+    return this.styleFn(renderData);
+  }
+};
+
+// src/widgets/git-changes/styles.ts
+var gitChangesStyles = {
+  balanced: (data) => {
+    const parts = [];
+    if (data.insertions > 0) parts.push(`+${data.insertions}`);
+    if (data.deletions > 0) parts.push(`-${data.deletions}`);
+    return parts.join(" ");
+  },
+  compact: (data) => {
+    const parts = [];
+    if (data.insertions > 0) parts.push(`+${data.insertions}`);
+    if (data.deletions > 0) parts.push(`-${data.deletions}`);
+    return parts.join("/");
+  },
+  playful: (data) => {
+    const parts = [];
+    if (data.insertions > 0) parts.push(`\u2B06${data.insertions}`);
+    if (data.deletions > 0) parts.push(`\u2B07${data.deletions}`);
+    return parts.join(" ");
+  },
+  verbose: (data) => {
+    const parts = [];
+    if (data.insertions > 0) parts.push(`+${data.insertions} insertions`);
+    if (data.deletions > 0) parts.push(`-${data.deletions} deletions`);
+    return parts.join(", ");
+  },
+  technical: (data) => {
+    const parts = [];
+    if (data.insertions > 0) parts.push(`${data.insertions}`);
+    if (data.deletions > 0) parts.push(`${data.deletions}`);
+    return parts.join("/");
+  },
+  symbolic: (data) => {
+    const parts = [];
+    if (data.insertions > 0) parts.push(`\u25B2${data.insertions}`);
+    if (data.deletions > 0) parts.push(`\u25BC${data.deletions}`);
+    return parts.join(" ");
+  },
+  labeled: (data) => {
+    const parts = [];
+    if (data.insertions > 0) parts.push(`+${data.insertions}`);
+    if (data.deletions > 0) parts.push(`-${data.deletions}`);
+    const changes = parts.join(" ");
+    return withLabel("Diff", changes);
+  },
+  indicator: (data) => {
+    const parts = [];
+    if (data.insertions > 0) parts.push(`+${data.insertions}`);
+    if (data.deletions > 0) parts.push(`-${data.deletions}`);
+    const changes = parts.join(" ");
+    return withIndicator(changes);
+  },
+  fancy: (data) => {
+    const parts = [];
+    if (data.insertions > 0) parts.push(`+${data.insertions}`);
+    if (data.deletions > 0) parts.push(`-${data.deletions}`);
+    const changes = parts.join("|");
+    return withAngleBrackets(changes);
   }
 };
 
@@ -640,6 +989,7 @@ var GitChangesWidget = class {
   git = null;
   enabled = true;
   cwd = null;
+  styleFn = gitChangesStyles.balanced;
   /**
    * @param gitFactory - Optional factory function for creating IGit instances
    *                     If not provided, uses default createGit (production)
@@ -648,6 +998,12 @@ var GitChangesWidget = class {
   constructor(gitFactory) {
     this.gitFactory = gitFactory || createGit;
   }
+  setStyle(style = "balanced") {
+    const fn = gitChangesStyles[style];
+    if (fn) {
+      this.styleFn = fn;
+    }
+  }
   async initialize(context) {
     this.enabled = context.config?.enabled !== false;
   }
@@ -687,10 +1043,8 @@ var GitChangesWidget = class {
     if (changes.insertions === 0 && changes.deletions === 0) {
       return null;
     }
-    const parts = [];
-    if (changes.insertions > 0) parts.push(`+${changes.insertions}`);
-    if (changes.deletions > 0) parts.push(`-${changes.deletions}`);
-    return parts.join(",");
+    const renderData = changes;
+    return this.styleFn(renderData);
   }
   isEnabled() {
     return this.enabled;
@@ -846,6 +1200,82 @@ var ConfigProvider = class {
   }
 };
 
+// src/widgets/config-count/styles.ts
+var configCountStyles = {
+  balanced: (data) => {
+    const { claudeMdCount, rulesCount, mcpCount, hooksCount } = data;
+    const parts = [];
+    if (claudeMdCount > 0) {
+      parts.push(`CLAUDE.md:${claudeMdCount}`);
+    }
+    if (rulesCount > 0) {
+      parts.push(`rules:${rulesCount}`);
+    }
+    if (mcpCount > 0) {
+      parts.push(`MCPs:${mcpCount}`);
+    }
+    if (hooksCount > 0) {
+      parts.push(`hooks:${hooksCount}`);
+    }
+    return parts.join(" \u2502 ");
+  },
+  compact: (data) => {
+    const { claudeMdCount, rulesCount, mcpCount, hooksCount } = data;
+    const parts = [];
+    if (claudeMdCount > 0) {
+      parts.push(`${claudeMdCount} docs`);
+    }
+    if (rulesCount > 0) {
+      parts.push(`${rulesCount} rules`);
+    }
+    if (mcpCount > 0) {
+      parts.push(`${mcpCount} MCPs`);
+    }
+    if (hooksCount > 0) {
+      const hookLabel = hooksCount === 1 ? "hook" : "hooks";
+      parts.push(`${hooksCount} ${hookLabel}`);
+    }
+    return parts.join(" \u2502 ");
+  },
+  playful: (data) => {
+    const { claudeMdCount, rulesCount, mcpCount, hooksCount } = data;
+    const parts = [];
+    if (claudeMdCount > 0) {
+      parts.push(`\u{1F4C4} CLAUDE.md:${claudeMdCount}`);
+    }
+    if (rulesCount > 0) {
+      parts.push(`\u{1F4DC} rules:${rulesCount}`);
+    }
+    if (mcpCount > 0) {
+      parts.push(`\u{1F50C} MCPs:${mcpCount}`);
+    }
+    if (hooksCount > 0) {
+      parts.push(`\u{1FA9D} hooks:${hooksCount}`);
+    }
+    return parts.join(" \u2502 ");
+  },
+  verbose: (data) => {
+    const { claudeMdCount, rulesCount, mcpCount, hooksCount } = data;
+    const parts = [];
+    if (claudeMdCount > 0) {
+      parts.push(`${claudeMdCount} CLAUDE.md`);
+    }
+    if (rulesCount > 0) {
+      parts.push(`${rulesCount} rules`);
+    }
+    if (mcpCount > 0) {
+      parts.push(`${mcpCount} MCP servers`);
+    }
+    if (hooksCount > 0) {
+      parts.push(`${hooksCount} hook`);
+    }
+    return parts.join(" \u2502 ");
+  }
+};
+
+// src/core/style-types.ts
+var DEFAULT_WIDGET_STYLE = "balanced";
+
 // src/widgets/config-count-widget.ts
 var ConfigCountWidget = class {
   id = "config-count";
@@ -860,6 +1290,13 @@ var ConfigCountWidget = class {
   configProvider = new ConfigProvider();
   configs;
   cwd;
+  styleFn = configCountStyles.balanced;
+  setStyle(style = DEFAULT_WIDGET_STYLE) {
+    const fn = configCountStyles[style];
+    if (fn) {
+      this.styleFn = fn;
+    }
+  }
   async initialize() {
   }
   async update(data) {
@@ -878,20 +1315,13 @@ var ConfigCountWidget = class {
       return null;
     }
     const { claudeMdCount, rulesCount, mcpCount, hooksCount } = this.configs;
-    const parts = [];
-    if (claudeMdCount > 0) {
-      parts.push(`\u{1F4C4} ${claudeMdCount} CLAUDE.md`);
-    }
-    if (rulesCount > 0) {
-      parts.push(`\u{1F4DC} ${rulesCount} rules`);
-    }
-    if (mcpCount > 0) {
-      parts.push(`\u{1F50C} ${mcpCount} MCPs`);
-    }
-    if (hooksCount > 0) {
-      parts.push(`\u{1FA9D} ${hooksCount} hooks`);
-    }
-    return parts.join(" \u2502 ") || null;
+    const renderData = {
+      claudeMdCount,
+      rulesCount,
+      mcpCount,
+      hooksCount
+    };
+    return this.styleFn(renderData);
   }
   async cleanup() {
   }
@@ -942,10 +1372,10 @@ function getRankValue(rank) {
     "8": 8,
     "9": 9,
     "10": 10,
-    "J": 11,
-    "Q": 12,
-    "K": 13,
-    "A": 14
+    J: 11,
+    Q: 12,
+    K: 13,
+    A: 14
   };
   return values[rank];
 }
@@ -1246,7 +1676,11 @@ function evaluateHand(hole, board) {
     const sfHighCard = getStraightFlushHighCard(allCards, flushSuit);
     if (sfHighCard === 14) {
       const participatingCards = getStraightFlushIndices(allCards, 14, flushSuit);
-      return { rank: 10 /* RoyalFlush */, ...HAND_DISPLAY[10 /* RoyalFlush */], participatingCards };
+      return {
+        rank: 10 /* RoyalFlush */,
+        ...HAND_DISPLAY[10 /* RoyalFlush */],
+        participatingCards
+      };
     }
   }
   if (flush) {
@@ -1254,13 +1688,21 @@ function evaluateHand(hole, board) {
     const sfHighCard = getStraightFlushHighCard(allCards, flushSuit);
     if (sfHighCard !== null) {
       const participatingCards = getStraightFlushIndices(allCards, sfHighCard, flushSuit);
-      return { rank: 9 /* StraightFlush */, ...HAND_DISPLAY[9 /* StraightFlush */], participatingCards };
+      return {
+        rank: 9 /* StraightFlush */,
+        ...HAND_DISPLAY[9 /* StraightFlush */],
+        participatingCards
+      };
     }
   }
   if (maxCount === 4) {
     const rank = getMostCommonRank(allCards);
     const participatingCards = findCardsOfRank(allCards, rank);
-    return { rank: 8 /* FourOfAKind */, ...HAND_DISPLAY[8 /* FourOfAKind */], participatingCards };
+    return {
+      rank: 8 /* FourOfAKind */,
+      ...HAND_DISPLAY[8 /* FourOfAKind */],
+      participatingCards
+    };
   }
   if (maxCount === 3 && pairCount >= 1) {
     const participatingCards = getFullHouseIndices(allCards);
@@ -1279,7 +1721,11 @@ function evaluateHand(hole, board) {
   if (maxCount === 3) {
     const rank = getMostCommonRank(allCards);
     const participatingCards = findCardsOfRank(allCards, rank);
-    return { rank: 4 /* ThreeOfAKind */, ...HAND_DISPLAY[4 /* ThreeOfAKind */], participatingCards };
+    return {
+      rank: 4 /* ThreeOfAKind */,
+      ...HAND_DISPLAY[4 /* ThreeOfAKind */],
+      participatingCards
+    };
   }
   if (pairCount >= 2) {
     const [rank1, rank2] = getTwoPairRanks(allCards);
@@ -1294,9 +1740,101 @@ function evaluateHand(hole, board) {
     return { rank: 2 /* OnePair */, ...HAND_DISPLAY[2 /* OnePair */], participatingCards };
   }
   const highestIdx = getHighestCardIndex(allCards);
-  return { rank: 1 /* HighCard */, ...HAND_DISPLAY[1 /* HighCard */], participatingCards: [highestIdx] };
+  return {
+    rank: 1 /* HighCard */,
+    ...HAND_DISPLAY[1 /* HighCard */],
+    participatingCards: [highestIdx]
+  };
 }
 
+// src/widgets/poker/styles.ts
+var HAND_ABBREVIATIONS = {
+  "Royal Flush": "RF",
+  "Straight Flush": "SF",
+  "Four of a Kind": "4K",
+  "Full House": "FH",
+  "Flush": "FL",
+  "Straight": "ST",
+  "Three of a Kind": "3K",
+  "Two Pair": "2P",
+  "One Pair": "1P",
+  "High Card": "HC",
+  "Nothing": "\u2014"
+};
+function formatCardByParticipation(cardData, isParticipating) {
+  const color = isRedSuit(cardData.card.suit) ? red : gray;
+  const cardText = formatCard(cardData.card);
+  if (isParticipating) {
+    return `${color}${bold}(${cardText})${reset} `;
+  } else {
+    return `${color}${cardText}${reset} `;
+  }
+}
+function formatCardCompact(cardData, isParticipating) {
+  const color = isRedSuit(cardData.card.suit) ? red : gray;
+  const cardText = formatCardTextCompact(cardData.card);
+  if (isParticipating) {
+    return `${color}${bold}(${cardText})${reset}`;
+  } else {
+    return `${color}${cardText}${reset}`;
+  }
+}
+function formatCardTextCompact(card) {
+  const rankSymbols = {
+    "10": "T",
+    "11": "J",
+    "12": "Q",
+    "13": "K",
+    "14": "A"
+  };
+  const rank = String(card.rank);
+  const rankSymbol = rankSymbols[rank] ?? rank;
+  return `${rankSymbol}${card.suit}`;
+}
+function formatHandResult(handResult) {
+  if (!handResult) {
+    return "\u2014";
+  }
+  const playerParticipates = handResult.participatingIndices.some((idx) => idx < 2);
+  if (!playerParticipates) {
+    return `Nothing \u{1F0CF}`;
+  } else {
+    return `${handResult.name}! ${handResult.emoji}`;
+  }
+}
+function getHandAbbreviation(handResult) {
+  if (!handResult) {
+    return "\u2014 (\u2014)";
+  }
+  const abbreviation = HAND_ABBREVIATIONS[handResult.name] ?? "\u2014";
+  return `${abbreviation} (${handResult.name})`;
+}
+var pokerStyles = {
+  balanced: (data) => {
+    const { holeCards, boardCards, handResult } = data;
+    const participatingSet = new Set(handResult?.participatingIndices || []);
+    const handStr = holeCards.map((hc, idx) => formatCardByParticipation(hc, participatingSet.has(idx))).join("");
+    const boardStr = boardCards.map((bc, idx) => formatCardByParticipation(bc, participatingSet.has(idx + 2))).join("");
+    const handLabel = colorize("Hand:", lightGray);
+    const boardLabel = colorize("Board:", lightGray);
+    return `${handLabel} ${handStr}| ${boardLabel} ${boardStr}\u2192 ${formatHandResult(handResult)}`;
+  },
+  compact: (data) => {
+    return pokerStyles.balanced(data);
+  },
+  playful: (data) => {
+    return pokerStyles.balanced(data);
+  },
+  "compact-verbose": (data) => {
+    const { holeCards, boardCards, handResult } = data;
+    const participatingSet = new Set(handResult?.participatingIndices || []);
+    const handStr = holeCards.map((hc, idx) => formatCardCompact(hc, participatingSet.has(idx))).join("");
+    const boardStr = boardCards.map((bc, idx) => formatCardCompact(bc, participatingSet.has(idx + 2))).join("");
+    const abbreviation = getHandAbbreviation(handResult);
+    return `${handStr}| ${boardStr}\u2192 ${abbreviation}`;
+  }
+};
+
 // src/widgets/poker-widget.ts
 var PokerWidget = class extends StdinDataWidget {
   id = "poker";
@@ -1314,8 +1852,12 @@ var PokerWidget = class extends StdinDataWidget {
   lastUpdateTimestamp = 0;
   THROTTLE_MS = 5e3;
   // 5 seconds
-  constructor() {
-    super();
+  styleFn = pokerStyles.balanced;
+  setStyle(style = DEFAULT_WIDGET_STYLE) {
+    const fn = pokerStyles[style];
+    if (fn) {
+      this.styleFn = fn;
+    }
   }
   /**
    * Generate new poker hand on each update
@@ -1356,30 +1898,37 @@ var PokerWidget = class extends StdinDataWidget {
    * Format card with appropriate color (red for ♥♦, gray for ♠♣)
    */
   formatCardColor(card) {
-    const color = isRedSuit(card.suit) ? red : gray;
-    return colorize(`[${formatCard(card)}]`, color);
-  }
-  /**
-   * Format card based on participation in best hand
-   * Participating cards: (K♠) with color + BOLD
-   * Non-participating cards: K♠ with color, no brackets
-   */
-  formatCardByParticipation(cardData, isParticipating) {
-    const color = isRedSuit(cardData.card.suit) ? red : gray;
-    const cardText = formatCard(cardData.card);
-    if (isParticipating) {
-      return `${color}${bold}(${cardText})${reset} `;
-    } else {
-      return `${color}${cardText}${reset} `;
-    }
+    const color = isRedSuit(card.suit) ? "red" : "gray";
+    return formatCard(card);
   }
   renderWithData(_data, _context) {
-    const participatingSet = new Set(this.handResult?.participatingIndices || []);
-    const handStr = this.holeCards.map((hc, idx) => this.formatCardByParticipation(hc, participatingSet.has(idx))).join("");
-    const boardStr = this.boardCards.map((bc, idx) => this.formatCardByParticipation(bc, participatingSet.has(idx + 2))).join("");
-    const handLabel = colorize("Hand:", lightGray);
-    const boardLabel = colorize("Board:", lightGray);
-    return `${handLabel} ${handStr} | ${boardLabel} ${boardStr} \u2192 ${this.handResult?.text}`;
+    const holeCardsData = this.holeCards.map((hc, idx) => ({
+      card: hc.card,
+      isParticipating: (this.handResult?.participatingIndices || []).includes(idx)
+    }));
+    const boardCardsData = this.boardCards.map((bc, idx) => ({
+      card: bc.card,
+      isParticipating: (this.handResult?.participatingIndices || []).includes(idx + 2)
+    }));
+    const handResult = this.handResult ? {
+      name: this.getHandName(this.handResult.text),
+      emoji: this.getHandEmoji(this.handResult.text),
+      participatingIndices: this.handResult.participatingIndices
+    } : null;
+    const renderData = {
+      holeCards: holeCardsData,
+      boardCards: boardCardsData,
+      handResult
+    };
+    return this.styleFn(renderData);
+  }
+  getHandName(text) {
+    const match = text.match(/^([^!]+)/);
+    return match ? match[1].trim() : "Nothing";
+  }
+  getHandEmoji(text) {
+    const match = text.match(/([🃏♠️♥️♦️♣️🎉✨🌟])/);
+    return match ? match[1] : "\u{1F0CF}";
   }
 };
 
@@ -1395,11 +1944,17 @@ var EmptyLineWidget = class extends StdinDataWidget {
     // Fourth line (0-indexed)
   );
   /**
-   * Return a single space to create a blank separator line.
-   * Using a space character instead of empty string ensures the line is visible.
+   * All styles return the same value (Braille Pattern Blank).
+   * This method exists for API consistency with other widgets.
+   */
+  setStyle(_style) {
+  }
+  /**
+   * Return Braille Pattern Blank to create a visible empty separator line.
+   * U+2800 occupies cell width but appears blank, ensuring the line renders.
    */
   renderWithData(_data, _context) {
-    return " ";
+    return "\u2800";
   }
 };
 
@@ -1558,9 +2113,7 @@ var StdinProvider = class {
     }
     const result = StdinDataSchema.validate(data);
     if (!result.success) {
-      throw new StdinValidationError(
-        `Validation failed: ${formatError(result.error)}`
-      );
+      throw new StdinValidationError(`Validation failed: ${formatError(result.error)}`);
     }
     return result.data;
   }
@@ -1618,10 +2171,10 @@ async function main() {
     for (const widget of registry.getAll()) {
       await widget.update(stdinData);
     }
-    const lines = await renderer.render(
-      registry.getEnabledWidgets(),
-      { width: 80, timestamp: Date.now() }
-    );
+    const lines = await renderer.render(registry.getEnabledWidgets(), {
+      width: 80,
+      timestamp: Date.now()
+    });
     return lines.join("\n");
   } catch (error) {
     const fallback = await tryGitFallback();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-scope",
-  "version": "0.5.3",
+  "version": "0.5.5",
   "description": "Claude Code plugin for session status and analytics",
   "license": "MIT",
   "type": "module",
@@ -28,6 +28,7 @@
     "dev": "tsx src/index.ts"
   },
   "devDependencies": {
+    "@biomejs/biome": "^2.3.11",
     "@types/node": "^22.10.2",
     "c8": "^10.1.3",
     "chai": "^6.2.2",