claudeup 4.0.0 → 4.1.0

package/src/services/claude-cli.ts

@@ -16,9 +16,7 @@ import {
 	removeGlobalInstalledPluginVersion,
 	removeLocalInstalledPluginVersion,
 } from "./claude-settings.js";
-import {
-	removeInstalledPluginVersion,
-} from "./plugin-manager.js";
+import { removeInstalledPluginVersion } from "./plugin-manager.js";
 
 const execFileAsync = promisify(execFile);
 
@@ -44,10 +42,7 @@ async function getClaudePath(): Promise<string> {
  * @param timeoutMs - Timeout in milliseconds (default: 30s)
  * @returns stdout from the command
  */
-async function execClaude(
-	args: string[],
-	timeoutMs = 30000,
-): Promise<string> {
+async function execClaude(args: string[], timeoutMs = 30000): Promise<string> {
 	const claudePath = await getClaudePath();
 	try {
 		const { stdout } = await execFileAsync(claudePath, args, {
@@ -148,6 +143,14 @@ export async function addMarketplace(repo: string): Promise<void> {
 	await execClaude(["plugin", "marketplace", "add", repo], 60000);
 }
 
+/**
+ * Update marketplace cache by running git pull via Claude CLI
+ * Uses longer timeout since this involves git network operations
+ */
+export async function updateMarketplace(name: string): Promise<void> {
+	await execClaude(["plugin", "marketplace", "update", name], 60000);
+}
+
 /**
  * Check if the claude CLI is available
  * @returns true if claude CLI is found in PATH

package/src/services/claude-settings.js

@@ -498,7 +498,9 @@ export async function migrateMarketplaceRename(projectPath) {
             result.projectMigrated = count;
         }
     }
-    catch { /* skip if unreadable */ }
+    catch {
+        /* skip if unreadable */
+    }
     // 2. Global settings
     try {
         const settings = await readGlobalSettings();
@@ -508,7 +510,9 @@ export async function migrateMarketplaceRename(projectPath) {
             result.globalMigrated = count;
         }
     }
-    catch { /* skip if unreadable */ }
+    catch {
+        /* skip if unreadable */
+    }
     // 3. Local settings (settings.local.json)
     try {
         const local = await readLocalSettings(projectPath);
@@ -528,7 +532,9 @@ export async function migrateMarketplaceRename(projectPath) {
             result.localMigrated = localCount;
         }
     }
-    catch { /* skip if unreadable */ }
+    catch {
+        /* skip if unreadable */
+    }
     // 4. known_marketplaces.json — rename old keys + physical directory cleanup
     const pluginsDir = path.join(os.homedir(), ".claude", "plugins", "marketplaces");
     const newDir = path.join(pluginsDir, NEW_MARKETPLACE_NAME);
@@ -553,8 +559,7 @@ export async function migrateMarketplaceRename(projectPath) {
             }
             // Ensure installLocation doesn't reference old directory names
             if (known[NEW_MARKETPLACE_NAME]?.installLocation?.includes(oldName)) {
-                known[NEW_MARKETPLACE_NAME].installLocation =
-                    known[NEW_MARKETPLACE_NAME].installLocation.replace(oldName, NEW_MARKETPLACE_NAME);
+                known[NEW_MARKETPLACE_NAME].installLocation = known[NEW_MARKETPLACE_NAME].installLocation.replace(oldName, NEW_MARKETPLACE_NAME);
                 knownModified = true;
             }
         }
@@ -563,7 +568,9 @@ export async function migrateMarketplaceRename(projectPath) {
             result.knownMarketplacesMigrated = true;
         }
     }
-    catch { /* skip if unreadable */ }
+    catch {
+        /* skip if unreadable */
+    }
     // 4b. Rename/remove old physical directories (runs even if keys were already migrated)
     for (const oldName of OLD_MARKETPLACE_NAMES) {
         const oldDir = path.join(pluginsDir, oldName);
@@ -578,24 +585,32 @@ export async function migrateMarketplaceRename(projectPath) {
                 }
             }
         }
-        catch { /* non-fatal: directory cleanup is best-effort */ }
+        catch {
+            /* non-fatal: directory cleanup is best-effort */
+        }
     }
     // 4c. Update git remote URL in the marketplace clone (old → new repo)
     try {
         if (await fs.pathExists(path.join(newDir, ".git"))) {
             const { execSync } = await import("node:child_process");
             const remote = execSync("git remote get-url origin", {
-                cwd: newDir, encoding: "utf-8", timeout: 5000,
+                cwd: newDir,
+                encoding: "utf-8",
+                timeout: 5000,
             }).trim();
             if (remote.includes("claude-code") && remote.includes("MadAppGang")) {
                 const newRemote = remote.replace("claude-code", NEW_MARKETPLACE_NAME);
                 execSync(`git remote set-url origin "${newRemote}"`, {
-                    cwd: newDir, encoding: "utf-8", timeout: 5000,
+                    cwd: newDir,
+                    encoding: "utf-8",
+                    timeout: 5000,
                 });
             }
         }
     }
-    catch { /* non-fatal: git remote update is best-effort */ }
+    catch {
+        /* non-fatal: git remote update is best-effort */
+    }
     // 5. installed_plugins.json — rename plugin ID keys
     try {
         const registry = await readInstalledPluginsRegistry();
@@ -621,7 +636,9 @@ export async function migrateMarketplaceRename(projectPath) {
             result.registryMigrated = regCount;
         }
     }
-    catch { /* skip if unreadable */ }
+    catch {
+        /* skip if unreadable */
+    }
     return result;
 }
 /**

package/src/services/claude-settings.ts

@@ -732,7 +732,9 @@ export async function migrateMarketplaceRename(
 			await writeSettings(settings, projectPath);
 			result.projectMigrated = count;
 		}
-	} catch { /* skip if unreadable */ }
+	} catch {
+		/* skip if unreadable */
+	}
 
 	// 2. Global settings
 	try {
@@ -742,24 +744,39 @@ export async function migrateMarketplaceRename(
 			await writeGlobalSettings(settings);
 			result.globalMigrated = count;
 		}
-	} catch { /* skip if unreadable */ }
+	} catch {
+		/* skip if unreadable */
+	}
 
 	// 3. Local settings (settings.local.json)
 	try {
 		const local = await readLocalSettings(projectPath);
 		let localCount = 0;
 		const [ep, epCount] = migratePluginKeys(local.enabledPlugins);
-		if (epCount > 0) { local.enabledPlugins = ep; localCount += epCount; }
+		if (epCount > 0) {
+			local.enabledPlugins = ep;
+			localCount += epCount;
+		}
 		const [iv, ivCount] = migratePluginKeys(local.installedPluginVersions);
-		if (ivCount > 0) { local.installedPluginVersions = iv; localCount += ivCount; }
+		if (ivCount > 0) {
+			local.installedPluginVersions = iv;
+			localCount += ivCount;
+		}
 		if (localCount > 0) {
 			await writeLocalSettings(local, projectPath);
 			result.localMigrated = localCount;
 		}
-	} catch { /* skip if unreadable */ }
+	} catch {
+		/* skip if unreadable */
+	}
 
 	// 4. known_marketplaces.json — rename old keys + physical directory cleanup
-	const pluginsDir = path.join(os.homedir(), ".claude", "plugins", "marketplaces");
+	const pluginsDir = path.join(
+		os.homedir(),
+		".claude",
+		"plugins",
+		"marketplaces",
+	);
 	const newDir = path.join(pluginsDir, NEW_MARKETPLACE_NAME);
 
 	try {
@@ -785,11 +802,9 @@ export async function migrateMarketplaceRename(
 
 			// Ensure installLocation doesn't reference old directory names
 			if (known[NEW_MARKETPLACE_NAME]?.installLocation?.includes(oldName)) {
-				known[NEW_MARKETPLACE_NAME].installLocation =
-					known[NEW_MARKETPLACE_NAME].installLocation.replace(
-						oldName,
-						NEW_MARKETPLACE_NAME,
-					);
+				known[NEW_MARKETPLACE_NAME].installLocation = known[
+					NEW_MARKETPLACE_NAME
+				].installLocation.replace(oldName, NEW_MARKETPLACE_NAME);
 				knownModified = true;
 			}
 		}
@@ -798,7 +813,9 @@ export async function migrateMarketplaceRename(
 			await writeKnownMarketplaces(known);
 			result.knownMarketplacesMigrated = true;
 		}
-	} catch { /* skip if unreadable */ }
+	} catch {
+		/* skip if unreadable */
+	}
 
 	// 4b. Rename/remove old physical directories (runs even if keys were already migrated)
 	for (const oldName of OLD_MARKETPLACE_NAMES) {
@@ -812,7 +829,9 @@ export async function migrateMarketplaceRename(
 					await fs.remove(oldDir);
 				}
 			}
-		} catch { /* non-fatal: directory cleanup is best-effort */ }
+		} catch {
+			/* non-fatal: directory cleanup is best-effort */
+		}
 	}
 
 	// 4c. Update git remote URL in the marketplace clone (old → new repo)
@@ -820,16 +839,22 @@ export async function migrateMarketplaceRename(
 		if (await fs.pathExists(path.join(newDir, ".git"))) {
 			const { execSync } = await import("node:child_process");
 			const remote = execSync("git remote get-url origin", {
-				cwd: newDir, encoding: "utf-8", timeout: 5000,
+				cwd: newDir,
+				encoding: "utf-8",
+				timeout: 5000,
 			}).trim();
 			if (remote.includes("claude-code") && remote.includes("MadAppGang")) {
 				const newRemote = remote.replace("claude-code", NEW_MARKETPLACE_NAME);
 				execSync(`git remote set-url origin "${newRemote}"`, {
-					cwd: newDir, encoding: "utf-8", timeout: 5000,
+					cwd: newDir,
+					encoding: "utf-8",
+					timeout: 5000,
 				});
 			}
 		}
-	} catch { /* non-fatal: git remote update is best-effort */ }
+	} catch {
+		/* non-fatal: git remote update is best-effort */
+	}
 
 	// 5. installed_plugins.json — rename plugin ID keys
 	try {
@@ -837,7 +862,9 @@ export async function migrateMarketplaceRename(
 		let regCount = 0;
 		const newPlugins: typeof registry.plugins = {};
 		for (const [pluginId, entries] of Object.entries(registry.plugins)) {
-			const oldName = OLD_MARKETPLACE_NAMES.find((n) => pluginId.endsWith(`@${n}`));
+			const oldName = OLD_MARKETPLACE_NAMES.find((n) =>
+				pluginId.endsWith(`@${n}`),
+			);
 			if (oldName) {
 				const pluginName = pluginId.slice(0, pluginId.lastIndexOf("@"));
 				const newKey = `${pluginName}@${NEW_MARKETPLACE_NAME}`;
@@ -854,7 +881,9 @@ export async function migrateMarketplaceRename(
 			await writeInstalledPluginsRegistry(registry);
 			result.registryMigrated = regCount;
 		}
-	} catch { /* skip if unreadable */ }
+	} catch {
+		/* skip if unreadable */
+	}
 
 	return result;
 }

package/src/services/plugin-manager.js

@@ -5,6 +5,7 @@ import { getConfiguredMarketplaces, getEnabledPlugins, readSettings, writeSettin
 import { defaultMarketplaces } from "../data/marketplaces.js";
 import { scanLocalMarketplaces, repairAllMarketplaces, } from "./local-marketplace.js";
 import { formatMarketplaceName, isValidGitHubRepo, parsePluginId, } from "../utils/string-utils.js";
+import { updateMarketplace } from "./claude-cli.js";
 // Cache for local marketplaces (session-level) - Promise-based to prevent race conditions
 let localMarketplacesPromise = null;
 // Session-level cache for fetched marketplace data (no TTL - persists until explicit refresh)
@@ -104,12 +105,16 @@ export async function getAvailablePlugins(projectPath) {
             marketplaceNames.add(mp.name);
         }
     }
+    // Fetch local marketplace caches up front so we can detect stale caches
+    let localMarketplaces = await getLocalMarketplaces();
     // Fetch plugins from each configured marketplace
     for (const mpName of marketplaceNames) {
         const marketplace = defaultMarketplaces.find((m) => m.name === mpName);
         if (!marketplace)
             continue;
         const marketplacePlugins = await fetchMarketplacePlugins(mpName, marketplace.source.repo);
+        // Auto-sync local cache if remote has plugins the local cache doesn't
+        localMarketplaces = await autoSyncIfStale(mpName, marketplacePlugins.map((p) => p.name), localMarketplaces);
         for (const plugin of marketplacePlugins) {
             const pluginId = `${plugin.name}@${mpName}`;
             const installedVersion = installedVersions[pluginId];
@@ -136,8 +141,6 @@ export async function getAvailablePlugins(projectPath) {
             });
         }
     }
-    // Fetch ALL plugins from local marketplace caches (for marketplaces not in defaults)
-    const localMarketplaces = await getLocalMarketplaces();
     for (const [mpName, localMp] of localMarketplaces) {
         // Skip if already fetched from defaults
         if (marketplaceNames.has(mpName))
@@ -256,12 +259,16 @@ export async function getGlobalAvailablePlugins() {
             marketplaceNames.add(mp.name);
         }
     }
+    // Fetch local marketplace caches up front so we can detect stale caches
+    let localMarketplaces = await getLocalMarketplaces();
     // Fetch plugins from each configured marketplace
     for (const mpName of marketplaceNames) {
         const marketplace = defaultMarketplaces.find((m) => m.name === mpName);
         if (!marketplace)
             continue;
         const marketplacePlugins = await fetchMarketplacePlugins(mpName, marketplace.source.repo);
+        // Auto-sync local cache if remote has plugins the local cache doesn't
+        localMarketplaces = await autoSyncIfStale(mpName, marketplacePlugins.map((p) => p.name), localMarketplaces);
         for (const plugin of marketplacePlugins) {
             const pluginId = `${plugin.name}@${mpName}`;
             const installedVersion = installedVersions[pluginId];
@@ -288,8 +295,6 @@ export async function getGlobalAvailablePlugins() {
             });
         }
     }
-    // Fetch ALL plugins from local marketplace caches (for marketplaces not in defaults)
-    const localMarketplaces = await getLocalMarketplaces();
     for (const [mpName, localMp] of localMarketplaces) {
         // Skip if already fetched from defaults
         if (marketplaceNames.has(mpName))
@@ -424,6 +429,37 @@ async function getLocalMarketplaces() {
 export async function getLocalMarketplacesInfo() {
     return getLocalMarketplaces();
 }
+// Track which marketplaces have already been auto-synced this session
+// so we only attempt the update once per marketplace per claudeup run.
+const autoSyncedMarketplaces = new Set();
+/**
+ * If the remote manifest lists plugins that aren't in the local cache,
+ * the local clone is stale. Silently run `claude plugin marketplace update`
+ * to pull the latest, then invalidate the local cache so the next scan
+ * picks up the new plugins.
+ */
+async function autoSyncIfStale(mpName, remotePluginNames, localMarketplaces) {
+    if (autoSyncedMarketplaces.has(mpName))
+        return localMarketplaces;
+    const localMp = localMarketplaces.get(mpName);
+    if (!localMp)
+        return localMarketplaces;
+    const localNames = new Set(localMp.plugins.map((p) => p.name));
+    const hasMissing = remotePluginNames.some((name) => !localNames.has(name));
+    if (!hasMissing)
+        return localMarketplaces;
+    autoSyncedMarketplaces.add(mpName);
+    try {
+        await updateMarketplace(mpName);
+        // Invalidate local cache so re-scan picks up new plugins
+        localMarketplacesPromise = null;
+        return getLocalMarketplaces();
+    }
+    catch {
+        // Update failed (no network, CLI missing, etc.) — continue with stale data
+        return localMarketplaces;
+    }
+}
 /**
  * Refresh claudeup's internal cache
  * Note: Marketplace updates should be done via Claude Code's /plugin marketplace update command

package/src/services/plugin-manager.ts

@@ -27,6 +27,7 @@ import {
 	isValidGitHubRepo,
 	parsePluginId,
 } from "../utils/string-utils.js";
+import { updateMarketplace } from "./claude-cli.js";
 
 // Cache for local marketplaces (session-level) - Promise-based to prevent race conditions
 let localMarketplacesPromise: Promise<Map<string, LocalMarketplace>> | null =
@@ -206,6 +207,9 @@ export async function getAvailablePlugins(
 		}
 	}
 
+	// Fetch local marketplace caches up front so we can detect stale caches
+	let localMarketplaces = await getLocalMarketplaces();
+
 	// Fetch plugins from each configured marketplace
 	for (const mpName of marketplaceNames) {
 		const marketplace = defaultMarketplaces.find((m) => m.name === mpName);
@@ -216,6 +220,13 @@ export async function getAvailablePlugins(
 			marketplace.source.repo,
 		);
 
+		// Auto-sync local cache if remote has plugins the local cache doesn't
+		localMarketplaces = await autoSyncIfStale(
+			mpName,
+			marketplacePlugins.map((p) => p.name),
+			localMarketplaces,
+		);
+
 		for (const plugin of marketplacePlugins) {
 			const pluginId = `${plugin.name}@${mpName}`;
 			const installedVersion = installedVersions[pluginId];
@@ -245,9 +256,6 @@ export async function getAvailablePlugins(
 		}
 	}
 
-	// Fetch ALL plugins from local marketplace caches (for marketplaces not in defaults)
-	const localMarketplaces = await getLocalMarketplaces();
-
 	for (const [mpName, localMp] of localMarketplaces) {
 		// Skip if already fetched from defaults
 		if (marketplaceNames.has(mpName)) continue;
@@ -383,6 +391,9 @@ export async function getGlobalAvailablePlugins(): Promise<PluginInfo[]> {
 		}
 	}
 
+	// Fetch local marketplace caches up front so we can detect stale caches
+	let localMarketplaces = await getLocalMarketplaces();
+
 	// Fetch plugins from each configured marketplace
 	for (const mpName of marketplaceNames) {
 		const marketplace = defaultMarketplaces.find((m) => m.name === mpName);
@@ -393,6 +404,13 @@ export async function getGlobalAvailablePlugins(): Promise<PluginInfo[]> {
 			marketplace.source.repo,
 		);
 
+		// Auto-sync local cache if remote has plugins the local cache doesn't
+		localMarketplaces = await autoSyncIfStale(
+			mpName,
+			marketplacePlugins.map((p) => p.name),
+			localMarketplaces,
+		);
+
 		for (const plugin of marketplacePlugins) {
 			const pluginId = `${plugin.name}@${mpName}`;
 			const installedVersion = installedVersions[pluginId];
@@ -422,9 +440,6 @@ export async function getGlobalAvailablePlugins(): Promise<PluginInfo[]> {
 		}
 	}
 
-	// Fetch ALL plugins from local marketplace caches (for marketplaces not in defaults)
-	const localMarketplaces = await getLocalMarketplaces();
-
 	for (const [mpName, localMp] of localMarketplaces) {
 		// Skip if already fetched from defaults
 		if (marketplaceNames.has(mpName)) continue;
@@ -598,6 +613,42 @@ export async function getLocalMarketplacesInfo(): Promise<
 	return getLocalMarketplaces();
 }
 
+// Track which marketplaces have already been auto-synced this session
+// so we only attempt the update once per marketplace per claudeup run.
+const autoSyncedMarketplaces = new Set<string>();
+
+/**
+ * If the remote manifest lists plugins that aren't in the local cache,
+ * the local clone is stale. Silently run `claude plugin marketplace update`
+ * to pull the latest, then invalidate the local cache so the next scan
+ * picks up the new plugins.
+ */
+async function autoSyncIfStale(
+	mpName: string,
+	remotePluginNames: string[],
+	localMarketplaces: Map<string, LocalMarketplace>,
+): Promise<Map<string, LocalMarketplace>> {
+	if (autoSyncedMarketplaces.has(mpName)) return localMarketplaces;
+
+	const localMp = localMarketplaces.get(mpName);
+	if (!localMp) return localMarketplaces;
+
+	const localNames = new Set(localMp.plugins.map((p) => p.name));
+	const hasMissing = remotePluginNames.some((name) => !localNames.has(name));
+	if (!hasMissing) return localMarketplaces;
+
+	autoSyncedMarketplaces.add(mpName);
+	try {
+		await updateMarketplace(mpName);
+		// Invalidate local cache so re-scan picks up new plugins
+		localMarketplacesPromise = null;
+		return getLocalMarketplaces();
+	} catch {
+		// Update failed (no network, CLI missing, etc.) — continue with stale data
+		return localMarketplaces;
+	}
+}
+
 export interface RefreshAndRepairResult {
 	refresh: never[];
 	repair: RepairMarketplaceResult[];

package/src/types/index.ts

@@ -243,3 +243,36 @@ export interface ProfileEntry {
 	updatedAt: string;
 	scope: "user" | "project";
 }
+
+// ─── Predefined Profile Types ──────────────────────────────────────────────────
+
+/** A skill reference for predefined profiles */
+export interface PredefinedSkill {
+	name: string;
+	repo: string;
+	skillPath: string;
+}
+
+/** Settings that can be configured in a predefined profile */
+export interface PredefinedSettings {
+	effortLevel?: "low" | "medium" | "high";
+	alwaysThinkingEnabled?: boolean;
+	model?: "claude-sonnet-4-6" | "claude-opus-4-6";
+	outputStyle?: "concise" | "explanatory" | "formal";
+	CLAUDE_CODE_ENABLE_TASKS?: boolean;
+	CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS?: boolean;
+	includeGitInstructions?: boolean;
+	respectGitignore?: boolean;
+	enableAllProjectMcpServers?: boolean;
+}
+
+/** A predefined (built-in) profile for claudeup */
+export interface PredefinedProfile {
+	id: string;
+	name: string;
+	description: string;
+	targetAudience: string;
+	plugins: Record<string, boolean>;
+	skills: PredefinedSkill[];
+	settings: PredefinedSettings;
+}

package/src/ui/components/ScrollableDetail.js

@@ -0,0 +1,23 @@
+import { jsxs as _jsxs, jsx as _jsx } from "@opentui/react/jsx-runtime";
+import { useState, useEffect } from "react";
+/**
+ * A scrollable detail panel that renders an array of lines
+ * with automatic scroll tracking. When content exceeds maxHeight,
+ * it shows a scroll indicator and clips to fit.
+ */
+export function ScrollableDetail({ lines, maxHeight, scrollTrigger = 0, }) {
+    const [scrollOffset, setScrollOffset] = useState(0);
+    // Reset scroll when content changes (new item selected)
+    useEffect(() => {
+        setScrollOffset(0);
+    }, [scrollTrigger]);
+    const totalLines = lines.length;
+    const visibleLines = Math.max(1, maxHeight - 1); // -1 for scroll indicator
+    const canScroll = totalLines > visibleLines;
+    const maxOffset = Math.max(0, totalLines - visibleLines);
+    const clampedOffset = Math.min(scrollOffset, maxOffset);
+    const visibleContent = lines.slice(clampedOffset, clampedOffset + visibleLines);
+    const scrollUp = clampedOffset > 0;
+    const scrollDown = clampedOffset < maxOffset;
+    return (_jsxs("box", { flexDirection: "column", children: [scrollUp && (_jsx("box", { children: _jsxs("text", { fg: "cyan", children: ["\u2191 ", clampedOffset, " more"] }) })), visibleContent, scrollDown && (_jsx("box", { children: _jsxs("text", { fg: "cyan", children: ["\u2193 ", totalLines - clampedOffset - visibleLines, " more"] }) }))] }));
+}

package/src/ui/components/ScrollableDetail.tsx

@@ -0,0 +1,55 @@
+import React, { useState, useEffect } from "react";
+
+interface ScrollableDetailProps {
+	/** Array of content lines to display */
+	lines: React.ReactNode[];
+	/** Maximum visible height */
+	maxHeight: number;
+	/** External scroll trigger — changes when list selection changes */
+	scrollTrigger?: number;
+}
+
+/**
+ * A scrollable detail panel that renders an array of lines
+ * with automatic scroll tracking. When content exceeds maxHeight,
+ * it shows a scroll indicator and clips to fit.
+ */
+export function ScrollableDetail({
+	lines,
+	maxHeight,
+	scrollTrigger = 0,
+}: ScrollableDetailProps) {
+	const [scrollOffset, setScrollOffset] = useState(0);
+
+	// Reset scroll when content changes (new item selected)
+	useEffect(() => {
+		setScrollOffset(0);
+	}, [scrollTrigger]);
+
+	const totalLines = lines.length;
+	const visibleLines = Math.max(1, maxHeight - 1); // -1 for scroll indicator
+	const canScroll = totalLines > visibleLines;
+	const maxOffset = Math.max(0, totalLines - visibleLines);
+	const clampedOffset = Math.min(scrollOffset, maxOffset);
+
+	const visibleContent = lines.slice(clampedOffset, clampedOffset + visibleLines);
+
+	const scrollUp = clampedOffset > 0;
+	const scrollDown = clampedOffset < maxOffset;
+
+	return (
+		<box flexDirection="column">
+			{scrollUp && (
+				<box>
+					<text fg="cyan">↑ {clampedOffset} more</text>
+				</box>
+			)}
+			{visibleContent}
+			{scrollDown && (
+				<box>
+					<text fg="cyan">↓ {totalLines - clampedOffset - visibleLines} more</text>
+				</box>
+			)}
+		</box>
+	);
+}

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

@@ -10,6 +10,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", { flexDirection: "column", width: "50%", height: panelHeight, paddingLeft: 1, 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: _jsx("text", { fg: "gray", children: footerHints }) })] }));
 }
 export default ScreenLayout;

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

@@ -118,14 +118,17 @@ export function ScreenLayout({
 					<text fg="#444444">{"│".repeat(panelHeight)}</text>
 				</box>
 
-				{/* Detail panel */}
-				<box
-					flexDirection="column"
-					width="50%"
-					height={panelHeight}
-					paddingLeft={1}
-				>
-					{detailPanel}
+				{/* Detail panel — scrollable */}
+				<box width="50%" height={panelHeight} paddingLeft={1}>
+					<scrollbox
+						height={panelHeight}
+						scrollY={true}
+						scrollX={false}
+					>
+						<box flexDirection="column">
+							{detailPanel}
+						</box>
+					</scrollbox>
 				</box>
 			</box>