@f5-sales-demo/xcsh 19.51.2

package/src/modes/components/status-line/types.ts

@@ -0,0 +1,96 @@
+import type { StatusLinePreset, StatusLineSegmentId, StatusLineSeparatorStyle } from "../../../config/settings-schema";
+import type { AgentSession } from "../../../session/agent-session";
+import type { StatusLineSegmentOptions, StatusLineSettings } from "../status-line";
+
+export type {
+	StatusLinePreset,
+	StatusLineSegmentId,
+	StatusLineSegmentOptions,
+	StatusLineSeparatorStyle,
+	StatusLineSettings,
+};
+
+// ═══════════════════════════════════════════════════════════════════════════
+// Segment Rendering
+// ═══════════════════════════════════════════════════════════════════════════
+
+export type RGB = readonly [number, number, number];
+
+export interface SegmentContext {
+	session: AgentSession;
+	width: number;
+	cwd: string;
+	options: StatusLineSegmentOptions;
+	planMode: {
+		enabled: boolean;
+		paused: boolean;
+	} | null;
+	// Cached values for performance (computed once per render)
+	usageStats: {
+		input: number;
+		output: number;
+		cacheRead: number;
+		cacheWrite: number;
+		premiumRequests: number;
+		cost: number;
+		tokensPerSecond: number | null;
+	};
+	contextPercent: number;
+	contextWindow: number;
+	autoCompactEnabled: boolean;
+	subagentCount: number;
+	sessionStartTime: number;
+	git: {
+		branch: string | null;
+		status: {
+			staged: number;
+			unstaged: number;
+			untracked: number;
+			conflicted: number;
+			ahead: number;
+			behind: number;
+			stashes: number;
+			action: string;
+		} | null;
+		pr: { number: number; url: string } | null;
+	};
+}
+
+export interface RenderedSegment {
+	content: string; // The segment text (may include ANSI color codes)
+	visible: boolean; // Whether to render (e.g., git hidden when not in repo)
+	bg?: string; // Optional per-segment background color (ANSI 256/true-color value)
+	fg?: string; // Optional per-segment foreground override
+}
+
+export interface StatusLineSegment {
+	id: StatusLineSegmentId;
+	render(ctx: SegmentContext): RenderedSegment;
+	truncate?(maxWidth: number, ctx: SegmentContext): RenderedSegment | null;
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// Separator Definition
+// ═══════════════════════════════════════════════════════════════════════════
+
+export interface SeparatorDef {
+	left: string; // Character for left→right segments
+	right: string; // Character for right→left segments (reversed)
+	endCaps?: {
+		left: string; // Cap for right segments (points left)
+		right: string; // Cap for left segments (points right)
+		useBgAsFg: boolean;
+	};
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// Preset Definition
+// ═══════════════════════════════════════════════════════════════════════════
+
+export interface PresetDef {
+	leftSegments: StatusLineSegmentId[];
+	rightSegments: StatusLineSegmentId[];
+	separator: StatusLineSeparatorStyle;
+	segmentOptions?: StatusLineSegmentOptions;
+	dropOrder?: StatusLineSegmentId[];
+}

package/src/modes/components/status-line-segment-editor.ts

@@ -0,0 +1,361 @@
+/**
+ * Status Line Segment Editor
+ *
+ * Interactive component for configuring status line segments.
+ * - Three-column layout: Left | Right | Disabled
+ * - Space: Toggle segment visibility (disabled ↔ left)
+ * - Tab: Cycle segment between columns (left → right → disabled → left)
+ * - Shift+J/K: Reorder segment within column
+ * - Live preview shown in the actual status line above
+ */
+import { Container, matchesKey, padding } from "@f5xc-salesdemos/pi-tui";
+import type { StatusLineSegmentId } from "../../config/settings-schema";
+import { theme } from "../../modes/theme/theme";
+import { matchesAppInterrupt } from "../../modes/utils/keybinding-matchers";
+import { ALL_SEGMENT_IDS } from "./status-line/segments";
+
+// Segment display names and short descriptions
+const SEGMENT_INFO: Record<StatusLineSegmentId, { label: string; short: string }> = {
+	os_icon: { label: "OS Icon", short: "platform icon" },
+	pi: { label: "Pi", short: "π icon" },
+	model: { label: "Model", short: "model name" },
+	plan_mode: { label: "Plan Mode", short: "plan status" },
+	path: { label: "Path", short: "working dir" },
+	git: { label: "Git", short: "branch/status" },
+	pr: { label: "PR", short: "pull request" },
+	subagents: { label: "Agents", short: "subagent count" },
+	token_in: { label: "Tokens In", short: "input tokens" },
+	token_out: { label: "Tokens Out", short: "output tokens" },
+	token_total: { label: "Tokens", short: "total tokens" },
+	token_rate: { label: "Tokens/s", short: "output throughput" },
+	cost: { label: "Cost", short: "session cost" },
+	context_pct: { label: "Context %", short: "context usage" },
+	context_total: { label: "Context", short: "context window" },
+	time_spent: { label: "Elapsed", short: "session time" },
+	time: { label: "Clock", short: "current time" },
+	session: { label: "Session", short: "session ID" },
+	hostname: { label: "Host", short: "hostname" },
+	cache_read: { label: "Cache ↓", short: "cache read" },
+	cache_write: { label: "Cache ↑", short: "cache write" },
+	session_name: { label: "Session Name", short: "session name" },
+	context_xcsh: { label: "F5 XC Context", short: "F5 XC tenant" },
+};
+
+type Column = "left" | "right" | "disabled";
+
+interface SegmentState {
+	id: StatusLineSegmentId;
+	column: Column;
+	order: number;
+}
+
+export interface SegmentEditorCallbacks {
+	onSave: (leftSegments: StatusLineSegmentId[], rightSegments: StatusLineSegmentId[]) => void;
+	onCancel: () => void;
+	onPreview?: (leftSegments: StatusLineSegmentId[], rightSegments: StatusLineSegmentId[]) => void;
+}
+
+export class StatusLineSegmentEditorComponent extends Container {
+	#segments: SegmentState[];
+	#selectedIndex: number = 0;
+	#focusColumn: "left" | "right" | "disabled" = "left";
+
+	constructor(
+		currentLeft: StatusLineSegmentId[],
+		currentRight: StatusLineSegmentId[],
+		private readonly callbacks: SegmentEditorCallbacks,
+	) {
+		super();
+
+		// Initialize segment states
+		this.#segments = [];
+		const usedIds = new Set<StatusLineSegmentId>();
+
+		// Add left segments in order
+		for (let i = 0; i < currentLeft.length; i++) {
+			const id = currentLeft[i];
+			this.#segments.push({ id, column: "left", order: i });
+			usedIds.add(id);
+		}
+
+		// Add right segments in order
+		for (let i = 0; i < currentRight.length; i++) {
+			const id = currentRight[i];
+			this.#segments.push({ id, column: "right", order: i });
+			usedIds.add(id);
+		}
+
+		// Add remaining segments as disabled
+		for (const id of ALL_SEGMENT_IDS) {
+			if (!usedIds.has(id)) {
+				this.#segments.push({ id, column: "disabled", order: 999 });
+			}
+		}
+
+		// Trigger initial preview
+		this.#triggerPreview();
+	}
+
+	#getSegmentsForColumn(column: Column): SegmentState[] {
+		return this.#segments.filter(s => s.column === column).sort((a, b) => a.order - b.order);
+	}
+
+	#getCurrentColumnSegments(): SegmentState[] {
+		return this.#getSegmentsForColumn(this.#focusColumn);
+	}
+
+	#triggerPreview(): void {
+		const left = this.#getSegmentsForColumn("left").map(s => s.id);
+		const right = this.#getSegmentsForColumn("right").map(s => s.id);
+		this.callbacks.onPreview?.(left, right);
+	}
+
+	handleInput(data: string): void {
+		const columnSegments = this.#getCurrentColumnSegments();
+
+		if (matchesKey(data, "up") || data === "k") {
+			// Move selection up within column, or jump to previous column
+			if (this.#selectedIndex > 0) {
+				this.#selectedIndex--;
+			} else {
+				// Jump to previous column
+				if (this.#focusColumn === "disabled") {
+					const rightSegs = this.#getSegmentsForColumn("right");
+					if (rightSegs.length > 0) {
+						this.#focusColumn = "right";
+						this.#selectedIndex = rightSegs.length - 1;
+					} else {
+						const leftSegs = this.#getSegmentsForColumn("left");
+						if (leftSegs.length > 0) {
+							this.#focusColumn = "left";
+							this.#selectedIndex = leftSegs.length - 1;
+						}
+					}
+				} else if (this.#focusColumn === "right") {
+					const leftSegs = this.#getSegmentsForColumn("left");
+					if (leftSegs.length > 0) {
+						this.#focusColumn = "left";
+						this.#selectedIndex = leftSegs.length - 1;
+					}
+				}
+			}
+		} else if (matchesKey(data, "down") || data === "j") {
+			// Move selection down within column, or jump to next column
+			if (this.#selectedIndex < columnSegments.length - 1) {
+				this.#selectedIndex++;
+			} else {
+				// Jump to next column
+				if (this.#focusColumn === "left") {
+					const rightSegs = this.#getSegmentsForColumn("right");
+					if (rightSegs.length > 0) {
+						this.#focusColumn = "right";
+						this.#selectedIndex = 0;
+					} else {
+						const disabledSegs = this.#getSegmentsForColumn("disabled");
+						if (disabledSegs.length > 0) {
+							this.#focusColumn = "disabled";
+							this.#selectedIndex = 0;
+						}
+					}
+				} else if (this.#focusColumn === "right") {
+					const disabledSegs = this.#getSegmentsForColumn("disabled");
+					if (disabledSegs.length > 0) {
+						this.#focusColumn = "disabled";
+						this.#selectedIndex = 0;
+					}
+				}
+			}
+		} else if (matchesKey(data, "tab")) {
+			// Cycle segment: left → right → disabled → left
+			const seg = columnSegments[this.#selectedIndex];
+			if (seg) {
+				const oldColumn = seg.column;
+				if (seg.column === "left") {
+					seg.column = "right";
+					seg.order = this.#getSegmentsForColumn("right").length;
+				} else if (seg.column === "right") {
+					seg.column = "disabled";
+					seg.order = 999;
+				} else {
+					seg.column = "left";
+					seg.order = this.#getSegmentsForColumn("left").length;
+				}
+				// Recompact orders in old column
+				this.#recompactColumn(oldColumn);
+				this.#triggerPreview();
+			}
+		} else if (matchesKey(data, "shift+tab")) {
+			// Reverse cycle: left ← right ← disabled ← left
+			const seg = columnSegments[this.#selectedIndex];
+			if (seg) {
+				const oldColumn = seg.column;
+				if (seg.column === "left") {
+					seg.column = "disabled";
+					seg.order = 999;
+				} else if (seg.column === "right") {
+					seg.column = "left";
+					seg.order = this.#getSegmentsForColumn("left").length;
+				} else {
+					seg.column = "right";
+					seg.order = this.#getSegmentsForColumn("right").length;
+				}
+				this.#recompactColumn(oldColumn);
+				this.#triggerPreview();
+			}
+		} else if (data === " ") {
+			// Quick toggle: disabled ↔ left
+			const seg = columnSegments[this.#selectedIndex];
+			if (seg) {
+				const oldColumn = seg.column;
+				if (seg.column === "disabled") {
+					seg.column = "left";
+					seg.order = this.#getSegmentsForColumn("left").length;
+				} else {
+					seg.column = "disabled";
+					seg.order = 999;
+				}
+				this.#recompactColumn(oldColumn);
+				this.#triggerPreview();
+			}
+		} else if (data === "K") {
+			// Move segment up in order (Shift+K)
+			const seg = columnSegments[this.#selectedIndex];
+			if (seg && seg.column !== "disabled" && this.#selectedIndex > 0) {
+				const prevSeg = columnSegments[this.#selectedIndex - 1];
+				const tempOrder = seg.order;
+				seg.order = prevSeg.order;
+				prevSeg.order = tempOrder;
+				this.#selectedIndex--;
+				this.#triggerPreview();
+			}
+		} else if (data === "J") {
+			// Move segment down in order (Shift+J)
+			const seg = columnSegments[this.#selectedIndex];
+			if (seg && seg.column !== "disabled" && this.#selectedIndex < columnSegments.length - 1) {
+				const nextSeg = columnSegments[this.#selectedIndex + 1];
+				const tempOrder = seg.order;
+				seg.order = nextSeg.order;
+				nextSeg.order = tempOrder;
+				this.#selectedIndex++;
+				this.#triggerPreview();
+			}
+		} else if (matchesKey(data, "enter") || matchesKey(data, "return") || data === "\n") {
+			const left = this.#getSegmentsForColumn("left").map(s => s.id);
+			const right = this.#getSegmentsForColumn("right").map(s => s.id);
+			this.callbacks.onSave(left, right);
+		} else if (matchesAppInterrupt(data)) {
+			this.callbacks.onCancel();
+		}
+	}
+
+	#recompactColumn(column: Column): void {
+		if (column === "disabled") return;
+		const segs = this.#getSegmentsForColumn(column);
+		for (let i = 0; i < segs.length; i++) {
+			segs[i].order = i;
+		}
+	}
+
+	render(width: number): string[] {
+		const lines: string[] = [];
+
+		// Title with live preview indicator
+		lines.push(theme.bold(theme.fg("contentAccent", "Configure Status Line Segments")));
+		lines.push(theme.fg("dim", "Live preview shown in status line above"));
+		lines.push("");
+
+		// Key bindings
+		lines.push(
+			theme.fg("muted", "Space") +
+				" toggle  " +
+				theme.fg("muted", "Tab/S-Tab") +
+				" cycle column  " +
+				theme.fg("muted", "J/K") +
+				" reorder  " +
+				theme.fg("muted", "Enter") +
+				" save  " +
+				theme.fg("muted", "Esc") +
+				" cancel",
+		);
+		lines.push("");
+
+		// Get segments for each column
+		const leftSegs = this.#getSegmentsForColumn("left");
+		const rightSegs = this.#getSegmentsForColumn("right");
+		const disabledSegs = this.#getSegmentsForColumn("disabled");
+
+		// Calculate column widths
+		const colWidth = Math.max(18, Math.floor((width - 6) / 3));
+
+		// Column headers
+		const activeMarker = theme.nav.back;
+		const leftHeader =
+			this.#focusColumn === "left"
+				? theme.bold(theme.fg("contentAccent", `${activeMarker} LEFT`))
+				: theme.fg("muted", "  LEFT");
+		const rightHeader =
+			this.#focusColumn === "right"
+				? theme.bold(theme.fg("contentAccent", `${activeMarker} RIGHT`))
+				: theme.fg("muted", "  RIGHT");
+		const disabledHeader =
+			this.#focusColumn === "disabled"
+				? theme.bold(theme.fg("contentAccent", `${activeMarker} AVAILABLE`))
+				: theme.fg("muted", "  AVAILABLE");
+
+		lines.push(`${leftHeader.padEnd(colWidth + 8)}${rightHeader.padEnd(colWidth + 8)}${disabledHeader}`);
+		lines.push(theme.fg("dim", theme.boxRound.horizontal.repeat(Math.min(width - 2, colWidth * 3 + 6))));
+
+		// Render rows
+		const maxRows = Math.max(leftSegs.length, rightSegs.length, disabledSegs.length, 1);
+
+		for (let row = 0; row < maxRows; row++) {
+			let line = "";
+
+			// Left column
+			line += this.#renderSegmentCell(leftSegs[row], "left", row, colWidth);
+
+			// Right column
+			line += this.#renderSegmentCell(rightSegs[row], "right", row, colWidth);
+
+			// Disabled column
+			line += this.#renderSegmentCell(disabledSegs[row], "disabled", row, colWidth);
+
+			lines.push(line);
+		}
+
+		// Summary line
+		lines.push("");
+		const leftCount = leftSegs.length;
+		const rightCount = rightSegs.length;
+		const summary = theme.fg(
+			"dim",
+			`${leftCount} left ${theme.sep.dot} ${rightCount} right ${theme.sep.dot} ${disabledSegs.length} available`,
+		);
+		lines.push(summary);
+
+		return lines;
+	}
+
+	#renderSegmentCell(seg: SegmentState | undefined, column: Column, row: number, colWidth: number): string {
+		if (!seg) {
+			return "".padEnd(colWidth + 2);
+		}
+
+		const isSelected = this.#focusColumn === column && this.#selectedIndex === row;
+		const info = SEGMENT_INFO[seg.id];
+		const label = info?.label ?? seg.id;
+
+		let text: string;
+		if (isSelected) {
+			text = theme.bg("selectedBg", theme.fg("text", ` ${label} `));
+		} else if (column === "disabled") {
+			text = theme.fg("dim", ` ${label}`);
+		} else {
+			text = theme.fg("text", ` ${label}`);
+		}
+
+		// Pad to column width (accounting for ANSI codes)
+		const padSize = colWidth - label.length - 1;
+		return text + padding(Math.max(0, padSize));
+	}
+}