@oh-my-pi/pi-tui 18.4.2 → 18.4.4

package/src/overlays/rewind-selector.ts

@@ -28,13 +28,14 @@
 import type { AgentTool } from "@oh-my-pi/pi-agent-core";
 import {
 	type Component,
-	extractPrintableText,
+	Input,
 	matchesKey,
 	padding,
 	routeSgrMouseInput,
 	sliceByColumn,
 	type TUI,
 	truncateToWidth,
+	visibleWidth,
 } from "../index";
 import type { MessageRenderer } from "../chat/extension-types";
 import { recentTranscriptEntries, type TranscriptEntryLike as TranscriptEntry } from "../chat/transcript-entry";
@@ -56,6 +57,23 @@ import {
 	positionRail,
 	userTurnLabel,
 } from "../chat/transcript-outline";
+import type { TspPickerItem, TspPickerProps } from "@oh-my-pi/pi-wire";
+import { compact, node, span, text } from "../native/describe";
+import type { DescribeContext, NativeChild, NativeNode, NativeUiEvent } from "../native/node";
+import { actionHint, hintsRow, overlayCard } from "../native/overlay";
+import { CLOSE_ACTION, type PickerEvent, picker, pickerAction, pickerEvent, pickerQuery } from "../native/picker";
+import { isNativeRendering } from "../native/state";
+import {
+	collectBlocks,
+	EARLIER_TURNS_KEY,
+	earlierTurnsItem,
+	TIMELINE_COLUMNS,
+	TimelineItems,
+	targetCopy,
+	timelineItem,
+	turnItem,
+	turnPreview,
+} from "./copy-selector";
 
 /** One alternate branch at a divergence: its root and message path root → most-recent leaf. */
 export interface BranchVariantPath {
@@ -88,6 +106,10 @@ interface SiblingColumn {
 	targets: OutlineTarget[];
 	/** Short label for the column header: the branch's first user prompt. */
 	label: string;
+	/** Native list items for this column, built on first describe. */
+	nativeItems?: NativeNode[];
+	/** Picker catalogue while this column's tab is open: the main items, then this branch's. */
+	pickerItems?: { main: readonly TspPickerItem[]; items: TspPickerItem[] };
 }
 
 /** Blank columns between branch-strip columns. */
@@ -121,12 +143,26 @@ export class RewindSelectorComponent implements Component {
 	#entries: TranscriptEntry[];
 	/** True while older history is still unreplayed. */
 	#truncated = false;
+	/** Filter field while the filter prompt is open; undefined shows the full transcript. */
+	#filterInput: Input | undefined;
 	/** Filter query while the filter prompt is open; undefined shows the full transcript. */
-	#filter: string | undefined;
+	get #filter(): string | undefined {
+		return this.#filterInput?.getValue();
+	}
 	/** Main transcript rows from the last frame; the filter matches what is on screen. */
 	#mainRows: readonly (readonly string[])[] = [];
 	/** Lowercased plain text per rendered child row array (row arrays are cached, so identity is stable). */
 	#rowText = new WeakMap<readonly string[], string>();
+	/** Native filter haystack: lowercased turn text per main target (no rendered rows under TSP). */
+	#nativeTexts: { targets: OutlineTarget[]; texts: string[] } | undefined;
+	/** Last described root and the state it was built from. */
+	#native: { memo: string; targets: OutlineTarget[]; node: NativeNode } | undefined;
+	/** Main-path list items, rebuilt only when the replayed targets change. */
+	#nativeItems: { targets: OutlineTarget[]; truncated: boolean; items: NativeNode[] } | undefined;
+	/** Timeline picker items of the replayed main path. */
+	#pickerItems = new TimelineItems();
+	/** Last described picker and the state it was built from. */
+	#picker: { memo: string; targets: OutlineTarget[]; node: NativeNode } | undefined;
 
 	constructor(
 		entries: TranscriptEntry[],
@@ -239,6 +275,11 @@ export class RewindSelectorComponent implements Component {
 		const from = this.#slidePosition(now);
 		this.#slide = { from, to: variant, startedAt: now };
 		this.#activeVariant = variant;
+		// The camera slide is repaint-only; a native surface has no camera to move.
+		if (isNativeRendering()) {
+			this.deps.requestRender();
+			return;
+		}
 		this.#slideTimer ??= setInterval(() => {
 			if (!this.#slide || Date.now() - this.#slide.startedAt >= SLIDE_MS) this.#stopSlide();
 			this.deps.requestRender();
@@ -287,13 +328,7 @@ export class RewindSelectorComponent implements Component {
 			return;
 		}
 		if (matchesKey(data, "f")) {
-			// The filter must search the whole branch, not just the startup tail.
-			this.#loadFullHistory();
-			this.#filter = "";
-			this.#activeVariant = 0;
-			this.#siblingSelected = 0;
-			this.#stopSlide();
-			this.deps.requestRender();
+			this.#openFilter();
 			return;
 		}
 		if (matchesAppToolsExpand(data)) {
@@ -309,18 +344,11 @@ export class RewindSelectorComponent implements Component {
 			return;
 		}
 		if (matchesKey(data, "left")) {
-			if (this.#activeVariant > 0) this.#slideTo(this.#activeVariant - 1);
-			else this.#move(-1, target => target.isUserTurn);
+			this.#left();
 			return;
 		}
 		if (matchesKey(data, "right")) {
-			const columns = this.#stripColumns();
-			if (this.#activeVariant < columns.length) {
-				this.#siblingSelected = 0;
-				this.#slideTo(this.#activeVariant + 1);
-			} else if (this.#activeVariant === 0) {
-				this.#move(1, target => target.isUserTurn);
-			}
+			this.#right();
 			return;
 		}
 		if (data === "a" || data === "A") {
@@ -328,8 +356,7 @@ export class RewindSelectorComponent implements Component {
 			return;
 		}
 		if (matchesKey(data, "enter") || matchesKey(data, "return") || data === "\n") {
-			const target = this.#outlinedTarget();
-			if (target) this.deps.onSelect(target.entryId);
+			this.#selectOutlined();
 			return;
 		}
 		// Page/home/end/shift+arrow scrolling without moving the selection.
@@ -338,6 +365,49 @@ export class RewindSelectorComponent implements Component {
 		}
 	}
 
+	/** `f`: open the filter over the whole branch. */
+	#openFilter(): void {
+		// The filter must search the whole branch, not just the startup tail.
+		this.#loadFullHistory();
+		const input = new Input();
+		input.prompt = `${theme.fg("accent", "filter:")} `;
+		input.placeholder = "words…";
+		this.#filterInput = input;
+		this.#activeVariant = 0;
+		this.#siblingSelected = 0;
+		this.#stopSlide();
+		this.deps.requestRender();
+	}
+
+	/** Left: the previous branch at a fork, else the previous user turn. */
+	#left(): void {
+		if (this.#activeVariant > 0) this.#slideTo(this.#activeVariant - 1);
+		else this.#move(-1, target => target.isUserTurn);
+	}
+
+	/** Right: the next branch at a fork, else the next user turn. */
+	#right(): void {
+		const columns = this.#stripColumns();
+		if (this.#activeVariant < columns.length) {
+			this.#siblingSelected = 0;
+			this.#slideTo(this.#activeVariant + 1);
+		} else if (this.#activeVariant === 0) {
+			this.#move(1, target => target.isUserTurn);
+		}
+	}
+
+	/** Enter while filtering: rewind to the selection when it matches. */
+	#selectFiltered(): void {
+		const target = this.#filterMatches().includes(this.#selected) ? this.#targets[this.#selected] : undefined;
+		if (target) this.deps.onSelect(target.entryId);
+	}
+
+	/** Enter: rewind to the outlined turn (main path or the active branch column). */
+	#selectOutlined(): void {
+		const target = this.#outlinedTarget();
+		if (target) this.deps.onSelect(target.entryId);
+	}
+
 	#toggleExpanded(): void {
 		this.#expanded = !this.#expanded;
 		this.#builder.setExpanded(this.#expanded);
@@ -357,8 +427,7 @@ export class RewindSelectorComponent implements Component {
 			return;
 		}
 		if (matchesKey(data, "enter") || matchesKey(data, "return") || data === "\n") {
-			const target = this.#filterMatches().includes(this.#selected) ? this.#targets[this.#selected] : undefined;
-			if (target) this.deps.onSelect(target.entryId);
+			this.#selectFiltered();
 			return;
 		}
 		if (matchesAppToolsExpand(data)) {
@@ -375,17 +444,15 @@ export class RewindSelectorComponent implements Component {
 			this.#stepFiltered(1, userTurnsOnly);
 			return;
 		}
-		if (matchesKey(data, "backspace")) {
-			if (this.#filter!.length === 0) {
-				this.#closeFilter();
-				return;
-			}
-			this.#setFilter(this.#filter!.slice(0, -1));
+		const input = this.#filterInput!;
+		const before = input.getValue();
+		if (matchesKey(data, "backspace") && before.length === 0) {
+			this.#closeFilter();
 			return;
 		}
-		const printable = extractPrintableText(data);
-		if (printable) {
-			this.#setFilter(this.#filter! + printable);
+		if (input.handleInput(data)) {
+			if (input.getValue() !== before) this.#filterChanged();
+			else this.deps.requestRender();
 			return;
 		}
 		if (this.#browser.handleScrollKey(data)) {
@@ -395,13 +462,12 @@ export class RewindSelectorComponent implements Component {
 
 	/** Leave the filter, keeping the selected item outlined in the full transcript. */
 	#closeFilter(): void {
-		this.#filter = undefined;
+		this.#filterInput = undefined;
 		this.deps.requestRender();
 	}
 
-	/** Update the query; keep the selection when it still matches, else rest on the newest match above it. */
-	#setFilter(query: string): void {
-		this.#filter = query;
+	/** The query changed; keep the selection when it still matches, else rest on the newest match above it. */
+	#filterChanged(): void {
 		const matches = this.#filterMatches();
 		if (!matches.includes(this.#selected)) {
 			this.#selected = matches.findLast(index => index < this.#selected) ?? matches.at(-1) ?? this.#selected;
@@ -434,18 +500,31 @@ export class RewindSelectorComponent implements Component {
 				? new RegExp(`(?<![\\p{L}\\p{N}_])${RegExp.escape(word)}(?![\\p{L}\\p{N}_])`, "u")
 				: new RegExp(RegExp.escape(word), "u"),
 		);
+		if (isNativeRendering() && this.#nativeTexts?.targets !== this.#targets) {
+			this.#nativeTexts = {
+				targets: this.#targets,
+				// Turn text plus its commands and tool output, like the expanded rendered rows.
+				texts: this.#targets.map(target => {
+					const blocks = collectBlocks(target.entries);
+					const parts = [targetCopy(target, blocks).content, ...blocks.map(block => block.content)];
+					return parts.join("\n").toLowerCase();
+				}),
+			};
+		}
 		const matches: number[] = [];
 		for (let index = 0; index < this.#targets.length; index++) {
 			if (!this.#isMainSelectable(index)) continue;
 			const target = this.#targets[index]!;
-			const texts = this.#mainRows.slice(target.start, target.end).map(rows => {
-				let text = this.#rowText.get(rows);
-				if (text === undefined) {
-					text = Bun.stripANSI(rows.join("\n")).toLowerCase();
-					this.#rowText.set(rows, text);
-				}
-				return text;
-			});
+			const texts = isNativeRendering()
+				? [this.#nativeTexts?.texts[index] ?? ""]
+				: this.#mainRows.slice(target.start, target.end).map(rows => {
+						let text = this.#rowText.get(rows);
+						if (text === undefined) {
+							text = Bun.stripANSI(rows.join("\n")).toLowerCase();
+							this.#rowText.set(rows, text);
+						}
+						return text;
+					});
 			if (patterns.every(pattern => texts.some(text => pattern.test(text)))) matches.push(index);
 		}
 		return matches;
@@ -499,6 +578,341 @@ export class RewindSelectorComponent implements Component {
 		return this.#mainVisible?.[index] ?? true;
 	}
 
+	// ========================================================================
+	// Native
+	// ========================================================================
+
+	/** A `picker` is its own sheet: the backend mounts it in `layer`, over the transcript. */
+	nativeSheet(cx: DescribeContext): boolean {
+		return cx.supports("picker");
+	}
+
+	/** A branch tab click moves between the current path and its alternates, as Left/Right do. */
+	#showVariant(value: string | undefined): void {
+		const variant = Number(value);
+		if (!Number.isInteger(variant) || variant === this.#activeVariant) return;
+		if (variant < 0 || variant > this.#stripColumns().length) return;
+		this.#siblingSelected = 0;
+		if (variant === 0) {
+			this.#activeVariant = 0;
+			this.#stopSlide();
+			this.deps.requestRender();
+		} else {
+			this.#slideTo(variant);
+		}
+	}
+
+	/**
+	 * Picker pointer events: a row click outlines that turn, a second click
+	 * rewinds there (Enter); the action bar and tabs run their keys' paths.
+	 */
+	#handlePickerEvent(event: PickerEvent): void {
+		if (event.kind === "action") {
+			switch (event.act) {
+				case "tab":
+					this.#showVariant(event.value);
+					return;
+				case "rewind":
+					if (this.#filter === undefined) this.#selectOutlined();
+					else this.#selectFiltered();
+					return;
+				case "lateral":
+					// A click steps back a user turn, or on to the next branch (wrapping to the current path).
+					if (this.#filter !== undefined || this.#stripColumns().length === 0) this.#left();
+					else if (this.#activeVariant < this.#stripColumns().length) this.#right();
+					else this.#showVariant("0");
+					return;
+				case "filter":
+					this.#openFilter();
+					return;
+				case "earlier":
+					this.#loadFullHistory();
+					return;
+				case "close":
+					if (this.#filter === undefined) this.deps.onCancel();
+					else this.#closeFilter();
+					return;
+				case "clear":
+					this.#closeFilter();
+					return;
+				default:
+					return;
+			}
+		}
+		if (!this.#outline(event.item)) return;
+		this.deps.requestRender();
+		if (event.kind === "activate") {
+			if (this.#filter === undefined) this.#selectOutlined();
+			else this.#selectFiltered();
+		}
+	}
+
+	/** Outline the turn `id`: on the active branch tab, or on the main path (leaving the tab). */
+	#outline(id: string): boolean {
+		if (this.#activeVariant > 0) {
+			const targets = this.#stripColumns()[this.#activeVariant - 1]?.targets ?? [];
+			const index = targets.findIndex(target => target.turnId === id);
+			if (index >= 0) {
+				this.#siblingSelected = index;
+				return true;
+			}
+		}
+		const index = this.#targets.findIndex(target => target.turnId === id);
+		if (index < 0) return false;
+		if (this.#filter !== undefined && !this.#filterMatches().includes(index)) return false;
+		this.#selected = index;
+		this.#activeVariant = 0;
+		this.#siblingSelected = 0;
+		this.#stopSlide();
+		return true;
+	}
+
+	handleNativeEvent(event: NativeUiEvent): void {
+		const picked = pickerEvent(event);
+		if (picked) {
+			this.#handlePickerEvent(picked);
+			return;
+		}
+		if (event.type !== "select" && event.type !== "activate") return;
+		if (event.key === "branches") {
+			this.#showVariant(event.item);
+			return;
+		}
+		// A click on an item outlines it and rewinds there, as Enter would.
+		if (event.key === "list") {
+			if (event.item === EARLIER_TURNS_KEY) {
+				this.#loadFullHistory();
+				return;
+			}
+			const index = this.#targets.findIndex(target => target.turnId === event.item);
+			if (index < 0) return;
+			this.#selected = index;
+			this.#activeVariant = 0;
+			this.#siblingSelected = 0;
+			this.#stopSlide();
+		} else if (event.key === "branch" && this.#activeVariant > 0) {
+			const targets = this.#stripColumns()[this.#activeVariant - 1]?.targets ?? [];
+			const index = targets.findIndex(target => target.turnId === event.item);
+			if (index < 0) return;
+			this.#siblingSelected = index;
+		} else {
+			return;
+		}
+		this.deps.requestRender();
+		this.#selectOutlined();
+	}
+
+	describe(cx: DescribeContext): NativeNode {
+		return cx.supports("picker") ? this.#describePicker() : this.#describeCard();
+	}
+
+	/**
+	 * The `timeline` picker: one row per turn, the branch tabs at a fork, the
+	 * filter as the query, and the outlined turn's own transcript components
+	 * as the preview under the drop warning.
+	 */
+	#describePicker(): NativeNode {
+		const filter = this.#filter;
+		const memo = `${this.#selected}|${this.#activeVariant}|${this.#siblingSelected}|${this.#truncated}|${filter ?? "\0"}|${this.#filterInput?.getCursor()}`;
+		const cached = this.#picker;
+		if (cached?.memo === memo && cached.targets === this.#targets) return cached.node;
+
+		const main = this.#pickerItems.of(this.#targets);
+		const columns = filter === undefined ? this.#stripColumns() : [];
+		const column = columns[this.#activeVariant - 1];
+		const matches = filter === undefined ? undefined : this.#filterMatches();
+		const props: TspPickerProps = {
+			title: "Rewind",
+			subtitle: "Pick the point to continue from",
+			icon: "rewind",
+			noun: "turns",
+			size: "lg",
+			layout: "timeline",
+			preview: "side",
+			...pickerQuery(this.#filterInput ?? null),
+			placeholder: "Filter turns…",
+			columns: TIMELINE_COLUMNS,
+			items: main,
+			selected: this.#targets[this.#selected]?.turnId ?? null,
+			total: this.#targets.length,
+			empty: "Nothing to rewind to",
+		};
+		if (matches) {
+			props.order = matches.map(index => this.#targets[index]!.turnId);
+			if (!matches.includes(this.#selected)) props.selected = null;
+		}
+		if (columns.length > 0) {
+			props.tabs = [
+				{ id: "0", label: "Current" },
+				...columns.map((strip, index) => ({
+					id: String(index + 1),
+					label: strip.label.length > 32 ? `${strip.label.slice(0, 31)}…` : strip.label,
+				})),
+			];
+			props.tab = String(this.#activeVariant);
+		}
+		if (column) {
+			// The shared history above the fork, then the alternate branch.
+			if (column.pickerItems?.main !== main) {
+				column.pickerItems = { main, items: [...main, ...column.targets.map(timelineItem)] };
+			}
+			props.items = column.pickerItems.items;
+			props.order = [
+				...this.#targets.slice(0, this.#selected).map(target => target.turnId),
+				...column.targets.map(target => target.turnId),
+			];
+			props.selected = column.targets[this.#siblingSelected]?.turnId ?? null;
+		}
+		props.actions = compact([
+			pickerAction("rewind", "Rewind here", "enter", { primary: true }),
+			pickerAction("lateral", columns.length > 0 ? "Branches" : "User turns", ["left", "right"]),
+			filter === undefined ? pickerAction("filter", "Filter", "f") : undefined,
+			filter === undefined && this.#truncated ? pickerAction("earlier", "Earlier turns", "a") : undefined,
+			filter === undefined ? CLOSE_ACTION : { ...CLOSE_ACTION, label: "Show all" },
+		]);
+
+		const preview: NativeChild[] = [];
+		const outlined = column ? column.targets[this.#siblingSelected] : this.#targets[this.#selected];
+		if (outlined && props.selected !== null) {
+			// A user turn rewinds past itself (its text returns to the editor); anything else keeps itself.
+			const kept = column || this.#targets[this.#selected]!.isUserTurn ? this.#selected : this.#selected + 1;
+			const dropped = this.#targets.length - kept;
+			preview.push(
+				text(
+					dropped > 0
+						? [
+								span("Continue from here: everything below is dropped", "warning"),
+								span(`${theme.sep.dot}${dropped} turn${dropped === 1 ? "" : "s"}`, "dim"),
+							]
+						: [span("Continue from here: nothing below to drop", "warning")],
+					{ role: "omp.rewind.drop" },
+				),
+				...(column?.builder ?? this.#builder).container.children.slice(outlined.start, outlined.end),
+			);
+		}
+		const root = picker(props, preview);
+		this.#picker = { memo, targets: this.#targets, node: root };
+		return root;
+	}
+
+	#describeCard(): NativeNode {
+		const memo = `${this.#selected}|${this.#activeVariant}|${this.#siblingSelected}|${this.#truncated}|${this.#filter ?? "\0"}|${this.#filterInput?.getCursor()}`;
+		const cached = this.#native;
+		if (cached?.memo === memo && cached.targets === this.#targets) return cached.node;
+
+		const filter = this.#filter;
+		const children: NativeChild[] = [];
+		const allItems = this.#mainItems();
+		const columns = filter === undefined ? this.#stripColumns() : [];
+		const matches = filter === undefined ? undefined : this.#filterMatches();
+		if (filter !== undefined && matches) {
+			children.push(
+				this.#filterInput!,
+				node(
+					"list",
+					{
+						selected: matches.includes(this.#selected) ? (this.#targets[this.#selected]?.turnId ?? null) : null,
+						filter,
+						empty: `No items match "${filter}"`,
+						virtual: true,
+						max: 0.5,
+					},
+					matches.map(index => allItems[index + (this.#truncated ? 1 : 0)]!),
+					"list",
+				),
+			);
+		} else {
+			children.push(
+				node(
+					"list",
+					{
+						selected: this.#targets[this.#selected]?.turnId ?? null,
+						empty: "Nothing to rewind to",
+						virtual: true,
+						max: 0.5,
+					},
+					allItems,
+					"list",
+				),
+			);
+		}
+		if (columns.length > 0) {
+			children.push(
+				node(
+					"tabs",
+					{
+						items: [
+							{ id: "0", label: "current" },
+							...columns.map((column, index) => ({ id: String(index + 1), label: column.label })),
+						],
+						active: String(this.#activeVariant),
+					},
+					undefined,
+					"branches",
+				),
+			);
+			const column = columns[this.#activeVariant - 1];
+			if (column) {
+				column.nativeItems ??= column.targets.map(target => turnItem(target));
+				children.push(
+					node(
+						"list",
+						{ selected: column.targets[this.#siblingSelected]?.turnId ?? null, virtual: true, max: 0.4 },
+						column.nativeItems,
+						"branch",
+					),
+				);
+			}
+		}
+		const outlined = filter === undefined ? this.#outlinedTarget() : this.#targets[this.#selected];
+		if (outlined && (!matches || matches.includes(this.#selected))) {
+			const item = targetCopy(outlined, collectBlocks(outlined.entries));
+			children.push(
+				node("section", { head: [span(item.label, "strong")] }, [turnPreview(outlined, item.content)], "preview"),
+			);
+		}
+		const upDown = actionHint(["tui.select.up", "tui.select.down"], "step");
+		children.push(
+			hintsRow(
+				filter === undefined
+					? [
+							upDown,
+							{ keys: ["left", "right"], label: columns.length > 0 ? "branches" : "user turns" },
+							{ keys: ["f"], label: "filter" },
+							{ keys: ["enter"], label: "rewind" },
+							this.#truncated ? { keys: ["a"], label: "earlier turns" } : undefined,
+							actionHint("tui.select.cancel", "cancel"),
+						]
+					: [
+							upDown,
+							{ keys: ["left", "right"], label: "user turns" },
+							{ keys: ["enter"], label: "rewind" },
+							actionHint("tui.select.cancel", "show all"),
+						],
+			),
+		);
+		const root = overlayCard(
+			"omp.overlay.rewind",
+			[
+				span(`${theme.icon.rewind} `),
+				span("Rewind", "strong"),
+				span(`${theme.sep.dot}pick the point to continue from`, "dim"),
+			],
+			children,
+		);
+		this.#native = { memo, targets: this.#targets, node: root };
+		return root;
+	}
+
+	#mainItems(): NativeNode[] {
+		const cached = this.#nativeItems;
+		if (cached?.targets === this.#targets && cached.truncated === this.#truncated) return cached.items;
+		const items = this.#targets.map(target => turnItem(target));
+		if (this.#truncated) items.unshift(earlierTurnsItem);
+		this.#nativeItems = { targets: this.#targets, truncated: this.#truncated, items };
+		return items;
+	}
+
 	// ========================================================================
 	// Render
 	// ========================================================================
@@ -592,7 +1006,7 @@ export class RewindSelectorComponent implements Component {
 						: undefined,
 			},
 			footer: [
-				`${theme.fg("accent", "filter:")} ${query}${theme.fg("accent", "▏")}  ${count}  ${theme.fg("dim", keys)}`,
+				`${this.#filterInput!.render(visibleWidth(`filter: ${query}`) + 1)[0]}  ${count}  ${theme.fg("dim", keys)}`,
 			],
 		};
 	}

package/src/overlays/session-account-selector.ts

@@ -29,7 +29,7 @@ export class SessionAccountSelectorComponent extends OverlayPanel {
 		onSelect: (account: SessionPinAccount) => void,
 		onCancel: () => void,
 	) {
-		super(`Select a ${providerName} account for this session`);
+		super(`Select a ${providerName} account for this session`, "omp.overlay.session-account");
 		const accountsByValue = new Map<string, SessionPinAccount>();
 		const items: SelectItem[] = accounts.map(account => {
 			const value = String(account.credentialId);