claudeup 4.35.1 → 4.37.0

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

@@ -1,5 +1,6 @@
 import React from "react";
 import type { VersionMismatchInfo } from "../../../services/plugin-version-check.js";
+import { theme } from "../../theme.js";
 
 interface VersionMismatchModalProps {
 	/** List of version mismatches detected */
@@ -8,15 +9,15 @@ interface VersionMismatchModalProps {
 	defaultIndex?: number;
 }
 
-const COLOR_BG = "#1C1C1E";
-const COLOR_BORDER = "#525252";
-const COLOR_TITLE = "#EDEDED";
-const COLOR_MUTED = "#A1A1AA";
-const COLOR_DIM = "#71717A";
-const COLOR_WARN = "#FBBF24";
-const COLOR_BAD = "#F87171";
-const COLOR_GOOD = "#4ADE80";
-const COLOR_ACCENT = "#F4F4F5";
+const COLOR_BG = theme.surface.bg;
+const COLOR_BORDER = theme.colors.dim;
+const COLOR_TITLE = theme.colors.text;
+const COLOR_MUTED = theme.colors.muted;
+const COLOR_DIM = theme.colors.muted;
+const COLOR_WARN = theme.colors.warning;
+const COLOR_BAD = theme.colors.danger;
+const COLOR_GOOD = theme.colors.success;
+const COLOR_ACCENT = theme.colors.text;
 
 /** Truncate a plugin name to fit the column width */
 function shortName(pluginId: string, max: number): string {
@@ -80,7 +81,8 @@ export function VersionMismatchModal({
 					</strong>
 				</text>
 				<text fg={COLOR_BORDER}>
-					{"─".repeat(NAME_W - 1)} {"─".repeat(VER_W - 1)} {"─".repeat(VER_W - 1)}
+					{"─".repeat(NAME_W - 1)} {"─".repeat(VER_W - 1)}{" "}
+					{"─".repeat(VER_W - 1)}
 				</text>
 
 				{/* Table rows */}
@@ -107,9 +109,7 @@ export function VersionMismatchModal({
 
 			{/* Options */}
 			<box flexDirection="column" paddingLeft={1}>
-				<text
-					fg={selectedIndex === 0 ? COLOR_ACCENT : COLOR_MUTED}
-				>
+				<text fg={selectedIndex === 0 ? COLOR_ACCENT : COLOR_MUTED}>
 					<span fg={selectedIndex === 0 ? COLOR_ACCENT : COLOR_DIM}>
 						{selectedIndex === 0 ? "❯ " : "  "}
 					</span>
@@ -119,9 +119,7 @@ export function VersionMismatchModal({
 						"Fix all projects"
 					)}
 				</text>
-				<text
-					fg={selectedIndex === 1 ? COLOR_ACCENT : COLOR_MUTED}
-				>
+				<text fg={selectedIndex === 1 ? COLOR_ACCENT : COLOR_MUTED}>
 					<span fg={selectedIndex === 1 ? COLOR_ACCENT : COLOR_DIM}>
 						{selectedIndex === 1 ? "❯ " : "  "}
 					</span>

package/src/ui/components/primitives/ActionHints.tsx

@@ -2,13 +2,13 @@ import React from "react";
 import { theme } from "../../theme.js";
 
 export interface Hint {
-  key: string;
-  label: string;
-  tone?: "default" | "primary" | "danger";
+	key: string;
+	label: string;
+	tone?: "default" | "primary" | "danger";
 }
 
 interface ActionHintsProps {
-  hints: Hint[];
+	hints: Hint[];
 }
 
 /**
@@ -16,26 +16,26 @@ interface ActionHintsProps {
  * Renders: [bg] key [/bg] label
  */
 export function ActionHints({ hints }: ActionHintsProps) {
-  return (
-    <box flexDirection="column" marginTop={1}>
-      {hints.map((hint) => (
-        <box key={`${hint.key}:${hint.label}`}>
-          <text
-            bg={
-              hint.tone === "danger"
-                ? theme.hints.dangerBg
-                : hint.tone === "primary"
-                  ? theme.hints.primaryBg
-                  : theme.hints.defaultBg
-            }
-            fg="black"
-          >
-            {" "}
-            {hint.key}{" "}
-          </text>
-          <text fg="gray"> {hint.label}</text>
-        </box>
-      ))}
-    </box>
-  );
+	return (
+		<box flexDirection="column" marginTop={1}>
+			{hints.map((hint) => (
+				<box key={`${hint.key}:${hint.label}`}>
+					<text
+						bg={
+							hint.tone === "danger"
+								? theme.hints.dangerBg
+								: hint.tone === "primary"
+									? theme.hints.primaryBg
+									: theme.hints.defaultBg
+						}
+						fg={theme.hints.fg}
+					>
+						{" "}
+						{hint.key}{" "}
+					</text>
+					<text fg={theme.colors.muted}> {hint.label}</text>
+				</box>
+			))}
+		</box>
+	);
 }

package/src/ui/components/primitives/DetailSection.tsx

@@ -1,22 +1,23 @@
 import React from "react";
+import { theme } from "../../theme.js";
 
 interface DetailSectionProps {
-  title?: string;
-  children: React.ReactNode;
+	title?: string;
+	children: React.ReactNode;
 }
 
 /**
  * A labeled section in a detail panel with optional title header.
  */
 export function DetailSection({ title, children }: DetailSectionProps) {
-  return (
-    <box flexDirection="column" marginTop={1}>
-      {title ? (
-        <text fg="cyan">
-          <strong>{title}</strong>
-        </text>
-      ) : null}
-      {children}
-    </box>
-  );
+	return (
+		<box flexDirection="column" marginTop={1}>
+			{title ? (
+				<text fg={theme.colors.info}>
+					<strong>{title}</strong>
+				</text>
+			) : null}
+			{children}
+		</box>
+	);
 }

package/src/ui/components/primitives/KeyValueLine.tsx

@@ -1,8 +1,9 @@
 import React from "react";
+import { theme } from "../../theme.js";
 
 interface KeyValueLineProps {
-  label: string;
-  value: React.ReactNode;
+	label: string;
+	value: React.ReactNode;
 }
 
 /**
@@ -10,10 +11,10 @@ interface KeyValueLineProps {
  * Label is padded to 10 chars for consistent alignment.
  */
 export function KeyValueLine({ label, value }: KeyValueLineProps) {
-  return (
-    <text>
-      <span fg="gray">{label.padEnd(10)}</span>
-      {value}
-    </text>
-  );
+	return (
+		<text fg={theme.colors.text}>
+			<span fg={theme.colors.muted}>{label.padEnd(10)}</span>
+			{value}
+		</text>
+	);
 }

package/src/ui/components/primitives/ListCategoryRow.tsx

@@ -3,36 +3,34 @@ import { theme } from "../../theme.js";
 import { SelectableRow } from "./SelectableRow.js";
 
 interface ListCategoryRowProps {
-  title: string;
-  expanded?: boolean;
-  count?: number;
-  badge?: string;
-  tone?: keyof typeof theme.category;
-  selected: boolean;
+	title: string;
+	expanded?: boolean;
+	count?: number;
+	badge?: string;
+	tone?: keyof typeof theme.category;
+	selected: boolean;
 }
 
 export function ListCategoryRow({
-  title,
-  expanded = false,
-  count,
-  badge,
-  tone = "gray",
-  selected,
+	title,
+	expanded = false,
+	count,
+	badge,
+	tone = "gray",
+	selected,
 }: ListCategoryRowProps) {
-  const colors = theme.category[tone];
-  const label = `${expanded ? "▼" : "▶"} ${title}${count !== undefined ? ` (${count})` : ""}`;
+	const colors = theme.category[tone];
+	const label = `${expanded ? "▼" : "▶"} ${title}${count !== undefined ? ` (${count})` : ""}`;
 
-  return (
-    <SelectableRow selected={selected}>
-      {!selected && (
-        <span bg={colors.bg} fg={colors.fg}>
-          <strong> {label} </strong>
-        </span>
-      )}
-      {selected && <strong> {label} </strong>}
-      {!selected && badge ? (
-        <span fg={colors.badgeFg}> {badge}</span>
-      ) : null}
-    </SelectableRow>
-  );
+	return (
+		<SelectableRow selected={selected}>
+			{!selected && (
+				<span bg={colors.bg} fg={colors.fg}>
+					<strong> {label} </strong>
+				</span>
+			)}
+			{selected && <strong> {label} </strong>}
+			{!selected && badge ? <span fg={colors.badgeFg}> {badge}</span> : null}
+		</SelectableRow>
+	);
 }

package/src/ui/components/primitives/MetaText.tsx

@@ -2,13 +2,13 @@ import React from "react";
 import { theme } from "../../theme.js";
 
 interface MetaTextProps {
-  text: string;
-  tone?: "muted" | "warning" | "success" | "danger";
+	text: string;
+	tone?: "muted" | "warning" | "success" | "danger";
 }
 
 /**
  * Subdued text for versions, stars, status indicators.
  */
 export function MetaText({ text, tone = "muted" }: MetaTextProps) {
-  return <span fg={theme.meta[tone]}>{text}</span>;
+	return <span fg={theme.meta[tone]}>{text}</span>;
 }

package/src/ui/components/primitives/ScopeDetail.tsx

@@ -2,20 +2,20 @@ import React from "react";
 import { theme } from "../../theme.js";
 
 interface ScopeDetailScope {
-  user?: boolean;
-  project?: boolean;
-  local?: boolean;
+	user?: boolean;
+	project?: boolean;
+	local?: boolean;
 }
 
 interface ScopeDetailPaths {
-  user?: string;
-  project?: string;
-  local?: string;
+	user?: string;
+	project?: string;
+	local?: string;
 }
 
 interface ScopeDetailProps {
-  scopes: ScopeDetailScope;
-  paths?: ScopeDetailPaths;
+	scopes: ScopeDetailScope;
+	paths?: ScopeDetailPaths;
 }
 
 /**
@@ -23,45 +23,45 @@ interface ScopeDetailProps {
  * Renders each scope as: [bg=color] key [/bg] ● or ○ Label path
  */
 export function ScopeDetail({ scopes, paths }: ScopeDetailProps) {
-  const items = [
-    {
-      key: "u",
-      label: "User",
-      color: theme.scopes.user,
-      active: scopes.user,
-      path: paths?.user,
-    },
-    {
-      key: "p",
-      label: "Project",
-      color: theme.scopes.project,
-      active: scopes.project,
-      path: paths?.project,
-    },
-    {
-      key: "l",
-      label: "Local",
-      color: theme.scopes.local,
-      active: scopes.local,
-      path: paths?.local,
-    },
-  ].filter((i) => i.path !== undefined || i.active !== undefined);
+	const items = [
+		{
+			key: "u",
+			label: "User",
+			color: theme.scopes.user,
+			active: scopes.user,
+			path: paths?.user,
+		},
+		{
+			key: "p",
+			label: "Project",
+			color: theme.scopes.project,
+			active: scopes.project,
+			path: paths?.project,
+		},
+		{
+			key: "l",
+			label: "Local",
+			color: theme.scopes.local,
+			active: scopes.local,
+			path: paths?.local,
+		},
+	].filter((i) => i.path !== undefined || i.active !== undefined);
 
-  return (
-    <box flexDirection="column">
-      {items.map((item) => (
-        <text key={item.key}>
-          <span bg={item.color} fg="black">
-            {" "}
-            {item.key}{" "}
-          </span>
-          <span fg={item.active ? item.color : "gray"}>
-            {item.active ? " ● " : " ○ "}
-          </span>
-          <span fg={item.color}>{item.label}</span>
-          {item.path && <span fg="gray"> {item.path}</span>}
-        </text>
-      ))}
-    </box>
-  );
+	return (
+		<box flexDirection="column">
+			{items.map((item) => (
+				<text key={item.key}>
+					<span bg={item.color} fg={theme.hints.fg}>
+						{" "}
+						{item.key}{" "}
+					</span>
+					<span fg={item.active ? item.color : theme.colors.muted}>
+						{item.active ? " ● " : " ○ "}
+					</span>
+					<span fg={item.color}>{item.label}</span>
+					{item.path && <span fg={theme.colors.muted}> {item.path}</span>}
+				</text>
+			))}
+		</box>
+	);
 }

package/src/ui/components/primitives/ScopeSquares.tsx

@@ -1,33 +1,58 @@
-import React from "react";
+import type React from "react";
+import { scopeOffFill } from "../../theme-mode.js";
 import { theme } from "../../theme.js";
 
 interface ScopeSquaresProps {
-  user: boolean;
-  project: boolean;
-  local?: boolean;
-  selected?: boolean;
+	user: boolean;
+	project: boolean;
+	local?: boolean;
+	selected?: boolean;
 }
 
+/** Every segment is a filled block; only the fill colour says lit or unlit. */
+const SEGMENT = "■";
+
 /**
- * Colored filled/empty squares for scope display in list items.
- * ■ = installed in that scope, □ = not installed.
+ * Scope bar: three positional segments, user / project / local.
+ *
+ * Reads as a segmented indicator — each segment lit in its scope colour, or
+ * unlit in a fill that recedes toward the page. Position identifies the scope;
+ * the first segment is always user, the second project, the third local.
+ *
+ * The unlit fill used to be `theme.colors.muted` (#6B7280), the same mid-dark
+ * grey as de-emphasised body text. Against a light page that reads as a *dark*
+ * block, giving an unlit segment the same visual weight as a lit one — "non
+ * installed state is dark as well - confusing". The unlit fill now comes from
+ * `scopeOffFill()`, which steps toward whichever page the terminal actually has;
+ * see theme-mode.ts for why that one value cannot be fixed.
  */
 export function ScopeSquares({
-  user,
-  project,
-  local,
-  selected = false,
+	user,
+	project,
+	local,
+	selected = false,
 }: ScopeSquaresProps) {
-  const inactive = selected ? "white" : theme.colors.dim;
+	// On a selected row the background is our own accent, so an unlit segment
+	// recedes toward that block rather than toward the page.
+	const off = selected ? theme.selection.bg : scopeOffFill();
+	const lit = (on: boolean, color: string) =>
+		on ? (selected ? theme.selection.fg : color) : off;
+
+	const segments = [
+		lit(user, theme.scopes.user),
+		lit(project, theme.scopes.project),
+		...(local !== undefined ? [lit(local, theme.scopes.local)] : []),
+	];
 
-  // Returns fragments of <span> — safe to embed inside a <text> parent
-  return (
-    <>
-      <span fg={user ? theme.scopes.user : inactive}>■</span>
-      <span fg={project ? theme.scopes.project : inactive}>■</span>
-      {local !== undefined && (
-        <span fg={local ? theme.scopes.local : inactive}>■</span>
-      )}
-    </>
-  );
+	// Fragments of <span> — safe to embed inside a coloured <text> parent.
+	return (
+		<>
+			{segments.map((fg, i) => (
+				// biome-ignore lint/suspicious/noArrayIndexKey: fixed positional segments
+				<span key={i} fg={fg}>
+					{SEGMENT}
+				</span>
+			))}
+		</>
+	);
 }

package/src/ui/components/primitives/SelectableRow.tsx

@@ -1,24 +1,30 @@
-import React from "react";
+import type React from "react";
 import { theme } from "../../theme.js";
 
 interface SelectableRowProps {
-  selected: boolean;
-  indent?: number;
-  children: React.ReactNode;
+	selected: boolean;
+	indent?: number;
+	children: React.ReactNode;
 }
 
 export function SelectableRow({
-  selected,
-  indent = 0,
-  children,
+	selected,
+	indent = 0,
+	children,
 }: SelectableRowProps) {
-  return (
-    <text
-      bg={selected ? theme.selection.bg : undefined}
-      fg={selected ? theme.selection.fg : undefined}
-    >
-      {" ".repeat(indent)}
-      {children}
-    </text>
-  );
+	return (
+		<text
+			// Unselected: no background, so the row sits on the terminal's own page.
+			bg={selected ? theme.selection.bg : undefined}
+			// Unselected must still NAME a colour. `undefined` does not mean "the
+			// terminal's foreground" — OpenTUI's fallback for an unstyled cell is
+			// truecolor white, so every unselected row here rendered white-on-cream
+			// and vanished on a light theme. Same root cause as the original bug,
+			// reached by omission rather than by a wrong literal.
+			fg={selected ? theme.selection.fg : theme.colors.text}
+		>
+			{" ".repeat(indent)}
+			{children}
+		</text>
+	);
 }