zidane-ui 9.0.4 → 9.1.3

package/src/chat/composer/ContextOrb.tsx

@@ -1,176 +0,0 @@
-/**
- * Context-usage orb in the composer's status cluster, with the context
- * window breakdown in its popover. The orb is a 16px donut: the arc fills
- * clockwise from 12 o'clock, red at ≥90%, amber at ≥70%, else accent. Cost
- * lives in the popover and the tooltip only; it is a low-frequency signal.
- */
-import type { CSSProperties, ReactNode } from 'react';
-
-import { Popover } from '../../components/floating/Popover';
-import { MetaChip } from '../../components/Form';
-import { useChatLabels } from '../useChatLabels';
-import { ContextBreakdown, type ContextBreakdownData } from './ContextBreakdown';
-
-const RADIUS = 7;
-const CIRC = 2 * Math.PI * RADIUS;
-
-/** The session's spend, as the popover's last row and the orb's tooltip show it. */
-export interface ContextCost {
-  /** Formatted total (`$0.42`). */
-  label: string;
-  /** The total includes a streaming turn's running estimate (`~` prefix, no money tint). */
-  estimated: boolean;
-  /** Number of runs the cost covers, or `null` when unknown. */
-  runCount: number | null;
-}
-
-/** Everything the orb and its popover show. */
-export interface ContextUsage {
-  /** Used share of the effective window, 0–1 (clamped). */
-  fraction: number;
-  /** Formatted used tokens (`61k`). */
-  usedLabel: string;
-  /** Formatted effective window (`200k`). */
-  windowLabel: string;
-  /** Id of the model the session runs. */
-  modelId: string;
-  /** The model's readable name (default: `modelId`). */
-  modelName?: string;
-  /** Auto-compact threshold (0–1) when auto-compact is on. */
-  autoCompactThreshold?: number | null;
-  /** The session's spend, shown in the popover and tooltip. `null` or omitted: no cost row. */
-  cost?: ContextCost | null;
-  /** The breakdown the default popover body renders: undefined loading, null unavailable. */
-  breakdown?: ContextBreakdownData | null;
-}
-
-/** The orb's share in percent and its color, for a breakdown's fallback gauge. */
-export interface ContextGauge {
-  /** The used share as a whole percent from 0 to 100. */
-  pct: number;
-  /** CSS color of the arc: red from 90%, amber from 70%, accent below. */
-  color: string;
-}
-
-/**
- * Computes the orb's percent and color from a used fraction.
- *
- * @param fraction - Used share of the context window, from 0 to 1. Values outside the range are clamped.
- */
-export function contextGauge(fraction: number): ContextGauge {
-  const pct = Math.round(Math.max(0, Math.min(1, fraction)) * 100);
-  return { pct, color: pct >= 90 ? 'var(--zg-danger)' : pct >= 70 ? 'var(--zg-warn)' : 'var(--zg-accent)' };
-}
-
-/** Props for {@link ContextOrb}. */
-export interface ContextOrbProps {
-  /** Everything the orb and its popover show. */
-  usage: ContextUsage;
-  /**
-   * The popover's breakdown body, mounted while it is open (a host that
-   * fetches the breakdown on open renders its own). Default:
-   * `<ContextBreakdown breakdown={usage.breakdown} … />`.
-   */
-  renderBreakdown?: (gauge: ContextGauge) => ReactNode;
-  /** Extra classes on the root element (the orb's trigger button). */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders the context usage donut and, in its popover, the window breakdown and session cost.
- *
- * @param props - The {@link ContextOrbProps}.
- */
-export function ContextOrb({ usage, renderBreakdown, className, style }: ContextOrbProps) {
-  const labels = useChatLabels();
-  const fraction = Math.max(0, Math.min(1, usage.fraction));
-  const gauge = contextGauge(fraction);
-  const { pct, color } = gauge;
-  const { cost } = usage;
-  const compactThreshold = usage.autoCompactThreshold ?? null;
-  const summary = labels.contextSummary(usage.usedLabel, usage.windowLabel, pct);
-
-  return (
-    <Popover
-      ariaLabel={labels.contextDetail}
-      width={340}
-      align="end"
-      trigger={(props) => (
-        <button
-          {...props}
-          type="button"
-          // The orb draws nothing but the donut, so the tooltip is also its name.
-          aria-label={cost?.label ? labels.contextSummaryCost(summary, cost.label) : summary}
-          title={cost?.label ? labels.contextSummaryCost(summary, cost.label) : summary}
-          className={[
-            'zg-segment-item zg-press-soft inline-flex items-center justify-center w-7 h-7 rounded-full bg-transparent border-0 cursor-pointer p-0',
-            className,
-          ]
-            .filter(Boolean)
-            .join(' ')}
-          style={style}
-        >
-          <svg width={16} height={16} viewBox="0 0 16 16" aria-hidden>
-            <g transform="rotate(-90 8 8)">
-              <circle cx={8} cy={8} r={RADIUS} fill="none" stroke="var(--zg-border)" strokeWidth={2} />
-              <circle
-                cx={8}
-                cy={8}
-                r={RADIUS}
-                fill="none"
-                stroke={color}
-                strokeWidth={2}
-                strokeDasharray={CIRC}
-                strokeDashoffset={CIRC * (1 - fraction)}
-                strokeLinecap="round"
-                style={{ transition: 'stroke-dashoffset var(--zg-motion-settle), stroke var(--zg-motion-fade)' }}
-              />
-            </g>
-          </svg>
-        </button>
-      )}
-    >
-      {() => (
-        <div className="p-3 flex flex-col gap-3">
-          <div className="flex flex-col gap-1 px-1">
-            <div className="flex items-baseline justify-between gap-3">
-              <span className="text-zg-ui font-medium text-[var(--zg-text)]">{labels.contextWindow}</span>
-              <span className="zg-meta shrink-0">
-                <span style={{ color }}>{usage.usedLabel}</span> / {usage.windowLabel} ({pct}%)
-              </span>
-            </div>
-            <div className="zg-meta flex items-center justify-between gap-3">
-              <span className="truncate" title={usage.modelId}>
-                {usage.modelName ?? usage.modelId}
-              </span>
-              {compactThreshold !== null && (
-                <span className="shrink-0">{labels.contextAutoCompact(Math.round(compactThreshold * 100))}</span>
-              )}
-            </div>
-          </div>
-
-          {renderBreakdown ? (
-            renderBreakdown(gauge)
-          ) : (
-            <ContextBreakdown breakdown={usage.breakdown} fallbackPct={pct} fallbackColor={color} />
-          )}
-
-          {cost?.label && (
-            <div className="flex items-center justify-between gap-3 px-1 text-zg-label">
-              <span className="text-[var(--zg-text-muted)]">{labels.contextSessionCost}</span>
-              <span className="flex items-center gap-1.5">
-                <span className="zg-meta" style={{ color: cost.estimated ? undefined : 'var(--zg-money)' }}>
-                  {cost.estimated ? '~' : ''}
-                  {cost.label}
-                </span>
-                {cost.runCount !== null && <MetaChip>{labels.contextRunCount(cost.runCount)}</MetaChip>}
-              </span>
-            </div>
-          )}
-        </div>
-      )}
-    </Popover>
-  );
-}

package/src/chat/composer/ConversationBadges.tsx

@@ -1,159 +0,0 @@
-/**
- * The composer's badge strip for one conversation (`ComposerBadges`, drawn
- * at the top of the composer's tray): what waits in the inbox, the todos'
- * progress, the queued messages, the running work you can stop, and what
- * extensions show with the session (`ComposerHost.hud`). What goes in, in
- * which default order, is `conversationBadges` (`zidane-ui/chat/headless`).
- *
- * The session's todos, queue and running work come from the `SessionHost`
- * (`zidane-ui/session`), its pending requests from the `ChatHost`
- * (`interactions`). Running opens the app's Running work view
- * (`onOpenRunningWork`); it shows once a call has run a moment and stays a
- * moment after the work ends (`useSustainedWork`).
- *
- * A badge opens its panel (`onOpenPanel`); the badge of the panel on screen
- * (`onScreen`) is the raised chip, and a click on it closes the panel
- * (`onClosePanel`). What was on screen is read at the pointer-down, so an
- * app that hides a floating panel on any pointer-down before the click
- * still sees a click on its badge as a close.
- */
-import { memo, useCallback, useEffect, useMemo, useRef, type CSSProperties } from 'react';
-
-import { useSessionHost, useSessionQueue, useSessionRunningWork, useSessionTodos } from '../../session/SessionProvider';
-import { conversationBadges } from '../headless/composer/conversation-badges';
-import { usePendingInteractions } from '../interactions/hooks';
-import { mergeBadgeOrder, orderComposerBadges } from './badge-order';
-import { ComposerBadges, type ComposerBadge } from './ComposerBadges';
-import { useComposerLabels } from './ComposerHostProvider';
-import { useHudBadges, useHudStatuses } from './use-hud';
-import { useSustainedWork } from './use-sustained-work';
-
-/** Props for {@link ConversationBadges}. */
-export interface ConversationBadgesProps {
-  /** The conversation, `null` for a draft. */
-  sessionId: string | null;
-  /** Show the todos' progress. @default true */
-  showTodos?: boolean;
-  /** The conversation's panel ids: a badge naming another opens nothing. */
-  panels: ReadonlySet<string>;
-  /** The panel on screen beside the conversation, `null` for none. */
-  onScreen?: string | null;
-  /** Opens (and focuses) a panel. */
-  onOpenPanel?: (panel: string) => void;
-  /** Closes the panel on screen. */
-  onClosePanel?: () => void;
-  /** The user's order (badge ids). */
-  order?: readonly string[];
-  /** Saves a new order: the saved one with the move merged in (`mergeBadgeOrder`). Absent: badges don't move. */
-  onOrderChange?: (merge: (saved: readonly string[]) => string[]) => void;
-  /** Opens the conversation's Running work view. Absent: the Running badge is a plain pill. */
-  onOpenRunningWork?: (sessionId: string) => void;
-  /** Extra classes on the strip. */
-  className?: string;
-  /** Inline styles on the strip. */
-  style?: CSSProperties;
-}
-
-const NO_ORDER: readonly string[] = [];
-
-/** The badge strip of one conversation (see the header). */
-export const ConversationBadges = memo(function ConversationBadges({
-  sessionId,
-  showTodos = true,
-  panels,
-  onScreen = null,
-  onOpenPanel,
-  onClosePanel,
-  order = NO_ORDER,
-  onOrderChange,
-  onOpenRunningWork,
-  className,
-  style,
-}: ConversationBadgesProps) {
-  const labels = useComposerLabels();
-  const interactions = usePendingInteractions(sessionId);
-  const todos = useSessionTodos(sessionId);
-  const fetchTodos = useSessionHost().todos?.refresh;
-  const queued = useSessionQueue(sessionId).length;
-  const statuses = useHudStatuses(sessionId);
-  const extensionBadges = useHudBadges(sessionId);
-  const work = useSustainedWork(sessionId, useSessionRunningWork(sessionId));
-
-  // A conversation opened before any todos snapshot reached it (a window
-  // reopened over a live agent) reads its list once; the run's broadcasts take over from there.
-  useEffect(() => {
-    if (sessionId) void fetchTodos?.(sessionId);
-  }, [sessionId, fetchTodos]);
-
-  const head = interactions[0] ?? null;
-  const waiting = interactions.length;
-  const data = useMemo(
-    () =>
-      conversationBadges(
-        {
-          inbox: head ? { count: waiting, head: head.request, live: head.live !== false } : null,
-          todos,
-          showTodos,
-          queued,
-          work,
-          statuses,
-          extensionBadges,
-          panels,
-        },
-        labels,
-      ),
-    [head, waiting, todos, showTodos, queued, work, statuses, extensionBadges, panels, labels],
-  );
-
-  // `onScreen` as last painted, and as it was when the pointer went down on the strip.
-  const shown = useRef(onScreen);
-  shown.current = onScreen;
-  const shownAtPress = useRef<string | null | undefined>(undefined);
-
-  const select = useCallback(
-    (panel: string) => {
-      const was = shownAtPress.current === undefined ? onScreen : shownAtPress.current;
-      shownAtPress.current = undefined;
-      if (panel === was) {
-        onClosePanel?.();
-        return;
-      }
-      onOpenPanel?.(panel);
-    },
-    [onScreen, onOpenPanel, onClosePanel],
-  );
-
-  const badges = useMemo<ComposerBadge[]>(
-    () =>
-      orderComposerBadges(data, order).map(({ panel, opensWork, ...badge }) => {
-        if (opensWork && sessionId && onOpenRunningWork) {
-          return { ...badge, onSelect: () => onOpenRunningWork(sessionId) };
-        }
-        return panel && onOpenPanel ? { ...badge, active: panel === onScreen, onSelect: () => select(panel) } : badge;
-      }),
-    [data, order, onScreen, select, sessionId, onOpenRunningWork, onOpenPanel],
-  );
-
-  const reorder = useCallback(
-    (ids: readonly string[]) => onOrderChange?.((saved) => mergeBadgeOrder(saved, ids)),
-    [onOrderChange],
-  );
-
-  return (
-    // `contents`: no box of its own in the tray. The capture runs after an ancestor's, before React repaints.
-    <div
-      className="contents"
-      onPointerDownCapture={() => (shownAtPress.current = shown.current)}
-      // Gone once the click it was for has run (or never came: a drag), so Enter and Space read the screen.
-      onPointerUpCapture={() => setTimeout(() => (shownAtPress.current = undefined))}
-    >
-      <ComposerBadges
-        badges={badges}
-        resetKey={sessionId ?? 'draft'}
-        {...(onOrderChange ? { onReorder: reorder } : {})}
-        {...(className ? { className } : {})}
-        {...(style ? { style } : {})}
-      />
-    </div>
-  );
-});

package/src/chat/composer/DockCard.tsx

@@ -1,126 +0,0 @@
-/**
- * Composer dock primitives: the ONE visual grammar for everything that
- * stacks above the prompt (an approval, the select-turn hint). What waits
- * around the conversation (the inbox, todos, the queue, extensions) is a
- * badge in the composer's tray instead (`ConversationBadges`).
- *
- * Alignment contract, measured against the composer card:
- *   - `DockCard` is `px-4` (16px): its text column starts exactly where the
- *     composer's editor text does (the card's `px-1` + the 12px
- *     `--zg-composer-inset`), so a queued message and the prompt below it
- *     share an edge. Retune both together.
- *   - `DockRow` puts an optional 12px glyph slot first, then `gap-2`, so
- *     every glyph-led row (status dot, cursor glyph) lands its text at the
- *     same 36px and its glyph on the same 22px center.
- *   - Rows are 28px tall minimum; cards are `py-2`; the dock stacks with
- *     `gap-2`. A raised card (`.zg-raised`), like the composer's.
- */
-import type { CSSProperties, ReactNode } from 'react';
-
-/** Props for {@link ComposerDock}. */
-export interface ComposerDockProps {
-  /** The docked cards; each may render nothing. */
-  children: ReactNode;
-  /** Extra classes on the dock. */
-  className?: string;
-  /** Inline styles on the dock. */
-  style?: CSSProperties;
-}
-
-/**
- * The column above the prompt. `zg-composer-dock` carries `:empty { display:
- * none }` (styles/composer.css): every child renders null on an idle
- * session, and a zero-height flex item would still consume one of the
- * footer column's 8px gaps, pushing the composer down at rest.
- *
- * @param props - The {@link ComposerDockProps}.
- */
-export function ComposerDock({ children, className, style }: ComposerDockProps) {
-  return (
-    <div className={`zg-composer-dock flex flex-col gap-2${className ? ` ${className}` : ''}`} style={style}>
-      {children}
-    </div>
-  );
-}
-
-/** Props for {@link DockCard}. */
-export interface DockCardProps {
-  /** The card's content. */
-  children: ReactNode;
-  /** Extra classes on the card. */
-  className?: string;
-  /** Inline styles on the card, merged after its own. */
-  style?: CSSProperties;
-  /** `attention` tints the surface with the warn color, for things awaiting the user. */
-  tone?: 'default' | 'attention';
-  /** `false` when one full-bleed child (a button) owns the padding and the hover. */
-  padded?: boolean;
-}
-
-const ATTENTION: CSSProperties = {
-  background: 'color-mix(in srgb, var(--zg-warn) 7%, var(--zg-raised))',
-  borderColor: 'color-mix(in srgb, var(--zg-warn) 35%, var(--zg-hairline))',
-};
-
-/**
- * One raised card in the dock.
- *
- * @param props - The {@link DockCardProps}.
- */
-export function DockCard({ children, className = '', style, tone = 'default', padded = true }: DockCardProps) {
-  const toneStyle = tone === 'attention' ? ATTENTION : undefined;
-  return (
-    <div
-      className={`zg-dock-card zg-raised border rounded-zg-lg ${padded ? 'px-4 py-2' : 'overflow-hidden'} ${className}`}
-      // Inline: `.zg-raised` paints background and border after the utilities.
-      style={style ? { ...toneStyle, ...style } : toneStyle}
-    >
-      {children}
-    </div>
-  );
-}
-
-/** Props for {@link DockRow}. */
-export interface DockRowProps {
-  /** Leading glyph in the fixed 12px slot; omit for text flush at the card inset. */
-  glyph?: ReactNode;
-  /** The row's body. */
-  children: ReactNode;
-  /** Actions at the end. */
-  trailing?: ReactNode;
-  /** Extra classes on the row. */
-  className?: string;
-  /** Inline styles on the row. */
-  style?: CSSProperties;
-  /**
-   * `start` pins the glyph and trailing actions to the first 28px line of a
-   * tall body (an inline editor) instead of floating them at its middle.
-   */
-  align?: 'center' | 'start';
-}
-
-/**
- * One line of a dock card: glyph, body, actions.
- *
- * @param props - The {@link DockRowProps}.
- */
-export function DockRow({ glyph, children, trailing, className = '', style, align = 'center' }: DockRowProps) {
-  const side = align === 'start' ? 'h-7' : '';
-  return (
-    <div
-      className={`flex ${align === 'start' ? 'items-start' : 'items-center'} gap-2 min-h-7 text-xs ${className}`}
-      style={style}
-    >
-      {glyph !== undefined && (
-        <span
-          aria-hidden
-          className={`w-3 shrink-0 inline-flex items-center justify-center text-[var(--zg-text-muted)] ${side}`}
-        >
-          {glyph}
-        </span>
-      )}
-      <div className="flex-1 min-w-0">{children}</div>
-      {trailing && <div className={`shrink-0 inline-flex items-center gap-1 ${side}`}>{trailing}</div>}
-    </div>
-  );
-}

package/src/chat/composer/EffortPickerDialog.tsx

@@ -1,184 +0,0 @@
-/**
- * The model options dialog: the keyboard-shortcut surface for the active
- * session's model knobs, on the app's modal layer. Unifies two things:
- *   1. Reasoning effort (`off / minimal / low / medium / high / xhigh / max / adaptive`),
- *      threaded into `agent.run({ thinking })`. Single-select; applying closes.
- *   2. Feature toggles (e.g. fast mode), threaded into
- *      `agent.run({ modelOptions })`. Independent booleans; toggling keeps the
- *      modal open.
- *
- * Mirrors the TUI's `ModelOptionsPickerModal` and the composer's options pill
- * (`ModelOptionsPicker`). A level that would re-read a long prompt says so
- * (`useCacheHints`). Sections render only when the model exposes them, so a
- * model with no reasoning and no options never opens this (the caller gates
- * the shortcut). Needs a `ModalProvider` (`zidane-ui/app`).
- */
-import { useCallback, useEffect, useMemo, useState } from 'react';
-
-import { ModalShell, useModal } from '../../app/ModalProvider';
-import { MenuRow } from '../../components/Menu';
-import { SectionLabel } from '../../components/Surface';
-import type { ComposerEffort, ComposerSessionView } from '../headless/composer/host-chrome';
-import type { ComposerModelOption } from '../headless/composer/models';
-import { useComposerLabels } from './ComposerHostProvider';
-import { EFFORT_LEVELS, OPTION_ICON } from './ModelOptionsPicker';
-import { useCacheHints } from './use-cache-hints';
-
-type ThinkingLevel = ComposerEffort;
-type ModelOptionSummary = ComposerModelOption;
-
-/** Props for {@link EffortPickerDialog}. */
-export interface EffortPickerDialogProps {
-  /** The session whose knobs are set. */
-  session: ComposerSessionView;
-  /** Whether the active model exposes a reasoning knob (effort section). */
-  supportsReasoning: boolean;
-  /** Feature options the active model declares (toggle section). */
-  options: readonly ModelOptionSummary[];
-  /** Currently-enabled option ids. */
-  enabled: Record<string, boolean>;
-  /** Applies an effort (the dialog closes once it settles). */
-  onApplyEffort: (effort: ThinkingLevel) => Promise<void> | void;
-  /** Applies the enabled options after a toggle (the dialog stays open). */
-  onToggleOption: (next: Record<string, boolean>) => Promise<void> | void;
-}
-
-/** Flat row model so ↑/↓ traverses both sections as one cursor. */
-type Row = { kind: 'effort'; effort: (typeof EFFORT_LEVELS)[number] } | { kind: 'option'; option: ModelOptionSummary };
-
-/**
- * The model options dialog (see the header).
- *
- * @param props - The {@link EffortPickerDialogProps}.
- */
-export function EffortPickerDialog({
-  session,
-  supportsReasoning,
-  options,
-  enabled,
-  onApplyEffort,
-  onToggleOption,
-}: EffortPickerDialogProps) {
-  const modal = useModal();
-  const labels = useComposerLabels();
-  const currentEffort = session.effort ?? 'medium';
-  const [local, setLocal] = useState<Record<string, boolean>>(enabled);
-  const cacheHint = useCacheHints(session.id);
-
-  const rows = useMemo<Row[]>(() => {
-    const out: Row[] = [];
-    if (supportsReasoning) {
-      for (const effort of EFFORT_LEVELS) out.push({ kind: 'effort', effort });
-    }
-    for (const option of options) out.push({ kind: 'option', option });
-    return out;
-  }, [supportsReasoning, options]);
-
-  const initialCursor = Math.max(
-    0,
-    rows.findIndex((r) => r.kind === 'effort' && r.effort === currentEffort),
-  );
-  const [cursor, setCursor] = useState<number>(initialCursor);
-
-  const applyEffort = useCallback(
-    async (level: ThinkingLevel) => {
-      await onApplyEffort(level);
-      modal.close();
-    },
-    [onApplyEffort, modal],
-  );
-
-  const toggle = useCallback(
-    async (id: string) => {
-      const next = { ...local, [id]: !local[id] };
-      setLocal(next);
-      await onToggleOption(next);
-    },
-    [local, onToggleOption],
-  );
-
-  const activate = useCallback(
-    (row: Row | undefined) => {
-      if (!row) return;
-      if (row.kind === 'effort') void applyEffort(row.effort);
-      else void toggle(row.option.id);
-    },
-    [applyEffort, toggle],
-  );
-
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'ArrowDown') {
-        e.preventDefault();
-        setCursor((c) => Math.min(rows.length - 1, c + 1));
-      } else if (e.key === 'ArrowUp') {
-        e.preventDefault();
-        setCursor((c) => Math.max(0, c - 1));
-      } else if (e.key === 'Enter' || e.key === ' ') {
-        e.preventDefault();
-        activate(rows[cursor]);
-      }
-    };
-    document.addEventListener('keydown', onKey);
-    return () => document.removeEventListener('keydown', onKey);
-  }, [cursor, rows, activate]);
-
-  const firstOptionIdx = rows.findIndex((r) => r.kind === 'option');
-
-  return (
-    <ModalShell
-      title={labels.effortDialogTitle}
-      description={labels.effortDialogDescription(session.title ?? '')}
-      onClose={modal.close}
-      size="medium"
-    >
-      <div className="flex flex-col">
-        {supportsReasoning && <SectionLabel className="px-2 pb-1">{labels.effortDialogReasoning}</SectionLabel>}
-        <ul className="flex flex-col gap-0.5 list-none m-0 p-0">
-          {rows.map((row, idx) => {
-            const isCursor = idx === cursor;
-            if (row.kind === 'effort') {
-              const isCurrent = row.effort === currentEffort;
-              const hint = isCurrent ? undefined : cacheHint(row.effort, { effort: row.effort });
-              return (
-                <li key={`effort:${row.effort}`}>
-                  <MenuRow
-                    onMouseEnter={() => setCursor(idx)}
-                    onClick={() => void applyEffort(row.effort)}
-                    active={isCursor}
-                    role="menuitemradio"
-                    checked={isCurrent}
-                    title={row.effort}
-                    trailing={hint ? <span className="zg-meta">{hint}</span> : undefined}
-                  />
-                </li>
-              );
-            }
-
-            const isOn = local[row.option.id] === true;
-            return (
-              <li key={`option:${row.option.id}`}>
-                {idx === firstOptionIdx && (
-                  <SectionLabel className="px-2 pt-3 pb-1">{labels.effortDialogFeatures}</SectionLabel>
-                )}
-                <MenuRow
-                  size={row.option.description ? 'lg' : 'md'}
-                  onMouseEnter={() => setCursor(idx)}
-                  onClick={() => void toggle(row.option.id)}
-                  active={isCursor}
-                  role="menuitemcheckbox"
-                  toggle={isOn}
-                  icon={
-                    OPTION_ICON[row.option.id] ? <span aria-hidden className={OPTION_ICON[row.option.id]} /> : undefined
-                  }
-                  title={row.option.label}
-                  description={row.option.description}
-                />
-              </li>
-            );
-          })}
-        </ul>
-      </div>
-    </ModalShell>
-  );
-}