@robota-sdk/agent-ui-web 0.0.0-stage → 3.0.0-beta.93

package/src/components/SettingsScreen.tsx

@@ -0,0 +1,340 @@
+'use client';
+
+import { ChevronLeft, X } from 'lucide-react';
+import React, { useEffect, useState } from 'react';
+
+import { ConfirmDialog, Dialog } from './Dialog.js';
+import { SettingsGeneralSection } from './SettingsGeneralSection.js';
+import { SettingsMcpSection } from './SettingsMcpSection.js';
+import { describePermissionRuleRemoval, SettingsPermissionsSection } from './SettingsPermissionsSection.js';
+import { SettingsPluginsSection } from './SettingsPluginsSection.js';
+import { SettingsProvidersSection } from './SettingsProvidersSection.js';
+
+import type { IWsSessionState } from '../hooks/useSessionClient.js';
+import type { ISettingsPermissionRule, ISettingsPlugin } from '@robota-sdk/agent-interface-session';
+
+interface ISettingsSectionDefinition {
+  id: string;
+  label: string;
+}
+
+/**
+ * The Settings screen's sections (#3282 §4). Adding a later section (Advisor) is one entry here plus
+ * one component in the switch below — nothing else in this file changes.
+ */
+const SECTIONS: readonly ISettingsSectionDefinition[] = [
+  { id: 'general', label: 'General' },
+  { id: 'permissions', label: 'Permissions' },
+  { id: 'mcp', label: 'MCP Servers' },
+  { id: 'plugins', label: 'Plugins' },
+  { id: 'providers', label: 'Providers & Models' },
+];
+
+type TPendingSkipAllChecks = { kind: 'mode' } | { kind: 'preset'; presetId: string };
+type TPendingPluginAction =
+  | { kind: 'install'; pluginId: string }
+  | { kind: 'uninstall'; plugin: ISettingsPlugin };
+
+/**
+ * A large modal sheet with a section sidebar on the left and content on the right (#3282 §4a) — the
+ * GUI's Settings screen, opened by the sidebar's gear button, the desktop app's ⌘, menu item, or
+ * `/settings` (its `show-settings` `ui_intent` calls `state.openSettings()`, wired in
+ * `useSessionClient`). Every change applies at once; there is no Save button. Esc and the Close
+ * button both close it and return focus to whatever opened it (`Dialog` owns that).
+ */
+export function SettingsScreen({ state }: { state: IWsSessionState }): React.ReactElement | null {
+  const [activeSectionId, setActiveSectionId] = useState<string>('general');
+  // Narrow layout only: true shows the section LIST; false shows the selected section's content,
+  // pushed in over the list, with the Back button above returning to it.
+  const [showList, setShowList] = useState(true);
+  const [pendingSkipAllChecks, setPendingSkipAllChecks] = useState<TPendingSkipAllChecks | null>(
+    null,
+  );
+  const [pendingRuleRemoval, setPendingRuleRemoval] = useState<ISettingsPermissionRule | null>(
+    null,
+  );
+  const [pendingPluginAction, setPendingPluginAction] = useState<TPendingPluginAction | null>(null);
+  const [mcpReloading, setMcpReloading] = useState(false);
+  const [pluginsReloading, setPluginsReloading] = useState(false);
+  // #3282 §4b: the profile a pending "Delete…" confirms, or null when none is pending.
+  const [pendingProviderDelete, setPendingProviderDelete] = useState<string | null>(null);
+
+  // Each time the screen opens, land on the section the opener asked for (`/plugin` → Plugins,
+  // "Manage providers…" → Providers & Models; the gear and `/settings` ask for none, which lands on
+  // General) and, for narrow windows, on the section list.
+  useEffect(() => {
+    if (!state.settingsOpen) return;
+    setActiveSectionId(state.settingsInitialSectionId ?? 'general');
+    setShowList(true);
+  }, [state.settingsOpen, state.settingsInitialSectionId]);
+
+  // A reply to ANY request clears a reload spinner — the common case is the reload's own reply;
+  // a snapshot refreshed from elsewhere in the meantime is a reasonable time to stop showing it too.
+  // `settingsError` is in the dependency list too: a reload that fails updates the error, not the
+  // snapshot, and without it the button would spin forever on a failed reload.
+  useEffect(() => {
+    setMcpReloading(false);
+    setPluginsReloading(false);
+  }, [state.settingsSnapshot, state.settingsError]);
+
+  if (!state.settingsOpen) return null;
+
+  const snapshot = state.settingsSnapshot;
+  const activeSection = SECTIONS.find((section) => section.id === activeSectionId) ?? SECTIONS[0];
+
+  function selectSection(id: string): void {
+    setActiveSectionId(id);
+    setShowList(false);
+  }
+
+  function requestPermissionModeChange(mode: string): void {
+    if (snapshot && mode === snapshot.permissionMode.skipsAllChecksMode) {
+      setPendingSkipAllChecks({ kind: 'mode' });
+      return;
+    }
+    state.updateSettings({ field: 'permissionMode', mode });
+  }
+
+  function requestPresetChange(presetId: string): void {
+    if (snapshot?.preset.skipsAllChecksPresetIds.includes(presetId)) {
+      setPendingSkipAllChecks({ kind: 'preset', presetId });
+      return;
+    }
+    state.updateSettings({ field: 'preset', presetId });
+  }
+
+  function reloadMcpServers(): void {
+    setMcpReloading(true);
+    state.updateSettings({ field: 'reloadMcpServers' });
+  }
+
+  function reloadPlugins(): void {
+    setPluginsReloading(true);
+    state.updateSettings({ field: 'reloadPlugins' });
+  }
+
+  function confirmPluginAction(): void {
+    if (pendingPluginAction?.kind === 'install') {
+      state.updateSettings({ field: 'installPlugin', pluginId: pendingPluginAction.pluginId });
+    } else if (pendingPluginAction?.kind === 'uninstall') {
+      state.updateSettings({ field: 'uninstallPlugin', pluginId: pendingPluginAction.plugin.id });
+    }
+    setPendingPluginAction(null);
+  }
+
+  return (
+    <>
+      <Dialog
+        open
+        onClose={() => state.closeSettings()}
+        title="Settings"
+        panelClassName="flex h-[min(680px,85vh)] w-full max-w-3xl flex-col overflow-hidden rounded-2xl bg-card text-card-foreground shadow-[0_8px_30px_-12px_rgb(0_0_0/0.45)] focus:outline-none"
+      >
+        <div className="flex h-12 flex-shrink-0 items-center gap-1 border-b border-border px-3">
+          {!showList ? (
+            <button
+              type="button"
+              aria-label="Back to sections"
+              onClick={() => setShowList(true)}
+              className="rounded-md p-1.5 text-muted-foreground hover:bg-hover hover:text-foreground md:hidden"
+            >
+              <ChevronLeft size={18} strokeWidth={1.75} />
+            </button>
+          ) : null}
+          <h2 className="px-1.5 text-[15px] font-semibold text-foreground">Settings</h2>
+          <button
+            type="button"
+            aria-label="Close Settings"
+            onClick={() => state.closeSettings()}
+            className="ml-auto rounded-md p-1.5 text-muted-foreground hover:bg-hover hover:text-foreground"
+          >
+            <X size={17} strokeWidth={1.75} />
+          </button>
+        </div>
+
+        <div className="flex min-h-0 flex-1">
+          <nav
+            aria-label="Settings sections"
+            className={`w-full flex-shrink-0 overflow-y-auto border-r border-border bg-sidebar px-2 py-3 md:block md:w-[200px] ${
+              showList ? 'block' : 'hidden'
+            }`}
+          >
+            <ul className="space-y-0.5">
+              {SECTIONS.map((section) => (
+                <li key={section.id}>
+                  <button
+                    type="button"
+                    onClick={() => selectSection(section.id)}
+                    aria-current={section.id === activeSectionId ? 'true' : undefined}
+                    className={`w-full rounded-lg px-2.5 py-2 text-left text-[13.5px] ${
+                      section.id === activeSectionId
+                        ? 'bg-raised font-medium text-foreground'
+                        : 'text-foreground/85 hover:bg-hover'
+                    }`}
+                  >
+                    {section.label}
+                  </button>
+                </li>
+              ))}
+            </ul>
+          </nav>
+
+          <div
+            className={`min-h-0 flex-1 overflow-y-auto px-5 py-4 md:block ${
+              showList ? 'hidden' : 'block'
+            }`}
+          >
+            {snapshot === null ? (
+              state.settingsStatus === 'error' ? (
+                <div className="flex flex-col items-start gap-2">
+                  <p className="text-[13.5px] text-destructive">
+                    {state.settingsError ?? 'Settings could not be read.'}
+                  </p>
+                  <button
+                    type="button"
+                    onClick={() => state.openSettings()}
+                    className="rounded-lg bg-raised px-3 py-1.5 text-[13px] text-foreground hover:bg-hover"
+                  >
+                    Try again
+                  </button>
+                </div>
+              ) : (
+                <p className="text-[13.5px] text-muted-foreground">Loading settings…</p>
+              )
+            ) : (
+              <>
+                {state.settingsError ? (
+                  <p className="mb-3 rounded-lg bg-destructive/12 px-3 py-2 text-[13px] text-destructive">
+                    {state.settingsError}
+                  </p>
+                ) : null}
+                {activeSection.id === 'general' ? (
+                  <SettingsGeneralSection
+                    snapshot={snapshot}
+                    onUpdate={state.updateSettings}
+                    onRequestPresetChange={requestPresetChange}
+                  />
+                ) : activeSection.id === 'mcp' ? (
+                  <SettingsMcpSection
+                    snapshot={snapshot}
+                    onToggleServer={(serverId, enabled) =>
+                      state.updateSettings({ field: 'mcpServerEnabled', serverId, enabled })
+                    }
+                    onReload={reloadMcpServers}
+                    reloading={mcpReloading}
+                  />
+                ) : activeSection.id === 'plugins' ? (
+                  <SettingsPluginsSection
+                    snapshot={snapshot}
+                    onTogglePlugin={(pluginId, enabled) =>
+                      state.updateSettings({ field: 'pluginEnabled', pluginId, enabled })
+                    }
+                    onReload={reloadPlugins}
+                    reloading={pluginsReloading}
+                    onRequestInstall={(pluginId) => setPendingPluginAction({ kind: 'install', pluginId })}
+                    onRequestUninstall={(plugin) => setPendingPluginAction({ kind: 'uninstall', plugin })}
+                  />
+                ) : activeSection.id === 'providers' ? (
+                  <SettingsProvidersSection
+                    snapshot={snapshot}
+                    modelList={state.modelList}
+                    onRequestModelList={state.requestModelList}
+                    onUse={(profileName) => state.updateSettings({ field: 'providerProfile', profileName })}
+                    onModelChange={(profileName, modelId) =>
+                      state.updateSettings({ field: 'providerModel', profileName, modelId })
+                    }
+                    onCommand={(args) => state.send({ type: 'command', name: 'provider', args })}
+                    onRequestDelete={(profileName) => setPendingProviderDelete(profileName)}
+                  />
+                ) : (
+                  <SettingsPermissionsSection
+                    snapshot={snapshot}
+                    onRequestModeChange={requestPermissionModeChange}
+                    onToggleSandbox={(enabled) => state.updateSettings({ field: 'sandbox', enabled })}
+                    onRequestRemoveRule={(rule) => setPendingRuleRemoval(rule)}
+                  />
+                )}
+              </>
+            )}
+          </div>
+        </div>
+      </Dialog>
+
+      <ConfirmDialog
+        open={pendingSkipAllChecks !== null}
+        title="Skip all permission checks?"
+        body="Every action runs without asking first — file edits, shell commands and network access included. You can turn this back on at any time."
+        confirmLabel="Skip all checks"
+        destructive
+        onCancel={() => setPendingSkipAllChecks(null)}
+        onConfirm={() => {
+          if (pendingSkipAllChecks?.kind === 'mode' && snapshot) {
+            state.updateSettings({
+              field: 'permissionMode',
+              mode: snapshot.permissionMode.skipsAllChecksMode,
+            });
+          } else if (pendingSkipAllChecks?.kind === 'preset') {
+            state.updateSettings({ field: 'preset', presetId: pendingSkipAllChecks.presetId });
+          }
+          setPendingSkipAllChecks(null);
+        }}
+      />
+
+      <ConfirmDialog
+        open={pendingRuleRemoval !== null}
+        title="Remove this rule?"
+        body={pendingRuleRemoval ? describePermissionRuleRemoval(pendingRuleRemoval) : ''}
+        confirmLabel="Remove"
+        destructive
+        onCancel={() => setPendingRuleRemoval(null)}
+        onConfirm={() => {
+          if (pendingRuleRemoval) {
+            state.updateSettings({
+              field: 'removePermissionRule',
+              scope: pendingRuleRemoval.scope,
+              kind: pendingRuleRemoval.kind,
+              pattern: pendingRuleRemoval.pattern,
+            });
+          }
+          setPendingRuleRemoval(null);
+        }}
+      />
+
+      <ConfirmDialog
+        open={pendingPluginAction !== null}
+        title={pendingPluginAction?.kind === 'uninstall' ? 'Uninstall this plugin?' : 'Install this plugin?'}
+        body={pendingPluginAction ? describePluginAction(pendingPluginAction) : ''}
+        confirmLabel={pendingPluginAction?.kind === 'uninstall' ? 'Uninstall' : 'Install'}
+        destructive
+        onCancel={() => setPendingPluginAction(null)}
+        onConfirm={confirmPluginAction}
+      />
+
+      <ConfirmDialog
+        open={pendingProviderDelete !== null}
+        title={pendingProviderDelete ? `Delete profile "${pendingProviderDelete}"?` : ''}
+        body="This removes the profile and its stored key. This cannot be undone."
+        confirmLabel="Delete"
+        destructive
+        onCancel={() => setPendingProviderDelete(null)}
+        onConfirm={() => {
+          if (pendingProviderDelete) {
+            state.updateSettings({ field: 'deleteProviderProfile', profileName: pendingProviderDelete });
+          }
+          setPendingProviderDelete(null);
+        }}
+      />
+    </>
+  );
+}
+
+/** Splits `<name>@<marketplace>` for the confirmation copy; a bare name shows with no source. */
+function describePluginAction(action: TPendingPluginAction): string {
+  if (action.kind === 'uninstall') {
+    return `"${action.plugin.name}" will be removed from this computer.`;
+  }
+  const at = action.pluginId.lastIndexOf('@');
+  const name = at === -1 ? action.pluginId : action.pluginId.slice(0, at);
+  const source = at === -1 ? undefined : action.pluginId.slice(at + 1);
+  return `Install "${name}"${source ? ` from ${source}` : ''}. It can run code on this computer.`;
+}

package/src/components/StatusControls.tsx

@@ -0,0 +1,294 @@
+'use client';
+
+import { Gauge, Shield, Sparkles } from 'lucide-react';
+import { useRef, useState } from 'react';
+
+import { ConfirmDialog } from './Dialog.js';
+import { PopupMenu } from './PopupMenu.js';
+
+import type { IPopupMenuItem, IPopupMenuSection } from './PopupMenu.js';
+import type { TCommandCatalog, TModelListSnapshot, TSessionStatus } from '../hooks/session-client-types.js';
+
+/**
+ * #3282 §2 (part 2) — the plain label for each effort selection. Kept in step with
+ * `EFFORT_LEVEL_LABELS` in `packages/agent-framework/src/effort/effort-resolution.ts` (which
+ * `agent-command`'s `/effort` re-exports and reports as its own outcome text) — this package cannot
+ * import that one directly (it is a Node-side package this browser bundle does not depend on), so the
+ * values are restated here. `Record<TSessionStatus['effort'], …>` still keeps this exhaustive against
+ * the real wire type: an effort value added there without a label here is a compile error.
+ */
+const EFFORT_LEVEL_LABELS: Readonly<Record<TSessionStatus['effort'], string>> = {
+  auto: 'Auto',
+  none: 'None',
+  minimal: 'Minimal',
+  low: 'Low',
+  medium: 'Medium',
+  high: 'High',
+  xhigh: 'Extra high',
+  max: 'Maximum',
+};
+
+/** The primary row (#3282 §2 design point 4); the rest sit under "More". */
+const EFFORT_PRIMARY: readonly TSessionStatus['effort'][] = ['auto', 'low', 'medium', 'high'];
+const EFFORT_MORE: readonly TSessionStatus['effort'][] = ['none', 'minimal', 'xhigh', 'max'];
+
+/** The `mode` command's subcommand entries (plain label + description per mode), from the catalog. */
+function modeSubcommands(
+  catalog: TCommandCatalog | null,
+): readonly { name: string; displayName?: string; description: string }[] {
+  return catalog?.commands.find((command) => command.name === 'mode')?.subcommands ?? [];
+}
+
+/** The current mode's plain label, falling back to the raw id before the catalog has loaded. */
+function modeLabel(catalog: TCommandCatalog | null, mode: string): string {
+  return modeSubcommands(catalog).find((sub) => sub.name === mode)?.displayName ?? mode;
+}
+
+const CHIP_CLASS =
+  'flex min-w-0 items-center gap-1.5 rounded-lg px-2 py-1 text-[13px] text-muted-foreground hover:bg-hover hover:text-foreground disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:bg-transparent';
+const CHIP_WARNING_CLASS = 'text-warning hover:text-warning';
+
+/** One status chip that opens a `PopupMenu` HIG pop-up beneath it (#3282 §2). */
+function StatusChip({
+  chipLabel,
+  value,
+  icon,
+  connected,
+  warning = false,
+  menuLabel,
+  sections,
+  onOpen,
+}: {
+  chipLabel: string;
+  value: string;
+  icon: React.ReactElement;
+  connected: boolean;
+  warning?: boolean;
+  menuLabel: string;
+  sections: readonly IPopupMenuSection[];
+  /** Called just before the menu opens — e.g. to (re)fetch the model list. */
+  onOpen?: () => void;
+}): React.ReactElement {
+  const [open, setOpen] = useState(false);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  return (
+    <span className="relative">
+      <button
+        ref={triggerRef}
+        type="button"
+        aria-label={`${chipLabel}: ${value}`}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        // #3289 §2: below `md` the value text is hidden (icon-only) — the tooltip is where it stays
+        // reachable on hover and keyboard focus, so it always carries the value, not just "Change X".
+        title={connected ? `${chipLabel}: ${value}` : 'Reconnecting…'}
+        disabled={!connected}
+        onClick={() => {
+          onOpen?.();
+          setOpen(true);
+        }}
+        className={`${CHIP_CLASS} ${warning ? CHIP_WARNING_CLASS : ''}`}
+      >
+        {icon}
+        {/* #3289 §2: below `md` (the same breakpoint the session-list sheet uses) the chip collapses
+            to its icon alone — never a truncated fragment ("d…", "claude-…") — the value stays
+            reachable via the tooltip above and the accessible name either way. */}
+        <span className="hidden truncate md:inline">{value}</span>
+      </button>
+      {open ? (
+        <PopupMenu
+          label={menuLabel}
+          sections={sections}
+          triggerRef={triggerRef}
+          onClose={() => setOpen(false)}
+        />
+      ) : null}
+    </span>
+  );
+}
+
+const ICON_PROPS = { size: 14, strokeWidth: 1.75, 'aria-hidden': true } as const;
+
+/**
+ * Model · mode · effort, each a pop-up menu (#3282 §2), and the context the conversation fills.
+ * Every menu applies its choice through the same command wire path the equivalent typed slash
+ * command uses — `onSilentCommand` — so `/model <id>`, `/mode <name>` and `/effort <value>` and a
+ * click in these menus can never drift apart; the control's own chip label (fed by the session's next
+ * `session_status`) confirms the change instead of a conversation card.
+ */
+export function StatusRow({
+  status,
+  catalog,
+  modelList,
+  onRequestModelList,
+  onManageProviders,
+  onSilentCommand,
+  connected,
+}: {
+  status: TSessionStatus | null;
+  catalog: TCommandCatalog | null;
+  modelList: TModelListSnapshot | null;
+  onRequestModelList: () => void;
+  /** #3282 §4b: "Manage providers…" opens Settings at the Providers & Models section. */
+  onManageProviders: () => void;
+  /** Applies a model/mode/effort choice without a conversation card (see the module doc). */
+  onSilentCommand: (name: string, args?: string) => void;
+  connected: boolean;
+}): React.ReactElement {
+  const used = status ? Math.round(status.context.usedPercentage) : null;
+  // #3282 §2: "Skip all checks" asks for confirmation on the shared `ConfirmDialog` (#3331) before
+  // applying — every other mode applies at once. `true` while that confirmation is open.
+  const [pendingBypassConfirm, setPendingBypassConfirm] = useState(false);
+
+  const modelSections: IPopupMenuSection[] = [
+    ...(modelList?.groups ?? []).map((group) => ({
+      heading: group.providerLabel,
+      items: group.models.map(
+        (model): IPopupMenuItem => ({
+          key: model.id,
+          label: model.label,
+          checked: model.id === modelList?.currentModel && group.profileName === modelList?.currentProfile,
+          onSelect: () => onSilentCommand('model', model.id),
+        }),
+      ),
+    })),
+    {
+      items: [
+        {
+          key: 'manage-providers',
+          label: 'Manage providers…',
+          kind: 'action',
+          // #3282 §4b: opens Settings at the "Providers & Models" section — the same list, Use/Model/
+          // Edit/Test/Duplicate/Delete actions and "Add provider…" flow now live there instead of in
+          // this menu's own server-driven picker.
+          onSelect: onManageProviders,
+        },
+      ],
+    },
+  ];
+
+  const modeSections: IPopupMenuSection[] = [
+    {
+      items: modeSubcommands(catalog).map(
+        (sub): IPopupMenuItem => ({
+          key: sub.name,
+          label: sub.displayName ?? sub.name,
+          description: sub.description,
+          checked: sub.name === status?.permissionMode,
+          // #3282 §2: every mode but "Skip all checks" applies at once; that one opens a
+          // confirmation first (rendered below) instead of applying here directly.
+          onSelect:
+            sub.name === 'bypassPermissions'
+              ? () => setPendingBypassConfirm(true)
+              : () => onSilentCommand('mode', sub.name),
+        }),
+      ),
+    },
+  ];
+
+  const effortSections: IPopupMenuSection[] = [
+    {
+      items: EFFORT_PRIMARY.map(
+        (value): IPopupMenuItem => ({
+          key: value,
+          label: EFFORT_LEVEL_LABELS[value],
+          checked: value === status?.effort,
+          onSelect: () => onSilentCommand('effort', value),
+        }),
+      ),
+    },
+    {
+      heading: 'More',
+      items: EFFORT_MORE.map(
+        (value): IPopupMenuItem => ({
+          key: value,
+          label: EFFORT_LEVEL_LABELS[value],
+          checked: value === status?.effort,
+          onSelect: () => onSilentCommand('effort', value),
+        }),
+      ),
+    },
+  ];
+
+  return (
+    <div className="flex min-w-0 flex-1 items-center gap-0.5">
+      {status ? (
+        <>
+          <StatusChip
+            chipLabel="mode"
+            value={modeLabel(catalog, status.permissionMode)}
+            icon={<Shield {...ICON_PROPS} />}
+            connected={connected}
+            warning={status.permissionMode === 'bypassPermissions'}
+            menuLabel="Mode"
+            sections={modeSections}
+          />
+          <span className="ml-auto" />
+          <StatusChip
+            chipLabel="model"
+            value={status.model}
+            icon={<Sparkles {...ICON_PROPS} />}
+            connected={connected}
+            menuLabel="Model"
+            sections={modelSections}
+            onOpen={onRequestModelList}
+          />
+          <StatusChip
+            chipLabel="effort"
+            value={EFFORT_LEVEL_LABELS[status.effort]}
+            icon={<Gauge {...ICON_PROPS} />}
+            connected={connected}
+            menuLabel="Effort"
+            sections={effortSections}
+          />
+        </>
+      ) : (
+        <span className="ml-auto px-2 text-[13px] text-subtle">…</span>
+      )}
+      <span
+        className="flex items-center gap-1.5 px-1.5 text-[12.5px] tabular-nums text-subtle"
+        title="Context used"
+        aria-label={`context ${used ?? 0}% used`}
+      >
+        <ContextRing percent={used ?? 0} />
+        {used === null ? '' : `${used}%`}
+      </span>
+      {/* #3282 §2: matches the wording the Settings screen's own permission-mode picker already
+          ships for the identical action (#3331's `SettingsScreen.tsx`), so switching to "Skip all
+          checks" reads the same warning regardless of which control was used. */}
+      <ConfirmDialog
+        open={pendingBypassConfirm}
+        title="Skip all permission checks?"
+        body="Every action runs without asking first — file edits, shell commands and network access included. You can turn this back on at any time."
+        confirmLabel="Skip all checks"
+        destructive
+        onCancel={() => setPendingBypassConfirm(false)}
+        onConfirm={() => {
+          setPendingBypassConfirm(false);
+          onSilentCommand('mode', 'bypassPermissions');
+        }}
+      />
+    </div>
+  );
+}
+
+function ContextRing({ percent }: { percent: number }): React.ReactElement {
+  const r = 5;
+  const circumference = 2 * Math.PI * r;
+  const filled = Math.min(100, Math.max(0, percent)) / 100;
+  const tone = percent >= 80 ? 'stroke-warning' : 'stroke-muted-foreground';
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true">
+      <circle cx="7" cy="7" r={r} className="fill-none stroke-raised" strokeWidth="2" />
+      <circle
+        cx="7"
+        cy="7"
+        r={r}
+        className={`fill-none ${tone}`}
+        strokeWidth="2"
+        strokeDasharray={`${circumference * filled} ${circumference}`}
+        transform="rotate(-90 7 7)"
+      />
+    </svg>
+  );
+}