claude-scope 0.5.8 → 0.6.1

package/dist/claude-scope.cjs

@@ -275,6 +275,70 @@ function createGit(cwd) {
   return new NativeGit(cwd);
 }
 
+// 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";
+function colorize(text, color) {
+  return `${color}${text}${reset}`;
+}
+
+// src/ui/theme/gray-theme.ts
+var GRAY_THEME = {
+  name: "gray",
+  description: "Neutral gray theme for minimal color distraction",
+  colors: {
+    base: {
+      text: gray,
+      muted: gray,
+      accent: gray,
+      border: gray
+    },
+    semantic: {
+      success: gray,
+      warning: gray,
+      error: gray,
+      info: gray
+    },
+    git: {
+      branch: gray,
+      changes: gray
+    },
+    context: {
+      low: gray,
+      medium: gray,
+      high: gray,
+      bar: gray
+    },
+    lines: {
+      added: gray,
+      removed: gray
+    },
+    cost: {
+      amount: gray,
+      currency: gray
+    },
+    duration: {
+      value: gray,
+      unit: gray
+    },
+    model: {
+      name: gray,
+      version: gray
+    },
+    poker: {
+      participating: lightGray,
+      nonParticipating: gray,
+      result: gray
+    }
+  }
+};
+
+// src/ui/theme/index.ts
+var DEFAULT_THEME = GRAY_THEME.colors;
+
 // src/ui/utils/style-utils.ts
 function withLabel(prefix, value) {
   if (prefix === "") return value;
@@ -292,75 +356,89 @@ function progressBar(percent, width = 10) {
 
 // src/widgets/git/styles.ts
 var gitStyles = {
-  minimal: (data) => {
-    return data.branch;
+  minimal: (data, colors) => {
+    if (!colors) return data.branch;
+    return colorize(data.branch, colors.branch);
   },
-  balanced: (data) => {
+  balanced: (data, colors) => {
     if (data.changes && data.changes.files > 0) {
       const parts = [];
       if (data.changes.insertions > 0) parts.push(`+${data.changes.insertions}`);
       if (data.changes.deletions > 0) parts.push(`-${data.changes.deletions}`);
       if (parts.length > 0) {
-        return `${data.branch} [${parts.join(" ")}]`;
+        const branch = colors ? colorize(data.branch, colors.branch) : data.branch;
+        const changes = colors ? colorize(`[${parts.join(" ")}]`, colors.changes) : `[${parts.join(" ")}]`;
+        return `${branch} ${changes}`;
       }
     }
-    return data.branch;
+    return colors ? colorize(data.branch, colors.branch) : data.branch;
   },
-  compact: (data) => {
+  compact: (data, colors) => {
     if (data.changes && data.changes.files > 0) {
       const parts = [];
       if (data.changes.insertions > 0) parts.push(`+${data.changes.insertions}`);
       if (data.changes.deletions > 0) parts.push(`-${data.changes.deletions}`);
       if (parts.length > 0) {
-        return `${data.branch} ${parts.join("/")}`;
+        const branch = colors ? colorize(data.branch, colors.branch) : data.branch;
+        const changesStr = parts.join("/");
+        return `${branch} ${changesStr}`;
       }
     }
-    return data.branch;
+    return colors ? colorize(data.branch, colors.branch) : data.branch;
   },
-  playful: (data) => {
+  playful: (data, colors) => {
     if (data.changes && data.changes.files > 0) {
       const parts = [];
       if (data.changes.insertions > 0) parts.push(`\u2B06${data.changes.insertions}`);
       if (data.changes.deletions > 0) parts.push(`\u2B07${data.changes.deletions}`);
       if (parts.length > 0) {
-        return `\u{1F500} ${data.branch} ${parts.join(" ")}`;
+        const branch2 = colors ? colorize(data.branch, colors.branch) : data.branch;
+        return `\u{1F500} ${branch2} ${parts.join(" ")}`;
       }
     }
-    return `\u{1F500} ${data.branch}`;
+    const branch = colors ? colorize(data.branch, colors.branch) : data.branch;
+    return `\u{1F500} ${branch}`;
   },
-  verbose: (data) => {
+  verbose: (data, colors) => {
     if (data.changes && data.changes.files > 0) {
       const parts = [];
       if (data.changes.insertions > 0) parts.push(`+${data.changes.insertions} insertions`);
       if (data.changes.deletions > 0) parts.push(`-${data.changes.deletions} deletions`);
       if (parts.length > 0) {
-        return `branch: ${data.branch} [${parts.join(", ")}]`;
+        const branch2 = colors ? colorize(data.branch, colors.branch) : data.branch;
+        const changes = colors ? colorize(`[${parts.join(", ")}]`, colors.changes) : `[${parts.join(", ")}]`;
+        return `branch: ${branch2} ${changes}`;
       }
     }
-    return `branch: ${data.branch} (HEAD)`;
+    const branch = colors ? colorize(data.branch, colors.branch) : data.branch;
+    return `branch: ${branch} (HEAD)`;
   },
-  labeled: (data) => {
+  labeled: (data, colors) => {
     if (data.changes && data.changes.files > 0) {
       const parts = [];
       if (data.changes.insertions > 0) parts.push(`+${data.changes.insertions}`);
       if (data.changes.deletions > 0) parts.push(`-${data.changes.deletions}`);
       if (parts.length > 0) {
+        const branch2 = colors ? colorize(data.branch, colors.branch) : data.branch;
         const changes = `${data.changes.files} files: ${parts.join("/")}`;
-        return `Git: ${data.branch} [${changes}]`;
+        return `Git: ${branch2} [${changes}]`;
       }
     }
-    return `Git: ${data.branch}`;
+    const branch = colors ? colorize(data.branch, colors.branch) : data.branch;
+    return `Git: ${branch}`;
   },
-  indicator: (data) => {
+  indicator: (data, colors) => {
     if (data.changes && data.changes.files > 0) {
       const parts = [];
       if (data.changes.insertions > 0) parts.push(`+${data.changes.insertions}`);
       if (data.changes.deletions > 0) parts.push(`-${data.changes.deletions}`);
       if (parts.length > 0) {
-        return `\u25CF ${data.branch} [${parts.join(" ")}]`;
+        const branch = colors ? colorize(data.branch, colors.branch) : data.branch;
+        const changes = colors ? colorize(`[${parts.join(" ")}]`, colors.changes) : `[${parts.join(" ")}]`;
+        return `\u25CF ${branch} ${changes}`;
       }
     }
-    return withIndicator(data.branch);
+    return withIndicator(colors ? colorize(data.branch, colors.branch) : data.branch);
   }
 };
 
@@ -379,14 +457,17 @@ var GitWidget = class {
   git = null;
   enabled = true;
   cwd = null;
+  colors;
   styleFn = gitStyles.balanced;
   /**
    * @param gitFactory - Optional factory function for creating IGit instances
    *                     If not provided, uses default createGit (production)
    *                     Tests can inject MockGit factory here
+   * @param colors - Optional theme colors
    */
-  constructor(gitFactory) {
+  constructor(gitFactory, colors) {
     this.gitFactory = gitFactory || createGit;
+    this.colors = colors ?? DEFAULT_THEME;
   }
   setStyle(style = "balanced") {
     const fn = gitStyles[style];
@@ -424,7 +505,7 @@ var GitWidget = class {
       } catch {
       }
       const renderData = { branch, changes };
-      return this.styleFn(renderData);
+      return this.styleFn(renderData, this.colors.git);
     } catch {
       return null;
     }
@@ -444,25 +525,37 @@ var GitWidget = class {
 
 // src/widgets/git-tag/styles.ts
 var gitTagStyles = {
-  balanced: (data) => {
-    return data.tag || "\u2014";
+  balanced: (data, colors) => {
+    const tag = data.tag || "\u2014";
+    if (!colors) return tag;
+    return colorize(tag, colors.branch);
   },
-  compact: (data) => {
+  compact: (data, colors) => {
     if (!data.tag) return "\u2014";
-    return data.tag.replace(/^v/, "");
+    const tag = data.tag.replace(/^v/, "");
+    if (!colors) return tag;
+    return colorize(tag, colors.branch);
   },
-  playful: (data) => {
-    return `\u{1F3F7}\uFE0F ${data.tag || "\u2014"}`;
+  playful: (data, colors) => {
+    const tag = data.tag || "\u2014";
+    if (!colors) return `\u{1F3F7}\uFE0F ${tag}`;
+    return `\u{1F3F7}\uFE0F ${colorize(tag, colors.branch)}`;
   },
-  verbose: (data) => {
+  verbose: (data, colors) => {
     if (!data.tag) return "version: none";
-    return `version ${data.tag}`;
+    const tag = `version ${data.tag}`;
+    if (!colors) return tag;
+    return `version ${colorize(data.tag, colors.branch)}`;
   },
-  labeled: (data) => {
-    return withLabel("Tag", data.tag || "none");
+  labeled: (data, colors) => {
+    const tag = data.tag || "none";
+    if (!colors) return withLabel("Tag", tag);
+    return withLabel("Tag", colorize(tag, colors.branch));
   },
-  indicator: (data) => {
-    return withIndicator(data.tag || "\u2014");
+  indicator: (data, colors) => {
+    const tag = data.tag || "\u2014";
+    if (!colors) return withIndicator(tag);
+    return withIndicator(colorize(tag, colors.branch));
   }
 };
 
@@ -481,14 +574,17 @@ var GitTagWidget = class {
   git = null;
   enabled = true;
   cwd = null;
+  colors;
   styleFn = gitTagStyles.balanced;
   /**
    * @param gitFactory - Optional factory function for creating IGit instances
    *                     If not provided, uses default createGit (production)
    *                     Tests can inject MockGit factory here
+   * @param colors - Optional theme colors
    */
-  constructor(gitFactory) {
+  constructor(gitFactory, colors) {
     this.gitFactory = gitFactory || createGit;
+    this.colors = colors ?? DEFAULT_THEME;
   }
   setStyle(style = "balanced") {
     const fn = gitTagStyles[style];
@@ -506,7 +602,7 @@ var GitTagWidget = class {
     try {
       const latestTag = await (this.git.latestTag?.() ?? Promise.resolve(null));
       const renderData = { tag: latestTag };
-      return this.styleFn(renderData);
+      return this.styleFn(renderData, this.colors.git);
     } catch {
       return null;
     }
@@ -524,34 +620,6 @@ 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));
-  }
-};
-
 // src/widgets/core/stdin-data-widget.ts
 var StdinDataWidget = class {
   /**
@@ -610,6 +678,50 @@ var StdinDataWidget = class {
   }
 };
 
+// src/widgets/model/styles.ts
+function getShortName(displayName) {
+  return displayName.replace(/^Claude\s+/, "");
+}
+var modelStyles = {
+  balanced: (data, colors) => {
+    if (!colors) return data.displayName;
+    return colorize(data.displayName, colors.name);
+  },
+  compact: (data, colors) => {
+    const shortName = getShortName(data.displayName);
+    if (!colors) return shortName;
+    return colorize(shortName, colors.name);
+  },
+  playful: (data, colors) => {
+    const shortName = getShortName(data.displayName);
+    if (!colors) return `\u{1F916} ${shortName}`;
+    return `\u{1F916} ${colorize(shortName, colors.name)}`;
+  },
+  technical: (data, colors) => {
+    if (!colors) return data.id;
+    const match = data.id.match(/^(.+?)-(\d[\d.]*)$/);
+    if (match) {
+      return colorize(match[1], colors.name) + colorize(`-${match[2]}`, colors.version);
+    }
+    return colorize(data.id, colors.name);
+  },
+  symbolic: (data, colors) => {
+    const shortName = getShortName(data.displayName);
+    if (!colors) return `\u25C6 ${shortName}`;
+    return `\u25C6 ${colorize(shortName, colors.name)}`;
+  },
+  labeled: (data, colors) => {
+    const shortName = getShortName(data.displayName);
+    if (!colors) return withLabel("Model", shortName);
+    return withLabel("Model", colorize(shortName, colors.name));
+  },
+  indicator: (data, colors) => {
+    const shortName = getShortName(data.displayName);
+    if (!colors) return withIndicator(shortName);
+    return withIndicator(colorize(shortName, colors.name));
+  }
+};
+
 // src/widgets/model-widget.ts
 var ModelWidget = class extends StdinDataWidget {
   id = "model";
@@ -621,7 +733,12 @@ var ModelWidget = class extends StdinDataWidget {
     0
     // First line
   );
+  colors;
   styleFn = modelStyles.balanced;
+  constructor(colors) {
+    super();
+    this.colors = colors ?? DEFAULT_THEME;
+  }
   setStyle(style = "balanced") {
     const fn = modelStyles[style];
     if (fn) {
@@ -633,87 +750,64 @@ var ModelWidget = class extends StdinDataWidget {
       displayName: data.model.display_name,
       id: data.model.id
     };
-    return this.styleFn(renderData);
+    return this.styleFn(renderData, this.colors.model);
   }
 };
 
-// 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
-  }
-};
-
-// src/ui/utils/formatters.ts
-function formatDuration(ms) {
-  if (ms <= 0) return "0s";
-  const seconds = Math.floor(ms / TIME.MS_PER_SECOND);
-  const hours = Math.floor(seconds / TIME.SECONDS_PER_HOUR);
-  const minutes = Math.floor(seconds % TIME.SECONDS_PER_HOUR / TIME.SECONDS_PER_MINUTE);
-  const secs = seconds % TIME.SECONDS_PER_MINUTE;
-  const parts = [];
-  if (hours > 0) {
-    parts.push(`${hours}h`);
-    parts.push(`${minutes}m`);
-    parts.push(`${secs}s`);
-  } else if (minutes > 0) {
-    parts.push(`${minutes}m`);
-    parts.push(`${secs}s`);
+// src/widgets/context/styles.ts
+function getContextColor(percent, colors) {
+  const clampedPercent = Math.max(0, Math.min(100, percent));
+  if (clampedPercent < 50) {
+    return colors.low;
+  } else if (clampedPercent < 80) {
+    return colors.medium;
   } else {
-    parts.push(`${secs}s`);
+    return colors.high;
   }
-  return parts.join(" ");
-}
-function formatCostUSD(usd) {
-  return `$${usd.toFixed(2)}`;
 }
-function colorize(text, color) {
-  return `${color}${text}${ANSI_COLORS.RESET}`;
-}
-
-// src/widgets/context/styles.ts
 var contextStyles = {
-  balanced: (data) => {
+  balanced: (data, colors) => {
     const bar = progressBar(data.percent, 10);
-    return `[${bar}] ${data.percent}%`;
+    const output = `[${bar}] ${data.percent}%`;
+    if (!colors) return output;
+    return colorize(output, getContextColor(data.percent, colors));
   },
-  compact: (data) => {
-    return `${data.percent}%`;
+  compact: (data, colors) => {
+    const output = `${data.percent}%`;
+    if (!colors) return output;
+    return colorize(output, getContextColor(data.percent, colors));
   },
-  playful: (data) => {
+  playful: (data, colors) => {
     const bar = progressBar(data.percent, 10);
-    return `\u{1F9E0} [${bar}] ${data.percent}%`;
+    const output = `\u{1F9E0} [${bar}] ${data.percent}%`;
+    if (!colors) return output;
+    return `\u{1F9E0} ` + colorize(`[${bar}] ${data.percent}%`, getContextColor(data.percent, colors));
   },
-  verbose: (data) => {
+  verbose: (data, colors) => {
     const usedFormatted = data.used.toLocaleString();
     const maxFormatted = data.contextWindowSize.toLocaleString();
-    return `${usedFormatted} / ${maxFormatted} tokens (${data.percent}%)`;
+    const output = `${usedFormatted} / ${maxFormatted} tokens (${data.percent}%)`;
+    if (!colors) return output;
+    return colorize(output, getContextColor(data.percent, colors));
   },
-  symbolic: (data) => {
+  symbolic: (data, colors) => {
     const filled = Math.round(data.percent / 100 * 5);
     const empty = 5 - filled;
-    return `${"\u25AE".repeat(filled)}${"\u25AF".repeat(empty)} ${data.percent}%`;
+    const output = `${"\u25AE".repeat(filled)}${"\u25AF".repeat(empty)} ${data.percent}%`;
+    if (!colors) return output;
+    return colorize(output, getContextColor(data.percent, colors));
   },
-  "compact-verbose": (data) => {
+  "compact-verbose": (data, colors) => {
     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})`;
+    const output = `${data.percent}% (${usedK}/${maxK})`;
+    if (!colors) return output;
+    return colorize(output, getContextColor(data.percent, colors));
   },
-  indicator: (data) => {
-    return `\u25CF ${data.percent}%`;
+  indicator: (data, colors) => {
+    const output = `\u25CF ${data.percent}%`;
+    if (!colors) return output;
+    return colorize(output, getContextColor(data.percent, colors));
   }
 };
 
@@ -732,7 +826,7 @@ var ContextWidget = class extends StdinDataWidget {
   styleFn = contextStyles.balanced;
   constructor(colors) {
     super();
-    this.colors = colors ?? DEFAULT_THEME.context;
+    this.colors = colors ?? DEFAULT_THEME;
   }
   setStyle(style = "balanced") {
     const fn = contextStyles[style];
@@ -750,38 +844,68 @@ var ContextWidget = class extends StdinDataWidget {
       contextWindowSize: context_window_size,
       percent
     };
-    const output = this.styleFn(renderData);
-    const color = this.getContextColor(percent);
-    return colorize(output, color);
-  }
-  getContextColor(percent) {
-    const clampedPercent = Math.max(0, Math.min(100, percent));
-    if (clampedPercent < 50) {
-      return this.colors.low;
-    } else if (clampedPercent < 80) {
-      return this.colors.medium;
-    } else {
-      return this.colors.high;
-    }
+    return this.styleFn(renderData, this.colors.context);
   }
 };
 
+// src/ui/utils/formatters.ts
+function formatDuration(ms) {
+  if (ms <= 0) return "0s";
+  const seconds = Math.floor(ms / TIME.MS_PER_SECOND);
+  const hours = Math.floor(seconds / TIME.SECONDS_PER_HOUR);
+  const minutes = Math.floor(seconds % TIME.SECONDS_PER_HOUR / TIME.SECONDS_PER_MINUTE);
+  const secs = seconds % TIME.SECONDS_PER_MINUTE;
+  const parts = [];
+  if (hours > 0) {
+    parts.push(`${hours}h`);
+    parts.push(`${minutes}m`);
+    parts.push(`${secs}s`);
+  } else if (minutes > 0) {
+    parts.push(`${minutes}m`);
+    parts.push(`${secs}s`);
+  } else {
+    parts.push(`${secs}s`);
+  }
+  return parts.join(" ");
+}
+function formatCostUSD(usd) {
+  return `$${usd.toFixed(2)}`;
+}
+function colorize2(text, color) {
+  return `${color}${text}${ANSI_COLORS.RESET}`;
+}
+
 // src/widgets/cost/styles.ts
 var costStyles = {
-  balanced: (data) => {
-    return formatCostUSD(data.costUsd);
+  balanced: (data, colors) => {
+    const formatted = formatCostUSD(data.costUsd);
+    if (!colors) return formatted;
+    const amountStr = data.costUsd.toFixed(2);
+    return colorize("$", colors.currency) + colorize(amountStr, colors.amount);
   },
-  compact: (data) => {
-    return formatCostUSD(data.costUsd);
+  compact: (data, colors) => {
+    return costStyles.balanced(data, colors);
   },
-  playful: (data) => {
-    return `\u{1F4B0} ${formatCostUSD(data.costUsd)}`;
+  playful: (data, colors) => {
+    const formatted = formatCostUSD(data.costUsd);
+    if (!colors) return `\u{1F4B0} ${formatted}`;
+    const amountStr = data.costUsd.toFixed(2);
+    const colored = colorize("$", colors.currency) + colorize(amountStr, colors.amount);
+    return `\u{1F4B0} ${colored}`;
   },
-  labeled: (data) => {
-    return withLabel("Cost", formatCostUSD(data.costUsd));
+  labeled: (data, colors) => {
+    const formatted = formatCostUSD(data.costUsd);
+    if (!colors) return withLabel("Cost", formatted);
+    const amountStr = data.costUsd.toFixed(2);
+    const colored = colorize("$", colors.currency) + colorize(amountStr, colors.amount);
+    return withLabel("Cost", colored);
   },
-  indicator: (data) => {
-    return withIndicator(formatCostUSD(data.costUsd));
+  indicator: (data, colors) => {
+    const formatted = formatCostUSD(data.costUsd);
+    if (!colors) return withIndicator(formatted);
+    const amountStr = data.costUsd.toFixed(2);
+    const colored = colorize("$", colors.currency) + colorize(amountStr, colors.amount);
+    return withIndicator(colored);
   }
 };
 
@@ -796,7 +920,12 @@ var CostWidget = class extends StdinDataWidget {
     0
     // First line
   );
+  colors;
   styleFn = costStyles.balanced;
+  constructor(colors) {
+    super();
+    this.colors = colors ?? DEFAULT_THEME;
+  }
   setStyle(style = "balanced") {
     const fn = costStyles[style];
     if (fn) {
@@ -808,52 +937,55 @@ var CostWidget = class extends StdinDataWidget {
     const renderData = {
       costUsd: data.cost.total_cost_usd
     };
-    return this.styleFn(renderData);
+    return this.styleFn(renderData, this.colors.cost);
   }
 };
 
 // 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);
+var linesStyles = {
+  balanced: (data, colors) => {
+    if (!colors) return `+${data.added}/-${data.removed}`;
+    const addedStr = colorize(`+${data.added}`, colors.added);
+    const removedStr = colorize(`-${data.removed}`, colors.removed);
+    return `${addedStr}/${removedStr}`;
+  },
+  compact: (data, colors) => {
+    if (!colors) return `+${data.added}-${data.removed}`;
+    const addedStr = colorize(`+${data.added}`, colors.added);
+    const removedStr = colorize(`-${data.removed}`, colors.removed);
+    return `${addedStr}${removedStr}`;
+  },
+  playful: (data, colors) => {
+    if (!colors) return `\u2795${data.added} \u2796${data.removed}`;
+    const addedStr = colorize(`\u2795${data.added}`, colors.added);
+    const removedStr = colorize(`\u2796${data.removed}`, colors.removed);
+    return `${addedStr} ${removedStr}`;
+  },
+  verbose: (data, colors) => {
+    const parts = [];
+    if (data.added > 0) {
+      const text = `+${data.added} added`;
+      parts.push(colors ? colorize(text, colors.added) : text);
     }
-  };
-}
+    if (data.removed > 0) {
+      const text = `-${data.removed} removed`;
+      parts.push(colors ? colorize(text, colors.removed) : text);
+    }
+    return parts.join(", ");
+  },
+  labeled: (data, colors) => {
+    const addedStr = colors ? colorize(`+${data.added}`, colors.added) : `+${data.added}`;
+    const removedStr = colors ? colorize(`-${data.removed}`, colors.removed) : `-${data.removed}`;
+    const lines = `${addedStr}/${removedStr}`;
+    return withLabel("Lines", lines);
+  },
+  indicator: (data, colors) => {
+    const addedStr = colors ? colorize(`+${data.added}`, colors.added) : `+${data.added}`;
+    const removedStr = colors ? colorize(`-${data.removed}`, colors.removed) : `-${data.removed}`;
+    const lines = `${addedStr}/${removedStr}`;
+    return withIndicator(lines);
+  }
+};
 
 // src/widgets/lines-widget.ts
 var LinesWidget = class extends StdinDataWidget {
@@ -867,16 +999,13 @@ var LinesWidget = class extends StdinDataWidget {
     // First line
   );
   colors;
-  linesStyles;
-  styleFn;
+  styleFn = linesStyles.balanced;
   constructor(colors) {
     super();
-    this.colors = colors ?? DEFAULT_THEME.lines;
-    this.linesStyles = createLinesStyles(this.colors);
-    this.styleFn = this.linesStyles.balanced;
+    this.colors = colors ?? DEFAULT_THEME;
   }
   setStyle(style = "balanced") {
-    const fn = this.linesStyles[style];
+    const fn = linesStyles[style];
     if (fn) {
       this.styleFn = fn;
     }
@@ -885,43 +1014,89 @@ var LinesWidget = class extends StdinDataWidget {
     const added = data.cost?.total_lines_added ?? 0;
     const removed = data.cost?.total_lines_removed ?? 0;
     const renderData = { added, removed };
-    return this.styleFn(renderData);
+    return this.styleFn(renderData, this.colors.lines);
   }
 };
 
 // src/widgets/duration/styles.ts
 var durationStyles = {
-  balanced: (data) => {
-    return formatDuration(data.durationMs);
+  balanced: (data, colors) => {
+    const formatted = formatDuration(data.durationMs);
+    if (!colors) return formatted;
+    return formatDurationWithColors(data.durationMs, colors);
   },
-  compact: (data) => {
+  compact: (data, colors) => {
     const totalSeconds = Math.floor(data.durationMs / 1e3);
     const hours = Math.floor(totalSeconds / 3600);
     const minutes = Math.floor(totalSeconds % 3600 / 60);
+    if (!colors) {
+      if (hours > 0) {
+        return `${hours}h${minutes}m`;
+      }
+      return `${minutes}m`;
+    }
     if (hours > 0) {
-      return `${hours}h${minutes}m`;
+      return colorize(`${hours}`, colors.value) + colorize("h", colors.unit) + colorize(`${minutes}`, colors.value) + colorize("m", colors.unit);
     }
-    return `${minutes}m`;
+    return colorize(`${minutes}`, colors.value) + colorize("m", colors.unit);
   },
-  playful: (data) => {
+  playful: (data, colors) => {
     const totalSeconds = Math.floor(data.durationMs / 1e3);
     const hours = Math.floor(totalSeconds / 3600);
     const minutes = Math.floor(totalSeconds % 3600 / 60);
+    if (!colors) {
+      if (hours > 0) {
+        return `\u231B ${hours}h ${minutes}m`;
+      }
+      return `\u231B ${minutes}m`;
+    }
     if (hours > 0) {
-      return `\u231B ${hours}h ${minutes}m`;
+      const colored = colorize(`${hours}`, colors.value) + colorize("h", colors.unit) + colorize(` ${minutes}`, colors.value) + colorize("m", colors.unit);
+      return `\u231B ${colored}`;
     }
-    return `\u231B ${minutes}m`;
+    return `\u231B ` + colorize(`${minutes}`, colors.value) + colorize("m", colors.unit);
   },
-  technical: (data) => {
-    return `${Math.floor(data.durationMs)}ms`;
+  technical: (data, colors) => {
+    const value = `${Math.floor(data.durationMs)}ms`;
+    if (!colors) return value;
+    return colorize(`${Math.floor(data.durationMs)}`, colors.value) + colorize("ms", colors.unit);
   },
-  labeled: (data) => {
-    return withLabel("Time", formatDuration(data.durationMs));
+  labeled: (data, colors) => {
+    const formatted = formatDuration(data.durationMs);
+    if (!colors) return withLabel("Time", formatted);
+    const colored = formatDurationWithColors(data.durationMs, colors);
+    return withLabel("Time", colored);
   },
-  indicator: (data) => {
-    return withIndicator(formatDuration(data.durationMs));
+  indicator: (data, colors) => {
+    const formatted = formatDuration(data.durationMs);
+    if (!colors) return withIndicator(formatted);
+    const colored = formatDurationWithColors(data.durationMs, colors);
+    return withIndicator(colored);
   }
 };
+function formatDurationWithColors(ms, colors) {
+  if (ms <= 0) return colorize("0s", colors.value);
+  const totalSeconds = Math.floor(ms / 1e3);
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor(totalSeconds % 3600 / 60);
+  const seconds = totalSeconds % 60;
+  const parts = [];
+  if (hours > 0) {
+    parts.push(
+      colorize(`${hours}`, colors.value) + colorize("h", colors.unit),
+      colorize(`${minutes}`, colors.value) + colorize("m", colors.unit),
+      colorize(`${seconds}`, colors.value) + colorize("s", colors.unit)
+    );
+  } else if (minutes > 0) {
+    parts.push(
+      colorize(`${minutes}`, colors.value) + colorize("m", colors.unit),
+      colorize(`${seconds}`, colors.value) + colorize("s", colors.unit)
+    );
+  } else {
+    parts.push(colorize(`${seconds}`, colors.value) + colorize("s", colors.unit));
+  }
+  return parts.join(" ");
+}
 
 // src/widgets/duration-widget.ts
 var DurationWidget = class extends StdinDataWidget {
@@ -934,7 +1109,12 @@ var DurationWidget = class extends StdinDataWidget {
     0
     // First line
   );
+  colors;
   styleFn = durationStyles.balanced;
+  constructor(colors) {
+    super();
+    this.colors = colors ?? DEFAULT_THEME;
+  }
   setStyle(style = "balanced") {
     const fn = durationStyles[style];
     if (fn) {
@@ -946,7 +1126,7 @@ var DurationWidget = class extends StdinDataWidget {
     const renderData = {
       durationMs: data.cost.total_duration_ms
     };
-    return this.styleFn(renderData);
+    return this.styleFn(renderData, this.colors.duration);
   }
 };
 
@@ -1240,6 +1420,16 @@ var SUIT_SYMBOLS = {
   diamonds: "\u2666",
   clubs: "\u2663"
 };
+var EMOJI_SYMBOLS = {
+  spades: "\u2660\uFE0F",
+  // ♠️
+  hearts: "\u2665\uFE0F",
+  // ♥️
+  diamonds: "\u2666\uFE0F",
+  // ♦️
+  clubs: "\u2663\uFE0F"
+  // ♣️
+};
 function isRedSuit(suit) {
   return suit === "hearts" || suit === "diamonds";
 }
@@ -1279,6 +1469,9 @@ function getRankValue(rank) {
 function formatCard(card) {
   return `${card.rank}${SUIT_SYMBOLS[card.suit]}`;
 }
+function formatCardEmoji(card) {
+  return `${card.rank}${EMOJI_SYMBOLS[card.suit]}`;
+}
 
 // src/widgets/poker/deck.ts
 var ALL_SUITS = [Suit.Spades, Suit.Hearts, Suit.Diamonds, Suit.Clubs];
@@ -1650,13 +1843,13 @@ var HAND_ABBREVIATIONS = {
   "Straight Flush": "SF",
   "Four of a Kind": "4K",
   "Full House": "FH",
-  "Flush": "FL",
-  "Straight": "ST",
+  Flush: "FL",
+  Straight: "ST",
   "Three of a Kind": "3K",
   "Two Pair": "2P",
   "One Pair": "1P",
   "High Card": "HC",
-  "Nothing": "\u2014"
+  Nothing: "\u2014"
 };
 function formatCardByParticipation(cardData, isParticipating) {
   const color = isRedSuit(cardData.card.suit) ? red : gray;
@@ -1688,16 +1881,22 @@ function formatCardTextCompact(card) {
   const rankSymbol = rankSymbols[rank] ?? rank;
   return `${rankSymbol}${card.suit}`;
 }
-function formatHandResult(handResult) {
+function formatCardEmojiByParticipation(cardData, isParticipating) {
+  const cardText = formatCardEmoji(cardData.card);
+  if (isParticipating) {
+    return `${bold}(${cardText})${reset} `;
+  } else {
+    return `${cardText} `;
+  }
+}
+function formatHandResult(handResult, colors) {
   if (!handResult) {
     return "\u2014";
   }
   const playerParticipates = handResult.participatingIndices.some((idx) => idx < 2);
-  if (!playerParticipates) {
-    return `Nothing \u{1F0CF}`;
-  } else {
-    return `${handResult.name}! ${handResult.emoji}`;
-  }
+  const resultText = !playerParticipates ? `Nothing \u{1F0CF}` : `${handResult.name}! ${handResult.emoji}`;
+  if (!colors) return resultText;
+  return colorize2(resultText, colors.result);
 }
 function getHandAbbreviation(handResult) {
   if (!handResult) {
@@ -1707,28 +1906,41 @@ function getHandAbbreviation(handResult) {
   return `${abbreviation} (${handResult.name})`;
 }
 var pokerStyles = {
-  balanced: (data) => {
+  balanced: (data, colors) => {
     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)}`;
+    const labelColor = colors?.participating ?? lightGray;
+    const handLabel = colorize2("Hand:", labelColor);
+    const boardLabel = colorize2("Board:", labelColor);
+    return `${handLabel} ${handStr}| ${boardLabel} ${boardStr}\u2192 ${formatHandResult(handResult, colors)}`;
   },
-  compact: (data) => {
-    return pokerStyles.balanced(data);
+  compact: (data, colors) => {
+    return pokerStyles.balanced(data, colors);
   },
-  playful: (data) => {
-    return pokerStyles.balanced(data);
+  playful: (data, colors) => {
+    return pokerStyles.balanced(data, colors);
   },
-  "compact-verbose": (data) => {
+  "compact-verbose": (data, colors) => {
     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}`;
+    const result = `${handStr}| ${boardStr}\u2192 ${abbreviation}`;
+    if (!colors) return result;
+    return colorize2(result, colors.result);
+  },
+  emoji: (data, colors) => {
+    const { holeCards, boardCards, handResult } = data;
+    const participatingSet = new Set(handResult?.participatingIndices || []);
+    const handStr = holeCards.map((hc, idx) => formatCardEmojiByParticipation(hc, participatingSet.has(idx))).join("");
+    const boardStr = boardCards.map((bc, idx) => formatCardEmojiByParticipation(bc, participatingSet.has(idx + 2))).join("");
+    const labelColor = colors?.participating ?? lightGray;
+    const handLabel = colorize2("Hand:", labelColor);
+    const boardLabel = colorize2("Board:", labelColor);
+    return `${handLabel} ${handStr}| ${boardLabel} ${boardStr}\u2192 ${formatHandResult(handResult, colors)}`;
   }
 };
 
@@ -1749,6 +1961,7 @@ var PokerWidget = class extends StdinDataWidget {
   lastUpdateTimestamp = 0;
   THROTTLE_MS = 5e3;
   // 5 seconds
+  colors;
   styleFn = pokerStyles.balanced;
   setStyle(style = DEFAULT_WIDGET_STYLE) {
     const fn = pokerStyles[style];
@@ -1756,6 +1969,10 @@ var PokerWidget = class extends StdinDataWidget {
       this.styleFn = fn;
     }
   }
+  constructor(colors) {
+    super();
+    this.colors = colors ?? DEFAULT_THEME;
+  }
   /**
    * Generate new poker hand on each update
    */
@@ -1817,14 +2034,14 @@ var PokerWidget = class extends StdinDataWidget {
       boardCards: boardCardsData,
       handResult
     };
-    return this.styleFn(renderData);
+    return this.styleFn(renderData, this.colors.poker);
   }
   getHandName(text) {
     const match = text.match(/^([^!]+)/);
     return match ? match[1].trim() : "Nothing";
   }
   getHandEmoji(text) {
-    const match = text.match(/([🃏♠️♥️♦️♣️🎉✨🌟])/);
+    const match = text.match(/([🃏♠️♥️♦️♣️🎉✨🌟])/u);
     return match ? match[1] : "\u{1F0CF}";
   }
 };

package/package.json

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