magus-cli 7.3.1 → 7.4.1

package/src/ui/renderers/cliToolRenderers.tsx

@@ -3,21 +3,53 @@ import type { CliTool } from "../../data/cli-tools.js";
 import {
 	type InstallMethod,
 	cliToolUninstall,
+	uninstallBlocker,
 } from "../../services/cli-tool-commands.js";
 import { formatCommand } from "../../utils/command-utils.js";
 import {
+	type CliToolEnterAction,
 	type CliToolRow,
+	cliToolEnterAction,
 	cliToolStatusText,
 	displayVersion,
 	isInstalled,
 } from "../adapters/cliToolsAdapter.js";
+import { rowLead } from "../components/primitives/index.js";
 import { type UiColor, theme } from "../theme.js";
 import type { StatusTone } from "./pluginStatusText.js";
+import { wrapText } from "./styleRenderers.js";
 
 // ─── Helpers ────────────────────────────────────────────────────────────────
 
+/** The Enter chip's background, by what Enter does. */
+const ENTER_CHIP_BG: Record<CliToolEnterAction["kind"], UiColor> = {
+	install: theme.colors.success,
+	update: theme.colors.warning,
+	"update-anyway": theme.colors.muted,
+	reinstall: theme.colors.muted,
+};
+
+/** "Status   ", "Update   " …: every detail label is this many columns. */
+const LABEL_COLS = 9;
+
+/**
+ * A detail value broken at SPACES, to the columns beside the label.
+ *
+ * Left to itself OpenTUI breaks a long line at the column edge, mid-token, and
+ * these values are commands and notes carrying paths. MEASURED at 150 columns
+ * (a 63-cell value column): `npm install -g --prefix /Users/…/node/v24.14.0
+ * @charmland/crush@latest` broke after `v24.14.`, with `0 @charmland/…` below
+ * — which reads as two paths, neither real. Broken here, every token that fits
+ * the column stays whole. One longer than the column (that same path at 100
+ * columns, where the value column is 38 cells) still has to break.
+ */
+function wrapValue(text: string, width: number): string {
+	return wrapText(text, width - LABEL_COLS).join("\n");
+}
+
 /**
- * The uninstall command as a line the reader can copy.
+ * One line of the conflict list: what happens to this install, and the command
+ * that would do it.
  *
  * This used to be a second, hand-written copy of the screen's own uninstall
  * switch — same shape, and already drifted (`pip uninstall` here,
@@ -25,16 +57,26 @@ import type { StatusTone } from "./pluginStatusText.js";
  * is not an executable. Now the renderer and the screen ask the same function,
  * so what is shown is what would run.
  *
- * Empty string when there is nothing to offer, which is what the caller
- * interpolates into the conflict list.
+ * An install magus cannot remove says so, rather than reading "remove" beside
+ * an empty command: the conflict fix will not offer to remove it either
+ * (R9.10), and a pane that promises what the dialog refuses is the same lie one
+ * step earlier.
  */
-function uninstallHint(
+function removalLine(
 	tool: CliTool,
 	method: InstallMethod,
 	brewFormula?: string,
-): string {
+): { mark: string; hint: string; removable: boolean } {
+	const blocker = uninstallBlocker(tool, method, brewFormula);
+	if (blocker !== null) {
+		return { mark: "  ⊘ stays  ", hint: `  ${blocker}`, removable: false };
+	}
 	const cmd = cliToolUninstall(tool, method, brewFormula);
-	return cmd ? formatCommand(cmd) : "";
+	return {
+		mark: "  ○ remove ",
+		hint: cmd ? `  ${formatCommand(cmd)}` : "",
+		removable: true,
+	};
 }
 
 function toneColor(tone: StatusTone): UiColor {
@@ -93,7 +135,7 @@ export function renderCliToolRow(
 	if (isSelected) {
 		return (
 			<text bg={theme.selection.bg} fg={theme.selection.fg}>
-				{" "}
+				{rowLead(true)}
 				{icon} {tool.displayName}
 				{versionText}
 				{methodTag}
@@ -104,7 +146,10 @@ export function renderCliToolRow(
 
 	return (
 		<text fg={theme.colors.text}>
-			<span fg={iconColor}> {icon}</span>
+			<span fg={iconColor}>
+				{rowLead(false)}
+				{icon}
+			</span>
 			<span fg={theme.colors.text}> {tool.displayName}</span>
 			{versionText ? (
 				<span fg={theme.colors.success}>{versionText}</span>
@@ -123,6 +168,8 @@ export function renderCliToolRow(
 
 export function renderCliToolDetail(
 	row: CliToolRow | undefined,
+	/** Usable detail-panel columns (`detailPanelWidth`); the scrollbox does not constrain width. */
+	width: number,
 ): React.ReactNode {
 	if (!row) {
 		return (
@@ -144,15 +191,13 @@ export function renderCliToolDetail(
 	const brewFormula = install?.brewFormula;
 	const hasConflict = allMethods.length > 1;
 	const state = status?.state;
+	const enter = cliToolEnterAction(row);
 
 	return (
-		<box flexDirection="column">
-			<box marginBottom={1}>
+		<box flexDirection="column" width={width}>
+			<box flexDirection="row" marginBottom={1}>
 				<text fg={theme.colors.info}>
-					<strong>
-						{"⚙ "}
-						{tool.displayName}
-					</strong>
+					<strong>{tool.displayName}</strong>
 				</text>
 				{state === "upgrade" ? <text fg={theme.colors.warning}> ⬆</text> : null}
 				{hasConflict ? <text fg={theme.colors.danger}> !</text> : null}
@@ -161,36 +206,58 @@ export function renderCliToolDetail(
 			<text fg={theme.colors.muted}>{tool.description}</text>
 
 			<box marginTop={1} flexDirection="column">
-				<box>
-					<text fg={theme.colors.muted}>{"Status   "}</text>
+				<box flexDirection="row">
+					<text fg={theme.colors.muted} flexShrink={0}>
+						{"Status   "}
+					</text>
 					{checking || !status ? (
-						<text fg={theme.colors.muted}>{"● Checking..."}</text>
+						<text fg={theme.colors.muted} flexShrink={0}>
+							{"● Checking..."}
+						</text>
 					) : state === "install" ? (
-						<text fg={theme.colors.muted}>{"○ Not installed"}</text>
+						<text fg={theme.colors.muted} flexShrink={0}>
+							{"○ Not installed"}
+						</text>
 					) : state === "upgrade" ? (
 						<text fg={theme.colors.warning}>{"● Update available"}</text>
 					) : state === "unknown" ? (
-						<text fg={theme.colors.warning}>{"? Unverified"}</text>
+						// A version that was read but cannot be checked for updates is
+						// still a version: say "installed", and let Why say the rest.
+						<text fg={theme.colors.warning}>
+							{status.installed
+								? "? Installed — not checked"
+								: "? Version unreadable"}
+						</text>
 					) : (
 						<text fg={theme.colors.success}>{"● Up to date"}</text>
 					)}
 				</box>
 				{state === "unknown" && status?.note ? (
-					<box>
-						<text fg={theme.colors.muted}>{"Why      "}</text>
-						<text fg={theme.colors.warning}>{status.note}</text>
+					<box flexDirection="row">
+						<text fg={theme.colors.muted} flexShrink={0}>
+							{"Why      "}
+						</text>
+						<text fg={theme.colors.warning} minWidth={0}>
+							{wrapValue(status.note, width)}
+						</text>
 					</box>
 				) : null}
 				{/* An upgrade that also takes the tool over from another installer. */}
 				{status?.adopted ? (
-					<box>
-						<text fg={theme.colors.muted}>{"Note     "}</text>
-						<text fg={theme.colors.warning}>{status.adopted}</text>
+					<box flexDirection="row">
+						<text fg={theme.colors.muted} flexShrink={0}>
+							{"Note     "}
+						</text>
+						<text fg={theme.colors.warning} minWidth={0}>
+							{status.adopted}
+						</text>
 					</box>
 				) : null}
 				{status?.installed ? (
-					<box>
-						<text fg={theme.colors.muted}>{"Version  "}</text>
+					<box flexDirection="row">
+						<text fg={theme.colors.muted} flexShrink={0}>
+							{"Version  "}
+						</text>
 						<text fg={theme.colors.text}>
 							<span fg={theme.colors.success}>
 								{displayVersion(status.installed)}
@@ -204,33 +271,51 @@ export function renderCliToolDetail(
 						</text>
 					</box>
 				) : status?.latest ? (
-					<box>
-						<text fg={theme.colors.muted}>{"Latest   "}</text>
+					<box flexDirection="row">
+						<text fg={theme.colors.muted} flexShrink={0}>
+							{"Latest   "}
+						</text>
 						<text fg={theme.colors.text}>{displayVersion(status.latest)}</text>
 					</box>
 				) : null}
 				{status?.pin ? (
-					<box>
-						<text fg={theme.colors.muted}>{"Pinned   "}</text>
+					<box flexDirection="row">
+						<text fg={theme.colors.muted} flexShrink={0}>
+							{"Pinned   "}
+						</text>
 						<text fg={theme.colors.text}>{displayVersion(status.pin)}</text>
 					</box>
 				) : null}
 				{installed && updateCommand ? (
-					<box>
-						<text fg={theme.colors.muted}>{"Update   "}</text>
-						<text fg={theme.colors.accent}>{formatCommand(updateCommand)}</text>
+					<box flexDirection="row">
+						<text fg={theme.colors.muted} flexShrink={0}>
+							{"Update   "}
+						</text>
+						<text fg={theme.colors.info} minWidth={0}>
+							{wrapValue(formatCommand(updateCommand), width)}
+						</text>
 					</box>
 				) : !installed && !checking ? (
-					<box>
-						<text fg={theme.colors.muted}>{"Install  "}</text>
-						<text fg={theme.colors.accent}>
-							{formatCommand(installCommand)}
+					<box flexDirection="row">
+						<text fg={theme.colors.muted} flexShrink={0}>
+							{"Install  "}
+						</text>
+						<text fg={theme.colors.info} minWidth={0}>
+							{wrapValue(formatCommand(installCommand), width)}
 						</text>
 					</box>
 				) : null}
-				<box>
-					<text fg={theme.colors.muted}>{"Website  "}</text>
-					<text fg={theme.colors.link}>{tool.website}</text>
+				<box flexDirection="row">
+					<text fg={theme.colors.muted} flexShrink={0}>
+						{"Website  "}
+					</text>
+					{/* A URL has no spaces, so word wrap cannot break it: it breaks anywhere,
+					    inside the width the label leaves. */}
+					<box flexGrow={1} minWidth={0}>
+						<text fg={theme.colors.info} wrapMode="char">
+							{tool.website}
+						</text>
+					</box>
 				</box>
 			</box>
 
@@ -251,75 +336,90 @@ export function renderCliToolDetail(
 							{"\n"}Keep one, remove the rest:
 						</text>
 					</box>
-					{allMethods.map((method, i) => (
-						<box key={method}>
-							<text fg={theme.colors.text}>
-								<span fg={i === 0 ? theme.colors.success : theme.colors.danger}>
-									{i === 0 ? "  ● keep  " : "  ○ remove "}
-								</span>
-								<span fg={theme.colors.warning}>{method}</span>
-								{i > 0 ? (
+					{allMethods.map((method, i) => {
+						if (i === 0) {
+							return (
+								<box key={method}>
+									<text fg={theme.colors.text}>
+										<span fg={theme.colors.success}>{"  ● keep  "}</span>
+										<span fg={theme.colors.warning}>{method}</span>
+										<span fg={theme.colors.dim}> (active in PATH)</span>
+									</text>
+								</box>
+							);
+						}
+						const line = removalLine(tool, method, brewFormula);
+						return (
+							<box key={method}>
+								<text fg={theme.colors.text}>
 									<span
-										fg={theme.colors.dim}
-									>{`  ${uninstallHint(tool, method, brewFormula)}`}</span>
-								) : (
-									<span fg={theme.colors.dim}> (active in PATH)</span>
-								)}
+										fg={
+											line.removable ? theme.colors.danger : theme.colors.muted
+										}
+									>
+										{line.mark}
+									</span>
+									<span fg={theme.colors.warning}>{method}</span>
+									<span fg={theme.colors.dim}>{line.hint}</span>
+								</text>
+							</box>
+						);
+					})}
+					{/* `c` is advertised only while it can remove something. With
+					    every install stuck it opens a dialog with no choices in
+					    it, and a key hint for a key that does nothing reads as a
+					    hung app. */}
+					{allMethods.some(
+						(m) => uninstallBlocker(tool, m, brewFormula) === null,
+					) ? (
+						<box flexDirection="row" marginTop={1}>
+							<text bg={theme.colors.danger} fg={theme.hints.fg}>
+								{" "}
+								c{" "}
 							</text>
+							<text fg={theme.colors.muted}> Resolve — pick which to keep</text>
 						</box>
-					))}
-					<box marginTop={1}>
-						<text bg={theme.colors.danger} fg={theme.hints.fg}>
-							{" "}
-							c{" "}
-						</text>
-						<text fg={theme.colors.muted}> Resolve — pick which to keep</text>
-					</box>
+					) : (
+						<box marginTop={1}>
+							<text fg={theme.colors.muted}>
+								magus can remove none of these. Take one out by hand, then r.
+							</text>
+						</box>
+					)}
 				</box>
 			) : null}
 
 			{/* Actions */}
+			{/* The words come from `cliToolEnterAction`, which the footer hint and
+			    the Enter handler read too — so all three name the same action. */}
 			<box marginTop={2} flexDirection="column">
-				{checking || !status ? null : !installed ? (
-					<box>
-						<text bg={theme.colors.success} fg={theme.hints.fg}>
-							{" "}
-							Enter{" "}
-						</text>
-						<text fg={theme.colors.muted}> Install</text>
-						<text fg={theme.colors.dim}> {formatCommand(installCommand)}</text>
-					</box>
-				) : state === "upgrade" ? (
-					<box>
-						<text bg={theme.colors.warning} fg={theme.hints.fg}>
-							{" "}
-							Enter{" "}
-						</text>
-						<text fg={theme.colors.muted}>
-							{" "}
-							Update
-							{status.target ? ` to ${displayVersion(status.target)}` : ""}
-						</text>
-					</box>
-				) : (
+				{enter ? (
 					<box flexDirection="column">
-						<box>
-							<text bg={theme.colors.muted} fg={theme.hints.fg}>
+						<box flexDirection="row">
+							<text bg={ENTER_CHIP_BG[enter.kind]} fg={theme.hints.fg}>
 								{" "}
 								Enter{" "}
 							</text>
-							<text fg={theme.colors.muted}>
-								{state === "unknown" ? " Update anyway" : " Reinstall"}
-							</text>
+							<text fg={theme.colors.muted}> {enter.detail}</text>
+							{enter.kind === "install" ? (
+								<text fg={theme.colors.dim}>
+									{" "}
+									{formatCommand(enter.command)}
+								</text>
+							) : null}
 						</box>
 						{/* The status warns that this command may not replace the
 						    running binary; the menu still offers it, as an explicit
 						    user action, and says so beside it. */}
-						{status.reason === "not-managed" && status.note ? (
-							<text fg={theme.colors.warning}>{`  ${status.note}`}</text>
+						{enter.kind === "update-anyway" &&
+						status?.reason === "not-managed" &&
+						status.note ? (
+							<text fg={theme.colors.warning}>
+								{wrapText(`  ${status.note}`, width).join("\n")}
+							</text>
 						) : null}
 					</box>
-				)}
+				) : null}
 			</box>
 		</box>
 	);

package/src/ui/renderers/gitignoreRenderers.tsx

@@ -1,5 +1,7 @@
 import type React from "react";
 import type { ResolvedRule, Violation } from "../../types/gitignore.js";
+import { rowLead } from "../components/primitives/SelectableRow.js";
+import { truncate } from "../text-width.js";
 import { theme } from "../theme.js";
 
 /**
@@ -11,69 +13,65 @@ export interface RuleRow {
 	violations: Violation[];
 }
 
-// Two color channels that never collide:
-//   • Badge color = direction (where the item ends up): green = tracked by git,
-//     reddish = ignored/dropped from git. Same on clean AND violation rows.
-//   • Filename color = severity: dim gray when fine, red when it's a violation.
-// No row background tints — red is reserved entirely for "needs attention".
-const TRACK_FG = theme.colors.success; // green — item ends up tracked by git
-const IGNORE_FG = theme.colors.danger; // reddish — item ends up ignored / dropped
-const VIOLATION_PATH_FG = theme.colors.danger; // bright red filename = look here
-const CLEAN_PATH_FG = theme.colors.muted;
-const SELECTED_BG = theme.surface.bg; // faint slate highlight for the cursor row
+// One colour channel, and it means one thing: something is wrong.
+//
+//   • The action word ("ignore" / "track") is what the rule INTENDS. An intended
+//     state is not a problem, so it is neutral on every row. It used to be red
+//     for "ignore" and green for "track", which put the danger hue on every
+//     ignore rule in the list — half the screen read as broken while nothing was.
+//   • A violation is what is wrong, so its path wears `danger`, and its action
+//     sits on a neutral chip so the row reads as "this needs fixing" at a glance
+//     without the chip's colour claiming anything the word does not.
+//   • A clean row stays quiet: action and path in `muted`/`text`.
+const INTENT_FG = theme.colors.muted;
+const CLEAN_PATH_FG = theme.colors.text;
+const VIOLATION_PATH_FG = theme.colors.danger;
+const CHIP_BG = theme.colors.dim;
+const CHIP_FG = theme.hints.fg;
 
-// Violation badges are solid chips so the required direction reads at a glance:
-// green chip = will be tracked, red chip = will be ignored/dropped.
-const TRACK_CHIP_BG = theme.colors.success;
-const IGNORE_CHIP_BG = theme.colors.danger;
-const CHIP_FG = theme.colors.text;
-
-// The only marker is the cursor: ▶ on the selected row, blank otherwise.
-// Action (track/ignore) is read from the badge word and, for clean items,
-// from the group the row sits under — so no per-row dot is needed.
-const MARKER_SELECTED = "▶";
-const MARKER_NONE = " ";
-
-// Layout: "  M action  path" — keep the prefix compact so the narrow terminal
+// Layout: "▌ action  path" — keep the prefix compact so the narrow terminal
 // case still has room for the path without wrapping.
 const MAX_PATH_LEN = 22;
 
-function truncatePath(p: string): string {
-	return p.length > MAX_PATH_LEN ? `${p.slice(0, MAX_PATH_LEN - 1)}…` : p;
-}
-
 export function renderRuleRow(
 	row: RuleRow,
 	isSelected: boolean,
 ): React.ReactNode {
 	const { rule, violations } = row;
-	const path = truncatePath(rule.pattern);
+	const path = truncate(rule.pattern, MAX_PATH_LEN);
 	const key = `${rule.action}:${rule.pattern}`;
-	// Badge text padded to a fixed width so paths line up in a column.
+	// Badge text padded to a fixed width, and drawn in the same padded cell on
+	// every row — chip or not — so paths line up in one column.
 	const badge = rule.action === "ignore" ? "ignore" : "track ";
-	const badgeFg = rule.action === "ignore" ? IGNORE_FG : TRACK_FG;
 	const suffix = violations.length > 1 ? ` +${violations.length - 1}` : "";
-	const rowBg = isSelected ? SELECTED_BG : undefined;
-	const marker = isSelected ? MARKER_SELECTED : MARKER_NONE;
-	const isViolation = violations.length > 0;
+	const lead = `${rowLead(isSelected)} `;
+
+	// The selection owns the colour channel, as on every other screen: the mark
+	// and the fill say where the cursor is, the words say the rest.
+	if (isSelected) {
+		return (
+			<text key={key} bg={theme.selection.bg} fg={theme.selection.fg}>
+				{lead}
+				{` ${badge} `}
+				{`  ${path}${suffix} `}
+			</text>
+		);
+	}
 
-	if (isViolation) {
-		// Solid badge chip + red filename. The chip color is the fix direction.
-		const chipBg = rule.action === "ignore" ? IGNORE_CHIP_BG : TRACK_CHIP_BG;
+	if (violations.length > 0) {
 		return (
-			<text key={key} bg={rowBg}>
-				<span fg={VIOLATION_PATH_FG}>{`  ${marker} `}</span>
-				<span bg={chipBg} fg={CHIP_FG}>{` ${badge} `}</span>
+			<text key={key} fg={theme.colors.text}>
+				<span fg={VIOLATION_PATH_FG}>{lead}</span>
+				<span bg={CHIP_BG} fg={CHIP_FG}>{` ${badge} `}</span>
 				<span fg={VIOLATION_PATH_FG}>{`  ${path}${suffix}`}</span>
 			</text>
 		);
 	}
 
-	// Clean row: flat colored badge word, dim path, no chip.
 	return (
-		<text key={key} bg={rowBg}>
-			<span fg={badgeFg}>{`  ${marker} `}</span>
-			<span fg={badgeFg}>{badge}</span>
+		<text key={key} fg={theme.colors.text}>
+			<span fg={INTENT_FG}>{lead}</span>
+			<span fg={INTENT_FG}>{` ${badge} `}</span>
 			<span fg={CLEAN_PATH_FG}>{`  ${path}`}</span>
 		</text>
 	);

package/src/ui/renderers/markdownRenderer.tsx

@@ -55,7 +55,7 @@ function inlineSpans(text: string, keyPrefix: string): React.ReactNode[] {
 		}
 		if (match[1]) {
 			nodes.push(
-				<span key={`${keyPrefix}-c${i}`} fg={theme.colors.link}>
+				<span key={`${keyPrefix}-c${i}`} fg={theme.colors.info}>
 					{match[1].slice(1, -1)}
 				</span>,
 			);
@@ -212,7 +212,7 @@ export function renderMarkdown(
 			while (i < lines.length && !/^\s*```/.test(lines[i])) {
 				const code = lines[i];
 				push(
-					<text key={`fc${i}`} fg={theme.colors.link}>
+					<text key={`fc${i}`} fg={theme.colors.info}>
 						{`  ${code}` || " "}
 					</text>,
 				);

package/src/ui/renderers/mcpRenderers.tsx

@@ -1,7 +1,15 @@
 import type React from "react";
 import type { McpServer } from "../../types/index.js";
+import { rowLead } from "../components/primitives/index.js";
 import { theme } from "../theme.js";
 
+/**
+ * The MCP-server glyph, shared with the Plugins screen's component chips.
+ * Single-width on purpose: `⚡` (U+26A1) is East-Asian-Width Wide, two cells,
+ * which shifted everything after it on the line.
+ */
+const SERVER_ICON = "⬢";
+
 // ─── List item types ───────────────────────────────────────────────────────────
 
 export type McpListItem =
@@ -16,8 +24,10 @@ export function renderMcpRow(
 	isSelected: boolean,
 ): React.ReactNode {
 	if (item.kind === "category") {
+		// A section heading, so the accent — as a word, never as the fill the
+		// cursor wears.
 		return (
-			<text fg={theme.selection.bg}>
+			<text fg={theme.colors.accent}>
 				<strong>
 					{"▸ "}
 					{item.label}
@@ -33,15 +43,19 @@ export function renderMcpRow(
 	if (isSelected) {
 		return (
 			<text bg={theme.selection.bg} fg={theme.selection.fg}>
-				{" "}
-				{icon} {server.name}{" "}
+				{rowLead(true)}
+				{icon} {server.name}
+				{server.requiresConfig ? " ⚙" : ""}{" "}
 			</text>
 		);
 	}
 
 	return (
 		<text fg={theme.colors.text}>
-			<span fg={iconColor}>{icon}</span>
+			<span fg={iconColor}>
+				{rowLead(false)}
+				{icon}
+			</span>
 			<span fg={theme.colors.text}> {server.name}</span>
 			{server.requiresConfig ? <span fg={theme.colors.warning}> ⚙</span> : null}
 		</text>
@@ -75,10 +89,10 @@ export function renderMcpDetail(
 
 	return (
 		<box flexDirection="column">
-			<box marginBottom={1}>
+			<box flexDirection="row" marginBottom={1}>
 				<text fg={theme.colors.info}>
 					<strong>
-						{"⚡ "}
+						{`${SERVER_ICON} `}
 						{server.name}
 					</strong>
 				</text>
@@ -90,7 +104,7 @@ export function renderMcpDetail(
 			<text fg={theme.colors.muted}>{server.description}</text>
 
 			<box marginTop={1} flexDirection="column">
-				<box>
+				<box flexDirection="row">
 					<text fg={theme.colors.muted}>{"Status "}</text>
 					{isInstalled ? (
 						<text fg={theme.colors.success}>{"● Installed"}</text>
@@ -98,25 +112,25 @@ export function renderMcpDetail(
 						<text fg={theme.colors.muted}>{"○ Not installed"}</text>
 					)}
 				</box>
-				<box>
+				<box flexDirection="row">
 					<text fg={theme.colors.muted}>{"Type "}</text>
 					<text fg={theme.colors.text}>
 						{server.type === "http" ? "HTTP" : "Command"}
 					</text>
 				</box>
 				{server.type === "http" ? (
-					<box>
+					<box flexDirection="row">
 						<text fg={theme.colors.muted}>{"URL "}</text>
-						<text fg={theme.colors.link}>{server.url}</text>
+						<text fg={theme.colors.info}>{server.url}</text>
 					</box>
 				) : (
-					<box>
+					<box flexDirection="row">
 						<text fg={theme.colors.muted}>{"Command "}</text>
 						<text fg={theme.colors.info}>{server.command}</text>
 					</box>
 				)}
 				{server.requiresConfig ? (
-					<box>
+					<box flexDirection="row">
 						<text fg={theme.colors.muted}>{"Config "}</text>
 						<text fg={theme.colors.warning}>
 							{server.configFields?.length ?? 0} fields required
@@ -127,7 +141,7 @@ export function renderMcpDetail(
 
 			<box marginTop={2}>
 				{isInstalled ? (
-					<box>
+					<box flexDirection="row">
 						<text bg={theme.colors.danger} fg={theme.hints.fg}>
 							{" "}
 							Enter{" "}
@@ -135,7 +149,7 @@ export function renderMcpDetail(
 						<text fg={theme.colors.muted}> Remove server</text>
 					</box>
 				) : (
-					<box>
+					<box flexDirection="row">
 						<text bg={theme.colors.success} fg={theme.hints.fg}>
 							{" "}
 							Enter{" "}