hyper-windowtint 0.3.0

package/CHANGELOG.md

@@ -0,0 +1,47 @@
+# Changelog
+
+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.0] - 2026-05-16
+
+### Added
+- Project-group color assignment: tabs whose cwd resolves to the same `.git`
+  root share a color for the current Hyper run.
+- Live retint on `cd` for shells that emit OSC 7 cwd reports.
+- Optional corner badge showing the current color name (`showBadge`).
+- Optional inner glow (`glow`).
+- Custom palette support with strict per-entry validation
+  (non-empty `name`, 6- or 8-digit hex).
+- Shell helper snippets (zsh / bash) in the README for shells that do not
+  emit OSC 7 by default.
+
+### Changed
+- Color assignment is now ephemeral per Hyper main-process lifetime, not
+  permanent per project.
+- Project root resolution moved off the synchronous session-spawn path
+  using `fs.promises`.
+- Tab accents are prop-driven through `mapHeaderState`, `getTabProps`, and
+  `decorateTab` instead of DOM query hacks.
+- `win.rpc.emit` wrapper and `windowtint:cwd-change` listener are now
+  restored / removed on `onUnload`.
+- Renderer-side `windowtint:session-seed` listener removal is more
+  defensive about which method Hyper exposes (`removeListener` / `off`).
+
+### Fixed
+- 8-digit hex colors in a user-supplied palette no longer produce invalid
+  10-character color strings when composing glow/tab-bg/box-shadow.
+- Listener removal in `onUnload` no longer assumes `rpc.emitter` —
+  falls back across `rpc.removeListener`, `rpc.off`, `rpc.emitter.removeListener`.
+- `parseOsc7Cwd` no longer throws when `process` is undefined in renderers
+  with Electron contextIsolation enabled.
+- Various silent error swallowing on the main side so a single bad cwd
+  lookup cannot crash session spawn.
+
+## [0.1.0]
+
+### Added
+- Initial release. Each session UID got a stable, deterministic color
+  for its lifetime, drawn from a fixed palette.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 William Ricchiuti
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,170 @@
+# hyper-windowtint
+
+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:
+
+- 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`)
+
+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.
+
+## 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. -->
+
+![demo placeholder](docs/demo.gif)
+
+## Install
+
+### From npm (recommended)
+
+```
+hyper i hyper-windowtint
+```
+
+`hyper i` adds the plugin to the `plugins` array in `~/.hyper.js` and installs
+it. Restart Hyper afterward.
+
+If you prefer to edit `~/.hyper.js` by hand:
+
+```js
+module.exports = {
+  config: {
+    // ...your existing config
+  },
+  plugins: ['hyper-windowtint'],
+};
+```
+
+### Local dev
+
+Hyper supports local plugins out of the box. Drop this folder into:
+
+```
+~/.hyper_plugins/local/hyper-windowtint
+```
+
+Then in `~/.hyper.js`:
+
+```js
+module.exports = {
+  config: {
+    // ...your existing config
+  },
+  plugins: [],
+  localPlugins: ['hyper-windowtint'],
+};
+```
+
+Restart Hyper (or `Cmd+Shift+R` to reload the renderer).
+
+## Config
+
+All options live under `config.windowTint` in `~/.hyper.js`:
+
+```js
+module.exports = {
+  config: {
+    windowTint: {
+      borderWidth: '3px',      // CSS string
+      showBadge: true,         // tiny color-name pill in the corner
+      glow: true,              // inner glow effect
+      palette: [               // optional — override the default palette
+        { name: 'red',   hex: '#ef4444' },
+        { name: 'green', hex: '#22c55e' },
+        { name: 'blue',  hex: '#3b82f6' },
+      ],
+    },
+  },
+  localPlugins: ['hyper-windowtint'],
+};
+```
+
+Palette entries must include both a non-empty `name` and a 6- or 8-digit hex color. Invalid entries are ignored; if none are valid, the default palette is used.
+
+## How it works
+
+**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.
+
+**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.
+- 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
+
+Color assignment is intentionally not permanent. The grouping rules are:
+
+- Inside a git repo, every tab currently in that repo shares the same color for the current Hyper run.
+- Outside a git repo, tabs currently in the same cwd share a color for the current Hyper run.
+- After restarting Hyper, those groups can receive different colors.
+- If Hyper does not provide a cwd, the plugin falls back to the session UID.
+
+Live updates after `cd` require OSC 7 cwd reporting from the shell. Many modern prompts/shell integrations already emit it; if yours does not, the color updates on new tabs but not after directory changes inside an existing tab.
+
+The plugin uses two custom Hyper RPC event names internally: `windowtint:session-seed` and `windowtint:cwd-change`. This depends on Hyper's current runtime RPC passthrough for arbitrary event names.
+
+## Enabling OSC 7 in your shell
+
+Add one of the snippets below if `cd`-ing inside a tab does not retint it. Most
+modern prompts (Starship, Powerlevel10k, fish ≥ 3, recent macOS zsh,
+Warp/iTerm integrations) already emit OSC 7, so try it first before adding
+anything.
+
+### zsh
+
+Add to `~/.zshrc`:
+
+```zsh
+_osc7_cwd() {
+  local host="${HOST:-localhost}"
+  printf '\e]7;file://%s%s\e\\' "$host" "$PWD"
+}
+autoload -Uz add-zsh-hook
+add-zsh-hook chpwd _osc7_cwd
+add-zsh-hook precmd _osc7_cwd
+```
+
+### bash
+
+Add to `~/.bashrc`:
+
+```bash
+_osc7_cwd() {
+  printf '\e]7;file://%s%s\e\\' "${HOSTNAME:-localhost}" "$PWD"
+}
+PROMPT_COMMAND='_osc7_cwd;'"${PROMPT_COMMAND:-}"
+```
+
+### fish
+
+Add to `~/.config/fish/config.fish`:
+
+```fish
+function osc7_cwd --on-variable PWD
+    printf '\e]7;file://%s%s\e\\' (hostname) "$PWD"
+end
+osc7_cwd
+```
+
+## Roadmap
+
+1. **Optional color labels.** Expose the current in-memory project group color so helper scripts can find matching windows without making the assignment permanent.
+2. **Admin/sudo override.** Force red for elevated shells (steal this from `hyperborder`'s `adminBorderColors`).
+3. **OKLCH-spaced palette generator** for any N colors with guaranteed perceptual distinctness.
+4. **Tests.** Pure-function tests for `hashToIndex`, `parseOsc7Cwd`, `readUserConfig`, and `withAlpha`.
+
+## License
+
+MIT

package/index.js

@@ -0,0 +1,703 @@
+'use strict';
+
+/**
+ * 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.
+ *
+ * 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.
+ *
+ * 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
+ * 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).
+ * Renderer-side OSC 7 handling updates the seed when a tab changes
+ * directories.
+ */
+
+// ---------------------------------------------------------------------------
+// Curated palette — Tailwind 400s, picked for distinctness on dark backgrounds.
+// ---------------------------------------------------------------------------
+const DEFAULT_PALETTE = [
+  { name: 'rose',    hex: '#fb7185' },
+  { name: 'orange',  hex: '#fb923c' },
+  { name: 'amber',   hex: '#fbbf24' },
+  { name: 'lime',    hex: '#a3e635' },
+  { name: 'emerald', hex: '#34d399' },
+  { name: 'teal',    hex: '#2dd4bf' },
+  { name: 'cyan',    hex: '#22d3ee' },
+  { name: 'sky',     hex: '#38bdf8' },
+  { name: 'indigo',  hex: '#818cf8' },
+  { name: 'violet',  hex: '#a78bfa' },
+  { name: 'fuchsia', hex: '#e879f9' },
+  { name: 'pink',    hex: '#f472b6' },
+];
+
+// ---------------------------------------------------------------------------
+// Seed hash → palette index (FNV-1a, no native deps).
+// ---------------------------------------------------------------------------
+function hashToIndex(str, mod) {
+  let h = 2166136261;
+  for (let i = 0; i < str.length; i++) {
+    h ^= str.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  return Math.abs(h) % mod;
+}
+
+function pickColor(seed, palette) {
+  return palette[hashToIndex(String(seed || 'default'), palette.length)];
+}
+
+function colorForSeed(seed) {
+  return pickColor(seed, userOpts.palette);
+}
+
+// Normalize a possibly-8-digit hex (#RRGGBBAA) to #RRGGBB and append an
+// explicit 2-char alpha. Without this, composing `color.hex + '55'` against a
+// user-supplied 8-digit hex produced an invalid 10-char color string.
+function withAlpha(hex, alpha) {
+  if (typeof hex !== 'string') return hex;
+  const m = hex.match(/^#([0-9a-fA-F]{6})(?:[0-9a-fA-F]{2})?$/);
+  if (!m) return hex;
+  return '#' + m[1] + alpha;
+}
+
+// ---------------------------------------------------------------------------
+// User config (read at decorateConfig time, captured in module scope).
+// ---------------------------------------------------------------------------
+let userOpts = {
+  palette: DEFAULT_PALETTE,
+  borderWidth: '3px',
+  showBadge: true,
+  glow: true,
+};
+
+function readUserConfig(config) {
+  const u = (config && config.windowTint) || {};
+  const palette = Array.isArray(u.palette)
+    ? u.palette.filter((item) => (
+      item &&
+      typeof item.name === 'string' &&
+      item.name.trim().length > 0 &&
+      typeof item.hex === 'string' &&
+      /^#[0-9a-fA-F]{6}([0-9a-fA-F]{2})?$/.test(item.hex)
+    ))
+    : DEFAULT_PALETTE;
+  return {
+    palette: palette.length ? palette : DEFAULT_PALETTE,
+    borderWidth: typeof u.borderWidth === 'string' ? u.borderWidth : '3px',
+    showBadge: u.showBadge !== false,
+    glow: u.glow !== false,
+  };
+}
+
+// ===========================================================================
+// MAIN-PROCESS SECTION
+// ===========================================================================
+// decorateSessionOptions, onWindow, onUnload are only invoked in main.
+// Module-scope maps declared here live in the main process when populated
+// from main-side hooks.
+// ===========================================================================
+
+// cwd → resolved project root (walk up to .git, else cwd itself). Cached so
+// repeat sessions in the same tree don't redo the fs walk.
+const projectRootCache = new Map();
+const projectRootPromises = new Map();
+
+// project root → ephemeral random seed. This intentionally does not persist
+// across Hyper restarts; it only keeps same-project terminals matched while
+// the app is running.
+const projectSeedCache = new Map();
+
+// uid → seed, populated in decorateSessionOptions, drained when the
+// matching `session add` rpc emit fires for that uid in onWindow's wrap.
+const pendingSeeds = new Map();
+const pendingSeedTimers = new Map();
+const tintedWindows = new Set();
+
+const PENDING_SEED_TTL_MS = 30000;
+
+function deletePendingSeed(uid) {
+  const timer = pendingSeedTimers.get(uid);
+  if (timer) {
+    clearTimeout(timer);
+    pendingSeedTimers.delete(uid);
+  }
+  pendingSeeds.delete(uid);
+}
+
+function setPendingSeed(uid, seed) {
+  deletePendingSeed(uid);
+  pendingSeeds.set(uid, seed);
+  const timer = setTimeout(() => {
+    deletePendingSeed(uid);
+  }, PENDING_SEED_TTL_MS);
+  if (timer && typeof timer.unref === 'function') timer.unref();
+  pendingSeedTimers.set(uid, timer);
+}
+
+async function resolveProjectRootAsync(cwd) {
+  if (!cwd) return cwd;
+  if (projectRootCache.has(cwd)) return projectRootCache.get(cwd);
+  if (projectRootPromises.has(cwd)) return projectRootPromises.get(cwd);
+
+  const promise = (async () => {
+    let root = cwd;
+    let cacheKey = cwd;
+    try {
+      const path = require('path');
+      const fs = require('fs');
+      let dir = cwd;
+      try {
+        dir = await fs.promises.realpath(cwd);
+        cacheKey = dir;
+      } catch (e) {
+        // Fall back to the provided cwd if realpath fails.
+      }
+      if (projectRootCache.has(cacheKey)) {
+        const cachedRoot = projectRootCache.get(cacheKey);
+        projectRootCache.set(cwd, cachedRoot);
+        return cachedRoot;
+      }
+
+      let prev = null;
+      while (dir && dir !== prev) {
+        try {
+          await fs.promises.access(path.join(dir, '.git'));
+          root = dir;
+          break;
+        } catch (e) { /* keep walking */ }
+        prev = dir;
+        dir = path.dirname(dir);
+      }
+    } catch (e) {
+      // If require or fs access fails, fall back to the raw cwd.
+    }
+
+    projectRootCache.set(cwd, root);
+    projectRootCache.set(cacheKey, root);
+    return root;
+  })();
+
+  projectRootPromises.set(cwd, promise);
+  try {
+    return await promise;
+  } finally {
+    projectRootPromises.delete(cwd);
+  }
+}
+
+function createRandomSeed() {
+  return `windowtint:${Date.now().toString(36)}:${Math.random().toString(36).slice(2)}`;
+}
+
+function seedForProjectRoot(root) {
+  if (!root) return root;
+  if (!projectSeedCache.has(root)) {
+    projectSeedCache.set(root, createRandomSeed());
+  }
+  return projectSeedCache.get(root);
+}
+
+exports.decorateSessionOptions = (options) => {
+  try {
+    if (options && options.uid && options.cwd) {
+      resolveProjectRootAsync(options.cwd).then((root) => {
+        const seed = seedForProjectRoot(root);
+        if (!seed) return;
+        setPendingSeed(options.uid, seed);
+        broadcastSessionSeed(options.uid, seed);
+      }).catch(() => {});
+    }
+  } catch (e) { /* never break session spawn over a tint lookup */ }
+  return options;
+};
+
+function broadcastSessionSeed(uid, seed) {
+  tintedWindows.forEach((win) => {
+    try {
+      if (win && win.rpc && typeof win.rpc.emit === 'function') {
+        win.rpc.emit('windowtint:session-seed', { uid, seed });
+      }
+    } catch (e) { /* swallow */ }
+  });
+}
+
+// Wrap win.rpc.emit once per window so we can inject `windowtint:session-seed`
+// immediately before Hyper's own `session add` reaches the renderer. The
+// per-rpc state object survives plugin reloads, so the persistent wrapper can
+// consume seeds from the newest module instance instead of a stale closure.
+exports.onWindow = (win) => {
+  try {
+    if (!win || !win.rpc || typeof win.rpc.emit !== 'function') return;
+    tintedWindows.add(win);
+
+    const state = win.rpc.__windowtint_state__ || {};
+    state.consumeSeed = (uid) => {
+      const seed = pendingSeeds.get(uid);
+      if (seed) deletePendingSeed(uid);
+      return seed;
+    };
+    state.resolveCwd = (payload) => {
+      try {
+        if (!payload || !payload.uid || !payload.cwd) return;
+        resolveProjectRootAsync(payload.cwd).then((root) => {
+          const seed = seedForProjectRoot(root);
+          if (seed) win.rpc.emit('windowtint:session-seed', { uid: payload.uid, seed });
+        }).catch(() => {});
+      } catch (e) { /* swallow */ }
+    };
+    win.rpc.__windowtint_state__ = state;
+
+    if (!state.cwdListenerInstalled && typeof win.rpc.on === 'function') {
+      state.cwdListener = (payload) => {
+        const rpcState = win.rpc.__windowtint_state__;
+        if (rpcState && rpcState.resolveCwd) rpcState.resolveCwd(payload);
+      };
+      win.rpc.on('windowtint:cwd-change', state.cwdListener);
+      state.cwdListenerInstalled = true;
+    }
+
+    if (state.wrappedEmit) return;
+    if (win.rpc.emit.__windowtint_wrapped__ && win.rpc.emit.__windowtint_uses_state__) {
+      state.wrappedEmit = win.rpc.emit;
+      return;
+    }
+
+    const originalEmit = win.rpc.emit;
+    const wrappedEmit = function (...args) {
+      const channel = args[0];
+      const payload = args[1];
+      try {
+        if (channel === 'session add' && payload && payload.uid) {
+          const rpcState = win.rpc.__windowtint_state__;
+          const seed = rpcState && rpcState.consumeSeed && rpcState.consumeSeed(payload.uid);
+          if (seed) {
+            Reflect.apply(originalEmit, this, ['windowtint:session-seed', { uid: payload.uid, seed }]);
+          }
+        }
+      } catch (e) { /* swallow — the original emit must still run */ }
+      return Reflect.apply(originalEmit, this, args);
+    };
+    wrappedEmit.__windowtint_wrapped__ = true;
+    wrappedEmit.__windowtint_uses_state__ = true;
+    wrappedEmit.__windowtint_original__ = originalEmit;
+    state.wrappedEmit = wrappedEmit;
+    win.rpc.emit = wrappedEmit;
+  } catch (e) { /* swallow */ }
+};
+
+function removeRpcListener(rpc, event, listener) {
+  if (!rpc || !listener) return;
+  // Hyper exposes the listener on `rpc` directly; older shapes used
+  // `rpc.emitter`. Try the documented paths in order and stop at the first
+  // that actually accepts the call.
+  const targets = [
+    [rpc, 'removeListener'],
+    [rpc, 'off'],
+    [rpc.emitter, 'removeListener'],
+    [rpc.emitter, 'off'],
+  ];
+  for (const [target, method] of targets) {
+    if (target && typeof target[method] === 'function') {
+      try { target[method](event, listener); return; } catch (e) { /* try next */ }
+    }
+  }
+}
+
+exports.onUnload = () => {
+  try {
+    tintedWindows.forEach((win) => {
+      try {
+        const state = win && win.rpc && win.rpc.__windowtint_state__;
+        if (state && state.cwdListener && win && win.rpc) {
+          removeRpcListener(win.rpc, 'windowtint:cwd-change', state.cwdListener);
+        }
+        if (state) {
+          state.cwdListener = null;
+          state.cwdListenerInstalled = false;
+          state.resolveCwd = null;
+          if (
+            state.wrappedEmit &&
+            state.wrappedEmit.__windowtint_original__ &&
+            win.rpc &&
+            win.rpc.emit === state.wrappedEmit
+          ) {
+            win.rpc.emit = state.wrappedEmit.__windowtint_original__;
+          }
+          state.wrappedEmit = null;
+          state.consumeSeed = null;
+        }
+      } catch (e) { /* swallow */ }
+    });
+    tintedWindows.clear();
+    projectSeedCache.clear();
+    projectRootPromises.clear();
+    projectRootCache.clear();
+  } catch (e) { /* swallow */ }
+};
+
+// ===========================================================================
+// RENDERER-PROCESS SECTION
+// ===========================================================================
+
+// 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;
+  const root = document.documentElement;
+  root.style.setProperty('--tint-color', color.hex);
+  root.style.setProperty('--tint-glow', opts.glow ? withAlpha(color.hex, '55') : 'transparent');
+  root.style.setProperty('--tint-tab-bg', withAlpha(color.hex, '22'));
+  root.style.setProperty('--tint-name', `"${color.name}"`);
+}
+
+function tintForUid(uid) {
+  if (!uid) return;
+  const seed = uidToSeed.get(uid) || uid;
+  if (seed === currentSeed) return;
+  currentSeed = seed;
+  const color = colorForSeed(seed);
+  applyTint(color, userOpts);
+  uidToColor.set(uid, color);
+}
+
+function setSeedForUid(uid, seed) {
+  uidToSeed.set(uid, seed);
+  const color = colorForSeed(seed);
+  uidToColor.set(uid, color);
+  return color;
+}
+
+function installRpcListener(store) {
+  if (rpcListenerInstalled) return;
+  if (typeof window === 'undefined' || !window.rpc || typeof window.rpc.on !== 'function') return;
+  rpcListenerInstalled = true;
+
+  rpcSeedListener = (payload) => {
+    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
+      // add`, but cheap insurance), retint the active session now.
+      const state = store.getState();
+      const activeUid = state.sessions && state.sessions.activeUid;
+      if (activeUid === payload.uid) {
+        currentSeed = null; // force re-eval
+        tintForUid(activeUid);
+      }
+    } catch (e) { /* swallow */ }
+  };
+
+  window.rpc.on('windowtint:session-seed', rpcSeedListener);
+}
+
+exports.onRendererUnload = () => {
+  try {
+    if (rpcSeedListener && typeof window !== 'undefined' && window.rpc) {
+      removeRpcListener(window.rpc, 'windowtint:session-seed', rpcSeedListener);
+    }
+    rpcSeedListener = null;
+    rpcListenerInstalled = false;
+    uidToSeed.clear();
+    uidToColor.clear();
+    currentSeed = null;
+    tintVersion = 0;
+  } catch (e) { /* swallow */ }
+};
+
+function parseOsc7Cwd(value) {
+  if (!value || typeof value !== 'string') return null;
+  try {
+    const url = new URL(value);
+    if (url.protocol !== 'file:') return null;
+    let pathname = decodeURIComponent(url.pathname || '');
+    // Guard `process`: with Electron contextIsolation the renderer may not
+    // have a `process` global. Without the guard this throws a ReferenceError
+    // and we silently fail to update on cwd change.
+    const isWin32 =
+      typeof process !== 'undefined' && process && process.platform === 'win32';
+    if (isWin32 && /^\/[a-zA-Z]:\//.test(pathname)) {
+      pathname = pathname.slice(1);
+    }
+    return pathname || null;
+  } catch (e) {
+    return null;
+  }
+}
+
+function sendCwdChange(uid, cwd) {
+  if (
+    !uid ||
+    !cwd ||
+    typeof window === 'undefined' ||
+    !window.rpc ||
+    typeof window.rpc.emit !== 'function'
+  ) {
+    return;
+  }
+  try {
+    window.rpc.emit('windowtint:cwd-change', { uid, cwd });
+  } catch (e) { /* swallow */ }
+}
+
+function installOsc7Handler(uid, term) {
+  try {
+    if (!uid || !term || !term.parser || typeof term.parser.registerOscHandler !== 'function') return null;
+    return term.parser.registerOscHandler(7, (value) => {
+      const cwd = parseOsc7Cwd(value);
+      if (cwd) sendCwdChange(uid, cwd);
+      return true;
+    });
+  } catch (e) {
+    return null;
+  }
+}
+
+exports.decorateTerm = (Term, { React }) => {
+  return class WindowTintTerm extends React.PureComponent {
+    constructor(props) {
+      super(props);
+      this.osc7Disposable = null;
+      this.termComponent = null;
+      this.installInterval = null;
+      this.installStartedAt = 0;
+    }
+
+    tryInstallOsc7 = () => {
+      if (this.osc7Disposable || !this.termComponent) return;
+      if (this.termComponent.term) {
+        this.osc7Disposable = installOsc7Handler(this.props.uid, this.termComponent.term);
+        if (this.installInterval) {
+          clearInterval(this.installInterval);
+          this.installInterval = null;
+        }
+        return;
+      }
+      if (!this.installInterval) {
+        this.installStartedAt = Date.now();
+        this.installInterval = setInterval(() => {
+          if (Date.now() - this.installStartedAt > 5000) {
+            clearInterval(this.installInterval);
+            this.installInterval = null;
+            return;
+          }
+          this.tryInstallOsc7();
+        }, 50);
+      }
+    };
+
+    disposeOsc7 = () => {
+      if (this.installInterval) {
+        clearInterval(this.installInterval);
+        this.installInterval = null;
+      }
+      if (this.osc7Disposable && typeof this.osc7Disposable.dispose === 'function') {
+        this.osc7Disposable.dispose();
+      }
+      this.osc7Disposable = null;
+    };
+
+    onDecorated = (termComponent) => {
+      if (this.props.onDecorated) {
+        this.props.onDecorated(termComponent);
+      }
+      this.termComponent = termComponent;
+      if (!termComponent) {
+        this.disposeOsc7();
+        return;
+      }
+      this.tryInstallOsc7();
+    };
+
+    componentDidMount() {
+      this.tryInstallOsc7();
+    }
+
+    componentWillUnmount() {
+      this.disposeOsc7();
+      this.termComponent = null;
+    }
+
+    render() {
+      return React.createElement(Term, Object.assign({}, this.props, { onDecorated: this.onDecorated }));
+    }
+  };
+};
+
+exports.decorateConfig = (config) => {
+  userOpts = readUserConfig(config);
+
+  const badgeCSS = userOpts.showBadge ? `
+  .hyper_main::after {
+    content: var(--tint-name, '');
+    position: absolute;
+    top: 6px;
+    right: 14px;
+    font: 600 10px/1 -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--tint-color, transparent);
+    opacity: 0.55;
+    pointer-events: none;
+    z-index: 1000;
+  }` : '';
+
+  const css = `
+  /* hyper-windowtint v0.2 */
+  .hyper_main {
+    position: relative;
+  }
+  .hyper_main::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    border: ${userOpts.borderWidth} solid var(--tint-color, transparent);
+    box-shadow: inset 0 0 28px -10px var(--tint-glow, transparent);
+    z-index: 999;
+    transition: border-color 0.25s ease, box-shadow 0.25s ease;
+  }
+  .hyper_main .tabs_title,
+  .hyper_main .tabs_borderShim {
+    border-top-color: var(--tint-color, transparent) !important;
+  }
+  .hyper_main .tab_tab.tab_active {
+    background: linear-gradient(180deg, var(--tint-tab-bg, transparent), transparent);
+  }
+  .hyper_main .tab_tab.tab_active .windowtint_tabAccent {
+    height: 3px;
+    opacity: 1;
+  }
+  ${badgeCSS}
+  `;
+
+  return Object.assign({}, config, {
+    css: `${config.css || ''}\n${css}`,
+  });
+};
+
+exports.decorateTab = (Tab, { React }) => {
+  return class WindowTintTab extends React.PureComponent {
+    render() {
+      const uid = this.props.windowTintUid;
+      const color = this.props.windowTintColor || null;
+      const accent = React.createElement('span', {
+        className: 'windowtint_tabAccent',
+        'data-windowtint-uid': uid,
+        style: {
+          position: 'absolute',
+          left: 0,
+          right: 0,
+          bottom: 0,
+          height: this.props.isActive ? 3 : 2,
+          background: color ? color.hex : 'transparent',
+          boxShadow: color ? `0 0 12px ${withAlpha(color.hex, '66')}` : 'none',
+          opacity: color ? (this.props.isActive ? 1 : 0.65) : 0,
+          pointerEvents: 'none',
+          transition: 'background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, height 0.2s ease',
+        },
+      });
+      const existing = this.props.customChildrenBefore;
+      const customChildrenBefore = existing ? [accent].concat(existing) : accent;
+      return React.createElement(Tab, Object.assign({}, this.props, { customChildrenBefore }));
+    }
+  };
+};
+
+exports.getTabProps = (tab, parentProps, props) => {
+  try {
+    if (!tab || !tab.uid) return props;
+    const colors = parentProps && parentProps.windowTintTabColors;
+    return Object.assign({}, props, {
+      windowTintUid: tab.uid,
+      windowTintColor: colors && colors[tab.uid] ? colors[tab.uid] : null,
+      windowTintVersion: parentProps && parentProps.windowTintVersion,
+    });
+  } catch (e) {
+    return props;
+  }
+};
+
+exports.mapHeaderState = (state, props) => {
+  try {
+    const colors = {};
+    const activeSessions = state.termGroups && state.termGroups.activeSessions;
+    if (activeSessions) {
+      Object.keys(activeSessions).forEach((rootGroupUid) => {
+        const sessionUid = activeSessions[rootGroupUid];
+        const color = uidToColor.get(sessionUid);
+        if (color) colors[rootGroupUid] = color;
+      });
+    }
+    return Object.assign({}, props, {
+      windowTintTabColors: colors,
+      windowTintVersion: state.ui && state.ui.windowTintVersion,
+    });
+  } catch (e) {
+    return props;
+  }
+};
+
+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) => {
+  installRpcListener(store);
+
+  const result = next(action);
+
+  if (
+    action.type === 'SESSION_ADD' ||
+    action.type === 'SESSION_SET_ACTIVE'
+  ) {
+    try {
+      const state = store.getState();
+      const activeUid =
+        (state.sessions && state.sessions.activeUid) ||
+        action.uid ||
+        null;
+      tintForUid(activeUid);
+    } catch (e) {
+      // Decoration only — never crash the terminal over a tint.
+    }
+  }
+
+  return result;
+};

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "hyper-windowtint",
+  "version": "0.3.0",
+  "description": "Give Hyper terminal tabs distinct color tints, matching tabs from the same project during the current Hyper session.",
+  "main": "index.js",
+  "files": [
+    "index.js",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "hyper",
+    "hyper-plugin",
+    "hyper.app",
+    "hyperterm",
+    "terminal",
+    "theme",
+    "tabs",
+    "color",
+    "tint",
+    "cwd",
+    "project",
+    "osc7"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/willytop8/Hyper-WindowTint.git"
+  },
+  "bugs": {
+    "url": "https://github.com/willytop8/Hyper-WindowTint/issues"
+  },
+  "homepage": "https://github.com/willytop8/Hyper-WindowTint#readme",
+  "license": "MIT",
+  "author": "William Ricchiuti",
+  "engines": {
+    "hyper": ">=3.0.0"
+  }
+}