yaak-mountain-loop/apps/yaak-proxy/harness-settings.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Yaak Proxy, shared settings harness</title>
    <style>
      html,
      body,
      #root {
        height: 100%;
        margin: 0;
      }
    </style>
  </head>
  <body class="text-base">
    <!--
      Dev only, served by `vp dev` at /harness-settings.html?theme=dark&tab=proxy; the build's only
      entry is index.html. Renders the settings dialog shared from packages/ui with a stub settings
      view and one tab of the proxy's own, passed in as a slot, until the proxy has a real one.
    -->
    <div id="root"></div>
    <script>
      // Outside the app there's no Tauri; the platform package still looks for its window
      window.__TAURI_INTERNALS__ = {
        metadata: {
          currentWindow: { label: "harness" },
          currentWebview: { label: "harness", windowLabel: "harness" },
        },
        invoke: () => Promise.reject(new Error("Not running in the app")),
        transformCallback: () => 0,
      };
      // What the OS plugin hands the page at launch, which the settings' selects read
      window.__TAURI_OS_PLUGIN_INTERNALS__ = { os_type: "macos", platform: "macos" };
    </script>
    <script type="module" src="/font-size.ts"></script>
    <script type="module">
      import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
      import { applyThemeToDocument, defaultDarkTheme, defaultLightTheme } from "@yaakapp-internal/theme";
      import {
        Heading,
        SETTINGS_TAB_GENERAL,
        SETTINGS_TAB_INTERFACE,
        SETTINGS_TAB_LICENSE,
        SETTINGS_TAB_THEME,
        SettingCommand,
        SettingRowBoolean,
        SettingRowNumber,
        SettingRowSelect,
        SettingsDialog,
        SettingsGeneral,
        SettingsInterface,
        SettingsLicense,
        SettingsList,
        SettingsSection,
        SettingsTheme,
        VStack,
      } from "@yaakapp-internal/ui";
      import { createElement as h, StrictMode, useState } from "react";
      import { createRoot } from "react-dom/client";
      import "/main.css";

      const params = new URLSearchParams(location.search);
      const dark = params.get("theme") !== "light";
      applyThemeToDocument(dark ? defaultDarkTheme : defaultLightTheme);

      const themeOption = ({ id, label, dark }) => ({ id, label, dark });

      const initialValues = {
        appearance: dark ? "dark" : "light",
        themeLight: defaultLightTheme.id,
        themeDark: defaultDarkTheme.id,
        interfaceFont: null,
        interfaceFontSize: 15,
        editorFont: null,
        editorFontSize: 13,
        editorKeymap: "default",
        editorSoftWrap: true,
        coloredMethods: false,
        useNativeTitlebar: false,
        hideWindowControls: false,
        updateChannel: "stable",
        autoupdate: true,
        autoDownloadUpdates: true,
        checkNotifications: true,
        promptFeedback: true,
      };

      function view(values) {
        const active = dark ? defaultDarkTheme : defaultLightTheme;
        return {
          app: {
            name: "Yaak Proxy",
            version: "2026.11.0",
            dataDir: "~/Library/Application Support/app.yaak.proxy",
            logDir: "~/Library/Logs/app.yaak.proxy",
            revealPathLabel: "Reveal in Finder",
          },
          values,
          themes: {
            themes: [defaultDarkTheme, defaultLightTheme].map(themeOption),
            light: themeOption(defaultLightTheme),
            dark: themeOption(defaultDarkTheme),
            active: themeOption(active),
            resolvedAppearance: dark ? "dark" : "light",
          },
          fonts: { uiFonts: [], editorFonts: [] },
          windowControlsSetting: false,
          updates: { checking: false },
          feedbackPrompts: false,
          license: {
            pending: false,
            status: { status: "trialing", trialEnd: new Date(Date.now() + 12.5 * 864e5).toISOString() },
            checkError: null,
            activateError: null,
            activating: false,
          },
        };
      }

      /** A stand-in for the proxy's own tab, to show one passes in beside the shared ones */
      function ProxyTab() {
        const [port, setPort] = useState(9090);
        const [httpVersion, setHttpVersion] = useState("h2");
        const [atLaunch, setAtLaunch] = useState(true);
        return h(VStack, { space: 1.5, className: "mb-4" }, [
          h("div", { key: "head", className: "mb-3" }, [
            h(Heading, { key: "h" }, "Proxy"),
            h(
              "p",
              { key: "p", className: "text-text-subtle" },
              "How Yaak Proxy listens, what it keeps, and how it sets the system proxy.",
            ),
          ]),
          h(SettingsList, { key: "list", className: "space-y-8" }, [
            h(SettingsSection, { key: "listening", title: "Listening" }, [
              h(SettingRowNumber, {
                key: "port",
                name: "port",
                title: "Port",
                description: "Where apps send their traffic. Changing it restarts the proxy.",
                value: port,
                onChange: setPort,
              }),
              h(SettingRowSelect, {
                key: "http",
                name: "httpVersion",
                title: "HTTP version",
                description: "What apps may speak to the proxy; it applies to new connections.",
                value: httpVersion,
                onChange: setHttpVersion,
                options: [
                  { label: "HTTP/2 and HTTP/1.1", value: "h2" },
                  { label: "HTTP/1.1 only", value: "h1" },
                ],
              }),
            ]),
            h(SettingsSection, { key: "system", title: "System proxy" }, [
              h(SettingRowBoolean, {
                key: "launch",
                title: "Override system proxy at launch",
                description: "Routes every app on this Mac through the proxy as soon as Yaak Proxy opens.",
                checked: atLaunch,
                onChange: setAtLaunch,
              }),
            ]),
            h(SettingsSection, { key: "terminal", title: "Terminal" }, [
              h(SettingCommand, {
                key: "env",
                title: "Environment for one terminal",
                description: "For a terminal or one app instead of the whole Mac.",
                language: "shell",
                snippet: `export HTTP_PROXY=http://127.0.0.1:${port}\nexport HTTPS_PROXY=http://127.0.0.1:${port}`,
              }),
            ]),
          ]),
        ]);
      }

      function Harness() {
        const [values, setValues] = useState(initialValues);
        const settingsView = view(values);
        const callbacks = {
          onChange: (patch) => setValues((v) => ({ ...v, ...patch })),
          onApplyNativeTitlebar: (useNativeTitlebar) => setValues((v) => ({ ...v, useNativeTitlebar })),
          onCheckForUpdates: () => console.log("Check for updates"),
          onActivateLicense: async (licenseKey) => console.log("Activate", licenseKey),
          onDeactivateLicense: () => console.log("Deactivate"),
          onOpenUrl: (url) => window.open(url, "_blank"),
          onRevealPath: (path) => console.log("Reveal", path),
          pricingUrl: (intent) => `https://yaak.app/pricing?intent=${encodeURIComponent(intent)}`,
        };
        const props = { view: settingsView, callbacks };
        return h(SettingsDialog, {
          defaultTab: params.get("tab") ?? SETTINGS_TAB_GENERAL,
          titlebar: { osType: "macos", hideWindowControls: false, useNativeTitlebar: false, interfaceScale: 1 },
          tabs: [
            { value: SETTINGS_TAB_GENERAL, label: "General", icon: "settings", content: h(SettingsGeneral, props) },
            { value: SETTINGS_TAB_THEME, label: "Theme", icon: "palette", content: h(SettingsTheme, props) },
            { value: SETTINGS_TAB_INTERFACE, label: "Interface", icon: "columns_2", content: h(SettingsInterface, props) },
            { value: "proxy", label: "Proxy", icon: "wifi", content: h(ProxyTab) },
            { value: SETTINGS_TAB_LICENSE, label: "License", icon: "key_round", content: h(SettingsLicense, props) },
          ],
        });
      }

      createRoot(document.getElementById("root")).render(
        h(StrictMode, null, h(QueryClientProvider, { client: new QueryClient() }, h(Harness))),
      );
    </script>
  </body>
</html>