npm - synthos - Versions diffs - 0.7.2 → 0.9.0 - Mend

synthos 0.7.2 → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (380) hide show

package/README.md +215 -65
package/default-pages/application/page.html +42 -0
package/default-pages/application/page.json +10 -0
package/default-pages/elevenlabs_effects_studio/page.html +1363 -0
package/default-pages/elevenlabs_effects_studio/page.json +11 -0
package/default-pages/elevenlabs_voice_studio/page.html +801 -0
package/default-pages/elevenlabs_voice_studio/page.json +11 -0
package/default-pages/{json_tools.html → json_tools/page.html} +13 -11
package/default-pages/json_tools/page.json +10 -0
package/default-pages/my_notes/notes/a1b2c3d4-e5f6-7890-abcd-ef1234567890.json +5 -0
package/default-pages/my_notes/page.html +132 -0
package/default-pages/{my_notes.json → my_notes/page.json} +2 -2
package/default-pages/neon_asteroids/files/Ambient_Space.mp3 +0 -0
package/default-pages/neon_asteroids/files/Ambient_Space2.mp3 +0 -0
package/default-pages/neon_asteroids/files/Ambient_Space3.mp3 +0 -0
package/default-pages/neon_asteroids/files/Asteroid_Explosion.mp3 +0 -0
package/default-pages/neon_asteroids/files/Hyperspace_Jump.mp3 +0 -0
package/default-pages/neon_asteroids/files/Laser_Fire.mp3 +0 -0
package/default-pages/neon_asteroids/files/Menu_Navigate.mp3 +0 -0
package/default-pages/neon_asteroids/files/Power_Up_Collect.mp3 +0 -0
package/default-pages/neon_asteroids/files/Saucer_Alert.mp3 +0 -0
package/default-pages/neon_asteroids/files/Ship_Thrust.mp3 +0 -0
package/default-pages/neon_asteroids/files/effects.json +74 -0
package/default-pages/neon_asteroids/page.html +1822 -0
package/default-pages/{neon_asteroids.json → neon_asteroids/page.json} +3 -3
package/default-pages/oregon_trail/page.html +323 -0
package/default-pages/oregon_trail/page.json +12 -0
package/default-pages/retro_game_starter/page.html +1308 -0
package/default-pages/retro_game_starter/page.json +12 -0
package/default-pages/{sidebar_builder.html → sidebar_page/page.html} +12 -10
package/default-pages/sidebar_page/page.json +10 -0
package/default-pages/{solar_explorer.html → solar_explorer/page.html} +24 -29
package/default-pages/{solar_explorer.json → solar_explorer/page.json} +4 -4
package/default-pages/{solar_tutorial.html → solar_tutorial/page.html} +12 -10
package/default-pages/solar_tutorial/page.json +10 -0
package/default-pages/{two-panel_builder.html → two-panel_page/page.html} +13 -11
package/default-pages/two-panel_page/page.json +10 -0
package/default-pages/us_map/page.html +193 -0
package/default-pages/us_map/page.json +12 -0
package/default-pages/us_map_1850/page.html +326 -0
package/default-pages/us_map_1850/page.json +12 -0
package/default-pages/western_cities_1850/page.html +527 -0
package/default-pages/western_cities_1850/page.json +12 -0
package/default-themes/aurora-dawn.json +19 -0
package/default-themes/aurora-dawn.v3.css +198 -0
package/default-themes/aurora-dusk.json +19 -0
package/default-themes/aurora-dusk.v3.css +200 -0
package/default-themes/cosmos-dawn.json +19 -0
package/default-themes/cosmos-dawn.v3.css +198 -0
package/default-themes/cosmos-dusk.json +19 -0
package/default-themes/cosmos-dusk.v3.css +200 -0
package/default-themes/high-contrast-dark.json +19 -0
package/default-themes/high-contrast-dark.v3.css +200 -0
package/default-themes/high-contrast-light.json +19 -0
package/default-themes/high-contrast-light.v3.css +198 -0
package/default-themes/{nebula-dawn.css → nebula-dawn.v2.css} +134 -0
package/default-themes/nebula-dawn.v3.css +199 -0
package/default-themes/{nebula-dusk.css → nebula-dusk.v2.css} +128 -0
package/default-themes/nebula-dusk.v3.css +201 -0
package/default-themes/solar-flare-dawn.json +19 -0
package/default-themes/solar-flare-dawn.v3.css +198 -0
package/default-themes/solar-flare-dusk.json +19 -0
package/default-themes/solar-flare-dusk.v3.css +200 -0
package/dist/agents/a2a/a2aProvider.d.ts.map +1 -0
package/dist/agents/a2a/a2aProvider.js +126 -0
package/dist/agents/a2a/a2aProvider.js.map +1 -0
package/dist/agents/discovery.d.ts.map +1 -0
package/dist/agents/discovery.js +52 -0
package/dist/agents/discovery.js.map +1 -0
package/dist/agents/index.d.ts +7 -0
package/dist/agents/index.d.ts.map +1 -0
package/dist/agents/index.js +20 -0
package/dist/agents/index.js.map +1 -0
package/dist/agents/openclaw/gatewayManager.d.ts +117 -0
package/dist/agents/openclaw/gatewayManager.d.ts.map +1 -0
package/dist/agents/openclaw/gatewayManager.js +486 -0
package/dist/agents/openclaw/gatewayManager.js.map +1 -0
package/dist/agents/openclaw/openclawProvider.d.ts.map +1 -0
package/dist/agents/openclaw/openclawProvider.js +237 -0
package/dist/agents/openclaw/openclawProvider.js.map +1 -0
package/dist/agents/openclaw/sshTunnelManager.d.ts +25 -0
package/dist/agents/openclaw/sshTunnelManager.d.ts.map +1 -0
package/dist/agents/openclaw/sshTunnelManager.js +359 -0
package/dist/agents/openclaw/sshTunnelManager.js.map +1 -0
package/dist/agents/types.d.ts.map +1 -0
package/dist/agents/types.js +6 -0
package/dist/agents/types.js.map +1 -0
package/dist/builders/anthropic.d.ts +31 -0
package/dist/builders/anthropic.d.ts.map +1 -0
package/dist/builders/anthropic.js +227 -0
package/dist/builders/anthropic.js.map +1 -0
package/dist/builders/fireworksai.d.ts +9 -0
package/dist/builders/fireworksai.d.ts.map +1 -0
package/dist/builders/fireworksai.js +57 -0
package/dist/builders/fireworksai.js.map +1 -0
package/dist/builders/index.d.ts +13 -0
package/dist/builders/index.d.ts.map +1 -0
package/dist/builders/index.js +31 -0
package/dist/builders/index.js.map +1 -0
package/dist/builders/openai.d.ts +8 -0
package/dist/builders/openai.d.ts.map +1 -0
package/dist/builders/openai.js +87 -0
package/dist/builders/openai.js.map +1 -0
package/dist/builders/types.d.ts +54 -0
package/dist/builders/types.d.ts.map +1 -0
package/dist/builders/types.js +211 -0
package/dist/builders/types.js.map +1 -0
package/dist/connectors/index.d.ts.map +1 -1
package/dist/connectors/index.js +3 -2
package/dist/connectors/index.js.map +1 -1
package/dist/connectors/registry.d.ts +2 -1
package/dist/connectors/registry.d.ts.map +1 -1
package/dist/connectors/registry.js +65 -96
package/dist/connectors/registry.js.map +1 -1
package/dist/connectors/types.d.ts.map +1 -1
package/dist/customizer/Customizer.d.ts +57 -0
package/dist/customizer/Customizer.d.ts.map +1 -0
package/dist/customizer/Customizer.js +124 -0
package/dist/customizer/Customizer.js.map +1 -0
package/dist/customizer/index.d.ts.map +1 -0
package/dist/customizer/index.js +9 -0
package/dist/customizer/index.js.map +1 -0
package/dist/files.d.ts +17 -0
package/dist/files.d.ts.map +1 -1
package/dist/files.js +75 -1
package/dist/files.js.map +1 -1
package/dist/index.d.ts.map +1 -1
package/dist/index.js +1 -0
package/dist/index.js.map +1 -1
package/dist/init.d.ts +10 -6
package/dist/init.d.ts.map +1 -1
package/dist/init.js +97 -86
package/dist/init.js.map +1 -1
package/dist/migrations.d.ts.map +1 -1
package/dist/migrations.js +142 -145
package/dist/migrations.js.map +1 -1
package/dist/models/anthropic.d.ts +24 -0
package/dist/models/anthropic.d.ts.map +1 -0
package/dist/models/anthropic.js +103 -0
package/dist/models/anthropic.js.map +1 -0
package/dist/models/chainOfThought.d.ts.map +1 -0
package/dist/models/chainOfThought.js +45 -0
package/dist/models/chainOfThought.js.map +1 -0
package/dist/models/fireworksai.d.ts.map +1 -0
package/dist/models/fireworksai.js +141 -0
package/dist/models/fireworksai.js.map +1 -0
package/dist/models/index.d.ts +7 -1
package/dist/models/index.d.ts.map +1 -1
package/dist/models/index.js +20 -1
package/dist/models/index.js.map +1 -1
package/dist/models/logCompletePrompt.d.ts.map +1 -0
package/dist/models/logCompletePrompt.js +23 -0
package/dist/models/logCompletePrompt.js.map +1 -0
package/dist/models/openai.d.ts +24 -0
package/dist/models/openai.d.ts.map +1 -0
package/dist/models/openai.js +101 -0
package/dist/models/openai.js.map +1 -0
package/dist/models/providers.d.ts.map +1 -1
package/dist/models/providers.js +12 -4
package/dist/models/providers.js.map +1 -1
package/dist/models/types.d.ts +53 -2
package/dist/models/types.d.ts.map +1 -1
package/dist/models/types.js +21 -0
package/dist/models/types.js.map +1 -1
package/dist/models/utils.d.ts.map +1 -0
package/dist/models/utils.js +21 -0
package/dist/models/utils.js.map +1 -0
package/dist/pages.d.ts +30 -7
package/dist/pages.d.ts.map +1 -1
package/dist/pages.js +177 -55
package/dist/pages.js.map +1 -1
package/dist/scripts.d.ts.map +1 -1
package/dist/scripts.js +4 -3
package/dist/scripts.js.map +1 -1
package/dist/service/createCompletePrompt.d.ts.map +1 -1
package/dist/service/createCompletePrompt.js +9 -6
package/dist/service/createCompletePrompt.js.map +1 -1
package/dist/service/generateImage.d.ts.map +1 -1
package/dist/service/generateImage.js +3 -3
package/dist/service/generateImage.js.map +1 -1
package/dist/service/server.d.ts.map +1 -1
package/dist/service/server.js +39 -7
package/dist/service/server.js.map +1 -1
package/dist/service/transformPage.d.ts +47 -18
package/dist/service/transformPage.d.ts.map +1 -1
package/dist/service/transformPage.js +559 -270
package/dist/service/transformPage.js.map +1 -1
package/dist/service/useAgentRoutes.d.ts +5 -0
package/dist/service/useAgentRoutes.d.ts.map +1 -0
package/dist/service/useAgentRoutes.js +392 -0
package/dist/service/useAgentRoutes.js.map +1 -0
package/dist/service/useApiRoutes.d.ts.map +1 -1
package/dist/service/useApiRoutes.js +380 -138
package/dist/service/useApiRoutes.js.map +1 -1
package/dist/service/useConnectorRoutes.d.ts.map +1 -1
package/dist/service/useConnectorRoutes.js +20 -9
package/dist/service/useConnectorRoutes.js.map +1 -1
package/dist/service/useFileRoutes.d.ts +4 -0
package/dist/service/useFileRoutes.d.ts.map +1 -0
package/dist/service/useFileRoutes.js +122 -0
package/dist/service/useFileRoutes.js.map +1 -0
package/dist/service/usePageRoutes.d.ts.map +1 -1
package/dist/service/usePageRoutes.js +660 -68
package/dist/service/usePageRoutes.js.map +1 -1
package/dist/service/useSharedDataRoutes.d.ts +4 -0
package/dist/service/useSharedDataRoutes.d.ts.map +1 -0
package/dist/service/useSharedDataRoutes.js +104 -0
package/dist/service/useSharedDataRoutes.js.map +1 -0
package/dist/service/useSharedFileRoutes.d.ts +4 -0
package/dist/service/useSharedFileRoutes.d.ts.map +1 -0
package/dist/service/useSharedFileRoutes.js +121 -0
package/dist/service/useSharedFileRoutes.js.map +1 -0
package/dist/settings.d.ts +3 -1
package/dist/settings.d.ts.map +1 -1
package/dist/settings.js +5 -8
package/dist/settings.js.map +1 -1
package/dist/synthos-cli.d.ts.map +1 -1
package/dist/synthos-cli.js +4 -3
package/dist/synthos-cli.js.map +1 -1
package/dist/themes.d.ts +15 -0
package/dist/themes.d.ts.map +1 -1
package/dist/themes.js +106 -20
package/dist/themes.js.map +1 -1
package/migration-rules/v1-to-v2.md +193 -0
package/migration-rules/v2-to-v3.md +481 -0
package/package.json +15 -11
package/required-pages/builder/page.html +43 -0
package/required-pages/builder/page.json +10 -0
package/required-pages/pages/page.html +924 -0
package/required-pages/pages/page.json +10 -0
package/required-pages/settings/page.html +1753 -0
package/required-pages/settings/page.json +10 -0
package/required-pages/synthos_apis/page.html +846 -0
package/required-pages/synthos_apis/page.json +10 -0
package/required-pages/{synthos_scripts.html → synthos_scripts/page.html} +13 -11
package/required-pages/synthos_scripts/page.json +10 -0
package/service-connectors/airtable/connector.json +27 -0
package/service-connectors/alpha-vantage/connector.json +26 -0
package/service-connectors/brave-search/connector.json +26 -0
package/service-connectors/cloudinary/connector.json +27 -0
package/service-connectors/deepl/connector.json +28 -0
package/service-connectors/elevenlabs/connector.json +30 -0
package/service-connectors/giphy/connector.json +27 -0
package/service-connectors/github/connector.json +29 -0
package/service-connectors/huggingface/connector.json +27 -0
package/service-connectors/imgur/connector.json +29 -0
package/service-connectors/instagram/connector.json +43 -0
package/service-connectors/jira/connector.json +28 -0
package/service-connectors/mapbox/connector.json +26 -0
package/service-connectors/nasa/connector.json +27 -0
package/service-connectors/newsapi/connector.json +27 -0
package/service-connectors/notion/connector.json +28 -0
package/service-connectors/open-exchange-rates/connector.json +27 -0
package/service-connectors/openweathermap/connector.json +26 -0
package/service-connectors/pexels/connector.json +27 -0
package/service-connectors/resend/connector.json +29 -0
package/service-connectors/rss2json/connector.json +27 -0
package/service-connectors/sendgrid/connector.json +27 -0
package/service-connectors/spoonacular/connector.json +28 -0
package/service-connectors/stability-ai/connector.json +27 -0
package/service-connectors/twilio/connector.json +28 -0
package/service-connectors/unsplash/connector.json +27 -0
package/service-connectors/wolfram-alpha/connector.json +26 -0
package/service-connectors/youtube-data/connector.json +30 -0
package/src/agents/a2a/a2aProvider.ts +110 -0
package/src/agents/discovery.ts +74 -0
package/src/agents/index.ts +6 -0
package/src/agents/openclaw/gatewayManager.ts +570 -0
package/src/agents/openclaw/openclawProvider.ts +259 -0
package/src/agents/openclaw/sshTunnelManager.ts +393 -0
package/src/agents/types.ts +82 -0
package/src/builders/anthropic.ts +283 -0
package/src/builders/fireworksai.ts +59 -0
package/src/builders/index.ts +33 -0
package/src/builders/openai.ts +89 -0
package/src/builders/types.ts +261 -0
package/src/connectors/index.ts +3 -1
package/src/connectors/registry.ts +40 -96
package/src/connectors/types.ts +25 -0
package/src/customizer/Customizer.ts +151 -0
package/src/customizer/index.ts +5 -0
package/src/files.ts +71 -0
package/src/index.ts +2 -1
package/src/init.ts +138 -97
package/src/migrations.ts +148 -145
package/src/models/anthropic.ts +119 -0
package/src/models/chainOfThought.ts +56 -0
package/src/models/fireworksai.ts +143 -0
package/src/models/index.ts +7 -1
package/src/models/logCompletePrompt.ts +25 -0
package/src/models/openai.ts +110 -0
package/src/models/providers.ts +12 -3
package/src/models/types.ts +97 -2
package/src/models/utils.ts +16 -0
package/src/pages.ts +176 -54
package/src/scripts.ts +2 -2
package/src/service/createCompletePrompt.ts +3 -1
package/src/service/generateImage.ts +2 -2
package/src/service/server.ts +39 -8
package/src/service/transformPage.ts +605 -301
package/src/service/useAgentRoutes.ts +428 -0
package/src/service/useApiRoutes.ts +309 -45
package/src/service/useConnectorRoutes.ts +21 -10
package/src/service/useFileRoutes.ts +127 -0
package/src/service/usePageRoutes.ts +736 -75
package/src/service/useSharedDataRoutes.ts +106 -0
package/src/service/useSharedFileRoutes.ts +126 -0
package/src/settings.ts +8 -10
package/src/synthos-cli.ts +4 -3
package/src/themes.ts +103 -20
package/static-files/favicon.svg +12 -0
package/static-files/fluentlm-instructions.llmd +868 -0
package/static-files/fluentlm-instructions.md +1595 -0
package/static-files/fluentlm.css +4844 -0
package/static-files/fluentlm.js +3602 -0
package/static-files/fluentlm.min.css +1 -0
package/static-files/fluentlm.min.js +1 -0
package/static-files/helpers.v3.js +304 -0
package/static-files/page.v3.js +1290 -0
package/static-files/recommended-frameworks.llmd +81 -0
package/static-files/recommended-frameworks.md +137 -0
package/static-files/retro-game.js +877 -0
package/static-files/shell.css +797 -0
package/static-files/theme-dark.css +169 -0
package/static-files/theme-light.css +169 -0
package/tests/anthropic.spec.ts +84 -0
package/tests/builders.spec.ts +139 -0
package/tests/chainOfThought.spec.ts +108 -0
package/tests/ensureScripts.spec.ts +82 -0
package/tests/files.spec.ts +233 -0
package/tests/fireworksai.spec.ts +92 -0
package/tests/logCompletePrompt.spec.ts +74 -0
package/tests/migrations.spec.ts +79 -1
package/tests/openai.spec.ts +71 -0
package/tests/pages.spec.ts +226 -1
package/tests/providers.spec.ts +144 -0
package/tests/scripts.spec.ts +209 -0
package/tests/transformPage.spec.ts +456 -0
package/tests/types.spec.ts +23 -0
package/default-pages/app_builder.html +0 -40
package/default-pages/app_builder.json +0 -1
package/default-pages/json_tools.json +0 -1
package/default-pages/my_notes.html +0 -33
package/default-pages/neon_asteroids.html +0 -77
package/default-pages/sidebar_builder.json +0 -1
package/default-pages/solar_tutorial.json +0 -1
package/default-pages/two-panel_builder.json +0 -1
package/dist/connectors/index.d.ts +0 -3
package/dist/connectors/types.d.ts +0 -61
package/dist/index.d.ts +0 -7
package/dist/migrations.d.ts +0 -11
package/dist/models/providers.d.ts +0 -7
package/dist/scripts.d.ts +0 -14
package/dist/service/createCompletePrompt.d.ts +0 -5
package/dist/service/debugLog.d.ts +0 -11
package/dist/service/generateImage.d.ts +0 -32
package/dist/service/index.d.ts +0 -8
package/dist/service/modelInstructions.d.ts +0 -7
package/dist/service/requiresSettings.d.ts +0 -3
package/dist/service/server.d.ts +0 -4
package/dist/service/useApiRoutes.d.ts +0 -4
package/dist/service/useConnectorRoutes.d.ts +0 -4
package/dist/service/useDataRoutes.d.ts +0 -4
package/dist/service/usePageRoutes.d.ts +0 -5
package/dist/synthos-cli.d.ts +0 -2
package/images/home.png +0 -0
package/images/page-management.png +0 -0
package/images/settings.png +0 -0
package/images/synthos-square.png +0 -0
package/page-scripts/helpers-v2.js +0 -121
package/page-scripts/page-v2.js +0 -615
package/required-pages/builder.html +0 -74
package/required-pages/builder.json +0 -1
package/required-pages/pages.html +0 -196
package/required-pages/pages.json +0 -1
package/required-pages/settings.html +0 -841
package/required-pages/settings.json +0 -1
package/required-pages/synthos_apis.html +0 -272
package/required-pages/synthos_apis.json +0 -1
package/required-pages/synthos_scripts.json +0 -1

package/required-pages/settings/page.html ADDED Viewed

@@ -0,0 +1,1753 @@
+<!DOCTYPE html><html lang="en"><head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SynthOS - Settings</title>
+    <script id="theme-info" src="/api/theme-info.js" data-locked="true"></script>
+    <link id="theme-css" rel="stylesheet" href="/api/theme.css" data-locked="true">
+    <style>
+        /* Layout-specific rules only — all component styling via FluentLM */
+        #settingsBtn { opacity: 0.4; pointer-events: none; }
+        .accordion-section { display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden; border-bottom: 1px solid var(--neutralLight); }
+        .accordion-section:last-child { border-bottom: none; }
+        .accordion-section.active { flex-shrink: 1; flex-grow: 1; min-height: 0; }
+        .accordion-header { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 14px 20px; background: none; border: none; color: var(--bodyText); font-size: 15px; font-weight: 600; cursor: pointer; transition: background .2s; flex-shrink: 0; }
+        .accordion-header:hover { background: var(--defaultHoverBackground); }
+        .accordion-section.active .accordion-header { background: var(--defaultHoverBackground); }
+        .accordion-chevron { font-size: 11px; color: var(--bodySubtext); transition: transform .3s; }
+        .accordion-section.active .accordion-chevron { transform: rotate(180deg); }
+        .accordion-body { display: none; flex-direction: column; flex-grow: 1; min-height: 0; overflow: hidden; }
+        .accordion-section.active .accordion-body { display: flex; }
+        .accordion-content { display: flex; flex-direction: column; gap: 15px; overflow-y: auto; padding: 20px; flex-grow: 1; }
+        .button-row { display: flex; justify-content: flex-end; padding: 12px 20px; border-top: 1px solid var(--neutralLight); flex-shrink: 0; }
+        .wizard-hidden { display: none !important; }
+        .model-card { border: 1px solid var(--neutralLight); border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: var(--defaultStateBackground); }
+        .model-card.disabled { opacity: 0.35; pointer-events: none; user-select: none; }
+        .accordion-section.disabled .accordion-header { opacity: 0.35; pointer-events: none; cursor: default; }
+        .connector-grid { display: flex; flex-wrap: wrap; gap: 12px; }
+        .connector-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 18px 12px; border-radius: 12px; border: 1px solid var(--neutralLight); background: var(--defaultStateBackground); cursor: pointer; transition: background .2s, border-color .2s, box-shadow .2s, transform .15s; gap: 8px; min-width: 130px; }
+        .connector-tile:hover { background: var(--defaultHoverBackground); border-color: var(--themePrimary); box-shadow: 0 4px 12px rgba(0,0,0,.1); transform: translateY(-1px); }
+        .connector-tile.configured { border-color: var(--themePrimary); box-shadow: 0 2px 8px var(--themeLighter); }
+        .filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
+        .filter-buttons-container { display: flex; gap: 8px; flex-shrink: 1; min-width: 0; overflow: hidden; flex-wrap: nowrap; }
+        .more-dropdown { position: relative; flex-shrink: 0; }
+        .more-menu { position: absolute; top: 100%; left: 0; margin-top: 4px; min-width: 150px; max-height: 250px; overflow-y: auto; display: none; z-index: 100; }
+        .agent-chat-panel { border: 1px solid var(--neutralLight); border-radius: 8px; margin-top: 12px; overflow: hidden; display: none; }
+        .agent-chat-panel.open { display: flex; flex-direction: column; }
+        .agent-chat-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background: var(--defaultHoverBackground); font-size: 13px; font-weight: 600; color: var(--bodyText); }
+        .agent-chat-messages { max-height: 250px; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
+        .agent-chat-msg { padding: 8px 12px; border-radius: 10px; max-width: 85%; line-height: 1.5; word-wrap: break-word; white-space: pre-wrap; }
+        .agent-chat-msg.user { background: var(--themePrimary); color: #fff; align-self: flex-end; }
+        .agent-chat-msg.agent { background: var(--defaultStateBackground); color: var(--bodyText); align-self: flex-start; border: 1px solid var(--neutralLight); }
+        .agent-chat-msg.error { background: var(--errorBackground); color: var(--errorText); align-self: center; font-size: 12px; }
+        .agent-chat-msg.status { color: var(--bodySubtext); align-self: center; font-size: 12px; font-style: italic; }
+        .agent-chat-input-row { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--neutralLight); }
+    </style>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/14.1.1/marked.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.1.0/mermaid.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
+</head>
+<body>
+    <div class="shell-toolbar" data-locked="true">
+        <button class="shell-toolbar-btn" id="builderToggle" aria-label="Page Builder" data-locked="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M7 18.5H6.2c-1.77 0-3.2-1.43-3.2-3.2V7.7C3 5.93 4.43 4.5 6.2 4.5h11.6c1.77 0 3.2 1.43 3.2 3.2v7.6c0 1.77-1.43 3.2-3.2 3.2H12l-4.2 3.2c-.5.38-1.2.02-1.2-.6V18.5Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><circle cx="8.5" cy="11.5" r="1" fill="currentColor"/><circle cx="12" cy="11.5" r="1" fill="currentColor"/><circle cx="15.5" cy="11.5" r="1" fill="currentColor"/></svg></button>
+        <button class="shell-toolbar-btn" id="pagesBtn" aria-label="View All Pages" data-locked="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none"><rect x="3" y="3" width="11" height="12" rx="1.5" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M6 7.5h5M6 10h3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><rect x="18" y="3" width="11" height="12" rx="1.5" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M21 7.5h5M21 10h3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><rect x="3" y="18" width="11" height="12" rx="1.5" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M6 22.5h5M6 25h3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><rect x="18" y="18" width="11" height="12" rx="1.5" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M21 22.5h5M21 25h3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></button>
+        <button class="shell-toolbar-btn" id="saveBtn" aria-label="Save Page" data-locked="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M17 21v-8H7v8" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M7 3v5h8" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg></button>
+        <div class="shell-toolbar-spacer" data-locked="true"></div>
+        <button class="shell-toolbar-btn" id="settingsBtn" aria-label="Settings" data-locked="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" stroke="currentColor" stroke-width="1.8"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
+    </div>
+    <div class="chat-panel" data-locked="true">
+        <div class="chat-header" data-locked="true"><span>Page Builder</span><button class="chat-header-close" id="builderClose" aria-label="Close builder" data-locked="true">&times;</button></div>
+        <div class="chat-messages" id="chatMessages" data-locked="true">
+            <div class="chat-message" id="defaultGreeting">
+                <p><strong>SynthOS:</strong> This is where you can customize your experience. Change your theme and toolbar layout under <strong>Appearance</strong>, configure AI models under <strong>Page Building &amp; Chat</strong>, or set up integrations under <strong>Connectors</strong> and <strong>Agents</strong>.</p>
+                <p>Click <strong>Apply</strong> when you're ready to save your changes.</p>
+            </div>
+            <div class="chat-message" id="firstRunGreeting" style="display:none;">
+                <p><strong>SynthOS:</strong> Welcome to SynthOS! We're glad you're here.</p>
+                <p>Before you can start building, we need to connect to an AI provider. Just pick your provider below, paste in your API key, and you'll be ready to go.</p>
+                <p>You can always come back to this page later to change your theme or enable additional features.</p>
+            </div>
+        </div>
+        <form action="/" method="POST" id="chatForm" data-locked="true">
+            <textarea class="chat-input" id="chatInput" name="message" rows="2" placeholder="Type a message..." data-locked="true"></textarea>
+        </form>
+    </div>
+    <div class="viewer-panel" id="viewerPanel" style="justify-content: flex-start; align-items: stretch;">
+        <div style="padding: 16px 20px; border-bottom: 1px solid var(--neutralLight);">
+            <span class="flm-text flm-text--xLarge flm-text--bold">Settings</span>
+        </div>
+        <div class="flm-stack" style="flex-grow: 1; overflow: hidden;">
+            <div class="accordion-section active" data-section="appearance">
+                <button class="accordion-header">
+                    <span>Appearance</span>
+                    <span class="accordion-chevron">&#9662;</span>
+                </button>
+                <div class="accordion-body">
+                    <div class="accordion-content">
+                        <div class="flm-textfield">
+                            <label class="flm-label" for="theme">Theme</label>
+                            <select id="theme" class="flm-textfield-input">
+                                <option value="">Loading themes...</option>
+                            </select>
+                        </div>
+                        <div class="flm-textfield">
+                            <label class="flm-label" for="toolbarPosition">Toolbar Position</label>
+                            <select id="toolbarPosition" class="flm-textfield-input">
+                                <option value="left">Left</option>
+                                <option value="right">Right</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="accordion-section" data-section="models">
+                <button class="accordion-header">
+                    <span>Page Building &amp; Chat</span>
+                    <span class="accordion-chevron">&#9662;</span>
+                </button>
+                <div class="accordion-body">
+                    <div class="accordion-content">
+                        <div id="configBanner" class="flm-messagebar flm-messagebar--warning" style="display:none;">
+                            Model configuration is required before you can use SynthOS. Please fill in the Page Builder fields below and click Apply.
+                        </div>
+                        <div class="model-card" id="builderCard">
+                            <span class="flm-text flm-text--mediumPlus flm-text--bold">Page Builder Model</span>
+                            <div class="flm-textfield">
+                                <label class="flm-label" for="provider-builder">Provider</label>
+                                <select id="provider-builder" class="flm-textfield-input" required="">
+                                    <option value="">Select a provider</option>
+                                </select>
+                            </div>
+                            <div class="flm-textfield" id="fg-apikey-builder">
+                                <label class="flm-label" for="serviceApiKey-builder">API Key</label>
+                                <input type="password" id="serviceApiKey-builder" class="flm-textfield-input" placeholder="Enter your API Key" required="">
+                                <div id="providerInstructions" class="flm-messagebar flm-messagebar--info" style="display:none;margin-top:8px;"></div>
+                            </div>
+                            <div class="flm-textfield" id="fg-model-builder">
+                                <label class="flm-label" for="model-builder">Model</label>
+                                <select id="model-builder" class="flm-textfield-input" required="">
+                                    <option value="">Select a model</option>
+                                </select>
+                            </div>
+                            <a id="moreSettingsLink" class="flm-link" style="font-size:13px;">&#9662; More settings</a>
+                            <div class="flm-textfield" id="fg-maxTokens-builder">
+                                <label class="flm-label" for="maxTokens-builder">Max Output Tokens</label>
+                                <input type="number" id="maxTokens-builder" class="flm-textfield-input" placeholder="Enter max token count" required="">
+                            </div>
+                            <div class="flm-textfield" id="fg-instructions-builder">
+                                <label class="flm-label" for="instructions-builder">Additional Instructions</label>
+                                <textarea id="instructions-builder" class="flm-textfield-input" placeholder="Enter any additional instructions"></textarea>
+                            </div>
+                        </div>
+                        <div class="model-card" id="chatCard">
+                            <span class="flm-text flm-text--mediumPlus flm-text--bold">Chat Model</span>
+                            <div class="flm-textfield" id="fg-provider-chat">
+                                <label class="flm-label" for="provider-chat">Provider</label>
+                                <select id="provider-chat" class="flm-textfield-input" required="">
+                                    <option value="">Select a provider</option>
+                                </select>
+                            </div>
+                            <div class="flm-textfield" id="fg-apikey-chat">
+                                <label class="flm-label" for="serviceApiKey-chat">API Key</label>
+                                <input type="password" id="serviceApiKey-chat" class="flm-textfield-input" placeholder="Enter your API Key" required="">
+                            </div>
+                            <div class="flm-textfield" id="fg-model-chat">
+                                <label class="flm-label" for="model-chat">Model</label>
+                                <select id="model-chat" class="flm-textfield-input" required="">
+                                    <option value="">Select a model</option>
+                                </select>
+                            </div>
+                            <a id="moreSettingsLinkChat" class="flm-link" style="font-size:13px;">&#9662; More settings</a>
+                            <div class="flm-textfield" id="fg-maxTokens-chat">
+                                <label class="flm-label" for="maxTokens-chat">Max Output Tokens</label>
+                                <input type="number" id="maxTokens-chat" class="flm-textfield-input" placeholder="Enter max token count" required="">
+                            </div>
+                            <div class="flm-textfield" id="fg-instructions-chat">
+                                <label class="flm-label" for="instructions-chat">Additional Instructions</label>
+                                <textarea id="instructions-chat" class="flm-textfield-input" placeholder="Enter any additional instructions"></textarea>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="accordion-section" data-section="connectors">
+                <button class="accordion-header">
+                    <span>Connectors <span style="display:inline-block;margin-left:6px;padding:1px 7px;font-size:10px;font-weight:600;letter-spacing:.5px;border-radius:6px;background:var(--themePrimary);color:#fff;vertical-align:middle;line-height:16px;text-transform:uppercase;">Preview</span></span>
+                    <span class="accordion-chevron">&#9662;</span>
+                </button>
+                <div class="accordion-body">
+                    <div class="accordion-content">
+                        <div class="filter-bar" id="connectorFilterBar">
+                            <div class="filter-buttons-container" id="connectorFilterButtons"></div>
+                            <div class="more-dropdown" id="connMoreDropdown" style="display:none;">
+                                <button class="flm-button flm-button--subtle" id="connMoreBtn">More <i class="flm-icon" data-icon="ChevronDown"></i></button>
+                                <div class="flm-contextmenu more-menu" id="connMoreMenu"></div>
+                            </div>
+                            <div class="flm-searchbox" id="connectorSearchBox">
+                                <input class="flm-searchbox-input" type="text" id="connectorSearch" placeholder="Search connectors...">
+                            </div>
+                        </div>
+                        <div class="connector-grid" id="connectorGrid"></div>
+                    </div>
+                </div>
+            </div>
+            <div class="accordion-section" data-section="agents">
+                <button class="accordion-header">
+                    <span>Agents <span style="display:inline-block;margin-left:6px;padding:1px 7px;font-size:10px;font-weight:600;letter-spacing:.5px;border-radius:6px;background:var(--themePrimary);color:#fff;vertical-align:middle;line-height:16px;text-transform:uppercase;">Preview</span></span>
+                    <span class="accordion-chevron">&#9662;</span>
+                </button>
+                <div class="accordion-body">
+                    <div class="accordion-content">
+                        <div class="flm-stack flm-stack--horizontal flm-stack--space-between" style="align-items:center;margin-bottom:12px;">
+                            <span class="flm-text flm-text--small flm-text--secondary">Configure agents (A2A or OpenClaw) that your pages can communicate with.</span>
+                            <button class="flm-button flm-button--primary" id="addAgentBtn" style="white-space:nowrap;">+ Add Agent</button>
+                        </div>
+                        <div class="flm-list flm-list--bordered" id="agentList"></div>
+                        <div id="agentEmptyState" style="display:none;text-align:center;padding:30px;color:var(--bodySubtext);font-size:14px;">
+                            No agents configured yet. Click "+ Add Agent" to get started.
+                        </div>
+                        <div class="agent-chat-panel" id="agentChatPanel">
+                            <div class="agent-chat-header">
+                                <span id="agentChatTitle">Chat with Agent</span>
+                                <button class="flm-button flm-button--subtle flm-button--icon" id="agentChatClose" aria-label="Close chat" data-icon="Cancel"></button>
+                            </div>
+                            <div class="agent-chat-messages" id="agentChatMessages"></div>
+                            <div class="agent-chat-input-row">
+                                <input type="text" class="flm-textfield-input" id="agentChatInput" placeholder="Type a test message..." style="flex:1;">
+                                <button class="flm-button flm-button--primary" id="agentChatSendBtn">Send</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="button-row" id="applyRow">
+            <button class="flm-button" id="applyBtn">Apply</button>
+        </div>
+        <div id="loadingOverlay" class="loading-overlay"><div class="spinner"></div></div>
+    </div>
+    <div class="flm-dialog-overlay" id="agentModal">
+        <div class="flm-dialog" style="max-width:520px;width:90%;max-height:85vh;overflow-y:auto;">
+            <div class="flm-dialog-header">
+                <h2 class="flm-dialog-title" id="agentModalTitle">Add Agent</h2>
+            </div>
+            <div class="flm-dialog-body">
+                <div class="flm-stack" style="gap:10px;" id="agentFormGroup">
+                    <div class="flm-textfield">
+                        <label class="flm-label">Agent Type</label>
+                        <div class="flm-stack flm-stack--horizontal" style="gap:8px;">
+                            <button class="flm-pivot-tab flm-pivot-tab--active" id="agentTypeA2A">A2A Agent</button>
+                            <button class="flm-pivot-tab" id="agentTypeOpenClaw">OpenClaw Agent</button>
+                        </div>
+                    </div>
+                    <div class="flm-textfield">
+                        <label class="flm-label" for="agentUrl">Agent URL</label>
+                        <div class="flm-stack flm-stack--horizontal" style="gap:8px;">
+                            <input type="text" id="agentUrl" class="flm-textfield-input" placeholder="https://example.com" style="flex:1;">
+                            <button class="flm-button flm-button--primary" id="agentDiscoverBtn" style="white-space:nowrap;">Discover</button>
+                        </div>
+                        <span id="agentUrlHint" class="flm-text flm-text--small flm-text--secondary" style="margin-top:4px;">Enter a URL and click Discover to auto-fill from the agent card, or fill in the fields manually.</span>
+                    </div>
+                    <div class="flm-textfield" id="agentTokenGroup" style="display:none;">
+                        <label class="flm-label" for="agentToken">Token</label>
+                        <input type="password" id="agentToken" class="flm-textfield-input" placeholder="Gateway authentication token">
+                    </div>
+                    <div class="flm-textfield" id="agentSessionKeyGroup" style="display:none;">
+                        <label class="flm-label" for="agentSessionKey">Default Session Key</label>
+                        <input type="text" id="agentSessionKey" class="flm-textfield-input" placeholder="e.g. agent:main:main">
+                    </div>
+                    <div id="agentSshTunnelGroup" style="display:none;">
+                        <div class="flm-stack flm-stack--horizontal" style="align-items:center;gap:8px;cursor:pointer;margin-bottom:8px;" id="agentSshTunnelToggleHeader">
+                            <span class="flm-text flm-text--small flm-text--secondary" id="agentSshTunnelArrow">&#9654;</span>
+                            <label class="flm-label" style="margin:0;cursor:pointer;">SSH Tunnel</label>
+                            <label class="flm-toggle flm-toggle--inline" style="margin-left:auto;" onclick="event.stopPropagation();">
+                                <input type="checkbox" class="flm-toggle-input" id="agentSshTunnelEnabled">
+                                <span class="flm-toggle-track"><span class="flm-toggle-thumb"></span></span>
+                            </label>
+                        </div>
+                        <div id="agentSshTunnelFields" style="display:none;padding-left:4px;" class="flm-stack" >
+                            <div class="flm-textfield" style="margin-bottom:8px;">
+                                <label class="flm-label" for="agentSshCommand" style="font-size:12px;">SSH Command</label>
+                                <input type="text" id="agentSshCommand" class="flm-textfield-input" placeholder="ssh -p 22 -N -L 18789:127.0.0.1:43901 root@0.0.0.0">
+                            </div>
+                            <div class="flm-textfield" style="margin-bottom:8px;">
+                                <label class="flm-label" for="agentSshPassword" style="font-size:12px;">Password</label>
+                                <input type="password" id="agentSshPassword" class="flm-textfield-input" placeholder="SSH password">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flm-textfield">
+                        <label class="flm-label" for="agentName">Name</label>
+                        <input type="text" id="agentName" class="flm-textfield-input" placeholder="My Agent">
+                    </div>
+                    <div class="flm-textfield">
+                        <label class="flm-label" for="agentDescription">Description</label>
+                        <textarea id="agentDescription" class="flm-textfield-input" placeholder="Describe what this agent does and when to use it..." style="min-height:60px;"></textarea>
+                    </div>
+                    <div id="agentSkillsPreview" style="display:none;padding:10px;border-radius:8px;border:1px solid var(--neutralLight);background:var(--defaultStateBackground);">
+                        <span class="flm-text flm-text--small flm-text--semibold flm-text--secondary" style="margin-bottom:4px;display:block;">Discovered Skills</span>
+                        <div id="agentSkillsList" class="flm-text flm-text--small flm-text--secondary"></div>
+                    </div>
+                </div>
+            </div>
+            <div class="flm-dialog-footer">
+                <button class="flm-button flm-button--primary" id="agentSaveBtn">Save</button>
+                <button class="flm-button" id="agentCancelBtn">Cancel</button>
+                <button class="flm-button" id="agentRemoveBtn" style="display:none;color:var(--errorText);">Remove</button>
+            </div>
+        </div>
+    </div>
+    <div class="flm-dialog-overlay" id="connectorModal">
+        <div class="flm-dialog" style="max-width:520px;width:90%;max-height:85vh;overflow-y:auto;">
+            <div class="flm-dialog-header">
+                <h2 class="flm-dialog-title" id="connectorModalTitle"></h2>
+            </div>
+            <div class="flm-dialog-body">
+                <div class="flm-stack" style="gap:12px;">
+                    <span class="flm-text flm-text--small flm-text--secondary" id="connectorModalDesc"></span>
+                    <div id="connectorOnboarding" style="display:none;">
+                        <a id="connectorOnboardingLink" class="flm-link" href="#" target="_blank">
+                           Get your API key &#8594;
+                        </a>
+                        <ol id="connectorOnboardingSteps"
+                            style="font-size:13px;color:var(--bodySubtext);margin:8px 0 0;padding-left:20px;line-height:1.8;">
+                        </ol>
+                    </div>
+                    <div id="connectorApiKeyGroup" class="flm-textfield">
+                        <label class="flm-label" for="connectorApiKey">API Key</label>
+                        <input type="password" id="connectorApiKey" class="flm-textfield-input" placeholder="Enter your API key">
+                    </div>
+                    <div id="connectorOAuthGroup" style="display:none;">
+                        <div id="connectorOAuthStatus" style="margin-bottom:12px;font-size:13px;line-height:1.5;"></div>
+                        <div id="connectorOAuthModeToggle" class="flm-stack flm-stack--horizontal" style="gap:8px;margin-bottom:12px;">
+                            <button class="flm-pivot-tab flm-pivot-tab--active" id="oauthModeManual">Manual Token</button>
+                            <button class="flm-pivot-tab" id="oauthModeApp">OAuth App</button>
+                        </div>
+                        <div id="connectorManualGroup">
+                            <div class="flm-textfield" style="margin-bottom:10px;">
+                                <label class="flm-label" for="oauth-field-accessToken">Access Token</label>
+                                <input type="password" id="oauth-field-accessToken" class="flm-textfield-input" placeholder="Paste token from Graph API Explorer">
+                            </div>
+                            <div class="flm-textfield" style="margin-bottom:10px;">
+                                <label class="flm-label" for="oauth-field-userId">IG User ID <span class="flm-text--secondary" style="font-weight:400;">(optional)</span></label>
+                                <input type="text" id="oauth-field-userId" class="flm-textfield-input" placeholder="Instagram Business Account ID">
+                            </div>
+                        </div>
+                        <div id="connectorAppGroup" style="display:none;">
+                            <div id="connectorOAuthFields" class="flm-stack" style="gap:10px;"></div>
+                            <button class="flm-button flm-button--primary" id="connectorConnectBtn" style="width:100%;margin-top:8px;margin-bottom:8px;">Connect with OAuth</button>
+                        </div>
+                        <button class="flm-button" id="connectorDisconnectBtn" style="width:100%;display:none;color:var(--errorText);">Disconnect</button>
+                    </div>
+                    <div class="flm-stack flm-stack--horizontal" style="align-items:center;gap:12px;">
+                        <label class="flm-label" for="connectorEnabled" style="margin-bottom:0;">Enabled</label>
+                        <label class="flm-toggle flm-toggle--inline">
+                            <input type="checkbox" class="flm-toggle-input" id="connectorEnabled">
+                            <span class="flm-toggle-track"><span class="flm-toggle-thumb"></span></span>
+                        </label>
+                    </div>
+                </div>
+            </div>
+            <div class="flm-dialog-footer">
+                <button class="flm-button flm-button--primary" id="connectorSaveBtn">Save</button>
+                <button class="flm-button" id="connectorCancelBtn">Cancel</button>
+                <button class="flm-button" id="connectorRemoveBtn" style="color:var(--errorText);">Remove</button>
+            </div>
+        </div>
+    </div>
+    <div class="flm-dialog-overlay" id="unsavedDialog" data-light-dismiss>
+        <div class="flm-dialog" style="max-width:400px;width:90%;">
+            <div class="flm-dialog-header">
+                <h2 class="flm-dialog-title">Unsaved Changes</h2>
+            </div>
+            <div class="flm-dialog-body">
+                <p class="flm-text">You have unsaved changes. Do you want to discard them and leave this page?</p>
+            </div>
+            <div class="flm-dialog-footer">
+                <div style="flex:1;"></div>
+                <button class="flm-button" id="unsavedStayBtn">Stay</button>
+                <button class="flm-button" id="unsavedLeaveBtn" style="color:var(--errorText);">Discard &amp; Leave</button>
+            </div>
+        </div>
+    </div>
+    <div id="instructionsHidden" style="display: none;" data-locked="true"></div>
+    <div id="thoughts" style="display: none;" data-locked="true"></div>
+    <script id="settings-logic">
+// --- Accordion logic ---
+function openSection(sectionName) {
+    document.querySelectorAll('.accordion-section').forEach(function(s) {
+        s.classList.remove('active');
+    });
+    var target = document.querySelector('.accordion-section[data-section="' + sectionName + '"]');
+    if (target) target.classList.add('active');
+}
+document.querySelectorAll('.accordion-header').forEach(function(header) {
+    header.addEventListener('click', function() {
+        var section = header.closest('.accordion-section');
+        if (section.classList.contains('disabled')) return;
+        var sectionName = section.dataset.section;
+        var isActive = section.classList.contains('active');
+        document.querySelectorAll('.accordion-section').forEach(function(s) {
+            s.classList.remove('active');
+        });
+        if (!isActive) {
+            section.classList.add('active');
+            // Update URL without reload
+            var url = new URL(window.location);
+            url.searchParams.set('tab', sectionName);
+            history.replaceState(null, '', url);
+        }
+    });
+});
+// --- URL param: open requested tab ---
+var params = new URLSearchParams(window.location.search);
+var tabParam = params.get('tab');
+if (tabParam && ['appearance', 'models', 'connectors', 'agents'].indexOf(tabParam) !== -1) {
+    openSection(tabParam);
+}
+// --- Connectors logic ---
+var connectorList = [], activeConnectorCategory = 'All', currentConnectorId = null;
+var connVisibleCats = [], connOverflowCats = [];
+// MRU: most-recently-used categories get priority for visible slots
+var connMru = (function() {
+    try { return JSON.parse(localStorage.getItem('synthos_connMru')) || []; }
+    catch(e) { return []; }
+})();
+function connMruTouch(cat) {
+    if (cat === 'All' || cat === 'Enabled') return;
+    connMru = connMru.filter(function(c) { return c !== cat; });
+    connMru.unshift(cat);
+    if (connMru.length > 20) connMru.length = 20;
+    try { localStorage.setItem('synthos_connMru', JSON.stringify(connMru)); } catch(e) {}
+}
+function getAllConnectorCategories() {
+    var cats = new Set();
+    connectorList.forEach(function(c) { cats.add(c.category); });
+    return Array.from(cats).sort();
+}
+function calculateConnectorVisibleCats() {
+    var allCats = getAllConnectorCategories();
+    var filterBar = document.getElementById('connectorFilterBar');
+    var searchEl = document.getElementById('connectorSearchBox');
+    var moreDropdown = document.getElementById('connMoreDropdown');
+    if (!filterBar) return;
+    var availableWidth = filterBar.offsetWidth - (searchEl.offsetWidth + 8) - 16;
+    // Measure button widths
+    var temp = document.createElement('button');
+    temp.className = 'flm-pivot-tab';
+    temp.style.visibility = 'hidden';
+    temp.style.position = 'absolute';
+    document.body.appendChild(temp);
+    // Measure "All" button
+    temp.textContent = 'All';
+    var allBtnWidth = temp.offsetWidth + 8;
+    // Measure "Enabled" button (always shown)
+    temp.textContent = 'Enabled';
+    var enabledBtnWidth = temp.offsetWidth + 8;
+    // Measure "More" button
+    temp.textContent = 'More \u25BE';
+    var moreBtnWidth = temp.offsetWidth + 8;
+    // Measure each category button
+    var catWidths = {};
+    allCats.forEach(function(cat) {
+        temp.textContent = cat;
+        catWidths[cat] = temp.offsetWidth + 8;
+    });
+    document.body.removeChild(temp);
+    // Sort categories: MRU first, then alphabetical
+    var sorted = allCats.slice().sort(function(a, b) {
+        var ai = connMru.indexOf(a);
+        var bi = connMru.indexOf(b);
+        var aInMru = ai !== -1;
+        var bInMru = bi !== -1;
+        if (aInMru && !bInMru) return -1;
+        if (!aInMru && bInMru) return 1;
+        if (aInMru && bInMru) return ai - bi;
+        return a.localeCompare(b);
+    });
+    connVisibleCats = [];
+    connOverflowCats = [];
+    var usedWidth = allBtnWidth + enabledBtnWidth;
+    var overflowing = false;
+    for (var i = 0; i < sorted.length; i++) {
+        var cat = sorted[i];
+        var remaining = sorted.length - i;
+        // When we'd start overflowing, reserve space for the More button
+        var widthIfAdded = usedWidth + catWidths[cat];
+        if (!overflowing && remaining > 1) widthIfAdded += moreBtnWidth;
+        if (!overflowing && usedWidth + catWidths[cat] <= availableWidth - (remaining > 1 ? moreBtnWidth : 0)) {
+            connVisibleCats.push(cat);
+            usedWidth += catWidths[cat];
+        } else {
+            overflowing = true;
+            connOverflowCats.push(cat);
+        }
+    }
+    // If only one overflow, try to fit it without the More button
+    if (connOverflowCats.length === 1) {
+        if (usedWidth + catWidths[connOverflowCats[0]] <= availableWidth) {
+            connVisibleCats.push(connOverflowCats.pop());
+        }
+    }
+}
+function renderConnectorFilterBar() {
+    calculateConnectorVisibleCats();
+    var container = document.getElementById('connectorFilterButtons');
+    var moreDropdown = document.getElementById('connMoreDropdown');
+    var moreBtn = document.getElementById('connMoreBtn');
+    var moreMenu = document.getElementById('connMoreMenu');
+    container.innerHTML = '';
+    moreMenu.innerHTML = '';
+    // "All" button
+    var allBtn = document.createElement('button');
+    allBtn.className = 'flm-pivot-tab' + (activeConnectorCategory === 'All' ? ' flm-pivot-tab--active' : '');
+    allBtn.textContent = 'All';
+    allBtn.addEventListener('click', function() { setConnectorCategory('All'); });
+    container.appendChild(allBtn);
+    // "Enabled" button (fixed, always visible)
+    var enabledBtn = document.createElement('button');
+    enabledBtn.className = 'flm-pivot-tab' + (activeConnectorCategory === 'Enabled' ? ' flm-pivot-tab--active' : '');
+    enabledBtn.textContent = 'Enabled';
+    enabledBtn.addEventListener('click', function() { setConnectorCategory('Enabled'); });
+    container.appendChild(enabledBtn);
+    // Visible category buttons
+    connVisibleCats.forEach(function(cat) {
+        var btn = document.createElement('button');
+        btn.className = 'flm-pivot-tab' + (activeConnectorCategory === cat ? ' flm-pivot-tab--active' : '');
+        btn.textContent = cat;
+        btn.addEventListener('click', function() { setConnectorCategory(cat); });
+        container.appendChild(btn);
+    });
+    // Overflow dropdown
+    if (connOverflowCats.length > 0) {
+        moreDropdown.style.display = '';
+        moreBtn.className = 'flm-button flm-button--subtle' + (connOverflowCats.indexOf(activeConnectorCategory) !== -1 ? ' flm-pivot-tab--active' : '');
+        connOverflowCats.forEach(function(cat) {
+            var item = document.createElement('button');
+            item.className = 'flm-contextmenu-item' + (activeConnectorCategory === cat ? ' flm-contextmenu-item--checked' : '');
+            var itemText = document.createElement('span');
+            itemText.className = 'flm-contextmenu-item-text';
+            itemText.textContent = cat;
+            item.appendChild(itemText);
+            item.addEventListener('click', function() {
+                setConnectorCategory(cat);
+                moreMenu.classList.remove('flm-contextmenu--visible');
+            });
+            moreMenu.appendChild(item);
+        });
+    } else {
+        moreDropdown.style.display = 'none';
+    }
+}
+function setConnectorCategory(cat) {
+    activeConnectorCategory = cat;
+    connMruTouch(cat);
+    renderConnectorFilterBar();
+    renderConnectorGrid();
+}
+function loadConnectors() {
+    fetch('/api/connectors').then(function(r) { return r.json(); }).then(function(list) {
+        connectorList = list;
+        renderConnectorFilterBar();
+        renderConnectorGrid();
+    });
+}
+function renderConnectorGrid() {
+    var grid = document.getElementById('connectorGrid');
+    var searchTerm = (document.getElementById('connectorSearch').value || '').toLowerCase();
+    grid.innerHTML = '';
+    connectorList.filter(function(c) {
+        if (activeConnectorCategory === 'Enabled') {
+            if (!c.configured) return false;
+        } else if (activeConnectorCategory !== 'All' && c.category !== activeConnectorCategory) {
+            return false;
+        }
+        if (searchTerm && c.name.toLowerCase().indexOf(searchTerm) === -1) return false;
+        return true;
+    }).forEach(function(c) {
+        var tile = document.createElement('div');
+        tile.className = 'connector-tile' + (c.configured ? ' configured' : '');
+        tile.setAttribute('data-tooltip', c.description);
+        tile.addEventListener('click', function() { openConnectorModal(c.id); });
+        var name = document.createElement('div');
+        name.className = 'flm-text flm-text--semibold';
+        name.textContent = c.name;
+        var cat = document.createElement('span');
+        cat.className = 'flm-text flm-text--small flm-text--secondary';
+        cat.style.cssText = 'background:var(--defaultHoverBackground);padding:2px 8px;border-radius:10px;';
+        cat.textContent = c.category;
+        tile.appendChild(name);
+        tile.appendChild(cat);
+        grid.appendChild(tile);
+    });
+}
+var currentConnectorDetail = null;
+function openConnectorModal(id) {
+    currentConnectorId = id;
+    fetch('/api/connectors/' + encodeURIComponent(id)).then(function(r) { return r.json(); }).then(function(detail) {
+        currentConnectorDetail = detail;
+        document.getElementById('connectorModalTitle').textContent = detail.name;
+        document.getElementById('connectorModalDesc').textContent = detail.description;
+        var onboardingEl = document.getElementById('connectorOnboarding');
+        if (detail.onboarding && detail.onboarding.url) {
+            document.getElementById('connectorOnboardingLink').href = detail.onboarding.url;
+            var stepsOl = document.getElementById('connectorOnboardingSteps');
+            stepsOl.innerHTML = (detail.onboarding.steps || []).map(function(s) {
+                return '<li>' + s + '</li>';
+            }).join('');
+            onboardingEl.style.display = '';
+        } else {
+            onboardingEl.style.display = 'none';
+        }
+        document.getElementById('connectorEnabled').checked = detail.enabled;
+        document.getElementById('connectorRemoveBtn').style.display = (detail.configured || detail.hasKey) ? '' : 'none';
+        var isOAuth = detail.authStrategy === 'oauth2';
+        document.getElementById('connectorApiKeyGroup').style.display = isOAuth ? 'none' : '';
+        document.getElementById('connectorOAuthGroup').style.display = isOAuth ? '' : 'none';
+        if (isOAuth) {
+            // Render OAuth App fields (App ID, App Secret)
+            var fieldsContainer = document.getElementById('connectorOAuthFields');
+            fieldsContainer.innerHTML = '';
+            (detail.fields || []).forEach(function(f) {
+                var wrap = document.createElement('div');
+                wrap.className = 'flm-textfield';
+                var lbl = document.createElement('label');
+                lbl.className = 'flm-label';
+                lbl.textContent = f.label;
+                lbl.setAttribute('for', 'oauth-field-' + f.name);
+                var inp = document.createElement('input');
+                inp.type = f.type;
+                inp.id = 'oauth-field-' + f.name;
+                inp.className = 'flm-textfield-input';
+                inp.placeholder = detail.hasKey ? '(saved — leave blank to keep)' : 'Enter ' + f.label;
+                wrap.appendChild(lbl);
+                wrap.appendChild(inp);
+                fieldsContainer.appendChild(wrap);
+            });
+            // Reset manual token fields
+            document.getElementById('oauth-field-accessToken').value = '';
+            document.getElementById('oauth-field-accessToken').placeholder = detail.connected ? '(token saved — leave blank to keep)' : 'Paste token from Graph API Explorer';
+            document.getElementById('oauth-field-userId').value = '';
+            document.getElementById('oauth-field-userId').placeholder = detail.connected ? (detail.accountName || 'Instagram Business Account ID') : 'Instagram Business Account ID';
+            // Default to manual mode
+            setOAuthMode('manual');
+            // Show connected status
+            var statusEl = document.getElementById('connectorOAuthStatus');
+            var disconnectBtn = document.getElementById('connectorDisconnectBtn');
+            var modeToggle = document.getElementById('connectorOAuthModeToggle');
+            if (detail.connected) {
+                var displayName = detail.accountName || detail.name;
+                statusEl.innerHTML = '<span style="color:var(--themePrimary);">Connected as <strong>' + displayName + '</strong></span>';
+                statusEl.style.display = '';
+                disconnectBtn.style.display = '';
+                modeToggle.style.display = 'none';
+            } else {
+                statusEl.innerHTML = '';
+                statusEl.style.display = 'none';
+                disconnectBtn.style.display = 'none';
+                modeToggle.style.display = 'flex';
+            }
+        } else {
+            document.getElementById('connectorApiKey').value = '';
+            document.getElementById('connectorApiKey').placeholder = detail.hasKey ? '(key saved — leave blank to keep)' : 'Enter your API key';
+        }
+        document.getElementById('connectorModal').classList.add('flm-dialog-overlay--open');
+    });
+}
+var currentOAuthMode = 'manual';
+function setOAuthMode(mode) {
+    currentOAuthMode = mode;
+    document.getElementById('connectorManualGroup').style.display = mode === 'manual' ? '' : 'none';
+    document.getElementById('connectorAppGroup').style.display = mode === 'app' ? '' : 'none';
+    document.getElementById('oauthModeManual').className = 'flm-pivot-tab' + (mode === 'manual' ? ' flm-pivot-tab--active' : '');
+    document.getElementById('oauthModeApp').className = 'flm-pivot-tab' + (mode === 'app' ? ' flm-pivot-tab--active' : '');
+}
+document.getElementById('oauthModeManual').addEventListener('click', function() { setOAuthMode('manual'); });
+document.getElementById('oauthModeApp').addEventListener('click', function() { setOAuthMode('app'); });
+function closeConnectorModal() {
+    document.getElementById('connectorModal').classList.remove('flm-dialog-overlay--open');
+    currentConnectorId = null;
+}
+document.getElementById('connectorCancelBtn').addEventListener('click', closeConnectorModal);
+var connectorModalMouseDownTarget = null;
+document.getElementById('connectorModal').addEventListener('mousedown', function(e) { connectorModalMouseDownTarget = e.target; });
+document.getElementById('connectorModal').addEventListener('click', function(e) {
+    if (e.target === this && connectorModalMouseDownTarget === this) closeConnectorModal();
+    connectorModalMouseDownTarget = null;
+});
+document.getElementById('connectorSaveBtn').addEventListener('click', function() {
+    if (!currentConnectorId) return;
+    var isOAuth = currentConnectorDetail && currentConnectorDetail.authStrategy === 'oauth2';
+    var body;
+    if (isOAuth) {
+        body = { enabled: document.getElementById('connectorEnabled').checked };
+        if (currentOAuthMode === 'manual') {
+            // Manual token entry
+            var token = document.getElementById('oauth-field-accessToken').value;
+            if (token) body.accessToken = token;
+            var uid = document.getElementById('oauth-field-userId').value;
+            if (uid) body.userId = uid;
+        } else {
+            // OAuth app credentials
+            (currentConnectorDetail.fields || []).forEach(function(f) {
+                var el = document.getElementById('oauth-field-' + f.name);
+                if (el && el.value) body[f.name] = el.value;
+            });
+        }
+    } else {
+        body = {
+            apiKey: document.getElementById('connectorApiKey').value,
+            enabled: document.getElementById('connectorEnabled').checked
+        };
+    }
+    fetch('/api/connectors/' + encodeURIComponent(currentConnectorId), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body)
+    }).then(function(r) {
+        if (r.ok) { closeConnectorModal(); loadConnectors(); }
+    });
+});
+document.getElementById('connectorConnectBtn').addEventListener('click', function() {
+    if (!currentConnectorId || !currentConnectorDetail) return;
+    // Save credentials first, then redirect to authorize
+    var body = { enabled: true };
+    (currentConnectorDetail.fields || []).forEach(function(f) {
+        var el = document.getElementById('oauth-field-' + f.name);
+        if (el && el.value) body[f.name] = el.value;
+    });
+    fetch('/api/connectors/' + encodeURIComponent(currentConnectorId), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body)
+    }).then(function(r) {
+        if (r.ok) {
+            window.location.href = '/api/connectors/' + encodeURIComponent(currentConnectorId) + '/authorize';
+        }
+    });
+});
+document.getElementById('connectorDisconnectBtn').addEventListener('click', function() {
+    if (!currentConnectorId) return;
+    fetch('/api/connectors/' + encodeURIComponent(currentConnectorId), { method: 'DELETE' }).then(function(r) {
+        if (r.ok) { closeConnectorModal(); loadConnectors(); }
+    });
+});
+document.getElementById('connectorRemoveBtn').addEventListener('click', function() {
+    if (!currentConnectorId) return;
+    fetch('/api/connectors/' + encodeURIComponent(currentConnectorId), { method: 'DELETE' }).then(function(r) {
+        if (r.ok) { closeConnectorModal(); loadConnectors(); }
+    });
+});
+document.getElementById('connectorSearch').addEventListener('input', renderConnectorGrid);
+// More dropdown toggle
+document.getElementById('connMoreBtn').addEventListener('click', function(e) {
+    e.stopPropagation();
+    document.getElementById('connMoreMenu').classList.toggle('flm-contextmenu--visible');
+});
+document.addEventListener('click', function() {
+    document.getElementById('connMoreMenu').classList.remove('flm-contextmenu--visible');
+});
+// Resize observer — recalculate visible categories when filter bar resizes
+var connFilterBar = document.getElementById('connectorFilterBar');
+if (connFilterBar && typeof ResizeObserver !== 'undefined') {
+    var connResizeObserver = new ResizeObserver(function() {
+        if (connectorList.length > 0) renderConnectorFilterBar();
+    });
+    connResizeObserver.observe(connFilterBar);
+}
+// Detect OAuth success/error from URL params
+var connectedParam = params.get('connected');
+var errorParam = params.get('error');
+if (connectedParam) {
+    // Open the connectors tab and show success
+    openSection('connectors');
+    setTimeout(function() { openConnectorModal(connectedParam); }, 500);
+    // Clean URL
+    var cleanUrl = new URL(window.location);
+    cleanUrl.searchParams.delete('connected');
+    history.replaceState(null, '', cleanUrl);
+}
+if (errorParam) {
+    openSection('connectors');
+    alert('OAuth error: ' + errorParam);
+    var cleanUrl2 = new URL(window.location);
+    cleanUrl2.searchParams.delete('error');
+    history.replaceState(null, '', cleanUrl2);
+}
+// --- Agents logic ---
+var agentList = [], currentAgentId = null, currentAgentSkills = null, currentAgentCapabilities = null;
+var currentAgentType = 'a2a';
+var chatAgentId = null;
+function loadAgents() {
+    fetch('/api/agents').then(function(r) { return r.json(); }).then(function(list) {
+        agentList = list;
+        renderAgentList();
+    });
+}
+function renderAgentList() {
+    var listEl = document.getElementById('agentList');
+    var emptyState = document.getElementById('agentEmptyState');
+    listEl.innerHTML = '';
+    listEl.style.display = agentList.length === 0 ? 'none' : '';
+    emptyState.style.display = agentList.length === 0 ? '' : 'none';
+    agentList.forEach(function(a) {
+        var row = document.createElement('div');
+        row.className = 'flm-list-item';
+        row.style.cssText = 'display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;';
+        // Status dot (openclaw only)
+        if (a.provider === 'openclaw') {
+            var dot = document.createElement('div');
+            dot.style.cssText = 'width:8px;height:8px;border-radius:50%;flex-shrink:0;background:' + (a.connected ? 'var(--successText)' : 'var(--disabledText)');
+            dot.title = a.connected ? 'Connected' : 'Disconnected';
+            row.appendChild(dot);
+        }
+        // Info section
+        var info = document.createElement('div');
+        info.className = 'flm-list-item-content';
+        info.style.cssText = 'flex:1;min-width:0;display:flex;align-items:center;gap:10px;';
+        var nameEl = document.createElement('span');
+        nameEl.className = 'flm-list-item-primary flm-text--semibold flm-text--nowrap';
+        nameEl.textContent = a.name;
+        var descEl = document.createElement('span');
+        descEl.className = 'flm-list-item-secondary flm-text--nowrap';
+        descEl.style.cssText = 'flex:1;min-width:0;';
+        descEl.textContent = a.description || '';
+        info.appendChild(nameEl);
+        info.appendChild(descEl);
+        row.appendChild(info);
+        // Badge
+        var badge = document.createElement('span');
+        badge.className = 'flm-text flm-text--small flm-text--secondary';
+        badge.style.cssText = 'background:var(--defaultHoverBackground);padding:2px 8px;border-radius:10px;white-space:nowrap;flex-shrink:0;';
+        badge.textContent = a.provider === 'openclaw' ? 'OpenClaw' : 'A2A';
+        row.appendChild(badge);
+        // Actions
+        var actions = document.createElement('div');
+        actions.style.cssText = 'display:flex;align-items:center;gap:8px;flex-shrink:0;';
+        // Chat or Reconnect button (depending on connection state)
+        var isDisconnected = a.provider === 'openclaw' && a.enabled !== false && !a.connected;
+        var chatBtn = document.createElement('button');
+        chatBtn.className = 'flm-button flm-button--subtle';
+        chatBtn.style.cssText = 'font-size:12px;padding:4px 10px;';
+        if (isDisconnected) {
+            chatBtn.textContent = 'Reconnect';
+            chatBtn.addEventListener('click', (function(agent) {
+                return function(e) {
+                    e.stopPropagation();
+                    chatBtn.disabled = true;
+                    chatBtn.textContent = 'Connecting...';
+                    fetch('/api/agents/' + encodeURIComponent(agent.id) + '/connect', { method: 'POST' })
+                        .then(function() { loadAgents(); })
+                        .catch(function() { chatBtn.disabled = false; chatBtn.textContent = 'Reconnect'; });
+                };
+            })(a));
+        } else {
+            chatBtn.textContent = 'Chat';
+            chatBtn.addEventListener('click', function(e) {
+                e.stopPropagation();
+                openAgentChat(a);
+            });
+        }
+        actions.appendChild(chatBtn);
+        // Edit button
+        var editBtn = document.createElement('button');
+        editBtn.className = 'flm-button flm-button--subtle';
+        editBtn.textContent = 'Edit';
+        editBtn.style.cssText = 'font-size:12px;padding:4px 10px;';
+        editBtn.addEventListener('click', function(e) {
+            e.stopPropagation();
+            openAgentEditModal(a);
+        });
+        actions.appendChild(editBtn);
+        // Enable/disable toggle
+        var toggleLabel = document.createElement('label');
+        toggleLabel.className = 'flm-toggle flm-toggle--inline';
+        var toggleInput = document.createElement('input');
+        toggleInput.type = 'checkbox';
+        toggleInput.className = 'flm-toggle-input';
+        toggleInput.checked = a.enabled !== false;
+        toggleInput.addEventListener('click', function(e) { e.stopPropagation(); });
+        toggleInput.addEventListener('change', (function(agentId, inp) {
+            return function() {
+                fetch('/api/agents/' + encodeURIComponent(agentId), {
+                    method: 'PATCH',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ enabled: inp.checked })
+                }).then(function() { loadAgents(); });
+            };
+        })(a.id, toggleInput));
+        var toggleTrack = document.createElement('span');
+        toggleTrack.className = 'flm-toggle-track';
+        var toggleThumb = document.createElement('span');
+        toggleThumb.className = 'flm-toggle-thumb';
+        toggleTrack.appendChild(toggleThumb);
+        toggleLabel.appendChild(toggleInput);
+        toggleLabel.appendChild(toggleTrack);
+        actions.appendChild(toggleLabel);
+        row.appendChild(actions);
+        listEl.appendChild(row);
+    });
+}
+// --- Agent quick chat ---
+function openAgentChat(agent) {
+    chatAgentId = agent.id;
+    document.getElementById('agentChatTitle').textContent = 'Chat with ' + agent.name;
+    document.getElementById('agentChatMessages').innerHTML = '';
+    document.getElementById('agentChatInput').value = '';
+    var panel = document.getElementById('agentChatPanel');
+    panel.classList.add('open');
+    document.getElementById('agentChatInput').focus();
+}
+function closeAgentChat() {
+    chatAgentId = null;
+    document.getElementById('agentChatPanel').classList.remove('open');
+}
+function addChatMsg(role, text) {
+    var msgs = document.getElementById('agentChatMessages');
+    var div = document.createElement('div');
+    div.className = 'agent-chat-msg ' + role;
+    div.textContent = text;
+    msgs.appendChild(div);
+    msgs.scrollTop = msgs.scrollHeight;
+    return div;
+}
+function sendAgentChatMessage() {
+    if (!chatAgentId) return;
+    var input = document.getElementById('agentChatInput');
+    var message = input.value.trim();
+    if (!message) return;
+    input.value = '';
+    addChatMsg('user', message);
+    var sendBtn = document.getElementById('agentChatSendBtn');
+    sendBtn.disabled = true;
+    sendBtn.textContent = '...';
+    // Check if agent supports streaming
+    var agent = agentList.find(function(a) { return a.id === chatAgentId; });
+    var supportsStreaming = agent && agent.capabilities && agent.capabilities.streaming;
+    if (supportsStreaming) {
+        // Use streaming
+        var responseDiv = addChatMsg('agent', '');
+        var responseText = '';
+        fetch('/api/agents/' + encodeURIComponent(chatAgentId) + '/stream', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ message: message })
+        }).then(function(res) {
+            if (!res.ok) return res.json().then(function(d) { throw new Error(d.error || 'Send failed'); });
+            var reader = res.body.getReader();
+            var decoder = new TextDecoder();
+            var buffer = '';
+            function pump() {
+                return reader.read().then(function(result) {
+                    if (result.done) { sendBtn.disabled = false; sendBtn.textContent = 'Send'; return; }
+                    buffer += decoder.decode(result.value, { stream: true });
+                    var lines = buffer.split('\n');
+                    buffer = lines.pop() || '';
+                    for (var i = 0; i < lines.length; i++) {
+                        var line = lines[i];
+                        if (line.indexOf('data: ') === 0) {
+                            var data = line.substring(6);
+                            if (data === '[DONE]') { sendBtn.disabled = false; sendBtn.textContent = 'Send'; return; }
+                            try {
+                                var evt = JSON.parse(data);
+                                if (evt.kind === 'text' && evt.data) {
+                                    responseText += evt.data;
+                                    responseDiv.textContent = responseText;
+                                    document.getElementById('agentChatMessages').scrollTop = document.getElementById('agentChatMessages').scrollHeight;
+                                } else if (evt.kind === 'error') {
+                                    addChatMsg('error', 'Error: ' + (evt.data || 'Unknown error'));
+                                    sendBtn.disabled = false; sendBtn.textContent = 'Send';
+                                    return;
+                                }
+                            } catch (e) {}
+                        }
+                    }
+                    return pump();
+                });
+            }
+            return pump();
+        }).catch(function(err) {
+            if (!responseText) responseDiv.remove();
+            addChatMsg('error', 'Error: ' + err.message);
+            sendBtn.disabled = false; sendBtn.textContent = 'Send';
+        });
+    } else {
+        // Non-streaming
+        addChatMsg('status', 'Waiting for response...');
+        fetch('/api/agents/' + encodeURIComponent(chatAgentId) + '/send', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ message: message })
+        }).then(function(r) {
+            if (!r.ok) return r.json().then(function(d) { throw new Error(d.error || 'Send failed'); });
+            return r.json();
+        }).then(function(result) {
+            // Remove "waiting" status
+            var msgs = document.getElementById('agentChatMessages');
+            var last = msgs.lastElementChild;
+            if (last && last.classList.contains('status')) last.remove();
+            addChatMsg('agent', result.text || JSON.stringify(result.raw, null, 2));
+        }).catch(function(err) {
+            var msgs = document.getElementById('agentChatMessages');
+            var last = msgs.lastElementChild;
+            if (last && last.classList.contains('status')) last.remove();
+            addChatMsg('error', 'Error: ' + err.message);
+        }).finally(function() {
+            sendBtn.disabled = false; sendBtn.textContent = 'Send';
+        });
+    }
+}
+document.getElementById('agentChatClose').addEventListener('click', closeAgentChat);
+document.getElementById('agentChatSendBtn').addEventListener('click', sendAgentChatMessage);
+document.getElementById('agentChatInput').addEventListener('keydown', function(e) {
+    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendAgentChatMessage(); }
+});
+function setAgentType(type) {
+    currentAgentType = type;
+    document.getElementById('agentTypeA2A').className = 'flm-pivot-tab' + (type === 'a2a' ? ' flm-pivot-tab--active' : '');
+    document.getElementById('agentTypeOpenClaw').className = 'flm-pivot-tab' + (type === 'openclaw' ? ' flm-pivot-tab--active' : '');
+    document.getElementById('agentTokenGroup').style.display = type === 'openclaw' ? '' : 'none';
+    document.getElementById('agentSessionKeyGroup').style.display = type === 'openclaw' ? '' : 'none';
+    document.getElementById('agentSshTunnelGroup').style.display = type === 'openclaw' ? '' : 'none';
+    document.getElementById('agentUrlHint').textContent = type === 'openclaw'
+        ? 'Enter the gateway HTTP URL and token, then click Discover to verify connectivity.'
+        : 'Enter a URL and click Discover to auto-fill from the agent card, or fill in the fields manually.';
+}
+function resetAgentModal() {
+    currentAgentId = null;
+    currentAgentSkills = null;
+    currentAgentCapabilities = null;
+    setAgentType('a2a');
+    document.getElementById('agentUrl').value = '';
+    document.getElementById('agentToken').value = '';
+    document.getElementById('agentSessionKey').value = '';
+    document.getElementById('agentName').value = '';
+    document.getElementById('agentDescription').value = '';
+    document.getElementById('agentSkillsPreview').style.display = 'none';
+    document.getElementById('agentSkillsList').innerHTML = '';
+    document.getElementById('agentRemoveBtn').style.display = 'none';
+    // Reset SSH tunnel fields
+    document.getElementById('agentSshTunnelEnabled').checked = false;
+    document.getElementById('agentSshCommand').value = '';
+    document.getElementById('agentSshPassword').value = '';
+    document.getElementById('agentSshTunnelFields').style.display = 'none';
+    document.getElementById('agentSshTunnelArrow').innerHTML = '&#9654;';
+}
+function openAgentAddModal() {
+    resetAgentModal();
+    document.getElementById('agentModalTitle').textContent = 'Add Agent';
+    document.getElementById('agentModal').classList.add('flm-dialog-overlay--open');
+}
+function openAgentEditModal(agent) {
+    resetAgentModal();
+    currentAgentId = agent.id;
+    setAgentType(agent.provider || 'a2a');
+    document.getElementById('agentModalTitle').textContent = 'Edit Agent';
+    document.getElementById('agentUrl').value = agent.url || '';
+    document.getElementById('agentName').value = agent.name || '';
+    document.getElementById('agentDescription').value = agent.description || '';
+    // Token is stripped by the server — show placeholder in edit mode for openclaw
+    if (agent.provider === 'openclaw') {
+        document.getElementById('agentToken').placeholder = '(token saved — leave blank to keep)';
+        document.getElementById('agentSessionKey').value = agent.sessionKey || '';
+        // Populate SSH tunnel fields (password is stripped by server)
+        if (agent.sshTunnel) {
+            document.getElementById('agentSshTunnelEnabled').checked = !!agent.sshTunnel.enabled;
+            document.getElementById('agentSshCommand').value = agent.sshTunnel.command || '';
+            document.getElementById('agentSshPassword').placeholder = '(password saved — leave blank to keep)';
+            if (agent.sshTunnel.enabled) {
+                document.getElementById('agentSshTunnelFields').style.display = '';
+                document.getElementById('agentSshTunnelArrow').innerHTML = '&#9660;';
+            }
+        }
+    }
+    document.getElementById('agentRemoveBtn').style.display = '';
+    document.getElementById('agentModal').classList.add('flm-dialog-overlay--open');
+}
+function closeAgentModal() {
+    document.getElementById('agentModal').classList.remove('flm-dialog-overlay--open');
+    resetAgentModal();
+}
+function renderSkillsList(skills) {
+    var container = document.getElementById('agentSkillsList');
+    var wrapper = document.getElementById('agentSkillsPreview');
+    if (!skills || skills.length === 0) {
+        wrapper.style.display = 'none';
+        container.innerHTML = '';
+        return;
+    }
+    wrapper.style.display = '';
+    container.innerHTML = skills.map(function(s) {
+        var label = s.name || s.id || 'Skill';
+        var desc = s.description ? ' — ' + s.description : '';
+        return '<span style="display:inline-block;padding:2px 8px;margin:2px;border-radius:8px;background:var(--defaultHoverBackground);font-size:11px;">' + label + desc + '</span>';
+    }).join('');
+}
+document.getElementById('agentTypeA2A').addEventListener('click', function() { setAgentType('a2a'); });
+document.getElementById('agentTypeOpenClaw').addEventListener('click', function() { setAgentType('openclaw'); });
+// SSH Tunnel collapsible section
+document.getElementById('agentSshTunnelToggleHeader').addEventListener('click', function() {
+    var fields = document.getElementById('agentSshTunnelFields');
+    var arrow = document.getElementById('agentSshTunnelArrow');
+    var isOpen = fields.style.display !== 'none';
+    fields.style.display = isOpen ? 'none' : '';
+    arrow.innerHTML = isOpen ? '&#9654;' : '&#9660;';
+});
+document.getElementById('agentSshTunnelEnabled').addEventListener('change', function() {
+    if (this.checked) {
+        document.getElementById('agentSshTunnelFields').style.display = '';
+        document.getElementById('agentSshTunnelArrow').innerHTML = '&#9660;';
+    }
+});
+document.getElementById('addAgentBtn').addEventListener('click', function(e) {
+    e.stopPropagation();
+    openAgentAddModal();
+});
+document.getElementById('agentCancelBtn').addEventListener('click', closeAgentModal);
+var agentModalMouseDownTarget = null;
+document.getElementById('agentModal').addEventListener('mousedown', function(e) { agentModalMouseDownTarget = e.target; });
+document.getElementById('agentModal').addEventListener('click', function(e) {
+    if (e.target === this && agentModalMouseDownTarget === this) closeAgentModal();
+    agentModalMouseDownTarget = null;
+});
+document.getElementById('agentDiscoverBtn').addEventListener('click', function() {
+    var url = document.getElementById('agentUrl').value.trim();
+    if (!url) return;
+    var btn = this;
+    btn.disabled = true;
+    btn.textContent = 'Discovering...';
+    var body = { url: url, type: currentAgentType };
+    if (currentAgentType === 'openclaw') {
+        var token = document.getElementById('agentToken').value.trim();
+        if (!token) { alert('Token is required for OpenClaw discovery.'); btn.disabled = false; btn.textContent = 'Discover'; return; }
+        body.token = token;
+    }
+    fetch('/api/agents/discover', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body)
+    }).then(function(r) {
+        if (!r.ok) return r.json().then(function(d) { throw new Error(d.error || 'Discovery failed'); });
+        return r.json();
+    }).then(function(result) {
+        var nameEl = document.getElementById('agentName');
+        var descEl = document.getElementById('agentDescription');
+        if (!nameEl.value.trim() && result.name) nameEl.value = result.name;
+        if (!descEl.value.trim() && result.description) descEl.value = result.description;
+        if (result.skills) {
+            currentAgentSkills = result.skills;
+            renderSkillsList(currentAgentSkills);
+        }
+        if (result.capabilities) {
+            currentAgentCapabilities = result.capabilities;
+        }
+        if (currentAgentType === 'openclaw' && result.verified) {
+            alert('Gateway verified successfully!');
+        }
+    }).catch(function(err) {
+        alert('Discovery failed: ' + err.message);
+    }).finally(function() {
+        btn.disabled = false;
+        btn.textContent = 'Discover';
+    });
+});
+document.getElementById('agentSaveBtn').addEventListener('click', function() {
+    var name = document.getElementById('agentName').value.trim();
+    var url = document.getElementById('agentUrl').value.trim();
+    var description = document.getElementById('agentDescription').value.trim();
+    if (!name) { alert('Name is required.'); return; }
+    if (!url) { alert('Agent URL is required.'); return; }
+    if (!description) { alert('Description is required — explain what this agent does so pages know when to use it.'); return; }
+    var body = {
+        url: url,
+        name: name,
+        description: description,
+        enabled: true,
+        provider: currentAgentType
+    };
+    if (currentAgentId) body.id = currentAgentId;
+    if (currentAgentSkills) body.skills = currentAgentSkills;
+    if (currentAgentCapabilities) body.capabilities = currentAgentCapabilities;
+    // Include token for openclaw agents
+    if (currentAgentType === 'openclaw') {
+        var token = document.getElementById('agentToken').value.trim();
+        if (token) body.token = token;
+        // For new openclaw agents, token is required
+        if (!token && !currentAgentId) { alert('Token is required for OpenClaw agents.'); return; }
+        // Set streaming capability by default for openclaw
+        if (!body.capabilities) body.capabilities = { streaming: true };
+        var sessionKey = document.getElementById('agentSessionKey').value.trim();
+        if (sessionKey) body.sessionKey = sessionKey;
+        // SSH tunnel config
+        var sshEnabled = document.getElementById('agentSshTunnelEnabled').checked;
+        var sshCommand = document.getElementById('agentSshCommand').value.trim();
+        var sshPassword = document.getElementById('agentSshPassword').value;
+        if (sshEnabled || sshCommand) {
+            body.sshTunnel = {
+                enabled: sshEnabled,
+                command: sshCommand
+            };
+            // Only include password if provided (otherwise server preserves existing)
+            if (sshPassword) body.sshTunnel.password = sshPassword;
+        }
+    }
+    fetch('/api/agents', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body)
+    }).then(function(r) {
+        if (r.ok) { closeAgentModal(); loadAgents(); }
+    });
+});
+document.getElementById('agentRemoveBtn').addEventListener('click', function() {
+    if (!currentAgentId) return;
+    fetch('/api/agents/' + encodeURIComponent(currentAgentId), { method: 'DELETE' }).then(function(r) {
+        if (r.ok) { closeAgentModal(); loadAgents(); }
+    });
+});
+// --- Save logic ---
+function saveAllSettings() {
+    var builderApiKey = document.getElementById('serviceApiKey-builder').value;
+    var builderModel = document.getElementById('model-builder').value;
+    var builderMaxTokens = document.getElementById('maxTokens-builder').value;
+    var builderProvider = document.getElementById('provider-builder').value;
+    if (!builderProvider || !builderApiKey || !builderModel || !builderMaxTokens) {
+        alert('Please fill in all required Page Builder fields (Provider, API Key, Model, Max Output Tokens).');
+        openSection('models');
+        return;
+    }
+    var models = [
+        {
+            use: 'builder',
+            provider: builderProvider,
+            configuration: {
+                apiKey: builderApiKey,
+                model: builderModel,
+                maxTokens: builderMaxTokens
+            },
+            imageQuality: 'standard',
+            instructions: document.getElementById('instructions-builder').value
+        },
+        {
+            use: 'chat',
+            provider: document.getElementById('provider-chat').value,
+            configuration: {
+                apiKey: document.getElementById('serviceApiKey-chat').value,
+                model: document.getElementById('model-chat').value,
+                maxTokens: document.getElementById('maxTokens-chat').value
+            },
+            imageQuality: 'standard',
+            instructions: document.getElementById('instructions-chat').value
+        }
+    ];
+    var body = {
+        version: 2,
+        theme: document.getElementById('theme').value,
+        toolbarPosition: document.getElementById('toolbarPosition').value,
+        models: models,
+        features: []
+    };
+    fetch('/api/settings', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body)
+    }).then(function(response) {
+        if (response.ok || response.redirected) {
+            settingsDirty = false;
+            if (wizardActive) {
+                window.location.href = '/builder?firstRun=true';
+            } else {
+                window.location.reload();
+            }
+        } else {
+            alert('Failed to save settings. Please try again.');
+        }
+    }).catch(function(err) {
+        console.error('Error saving settings:', err);
+        alert('Failed to save settings. Please try again.');
+    });
+}
+var settingsDirty = false;
+var applyBtn = document.getElementById('applyBtn');
+function markDirty() {
+    settingsDirty = true;
+    applyBtn.classList.add('flm-button--primary');
+}
+applyBtn.addEventListener('click', saveAllSettings);
+// --- Unsaved-changes confirmation dialog ---
+var unsavedOverlay = document.getElementById('unsavedDialog');
+var pendingNavUrl = null;
+function showUnsavedDialog(url) {
+    pendingNavUrl = url;
+    unsavedOverlay.classList.add('flm-dialog-overlay--open');
+}
+function hideUnsavedDialog() {
+    unsavedOverlay.classList.remove('flm-dialog-overlay--open');
+    pendingNavUrl = null;
+}
+document.getElementById('unsavedStayBtn').addEventListener('click', hideUnsavedDialog);
+document.getElementById('unsavedLeaveBtn').addEventListener('click', function() {
+    var url = pendingNavUrl;        // capture before hideUnsavedDialog nulls it
+    settingsDirty = false;          // disarm beforeunload
+    hideUnsavedDialog();
+    if (url) window.location.href = url;
+});
+// Light-dismiss (click overlay backdrop)
+var unsavedMouseDownTarget = null;
+unsavedOverlay.addEventListener('mousedown', function(e) { unsavedMouseDownTarget = e.target; });
+unsavedOverlay.addEventListener('click', function(e) {
+    if (e.target === this && unsavedMouseDownTarget === this) hideUnsavedDialog();
+    unsavedMouseDownTarget = null;
+});
+// Guard in-page navigation links
+function guardNavigation(el, url) {
+    el.addEventListener('click', function(e) {
+        if (!settingsDirty) return;     // clean — let default behavior through
+        e.preventDefault();
+        e.stopImmediatePropagation();   // block page-script handlers from navigating
+        showUnsavedDialog(url);
+    }, true);                           // capture phase — run before other handlers
+}
+guardNavigation(document.getElementById('pagesLink'), '/pages');
+guardNavigation(document.getElementById('pagesBtn'), '/pages');
+// Fallback for browser close / address-bar navigation only.
+// Skip when the FluentLM dialog is already handling the confirmation.
+window.addEventListener('beforeunload', function(e) {
+    if (settingsDirty && !unsavedOverlay.classList.contains('flm-dialog-overlay--open')) {
+        e.preventDefault();
+    }
+});
+// --- Provider helpers ---
+var providersData = [];
+function populateProviderDropdowns() {
+    var providerOptions = providersData.map(function(p) {
+        return '<option value="' + p.name + '">' + p.name + '</option>';
+    }).join('');
+    document.getElementById('provider-builder').innerHTML = providerOptions;
+    document.getElementById('provider-chat').innerHTML = providerOptions;
+}
+function populateModelDropdown(use, providerName) {
+    var provider = providersData.find(function(p) { return p.name === providerName; });
+    if (!provider) return;
+    var models = use === 'builder' ? provider.builderModels : provider.chatModels;
+    var options = models.map(function(m) {
+        return '<option value="' + m + '">' + m + '</option>';
+    }).join('');
+    document.getElementById('model-' + use).innerHTML = options;
+}
+document.getElementById('provider-builder').addEventListener('change', function() {
+    populateModelDropdown('builder', this.value);
+});
+document.getElementById('provider-chat').addEventListener('change', function() {
+    populateModelDropdown('chat', this.value);
+});
+// --- Provider signup instructions ---
+var providerInstructions = {
+    'Anthropic': 'Sign up at <a href="https://platform.claude.com" target="_blank">platform.claude.com</a>, then get your key at <a href="https://console.anthropic.com/settings/keys" target="_blank">console.anthropic.com/settings/keys</a>.',
+    'OpenAI': 'Sign up at <a href="https://auth.openai.com/create-account" target="_blank">auth.openai.com/create-account</a>, then get your key at <a href="https://platform.openai.com/api-keys" target="_blank">platform.openai.com/api-keys</a>.',
+    'FireworksAI': 'Sign up at <a href="https://fireworks.ai" target="_blank">fireworks.ai</a>, then get your key at <a href="https://fireworks.ai/account/api-keys" target="_blank">fireworks.ai/account/api-keys</a>.'
+};
+// --- "More settings" toggle state (works for all users) ---
+var builderAdvanced = false;
+var chatAdvanced = false;
+function applyAdvancedToggle() {
+    document.getElementById('fg-maxTokens-builder').classList.toggle('wizard-hidden', !builderAdvanced);
+    document.getElementById('fg-instructions-builder').classList.toggle('wizard-hidden', !builderAdvanced);
+    document.getElementById('fg-maxTokens-chat').classList.toggle('wizard-hidden', !chatAdvanced);
+    document.getElementById('fg-instructions-chat').classList.toggle('wizard-hidden', !chatAdvanced);
+}
+document.getElementById('moreSettingsLink').addEventListener('click', function(e) {
+    e.preventDefault();
+    builderAdvanced = !builderAdvanced;
+    this.innerHTML = builderAdvanced ? '&#9652; Less settings' : '&#9662; More settings';
+    applyAdvancedToggle();
+});
+document.getElementById('moreSettingsLinkChat').addEventListener('click', function(e) {
+    e.preventDefault();
+    chatAdvanced = !chatAdvanced;
+    this.innerHTML = chatAdvanced ? '&#9652; Less settings' : '&#9662; More settings';
+    applyAdvancedToggle();
+});
+// Hide advanced fields by default on load
+applyAdvancedToggle();
+// --- Wizard state ---
+var wizardActive = false;
+var builderStep = 0;  // 0 = provider only, 1 = + API key, 2 = fully configured
+function updateWizardVisibility() {
+    if (!wizardActive) return;
+    var fgApiKey = document.getElementById('fg-apikey-builder');
+    var fgModel = document.getElementById('fg-model-builder');
+    var moreLinkBuilder = document.getElementById('moreSettingsLink');
+    var chatCardEl = document.getElementById('chatCard');
+    var moreLinkChat = document.getElementById('moreSettingsLinkChat');
+    // Step 0: only provider visible
+    fgApiKey.classList.toggle('wizard-hidden', builderStep < 1);
+    // Model dropdown visible at step 2 (auto-selected)
+    fgModel.classList.toggle('wizard-hidden', builderStep < 2);
+    // Builder "More settings" hidden until step 2
+    moreLinkBuilder.style.display = builderStep >= 2 ? 'inline-block' : 'none';
+    if (builderStep < 2) {
+        document.getElementById('fg-maxTokens-builder').classList.add('wizard-hidden');
+        document.getElementById('fg-instructions-builder').classList.add('wizard-hidden');
+    } else {
+        // Let the toggle state drive visibility
+        applyAdvancedToggle();
+    }
+    // Chat card: before step 2, show only title grayed out
+    if (builderStep < 2) {
+        ['fg-provider-chat', 'fg-apikey-chat', 'fg-model-chat', 'fg-maxTokens-chat', 'fg-instructions-chat'].forEach(function(id) {
+            document.getElementById(id).classList.add('wizard-hidden');
+        });
+        moreLinkChat.style.display = 'none';
+        chatCardEl.classList.add('disabled');
+    } else {
+        // Step 2: show chat card populated — provider, key, model visible; advanced behind toggle
+        ['fg-provider-chat', 'fg-apikey-chat', 'fg-model-chat'].forEach(function(id) {
+            document.getElementById(id).classList.remove('wizard-hidden');
+        });
+        moreLinkChat.style.display = 'inline-block';
+        applyAdvancedToggle();
+        chatCardEl.classList.remove('disabled');
+    }
+    updateApplyButton();
+}
+function updateApplyButton() {
+    var btn = document.getElementById('applyBtn');
+    if (!wizardActive) {
+        btn.disabled = false;
+        return;
+    }
+    var hasProvider = !!document.getElementById('provider-builder').value;
+    var hasKey = !!document.getElementById('serviceApiKey-builder').value;
+    var hasModel = !!document.getElementById('model-builder').value;
+    var hasTokens = !!document.getElementById('maxTokens-builder').value;
+    var ready = hasProvider && hasKey && hasModel && hasTokens;
+    btn.disabled = !ready;
+    if (ready) btn.classList.add('flm-button--primary');
+}
+function autoPopulateChatCard() {
+    var providerVal = document.getElementById('provider-builder').value;
+    var apiKeyVal = document.getElementById('serviceApiKey-builder').value;
+    document.getElementById('provider-chat').value = providerVal;
+    populateModelDropdown('chat', providerVal);
+    var chatModelSelect = document.getElementById('model-chat');
+    if (chatModelSelect.options.length > 0) {
+        chatModelSelect.selectedIndex = 0;
+    }
+    document.getElementById('serviceApiKey-chat').value = apiKeyVal;
+    document.getElementById('maxTokens-chat').value = '32000';
+}
+// --- Wizard event listeners ---
+document.getElementById('provider-builder').addEventListener('change', function() {
+    if (!wizardActive) return;
+    var val = this.value;
+    if (!val) return;
+    if (builderStep < 1) builderStep = 1;
+    var instrEl = document.getElementById('providerInstructions');
+    if (providerInstructions[val]) {
+        instrEl.innerHTML = providerInstructions[val];
+        instrEl.style.display = 'block';
+    } else {
+        instrEl.style.display = 'none';
+    }
+    updateWizardVisibility();
+});
+document.getElementById('serviceApiKey-builder').addEventListener('input', function() {
+    if (!wizardActive) return;
+    if (this.value.length > 0 && builderStep < 2) {
+        builderStep = 2;
+        document.getElementById('providerInstructions').style.display = 'none';
+        document.getElementById('maxTokens-builder').value = '32000';
+        autoPopulateChatCard();
+        updateWizardVisibility();
+    }
+    updateApplyButton();
+});
+// --- Load data ---
+var isConfigured = false;
+Promise.all([
+    fetch('/api/settings').then(function(r) { return r.json(); }),
+    fetch('/api/themes').then(function(r) { return r.json(); })
+]).then(function(results) {
+    var data = results[0], themes = results[1];
+    // Store providers data
+    providersData = data.providers || [];
+    // Find builder and chat entries from models array
+    var models = data.models || [];
+    var builder = models.find(function(m) { return m.use === 'builder'; }) || {};
+    var chat = models.find(function(m) { return m.use === 'chat'; }) || {};
+    var builderConfig = builder.configuration || {};
+    var chatConfig = chat.configuration || {};
+    var builderApiKey = builderConfig.apiKey || '';
+    var builderModel = builderConfig.model || '';
+    var builderMaxTokens = builderConfig.maxTokens || '';
+    isConfigured = builderApiKey && builderModel && builderMaxTokens;
+    // Populate provider dropdowns
+    populateProviderDropdowns();
+    // Builder fields
+    document.getElementById('provider-builder').value = builder.provider || 'Anthropic';
+    populateModelDropdown('builder', builder.provider || 'Anthropic');
+    document.getElementById('serviceApiKey-builder').value = builderApiKey;
+    document.getElementById('model-builder').value = builderModel;
+    document.getElementById('maxTokens-builder').value = builderMaxTokens;
+    document.getElementById('instructions-builder').value = builder.instructions || '';
+    // Chat fields
+    document.getElementById('provider-chat').value = chat.provider || 'Anthropic';
+    populateModelDropdown('chat', chat.provider || 'Anthropic');
+    document.getElementById('serviceApiKey-chat').value = chatConfig.apiKey || '';
+    document.getElementById('model-chat').value = chatConfig.model || '';
+    document.getElementById('maxTokens-chat').value = chatConfig.maxTokens || '';
+    document.getElementById('instructions-chat').value = chat.instructions || '';
+    var currentTheme = data.theme || 'nebula-dusk';
+    document.getElementById('theme').innerHTML = themes.map(function(t) {
+        return '<option value="' + t + '">' + t + '</option>';
+    }).join('');
+    document.getElementById('theme').value = currentTheme;
+    document.getElementById('toolbarPosition').value = data.toolbarPosition || 'left';
+    loadConnectors();
+    loadAgents();
+    // Attach dirty-tracking listeners to all settings controls
+    ['theme', 'toolbarPosition', 'provider-builder', 'serviceApiKey-builder', 'model-builder',
+     'maxTokens-builder', 'instructions-builder', 'provider-chat',
+     'serviceApiKey-chat', 'model-chat', 'maxTokens-chat', 'instructions-chat'
+    ].forEach(function(id) {
+        var el = document.getElementById(id);
+        if (el) {
+            el.addEventListener('input', markDirty);
+            el.addEventListener('change', markDirty);
+        }
+    });
+    var isFirstRun = params.get('firstRun') === '1';
+    if (!isConfigured) {
+        // Disable chat and navigation
+        document.getElementById('chatInput').disabled = true;
+        document.getElementById('chatInput').classList.add('disabled');
+        var pagesLink = document.getElementById('pagesLink');
+        pagesLink.style.opacity = '0.4';
+        pagesLink.style.pointerEvents = 'none';
+        // Show config required banner and open models section
+        document.getElementById('configBanner').style.display = 'block';
+        openSection('models');
+    }
+    if (isFirstRun) {
+        // Activate wizard — always treat as unconfigured when firstRun=1
+        wizardActive = true;
+        builderStep = 0;
+        // Disable chat and navigation (even if somehow configured)
+        document.getElementById('chatInput').disabled = true;
+        document.getElementById('chatInput').classList.add('disabled');
+        // Disable Copy, Pages, and Reload links
+        ['saveLink', 'pagesLink', 'resetLink'].forEach(function(id) {
+            var el = document.getElementById(id);
+            el.style.opacity = '0.4';
+            el.style.pointerEvents = 'none';
+        });
+        // Show firstRun greeting, hide default
+        document.getElementById('defaultGreeting').style.display = 'none';
+        document.getElementById('firstRunGreeting').style.display = '';
+        // Show banner and lock to models tab
+        document.getElementById('configBanner').style.display = 'block';
+        openSection('models');
+        // Disable other accordion tabs
+        document.querySelector('.accordion-section[data-section="appearance"]').classList.add('disabled');
+        document.querySelector('.accordion-section[data-section="connectors"]').classList.add('disabled');
+        document.querySelector('.accordion-section[data-section="agents"]').classList.add('disabled');
+        // Clear any existing values so wizard starts fresh
+        document.getElementById('provider-builder').value = '';
+        document.getElementById('serviceApiKey-builder').value = '';
+        document.getElementById('model-builder').innerHTML = '<option value="">Select a model</option>';
+        document.getElementById('maxTokens-builder').value = '';
+        document.getElementById('instructions-builder').value = '';
+        document.getElementById('provider-chat').value = '';
+        document.getElementById('serviceApiKey-chat').value = '';
+        document.getElementById('model-chat').innerHTML = '<option value="">Select a model</option>';
+        document.getElementById('maxTokens-chat').value = '';
+        document.getElementById('instructions-chat').value = '';
+        // Add placeholder option to builder provider dropdown
+        var builderProviderSelect = document.getElementById('provider-builder');
+        var placeholder = document.createElement('option');
+        placeholder.value = '';
+        placeholder.textContent = 'Select a provider';
+        placeholder.disabled = true;
+        placeholder.selected = true;
+        builderProviderSelect.insertBefore(placeholder, builderProviderSelect.firstChild);
+        builderProviderSelect.value = '';
+        // Disable Apply button until configured
+        document.getElementById('applyBtn').disabled = true;
+        updateWizardVisibility();
+    }
+}).catch(function(error) {
+    console.error('Error fetching settings:', error);
+});
+    </script>
+<script id="page-helpers" src="/api/page-helpers.js?v=3" data-locked="true"></script>
+<script id="page-script" src="/api/page-script.js?v=3" data-locked="true"></script>
+</body></html>