@underactive/pi-topping-statusline 0.1.1 → 0.1.3

package/README.md

@@ -41,6 +41,7 @@ and apply live.
 ║    Symbols                                       ‹ nerdfont ›  ║
 ║    Border style                                   ‹ rounded ›  ║
 ║    [■] Rainbow border on max thinking                      ON  ║
+║    [■] Animate rainbow border                              ON  ║
 ║                                                                ║
 ╟─ Top Left Segment Group ───────────────────────────────────────╢
 ║    [■] Pi symbol                                           ON  ║
@@ -65,26 +66,26 @@ and apply live.
 ║    + add feed                                                  ║
 ║                                                                ║
 ║  ↑↓ move  ←→ cycle  ␣ toggle  ⏎ apply/edit  esc cancel         ║
-╚════════════════════════════════════════════════════════[ 1/28 ]╝
+╚════════════════════════════════════════════════════════[ 1/29 ]╝
 ```
 
 | Section | Settings |
 | --- | --- |
-| Global | Transparent Segments · Separator (`powerline` `powerline-thin` `slash` `pipe` `ascii`) · Symbols (`nerdfont` `unicode` `ascii` — stored in settings.json as `nerd`/`unicode`/`ascii`) · Border style (`rounded` `heavy` `double` `single`) · Rainbow border on max thinking |
+| Global | Transparent Segments · Separator (`powerline` `powerline-thin` `slash` `pipe` `ascii`) · Symbols (`nerdfont` `unicode` `ascii` — stored in settings.json as `nerd`/`unicode`/`ascii`) · Border style (`rounded` `heavy` `double` `single`) · Rainbow border on max thinking · Animate rainbow border |
 | Top Left Segment Group | Pi symbol · Model · Provider · Thinking level · Path · Git · PR |
 | Top Right Segment Group | Token rate · Session name |
 | Bottom Right Segment Group | Feeds · Token rate · Pi stats · Context bar · Context stats |
 | Bottom Left Segment Group | Scroll hint · Feeds · Token rate |
 | Feeds | One subscription per row: type · field · prefix · format, plus add/remove |
-| Defaults | Transparent on · Separator `powerline-thin` · Symbols `nerdfont` · Border style `rounded` · Rainbow border on |
+| Defaults | Transparent on · Separator `powerline-thin` · Symbols `nerdfont` · Border style `rounded` · Rainbow border on · Animate rainbow border on |
 
 With **Rainbow border on max thinking** on (the default), cycling the thinking level to `max`
-replaces the border's fixed theme color with an animated rainbow: a full hue cycle distributed
-around the box perimeter that slowly flows around the border (~14s per rotation), like Apple
-Intelligence's screen border. Any other thinking level keeps the normal theme border color.
-The settings preview animates while the toggle is on; the effect repaints the border about
-20 times a second, so switch it off over slow SSH links or in terminals with expensive
-redraws.
+replaces the border's fixed theme color with a rainbow: a full hue cycle distributed around the
+box perimeter. **Animate rainbow border** is also on by default, so the hues flow around the
+border (~14s per rotation), like Apple Intelligence's screen border. Turn animation off to keep
+the rainbow at a fixed color phase without its repaint timer; the settings preview uses a stable
+phase too. Any other thinking level keeps the normal theme border color. Disable animation over
+slow SSH links or in terminals with expensive redraws while retaining the rainbow border.
 
 ## Segments
 
@@ -130,9 +131,10 @@ A feed contributes nothing when its publisher is absent, has published nothing t
 reports a value its format suppresses; the segment disappears entirely once every feed is
 quiet, so it costs nothing to leave switched on. Publishers typically reset per process run,
 so entries predating the current session start (`--resume`, `/reload`, `/new`, fork) are
-ignored rather than shown as a stale total. The session is re-read at most once every two
-seconds, because pi copies the whole entry list on each read while the bar re-renders on
-every keystroke.
+ignored rather than shown as a stale total. During steady-state rendering, the session is
+re-read at most once every two seconds, because pi copies the whole entry list on each read
+while the bar re-renders on every keystroke; changing subscriptions or starting a new
+session forces an immediate scan.
 
 ### Publishing a feed
 

package/index.ts

@@ -55,17 +55,18 @@ export default function (pi: ExtensionAPI) {
 	rateMonitor.attach(pi);
 	builder.setTokenRateProvider(() => rateMonitor.getDisplay());
 
-	// Animated rainbow border while the thinking level is max: a timer steps
-	// the hue phase and re-renders; renderBoxed paints the box glyphs from it.
+	// The rainbow is visible at max thinking independently of whether its hue
+	// phase is animated. Stopping the timer preserves the current live phase.
 	const rainbow = new RainbowBorder();
 	let rainbowTimer: ReturnType<typeof setInterval> | undefined;
 	const rainbowActive = (): boolean =>
 		state.effective.rainbowBorder && activeCtx !== undefined && pi.getThinkingLevel() === "max";
+	const rainbowAnimationActive = (): boolean => rainbowActive() && state.effective.rainbowAnimation;
 	const syncRainbow = (): void => {
-		if (rainbowActive()) {
+		if (rainbowAnimationActive()) {
 			if (!rainbowTimer) {
 				rainbowTimer = setInterval(() => {
-					if (!rainbowActive()) {
+					if (!rainbowAnimationActive()) {
 						syncRainbow();
 						return;
 					}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@underactive/pi-topping-statusline",
-	"version": "0.1.1",
+	"version": "0.1.3",
 	"description": "oh-my-pi's powerline statusline as a pi extension with some customizations",
 	"keywords": [
 		"pi-package",

package/src/context.ts

@@ -17,6 +17,9 @@ const EXEC_TIMEOUT_MS = 2_000;
 /** getEntries() filters and copies the whole session, so rescans are rate-limited. */
 const FEED_TTL_MS = 2_000;
 
+/** Prototype-less map — feed keys are publisher-supplied customTypes. */
+const emptyFeedData = (): Record<string, unknown> => Object.create(null);
+
 interface GitStatusCounts {
 	staged: number;
 	unstaged: number;
@@ -85,7 +88,7 @@ export class SegmentContextBuilder {
 
 	#worktree: { projectName: string; worktreeName: string } | null = null;
 
-	#feedData: Record<string, unknown> = Object.create(null) as Record<string, unknown>;
+	#feedData: Record<string, unknown> = emptyFeedData();
 	#feedsScannedAt = 0;
 	#feedsScanned = "";
 	#runStartedAt = 0;
@@ -113,7 +116,7 @@ export class SegmentContextBuilder {
 		// session still carries the previous run's entries. Anything predating this
 		// attach belongs to that stale run.
 		this.#runStartedAt = Date.now();
-		this.#feedData = Object.create(null) as Record<string, unknown>;
+		this.#feedData = emptyFeedData();
 		this.#feedsScannedAt = 0;
 		this.#feedsScanned = "";
 		if (this.#repoCwd !== ctx.cwd) {
@@ -188,6 +191,9 @@ export class SegmentContextBuilder {
 			this.#requestRender();
 		} finally {
 			this.#repoResolving = false;
+			if (this.#repoCwd && this.#repoCwd !== cwd) {
+				void this.#resolveRepo(this.#repoCwd);
+			}
 		}
 	}
 
@@ -265,7 +271,7 @@ export class SegmentContextBuilder {
 	 */
 	#refreshFeeds(customTypes: readonly string[], now: number): void {
 		this.#feedsScannedAt = now;
-		this.#feedData = Object.create(null) as Record<string, unknown>;
+		this.#feedData = emptyFeedData();
 		const entries = this.#ctx?.sessionManager?.getEntries();
 		if (!entries) return;
 		const pending = new Set(customTypes);
@@ -275,7 +281,8 @@ export class SegmentContextBuilder {
 			// first: matching on customType alone lets one shadow a real entry.
 			if (entry?.type !== "custom" || !pending.has(entry.customType)) continue;
 			const ts = Date.parse(entry.timestamp);
-			if (!Number.isFinite(ts) || ts < this.#runStartedAt) break;
+			if (!Number.isFinite(ts)) continue;
+			if (ts < this.#runStartedAt) break;
 			pending.delete(entry.customType);
 			if (entry.data !== undefined) this.#feedData[entry.customType] = entry.data;
 		}
@@ -304,7 +311,7 @@ export class SegmentContextBuilder {
 						const u = URL.parse(parsed.url);
 						if (
 							u &&
-							(u.protocol === "https:" || u.protocol === "http:") &&
+							u.protocol === "https:" &&
 							u.hostname === "github.com" &&
 							!/[\u0000-\u001f\u007f]/.test(parsed.url)
 						) {

package/src/layout.ts

@@ -66,27 +66,24 @@ export function buildStatusLine(
 	const fgAnsi = theme.getFgAnsi("text");
 	const sepAnsi = theme.getFgAnsi("statusLineSep");
 
-	const leftParts: string[] = [];
+	const left: string[] = [];
 	const leftSegIds: StatusLineSegmentId[] = [];
 	for (const segId of segmentGroups.left) {
 		const rendered = renderSegment(segId, ctx);
 		if (rendered.visible && rendered.content) {
-			leftParts.push(rendered.content);
+			left.push(rendered.content);
 			leftSegIds.push(segId);
 		}
 	}
 
-	const rightParts: string[] = [];
+	const right: string[] = [];
 	for (const segId of segmentGroups.right) {
 		const rendered = renderSegment(segId, ctx);
 		if (rendered.visible && rendered.content) {
-			rightParts.push(rendered.content);
+			right.push(rendered.content);
 		}
 	}
 
-	const left = [...leftParts];
-	const right = [...rightParts];
-
 	const leftSepWidth = visibleWidth(separatorDef.left);
 	const rightSepWidth = visibleWidth(separatorDef.right);
 	// Transparent mode drops the round caps (they need a bg fill to bridge);

package/src/menu.ts

@@ -112,6 +112,10 @@ export interface MenuResult<T> {
 const DEFAULT_HINTS = ["\u2191\u2193 move", "\u2423 toggle", "\u23ce apply", "esc cancel"];
 const EDIT_HINTS = ["type to edit", "\u232b delete", "\u23ce commit", "esc discard"];
 const OVERLAY_WIDTH = "90%";
+/** Width of the "  <marker> " prefix shared by rows without a checkbox. */
+const PLAIN_ROW_PREFIX_LEN = 5;
+/** Width of the "  <marker> [■] " prefix shared by checkbox rows. */
+const CHECKBOX_ROW_PREFIX_LEN = 8;
 
 interface FlatItem {
 	id: string;
@@ -607,10 +611,9 @@ export class MenuComponent implements Component {
 		if (item.text) {
 			const editing = this.editing?.id === item.id ? this.editing : undefined;
 			const raw = editing ? editing.buffer : String(value ?? "");
-			const fixedLeftLen = 5;
-			const labelWidth = Math.min(16, Math.max(0, innerWidth - fixedLeftLen - 4));
+			const labelWidth = Math.min(16, Math.max(0, innerWidth - PLAIN_ROW_PREFIX_LEN - 4));
 			const label = truncateToWidth(item.label, labelWidth).padEnd(labelWidth);
-			const fieldWidth = Math.max(0, innerWidth - fixedLeftLen - labelWidth - 3);
+			const fieldWidth = Math.max(0, innerWidth - PLAIN_ROW_PREFIX_LEN - labelWidth - 3);
 			// Keep the caret in view by showing the buffer's tail once it overflows.
 			const shownRaw =
 				editing && raw.length > fieldWidth - 1 ? raw.slice(raw.length - (fieldWidth - 1)) : raw;
@@ -630,8 +633,7 @@ export class MenuComponent implements Component {
 			const stateWord = `‹ ${value} ›`;
 			// Ungated cycle rows carry no checkbox; gated ones keep it for the space toggle.
 			if (!item.cycleEnabledBy) {
-				const fixedLeftLen = 5; // "  " + marker(1) + " " + margin
-				const maxLabelLen = Math.max(0, innerWidth - fixedLeftLen - visibleWidth(stateWord) - 1);
+				const maxLabelLen = Math.max(0, innerWidth - PLAIN_ROW_PREFIX_LEN - visibleWidth(stateWord) - 1);
 				const label = item.label.length > maxLabelLen ? truncateToWidth(item.label, maxLabelLen) : item.label;
 				const leftPlain = `  ${marker} ${label}`;
 				const gap = Math.max(1, innerWidth - visibleWidth(leftPlain) - visibleWidth(stateWord) - 2);
@@ -639,8 +641,7 @@ export class MenuComponent implements Component {
 				return this.wrap("\u2551", content, "\u2551");
 			}
 			const enabled = this.values[item.cycleEnabledBy] as boolean;
-			const fixedLeftLen = 8;
-			const maxLabelLen = Math.max(0, innerWidth - fixedLeftLen - visibleWidth(stateWord) - 1);
+			const maxLabelLen = Math.max(0, innerWidth - CHECKBOX_ROW_PREFIX_LEN - visibleWidth(stateWord) - 1);
 			const label = item.label.length > maxLabelLen ? truncateToWidth(item.label, maxLabelLen) : item.label;
 			const leftPlain = `  ${marker} [${enabled ? "■" : " "}] ${label}`;
 			const gap = Math.max(1, innerWidth - visibleWidth(leftPlain) - visibleWidth(stateWord) - 2);
@@ -652,8 +653,7 @@ export class MenuComponent implements Component {
 		const box = enabled ? "\u25a0" : " ";
 		const stateWord = enabled ? "ON" : "OFF";
 		const rightPlain = `${stateWord}  `;
-		const fixedLeftLen = 8; // "  " + marker(1) + " " + "[" + box(1) + "]" + " "
-		const maxLabelLen = Math.max(0, innerWidth - fixedLeftLen - rightPlain.length - 1);
+		const maxLabelLen = Math.max(0, innerWidth - CHECKBOX_ROW_PREFIX_LEN - rightPlain.length - 1);
 		const label = item.label.length > maxLabelLen ? truncateToWidth(item.label, maxLabelLen) : item.label;
 		const leftPlain = `  ${marker} [${box}] ${label}`;
 		const gap = Math.max(1, innerWidth - visibleWidth(leftPlain) - visibleWidth(rightPlain));

package/src/rainbow.ts

@@ -46,7 +46,7 @@ export function perimeterPosition(row: number, col: number, width: number, botto
 	return 2 * width + 2 * bottomIdx - 2 - row; // col === 0
 }
 
-function hslToRgb(h: number, s: number, l: number): [number, number, number] {
+export function hslToRgb(h: number, s: number, l: number): [number, number, number] {
 	const c = (1 - Math.abs(2 * l - 1)) * s;
 	const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
 	const m = l - c / 2;
@@ -60,7 +60,7 @@ function hslToRgb(h: number, s: number, l: number): [number, number, number] {
 	return [Math.round((rgb[0] + m) * 255), Math.round((rgb[1] + m) * 255), Math.round((rgb[2] + m) * 255)];
 }
 
-function rgbToHex([r, g, b]: [number, number, number]): string {
+export function rgbToHex([r, g, b]: [number, number, number]): string {
 	return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, "0")}`;
 }
 

package/src/settings-menu.ts

@@ -135,6 +135,11 @@ function buildSections(settings: StatusLineSettings): MenuSection[] {
 				label: "Rainbow border on max thinking",
 				value: settings.rainbowBorder ?? true,
 			},
+			{
+				id: "rainbowAnimation",
+				label: "Animate rainbow border",
+				value: settings.rainbowAnimation ?? true,
+			},
 		],
 	};
 	return [
@@ -164,6 +169,7 @@ function valuesToSettings(values: Record<string, MenuValue>): StatusLineSettings
 		segments,
 		feeds: sanitizeFeeds(feedsFromValues(values)),
 		rainbowBorder: values.rainbowBorder === true,
+		rainbowAnimation: values.rainbowAnimation === true,
 	};
 }
 
@@ -195,12 +201,10 @@ function cannedFeedData(
 }
 
 class StatusLinePreview {
-	readonly #state: SettingsState;
 	readonly #builder: SegmentContextBuilder;
 	readonly #uiTheme: Theme;
 
-	constructor(state: SettingsState, builder: SegmentContextBuilder, uiTheme: Theme) {
-		this.#state = state;
+	constructor(builder: SegmentContextBuilder, uiTheme: Theme) {
 		this.#builder = builder;
 		this.#uiTheme = uiTheme;
 	}
@@ -217,6 +221,7 @@ class StatusLinePreview {
 		const boxWidth = Math.max(24, innerWidth - 1);
 		const barWidth = boxWidth - 6;
 		const rainbowOn = effective.rainbowBorder;
+		const rainbowAnimationOn = rainbowOn && effective.rainbowAnimation;
 
 		// The theme singleton drives glyph lookups everywhere, so swap the
 		// symbol preset for this synchronous render only; the live bar behind
@@ -255,7 +260,7 @@ class StatusLinePreview {
 			const bottomIdx = 2;
 			const painters = makeBoxPainters({
 				rainbowOn,
-				rainbow: new RainbowBorder((elapsedMs * 360) / RAINBOW_CYCLE_MS),
+				rainbow: new RainbowBorder(rainbowAnimationOn ? (elapsedMs * 360) / RAINBOW_CYCLE_MS : 0),
 				box,
 				width: boxWidth,
 				bottomIdx,
@@ -291,9 +296,8 @@ class StatusLinePreview {
 						painters.paint(1, boxWidth - 1, box.vertical),
 					renderBoxRow(painters, bottom, bottomIdx, boxWidth, box.bottomLeft, box.bottomRight),
 				],
-				// Keep the preview animated only while the rainbow is enabled;
-				// a static preview refreshes once and stops.
-				nextRefreshInMs: rainbowOn ? RAINBOW_FRAME_MS : undefined,
+				// A static rainbow stays at phase zero and needs no repaint timer.
+				nextRefreshInMs: rainbowAnimationOn ? RAINBOW_FRAME_MS : undefined,
 			};
 		} finally {
 			theme.setSymbolPreset(applied);
@@ -308,13 +312,13 @@ export function registerSettingsCommand(
 	onChange: () => void,
 ): void {
 	pi.registerCommand("topping-statusline-settings", {
-		description: "Configure transparent segments, statusline segments, separator, symbols, border style, feeds, and rainbow border",
+		description: "Configure transparent segments, statusline segments, separator, symbols, border style, feeds, and rainbow border animation",
 		handler: async (_args, ctx: ExtensionCommandContext) => {
 			if (ctx.mode !== "tui") {
 				ctx.ui.notify("/topping-statusline-settings requires TUI mode", "error");
 				return;
 			}
-			const preview = new StatusLinePreview(state, builder, ctx.ui.theme);
+			const preview = new StatusLinePreview(builder, ctx.ui.theme);
 			const result = await showMenu<Record<string, MenuValue>>(ctx, {
 				title: "Pi Topping Statusline: Settings",
 				sections: buildSections(state.settings),

package/src/settings.ts

@@ -92,8 +92,10 @@ function loadSettings(): StatusLineSettings {
 		}
 		if (raw.feeds !== undefined) settings.feeds = sanitizeFeeds(raw.feeds);
 		if (typeof raw.rainbowBorder === "boolean") settings.rainbowBorder = raw.rainbowBorder;
+		if (typeof raw.rainbowAnimation === "boolean") settings.rainbowAnimation = raw.rainbowAnimation;
 		return settings;
 	} catch {
+		// Missing or corrupt settings.json falls back to defaults.
 		return {};
 	}
 }
@@ -152,6 +154,7 @@ export function resolveEffectiveSettings(settings: StatusLineSettings): Effectiv
 		bottomLeftSegments,
 		bottomRightSegments,
 		rainbowBorder: settings.rainbowBorder ?? true,
+		rainbowAnimation: settings.rainbowAnimation ?? true,
 		includes,
 		segmentOptions: {
 			model: { showModel: seg.model, showProvider: seg.provider, showThinking: seg.thinking },

package/src/tests/feeds.test.ts

@@ -15,7 +15,6 @@ import type { ExtensionAPI, ExtensionContext, SessionEntry } from "@earendil-wor
 import { SegmentContextBuilder } from "../context.ts";
 import { SEGMENTS } from "../segments.ts";
 import { DEFAULT_FEEDS, DEFAULT_SEGMENTS, resolveEffectiveSettings, sanitizeFeeds } from "../settings.ts";
-import { theme } from "../theme.ts";
 import type { SegmentContext, StatusLineFeed } from "../types.ts";
 
 const SAVINGS = "pi-prompt-cache/savings";
@@ -364,5 +363,4 @@ test("the default subscription matches what pi-prompt-cache publishes", () => {
 	assert.equal(DEFAULT_FEEDS[0]?.customType, SAVINGS);
 	assert.equal(DEFAULT_FEEDS[0]?.field, "savedUsd");
 	assert.equal(DEFAULT_FEEDS[0]?.format, "currency");
-	void theme;
 });

package/src/tests/rainbow.test.ts

@@ -113,9 +113,11 @@ test("a left group shifts the gap start by its width", () => {
 	assert.ok(calls[0]!.startCol > 3, "gap starts after the pi segment, not at the origin");
 });
 
-test("rainbowBorder defaults to true and is loadable", () => {
+test("rainbow settings default to true and resolve explicit false", () => {
 	assert.equal(resolveEffectiveSettings({}).rainbowBorder, true);
+	assert.equal(resolveEffectiveSettings({}).rainbowAnimation, true);
 	assert.equal(resolveEffectiveSettings({ rainbowBorder: false }).rainbowBorder, false);
+	assert.equal(resolveEffectiveSettings({ rainbowAnimation: false }).rainbowAnimation, false);
 });
 
 test("borderStyle defaults to rounded and is loadable", () => {

package/src/theme.ts

@@ -30,8 +30,6 @@ export interface StatusSymbols {
 		powerlineThinRight: string;
 		halfCircleLeft: string;
 		halfCircleRight: string;
-		block: string;
-		space: string;
 		asciiLeft: string;
 		asciiRight: string;
 		dot: string;
@@ -65,8 +63,6 @@ const UNICODE_SYMBOLS: StatusSymbols = {
 		powerlineThinRight: "<",
 		halfCircleLeft: "",
 		halfCircleRight: "",
-		block: "▌",
-		space: " ",
 		asciiLeft: ">",
 		asciiRight: "<",
 		dot: " · ",
@@ -100,8 +96,6 @@ const NERD_SYMBOLS: StatusSymbols = {
 		powerlineThinRight: "\ue0b3",
 		halfCircleLeft: "\ue0b6",
 		halfCircleRight: "\ue0b4",
-		block: "█",
-		space: " ",
 		asciiLeft: ">",
 		asciiRight: "<",
 		dot: " · ",
@@ -135,8 +129,6 @@ const ASCII_SYMBOLS: StatusSymbols = {
 		powerlineThinRight: "<",
 		halfCircleLeft: "",
 		halfCircleRight: "",
-		block: "#",
-		space: " ",
 		asciiLeft: ">",
 		asciiRight: "<",
 		dot: " - ",

package/src/types.ts

@@ -69,8 +69,10 @@ export interface StatusLineSettings {
 	borderStyle?: BorderStyle;
 	segments?: StatusLineSegmentToggles;
 	feeds?: StatusLineFeed[];
-	/** Animated rainbow border while the thinking level is max. */
+	/** Rainbow border while the thinking level is max. */
 	rainbowBorder?: boolean;
+	/** Animate the rainbow border when it is visible. */
+	rainbowAnimation?: boolean;
 }
 
 /** Resolved per-segment render options; resolveEffectiveSettings always fills them. */
@@ -102,6 +104,7 @@ export interface EffectiveStatusLineSettings {
 	bottomRightSegments: StatusLineSegmentId[];
 	segmentOptions: StatusLineSegmentOptions;
 	rainbowBorder: boolean;
+	rainbowAnimation: boolean;
 	includes: SegmentIncludes;
 }
 

package/src/utils.ts

@@ -7,13 +7,20 @@
 import { stripVTControlCharacters } from "node:util";
 import { sliceByColumn, visibleWidth } from "@earendil-works/pi-tui";
 import { parseHex } from "./theme.js";
+import { hslToRgb, rgbToHex } from "./rainbow.js";
 
 export function formatNumber(n: number): string {
 	if (n < 1_000) return n.toString();
 	if (n < 10_000) return `${(n / 1_000).toFixed(1)}K`;
-	if (n < 1_000_000) return `${Math.round(n / 1_000)}K`;
+	if (n < 1_000_000) {
+		const k = Math.round(n / 1_000);
+		return k < 1000 ? `${k}K` : `${(n / 1_000_000).toFixed(1)}M`;
+	}
 	if (n < 10_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
-	if (n < 1_000_000_000) return `${Math.round(n / 1_000_000)}M`;
+	if (n < 1_000_000_000) {
+		const m = Math.round(n / 1_000_000);
+		return m < 1000 ? `${m}M` : `${(n / 1_000_000_000).toFixed(1)}B`;
+	}
 	if (n < 10_000_000_000) return `${(n / 1_000_000_000).toFixed(1)}B`;
 	return `${Math.round(n / 1_000_000_000)}B`;
 }
@@ -122,26 +129,6 @@ function hexToHue(hex: string): number | undefined {
 	return (h + 360) % 360;
 }
 
-function hslToHex(h: number, s: number, l: number): string {
-	const c = (1 - Math.abs(2 * l - 1)) * s;
-	const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
-	const m = l - c / 2;
-	let r = 0;
-	let g = 0;
-	let b = 0;
-	if (h < 60) [r, g, b] = [c, x, 0];
-	else if (h < 120) [r, g, b] = [x, c, 0];
-	else if (h < 180) [r, g, b] = [0, c, x];
-	else if (h < 240) [r, g, b] = [0, x, c];
-	else if (h < 300) [r, g, b] = [x, 0, c];
-	else [r, g, b] = [c, 0, x];
-	const toHex = (v: number) =>
-		Math.round((v + m) * 255)
-			.toString(16)
-			.padStart(2, "0");
-	return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
-}
-
 function findSafeHue(target: number, occupied: number[], lo: number, hi: number): number {
 	if (occupied.length === 0) return target;
 	if (occupied.every(h => hueDistance(target, h) >= MIN_HUE_DISTANCE)) return target;
@@ -160,5 +147,5 @@ export function getSessionAccentHex(name: string, themeColorHexes: string[]): st
 	let targetHue = DARK_HUE_START + (nameToHue(name) % range);
 	const themeHues = themeColorHexes.map(hexToHue).filter((h): h is number => h !== undefined);
 	targetHue = findSafeHue(targetHue, themeHues, DARK_HUE_START, DARK_HUE_END);
-	return hslToHex(targetHue, ACCENT_SATURATION, ACCENT_DARK_LIGHTNESS);
+	return rgbToHex(hslToRgb(targetHue, ACCENT_SATURATION, ACCENT_DARK_LIGHTNESS));
 }