@memtensor/memos-local-openclaw-plugin 1.0.4-beta.2 → 1.0.4-beta.3

package/src/viewer/html.ts

@@ -106,7 +106,7 @@ input,textarea,select{font-family:inherit;font-size:inherit}
 
 /* ─── App Layout (dark dashboard, same as www) ─── */
 .app{display:none;flex-direction:column;min-height:100vh}
-.topbar{background:rgba(11,13,17,.88);border-bottom:1px solid var(--border);padding:0 28px;height:56px;display:flex;align-items:center;position:sticky;top:0;z-index:100;backdrop-filter:blur(12px)}
+.topbar{background:rgba(11,13,17,.88);border-bottom:1px solid var(--border);padding:0 max(32px,calc((100% - 1400px)/2 + 32px));height:56px;display:flex;align-items:center;position:sticky;top:0;z-index:100;backdrop-filter:blur(12px)}
 .topbar .brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:var(--text);letter-spacing:-.02em;flex-shrink:0}
 .topbar .brand .icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:18px;background:none;border-radius:0}
 .topbar .brand .brand-title{font-size:13px;font-weight:500;opacity:.7}
@@ -712,9 +712,7 @@ input,textarea,select{font-family:inherit;font-size:inherit}
 .settings-tab-btn.active{background:var(--bg-card);color:var(--text);font-weight:600;box-shadow:0 2px 8px rgba(0,0,0,.06),0 0 0 1px rgba(99,102,241,.1)}
 .settings-tab-btn .stab-icon{font-size:15px;line-height:1}
 .settings-tab-btn .stab-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
-.settings-tab-btn[data-tab="embedding"] .stab-dot{background:#6366f1}
-.settings-tab-btn[data-tab="summarizer"] .stab-dot{background:#8b5cf6}
-.settings-tab-btn[data-tab="skill"] .stab-dot{background:#f59e0b}
+.settings-tab-btn[data-tab="models"] .stab-dot{background:#6366f1}
 .settings-tab-btn[data-tab="hub"] .stab-dot{background:#06b6d4}
 .settings-tab-btn[data-tab="general"] .stab-dot{background:#10b981}
 .settings-tab-btn.active .stab-dot{box-shadow:0 0 6px currentColor}
@@ -726,9 +724,7 @@ input,textarea,select{font-family:inherit;font-size:inherit}
 .settings-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;opacity:.5;transition:opacity .3s}
 .settings-card:hover{border-color:rgba(99,102,241,.25);box-shadow:0 0 24px rgba(99,102,241,.06),0 8px 32px rgba(0,0,0,.1)}
 .settings-card:hover::before{opacity:1}
-.settings-card.card-embedding::before{background:linear-gradient(90deg,#6366f1,#818cf8,#a5b4fc)}
-.settings-card.card-summarizer::before{background:linear-gradient(90deg,#8b5cf6,#a78bfa,#c4b5fd)}
-.settings-card.card-skill::before{background:linear-gradient(90deg,#f59e0b,#fbbf24,#fcd34d)}
+.settings-card.card-models::before{background:linear-gradient(90deg,#6366f1,#8b5cf6,#f59e0b)}
 .settings-card.card-hub::before{background:linear-gradient(90deg,#06b6d4,#22d3ee,#67e8f9)}
 .settings-card.card-general::before{background:linear-gradient(90deg,#10b981,#34d399,#6ee7b7)}
 .settings-card-header{display:flex;align-items:center;gap:14px;padding:22px 28px 0}
@@ -802,6 +798,28 @@ input,textarea,select{font-family:inherit;font-size:inherit}
 [data-theme="light"] .settings-actions .btn-primary:hover{background:rgba(79,70,229,.1);border-color:#4f46e5}
 .settings-saved{display:inline-flex;align-items:center;gap:6px;color:var(--green);font-size:12px;font-weight:600;opacity:0;transition:opacity .3s}
 .settings-saved.show{opacity:1}
+.team-guide{margin-bottom:20px;border:1px solid rgba(6,182,212,.2);border-radius:12px;background:linear-gradient(135deg,rgba(6,182,212,.04),rgba(99,102,241,.03));position:relative;overflow:hidden;padding:20px 22px 18px;display:none}
+.team-guide::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#06b6d4,#6366f1,#8b5cf6);opacity:.6}
+.team-guide-title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--text);margin-bottom:4px}
+.team-guide-subtitle{font-size:11.5px;color:var(--text-muted);line-height:1.6;margin-bottom:16px}
+.team-guide-options{display:grid;grid-template-columns:1fr 1fr;gap:14px}
+@media(max-width:800px){.team-guide-options{grid-template-columns:1fr}}
+.team-guide-opt{border:1px solid var(--border);border-radius:10px;padding:16px;background:var(--bg-card);transition:border-color .2s,box-shadow .2s;cursor:default}
+.team-guide-opt:hover{border-color:rgba(99,102,241,.3);box-shadow:0 4px 16px rgba(0,0,0,.06)}
+.team-guide-opt-header{display:flex;align-items:center;gap:10px;margin-bottom:8px}
+.team-guide-opt-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:16px;flex-shrink:0}
+.team-guide-opt-title{font-size:13px;font-weight:700;color:var(--text)}
+.team-guide-opt-desc{font-size:11px;color:var(--text-sec);line-height:1.7;margin-bottom:12px}
+.team-guide-steps{padding:0 0 0 20px;margin:0 0 12px;counter-reset:none}
+.team-guide-steps li{font-size:11px;color:var(--text-muted);line-height:1.9}
+.team-guide-steps li::marker{color:var(--pri);font-weight:700;font-size:11px}
+.team-guide-opt .btn-guide{font-size:11px;padding:5px 14px;border-radius:6px;font-weight:600;border:1px solid rgba(99,102,241,.25);background:rgba(99,102,241,.08);color:var(--pri);cursor:pointer;transition:background .15s,border-color .15s}
+.team-guide-opt .btn-guide:hover{background:rgba(99,102,241,.14);border-color:var(--pri)}
+.team-guide-dismiss{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--text-muted);font-size:15px;cursor:pointer;padding:4px;line-height:1;opacity:.5;transition:opacity .15s}
+.team-guide-dismiss:hover{opacity:1}
+[data-theme="light"] .team-guide{background:linear-gradient(135deg,rgba(6,182,212,.03),rgba(79,70,229,.02));border-color:rgba(6,182,212,.15)}
+[data-theme="light"] .team-guide-opt{box-shadow:0 1px 3px rgba(0,0,0,.03)}
+[data-theme="light"] .team-guide-opt:hover{box-shadow:0 4px 16px rgba(0,0,0,.04)}
 .model-health-bar{margin-bottom:20px;border-radius:var(--radius-lg);overflow:visible}
 .mh-table{width:100%;border-collapse:separate;border-spacing:0;font-size:12px}
 .mh-table th{text-align:left;padding:6px 12px;font-size:10px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;background:var(--bg);border-bottom:1px solid var(--border)}
@@ -861,9 +879,9 @@ input,textarea,select{font-family:inherit;font-size:inherit}
 .analytics-section::before{display:none}
 .analytics-section h3{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px;display:flex;align-items:center;gap:8px}
 .analytics-section h3 .icon{font-size:14px;opacity:.6}
-.chart-bars{display:flex;align-items:flex-end;gap:1px;padding:12px 4px 4px;min-height:200px;position:relative;width:100%}
+.chart-bars{display:flex;align-items:flex-end;gap:0;padding:12px 0 4px;min-height:200px;position:relative;width:100%}
 .chart-bars::before{content:'';position:absolute;left:0;right:0;bottom:24px;height:1px;background:var(--border);opacity:.4}
-.chart-bar-wrap{flex:1 1 0;min-width:0;max-width:32px;display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;cursor:pointer}
+.chart-bar-wrap{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;cursor:pointer}
 .chart-bar-col{width:100%;height:160px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
 .chart-bar-wrap:hover .chart-bar{opacity:1;filter:brightness(1.2);transform:scaleY(1.02);transform-origin:bottom}
 .chart-bar-wrap:hover .chart-bar-label{color:var(--text)}
@@ -874,7 +892,7 @@ input,textarea,select{font-family:inherit;font-size:inherit}
 .chart-bar.violet{background:linear-gradient(180deg,#8b5cf6 0%,#6366f1 100%)}
 .chart-bar.green{background:linear-gradient(180deg,#34d399 0%,#10b981 100%);box-shadow:0 1px 4px rgba(16,185,129,.12)}
 .chart-bar.zero{width:100%;max-width:20px;min-width:4px;height:2px!important;background:var(--border);opacity:.25;border-radius:1px;box-shadow:none}
-.chart-bar-label{font-size:8px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40px;text-align:center;transition:color .15s;letter-spacing:0}
+.chart-bar-label{font-size:8px;line-height:1;min-height:10px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40px;text-align:center;transition:color .15s;letter-spacing:0}
 .chart-legend{display:flex;gap:14px;margin-top:12px;flex-wrap:wrap;font-size:11px;color:var(--text-sec);font-weight:500}
 .chart-legend span{display:inline-flex;align-items:center;gap:5px}
 .chart-legend .dot{width:8px;height:8px;border-radius:2px}
@@ -1025,7 +1043,7 @@ input,textarea,select{font-family:inherit;font-size:inherit}
         <button class="tab" data-view="analytics" onclick="switchView('analytics')" data-i18n="tab.analytics">\u{1F4CA} Analytics</button>
         <button class="tab" data-view="logs" onclick="switchView('logs')" data-i18n="tab.logs">\u{1F4DD} Logs</button>
         <button class="tab" data-view="import" onclick="switchView('import')" data-i18n="tab.import">\u{1F4E5} Import</button>
-        <button class="tab" data-view="admin" onclick="switchView('admin')" style="display:none" data-i18n="tab.admin">\u{1F6E1} Admin</button>
+        <button class="tab" data-view="admin" onclick="switchView('admin')" data-i18n="tab.admin">\u{1F6E1} Admin</button>
         <button class="tab" data-view="settings" onclick="switchView('settings')" data-i18n="tab.settings">\u2699 Settings</button>
       </nav>
     </div>
@@ -1265,24 +1283,25 @@ input,textarea,select{font-family:inherit;font-size:inherit}
     <!-- ─── Settings View ─── -->
     <div class="settings-view" id="settingsView">
       <div class="settings-tabs-bar">
-        <button class="settings-tab-btn active" data-tab="embedding" onclick="switchSettingsTab('embedding',this)"><span class="stab-dot"></span><span data-i18n="settings.embedding">Embedding Model</span></button>
-        <button class="settings-tab-btn" data-tab="summarizer" onclick="switchSettingsTab('summarizer',this)"><span class="stab-dot"></span><span data-i18n="settings.summarizer">Summarizer Model</span></button>
-        <button class="settings-tab-btn" data-tab="skill" onclick="switchSettingsTab('skill',this)"><span class="stab-dot"></span><span data-i18n="settings.skill">Skill Evolution</span></button>
+        <button class="settings-tab-btn active" data-tab="models" onclick="switchSettingsTab('models',this)"><span class="stab-dot"></span><span data-i18n="settings.models">AI Models</span></button>
         <button class="settings-tab-btn" data-tab="hub" onclick="switchSettingsTab('hub',this)"><span class="stab-dot"></span><span data-i18n="settings.hub">Hub & Team</span></button>
         <button class="settings-tab-btn" data-tab="general" onclick="switchSettingsTab('general',this)"><span class="stab-dot"></span><span data-i18n="settings.general">General</span></button>
       </div>
       <div class="settings-cards-grid">
 
-        <!-- ══ Card: Embedding Model ══ -->
-        <div class="settings-card card-embedding stab-active" data-stab="embedding">
+        <!-- ══ Card: AI Models (Embedding + Summarizer + Skill) ══ -->
+        <div class="settings-card card-models stab-active" data-stab="models">
           <div class="settings-card-header">
-            <div class="settings-card-icon" style="background:rgba(99,102,241,.1);border-color:rgba(99,102,241,.15)">\u{1F4E1}</div>
+            <div class="settings-card-icon" style="background:rgba(99,102,241,.1);border-color:rgba(99,102,241,.15)">\u{1F9E0}</div>
             <div class="settings-card-title-wrap">
-              <div class="settings-card-title" data-i18n="settings.embedding">Embedding Model</div>
-              <div class="settings-card-desc" data-i18n="settings.embedding.desc">Vector embedding model for memory search and retrieval</div>
+              <div class="settings-card-title" data-i18n="settings.models">AI Models</div>
+              <div class="settings-card-desc" data-i18n="settings.models.desc">Configure embedding, summarizer and skill evolution models</div>
             </div>
           </div>
           <div class="settings-card-body">
+            <!-- Embedding Model section -->
+            <div class="settings-card-subtitle">\u{1F4E1} <span data-i18n="settings.embedding">Embedding Model</span></div>
+            <div class="field-hint" style="margin-bottom:10px" data-i18n="settings.embedding.desc">Vector embedding model for memory search and retrieval</div>
             <div class="settings-grid">
               <div class="settings-field">
                 <label data-i18n="settings.provider">Provider</label>
@@ -1318,19 +1337,12 @@ input,textarea,select{font-family:inherit;font-size:inherit}
               <button class="btn btn-sm btn-ghost" onclick="testModel('embedding')" id="testEmbBtn" data-i18n="settings.test">Test Connection</button>
               <span class="test-result" id="testEmbResult"></span>
             </div>
-          </div>
-        </div>
 
-        <!-- ══ Card: Summarizer Model ══ -->
-        <div class="settings-card card-summarizer" data-stab="summarizer">
-          <div class="settings-card-header">
-            <div class="settings-card-icon" style="background:rgba(139,92,246,.1);border-color:rgba(139,92,246,.15)">\u{1F9E0}</div>
-            <div class="settings-card-title-wrap">
-              <div class="settings-card-title" data-i18n="settings.summarizer">Summarizer Model</div>
-              <div class="settings-card-desc" data-i18n="settings.summarizer.desc">LLM for memory summarization, deduplication and analysis</div>
-            </div>
-          </div>
-          <div class="settings-card-body">
+            <div class="settings-card-divider"></div>
+
+            <!-- Summarizer Model section -->
+            <div class="settings-card-subtitle">\u{1F4DD} <span data-i18n="settings.summarizer">Summarizer Model</span></div>
+            <div class="field-hint" style="margin-bottom:10px" data-i18n="settings.summarizer.desc">LLM for memory summarization, deduplication and analysis</div>
             <div class="settings-grid">
               <div class="settings-field">
                 <label data-i18n="settings.provider">Provider</label>
@@ -1370,19 +1382,12 @@ input,textarea,select{font-family:inherit;font-size:inherit}
               <button class="btn btn-sm btn-ghost" onclick="testModel('summarizer')" id="testSumBtn" data-i18n="settings.test">Test Connection</button>
               <span class="test-result" id="testSumResult"></span>
             </div>
-          </div>
-        </div>
 
-        <!-- ══ Card: Skill Evolution ══ -->
-        <div class="settings-card card-skill" data-stab="skill">
-          <div class="settings-card-header">
-            <div class="settings-card-icon" style="background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.15)">\u{1F527}</div>
-            <div class="settings-card-title-wrap">
-              <div class="settings-card-title" data-i18n="settings.skill">Skill Evolution</div>
-              <div class="settings-card-desc" data-i18n="settings.skill.desc">Auto-extract reusable skills from conversation patterns</div>
-            </div>
-          </div>
-          <div class="settings-card-body">
+            <div class="settings-card-divider"></div>
+
+            <!-- Skill Evolution section -->
+            <div class="settings-card-subtitle">\u{1F527} <span data-i18n="settings.skill">Skill Evolution</span></div>
+            <div class="field-hint" style="margin-bottom:10px" data-i18n="settings.skill.desc">Auto-extract reusable skills from conversation patterns</div>
             <div class="settings-grid">
               <div class="settings-toggle">
                 <label class="toggle-switch"><input type="checkbox" id="cfgSkillEnabled"><span class="toggle-slider"></span></label>
@@ -1401,45 +1406,54 @@ input,textarea,select{font-family:inherit;font-size:inherit}
                 <input type="number" id="cfgSkillMinChunks" placeholder="6">
               </div>
             </div>
-            <div class="settings-card-divider"></div>
-            <div class="settings-card-subtitle" data-i18n="settings.skill.model">Skill Dedicated Model</div>
-            <div class="field-hint" style="margin-bottom:12px" data-i18n="settings.skill.model.hint">If not configured, the main Summarizer Model above will be used for skill generation. Configure a dedicated model here for higher quality skill output.</div>
-            <div class="settings-grid">
-              <div class="settings-field">
-                <label data-i18n="settings.provider">Provider</label>
-                <select id="cfgSkillProvider" onchange="onProviderChange('skill')">
-                  <option value="">\u2014 <span data-i18n="settings.skill.usemain">Use main summarizer</span> \u2014</option>
-                  <option value="openai_compatible">OpenAI Compatible</option>
-                  <option value="openai">OpenAI</option>
-                  <option value="siliconflow">SiliconFlow (\u7845\u57FA\u6D41\u52A8)</option>
-                  <option value="zhipu">Zhipu AI (\u667A\u8C31)</option>
-                  <option value="deepseek">DeepSeek</option>
-                  <option value="bailian">Alibaba Bailian (\u767E\u70BC)</option>
-                  <option value="moonshot">Moonshot (Kimi)</option>
-                  <option value="anthropic">Anthropic</option>
-                  <option value="gemini">Gemini</option>
-                  <option value="azure_openai">Azure OpenAI</option>
-                  <option value="bedrock">Bedrock</option>
-                  <option value="openclaw">OpenClaw Host</option>
-                </select>
-              </div>
-              <div class="settings-field">
-                <label data-i18n="settings.model">Model</label>
-                <input type="text" id="cfgSkillModel" placeholder="e.g. claude-4.6-opus">
-              </div>
-              <div class="settings-field full-width">
-                <label>Endpoint</label>
-                <input type="text" id="cfgSkillEndpoint" placeholder="https://...">
+            <div style="margin-top:14px">
+              <div class="settings-card-subtitle" style="margin-bottom:4px" data-i18n="settings.skill.model">Skill Dedicated Model</div>
+              <div class="field-hint" style="margin-bottom:12px" data-i18n="settings.skill.model.hint">If not configured, the main Summarizer Model above will be used for skill generation. Configure a dedicated model here for higher quality skill output.</div>
+              <div class="settings-grid">
+                <div class="settings-field">
+                  <label data-i18n="settings.provider">Provider</label>
+                  <select id="cfgSkillProvider" onchange="onProviderChange('skill')">
+                    <option value="">\u2014 <span data-i18n="settings.skill.usemain">Use main summarizer</span> \u2014</option>
+                    <option value="openai_compatible">OpenAI Compatible</option>
+                    <option value="openai">OpenAI</option>
+                    <option value="siliconflow">SiliconFlow (\u7845\u57FA\u6D41\u52A8)</option>
+                    <option value="zhipu">Zhipu AI (\u667A\u8C31)</option>
+                    <option value="deepseek">DeepSeek</option>
+                    <option value="bailian">Alibaba Bailian (\u767E\u70BC)</option>
+                    <option value="moonshot">Moonshot (Kimi)</option>
+                    <option value="anthropic">Anthropic</option>
+                    <option value="gemini">Gemini</option>
+                    <option value="azure_openai">Azure OpenAI</option>
+                    <option value="bedrock">Bedrock</option>
+                    <option value="openclaw">OpenClaw Host</option>
+                  </select>
+                </div>
+                <div class="settings-field">
+                  <label data-i18n="settings.model">Model</label>
+                  <input type="text" id="cfgSkillModel" placeholder="e.g. claude-4.6-opus">
+                </div>
+                <div class="settings-field full-width">
+                  <label>Endpoint</label>
+                  <input type="text" id="cfgSkillEndpoint" placeholder="https://...">
+                </div>
+                <div class="settings-field">
+                  <label>API Key</label>
+                  <input type="password" id="cfgSkillApiKey" placeholder="\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022">
+                </div>
               </div>
-              <div class="settings-field">
-                <label>API Key</label>
-                <input type="password" id="cfgSkillApiKey" placeholder="\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022">
+              <div class="test-conn-row">
+                <button class="btn btn-sm btn-ghost" onclick="testModel('skill')" id="testSkillBtn" data-i18n="settings.test">Test Connection</button>
+                <span class="test-result" id="testSkillResult"></span>
               </div>
             </div>
-            <div class="test-conn-row">
-              <button class="btn btn-sm btn-ghost" onclick="testModel('skill')" id="testSkillBtn" data-i18n="settings.test">Test Connection</button>
-              <span class="test-result" id="testSkillResult"></span>
+
+            <div class="settings-card-divider"></div>
+            <div class="settings-actions">
+              <span class="settings-saved" id="modelsSaved">\u2713 <span data-i18n="settings.saved">Saved</span></span>
+              <button class="btn btn-ghost" onclick="loadConfig()" data-i18n="settings.reset">Reset</button>
+              <button class="btn btn-primary" onclick="saveModelsConfig()" data-i18n="settings.save">Save Settings</button>
             </div>
+            <div style="font-size:11px;color:var(--text-muted);text-align:right;margin-top:4px" data-i18n="settings.restart.hint">Some changes require restarting the OpenClaw gateway to take effect.</div>
           </div>
         </div>
 
@@ -1453,6 +1467,43 @@ input,textarea,select{font-family:inherit;font-size:inherit}
             </div>
           </div>
           <div class="settings-card-body">
+            <!-- team setup guide (inside Hub card) -->
+            <div class="team-guide" id="teamSetupGuide">
+              <button class="team-guide-dismiss" onclick="dismissTeamGuide()" title="Dismiss">&times;</button>
+              <div class="team-guide-title">\u{1F680} <span data-i18n="guide.title">Get Started with Team Collaboration</span></div>
+              <div class="team-guide-subtitle" data-i18n="guide.subtitle">MemOS supports team memory sharing. Choose one of the following options to enable collaboration, or continue using local-only mode.</div>
+              <div class="team-guide-options">
+                <div class="team-guide-opt">
+                  <div class="team-guide-opt-header">
+                    <div class="team-guide-opt-icon" style="background:rgba(6,182,212,.1);border:1px solid rgba(6,182,212,.15)">\u{1F310}</div>
+                    <div class="team-guide-opt-title" data-i18n="guide.join.title">Join a Remote Team</div>
+                  </div>
+                  <div class="team-guide-opt-desc" data-i18n="guide.join.desc">Your team already has a Hub running? Join it to share memories, tasks and skills with team members.</div>
+                  <ol class="team-guide-steps">
+                    <li><span data-i18n="guide.join.s1">Ask your Hub admin for the Hub Address and Team Token</span></li>
+                    <li><span data-i18n="guide.join.s2">Enable sharing above, select "Client" mode</span></li>
+                    <li><span data-i18n="guide.join.s3">Fill in Hub Address and Team Token, click "Test Connection"</span></li>
+                    <li><span data-i18n="guide.join.s4">Save settings and restart the OpenClaw gateway</span></li>
+                  </ol>
+                  <button class="btn-guide" onclick="guideGoToHub('client')" data-i18n="guide.join.btn">\u2192 Configure Client Mode</button>
+                </div>
+                <div class="team-guide-opt">
+                  <div class="team-guide-opt-header">
+                    <div class="team-guide-opt-icon" style="background:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.15)">\u{1F5A5}\uFE0F</div>
+                    <div class="team-guide-opt-title" data-i18n="guide.hub.title">Start Your Own Hub</div>
+                  </div>
+                  <div class="team-guide-opt-desc" data-i18n="guide.hub.desc">Be the team server. Run a Hub on this device so others can connect and share memories with you.</div>
+                  <ol class="team-guide-steps">
+                    <li><span data-i18n="guide.hub.s1">Enable sharing above, select "Hub" mode</span></li>
+                    <li><span data-i18n="guide.hub.s2">Set a team name, save settings, and restart the gateway</span></li>
+                    <li><span data-i18n="guide.hub.s3">Share the Hub Address and Team Token with your team members</span></li>
+                    <li><span data-i18n="guide.hub.s4">Approve join requests in the Admin Panel</span></li>
+                  </ol>
+                  <button class="btn-guide" onclick="guideGoToHub('hub')" data-i18n="guide.hub.btn">\u2192 Configure Hub Mode</button>
+                </div>
+              </div>
+            </div>
+
             <div class="field-hint" style="margin-bottom:12px" data-i18n="settings.hub.enable.hint">Enable to share memories, tasks and skills with your team. When disabled, all features work normally in local-only mode.</div>
             <div class="settings-toggle" style="margin-bottom:16px">
               <label class="toggle-switch">
@@ -1526,6 +1577,14 @@ input,textarea,select{font-family:inherit;font-size:inherit}
             <div id="sharingStatusPanel"></div>
             <div id="sharingTeamPanel"></div>
             <div id="sharingAdminPanel"></div>
+
+            <div class="settings-card-divider"></div>
+            <div class="settings-actions">
+              <span class="settings-saved" id="hubSaved">\u2713 <span data-i18n="settings.saved">Saved</span></span>
+              <button class="btn btn-ghost" onclick="loadConfig()" data-i18n="settings.reset">Reset</button>
+              <button class="btn btn-primary" onclick="saveHubConfig()" data-i18n="settings.save">Save Settings</button>
+            </div>
+            <div style="font-size:11px;color:var(--text-muted);text-align:right;margin-top:4px" data-i18n="settings.restart.hint">Some changes require restarting the OpenClaw gateway to take effect.</div>
           </div>
         </div>
 
@@ -1557,39 +1616,44 @@ input,textarea,select{font-family:inherit;font-size:inherit}
               <label data-i18n="settings.telemetry.enabled">Enable Anonymous Telemetry</label>
             </div>
             <div class="field-hint" style="margin-top:6px" data-i18n="settings.telemetry.hint">Anonymous usage analytics to help improve the plugin. Only sends tool names, latencies, and version info. No memory content, queries, or personal data is ever sent.</div>
+
+            <div class="settings-card-divider"></div>
+            <div class="settings-actions">
+              <span class="settings-saved" id="generalSaved">\u2713 <span data-i18n="settings.saved">Saved</span></span>
+              <button class="btn btn-ghost" onclick="loadConfig()" data-i18n="settings.reset">Reset</button>
+              <button class="btn btn-primary" onclick="saveGeneralConfig()" data-i18n="settings.save">Save Settings</button>
+            </div>
           </div>
         </div>
 
       </div>
 
-      <div class="settings-actions">
-        <span class="settings-saved" id="settingsSaved">\u2713 <span data-i18n="settings.saved">Saved</span></span>
-        <button class="btn btn-ghost" onclick="loadConfig()" data-i18n="settings.reset">Reset</button>
-        <button class="btn btn-primary" onclick="saveConfig()" data-i18n="settings.save">Save Settings</button>
-      </div>
-      <div style="font-size:11px;color:var(--text-muted);text-align:right;margin-top:4px" data-i18n="settings.restart.hint">Some changes require restarting the OpenClaw gateway to take effect.</div>
+
     </div>
 
     <!-- ─── Admin Page ─── -->
     <div class="admin-view" id="adminView">
-      <div class="admin-header">
-        <div class="admin-header-top">
-          <h2><span class="ah-icon">\u{1F6E1}</span> <span data-i18n="admin.title">Hub Admin Panel</span></h2>
-          <button class="btn btn-sm btn-ghost" onclick="loadAdminData()" style="backdrop-filter:blur(8px)" data-i18n="admin.refresh">\u21BB Refresh</button>
+      <div id="adminNotEnabled" style="display:none"></div>
+      <div id="adminMainContent">
+        <div class="admin-header">
+          <div class="admin-header-top">
+            <h2><span class="ah-icon">\u{1F6E1}</span> <span data-i18n="admin.title">Hub Admin Panel</span></h2>
+            <button class="btn btn-sm btn-ghost" onclick="loadAdminData()" style="backdrop-filter:blur(8px)" data-i18n="admin.refresh">\u21BB Refresh</button>
+          </div>
+          <div class="admin-header-sub" data-i18n="admin.subtitle">Manage team members, groups, and shared resources</div>
+          <div class="admin-stat-row" id="adminStats"></div>
         </div>
-        <div class="admin-header-sub" data-i18n="admin.subtitle">Manage team members, groups, and shared resources</div>
-        <div class="admin-stat-row" id="adminStats"></div>
-      </div>
-      <div class="admin-tabs" id="adminTabsBar">
-        <button class="admin-tab active" onclick="switchAdminTab('users',this)"><span class="at-icon">\u{1F465}</span> <span data-i18n="admin.tab.users">Users</span> <span class="at-count" id="adminTabCountUsers">0</span></button>
-        <button class="admin-tab" onclick="switchAdminTab('sharedMemories',this)"><span class="at-icon">\u{1F4AD}</span> <span data-i18n="admin.tab.sharedMemories">Shared Memories</span> <span class="at-count" id="adminTabCountMemories">0</span></button>
-        <button class="admin-tab" onclick="switchAdminTab('memories',this)"><span class="at-icon">\u{1F4CB}</span> <span data-i18n="admin.tab.memories">Shared Tasks</span> <span class="at-count" id="adminTabCountTasks">0</span></button>
-        <button class="admin-tab" onclick="switchAdminTab('skills',this)"><span class="at-icon">\u{1F9E0}</span> <span data-i18n="admin.tab.skills">Shared Skills</span> <span class="at-count" id="adminTabCountSkills">0</span></button>
+        <div class="admin-tabs" id="adminTabsBar">
+          <button class="admin-tab active" onclick="switchAdminTab('users',this)"><span class="at-icon">\u{1F465}</span> <span data-i18n="admin.tab.users">Users</span> <span class="at-count" id="adminTabCountUsers">0</span></button>
+          <button class="admin-tab" onclick="switchAdminTab('sharedMemories',this)"><span class="at-icon">\u{1F4AD}</span> <span data-i18n="admin.tab.sharedMemories">Shared Memories</span> <span class="at-count" id="adminTabCountMemories">0</span></button>
+          <button class="admin-tab" onclick="switchAdminTab('memories',this)"><span class="at-icon">\u{1F4CB}</span> <span data-i18n="admin.tab.memories">Shared Tasks</span> <span class="at-count" id="adminTabCountTasks">0</span></button>
+          <button class="admin-tab" onclick="switchAdminTab('skills',this)"><span class="at-icon">\u{1F9E0}</span> <span data-i18n="admin.tab.skills">Shared Skills</span> <span class="at-count" id="adminTabCountSkills">0</span></button>
+        </div>
+        <div class="admin-panel active" id="adminUsersPanel"></div>
+        <div class="admin-panel" id="adminSharedMemoriesPanel"></div>
+        <div class="admin-panel" id="adminMemoriesPanel"></div>
+        <div class="admin-panel" id="adminSkillsPanel"></div>
       </div>
-      <div class="admin-panel active" id="adminUsersPanel"></div>
-      <div class="admin-panel" id="adminSharedMemoriesPanel"></div>
-      <div class="admin-panel" id="adminMemoriesPanel"></div>
-      <div class="admin-panel" id="adminSkillsPanel"></div>
     </div>
 
     <!-- ─── Import Page ─── -->
@@ -1958,6 +2022,8 @@ const I18N={
     'tab.import':'\u{1F4E5} Import',
     'tab.settings':'\u2699 Settings',
     'settings.modelconfig':'Model Configuration',
+    'settings.models':'AI Models',
+    'settings.models.desc':'Configure embedding, summarizer and skill evolution models',
     'settings.modelhealth':'Model Health',
     'settings.embedding':'Embedding Model',
     'settings.summarizer':'Summarizer Model',
@@ -2344,7 +2410,36 @@ const I18N={
     'update.success':'Updated!',
     'update.failed':'Update failed',
     'update.restarting':'Restarting service...',
-    'update.dismiss':'Dismiss'
+    'update.dismiss':'Dismiss',
+    'sharing.disable.confirm.hub':'You are about to shut down the Hub server.\\n\\nWhat will happen:\\n\\u2022 All connected team members will be disconnected\\n\\u2022 They will no longer be able to sync memories, tasks, or skills\\n\\u2022 Shared data is preserved and will be available when you re-enable\\n\\nAre you sure?',
+    'sharing.disable.confirm.client':'You are about to disconnect from the team Hub.\\n\\nWhat will happen:\\n\\u2022 You will no longer receive shared memories, tasks, or skills from the team\\n\\u2022 Your local data is preserved and will not be affected\\n\\u2022 You can reconnect later by re-enabling sharing\\n\\nAre you sure?',
+    'sharing.disable.restartAlert':'Sharing has been disabled. Please restart the OpenClaw gateway for the change to take effect.\\n\\nRun: openclaw gateway stop && openclaw gateway start',
+    'admin.notEnabled.title':'Team sharing is not enabled',
+    'admin.notEnabled.desc':'The Admin Panel is used to manage team members, shared memories, tasks, and skills. To use this feature, you need to enable Hub sharing first.',
+    'admin.notEnabled.setupHub':'Set Up as Hub Server',
+    'admin.notEnabled.joinTeam':'Join an Existing Team',
+    'admin.notEnabled.hint':'If you have previously configured sharing, your data is still preserved. Re-enabling sharing will restore access to all shared content.',
+    'sharing.disconnected.hint':'Unable to reach the Hub server. The Hub may be offline or the network is unavailable.',
+    'sharing.retryConnection':'Retry Connection',
+    'sharing.retryConnection.loading':'Connecting...',
+    'sharing.retryConnection.success':'Connected successfully!',
+    'sharing.retryConnection.fail':'Still unable to connect. Check if the Hub is online.',
+    'guide.title':'Get Started with Team Collaboration',
+    'guide.subtitle':'MemOS supports team memory sharing. Choose one of the following options to enable collaboration, or continue using local-only mode.',
+    'guide.join.title':'Join a Remote Team',
+    'guide.join.desc':'Your team already has a Hub running? Join it to share memories, tasks and skills with team members.',
+    'guide.join.s1':'Ask your Hub admin for the Hub Address and Team Token',
+    'guide.join.s2':'Go to Settings \u2192 Hub & Team, enable sharing, select "Client" mode',
+    'guide.join.s3':'Fill in Hub Address and Team Token, click "Test Connection"',
+    'guide.join.s4':'Save settings and restart the OpenClaw gateway',
+    'guide.join.btn':'\u2192 Configure Client Mode',
+    'guide.hub.title':'Start Your Own Hub',
+    'guide.hub.desc':'Be the team server. Run a Hub on this device so others can connect and share memories with you.',
+    'guide.hub.s1':'Go to Settings \u2192 Hub & Team, enable sharing, select "Hub" mode',
+    'guide.hub.s2':'Set a team name, save settings, and restart the gateway',
+    'guide.hub.s3':'Share the Hub Address and Team Token with your team members',
+    'guide.hub.s4':'Approve join requests in the Admin Panel',
+    'guide.hub.btn':'\u2192 Configure Hub Mode'
   },
   zh:{
     'title':'MemOS 记忆',
@@ -2514,6 +2609,8 @@ const I18N={
     'tab.import':'\u{1F4E5} 导入',
     'tab.settings':'\u2699 设置',
     'settings.modelconfig':'模型配置',
+    'settings.models':'AI 模型',
+    'settings.models.desc':'配置嵌入模型、摘要模型和技能进化模型',
     'settings.modelhealth':'模型健康',
     'settings.embedding':'嵌入模型',
     'settings.summarizer':'摘要模型',
@@ -2900,7 +2997,36 @@ const I18N={
     'update.success':'更新完成',
     'update.failed':'更新失败',
     'update.restarting':'正在重启服务...',
-    'update.dismiss':'关闭'
+    'update.dismiss':'关闭',
+    'sharing.disable.confirm.hub':'你即将关闭 Hub 服务。\\n\\n关闭后将会：\\n\\u2022 所有已连接的团队成员将断开连接\\n\\u2022 他们将无法继续同步记忆、任务和技能\\n\\u2022 已共享的数据会保留，重新开启后仍可使用\\n\\n确定要关闭吗？',
+    'sharing.disable.confirm.client':'你即将断开与团队 Hub 的连接。\\n\\n断开后将会：\\n\\u2022 你将无法再接收团队共享的记忆、任务和技能\\n\\u2022 你的本地数据不受影响，会完整保留\\n\\u2022 之后可以随时重新开启共享来恢复连接\\n\\n确定要断开吗？',
+    'sharing.disable.restartAlert':'共享已关闭。请重启 OpenClaw gateway 使更改生效。\\n\\n执行命令：openclaw gateway stop && openclaw gateway start',
+    'admin.notEnabled.title':'团队共享尚未开启',
+    'admin.notEnabled.desc':'管理面板用于管理团队成员、共享的记忆、任务和技能。使用此功能前，需要先开启 Hub 共享。',
+    'admin.notEnabled.setupHub':'配置为 Hub 服务端',
+    'admin.notEnabled.joinTeam':'加入已有团队',
+    'admin.notEnabled.hint':'如果之前配置过共享，你的数据仍然保留。重新开启共享即可恢复访问所有共享内容。',
+    'sharing.disconnected.hint':'无法连接到 Hub 服务器，Hub 可能已下线或网络不可用。',
+    'sharing.retryConnection':'重试连接',
+    'sharing.retryConnection.loading':'连接中...',
+    'sharing.retryConnection.success':'连接成功！',
+    'sharing.retryConnection.fail':'仍然无法连接，请检查 Hub 是否在线。',
+    'guide.title':'开始团队协作',
+    'guide.subtitle':'MemOS 支持团队记忆共享。选择以下方式之一开启协作，或继续使用纯本地模式。',
+    'guide.join.title':'加入远程团队',
+    'guide.join.desc':'你的团队已有 Hub 在运行？加入即可与团队成员共享记忆、任务和技能。',
+    'guide.join.s1':'向 Hub 管理员索取 Hub 地址和 Team Token',
+    'guide.join.s2':'前往「设置 → Hub & Team」，开启共享，选择「Client」模式',
+    'guide.join.s3':'填写 Hub 地址和 Team Token，点击「测试连接」',
+    'guide.join.s4':'保存设置并重启 OpenClaw gateway',
+    'guide.join.btn':'\u2192 配置 Client 模式',
+    'guide.hub.title':'自建 Hub 服务',
+    'guide.hub.desc':'将本机作为团队服务端，让其他成员连接过来共享记忆。',
+    'guide.hub.s1':'前往「设置 → Hub & Team」，开启共享，选择「Hub」模式',
+    'guide.hub.s2':'设置团队名称，保存设置后重启 gateway',
+    'guide.hub.s3':'将 Hub 地址和 Team Token 分享给团队成员',
+    'guide.hub.s4':'在管理面板中审批加入请求',
+    'guide.hub.btn':'\u2192 配置 Hub 模式'
   }
 };
 const LANG_KEY='memos-viewer-lang';
@@ -3025,8 +3151,6 @@ function selectSharingRole(role){
     if(sp) sp.style.display='none';
     if(tp) tp.style.display='none';
     if(ap) ap.style.display='none';
-    var adminTab=document.querySelector('.tab[data-view="admin"]');
-    if(adminTab) adminTab.style.display='none';
   }else{
     if(sp) sp.style.display='';
     if(tp) tp.style.display='';
@@ -3183,10 +3307,12 @@ async function loadSharingStatus(forcePending){
     sharingStatusCache=d;
     renderSharingSidebar(d);
     renderSharingSettings(d);
+    updateTeamGuide(d);
     if(forcePending && d && d.admin && d.admin.canManageUsers) loadSharingPendingUsers();
   }catch(e){
     renderSharingSidebar(null);
     renderSharingSettings(null);
+    updateTeamGuide(null);
   }
 }
 
@@ -3211,8 +3337,6 @@ function renderSharingSidebar(data){
     setBadge('#34d399',t('sharing.sidebar.connected'),true);
     statusEl.innerHTML='';
     hintEl.textContent='';
-    var adminTab=document.querySelector('.tab[data-view="admin"]');
-    if(adminTab) adminTab.style.display='';
   }else if(conn.pendingApproval&&conn.user){
     setBadge('#fbbf24',t('sharing.sidebar.pending'),false);
     var html='<div class="info-grid">';
@@ -3221,8 +3345,6 @@ function renderSharingSidebar(data){
     html+='</div>';
     statusEl.innerHTML=html;
     hintEl.textContent=t('sharing.pendingApproval.hint');
-    var adminTab=document.querySelector('.tab[data-view="admin"]');
-    if(adminTab) adminTab.style.display='none';
   }else if(conn.rejected&&conn.user){
     setBadge('#ef4444',t('sharing.sidebar.rejected'),false);
     var html='<div class="info-grid">';
@@ -3231,8 +3353,6 @@ function renderSharingSidebar(data){
     html+='</div>';
     statusEl.innerHTML=html;
     hintEl.textContent=t('sharing.rejected.hint');
-    var adminTab=document.querySelector('.tab[data-view="admin"]');
-    if(adminTab) adminTab.style.display='none';
   }else if(conn.connected&&conn.user){
     var isAdmin=conn.user.role==='admin';
     setBadge('#34d399',t('sharing.sidebar.connected'),true);
@@ -3242,12 +3362,10 @@ function renderSharingSidebar(data){
     html+='</div>';
     statusEl.innerHTML=html;
     hintEl.innerHTML='';
-    var adminTab=document.querySelector('.tab[data-view="admin"]');
-    if(adminTab) adminTab.style.display=isAdmin?'':'none';
   }else if(data.clientConfigured){
     setBadge('#ef4444',t('sharing.sidebar.disconnected'),false);
     statusEl.innerHTML='<div style="font-size:11px;color:var(--text-muted)">'+t('sharing.sidebar.targetHub')+' '+esc(data.hubUrl||'')+'</div>';
-    hintEl.textContent=t('sharing.clientDisconnected.hint');
+    hintEl.innerHTML=esc(t('sharing.clientDisconnected.hint'))+'<br><a href="#" onclick="retryConnection();return false;" style="color:var(--pri);font-size:11px;text-decoration:none">'+t('sharing.retryConnection')+'</a>';
   }else{
     setBadge('#888',t('sharing.sidebar.notConfigured'),false);
     statusEl.innerHTML='';
@@ -3270,8 +3388,6 @@ function renderSharingSettings(data){
   if(data.role) _sharingRole=data.role;
   var isAdmin=(data.admin&&data.admin.canManageUsers)||(conn.connected&&user.role==='admin')||(actualRole==='hub');
   window._isHubAdmin=isAdmin;
-  var adminTab=document.querySelector('.tab[data-view="admin"]');
-  if(adminTab) adminTab.style.display=isAdmin?'':'none';
   var hubAdminBtn=document.getElementById('hubAdminEntryBtn');
 
   if(actualRole==='hub'){
@@ -3282,7 +3398,6 @@ function renderSharingSettings(data){
 
   if(actualRole==='client'){
     statusEl.style.display='none';teamEl.style.display='none';adminEl.style.display='none';
-    if(adminTab) adminTab.style.display='none';
     if(hubAdminBtn) hubAdminBtn.style.display='none';
 
     var connBadge;
@@ -3313,7 +3428,9 @@ function renderSharingSettings(data){
       sh+='<span class="hic-label">'+t('sharing.team')+'</span><span class="hic-value">'+esc(conn.teamName||'-')+'</span>';
       sh+='</div></div>';
     }else{
-      sh+='</div></div>';
+      sh+='</div><div class="hic-empty" style="color:var(--text-muted)">'+t('sharing.disconnected.hint')+'</div>'+
+        '<div style="margin-top:10px;padding:0 16px 14px"><button class="btn btn-sm btn-primary" id="btnRetryConn" onclick="retryConnection()">'+t('sharing.retryConnection')+'</button>'+
+        '<span id="retryConnResult" style="margin-left:10px;font-size:11px"></span></div></div>';
     }
     statusEl.innerHTML=sh;
     teamEl.innerHTML='';adminEl.innerHTML='';
@@ -3323,6 +3440,26 @@ function renderSharingSettings(data){
   statusEl.innerHTML='';teamEl.innerHTML='';adminEl.innerHTML='';
 }
 
+async function retryConnection(){
+  var btn=document.getElementById('btnRetryConn');
+  var result=document.getElementById('retryConnResult');
+  if(btn){btn.disabled=true;btn.textContent=t('sharing.retryConnection.loading');}
+  if(result) result.innerHTML='<span style="color:var(--text-muted)">'+t('sharing.retryConnection.loading')+'</span>';
+  try{
+    await loadSharingStatus(false);
+    var d=sharingStatusCache;
+    if(d&&d.connection&&d.connection.connected){
+      toast(t('sharing.retryConnection.success'),'success');
+      if(result) result.innerHTML='<span style="color:#22c55e">\\u2705 '+t('sharing.retryConnection.success')+'</span>';
+    }else{
+      if(result) result.innerHTML='<span style="color:#ef4444">'+t('sharing.retryConnection.fail')+'</span>';
+    }
+  }catch(e){
+    if(result) result.innerHTML='<span style="color:#ef4444">'+t('sharing.retryConnection.fail')+'</span>';
+  }
+  if(btn){btn.disabled=false;btn.textContent=t('sharing.retryConnection');}
+}
+
 async function retryHubJoin(){
   if(!confirm(t('sharing.retryJoin.confirm'))) return;
   try{
@@ -3421,6 +3558,29 @@ async function rejectSharingUser(userId,username){
   }catch(e){toast(t('toast.rejectFail')+': '+e.message,'error');}
 }
 
+/* ─── Team Setup Guide ─── */
+var TEAM_GUIDE_DISMISSED_KEY='memos-team-guide-dismissed';
+function updateTeamGuide(sharingData){
+  var el=document.getElementById('teamSetupGuide');
+  if(!el) return;
+  if(localStorage.getItem(TEAM_GUIDE_DISMISSED_KEY)==='1'){el.style.display='none';return;}
+  var isConfigured=sharingData&&sharingData.enabled;
+  el.style.display=isConfigured?'none':'block';
+}
+function dismissTeamGuide(){
+  localStorage.setItem(TEAM_GUIDE_DISMISSED_KEY,'1');
+  var el=document.getElementById('teamSetupGuide');
+  if(el) el.style.display='none';
+}
+function guideGoToHub(role){
+  switchSettingsTab('hub',document.querySelector('.settings-tab-btn[data-tab="hub"]'));
+  var chk=document.getElementById('cfgSharingEnabled');
+  if(chk&&!chk.checked){chk.checked=true;onSharingToggle();}
+  selectSharingRole(role);
+  var card=document.getElementById('settingsSharingConfig');
+  if(card) card.scrollIntoView({behavior:'smooth',block:'start'});
+}
+
 /* ─── Group Manager ─── */
 var groupManagerUsers=[];
 async function loadGroupManager(){
@@ -3575,7 +3735,35 @@ function switchAdminTab(tab,btn){
   if(panel) panel.classList.add('active');
 }
 
+function adminGoSetup(role){
+  switchView('settings');
+  setTimeout(function(){guideGoToHub(role);},200);
+}
+
 async function loadAdminData(){
+  var notEnabledEl=document.getElementById('adminNotEnabled');
+  var mainEl=document.getElementById('adminMainContent');
+  var sharingOn=sharingStatusCache&&sharingStatusCache.enabled;
+  if(!sharingOn){
+    if(mainEl) mainEl.style.display='none';
+    if(notEnabledEl){
+      notEnabledEl.style.display='block';
+      notEnabledEl.innerHTML=
+        '<div style="text-align:center;padding:60px 32px;max-width:520px;margin:0 auto">'+
+        '<div style="font-size:48px;margin-bottom:16px">\u{1F6E1}</div>'+
+        '<div style="font-size:18px;font-weight:700;color:var(--text);margin-bottom:8px">'+t('admin.notEnabled.title')+'</div>'+
+        '<div style="font-size:13px;color:var(--text-sec);line-height:1.7;margin-bottom:24px">'+t('admin.notEnabled.desc')+'</div>'+
+        '<div style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap">'+
+        '<button class="btn btn-primary" style="padding:8px 20px;font-size:13px" onclick="adminGoSetup(&quot;hub&quot;)">'+t('admin.notEnabled.setupHub')+'</button>'+
+        '<button class="btn btn-ghost" style="padding:8px 20px;font-size:13px" onclick="adminGoSetup(&quot;client&quot;)">'+t('admin.notEnabled.joinTeam')+'</button>'+
+        '</div>'+
+        '<div style="font-size:11px;color:var(--text-muted);margin-top:20px;line-height:1.6">'+t('admin.notEnabled.hint')+'</div>'+
+        '</div>';
+    }
+    return;
+  }
+  if(notEnabledEl) notEnabledEl.style.display='none';
+  if(mainEl) mainEl.style.display='';
   if(!window._isHubAdmin){
     var statsEl=document.getElementById('adminStats');
     if(statsEl) statsEl.innerHTML='<div class="admin-empty">'+t('admin.noPermission')+'</div>';
@@ -5271,9 +5459,36 @@ function onProviderChange(section){
   if(m[2]==='chat'&&def.chatModel&&!mdEl.value.trim()) mdEl.value=def.chatModel;
 }
 
-async function saveConfig(){
-  var saveBtn=document.querySelector('.settings-actions .btn-primary');
+function flashSaved(id){
+  var el=document.getElementById(id);
+  if(!el)return;
+  el.classList.add('show');
+  setTimeout(function(){el.classList.remove('show');},2500);
+}
+
+async function doSaveConfig(cfg, btnEl, savedId){
+  btnEl.disabled=true;btnEl.textContent=t('settings.test.loading');
+  function done(){btnEl.disabled=false;btnEl.textContent=t('settings.save');}
+  try{
+    const r=await fetch('/api/config',{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify(cfg)});
+    if(r.status===401){done();toast(t('settings.session.expired'),'error');return false;}
+    if(!r.ok) throw new Error(await r.text());
+    flashSaved(savedId);
+    toast(t('settings.saved'),'success');
+    done();
+    return true;
+  }catch(e){
+    toast(t('settings.save.fail')+': '+e.message,'error');
+    done();
+    return false;
+  }
+}
+
+async function saveModelsConfig(){
+  var card=document.querySelector('.card-models');
+  var saveBtn=card.querySelector('.settings-actions .btn-primary');
   saveBtn.disabled=true;saveBtn.textContent=t('settings.test.loading');
+  function done(){saveBtn.disabled=false;saveBtn.textContent=t('settings.save');}
 
   const cfg={};
   const embP=document.getElementById('cfgEmbProvider').value;
@@ -5314,52 +5529,8 @@ async function saveConfig(){
     if(skApiKey) cfg.skillEvolution.summarizer.apiKey=skApiKey;
   }
 
-  const vp=document.getElementById('cfgViewerPort').value.trim();
-  if(vp) cfg.viewerPort=Number(vp);
-  cfg.telemetry={enabled:document.getElementById('cfgTelemetryEnabled').checked};
-
-  function done(){saveBtn.disabled=false;saveBtn.textContent=t('settings.save');}
-
-  var sharingEnabled=document.getElementById('cfgSharingEnabled').checked;
-  cfg.sharing={
-    enabled:sharingEnabled,
-    role:_sharingRole,
-    capabilities:{}
-  };
-  if(sharingEnabled&&_sharingRole==='hub'){
-    var hubPort=document.getElementById('cfgHubPort').value.trim();
-    var hubTeamName=document.getElementById('cfgHubTeamName').value.trim();
-    var hubTeamToken=document.getElementById('cfgHubTeamToken').value.trim();
-    cfg.sharing.hub={port:hubPort?Number(hubPort):18800};
-    if(hubTeamName) cfg.sharing.hub.teamName=hubTeamName;
-    if(hubTeamToken) cfg.sharing.hub.teamToken=hubTeamToken;
-    cfg.sharing.client={hubAddress:'',userToken:'',teamToken:''};
-  }
-  if(sharingEnabled&&_sharingRole==='client'){
-    var clientAddr=document.getElementById('cfgClientHubAddress').value.trim();
-    var clientTeamToken=document.getElementById('cfgClientTeamToken').value.trim();
-    var clientUserToken=document.getElementById('cfgClientUserToken').value.trim();
-    cfg.sharing.client={};
-    if(clientAddr) cfg.sharing.client.hubAddress=clientAddr;
-    if(clientTeamToken) cfg.sharing.client.teamToken=clientTeamToken;
-    if(clientUserToken) cfg.sharing.client.userToken=clientUserToken;
-    cfg.sharing.hub={port:18800,teamName:'',teamToken:''};
-    if(clientAddr){
-      try{
-        var ips=await fetch('/api/local-ips').then(function(r){return r.json();});
-        var localAddrs=['127.0.0.1','localhost','0.0.0.0'].concat(ips.ips||[]);
-        var parsed=new URL(clientAddr.indexOf('://')>-1?clientAddr:'http://'+clientAddr);
-        if(localAddrs.indexOf(parsed.hostname)>=0){
-          done();toast(t('sharing.cannotJoinSelf'),'error');return;
-        }
-      }catch(e){}
-    }
-  }
-
-  // 1) Embedding model is required
   if(!embP||embP===''){done();toast(t('settings.save.emb.required'),'error');return;}
 
-  // 2) Test embedding
   try{
     var er=await fetch('/api/test-model',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({type:'embedding',provider:cfg.embedding.provider,model:cfg.embedding.model||'',endpoint:cfg.embedding.endpoint||'',apiKey:cfg.embedding.apiKey||''})});
     if(er.status===401){done();toast(t('settings.session.expired'),'error');return;}
@@ -5368,7 +5539,6 @@ async function saveConfig(){
     document.getElementById('testEmbResult').className='test-result ok';document.getElementById('testEmbResult').innerHTML='\\u2705 '+t('settings.test.ok');
   }catch(e){done();toast(t('settings.save.emb.fail')+': '+e.message,'error');return;}
 
-  // 3) Test summarizer if user filled it
   if(hasSumConfig&&cfg.summarizer){
     try{
       var sr=await fetch('/api/test-model',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({type:'summarizer',provider:cfg.summarizer.provider,model:cfg.summarizer.model||'',endpoint:cfg.summarizer.endpoint||'',apiKey:cfg.summarizer.apiKey||''})});
@@ -5379,7 +5549,6 @@ async function saveConfig(){
     }catch(e){done();toast(t('settings.save.sum.fail')+': '+e.message,'error');return;}
   }
 
-  // 4) Test skill model if user filled it
   if(hasSkillConfig&&cfg.skillEvolution.summarizer){
     try{
       var kr=await fetch('/api/test-model',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({type:'summarizer',provider:cfg.skillEvolution.summarizer.provider,model:cfg.skillEvolution.summarizer.model||'',endpoint:cfg.skillEvolution.summarizer.endpoint||'',apiKey:cfg.skillEvolution.summarizer.apiKey||''})});
@@ -5390,7 +5559,6 @@ async function saveConfig(){
     }catch(e){done();toast(t('settings.save.skill.fail')+': '+e.message,'error');return;}
   }
 
-  // 5) If summarizer or skill model not configured, check OpenClaw fallback and confirm
   if(!hasSumConfig||!hasSkillConfig){
     try{
       var fr=await fetch('/api/fallback-model');
@@ -5404,22 +5572,86 @@ async function saveConfig(){
     }catch(e){}
   }
 
-  // 6) All tests passed, save
-  try{
-    const r=await fetch('/api/config',{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify(cfg)});
-    if(!r.ok) throw new Error(await r.text());
-    const el=document.getElementById('settingsSaved');
-    el.classList.add('show');
-    setTimeout(()=>el.classList.remove('show'),2500);
-    toast(t('settings.saved'),'success');
+  await doSaveConfig(cfg, saveBtn, 'modelsSaved');
+}
+
+async function saveHubConfig(){
+  var card=document.getElementById('settingsSharingConfig');
+  var saveBtn=card.querySelector('.settings-actions .btn-primary');
+  saveBtn.disabled=true;saveBtn.textContent=t('settings.test.loading');
+  function done(){saveBtn.disabled=false;saveBtn.textContent=t('settings.save');}
+
+  const cfg={};
+  var sharingEnabled=document.getElementById('cfgSharingEnabled').checked;
+  cfg.sharing={
+    enabled:sharingEnabled,
+    role:_sharingRole,
+    capabilities:{}
+  };
+  if(sharingEnabled&&_sharingRole==='hub'){
+    var hubPort=document.getElementById('cfgHubPort').value.trim();
+    var hubTeamName=document.getElementById('cfgHubTeamName').value.trim();
+    var hubTeamToken=document.getElementById('cfgHubTeamToken').value.trim();
+    cfg.sharing.hub={port:hubPort?Number(hubPort):18800};
+    if(hubTeamName) cfg.sharing.hub.teamName=hubTeamName;
+    if(hubTeamToken) cfg.sharing.hub.teamToken=hubTeamToken;
+    cfg.sharing.client={hubAddress:'',userToken:'',teamToken:''};
+  }
+  if(sharingEnabled&&_sharingRole==='client'){
+    var clientAddr=document.getElementById('cfgClientHubAddress').value.trim();
+    var clientTeamToken=document.getElementById('cfgClientTeamToken').value.trim();
+    var clientUserToken=document.getElementById('cfgClientUserToken').value.trim();
+    cfg.sharing.client={};
+    if(clientAddr) cfg.sharing.client.hubAddress=clientAddr;
+    if(clientTeamToken) cfg.sharing.client.teamToken=clientTeamToken;
+    if(clientUserToken) cfg.sharing.client.userToken=clientUserToken;
+    cfg.sharing.hub={port:18800,teamName:'',teamToken:''};
+    if(clientAddr){
+      try{
+        var ips=await fetch('/api/local-ips').then(function(r){return r.json();});
+        var localAddrs=['127.0.0.1','localhost','0.0.0.0'].concat(ips.ips||[]);
+        var parsed=new URL(clientAddr.indexOf('://')>-1?clientAddr:'http://'+clientAddr);
+        if(localAddrs.indexOf(parsed.hostname)>=0){
+          done();toast(t('sharing.cannotJoinSelf'),'error');return;
+        }
+      }catch(e){}
+    }
+  }
+
+  var prevSharingEnabled=sharingStatusCache&&sharingStatusCache.enabled;
+  var prevRole=sharingStatusCache&&sharingStatusCache.role;
+  if(prevSharingEnabled&&!sharingEnabled){
+    var confirmMsg=prevRole==='hub'?t('sharing.disable.confirm.hub'):t('sharing.disable.confirm.client');
+    if(!confirm(confirmMsg)){done();return;}
+  }
+
+  var ok=await doSaveConfig(cfg, saveBtn, 'hubSaved');
+  if(ok){
     loadSharingStatus(false);
     if(sharingEnabled){
       updateHubShareInfo();
       setTimeout(function(){alert(t('settings.hub.restartAlert'));},300);
     }
-  }catch(e){
-    toast(t('settings.save.fail')+': '+e.message,'error');
-  }finally{done();}
+    if(prevSharingEnabled&&!sharingEnabled){
+      setTimeout(function(){alert(t('sharing.disable.restartAlert'));},300);
+    }
+  }
+}
+
+async function saveGeneralConfig(){
+  var card=document.querySelector('.card-general');
+  var saveBtn=card.querySelector('.settings-actions .btn-primary');
+
+  const cfg={};
+  const vp=document.getElementById('cfgViewerPort').value.trim();
+  if(vp) cfg.viewerPort=Number(vp);
+  cfg.telemetry={enabled:document.getElementById('cfgTelemetryEnabled').checked};
+
+  await doSaveConfig(cfg, saveBtn, 'generalSaved');
+}
+
+async function saveConfig(){
+  await saveModelsConfig();
 }
 
 async function testModel(type){
@@ -5781,12 +6013,25 @@ function renderToolAgg(data){
     '</tbody></table>';
 }
 
+/* ─── Sharing status polling ─── */
+var _sharingPollTimer=null;
+function startSharingPoll(){
+  stopSharingPoll();
+  _sharingPollTimer=setInterval(function(){
+    if(sharingStatusCache&&sharingStatusCache.enabled) loadSharingStatus(false);
+  },30000);
+}
+function stopSharingPoll(){
+  if(_sharingPollTimer){clearInterval(_sharingPollTimer);_sharingPollTimer=null;}
+}
+
 /* ─── Data loading ─── */
 async function loadAll(){
   await Promise.all([loadStats(),loadMemories(),loadSharingStatus(false)]);
   checkMigrateStatus();
   connectPPSSE();
   checkForUpdate();
+  startSharingPoll();
 }
 
 async function loadStats(ownerFilter){