take-screenshots.cjs

/**
 * Comprehensive screenshot script with Tauri IPC mocking.
 * Produces realistic light-theme screenshots for the README.
 */
const { chromium } = require('/home/user/mcp-mux/node_modules/.pnpm/playwright-core@1.58.1/node_modules/playwright-core');

const BASE_URL = 'http://localhost:1420';
const DIR = '/home/user/mcp-mux/docs/screenshots';

// ── Mock data ──────────────────────────────────────────────

const SPACE_DEFAULT = {
  id: '00000000-0000-0000-0000-000000000001',
  name: 'My Space',
  icon: '🌐',
  description: null,
  is_default: true,
  sort_order: 0,
  created_at: '2026-01-15T10:00:00Z',
  updated_at: '2026-01-15T10:00:00Z',
};

const SPACE_WORK = {
  id: '00000000-0000-0000-0000-000000000002',
  name: 'Work Projects',
  icon: '💼',
  description: 'Production servers for work',
  is_default: false,
  sort_order: 1,
  created_at: '2026-01-20T10:00:00Z',
  updated_at: '2026-01-20T10:00:00Z',
};

const SPACE_PERSONAL = {
  id: '00000000-0000-0000-0000-000000000003',
  name: 'Personal',
  icon: '🏠',
  description: 'Side projects and experiments',
  is_default: false,
  sort_order: 2,
  created_at: '2026-01-22T10:00:00Z',
  updated_at: '2026-01-22T10:00:00Z',
};

const SPACES = [SPACE_DEFAULT, SPACE_WORK, SPACE_PERSONAL];

function mkInstalled(id, instId, serverId, name, desc, alias, icon, categories, transportType, auth, publisher, caps, inputDefs, inputVals, enabled, oauthConnected) {
  const transport = transportType === 'stdio'
    ? { type: 'stdio', command: 'npx', args: ['-y', `@modelcontextprotocol/server-${alias}`], metadata: { inputs: inputDefs || [] } }
    : { type: 'http', url: `https://mcp.${alias}.com/sse`, headers: {}, metadata: { inputs: inputDefs || [] } };
  return {
    id: instId, space_id: SPACE_DEFAULT.id, server_id: serverId,
    server_name: name, cached_definition: JSON.stringify({
      id: serverId, name, description: desc, alias, icon, categories, transport, auth,
      publisher, capabilities: caps,
    }),
    input_values: inputVals || {}, enabled, env_overrides: {}, args_append: [],
    extra_headers: {}, oauth_connected: oauthConnected || false, source: 'Registry',
    created_at: '2026-01-16T10:00:00Z', updated_at: '2026-01-16T10:00:00Z',
  };
}

const INSTALLED_SERVERS = [
  mkInstalled(1, 'inst-1', 'github-mcp', 'GitHub', 'GitHub API integration — issues, PRs, repos, and code search', 'github', '🐙', ['developer-tools'], 'stdio',
    { type: 'api_key', instructions: null }, { name: 'Anthropic', verified: true, official: true }, { tools: true, resources: true, prompts: false },
    [{ id: 'GITHUB_TOKEN', label: 'GitHub Token', type: 'password', required: true, secret: true }], { GITHUB_TOKEN: 'ghp_***' }, true, false),
  mkInstalled(2, 'inst-2', 'atlassian-mcp', 'Atlassian', 'Jira issues, Confluence pages, and project management', 'atlassian', '🔷', ['productivity'], 'http',
    { type: 'oauth' }, { name: 'Atlassian', verified: true, official: true }, { tools: true, resources: true, prompts: false },
    [], {}, true, true),
  mkInstalled(3, 'inst-3', 'cloudflare-mcp', 'Cloudflare', 'Manage Workers, KV, R2, and DNS via Cloudflare API', 'cloudflare', '☁️', ['cloud'], 'http',
    { type: 'oauth' }, { name: 'Cloudflare', verified: true, official: true }, { tools: true, resources: true, prompts: false },
    [], {}, true, true),
  mkInstalled(4, 'inst-4', 'postgres-mcp', 'PostgreSQL', 'Query databases, inspect schemas, and run SQL', 'postgres', '🐘', ['developer-tools'], 'stdio',
    { type: 'api_key', instructions: null }, { name: 'Anthropic', verified: true, official: true }, { tools: true, resources: true, prompts: false },
    [{ id: 'DATABASE_URL', label: 'Database URL', type: 'url', required: true, secret: true }], { DATABASE_URL: 'postgres://***' }, true, false),
  mkInstalled(5, 'inst-5', 'azure-mcp', 'Azure DevOps', 'Azure DevOps work items, repos, and pipelines', 'azure', '🔵', ['cloud'], 'http',
    { type: 'oauth' }, { name: 'Microsoft', verified: true, official: true }, { tools: true, resources: true, prompts: false },
    [], {}, true, true),
  mkInstalled(6, 'inst-6', 'filesystem-mcp', 'Filesystem', 'Read, write, and search files on your local machine', 'filesystem', '📂', ['file-system'], 'stdio',
    { type: 'none' }, { name: 'Anthropic', verified: true, official: true }, { tools: true, resources: true, prompts: false },
    [{ id: 'ALLOWED_DIR', label: 'Allowed Directory', type: 'text', required: true, secret: false }], { ALLOWED_DIR: '/home/user/projects' }, true, false),
];

function mkFeature(serverId, serverName, type, name, desc) {
  return { id: `${serverId}-${name}`, space_id: SPACE_DEFAULT.id, server_id: serverId, feature_type: type, feature_name: name, display_name: name, description: desc, input_schema: null, discovered_at: '2026-01-16T10:00:00Z', last_seen_at: '2026-02-07T10:00:00Z', is_available: true };
}

const SERVER_FEATURES = [
  // GitHub
  mkFeature('github-mcp', 'GitHub', 'tool', 'create_issue', 'Create a new GitHub issue'),
  mkFeature('github-mcp', 'GitHub', 'tool', 'search_code', 'Search code across repositories'),
  mkFeature('github-mcp', 'GitHub', 'tool', 'list_pull_requests', 'List pull requests for a repository'),
  mkFeature('github-mcp', 'GitHub', 'tool', 'create_pull_request', 'Create a new pull request'),
  mkFeature('github-mcp', 'GitHub', 'resource', 'repo://contents', 'Repository file contents'),
  // Atlassian
  mkFeature('atlassian-mcp', 'Atlassian', 'tool', 'create_jira_issue', 'Create a Jira issue'),
  mkFeature('atlassian-mcp', 'Atlassian', 'tool', 'search_issues', 'Search Jira issues with JQL'),
  mkFeature('atlassian-mcp', 'Atlassian', 'tool', 'get_confluence_page', 'Fetch a Confluence page'),
  mkFeature('atlassian-mcp', 'Atlassian', 'tool', 'update_issue_status', 'Transition a Jira issue'),
  mkFeature('atlassian-mcp', 'Atlassian', 'resource', 'jira://boards', 'Jira boards listing'),
  // Cloudflare
  mkFeature('cloudflare-mcp', 'Cloudflare', 'tool', 'deploy_worker', 'Deploy a Cloudflare Worker'),
  mkFeature('cloudflare-mcp', 'Cloudflare', 'tool', 'list_kv_namespaces', 'List KV namespaces'),
  mkFeature('cloudflare-mcp', 'Cloudflare', 'tool', 'manage_r2_bucket', 'Manage R2 storage buckets'),
  mkFeature('cloudflare-mcp', 'Cloudflare', 'tool', 'update_dns_record', 'Update DNS records'),
  mkFeature('cloudflare-mcp', 'Cloudflare', 'resource', 'workers://bindings', 'Worker bindings config'),
  // PostgreSQL
  mkFeature('postgres-mcp', 'PostgreSQL', 'tool', 'query', 'Execute a SQL query'),
  mkFeature('postgres-mcp', 'PostgreSQL', 'tool', 'describe_table', 'Get table schema'),
  mkFeature('postgres-mcp', 'PostgreSQL', 'resource', 'schema://tables', 'Database table listing'),
  // Azure DevOps
  mkFeature('azure-mcp', 'Azure DevOps', 'tool', 'create_work_item', 'Create an Azure DevOps work item'),
  mkFeature('azure-mcp', 'Azure DevOps', 'tool', 'list_pipelines', 'List CI/CD pipelines'),
  mkFeature('azure-mcp', 'Azure DevOps', 'tool', 'trigger_pipeline', 'Trigger a pipeline run'),
  mkFeature('azure-mcp', 'Azure DevOps', 'resource', 'repos://list', 'Azure repos listing'),
  // Filesystem
  mkFeature('filesystem-mcp', 'Filesystem', 'tool', 'read_file', 'Read a file from disk'),
  mkFeature('filesystem-mcp', 'Filesystem', 'tool', 'write_file', 'Write content to a file'),
  mkFeature('filesystem-mcp', 'Filesystem', 'tool', 'search_files', 'Search files by pattern'),
  mkFeature('filesystem-mcp', 'Filesystem', 'tool', 'list_directory', 'List directory contents'),
  mkFeature('filesystem-mcp', 'Filesystem', 'resource', 'file://contents', 'File contents'),
];

const SERVER_STATUSES = {
  'github-mcp': { server_id: 'github-mcp', status: 'connected', flow_id: 1, has_connected_before: true, message: null },
  'atlassian-mcp': { server_id: 'atlassian-mcp', status: 'connected', flow_id: 1, has_connected_before: true, message: null },
  'cloudflare-mcp': { server_id: 'cloudflare-mcp', status: 'connected', flow_id: 1, has_connected_before: true, message: null },
  'postgres-mcp': { server_id: 'postgres-mcp', status: 'connected', flow_id: 1, has_connected_before: true, message: null },
  'azure-mcp': { server_id: 'azure-mcp', status: 'connected', flow_id: 1, has_connected_before: true, message: null },
  'filesystem-mcp': { server_id: 'filesystem-mcp', status: 'connected', flow_id: 1, has_connected_before: true, message: null },
};

const FEATURE_SETS = [
  { id: 'fs-all', name: 'All Features', description: 'Access to all tools, prompts, and resources', icon: null, space_id: null, feature_set_type: 'all', server_id: null, is_builtin: true, is_deleted: false, members: [] },
  { id: 'fs-default', name: 'Default', description: 'Default feature set for new clients', icon: null, space_id: null, feature_set_type: 'default', server_id: null, is_builtin: true, is_deleted: false, members: [] },
  { id: 'fs-readonly', name: 'Read Only', description: 'Only read operations — no writes or deletes', icon: '🔒', space_id: SPACE_DEFAULT.id, feature_set_type: 'custom', server_id: null, is_builtin: false, is_deleted: false, members: [] },
  { id: 'fs-dev', name: 'Dev Tools', description: 'GitHub + PostgreSQL + Filesystem access', icon: '🛠️', space_id: SPACE_DEFAULT.id, feature_set_type: 'custom', server_id: null, is_builtin: false, is_deleted: false, members: [] },
];

const OAUTH_CLIENTS = [
  { client_id: 'cursor-001', registration_type: 'dcr', client_name: 'Cursor', client_alias: null, redirect_uris: ['http://localhost:9315/callback'], scope: null, approved: true, logo_uri: null, client_uri: null, software_id: 'cursor', software_version: '0.45.0', metadata_url: null, metadata_cached_at: null, metadata_cache_ttl: null, connection_mode: 'follow_active', locked_space_id: null, last_seen: '2026-02-07T09:30:00Z', created_at: '2026-01-20T10:00:00Z' },
  { client_id: 'vscode-001', registration_type: 'dcr', client_name: 'VS Code', client_alias: null, redirect_uris: ['http://localhost:9315/callback'], scope: null, approved: true, logo_uri: null, client_uri: null, software_id: 'vscode', software_version: '1.96.0', metadata_url: null, metadata_cached_at: null, metadata_cache_ttl: null, connection_mode: 'follow_active', locked_space_id: null, last_seen: '2026-02-07T08:45:00Z', created_at: '2026-01-22T10:00:00Z' },
];

function mkRegistry(id, name, desc, alias, icon, categories, auth, transportType, publisher, caps, hostingType, badges) {
  const source = { type: 'Registry', url: 'https://registry.mcpmux.com', name: 'Official Registry' };
  const transport = transportType === 'stdio'
    ? { type: 'stdio', command: 'npx', args: ['-y', `@modelcontextprotocol/server-${alias}`], env: {}, metadata: { inputs: [] } }
    : { type: 'http', url: `https://mcp.${alias}.com/sse`, headers: {}, metadata: { inputs: [] } };
  return { id, name, description: desc, alias, icon, categories, auth, publisher, transport, source, capabilities: caps, hosting_type: hostingType || 'local', badges: badges || [], license: 'MIT', installation: { difficulty: 'easy' } };
}

const REGISTRY_SERVERS = [
  // Installed ones (will show "Installed" in discover) — IDs match INSTALLED_SERVERS
  mkRegistry('github-mcp', 'GitHub', 'GitHub API integration — issues, PRs, repos, and code search', 'github', '🐙', ['developer-tools'], { type: 'api_key', instructions: null }, 'stdio', { name: 'Anthropic', domain: 'anthropic.com', verified: true, official: true }, { tools: true, resources: true, prompts: false }, 'local', ['official', 'verified', 'popular']),
  mkRegistry('atlassian-mcp', 'Atlassian', 'Jira issues, Confluence pages, and project management', 'atlassian', '🔷', ['productivity'], { type: 'oauth' }, 'http', { name: 'Atlassian', domain: 'atlassian.com', verified: true, official: true }, { tools: true, resources: true, prompts: false }, 'remote', ['official', 'verified']),
  mkRegistry('cloudflare-mcp', 'Cloudflare', 'Manage Workers, KV, R2, and DNS via Cloudflare API', 'cloudflare', '☁️', ['cloud'], { type: 'oauth' }, 'http', { name: 'Cloudflare', domain: 'cloudflare.com', verified: true, official: true }, { tools: true, resources: true, prompts: false }, 'remote', ['official', 'verified']),
  mkRegistry('postgres-mcp', 'PostgreSQL', 'Query databases, inspect schemas, and run SQL', 'postgres', '🐘', ['developer-tools'], { type: 'api_key', instructions: null }, 'stdio', { name: 'Anthropic', domain: 'anthropic.com', verified: true, official: true }, { tools: true, resources: true, prompts: false }, 'local', ['official', 'popular']),
  mkRegistry('azure-mcp', 'Azure DevOps', 'Azure DevOps work items, repos, and pipelines', 'azure', '🔵', ['cloud'], { type: 'oauth' }, 'http', { name: 'Microsoft', domain: 'microsoft.com', verified: true, official: true }, { tools: true, resources: true, prompts: false }, 'remote', ['official', 'verified']),
  mkRegistry('filesystem-mcp', 'Filesystem', 'Read, write, and search files on your local machine', 'filesystem', '📂', ['file-system'], { type: 'none' }, 'stdio', { name: 'Anthropic', domain: 'anthropic.com', verified: true, official: true }, { tools: true, resources: true, prompts: false }, 'local', ['official']),
  // Not installed — popular servers in the registry
  mkRegistry('slack-mcp', 'Slack', 'Send messages, search channels, and manage Slack workspaces', 'slack', '💬', ['productivity'], { type: 'oauth' }, 'http', { name: 'Slack', domain: 'slack.com', verified: true, official: true }, { tools: true, resources: false, prompts: true }, 'remote', ['official', 'verified', 'popular']),
  mkRegistry('gdrive-mcp', 'Google Drive', 'Search and read files from Google Drive', 'gdrive', '📁', ['cloud'], { type: 'oauth' }, 'stdio', { name: 'Google', domain: 'google.com', verified: true, official: true }, { tools: true, resources: true, prompts: false }, 'remote', ['official', 'popular']),
  mkRegistry('stripe-mcp', 'Stripe', 'Manage payments, subscriptions, and invoices', 'stripe', '💳', ['developer-tools'], { type: 'api_key', instructions: null }, 'http', { name: 'Stripe', domain: 'stripe.com', verified: true, official: true }, { tools: true, resources: false, prompts: false }, 'remote', ['official', 'verified']),
  mkRegistry('linear-mcp', 'Linear', 'Manage issues, projects, and teams in Linear', 'linear', '📐', ['productivity'], { type: 'api_key', instructions: null }, 'http', { name: 'Linear', domain: 'linear.app', verified: true, official: true }, { tools: true, resources: false, prompts: false }, 'remote', ['verified']),
  mkRegistry('sentry-mcp', 'Sentry', 'Search and analyze errors and performance issues', 'sentry', '🔥', ['developer-tools'], { type: 'api_key', instructions: null }, 'stdio', { name: 'Sentry', domain: 'sentry.io', verified: true, official: false }, { tools: true, resources: false, prompts: false }, 'local', ['verified']),
  mkRegistry('notion-mcp', 'Notion', 'Read and search Notion pages and databases', 'notion', '📝', ['productivity'], { type: 'api_key', instructions: null }, 'stdio', { name: 'Notion', domain: 'notion.so', verified: true, official: false }, { tools: true, resources: true, prompts: false }, 'local', ['verified', 'popular']),
  mkRegistry('datadog-mcp', 'Datadog', 'Monitor infrastructure, APM traces, and logs', 'datadog', '🐶', ['developer-tools'], { type: 'api_key', instructions: null }, 'http', { name: 'Datadog', domain: 'datadoghq.com', verified: true, official: true }, { tools: true, resources: true, prompts: false }, 'remote', ['official']),
  mkRegistry('mongodb-mcp', 'MongoDB', 'Query collections, manage indexes, and run aggregations', 'mongodb', '🍃', ['developer-tools'], { type: 'api_key', instructions: null }, 'stdio', { name: 'MongoDB', domain: 'mongodb.com', verified: true, official: true }, { tools: true, resources: true, prompts: false }, 'local', ['official', 'verified']),
  mkRegistry('puppeteer-mcp', 'Puppeteer', 'Browser automation — navigate, screenshot, and interact with web pages', 'puppeteer', '🎭', ['developer-tools'], { type: 'none' }, 'stdio', { name: 'Anthropic', domain: 'anthropic.com', verified: true, official: true }, { tools: true, resources: false, prompts: false }, 'local', ['official']),
  mkRegistry('memory-mcp', 'Memory', 'Persistent memory using a knowledge graph', 'memory', '🧠', ['developer-tools'], { type: 'none' }, 'stdio', { name: 'Anthropic', domain: 'anthropic.com', verified: true, official: true }, { tools: true, resources: false, prompts: false }, 'local', ['official']),
];

const REGISTRY_CATEGORIES = [
  { id: 'developer-tools', name: 'Developer Tools', icon: '💻' },
  { id: 'file-system', name: 'File System', icon: '📂' },
  { id: 'cloud', name: 'Cloud', icon: '☁️' },
  { id: 'productivity', name: 'Productivity', icon: '⚡' },
  { id: 'search', name: 'Search', icon: '🔍' },
];

const UI_CONFIG = {
  filters: [
    { id: 'category', label: 'Category', type: 'single', options: [
      { id: 'all', label: 'All Categories' },
      { id: 'developer-tools', label: 'Developer Tools', icon: '💻', match: { field: 'categories', operator: 'contains', value: 'developer-tools' } },
      { id: 'cloud', label: 'Cloud', icon: '☁️', match: { field: 'categories', operator: 'contains', value: 'cloud' } },
      { id: 'productivity', label: 'Productivity', icon: '⚡', match: { field: 'categories', operator: 'contains', value: 'productivity' } },
    ]},
    { id: 'auth', label: 'Auth Required', type: 'single', options: [
      { id: 'all', label: 'All' },
      { id: 'none', label: 'No Auth', match: { field: 'auth.type', operator: 'eq', value: 'none' } },
      { id: 'api_key', label: 'API Key', match: { field: 'auth.type', operator: 'eq', value: 'api_key' } },
      { id: 'oauth', label: 'OAuth', match: { field: 'auth.type', operator: 'eq', value: 'oauth' } },
    ]},
  ],
  sort_options: [{ id: 'name_asc', label: 'Name A-Z', rules: [{ field: 'name', direction: 'asc' }] }],
  default_sort: 'name_asc',
  items_per_page: 24,
};

const HOME_CONFIG = { featured_server_ids: ['github-mcp', 'slack-mcp', 'postgres-mcp', 'cloudflare-mcp', 'stripe-mcp', 'atlassian-mcp'] };

// ── IPC Mock Handler ───────────────────────────────────────

function buildMockHandler() {
  return `
    window.__TAURI_INTERNALS__ = window.__TAURI_INTERNALS__ || {};
    window.__TAURI_EVENT_PLUGIN_INTERNALS__ = window.__TAURI_EVENT_PLUGIN_INTERNALS__ || {};

    const SPACES = ${JSON.stringify(SPACES)};
    const INSTALLED = ${JSON.stringify(INSTALLED_SERVERS)};
    const FEATURES = ${JSON.stringify(SERVER_FEATURES)};
    const STATUSES = ${JSON.stringify(SERVER_STATUSES)};
    const FSETS = ${JSON.stringify(FEATURE_SETS)};
    const OAUTH = ${JSON.stringify(OAUTH_CLIENTS)};
    const REGISTRY = ${JSON.stringify(REGISTRY_SERVERS)};
    const CATEGORIES = ${JSON.stringify(REGISTRY_CATEGORIES)};
    const UI_CFG = ${JSON.stringify(UI_CONFIG)};
    const HOME_CFG = ${JSON.stringify(HOME_CONFIG)};

    const listeners = new Map();

    window.__TAURI_INTERNALS__.invoke = async function(cmd, args) {
      switch (cmd) {
        case 'list_spaces': return SPACES;
        case 'get_active_space': return SPACES[0];
        case 'get_space': return SPACES.find(s => s.id === args?.id) || SPACES[0];
        case 'set_active_space': return null;
        case 'create_space': return { id: crypto.randomUUID(), name: args?.name, icon: args?.icon, description: null, is_default: false, sort_order: 3, created_at: new Date().toISOString(), updated_at: new Date().toISOString() };
        case 'get_gateway_status': return { running: true, url: 'http://localhost:9315', active_sessions: 2, connected_backends: 6 };
        case 'start_gateway': return null;
        case 'stop_gateway': return null;
        case 'list_installed_servers': return INSTALLED;
        case 'discover_servers': return REGISTRY;
        case 'get_registry_ui_config': return UI_CFG;
        case 'get_registry_home_config': return HOME_CFG;
        case 'is_registry_offline': return false;
        case 'list_registry_categories': return CATEGORIES;
        case 'get_server_definition': return REGISTRY.find(s => s.id === args?.serverId);
        case 'install_server': return null;
        case 'uninstall_server': return null;
        case 'get_server_statuses': return STATUSES;
        case 'list_server_features': return FEATURES;
        case 'list_server_features_by_server': return FEATURES.filter(f => f.server_id === args?.serverId);
        case 'list_server_features_by_type': return FEATURES.filter(f => f.feature_type === args?.featureType);
        case 'list_feature_sets': return FSETS;
        case 'list_feature_sets_by_space': return FSETS;
        case 'get_builtin_feature_sets': return FSETS.filter(f => f.is_builtin);
        case 'get_oauth_clients': return OAUTH;
        case 'list_clients': return [];
        case 'get_all_client_grants': return {};
        case 'get_oauth_client_grants': return {};
        case 'refresh_oauth_tokens_on_startup': return { servers_checked: 2, tokens_refreshed: 1, refresh_failed: 0 };
        case 'connect_all_enabled_servers': return { connected: 6, reused: 0, failed: 0, oauth_required: 0, errors: [] };
        case 'get_pool_stats': return { total_instances: 6, connected_instances: 6, total_space_server_mappings: 6 };
        case 'get_server_logs': return [];
        case 'get_server_log_file': return '/home/user/.local/share/com.mcpmux.desktop/logs';
        case 'export_config': return '{}';
        case 'init_preset_clients': return null;
        case 'get_logs_path': return '/home/user/.local/share/com.mcpmux.desktop/logs';
        case 'get_startup_settings': return { autoLaunch: true, startMinimized: false, closeToTray: true };
        case 'update_startup_settings': return null;
        case 'open_logs_folder': return null;
        case 'get_version': return '0.1.0';
        case 'plugin:updater|check': throw new Error('no update');
        case 'plugin:updater|download_and_install': throw new Error('no update');
        default:
          if (cmd.startsWith('plugin:')) return null;
          console.log('[mock] unhandled:', cmd, args);
          return null;
      }
    };

    window.__TAURI_INTERNALS__.transformCallback = function(cb, once) {
      const id = Math.floor(Math.random() * 2147483647);
      window.__TAURI_INTERNALS__._cbs = window.__TAURI_INTERNALS__._cbs || {};
      window.__TAURI_INTERNALS__._cbs[id] = cb;
      return id;
    };
    window.__TAURI_INTERNALS__.unregisterCallback = function(id) {
      if (window.__TAURI_INTERNALS__._cbs) delete window.__TAURI_INTERNALS__._cbs[id];
    };
    window.__TAURI_INTERNALS__.runCallback = function(id, data) {
      const cb = window.__TAURI_INTERNALS__._cbs?.[id];
      if (cb) cb(data);
    };
    window.__TAURI_INTERNALS__.callbacks = new Map();

    window.__TAURI_EVENT_PLUGIN_INTERNALS__.unregisterListener = function() {};
    window.__TAURI_INTERNALS__.metadata = { currentWindow: { label: 'main' }, currentWebview: { windowLabel: 'main', label: 'main' } };
  `;
}

// ── Screenshot logic ───────────────────────────────────────

(async () => {
  const browser = await chromium.launch({
    headless: true,
    executablePath: '/root/.cache/ms-playwright/chromium-1194/chrome-linux/chrome',
    args: ['--no-sandbox', '--disable-setuid-sandbox', '--disable-gpu', '--disable-dev-shm-usage', '--disable-software-rasterizer', '--single-process', '--no-zygote'],
  });

  const ctx = await browser.newContext({
    viewport: { width: 1280, height: 800 },
    deviceScaleFactor: 2,
    colorScheme: 'light',
  });

  const page = await ctx.newPage();
  await page.addInitScript(buildMockHandler());

  // Logo mapping: emoji → local SVG path served by Vite
  const LOGO_MAP = {
    '🐙': '/logos/github.svg',
    '🔷': '/logos/atlassian.svg',
    '☁️': '/logos/cloudflare.svg',
    '🐘': '/logos/postgresql.svg',
    '🔵': '/logos/azure.svg',
    '📂': '/logos/filesystem.svg',
    '💬': '/logos/slack.svg',
    '📁': '/logos/gdrive.svg',
    '💳': '/logos/stripe.svg',
    '📐': '/logos/linear.svg',
    '🔥': '/logos/sentry.svg',
    '📝': '/logos/notion.svg',
    '🐶': '/logos/datadog.svg',
    '🍃': '/logos/mongodb.svg',
    '🎭': '/logos/puppeteer.svg',
    '🧠': '/logos/memory.svg',
    '🔍': '/logos/filesystem.svg',
  };

  async function injectLogos() {
    await page.evaluate((logoMap) => {
      const allDivs = document.querySelectorAll('div');
      for (const div of allDivs) {
        const text = div.textContent?.trim();
        if (!text || !logoMap[text]) continue;
        // Only target leaf divs (no child elements, just text)
        if (div.children.length > 0) continue;
        const rect = div.getBoundingClientRect();
        // Icon containers are small: Servers page ~40px, Discover page ~30px
        if (rect.width < 10 || rect.width > 55) continue;
        const logoUrl = logoMap[text];
        const size = Math.min(rect.width, rect.height) * 0.7;
        div.innerHTML = `<img src="${logoUrl}" style="width:${size}px;height:${size}px;object-fit:contain;" />`;
        div.style.display = 'flex';
        div.style.alignItems = 'center';
        div.style.justifyContent = 'center';
        div.style.overflow = 'hidden';
      }
    }, LOGO_MAP);
    await page.waitForTimeout(500);
  }

  async function shot(name) {
    await page.waitForTimeout(800);
    await injectLogos();
    await page.screenshot({ path: `${DIR}/${name}.png` });
    console.log(`  ok  ${name}`);
  }

  console.log('Taking screenshots (light theme)...\n');

  // 1. Dashboard
  await page.goto(BASE_URL);
  await page.waitForLoadState('networkidle');
  await shot('dashboard');

  // 2. My Servers
  await page.locator('nav button:has-text("My Servers")').click({ force: true });
  await page.waitForLoadState('networkidle');
  await shot('servers');

  // 3. Discover / Registry
  await page.locator('nav button:has-text("Discover")').click({ force: true });
  await page.waitForLoadState('networkidle');
  await shot('discover');

  // 4. Spaces
  await page.locator('nav button:has-text("Spaces")').last().click({ force: true });
  await page.waitForLoadState('networkidle');
  await shot('spaces');

  // 5. Feature Sets
  await page.locator('nav button:has-text("FeatureSets")').click({ force: true });
  await page.waitForLoadState('networkidle');
  await shot('featuresets');

  // 6. Clients
  await page.locator('nav button:has-text("Clients")').click({ force: true });
  await page.waitForLoadState('networkidle');
  await shot('clients');

  // 7. Settings
  await page.locator('nav button:has-text("Settings")').click({ force: true });
  await page.waitForLoadState('networkidle');
  await page.waitForTimeout(1000);
  await shot('settings');

  await browser.close();
  console.log('\nDone!');
})();