npm - synthos - Versions diffs - 0.6.0 → 0.7.1 - Mend

synthos 0.6.0 → 0.7.1

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 (153) hide show

package/README.md +33 -1
package/default-pages/app_builder.html +40 -0
package/default-pages/app_builder.json +1 -0
package/default-pages/json_tools.html +89 -159
package/default-pages/json_tools.json +1 -0
package/default-pages/my_notes.html +33 -0
package/default-pages/my_notes.json +12 -0
package/default-pages/neon_asteroids.html +77 -0
package/default-pages/neon_asteroids.json +12 -0
package/default-pages/sidebar_builder.html +49 -0
package/default-pages/sidebar_builder.json +1 -0
package/default-pages/solar_explorer.html +1956 -0
package/default-pages/solar_explorer.json +12 -0
package/default-pages/solar_tutorial.html +476 -0
package/default-pages/solar_tutorial.json +1 -0
package/default-pages/two-panel_builder.html +66 -0
package/default-pages/two-panel_builder.json +1 -0
package/default-themes/nebula-dawn.css +682 -0
package/default-themes/nebula-dawn.json +19 -0
package/default-themes/nebula-dusk.css +674 -0
package/default-themes/nebula-dusk.json +19 -0
package/dist/connectors/index.d.ts +3 -0
package/dist/connectors/index.d.ts.map +1 -0
package/dist/connectors/index.js +6 -0
package/dist/connectors/index.js.map +1 -0
package/dist/connectors/registry.d.ts +3 -0
package/dist/connectors/registry.d.ts.map +1 -0
package/dist/connectors/registry.js +100 -0
package/dist/connectors/registry.js.map +1 -0
package/dist/connectors/types.d.ts +61 -0
package/dist/connectors/types.d.ts.map +1 -0
package/dist/connectors/types.js +3 -0
package/dist/connectors/types.js.map +1 -0
package/dist/files.d.ts +2 -0
package/dist/files.d.ts.map +1 -1
package/dist/files.js +12 -1
package/dist/files.js.map +1 -1
package/dist/init.d.ts +8 -1
package/dist/init.d.ts.map +1 -1
package/dist/init.js +155 -3
package/dist/init.js.map +1 -1
package/dist/migrations.d.ts +11 -0
package/dist/migrations.d.ts.map +1 -0
package/dist/migrations.js +281 -0
package/dist/migrations.js.map +1 -0
package/dist/models/index.d.ts +3 -0
package/dist/models/index.d.ts.map +1 -0
package/dist/models/index.js +10 -0
package/dist/models/index.js.map +1 -0
package/dist/models/providers.d.ts +7 -0
package/dist/models/providers.d.ts.map +1 -0
package/dist/models/providers.js +33 -0
package/dist/models/providers.js.map +1 -0
package/dist/models/types.d.ts +21 -0
package/dist/models/types.d.ts.map +1 -0
package/dist/models/types.js +3 -0
package/dist/models/types.js.map +1 -0
package/dist/pages.d.ts +21 -2
package/dist/pages.d.ts.map +1 -1
package/dist/pages.js +202 -23
package/dist/pages.js.map +1 -1
package/dist/scripts.js +2 -2
package/dist/scripts.js.map +1 -1
package/dist/service/createCompletePrompt.d.ts +3 -2
package/dist/service/createCompletePrompt.d.ts.map +1 -1
package/dist/service/createCompletePrompt.js +11 -16
package/dist/service/createCompletePrompt.js.map +1 -1
package/dist/service/debugLog.d.ts +11 -0
package/dist/service/debugLog.d.ts.map +1 -0
package/dist/service/debugLog.js +26 -0
package/dist/service/debugLog.js.map +1 -0
package/dist/service/modelInstructions.d.ts +7 -0
package/dist/service/modelInstructions.d.ts.map +1 -0
package/dist/service/modelInstructions.js +16 -0
package/dist/service/modelInstructions.js.map +1 -0
package/dist/service/requiresSettings.d.ts +2 -2
package/dist/service/requiresSettings.d.ts.map +1 -1
package/dist/service/requiresSettings.js.map +1 -1
package/dist/service/server.d.ts.map +1 -1
package/dist/service/server.js +15 -0
package/dist/service/server.js.map +1 -1
package/dist/service/transformPage.d.ts +81 -2
package/dist/service/transformPage.d.ts.map +1 -1
package/dist/service/transformPage.js +672 -82
package/dist/service/transformPage.js.map +1 -1
package/dist/service/useApiRoutes.d.ts.map +1 -1
package/dist/service/useApiRoutes.js +579 -13
package/dist/service/useApiRoutes.js.map +1 -1
package/dist/service/useConnectorRoutes.d.ts +4 -0
package/dist/service/useConnectorRoutes.d.ts.map +1 -0
package/dist/service/useConnectorRoutes.js +389 -0
package/dist/service/useConnectorRoutes.js.map +1 -0
package/dist/service/useDataRoutes.d.ts.map +1 -1
package/dist/service/useDataRoutes.js +83 -70
package/dist/service/useDataRoutes.js.map +1 -1
package/dist/service/usePageRoutes.d.ts.map +1 -1
package/dist/service/usePageRoutes.js +243 -38
package/dist/service/usePageRoutes.js.map +1 -1
package/dist/settings.d.ts +33 -4
package/dist/settings.d.ts.map +1 -1
package/dist/settings.js +108 -15
package/dist/settings.js.map +1 -1
package/dist/synthos-cli.d.ts.map +1 -1
package/dist/synthos-cli.js +11 -1
package/dist/synthos-cli.js.map +1 -1
package/dist/themes.d.ts +9 -0
package/dist/themes.d.ts.map +1 -0
package/dist/themes.js +64 -0
package/dist/themes.js.map +1 -0
package/package.json +6 -3
package/required-pages/builder.html +74 -0
package/required-pages/builder.json +1 -0
package/required-pages/pages.html +169 -126
package/required-pages/pages.json +1 -0
package/required-pages/settings.html +812 -156
package/required-pages/settings.json +1 -0
package/required-pages/synthos_apis.html +272 -0
package/required-pages/synthos_apis.json +1 -0
package/required-pages/synthos_scripts.html +87 -0
package/required-pages/synthos_scripts.json +1 -0
package/src/connectors/index.ts +12 -0
package/src/connectors/registry.ts +98 -0
package/src/connectors/types.ts +68 -0
package/src/files.ts +11 -0
package/src/init.ts +151 -5
package/src/migrations.ts +266 -0
package/src/models/index.ts +2 -0
package/src/models/providers.ts +33 -0
package/src/models/types.ts +23 -0
package/src/pages.ts +234 -26
package/src/scripts.ts +2 -2
package/src/service/createCompletePrompt.ts +14 -18
package/src/service/debugLog.ts +17 -0
package/src/service/modelInstructions.ts +14 -0
package/src/service/requiresSettings.ts +3 -3
package/src/service/server.ts +19 -2
package/src/service/transformPage.ts +709 -88
package/src/service/useApiRoutes.ts +632 -16
package/src/service/useConnectorRoutes.ts +427 -0
package/src/service/useDataRoutes.ts +87 -71
package/src/service/usePageRoutes.ts +237 -44
package/src/settings.ts +143 -20
package/src/synthos-cli.ts +11 -1
package/src/themes.ts +71 -0
package/default-pages/[application].html +0 -95
package/default-pages/[markdown].html +0 -271
package/default-pages/[sidebar].html +0 -114
package/default-pages/[split-application].html +0 -118
package/default-pages/solar_system.html +0 -432
package/default-pages/space_invaders.html +0 -617
package/required-pages/apis.html +0 -362
package/required-pages/home.html +0 -126
package/required-pages/scripts.html +0 -350

package/required-pages/settings.html CHANGED Viewed

@@ -1,185 +1,841 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
+<!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>
-    <style>
-        /* Nebula Dusk Theme */
-        :root { --bg-primary:#1a1a2e; --bg-secondary:#16213e; --bg-tertiary:#0f0f23; --accent-primary:#667eea; --accent-secondary:#764ba2; --accent-tertiary:#f093fb; --accent-glow:rgba(138,43,226,0.3); --text-primary:#e0e0e0; --text-secondary:#b794f6; --border-color:rgba(138,43,226,0.3); }
-        * { margin:0; padding:0; box-sizing:border-box; }
-        body { font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif; background:linear-gradient(135deg,var(--bg-primary) 0%,var(--bg-secondary) 50%,var(--bg-tertiary) 100%); color:var(--text-primary); height:100vh; display:flex; }
-        .chat-panel { width:30%; background:linear-gradient(180deg,rgba(26,26,46,0.95) 0%,rgba(22,33,62,0.95) 100%); box-shadow:0 0 30px var(--accent-glow),inset 0 0 60px rgba(75,0,130,0.1); padding:20px; display:flex; flex-direction:column; border-right:1px solid var(--border-color); }
-        .chat-header { font-size:24px; padding:15px; background:linear-gradient(135deg,var(--accent-primary) 0%,var(--accent-secondary) 50%,var(--accent-tertiary) 100%); color:white; text-align:center; border-radius:15px; box-shadow:0 4px 20px rgba(102,126,234,0.4); text-shadow:0 2px 10px rgba(0,0,0,0.3); letter-spacing:2px; }
-        .chat-messages { flex-grow:1; overflow-y:auto; padding:15px; margin-top:15px; background:rgba(15,15,35,0.6); border-radius:15px; border:1px solid var(--border-color); box-shadow:inset 0 0 30px rgba(75,0,130,0.2); }
-        .chat-message { margin-bottom:15px; padding:12px 15px; background:linear-gradient(135deg,rgba(102,126,234,0.15) 0%,rgba(118,75,162,0.15) 100%); border-radius:15px; box-shadow:0 2px 10px var(--accent-glow); border:1px solid rgba(138,43,226,0.1); backdrop-filter:blur(5px); }
-        .chat-message p { margin-bottom:5px; line-height:1.5; }
-        .chat-message p strong { font-weight:600; background:linear-gradient(90deg,var(--accent-primary),var(--accent-tertiary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
-        .chat-message p code { background:rgba(138,43,226,0.3); padding:2px 6px; border-radius:5px; font-family:'Courier New',Courier,monospace; color:var(--accent-tertiary); border:1px solid rgba(240,147,251,0.3); }
-        .link-group { display:flex; justify-content:space-between; margin:15px 0; padding:10px; background:rgba(15,15,35,0.4); border-radius:10px; border:1px solid var(--border-color); }
-        .link-group a { font-size:14px; color:var(--text-secondary); text-decoration:none; padding:8px 15px; border-radius:8px; transition:all 0.3s ease; border:1px solid transparent; }
-        .link-group a:hover { background:linear-gradient(135deg,rgba(102,126,234,0.3) 0%,rgba(118,75,162,0.3) 100%); border-color:rgba(183,148,246,0.5); box-shadow:0 0 15px var(--accent-glow); color:var(--accent-tertiary); }
-        .chat-panel > form { display:flex; flex-direction:row; width:100%; gap:10px; align-items:center; }
-        .chat-input { padding:14px 18px; border:1px solid var(--border-color); border-radius:25px; flex-grow:1; font-size:14px; background:rgba(15,15,35,0.8); color:var(--text-primary); box-shadow:inset 0 2px 10px rgba(0,0,0,0.3),0 0 20px rgba(138,43,226,0.1); transition:all 0.3s ease; }
-        .chat-input:focus { outline:none; border-color:rgba(183,148,246,0.6); box-shadow:inset 0 2px 10px rgba(0,0,0,0.3),0 0 25px var(--accent-glow); }
-        .chat-input::placeholder { color:rgba(183,148,246,0.5); }
-        .chat-submit { padding:14px 20px; border:none; border-radius:25px; font-size:14px; background:linear-gradient(135deg,var(--accent-primary) 0%,var(--accent-secondary) 50%,var(--accent-tertiary) 100%); color:white; cursor:pointer; transition:all 0.3s ease; font-weight:600; letter-spacing:1px; box-shadow:0 4px 20px rgba(102,126,234,0.4); white-space:nowrap; }
-        .chat-submit:hover { transform:translateY(-2px); box-shadow:0 6px 25px rgba(102,126,234,0.6); }
-        .chat-submit:active { transform:translateY(0); }
-        .viewer-panel { width:70%; padding:25px; background:linear-gradient(135deg,rgba(22,33,62,0.9) 0%,rgba(15,15,35,0.95) 100%); display:flex; flex-direction:column; justify-content:flex-start; align-items:center; box-shadow:inset 0 0 60px rgba(75,0,130,0.15); position:relative; overflow:hidden; }
-        .viewer-panel::before { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background:radial-gradient(ellipse at center,rgba(138,43,226,0.05) 0%,transparent 70%); animation:nebula-pulse 8s ease-in-out infinite; pointer-events:none; }
-        @keyframes nebula-pulse { 0%,100%{opacity:0.5;transform:scale(1);} 50%{opacity:1;transform:scale(1.1);} }
-        .loading-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(15,15,35,0.9); justify-content:center; align-items:center; z-index:1000; }
-        .spinner { width:50px; height:50px; border:4px solid var(--border-color); border-top-color:var(--accent-tertiary); border-radius:50%; animation:spin 1s linear infinite; }
-        @keyframes spin { to{transform:rotate(360deg);} }
-        /* Scrollbar Styles */
-        ::-webkit-scrollbar { width:10px; height:10px; }
-        ::-webkit-scrollbar-track { background:rgba(15,15,35,0.6); border-radius:10px; border:1px solid var(--border-color); }
-        ::-webkit-scrollbar-thumb { background:linear-gradient(180deg,var(--accent-primary) 0%,var(--accent-secondary) 50%,var(--accent-tertiary) 100%); border-radius:10px; border:2px solid rgba(15,15,35,0.6); box-shadow:0 0 10px var(--accent-glow); }
-        ::-webkit-scrollbar-thumb:hover { background:linear-gradient(180deg,var(--accent-tertiary) 0%,var(--accent-secondary) 50%,var(--accent-primary) 100%); box-shadow:0 0 15px rgba(240,147,251,0.5); }
-        ::-webkit-scrollbar-corner { background:rgba(15,15,35,0.6); }
-        * { scrollbar-width:thin; scrollbar-color:var(--accent-secondary) rgba(15,15,35,0.6); }
-        /* Settings Form Styles - Nebula Theme */
-        .settings-form { background:linear-gradient(135deg,rgba(26,26,46,0.95) 0%,rgba(22,33,62,0.95) 100%); border-radius:15px; padding:0; box-shadow:0 6px 30px var(--accent-glow),inset 0 0 40px rgba(75,0,130,0.1); border:1px solid var(--border-color); width:100%; max-width:500px; position:relative; z-index:1; overflow:hidden; }
-        .dialog-title { font-size:22px; font-weight:700; padding:18px 30px; background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary)); color:white; text-align:center; box-shadow:0 4px 20px rgba(102,126,234,0.4); text-shadow:0 2px 10px rgba(0,0,0,0.3); letter-spacing:2px; }
-        .dialog-content { padding:25px; background:rgba(15,15,35,0.5); }
-        #settingsForm { display:flex; flex-direction:column; gap:15px; }
-        .form-group { display:flex; flex-direction:column; width:100%; }
-        .form-group label { display:block; margin-bottom:8px; color:var(--text-secondary); font-weight:600; font-size:14px; }
-        .form-group input,.form-group select,.form-group textarea { width:100%; padding:14px 18px; border-radius:12px; border:1px solid var(--border-color); background:rgba(15,15,35,0.8); color:var(--text-primary); font-size:14px; transition:all 0.3s ease; box-shadow:inset 0 2px 10px rgba(0,0,0,0.3); }
-        .form-group input:focus,.form-group select:focus,.form-group textarea:focus { outline:none; border-color:rgba(183,148,246,0.6); box-shadow:inset 0 2px 10px rgba(0,0,0,0.3),0 0 20px var(--accent-glow); }
-        .form-group input::placeholder,.form-group textarea::placeholder { color:rgba(183,148,246,0.5); }
-        .form-group textarea { resize:vertical; min-height:100px; }
-        .form-group select { cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23b794f6' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 15px center; }
-        .form-group select option { background:var(--bg-tertiary); color:var(--text-primary); padding:10px; }
-        .settings-form .update-btn { width:100%; padding:16px 20px; border:none; border-radius:12px; font-size:15px; background:linear-gradient(135deg,var(--accent-primary) 0%,var(--accent-secondary) 50%,var(--accent-tertiary) 100%); color:white; cursor:pointer; transition:all 0.3s ease; font-weight:600; letter-spacing:1px; box-shadow:0 4px 20px rgba(102,126,234,0.4); margin-top:5px; }
-        .settings-form .update-btn:hover { transform:translateY(-2px); box-shadow:0 6px 25px rgba(102,126,234,0.6); }
-        .settings-form .update-btn:active { transform:translateY(0); }
-        .disabled { background:rgba(102,126,234,0.2)!important; cursor:not-allowed!important; opacity:0.6; }
-        .info-text { color:rgba(183,148,246,0.7); margin-top:20px; font-size:13px; line-height:1.6; text-align:center; padding:15px; background:rgba(15,15,35,0.4); border-radius:10px; border:1px solid var(--border-color); }
-        .info-text a { color:var(--accent-tertiary); text-decoration:none; transition:all 0.3s; font-weight:500; }
-        .info-text a:hover { color:var(--text-secondary); text-shadow:0 0 10px var(--accent-glow); }
-    </style>
+    <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>.settings-title{font-size:22px;font-weight:700;min-height:var(--header-min-height);padding:var(--header-padding-vertical) var(--header-padding-horizontal);line-height:var(--header-line-height);display:flex;align-items:center;justify-content:center;box-sizing:border-box;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:#fff;border-radius:12px 12px 0 0;width:100%;box-shadow:0 6px 25px var(--accent-glow);letter-spacing:2px;text-shadow:0 2px 10px rgba(0,0,0,.3)}.settings-container{display:flex;flex-direction:column;width:100%;flex-grow:1;background:rgba(15,15,35,.8);border-radius:0 0 12px 12px;border:1px solid rgba(138,43,226,.2);border-top:none;overflow:hidden}.accordion-section{display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;border-bottom:1px solid var(--border-color)}.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:16px 25px;background:none;border:none;color:var(--text-primary);font-size:15px;font-weight:600;cursor:pointer;transition:background .3s;letter-spacing:.5px;flex-shrink:0}.accordion-header:hover{background:rgba(138,43,226,.05)}.accordion-section.active .accordion-header{background:rgba(138,43,226,.08)}.accordion-chevron{font-size:11px;color:var(--text-secondary);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 25px;flex-grow:1}.button-row{display:flex;justify-content:flex-end;padding:15px 25px;border-top:1px solid var(--border-color);flex-shrink:0}.apply-btn{padding:12px 30px;border:none;border-radius:12px;font-size:15px;background:linear-gradient(135deg,var(--accent-primary) 0,var(--accent-secondary) 50%,var(--accent-tertiary) 100%);color:#fff;cursor:pointer;transition:.3s;font-weight:600;letter-spacing:1px;box-shadow:0 4px 20px rgba(102,126,234,.4)}.apply-btn:hover{transform:translateY(-2px);box-shadow:0 6px 25px rgba(102,126,234,.6)}.apply-btn:active{transform:translateY(0)}.form-group{display:flex;flex-direction:column;width:100%}.form-group label{display:block;margin-bottom:8px;color:var(--text-secondary);font-weight:600;font-size:14px}.form-group input,.form-group select,.form-group textarea{width:100%;padding:14px 18px;border-radius:12px;border:1px solid var(--border-color);background:rgba(15,15,35,.8);color:var(--text-primary);font-size:14px;transition:.3s;box-shadow:inset 0 2px 10px rgba(0,0,0,.3)}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:0;border-color:rgba(183,148,246,.6);box-shadow:inset 0 2px 10px rgba(0,0,0,.3),0 0 20px var(--accent-glow)}.form-group input::placeholder,.form-group textarea::placeholder{color:rgba(183,148,246,.5)}.form-group textarea{resize:vertical;min-height:100px}.form-group select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23b794f6' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center}.form-group select option{background:var(--bg-tertiary);color:var(--text-primary);padding:10px}.info-text{color:rgba(183,148,246,.7);font-size:13px;line-height:1.6;text-align:center;padding:15px;background:rgba(15,15,35,.4);border-radius:10px;border:1px solid var(--border-color)}.info-text a{color:var(--accent-tertiary);text-decoration:none;transition:.3s;font-weight:500}.info-text a:hover{color:var(--text-secondary);text-shadow:0 0 10px var(--accent-glow)}.config-required-banner{padding:12px 20px;background:rgba(255,180,50,.12);border:1px solid rgba(255,180,50,.3);border-radius:10px;color:rgba(255,200,100,.9);font-size:13px;font-weight:500;text-align:center;line-height:1.5}.model-card{border:1px solid var(--border-color);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:12px;background:rgba(15,15,35,.3)}.model-card-title{font-size:14px;font-weight:700;color:var(--text-primary);letter-spacing:.5px;margin:0}.filter-bar{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}.filter-btn{padding:6px 14px;border-radius:20px;border:1px solid var(--border-color);background:0 0;color:var(--text-secondary);font-size:13px;cursor:pointer;transition:.2s;white-space:nowrap;flex-shrink:0}.filter-btn:hover{border-color:var(--accent-primary);color:var(--accent-primary)}.filter-btn.active{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:#fff;border-color:transparent}.services-grid{display:grid;grid-template-columns:1fr;gap:12px}.service-card{border-radius:12px;border:1px solid var(--border-color);background:rgba(15,15,35,.5);padding:18px;transition:.3s}.service-card:hover{border-color:rgba(138,43,226,.3)}.service-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.service-card-name{font-size:15px;font-weight:600;color:var(--text-primary)}.service-card-category{font-size:11px;color:var(--text-secondary);background:rgba(138,43,226,.15);padding:2px 8px;border-radius:10px}.service-card-desc{font-size:13px;color:var(--text-secondary);line-height:1.5;margin-bottom:12px}.service-card-fields{display:flex;flex-direction:column;gap:8px}.service-card-fields input{width:100%;padding:10px 14px;border-radius:8px;border:1px solid var(--border-color);background:rgba(15,15,35,.8);color:var(--text-primary);font-size:13px;transition:.3s;box-shadow:inset 0 2px 8px rgba(0,0,0,.2)}.service-card-fields input:focus{outline:0;border-color:rgba(183,148,246,.6);box-shadow:inset 0 2px 8px rgba(0,0,0,.2),0 0 15px var(--accent-glow)}.service-card-fields input::placeholder{color:rgba(183,148,246,.5)}.toggle-switch{position:relative;width:44px;height:24px;flex-shrink:0}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:rgba(100,100,100,.4);border-radius:24px;transition:.3s}.toggle-slider:before{content:"";position:absolute;height:18px;width:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s}.toggle-switch input:checked+.toggle-slider{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary))}.toggle-switch input:checked+.toggle-slider:before{transform:translateX(20px)}.light-mode .settings-container{background:rgba(255,255,255,.8)}.light-mode .accordion-header:hover{background:rgba(118,75,162,.05)}.light-mode .accordion-section.active .accordion-header{background:rgba(118,75,162,.06)}.light-mode .form-group input,.light-mode .form-group select,.light-mode .form-group textarea{background:rgba(255,255,255,.8);box-shadow:inset 0 2px 10px rgba(118,75,162,.05)}.light-mode .form-group input:focus,.light-mode .form-group select:focus,.light-mode .form-group textarea:focus{box-shadow:inset 0 2px 10px rgba(118,75,162,.05),0 0 20px var(--accent-glow)}.light-mode .form-group input::placeholder,.light-mode .form-group textarea::placeholder{color:rgba(107,79,138,.5)}.light-mode .info-text{color:rgba(107,79,138,.7);background:rgba(255,255,255,.4)}.light-mode .config-required-banner{background:rgba(200,150,50,.1);border-color:rgba(200,150,50,.3);color:rgba(160,120,30,.9)}.light-mode .model-card{background:rgba(255,255,255,.3)}.light-mode .service-card{background:rgba(255,255,255,.5)}.light-mode .service-card-fields input{background:rgba(255,255,255,.8);box-shadow:inset 0 2px 8px rgba(118,75,162,.05)}.light-mode .service-card-fields input:focus{box-shadow:inset 0 2px 8px rgba(118,75,162,.05),0 0 15px var(--accent-glow)}.light-mode .service-card-fields input::placeholder{color:rgba(107,79,138,.5)}.model-card.disabled{opacity:0.35;pointer-events:none;user-select:none;transition:opacity .3s}.wizard-hidden{display:none !important}.more-settings-link{display:inline-block;color:var(--accent-tertiary);font-size:13px;cursor:pointer;text-decoration:none;padding:4px 0;transition:.3s;user-select:none}.more-settings-link:hover{color:var(--text-secondary);text-shadow:0 0 10px var(--accent-glow)}.light-mode .model-card.disabled{opacity:0.35}.accordion-section.disabled .accordion-header{opacity:0.35;pointer-events:none;cursor:default}.apply-btn:disabled{opacity:0.35;pointer-events:none;cursor:default}.connector-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.connector-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px 12px;border-radius:14px;border:1px solid var(--border-color);background:linear-gradient(160deg,rgba(30,30,60,.6),rgba(20,20,50,.8));cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s;gap:8px}.connector-tile:hover{transform:translateY(-3px);box-shadow:0 6px 20px var(--accent-glow);border-color:var(--accent-primary)}.connector-tile.configured{background:linear-gradient(160deg,rgba(60,30,90,.6),rgba(40,20,70,.8));border-color:var(--accent-secondary);box-shadow:0 2px 12px var(--accent-glow)}.connector-tile-name{font-size:14px;font-weight:600;color:var(--text-primary)}.connector-category{font-size:11px;color:var(--text-secondary);background:rgba(138,43,226,.15);padding:2px 8px;border-radius:10px}.search-input{flex:1;min-width:100px;padding:6px 14px;border-radius:20px;border:1px solid var(--border-color);background:rgba(15,15,35,.8);color:var(--text-primary);font-size:13px;transition:.3s}.search-input:focus{outline:0;border-color:rgba(183,148,246,.6)}.search-input::placeholder{color:rgba(183,148,246,.5)}.filter-buttons-container{display:flex;gap:8px;flex-wrap:nowrap}.conn-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:1000}.conn-modal-content{background:rgba(20,20,50,.95);border:1px solid var(--border-color);border-radius:16px;padding:28px;max-width:420px;width:90%;display:flex;flex-direction:column;gap:16px;box-shadow:0 8px 40px rgba(0,0,0,.5)}.conn-modal-title{font-size:18px;font-weight:700;color:var(--text-primary)}.conn-modal-desc{font-size:13px;color:var(--text-secondary);line-height:1.5}.conn-modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}.conn-modal-btn{padding:12px 24px;border:none;border-radius:12px;font-size:14px;background:linear-gradient(135deg,var(--accent-primary) 0,var(--accent-secondary) 50%,var(--accent-tertiary) 100%);color:#fff;cursor:pointer;transition:.3s;font-weight:600;letter-spacing:.5px;box-shadow:0 4px 20px rgba(102,126,234,.4)}.conn-modal-btn:hover{transform:translateY(-2px);box-shadow:0 6px 25px rgba(102,126,234,.6)}.conn-modal-btn.cancel{background:rgba(100,100,100,.4);box-shadow:none}.conn-modal-btn.cancel:hover{background:rgba(100,100,100,.6);transform:translateY(-1px)}.conn-modal-btn.remove{background:rgba(180,50,50,.6);box-shadow:none}.conn-modal-btn.remove:hover{background:rgba(200,60,60,.8);transform:translateY(-1px)}.light-mode .connector-tile{background:linear-gradient(160deg,rgba(240,235,255,.8),rgba(250,248,255,.9))}.light-mode .connector-tile.configured{background:linear-gradient(160deg,rgba(220,200,255,.8),rgba(235,220,255,.9))}.light-mode .search-input{background:rgba(255,255,255,.8)}.light-mode .search-input::placeholder{color:rgba(107,79,138,.5)}.light-mode .conn-modal-content{background:rgba(250,248,255,.98)}</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>
 </head>
 <body>
-    <div class="chat-panel">
-        <div class="chat-header">SynthOS</div>
-        <div class="chat-messages" id="chatMessages">
-            <div class="chat-message">
-                <p><strong>SynthOS:</strong> Please fill in all required fields in the settings form and click 'Update'. Ensure your OpenAI or Anthropic API Key is valid and select the model you wish to use.</p>
-                <p><code>Max Output Tokens</code> controls how large of a page that can be rendered and <code>Additional Instructions</code> can be used to provide further prompt instructions for how pages should be updated.</p>
+    <div class="chat-panel" data-locked="true">
+        <div class="chat-header" data-locked="true">SynthOS</div>
+        <div class="chat-messages" id="chatMessages" data-locked="true">
+            <div class="chat-message" id="defaultGreeting">
+                <p><strong>SynthOS:</strong> Configure your settings below. Use the accordion sections to navigate between General settings, Model configuration (Page Builder &amp; Chat Completion), and Additional Features.</p>
+                <p>The <strong>Page Builder Model</strong> is used when building pages via chat. The <strong>Chat Model</strong> is used by pages that call <code>synthos.generate.completion()</code>.</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>
-        <div class="link-group">
-            <a href="#" id="saveLink">Save</a>
-            <a href="/pages" id="pagesLink">Pages</a>
-            <a href="#" id="resetLink">Reset</a>
+        <div class="link-group" data-locked="true">
+            <a href="#" id="saveLink" data-locked="true">Save</a>
+            <a href="/pages" id="pagesLink" data-locked="true">Pages</a>
+            <a href="#" id="resetLink" data-locked="true">Reset</a>
         </div>
-        <form action="/" method="POST" id="chatForm">
-            <input type="text" class="chat-input" id="chatInput" name="message" placeholder="Type a message...">
-            <button type="submit" class="chat-submit">Send</button>
+        <form action="/" method="POST" id="chatForm" data-locked="true">
+            <input type="text" class="chat-input" id="chatInput" name="message" placeholder="Type a message..." data-locked="true">
+            <button type="submit" class="chat-submit" data-locked="true">Send</button>
         </form>
     </div>
-    <div class="viewer-panel" id="viewerPanel">
-        <div class="settings-form">
-            <div class="dialog-title">Settings</div>
-            <div class="dialog-content">
-                <form action="/api/settings" method="POST" id="settingsForm">
-                    <div class="form-group">
-                        <label for="serviceApiKey">Service API Key</label>
-                        <input type="password" id="serviceApiKey" name="serviceApiKey" placeholder="Enter your API Key" required>
+    <div class="viewer-panel" id="viewerPanel" style="justify-content: flex-start; align-items: stretch;">
+        <div class="settings-title" style="max-width: none; border-radius: 12px 12px 0 0;">Settings</div>
+        <div class="settings-container" style="max-width: none; border-radius: 0; max-height: none; flex-grow: 1;">
+            <div class="accordion-section active" data-section="general">
+                <button class="accordion-header">
+                    <span>General</span>
+                    <span class="accordion-chevron">&#9662;</span>
+                </button>
+                <div class="accordion-body">
+                    <div class="accordion-content">
+                        <div class="form-group">
+                            <label for="theme">Theme</label>
+                            <select id="theme">
+                                <option value="">Loading themes...</option>
+                            </select>
+                        </div>
                     </div>
-                    <div class="form-group">
-                        <label for="model">Model</label>
-                        <select id="model" name="model" required>
-                            <option value="">Select a model</option>
-                        </select>
+                    <div class="button-row">
+                        <button class="apply-btn" data-apply="general">Apply</button>
                     </div>
-                    <div class="form-group">
-                        <label for="maxTokens">Max Output Tokens</label>
-                        <input type="number" id="maxTokens" name="maxTokens" placeholder="Enter max token count" required>
+                </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="config-required-banner" 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">
+                            <div class="model-card-title">Page Builder Model</div>
+                            <div class="form-group">
+                                <label for="provider-builder">Provider</label>
+                                <select id="provider-builder" required="">
+                                    <option value="">Select a provider</option>
+                                </select>
+                            </div>
+                            <div class="form-group" id="fg-apikey-builder">
+                                <label for="serviceApiKey-builder">API Key</label>
+                                <input type="password" id="serviceApiKey-builder" placeholder="Enter your API Key" required="">
+                                <div id="providerInstructions" class="info-text" style="display:none;margin-top:8px;"></div>
+                            </div>
+                            <div class="form-group" id="fg-model-builder">
+                                <label for="model-builder">Model</label>
+                                <select id="model-builder" required="">
+                                    <option value="">Select a model</option>
+                                </select>
+                            </div>
+                            <a id="moreSettingsLink" class="more-settings-link">&#9662; More settings</a>
+                            <div class="form-group" id="fg-maxTokens-builder">
+                                <label for="maxTokens-builder">Max Output Tokens</label>
+                                <input type="number" id="maxTokens-builder" placeholder="Enter max token count" required="">
+                            </div>
+                            <div class="form-group" id="fg-instructions-builder">
+                                <label for="instructions-builder">Additional Instructions</label>
+                                <textarea id="instructions-builder" placeholder="Enter any additional instructions"></textarea>
+                            </div>
+                        </div>
+                        <div class="model-card" id="chatCard">
+                            <div class="model-card-title">Chat Model</div>
+                            <div class="form-group" id="fg-provider-chat">
+                                <label for="provider-chat">Provider</label>
+                                <select id="provider-chat" required="">
+                                    <option value="">Select a provider</option>
+                                </select>
+                            </div>
+                            <div class="form-group" id="fg-apikey-chat">
+                                <label for="serviceApiKey-chat">API Key</label>
+                                <input type="password" id="serviceApiKey-chat" placeholder="Enter your API Key" required="">
+                            </div>
+                            <div class="form-group" id="fg-model-chat">
+                                <label for="model-chat">Model</label>
+                                <select id="model-chat" required="">
+                                    <option value="">Select a model</option>
+                                </select>
+                            </div>
+                            <a id="moreSettingsLinkChat" class="more-settings-link">&#9662; More settings</a>
+                            <div class="form-group" id="fg-maxTokens-chat">
+                                <label for="maxTokens-chat">Max Output Tokens</label>
+                                <input type="number" id="maxTokens-chat" placeholder="Enter max token count" required="">
+                            </div>
+                            <div class="form-group" id="fg-instructions-chat">
+                                <label for="instructions-chat">Additional Instructions</label>
+                                <textarea id="instructions-chat" placeholder="Enter any additional instructions"></textarea>
+                            </div>
+                        </div>
                     </div>
-                    <div class="form-group">
-                        <label for="instructions">Additional Instructions</label>
-                        <textarea id="instructions" name="instructions" placeholder="Enter any additional instructions"></textarea>
+                    <div class="button-row">
+                        <button class="apply-btn" data-apply="models">Apply</button>
                     </div>
-                    <button type="submit" class="chat-submit" action="/api/submit">Update</button>
-                </form>
-                <p class="info-text">An API Key is required which can be generated from either <a href="https://platform.openai.com/api-keys" target="_blank">OpenAI API Keys</a> or <a href="https://console.anthropic.com/settings/keys" target="_blank">Anthropic API Keys</a>.</p>
+                </div>
             </div>
+            <div class="accordion-section" data-section="connectors">
+                <button class="accordion-header">
+                    <span>Connectors</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>
+                            <input type="text" class="search-input" id="connectorSearch" placeholder="Search connectors...">
+                        </div>
+                        <div class="connector-grid" id="connectorGrid"></div>
+                    </div>
+                </div>
+            </div>
         </div>
+        <div id="loadingOverlay" class="loading-overlay"><div class="spinner"></div></div>
     </div>
-    <div id="thoughts" style="display: none;">Ask the user to update their settings.</div>
-    <div id="loadingOverlay" class="loading-overlay"><div class="spinner"></div></div>
-    <script>
-        // Basic chat functionality
-        document.getElementById("chatInput").focus();
-        document.getElementById("chatForm").addEventListener('submit', (event) => {
-            document.getElementById("loadingOverlay").style.display = 'flex';
-            document.getElementById("chatForm").action = window.location.pathname;
-        });
-        document.getElementById("saveLink").addEventListener("click", function() {
-            const pageName = prompt("Enter the name of the page to save as:");
-            if (pageName) {
-                window.location.href = `${window.location.pathname}/save?name=${encodeURIComponent(pageName)}`;
-            }
+    <div class="conn-modal-overlay" id="connectorModal" style="display:none;">
+        <div class="conn-modal-content">
+            <div class="conn-modal-title" id="connectorModalTitle"></div>
+            <div class="conn-modal-desc" id="connectorModalDesc"></div>
+            <div id="connectorApiKeyGroup" class="form-group">
+                <label for="connectorApiKey">API Key</label>
+                <input type="password" id="connectorApiKey" 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" style="display:flex;gap:8px;margin-bottom:12px;">
+                    <button class="filter-btn active" id="oauthModeManual">Manual Token</button>
+                    <button class="filter-btn" id="oauthModeApp">OAuth App</button>
+                </div>
+                <div id="connectorManualGroup">
+                    <div class="form-group" style="margin-bottom:10px;">
+                        <label for="oauth-field-accessToken">Access Token</label>
+                        <input type="password" id="oauth-field-accessToken" placeholder="Paste token from Graph API Explorer">
+                    </div>
+                    <div class="form-group" style="margin-bottom:10px;">
+                        <label for="oauth-field-userId">IG User ID <span style="color:var(--text-secondary);font-weight:400;">(optional)</span></label>
+                        <input type="text" id="oauth-field-userId" placeholder="Instagram Business Account ID">
+                    </div>
+                </div>
+                <div id="connectorAppGroup" style="display:none;">
+                    <div class="form-group" id="connectorOAuthFields"></div>
+                    <button class="conn-modal-btn" id="connectorConnectBtn" style="width:100%;margin-bottom:8px;">Connect with OAuth</button>
+                </div>
+                <button class="conn-modal-btn remove" id="connectorDisconnectBtn" style="width:100%;display:none;">Disconnect</button>
+            </div>
+            <div class="form-group" style="flex-direction:row;align-items:center;gap:12px;">
+                <label for="connectorEnabled" style="margin-bottom:0;">Enabled</label>
+                <label class="toggle-switch">
+                    <input type="checkbox" id="connectorEnabled">
+                    <span class="toggle-slider"></span>
+                </label>
+            </div>
+            <div class="conn-modal-actions">
+                <button class="conn-modal-btn" id="connectorSaveBtn">Save</button>
+                <button class="conn-modal-btn cancel" id="connectorCancelBtn">Cancel</button>
+                <button class="conn-modal-btn remove" id="connectorRemoveBtn">Remove</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');
         });
-        document.getElementById("resetLink").addEventListener("click", function() {
-            window.location.href = `${window.location.pathname}/reset`;
+        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 && ['general', 'models', 'connectors'].indexOf(tabParam) !== -1) {
+    openSection(tabParam);
+}
+// --- Connectors logic ---
+var connectorList = [], activeConnectorCategory = 'All', currentConnectorId = null;
+function loadConnectors() {
+    fetch('/api/connectors').then(function(r) { return r.json(); }).then(function(list) {
+        connectorList = list;
+        renderConnectorFilterBar();
+        renderConnectorGrid();
+    });
+}
+function renderConnectorFilterBar() {
+    var container = document.getElementById('connectorFilterButtons');
+    container.innerHTML = '';
+    var cats = new Set();
+    connectorList.forEach(function(c) { cats.add(c.category); });
+    var sorted = Array.from(cats).sort();
+    ['All'].concat(sorted).forEach(function(cat) {
+        var btn = document.createElement('button');
+        btn.className = 'filter-btn' + (activeConnectorCategory === cat ? ' active' : '');
+        btn.textContent = cat;
+        btn.addEventListener('click', function() {
+            activeConnectorCategory = cat;
+            renderConnectorFilterBar();
+            renderConnectorGrid();
         });
-        window.onload = function() {
-            const chatMessages = document.getElementById('chatMessages');
-            chatMessages.scrollTop = chatMessages.scrollHeight;
+        container.appendChild(btn);
+    });
+}
+function renderConnectorGrid() {
+    var grid = document.getElementById('connectorGrid');
+    var searchTerm = (document.getElementById('connectorSearch').value || '').toLowerCase();
+    grid.innerHTML = '';
+    connectorList.filter(function(c) {
+        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.addEventListener('click', function() { openConnectorModal(c.id); });
+        var name = document.createElement('div');
+        name.className = 'connector-tile-name';
+        name.textContent = c.name;
+        var cat = document.createElement('div');
+        cat.className = 'connector-category';
+        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;
+        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 = 'form-group';
+                wrap.style.marginBottom = '10px';
+                var lbl = document.createElement('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.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(--accent-tertiary);">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').style.display = 'flex';
+    });
+}
+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 = 'filter-btn' + (mode === 'manual' ? ' active' : '');
+    document.getElementById('oauthModeApp').className = 'filter-btn' + (mode === 'app' ? ' active' : '');
+}
+document.getElementById('oauthModeManual').addEventListener('click', function() { setOAuthMode('manual'); });
+document.getElementById('oauthModeApp').addEventListener('click', function() { setOAuthMode('app'); });
+function closeConnectorModal() {
+    document.getElementById('connectorModal').style.display = 'none';
+    currentConnectorId = null;
+}
+document.getElementById('connectorCancelBtn').addEventListener('click', closeConnectorModal);
+document.getElementById('connectorModal').addEventListener('click', function(e) {
+    if (e.target === this) closeConnectorModal();
+});
+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);
+// 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);
+}
+// --- 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;
-        // Form validation
-        document.getElementById('settingsForm').addEventListener('submit', function(event) {
-            const serviceApiKey = document.getElementById('serviceApiKey').value;
-            const model = document.getElementById('model').value;
-            const maxTokens = document.getElementById('maxTokens').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;
+    }
-            if (!serviceApiKey || !model || !maxTokens) {
-                alert('Please fill in all required fields before submitting.');
-                event.preventDefault();
+    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,
+        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) {
+            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.');
+    });
+}
+document.querySelectorAll('.apply-btn').forEach(function(btn) {
+    btn.addEventListener('click', saveAllSettings);
+});
+// --- 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>.'
+};
+// --- "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 btns = document.querySelectorAll('.apply-btn');
+    if (!wizardActive) {
+        btns.forEach(function(b) { b.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;
+    btns.forEach(function(b) { b.disabled = !ready; });
+}
+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;
+    loadConnectors();
+    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="general"]').classList.add('disabled');
+        document.querySelector('.accordion-section[data-section="connectors"]').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 buttons until configured
+        document.querySelectorAll('.apply-btn').forEach(function(b) { b.disabled = true; });
-        // Fetch settings and populate form
-        let isConfigured = false;
-        fetch('/api/settings')
-            .then(response => response.json())
-            .then(data => {
-                console.log('Settings:', data);
-                const serviceApiKey = data.serviceApiKey || '';
-                const model = data.model || '';
-                const maxTokens = data.maxTokens || '';
-                isConfigured = serviceApiKey && model && maxTokens;
-                document.getElementById('serviceApiKey').value = serviceApiKey;
-                document.getElementById('model').innerHTML = data.availableModels.map(model => `<option value="${model}">${model}</option>`).join('');
-                document.getElementById('model').value = model;
-                document.getElementById('maxTokens').value = maxTokens;
-                document.getElementById('instructions').value = data.instructions || '';
-                // Disable chat input if not configured
-                if (!isConfigured) {
-                    document.getElementById('chatInput').disabled = true;
-                    document.getElementById('chatInput').classList.add('disabled');
-                }
-            })
-            .catch(error => console.error('Error fetching settings:', error));
+        updateWizardVisibility();
+    }
+}).catch(function(error) {
+    console.error('Error fetching settings:', error);
+});
     </script>
-</body>
-</html>
+<script id="page-helpers" src="/api/page-helpers.js?v=2" data-locked="true"></script>
+<script id="page-script" src="/api/page-script.js?v=2" data-locked="true"></script>
+</body></html>