claudeup 4.17.0 → 4.19.0

package/src/services/skillsmp-client.js

@@ -7,10 +7,28 @@
  * - GitHub Tree API with ETag caching
  * - Recommended skills list
  */
-// TODO: Update to production URL after Firebase deploy
+// Deployed `skills` Gen2 Cloud Function (project claudish-6da10, us-central1).
+// Firebase keeps this cloudfunctions.net alias stable for the function.
 const SKILLS_API_BASE = process.env.SKILLS_API_URL || "https://us-central1-claudish-6da10.cloudfunctions.net/skills";
 /**
- * Search skills across all sources (SkillsMP keyword + AI search)
+ * Thrown when the skills API is unreachable or returns a non-OK status.
+ * Lets callers distinguish "search service is down" from "no skills matched",
+ * which a bare `[]` return cannot express.
+ */
+export class SkillsApiError extends Error {
+    status;
+    constructor(message, status) {
+        super(message);
+        this.status = status;
+        this.name = "SkillsApiError";
+    }
+}
+/**
+ * Search skills across all sources (SkillsMP keyword + AI search).
+ *
+ * Throws {@link SkillsApiError} on transport/HTTP failure so the caller can
+ * surface a distinct "search unavailable" state. An empty array means the
+ * query genuinely matched nothing.
  */
 export async function searchSkills(query, options) {
     const params = new URLSearchParams({ q: query });
@@ -18,18 +36,20 @@ export async function searchSkills(query, options) {
         params.set("page", String(options.page));
     if (options?.limit)
         params.set("limit", String(options.limit));
+    let res;
     try {
-        const res = await fetch(`${SKILLS_API_BASE}/search?${params}`, {
+        res = await fetch(`${SKILLS_API_BASE}/search?${params}`, {
             signal: AbortSignal.timeout(12000),
         });
-        if (!res.ok)
-            return [];
-        const data = (await res.json());
-        return data.skills || [];
     }
-    catch {
-        return [];
+    catch (cause) {
+        throw new SkillsApiError(`Skills search request failed: ${cause instanceof Error ? cause.message : String(cause)}`);
+    }
+    if (!res.ok) {
+        throw new SkillsApiError(`Skills search returned HTTP ${res.status}`, res.status);
     }
+    const data = (await res.json());
+    return data.skills || [];
 }
 /**
  * Fetch skills from a specific GitHub repo (via our proxy)

package/src/services/skillsmp-client.ts

@@ -8,7 +8,8 @@
  * - Recommended skills list
  */
 
-// TODO: Update to production URL after Firebase deploy
+// Deployed `skills` Gen2 Cloud Function (project claudish-6da10, us-central1).
+// Firebase keeps this cloudfunctions.net alias stable for the function.
 const SKILLS_API_BASE =
 	process.env.SKILLS_API_URL || "https://us-central1-claudish-6da10.cloudfunctions.net/skills";
 
@@ -31,7 +32,26 @@ export interface RepoSkillResult {
 }
 
 /**
- * Search skills across all sources (SkillsMP keyword + AI search)
+ * Thrown when the skills API is unreachable or returns a non-OK status.
+ * Lets callers distinguish "search service is down" from "no skills matched",
+ * which a bare `[]` return cannot express.
+ */
+export class SkillsApiError extends Error {
+	constructor(
+		message: string,
+		readonly status?: number,
+	) {
+		super(message);
+		this.name = "SkillsApiError";
+	}
+}
+
+/**
+ * Search skills across all sources (SkillsMP keyword + AI search).
+ *
+ * Throws {@link SkillsApiError} on transport/HTTP failure so the caller can
+ * surface a distinct "search unavailable" state. An empty array means the
+ * query genuinely matched nothing.
  */
 export async function searchSkills(
 	query: string,
@@ -41,16 +61,26 @@ export async function searchSkills(
 	if (options?.page) params.set("page", String(options.page));
 	if (options?.limit) params.set("limit", String(options.limit));
 
+	let res: Response;
 	try {
-		const res = await fetch(`${SKILLS_API_BASE}/search?${params}`, {
+		res = await fetch(`${SKILLS_API_BASE}/search?${params}`, {
 			signal: AbortSignal.timeout(12000),
 		});
-		if (!res.ok) return [];
-		const data = (await res.json()) as { skills: SkillSearchResult[] };
-		return data.skills || [];
-	} catch {
-		return [];
+	} catch (cause) {
+		throw new SkillsApiError(
+			`Skills search request failed: ${cause instanceof Error ? cause.message : String(cause)}`,
+		);
 	}
+
+	if (!res.ok) {
+		throw new SkillsApiError(
+			`Skills search returned HTTP ${res.status}`,
+			res.status,
+		);
+	}
+
+	const data = (await res.json()) as { skills?: SkillSearchResult[] };
+	return data.skills || [];
 }
 
 /**

package/src/types/gitignore.ts

@@ -6,7 +6,7 @@
 
 export type RuleAction = "ignore" | "track";
 
-export type Tier = "builtin" | "global" | "project";
+export type Tier = "builtin" | "global" | "project" | "profile";
 
 /** A user-authored manifest, deserialized from JSON. */
 export interface GitignoreManifest {

package/src/ui/App.js

@@ -5,7 +5,7 @@ import fs from "node:fs";
 import { AppProvider, useApp, useNavigation, useModal, } from "./state/AppContext.js";
 import { DimensionsProvider, useDimensions, } from "./state/DimensionsContext.js";
 import { ModalContainer } from "./components/modals/index.js";
-import { PluginsScreen, McpScreen, McpRegistryScreen, SettingsScreen, CliToolsScreen, ModelSelectorScreen, ProfilesScreen, SkillsScreen, GitignoreScreen, } from "./screens/index.js";
+import { PluginsScreen, McpScreen, McpRegistryScreen, SettingsScreen, CliToolsScreen, ModelSelectorScreen, ProfilesScreen, SkillsScreen, GitignoreScreen, AliasScreen, } from "./screens/index.js";
 import { checkGitignore } from "../services/gitignore-prerun.js";
 import { loadGitignoreState, applyAllSafeFixes, } from "../services/gitignore-service.js";
 import { useGitignoreModal } from "./hooks/useGitignoreModal.js";
@@ -45,13 +45,15 @@ function Router() {
             return _jsx(SkillsScreen, {});
         case "gitignore":
             return _jsx(GitignoreScreen, {});
+        case "alias":
+            return _jsx(AliasScreen, {});
         default:
             return _jsx(PluginsScreen, {});
     }
 }
 /**
  * GlobalKeyHandler Component
- * Handles global keyboard shortcuts (1-5, Tab, Escape, q, ?, Shift+D)
+ * Handles global keyboard shortcuts (1-8, Tab, Escape, q, Ctrl+C, ?, Shift+D)
  * Does not render anything (returns null)
  */
 function GlobalKeyHandler({ onDebugToggle, onExit, }) {
@@ -86,7 +88,7 @@ function GlobalKeyHandler({ onDebugToggle, onExit, }) {
         // Don't handle keys when modal is open or searching
         if (state.modal || state.isSearching)
             return;
-        // Global navigation shortcuts (1-7) - include mcp-registry as it's a sub-screen of mcp
+        // Global navigation shortcuts (1-8) - include mcp-registry as it's a sub-screen of mcp
         const isTopLevel = [
             "plugins",
             "mcp",
@@ -97,6 +99,7 @@ function GlobalKeyHandler({ onDebugToggle, onExit, }) {
             "profiles",
             "skills",
             "gitignore",
+            "alias",
         ].includes(state.currentRoute.screen);
         if (isTopLevel) {
             if (input === "1")
@@ -113,6 +116,8 @@ function GlobalKeyHandler({ onDebugToggle, onExit, }) {
                 navigateToScreen("cli-tools");
             else if (input === "7")
                 navigateToScreen("gitignore");
+            else if (input === "8")
+                navigateToScreen("alias");
             // Tab navigation cycling
             if (key.tab) {
                 const screens = [
@@ -123,6 +128,7 @@ function GlobalKeyHandler({ onDebugToggle, onExit, }) {
                     "profiles",
                     "cli-tools",
                     "gitignore",
+                    "alias",
                 ];
                 const currentIndex = screens.indexOf(state.currentRoute.screen);
                 if (currentIndex !== -1) {
@@ -133,18 +139,26 @@ function GlobalKeyHandler({ onDebugToggle, onExit, }) {
                 }
             }
         }
-        // Escape/q to go back or exit
-        if (key.escape || input === "q") {
+        // q or Ctrl+C quits from anywhere — no need to bounce to home first.
+        if (input === "q" || (key.ctrl && input === "c")) {
+            onExit();
+            return;
+        }
+        // Escape goes back: registry → mcp, any other tab → plugins home,
+        // already-home → exit. But when a screen has a focused sub-view open
+        // (e.g. the Alias flag-detail editor), that sub-view owns Escape and
+        // backs out to itself — don't let the global handler jump to home.
+        // Scoped to the Escape branch ONLY so q/Ctrl+C still quit from anywhere.
+        if (key.escape) {
+            if (state.detailActive)
+                return;
             if (state.currentRoute.screen === "plugins") {
-                // On home screen, exit immediately
                 onExit();
             }
             else if (state.currentRoute.screen === "mcp-registry") {
-                // Go back to MCP from registry
                 navigateToScreen("mcp");
             }
             else {
-                // Go back to plugins (home)
                 navigateToScreen("plugins");
             }
         }
@@ -153,12 +167,13 @@ function GlobalKeyHandler({ onDebugToggle, onExit, }) {
             modal.message("claudeup Help", `Navigation
   ↑/↓ or j/k    Move selection
   Enter         Select / Toggle
-  Escape or q   Back / Quit
+  Escape        Back (to home)
+  q / Ctrl+C    Quit (from anywhere)
   ?             This help
 
 Quick Navigation
-  1  Plugins      4  Settings    7  Gitignore
-  2  Skills       5  Profiles
+  1  Plugins      4  Settings    7  Git State
+  2  Skills       5  Profiles    8  Alias
   3  MCP Servers  6  CLI Tools
 
 Plugin Actions

package/src/ui/App.tsx

@@ -22,6 +22,7 @@ import {
 	ProfilesScreen,
 	SkillsScreen,
 	GitignoreScreen,
+	AliasScreen,
 } from "./screens/index.js";
 import type { Screen } from "./state/types.js";
 import { checkGitignore } from "../services/gitignore-prerun.js";
@@ -79,6 +80,8 @@ function Router() {
 			return <SkillsScreen />;
 		case "gitignore":
 			return <GitignoreScreen />;
+		case "alias":
+			return <AliasScreen />;
 		default:
 			return <PluginsScreen />;
 	}
@@ -86,7 +89,7 @@ function Router() {
 
 /**
  * GlobalKeyHandler Component
- * Handles global keyboard shortcuts (1-5, Tab, Escape, q, ?, Shift+D)
+ * Handles global keyboard shortcuts (1-8, Tab, Escape, q, Ctrl+C, ?, Shift+D)
  * Does not render anything (returns null)
  */
 function GlobalKeyHandler({
@@ -129,7 +132,7 @@ function GlobalKeyHandler({
 		// Don't handle keys when modal is open or searching
 		if (state.modal || state.isSearching) return;
 
-		// Global navigation shortcuts (1-7) - include mcp-registry as it's a sub-screen of mcp
+		// Global navigation shortcuts (1-8) - include mcp-registry as it's a sub-screen of mcp
 		const isTopLevel = [
 			"plugins",
 			"mcp",
@@ -140,6 +143,7 @@ function GlobalKeyHandler({
 			"profiles",
 			"skills",
 			"gitignore",
+			"alias",
 		].includes(state.currentRoute.screen);
 
 		if (isTopLevel) {
@@ -150,6 +154,7 @@ function GlobalKeyHandler({
 			else if (input === "5") navigateToScreen("profiles");
 			else if (input === "6") navigateToScreen("cli-tools");
 			else if (input === "7") navigateToScreen("gitignore");
+			else if (input === "8") navigateToScreen("alias");
 
 			// Tab navigation cycling
 			if (key.tab) {
@@ -161,6 +166,7 @@ function GlobalKeyHandler({
 					"profiles",
 					"cli-tools",
 					"gitignore",
+					"alias",
 				];
 				const currentIndex = screens.indexOf(
 					state.currentRoute.screen as Screen,
@@ -174,16 +180,24 @@ function GlobalKeyHandler({
 			}
 		}
 
-		// Escape/q to go back or exit
-		if (key.escape || input === "q") {
+		// q or Ctrl+C quits from anywhere — no need to bounce to home first.
+		if (input === "q" || (key.ctrl && input === "c")) {
+			onExit();
+			return;
+		}
+
+		// Escape goes back: registry → mcp, any other tab → plugins home,
+		// already-home → exit. But when a screen has a focused sub-view open
+		// (e.g. the Alias flag-detail editor), that sub-view owns Escape and
+		// backs out to itself — don't let the global handler jump to home.
+		// Scoped to the Escape branch ONLY so q/Ctrl+C still quit from anywhere.
+		if (key.escape) {
+			if (state.detailActive) return;
 			if (state.currentRoute.screen === "plugins") {
-				// On home screen, exit immediately
 				onExit();
 			} else if (state.currentRoute.screen === "mcp-registry") {
-				// Go back to MCP from registry
 				navigateToScreen("mcp");
 			} else {
-				// Go back to plugins (home)
 				navigateToScreen("plugins");
 			}
 		}
@@ -195,12 +209,13 @@ function GlobalKeyHandler({
 				`Navigation
   ↑/↓ or j/k    Move selection
   Enter         Select / Toggle
-  Escape or q   Back / Quit
+  Escape        Back (to home)
+  q / Ctrl+C    Quit (from anywhere)
   ?             This help
 
 Quick Navigation
-  1  Plugins      4  Settings    7  Gitignore
-  2  Skills       5  Profiles
+  1  Plugins      4  Settings    7  Git State
+  2  Skills       5  Profiles    8  Alias
   3  MCP Servers  6  CLI Tools
 
 Plugin Actions

package/src/ui/components/TabBar.js

@@ -6,7 +6,8 @@ const TABS = [
     { key: "4", label: "Settings", screen: "settings" },
     { key: "5", label: "Profiles", screen: "profiles" },
     { key: "6", label: "CLI", screen: "cli-tools" },
-    { key: "7", label: "Gitignore", screen: "gitignore" },
+    { key: "7", label: "Git State", screen: "gitignore" },
+    { key: "8", label: "Alias", screen: "alias" },
 ];
 export function TabBar({ currentScreen }) {
     return (_jsx("box", { flexDirection: "row", gap: 0, children: TABS.map((tab, index) => {

package/src/ui/components/TabBar.tsx

@@ -14,7 +14,8 @@ const TABS: Tab[] = [
 	{ key: "4", label: "Settings", screen: "settings" },
 	{ key: "5", label: "Profiles", screen: "profiles" },
 	{ key: "6", label: "CLI", screen: "cli-tools" },
-	{ key: "7", label: "Gitignore", screen: "gitignore" },
+	{ key: "7", label: "Git State", screen: "gitignore" },
+	{ key: "8", label: "Alias", screen: "alias" },
 ];
 
 interface TabBarProps {

package/src/ui/components/layout/FooterHints.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "@opentui/react/jsx-runtime";
+const KEY_BG = "#3f3f46";
+const KEY_FG = "#fafafa";
+const LABEL_FG = "gray";
+const GAP = "   ";
+/**
+ * Render a row of footer hints as key badges + labels:
+ *
+ *   [↑↓] move   [U] update   [/] search
+ *
+ * Each key is shown in a chip so it reads as a pressable key, not prose.
+ * Shared across screens so every footer looks the same.
+ */
+export function FooterHints({ hints }) {
+    const nodes = [];
+    hints.forEach((hint, i) => {
+        if (i > 0) {
+            nodes.push(_jsx("span", { fg: LABEL_FG, children: GAP }, `gap-${i}`));
+        }
+        nodes.push(_jsx("span", { bg: KEY_BG, fg: KEY_FG, children: ` ${hint.keys.join("")} ` }, `k-${i}`));
+        nodes.push(_jsx("span", { fg: LABEL_FG, children: ` ${hint.label}` }, `l-${i}`));
+    });
+    return _jsx("text", { children: nodes });
+}
+/** Convenience for callers that already have a node: same as <FooterHints>. */
+export function renderFooterHints(hints) {
+    return _jsx(FooterHints, { hints: hints });
+}
+export default FooterHints;

package/src/ui/components/layout/FooterHints.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+
+/** One footer hint: a key (or key group) and the action it performs. */
+export interface FooterHint {
+  /** Key(s) for this action, e.g. ["↑", "↓"] or ["U"]. Joined for display. */
+  keys: string[];
+  label: string;
+}
+
+const KEY_BG = "#3f3f46";
+const KEY_FG = "#fafafa";
+const LABEL_FG = "gray";
+const GAP = "   ";
+
+/**
+ * Render a row of footer hints as key badges + labels:
+ *
+ *   [↑↓] move   [U] update   [/] search
+ *
+ * Each key is shown in a chip so it reads as a pressable key, not prose.
+ * Shared across screens so every footer looks the same.
+ */
+export function FooterHints({ hints }: { hints: FooterHint[] }): React.ReactNode {
+  const nodes: React.ReactNode[] = [];
+  hints.forEach((hint, i) => {
+    if (i > 0) {
+      nodes.push(
+        <span key={`gap-${i}`} fg={LABEL_FG}>
+          {GAP}
+        </span>,
+      );
+    }
+    nodes.push(
+      <span key={`k-${i}`} bg={KEY_BG} fg={KEY_FG}>
+        {` ${hint.keys.join("")} `}
+      </span>,
+    );
+    nodes.push(
+      <span key={`l-${i}`} fg={LABEL_FG}>
+        {` ${hint.label}`}
+      </span>,
+    );
+  });
+  return <text>{nodes}</text>;
+}
+
+/** Convenience for callers that already have a node: same as <FooterHints>. */
+export function renderFooterHints(hints: FooterHint[]): React.ReactNode {
+  return <FooterHints hints={hints} />;
+}
+
+export default FooterHints;

package/src/ui/components/layout/ScreenLayout.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
 import { useDimensions } from "../../state/DimensionsContext.js";
 import { TabBar } from "../TabBar.js";
+import { FooterHints } from "./FooterHints.js";
 const HEADER_COLOR = "#7e57c2";
 export function ScreenLayout({ title, subtitle, currentScreen, search, statusLine, footerHints, listPanel, detailPanel, }) {
     const dimensions = useDimensions();
@@ -10,6 +11,6 @@ export function ScreenLayout({ title, subtitle, currentScreen, search, statusLin
     const fixedHeight = 6 + (hasSearchBar ? 1 : 0);
     const panelHeight = Math.max(5, dimensions.contentHeight - fixedHeight);
     const lineWidth = Math.max(10, dimensions.terminalWidth - 4);
-    return (_jsxs("box", { flexDirection: "column", height: dimensions.contentHeight, children: [_jsx("box", { height: 1, paddingLeft: 1, paddingRight: 1, children: _jsx("text", { fg: "#333333", children: "─".repeat(lineWidth) }) }), _jsx("box", { height: 1, paddingLeft: 1, paddingRight: 1, children: _jsx(TabBar, { currentScreen: currentScreen }) }), _jsx("box", { height: 1, paddingLeft: 1, paddingRight: 1, children: _jsx("text", { fg: "#333333", children: "─".repeat(lineWidth) }) }), _jsxs("box", { height: 1, paddingLeft: 1, paddingRight: 1, flexDirection: "row", justifyContent: "space-between", children: [_jsx("text", { fg: HEADER_COLOR, children: _jsx("strong", { children: title }) }), subtitle && _jsx("text", { fg: "gray", children: subtitle }), !subtitle && statusLine ? statusLine : null] }), hasSearchBar && (_jsx("box", { height: 1, paddingLeft: 1, paddingRight: 1, children: search.isActive ? (_jsxs("text", { children: [_jsx("span", { fg: "green", children: "Filter: " }), _jsx("span", { fg: "white", children: search.query }), _jsx("span", { bg: "white", fg: "black", children: " " })] })) : (_jsxs("text", { children: [_jsx("span", { fg: "green", children: "Filter: " }), _jsx("span", { fg: "yellow", children: search.query }), _jsx("span", { fg: "gray", children: "  (Esc to clear)" })] })) })), _jsx("box", { height: 1, paddingLeft: 1, paddingRight: 1, children: _jsx("text", { fg: "#444444", children: "─".repeat(lineWidth) }) }), _jsxs("box", { flexDirection: "row", height: panelHeight, children: [_jsx("box", { flexDirection: "column", width: "49%", height: panelHeight, paddingRight: 1, children: listPanel }), _jsx("box", { flexDirection: "column", width: 1, height: panelHeight, children: _jsx("text", { fg: "#444444", children: "│".repeat(panelHeight) }) }), _jsx("box", { width: "50%", height: panelHeight, paddingLeft: 1, children: _jsx("scrollbox", { height: panelHeight, scrollY: true, scrollX: false, children: _jsx("box", { flexDirection: "column", children: detailPanel }) }) })] }), _jsx("box", { height: 1, paddingLeft: 1, children: _jsx("text", { fg: "gray", children: footerHints }) })] }));
+    return (_jsxs("box", { flexDirection: "column", height: dimensions.contentHeight, children: [_jsx("box", { height: 1, paddingLeft: 1, paddingRight: 1, children: _jsx("text", { fg: "#333333", children: "─".repeat(lineWidth) }) }), _jsx("box", { height: 1, paddingLeft: 1, paddingRight: 1, children: _jsx(TabBar, { currentScreen: currentScreen }) }), _jsx("box", { height: 1, paddingLeft: 1, paddingRight: 1, children: _jsx("text", { fg: "#333333", children: "─".repeat(lineWidth) }) }), _jsxs("box", { height: 1, paddingLeft: 1, paddingRight: 1, flexDirection: "row", justifyContent: "space-between", children: [_jsx("text", { fg: HEADER_COLOR, children: _jsx("strong", { children: title }) }), subtitle && _jsx("text", { fg: "gray", children: subtitle }), !subtitle && statusLine ? statusLine : null] }), hasSearchBar && (_jsx("box", { height: 1, paddingLeft: 1, paddingRight: 1, children: search.isActive ? (_jsxs("text", { children: [_jsx("span", { fg: "green", children: "Filter: " }), _jsx("span", { fg: "white", children: search.query }), _jsx("span", { bg: "white", fg: "black", children: " " })] })) : (_jsxs("text", { children: [_jsx("span", { fg: "green", children: "Filter: " }), _jsx("span", { fg: "yellow", children: search.query }), _jsx("span", { fg: "gray", children: "  (Esc to clear)" })] })) })), _jsx("box", { height: 1, paddingLeft: 1, paddingRight: 1, children: _jsx("text", { fg: "#444444", children: "─".repeat(lineWidth) }) }), _jsxs("box", { flexDirection: "row", height: panelHeight, children: [_jsx("box", { flexDirection: "column", width: "49%", height: panelHeight, paddingRight: 1, children: listPanel }), _jsx("box", { flexDirection: "column", width: 1, height: panelHeight, children: _jsx("text", { fg: "#444444", children: "│".repeat(panelHeight) }) }), _jsx("box", { width: "50%", height: panelHeight, paddingLeft: 1, children: _jsx("scrollbox", { height: panelHeight, scrollY: true, scrollX: false, children: _jsx("box", { flexDirection: "column", children: detailPanel }) }) })] }), _jsx("box", { height: 1, paddingLeft: 1, children: Array.isArray(footerHints) ? (_jsx(FooterHints, { hints: footerHints })) : typeof footerHints === "string" ? (_jsx("text", { fg: "gray", children: footerHints })) : (footerHints) })] }));
 }
 export default ScreenLayout;

package/src/ui/components/layout/ScreenLayout.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { useDimensions } from "../../state/DimensionsContext.js";
 import { TabBar } from "../TabBar.js";
 import type { Screen } from "../../state/types.js";
+import { FooterHints, type FooterHint } from "./FooterHints.js";
 
 interface ScreenLayoutProps {
 	/** Screen title (e.g., "claudeup Plugins") */
@@ -21,8 +22,10 @@ interface ScreenLayoutProps {
 	};
 	/** Status line content (for screens without search) - shown in second row */
 	statusLine?: React.ReactNode;
-	/** Footer hints (left side) */
-	footerHints: string;
+	/** Footer hints (left side). Pass a FooterHint[] to render key badges
+	 *  (the standard look). A string or ReactNode is still accepted for
+	 *  free-form footers. */
+	footerHints: FooterHint[] | string | React.ReactNode;
 	/** Left panel content */
 	listPanel: React.ReactNode;
 	/** Right panel content (detail view) */
@@ -134,7 +137,13 @@ export function ScreenLayout({
 
 			{/* Footer */}
 			<box height={1} paddingLeft={1}>
-				<text fg="gray">{footerHints}</text>
+				{Array.isArray(footerHints) ? (
+					<FooterHints hints={footerHints as FooterHint[]} />
+				) : typeof footerHints === "string" ? (
+					<text fg="gray">{footerHints}</text>
+				) : (
+					footerHints
+				)}
 			</box>
 		</box>
 	);

package/src/ui/components/layout/index.js

@@ -2,3 +2,4 @@ export { Panel } from "./Panel.js";
 export { ScopeTabs } from "./ScopeTabs.js";
 export { ProgressBar } from "./ProgressBar.js";
 export { ScreenLayout } from "./ScreenLayout.js";
+export { FooterHints, renderFooterHints, } from "./FooterHints.js";

package/src/ui/components/layout/index.ts

@@ -2,3 +2,8 @@ export { Panel } from "./Panel.js";
 export { ScopeTabs } from "./ScopeTabs.js";
 export { ProgressBar } from "./ProgressBar.js";
 export { ScreenLayout } from "./ScreenLayout.js";
+export {
+  FooterHints,
+  renderFooterHints,
+  type FooterHint,
+} from "./FooterHints.js";

package/src/ui/components/modals/ConfirmModal.js

@@ -9,6 +9,6 @@ export function ConfirmModal({ title, message, onConfirm, onCancel, }) {
             onCancel();
         }
     });
-    return (_jsxs("box", { flexDirection: "column", border: true, borderStyle: "rounded", borderColor: "#525252", backgroundColor: "#1C1C1E", paddingLeft: 3, paddingRight: 3, paddingTop: 1, paddingBottom: 1, width: 60, children: [_jsx("box", { marginBottom: 1, children: _jsx("text", { fg: "#EDEDED", children: _jsx("strong", { children: title }) }) }), _jsx("box", { marginBottom: 1, children: _jsx("text", { fg: "#A1A1AA", children: message }) }), _jsxs("box", { marginTop: 1, children: [_jsx("text", { fg: "#71717A", children: "Press " }), _jsx("text", { fg: "#EDEDED", children: "Y" }), _jsx("text", { fg: "#71717A", children: " to confirm \u2022 " }), _jsx("text", { fg: "#EDEDED", children: "N" }), _jsx("text", { fg: "#71717A", children: " to cancel" })] })] }));
+    return (_jsxs("box", { flexDirection: "column", border: true, borderStyle: "rounded", borderColor: "#525252", backgroundColor: "#1C1C1E", paddingLeft: 3, paddingRight: 3, paddingTop: 1, paddingBottom: 1, width: 60, children: [_jsx("box", { marginBottom: 1, children: _jsx("text", { fg: "#EDEDED", children: _jsx("strong", { children: title }) }) }), _jsx("box", { marginBottom: 1, children: _jsx("text", { fg: "#A1A1AA", children: message }) }), _jsxs("box", { marginTop: 1, flexDirection: "row", children: [_jsx("text", { fg: "#71717A", children: "Press " }), _jsx("text", { fg: "#EDEDED", children: "Y" }), _jsx("text", { fg: "#71717A", children: " to confirm \u2022 " }), _jsx("text", { fg: "#EDEDED", children: "N" }), _jsx("text", { fg: "#71717A", children: " to cancel" })] })] }));
 }
 export default ConfirmModal;

package/src/ui/components/modals/ConfirmModal.tsx

@@ -47,7 +47,7 @@ export function ConfirmModal({
 			<box marginBottom={1}>
 				<text fg="#A1A1AA">{message}</text>
 			</box>
-			<box marginTop={1}>
+			<box marginTop={1} flexDirection="row">
 				<text fg="#71717A">Press </text>
 				<text fg="#EDEDED">Y</text>
 				<text fg="#71717A"> to confirm • </text>

package/src/ui/components/modals/SelectModal.js

@@ -1,9 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { useDimensions } from "../../state/DimensionsContext.js";
 export function SelectModal({ title, message, options, defaultIndex, onSelect: _onSelect, onCancel: _onCancel, }) {
     // Keyboard handling is done by ModalContainer
     // defaultIndex is the live selectedIndex from ModalContainer state
     const selectedIndex = defaultIndex ?? 0;
-    return (_jsxs("box", { flexDirection: "column", border: true, borderStyle: "rounded", borderColor: "#525252", backgroundColor: "#1C1C1E", paddingLeft: 3, paddingRight: 3, paddingTop: 1, paddingBottom: 1, width: 50, children: [_jsx("box", { marginBottom: 1, children: _jsx("text", { fg: "#EDEDED", children: _jsx("strong", { children: title }) }) }), _jsx("box", { marginBottom: 1, children: _jsx("text", { fg: "#A1A1AA", children: message }) }), _jsx("box", { flexDirection: "column", paddingLeft: 1, children: options.map((option, idx) => {
+    // Size to terminal width: 60% of available, clamped to [50, 90].
+    // Previously hardcoded at 50, which forced descriptions and long item
+    // labels (e.g. plugin specs) to wrap mid-sentence and produce orphan
+    // punctuation lines.
+    const dimensions = useDimensions();
+    const width = Math.max(50, Math.min(90, Math.floor(dimensions.terminalWidth * 0.6)));
+    return (_jsxs("box", { flexDirection: "column", border: true, borderStyle: "rounded", borderColor: "#525252", backgroundColor: "#1C1C1E", paddingLeft: 3, paddingRight: 3, paddingTop: 1, paddingBottom: 1, width: width, children: [_jsx("box", { marginBottom: 1, children: _jsx("text", { fg: "#EDEDED", children: _jsx("strong", { children: title }) }) }), _jsx("box", { marginBottom: 1, children: _jsx("text", { fg: "#A1A1AA", children: message }) }), _jsx("box", { flexDirection: "column", paddingLeft: 1, children: options.map((option, idx) => {
                     const isSelected = idx === selectedIndex;
                     return (_jsxs("text", { fg: isSelected ? "#F4F4F5" : "#A1A1AA", children: [_jsx("span", { fg: isSelected ? "#F4F4F5" : "#71717A", children: isSelected ? "❯ " : "  " }), isSelected ? _jsx("strong", { children: option.label }) : option.label] }, option.value));
                 }) }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "#71717A", children: "\u2191\u2193 Select \u2022 \u21B5 Confirm \u2022 Esc Cancel" }) })] }));

package/src/ui/components/modals/SelectModal.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import type { SelectOption } from "../../state/types.js";
+import { useDimensions } from "../../state/DimensionsContext.js";
 
 interface SelectModalProps {
 	/** Modal title */
@@ -28,6 +29,16 @@ export function SelectModal({
 	// defaultIndex is the live selectedIndex from ModalContainer state
 	const selectedIndex = defaultIndex ?? 0;
 
+	// Size to terminal width: 60% of available, clamped to [50, 90].
+	// Previously hardcoded at 50, which forced descriptions and long item
+	// labels (e.g. plugin specs) to wrap mid-sentence and produce orphan
+	// punctuation lines.
+	const dimensions = useDimensions();
+	const width = Math.max(
+		50,
+		Math.min(90, Math.floor(dimensions.terminalWidth * 0.6)),
+	);
+
 	return (
 		<box
 			flexDirection="column"
@@ -39,7 +50,7 @@ export function SelectModal({
 			paddingRight={3}
 			paddingTop={1}
 			paddingBottom={1}
-			width={50}
+			width={width}
 		>
 			<box marginBottom={1}>
 				<text fg="#EDEDED">

package/src/ui/hooks/useGitignoreModal.js

@@ -5,12 +5,12 @@ export function buildGitignoreModal(args) {
     const options = [
         {
             label: safeCount > 0
-                ? `Append ${safeCount} safe entr${safeCount === 1 ? "y" : "ies"} to .gitignore`
-                : "(no safe-fixable entries)",
+                ? `Add ${safeCount} missing .gitignore entr${safeCount === 1 ? "y" : "ies"}`
+                : "(no missing .gitignore entries)",
             value: "fix-safe",
         },
         {
-            label: "Open Gitignore tab to review",
+            label: "Open Git State tab to review",
             value: "open-tab",
         },
         {
@@ -21,11 +21,10 @@ export function buildGitignoreModal(args) {
     return {
         type: "select",
         title: "Gitignore violations detected",
-        message: `Found ${violationCount} issue(s) where the resolved gitignore manifest ` +
-            `disagrees with your working tree.\n\n` +
-            `Safe fixes append to .gitignore (no index mutation). Destructive fixes ` +
-            `(\`git rm --cached\`, removing .gitignore lines) must be applied one at ` +
-            `a time from the Gitignore tab.`,
+        message: `Found ${violationCount} managed gitignore item(s) that do not match ` +
+            `the current repo state.\n\n` +
+            `Missing .gitignore entries can be added now. Items that change git ` +
+            `tracking are reviewed and fixed from the Gitignore tab.`,
         options,
         onSelect: (value) => {
             if (value === "fix-safe")