claudeup 3.17.0 → 4.0.0

package/src/ui/renderers/profileRenderers.tsx

@@ -0,0 +1,410 @@
+import React from "react";
+import type { ItemRenderer } from "../registry.js";
+import type { ProfileEntry } from "../../types/index.js";
+import type { PredefinedProfile } from "../../data/predefined-profiles.js";
+import { theme } from "../theme.js";
+
+// ─── List item types ───────────────────────────────────────────────────────────
+
+export type ProfileListItem =
+  | { kind: "header"; label: string; color: string; count: number }
+  | { kind: "predefined"; profile: PredefinedProfile }
+  | { kind: "saved"; entry: ProfileEntry };
+
+// ─── Helpers ───────────────────────────────────────────────────────────────────
+
+function truncate(s: string, maxLen: number): string {
+  if (s.length <= maxLen) return s;
+  return s.slice(0, maxLen - 1) + "\u2026";
+}
+
+export function humanizeValue(_key: string, value: unknown): string {
+  if (typeof value === "boolean") return value ? "on" : "off";
+  if (typeof value !== "string") return String(value);
+  if (value === "claude-sonnet-4-6") return "Sonnet";
+  if (value === "claude-opus-4-6") return "Opus";
+  if (value === "claude-haiku-4-6") return "Haiku";
+  if (value.startsWith("claude-sonnet")) return "Sonnet";
+  if (value.startsWith("claude-opus")) return "Opus";
+  if (value.startsWith("claude-haiku")) return "Haiku";
+  return value;
+}
+
+export function humanizeKey(key: string): string {
+  const labels: Record<string, string> = {
+    effortLevel: "Effort",
+    model: "Model",
+    outputStyle: "Output",
+    alwaysThinkingEnabled: "Thinking",
+  };
+  return labels[key] ?? key;
+}
+
+export function stripSuffix(pluginName: string): string {
+  return pluginName
+    .replace(/@magus$/, "")
+    .replace(/@claude-plugins-official$/, "");
+}
+
+export function wrapNames(names: string[], lineMax = 40): string[] {
+  const lines: string[] = [];
+  let current = "";
+  for (const name of names) {
+    const add = current ? `, ${name}` : name;
+    if (current && current.length + add.length > lineMax) {
+      lines.push(current);
+      current = name;
+    } else {
+      current += current ? `, ${name}` : name;
+    }
+  }
+  if (current) lines.push(current);
+  return lines;
+}
+
+export function formatDate(iso: string): string {
+  try {
+    const d = new Date(iso);
+    return d.toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+    });
+  } catch {
+    return iso;
+  }
+}
+
+// ─── Header renderer ───────────────────────────────────────────────────────────
+
+const headerRenderer: ItemRenderer<{
+  kind: "header";
+  label: string;
+  color: string;
+  count: number;
+}> = {
+  renderRow: ({ item }) => (
+    <text bg={item.color} fg="white">
+      <strong>
+        {" "}
+        {item.label} ({item.count}){" "}
+      </strong>
+    </text>
+  ),
+  renderDetail: () => (
+    <text fg={theme.colors.muted}>Select a profile to see details</text>
+  ),
+};
+
+// ─── Predefined renderer ───────────────────────────────────────────────────────
+
+const DIVIDER = "────────────────────────";
+
+const predefinedRenderer: ItemRenderer<{ kind: "predefined"; profile: PredefinedProfile }> = {
+  renderRow: ({ item, isSelected }) => {
+    const { profile } = item;
+    const pluginCount =
+      profile.magusPlugins.length + profile.anthropicPlugins.length;
+    const skillCount = profile.skills.length;
+    const label = truncate(
+      `${profile.name} — ${pluginCount} plugins · ${skillCount} skill${skillCount !== 1 ? "s" : ""}`,
+      45,
+    );
+
+    if (isSelected) {
+      return (
+        <text bg="blue" fg="white">
+          {" "}
+          {label}{" "}
+        </text>
+      );
+    }
+
+    return (
+      <text>
+        <span fg={theme.colors.muted}>{"- "}</span>
+        <span fg={theme.colors.text}>{label}</span>
+      </text>
+    );
+  },
+
+  renderDetail: ({ item }) => {
+    const { profile } = item;
+    const magusNames = profile.magusPlugins;
+    const anthropicNames = profile.anthropicPlugins;
+    const magusLines = wrapNames(magusNames);
+    const anthropicLines = wrapNames(anthropicNames);
+    const skillLines = wrapNames(profile.skills);
+
+    const settingEntries = Object.entries(profile.settings).filter(
+      ([k]) => k !== "env",
+    );
+    const envMap =
+      (profile.settings["env"] as Record<string, string> | undefined) ?? {};
+    const tasksOn = envMap["CLAUDE_CODE_ENABLE_TASKS"] === "true";
+    const teamsOn = envMap["CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS"] === "true";
+
+    return (
+      <box flexDirection="column">
+        <text fg={theme.colors.text}>
+          <strong>{profile.name}</strong>
+        </text>
+        <box marginTop={1}>
+          <text fg={theme.colors.muted}>{profile.description}</text>
+        </box>
+        <box marginTop={1}>
+          <text fg={theme.colors.dim}>{DIVIDER}</text>
+        </box>
+        <box marginTop={1} flexDirection="column">
+          <text fg={theme.colors.muted}>
+            Magus plugins ({magusNames.length}):
+          </text>
+          {magusLines.map((line, i) => (
+            <text key={i} fg={theme.colors.info}>
+              {"  "}
+              {line}
+            </text>
+          ))}
+        </box>
+        <box marginTop={1} flexDirection="column">
+          <text fg={theme.colors.muted}>
+            Anthropic plugins ({anthropicNames.length}):
+          </text>
+          {anthropicLines.map((line, i) => (
+            <text key={i} fg={theme.colors.warning}>
+              {"  "}
+              {line}
+            </text>
+          ))}
+        </box>
+        <box marginTop={1} flexDirection="column">
+          <text fg={theme.colors.muted}>Skills ({profile.skills.length}):</text>
+          {skillLines.map((line, i) => (
+            <text key={i} fg={theme.colors.text}>
+              {"  "}
+              {line}
+            </text>
+          ))}
+        </box>
+        <box marginTop={1}>
+          <text fg={theme.colors.dim}>{DIVIDER}</text>
+        </box>
+        <box marginTop={1} flexDirection="column">
+          <text fg={theme.colors.muted}>Settings:</text>
+          {settingEntries.map(([k, v]) => (
+            <text key={k}>
+              <span fg={theme.colors.muted}>
+                {"  "}
+                {humanizeKey(k).padEnd(14)}
+              </span>
+              <span fg={theme.colors.text}>{humanizeValue(k, v)}</span>
+            </text>
+          ))}
+          {tasksOn && (
+            <text>
+              <span fg={theme.colors.muted}>
+                {"  "}
+                {"Tasks".padEnd(14)}
+              </span>
+              <span fg={theme.colors.text}>on</span>
+            </text>
+          )}
+          {teamsOn && (
+            <text>
+              <span fg={theme.colors.muted}>
+                {"  "}
+                {"Agent Teams".padEnd(14)}
+              </span>
+              <span fg={theme.colors.text}>on</span>
+            </text>
+          )}
+        </box>
+        <box marginTop={1}>
+          <text fg={theme.colors.dim}>{DIVIDER}</text>
+        </box>
+        <box marginTop={1}>
+          <text bg="blue" fg="white">
+            {" "}
+            Enter/a{" "}
+          </text>
+          <text fg={theme.colors.muted}> Apply to project</text>
+        </box>
+      </box>
+    );
+  },
+};
+
+// ─── Saved renderer ────────────────────────────────────────────────────────────
+
+const savedRenderer: ItemRenderer<{ kind: "saved"; entry: ProfileEntry }> = {
+  renderRow: ({ item, isSelected }) => {
+    const { entry } = item;
+    const pluginCount = Object.keys(entry.plugins).length;
+    const dateStr = formatDate(entry.updatedAt);
+    const label = truncate(
+      `${entry.name} — ${pluginCount} plugin${pluginCount !== 1 ? "s" : ""} · ${dateStr}`,
+      45,
+    );
+
+    if (isSelected) {
+      return (
+        <text bg={theme.selection.bg} fg={theme.selection.fg}>
+          {" "}
+          {label}{" "}
+        </text>
+      );
+    }
+
+    const scopeColor =
+      entry.scope === "user" ? theme.scopes.user : theme.scopes.project;
+    const scopeLabel = entry.scope === "user" ? "[user]" : "[proj]";
+
+    return (
+      <text>
+        <span fg={scopeColor}>{scopeLabel} </span>
+        <span fg={theme.colors.text}>{label}</span>
+      </text>
+    );
+  },
+
+  renderDetail: ({ item }) => {
+    const { entry: selectedProfile } = item;
+    const plugins = Object.keys(selectedProfile.plugins);
+    const cleanPlugins = plugins.map(stripSuffix);
+    const scopeColor =
+      selectedProfile.scope === "user" ? theme.scopes.user : theme.scopes.project;
+    const scopeLabel =
+      selectedProfile.scope === "user"
+        ? "User (~/.claude/profiles.json)"
+        : "Project (.claude/profiles.json — committed to git)";
+
+    return (
+      <box flexDirection="column">
+        <text fg={theme.colors.info}>
+          <strong>{selectedProfile.name}</strong>
+        </text>
+        <box marginTop={1}>
+          <text fg={theme.colors.muted}>Scope: </text>
+          <text fg={scopeColor}>{scopeLabel}</text>
+        </box>
+        <box marginTop={1}>
+          <text fg={theme.colors.muted}>
+            Created: {formatDate(selectedProfile.createdAt)} · Updated:{" "}
+            {formatDate(selectedProfile.updatedAt)}
+          </text>
+        </box>
+        <box marginTop={1} flexDirection="column">
+          <text fg={theme.colors.muted}>
+            Plugins ({plugins.length}
+            {plugins.length === 0 ? " — applying will disable all plugins" : ""}
+            ):
+          </text>
+          {cleanPlugins.length === 0 ? (
+            <text fg={theme.colors.warning}> (none)</text>
+          ) : (
+            wrapNames(cleanPlugins).map((line, i) => (
+              <text key={i} fg={theme.colors.text}>
+                {"  "}
+                {line}
+              </text>
+            ))
+          )}
+        </box>
+        <box marginTop={2} flexDirection="column">
+          <box>
+            <text bg={theme.selection.bg} fg={theme.selection.fg}>
+              {" "}
+              Enter/a{" "}
+            </text>
+            <text fg={theme.colors.muted}> Apply profile</text>
+          </box>
+          <box marginTop={1}>
+            <text bg={theme.colors.dim} fg="white">
+              {" "}
+              r{" "}
+            </text>
+            <text fg={theme.colors.muted}> Rename</text>
+          </box>
+          <box marginTop={1}>
+            <text bg={theme.colors.danger} fg="white">
+              {" "}
+              d{" "}
+            </text>
+            <text fg={theme.colors.muted}> Delete</text>
+          </box>
+          <box marginTop={1}>
+            <text bg="blue" fg="white">
+              {" "}
+              c{" "}
+            </text>
+            <text fg={theme.colors.muted}> Copy JSON to clipboard</text>
+          </box>
+          <box marginTop={1}>
+            <text bg={theme.colors.success} fg="white">
+              {" "}
+              i{" "}
+            </text>
+            <text fg={theme.colors.muted}> Import from clipboard</text>
+          </box>
+        </box>
+      </box>
+    );
+  },
+};
+
+// ─── Dispatch helpers ──────────────────────────────────────────────────────────
+
+export function renderProfileRow(
+  item: ProfileListItem,
+  _index: number,
+  isSelected: boolean,
+): React.ReactNode {
+  if (item.kind === "header") {
+    return headerRenderer.renderRow({ item, isSelected });
+  }
+  if (item.kind === "predefined") {
+    return predefinedRenderer.renderRow({ item, isSelected });
+  }
+  return savedRenderer.renderRow({ item, isSelected });
+}
+
+export function renderProfileDetail(
+  item: ProfileListItem | undefined,
+  loading: boolean,
+  error: string | undefined,
+): React.ReactNode {
+  if (loading) return <text fg={theme.colors.muted}>Loading profiles...</text>;
+  if (error) return <text fg={theme.colors.danger}>Error: {error}</text>;
+  if (!item || item.kind === "header")
+    return <text fg={theme.colors.muted}>Select a profile to see details</text>;
+  if (item.kind === "predefined") {
+    return predefinedRenderer.renderDetail({ item });
+  }
+  return savedRenderer.renderDetail({ item });
+}
+
+export function buildProfileListItems(
+  profileList: import("../../types/index.js").ProfileEntry[],
+  PREDEFINED_PROFILES: PredefinedProfile[],
+): ProfileListItem[] {
+  const items: ProfileListItem[] = [];
+  items.push({
+    kind: "header",
+    label: "Presets",
+    color: "#4527a0",
+    count: PREDEFINED_PROFILES.length,
+  });
+  for (const p of PREDEFINED_PROFILES) {
+    items.push({ kind: "predefined", profile: p });
+  }
+  items.push({
+    kind: "header",
+    label: "Your Profiles",
+    color: "#00695c",
+    count: profileList.length,
+  });
+  for (const e of profileList) {
+    items.push({ kind: "saved", entry: e });
+  }
+  return items;
+}

package/src/ui/renderers/settingsRenderers.js

@@ -0,0 +1,69 @@
+import { jsxs as _jsxs, jsx as _jsx } from "@opentui/react/jsx-runtime";
+import { CATEGORY_LABELS, CATEGORY_BG, CATEGORY_COLOR, CATEGORY_DESCRIPTIONS, formatValue, } from "../adapters/settingsAdapter.js";
+import { MetaText } from "../components/primitives/index.js";
+import { theme } from "../theme.js";
+// ─── Category renderer ─────────────────────────────────────────────────────────
+const categoryRenderer = {
+    renderRow: ({ item, isSelected }) => {
+        const star = item.category === "recommended" ? "★ " : "";
+        const label = `${star}${CATEGORY_LABELS[item.category]}`;
+        const bg = isSelected ? theme.selection.bg : CATEGORY_BG[item.category];
+        return (_jsx("text", { bg: bg, fg: "white", children: _jsxs("strong", { children: [" ", label, " "] }) }));
+    },
+    renderDetail: ({ item }) => {
+        const cat = item.category;
+        return (_jsxs("box", { flexDirection: "column", children: [_jsx("text", { fg: CATEGORY_COLOR[cat], children: _jsx("strong", { children: CATEGORY_LABELS[cat] }) }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: theme.colors.muted, children: CATEGORY_DESCRIPTIONS[cat] }) })] }));
+    },
+};
+// ─── Setting renderer ──────────────────────────────────────────────────────────
+const settingRenderer = {
+    renderRow: ({ item, isSelected }) => {
+        const { setting } = item;
+        const indicator = item.isDefault ? "○" : "●";
+        const displayValue = formatValue(setting, item.effectiveValue);
+        if (isSelected) {
+            return (_jsxs("text", { bg: theme.selection.bg, fg: theme.selection.fg, children: [" ", indicator, " ", setting.name.padEnd(28), displayValue, " "] }));
+        }
+        const indicatorColor = item.isDefault ? theme.colors.muted : theme.colors.info;
+        const valueColor = item.isDefault ? theme.colors.muted : theme.colors.success;
+        return (_jsxs("text", { children: [_jsxs("span", { fg: indicatorColor, children: [" ", indicator, " "] }), _jsx("span", { children: setting.name.padEnd(28) }), _jsx("span", { fg: valueColor, children: displayValue })] }));
+    },
+    renderDetail: ({ item }) => {
+        const { setting } = item;
+        const scoped = item.scopedValues;
+        const storageDesc = setting.storage.type === "env"
+            ? `env: ${setting.storage.key}`
+            : `settings.json: ${setting.storage.key}`;
+        const userValue = formatValue(setting, scoped.user);
+        const projectValue = formatValue(setting, scoped.project);
+        const userIsSet = scoped.user !== undefined && scoped.user !== "";
+        const projectIsSet = scoped.project !== undefined && scoped.project !== "";
+        const actionLabel = setting.type === "boolean"
+            ? "toggle"
+            : setting.type === "select"
+                ? "choose"
+                : "edit";
+        return (_jsxs("box", { flexDirection: "column", children: [_jsx("text", { fg: theme.colors.info, children: _jsx("strong", { children: setting.name }) }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: theme.colors.text, children: setting.description }) }), _jsx("box", { marginTop: 1, children: _jsxs("text", { children: [_jsx("span", { fg: theme.colors.muted, children: "Stored " }), _jsx("span", { fg: theme.colors.link, children: storageDesc })] }) }), setting.defaultValue !== undefined && (_jsx("box", { children: _jsxs("text", { children: [_jsx("span", { fg: theme.colors.muted, children: "Default " }), _jsx("span", { children: setting.defaultValue })] }) })), _jsxs("box", { flexDirection: "column", marginTop: 1, children: [_jsx("text", { children: "────────────────────────" }), _jsx("text", { children: _jsx("strong", { children: "Scopes:" }) }), _jsxs("box", { marginTop: 1, flexDirection: "column", children: [_jsxs("text", { children: [_jsxs("span", { bg: theme.scopes.user, fg: "black", children: [" ", "u", " "] }), _jsx("span", { fg: userIsSet ? theme.scopes.user : theme.colors.muted, children: userIsSet ? " ● " : " ○ " }), _jsx("span", { fg: theme.scopes.user, children: "User" }), _jsx("span", { children: " global" }), _jsxs("span", { fg: userIsSet ? theme.scopes.user : theme.colors.muted, children: [" ", userValue] })] }), _jsxs("text", { children: [_jsxs("span", { bg: theme.scopes.project, fg: "black", children: [" ", "p", " "] }), _jsx("span", { fg: projectIsSet ? theme.scopes.project : theme.colors.muted, children: projectIsSet ? " ● " : " ○ " }), _jsx("span", { fg: theme.scopes.project, children: "Project" }), _jsx("span", { children: " team" }), _jsxs("span", { fg: projectIsSet ? theme.scopes.project : theme.colors.muted, children: [" ", projectValue] })] })] })] }), _jsx("box", { marginTop: 1, children: _jsxs("text", { fg: theme.colors.muted, children: ["Press u/p to ", actionLabel, " in scope"] }) })] }));
+    },
+};
+// ─── Dispatch helpers ──────────────────────────────────────────────────────────
+export const settingsRenderers = {
+    category: categoryRenderer,
+    setting: settingRenderer,
+};
+export function renderSettingRow(item, _index, isSelected) {
+    if (item.kind === "category") {
+        return settingsRenderers.category.renderRow({ item, isSelected });
+    }
+    return settingsRenderers.setting.renderRow({ item, isSelected });
+}
+export function renderSettingDetail(item) {
+    if (!item)
+        return _jsx("text", { fg: theme.colors.muted, children: "Select a setting to see details" });
+    if (item.kind === "category") {
+        return settingsRenderers.category.renderDetail({ item });
+    }
+    return settingsRenderers.setting.renderDetail({ item });
+}
+// Suppress unused import warning — MetaText may be used in future extensions
+void MetaText;

package/src/ui/renderers/settingsRenderers.tsx

@@ -0,0 +1,205 @@
+import React from "react";
+import type { ItemRenderer } from "../registry.js";
+import type {
+  SettingsBrowserItem,
+  SettingsCategoryItem,
+  SettingsSettingItem,
+} from "../adapters/settingsAdapter.js";
+import {
+  CATEGORY_LABELS,
+  CATEGORY_BG,
+  CATEGORY_COLOR,
+  CATEGORY_DESCRIPTIONS,
+  formatValue,
+} from "../adapters/settingsAdapter.js";
+import { SelectableRow, MetaText } from "../components/primitives/index.js";
+import { theme } from "../theme.js";
+
+// ─── Category renderer ─────────────────────────────────────────────────────────
+
+const categoryRenderer: ItemRenderer<SettingsCategoryItem> = {
+  renderRow: ({ item, isSelected }) => {
+    const star = item.category === "recommended" ? "★ " : "";
+    const label = `${star}${CATEGORY_LABELS[item.category]}`;
+    const bg = isSelected ? theme.selection.bg : CATEGORY_BG[item.category];
+
+    return (
+      <text bg={bg} fg="white">
+        <strong> {label} </strong>
+      </text>
+    );
+  },
+
+  renderDetail: ({ item }) => {
+    const cat = item.category;
+    return (
+      <box flexDirection="column">
+        <text fg={CATEGORY_COLOR[cat]}>
+          <strong>{CATEGORY_LABELS[cat]}</strong>
+        </text>
+        <box marginTop={1}>
+          <text fg={theme.colors.muted}>{CATEGORY_DESCRIPTIONS[cat]}</text>
+        </box>
+      </box>
+    );
+  },
+};
+
+// ─── Setting renderer ──────────────────────────────────────────────────────────
+
+const settingRenderer: ItemRenderer<SettingsSettingItem> = {
+  renderRow: ({ item, isSelected }) => {
+    const { setting } = item;
+    const indicator = item.isDefault ? "○" : "●";
+    const displayValue = formatValue(setting, item.effectiveValue);
+
+    if (isSelected) {
+      return (
+        <text bg={theme.selection.bg} fg={theme.selection.fg}>
+          {" "}
+          {indicator} {setting.name.padEnd(28)}
+          {displayValue}{" "}
+        </text>
+      );
+    }
+
+    const indicatorColor = item.isDefault ? theme.colors.muted : theme.colors.info;
+    const valueColor = item.isDefault ? theme.colors.muted : theme.colors.success;
+
+    return (
+      <text>
+        <span fg={indicatorColor}> {indicator} </span>
+        <span>{setting.name.padEnd(28)}</span>
+        <span fg={valueColor}>{displayValue}</span>
+      </text>
+    );
+  },
+
+  renderDetail: ({ item }) => {
+    const { setting } = item;
+    const scoped = item.scopedValues;
+    const storageDesc =
+      setting.storage.type === "env"
+        ? `env: ${setting.storage.key}`
+        : `settings.json: ${setting.storage.key}`;
+
+    const userValue = formatValue(setting, scoped.user);
+    const projectValue = formatValue(setting, scoped.project);
+    const userIsSet = scoped.user !== undefined && scoped.user !== "";
+    const projectIsSet = scoped.project !== undefined && scoped.project !== "";
+
+    const actionLabel =
+      setting.type === "boolean"
+        ? "toggle"
+        : setting.type === "select"
+          ? "choose"
+          : "edit";
+
+    return (
+      <box flexDirection="column">
+        <text fg={theme.colors.info}>
+          <strong>{setting.name}</strong>
+        </text>
+        <box marginTop={1}>
+          <text fg={theme.colors.text}>{setting.description}</text>
+        </box>
+
+        <box marginTop={1}>
+          <text>
+            <span fg={theme.colors.muted}>Stored </span>
+            <span fg={theme.colors.link}>{storageDesc}</span>
+          </text>
+        </box>
+        {setting.defaultValue !== undefined && (
+          <box>
+            <text>
+              <span fg={theme.colors.muted}>Default </span>
+              <span>{setting.defaultValue}</span>
+            </text>
+          </box>
+        )}
+
+        <box flexDirection="column" marginTop={1}>
+          <text>{"────────────────────────"}</text>
+          <text>
+            <strong>Scopes:</strong>
+          </text>
+          <box marginTop={1} flexDirection="column">
+            <text>
+              <span bg={theme.scopes.user} fg="black">
+                {" "}
+                u{" "}
+              </span>
+              <span fg={userIsSet ? theme.scopes.user : theme.colors.muted}>
+                {userIsSet ? " ● " : " ○ "}
+              </span>
+              <span fg={theme.scopes.user}>User</span>
+              <span> global</span>
+              <span fg={userIsSet ? theme.scopes.user : theme.colors.muted}>
+                {" "}
+                {userValue}
+              </span>
+            </text>
+            <text>
+              <span bg={theme.scopes.project} fg="black">
+                {" "}
+                p{" "}
+              </span>
+              <span
+                fg={projectIsSet ? theme.scopes.project : theme.colors.muted}
+              >
+                {projectIsSet ? " ● " : " ○ "}
+              </span>
+              <span fg={theme.scopes.project}>Project</span>
+              <span> team</span>
+              <span
+                fg={projectIsSet ? theme.scopes.project : theme.colors.muted}
+              >
+                {" "}
+                {projectValue}
+              </span>
+            </text>
+          </box>
+        </box>
+
+        <box marginTop={1}>
+          <text fg={theme.colors.muted}>Press u/p to {actionLabel} in scope</text>
+        </box>
+      </box>
+    );
+  },
+};
+
+// ─── Dispatch helpers ──────────────────────────────────────────────────────────
+
+export const settingsRenderers: {
+  category: ItemRenderer<SettingsCategoryItem>;
+  setting: ItemRenderer<SettingsSettingItem>;
+} = {
+  category: categoryRenderer,
+  setting: settingRenderer,
+};
+
+export function renderSettingRow(
+  item: SettingsBrowserItem,
+  _index: number,
+  isSelected: boolean,
+): React.ReactNode {
+  if (item.kind === "category") {
+    return settingsRenderers.category.renderRow({ item, isSelected });
+  }
+  return settingsRenderers.setting.renderRow({ item, isSelected });
+}
+
+export function renderSettingDetail(
+  item: SettingsBrowserItem | undefined,
+): React.ReactNode {
+  if (!item) return <text fg={theme.colors.muted}>Select a setting to see details</text>;
+  if (item.kind === "category") {
+    return settingsRenderers.category.renderDetail({ item });
+  }
+  return settingsRenderers.setting.renderDetail({ item });
+}
+
+// Suppress unused import warning — MetaText may be used in future extensions
+void (MetaText as unknown);