<!doctype html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
  <title>Windsurf Chat</title>
  <link rel="icon" href="windsurf/out/media/code-iconsvg.svg" type="image/svg+xml" />
  <link rel="stylesheet" href="standalone.css" />
  <style>
    /* VS Code-style Configuration Modal */
    .ws-config-overlay {
      position: fixed;
      inset: 0;
      z-index: 99999;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(2px);
    }

    .ws-config-panel {
      width: min(520px, calc(100vw - 32px));
      max-height: calc(100vh - 64px);
      background: var(--vscode-editor-background, #1e1e1e);
      border: 1px solid var(--vscode-commandCenter-border, #3c3c3c);
      border-radius: 8px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .ws-config-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      border-bottom: 1px solid var(--vscode-commandCenter-border, #3c3c3c);
      background: var(--vscode-sideBar-background, #252526);
    }

    .ws-config-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--vscode-foreground, #cccccc);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .ws-config-title svg {
      width: 18px;
      height: 18px;
      fill: currentColor;
    }

    .ws-config-close {
      background: transparent;
      border: none;
      color: var(--vscode-foreground, #cccccc);
      cursor: pointer;
      padding: 4px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0.7;
      transition: opacity 0.15s, background 0.15s;
    }

    .ws-config-close:hover {
      opacity: 1;
      background: var(--vscode-toolbar-hoverBackground, rgba(90, 93, 94, 0.31));
    }

    .ws-config-body {
      padding: 16px;
      overflow-y: auto;
      flex: 1;
    }

    .ws-config-section {
      margin-bottom: 20px;
    }

    .ws-config-section:last-child {
      margin-bottom: 0;
    }

    .ws-config-section-title {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--vscode-descriptionForeground, #9d9d9d);
      margin-bottom: 12px;
      padding-bottom: 6px;
      border-bottom: 1px solid var(--vscode-commandCenter-border, #3c3c3c);
    }

    .ws-config-field {
      margin-bottom: 14px;
    }

    .ws-config-field:last-child {
      margin-bottom: 0;
    }

    .ws-config-label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 13px;
      color: var(--vscode-foreground, #cccccc);
      margin-bottom: 6px;
    }

    .ws-config-label-text {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .ws-config-required {
      color: var(--vscode-errorForeground, #f48771);
      font-size: 11px;
    }

    .ws-config-hint {
      font-size: 11px;
      color: var(--vscode-descriptionForeground, #9d9d9d);
    }

    .ws-config-input {
      width: 100%;
      background: var(--vscode-input-background, #3c3c3c);
      color: var(--vscode-input-foreground, #f0f0f0);
      border: 1px solid transparent;
      border-radius: 4px;
      padding: 8px 10px;
      font-size: 13px;
      font-family: inherit;
      outline: none;
      transition: border-color 0.15s;
      box-sizing: border-box;
    }

    .ws-config-input::placeholder {
      color: var(--vscode-input-placeholderForeground, #a6a6a6);
    }

    .ws-config-input:focus {
      border-color: var(--vscode-focusBorder, #007acc);
    }

    .ws-config-input.error {
      border-color: var(--vscode-errorForeground, #f48771);
    }

    .ws-config-input-row {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .ws-config-input-row .ws-config-input {
      flex: 1;
    }

    .ws-config-toggle-btn {
      background: var(--vscode-button-secondaryBackground, #3a3d41);
      color: var(--vscode-button-secondaryForeground, #ffffff);
      border: none;
      border-radius: 4px;
      padding: 8px 10px;
      cursor: pointer;
      font-size: 12px;
      white-space: nowrap;
      transition: background 0.15s;
    }

    .ws-config-toggle-btn:hover {
      background: var(--vscode-button-secondaryHoverBackground, #45494e);
    }

    .ws-config-select {
      width: 100%;
      background: var(--vscode-input-background, #3c3c3c);
      color: var(--vscode-input-foreground, #f0f0f0);
      border: 1px solid transparent;
      border-radius: 4px;
      padding: 8px 10px;
      font-size: 13px;
      font-family: inherit;
      outline: none;
      cursor: pointer;
    }

    .ws-config-select:focus {
      border-color: var(--vscode-focusBorder, #007acc);
    }

    .ws-config-checkbox-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 0;
    }

    .ws-config-checkbox {
      width: 16px;
      height: 16px;
      accent-color: var(--vscode-progressBar-background, #0e70c0);
      cursor: pointer;
    }

    .ws-config-checkbox-label {
      font-size: 13px;
      color: var(--vscode-foreground, #cccccc);
      cursor: pointer;
    }

    .ws-config-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      border-top: 1px solid var(--vscode-commandCenter-border, #3c3c3c);
      background: var(--vscode-sideBar-background, #252526);
      gap: 12px;
    }

    .ws-config-footer-left {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .ws-config-footer-right {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .ws-config-btn {
      background: var(--vscode-button-background, #0e639c);
      color: var(--vscode-button-foreground, #ffffff);
      border: none;
      border-radius: 4px;
      padding: 8px 16px;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.15s;
    }

    .ws-config-btn:hover {
      background: var(--vscode-button-hoverBackground, #1177bb);
    }

    .ws-config-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .ws-config-btn.secondary {
      background: var(--vscode-button-secondaryBackground, #3a3d41);
      color: var(--vscode-button-secondaryForeground, #ffffff);
    }

    .ws-config-btn.secondary:hover {
      background: var(--vscode-button-secondaryHoverBackground, #45494e);
    }

    .ws-config-btn.danger {
      background: #5a1d1d;
      color: #f48771;
    }

    .ws-config-btn.danger:hover {
      background: #6d2222;
    }

    .ws-config-status {
      font-size: 12px;
      color: var(--vscode-descriptionForeground, #9d9d9d);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .ws-config-status.success {
      color: #89d185;
    }

    .ws-config-status.error {
      color: var(--vscode-errorForeground, #f48771);
    }

    .ws-config-divider {
      height: 1px;
      background: var(--vscode-commandCenter-border, #3c3c3c);
      margin: 16px 0;
    }

    .ws-config-info {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 10px 12px;
      background: rgba(55, 148, 255, 0.1);
      border: 1px solid rgba(55, 148, 255, 0.2);
      border-radius: 6px;
      font-size: 12px;
      color: var(--vscode-foreground, #cccccc);
      line-height: 1.5;
    }

    .ws-config-info svg {
      flex-shrink: 0;
      width: 16px;
      height: 16px;
      fill: var(--vscode-textLink-foreground, #3794ff);
      margin-top: 1px;
    }

    .ws-config-collapsible {
      border: 1px solid var(--vscode-commandCenter-border, #3c3c3c);
      border-radius: 6px;
      overflow: hidden;
      margin-bottom: 12px;
    }

    .ws-config-collapsible-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 12px;
      background: var(--vscode-sideBar-background, #252526);
      cursor: pointer;
      font-size: 13px;
      color: var(--vscode-foreground, #cccccc);
      user-select: none;
    }

    .ws-config-collapsible-header:hover {
      background: var(--vscode-list-hoverBackground, #2a2d2e);
    }

    .ws-config-collapsible-icon {
      transition: transform 0.2s;
    }

    .ws-config-collapsible.expanded .ws-config-collapsible-icon {
      transform: rotate(90deg);
    }

    .ws-config-collapsible-content {
      display: none;
      padding: 12px;
      background: var(--vscode-editor-background, #1e1e1e);
    }

    .ws-config-collapsible.expanded .ws-config-collapsible-content {
      display: block;
    }

    /* Disclaimer Banner */
    .ws-disclaimer-banner {
      background: rgba(255, 193, 7, 0.15);
      border: 1px solid rgba(255, 193, 7, 0.3);
      border-radius: 6px;
      padding: 12px 16px;
      margin-bottom: 16px;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 12px;
      color: var(--vscode-foreground, #cccccc);
      line-height: 1.5;
    }

    .ws-disclaimer-banner svg {
      flex-shrink: 0;
      width: 16px;
      height: 16px;
      fill: #ffc107;
      margin-top: 1px;
    }

    .ws-disclaimer-text {
      flex: 1;
    }

    .ws-disclaimer-text strong {
      color: #ffc107;
      font-weight: 600;
    }

    @media (max-width: 40rem) {
      .ws-config-overlay {
        align-items: flex-end;
        justify-content: stretch;
        padding: 0;
      }

      .ws-config-panel {
        width: 100vw;
        max-height: 90dvh;
        border-radius: 12px 12px 0 0;
        display: flex;
        flex-direction: column;
      }

      .ws-config-header {
        padding-top: calc(12px + env(safe-area-inset-top));
      }

      .ws-config-body {
        padding: 14px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex: 1;
        min-height: 0;
      }

      .ws-config-footer {
        flex-direction: column;
        align-items: stretch;
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
        flex-shrink: 0;
        gap: 8px;
      }

      .ws-config-footer-left,
      .ws-config-footer-right {
        width: 100%;
        justify-content: stretch;
      }

      .ws-config-footer-right {
        flex-direction: column;
      }

      .ws-config-btn {
        width: 100%;
        min-height: 44px;
        padding: 10px 16px;
      }

      .ws-config-input-row {
        flex-direction: column;
        align-items: stretch;
      }

      .ws-config-toggle-btn {
        width: 100%;
        min-height: 44px;
        padding: 10px 10px;
      }

      /* iOS focus zoom fix: inputs must be >= 16px */
      .ws-config-input,
      .ws-config-select {
        font-size: 16px;
        line-height: 1.5;
        min-height: 44px;
        padding: 12px 10px;
      }

      .ws-config-checkbox {
        width: 20px;
        height: 20px;
        margin: 2px 8px 0 0;
      }

      .ws-config-checkbox-label {
        font-size: 14px;
        line-height: 1.5;
        padding: 10px 0;
        min-height: 44px;
        display: flex;
        align-items: center;
      }

      .ws-config-close {
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
      }

      .ws-config-collapsible-header {
        min-height: 44px;
        padding: 12px;
      }
    }
  </style>
</head>

<body style="margin: 0">
  <div id="react-app" class="react-app-container"></div>
  <script src="windsurf-statusbar-settings-panel.js?v=6"></script>
  <script src="standalone.js?v=6"></script>
  <script>
    document.body.classList.add('vscode-dark');

    const STORAGE_KEY = 'windsurfChatParams';

    // Default chatParams template
    const DEFAULT_PARAMS = {
      apiKey: "",
      extensionName: "windsurf",
      extensionVersion: "1.48.2",
      ideName: "windsurf",
      ideVersion: "1.12.47",
      locale: "en",
      hasEnterpriseExtension: false,
      languageServerUrl: "http://127.0.0.1:62556/",
      authToken: "",
      hasDevExtension: false,
      hasIndexService: false,
      cascadeInitPrompt: "",
      csrfToken: "",
      ideVersionWithBuildInfo: "1.12.47",
      osName: "mac",
      architecture: "arm64",
      initCascadeId: "",
      isRemoteConnection: false,
      impersonateTier: ""
    };

    const documentRoot = document.documentElement;
    const setVar = (k, v) => documentRoot.style.setProperty(k, v);

    // VS Code CSS variables
    setVar('--vscode-font-family', '-apple-system, BlinkMacSystemFont, Segoe UI, sans-serif');
    setVar('--vscode-font-size', '13px');
    setVar('--vscode-font-weight', '400');
    setVar('--vscode-editor-background', '#1e1e1e');
    setVar('--vscode-editor-foreground', '#d4d4d4');
    setVar('--vscode-foreground', '#cccccc');
    setVar('--vscode-sideBar-background', '#252526');
    setVar('--vscode-panel-background', '#1e1e1e');
    setVar('--vscode-textLink-foreground', '#3794ff');
    setVar('--vscode-textLink-activeForeground', '#4aa8ff');
    setVar('--vscode-list-activeSelectionBackground', '#094771');
    setVar('--vscode-list-activeSelectionForeground', '#ffffff');
    setVar('--vscode-list-inactiveSelectionBackground', '#37373d');
    setVar('--vscode-list-hoverBackground', '#2a2d2e');
    setVar('--vscode-input-background', '#3c3c3c');
    setVar('--vscode-input-foreground', '#f0f0f0');
    setVar('--vscode-input-placeholderForeground', '#a6a6a6');
    setVar('--vscode-inputOption-activeBackground', '#094771');
    setVar('--vscode-inputOption-activeForeground', '#ffffff');
    setVar('--vscode-inputOption-activeBorder', '#007acc');
    setVar('--vscode-button-background', '#0e639c');
    setVar('--vscode-button-foreground', '#ffffff');
    setVar('--vscode-button-hoverBackground', '#1177bb');
    setVar('--vscode-button-secondaryBackground', '#3a3d41');
    setVar('--vscode-button-secondaryForeground', '#ffffff');
    setVar('--vscode-button-secondaryHoverBackground', '#45494e');
    setVar('--vscode-focusBorder', '#007acc');
    setVar('--vscode-icon-foreground', '#c5c5c5');
    setVar('--vscode-sideBarTitle-foreground', '#bbbbbb');
    setVar('--vscode-disabledForeground', '#7f7f7f');
    setVar('--vscode-descriptionForeground', '#9d9d9d');
    setVar('--vscode-scrollbarSlider-background', 'rgba(121, 121, 121, 0.4)');
    setVar('--vscode-scrollbarSlider-hoverBackground', 'rgba(100, 100, 100, 0.7)');
    setVar('--vscode-scrollbarSlider-activeBackground', 'rgba(191, 191, 191, 0.4)');
    setVar('--vscode-textPreformat-foreground', '#d4d4d4');
    setVar('--vscode-textPreformat-background', 'rgba(255,255,255,0.1)');
    setVar('--vscode-editorHoverWidget-background', '#252526');
    setVar('--vscode-editorHoverWidget-foreground', '#cccccc');
    setVar('--vscode-editorHoverWidget-border', '#454545');
    setVar('--vscode-textBlockQuote-background', 'rgba(127,127,127,0.1)');
    setVar('--vscode-textBlockQuote-border', 'rgba(127,127,127,0.4)');
    setVar('--vscode-editor-findMatchBackground', 'rgba(234, 92, 0, 0.33)');
    setVar('--vscode-editor-findMatchHighlightBackground', 'rgba(234, 92, 0, 0.2)');
    setVar('--vscode-widget-shadow', 'rgba(0,0,0,0.36)');
    setVar('--vscode-quickInput-background', '#252526');
    setVar('--vscode-quickInput-foreground', '#cccccc');
    setVar('--vscode-commandCenter-border', '#3c3c3c');
    setVar('--vscode-panelTitle-inactiveForeground', 'rgba(231, 231, 231, 0.6)');
    setVar('--vscode-panelTitle-activeForeground', '#e7e7e7');
    setVar('--vscode-toolbar-hoverBackground', 'rgba(90, 93, 94, 0.31)');
    setVar('--vscode-keybindingLabel-background', '#3c3c3c');
    setVar('--vscode-keybindingLabel-foreground', '#cccccc');
    setVar('--vscode-badge-background', '#4d4d4d');
    setVar('--vscode-badge-foreground', '#ffffff');
    setVar('--vscode-progressBar-background', '#0e70c0');
    setVar('--vscode-statusBarItem-warningForeground', '#f0f0f0');
    setVar('--vscode-toolbar-activeBackground', 'rgba(90, 93, 94, 0.16)');
    setVar('--vscode-errorForeground', '#f48771');
  </script>
  <script>
    let __vscodeState;
    const __vscodeApi = Object.freeze({
      postMessage: () => { },
      setState: (next) => { __vscodeState = next; },
      getState: () => __vscodeState,
    });
    if (typeof window.acquireVsCodeApi === 'undefined') {
      window.acquireVsCodeApi = () => __vscodeApi;
    }

    const encodeBase64Utf8 = (str) => {
      try {
        return btoa(unescape(encodeURIComponent(str)));
      } catch {
        return btoa(str);
      }
    };

    const decodeBase64Utf8 = (str) => {
      try {
        return atob(str);
      } catch {
        return str;
      }
    };

    const getUrlParameter = (name) => {
      const url = new URL(window.location);
      return url.searchParams.get(name);
    };

    const removeUrlParameter = (param) => {
      const url = new URL(window.location);
      url.searchParams.delete(param);
      window.history.replaceState({}, document.title, url.pathname + url.search);
    };

    const getOrCreateId = (storageKey) => {
      try {
        const existing = localStorage.getItem(storageKey);
        if (existing && typeof existing === 'string' && existing.trim()) return existing;
      } catch { }
      let id = '';
      try {
        id = typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function' ? crypto.randomUUID() : '';
      } catch { }
      if (!id) {
        id = `ws-${Math.random().toString(16).slice(2)}-${Date.now().toString(16)}`;
      }
      try {
        localStorage.setItem(storageKey, id);
      } catch { }
      return id;
    };

    const loadStoredParams = () => {
      try {
        const stored = localStorage.getItem(STORAGE_KEY);
        if (stored) {
          const parsed = JSON.parse(stored);
          // Merge with DEFAULT_PARAMS to ensure all required fields are present
          const merged = { ...DEFAULT_PARAMS, ...parsed };
          console.log('[Windsurf Config] Loaded configuration from localStorage:', { languageServerUrl: merged.languageServerUrl, hasAuthToken: !!merged.authToken, apiKey: !!merged.apiKey, csrfToken: !!merged.csrfToken });
          return merged;
        }
      } catch (e) {
        console.warn('Failed to load chatParams from localStorage', e);
      }
      console.log('[Windsurf Config] No stored configuration found');
      return null;
    };

    const saveParams = (params) => {
      try {
        localStorage.setItem(STORAGE_KEY, JSON.stringify(params));
        // Clear any standalone overrides that might conflict
        localStorage.removeItem('windsurfStandalone.chatParamsOverride');
        sessionStorage.removeItem('windsurfStandalone.chatParamsOverrideSession');
        console.log('[Windsurf Config] Saved configuration to localStorage:', { languageServerUrl: params.languageServerUrl, hasAuthToken: !!params.authToken });
      } catch (e) {
        console.warn('Failed to save chatParams to localStorage', e);
      }
    };

    const clearParams = () => {
      try {
        localStorage.removeItem(STORAGE_KEY);
        localStorage.removeItem('windsurfStandalone.userId');
        localStorage.removeItem('windsurfStandalone.installationId');
        // Clear standalone overrides as well
        localStorage.removeItem('windsurfStandalone.chatParamsOverride');
        sessionStorage.removeItem('windsurfStandalone.chatParamsOverrideSession');
      } catch (e) {
        console.warn('Failed to clear chatParams from localStorage', e);
      }
    };

    // SVG Icons
    const ICONS = {
      settings: `<svg viewBox="0 0 24 24"><path d="M19.14 12.94c.04-.31.06-.63.06-.94 0-.31-.02-.63-.06-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.49.49 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>`,
      close: `<svg viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>`,
      info: `<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>`,
      chevron: `<svg viewBox="0 0 24 24" width="12" height="12"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>`,
      windsurf: `<svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>`,
      warning: `<svg viewBox="0 0 24 24"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>`
    };



    const createConfigModal = (existingParams = null) => {
      return new Promise((resolve) => {
        const params = existingParams || { ...DEFAULT_PARAMS };

        const overlay = document.createElement('div');
        overlay.className = 'ws-config-overlay';
        overlay.innerHTML = `
              <div class="ws-config-panel">
                <div class="ws-config-header">
                  <div class="ws-config-title">
                    ${ICONS.windsurf}
                    <span>Windsurf Configuration</span>
                  </div>
                  <button class="ws-config-close" id="wsConfigClose" title="Close">
                    ${ICONS.close}
                  </button>
                </div>
                <div class="ws-config-body">
                  <div class="ws-disclaimer-banner">
                    ${ICONS.warning}
                    <div class="ws-disclaimer-text">
                      <strong>Disclaimer:</strong> This is an unofficial, community-created web interface for Windsurf. It is not affiliated with, endorsed by, or supported by Codeium or the official Windsurf team.
                    </div>
                  </div>

                  <div class="ws-config-info">
                    ${ICONS.info}
                    <div>Configure your Windsurf credentials and settings. These are stored locally in your browser and never sent to any server except Windsurf's API.</div>
                  </div>

                  <div class="ws-config-divider"></div>
                  
                  <div class="ws-config-section">
                    <div class="ws-config-section-title">Authentication</div>
                    
                    <div class="ws-config-field">
                      <label class="ws-config-label">
                        <span class="ws-config-label-text">API Key <span class="ws-config-required">*</span></span>
                      </label>
                      <div class="ws-config-input-row">
                        <input type="password" class="ws-config-input" id="wsApiKey" placeholder="sk-ws-01-..." value="${params.apiKey || ''}" autocomplete="off" spellcheck="false" />
                        <button type="button" class="ws-config-toggle-btn" id="wsToggleApiKey">Show</button>
                      </div>
                    </div>
                    
                    <div class="ws-config-field">
                      <label class="ws-config-label">
                        <span class="ws-config-label-text">CSRF Token <span class="ws-config-required">*</span></span>
                      </label>
                      <div class="ws-config-input-row">
                        <input type="password" class="ws-config-input" id="wsCsrfToken" placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" value="${params.csrfToken || ''}" autocomplete="off" spellcheck="false" />
                        <button type="button" class="ws-config-toggle-btn" id="wsToggleCsrf">Show</button>
                      </div>
                    </div>
                  </div>
                  
                  <div class="ws-config-section">
                    <div class="ws-config-section-title">Connection</div>
                    
                    <div class="ws-config-field">
                      <label class="ws-config-label">
                        <span class="ws-config-label-text">Language Server URL</span>
                        <span class="ws-config-hint">Local proxy endpoint</span>
                      </label>
                      <input type="text" class="ws-config-input" id="wsLanguageServerUrl" placeholder="http://127.0.0.1:62556/" value="${params.languageServerUrl || 'http://127.0.0.1:62556/'}" autocomplete="off" spellcheck="false" />
                      <div class="ws-config-hint" style="margin-top: 6px; font-size: 11px; color: var(--vscode-descriptionForeground);">
                        💡 <strong>For deployed version:</strong> Use tunneling services like <a href="https://developers.cloudflare.com/cloudflare-one/connections/connect-apps/install-and-setup/tunnel-guide/" target="_blank" style="color: var(--vscode-textLink-foreground);">Cloudflare Tunnel</a> (recommended), 
                        <a href="https://ngrok.com" target="_blank" style="color: var(--vscode-textLink-foreground);">ngrok</a>, or 
                        <a href="https://localtunnel.github.io/www/" target="_blank" style="color: var(--vscode-textLink-foreground);">localtunnel</a> to expose your local server.
                        <br><br>
                        💡 <strong>Using Cloudflare Tunnel?</strong> CORS headers are added automatically by the setup script. Just use your tunnel URL directly!
                      </div>
                    </div>
                    
                    <div class="ws-config-field">
                      <label class="ws-config-label">
                        <span class="ws-config-label-text">Authorization Token</span>
                        <span class="ws-config-hint">For secure proxy access</span>
                      </label>
                      <input type="password" class="ws-config-input" id="wsAuthToken" placeholder="Auto-generated from QR code" value="${params.authToken || ''}" autocomplete="off" spellcheck="false" />
                      <div class="ws-config-hint" style="margin-top: 6px; font-size: 11px; color: var(--vscode-descriptionForeground);">
                        🔐 This token secures your proxy server. Keep it secret!
                      </div>
                    </div>
                  </div>
                  
                  <div class="ws-config-collapsible" id="wsAdvancedSection">
                    <div class="ws-config-collapsible-header">
                      <span>Advanced Settings</span>
                      <span class="ws-config-collapsible-icon">${ICONS.chevron}</span>
                    </div>
                    <div class="ws-config-collapsible-content">
                      <div class="ws-config-field">
                        <label class="ws-config-label">
                          <span class="ws-config-label-text">Extension Version</span>
                        </label>
                        <input type="text" class="ws-config-input" id="wsExtensionVersion" value="${params.extensionVersion || '1.48.2'}" />
                      </div>
                      
                      <div class="ws-config-field">
                        <label class="ws-config-label">
                          <span class="ws-config-label-text">IDE Version</span>
                        </label>
                        <input type="text" class="ws-config-input" id="wsIdeVersion" value="${params.ideVersion || '1.12.47'}" />
                      </div>
                      
                      <div class="ws-config-field">
                        <label class="ws-config-label">
                          <span class="ws-config-label-text">OS Name</span>
                        </label>
                        <select class="ws-config-select" id="wsOsName">
                          <option value="mac" ${params.osName === 'mac' ? 'selected' : ''}>macOS</option>
                          <option value="windows" ${params.osName === 'windows' ? 'selected' : ''}>Windows</option>
                          <option value="linux" ${params.osName === 'linux' ? 'selected' : ''}>Linux</option>
                        </select>
                      </div>
                      
                      <div class="ws-config-field">
                        <label class="ws-config-label">
                          <span class="ws-config-label-text">Architecture</span>
                        </label>
                        <select class="ws-config-select" id="wsArchitecture">
                          <option value="arm64" ${params.architecture === 'arm64' ? 'selected' : ''}>ARM64</option>
                          <option value="x64" ${params.architecture === 'x64' ? 'selected' : ''}>x64</option>
                        </select>
                      </div>
                      
                      <div class="ws-config-field">
                        <label class="ws-config-label">
                          <span class="ws-config-label-text">Locale</span>
                        </label>
                        <input type="text" class="ws-config-input" id="wsLocale" value="${params.locale || 'en'}" placeholder="en" />
                      </div>
                      
                      <div class="ws-config-checkbox-row">
                        <input type="checkbox" class="ws-config-checkbox" id="wsHasEnterpriseExtension" ${params.hasEnterpriseExtension ? 'checked' : ''} />
                        <label class="ws-config-checkbox-label" for="wsHasEnterpriseExtension">Enterprise Extension</label>
                      </div>
                      
                      <div class="ws-config-checkbox-row">
                        <input type="checkbox" class="ws-config-checkbox" id="wsHasDevExtension" ${params.hasDevExtension ? 'checked' : ''} />
                        <label class="ws-config-checkbox-label" for="wsHasDevExtension">Dev Extension</label>
                      </div>
                      
                      <div class="ws-config-checkbox-row">
                        <input type="checkbox" class="ws-config-checkbox" id="wsHasIndexService" ${params.hasIndexService ? 'checked' : ''} />
                        <label class="ws-config-checkbox-label" for="wsHasIndexService">Index Service</label>
                      </div>
                      
                      <div class="ws-config-checkbox-row">
                        <input type="checkbox" class="ws-config-checkbox" id="wsIsRemoteConnection" ${params.isRemoteConnection ? 'checked' : ''} />
                        <label class="ws-config-checkbox-label" for="wsIsRemoteConnection">Remote Connection</label>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="ws-config-footer">
                  <div class="ws-config-footer-left">
                    <button type="button" class="ws-config-btn danger" id="wsConfigReset">Reset All</button>
                  </div>
                  <div class="ws-config-footer-right">
                    <button type="button" class="ws-config-btn secondary" id="wsConfigCancel">Cancel</button>
                    <button type="button" class="ws-config-btn" id="wsConfigSave">Save & Connect</button>
                  </div>
                </div>
              </div>
            `;

        document.body.appendChild(overlay);

        // Elements
        const closeBtn = overlay.querySelector('#wsConfigClose');
        const cancelBtn = overlay.querySelector('#wsConfigCancel');
        const saveBtn = overlay.querySelector('#wsConfigSave');
        const resetBtn = overlay.querySelector('#wsConfigReset');
        const apiKeyInput = overlay.querySelector('#wsApiKey');
        const csrfTokenInput = overlay.querySelector('#wsCsrfToken');
        const toggleApiKeyBtn = overlay.querySelector('#wsToggleApiKey');
        const toggleCsrfBtn = overlay.querySelector('#wsToggleCsrf');
        const advancedSection = overlay.querySelector('#wsAdvancedSection');
        const advancedHeader = advancedSection.querySelector('.ws-config-collapsible-header');

        // Toggle password visibility
        const toggleVisibility = (input, btn) => {
          if (input.type === 'password') {
            input.type = 'text';
            btn.textContent = 'Hide';
          } else {
            input.type = 'password';
            btn.textContent = 'Show';
          }
        };

        toggleApiKeyBtn.addEventListener('click', () => toggleVisibility(apiKeyInput, toggleApiKeyBtn));
        toggleCsrfBtn.addEventListener('click', () => toggleVisibility(csrfTokenInput, toggleCsrfBtn));

        // Toggle advanced section
        advancedHeader.addEventListener('click', () => {
          advancedSection.classList.toggle('expanded');
        });

        // Close modal
        const closeModal = (result) => {
          overlay.remove();
          resolve(result);
        };

        closeBtn.addEventListener('click', () => closeModal(null));
        cancelBtn.addEventListener('click', () => closeModal(null));

        // Click outside to close
        overlay.addEventListener('click', (e) => {
          if (e.target === overlay) closeModal(null);
        });

        // Escape to close
        const escHandler = (e) => {
          if (e.key === 'Escape') {
            document.removeEventListener('keydown', escHandler);
            closeModal(null);
          }
        };
        document.addEventListener('keydown', escHandler);

        // Reset
        resetBtn.addEventListener('click', () => {
          if (confirm('Are you sure you want to reset all settings? This will clear your API key and other configuration.')) {
            clearParams();
            window.location.reload();
          }
        });

        // Save
        saveBtn.addEventListener('click', () => {
          const apiKey = apiKeyInput.value.trim();
          const csrfToken = csrfTokenInput.value.trim();

          // Validation
          let hasError = false;
          apiKeyInput.classList.remove('error');
          csrfTokenInput.classList.remove('error');

          if (!apiKey) {
            apiKeyInput.classList.add('error');
            hasError = true;
          }
          if (!csrfToken) {
            csrfTokenInput.classList.add('error');
            hasError = true;
          }

          if (hasError) {
            return;
          }

          const newParams = {
            ...DEFAULT_PARAMS,
            apiKey,
            csrfToken,
            languageServerUrl: overlay.querySelector('#wsLanguageServerUrl').value.trim() || 'http://127.0.0.1:62556/',
            authToken: overlay.querySelector('#wsAuthToken').value.trim(),
            extensionVersion: overlay.querySelector('#wsExtensionVersion').value.trim() || '1.48.2',
            ideVersion: overlay.querySelector('#wsIdeVersion').value.trim() || '1.12.47',
            ideVersionWithBuildInfo: overlay.querySelector('#wsIdeVersion').value.trim() || '1.12.47',
            osName: overlay.querySelector('#wsOsName').value,
            architecture: overlay.querySelector('#wsArchitecture').value,
            locale: overlay.querySelector('#wsLocale').value.trim() || 'en',
            hasEnterpriseExtension: overlay.querySelector('#wsHasEnterpriseExtension').checked,
            hasDevExtension: overlay.querySelector('#wsHasDevExtension').checked,
            hasIndexService: overlay.querySelector('#wsHasIndexService').checked,
            isRemoteConnection: overlay.querySelector('#wsIsRemoteConnection').checked,
          };

          closeModal(newParams);
        });

        // Focus API key input
        setTimeout(() => apiKeyInput.focus(), 100);
      });
    };

    // Expose openConfigModal globally so the settings button can call it
    window.openConfigModal = async () => {
      const currentParams = loadStoredParams();
      const newParams = await createConfigModal(currentParams);
      if (newParams) {
        // Add generated IDs
        newParams.userId = newParams.userId || getOrCreateId('windsurfStandalone.userId');
        newParams.installationId = newParams.installationId || getOrCreateId('windsurfStandalone.installationId');
        newParams.userTimeWindowId = `${newParams.userId}:${new Date().toISOString().slice(0, 13)}:00`;

        saveParams(newParams);
        console.log('[Windsurf Config] Saved new configuration:', { languageServerUrl: newParams.languageServerUrl, hasAuthToken: !!newParams.authToken });
        window.location.reload();
      }
    };

    const showWelcomeScreen = () => {
      return new Promise((resolve) => {
        document.getElementById('react-app').innerHTML = `
              <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--vscode-foreground); text-align: center; padding: 20px;">
                <div style="font-size: 48px; margin-bottom: 16px;">🏄</div>
                <h1 style="font-size: 24px; font-weight: 600; margin: 0 0 12px 0;">Welcome to Windsurf Chat</h1>
                <p style="color: var(--vscode-descriptionForeground); margin: 0 0 16px 0; max-width: 400px;">Connect to Windsurf's AI-powered code assistance.</p>
                <div class="ws-disclaimer-banner" style="max-width: 500px; text-align: left; margin-bottom: 24px;">
                  ${ICONS.warning}
                  <div class="ws-disclaimer-text">
                    <strong>Disclaimer:</strong> This is an unofficial, community-created web interface for Windsurf. It is not affiliated with, endorsed by, or supported by Codeium or the official Windsurf team.
                  </div>
                </div>
                <div style="display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;">
                  <button id="welcome-configure" style="background: var(--vscode-button-background); color: var(--vscode-button-foreground); border: none; border-radius: 4px; padding: 10px 20px; font-size: 14px; cursor: pointer; font-weight: 500;">Configure Settings</button>
                  <button id="welcome-github" style="background: var(--vscode-button-secondaryBackground); color: var(--vscode-button-secondaryForeground); border: none; border-radius: 4px; padding: 10px 16px; font-size: 14px; cursor: pointer; display: flex; align-items: center; gap: 6px;">
                    <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
                      <path d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.17 6.839 9.49.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.463-1.11-1.463-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.167 22 16.418 22 12c0-5.523-4.477-10-10-10z"/>
                    </svg>
                    View on GitHub
                  </button>
                </div>
              </div>
            `;

        // Handle configure button
        document.getElementById('welcome-configure').addEventListener('click', async () => {
          const currentParams = loadStoredParams();
          const newParams = await createConfigModal(currentParams);
          if (newParams) {
            // Add generated IDs
            newParams.userId = newParams.userId || getOrCreateId('windsurfStandalone.userId');
            newParams.installationId = newParams.installationId || getOrCreateId('windsurfStandalone.installationId');
            newParams.userTimeWindowId = `${newParams.userId}:${new Date().toISOString().slice(0, 13)}:00`;

            saveParams(newParams);
            resolve(newParams);
          } else {
            // User cancelled, show welcome again
            showWelcomeScreen().then(resolve);
          }
        });

        // Handle GitHub button
        document.getElementById('welcome-github').addEventListener('click', () => {
          window.open('https://github.com/EZFNDEV/windsurf-web', '_blank');
        });
      });
    };

    const boot = async () => {
      // Handle setConfiguration from URL hash
      if (location.hash) {
        try {
          console.log('[Windsurf Config] Processing configuration from URL hash');
          console.log('[Windsurf Config] Hash length:', location.hash.length);

          // Try to decode
          let decodedConfig;
          try {
            decodedConfig = decodeBase64Utf8(location.hash.slice(1));
            console.log('[Windsurf Config] Decoded config length:', decodedConfig.length);
          } catch (decodeError) {
            console.error('[Windsurf Config] Base64 decode failed:', decodeError);
            console.log('[Windsurf Config] Continuing with normal boot (hash invalid)');
          }

          // Try to parse JSON
          let configData;
          if (decodedConfig) {
            try {
              configData = JSON.parse(decodedConfig);
              console.log('[Windsurf Config] Parsed config keys:', Object.keys(configData));
            } catch (parseError) {
              console.error('[Windsurf Config] JSON parse failed:', parseError);
              console.log('[Windsurf Config] Continuing with normal boot (parse failed)');
            }
          }

          // Validate that it's a valid configuration object
          if (configData && typeof configData === 'object' && configData.apiKey) {
            // Merge with DEFAULT_PARAMS to ensure all required fields are present
            const mergedConfig = { ...DEFAULT_PARAMS, ...configData };

            // Add generated IDs if missing
            mergedConfig.userId = mergedConfig.userId || getOrCreateId('windsurfStandalone.userId');
            mergedConfig.installationId = mergedConfig.installationId || getOrCreateId('windsurfStandalone.installationId');
            mergedConfig.userTimeWindowId = `${mergedConfig.userId}:${new Date().toISOString().slice(0, 13)}:00`;

            // Try to save
            try {
              saveParams(mergedConfig);
              console.log('[Windsurf Config] Configuration saved successfully');
            } catch (saveError) {
              console.error('[Windsurf Config] Failed to save to localStorage:', saveError);
              alert('Failed to save configuration. Your browser might have localStorage disabled.');
            }

            console.log('[Windsurf Config] Configuration applied from URL parameter:', { languageServerUrl: mergedConfig.languageServerUrl, hasAuthToken: !!mergedConfig.authToken, apiKey: !!mergedConfig.apiKey, csrfToken: !!mergedConfig.csrfToken });

            // Show success message briefly before redirect
            document.body.innerHTML = '<div style="display: flex; align-items: center; justify-content: center; height: 100vh; color: white; font-size: 18px; text-align: center; padding: 20px;">✅ Configuration loaded successfully!<br><br>Redirecting...</div>';

            // Remove the parameter from URL and redirect to clean URL after a brief delay
            setTimeout(() => {
              const url = new URL(window.location);
              url.searchParams.delete('setConfiguration');
              url.hash = '';

              // Redirect to the clean URL (this will reload the page with the saved config)
              window.location.href = url.pathname + url.search;
            }, 1000);

            return; // Stop execution here since we're redirecting
          } else {
            console.warn('[Windsurf Config] Invalid configuration data in URL parameter - missing apiKey');
            alert('Invalid configuration: Missing API key');
          }
        } catch (e) {
          console.error('[Windsurf Config] Failed to process setConfiguration parameter:', e);
          alert('Failed to process configuration: ' + e.message);
        }
      }

      // Check if user is already configured
      let params = loadStoredParams();

      // If not configured or missing required fields, show welcome screen
      if (!params || !params.apiKey || !params.csrfToken) {
        console.log('[Windsurf Config] Configuration incomplete, showing welcome screen');
        params = await showWelcomeScreen();
      } else {
        console.log('[Windsurf Config] Using existing configuration');
      }

      // If we got params, continue with them
      if (params) {
        // Add generated IDs
        params.userId = params.userId || getOrCreateId('windsurfStandalone.userId');
        params.installationId = params.installationId || getOrCreateId('windsurfStandalone.installationId');
        params.userTimeWindowId = `${params.userId}:${new Date().toISOString().slice(0, 13)}:00`;

        // Save updated params
        saveParams(params);

        // Set chatParams for the Windsurf bundle
        window.chatParams = encodeBase64Utf8(JSON.stringify(params));
        console.log('[Windsurf Config] Loaded configuration:', { languageServerUrl: params.languageServerUrl, hasAuthToken: !!params.authToken });

        // Load the chat bundle
        const s = document.createElement('script');
        s.type = 'text/javascript';
        s.src = 'windsurf/extensions/windsurf/out/media/chat.js';
        s.onerror = (error) => {
          console.error('Failed to load chat bundle:', error);
          document.getElementById('react-app').innerHTML = `
                <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--vscode-foreground); text-align: center; padding: 20px;">
                  <div style="font-size: 48px; margin-bottom: 16px;">⚠️</div>
                  <h1 style="font-size: 20px; font-weight: 600; margin: 0 0 12px 0;">Failed to Load Chat</h1>
                  <p style="color: var(--vscode-descriptionForeground); margin: 0 0 24px 0; max-width: 400px;">The Windsurf chat bundle could not be loaded. Please check that all files are deployed correctly.</p>
                  <button onclick="window.location.reload()" style="background: var(--vscode-button-background); color: var(--vscode-button-foreground); border: none; border-radius: 4px; padding: 10px 20px; font-size: 14px; cursor: pointer;">Retry</button>
                </div>
              `;
        };
        s.onload = () => {
          console.log('Chat bundle loaded successfully');
        };
        document.body.appendChild(s);
      }
    };

    boot().catch((e) => {
      console.error('Failed to boot Windsurf chat', e);
    });
  </script>
</body>

</html>