@oh-my-pi/pi-tui 18.2.4 → 18.2.5

package/src/apps/debug/raw-sse.ts

@@ -0,0 +1,282 @@
+import type { Component } from "../../tui";
+import { matchesKey } from "../../keys";
+import { routeSgrMouseInput, type SgrMouseEvent } from "../../mouse";
+import { truncateToWidth } from "../../utils";
+import { sanitizeDisplayText } from "../../overlays/extensions/display-text";
+import { theme } from "../../theme/theme";
+import { DebugViewerFrame } from "./viewer-frame";
+import {
+	formatRawSseIsoTime,
+	type RawSseDebugBuffer,
+	type RawSseDebugRecord,
+	rawSseRecordLines,
+} from "./raw-sse-buffer";
+
+const MIN_VIEWER_WIDTH = 40;
+// `data:` lines below this width render fine on a single row; anything wider gets pretty-printed
+// across multiple `data:` lines so streamed JSON blobs stop getting clipped by `truncateToWidth`.
+const PRETTY_PRINT_DATA_THRESHOLD = 100;
+
+// Walks the SSE wire lines and replaces single-line `data: <json>` payloads with
+// multi-line `data: <indented-json>` entries when the JSON is wide enough to clip.
+// Multi-line `data:` is still valid SSE (the spec joins lines with `\n`), so the
+// transformed view round-trips back to the same event when copied.
+/** @internal Exported for tests. */
+export function expandPrettyDataLines(raw: readonly string[]): string[] {
+	const out: string[] = [];
+	for (const line of raw) {
+		if (!line.startsWith("data: ") || line.length <= PRETTY_PRINT_DATA_THRESHOLD) {
+			out.push(line);
+			continue;
+		}
+		const body = line.slice("data: ".length);
+		const trimmed = body.trim();
+		if (trimmed.length === 0 || (trimmed[0] !== "{" && trimmed[0] !== "[")) {
+			out.push(line);
+			continue;
+		}
+		let parsed: unknown;
+		try {
+			parsed = JSON.parse(trimmed);
+		} catch {
+			out.push(line);
+			continue;
+		}
+		const pretty = JSON.stringify(parsed, null, 2);
+		for (const prettyLine of pretty.split("\n")) {
+			out.push(`data: ${prettyLine}`);
+		}
+	}
+	return out;
+}
+
+/** Host clipboard capability for the raw event viewer. */
+export interface RawSseViewerDeps {
+	copyToClipboard(text: string): void;
+}
+
+/** Raw event viewer content, callbacks, and host capabilities. */
+export interface RawSseViewerOptions {
+	deps: RawSseViewerDeps;
+	buffer: RawSseDebugBuffer;
+	terminalRows: number;
+	onExit: () => void;
+	onStatus?: (message: string) => void;
+	onUpdate?: () => void;
+}
+
+/** Scrollable live view of captured provider events. */
+export class RawSseViewerComponent implements Component {
+	readonly #deps: RawSseViewerDeps;
+	readonly #buffer: RawSseDebugBuffer;
+	readonly #terminalRows: number;
+	readonly #onExit: () => void;
+	readonly #onStatus?: (message: string) => void;
+	readonly #onUpdate?: () => void;
+	readonly #unsubscribe: () => void;
+	readonly #frame: DebugViewerFrame;
+	#statusMessage: string | undefined;
+	#disposed = false;
+	// Pretty-printed wire lines keyed by `record.sequence`. Pretty-printing is
+	// the JSON.parse + JSON.stringify per `data:` line, so we cache the result —
+	// the render path runs on every keypress and scroll update.
+	// Sequences are monotonic; we prune entries below the oldest live record
+	// after each render so the cache tracks the buffer's eviction window.
+	readonly #prettyLinesCache = new Map<number, string[]>();
+
+	constructor(options: RawSseViewerOptions) {
+		this.#deps = options.deps;
+		this.#buffer = options.buffer;
+		this.#terminalRows = options.terminalRows;
+		this.#onExit = options.onExit;
+		this.#onStatus = options.onStatus;
+		this.#onUpdate = options.onUpdate;
+		this.#unsubscribe = this.#buffer.subscribe(() => {
+			this.#onUpdate?.();
+		});
+		this.#frame = new DebugViewerFrame({
+			title: "Raw Provider Stream",
+			getHeight: () => process.stdout.rows || this.#terminalRows || 24,
+			headerRows: 1,
+			footerRows: 1,
+			minimumBodyRows: 3,
+			followTail: true,
+			frame: context => ({
+				header: [this.#summaryText()],
+				body: { lines: this.#renderRawLines(context.contentWidth) },
+				footer: [this.#statusText()],
+			}),
+		});
+	}
+
+	dispose(): void {
+		if (this.#disposed) return;
+		this.#disposed = true;
+		this.#unsubscribe();
+		this.#frame.dispose();
+	}
+
+	handleInput(keyData: string): void {
+		if (routeSgrMouseInput(keyData, event => this.#handleMouse(event))) {
+			return;
+		}
+
+		if (matchesKey(keyData, "escape") || matchesKey(keyData, "esc")) {
+			this.dispose();
+			this.#onExit();
+			return;
+		}
+
+		if (matchesKey(keyData, "ctrl+c")) {
+			this.#copyAll();
+			return;
+		}
+
+		if (matchesKey(keyData, "up")) {
+			this.#frame.scroll(-1);
+			this.#onUpdate?.();
+			return;
+		}
+
+		if (matchesKey(keyData, "down")) {
+			this.#frame.scroll(1);
+			this.#onUpdate?.();
+			return;
+		}
+
+		if (matchesKey(keyData, "pageUp")) {
+			this.#frame.scroll(-this.#frame.getBodyHeight());
+			this.#onUpdate?.();
+			return;
+		}
+
+		if (matchesKey(keyData, "pageDown")) {
+			this.#frame.scroll(this.#frame.getBodyHeight());
+			this.#onUpdate?.();
+			return;
+		}
+
+		if (matchesKey(keyData, "end")) {
+			this.#frame.setFollowTail(true);
+			this.#onUpdate?.();
+		}
+	}
+
+	#handleMouse(event: SgrMouseEvent): boolean {
+		if (event.wheel !== null && this.#frame.isBodyFrameRow(event.row)) {
+			this.#frame.scroll(event.wheel * 3);
+			this.#onUpdate?.();
+			return true;
+		}
+
+		if (!event.leftClick) return false;
+		if (this.#frame.toHeaderRow(event.row) === 0) {
+			this.#frame.setFollowTail(!this.#frame.isFollowingTail());
+			this.#onUpdate?.();
+			return true;
+		}
+		const logicalRow = this.#frame.toBodyRow(event.row);
+		if (logicalRow !== undefined) {
+			this.#frame.setScrollOffset(logicalRow);
+			this.#onUpdate?.();
+			return true;
+		}
+		return false;
+	}
+
+	invalidate(): void {
+		this.#frame.invalidate();
+	}
+
+	render(width: number): readonly string[] {
+		return this.#frame.render(Math.max(MIN_VIEWER_WIDTH, width));
+	}
+
+	#renderRawLines(innerWidth: number): string[] {
+		const snapshot = this.#buffer.snapshot();
+		if (snapshot.records.length === 0) {
+			return [
+				theme.fg("muted", "No raw SSE frames captured yet."),
+				theme.fg("muted", "HTTP SSE providers populate this view while a model response is streaming."),
+			];
+		}
+
+		const lines: string[] = [];
+		if (snapshot.droppedRecords > 0) {
+			lines.push(
+				theme.fg(
+					"warning",
+					`: omp-debug-dropped records=${snapshot.droppedRecords} chars=${snapshot.droppedChars}`,
+				),
+			);
+			lines.push("");
+		}
+		const firstSequence = snapshot.records[0]?.sequence;
+		for (const record of snapshot.records) {
+			for (const line of this.#prettyLinesFor(record)) {
+				lines.push(truncateToWidth(sanitizeDisplayText(line), innerWidth));
+			}
+			if (record.kind === "event" && record.truncated) {
+				lines.push(theme.fg("warning", `: omp-debug-event-truncated originalChars=${record.originalChars}`));
+			}
+			lines.push("");
+		}
+		if (firstSequence !== undefined) this.#pruneCache(firstSequence);
+		return lines;
+	}
+
+	#prettyLinesFor(record: RawSseDebugRecord): string[] {
+		const cached = this.#prettyLinesCache.get(record.sequence);
+		if (cached) return cached;
+		const expanded = expandPrettyDataLines(rawSseRecordLines(record));
+		this.#prettyLinesCache.set(record.sequence, expanded);
+		return expanded;
+	}
+
+	#pruneCache(firstSequence: number): void {
+		// Bounded by the buffer eviction rate; with `MAX_RAW_SSE_EVENTS = 1000`
+		// this rarely runs and only walks freshly-evicted entries.
+		for (const key of this.#prettyLinesCache.keys()) {
+			if (key < firstSequence) this.#prettyLinesCache.delete(key);
+		}
+	}
+	#summaryText(): string {
+		const snapshot = this.#buffer.snapshot();
+		const last = snapshot.lastUpdatedAt
+			? `${theme.fg("muted", "last")} ${theme.fg("accent", formatRawSseIsoTime(snapshot.lastUpdatedAt))}`
+			: theme.fg("muted", "waiting for first frame");
+		const follow = this.#frame.isFollowingTail()
+			? theme.fg("success", "follow on")
+			: theme.fg("warning", "follow off");
+		return `${theme.fg("muted", "events")} ${theme.fg("accent", String(snapshot.totalEvents))}  ${theme.fg("muted", "records")} ${theme.fg("accent", String(snapshot.records.length))}  ${last}  ${follow}`;
+	}
+
+	#statusText(): string {
+		const help = "Esc close · Ctrl+C copy raw · End follow tail · wheel scroll · click summary toggles follow";
+		return this.#statusMessage
+			? `${theme.fg("success", this.#statusMessage)}  ${theme.fg("dim", help)}`
+			: theme.fg("dim", help);
+	}
+
+	#copyAll(): void {
+		const payload = this.#buffer.toRawText();
+		if (payload.trim().length === 0) {
+			const message = "No raw SSE frames to copy";
+			this.#statusMessage = message;
+			this.#onStatus?.(message);
+			this.#onUpdate?.();
+			return;
+		}
+
+		try {
+			this.#deps.copyToClipboard(payload);
+			const message = "Copied raw SSE stream";
+			this.#statusMessage = message;
+			this.#onStatus?.(message);
+		} catch (error) {
+			const message = error instanceof Error ? error.message : String(error);
+			this.#statusMessage = `Copy failed: ${message}`;
+		}
+		this.#onUpdate?.();
+	}
+}

package/src/apps/debug/terminal-info.ts

@@ -0,0 +1,115 @@
+/**
+ * Terminal state collection for the debug menu.
+ *
+ * Surfaces the detected terminal, the established subprotocols the renderer
+ * negotiated (graphics, desktop notifications, hyperlinks, true color), the
+ * scrollback/erase strategy, and the live geometry — the details that decide
+ * which escape sequences the renderer emits.
+ */
+import {
+	getCellDimensions,
+	ImageProtocol,
+	isOsc99Supported,
+	NotifyProtocol,
+	TERMINAL,
+	TERMINAL_ID,
+} from "../../terminal-capabilities";
+import { classifyTerminalMultiplexer } from "../../terminal-multiplexer";
+
+/** Live values the debug view reads off the running TUI, not the static capability table. */
+export interface TerminalRuntimeState {
+	columns: number;
+	rows: number;
+	/** Whether DEC 2026 synchronized-output wrappers are currently emitted. */
+	synchronizedOutput: boolean;
+}
+
+/** Terminal capabilities, geometry, and detection environment. */
+export interface TerminalStateInfo {
+	detectedId: string;
+	columns: number;
+	rows: number;
+	cellWidthPx: number;
+	cellHeightPx: number;
+	trueColor: boolean;
+	imageProtocol: string;
+	notifyProtocol: string;
+	osc99Confirmed: boolean;
+	hyperlinks: boolean;
+	deccara: boolean;
+	screenToScrollback: boolean;
+	synchronizedOutput: boolean;
+	multiplexer: string | null;
+	env: { TERM?: string; TERM_PROGRAM?: string; TERM_PROGRAM_VERSION?: string; COLORTERM?: string };
+}
+
+const IMAGE_PROTOCOL_NAMES: Record<ImageProtocol, string> = {
+	[ImageProtocol.Kitty]: "Kitty graphics",
+	[ImageProtocol.Iterm2]: "iTerm2 inline images",
+	[ImageProtocol.Sixel]: "Sixel",
+};
+
+const NOTIFY_PROTOCOL_NAMES: Record<NotifyProtocol, string> = {
+	[NotifyProtocol.Bell]: "BEL (\\a)",
+	[NotifyProtocol.Osc99]: "OSC 99 (kitty desktop notifications)",
+	[NotifyProtocol.Osc9]: "OSC 9 (iTerm2/WezTerm)",
+};
+
+/** Snapshot the active terminal capabilities and the live runtime geometry. */
+export function collectTerminalState(runtime: TerminalRuntimeState): TerminalStateInfo {
+	const env = Bun.env;
+	const cell = getCellDimensions();
+	return {
+		detectedId: TERMINAL_ID,
+		columns: runtime.columns,
+		rows: runtime.rows,
+		cellWidthPx: cell.widthPx,
+		cellHeightPx: cell.heightPx,
+		trueColor: TERMINAL.trueColor,
+		imageProtocol: TERMINAL.imageProtocol === null ? "none" : IMAGE_PROTOCOL_NAMES[TERMINAL.imageProtocol],
+		notifyProtocol: NOTIFY_PROTOCOL_NAMES[TERMINAL.notifyProtocol],
+		osc99Confirmed: isOsc99Supported(),
+		hyperlinks: TERMINAL.hyperlinks,
+		deccara: TERMINAL.deccara,
+		screenToScrollback: TERMINAL.supportsScreenToScrollback,
+		synchronizedOutput: runtime.synchronizedOutput,
+		multiplexer: classifyTerminalMultiplexer(env),
+		env: {
+			TERM: env.TERM,
+			TERM_PROGRAM: env.TERM_PROGRAM,
+			TERM_PROGRAM_VERSION: env.TERM_PROGRAM_VERSION,
+			COLORTERM: env.COLORTERM,
+		},
+	};
+}
+
+const yesNo = (value: boolean): string => (value ? "yes" : "no");
+
+/** Format terminal state for display in the debug menu. */
+export function formatTerminalState(info: TerminalStateInfo): string {
+	const lines = [
+		"Terminal State",
+		"━━━━━━━━━━━━━━",
+		`Detected:     ${info.detectedId}`,
+		`Geometry:     ${info.columns}x${info.rows} cells · cell ${info.cellWidthPx}x${info.cellHeightPx}px`,
+		info.multiplexer ? `Multiplexer:  ${info.multiplexer}` : "Multiplexer:  none",
+		"",
+		"Subprotocols",
+		`  Graphics:     ${info.imageProtocol}`,
+		`  Notify:       ${info.notifyProtocol}${info.osc99Confirmed ? " · confirmed via DA" : ""}`,
+		`  Hyperlinks:   ${yesNo(info.hyperlinks)} (OSC 8)`,
+		`  True color:   ${yesNo(info.trueColor)} (24-bit SGR)`,
+		`  DECCARA:      ${yesNo(info.deccara)} (rectangular-SGR background fills)`,
+		`  Sync output:  ${yesNo(info.synchronizedOutput)} (DEC 2026)`,
+		"",
+		"Scrollback",
+		`  Screen->history clear: ${info.screenToScrollback ? "CSI 22 J" : "CSI 2 J (redraw)"}`,
+		"",
+		"Detection signals",
+		`  TERM:                 ${info.env.TERM ?? "(unset)"}`,
+		`  TERM_PROGRAM:         ${info.env.TERM_PROGRAM ?? "(unset)"}`,
+		`  TERM_PROGRAM_VERSION: ${info.env.TERM_PROGRAM_VERSION ?? "(unset)"}`,
+		`  COLORTERM:            ${info.env.COLORTERM ?? "(unset)"}`,
+	];
+	return lines.join("\n");
+}

package/src/apps/debug/viewer-frame.ts

@@ -0,0 +1,174 @@
+import type { Component } from "../../tui";
+import { OverlayPanel, PanelDivider, PanelRows } from "../../chrome/overlay-box";
+import { type ScrollRangeAnchor, ScrollView } from "../../components/scroll-view";
+import { theme } from "../../theme/theme";
+
+const EMPTY_LINES: readonly string[] = [];
+const EMPTY_COMPONENTS: readonly Component[] = [];
+
+/** One complete debug-viewer frame. */
+export interface DebugViewerFrameContent {
+	readonly header: readonly string[];
+	readonly body: {
+		readonly lines: readonly string[];
+		readonly anchor?: ScrollRangeAnchor;
+	};
+	readonly footer: readonly string[];
+}
+
+/** Dimensions supplied while a debug viewer prepares its domain rows. */
+export interface DebugViewerFrameContext {
+	/** Panel content width with one column reserved for an overflowing viewport's scrollbar. */
+	readonly contentWidth: number;
+	readonly bodyHeight: number;
+}
+
+export interface DebugViewerFrameOptions {
+	readonly title: string;
+	readonly getHeight: () => number;
+	readonly headerRows: number;
+	readonly footerRows: number;
+	readonly frame: (context: DebugViewerFrameContext) => DebugViewerFrameContent;
+	readonly minimumBodyRows?: number;
+	readonly followTail?: boolean;
+}
+
+/**
+ * Debug-local adapter for the fullscreen viewers' common rounded panel and viewport.
+ * Domain controllers retain filtering, selection, formatting, copy, and live data;
+ * this component owns chrome sizing, persistent scroll state, selection reveal, and
+ * frame-row to logical-body translation.
+ */
+export class DebugViewerFrame implements Component {
+	readonly #options: DebugViewerFrameOptions;
+	readonly #header = new PanelRows();
+	readonly #viewport: ScrollView;
+	readonly #footer = new PanelRows();
+	readonly #panel: OverlayPanel;
+	readonly #headerRows: number;
+	readonly #footerRows: number;
+	readonly #minimumBodyRows: number;
+	readonly #supportsFollowTail: boolean;
+	#followTail: boolean;
+	#bodyLines: readonly string[] = EMPTY_LINES;
+	#renderedBodyHeight = 0;
+	#disposed = false;
+
+	constructor(options: DebugViewerFrameOptions) {
+		this.#options = options;
+		this.#headerRows = Math.max(0, Math.trunc(options.headerRows));
+		this.#footerRows = Math.max(0, Math.trunc(options.footerRows));
+		this.#minimumBodyRows = Math.max(0, Math.trunc(options.minimumBodyRows ?? 3));
+		this.#supportsFollowTail = options.followTail ?? false;
+		this.#followTail = this.#supportsFollowTail;
+		this.#header.setHeight(this.#headerRows);
+		this.#footer.setHeight(this.#footerRows);
+		this.#viewport = new ScrollView([], {
+			height: this.getBodyHeight(),
+			scrollbar: "auto",
+			followTail: this.#followTail,
+			theme: { track: text => theme.fg("muted", text), thumb: text => theme.fg("accent", text) },
+		});
+		this.#panel = new OverlayPanel(options.title);
+		this.#panel.addChild(this.#header);
+		this.#panel.addChild(new PanelDivider());
+		this.#panel.addChild(this.#viewport);
+		this.#panel.addChild(new PanelDivider());
+		this.#panel.addChild(this.#footer);
+	}
+
+	get debugChildren(): readonly Component[] {
+		return this.#disposed ? EMPTY_COMPONENTS : [this.#panel];
+	}
+
+	getBodyHeight(): number {
+		const heightValue = this.#options.getHeight();
+		const height = Number.isFinite(heightValue) ? Math.max(0, Math.trunc(heightValue)) : 0;
+		return Math.max(this.#minimumBodyRows, height - this.#headerRows - this.#footerRows - 4);
+	}
+
+	isFollowingTail(): boolean {
+		return !this.#disposed && this.#followTail;
+	}
+
+	setFollowTail(follow: boolean): void {
+		if (this.#disposed || !this.#supportsFollowTail) return;
+		this.#followTail = follow;
+		this.#viewport.setFollowTail(follow);
+		if (follow) this.#viewport.scrollToBottom();
+	}
+
+	/** Manual viewport movement suspends append-follow, including at the current tail. */
+	scroll(delta: number): void {
+		if (this.#disposed) return;
+		this.setFollowTail(false);
+		this.#viewport.scroll(delta);
+	}
+
+	setScrollOffset(offset: number): void {
+		if (this.#disposed) return;
+		this.setFollowTail(false);
+		this.#viewport.setScrollOffset(offset);
+	}
+
+	/** Whether a 0-based rendered frame row lies inside the last rendered body region. */
+	isBodyFrameRow(frameRow: number): boolean {
+		const localRow = Math.trunc(frameRow) - (this.#headerRows + 2);
+		return localRow >= 0 && localRow < this.#renderedBodyHeight;
+	}
+
+	/** Map a 0-based rendered frame row into the complete logical body buffer. */
+	toBodyRow(frameRow: number): number | undefined {
+		if (!this.isBodyFrameRow(frameRow)) return undefined;
+		return this.#viewport.logicalRowAt(Math.trunc(frameRow) - (this.#headerRows + 2));
+	}
+
+	/** Map a 0-based rendered frame row into the fixed header region. */
+	toHeaderRow(frameRow: number): number | undefined {
+		if (this.#disposed) return undefined;
+		const localRow = Math.trunc(frameRow) - 1;
+		return localRow >= 0 && localRow < this.#headerRows ? localRow : undefined;
+	}
+
+	invalidate(): void {
+		if (this.#disposed) return;
+		this.#panel.invalidate();
+	}
+
+	dispose(): void {
+		if (this.#disposed) return;
+		this.#disposed = true;
+		this.#bodyLines = EMPTY_LINES;
+		this.#renderedBodyHeight = 0;
+		this.#panel.dispose();
+	}
+
+	render(width: number): readonly string[] {
+		if (this.#disposed) return EMPTY_LINES;
+		const frameWidth = Number.isFinite(width) ? Math.max(0, Math.trunc(width)) : 0;
+		const bodyHeight = this.getBodyHeight();
+		const context: DebugViewerFrameContext = {
+			contentWidth: Math.max(1, frameWidth - 5),
+			bodyHeight,
+		};
+		const frame = this.#options.frame(context);
+		this.#header.setLines(frame.header);
+		this.#footer.setLines(frame.footer);
+		this.#viewport.setHeight(bodyHeight);
+		this.#setBodyLines(frame.body.lines);
+		this.#renderedBodyHeight = bodyHeight;
+		const anchor: ScrollRangeAnchor | undefined = frame.body.anchor
+			? { ...frame.body.anchor, oversized: "start" }
+			: undefined;
+		if (this.#viewport.revealRange(anchor, context.contentWidth)) this.setFollowTail(false);
+		return this.#panel.render(frameWidth);
+	}
+
+	#setBodyLines(lines: readonly string[]): void {
+		if (lines.length === this.#bodyLines.length && lines.every((line, index) => line === this.#bodyLines[index])) {
+			return;
+		}
+		this.#bodyLines = lines.slice();
+		this.#viewport.setLines(this.#bodyLines);
+	}
+}

package/src/apps/git/avatar.ts

@@ -0,0 +1,52 @@
+/** Cached author photos supplied by the command host. */
+export interface AvatarSource {
+	get(email: string, cwd: string): string | null | undefined;
+}
+
+/**
+ * Deterministic 5x5 mirrored identicon rendered as half-block rows (3 lines,
+ * 10 columns). Used while an avatar loads and when none exists.
+ */
+export function identiconLines(email: string, colorize: (hex: string, text: string) => string): string[] {
+	const bytes = new Bun.CryptoHasher("md5").update(email.trim().toLowerCase()).digest();
+	const hue = ((bytes[0] << 8) | bytes[1]) % 360;
+	const hex = hslToHex(hue, 0.55, 0.58);
+	const on = (x: number, y: number): boolean => {
+		const column = x < 3 ? x : 4 - x;
+		return bytes[3 + column * 5 + y] % 2 === 0;
+	};
+	const lines: string[] = [];
+	for (let row = 0; row < 3; row++) {
+		let line = "";
+		for (let x = 0; x < 5; x++) {
+			const top = on(x, row * 2);
+			const bottom = row * 2 + 1 < 5 && on(x, row * 2 + 1);
+			const cell = top && bottom ? "█" : top ? "▀" : bottom ? "▄" : " ";
+			line += cell.repeat(2);
+		}
+		lines.push(colorize(hex, line));
+	}
+	return lines;
+}
+
+function hslToHex(hue: number, saturation: number, lightness: number): string {
+	const chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
+	const second = chroma * (1 - Math.abs(((hue / 60) % 2) - 1));
+	const base = lightness - chroma / 2;
+	const sector = Math.floor(hue / 60) % 6;
+	const rgb = [
+		[chroma, second, 0],
+		[second, chroma, 0],
+		[0, chroma, second],
+		[0, second, chroma],
+		[second, 0, chroma],
+		[chroma, 0, second],
+	][sector];
+	return `#${rgb
+		.map(channel =>
+			Math.round((channel + base) * 255)
+				.toString(16)
+				.padStart(2, "0"),
+		)
+		.join("")}`;
+}