synthos 0.8.0 → 0.9.0

package/required-pages/{settings.html → settings/page.html}

@@ -4,55 +4,100 @@
     <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>.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{margin-left:auto;width:180px;min-width:120px;flex-shrink:0;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-shrink:1;min-width:0;overflow:hidden;flex-wrap:nowrap}.conn-modal-content{background:rgba(20,20,50,.95);border:1px solid var(--border-color);border-radius:16px;padding:28px;max-width:520px;width:90%;max-height:85vh;display:flex;flex-direction:column;gap:16px;box-shadow:0 8px 40px rgba(0,0,0,.5);overflow-y:auto}.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)}.more-dropdown{position:relative;flex-shrink:0}.more-btn{position:relative}.more-menu{position:absolute;top:100%;left:0;margin-top:4px;min-width:150px;max-height:250px;overflow-y:auto;border-radius:8px;padding:4px 0;box-shadow:0 8px 30px rgba(0,0,0,.4);display:none;border:1px solid var(--border-color);background:rgba(30,30,50,.95);z-index:100}.more-menu.show{display:block}.more-menu-item{padding:8px 16px;font-size:13px;cursor:pointer;color:var(--text-primary);transition:background .15s;white-space:nowrap}.more-menu-item:hover{background:linear-gradient(135deg,rgba(102,126,234,.3) 0,rgba(118,75,162,.3) 100%)}.more-menu-item.active{background:linear-gradient(135deg,rgba(102,126,234,.2) 0,rgba(118,75,162,.2) 100%);color:var(--accent-tertiary)}.conn-tooltip{position:fixed;padding:8px 12px;background:var(--bg-tertiary,#0f0f23);color:var(--text-secondary,#b794f6);border:1px solid var(--border-color,rgba(138,43,226,0.3));border-radius:8px;font-size:12px;line-height:1.5;max-width:260px;pointer-events:none;z-index:10000;box-shadow:0 4px 16px rgba(0,0,0,.4);opacity:0;transition:opacity .15s}.conn-tooltip.visible{opacity:1}.light-mode .more-menu{background:rgba(255,255,255,.97);box-shadow:0 8px 30px rgba(0,0,0,.15)}.light-mode .conn-modal-content{background:rgba(250,248,255,.98)}.agent-toggle-row{display:flex;align-items:center;gap:10px}.agent-list{display:flex;flex-direction:column;gap:0;max-height:400px;overflow-y:auto;border:1px solid var(--border-color);border-radius:12px}.agent-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border-color);cursor:pointer;transition:background .15s}.agent-row:last-child{border-bottom:none}.agent-row:hover{background:rgba(138,43,226,.06)}.agent-row.selected{background:rgba(138,43,226,.1)}.agent-row-info{flex:1;min-width:0;display:flex;align-items:center;gap:10px}.agent-row-name{font-size:14px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.agent-row-desc{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.agent-row-badge{font-size:11px;color:var(--text-secondary);background:rgba(138,43,226,.15);padding:2px 8px;border-radius:10px;white-space:nowrap;flex-shrink:0}.agent-status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.agent-status-dot.connected{background:#4ade80}.agent-status-dot.disconnected{background:rgba(100,100,100,.5)}.agent-row-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.agent-chat-panel{border:1px solid var(--border-color);border-radius:12px;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:rgba(138,43,226,.08);font-size:13px;font-weight:600;color:var(--text-primary)}.agent-chat-close{background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:16px;padding:0 4px}.agent-chat-close:hover{color:var(--text-primary)}.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:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:#fff;align-self:flex-end}.agent-chat-msg.agent{background:rgba(15,15,35,.4);color:var(--text-primary);align-self:flex-start;border:1px solid var(--border-color)}.agent-chat-msg.error{background:rgba(180,50,50,.2);color:rgba(255,150,150,.9);align-self:center;font-size:12px}.agent-chat-msg.status{color:var(--text-secondary);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(--border-color)}.agent-chat-input{flex:1;padding:10px 14px;border-radius:10px;border:1px solid var(--border-color);background:rgba(15,15,35,.8);color:var(--text-primary);font-size:13px}.agent-chat-input:focus{outline:0;border-color:rgba(183,148,246,.6)}.agent-chat-input::placeholder{color:rgba(183,148,246,.5)}.agent-chat-send{padding:10px 18px;border:none;border-radius:10px;font-size:13px;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:#fff;cursor:pointer;font-weight:600;transition:.2s}.agent-chat-send:hover{transform:translateY(-1px)}.agent-chat-send:disabled{opacity:.5;pointer-events:none}.light-mode .agent-list{border-color:rgba(118,75,162,.15)}.light-mode .agent-row:hover{background:rgba(118,75,162,.05)}.light-mode .agent-row.selected{background:rgba(118,75,162,.08)}.light-mode .agent-chat-msg.agent{background:rgba(255,255,255,.6)}.light-mode .agent-chat-input{background:rgba(255,255,255,.8)}</style>
+    <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">SynthOS</div>
+        <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> 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>
+                <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>
-        <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>
+        </div>
         <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>
+            <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 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 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="general">
+            <div class="accordion-section active" data-section="appearance">
                 <button class="accordion-header">
-                    <span>General</span>
+                    <span>Appearance</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">
+                        <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>
-                    <div class="button-row">
-                        <button class="apply-btn" data-apply="general">Apply</button>
+                        <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>
@@ -64,79 +109,76 @@
                 </button>
                 <div class="accordion-body">
                     <div class="accordion-content">
-                        <div id="configBanner" class="config-required-banner" style="display:none;">
+                        <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">
-                            <div class="model-card-title">Page Builder Model</div>
-                            <div class="form-group">
-                                <label for="provider-builder">Provider</label>
-                                <select id="provider-builder" required="">
+                            <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="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 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="form-group" id="fg-model-builder">
-                                <label for="model-builder">Model</label>
-                                <select id="model-builder" required="">
+                            <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="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="">
+                            <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="form-group" id="fg-instructions-builder">
-                                <label for="instructions-builder">Additional Instructions</label>
-                                <textarea id="instructions-builder" placeholder="Enter any additional instructions"></textarea>
+                            <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">
-                            <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="">
+                            <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="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 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="form-group" id="fg-model-chat">
-                                <label for="model-chat">Model</label>
-                                <select id="model-chat" required="">
+                            <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="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="">
+                            <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="form-group" id="fg-instructions-chat">
-                                <label for="instructions-chat">Additional Instructions</label>
-                                <textarea id="instructions-chat" placeholder="Enter any additional instructions"></textarea>
+                            <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 class="button-row">
-                        <button class="apply-btn" data-apply="models">Apply</button>
-                    </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(--accent-tertiary, #8a2be2);color:#fff;vertical-align:middle;line-height:16px;text-transform:uppercase;">Preview</span></span>
+                    <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">
@@ -144,10 +186,12 @@
                         <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="filter-btn more-btn" id="connMoreBtn">More &#9662;</button>
-                                <div class="more-menu" id="connMoreMenu"></div>
+                                <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>
-                            <input type="text" class="search-input" id="connectorSearch" placeholder="Search connectors...">
                         </div>
                         <div class="connector-grid" id="connectorGrid"></div>
                     </div>
@@ -156,28 +200,28 @@
 
             <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(--accent-tertiary, #8a2be2);color:#fff;vertical-align:middle;line-height:16px;text-transform:uppercase;">Preview</span></span>
+                    <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 style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
-                            <div style="font-size:13px;color:var(--text-secondary);">Configure agents (A2A or OpenClaw) that your pages can communicate with.</div>
-                            <button class="conn-modal-btn" id="addAgentBtn" style="padding:8px 18px;font-size:13px;">+ Add Agent</button>
+                        <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="agent-list" id="agentList"></div>
-                        <div id="agentEmptyState" style="display:none;text-align:center;padding:30px;color:var(--text-secondary);font-size:14px;">
+                        <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="agent-chat-close" id="agentChatClose">&times;</button>
+                                <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="agent-chat-input" id="agentChatInput" placeholder="Type a test message...">
-                                <button class="agent-chat-send" id="agentChatSendBtn">Send</button>
+                                <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>
@@ -185,125 +229,152 @@
             </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="modal-overlay" id="agentModal" style="display:none;">
-        <div class="conn-modal-content">
-            <div class="conn-modal-title" id="agentModalTitle">Add Agent</div>
-            <div id="agentFormGroup">
-                <div class="form-group" style="margin-bottom:10px;">
-                    <label>Agent Type</label>
-                    <div style="display:flex;gap:8px;">
-                        <button class="filter-btn active" id="agentTypeA2A">A2A Agent</button>
-                        <button class="filter-btn" id="agentTypeOpenClaw">OpenClaw Agent</button>
+    <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>
-                <div class="form-group" style="margin-bottom:10px;">
-                    <label for="agentUrl">Agent URL</label>
-                    <div style="display:flex;gap:8px;">
-                        <input type="text" id="agentUrl" placeholder="https://example.com" style="flex:1;">
-                        <button class="conn-modal-btn" id="agentDiscoverBtn" style="padding:10px 16px;white-space:nowrap;font-size:13px;">Discover</button>
+                    <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 id="agentUrlHint" style="font-size:11px;color:var(--text-secondary);margin-top:4px;">Enter a URL and click Discover to auto-fill from the agent card, or fill in the fields manually.</div>
-                </div>
-                <div class="form-group" id="agentTokenGroup" style="margin-bottom:10px;display:none;">
-                    <label for="agentToken">Token</label>
-                    <input type="password" id="agentToken" placeholder="Gateway authentication token">
-                </div>
-                <div class="form-group" id="agentSessionKeyGroup" style="margin-bottom:10px;display:none;">
-                    <label for="agentSessionKey">Default Session Key</label>
-                    <input type="text" id="agentSessionKey" placeholder="e.g. agent:main:main">
-                </div>
-                <div id="agentSshTunnelGroup" style="display:none;margin-bottom:10px;">
-                    <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;cursor:pointer;" id="agentSshTunnelToggleHeader">
-                        <span style="font-size:12px;color:var(--text-secondary);" id="agentSshTunnelArrow">&#9654;</span>
-                        <label style="margin:0;cursor:pointer;font-size:13px;font-weight:600;color:var(--text-secondary);">SSH Tunnel</label>
-                        <label class="toggle-switch" style="margin-left:auto;" onclick="event.stopPropagation();">
-                            <input type="checkbox" id="agentSshTunnelEnabled">
-                            <span class="toggle-slider"></span>
-                        </label>
+                    <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 id="agentSshTunnelFields" style="display:none;padding-left:4px;">
-                        <div class="form-group" style="margin-bottom:8px;">
-                            <label for="agentSshCommand" style="font-size:12px;">SSH Command</label>
-                            <input type="text" id="agentSshCommand" placeholder="ssh -p 22 -N -L 18789:127.0.0.1:43901 root@0.0.0.0">
+                    <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 class="form-group" style="margin-bottom:8px;">
-                            <label for="agentSshPassword" style="font-size:12px;">Password</label>
-                            <input type="password" id="agentSshPassword" placeholder="SSH password">
+                        <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>
-                <div class="form-group" style="margin-bottom:10px;">
-                    <label for="agentName">Name</label>
-                    <input type="text" id="agentName" placeholder="My Agent">
-                </div>
-                <div class="form-group" style="margin-bottom:10px;">
-                    <label for="agentDescription">Description</label>
-                    <textarea id="agentDescription" 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(--border-color);background:rgba(15,15,35,.3);margin-bottom:10px;">
-                    <div style="font-size:12px;font-weight:600;color:var(--text-secondary);margin-bottom:4px;">Discovered Skills</div>
-                    <div id="agentSkillsList" style="font-size:12px;color:var(--text-secondary);"></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="conn-modal-actions">
-                <button class="conn-modal-btn" id="agentSaveBtn">Save</button>
-                <button class="conn-modal-btn cancel" id="agentCancelBtn">Cancel</button>
-                <button class="conn-modal-btn remove" id="agentRemoveBtn" style="display:none;">Remove</button>
+            <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="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="connectorOnboarding" style="display:none;">
-                <a id="connectorOnboardingLink" href="#" target="_blank"
-                   style="color:var(--accent-tertiary);font-size:13px;font-weight:500;text-decoration:none;transition:.3s;">
-                   Get your API key &#8594;
-                </a>
-                <ol id="connectorOnboardingSteps"
-                    style="font-size:13px;color:var(--text-secondary);margin:8px 0 0;padding-left:20px;line-height:1.8;">
-                </ol>
+    <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 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 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 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 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 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 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 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 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>
@@ -341,7 +412,7 @@ document.querySelectorAll('.accordion-header').forEach(function(header) {
 // --- URL param: open requested tab ---
 var params = new URLSearchParams(window.location.search);
 var tabParam = params.get('tab');
-if (tabParam && ['general', 'models', 'connectors', 'agents'].indexOf(tabParam) !== -1) {
+if (tabParam && ['appearance', 'models', 'connectors', 'agents'].indexOf(tabParam) !== -1) {
     openSection(tabParam);
 }
 
@@ -371,7 +442,7 @@ function getAllConnectorCategories() {
 function calculateConnectorVisibleCats() {
     var allCats = getAllConnectorCategories();
     var filterBar = document.getElementById('connectorFilterBar');
-    var searchEl = document.getElementById('connectorSearch');
+    var searchEl = document.getElementById('connectorSearchBox');
     var moreDropdown = document.getElementById('connMoreDropdown');
     if (!filterBar) return;
 
@@ -379,7 +450,7 @@ function calculateConnectorVisibleCats() {
 
     // Measure button widths
     var temp = document.createElement('button');
-    temp.className = 'filter-btn';
+    temp.className = 'flm-pivot-tab';
     temp.style.visibility = 'hidden';
     temp.style.position = 'absolute';
     document.body.appendChild(temp);
@@ -456,14 +527,14 @@ function renderConnectorFilterBar() {
 
     // "All" button
     var allBtn = document.createElement('button');
-    allBtn.className = 'filter-btn' + (activeConnectorCategory === 'All' ? ' active' : '');
+    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 = 'filter-btn' + (activeConnectorCategory === 'Enabled' ? ' active' : '');
+    enabledBtn.className = 'flm-pivot-tab' + (activeConnectorCategory === 'Enabled' ? ' flm-pivot-tab--active' : '');
     enabledBtn.textContent = 'Enabled';
     enabledBtn.addEventListener('click', function() { setConnectorCategory('Enabled'); });
     container.appendChild(enabledBtn);
@@ -471,7 +542,7 @@ function renderConnectorFilterBar() {
     // Visible category buttons
     connVisibleCats.forEach(function(cat) {
         var btn = document.createElement('button');
-        btn.className = 'filter-btn' + (activeConnectorCategory === cat ? ' active' : '');
+        btn.className = 'flm-pivot-tab' + (activeConnectorCategory === cat ? ' flm-pivot-tab--active' : '');
         btn.textContent = cat;
         btn.addEventListener('click', function() { setConnectorCategory(cat); });
         container.appendChild(btn);
@@ -480,14 +551,17 @@ function renderConnectorFilterBar() {
     // Overflow dropdown
     if (connOverflowCats.length > 0) {
         moreDropdown.style.display = '';
-        moreBtn.className = 'filter-btn more-btn' + (connOverflowCats.indexOf(activeConnectorCategory) !== -1 ? ' active' : '');
+        moreBtn.className = 'flm-button flm-button--subtle' + (connOverflowCats.indexOf(activeConnectorCategory) !== -1 ? ' flm-pivot-tab--active' : '');
         connOverflowCats.forEach(function(cat) {
-            var item = document.createElement('div');
-            item.className = 'more-menu-item' + (activeConnectorCategory === cat ? ' active' : '');
-            item.textContent = 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('show');
+                moreMenu.classList.remove('flm-contextmenu--visible');
             });
             moreMenu.appendChild(item);
         });
@@ -511,43 +585,6 @@ function loadConnectors() {
     });
 }
 
-// --- Connector tooltip ---
-var connTip = document.createElement('div');
-connTip.className = 'conn-tooltip';
-document.body.appendChild(connTip);
-var connTipTimer = null;
-
-function showConnTip(el, text) {
-    clearTimeout(connTipTimer);
-    connTip.textContent = text;
-    connTip.style.display = 'block';
-    connTip.classList.remove('visible');
-    var r = el.getBoundingClientRect();
-    var tw = connTip.offsetWidth;
-    var th = connTip.offsetHeight;
-    // Position below the tile by default
-    var left = r.left + (r.width / 2) - (tw / 2);
-    var top = r.bottom + 6;
-    // Clamp horizontal
-    if (left < 4) left = 4;
-    if (left + tw > window.innerWidth - 4) left = window.innerWidth - tw - 4;
-    // Flip above if it would go off bottom
-    if (top + th > window.innerHeight - 4) {
-        top = r.top - th - 6;
-    }
-    connTip.style.left = left + 'px';
-    connTip.style.top = top + 'px';
-    void connTip.offsetWidth;
-    connTip.classList.add('visible');
-}
-
-function hideConnTip() {
-    clearTimeout(connTipTimer);
-    connTip.classList.remove('visible');
-    connTip.style.display = 'none';
-}
-hideConnTip();
-
 function renderConnectorGrid() {
     var grid = document.getElementById('connectorGrid');
     var searchTerm = (document.getElementById('connectorSearch').value || '').toLowerCase();
@@ -563,19 +600,16 @@ function renderConnectorGrid() {
     }).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); });
 
-        tile.addEventListener('mouseenter', function() {
-            connTipTimer = setTimeout(function() { showConnTip(tile, c.description); }, 400);
-        });
-        tile.addEventListener('mouseleave', hideConnTip);
-
         var name = document.createElement('div');
-        name.className = 'connector-tile-name';
+        name.className = 'flm-text flm-text--semibold';
         name.textContent = c.name;
 
-        var cat = document.createElement('div');
-        cat.className = 'connector-category';
+        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);
@@ -618,14 +652,15 @@ function openConnectorModal(id) {
             fieldsContainer.innerHTML = '';
             (detail.fields || []).forEach(function(f) {
                 var wrap = document.createElement('div');
-                wrap.className = 'form-group';
-                wrap.style.marginBottom = '10px';
+                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);
@@ -647,7 +682,7 @@ function openConnectorModal(id) {
             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.innerHTML = '<span style="color:var(--themePrimary);">Connected as <strong>' + displayName + '</strong></span>';
                 statusEl.style.display = '';
                 disconnectBtn.style.display = '';
                 modeToggle.style.display = 'none';
@@ -662,7 +697,7 @@ function openConnectorModal(id) {
             document.getElementById('connectorApiKey').placeholder = detail.hasKey ? '(key saved — leave blank to keep)' : 'Enter your API key';
         }
 
-        document.getElementById('connectorModal').style.display = 'flex';
+        document.getElementById('connectorModal').classList.add('flm-dialog-overlay--open');
     });
 }
 
@@ -672,15 +707,15 @@ 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').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').style.display = 'none';
+    document.getElementById('connectorModal').classList.remove('flm-dialog-overlay--open');
     currentConnectorId = null;
 }
 
@@ -765,10 +800,10 @@ document.getElementById('connectorSearch').addEventListener('input', renderConne
 // More dropdown toggle
 document.getElementById('connMoreBtn').addEventListener('click', function(e) {
     e.stopPropagation();
-    document.getElementById('connMoreMenu').classList.toggle('show');
+    document.getElementById('connMoreMenu').classList.toggle('flm-contextmenu--visible');
 });
 document.addEventListener('click', function() {
-    document.getElementById('connMoreMenu').classList.remove('show');
+    document.getElementById('connMoreMenu').classList.remove('flm-contextmenu--visible');
 });
 
 // Resize observer — recalculate visible categories when filter bar resizes
@@ -821,26 +856,29 @@ function renderAgentList() {
 
     agentList.forEach(function(a) {
         var row = document.createElement('div');
-        row.className = 'agent-row';
+        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.className = 'agent-status-dot ' + (a.connected ? 'connected' : 'disconnected');
+            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 = 'agent-row-info';
+        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('div');
-        nameEl.className = 'agent-row-name';
+        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('div');
-        descEl.className = 'agent-row-desc';
+        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);
@@ -848,21 +886,21 @@ function renderAgentList() {
         row.appendChild(info);
 
         // Badge
-        var badge = document.createElement('div');
-        badge.className = 'agent-row-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.className = 'agent-row-actions';
+        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 = 'filter-btn';
-        chatBtn.style.fontSize = '12px';
-        chatBtn.style.padding = '4px 10px';
+        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) {
@@ -886,10 +924,9 @@ function renderAgentList() {
 
         // Edit button
         var editBtn = document.createElement('button');
-        editBtn.className = 'filter-btn';
+        editBtn.className = 'flm-button flm-button--subtle';
         editBtn.textContent = 'Edit';
-        editBtn.style.fontSize = '12px';
-        editBtn.style.padding = '4px 10px';
+        editBtn.style.cssText = 'font-size:12px;padding:4px 10px;';
         editBtn.addEventListener('click', function(e) {
             e.stopPropagation();
             openAgentEditModal(a);
@@ -898,9 +935,10 @@ function renderAgentList() {
 
         // Enable/disable toggle
         var toggleLabel = document.createElement('label');
-        toggleLabel.className = 'toggle-switch';
+        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) {
@@ -912,10 +950,13 @@ function renderAgentList() {
                 }).then(function() { loadAgents(); });
             };
         })(a.id, toggleInput));
-        var toggleSlider = document.createElement('span');
-        toggleSlider.className = 'toggle-slider';
+        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(toggleSlider);
+        toggleLabel.appendChild(toggleTrack);
         actions.appendChild(toggleLabel);
 
         row.appendChild(actions);
@@ -1049,8 +1090,8 @@ document.getElementById('agentChatInput').addEventListener('keydown', function(e
 
 function setAgentType(type) {
     currentAgentType = type;
-    document.getElementById('agentTypeA2A').className = 'filter-btn' + (type === 'a2a' ? ' active' : '');
-    document.getElementById('agentTypeOpenClaw').className = 'filter-btn' + (type === 'openclaw' ? ' active' : '');
+    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';
@@ -1083,7 +1124,7 @@ function resetAgentModal() {
 function openAgentAddModal() {
     resetAgentModal();
     document.getElementById('agentModalTitle').textContent = 'Add Agent';
-    document.getElementById('agentModal').style.display = 'flex';
+    document.getElementById('agentModal').classList.add('flm-dialog-overlay--open');
 }
 
 function openAgentEditModal(agent) {
@@ -1110,11 +1151,11 @@ function openAgentEditModal(agent) {
         }
     }
     document.getElementById('agentRemoveBtn').style.display = '';
-    document.getElementById('agentModal').style.display = 'flex';
+    document.getElementById('agentModal').classList.add('flm-dialog-overlay--open');
 }
 
 function closeAgentModal() {
-    document.getElementById('agentModal').style.display = 'none';
+    document.getElementById('agentModal').classList.remove('flm-dialog-overlay--open');
     resetAgentModal();
 }
 
@@ -1130,7 +1171,7 @@ function renderSkillsList(skills) {
     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:rgba(138,43,226,.15);font-size:11px;">' + label + desc + '</span>';
+        return '<span style="display:inline-block;padding:2px 8px;margin:2px;border-radius:8px;background:var(--defaultHoverBackground);font-size:11px;">' + label + desc + '</span>';
     }).join('');
 }
 
@@ -1310,6 +1351,7 @@ function saveAllSettings() {
     var body = {
         version: 2,
         theme: document.getElementById('theme').value,
+        toolbarPosition: document.getElementById('toolbarPosition').value,
         models: models,
         features: []
     };
@@ -1320,6 +1362,7 @@ function saveAllSettings() {
         body: JSON.stringify(body)
     }).then(function(response) {
         if (response.ok || response.redirected) {
+            settingsDirty = false;
             if (wizardActive) {
                 window.location.href = '/builder?firstRun=true';
             } else {
@@ -1334,8 +1377,65 @@ function saveAllSettings() {
     });
 }
 
-document.querySelectorAll('.apply-btn').forEach(function(btn) {
-    btn.addEventListener('click', saveAllSettings);
+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 ---
@@ -1450,9 +1550,9 @@ function updateWizardVisibility() {
 }
 
 function updateApplyButton() {
-    var btns = document.querySelectorAll('.apply-btn');
+    var btn = document.getElementById('applyBtn');
     if (!wizardActive) {
-        btns.forEach(function(b) { b.disabled = false; });
+        btn.disabled = false;
         return;
     }
     var hasProvider = !!document.getElementById('provider-builder').value;
@@ -1460,7 +1560,8 @@ function updateApplyButton() {
     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; });
+    btn.disabled = !ready;
+    if (ready) btn.classList.add('flm-button--primary');
 }
 
 function autoPopulateChatCard() {
@@ -1555,10 +1656,23 @@ Promise.all([
         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) {
@@ -1599,7 +1713,7 @@ Promise.all([
         openSection('models');
 
         // Disable other accordion tabs
-        document.querySelector('.accordion-section[data-section="general"]').classList.add('disabled');
+        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');
 
@@ -1625,8 +1739,8 @@ Promise.all([
         builderProviderSelect.insertBefore(placeholder, builderProviderSelect.firstChild);
         builderProviderSelect.value = '';
 
-        // Disable Apply buttons until configured
-        document.querySelectorAll('.apply-btn').forEach(function(b) { b.disabled = true; });
+        // Disable Apply button until configured
+        document.getElementById('applyBtn').disabled = true;
 
         updateWizardVisibility();
     }
@@ -1634,6 +1748,6 @@ Promise.all([
     console.error('Error fetching settings:', error);
 });
     </script>
-<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>
+<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>