hyper-windowtint 0.3.3 → 0.3.6

package/CHANGELOG.md

@@ -5,6 +5,37 @@ All notable changes to `hyper-windowtint` will be documented here.
 The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.3.6] - 2026-05-16
+
+### Changed
+- README now shows a real screenshot of four Hyper windows in four projects
+  (`docs/demo-hero.png`) instead of the placeholder. Image is referenced via
+  full GitHub raw URL so it renders on both github.com and npmjs.com.
+
+## [0.3.5] - 2026-05-16
+
+### Fixed
+- Color collisions across projects. Previously every project root got an
+  independent random seed, and two random seeds could hash to the same
+  palette index — so two unrelated projects regularly came out the same
+  color. `seedForProjectRoot` now tracks which palette indices are in use
+  by other active projects and rolls candidate seeds until it finds one
+  that hashes to an unused slot. The first 12 distinct project roots in
+  a Hyper session are now guaranteed to get 12 distinct colors; only
+  projects 13+ have to collide.
+
+## [0.3.4] - 2026-05-16
+
+### Changed
+- README now references real screenshots in `docs/` instead of a placeholder.
+
+### Removed
+- Dead code left over from 0.3.3's `decorateTab` removal: the `uidToColor`
+  map, the `tintVersion` counter and its `WINDOWTINT_COLOR_CHANGE` dispatch,
+  and the `reduceUI` export. None affected runtime; they only existed to
+  feed the now-removed per-tab decorations. `index.js` drops from 647 to 622
+  lines.
+
 ## [0.3.3] - 2026-05-16
 
 ### Changed

package/README.md

@@ -2,21 +2,20 @@
 
 Give every Hyper terminal window/tab a color so you can tell them apart at a glance, while matching tabs that are currently in the same project during the current Hyper session.
 
-Groups each session by its cwd, walked up to the nearest `.git` repo root when possible, then assigns that project group a random color from a curated 12-color palette for the current Hyper run. Restarting Hyper can assign a different color. Shells that emit OSC 7 update the group live when you `cd`. The plugin paints:
+Groups each session by its cwd, walked up to the nearest `.git` repo root when possible, then assigns that project group a random color from a curated 12-color palette for the current Hyper run. Restarting Hyper can assign a different color. Shells that emit OSC 7 update the group live when you `cd`. The plugin paints, in the active project's color:
 
-- a thin colored border around the window
-- matching accents on tabs
-- a tiny color-name badge in the top-right corner (e.g. `ROSE`, `TEAL`)
+- a thin border around the window
+- a colored top line in the tab bar
+- a subtle gradient tint on the active tab's background
+- an optional uppercase color-name label in the top-right corner (off by default; opt in with `showBadge: true`)
 
-The result: two tabs opened inside the same repo use the same color while they remain in that repo. If one tab moves to a different project and the shell reports cwd changes with OSC 7, that tab gets the other project's color. A different repo or directory gets its own initially random color. If cwd resolution ever fails entirely, the plugin falls back to the session UID, so the tab still gets a color.
+The result: two tabs opened inside the same repo use the same color while they remain in that repo. If one tab moves to a different project and the shell reports cwd changes with OSC 7, that tab's color follows. A different repo or directory gets its own random color (the plugin prefers palette slots that aren't already in use by other open projects, so collisions only start once you have more than 12 projects open in one Hyper session). If cwd resolution ever fails entirely, the plugin falls back to the session UID so the tab still gets a color.
 
 ## Screenshots
 
-<!-- TODO: drop a screenshot or short GIF at docs/demo.gif and reference it here.
-     A 5–10s capture of two tabs in different repos plus one `cd` between them
-     sells the plugin better than any prose. -->
+![Four Hyper windows, each in a different project folder, with the plugin giving each its own colored border](https://raw.githubusercontent.com/willytop8/Hyper-WindowTint/main/docs/demo-hero.png)
 
-![demo placeholder](docs/demo.gif)
+Four Hyper windows open against four different projects — each gets its own border color, so a glance at the screen tells you which terminal belongs to which codebase.
 
 ## Install
 
@@ -71,8 +70,8 @@ module.exports = {
   config: {
     windowTint: {
       borderWidth: '3px',      // CSS string
-      showBadge: true,         // tiny color-name pill in the corner
-      glow: true,              // inner glow effect
+      showBadge: false,        // optional uppercase color-name label in the corner (default off)
+      glow: true,              // inner glow effect on the window border
       palette: [               // optional — override the default palette
         { name: 'red',   hex: '#ef4444' },
         { name: 'green', hex: '#22c55e' },
@@ -90,16 +89,15 @@ Palette entries must include both a non-empty `name` and a 6- or 8-digit hex col
 
 **Main process:**
 
-- `decorateSessionOptions(options)` runs when a new session is about to be spawned. Hyper has already resolved both `options.uid` and `options.cwd` by this point. The plugin schedules async cwd resolution through `realpath`, then walks upward looking for a `.git` directory or file; if found, that path is the project group, otherwise the raw cwd is the group. Each group gets an ephemeral random seed that is reused only for the current Hyper main-process lifetime. Result is stashed in a module-scoped `uid → seed` map with a short expiry and cached per cwd so repeat lookups are cheap.
-- `onWindow(win)` wraps `win.rpc.emit` so that immediately before Hyper's own `'session add'` IPC reaches the renderer, the plugin emits a `'windowtint:session-seed'` event with `{uid, seed}`. This avoids a uid→cwd color flicker on session creation. The wrap is idempotent per window, and reload-stable state on `win.rpc` lets the persistent wrapper consume seeds from the newest plugin module after hot reloads.
-- `onUnload` clears the caches.
+- `decorateSessionOptions(options)` runs when a new session is about to be spawned. The plugin schedules async cwd resolution through `realpath`, walks upward looking for a `.git` directory or file (if found, that path is the project group; otherwise the raw cwd is the group), and assigns the group a random seed for the current Hyper main-process lifetime. Seed assignment prefers palette indices not already used by other open projects so the first 12 distinct projects get 12 distinct colors. Caches `cwd → project root`, `project root → seed`, and `uid → seed` (with a short expiry).
+- `onWindow(win)` wraps `win.rpc.emit` so that immediately before Hyper's own `'session add'` IPC reaches the renderer, the plugin emits a `'windowtint:session-seed'` event with `{uid, seed}`. This avoids a uid→project color flicker on session creation. The wrap is idempotent per window, and reload-stable state on `win.rpc` lets the persistent wrapper consume seeds from the newest plugin module after hot reloads.
+- `onUnload` clears the caches and restores the original `win.rpc.emit`.
 
 **Renderer process:**
 
-- `decorateTerm` listens for OSC 7 cwd reports from xterm.js. When a tab changes directories, the renderer asks the main process for that cwd's current project-group seed and retints the tab.
-- `decorateConfig` injects CSS that styles `.hyper_main`, the tab bar, and the badge using CSS custom properties (`--tint-color`, `--tint-glow`, `--tint-tab-bg`, `--tint-name`).
-- A `window.rpc.on('windowtint:session-seed', ...)` listener (installed lazily by the middleware and removed on renderer unload) caches `uid → seed`. If a seed somehow arrives after the session has already been tinted, the active session retints immediately.
-- `getTabProps` and `decorateTab` add a small color accent to each tab.
+- `decorateTerm` registers an OSC 7 handler on each tab's xterm instance. When a shell reports a new cwd, the renderer asks the main process for that cwd's current project-group seed and retints.
+- `decorateConfig` injects CSS that styles `.hyper_main` (window border + glow), the tab bar's top line, and the active tab's background gradient using CSS custom properties (`--tint-color`, `--tint-glow`, `--tint-tab-bg`, `--tint-name`).
+- A `window.rpc.on('windowtint:session-seed', ...)` listener (installed lazily by the middleware and removed on renderer unload) caches `uid → seed`. If a seed arrives after the session has already been tinted, the active session retints immediately.
 - Redux middleware listens for `SESSION_ADD` and `SESSION_SET_ACTIVE`, looks up the cached seed by uid (falls back to the uid itself), maps it to the palette, and writes the resulting color to the root element's CSS variables.
 
 ## Project grouping

package/index.js

@@ -4,22 +4,21 @@
  * hyper-windowtint
  *
  * Assigns each Hyper project group an ephemeral random color from a curated
- * palette, then paints the window border, tab accent, and (optionally) a
- * small corner badge with the color's name.
+ * 12-color palette, then paints the window border, the tab bar's top line,
+ * and the active tab's background gradient in that color. Optionally shows
+ * the color's name in the top-right corner (`config.windowTint.showBadge`).
  *
- * v0.1: seeded color by session UID (each new tab got a stable color for
- * its lifetime).
- *
- * v0.2: groups sessions by the project root of the session's cwd, then gives
- * each project root a random color seed for the current Hyper main-process
- * lifetime. Two open terminals in the same project match; restarting Hyper
- * can assign that project a different color. The project root is found by
- * walking up from cwd to the nearest `.git`; if none, the raw cwd is used.
- * Falls back to session UID if cwd never arrives.
+ * Groups sessions by the project root of the session's cwd, walking up to
+ * the nearest `.git` directory or file; if none, the raw cwd is the group.
+ * Each project root gets a random seed for the current Hyper main-process
+ * lifetime — seeds prefer palette slots not already in use by other open
+ * projects, so the first 12 distinct projects get 12 distinct colors.
+ * Restarting Hyper reassigns colors. Falls back to session UID if cwd
+ * resolution fails entirely.
  *
  * This module is loaded in BOTH Hyper processes. decorateSessionOptions /
  * onWindow / onUnload run in main; decorateConfig / middleware / decorateTerm
- * / decorateTab / getTabProps run in renderer. The two sides communicate via
+ * / onRendererUnload run in renderer. The two sides communicate via
  * win.rpc — we piggyback a `windowtint:session-seed` event onto the normal
  * `session add` rpc emit so the renderer has the project-group seed before
  * SESSION_ADD reaches the Redux store (no uid→project color flicker).
@@ -81,7 +80,7 @@ function withAlpha(hex, alpha) {
 let userOpts = {
   palette: DEFAULT_PALETTE,
   borderWidth: '3px',
-  showBadge: true,
+  showBadge: false,
   glow: true,
 };
 
@@ -200,16 +199,49 @@ async function resolveProjectRootAsync(cwd) {
   }
 }
 
-function createRandomSeed() {
-  return `windowtint:${Date.now().toString(36)}:${Math.random().toString(36).slice(2)}`;
+function createRandomSeed(salt) {
+  return `windowtint:${Date.now().toString(36)}:${Math.random().toString(36).slice(2)}${salt != null ? ':' + salt : ''}`;
 }
 
+// Main-process palette-size hint for collision avoidance. The user can
+// override the palette in their renderer-side config, but main can't see
+// that, so we assume the default 12-slot palette here. If a user shrinks
+// their palette, the worst case is that we'll still allocate indices 0–11
+// uniformly — they just won't all be reachable in the renderer.
+const COLLISION_AVOIDANCE_PALETTE_SIZE = DEFAULT_PALETTE.length;
+
 function seedForProjectRoot(root) {
   if (!root) return root;
-  if (!projectSeedCache.has(root)) {
-    projectSeedCache.set(root, createRandomSeed());
+  if (projectSeedCache.has(root)) return projectSeedCache.get(root);
+
+  // Figure out which palette indices are currently taken by other projects
+  // so we can prefer a slot that isn't already in use.
+  const paletteSize = COLLISION_AVOIDANCE_PALETTE_SIZE;
+  const usedIndices = new Set();
+  projectSeedCache.forEach((existingSeed) => {
+    usedIndices.add(hashToIndex(existingSeed, paletteSize));
+  });
+
+  // Brute-force candidate seeds until one hashes to an unused index, or we
+  // run out of attempts. Probability of a single attempt being clean is
+  // (paletteSize - usedIndices.size) / paletteSize, so 200 attempts is more
+  // than enough until ~11 colors are taken.
+  let seed = null;
+  if (usedIndices.size < paletteSize) {
+    for (let i = 0; i < 200; i++) {
+      const candidate = createRandomSeed(i);
+      if (!usedIndices.has(hashToIndex(candidate, paletteSize))) {
+        seed = candidate;
+        break;
+      }
+    }
   }
-  return projectSeedCache.get(root);
+  // Fallback: more projects than colors, or 200 attempts didn't find a clean
+  // index — just take a random seed and accept the collision.
+  if (!seed) seed = createRandomSeed();
+
+  projectSeedCache.set(root, seed);
+  return seed;
 }
 
 exports.decorateSessionOptions = (options) => {
@@ -356,13 +388,9 @@ exports.onUnload = () => {
 
 // uid → seed, populated by the rpc listener installed lazily inside middleware.
 const uidToSeed = new Map();
-const uidToColor = new Map();
 let rpcListenerInstalled = false;
 let rpcSeedListener = null;
 let currentSeed = null;
-let tintVersion = 0;
-
-const WINDOWTINT_COLOR_CHANGE = 'WINDOWTINT_COLOR_CHANGE';
 
 function applyTint(color, opts) {
   if (typeof document === 'undefined' || !color) return;
@@ -378,16 +406,11 @@ function tintForUid(uid) {
   const seed = uidToSeed.get(uid) || uid;
   if (seed === currentSeed) return;
   currentSeed = seed;
-  const color = colorForSeed(seed);
-  applyTint(color, userOpts);
-  uidToColor.set(uid, color);
+  applyTint(colorForSeed(seed), userOpts);
 }
 
 function setSeedForUid(uid, seed) {
   uidToSeed.set(uid, seed);
-  const color = colorForSeed(seed);
-  uidToColor.set(uid, color);
-  return color;
 }
 
 function installRpcListener(store) {
@@ -399,8 +422,6 @@ function installRpcListener(store) {
     try {
       if (!payload || !payload.uid || !payload.seed) return;
       setSeedForUid(payload.uid, payload.seed);
-      tintVersion += 1;
-      store.dispatch({ type: WINDOWTINT_COLOR_CHANGE, version: tintVersion });
 
       // If the seed arrived after the session was already tinted (race —
       // shouldn't happen in practice because we emit seed before `session
@@ -425,9 +446,7 @@ exports.onRendererUnload = () => {
     rpcSeedListener = null;
     rpcListenerInstalled = false;
     uidToSeed.clear();
-    uidToColor.clear();
     currentSeed = null;
-    tintVersion = 0;
   } catch (e) { /* swallow */ }
 };
 
@@ -608,18 +627,6 @@ exports.decorateConfig = (config) => {
 // Per-tab outlines for inactive tabs may come back in a future release using
 // a different mechanism (e.g. a renderer-side DOM observer).
 
-exports.reduceUI = (state, action) => {
-  if (!action || action.type !== WINDOWTINT_COLOR_CHANGE) return state;
-  try {
-    if (state && typeof state.set === 'function') {
-      return state.set('windowTintVersion', action.version);
-    }
-    return Object.assign({}, state, { windowTintVersion: action.version });
-  } catch (e) {
-    return state;
-  }
-};
-
 // Redux middleware: re-tint when sessions are added or switched, using the
 // project-group seed if available, falling back to session UID.
 exports.middleware = (store) => (next) => (action) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hyper-windowtint",
-  "version": "0.3.3",
+  "version": "0.3.6",
   "description": "Give Hyper terminal tabs distinct color tints, matching tabs from the same project during the current Hyper session.",
   "main": "index.js",
   "files": [