@selesai/code 0.10.2 → 0.12.0

package/dist/extensions/pi-web-agent/src/commands/web-agent-config.ts

@@ -1,946 +1,946 @@
-import {
-  DEFAULT_BACKEND_CONFIG,
-  mergeBackendConfigLayers,
-  validateBackendConfig,
-  type BackendConfig,
-  type BackendConfigOverride
-} from '../backends/config.js';
-import { checkBackendHealth } from '../backends/doctor.js';
-import {
-  DynamicBorder,
-  getSettingsListTheme,
-  type ExtensionAPI
-} from '@selesai/code';
-import { Container, SelectList, SettingsList, Text, type SelectItem, type SettingItem } from '@earendil-works/pi-tui';
-import {
-  DEFAULT_PRESENTATION_CONFIG,
-  mergePresentationConfigLayers,
-  resolvePresentationMode
-} from '../presentation/config.js';
-import {
-  loadPresentationConfigLayers,
-  resetPresentationConfigScope,
-  saveBackendConfigScope,
-  savePresentationConfigScope,
-  type LoadedPresentationConfig
-} from '../presentation/config-store.js';
-import { resolveBrowserExecutable, type BrowserResolutionResult } from '../fetch/browser-resolution.js';
-import { getLatestChangelogEntry } from '../changelog-notice.js';
-import type {
-  PresentationConfig,
-  PresentationConfigOverride,
-  PresentationScope,
-  PresentationToolName
-} from '../presentation/types.js';
-
-type CommandDeps = {
-  load?: () => ReturnType<typeof loadPresentationConfigLayers>;
-  save?: (scope: PresentationScope, config: PresentationConfigOverride) => Promise<void>;
-  saveBackends?: (scope: PresentationScope, config: BackendConfigOverride) => Promise<void>;
-  reset?: (scope: PresentationScope) => Promise<void>;
-  resolveBrowser?: () => Promise<BrowserResolutionResult>;
-  runtime?: { nodeVersion: string; platform: string; arch: string };
-  checkTypebox?: () => Promise<boolean>;
-  checkBackends?: (config: BackendConfig) => Promise<string[]>;
-  getChangelog?: () => Promise<string | undefined>;
-};
-
-type SettingsUiResult =
-  | { action: 'cancel' }
-  | { action: 'reset'; scope: PresentationScope }
-  | { action: 'save'; scope: PresentationScope; config: PresentationConfig; backends: BackendConfig };
-
-type WebAgentAction = 'settings' | 'show' | 'doctor' | 'changelog' | 'reset-project' | 'reset-global';
-type SettingsSection = 'presentation' | 'backends';
-
-export type SettingsDraftState = {
-  scope: PresentationScope;
-  drafts: Record<PresentationScope, PresentationConfig>;
-  backendDrafts: Record<PresentationScope, BackendConfig>;
-  config: PresentationConfig;
-  backends: BackendConfig;
-};
-
-const PRESENTATION_TOOL_NAMES: PresentationToolName[] = ['web_explore'];
-
-function parseScopeToken(token: string | undefined): PresentationScope | undefined {
-  return token === 'global' || token === 'project' ? token : undefined;
-}
-
-function clonePresentationConfig(config: PresentationConfig): PresentationConfig {
-  return {
-    defaultMode: config.defaultMode,
-    tools: { ...config.tools }
-  };
-}
-
-function cloneBackendConfig(config: BackendConfig): BackendConfig {
-  return {
-    search: {
-      ...config.search,
-      options: config.search.options ? { ...config.search.options } : undefined
-    },
-    fetch: {
-      ...config.fetch,
-      options: config.fetch.options ? { ...config.fetch.options } : undefined
-    },
-    headless: { ...config.headless }
-  };
-}
-
-function sameJson(left: unknown, right: unknown): boolean {
-  return JSON.stringify(left) === JSON.stringify(right);
-}
-
-export function validateBackendUrl(value: string): { ok: true; value: string } | { ok: false; message: string } {
-  try {
-    const url = new URL(value.trim());
-    if (url.protocol !== 'http:' && url.protocol !== 'https:') {
-      return { ok: false, message: 'Invalid URL. Include http:// or https://.' };
-    }
-
-    return { ok: true, value: url.toString().replace(/\/$/, '') };
-  } catch {
-    return { ok: false, message: 'Invalid URL. Include http:// or https://.' };
-  }
-}
-
-async function defaultCheckTypebox(): Promise<boolean> {
-  try {
-    await import('typebox');
-    return true;
-  } catch {
-    return false;
-  }
-}
-
-function formatSearchOptions(config: BackendConfig['search']) {
-  return [
-    config.fallback ? `fallback ${config.fallback}` : undefined,
-    config.options?.categories?.length ? `categories ${config.options.categories.join(',')}` : undefined,
-    config.options?.language ? `language ${config.options.language}` : undefined,
-    config.options?.safesearch !== undefined ? `safesearch ${config.options.safesearch}` : undefined
-  ].filter(Boolean).join(' ');
-}
-
-function formatFetchOptions(config: BackendConfig['fetch']) {
-  return [
-    config.fallback ? `fallback ${config.fallback}` : undefined,
-    config.options?.formats?.length ? `formats ${config.options.formats.join(',')}` : undefined,
-    config.options?.onlyMainContent !== undefined ? `onlyMainContent ${config.options.onlyMainContent}` : undefined
-  ].filter(Boolean).join(' ');
-}
-
-function formatBackendSummary(config: BackendConfig = DEFAULT_BACKEND_CONFIG) {
-  const searchSuffix = formatSearchOptions(config.search);
-  const fetchSuffix = formatFetchOptions(config.fetch);
-  const searchBase = config.search.baseUrl
-    ? `search: ${config.search.provider} (${config.search.baseUrl})`
-    : `search: ${config.search.provider}`;
-  const fetchBase = config.fetch.baseUrl
-    ? `fetch: ${config.fetch.provider} (${config.fetch.baseUrl})`
-    : `fetch: ${config.fetch.provider}`;
-
-  return [
-    searchSuffix ? `${searchBase} ${searchSuffix}` : searchBase,
-    fetchSuffix ? `${fetchBase} ${fetchSuffix}` : fetchBase,
-    `headless: ${config.headless.provider}`
-  ].join('\n');
-}
-
-function formatConfigSummary(config: PresentationConfig) {
-  const lines = [`defaultMode: ${config.defaultMode}`];
-
-  for (const toolName of PRESENTATION_TOOL_NAMES) {
-    lines.push(`${toolName}: ${config.tools[toolName]?.mode ?? 'inherit'}`);
-  }
-
-  return lines.join('\n');
-}
-
-function buildPresentationSettingsItems(scope: PresentationScope, config: PresentationConfig): SettingItem[] {
-  return [
-    {
-      id: 'scope',
-      label: 'Write scope',
-      currentValue: scope,
-      values: ['project', 'global']
-    },
-    {
-      id: 'defaultMode',
-      label: 'Default mode',
-      currentValue: config.defaultMode,
-      values: ['compact', 'preview', 'verbose']
-    },
-    ...PRESENTATION_TOOL_NAMES.map((toolName) => ({
-      id: `tool:${toolName}`,
-      label: toolName,
-      currentValue: config.tools[toolName]?.mode ?? 'inherit',
-      values: ['inherit', 'compact', 'preview', 'verbose']
-    }))
-  ];
-}
-
-function buildBackendSettingsItems(scope: PresentationScope, backends: BackendConfig): SettingItem[] {
-  return [
-    {
-      id: 'scope',
-      label: 'Write scope',
-      currentValue: scope,
-      values: ['project', 'global']
-    },
-    {
-      id: 'backend:search:provider',
-      label: 'Search backend',
-      currentValue: backends.search.provider,
-      values: ['duckduckgo', 'searxng', 'brave']
-    },
-    {
-      id: 'backend:search:baseUrl',
-      label: 'SearXNG URL',
-      currentValue: backends.search.baseUrl ?? 'not set',
-      values: ['edit']
-    },
-    {
-      id: 'backend:search:fallback',
-      label: 'Search fallback',
-      currentValue: backends.search.provider === 'searxng' || backends.search.provider === 'brave' ? backends.search.fallback ?? 'off' : 'off',
-      values: backends.search.provider === 'searxng' || backends.search.provider === 'brave' ? ['off', 'duckduckgo'] : ['off']
-    },
-    {
-      id: 'backend:secret:brave',
-      label: 'Brave API key',
-      currentValue: 'env var',
-      values: ['env var']
-    },
-    {
-      id: 'backend:fetch:provider',
-      label: 'Fetch backend',
-      currentValue: backends.fetch.provider,
-      values: ['http', 'firecrawl']
-    },
-    {
-      id: 'backend:fetch:baseUrl',
-      label: 'Firecrawl URL',
-      currentValue: backends.fetch.baseUrl ?? 'not set',
-      values: ['edit']
-    },
-    {
-      id: 'backend:fetch:fallback',
-      label: 'Firecrawl fallback',
-      currentValue: backends.fetch.provider === 'firecrawl' ? backends.fetch.fallback ?? 'off' : 'off',
-      values: backends.fetch.provider === 'firecrawl' ? ['off', 'http'] : ['off']
-    },
-    {
-      id: 'backend:secret:firecrawl',
-      label: 'Firecrawl API key',
-      currentValue: 'env var',
-      values: ['env var']
-    }
-  ];
-}
-
-function isToolName(value: string): value is PresentationToolName {
-  return PRESENTATION_TOOL_NAMES.includes(value as PresentationToolName);
-}
-
-function isModeOrInherit(value: string): value is 'inherit' | 'compact' | 'preview' | 'verbose' {
-  return ['inherit', 'compact', 'preview', 'verbose'].includes(value);
-}
-
-export function getInheritedConfigForScope(
-  loaded: Awaited<LoadedPresentationConfig>,
-  scope: PresentationScope
-): PresentationConfig {
-  if (scope === 'global') {
-    return DEFAULT_PRESENTATION_CONFIG;
-  }
-
-  return mergePresentationConfigLayers(DEFAULT_PRESENTATION_CONFIG, loaded.global.rawConfig);
-}
-
-export function getScopeDisplayConfig(
-  loaded: Awaited<LoadedPresentationConfig>,
-  scope: PresentationScope
-): PresentationConfig {
-  if (scope === 'global') {
-    return mergePresentationConfigLayers(DEFAULT_PRESENTATION_CONFIG, loaded.global.rawConfig);
-  }
-
-  return mergePresentationConfigLayers(
-    DEFAULT_PRESENTATION_CONFIG,
-    loaded.global.rawConfig,
-    loaded.project.rawConfig
-  );
-}
-
-export function getInheritedBackendsForScope(
-  loaded: Awaited<LoadedPresentationConfig>,
-  scope: PresentationScope
-): BackendConfig {
-  if (scope === 'global') {
-    return DEFAULT_BACKEND_CONFIG;
-  }
-
-  return mergeBackendConfigLayers(DEFAULT_BACKEND_CONFIG, loaded.global.rawBackends);
-}
-
-export function getScopeDisplayBackends(
-  loaded: Awaited<LoadedPresentationConfig>,
-  scope: PresentationScope
-): BackendConfig {
-  if (scope === 'global') {
-    return mergeBackendConfigLayers(DEFAULT_BACKEND_CONFIG, loaded.global.rawBackends);
-  }
-
-  return mergeBackendConfigLayers(
-    DEFAULT_BACKEND_CONFIG,
-    loaded.global.rawBackends,
-    loaded.project.rawBackends
-  );
-}
-
-export function createSettingsDraftState(
-  loaded: Awaited<LoadedPresentationConfig>,
-  initialScope: PresentationScope
-): SettingsDraftState {
-  const drafts = {
-    global: getScopeDisplayConfig(loaded, 'global'),
-    project: getScopeDisplayConfig(loaded, 'project')
-  };
-  const backendDrafts = {
-    global: getScopeDisplayBackends(loaded, 'global'),
-    project: getScopeDisplayBackends(loaded, 'project')
-  };
-
-  return {
-    scope: initialScope,
-    drafts,
-    backendDrafts,
-    config: clonePresentationConfig(drafts[initialScope]),
-    backends: cloneBackendConfig(backendDrafts[initialScope])
-  };
-}
-
-export function applySettingsValue(
-  state: SettingsDraftState,
-  id: string,
-  newValue: string
-): SettingsDraftState {
-  const nextDrafts = {
-    global: clonePresentationConfig(state.drafts.global),
-    project: clonePresentationConfig(state.drafts.project)
-  };
-  const nextBackendDrafts = {
-    global: cloneBackendConfig(state.backendDrafts.global),
-    project: cloneBackendConfig(state.backendDrafts.project)
-  };
-
-  let nextScope = state.scope;
-
-  if (id === 'scope' && (newValue === 'project' || newValue === 'global')) {
-    nextScope = newValue;
-    return {
-      scope: nextScope,
-      drafts: nextDrafts,
-      backendDrafts: nextBackendDrafts,
-      config: clonePresentationConfig(nextDrafts[nextScope]),
-      backends: cloneBackendConfig(nextBackendDrafts[nextScope])
-    };
-  }
-
-  const currentDraft = clonePresentationConfig(nextDrafts[nextScope]);
-  const currentBackends = cloneBackendConfig(nextBackendDrafts[nextScope]);
-
-  if (id === 'defaultMode' && (newValue === 'compact' || newValue === 'preview' || newValue === 'verbose')) {
-    currentDraft.defaultMode = newValue;
-  }
-
-  if (id.startsWith('tool:')) {
-    const toolName = id.slice('tool:'.length) as PresentationToolName;
-    const nextTools = { ...currentDraft.tools };
-
-    if (newValue === 'inherit') {
-      delete nextTools[toolName];
-    } else if (
-      newValue === 'compact' ||
-      newValue === 'preview' ||
-      newValue === 'verbose'
-    ) {
-      nextTools[toolName] = { mode: newValue };
-    }
-
-    currentDraft.tools = nextTools;
-  }
-
-  if (id === 'backend:search:provider' && (newValue === 'duckduckgo' || newValue === 'searxng' || newValue === 'brave')) {
-    currentBackends.search.provider = newValue;
-    if (newValue !== 'searxng') {
-      delete currentBackends.search.baseUrl;
-      delete currentBackends.search.options;
-    }
-    if (newValue === 'duckduckgo') {
-      delete currentBackends.search.fallback;
-    }
-  }
-
-  if (id === 'backend:search:fallback') {
-    if (newValue === 'duckduckgo' && (currentBackends.search.provider === 'searxng' || currentBackends.search.provider === 'brave')) {
-      currentBackends.search.fallback = 'duckduckgo';
-    } else {
-      delete currentBackends.search.fallback;
-    }
-  }
-
-  if (id === 'backend:search:baseUrl') {
-    if (currentBackends.search.provider === 'searxng' && newValue.trim()) {
-      currentBackends.search.baseUrl = newValue.trim();
-    } else {
-      delete currentBackends.search.baseUrl;
-    }
-  }
-
-  if (id === 'backend:fetch:provider' && (newValue === 'http' || newValue === 'firecrawl')) {
-    currentBackends.fetch.provider = newValue;
-    if (newValue === 'http') {
-      delete currentBackends.fetch.fallback;
-    }
-  }
-
-  if (id === 'backend:fetch:fallback') {
-    if (newValue === 'http' && currentBackends.fetch.provider === 'firecrawl') {
-      currentBackends.fetch.fallback = 'http';
-    } else if (newValue === 'off' || currentBackends.fetch.provider !== 'firecrawl') {
-      delete currentBackends.fetch.fallback;
-    }
-  }
-
-  if (id === 'backend:fetch:baseUrl') {
-    if (newValue.trim()) {
-      currentBackends.fetch.baseUrl = newValue.trim();
-    } else {
-      delete currentBackends.fetch.baseUrl;
-    }
-  }
-
-  nextDrafts[nextScope] = currentDraft;
-  nextBackendDrafts[nextScope] = currentBackends;
-
-  return {
-    scope: nextScope,
-    drafts: nextDrafts,
-    backendDrafts: nextBackendDrafts,
-    config: clonePresentationConfig(nextDrafts[nextScope]),
-    backends: cloneBackendConfig(nextBackendDrafts[nextScope])
-  };
-}
-
-export function collapsePresentationConfigToOverride(
-  config: PresentationConfig,
-  inheritedConfig: PresentationConfig
-): PresentationConfigOverride {
-  const tools = Object.fromEntries(
-    PRESENTATION_TOOL_NAMES.flatMap((toolName) => {
-      const configuredMode = config.tools[toolName]?.mode;
-      if (!configuredMode) {
-        return [];
-      }
-
-      const inheritedMode = resolvePresentationMode(toolName, inheritedConfig);
-      if (configuredMode === inheritedMode) {
-        return [];
-      }
-
-      return [[toolName, { mode: configuredMode }]];
-    })
-  ) as PresentationConfigOverride['tools'];
-
-  return {
-    defaultMode:
-      config.defaultMode === inheritedConfig.defaultMode ? undefined : config.defaultMode,
-    tools
-  };
-}
-
-export function collapseBackendConfigToOverride(
-  config: BackendConfig,
-  inheritedConfig: BackendConfig
-): BackendConfigOverride {
-  const override: BackendConfigOverride = {};
-
-  if (!sameJson(config.search, inheritedConfig.search)) {
-    override.search = config.search.provider !== inheritedConfig.search.provider
-      ? { ...config.search }
-      : {
-          ...(config.search.baseUrl !== inheritedConfig.search.baseUrl ? { baseUrl: config.search.baseUrl } : {}),
-          ...(config.search.fallback !== inheritedConfig.search.fallback ? { fallback: config.search.fallback } : {}),
-          ...(!sameJson(config.search.options, inheritedConfig.search.options) ? { options: config.search.options } : {})
-        };
-
-    if (config.search.provider !== inheritedConfig.search.provider) {
-      override.search.provider = config.search.provider;
-    } else if (Object.keys(override.search).length === 0) {
-      delete override.search;
-    }
-  }
-
-  if (!sameJson(config.fetch, inheritedConfig.fetch)) {
-    override.fetch = config.fetch.provider !== inheritedConfig.fetch.provider
-      ? { ...config.fetch, apiKey: undefined }
-      : {
-          ...(config.fetch.baseUrl !== inheritedConfig.fetch.baseUrl ? { baseUrl: config.fetch.baseUrl } : {}),
-          ...(config.fetch.fallback !== inheritedConfig.fetch.fallback ? { fallback: config.fetch.fallback } : {}),
-          ...(!sameJson(config.fetch.options, inheritedConfig.fetch.options) ? { options: config.fetch.options } : {})
-        };
-
-    delete override.fetch.apiKey;
-
-    if (config.fetch.provider !== inheritedConfig.fetch.provider) {
-      override.fetch.provider = config.fetch.provider;
-    } else if (Object.keys(override.fetch).length === 0) {
-      delete override.fetch;
-    }
-  }
-
-  if (!sameJson(config.headless, inheritedConfig.headless)) {
-    override.headless = { ...config.headless };
-  }
-
-  return override;
-}
-
-export function handleSettingsShortcut(data: string): { action: 'cancel' | 'reset' | 'save' } | undefined {
-  if (data === '\u001b') {
-    return { action: 'cancel' };
-  }
-
-  if (data === '\u0012') {
-    return { action: 'reset' };
-  }
-
-  if (data === '\u0013') {
-    return { action: 'save' };
-  }
-
-  return undefined;
-}
-
-async function openActionMenu(ctx: any): Promise<WebAgentAction | undefined> {
-  return ctx.ui.custom((tui: any, theme: any, _kb: unknown, done: (value: WebAgentAction | undefined) => void) => {
-    const container = new Container();
-    const items: SelectItem[] = [
-      { value: 'settings', label: 'Settings', description: 'Edit presentation modes and backends' },
-      { value: 'show', label: 'Show config', description: 'Print effective config paths and modes' },
-      { value: 'doctor', label: 'Doctor', description: 'Check runtime dependencies and browser detection' },
-      { value: 'changelog', label: 'Changelog', description: 'Show latest package changelog' },
-      { value: 'reset-project', label: 'Reset project config', description: 'Delete project-level overrides' },
-      { value: 'reset-global', label: 'Reset global config', description: 'Delete global overrides' }
-    ];
-
-    container.addChild(new DynamicBorder((text: string) => theme.fg('accent', text)));
-    container.addChild(new Text(theme.fg('accent', theme.bold('pi-web-agent')), 1, 0));
-
-    const list = new SelectList(items, Math.min(items.length, 8), {
-      selectedPrefix: (text: string) => theme.fg('accent', text),
-      selectedText: (text: string) => theme.fg('accent', text),
-      description: (text: string) => theme.fg('muted', text),
-      scrollInfo: (text: string) => theme.fg('dim', text),
-      noMatch: (text: string) => theme.fg('warning', text)
-    });
-
-    list.onSelect = (item) => done(item.value as WebAgentAction);
-    list.onCancel = () => done(undefined);
-    container.addChild(list);
-    container.addChild(new Text(theme.fg('dim', '↑↓ navigate • enter select • esc cancel'), 1, 0));
-    container.addChild(new DynamicBorder((text: string) => theme.fg('accent', text)));
-
-    return {
-      render: (width: number) => container.render(width),
-      invalidate: () => container.invalidate(),
-      handleInput: (data: string) => {
-        list.handleInput?.(data);
-        tui.requestRender?.();
-      }
-    };
-  });
-}
-
-async function openSettingsSectionMenu(ctx: any): Promise<SettingsSection | undefined> {
-  return ctx.ui.custom((tui: any, theme: any, _kb: unknown, done: (value: SettingsSection | undefined) => void) => {
-    const container = new Container();
-    const items: SelectItem[] = [
-      { value: 'presentation', label: 'Presentation', description: 'Compact, preview, and verbose output modes' },
-      { value: 'backends', label: 'Backends', description: 'Search/fetch providers, URLs, and fallbacks' }
-    ];
-
-    container.addChild(new DynamicBorder((text: string) => theme.fg('accent', text)));
-    container.addChild(new Text(theme.fg('accent', theme.bold('pi-web-agent settings')), 1, 0));
-
-    const list = new SelectList(items, items.length, {
-      selectedPrefix: (text: string) => theme.fg('accent', text),
-      selectedText: (text: string) => theme.fg('accent', text),
-      description: (text: string) => theme.fg('muted', text),
-      scrollInfo: (text: string) => theme.fg('dim', text),
-      noMatch: (text: string) => theme.fg('warning', text)
-    });
-
-    list.onSelect = (item) => done(item.value as SettingsSection);
-    list.onCancel = () => done(undefined);
-    container.addChild(list);
-    container.addChild(new Text(theme.fg('dim', '↑↓ navigate • enter select • esc cancel'), 1, 0));
-    container.addChild(new DynamicBorder((text: string) => theme.fg('accent', text)));
-
-    return {
-      render: (width: number) => container.render(width),
-      invalidate: () => container.invalidate(),
-      handleInput: (data: string) => {
-        list.handleInput?.(data);
-        tui.requestRender?.();
-      }
-    };
-  });
-}
-
-async function openPresentationSettingsUi(
-  ctx: any,
-  loaded: Awaited<LoadedPresentationConfig>,
-  initialScope: PresentationScope
-): Promise<SettingsUiResult | undefined> {
-  return ctx.ui.custom((_tui: unknown, theme: any, _kb: unknown, done: (value: SettingsUiResult) => void) => {
-    let state = createSettingsDraftState(loaded, initialScope);
-    let settingsList: SettingsList;
-
-    const container = new Container();
-    container.addChild(new Text(theme.fg('accent', theme.bold('pi-web-agent · presentation')), 1, 1));
-    container.addChild(
-      new Text(
-        theme.fg('muted', 'Ctrl+S save · Ctrl+R reset scope · Esc cancel'),
-        1,
-        2
-      )
-    );
-
-    const rebuildSettingsList = () => {
-      if (settingsList) {
-        container.removeChild(settingsList);
-      }
-
-      settingsList = new SettingsList(
-        buildPresentationSettingsItems(state.scope, state.config),
-        Math.min(PRESENTATION_TOOL_NAMES.length + 8, 18),
-        getSettingsListTheme(),
-        (id, newValue) => {
-          state = applySettingsValue(state, id, newValue);
-          rebuildSettingsList();
-          container.invalidate();
-        },
-        () => done({ action: 'save', scope: state.scope, config: state.config, backends: state.backends }),
-        { enableSearch: true }
-      );
-
-      container.addChild(settingsList);
-    };
-
-    rebuildSettingsList();
-
-    return {
-      render: (width: number) => container.render(width),
-      invalidate: () => container.invalidate(),
-      handleInput: (data: string) => {
-        const shortcut = handleSettingsShortcut(JSON.stringify(data).slice(1, -1));
-
-        if (shortcut?.action === 'cancel') {
-          done({ action: 'cancel' });
-          return;
-        }
-
-        if (shortcut?.action === 'reset') {
-          done({ action: 'reset', scope: state.scope });
-          return;
-        }
-
-        if (shortcut?.action === 'save') {
-          done({ action: 'save', scope: state.scope, config: state.config, backends: state.backends });
-          return;
-        }
-
-        settingsList.handleInput?.(data);
-      }
-    };
-  });
-}
-
-async function openBackendSettingsUi(
-  ctx: any,
-  loaded: Awaited<LoadedPresentationConfig>,
-  initialScope: PresentationScope
-): Promise<SettingsUiResult | undefined> {
-  return ctx.ui.custom((tui: any, theme: any, _kb: unknown, done: (value: SettingsUiResult) => void) => {
-    let state = createSettingsDraftState(loaded, initialScope);
-    let settingsList: SettingsList;
-
-    const container = new Container();
-    container.addChild(new Text(theme.fg('accent', theme.bold('pi-web-agent · backends')), 1, 1));
-    container.addChild(
-      new Text(
-        theme.fg('muted', 'Ctrl+S save · Ctrl+R reset scope · Esc cancel · API keys stay in env vars'),
-        1,
-        2
-      )
-    );
-
-    const editUrl = async (id: string) => {
-      const isSearchUrl = id === 'backend:search:baseUrl';
-      const label = isSearchUrl ? 'SearXNG base URL' : 'Firecrawl base URL';
-      const currentValue = isSearchUrl ? state.backends.search.baseUrl : state.backends.fetch.baseUrl;
-      const entered = await ctx.ui.input(label, currentValue ?? (isSearchUrl ? 'http://localhost:8080' : 'http://localhost:3002'));
-      if (entered === undefined) return;
-
-      if (!entered.trim()) {
-        state = applySettingsValue(state, id, '');
-        rebuildSettingsList();
-        tui.requestRender?.();
-        return;
-      }
-
-      const validated = validateBackendUrl(entered);
-      if (!validated.ok) {
-        ctx.ui.notify(validated.message, 'warning');
-        return;
-      }
-
-      state = applySettingsValue(state, id, validated.value);
-      rebuildSettingsList();
-      tui.requestRender?.();
-    };
-
-    const rebuildSettingsList = () => {
-      if (settingsList) {
-        container.removeChild(settingsList);
-      }
-
-      settingsList = new SettingsList(
-        buildBackendSettingsItems(state.scope, state.backends),
-        12,
-        getSettingsListTheme(),
-        (id, newValue) => {
-          if (id === 'backend:search:baseUrl' || id === 'backend:fetch:baseUrl') {
-            void editUrl(id);
-            return;
-          }
-
-          state = applySettingsValue(state, id, newValue);
-          rebuildSettingsList();
-          container.invalidate();
-        },
-        () => done({ action: 'save', scope: state.scope, config: state.config, backends: state.backends }),
-        { enableSearch: true }
-      );
-
-      container.addChild(settingsList);
-    };
-
-    rebuildSettingsList();
-
-    return {
-      render: (width: number) => container.render(width),
-      invalidate: () => container.invalidate(),
-      handleInput: (data: string) => {
-        const shortcut = handleSettingsShortcut(JSON.stringify(data).slice(1, -1));
-
-        if (shortcut?.action === 'cancel') {
-          done({ action: 'cancel' });
-          return;
-        }
-
-        if (shortcut?.action === 'reset') {
-          done({ action: 'reset', scope: state.scope });
-          return;
-        }
-
-        if (shortcut?.action === 'save') {
-          done({ action: 'save', scope: state.scope, config: state.config, backends: state.backends });
-          return;
-        }
-
-        settingsList.handleInput?.(data);
-      }
-    };
-  });
-}
-
-export function registerWebAgentConfigCommands(pi: ExtensionAPI, deps: CommandDeps = {}) {
-  const load = deps.load ?? (() => loadPresentationConfigLayers());
-  const save = deps.save ?? ((scope, config) => savePresentationConfigScope({}, scope, config));
-  const saveBackends = deps.saveBackends ?? ((scope, config) => saveBackendConfigScope({}, scope, config));
-  const reset = deps.reset ?? ((scope) => resetPresentationConfigScope({}, scope));
-  const resolveBrowser = deps.resolveBrowser ?? (() => resolveBrowserExecutable({}));
-  const runtime = deps.runtime ?? {
-    nodeVersion: process.version,
-    platform: process.platform,
-    arch: process.arch
-  };
-  const checkTypebox = deps.checkTypebox ?? defaultCheckTypebox;
-  const checkBackends = deps.checkBackends ?? ((config: BackendConfig) => checkBackendHealth(config));
-  const getChangelog = deps.getChangelog ?? (() => getLatestChangelogEntry());
-
-  pi.registerCommand('web-agent', {
-    description: 'Open settings or manage pi-web-agent presentation config',
-    handler: async (args, ctx) => {
-      let [action, maybeScope] = (args ?? '').trim().split(/\s+/).filter(Boolean);
-
-      if (!action) {
-        const selectedAction = await openActionMenu(ctx);
-        if (!selectedAction) return;
-
-        if (selectedAction === 'reset-project') {
-          action = 'reset';
-          maybeScope = 'project';
-        } else if (selectedAction === 'reset-global') {
-          action = 'reset';
-          maybeScope = 'global';
-        } else {
-          action = selectedAction;
-        }
-      }
-
-      if (action === 'doctor') {
-        const [typeboxOk, browser, loaded] = await Promise.all([checkTypebox(), resolveBrowser(), load()]);
-        const backendConfig = loaded.effectiveBackends ?? DEFAULT_BACKEND_CONFIG;
-        const backendIssues = validateBackendConfig(backendConfig);
-        const backendHealth = await checkBackends(backendConfig);
-        const lines = [
-          'pi-web-agent: loaded',
-          `runtime: node ${runtime.nodeVersion} ${runtime.platform} ${runtime.arch}`,
-          `typebox: ${typeboxOk ? 'ok' : 'missing'}`,
-          formatBackendSummary(backendConfig),
-          backendIssues.length > 0 ? `backend config: warning\n${backendIssues.join('\n')}` : 'backend config: ok',
-          ...backendHealth
-        ];
-
-        if (browser.ok) {
-          lines.push(`browser: ${browser.browser} ${browser.executablePath}`);
-        } else {
-          lines.push(`browser: missing (${browser.error.code})`);
-          lines.push(browser.error.message);
-          lines.push('Install Chrome, Chromium, Edge, or Brave and run /web-agent doctor again.');
-        }
-
-        ctx.ui.notify(lines.join('\n'), 'info');
-        return;
-      }
-
-      if (action === 'show') {
-        const loaded = await load();
-        ctx.ui.notify(
-          [
-            formatConfigSummary(loaded.effectiveConfig),
-            formatBackendSummary(loaded.effectiveBackends ?? DEFAULT_BACKEND_CONFIG),
-            `global: ${loaded.global.path}${loaded.global.exists ? '' : ' (missing)'}`,
-            `project: ${loaded.project.path}${loaded.project.exists ? '' : ' (missing)'}`
-          ].join('\n'),
-          'info'
-        );
-        return;
-      }
-
-      if (action === 'changelog') {
-        const changelog = await getChangelog();
-        ctx.ui.notify(changelog ?? 'No pi-web-agent changelog entries found.', 'info');
-        return;
-      }
-
-      if (action === 'reset') {
-        const scope = parseScopeToken(maybeScope) ?? 'project';
-        await reset(scope);
-        ctx.ui.notify(`Reset ${scope} config`, 'info');
-        return;
-      }
-
-      if (action === 'mode') {
-        const [, first, second] = (args ?? '').trim().split(/\s+/).filter(Boolean);
-        const loaded = await load();
-        const scope: PresentationScope = 'project';
-        const baseConfig = getScopeDisplayConfig(loaded, scope);
-        const inheritedConfig = getInheritedConfigForScope(loaded, scope);
-
-        if (first && isModeOrInherit(first) && first !== 'inherit') {
-          await save(scope, collapsePresentationConfigToOverride({ ...baseConfig, defaultMode: first }, inheritedConfig));
-          ctx.ui.notify(`Saved project default mode = ${first}`, 'info');
-          return;
-        }
-
-        if (first && second && isToolName(first) && isModeOrInherit(second)) {
-          const nextTools = { ...baseConfig.tools };
-
-          if (second === 'inherit') {
-            delete nextTools[first];
-          } else {
-            nextTools[first] = { mode: second };
-          }
-
-          await save(
-            scope,
-            collapsePresentationConfigToOverride({ ...baseConfig, tools: nextTools }, inheritedConfig)
-          );
-          ctx.ui.notify(`Saved project ${first} = ${second}`, 'info');
-          return;
-        }
-
-        ctx.ui.notify(
-          'Usage: /web-agent mode <compact|preview|verbose> or /web-agent mode <tool> <inherit|compact|preview|verbose>',
-          'info'
-        );
-        return;
-      }
-
-      if (!action || action === 'settings') {
-        const loaded = await load();
-        const initialScope: PresentationScope = 'project';
-        const section = await openSettingsSectionMenu(ctx);
-        if (!section) return;
-
-        const result = section === 'presentation'
-          ? await openPresentationSettingsUi(ctx, loaded, initialScope)
-          : await openBackendSettingsUi(ctx, loaded, initialScope);
-
-        if (!result || result.action === 'cancel') {
-          return;
-        }
-
-        if (result.action === 'reset') {
-          await reset(result.scope);
-          ctx.ui.notify(`Reset ${result.scope} config`, 'info');
-          return;
-        }
-
-        if (section === 'presentation') {
-          await save(
-            result.scope,
-            collapsePresentationConfigToOverride(
-              result.config,
-              getInheritedConfigForScope(loaded, result.scope)
-            )
-          );
-          ctx.ui.notify(`Saved ${result.scope} presentation config`, 'info');
-          return;
-        }
-
-        await saveBackends(
-          result.scope,
-          collapseBackendConfigToOverride(
-            result.backends,
-            getInheritedBackendsForScope(loaded, result.scope)
-          )
-        );
-        ctx.ui.notify(`Saved ${result.scope} backend config`, 'info');
-        return;
-      }
-
-      ctx.ui.notify(
-        'Use /web-agent, /web-agent show, /web-agent doctor, /web-agent changelog, /web-agent reset project, or /web-agent settings',
-        'info'
-      );
-    }
-  });
-}
+import {
+  DEFAULT_BACKEND_CONFIG,
+  mergeBackendConfigLayers,
+  validateBackendConfig,
+  type BackendConfig,
+  type BackendConfigOverride
+} from '../backends/config.js';
+import { checkBackendHealth } from '../backends/doctor.js';
+import {
+  DynamicBorder,
+  getSettingsListTheme,
+  type ExtensionAPI
+} from '@selesai/code';
+import { Container, SelectList, SettingsList, Text, type SelectItem, type SettingItem } from '@earendil-works/pi-tui';
+import {
+  DEFAULT_PRESENTATION_CONFIG,
+  mergePresentationConfigLayers,
+  resolvePresentationMode
+} from '../presentation/config.js';
+import {
+  loadPresentationConfigLayers,
+  resetPresentationConfigScope,
+  saveBackendConfigScope,
+  savePresentationConfigScope,
+  type LoadedPresentationConfig
+} from '../presentation/config-store.js';
+import { resolveBrowserExecutable, type BrowserResolutionResult } from '../fetch/browser-resolution.js';
+import { getLatestChangelogEntry } from '../changelog-notice.js';
+import type {
+  PresentationConfig,
+  PresentationConfigOverride,
+  PresentationScope,
+  PresentationToolName
+} from '../presentation/types.js';
+
+type CommandDeps = {
+  load?: () => ReturnType<typeof loadPresentationConfigLayers>;
+  save?: (scope: PresentationScope, config: PresentationConfigOverride) => Promise<void>;
+  saveBackends?: (scope: PresentationScope, config: BackendConfigOverride) => Promise<void>;
+  reset?: (scope: PresentationScope) => Promise<void>;
+  resolveBrowser?: () => Promise<BrowserResolutionResult>;
+  runtime?: { nodeVersion: string; platform: string; arch: string };
+  checkTypebox?: () => Promise<boolean>;
+  checkBackends?: (config: BackendConfig) => Promise<string[]>;
+  getChangelog?: () => Promise<string | undefined>;
+};
+
+type SettingsUiResult =
+  | { action: 'cancel' }
+  | { action: 'reset'; scope: PresentationScope }
+  | { action: 'save'; scope: PresentationScope; config: PresentationConfig; backends: BackendConfig };
+
+type WebAgentAction = 'settings' | 'show' | 'doctor' | 'changelog' | 'reset-project' | 'reset-global';
+type SettingsSection = 'presentation' | 'backends';
+
+export type SettingsDraftState = {
+  scope: PresentationScope;
+  drafts: Record<PresentationScope, PresentationConfig>;
+  backendDrafts: Record<PresentationScope, BackendConfig>;
+  config: PresentationConfig;
+  backends: BackendConfig;
+};
+
+const PRESENTATION_TOOL_NAMES: PresentationToolName[] = ['web_explore'];
+
+function parseScopeToken(token: string | undefined): PresentationScope | undefined {
+  return token === 'global' || token === 'project' ? token : undefined;
+}
+
+function clonePresentationConfig(config: PresentationConfig): PresentationConfig {
+  return {
+    defaultMode: config.defaultMode,
+    tools: { ...config.tools }
+  };
+}
+
+function cloneBackendConfig(config: BackendConfig): BackendConfig {
+  return {
+    search: {
+      ...config.search,
+      options: config.search.options ? { ...config.search.options } : undefined
+    },
+    fetch: {
+      ...config.fetch,
+      options: config.fetch.options ? { ...config.fetch.options } : undefined
+    },
+    headless: { ...config.headless }
+  };
+}
+
+function sameJson(left: unknown, right: unknown): boolean {
+  return JSON.stringify(left) === JSON.stringify(right);
+}
+
+export function validateBackendUrl(value: string): { ok: true; value: string } | { ok: false; message: string } {
+  try {
+    const url = new URL(value.trim());
+    if (url.protocol !== 'http:' && url.protocol !== 'https:') {
+      return { ok: false, message: 'Invalid URL. Include http:// or https://.' };
+    }
+
+    return { ok: true, value: url.toString().replace(/\/$/, '') };
+  } catch {
+    return { ok: false, message: 'Invalid URL. Include http:// or https://.' };
+  }
+}
+
+async function defaultCheckTypebox(): Promise<boolean> {
+  try {
+    await import('typebox');
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function formatSearchOptions(config: BackendConfig['search']) {
+  return [
+    config.fallback ? `fallback ${config.fallback}` : undefined,
+    config.options?.categories?.length ? `categories ${config.options.categories.join(',')}` : undefined,
+    config.options?.language ? `language ${config.options.language}` : undefined,
+    config.options?.safesearch !== undefined ? `safesearch ${config.options.safesearch}` : undefined
+  ].filter(Boolean).join(' ');
+}
+
+function formatFetchOptions(config: BackendConfig['fetch']) {
+  return [
+    config.fallback ? `fallback ${config.fallback}` : undefined,
+    config.options?.formats?.length ? `formats ${config.options.formats.join(',')}` : undefined,
+    config.options?.onlyMainContent !== undefined ? `onlyMainContent ${config.options.onlyMainContent}` : undefined
+  ].filter(Boolean).join(' ');
+}
+
+function formatBackendSummary(config: BackendConfig = DEFAULT_BACKEND_CONFIG) {
+  const searchSuffix = formatSearchOptions(config.search);
+  const fetchSuffix = formatFetchOptions(config.fetch);
+  const searchBase = config.search.baseUrl
+    ? `search: ${config.search.provider} (${config.search.baseUrl})`
+    : `search: ${config.search.provider}`;
+  const fetchBase = config.fetch.baseUrl
+    ? `fetch: ${config.fetch.provider} (${config.fetch.baseUrl})`
+    : `fetch: ${config.fetch.provider}`;
+
+  return [
+    searchSuffix ? `${searchBase} ${searchSuffix}` : searchBase,
+    fetchSuffix ? `${fetchBase} ${fetchSuffix}` : fetchBase,
+    `headless: ${config.headless.provider}`
+  ].join('\n');
+}
+
+function formatConfigSummary(config: PresentationConfig) {
+  const lines = [`defaultMode: ${config.defaultMode}`];
+
+  for (const toolName of PRESENTATION_TOOL_NAMES) {
+    lines.push(`${toolName}: ${config.tools[toolName]?.mode ?? 'inherit'}`);
+  }
+
+  return lines.join('\n');
+}
+
+function buildPresentationSettingsItems(scope: PresentationScope, config: PresentationConfig): SettingItem[] {
+  return [
+    {
+      id: 'scope',
+      label: 'Write scope',
+      currentValue: scope,
+      values: ['project', 'global']
+    },
+    {
+      id: 'defaultMode',
+      label: 'Default mode',
+      currentValue: config.defaultMode,
+      values: ['compact', 'preview', 'verbose']
+    },
+    ...PRESENTATION_TOOL_NAMES.map((toolName) => ({
+      id: `tool:${toolName}`,
+      label: toolName,
+      currentValue: config.tools[toolName]?.mode ?? 'inherit',
+      values: ['inherit', 'compact', 'preview', 'verbose']
+    }))
+  ];
+}
+
+function buildBackendSettingsItems(scope: PresentationScope, backends: BackendConfig): SettingItem[] {
+  return [
+    {
+      id: 'scope',
+      label: 'Write scope',
+      currentValue: scope,
+      values: ['project', 'global']
+    },
+    {
+      id: 'backend:search:provider',
+      label: 'Search backend',
+      currentValue: backends.search.provider,
+      values: ['duckduckgo', 'searxng', 'brave']
+    },
+    {
+      id: 'backend:search:baseUrl',
+      label: 'SearXNG URL',
+      currentValue: backends.search.baseUrl ?? 'not set',
+      values: ['edit']
+    },
+    {
+      id: 'backend:search:fallback',
+      label: 'Search fallback',
+      currentValue: backends.search.provider === 'searxng' || backends.search.provider === 'brave' ? backends.search.fallback ?? 'off' : 'off',
+      values: backends.search.provider === 'searxng' || backends.search.provider === 'brave' ? ['off', 'duckduckgo'] : ['off']
+    },
+    {
+      id: 'backend:secret:brave',
+      label: 'Brave API key',
+      currentValue: 'env var',
+      values: ['env var']
+    },
+    {
+      id: 'backend:fetch:provider',
+      label: 'Fetch backend',
+      currentValue: backends.fetch.provider,
+      values: ['http', 'firecrawl']
+    },
+    {
+      id: 'backend:fetch:baseUrl',
+      label: 'Firecrawl URL',
+      currentValue: backends.fetch.baseUrl ?? 'not set',
+      values: ['edit']
+    },
+    {
+      id: 'backend:fetch:fallback',
+      label: 'Firecrawl fallback',
+      currentValue: backends.fetch.provider === 'firecrawl' ? backends.fetch.fallback ?? 'off' : 'off',
+      values: backends.fetch.provider === 'firecrawl' ? ['off', 'http'] : ['off']
+    },
+    {
+      id: 'backend:secret:firecrawl',
+      label: 'Firecrawl API key',
+      currentValue: 'env var',
+      values: ['env var']
+    }
+  ];
+}
+
+function isToolName(value: string): value is PresentationToolName {
+  return PRESENTATION_TOOL_NAMES.includes(value as PresentationToolName);
+}
+
+function isModeOrInherit(value: string): value is 'inherit' | 'compact' | 'preview' | 'verbose' {
+  return ['inherit', 'compact', 'preview', 'verbose'].includes(value);
+}
+
+export function getInheritedConfigForScope(
+  loaded: Awaited<LoadedPresentationConfig>,
+  scope: PresentationScope
+): PresentationConfig {
+  if (scope === 'global') {
+    return DEFAULT_PRESENTATION_CONFIG;
+  }
+
+  return mergePresentationConfigLayers(DEFAULT_PRESENTATION_CONFIG, loaded.global.rawConfig);
+}
+
+export function getScopeDisplayConfig(
+  loaded: Awaited<LoadedPresentationConfig>,
+  scope: PresentationScope
+): PresentationConfig {
+  if (scope === 'global') {
+    return mergePresentationConfigLayers(DEFAULT_PRESENTATION_CONFIG, loaded.global.rawConfig);
+  }
+
+  return mergePresentationConfigLayers(
+    DEFAULT_PRESENTATION_CONFIG,
+    loaded.global.rawConfig,
+    loaded.project.rawConfig
+  );
+}
+
+export function getInheritedBackendsForScope(
+  loaded: Awaited<LoadedPresentationConfig>,
+  scope: PresentationScope
+): BackendConfig {
+  if (scope === 'global') {
+    return DEFAULT_BACKEND_CONFIG;
+  }
+
+  return mergeBackendConfigLayers(DEFAULT_BACKEND_CONFIG, loaded.global.rawBackends);
+}
+
+export function getScopeDisplayBackends(
+  loaded: Awaited<LoadedPresentationConfig>,
+  scope: PresentationScope
+): BackendConfig {
+  if (scope === 'global') {
+    return mergeBackendConfigLayers(DEFAULT_BACKEND_CONFIG, loaded.global.rawBackends);
+  }
+
+  return mergeBackendConfigLayers(
+    DEFAULT_BACKEND_CONFIG,
+    loaded.global.rawBackends,
+    loaded.project.rawBackends
+  );
+}
+
+export function createSettingsDraftState(
+  loaded: Awaited<LoadedPresentationConfig>,
+  initialScope: PresentationScope
+): SettingsDraftState {
+  const drafts = {
+    global: getScopeDisplayConfig(loaded, 'global'),
+    project: getScopeDisplayConfig(loaded, 'project')
+  };
+  const backendDrafts = {
+    global: getScopeDisplayBackends(loaded, 'global'),
+    project: getScopeDisplayBackends(loaded, 'project')
+  };
+
+  return {
+    scope: initialScope,
+    drafts,
+    backendDrafts,
+    config: clonePresentationConfig(drafts[initialScope]),
+    backends: cloneBackendConfig(backendDrafts[initialScope])
+  };
+}
+
+export function applySettingsValue(
+  state: SettingsDraftState,
+  id: string,
+  newValue: string
+): SettingsDraftState {
+  const nextDrafts = {
+    global: clonePresentationConfig(state.drafts.global),
+    project: clonePresentationConfig(state.drafts.project)
+  };
+  const nextBackendDrafts = {
+    global: cloneBackendConfig(state.backendDrafts.global),
+    project: cloneBackendConfig(state.backendDrafts.project)
+  };
+
+  let nextScope = state.scope;
+
+  if (id === 'scope' && (newValue === 'project' || newValue === 'global')) {
+    nextScope = newValue;
+    return {
+      scope: nextScope,
+      drafts: nextDrafts,
+      backendDrafts: nextBackendDrafts,
+      config: clonePresentationConfig(nextDrafts[nextScope]),
+      backends: cloneBackendConfig(nextBackendDrafts[nextScope])
+    };
+  }
+
+  const currentDraft = clonePresentationConfig(nextDrafts[nextScope]);
+  const currentBackends = cloneBackendConfig(nextBackendDrafts[nextScope]);
+
+  if (id === 'defaultMode' && (newValue === 'compact' || newValue === 'preview' || newValue === 'verbose')) {
+    currentDraft.defaultMode = newValue;
+  }
+
+  if (id.startsWith('tool:')) {
+    const toolName = id.slice('tool:'.length) as PresentationToolName;
+    const nextTools = { ...currentDraft.tools };
+
+    if (newValue === 'inherit') {
+      delete nextTools[toolName];
+    } else if (
+      newValue === 'compact' ||
+      newValue === 'preview' ||
+      newValue === 'verbose'
+    ) {
+      nextTools[toolName] = { mode: newValue };
+    }
+
+    currentDraft.tools = nextTools;
+  }
+
+  if (id === 'backend:search:provider' && (newValue === 'duckduckgo' || newValue === 'searxng' || newValue === 'brave')) {
+    currentBackends.search.provider = newValue;
+    if (newValue !== 'searxng') {
+      delete currentBackends.search.baseUrl;
+      delete currentBackends.search.options;
+    }
+    if (newValue === 'duckduckgo') {
+      delete currentBackends.search.fallback;
+    }
+  }
+
+  if (id === 'backend:search:fallback') {
+    if (newValue === 'duckduckgo' && (currentBackends.search.provider === 'searxng' || currentBackends.search.provider === 'brave')) {
+      currentBackends.search.fallback = 'duckduckgo';
+    } else {
+      delete currentBackends.search.fallback;
+    }
+  }
+
+  if (id === 'backend:search:baseUrl') {
+    if (currentBackends.search.provider === 'searxng' && newValue.trim()) {
+      currentBackends.search.baseUrl = newValue.trim();
+    } else {
+      delete currentBackends.search.baseUrl;
+    }
+  }
+
+  if (id === 'backend:fetch:provider' && (newValue === 'http' || newValue === 'firecrawl')) {
+    currentBackends.fetch.provider = newValue;
+    if (newValue === 'http') {
+      delete currentBackends.fetch.fallback;
+    }
+  }
+
+  if (id === 'backend:fetch:fallback') {
+    if (newValue === 'http' && currentBackends.fetch.provider === 'firecrawl') {
+      currentBackends.fetch.fallback = 'http';
+    } else if (newValue === 'off' || currentBackends.fetch.provider !== 'firecrawl') {
+      delete currentBackends.fetch.fallback;
+    }
+  }
+
+  if (id === 'backend:fetch:baseUrl') {
+    if (newValue.trim()) {
+      currentBackends.fetch.baseUrl = newValue.trim();
+    } else {
+      delete currentBackends.fetch.baseUrl;
+    }
+  }
+
+  nextDrafts[nextScope] = currentDraft;
+  nextBackendDrafts[nextScope] = currentBackends;
+
+  return {
+    scope: nextScope,
+    drafts: nextDrafts,
+    backendDrafts: nextBackendDrafts,
+    config: clonePresentationConfig(nextDrafts[nextScope]),
+    backends: cloneBackendConfig(nextBackendDrafts[nextScope])
+  };
+}
+
+export function collapsePresentationConfigToOverride(
+  config: PresentationConfig,
+  inheritedConfig: PresentationConfig
+): PresentationConfigOverride {
+  const tools = Object.fromEntries(
+    PRESENTATION_TOOL_NAMES.flatMap((toolName) => {
+      const configuredMode = config.tools[toolName]?.mode;
+      if (!configuredMode) {
+        return [];
+      }
+
+      const inheritedMode = resolvePresentationMode(toolName, inheritedConfig);
+      if (configuredMode === inheritedMode) {
+        return [];
+      }
+
+      return [[toolName, { mode: configuredMode }]];
+    })
+  ) as PresentationConfigOverride['tools'];
+
+  return {
+    defaultMode:
+      config.defaultMode === inheritedConfig.defaultMode ? undefined : config.defaultMode,
+    tools
+  };
+}
+
+export function collapseBackendConfigToOverride(
+  config: BackendConfig,
+  inheritedConfig: BackendConfig
+): BackendConfigOverride {
+  const override: BackendConfigOverride = {};
+
+  if (!sameJson(config.search, inheritedConfig.search)) {
+    override.search = config.search.provider !== inheritedConfig.search.provider
+      ? { ...config.search }
+      : {
+          ...(config.search.baseUrl !== inheritedConfig.search.baseUrl ? { baseUrl: config.search.baseUrl } : {}),
+          ...(config.search.fallback !== inheritedConfig.search.fallback ? { fallback: config.search.fallback } : {}),
+          ...(!sameJson(config.search.options, inheritedConfig.search.options) ? { options: config.search.options } : {})
+        };
+
+    if (config.search.provider !== inheritedConfig.search.provider) {
+      override.search.provider = config.search.provider;
+    } else if (Object.keys(override.search).length === 0) {
+      delete override.search;
+    }
+  }
+
+  if (!sameJson(config.fetch, inheritedConfig.fetch)) {
+    override.fetch = config.fetch.provider !== inheritedConfig.fetch.provider
+      ? { ...config.fetch, apiKey: undefined }
+      : {
+          ...(config.fetch.baseUrl !== inheritedConfig.fetch.baseUrl ? { baseUrl: config.fetch.baseUrl } : {}),
+          ...(config.fetch.fallback !== inheritedConfig.fetch.fallback ? { fallback: config.fetch.fallback } : {}),
+          ...(!sameJson(config.fetch.options, inheritedConfig.fetch.options) ? { options: config.fetch.options } : {})
+        };
+
+    delete override.fetch.apiKey;
+
+    if (config.fetch.provider !== inheritedConfig.fetch.provider) {
+      override.fetch.provider = config.fetch.provider;
+    } else if (Object.keys(override.fetch).length === 0) {
+      delete override.fetch;
+    }
+  }
+
+  if (!sameJson(config.headless, inheritedConfig.headless)) {
+    override.headless = { ...config.headless };
+  }
+
+  return override;
+}
+
+export function handleSettingsShortcut(data: string): { action: 'cancel' | 'reset' | 'save' } | undefined {
+  if (data === '\u001b') {
+    return { action: 'cancel' };
+  }
+
+  if (data === '\u0012') {
+    return { action: 'reset' };
+  }
+
+  if (data === '\u0013') {
+    return { action: 'save' };
+  }
+
+  return undefined;
+}
+
+async function openActionMenu(ctx: any): Promise<WebAgentAction | undefined> {
+  return ctx.ui.custom((tui: any, theme: any, _kb: unknown, done: (value: WebAgentAction | undefined) => void) => {
+    const container = new Container();
+    const items: SelectItem[] = [
+      { value: 'settings', label: 'Settings', description: 'Edit presentation modes and backends' },
+      { value: 'show', label: 'Show config', description: 'Print effective config paths and modes' },
+      { value: 'doctor', label: 'Doctor', description: 'Check runtime dependencies and browser detection' },
+      { value: 'changelog', label: 'Changelog', description: 'Show latest package changelog' },
+      { value: 'reset-project', label: 'Reset project config', description: 'Delete project-level overrides' },
+      { value: 'reset-global', label: 'Reset global config', description: 'Delete global overrides' }
+    ];
+
+    container.addChild(new DynamicBorder((text: string) => theme.fg('accent', text)));
+    container.addChild(new Text(theme.fg('accent', theme.bold('pi-web-agent')), 1, 0));
+
+    const list = new SelectList(items, Math.min(items.length, 8), {
+      selectedPrefix: (text: string) => theme.fg('accent', text),
+      selectedText: (text: string) => theme.fg('accent', text),
+      description: (text: string) => theme.fg('muted', text),
+      scrollInfo: (text: string) => theme.fg('dim', text),
+      noMatch: (text: string) => theme.fg('warning', text)
+    });
+
+    list.onSelect = (item) => done(item.value as WebAgentAction);
+    list.onCancel = () => done(undefined);
+    container.addChild(list);
+    container.addChild(new Text(theme.fg('dim', '↑↓ navigate • enter select • esc cancel'), 1, 0));
+    container.addChild(new DynamicBorder((text: string) => theme.fg('accent', text)));
+
+    return {
+      render: (width: number) => container.render(width),
+      invalidate: () => container.invalidate(),
+      handleInput: (data: string) => {
+        list.handleInput?.(data);
+        tui.requestRender?.();
+      }
+    };
+  });
+}
+
+async function openSettingsSectionMenu(ctx: any): Promise<SettingsSection | undefined> {
+  return ctx.ui.custom((tui: any, theme: any, _kb: unknown, done: (value: SettingsSection | undefined) => void) => {
+    const container = new Container();
+    const items: SelectItem[] = [
+      { value: 'presentation', label: 'Presentation', description: 'Compact, preview, and verbose output modes' },
+      { value: 'backends', label: 'Backends', description: 'Search/fetch providers, URLs, and fallbacks' }
+    ];
+
+    container.addChild(new DynamicBorder((text: string) => theme.fg('accent', text)));
+    container.addChild(new Text(theme.fg('accent', theme.bold('pi-web-agent settings')), 1, 0));
+
+    const list = new SelectList(items, items.length, {
+      selectedPrefix: (text: string) => theme.fg('accent', text),
+      selectedText: (text: string) => theme.fg('accent', text),
+      description: (text: string) => theme.fg('muted', text),
+      scrollInfo: (text: string) => theme.fg('dim', text),
+      noMatch: (text: string) => theme.fg('warning', text)
+    });
+
+    list.onSelect = (item) => done(item.value as SettingsSection);
+    list.onCancel = () => done(undefined);
+    container.addChild(list);
+    container.addChild(new Text(theme.fg('dim', '↑↓ navigate • enter select • esc cancel'), 1, 0));
+    container.addChild(new DynamicBorder((text: string) => theme.fg('accent', text)));
+
+    return {
+      render: (width: number) => container.render(width),
+      invalidate: () => container.invalidate(),
+      handleInput: (data: string) => {
+        list.handleInput?.(data);
+        tui.requestRender?.();
+      }
+    };
+  });
+}
+
+async function openPresentationSettingsUi(
+  ctx: any,
+  loaded: Awaited<LoadedPresentationConfig>,
+  initialScope: PresentationScope
+): Promise<SettingsUiResult | undefined> {
+  return ctx.ui.custom((_tui: unknown, theme: any, _kb: unknown, done: (value: SettingsUiResult) => void) => {
+    let state = createSettingsDraftState(loaded, initialScope);
+    let settingsList: SettingsList;
+
+    const container = new Container();
+    container.addChild(new Text(theme.fg('accent', theme.bold('pi-web-agent · presentation')), 1, 1));
+    container.addChild(
+      new Text(
+        theme.fg('muted', 'Ctrl+S save · Ctrl+R reset scope · Esc cancel'),
+        1,
+        2
+      )
+    );
+
+    const rebuildSettingsList = () => {
+      if (settingsList) {
+        container.removeChild(settingsList);
+      }
+
+      settingsList = new SettingsList(
+        buildPresentationSettingsItems(state.scope, state.config),
+        Math.min(PRESENTATION_TOOL_NAMES.length + 8, 18),
+        getSettingsListTheme(),
+        (id, newValue) => {
+          state = applySettingsValue(state, id, newValue);
+          rebuildSettingsList();
+          container.invalidate();
+        },
+        () => done({ action: 'save', scope: state.scope, config: state.config, backends: state.backends }),
+        { enableSearch: true }
+      );
+
+      container.addChild(settingsList);
+    };
+
+    rebuildSettingsList();
+
+    return {
+      render: (width: number) => container.render(width),
+      invalidate: () => container.invalidate(),
+      handleInput: (data: string) => {
+        const shortcut = handleSettingsShortcut(JSON.stringify(data).slice(1, -1));
+
+        if (shortcut?.action === 'cancel') {
+          done({ action: 'cancel' });
+          return;
+        }
+
+        if (shortcut?.action === 'reset') {
+          done({ action: 'reset', scope: state.scope });
+          return;
+        }
+
+        if (shortcut?.action === 'save') {
+          done({ action: 'save', scope: state.scope, config: state.config, backends: state.backends });
+          return;
+        }
+
+        settingsList.handleInput?.(data);
+      }
+    };
+  });
+}
+
+async function openBackendSettingsUi(
+  ctx: any,
+  loaded: Awaited<LoadedPresentationConfig>,
+  initialScope: PresentationScope
+): Promise<SettingsUiResult | undefined> {
+  return ctx.ui.custom((tui: any, theme: any, _kb: unknown, done: (value: SettingsUiResult) => void) => {
+    let state = createSettingsDraftState(loaded, initialScope);
+    let settingsList: SettingsList;
+
+    const container = new Container();
+    container.addChild(new Text(theme.fg('accent', theme.bold('pi-web-agent · backends')), 1, 1));
+    container.addChild(
+      new Text(
+        theme.fg('muted', 'Ctrl+S save · Ctrl+R reset scope · Esc cancel · API keys stay in env vars'),
+        1,
+        2
+      )
+    );
+
+    const editUrl = async (id: string) => {
+      const isSearchUrl = id === 'backend:search:baseUrl';
+      const label = isSearchUrl ? 'SearXNG base URL' : 'Firecrawl base URL';
+      const currentValue = isSearchUrl ? state.backends.search.baseUrl : state.backends.fetch.baseUrl;
+      const entered = await ctx.ui.input(label, currentValue ?? (isSearchUrl ? 'http://localhost:8080' : 'http://localhost:3002'));
+      if (entered === undefined) return;
+
+      if (!entered.trim()) {
+        state = applySettingsValue(state, id, '');
+        rebuildSettingsList();
+        tui.requestRender?.();
+        return;
+      }
+
+      const validated = validateBackendUrl(entered);
+      if (!validated.ok) {
+        ctx.ui.notify(validated.message, 'warning');
+        return;
+      }
+
+      state = applySettingsValue(state, id, validated.value);
+      rebuildSettingsList();
+      tui.requestRender?.();
+    };
+
+    const rebuildSettingsList = () => {
+      if (settingsList) {
+        container.removeChild(settingsList);
+      }
+
+      settingsList = new SettingsList(
+        buildBackendSettingsItems(state.scope, state.backends),
+        12,
+        getSettingsListTheme(),
+        (id, newValue) => {
+          if (id === 'backend:search:baseUrl' || id === 'backend:fetch:baseUrl') {
+            void editUrl(id);
+            return;
+          }
+
+          state = applySettingsValue(state, id, newValue);
+          rebuildSettingsList();
+          container.invalidate();
+        },
+        () => done({ action: 'save', scope: state.scope, config: state.config, backends: state.backends }),
+        { enableSearch: true }
+      );
+
+      container.addChild(settingsList);
+    };
+
+    rebuildSettingsList();
+
+    return {
+      render: (width: number) => container.render(width),
+      invalidate: () => container.invalidate(),
+      handleInput: (data: string) => {
+        const shortcut = handleSettingsShortcut(JSON.stringify(data).slice(1, -1));
+
+        if (shortcut?.action === 'cancel') {
+          done({ action: 'cancel' });
+          return;
+        }
+
+        if (shortcut?.action === 'reset') {
+          done({ action: 'reset', scope: state.scope });
+          return;
+        }
+
+        if (shortcut?.action === 'save') {
+          done({ action: 'save', scope: state.scope, config: state.config, backends: state.backends });
+          return;
+        }
+
+        settingsList.handleInput?.(data);
+      }
+    };
+  });
+}
+
+export function registerWebAgentConfigCommands(pi: ExtensionAPI, deps: CommandDeps = {}) {
+  const load = deps.load ?? (() => loadPresentationConfigLayers());
+  const save = deps.save ?? ((scope, config) => savePresentationConfigScope({}, scope, config));
+  const saveBackends = deps.saveBackends ?? ((scope, config) => saveBackendConfigScope({}, scope, config));
+  const reset = deps.reset ?? ((scope) => resetPresentationConfigScope({}, scope));
+  const resolveBrowser = deps.resolveBrowser ?? (() => resolveBrowserExecutable({}));
+  const runtime = deps.runtime ?? {
+    nodeVersion: process.version,
+    platform: process.platform,
+    arch: process.arch
+  };
+  const checkTypebox = deps.checkTypebox ?? defaultCheckTypebox;
+  const checkBackends = deps.checkBackends ?? ((config: BackendConfig) => checkBackendHealth(config));
+  const getChangelog = deps.getChangelog ?? (() => getLatestChangelogEntry());
+
+  pi.registerCommand('web-agent', {
+    description: 'Open settings or manage pi-web-agent presentation config',
+    handler: async (args, ctx) => {
+      let [action, maybeScope] = (args ?? '').trim().split(/\s+/).filter(Boolean);
+
+      if (!action) {
+        const selectedAction = await openActionMenu(ctx);
+        if (!selectedAction) return;
+
+        if (selectedAction === 'reset-project') {
+          action = 'reset';
+          maybeScope = 'project';
+        } else if (selectedAction === 'reset-global') {
+          action = 'reset';
+          maybeScope = 'global';
+        } else {
+          action = selectedAction;
+        }
+      }
+
+      if (action === 'doctor') {
+        const [typeboxOk, browser, loaded] = await Promise.all([checkTypebox(), resolveBrowser(), load()]);
+        const backendConfig = loaded.effectiveBackends ?? DEFAULT_BACKEND_CONFIG;
+        const backendIssues = validateBackendConfig(backendConfig);
+        const backendHealth = await checkBackends(backendConfig);
+        const lines = [
+          'pi-web-agent: loaded',
+          `runtime: node ${runtime.nodeVersion} ${runtime.platform} ${runtime.arch}`,
+          `typebox: ${typeboxOk ? 'ok' : 'missing'}`,
+          formatBackendSummary(backendConfig),
+          backendIssues.length > 0 ? `backend config: warning\n${backendIssues.join('\n')}` : 'backend config: ok',
+          ...backendHealth
+        ];
+
+        if (browser.ok) {
+          lines.push(`browser: ${browser.browser} ${browser.executablePath}`);
+        } else {
+          lines.push(`browser: missing (${browser.error.code})`);
+          lines.push(browser.error.message);
+          lines.push('Install Chrome, Chromium, Edge, or Brave and run /web-agent doctor again.');
+        }
+
+        ctx.ui.notify(lines.join('\n'), 'info');
+        return;
+      }
+
+      if (action === 'show') {
+        const loaded = await load();
+        ctx.ui.notify(
+          [
+            formatConfigSummary(loaded.effectiveConfig),
+            formatBackendSummary(loaded.effectiveBackends ?? DEFAULT_BACKEND_CONFIG),
+            `global: ${loaded.global.path}${loaded.global.exists ? '' : ' (missing)'}`,
+            `project: ${loaded.project.path}${loaded.project.exists ? '' : ' (missing)'}`
+          ].join('\n'),
+          'info'
+        );
+        return;
+      }
+
+      if (action === 'changelog') {
+        const changelog = await getChangelog();
+        ctx.ui.notify(changelog ?? 'No pi-web-agent changelog entries found.', 'info');
+        return;
+      }
+
+      if (action === 'reset') {
+        const scope = parseScopeToken(maybeScope) ?? 'project';
+        await reset(scope);
+        ctx.ui.notify(`Reset ${scope} config`, 'info');
+        return;
+      }
+
+      if (action === 'mode') {
+        const [, first, second] = (args ?? '').trim().split(/\s+/).filter(Boolean);
+        const loaded = await load();
+        const scope: PresentationScope = 'project';
+        const baseConfig = getScopeDisplayConfig(loaded, scope);
+        const inheritedConfig = getInheritedConfigForScope(loaded, scope);
+
+        if (first && isModeOrInherit(first) && first !== 'inherit') {
+          await save(scope, collapsePresentationConfigToOverride({ ...baseConfig, defaultMode: first }, inheritedConfig));
+          ctx.ui.notify(`Saved project default mode = ${first}`, 'info');
+          return;
+        }
+
+        if (first && second && isToolName(first) && isModeOrInherit(second)) {
+          const nextTools = { ...baseConfig.tools };
+
+          if (second === 'inherit') {
+            delete nextTools[first];
+          } else {
+            nextTools[first] = { mode: second };
+          }
+
+          await save(
+            scope,
+            collapsePresentationConfigToOverride({ ...baseConfig, tools: nextTools }, inheritedConfig)
+          );
+          ctx.ui.notify(`Saved project ${first} = ${second}`, 'info');
+          return;
+        }
+
+        ctx.ui.notify(
+          'Usage: /web-agent mode <compact|preview|verbose> or /web-agent mode <tool> <inherit|compact|preview|verbose>',
+          'info'
+        );
+        return;
+      }
+
+      if (!action || action === 'settings') {
+        const loaded = await load();
+        const initialScope: PresentationScope = 'project';
+        const section = await openSettingsSectionMenu(ctx);
+        if (!section) return;
+
+        const result = section === 'presentation'
+          ? await openPresentationSettingsUi(ctx, loaded, initialScope)
+          : await openBackendSettingsUi(ctx, loaded, initialScope);
+
+        if (!result || result.action === 'cancel') {
+          return;
+        }
+
+        if (result.action === 'reset') {
+          await reset(result.scope);
+          ctx.ui.notify(`Reset ${result.scope} config`, 'info');
+          return;
+        }
+
+        if (section === 'presentation') {
+          await save(
+            result.scope,
+            collapsePresentationConfigToOverride(
+              result.config,
+              getInheritedConfigForScope(loaded, result.scope)
+            )
+          );
+          ctx.ui.notify(`Saved ${result.scope} presentation config`, 'info');
+          return;
+        }
+
+        await saveBackends(
+          result.scope,
+          collapseBackendConfigToOverride(
+            result.backends,
+            getInheritedBackendsForScope(loaded, result.scope)
+          )
+        );
+        ctx.ui.notify(`Saved ${result.scope} backend config`, 'info');
+        return;
+      }
+
+      ctx.ui.notify(
+        'Use /web-agent, /web-agent show, /web-agent doctor, /web-agent changelog, /web-agent reset project, or /web-agent settings',
+        'info'
+      );
+    }
+  });
+}