claudeup 4.35.0 → 4.36.0

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>
+	);
 }

package/src/ui/hooks/useGitignoreModal.ts

@@ -11,86 +11,90 @@ import type { ModalState } from "../state/types.js";
  */
 
 export interface BuildModalArgs {
-  violationCount: number;
-  safeCount: number;
-  onFixSafe: () => void;
-  onOpenTab: () => void;
-  onDismiss: () => void;
+	violationCount: number;
+	safeCount: number;
+	onFixSafe: () => void;
+	onOpenTab: () => void;
+	onDismiss: () => void;
 }
 
 export function buildGitignoreModal(args: BuildModalArgs): ModalState {
-  const { violationCount, safeCount, onFixSafe, onOpenTab, onDismiss } = args;
-  const options = [
-    {
-      label:
-        safeCount > 0
-          ? `Add ${safeCount} missing .gitignore entr${safeCount === 1 ? "y" : "ies"}`
-          : "(no missing .gitignore entries)",
-      value: "fix-safe",
-    },
-    {
-      label: "Open Git State tab to review",
-      value: "open-tab",
-    },
-    {
-      label: "Dismiss",
-      value: "dismiss",
-    },
-  ];
-  return {
-    type: "select",
-    title: "Gitignore violations detected",
-    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: string) => {
-      if (value === "fix-safe") onFixSafe();
-      else if (value === "open-tab") onOpenTab();
-      else onDismiss();
-    },
-    onCancel: onDismiss,
-  };
+	const { violationCount, safeCount, onFixSafe, onOpenTab, onDismiss } = args;
+	const options = [
+		{
+			label:
+				safeCount > 0
+					? `Add ${safeCount} missing .gitignore entr${safeCount === 1 ? "y" : "ies"}`
+					: "(no missing .gitignore entries)",
+			value: "fix-safe",
+		},
+		{
+			label: "Open Git State tab to review",
+			value: "open-tab",
+		},
+		{
+			label: "Dismiss",
+			value: "dismiss",
+		},
+	];
+	return {
+		type: "select",
+		title: "Gitignore violations detected",
+		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: string) => {
+			if (value === "fix-safe") onFixSafe();
+			else if (value === "open-tab") onOpenTab();
+			else onDismiss();
+		},
+		onCancel: onDismiss,
+	};
 }
 
 export function useGitignoreModal() {
-  const { dispatch } = useApp();
-  const { navigateToScreen } = useNavigation();
+	const { dispatch } = useApp();
+	const { navigateToScreen } = useNavigation();
 
-  const show = useCallback(
-    (args: { violationCount: number; safeCount: number; onFixSafe: () => Promise<void> | void }) => {
-      if (args.violationCount === 0) return;
-      const dismiss = () => dispatch({ type: "HIDE_MODAL" });
-      const modal = buildGitignoreModal({
-        violationCount: args.violationCount,
-        safeCount: args.safeCount,
-        onFixSafe: () => {
-          dispatch({ type: "HIDE_MODAL" });
-          void Promise.resolve(args.onFixSafe()).catch((err) => {
-            dispatch({
-              type: "SHOW_MODAL",
-              modal: {
-                type: "message",
-                title: "Safe fixes failed",
-                message: err instanceof Error ? err.message : String(err),
-                variant: "error",
-                onDismiss: dismiss,
-              },
-            });
-          });
-        },
-        onOpenTab: () => {
-          dispatch({ type: "HIDE_MODAL" });
-          navigateToScreen("gitignore");
-        },
-        onDismiss: dismiss,
-      });
-      dispatch({ type: "SHOW_MODAL", modal });
-    },
-    [dispatch, navigateToScreen],
-  );
+	const show = useCallback(
+		(args: {
+			violationCount: number;
+			safeCount: number;
+			onFixSafe: () => Promise<void> | void;
+		}) => {
+			if (args.violationCount === 0) return;
+			const dismiss = () => dispatch({ type: "HIDE_MODAL" });
+			const modal = buildGitignoreModal({
+				violationCount: args.violationCount,
+				safeCount: args.safeCount,
+				onFixSafe: () => {
+					dispatch({ type: "HIDE_MODAL" });
+					void Promise.resolve(args.onFixSafe()).catch((err) => {
+						dispatch({
+							type: "SHOW_MODAL",
+							modal: {
+								type: "message",
+								title: "Safe fixes failed",
+								message: err instanceof Error ? err.message : String(err),
+								variant: "error",
+								onDismiss: dismiss,
+							},
+						});
+					});
+				},
+				onOpenTab: () => {
+					dispatch({ type: "HIDE_MODAL" });
+					navigateToScreen("gitignore");
+				},
+				onDismiss: dismiss,
+			});
+			dispatch({ type: "SHOW_MODAL", modal });
+		},
+		[dispatch, navigateToScreen],
+	);
 
-  return { show };
+	return { show };
 }

package/src/ui/registry.ts

@@ -1,27 +1,27 @@
 import type React from "react";
 
 export interface RowRenderProps<T> {
-  item: T;
-  isSelected: boolean;
-  width?: number;
+	item: T;
+	isSelected: boolean;
+	width?: number;
 }
 
 export interface DetailRenderProps<T> {
-  item: T;
+	item: T;
 }
 
 export interface Hint {
-  key: string;
-  label: string;
-  tone?: "default" | "primary" | "danger";
+	key: string;
+	label: string;
+	tone?: "default" | "primary" | "danger";
 }
 
 export interface ItemRenderer<T> {
-  renderRow: (props: RowRenderProps<T>) => React.ReactNode;
-  renderDetail: (props: DetailRenderProps<T>) => React.ReactNode;
-  getActionHints?: (item: T) => Hint[];
+	renderRow: (props: RowRenderProps<T>) => React.ReactNode;
+	renderDetail: (props: DetailRenderProps<T>) => React.ReactNode;
+	getActionHints?: (item: T) => Hint[];
 }
 
 export type RendererRegistry<TItem extends { kind: string }> = {
-  [K in TItem["kind"]]: ItemRenderer<Extract<TItem, { kind: K }>>;
+	[K in TItem["kind"]]: ItemRenderer<Extract<TItem, { kind: K }>>;
 };