@linxiraos/pi-tui 1.1.27 → 1.2.1

package/src/prompt/welcome.ts

@@ -2,45 +2,73 @@ import { APP_NAME } from "@linxiraos/pi-utils/dirs";
 import type { TspSpan } from "@linxiraos/pi-wire";
 import { formatDoubleTap, formatKeyHint, formatKeyHints, type KeyName } from "../app-keybindings";
 import { editorKey } from "../chrome/keybinding-hints";
+import { tuiText } from "../i18n";
 import { getKeybindings, type Keybinding } from "../keybindings";
-import { card, col, kbd, keyed, node, row, span, text } from "../native/describe";
-import type { DescribeContext, NativeChild, NativeNode, NativeUiEvent } from "../native/node";
-import { runTranscriptAction } from "../chat/transcript-actions";
-import { plainLine } from "../native/spans";
+import { card, col, keyed, node, row, span, text } from "../native/describe";
+import type { DescribeContext, NativeChild, NativeNode } from "../native/node";
+import { compactText, plainText } from "../native/spans";
 import { isNativeRendering } from "../native/state";
+import { isHyperlinkEnabled, urlHyperlink, urlLinkSpan } from "../render/hyperlink";
 import { TERMINAL } from "../terminal-capabilities";
 import { theme } from "../theme/theme";
 import type { Component } from "../tui";
-import { padding, replaceTabs, truncateToWidth, visibleWidth, wrapTextWithAnsi } from "../utils";
+import { padding, replaceTabs, visibleWidth, wrapTextWithAnsi } from "../utils";
 import tipsText from "./tips.txt" with { type: "text" };
 
-/** Tips embedded at build time, one per line; blanks dropped. Key placeholders
- *  (see {@link expandTipKeys}) stay raw until render time. */
-const TIPS: readonly string[] = tipsText
-	.split("\n")
-	.map(line => line.trim())
-	.filter(line => line.length > 0);
-
-/**
- * Fixed number of session rows in the welcome box so its height stays stable
- * across recent-session updates.
- */
-export const WELCOME_SESSION_SLOTS = 4;
-
-/**
- * Fixed number of LSP-server rows, for the same reason. Overflow is sliced so
- * the box height is constant regardless of how many servers a project has.
- */
-export const WELCOME_LSP_SLOTS = 4;
+/** Leading marker for a tip that pitches Tern: shown only while no TSP surface
+ *  is live, since a live one means the user is already in Tern. */
+const NO_TERN_TIP_MARKER = /^\[NO-TERN\]\s*/;
 
 /** Trailing marker that flags a tip as a "what's new" callout. Stripped before
  *  wrapping (with any preceding whitespace) and replaced by {@link NEW_TAG_TEXT}
  *  painted as a shimmering rainbow. Non-global so `.test` stays stateless. */
 const NEW_TIP_MARKER = /\s*\[NEW\]\s*$/;
 
+/** A tips.txt line. The structural markers stay in the source line — they drive
+ *  pool selection and the "[NEW]" weighting — while the user-visible text is
+ *  resolved from the host catalogue under `tipN`, N = the 1-based line number. */
+interface TipLine {
+	/** 1-based tips.txt line number; the catalogue key is `tip${line}`. */
+	readonly line: number;
+	/** Raw line, markers intact — what the weighted picker selects from. */
+	readonly raw: string;
+	/** English body with both markers stripped: the `tuiText` fallback. */
+	readonly english: string;
+	/** Pitches Tern; excluded from the TSP pool. */
+	readonly noTern: boolean;
+	/** "What's new" callout; carries the heavier selection weight. */
+	readonly isNew: boolean;
+}
+
+/** tips.txt lines embedded at build time; blanks dropped. Key placeholders
+ *  (see {@link expandTipKeys}) and markdown links stay raw until render time. */
+const TIP_LINES: readonly TipLine[] = tipsText.split("\n").flatMap((line, index) => {
+	const raw = line.trim();
+	if (raw.length === 0) return [];
+	return [
+		{
+			line: index + 1,
+			raw,
+			english: raw.replace(NO_TERN_TIP_MARKER, "").replace(NEW_TIP_MARKER, ""),
+			noTern: NO_TERN_TIP_MARKER.test(raw),
+			isNew: NEW_TIP_MARKER.test(raw),
+		},
+	];
+});
+
+/** Classic pool: every tip's raw line, so {@link pickWeightedTip} can still read
+ *  the trailing {@link NEW_TIP_MARKER} for its selection weight. */
+const TIPS: readonly string[] = TIP_LINES.map(tip => tip.raw);
+
+/** TSP pool: those marked {@link NO_TERN_TIP_MARKER} dropped. */
+const TSP_TIPS: readonly string[] = TIP_LINES.filter(tip => !tip.noTern).map(tip => tip.raw);
+
 /** Visible text rendered in place of {@link NEW_TIP_MARKER}. */
 const NEW_TAG_TEXT = "NEW!";
 
+/** Inline English for the nerdfont nudge tip (`welcomeNerdFontJoke`). */
+const NERDFONT_TIP = "Please use nerdfont 😭.";
+
 /** Milliseconds for one full hue rotation of the rainbow "NEW!" tag. */
 const NEW_GLOW_PERIOD_MS = 1500;
 
@@ -63,16 +91,33 @@ export function pickWeightedTip(tips: readonly string[], r: number): string {
 	return tips[tips.length - 1] ?? "";
 }
 
+/** A tip resolved through the host catalogue: the localised body plus the
+ *  structural "[NEW]" flag, which lives in tips.txt rather than the translated
+ *  text (so a translation never has to carry the marker). */
+interface ResolvedTip {
+	readonly text: string;
+	readonly isNew: boolean;
+}
+
+/** Localise a picked tip. `raw` is a {@link TIPS}/{@link TSP_TIPS} member (or the
+ *  nerdfont nudge); the catalogue is consulted live, so `/language` applies. */
+function resolveTip(raw: string): ResolvedTip {
+	if (raw === NERDFONT_TIP) return { text: tuiText("welcomeNerdFontJoke", NERDFONT_TIP), isNew: false };
+	const entry = TIP_LINES.find(tip => tip.raw === raw);
+	if (entry === undefined) return { text: raw, isNew: NEW_TIP_MARKER.test(raw) };
+	return { text: tuiText(`tip${entry.line}`, entry.english), isNew: entry.isNew };
+}
+
 type ColorEncoding = "ansi-16m" | "ansi-256";
 
-/** Paint each glyph of {@link NEW_TAG_TEXT} on a moving HSL rainbow. `phase`
- *  rotates the hue offset cyclically; successive renders with increasing phase
- *  shimmer, while a fixed phase yields a still rainbow. */
-function renderNewTag(phase: number, encoding: ColorEncoding): string {
+/** Paint each glyph of `tagText` on a moving HSL rainbow. `phase` rotates the
+ *  hue offset cyclically; successive renders with increasing phase shimmer,
+ *  while a fixed phase yields a still rainbow. */
+function renderNewTag(tagText: string, phase: number, encoding: ColorEncoding): string {
 	const bold = "\x1b[1m";
 	const reset = "\x1b[0m";
 	const wrapped = ((phase % 1) + 1) % 1;
-	const chars = [...NEW_TAG_TEXT];
+	const chars = [...tagText];
 	let out = bold;
 	let prev = "";
 	for (let i = 0; i < chars.length; i++) {
@@ -120,96 +165,114 @@ function expandTipKeys(tip: string): string {
 	});
 }
 
-export function renderWelcomeTip(tip: string, boxWidth: number, phase = 0): string[] {
-	const label = "Tip: ";
-	const labelWidth = visibleWidth(label);
-	const bodyBudget = boxWidth - labelWidth;
-	if (bodyBudget < 8) return [];
+/** Markdown-style links in tips.txt: `[Tern](https://scl.so/tern)` shows the label, linked to the URL. */
+const TIP_LINK = /\[([^\]]+)\]\(([^\s)]+)\)/g;
+
+/** Tip links as underlined OSC 8 labels, or `label (url)` where the terminal cannot link. */
+function linkTipText(tip: string): string {
+	const linkable = isHyperlinkEnabled();
+	return tip.replace(TIP_LINK, (_link, label: string, url: string) =>
+		linkable ? urlHyperlink(url, theme.underline(label)) : `${label} (${url})`,
+	);
+}
+
+/** The tip as native text: escapes dropped, links as `href` spans. */
+function tipSpans(tip: string): TspSpan[] {
+	const spans: TspSpan[] = [];
+	let cursor = 0;
+	for (const match of tip.matchAll(TIP_LINK)) {
+		const [link, label, url] = match;
+		if (match.index > cursor) spans.push(span(plainText(tip.slice(cursor, match.index))));
+		spans.push(urlLinkSpan(url, label));
+		cursor = match.index + link.length;
+	}
+	if (cursor < tip.length) spans.push(span(plainText(tip.slice(cursor))));
+	return spans;
+}
+
+/**
+ * The welcome tip as lines of at most `width` columns: the `welcomeTipLabel`
+ * label and the body wrapped together, with no indent, so the banner can center
+ * each line. `isNew` drives the rainbow "welcomeNewTag" suffix; it is passed in
+ * because the marker lives in tips.txt, not in the resolved body. `[]` when
+ * `width` leaves no room for a useful line.
+ */
+export function renderWelcomeTip(tip: string, width: number, phase = 0, isNew = NEW_TIP_MARKER.test(tip)): string[] {
+	const label = tuiText("welcomeTipLabel", "Tip: ");
+	if (width - visibleWidth(label) < 8) return [];
 
-	const isNew = NEW_TIP_MARKER.test(tip);
-	const body = expandTipKeys(isNew ? tip.replace(NEW_TIP_MARKER, "") : tip);
+	const body = linkTipText(expandTipKeys(isNew ? tip.replace(NEW_TIP_MARKER, "") : tip));
 
-	const wrappedBody = wrapTextWithAnsi(replaceTabs(body), bodyBudget);
-	if (wrappedBody.length === 0) return [];
+	// Trailing spaces left by the wrap would count toward the width the banner centers.
+	const wrapped = wrapTextWithAnsi(replaceTabs(`${label}${body}`), width).map(line => line.trimEnd());
+	if (wrapped.length === 0) return [];
 
 	// Pull both colors from the active theme so the line stays readable on light
 	// themes; the previous hardcoded `#b48cff` / `#9ccfff` pastels (plus a manual
 	// `\x1b[2m` dim on the body) dropped to ~1.5:1 contrast on a white background.
-	const continuationIndent = padding(labelWidth);
 	const styledLabel = theme.fg("customMessageLabel", label);
-
-	const lines = wrappedBody.map((line, index) => {
-		const styledBody = theme.fg("muted", line);
-		const content = index === 0 ? `${styledLabel}${styledBody}` : `${styledBody}`;
-		return theme.italic(content);
-	});
+	const lines = wrapped.map((line, index) =>
+		theme.italic(
+			index === 0 && line.startsWith(label)
+				? `${styledLabel}${theme.fg("muted", line.slice(label.length))}`
+				: theme.fg("muted", line),
+		),
+	);
 
 	if (isNew) {
-		// Append the rainbow tag to the final body line when it fits within the
-		// box; otherwise drop it onto its own indented continuation line so the
-		// styled glyphs never overflow or reflow the wrapped body.
+		// Append the rainbow tag to the final line when it fits; otherwise give it
+		// a line of its own so the styled glyphs never overflow the width.
 		const encoding: ColorEncoding = TERMINAL.trueColor ? "ansi-16m" : "ansi-256";
-		const tag = renderNewTag(phase, encoding);
-		const tagWidth = 1 + visibleWidth(NEW_TAG_TEXT); // 1 = space separator
+		const tagText = tuiText("welcomeNewTag", NEW_TAG_TEXT);
+		const tag = renderNewTag(tagText, phase, encoding);
+		const tagWidth = 1 + visibleWidth(tagText); // 1 = space separator
 		const lastLine = lines[lines.length - 1];
-		if (lastLine !== undefined && visibleWidth(lastLine) + tagWidth <= boxWidth) {
+		if (lastLine !== undefined && visibleWidth(lastLine) + tagWidth <= width) {
 			lines[lines.length - 1] = `${lastLine} ${tag}`;
 		} else {
-			lines.push(continuationIndent + tag);
+			lines.push(tag);
 		}
 	}
 
 	return lines;
 }
 
-export interface RecentSession {
-	name: string;
-	timeAgo: string;
-	/** Session file; a native click on the row resumes it. */
-	path?: string;
-}
-
-export interface LspServerInfo {
-	name: string;
-	status: "ready" | "error" | "connecting" | "available";
-	fileTypes: string[];
-}
-
 /**
- * Premium welcome screen with block-based ZETA logo and two-column layout.
+ * The session's welcome banner. In a terminal: the gradient logo beside the
+ * `zeta` wordmark with the version under it (the logo alone when the lockup does
+ * not fit) and the tip of the session (dropped below {@link TIP_MIN_COLUMNS}
+ * columns). Natively: a card with the same logo, wordmark, version and tip
+ * ({@link WelcomeComponent.describe}).
  */
 export class WelcomeComponent implements Component {
 	#animStart: number | null = null;
 	#animTimer: Timer | null = null;
 	#requestRender: (() => void) | null = null;
 	// Tip randomness is latched once so the tip is stable across renders, but
-	// the nerdfont-nag gate re-reads the live preset: the startup prepaint can
-	// run under the default "unicode" preset before settings resolve the real
-	// one, and a memoized nag would survive the switch to "nerd".
+	// the nerdfont-nag gate re-reads the live preset and the pool re-reads the
+	// live TSP state: the startup prepaint can run under the default "unicode"
+	// preset before settings resolve the real one, and an optimistic Tern start
+	// falls back to the classic renderer when `hello` never confirms.
 	#nagRoll: number | undefined;
 	#tipRoll: number | undefined;
 	// Render cache: the welcome box is the first transcript-area component, so
 	// returning a stable array reference keeps the whole frame prefix stable.
-	// Bypassed while the intro animation runs (every frame differs).
+	// Bypassed while the intro animation runs (every frame differs). The
+	// `#cachedLang` sentinel retires the cache when `/language` swaps the
+	// catalogue, so a live switch repaints instead of serving stale text.
 	#cachedWidth = -1;
 	#cachedLines: string[] | undefined;
-	#native: { tip: string | undefined; node: NativeNode } | undefined;
-
-	constructor(
-		private version: string,
-		private modelName: string = "",
-		private providerName: string = "",
-		private recentSessions: RecentSession[] = [],
-		/** Detected project servers; `null` means LSP is disabled and hides the section. */
-		private lspServers: LspServerInfo[] | null = [],
-	) {}
+	#cachedLang = "";
+	#native: { lang: string; tip: string | undefined; node: NativeNode } | undefined;
+
+	constructor(private version: string) {}
 	get tip(): string | undefined {
 		this.#nagRoll ??= Math.random();
 		this.#tipRoll ??= Math.random();
 		if (theme.getSymbolPreset() === "unicode" && this.#nagRoll < 0.1) {
-			return "Please use nerdfont 😭.";
+			return NERDFONT_TIP;
 		}
-		return pickWeightedTip(TIPS, this.#tipRoll) || undefined;
+		return pickWeightedTip(isNativeRendering() ? TSP_TIPS : TIPS, this.#tipRoll) || undefined;
 	}
 
 	invalidate(): void {
@@ -219,25 +282,23 @@ export class WelcomeComponent implements Component {
 	}
 
 	/**
-	 * A `card` (`zeta.welcome`) titled with the app version. The brand column
-	 * (`zeta.welcome.brand`: greeting and the terminal's builtin `zeta` mark, which
-	 * it animates) sits beside the info column (`zeta.welcome.info`: prompt-sigil
-	 * keycaps, LSP servers, recent sessions); the tip of the session closes the card. Roles
-	 * carry the look (gradient logo, type scale, column hairline); a "[NEW]" tip
+	 * A `card` (`zeta.welcome`) mirroring the terminal banner: the lockup
+	 * (`zeta.welcome.lockup`: the terminal's builtin `zeta` mark, which it animates,
+	 * beside the wordmark with the version under it) and the tip of the session.
+	 * Roles carry the look (gradient logo, type scale); a "[NEW]" tip
 	 * carries a terminal-clocked shimmering tag.
 	 */
 	describe(_cx: DescribeContext): NativeNode {
-		const tip = this.tip;
-		if (this.#native && this.#native.tip === tip) return this.#native.node;
-		const line = (spans: readonly TspSpan[], role?: string, key?: string): NativeNode =>
-			keyed(text(spans, { wrap: "none", truncate: "end", role }), key ?? role ?? "");
-		// Centered brand lines are short and fixed; the logo is multi-line art that must never truncate.
+		const lang = tuiText("welcomeBack", "Welcome back!");
+		const rawTip = this.tip;
+		const tip = rawTip === undefined ? undefined : resolveTip(rawTip);
+		if (this.#native && this.#native.lang === lang && this.#native.tip === tip?.text) return this.#native.node;
+		// Brand lines are short and fixed; never wrap or truncate them.
 		const art = (spans: readonly TspSpan[], role: string): NativeNode =>
 			keyed(text(spans, { wrap: "none", role }), role);
-		const brand = keyed(
-			col(
+		const lockupRow = keyed(
+			row(
 				[
-					art([span("Welcome back!", "strong")], "zeta.welcome.greeting"),
 					node(
 						"image",
 						{
@@ -249,115 +310,38 @@ export class WelcomeComponent implements Component {
 						undefined,
 						"logo",
 					),
-				],
-				{ align: "center", role: "zeta.welcome.brand" },
-			),
-			"brand",
-		);
-		const section = (key: string, label: string, rows: readonly NativeChild[]): NativeNode =>
-			keyed(
-				col([line([span(label, "dim")], "zeta.welcome.heading"), ...rows], {
-					gap: "xs",
-					role: `zeta.welcome.${key}`,
-				}),
-				key,
-			);
-		const shortcut = (key: string, label: string): NativeNode =>
-			keyed(row([kbd(key), line([span(label, "muted")])], { gap: "sm" }), label);
-		const info: NativeChild[] = [
-			line([span(this.version, "dim mono")], "zeta.welcome.version"),
-			section("tips", "Tips", [
-				shortcut("#", "prompt actions"),
-				shortcut("/", "commands"),
-				shortcut("!", "run bash"),
-				shortcut("$", "run python"),
-			]),
-		];
-		if (this.lspServers !== null) {
-			const lsp: NativeChild[] = [];
-			if (this.lspServers.length === 0) lsp.push(line([span("No LSP servers", "dim")], undefined, "none"));
-			for (const server of this.lspServers.slice(0, WELCOME_LSP_SLOTS)) {
-				const [symbol, token] =
-					server.status === "ready"
-						? (["status.enabled", "success"] as const)
-						: server.status === "available"
-							? (["status.enabled", "dim"] as const)
-							: server.status === "connecting"
-								? (["status.pending", "muted"] as const)
-								: (["status.error", "error"] as const);
-				lsp.push(
 					keyed(
-						row(
+						col(
 							[
-								text([span("●", token)], { role: "zeta.welcome.lsp-dot", title: server.status, aria: symbol }),
-								line([span(server.name)]),
-								...server.fileTypes
-									.slice(0, 3)
-									.map(type => node("badge", { text: type, role: "zeta.welcome.lsp-type" }, undefined, type)),
+								art([span("Z e t a", "strong")], "zeta.welcome.wordmark"),
+								art([span(`v${this.version}`, "dim mono")], "zeta.welcome.version"),
 							],
-							{ gap: "sm", role: "zeta.welcome.lsp-row" },
+							{ role: "zeta.welcome.mark" },
 						),
-						server.name,
-					),
-				);
-			}
-			info.push(section("lsp", "LSP servers", lsp));
-		}
-		const recents: NativeChild[] = [];
-		if (this.recentSessions.length === 0) recents.push(line([span("No recent sessions", "dim")], undefined, "none"));
-		for (const [index, session] of this.recentSessions.slice(0, WELCOME_SESSION_SLOTS).entries()) {
-			recents.push(
-				keyed(
-					row(
-						[
-							line([span(plainLine(session.name))], "zeta.welcome.session"),
-							line([span(session.timeAgo, "dim")], "zeta.welcome.age"),
-						],
-						{
-							gap: "md",
-							justify: "between",
-							role: "zeta.welcome.recent",
-							actions: session.path ? { click: "resume" } : undefined,
-							title: session.path ? `Resume ${plainLine(session.name)}` : undefined,
-						},
+						"mark",
 					),
-					`s${index}`,
-				),
-			);
-		}
-		info.push(section("recents", "Recent sessions", recents));
-		const body: NativeChild[] = [
-			keyed(
-				row([brand, keyed(col(info, { gap: "md", role: "zeta.welcome.info" }), "info")], {
-					align: "start",
-					wrap: true,
-					role: "zeta.welcome.grid",
-				}),
-				"grid",
+				],
+				{ align: "center", gap: "md", role: "zeta.welcome.lockup" },
 			),
-		];
+			"lockup",
+		);
+		const body: NativeChild[] = [lockupRow];
 		if (tip) {
-			const isNew = NEW_TIP_MARKER.test(tip);
-			const tipText = plainLine(expandTipKeys(isNew ? tip.replace(NEW_TIP_MARKER, "") : tip));
+			const tipText = compactText(tipSpans(expandTipKeys(tip.text)));
 			const tipRow: NativeChild[] = [
 				node("icon", { name: "lightbulb", role: "zeta.welcome.tip-icon" }),
 				text(tipText, { wrap: "word", role: "zeta.welcome.tip-text" }),
 			];
-			if (isNew) tipRow.push(node("shimmer", { text: "New", role: "zeta.welcome.new" }));
+			if (tip.isNew) {
+				tipRow.push(node("shimmer", { text: tuiText("welcomeNewTag", NEW_TAG_TEXT), role: "zeta.welcome.new" }));
+			}
 			body.push(node("row", { gap: "sm", align: "start", role: "zeta.welcome.tip" }, tipRow, "tip"));
 		}
-		// No head row or chevron: the card is the hero; the version sits in the info column.
+		// No head row or chevron: the card is the hero; the version sits under the wordmark.
 		const described = card({ role: "zeta.welcome" }, body);
-		this.#native = { tip, node: described };
+		this.#native = { lang, tip: tip?.text, node: described };
 		return described;
 	}
-	/** A click on a recent session resumes it. */
-	handleNativeEvent(event: NativeUiEvent): void {
-		if (event.type !== "action" || event.act !== "resume") return;
-		const index = Number(/\/s(\d+)$/.exec(event.key)?.[1]);
-		const path = this.recentSessions[index]?.path;
-		if (path) runTranscriptAction({ act: "resume", path });
-	}
 
 	/** The intro keeps the welcome block mutable; settling lets it retire to history. */
 	isTranscriptBlockFinalized(): boolean {
@@ -425,25 +409,10 @@ export class WelcomeComponent implements Component {
 		this.invalidate();
 	}
 
-	setModel(modelName: string, providerName: string): void {
-		this.modelName = modelName;
-		this.providerName = providerName;
-		this.invalidate();
-	}
-
-	setRecentSessions(sessions: RecentSession[]): void {
-		this.recentSessions = sessions;
-		this.invalidate();
-	}
-
-	setLspServers(servers: LspServerInfo[] | null): void {
-		this.lspServers = servers;
-		this.invalidate();
-	}
-
 	render(termWidth: number): readonly string[] {
 		const animating = this.#animStart != null;
-		if (!animating && this.#cachedLines && this.#cachedWidth === termWidth) {
+		const lang = tuiText("welcomeBack", "Welcome back!");
+		if (!animating && this.#cachedLines && this.#cachedWidth === termWidth && this.#cachedLang === lang) {
 			return this.#cachedLines;
 		}
 		const lines = this.#renderLines(termWidth);
@@ -453,223 +422,39 @@ export class WelcomeComponent implements Component {
 		} else {
 			this.#cachedLines = lines;
 			this.#cachedWidth = termWidth;
+			this.#cachedLang = lang;
 		}
 		return lines;
 	}
 
 	#renderLines(termWidth: number): string[] {
-		// Box dimensions - responsive with max width and small-terminal support
-		const maxWidth = 100;
-		const boxWidth = Math.min(maxWidth, Math.max(0, termWidth - 2));
-		if (boxWidth < 4) {
-			return [];
-		}
-		const dualContentWidth = boxWidth - 3; // 3 = │ + │ + │
-		const preferredLeftCol = 26;
-		const minLeftCol = 12; // logo width
-		const minRightCol = 20;
-		// Dynamic model/provider labels are truncated inside the fixed column.
-		// Letting them influence the responsive breakpoint changes the box height
-		// when authoritative session data replaces the empty prepaint labels.
-		const leftMinContentWidth = Math.max(minLeftCol, visibleWidth("Welcome back!"));
-		const desiredLeftCol = Math.max(
-			Math.min(preferredLeftCol, Math.max(minLeftCol, Math.floor(dualContentWidth * 0.35))),
-			leftMinContentWidth,
-		);
-		const dualLeftCol =
-			dualContentWidth >= minRightCol + 1
-				? Math.min(desiredLeftCol, dualContentWidth - minRightCol)
-				: Math.max(1, dualContentWidth - 1);
-		const dualRightCol = Math.max(1, dualContentWidth - dualLeftCol);
-		const showRightColumn = dualLeftCol >= leftMinContentWidth && dualRightCol >= minRightCol;
-		const leftCol = showRightColumn ? dualLeftCol : boxWidth - 2;
-		const rightCol = showRightColumn ? dualRightCol : 0;
-
-		// Logo: pick a frame from the intro animation if active, else the resting frame.
-		const logoColored = this.#currentLogoFrame();
-
-		// Left column - centered content
-		const leftLines = [
-			"",
-			this.#centerText(theme.bold("Welcome back!"), leftCol),
-			"",
-			...logoColored.map(l => this.#centerText(l, leftCol)),
-			"",
-			this.#centerText(theme.fg("muted", this.modelName), leftCol),
-			this.#centerText(theme.fg("borderMuted", this.providerName), leftCol),
-		];
-
-		// Right column separator
-		const separatorWidth = Math.max(0, rightCol - 2); // padding on each side
-		const separator = ` ${theme.fg("dim", theme.boxRound.horizontal.repeat(separatorWidth))}`;
-
-		// Recent sessions content
-		const sessionLines: string[] = [];
-		if (this.recentSessions.length === 0) {
-			sessionLines.push(` ${theme.fg("dim", "No recent sessions")}`);
-		} else {
-			// Reserve width for the bullet prefix (" • ") and the trailing " (timeAgo)"
-			// so the relative time is never the part that gets truncated. The name
-			// absorbs whatever space is left.
-			const bulletPrefix = ` ${theme.md.bullet} `;
-			const prefixWidth = visibleWidth(bulletPrefix);
-			for (const session of this.recentSessions.slice(0, WELCOME_SESSION_SLOTS)) {
-				const timeSuffixRaw = ` (${session.timeAgo})`;
-				const timeWidth = visibleWidth(timeSuffixRaw);
-				const nameBudget = Math.max(1, rightCol - prefixWidth - timeWidth);
-				const nameVis = visibleWidth(session.name);
-				const name = nameVis > nameBudget ? truncateToWidth(session.name, nameBudget) : session.name;
-				sessionLines.push(
-					`${theme.fg("dim", bulletPrefix)}${theme.fg("muted", name)}${theme.fg("dim", timeSuffixRaw)}`,
-				);
-			}
-		}
-		// Pad to the fixed slot count so the box height doesn't depend on session count.
-		while (sessionLines.length < WELCOME_SESSION_SLOTS) {
-			sessionLines.push("");
-		}
-
-		// Right column
-		const rightLines = [
-			` ${theme.bold(theme.fg("accent", "Tips"))}`,
-			` ${theme.fg("dim", "#")}${theme.fg("muted", " for prompt actions")}`,
-			` ${theme.fg("dim", "/")}${theme.fg("muted", " for commands")}`,
-			` ${theme.fg("dim", "!")}${theme.fg("muted", " to run bash")}`,
-			` ${theme.fg("dim", "$")}${theme.fg("muted", " to run python")}`,
-			...this.#renderLspSection(separator),
-			separator,
-			` ${theme.bold(theme.fg("accent", "Recent sessions"))}`,
-			...sessionLines,
-			"",
-		];
-
-		// Border characters (dim)
-		const hChar = theme.boxRound.horizontal;
-		const h = theme.fg("dim", hChar);
-		const v = theme.fg("dim", theme.boxRound.vertical);
-		const tl = theme.fg("dim", theme.boxRound.topLeft);
-		const tr = theme.fg("dim", theme.boxRound.topRight);
-		const bl = theme.fg("dim", theme.boxRound.bottomLeft);
-		const br = theme.fg("dim", theme.boxRound.bottomRight);
-
-		const lines: string[] = [];
-
-		// Top border with embedded title
-		const title = ` ${APP_NAME} v${this.version} `;
-		const titlePrefixRaw = hChar.repeat(3);
-		const titleStyled = theme.fg("dim", titlePrefixRaw) + theme.fg("muted", title);
-		const titleVisLen = visibleWidth(titlePrefixRaw) + visibleWidth(title);
-		const titleSpace = boxWidth - 2;
-		if (titleVisLen >= titleSpace) {
-			lines.push(tl + truncateToWidth(titleStyled, titleSpace) + tr);
-		} else {
-			const afterTitle = titleSpace - titleVisLen;
-			lines.push(tl + titleStyled + theme.fg("dim", hChar.repeat(afterTitle)) + tr);
-		}
-
-		// Content rows
-		const maxRows = showRightColumn ? Math.max(leftLines.length, rightLines.length) : leftLines.length;
-		for (let i = 0; i < maxRows; i++) {
-			const left = this.#fitToWidth(leftLines[i] ?? "", leftCol);
-			if (showRightColumn) {
-				const right = this.#fitToWidth(rightLines[i] ?? "", rightCol);
-				lines.push(v + left + v + right + v);
-			} else {
-				lines.push(v + left + v);
-			}
-		}
-		// Bottom border
-		if (showRightColumn) {
-			lines.push(bl + h.repeat(leftCol) + theme.fg("dim", theme.boxRound.teeUp) + h.repeat(rightCol) + br);
-		} else {
-			lines.push(bl + h.repeat(leftCol) + br);
-		}
-
-		// Randomly picked tip, rendered directly beneath the box.
-		// The banner centers every tip line, so the tip drops out entirely on
-		// narrow boxes rather than wrapping into unreadable slivers.
-		if (termWidth >= 16) lines.push(...this.#renderTip(boxWidth));
-
+		// Content keeps a column clear on each side; everything centers in the full width.
+		const room = termWidth - 2;
+		if (room < 4) return [];
+		const logo = this.#currentLogoFrame();
+		const version = theme.fg("dim", `v${this.version}`);
+		const lockupWidth = LOGO_WIDTH + LOCKUP_GAP + Math.max(WORDMARK_WIDTH, visibleWidth(version));
+		const art = room >= lockupWidth ? lockup(logo, version) : room >= LOGO_WIDTH ? logo : [];
+		const lines = centerBlock(art, termWidth);
+		const tip = termWidth >= TIP_MIN_COLUMNS ? this.#renderTip(room) : [];
+		if (tip.length > 0) lines.push("", ...tip.flatMap(line => centerBlock([line], termWidth)));
 		return lines;
 	}
 
-	/** Right-column LSP rows padded to a fixed height; empty when LSP is disabled. */
-	#renderLspSection(separator: string): string[] {
-		if (this.lspServers === null) return [];
-		const lspLines: string[] = [];
-		if (this.lspServers.length === 0) {
-			lspLines.push(` ${theme.fg("dim", "No LSP servers")}`);
-		} else {
-			for (const server of this.lspServers.slice(0, WELCOME_LSP_SLOTS)) {
-				const icon =
-					server.status === "ready"
-						? theme.styledSymbol("status.enabled", "success")
-						: server.status === "available"
-							? theme.styledSymbol("status.enabled", "dim")
-							: server.status === "connecting"
-								? theme.styledSymbol("status.pending", "muted")
-								: theme.styledSymbol("status.error", "error");
-				const exts = server.fileTypes.slice(0, 3).join(" ");
-				lspLines.push(` ${icon} ${theme.fg("muted", server.name)} ${theme.fg("dim", exts)}`);
-			}
-		}
-		// Pad to the fixed slot count so the box height doesn't depend on server count.
-		while (lspLines.length < WELCOME_LSP_SLOTS) {
-			lspLines.push("");
-		}
-		return [separator, ` ${theme.bold(theme.fg("accent", "LSP Servers"))}`, ...lspLines];
-	}
-
 	/**
-	 * Render the per-instance tip line: the `customMessageLabel`-themed `Tip:`
-	 * label followed by a `muted` body, the whole line italicized. Returns `[]`
-	 * when no tip is available or the box is too narrow to be useful.
+	 * The tip of the session wrapped to {@link TIP_MEASURE} columns (fewer when
+	 * `room` is narrower); `[]` when there is none or no room for it.
 	 */
-	#renderTip(boxWidth: number): string[] {
-		const tip = this.tip;
-		if (!tip) return [];
-		// A trailing "[NEW]" marker paints an animated rainbow "NEW!" tag. Derive
-		// its hue phase from wall-clock time so it shimmers across the welcome
-		// intro's re-render frames, then settles into a still rainbow once the box
+	#renderTip(room: number): string[] {
+		const raw = this.tip;
+		if (!raw) return [];
+		// A trailing "[NEW]" marker paints an animated rainbow tag. Derive its
+		// hue phase from wall-clock time so it shimmers across the welcome intro's
+		// re-render frames, then settles into a still rainbow once the banner
 		// caches its resting frame. Non-"[NEW]" tips ignore the phase entirely.
-		const phase = NEW_TIP_MARKER.test(tip) ? performance.now() / NEW_GLOW_PERIOD_MS : 0;
-		return renderWelcomeTip(tip, boxWidth, phase);
-	}
-
-	/** Center text within a given width */
-	#centerText(text: string, width: number): string {
-		const visLen = visibleWidth(text);
-		if (visLen >= width) {
-			return truncateToWidth(text, width);
-		}
-		const leftPad = Math.floor((width - visLen) / 2);
-		const rightPad = width - visLen - leftPad;
-		return padding(leftPad) + text + padding(rightPad);
-	}
-
-	/** Fit string to exact width with ANSI-aware truncation/padding */
-	#fitToWidth(str: string, width: number): string {
-		const visLen = visibleWidth(str);
-		if (visLen > width) {
-			const ellipsis = "…";
-			const ellipsisWidth = visibleWidth(ellipsis);
-			const maxWidth = Math.max(0, width - ellipsisWidth);
-			let truncated = "";
-			let currentWidth = 0;
-			let inEscape = false;
-			for (const char of str) {
-				if (char === "\x1b") inEscape = true;
-				if (inEscape) {
-					truncated += char;
-					if (char === "m") inEscape = false;
-				} else if (currentWidth < maxWidth) {
-					truncated += char;
-					currentWidth++;
-				}
-			}
-			return `${truncated}${ellipsis}`;
-		}
-		return str + padding(width - visLen);
+		const tip = resolveTip(raw);
+		const phase = tip.isNew ? performance.now() / NEW_GLOW_PERIOD_MS : 0;
+		return renderWelcomeTip(tip.text, Math.min(room, TIP_MEASURE), phase, tip.isNew);
 	}
 
 	/** Pick the logo frame for the current intro phase, or the resting frame. */
@@ -682,7 +467,46 @@ export class WelcomeComponent implements Component {
 }
 
 /** Block-grid brand mark shared by the welcome and setup surfaces. */
-export const ZETA_LOGO = ["█████████╗", "╚════████║", "   ████╔═╝", " ████╔═╝  ", "█████████╗", "╚════════╝"];
+export const ZETA_LOGO = ["████████████", "   ████████ ", "  ████████  ", " ████████▒▒▒", "████████████"];
+
+/** Columns of {@link ZETA_LOGO}. */
+const LOGO_WIDTH = Math.max(...ZETA_LOGO.map(row => row.length));
+
+/**
+ * The `Zeta` wordmark in half-blocks, set beside {@link ZETA_LOGO} from its
+ * second row: the `Z` is a solid zig-zag closed by a light step, `e`/`a` sit on
+ * the x-height, the `t` ascender rises above it, and the version takes the
+ * fifth row.
+ */
+const WORDMARK = ["███▀         ▄        ", " ██   ███▄  ███   ▄██▄", "▄▄██  █▄▄    █▄   █▄▄█"];
+
+/** Columns of {@link WORDMARK}. */
+const WORDMARK_WIDTH = Math.max(...WORDMARK.map(row => row.length));
+
+/** Columns between the logo and the wordmark. */
+const LOCKUP_GAP = 4;
+
+/** Widest a welcome tip wraps, so a long one stays a centered paragraph. */
+const TIP_MEASURE = 72;
+
+/** Narrowest terminal that still shows the tip; below it the banner is the logo alone. */
+const TIP_MIN_COLUMNS = 50;
+
+/** Logo frame `logo` with the wordmark beside it and `version` (styled) under the wordmark. */
+function lockup(logo: readonly string[], version: string): string[] {
+	const beside = ["", ...WORDMARK.map(row => theme.bold(theme.fg("text", row))), version];
+	return logo.map((row, index) => `${row}${padding(LOCKUP_GAP)}${beside[index] ?? ""}`);
+}
+
+/**
+ * `lines` indented as one block whose widest line is centered in `width`
+ * columns; pass a single line to center it on its own.
+ */
+function centerBlock(lines: readonly string[], width: number): string[] {
+	const widest = lines.reduce((max, line) => Math.max(max, visibleWidth(line)), 0);
+	const indent = padding(Math.max(0, Math.floor((width - widest) / 2)));
+	return lines.map(line => indent + line);
+}
 
 /** The block-grid brand mark as accent lines; `shimmer` declares the terminal-clocked shine sweep. */
 export function logoNode(lines: readonly string[], shimmer: boolean): NativeNode {