claudeup 4.38.1 → 4.39.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claudeup",
-  "version": "4.38.1",
+  "version": "4.39.1",
   "description": "TUI tool for managing Claude Code plugins, MCPs, and configuration",
   "type": "module",
   "main": "src/main.tsx",
@@ -64,8 +64,8 @@
     "typescript": "^5.6.3"
   },
   "optionalDependencies": {
-    "claudeup-darwin-arm64": "4.38.1",
-    "claudeup-darwin-x64": "4.38.1",
-    "claudeup-linux-x64": "4.38.1"
+    "claudeup-darwin-arm64": "4.39.1",
+    "claudeup-darwin-x64": "4.39.1",
+    "claudeup-linux-x64": "4.39.1"
   }
 }

package/src/__tests__/selection-scope.test.ts

@@ -0,0 +1,100 @@
+import { describe, expect, test } from "bun:test";
+import { BoxRenderable, TextRenderable } from "@opentui/core";
+import { createTestRenderer } from "@opentui/core/testing";
+
+/**
+ * Pins the OpenTUI selection behaviour claudeup relies on after enabling the
+ * mouse outside tmux (src/main.tsx): a drag that stays inside one pane selects
+ * text from that pane only, because the renderer scopes the selection to the
+ * smallest ancestor covering the dragged-over renderables. Crossing the pane
+ * divider deliberately escalates the scope to the common ancestor — that is
+ * upstream's design, not a bug, and the second test documents it so a future
+ * re-pin that changes either half is caught here rather than by a user.
+ *
+ * The geometry mirrors ScreenLayout: two column boxes side by side under one
+ * row box, text rows inside each.
+ */
+async function twoPaneRenderer() {
+	const { renderer, mockMouse, renderOnce } = await createTestRenderer({
+		width: 80,
+		height: 10,
+		useMouse: true,
+	});
+
+	const row = new BoxRenderable(renderer, {
+		id: "row",
+		width: 80,
+		height: 10,
+		flexDirection: "row",
+	});
+	renderer.root.add(row);
+
+	const left = new BoxRenderable(renderer, {
+		id: "left",
+		width: 40,
+		height: 10,
+		flexDirection: "column",
+	});
+	const separator = new BoxRenderable(renderer, {
+		id: "separator",
+		width: 1,
+		height: 10,
+	});
+	const right = new BoxRenderable(renderer, {
+		id: "right",
+		width: 39,
+		height: 10,
+		flexDirection: "column",
+	});
+	row.add(left);
+	row.add(separator);
+	row.add(right);
+
+	for (const line of ["alpha one", "alpha two", "alpha three"]) {
+		left.add(new TextRenderable(renderer, { content: line }));
+	}
+	for (const line of ["omega one", "omega two", "omega three"]) {
+		right.add(new TextRenderable(renderer, { content: line }));
+	}
+
+	await renderOnce();
+	return { renderer, mockMouse };
+}
+
+describe("mouse selection scope across panes", () => {
+	test("a drag inside the left pane selects left-pane text only", async () => {
+		const { renderer, mockMouse } = await twoPaneRenderer();
+
+		await mockMouse.drag(1, 0, 20, 2);
+
+		const selected = renderer.getSelection()?.getSelectedText() ?? "";
+		expect(selected).toContain("alpha");
+		expect(selected).not.toContain("omega");
+
+		renderer.destroy();
+	});
+
+	test("a drag inside the right pane selects right-pane text only", async () => {
+		const { renderer, mockMouse } = await twoPaneRenderer();
+
+		await mockMouse.drag(45, 0, 70, 2);
+
+		const selected = renderer.getSelection()?.getSelectedText() ?? "";
+		expect(selected).toContain("omega");
+		expect(selected).not.toContain("alpha");
+
+		renderer.destroy();
+	});
+
+	test("a drag across the divider escalates to both panes — upstream's design", async () => {
+		const { renderer, mockMouse } = await twoPaneRenderer();
+
+		await mockMouse.drag(1, 0, 70, 2);
+
+		const selected = renderer.getSelection()?.getSelectedText() ?? "";
+		expect(selected).toContain("alpha");
+		expect(selected).toContain("omega");
+
+		renderer.destroy();
+	});
+});

package/src/main.tsx

@@ -31,25 +31,37 @@ async function main(): Promise<void> {
 	// absolute fill would box the UI into whatever theme we guessed. OpenTUI's
 	// built-in default for unstyled cells is truecolor white, which is why every
 	// element now names an adaptive colour explicitly — see src/ui/theme.ts.
+	// The mouse is ON, everywhere — it carries real features now: the wheel
+	// scrolls the pane under the cursor, and a drag selects text from ONE pane
+	// at a time (terminal-native selection is a screen-wide rectangle that
+	// grabs both columns), OSC 52-copied on release below.
+	//
+	// This deliberately includes tmux. Two earlier revisions got this wrong in
+	// opposite directions: one disabled the mouse everywhere on the theory that
+	// capture breaks tmux-level pane clicking, the next kept it off only inside
+	// tmux. Both dated from when claudeup had no mouse features, so disabling
+	// cost nothing. MEASURED on a heavily tmux'd machine: tmux forwards mouse
+	// to a pane application that asks for it (htop in the same session took
+	// clicks and wheel fine while claudeup sat inert), and tmux's own `mouse`
+	// option keeps governing pane management. Terminal-native selection stays
+	// reachable via Shift+drag in most terminals.
+	//
+	// enableMouseMovement (mode-1003 "report all motion") stays off — selection
+	// needs only button-held drag events, which button reporting delivers.
 	const renderer = await createCliRenderer({
 		backgroundColor: RGBA.defaultBackground(),
-		// claudeup is keyboard-only — no component sets onMouseDown/Up/Move, and
-		// every action has a key. OpenTUI nevertheless defaults BOTH of these to
-		// true (`config.useMouse ?? true`, `config.enableMouseMovement ?? true`),
-		// which turns on button reporting and mode-1003 "report all motion".
-		//
-		// Inside tmux that is actively harmful: once a pane's application asks for
-		// mouse events, tmux hands them to that application instead of using them
-		// to select a pane or scroll history. Clicking another pane then does
-		// nothing, keyboard focus stays where it was, and what you type lands in
-		// the pane you thought you had just left.
-		//
-		// Turning it off costs nothing here and gives clicking and scrolling back
-		// to the terminal.
-		useMouse: false,
+		useMouse: true,
 		enableMouseMovement: false,
 	});
 
+	// Mouse selection → system clipboard, on release. OSC 52 survives SSH;
+	// terminals that block it simply ignore the sequence. Never fires where the
+	// mouse is off, so the tmux path pays nothing.
+	renderer.on("selection", (selection: { getSelectedText(): string }) => {
+		const text = selection?.getSelectedText() ?? "";
+		if (text.length > 0) renderer.copyToClipboardOSC52(text);
+	});
+
 	// Ask the terminal whether it is light or dark, once. Only the disabled-row
 	// tint needs this — see src/ui/theme-mode.ts for why that one case cannot be
 	// solved the way the rest of the palette is. Bounded wait: a terminal that

package/src/ui/components/CategoryHeader.tsx

@@ -29,18 +29,35 @@ export function CategoryHeader({
 	const countBadge = count !== undefined ? ` (${count})` : "";
 	const statusText = status ? ` ${status}` : "";
 
-	// Simple format without dynamic line calculation
+	// Flex row instead of one flat <text>: a flat text wraps when the pane is
+	// narrower than the row ("by MadAppGang" lost its final character and the wrap
+	// shifted every item below by one line). Here the dash filler is the only
+	// element allowed to shrink to nothing, so the badge survives at any width
+	// and the title clips last.
 	return (
-		<text fg={theme.colors.text}>
-			<span fg={theme.colors.muted}>{expandIcon}</span>
-			<span fg={theme.colors.text}>
-				<strong> {title}</strong>
-			</span>
-			<span fg={theme.colors.muted}>{versionBadge}</span>
-			<span fg={theme.colors.muted}>{countBadge}</span>
-			<span fg={theme.colors.border}> ────</span>
-			<span fg={statusColor}>{statusText}</span>
-		</text>
+		<box flexDirection="row" width="100%" height={1} overflow="hidden">
+			<box flexShrink={1} minWidth={4} overflow="hidden" height={1}>
+				<text fg={theme.colors.text}>
+					<span fg={theme.colors.muted}>{expandIcon}</span>
+					<span fg={theme.colors.text}>
+						<strong> {title}</strong>
+					</span>
+					<span fg={theme.colors.muted}>{versionBadge}</span>
+					<span fg={theme.colors.muted}>{countBadge}</span>
+				</text>
+			</box>
+			{/* flexShrink 100: the filler must be the first thing sacrificed. With equal
+			    shrink factors yoga takes width from the (larger-basis) title first, which
+			    clipped a character off the title while all four dashes survived. */}
+			<box flexShrink={100} minWidth={0} overflow="hidden" height={1}>
+				<text fg={theme.colors.border}> ────</text>
+			</box>
+			{status ? (
+				<box flexShrink={0} height={1}>
+					<text fg={statusColor}>{statusText}</text>
+				</box>
+			) : null}
+		</box>
 	);
 }
 

package/src/ui/components/ScrollableList.tsx

@@ -70,6 +70,14 @@ export function ScrollableList<T>({
 				<box
 					key={getKey ? getKey(item, originalIndex) : `${originalIndex}`}
 					width="100%"
+					// height=1 is load-bearing, not cosmetic. overflow="hidden" alone clips
+					// CONTENT but lets the box GROW: an over-wide <text> wraps to a second
+					// line, the row becomes two lines tall, and every item below shifts —
+					// which rendered as a phantom blank line under "Magus Marketing" and
+					// the last two plugins composited onto one row. The list's scroll math
+					// assumes one line per item; this makes that assumption true.
+					height={1}
+					flexShrink={0}
 					overflow="hidden"
 				>
 					{renderItem(item, originalIndex, originalIndex === selectedIndex)}

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

@@ -1,5 +1,8 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
+import type { ScrollBoxRenderable } from "@opentui/core";
 import { useDimensions } from "../../state/DimensionsContext.js";
+import { useKeyboard } from "../../hooks/useKeyboard.js";
+import { useApp } from "../../state/AppContext.js";
 import { TabBar } from "../TabBar.js";
 import type { Screen } from "../../state/types.js";
 import { FooterHints, type FooterHint } from "./FooterHints.js";
@@ -40,6 +43,12 @@ interface ScreenLayoutProps {
 	listPanel: React.ReactNode;
 	/** Right panel content (detail view) */
 	detailPanel: React.ReactNode;
+	/**
+	 * Identity of the detail content, e.g. the selected row's id. When it
+	 * changes, the detail pane scrolls back to the top — a reading position
+	 * belongs to one document, not to the panel.
+	 */
+	detailKey?: string;
 }
 
 const HEADER_COLOR = theme.colors.accent;
@@ -54,8 +63,10 @@ export function ScreenLayout({
 	footerHints,
 	listPanel,
 	detailPanel,
+	detailKey,
 }: ScreenLayoutProps) {
 	const dimensions = useDimensions();
+	const { state } = useApp();
 
 	const hasSearchBar = search && (search.isActive || search.query);
 
@@ -65,6 +76,34 @@ export function ScreenLayout({
 	const panelHeight = Math.max(5, dimensions.contentHeight - fixedHeight);
 	const lineWidth = Math.max(10, dimensions.terminalWidth - 4);
 
+	const detailScrollRef = useRef<ScrollBoxRenderable | null>(null);
+
+	// The detail pane has no cursor, so it needs its own scroll keys: arrows
+	// move the LIST selection, and the wheel only helps when the terminal
+	// delivers mouse reports (see src/main.tsx). PgUp/PgDn page with two rows
+	// of overlap so a page turn doesn't lose the reader's place; Ctrl+U/Ctrl+D
+	// half-page in the pager tradition — and exist because a MacBook keyboard
+	// hides PgDn behind Fn+↓, where nobody finds it.
+	const detailPageStep = Math.max(1, panelHeight - 2);
+	const detailHalfStep = Math.max(1, Math.floor(panelHeight / 2));
+	useKeyboard((event) => {
+		if (state.modal) return;
+		const ctrl = event.ctrl === true;
+		if (event.name === "pageup" || (ctrl && event.name === "u")) {
+			detailScrollRef.current?.scrollBy(
+				event.name === "pageup" ? -detailPageStep : -detailHalfStep,
+			);
+		} else if (event.name === "pagedown" || (ctrl && event.name === "d")) {
+			detailScrollRef.current?.scrollBy(
+				event.name === "pagedown" ? detailPageStep : detailHalfStep,
+			);
+		}
+	});
+
+	useEffect(() => {
+		if (detailKey !== undefined) detailScrollRef.current?.scrollTo(0);
+	}, [detailKey]);
+
 	return (
 		<box flexDirection="column" height={dimensions.contentHeight}>
 			{/* Line above tabs */}
@@ -90,9 +129,14 @@ export function ScreenLayout({
 				flexDirection="row"
 				justifyContent="space-between"
 			>
-				<text fg={HEADER_COLOR}>
-					<strong>{title}</strong>
-				</text>
+				{/* The title never yields: an overlong right-hand status once
+				    shrank it away and the two texts read as one sentence. Long
+				    content belongs in the `notice` row, not beside the title. */}
+				<box flexShrink={0} marginRight={2}>
+					<text fg={HEADER_COLOR}>
+						<strong>{title}</strong>
+					</text>
+				</box>
 				{subtitle && <text fg={theme.colors.muted}>{subtitle}</text>}
 				{!subtitle && statusLine ? statusLine : null}
 			</box>
@@ -147,18 +191,37 @@ export function ScreenLayout({
 					<text fg={theme.colors.border}>{"│".repeat(panelHeight)}</text>
 				</box>
 
-				{/* Detail panel — scrollable */}
+				{/* Detail panel — scrollable. The thumb is themed so the reader can
+				    see there is more below the fold; the track keeps the library
+				    default so it stays chrome, not signal. */}
 				<box width="50%" height={panelHeight} paddingLeft={1}>
-					<scrollbox height={panelHeight} scrollY={true} scrollX={false}>
+					<scrollbox
+						ref={detailScrollRef}
+						height={panelHeight}
+						scrollY={true}
+						scrollX={false}
+						verticalScrollbarOptions={{
+							showArrows: false,
+							trackOptions: {
+								foregroundColor: theme.colors.muted,
+							},
+						}}
+					>
 						<box flexDirection="column">{detailPanel}</box>
 					</scrollbox>
 				</box>
 			</box>
 
-			{/* Footer */}
+			{/* Footer — the layout appends its own scroll hint so every screen
+			    advertises the detail-pane keys without each screen repeating it */}
 			<box height={1} paddingLeft={1}>
 				{Array.isArray(footerHints) ? (
-					<FooterHints hints={footerHints as FooterHint[]} />
+					<FooterHints
+						hints={[
+							...(footerHints as FooterHint[]),
+							{ keys: ["^U/^D", "PgUp/Dn"], label: "scroll" },
+						]}
+					/>
 				) : typeof footerHints === "string" ? (
 					<text fg={theme.colors.muted}>{footerHints}</text>
 				) : (

package/src/ui/screens/StylesScreen.tsx

@@ -866,31 +866,35 @@ export function StylesScreen() {
 
 	// ── Status line ───────────────────────────────────────────────────────────
 
-	// Order matters. A transient message wins while it lasts, so pressing a key
-	// always acknowledges the press — otherwise the fill banner below would
-	// shadow "already reading" and the second press would look ignored again,
-	// which is the bug this whole path exists to fix. The banner is the fallback
-	// because `statusMsg` is local and dies when the screen unmounts, leaving it
-	// the only thing that still reports work in flight after a tab switch.
-	const statusContent = statusMsg ? (
-		<text fg={theme.colors.text}>
-			<span
-				fg={
-					statusMsg.tone === "success"
-						? theme.colors.success
-						: theme.colors.danger
-				}
-			>
-				{statusMsg.text}
-			</span>
+	// Transient feedback takes the full-width notice row under the header, not
+	// the header itself: a long message beside the title used to shrink the
+	// title away, and the two ran together as one garbled sentence ("claudeup
+	// Styleevidence-first ships with…"). Order matters inside the row. A
+	// message wins while it lasts, so pressing a key always acknowledges the
+	// press — otherwise the fill banner below would shadow "already reading"
+	// and the second press would look ignored again, which is the bug this
+	// path exists to fix. The banner is the fallback because `statusMsg` is
+	// local and dies when the screen unmounts, leaving it the only thing that
+	// still reports work in flight after a tab switch.
+	const noticeContent = statusMsg ? (
+		<text
+			fg={
+				statusMsg.tone === "success"
+					? theme.colors.success
+					: theme.colors.danger
+			}
+		>
+			{statusMsg.text}
 		</text>
 	) : isFilling ? (
-		<text fg={theme.colors.text}>
-			<span fg={theme.colors.warning}>
-				Reading the codebase to fill a template… this can take a few minutes
-			</span>
+		<text fg={theme.colors.warning}>
+			Reading the codebase to fill a template… this can take a few minutes
 		</text>
-	) : (
+	) : undefined;
+
+	// The header keeps only the short ambient state — it shares its row with
+	// the title and must never crowd it.
+	const statusContent = (
 		<text fg={theme.colors.text}>
 			<span fg={theme.colors.muted}>Active: </span>
 			<span
@@ -993,6 +997,7 @@ export function StylesScreen() {
 			title="claudeup Styles"
 			currentScreen="styles"
 			statusLine={statusContent}
+			notice={noticeContent}
 			search={
 				stylesState.searchQuery || isSearchActive
 					? {
@@ -1082,6 +1087,7 @@ export function StylesScreen() {
 				</box>
 			}
 			detailPanel={renderStyleDetail(selectedItem, detailWidth)}
+			detailKey={selectedItem?.id ?? ""}
 		/>
 	);
 }