claude-contextline 2.0.1 → 2.2.0

package/README.md

@@ -23,8 +23,12 @@ Add to your Claude Code settings (`~/.claude/settings.json`):
 (main)            myproject
 ```
 
-- **Line 1**: Context window battery bar (blue) with usage percentage, model name (red)
-- **Line 2**: Git branch (red), working directory (blue) aligned below the model
+Colors reflect [lasso](https://github.com/)'s Onyx design system — lasso's
+single, fixed (dark) palette — so the statusline stays in step with lasso's
+indigo-forward look. The tokens mirror lasso's canonical Onyx colors.
+
+- **Line 1**: Context window battery bar (Onyx accent) with usage percentage, model name (Onyx danger)
+- **Line 2**: Git branch (Onyx secondary indigo), working directory (Onyx accent) aligned below the model
 
 ## Requirements
 

package/dist/index.js

@@ -85,16 +85,61 @@ function getUsedPercentage(hookData) {
   return null;
 }
 
+// src/theme.ts
+import { readFileSync } from "fs";
+import { homedir } from "os";
+import { join } from "path";
+function fg(hex) {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `\x1B[38;2;${r};${g};${b}m`;
+}
+var ONYX = {
+  dark: {
+    blue: fg("#7b7fff"),
+    // --color-onyx-accent   (filled bar + directory)
+    red: fg("#f2545b"),
+    // --color-onyx-danger   (model name)
+    mauve: fg("#9498ff"),
+    // --color-onyx-accent-1 (git branch)
+    overlay0: fg("#3b3f4e")
+    // --color-onyx-fg-3     (empty bar cells, muted)
+  },
+  light: {
+    blue: fg("#5c61e6"),
+    // --h-accent (light primary, deeper indigo)
+    red: fg("#d63d44"),
+    // --h-bad    (darkened danger for light bg)
+    mauve: fg("#7b7fff"),
+    // Onyx's lighter indigo, kept distinct from the directory
+    overlay0: fg("#6b7080")
+    // --h-muted (--fg-2)
+  }
+};
+function settingsPath() {
+  const dir = process.env.LASSO_DIR || join(homedir(), ".lasso");
+  return join(dir, "settings.json");
+}
+function resolvedAppearance() {
+  try {
+    const parsed = JSON.parse(readFileSync(settingsPath(), "utf8"));
+    return parsed?.theme?.resolved === "light" ? "light" : "dark";
+  } catch {
+    return "dark";
+  }
+}
+function loadLassoTheme() {
+  return ONYX[resolvedAppearance()];
+}
+
 // src/renderer.ts
-var ESC = "\x1B";
-var RESET = `${ESC}[0m`;
-var BLUE = `${ESC}[38;5;69m`;
-var RED = `${ESC}[38;5;196m`;
-var GRAY = `${ESC}[38;5;243m`;
+var RESET = "\x1B[0m";
 var BAR_WIDTH = 10;
 var FILLED_CHAR = "\u2588";
 var EMPTY_CHAR = "\u2591";
 function render(envInfo) {
+  const { blue: BLUE, red: RED, mauve: MAUVE, overlay0: GRAY } = loadLassoTheme();
   let out = "";
   let modelCol = 0;
   if (envInfo.usedPercentage != null) {
@@ -117,7 +162,7 @@ function render(envInfo) {
   out += "\n";
   if (envInfo.gitBranch) {
     const branchText = `(${envInfo.gitBranch})`;
-    out += `${RED}${branchText}`;
+    out += `${MAUVE}${branchText}`;
     const gap = Math.max(2, modelCol - branchText.length);
     out += " ".repeat(gap);
   } else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-contextline",
-  "version": "2.0.1",
+  "version": "2.2.0",
   "description": "Two-line statusline for Claude Code showing context window usage",
   "type": "module",
   "main": "dist/index.js",