@oh-my-pi/pi-tui 18.10.1 → 18.10.2

package/src/apps/git/git-tui.ts

@@ -32,7 +32,7 @@ import { Stack } from "../../components/layout/stack";
 import { matchesKey } from "../../keys";
 import { ProcessTerminal } from "../../terminal";
 import { routeSgrMouseInput } from "../../mouse";
-import { col, compact, keyed, node, row, span, text } from "../../native/describe";
+import { col, compact, keyed, node, row, span, stableKey, text } from "../../native/describe";
 import { Memo } from "../../native/memo";
 import type { DescribeContext, NativeNode, NativeUiEvent } from "../../native/node";
 import { actionButton } from "../../native/overlay";
@@ -42,6 +42,7 @@ import { theme, warmHighlighter } from "../../theme/theme";
 import type { AvatarSource } from "./avatar";
 import { pill, softPill, tintChip } from "./colors";
 import {
+	assetTitle,
 	buildDiffDocument,
 	type DiffDocument,
 	buildLineSelectionPatch,
@@ -53,7 +54,7 @@ import {
 } from "./diff-pane";
 import { GitHelpSheet } from "./help";
 import { Sidebar, type SidebarAction, type GitCommitMessage } from "./sidebar";
-import type { AssetFileContents, ChangedFile, FileContents, GitTuiModel } from "./state";
+import type { AssetFileContents, ChangedFile, FileAssetSide, FileContents, GitTuiModel, MediaRef } from "./state";
 
 /** AI staging counts displayed after filtering the working tree. */
 export interface AiStageOutcome {
@@ -929,8 +930,9 @@ class GitTuiComponent implements Component {
 				this.#contents,
 				this.#currentFile,
 				this.#pane.emptyMessage,
+				cx.supports("media"),
 			],
-			() => this.#describeBody(),
+			() => this.#describeBody(cx),
 		);
 		const side = this.#sidebar.describe(cx);
 		return this.#nativeRoot.get([bar, body, side, narrow, status, this.#status, this.#statusTone], () => {
@@ -1086,7 +1088,7 @@ class GitTuiComponent implements Component {
 	}
 
 	/** The diff for the view mode, or the loading, empty and media states. */
-	#describeBody(): NativeNode {
+	#describeBody(cx: DescribeContext): NativeNode {
 		const doc = this.#pane.doc;
 		const file = this.#currentFile;
 		if (doc && this.#pane.state === "ready") {
@@ -1104,6 +1106,18 @@ class GitTuiComponent implements Component {
 		}
 		const contents = this.#contents;
 		if (this.#pane.state === "asset" && file && contents?.kind === "asset") {
+			if (cx.supports("media")) {
+				return keyed(
+					row(
+						[
+							mediaColumn("before", contents.old, contents.oldRef),
+							mediaColumn("after", contents.new, contents.newRef),
+						],
+						{ gap: "sm", align: "stretch", grow: 1, role: "omp.app.git.compare" },
+					),
+					"compare",
+				);
+			}
 			return keyed(
 				col(
 					[
@@ -1190,6 +1204,41 @@ function unifiedDiff(doc: DiffDocument, whole: boolean): string {
 	return out.join("\n");
 }
 
+/** `media` nodes of the before/after compare share this link, so they pan and zoom together. */
+const MEDIA_COMPARE_LINK = "git-compare";
+
+/**
+ * One column of the native media compare: its heading (`Before · PNG`) over a
+ * `media` node Tern loads from `ref`, keyed by path so another file remounts,
+ * or a muted line when the side has no file.
+ */
+function mediaColumn(side: "before" | "after", asset: FileAssetSide, ref: MediaRef | undefined): NativeNode {
+	const head = keyed(
+		text([span(assetTitle(side === "before" ? "Before" : "After", asset), "strong")], {
+			truncate: "end",
+			role: "omp.app.git.media-head",
+		}),
+		"head",
+	);
+	const body = ref
+		? node(
+				"media",
+				{ ...ref, link: MEDIA_COMPARE_LINK, grow: 1, role: "omp.app.git.media" },
+				undefined,
+				`media-${stableKey(ref.path)}`,
+			)
+		: keyed(
+				text(
+					asset.kind === "empty"
+						? [span(side === "before" ? "Did not exist" : "Deleted", "muted")]
+						: assetText(asset).map(fact => span(fact.t, "muted")),
+					{ role: "omp.app.git.media-none" },
+				),
+				"none",
+			);
+	return keyed(col([head, body], { gap: "xs", grow: 1, basis: 0, role: "omp.app.git.media-side" }), side);
+}
+
 /** One side of a media/binary change as a short fact line. */
 function assetText(asset: AssetFileContents["old"]): TspSpan[] {
 	const size = (bytes: number | undefined): string =>

package/src/apps/git/state.ts

@@ -66,11 +66,23 @@ export interface TextFileContents {
 	readonly streamResult: DiffStreamResult;
 }
 
+/** Where one side of a change lives, so a host viewer (Tern's TSP `media` node) can load it by path. */
+export interface MediaRef {
+	/** Absolute path of the file (repository root joined with its repository path). */
+	readonly path: string;
+	/** Git revision holding this side (`HEAD`, a sha, `:0` for the index); absent for the worktree file. */
+	readonly rev?: string;
+}
+
 /** Non-text sides rendered as previews or explicit placeholders. */
 export interface AssetFileContents {
 	readonly kind: "asset";
 	readonly old: FileAssetSide;
 	readonly new: FileAssetSide;
+	/** Source of {@link old}; absent when that side is empty. */
+	readonly oldRef?: MediaRef;
+	/** Source of {@link new}; absent when that side is empty. */
+	readonly newRef?: MediaRef;
 }
 
 /** Loaded file content selected for text diffing or asset preview. */

package/src/chat/assistant-message.ts

@@ -17,9 +17,9 @@ import type { AssistantThinkingRenderer } from "./extension-types";
 import { ensureThemeSync, getMarkdownTheme, getMarkdownThemeWithLinkTargets, getThemeEpoch, theme } from "../theme";
 import { card, col, elapsed, node, span, text } from "../native/describe";
 import { hasTranscriptActions, runTranscriptAction } from "./transcript-actions";
-import type { NativeChild, NativeNode, NativeUiEvent } from "../native/node";
+import type { DescribeContext, NativeChild, NativeNode, NativeUiEvent } from "../native/node";
 import { isNativeRendering } from "../native/state";
-import { NativeImageCache } from "../native/blobs";
+import { NativeImageCache, nativeMediaNode } from "../native/blobs";
 import { Memo } from "../native/memo";
 import { EMPTY_LINK_TARGETS, resolveImageOptions } from "../render/render-utils";
 import { WidthAwareText } from "../render";
@@ -250,6 +250,8 @@ export class AssistantMessageComponent extends Container {
 	#lastMessage?: AssistantMessage;
 	#emergencyText?: ProseBlock;
 	#toolImagesByCallId = new Map<string, ImageContent[]>();
+	/** File each grouped read showed that Tern's media viewer shows, for native `media` nodes. */
+	#toolMediaPathByCallId = new Map<string, string>();
 	/**
 	 * Payload keys ({@link imagePayloadKey}) whose Kitty PNG conversion this
 	 * component is awaiting, so a re-delivered image neither re-encodes nor
@@ -798,7 +800,8 @@ export class AssistantMessageComponent extends Container {
 	 * head's `title`. With `hideThinkingBlock` only the live head shows (collapsed)
 	 * and a finished thought emits nothing.
 	 */
-	override describe(): NativeNode {
+	override describe(cx?: DescribeContext): NativeNode {
+		const media = cx?.supports("media") === true;
 		const tail = this.#displayedMessage ? this.#thinkingTailIndex(this.#displayedMessage) : undefined;
 		const rate =
 			tail !== undefined && this.#lastUpdateTransient && this.#thinkingRateLive
@@ -813,9 +816,10 @@ export class AssistantMessageComponent extends Container {
 			this.#errorExpanded,
 			this.#nativeViewVersion,
 			rate,
+			media,
 			getThemeEpoch(),
 		];
-		return this.#native.get(key, () => this.#describeMessage(tail, rate));
+		return this.#native.get(key, () => this.#describeMessage(tail, rate, media));
 	}
 
 	/**
@@ -841,7 +845,7 @@ export class AssistantMessageComponent extends Container {
 		this.#nativeViewVersion++;
 	}
 
-	#describeMessage(thinkingTail: number | undefined, rate: number): NativeNode {
+	#describeMessage(thinkingTail: number | undefined, rate: number, media: boolean): NativeNode {
 		const message = this.#displayedMessage;
 		const previousParts = this.#nativeParts;
 		const parts = new Map<string, { text: string; stream: boolean; node: NativeNode }>();
@@ -962,7 +966,17 @@ export class AssistantMessageComponent extends Container {
 				}
 			}
 			if (this.#showImages && this.#showToolResultImages) {
+				// Reads of files Tern's media viewer shows: the host loads each file once by path, no bytes uploaded.
+				const shownPaths = new Set<string>();
+				if (media) {
+					for (const [toolCallId, mediaPath] of this.#toolMediaPathByCallId) {
+						if (shownPaths.has(mediaPath)) continue;
+						shownPaths.add(mediaPath);
+						children.push(nativeMediaNode(mediaPath, `r${toolCallId}`));
+					}
+				}
 				for (const [toolCallId, images] of this.#toolImagesByCallId) {
+					if (media && this.#toolMediaPathByCallId.has(toolCallId)) continue;
 					images.forEach((image, index) => {
 						children.push(this.#nativeImages.get(`r${toolCallId}:${index}`, image.data, image.mimeType));
 					});
@@ -1521,8 +1535,15 @@ export class AssistantMessageComponent extends Container {
 		}
 	}
 
-	setToolResultImages(toolCallId: string, images: ImageContent[]): void {
+	/**
+	 * A grouped read's result images, and `mediaPath`: the file it read that Tern's media viewer
+	 * shows (read details), which a native host supporting `media` shows by path instead of the
+	 * images. A media-only result (a model, a PDF) passes no images.
+	 */
+	setToolResultImages(toolCallId: string, images: ImageContent[], mediaPath?: string): void {
 		if (!toolCallId) return;
+		if (mediaPath) this.#toolMediaPathByCallId.set(toolCallId, mediaPath);
+		else this.#toolMediaPathByCallId.delete(toolCallId);
 		const validImages = images.filter(img => img.type === "image" && img.data && img.mimeType);
 		if (validImages.length === 0) {
 			this.#toolImagesByCallId.delete(toolCallId);

package/src/chat/tool-execution.ts

@@ -32,7 +32,7 @@ import {
 import { plainText } from "../native/spans";
 import { diagnosticsSection, displayPath, toolHead } from "../tools/native-view";
 import type { FileDiagnosticsResult } from "../tools/lsp";
-import { NativeImageCache } from "../native/blobs";
+import { NativeImageCache, readMediaPath, shownMedia } from "../native/blobs";
 import { Memo } from "../native/memo";
 import { type EditMode, type PerFileDiffPreview, renderStreamingFallback } from "../tools/edit";
 import { taskCardAgentIds } from "../tools/task";
@@ -218,18 +218,17 @@ export interface ToolExecutionOptions {
 	useBuiltInRenderer?: boolean;
 }
 
+/** A tool result or progress frame as a card shows it. */
+export interface ToolResultFrame {
+	content: Array<{ type: string; text?: string; data?: string; mimeType?: string }>;
+	details?: unknown;
+	isError?: boolean;
+}
+
 export interface ToolExecutionHandle extends Component {
 	updateArgs(args: unknown, toolCallId?: string): void;
 	updateStreamPreview?(update: unknown): void;
-	updateResult(
-		result: {
-			content: Array<{ type: string; text?: string; data?: string; mimeType?: string }>;
-			details?: unknown;
-			isError?: boolean;
-		},
-		isPartial?: boolean,
-		toolCallId?: string,
-	): void;
+	updateResult(result: ToolResultFrame, isPartial?: boolean, toolCallId?: string): void;
 	setArgsComplete(toolCallId?: string): void;
 	setExecutionStarted(toolCallId?: string): void;
 	setExpanded(expanded: boolean): void;
@@ -240,6 +239,50 @@ export interface ToolExecutionHandle extends Component {
 	seal(): void;
 }
 
+/** Tools whose returned call hands its card to the background job it started (see {@link parksAsBackground}). */
+const JOB_CARD_TOOLS: Record<string, "always" | "native"> = { task: "always", bash: "native", eval: "native" };
+
+/**
+ * Whether a call that returned with `details.async.state === "running"` stays
+ * parked ({@link ToolExecutionHandle.parkAsBackground}) so its job's later
+ * frames keep filling the card until a `completed`/`failed` frame settles it.
+ * Detached `task` spawns always do; backgrounded `bash`/`eval` jobs only under
+ * native rendering, where the terminal transcript keeps them frozen instead.
+ * Shared by the live event controller and the transcript rebuild.
+ */
+export function parksAsBackground(toolName: string, details: unknown): boolean {
+	const mode = JOB_CARD_TOOLS[toolName];
+	if (mode === undefined || (mode === "native" && !isNativeRendering())) return false;
+	return asyncJobState(details) === "running";
+}
+
+/** The background job state a tool result reports (`details.async.state`: running, completed, failed, cancelled). */
+export function asyncJobState(details: unknown): string | undefined {
+	if (!isRecord(details) || !isRecord(details.async)) return undefined;
+	return typeof details.async.state === "string" ? details.async.state : undefined;
+}
+
+/** Whether a frame is a background job's last one: it completed, failed or was cancelled. */
+export function isSettledJobFrame(details: unknown): boolean {
+	const state = asyncJobState(details);
+	return state === "completed" || state === "failed" || state === "cancelled";
+}
+
+/**
+ * Settle a parked card ({@link parksAsBackground}) with its job's last frame
+ * ({@link isSettledJobFrame}): a completed or failed job is the call's result;
+ * a cancelled one keeps the output it got to and seals the card as cancelled.
+ */
+export function settleWithJobFrame(component: ToolExecutionHandle, frame: ToolResultFrame, toolCallId: string): void {
+	const state = asyncJobState(frame.details);
+	if (state === "cancelled") {
+		component.updateResult(frame, true, toolCallId);
+		component.seal();
+		return;
+	}
+	component.updateResult({ ...frame, isError: state === "failed" }, false, toolCallId);
+}
+
 /** Card tone per status when the renderer doesn't choose one; settled cards stay neutral. */
 const NATIVE_STATUS_TONE: Record<TspCardStatus, TspTone | undefined> = {
 	pending: "pending",
@@ -581,15 +624,7 @@ export class ToolExecutionComponent extends Container {
 		return result !== undefined && !this.#isPartial && (result.isError === true || result.details != null);
 	}
 
-	updateResult(
-		result: {
-			content: Array<{ type: string; text?: string; data?: string; mimeType?: string }>;
-			details?: unknown;
-			isError?: boolean;
-		},
-		isPartial = false,
-		_toolCallId?: string,
-	): void {
+	updateResult(result: ToolResultFrame, isPartial = false, _toolCallId?: string): void {
 		const hadNoResult = this.#result === undefined;
 		const wasPartialResult = this.#result !== undefined && this.#isPartial;
 		const firstResultRepaintShapePainted = this.#firstResultViewportRepaintShapePainted;
@@ -941,6 +976,7 @@ export class ToolExecutionComponent extends Container {
 	override describe(cx?: DescribeContext): NativeNode {
 		if (this.#toolName === "wait" && this.#isBenignSkip()) return EMPTY_NODE;
 		const dataFirst = cx?.supports("tool") === true;
+		const media = cx?.supports("media") === true;
 		const key = [
 			dataFirst,
 			this.#resultVersion,
@@ -953,10 +989,11 @@ export class ToolExecutionComponent extends Container {
 			this.#showImages,
 			this.#displayInputVersion,
 			this.#toolActivityVisible,
+			media,
 			getThemeEpoch(),
 		];
 		return this.#native.get(key, () =>
-			withHidden(dataFirst ? this.#describeTool() : this.#describeCard(), !this.#toolActivityVisible),
+			withHidden(dataFirst ? this.#describeTool(media) : this.#describeCard(media), !this.#toolActivityVisible),
 		);
 	}
 
@@ -1002,12 +1039,12 @@ export class ToolExecutionComponent extends Container {
 	 * The data-first `tool` node (§7.2): the renderer's head data, status,
 	 * timer, exit and intent as props; its body as borderless children.
 	 */
-	#describeTool(): NativeNode {
-		const view = this.#nativeView();
+	#describeTool(media: boolean): NativeNode {
+		const view = this.#nativeView(media);
 		const status = this.#nativeStatus();
 		const head = view.tool;
 		const late = this.#lateDiagnosticsParts();
-		const body: NativeChild[] = [...(view.body ?? []), ...this.#nativeResultImages()];
+		const body: NativeChild[] = [...(view.body ?? []), ...this.#nativeResultImages(view.body)];
 		if (late.section) body.push(late.section);
 		const inline = view.inline === true;
 		const hasBody = body.length > 0;
@@ -1072,8 +1109,8 @@ export class ToolExecutionComponent extends Container {
 		return spans;
 	}
 
-	#describeCard(): NativeNode {
-		const view = this.#nativeView();
+	#describeCard(media: boolean): NativeNode {
+		const view = this.#nativeView(media);
 		const status = this.#nativeStatus();
 		const late = this.#lateDiagnosticsParts();
 		const fallbackHead = this.#fallbackHead(view);
@@ -1095,7 +1132,7 @@ export class ToolExecutionComponent extends Container {
 		const children: NativeChild[] = [
 			node("row", { gap: "sm", align: "baseline" }, headChildren, "head"),
 			...(view.body ?? []),
-			...this.#nativeResultImages(),
+			...this.#nativeResultImages(view.body),
 			...(late.section ? [late.section] : []),
 		];
 		const role = `omp.tool.${this.#toolName}`;
@@ -1127,9 +1164,10 @@ export class ToolExecutionComponent extends Container {
 	 * the result view (merged renderers) or the call head over both bodies.
 	 * A renderer that throws falls back to the generic card.
 	 */
-	#nativeView(): NativeToolView {
+	#nativeView(media: boolean): NativeToolView {
 		const status = this.#nativeStatus();
 		const options: RenderResultContextOptions = {
+			media,
 			expanded: this.#expanded,
 			isPartial: this.#isPartial,
 			argsComplete: this.#argsComplete,
@@ -1208,12 +1246,17 @@ export class ToolExecutionComponent extends Container {
 		return indicators ? (output ? `${output}\n${indicators}` : indicators) : output;
 	}
 
-	#nativeResultImages(): NativeNode[] {
+	/** Result images under the renderer's body, minus those the body already shows (as an `image` blob or a `media` file). */
+	#nativeResultImages(body: readonly NativeChild[] | undefined): NativeNode[] {
 		if (!this.#result || !this.#showImages) return [];
+		const shown = shownMedia(body);
+		const mediaPath = readMediaPath(this.#result.details);
+		if (mediaPath && shown.paths.has(mediaPath)) return [];
 		const images: NativeNode[] = [];
 		this.#getAllImageBlocks().forEach((image, index) => {
-			if (image.data && image.mimeType)
-				images.push(this.#nativeImages.get(`img${index}`, image.data, image.mimeType));
+			if (!image.data || !image.mimeType) return;
+			const described = this.#nativeImages.get(`img${index}`, image.data, image.mimeType);
+			if (!shown.blobs.has((described.p as { blob?: string } | undefined)?.blob ?? "")) images.push(described);
 		});
 		return images;
 	}

package/src/native/backend.ts

@@ -202,12 +202,20 @@ function sameSet(a: ReadonlySet<string>, b: ReadonlySet<string>): boolean {
 	return true;
 }
 
+/**
+ * Kinds newer than some Tern builds that answer `TERM_PROGRAM=tern`: used only
+ * once the real `hello` lists them, so the optimistic start never emits a node
+ * an older terminal cannot draw (`media`: files Tern loads by path).
+ */
+const UNASSUMED_KINDS: Partial<Record<TspKind, true>> = { media: true };
+
 /**
  * The reply a v1 terminal is assumed to give before its real `hello` arrives
- * (the `TERM_PROGRAM=tern` optimistic start): the whole vocabulary, the
- * default APC limit and credits, the terminal's width, the appearance omp
- * already detected, full motion, and `blobs`, so a resumed session's images
- * are asked about rather than resent before the reply comes.
+ * (the `TERM_PROGRAM=tern` optimistic start): the whole vocabulary except
+ * {@link UNASSUMED_KINDS}, the default APC limit and credits, the terminal's
+ * width, the appearance omp already detected, full motion, and `blobs`, so a
+ * resumed session's images are asked about rather than resent before the
+ * reply comes.
  */
 export function assumedTspHello(terminal: Terminal): TspHello {
 	const appearance = terminal.appearance;
@@ -215,7 +223,7 @@ export function assumedTspHello(terminal: Terminal): TspHello {
 		r: "hello",
 		v: TSP_VERSION,
 		term: "tern",
-		kinds: TSP_KINDS,
+		kinds: TSP_KINDS.filter(kind => !UNASSUMED_KINDS[kind]),
 		features: ["blobs"],
 		apc: TSP_DEFAULT_APC_LIMIT,
 		credits: TSP_DEFAULT_CREDITS,

package/src/native/blobs.ts

@@ -8,9 +8,10 @@
  * references it.
  */
 import type { TspProps } from "@oh-my-pi/pi-wire";
+import { resolveImageOptions } from "../render/render-utils";
 import { getImageDimensions } from "../terminal-capabilities";
 import { node } from "./describe";
-import type { NativeNode } from "./node";
+import type { NativeChild, NativeNode } from "./node";
 
 export interface NativeBlob {
 	readonly id: string;
@@ -103,3 +104,35 @@ export class NativeImageCache {
 		return image;
 	}
 }
+
+/** The disk file a tool result's image was read from (`read` details `mediaPath`), when it has one. */
+export function readMediaPath(details: unknown): string | undefined {
+	if (typeof details !== "object" || details === null) return undefined;
+	const mediaPath = (details as { mediaPath?: unknown }).mediaPath;
+	return typeof mediaPath === "string" && mediaPath.length > 0 ? mediaPath : undefined;
+}
+
+/**
+ * A `media` node the host loads by path, capped at the inline image preview
+ * height. Callers check `cx.supports("media")` first.
+ */
+export function nativeMediaNode(path: string, key: string): NativeNode {
+	const maxRows = resolveImageOptions().maxHeightCells;
+	return node("media", { path, max: maxRows && maxRows > 0 ? { h: `${maxRows}lines` } : undefined }, undefined, key);
+}
+
+/** Blob ids of the `image` nodes and paths of the `media` nodes under `children` (described nodes only). */
+export function shownMedia(children: readonly NativeChild[] | undefined): { blobs: Set<string>; paths: Set<string> } {
+	const shown = { blobs: new Set<string>(), paths: new Set<string>() };
+	const visit = (list: readonly NativeChild[] | undefined): void => {
+		for (const child of list ?? []) {
+			if (!("k" in child)) continue;
+			const p = child.p as { blob?: unknown; path?: unknown } | undefined;
+			if (child.k === "image" && typeof p?.blob === "string") shown.blobs.add(p.blob);
+			else if (child.k === "media" && typeof p?.path === "string") shown.paths.add(p.path);
+			visit(child.c);
+		}
+	};
+	visit(children);
+	return shown;
+}

package/src/overlays/model-browser.ts

@@ -37,7 +37,14 @@ import {
 } from "../keybinding-matchers";
 import { MenuSelection } from "../components/menu-selection";
 import { clampScrollOffset, scrollOffsetForRow } from "../components/scroll-viewport";
-import type { TspPickerColumn, TspPickerGroup, TspPickerItem, TspSpan, TspText } from "@oh-my-pi/pi-wire";
+import type {
+	TspPickerColumn,
+	TspPickerGroup,
+	TspPickerItem,
+	TspPickerMark,
+	TspSpan,
+	TspText,
+} from "@oh-my-pi/pi-wire";
 import { col, md, node, row, span, text } from "../native/describe";
 import { pickerFuzzyHits } from "../native/picker";
 import type { NativeChild, NativeNode, NativeUiEvent } from "../native/node";
@@ -809,6 +816,20 @@ function previewPrice(model: Model): string {
 	return withCreditBadge(model, parts.join(" · "));
 }
 
+/**
+ * A provider's picker mark: the terminal's logo for it, else its initials
+ * (`amazon-bedrock` → `AB`, `anthropic` → `An`) on its own gradient.
+ */
+export function providerMark(providerId: string): TspPickerMark {
+	const words = providerId.split(/[-_\s.]+/).filter(word => word.length > 0);
+	const word = words[0] ?? providerId;
+	const text =
+		words.length >= 2
+			? `${words[0]!.charAt(0)}${words[1]!.charAt(0)}`.toUpperCase()
+			: `${word.charAt(0).toUpperCase()}${word.charAt(1)}`;
+	return { text, seed: providerId, icon: `provider:${providerId}` };
+}
+
 /** The omp theme token of a thinking level's dot (`thinkingHigh`); none for inherit and auto. */
 export function thinkingDotToken(level: ConfiguredThinkingLevel): string | undefined {
 	if (level === ThinkingLevel.Inherit || level === AUTO_THINKING) return undefined;
@@ -1999,6 +2020,7 @@ export class ModelBrowser implements Component {
 		const value: TspPickerItem = {
 			id: item.selector,
 			label: quickRole ? item.id : item.selector,
+			mark: providerMark(item.model.provider),
 			mono: true,
 			...(quickRole ? { detail: `${item.model.provider}/${item.model.id}` } : {}),
 			facts,

package/src/overlays/model-hub.ts

@@ -56,6 +56,7 @@ import {
 	ModelBrowser,
 	type ModelBrowserItem,
 	modelSearchText,
+	providerMark,
 	thinkingDotToken,
 	type RoleAssignments,
 	resolveRoleAssignments,
@@ -314,14 +315,6 @@ const MODEL_KIND_LABELS: Record<"all" | ModelKind, string> = {
 	video: "Video",
 };
 
-/** A provider mark's initials: `amazon-bedrock` → `AB`, `anthropic` → `An`. */
-function providerInitials(providerId: string): string {
-	const words = providerId.split(/[-_\s.]+/).filter(word => word.length > 0);
-	if (words.length >= 2) return `${words[0]!.charAt(0)}${words[1]!.charAt(0)}`.toUpperCase();
-	const word = words[0] ?? providerId;
-	return `${word.charAt(0).toUpperCase()}${word.charAt(1)}`;
-}
-
 const PROVIDER_REFRESH_DEBOUNCE_MS = 120;
 const RECENT_LIMIT = 15;
 /** Accepted compaction limit input, shown beside the field: a scaled base, a fixed trigger, or a percentage. */
@@ -3458,7 +3451,7 @@ export class ModelHubComponent implements Component {
 					break;
 				case "provider": {
 					const providerId = entry.providerId ?? entry.label;
-					const mark = { text: providerInitials(providerId), seed: providerId };
+					const mark = providerMark(providerId);
 					if (entry.locked) {
 						const envVars = providerEntry(providerId)?.envVars ?? [];
 						scopes.push({