zidane-ui 9.1.1 → 9.1.4

package/src/session/testing/demo.ts

@@ -1,224 +0,0 @@
-/**
- * Demo data for the session surfaces: one session (`demo`) with a todo list
- * mid-task, two queued messages, a few artifacts, running work and turns,
- * plus usage summaries and subscription windows.
- */
-import type { SessionArtifactRow, SessionTurn } from '../headless/host';
-import type { SessionFixture } from '../headless/fixture-host';
-import { localDayString } from '../headless/usage-format';
-import type { ProviderUsageSnapshot, UsageRange, UsageSummary } from '../headless/usage';
-
-const NOW = Date.UTC(2025, 0, 15, 12);
-
-const artifact = (
-  id: string,
-  kind: string,
-  uri: string,
-  label: string,
-  row: SessionArtifactRow['row'],
-): SessionArtifactRow => ({
-  artifact: { id, sessionId: 'demo', kind, uri, label, createdAt: NOW, updatedAt: NOW },
-  row,
-});
-
-/** The artifact kinds' labels in the demo, as the backend's kind registry words them. */
-export const DEMO_ARTIFACT_KIND_LABELS: Readonly<Record<string, string>> = {
-  pull_request: 'Pull request',
-  branch: 'Branch',
-  commit: 'Commit',
-  file: 'File',
-};
-
-/** The demo's stored turns: a prompt and the answer. */
-export const DEMO_TURNS: readonly SessionTurn[] = [
-  {
-    id: 'turn-1',
-    role: 'user',
-    content: [{ type: 'text', text: 'Archive sessions older than 90 days, and keep them searchable.' }],
-    createdAt: NOW - 120_000,
-  },
-  {
-    id: 'turn-2',
-    role: 'assistant',
-    content: [{ type: 'text', text: 'I added an archived column and a migration. Archived sessions stay in search.' }],
-    createdAt: NOW - 60_000,
-  },
-];
-
-/**
- * A usage summary over `range`, ending on `today`: a few months of steady use across three models.
- *
- * @param range - The range it covers.
- * @param today - The last day.
- */
-export function demoUsageSummary(range: UsageRange, today: Date = new Date(NOW)): UsageSummary {
-  const span = range === '7d' ? 7 : range === '30d' ? 30 : 120;
-  const scale = span / 120;
-  const heatmap = Array.from({ length: 182 }, (_, i) => {
-    const day = new Date(today.getFullYear(), today.getMonth(), today.getDate() - i);
-    const tokens = (i * 7919) % 5 === 0 ? 0 : 40_000 + ((i * 104_729) % 900_000);
-    return { day: localDayString(day), tokens, messages: Math.round(tokens / 20_000) };
-  }).filter((d) => d.tokens > 0);
-  const models = [
-    {
-      modelId: 'claude-sonnet-4-5',
-      provider: 'Anthropic',
-      turns: 1840,
-      tokensIn: 41_200_000,
-      tokensOut: 2_100_000,
-      cost: 148.2,
-    },
-    { modelId: 'gpt-5', provider: 'OpenAI', turns: 620, tokensIn: 12_800_000, tokensOut: 900_000, cost: 41.7 },
-    { modelId: 'gemini-2.5-pro', provider: 'Google', turns: 210, tokensIn: 3_900_000, tokensOut: 300_000, cost: 9.9 },
-  ].map((m) => ({
-    ...m,
-    turns: Math.round(m.turns * scale),
-    tokensIn: Math.round(m.tokensIn * scale),
-    tokensOut: Math.round(m.tokensOut * scale),
-    cost: m.cost * scale,
-  }));
-  const modelDaily = Array.from({ length: span }, (_, i) => {
-    const day = localDayString(new Date(today.getFullYear(), today.getMonth(), today.getDate() - (span - 1 - i)));
-    return models.map((m, j) => ({ day, modelId: m.modelId, tokens: ((i + 3) * (j + 5) * 37_123) % 600_000 }));
-  }).flat();
-  const totalIn = models.reduce((a, m) => a + m.tokensIn, 0);
-  const totalOut = models.reduce((a, m) => a + m.tokensOut, 0);
-  return {
-    range,
-    userName: 'Ada',
-    sessions: Math.round(412 * scale),
-    messages: Math.round(5230 * scale),
-    totalTokens: totalIn + totalOut,
-    tokensIn: totalIn,
-    tokensOut: totalOut,
-    totalCost: models.reduce((a, m) => a + m.cost, 0),
-    activeDays: Math.round(96 * scale),
-    currentStreak: 6,
-    longestStreak: 23,
-    peakHour: 15,
-    favoriteModel: 'claude-sonnet-4-5',
-    models,
-    modelDaily,
-    providers: models.map((m) => ({ provider: m.provider, cost: m.cost })),
-    heatmap,
-    generatedAt: NOW,
-  };
-}
-
-/** Subscription windows: one provider with two accounts' worth of windows, one with credits. */
-export const DEMO_PROVIDER_USAGE: readonly ProviderUsageSnapshot[] = [
-  {
-    providerKey: 'anthropic',
-    label: 'Anthropic',
-    credentialKey: 'anthropic',
-    account: null,
-    activeCredential: true,
-    status: 'ok',
-    plan: 'Max',
-    windows: [
-      { id: 'five_hour', label: '5h', usedPercent: 42, resetsAt: NOW + 2 * 3_600_000 },
-      { id: 'seven_day', label: 'week', usedPercent: 71, resetsAt: NOW + 3 * 86_400_000 },
-    ],
-    credits: null,
-    fetchedAt: NOW,
-    error: null,
-  },
-  {
-    providerKey: 'openai',
-    label: 'OpenAI',
-    credentialKey: 'openai-codex',
-    account: null,
-    activeCredential: true,
-    status: 'ok',
-    plan: 'pro',
-    windows: [
-      { id: 'primary', label: '5h', usedPercent: 18, resetsAt: NOW + 3 * 3_600_000 },
-      { id: 'secondary', label: 'weekly', usedPercent: 93, resetsAt: NOW + 4 * 86_400_000 },
-    ],
-    credits: null,
-    resets: {
-      available: 2,
-      credits: [
-        {
-          id: 'reset-1',
-          title: 'Full reset (Weekly + 5 hr)',
-          grantedAt: NOW - 12 * 86_400_000,
-          expiresAt: NOW + 2 * 86_400_000,
-        },
-        { id: 'reset-2', title: 'Full reset (Weekly + 5 hr)', grantedAt: NOW - 3 * 86_400_000, expiresAt: null },
-      ],
-    },
-    fetchedAt: NOW,
-    error: null,
-  },
-];
-
-/** GitHub's API limits in the demo. */
-export const DEMO_GITHUB_USAGE: readonly ProviderUsageSnapshot[] = [
-  {
-    providerKey: 'github',
-    label: 'github.com',
-    credentialKey: 'github:github.com',
-    account: null,
-    activeCredential: false,
-    status: 'ok',
-    plan: null,
-    windows: [
-      { id: 'core', label: 'REST', usedPercent: 12, resetsAt: NOW + 1_800_000 },
-      { id: 'graphql', label: 'GraphQL', usedPercent: 88, resetsAt: NOW + 1_800_000 },
-    ],
-    credits: null,
-    fetchedAt: NOW,
-    error: null,
-  },
-];
-
-/** A session (`demo`) with todos mid-task, two queued messages, three artifacts, running work and turns, plus usage. */
-export const DEMO_SESSION_FIXTURE: SessionFixture = {
-  todos: {
-    demo: [
-      { id: 't1', content: 'Read the session store', status: 'completed' },
-      { id: 't2', content: 'Add the archive column', status: 'in_progress' },
-      { id: 't3', content: 'Write the migration test', status: 'pending' },
-      { id: 't4', content: 'Update the changelog', status: 'pending' },
-    ],
-  },
-  queue: {
-    demo: [
-      { id: 'q1', text: 'Also run the linter when you are done' },
-      {
-        id: 'q2',
-        text: 'Use the screenshot for the empty state',
-        attachments: [{ mediaType: 'image/png', name: 'empty.png', data: '' }],
-      },
-    ],
-  },
-  artifacts: {
-    demo: [
-      artifact('a1', 'pull_request', 'https://github.com/acme/app/pull/42', 'acme/app#42', {
-        title: 'Archive old sessions',
-        status: 'open',
-        tone: 'success',
-        href: 'https://github.com/acme/app/pull/42',
-        lead: { text: 'acme/app#42' },
-        diff: { added: 120, removed: 8, files: 4 },
-      }),
-      artifact('a2', 'branch', 'git:branch:archive-sessions', 'archive-sessions', { title: 'archive-sessions' }),
-      artifact('a3', 'commit', 'git:commit:e32789e', 'Add the archive column', {
-        title: 'Add the archive column',
-        lead: { text: 'e32789e', mono: true },
-      }),
-    ],
-  },
-  kindLabel: (kind) => DEMO_ARTIFACT_KIND_LABELS[kind] ?? kind,
-  work: {
-    demo: [
-      { kind: 'tool', id: 'call-1', label: 'bash: bun test', startedAt: NOW - 42_000 },
-      { kind: 'task', id: 'task-1', label: 'bun run dev', startedAt: NOW - 600_000 },
-    ],
-  },
-  turns: { demo: DEMO_TURNS },
-  usage: { all: demoUsageSummary('all'), '30d': demoUsageSummary('30d'), '7d': demoUsageSummary('7d') },
-  providerUsage: DEMO_PROVIDER_USAGE,
-  githubUsage: DEMO_GITHUB_USAGE,
-};

package/src/session/testing/index.ts

@@ -1,7 +0,0 @@
-/**
- * `zidane-ui/session/testing`: a `SessionHost` that runs in memory
- * (`createFixtureSessionHost`) and demo data, for docs, demos, galleries and
- * an app's own tests. Not for production hosts.
- */
-export * from '../headless/fixture-host';
-export * from './demo';

package/src/session/useSessionLabels.ts

@@ -1,14 +0,0 @@
-/**
- * The session panels' labels: the defaults, overridable through
- * `<LabelsProvider>` or `SessionProvider`'s `labels`.
- */
-import { useMemo } from 'react';
-
-import { useLabels } from '../labels';
-import { DEFAULT_SESSION_LABELS, type SessionLabels } from './headless/labels';
-
-/** Returns the session panels' strings: the defaults merged with any overrides given to `SessionProvider` or `LabelsProvider`. */
-export function useSessionLabels(): SessionLabels {
-  const overrides = useLabels() as Partial<SessionLabels>;
-  return useMemo(() => ({ ...DEFAULT_SESSION_LABELS, ...overrides }), [overrides]);
-}

package/src/session/useUsageSummary.ts

@@ -1,82 +0,0 @@
-/**
- * The usage summary of one range, from the host's `usage.summary`: one store
- * per host, kept across mounts and mirrored to `localStorage` (when there is
- * one), so a remounted welcome screen paints its last numbers on the first
- * frame. Every mount and range change re-fetches behind them; updates reach
- * the screen in a transition, so a summary landing mid-switch never blocks a
- * frame.
- */
-import { startTransition, useEffect, useState } from 'react';
-
-import { constant } from '../chat/headless/store';
-import type { SessionUsage } from './headless/host';
-import {
-  createUsageSummaryState,
-  pickUsageSummary,
-  type UsageRange,
-  type UsageSummaries,
-  type UsageSummary,
-  type UsageSummaryState,
-} from './headless/usage';
-import { useSessionHost } from './SessionProvider';
-
-const states = new WeakMap<SessionUsage, UsageSummaryState>();
-
-function browserStorage(): Storage | null {
-  try {
-    return typeof localStorage === 'undefined' ? null : localStorage;
-  } catch {
-    return null;
-  }
-}
-
-function stateOf(usage: SessionUsage | undefined): UsageSummaryState | null {
-  const summary = usage?.summary;
-  if (!usage || !summary) return null;
-  let state = states.get(usage);
-  if (!state) {
-    state = createUsageSummaryState((range) => summary(range), { storage: browserStorage() });
-    states.set(usage, state);
-  }
-  return state;
-}
-
-const NONE = constant<UsageSummaries>({});
-
-/** What {@link useUsageSummary} returns. */
-export interface UsageSummaryView {
-  /** The range's summary, or while it loads the last one shown (another range); `null` before any. */
-  summary: UsageSummary | null;
-  /** `summary` is another range's, standing in while the range loads. */
-  standIn: boolean;
-  /** Whether the host reports usage summaries at all. */
-  available: boolean;
-}
-
-/**
- * The summary to show for `range`, refreshed on mount and on every range change.
- *
- * @param range - The range asked for.
- */
-export function useUsageSummary(range: UsageRange): UsageSummaryView {
-  const state = stateOf(useSessionHost().usage);
-  const store = state ? state.summaries : NONE;
-  const [all, setAll] = useState<UsageSummaries>(() => store.get());
-  // The range on screen: kept while the next one loads, so the card never empties.
-  const [shownRange, setShownRange] = useState<UsageRange>(range);
-
-  useEffect(() => {
-    const sync = () => startTransition(() => setAll(store.get()));
-    const off = store.subscribe(sync);
-    sync();
-    return off;
-  }, [store]);
-
-  useEffect(() => {
-    void state?.revalidate(range);
-  }, [state, range]);
-
-  if (all[range] && shownRange !== range) setShownRange(range);
-
-  return { ...pickUsageSummary(all, range, shownRange), available: state !== null };
-}

package/src/settings/SettingsHeadingText.tsx

@@ -1,54 +0,0 @@
-/**
- * A settings screen heading's text that crossfades when it changes (the
- * active section's title and description): the incoming text remounts with
- * the enter animation while a copy of the outgoing one fades out from an
- * absolute overlay for the `exit` / `fade-out` length (`readExitMs`: the
- * brief fade under reduced motion, 0 under off). Spans, so it is valid
- * inside a heading or a paragraph.
- */
-import { useEffect, useState, type CSSProperties } from 'react';
-
-import { readExitMs } from '../motion/presence';
-
-/** Props for {@link SettingsHeadingText}. */
-export interface SettingsHeadingTextProps {
-  /** The text. */
-  text: string;
-  /** Extra classes on the root. */
-  className?: string;
-  /** Inline styles on the root. */
-  style?: CSSProperties;
-}
-
-/**
- * Heading text that crossfades on change.
- *
- * @param props - Component props.
- */
-export function SettingsHeadingText({ text, className, style }: SettingsHeadingTextProps) {
-  const [swap, setSwap] = useState<{ current: string; leaving: string | null }>({ current: text, leaving: null });
-
-  // Derived during render: the outgoing text is captured in the commit the incoming one mounts, so no gap frame.
-  if (swap.current !== text) {
-    setSwap({ current: text, leaving: swap.current });
-  }
-
-  useEffect(() => {
-    if (swap.leaving === null) return undefined;
-    const timer = setTimeout(() => setSwap((s) => (s.leaving === null ? s : { ...s, leaving: null })), readExitMs());
-    return () => clearTimeout(timer);
-  }, [swap.leaving]);
-
-  return (
-    <span className={className ? `relative block ${className}` : 'relative block'} style={style}>
-      <span key={swap.current} className="block zg-settings-heading-enter">
-        {swap.current}
-      </span>
-      {swap.leaving !== null && (
-        <span aria-hidden="true" className="absolute inset-0 block zg-settings-heading-exit pointer-events-none">
-          {swap.leaving}
-        </span>
-      )}
-    </span>
-  );
-}

package/src/settings/SettingsHostSwitcher.tsx

@@ -1,93 +0,0 @@
-/**
- * Which host's settings the screen shows: This computer or a saved server.
- * A button naming the host, opening a menu of the hosts (a server with its
- * connection dot; one Settings can't reach is disabled). Not rendered with
- * one host or none. The app puts it in its frame's header and re-scopes the
- * sections on `onChange`.
- */
-import type { CSSProperties } from 'react';
-
-import { hostReachable, type HostView } from '../chat/headless/hosts';
-import { HostStatusDot } from '../chat/HostStatusDot';
-import { buttonClass } from '../components/button';
-import { Popover } from '../components/floating/Popover';
-import { Menu, MenuRow } from '../components/Menu';
-import { useSettingsLabels } from './SettingsProvider';
-
-/** Props for {@link SettingsHostSwitcher}. */
-export interface SettingsHostSwitcherProps {
-  /** This computer first, then the servers. */
-  hosts: readonly HostView[];
-  /** The shown host's id. */
-  value: string;
-  /** A host was picked. */
-  onChange: (hostId: string) => void;
-  /** Extra classes on the trigger. */
-  className?: string;
-  /** Inline styles on the trigger. */
-  style?: CSSProperties;
-}
-
-const glyph = (host: HostView) => (host.kind === 'local' ? 'i-ph-laptop' : 'i-ph-hard-drives');
-
-/**
- * The settings screen's host switcher: a menu of the hosts, hidden with one.
- *
- * @param props - The {@link SettingsHostSwitcherProps}.
- */
-export function SettingsHostSwitcher({ hosts, value, onChange, className, style }: SettingsHostSwitcherProps) {
-  const labels = useSettingsLabels();
-  if (hosts.length <= 1) return null;
-  const selected = hosts.find((host) => host.id === value) ?? hosts[0]!;
-
-  return (
-    <Popover
-      role="menu"
-      ariaLabel={labels.settingsHostSwitcher}
-      side="bottom"
-      align="end"
-      width={240}
-      trigger={(props) => (
-        <button
-          {...props}
-          type="button"
-          aria-label={labels.settingsHostSwitcherTrigger(selected.name)}
-          data-testid="settings-host-switcher"
-          className={[buttonClass({ variant: 'secondary', size: 'md' }), 'max-w-[220px]', className]
-            .filter(Boolean)
-            .join(' ')}
-          style={style}
-        >
-          <span aria-hidden className={`${glyph(selected)} text-zg-meta shrink-0`} />
-          <span className="truncate">{selected.name}</span>
-          {selected.kind === 'server' && <HostStatusDot host={selected} />}
-          <span aria-hidden className="i-ph-caret-up-down text-zg-badge shrink-0 opacity-70" />
-        </button>
-      )}
-    >
-      {(close) => (
-        <Menu role="group">
-          {hosts.map((host) => (
-            <MenuRow
-              key={host.id}
-              role="menuitemradio"
-              checked={host.id === selected.id}
-              disabled={!hostReachable(host)}
-              icon={<span aria-hidden className={glyph(host)} />}
-              title={
-                <span className="inline-flex items-center gap-1.5 min-w-0">
-                  <span className="truncate">{host.name}</span>
-                  {host.kind === 'server' && <HostStatusDot host={host} />}
-                </span>
-              }
-              onClick={() => {
-                close();
-                if (host.id !== selected.id) onChange(host.id);
-              }}
-            />
-          ))}
-        </Menu>
-      )}
-    </Popover>
-  );
-}

package/src/settings/SettingsNav.tsx

@@ -1,198 +0,0 @@
-/**
- * The settings nav: the top-level sections, each with the sections grouped
- * under it (`group`) listed indented beneath (and theirs beneath them, one
- * step further: an extension's page under Extensions), all shown at once, each with
- * an optional count (how many settings or listed things it holds) and its
- * glyph in the icon's box: its `mark` (a logo), else its icon, else a letter
- * badge of its `monogram`. The logo and the badge are the extension mark the
- * Extensions rows draw (`BrandMark`), one em square. ↑/↓
- * wraps through the rows (the vertical tablist pattern) and focus follows
- * selection.
- */
-import { useRef, type CSSProperties, type KeyboardEvent } from 'react';
-
-import { BrandMark, hasBrandMark } from '../components/BrandMark';
-import { MenuRow } from '../components/Menu';
-import type { SettingsSection } from './headless/registry';
-import { useSettingsLabels } from './SettingsProvider';
-
-/** A grouped section sits indented under its entry: its icon's center on the entry's label edge. */
-const SUB_SECTION_REM = 1.625;
-const subSectionStyle = (depth: number): CSSProperties | undefined =>
-  depth > 0 ? { paddingInlineStart: `${SUB_SECTION_REM * depth}rem` } : undefined;
-
-/**
- * The glyph box every nav row's icon spans: an icon class at `text-sm` draws
- * 1em × 1em (the icon preset's `width` / `height`).
- */
-const GLYPH_BOX = 'text-sm';
-/**
- * A section with a logo, or without an icon: the extension mark (`BrandMark`
- * at `xs`, one em) in a square the size of an icon (`GLYPH_BOX` at 1em × 1em):
- * the logo, else the monogram's first letter. The mark is decorative: the
- * tab's text stays its title.
- */
-const MARK_BOX_CLASS = `${GLYPH_BOX} w-[1em] h-[1em] shrink-0 inline-flex items-center justify-center rounded-zg-xs`;
-const SELECTED_GLYPH = 'text-[var(--zg-text)]';
-
-/**
- * The letter a monogram badge shows: the first letter or digit of `word`, uppercase.
- *
- * @param word - The section's monogram (a display name).
- * @returns The letter, or `undefined` when `word` has none.
- */
-function monogramLetter(word: string | undefined): string | undefined {
-  const match = word ? /[\p{L}\p{N}]/u.exec(word) : null;
-  return match ? match[0].toLocaleUpperCase() : undefined;
-}
-
-/** Whether a row draws a glyph: a logo, an icon, or a monogram with a letter. */
-const hasGlyph = (section: Pick<SettingsSection, 'icon' | 'monogram' | 'mark'>) =>
-  Boolean(section.mark?.brand || section.icon || monogramLetter(section.monogram));
-
-/** A row's glyph: its logo, else its icon, else its monogram's letter badge, else none. */
-function NavGlyph({
-  icon,
-  monogram,
-  mark,
-  title,
-  selected,
-}: Pick<SettingsSection, 'icon' | 'monogram' | 'mark' | 'title'> & { selected: boolean }) {
-  const brand = mark?.brand && hasBrandMark(mark.brand) ? mark.brand : undefined;
-  if (!brand && icon) return <span className={`${icon} ${GLYPH_BOX} ${selected ? SELECTED_GLYPH : ''}`} aria-hidden />;
-  const letter = monogramLetter(monogram ?? title);
-  if (!brand && !monogramLetter(monogram)) return null;
-  return (
-    <span
-      className={`${MARK_BOX_CLASS} ${selected ? SELECTED_GLYPH : ''}`}
-      {...(brand ? {} : { 'data-monogram': letter })}
-      aria-hidden
-    >
-      <BrandMark brand={brand} label={monogram ?? title} letter={letter} size="xs" />
-    </span>
-  );
-}
-
-const ROW_CLASS =
-  'shrink-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--zg-ring)]';
-
-/** Props for {@link SettingsNav}. */
-export interface SettingsNavProps {
-  /** The sections the shell offers. */
-  sections: readonly Pick<SettingsSection, 'id' | 'title' | 'icon' | 'monogram' | 'mark' | 'group'>[];
-  /** The open section's id. */
-  active: string;
-  /** How many settings (or listed things) each section holds; absent or 0: no count. */
-  counts?: Readonly<Partial<Record<string, number>>>;
-  /** Opens a section (a click, or ↑/↓ on the focused tab). */
-  onSelect: (id: string) => void;
-  /** Classes merged on the tablist. */
-  className?: string;
-  /** Inline styles on the tablist. */
-  style?: CSSProperties;
-}
-
-/**
- * The nav's rows in order: each top-level section, then the sections grouped under it, each followed
- * by the ones grouped under it in turn.
- *
- * @param sections - The sections, in the app's order.
- * @returns The rows as the nav lists them.
- */
-export function navOrder<S extends Pick<SettingsSection, 'id' | 'group'>>(sections: readonly S[]): S[] {
-  return navRows(sections).map((row) => row.section);
-}
-
-/** {@link navOrder}'s rows with how deep each sits (0: top-level). A group cycle lists its sections once, top-level. */
-function navRows<S extends Pick<SettingsSection, 'id' | 'group'>>(
-  sections: readonly S[],
-): { section: S; depth: number }[] {
-  const ids = new Set(sections.map((section) => section.id));
-  const out: { section: S; depth: number }[] = [];
-  const seen = new Set<S>();
-  const visit = (section: S, depth: number) => {
-    if (seen.has(section)) return;
-    seen.add(section);
-    out.push({ section, depth });
-    for (const child of sections) if (child.group === section.id) visit(child, depth + 1);
-  };
-  for (const section of sections) if (!section.group || !ids.has(section.group)) visit(section, 0);
-  // Sections in a group cycle reach no top-level entry: still listed.
-  for (const section of sections) visit(section, 0);
-  return out;
-}
-
-const NO_COUNTS: Readonly<Partial<Record<string, number>>> = {};
-
-/**
- * The section nav: a vertical tablist.
- *
- * @param props - The sections, the open one, their counts and what opens one.
- */
-export function SettingsNav({ sections, active, counts = NO_COUNTS, onSelect, className, style }: SettingsNavProps) {
-  const labels = useSettingsLabels();
-  const tabRefs = useRef<Partial<Record<string, HTMLButtonElement | null>>>({});
-  const listed = navRows(sections);
-  const rows = listed.map((row) => row.section);
-
-  // On each tab (the focused one gets the keys): ↑/↓ move the selection and the focus.
-  const onKeyDown = (e: KeyboardEvent<HTMLElement>) => {
-    const delta = e.key === 'ArrowDown' ? 1 : e.key === 'ArrowUp' ? -1 : 0;
-    if (delta === 0 || rows.length === 0) return;
-    e.preventDefault();
-    const idx = rows.findIndex((section) => section.id === active);
-    const next = rows[(idx + delta + rows.length) % rows.length]!;
-    onSelect(next.id);
-    tabRefs.current[next.id]?.focus();
-  };
-
-  return (
-    <div
-      role="tablist"
-      aria-orientation="vertical"
-      aria-label={labels.settingsNavLabel}
-      className={['flex-1 flex flex-col gap-0.5 min-h-0 overflow-y-auto', className].filter(Boolean).join(' ')}
-      style={style}
-    >
-      {listed.map(({ section, depth }) => {
-        const selected = section.id === active;
-        const count = counts[section.id];
-        return (
-          <MenuRow
-            key={section.id}
-            ref={(el) => {
-              tabRefs.current[section.id] = el;
-            }}
-            role="tab"
-            aria-selected={selected}
-            tabIndex={selected ? 0 : -1}
-            onClick={() => onSelect(section.id)}
-            onKeyDown={onKeyDown}
-            icon={
-              hasGlyph(section) ? (
-                <NavGlyph
-                  icon={section.icon}
-                  monogram={section.monogram}
-                  mark={section.mark}
-                  title={section.title}
-                  selected={selected}
-                />
-              ) : undefined
-            }
-            title={section.title}
-            trailing={
-              count ? (
-                // Decoration: the tab's name stays its title.
-                <span aria-hidden className="zg-meta tabular-nums text-[var(--zg-text-subtle)]">
-                  {count}
-                </span>
-              ) : undefined
-            }
-            style={subSectionStyle(depth)}
-            className={`${ROW_CLASS} ${selected ? 'font-medium' : 'text-[var(--zg-text-muted)] hover:text-[var(--zg-text)]'}`}
-          />
-        );
-      })}
-    </div>
-  );
-}