zidane-ui 9.0.4 → 9.1.3

package/src/settings/sections/performance/PerformanceSection.tsx

@@ -1,770 +0,0 @@
-/**
- * Settings › Performance: what the app's processes and threads use, live, over
- * the settings host's `performance` member. The host samples only while this
- * page is on screen (a kept-mounted hidden page stops watching).
- *
- * Six tiles (a full 3 × 2 grid), then one collapsible section per view, each
- * summed in its header's badges: Processes (open), Sessions, Threads, Slow
- * frames and IPC (hosts that keep those counters: the desktop app, not a
- * server), CPU profile (hosts that record one). A host that can't be
- * watched says why (too old, a token without admin, an error). The process tree opens one level at a time; what
- * sessions and terminals launched is its own group, collapsed. Sessions lists
- * what each session runs, one collapsed group per session. Rows are one line:
- * the pid and command line are the row's tooltip.
- */
-import { memo, useCallback, useMemo, useState, type CSSProperties, type ReactNode } from 'react';
-
-import { BTN_PRIMARY, BTN_SECONDARY } from '../../../components/button';
-import { MetaChip } from '../../../components/Form';
-import { IconButton } from '../../../components/IconButton';
-import { Segmented } from '../../../components/Segmented';
-import { EmptyState, Tray } from '../../../components/Surface';
-import { CountBadge } from '../../../components/TabPill';
-import { Caret } from '../../../chat/transcript/frame';
-import { useStaysMounted } from '../../../motion/collapse';
-import {
-  formatDuration,
-  formatMemory,
-  formatPercent,
-  hasLaunched,
-  nestProcesses,
-  perfSeries,
-  processGroups,
-  sessionGroups,
-  type PerfOsThread,
-  type PerfProcessNode,
-  type PerfProfileOutcome,
-  type PerfProfileTarget,
-  type PerfSample,
-  type PerfTotals,
-  type PerfWatchError,
-  type SettingsPerformanceHost,
-} from '../../headless/performance';
-import { useSettingsHost } from '../../SettingsProvider';
-import { SettingsPanel, SettingsPanelActions, SettingsPanelBody, useSettingsSection } from '../../section';
-import { useSectionLabels } from '../use-section-labels';
-import { DEFAULT_PERFORMANCE_SECTION_LABELS, type PerformanceSectionLabels } from './labels';
-import { PerfSparkline } from './PerfSparkline';
-import { usePerfMonitor } from './use-perf-monitor';
-
-/** The Performance section's strings, overridable through `LabelsProvider`. */
-export function usePerformanceSectionLabels(): PerformanceSectionLabels {
-  return useSectionLabels(DEFAULT_PERFORMANCE_SECTION_LABELS);
-}
-
-/** Props for {@link PerformanceSection}. */
-export interface PerformanceSectionProps {
-  /** Extra classes on the root. */
-  className?: string;
-  /** Inline styles on the root. */
-  style?: CSSProperties;
-}
-
-const ROW = 'flex items-center gap-2 px-2 h-8 min-w-0';
-/** One numeric column: every list's figures line up under its column heads. */
-const COL = 'zg-meta tabular-nums text-right shrink-0 whitespace-nowrap w-14';
-const SPARK = 'w-14 h-4 shrink-0 text-[var(--zg-accent)]';
-const INDENT_REM = 1.25;
-const PROFILE_SECONDS = [5, 10, 30] as const;
-const LIST_CAP = 15;
-
-/**
- * Renders the nearest `SettingsProvider`'s host's performance figures.
- *
- * @param props - `className` and `style`.
- */
-export function PerformanceSection({ className, style }: PerformanceSectionProps) {
-  const settings = useSettingsHost();
-  const host = settings.performance;
-  const { visible } = useSettingsSection();
-  const { samples, error } = usePerfMonitor(host, visible);
-  const l = usePerformanceSectionLabels();
-  const latest = samples[samples.length - 1];
-
-  return (
-    <SettingsPanel className={className} style={style}>
-      {host && <HeaderActions host={host} reveal={settings.paths?.reveal} />}
-      <SettingsPanelBody>
-        {!host ? (
-          <EmptyState icon="i-ph-gauge" title={l.perfUnavailable} />
-        ) : error ? (
-          <EmptyState icon="i-ph-gauge" title={watchErrorText(error, l)} />
-        ) : !latest ? (
-          <EmptyState icon="i-ph-gauge" title={l.perfWaiting} />
-        ) : (
-          <div className="flex flex-col gap-4">
-            <Tiles samples={samples} latest={latest} />
-            <ProcessViews samples={samples} latest={latest} host={host} />
-            <Threads latest={latest} />
-            {host.resetCounters && (
-              <>
-                <Frames latest={latest} />
-                <Channels latest={latest} />
-              </>
-            )}
-            {host.profile && <Profile host={host} reveal={settings.paths?.reveal} />}
-          </div>
-        )}
-      </SettingsPanelBody>
-    </SettingsPanel>
-  );
-}
-
-function watchErrorText(error: PerfWatchError, l: PerformanceSectionLabels): string {
-  switch (error.kind) {
-    case 'unavailable':
-      return l.perfUnavailable;
-    case 'refused':
-      return l.perfRefused;
-    default:
-      return l.perfWatchFailed(error.detail);
-  }
-}
-
-function HeaderActions({
-  host,
-  reveal,
-}: {
-  host: SettingsPerformanceHost;
-  reveal: ((path: string) => Promise<void>) | undefined;
-}) {
-  const l = usePerformanceSectionLabels();
-  const [exporting, setExporting] = useState(false);
-  const [written, setWritten] = useState<string | null>(null);
-  const exportReport = host.exportReport;
-  const onExport = useCallback(async () => {
-    if (!exportReport) return;
-    setExporting(true);
-    try {
-      setWritten(await exportReport());
-    } finally {
-      setExporting(false);
-    }
-  }, [exportReport]);
-  if (!host.resetCounters && !exportReport) return null;
-  return (
-    <SettingsPanelActions
-      actions={
-        <span className="flex items-center gap-2">
-          {written && reveal && (
-            <button type="button" className={BTN_SECONDARY} title={written} onClick={() => void reveal(written)}>
-              {l.perfReveal}
-            </button>
-          )}
-          {host.resetCounters && (
-            <button type="button" className={BTN_SECONDARY} onClick={() => void host.resetCounters?.()}>
-              {l.perfReset}
-            </button>
-          )}
-          {exportReport && (
-            <button
-              type="button"
-              className={BTN_PRIMARY}
-              disabled={exporting}
-              title={written ?? undefined}
-              onClick={() => void onExport()}
-            >
-              {exporting ? l.perfExporting : written ? l.perfExported : l.perfExport}
-            </button>
-          )}
-        </span>
-      }
-    />
-  );
-}
-
-// ---- Tiles --------------------------------------------------------------------
-
-function Tile({
-  label,
-  value,
-  hint,
-  badge,
-  series,
-  max,
-}: {
-  label: string;
-  value: string;
-  hint: string;
-  badge?: ReactNode;
-  series?: number[];
-  max?: number;
-}) {
-  return (
-    <div className="zg-raised border rounded-zg-md px-3 py-2 flex flex-col gap-1 min-w-0">
-      <div className="flex items-center gap-2 min-w-0">
-        <span className="zg-section-label flex-1 truncate">{label}</span>
-        {badge}
-      </div>
-      <div className="flex items-center justify-between gap-2">
-        <span className="text-base text-[var(--zg-text)] tabular-nums">{value}</span>
-        {series && <PerfSparkline values={series} max={max} className={SPARK} />}
-      </div>
-      <span className="zg-meta truncate">{hint}</span>
-    </div>
-  );
-}
-
-/** Six tiles, three a row: the grid never ends on a gap. */
-function Tiles({ samples, latest }: { samples: readonly PerfSample[]; latest: PerfSample }) {
-  const l = usePerformanceSectionLabels();
-  const main = latest.threads.find((t) => t.kind === 'main');
-  const launched = hasLaunched(latest);
-  const plus = (value: string) => <MetaChip title={l.perfLaunchedTitle}>{l.perfPlus(value)}</MetaChip>;
-  return (
-    <div className="grid gap-2 grid-cols-3">
-      <Tile
-        label={l.perfCpu}
-        value={formatPercent(latest.totals.cpu)}
-        hint={l.perfCores(latest.cores)}
-        {...(launched ? { badge: plus(formatPercent(latest.launched.cpu)) } : {})}
-        series={perfSeries(samples, (s) => s.totals.cpu)}
-      />
-      <Tile
-        label={l.perfMemory}
-        value={formatMemory(latest.totals.memory)}
-        hint={l.perfResident}
-        {...(launched ? { badge: plus(formatMemory(latest.launched.memory)) } : {})}
-        series={perfSeries(samples, (s) => s.totals.memory)}
-      />
-      <Tile
-        label={l.perfGpu}
-        value={latest.gpu ? formatPercent(latest.gpu.device) : '–'}
-        hint={l.perfGpuHint}
-        {...(latest.gpu ? { series: perfSeries(samples, (s) => s.gpu?.device), max: 100 } : {})}
-      />
-      <Tile
-        label={l.perfMainBusy}
-        value={formatPercent((main?.busy ?? 0) * 100)}
-        hint={l.perfBusyHint}
-        series={perfSeries(samples, (s) => (s.threads.find((t) => t.kind === 'main')?.busy ?? 0) * 100)}
-        max={100}
-      />
-      <Tile
-        label={l.perfLag}
-        value={latest.lag ? formatDuration(latest.lag.p99) : '–'}
-        hint={l.perfLagHint}
-        series={perfSeries(samples, (s) => s.lag?.p99)}
-      />
-      <Tile
-        label={l.perfSelf}
-        value={formatPercent(latest.self.cpu)}
-        hint={l.perfSelfHint(formatDuration(latest.self.commandMs))}
-      />
-    </div>
-  );
-}
-
-// ---- Sections -------------------------------------------------------------------
-
-/** A titled list that folds away; its badges sum it up while it is closed. */
-function Section({
-  title,
-  badges,
-  defaultOpen = false,
-  children,
-}: {
-  title: string;
-  badges?: ReactNode;
-  defaultOpen?: boolean;
-  children: ReactNode;
-}) {
-  const [open, setOpen] = useState(defaultOpen);
-  const mounted = useStaysMounted(open);
-  return (
-    <section>
-      <button
-        type="button"
-        aria-expanded={open}
-        onClick={() => setOpen(!open)}
-        className="w-full flex items-center gap-2 min-h-6 px-1 bg-transparent border-0 cursor-pointer text-left text-[var(--zg-text-muted)] hover:text-[var(--zg-text)] transition-colors"
-      >
-        <Caret open={open} />
-        <span className="zg-section-label flex-1 truncate">{title}</span>
-        <span className="flex items-center gap-1.5">{badges}</span>
-      </button>
-      <div className="zg-collapsible" data-open={open} inert={!open || undefined}>
-        <div className="zg-collapsible-inner">
-          <Tray radius="lg" className="mt-1.5 p-1 flex flex-col">
-            {mounted && children}
-          </Tray>
-        </div>
-      </div>
-    </section>
-  );
-}
-
-/** The column names over a list's figures, right-aligned like them. */
-function Heads({ names }: { names: readonly string[] }) {
-  return (
-    <div className="flex items-center gap-2 px-2 h-6" aria-hidden>
-      <span className="flex-1" />
-      {names.map((name) => (
-        <span key={name} className={COL}>
-          {name}
-        </span>
-      ))}
-    </div>
-  );
-}
-
-function Empty({ text }: { text: string }) {
-  return <div className="zg-meta px-2 h-8 flex items-center">{text}</div>;
-}
-
-function since(at: number): string {
-  return new Date(at).toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
-}
-
-// ---- Processes ------------------------------------------------------------------
-
-/** Processes and Sessions: two views of one tree, sharing its sparklines and thread reader. */
-function ProcessViews({
-  samples,
-  latest,
-  host,
-}: {
-  samples: readonly PerfSample[];
-  latest: PerfSample;
-  host: SettingsPerformanceHost;
-}) {
-  // One series per pid, over the samples it appears in.
-  const series = useMemo(() => {
-    const byPid = new Map<number, number[]>();
-    for (const sample of samples) {
-      for (const process of sample.processes) {
-        const list = byPid.get(process.pid);
-        if (list) list.push(process.cpu);
-        else byPid.set(process.pid, [process.cpu]);
-      }
-    }
-    return byPid;
-  }, [samples]);
-  const tree = { series, span: samples.length, threads: host.threads };
-  return (
-    <>
-      <Processes latest={latest} tree={tree} />
-      <Sessions latest={latest} tree={tree} />
-    </>
-  );
-}
-
-function Processes({ latest, tree }: { latest: PerfSample; tree: TreeContext }) {
-  const l = usePerformanceSectionLabels();
-  const groups = useMemo(() => {
-    const rows = processGroups(latest.processes);
-    return { app: nestProcesses(rows.app), launched: nestProcesses(rows.launched) };
-  }, [latest]);
-  return (
-    <Section
-      title={l.perfProcesses}
-      defaultOpen
-      badges={<CountBadge tone="neutral" text={String(latest.processes.length)} />}
-    >
-      <Heads names={[l.perfColCpu, l.perfColMemory]} />
-      <ProcessGroup label={l.perfOrigin('app')} defaultOpen roots={groups.app} totals={latest.totals} tree={tree} />
-      {groups.launched.length > 0 && (
-        <ProcessGroup
-          label={l.perfOrigin('launched')}
-          title={l.perfLaunchedTitle}
-          roots={groups.launched}
-          totals={latest.launched}
-          tree={tree}
-        />
-      )}
-    </Section>
-  );
-}
-
-/** One row per session running something, closed: its processes open under it. */
-function Sessions({ latest, tree }: { latest: PerfSample; tree: TreeContext }) {
-  const l = usePerformanceSectionLabels();
-  const sessions = useMemo(() => sessionGroups(latest.processes), [latest]);
-  return (
-    <Section title={l.perfSessions} badges={<CountBadge tone="neutral" text={String(sessions.length)} />}>
-      {sessions.length === 0 ? (
-        <Empty text={l.perfSessionsEmpty} />
-      ) : (
-        <>
-          <Heads names={[l.perfColCpu, l.perfColMemory]} />
-          {sessions.map((session) => (
-            <ProcessGroup
-              key={session.id}
-              label={session.title ?? l.perfSessionUntitled}
-              {...(session.title ? { title: session.title } : {})}
-              roots={session.roots}
-              totals={session.totals}
-              tree={tree}
-            />
-          ))}
-        </>
-      )}
-    </Section>
-  );
-}
-
-interface TreeContext {
-  series: ReadonlyMap<number, readonly number[]>;
-  span: number;
-  threads: SettingsPerformanceHost['threads'];
-}
-
-/** CPU and memory as chips, with the icons every list uses for them. */
-function UsageChips({ totals, cpuTitle, memoryTitle }: { totals: PerfTotals; cpuTitle: string; memoryTitle: string }) {
-  return (
-    <>
-      <MetaChip title={cpuTitle}>
-        <span className="i-ph-cpu" aria-hidden />
-        {formatPercent(totals.cpu)}
-      </MetaChip>
-      <MetaChip title={memoryTitle}>
-        <span className="i-ph-memory" aria-hidden />
-        {formatMemory(totals.memory)}
-      </MetaChip>
-    </>
-  );
-}
-
-/** Processes under a row with their count and totals: an origin's, a session's. */
-function ProcessGroup({
-  label,
-  title,
-  defaultOpen = false,
-  roots,
-  totals,
-  tree,
-}: {
-  label: string;
-  /** The row's tooltip. */
-  title?: string;
-  defaultOpen?: boolean;
-  roots: readonly PerfProcessNode[];
-  totals: PerfTotals;
-  tree: TreeContext;
-}) {
-  const [open, setOpen] = useState(defaultOpen);
-  const count = roots.reduce((sum, node) => sum + 1 + node.descendants, 0);
-  return (
-    <div>
-      <div className={ROW}>
-        <button
-          type="button"
-          aria-expanded={open}
-          onClick={() => setOpen(!open)}
-          title={title}
-          className="flex-1 min-w-0 flex items-center gap-2 bg-transparent border-0 p-0 cursor-pointer text-left"
-        >
-          <Caret open={open} />
-          <span className="text-sm font-medium text-[var(--zg-text)] truncate">{label}</span>
-          <CountBadge tone="neutral" text={String(count)} />
-        </button>
-        <span className={COL}>{formatPercent(totals.cpu)}</span>
-        <span className={COL}>{formatMemory(totals.memory)}</span>
-      </div>
-      {open && roots.map((node) => <ProcessNode key={node.process.pid} node={node} depth={1} tree={tree} />)}
-    </div>
-  );
-}
-
-const ProcessNode = memo(function ProcessNode({
-  node,
-  depth,
-  tree,
-}: {
-  node: PerfProcessNode;
-  depth: number;
-  tree: TreeContext;
-}) {
-  const l = usePerformanceSectionLabels();
-  const { process, children, descendants, inside } = node;
-  const [open, setOpen] = useState(false);
-  const [threadsOpen, setThreadsOpen] = useState(false);
-  const [threads, setThreads] = useState<readonly PerfOsThread[] | null>(null);
-  const toggleThreads = () => {
-    const next = !threadsOpen;
-    setThreadsOpen(next);
-    if (next && tree.threads) {
-      setThreads(null);
-      void tree.threads(process.pid).then(setThreads, () => setThreads([]));
-    }
-  };
-  const label = (
-    <>
-      {children.length > 0 ? <Caret open={open} /> : <span className="w-3 shrink-0" />}
-      <span className="text-sm text-[var(--zg-text)] truncate">{process.label}</span>
-      {!open && descendants > 0 && (
-        <>
-          <CountBadge tone="neutral" text={String(descendants)} />
-          {/* What the closed rows use; the columns stay this row's own. */}
-          <UsageChips totals={inside} cpuTitle={l.perfInsideCpu} memoryTitle={l.perfInsideMemory} />
-        </>
-      )}
-    </>
-  );
-  const labelClass = 'flex-1 min-w-0 flex items-center gap-2';
-  return (
-    <div>
-      <div
-        className={`group ${ROW} rounded-zg-md hover:bg-[var(--zg-row-hover)]`}
-        style={{ paddingLeft: `calc(0.5rem + ${depth * INDENT_REM}rem)` }}
-        title={l.perfProcessTitle(process.pid, process.detail)}
-      >
-        {children.length > 0 ? (
-          <button
-            type="button"
-            aria-expanded={open}
-            onClick={() => setOpen(!open)}
-            className={`${labelClass} bg-transparent border-0 p-0 cursor-pointer text-left`}
-          >
-            {label}
-          </button>
-        ) : (
-          <span className={labelClass}>{label}</span>
-        )}
-        {tree.threads && (
-          <IconButton
-            icon="i-ph-list-bullets"
-            size="xs"
-            active={threadsOpen}
-            label={l.perfShowThreads(process.label)}
-            aria-expanded={threadsOpen}
-            onClick={toggleThreads}
-            className={threadsOpen ? '' : 'opacity-0 group-hover:opacity-100 focus-visible:opacity-100'}
-          />
-        )}
-        {process.mcp && (
-          <MetaChip title={l.perfMcpTitle(process.mcp.name)}>
-            {process.mcp.shared ? l.perfMcpShared(process.mcp.sessions) : l.perfMcpPerSession}
-          </MetaChip>
-        )}
-        <MetaChip>{l.perfProcessKind(process.kind)}</MetaChip>
-        <PerfSparkline values={tree.series.get(process.pid) ?? []} span={tree.span} className={SPARK} />
-        <span className={COL}>{formatPercent(process.cpu)}</span>
-        <span className={COL}>{formatMemory(process.memory)}</span>
-      </div>
-      {threadsOpen && (
-        <div style={{ paddingLeft: `calc(2rem + ${depth * INDENT_REM}rem)` }}>
-          {threads === null ? (
-            <Empty text={l.perfThreadsLoading} />
-          ) : threads.length === 0 ? (
-            <Empty text={l.perfThreadsNone} />
-          ) : (
-            threads.slice(0, 12).map((thread) => (
-              <div key={thread.id} className="flex items-center gap-2 px-2 h-6">
-                <span className="zg-meta flex-1 min-w-0 truncate">{l.perfOsThread(thread.id, thread.label)}</span>
-                <span className={COL}>{formatPercent(thread.cpu)}</span>
-              </div>
-            ))
-          )}
-        </div>
-      )}
-      {open &&
-        children.map((child) => <ProcessNode key={child.process.pid} node={child} depth={depth + 1} tree={tree} />)}
-    </div>
-  );
-});
-
-// ---- Threads, slow frames, IPC ----------------------------------------------------
-
-function Threads({ latest }: { latest: PerfSample }) {
-  const l = usePerformanceSectionLabels();
-  const threads = useMemo(() => [...latest.threads].sort((a, b) => b.busy - a.busy), [latest]);
-  const busiest = threads[0];
-  return (
-    <Section
-      title={l.perfThreads}
-      badges={
-        <>
-          <CountBadge tone="neutral" text={String(threads.length)} />
-          {busiest && <MetaChip title={busiest.label}>{l.perfBusy(formatPercent(busiest.busy * 100))}</MetaChip>}
-        </>
-      }
-    >
-      <Heads names={[l.perfColHeap, l.perfColBusy]} />
-      {threads.map((thread) => (
-        <div key={thread.id} className={ROW}>
-          <span className="flex-1 min-w-0 text-sm text-[var(--zg-text)] truncate">{thread.label}</span>
-          <MetaChip>{l.perfThreadKind(thread.kind)}</MetaChip>
-          <span className={COL}>{thread.heap === undefined ? '–' : formatMemory(thread.heap)}</span>
-          <span className={COL}>{formatPercent(thread.busy * 100)}</span>
-        </div>
-      ))}
-    </Section>
-  );
-}
-
-/** The last part of a script's path: the full one is the row's tooltip. */
-function fileOf(source: string): string {
-  return source.slice(source.lastIndexOf('/') + 1) || source;
-}
-
-function Frames({ latest }: { latest: PerfSample }) {
-  const l = usePerformanceSectionLabels();
-  const frames = latest.frames.slice(0, LIST_CAP);
-  const total = latest.frames.reduce((sum, frame) => sum + frame.totalMs, 0);
-  const windows = new Set(frames.map((frame) => frame.window)).size;
-  return (
-    <Section
-      title={l.perfFrames}
-      badges={
-        <>
-          <CountBadge tone="neutral" text={String(latest.frames.length)} />
-          {total > 0 && <MetaChip>{formatDuration(total)}</MetaChip>}
-          <MetaChip>{l.perfSince(since(latest.countersSince))}</MetaChip>
-        </>
-      }
-    >
-      {frames.length === 0 ? (
-        <Empty text={l.perfFramesEmpty} />
-      ) : (
-        <>
-          <Heads names={[l.perfColFrames, l.perfColTotal, l.perfColWorst]} />
-          {frames.map((frame) => (
-            <div key={`${frame.window}\0${frame.source}\0${frame.fn}`} className={ROW} title={frame.source}>
-              <span className="flex-1 min-w-0 truncate">
-                <span className="text-sm text-[var(--zg-text)] font-mono">{frame.fn}</span>{' '}
-                <span className="zg-meta">{fileOf(frame.source)}</span>
-              </span>
-              {windows > 1 && <MetaChip>{frame.window}</MetaChip>}
-              <span className={COL}>{frame.count}</span>
-              <span className={COL}>{formatDuration(frame.totalMs)}</span>
-              <span className={COL}>{formatDuration(frame.maxMs)}</span>
-            </div>
-          ))}
-        </>
-      )}
-    </Section>
-  );
-}
-
-function Channels({ latest }: { latest: PerfSample }) {
-  const l = usePerformanceSectionLabels();
-  const channels = latest.channels.slice(0, LIST_CAP);
-  const total = latest.channels.reduce((sum, channel) => sum + channel.totalMs, 0);
-  return (
-    <Section
-      title={l.perfChannels}
-      badges={
-        <>
-          <CountBadge tone="neutral" text={String(latest.channels.length)} />
-          {total > 0 && <MetaChip>{formatDuration(total)}</MetaChip>}
-          <MetaChip>{l.perfSince(since(latest.countersSince))}</MetaChip>
-        </>
-      }
-    >
-      {channels.length === 0 ? (
-        <Empty text={l.perfChannelsEmpty} />
-      ) : (
-        <>
-          <Heads names={[l.perfColCalls, l.perfColTotal, l.perfColP95, l.perfColWorst]} />
-          {channels.map((channel) => (
-            <div key={`${channel.direction}\0${channel.channel}`} className={ROW}>
-              <span className="flex-1 min-w-0 text-sm text-[var(--zg-text)] font-mono truncate">{channel.channel}</span>
-              {/* Most channels are requests: only the others say what they are. */}
-              {channel.direction !== 'invoke' && <MetaChip>{l.perfChannelDirection(channel.direction)}</MetaChip>}
-              <span className={COL}>{channel.count}</span>
-              <span className={COL}>{formatDuration(channel.totalMs)}</span>
-              <span className={COL}>{formatDuration(channel.p95Ms)}</span>
-              <span className={COL}>{formatDuration(channel.maxMs)}</span>
-            </div>
-          ))}
-        </>
-      )}
-    </Section>
-  );
-}
-
-// ---- CPU profile ---------------------------------------------------------------------
-
-function Profile({
-  host,
-  reveal,
-}: {
-  host: SettingsPerformanceHost;
-  reveal: ((path: string) => Promise<void>) | undefined;
-}) {
-  const l = usePerformanceSectionLabels();
-  const [target, setTarget] = useState<PerfProfileTarget>('window');
-  const [seconds, setSeconds] = useState<(typeof PROFILE_SECONDS)[number]>(5);
-  const [recording, setRecording] = useState(false);
-  const [outcome, setOutcome] = useState<PerfProfileOutcome | null>(null);
-  const record = async () => {
-    if (!host.profile) return;
-    setRecording(true);
-    setOutcome(null);
-    try {
-      setOutcome(await host.profile(target, seconds));
-    } catch (error) {
-      setOutcome({
-        ok: false,
-        error: { kind: 'failed', detail: error instanceof Error ? error.message : String(error) },
-      });
-    } finally {
-      setRecording(false);
-    }
-  };
-  return (
-    <Section
-      title={l.perfProfile}
-      {...(outcome?.ok ? { badges: <MetaChip>{formatDuration(outcome.profile.durationMs)}</MetaChip> } : {})}
-    >
-      <div className="flex items-center gap-2 flex-wrap px-2 py-1.5">
-        <Segmented
-          size="sm"
-          ariaLabel={l.perfProfileTarget}
-          value={target}
-          onChange={setTarget}
-          options={[
-            { value: 'window', label: l.perfProfileWindow },
-            { value: 'main', label: l.perfProfileMain },
-          ]}
-        />
-        <Segmented
-          size="sm"
-          ariaLabel={l.perfProfileLength}
-          value={String(seconds)}
-          onChange={(v) => setSeconds(Number(v) as (typeof PROFILE_SECONDS)[number])}
-          options={PROFILE_SECONDS.map((s) => ({ value: String(s), label: l.perfProfileSeconds(s) }))}
-        />
-        <span className="flex-1" />
-        {outcome?.ok && reveal && (
-          <button
-            type="button"
-            className={BTN_SECONDARY}
-            title={outcome.profile.path}
-            onClick={() => void reveal(outcome.profile.path)}
-          >
-            {l.perfReveal}
-          </button>
-        )}
-        <button type="button" className={BTN_PRIMARY} disabled={recording} onClick={() => void record()}>
-          {recording ? l.perfProfileRecording(seconds) : l.perfProfileRecord}
-        </button>
-      </div>
-      {outcome && !outcome.ok && (
-        <div className="px-2 pb-1.5 text-xs text-zg-danger">
-          {outcome.error.kind === 'busy' ? l.perfProfileBusy : l.perfProfileFailed(outcome.error.detail)}
-        </div>
-      )}
-      {outcome?.ok && (
-        <>
-          <Heads names={[l.perfColShare, l.perfColSelf]} />
-          {outcome.profile.top.slice(0, LIST_CAP).map((fn) => (
-            <div
-              key={`${fn.fn}\0${fn.url}\0${fn.line}`}
-              className={ROW}
-              title={fn.url ? `${fn.url}:${fn.line}` : undefined}
-            >
-              <span className="flex-1 min-w-0 truncate">
-                <span className="text-sm text-[var(--zg-text)] font-mono">{fn.fn}</span>{' '}
-                {fn.url && <span className="zg-meta">{`${fileOf(fn.url)}:${fn.line}`}</span>}
-              </span>
-              <span className={COL}>{formatPercent(fn.share * 100)}</span>
-              <span className={COL}>{formatDuration(fn.selfMs)}</span>
-            </div>
-          ))}
-        </>
-      )}
-    </Section>
-  );
-}