@oh-my-pi/pi-coding-agent 15.11.6 → 15.11.8

package/src/modes/components/oauth-selector.ts

@@ -6,6 +6,7 @@ import {
 	fuzzyFilter,
 	matchesKey,
 	ScrollView,
+	type SgrMouseEvent,
 	Spacer,
 	TruncatedText,
 } from "@oh-my-pi/pi-tui";
@@ -16,6 +17,12 @@ import { DynamicBorder } from "./dynamic-border";
 
 const OAUTH_SELECTOR_MAX_VISIBLE = 10;
 
+/**
+ * Rendered lines before the provider rows: top border, spacer, title, spacer
+ * (must mirror the constructor's addChild order).
+ */
+const LIST_ROW_OFFSET = 4;
+
 /** Compact, human-readable tag for each credential-origin leg. */
 const ORIGIN_LABELS: Record<CredentialOriginKind, string> = {
 	runtime: "--api-key",
@@ -34,6 +41,10 @@ export class OAuthSelectorComponent extends Container {
 	#filteredProviders: OAuthProviderInfo[] = [];
 	#searchQuery = "";
 	#selectedIndex: number = 0;
+	#hoveredIndex: number | null = null;
+	/** First provider index of the visible ScrollView window (last #updateList). */
+	#scrollStart = 0;
+	#visibleCount = 0;
 	#mode: "login" | "logout";
 	#authStorage: AuthStorage;
 	#onSelectCallback: (providerId: string) => void;
@@ -252,6 +263,8 @@ export class OAuthSelectorComponent extends Container {
 				? 0
 				: Math.max(0, Math.min(this.#selectedIndex - Math.floor(maxVisible / 2), total - maxVisible));
 		const endIndex = Math.min(startIndex + maxVisible, total);
+		this.#scrollStart = startIndex;
+		this.#visibleCount = endIndex - startIndex;
 
 		const rows: string[] = [];
 		for (let i = startIndex; i < endIndex; i++) {
@@ -270,6 +283,9 @@ export class OAuthSelectorComponent extends Container {
 				const text = isAvailable ? `  ${provider.name}` : theme.fg("dim", `  ${provider.name}`);
 				line = text + statusIndicator;
 			}
+			if (!isSelected && i === this.#hoveredIndex) {
+				line = theme.bg("selectedBg", line);
+			}
 			rows.push(line);
 		}
 
@@ -354,15 +370,59 @@ export class OAuthSelectorComponent extends Container {
 		}
 		// Enter
 		else if (matchesKey(keyData, "enter") || matchesKey(keyData, "return") || keyData === "\n") {
-			const selectedProvider = this.#filteredProviders[this.#selectedIndex];
-			if (selectedProvider?.available) {
-				this.#statusMessage = undefined;
-				this.stopValidation();
-				this.#onSelectCallback(selectedProvider.id);
-			} else if (selectedProvider) {
-				this.#statusMessage = "Provider unavailable in this environment.";
+			this.#confirmSelection();
+		}
+	}
+
+	/** Confirm the selected provider (Enter or mouse click). */
+	#confirmSelection(): void {
+		const selectedProvider = this.#filteredProviders[this.#selectedIndex];
+		if (selectedProvider?.available) {
+			this.#statusMessage = undefined;
+			this.stopValidation();
+			this.#onSelectCallback(selectedProvider.id);
+		} else if (selectedProvider) {
+			this.#statusMessage = "Provider unavailable in this environment.";
+			this.#updateList();
+		}
+	}
+
+	/** Move the selection one step for a wheel notch (clamped, no wrap). */
+	handleWheel(delta: -1 | 1): void {
+		if (this.#filteredProviders.length === 0) return;
+		const next = Math.max(0, Math.min(this.#selectedIndex + delta, this.#filteredProviders.length - 1));
+		if (next === this.#selectedIndex) return;
+		this.#selectedIndex = next;
+		this.#statusMessage = undefined;
+		this.#updateList();
+	}
+
+	/**
+	 * Route an SGR mouse report at component-local coordinates. Provider rows
+	 * start LIST_ROW_OFFSET lines into the render; the ScrollView window shows
+	 * #visibleCount rows from #scrollStart. Wheel moves the selection, motion
+	 * drives the hover band, and a left click selects and confirms like Enter.
+	 */
+	routeMouse(event: SgrMouseEvent, line: number, _col: number): void {
+		if (event.wheel !== null) {
+			this.handleWheel(event.wheel);
+			return;
+		}
+		const localRow = line - LIST_ROW_OFFSET;
+		const index = localRow >= 0 && localRow < this.#visibleCount ? this.#scrollStart + localRow : undefined;
+		const target = index !== undefined && index < this.#filteredProviders.length ? index : null;
+		if (event.motion) {
+			if (target !== this.#hoveredIndex) {
+				this.#hoveredIndex = target;
 				this.#updateList();
 			}
+			return;
+		}
+		if (!event.leftClick || target === null) return;
+		if (target !== this.#selectedIndex) {
+			this.#selectedIndex = target;
+			this.#statusMessage = undefined;
 		}
+		this.#confirmSelection();
 	}
 }

package/src/modes/components/segment-track.ts

@@ -1,9 +1,9 @@
 /**
  * Shared renderer for a horizontal row of colored "segments" styled after the
- * status line: each segment shows in its own accent, the active one is filled
- * as a powerline chip (its accent as the background, a luminance-matched label,
- * flanked by triangle caps) and the rest are plain colored labels joined by a
- * thin separator.
+ * status line: each segment is colored by its track position from the theme's
+ * own palette, the active one is filled as a powerline chip (its color as the
+ * background, a luminance-matched label, flanked by triangle caps) and the
+ * rest are plain colored labels joined by a thin separator.
  *
  * Used by the plan-mode model-tier slider ({@link HookSelectorComponent}) and
  * the ctrl+p role-cycle status so both surfaces read identically.
@@ -12,13 +12,49 @@ import { type ThemeColor, theme } from "../theme/theme";
 
 export interface TrackSegment {
 	label: string;
-	/** Theme color for the segment; defaults to `accent`. */
-	color?: ThemeColor;
 }
 
 const FG_RESET = "\x1b[39m";
 const BG_RESET = "\x1b[49m";
 
+/** Vivid theme colors for position-based segment coloring, in preference
+ *  order. Themes alias many of these to the same value (titanium maps most of
+ *  the syntax set onto its accent), so {@link resolveSegmentPalette} dedupes
+ *  by resolved escape and hands position i the i-th distinct color. */
+const SEGMENT_COLOR_CANDIDATES: ThemeColor[] = [
+	"accent",
+	"success",
+	"warning",
+	"error",
+	"mdCode",
+	"mdLink",
+	"syntaxString",
+	"syntaxKeyword",
+	"syntaxFunction",
+	"syntaxNumber",
+	"syntaxOperator",
+	"syntaxVariable",
+];
+
+/**
+ * Resolve up to `count` theme colors that render distinctly under the active
+ * theme, in candidate preference order. May return fewer than `count` when the
+ * theme has fewer distinct hues (e.g. monochrome themes) — callers wrap with
+ * modulo. Never returns an empty array: `accent` always resolves.
+ */
+export function resolveSegmentPalette(count: number): ThemeColor[] {
+	const palette: ThemeColor[] = [];
+	const seen = new Set<string>();
+	for (const color of SEGMENT_COLOR_CANDIDATES) {
+		const ansi = theme.getFgAnsi(color);
+		if (seen.has(ansi)) continue;
+		seen.add(ansi);
+		palette.push(color);
+		if (palette.length >= count) break;
+	}
+	return palette;
+}
+
 /**
  * Render `segments` as a colored chip track with `activeIndex` filled. Returns
  * a single line of styled text with no surrounding caption or arrows — callers
@@ -30,6 +66,7 @@ export function renderSegmentTrack(segments: TrackSegment[], activeIndex: number
 	const capLeft = theme.sep.powerlineRight;
 	const capRight = theme.sep.powerlineLeft;
 	const thinSep = theme.fg("statusLineSep", theme.sep.powerlineThin);
+	const palette = resolveSegmentPalette(segments.length);
 
 	let track = "";
 	segments.forEach((segment, i) => {
@@ -38,7 +75,7 @@ export function renderSegmentTrack(segments: TrackSegment[], activeIndex: number
 			// caps already delimit the active segment, so pad around it instead.
 			track += i === activeIndex || i - 1 === activeIndex ? "  " : ` ${thinSep} `;
 		}
-		const color = segment.color ?? "accent";
+		const color = palette[i % palette.length];
 		const fg = theme.getFgAnsi(color);
 		if (i !== activeIndex) {
 			track += `${fg}${segment.label}${FG_RESET}`;

package/src/modes/components/settings-selector.ts

@@ -7,6 +7,7 @@ import {
 	fuzzyRank,
 	getKeybindings,
 	getSettingItemFilterText,
+	type ImageBudget,
 	Input,
 	matchesKey,
 	parseSgrMouse,
@@ -22,6 +23,7 @@ import {
 	truncateToWidth,
 	visibleWidth,
 } from "@oh-my-pi/pi-tui";
+import type { ShapeTarget } from "@oh-my-pi/snapcompact";
 import { getDefault, type SettingPath, settings } from "../../config/settings";
 import type {
 	SettingTab,
@@ -36,6 +38,7 @@ import { getTabBarTheme } from "../shared";
 import { bottomBorder, divider, row, topBorder } from "./overlay-box";
 import { handleInputOrEscape, PluginSettingsComponent } from "./plugin-settings";
 import { getSettingDef, getSettingsForTab, type SettingDef } from "./settings-defs";
+import { SnapcompactShapePreview } from "./snapcompact-shape-preview";
 import { getPreset } from "./status-line/presets";
 
 /**
@@ -97,6 +100,7 @@ class SelectSubmenu extends Container {
 		onCancel: () => void,
 		onSelectionChange?: (value: string) => void | Promise<void>,
 		private readonly getPreview?: () => string,
+		footer?: Component,
 	) {
 		super();
 
@@ -158,6 +162,13 @@ class SelectSubmenu extends Container {
 		// Hint
 		this.addChild(new Spacer(1));
 		this.addChild(new Text(theme.fg("dim", "  Enter to select · Esc to go back"), 0, 0));
+
+		// Footer (e.g. the snapcompact shape preview) below the interactive rows,
+		// so the list never shifts while browsing.
+		if (footer) {
+			this.addChild(new Spacer(1));
+			this.addChild(footer);
+		}
 	}
 
 	#updatePreview(): void {
@@ -249,6 +260,12 @@ export interface SettingsRuntimeContext {
 	availableThemes: string[];
 	/** Working directory for plugins tab */
 	cwd: string;
+	/** Active model (api + id); resolves what the snapcompact `auto` shape maps to. */
+	model?: ShapeTarget;
+	/** Shared TUI image budget (graphics ids + transmit-once) for image previews. */
+	imageBudget?: ImageBudget;
+	/** Schedules a re-render after async preview work completes. */
+	requestRender?: () => void;
 }
 
 /** Status line settings subset for preview */
@@ -758,6 +775,7 @@ export class SettingsSelectorComponent implements Component {
 		// Preview handlers
 		let onPreview: ((value: string) => void | Promise<void>) | undefined;
 		let onPreviewCancel: (() => void) | undefined;
+		let footer: Component | undefined;
 
 		const activeThemeBeforePreview = getCurrentThemeName() ?? currentValue;
 		if (def.path === "theme.dark" || def.path === "theme.light") {
@@ -797,6 +815,14 @@ export class SettingsSelectorComponent implements Component {
 				const separator = settings.get("statusLine.separator");
 				this.callbacks.onStatusLinePreview?.({ separator });
 			};
+		} else if (def.path === "snapcompact.shape") {
+			const shapePreview = new SnapcompactShapePreview(currentValue, {
+				model: this.context.model,
+				imageBudget: this.context.imageBudget,
+				requestRender: this.context.requestRender,
+			});
+			onPreview = value => shapePreview.setValue(value);
+			footer = shapePreview;
 		}
 
 		// Provide status line preview for theme selection
@@ -819,6 +845,7 @@ export class SettingsSelectorComponent implements Component {
 			},
 			onPreview,
 			getPreview,
+			footer,
 		);
 	}
 

package/src/modes/components/snapcompact-shape-preview-doc.md

@@ -0,0 +1,11 @@
+[User]: Fix the settings overlay crash. Wheeling past the last row throws.
+
+[Assistant tool calls]: read(path="src/select-list.ts:140-180")
+
+[Tool result]: 162: const index = Math.floor(line / rowHeight); index is never checked against bounds.
+
+[Assistant]: Found it. The hit test indexes past the filtered list; clamping to the last row fixes the crash.
+
+[User]: Does the fix survive filtering?
+
+[Assistant]: Yes. The clamp applies after the filter pass, so a narrowed list keeps the hit map in sync. Added a regression test that wheels past the last row with a filter active and asserts no throw.

package/src/modes/components/snapcompact-shape-preview.ts

@@ -0,0 +1,192 @@
+/**
+ * Live preview for the `snapcompact.shape` setting: renders a sample session
+ * transcript through the real snapcompact rasterizer as a miniature page and
+ * shows it zoomed, so cell size, ink hues, highlight bands, and dim tool-result
+ * spans are legible at terminal scale.
+ *
+ * The mini-frame (a {@link SRC_FRAME_PX}px page) is upscaled with
+ * nearest-neighbor so the glyph pixels stay crisp when the terminal scales the
+ * placement box. Graphics display requires the Kitty unicode-placeholder path —
+ * `renderImage` returning `lines` is the gate — because the bordered settings
+ * frame re-fits every row, which direct cursor-positioned placements (iTerm2,
+ * Sixel, Kitty `a=p`) do not survive. Everything else falls back to the stats
+ * line plus a dim notice.
+ */
+import { type Component, type ImageBudget, renderImage, TERMINAL } from "@oh-my-pi/pi-tui";
+import {
+	DIM_OFF,
+	DIM_ON,
+	geometry,
+	isShapeVariantName,
+	normalize,
+	renderMany,
+	resolveShape,
+	SHAPE_VARIANT_NAMES,
+	SHAPE_VARIANTS,
+	type Shape,
+	type ShapeTarget,
+	type ShapeVariantName,
+} from "@oh-my-pi/snapcompact";
+import { theme } from "../theme/theme";
+import sampleDoc from "./snapcompact-shape-preview-doc.md" with { type: "text" };
+
+/** Mini-frame edge in px — a small page from the real rasterizer ≈ a zoomed crop. */
+const SRC_FRAME_PX = 128;
+/** Nearest-neighbor upscale factor; keeps glyph pixels crisp on HiDPI cell boxes. */
+const ZOOM_SCALE = 4;
+/** Display box in terminal cells (square-ish at the typical 1:2 cell aspect). */
+const MAX_IMAGE_COLS = 28;
+const MAX_IMAGE_ROWS = 14;
+
+/** Sample transcript with `[Tool result]:` bodies wrapped in dim-ink toggles. */
+const PREVIEW_TEXT = sampleDoc
+	.trim()
+	.replace(/\[Tool result\]: ([^[]*)/g, (_match, body: string) => `[Tool result]: ${DIM_ON}${body}${DIM_OFF}`);
+
+type PreviewEntry =
+	| { state: "rendering" }
+	| { state: "failed" }
+	| { state: "ready"; data: string; edgePx: number; imageId: number; transmitted: boolean };
+
+export interface SnapcompactShapePreviewOptions {
+	/** Active model (api + id); resolves what `auto` maps to for this reader. */
+	model?: ShapeTarget;
+	/** Shared TUI image budget: stable graphics ids, transmit-once, exit cleanup. */
+	imageBudget?: ImageBudget;
+	/** Schedules a re-render once an async sample render completes. */
+	requestRender?: () => void;
+}
+
+export class SnapcompactShapePreview implements Component {
+	#model: ShapeTarget | undefined;
+	#budget: ImageBudget | undefined;
+	#requestRender: () => void;
+	#variant: ShapeVariantName | "auto" = "auto";
+	#entries = new Map<ShapeVariantName, PreviewEntry>();
+
+	constructor(currentValue: string, options: SnapcompactShapePreviewOptions = {}) {
+		this.#model = options.model;
+		this.#budget = options.imageBudget;
+		this.#requestRender = options.requestRender ?? (() => {});
+		this.setValue(currentValue);
+	}
+
+	/** Track the highlighted option; the next render reflects it. */
+	setValue(value: string): void {
+		this.#variant = isShapeVariantName(value) ? value : "auto";
+	}
+
+	render(width: number): readonly string[] {
+		const shape = resolveShape(this.#model, this.#variant);
+		const name = resolvedVariantName(shape);
+		const geo = geometry(shape);
+		const label = this.#variant === "auto" ? `auto → ${name}` : name;
+		const chars = geo.capacity >= 1000 ? `${(geo.capacity / 1000).toFixed(1)}k` : String(geo.capacity);
+		const tokens =
+			shape.frameTokenEstimate >= 1000
+				? `${(shape.frameTokenEstimate / 1000).toFixed(1)}k`
+				: String(shape.frameTokenEstimate);
+		const stats = `full frame ${geo.cols}×${geo.rows} cells ≈ ${chars} chars ≈ ${tokens} tokens`;
+		const lines: string[] = [theme.fg("muted", `  Sample (zoomed) · ${label} · ${stats}`), ""];
+
+		if (!this.#budget || !TERMINAL.imageProtocol) {
+			lines.push(theme.fg("dim", "  (graphic sample needs a Kitty-graphics terminal)"));
+			return lines;
+		}
+
+		const entry = this.#ensureEntry(name, shape);
+		if (entry.state === "rendering") {
+			lines.push(theme.fg("dim", "  rendering sample…"));
+			return lines;
+		}
+		if (entry.state === "failed") {
+			lines.push(theme.fg("dim", "  (sample render failed)"));
+			return lines;
+		}
+
+		const result = renderImage(
+			entry.data,
+			{ widthPx: entry.edgePx, heightPx: entry.edgePx },
+			{
+				maxWidthCells: Math.max(8, Math.min(MAX_IMAGE_COLS, width - 4)),
+				maxHeightCells: MAX_IMAGE_ROWS,
+				imageId: entry.imageId,
+				includeTransmit: !entry.transmitted,
+			},
+		);
+		// Only the unicode-placeholder path returns text-cell `lines`; cursor-moving
+		// placements would corrupt the bordered settings frame, so skip them.
+		if (!result?.lines) {
+			lines.push(theme.fg("dim", "  (graphic sample needs Kitty unicode-placeholder graphics)"));
+			return lines;
+		}
+		if (result.transmit) {
+			this.#budget.enqueueTransmit(entry.imageId, result.transmit);
+			entry.transmitted = true;
+		}
+		for (const line of result.lines) {
+			lines.push(`  ${line}`);
+		}
+		return lines;
+	}
+
+	#ensureEntry(name: ShapeVariantName, shape: Shape): PreviewEntry {
+		let entry = this.#entries.get(name);
+		if (!entry) {
+			entry = { state: "rendering" };
+			this.#entries.set(name, entry);
+			void this.#buildEntry(name, shape);
+		}
+		return entry;
+	}
+
+	async #buildEntry(name: ShapeVariantName, shape: Shape): Promise<void> {
+		try {
+			// Fill the mini-page so every variant shows a fully inked window.
+			const capacity = geometry(shape, SRC_FRAME_PX).capacity;
+			let text = PREVIEW_TEXT;
+			while (normalize(text).length < capacity) {
+				text += ` ${PREVIEW_TEXT}`;
+			}
+			const frame = renderMany(text, { shape, frameSize: SRC_FRAME_PX, maxFrames: 1 })[0];
+			if (!frame) throw new Error("empty sample frame");
+			const edgePx = SRC_FRAME_PX * ZOOM_SCALE;
+			const zoomed = await new Bun.Image(Buffer.from(frame.data, "base64"))
+				.resize(edgePx, edgePx, { filter: "nearest" })
+				.png()
+				.bytes();
+			this.#entries.set(name, {
+				state: "ready",
+				data: zoomed.toBase64(),
+				edgePx,
+				// Keyed id: reopening settings reuses the id, so data already in the
+				// terminal store is never re-transmitted (enqueueTransmit no-ops).
+				imageId: this.#budget?.acquireId(`snapshape:${name}:${edgePx}`) ?? 0,
+				transmitted: false,
+			});
+		} catch {
+			this.#entries.set(name, { state: "failed" });
+		}
+		this.#requestRender();
+	}
+}
+
+/** Research name of the concrete geometry `resolveShape` picked (for `auto`). */
+function resolvedVariantName(shape: Shape): ShapeVariantName {
+	for (const name of SHAPE_VARIANT_NAMES) {
+		const candidate = SHAPE_VARIANTS[name];
+		if (
+			candidate.font === shape.font &&
+			candidate.cellWidth === shape.cellWidth &&
+			candidate.cellHeight === shape.cellHeight &&
+			candidate.variant === shape.variant &&
+			candidate.lineRepeat === shape.lineRepeat &&
+			candidate.frameSize === shape.frameSize
+		) {
+			return name;
+		}
+	}
+	// resolveShape only hands out table geometries; the legacy shape is the
+	// conservative label if that invariant ever changes.
+	return "5x8-sent";
+}

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

@@ -18,6 +18,7 @@ import { renderSegment, type SegmentContext } from "./segments";
 import { getSeparator } from "./separators";
 import { calculateTokensPerSecond } from "./token-rate";
 import type {
+	CollabStatus,
 	EffectiveStatusLineSettings,
 	StatusLineSegmentId,
 	StatusLineSegmentOptions,
@@ -152,6 +153,7 @@ export class StatusLineComponent implements Component {
 	#planModeStatus: { enabled: boolean; paused: boolean } | null = null;
 	#loopModeStatus: { enabled: boolean } | null = null;
 	#goalModeStatus: { enabled: boolean; paused: boolean } | null = null;
+	#collabStatus: CollabStatus | null = null;
 
 	// Git status caching (1s TTL)
 	#cachedGitStatus: { staged: number; unstaged: number; untracked: number } | null = null;
@@ -217,6 +219,11 @@ export class StatusLineComponent implements Component {
 		this.#subagentCount = count;
 	}
 
+	/** Active subagent count as currently displayed (collab state mirroring). */
+	get subagentCount(): number {
+		return this.#subagentCount;
+	}
+
 	setSessionStartTime(time: number): void {
 		this.#sessionStartTime = time;
 	}
@@ -233,6 +240,10 @@ export class StatusLineComponent implements Component {
 		this.#goalModeStatus = status ?? null;
 	}
 
+	setCollabStatus(status: CollabStatus | null): void {
+		this.#collabStatus = status;
+	}
+
 	setHookStatus(key: string, text: string | undefined): void {
 		if (text === undefined) {
 			this.#hookStatuses.delete(key);
@@ -642,7 +653,15 @@ export class StatusLineComponent implements Component {
 			contextTokens = breakdown.usedTokens;
 			contextWindow = breakdown.contextWindow || contextWindow;
 		}
-		const contextPercent = contextWindow > 0 ? (contextTokens / contextWindow) * 100 : 0;
+		let contextPercent = contextWindow > 0 ? (contextTokens / contextWindow) * 100 : 0;
+
+		// Collab guest: context comes from the host's state frames — the local
+		// replica does no accounting of its own.
+		const collabState = this.#collabStatus?.stateOverride;
+		if (collabState?.contextUsage) {
+			contextWindow = collabState.contextUsage.contextWindow || contextWindow;
+			contextPercent = collabState.contextUsage.percent ?? contextPercent;
+		}
 
 		return {
 			session: this.session,
@@ -651,6 +670,7 @@ export class StatusLineComponent implements Component {
 			planMode: this.#planModeStatus,
 			loopMode: this.#loopModeStatus,
 			goalMode: this.#goalModeStatus,
+			collab: this.#collabStatus,
 			usageStats,
 			contextPercent,
 			contextWindow,

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

@@ -2,7 +2,7 @@ import type { PresetDef, StatusLinePreset } from "./types";
 
 export const STATUS_LINE_PRESETS: Record<StatusLinePreset, PresetDef> = {
 	default: {
-		leftSegments: ["pi", "model", "mode", "path", "git", "pr", "context_pct", "cost"],
+		leftSegments: ["pi", "model", "mode", "collab", "path", "git", "pr", "context_pct", "cost"],
 		rightSegments: ["session_name"],
 		separator: "powerline-thin",
 		segmentOptions: {

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

@@ -493,6 +493,18 @@ const sessionNameSegment: StatusLineSegment = {
 	},
 };
 
+const collabSegment: StatusLineSegment = {
+	id: "collab",
+	render(ctx) {
+		if (!ctx.collab) return { content: "", visible: false };
+		const label =
+			ctx.collab.role === "host"
+				? `⇄ collab:${ctx.collab.participantCount}`
+				: `⇄ collab guest:${ctx.collab.participantCount}`;
+		return { content: theme.fg("accent", label), visible: true };
+	},
+};
+
 function pickUsageColor(percent: number): "muted" | "warning" | "error" {
 	if (percent >= 80) return "error";
 	if (percent >= 50) return "warning";
@@ -573,6 +585,7 @@ export const SEGMENTS: Record<StatusLineSegmentId, StatusLineSegment> = {
 	cache_hit: cacheHitSegment,
 	session_name: sessionNameSegment,
 	usage: usageSegment,
+	collab: collabSegment,
 };
 
 export function renderSegment(id: StatusLineSegmentId, ctx: SegmentContext): RenderedSegment {

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

@@ -1,8 +1,17 @@
+import type { CollabSessionState } from "../../../collab/protocol";
 import type { StatusLinePreset, StatusLineSegmentId, StatusLineSeparatorStyle } from "../../../config/settings-schema";
 import type { AgentSession } from "../../../session/agent-session";
 
 export type { StatusLinePreset, StatusLineSegmentId, StatusLineSeparatorStyle };
 
+/** Collab session indicator + (guest-only) host-state override for segments. */
+export interface CollabStatus {
+	role: "host" | "guest";
+	participantCount: number;
+	/** Guest only: host footer snapshot that overrides locally computed values. */
+	stateOverride?: CollabSessionState | null;
+}
+
 export interface StatusLineSegmentOptions {
 	model?: { showThinkingLevel?: boolean };
 	path?: { abbreviate?: boolean; maxLength?: number; stripWorkPrefix?: boolean };
@@ -49,6 +58,7 @@ export interface SegmentContext {
 		enabled: boolean;
 		paused: boolean;
 	} | null;
+	collab: CollabStatus | null;
 	// Cached values for performance (computed once per render)
 	usageStats: {
 		input: number;

package/src/modes/components/tips.txt

@@ -16,4 +16,5 @@ Press alt+p (or /switch) to switch provider, and ctrl+p to cycle role models smo
 Press ctrl+r to search your prompt history and reuse a past message
 `/force read` pins the next turn to one specific tool when the model keeps reaching for the wrong one
 `/copy code` grabs the last code block to your clipboard — `/copy cmd` grabs the last shell/python command
-`/shake` rips heavy tool results out of context to reclaim tokens without a full /compact — `/shake images` drops just images
+`/shake` rips heavy tool results out of context to reclaim tokens without a full /compact — `/shake images` drops just images
+Pair up live: `/collab` shares your session through an end-to-end encrypted relay link — a teammate runs `/join <link>` to watch tool calls stream and prompt the agent from their own omp

package/src/modes/components/tool-execution.ts

@@ -591,20 +591,28 @@ export class ToolExecutionComponent extends Container {
 
 	/**
 	 * Whether this still-live block's settled rows may enter native scrollback
-	 * (see `FinalizableBlock.isTranscriptBlockCommitStable`). A pending
-	 * collapsed preview is provisional: the tail-window streaming views
-	 * (edit/bash/eval caps) are re-anchored top-first by the result render, so
-	 * promoting their visually static head — e.g. an edit preview idling on
-	 * its last frame while the apply + LSP pass runs — would strand a stale
-	 * copy of the call box above the final block the moment the result lands.
-	 * Expanded pending blocks stream top-anchored append-shaped content whose
-	 * rows the result render preserves byte-stable (the over-tall write/eval
-	 * scrollback contract), so they stay commit-eligible. Displaceable waiting
+	 * (see `FinalizableBlock.isTranscriptBlockCommitStable`). Classification is
+	 * per renderer (`ToolRenderer.provisionalPendingPreview`): tail-window
+	 * streaming views (edit's streamed-diff tail, bash/ssh command caps, eval
+	 * cells) are re-anchored top-first by the result render, so promoting
+	 * their visually static head — e.g. an edit preview idling on its last
+	 * frame while the apply + LSP pass runs — would strand a stale copy of
+	 * the call box above the final block the moment the result lands. Every
+	 * other pending preview streams top-anchored append-shaped rows the
+	 * result render preserves (a task call's context/assignment markdown, a
+	 * write's content), so it stays commit-eligible — a call taller than the
+	 * viewport scrolls into native history mid-stream instead of reading as
+	 * cut off until the result. Expanded blocks always stream top-anchored
+	 * (the over-tall write/eval scrollback contract). Displaceable waiting
 	 * polls are removed wholesale by the next poll and must never commit.
 	 */
 	isTranscriptBlockCommitStable(): boolean {
 		if (this.#displaceable) return false;
-		return this.#expanded || this.isTranscriptBlockFinalized();
+		if (this.#expanded || this.isTranscriptBlockFinalized()) return true;
+		if ((this.#tool as { provisionalPendingPreview?: boolean } | undefined)?.provisionalPendingPreview) {
+			return false;
+		}
+		return !toolRenderers[this.#toolName]?.provisionalPendingPreview;
 	}
 
 	/**