claudeup 4.35.1 → 4.37.0

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

@@ -1,15 +1,20 @@
-import React from "react";
+import type React from "react";
+import { theme } from "../../theme.js";
 
 /** 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;
+	/** 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";
+// The shared chip palette, not a local one. This file used to define its own
+// (`theme.colors.dim` block + terminal-foreground ink), which is why the footer
+// stayed a low-contrast grey-on-grey strip after the palette was made vivid —
+// the new colours simply never reached it. Anything chip-shaped uses theme.hints.
+const KEY_BG = theme.hints.defaultBg;
+const KEY_FG = theme.hints.fg;
+const LABEL_FG = theme.colors.muted;
 const GAP = "   ";
 
 /**
@@ -20,33 +25,35 @@ const GAP = "   ";
  * 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>;
+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 fg={theme.colors.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} />;
+	return <FooterHints hints={hints} />;
 }
 
 export default FooterHints;

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { theme, type UiColor } from "../../theme.js";
 
 interface PanelProps {
 	/** Panel title */
@@ -6,9 +7,9 @@ interface PanelProps {
 	/** Panel content */
 	children: React.ReactNode;
 	/** Border color */
-	borderColor?: string;
+	borderColor?: UiColor;
 	/** Title color */
-	titleColor?: string;
+	titleColor?: UiColor;
 	/** Panel width - number or percentage like "50%" */
 	width?: number | `${number}%` | "auto";
 	/** Panel height - number or percentage like "50%" */
@@ -22,14 +23,14 @@ interface PanelProps {
 export function Panel({
 	title,
 	children,
-	borderColor = "#7e57c2",
-	titleColor = "#7e57c2",
+	borderColor = theme.colors.accent,
+	titleColor = theme.colors.accent,
 	width,
 	height,
 	flexGrow = 1,
 	focused = false,
 }: PanelProps) {
-	const activeColor = focused ? "#7e57c2" : borderColor;
+	const activeColor = focused ? theme.colors.accent : borderColor;
 
 	return (
 		<box

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { theme } from "../../theme.js";
 
 interface ProgressBarProps {
 	/** Progress message */
@@ -21,9 +22,9 @@ export function ProgressBar({ message, current, total }: ProgressBarProps) {
 
 		return (
 			<box>
-				<text fg="cyan">⟳</text>
-				<text> {message} </text>
-				<text fg="cyan">
+				<text fg={theme.colors.info}>⟳</text>
+				<text fg={theme.colors.text}> {message} </text>
+				<text fg={theme.colors.info}>
 					[{bar}] {current}/{total}
 				</text>
 			</box>
@@ -33,9 +34,9 @@ export function ProgressBar({ message, current, total }: ProgressBarProps) {
 	// Indeterminate progress
 	return (
 		<box>
-			<text fg="cyan">⟳</text>
-			<text> {message}</text>
-			<text fg="gray"> ...</text>
+			<text fg={theme.colors.info}>⟳</text>
+			<text fg={theme.colors.text}> {message}</text>
+			<text fg={theme.colors.muted}> ...</text>
 		</box>
 	);
 }

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { theme } from "../../theme.js";
 
 interface ScopeTabsProps {
 	/** Current scope */
@@ -21,29 +22,29 @@ export function ScopeTabs({
 			{/* Project tab */}
 			<box>
 				{isProject ? (
-					<text bg="cyan" fg="black">
+					<text bg={theme.colors.info} fg={theme.hints.fg}>
 						<strong> ◆ Project </strong>
 					</text>
 				) : (
-					<text fg="gray"> ○ Project </text>
+					<text fg={theme.colors.muted}> ○ Project </text>
 				)}
 			</box>
 
 			{/* Global tab */}
 			<box>
 				{!isProject ? (
-					<text bg="magenta" fg="white">
+					<text bg={theme.colors.accent} fg={theme.hints.fg}>
 						<strong> ◆ Global </strong>
 					</text>
 				) : (
-					<text fg="gray"> ○ Global </text>
+					<text fg={theme.colors.muted}> ○ Global </text>
 				)}
 			</box>
 
 			{/* Toggle hint */}
 			{toggleHint && (
 				<box marginLeft={2}>
-					<text fg="#666666">({toggleHint})</text>
+					<text fg={theme.colors.muted}>({toggleHint})</text>
 				</box>
 			)}
 		</box>

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

@@ -3,6 +3,7 @@ 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";
+import { theme } from "../../theme.js";
 
 interface ScreenLayoutProps {
 	/** Screen title (e.g., "claudeup Plugins") */
@@ -22,6 +23,15 @@ interface ScreenLayoutProps {
 	};
 	/** Status line content (for screens without search) - shown in second row */
 	statusLine?: React.ReactNode;
+	/**
+	 * One-line warning shown under the header, above the content.
+	 *
+	 * For conditions that make the data on screen untrustworthy — not for
+	 * transient progress. It sits in the fixed chrome rather than in a panel so it
+	 * cannot be scrolled out of view, and it takes a row from the panels only
+	 * while it is present.
+	 */
+	notice?: React.ReactNode;
 	/** 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. */
@@ -32,7 +42,7 @@ interface ScreenLayoutProps {
 	detailPanel: React.ReactNode;
 }
 
-const HEADER_COLOR = "#7e57c2";
+const HEADER_COLOR = theme.colors.accent;
 
 export function ScreenLayout({
 	title,
@@ -40,6 +50,7 @@ export function ScreenLayout({
 	currentScreen,
 	search,
 	statusLine,
+	notice,
 	footerHints,
 	listPanel,
 	detailPanel,
@@ -49,8 +60,8 @@ export function ScreenLayout({
 	const hasSearchBar = search && (search.isActive || search.query);
 
 	// Fixed chrome: top line + tabs + line + header + separator + footer = 6
-	// Search bar adds 1 when active
-	const fixedHeight = 6 + (hasSearchBar ? 1 : 0);
+	// Search bar adds 1 when active; the notice adds 1 while present.
+	const fixedHeight = 6 + (hasSearchBar ? 1 : 0) + (notice ? 1 : 0);
 	const panelHeight = Math.max(5, dimensions.contentHeight - fixedHeight);
 	const lineWidth = Math.max(10, dimensions.terminalWidth - 4);
 
@@ -58,7 +69,7 @@ export function ScreenLayout({
 		<box flexDirection="column" height={dimensions.contentHeight}>
 			{/* Line above tabs */}
 			<box height={1} paddingLeft={1} paddingRight={1}>
-				<text fg="#333333">{"─".repeat(lineWidth)}</text>
+				<text fg={theme.colors.dim}>{"─".repeat(lineWidth)}</text>
 			</box>
 
 			{/* Tab bar */}
@@ -68,15 +79,21 @@ export function ScreenLayout({
 
 			{/* Line below tabs */}
 			<box height={1} paddingLeft={1} paddingRight={1}>
-				<text fg="#333333">{"─".repeat(lineWidth)}</text>
+				<text fg={theme.colors.dim}>{"─".repeat(lineWidth)}</text>
 			</box>
 
 			{/* Header — title on left, subtitle/status on right */}
-			<box height={1} paddingLeft={1} paddingRight={1} flexDirection="row" justifyContent="space-between">
+			<box
+				height={1}
+				paddingLeft={1}
+				paddingRight={1}
+				flexDirection="row"
+				justifyContent="space-between"
+			>
 				<text fg={HEADER_COLOR}>
 					<strong>{title}</strong>
 				</text>
-				{subtitle && <text fg="gray">{subtitle}</text>}
+				{subtitle && <text fg={theme.colors.muted}>{subtitle}</text>}
 				{!subtitle && statusLine ? statusLine : null}
 			</box>
 
@@ -84,24 +101,33 @@ export function ScreenLayout({
 			{hasSearchBar && (
 				<box height={1} paddingLeft={1} paddingRight={1}>
 					{search.isActive ? (
-						<text>
-							<span fg="green">{"Filter: "}</span>
-							<span fg="white">{search.query}</span>
-							<span bg="white" fg="black"> </span>
+						<text fg={theme.colors.text}>
+							<span fg={theme.colors.success}>{"Filter: "}</span>
+							<span fg={theme.colors.text}>{search.query}</span>
+							<span bg={theme.colors.text} fg={theme.hints.fg}>
+								{" "}
+							</span>
 						</text>
 					) : (
-						<text>
-							<span fg="green">{"Filter: "}</span>
-							<span fg="yellow">{search.query}</span>
-							<span fg="gray">  (Esc to clear)</span>
+						<text fg={theme.colors.text}>
+							<span fg={theme.colors.success}>{"Filter: "}</span>
+							<span fg={theme.colors.warning}>{search.query}</span>
+							<span fg={theme.colors.muted}> (Esc to clear)</span>
 						</text>
 					)}
 				</box>
 			)}
 
+			{/* Warning line — only when the data on screen cannot be trusted */}
+			{notice && (
+				<box height={1} paddingLeft={1} paddingRight={1}>
+					{notice}
+				</box>
+			)}
+
 			{/* Separator below header */}
 			<box height={1} paddingLeft={1} paddingRight={1}>
-				<text fg="#444444">{"─".repeat(lineWidth)}</text>
+				<text fg={theme.colors.border}>{"─".repeat(lineWidth)}</text>
 			</box>
 
 			{/* Main content area */}
@@ -118,19 +144,13 @@ export function ScreenLayout({
 
 				{/* Vertical separator */}
 				<box flexDirection="column" width={1} height={panelHeight}>
-					<text fg="#444444">{"│".repeat(panelHeight)}</text>
+					<text fg={theme.colors.border}>{"│".repeat(panelHeight)}</text>
 				</box>
 
 				{/* Detail panel — scrollable */}
 				<box width="50%" height={panelHeight} paddingLeft={1}>
-					<scrollbox
-						height={panelHeight}
-						scrollY={true}
-						scrollX={false}
-					>
-						<box flexDirection="column">
-							{detailPanel}
-						</box>
+					<scrollbox height={panelHeight} scrollY={true} scrollX={false}>
+						<box flexDirection="column">{detailPanel}</box>
 					</scrollbox>
 				</box>
 			</box>
@@ -140,7 +160,7 @@ export function ScreenLayout({
 				{Array.isArray(footerHints) ? (
 					<FooterHints hints={footerHints as FooterHint[]} />
 				) : typeof footerHints === "string" ? (
-					<text fg="gray">{footerHints}</text>
+					<text fg={theme.colors.muted}>{footerHints}</text>
 				) : (
 					footerHints
 				)}

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

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

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

@@ -1,5 +1,6 @@
 import React from "react";
 import { useKeyboard } from "../../hooks/useKeyboard.js";
+import { theme } from "../../theme.js";
 
 interface ConfirmModalProps {
 	/** Modal title */
@@ -19,9 +20,9 @@ export function ConfirmModal({
 	onCancel,
 }: ConfirmModalProps) {
 	useKeyboard((key) => {
-		if (key.name === "y" || key.name === "Y") {
+		if (key.name === "y") {
 			onConfirm();
-		} else if (key.name === "n" || key.name === "N" || key.name === "escape") {
+		} else if (key.name === "n" || key.name === "escape") {
 			onCancel();
 		}
 	});
@@ -31,8 +32,8 @@ export function ConfirmModal({
 			flexDirection="column"
 			border
 			borderStyle="rounded"
-			borderColor="#525252"
-			backgroundColor="#1C1C1E"
+			borderColor={theme.colors.dim}
+			backgroundColor={theme.surface.bg}
 			paddingLeft={3}
 			paddingRight={3}
 			paddingTop={1}
@@ -40,19 +41,19 @@ export function ConfirmModal({
 			width={60}
 		>
 			<box marginBottom={1}>
-				<text fg="#EDEDED">
+				<text fg={theme.colors.text}>
 					<strong>{title}</strong>
 				</text>
 			</box>
 			<box marginBottom={1}>
-				<text fg="#A1A1AA">{message}</text>
+				<text fg={theme.colors.muted}>{message}</text>
 			</box>
 			<box marginTop={1} flexDirection="row">
-				<text fg="#71717A">Press </text>
-				<text fg="#EDEDED">Y</text>
-				<text fg="#71717A"> to confirm • </text>
-				<text fg="#EDEDED">N</text>
-				<text fg="#71717A"> to cancel</text>
+				<text fg={theme.colors.muted}>Press </text>
+				<text fg={theme.colors.text}>Y</text>
+				<text fg={theme.colors.muted}> to confirm • </text>
+				<text fg={theme.colors.text}>N</text>
+				<text fg={theme.colors.muted}> to cancel</text>
 			</box>
 		</box>
 	);

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { theme } from "../../theme.js";
 
 interface InputModalProps {
 	/** Modal title */
@@ -24,8 +25,8 @@ export function InputModal({
 			flexDirection="column"
 			border
 			borderStyle="rounded"
-			borderColor="#525252"
-			backgroundColor="#1C1C1E"
+			borderColor={theme.colors.dim}
+			backgroundColor={theme.surface.bg}
 			paddingLeft={3}
 			paddingRight={3}
 			paddingTop={1}
@@ -33,16 +34,23 @@ export function InputModal({
 			width={60}
 		>
 			<box marginBottom={1}>
-				<text fg="#EDEDED">
+				<text fg={theme.colors.text}>
 					<strong>{title}</strong>
 				</text>
 			</box>
 
 			<box marginBottom={1}>
-				<text fg="#A1A1AA">{label}</text>
+				<text fg={theme.colors.muted}>{label}</text>
 			</box>
 
-			<box border borderStyle="rounded" borderColor="#3F3F46" paddingLeft={1} paddingRight={1} width={54}>
+			<box
+				border
+				borderStyle="rounded"
+				borderColor={theme.colors.dim}
+				paddingLeft={1}
+				paddingRight={1}
+				width={54}
+			>
 				<input
 					value={defaultValue}
 					onSubmit={onSubmit as any}
@@ -52,7 +60,7 @@ export function InputModal({
 			</box>
 
 			<box marginTop={1}>
-				<text fg="#71717A">↵ to confirm • Esc to cancel</text>
+				<text fg={theme.colors.muted}>↵ to confirm • Esc to cancel</text>
 			</box>
 		</box>
 	);

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

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from "react";
+import { theme } from "../../theme.js";
 
 interface LoadingModalProps {
 	/** Loading message — supports multiline (first line = status, subsequent = detail) */
@@ -27,20 +28,20 @@ export function LoadingModal({ message }: LoadingModalProps) {
 			flexDirection="column"
 			border
 			borderStyle="rounded"
-			borderColor="#525252"
-			backgroundColor="#1C1C1E"
+			borderColor={theme.colors.dim}
+			backgroundColor={theme.surface.bg}
 			paddingLeft={3}
 			paddingRight={3}
 			paddingTop={1}
 			paddingBottom={1}
 		>
 			<box flexDirection="row">
-				<text fg="#A1A1AA">{SPINNER_FRAMES[frame]}</text>
-				<text fg="#EDEDED"> {mainMessage}</text>
+				<text fg={theme.colors.muted}>{SPINNER_FRAMES[frame]}</text>
+				<text fg={theme.colors.text}> {mainMessage}</text>
 			</box>
 			{detail ? (
 				<box marginTop={0} paddingLeft={2}>
-					<text fg="#525252">{detail}</text>
+					<text fg={theme.colors.dim}>{detail}</text>
 				</box>
 			) : null}
 		</box>

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

@@ -1,5 +1,6 @@
 import React from "react";
 import { useKeyboard } from "../../hooks/useKeyboard.js";
+import { theme } from "../../theme.js";
 
 interface MessageModalProps {
 	/** Modal title */
@@ -13,9 +14,9 @@ interface MessageModalProps {
 }
 
 const variantConfig = {
-	info: { icon: "ℹ", color: "#60A5FA" },
-	success: { icon: "✓", color: "#4ADE80" },
-	error: { icon: "✗", color: "#F87171" },
+	info: { icon: "ℹ", color: theme.colors.link },
+	success: { icon: "✓", color: theme.colors.success },
+	error: { icon: "✗", color: theme.colors.danger },
 } as const;
 
 export function MessageModal({
@@ -36,8 +37,8 @@ export function MessageModal({
 			flexDirection="column"
 			border
 			borderStyle="rounded"
-			borderColor="#525252"
-			backgroundColor="#1C1C1E"
+			borderColor={theme.colors.dim}
+			backgroundColor={theme.surface.bg}
 			paddingLeft={3}
 			paddingRight={3}
 			paddingTop={1}
@@ -46,17 +47,17 @@ export function MessageModal({
 		>
 			<box marginBottom={1}>
 				<text fg={config.color}>{config.icon} </text>
-				<text fg="#EDEDED">
+				<text fg={theme.colors.text}>
 					<strong>{title}</strong>
 				</text>
 			</box>
 
 			<box marginBottom={1}>
-				<text fg="#A1A1AA">{message}</text>
+				<text fg={theme.colors.muted}>{message}</text>
 			</box>
 
 			<box marginTop={1}>
-				<text fg="#71717A">Press any key to continue</text>
+				<text fg={theme.colors.muted}>Press any key to continue</text>
 			</box>
 		</box>
 	);

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

@@ -1,6 +1,7 @@
 import React from "react";
 import type { SelectOption } from "../../state/types.js";
 import { useDimensions } from "../../state/DimensionsContext.js";
+import { theme } from "../../theme.js";
 
 interface SelectModalProps {
 	/** Modal title */
@@ -44,8 +45,8 @@ export function SelectModal({
 			flexDirection="column"
 			border
 			borderStyle="rounded"
-			borderColor="#525252"
-			backgroundColor="#1C1C1E"
+			borderColor={theme.colors.dim}
+			backgroundColor={theme.surface.bg}
 			paddingLeft={3}
 			paddingRight={3}
 			paddingTop={1}
@@ -53,21 +54,24 @@ export function SelectModal({
 			width={width}
 		>
 			<box marginBottom={1}>
-				<text fg="#EDEDED">
+				<text fg={theme.colors.text}>
 					<strong>{title}</strong>
 				</text>
 			</box>
 
 			<box marginBottom={1}>
-				<text fg="#A1A1AA">{message}</text>
+				<text fg={theme.colors.muted}>{message}</text>
 			</box>
 
 			<box flexDirection="column" paddingLeft={1}>
 				{options.map((option, idx) => {
 					const isSelected = idx === selectedIndex;
 					return (
-						<text key={option.value} fg={isSelected ? "#F4F4F5" : "#A1A1AA"}>
-							<span fg={isSelected ? "#F4F4F5" : "#71717A"}>
+						<text
+							key={option.value}
+							fg={isSelected ? theme.colors.text : theme.colors.muted}
+						>
+							<span fg={isSelected ? theme.colors.text : theme.colors.muted}>
 								{isSelected ? "❯ " : "  "}
 							</span>
 							{isSelected ? <strong>{option.label}</strong> : option.label}
@@ -77,7 +81,7 @@ export function SelectModal({
 			</box>
 
 			<box marginTop={1}>
-				<text fg="#71717A">↑↓ Select • ↵ Confirm • Esc Cancel</text>
+				<text fg={theme.colors.muted}>↑↓ Select • ↵ Confirm • Esc Cancel</text>
 			</box>
 		</box>
 	);